/* Shared mobile product layout approved on the A4 product page. */
.related-products { display: none; }
.breadcrumbs--mobile { display: none; }
@media (max-width: 767px) {
  :root { --header: 64px; --mobile-gutter: 16px; }
  html { overflow-x: hidden; scroll-padding-top: calc(var(--header) + 12px); }
  body { overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); }

  .site-header {
    height: var(--header);
    padding: 0 var(--mobile-gutter);
    background: rgba(247, 244, 239, .88);
    border-bottom-color: rgba(30, 30, 30, .1);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .site-header nav {
    height: 100%;
    gap: 0;
    flex-direction: row;
    align-items: center;
  }
  .site-header nav:first-child a { display: none; }
  .site-header nav:first-child a:first-child {
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-size: 9px;
    line-height: 1;
  }
  .site-header__logo { align-self: center; width: 104px; }
  .site-header__right { height: 100%; gap: 12px !important; flex-direction: row !important; align-items: center !important; }
  .site-header__right > * { display: none !important; }
  .site-header__right a[href*="favorites"],
  .site-header__right button[data-wishlist-header] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0;
    line-height: 1;
  }
  .site-header__right a[href*="favorites"]::before,
  .site-header__right button[data-wishlist-header]::before { content: "♡"; font-size: 18px; font-weight: 400; }
  .site-header__right a[href*="checkout"],
  .site-header__right button[data-cart] {
    display: inline-flex !important;
    align-items: center;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0;
    line-height: 1;
  }
  .site-header__right a[href*="checkout"]::before,
  .site-header__right button[data-cart]::before { content: "Корзина"; font-size: 9px; }
  .site-header__right [data-favorites-count], .site-header__right [data-cart-count] { font-size: 8px; vertical-align: top; }

  .breadcrumbs--mobile {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: var(--mobile-gutter);
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 8px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .breadcrumbs--mobile a { color: inherit; text-decoration: none; }
  .product-info > .breadcrumbs { display: none; }

  .product-layout,
  .product { display: flex; flex-direction: column; min-height: 0; }
  .product-crop {
    position: relative;
    top: auto;
    order: 1;
    width: 100%;
    height: min(122vw, 570px);
    background: #f6f2ec;
  }
  .product-crop img { right: 0; height: 100%; max-width: none; }
  .product-crop::after { left: var(--mobile-gutter); bottom: 14px; font-size: 8px; }
  .product-crop__index { display: none !important; }

  .product-info {
    position: relative;
    top: auto;
    order: 2;
    min-height: 0;
    padding: 32px var(--mobile-gutter) 26px;
    border: 0;
  }
  .breadcrumbs { margin: 0 0 42px; font-size: 8px; }
  .product-info__main { padding: 0; }
  .eyebrow { margin-bottom: 12px; font-size: 9px; }
  h1 { font-size: 50px; line-height: .94; }
  .edition { margin-top: 10px; font-size: 10px; }
  .price { margin-top: 20px; font-size: 16px; }
  .description { margin: 22px 0 30px; font-size: 13px; line-height: 1.65; }
  .choice { margin-bottom: 14px; }
  .swatches {
    gap: 13px;
    margin: 0 calc(var(--mobile-gutter) * -1) 30px;
    padding: 0 var(--mobile-gutter) 4px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .swatches::-webkit-scrollbar { display: none; }
  .swatches li { flex: 0 0 auto; scroll-snap-align: start; }
  .swatch { width: 32px; height: 32px; padding: 4px; }
  .buy { min-height: 56px; }
  .stock { margin: 14px 0 30px; font-size: 9px; }
  .details summary { min-height: 56px; align-items: center; padding: 16px 2px; }
  .details__body { padding: 0 2px 20px; font-size: 12px; line-height: 1.65; }
  .product-info__foot { padding-top: 22px; }

  .gallery {
    order: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 5px 0 0;
  }
  .gallery figure {
    position: relative;
    min-height: 0;
    aspect-ratio: 4 / 5;
    margin: 0;
  }
  .gallery img { min-height: 0; object-fit: cover; }
  .gallery figure[data-fit="contain"] img,
  .gallery figure[data-kind="studio"] img { padding: 8%; object-fit: contain; }
  .story {
    grid-template-columns: 1fr;
    min-height: 0;
    margin: 0;
  }
  .story img { width: 100%; height: min(126vw, 600px); max-height: none; object-fit: cover; }
  .story__copy { padding: 52px 20px 60px; }
  .story h2 { margin: 18px 0; font-size: 38px; line-height: 1.08; }
  .story p { font-size: 13px; line-height: 1.7; }

  .related-products { display: block; padding: 64px var(--mobile-gutter) 72px; background: #fff; }
  .related-products__eyebrow { margin: 0 0 12px; color: var(--brown); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .related-products h2 { margin: 0 0 30px; font-size: 36px; line-height: 1.05; }
  .related-products__track {
    display: flex;
    gap: 10px;
    margin-right: calc(var(--mobile-gutter) * -1);
    padding-right: var(--mobile-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .related-products__track::-webkit-scrollbar { display: none; }
  .related-card { flex: 0 0 72vw; max-width: 285px; scroll-snap-align: start; text-decoration: none; }
  .related-card__image { display: block; aspect-ratio: 4 / 5; background: #fdf9f9; overflow: hidden; }
  .related-card__image img { width: 100%; height: 100%; object-fit: contain; }
  .related-card__body { padding-top: 12px; }
  .related-card__body strong { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
  .related-card__body span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
  .related-card__body b { display: block; margin-top: 9px; font-size: 11px; }

  .mobile-purchase-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 6px;
    padding: 9px 10px max(9px, env(safe-area-inset-bottom));
    background: rgba(247, 244, 239, .9);
    border-top: 1px solid rgba(30, 30, 30, .12);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transform: translateY(110%);
    transition: transform .28s ease;
  }
  .mobile-purchase-bar.is-visible { transform: none; }
  .mobile-purchase-bar__buy {
    min-height: 50px;
    border: 0;
    background: transparent;
    color: #1e1e1e;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .mobile-purchase-bar__buy.is-on-dark { color: #fff; }
  .mobile-purchase-bar__buy span { margin-left: 12px; opacity: .72; }
  .mobile-purchase-bar__wish {
    display: grid;
    place-items: center;
    width: 50px;
    min-height: 50px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: #1e1e1e;
    font-size: 0;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
  }
  .mobile-purchase-bar__wish.is-on-dark { color: #fff; }
  .mobile-purchase-bar__wish::before {
    content: "♡";
    font-family: "Times New Roman", Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-1px);
  }
  .mobile-purchase-bar__wish[aria-pressed="true"] {
    background: transparent;
  }
  .mobile-purchase-bar__wish[aria-pressed="true"]::before { content: "♥"; font-size: 20px; }

  /* Preserve the mobile composition and proportions of the Serotonin footer. */
  .footer__top {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: calc(var(--fr) * 1.3) calc(var(--fr) * 2.2);
    margin-bottom: calc(var(--fr) * 5);
  }
  .footer__top .footer__nav { display: contents; }
  .footer__img {
    top: calc(var(--fr) * 13.5);
    bottom: auto;
    left: calc(var(--fr) * 6.5);
    width: calc(var(--fr) * 26);
  }
  .footer__title {
    row-gap: calc(var(--fr) * 1.2);
    font-size: calc(var(--fr) * 3.8);
    line-height: 1.05;
  }
  .footer__title span {
    margin-top: calc(var(--fr) * 1);
    font-size: calc(var(--fr) * 1.8);
    line-height: 1.2;
    white-space: nowrap;
  }
  .footer__form { flex-wrap: wrap; }
  .footer__submit { width: auto; }

}

@media (max-width: 359px) {
  .site-header { padding-inline: 12px; }
  .site-header__logo { width: 92px; }
  .site-header__right { gap: 8px !important; }
  .site-header__right a:nth-child(3)::before, .site-header nav:first-child a:first-child { font-size: 8px; }
  h1 { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-purchase-bar { transition: none; }
}
