/* ============================================================
   GB — design systém šablony v2 (redesign dle Figmy
   „Golf Brothers šablony", file 4tgkodclIZ8U6i0Hh66n8N)

   Tokeny níže jsou PŘESNÉ hodnoty z Figma variables (KOMPONENTY,
   node 6010:37024, staženo přes Figma MCP 27. 8. 2026) — neměnit
   od oka, měnit jen podle Figmy. Geometrie hlavičky dle metadata
   XML sekce HLAVNÍ MENU (6414:19249).

   Konvence: sémantické třídy gb-*, žádný Bootstrap, žádné legacy
   CSS (dist/css/*). Jeden soubor, načítá se synchronně (malý).
   ============================================================ */

/* ── Písmo: Google Sans Flex (SIL OFL, self-hosted) ── */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/v2/fonts/GoogleSansFlex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/v2/fonts/GoogleSansFlex-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokeny (Figma variables) ── */
:root {
  /* brand */
  --gb-green: #258f1e;        /* surface/brand primary/primary */
  --gb-green-2: #1e7218;      /* border/brand primary/primary, text/success/secondary */
  --gb-green-tint: #e9f4e9;   /* surface/brand primary/primary-invert */
  --gb-green-tint-2: #bbdcb9; /* border/brand primary/primary-invert */
  --gb-navy: #092857;         /* surface/brand secondary/primary */
  --gb-navy-2: #072046;       /* surface/brand secondary/secondary */
  --gb-navy-3: #051834;      /* border/brand secondary/secondary */
  --gb-navy-line: #111d47;    /* border/brand/secondary */
  --gb-navy-tint: #e6eaee;    /* surface/brand secondary/primary-invert */
  --gb-navy-mut: #b3bccb;     /* border/brand secondary/primary-invert */
  /* text & icon */
  --gb-ink: #1d242d;          /* text/basics/primary */
  --gb-ink-2: #47586e;        /* text/basics/secondary */
  --gb-ink-inv: #d9dde3;      /* text/basics/primary-invert */
  --gb-mut-inv: #a3adbb;      /* text/basics/secondary-invert (placeholdery) */
  /* stavové */
  --gb-err: #ff412c;
  --gb-err-ink: #c0200e;      /* červený TEXT: #ff412c má na bílé jen 3,3 : 1 (kontrola kontrastu 24. 9. 2026) */
  --gb-warn: #cca61e;
  --gb-warn-bg: #fffae9;
  --gb-warn-bd: #fff0bb;
  --gb-warn-strong: #ffcf25;  /* surface/alert/primary-invert, icon/reviews */
  --gb-info: #1443ff;
  --gb-info-bg: #e8ecff;
  --gb-promo: #b03b5e;
  --gb-promo-bg: #f7ebef;
  --gb-star: #ffcf25;
  /* podklady a linky */
  --gb-bg: #ffffff;
  --gb-bg-2: #fefefd;
  --gb-bg-4: #fbfbf8;         /* surface/basics/quaternary */
  --gb-line-3: #f3f1e7;       /* border/basics/tertiary */
  --gb-line-4: #dbd9d0;       /* border/basics/quaternary */
  /* geometrie */
  --gb-r-sm: 5px;
  --gb-r-md: 15px;
  --gb-r-lg: 35px;
  --gb-r-pill: 999px;
  --gb-sp-xs: 5px;
  --gb-sp-sm: 10px;
  --gb-sp-md: 15px;
  --gb-sp-lg: 20px;
  --gb-sp-xl: 40px;
  --gb-sp-2xl: 60px;
  --gb-sp-3xl: 80px;
  --gb-shadow-sm: 0 2px 3px rgba(0, 0, 0, .04);
  /* Vrstvení chromu: megamenu 60 < dropdowny hlavičky 70 < mobilní menu 80
     < modal 90. Dropdown účtu i košíku se musí kreslit NAD otevřeným
     megamenu (jinak zmizí pod ním), přihlašovací modal nad mobilním
     drawerem, protože se z něj dá otevřít. */
  --gb-z-drop: 70;
  --gb-z-modal: 90;
  /* Stín odsazených panelů hlavičky — tmavší a delší než --gb-shadow-sm,
     panel „visí" nad obsahem stránky. */
  --gb-shadow-drop: 0 12px 28px rgba(9, 40, 87, .18);
  /* typografie (velikost/řádkování dle Figma škály) */
  --gb-font: 'Google Sans Flex', 'Segoe UI', Roboto, Arial, sans-serif;
  --gb-fs-input: 16px;
  --gb-fs-xxs: 12px;  --gb-lh-xxs: 16.2px;
  --gb-fs-xs: 14px;   --gb-lh-xs: 23.8px;
  --gb-fs-sm: 16px;   --gb-lh-sm: 27.2px;  --gb-lh-sm-tight: 21.6px;
  --gb-fs-lg: 20px;   --gb-lh-lg: 34px;
  --gb-fs-xl: 24px;   --gb-lh-xl: 32.4px;
  --gb-fs-2xl: 32px;  --gb-lh-2xl: 54.4px;
  --gb-container: 1440px;
  --gb-gutter: 40px;
}

/* ── Reset-lite + base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--gb-font);
  font-size: var(--gb-fs-sm);
  line-height: var(--gb-lh-sm);
  color: var(--gb-ink);
  background: var(--gb-bg);
}
img, svg, video { display: block; max-width: 100%; }

/* ⚠️ TVRDÉ PRAVIDLO: obrázek NIKDY nemění poměr stran a vždy se celý vejde
   do svého rámečku. Picture::pro() sází inline `aspect-ratio:1/1` kvůli CLS;
   bez object-fit by prohlížeč netvercový obrázek roztáhl (výchozí `fill`).
   V1 to řešila roztroušeně 8× s !important (dist/css/beta-custom.css:253 aj.),
   v2 má jedno pravidlo pro všechno. Výjimka (dekorativní ořez, např. banner)
   se dělá explicitně třídou .gb-img-cover, nikdy přepisem tohoto pravidla. */
img { object-fit: contain; object-position: center; }

/* ── Bílý rámeček fotky na krémovém podkladu ──────────────────────────────
   Skoro všechny naše obrázky (loga výrobců z ERP, produktové fotky) mají
   bílé pozadí zapečené v pixelech. Na `--gb-bg-4` (#fbfbf8) — pás značek
   v megamenu, karta produktu pod myší, dlaždice kategorií — pak kolem
   fotky svítí bílý obdélník a je vidět, kde fotka končí.

   `mix-blend-mode: multiply` to řeší bez retušování dat: výsledek je
   `zdroj × podklad`, takže bílá (255) se stane přesně barvou podkladu
   a zmizí, zatímco barevné pixely ztmavnou o (1 − 251/255) ≈ **1,6 %**,
   což je pod prahem viditelnosti. Na bílém podkladu je pravidlo no-op
   (bílá × cokoli = cokoli), proto se dá nasadit plošně.

   ⚠️ NEPLATÍ na fotky, které mají být plné a ostré samy o sobě (hero
   bannery, avatar odborníka, fotky v obsahu z editoru) — tam by multiply
   ztmavil celý obrázek proti stránce. A NEPLATÍ nikde, kde je pod
   obrázkem TMAVÝ podklad: `.pd-brand__logo` sedí na zeleném panelu, takže
   by se z bílého rámečku stal zelený a logo by zezelenalo celé.
   Pravidlo tedy vyjmenovává místa, ne `img` plošně.
   ⚠️ Blending končí na nejbližším stacking contextu (transform, opacity,
   filter, isolation). Kdyby se nad obrázek přidal `transform`, přestane
   to fungovat a rámeček se vrátí — pak patří `isolation: auto` pryč, ne
   tohle pravidlo. */
.gb-mega__brands img,
.gb-mnav__brands img,
.gb-chip img,
.gb-tile img,
.gb-card__img img,
.hp-cat__img img,
.pl-subcats img,
.pl-brand img,
.vl__logo img,
.pd-gallery__main img,
.pd-gallery__thumbs img,
.pd-colors a img,
.pd-anchors__prod img,
.pd-gar__thumb img,
.bk-item__img img,
.gb-cartdrop__thumb img,
.gb-sg-item img {
  mix-blend-mode: multiply;
}
.gb-img-cover { object-fit: cover; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gb-info); outline-offset: 2px; }
/* ⚠️ Vyhrazené pravidlo — jediné `!important`, které v tomhle souboru řídí
   chrome.
   Atribut [hidden] je náš vypínač pro dropdowny, panely mobilního menu,
   našeptávač i modal — a všechny ty prvky mají v klidovém stavu
   display:flex/grid/block z vlastního pravidla, které by výchozí
   `[hidden]{display:none}` z UA stylu tiše přebilo. Jedno vyhrazené
   pravidlo je levnější a spolehlivější než psát `:not([hidden])`
   u každé komponenty (a nezapomenout na to u příští). */
[hidden] { display: none !important; }

.gb-container {
  max-width: var(--gb-container);
  margin-inline: auto;
  padding-inline: var(--gb-gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gb-bg); color: var(--gb-navy); padding: 10px 15px;
}
.skip-link:focus { left: 0; }

/* Ikony: jeden sprite (/assets/v2/icons.svg), kreslí currentColor.
   Ikony z Figmy jsou obrysy (tahy převedené na tvar), takže se plní FILLEM —
   `stroke` by na nich nic nenakreslil. Symbol, který je výjimečně tahový
   (i-return, v knihovně chybí), si nese `fill="none" stroke="currentColor"`
   přímo na <path>: prezentační atribut na elementu přebije dědění odsud. */
.ico { width: 24px; height: 24px; flex: none; fill: currentColor; stroke: none; }
.ico--sm { width: 16px; height: 16px; }

/* ── Tlačítka ── */
.gb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--gb-sp-sm);
  min-height: 44px; padding: 0 var(--gb-sp-lg);
  border-radius: var(--gb-r-sm);
  font-weight: 600; font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight);
  text-decoration: none; white-space: nowrap;
}
.gb-btn--cta {
  background: var(--gb-green); color: #fff;
  border-radius: var(--gb-r-pill);
  min-height: 42px;
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
  text-transform: uppercase; letter-spacing: .02em;
}
.gb-btn--cta:hover { background: var(--gb-green-2); }
.gb-btn--navy { background: var(--gb-navy); color: #fff; }
.gb-btn--navy:hover { background: var(--gb-navy-2); }
/* Rámeček je povinný, ne dekorace: jediné místo, kde se `--light` používá,
   je panel účtu (.gb-accdrop__auth) a ten má bílé pozadí — bez rámečku byla
   pilulka „Registrovat" bílá na bílé a vypadala jako holý text. */
.gb-btn--light { background: #fff; color: var(--gb-navy); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill); }
.gb-btn--light:hover { background: var(--gb-bg-4); border-color: var(--gb-navy-mut); }
/* Tlačítko po dobu requestu (přihlášení, přidání do košíku) — JS mu jen
   nastaví `disabled`, vzhled řeší tohle pravidlo. `[aria-disabled]` sem
   schválně nepatří: nedostupné CTA na detailu produktu má vlastní vzhled
   (.pd-cta .gb-btn--cta[aria-disabled]) a doměřený podklad by se ztlumil. */
.gb-btn[disabled] { opacity: .6; cursor: default; }
.gb-btn--block { width: 100%; }
.gb-btn--sm { min-height: 36px; padding: 0 var(--gb-sp-md); font-size: var(--gb-fs-xxs); }
.gb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; /* kotva pro .gb-dot (přihlášený uživatel) */
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--gb-navy-mut); border-radius: 50%;
  color: #fff;
}
.gb-icon-btn:hover { background: rgba(255, 255, 255, .12); }
/* Zelený puntík u ikony účtu = přihlášený uživatel. Hostitelská ikona musí
   mít position:relative (mají ji .gb-icon-btn i .gb-mnav__icons a). */
.gb-dot {
  position: absolute; right: -2px; bottom: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gb-green);
}

/* ── Horní upozorňovací proužek (v designu volitelný, výchozí skrytý) ── */
.gb-topbar {
  background: var(--gb-warn-bg); color: var(--gb-ink);
  border-bottom: 1px solid var(--gb-warn-bd);
  min-height: 30px;
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 3px var(--gb-sp-md);
}

/* ── Hlavička ──
   Geometrie odečtená z Figmy (HLAVNÍ MENU 6414:19249 → „hlavicka desktop"):
   výška 92, logo 185×44 na x=40, vyhledávání 690×44 na x=338, ikony 3×44
   (mezera 5) na x=1088, CTA 150×42 na x=1250, pravý okraj 1400 = 1440−40.
   Mezery logo→search 113 a search→ikony 60 jsou fixní na 1440 a plynule
   se stahují na užších oknech (clamp). */
/* position:relative kvůli panelu našeptávače — ten visí pod CELOU hlavičkou
   (tj. i pod lištou menu), takže se kotví k <header>, ne k formuláři. */
.gb-header { background: var(--gb-navy); color: #fff; position: relative; }
.gb-header__in { display: flex; align-items: center; height: 92px; }
.gb-logo { flex: none; display: block; }
.gb-logo img, .gb-logo svg { height: 44px; width: auto; }
.gb-logo__dark { display: none; }   /* světlá hlavička — varianta zrušeného konfigurátoru v2 */

.gb-search {
  display: flex; align-items: stretch;
  /* `min-width: 0` proto, aby se flex položka opravdu smrskla: výchozí
     `auto` ji drží na min-content obsahu, takže při 320 px vyšlo hledání
     na 307 px v hlavičce široké 275 a přeteklo (změřeno 1. 9. 2026). */
  flex: 1 1 auto; min-width: 0; max-width: 690px; height: 44px;
  margin-left: clamp(20px, 7.85vw, 113px);
  margin-right: clamp(16px, 4.17vw, 60px);
}
.gb-search input {
  flex: 1 1 auto; min-width: 0;
  border: 0; border-radius: var(--gb-r-pill) 0 0 var(--gb-r-pill);
  background: #fff; color: var(--gb-ink);
  padding: 0 var(--gb-sp-lg);
  font-size: var(--gb-fs-input); /* 16px — body/regular/input; brání i iOS zoomu */
  line-height: var(--gb-lh-sm-tight);
}
.gb-search input::placeholder { color: var(--gb-mut-inv); }
.gb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gb-search button {
  flex: none; width: 60px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gb-navy-tint); color: var(--gb-navy);
  border-radius: 0 var(--gb-r-pill) var(--gb-r-pill) 0;
}
.gb-search button:hover { background: var(--gb-navy-mut); }

.gb-actions { display: flex; align-items: center; gap: var(--gb-sp-lg); flex: none; margin-left: auto; }
.gb-actions__icons { display: flex; gap: var(--gb-sp-xs); }
/* CTA v hlavičce má v Figmě pevných 150 px; delší překlady („Warenkorb")
   ji roztáhnou, proto minimum, ne pevná šířka. */
.gb-cart { position: relative; min-width: 150px; }
.gb-cart__count {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: #fff; color: var(--gb-navy);
  border-radius: var(--gb-r-pill);
  font-size: var(--gb-fs-xxs); line-height: 20px; font-weight: 600; text-align: center;
}

/* ── Hlavní navigace ──
   Lišta menu je TMAVŠÍ než horní část hlavičky (Figma: surface/brand
   secondary/secondary #072046 vs primary #092857) — ne stejná barva s linkou.
   Položky: výška 50, vodorovný padding 15, mezera 5; pravé odkazy padding 20
   a BĚŽNÝ řez (400), ne polotučný jako hlavní položky. */
.gb-nav {
  background: var(--gb-navy-2); position: relative;
  box-shadow: inset 0 1px 0 var(--gb-navy-3); /* dělicí linka pod hlavičkou */
}
.gb-nav__in { display: flex; align-items: stretch; height: 50px; }
/* `min-width:0` + `nowrap`: lišta je vysoká přesně 50 px, takže delší
   lokalizovaný název (DE „Golfschläger und Zubehör") by se zalomil na dva
   řádky a druhý by se uřízl. Radši ať se položky vodorovně srolují. */
.gb-nav__list {
  display: flex; align-items: stretch; gap: var(--gb-sp-xs);
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.gb-nav__list::-webkit-scrollbar { display: none; }
.gb-nav__link { white-space: nowrap; }
.gb-nav__item { display: flex; }
.gb-nav__link {
  display: flex; align-items: center; gap: var(--gb-sp-xs);
  padding: 0 var(--gb-sp-md);
  color: #fff; text-decoration: none;
  font-size: var(--gb-fs-xs); line-height: 24px; font-weight: 600;
  text-transform: uppercase;
}
.gb-nav__link .ico { width: 16px; height: 16px; transition: transform .15s; }
.gb-nav__item > .gb-nav__link { border-radius: var(--gb-r-md) var(--gb-r-md) 0 0; }
.gb-nav__item:hover > .gb-nav__link { background: var(--gb-navy-3); }
.gb-nav__item.is-open > .gb-nav__link {
  background: var(--gb-bg-4); color: var(--gb-ink);
}
.gb-nav__item.is-open > .gb-nav__link .ico { transform: rotate(180deg); }
.gb-nav__aux { margin-left: auto; display: flex; align-items: stretch; }
.gb-nav__aux a {
  display: flex; align-items: center; padding: 0 var(--gb-sp-lg);
  color: #fff; text-decoration: none;
  font-size: var(--gb-fs-xs); line-height: 24px; font-weight: 400;
}
.gb-nav__aux a:hover { background: var(--gb-navy-3); }

/* ── Megamenu ── */
.gb-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--gb-bg-4);
  box-shadow: 0 20px 30px rgba(9, 40, 87, .18);
  display: none;
}
.gb-nav__item.is-open .gb-mega { display: block; }
/* Kotva pro absolutně pozicované zavírací kolečko .gb-mega__close.
   Bývalo to inline `style="position:relative"` v šabloně — inline styl
   v markupu znamená chybějící třídu v systému (CLAUDE.md, MATRIX_UI §6). */
.gb-mega__wrap { position: relative; }
.gb-mega__in {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px;
  gap: var(--gb-sp-2xl);
  padding-top: var(--gb-sp-xl); padding-bottom: var(--gb-sp-lg);
}
.gb-mega__title {
  font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600;
  color: var(--gb-ink);
}
.gb-mega__title a { color: inherit; text-underline-offset: 4px; }
.gb-mega__grid {
  margin-top: var(--gb-sp-lg);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
  gap: var(--gb-sp-sm) var(--gb-sp-md); /* Figma: 3 dlaždice 340 v 1050 */
}
.gb-tile {
  display: flex; align-items: center; gap: var(--gb-sp-md);
  min-height: 95px; padding: var(--gb-sp-sm) var(--gb-sp-md);
  background: var(--gb-bg);
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md);
  box-shadow: var(--gb-shadow-sm);
  text-decoration: none; color: var(--gb-ink);
}
.gb-tile:hover { border-color: var(--gb-line-4); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); }
.gb-tile img { width: 70px; height: 70px; object-fit: contain; flex: none; }
.gb-tile__name { font-weight: 600; font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); }
.gb-mega__aside { padding-top: var(--gb-sp-md); }
/* Odkaz „Zobrazit celou kategorii" (přímý potomek asidu) je podtržený vždy;
   odkazy ve skupinách níž mají podtržení až na hover, jinak by pravá kolona
   byla samá čára. Proto `> a`, ne `a`. */
.gb-mega__aside > a, .gb-mega__all {
  display: flex; align-items: center; gap: var(--gb-sp-sm);
  min-height: 51px;
  color: var(--gb-navy); font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight);
  text-decoration: underline; text-underline-offset: 3px;
}
.gb-mega__aside .ico { color: var(--gb-green); }
/* Skupiny bočních odkazů (z SUBMENU_HTML, viz NavigationService::extras) */
.gb-mega__linkgroup + .gb-mega__linkgroup { margin-top: var(--gb-sp-lg); }
.gb-mega__linktitle {
  font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600;
  color: var(--gb-ink); margin-bottom: var(--gb-sp-xs);
}
.gb-mega__linkgroup ul { list-style: none; margin: 0; padding: 0; }
.gb-mega__linkgroup a {
  display: flex; align-items: center; gap: var(--gb-sp-sm);
  min-height: 34px;
  color: var(--gb-navy); font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight);
  font-weight: 400; text-decoration: none;
}
.gb-mega__linkgroup a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gb-mega__close {
  position: absolute; top: var(--gb-sp-xl); right: var(--gb-gutter);
  color: var(--gb-ink-2); width: 24px; height: 24px;
}
.gb-mega__brands { border-top: 1px dashed var(--gb-line-4); }
/* Figma (6414:19249, otevřené megamenu): loga jsou v JEDNÉ řadě rozprostřená
   po celé šířce kontejneru, v původní barvě (žádný grayscale filtr). */
/* Mřížka, ne `flex + space-between`: značek je dvanáct a na užším okně se
   poslední zalomila sama do druhého řádku, kde stála uprostřed prázdna.
   `auto-fit` je rozprostře rovnoměrně a zalomení vypadá jako záměr. */
.gb-mega__brands ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  align-items: center; gap: var(--gb-sp-sm);
  padding-block: var(--gb-sp-lg);
}
.gb-mega__brands a { display: flex; align-items: center; justify-content: center; height: 70px; }
.gb-mega__brands img { max-height: 40px; max-width: 84px; width: auto; }

/* ── Dropdowny v hlavičce (účet, košík) ──
   Jeden mechanismus pro obojí (viz gb.js): host `.gb-drop` je kotva,
   `.gb-drop__panel` z ní visí a schovává se atributem [hidden].
   Panel je světlý na tmavé hlavičce, proto explicitní `color` — dědilo by
   se bílé písmo z .gb-header. */
.gb-drop { position: relative; display: flex; }
.gb-drop__panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  z-index: var(--gb-z-drop);
  min-width: 320px;
  background: var(--gb-bg); color: var(--gb-ink);
  border-radius: var(--gb-r-md);
  box-shadow: var(--gb-shadow-drop);
  overflow: hidden;
  text-align: left;
}

/* Účet — seznam odkazů, řádky 44 px */
.gb-accdrop { padding-block: var(--gb-sp-xs); }
.gb-accdrop__head {
  padding: var(--gb-sp-sm) var(--gb-sp-md);
  border-bottom: 1px solid var(--gb-line-3);
}
.gb-accdrop__head strong { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; }
.gb-accdrop__head span { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); overflow-wrap: anywhere; }
/* `:not(.gb-btn)` — v nepřihlášené variantě jsou v panelu dvě pilulky
   (Přihlásit / Registrovat), ty nesmí dostat vzhled řádku seznamu. */
.gb-accdrop a:not(.gb-btn), .gb-accdrop button:not(.gb-btn) {
  display: flex; align-items: center; gap: var(--gb-sp-sm);
  width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md);
  color: var(--gb-ink); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
  text-decoration: none; text-align: left;
}
.gb-accdrop a:not(.gb-btn):hover, .gb-accdrop button:not(.gb-btn):hover { background: var(--gb-bg-4); }
.gb-accdrop .ico { width: 18px; height: 18px; color: var(--gb-ink-2); }
.gb-accdrop__list { margin: 0; }
/* „Odhlásit" je poslední řádek panelu a odděluje se linkou; samostatný
   .gb-accdrop__sep by v markupu byl prázdný element navíc. */
.gb-accdrop a.gb-accdrop__logout { color: var(--gb-ink-2); border-top: 1px solid var(--gb-line-3); margin-top: var(--gb-sp-xs); }
.gb-accdrop__auth { display: grid; gap: var(--gb-sp-sm); padding: var(--gb-sp-md); }
.gb-accdrop__auth .gb-btn { width: 100%; }

/* Košík — Figma „kosik z hlavicky" (6414:20035) */
.gb-cartdrop { width: 380px; }
.gb-cartdrop__list {
  margin: 0; padding: 0; list-style: none;
  max-height: min(70vh, 560px); overflow-y: auto;
}
.gb-cartdrop__item {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center; gap: var(--gb-sp-md);
  padding: var(--gb-sp-sm) var(--gb-sp-md);
  border-bottom: 1px solid var(--gb-line-3);
}
.gb-cartdrop__thumb { width: 60px; height: 60px; display: block; }
.gb-cartdrop__thumb img { width: 100%; height: 100%; }
.gb-cartdrop__info { min-width: 0; }
.gb-cartdrop__name { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-ink); text-decoration: none; }
.gb-cartdrop__var, .gb-cartdrop__qty { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); }
.gb-cartdrop__side { display: flex; align-items: center; gap: var(--gb-sp-sm); }
.gb-cartdrop__price { text-align: right; font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-promo); }
.gb-cartdrop__del { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; color: var(--gb-ink-2); border-radius: 50%; }
.gb-cartdrop__del:hover { background: var(--gb-bg-4); color: var(--gb-err); }
.gb-cartdrop__del .ico { width: 18px; height: 18px; }
/* Pás dopravy zdarma — dvě varianty (splněno / zbývá) sdílí zelený tint */
.gb-cartdrop__ship {
  display: flex; align-items: center; gap: var(--gb-sp-sm);
  padding: var(--gb-sp-sm) var(--gb-sp-md);
  background: var(--gb-green-tint); color: var(--gb-green-2);
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); font-weight: 600;
}
.gb-cartdrop__ship .ico { width: 20px; height: 20px; flex: none; }
.gb-cartdrop__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm);
  padding: var(--gb-sp-md);
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.gb-cartdrop__total strong { font-size: var(--gb-fs-lg); line-height: 1.2; font-weight: 600; }
.gb-cartdrop__foot { padding: 0 var(--gb-sp-md) var(--gb-sp-md); }
.gb-cartdrop__foot .gb-btn { width: 100%; }
.gb-cartdrop__empty {
  margin: var(--gb-sp-md);
  padding: var(--gb-sp-md);
  background: var(--gb-info-bg); color: var(--gb-info);
  border-radius: var(--gb-r-sm);
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}

/* ── Našeptávač ──
   Panel visí pod celou hlavičkou stejně jako megamenu a má stejný podklad
   i stín, aby to byla vizuálně jedna vrstva (Figma 6414:19250). */
.gb-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--gb-z-drop);
  background: var(--gb-bg-4);
  box-shadow: 0 20px 30px rgba(9, 40, 87, .18);
  color: var(--gb-ink);
  max-height: 78vh; overflow-y: auto;
}
/* Výchozí je JEDEN sloupec; druhý (320 px na kategorie/značky/články) se
   zapíná až když aside opravdu existuje. S natvrdo dvousloupcovou mřížkou
   zůstávalo u dotazu bez kategorií 320 px prázdna a naopak u dotazu bez
   produktů spadl aside do prvního sloupce i s levým čárkovaným rámečkem. */
.gb-suggest__in {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--gb-sp-xl);
  padding-block: var(--gb-sp-lg);
}
.gb-suggest__in:has(.gb-suggest__main):has(.gb-suggest__aside) {
  grid-template-columns: minmax(0, 1fr) 320px;
}
/* Svislý oddělovač sloupců je v návrhu ČÁRKOVANÝ — ale jen když je vedle čeho.
   Sousedící sourozenec, ne :has(): stejná specificita jako mobilní varianta
   níž, takže o vítězi rozhoduje pořadí v souboru, ne počítání selektorů. */
