:root,
[data-theme="dark"]{
  --bg:#1a1a1e;
  --panel:#22222a;
  --panel2:#2a2a33;
  --text:#f6f4ef;
  --muted:#a0a0a8;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.35);
  --pill-bg:rgba(26,26,30,.72);
  --pill-shadow:none;
  --accent:#ffffff;
  --accent-contrast:#000000;
  --card-bg:rgba(255,255,255,.05);
  --search-input-bg:#f6f4ef;
  --search-input-fg:#111;
  --save-bg:rgba(246,244,239,.92);
  --save-fg:#111;
  --overlay-bg:rgba(0,0,0,.55);
  --footer-bg:#2a2a33;
  --orange:#F86A00;
  --orange-fg:#ffffff;
  --discord:#5865F2;
  --discord-fg:#ffffff;
  --nav-btn:#3a3a45;
  --active-bg:rgba(255,255,255,.10);
}
[data-theme="light"]{
  --bg:#e5e5e7;
  --panel:#f3f3f5;
  --panel2:#dcdce0;
  --text:#1a1a1e;
  --muted:#5c5c66;
  --line:rgba(0,0,0,.16);
  --line-strong:rgba(0,0,0,.55);
  --pill-bg:rgba(245,245,247,.78);
  --pill-shadow:none;
  --accent:#000000;
  --accent-contrast:#ffffff;
  --card-bg:rgba(0,0,0,.04);
  --search-input-bg:#ffffff;
  --search-input-fg:#111;
  --save-bg:rgba(255,255,255,.95);
  --save-fg:#111;
  --overlay-bg:rgba(0,0,0,.35);
  --footer-bg:#f2f2f4;
  --nav-btn:#ffffff;
  --active-bg:rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  transition:background-color .25s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}

/* ------- Nav backdrop: blur + lock scroll when dropdown open ------- */
.nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:5;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
[data-theme="light"] .nav-backdrop{background:rgba(0,0,0,.18)}
html.dropdown-open .nav-backdrop{opacity:1;pointer-events:auto}
/* Mobile-only scroll lock: the mobile bottom sheet needs the viewport pinned
   so the page behind it can't scroll. On desktop we deliberately DO NOT lock
   scroll via `overflow:hidden` because that kills position:sticky on `.nav`
   mid-page — the nav would snap back to its DOM-origin position (top of
   page, out of the viewport) and the dropdown would open invisibly up there.
   The .nav-backdrop (pointer-events:auto) still catches background clicks on
   desktop, which is enough interaction prevention. */
@media (max-width:780px){
  html.dropdown-open,
  html.dropdown-open body{overflow:hidden}
}
/* When any nav dropdown (BERTOS pill or user pill) is open:
   1) elevate .nav above everything else so its absolute-positioned dropdown
      panel paints on top of all page chrome;
   2) if the filter toolbar is STUCK (welded to the nav as one bar), slide it
      out of view with opacity+translateY (NO height collapse → no layout
      shift, no flicker fighting the morph JS). The dropdown's own expand
      animation fills the vacated space;
   3) if the filter toolbar is NOT stuck (inline, floating down the page),
      drop it below the backdrop (.nav-backdrop z:5) so the backdrop's blur
      covers it like any other page content, instead of the chips staying
      sharp on top of the blur. */
html.dropdown-open .nav{z-index:60}
html.dropdown-open .filter-toolbar{z-index:1}
html.dropdown-open .filter-toolbar.is-stuck{
  opacity:0;
  transform:translateY(-110%);
  pointer-events:none;
  box-shadow:none;
  transition:
    transform .32s cubic-bezier(.32,.72,0,1),
    opacity .22s ease,
    box-shadow .22s ease;
}

/* Floating Discord CTA that appears at the bottom when the dropdown is open */
.discord-cta{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(30px);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border-radius:999px;
  background:var(--discord);
  color:var(--discord-fg);
  font-family:inherit;font-weight:800;font-size:15px;letter-spacing:.01em;
  z-index:15;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease .05s, transform .35s cubic-bezier(.4,0,.2,1) .05s;
}
.discord-cta svg{width:20px;height:20px;display:block;fill:currentColor}
html.dropdown-open .discord-cta{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* ------- Top nav bar: notch cutout (mirror of footer), same width as footer ------- */
.nav{
  position:sticky;
  top:0;
  z-index:10;
  margin:0 auto;
  max-width:1360px;
  padding:0;
  background:var(--footer-bg);
  /* Bottom corners flatten in sync with filter-toolbar morph so the two bars join seamlessly */
  border-radius:0 0 calc(44px * (1 - var(--morph, 0))) calc(44px * (1 - var(--morph, 0)));
  transition:border-radius .15s ease;
}
.navin{
  position:relative;
  z-index:2;
  max-width:1360px;
  margin:0 auto;
  padding:14px 28px;
  background:transparent;
  border:0;
  border-radius:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
/* Landing page only: nav width matches the bento linkcards (1080px) so the
   top bar and the tutorial underneath line up with the button strip. */
body.page-landing .nav{max-width:1080px}
body.page-landing .navin{max-width:1080px;padding-left:18px;padding-right:18px}
.brand{
  display:flex;align-items:center;
  font-family:"Fredoka","Segoe UI Black",Impact,system-ui,sans-serif;
  font-weight:700;letter-spacing:.02em;font-size:18px;text-transform:uppercase;
  line-height:1;
  justify-self:start;
}
.navlinks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-self:center;position:relative}
/* Big BERTOS wordmark that occupies the navlinks row while the brand-menu
   dropdown is open. Positioned absolutely so it overlays the pills; the
   pills themselves fade/scale out via `html.brand-menu-open .navlinks > a`.
   Only the brand-menu toggle flips this (not the right-side settings pill). */
.navlinks-bertos{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Fredoka","Segoe UI Black",Impact,system-ui,sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:.18em;
  color:var(--text);
  opacity:0;
  transform:translateY(6px) scale(.94);
  pointer-events:none;
  transition:
    opacity .22s ease,
    transform .35s cubic-bezier(.32,.72,0,1);
}
.navlinks > a{
  transition:
    opacity .25s ease,
    transform .32s cubic-bezier(.32,.72,0,1),
    background .15s ease,
    color .15s ease;
}
html.brand-menu-open .navlinks > a{
  opacity:0;
  transform:translateY(-6px) scale(.9);
  pointer-events:none;
}
html.brand-menu-open .navlinks-bertos{
  opacity:1;
  transform:none;
  transition:
    opacity .3s ease .1s,
    transform .4s cubic-bezier(.32,.72,0,1) .08s;
}
.navlinks a,.pill{
  border:0;
  padding:9px 14px;
  border-radius:999px;
  background:var(--nav-btn);
  font-size:14px;
  color:var(--text);
}
.navlinks a{transition:background .15s ease, color .15s ease}
.navlinks a:hover,
.navlinks a:focus-visible,
.navlinks a.active{
  background:var(--text);
  color:var(--bg);
}
/* Icon-first nav pill. Default: just the icon in a compact pill.
   On hover / keyboard focus / .active (current page), the label slides out
   from behind the icon via a max-width + opacity + margin-left transition —
   same expand-on-reveal feel as a magic Dock. Shared by Home, Produkty and
   Tracking so all three top-nav items read as one visual family. */
.navlink-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 11px;
  overflow:hidden;
}
.navlink-ico svg{
  width:16px;
  height:16px;
  display:block;
  flex-shrink:0;
}
.navlink-ico-label{
  max-width:0;
  opacity:0;
  margin-left:0;
  overflow:hidden;
  white-space:nowrap;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  transition:
    max-width .35s cubic-bezier(.32,.72,0,1),
    opacity .22s ease,
    margin-left .35s cubic-bezier(.32,.72,0,1);
}
.navlink-ico:hover .navlink-ico-label,
.navlink-ico:focus-visible .navlink-ico-label,
.navlink-ico.active .navlink-ico-label{
  max-width:180px;
  opacity:1;
  margin-left:8px;
}
/* Legacy class kept so markup that still uses .navlink-home gets the
   same compact pill geometry — any new link should use .navlink-ico. */
.navlink-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 11px;
}
.navlink-home svg{
  width:16px;
  height:16px;
  display:block;
}
.navin-right{
  display:flex;align-items:center;gap:8px;
  justify-self:end;
}
.navlink-cta{
  background:var(--orange);
  color:var(--orange-fg);
  padding:9px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:0;
  line-height:1;
}

/* ------- Nav chrome (right side): one combined pill ------- */
.nav-chrome{position:relative;display:flex;align-items:center;justify-self:end}
.combo-pill{
  display:inline-flex;
  align-items:stretch;
  border:0;
  background:var(--nav-btn);
  border-radius:999px;
  overflow:hidden;
  cursor:pointer;
  padding:0;
  color:var(--text);
  font-family:inherit;
  height:38px;
  position:relative;
}
/* Slots are content-sized so the pill stays at its original width.
   `combo-lang` (just a flag, no text) gets an explicit width so it doesn't
   collapse to 0. */
.combo-slot{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 10px;
  background:transparent;
  border:0;
  color:inherit;
  font:inherit;
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
  position:relative;
}
.combo-slot + .combo-slot{border-left:1px solid rgba(127,127,127,.25)}
.combo-slot svg{width:18px;height:18px;display:block}
.combo-slot{transition:opacity .22s ease}

/* ---- User slot: small status badge in the corner ---- */
.combo-user-badge{
  position:absolute;
  right:4px;bottom:4px;
  width:12px;height:12px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  background:#dc2626;             /* red = not logged in */
  color:#fff;
  box-shadow:0 0 0 1.5px var(--nav-btn);  /* "cutout" ring matching pill bg */
  transition:background .2s ease, box-shadow .2s ease;
}
.combo-pill:hover .combo-user-badge,
.combo-pill:focus-visible .combo-user-badge,
.combo-pill[aria-expanded="true"] .combo-user-badge{
  box-shadow:0 0 0 1.5px var(--text);     /* follow the inverted pill bg on hover/open */
}
.combo-user-badge.is-on{background:#16a34a} /* green = logged in */
.combo-user-badge .badge-x,
.combo-user-badge .badge-check{width:8px;height:8px;display:block}
.combo-user-badge .badge-check{display:none}
.combo-user-badge.is-on .badge-x{display:none}
.combo-user-badge.is-on .badge-check{display:block}

/* ---- Chip flag badge: small rounded-square bubble sitting beside the
   currency code+symbol inside the combo-chip slot. Shape mirrors the top-nav
   pill aesthetic (rounded square, no border/shadow). The flag SVG inside
   covers the whole badge via preserveAspectRatio=slice. ---- */
.chip-flag-badge{
  flex:0 0 auto;
  display:inline-block;
  width:20px;height:20px;
  border-radius:999px;                     /* round again */
  overflow:hidden;
  position:relative;
  background:transparent;
  /* Thin stroke in the slot-separator colour so the badge matches the vertical
     divider rhythm between the pill's slots. */
  box-shadow:0 0 0 1px rgba(127,127,127,.25);
}
.chip-flag-badge svg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  display:block;
}
/* Open-state overlay: gear + "Nastavení" text replaces the three slot
   icons when the combo pill is open. Pill width stays the same (absolute
   positioning). The gear spins into place as the pill opens. */
.combo-open-state{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  /* `color:inherit` so the pill's own hover/open color (`var(--bg)`) cascades
     down to the gear stroke and the "Nastavení" label. Hard-coding
     `color:var(--text)` here froze the font+icon at the dark variant and
     the inverted pill background turned it unreadable. */
  color:inherit;
  font:inherit;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:scale(.85);
  transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.combo-open-gear{
  width:18px;height:18px;display:block;flex-shrink:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  transform:rotate(-120deg);
}
.combo-pill[aria-expanded="true"] .combo-slot{opacity:0;pointer-events:none}
.combo-pill[aria-expanded="true"] .combo-slot + .combo-slot{border-color:transparent}
.combo-pill[aria-expanded="true"] .combo-open-state{
  opacity:1;
  transform:scale(1);
}
.combo-pill[aria-expanded="true"] .combo-open-gear{transform:rotate(0)}
.combo-slot .flag{
  width:20px;height:20px;border-radius:999px;overflow:hidden;display:inline-block;flex-shrink:0;
}

/* ------- Brand pill (left side): hamburger + BERTOS, mirrors combo-pill ------- */
.brand-pill{
  display:inline-flex;
  align-items:stretch;
  border:0;
  background:var(--nav-btn);
  border-radius:999px;
  overflow:hidden;
  cursor:pointer;
  padding:0;
  color:var(--text);
  font-family:inherit;
  height:38px;
  min-width:var(--pill-size,167px);
  position:relative;
  justify-self:start;
}
.brand-pill .brand-text{flex:1;padding:0 14px;justify-content:center}
.brand-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  background:transparent;
  border:0;
  color:inherit;
  font:inherit;
  font-weight:800;
  font-size:14px;
  letter-spacing:.02em;
  transition:opacity .22s ease;
}
.brand-slot + .brand-slot{border-left:1px solid rgba(127,127,127,.25)}
.brand-slot svg{width:18px;height:18px;display:block}
.brand-text{
  font-family:"Fredoka","Segoe UI Black",Impact,system-ui,sans-serif;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1;
}
/* Dual-state icon + text: hamburger ↔ X and BERTOS ↔ MENU cross-fade.
   Each slot overlays its two children in the same spot; aria-expanded on
   the pill drives which one is visible, with an easy spring curve on the
   icon so the X spins into place as the menu opens. */
