/* ============================================================================
   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%; }
  /* hide the desktop nav links + cursor; the bottom bar replaces them */
  html.m-on #site-nav .nav-links { display: none; }
  html.m-on #site-nav .nav-actions .icon-btn[aria-label="Hledat"] { display: none; }
  /* 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: calc(82px + env(safe-area-inset-bottom, 0px)); }
  /* tighter single-column section rhythm */
  html.m-on .section { padding: 56px 0; }
  html.m-on .container { padding-left: 20px; padding-right: 20px; }
  /* 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); }
  /* 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: 100svh; min-height: 620px; }
  html.m-on #hero .hero-content { display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 22px calc(84px + env(safe-area-inset-bottom, 0px)); }
  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; }
  /* 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 → horizontal swipe rail (the core "feels native" move) */
  html.m-on #pin-scroll { padding: 48px 0 56px; }
  html.m-on .pin-mobile-grid {
    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: 6px 20px 10px; scroll-padding-left: 20px;
  }
  html.m-on .pin-mobile-grid::-webkit-scrollbar { display: none; }
  html.m-on .pin-mobile-grid { scrollbar-width: none; }
  html.m-on .pin-mobile-grid > .prod-card { flex: 0 0 80vw; max-width: 340px; scroll-snap-align: start; }
  /* a section eyebrow/heading sits in a .container — keep it inset, rail bleeds */
  html.m-on #pin-scroll .container { padding-left: 22px; padding-right: 22px; }

  /* VÝROBA — full-bleed cinematic band: video fills, copy overlaid on a scrim */
  html.m-on #vyroba { position: relative; min-height: 92svh; 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%; padding: 0 22px 52px; }
  html.m-on #vyroba .vy-stats { margin-top: 18px; }
  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: 0; margin-top: -12px; }
  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; }

  /* FOOTER — links side by side (two columns) instead of one stack */
  html.m-on .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  html.m-on .footer-grid > :first-child { grid-column: 1 / -1; }

  /* 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: 90svh; display: flex; align-items: center; }
  html.m-on #domov-worlds .worlds-inner { width: 100%; padding: 64px 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: 30px 0 38px; }
  /* 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-stage { max-width: 92vw; margin: 0 auto; }
  html.m-on #design-wheel .dls-vid { width: 54%; }
  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; 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; }
  /* 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 */

  /* ═══ 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; }

  /* ═══ 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; }
}