.gb-suggest__main + .gb-suggest__aside { border-left: 1px dashed var(--gb-line-4); padding-left: var(--gb-sp-xl); }
.gb-suggest__title {
  font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600;
  margin-bottom: var(--gb-sp-sm);
}
/* Skupiny v pravém sloupci (Kategorie, Značky) staví JS jako .gb-suggest__group. */
.gb-suggest__group + .gb-suggest__group { margin-top: var(--gb-sp-lg); }
/* Sloupce mřížky musí smět zúžit obsah, jinak dlouhý název produktu roztáhne
   celý grid a panel začne přetékat vodorovně. */
.gb-suggest__main, .gb-sg-item__info { min-width: 0; }
.gb-suggest__loading {
  grid-column: 1 / -1;
  padding-block: var(--gb-sp-lg);
  color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.gb-suggest__all { grid-column: 1 / -1; display: flex; justify-content: center; }
/* Šipkou dolů se dá dojet i na pilulku „Zobrazit všechny výsledky" (je
   v navItems), takže musí mít viditelný stav — jinak fokus na posledním
   kroku vizuálně zmizel. */
.gb-suggest__all a.is-active { background: var(--gb-navy-2); outline: 2px solid var(--gb-info); outline-offset: 2px; }
.gb-suggest__empty {
  grid-column: 1 / -1;
  padding-block: var(--gb-sp-lg);
  color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.gb-sg-item {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center; gap: var(--gb-sp-md);
  min-height: 76px; padding: var(--gb-sp-sm) var(--gb-sp-md);
  background: var(--gb-bg);
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md);
  color: var(--gb-ink); text-decoration: none;
}
.gb-sg-item + .gb-sg-item { margin-top: var(--gb-sp-sm); }
.gb-sg-item picture, .gb-sg-item__pic { display: block; width: 60px; height: 60px; }
.gb-sg-item img { width: 100%; height: 100%; }
.gb-sg-item__name { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 400; }
/* Hledaný text v názvu a štítcích (gb.js §6.2 hlText) — tučně proti běžnému řezu. */
.gb-sg-hl { font-weight: 600; }
/* Modifikátor skládá gb.js z `stock_class` z /api/search a ten posílá
   `available` / `onway` / `unavailable` (SearchController.php:423,452) —
   `--out` nevzniklo NIKDY, takže „Na dotaz" i „Obvykle 14 dnů" svítilo stejně
   zeleně jako „Skladem". Základní pravidlo proto zůstává neutrální a barvu
   dává až modifikátor. */
.gb-sg-item__stock { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); }
.gb-sg-item__stock--available { color: var(--gb-green-2); }
.gb-sg-item__stock--onway { color: var(--gb-warn); }
.gb-sg-item__stock--unavailable { color: var(--gb-ink-2); }
.gb-sg-item__prices { text-align: right; }
.gb-sg-item__list { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); text-decoration: line-through; }
.gb-sg-item__price { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-promo); }
.gb-sg-item:hover, .gb-sg-item.is-active { background: var(--gb-bg-4); border-color: var(--gb-line-4); }
.gb-suggest__chips { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); }
.gb-chip {
  display: inline-flex; align-items: center; gap: var(--gb-sp-sm);
  padding: 6px 12px;
  background: var(--gb-bg);
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm);
  color: var(--gb-ink); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
  text-decoration: none;
}
.gb-chip:hover, .gb-chip.is-active { background: var(--gb-bg-4); border-color: var(--gb-line-4); }
.gb-chip img { max-height: 24px; max-width: 60px; width: auto; }
@media (max-width: 899px) {
  /* Jeden sloupec: kategorie a značky se přesunou POD produkty.
     Selektor musí kopírovat `:has()` variantu výš, jinak by ji nepřebil —
     specificita `:has()` se počítá podle nejsilnějšího argumentu. */
  .gb-suggest__in,
  .gb-suggest__in:has(.gb-suggest__main):has(.gb-suggest__aside) {
    grid-template-columns: minmax(0, 1fr); gap: var(--gb-sp-lg);
  }
  .gb-suggest__main + .gb-suggest__aside {
    border-left: 0; padding-left: 0;
    border-top: 1px dashed var(--gb-line-4); padding-top: var(--gb-sp-lg);
  }
}

/* ── Mobilní hlavička + menu ── */
.gb-burger { display: none; }
.gb-mnav { display: none; }
@media (max-width: 1099px) {
  /* Dvouřádková hlavička: [burger | logo | ikony] a pod tím vyhledávání přes
     celou šířku (to má flex-basis:100%, takže se zalomí vždy).
     ⚠️ `gap` je tu ZÁMĚRNĚ menší než na desktopu a logu je povoleno se zúžit.
     S mezerou 15 px a `flex:none` na logu byl na 375 px součet
     44 + 15 + 174 + 15 + 98 = 346 px proti 345 px vnitřní šířky, takže ikony
     spadly na vlastní řádek a hlavička narostla na 182 px (CZ logo „Golf pro
     Všechny.cz" je při výšce 36 px široké 174 px; značkové jen 151 px, proto
     se to na .eu/.de/.pl neprojevovalo). */
  .gb-header__in { height: auto; flex-wrap: wrap; gap: var(--gb-sp-sm); padding-block: var(--gb-sp-sm); }
  /* ⚠️ `flex: 1 1 0` (ne `auto` a ne `margin-inline:auto`) je tu nutnost, ne
     kosmetika. Zalamování řádků ve flexboxu se počítá z flex-basis PŘED
     smršťováním, takže logo se šířkou obsahu (174 px u CZ) o jediný pixel
     přeteklo a ikony spadly na vlastní řádek — hlavička pak měřila 172 px
     místo ~110. S basis 0 se řádek vejde vždycky a logo si vezme jen zbytek
     místa; `object-fit:contain` z resetu drží poměr stran. Centrování dělá
     `justify-content`, protože auto-margin by u rostoucí položky nefungoval. */
  .gb-logo { order: 2; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
  .gb-logo img, .gb-logo svg { height: 36px; max-width: 100%; }
  .gb-burger { display: inline-flex; order: 1; border: 0; }
  .gb-actions { order: 3; margin-left: 0; gap: var(--gb-sp-sm); }
  .gb-actions__icons .gb-icon-btn--phone, .gb-actions__icons .gb-icon-btn--heart { display: none; }
  .gb-cta-label { display: none; }
  .gb-btn--cta { min-width: 42px; padding: 0 var(--gb-sp-sm); }
  .gb-search { order: 4; flex-basis: 100%; max-width: none; margin-inline: 0; }
  .gb-nav { display: none; }
  .gb-container { padding-inline: var(--gb-sp-md); }

  /* Panely dropdownů se na užších oknech vejdou do viewportu — pevných
     320/380 px by u tlačítka na pravém okraji vyjelo doleva mimo obrazovku
     (doleva se neroluje, obsah by se jen uřízl). */
  .gb-drop__panel { min-width: 0; width: min(320px, calc(100vw - 2 * var(--gb-sp-md))); }
  .gb-cartdrop { width: min(380px, calc(100vw - 2 * var(--gb-sp-md))); }

  /* Drawer: hlavička + vyhledávání zůstávají vidět, seznam a panel
     podkategorií se STŘÍDAJÍ ve stejné buňce mřížky. Grid je tu proto, že
     panel je sourozenec seznamu (ne jeho potomek) a takhle ho překryje na
     pixel přesně, bez dopočítávání výšky hlavičky drawer. */
  .gb-mnav {
    display: grid; grid-template-rows: auto auto minmax(0, 1fr);
    position: fixed; inset: 0; z-index: 80;
    background: var(--gb-bg);
    /* Se správnou strukturou (bar / search / scroll) se nic nepřeteče a
       scrollbar se neukáže; je to pojistka pro markup bez .gb-mnav__scroll,
       aby seznam nikdy nezmizel pod spodní hranou obrazovky. */
    overflow-y: auto;
  }
  /* Zavřený stav řídí atribut `hidden` ([hidden]{display:none!important}),
     ne transform. Dřív tu byl `translateX(-100%)` + `transition`, jenže gb.js
     mění `hidden` a `is-open` v jednom ticku, takže se z `display:none`
     nikdy nic neanimovalo — mrtvý kód, který zároveň dělal ze .gb-mnav
     stacking context navíc. */
  /* Lišta drawer — Figma „mobile menu": zavírací kolečko, logo, plain ikony. */
  .gb-mnav__bar {
    display: flex; align-items: center; gap: var(--gb-sp-md);
    background: var(--gb-navy); color: #fff;
    padding: var(--gb-sp-sm) var(--gb-sp-md);
  }
  .gb-mnav__logo { display: block; }
  .gb-mnav__logo img, .gb-mnav__logo svg { height: 36px; width: auto; }
  .gb-mnav__icons { display: flex; align-items: center; gap: var(--gb-sp-md); margin-left: auto; }
  .gb-mnav__icons a, .gb-mnav__icons button { position: relative; display: inline-flex; color: #fff; }
  .gb-mnav__icons .ico { width: 24px; height: 24px; }
  .gb-mnav__search { background: var(--gb-navy); padding: 0 var(--gb-sp-md) var(--gb-sp-md); }
  .gb-mnav__search .gb-search { margin-inline: 0; max-width: none; }

  .gb-mnav__scroll { grid-row: 3; grid-column: 1; overflow-y: auto; }
  /* Panel a seznam sdílí JEDNU buňku mřížky, takže se překrývají na pixel
     přesně bez dopočítávání výšky hlavičky drawer. `z-index` na položce
     mřížky funguje i bez `position` (css-grid-1 §6.2 Z-axis Ordering), takže
     panel kreslí nad seznamem bez ohledu na pořadí v DOM. */
  .gb-mnav__panel {
    grid-row: 3; grid-column: 1; z-index: 1;
    background: var(--gb-bg); overflow-y: auto;
  }

  .gb-mnav__row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-sm);
    width: 100%; min-height: 60px; padding: 0 var(--gb-sp-md);
    border-bottom: 1px solid var(--gb-line-3);
    color: var(--gb-ink); font-size: var(--gb-fs-sm); font-weight: 600;
    text-decoration: none; text-align: left;
  }
  .gb-mnav__row .ico { color: var(--gb-ink-2); }
  /* Řádek kategorie má miniaturu vlevo, text hned za ní (ne na opačném kraji). */
  .gb-mnav__row--cat { justify-content: flex-start; gap: var(--gb-sp-md); }
  .gb-mnav__thumb { width: 40px; height: 40px; flex: none; object-fit: contain; }
  /* Sekundární odkazy (Custom fitting, Tabulky velikostí…) — nižší, běžný
     řez, na krémovém podkladu a BEZ linek mezi sebou; blok uzavírá čárkovaná
     linka pásu značek. */
  .gb-mnav__row--sub {
    justify-content: flex-start; gap: var(--gb-sp-sm);
    min-height: 52px; font-weight: 400; color: var(--gb-ink-2);
    background: var(--gb-bg-4); border-bottom: 0;
  }
  .gb-mnav__row--sub:last-child { border-bottom: 1px solid var(--gb-line-3); }
  .gb-mnav__back {
    display: flex; align-items: center; gap: var(--gb-sp-md);
    width: 100%; min-height: 64px; padding: 0 var(--gb-sp-md);
    background: var(--gb-bg-4); border-bottom: 1px solid var(--gb-line-3);
    color: var(--gb-navy); font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg);
    font-weight: 600; text-align: left;
  }
  .gb-mnav__backbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    border: 1px solid var(--gb-line-4); border-radius: 50%;
  }
  .gb-mnav__brands {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    place-items: center; gap: var(--gb-sp-lg);
    padding: var(--gb-sp-lg) var(--gb-sp-md);
    background: var(--gb-bg-4);
    border-top: 1px dashed var(--gb-line-4);
  }
  .gb-mnav__brands a { display: flex; align-items: center; justify-content: center; }
  .gb-mnav__brands img { max-height: 32px; max-width: 84px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ico, .gb-nav__link .ico { transition: none; }
}

/* ── Drobečková navigace ── */
.gb-crumbs { padding-block: var(--gb-sp-md); }
.gb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-xs); }
.gb-crumbs li { display: flex; align-items: center; gap: var(--gb-sp-xs); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); }
.gb-crumbs a { color: var(--gb-ink-2); text-decoration: none; }
.gb-crumbs a:hover { text-decoration: underline; }
.gb-crumbs .ico { width: 14px; height: 14px; color: var(--gb-line-4); }

/* ── USP pás pod menu ──
   Figma („hlavicka desktop"): pruh 50 + 1px linka, tj. 5 nahoře/dole kolem
   dvou řádků 23,8 + 16,2. Benefity nejsou tři stejné sloupce — krajní sedí
   40 px uvnitř obsahové šířky (80 od okraje stránky) a zbytek se rozprostře
   (space-between), proto prostřední vyjde doprostřed. */
.gb-usp { background: var(--gb-warn-bg); border-bottom: 1px solid var(--gb-warn-bd); }
.gb-usp ul {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--gb-sp-lg);
  padding-block: var(--gb-sp-xs);
  padding-inline: calc(2 * var(--gb-gutter));
  text-align: center;
}
.gb-usp strong { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; }
.gb-usp span { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); }
@media (max-width: 1099px) {
  .gb-usp ul { padding-inline: var(--gb-sp-md); } /* kopíruje odsazení kontejneru */
}
@media (max-width: 899px) {
  .gb-usp ul { justify-content: center; gap: 2px; }
  .gb-usp li + li { display: none; } /* na mobilu jen první benefit */
}

/* ── Sekce stránky ── */
.gb-sec { padding-block: var(--gb-sp-2xl); }
.gb-sec--soft { background: var(--gb-bg-4); }
.gb-sec__head { text-align: center; margin-bottom: var(--gb-sp-lg); }
.gb-sec__mark { width: 34px; height: 34px; margin: 0 auto var(--gb-sp-sm); }
.gb-sec__head h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; }
.gb-sec__head p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); }
.gb-sec__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-lg); margin-bottom: var(--gb-sp-lg); flex-wrap: wrap; }
.gb-sec__bar h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; }
.gb-center { text-align: center; margin-top: var(--gb-sp-lg); }

/* ── Homepage ──
   Figma homepage nemá (viz templates/v2/pages/home.php). Sekce staví na
   komponentách definovaných jinde: dlaždice = megamenu, mřížka produktů =
   výpis, banner = „banner menu" roztažený na obsahovou šířku. ── */
.hp-hero { padding-top: var(--gb-sp-lg); }
.hp-hero__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: var(--gb-sp-md); scrollbar-width: none;
  border-radius: var(--gb-r-md);
  /* position:relative dela z drahy offsetParent slidu - gb.js pak posouva na
     `slide.offsetLeft` a trefi se presne na snap bod. Bez toho offsetLeft
     pocita i odsazeni kontejneru a vedle noveho banneru koukal prouzek
     predchoziho. */
  position: relative;
}
.hp-hero__track::-webkit-scrollbar { display: none; }
.hp-hero__slide {
  flex: 0 0 100%; scroll-snap-align: start; min-width: 0;
  border-radius: var(--gb-r-md); overflow: hidden;
  background: var(--gb-bg-4);
}
.hp-hero__slide img { width: 100%; height: auto; }
.hp-hero__dots { display: flex; justify-content: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); }
.hp-hero__dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--gb-line-4); transition: background .15s, transform .15s;
}
.hp-hero__dot.is-active { background: var(--gb-navy); transform: scale(1.2); }
.hp-hero__dot:hover { background: var(--gb-ink-2); }

.hp-h1 { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; text-align: center; }
.hp-h1__sub {
  text-align: center; color: var(--gb-ink-2);
  font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm);
  margin-bottom: var(--gb-sp-lg);
}
.hp-cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gb-sp-md); }
.hp-cat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--gb-sp-sm); padding: var(--gb-sp-md);
  background: var(--gb-bg); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm);
  text-decoration: none; color: var(--gb-ink);
}
.hp-cat:hover { border-color: var(--gb-line-4); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); }
.hp-cat__img { display: block; width: 120px; height: 120px; }
.hp-cat__img img { width: 100%; height: 100%; object-fit: contain; }
.hp-cat__name { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; }

.hp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gb-sp-lg); }
.hp-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--gb-bg); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md); overflow: hidden; box-shadow: var(--gb-shadow-sm);
  text-decoration: none; color: var(--gb-ink);
}
.hp-card:hover { border-color: var(--gb-line-4); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); }
.hp-card__img { display: block; position: relative; background: var(--gb-bg-4); }
/* Náhledy článků a videí jsou dekorativní ořez, ne produktová fotka — proto
   výjimka z globálního `img { object-fit: contain }` (viz pravidlo výš). */
.hp-card__img img { width: 100%; height: 100%; object-fit: cover; }
.hp-card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(5, 24, 52, .25);
}
.hp-card__play .ico { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.hp-card:hover .hp-card__play { background: rgba(5, 24, 52, .35); }
.hp-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--gb-sp-md); flex: 1; }
.hp-card__kicker {
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--gb-green-2);
}
/* Titulek i perex jsou text z DB, kam redakce běžně vloží holou adresu.
   URL nemá kde zalomit, takže přeteče kartu — na `/videa/` měl perex
   347 px v boxu 289 a `overflow: hidden` na kartě zbytek uřízl (změřeno
   1. 9. 2026). `anywhere` zalomí i uvnitř tokenu; běžný text se chová
   stejně jako dřív, protože ten má kde zalomit. */
.hp-card__title { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; overflow-wrap: anywhere; }
.hp-card__perex { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); overflow-wrap: anywhere; }
.hp-card__meta {
  margin-top: auto; padding-top: var(--gb-sp-sm);
  display: flex; align-items: center; gap: 6px;
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2);
}
.hp-card__meta .ico { color: var(--gb-line-4); }

@media (max-width: 1099px) {
  .hp-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .hp-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-sm); }
  .hp-cat__img { width: 88px; height: 88px; }
  .hp-cards { grid-template-columns: 1fr; }
  .hp-h1 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); }
}

/* ── Vypis znacek (/znacky/) ──
   Figma stranku nema; dlazdice vychazi z pasu znacek v megamenu. Rejstrik je
   position:sticky, ne dopocitavany fixed jako ve v1 — proto k teto strance
   neni zadny JS. ── */
.vl { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); }
.vl__head { margin-bottom: var(--gb-sp-lg); }
.vl__head h1 { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; }
.vl__head p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.vl__empty { color: var(--gb-ink-2); }
.vl__index {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: var(--gb-sp-xs);
  padding: var(--gb-sp-sm) 0; margin-bottom: var(--gb-sp-lg);
  background: var(--gb-bg); border-bottom: 1px solid var(--gb-line-3);
}
.vl__index a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding-inline: 8px;
  border-radius: var(--gb-r-sm); border: 1px solid var(--gb-line-3);
  font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy);
  text-decoration: none;
}
.vl__index a:hover { background: var(--gb-bg-4); border-color: var(--gb-line-4); }
.vl__group + .vl__group { margin-top: var(--gb-sp-xl); }
/* scroll-margin, ať kotva neskončí pod lepivým rejstříkem */
.vl__letter { scroll-margin-top: 60px; font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; color: var(--gb-navy); margin-bottom: var(--gb-sp-sm); }
.vl__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gb-sp-md); }
.vl__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--gb-sp-sm); padding: var(--gb-sp-md) var(--gb-sp-sm);
  background: var(--gb-bg); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm);
  text-decoration: none; color: var(--gb-ink); text-align: center;
}
.vl__item:hover { border-color: var(--gb-line-4); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); }
.vl__logo { display: flex; align-items: center; justify-content: center; height: 56px; width: 100%; }
.vl__logo img { max-height: 56px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
/* Dva řádky rezervované vždy, i když se název vejde na jeden. Mřížka
   dorovnává výšku po řádcích, takže jediná dvouřádková značka („Pride
   Professional") zvedla celou šestici na 141 px, zatímco zbylých 108 dlaždic
   mělo 120 (změřeno 1. 9. 2026 na /znacky/ při 1440 px). Zkracovat název
   nechceme — je to rejstřík značek, tam se nezkracuje. */
.vl__name {
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-sm-tight); font-weight: 600;
  overflow-wrap: anywhere; min-height: calc(var(--gb-lh-sm-tight) * 2);
}
.vl__count {
  position: absolute; top: 6px; right: 8px;
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-mut-inv);
}

/* ── Vypis clanku / videi ── */
.al { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); }
.al__head { margin-bottom: var(--gb-sp-lg); }
.al__head h1 { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; }
.al__head p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.al__empty { color: var(--gb-ink-2); }
.al__grid { margin-bottom: var(--gb-sp-xl); }

/* ── 404 ── */
.nf { padding-block: var(--gb-sp-2xl); text-align: center; max-width: 720px; margin-inline: auto; }
/* Řádek tlačítek pod chybovou/stavovou hláškou — sdílí ho 404, 410,
   neaktivní článek i výsledek platby. */
.nf__acts { display: flex; gap: var(--gb-sp-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--gb-sp-lg); }

/* ── Výsledek platby (`pages/payment-result.php`) ───────────────────────── */
.pr { padding-block: var(--gb-sp-2xl); text-align: center; max-width: 640px; margin-inline: auto; }
.pr h1 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; margin-top: var(--gb-sp-md); }
.pr__lead { color: var(--gb-ink-2); margin-top: var(--gb-sp-sm); }
.pr__meta { font-size: var(--gb-fs-xxs); margin-top: var(--gb-sp-md); }
.pr__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%;
}
.pr__ico .ico { width: 40px; height: 40px; }
.pr__ico--ok { background: var(--gb-green-tint); color: var(--gb-green-2); }
.pr__ico--err { background: #ffe9e6; color: var(--gb-err); }
.pr__ico--wait { background: var(--gb-warn-bg); color: #8a6d00; }
.nf__code { font-size: 96px; line-height: 1; font-weight: 600; color: var(--gb-navy-tint); }
.nf__title { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; margin-top: var(--gb-sp-sm); }
.nf__lead { color: var(--gb-ink-2); margin-top: var(--gb-sp-sm); }
.nf__lead code { background: var(--gb-bg-4); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); padding: 2px 6px; font-size: var(--gb-fs-xs); overflow-wrap: anywhere; }
.nf__search { display: flex; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-lg); }
.nf__search input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--gb-sp-md);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  background: var(--gb-bg); color: var(--gb-ink); font-size: var(--gb-fs-input);
}
.nf__search input:focus-visible { border-color: var(--gb-info); }
.nf__sugs-h { margin-top: var(--gb-sp-xl); font-weight: 600; }
.nf__sugs { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); justify-content: center; margin-top: var(--gb-sp-sm); }
.nf__home { margin-top: var(--gb-sp-xl); }
.nf__home a { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-navy); font-weight: 600; text-decoration: none; }
.nf__home a:hover { text-decoration: underline; }
/* .nf je uzsi nez kontejner, tak at zustane uprostred */
.nf { margin-inline: auto; }

@media (max-width: 1099px) {
  .vl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .vl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-sm); }
  .vl__head h1, .al__head h1, .nf__title { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); }
  .nf__code { font-size: 64px; }
  .nf__search { flex-direction: column; }
}

/* ── Prihlaseni, zapomenute/nove heslo, potvrzeni registrace ──
   Figma ma jen prihlasovaci modal z hlavicky (6420:9846); stranky jsou ten
   samy modal rozvinuty do karty. Pole pouzivaji .gb-field/.gb-check ze
   sekce formularu niz — zadna vlastni. ── */
.auth { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); }
.auth--narrow { max-width: 620px; margin-inline: auto; }
/* Prihlasovaci formular nema duvod byt sirsi nez ~560 — na 1440 by se
   pole roztahla pres cely kontejner. Dvojice karta+vyhody se proto
   drzi uprostred. */
.auth__grid { display: grid; grid-template-columns: minmax(0, 560px) 380px; gap: var(--gb-sp-xl); align-items: start; justify-content: center; }
.auth__card {
  background: var(--gb-bg); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm);
  padding: var(--gb-sp-xl);
}
.auth__card--center { text-align: center; }
.auth__title { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; margin-bottom: var(--gb-sp-md); }
.auth__lead { color: var(--gb-ink-2); margin-bottom: var(--gb-sp-md); }
.auth__card .gb-alert { margin-bottom: var(--gb-sp-md); }
.auth__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gb-sp-md); flex-wrap: wrap; margin-block: var(--gb-sp-sm) var(--gb-sp-lg);
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.auth__row a { color: var(--gb-navy); }
.auth__actions { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; }
.auth__actions--center { justify-content: center; margin-top: var(--gb-sp-lg); }
.auth__back { margin-top: var(--gb-sp-lg); }
.auth__back a { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-navy); font-size: var(--gb-fs-xs); text-decoration: none; }
.auth__back a:hover { text-decoration: underline; }
.auth__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gb-green-tint); color: var(--gb-green-2);
  margin-bottom: var(--gb-sp-md);
}
.auth__mark .ico { width: 32px; height: 32px; }
.auth__aside {
  background: var(--gb-bg-4); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md); padding: var(--gb-sp-xl);
}
.auth__aside h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }
.auth__aside > p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); margin-bottom: var(--gb-sp-md); }
.auth__aside ul { display: flex; flex-direction: column; gap: var(--gb-sp-md); }
.auth__aside li { display: flex; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.auth__aside li .ico { flex: none; margin-top: 3px; color: var(--gb-green); }
.gb-field__hint { color: var(--gb-ink-2); }

@media (max-width: 899px) {
  .auth__grid { grid-template-columns: 1fr; gap: var(--gb-sp-lg); }
  .auth__card, .auth__aside { padding: var(--gb-sp-lg); }
}

/* ── Registrace + firemni pole (sdilene s checkoutem) ──
   `is-invalid`, `invalid-feedback` a `form-text` NEJSOU bootstrapi zbytky —
   pise je ares/vies JS a inline validatory, ktere zustaly z v1. Stylujeme je
   tady, at se chovaji jako zbytek v2. ── */
.reg__title { text-align: center; margin-bottom: var(--gb-sp-lg); }
/* Rozestup karet resi .gb-form > * + * (15); registrace chce vetsi. */
.reg .gb-form > section + section { margin-top: var(--gb-sp-lg); }
.reg__legend { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm); font-weight: 600; }
/* Rozestup uvnitr karty: .gb-form > * + * plati jen na primé deti formulare
   (sekce), uvnitr karty by pole lepila na sebe. Stejne pro firemni blok —
   jeho obsah plni sdilena komponenta company-fields. */
