/* Koloboty.cz — vzhled značky nad šablonou v4 (zadání majitele 23. 10. 2026: „předělat do
   červeno černého designu podobně jako má současné www.koloboty.cz"). Načítá ho jen
   templates/koloboty/layout/top.php, za gb4.css; rozvržení, komponenty, košík i pokladna
   jsou v4 beze změny (KOLOBOTY.md → „Vrstva značky").

   1) Tokeny: barva značky v3/v2 („zelená" tlačítek, proužků a odkazů) je červená, „navy"
      textu a tmavých ploch je černá.
   2) Stavy dostupnosti a úspěchu (Skladem, Zdarma, Doručeno, Uloženo) zůstávají zelené jako
      na starém webu — červená by u nich četla jako chyba.
   3) Hlavička tmavá jako na starém webu: proužek, řádek s logem a lišta kategorií
      s červeným proužkem, na telefonu i v zásuvce menu.
   4) Patička tmavá, nadpisy červeně.
   5) Výpis: místo postranních filtrů čipy velikostí nad produkty.
   6) Velikosti EU/UK/US/mm (tabulka a přepínač z gb4.css blok 33): stav skladem zelený.
   7) Homepage značky (templates/koloboty/pages/home.php).
   Kontrast textu ověřený skriptem scripts/contrast_check.js (bílá na #e3092c 4,8 : 1,
   #c8072a na bílé 6 : 1, #ff5a6e na #1d1e1c 5,5 : 1). */

/* ── 1) Tokeny ── */
:root {
  --kb-red: #e3092c;          /* logo, proužky, plochy s bílým textem */
  --kb-red-2: #b0061f;        /* hover tlačítek */
  --kb-red-ink: #c8072a;      /* červený text na bílé a šedé */
  --kb-red-light: #ff5a6e;    /* červený text na černé */
  --kb-red-tint: #fdecef;
  --kb-black: #1d1e1c;        /* hlavička, patička, tmavé karty */
  --kb-black-2: #141414;      /* horní proužek, spodní lišta patičky */
  --kb-line-dark: #343533;    /* linky na černé */
  --kb-ink-inv: #cfcfcf;      /* tlumený text na černé */
  /* Zelená stavů (blok 2) — hodnoty golfové v3 */
  --kb-ok: #4a9a3c; --kb-ok-ink: #2f7424; --kb-ok-tint: #e5f1e1; --kb-ok-tint-2: #cfe6c8;

  /* Text a nadpisy velmi tmavě šedé, ne černé (majitel 23. 10. 2026: „čistě černá je až moc");
     černá #1d1e1c zůstává jen plochám — hlavička, patička, tmavé karty. */
  --v3-navy: #333333;
  --v3-navy-2: var(--kb-black);
  --v3-green: var(--kb-red);
  --v3-green-cta: var(--kb-red);
  --v3-green-cta-2: var(--kb-red-2);
  --v3-green-ink: var(--kb-red-ink);
  --v3-green-tint: var(--kb-red-tint);
  --v3-green-soft: #fef4f6;
  --v3-green-light: var(--kb-red-light);
  --v3-bg: #f4f4f4;
  --v3-line: #dcdcdc;
  --v3-line-2: #e8e8e8;
  --v3-line-3: #efefef;
  --v3-muted: #5f5f5f;
  --v3-ink-2: #474747;
  --v3-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --v3-shadow-pop: 0 24px 60px rgba(0, 0, 0, .18);
  --v3-shadow-up: 0 -4px 18px rgba(0, 0, 0, .12);
  /* v2 tokeny, které gb3.css nepřevádí z v3 */
  --gb-green-tint-2: #f6c9d1;
  --gb-navy-3: #0d0d0d;
  --gb-navy-line: var(--kb-line-dark);
  --gb-navy-mut: var(--kb-ink-inv);
  --gb-ink-inv: var(--kb-ink-inv);
}

/* ── 2) Zelené stavy ──
   Prvek si vrátí zelené tokeny, jeho vlastní pravidla (barva, tečka ::before) je pak vezmou.
   Výběr varianty a zaškrtnuté volby zůstávají červené (barva značky), zelená je jen stav. */