.brand-pill .brand-icon{position:relative}
.brand-icon-ham,
.brand-icon-x{
  width:18px;height:18px;display:block;
  transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.brand-icon-x{
  position:absolute;
  top:50%;left:50%;
  opacity:0;
  transform:translate(-50%,-50%) rotate(-90deg) scale(.5);
}
.brand-pill[aria-expanded="true"] .brand-icon-ham{
  opacity:0;
  transform:rotate(90deg) scale(.5);
}
.brand-pill[aria-expanded="true"] .brand-icon-x{
  opacity:1;
  transform:translate(-50%,-50%) rotate(0) scale(1);
}

.brand-pill .brand-text{position:relative}
.brand-text-closed,
.brand-text-open{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.brand-text-open{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(.85);
}
.brand-pill[aria-expanded="true"] .brand-text-closed{
  opacity:0;
  transform:scale(.85);
}
.brand-pill[aria-expanded="true"] .brand-text-open{
  opacity:1;
  transform:scale(1);
}
.brand-pill[aria-expanded="true"] .brand-slot + .brand-slot{border-color:transparent}

/* Inverted colors when either nav pill is hovered OR open — X icon only shows when actually open */
.brand-pill,
.combo-pill{transition:background .18s ease, color .18s ease}
.brand-pill:hover,
.combo-pill:hover,
.brand-pill:focus-visible,
.combo-pill:focus-visible,
.brand-pill[aria-expanded="true"],
.combo-pill[aria-expanded="true"]{
  background:var(--text);
  color:var(--bg);
}
/* Open-state icon/text inherits inverted color via `color:inherit` already;
   nothing extra needed — the pill's own `color:var(--bg)` cascades down. */

/* Dropdown panel for brand-pill — mirrors .personalize nav-expand pattern */
.brand-menu{
  position:absolute;
  top:calc(100% - 44px);
  left:0;
  right:0;
  background:var(--footer-bg);
  border-radius:0 0 44px 44px;
  padding-top:44px;
  width:100%;
  box-sizing:border-box;
  z-index:1;
  max-height:44px;
  overflow:hidden;
  visibility:hidden;
  pointer-events:none;
  transition:
    max-height .45s cubic-bezier(.32,.72,0,1),
    visibility 0s linear .45s;
}
.brand-menu.open{
  max-height:720px;   /* fits 4×110px cell wall + gaps + top header + padding + mobile stacked fallback */
  visibility:visible;
  pointer-events:auto;
  transition:
    max-height .45s cubic-bezier(.32,.72,0,1),
    visibility 0s linear 0s;
}
.brand-menu::before{
  content:"";
  position:absolute;
  top:44px;
  left:56px;
  right:56px;
  height:1.5px;
  background:rgba(255,255,255,.22);
  border-radius:1px;
  opacity:0;
  transition:opacity .15s ease;
  pointer-events:none;
}
[data-theme="light"] .brand-menu::before{background:rgba(0,0,0,.14)}
.brand-menu.open::before{
  opacity:1;
  transition:opacity .2s ease .04s;
}
.brand-menu .brand-menu-inner{
  opacity:0;
  transform:translateY(-16px);
  transition:opacity .2s ease, transform .25s ease;
}
.brand-menu.open .brand-menu-inner{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .32s ease .14s,
    transform .38s cubic-bezier(.32,.72,0,1) .12s;
}
.brand-menu-inner{
  /* Pane BEJKU 2026-10-26 (iter 3): desktop brand-menu is a vertical list
     — one widget per row — instead of the 4×4 iPhone-widget wall. Center
     the list inside the dropdown with a sensible max-width so it doesn't
     stretch across the full nav width on wide screens. */
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:18px 20px 22px;
  box-sizing:border-box;
}

/* Shared row tile. Icon on the left, title + optional sub-label on the right. */
.brand-menu-link{
  position:relative;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border-radius:16px;
  text-decoration:none;
  color:var(--text);
  background:var(--nav-btn);
  border:0;
  box-shadow:none;
  overflow:hidden;
  min-width:0;
  min-height:64px;
  transition:background .15s ease, color .15s ease, transform .18s ease;
}
.brand-menu-link:hover,
.brand-menu-link:focus-visible{
  background:var(--text);
  color:var(--bg);
  outline:none;
  transform:translateX(2px);
}
.brand-menu-link-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border-radius:12px;
  background:rgba(127,127,127,.16);
  color:currentColor;
  flex:0 0 auto;
}
.brand-menu-link-icon svg{width:22px;height:22px;display:block}
.brand-menu-link-text{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%;flex:1}
.brand-menu-link-title{font-weight:800;font-size:16px;letter-spacing:.2px;line-height:1.15}
.brand-menu-link-sub{font-size:12.5px;opacity:.7;line-height:1.3}

/* All cells share the same row geometry now — kill the old 4×4 spans
   and the Produkty hero sizing override. */
.cell-produkty,
.cell-registrace,
.cell-tracking,
.cell-domu,
.cell-faq,
.cell-qc,
.cell-videa,
.cell-link{
  grid-column:auto;grid-row:auto;
}
.brand-menu-group{display:flex;flex-direction:column;gap:6px}
.brand-menu-label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:800;
  margin:0 0 10px;
}
.brand-menu-item{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  color:var(--text);
  background:transparent;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.brand-menu-item:hover,
.brand-menu-item:focus-visible{background:rgba(127,127,127,.14)}
.brand-menu-icon{
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:10px;
  background:rgba(127,127,127,.14);
  color:var(--text);
}
.brand-menu-icon svg{width:18px;height:18px;display:block}
.brand-menu-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-menu-text strong{font-size:14px;font-weight:700;line-height:1.1}
.brand-menu-text em{font-style:normal;color:var(--muted);font-size:12px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-menu-arrow{color:var(--muted);font-weight:800;font-size:14px;line-height:1}

/* Inline filter toolbar on spreadsheet page (sits above the product grid).
   Progressive morph driven by --morph (0 = normal rounded tile, 1 = flush
   extension of the top nav). JS updates --morph as the user scrolls near it. */
.filter-toolbar{
  /* --morph is set on <html> by JS; we inherit it. Must NOT redeclare it
     here or we would overwrite the inherited value. All reads use var(--morph, 0). */
  position:sticky;
  top:var(--nav-h, 66px); /* sticks directly below the nav; JS sets --nav-h to the real height */
  z-index:9;              /* below .nav (z-index:10) so nav paints on top */
  margin:14px calc(-18px * var(--morph, 0)) 22px;   /* at morph=1 cancels .page padding so edges meet nav */
  padding:calc(18px - 4px * var(--morph, 0)) 22px;
  background:color-mix(in srgb, var(--nav-btn) calc((1 - var(--morph, 0)) * 100%), var(--footer-bg));
  border-top-left-radius:calc(22px * (1 - var(--morph, 0)));
  border-top-right-radius:calc(22px * (1 - var(--morph, 0)));
  border-bottom-left-radius:calc(22px + 10px * var(--morph, 0));
  border-bottom-right-radius:calc(22px + 10px * var(--morph, 0));
  box-shadow:0 calc(14px * var(--morph, 0)) calc(30px * var(--morph, 0)) rgba(0,0,0,calc(.35 * var(--morph, 0)));
  /* Short transition smooths the handful of discrete steps a slow scroll produces.
     Scroll geometry (padding/margin/radius) is driven by JS lerp against --morph each
     frame, so CSS transitions on padding stay short — just long enough to smooth
     the hide/show toggle (where padding steps 14→10 in one frame) without lagging
     the per-frame morph updates. */
  transition:background .18s ease, box-shadow .18s ease, padding .3s cubic-bezier(.32,.72,0,1);
  will-change:margin, padding, border-radius, box-shadow, background;
}
/* Fallback for browsers without color-mix (older Safari) */
@supports not (background:color-mix(in srgb, red 50%, blue)){
  .filter-toolbar{background:var(--nav-btn)}
  .filter-toolbar.is-stuck{background:var(--footer-bg)}
}
.filter-toolbar-inner{
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:18px 28px;
  align-items:start;
  /* Collapse animation: shrink the inner panel's height to 0 and fade out.
     max-height is a generous ceiling (bigger than any natural content) so the
     ease curve runs long enough to feel smooth; overflow:hidden hides the
     filter chips as they slide up. --inner-max can be bumped later if the
     filter panel ever grows past ~700px. */
  max-height:var(--inner-max, 720px);
  opacity:1;
  overflow:hidden;
  transition:max-height .38s cubic-bezier(.32,.72,0,1),
             opacity .22s ease .05s,
             margin .28s cubic-bezier(.32,.72,0,1);
}
.filter-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.filter-label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:800;
  margin:0 0 4px;
}
.filter-actions{display:flex;justify-content:flex-end;align-items:flex-start;padding-top:4px}

/* Collapse handle — sits at the BOTTOM of the toolbar (not the top). Shows
   "SKRÝT FILTRY ∧" while expanded and "UKÁZAT FILTRY ∨" while collapsed.
   Visibility is driven continuously by --morph (the same variable that
   controls the toolbar's attach animation): max-height and opacity both
   scale linearly with --morph, so on slow scroll the handle fades in
   together with the attach instead of popping in at the stuck threshold. */
.filter-toolbar-handle{
  display:inline-flex;
  width:100%;
  align-items:center;justify-content:center;gap:10px;
  padding:0;
  margin:4px 0 -6px;        /* positive top gap (below filters), negative bottom to hug the pill edge */
  background:transparent;border:0;outline:0;cursor:pointer;
  color:var(--text);font:inherit;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  min-height:0;
  max-height:calc(28px * var(--morph, 0));
  opacity:calc(.75 * var(--morph, 0));
  overflow:hidden;
  pointer-events:none;
  -webkit-tap-highlight-color:transparent;
  /* No max-height / opacity transition — those are driven per frame by the
     --morph lerp in chrome.js, so a CSS transition on top would double-smooth
     and lag the scroll. margin/padding still transition for the collapse. */
  transition:margin .22s ease, padding .22s ease;
}
.filter-toolbar.is-stuck .filter-toolbar-handle{pointer-events:auto}
.filter-toolbar.is-stuck .filter-toolbar-handle:hover{opacity:1}
/* Both labels occupy the same spot (stacked via grid) and cross-fade on toggle
   instead of swapping via display:none. The handle's intrinsic width stays
   constant so the chevron doesn't jitter when the two words switch. */
.filter-toolbar-handle-label-hide,
.filter-toolbar-handle-label-show{
  grid-area:1 / 1;
  transition:opacity .22s ease;
}
.filter-toolbar-handle{display:grid;grid-auto-flow:column;grid-template-columns:auto auto;justify-content:center;align-items:center}
.filter-toolbar-handle-label-hide{opacity:1}
.filter-toolbar-handle-label-show{opacity:0}
.filter-toolbar-handle-chevron{
  width:16px;height:16px;display:block;color:currentColor;
  transition:transform .22s cubic-bezier(.32,.72,0,1);
  background:transparent;border:0;filter:none;
  transform:rotate(180deg);   /* chevron up by default (toolbar visible → "hide") */
}

/* Collapsed state — chevron down ("show"), labels swap, handle visible.
   Applies whether or not the toolbar is stuck, so the user's SKRÝT choice
   persists after scrolling back up: the inline toolbar at the top of the
   spreadsheet section stays compact (search + "UKÁZAT FILTRY" button only)
   until the user clicks UKÁZAT again. */
.filter-toolbar.is-stuck.is-collapsed{padding-top:10px;padding-bottom:10px;margin-bottom:22px}
.filter-toolbar.is-collapsed .filter-toolbar-handle{margin:0;padding:4px 0;max-height:40px;opacity:1;pointer-events:auto}
/* When collapsed, shrink the gap between the search pill and the UKÁZAT
   FILTRY handle. Default `.filter-search` has 14 px bottom margin — too
   tall when the chip drawer is folded away. */
.filter-toolbar.is-collapsed .filter-search{margin-bottom:4px}
.filter-toolbar.is-collapsed .filter-toolbar-handle-label-hide{opacity:0}
.filter-toolbar.is-collapsed .filter-toolbar-handle-label-show{opacity:1}
.filter-toolbar.is-collapsed .filter-toolbar-handle-chevron{transform:rotate(0deg)}
/* Smoothly collapse the inner panel: slide its height to 0 and fade out.
   Delay opacity slightly so the content fades BEFORE the row crunches shut,
   and fades back in AFTER the row has reopened. Pairs with the mirrored
   transition on `.filter-toolbar-inner` above. */
.filter-toolbar.is-collapsed .filter-toolbar-inner{
  max-height:0;
  opacity:0;
  margin-top:0;
  transition:max-height .38s cubic-bezier(.32,.72,0,1),
             opacity .18s ease,
             margin .28s cubic-bezier(.32,.72,0,1);
}

/* Search row: sibling of .filter-toolbar-inner (hoisted out of the chip grid
   so that collapsing the drawer never hides the search). On desktop it
   just sits above the chip grid with a small margin — same visual as
   before the hoist. */
.filter-search{
  display:flex;align-items:center;gap:10px;
  background:var(--search-input-bg);
  color:var(--search-input-fg);
  border:1px solid var(--line);
  border-radius:16px;
  padding:4px 6px 4px 14px;
  margin-bottom:14px;
}
/* Sort + Clear live inside the drawer as their own filter-group so they
   collapse with everything else — not inside the search pill. Span the full
   drawer width (grid-column 1 / -1) so the select has room for "Latest"
   without truncating to "Late". */
.filter-group-sort{grid-column:1 / -1}
.filter-group-sort .sort-row{display:flex;gap:10px;align-items:center}
.filter-group-sort select{
  flex:1;min-width:0;
  background:rgba(127,127,127,.14);color:var(--text);
  border:0;border-radius:999px;padding:9px 14px;font:inherit;font-weight:700;cursor:pointer;
}
.filter-group-sort button{
  flex:0 0 auto;
  background:var(--accent);color:var(--accent-contrast);
  border:0;border-radius:999px;padding:9px 18px;font:inherit;font-weight:800;cursor:pointer;
}
/* "plain" variant — no pill, no fill, no border; just icon + text input + hidden
   underline on focus. Keeps the sort/clear widgets as pills so they're still obviously tappable. */
.filter-search-plain{
  background:transparent;
  color:var(--text);
  border:0;
  border-radius:0;
  padding:4px 2px 4px 2px;
  /* Keep clear(×) + submit(→) buttons on the trailing edge of the search row
     without them squashing the input. */
  align-items:center;
  gap:6px;
}
.filter-search-plain .filter-search-icon{color:var(--muted)}
.filter-search-plain .filter-search-icon svg{width:22px;height:22px}
.filter-search-plain input[type="search"]{
  background:transparent;color:inherit;
  padding:14px 4px;
  font-size:20px;font-weight:600;letter-spacing:-.01em;
}
.filter-search-plain input[type="search"]::placeholder{color:var(--muted);opacity:1;font-weight:500}
.filter-search-plain input[type="search"]:focus{outline:0;box-shadow:none}

/* Trailing action buttons (clear × + submit arrow). Flat, circular, muted
   until hover; same visual family as the icon-only chrome pills. */
.filter-search-clear,
.filter-search-submit{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:transparent;border:0;border-radius:999px;
  color:var(--muted);cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.filter-search-clear svg,
.filter-search-submit svg{width:20px;height:20px;display:block}
.filter-search-clear:hover,
.filter-search-submit:hover{background:rgba(127,127,127,.14);color:var(--text)}
.filter-search-submit{
  background:var(--text);color:var(--bg);
}
.filter-search-submit:hover{background:var(--text);color:var(--bg);transform:translateX(2px)}
.filter-search-clear[hidden]{display:none !important}
.filter-search-icon{display:inline-flex;color:var(--muted);flex:0 0 auto}
.filter-search-icon svg{width:18px;height:18px;display:block}
.filter-search input[type="search"]{
  flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;
  padding:12px 4px;font:inherit;appearance:none;-webkit-appearance:none;
}
.filter-search input[type="search"]::-webkit-search-cancel-button{display:none}
.filter-search select{
  border:0;background:rgba(127,127,127,.14);color:var(--text);
  border-radius:12px;padding:9px 10px;font:inherit;font-weight:700;cursor:pointer;
}
.filter-search button{
  border:0;background:var(--accent);color:var(--accent-contrast);
  border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;
}

@media (max-width:840px){
  .filter-toolbar-inner{grid-template-columns:1fr 1fr;gap:16px 20px}
  .filter-actions{grid-column:1 / -1;justify-content:flex-start}
  .filter-search{flex-wrap:wrap;padding:4px 6px 6px 12px}
  .filter-search input[type="search"]{flex:1 1 100%;order:0}
  .filter-search-icon{order:-1}
  .filter-search select,.filter-search button{flex:1}
}

/* Shared chip + range + scrolltop widget styles (used in filter toolbar) */
.brand-menu-chips{display:flex;flex-wrap:wrap;gap:6px}
.brand-menu-chip{
  background:rgba(127,127,127,.14);
  border:0;color:var(--text);
  border-radius:999px;
  padding:6px 12px;font-size:13px;font-weight:600;
  cursor:pointer;transition:background .15s ease, color .15s ease;
  display:inline-flex;align-items:center;gap:5px;
}
.brand-menu-chip:hover,
.brand-menu-chip.active{background:var(--text);color:var(--bg)}

/* Matryoshka menu — one row per depth level, each row is a full-width strip
   of round icon tiles with the label beneath. Horizontally scrollable when
   the tiles overflow (narrow screens, long sub-level lists). The look
   matches the dense category row screenshot pane BEJKU sent. */
/* The menu-tree group lives inside .filter-toolbar-inner (a 1fr 1fr 1fr auto
   grid). Stretch THE GROUP across every column so the tile rows run the full
   width of the toolbar (matches the admin menu width). Previously only the
   inner .filter-menu-tree had `grid-column:1/-1`, but that element isn't a
   grid item — it sits inside the group, so the rule had no effect and the
   tree was squashed into column 1. */
.filter-group.filter-group-menu-tree{grid-column:1 / -1}
.filter-menu-tree{
  display:flex;flex-direction:column;gap:4px;
  width:100%;
}
.filter-menu-level{
  display:flex;
  gap:4px;
  align-items:flex-start;
  padding:10px 2px 12px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.filter-menu-level::-webkit-scrollbar{height:6px}
.filter-menu-level::-webkit-scrollbar-thumb{background:rgba(127,127,127,.24);border-radius:999px}
.filter-menu-level + .filter-menu-level{
  border-top:1px solid rgba(127,127,127,.14);
  padding-top:12px;
}
.filter-menu-skeleton{color:var(--muted);font-size:12px;letter-spacing:.1em;align-self:center;padding:0 10px}

/* Individual tile = round icon packshot + label below. 72px packshot on
   desktop, scales down on tight widths. Active tile gets a ring to signal
   the drilldown state (matches the "Tops" state in the reference image). */
.menu-tile{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex:0 0 auto;
  background:transparent;border:0;outline:0;cursor:pointer;
  padding:4px 6px;border-radius:14px;
  color:var(--text);font:inherit;
  scroll-snap-align:start;
  min-width:72px;max-width:92px;
  transition:background .15s ease;
}
.menu-tile:hover{background:rgba(127,127,127,.08)}
.menu-tile:focus-visible{box-shadow:0 0 0 2px var(--text) inset}
.menu-tile-art{
  width:60px;height:60px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--search-input-bg, rgba(127,127,127,.14));
  border:2px solid transparent;
  overflow:hidden;flex:0 0 auto;
  transition:border-color .15s ease, transform .15s ease;
}
.menu-tile.active .menu-tile-art{border-color:var(--text);transform:scale(1.02)}
.menu-tile-img{width:100%;height:100%;object-fit:cover;display:block}
.menu-tile-emoji,
.menu-tile-fallback{
  font-size:22px;font-weight:800;line-height:1;color:var(--text);
}
.menu-tile.is-brand .menu-tile-art{background:rgba(127,127,127,.22)}
.menu-tile-label{
  font-size:12px;font-weight:600;letter-spacing:.1px;
  text-align:center;line-height:1.1;
  white-space:nowrap;max-width:88px;overflow:hidden;text-overflow:ellipsis;
}
.menu-tile.active .menu-tile-label{font-weight:800}
.menu-tile-back .menu-tile-art{background:transparent;border:2px dashed rgba(127,127,127,.3)}
.menu-tile-back .menu-tile-emoji{font-weight:700}
.menu-tile-back:hover .menu-tile-art{border-color:var(--text)}

@media (max-width:640px){
  .menu-tile{min-width:64px;max-width:84px}
  .menu-tile-art{width:52px;height:52px}
}
.brand-menu-range{display:flex;flex-direction:column;gap:8px;padding:6px 2px 0}
.brand-menu-range input[type="range"]{width:100%;accent-color:var(--text)}
.brand-menu-range-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:700}
.brand-menu-actions{display:flex;justify-content:flex-end;align-items:flex-start}
.brand-menu-scrolltop{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--text);color:var(--bg);
  border:0;cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:transform .18s ease;
}
.brand-menu-scrolltop:hover{transform:translateY(-3px)}
.brand-menu-scrolltop svg{width:22px;height:22px;display:block}