.reg__card > * + *,
.reg__company > * + *,
.reg__company [data-vies-widget] > * + * { margin-top: var(--gb-sp-md); }
.reg__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reg__company { margin-top: var(--gb-sp-lg); padding-top: var(--gb-sp-lg); border-top: 1px solid var(--gb-line-3); }
/* Zeme potrebuje vic mista nez PSC — „Ceska republika" se do 1fr nevesla. */
/* Město / PSČ / Země. Země potřebuje nejvíc: formulář je v úzké kartě
   (~430 px obsahu) a při poměru 1,6 : 0,8 : 1,3 vycházel select na 148 px,
   zatímco „Česká republika" potřebuje 155 — název se ořízl (změřeno 1. 9.
   2026 porovnáním šířky textu s `clientWidth`). PSČ je naopak nejkratší
   pole formuláře, tak si ubere. `minmax(0, …)` je nutné: bez něj se sloupec
   nesmrskne pod min-content a řádek přeteče z karty ven.
   PSČ dole neubírat: na text zbývá `clientWidth − 32 px` paddingu a nizozemské
   „1234 AB" potřebuje 56 px, takže pod ~90 px se hodnota začne v poli
   posouvat mimo dohled. */
.reg__addr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, 1.9fr); gap: var(--gb-sp-md); }
.reg__consent { align-items: flex-start; margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.reg__consent a { color: var(--gb-navy); }
.reg__exists { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); }
.reg__exists-txt { flex: 1 1 260px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.reg__exists-act { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; }
.reg__exists-act .gb-btn { min-height: 36px; font-size: var(--gb-fs-xxs); padding-inline: var(--gb-sp-md); }
.reg__submit {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gb-sp-md); flex-wrap: wrap; margin-top: var(--gb-sp-lg);
}
.reg__submit a { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); }

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gb-sp-md); }
.cf-ares {
  background: var(--gb-bg-4); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md); padding: var(--gb-sp-md); margin-bottom: var(--gb-sp-md);
}
.cf-ares__label { display: block; font-weight: 600; font-size: var(--gb-fs-xs); margin-bottom: 6px; }
.cf-ares__row { display: flex; gap: var(--gb-sp-sm); }
.cf-ares__row input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--gb-sp-md);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  background: var(--gb-bg); color: var(--gb-ink); font-size: var(--gb-fs-input);
}
.cf-note {
  margin-top: var(--gb-sp-sm);
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2);
  background: var(--gb-bg-4); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-sm); padding: var(--gb-sp-sm);
}
.cf-note a { color: var(--gb-navy); }

/* Stavy z JS (ares/vies/inline validatory) */
.gb-field input.is-invalid, .gb-field select.is-invalid, .cf-ares__row input.is-invalid { border-color: var(--gb-err); }
.invalid-feedback { display: none; color: var(--gb-err); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); margin-top: 4px; }
.invalid-feedback.d-block, .is-invalid ~ .invalid-feedback { display: block; }
.form-text { color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); margin-top: 4px; }
.ares-status, .vies-status, .ares-results { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); margin-top: var(--gb-sp-sm); }
.ares-results button, .ares-results a { display: block; text-align: left; padding: 6px 8px; border-radius: var(--gb-r-sm); }
.ares-results button:hover { background: var(--gb-bg-4); }

@media (max-width: 899px) {
  .cf-row, .reg__addr { grid-template-columns: 1fr; }
}

/* ── Zbytky po v1 skriptech, ktere zustaly v provozu ──
   `ares-autofill.js`, `vies-autofill.js` a `address-check.js` vkladaji markup
   s bootstrapimi tridami (`d-none`, `alert-warning`, `list-group-item`, …).
   Ve v2 Bootstrap neni, takze bez techto pravidel byl skryty prvek videt —
   na registraci se pod adresou vzdy ukazovalo tlacitko „Prohodit". Nez se
   skripty prepisou, mapujeme tu jen ty tridy, ktere opravdu vkladaji.
   Zjisteno grepem `className =` v tech tech souborech. ── */
.d-none { display: none !important; }
[data-addr-check] .alert {
  display: block; margin-top: var(--gb-sp-sm);
  border-radius: var(--gb-r-sm); padding: var(--gb-sp-sm);
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs);
  background: var(--gb-warn-bg); border: 1px solid var(--gb-warn-bd); color: var(--gb-ink);
}
[data-addr-check] .btn {
  display: inline-flex; align-items: center; margin-left: var(--gb-sp-sm);
  min-height: 28px; padding-inline: var(--gb-sp-sm);
  border-radius: var(--gb-r-sm); background: var(--gb-warn-strong); color: var(--gb-ink);
  font-size: var(--gb-fs-xxs); font-weight: 600;
}
.ares-status--ok { color: var(--gb-green-2); }
.ares-status--err, .ares-status--error { color: var(--gb-err); }
.ares-results-list, .list-group { display: flex; flex-direction: column; gap: 2px; }
.ares-result-item, .list-group-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm);
  background: var(--gb-bg); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs);
}
.ares-result-item:hover, .list-group-item-action:hover { background: var(--gb-bg-4); border-color: var(--gb-line-4); }

/* -- Kroky objednavky -- */
.ck-steps { padding-block: var(--gb-sp-lg) 0; }
/* list-style musi byt tady: reset strhava odrazky jen z ol[class]/ul[class]
   a tenhle <ol> tridu nema — jinak vedle vlastniho kolecka svitilo i "1." */
.ck-steps ol { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm) var(--gb-sp-lg); list-style: none; padding: 0; }
.ck-steps__item > * {
  display: inline-flex; align-items: center; gap: var(--gb-sp-sm);
  color: var(--gb-ink-2); text-decoration: none;
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.ck-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  border: 1px solid var(--gb-line-4); background: var(--gb-bg);
  font-weight: 600; font-size: var(--gb-fs-xs);
}
.ck-steps__item.is-current > * { color: var(--gb-ink); font-weight: 600; }
.ck-steps__item.is-current .ck-steps__num { background: var(--gb-navy); border-color: var(--gb-navy); color: #fff; }
.ck-steps__item.is-done > * { color: var(--gb-green-2); }
.ck-steps__item.is-done .ck-steps__num { background: var(--gb-green-tint); border-color: var(--gb-green-tint-2); color: var(--gb-green-2); }
.ck-steps__item.is-done a:hover .ck-steps__label { text-decoration: underline; }

/* -- Kosik --
   Radek polozky je grid; haky pro JS (.order-item-img, .order-form__quantity,
   .order-item-price) nesou puvodni jmena z v1, viz komentar v sablone. */
.bk { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); }
.bk__title { font-size: var(--gb-fs-2xl); line-height: var(--gb-lh-2xl); font-weight: 600; margin-bottom: var(--gb-sp-lg); }
.bk .gb-alert, .bk__notice { margin-bottom: var(--gb-sp-md); }
.bk__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gb-sp-xl); align-items: start; }
/* Sirka stepperu = 36 + 52 + 36 px tlacitka/input + 2×1 px ramecek. Plati jen
   diky `box-sizing: border-box` a `button { border: 0; padding: 0 }` vyse —
   proto je hodnota na jednom miste a `.bk-qty__btn` / `.bk-qty input` z ni
   pocitaji zpet, ne naopak. */
.bk { --bk-qty-w: 126px; --bk-price-w: 150px; }
.bk__items {
  background: var(--gb-bg); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md); overflow: hidden;
}
.bk-item {
  display: grid;
  /* Sloupce mnozstvi a ceny musi byt PEVNE. Kazdy `.bk-item` je vlastni grid
     container (`.bk__items` je jen blok), takze `auto` track se meri jen podle
     obsahu SVEHO radku — delsi cena („25 942,50 Kc" vs „5 383 Kc") pak posune
     i stepper a radky se rozjedou. Pevne tracky jsou jedina cesta, jak je
     zarovnat bez subgridu (ten by kolidoval s vlastnim paddingem radku).
     obrazek | text | stepper | cena | kos

     Fallbacky v `var()` jsou pojistka, ne ozdoba: kdyby se promenna
     nerozresila (radek vykresleny mimo `.bk`), byla by cela deklarace
     invalid-at-computed-value-time, spadla by na `none` a radek by se slozil
     do jednoho sloupce. */
  grid-template-columns: 96px minmax(0, 1fr) var(--bk-qty-w, 126px) var(--bk-price-w, 150px) 44px;
  gap: var(--gb-sp-md);
  align-items: center;
  padding: var(--gb-sp-md);
}
.bk-item + .bk-item { border-top: 1px solid var(--gb-line-3); }
.bk-item--hook { background: var(--gb-bg-4); }
.bk-item--off { opacity: .65; }
.bk-item--fee .bk-item__img { height: 0; }   /* příprava tisku zakázky potisku (basket.php): řádek bez fotky */
.bk-item__off { grid-column: 1 / -1; margin: 0 0 var(--gb-sp-sm); }
.bk-item__img { display: block; width: 96px; height: 96px; }
.bk-item__img img, .bk-item__img picture { width: 100%; height: 100%; object-fit: contain; }
.bk-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-item__name { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; }
.bk-item__name a { text-decoration: none; }
.bk-item__name a:hover { text-decoration: underline; }
.bk-item__variant, .bk-item__code, .bk-item__avail {
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2);
}
.bk-item__variant:empty { display: none; }
.bk-item__ok { color: var(--gb-green-2); }
.bk-item__wait { color: var(--gb-err); }
.bk-item__qty-fixed { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); }
.bk-qty { display: inline-flex; align-items: center; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); overflow: hidden; }
.bk-qty__btn {
  width: 36px; height: 40px; flex: none;
  font-size: 18px; line-height: 1; color: var(--gb-ink);
  background: var(--gb-bg-4);
}
.bk-qty__btn:hover:not([disabled], [aria-disabled="true"]) { background: var(--gb-line-3); }
.bk-qty__btn:is([disabled], [aria-disabled="true"]) { opacity: .4; cursor: default; }   /* aria-disabled: zakázka potisku na mezi řekne proč (basket.php) */
.bk-qty input {
  width: 52px; height: 40px; border: 0; text-align: center;
  font-size: var(--gb-fs-xs); background: var(--gb-bg); color: var(--gb-ink);
  -moz-appearance: textfield;
}
.bk-qty input::-webkit-outer-spin-button, .bk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bk-item__price { text-align: right; white-space: nowrap; }
.bk-item__price s { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }
.bk-item__price strong { font-size: var(--gb-fs-sm); }
.bk-item__sale { color: var(--gb-promo); }
.bk-item__free { color: var(--gb-green-2); }
/* Nejsirsi radek cenove bunky neni cena, ale tenhle popisek s cenou
   („nova cena 25 942,50 Kc", v DE/NL/SV jeste delsi). Bez `normal` by dedil
   `nowrap` z `.bk-item__price` a preteklul by pevny cenovy track doleva pres
   stepper. `PriceFormatter::format()` oddeluje tisice NBSP, takze se samotne
   cislo se symbolem nerozpadne ani tady. */
.bk-item__now { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); white-space: normal; }
.bk-item__trash {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--gb-r-sm); color: var(--gb-ink-2);
}
.bk-item__trash:hover { background: var(--gb-promo-bg); color: var(--gb-promo); }

.bk-vouchers { margin-top: var(--gb-sp-md); display: flex; flex-direction: column; gap: var(--gb-sp-sm); }
.bk-vouchers li {
  display: flex; align-items: center; gap: var(--gb-sp-sm);
  padding: var(--gb-sp-sm) var(--gb-sp-md);
  background: var(--gb-green-tint); border: 1px solid var(--gb-green-tint-2);
  border-radius: var(--gb-r-sm); font-size: var(--gb-fs-xs);
}
.bk-vouchers__name { flex: 1 1 auto; min-width: 0; }
.bk-vouchers__amount { color: var(--gb-green-2); font-weight: 600; }
.bk-vouchers__del { color: var(--gb-ink-2); }
.bk-vouchers__del:hover { color: var(--gb-err); }

.bk-voucher {
  margin-top: var(--gb-sp-lg); padding: var(--gb-sp-md);
  background: var(--gb-bg-4); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md);
}
.bk-voucher label { display: block; margin-bottom: var(--gb-sp-sm); font-size: var(--gb-fs-xs); font-weight: 600; }
.bk-voucher__row { display: flex; gap: var(--gb-sp-sm); }
.bk-voucher__row input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--gb-sp-md);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  background: var(--gb-bg); color: var(--gb-ink); font-size: var(--gb-fs-input);
}
.bk-voucher__msg:empty { display: none; }
.bk-voucher__msg { margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); }

.bk__side { position: sticky; top: var(--gb-sp-md); }
.bk-sum {
  background: var(--gb-bg); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm);
  padding: var(--gb-sp-lg);
}
.bk-sum__title { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; margin-bottom: var(--gb-sp-md); }
.bk-sum__row { display: flex; justify-content: space-between; gap: var(--gb-sp-md); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.bk-sum__row + .bk-sum__row { margin-top: 6px; }
.bk-sum__minus, .bk-sum__free { color: var(--gb-green-2); }
.bk-sum__ship {
  display: flex; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm);
  padding: var(--gb-sp-sm); border-radius: var(--gb-r-sm);
  background: var(--gb-warn-bg); border: 1px solid var(--gb-warn-bd);
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs);
}
.bk-sum__ship .ico { flex: none; margin-top: 1px; color: var(--gb-warn); }
.bk-sum__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--gb-sp-md);
  margin-top: var(--gb-sp-md); padding-top: var(--gb-sp-md);
  border-top: 1px solid var(--gb-line-3);
  font-size: var(--gb-fs-sm); font-weight: 600;
}
.bk-sum__total strong { font-size: var(--gb-fs-lg); }
.bk-sum__cta { width: 100%; margin-top: var(--gb-sp-md); }
.bk-sum__note, .bk-sum__vat {
  display: flex; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md);
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2);
}
.bk-sum__note .ico { flex: none; margin-top: 1px; color: var(--gb-green); }
.bk__back { margin-top: var(--gb-sp-md); text-align: center; }
.bk__back a { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-ink-2); font-size: var(--gb-fs-xs); text-decoration: none; }
.bk__back a:hover { text-decoration: underline; }

.bk__empty { text-align: center; padding-block: var(--gb-sp-2xl); }
.bk__empty-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gb-bg-4); color: var(--gb-navy-mut); margin-bottom: var(--gb-sp-md);
}
.bk__empty-mark .ico { width: 32px; height: 32px; }
.bk__empty p { color: var(--gb-ink-2); margin-bottom: var(--gb-sp-lg); }

/* Proužek „Odebráno · Vrátit zpět" po odebrání z košíku (gb.js §10, majitel 18. 10. 2026, vzor Alza;
   dřív tu byla zóna „nedávno odebrané položky"). Dole uprostřed nad spodními lištami (--gb-dock,
   gb.js §8), v bočním panelu (`--in`) nad jeho patičkou. Proužek dole doběhne zprava doleva za dobu
   z JS (animation-duration); najetí myší nebo fokus ho zastaví (`is-paused`). */
.gb-undo {
  position: fixed; left: 50%; bottom: calc(var(--gb-dock, 0px) + 16px); z-index: calc(var(--gb-z-modal) + 2);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--gb-sp-sm);
  width: max-content; max-width: min(520px, calc(100vw - 32px)); overflow: hidden;
  padding: 6px 6px 6px 18px; border-radius: var(--gb-r-md);
  background: var(--gb-navy); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  font-size: var(--gb-fs-xs); line-height: 1.3;
  animation: gb-undo-in .2s ease;
}
.gb-undo--in { position: absolute; left: 16px; right: 16px; width: auto; max-width: none; transform: none; animation-name: gb-undo-up; }
.gb-undo__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gb-undo__btn, .gb-undo__x { flex: none; min-height: 44px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.gb-undo__btn { padding: 0 16px; border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--gb-r-pill); font: 700 var(--gb-fs-xs)/1 var(--gb-font); }
.gb-undo__x { display: inline-flex; align-items: center; justify-content: center; width: 44px; border-radius: 50%; }
.gb-undo__btn:hover, .gb-undo__x:hover { background: rgba(255, 255, 255, .14); }
.gb-undo__btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.gb-undo__x .ico { width: 16px; height: 16px; }
.gb-undo :focus-visible, .v3-side .gb-undo :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gb-undo__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .85); transform-origin: left center; animation: gb-undo-bar linear forwards; }
.gb-undo.is-paused .gb-undo__bar { animation-play-state: paused; }
@keyframes gb-undo-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes gb-undo-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes gb-undo-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gb-undo, .gb-undo--in { animation: none; } }
body.v3 .gb-undo { background: var(--v3-navy); }

/* Toast vklada kosikovy skript (trida z v1). */
.beta-basket-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: var(--gb-z-modal);
  background: var(--gb-navy); color: #fff;
  border-radius: var(--gb-r-pill); padding: 10px var(--gb-sp-lg);
  font-size: var(--gb-fs-xs); box-shadow: var(--gb-shadow-drop);
}

/* Hook radek („x 2" misto stepperu) ma sedet uprostred stejneho tracku jako
   stepper, jinak vypada rozjete i po zarovnani sloupcu. Jen desktop grid —
   pod 700 px je radek flex a `order` si rozlozeni ridi sam. */
@media (min-width: 700px) {
  .bk-item__qty { display: flex; justify-content: center; }
}
/* Nejtesnejsi pasmo je TESNE NAD 1099 px: postranni souhrn (380 px) tam jeste
   je, takze na `.bk-item__info` zbyva nejmin mista. Pevne tracky se v nem
   zuzi, aby se nazev produktu nelamal do peti radku. */
@media (min-width: 1100px) and (max-width: 1299px) {
  .bk { --bk-price-w: 130px; }
  .bk-item { grid-template-columns: 80px minmax(0, 1fr) var(--bk-qty-w, 126px) var(--bk-price-w, 130px) 44px; }
  .bk-item__img { width: 80px; height: 80px; }
}
@media (max-width: 1099px) {
  /* `minmax(0, 1fr)`, ne holy `1fr`: ten je `minmax(auto, 1fr)` a min-content
     radku po zavedeni pevnych tracku naroste — stejna past jako u `.pd__grid`. */
  .bk__grid { grid-template-columns: minmax(0, 1fr); }
  .bk__side { position: static; }
}
@media (max-width: 699px) {
  /* Na uzkem displeji misto mrizky flex se zalomenim: prvni radek
     [obrazek][nazev][kos], druhy [mnozstvi] ..... [cena vpravo].
     Mrizka tu nefungovala — cena skoncila ve 44px sloupci kose a
     `.bk__items{overflow:hidden}` ji uriznul. */
  .bk-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gb-sp-sm) var(--gb-sp-md); }
  .bk-item__img { width: 72px; height: 72px; flex: none; }
  .bk-item__info { flex: 1 1 140px; }
  .bk-item__del { flex: none; order: 3; }
  .bk-item__qty { order: 4; flex: none; }
  .bk-item__price { order: 5; flex: 1 1 auto; text-align: right; align-self: center; }
  .bk-item__off { order: -1; flex-basis: 100%; }
  .bk__title { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); }
  .bk-voucher__row { flex-direction: column; }
}

/* ── Detail produktu ── */
.pd { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); }
.pd__grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: var(--gb-sp-xl); align-items: start; }
@media (max-width: 1099px) { .pd__grid { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--gb-sp-lg); } }
/* `minmax(0, 1fr)`, ne holé `1fr`. Holé `1fr` je `minmax(auto, 1fr)` a to
   se u tohohle gridu nesmrsklo pod obsah: při 375 px vyšla dráha na
   360,8 px v kontejneru širokém 330, takže galerie i nákupní sloupec
   přetekly a celý detail produktu šel posunout o 16 px do strany
   (změřeno 1. 9. 2026; při 390 px z toho zbýval 1 px, proto to dřív
   proklouzlo). Obě širší varianty výš `minmax(0, …)` mají — chybělo to
   jen tady. Zbylých 29 holých `1fr` v souboru je v pořádku, změřeno
   detektorem „součet drah > vnitřní šířka" na 14 stránkách při 375 px. */
@media (max-width: 899px) { .pd__grid { grid-template-columns: minmax(0, 1fr); } }

/* Štítky (SLEVA, NOVINKA, …) */
.gb-badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--gb-r-sm);
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); font-weight: 600;
  background: var(--gb-promo-bg); color: var(--gb-promo);
}
.gb-badge--sale { background: var(--gb-promo-bg); color: var(--gb-promo); }
.gb-badge--new { background: var(--gb-info-bg); color: var(--gb-info); }
.gb-badge--ship { background: var(--gb-green-tint); color: var(--gb-green-2); }
.gb-badge--top { background: var(--gb-warn-bg); color: var(--gb-warn); }
/* Použité / rozbalené zboží (ProductBadges tone `used`, UsedGoods). Teplá
   jantarová, ať se neplete se slevou (promo) ani s Top (warn). */
.gb-badge--used { background: #f7e7d4; color: #8a4b0f; }
/* Box „Stav zboží" na detailu použité karty + odkaz „Nový kus za…" / „Máme i použitý kus". */
.pd-used { border: 1px solid #ecd3b6; background: #fdf6ee; border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; margin: 4px 0 10px; }
.pd-used__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.pd-used__note { white-space: pre-line; color: var(--gb-ink); }
.pd-used__meta { color: var(--gb-ink-2); font-size: .9em; }
.pd-used__link { font-weight: 600; }
.pd-used--offer { background: var(--gb-green-tint); border-color: var(--gb-green-tint-2); }
.pd-used--offer ul { margin: 0; padding-left: 1.1em; }
.pd-gallery { position: relative; }
.pd-gallery__badges { position: absolute; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; gap: 5px; }

/* Rámeček galerie je čtverec; fotka se do něj VEJDE CELÁ (object-fit z global
   pravidla výš). Explicitní height:100% přebíjí inline aspect-ratio z
   Picture::pro(), takže vysoké i široké fotky drží svůj poměr stran. */
.pd-gallery__main {
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md);
  background: #fff; padding: var(--gb-sp-lg);
  aspect-ratio: 1 / 1;
}
.pd-gallery__main picture { display: block; width: 100%; height: 100%; }
.pd-gallery__main img { width: 100%; height: 100%; }
.pd-gallery__thumbs { display: flex; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); flex-wrap: wrap; }
.pd-gallery__thumbs button {
  width: 70px; height: 70px; padding: 4px;
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff;
}
.pd-gallery__thumbs button[aria-current="true"] { border-color: var(--gb-navy); }
.pd-gallery__thumbs img { width: 100%; height: 100%; }
/* Zvětšení fotek (gb.js §7): fotka je tlačítko, které otevře celou obrazovku;
   lupa je vrstva přes rámeček se zvětšenou fotkou v pozadí. `pan-y` nechá
   stránku rolovat svisle a vodorovné tažení pustí k listování. */
.pd-gallery__main { position: relative; overflow: hidden; touch-action: pan-y; }
.pd-gallery__open { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.pd-gallery__lens {
  position: absolute; inset: 0; pointer-events: none;
  background: #fff no-repeat 50% 50%;
}

/* ── Fotky přes celou obrazovku ──
   Bílé pozadí jako produktové fotky, ať fotka nemá rámeček. Vrstva leží nad
   modaly; fotka je v rámu vycentrovaná absolutně, aby se vešla celá při
   jakémkoli poměru stran. */
.gb-lightbox {
  position: fixed; inset: 0; z-index: calc(var(--gb-z-modal) + 1);
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center;
  gap: var(--gb-sp-sm); padding: var(--gb-sp-md);
  background: #fff; color: var(--gb-ink);
}
.gb-lightbox__stage {
  position: relative; width: 100%; min-height: 0; margin: 0;
  touch-action: pan-y pinch-zoom; cursor: zoom-out;
}
.gb-lightbox__stage img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  cursor: default; user-select: none;
}
.gb-lightbox__close, .gb-lightbox__nav {
  position: absolute; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gb-bg-4); color: var(--gb-navy);
}
.gb-lightbox__close .ico, .gb-lightbox__nav .ico { width: 28px; height: 28px; }
.gb-lightbox__close:hover, .gb-lightbox__nav:hover { background: var(--gb-navy); color: #fff; }
.gb-lightbox__close { top: var(--gb-sp-md); right: var(--gb-sp-md); }
.gb-lightbox__nav { top: 50%; transform: translateY(-50%); }
.gb-lightbox__nav--prev { left: var(--gb-sp-md); }
.gb-lightbox__nav--next { right: var(--gb-sp-md); }
.gb-lightbox__count { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); }
.gb-lightbox__thumbs { display: flex; gap: var(--gb-sp-sm); max-width: 100%; overflow-x: auto; }
.gb-lightbox__thumbs button {
  flex: none; width: 64px; height: 64px; padding: 4px;
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff;
}
.gb-lightbox__thumbs button[aria-current="true"] { border-color: var(--gb-navy); }
.gb-lightbox__thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* Nákupní sloupec — krémový panel (Figma: surface/basics/quaternary) */
.pd-buy {
  background: var(--gb-bg-4); border-radius: var(--gb-r-md);
  padding: var(--gb-sp-lg);
}
.pd-buy__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gb-sp-md); }
/* Název se smí zúžit a zalomit; bez `min-width: 0` drží šířku nejdelšího slova
   a vytlačí kód s EANem (flex: none) ven z panelu. */
.pd-buy__top > :first-child { min-width: 0; }
.pd-buy h1 { overflow-wrap: break-word; }
.pd-buy__brand { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); }
.pd-buy__code { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-mut-inv); text-align: right; flex: none; }
.pd-buy h1 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; margin-top: 2px; }
.pd-buy__lead { margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); }
.pd-buy__lead p { margin: 0 0 var(--gb-sp-xs); }

/* Varianty (Figma „Velikost"): řada přepínačů, nedostupné přeškrtnuté */
.pd-var { margin-top: var(--gb-sp-lg); }
.pd-var__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm); margin-bottom: var(--gb-sp-xs); }
.pd-var__head strong { font-size: var(--gb-fs-xs); font-weight: 600; }
.pd-var__head a { font-size: var(--gb-fs-xs); color: var(--gb-navy); }
.pd-var__opts { display: flex; flex-wrap: wrap; gap: var(--gb-sp-xs); }
.pd-var__opt {
  min-width: 60px; min-height: 44px; padding: 0 var(--gb-sp-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.pd-var__opt:hover { border-color: var(--gb-navy-mut); }
.pd-var__opt[aria-pressed="true"] { border-color: var(--gb-green); border-width: 2px; color: var(--gb-green-2); font-weight: 600; }
/* Dostupnost VE VĚTVI — stejný signál jako ve v1 (`#productVariants .in_stock`
   v dist/css/beta-custom.css:386): hodnota, pod kterou existuje aspoň jedna
   varianta skladem, má u dolní hrany zelený proužek. Bez toho zákazník
   nepozná, která velikost je k odeslání hned, a musí je proklikat.
   `overflow:hidden` + zděděné zaoblení, aby proužek nevyčníval z rohů. */
.pd-var__opt { position: relative; overflow: hidden; }
.pd-var__opt[data-state="ok"]::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: var(--gb-green);
  border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
}
/* `soldout` = hodnotu nemáme na skladě, ale objednat ji jde → jen ztmavit.
   Přeškrtnutí si drží `unavailable` (kombinace, která neexistuje). */
.pd-var__opt[data-state="soldout"] { color: var(--gb-ink-2); }
.pd-var__opt[data-state="unavailable"] { color: var(--gb-mut-inv); text-decoration: line-through; cursor: not-allowed; opacity: .6; }

/* Barevné varianty = kruhové náhledy */
.pd-colors { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); }
.pd-colors a { width: 80px; height: 80px; padding: 4px; background: #fff; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); }
.pd-colors a img { width: 100%; height: 100%; }
.pd-colors a[aria-current="true"] { border-color: var(--gb-green); border-width: 2px; padding: 3px; }

/* Dostupnosti mají jediný blok pravidel — hledej „Detail produktu: dostupnosti" níž. */

.pd-price {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--gb-sp-md);
  margin-top: var(--gb-sp-md); padding-top: var(--gb-sp-md);
  border-top: 1px solid var(--gb-line-3);
}
/* Cena je červená JEN když je zlevněná (Figma: „13 180 Kč" pod odznakem
   SLEVA). Do 1. 9. 2026 byla promo barva natvrdo, takže i produkt bez slevy
   křičel akční cenou. */
