/* ============================================================================
   mobile.css — sykora-modern phone app layer (≤ 768px ONLY)
   HARD RULE: every rule in this file lives inside the @media block below.
   Nothing here may ever apply at desktop widths. Do not edit style.css.
   ============================================================================ */
@media (max-width: 768px) {
  /* tokens + base ------------------------------------------------------------ */
  html.m-on { -webkit-text-size-adjust: 100%; }
  /* --- mobile design tokens (unreachable on desktop: inside @media + .m-on) --- */
  html.m-on {
    --m-edge: 20px;
    --m-section: clamp(56px, 12vw, 88px);
    --m-gap: 12px;
    --m-topbar-h: 58px;
    --m-hero-title: clamp(2.4rem, 12vw, 3.4rem);
    --m-eyebrow: 10px;
    --m-mod-title: clamp(1.5rem, 6.5vw, 2rem);
  }
  /* LV mobile shell: hide the desktop nav + the old bottom tab bar; a sticky
     top bar (#m-topbar, built in mobile.js) replaces both. */
  html.m-on #site-nav { display: none; }
  html.m-on .m-tabbar { display: none; }

  .m-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
    height: var(--m-topbar-h);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 0 var(--m-edge);
    background: rgba(18,15,12,.5);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  /* left cluster: hamburger + search, icon-only (no "Menu" text) */
  .m-tb-left { justify-self: start; display: inline-flex; align-items: center; gap: 2px; }
  .m-tb-ico {
    appearance: none; background: none; border: 0; cursor: pointer; color: #f4efe9;
    width: 42px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .m-tb-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .m-tb-brand {
    justify-self: center; display: inline-flex; align-items: center; color: #e83c3b;
    filter: drop-shadow(0 1px 5px rgba(0,0,0,.4));
  }
  .m-tb-brand .brand-logo { height: 20px; width: auto; }
  .m-tb-cart {
    justify-self: end; appearance: none; background: none; border: 0; cursor: pointer;
    position: relative; color: #f4efe9; padding: 8px 4px; min-height: 44px;
    display: inline-flex; align-items: center;
  }
  .m-tb-cart svg { width: 21px; height: 21px; stroke: currentColor; }
  .m-tb-badge {
    position: absolute; top: 4px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--brand, #c8262c); color: #fff;
    font: 600 10px/16px var(--font-mono, monospace); text-align: center;
  }
  /* iOS never auto-zooms inputs below 16px */
  html.m-on input, html.m-on select, html.m-on textarea { font-size: 16px; }
  /* min 44px touch targets on the common interactive bits */
  html.m-on .btn, html.m-on .chip, html.m-on .pill,
  html.m-on .cat-chip, html.m-on .icon-btn { min-height: 44px; }
  /* reserve space for the fixed bottom bar inside the FOOTER, so its dark bg
     fills the area behind the bar (body padding-bottom showed the lighter body
     colour / ambient bloom when the bar auto-hid at the page bottom) */
  html.m-on .footer { padding-bottom: 44px; }   /* no bottom bar to clear */
  /* tighter single-column section rhythm (token-driven for the cross-page rollout) */
  html.m-on .section { padding: var(--m-section) 0; }
  html.m-on .container { padding-left: var(--m-edge); padding-right: var(--m-edge); }
  /* bottom tab bar ----------------------------------------------------------- */
  .m-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(18,15,12,.86); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(0); transition: transform .28s ease;
  }
  .m-tabbar.is-hidden { transform: translateY(110%); }
  .m-tab {
    appearance: none; background: none; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 4px 8px; min-height: 56px;
    color: rgba(255,255,255,.62); font: 500 10px/1 var(--font-mono, monospace);
    letter-spacing: .04em; text-transform: uppercase; text-decoration: none; position: relative;
  }
  .m-tab svg { width: 22px; height: 22px; }
  .m-tab.is-active { color: var(--brand, #e83c3b); }
  .m-tab-badge {
    position: absolute; top: 4px; left: calc(50% + 8px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--brand, #e83c3b); color: #fff;
    font: 600 10px/16px var(--font-mono, monospace); text-align: center;
  }
  /* sheet system ------------------------------------------------------------- */
  .m-sheet-wrap { position: fixed; inset: 0; z-index: 1400; }
  .m-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5);
    opacity: 0; transition: opacity .26s ease; }
  .m-sheet-wrap.open .m-sheet-backdrop { opacity: 1; }
  .m-sheet { position: absolute; left: 0; right: 0; background: var(--bg, #1c1813);
    color: var(--text, #f3ece3); display: flex; flex-direction: column;
    transition: transform .28s cubic-bezier(.2,.8,.2,1); will-change: transform; }
  .m-sheet--full { top: 0; bottom: 0; transform: translateY(100%); }
  .m-sheet--bottom { bottom: 0; max-height: 88vh; border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0;
    transform: translateY(100%); }
  .m-sheet-wrap.open .m-sheet { transform: translateY(0); }
  .m-sheet-head { position: relative; display: flex; align-items: center; gap: 12px;
    padding: 14px 16px calc(14px + env(safe-area-inset-top,0px)); border-bottom: 1px solid rgba(255,255,255,.08); }
  .m-sheet--bottom .m-sheet-head { padding-top: 18px; }
  .m-sheet-grip { position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); }
  .m-sheet--full .m-sheet-grip { display: none; }
  .m-sheet-title { flex: 1; margin: 0; font: 600 13px/1 var(--font-mono, monospace);
    letter-spacing: .14em; text-transform: uppercase; }
  .m-sheet-close { appearance: none; background: none; border: 0; color: inherit; cursor: pointer;
    width: 40px; height: 40px; display: grid; place-items: center; }
  .m-sheet-close svg { width: 20px; height: 20px; }
  .m-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 40px; }

  /* menu sheet */
  .m-menu-acct { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .m-menu-acct-name { font: 600 18px/1.2 var(--serif, Georgia, serif); margin-bottom: 8px; }
  .m-menu-group { padding: 12px 0; }
  .m-menu-group h3 { margin: 0 0 6px; font: 600 11px/1 var(--font-mono, monospace);
    letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
  .m-menu-link { display: block; width: 100%; text-align: left; appearance: none; background: none;
    border: 0; color: inherit; cursor: pointer; text-decoration: none;
    padding: 13px 0; font: 400 18px/1.2 var(--serif, Georgia, serif);
    border-bottom: 1px solid rgba(255,255,255,.06); }
  /* LV menu: search row + big serif primary nav */
  .m-menu-search {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; margin-bottom: 20px; border: 0; cursor: pointer;
    border-radius: var(--r-md, 14px); background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7); font: 400 15px/1 var(--font-sans, sans-serif); text-align: left;
  }
  .m-menu-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .m-menu-nav { display: flex; flex-direction: column; margin-bottom: 22px; }
  .m-menu-big {
    appearance: none; background: none; border: 0; cursor: pointer; text-align: left; width: 100%;
    padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08);
    color: #f4efe9; font: 400 1.9rem/1.05 var(--serif, Georgia, serif);
    text-decoration: none; display: block;
  }
  a.m-menu-big { color: #f4efe9; }
  /* menu footer: language flag picker + login side by side */
  .m-menu-foot {
    margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .m-lang-flag-em { display: inline-flex; width: 18px; height: 12px; flex: 0 0 auto; }
  .m-lang-flag-em svg { width: 18px; height: 12px; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
  /* language DROP-UP picker */
  .m-lang-drop { position: relative; }
  .m-lang-drop-btn {
    appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: var(--r-md, 14px);
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #f4efe9;
    font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .07em;
  }
  .m-lang-chev { width: 15px; height: 15px; transition: transform .25s ease; opacity: .7; }
  .m-lang-drop.open .m-lang-chev { transform: rotate(180deg); }
  .m-lang-drop-menu {
    position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 190px; z-index: 5;
    background: rgba(24,20,16,.98); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md, 14px); padding: 6px;
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .m-lang-drop.open .m-lang-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .m-lang-drop-item {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px;
    text-decoration: none; color: rgba(255,255,255,.82); font: 400 14px/1 var(--serif, Georgia, serif);
  }
  .m-lang-drop-item.is-active { color: #fff; background: color-mix(in srgb, var(--brand, #c8262c) 16%, transparent); }
  .m-menu-login {
    display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px;
    border-radius: var(--r-md, 14px); background: rgba(255,255,255,.06); color: #f4efe9;
    text-decoration: none; font: 400 15px/1 var(--serif, Georgia, serif);
  }
  .m-menu-login svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  /* language chips (menu sheet) */
  .m-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .m-lang-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 48px; padding: 0 14px; text-decoration: none; color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md, 14px); }
  .m-lang-name { font: 400 15px/1 var(--serif, Georgia, serif); }
  .m-lang-code { font: 600 10px/1 var(--font-mono, monospace); letter-spacing: .08em; color: rgba(255,255,255,.4); }
  .m-lang-chip.is-active { color: #fff; border-color: var(--brand, #e83c3b);
    background: color-mix(in srgb, var(--brand, #e83c3b) 14%, transparent); }
  .m-lang-chip.is-active .m-lang-code { color: var(--brand, #e83c3b); }
  /* nav popover: keep within the viewport on phones */
  html.m-on .lang-menu { max-width: calc(100vw - 32px); }
  /* produkty hub ------------------------------------------------------------- */
  .m-hub-group { padding: 8px 0 16px; }
  .m-hub-group h3 { margin: 0 0 8px; font: 600 11px/1 var(--font-mono, monospace);
    letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
  .m-hub-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
    text-decoration: none; color: inherit; padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.07); }
  .m-hub-row-t { grid-column: 1; font: 500 20px/1.2 var(--serif, Georgia, serif); }
  .m-hub-row-s { grid-column: 1; font: 400 13px/1.3 var(--font-sans, system-ui);
    color: rgba(255,255,255,.5); }
  .m-hub-row-arr { grid-column: 2; grid-row: 1 / span 2; color: var(--brand, #e83c3b); }
  .m-hub-row-arr svg { width: 20px; height: 20px; }
  /* ═══ HOME — rebuilt for the phone (ground-up, not reflowed desktop) ═══════ */
  /* punchier mobile type so headings don't read as shrunk-desktop */
  html.m-on #home-root .display-l { font-size: clamp(2.7rem, 13.5vw, 3.6rem); line-height: .96; letter-spacing: -.012em; }
  html.m-on #home-root .display-m { font-size: clamp(2.05rem, 9.5vw, 2.7rem); line-height: 1.0; letter-spacing: -.008em; }
  html.m-on #home-root .lead { font-size: 1.02rem; line-height: 1.5; }

  /* HERO — immersive; minimal text + CTAs anchored to the very bottom */
  html.m-on #hero { height: 78svh; min-height: 500px; max-height: 720px; }
  html.m-on #hero .hero-content { display: flex; flex-direction: column; justify-content: flex-end;
    align-items: center; text-align: center;
    padding: 0 22px calc(84px + env(safe-area-inset-bottom, 0px)); }
  html.m-on #hero .hero-headline .eyebrow,
  html.m-on #hero .hero-content .eyebrow { justify-content: center; }
  html.m-on #hero .hero-top { display: none; }
  /* less text: drop the lead paragraph + the disclosure, keep eyebrow + headline */
  html.m-on #hero .hero-headline .lead,
  html.m-on #hero .hero-desc-wrap { display: none; }
  html.m-on #hero .hero-headline .display-l { margin: 0; }
  /* buttons wide + centered, stacked full-width at the very bottom (text above) */
  html.m-on #hero .hero-actions { flex-direction: column; align-items: stretch; gap: 11px; width: 100%; margin-top: 22px; }
  html.m-on #hero .hero-actions .btn { width: 100%; justify-content: center; text-align: center;
    padding: 16px 20px; font-size: .9rem; gap: 8px; }
  /* LV restraint: the secondary hero CTA is an underlined text link, not a pill */
  html.m-on #hero .hero-actions .btn.ghost {
    width: auto; align-self: center; background: none; border: 0; padding: 10px 6px;
    text-decoration: underline; text-underline-offset: 5px; font-size: .82rem; letter-spacing: .04em;
  }
  html.m-on #hero .hero-actions .btn.ghost::before { display: none; }
  /* per user: CENTER text + CTAs across the home sections (Vyroba/Atelier/Worlds) */
  html.m-on #vyroba .vy-content,
  html.m-on #atelier .stack,
  html.m-on #domov-worlds .worlds-inner { text-align: center; }
  html.m-on #vyroba .vy-content .eyebrow,
  html.m-on #atelier .eyebrow,
  html.m-on #domov-worlds .eyebrow { justify-content: center; }
  html.m-on #vyroba .vy-quote { align-items: center; }
  html.m-on #atelier .stack .btn { margin-left: auto; margin-right: auto; }
  html.m-on #domov-worlds .worlds-title,
  html.m-on #domov-worlds .worlds-sub { margin-left: auto; margin-right: auto; }
  html.m-on #domov-worlds .worlds-item { align-items: center; }
  /* scroll hint → vertical-center, right edge; fades once the page is scrolled */
  html.m-on #hero .hero-bottom { position: absolute; right: 12px; top: 50%; left: auto; bottom: auto;
    transform: translateY(-50%); width: auto; padding: 0; }
  html.m-on #hero .hero-bottom > div:first-child { display: none; }
  html.m-on #hero .scroll-cue { flex-direction: column; gap: 10px; writing-mode: vertical-rl;
    transition: opacity .35s ease; }
  html.m-on.m-scrolled #hero .scroll-cue { opacity: 0; pointer-events: none; }

  /* KOLEKCE / Kompozice → LV 2-up grid (two products side by side, no sliding) */
  html.m-on #pin-scroll { padding: 48px 0 56px; }
  /* the section heading ("Kompozice na míru." / "Co jsme pro vás postavili.")
     lives inside the desktop .pin-track (display:none on mobile) — surface just
     its .pin-head, keep the desktop rail hidden; the cards come from
     .pin-mobile-grid below. */
  html.m-on #pin-scroll .pin-track,
  html.m-on #realz-scroll .pin-track { display: block !important; height: auto !important; min-height: 0 !important; }
  html.m-on #pin-scroll .pin-stage,
  html.m-on #realz-scroll .pin-stage { display: block !important; height: auto !important; transform: none !important; }
  html.m-on #pin-scroll .pin-rail,
  html.m-on #realz-scroll .pin-rail { display: none !important; }
  html.m-on #pin-scroll .pin-head,
  html.m-on #realz-scroll .pin-head { display: block !important; position: static !important; height: auto !important; padding: 0 var(--m-edge); text-align: center; }
  /* the "01 / 10" slide counter + horizontal-scroll hint make no sense for the
     2-up grid — hide them */
  html.m-on #pin-scroll .pin-counter, html.m-on #realz-scroll .pin-counter,
  html.m-on #pin-scroll .pin-progress, html.m-on #realz-scroll .pin-progress { display: none !important; }
  html.m-on .pin-mobile-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px;
    overflow: visible; scroll-snap-type: none;
    padding: 6px var(--m-edge) 4px;
  }
  html.m-on .pin-mobile-grid > .prod-card { flex: none; width: auto; max-width: none; scroll-snap-align: none; }
  /* rozcestník → LV 2-up grid (override the app.js accordion carousel) */
  html.m-on #rozcestnik .rozc-row {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important;
    overflow: visible !important; scroll-snap-type: none !important; transform: none !important;
  }
  html.m-on #rozcestnik .rozc-row > .rozc-card {
    width: auto !important; height: 168px !important; flex: none !important;
    scroll-snap-align: none !important; transform: none !important; opacity: 1 !important;
  }
  /* the section eyebrow/heading stays inset with the grid */
  html.m-on #pin-scroll .container { padding-left: var(--m-edge); padding-right: var(--m-edge); }
  /* drop the leftover carousel "tap" chevron on the rozcestník cards */
  html.m-on #rozcestnik .rozc-card::before { display: none !important; }

  /* LV: subtle, CENTERED section label above each grid (was big left serif) */
  html.m-on #rozcestnik .rozc-head,
  html.m-on #pin-scroll .pin-head-inner,
  html.m-on #realz-scroll .pin-head-inner { text-align: center; }
  html.m-on #rozcestnik .rozc-head .eyebrow,
  html.m-on #pin-scroll .pin-head-inner .eyebrow,
  html.m-on #realz-scroll .pin-head-inner .eyebrow { justify-content: center; }
  html.m-on #rozcestnik .rozc-head .display-l,
  html.m-on #pin-scroll .pin-head-inner .display-m,
  html.m-on #realz-scroll .pin-head-inner .display-m {
    font-size: clamp(1.45rem, 6vw, 1.85rem) !important; line-height: 1.12; margin: 8px 0 0;
  }
  /* keep ONLY the eyebrow + heading above the grids — drop the descriptive sub */
  html.m-on #rozcestnik .rozc-sub,
  html.m-on #pin-scroll .pin-head-inner p,
  html.m-on #realz-scroll .pin-head-inner p { display: none; }
  /* Výroba — hide the "—— VÝROBA" eyebrow (the big heading is enough) */
  html.m-on #vyroba .vy-top { display: none; }

  /* VÝROBA — full-bleed cinematic band: video fills, copy overlaid on a scrim */
  /* Výroba — hero-like: no longer forced full-screen; content compressed so the
     band is shorter and the next section peeks. */
  html.m-on #vyroba { position: relative; min-height: 60svh; margin-top: 44px; display: flex; align-items: flex-end; overflow: hidden; }
  html.m-on #vyroba .vy-media { position: absolute; inset: 0; margin: 0; height: 100%; }
  html.m-on #vyroba .vy-media video { width: 100%; height: 100%; object-fit: cover; }
  html.m-on #vyroba::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(10,9,8,.92) 4%, rgba(10,9,8,.45) 42%, rgba(10,9,8,.1) 75%); }
  html.m-on #vyroba .vy-content {
    position: relative; z-index: 2; width: 100%;
    min-height: 0; gap: 20px; justify-content: flex-end;
    padding: 84px 22px 36px;   /* top clears the sticky bar + breathing room */
  }
  html.m-on #vyroba .display-m { font-size: clamp(1.85rem, 8vw, 2.25rem); }
  html.m-on #vyroba .vy-stats { margin-top: 14px; }
  html.m-on #vyroba .vy-stat { padding: 15px 16px; }
  html.m-on #vyroba .vy-stat .num { font-size: clamp(22px, 6.5vw, 30px); }
  html.m-on #vyroba .vy-quote p { font-size: 1.02rem; line-height: 1.35; }
  html.m-on #vyroba .vy-quote .cite { margin-top: 10px; }
  html.m-on #vyroba .vy-quote .btn { width: 100%; justify-content: center; margin-top: 14px; }

  /* ATELIÉRY — no video; compact text block pulled up close to the chapter above */
  html.m-on #atelier { padding-top: 48px; padding-bottom: 48px; margin-top: 0; }
  html.m-on #atelier .cities { display: none; }
  html.m-on #atelier .stack { display: block; }
  html.m-on #atelier .stack > div:first-child > div:last-child { margin-top: 20px; }
  html.m-on #atelier .stack .btn.solid.pill { width: 100%; justify-content: center; }

  /* HOME FAQ — NOT white/cream (that reads as generic eshop). Just lift it off
     the footer's near-black onto the site's warm base (#1c1813) used everywhere
     else; keep the original light text. Centered heading. */
  html.m-on .home-faq {
    background: var(--bg, #1c1813);
    border-radius: var(--r-lg, 20px); margin: 8px var(--m-edge) 40px;
    padding: 40px 22px; text-align: center;
  }
  html.m-on .home-faq .eyebrow { justify-content: center; }

  /* FOOTER — mobile: centered, but Servis + Dokumenty sit SIDE BY SIDE.
     children: 1 brand · 2 Sledujte · 3 Maison(hidden) · 4 Servis · 5 Dokumenty
     order → brand (full, centered) · Servis | Dokumenty (2 cols) · Sledujte (full, bottom) */
  html.m-on .footer-grid {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
    text-align: center; gap: 30px 20px; grid-template-columns: none;
  }
  html.m-on .footer-grid > * { margin: 0; }
  html.m-on .footer-grid > :first-child { flex: 0 0 100%; order: 1; text-align: center; }
  html.m-on .footer-grid > :first-child *,
  html.m-on .footer-grid > :first-child p { text-align: center; margin-left: auto; margin-right: auto; }
  html.m-on .footer-grid > :first-child .brand-logo,
  html.m-on .footer-grid > :first-child svg { margin-left: auto; margin-right: auto; }
  html.m-on .footer-grid > :nth-child(4) { flex: 0 0 42%; order: 2; }    /* Servis */
  html.m-on .footer-grid > :nth-child(5) { flex: 0 0 42%; order: 3; }    /* Dokumenty */
  html.m-on .footer-grid > :nth-child(3) { display: none; }             /* Maison — decluttered */
  html.m-on .footer-grid > :nth-child(2) {                              /* Sledujte nás → bottom */
    flex: 0 0 100%; order: 4; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08);
  }
  html.m-on .footer-grid .footer-social,
  html.m-on .footer-grid ul,
  html.m-on .footer-grid nav { justify-content: center; align-items: center; }
  html.m-on .footer-grid a { padding: 5px 0; }
  html.m-on .footer-grid h3, html.m-on .footer-grid h4 { margin-bottom: 10px; }
  html.m-on .footer-bottom, html.m-on .footer-legal { text-align: center; justify-content: center; }

  /* PRODUKTY ROUTER → stacked rectangle buttons; tap opens an enlarged menu */
  html.m-on #rozcestnik .rozc-grid {
    display: flex; flex-direction: column; grid-template-columns: none; gap: 12px;
    margin: 0; padding: 0; overflow: visible;
  }
  html.m-on #rozcestnik .rozc-card {
    width: 100%; height: 128px; position: relative; overflow: hidden;
    border-radius: var(--r-md, 14px); cursor: pointer;
  }
  html.m-on #rozcestnik .rozc-card .rozc-media { position: absolute; inset: 0; }
  html.m-on #rozcestnik .rozc-card .rozc-cover { position: absolute; inset: 0; z-index: 2; }
  html.m-on #rozcestnik .rozc-card::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(10,9,8,.78), rgba(10,9,8,.15)); }
  html.m-on #rozcestnik .rozc-foot { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 0 18px 16px; }
  html.m-on #rozcestnik .rozc-foot .rozc-name { margin: 0; font-size: 1.5rem; }
  html.m-on #rozcestnik .rozc-subs { display: none; }   /* subs live in the tapped menu */
  html.m-on #rozcestnik .rozc-card::before { /* a small "tap" chevron */
    content: ""; position: absolute; z-index: 3; right: 16px; top: 50%; width: 10px; height: 10px;
    border-right: 2px solid rgba(255,255,255,.7); border-top: 2px solid rgba(255,255,255,.7);
    transform: translateY(-50%) rotate(45deg);
  }

  /* REALIZACE TRIPTYCH (.triptych) → swipe rail of the three video cards */
  html.m-on .triptych {
    display: flex; grid-template-columns: none; gap: 14px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 8px 20px 12px; scroll-padding-left: 20px; scrollbar-width: none;
  }
  html.m-on .triptych::-webkit-scrollbar { display: none; }
  html.m-on .triptych > .tript-card { flex: 0 0 82vw; max-width: 360px; scroll-snap-align: start; }

  /* WORLDS (#domov-worlds) → full-bleed cinematic closer */
  html.m-on #domov-worlds { min-height: 74svh; display: flex; align-items: center; }
  html.m-on #domov-worlds .worlds-inner { width: 100%; padding: 52px 22px; }
  html.m-on #domov-worlds .worlds-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
  html.m-on #domov-worlds .worlds-item { width: 100%; }

  /* CONCEPT WHEEL → mobile rotary kitchen selector: no text, bigger wheel,
     a kitchen pre-selected (video in the centre), tap/drag to pick, tap centre to enter */
  html.m-on #design-wheel { padding: 16px 0 20px; }
  /* keep a SMALL RED eyebrow above the wheel (what it is); hide title/lead/meta */
  html.m-on #design-wheel .dls-tagline,
  html.m-on #design-wheel .dls-intro > h2,
  html.m-on #design-wheel .dls-intro > .dls-lead,
  html.m-on #design-wheel .dls-intro > .dls-meta { display: none; }
  html.m-on #design-wheel .dls-intro { max-width: none; margin: 0 0 4px; text-align: center; }
  html.m-on #design-wheel .dls-intro .eyebrow { color: var(--brand, #e83c3b); font-size: 10px; justify-content: center; }
  html.m-on #design-wheel .dls-layout { max-width: 100vw; padding-left: 2px; padding-right: 2px; gap: 6px !important; }
  html.m-on #design-wheel .dls-stage { width: 100vw !important; max-width: 100vw !important; margin: 0 auto; transform: scale(1.08); }
  html.m-on #design-wheel .dls-vid { width: 66%; }
  /* slightly smaller family labels (MILD / PIANO CORE …) so the wheel reads bigger */
  html.m-on #design-wheel .dls-name { font-size: 25px; }
  html.m-on #design-wheel .dls-center { cursor: pointer; }
  /* centre CTA: arrow red (text „Zobrazit" shortened in mobile.js) */
  html.m-on #design-wheel .dls-d-cta svg { stroke: var(--brand, #e83c3b); color: var(--brand, #e83c3b); }
  /* non-image centre state (e.g. „Připravujeme") must stay INSIDE the circle:
     #dls-center spans the whole stage, so the long axis line spilled over the ring */
  html.m-on #design-wheel .dls-detail { max-width: 46%; margin: 0 auto; text-align: center; }
  html.m-on #design-wheel .dls-detail .dls-d-meta { display: none; }
  html.m-on #design-wheel .dls-detail .dls-d-name { font-size: clamp(18px, 5.5vw, 26px); line-height: 1.12; }
  html.m-on #design-wheel .dls-d-soon { font-size: 10px; letter-spacing: .12em; }
  /* static names legible; the SELECTED family brightens (app.js .is-active) */
  html.m-on #design-wheel .dls-ring { stroke: rgba(255,255,255,.18); }
  html.m-on #design-wheel .dls-axis { fill: rgba(255,255,255,.4); }
  html.m-on #design-wheel .dls-stage.has-hover .dls-fam:not(.is-active) { opacity: .5; }
  /* per-family marks/ticks replaced by the moving red marker + gentle watch ticks */
  html.m-on #design-wheel .dls-mark,
  html.m-on #design-wheel .dls-tick { display: none; }
  html.m-on #design-wheel .m-wtick { stroke: rgba(255,255,255,.16); stroke-width: 1.4; }
  html.m-on #design-wheel .m-wtick--major { stroke: rgba(255,255,255,.3); stroke-width: 2; }
  /* the MOVING red selection marker (radial stem + crossbar = inverted T) */
  html.m-on #design-wheel .m-mark { will-change: transform; }
  html.m-on #design-wheel .m-mark line { stroke: var(--brand, #e83c3b); stroke-width: 5; stroke-linecap: round; }
  /* animated helper above the wheel */
  html.m-on #design-wheel .m-cwheel-hint { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 6;
    display: flex; align-items: center; justify-content: center; gap: 9px; width: max-content;
    padding: 7px 13px; border-radius: 999px; color: #fff;
    background: rgba(12,10,8,.6); border: 1px solid rgba(255,255,255,.2); transition: opacity .3s ease; }
  html.m-on #design-wheel .m-cwheel-hint.is-out { opacity: 0; }
  html.m-on #design-wheel .m-cwheel-hint-ico { display: inline-flex; transform-origin: 50% 50%; animation: m-cwheel-spin 2.4s linear infinite; }
  html.m-on #design-wheel .m-cwheel-hint-ico svg { width: 18px; height: 18px; display: block; }
  html.m-on #design-wheel .m-cwheel-hint-cap { font: 600 10px/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase; }
  @keyframes m-cwheel-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

  /* full-bleed media everywhere on the home (kill the boxed desktop gutters) */
  html.m-on #home-root .image-reveal > img,
  html.m-on #home-root .triptych-wrap { border-radius: 0; }

  /* horizontal rails — white animated swipe hint ----------------------------- */
  .m-rail-wrap { position: relative; }
  .m-rail-hint {
    position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%);
    pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 999px; color: #fff;
    background: rgba(12,10,8,.6); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 24px rgba(0,0,0,.4);
    opacity: 1; transition: opacity .34s ease;
  }
  .m-rail-hint.is-out { opacity: 0; }
  .m-rail-hint-ico { display: inline-flex; animation: m-rail-swipe 1.4s ease-in-out infinite; }
  .m-rail-hint-ico svg { display: block; width: 20px; height: 20px; }
  .m-rail-hint-cap { font: 600 10px/1 var(--font-mono, monospace); letter-spacing: .18em; text-transform: uppercase; }
  @keyframes m-rail-swipe { 0%, 100% { transform: translateX(6px); } 50% { transform: translateX(-7px); } }

  /* signature wheels — animated first-touch helper --------------------------- */
  .m-wheel-hint {
    position: absolute; inset: 0; z-index: 30; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; opacity: 1; transition: opacity .3s ease;
  }
  .m-wheel-hint.is-out { opacity: 0; }
  .m-wheel-hint-dial {
    position: relative; width: 76px; height: 76px; border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,.55);
    box-shadow: 0 0 0 8px rgba(0,0,0,.18);
  }
  /* a dot that orbits the dashed dial — the "spin me" gesture */
  .m-wheel-hint-dot {
    position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px;
    border-radius: 50%; background: var(--brand, #e83c3b);
    box-shadow: 0 0 14px rgba(232,60,59,.9);
    transform-origin: 7px 45px;            /* = radius (38) + own offset */
    animation: m-wheel-orbit 2.4s cubic-bezier(.6,0,.4,1) infinite;
  }
  .m-wheel-hint-cap {
    font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: rgba(0,0,0,.5); padding: 7px 12px; border-radius: 999px;
    backdrop-filter: blur(6px);
  }
  /* sweep ~270° back and forth so it reads as "turn", not a full spin */
  @keyframes m-wheel-orbit {
    0%   { transform: rotate(-130deg); }
    50%  { transform: rotate(130deg); }
    100% { transform: rotate(-130deg); }
  }

  /* Edgy/Flex configurator wheel (see addConfigWheelTouch): the orb side (left)
     steps the wheel on a vertical finger drag — that handler preventDefaults, so
     the wheel must first ALLOW native scroll (pan-y) instead of the desktop's
     `touch-action: none`. The up/down arrows move to the bottom-RIGHT so the
     right side stays a comfortable page-scroll zone (tap an arrow to step). */
  html.m-on .kc-wheel { touch-action: pan-y; }
  html.m-on .kc-wheel-nav { left: 10px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
  /* Anchor the material readout: as a single wrapped row its height jumped
     (1→3 lines) as combo names changed length, shoving the wheel/photo up and
     down on every config change. Lay it out as a fixed column — one material per
     line, never wrapping (long values ellipsis) — so its height depends only on
     the constant number of zones, not on the names. */
  html.m-on .kc-readout { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 5px; min-height: 0; }
  html.m-on .kc-ro { max-width: 100%; min-width: 0; white-space: nowrap; }
  html.m-on .kc-ro b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* "<line> v náladách" sat ~188px below the wheel (kc bottom 124 + mood top 64).
     Pull it up close to the configurator on phones. */
  html.m-on .kc { padding-bottom: 32px; }
  html.m-on .kc-mood { padding-top: 22px; }

  /* spotřebiče — brand heroes → full-width banner rectangles, stacked */
  html.m-on .sb-brands {
    display: flex; flex-direction: column; grid-template-columns: none; gap: 12px;
    margin: 0; padding: 0; overflow: visible;
  }
  html.m-on .sb-brands > .sb-brand-card {
    width: 100%; max-width: none; height: 200px; position: relative; overflow: hidden;
    border-radius: var(--r-md, 14px);
  }
  html.m-on .sb-brand-card .sbc-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
  html.m-on .sb-brand-card .sbc-media .sbc-promo { width: 100%; height: 100%; object-fit: cover; }
  /* Electrolux/AEG promos have the brand wordmark baked into the TOP of the image;
     centre-crop clipped it — anchor the crop to the top so the logo stays visible */
  html.m-on #appl-brand-hero .sbc-media .sbc-promo { object-position: 50% top; }
  /* reels are a desktop hover feature — on mobile show only the photo (no autoplay,
     no stray video rectangle); touch can't "hover" so the reel just got in the way */
  html.m-on .sb-brand-card .sbc-reel { display: none; }
  html.m-on .sb-brand-card .sbc-text {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 14px 18px 16px;
    background: linear-gradient(to top, rgba(10,9,8,.92), rgba(10,9,8,.05));
  }
  html.m-on .sb-brand-card .sbc-title { font-size: 1.35rem; line-height: 1.1; }
  html.m-on .sb-brand-card .sbc-body { display: none; }   /* eyebrow + title is enough on a banner */

  /* ═══ KONFIGURÁTOR — centered + 3-up compact toggles (per user) ═══════════ */
  html.m-on #appl-builder { text-align: center; }
  html.m-on #appl-builder .eyebrow { justify-content: center; }
  /* Vlastnosti kuchyně (Tichá/Úsporná/Celá kuchyně) → 3 side by side, compact */
  html.m-on .sb-quickstarts { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  html.m-on .sb-qs-card.sb-prop { padding: 14px 6px; min-height: 0; text-align: center; align-items: center; }
  html.m-on .sb-prop .sb-qs-icon { margin: 0 auto 8px; }
  html.m-on .sb-prop .sb-qs-body { font-size: .82rem; line-height: 1.15; }
  html.m-on .sb-prop .sb-qs-desc,
  html.m-on .sb-prop .sb-qs-foot { display: none; }   /* keep icon + name only at 3-up */

  /* ═══ KATALOG — sticky filter tucks under the top bar (no gap) ═══════════════ */
  html.m-on .appl-catalog-chips { top: 57px !important; }
  /* Shop (Kolekce) — 2 collection cards per row (landing carousels + browse grid) */
  html.m-on #shop-content .appl-cat-scroll > .prod-card { flex: 0 0 47% !important; max-width: none !important; }
  html.m-on #shop-content .prod-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
  html.m-on #shop-content .prod-grid > .prod-card { width: auto !important; max-width: none !important; }

  /* ═══ Nábytek — sticky filter under the top bar + 2-up browse grid ═══════════ */
  /* filter tucked to the bar (was top:64px → 6px gap); dark glass so cards don't
     peek through the seam. Scoped to .nab-browse so Spotřebiče stays 1-up. */
  html.m-on .nab-filters {
    top: 57px !important; z-index: 200;
    background: rgba(18,15,12,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  html.m-on .nab-browse .atr-cards {
    grid-template-columns: 1fr 1fr !important; gap: 14px;
  }
  html.m-on .nab-browse .atr-cards > * { width: auto !important; max-width: none !important; min-width: 0; }

  /* ═══ Vzorkovníky (Pracovní desky / Dvířka / Korpusy — shared .wt-filters) ═══ */
  /* sticky filter under the top bar + search on its own FIRST row (per user) */
  html.m-on .wt-filters {
    position: sticky !important; top: 57px; z-index: 200;
    background: rgba(18,15,12,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  html.m-on .wt-chip-bar-inner { padding-top: 10px; padding-bottom: 12px; }
  html.m-on .wt-chip-bar-inner .cat-search-mount { order: -1; margin-bottom: 4px; }

  /* ═══ APPLIANCE PDP — rebuilt as an e-shop product page (was clipping ~16px) ══ */
  html.m-on .pdp-shop { display: flex; flex-direction: column; width: 100%; max-width: 100%; box-sizing: border-box; }
  html.m-on .pdp-shop-left { display: contents; }   /* flatten so the order reads gallery → buy → story */
  html.m-on .pdp-shop-gallery { order: 1; }
  html.m-on .pdp-shop-info { order: 2; margin-top: 22px; }
  html.m-on .pdp-shop-story { order: 3; margin-top: 30px; }
  /* kill the horizontal overflow */
  html.m-on .pdp-shop-left, html.m-on .pdp-shop-info, html.m-on .pdp-shop-gallery,
  html.m-on .pdp-shop-story, html.m-on .pdp-specs, html.m-on .psg-main, html.m-on .psg-side {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  }
  /* gallery: full-width main image on top, thumbnail row below (app-style) */
  html.m-on .pdp-shop-gallery { display: flex; flex-direction: column; grid-template-columns: none; gap: 10px; }
  html.m-on .pdp-shop-gallery .psg-main { order: 0; }
  html.m-on .pdp-shop-gallery .psg-side { order: 1; }
  html.m-on .pdp-shop-gallery .psg-thumbs { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  html.m-on .pdp-shop-gallery .psg-thumbs::-webkit-scrollbar { display: none; }
  html.m-on .pdp-shop-gallery .psg-thumb { flex: 0 0 auto; width: 64px; height: 64px; }
  /* info: prominent title + price, full-width add-to-cart */
  html.m-on .pdp-shop-title { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.12; }
  html.m-on .pdp-shop-info .pdp-price { margin: 14px 0 18px; }
  html.m-on .pdp-shop-info .qty-row { width: 100%; }
  html.m-on .pdp-shop-info .qty-row .btn.solid { flex: 1; width: 100%; justify-content: center; border-radius: 999px; }
  /* specs: clean single-column rows */
  html.m-on .pdp-specs { grid-template-columns: 1fr; }
  /* sticky add-to-cart — mobile.js moves .qty-row into a body-level .m-buybar so it
     is truly viewport-fixed (the .reveal transform on .pdp-shop-info was trapping
     position:fixed mid-page). A FLOATING ROUNDED PILL, not a full-width black bar. */
  html.m-on .m-buybar { position: fixed; left: 0; right: 0; z-index: 1150; pointer-events: none;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)); padding: 0 16px;
    opacity: 0; transform: translateY(150%);
    transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
  html.m-on .m-buybar.is-shown { opacity: 1; transform: translateY(0); }   /* only after scrolling past the inline button */
  html.m-on .m-buybar .btn.solid { width: 100%; border-radius: 999px; pointer-events: auto;
    box-shadow: 0 12px 34px rgba(0,0,0,.55); }
  /* clearance so the footer/story isn't hidden behind the floating pill */
  html.m-on.m-has-buybar .footer { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  /* "z kolekce / from the brand" related grid → horizontal slider */
  html.m-on .pdp-related-grid {
    display: flex; grid-template-columns: none; gap: 12px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -20px; padding: 4px 20px 10px; scroll-padding-left: 20px;
  }
  html.m-on .pdp-related-grid::-webkit-scrollbar { display: none; }
  html.m-on .pdp-related-grid > * { flex: 0 0 70vw; max-width: 300px; scroll-snap-align: start; }

  /* ═══ STUDIO DETAIL ═══════════════════════════════════════════════════════ */
  /* app-like map: rounded card, static Leaflet preview (no scroll trap) + a
     tap-to-navigate overlay (opens Google Maps), injected by mobile.js */
  /* contact area rebuilt: map is its own card; the info card no longer overlaps it
     (desktop pulls the card up -90px over the map — reset that on mobile) */
  html.m-on .st-contact-card { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
  /* map: square TOP edge (flush), rounded BOTTOM only. Leaflet's transformed tile
     pane escapes the parent rounded overflow clip, so set the radius on the map
     container ITSELF too. order: top-left top-right bottom-right bottom-left. */
  /* the OUTER glass block (.st-blk.st-contact) wraps the map at its top with
     border-radius:14px all corners + overflow:hidden — that is what was still
     rounding the map's top. Square its top corners. */
  html.m-on .st-blk.st-contact { border-top-left-radius: 0; border-top-right-radius: 0; }
  html.m-on .st-contact-glass-map { margin: 0; border-radius: 0 0 var(--r-md, 14px) var(--r-md, 14px); overflow: hidden; }
  html.m-on .st-contact-map { position: relative; border-radius: 0 0 var(--r-md, 14px) var(--r-md, 14px); overflow: hidden; }
  html.m-on .st-contact-map .st-map,
  html.m-on .st-contact-map .leaflet-container,
  html.m-on .st-contact-glass-map .leaflet-container {
    border-radius: 0 0 var(--r-md, 14px) var(--r-md, 14px); overflow: hidden;
  }
  html.m-on .st-map, html.m-on .leaflet-container { pointer-events: none; }
  html.m-on .leaflet-control-zoom { display: none; }
  html.m-on .st-contact-info { margin: 0; text-align: center; }
  /* studio CTAs: centered + same size */
  html.m-on .st-contact-info .btn { display: flex; width: 100%; max-width: 300px;
    margin: 12px auto 0; justify-content: center; text-align: center; }
  /* Navigovat = centered clickable TEXT, not a button */
  html.m-on .m-map-open { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    margin: 14px auto 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
    color: var(--brand, #c8262c); text-decoration: underline; text-underline-offset: 4px;
    font: 600 12px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; }
  html.m-on .m-map-open svg { width: 16px; height: 16px; }
  /* the desktop in-map overlay is replaced by the centered text link above */
  html.m-on .st-map-open { display: none; }
  /* "Fotky" (studio photo gallery) → horizontal SLIDER, next photo peeks */
  html.m-on .st-gal-grid .st-gal-track,
  html.m-on .st-gallery:not(.st-gal-carousel) .st-gal-track {
    display: flex; flex-direction: row; grid-template-columns: none; gap: 10px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter);
    scrollbar-width: none;
  }
  html.m-on .st-gal-grid .st-gal-track::-webkit-scrollbar,
  html.m-on .st-gallery:not(.st-gal-carousel) .st-gal-track::-webkit-scrollbar { display: none; }
  html.m-on .st-gal-grid .st-gal-cell,
  html.m-on .st-gallery:not(.st-gal-carousel) .st-gal-cell {
    flex: 0 0 82%; max-width: 82%; width: 82%; margin: 0;
    scroll-snap-align: center; border-radius: var(--r-md, 14px); overflow: hidden;
  }
  html.m-on .st-gal-grid .st-gal-cell img,
  html.m-on .st-gallery:not(.st-gal-carousel) .st-gal-cell img {
    aspect-ratio: 4 / 3; width: 100%; height: 100%; object-fit: cover;
  }
  /* never leave a slide hidden behind its reveal curtain */
  html.m-on .st-gal-grid .st-gal-cell.image-reveal::after,
  html.m-on .st-gallery:not(.st-gal-carousel) .st-gal-cell.image-reveal::after { transform: translateY(-101%); }
  html.m-on .st-gal-grid .st-gal-cell.image-reveal img,
  html.m-on .st-gallery:not(.st-gal-carousel) .st-gal-cell.image-reveal img { transform: scale(1); }

  /* "Naše realizace" (kitchen cards) → full-width rectangles, one under another */
  html.m-on .st-real-grid {
    display: flex; flex-direction: column; grid-template-columns: none; gap: 16px;
  }
  html.m-on .st-real-card { width: 100%; max-width: none; }
  html.m-on .st-real-photo { aspect-ratio: 16 / 10; }

  /* studio content video → app-like player (custom overlay, built by mobile.js) */
  html.m-on .m-player {
    position: relative; border-radius: 0; overflow: hidden;
    background: #000; box-shadow: 0 18px 50px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.08); isolation: isolate;
  }
  html.m-on .m-player .st-video-el {
    display: block; width: 100%; margin: 0; border-radius: 0;
    aspect-ratio: 16 / 9; object-fit: cover; background: #000;
  }
  html.m-on .m-pl-scrim {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 32%,
      rgba(0,0,0,0) 68%, rgba(0,0,0,.28) 100%);
    transition: opacity .3s ease;
  }
  html.m-on .m-player.is-playing .m-pl-scrim { opacity: .6; }
  /* big center play button (shown while paused) */
  html.m-on .m-pl-big {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
    width: 66px; height: 66px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(0,0,0,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; display: grid; place-items: center; box-shadow: 0 6px 22px rgba(0,0,0,.45);
    transition: opacity .25s ease, transform .25s ease;
  }
  html.m-on .m-pl-big svg { width: 26px; height: 26px; margin-left: 3px; }
  html.m-on .m-player.is-playing .m-pl-big {
    opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8);
  }
  /* "tap for sound" pill — only while muted */
  html.m-on .m-pl-hint {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4;
    font: 700 9.5px/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: rgba(200, 38, 44, .92); padding: 7px 12px; border-radius: 999px;
    white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.35);
    animation: mPlPulse 1.9s ease-in-out infinite;
  }
  html.m-on .m-player:not(.is-muted) .m-pl-hint { display: none; }
  @keyframes mPlPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
  /* bottom control bar */
  html.m-on .m-pl-ctl {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  }
  html.m-on .m-pl-sound, html.m-on .m-pl-fs {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.15); color: #fff; display: grid; place-items: center;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  html.m-on .m-pl-sound svg, html.m-on .m-pl-fs svg { width: 18px; height: 18px; }
  html.m-on .m-pl-sound .m-pl-i-sound { display: none; }
  html.m-on .m-player:not(.is-muted) .m-pl-sound .m-pl-i-mute { display: none; }
  html.m-on .m-player:not(.is-muted) .m-pl-sound .m-pl-i-sound { display: block; }
  html.m-on .m-player.is-muted .m-pl-sound { animation: mPlPulse 1.9s ease-in-out infinite; }
  /* progress scrubber */
  html.m-on .m-pl-track { flex: 1 1 auto; height: 20px; position: relative; cursor: pointer; }
  html.m-on .m-pl-track::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    height: 3px; border-radius: 999px; background: rgba(255,255,255,.3);
  }
  html.m-on .m-pl-fill {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    height: 3px; border-radius: 999px; background: var(--brand, #c8262c); width: 0;
  }

  /* spotřebiče — facet/sort dropdowns open as bottom sheets ------------------- */
  /* dim layer; pointer-events:none so a tap falls through to the page and the
     existing fbOutsideHandler (closest('.appl-fb-pill') === null) closes it. */
  html.m-on .appl-fb-pill.open::before {
    content: ""; position: fixed; inset: 0; z-index: 1300;
    background: rgba(0,0,0,.45); pointer-events: none;
  }
  html.m-on .appl-fb-pill.open .appl-fb-menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    max-height: 70vh; z-index: 1310;
    border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0,0,0,.5);
    animation: m-sheet-rise .26s cubic-bezier(.2,.8,.2,1);
  }
  /* grip handle on the facet sheet */
  html.m-on .appl-fb-pill.open .appl-fb-menu::before {
    content: ""; display: block; width: 40px; height: 4px; margin: -8px auto 16px;
    border-radius: 999px; background: rgba(255,255,255,.22);
  }
  /* bigger tap targets inside the facet sheet */
  html.m-on .appl-fb-pill.open .appl-fb-opt { padding: 13px 4px; font-size: 15px; }
  @keyframes m-sheet-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* cart drawer → bottom sheet ------------------------------------------------ */
  html.m-on .drawer {
    left: 0; right: 0; width: auto; max-width: none; top: auto; bottom: 0;
    max-height: 88vh; border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0;
    transform: translateY(100%); transition: transform .34s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  html.m-on .drawer.open { transform: translateY(0); }
  /* rounded buttons inside the výběr (cart) drawer */
  html.m-on .drawer .btn { border-radius: 999px; }
  /* "Přidáno" toast → top, rounded, glassmorphic (was a white bar at the bottom);
     it slides in from the top and auto-dismisses (app.js removes .show after 2.4s) */
  html.m-on .toast {
    top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto;
    transform: translate(-50%, -180%);
    background: rgba(20,16,12,.62); color: #fff;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
    padding: 12px 20px; box-shadow: 0 12px 34px rgba(0,0,0,.45); z-index: 1500;
  }
  html.m-on .toast.show { transform: translate(-50%, 0); }
  html.m-on .drawer .drawer-head { position: relative; padding-top: 22px; }
  html.m-on .drawer .drawer-head::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22);
  }

  /* ═══ CART + CHECKOUT pages ════════════════════════════════════════════════ */
  /* desktop pads 48px top / 140px bottom — too airy on a phone, and the bottom
     gap reads as dead space above the footer. Tighten + let the tab bar clear. */
  html.m-on .cart-page { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 44px; }
  html.m-on .cart-head { margin-bottom: 26px; }
  html.m-on .cart-head h1 { font-size: clamp(40px, 13vw, 58px); }
  html.m-on .cart-head p { font-size: 15px; }
  html.m-on .cart-page-grid { gap: 26px; }

  /* cart rows → compact app card: thumb left (spanning two rows), name + remove on
     top, qty stepper + price on the bottom row. Overrides the loose ≤640 fallback. */
  html.m-on .cart-table .cart-row {
    grid-template-columns: 72px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 12px;
    align-items: start; padding: 18px 0;
  }
  html.m-on .cart-table .cart-row .thumb {
    grid-column: 1; grid-row: 1 / span 2;
    width: 72px; height: 92px; border-radius: var(--r-md, 14px);
  }
  html.m-on .cart-table .cart-row > div:not(.qty):not(.price-line) {
    grid-column: 2 / span 2; grid-row: 1; margin: 0;
  }
  html.m-on .cart-table .cart-row .name { font-size: 18px; }
  html.m-on .cart-table .cart-row .qty {
    grid-column: 2; grid-row: 2; justify-self: start; align-self: center; margin: 0;
    border-radius: 999px; overflow: hidden;
  }
  html.m-on .cart-table .cart-row .qty button { width: 38px; height: 38px; font-size: 16px; }
  html.m-on .cart-table .cart-row .qty .val { width: 32px; }
  html.m-on .cart-table .cart-row .price-line {
    grid-column: 3; grid-row: 2; justify-self: end; align-self: center; margin: 0; font-size: 15px;
  }
  html.m-on .cart-table .cart-row .x {
    grid-column: 3; grid-row: 1; justify-self: end; align-self: start; margin: 0;
  }

  /* summary card: not sticky on a phone, tighter, rounded + pill buttons */
  html.m-on .summary {
    position: static; padding: 24px 20px; border-radius: var(--r-md, 14px);
  }
  html.m-on .summary h3 { font-size: 22px; margin-bottom: 18px; }
  html.m-on .summary .row.total .sum { font-size: 26px; }
  html.m-on .summary .btn { border-radius: 999px; padding: 16px 24px; margin-top: 16px; }
  html.m-on .summary .btn:not(.solid) { margin-top: 10px; }

  /* checkout form: 16px inputs (stops iOS zoom-on-focus), pill submit */
  html.m-on .field input, html.m-on .field textarea, html.m-on .field select { font-size: 16px; }
  html.m-on #checkout-form .btn.solid {
    border-radius: 999px; width: 100%; justify-content: center; padding: 17px 24px;
  }

  /* ═══ VZORKOVNÍK: pracovní desky / dvířka / korpusy (shared .wt-* layout) ═════ */
  /* swatch grid → 2-up. Desktop drops to 1 column ≤560px, so 300+ décors stacked
     one-per-row made the page ~12 000px tall. Two columns halves it + reads like a
     proper swatch book. */
  html.m-on .wt-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  html.m-on .wt-card-info { padding: 10px 12px 12px; }
  html.m-on .wt-card-name { font-size: 14px; }
  html.m-on .wt-card-meta { font-size: 9px; }

  /* filter bar: NOT pinned on a phone — it wraps to several rows (5 facet pills +
     search), and a tall sticky bar would eat the viewport. Compact pills + drop the
     per-facet count so more fit per row. (Can't make it a horizontal scroll row —
     overflow:auto would clip the .wt-sel dropdown menus.) */
  html.m-on .wt-filters { position: static; margin-bottom: 20px; }
  html.m-on .wt-sel { padding: 7px 12px; gap: 7px; }
  html.m-on .wt-sel-count { display: none; }

  /* cinematic hero + chapter CTAs → pills (base .btn is square) */
  html.m-on .wt-cine-cta .btn, html.m-on .wt-chapter .btn, html.m-on .wt-trip .btn { border-radius: 999px; }

  /* hero clears the fixed top bar: on mobile .wt-cine is height:auto and the
     content (3-line title + lead + 2 CTAs + stamp) overflows min-height, so it
     flows from the top and the first title line tucked under the bar. Pad it. */
  html.m-on .wt-cine-content { padding-top: calc(var(--m-topbar-h) + 18px); }

  /* ═══ AKCE detail ══════════════════════════════════════════════════════════ */
  /* hero badge + validity can wrap; the two deep-link CTAs become full-width pills */
  html.m-on .akce-hero-meta { flex-wrap: wrap; gap: 10px; }
  html.m-on .akce-outro-cta { flex-direction: column; }
  html.m-on .akce-outro-cta .btn { border-radius: 999px; width: 100%; justify-content: center; }

  /* ═══ STUDIA — match the home rhythm ═══════════════════════════════════════ */
  /* filter bar NOT sticky on mobile (per user) — scrolls away with the page */
  html.m-on .st-filter-shell { position: static !important; top: auto !important; }
  /* filter layout: search on its OWN first row, chips centered, toggles centered */
  html.m-on .st-filter-row { flex-wrap: wrap; justify-content: center; gap: 10px; }
  html.m-on .st-filter-row .st-search { order: -1; flex: 0 0 100%; width: 100%; margin: 0 0 2px; }
  html.m-on .st-filter-row .st-chips { order: 1; flex: 0 0 100%; justify-content: center; flex-wrap: wrap; }
  html.m-on .st-filter-row .st-near-toggle { order: 2; }
  html.m-on .st-filter-row .st-map-toggle { order: 3; }
  /* FAQ centered (heading + questions + the "Sjednat schůzku" CTA) */
  html.m-on .st-faq { text-align: center; }
  html.m-on .st-faq .eyebrow { justify-content: center; }
  html.m-on .st-faq .btn { margin-left: auto; margin-right: auto; }
  /* hero centered (like home) */
  html.m-on .st-finder-hero { text-align: center; }
  html.m-on .st-finder-hero .eyebrow { justify-content: center; margin-bottom: 16px; }
  html.m-on .st-finder-hero .lead,
  html.m-on .st-finder-hero p { margin-left: auto; margin-right: auto; }
  /* map panel: clean mobile height + clear the fixed top bar when scrolled into view */
  html.m-on .st-map-wrap { height: 56vh !important; scroll-margin-top: 70px; margin-bottom: 24px; }
  /* studio list → 2-up grid (was one tall full-width card per row) */
  html.m-on .st-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  html.m-on .st-card { height: auto !important; aspect-ratio: 3 / 4; }
  html.m-on .st-card .st-card-city,
  html.m-on .st-card .st-card-name { font-size: 1.15rem; }
  html.m-on .st-card .st-card-kicker,
  html.m-on .st-card .st-card-country { font-size: 9px; }
  /* group heading (Česko · 29 studií) a touch tighter */
  html.m-on .st-group { margin-bottom: 8px; }
}