:is(.v3-card__stock, .gb-card__stock, .gb-sg-item__stock--available, .pd-stock--available,
    .pd-sel__avail--available, .of-item__instock, .v3-pdpbar__info, .v3-eta, .v3-vch__used,
    .v4-order--delivered, .v4-order--done, .v4-save, .ac-badge--ok, .ac-timeline__item.is-ok,
    .ac-bt__state, .pr__live, .ac-bt__copy.is-done, .gb-alert--success, .gb-note--ok, .ck-box--ok,
    .rma-flag--ok, .ares-status--ok, .pr__ico--ok, .bk-item__ok, .bk-item__free, .bk-sum__free,
    .bk-sum__minus, .ck-sum__free, .v3-sum .is-minus, .gb-badge--ship, .v3-badge--ship, .pd-avail__label) {
  --v3-green: var(--kb-ok); --v3-green-ink: var(--kb-ok-ink);
  --v3-green-tint: var(--kb-ok-tint); --v3-green-soft: #eaf3e6;
  --gb-green: var(--kb-ok); --gb-green-2: var(--kb-ok-ink);
  --gb-green-tint: var(--kb-ok-tint); --gb-green-tint-2: var(--kb-ok-tint-2);
}
/* Tečka „skladem" u volby varianty — samotná volba (rámeček vybrané) zůstává značky. */
body.kb .pd-var__opt[data-avail="instock"]::before { background: var(--kb-ok); }
body.kb .sz-tbl__avail td[data-avail="instock"] { color: var(--kb-ok-ink); }
body.kb .sz-tbl__avail td[data-avail="instock"] .sz-tbl__dot { background: var(--kb-ok); }