.pd-price__now { display: block; font-size: var(--gb-fs-2xl); line-height: 1.2; font-weight: 600; color: var(--gb-ink); }
.pd-price__now.is-sale { color: var(--gb-promo); }
.pd-price__old { font-size: var(--gb-fs-sm); color: var(--gb-ink-2); text-decoration: line-through; }
.pd-price__row { display: flex; align-items: center; gap: var(--gb-sp-sm); }
.pd-price__vat { font-size: var(--gb-fs-xxs); color: var(--gb-mut-inv); }
.pd-price__aside { display: flex; align-items: center; gap: var(--gb-sp-xs); }
.pd-price__aside a { font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy); text-underline-offset: 3px; }

.pd-cta { display: flex; align-items: center; gap: var(--gb-sp-md); margin-top: var(--gb-sp-md); }
.pd-qty { display: flex; align-items: center; gap: var(--gb-sp-xs); flex: none; }
.pd-qty button {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gb-line-4); border-radius: 50%; background: #fff;
  font-size: var(--gb-fs-lg); line-height: 1; color: var(--gb-ink);
}
.pd-qty button:hover { border-color: var(--gb-navy-mut); }
.pd-qty input {
  width: 44px; border: 0; background: none; text-align: center;
  font-weight: 600; -moz-appearance: textfield;
}
.pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Stepper uvnitř formuláře — stejná výška jako sousední input (44 px). */
.pd-qty--sm button { width: 40px; height: 44px; }
.pd-qty--sm input { width: 56px; height: 44px; }
.pd-cta .gb-btn--cta { flex: 1; min-height: 56px; font-size: var(--gb-fs-sm); }
/* Držadla množství jsou v nákupním řádku stejně vysoká jako CTA — 56 px
   (doměřeno na Figma exportu detailu 1. 9. 2026: kruh 1458–1513 px, zelené
   tlačítko 295×56). Jinde (modal garance) zůstává stepper menší. */
.pd-cta .pd-qty button { width: 56px; height: 56px; }
.pd-cta .pd-qty input { width: 40px; }
.pd-cta .gb-btn--cta[aria-disabled="true"] { background: var(--gb-navy-mut); }
/* Úzký telefon: vedle 56px držadel se „In den Warenkorb" nevešlo a text přetékal
   z tlačítka (nález majitele 12. 10. 2026, 375 px). Držadla mají 44 px — pořád
   plný dotykový cíl — a tlačítko je bez ikony košíku, ať se vejde na jeden řádek.
   Když se popisek nevejde ani tak (delší jazyk, 320 px), tlačítko spadne na
   vlastní řádek přes celou šířku, místo aby se ořízlo. */
@media (max-width: 479px) {
  .pd-cta { flex-wrap: wrap; gap: 8px; }
  .pd-cta .pd-qty { gap: 0; }
  .pd-cta .pd-qty button { width: 44px; height: 44px; }
  .pd-cta .pd-qty input { width: 28px; padding: 0; }
  .pd-cta .gb-btn--cta { min-width: max-content; padding-inline: var(--gb-sp-md); }
  .pd-cta .gb-btn--cta .ico { display: none; }
}

.pd-stock { display: flex; align-items: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); font-weight: 600; font-size: var(--gb-fs-xs); }
.pd-stock::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--gb-line-4); }
.pd-stock--available::before { background: var(--gb-green); }
.pd-stock--available { color: var(--gb-green-2); }
.pd-stock--onway::before { background: var(--gb-warn-strong); }
.pd-stock--unavailable::before { background: var(--gb-err); }
.pd-stock__note, .pd-stock__low { font-weight: 400; color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); }
.pd-stock__low { color: var(--gb-promo); }

.pd-delivery { margin-top: var(--gb-sp-md); border-top: 1px dashed var(--gb-line-4); padding-top: var(--gb-sp-md); }
.pd-delivery li { display: flex; align-items: center; gap: var(--gb-sp-sm); padding-block: 3px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.pd-delivery .ico { width: 18px; height: 18px; color: var(--gb-green); }

/* Karta odborníka */
/* Zalomit smí: avatar 64 + text + tlačítko „Položit dotaz" 141 se do
   nákupního sloupce při 320 px nevejde (235 px k dispozici) a bez
   zalomení tlačítko vyjelo 29 px za okraj obrazovky. */
.pd-expert {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--gb-sp-md);
  margin-top: var(--gb-sp-md); padding-top: var(--gb-sp-md);
  border-top: 1px dashed var(--gb-line-4);
}
.pd-expert img { width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover; }
.pd-expert strong { display: block; font-size: var(--gb-fs-xs); font-weight: 600; }
.pd-expert p { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }
.pd-expert .gb-btn { margin-left: auto; flex: none; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill); background: #fff; }

/* Kotvicí lišta */
.pd-anchors {
  position: sticky; top: 0; z-index: 40;
  background: var(--gb-bg-4); border-block: 1px solid var(--gb-line-3);
}
.pd-anchors__in { display: flex; align-items: center; gap: var(--gb-sp-lg); min-height: 70px; }
.pd-anchors__prod { display: flex; align-items: center; gap: var(--gb-sp-sm); min-width: 0; }
.pd-anchors__prod img { width: 44px; height: 44px; flex: none; }
.pd-anchors__prod span { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.pd-anchors__prod strong { font-size: var(--gb-fs-xs); font-weight: 600; }
.pd-anchors nav { display: flex; gap: var(--gb-sp-lg); margin-left: auto; flex-wrap: wrap; }
.pd-anchors nav a { font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-ink); text-decoration: none; }
.pd-anchors nav a:hover, .pd-anchors nav a.is-active { color: var(--gb-green-2); }
@media (max-width: 899px) {
  .pd-anchors__prod { display: none; }
  .pd-anchors nav { margin: 0; gap: var(--gb-sp-md); overflow-x: auto; }
  .pd-anchors__in { min-height: 52px; }
}

/* Tabulka parametrů */
.pd-params { overflow-x: auto; }
.pd-params table { width: 100%; border-collapse: collapse; font-size: var(--gb-fs-xs); }
.pd-params th, .pd-params td { padding: var(--gb-sp-md); text-align: left; border-bottom: 1px solid var(--gb-line-3); }
.pd-params tbody tr:nth-child(odd) { background: var(--gb-bg-4); }
.pd-params th { font-weight: 600; white-space: nowrap; }

/* Recenze / poradna */
.pd-review, .pd-qa {
  background: var(--gb-bg-4); border-radius: var(--gb-r-md);
  padding: var(--gb-sp-lg); margin-bottom: var(--gb-sp-md);
}
.pd-review__head, .pd-qa__head { display: flex; align-items: baseline; gap: var(--gb-sp-sm); flex-wrap: wrap; }
.pd-review__head strong, .pd-qa__head strong { font-size: var(--gb-fs-xs); font-weight: 600; }
.pd-review__date, .pd-qa__date { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }
.pd-review__verified { margin-left: auto; font-size: var(--gb-fs-xxs); color: var(--gb-green-2); text-transform: uppercase; font-weight: 600; }
.pd-qa__body { margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.pd-qa--reply { background: var(--gb-green-tint); margin-left: var(--gb-sp-xl); }
.pd-qa__ask {
  background: var(--gb-navy); color: #fff; border-radius: var(--gb-r-md);
  padding: var(--gb-sp-lg); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.pd-qa__ask .gb-btn { margin-top: var(--gb-sp-md); background: #fff; color: var(--gb-navy); border-radius: var(--gb-r-pill); }
.pd-qa__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gb-sp-xl); align-items: start; }
@media (max-width: 899px) { .pd-qa__grid { grid-template-columns: 1fr; gap: var(--gb-sp-lg); } }

/* Značkový panel */
.pd-brand {
  background: var(--gb-green); color: #fff;
  border-radius: var(--gb-r-md); padding: var(--gb-sp-xl);
}
.pd-brand__in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gb-sp-xl); align-items: center; }
.pd-brand h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; }
.pd-brand__logo { width: 96px; height: 96px; background: #fff; border-radius: var(--gb-r-sm); padding: 6px; margin-bottom: var(--gb-sp-sm); }
.pd-brand .gb-btn { background: #fff; color: var(--gb-navy); border-radius: var(--gb-r-pill); margin-top: var(--gb-sp-md); }
/* `1fr` = `minmax(auto, 1fr)`, takže se stopa nesmrskne pod min-content
   obsahu. Pilulka „Všechny produkty značky X" má z .gb-btn `nowrap`, takže
   u delších názvů roztáhla stopu na 364 px a na 390px displeji vyjela ven —
   a protože v2 ŽÁDNÉ `body{overflow-x:hidden}` nemá (dřívější znění téhle
   poznámky lhalo), udělalo to vodorovný scrollbar přes celou stránku. Proto
   minmax(0,1fr) a na mobilu necháme text pilulky zalomit. */
@media (max-width: 899px) {
  .pd-brand__in { grid-template-columns: minmax(0, 1fr); gap: var(--gb-sp-md); }
  .pd-brand .gb-btn { white-space: normal; height: auto; padding-block: var(--gb-sp-sm); }
}

/* Mobilní nákupní lišta */
.pd-mobilebar { display: none; }
@media (max-width: 899px) {
  .pd-mobilebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; gap: var(--gb-sp-md);
    background: #fff; border-top: 1px solid var(--gb-line-3);
    padding: var(--gb-sp-sm) var(--gb-sp-md);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
  }
  .pd-mobilebar strong { font-size: var(--gb-fs-sm); font-weight: 600; }
  .pd-mobilebar .gb-btn { margin-left: auto; }
  /* Rezervu pod lištou nese patička (sekce „Patička", --gb-dock z gb.js §8);
     76 px platí jen bez skriptu. */
  body.has-mobilebar .gb-footer { padding-bottom: var(--gb-dock, 76px); }
}

/* ── Přistávací sekce „Akce, slevy a výprodej" ────────────────────────── */
.sp-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); }
.sp-promo {
  display: grid; gap: 2px; padding: var(--gb-sp-md);
  border: 1px solid var(--gb-promo); border-radius: var(--gb-r-sm);
  background: var(--gb-promo-bg); font-size: var(--gb-fs-xs);
}
.sp-promo strong { color: var(--gb-promo); }
.sp-promo__code b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sp-promo__terms { font-size: var(--gb-fs-xxs); }
.sp-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); }
.sp-picks a {
  display: grid; gap: 2px; padding: var(--gb-sp-md);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  background: #fff; color: inherit; text-decoration: none; font-size: var(--gb-fs-xs);
}
.sp-picks a:hover { border-color: var(--gb-navy-mut); background: var(--gb-bg-4); }
.sp-picks__eyebrow { font-size: var(--gb-fs-xxs); text-transform: uppercase; letter-spacing: .04em; color: var(--gb-mut-inv); }
.sp-picks__cnt { font-size: var(--gb-fs-xxs); color: var(--gb-green-2); font-weight: 600; }
.sp-rabatt { margin-top: var(--gb-sp-md); }
.sp-seo { padding-bottom: var(--gb-sp-2xl); font-size: var(--gb-fs-xxs); }

/* ── Děkovná stránka ─────────────────────────────────────────────────── */
.ty { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); display: grid; gap: var(--gb-sp-md); }
.ty__head {
  display: grid; gap: var(--gb-sp-xs); justify-items: center; text-align: center;
  padding: var(--gb-sp-xl) var(--gb-sp-lg);
  border: 1px solid var(--gb-green-tint-2); border-radius: var(--gb-r-md);
  background: var(--gb-green-tint);
}
.ty__mark {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gb-green); display: grid; place-items: center;
}
.ty__mark .ico { width: 32px; height: 32px; color: #fff; }
.ty__head h1 { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; }
.ty__ref { font-size: var(--gb-fs-sm); }
.ty__pay { display: grid; gap: var(--gb-sp-xs); justify-items: center; margin-top: var(--gb-sp-md); }
.ty__back { text-align: center; }

/* ── Zákaznická sekce „Můj účet" ──────────────────────────────────────────
   Návrh v2 je nový, ne port v1 (Figma zákaznickou sekci nemá): menu vlevo,
   obsah vpravo, jedna tabulka pro všechny seznamy. Ve v1 měl každý seznam
   vlastní tabulku a přehled byl druhé menu vedle postranního. */
.ac { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--gb-sp-xl); align-items: start; padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); }
.ac--solo { grid-template-columns: minmax(0, 1fr); }
.ac__main { min-width: 0; display: grid; gap: var(--gb-sp-md); }
.ac__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; }
.ac__head h1 { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; }
@media (max-width: 899px) {
  .ac { grid-template-columns: 1fr; gap: var(--gb-sp-md); }
}

/* ── Menu ── */
.ac-nav { position: sticky; top: var(--gb-sp-md); display: grid; gap: 2px; }
.ac-nav__title {
  margin-top: var(--gb-sp-md); padding: 0 var(--gb-sp-sm);
  font-size: var(--gb-fs-xxs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--gb-ink-2);   /* --gb-mut-inv mělo na bílé 2,27 : 1 (kontrola kontrastu 24. 9. 2026) */
}
.ac-nav__item {
  display: flex; align-items: center; gap: var(--gb-sp-sm);
  padding: var(--gb-sp-sm) var(--gb-sp-md);
  border-radius: var(--gb-r-sm);
  font-size: var(--gb-fs-xs); color: var(--gb-ink); text-decoration: none;
}
.ac-nav__item .ico { width: 20px; height: 20px; flex: none; color: var(--gb-ink-2); }
.ac-nav__item:hover { background: var(--gb-bg-4); }
.ac-nav__item.is-active { background: var(--gb-navy); color: #fff; font-weight: 600; }
.ac-nav__item.is-active .ico { color: #fff; }
.ac-nav__item--out { color: var(--gb-ink-2); }
.ac-nav__ai {
  margin-left: auto; padding: 1px 6px; border-radius: var(--gb-r-pill);
  background: var(--gb-green-2); color: #fff; font-size: 10px; font-weight: 600;
}
@media (max-width: 899px) {
  /* Na mobilu je menu vodorovný pás nad obsahem — svislý seznam by zabral
     celou obrazovku dřív, než by zákazník uviděl, kvůli čemu přišel. */
  .ac-nav { position: static; display: flex; gap: var(--gb-sp-xs); overflow-x: auto; padding-bottom: var(--gb-sp-xs); }
  .ac-nav__title { display: none; }
  .ac-nav__item { flex: none; white-space: nowrap; border: 1px solid var(--gb-line-3); }   /* bez flex: none ho Safari na iPhonu zúžil o ikonu (svg s max-width: 100 % do nejmenší šířky nepočítá) a text přetekl */
  .ac-nav__item--out { display: none; }   /* odhlášení je v řádku .ac-me nad pásem */
}
/* Kdo je přihlášen + odhlášení nad pásem menu — jen na mobilu; na počítači to
   nese rozbalovací účet v hlavičce a konec menu. */
.ac-me { display: none; }
@media (max-width: 899px) {
  .ac-me {
    display: flex; align-items: center; gap: var(--gb-sp-sm);
    padding: var(--gb-sp-xs) var(--gb-sp-xs) var(--gb-sp-xs) var(--gb-sp-md);
    border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff;
  }
  .ac-me > .ico { color: var(--gb-navy); }
  .ac-me__who { flex: 1 1 auto; min-width: 0; display: grid; font-size: var(--gb-fs-xs); line-height: 1.3; }
  .ac-me__who strong, .ac-me__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-me__who span { color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); }
  .ac-me__out {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 var(--gb-sp-sm); border-radius: var(--gb-r-sm);
    font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy); text-decoration: none;
  }
  .ac-me__out .ico { width: 20px; height: 20px; }
}

/* ── Dlaždice přehledu ──
   auto-fit: přehled má 4 dlaždice, s rezervacemi simulátoru 5 — pevné 4 sloupce
   by pátou poslaly samotnou na druhý řádek. */
.ac-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gb-sp-md); }
.ac-tiles--sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899px) { .ac-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .ac-tiles, .ac-tiles--sum { grid-template-columns: 1fr; } }
.ac-tile {
  display: grid; gap: 2px; padding: var(--gb-sp-md);
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md);
  background: #fff; color: inherit; text-decoration: none;
}
a.ac-tile:hover { border-color: var(--gb-navy-mut); background: var(--gb-bg-4); }
.ac-tile .ico { width: 22px; height: 22px; color: var(--gb-navy); }
.ac-tile__n { font-size: var(--gb-fs-2xl); line-height: 1.1; font-weight: 600; }
.ac-tile__label { font-size: var(--gb-fs-xs); color: var(--gb-ink-2); }
.ac-tile__note { font-size: var(--gb-fs-xs); font-weight: 600; }
.ac-tile__warn { font-size: var(--gb-fs-xxs); color: var(--gb-err); }
.ac-tile.is-warn { border-color: var(--gb-warn-bd); background: var(--gb-warn-bg); }

/* ── Karty obsahu ── */
.ac-box {
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md);
  background: #fff; padding: var(--gb-sp-lg);
  display: grid; gap: var(--gb-sp-md);
}
.ac-box > h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }
.ac-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); }
.ac-box__head h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }
.ac-box__head a { font-size: var(--gb-fs-xs); color: var(--gb-navy); }

/* ── Filtr ── */
.ac-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gb-sp-md); }
.ac-filter__toggle { display: none; }
.ac-filter__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gb-sp-md); flex: 1; }
.ac-filter .gb-field { min-width: 150px; }
.ac-filter__acts { display: flex; align-items: center; gap: var(--gb-sp-sm); }
.ac-filter__clear { font-size: var(--gb-fs-xs); color: var(--gb-err); }
.ac-filter__count { font-size: var(--gb-fs-xs); color: var(--gb-ink-2); margin-left: auto; }
@media (max-width: 899px) {
  .ac-filter__toggle {
    display: inline-flex; align-items: center; gap: var(--gb-sp-sm);
    min-height: 40px; padding: 0 var(--gb-sp-md);
    border: 1px solid var(--gb-navy); border-radius: var(--gb-r-pill);
    font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy);
  }
  .ac-filter__toggle .ico { width: 18px; height: 18px; }
  .ac-filter__fields { width: 100%; }
  .ac-filter__fields[data-collapsed] { display: none; }
}

/* ── Tabulka dokladů ──
   Na mobilu se řádek překlopí do karty (popisky z `data-th`), takže se
   nikam neroluje do strany. Sloupce `data-hide="mobile"` tam zmizí. */
.ac-table table { width: 100%; border-collapse: collapse; font-size: var(--gb-fs-xs); }
.ac-table th, .ac-table td { padding: var(--gb-sp-sm) var(--gb-sp-md); text-align: left; vertical-align: middle; }
.ac-table thead th { border-bottom: 1px solid var(--gb-line-4); color: var(--gb-ink-2); font-weight: 400; white-space: nowrap; }
.ac-table tbody tr { border-bottom: 1px solid var(--gb-line-3); }
.ac-table tbody tr:hover { background: var(--gb-bg-4); }
.ac-table .is-right { text-align: right; }
.ac-table__act a { display: inline-flex; padding: 4px; color: var(--gb-ink-2); }
.ac-table__act .ico { width: 18px; height: 18px; }
.ac-table__expand > td { background: var(--gb-bg-4); padding: var(--gb-sp-md); }
.ac-table__expand:hover > td { background: var(--gb-bg-4); }
/* Řazení kliknutím na záhlaví (`components/account-table.php`, server řadí
   celý seznam, ne jen stránku). Šipka jen u aktivního sloupce a při najetí. */
.ac-table thead a.ac-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; white-space: nowrap; }
.ac-table thead a.ac-sort:hover, .ac-table thead a.ac-sort:focus-visible { color: var(--gb-ink); text-decoration: underline; }
.ac-sort__ico { width: 14px; height: 14px; visibility: hidden; }
.ac-sort:hover .ac-sort__ico, .ac-sort:focus-visible .ac-sort__ico, .ac-sort.is-active .ac-sort__ico { visibility: visible; }
.ac-sort.is-active { color: var(--gb-ink); font-weight: 600; }
.ac-sort.is-asc .ac-sort__ico { transform: rotate(180deg); }
.ac-table th.is-right .ac-sort { flex-direction: row-reverse; }
/* Logo dopravce místo názvu (`fb_carrier()`); název zůstává v alt/title. */
.ac-carrier { display: inline-flex; align-items: center; vertical-align: middle; }
.ac-carrier img { display: block; height: 22px; width: auto; max-width: 84px; object-fit: contain; }
.ac-subtable { width: 100%; border-collapse: collapse; font-size: var(--gb-fs-xxs); }
.ac-subtable th, .ac-subtable td { padding: 6px var(--gb-sp-sm); text-align: left; }
.ac-subtable thead th { color: var(--gb-ink-2); font-weight: 400; border-bottom: 1px solid var(--gb-line-4); }
.ac-subtable tbody tr + tr td { border-top: 1px solid var(--gb-line-3); }
.ac-subtable .is-right { text-align: right; }
@media (max-width: 899px) {
  .ac-table thead, .ac-subtable thead { display: none; }
  .ac-table tbody tr, .ac-subtable tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--gb-sp-sm);
    padding: var(--gb-sp-sm) 0;
  }
  /* Popisek visi vlevo, hodnota teče normálním řádkovým tokem.
     Dřív tu byl `display: flex`, jenže ve flexboxu je `<br>` samostatná
     položka nulové šířky — nezalomí. Buňka „Faktura" v /muj-ucet/platby/
     vypisuje dva doklady oddělené `<br>`; ve flexu si stouply vedle sebe
     a přetekly o 56 px (změřeno 1. 9. 2026 při 480 px: 282 v boxu 226).
     Závěsné odsazení dělá totéž zarovnání: `padding-left` odsune celý
     blok o šířku popisku, `text-indent` vrátí PRVNÍ řádek zpět na nulu,
     kam se vejde `::before`. Další řádky (i po `<br>`) tak začínají pod
     hodnotou, ne pod popiskem. */
  .ac-table td, .ac-subtable td { padding: 2px 0 2px 104px; display: block; text-indent: -104px; }
  .ac-table td::before, .ac-subtable td::before {
    content: attr(data-th) ':'; color: var(--gb-ink-2);
    display: inline-block; min-width: 96px; margin-right: var(--gb-sp-sm);
    text-indent: 0; vertical-align: top;
  }
  /* `text-indent` se dědí a u potomka s vlastním formátovacím kontextem
     (`.ac-badge` je `inline-flex`) vstoupí do výpočtu jeho shrink-to-fit
     šířky: max-content 70 px − 104 px indentu = 0, zbylo 16 px paddingu
     a text „Přeplatek" přetekl přes popisek. Reset na všechny potomky:
     u řádkových je to bez účinku, u ostatních to vrací správnou šířku. */
  .ac-table td > *, .ac-subtable td > * { text-indent: 0; }
  .ac-table td[data-hide="mobile"], .ac-table th[data-hide="mobile"] { display: none; }
  .ac-table .is-right, .ac-subtable .is-right { text-align: left; }
  .ac-table__expand > td { grid-column: 1 / -1; padding: var(--gb-sp-md); text-indent: 0; }
  .ac-table__expand > td::before { content: none; }
  /* Buňka bez `data-th` (sloupec akcí) nemá co vypsat — `attr()` vrátí
     prázdno a zbyde holá dvojtečka. */
  .ac-table td:not([data-th])::before, .ac-table td[data-th=""]::before,
  .ac-subtable td:not([data-th])::before, .ac-subtable td[data-th=""]::before { content: none; }
}

/* Na telefonu se dvousloupcová karta neuživí. Počet: 375 px − 30 px odsazení
   kontejneru = 345, na dva sloupce ~158 na buňku, minus 96 px popisku zbývá
   62 px na hodnotu — a desetimístné číslo dokladu („4592600084") potřebuje
   93 px, takže přeteklo přes sousední sloupec (`overflow: visible`, měřeno
   1. 9. 2026 na /muj-ucet/faktury/ při 390 px: 189 v boxu 158). Hranici drží
   nejdelší reálná hodnota: 96 popisek + 8 mezera + ~100 hodnota = 204 na
   buňku, tj. 450 px viewportu; pod 480 proto jeden sloupec. Nad tím se
   dvojice vejde a hustší karta je čitelnější. */
@media (max-width: 479px) {
  .ac-table tbody tr, .ac-subtable tbody tr { grid-template-columns: minmax(0, 1fr); }
}

.ac-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--gb-r-pill);
  font-size: var(--gb-fs-xxs); font-weight: 600; white-space: nowrap;
}
.ac-badge--ok { background: var(--gb-green-tint); color: var(--gb-green-2); }
.ac-badge--wait { background: var(--gb-warn-bg); color: #8a6d00; }
.ac-badge--err { background: #ffe9e6; color: var(--gb-err-ink); }
.ac-badge--off { background: var(--gb-bg-4); color: var(--gb-ink-2); }
.ac-badge--multiline { white-space: normal; overflow-wrap: anywhere; }

.ac-empty { display: grid; gap: var(--gb-sp-sm); justify-items: center; padding: var(--gb-sp-2xl) 0; color: var(--gb-ink-2); text-align: center; }
.ac-empty .ico { width: 36px; height: 36px; color: var(--gb-line-4); }

/* ── Rychlé akce na přehledu ── */
.ac-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gb-sp-md); }
@media (max-width: 899px) { .ac-quick { grid-template-columns: 1fr; } }
.ac-quick a {
  display: flex; align-items: center; gap: var(--gb-sp-md);
  padding: var(--gb-sp-md);
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm);
  color: inherit; text-decoration: none;
}
.ac-quick a:hover { border-color: var(--gb-navy-mut); background: var(--gb-bg-4); }
.ac-quick .ico { width: 24px; height: 24px; flex: none; color: var(--gb-green); }
.ac-quick span { display: grid; gap: 2px; }
.ac-quick strong { font-size: var(--gb-fs-xs); }
.ac-quick small { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }

/* Odkaz s ikonou v buňce tabulky (PDF dokladu, sledování u dopravce).
   Bez inline-flex by ikona (`svg { display: block }`) odskočila na vlastní řádek. */