/* Floating scroll-to-top: fixed bottom-RIGHT corner (both desktop and mobile).
   Hidden by default; JS flips .is-visible once the product grid's top edge
   scrolls above the fold. On mobile the bottom-anchored nav sits at the
   bottom of the viewport, so this FAB stacks above it via extra bottom gap. */
.scrolltop-fab{
  position:fixed;
  right:20px;bottom:20px;
  width:48px;height:48px;border-radius:50%;
  background:var(--text);color:var(--bg);
  border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  opacity:0;transform:translateY(10px) scale(.9);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.32,.72,0,1);
  z-index:30;
}
.scrolltop-fab.is-visible{opacity:1;transform:none;pointer-events:auto}
.scrolltop-fab:hover{transform:translateY(-2px)}
.scrolltop-fab svg{width:20px;height:20px;display:block}
@supports (bottom:env(safe-area-inset-bottom)){
  .scrolltop-fab{bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right))}
}
.combo-slot .flag svg{width:100%;height:100%}
.combo-chip{padding:0 14px}
.combo-chip .code-desktop{white-space:nowrap}

/* Theme icon: sun in dark mode, moon in light mode */
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* ------- Hero ------- */
.hero{max-width:760px;margin:0 auto;padding:54px 18px 30px;text-align:center}
.avatar{width:118px;height:118px;border-radius:30px;object-fit:cover;border:1px solid var(--line)}
h1{
  font-family:"Fredoka","Segoe UI Black",Impact,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(44px,9vw,96px);
  line-height:.9;
  margin:18px 0 8px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.subtitle{color:var(--muted);font-size:18px;line-height:1.5;margin:auto;max-width:620px}

/* ------- Hero social icons — bare, no bg/border, big ------- */
.socials{display:flex;justify-content:center;gap:28px;margin:26px 0}
.socials a{
  display:grid;place-items:center;
  color:var(--text);
  background:transparent;
  border:0;
  padding:4px;
}
.socials svg{width:38px;height:38px;display:block}

/* ------- Video: click-through thumbnail (triangle only) ------- */
.video{margin:22px auto;border-radius:28px;overflow:hidden;background:#000;position:relative;display:block}
.video img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.video-play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  display:grid;place-items:center;
  pointer-events:none;
  background:transparent;
  border:0;
}
.video-play svg{
  width:80px;height:80px;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.55));
}

/* ------- Link cards — bento grid layout with mouse tilt ------- */
.links{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto;
  gap:16px;
  max-width:1080px;
  margin:32px auto 40px;
  padding:0 18px;
}
/* Bento positioning:
   Row 1 — Spreadsheet spans full width (short)
   Row 2 — LitBuy (narrow tall) + figurine gap + Discord + Telegram */