/* ── 3) Hlavička ── */
body.v4.kb .v3-topbar { background: var(--kb-black-2); color: var(--kb-ink-inv); }
body.v4.kb .v3-topbar__usp li:first-child { color: #fff; }
body.v4.kb .v3-topbar a:hover { color: #fff; }

body.v4.kb .v4-header.gb-header { background: var(--kb-black); color: #fff; }
body.kb .v4-header .v3-hbtn, body.kb .v4-header .v4-burger { color: #fff; }
body.kb .v4-header .v3-hbtn:hover, body.kb .v4-header .v4-burger:hover,
body.kb .v4-header .gb-drop[data-hover].is-open > .gb-drop__btn { background: rgba(255, 255, 255, .12); }
/* Logo větší než golfové (majitel 23. 10.: „logo je docela malé"), 60 px = 244 px šířky. */
@media (min-width: 1100px) {
  body.v4.kb .v4-header .gb-logo :is(img, svg) { height: 60px; max-width: 260px; }
  body.kb .v4-header .gb-search { flex: 0 1 440px; max-width: 440px; margin-inline: 24px auto; }
}
/* Hledání nenápadné: na webu s pár desítkami modelů není co hledat (majitel 23. 10.) —
   tmavě šedé pole bez bílé plochy a užší než na golfu. */
body.kb :is(.v4-header, .gb-mnav) .gb-search { background: #2c2d2b; border-color: #3d3e3c; box-shadow: none; }
body.kb :is(.v4-header, .gb-mnav) .gb-search input { color: #fff; }
body.kb :is(.v4-header, .gb-mnav) .gb-search input::placeholder { color: #a8a8a8; }
body.kb :is(.v4-header, .gb-mnav) .v3-search__ico { color: #a8a8a8; }
body.kb :is(.v4-header, .gb-mnav) .gb-search:focus-within { border-color: var(--kb-red); box-shadow: 0 0 0 2px var(--kb-red); }
body.kb :is(.v4-header, .gb-mnav) .gb-search button { background: #444542; color: #fff; }
body.kb :is(.v4-header, .gb-mnav) .gb-search button:hover { background: #575855; }
body.kb :is(.v4-header, .v4-mnav__bar) .v3-cart.gb-cart { background: var(--kb-red); }
body.kb :is(.v4-header, .v4-mnav__bar) .v3-cart.gb-cart:hover { background: var(--kb-red-2); }
body.kb :is(.v4-header, .v4-mnav__bar) .v3-cart .gb-cart__count { background: #fff; color: var(--kb-red-ink); }
body.kb .v4-header .gb-dot { background: var(--kb-red-light); }
/* Panely tlačítek (kontakt, info, účet, košík) zůstávají bílé s černým textem. */
body.kb .v4-header .gb-drop__panel { color: var(--v3-navy); }

/* Lišta kategorií: černá s červeným proužkem (golf: navy se zeleným). */
html:root body.v4.kb .v4-header .gb-nav { background: var(--kb-black); box-shadow: inset 0 1px 0 var(--kb-line-dark); }
html:root body.v4.kb .v4-header .gb-nav__item.is-open > .gb-nav__link::after { border-bottom-color: var(--kb-black); }
html:root body.v4.kb .v4-header :is(.gb-nav__item:hover > .gb-nav__link, .gb-nav__aux a:hover) { color: var(--kb-red-light); }

@media (max-width: 1099px) {
  body.v4.kb { --v4-hedge-paint: inset 0 -3px 0 var(--kb-red), inset 0 -6px 0 var(--kb-black-2); }
  body.v4.kb .v4-header.gb-header::before { background: var(--kb-black); }
  html.v4-scrolled:root body.v4.kb .v4-header.gb-header::before { background: rgba(29, 30, 28, .94); }
  body.v4.kb :is(.v4-header, .v4-mnav__bar) .gb-logo :is(img, svg) { height: 40px; }
  body.v4.kb .v4-header .gb-search, body.v4.kb .gb-mnav .gb-search { background: #2c2d2b; }
  body.v4.kb :is(.v4-header, .gb-mnav) .gb-search:focus-within { box-shadow: 0 0 0 2px var(--kb-red); }
  /* Zásuvka menu: horní lišta a řádek hledání jako hlavička. */
  body.v4.kb .v4-mnav__bar { background: var(--kb-black); color: #fff; }
  body.v4.kb .v4-mnav__bar :is(.v4-burger, .v3-hbtn) { color: #fff; }
  body.v4.kb .v4-mnav__bar :is(.v4-burger, .v3-hbtn):hover { background: rgba(255, 255, 255, .12); }
  body.v4.kb .gb-mnav__scroll .gb-mnav__search { background: var(--kb-black); }
  /* Hledání jen na lupu (majitel 23. 10. 2026: „V mobilní verzi kolobot search formulář může
     být vždy skrytý, zobrazit jen když klikne uživatel na lupu"). Golf schovává řádek hledání
     až při rolování (gb4.css blok 30), koloboty ho nemají ani nahoře: hlavička je jen horní
     řádek a v něm lupa místo oblíbených (ty jsou ve spodní liště). Lupa otevře hledání přes
     celou obrazovku (gb4.js §12 → §4). */
  body.v4.kb .v4-header .gb-header__in > .gb-search { display: none; }
  body.v4.kb .v4-header .v4-hsearch { display: inline-flex; }
  body.v4.kb .v4-header .v3-hbtn--fav { display: none; }
  html.v4-sx-hide body.v4.kb .v4-header.gb-header::before { height: 100%; }
  /* Kotva zastaví pod nízkou hlavičkou (60 px + proužek), golf počítá s 116 px. Detail má
     vlastní odsazení podle lišty produktu (gb4.css blok 7b a 30). */
  html:root:has(> body.v4.kb:not(.page-pdp)) { scroll-padding-top: 76px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  body.v4.kb .pd-anchors { top: calc(60px + var(--v4-hedge)); }
}

/* ── 4) Patička ── */
body.v4.kb .gb-footer { background: var(--kb-black); border-top-color: var(--kb-red); }
body.v4.kb .gb-footer__bar { background: var(--kb-black-2); }
body.v4.kb .gb-footer__legacy #newsletter { background: var(--kb-black); }
body.v4.kb .gb-footer__legacy .partners { background: var(--kb-black); }
body.v4.kb .gb-footer__legacy .v4-foot__h { color: var(--kb-red-light); }
body.v4.kb .gb-footer__legacy .footer-nav a { color: var(--kb-ink-inv); }
body.v4.kb .gb-footer__legacy .footer-nav a:hover { color: #fff; text-decoration: underline; }
body.v4.kb .gb-footer__legacy .copyright .info span { color: var(--kb-ink-inv); }
/* Logo v bloku je už bílé (assets/koloboty/logo-koloboty.svg); golfové navy logo gb.css
   přebarvuje filtrem na bílou, tady by filtr zbělil i červené kruhy. */
body.v4.kb .gb-footer__legacy .copyright .flb-img { filter: none; }
body.v4.kb .gb-footer__legacy .socials a.social:hover { color: var(--kb-red-light); }

/* ── 5) Výpis: velikosti nad produkty místo postranních filtrů ──
   Postranní filtr (#pl-filters) zůstává v HTML kvůli formuláři a zaškrtávátkům, na která
   čipy velikostí míří (templates/koloboty/components/listing-quick.php); jen není vidět,
   výpis jde přes celou šířku. Dlaždice podkategorií bez obrázků (kategorie je v ERP nemají). */
body.kb .pl__grid { grid-template-columns: minmax(0, 1fr); }
body.kb .pl__grid > #pl-filters, body.kb .pl-bar__filters { display: none; }
body.kb .pl-subcats img { display: none; }
/* Bez postranního sloupce se vejde 5 karet jako v lištách (golf: 4 vedle filtru, gb.css). */
body.kb .pl-products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1299px) { body.kb .pl-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { body.kb .pl-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { body.kb .pl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kb-sizes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 4px auto 16px; padding-block: 12px;
  border-block: 1px solid var(--v3-line-2);
}
.kb-sizes__label { flex: none; font-size: 14px; font-weight: 700; color: var(--v3-navy); }
.kb-sizes__list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 420px; min-width: 0; }
.kb-sizes .kb-sizes__chip {
  min-width: 48px; min-height: 44px; padding: 0 12px; justify-content: center;
  border: 1.5px solid var(--v3-line); border-radius: 10px; background: #fff;
  color: var(--v3-navy); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kb-sizes .kb-sizes__chip:hover { border-color: var(--v3-navy); }
.kb-sizes .kb-sizes__chip[aria-pressed="true"] { border-color: var(--kb-red); background: var(--kb-red); color: #fff; }
.kb-sizes__help { flex: none; color: var(--kb-red-ink); font-size: 14px; font-weight: 600; }
.kb-sizes__help:hover { color: var(--v3-navy); }

/* ── 6) Velikosti: přepínač EU/UK/US/mm u čipů výpisu a na homepage (gb4.css blok 33) ──
   US popisky jsou delší („11M/12W") — dlaždice homepage pro ně zmenší písmo. */
.kb-sizes .sz-sys { margin-left: auto; }
/* Sloupec tabulky velikostí pod myší a vybraný: světle červený podklad značky (golfový
   --v3-green-soft je u koloboty skoro bílý). */
body.v4.kb :is(.sz-tbl, .gb-content .sz-tbl) td:is(.is-hover, .is-sel) { background: var(--kb-red-tint); }
.kb-finder__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
html[data-sz-sys="us"] .kb-finder__size strong { font-size: 22px; }

/* ── 7) Homepage ── */
.kb-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 80% at 78% 55%, rgba(227, 9, 44, .22), transparent 70%),
    linear-gradient(160deg, #262725 0%, var(--kb-black) 55%, var(--kb-black-2) 100%);
  background-color: var(--kb-black);   /* podklad přechodu — podle něj počítá kontrast contrast_check.js */
  color: #fff;
}
.kb-hero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center;
  gap: 12px clamp(20px, 4vw, 56px); padding-block: clamp(28px, 5vw, 64px);
}
.kb-hero__kicker {
  margin: 0 0 10px; color: var(--kb-red-light);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.kb-hero__title {
  margin: 0; font: 400 clamp(44px, 6vw, 84px)/.95 var(--v4-head-font); letter-spacing: .01em; color: #fff;
}
.kb-hero__title span { display: block; color: var(--kb-red-light); }
.kb-hero__lead { max-width: 520px; margin: 16px 0 0; color: var(--kb-ink-inv); font-size: 17px; line-height: 1.55; }
.kb-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.kb-hero .kb-btn--light { color: #fff; border-color: rgba(255, 255, 255, .7); }
.kb-hero .kb-btn--light:hover { background: #fff; color: var(--kb-black); border-color: #fff; }
.kb-hero__ship { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: #fff; font-size: 14px; font-weight: 600; }
.kb-hero__ship .ico { width: 20px; height: 20px; flex: none; color: var(--kb-red-light); }
.kb-hero__img { justify-self: end; width: 100%; max-width: 620px; }
.kb-hero__img img { display: block; width: 100%; height: auto; }

.kb-sec__lead { margin: 6px 0 0; color: var(--v3-ink-2); font-size: 15px; }
.kb-finder__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.kb-finder__size {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 76px; padding: 10px 6px; border: 1.5px solid var(--v3-line); border-radius: var(--v3-r-sm);
  background: #fff; color: var(--v3-navy); text-decoration: none; transition: border-color .15s, background-color .15s;
}
.kb-finder__size strong { font: 400 30px/1 var(--v4-head-font); font-variant-numeric: tabular-nums; }
.kb-finder__size small { color: var(--v3-muted); font-size: 12px; }
.kb-finder__size:hover, .kb-finder__size:focus-visible { border-color: var(--kb-red); background: var(--kb-red-tint); }

.kb-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.kb-cat {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 150px; padding: 22px 24px; border-radius: var(--v3-r);
  background: var(--kb-black); color: #fff; text-decoration: none;
}
.kb-cat::after {   /* znak značky jako vodoznak */
  content: ''; position: absolute; right: -18px; bottom: -26px; z-index: -1;
  width: 190px; height: 168px; opacity: .22;
  background: url('/assets/koloboty/emblem-white.svg') center / contain no-repeat;
  transition: transform .3s;
}
.kb-cat--red { background: var(--kb-red-2); }
.kb-cat__name { font: 400 clamp(30px, 3.4vw, 42px)/1 var(--v4-head-font); letter-spacing: .01em; }
.kb-cat__go { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.kb-cat__go .ico { width: 18px; height: 18px; transition: transform .2s; }
.kb-cat:hover .kb-cat__go .ico { transform: translateX(4px); }
.kb-cat:hover::after { transform: rotate(-8deg) scale(1.05); }

.kb-how {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: stretch;
}
.kb-how__steps, .kb-how__size { padding: clamp(20px, 3vw, 32px); border-radius: var(--v3-r); }
.kb-how__steps { background: #fff; border: 1px solid var(--v3-line-2); }
.kb-how__size { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--kb-black); color: #fff; }
.kb-how__size .v3-h2 { color: #fff; }
html:root body.v4.kb .kb-how__size .v3-h2 { border-bottom-color: var(--kb-red); }
.kb-how__size p { margin: 0; color: var(--kb-ink-inv); line-height: 1.55; }
.kb-how__size .v3-btn { margin-top: auto; }
.kb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0; padding: 0; list-style: none; }
.kb-steps li { display: flex; flex-direction: column; gap: 6px; }
.kb-steps__n {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--kb-red); color: #fff; font: 400 24px/1 var(--v4-head-font);
}
.kb-steps strong { font-size: 16px; color: var(--v3-navy); }
.kb-steps p { margin: 0; color: var(--v3-ink-2); font-size: 14px; line-height: 1.5; }
.kb-how__safety { display: flex; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--v3-r-sm); background: var(--v3-bg); color: var(--v3-ink-2); font-size: 14px; line-height: 1.5; }
.kb-how__safety .ico { width: 20px; height: 20px; flex: none; color: var(--kb-red-ink); }

.kb-faq__list { display: grid; gap: 10px; max-width: 920px; }
.kb-faq__item { border: 1px solid var(--v3-line-2); border-radius: var(--v3-r-sm); background: #fff; }
.kb-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 18px; cursor: pointer; list-style: none;
  color: var(--v3-navy); font-size: 16px; font-weight: 700;
}
.kb-faq__item summary::-webkit-details-marker { display: none; }
.kb-faq__item summary::after {
  content: '+'; flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--kb-red-tint); color: var(--kb-red-ink); font-size: 20px; line-height: 1;
}
.kb-faq__item[open] summary::after { content: '−'; }
.kb-faq__item summary:focus-visible { outline: 2px solid var(--kb-red); outline-offset: 2px; border-radius: var(--v3-r-sm); }
.kb-faq__item p { margin: 0; padding: 0 18px 16px; color: var(--v3-ink-2); line-height: 1.6; }

@media (max-width: 899px) {
  .kb-hero__in { grid-template-columns: minmax(0, 1fr); }
  .kb-hero__img { order: -1; justify-self: center; max-width: 420px; margin-bottom: -6px; }
  .kb-how { grid-template-columns: minmax(0, 1fr); }
  .kb-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kb-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .kb-steps li > :not(.kb-steps__n) { grid-column: 2; }
  .kb-steps__n { grid-row: span 2; }
}
@media (max-width: 599px) {
  .kb-hero__acts .v3-btn { flex: 1 1 100%; }
  .kb-finder__list { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
  .kb-finder__size { min-height: 68px; }
  .kb-finder__size strong { font-size: 26px; }
  .kb-cat { min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-cat::after, .kb-cat__go .ico, .kb-finder__size { transition: none; }
}

/* ── 8) Cookie lišta: dist/css/cookieconsent.css má tlačítko „Přijmout vše" zelené natvrdo
   (#49943c), proměnnou nečte — přebarvit na barvu značky i s přepínači v nastavení. ── */
body.kb :is(#c-bns.swap button:last-child, #c-bns:not(.swap) button:first-child, #s-bns button:last-child) {
  background: var(--kb-red); color: #fff;
}
body.kb :is(#c-bns.swap button:last-child, #c-bns:not(.swap) button:first-child, #s-bns button:last-child):is(:hover, :active, :focus-visible) {
  background: var(--kb-red-2);
}
body.kb .GBC_div .b-tg .c-tgl:checked ~ .c-tg { background: var(--kb-red); }