.ac-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-navy); }
.ac-link .ico { width: 16px; height: 16px; flex: none; }

/* ── Detail zásilky (/muj-ucet/zasilka/{id}) ──
   Stejná pravidla má v1 v assets/pages/Css/account.css (jen jiné tokeny). */
.ac-ship__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; }
.ac-ship__carrier { display: inline-flex; align-items: center; gap: var(--gb-sp-sm); font-size: var(--gb-fs-sm); }
.ac-ship__carrier img { width: auto; height: 28px; max-width: 96px; }
.ac-ship__state { font-size: var(--gb-fs-xs); padding: 4px 12px; }
.ac-ship__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gb-sp-sm) var(--gb-sp-lg); margin: 0; }
.ac-ship__facts dt { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); font-weight: 400; }
.ac-ship__facts dd { margin: 0; font-size: var(--gb-fs-sm); font-weight: 600; }
.ac-ship__src { font-size: var(--gb-fs-xxs); }

/* Časová osa: nejnovější nahoře, aktuální stav má barevný bod podle tónu
   (ok = doručeno, err = komplikace / vrací se, wait = na cestě). */
.ac-timeline { display: grid; }
.ac-timeline__item {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 0 var(--gb-sp-md); padding-bottom: var(--gb-sp-md);
}
.ac-timeline__item:last-child { padding-bottom: 0; }
.ac-timeline__item::before {
  content: ''; position: absolute; left: 9px; top: 18px; bottom: -2px;
  width: 2px; background: var(--gb-line-4);
}
.ac-timeline__item:last-child::before { display: none; }
.ac-timeline__dot {
  position: relative; z-index: 1; width: 12px; height: 12px; margin: 6px 4px 0;
  border-radius: 50%; background: var(--gb-line-4);
}
.ac-timeline__item.is-current .ac-timeline__dot { width: 16px; height: 16px; margin: 4px 2px 0; background: var(--gb-navy); box-shadow: 0 0 0 4px var(--gb-navy-tint); }
.ac-timeline__item.is-current.is-ok .ac-timeline__dot { background: var(--gb-green); box-shadow: 0 0 0 4px var(--gb-green-tint); }
.ac-timeline__item.is-current.is-err .ac-timeline__dot { background: var(--gb-err); box-shadow: 0 0 0 4px #ffe9e6; }
.ac-timeline__body { display: grid; gap: 2px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.ac-timeline__item:not(.is-current) .ac-timeline__body strong { font-weight: 400; }
.ac-timeline__at { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); white-space: nowrap; }
@media (max-width: 479px) {
  .ac-timeline__item { grid-template-columns: 20px minmax(0, 1fr); }
  .ac-timeline__at { grid-column: 2; }
}

/* ── Detail objednávky ── */
.ac-order { display: grid; gap: var(--gb-sp-md); }
.ac-order__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-md); align-items: start; }
@media (max-width: 899px) { .ac-order__cols { grid-template-columns: 1fr; } }
.ac-order__pay { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; }
.ac-order__pays, .ac-order__parcels, .ac-order__docs { display: grid; gap: 4px; font-size: var(--gb-fs-xs); }
.ac-order__pays li { display: flex; justify-content: space-between; gap: var(--gb-sp-sm); }
.ac-order__refund { color: var(--gb-err); }
.ac-order__parcels a, .ac-order__docs a { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-navy); }
.ac-order__parcels .ico, .ac-order__docs .ico { width: 18px; height: 18px; }
/* Balík: číslo, poslední stav, „Průběh přepravy" (náš detail) a „Sledovat u dopravce". */
.ac-order__parcel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--gb-sp-md); }
.ac-order__parcel-num { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ac-order__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm);
  padding-top: var(--gb-sp-md); border-top: 1px solid var(--gb-line-4); font-size: var(--gb-fs-sm);
}
.ac-order__total strong { font-size: var(--gb-fs-xl); font-weight: 600; }
.ac-cta { flex-direction: row; display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; }
.ac-cta__acts { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; }

/* Stavová osa objednávky */
.ac-steps { display: flex; flex-wrap: wrap; gap: var(--gb-sp-lg); padding: var(--gb-sp-md) 0; }
.ac-steps__item { display: flex; align-items: center; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); color: var(--gb-mut-inv); }
.ac-steps__item.is-done { color: var(--gb-ink); }
.ac-steps__mark {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1px solid var(--gb-line-4); background: #fff;
  display: grid; place-items: center;
}
.ac-steps__item.is-done .ac-steps__mark { background: var(--gb-green); border-color: var(--gb-green); }
.ac-steps__mark .ico { width: 16px; height: 16px; color: #fff; }
.ac-steps__note { color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); }

/* ── Pokladna (kroky 2–4) ─────────────────────────────────────────────────
   Figma stránku objednávky nemá (rám „objednávka" je sada screenshotů
   dnešního webu), takže je to návrh v jazyce v2 navazující na košík:
   karty vlevo, lepivý souhrn vpravo. */
.ck { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); }
.ck__title { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; margin-bottom: var(--gb-sp-lg); }
.ck__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gb-sp-xl); align-items: start; }
.ck__main { min-width: 0; display: grid; gap: var(--gb-sp-md); }
.ck__side { position: sticky; top: var(--gb-sp-md); display: grid; gap: var(--gb-sp-md); }
@media (max-width: 1099px) {
  .ck__grid { grid-template-columns: 1fr; }
  .ck__side { position: static; }
}

.ck-box {
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md);
  background: #fff; padding: var(--gb-sp-lg);
  display: grid; gap: var(--gb-sp-md);
}
.ck-box > h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }
.ck-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); }
.ck-box__head h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }
.ck-box__head a { font-size: var(--gb-fs-xs); color: var(--gb-navy); }
.ck-box__sub { font-size: var(--gb-fs-sm); font-weight: 600; }
.ck-box--soft { background: var(--gb-bg-4); }
.ck-box--ok { background: var(--gb-green-tint); border-color: var(--gb-green-tint-2); }
/* Blikne, když zákazník klikne „Pokračovat" bez vybrané dopravy/platby. */
.ck-box.is-invalid { box-shadow: 0 0 0 3px rgba(255, 65, 44, .35); }
.ck-panel { }
/* `1fr auto` je psane pro ODHLASENOU variantu: [text][tlacitko Prihlasit]. */
.ck-login { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ck-login .ico { color: var(--gb-green); }
@media (max-width: 599px) { .ck-login { grid-template-columns: 1fr; } }
/* Prihlasena varianta ma deti v OPACNEM poradi: [ikona][text]. S `1fr auto`
   dostane 24px fajfka siroky sloupec a textovy blok se zmackne do `auto`
   u praveho okraje — vypada to jako text zarovnany doprava. Prohodit tracky.
   Kompound (0,2,0) prebije `.ck-login` (0,1,0) i uvnitr media query, takze
   banner zustane dvousloupcovy i na mobilu (ikona + text vedle sebe) — to je
   zamer, odhlasena varianta se pod 599 px dal lame pod sebe. */
.ck-box--ok.ck-login { grid-template-columns: auto minmax(0, 1fr); }

/* ── Volba dopravy / platby ── */
.ck-opts { display: grid; gap: var(--gb-sp-xs); }
.ck-opt {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 24px 64px minmax(0, 1fr) auto;
  gap: var(--gb-sp-md);
  padding: var(--gb-sp-md);
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm);
  background: #fff; cursor: pointer;
}
.ck-opt:hover { border-color: var(--gb-navy-mut); }
.ck-opt:has(input:checked) { border-color: var(--gb-green); background: var(--gb-green-tint); }
.ck-opt:has(input:focus-visible) { outline: 2px solid var(--gb-info); outline-offset: 2px; }
.ck-opt input { position: absolute; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.ck-opt__mark {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1px solid var(--gb-line-4); background: #fff;
}
.ck-opt input:checked + .ck-opt__mark {
  border-color: var(--gb-green); border-width: 6px;
}
.ck-opt__logo { width: 64px; height: 32px; object-fit: contain; }
/* `minmax(0, 1fr)` je tu nutné: samotné `min-width: 0` na gridu nestačí,
   protože implicitní dráha je `auto` a ta se nesmrskne pod min-content
   svého obsahu. Při 320 px tak „Převodem na účet Raiffeisenbank" roztáhlo
   dráhu na 113 px v buňce široké 90 a text se kreslil přes sloupec s cenou
   (změřeno 1. 9. 2026 na /objednavka/doprava). */
.ck-opt__body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ck-opt__name { font-size: var(--gb-fs-sm); font-weight: 600; }
.ck-opt__desc { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); }
.ck-opt__desc p { margin: 0; }
.ck-opt__price { text-align: right; font-size: var(--gb-fs-sm); font-weight: 600; white-space: nowrap; }
.ck-opt__price small { display: block; font-size: var(--gb-fs-xxs); font-weight: 400; color: var(--gb-ink-2); }
.ck-opt__limit { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-err); }
/* Platba nad stropem (dobírka/GoPay) — vidět, ale nevybíratelná. */
.ck-opt.is-off { opacity: .55; cursor: not-allowed; }
.ck-opt.is-off:has(input:checked) { background: #fff; border-color: var(--gb-line-3); }
.ck-opt__pickup { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gb-sp-xs); font-size: var(--gb-fs-xxs); }

/* Země doručení nad dopravci — vlaječky (jen multi-country domény, BASKET.md §26) */
.ck-country { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-xs); margin: 0 0 var(--gb-sp-md); }
.ck-country__label, .ck-country__hint { flex-basis: 100%; color: var(--gb-ink-2); }
.ck-country__label { font-size: var(--gb-fs-xs); }
.ck-country__hint { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); }
/* Nenápadný chip: bílé pozadí, tenký rámeček; vybraný = tmavší dvojitý rámeček,
   světlý podklad, tučně a ✓ (bez plné barevné výplně — majitel 16. 9. 2026). */
.ck-country__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-pill); background: #fff;
  color: var(--gb-ink-2); font: inherit; font-size: var(--gb-fs-xs); cursor: pointer;
}
.ck-country__btn:hover { border-color: var(--gb-ink-2); color: var(--gb-ink); }
.ck-country__btn[aria-pressed="true"] {
  border-color: var(--gb-navy); box-shadow: inset 0 0 0 1px var(--gb-navy);
  background: var(--gb-bg-4); color: var(--gb-navy); font-weight: 600;
}
.ck-country__btn[aria-pressed="true"]::after { content: "✓"; font-size: .85em; line-height: 1; }
.ck-country__btn:disabled { opacity: .6; cursor: progress; }
.ck-country__btn img { width: 20px; height: 14px; border-radius: 2px; display: block; }
/* Mnoho zemí (.eu): vlastní dropdown s vlajkami v seznamu místo chipů */
.ck-country__dd { position: relative; display: inline-block; }
.ck-country__ddbtn {
  display: inline-flex; align-items: center; gap: var(--gb-sp-xs); min-width: 230px; min-height: 38px; padding: 4px 12px;
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff; color: var(--gb-ink);
  font: inherit; font-size: var(--gb-fs-xs); cursor: pointer;
}
.ck-country__ddbtn:hover, .ck-country__ddbtn[aria-expanded="true"] { border-color: var(--gb-navy); }
.ck-country__ddbtn:disabled { opacity: .6; cursor: progress; }
.ck-country__ddbtn > span:first-of-type { flex: 1 1 auto; text-align: left; }
.ck-country__ddbtn img, .ck-country__opt img { width: 20px; height: 14px; border-radius: 2px; display: block; flex: 0 0 auto; }
.ck-country__caret { color: var(--gb-ink-2); font-size: .8em; }
.ck-country__list {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 270px; max-height: 320px; overflow: auto;
  margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md); box-shadow: var(--gb-shadow-sm);
}
.ck-country__list[hidden] { display: none; }
.ck-country__opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--gb-r-sm);
  background: transparent; color: var(--gb-ink); font: inherit; font-size: var(--gb-fs-xs); text-align: left; cursor: pointer;
}
.ck-country__opt:hover, .ck-country__opt:focus { background: var(--gb-bg-4); outline: none; }
.ck-country__list [aria-selected="true"] .ck-country__opt { color: var(--gb-navy); font-weight: 600; }
.ck-country__list [aria-selected="true"] .ck-country__opt::after { content: "✓"; margin-left: auto; font-size: .85em; }

/* Picker výdejen: řádek hledání + 📍 nejbližší (výdejní místa Olzy) */
.ck-pickmodal__bar { display: flex; gap: var(--gb-sp-xs); align-items: center; }
.ck-pickmodal__bar .ck-pickmodal__q { flex: 1 1 auto; }
.ck-pickmodal__near {
  flex: 0 0 auto; min-height: 40px; padding: 0 12px; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm);
  background: #fff; color: var(--gb-ink); font: inherit; font-size: var(--gb-fs-xxs); cursor: pointer; white-space: nowrap;
}
.ck-pickmodal__near:hover { border-color: var(--gb-navy); }
.ck-opt__pickbtn {
  font-size: var(--gb-fs-xxs); font-weight: 600; color: var(--gb-navy);
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 599px) {
  .ck-opt { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: var(--gb-sp-xs); }
  .ck-opt__logo { display: none; }
}

/* ── Souhrn ── */
.ck-sum {
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md);
  background: var(--gb-bg-4); padding: var(--gb-sp-lg);
  display: grid; gap: var(--gb-sp-md);
}
.ck-sum__title { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }
.ck-sum__rows { display: grid; gap: var(--gb-sp-xs); margin: 0; }
.ck-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); }
.ck-sum__row dt { color: var(--gb-ink-2); min-width: 0; }
.ck-sum__row dd { margin: 0; white-space: nowrap; font-weight: 600; }
.ck-sum__free { color: var(--gb-green-2); font-weight: 600; }
.ck-sum__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm);
  padding-top: var(--gb-sp-md); border-top: 1px solid var(--gb-line-4);
  font-size: var(--gb-fs-sm);
}
.ck-sum__total strong { font-size: var(--gb-fs-xl); line-height: 1.2; font-weight: 600; }
.ck-sum__note { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); }
.ck-sum__cta { width: 100%; }
.ck-sum__guarantee { display: flex; align-items: center; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }
.ck-sum__guarantee .ico { width: 20px; height: 20px; flex: none; color: var(--gb-green); }
.ck-sum__back { text-align: center; font-size: var(--gb-fs-xs); }
.ck-sum__back a { display: inline-flex; align-items: center; gap: var(--gb-sp-xs); color: var(--gb-ink-2); }
.ck-sum__back .ico { width: 16px; height: 16px; }
.ck-submit { margin: 0; }
.ck-market { display: grid; gap: var(--gb-sp-sm); }
.ck-carrierwarn { display: grid; gap: var(--gb-sp-sm); justify-items: start; }

/* ── Krok 3: e-mail hint, vzkazy, výdejna ── */
.ck-emailhint { display: grid; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); }
.ck-emailhint__acts { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); }
.ck-vzkaz { display: grid; gap: var(--gb-sp-xs); }
.ck-pickup { display: flex; align-items: center; gap: var(--gb-sp-md); }
.ck-pickup > div { display: grid; gap: 2px; font-size: var(--gb-fs-xs); }

/* ── Krok 4: rekapitulace ── */
.ck-recap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-lg); }
@media (max-width: 699px) { .ck-recap { grid-template-columns: 1fr; } }
.ck-recap h3 { font-size: var(--gb-fs-sm); font-weight: 600; margin-bottom: var(--gb-sp-sm); }
.ck-recap dl { display: grid; gap: 4px; margin: 0; }
.ck-recap dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); }
.ck-recap dt { color: var(--gb-ink-2); }
.ck-recap dd { margin: 0; font-weight: 600; }
@media (max-width: 599px) { .ck-recap dl > div { grid-template-columns: 1fr; gap: 0; } }

.ck-items { display: grid; gap: var(--gb-sp-sm); }
.ck-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto;
  gap: var(--gb-sp-md); align-items: center;
  padding-bottom: var(--gb-sp-sm); border-bottom: 1px solid var(--gb-line-3);
  font-size: var(--gb-fs-xs);
}
.ck-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ck-item__img img, .ck-item__img picture { width: 64px; height: 64px; }
.ck-item__body { min-width: 0; display: grid; gap: 2px; }
.ck-item__body a { text-decoration: none; }
.ck-item__body a:hover { text-decoration: underline; }
.ck-item__qty, .ck-item__price { white-space: nowrap; font-weight: 600; }
@media (max-width: 599px) {
  .ck-item { grid-template-columns: 56px minmax(0, 1fr) auto; row-gap: 4px; }
  .ck-item__img img, .ck-item__img picture { width: 56px; height: 56px; }
  .ck-item__qty { grid-column: 2; justify-self: start; font-weight: 400; color: var(--gb-ink-2); }
}
.ck-promo { display: grid; gap: var(--gb-sp-xs); }
.ck-promo li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--gb-sp-sm); align-items: baseline; font-size: var(--gb-fs-xs); }
.ck-promo .ico { width: 18px; height: 18px; color: var(--gb-green); }
.ck-promo b { color: var(--gb-green-2); white-space: nowrap; }
.ck-promo s { color: var(--gb-ink-2); font-weight: 400; }
.ck-terms { font-size: var(--gb-fs-xxs); }

/* ── Modal výběru výdejny ── */
.ck-pickmodal__frame { width: 100%; height: min(70vh, 620px); border: 0; border-radius: var(--gb-r-sm); }
.ck-pickmodal__list { max-height: 50vh; overflow-y: auto; display: grid; gap: 4px; margin-top: var(--gb-sp-sm); }
.ck-pickmodal__item {
  display: grid; gap: 2px; text-align: left; width: 100%;
  padding: var(--gb-sp-sm) var(--gb-sp-md);
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff;
}
.ck-pickmodal__item:hover { border-color: var(--gb-green); background: var(--gb-green-tint); }
.ck-pickmodal__item small { color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); }
/* Telefon (majitel 17. 10. 2026: „příliš velké paddingy, marginy a mapka je příliš malá"):
   výběr přes celou obrazovku — nadpis vedle křížku, mapa nebo seznam zabere zbytek výšky.
   Dialog je sloupec, výšku iframu dopočítá flex z plochy vrstvy (ne `vh`, viz „Modal").
   Tlačítko „Vyhledat v seznamu" se zalomí — jako `nowrap` přetékalo z dialogu.
   Totéž na telefonu na šířku (nízké okno), kde se mapa výšky 70vh nevešla pod nadpis. */
@media (max-width: 599px), (max-height: 500px) {
  .gb-modal.ck-pickmodal { padding: 0; }
  .gb-modal.ck-pickmodal .gb-modal__dialog {
    display: flex; flex-direction: column;
    width: 100%; height: 100%; border-radius: 0;
    padding: 0 var(--gb-sp-sm) var(--gb-sp-sm);
  }
  .ck-pickmodal .gb-modal__dialog > .gb-modal__close { position: absolute; top: 6px; right: 6px; margin: 0; }
  .ck-pickmodal .gb-modal__title {
    flex: none; margin: 0; padding: 14px 52px 10px 4px;
    font-size: var(--gb-fs-lg); line-height: 1.3;
  }
  .ck-pickmodal .gb-modal__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ck-pickmodal__frame { flex: 1 1 auto; height: auto; min-height: 0; }
  .ck-pickmodal__list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .ck-pickmodal .gb-modal__foot { flex: none; margin-top: var(--gb-sp-sm); }
  .ck-pickmodal .gb-modal__foot .gb-btn { width: 100%; white-space: normal; text-align: center; }
}

/* ── Detail produktu: výběr varianty ──────────────────────────────────────
   Dva návrhy z Figmy v jedné komponentě; o formě rozhoduje tvar dat, ne
   šablona (viz templates/v2/components/pdp-variants.php). */
.pd-var__hint {
  margin-top: var(--gb-sp-md); padding: var(--gb-sp-sm) var(--gb-sp-md);
  border-radius: var(--gb-r-sm); background: var(--gb-warn-bg);
  border: 1px solid var(--gb-warn-bd);
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.pd-var__picked { font-size: var(--gb-fs-xs); color: var(--gb-ink-2); }
/* Skupina s jedinou hodnotou není volba — je to údaj. */
.pd-var--fixed { margin-top: var(--gb-sp-sm); }
.pd-var__fixed { display: flex; gap: var(--gb-sp-xs); font-size: var(--gb-fs-xs); color: var(--gb-ink-2); }
.pd-var__fixed strong { color: var(--gb-ink); }
/* Nativní select zůstává v DOMu jako držitel hodnoty a jako fallback bez JS
   — se zapnutým JS se nekreslí (viz `<noscript>` v components/pdp-variants.php). */
.pd-var__select {
  display: none;
  width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  background: #fff; font-size: var(--gb-fs-input);
}
.pd-var__select:focus { border-color: var(--gb-info); }
.pd-var__select option[disabled] { color: var(--gb-mut-inv); }

/* ── Vlastní listbox variant (Figma „Detail produktu varianty selecty",
      6024:19169) ──────────────────────────────────────────────────────────
   Řádek nese tři údaje: název, dostupnost a cenu. Nativní `<option>` umí
   jen text jedné barvy, proto vlastní ovladač. */
.pd-sel { position: relative; }
.pd-sel__btn, .pd-sel__opt {
  width: 100%; display: flex; align-items: center; gap: var(--gb-sp-sm); text-align: left; background: #fff;
  padding: var(--gb-sp-sm) var(--gb-sp-md); min-height: 60px;
  font-family: inherit; color: inherit;
}
.pd-sel__btn {
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-md);
  cursor: pointer;
}
.pd-sel__btn:hover { border-color: var(--gb-navy-mut); }
.pd-sel__btn:focus-visible, .pd-sel__opt:focus-visible { outline: 2px solid var(--gb-info); outline-offset: 2px; }
.pd-sel__btn[aria-expanded="true"] { border-color: var(--gb-navy-mut); }
.pd-sel__btn[aria-expanded="true"] .pd-sel__caret { transform: rotate(180deg); }
.pd-sel__caret { width: 18px; height: 18px; flex: none; color: var(--gb-ink-2); transition: transform .15s ease; }

/* Název na vlastním řádku přes celou šířku, dlouhý se zalomí (nezkracuje se); pod ním dostupnost a vpravo cena.
   Nevejdou-li se vedle sebe (telefon, cena s haléři), cena spadne pod dostupnost (majitel 18. 10. 2026). */
.pd-sel__val { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--gb-sp-sm); }
.pd-sel__name {
  flex: 1 0 100%; overflow-wrap: anywhere;
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-ink);
}
.pd-sel__btn.is-empty .pd-sel__name { font-weight: 400; color: var(--gb-mut-inv); }
.pd-sel__avail { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); font-weight: 500; }
.pd-sel__avail--available { color: var(--gb-green-2); }
.pd-sel__avail--onway { color: var(--gb-warn); }
.pd-sel__avail--unavailable { color: var(--gb-err); }
.pd-sel__price { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--gb-fs-xs); white-space: nowrap; }
.pd-sel__price:empty { display: none; }
.pd-sel__price s { color: var(--gb-ink-2); }
.pd-sel__now { font-weight: 600; color: var(--gb-ink); }
.pd-sel__now.is-sale { color: var(--gb-promo); }
.pd-sel__badge { padding: 2px 8px; }

.pd-sel__list {
  position: absolute; z-index: var(--gb-z-drop); top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-md);
  box-shadow: var(--gb-shadow-drop); overflow: hidden auto; max-height: 340px;
}
.pd-sel__opt { border: 0; border-top: 1px solid var(--gb-line-3); cursor: pointer; }
.pd-sel__opt:first-child { border-top: 0; }
.pd-sel__opt:hover:not([disabled]) { background: var(--gb-bg-4); }
.pd-sel__opt[aria-selected="true"] { background: var(--gb-green-tint); }
.pd-sel__opt[disabled] { cursor: not-allowed; opacity: .55; }
.pd-sel__opt[disabled] .pd-sel__name { text-decoration: line-through; }

/* ── Detail produktu: dostupnosti ──
   Doměřeno proti Figmě 1. 9. 2026 (rám „varianty selecty" 6024:19169,
   nákupní sloupec): **žádná karta**. Blok sedí přímo na podkladu sloupce,
   nahoře ho odděluje tečkovaná linka, dole plná; popisek („Doprava domů",
   „Prodejna v Třinci") je ZELENÝ a stejnou barvu má i ikona, hodnota pod
   ním je tučná v základní barvě textu.
   Do 1. 9. 2026 to byla šedo-navy karta s rámečkem a `--gb-bg-4` podkladem
   — proto to podle majitele „nebylo v barvách a stylu Figmy". */
.pd-avail {
  margin-top: var(--gb-sp-lg); padding: var(--gb-sp-md) 0;
  border-top: 1px dashed var(--gb-line-4);
  border-bottom: 1px solid var(--gb-line-3);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gb-sp-md) var(--gb-sp-lg);
}
/* `align-content: start` je nutné: řádky jsou buňky vnějšího gridu a ten je
   natahuje na stejnou výšku. Bez toho by se v nižším sloupci volné místo
   rozdělilo mezi řádky uvnitř a popisek by od hodnoty odskočil o 30 px
   (změřeno 1. 9. 2026 — „Doprava domů" viselo výš než „Prodejna v Třinci"). */
.pd-avail__row { display: grid; gap: 2px; align-items: start; align-content: start; min-width: 0; }
.pd-avail__label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 500;
  color: var(--gb-green-2);
}
.pd-avail__label .ico { width: 20px; height: 20px; flex: none; color: var(--gb-green); }
.pd-avail__row strong { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; }
.pd-avail__note { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }
.pd-avail__note--low { color: var(--gb-warn); }
.pd-avail__act {
  justify-self: start; margin-top: 2px; padding: 0;
  font-size: var(--gb-fs-xs); font-weight: 500;
  color: var(--gb-ink); text-decoration: underline; text-underline-offset: 3px;
}
.pd-avail__act:hover { color: var(--gb-green-2); }
/* Stav dostupnosti nese barvu textu, ne tečku — tečka byla v2 vlastní
   vynález, Figma ji nemá (a vedle zeleného popisku dělala dva signály
   pro jednu věc). */
.pd-avail .pd-stock { margin-top: 0; display: block; font-size: var(--gb-fs-xs); }
.pd-avail .pd-stock::before { content: none; }
.pd-avail .pd-stock--available { color: var(--gb-ink); }
.pd-avail .pd-stock--onway { color: var(--gb-ink); }
.pd-avail .pd-stock--unavailable { color: var(--gb-err); }
@media (max-width: 599px) { .pd-avail { grid-template-columns: 1fr; } }

/* Garance nejlepší ceny — odkaz u ceny */
.pd-price__gar {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy);
  text-decoration: underline; text-underline-offset: 3px;
}
.pd-price__gar .ico { width: 18px; height: 18px; color: var(--gb-green); }
.pd-price__gar:hover { color: var(--gb-green-2); }

/* ── Modal garance: srovnání + formulář ── */
/* Dva sloupce 1:1 jako v1 `modal-xl` — na 380px formulář se popisky lámaly
   a řádek se rozjížděl. */