.linkcard:nth-of-type(1){grid-column:1 / span 2;grid-row:2;min-height:340px;justify-self:start;width:300px}  /* LitBuy — tall bottom-left, right edge stops just before mascot's pointing fingertip */
.linkcard:nth-of-type(2){grid-column:1 / span 4;grid-row:1;min-height:150px}  /* Spreadsheet — full width top strip */
.linkcard:nth-of-type(3){grid-column:3;grid-row:2;align-self:end;min-height:210px}  /* Discord — short block under mascot's hand */
.linkcard:nth-of-type(4){grid-column:4;grid-row:2;align-self:end;min-height:210px}  /* Telegram — short block under mascot's hand */

/* Berto figurine PNG — stands between LitBuy (tall left) and Discord (small), leans against Discord's left edge */
.bento-figurine{
  position:absolute;
  right:40%;
  bottom:0;
  height:380px;
  width:auto;
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.35));
}
[data-theme="light"] .bento-figurine{filter:drop-shadow(0 24px 32px rgba(0,0,0,.18))}

.linkcard{
  position:relative;
  display:block;
  padding:24px 22px;
  border:0;
  border-radius:26px;
  background:var(--nav-btn);
  min-height:230px;
  overflow:hidden;
  isolation:isolate;
  /* Animations disabled on bento linkcards — static cards */
  transform:none !important;
  transition:none !important;
  will-change:auto;
}
/* LitBuy's min-height is set in nth-of-type(1); no per-child override needed */

.linkcard h2{
  font-size:22px;
  font-weight:800;
  margin:0 0 10px;
  letter-spacing:-.01em;
  line-height:1.05;
  max-width:75%;
  text-transform:uppercase;
}
.linkcard p{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
  max-width:88%;
}
.arrow-tr{
  position:absolute;
  top:22px;
  right:22px;
  color:var(--muted);
  font-size:18px;
  opacity:.6;
  line-height:1;
  font-weight:700;
}
.card-icon{
  position:absolute;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:transparent;
  border-radius:0;
  color:var(--text);
}
.card-icon img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.card-icon svg{width:44px;height:44px;display:block}
.card-icon .glyph{font-size:40px;font-weight:900;line-height:1}
/* LitBuy logo je černá kresba na transparentu — invertuj v dark theme aby zůstala vidět */
[data-theme="dark"] .card-icon img{filter:invert(1)}

