/* ============================================================
   GB v4 — vrstva nad v3 (design/DESIGN_V4.md)

   Zadání majitele 14. 10. 2026: šablona, která bere to nejlepší z v1–v3.
     - základní šířka 1440 px jako ve v1;
     - hlavička ve stylu v3 (navy proužek, logo, hledání, tlačítka s popiskem)
       + Info a Kontakt s menu po najetí myší jako ve v1;
     - megamenu mezi v2 a v3 (obrázky podkategorií, loga značek, odkaz na
       celou kategorii);
     - na telefonu rozvržení hlavičky z v2;
     - výběr varianty s tečkou dostupnosti v rohu (vzor z claude.design);
     - patička bez světlého pruhu log;
     - vzhled je pevný (konfigurace majitele z 15. 10. 2026): modrá lišta se zeleným
       proužkem, písma v1 (Bebas Neue v menu a nadpisech, Roboto v textu), spodní lišta
       na telefonu jako plovoucí pilulka, kategorie homepage v dlaždicích.
       Varianty z beta nástrojů (atributy `data-v4-<klíč>` na <html>) zmizely 18. 10. 2026,
       když se v4 stala výchozí šablonou. Jejich pravidla nesou prefix `html:root` — drží
       původní specifičnost (0,1,1) selektoru varianty, bez něj by část pravidel prohrála
       s gb3.css (např. spodní lišta na detailu). Prefix proto nemazat bez kontroly.

   Načítá se PO assets/v2/css/gb.css a assets/v3/css/gb3.css.
   Kontrast (WCAG AA) drží barvy v3: zelená tlačítek --v3-green-cta, zelený
   text --v3-green-ink; světlé odstíny jen na tmavém podkladu.
   ============================================================ */

/* ── Písma z v1 (self-hosted v dist/webfonts, same-origin; SIL OFL 1.1 / Apache 2.0),
   přednačítá je templates/v4/layout/top.php. ── */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/dist/webfonts/BebasNeue-Regular.woff2') format('woff2'), url('/dist/webfonts/BebasNeue-Regular.woff') format('woff');
}
/* Vlastní jméno rodiny: „Roboto" je v záložních stacích písem v3 (za Exo 2) — pod
   tím jménem by prohlížeč stahoval soubor kvůli každému znaku, který Exo 2 nemá. */
@font-face {
  font-family: 'Roboto V1';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/dist/webfonts/Roboto-Regular.woff2') format('woff2'), url('/dist/webfonts/Roboto-Regular.woff') format('woff');
}

/* ── 1) Tokeny ── */
:root {
  --gb-container: 1440px;               /* základní šířka jako ve v1 */
  --gb-gutter: clamp(16px, 3vw, 40px);
  /* Písmo textu jako ve v1 (Roboto): v3 kreslí všechno z --v3-font (a v2 z --gb-font
     = --v3-font), takže jedna proměnná přepne celé písmo stránky. */
  --v4-font: 'Roboto V1', Roboto, Arial, sans-serif;
  --v3-font: var(--v4-font);
  /* Nadpisy jako ve v1: Bebas Neue (seznam prvků v bloku „Nadpisy" níž). Bez Exo 2
     v záloze — znak, který Bebas nemá, by kvůli sobě stáhl celé písmo v3. */
  --v4-head-font: 'Bebas Neue', Arial, sans-serif;
  --v4-head-style: normal;
  --v4-head-weight: 400;
  --v4-head-ls: .01em;
  /* Lišta kategorií — Bebas přesně jako ve v1 (master-golf.css: 1.25rem, bez prostrkání) */
  --v4-nav-font: 'Bebas Neue', Arial, sans-serif;
  --v4-nav-size: 20px;
  --v4-nav-weight: 400;
  --v4-nav-ls: 0;
  --v4-amber: #c77c00;                  /* tečka „u dodavatele" */
  --v4-amber-line: #e3b04b; --v4-amber-ink: #a35f00;   /* text „u dodavatele" (AA na bílé) */
  --v4-amber-bg: #fff8ea;
}

/* ── 2) Nadpisy ──
   Všechny prvky, kterým v3 dává `font: italic 800 … var(--v3-font)`, berou rodinu,
   řez a sklon z proměnných — velikost zůstává z v3. `:is()` drží specifičnost
   nejsilnějšího prvku seznamu (body.v3 .gb-sec__bar h2 apod.), proto pravidlo vyhraje. */
body.v4 :is(.v3-h2, .v3-hero__sale-title, .v3-deal__title, .v3-tallcard__title, .v3-mega__promo-title,
  .v3-side__title, .v3-of__h, .v3-opage__title, .gb-mnav__back,
  .gb-sec__bar h2, .pl__head h1, .bk__title, .ck__title, .ac__head h1, .gb-article__head h1,
  .vl__head h1, .al__head h1, .auth__title, .nf__title, .ty__head h1, .pd-buy h1) {
  font-family: var(--v4-head-font);
  font-style: var(--v4-head-style);
  font-weight: var(--v4-head-weight);
  letter-spacing: var(--v4-head-ls);
}
/* Bebas Neue jako ve v1: zelená linka pod hlavními nadpisy (ne na fotkách a barevných
   kartách). Jedna linka pod celým nadpisem jako `border-bottom` ve v1, ne podtržení
   každého řádku — `fit-content` ji zkrátí na šířku textu (u víceřádkového na nejdelší řádek). */
html:root body.v4 :is(.v3-h2, .v3-opage__title,
  .gb-sec__bar h2, .pl__head h1, .bk__title, .ck__title, .ac__head h1, .gb-article__head h1,
  .vl__head h1, .al__head h1, .auth__title, .nf__title, .ty__head h1, .pd-buy h1) {
  width: fit-content; max-width: 100%;
  padding-bottom: .08em; border-bottom: 3px solid var(--v3-green);
}

/* ── 3) Hlavička ──
   Horní proužek světle šedý a nízký (majitel 14. 10. 2026: „zmenšit padding, aby měl
   na výšku cca 33 px, světle šedou barvu a dostatečně kontrastní písmo"). Text
   --v3-ink-2 a zelená --v3-green-ink drží na #eceff3 kontrast AA (scripts/contrast_check.js). */