.pd-gar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gb-sp-xl); align-items: start; }
@media (max-width: 899px) { .pd-gar { grid-template-columns: 1fr; gap: var(--gb-sp-lg); } }
.pd-gar__cmp { padding: var(--gb-sp-md); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: var(--gb-bg-4); }
.pd-gar__thumb { text-align: center; margin-bottom: var(--gb-sp-sm); }
.pd-gar__thumb img { width: 120px; height: 120px; margin: 0 auto var(--gb-sp-xs); object-fit: contain; }
.pd-gar__thumb figcaption { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; }
.pd-gar__claim { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); text-align: center; margin-bottom: var(--gb-sp-sm); }
.pd-gar__acts { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-sm); }
.pd-gar__acts:empty { display: none; }
.pd-gar__refresh {
  padding: 0; font-size: var(--gb-fs-xxs); font-weight: 600; color: var(--gb-navy);
  text-decoration: underline; text-underline-offset: 3px;
}
.pd-gar__refresh:hover { color: var(--gb-green-2); }
.pd-gar__refresh[disabled] { opacity: .5; cursor: default; }
.pd-gar__form h3 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; margin-bottom: var(--gb-sp-xs); }
.pd-gar__termsrow { margin-top: var(--gb-sp-sm); text-align: center; }
.gb-req { color: var(--gb-err); }
.pd-gar__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); padding: 6px 0; font-size: var(--gb-fs-xs); }
.pd-gar__row + .pd-gar__row { border-top: 1px dashed var(--gb-line-4); }
.pd-gar__row b { white-space: nowrap; }
.pd-gar__row--out { color: var(--gb-mut-inv); }
.pd-gar__row--best b { color: var(--gb-promo); }
.pd-gar__final {
  margin-top: var(--gb-sp-sm); padding: var(--gb-sp-sm) var(--gb-sp-md);
  border: 1px solid var(--gb-green-tint-2); background: var(--gb-green-tint);
  border-radius: var(--gb-r-sm);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-sm);
  font-size: var(--gb-fs-xs);
}
.pd-gar__final b { font-size: var(--gb-fs-lg); color: var(--gb-green-2); }
.pd-gar__updated { font-size: var(--gb-fs-xxs); margin-top: var(--gb-sp-sm); }
.pd-gar__terms { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gb-fs-xxs); }
.pd-gar__terms .ico { width: 16px; height: 16px; }

/* ── Sdílené drobnosti formulářů ── */
/* Honeypot: musí být v DOMu a odesílat se, ale nikdy ho nesmí vidět člověk
   ani ho vyplnit klávesnicí. `display:none` nestačí — část botů ho pozná. */
.gb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Půlřádek. `align-items: end` NENÍ kosmetika: popisky se lámou různě
   („Kde jste našli lepší nabídku?" na dva řádky, „Telefon" na jeden) a při
   zarovnání nahoru pak jedno pole viselo o řádek níž než druhé — přesně to
   vypadalo na formuláři garance „rozhozeně" (nahlášeno 31. 8. 2026). */
.gb-field--half { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-md); align-items: end; }
/* Poměr 7:5 jako `col-sm-7 / col-sm-5` ve v1 — delší pole (e-mail, cena)
   dostane víc místa než telefon a počet kusů. */
.gb-field--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
/* Půlřádek, kde se naopak liší NÁPOVĚDA pod polem (ne popisek nad ním).
   `end` by tam zarovnal spodní hrany, takže pole s delší nápovědou by
   vyjelo nahoru — přesně opačná chyba než ta, kvůli které `end` je.
   Používá to detailní vyhledávání („Hledá ve jménu produktu…" na dva řádky
   vs „Omezí hledání na jednu sekci." na jeden). */
.gb-field--top { align-items: start; }
.gb-field--narrow input { max-width: 120px; }
@media (max-width: 599px) { .gb-field--half, .gb-field--7-5 { grid-template-columns: 1fr; } }

/* Pole s příponou (měna u ceny) — vizuálně jeden ovladač. */
.gb-input-group { display: flex; align-items: stretch; }
.gb-input-group input {
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;
}
.gb-input-group__addon {
  display: inline-flex; align-items: center; padding: 0 var(--gb-sp-md);
  border: 1px solid var(--gb-line-4); border-left: 0;
  border-top-right-radius: var(--gb-r-sm); border-bottom-right-radius: var(--gb-r-sm);
  background: var(--gb-bg-4); color: var(--gb-ink-2);
  font-size: var(--gb-fs-xs); white-space: nowrap;
}
.gb-note {
  padding: var(--gb-sp-sm) var(--gb-sp-md); border-radius: var(--gb-r-sm);
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs);
  border: 1px solid var(--gb-line-4); background: var(--gb-bg-4);
}
.gb-note--warn { border-color: var(--gb-warn-bd); background: var(--gb-warn-bg); }
.gb-note--ok { border-color: var(--gb-green-tint-2); background: var(--gb-green-tint); color: var(--gb-green-2); }
.gb-note--err { border-color: #ffc9c2; background: #ffe9e6; color: var(--gb-err); }

/* ── Vrácení a reklamace (účet i veřejná stránka) ─────────────────────────
   Řádek zakoupeného zboží je karta, ne řádek tabulky: nese fotku, dvě lhůty
   a dvě akce, a na mobilu se to do sloupců nevejde. Zamčená položka (už
   vrácená / zrušená) nemá zaškrtávátko ani akce — jen ikonu a vysvětlení,
   aby bylo poznat, že tam chybí schválně. */
.ac-section { display: grid; gap: var(--gb-sp-md); }
.ac-section > h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }

.rma-search { position: relative; max-width: 420px; }
.rma-search .ico { position: absolute; left: var(--gb-sp-md); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gb-ink-2); pointer-events: none; }
.rma-search input {
  width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md) 0 42px;
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill);
  background: #fff; font-size: var(--gb-fs-input);
}
.rma-search input:focus { border-color: var(--gb-info); }

.rma-list { display: grid; gap: var(--gb-sp-sm); }
.rma-item {
  display: grid; grid-template-columns: 24px 64px minmax(0, 1fr) auto;
  align-items: center; gap: var(--gb-sp-md);
  padding: var(--gb-sp-sm) var(--gb-sp-md);
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff;
}
.rma-item.is-settled { background: var(--gb-bg-4); color: var(--gb-ink-2); }
.rma-item__pick { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rma-item__pick input { width: 20px; height: 20px; accent-color: var(--gb-green); cursor: pointer; }
.rma-item__lock { display: flex; align-items: center; justify-content: center; color: var(--gb-mut-inv); }
.rma-item__lock .ico { width: 18px; height: 18px; }
.rma-item__img { display: block; width: 64px; height: 64px; }
.rma-item__img img, .rma-item__img picture { width: 100%; height: 100%; }
.rma-item__body { min-width: 0; }
.rma-item__name { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-navy); text-decoration: none; }
.rma-item__name:hover { text-decoration: underline; }
.rma-item.is-settled .rma-item__name { color: inherit; }
.rma-item__meta { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); margin-top: 2px; }
.rma-item__meta a { color: inherit; }
.rma-item__flags { display: flex; flex-wrap: wrap; gap: 4px var(--gb-sp-md); margin-top: 4px; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); }
.rma-item__flags:empty { display: none; }
.rma-flag { display: inline-flex; align-items: center; gap: 5px; }
.rma-flag .ico { width: 14px; height: 14px; }
.rma-flag--ok { color: var(--gb-green-2); }
.rma-flag--late { color: var(--gb-err); }
.rma-flag--off { color: var(--gb-ink-2); font-weight: 600; }
/* Doplňková věta k červenému odznaku „vypršelo" — po lhůtě jde žádost podat dál. */
.rma-flag--hint { color: var(--gb-ink-2); }
.rma-item__acts { display: flex; gap: var(--gb-sp-xs); flex-wrap: wrap; }

/* Lišta hromadné akce visí nad obsahem, ne v toku — jinak by při dlouhém
   seznamu byla pod přehybem právě ve chvíli, kdy je potřeba. */
.rma-bar {
  position: fixed; left: 50%; bottom: var(--gb-sp-lg); transform: translateX(-50%);
  z-index: var(--gb-z-drop);
  display: flex; align-items: center; gap: var(--gb-sp-md); flex-wrap: wrap;
  padding: var(--gb-sp-sm) var(--gb-sp-lg);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill);
  background: #fff; box-shadow: var(--gb-shadow-drop);
  font-size: var(--gb-fs-xs);
}
@media (max-width: 899px) {
  .rma-item { grid-template-columns: 24px 56px minmax(0, 1fr); }
  .rma-item__acts { grid-column: 1 / -1; }
  .rma-item__acts .gb-btn { flex: 1 1 auto; }
  .rma-bar { left: var(--gb-sp-sm); right: var(--gb-sp-sm); transform: none; justify-content: center; border-radius: var(--gb-r-md); }
}

/* ── Karta produktu (mřížky) ── */
/* Mřížka s linkami mezi kartami ve všech směrech. Dřív kreslila jen svislou linku
   mezi sousedy (`* + * { border-left }`) v krémové --gb-line-3, která je na bílé
   skoro neviditelná — karty nad sebou splývaly (majitel 14. 10. 2026). Teď každá
   karta kreslí linku vpravo a dole pseudoprvkem posunutým o 1 px za svůj okraj:
   leží přesně na hranici se sousedem a NAD jeho pozadím (najetí myší na kartu
   linky nezakryje), linky na obvodu ořízne overflow mřížky a rámeček drží obvod
   i u neúplné poslední řady. Funguje pro libovolný počet sloupců. */
.gb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-md); overflow: hidden; background: #fff; }
.gb-grid > * { position: relative; }
.gb-grid > *::after {
  content: ''; position: absolute; top: 0; left: 0; right: -1px; bottom: -1px; z-index: 1;
  border-right: 1px solid var(--gb-line-4); border-bottom: 1px solid var(--gb-line-4);
  pointer-events: none;
}
@media (max-width: 1099px) { .gb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .gb-grid { grid-template-columns: 1fr; } }
.gb-card { display: flex; flex-direction: column; padding: var(--gb-sp-md); text-decoration: none; color: inherit; }
.gb-card:hover { background: var(--gb-bg-4); }
.gb-card__img { aspect-ratio: 1 / 1; }
/* Štítky jsou POD fotkou (Figma „product list") — nepřekrývají produkt.
   Na detailu produktu je to naopak, tam sedí přes galerii
   (`.pd-gallery__badges`), a to je taky podle Figmy. */
.gb-card__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--gb-sp-sm); }
.gb-card__img img, .gb-card__img picture { width: 100%; height: 100%; display: block; }
.gb-card__name { margin-top: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.gb-card__foot { margin-top: auto; padding-top: var(--gb-sp-sm); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gb-sp-sm); }
.gb-card__stock { font-size: var(--gb-fs-xxs); color: var(--gb-green-2); }
.gb-card__stock--out { color: var(--gb-mut-inv); }
.gb-card__price { text-align: right; }
.gb-card__price s { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }
.gb-card__price strong { font-size: var(--gb-fs-lg); line-height: 1.2; font-weight: 600; }
.gb-card__price--sale strong { color: var(--gb-promo); }

/* ── Výpis produktů (kategorie, značka, hledání) ──────────────────────────
   Rozvržení dle Figmy „vypis produktu": drobečky → H1 + anotace → dlaždice
   podkategorií → lišta vybraných filtrů (celá šířka) → filtry vlevo +
   mřížka vpravo → „Další produkty" + stránkování.

   Mřížka má 4 sloupce (přání majitele + komentář designéra #56 ve Figmě),
   na tabletu 3 a na mobilu VŽDY 2 — jeden produkt na řádek byl na iPhonu
   13 mini důvod stížnosti 27. 8. 2026. */
.pl__top { padding-bottom: var(--gb-sp-lg); }
.pl__head h1 { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; }
.pl__annot { max-width: 920px; margin-top: var(--gb-sp-sm); color: var(--gb-ink-2); }
/* Podkategorie jako pilulky s obrázkem */
.pl-subcats { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-lg); }
.pl-subcats a {
  display: inline-flex; align-items: center; gap: var(--gb-sp-sm);
  padding: var(--gb-sp-xs) var(--gb-sp-lg) var(--gb-sp-xs) var(--gb-sp-xs);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill);
  background: #fff; color: var(--gb-ink); text-decoration: none;
  font-size: var(--gb-fs-xs); font-weight: 600;
}
.pl-subcats a:hover { border-color: var(--gb-navy-mut); }
.pl-subcats a[aria-current] { background: var(--gb-navy-tint); border-color: var(--gb-navy-mut); }
.pl-subcats img { width: 32px; height: 32px; border-radius: 50%; background: var(--gb-bg-4); }

/* ── Lišta: vybrané filtry · počet · řazení · (mobil) tlačítko filtrů ── */
.pl-bar { border-block: 1px solid var(--gb-line-3); background: var(--gb-bg-4); }
.pl-bar__in {
  display: flex; align-items: center; gap: var(--gb-sp-md); flex-wrap: wrap;
  padding-block: var(--gb-sp-md);
}
.pl-bar__label { font-size: var(--gb-fs-xs); font-weight: 600; }
.pl-chips { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; }
/* Jedna pilulka per skupina: „Značka: Callaway Golf × Wilson ×" */
.pl-chip {
  display: inline-flex; align-items: center; gap: var(--gb-sp-sm);
  padding: 5px var(--gb-sp-md);
  background: #fff; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  font-size: var(--gb-fs-xs); color: var(--gb-ink);
}
.pl-chip__group { color: var(--gb-ink-2); }
.pl-chip__val {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none; border-radius: var(--gb-r-sm);
}
.pl-chip__val b { font-weight: 600; }
.pl-chip__val:hover { color: var(--gb-err); }
.pl-chip .ico { width: 14px; height: 14px; color: var(--gb-ink-2); }
.pl-chip__val:hover .ico { color: var(--gb-err); }
.pl-bar__clear { color: var(--gb-err); font-size: var(--gb-fs-xs); }
.pl-bar__right { margin-left: auto; display: flex; align-items: center; gap: var(--gb-sp-md); font-size: var(--gb-fs-xs); }
.pl-bar__count { color: var(--gb-ink-2); white-space: nowrap; }
.pl-bar__sort { display: inline-flex; align-items: center; gap: var(--gb-sp-xs); white-space: nowrap; }
/* Výška 40, ne padding: na mobilu stojí řazení vedle tlačítka „Filtrování"
   (`min-height: 40px`) a samotný padding dal 34 — dva sousední ovladače
   o různé výšce. 40 je zároveň kompaktní varianta z v2 (44 mají pole
   formulářů, 40 vedlejší ovladače jako `.of-card select`). */
.pl-bar__sort select {
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  min-height: 40px; padding: 0 var(--gb-sp-sm); background: #fff; max-width: 190px;
}
/* Tlačítko filtrů je jen pro mobil — na desktopu jsou filtry stále vidět. */
.pl-bar__filters {
  display: none; align-items: center; gap: var(--gb-sp-sm);
  min-height: 40px; padding: 0 var(--gb-sp-md);
  border: 1px solid var(--gb-navy); border-radius: var(--gb-r-pill);
  font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-navy); background: #fff;
}
.pl-bar__filters .ico { width: 18px; height: 18px; }
.pl-bar__filters-n {
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gb-r-pill); background: var(--gb-green); color: #fff;
  font-size: var(--gb-fs-xxs); font-weight: 600;
}

/* ── Rozvržení: filtry vlevo, mřížka vpravo ── */
.pl__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gb-sp-xl); align-items: start; padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); }
.pl__main { min-width: 0; }
/* Dokud běží AJAX, obsah zůstává na místě a jen zešedne — žádný skok, žádné
   přeskládání layoutu. Přesně tohle chybělo první verzi v2. */
.pl__main.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* ── Filtry ── */
.pl-filters__head, .pl-filters__foot { display: none; }
.pl-fs { border: 0; padding: 0; margin: 0 0 var(--gb-sp-lg); }
.pl-fs legend { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; margin-bottom: var(--gb-sp-sm); padding: 0; }
/* Podtržená skupina = má aktivní volbu (Figma). */
.pl-fs legend.is-active { text-decoration: underline; text-underline-offset: 4px; }
.pl-opts { display: flex; flex-direction: column; }
.pl-opts--swatch { flex-direction: row; flex-wrap: wrap; gap: var(--gb-sp-sm); }
/* Vlastní zaškrtávátko — nativní se nedá nastylovat na zelenou z tokenů. */
.pl-opt { position: relative; display: flex; align-items: center; gap: var(--gb-sp-sm); padding: 5px 0; font-size: var(--gb-fs-xs); cursor: pointer; }
.pl-opt input, .pl-brand input, .pl-swatch input {
  position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer;
}
.pl-opt__box {
  width: 20px; height: 20px; flex: none;
  border: 1px solid var(--gb-line-4); border-radius: 4px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pl-opt__box .ico { width: 14px; height: 14px; color: #fff; opacity: 0; }
.pl-opt input:checked + .pl-opt__box { background: var(--gb-green); border-color: var(--gb-green); }
.pl-opt input:checked + .pl-opt__box .ico { opacity: 1; }
.pl-opt input:focus-visible + .pl-opt__box { outline: 2px solid var(--gb-info); outline-offset: 2px; }
.pl-opt__name { min-width: 0; }
.pl-opt__count { margin-left: auto; color: var(--gb-mut-inv); font-size: var(--gb-fs-xxs); white-space: nowrap; }
/* Hodnota, pod kterou by nic nezbylo. Zaškrtnutou nikdy nezhasínáme. */
.pl-opt.is-off, .pl-brand.is-off { opacity: .45; cursor: not-allowed; }
.pl-opt.is-off .pl-opt__name { text-decoration: line-through; }

/* Značky mají logo a vlastní rámeček */
/* Doměřeno z Figma exportu výpisu 1. 9. 2026: řádek značky je 56 px vysoký,
   rámeček 1 px `--gb-line-4` (#dbd9d0), vybraná značka má 2px `--gb-green`
   a podklad `--gb-green-tint`. Předtím tu byl rámeček `--gb-line-3`, což je
   krémová linka skoro k nerozeznání od pozadí — řádky vypadaly, že rámeček
   nemají vůbec. */
.pl-brand {
  position: relative; display: flex; align-items: center; gap: var(--gb-sp-sm);
  min-height: 56px; padding: var(--gb-sp-sm) var(--gb-sp-md); margin-bottom: var(--gb-sp-xs);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  background: #fff; font-size: var(--gb-fs-xs); cursor: pointer;
}
.pl-brand:hover { border-color: var(--gb-navy-mut); }
.pl-brand:has(input:checked) {
  border-color: var(--gb-green); border-width: 2px; background: var(--gb-green-tint);
  /* rámeček zesílí o 1 px na každé straně — dorovnat, ať řádek neposkočí */
  padding: calc(var(--gb-sp-sm) - 1px) calc(var(--gb-sp-md) - 1px);
}
.pl-brand:has(input:focus-visible) { outline: 2px solid var(--gb-info); outline-offset: 2px; }
.pl-brand img { width: 52px; height: 26px; flex: none; }

/* „Do ztracena" (poslední řada) vs. schované řady. Kliknutelné je i to
   vyblednuté — klik rozbalí skupinu, viz gb-list.js. */
.pl-opts > .is-fade { opacity: .4; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.pl-opts > .is-over { display: none; }

.pl-filters__search { position: relative; margin-bottom: var(--gb-sp-sm); }
.pl-filters__search .ico { position: absolute; left: var(--gb-sp-md); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gb-mut-inv); }
.pl-filters__search input {
  width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md) 0 42px;
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff;
  font-size: var(--gb-fs-xs);
}
.pl-more {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0; color: var(--gb-navy); font-size: var(--gb-fs-xs);
  text-decoration: underline; text-underline-offset: 3px;
}
.pl-more .ico { width: 16px; height: 16px; }

/* Barevný vzorník (skupiny „Barva …", viz src/Services/AttributeSwatch.php) */
.pl-swatch { position: relative; cursor: pointer; }
.pl-swatch__dot {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--gb-line-4); box-shadow: inset 0 0 0 2px #fff;
}
.pl-swatch input:checked + .pl-swatch__dot { border-color: var(--gb-green); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--gb-green); }
.pl-swatch input:focus-visible + .pl-swatch__dot { outline: 2px solid var(--gb-info); outline-offset: 2px; }
.pl-swatch.is-off { opacity: .35; cursor: not-allowed; }

/* ── Cena ──────────────────────────────────────────────────────────────
   Doměřeno 1. 9. 2026 z Figma exportu stránky výpisu („product list",
   1440 px, rám 6038:7272) — pixely, ne odhad:

     dráha   10 px (8 px výplně + 1 px rámeček), `--gb-navy-tint` #e6eaee
             s rámečkem `--gb-navy-mut` #b3bccb, plná pilulka
     výplň   mezi držadly plné `--gb-navy-mut`
     držadlo KRUH 36 px, `--gb-navy` #092857 (odečteno přesně), popisek
             „od" / „do" bíle uprostřed
     pole    2× 122 px na 325 px sloupci, `space-between`, BEZ pomlčky
             mezi nimi, rámeček 1 px `--gb-navy-mut`, výška 42, r = 5

   Do 1. 9. 2026 tu byla 6px dráha bez rámečku, držadla 34×24 obdélníky
   a popisky „od/do" přilepené k okrajům celé dráhy (`left: 8px`), takže
   se s držadly nehýbaly a seděly mimo ně; pole byla `flex: 1` s pomlčkou
   uprostřed. Tohle je ta „špatně zarovnaná cena od–do" z 31. 8. 2026. */
.pl-range { position: relative; height: 36px; margin-bottom: var(--gb-sp-md); }
.pl-range__track {
  position: absolute; left: 0; right: 0; top: 13px; height: 10px;
  border: 1px solid var(--gb-navy-mut); border-radius: var(--gb-r-pill);
  background: var(--gb-navy-tint);
}
.pl-range__fill { position: absolute; top: -1px; bottom: -1px; background: var(--gb-navy-mut); border-radius: var(--gb-r-pill); }
.pl-range__in {
  position: absolute; left: 0; top: 0; width: 100%; height: 36px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.pl-range__in::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gb-navy); border: 0; cursor: grab;
}
.pl-range__in::-moz-range-thumb {
  pointer-events: auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gb-navy); border: 0; cursor: grab;
}
.pl-range__in:focus-visible { outline: none; }
.pl-range__in:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gb-info); outline-offset: 2px; }
.pl-range__in:focus-visible::-moz-range-thumb { outline: 2px solid var(--gb-info); outline-offset: 2px; }
/* Popisky „od / do" leží NA držadlech a posouvá je JS (`--pos`, 0–1) —
   proto `left` počítané ze stopy, ne konstanta. Dekorace: nesmí brát kliky. */
.pl-range__cap {
  position: absolute; top: 0; height: 36px; width: 36px;
  display: flex; align-items: center; justify-content: center;
  left: calc(var(--pos, 0) * (100% - 36px));
  font-size: var(--gb-fs-xxs); line-height: 1; font-weight: 600; color: #fff;
  pointer-events: none;
}
.pl-price { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); }
.pl-price input {
  flex: 0 1 122px; min-width: 0; height: 42px; padding: 0 var(--gb-sp-sm);
  border: 1px solid var(--gb-navy-mut); border-radius: var(--gb-r-sm); background: #fff;
  color: var(--gb-ink); font-size: var(--gb-fs-sm);
}
.pl-price input::placeholder { color: var(--gb-mut-inv); }

/* ── Mřížka výpisu ── */
.pl-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1399px) { .pl-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1099px) { .pl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mobil: dva produkty vedle sebe (Figma mobilní šablona), nikdy jeden. */
@media (max-width: 599px) {
  .pl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-products .gb-card { padding: var(--gb-sp-sm); }
  .pl-products .gb-card__price strong { font-size: var(--gb-fs-sm); }
  .pl-products .gb-card__foot { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pl-products .gb-card__price { text-align: left; }
}

/* ── Další produkty + stránkování ── */
.pl-loadmore { display: flex; justify-content: center; margin-top: var(--gb-sp-lg); }
.pl-loadmore button { min-width: 220px; justify-content: center; }
.pl-loadmore__spin { display: none; width: 16px; height: 16px; margin-left: var(--gb-sp-sm); border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gb-spin .7s linear infinite; }
.pl-loadmore button.is-loading .pl-loadmore__spin { display: inline-block; }
@keyframes gb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pl-loadmore__spin { animation: none; } }

.pl-pager { display: flex; align-items: center; justify-content: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-lg); flex-wrap: wrap; }
.pl-pager a, .pl-pager span {
  min-width: 44px; min-height: 44px; padding: 0 var(--gb-sp-md);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--gb-r-pill); font-size: var(--gb-fs-xs); text-decoration: none; color: var(--gb-navy);
}
.pl-pager a:hover { background: var(--gb-bg-4); }
/* Stránky, které už jsou na obrazovce (po „Další produkty"), zůstávají
   označené — jinak by po dolepení svítila jen poslední. */