/* ------- Spreadsheet page ------- */
.page{max-width:1360px;margin:auto;padding:42px 18px 70px}
.eyebrow{color:var(--text);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.topline{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.topline h1{font-size:clamp(42px,7vw,82px);max-width:760px}
.cta{background:var(--accent);color:var(--accent-contrast);border:0;border-radius:16px;padding:15px 18px;font-weight:850;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

/* ------- Product card (brand bento style, matches .linkcard on homepage) ------- */
/* Card is a 5-section stack: top-icons / image / name / price / CTA.
   Ratio 1 : (image 1:1) : 1 : 1 : 2 — top-icons, name and price are visually
   equal; CTA is twice their height. Enforced via `min-height` on each section
   (not grid-fr, so content never gets clipped if a long name wraps etc). */
.product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:26px;
  background:var(--nav-btn);
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s ease, box-shadow .18s ease;
  --section-h: 36px;
}
.product-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.product-thumb-link{display:block;color:inherit;text-decoration:none}

/* 1:1 image slot. Pane BEJKU 2026-10-25: dark theme also uses a white
   backdrop so packshots on transparent / white backgrounds don't disappear
   into the dark card chrome — reads the same as light mode. object-fit
   contain so the product is never cropped. */
.product-thumb{
  position:relative;margin:0;
  aspect-ratio:1/1;
  background:#fff;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.product-thumb img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .4s ease;
}
.product-card:hover .product-thumb img{transform:scale(1.04)}

/* Section wrappers (invisible dividers). Section ratios inside the card:
     top (1×)  :  image (1:1)  :  meta=name+price (2×)  :  cta (2×).
   `--section-h` is the unit height; the meta row (name + price) and the CTA
   row are both 2× tall. */
.product-section{
  display:flex;align-items:center;
  padding:4px 14px;
  min-width:0;
  min-height:var(--section-h);
}
/* Top: deadlink + heart — pane BEJKU 2026-10-25 moved from a dedicated
   strip above the image to an OVERLAY on top of the image. This shortens
   the whole card by ~44 px (one --section-h plus padding) because the
   icons no longer claim their own row in the flex column.
   `position:absolute` pulls the strip out of the flow; `.product-card`
   already has position:relative so it anchors here. The strip itself is
   transparent; the icons each carry their own glassy pill so they stay
   legible over any packshot. */
.product-section-top{
  position:absolute;
  top:10px;left:10px;right:10px;
  z-index:3;
  padding:0;
  min-height:0;
  justify-content:space-between;
  background:transparent;
  overflow:visible;
  pointer-events:none;      /* only the buttons themselves catch clicks */
}
.product-section-top .product-icon-btn{pointer-events:auto}
/* Merged name + price. flex-column with a tight gap so they feel like one
   stacked block rather than two separate rows. */
.product-section-meta{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:0;                   /* was 2px — pane BEJKU: tighten name↔price spacing */
  padding:6px 14px;
  min-height:calc(var(--section-h) * 2);
}
/* Pull the price row one hair upward so name + price read as a single block. */
.product-section-meta .product-pricerow{margin-top:-1px}
.product-section-cta{
  padding:0;
  align-items:stretch;    /* CTA button + QC button fill the section height */
  min-height:calc(var(--section-h) * 2);
  border-top:1px solid color-mix(in srgb, var(--accent-contrast) 10%, transparent);
  /* Let the glow-btn's halo (::before, inset:-10px) spill beyond the CTA
     section instead of being clipped by the card edge. The product-card
     itself has overflow:hidden so the halo stops at the card border. */
  overflow:visible;
}

/* Icon buttons now sit inside the top section — no longer absolute. */
.product-icon-btn{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  /* Glassy pill — sits ON TOP of the packshot, so it needs its own
     background to stay legible on any product colour. 92% white + 2px
     blur reads like the icons are embedded in the glass of the card.
     Fallback for engines without backdrop-filter: solid white @ 92%. */
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
          backdrop-filter:blur(6px) saturate(1.1);
  border-radius:999px;
  border:0;padding:0;cursor:pointer;
  color:#1a1a1a;
  position:relative;
  /* Burst ring + shake rotation extend past the button bounds — if an
     ancestor ever clips, we at least don't clip ourselves. */
  overflow:visible;
  box-shadow:0 1px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.04);
  transition:color .15s ease, transform .15s ease, background .15s ease;
}
.product-icon-btn:hover{background:#fff}
.product-icon-btn svg{width:18px;height:18px}
.product-icon-btn svg{width:22px;height:22px;display:block;transform-origin:center}
.product-icon-btn:hover{transform:scale(1.08)}
.product-card.is-liked .product-like{color:#ff3b63}

/* ---- Click feedback animations ----------------------------------------
   .is-animating is toggled by app.js for ~500 ms on click so the heart
   / unlink icon bounces visibly. Burst ring draws briefly behind the
   button via ::after to make the interaction obvious at a glance. */
.product-icon-btn.is-animating svg{animation:btnPop .42s cubic-bezier(.34,1.56,.64,1)}
.product-icon-btn.is-animating::after{
  content:'';position:absolute;inset:-6px;border-radius:999px;
  border:2px solid currentColor;pointer-events:none;
  animation:btnBurst .5s ease-out forwards;
}
.product-like.is-animating svg{animation:heartPop .55s cubic-bezier(.34,1.56,.64,1)}
.product-report.is-animating svg{animation:reportShake .55s ease-out}

@keyframes btnPop{
  0%  {transform:scale(1)}
  40% {transform:scale(.78)}
  70% {transform:scale(1.18)}
  100%{transform:scale(1)}
}
@keyframes heartPop{
  0%  {transform:scale(1)}
  18% {transform:scale(.72)}
  40% {transform:scale(1.35)}
  65% {transform:scale(.94)}
  100%{transform:scale(1)}
}
@keyframes reportShake{
  0%  {transform:rotate(0) scale(1)}
  20% {transform:rotate(-14deg) scale(1.1)}
  40% {transform:rotate(12deg) scale(1.1)}
  60% {transform:rotate(-8deg) scale(1.05)}
  80% {transform:rotate(5deg) scale(1.02)}
  100%{transform:rotate(0) scale(1)}
}
@keyframes btnBurst{
  0%  {transform:scale(.4);opacity:.9}
  100%{transform:scale(1.6);opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .product-icon-btn.is-animating svg,
  .product-icon-btn.is-animating::after{animation:none}
}

/* Name: single line, NOT bold. Pane BEJKU 2026-10-25: switched from the
   "…" ellipsis to a right-edge fade mask so long titles blend out instead
   of truncating. Hovering an overflowing name triggers a left-sliding
   marquee (`nameSlide` keyframe) that reveals the hidden text, then
   loops back to the start. The intrinsic sliding happens on an inner
   <span> wrapper if we need to inject one — but a simpler CSS-only variant
   runs on the element itself via `transform` and auto-paused when the
   title fits (no overflow => no animation triggered). */
.product-name{
  flex:0 1 auto;min-width:0;
  max-width:66%;
  font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.25;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  /* Fade the right edge instead of ellipsis. 24px fade zone keeps the body
     text crisp. Supported in all modern engines (webkit/moz/standard). */
  mask-image:linear-gradient(to right, black calc(100% - 24px), transparent);
  -webkit-mask-image:linear-gradient(to right, black calc(100% - 24px), transparent);
  position:relative;
}
/* Marquee on hover — only visible if the text actually overflows (JS adds
   `data-overflow="1"` on hovered cards whose name is wider than the slot).
   On fitting names the hover is a no-op. */
.product-card:hover .product-name[data-overflow="1"]{
  animation:nameSlide 7s linear 1;
}
@keyframes nameSlide{
  0%,  12% { transform:translateX(0) }
  70%, 85% { transform:translateX(calc(-1 * var(--slide-dist, 60%))) }
  100%     { transform:translateX(0) }
}
@media (prefers-reduced-motion: reduce){
  .product-card:hover .product-name[data-overflow="1"]{animation:none}
}

/* Price: bold, inherits the row's center alignment. */
.product-pricerow{display:flex;align-items:baseline;gap:8px}
.product-price{font-size:18px;font-weight:800;letter-spacing:-.01em}
.product-cny{font-size:13px;color:var(--muted);font-weight:600}
/* Main CTA: cart icon on left + "KOUKNOUT PRODUKT" label.
   Cart icon has no frame/stroke/shadow — purely inline. */
.product-cta{
  flex:1;min-width:0;
  /* Original flat accent treatment — icon + label as one centred group. */
  display:flex;align-items:center;justify-content:center;
  padding:14px 18px;
  background:var(--accent);
  color:var(--accent-contrast);
  text-decoration:none;
  font-weight:850;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  transition:filter .15s ease;
}
.product-cta:hover{filter:brightness(.92)}
.product-cta-inner{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.product-cta-icon{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;box-shadow:none;color:inherit;flex:0 0 auto}
.product-cta-icon svg{width:20px;height:20px;display:block;filter:none}
.product-cta-label{flex:0 0 auto;text-align:center;margin:0}

/* Secondary square button next to CTA — perfect 1:1 aspect ratio. We let
   the CTA section stretch set the height, then use aspect-ratio to compute
   the matching width. Falls back to the old fixed width on browsers without
   aspect-ratio support (unlikely on this app's target). */
.product-qc{
  flex:0 0 auto;align-self:stretch;
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;aspect-ratio:1 / 1;
  background:color-mix(in srgb, var(--accent) 85%, var(--bg));
  color:var(--accent-contrast);
  border:0;border-left:1px solid color-mix(in srgb, var(--accent-contrast) 15%, transparent);
  cursor:pointer;
  transition:filter .15s ease, background-color .15s ease;
}
@supports not (aspect-ratio: 1 / 1){
  .product-qc{width:56px}
}
.product-qc:hover{filter:brightness(.92)}
.product-qc svg{width:20px;height:20px;display:block}

.empty{display:none;border:1px dashed var(--line);border-radius:24px;padding:30px;color:var(--muted);text-align:center}

/* ---------- login prompt modal (wishlist gate) ------------------------- */
/* Appears when an un-authenticated visitor taps the heart. Minimal styling
   that reads the same in both themes; backdrop blurs behind + card uses the
   site's `--text`/`--bg` so dark mode keeps parity. */
.login-prompt{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.login-prompt.is-open{display:flex;animation:loginPromptIn .22s ease-out}
.login-prompt-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.login-prompt-card{
  position:relative;
  width:min(420px, 100%);
  background:var(--bg);
  color:var(--text);
  border-radius:20px;
  padding:28px 24px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.04) inset;
  text-align:center;
  animation:loginPromptCardIn .28s cubic-bezier(.32,.72,0,1);
}
.login-prompt-close{
  position:absolute;top:10px;right:10px;
  width:34px;height:34px;border-radius:999px;border:0;
  background:transparent;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.login-prompt-close:hover{background:rgba(127,127,127,.14);color:var(--text)}
.login-prompt-close svg{width:16px;height:16px;display:block}
.login-prompt-icon{
  width:56px;height:56px;margin:0 auto 10px;
  background:#5865F2;color:#fff;
  border-radius:999px;
  display:grid;place-items:center;
  box-shadow:0 10px 24px -8px rgba(88,101,242,.6);
}
.login-prompt-icon svg{width:28px;height:28px}
.login-prompt-card h3{
  margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.01em;
}
.login-prompt-card p{
  margin:0 0 22px;font-size:14.5px;line-height:1.45;color:var(--muted);
}
.login-prompt-actions{display:flex;flex-direction:column;gap:8px}
.login-prompt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:12px;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:14px;letter-spacing:.02em;
  background:rgba(127,127,127,.14);color:var(--text);
  transition:background .15s ease, filter .15s ease, transform .12s ease;
}
.login-prompt-btn:hover{background:rgba(127,127,127,.22)}
.login-prompt-btn-primary{
  background:#5865F2;color:#fff;
}
.login-prompt-btn-primary:hover{filter:brightness(1.08)}
.login-prompt-btn-primary:active{transform:scale(.98)}
body.login-prompt-open{overflow:hidden}

@keyframes loginPromptIn{
  from{opacity:0} to{opacity:1}
}
@keyframes loginPromptCardIn{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .login-prompt.is-open,
  .login-prompt-card{animation:none}
}

/* Product grid stays on 4 columns down to the point where it would wrap,
   then drops straight to 2 on mobile — no intermediate 3-column breakpoint. */
@media (max-width:780px) {
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .product-name{
    font-size:14.5px;
    /* Mobile: no 2/3 cap — touch cards are narrower, so the horizontal
       scroll + fade handles long titles instead of truncating them. */
    max-width:none;
    overflow-x:auto;
    text-overflow:clip;
    scrollbar-width:none;
    -ms-overflow-style:none;
    mask-image:linear-gradient(to right, black calc(100% - 24px), transparent);
    -webkit-mask-image:linear-gradient(to right, black calc(100% - 24px), transparent);
  }
  .product-name::-webkit-scrollbar{display:none}
  .product-cta{padding:12px 14px;font-size:12px}
  .product-cta-label{margin:0}
  /* QC on mobile: aspect-ratio stays 1:1; fallback width override removed
     so the mobile button scales from the CTA section height like desktop. */
  @supports not (aspect-ratio: 1 / 1){
    .product-qc{width:48px}
  }
}

/* ------- Personalize dropdown — extends up 44px to fill nav's rounded-corner cut, expands down ------- */
.personalize{
  position:absolute;
  top:calc(100% - 44px);  /* start 44px above nav's rectangle bottom so bg covers rounded-corner gap */
  left:0;
  right:0;
  background:var(--footer-bg);
  border-radius:0 0 44px 44px;
  padding-top:44px;  /* push content below nav's area */
  width:100%;
  box-sizing:border-box;
  z-index:1;  /* behind .navin (which has z-index:2) so nav items stay on top */
  max-height:44px;  /* closed: only the corner-fill area (invisible via visibility) */
  overflow:hidden;
  visibility:hidden;
  pointer-events:none;
  transition:
    max-height .45s cubic-bezier(.32,.72,0,1),
    visibility 0s linear .45s;
}
.personalize.open{
  max-height:700px;
  visibility:visible;
  pointer-events:auto;
  transition:
    max-height .45s cubic-bezier(.32,.72,0,1),
    visibility 0s linear 0s;
}

/* Divider line: appears first, right at the start of expansion */
.personalize::before{
  content:"";
  position:absolute;
  top:44px;
  left:56px;
  right:56px;
  height:1.5px;
  background:rgba(255,255,255,.22);
  border-radius:1px;
  opacity:0;
  transform-origin:center;
  transition:opacity .15s ease;
  pointer-events:none;
}
[data-theme="light"] .personalize::before{background:rgba(0,0,0,.14)}
.personalize.open::before{
  opacity:1;
  transition:opacity .2s ease .04s;  /* line fades in almost immediately (first) */
}

/* Inner content: slides down from behind the divider throughout the expansion */
.personalize .personalize-inner{
  opacity:0;
  transform:translateY(-16px);
  transition:opacity .2s ease, transform .25s ease;
}
.personalize.open .personalize-inner{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .32s ease .14s,
    transform .38s cubic-bezier(.32,.72,0,1) .12s;  /* slides continuously with menu expansion, ends near menu-end */
}
.personalize-inner{
  display:grid;
  grid-template-columns:1.1fr 1.4fr 1fr;
  gap:32px;
  align-items:start;
  max-width:1360px;
  margin:0 auto;
  padding:20px 28px 24px;
}
.pmodule .plabel{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:800;
  margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.pmodule .plabel .hint{font-weight:600;letter-spacing:0;text-transform:none;font-size:11px;color:var(--muted)}

/* Flag SVG (used everywhere) */
.flag-svg{width:100%;height:100%;display:block}

/* Currency cells */
/* 3 columns per row — 6 currencies split cleanly into 2 rows */
.currency-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.currency-cell{min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 4px;border-radius:14px;border:0;cursor:pointer;
  background:transparent;color:var(--text);font-family:inherit;
}
.currency-cell .circle{
  width:34px;height:34px;border-radius:999px;
  overflow:hidden;background:var(--panel);
}
.currency-cell .circle svg{width:100%;height:100%;display:block}
.currency-cell .code{font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.currency-cell.active{border-color:transparent;background:var(--active-bg)}

/* Show-CNY checkbox below the currency row */
.currency-showcny{
  display:flex;align-items:center;gap:10px;
  margin-top:10px;padding:8px 4px;
  cursor:pointer;user-select:none;
  color:var(--text);font-size:12.5px;font-weight:700;
}
.currency-showcny input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.currency-showcny-box{
  width:18px;height:18px;flex:0 0 18px;
  border-radius:5px;border:1.5px solid var(--line-strong);
  background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease, border-color .15s ease;
  position:relative;
}
.currency-showcny-box::after{
  content:"";
  width:9px;height:5px;
  border-left:2px solid var(--accent-contrast);
  border-bottom:2px solid var(--accent-contrast);
  transform:rotate(-45deg) translate(1px,-1px);
  opacity:0;
  transition:opacity .12s ease;
}
.currency-showcny input:checked ~ .currency-showcny-box{
  background:var(--accent);border-color:var(--accent);
}
.currency-showcny input:checked ~ .currency-showcny-box::after{opacity:1}
.currency-showcny input:focus-visible ~ .currency-showcny-box{outline:2px solid var(--accent);outline-offset:2px}
.currency-showcny.is-disabled{opacity:.55;cursor:not-allowed}
.currency-showcny.is-disabled .currency-showcny-text::after{content:" (CNY selected)";color:var(--muted);font-weight:600}

/* Language cells: flag + code only */
.language-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.language-cell{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 4px;border-radius:12px;border:0;
  background:transparent;color:var(--text);cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;
}
.language-cell .flag{
  width:30px;height:30px;border-radius:999px;overflow:hidden;background:var(--panel);
}
.language-cell .flag svg{width:100%;height:100%;display:block}
.language-cell .code{text-transform:uppercase}
.language-cell.active{background:var(--active-bg);border-color:transparent}

/* Theme switch — 3-position animated slider */
.theme-switch{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:var(--card-bg);border:1px solid var(--line);
  border-radius:12px;padding:3px;
  overflow:hidden;
}
.theme-switch button{
  position:relative;z-index:1;
  background:transparent;border:0;color:var(--text);
  padding:8px 4px;border-radius:9px;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:color .25s ease;
}
.theme-switch button svg{width:13px;height:13px}
.theme-switch-slider{
  position:absolute;
  top:3px;left:3px;
  width:calc((100% - 6px)/3);
  height:calc(100% - 6px);
  background:var(--accent);
  border-radius:9px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:0;
  pointer-events:none;
}
.theme-switch[data-active="light"] .theme-switch-slider{transform:translateX(0)}
.theme-switch[data-active="dark"] .theme-switch-slider{transform:translateX(100%)}
.theme-switch[data-active="device"] .theme-switch-slider{transform:translateX(200%)}
.theme-switch[data-active="light"] button[data-val="light"],
.theme-switch[data-active="dark"] button[data-val="dark"],
.theme-switch[data-active="device"] button[data-val="device"]{color:var(--accent-contrast)}

/* Account / signin */
.plabel .account-status{
  text-transform:none;
  letter-spacing:0;
  font-size:11px;
  color:var(--muted);
  font-weight:700;
  margin-left:4px;
}
.discord-signin{
  margin-top:6px;
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:12px;
  border:0;background:var(--discord);color:var(--discord-fg);
  font:inherit;font-weight:800;font-size:14px;cursor:pointer;
}
.discord-signin svg{width:20px;height:20px;display:block}

/* ------- Overlay + Login modal ------- */
.overlay{
  position:fixed;inset:0;z-index:80;
  background:var(--overlay-bg);
  display:none;
  align-items:flex-start;justify-content:center;
  padding:80px 16px 24px;
  overflow-y:auto;
}
.overlay.open{display:flex}
.modal{
  position:relative;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:24px;
  padding:26px 24px;
  width:100%;max-width:420px;
}
.modal .close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--text);
  cursor:pointer;display:grid;place-items:center;font-size:14px;font-family:inherit;
}
.modal h2{margin:0 0 6px;font-size:26px;letter-spacing:-.03em}
.modal .sub{color:var(--muted);font-size:14px;margin:0 0 18px}
.tabs{display:flex;background:var(--card-bg);border:1px solid var(--line);border-radius:12px;padding:3px;margin-bottom:18px;gap:2px}
.tabs button{
  flex:1;border:0;background:transparent;color:var(--text);font-family:inherit;
  padding:9px 10px;border-radius:9px;cursor:pointer;font-weight:700;font-size:14px;
}
.tabs button.active{background:var(--accent);color:var(--accent-contrast)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.field input{
  background:var(--search-input-bg);color:var(--search-input-fg);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;
}
.forgot{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:0;margin:-4px 0 8px;text-align:right;align-self:flex-end;display:block;margin-left:auto;font-family:inherit}
.btn-primary{
  width:100%;border:0;background:var(--accent);color:var(--accent-contrast);
  border-radius:12px;padding:13px;font-weight:800;font-size:15px;cursor:pointer;
  margin-top:4px;font-family:inherit;
}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:16px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth-row{display:grid;gap:8px}
.oauth-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--line);background:transparent;color:var(--text);font-family:inherit;
  border-radius:12px;padding:11px;font-weight:600;cursor:pointer;font-size:14px;
}
.oauth-btn svg{width:18px;height:18px}
.modal .foot{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}

/* ------- Toast ------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--accent);color:var(--accent-contrast);
  padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;
  z-index:100;opacity:0;transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;max-width:calc(100vw - 24px);text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ------- LITBUY oversized title + footer cutout ------- */
.litbuy-marquee{
  max-width:960px;
  margin:60px auto -30px;
  padding:0 12px;
  position:relative;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  text-align:center;
}
.litbuy-word{
  display:block;
  font-family:"Fredoka","Segoe UI Black",Impact,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(64px,16vw,210px);
  letter-spacing:.08em;
  line-height:.9;
  color:var(--text);
  opacity:.12;
  white-space:nowrap;
  user-select:none;
}
.site-footer{
  background:var(--footer-bg);
  border-radius:44px 44px 0 0;
  padding:70px 0 40px;
  position:relative;
  z-index:2;
  max-width:1360px;
  margin:0 auto;
  overflow:visible;
  container-type:inline-size;
  container-name:footer;
}
.footer-mascot{
  position:absolute;
  width:clamp(140px,22cqw,280px);
  height:auto;
  aspect-ratio:1 / 1;
  right:clamp(16px,5cqw,64px);
  top:calc(-1 * clamp(140px,22cqw,280px) + 38px);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  z-index:3;
  /* No drop-shadow / filter — mascot sits flat on the footer bg per design. */
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.disclaimer{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  text-align:center;
  max-width:720px;
  margin:0 auto;
}
/* 3-column footer */
.footer-cols{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:32px;
  align-items:start;
  padding:8px 0;
}
.footer-cols h4{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 16px;
}
.col-socials .socials-row{
  display:flex;gap:18px;flex-wrap:wrap;
}
.col-socials .socials-row a{
  display:grid;place-items:center;
  color:var(--muted);
  background:transparent;
  border:0;
  padding:2px;
  transition:color .15s ease;
}
.col-socials .socials-row a:hover,
.col-socials .socials-row a:focus-visible{color:var(--text)}
.col-socials .socials-row svg{width:24px;height:24px;display:block}

.col-litbuy{display:flex;flex-direction:column;gap:10px}
.col-litbuy a{
  color:var(--muted);
  font-weight:600;
  font-size:15px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:color .15s ease;
}
.col-litbuy a:hover,
.col-litbuy a:focus-visible{color:var(--text)}
.col-litbuy a .arr{font-weight:800;color:inherit}

.col-discord{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.col-discord a{
  color:var(--muted);
  display:inline-block;
  line-height:0;
  transition:color .15s ease;
}
.col-discord a:hover,
.col-discord a:focus-visible{color:var(--text)}
.col-discord svg{
  width:96px;height:96px;
  display:block;
}

/* ------- Tutorial (replaces old FAQ on landing). Width locked to .links (1080px)
   so the whole step rail stays flush with the button bento above it. ------- */
.tutorial{
  max-width:1080px;
  margin:36px auto 48px;
  padding:0 18px;
}
.tutorial-head{text-align:center;margin-bottom:36px}
.tutorial-eyebrow{
  color:var(--text);
  font-weight:800;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  opacity:.65;margin-bottom:10px;
}
.tutorial-head h2{
  font-family:"Fredoka","Segoe UI Black",Impact,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(32px,5.2vw,54px);
  line-height:1;margin:0 0 12px;letter-spacing:.01em;text-transform:uppercase;
}
.tutorial-sub{
  color:var(--muted);font-size:16px;line-height:1.5;
  max-width:620px;margin:0 auto;
}
.tutorial-steps{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:22px;
}
.tutorial-step{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:stretch;
  gap:0;
  background:var(--nav-btn);
  border-radius:26px;
  overflow:hidden;
  isolation:isolate;
  min-height:260px;
}
.tutorial-step:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.tutorial-step:nth-child(even) .tutorial-step-media{order:2}
.tutorial-step:nth-child(even) .tutorial-step-text{order:1}
.tutorial-step-media{
  position:relative;
  background:#eceef2;
  display:flex;align-items:center;justify-content:center;
  min-height:220px;
  overflow:hidden;
}
.tutorial-step-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.tutorial-step-text{
  padding:28px 30px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.tutorial-step-num{
  font-family:"Fredoka","Segoe UI Black",Impact,system-ui,sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.14em;
  color:var(--muted);opacity:.8;
}
.tutorial-step-text h3{
  font-size:22px;font-weight:800;line-height:1.15;margin:0;
  letter-spacing:-.01em;text-transform:uppercase;
  max-width:95%;
}
.tutorial-step-text p{
  margin:0;color:var(--muted);
  font-size:14.5px;line-height:1.55;
  max-width:92%;
}
.tutorial-footer{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:32px;
}
.tutorial-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 22px;border-radius:999px;
  background:var(--orange);color:var(--orange-fg);
  font-weight:800;font-size:15px;letter-spacing:.01em;
  text-decoration:none;
  transition:filter .15s ease, transform .15s ease;
}
.tutorial-cta:hover{filter:brightness(.95);transform:translateY(-1px)}
.tutorial-cta-ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--line-strong);
}
.tutorial-cta-ghost:hover{background:var(--nav-btn);filter:none}

@media (max-width:780px){
  .tutorial{margin:28px auto 36px}
  .tutorial-step,
  .tutorial-step:nth-child(even){grid-template-columns:1fr;min-height:0}
  .tutorial-step:nth-child(even) .tutorial-step-media{order:0}
  .tutorial-step:nth-child(even) .tutorial-step-text{order:0}
  .tutorial-step-media{min-height:200px;max-height:260px}
  .tutorial-step-text{padding:22px 22px 24px}
  .tutorial-step-text h3{font-size:19px}
}

/* FAQ (legacy — kept for other pages that may still use it) */
.faq.faq-standalone{
  max-width:760px;
  margin:12px auto 30px;
  padding:0 18px;
}
.faq h3{
  font-size:18px;margin:0 0 14px;font-weight:800;text-align:center;letter-spacing:.02em;
}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-of-type{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;
  padding:14px 4px;
  font-weight:700;
  font-size:14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  list-style:none;
  color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:22px;line-height:1;color:var(--muted);
  transition:transform .18s ease;
  display:inline-block;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 14px;padding:0 4px}

.footer-bottom{
  border-top:1px solid var(--line);
  margin-top:6px;padding-top:16px;
  text-align:center;color:var(--muted);font-size:12px;
}


/* ------- Device preview mode (simulated viewport) ------- */
html[data-device="mobile"] .nav,
html[data-device="mobile"] main{max-width:420px}
html[data-device="tablet"] .nav,
html[data-device="tablet"] main{max-width:820px}

/* ------- Responsive ------- */
@media(max-width:900px){
  .topline{align-items:start}
  .links{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}
  .linkcard:nth-of-type(1),
  .linkcard:nth-of-type(2),
  .linkcard:nth-of-type(3),
  .linkcard:nth-of-type(4){grid-column:auto;grid-row:auto;min-height:200px;aspect-ratio:auto}
  .bento-figurine{display:none}
  .navlinks{justify-content:flex-end}
}
@media(max-width:720px){
  .footer-cols{grid-template-columns:1fr;gap:26px;text-align:center}
  .col-socials .socials-row{justify-content:center}
  .col-litbuy{align-items:center}
  .col-discord{align-items:center}
  .col-discord svg{width:80px;height:80px}
}
@media(max-width:840px){
  .personalize-inner{grid-template-columns:1fr;gap:22px}
}

/* ======================================================================
   Mobile layout (≤560 px):
   - Nav pinned to the BOTTOM of the viewport.
   - Dropdown opens UPWARD from the top of the nav bar.
   - Right-side "combo" pill is merged into the single BERTOS pill — one
     tap on BERTOS opens the full menu (currency / lang / account / theme).
   - Currency grid already renders 3-per-row via the global rule.
   ====================================================================== */
@media(max-width:560px){
  /* Keep 2 columns on the product grid (user asked explicitly for 2). */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

  /* Nav → bottom. We flip border radius (top corners rounded, bottom flat).
     sticky top is replaced with position:fixed bottom. Body padding keeps
     page content from hiding behind it. */
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px))}
  /* Prevent iOS Safari overscroll from pushing fixed:bottom nav off-screen
     mid-fling. Scoped to html/body so modal/sheet inner scroll still works. */
  html,body{overscroll-behavior-y:contain}
  .nav{
    position:fixed;
    top:auto;bottom:0;left:0;right:0;
    margin:0 auto;
    max-width:none;
    border-radius:28px 28px 0 0;
    box-shadow:0 -8px 24px rgba(0,0,0,.22);
    /* Keep the bottom bar on top of everything (filter dock = z-11, drawers
       live below). Compositor layer + translate3d locks it against iOS
       Safari's address-bar transitions, which otherwise jank the nav. */
    z-index:50;
    transform:translate3d(0,0,0);
    will-change:transform;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  /* Discord CTA (visible while any dropdown is open) slides in from the TOP
     on mobile instead of the bottom — the bottom edge is occupied by the
     nav + filter dock. Positioned at the very top of the viewport. */
  .discord-cta{
    bottom:auto;
    top:calc(12px + env(safe-area-inset-top, 0px));
    transform:translateX(-50%) translateY(-30px);
    z-index:20;      /* above the sticky-top search pill (z:13) */
  }
  html.dropdown-open .discord-cta{
    transform:translateX(-50%) translateY(0);
  }
  /* While any dropdown is open the Discord CTA owns the top strip —
     hide the sticky-top search pill so the two don't visually collide.
     The search returns the moment the dropdown closes. */
  html.dropdown-open .filter-toolbar.is-stuck .filter-search-plain{
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  /* And the filter dock itself — chip panel + handle hide while brand
     pill / personalize sheet is open, so the sheets don't stack on top
     of each other. Returns the moment the dropdown closes. */
  html.dropdown-open .filter-toolbar.is-stuck .filter-dock-sheet{
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  /* Kill nav border-radius transition AND box-shadow while dock is welded
     on. The nav's default `box-shadow:0 -8px 24px rgba(0,0,0,.22)` casts
     a dark halo UPWARD from the nav's top edge — that halo is what you
     see as a visible "transition / seam" between the filter dock and the
     Home/Videa/Spreadsheet pills, even when the two boxes touch at pixel
     zero. Dropping the shadow makes the join truly seamless. */
  html:has(.filter-toolbar.is-stuck) .nav{
    transition:none;
    box-shadow:none;
  }
  /* All pills on a SINGLE row — nowrap, tight gaps. BERTOS pill shrinks to
     just the hamburger icon so the four link pills (home, Videa,
     Spreadsheet, Registrace) still fit on narrow (~360 px) screens. */
  .navin{display:flex;flex-wrap:nowrap;padding:9px 10px;gap:6px;grid-template-columns:none;align-items:center;justify-content:space-between}
  .brand{justify-self:auto}

  .navlinks{order:0;flex:1 1 0;min-width:0;flex-basis:auto;flex-wrap:nowrap;justify-content:flex-end;gap:4px}
  .navlinks a{font-size:11px;padding:6px 8px;letter-spacing:.01em;white-space:nowrap}
  .navlink-home{padding:6px 8px}
  .navlink-home svg{width:14px;height:14px}
  /* Mobile: icon-only pills. Labels collapse so all four top-nav buttons
     (Home, Produkty, Tracking, Registrace) fit on narrow (~360 px) screens.
     The slide-out label is a desktop pointer-only affordance. */
  .navlink-ico{padding:6px 8px}
  .navlink-ico svg{width:14px;height:14px}
  .navlink-ico .navlink-ico-label{display:none}
  .navlink-cta{font-size:11px;padding:6px 10px;gap:2px}

  /* Combine: the right-hand combo-pill is hidden on mobile; its functions
     (currency, account, theme) are opened from the single BERTOS pill. */
  .nav-chrome{display:none}
  .brand-pill{min-width:0;flex:0 0 auto;max-width:none;height:34px}
  .brand-pill .brand-text{display:none}            /* just the hamburger icon on mobile */
  .brand-pill .brand-icon{padding:0 11px}
  /* On mobile the icon slot cross-fades hamburger↔X inside — no outer opacity hide. */

  /* Dropdown opens UPWARD from the top edge of the nav bar. .personalize is
     a child of the nav, so position:absolute sits in the nav's coordinate
     space — bottom:100% puts it directly above the nav bar. The nav itself
     is position:fixed so this still floats correctly above the viewport. */
  .personalize{
    position:absolute;
    top:auto;
    bottom:100%;          /* anchored to top edge of nav, grows upward */
    left:0;right:0;
    width:100%;max-width:none;
    border-radius:22px 22px 0 0;
    padding-top:0;
    max-height:0;
    overflow:hidden;
    transform-origin:bottom center;
    box-shadow:0 -14px 30px rgba(0,0,0,.28);
  }
  .personalize.open{max-height:min(90vh, 720px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Drag handle (iOS bottom-sheet style). Lives at the top of the sheet;
     tapping/swiping on the top ~72 px strip closes the sheet (JS handler). */
  .personalize::before{top:10px;left:38%;right:38%;height:4px;border-radius:3px;opacity:.6}
  .personalize-inner{padding:28px 16px 20px}
  /* Live drag transform: translateY applied inline by JS; while dragging we
     drop the CSS transition so the move is 1:1 with the finger. */
  .personalize.is-dragging{transition:none}
  .personalize.is-dragging .personalize-inner{transition:none}

  /* Brand-menu (left-side dropdown) is unused on mobile — brand-pill opens
     personalize instead, routed by chrome.js. Hide it to be safe. */
  .brand-menu{display:none}

  /* The old border radius flip on .nav is no longer needed on mobile. */
  .nav{border-radius:28px 28px 0 0}

  /* Modal + marquee + layout tweaks that already existed */
  .hero{padding-top:34px}
  .overlay{padding-top:40px}
  .site-footer{border-radius:32px 32px 0 0;padding:60px 0 32px;margin-top:40px}
  .litbuy-marquee{margin:60px auto -20px}
  .language-grid{grid-template-columns:repeat(4,1fr)}
  .links{grid-template-columns:1fr;max-width:520px}
  .linkcard{min-height:200px}

  /* FAB sits above the bottom nav, still on the right side. */
  .scrolltop-fab{bottom:calc(88px + env(safe-area-inset-bottom, 0px));right:16px}

  /* ------- Mobile filter dock: swipeable bottom sheet above the fixed nav -------
     On mobile the sticky-top filter toolbar is converted into a drawer welded
     above the bottom nav. In-flow (not stuck) the toolbar sits inline at top
     with the search as a pill and chips below. Once the user scrolls past it,
     JS adds .is-stuck + .is-collapsed → the whole bar becomes a thin strip
     fixed above the nav showing "UKÁZAT FILTRY ∧". Swiping up (or tapping)
     the handle removes .is-collapsed and reveals the chip panel welded to
     the top of the nav (same background, flat shared edge, no gap).
     --mobile-nav-h is published by chrome.js (= nav bar rect height). */
  .filter-toolbar{
    /* Override desktop sticky — inline on mobile until stuck. */
    position:relative;
    top:auto;
    margin:14px 0 22px;
    padding:14px 16px;
    border-top-left-radius:22px;
    border-top-right-radius:22px;
    border-bottom-left-radius:22px;
    border-bottom-right-radius:22px;
    box-shadow:none;
    background:var(--nav-btn);
    will-change:auto;
  }
  /* Inline search: back to pill style (nav-matched background, rounded, filled) */
  .filter-toolbar .filter-search-plain{
    background:rgba(127,127,127,.14);
    border-radius:999px;
    padding:4px 6px 4px 14px;
    gap:8px;
  }
  .filter-toolbar .filter-search-plain input[type="search"]{
    padding:10px 4px;font-size:15px;
  }
  .filter-toolbar .filter-search-plain select,
  .filter-toolbar .filter-search-plain button{
    border-radius:999px;
  }

  /* Stuck: `.filter-toolbar.is-stuck` is now a TRANSPARENT positioning
     wrapper — all visible chrome (bg, border-radius, shadow) lives on
     `.filter-dock-sheet` so the whole visible panel slides as one unit
     during swipe (bg + content together), like the personalize bottom
     sheet. The dock wrapper has no visible paint of its own. */
  .filter-toolbar.is-stuck{
    position:fixed;
    left:0;right:0;top:auto;
    bottom:var(--mobile-nav-h, 60px);
    margin:0;
    padding:0;
    z-index:11;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    /* Do NOT set `transform` here — would re-anchor the sticky-top search
       pill via containing-block promotion. Drag transform lives on the sheet. */
  }
  .filter-toolbar.is-stuck.is-dragging{
    transition:none;
  }

  /* .filter-dock-sheet = draggable panel wrapping inner + handle. All visual
     chrome lives here so the whole sheet (background + chips + handle)
     slides together during swipe — same feel as the personalize bottom
     sheet. The sticky-top search is a sibling of the sheet, so applying
     transform here never promotes an ancestor of the search into a
     containing block and the search stays locked at viewport top.
     COLLAPSE MECHANIC: the sheet is ALWAYS rendered at full height (handle
     + chips at natural size). When collapsed we translate it DOWN by
     --chip-h (= inner's measured height, published by chrome.js), which
     slides the chips out of bounds — behind the nav and off the viewport.
     The handle lands exactly on the nav's top edge. Expanded = translate
     back to zero. One pure transform, no max-height / opacity animations,
     no flicker, no gap between handle and nav during swipe (because the
     chips come up from behind the nav as the sheet rises). */
  .filter-toolbar.is-stuck .filter-dock-sheet{
    display:flex;
    flex-direction:column;
    background:var(--footer-bg);         /* same color as nav → seamless weld */
    border-top-left-radius:22px;
    border-top-right-radius:22px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    box-shadow:0 -14px 30px rgba(0,0,0,.28);
    transform:translateY(0);
    transition:transform .45s cubic-bezier(.32,.72,0,1);
    will-change:transform;
  }
  .filter-toolbar.is-stuck.is-collapsed .filter-dock-sheet{
    transform:translateY(var(--chip-h, 400px));
  }
  .filter-toolbar.is-stuck.is-dragging .filter-dock-sheet{transition:none}
  /* Handle at the TOP of the sheet (iOS bottom-sheet style — the grab
     bar + "SKRÝT FILTRY" row sits above the chip options). */
  .filter-toolbar.is-stuck .filter-toolbar-handle{order:0}
  .filter-toolbar.is-stuck .filter-toolbar-inner{order:1}

  /* Handle strip (shown at the bottom of the toolbar, so it hugs the nav).
     Always visible when stuck. Chevron up when collapsed (= swipe up to open),
     chevron down when expanded (= swipe down to close). */
  .filter-toolbar.is-stuck .filter-toolbar-handle{
    max-height:48px;
    min-height:48px;
    opacity:1;
    pointer-events:auto;
    margin:0;
    padding:14px 0 14px;
    /* Kill touch gestures the browser would otherwise consume for scroll;
       the JS pointer handlers take vertical drags for open/close. */
    touch-action:none;
    -ms-touch-action:none;
  }
  .filter-toolbar.is-stuck .filter-toolbar-handle-label-hide,
  .filter-toolbar.is-stuck .filter-toolbar-handle-label-show{
    font-size:13px;letter-spacing:.16em;
    /* Match the chip-drawer collapse curve so the SKRÝT↔UKÁZAT swap times
       exactly with the sheet shrinking (same .45s, same easing). */
    transition:opacity .45s cubic-bezier(.32,.72,0,1);
  }
  /* During a live drag, labels follow --sheet-pos (0 = fully expanded,
     1 = fully collapsed) continuously under the finger instead of
     snapping at the end of the drag — matches the sheet's own position
     per-pixel. CSS transition is suppressed so the opacity math runs
     per-frame, not with a .45s lag. On drag release the inline var is
     cleared and the class-based transition takes over. */
  .filter-toolbar.is-stuck.is-dragging .filter-toolbar-handle-label-hide{
    opacity:calc(1 - var(--sheet-pos, 0));
    transition:none;
  }
  .filter-toolbar.is-stuck.is-dragging .filter-toolbar-handle-label-show{
    opacity:var(--sheet-pos, 0);
    transition:none;
  }
  /* Grab bar visual indicator (iOS-style pill above the label).
     Positions via absolute inside the handle to not disturb the label grid. */
  .filter-toolbar.is-stuck .filter-toolbar-handle::before{
    content:"";
    position:absolute;
    top:6px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:3px;
    background:currentColor;opacity:.3;
    pointer-events:none;
  }
  .filter-toolbar.is-stuck .filter-toolbar-handle{position:relative}

  /* Hide the chevron on mobile — labels alone communicate the state and
     the grab-bar indicator (::before) is the visual drag affordance. */
  .filter-toolbar.is-stuck .filter-toolbar-handle-chevron{display:none}
  .filter-toolbar.is-stuck .filter-toolbar-handle-label-hide{opacity:1}
  .filter-toolbar.is-stuck .filter-toolbar-handle-label-show{opacity:0}
  .filter-toolbar.is-stuck.is-collapsed .filter-toolbar-handle-label-hide{opacity:0}
  .filter-toolbar.is-stuck.is-collapsed .filter-toolbar-handle-label-show{opacity:1}

  /* IMPORTANT: the desktop rule `.filter-toolbar.is-stuck.is-collapsed`
     at line ~547 (padding-top:10px;padding-bottom:10px;margin-bottom:22px)
     has higher specificity than my mobile `.is-stuck` override, so it
     leaks through on mobile and shoves the dock up by 22px — leaving the
     visible gap between the "UKÁZAT FILTRY" strip and the nav. Zero it
     out explicitly for mobile. Same for the handle sibling rule. */
  .filter-toolbar.is-stuck.is-collapsed{
    padding:0;
    margin:0;
  }
  .filter-toolbar.is-stuck.is-collapsed .filter-toolbar-handle{
    margin:0;
    padding:14px 0;
    max-height:48px;
    min-height:48px;
    opacity:1;
  }

  /* Inner chip panel sits BELOW the handle (handle order:0, inner order:1).
     NOT animated — stays at natural height always. Collapse is driven by
     the sheet's transform (chips translate off-screen behind the nav).
     150px reserve = ~55px search height + 12px top gap + 80px breathing
     room so the panel's top never overlaps the sticky-top search pill. */
  .filter-toolbar.is-stuck .filter-toolbar-inner,
  /* The second selector overrides the DESKTOP collapsed rule at line ~556
     (`.is-stuck.is-collapsed .filter-toolbar-inner { max-height:0; opacity:0 }`)
     which has specificity (0,3,1) and otherwise leaks onto mobile, shrinking
     the panel to 0 and leaving the dock stranded way off-screen. On mobile
     the panel must stay at natural (capped) height for both states — the
     transform on the sheet is what hides it when collapsed. */
  .filter-toolbar.is-stuck.is-collapsed .filter-toolbar-inner{
    grid-template-columns:1fr 1fr;
    gap:14px 16px;
    padding:18px 16px 8px;
    max-height:min(
      calc(100vh - var(--mobile-nav-h, 60px) - 48px - 150px - env(safe-area-inset-top, 0px)),
      460px
    );
    opacity:1;
    margin-top:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transition:none;   /* no inner animation; the sheet transform does the work */
  }
  /* Search detaches from the drawer and sticks to the TOP of the viewport
     once the toolbar becomes stuck — a floating pill independent of the
     bottom-fixed filter dock. position:fixed is viewport-relative even
     though its DOM parent (.filter-toolbar.is-stuck) is itself fixed. */
  .filter-toolbar.is-stuck .filter-search-plain{
    position:fixed;
    top:calc(10px + env(safe-area-inset-top, 0px));
    left:12px;right:12px;
    z-index:13;
    display:flex;align-items:center;gap:8px;
    background:var(--footer-bg);
    border-radius:999px;
    padding:6px 8px 6px 16px;
    box-shadow:0 10px 24px rgba(0,0,0,.22);
    grid-column:unset;
    /* Hide the pill while the user is dragging the chip-drawer so the two
       sheets don't visually fight each other mid-swipe. */
  }
  .filter-toolbar.is-stuck .filter-search-plain input[type="search"]{
    padding:10px 2px;
    font-size:15px;
    flex:1 1 0;
    order:unset;      /* override the 840px rule that sets order:0 + basis:100% */
    min-width:0;
  }
  /* Force single-row layout: icon + input on ONE line. Overrides the generic
     @media(max-width:840px) rule that wraps the search for the old
     icon/input/select/clear layout — sort+clear now live in the drawer so
     the pill only has icon + input and must never wrap. */
  .filter-toolbar .filter-search-plain{
    flex-wrap:nowrap;
  }
  .filter-toolbar .filter-search-plain input[type="search"]{
    flex:1 1 0;
    order:unset;
  }
  .filter-toolbar.is-stuck .filter-search-plain select,
  .filter-toolbar.is-stuck .filter-search-plain button{
    border-radius:999px;
    padding:8px 12px;
    font-size:13px;
  }

  /* Weld the chip panel bottom to the nav top: flatten nav's top corners
     while the dock is active (either collapsed strip or expanded panel). */
  body:has(.filter-toolbar.is-stuck) .nav{border-radius:0}

  /* Make room so the collapsed strip (~48px) doesn't hide the bottom product row. */
  body:has(.filter-toolbar.is-stuck.is-collapsed){
    padding-bottom:calc(78px + 48px + env(safe-area-inset-bottom, 0px));
  }
  /* FAB stacks above the collapsed strip. */
  body:has(.filter-toolbar.is-stuck.is-collapsed) .scrolltop-fab{
    bottom:calc(88px + 48px + env(safe-area-inset-bottom, 0px));
  }
}
.account-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;margin-right:8px;vertical-align:middle}

/* ======================================================================
   PANE BEJKU 2026-10-26 — mobile nav + filter + product-card polish
   ------------------------------------------------------------------
   On mobile (≤560 px), the single merged BERTOS button is split back
   into two pills: BERTOS (left, opens the BERTOS menu) and ⚙ Nastavení
   (right, opens the personalize sheet). The 4 top-nav links are hidden
   on mobile — they live inside the BERTOS menu widget wall already.
   Also tightens product cards for ~210 px wide 2-column grid cells and
   removes the chip-panel flicker during scroll-up by hiding the inline
   chip inner outright while the toolbar is collapsed but not stuck.
   ====================================================================== */
@media (max-width:560px){
  /* ---- Three menus: BERTOS pill (left) | basic nav icons (center) | Nastavení pill (right) ----
     Pane BEJKU 2026-10-26 (iter 2): put the four basic nav links back on
     mobile as a middle "basic menu" between the two pop-up menus. All icon
     only, label slides out on `.active` so the current page name is still
     readable but the rest stays compact enough to fit 320 px wide. */
  .navlinks{
    display:flex !important;
    flex:0 1 auto;
    min-width:0;
    gap:2px;
    justify-self:center;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    order:0;
  }
  .nav-chrome{display:flex;justify-self:end}
  .navin{
    display:flex;flex-wrap:nowrap;
    padding:9px 10px;gap:6px;
    align-items:center;justify-content:space-between;
    grid-template-columns:none;
  }
  /* The 4 basic nav links — icon-only pills, slightly bigger than before.
     Label slides out from behind the icon on `.active` only (set by the
     scrollspy); hover/focus-visible don't trigger it on touch since there
     is no real hover state on a phone. */
  .navlinks .navlink-ico{
    padding:7px 9px;
    border-radius:999px;
    flex:0 0 auto;
  }
  .navlinks .navlink-ico svg{width:18px;height:18px}
  .navlinks .navlink-ico-label{
    font-size:11.5px;
    letter-spacing:0;
  }
  .navlinks .navlink-ico.active .navlink-ico-label{
    max-width:120px;
    opacity:1;
    margin-left:5px;
  }
  /* The "Registrace ↗" CTA stays as a labelled pill — no icon to shrink to. */
  .navlinks .navlink-cta{
    font-size:11px;
    padding:6px 9px;
    gap:2px;
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* ---- Side pills: compact icon-only to leave room for the center basic menu ---- */
  .brand-pill,
  .combo-pill{
    height:38px;min-width:0;flex:0 0 auto;
  }
  .brand-pill{justify-self:start;min-width:0}
  .nav-chrome .combo-pill{justify-self:end}

  /* BERTOS pill — icon only on mobile (hamburger ↔ X on open). We drop the
     BERTOS/MENU text slot entirely because the center basic menu needs
     every pixel on 320 px screens. The ham → X icon flip already
     communicates the open state. */
  .brand-pill{padding:0;overflow:hidden}
  .brand-pill .brand-icon{padding:0 11px}
  .brand-pill .brand-icon-ham,
  .brand-pill .brand-icon-x{width:20px;height:20px}
  .brand-pill .brand-text{display:none}

  /* Nastavení pill — icon only on mobile (gear rotates on open).  Same
     rationale as BERTOS: drop the "Nastavení" slide-out label so the
     three zones (BERTOS / basic menu / Nastavení) all fit on a 320 px
     screen. The gear's rotate-on-open is enough state feedback. */
  .combo-pill{padding:0;overflow:hidden}
  .combo-pill .combo-slot{display:none}
  .combo-pill .combo-open-state{
    position:static;
    inset:auto;
    display:inline-flex;
    align-items:center;
    gap:0;
    padding:0 11px;
    opacity:1;
    pointer-events:auto;
    transform:none;
    transition:none;
  }
  .combo-pill .combo-open-gear{
    width:20px;height:20px;
    transform:rotate(0);
  }
  .combo-pill[aria-expanded="true"] .combo-open-gear{
    transform:rotate(45deg);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  /* Hide the "Nastavení" label on mobile — icon-only on narrow screens. */
  .combo-pill .combo-open-state > span{display:none}

  /* ---- BERTOS brand-menu becomes a bottom-sheet (mirrors personalize) ---- */
  /* Overrides the earlier `.brand-menu{display:none}` block up top. */
  .brand-menu{
    display:block;
    position:fixed;
    top:auto;
    bottom:calc(var(--mobile-nav-h, 60px) + env(safe-area-inset-bottom, 0px));
    left:0;right:0;
    width:100%;max-width:none;
    background:var(--footer-bg);
    border-radius:22px 22px 0 0;
    padding:0;
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    box-shadow:0 -14px 30px rgba(0,0,0,.28);
    z-index:40;
    transform-origin:bottom center;
    transition:
      max-height .38s cubic-bezier(.32,.72,0,1),
      visibility 0s linear .38s;
  }
  .brand-menu.open{
    max-height:min(80vh, 640px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    visibility:visible;
    transition:max-height .38s cubic-bezier(.32,.72,0,1);
  }
  /* Drag handle (iOS bottom-sheet) — same bar visual as personalize */
  .brand-menu::before{
    content:"";
    display:block;
    position:absolute;
    top:10px;left:38%;right:38%;
    height:4px;border-radius:3px;
    background:currentColor;opacity:.3;
    pointer-events:none;
  }
  /* While dragging the sheet, kill transition so the move is 1:1 with the finger */
  .brand-menu.is-dragging{transition:none}
  .brand-menu .brand-menu-inner{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:none;
    grid-auto-rows:auto;
    gap:10px;
    padding:28px 14px 20px;
    opacity:1;
    transform:none;
    transition:none;
  }
  .brand-menu .cell-produkty,
  .brand-menu .cell-registrace,
  .brand-menu .cell-tracking,
  .brand-menu .cell-domu,
  .brand-menu .cell-faq,
  .brand-menu .cell-qc,
  .brand-menu .cell-videa,
  .brand-menu .cell-link{
    grid-column:auto;grid-row:auto;
    flex-direction:row;align-items:center;gap:12px;
    min-height:72px;padding:14px 14px;
  }
  .brand-menu .cell-produkty,
  .brand-menu .cell-videa,
  .brand-menu .cell-link{grid-column:1 / span 2}
  .brand-menu .cell-produkty .brand-menu-link-title{font-size:17px}
  .brand-menu .cell-produkty .brand-menu-link-icon{width:44px;height:44px;border-radius:14px}
  .brand-menu .cell-produkty .brand-menu-link-icon svg{width:22px;height:22px}
  .brand-menu .brand-menu-link-title{font-size:15px}
  .brand-menu .brand-menu-link-sub{font-size:11.5px}

  /* ---- Dock visibility: fade in/out via html.dock-hidden (JS flag set by
     IntersectionObserver on #spreadsheet). On mobile the filter dock is
     permanently stuck (no scroll-based toggle) — this class is the only
     thing that hides it when the user is away from the product grid.
     Pane BEJKU 2026-10-26 (iter 2): "ukázat filtry stále buguje při scrollu".
     The permanent-stuck + visibility fade kills every stuck/unstuck
     transition that caused the previous flicker. */
  .filter-toolbar.is-stuck,
  .filter-toolbar.is-stuck .filter-search-plain,
  .filter-toolbar.is-stuck .filter-dock-sheet{
    transition:opacity .22s ease, transform .45s cubic-bezier(.32,.72,0,1);
  }
  html.dock-hidden .filter-toolbar.is-stuck,
  html.dock-hidden .filter-toolbar.is-stuck .filter-search-plain,
  html.dock-hidden .filter-toolbar.is-stuck .filter-dock-sheet{
    opacity:0;
    pointer-events:none;
  }
  /* Also hide the inline chip inner outright when collapsed+not stuck —
     belt-and-braces guard in case we ever re-enable un-stick on mobile. */
  .filter-toolbar.is-collapsed:not(.is-stuck) .filter-toolbar-inner{
    display:none;
  }
  .filter-toolbar:not(.is-stuck) .filter-toolbar-inner{
    transition:none;
  }

  /* ---- Product card tightening for ~210 px wide mobile cells (item 5) ---- */
  /* The old 12 px font / wide tracking "ZOBRAZIT PRODUKT" label overran the
     CTA pill and wrapped on narrow screens. We shrink the whole bottom
     section — font, letter-spacing, padding — plus the name/price above. */
  .product-card{--section-h:30px}
  .product-section-meta{padding:4px 10px;min-height:calc(var(--section-h) * 2)}
  .product-section-cta{min-height:calc(var(--section-h) * 2)}
  .product-name{
    font-size:13px;
    line-height:1.2;
  }
  .product-price{font-size:15px;letter-spacing:-.01em}
  .product-cny{font-size:11px}
  .product-pricerow{gap:6px}
  .product-cta{
    padding:9px 6px;
    font-size:10.5px;
    letter-spacing:.03em;
  }
  .product-cta-inner{gap:5px}
  .product-cta-icon svg{width:14px;height:14px}
  .product-qc svg{width:16px;height:16px}
  /* Icon buttons in top overlay — slightly smaller so they don't dominate the thumb */
  .product-icon-btn{width:30px;height:30px}
  .product-icon-btn svg{width:16px;height:16px}
}


/* ======================================================================
   Pane BEJKU 2026-10-26 — public /videa + /product/:slug pages
   ====================================================================== */

/* ---- /videa list ---- */
.videos-page { padding: 0 clamp(16px, 4vw, 32px) 60px; max-width: 980px; margin: 0 auto; }
.videos-list { display: flex; flex-direction: column; gap: 48px; }
.videos-empty { color: var(--muted); text-align: center; padding: 60px 0; }
.video-card { display: flex; flex-direction: column; gap: 14px; }
.video-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.video-head h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.01em; }
.video-author { color: var(--muted); font-size: 13px; }
.video-player {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.video-player iframe,
.video-player img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.video-player-ext { position: relative; display: block; }
.video-player-ext .video-play-ico {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; pointer-events: none;
}
.video-player-ext .video-play-ico svg { width: 72px; height: 72px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.video-player-ext .video-player-platform {
  position: absolute; top: 14px; left: 14px;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.video-description { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }
.video-no-products { color: var(--muted); font-style: italic; font-size: 13.5px; margin: 0; }
.video-products-strip {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
.video-product-card {
  flex: 0 0 160px; min-width: 160px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--nav-btn); color: var(--text);
  border-radius: 14px; padding: 10px;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
.video-product-card:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--text) 10%, var(--nav-btn)); }
.video-product-card img, .video-product-noimg {
  width: 100%; aspect-ratio: 1/1; border-radius: 10px;
  object-fit: contain; background: #fff;
  display: grid; place-items: center;
  color: #888; font-size: 24px;
}
.video-product-meta strong { display: block; font-size: 13px; line-height: 1.25; max-height: 2.5em; overflow: hidden; }
.video-product-meta small { color: var(--muted); font-size: 12px; font-weight: 700; }

/* ---- /product/:slug detail page ---- */
.product-detail { max-width: 1080px; margin: 0 auto; padding: 90px clamp(16px, 4vw, 32px) 60px; }
.product-detail-loading { color: var(--muted); text-align: center; padding: 80px 0; font-size: 15px; }
.product-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 600;
  margin-bottom: 18px;
}
.product-back:hover { color: var(--text); }
.product-detail-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 48px); align-items: start;
}
.product-detail-image {
  margin: 0; aspect-ratio: 1/1; width: 100%;
  background: #fff; border-radius: 20px; overflow: hidden;
  display: grid; place-items: center;
}
.product-detail-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-detail-noimg { color: #888; font-size: 72px; }
.product-detail-meta { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.product-crumbs {
  display: flex; flex-wrap: wrap; gap: 6px;
  color: var(--muted); font-size: 12px; letter-spacing: .4px; text-transform: uppercase; font-weight: 700;
}
.product-crumbs .crumb-sep { opacity: .5; }
.product-detail-meta h1 {
  margin: 0; font-size: clamp(26px, 4vw, 36px); line-height: 1.1; letter-spacing: -.02em;
}
.product-brands { display: flex; flex-wrap: wrap; gap: 6px; }
.product-brands .brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px 5px 6px;
  font-size: 13px; font-weight: 700;
  color: var(--text);
}
.product-brands .brand-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.product-detail-price { font-size: clamp(26px, 3.5vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.product-detail-price small { color: var(--muted); font-size: 14px; font-weight: 600; margin-left: 4px; }
.product-description { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.product-detail-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 8px;
  background: var(--accent); color: var(--accent-contrast);
  text-decoration: none; padding: 14px 20px;
  font-size: 14px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 14px;
  transition: filter .15s ease;
}
.product-detail-cta:hover { filter: brightness(.9); }
.product-attrs {
  display: grid; grid-template-columns: auto 1fr;
  gap: 6px 20px; margin: 18px 0 0;
  padding: 16px 0 0; border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.product-attrs dt { color: var(--muted); font-weight: 700; letter-spacing: .3px; text-transform: capitalize; }
.product-attrs dd { margin: 0; color: var(--text); word-break: break-word; }
.product-videos { margin-top: 48px; }
.product-videos h3 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.01em; }
.product-videos-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.product-video-card {
  flex: 0 0 180px; min-width: 180px;
  text-decoration: none; color: var(--text);
  background: var(--nav-btn); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s ease;
}
.product-video-card:hover { transform: translateY(-2px); }
.product-video-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.product-video-card span { padding: 10px 12px; font-size: 13px; line-height: 1.3; font-weight: 600; }

@media (max-width: 760px) {
  .product-detail-head { grid-template-columns: 1fr; }
  .product-detail { padding-top: 24px; }
}