/* ═══════════════════════════════════════════════════════
   RESPONSIVE OVERLAY
   Loaded LAST — overrides desktop vw-based styles.
   Breakpoints: 1024 (tablet landscape) / 768 (tablet
   portrait, hamburger kicks in) / 480 (phone).
═══════════════════════════════════════════════════════ */

/* ── Hamburger button: hidden on desktop, shown at ≤768 ── */
.header__burger {
  display: none;
  position: relative;
  z-index: 220;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.header__burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #151515;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease,
              background 0.4s ease;
  transform-origin: center;
}
.header__burger[aria-expanded="true"] span { background: #303030; }
.header__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile menu: fullscreen overlay from ≤768 ──
   Default state (desktop): fully hidden.
   ≤768: participates in flow, opens via .is-open. */
.header__mobile-menu {
  display: none;
}
@media (max-width: 768px) {
  .header__mobile-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 210;
    background: #F2F2F2;
    padding: 88px 24px 40px;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.3s ease,
                visibility 0.3s ease,
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .header__mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
/* v30: close × кнопка сверху над home, левая выключка */
.header__mobile-menu-close {
  background: none;
  border: none;
  color: #303030;
  font-size: 26px;
  line-height: 1;
  padding: 4px 0 12px;
  margin: 0;
  cursor: pointer;
  align-self: flex-start;
  font-family: var(--font-ui);
}
.header__mobile-menu-close:hover,
.header__mobile-menu-close:active { color: #555; }

.header__mobile-menu a {
  font-family: var(--font-ui);
  /* -20%: 28px → 22px, padding 16 → 13, gap 8 → 6 (в .header__mobile-menu выше) */
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #151515;
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid #DEDEDE;
  transition: color 0.25s ease;
}
.header__mobile-menu a:hover,
.header__mobile-menu a:active { color: #404040; }
body.is-menu-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════
   ≤1024px — TABLET LANDSCAPE
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .header {
    padding: 40px 48px 0;
  }
  .header__cart-wrap {
    top: 20px;
    right: 48px;
  }
  .header__brand-line { font-size: 1.75rem; }

  /* 4-col grids collapse to 3-col */
  .wp-grid,
  .catalog-grid,
  .mp-collections__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   ≤768px — TABLET PORTRAIT / LARGE PHONE
   Header transforms into hamburger + brand + cart.
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Header: compact 3-col hamburger | brand | cart ── */
  .header {
    padding: 0 20px;
    height: 56px;
    grid-template-columns: 44px 1fr 44px;
    grid-template-rows: 56px;
    grid-auto-rows: 0;
    align-items: center;
    background: #F2F2F2;
    border-bottom: 1px solid #DEDEDE;
    overflow: hidden;
  }
  .header > * { grid-row: 1; }
  /* Hide the left nav entirely */
  .header__nav--left { display: none; }

  /* Right nav: keep visible (holds cart) but hide its text links */
  .header__nav--right {
    display: flex;
    grid-column: 3;
    justify-self: end;
    gap: 0;
    padding: 0;
  }
  .header__nav--right .nav-line { display: none; }

  .header__burger {
    display: flex;
    grid-column: 1;
    justify-self: start;
  }

  .header__brand {
    grid-column: 2;
    justify-self: center;
    transform: none;
    flex-direction: row;
    gap: 6px;
    align-items: baseline;
  }
  .header__brand-line {
    font-size: 18px;
    color: #151515 !important;
    line-height: 1;
    padding-left: 0 !important;
  }

  /* Cart-wrap variant (index.html, cart.html, product.html) */
  .header__cart-wrap {
    position: static;
    grid-column: 3;
    justify-self: end;
    top: auto;
    right: auto;
  }
  .header__cart { color: #151515 !important; padding-top: 0; }
  .header__cart svg { width: 22px; height: 22px; }

  /* Hide the "{shopping cart}" text label from index.html cart */
  .header__cart-wrap .header__cart > :not(svg):not(.cart-badge) { display: none; }

  /* On mobile the header is always solid — cancel scroll transitions */
  .header--scrolled { background: #F2F2F2; }

  /* Prevent horizontal overflow */
  html, body { overflow-x: hidden; }

  /* Push content below the fixed 56px header — on ALL pages including
     .home. On mobile the hero must not sit under the opaque header;
     photos should be fully visible below the header plate. */
  main.page,
  .legal-content,
  .policy-content {
    padding-top: 56px;
  }

  /* ── Grids: 4→2, 3→2 ── */
  .wp-grid,
  .catalog-grid,
  .mp-collections__grid,
  .mp-collections-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ── Modals: stack, no vw-columns ── */
  .product-modal__grid,
  .print-shop-modal__grid,
  .ps-modal__grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── Filter pills: matches desktop 3.3:1 padding ratio ── */
  .pill,
  .filter-pill,
  .mp-pill,
  .ps-filter,
  .wp-filter {
    font-size: 13px !important;
    padding: 9px 26px !important;
    border-radius: 999px !important;
    min-height: 36px;
    line-height: 1.2 !important;
  }

  /* Touch targets */
  button,
  .btn-ghost,
  .btn-primary,
  a.header__cart { min-height: 44px; }

  /* ── Section padding: kill the 13vw+ blowout ── */
  .media-section,
  .mp-section,
  .ps-section,
  .wp-section { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── Left-margin rule: 5.208vw → 20px on mobile ── */
  .section-title,
  .mp-section__title,
  .ps-filters,
  .wp-filters,
  .mp-filters { padding-left: 20px !important; }
}

/* ═══════════════════════════════════════════════════════
   ≤480px — PHONE
   Grids collapse to 1-col, modals go full-screen.
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* ── Grids: everything to single column ── */
  .wp-grid,
  .catalog-grid,
  .mp-collections__grid,
  .mp-collections-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Modals: go full-screen ── */
  .product-modal,
  .print-shop-modal,
  .ps-modal {
    inset: 0 !important;
    padding: 16px !important;
  }
  .product-modal__grid,
  .print-shop-modal__grid,
  .ps-modal__grid { gap: 16px !important; }

  /* ── Filter pills: horizontal scroll instead of wrap ── */
  .ps-filters,
  .wp-filters,
  .mp-filters,
  .filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    padding-right: 20px !important;
  }
  .ps-filters::-webkit-scrollbar,
  .wp-filters::-webkit-scrollbar,
  .mp-filters::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar { display: none; }
  .pill, .filter-pill, .mp-pill, .ps-filter, .wp-filter {
    flex-shrink: 0;
  }

  /* ── Footer: single column ── */
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 32px 20px !important;
  }
  .footer__links {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
}

/* ═══════════════════════════════════════════════════════
   MAIN-PAGE-SPECIFIC (mp-*) — ≤768
   Every vw heading gets clamped, wide sections stack.
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Custom cursor: irrelevant on touch */
  .hero-cursor { display: none !important; }

  /* Hero — landscape aspect (3:2) to match carousel photo format.
     Was: full-viewport vertical, cropping landscape photos top/bottom. */
  .mp-hero {
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    min-height: 0 !important;
    cursor: default;
  }

  /* Headings: font-size = author-name mobile (28px). Vertical spacing
     scales with the font (em units) so above/below margins stay in
     proportion. Block centered via `width: fit-content` + margin auto
     — preserves the staggered per-line composition but centers the
     bounding box on the page. */
  .mp-wallpapers__heading,
  .mp-collections__heading,
  .mp-nl__heading,
  .mp-rn__heading,
  .mp-ry__heading,
  .mp-about__heading,
  .mp-collab__heading,
  .mp-contacts__heading {
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin-top: 1em !important;
    margin-bottom: 1.5em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: fit-content !important;
    max-width: calc(100vw - 40px) !important;  /* 20px safety zone each side */
  }
  .mp-contacts__heading {
    text-align: center !important;
  }
  /* Each staggered line stays on ONE row — no wrap when text is long.
     Combined with heading max-width, ensures the block never touches
     viewport edges (min 20px safety zone). Wallpapers heading excluded
     — its desktop composition is intentionally left un-touched on mobile. */
  .mp-nl__heading .section-title__line,
  .mp-rn__heading .section-title__line,
  .mp-ry__heading .section-title__line,
  .mp-collab__heading .section-title__line {
    white-space: nowrap !important;
  }

  /* Staggered per-line padding-left — mobile composition normalized so
     the SHORTEST-padding line (line 2 on nl/rn) sits flush against the
     fit-content parent's left edge. Other lines keep their desktop-
     relative offsets, scaled to compensate for the smaller viewport /
     larger relative font on mobile. */
  /* Nl L3 "beneath the surface." is ~58vw; pad reduced 37→30vw. */
  .mp-nl__heading .section-title__line:nth-child(1) { padding-left: 15.25vw !important; }
  .mp-nl__heading .section-title__line:nth-child(2) { padding-left:  0        !important; }
  .mp-nl__heading .section-title__line:nth-child(3) { padding-left: 30vw    !important; }
  .mp-rn__heading .section-title__line:nth-child(1) { padding-left: 22.65vw !important; }
  .mp-rn__heading .section-title__line:nth-child(2) { padding-left:  0        !important; }
  .mp-rn__heading .section-title__line:nth-child(3) { padding-left: 20.40vw !important; }
  .mp-collab__heading .section-title__line:nth-child(1) { padding-left: 12.50vw !important; }
  .mp-collab__heading .section-title__line:nth-child(2) { padding-left:  0        !important; }
  /* Item 9: L1 разбивается на 2 строки через BR — collab текст помещается в 3 строки.
     Также разрешаем wrap на L1 (без nowrap) чтобы BR отработал корректно. */
  .mp-collab__heading .section-title__line:nth-child(1) { white-space: normal !important; }
  .mp-collab__heading .section-title__line:nth-child(1) .mobile-br { display: inline !important; }
  /* Item 2 (v22): активируем ВСЕ .mobile-br на mobile — теперь работает
     и в mp-about__bio ("The") и в wallpapers heading (см. пункт 3). */
  .mobile-br { display: inline !important; }
  /* Item 2 (v24): collab-заголовок = 28px, ЛЕСЕНКА из 4 строк:
     L1 "Do you have" → L2 "any interesting" → L3 "suggestions" → L4 "about collaborations?"
     Каждая строка сдвинута правее предыдущей на +20px (progressive staircase).
     Реализовано через вложенные sub-span'ы с классом .cl-p--N внутри L1. */
  .mp-collab__heading {
    font-size: 28px !important;
    line-height: 1.15 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 20px !important;
  }
  .mp-collab__heading .section-title__line {
    display: block !important;
    padding-left: 0 !important;
    margin: 0 !important;
    position: relative !important;
    text-align: left !important;
    left: 0 !important;                       /* сброс прежних nth-child offsets */
  }
  /* Sub-span'ы (nested inside L1) — inline-block для padding-left после BR.
     L4 (.cl-p--4) — прямой ребёнок h2 (не nested), остаётся display:block.
     v31: убрал padding-left: 0 reset — конфликтовал с .cl-p--3 padding-left
     на равной specificity, из-за чего "suggestions" не двигался. */
  .mp-collab__heading .section-title__line .cl-p {
    display: inline-block !important;
  }
  /* v32: L3 "suggestions" ещё +20px → всего 100px вправо. */
  .mp-collab__heading .cl-p--1 { margin-left: -10px !important; padding-left: 0 !important; }
  .mp-collab__heading .cl-p--2 { padding-left: 0 !important; }
  .mp-collab__heading .cl-p--3 { padding-left: 100px !important; }
  .mp-collab__heading .section-title__line.cl-p--4 { padding-left: 100px !important; }

  /* Sections — universal side padding & vertical reset.
     padding-top reduced by 35% to match desktop rhythm change (48 → 32). */
  .mp-wallpapers,
  .mp-collections,
  .mp-nl,
  .mp-rn,
  .mp-ry,
  .mp-about,
  .mp-collab,
  .mp-contacts,
  .mp-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 32px !important;   /* −35% from 48px */
    padding-bottom: 24px !important;
  }
  /* Item 1: meta {curated...} + {exclusive...} — сдвиг вверх через
     отрицательный margin от .mp-wallpapers section-top-padding. */
  .mp-wallpapers { padding-top: 8px !important; }

  /* Bottom padding of wallpapers CTA halved 32→16px to reduce distance
     to next heading (Photo Collections). Kept per user's earlier ask. */
  .mp-wallpapers .mp-cta { padding: 16px 0 16px !important; }

  /* ── Wallpapers heading — 28px, 3 строки, все центрированы как блок.
        L2 "Open your phone" смещён влево на 20px через margin. */
  .mp-wallpapers__heading {
    font-size: 28px !important;
    line-height: 1.15 !important;
    width: auto !important;
    max-width: none !important;
    margin: 32px 0 24px !important;
    padding: 0 20px !important;
    text-align: center !important;
  }
  .mp-wallpapers__heading .section-title__line {
    margin-top: 0 !important;
    padding-left: 0 !important;
    /* L3 длинный — разрешаем wrap если не влезет, но L1/L2 короткие обычно
       умещаются в 1 строку. Nowrap не ставим — 28px ×31 char может не влезть. */
  }
  /* v28: L1 "Wallpaper videos:" — сдвиг вправо */
  .mp-wallpapers__heading .section-title__line:nth-child(1) {
    position: relative !important;
    left: 20px !important;
  }
  /* L2 "Open your phone" — сдвиг влево */
  .mp-wallpapers__heading .section-title__line:nth-child(2) {
    margin-left: 0 !important;
    position: relative !important;
    left: -30px !important;
  }
  /* L3 span (содержит L3 + L4 через BR). Base shift, детализация через sub-span. */
  .mp-wallpapers__heading .section-title__line:nth-child(3) {
    position: relative !important;
    left: 30px !important;
  }
  /* v31: L4 "actually chose" — ещё +20px → всего 70px правее L3 */
  .mp-wallpapers__heading .wp-l3 { display: inline-block !important; }
  .mp-wallpapers__heading .wp-l4 {
    display: inline-block !important;
    padding-left: 70px !important;
  }

  /* ── Wallpapers carousel — карточки и телефон ×3 от desktop-базы.
        Механика (JS позиционирование через offsetWidth) не меняется —
        просто увеличиваем визуальные размеры. Desktop не затронут. */
  .mp-wallpapers__stage { height: 121.5vw !important; }              /* 40.5 × 3 */
  .mp-wtrack { gap: 4.38vw !important; }                              /* 1.46 × 3 */
  .mp-wcard { width: 44.85vw !important; }                            /* 14.95 × 3 */
  .mp-phone { width: 54.021vw !important; }                           /* 18.007 × 3 */
  /* margin для active/fading = (phone - card)/2 = (54.021 - 44.85)/2 */
  .mp-wcard--active,
  .mp-wcard--fading {
    margin-left: 4.585vw !important;
    margin-right: 4.585vw !important;
  }
  /* Phone internals — vw-значения ×3 (screen border-radius + HUD текст) */
  .mp-phone__screen { border-radius: 4.896vw !important; }            /* 1.632 × 3 */
  .mp-phone__time { font-size: 8.25vw !important; }                   /* 2.75 × 3 */
  .mp-phone__date { font-size: 1.716vw !important; }                  /* 0.572 × 3 */
  .mp-phone__swipe { font-size: 1.254vw !important; }                 /* 0.418 × 3 */

  /* v26: meta-полоса скрыта на mobile. v27: равные отступы сверху и снизу
     от заголовка Wallpaper videos (hero → heading = heading → phone). */
  .mp-wallpapers__meta { display: none !important; }
  .mp-wallpapers__heading {
    margin-top: 28px !important;
    margin-bottom: 28px !important;
  }
  /* v29: touch-action pan-y на стейджах карусели — браузер сразу знает,
     что горизонтальные жесты = JS, вертикаль = native scroll. Убирает
     задержку распознавания первого свайпа после загрузки страницы. */
  .mp-wallpapers__stage,
  .mp-collections__stage {
    touch-action: pan-y !important;
  }

  /* Photo Collections heading — "Photo collections" на одной строке,
     центрирована на экране. Между словами — натуральный HTML-пробел
     (collapsed whitespace между inline-спанами) = один пробел шрифта. */
  .mp-collections__heading {
    display: block !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100vw !important;
    padding: 0 20px !important;
    margin: 0.5em auto !important;
  }
  .mp-collections__heading .section-title__line {
    display: inline !important;
    padding-left: 0 !important;
    left: 0 !important;
    position: static !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
  }
  /* Section padding halved to bring the collections heading closer to
     the wallpapers CTA above (16 CTA-bottom + 11 section-top = 27px
     total gap, was 64px). Ещё −30% в v22. */
  .mp-collections { padding-top: 8px !important; }   /* v23: ещё −30% (11 × 0.7) */

  /* Dots slidebar — universal size, 1.5× smaller than v7. Applies to
     both wallpaper carousel and photo collections dots. */
  .mp-dots { gap: 3px !important; }
  .mp-dot {
    height: 7px !important;
    width: 13px !important;
    padding: 7px 3px !important;
    margin: -7px -3px !important;
    border-radius: 999px !important;
  }
  .mp-dot::before {
    inset: 7px 3px !important;
    border-radius: 999px !important;
    border-width: 1px !important;
  }
  .mp-dot--active {
    width: 28px !important;
  }

  /* iOS Safari default play-button overlay on INCIPIENCE video —
     hide it so the loading state stays clean. */
  .mp-nl__film-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
  }
  .mp-nl__film-video::-webkit-media-controls {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════
     PHOTO COLLECTIONS CAROUSEL — proportional mobile scale
     Preserves the desktop JS-driven carousel (dots + click-to-
     switch, active card scale 1.3). vw values scaled 2× from
     desktop so cards fill more of the mobile viewport while the
     desktop composition (active-centered + partial neighbours)
     stays intact.
     ═══════════════════════════════════════════════════ */
  /* Cards + track scaled ×0.7 from previous (was ×2.0 of desktop).
     Smaller center card leaves visible gaps between neighbours. Active
     scale(1.3) preserved — active card visual width ≈ 67vw, side cards
     ≈ 16vw partial each. */
  .mp-collections__stage { height: 50.4vw !important; cursor: default; }  /* 72 × 0.7 */
  .mp-ctrack {
    margin-top: -17.22vw !important;     /* -24.6 × 0.7 */
    gap: 2.04vw !important;              /*   2.92 × 0.7 */
  }
  .mp-ccard {
    width: 51.7vw !important;            /*  73.85 × 0.7 */
    cursor: default;
  }
  .mp-ccard__img {
    height: 34.46vw !important;          /*  49.23 × 0.7 */
  }
  /* Item 4: активная центральная карточка (scale 1.3) получает воздух слева/справа.
     Override JS inline margin '0 5.538vw' (desktop-tuned) на mobile-value. */
  .mp-collections .mp-ccard--active {
    margin: 0 10vw !important;
  }
  /* Preserve desktop active-card scale(1.3) — do NOT override transform. */
  .mp-ccard__label {
    font-size: 3vw !important;
    bottom: 1.66vw !important;
    left: 1.66vw !important;
    color: #F2F2F2 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65),
                 0 0 12px rgba(0, 0, 0, 0.35) !important;
    opacity: 1 !important;
  }
  .mp-ccard:not(.mp-ccard--active) .mp-ccard__label { opacity: 1 !important; }

  /* ═══════════════════════════════════════════════════
     PARALLAX KILL — mobile jitter fix.
     main-page.js writes element.style.transform on every scroll
     frame for 5 parallax targets; on touch devices these repaints
     jitter native smooth-scroll. Stylesheet !important beats JS
     inline. For images with scale(1.08) fallback (hero, portrait,
     collections) we keep the scale so image cover stays flush.
     ═══════════════════════════════════════════════════ */
  .mp-hero__slide img,
  .mp-about__portrait img,
  .mp-ccard__img img       { transform: scale(1.08) !important; }
  .mp-cta .mp-pill,
  .mp-about__heading,
  .mp-about__text,
  .mp-nl__cap              { transform: none !important; }
  .mp-collections .mp-dots { margin: 12px 0 !important; }
  .mp-collections .mp-cta { padding: 16px 0 32px !important; }

  /* ═══════════════════════════════════════════════════
     NORTHERN LIGHTS / RUSSIAN NORTH / RUSSIAN YOUTH
     Native touch-scroll, cards keep proportional ratios.
     ═══════════════════════════════════════════════════ */
  .mp-nl__stage,
  .mp-rn__stage,
  .mp-ry__stage {
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: default;
    padding: 0 !important;
  }
  .mp-nl__stage::-webkit-scrollbar,
  .mp-rn__stage::-webkit-scrollbar,
  .mp-ry__stage::-webkit-scrollbar { display: none; }
  .mp-nl__track,
  .mp-rn__track {
    transform: none !important;
    position: relative !important;
    top: auto !important;
    padding: 0 20px !important;
    gap: 12px !important;
  }
  /* Cards proportional to desktop: 48vw landscape / 24vw portrait = 2:1 */
  .mp-nl__card,
  .mp-rn__card { height: 55vw !important; max-height: 380px !important; }
  .mp-nl__card--ls,
  .mp-rn__card--ls { width: 82vw !important; max-width: 560px !important; }
  .mp-nl__card--pt,
  .mp-rn__card--pt { width: 41vw !important; max-width: 280px !important; }
  .mp-nl .mp-cta,
  .mp-rn .mp-cta,
  .mp-ry .mp-cta { padding: 20px 0 12px !important; }

  /* INCIPIENCE film — landscape 16:9 (matches source video width),
     was full-viewport (100vh) which cropped the frame vertically. */
  .mp-nl__film-stage {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  /* INCIPIENCE captions — 4 words {solitude} {truth} {hypnotic} {fourth}
     must fit on ONE row with proportional spacing. Font shrunk so total
     row (4 words + 3 gaps) fits within viewport. Russian North uses same
     pattern with different text. */
  .mp-nl__captions,
  .mp-rn__captions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 4px !important;
    /* Item 3 (v20): caps ещё ниже — padding-top 32px */
    padding: 32px 20px 12px !important;
    font-size: 3.4vw !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  .mp-nl__cap,
  .mp-rn__cap {
    flex: 0 1 auto;
    white-space: nowrap;
  }

  /* About section — stack portrait + text */
  .mp-about__heading { text-align: center !important; margin-bottom: 32px !important; }
  .mp-about__body {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }
  /* Portrait reduced ~20% (300 → 240px max), position unchanged. */
  .mp-about__portrait {
    width: 80% !important;
    max-width: 240px !important;
    height: auto !important;
    aspect-ratio: 26.25 / 32.24;
  }
  .mp-about__text { padding-top: 0 !important; width: 100%; }
  .mp-about__name {
    align-items: center !important;
    /* v30→v31: -30% (28→20px). calc-padding в ch-единицах пропорционально */
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
  /* v34: точное LAV-выравнивание через runtime-измерение (mpAlignLav в
     main-page.js). CSS задаёт layout, JS выставляет inline padding-right
     на Yaroslav и padding-left на Bulavin из фактических ширин "Yaros",
     "Bu", "lav", "in" в текущем шрифте/кегле. "lav" вертикально совпадает
     + bbox композиции центрируется на 50% viewport. */
  .mp-about__name {
    display: block !important;
    text-align: initial !important;
    width: 100% !important;
  }
  .mp-about__name span {
    display: block !important;
    width: 100% !important;
    transform: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .mp-about__name span:first-child {
    text-align: right !important;
    /* padding-right выставляется JS-ом mpAlignLav */
  }
  .mp-about__name span:last-child {
    text-align: left !important;
    /* padding-left выставляется JS-ом mpAlignLav */
  }
  .mp-about__label { font-size: 18px !important; margin-bottom: 12px !important; }
  .mp-about__bio {
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  /* Collaboration form — stack */
  .mp-collab { padding: 40px 20px !important; }
  .mp-collab__heading { padding: 0 !important; margin-bottom: 24px !important; }
  .mp-collab__body {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 !important;   /* reset desktop 13.122vw side-padding (used to align to about-body verticals) */
  }
  .mp-collab__desc {
    flex: 1 1 auto !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .mp-collab__form-col { width: 100%; }
  .mp-collab__form { gap: 16px !important; }
  .mp-collab__field {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .mp-collab__label {
    width: auto !important;
    font-size: 14px !important;
    padding-top: 0 !important;
  }
  .mp-collab__input,
  .mp-collab__textarea {
    font-size: 15px !important;
    padding: 12px 16px !important;
    border-width: 1px !important;
  }
  .mp-collab__input { height: 44px !important; border-radius: 999px !important; }
  .mp-collab__textarea { height: 140px !important; border-radius: 8px !important; }
  /* Apply button: inherit pill sizing, right-align, don't stretch */
  .mp-collab__success {
    font-size: 14px !important;
    text-align: center !important;
    margin: 12px 0 0 !important;
  }
  .mp-collab__apply {
    /* v27: display:table центрируется через margin auto (в отличие от inline-block).
       Даёт корректное горизонтальное центрирование в любом контексте. */
    display: table !important;
    margin: 16px auto 0 !important;
    align-self: center !important;
    width: auto !important;
    padding: 9px 26px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    min-height: 36px !important;
    line-height: 1.2 !important;
  }

  /* Contacts + footer */
  .mp-contacts { padding: 32px 20px !important; }
  .mp-contacts__heading {
    /* Item 6 (v23): вернули 28px — как у остальных заголовков mp-*__heading.
       Было 20px. Остальная верстка блока contacts не тронута. */
    font-size: 28px !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.15 !important;
    word-break: break-word;
  }

  .mp-footer { padding: 32px 20px 24px !important; }
  .mp-footer__top {
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
    align-items: flex-start !important;
  }
  .mp-footer__follow { font-size: 14px !important; }
  .mp-footer__socials { gap: 24px !important; }
  .mp-footer__icon { width: 40px !important; height: 40px !important; }
  .mp-footer__icon[aria-label="Patreon"] { width: 30px !important; height: 30px !important; }
  .mp-footer__links {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-bottom: 24px !important;
  }
  .mp-footer__col { gap: 8px !important; }
  .mp-footer__col a { font-size: 15px !important; }
  .mp-footer__col--right { text-align: left !important; }
}

/* ═══════════════════════════════════════════════════════
   MAIN-PAGE-SPECIFIC — ≤480 refinements
   Preserve big carousels — user wants them larger, not smaller.
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Photo cards keep desktop proportions */
  .mp-nl__card--ls,
  .mp-rn__card--ls { width: 84vw !important; }
  .mp-nl__card--pt,
  .mp-rn__card--pt { width: 42vw !important; }
  /* No block-3/4 tweaks here — the ≤768 vw scale already tracks viewport. */
}

/* ═══════════════════════════════════════════════════════
   WALLPAPERS PAGE (wp-*) — ≤768
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .wp-header {
    padding: 24px 20px 16px !important;
  }
  .wp-heading {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    margin-bottom: 8px !important;
    line-height: 1.15 !important;
  }
  .wp-subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .wp-filters {
    padding: 0 20px 20px !important;
    gap: 8px !important;
  }
  /* Grid: 2-col on 768 (not just default 4→2 rule; make sure padding fits) */
  .wp-grid {
    padding: 0 20px 40px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 20px !important;
  }
  .wp-card__foot {
    padding: 8px 0 0 !important;
    gap: 2px !important;
  }
  .wp-card__title,
  .wp-card__price {
    font-size: 14px !important;
  }
  .wp-card__price { gap: 5px !important; }
  .wp-card__price-old { font-size: 12px !important; }
  .pmod__price { gap: 6px !important; }
  .pmod__price-old { font-size: 15px !important; }
  .wp-card__coll {
    font-size: 11px !important;
    /* Ellipsis без flex-переделок — не влияет на размер карточки.
       Скрывает текст только когда он реально не помещается. */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .wp-badge {
    padding: 2px 8px !important;
    border-radius: 999px !important;
    border-width: 1px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  /* v27: явная calc-высота от viewport гарантирует одинаковый размер media
     всех карточек. iOS Safari игнорировал aspect-ratio + padding-bottom при
     contain: layout paint на .wp-card__media. Сейчас: height рассчитан от
     ширины карточки в grid (viewport - 40 padding - 12 gap) / 2 × 16/9. */
  .wp-grid {
    align-items: start !important;
    grid-auto-rows: min-content !important;
  }
  /* v32: убираем contain с card + media (iOS Safari баг с aspect-ratio внутри
     contain: layout paint). Высота задаётся JS-эквалайзером `wpEqualizeMedia`
     в wallpapers.js — измеряет реальную ширину первой карточки и применяет
     одинаковую height ко всем .wp-card__media. Гарантирует равенство размеров. */
  .wp-card,
  .wp-card__media {
    contain: none !important;
  }
  .wp-card__media {
    aspect-ratio: 9 / 16 !important;
    padding-bottom: 0 !important;
    /* height задаётся inline через JS — здесь не фиксируем */
  }
  /* Коллекция-name — принудительный ellipsis */
  .wp-card__coll {
    max-width: 60% !important;
  }

  /* Wallpapers detail heading — 1:1 с .ps-col-heading mobile
     (font 5.90625vw, padding 3.5168vw 5.208vw 4.6868vw) */
  .wp-detail-heading {
    font-size: 5.90625vw !important;
    padding: 3.5168vw 5.208vw 4.6868vw !important;
    line-height: 1.15 !important;
  }

  /* Wallpapers nav-карусель — 1:1 mirror of .ps-col-nav mobile scaling.
     Desktop base: card 12.5vw, gap 1.04vw. Mobile ×2.25 (same as print-shop). */
  .wp-detail-nav {
    padding-bottom: 4.5vw !important;
  }
  .wp-detail-nav__track {
    gap: 2.34vw !important;
  }
  .wp-detail-nav__card {
    flex: 0 0 28.125vw !important;
  }
  /* Name overlay — larger on mobile, matches heading scaling */
  .wp-detail-nav__name,
  .ps-col-nav__name {
    font-size: 2.5vw !important;
  }
}

/* ═══════════════════════════════════════════════════════
   WALLPAPERS PAGE — ≤480 (single col too tall — keep 2-col)
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Override the earlier .wp-grid 1-col rule — 9:16 cards too tall at 375 width */
  .wp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 16px !important;
    padding: 0 20px 32px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PRODUCT MODAL (pmod-*) — ≤768
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pmod__toolbar {
    padding: 12px 20px !important;
  }

  /* Mobile sheet: slightly less backdrop (10vh vs desktop 12vh) + tighter radius +
     room for iOS-style drag handle. Close remains in flow on title line via .pmod__top. */
  .pmod__scroll {
    top: 10vh !important;
    border-radius: 16px 16px 0 0 !important;
    padding-top: 32px !important;   /* room for drag handle */
  }

  /* Expanded (scroll > 0) — sheet fills the screen, backdrop hides */
  .pmod--expanded .pmod__scroll {
    top: 0 !important;
    border-radius: 0 !important;
  }

  /* Drag handle — pill at top-center of sheet, iOS-style. Mobile only. */
  .pmod__scroll::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(48, 48, 48, 0.3);
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
  }

  /* Close — in natural flow on the same line as title (.pmod__top).
     Sizing kept 40x40 with clean circular border. */
  .pmod__close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-width: 1px !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 !important;
    padding: 0 !important;
    font-size: 16px !important;
  }

  /* Toast — mobile-sized pill above bottom edge */
  .pmod__toast {
    bottom: 16px !important;
    padding: 10px 16px !important;
    gap: 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  }
  .pmod__toast-link {
    text-underline-offset: 2px !important;
  }
  .pmod__main {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
  }
  .pmod__media-col {
    margin-bottom: 20px;
  }
  /* v25: phone-контейнер = 9:16 (натуральный аспект видео), не растягиваем.
     Высота 60vh, ширина авто. HUD увеличен под мобильную шкалу. */
  .pmod__phone {
    height: 60vh !important;
    width: auto !important;
    aspect-ratio: 9 / 16 !important;
    max-width: 100% !important;
  }
  .pmod__video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    margin: 0 !important;
    background: transparent !important;
  }
  /* HUD — размеры в vh: phone = 60vh, HUD ~7% времени = ~4.2vh */
  .pmod__phone-time { font-size: 4.2vh !important; margin-top: 12% !important; font-weight: 200 !important; }
  .pmod__phone-date { font-size: 1.4vh !important; margin-top: 0.6vh !important; }
  .pmod__phone-swipe { font-size: 1.1vh !important; margin-bottom: 6% !important; }
  .pmod__top {
    margin-bottom: 12px !important;
    flex-wrap: wrap;
    gap: 4px;
  }
  .pmod__title { font-size: 22px !important; }
  .pmod__price { font-size: 20px !important; margin-left: 8px !important; }
  .pmod__divider { margin: 0 0 20px !important; border-width: 1px !important; }
  .pmod__desc-label { font-size: 12px !important; margin: 0 0 8px !important; letter-spacing: 0.05em; }
  .pmod__desc-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
  }
  .pmod__tabs { gap: 8px !important; margin-bottom: 12px !important; }
  .pmod__tab {
    font-size: 13px !important;
    padding: 8px 16px !important;
  }
  /* Accordion panels под tabs */
  .pmod__acc { margin-bottom: 20px !important; }
  .pmod__acc-panel {
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 8px 0 0 !important;
  }
  /* Tap на mobile залипает :hover (iOS/Android). Возвращаем таб в белый
     когда он НЕ активен, независимо от :hover state. */
  .pmod__tab:not(.pmod__tab--active),
  .pmod__tab:not(.pmod__tab--active):hover,
  .pmod__tab:not(.pmod__tab--active):focus {
    background: transparent !important;
    color: #303030 !important;
  }
  .pmod__add-to-cart {
    padding: 14px 20px !important;
    border-radius: 999px !important;
    border-width: 1px !important;
    font-size: 14px !important;
    min-height: 48px;
  }
  /* Sticky :hover на iOS/Android — кнопка залипает в чёрном после тапа.
     Возвращаем в белый когда НЕ добавлен в корзину, независимо от hover. */
  .pmod__add-to-cart:not(.pmod__add-to-cart--in-cart),
  .pmod__add-to-cart:not(.pmod__add-to-cart--in-cart):hover,
  .pmod__add-to-cart:not(.pmod__add-to-cart--in-cart):focus {
    background: transparent !important;
    color: #303030 !important;
  }

  /* Backstage — 2 tumbnails side-by-side ~29vw each, left-aligned.
     Container grows for 2 images; empty state = single grey 29vw box. */
  .pmod__backstage {
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 auto 16px 0 !important;
    gap: 8px !important;
  }
  .pmod__backstage--empty {
    max-width: 29.166vw !important;
    aspect-ratio: 3 / 2 !important;
  }
  .pmod__backstage-img {
    width: 29.166vw !important;
  }
  .pmod__backstage-ph {
    font-size: 12px !important;
  }

  /* Description truncate — mobile stays at 5 lines (same as desktop) */
  .pmod__desc-toggle {
    margin: -12px 0 20px !important;
    font-size: 13px !important;
    text-underline-offset: 2px !important;
  }
  .pmod__carousel-section {
    padding: 0 20px !important;
    margin-top: 40px !important;
  }
  .pmod__carousel-heading {
    font-size: 18px !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
  }

  /* Popup carousels — 1 карточка по центру + peek с боков.
     psmod (print-shop, портрет 3:4): 70vw × 95.7vw
     wp popup (wallpapers, вертикаль 9:16): 53.83vw × 95.7vw (высота как у psmod,
       ширина от aspect 9:16 через базовое aspect-ratio на .pmod__ccard-media).
     Текст ×4 общий для обеих (базы: title/price 0.8vw, coll 0.598vw, badge 0.562vw). */
  .psmod .pmod__ccard {
    width: 70vw !important;
  }
  .psmod .pmod__ccard-media {
    height: 95.7vw !important;
  }
  /* Wallpapers popup — узкая карточка 9:16, media auto по aspect-ratio */
  .pmod:not(.psmod) .pmod__ccard {
    width: 53.83vw !important;
  }
  /* Текст под карточками — общий для обоих типов попап-каруселей */
  .pmod .pmod__ccard-title { font-size: 3.2vw !important; }
  .pmod .pmod__ccard-price { font-size: 3.2vw !important; }
  .pmod .pmod__ccard-coll  {
    font-size: 2.392vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  /* Row должен позволять сжатие coll — без min-width flex-элемент не даст ellipsis */
  .pmod .pmod__ccard-row {
    min-width: 0 !important;
  }
  .pmod .pmod__ccard-badge {
    flex-shrink: 0 !important;
  }
  .pmod .pmod__ccard-badge {
    font-size: 2.248vw !important;
    padding: 0.208vw 0.96vw !important;
    border-width: 0.118vw !important;
  }

  /* psMore carousel (.ps-more — "dynamic wallpaper collections" внизу detail view):
     карточки + текст ×3 от desktop (было ×2, ещё ×1.5).
     Отступы .ps-more (padding-top/bottom секции) не тронуты — визуальная
     дистанция до заголовка и футера сохраняется как раньше. */
  .ps-more .pmod__ccard { width: 49.992vw !important; }           /* 16.664 × 3 */
  .ps-more .pmod__ccard-title { font-size: 2.4vw !important; }    /* 0.8 × 3 */
  .ps-more .pmod__ccard-price { font-size: 2.4vw !important; }
  .ps-more .pmod__ccard-coll  { font-size: 1.794vw !important; }  /* 0.598 × 3 */
  .ps-more .pmod__ccard-badge {
    font-size: 1.686vw !important;                                  /* 0.562 × 3 */
    padding: 0.312vw 1.44vw !important;
    border-width: 0.177vw !important;
  }
  .ps-more .pmod__ccard-foot {
    padding: 1.752vw 0 0 !important;                                /* 0.584 × 3 */
    gap: 0.624vw !important;                                         /* 0.208 × 3 */
  }

  /* Общее foot-padding для попап-каруселей (psmod + wallpapers popup) ×2 */
  .pmod .pmod__ccard-foot {
    padding: 1.168vw 0 0 !important;
    gap: 0.416vw !important;
  }
  /* Dots (слайдбар) в попап-каруселях — сдвиг вниз от текста карточки */
  .pmod__carousel-dots {
    padding-top: 24px !important;
  }

  /* Курсор с ролью {next}/{previous}/{open} на mobile не нужен —
     hover-based, а на тач-устройствах бесполезен */
  .pmod__cursor {
    display: none !important;
  }

  /* Cart badge — счётчик товаров ×4 (база desktop: min-width/height 0.938vw,
     font 0.521vw, padding 0 0.156vw, top -0.26vw, right -0.36vw).
     Значок корзины не тронут — по требованию.
     Цвета унифицированы на всех страницах: светлый круг + тёмный текст
     (как на главной). Тонкая тёмная обводка для видимости на светлой шапке. */
  .cart-badge,
  .header--scrolled .cart-badge {
    min-width: 3.752vw !important;
    height: 3.752vw !important;
    font-size: 2.084vw !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    top: -1.04vw !important;
    right: -1.44vw !important;
    background: rgba(242, 242, 242, 0.92) !important;
    color: #303030 !important;
    border: 1px solid rgba(48, 48, 48, 0.6) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PRINT SHOP PAGE (ps-*) — ≤768
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ps-header {
    padding: 24px 20px 16px !important;
  }
  .ps-heading {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    margin-bottom: 8px !important;
    line-height: 1.15 !important;
  }
  .ps-subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .ps-filters {
    padding: 0 20px 20px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ps-filters::-webkit-scrollbar { display: none; }
  .ps-filters > * { flex-shrink: 0; }

  .ps-sections {
    padding: 0 !important;
  }
  .ps-collection {
    margin-bottom: 40px !important;
  }
  .ps-collection__header {
    padding: 0 20px !important;
    margin-bottom: 16px !important;
  }
  .ps-collection__heading {
    font-size: clamp(20px, 5vw, 28px) !important;
    margin-bottom: 6px !important;
  }
  .ps-collection__tagline {
    font-size: 13px !important;
  }

  /* Photo rows — all stack to 1-col on mobile; height auto */
  .ps-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding: 0 20px !important;
  }
  /* All row-type height overrides — use aspect-ratio instead of fixed vw */
  .ps-row--h-h .ps-photo__img-wrap,
  .ps-row--h-v .ps-photo__img-wrap,
  .ps-row--v-h .ps-photo__img-wrap,
  .ps-row--v-v .ps-photo__img-wrap,
  .ps-row--v-v-v .ps-photo__img-wrap,
  .ps-row--full .ps-photo__img-wrap,
  .ps-collection[data-id="etudes"] .ps-row--h-v .ps-photo__img-wrap,
  .ps-collection[data-id="etudes"] .ps-row--v-h .ps-photo__img-wrap {
    height: auto !important;
    aspect-ratio: 3 / 2;
  }
  /* Portrait cells use 2:3 */
  .ps-row--v-v .ps-photo__img-wrap,
  .ps-row--v-v-v .ps-photo__img-wrap {
    aspect-ratio: 2 / 3;
  }

  /* Photo caption */
  .ps-photo__meta {
    bottom: 10px !important;
    left: 12px !important;
    gap: 1px !important;
  }
  .ps-photo__title { font-size: 13px !important; line-height: 1 !important; }
  .ps-photo__coll {
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Bottom "more offers" section */
  .ps-more {
    padding: 24px 0 48px !important;
  }
  .ps-more__heading {
    font-size: 16px !important;
    padding: 0 20px !important;
    margin: 0 0 16px !important;
  }
  .ps-more__dots { padding: 16px 20px !important; }
  .ps-back-cta { padding: 24px 20px 12px !important; }

  /* Collection overview grid — 3-col → 2-col.
     Card width grows from 28.82vw to 44.01vw (×1.527).
     Text/meta inside the card scale by the same factor to keep
     the desktop text-to-card ratio (~3.47%). Gap and top padding
     unchanged per user request. 9-я карточка автоматически ложится
     слева в 5-м ряду — grid auto-placement, дополнительных правил не нужно. */
  .ps-col-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ps-col-card__name {
    font-size: 3.054vw !important;
  }
  .ps-col-card__meta {
    bottom: 1.269vw !important;
    left: 1.269vw !important;
  }

  /* Collection detail view — carousel (.ps-col-nav) + heading (.ps-col-heading)
     scaled ×1.5. Card width, gap, heading font-size и paddings растут пропорционально.
     Верхний padding карусели от меню сохраняем (9.375vw), только bottom масштабируется.
     Peek-карточки не ограничиваем — сколько поместится в clip-inset 5.208vw.
     Clip-path не трогаем — 5.208vw это design-token левого margin. */
  .ps-col-nav {
    padding-bottom: 4.5vw !important;
  }
  .ps-col-nav__track {
    gap: 2.34vw !important;
  }
  .ps-col-nav__card {
    flex: 0 0 28.125vw !important;
  }
  .ps-col-heading {
    font-size: 5.90625vw !important;
    padding: 3.5168vw 5.208vw 4.6868vw !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PRINT SHOP — ≤480 photo rows can go 2-col for landscape
   to preserve density
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Keep h-h landscape as 2-col — full-width portraits waste space */
  .ps-row--h-h {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ps-row--h-h .ps-photo__img-wrap {
    aspect-ratio: 3 / 2 !important;
  }
  /* v-v-v (3-col portraits) → 1-col: 3 карточки в ряд → 2-col давало орфан
     (например, etudes: 3 фото → 2 в первой строке + пустая клетка).
     На 480 стекируем вертикально, идут последовательно без пробелов.
     Desktop 3-col не затронут — правило только для ≤480. */
  .ps-row--v-v-v {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PRINT SHOP MODAL (psmod-*) — ≤768
   Frame mockup + info stack vertically
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pmod__main.psmod__main {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
  }
  .psmod__frame-col { margin-bottom: 20px; }
  .psmod__room {
    height: auto !important;
    aspect-ratio: 4 / 3;
    padding: 24px 24px 40px !important;
  }
  .psmod__frame-wrap {
    border-width: 3px !important;
    padding: 8px !important;
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.18),
      0 2px 6px rgba(0, 0, 0, 0.12) !important;
  }
  .psmod__photo {
    max-width: min(60vw, 240px) !important;
    max-height: min(60vw, 240px) !important;
  }
  .psmod__order-note {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
  }
  .psmod__social-btn {
    font-size: 14px !important;
    padding: 12px 20px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    border-width: 1px !important;
    margin-bottom: 8px !important;
    min-height: 44px;
  }
  .psmod__social-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  .psmod__lightbox-close {
    top: 16px !important;
    right: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   MEDIA PAGE (media-*) — ≤768
   Article cards stack: image top, text bottom.
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .media-brand-label {
    font-size: 15px !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
  }
  .media-section {
    padding: 24px 20px 40px !important;
  }
  .media-heading {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    margin-bottom: 8px !important;
  }
  .media-sub {
    font-size: 15px !important;
    margin-bottom: 32px !important;
  }
  .media-articles {
    /* +20% отступа между статьями (после read-more → до следующего блока) */
    gap: 48px !important;
  }
  /* Force both left/right variants into a single stacked layout */
  .media-card,
  .media-card--left,
  .media-card--right {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
  }
  .media-card--right .media-card__text { order: 2 !important; }
  .media-card--right .media-card__img-wrap { order: 1 !important; }

  .media-card--left .media-card__img-wrap,
  .media-card__img-wrap {
    height: auto !important;
    min-height: 220px !important;
    width: 100%;
  }
  .media-card__img {
    position: absolute;
    top: 0 !important;
    height: 100% !important;
  }

  .media-card__text {
    padding-top: 0 !important;
  }
  .media-card__outlet {
    font-size: clamp(28px, 8vw, 40px) !important;
    margin-bottom: 8px !important;
  }
  .media-card__rule {
    border-top-width: 1px !important;
    margin: 0 0 16px !important;
  }
  .media-card__title-en {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  .media-card__title-native {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  .media-card__excerpt {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }
  .media-card__footer {
    gap: 12px !important;
    padding-top: 12px !important;
    flex-wrap: wrap;
  }
  .media-card__date {
    font-size: 11px !important;
  }
  .media-cta {
    margin-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   POLICY PAGES (terms-of-service, privacy, refund, etc.)
   Uses .tos-* classes from terms-of-service.css — ≤768
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tos-body {
    padding: 24px 20px 40px !important;
    max-width: 100% !important;
  }
  .tos-body__title {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    margin-bottom: 20px !important;
    line-height: 1.25 !important;
  }
  .tos-body__intro {
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-align: left !important;
    margin-bottom: 24px !important;
  }
  .tos-section {
    margin-bottom: 24px !important;
  }
  .tos-section__heading {
    font-size: 17px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    font-weight: 500;
  }
  .tos-section__text,
  .tos-section__list li,
  .tos-section__sublist li {
    font-size: 15px !important;
    line-height: 1.65 !important;
    text-align: left !important;
  }
  .tos-section__list {
    gap: 8px !important;
  }
  .tos-section__list li,
  .tos-section__sublist li {
    padding-left: 20px !important;
  }
  .tos-section__list li::before,
  .tos-section__sublist li::before {
    font-size: 15px !important;
  }
  .tos-section__sublist {
    margin: 8px 0 0 0 !important;
    gap: 6px !important;
  }
  .tos-section__date {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   CART PAGE (cart-*, ct-*, cf-*) — ≤768
   Stack table into cards, payment form full-width.
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cart-section {
    padding: 24px 20px !important;
  }
  .cart-brand-label {
    font-size: 15px !important;
    margin-top: 4px !important;
  }
  /* Promo banner — mobile-sized card at top of cart */
  .cart-promo {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 0 0 16px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }

  /* Savings badge — mobile scaling */
  .cart-savings {
    font-size: 13px !important;
    padding: 8px 0 0 !important;
    gap: 6px !important;
  }
  .cart-savings strong {
    font-size: 15px !important;
  }

  /* Recommendation strip — mobile */
  .cart-recommend {
    margin: 20px 0 16px !important;
    padding: 16px 0 4px !important;
  }
  .cart-recommend__header {
    gap: 8px !important;
    margin: 0 0 12px !important;
  }
  .cart-recommend__heading {
    font-size: 14px !important;
    margin: 0 !important;
  }
  .cart-recommend__nav {
    gap: 6px !important;
  }
  .cart-recommend__nav-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    aspect-ratio: 1 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    border-width: 1px !important;
    padding: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    font-size: 18px !important;
  }
  .cart-recommend__cta {
    padding: 20px 0 8px !important;
  }
  .cart-recommend__track {
    gap: 12px !important;
  }
  .cart-recommend__card {
    flex: 0 0 120px !important;
    gap: 8px !important;
  }
  .cart-recommend__add {
    top: 6px !important;
    right: 6px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    aspect-ratio: 1 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    padding: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    font-size: 16px !important;
  }
  .cart-recommend__title {
    font-size: 13px !important;
  }
  .cart-recommend__price-old {
    font-size: 12px !important;
  }
  .cart-recommend__price {
    font-size: 14px !important;
  }

  /* Strikethrough price on cart row extras — mobile */
  .cart-item-price-old {
    font-size: 12px !important;
    margin-right: 6px !important;
  }
  /* Table head: hide labels; each row becomes a card */
  .cart-table__head { display: none !important; }

  .cart-row {
    display: grid !important;
    grid-template-columns: 72px 1fr auto !important;
    grid-template-areas:
      "thumb info remove"
      "thumb price price";
    column-gap: 12px !important;
    row-gap: 8px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #D9D9D9 !important;
    align-items: start !important;
  }
  /* display:contents делает .ct-col--product прозрачным для layout —
     thumb и info становятся прямыми grid-детьми .cart-row, попадают
     в свои grid-area (иначе они вложены и grid-area игнорируется). */
  .ct-col--product {
    display: contents !important;
  }
  .cart-thumb {
    grid-area: thumb !important;
    width: 72px !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }
  .cart-item-info {
    grid-area: info !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  .cart-item-title { font-size: 14px !important; line-height: 1.35 !important; }
  .cart-item-cat { font-size: 11px !important; }

  .ct-col--qty { grid-area: stepper; justify-content: flex-start !important; }
  .ct-col--price { grid-area: price; justify-content: flex-end !important; }
  .ct-col--del { grid-area: remove; justify-content: flex-end !important; }
  /* v28→v29: × кнопка видима на mobile. Padding убран — визуальный правый край
     совпадает с правым краем цены. Тап-зона расширена через ::before pseudo
     (не влияет на визуальную позицию). */
  .cart-remove-btn {
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 0 !important;
    color: #999 !important;
    position: relative !important;
  }
  .cart-remove-btn::before {
    content: '';
    position: absolute;
    inset: -10px;
  }
  .cart-remove-btn:hover,
  .cart-remove-btn:active { color: #303030 !important; }
  /* Цена — text-align right, чтобы последний символ совпадал с правым краем × */
  .cart-item-price {
    text-align: right !important;
    display: inline-block !important;
  }
  .cart-stepper__val { font-size: 14px !important; }
  .cart-item-price { font-size: 14px !important; }
  /* Stepper buttons — идеально круглые, touch-friendly размер */
  .cart-stepper {
    gap: 10px !important;
    align-items: center !important;
  }
  .cart-stepper__btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    aspect-ratio: 1 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  .cart-empty {
    padding: 24px 0 !important;
    font-size: 15px !important;
    text-align: center !important;
  }

  /* Summary block */
  .cart-summary {
    align-items: flex-end !important;
    padding: 16px 0 !important;
    gap: 6px !important;
  }
  .cart-summary__label,
  .cart-total-label { font-size: 13px !important; }
  .cart-summary__val { font-size: 14px !important; }
  .cart-total-val { font-size: 20px !important; }
  .cart-total-row { padding-top: 16px !important; margin-bottom: 32px !important; }

  /* Payment card — align horizontal padding to .cart-section (20px) */
  .cart-payment-section {
    padding: 0 20px 40px 20px !important;
  }
  .cart-email-field { width: 100% !important; }
  #paypal-button-container { width: 100% !important; }
  .cart-payment-card {
    width: 100% !important;
    border-radius: 12px !important;
    padding: 20px !important;
  }
  .cf {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    border-width: 1px !important;
    gap: 6px !important;
  }
  .cf--method { min-height: 52px !important; }
  .cf__label { font-size: 12px !important; }
  .cf__input,
  .cf__select { font-size: 15px !important; }
  .cf__vdivider { width: 1px !important; height: 14px !important; }
}

/* ═══════════════════════════════════════════════════════
   PRODUCT PAGE — ≤768
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .product {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px 20px !important;
  }
  .product__title { font-size: 24px !important; }
  .product__price { font-size: 18px !important; margin-left: 12px !important; }
  .product__section { margin-bottom: 24px !important; }
  .product__section-title {
    font-size: 16px !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
  }
  .product__text { font-size: 15px !important; line-height: 1.6 !important; }
  .product__add { margin-top: 24px !important; }
  .more-offers { padding: 32px 20px !important; }
  .more-offers__label { font-size: 16px !important; margin-bottom: 20px !important; }
}