.pl-pager a.is-loaded { font-weight: 600; }
.pl-pager [aria-current="page"] { background: var(--gb-navy); color: #fff; font-weight: 600; }
.pl-pager [aria-current="page"]:hover { background: var(--gb-navy); }
.pl-pager__nav { border: 1px solid var(--gb-navy); }
.pl-pager__gap { min-width: 20px; padding: 0; color: var(--gb-mut-inv); }
.pl-empty { padding: var(--gb-sp-2xl) 0; text-align: center; color: var(--gb-ink-2); display: grid; gap: var(--gb-sp-lg); justify-items: center; }

/* ── Mobil: filtry jsou zásuvka, ne blok nad produkty ──────────────────
   Do 27. 8. 2026 byly filtry na mobilu trvale nad výpisem a produkty
   začínaly až pod nimi (stížnost majitele). Teď jsou schované jako ve v1
   a vysouvá je tlačítko v liště. */
.pl-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(9, 40, 87, .45); }
@media (max-width: 899px) {
  .pl__grid { grid-template-columns: 1fr; gap: var(--gb-sp-md); }
  .pl-bar__filters { display: inline-flex; }
  .pl-bar__label, .pl-bar__count { display: none; }
  .pl-bar__right { margin-left: auto; }
  .pl-filters {
    position: fixed; z-index: 80; top: 0; bottom: 0; left: 0;
    width: min(92vw, 360px); padding: 0 var(--gb-sp-md) 90px;
    background: #fff; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--gb-shadow-drop);
  }
  body.pl-filters-open { overflow: hidden; }
  body.pl-filters-open .pl-filters { transform: translateX(0); }
  .pl-filters__head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1;
    margin-inline: calc(-1 * var(--gb-sp-md)); padding: var(--gb-sp-md);
    background: #fff; border-bottom: 1px solid var(--gb-line-3);
    font-size: var(--gb-fs-lg);
  }
  .pl-filters__close { width: 44px; height: 44px; display: grid; place-items: center; }
  .pl-filters__close .ico { width: 20px; height: 20px; }
  .pl-filters__foot {
    display: block; position: fixed; left: 0; bottom: 0;
    width: min(92vw, 360px); padding: var(--gb-sp-md);
    background: #fff; border-top: 1px solid var(--gb-line-3);
  }
  .pl-filters__foot .gb-btn { width: 100%; justify-content: center; }
}
@media (min-width: 900px) {
  /* Na desktopu zásuvka neexistuje — pozadí ani při omylem zapnuté třídě. */
  .pl-backdrop { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pl-filters { transition: none; } }

/* Filtrační pilulky (záložky „Železa / Bagy / Míčky") */
.gb-pills { display: flex; gap: var(--gb-sp-sm); flex-wrap: wrap; }
.gb-pills a, .gb-pills button {
  padding: 0 var(--gb-sp-lg); min-height: 44px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--gb-navy); border-radius: var(--gb-r-pill);
  background: #fff; color: var(--gb-navy);
  font-size: var(--gb-fs-xs); font-weight: 600; text-decoration: none;
}
.gb-pills [aria-current="true"], .gb-pills .is-active { background: var(--gb-navy); color: #fff; }

/* ============================================================
   CONTENT KIT — styly pro obsah psaný ve WYSIWYG editoru
   (produktové popisy, články, statické stránky) i pro obsah,
   který v DB leží od dřívějška.

   Dvě vrstvy:
   A) HOLÉ TAGY uvnitř .gb-content — aby staré uložené texty
      (nadpisy, odstavce, seznamy, tabulky, obrázky) vypadaly
      dobře bez jakéhokoli zásahu do dat.
   B) TŘÍDY gb-* — pro nové psaní obsahu. Webmaster (i AI) skládá
      z nich sloupce, boxy, upozornění a odznaky, aniž by musel
      psát vlastní CSS nebo inline styly.

   Dokumentace tříd s ukázkami: /design/content-kit.html
   ============================================================ */
.gb-content { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm); }
.gb-content > * + * { margin-top: var(--gb-sp-md); }
.gb-content h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; margin-top: var(--gb-sp-xl); }
.gb-content h3 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; margin-top: var(--gb-sp-lg); }
.gb-content h4 { font-size: var(--gb-fs-sm); font-weight: 600; }
.gb-content p { margin-block: 0; }
.gb-content a { color: var(--gb-navy); text-underline-offset: 3px; }
.gb-content ul, .gb-content ol { padding-left: 1.35em; }
.gb-content li + li { margin-top: var(--gb-sp-xs); }
.gb-content ul { list-style: disc; }
.gb-content ol { list-style: decimal; }
.gb-content img { height: auto; border-radius: var(--gb-r-sm); margin-inline: auto; }
.gb-content figure { margin: 0; }
.gb-content figcaption { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); text-align: center; margin-top: var(--gb-sp-xs); }
.gb-content hr { border: 0; border-top: 1px solid var(--gb-line-3); margin-block: var(--gb-sp-lg); }
.gb-content blockquote {
  margin: 0; padding: var(--gb-sp-md) var(--gb-sp-lg);
  border-left: 3px solid var(--gb-green); background: var(--gb-bg-4);
  border-radius: 0 var(--gb-r-sm) var(--gb-r-sm) 0;
}
/* Tabulka z editoru: nikdy nesmí roztáhnout stránku — scrolluje sama v sobě. */
.gb-content table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: var(--gb-fs-xs); }
.gb-content th, .gb-content td { padding: var(--gb-sp-sm) var(--gb-sp-md); border: 1px solid var(--gb-line-3); text-align: left; }
.gb-content th { background: var(--gb-bg-4); font-weight: 600; }
.gb-content iframe { max-width: 100%; border: 0; border-radius: var(--gb-r-sm); }
/* Video z editoru drží poměr 16:9 bez nutnosti obalu. */
.gb-content iframe[src*="youtube"], .gb-content iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* B) Autorské třídy ------------------------------------------------ */
/* Sloupce — počet se sám snižuje na užších oknech. */
.gb-cols { display: grid; gap: var(--gb-sp-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gb-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gb-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { .gb-cols, .gb-cols--3, .gb-cols--4 { grid-template-columns: 1fr; } }

/* Box = ohraničený panel s obsahem. Varianty barevně odlišené. */
.gb-box {
  padding: var(--gb-sp-lg);
  background: var(--gb-bg-4); border: 1px solid var(--gb-line-3);
  border-radius: var(--gb-r-md);
}
.gb-box > * + * { margin-top: var(--gb-sp-sm); }
.gb-box--green { background: var(--gb-green-tint); border-color: var(--gb-green-tint-2); }
.gb-box--navy { background: var(--gb-navy); border-color: var(--gb-navy); color: #fff; }
.gb-box--navy a { color: #fff; }
/* Plný barevný panel (Figma: zelený blok technologií v popisu produktu). */
.gb-panel {
  padding: var(--gb-sp-2xl) var(--gb-sp-xl);
  border-radius: var(--gb-r-md);
  background: var(--gb-green); color: #fff; text-align: center;
}
.gb-panel > * + * { margin-top: var(--gb-sp-md); }
.gb-panel h2, .gb-panel h3 { color: #fff; margin-top: 0; }
.gb-panel a { color: #fff; }

/* Upozornění */
.gb-alert {
  display: flex; gap: var(--gb-sp-sm);
  padding: var(--gb-sp-md) var(--gb-sp-lg);
  border-radius: var(--gb-r-sm);
  background: var(--gb-info-bg); color: var(--gb-ink);
  border-left: 3px solid var(--gb-info);
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.gb-alert--success { background: var(--gb-green-tint); border-left-color: var(--gb-green); }
.gb-alert--warning { background: var(--gb-warn-bg); border-left-color: var(--gb-warn-strong); }
.gb-alert--danger  { background: var(--gb-promo-bg); border-left-color: var(--gb-err); }

/* Vlastnosti s ikonou/emoji (Figma: mřížka výhod v zeleném panelu) */
.gb-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gb-sp-lg); text-align: center; }
.gb-features > * > strong { display: block; font-weight: 600; }
.gb-features > * > span { font-size: var(--gb-fs-xs); opacity: .85; }
@media (max-width: 899px) { .gb-features { grid-template-columns: 1fr; } }

/* Drobnosti */
.gb-lead { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }
.gb-muted { color: var(--gb-ink-2); }
.gb-center-text { text-align: center; }

/* ── Článek / textová stránka ── */
.gb-article__head { max-width: 850px; margin: 0 auto var(--gb-sp-lg); text-align: center; }
.gb-article__head h1 { font-size: var(--gb-fs-2xl); line-height: 1.25; font-weight: 600; }
.gb-article__date { margin-top: var(--gb-sp-xs); font-size: var(--gb-fs-xs); color: var(--gb-ink-2); }
.gb-article__perex { margin-top: var(--gb-sp-md); font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); color: var(--gb-ink-2); }
/* Text čte líp v úzkém sloupci; široké prvky (tabulky, panely) si sloupec
   samy rozšíří přes .gb-content--wide na konkrétním bloku. */
.gb-article__body { max-width: 850px; margin-inline: auto; }
.gb-video { max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; }
.gb-video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--gb-r-md); }

/* ── Toast (přidání do košíku apod.) ── */
.gb-toast {
  position: fixed; left: 50%; bottom: var(--gb-sp-lg); transform: translateX(-50%);
  z-index: 90;
  background: var(--gb-green); color: #fff;
  border-radius: var(--gb-r-pill); padding: 12px 24px;
  font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
.gb-toast--err { background: var(--gb-err); }

/* ── Modal (přihlášení) ──
   Figma „prihlaseni" (6420:9846). Backdrop je vlastní vrstva uvnitř modalu,
   aby šel kliknout na zavření a aby dialog nedědil jeho průhlednost.
   Zavřít musí jít vždy (majitel 15. 10. 2026: v Chrome na iPhonu se po vysunutí
   horní a dolní lišty prohlížeče schoval křížek): výšku dialogu drží plocha
   vrstvy (`max-height: 100%`), ne `100vh` — to je na telefonu výška okna se
   schovanými lištami, takže vycentrovaný dialog přesahoval nahoru i dolů. Vrstva
   je `inset: 0`, tedy vždy to, co je vidět, i po otočení telefonu. Křížek se lepí
   k horní hraně dialogu (je vidět i u odrolovaného obsahu) a dialog se centruje
   `margin: auto` — kdyby přesto přerostl, roluje celá vrstva od jeho začátku. */
.gb-modal {
  position: fixed; inset: 0; z-index: var(--gb-z-modal);
  display: grid;
  padding: var(--gb-sp-md);
  overflow-y: auto; overscroll-behavior: contain;
}
.gb-modal__backdrop { position: fixed; inset: 0; background: rgba(5, 24, 52, .55); }
.gb-modal__dialog {
  position: relative;
  width: min(440px, 92vw);
  margin: auto;
  max-height: calc(100vh - 2 * var(--gb-sp-md));   /* prohlížeč bez procent v mřížce */
  max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--gb-bg); color: var(--gb-ink);
  border-radius: var(--gb-r-md);
  padding: 0 var(--gb-sp-xl) var(--gb-sp-xl);   /* horní okraj dělá křížek (níž) */
  box-shadow: var(--gb-shadow-drop);
}
/* Křížek v rohu jako dřív (ikona 15 px od hran), jen v toku dialogu: `sticky` ho
   drží nahoře i při rolování obsahu. Je první v dialogu a dělá i jeho horní okraj
   (obsah pod ním začíná 40 px od hrany jako dřív) — dialog nahoře výplň nemá,
   protože k ní prohlížeče lepivé prvky počítají různě. Bílé kolečko — obsah pod
   ním odjíždí. */
.gb-modal__close {
  position: sticky; top: 11px; z-index: 2;
  display: grid; place-items: center;
  width: 32px; height: 32px; margin: 11px -29px -3px auto;
  border-radius: 50%; background: var(--gb-bg); color: var(--gb-ink-2);
}
.gb-modal__close:hover { color: var(--gb-ink); }
.gb-modal__title {
  font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600;
  margin-bottom: var(--gb-sp-lg); padding-right: var(--gb-sp-lg);
}
.gb-modal__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gb-sp-md); flex-wrap: wrap;
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs);
}
.gb-modal__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gb-sp-md); flex-wrap: wrap;
  margin-top: var(--gb-sp-lg);
  font-size: var(--gb-fs-xs);
}
/* Sirsi varianta pro obsahove modaly (napr. „Nakup na firmu a DPH"). */
.gb-modal__dialog--wide { width: min(760px, 92vw); }
/* Dva sloupce potřebují prostor `modal-xl` z v1 (1140), jinak se formulář
   mačká pod 400 px a popisky se lámou. */
.gb-modal__dialog--xwide { width: min(1080px, 94vw); }
.gb-modal__body { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.gb-modal__body > * + * { margin-top: var(--gb-sp-sm); }

/* ── Formulářová pole (modal, přihlášení, jednoduché formuláře) ── */
.gb-form > * + * { margin-top: var(--gb-sp-md); }
.gb-field label { display: block; margin-bottom: 4px; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.gb-field input, .gb-field select, .gb-field textarea {
  width: 100%; min-height: 44px; padding: 0 var(--gb-sp-md);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  background: var(--gb-bg); color: var(--gb-ink);
  font-size: var(--gb-fs-input); /* 16px brání iOS zoomu při fokusu */
}
.gb-field textarea { padding-block: var(--gb-sp-sm); min-height: 120px; }
/* Jen barva rámečku — obrys z :focus-visible zůstává, je to jediné vodítko
   pro klávesnici. */
.gb-field input:focus, .gb-field select:focus, .gb-field textarea:focus { border-color: var(--gb-info); }
.gb-check { display: inline-flex; align-items: center; gap: var(--gb-sp-sm); cursor: pointer; }
.gb-check input { width: 20px; height: 20px; flex: none; accent-color: var(--gb-green); }
.gb-form__err { color: var(--gb-err); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }


/* ══════════════════════════════════════════════════════════════════════
   Vrácení a reklamace — veřejná stránka (`pages/returns-landing.php`)

   Figma tuhle stránku nemá (vznikla 26. 8. 2026 jako zákaznická cesta,
   ne jako návrh). Skládá se proto z komponent, které v návrhu jsou:
   navy pás jako hlavička, karty s `--gb-line-3` rámečkem, zelené CTA
   pilulky, sekce `gb-sec--soft` na krémovém podkladu.
   ══════════════════════════════════════════════════════════════════════ */
.rt-hero { background: var(--gb-navy); color: #fff; }
.rt-hero__in { display: flex; align-items: center; gap: var(--gb-sp-lg); padding-block: var(--gb-sp-2xl); flex-wrap: wrap; }
.rt-hero__ico {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; flex: none;
  border-radius: var(--gb-r-md);
  background: rgba(37, 143, 30, .22); border: 1px solid rgba(37, 143, 30, .55);
  color: #8fd47f;
}
.rt-hero__ico .ico { width: 40px; height: 40px; }
.rt-hero h1 { font-size: var(--gb-fs-2xl); line-height: 1.2; font-weight: 600; }
.rt-hero p { max-width: 720px; margin-top: var(--gb-sp-sm); color: var(--gb-ink-inv); }

.rt-h2 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; }
.rt-sub, .rt-p { color: var(--gb-ink-2); margin-top: var(--gb-sp-xs); }
.rt-lead { margin-bottom: var(--gb-sp-md); }

/* Vstupní blok „Založit žádost" */
.rt-gate { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; overflow: hidden; box-shadow: var(--gb-shadow-sm); }
.rt-gate__head { background: var(--gb-navy); color: #fff; padding: var(--gb-sp-md) var(--gb-sp-lg); }
.rt-gate__head h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }
.rt-gate__body { padding: var(--gb-sp-lg); display: grid; gap: var(--gb-sp-md); }
.rt-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-lg); }
.rt-way { display: flex; flex-direction: column; gap: var(--gb-sp-sm); padding: var(--gb-sp-lg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); }
.rt-way h3 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); }
.rt-way p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.rt-way__form { margin-top: auto; }
.rt-way__ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--gb-r-sm); }
.rt-way__ico .ico { width: 22px; height: 22px; }
.rt-way__ico--acc { background: var(--gb-navy-tint); color: var(--gb-navy); }
.rt-way__ico--guest { background: var(--gb-green-tint); color: var(--gb-green-2); }
.rt-note { display: flex; align-items: flex-start; gap: 8px; font-size: var(--gb-fs-xs); color: var(--gb-ink-2); }
.rt-note .ico { width: 16px; height: 16px; flex: none; margin-top: 3px; }

/* Zakoupené zboží v přihlášeném stavu */
.rt-bought { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-sm); }
.rt-bought__item { display: flex; align-items: center; gap: var(--gb-sp-sm); padding: var(--gb-sp-sm); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); }
.rt-bought__img { width: 56px; height: 56px; flex: none; }
.rt-bought__img img, .rt-bought__img picture { width: 100%; height: 100%; mix-blend-mode: multiply; }
.rt-bought__info { min-width: 0; flex: 1 1 auto; }
.rt-bought__name { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-navy); }
.rt-bought__meta { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }

/* Tři kroky */
.rt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gb-sp-lg); margin-top: var(--gb-sp-lg); }
.rt-step { padding: var(--gb-sp-lg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; }
.rt-step__num {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: var(--gb-sp-sm);
  border-radius: 50%; background: var(--gb-navy); color: #fff; font-weight: 600;
}
.rt-step h3 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); }
.rt-step p { margin-top: var(--gb-sp-xs); color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }

/* Odrážkové seznamy s ikonou */
.rt-list { list-style: none; margin: var(--gb-sp-md) 0 0; padding: 0; display: grid; gap: var(--gb-sp-sm); }
.rt-list li { display: flex; align-items: flex-start; gap: var(--gb-sp-sm); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.rt-list .ico { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--gb-green); }
.rt-list--warn .ico { color: var(--gb-warn); }

/* Vrácení vs reklamace */
.rt-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-lg); margin-top: var(--gb-sp-lg); }
.rt-kind { display: flex; flex-direction: column; gap: var(--gb-sp-xs); padding: var(--gb-sp-lg); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; }
.rt-kind.is-active { border-color: var(--gb-navy); box-shadow: var(--gb-shadow-sm); }
.rt-kind h3 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); }
.rt-kind p { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.rt-kind .gb-btn, .rt-kind__here { margin-top: auto; }
.rt-kind__badge {
  align-self: flex-start; padding: 3px 10px; border-radius: var(--gb-r-pill);
  font-size: var(--gb-fs-xxs); font-weight: 600;
}
.rt-kind__badge--ret { background: var(--gb-green-tint); color: var(--gb-green-2); }
.rt-kind__badge--cla { background: var(--gb-navy-tint); color: var(--gb-navy); }
.rt-kind__here { display: flex; align-items: center; gap: 6px; padding-top: var(--gb-sp-md); font-size: var(--gb-fs-xxs); font-weight: 600; color: var(--gb-ink-2); }
.rt-kind__here .ico { width: 14px; height: 14px; }

/* Dvousloupec — dnes uz jen /garance-nejlepsi-ceny (na strance vratek byl
   blok "Kam poslat" vc. zpatecni adresy, ten 1. 9. 2026 skoncil). */
.rt-ship { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gb-sp-xl); align-items: start; }

/* Tichy odkaz na druhou cestu (na strance reklamaci misto srovnavaciho bloku) */
.rt-crosslink { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--gb-ink-2); }
.rt-crosslink .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* FAQ — <details>, žádný framework */
.rt-faq { display: grid; gap: var(--gb-sp-xs); margin-top: var(--gb-sp-lg); }
.rt-faq__item { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #fff; }
.rt-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md);
  padding: var(--gb-sp-md) var(--gb-sp-lg); cursor: pointer;
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600;
  list-style: none;
}
.rt-faq__item summary::-webkit-details-marker { display: none; }
.rt-faq__item summary .ico { width: 18px; height: 18px; flex: none; color: var(--gb-ink-2); transition: transform .15s ease; }
.rt-faq__item[open] summary .ico { transform: rotate(180deg); }
.rt-faq__item[open] summary { color: var(--gb-navy); }
.rt-faq__body { padding: 0 var(--gb-sp-lg) var(--gb-sp-md); color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.rt-faq__terms { margin-top: var(--gb-sp-md); }

/* Závěrečné CTA */
.rt-cta { padding: var(--gb-sp-2xl) var(--gb-sp-lg); border-radius: var(--gb-r-md); background: var(--gb-bg-4); text-align: center; }
.rt-cta h2 { font-size: var(--gb-fs-lg); line-height: var(--gb-lh-lg); font-weight: 600; }
.rt-cta p { margin: var(--gb-sp-xs) 0 var(--gb-sp-md); color: var(--gb-ink-2); }

@media (max-width: 899px) {
  .rt-ways, .rt-steps, .rt-kinds, .rt-bought, .rt-ship { grid-template-columns: 1fr; }
  .rt-hero__in { gap: var(--gb-sp-md); }
  .rt-hero__ico { width: 60px; height: 60px; }
  .rt-hero__ico .ico { width: 28px; height: 28px; }
}


/* ── Wizard nové žádosti (`pages/documents/claim-new.php`) ────────────────
   Karta položky = hlavička (výběr + fotka + lhůty, sdílí `.rma-item__*`
   se seznamem) + detail, který se rozbalí až po zaškrtnutí. Detail se
   schovává atributem `hidden`, ne `display:none` v inline stylu — stav
   je pak čitelný i pro odečítač obrazovky. */
.rw { display: grid; gap: var(--gb-sp-md); }
.rw-item {
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff;
  padding: var(--gb-sp-md);
}
.rw-item.is-picked { border-color: var(--gb-green); box-shadow: inset 0 0 0 1px var(--gb-green); }
.rw-item.is-settled { background: var(--gb-bg-4); color: var(--gb-ink-2); }
.rw-item__head { display: grid; grid-template-columns: 24px 64px minmax(0, 1fr); align-items: center; gap: var(--gb-sp-md); }
.rw-item__detail { border-top: 1px solid var(--gb-line-3); margin-top: var(--gb-sp-md); padding-top: var(--gb-sp-md); display: grid; gap: var(--gb-sp-md); }

/* Přepínač typu žádosti — dva segmenty, ne dvě samostatná tlačítka. */
/* `justify-self: start` je nutné: rodič je grid a bez toho se `inline-flex`
   segment roztáhne na celou šířku řádku a přepínač vypadá jako dvě pole. */
.rw-kind { display: inline-flex; justify-self: start; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); overflow: hidden; }
.rw-kind button {
  padding: 9px var(--gb-sp-lg); border: 0; background: #fff; color: var(--gb-ink);
  font-family: inherit; font-size: var(--gb-fs-xs); font-weight: 600; cursor: pointer;
}
.rw-kind button + button { border-left: 1px solid var(--gb-line-4); }
.rw-kind button.is-on { background: var(--gb-green); color: #fff; }

.rw-kindbadge {
  display: inline-block; align-self: start;
  padding: 3px 12px; border-radius: var(--gb-r-pill);
  font-size: var(--gb-fs-xxs); font-weight: 600;
}
.rw-kindbadge--claim { background: var(--gb-promo-bg); color: var(--gb-promo); }
.rw-kindbadge--ret { background: var(--gb-green-tint); color: var(--gb-green-2); }
.rw-kindbadge--storno { background: var(--gb-warn-bg); color: #8a6d00; }
.rw-hint { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); }

.rw-fields { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--gb-sp-md); align-items: start; }
.rw-fields__note textarea { min-height: 72px; }

/* Strukturovaný důvod vrácení + nabídka jiné velikosti (výměna 1:1).
   Blok `.rw-swap` je v DOMu jen tehdy, když server našel kandidáty; JS ho
   pak ještě schovává atributem `hidden`, dokud není zvolena vratka s důvodem
   „nesedí velikost". Prázdná nabídka se nevykresluje vůbec — polovina rodin
   druhou velikost skladem nemá a prázdný stav by vypadal jako chyba. */
.rw-reason select { max-width: 340px; }
.rw-swap {
  border: 1px solid var(--gb-green); border-radius: var(--gb-r-md);
  background: var(--gb-green-tint); padding: var(--gb-sp-md);
  display: grid; gap: var(--gb-sp-sm);
}
.rw-swap__title { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-navy); }
.rw-swap__opts { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); }
.rw-swap__opt {
  display: inline-flex; align-items: center; gap: var(--gb-sp-xs);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  background: #fff; padding: 6px 10px; cursor: pointer;
}
.rw-swap__opt input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--gb-green); }
.rw-swap__opt > span { display: flex; flex-direction: column; line-height: 1.15; }
.rw-swap__opt strong { font-size: var(--gb-fs-xs); color: var(--gb-navy); }
.rw-swap__opt em { font-style: normal; font-size: var(--gb-fs-xxs); color: var(--gb-green-2); }
.rw-swap__hint { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); }

/* Bloky pod seznamem (krycí body, kam vrátit platbu) */
.rw-box { border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-md); background: #fff; padding: var(--gb-sp-lg); display: grid; gap: var(--gb-sp-sm); }
.rw-box > h2 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); }
.rw-radio { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--gb-sp-sm); align-items: start; cursor: pointer; }
.rw-radio input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gb-green); }
.rw-radio strong { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.rw-radio .gb-muted { display: block; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); }
.rw-bank { border-top: 1px solid var(--gb-line-3); padding-top: var(--gb-sp-md); display: grid; gap: var(--gb-sp-md); }
.rw-or { text-align: center; font-size: var(--gb-fs-xxs); letter-spacing: .04em; text-transform: uppercase; color: var(--gb-mut-inv); }

.rw-actions { display: flex; align-items: center; gap: var(--gb-sp-sm); flex-wrap: wrap; }

@media (max-width: 899px) {
  .rw-item__head { grid-template-columns: 24px 56px minmax(0, 1fr); }
  .rw-fields { grid-template-columns: 1fr; }
}


/* ── Detail žádosti (`pages/documents/claim-detail.php`) ────────────────── */
.rd-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--gb-sp-xs) var(--gb-sp-lg); margin: 0; }
.rd-kv dt { color: var(--gb-ink-2); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.rd-kv dd { margin: 0; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }

.rd-media { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); }
.rd-photo, .rd-file {
  display: block; width: 110px; height: 110px; overflow: hidden;
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: var(--gb-bg-4);
}
/* Miniatura přílohy se ořezává SCHVÁLNĚ (`cover`) — je to náhled do mřížky,
   ne produktová fotka. Proto výjimka z globálního `img { object-fit: contain }`. */