body.v4 .v3-topbar { background: #eceff3; color: var(--v3-ink-2); }
body.v4 .v3-topbar__in { height: 33px; padding-block: 0; align-items: center; }
body.v4 .v3-topbar ul { line-height: 18px; }
body.v4 .v3-topbar__usp li:first-child { color: var(--v3-green-ink); font-weight: 700; }
body.v4 .v3-topbar a:hover { color: var(--v3-navy); }

/* Kontakt, Info a Účet s panelem po najetí myší (gb.js §6.1, `.gb-drop[data-hover]`) */
.v4-header .gb-actions { gap: 2px; }
/* Most přes mezeru mezi tlačítkem a panelem — šikmý přejezd myši panel nezavře
   (panel sám má overflow:hidden, proto pseudoprvek na hostiteli). */
.v4-header .gb-drop[data-hover].is-open::after {
  content: ''; position: absolute; left: -8px; right: -8px; top: 100%; height: 12px;
}
.v4-header .gb-drop[data-hover].is-open > .gb-drop__btn { background: var(--v3-line-3); }
.v4-hdrop { width: 300px; min-width: 0; padding: 6px 0; }
.v4-hdrop__list { margin: 0; padding: 0; list-style: none; }
.v4-hdrop__list a {
  display: flex; align-items: center; min-height: 42px; padding: 0 18px;
  color: var(--v3-navy); font-size: 14px; font-weight: 500; text-decoration: none;
}
.v4-hdrop__list a:hover { background: var(--v3-bg); color: var(--v3-green-ink); }
.v4-contact { width: 340px; padding: 0; }
.v4-contact__person {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--v3-line-3);
}
.v4-contact__photo { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; background: var(--v3-bg); }
.v4-contact__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--v3-ink-2); }
.v4-contact__txt strong { color: var(--v3-navy); font-size: 14px; font-weight: 700; }
.v4-contact__tel { color: var(--v3-navy); font-size: 18px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.v4-contact__tel:hover { color: var(--v3-green-ink); text-decoration: underline; }
.v4-contact__mail {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid var(--v3-line-3);
  color: var(--v3-navy); font-size: 14px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
.v4-contact__mail:hover { color: var(--v3-green-ink); text-decoration: underline; }
.v4-contact__mail .ico { width: 20px; height: 20px; flex: none; color: var(--v3-green-ink); }
.v4-contact .v4-hdrop__list { padding-block: 6px; }
/* Účet přihlášeného jako detail (majitel 14. 10. 2026: „po najetí na účet se má
   přihlášenému zobrazit nějaký detail účtu"): iniciály, jméno a e-mail, „Můj účet"
   jako tlačítko a sekce ve dvou sloupcích — místo devíti řádků pod sebou (518 px)
   panel o polovinu nižší. */
.v4-header .gb-accdrop { width: 340px; }
.v4-acc__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px; border-bottom: 0; }
.v4-acc__avatar {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; background: var(--v3-navy); color: #fff; font-size: 16px; font-weight: 700;
}
.v4-acc__who { min-width: 0; }
.v4-acc__who strong { color: var(--v3-navy); font-size: 15px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.v4-acc__who span { color: var(--v3-ink-2); font-size: 13px; }
.v4-header .v4-acc__main { display: flex; margin: 0 18px 8px; min-height: 42px; }
.v4-acc__list { display: grid; grid-template-columns: 1fr 1fr; padding: 0 8px 8px; list-style: none; }
.v4-header .v4-acc__list a { min-height: 40px; padding: 0 10px; border-radius: 10px; color: var(--v3-navy); font-size: 14px; }
.v4-header .v4-acc__list a:hover { background: var(--v3-bg); color: var(--v3-green-ink); }

/* ── 4) Lišta kategorií: písmo, pozadí a proužek pod ní ──
   Modrá lišta se zeleným proužkem pod ní jako ve v1 (bílá lišta v3 je v gb3.css, ve v4 ji
   přebíjí modrá níž). */
body.v4 .v4-header .gb-nav__link,
body.v4 .v4-header .gb-nav__aux a {
  font-family: var(--v4-nav-font); font-size: var(--v4-nav-size);
  font-weight: var(--v4-nav-weight); letter-spacing: var(--v4-nav-ls);
}
html:root body.v4 .v4-header.gb-header { border-bottom: 0; }
html:root body.v4 .v4-header .gb-nav { border-bottom: 3px solid var(--v3-green); }
html:root body.v4 .v4-header .gb-mega { top: calc(100% + 3px); }   /* pod zelený proužek */
html:root body.v4 .v4-header .gb-nav {
  background: #092857; box-shadow: inset 0 11px 5px -10px rgba(39, 41, 48, .5);
}
/* Modrá lišta jako ve v1: všechny položky bílé, i Akce a Prodávané značky; otevřenou
   položku nese zvětšení, zešednutí ostatních a špička zeleného proužku (níž), ne podklad
   ani podtržení. */
html:root body.v4 .v4-header :is(.gb-nav__link, .gb-nav__aux a, .gb-nav__aux a:is(.v3-nav__sale, .v3-nav__brands)) {
  color: #fff; border-bottom: 0;
}
html:root body.v4 .v4-header :is(.gb-nav__item:hover, .gb-nav__item.is-open) > .gb-nav__link,
html:root body.v4 .v4-header .gb-nav__aux a:hover { background: none; color: #fff; }
/* Rozměry jako ve v1 (majitel 14. 10. 2026: „top menu chci zkopírovat z V1 — výška,
   šířka, barva, velikost písma i to podtržení vč. zvýraznění top kategorie"; v1 =
   master-golf.css `#navigation .nav-list`): s písmem Bebas položka 52 px s 10 px po
   stranách a bez mezer. Seznam o těch 10 px přesahuje, aby první text lícoval s logem
   a poslední s košíkem. */
html:root body.v4 .v4-header .gb-nav__list { gap: 0; margin-left: -10px; }
html:root body.v4 .v4-header .gb-nav__aux { padding-left: 0; margin-right: -10px; }
html:root body.v4 .v4-header :is(.gb-nav__link, .gb-nav__aux a) {
  height: 52px; padding: 0 10px; line-height: 1;
}
/* Zvýraznění jako ve v1 (modrá lišta): s otevřeným megamenu ostatní položky zešednou
   na polovinu a text otevřené (i té pod myší) se o 5 % zvětší. Bílé písmo na polovinu
   drží na #092857 kontrast 4,6 : 1. Otevřenou položku navíc značí špička zeleného
   proužku (níž). */
body.v4 .v4-header .v4-nav__txt { display: inline-block; transition: transform .2s; }
html:root body.v4 .v4-header :is(.gb-nav__link, .gb-nav__aux a) { transition: opacity .2s; }
html:root body.v4 .v4-header .gb-nav__in:has(.gb-nav__item.is-open) :is(.gb-nav__item:not(.is-open) > .gb-nav__link, .gb-nav__aux a) { opacity: .5; }
html:root body.v4 .v4-header :is(.gb-nav__item:hover > .gb-nav__link, .gb-nav__item.is-open > .gb-nav__link, .gb-nav__aux a:hover) .v4-nav__txt { transform: scale(1.05); }
/* Špička zeleného proužku pod otevřenou položkou (v1 `li.hover > a::before/::after`):
   zelený trojúhelník 12 px a v něm trojúhelník barvy lišty 8 px, oba sedí na spodní
   hraně proužku — proužek pod položkou vybíhá do špičky. Seznam má `overflow-x: auto`
   (gb.css) a špičku přesahující o 3 px pod něj by ořízl, proto 3 px vnitřního okraje
   dole vyrovnané záporným vnějším. */
html:root body.v4 .v4-header .gb-nav__list { padding-bottom: 3px; margin-bottom: -3px; }
html:root body.v4 .v4-header .gb-nav__link { position: relative; }
html:root body.v4 .v4-header :is(.gb-nav__item:hover, .gb-nav__item.is-open) > .gb-nav__link { border-bottom-color: transparent; }
/* Váha stejná jako u pravidel s barvou níž, která jdou až za tímhle — jinak by tahle
   zkratka `border` barvu a šířku trojúhelníků přebila. */
html:root body.v4 .v4-header .gb-nav__item.is-open > .gb-nav__link::before,
html:root body.v4 .v4-header .gb-nav__item.is-open > .gb-nav__link::after {
  content: ''; position: absolute; left: 50%; bottom: -3px; z-index: 2; pointer-events: none;
  width: 0; height: 0; border: solid transparent;
}
html:root body.v4 .v4-header .gb-nav__item.is-open > .gb-nav__link::before {
  margin-left: -12px; border-width: 0 12px 12px; border-bottom-color: var(--v3-green);
}
html:root body.v4 .v4-header .gb-nav__item.is-open > .gb-nav__link::after {
  margin-left: -8px; border-width: 0 8px 8px; border-bottom-color: #092857;   /* barva lišty */
}
@media (prefers-reduced-motion: reduce) {
  body.v4 .v4-header :is(.gb-nav__link, .gb-nav__aux a, .v4-nav__txt) { transition: none; }
}

/* ── 5) Megamenu: dlaždice s obrázky (v2) + průvodci (v3) + dlaždice značek (v2) ──
   Bez názvu superkategorie (svítí v liště hned nad panelem); oddíly nesou popisky
   „Vyberte kategorii:", skupiny průvodců a „Oblíbené značky" — s nadpisy v Bebas
   jako ve v1 (Bebas 20 px, zelená linka 2 px), jinak drobné šedé verzálky v3. */
body.v4 .v4-header .gb-mega__wrap { max-height: calc(100vh - 190px); overflow: auto; }
body.v4 .v4-header .gb-mega__close { top: 22px; right: var(--gb-gutter); }
.v4-mega {
  display: grid; grid-template-columns: minmax(0, 1fr) 270px;
  gap: 24px 48px; padding: 24px 0 22px;
}
.v4-mega--solo { grid-template-columns: minmax(0, 1fr); }
.v4-mega__label {
  margin: 0 0 14px; color: var(--v3-muted);
  font: 600 12px/1.3 var(--v3-font); letter-spacing: .08em; text-transform: uppercase;
}
html:root body.v4 .v4-mega__label {
  width: fit-content; padding-bottom: 6px; border-bottom: 2px solid var(--v3-green);
  color: var(--v3-navy); font: 400 20px/1 'Bebas Neue', Arial, sans-serif; letter-spacing: .03em;
}
.v4-mega__tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px; margin: 0 0 18px; padding: 0; list-style: none;
}
.v4-tile {
  display: flex; align-items: center; gap: 14px; height: 100%; min-height: 72px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--v3-line-2); border-radius: var(--v3-r); background: #fff;
  color: var(--v3-navy); font-size: 15px; line-height: 1.25; font-weight: 600; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.v4-tile:hover { border-color: var(--v3-line); box-shadow: 0 6px 18px rgba(11, 42, 85, .09); color: var(--v3-green-ink); }
.v4-tile__img {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: none; border-radius: 12px; background: var(--v3-bg);
}
.v4-tile__img img { width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.v4-tile__name { min-width: 0; overflow-wrap: break-word; }
.v4-mega__all { font-size: 15px; }
.v4-mega__all .ico { width: 16px; height: 16px; }
.v4-mega__aside { padding: 0 0 0 32px; border-left: 1px solid var(--v3-line-2); }
.v4-mega__aside .v4-mega__label { margin-bottom: 6px; }
.v4-mega__aside .v3-mega__links { margin-bottom: 20px; }
.v4-mega__aside .v3-mega__links:last-child { margin-bottom: 0; }
/* Loga značek (14. 10. 2026 „příliš malá" → dlaždice s logem 44 px; 15. 10. „příliš velká,
   původní malá varianta byla lepší, nanejvýš nepatrně větší"): zpátky jedna řada bez rámečků
   jako v původní v4, logo v poměru stran do 26 × 92 px (původně čtverec 34 px, logo v něm menší). */
.v4-mega__brands { padding: 18px 0 22px; border-top: 1px solid var(--v3-line-2); }
.v4-mega__brandhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.v4-mega__brandhead .v4-mega__label { margin: 0; }
.v4-mega__brandhead .v3-link { font-size: 14px; }
.v4-mega__brandhead .v3-link .ico { width: 16px; height: 16px; }
.v4-mega__brands ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px; margin: 0; padding: 0; list-style: none;
}
.v4-mega__brands li a {
  display: flex; align-items: center; justify-content: center; height: 52px; padding: 8px 10px;
  border-radius: 10px; transition: background-color .15s;
}
.v4-mega__brands li a:hover { background: var(--v3-bg); }
.v4-mega__brands picture { display: contents; }
.v4-mega__brands img { width: auto; height: auto; max-width: min(100%, 92px); max-height: 26px; object-fit: contain; mix-blend-mode: multiply; }

/* ── 6) Karty produktů bez značky (rozhodnutí majitele 16. 10. 2026, dřív volba v beta nástrojích) ── */
body.v4 .v3-card__brand { display: none; }

/* ── 7) Detail produktu: výběr varianty s tečkou dostupnosti ──
   Vzor z claude.design (14. 10. 2026): místo zeleného proužku tečka v pravém horním
   rohu. Stav dává gb-pdp.js do `data-avail` (instock | onway | order | none):
     ● zelená        skladem
     ● jantarová     u dodavatele / na cestě (čárkovaný rámeček)
     ○ prázdná       na objednávku (šedý podklad)
     šrafování       kombinace neexistuje (tlačítko je disabled)
   Do budoucna propojení s převodem velikostí EU/UK/US/mm — data zatím nemáme. */
body.v4 .pd-var__opts { gap: 8px; }
body.v4 .pd-var__opt {
  overflow: visible; min-width: 58px; min-height: 48px; padding: 0 16px;
  border: 1.5px solid var(--v3-line); border-radius: 12px; background: #fff;
  color: var(--v3-navy); font-weight: 600; font-variant-numeric: tabular-nums;
}
body.v4 .pd-var__opt:hover { border-color: var(--v3-navy); }
body.v4 .pd-var__opt[data-state="ok"]::after { display: none; }   /* zelený proužek v2 */
body.v4 .pd-var__opt::before {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
}
body.v4 .pd-var__opt[data-avail="instock"]::before { background: var(--v3-green); }
body.v4 .pd-var__opt[data-avail="onway"] { border-style: dashed; border-color: var(--v4-amber-line); background: var(--v4-amber-bg); }
body.v4 .pd-var__opt[data-avail="onway"]::before { background: var(--v4-amber); }
body.v4 .pd-var__opt[data-avail="order"] { background: var(--v3-bg); color: var(--v3-ink-2); }
body.v4 .pd-var__opt[data-avail="order"]::before { box-shadow: inset 0 0 0 1.5px #8a96a8; }
body.v4 .pd-var__opt[data-avail="none"] {
  border-color: var(--v3-line-2); color: var(--v3-muted); text-decoration: none; opacity: 1; cursor: not-allowed;
  background: repeating-linear-gradient(135deg, #f6f8fa 0 7px, #e9edf2 7px 8px);
}
body.v4 .pd-var__opt[aria-pressed="true"] {
  border-style: solid; border-color: var(--v3-green-cta); box-shadow: inset 0 0 0 1px var(--v3-green-cta);
  background: var(--v3-green-soft); color: var(--v3-navy); font-weight: 700;
}

/* ── 7b) Detail produktu na telefonu (vzor aplikace Alza, majitel 14. 10. 2026) ──
   Pod 900 px (jeden sloupec): fotka s plovoucími tlačítky (zpět, oblíbené, sdílet)
   a počítadlem místo mřížky náhledů, hned pod názvem cena a rámečky, „Do košíku"
   a „Rezervovat" jako plovoucí tlačítka dole, po odrolování fotky lišta produktu
   místo hlavičky a pod ní přilepené záložky sekcí. Šablony:
   templates/v4/components/pdp-gallery-extra.php, pdp-buy-extra.php; chování gb4.js §2. */
.v4-pdfab, .v4-pdcount, .v4-fcta, .v4-pdbar { display: none; }
@media (max-width: 899px) {
  body.v4.page-pdp .gb-crumbs ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  body.v4.page-pdp .gb-crumbs ol::-webkit-scrollbar { display: none; }
  body.v4.page-pdp .gb-crumbs li { flex: none; }

  /* Fotka — rámeček 4 : 3 místo čtverce, ať se cena vejde na první obrazovku i nad
     plovoucí tlačítka (při 390 px o 86 px níž). */
  body.v4 .pd-gallery__main { aspect-ratio: 4 / 3; padding: 12px; }
  body.v4 .pd-gallery__thumbs { display: none; }
  body.v4 .pd-gallery__badges { top: 62px; left: 10px; }
  body.v4 .v4-pdfab {
    display: flex; justify-content: space-between; align-items: flex-start;
    position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; pointer-events: none;
  }
  body.v4 .v4-pdfab > *, body.v4 .v4-pdfab__group > * { pointer-events: auto; }
  body.v4 .v4-pdfab > .v4-pdfab__btn, body.v4 .v4-pdfab__group {
    border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 2px 10px rgba(11, 42, 85, .16);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  body.v4 .v4-pdfab__group { display: flex; }
  body.v4 :is(.v4-pdfab__btn, .v4-pdbar__btn) {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: 50%; color: var(--v3-navy);
  }
  body.v4 :is(.v4-pdfab__btn, .v4-pdbar__btn) .ico { width: 22px; height: 22px; }
  body.v4 :is(.v4-pdfab, .v4-pdbar) [data-v3-fav][aria-pressed="true"] { color: var(--v3-red); }
  body.v4 .v4-pdcount {
    display: block; position: absolute; right: 12px; bottom: 12px; z-index: 2;
    padding: 3px 10px; border-radius: 999px; background: var(--v3-line-3);
    color: var(--v3-ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  }

  /* Nákupní sloupec: název, hned cena a rámečky, pak výběr varianty a dostupnost.
     Oblíbené jsou na fotce, „Do košíku" plave dole — místní tlačítka se nekreslí
     (formulář zůstává, odesílá ho plovoucí tlačítko; srdíčko nese i historii
     „naposledy prohlížených", proto jen schované). */
  body.v4 .pd-buy { display: flex; flex-direction: column; }
  body.v4 .pd-buy > .pd-buy__top { order: -3; }
  body.v4 .pd-buy > .pd-price { order: -2; margin-top: 12px; }
  body.v4 .pd-buy > .v4-pboxes { order: -1; }
  body.v4 form.pd-cta, body.v4 .v3-pdp__fav, body.v4 .v3-pdpbar { display: none; }

  /* Plovoucí tlačítka dole — nad spodní lištou (pilulkou), ta na detailu zůstává. */
  body.v4 .v4-fcta {
    display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; z-index: 65;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  html:root body.v4 .v4-fcta { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  html:root body.v4.has-mobilebar .v3-tabbar { transform: none; visibility: visible; }
  body.v4 .v4-fcta__btn {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 16px; border-radius: 999px;
    font: 700 16px/1.2 var(--v3-font); white-space: nowrap; box-shadow: 0 8px 24px rgba(11, 42, 85, .28);
  }
  body.v4 .v4-fcta__btn .ico { width: 20px; height: 20px; flex: none; }
  body.v4 .v4-fcta__btn--cart { background: var(--v3-green-cta); color: #fff; }
  body.v4 .v4-fcta__btn--cart:active { background: var(--v3-green-cta-2); }
  body.v4 .v4-fcta__btn--store { background: var(--v3-navy); color: #fff; }

  /* Lišta produktu po odrolování fotky: nahradí hlavičku (gb4.js §2, `body.v4-pdp-compact`). */
  body.v4 .v4-pdbar {
    display: flex; align-items: center; gap: 4px; position: fixed; top: 0; left: 0; right: 0; z-index: 61;
    height: 60px; padding: 0 6px; background: rgba(255, 255, 255, .95); box-shadow: 0 1px 0 var(--v3-line-2);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    transform: translateY(-100%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  body.v4.v4-pdp-compact .v4-pdbar { transform: none; visibility: visible; }
  body.v4.v4-pdp-compact .v4-header.gb-header { transform: translateY(-100%); }
  body.v4 .v4-pdbar__prod { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
  body.v4 .v4-pdbar__prod img { width: 40px; height: 40px; flex: none; border-radius: 10px; object-fit: contain; background: #fff; }
  body.v4 .v4-pdbar__txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  body.v4 .v4-pdbar__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--v3-ink-2); }
  body.v4 .v4-pdbar__txt strong { font-size: 15px; font-weight: 700; color: var(--v3-navy); }

  /* Záložky sekcí jako pilulky, přilepené pod lištou produktu; aktuální sekci zvýrazní gb4.js §2. */
  body.v4 .pd-anchors { position: sticky; top: 60px; z-index: 50; border-top: 0; }
  body.v4 .pd-anchors__in { min-height: 0; padding-block: 8px; }
  body.v4 .pd-anchors nav { gap: 8px; flex-wrap: nowrap; scrollbar-width: none; }
  body.v4 .pd-anchors nav::-webkit-scrollbar { display: none; }
  body.v4 .pd-anchors nav a {
    flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
    border-radius: 999px; background: var(--v3-line-3); color: var(--v3-navy); font-size: 14px; white-space: nowrap;
  }
  body.v4 .pd-anchors nav a[aria-current="true"] { background: var(--v3-navy); color: #fff; }
  /* Kotva (#popis…) zastaví pod lištou produktu a záložkami, ne pod nimi. */
  html:has(body.v4.page-pdp) { scroll-padding-top: 124px; }
}

/* ── 7c) Rámečky u ceny převzaté z v1 (templates/v4/components/pdp-price-extra.php) ──
   Akce, „Koupit s kódem", individuální cena (Google sleva / garance / nabídka) s odpočtem,
   úspora s košíkem a upozornění k odkazům — data a pravidla z v1, vzhled V4: zaoblené
   rámečky v barvách sdělení, ikona vlevo, podmínky pod (i), na všech šířkách. */
.v4-pboxes { display: grid; gap: 8px; margin-top: 12px; }
.v4-pbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 10px 12px 10px 14px; border: 1.5px solid var(--v4-pbox-line, var(--v3-line)); border-radius: var(--v3-r);
  background: var(--v4-pbox-bg, #fff); color: var(--v3-navy);
}
.v4-pbox[hidden] { display: none; }
.v4-pbox__ico { width: 22px; height: 22px; flex: none; color: var(--v4-pbox-ink, var(--v3-navy)); }
.v4-pbox__body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
}
.v4-pbox__title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.v4-pbox__meta { font-size: 13px; line-height: 1.35; color: var(--v3-ink-2); font-variant-numeric: tabular-nums; }
.v4-pbox__meta b { color: var(--v3-navy); }
.v4-pbox__price { font-size: 18px; font-weight: 800; color: var(--v4-pbox-ink, var(--v3-navy)); white-space: nowrap; }
.v4-pbox__info {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: -6px -6px -6px 0; border-radius: 50%; color: var(--v3-ink-2);
}
.v4-pbox__info:hover, .v4-pbox__info[aria-expanded="true"] { background: rgba(11, 42, 85, .07); color: var(--v3-navy); }
.v4-pbox__info .ico { width: 20px; height: 20px; }
.v4-pbox__terms { flex-basis: 100%; margin: 6px 0 2px; font-size: 13px; line-height: 1.45; color: var(--v3-ink-2); }
.v4-pbox__code {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border: 1.5px dashed currentColor; border-radius: 6px;
  font-size: 14px; letter-spacing: .03em;
}
.v4-pbox--promo { --v4-pbox-bg: #eef3fb; --v4-pbox-line: #c9d6ea; --v4-pbox-ink: var(--v3-navy); }
.v4-pbox--code { --v4-pbox-bg: var(--v3-green-soft); --v4-pbox-line: #b9d9ad; --v4-pbox-ink: var(--v3-green-ink); }
.v4-pbox--code .v4-pbox__act { cursor: pointer; }
.v4-pbox--code .v4-pbox__act:hover .v4-pbox__title { text-decoration: underline; }
.v4-pbox--code .v4-pbox__code { color: var(--v3-green-ink); }
.v4-pbox--hold { --v4-pbox-bg: var(--v4-amber-bg); --v4-pbox-line: var(--v4-amber-line); --v4-pbox-ink: #8a5600; }
.v4-pbox--bundle { --v4-pbox-bg: var(--v3-green-soft); --v4-pbox-line: #b9d9ad; --v4-pbox-ink: var(--v3-green-ink); }
.v4-pbox--alert { --v4-pbox-bg: #fff8ea; --v4-pbox-line: #f0d58a; --v4-pbox-ink: #8a5600; }

/* ── 8) Patička: obsah ART_FOOTER beze změny, nový vzhled ──
   Majiteli vadil hlavně světlý pruh s logy plateb a dopravců. Loga jsou v řadě nad
   právní lištou jednobarevná (majitel 17. 10. 2026, odstín nechal na nás): převod podle
   jasu — tmavá a barevná kresba je světlá, bílé a žluté plochy průhledné. Prostá silueta
   by je slila: zásilkovna.png je čtverec bez průhlednosti, MasterCard, Raiffeisen a Pošta
   mají bílou kresbu uvnitř. `screen` míchá s podkladem uvnitř patičky, která je kvůli
   rastru izolovaná (blok 23) — proto má řada log vlastní navy pozadí. Odstín ≈ #ced4dd. */
body.v4 .gb-footer { border-top: 4px solid var(--v3-green); }
body.v4 .gb-footer__legacy #newsletter { padding-block: 40px; border-bottom-color: rgba(255, 255, 255, .1); }
/* Newsletter na pevném bílém podkladu (majitel 17. 10. 2026) — průhlednou pilulkou v3
   prosvítal rastr patičky. Obrys fokusu kreslí pilulka, pole samo je v ní oříznuté. */
body.v4 .gb-footer__legacy .news_form { background: #fff; border-color: #fff; }
body.v4 .gb-footer__legacy .news_form input { color: var(--v3-navy); }
body.v4 .gb-footer__legacy .news_form input::placeholder { color: var(--v3-ink-2); opacity: 1; }
body.v4 .gb-footer__legacy .news_form:has(input:focus-visible) { outline: 2px solid var(--v3-green-light); outline-offset: 3px; }
body.v4 .gb-footer__legacy .news_form input:focus-visible { outline: 0; }
body.v4 .gb-footer__legacy footer .wrap { row-gap: 28px; padding-block: 48px 0; }
body.v4 .gb-footer__legacy .copyright .info span { color: #c9d3e2; }
body.v4 .gb-footer__legacy .copyright .info a { color: #fff; }
body.v4 .gb-footer__legacy .footer-nav ul { display: flex; flex-direction: column; gap: 2px; }
body.v4 .gb-footer__legacy .partners {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 0;
  margin: 8px 0 0; padding: 22px 0 26px;
  background: var(--v3-navy); border-radius: 0; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 0;   /* úvodní &nbsp; z editoru by dělal mezeru navíc */
}
/* Vodorovná mezera okrajem, ne `gap`: úvodní &nbsp; je samostatná položka flexu a mezeru
   by dostal i před prvním logem. Šířku `!important`: editor bloku dává logům inline
   `style="width: 70px"` (rozvržení v1) — tady by z nich dělala prázdný okraj a nestejné mezery. */
body.v4 .gb-footer__legacy .partners > img {
  height: 22px; max-height: none; width: auto !important; max-width: 96px; margin-right: 28px; object-fit: contain;
  filter: grayscale(1) invert(1) brightness(1.6) contrast(2);
  mix-blend-mode: screen; opacity: .8;
}
body.v4 .gb-footer__legacy .partners .author { margin-left: auto; font-size: 13px; }
body.v4 .gb-footer__legacy .partners .author a {
  display: inline-block; padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  color: #fff; font-weight: 600; line-height: 1.3; text-decoration: none;
}
body.v4 .gb-footer__legacy .partners .author a::before { content: '★'; margin-right: 6px; color: #ffcf25; }
body.v4 .gb-footer__legacy .partners .author a:hover { border-color: #fff; }
body.v4 .gb-footer__bar { background: #082247; border-top: 0; }
@media (max-width: 899px) {
  body.v4 .gb-footer__legacy .partners .author { flex-basis: 100%; margin-left: 0; }
}

/* ── 9) Telefon a tablet (pod 1100 px): rozvržení hlavičky z v2 ──
   [menu | logo | (oblíbené) | účet | košík] a pod tím hledání přes celou šířku
   (majitel 14. 10. 2026: „rozvržení hlavičky v mobilu se mi více líbí z V2").
   Pravidla přebíjejí mobilní hlavičku v3 (gb3.css, `.v3-header` v bloku
   „Mobil: vzhled aplikace"), barvy zůstávají z v3. Spodní lišta je ve výchozím
   stavu plovoucí pilulka; s `tabbar: off` nese navigaci jen hlavička. */
@media (max-width: 1099px) {
  body.v4 .v4-header.gb-header { background: #fff; border-bottom: 1px solid var(--v3-line-2); }
  body.v4 .v4-header .gb-header__in { flex-wrap: wrap; gap: 8px; padding: 8px var(--gb-sp-md) 10px; }
  body.v4 .v4-burger {
    display: inline-flex; order: 1; width: 44px; height: 44px; margin-left: -6px;
    border: 0; border-radius: 50%; color: var(--v3-navy);
  }
  body.v4 .v4-burger:hover { background: var(--v3-line-3); }
  body.v4 .v4-burger .ico { width: 26px; height: 26px; }
  /* Selektory s `.v4-mnav__bar` drží lištu otevřené zásuvky stejnou jako hlavičku (níž). */
  body.v4 :is(.v4-header, .v4-mnav__bar) .gb-logo { order: 2; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
  body.v4 .v4-header .gb-header__in:has(.gb-search:focus-within) .gb-logo { display: flex; }
  body.v4 :is(.v4-header, .v4-mnav__bar) .gb-logo :is(img, svg) { width: auto; height: 34px; max-width: 100%; }
  body.v4 :is(.v4-header, .v4-mnav__bar) .gb-actions { display: flex; order: 3; gap: 4px; margin-left: 0; }
  body.v4 .v4-header .gb-actions > * { order: 0; }
  body.v4 .v4-header .gb-drop--contact, body.v4 .v4-header .gb-drop--info { display: none; }
  body.v4 .v4-header .gb-drop--acc, body.v4 .v4-header .gb-drop--cart { display: flex; }
  body.v4 :is(.v4-header, .v4-mnav__bar) .v3-hbtn {
    min-width: 0; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%;
  }
  body.v4 :is(.v4-header, .v4-mnav__bar) .v3-hbtn .gb-dot { top: 8px; right: 8px; }
  body.v4 :is(.v4-header, .v4-mnav__bar) .v3-hbtn--fav { display: inline-flex; }
  body.v4 :is(.v4-header, .v4-mnav__bar) .v3-hbtn--fav .v3-fav__count { top: 2px; right: 0; }
  body.v4 :is(.v4-header, .v4-mnav__bar) .v3-cart.gb-cart { width: 44px; height: 44px; margin-left: 2px; }
  body.v4 .v4-header .gb-search,
  body.v4 .gb-mnav .gb-search {
    order: 4; flex: 1 1 100%; max-width: none; height: 46px; margin: 0; padding: 0 14px;
    border: 0; border-radius: 999px; background: var(--v3-bg); box-shadow: none;
  }
  body.v4 :is(.v4-header, .gb-mnav) .gb-search:focus-within { box-shadow: 0 0 0 2px var(--v3-navy); }
  body.v4 :is(.v4-header, .gb-mnav) .gb-search input { background: transparent; }

  /* Zásuvka kategorií (majitel 14. 10. 2026: „po otevření menu ponech stejnou barvu
     a velikost… sticky může zůstat horní část s logem a křížkem, box s hledáním může
     odscrollovat"). Lišta je kopie horního řádku hlavičky — bílá, 60 px, logo 34 px
     a tlačítka na stejném místě, místo menu křížek — a zůstává nahoře. Pod ní hledání
     v bílém pásu jako druhý řádek hlavičky (116 px dohromady jako hlavička), jenže
     první v rolovaném seznamu, takže odroluje. Panel podkategorií překryje seznam
     i hledání. Stín pod lištou až po odrolování (`.is-scrolled`, gb.js §6.5). */
  body.v4 .gb-mnav { grid-template-rows: auto minmax(0, 1fr); }
  body.v4 .gb-mnav__scroll, body.v4 .gb-mnav__panel { grid-row: 2; }
  body.v4 .v4-mnav__bar {
    position: relative; z-index: 2; gap: 8px; padding: 8px var(--gb-sp-md);
    background: #fff; color: var(--v3-navy); transition: box-shadow .15s;
  }
  /* Bílý řádek „‹ Kategorie" otevřeného panelu by s lištou splynul — linka mezi nimi. */
  body.v4 .gb-mnav:has(.gb-mnav__panel.is-open) .v4-mnav__bar { box-shadow: 0 1px 0 var(--v3-line-2); }
  body.v4 .gb-mnav.is-open.is-scrolled .v4-mnav__bar { box-shadow: 0 1px 0 var(--v3-line-2), 0 6px 14px rgba(11, 42, 85, .08); }
  body.v4 .v4-mnav__bar .v4-burger { background: none; }
  body.v4 .v4-mnav__bar .v4-burger:hover { background: var(--v3-line-3); }
  body.v4 .v4-mnav__bar .v3-cart.gb-cart { position: relative; padding: 0; justify-content: center; border-radius: 50%; }
  body.v4 .v4-mnav__bar .v3-cart .gb-cart__count {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--v3-red); font-size: 11px; line-height: 18px;
  }
  body.v4 .gb-mnav__scroll .gb-mnav__search {
    margin: -12px calc(-1 * var(--gb-sp-md)) 12px; padding: 0 var(--gb-sp-md) 10px; background: #fff;
  }
  /* Odeslání Enterem jako v hlavičce; tlačítko zůstává pro odečítač a klávesnici. */
  body.v4 .gb-mnav .gb-search button {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* Spodní lišta (v3) jako plovoucí pilulka; patička se prodlouží o její výšku (--gb-dock, gb.js §8). */
  html:root body.v4 .v3-tabbar { display: flex; }
  /* Plovoucí pilulka (vzor aplikace Alza): odsazená od okrajů
     a „skleněná čočka" jako Liquid Glass v iOS (majitel 15. 10. 2026) — skoro průhledná,
     obsah pod ní jen lehce rozostřený a prosvětlený, jasný bílý okraj s odleskem nahoře
     a světlem po obvodu, aktivní položka na šedé skleněné kapsli. Lom světla na hraně
     CSS v Safari neumí (backdrop-filter s SVG filtrem jen Chromium), proto ho naznačuje
     světlo po obvodu a přechod v ::before. gb.js §8 započítá i mezeru od spodní hrany. */
  html:root body.v4 .v3-tabbar {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 64px; padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(7px) saturate(1.8) brightness(1.08); backdrop-filter: blur(7px) saturate(1.8) brightness(1.08);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, .95),
      inset 0 -1px 1px rgba(255, 255, 255, .55),
      inset 0 0 14px rgba(255, 255, 255, .6),
      0 10px 28px rgba(11, 42, 85, .16), 0 1px 3px rgba(11, 42, 85, .1);
  }
  html:root body.v4 .v3-tabbar::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background:
      radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%),
      linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .22));
  }
  html:root body.v4 .v3-tabbar__item { height: 52px; border-radius: 999px; color: #1f2a3a; }
  html:root body.v4 .v3-tabbar__item.is-active {
    background: rgba(118, 118, 128, .16); color: var(--v3-navy);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .35);
  }

  /* Hlavička zůstává při rolování nahoře (vzor Alza). Po odrolování (`html.v4-scrolled`,
     gb4.js §1) mléčné sklo a hledání jako plovoucí bílá pilulka. Výška se nemění, obsah
     pod ní tedy neposkočí; kotvy (#popis…) zastaví pod ní. */
  html:root { scroll-padding-top: 124px; }
  html:root body.v4 .v4-header.gb-header {
    position: sticky; top: 0; z-index: 60;
    transition: background-color .2s, box-shadow .2s, transform .25s ease;
  }
  html.v4-scrolled:root body.v4 .v4-header.gb-header {
    background: rgba(255, 255, 255, .93); box-shadow: 0 1px 0 var(--v3-line-2);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  }
  html.v4-scrolled:root body.v4 .v4-header .gb-search {
    background: #fff; box-shadow: 0 4px 16px rgba(11, 42, 85, .12);
  }

  /* Homepage na telefonu (vzor Alza): kategorie jako bílé dlaždice ve dvou sloupcích
     (pás koleček v3 přebíjí). Řady produktů jsou slidery bloku 28 na všech šířkách
     (dřív tady karusel jen na telefonu). */
  html:root body.v4 .v3-cats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    overflow: visible; margin-inline: 0; padding: 0;
  }
  html:root body.v4 .v3-cat {
    width: auto; flex-direction: row; align-items: center; gap: 12px; min-height: 64px;
    padding: 8px 12px 8px 8px; border-radius: 16px; background: #fff; box-shadow: var(--v3-shadow); text-align: left;
  }
  html:root body.v4 .v3-cat__img {
    flex: none; width: 48px; height: 48px; padding: 5px; border-radius: 12px; box-shadow: none; background: var(--v3-bg);
  }
  html:root body.v4 .v3-cat__img img { mix-blend-mode: multiply; }
  html:root body.v4 .v3-cat__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  body.v4 .gb-footer, body.v4.has-mobilebar .gb-footer { padding-bottom: var(--gb-dock, 0px); }
  body.v4 .v3-toast, body.v4 .gb-toast,
  body.v4.has-mobilebar .v3-toast, body.v4.has-mobilebar .gb-toast { bottom: calc(var(--gb-dock, 0px) + 12px); }

  /* Zásuvka: Oblíbené, Info a Kontakt mají ikonu na kraji jako řádky kategorií;
     kontakt (telefony a e-mail) je karta nad odkazy. */
  body.v4 .v4-mnav__more { justify-content: space-between; }
  .v4-mnav__contact {
    display: flex; flex-direction: column; gap: 14px;
    margin: 0 0 8px; padding: 16px; border-radius: var(--v3-r); background: #fff;
  }
  .v4-mnav__person { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--v3-ink-2); }
  .v4-mnav__person strong { color: var(--v3-navy); font-weight: 700; }
  .v4-mnav__person a, .v4-mnav__mail { color: var(--v3-navy); font-size: 18px; font-weight: 700; text-decoration: none; }
  .v4-mnav__mail { display: flex; align-items: center; gap: 10px; font-size: 15px; overflow-wrap: anywhere; }
  .v4-mnav__mail .ico { width: 20px; height: 20px; flex: none; color: var(--v3-green-ink); }
}
/* Na úzkém telefonu oblíbené jen v zásuvce — hledání a košík mají přednost. */
@media (max-width: 399px) {
  body.v4 :is(.v4-header, .v4-mnav__bar) .v3-hbtn--fav { display: none; }
}

/* ── 10) Hledání přes celou obrazovku (telefon; templates/v4/layout/header.php #v4-sx,
   gb4.js §4; vzor aplikace Alza, majitel 14. 10. 2026) ──
   Pole s kulatým křížkem nahoře, pod ním naposledy hledané (čipy s hodinami)
   a naposledy prohlížené (karty z /api/karty přestavěné na řádky); od dvou znaků
   výsledky našeptávače — řádek produktu s cenou pod názvem. Stránka pod vrstvou
   neroluje (`html.v4-sx-open`). Vrstvu otevírá jen JS do 1 099 px. */
html.v4-sx-open { overflow: hidden; }
.v4-sx {
  position: fixed; inset: 0; z-index: 85;
  display: flex; flex-direction: column;
  background: var(--v3-bg); color: var(--v3-ink);
}
.v4-sx[hidden] { display: none; }
.v4-sx__bar {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gb-sp-md) 12px;
}
body.v4 .v4-sx .v4-sx__form {
  order: 0; /* mobilní `.gb-search { order: 4 }` z gb.css by poslal pole za křížek */
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; max-width: none;
  height: 48px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(11, 42, 85, .08);
}
body.v4 .v4-sx .v4-sx__form:focus-within { box-shadow: 0 0 0 2px var(--v3-navy); }
body.v4 .v4-sx .v4-sx__form input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--v3-navy); font-size: 16px; outline: 0;
}
body.v4 .v4-sx .v4-sx__form input::placeholder { color: var(--v3-muted); }
/* Odeslání Enterem; tlačítko zůstává pro odečítač a klávesnici. */
body.v4 .v4-sx .v4-sx__form button {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.v4-sx__close {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: #fff; color: var(--v3-navy);
  box-shadow: 0 2px 10px rgba(11, 42, 85, .08); cursor: pointer;
}
.v4-sx__close .ico { width: 22px; height: 22px; }
.v4-sx__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px var(--gb-sp-md) calc(24px + env(safe-area-inset-bottom, 0px));
}
.v4-sx__sg:not([hidden]) + .v4-sx__idle { display: none; }
.v4-sx__sec + .v4-sx__sec { margin-top: 24px; }
.v4-sx__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.v4-sx__title { margin: 0 0 10px; color: var(--v3-navy); font: 700 17px/1.3 var(--v3-font); }
.v4-sx__head .v4-sx__title { margin: 0; }
.v4-sx__clear {
  min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--v3-ink-2); font: 500 14px/1 var(--v3-font); text-decoration: underline; text-underline-offset: 3px;
}
.v4-sx__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v4-sx__chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 14px; background: #fff; color: var(--v3-navy); font-size: 15px; text-decoration: none;
  box-shadow: 0 1px 3px rgba(11, 42, 85, .06); overflow-wrap: anywhere;
}
.v4-sx__chip .ico { width: 20px; height: 20px; flex: none; color: var(--v3-muted); }
/* Naposledy prohlížené: karty v3 jako řádky — miniatura, název na dva řádky a cena;
   celý řádek je odkaz (`::after` názvu přes kartu), bez srdíčka, štítků a „Koupit". */
.v4-sx__seen { display: flex; flex-direction: column; gap: 10px; }
body.v4 .v4-sx__seen .v3-card {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px; border-radius: 16px; box-shadow: 0 1px 3px rgba(11, 42, 85, .06);
}
body.v4 .v4-sx__seen .v3-card__img { width: 64px; height: 64px; padding: 4px; aspect-ratio: auto; }
body.v4 .v4-sx__seen :is(.v3-card__fav, .v3-card__badges, .v3-card__stock, .v3-card__form, .v3-card__add) { display: none; }
body.v4 .v4-sx__seen .v3-card__body { gap: 2px; padding: 0; }
body.v4 .v4-sx__seen .v3-card__name { min-height: 0; font-size: 14px; -webkit-line-clamp: 2; }
body.v4 .v4-sx__seen .v3-card__name::after { content: ''; position: absolute; inset: 0; }
body.v4 .v4-sx__seen .v3-card__foot { padding-top: 2px; }
body.v4 .v4-sx__seen .v3-card__price { flex-direction: row; align-items: baseline; gap: 8px; }
body.v4 .v4-sx__seen .v3-card__price strong { order: -1; font-size: 15px; }
body.v4 .v4-sx__seen .v3-card__price s { font-size: 12px; }
/* Výsledky našeptávače ve vrstvě: bez stínu a rámu panelu, řádek produktu jako bílá
   karta s cenou pod názvem (název na dva řádky místo tří až čtyř). */
body.v4 .v4-sx .v4-sx__sg {
  position: static; max-height: none; overflow: visible;
  border: 0; background: none; box-shadow: none;
}
body.v4 .v4-sx .gb-suggest__in { gap: 20px; padding: 0 0 8px; }
body.v4 .v4-sx .gb-suggest__title { margin-bottom: 10px; color: var(--v3-navy); font: 700 17px/1.3 var(--v3-font); }
body.v4 .v4-sx .gb-sg-item {
  grid-template-columns: 56px auto minmax(0, 1fr); grid-template-areas: "pic name name" "pic price stock";
  column-gap: 12px; row-gap: 2px; min-height: 72px; padding: 8px 12px 8px 8px;
  border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(11, 42, 85, .06);
}
body.v4 .v4-sx .gb-sg-item:hover, body.v4 .v4-sx .gb-sg-item.is-active { background: #fff; box-shadow: 0 0 0 2px var(--v3-navy); }
body.v4 .v4-sx .gb-sg-item__pic { grid-area: pic; width: 56px; height: 56px; }
body.v4 .v4-sx .gb-sg-item__info { display: contents; }
body.v4 .v4-sx .gb-sg-item__name {
  grid-area: name; align-self: end; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  color: var(--v3-navy); font-size: 14px; line-height: 1.3;
}
body.v4 .v4-sx .gb-sg-item__stock { grid-area: stock; align-self: center; font-size: 12px; }
body.v4 .v4-sx .gb-sg-item__prices { grid-area: price; align-self: start; display: flex; align-items: baseline; gap: 6px; text-align: left; }
body.v4 .v4-sx .gb-sg-item__price { font-size: 15px; }
body.v4 .v4-sx .gb-sg-item__list { order: 2; }
body.v4 .v4-sx .gb-sg-row + .gb-sg-row { margin-top: 10px; }
body.v4 .v4-sx .gb-chip { min-height: 40px; border: 0; border-radius: 12px; background: #fff; color: var(--v3-navy); }

/* ── 11) Košík v panelu: „Mohlo by se vám hodit" (templates/v4/components/cart-extra.php,
   gb4.js §5) ── Karty v3 jako řádky: miniatura, název, cena a tlačítko „Koupit" /
   „Zobrazit" (na telefonu kulaté, jak ho kreslí gb3.css); celý řádek vede na detail. */
.v4-cx { margin-top: 22px; }
.v4-cx__title { margin: 0; color: var(--v3-navy); font: 700 16px/1.3 var(--v3-font); }
.v4-cx__note { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--v3-green-ink); font-size: 13px; font-weight: 600; }
.v4-cx__note .ico { width: 16px; height: 16px; flex: none; }
.v4-cx__note[hidden] { display: none; }
.v4-cx__list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
body.v4 :is(.v4-cx, .v4-xs) .v3-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 8px 10px 8px 8px; border: 1px solid var(--v3-line-2); border-radius: 14px; box-shadow: none;
}
body.v4 :is(.v4-cx, .v4-xs) .v3-card__img { width: 56px; height: 56px; padding: 2px; aspect-ratio: auto; }
body.v4 :is(.v4-cx, .v4-xs) :is(.v3-card__fav, .v3-card__stock), body.v4 .v4-cx .v3-card__badges { display: none; }
body.v4 :is(.v4-cx, .v4-xs) .v3-card__body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name add" "price add";
  align-items: center; gap: 2px 10px; padding: 0;
}
body.v4 :is(.v4-cx, .v4-xs) .v3-card__name { grid-area: name; min-height: 0; font-size: 14px; -webkit-line-clamp: 2; }
body.v4 :is(.v4-cx, .v4-xs) .v3-card__name::after { content: ''; position: absolute; inset: 0; }
body.v4 :is(.v4-cx, .v4-xs) .v3-card__foot { display: contents; }
body.v4 :is(.v4-cx, .v4-xs) .v3-card__price { grid-area: price; flex-direction: row; align-items: baseline; gap: 8px; }
body.v4 :is(.v4-cx, .v4-xs) .v3-card__price strong { order: -1; font-size: 15px; }
body.v4 :is(.v4-cx, .v4-xs) .v3-card__price s { font-size: 12px; }
/* Tlačítko nad odkazem přes celý řádek. */
body.v4 :is(.v4-cx, .v4-xs) :is(.v3-card__form, a.v3-card__add) { grid-area: add; position: relative; z-index: 1; }

/* ── 12) Pokladna (vzor aplikace Alza, majitel 14. 10. 2026) ──
   Na telefonu dole přilepená lišta „Cena celkem · Pokračovat / Závazně objednat"
   (templates/v4/components/checkout-bar.php, zapíná ji gb4.js §6 třídou `is-on`, pak se schová
   tlačítko souhrnu); v kroku „Doprava a platba" logo i na telefonu a popis jen u zvolené možnosti.
   Po výběru se doprava i platba sbalí na zvolenou možnost s „Změnit" (gb4.js §6) — na telefonu
   od 14. 10., na počítači od 18. 10. 2026 („skrýt ostatní způsoby dopravy", vzor Alza, gramino.cz). */
.v4-ckbar, .v4-ck-change, .v4-of-change { display: none; }
body.v4 .ck-box.v4-ck-closed:has(.ck-opts input:checked) .ck-opt:not(:has(input:checked)) { display: none; }
body.v4 .v3-of--open .v4-of-closed > .v3-of__more .v3-opt:not([aria-pressed="true"]) { display: none; }   /* totéž v pokladně na jedné stránce */
body.v4 .ck-box.v4-ck-closed:has(.ck-opts input:checked) .v4-ck-change,
body.v4 .v3-of--open .v4-of-closed > .v4-of-change {
  display: inline-flex; justify-self: start; align-self: flex-start; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; padding: 0 2px;
  border: 0; background: none; cursor: pointer;
  color: var(--v3-navy); font: 600 14px/1 var(--v3-font); text-decoration: underline; text-underline-offset: 3px;
}
body.v4 :is(.v4-ck-change, .v4-of-change):hover { color: var(--v3-green-ink); }
@media (max-width: 899px) {
  body.v4 .v4-ckbar.is-on {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    display: flex; align-items: center; gap: 14px;
    padding: 10px var(--gb-sp-md) calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--v3-line-2); background: rgba(255, 255, 255, .96); box-shadow: var(--v3-shadow-up);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  }
  .v4-ckbar__sum { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .v4-ckbar__sum span { font-size: 12px; color: var(--v3-ink-2); }
  .v4-ckbar__sum strong { color: var(--v3-navy); font-size: 19px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .v4-ckbar__btn {
    flex: 1; min-width: 0; min-height: 50px; padding: 0 18px;
    border: 0; border-radius: 999px; background: var(--v3-green-cta); color: #fff;
    font: 700 16px/1.2 var(--v3-font); cursor: pointer;
  }
  .v4-ckbar__btn:active { background: var(--v3-green-cta-2); }
  .v4-ckbar__btn:disabled { opacity: .55; cursor: not-allowed; }
  body.v4.page-checkout:has(.v4-ckbar.is-on) :is(.ck-sum .ck-sum__cta, .ck-submit [data-gb-order-submit]) { display: none; }
  /* Pokladna na jedné stránce (volba `checkout: page`): tlačítko „Závazně objednat · částka"
     (templates/v3/components/order-submit.php) plave dole jako nákupní tlačítka detailu. */
  body.v4.page-onepage [data-qb-page] .v3-qb__pay {
    position: fixed; left: var(--gb-sp-md); right: var(--gb-sp-md); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 65; width: auto; box-shadow: 0 10px 28px rgba(11, 42, 85, .22);
  }
  body.v4.page-onepage .gb-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  body.v4 .ck-opt { grid-template-columns: 22px 48px minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 14px; }
  body.v4 .ck-opt__logo { display: block; width: 48px; height: 24px; }
  body.v4 .ck-opt:not(:has(input:checked)) .ck-opt__desc { display: none; }
  body.v4 .v3-of--open .v3-opt:not([aria-pressed="true"]) .v3-opt__name small { display: none; }
}

/* ── 13) Účet (vzor aplikace Alza, majitel 14. 10. 2026) ──
   Nad seznamem objednávek úspora velkoobchodu a „Často nakupujete", objednávky jako
   karty s lidským stavem a barevným okrajem (templates/v4/components/order-list-extra.php,
   gb4.js §7); v detailu objednávky „Koupit znovu" u položky (order-item-extra.php). */
.v4-save {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 14px 16px;
  border-radius: var(--v3-r-lg); background: var(--v3-green-tint); color: var(--v3-green-ink);
}
.v4-save .ico { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.v4-save p { display: grid; gap: 2px; margin: 0; }
.v4-save strong { color: var(--v3-navy); font-size: 15px; }
.v4-save span { color: var(--v3-ink-2); font-size: 13px; }
.v4-often { margin: 0 0 20px; }
.v4-often__title { margin: 0 0 10px; color: var(--v3-navy); font: 700 18px/1.3 var(--v3-font); }
/* .v4-often__row = slider bloku 28 */
.v4-orders { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.v4-order {
  display: grid; gap: 10px; padding: 16px 18px;
  border-left: 5px solid var(--v4-order-tone, var(--v3-line)); border-radius: var(--v3-r-lg); background: #fff;
}
.v4-order--pay { --v4-order-tone: var(--v4-amber); }
.v4-order--preparing, .v4-order--shipped { --v4-order-tone: #2f6fd1; }
.v4-order--delivered, .v4-order--done { --v4-order-tone: var(--v3-green); }
.v4-order__head { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.v4-order__head:hover .v4-order__state { text-decoration: underline; text-underline-offset: 3px; }
.v4-order__state { color: var(--v3-navy); font-size: 17px; font-weight: 700; }
.v4-order--pay .v4-order__state { color: #8a5600; }
.v4-order--cancelled .v4-order__state { color: var(--v3-ink-2); }
.v4-order__meta { color: var(--v3-ink-2); font-size: 13px; }
.v4-order__thumbs { display: flex; gap: 8px; }
.v4-order__thumbs :is(img, picture) { display: block; width: 56px; height: 56px; border-radius: 10px; background: var(--v3-bg); object-fit: contain; }
.v4-order__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.v4-order__sum { margin-right: auto; color: var(--v3-navy); font-size: 17px; font-weight: 700; }
.v4-order__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--v3-line-3); color: var(--v3-navy); font-size: 14px; font-weight: 700; text-decoration: none;
}
.v4-order__btn:hover { background: var(--v3-line-2); }
.v4-order__btn--pay { background: var(--v3-green-cta); color: #fff; }
.v4-order__btn--pay:hover { background: var(--v3-green-cta-2); }
body.v4 .ck-item:has(.v4-again) { grid-template-columns: 64px minmax(0, 1fr) auto auto auto; }
.v4-again { margin: 0; }
.v4-again__btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--v3-green-soft); color: var(--v3-green-ink); cursor: pointer;
}
.v4-again__btn:hover { background: var(--v3-green-tint); }
.v4-again__btn .ico { width: 20px; height: 20px; }
@media (max-width: 599px) {
  /* Na telefonu sedí tlačítko vpravo nahoře (pod ním počet a cena). */
  body.v4 .ck-item:has(.v4-again) { grid-template-columns: 56px minmax(0, 1fr) auto; }
  body.v4 .ck-item .v4-again { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ── 14) Nadpisy, název, cena a karty v písmech a velikostech v1 (majitel 15. 10. 2026) ──
   „Nadpis Sledujte náš YouTube kanál má příliš velké písmo, velikost podle V1 (i u dalších
   podobných nadpisů)": v1 má nadpisy sekcí 35 px, na telefonu 28 px (v3 až 52 px).
   S písmem nadpisů Bebas i ostatní „velká" písma jako ve v1 — změřeno na beta ?tpl=v1:
   název produktu 32 px, cena na detailu 40 px tučně, název na kartě 18 px, nadpisy
   v popisu Bebas. Písmo textu je Roboto jako ve v1 (blok 1). */
body.v4 :is(.v3-h2, .gb-sec__bar h2, .gb-sec__head h2) { font-size: clamp(24px, 2.5vw, 35px); line-height: 1.2; }
html:root body.v4 :is(.v3-h2, .gb-sec__bar h2, .gb-sec__head h2) { font-size: clamp(28px, 2.5vw, 35px); }
body.v4 .gb-sec__head h2 {
  font-family: var(--v4-head-font); font-style: var(--v4-head-style);
  font-weight: var(--v4-head-weight); letter-spacing: var(--v4-head-ls);
}
html:root body.v4 .pd-buy h1 { font-size: 32px; line-height: 1.2; }
html:root body.v4 .pd-price__now { font: 700 40px/1.2 var(--v4-head-font); letter-spacing: .01em; }
html:root body.v4 .v3-card__name { font-family: var(--v4-head-font); font-size: 18px; line-height: 1.3; font-weight: 400; letter-spacing: .01em; }
/* Ceny písmem Bebas (majitel 15. 10. 2026: „ceny písmem Bebas Neue", „bebas podle šablony V1"):
   aktuální cena všude, kde se kupuje (karty, nabídka dne, lišty detailu, našeptávač, košík), a součty
   košíku a pokladny. Řez 700 jako ve v1 (detail 40 px, „Cena celkem" 24 px; tučný řez dopočítá
   prohlížeč). Přeškrtnutá doporučená cena a rozpis zůstávají v Robotu. V1 má v Bebas jen detail
   a součty, karty a řádky košíku jsou tam v Robotu — Bebas u nich je přání majitele. Bebas je úzký,
   proto zhruba o pětinu větší písmo než Roboto na tomtéž místě (gb3.css). */
html:root body.v4 :is(.v3-card__price strong, .v3-deal__price strong,
  .v3-pdpbar__price, .v4-pdbar__txt strong, .gb-sg-item__price, .v3-cd__row strong, .v3-sum__total dd,
  .bk-sum__total strong, .ck-sum__total strong, .v4-ckbar__sum strong) {
  font-family: var(--v4-head-font); font-weight: 700; letter-spacing: .02em;
}
html:root body.v4 .v3-card__price strong { font-size: 26px; line-height: 1.1; }
html:root body.v4 .v3-fv__grid .v3-card__price strong { font-size: 21px; }
html:root body.v4 :is(.v4-cx, .v4-xs, .v4-sx__seen) .v3-card__price strong { font-size: 18px; }
html:root body.v4 .v3-deal__price strong { font-size: 48px; }
html:root body.v4 :is(.v3-pdpbar__price, .v4-ckbar__sum strong) { font-size: 23px; }
html:root body.v4 :is(.v4-pdbar__txt strong, .gb-sg-item__price) { font-size: 18px; }
html:root body.v4 .v3-cd__row strong { font-size: 20px; line-height: 1.1; }
html:root body.v4 :is(.v3-sum__total dd, .bk-sum__total strong) { font-size: 26px; line-height: 1.1; }
html:root body.v4 .ck-sum__total strong { font-size: 28px; }
@media (max-width: 1099px) { html:root body.v4 .v3-deal__price strong { font-size: 24px; } }
@media (max-width: 599px) { html:root body.v4 .v3-card__price strong { font-size: 19px; } }
html:root body.v4 .gb-content :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--v4-head-font); font-weight: 400; letter-spacing: .01em; line-height: 1.2; color: var(--v3-navy);
}
html:root body.v4 .gb-content :is(h1, .h1) { font-size: 40px; }
html:root body.v4 .gb-content :is(h2, .h2) { font-size: 32px; }
html:root body.v4 .gb-content :is(h3, .h3) { font-size: 28px; }
html:root body.v4 .gb-content :is(h4, .h4) { font-size: 24px; }
html:root body.v4 .gb-content :is(h5, .h5) { font-size: 20px; }
@media (max-width: 899px) {
  html:root body.v4 .v3-card__name { font-size: 16px; }
  html:root body.v4 .gb-content :is(h1, .h1) { font-size: 32px; }
  html:root body.v4 .gb-content :is(h2, .h2) { font-size: 28px; }
  html:root body.v4 .gb-content :is(h3, .h3) { font-size: 24px; }
}

/* ── 15) Homepage (majitel 15. 10. 2026) ──
   Odpočet do dalšího banneru na aktivní tečce: zelená výplň roste zleva doprava.
   gb.js (hero) dává [data-hero] po každém přepnutí `.is-auto`, při najetí myší a fokusu
   `.is-paused` a délku v `--hero-ms`. Bez autoposunu (prefers-reduced-motion) je tečka plná. */
body.v4 .v3-hero__main .hp-hero__dot { position: relative; overflow: hidden; }
body.v4 .v3-hero__main .hp-hero__dot.is-active { width: 36px; background: rgba(255, 255, 255, .35); }
body.v4 .v3-hero__main .hp-hero__dot.is-active::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  border-radius: inherit; background: #6cc05a;
}
body.v4 .v3-hero__main.is-auto .hp-hero__dot.is-active::after { animation: v4-hero-count var(--hero-ms, 6s) linear both; }
body.v4 .v3-hero__main.is-paused .hp-hero__dot.is-active::after { animation-play-state: paused; }
@keyframes v4-hero-count { from { width: 0; } }
@media (max-width: 899px) {
  body.v4 .v3-hero__main .hp-hero__dot.is-active { width: 28px; background: #c9d1dc; }
  body.v4 .v3-hero__main .hp-hero__dot.is-active::after { background: var(--v3-green); }
}

/* Potisk míčků místo „Nevíte, co vybrat?" (templates/v4/components/home-finder-intro.php):
   navy karta průvodce s míčkem z konfigurátoru; celá karta je odkaz přes tlačítko (`::after`). */
.v4-bp {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 40%); align-items: center;
  gap: 16px clamp(16px, 3vw, 36px);
  min-height: clamp(260px, 30vw, 420px); padding: clamp(22px, 4vw, 44px);
  border-radius: var(--v3-r); color: #fff;
  background:
    radial-gradient(55% 65% at 80% 50%, rgba(108, 192, 90, .32), transparent 70%),
    linear-gradient(155deg, #0b2a55 0%, #12386e 58%, #1f5a33 130%);
  --v4-raster-a: .05; --v4-raster-fade: linear-gradient(90deg, rgb(0 0 0 / .35), #000 65%);   /* rastr z emblému (blok 23) místo teček */
}
.v4-bp__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.v4-bp__kicker {
  margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(127, 208, 107, .16);
  color: var(--v3-green-light); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
body.v4 .v4-bp .v4-bp__title { margin: 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; }
.v4-bp__lead { max-width: 40ch; margin: 0; font-size: 16px; line-height: 1.5; color: #dfe6ef; }
.v4-bp__tax { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.v4-bp__tax .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--v3-green-light); }
.v4-bp__cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 6px; padding: 0 22px;
  border-radius: 999px; background: var(--v3-green-cta); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.v4-bp__cta .ico { width: 18px; height: 18px; }
.v4-bp__cta::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.v4-bp:hover .v4-bp__cta { background: var(--v3-green-cta-2); color: #fff; }
.v4-bp__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.v4-bp__art { position: relative; justify-self: center; width: 100%; max-width: 300px; aspect-ratio: 1; }
.v4-bp__art img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .38)); }
.v4-bp__print { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v4-bp__brand { font: 400 20px/1 var(--v4-head-font); letter-spacing: .06em; fill: var(--v3-navy); }
.v4-bp__pole { fill: none; stroke: var(--v3-navy); stroke-width: 2.4; stroke-linecap: round; }
.v4-bp__flag { fill: var(--v3-green); }
.v4-bp__3d {
  position: absolute; top: 2%; right: 0; display: grid; place-items: center;
  width: 54px; height: 54px; border: 3px solid #fff; border-radius: 50%;
  background: var(--v3-green-cta); color: #fff; font: 400 22px/1 var(--v4-head-font); letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
/* Telefon: míček do pravého horního rohu vedle nadpisu, text pod ním přes celou šířku. */
@media (max-width: 599px) {
  .v4-bp { display: block; min-height: 0; padding: 20px; border-radius: 18px; }
  .v4-bp__kicker { margin-right: 104px; padding: 0; background: none; font-size: 11px; }
  body.v4 .v4-bp .v4-bp__title { margin-right: 104px; font-size: 30px; }
  .v4-bp__lead { font-size: 15px; }
  .v4-bp__tax { font-size: 14px; }
  .v4-bp__art { position: absolute; top: 14px; right: 10px; width: 104px; }
  .v4-bp__3d { width: 36px; height: 36px; border-width: 2px; font-size: 17px; }
}
/* Nízký pruh pod nadpisem výpisu míčků (templates/v4/components/listing-head-extra.php,
   majitel 18. 10. 2026 místo starého odkazu z anotace): text | tlačítko | míček. */
.v4-bp--strip {
  grid-template-columns: minmax(0, 1fr) auto 112px; min-height: 0;
  margin-top: 16px; padding: 18px 22px 18px clamp(20px, 3vw, 32px);
}
.v4-bp--strip .v4-bp__text { gap: 6px; }
body.v4 .v4-bp--strip .v4-bp__title { font-size: clamp(24px, 2.2vw, 30px); }
.v4-bp--strip .v4-bp__lead { max-width: 62ch; font-size: 15px; }
.v4-bp--strip .v4-bp__cta { margin-top: 0; }
.v4-bp--strip .v4-bp__art { max-width: 112px; }
.v4-bp--strip .v4-bp__3d { width: 32px; height: 32px; border-width: 2px; font-size: 14px; }
@media (max-width: 599px) {
  /* Na telefonu jen nadpis a tlačítko — odstavec by odsunul produkty o další třetinu obrazovky. */
  .v4-bp--strip { padding: 16px; }
  .v4-bp--strip .v4-bp__kicker, body.v4 .v4-bp--strip .v4-bp__title { margin-right: 80px; }
  body.v4 .v4-bp--strip .v4-bp__title { font-size: 24px; }
  .v4-bp--strip .v4-bp__lead { display: none; }
  .v4-bp--strip .v4-bp__art { top: 12px; right: 8px; width: 76px; }
  .v4-bp--strip .v4-bp__cta { margin-top: 12px; }
}

/* Videa: pět vedle sebe (HomeController::getYoutubeVideos() jich ve v4 posílá pět). */
@media (min-width: 1100px) {
  body.v4 .v3-tall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.v4 .v3-tallcard__title { font-size: 22px; }
  body.v4 .v3-tallcard__body { left: 18px; right: 18px; bottom: 18px; }
}

/* ── 16) Dostupnost slovy a barvami v1 (majitel 15. 10. 2026: „texty a barvy skladovosti
   jako ve v1, tedy žádné skladem u dodavatele") ──
   Texty skládá StockService (karty) a StockLabel (detail) — „Skladem 3 ks", „Obvykle
   14 dnů", „Na dotaz". Barvy v1 (zelená, oranžová, červená) ztmavené na kontrast AA
   pro malé písmo na bílé. */
body.v4 .v3-card__stock.is-onway { color: var(--v4-amber-ink); }
body.v4 .v3-card__stock.is-onway::before { background: var(--v4-amber); }
body.v4 .v3-card__stock.is-unavailable { color: var(--v3-red); }
body.v4 .v3-card__stock.is-unavailable::before { background: var(--v3-red); }
body.v4 .pd-avail .pd-stock--available { color: var(--v3-green-ink); }
body.v4 .pd-avail .pd-stock--onway { color: var(--v4-amber-ink); }
body.v4 .pd-avail .pd-stock--unavailable { color: var(--v3-red); }
body.v4 .pd-sel__avail--available { color: var(--v3-green-ink); }
body.v4 .pd-sel__avail--onway { color: var(--v4-amber-ink); }
body.v4 .pd-sel__avail--unavailable { color: var(--v3-red); }

/* ── 17) Detail produktu: název, kód, popis, tabulky, náhledy (majitel 15. 10. 2026) ── */
/* Název přes celou šířku nákupního sloupce: značka a kód na prvním řádku, název pod nimi
   (ve v2/v3 stál kód vedle názvu a ten se lámal do úzkého sloupce). */
body.v4 .pd-buy__top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand code" "title title";
  align-items: baseline; column-gap: 12px;
}
body.v4 .pd-buy__top > div { display: contents; }
body.v4 .pd-buy__brand { grid-area: brand; }
body.v4 .pd-buy__top h1 { grid-area: title; }
body.v4 .pd-buy__code { grid-area: code; }
/* EAN až po klepnutí na kód (gb4.js §2 — `role="button"`, `.is-open`). */
body.v4 .pd-buy__ean { display: none; }
body.v4 .pd-buy__code.is-open .pd-buy__ean { display: inline; }
body.v4 .pd-buy__code[role="button"] { margin-block: -8px; padding-block: 8px; border-radius: 6px; cursor: pointer; }
body.v4 .pd-buy__code[role="button"] [data-gb-code] { text-decoration: underline dotted; text-underline-offset: 3px; }
body.v4 .pd-buy__code[role="button"]:focus-visible { outline: 2px solid var(--v3-navy); outline-offset: 2px; }

/* Popis produktu a články na bílém „papíře" („popisy by měly být na bílém pozadí, i na
   desktopu, stejně tak textové stránky — články jakoby na bílém papíře"). List je široký
   nejvýš 1 080 px, kolem zůstává šedá plocha stránky. Tabulka vlastností na stejném listu
   (majitel 16. 10. 2026: „na šedém pozadí se ztrácí… obalit a dát na bílý podklad, podobně
   jako popis") — liché řádky mají barvu stránky, takže bez listu splývaly s plochou. */
body.v4 #popis .gb-container > .gb-content,
body.v4 .gb-article > .gb-container,
body.v4 .pd-params {
  max-width: 1080px; margin-inline: auto; padding: clamp(20px, 3vw, 40px);
  border-radius: var(--v3-r-lg); background: #fff; box-shadow: var(--v3-shadow);
}
body.v4 .gb-article > .gb-container { width: calc(100% - 2 * var(--gb-gutter)); }

/* Tabulky v popisu („pěkněji formátovat, řádky na střídačku světlejší a tmavší, zakulacené
   rohy jako u ostatních"): datové tabulky — i legacy <table border="1" rules="all"> —
   vypadají jako „Parametry": zaoblený rámeček, pruhy, bez mřížky. Tabulka s fotkami je jen
   sazba (obrázky, boxy v buňkách — `:has(img, div, figure, iframe)`): bez rámečku a pruhů,
   na telefonu buňky pod sebou.
   `!important` jen proti inline stylům a šířkám z editoru v uložených popisech. */
body.v4 .gb-content table {
  display: table; width: 100% !important; margin-block: 20px;
  border: 1px solid var(--v3-line-2); border-collapse: separate; border-spacing: 0;
  border-radius: var(--v3-r); overflow: hidden; background: #fff; font-size: 15px; line-height: 1.45;
}
body.v4 .gb-content table :is(th, td) { padding: 10px 16px; border: 0 !important; text-align: left; vertical-align: top; }
body.v4 .gb-content table:not(:has(img, div, figure, iframe)) tbody tr:nth-child(odd) { background: var(--v3-bg); }
body.v4 .gb-content table:not(:has(img, div, figure, iframe)) th { background: #e9eef5; color: var(--v3-navy); font-weight: 600; }
body.v4 .gb-content table:not(:has(img, div, figure, iframe)) td:first-child { color: var(--v3-navy); font-weight: 600; }
body.v4 .gb-content table:has(img, div, figure, iframe) { border: 0; border-radius: 0; overflow: visible; background: none; }
body.v4 .gb-content table:has(img, div, figure, iframe) :is(td, th) { padding: 16px 12px; vertical-align: middle; width: auto !important; }
body.v4 .gb-content table:has(img, div, figure, iframe) tr + tr > * { border-top: 1px solid var(--v3-line-2) !important; }
body.v4 .gb-content table:has(img, div, figure, iframe) img { border-radius: var(--v3-r); }
body.v4 .pd-params table { border: 1px solid var(--v3-line-2); border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; }
body.v4 .pd-params :is(th, td) { padding: 10px 16px; border-bottom: 0; }
body.v4 .pd-params th { width: 40%; white-space: normal; color: var(--v3-navy); }
/* Řádek „Značka" místo navy pruhu značky pod detailem (templates/v4/components/pdp-params-extra.php):
   logo s názvem na stránku značky, vedle odkaz do kategorie filtrované značkou; na telefonu pod sebou.
   `multiply` schová bílé pozadí loga v šedém (lichém) řádku. */
body.v4 .pd-brandrow__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
body.v4 .pd-brandrow__name { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; color: var(--v3-navy); font-weight: 600; text-decoration: none; }
body.v4 a.pd-brandrow__name:hover span { text-decoration: underline; text-underline-offset: 3px; }
body.v4 .pd-brandrow__name img { width: auto; height: 28px; max-width: 110px; object-fit: contain; mix-blend-mode: multiply; }
body.v4 .pd-brandrow__more { display: block; font-size: 14px; line-height: 1.35; }   /* blok: šipka za posledním slovem i po zalomení */
body.v4 .pd-brandrow__last { white-space: nowrap; }   /* poslední slovo se šipkou */
body.v4 .pd-brandrow__more .ico { display: inline-block; vertical-align: -3px; }   /* reset gb.css dává svg `display: block` */
@media (max-width: 599px) {
  body.v4 :is(.gb-content, .pd-params) table { font-size: 14px; }
  body.v4 :is(.gb-content, .pd-params) table :is(th, td) { padding: 8px 12px; overflow-wrap: break-word; hyphens: auto; }
  /* Tři a víc sloupců (slovník, ceník fittingu) se na šířku telefonu vejdou jen drobněji;
     od pěti (tabulky velikostí) se tabulka posouvá do strany, místo aby se ořízla. */
  body.v4 .gb-content table:not(:has(img, div, figure, iframe)):has(tr > :nth-child(3)) { font-size: 13px; }
  body.v4 .gb-content table:not(:has(img, div, figure, iframe)):has(tr > :nth-child(3)) :is(th, td) { padding: 6px 8px; }
  body.v4 .gb-content table:not(:has(img, div, figure, iframe)):has(tr > :nth-child(5)) { display: block; overflow-x: auto; }
  body.v4 .gb-content img[style*="margin"] { margin-left: 0 !important; margin-right: 0 !important; }   /* odsazení z editoru (300 + 2 × 20 px) by přetékalo */
  body.v4 .gb-content table:has(img, div, figure, iframe), body.v4 .gb-content table:has(img, div, figure, iframe) :is(tbody, tr, td, th) { display: block; }
  body.v4 .gb-content table:has(img, div, figure, iframe) :is(td, th) { padding: 12px 0; }
  body.v4 .gb-content table:has(img, div, figure, iframe) tr + tr > * { border-top: 0 !important; }
  body.v4 .gb-content table:has(img, div, figure, iframe) tr + tr { border-top: 1px solid var(--v3-line-2); }
}

/* Náhledy fotek bez bílého rámečku („buď dát i obrázkům kulaté rohy, nebo je zvětšit, aby
   tam nebyl padding"): obojí — fotka vyplní celou dlaždici a má její zaoblené rohy, takže
   kolem fotek s barevným pozadím už není bílý okraj. Packshoty na bílé mají bílý okraj
   v samotné fotce, obrys dlaždice drží linka. */
body.v4 .pd-gallery__thumbs button { padding: 0; overflow: hidden; background: #fff; }
body.v4 .pd-gallery__thumbs img { object-fit: cover; }

/* Mezera pod drobečkovou navigací na telefonu (15 + 20 px → 10 px). */
@media (max-width: 899px) {
  body.v4.page-pdp .gb-crumbs { padding-block: 8px 4px; }
  body.v4.page-pdp .pd { padding-top: 6px; }
}

/* ── 18) Výběr varianty: název skupiny a volba na jednom řádku (majitel 15. 10. 2026) ──
   „Výběr atributů je na výšku moc roztahaný — nevlezou se selecty vedle nadpisů, jako
   Určení: pánské?" Vlezou: na telefonu i desktopu dvě kolonky jako tabulka — vlevo název
   skupiny (šířka podle nejdelšího, nejvýš 40 %, subgrid je zarovná pod sebe), vpravo
   pilulky nebo rozbalovací seznam. Rozbalený seznam se roztáhne přes celý řádek (řádky
   nesou název, dostupnost i cenu). Vybraná hodnota je vidět na pilulce či tlačítku —
   opakovat ji u názvu netřeba; cena varianty je v hlavní ceně, tlačítko ji nenese.
   Po „Do košíku" bez úplného výběru se první nevybraná skupina obtáhne červeně a značka
   pak přeskakuje na další (gb-pdp.js `markMissing`, `.is-missing`). */
body.v4 #gb-variants { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); column-gap: 14px; }
body.v4 #gb-variants > * { grid-column: 1 / -1; }
body.v4 .pd-var { display: grid; grid-template-columns: subgrid; align-items: center; position: relative; margin-top: 12px; }
body.v4 .pd-var--fixed { margin-top: 10px; }
body.v4 :is(.pd-var__head, .pd-var__fixed) { display: contents; }
body.v4 :is(.pd-var__head strong, .pd-var__fixed > span) { grid-column: 1; font-size: 15px; font-weight: 600; color: var(--v3-ink-2); }
body.v4 .pd-var__fixed > strong { grid-column: 2; font-size: 15px; color: var(--v3-navy); }
body.v4 .pd-var__picked { display: none; }
body.v4 :is(.pd-var__opts, .pd-sel) { grid-column: 2; min-width: 0; }
body.v4 .pd-var__opt { min-height: 44px; }
body.v4 .pd-sel { position: static; }
body.v4 .pd-sel__btn { min-height: 48px; padding-block: 6px; }
body.v4 .pd-sel__btn .pd-sel__price { display: none; }
body.v4 .pd-var.is-missing { outline: 2px solid var(--v3-red); outline-offset: 5px; border-radius: 12px; }
body.v4 .pd-var.is-missing .pd-var__head strong { color: var(--v3-red); }

/* ── 19) Detail produktu: „Často kupováno společně" a „Mohlo by se vám hodit" stejnými kartami
   jako řady na homepage (majitel 15. 10. 2026: „dlaždice příliš velké, raději 5 menších stejných
   jako na homepage, ať to máme jednotné") — od 18. 10. 2026 slidery bloku 28 (dřív pět karet
   v řádku ve víc řadách, karusel jen na telefonu), i zboží akce na /kosik (blok 24). ── */

/* ── 20) Písma přesně jako ve v1 a stránky s obsahem z v1 (majitel 15. 10. 2026) ──
   Výchozí písma v4 = v1: menu a nadpisy Bebas Neue, text Roboto (blok 1). V1 má všechny
   nadpisy (h1–h6 i .h1–.h6) v Bebas Neue 400 navy (dist/css/master-golf.css; v obsahu blok 14)
   a nikde kurzívu — drobné nadpisky v3 (`.v3-kicker`) proto s Roboto rovně. */
html:root body.v4 .v3-kicker { font-style: normal; }
/* Nadpisy stránek a sekcí v Bebas jako ve v1 — i na stránkách v2/v3, které v seznamu bloku 2
   nejsou (vrácení a reklamace, potisk, účet, výpis…); velikost zůstává z jejich pravidel.
   Titulky karet (h3, 15–16 px) zůstávají v Robotu: Bebas je v té velikosti špatně čitelný. */
html:root body.v4 main :is(h1, h2) {
  font-family: var(--v4-head-font); font-style: normal; font-weight: 400; letter-spacing: .01em;
}
/* Obrázky v obsahu z editoru jako ve v1: v řádku textu, zarovnané podle odstavce (v2 je
   dávala všechny na střed, takže ikony služeb stály jinde než jejich nadpisy). Obrázek
   s vlastním `display`/`margin` v inline stylu si ho drží. */
body.v4 .gb-content img { display: inline-block; margin-inline: 0; vertical-align: middle; }
/* Potisk míčků (assets/ballprint/widget.css) má ve v2+ nadpisy písmem textu tučně; ve v4
   jako ve v1 Bebas 400 — písmo textu widgetu se musí nastavit zvlášť, ve v2 se odvozuje
   z písma nadpisů. */
html:root body.v4 .gbp { --gbp-font-heading: var(--v4-head-font); --gbp-font-body: var(--v4-font); }
html:root body.v4 .gbp :is(.gbp-h1, .gbp-h2) { font-weight: 400; letter-spacing: .01em; line-height: 1.1; }

/* Obsah z editoru bez rámce článku (článek MTY 31 — Kontakt, informační stránky): stránka v2
   ho vypisuje rovnou do <main> bez kontejneru (templates/v2/pages/article-detail.php:57)
   a počítá s rozvržením v1 — bílá stránka široká 1 440 px. V4 mu dá šířku stránky a bílý
   list a doplní třídy v1, které obsah používá (`.center`, `.page-max-width`). */
body.v4 main > .gb-content {
  width: min(calc(100% - 2 * var(--gb-gutter)), calc(var(--gb-container) - 2 * var(--gb-gutter)));
  margin: 4px auto 48px; padding: clamp(16px, 3vw, 40px);
  border-radius: var(--v3-r-lg); background: #fff; box-shadow: var(--v3-shadow);
}
body.v4 .gb-content .center { text-align: center; }
body.v4 .gb-content .page-max-width { max-width: 1440px; }
body.v4 .gb-content .overflow-hidden { overflow: hidden; }   /* v1 (Bootstrap): drží plovoucí sloupce Provozovatele */
/* Kontakt (obsah má vlastní <style> z v1; tady jen to, co ve v4 chybí nebo nesedí):
   ikony nad telefonem a e-mailem na střed (gb.css dává <svg> display:block), bez prázdného
   <h1><br></h1> nad nimi, kontakty lidí bez podtržení a v barvách s kontrastem AA (obsah má
   #98A2AD, 2,6 : 1) a e-mail bez lámání uprostřed slova, „Provozovatel" na vlastním řádku
   (styl obsahu čeká `span.title > h4`, v datech je `h4` rovnou ve sloupci). */
body.v4 .gb-content .center > svg { margin-inline: auto; }
body.v4 .gb-content > .page-max-width > h1:first-of-type:has(> br:only-child):has(+ .content-contact) { display: none; }
body.v4 .gb-content .content-contact #employees .item article > a { width: auto; color: var(--v3-ink-2); text-decoration: none; }
body.v4 .gb-content .content-contact #employees .item article > a:hover { color: var(--v3-green-ink); text-decoration: underline; }
body.v4 .gb-content .content-contact #employees .item article > span { color: var(--v3-muted); }
body.v4 .gb-content #trade-contact .column > h4 {
  display: table; margin: 0; padding-bottom: 6px; font-size: 30px; border-bottom: 2px solid var(--v3-green);
}
body.v4 .gb-content #trade-contact a.facebook-banner { text-decoration: none; }
/* Prodejna na zelené fotce: bílé písmo na #5BAC03 má 2,9 : 1 a štítek s adresou (průhlednost
   0,6) 1,9 : 1 — podklad ve v4 tmavší zelenou tlačítek (4,6 : 1), štítky plně bílé.
   FB banner: podtitulek bílý (na #3C5A99 má 7 : 1). */
body.v4 .gb-content .content-contact #contact-adress .photo { background-color: var(--v3-green-cta); }
body.v4 .gb-content .content-contact #contact-adress .photo article > :is(span, a) { opacity: 1 !important; }
body.v4 .gb-content #trade-contact a.facebook-banner * { opacity: 1 !important; color: #fff !important; }   /* podtitulek: #C1E8FC s průhledností 0,7 měl 3,4 : 1 */
@media (max-width: 599px) {
  body.v4 main > .gb-content { width: 100%; margin-top: 0; border-radius: 0; box-shadow: none; }
  html:root body.v4 .gb-content #contact-info .h1 { font-size: 30px; }
}

/* ── 21) Pokladna na telefonu bez hlavičky a patičky (majitel 15. 10. 2026: „košík má v mobilu
   perfektní zobrazení bez patičky atd., stejným způsobem to chci i ve všech krocích pokladny
   a u platby") ──
   Kroky 2–4, pokladna na jedné stránce, děkovací stránka a výsledek platby: místo horního
   proužku a hlavičky lišta jako záhlaví panelu košíku (konec templates/v4/layout/header.php,
   třídy v3-side__head / __title / __close) — zpět o krok, název kroku s „2/4", ukazatel postupu
   a křížek zpět do obchodu (gb4.js §8); patička a spodní lišta pryč. Dole zůstává lišta
   „Cena celkem · Pokračovat" (blok 12). Kroky pokladny a nadpis stránky lišta zastupuje
   jen pro oko — pro odečítač zůstávají v obsahu. */
.v4-ckhead { display: none; }
@media (max-width: 899px) {
  body.v4:is(.page-checkout, .page-thankyou, .page-payment) :is(.v3-topbar, .v4-header, .gb-footer, .v3-tabbar) { display: none; }
  body.v4:is(.page-checkout, .page-thankyou, .page-payment) .v4-ckhead {
    position: sticky; top: 0; z-index: 60;
    display: flex; gap: 2px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
    background: #fff;
  }
  .v4-ckhead__title { flex: 1 1 auto; min-width: 0; margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .v4-ckhead__back + .v4-ckhead__title { margin-left: 0; }
  .v4-ckhead__title small { margin-left: 4px; }
  .v4-ckhead__back {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: 50%; color: var(--v3-navy);
  }
  .v4-ckhead__back:hover { background: var(--v3-line-3); }
  .v4-ckhead__back .ico { width: 24px; height: 24px; }
  /* Postup: hotové kroky zeleně, aktuální napůl — tenký pruh na spodní hraně lišty. */
  .v4-ckhead__bar { position: absolute; left: 0; right: 0; bottom: -1px; display: flex; gap: 2px; height: 3px; }
  .v4-ckhead__bar i { flex: 1; background: var(--v3-line-2); }
  .v4-ckhead__bar i.is-done { background: var(--v3-green); }
  .v4-ckhead__bar i.is-now { background: linear-gradient(90deg, var(--v3-green) 50%, var(--v3-line-2) 50%); }
  body.v4:is(.page-checkout, .page-thankyou) .ck-steps,
  body.v4.page-checkout :is(.ck__title, .v3-opage__title) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Konec stránky nad lištou pokladny — rezervu dřív nesla patička (--gb-dock, gb.js §8;
     výška lišty už bezpečnou zónu dole obsahuje). Bez lišty (děkovací stránka) aspoň zóna. */
  body.v4:is(.page-checkout, .page-thankyou, .page-payment) main {
    padding-bottom: max(calc(var(--gb-dock, 0px) + 16px), calc(16px + env(safe-area-inset-bottom, 0px)));
  }
  body.v4.page-onepage main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.v4.page-checkout .ck { padding-bottom: 8px; }
  html:has(> body.v4:is(.page-checkout, .page-thankyou, .page-payment)) { scroll-padding-top: 72px; }
}

/* ── 22) Chybějící údaj a poslední krok pokladny (majitel 15. 10. 2026) ──
   „Zvýraznit chybějící údaj stejným způsobem jako nevybrané atributy na detailu" (blok 18):
   rámec pole obtáhne gb4.js §9 (HTML validace) a gb3.js §5 (formulář objednávky v panelu),
   sekci dopravy a platby gb-checkout.js — vždy do opravy. Poslední krok: položky jako v košíku
   (templates/v4/components/confirm-items.php) a údaje jako adresy (confirm-recap.php). */
body.v4 :is(.gb-field, .gb-field > div, .gb-check, label).is-missing { outline: 2px solid var(--v3-red); outline-offset: 5px; border-radius: 12px; }
body.v4 :is(.gb-field, .gb-field > div).is-missing > label { color: var(--v3-red); }
body.v4 .is-missing :is(input, select, textarea):not([type="checkbox"], [type="radio"]) { border-color: var(--v3-red); }
body.v4 .ck-box.is-invalid { box-shadow: none; outline: 2px solid var(--v3-red); outline-offset: 3px; }
body.v4 .ck-box.is-invalid .ck-box__head h2, body.v4 .ck-box.is-invalid > h2 { color: var(--v3-red); }
body.v4 .ck-box .v3-cd__item:first-child { padding-top: 4px; }
body.v4 .ck-box .v3-cd__item:last-child { border-bottom: 0; padding-bottom: 0; }
.v4-recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px 28px; }
.v4-recap h3 { margin: 0 0 4px; color: var(--v3-navy); font-size: 15px; font-weight: 700; }
.v4-recap p { margin: 0; color: var(--v3-ink-2); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.v4-recap p + p { margin-top: 4px; }
.v4-recap strong { color: var(--v3-navy); font-weight: 600; }
.v4-recap__label { color: var(--v3-muted); }
/* Přetékání na úzkém telefonu (majitel 15. 10. 2026: „přetékání textů z divů ven na malých mobilech
   jako iPhone 13 mini"; změřeno detektorem při 375 a 320 px):
   - datová tabulka v popisu do čtyř sloupců (blok 17) se dlouhými slovy („(Nastavitelný)") roztáhla
     za list — na telefonu se slova smí zalomit; od pěti sloupců se dál posouvá do strany;
   - Kontakt: obsah z v1 dává kartám lidí pod 669 px pevných 312 px — při 320 px je list užší. */
@media (max-width: 599px) {
  body.v4 .gb-content table:not(:has(img, div, figure, iframe, tr > :nth-child(5))) :is(th, td) { overflow-wrap: anywhere; }
  body.v4 .gb-content .content-contact #employees > .section-item,
  body.v4 .gb-content .content-contact #employees > .item,
  body.v4 .gb-content .content-contact #employees > .section-item > .item { max-width: 100%; }
}
/* Karta produktu pod 360 px (malý telefon, zvětšené písmo v Safari): cena v Bebas a kulaté
   „Koupit" se do paty vedle sebe nevejdou — cena přejela pod tlačítko. Tlačítko jde pod cenu. */
@media (max-width: 359px) {
  body.v4 .v3-card__foot { flex-wrap: wrap; }
  body.v4 .v3-card__price { min-width: max-content; }
  body.v4 :is(.v3-card__form, a.v3-card__add) { margin-left: auto; }
  body.v4 :is(.v4-cx, .v4-xs, .v4-sx__seen) .v3-card__price { min-width: 0; }   /* řádkové karty (doplňky, prohlížené) mají vlastní mřížku */
}

/* ── 23) Rastr z emblému (majitel 16. 10. 2026) ──
   Corporate identity: plochy kryje rastr z tvarů emblému — míček (O) a odpaliště (Λ, V)
   z assets/v3/logo-golfbrothers.svg v uspořádání emblému 2×2 (O Λ / V O). Jedna SVG
   dlaždice jako maska pseudo-prvku; barvu a sílu dává background, takže prohlížeč dlaždici
   vykreslí jednou a plochu skládá z kopií (cena ≈ jednobarevné pozadí, měření
   v DESIGN_V4.md „Rastr z emblému"). Buňka 20 × 22 px, výchozí síla 2 %, banner potisku
   (blok 15) a patička 5 %. Ukázky a ladění: design/rastr.html; podklady CI v matrixu
   (Systém › SI › Grafika). Plocha s rastrem potřebuje `position` a `isolation: isolate`. */
:root {
  --v4-raster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.2 16.8' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='v' transform='translate(.445 .475)' d='M4.28 7.45c-0.33,0 -0.59,-0.27 -0.59,-0.6 0,-1.39 0.37,-2.79 1.08,-4.06 0.32,-0.58 0.63,-1.13 0.76,-1.36l0 -0.26c0,0.02 -0.02,0.01 -0.06,0.01l-4.25 0c-0.02,0 -0.04,0.01 -0.05,0.02l0.01 0.23c0.12,0.23 0.4,0.72 0.71,1.26l0.05 0.1c0.71,1.27 1.08,2.68 1.08,4.07 0,0.32 -0.26,0.59 -0.59,0.59 -0.32,0 -0.59,-0.27 -0.59,-0.59 0,-1.19 -0.32,-2.4 -0.93,-3.49l-0.06 -0.1c-0.33,-0.59 -0.63,-1.13 -0.73,-1.31 -0.08,-0.14 -0.12,-0.3 -0.12,-0.46l0 -0.31c0,-0.24 0.07,-0.47 0.21,-0.67 0.22,-0.32 0.6,-0.52 1.01,-0.52l4.25 0c0.24,0 0.47,0.06 0.66,0.18 0.37,0.21 0.58,0.58 0.58,0.99l0 0.33c0,0.16 -0.04,0.32 -0.12,0.47 -0.1,0.18 -0.43,0.77 -0.78,1.4 -0.61,1.09 -0.94,2.3 -0.94,3.49 0,0.33 -0.26,0.59 -0.59,0.59l0 0z'/%3E%3Cg id='l'%3E%3Cuse href='%23v' transform='rotate(180 3.8 4.2)'/%3E%3C/g%3E%3Ccircle id='o' cx='3.8' cy='4.2' r='2.83' fill='none' stroke='%23000' stroke-width='1.18'/%3E%3C/defs%3E%3Cuse href='%23o'/%3E%3Cuse href='%23l' x='7.6'/%3E%3Cuse href='%23v' y='8.4'/%3E%3Cuse href='%23o' x='7.6' y='8.4'/%3E%3C/svg%3E");
  --v4-raster-w: 40px; --v4-raster-h: 44px;   /* dlaždice = 2 × 2 buňky 20 × 22 px */
  --v4-raster-a: .02;
}
.v4-bp::before, body.v4 .gb-footer__legacy::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(255 255 255 / var(--v4-raster-a));
  -webkit-mask: var(--v4-raster) 0 0 / var(--v4-raster-w) var(--v4-raster-h) repeat,
                var(--v4-raster-fade, linear-gradient(#000, #000)) 0 0 / 100% 100% no-repeat;
          mask: var(--v4-raster) 0 0 / var(--v4-raster-w) var(--v4-raster-h) repeat,
                var(--v4-raster-fade, linear-gradient(#000, #000)) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;   /* dlaždice jen tam, kde je přechod */
}
/* Patička: rastr nahoře, dolů se ztrácí; sloupce odkazů s nadpisy (templates/v4/layout/footer.php). */
body.v4 .gb-footer__legacy {
  position: relative; isolation: isolate;
  --v4-raster-a: .05; --v4-raster-fade: linear-gradient(#000, transparent 90%);
}
body.v4 .gb-footer__legacy .v4-foot__col { min-width: 0; }
body.v4 .gb-footer__legacy .v4-foot__h {
  margin: 0 0 10px; color: #fff; font: 400 22px/1.1 'Bebas Neue', Arial, sans-serif; letter-spacing: .02em;
}
@media (max-width: 899px) {   /* gb.css: sloupce odkazů pod sebou */
  body.v4 .gb-footer__legacy .v4-foot__col + .v4-foot__col { margin-top: 14px; }
}

/* ── 24) Prvky akcí z v1 (16. 10. 2026; DESIGN_V4.md „Prvky akcí z v1") ──
   „Kup dohromady a ušetři" na detailu (templates/v4/components/pdp-xsell-extra.php): sekce
   jako „Často kupováno společně" (karty bloku 19), nad kartami název akce. Výzvy akcí v košíku
   (cart-promo.php): rámečky bloku 7c a pod nimi zboží akce — v panelu v řádcích bloku 11, na
   stránce /kosik v mřížce. Karty s cenou akce kreslí templates/v4/components/xsell-cards.php. */
.v4-xs__lead {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  color: var(--v3-green-ink); font-size: 15px; font-weight: 700; line-height: 1.35;
}
.v4-xs__lead .ico { width: 18px; height: 18px; flex: none; }
.v4-xs .gb-grid + :is(.v4-xs__lead, .v4-railhead) { margin-top: 24px; }
.v4-cm + .v4-cm { margin-top: 12px; }
.v4-cx--promo .v4-cx__list { margin-top: 8px; }
.v4-bkp { margin-top: var(--gb-sp-md); }
.v4-bkp .gb-grid { margin-top: 10px; }

/* ── 25) Popis produktu: karty technologií a odrážky výhod (majitel 17. 10. 2026) ──
   „V šabloně V4 splývá ta sekce Technology in detail… vymysli co nejlepší moderní styly"
   a „Key features — text u odrážek odsazený (i ten druhý řádek)". Popisy z Content Workspace
   (apps/content, GenerateMasterEnStep) kreslí technologie jako bílé karty
   `div.bg-white.rounded.p-4.h-100.border-start.border-4.border-<barva>` s ikonou v nadpisu
   a výhody jako `ul.list-unstyled > li > i.bi-check2 + text` (vzorek 300 EN popisů
   17. 10. 2026: jiný tvar karet ani odrážek se nevyskytl). Na bílém listu popisu (blok 17)
   bílá karta splývala a ikonu kreslí jen menšina jmen (gb-content-compat.css jich zná ~15),
   takže karty měly ikonu na přeskáčku. Ve v4 je karta šedá plocha listu se zelenou linkou
   nahoře (jako linka pod nadpisy, blok 2), bez barevného okraje a bez ikon; mřížka karet
   lícuje s textem. Výhody: fajfka v zeleném kolečku, text odsazený i na dalších řádcích. */
body.v4 .gb-content .row:has(> * > .border-start.border-4) { margin-inline: calc(-1 * var(--gb-sp-sm)); }
body.v4 .gb-content .border-start.border-4 {
  padding: 22px 24px 24px; border: 0; border-radius: var(--v3-r-lg);
  background: var(--v3-bg); font-size: 15px; line-height: 1.6;
}
body.v4 .gb-content .border-start.border-4::before {
  content: ''; display: block; width: 32px; height: 3px; margin-bottom: 14px;
  border-radius: 2px; background: var(--v3-green);
}
body.v4 .gb-content .border-start.border-4 > :is(h3, h4, h5):first-child { margin: 0 0 8px; }
body.v4 .gb-content .border-start.border-4 > :is(h3, h4, h5):first-child > [class*="bi-"] { display: none; }
body.v4 .gb-content .border-start.border-4 > :last-child { margin-bottom: 0; }
body.v4 .gb-content .list-unstyled > li:has(> [class*="bi-"]:first-child) { position: relative; padding-left: 34px; }
body.v4 .gb-content .list-unstyled > li > [class*="bi-"]:first-child { position: absolute; left: 0; top: 0; margin: 0; }
body.v4 .gb-content .list-unstyled > li > :is(.bi-check2, .bi-check, .bi-check-lg):first-child {
  top: calc((1lh - 22px) / 2);   /* na střed prvního řádku */
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--v3-green-tint); color: var(--v3-green-ink); font-size: 13px;
}
/* Obal tabulky z generátoru (`div.table-responsive.bg-white.p-2.rounded`) odsazoval tabulku
   o 8 px od textu; zaoblení a rámeček má tabulka sama (blok 17). */
body.v4 .gb-content .table-responsive { padding: 0; }

/* ── 26) Mezery, galerie detailu, obsahové stránky a „Kup dohromady" (majitel 17. 10. 2026) ──
   „Příliš velké mezery na výšku — pod drobečky, nad popisem… pod drobečkem je větší mezera
   než nad", „v kontaktech jsou některá písma příliš velká", „Kup dohromady a ušetři výrazně
   kompaktněji" a „hlavní obrázek… aby při otevření detailu bez rolování viděl celý obrázek
   a možná i galerii zmenšenin". Změřeno při 1536 × 864: drobečky 15 px nad a 15 + 20 px pod
   (detail), fotka 800 px od 253 px (spodek pod ohybem) a náhledy 70 px ve dvou řadách (150 px),
   sekce detailu 60 + 60 px, list popisu 56 px a k tomu 40 px nad prvním nadpisem. */

/* Drobečky: stejná mezera nad i pod. Telefon má vlastní menší (blok 17). */
@media (min-width: 900px) {
  body.v4 .gb-crumbs { padding-block: 12px; }
  body.v4.page-pdp .pd { padding-top: 0; }
  body.v4 main > .gb-content { margin-top: 0; }
  body.v4.page-article .gb-article { padding-top: 0; }
}
/* Svislý rytmus detailu: sekce 36 px místo 60 px (mezi sekcemi 72 místo 120 px). */
body.v4.page-pdp .pd { padding-bottom: 32px; }
body.v4.page-pdp .gb-sec { padding-block: 36px; }
body.v4 .gb-sec__head { margin-bottom: 16px; }
body.v4 :is(#popis .gb-content, .gb-article .gb-content, main > .gb-content) > :first-child { margin-top: 0; }

/* Galerie na počítači: náhledy svisle vlevo od fotky (nezabírají výšku, jdou posouvat kolečkem)
   a rámeček fotky přes celou šířku sloupce, vysoký nejvýš jako široký a jako okno bez hlavičky
   s drobečky (~227 px) a bez nákupní lišty dole (~80 px; ukazuje se, dokud „Do košíku" není
   vidět, gb3.js §7) — fotka je tak celá na první obrazovce i při 1366 × 768. Pod 380 px se
   rámeček už nezmenšuje. Fotka je v rámečku celá (object-fit z gb.css), nižší rámeček má jen
   bílý okraj po stranách. Výška ze šířky přes `cqw`: holé `aspect-ratio` + `max-height` by
   rámeček zúžilo a mezi fotkou a nákupním boxem zůstalo prázdné místo. Lightbox se vkládá
   do <body>, kontejner galerie ho neovlivní. */
@media (min-width: 900px) {
  body.v4 .pd-gallery { container-type: inline-size; }
  body.v4 .pd-gallery:has(> .pd-gallery__thumbs) { padding-left: 88px; }
  body.v4 .pd-gallery:has(> .pd-gallery__thumbs) > .pd-gallery__badges { left: 88px; }
  body.v4 .pd-gallery > .pd-gallery__thumbs {
    position: absolute; top: 0; bottom: 0; left: 0; width: 76px; margin: 0;
    flex-direction: column; flex-wrap: nowrap; gap: 8px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  body.v4 .pd-gallery > .pd-gallery__thumbs::-webkit-scrollbar { display: none; }
  body.v4 .pd-gallery__thumbs button { flex: none; width: 76px; height: 76px; }
  body.v4 .pd-gallery__main { aspect-ratio: auto; height: min(100cqw, max(380px, calc(100svh - 330px))); }
}

/* Obsahové stránky (Kontakt, FAQ, informační stránky): `h6` jako ve v1 (bez pravidla vyhrála
   velikost tagu — `h3.h6` „Invoicing and post" měl 28 px) a otázky akordeonu písmem textu
   (dědily Bebas 28 px tučně z `h3.accordion-header`). */
html:root body.v4 .gb-content :is(h6, .h6) { font-size: 16px; }
body.v4 .gb-content .accordion-button {
  font-family: var(--v4-font); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--v3-navy);
}

/* „Kup dohromady a ušetři" (templates/v4/components/pdp-xsell-extra.php) kompaktně: karty jako
   řádky bloku 11 (miniatura, název, cena akce, Koupit), „−X %" přes miniaturu; dřív až osm
   velkých karet ve dvou řadách po pěti (≈ 900 px). Od 18. 10. 2026 v jedné řadě jako ostatní
   lišty (blok 28): čtyři řádky na počítači, na telefonu jeden a kousek dalšího. */
body.v4.page-pdp .v4-xs.gb-sec { padding-block: 28px; }
body.v4 .v4-xs .v3-card { grid-template-columns: 64px minmax(0, 1fr); }
body.v4 .v4-xs .v3-card__img { width: 64px; height: 64px; }
body.v4 .v4-xs .v3-card__badges { top: 6px; left: 6px; right: auto; }
body.v4 .v4-xs .v3-badge { padding: 2px 6px; font-size: 10px; }
body.v4 .v4-xs .v3-badge:not(.v3-badge--sale) { display: none; }

/* ── 27) Kroky pokladny na počítači (majitel 17. 10. 2026: „na desktopu to zobrazení kroků
   pokladny by možná mohlo být větší") ──
   Kroky (templates/v2/components/checkout-steps.php) přes celou šířku stránky spojené čárou,
   hotový úsek zeleně; kolečko 40 px místo 28 px a popisek 16 px místo 14 px. Na telefonu
   kroky zastupuje lišta pokladny (blok 21). „Košík" tu vede na stránku košíku (gb4.js §8). */
@media (min-width: 900px) {
  body.v4 .ck-steps { padding-block: 24px 4px; }
  body.v4 .ck-steps ol { flex-wrap: nowrap; gap: 0; }
  body.v4 .ck-steps__item { display: flex; flex: 1 1 auto; align-items: center; }
  body.v4 .ck-steps__item:last-child { flex: none; }
  body.v4 .ck-steps__item:not(:last-child)::after {
    content: ''; flex: 1 1 auto; min-width: 24px; height: 2px; margin-inline: 16px;
    border-radius: 2px; background: var(--v3-line);
  }
  body.v4 .ck-steps__item.is-done::after { background: var(--v3-green); }
  body.v4 .ck-steps__item > * { gap: 12px; font-size: 16px; line-height: 1.25; white-space: nowrap; }
  body.v4 .ck-steps__num { width: 40px; height: 40px; border-width: 2px; background: #fff; font-size: 16px; font-weight: 700; }
  body.v4 .ck-steps__num .ico { width: 18px; height: 18px; }
  body.v4 .ck-steps__item:not(.is-done, .is-current) .ck-steps__num { border-color: var(--v3-line); color: var(--v3-muted); }
  body.v4 .ck-steps__item.is-done a:hover .ck-steps__num { background: var(--v3-green-tint); border-color: var(--v3-green); }
}

/* ── 28) Produktové lišty jako slidery (majitel 18. 10. 2026, vzor gramino.cz „Hodí se k tomu") ──
   „Další produkty ze stejné kategorie… a další podobné produktové lišty udělej jen jednořádkové,
   jako slidery, ať jdou posouvat tažením myši i v mobilu prstem… všude na webu." Jedna řada na
   všech šířkách: detail (příslušenství / další z kategorie, Často kupováno společně, Kup dohromady),
   zboží akce na /kosik, řady homepage (záložky, Koupit znovu, Naposledy prohlížené) a „Často
   nakupujete" v účtu. Pět karet na počítači, čtyři na tabletu, na telefonu 44 % (dvě a kus další).
   Jen v šířce stránky (majitel 18. 10. 2026: „pouze v původní šířce stránky, nikoliv až do pravého
   konce prohlížeče") — 10 px do okraje kontejneru jen kvůli stínu karet; na telefonu od kraje ke
   kraji jako dosud. Na počítači bez přichycení (tah myší a trackpad plynule, karty srovná dojezd
   v gb4.js §10), dotyk přichytává na kartu. Šipky v hlavičce lišty jen s myší (`.v4-railnav`,
   gb4.js §10), homepage má šipky záložek v3. Nahradilo bloky 9, 13, 19 a 26. */
body.v4 :is(.page-pdp .gb-sec .gb-grid, .v4-bkp .gb-grid, .v3-row, .v4-often__row) {
  --v4-rail-gap: 14px; --v4-rail-n: 5;
  display: grid; grid-auto-flow: column; grid-template: none;
  grid-auto-columns: calc((100% - (var(--v4-rail-n) - 1) * var(--v4-rail-gap)) / var(--v4-rail-n));
  gap: var(--v4-rail-gap);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: auto; scrollbar-width: none;
  margin-inline: -10px; padding: 4px 10px 14px; scroll-padding-inline: 10px;
}
@media (hover: hover) and (pointer: fine) {
  body.v4 :is(.page-pdp .gb-sec .gb-grid, .v4-bkp .gb-grid, .v3-row, .v4-often__row) { scroll-snap-type: none; }
}
body.v4 :is(.page-pdp .gb-sec .gb-grid, .v4-bkp .gb-grid, .v3-row, .v4-often__row)::-webkit-scrollbar { display: none; }
body.v4 :is(.page-pdp .gb-sec .gb-grid, .v4-bkp .gb-grid, .v3-row, .v4-often__row) > * { min-width: 0; scroll-snap-align: start; }
body.v4 .v3-row > .v3-card { display: flex; }   /* v3 na telefonu ukazuje jen šest karet (mřížka 2 × 3) */
body.v4.page-pdp .v4-xs .gb-grid { --v4-rail-n: 4; --v4-rail-gap: 10px; }   /* řádkové karty (blok 26) */
@media (min-width: 900px) and (max-width: 1099px) {
  body.v4 :is(.page-pdp .gb-sec .gb-grid, .v4-bkp .gb-grid, .v3-row, .v4-often__row) { --v4-rail-n: 4; }
  body.v4.page-pdp .v4-xs .gb-grid { --v4-rail-n: 3; }
}
@media (max-width: 899px) {
  body.v4 :is(.page-pdp .gb-sec .gb-grid, .v4-bkp .gb-grid, .v3-row, .v4-often__row) { --v4-rail-gap: 10px; grid-auto-columns: 44%; }
  body.v4.page-pdp .v4-xs .gb-grid { grid-auto-columns: 86%; }
  /* Telefon: od kraje ke kraji obrazovky (okraj stránky = --gb-sp-md), jako karusely před 18. 10. */
  body.v4 :is(.page-pdp .gb-sec .gb-grid, .v4-bkp .gb-grid, .v3-row) {
    margin-inline: calc(-1 * var(--gb-sp-md)); padding-inline: var(--gb-sp-md); scroll-padding-inline: var(--gb-sp-md);
  }
}
/* Tah myší (gb4.js §10): bez přichycení, dokud se táhne; odkazy a fotky tah nepřeruší. */
body.v4 [data-v4-rail].is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
body.v4 [data-v4-rail].is-dragging > * { pointer-events: none; }
body.v4 [data-v4-rail] img { -webkit-user-drag: none; }
/* Donačítání lišty (gb4.js §10, „Další produkty ze stejné kategorie"): prázdná karta s točícím
   se emblémem, dokud nepřijde další dávka. Emblém jako načítací kolečko panelu (gb3.css,
   --v3-mark z loga v hlavičce); golfprovsechny.cz emblém v logu nemá, tam ho dá mark.svg.
   Výška = řada lišty (karty vedle). */
body.v4 .v4-skel {
  min-height: 280px; background: #fff; border-radius: var(--v3-r);
  display: flex; align-items: center; justify-content: center;
}
body.v4 .v4-skel::before {
  content: ''; width: 48px; height: 48px;
  background: var(--v3-mark, url("/assets/v2/mark.svg")) center / contain no-repeat;
  animation: v3-logo-busy 1.6s cubic-bezier(.45, .05, .55, .95) infinite;
}
@media (prefers-reduced-motion: reduce) { body.v4 .v4-skel::before { animation: none; } }
/* Šipky: v hlavičce sekce vpravo (`.gb-sec__bar`), jinak řádek s nadpisem lišty `.v4-railhead`. */
.v4-railnav { display: flex; gap: 8px; flex: none; }
.v4-railnav .v3-round { width: 40px; height: 40px; }
.v4-railnav .v3-round:disabled { opacity: .35; cursor: default; border-color: #c9d1dc; }
.gb-sec__bar > .v4-railnav { margin-left: auto; }
.v4-railhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.v4-railhead > :first-child { flex: 1 1 auto; min-width: 0; margin: 0; }
@media (hover: none), (pointer: coarse) { .v4-railnav { display: none; } }

/* ── 29) „V košíku" místo „Do košíku" (majitel 18. 10. 2026) ──
   „Tlačítko do košíku na produktech, pokud už jsou v košíku, by mohlo zobrazit, že produkt
   (konkrétní varianta) už je v košíku, a volbu pro změnu množství." Na detailu (nákupní sloupec,
   plovoucí tlačítko telefonu, nákupní lišta počítače) a na kartách místo vložení počítadlo
   „− ✓ 2 ks v košíku +": číslo je množství v košíku, + / − ho hned mění, − u posledního kusu
   je koš. Kreslí a obsluhuje gb4.js §11; zboží v košíku zná ze stavu košíku v session. */
.v4-inc {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  min-height: 48px; padding: 3px; border: 2px solid var(--v3-green-cta); border-radius: 999px;
  background: var(--v3-green-tint); color: var(--v3-green-ink);
}
.v4-inc__btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: var(--v3-navy); font: 700 22px/1 var(--v3-font); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.v4-inc__btn:hover { background: var(--v3-green-cta); color: #fff; }
.v4-inc__btn .ico { width: 18px; height: 18px; }
.v4-inc__val {
  flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 15px/1.2 var(--v3-font); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.v4-inc__val > .ico { width: 18px; height: 18px; flex: none; }
.v4-inc.is-busy .v4-inc__val { opacity: .55; }
/* Detail: počítadlo místo množství a „Do košíku"; odkaz do košíku vedle. */
body.v4 form.pd-cta.is-incart > :is(.pd-qty, button[type="submit"]) { display: none; }
body.v4 form.pd-cta > .v4-inc { flex: 1 1 auto; min-height: 56px; }
body.v4 form.pd-cta > .v4-inc .v4-inc__btn { width: 46px; height: 46px; }
.v4-inc__go { flex: none; color: var(--v3-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v4-inc__go:hover { color: var(--v3-green-ink); }
body.v4 .v3-pdpbar.is-incart .v3-pdpbar__add { display: none; }
body.v4 .v3-pdpbar > .v4-inc { flex: none; min-width: 220px; }
body.v4 .v4-fcta.is-incart .v4-fcta__btn--cart { display: none; }
body.v4 .v4-fcta > .v4-inc { flex: 1 1 0; min-height: 52px; box-shadow: 0 8px 24px rgba(11, 42, 85, .28); }
/* Telefon: vedle „Rezervovat" by se „1 ks v košíku" nevešlo (375 px) — rezervace zůstane jako
   kulatá ikona, popisek čte odečítač. */
body.v4 .v4-fcta.is-incart .v4-fcta__btn--store { flex: none; width: 52px; padding: 0; gap: 0; font-size: 0; }
/* Karta: jen ✓ a číslo („ks v košíku" čte odečítač), menší tlačítka. */
body.v4 .v3-card__form.is-incart > .v3-card__add { display: none; }
body.v4 .v3-card__form > .v4-inc { min-height: 0; padding: 2px; gap: 2px; }
body.v4 .v3-card__form > .v4-inc .v4-inc__btn { width: 34px; height: 34px; font-size: 19px; }
body.v4 .v3-card__form > .v4-inc .v4-inc__val { min-width: 40px; gap: 3px; font-size: 15px; }
body.v4 .v3-card__form > .v4-inc .v4-inc__txt {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 30) Hlavička na telefonu: hledání se při rolování schová, proužky pod ní (majitel 18. 10. 2026) ──
   „Na gramino je hlavička sticky na dvě fáze… u nás by se v mobilní verzi mohl nejdříve skrýt
   search bar, ten zabírá poměrně dost místa" a „vyzkoušej hlavičku oddělenou tenkým zeleným
   a modrým proužkem jako v patičce". Při rolování dolů pod hlavičku se řádek hledání schová pod
   horní řádek (zbude 60 px místo 116 px) a v horním řádku je místo oblíbených lupa — otevře
   hledání přes celou obrazovku (blok 10). Rolování nahoru o kus, nebo návrat nahoru, hledání
   vrátí (`html.v4-sx-hide`, gb4.js §12). Na detailu pak druhá fáze: lišta produktu (blok 7b).
   Hlavička zůstává stejně vysoká, mění se jen její pozadí (`::before`) — obsah pod ní neposkočí
   a dolní pruh propouští klepnutí. Proužek je modrý nad zeleným jako lišta menu na počítači — majitel 18. 10. 2026 po vyzkoušení: „proužek
   nechat, ale v opačném pořadí barev" (první verze měla zelený nad modrým jako patička). */
.v4-hsearch { display: none; }
@media (max-width: 1099px) {
  /* Pruh dole jako vnitřní stín: první v seznamu leží nahoře — spodní 3 px zelené, nad nimi 3 px modré. */
  body.v4 { --v4-hedge: 6px; --v4-hedge-paint: inset 0 -3px 0 var(--v3-green), inset 0 -6px 0 var(--v3-navy); }
  body.v4 .v4-header.gb-header {
    position: relative; isolation: isolate; border-bottom: 0; box-shadow: none; background: transparent;
  }
  body.v4 .v4-header.gb-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: 100%;
    background: #fff; box-shadow: var(--v4-hedge-paint);
    transition: height .25s ease, background-color .2s;
  }
  html.v4-scrolled:root body.v4 .v4-header.gb-header {
    background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.v4-scrolled:root body.v4 .v4-header.gb-header::before {
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  }
  /* Schované hledání: pozadí jen pod horním řádkem (ten klepnutí drží), řádek hledání pod něj
     odjede; zbytek hlavičky klepnutí propouští na stránku pod ní. */
  html.v4-sx-hide body.v4 .v4-header.gb-header { pointer-events: none; }
  html.v4-sx-hide body.v4 .v4-header.gb-header::before { height: calc(60px + var(--v4-hedge)); pointer-events: auto; }
  html.v4-sx-hide body.v4 .v4-header .gb-header__in > :not(.gb-search) { pointer-events: auto; }
  body.v4 .v4-header .gb-header__in > .gb-search { transition: opacity .2s, transform .25s ease, visibility .25s; }
  html.v4-sx-hide body.v4 .v4-header .gb-header__in > .gb-search {
    opacity: 0; transform: translateY(-14px); visibility: hidden; pointer-events: none;
  }
  html.v4-sx-hide body.v4 .v4-header .v4-hsearch { display: inline-flex; }
  html.v4-sx-hide body.v4 .v4-header .v3-hbtn--fav { display: none; }
  html.v4-sx-hide { scroll-padding-top: 76px; }
  /* Tentýž pruh má zásuvka menu (pod hledáním, které je v ní druhým řádkem hlavičky) a lišta
     produktu na detailu (2. fáze hlavičky, blok 7b). */
  body.v4 .gb-mnav__scroll .gb-mnav__search { box-shadow: var(--v4-hedge-paint); }
  body.v4 .v4-pdbar { box-shadow: var(--v4-hedge-paint); }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  body.v4 .v4-header.gb-header::before, body.v4 .v4-header .gb-header__in > .gb-search { transition: none; }
}