.rd-photo img { width: 100%; height: 100%; object-fit: cover; }
.rd-file {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: var(--gb-sp-sm); text-align: center; text-decoration: none;
  color: var(--gb-ink-2); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs);
}
.rd-file .ico { width: 28px; height: 28px; color: var(--gb-promo); }
.rd-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.rd-video { position: relative; width: 190px; height: 110px; overflow: hidden; border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm); background: #000; }
/* `contain`, ne `cover`: videa z mobilu jsou na výšku a cover z nich udělá proužek. */
.rd-video video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.rd-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; }
.rd-video__play .ico { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)); }
.rd-video__tag { position: absolute; left: 0; bottom: 0; padding: 1px 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: var(--gb-fs-xxs); pointer-events: none; }
.rd-vfail {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 190px; height: 110px; padding: var(--gb-sp-sm); text-align: center;
  border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm);
  background: var(--gb-bg-4); color: var(--gb-ink-2); font-size: var(--gb-fs-xxs);
}
.rd-lightbox { position: fixed; inset: 0; z-index: var(--gb-z-modal); display: flex; align-items: center; justify-content: center; background: rgba(5, 24, 52, .88); }
.rd-lightbox video { max-width: 92vw; max-height: 92vh; background: #000; }

/* Zprávy, které zákazník k žádosti sám doplnil (blok „Doplnit k žádosti"). */
.rd-msgs { list-style: none; margin: 0 0 var(--gb-sp-md); padding: 0; }
.rd-msgs li { padding: var(--gb-sp-sm) 0; border-top: 1px solid var(--gb-line-3); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.rd-msgs li:first-child { border-top: 0; padding-top: 0; }
.rd-msgs p { margin: 2px 0 0; white-space: pre-wrap; }


/* ── Informace o firmě / profil (`pages/admin/company-info.php`) ────────── */
.ac-boxhead { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; }
.ac-boxhead h2 { font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; color: var(--gb-navy); }
.ac-subhead { font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-ink-2); }
.rw-box.is-default { border-color: var(--gb-green); }
.ac-newaddr { border: 1px dashed var(--gb-line-4); border-radius: var(--gb-r-sm); padding: var(--gb-sp-md); display: grid; gap: var(--gb-sp-sm); }

/* Formulář adresy — tři řádky s různým dělením, jako ve v1 (5/7, 5/3/4, 4/4). */
.ac-addr { display: grid; gap: var(--gb-sp-md); }
/* `start`, ne `end`: pole „E-mail" má pod sebou nápovědu („Hlavní e-mail
   této adresy"), takže při zarovnání na spodní hranu vytlačila input nahoru
   a vedle „Telefonu" seděl o kus výš. Popisky jsou tu jednořádkové, takže
   zarovnání nahoru drží inputy na jedné lince.
   (Půlřádky s RŮZNĚ dlouhými popisky — `.gb-field--half` — mají naopak `end`,
   viz komentář tam.) */
.ac-addr__row { display: grid; gap: var(--gb-sp-md); align-items: start; }
.ac-addr__row--name { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ac-addr__row--city { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
.ac-addr__row--contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-addr__acts { display: flex; gap: var(--gb-sp-sm); justify-content: flex-end; flex-wrap: wrap; }
/* Buňka, ve které je místo pole tlačítko — musí sednout na stejnou linku. */
.ac-field--btn { display: flex; align-items: flex-end; }
.ac-btn-del { color: var(--gb-err-ink); border-color: #ffc9c2; }
.ac-btn-del:hover { background: #ffe9e6; border-color: var(--gb-err); }

/* E-maily adresy */
.ac-emails { display: grid; gap: 6px; border-top: 1px solid var(--gb-line-3); padding-top: var(--gb-sp-md); }
.ac-emails__head { font-size: var(--gb-fs-xs); font-weight: 600; color: var(--gb-ink-2); }
.ac-email { display: flex; align-items: center; gap: var(--gb-sp-sm); flex-wrap: wrap; padding: 6px 10px; border-radius: var(--gb-r-sm); background: var(--gb-bg-4); }
.ac-email__addr { min-width: 180px; font-size: var(--gb-fs-xs); font-weight: 500; }
.ac-email__nl { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }   /* --gb-mut-inv mělo na šedém řádku pod 3 : 1 */
.ac-email__nl.is-on { color: var(--gb-green-2); }
.ac-email__nlhint { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }   /* odhlášená adresa: místo tlačítka nápověda */
.ac-emailadd { display: flex; gap: var(--gb-sp-sm); align-items: center; margin-top: var(--gb-sp-sm); flex-wrap: wrap; }
.ac-emailadd input {
  flex: 1 1 240px; max-width: 300px; min-height: 36px; padding: 0 var(--gb-sp-md);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff;
  font-size: var(--gb-fs-xs);
}

/* Pilulka jako drobná akce v řádku (výchozí e-mail, newsletter, smazat). */
.ac-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: var(--gb-r-pill);
  border: 1px solid var(--gb-line-4); background: #fff; color: var(--gb-ink-2);
  font-family: inherit; font-size: var(--gb-fs-xxs); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.ac-pill:hover { border-color: var(--gb-navy-mut); color: var(--gb-ink); }
.ac-pill--on { color: var(--gb-green-2); border-color: var(--gb-green-tint-2); }
.ac-pill--on:hover { background: var(--gb-green-tint); }
.ac-pill--off { color: var(--gb-ink-2); }
.ac-pill--del { color: var(--gb-err-ink); padding-inline: 10px; }
.ac-pill--del:hover { background: #ffe9e6; border-color: var(--gb-err); color: var(--gb-err-ink); }

@media (max-width: 899px) {
  .ac-addr__row--name, .ac-addr__row--city, .ac-addr__row--contact { grid-template-columns: 1fr; }
  .ac-addr__acts { justify-content: stretch; }
  .ac-addr__acts .gb-btn { flex: 1 1 auto; }
}


/* ── Moje fotky (`pages/documents/my-photos.php`) ───────────────────────── */
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gb-sp-sm); }
.ph-card { position: relative; margin: 0; border-radius: var(--gb-r-md); overflow: hidden; background: var(--gb-bg-4); }
.ph-card__open { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* Náhled se ořezává SCHVÁLNĚ — je to čtvercová dlaždice galerie, ne
   produktová fotka. Výjimka z globálního `img { object-fit: contain }`. */
.ph-card__open img { width: 100%; height: 100%; object-fit: cover; }
.ph-card__meta {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 6px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  color: #fff; font-size: var(--gb-fs-xxs); pointer-events: none;
}
.ph-card__acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s ease; }
.ph-card:hover .ph-card__acts, .ph-card:focus-within .ph-card__acts { opacity: 1; }
/* Na dotyku není hover — tam jsou akce vidět pořád, jinak by nešly použít. */
@media (hover: none) { .ph-card__acts { opacity: 1; } }
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--gb-r-sm);
  background: rgba(255, 255, 255, .94); color: var(--gb-ink); cursor: pointer;
}
.ph-btn .ico { width: 16px; height: 16px; }
.ph-btn:hover { background: #fff; }
.ph-btn--del:hover { background: var(--gb-err); color: #fff; }

.ph-view img { max-width: 100%; max-height: 70vh; margin: 0 auto; }
.ph-view .gb-modal__foot { justify-content: center; }


/* ── Podmínky garance (`pages/guarantee-terms.php`) ─────────────────────
   Staví na komponentách stránky vrácení (rt-*) — jsou to dvě informační
   stránky téhož druhu. Tady jen tři odchylky. */
.gt-list--tight { margin-top: var(--gb-sp-sm); gap: var(--gb-sp-xs); }
.gt-list--no .ico { color: var(--gb-err); }
.gt-badge--manual { background: var(--gb-warn-bg); color: #8a6d00; }
.gt-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-lg); flex-wrap: wrap; text-align: left; }
.gt-cta h2, .gt-cta p { text-align: left; }
.gt-cta p { margin-bottom: 0; }
.gt-disclaimer { margin-top: var(--gb-sp-md); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); }
@media (max-width: 899px) { .gt-cta { flex-direction: column; align-items: stretch; text-align: center; } }


/* ── Detailní vyhledávání (`pages/advanced-search.php`) ─────────────────── */
.as { display: grid; gap: var(--gb-sp-md); }
.as__form { gap: var(--gb-sp-md); }
.as__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gb-sp-md); align-items: end; }
.as__stock { padding-bottom: var(--gb-sp-sm); }
.as__brands {
  max-height: 240px; overflow-y: auto;
  padding: var(--gb-sp-md); border: 1px solid var(--gb-line-3); border-radius: var(--gb-r-sm);
  background: var(--gb-bg-4);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gb-sp-xs);
}
.as__brands .gb-check { font-size: var(--gb-fs-xs); }
.as__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-md); }
.as__cats { display: flex; flex-wrap: wrap; gap: var(--gb-sp-xs); }
@media (max-width: 899px) {
  .as__row { grid-template-columns: 1fr; }
  .as__cols { grid-template-columns: 1fr; }
}


/* ── Zákaznická nabídka (`pages/offer-detail.php`) ───────────────────────
   Rozvržení jako košík: položky vlevo, lepivý souhrn vpravo. Ve v1 to stálo
   na `order-*` třídách z `dist/css/master-golf.css`, který v2 nenačítá —
   karty tak neměly rámeček ani stín. */
.of { padding-block: var(--gb-sp-lg) var(--gb-sp-2xl); display: grid; gap: var(--gb-sp-md); }
.of__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-sp-md); flex-wrap: wrap; }
.of__head h1 { font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600; }

.of__cards { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gb-sp-md); align-items: stretch; }
.of-card { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
.of-card__label { font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }
.of-card__addrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gb-sp-md); margin-top: var(--gb-sp-xs); }
.of-card__addrs:has(> :only-child) { grid-template-columns: 1fr; }
.of-card__stamp { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); margin-top: auto; }
.of-card select { width: 100%; min-height: 40px; padding: 0 var(--gb-sp-sm); border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm); background: #fff; font-size: var(--gb-fs-xs); }

.of__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gb-sp-md); align-items: start; }
.of-sticky { position: sticky; top: var(--gb-sp-md); }

/* Řádek položky: výběr · fotka · popis · množství · cena */
.of-item {
  display: grid; grid-template-columns: 24px 72px minmax(0, 1fr) 60px 140px;
  align-items: center; gap: var(--gb-sp-md);
  padding: var(--gb-sp-md) 0; border-top: 1px solid var(--gb-line-3);
}
.of-item:first-of-type { border-top: 0; }
.of-item.is-off { opacity: .5; }
.of-item__pick { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.of-item__pick input { width: 20px; height: 20px; accent-color: var(--gb-green); cursor: pointer; }
.of-item__img { display: block; width: 72px; height: 72px; }
.of-item__img img, .of-item__img picture { width: 100%; height: 100%; mix-blend-mode: multiply; }
.of-item__body { min-width: 0; }
.of-item__name { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; }
.of-item__name a { color: var(--gb-navy); text-decoration: none; }
.of-item__name a:hover { text-decoration: underline; }
.of-item__meta, .of-item__stock { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); margin-top: 2px; }
.of-item__instock { color: var(--gb-green-2); }
.of-item__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.of-item__flags:empty { display: none; }
.of-item__qty { text-align: right; font-size: var(--gb-fs-xs); white-space: nowrap; }
.of-item__price { text-align: right; }
.of-item__price s { display: block; font-size: var(--gb-fs-xxs); color: var(--gb-ink-2); }
.of-item__price strong { display: block; font-size: var(--gb-fs-sm); white-space: nowrap; }
.of-item__price .gb-muted { display: block; font-size: var(--gb-fs-xxs); white-space: nowrap; }

/* Souhrn */
.of-sum { display: grid; gap: 6px; }
.of-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gb-sp-md); font-size: var(--gb-fs-xs); }
.of-sum__row--total { font-size: var(--gb-fs-lg); font-weight: 600; padding-top: var(--gb-sp-sm); border-top: 1px solid var(--gb-line-3); }
.of-sum__row--save { color: var(--gb-green-2); }
.of-sum__note { font-size: var(--gb-fs-xxs); }
.of-sum__acts { display: grid; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); }
.of-sum__acts .gb-muted { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); }
.of__challenge { max-width: 560px; }

@media (max-width: 1099px) {
  .of__cards { grid-template-columns: 1fr; }
  .of__grid { grid-template-columns: 1fr; }
  .of-sticky { position: static; }
}
@media (max-width: 599px) {
  .of-item { grid-template-columns: 24px 56px minmax(0, 1fr); }
  .of-item__qty, .of-item__price { grid-column: 2 / -1; text-align: left; }
  .of-item__price { display: flex; align-items: baseline; gap: var(--gb-sp-sm); }
  .of-item__price s, .of-item__price strong, .of-item__price .gb-muted { display: inline; }
}


/* ── „Našli jsme i tohle" na stránce hledání (`components/search-extras.php`) ── */
.se { display: grid; gap: var(--gb-sp-md); margin-bottom: var(--gb-sp-lg); }
.se__title { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; color: var(--gb-ink-2); margin-bottom: var(--gb-sp-xs); }
.se__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gb-sp-xs); }
.se__cat, .se__brand {
  display: flex; align-items: center; gap: var(--gb-sp-sm);
  min-height: 52px; padding: var(--gb-sp-xs) var(--gb-sp-md);
  border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-sm);
  background: #fff; color: var(--gb-ink); text-decoration: none;
}
.se__cat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.se__cat:hover, .se__brand:hover { border-color: var(--gb-navy-mut); background: var(--gb-bg-4); }
.se__name { font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); font-weight: 600; }
.se__parent { font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); }
.se__logo { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; }
.se__logo img, .se__logo picture { max-width: 100%; max-height: 100%; width: auto; height: auto; mix-blend-mode: multiply; }

/* ── Patička ──
   Figma patičku NEMÁ (v exportu je sandbox PeckaDesignu), takže rám je náš
   a obsah se bere z editovatelného bloku ART_FOOTER ($footer_html). Blob
   nesmíme přepisovat, proto níž kompatibilní vrstva .gb-footer__legacy —
   všechno v ní je scoped, ať nic neuteče do zbytku stránky. */
.gb-footer { background: var(--gb-navy); color: var(--gb-ink-inv); margin-top: var(--gb-sp-3xl); }
/* Lišty přilepené ke spodní hraně okna (nákupní lišta detailu, spodní navigace v3)
   leží přes obsah: o jejich výšku se prodlouží patička, aby šel konec stránky
   odrolovat až nad lištu. Výšku právě viditelné lišty měří gb.js §8 do --gb-dock. */
.gb-footer { padding-bottom: var(--gb-dock, 0px); }
.gb-footer a { color: #fff; }
.gb-footer__bar { border-top: 1px solid var(--gb-navy-line); }
.gb-footer__bar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gb-sp-md); flex-wrap: wrap;
  padding-block: var(--gb-sp-md);
  font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-navy-mut);
}
.gb-footer__legal { display: flex; flex-wrap: wrap; gap: var(--gb-sp-md); }
.gb-footer__legal a { color: var(--gb-navy-mut); text-decoration: none; }
.gb-footer__legal a:hover { text-decoration: underline; }

/* Kompatibilní vrstva pro blob ART_FOOTER (IS_SET_TEXTS.STI_ID = 525591).
   Selektory odpovídají tomu, co v datech opravdu je (ověřeno na CZ blobu):
   #fullscreen-items, #newsletter, footer .grid.large > .wrap > {.copyright,
   .footer-nav, .partners}. Blob nemá žádné vlastní CSS, v1 mu ho dodávala
   dist/css — tady si ho dodáváme sami a JEN uvnitř .gb-footer__legacy. */
.gb-footer__legacy .grid.large {
  max-width: var(--gb-container); margin-inline: auto;
  padding-inline: var(--gb-gutter);
}
/* USP pás — světlý předěl mezi obsahem stránky a navy patičkou. Podklad musí
   jít od kraje ke kraji, obsah se přitom drží obsahové šířky, proto padding
   počítaný z max() a ne max-width + margin (to by na širokém okně nakreslilo
   světlý obdélník uprostřed navy pásu). */
.gb-footer__legacy #fullscreen-items {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gb-sp-lg);
  padding-block: var(--gb-sp-2xl);
  padding-inline: max(var(--gb-gutter), calc((100% - var(--gb-container)) / 2 + var(--gb-gutter)));
  background: var(--gb-bg-4); color: var(--gb-ink);
  text-align: center;
}
.gb-footer__legacy #fullscreen-items > .title {
  grid-column: 1 / -1;
  font-size: var(--gb-fs-xl); line-height: var(--gb-lh-xl); font-weight: 600;
}
.gb-footer__legacy #fullscreen-items .item svg { width: 64px; height: 64px; margin: 0 auto var(--gb-sp-sm); }
.gb-footer__legacy #fullscreen-items .item > span { display: block; font-size: var(--gb-fs-sm); line-height: var(--gb-lh-sm-tight); font-weight: 600; }
.gb-footer__legacy #fullscreen-items .item p { margin-top: var(--gb-sp-xs); font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); color: var(--gb-ink-2); }
/* Newsletter (Ecomail) — navy pás, pole jako pilulka se zeleným tlačítkem. */
.gb-footer__legacy #newsletter { background: var(--gb-navy); color: #fff; padding-block: var(--gb-sp-xl); }
.gb-footer__legacy .container-newsletter {
  display: flex; align-items: center; justify-content: center;
  gap: var(--gb-sp-lg); flex-wrap: wrap;
}
.gb-footer__legacy .container-newsletter svg { flex: none; }
.gb-footer__legacy .news_form {
  display: flex; align-items: stretch;
  width: min(560px, 100%); height: 44px;
  background: #fff; border-radius: var(--gb-r-pill); overflow: hidden;
}
.gb-footer__legacy .news_form input {
  flex: 1 1 auto; min-width: 0; border: 0;
  padding: 0 var(--gb-sp-lg);
  background: #fff; color: var(--gb-ink);
  font-size: var(--gb-fs-input);
}
.gb-footer__legacy .news_form input::placeholder { color: var(--gb-mut-inv); }
.gb-footer__legacy .news_form .btn {
  flex: none; padding: 0 var(--gb-sp-lg);
  background: var(--gb-green); color: #fff;
  border-radius: var(--gb-r-pill);
  font-size: var(--gb-fs-xs); font-weight: 600;
}
.gb-footer__legacy .news_form .btn:hover { background: var(--gb-green-2); }
/* Tělo patičky: kontakt vlevo, tři sloupce odkazů vpravo, loga přes celou šíři. */
.gb-footer__legacy footer .wrap {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--gb-sp-xl);
  padding-block: var(--gb-sp-2xl) var(--gb-sp-lg);
}
/* Logo v blobu je navy varianta (dist/images/logo-golfbrothers.svg, fill
   #092857) — na navy podkladu by zmizelo. Přebarvit ho jde jen filtrem,
   src z DB měnit nesmíme. */
.gb-footer__legacy .copyright .flb-img {
  width: 200px; max-width: 100%; height: auto;
  margin-bottom: var(--gb-sp-md);
  filter: brightness(0) invert(1);
}
.gb-footer__legacy .copyright .info span { display: block; font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); }
/* Sociální sítě: blob veze jen `<a class="social fb"><span>Facebook</span></a>`
   (v1 na to sázela sprite z dist/). V2 kreslí značku maskou z data URI, aby
   se dala obarvit currentColor a nepřibyl další request. Text zůstává v DOM
   jako přístupné jméno odkazu, jen je vizuálně schovaný. */
.gb-footer__legacy .socials { display: flex; flex-wrap: wrap; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); }
.gb-footer__legacy .socials > span { display: inline-flex; }
.gb-footer__legacy .socials a.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gb-navy-mut); color: #fff;
  text-decoration: none; overflow: hidden;
}
.gb-footer__legacy .socials a.social:hover { background: rgba(255, 255, 255, .12); }
.gb-footer__legacy .socials a.social span {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.gb-footer__legacy .socials a.social::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.gb-footer__legacy .socials a.fb::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3 0-1.3-.13-2.47-.13-2.44 0-4.11 1.49-4.11 4.23v2.2H7.4V13h2.72v8h3.38z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3 0-1.3-.13-2.47-.13-2.44 0-4.11 1.49-4.11 4.23v2.2H7.4V13h2.72v8h3.38z'/%3E%3C/svg%3E"); }
.gb-footer__legacy .socials a.yt::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8ZM10 15.2V8.8l5.2 3.2-5.2 3.2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8ZM10 15.2V8.8l5.2 3.2-5.2 3.2Z'/%3E%3C/svg%3E"); }
.gb-footer__legacy .socials a.tw::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 3h3l-6.6 7.5L21.8 21h-6l-4.7-6.1L5.7 21h-3l7-8-6.9-10h6.1l4.3 5.6L17.5 3Zm-1 16h1.7L8.1 4.8H6.3L16.5 19Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 3h3l-6.6 7.5L21.8 21h-6l-4.7-6.1L5.7 21h-3l7-8-6.9-10h6.1l4.3 5.6L17.5 3Zm-1 16h1.7L8.1 4.8H6.3L16.5 19Z'/%3E%3C/svg%3E"); }
.gb-footer__legacy .socials a.in::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9A5.5 5.5 0 0 1 16.5 22h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4h-9ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.5-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9A5.5 5.5 0 0 1 16.5 22h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4h-9ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.5-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E"); }
/* Neznámá síť (blob může přibýt o další) — ať odkaz nezmizí, zůstane textem. */
.gb-footer__legacy .socials a.social:not(.fb):not(.yt):not(.tw):not(.in) {
  width: auto; padding-inline: var(--gb-sp-md); border-radius: var(--gb-r-pill);
  font-size: var(--gb-fs-xs);
}
.gb-footer__legacy .socials a.social:not(.fb):not(.yt):not(.tw):not(.in) span { position: static; width: auto; height: auto; margin: 0; clip: auto; }
.gb-footer__legacy .socials a.social:not(.fb):not(.yt):not(.tw):not(.in)::before { display: none; }
.gb-footer__legacy .footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gb-sp-lg); }
.gb-footer__legacy .footer-nav ul { list-style: none; margin: 0; padding: 0; }
.gb-footer__legacy .footer-nav a {
  display: flex; align-items: center; min-height: 30px;
  font-size: var(--gb-fs-xs); line-height: var(--gb-lh-xs); text-decoration: none;
}
.gb-footer__legacy .footer-nav a:hover { text-decoration: underline; }
/* Loga platebních metod a dopravců jsou barevná pro světlé pozadí, na navy
   by se ztratila — proto vlastní bílý pás, ne filtr (filtr by ubil barvy). */
.gb-footer__legacy .partners {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--gb-sp-lg);
  padding: var(--gb-sp-md) var(--gb-sp-lg);
  background: #fff; border-radius: var(--gb-r-md);
}
.gb-footer__legacy .partners img { max-height: 28px; width: auto; }
/* DE blob (REG_ID 2) nese `img.d-none.flb-img` — schované Bootstrapem, který
   se ve v2 nenačítá. Bez tohohle pravidla by se v DE patičce objevilo logo
   navíc. Scoped do blobu, ať se .d-none neplete do zbytku stránky. */
.gb-footer__legacy .d-none { display: none !important; }
.gb-footer__legacy .partners .author { margin-left: auto; }
.gb-footer__legacy .partners .author a { color: var(--gb-navy); font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); text-decoration: none; }
.gb-footer__legacy .partners .author a:hover { text-decoration: underline; }
@media (max-width: 1099px) {
  .gb-footer__legacy .grid.large { padding-inline: var(--gb-sp-md); }
  .gb-footer__legacy #fullscreen-items { padding-inline: var(--gb-sp-md); }
}
@media (max-width: 899px) {
  .gb-footer__legacy #fullscreen-items { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--gb-sp-xl); }
  .gb-footer__legacy footer .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--gb-sp-lg); padding-block: var(--gb-sp-xl) var(--gb-sp-md); }
  .gb-footer__legacy .footer-nav { grid-template-columns: minmax(0, 1fr); gap: var(--gb-sp-sm); }
  .gb-footer__legacy .partners { gap: var(--gb-sp-md); }
  .gb-footer__legacy .partners .author { margin-left: 0; flex-basis: 100%; }
}

/* ── Fallback stránky (obsah v1 v rámu v2) ──
   $tpl_fallback přidá na <body> třídu gb-legacy. Stránka uvnitř nemá vlastní
   kontejner, takže by text lepil na kraj okna; obalení řeší CSS, ne šablona. */
body.gb-legacy main {
  max-width: var(--gb-container); margin-inline: auto;
  padding: var(--gb-sp-lg) var(--gb-gutter) var(--gb-sp-2xl);
}
@media (max-width: 1099px) { body.gb-legacy main { padding-inline: var(--gb-sp-md); } }
/* ⚠️ Omezeno na <main>, ne na celé body: nevázané `body.gb-legacy img` je
   v souboru poslední, takže by přebilo i `.gb-logo img{height:44px}` a na
   všech fallback stránkách by rozhodilo logo v hlavičce. Sem patří jen
   obrázky ze staré šablony. */
body.gb-legacy main img { height: auto; }

/* ── Detail objednávky a výsledek platby: logo metody, platba převodem, živý stav (18. 10. 2026) ── */
/* Nezaplacená objednávka: pod sdělením blok platby z detailu objednávky (order-summary.php)
   v šířce detailu — hlavička zůstává na středu, detail se čte zleva. */
.pr--order { max-width: 1080px; padding-block: var(--gb-sp-xl); }
.pr__order { margin-top: var(--gb-sp-lg); text-align: left; }
.pr__live:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); font-size: var(--gb-fs-xs); color: var(--gb-ink-2); }
/* Způsob platby a dopravy s logem jako v pokladně (DashboardController::orderMethodLogos). */
.ac-method { display: flex; align-items: center; gap: var(--gb-sp-sm); }
.ac-method__logo { flex: none; width: 60px; height: 30px; object-fit: contain; }
/* Platba převodem: účet, QR a živý stav platby (templates/v2/components/order-bank-transfer.php). */
.ac-bt__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gb-sp-md) var(--gb-sp-xl); align-items: center; }
.ac-bt__qr { display: grid; justify-items: center; gap: var(--gb-sp-xs); margin: 0; }
.ac-bt__qr img { width: 180px; height: 180px; image-rendering: pixelated; background: #fff; }
.ac-bt__qr figcaption { max-width: 180px; font-size: var(--gb-fs-xxs); line-height: var(--gb-lh-xxs); color: var(--gb-ink-2); text-align: center; }
.ac-bt__data { display: grid; gap: var(--gb-sp-sm); margin: 0; }
.ac-bt__row { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); gap: var(--gb-sp-sm); align-items: center; }
.ac-bt__row dt { font-size: var(--gb-fs-xs); color: var(--gb-ink-2); }
.ac-bt__row dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gb-sp-xs) var(--gb-sp-sm); margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ac-bt__copy {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--gb-line-4); border-radius: var(--gb-r-pill);
  background: var(--gb-bg); color: var(--gb-navy); font: 600 var(--gb-fs-xxs)/1 var(--gb-font); cursor: pointer;
}
.ac-bt__copy:hover { border-color: var(--gb-navy); }
.ac-bt__copy:focus-visible { outline: 2px solid var(--gb-info); outline-offset: 2px; }
.ac-bt__copy.is-done { border-color: var(--gb-green-2); color: var(--gb-green-2); }
.ac-bt__state { display: flex; align-items: center; gap: var(--gb-sp-sm); margin-top: var(--gb-sp-md); font-size: var(--gb-fs-xs); color: var(--gb-ink-2); }
/* Živý stav platby (assets/v2/js/gb-paywatch.js): tečka pulzuje, dokud se čeká. */
:is(.ac-bt__state, .pr__live).is-live::before {
  content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gb-green);
  animation: ac-bt-pulse 1.6s ease-in-out infinite;
}
:is(.ac-bt__state, .pr__live).is-paid { color: var(--gb-green-2); font-weight: 600; }
@keyframes ac-bt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { :is(.ac-bt__state, .pr__live).is-live::before { animation: none; } }
@media (max-width: 599px) {
  .ac-bt__grid { grid-template-columns: minmax(0, 1fr); }
  .ac-bt__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ── Sloučení košíku po přihlášení (templates/v2/components/basket-merge-popup.php, gb.js §9, 18. 10. 2026) ──
   Dialog bez křížku — rozhodnutí je povinné; horní okraj, který jinak dělá křížek, dává výplň. */
.gb-merge { width: min(520px, 92vw); padding-top: var(--gb-sp-xl); }
.gb-merge__list { display: grid; max-height: min(40vh, 320px); overflow-y: auto; margin-top: var(--gb-sp-md); padding: 0; border-top: 1px solid var(--gb-line-4); }
.gb-merge__item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--gb-sp-sm);
  padding: 6px 0; border-bottom: 1px solid var(--gb-line-4); font-size: var(--gb-fs-xs); line-height: 1.35;
}
.gb-merge__img img { display: block; width: 48px; height: 48px; object-fit: contain; }
.gb-merge__qty { white-space: nowrap; color: var(--gb-ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {   /* na telefonu cena pod názvem, ať se název neláme po slovech */
  .gb-merge__item { grid-template-columns: 48px minmax(0, 1fr); row-gap: 0; }
  .gb-merge__qty { grid-column: 2; }
}
.gb-merge__foot { flex-wrap: wrap-reverse; }
/* Tlačítka pod sebou přes celou šířku (jako ve v1), hlavní volba nahoře. */
.gb-merge__foot .gb-btn { flex: 1 1 100%; white-space: normal; text-align: center; }