/* =====================================================================
   ITDelivery – Prodej (nový shop)
   Vzhled navazuje na hlavní web ITDelivery: tyrkys #00c4cc, tmavá #293948,
   světlé pozadí, systémová typografie, pilulková tlačítka.
   ===================================================================== */
:root{
  --brand:#00c4cc;
  --brand-dark:#0295a0;
  --bg-dark:#293948;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#f3f4f6;
  --card:#ffffff;
  /* "Skladem X kusů" text (.stock--in/.spnl-product__stock--in) -- sytější,
     výraznější zelená (inComputer styl), ať nepůsobí tlumeně na bílém
     pozadí. JEDNA centrální hodnota pro detail i výpisy (buybox/variant
     řádky přes _offer-box.php, product.php, karta produktu přes
     _product-card.php, i search panel), viz .stock--in níže -- žádná
     druhá zelená natvrdo na jiném místě. --ok-bg (pozadí flash zpráv/
     potvrzení objednávky) je samostatná proměnná, beze změny. */
  --ok:#159447;
  --ok-bg:#e7f6ec;
  --off:#8a2b2b;
  --off-bg:#f6e9e9;
  --container:1440px;
  /* Hlavní nákupní CTA ("Koupit"/"Vybrat kus"/"Přidat do košíku") --
     odstín naměřený přímo na referenčním inComputeru (getComputedStyle
     jejich .add-to-cart-button: background rgb(161,201,0), text
     rgb(41,43,46)) -- světlejší zelená než dřívější natvrdo #95cf2f.
     Jedna centrální definice, ať se to dál nevrství na dvou místech
     zvlášť (.buybox .btn a .unit-card__buy .btn.add-form__btn). */
  --cta:#a1c900;
  --cta-hover:#8eb100;
  --cta-ink:#292b2e;

  /* Jeden badge/chip systém pro CELÝ shop -- detail produktu (.pdp__tag)
     i výpisy (.chip) čtou STEJNÉ barvy/border z těchhle proměnných (viz
     ".chip,.pdp__tag" a modifikátory .chip--grade-*/.chip--incomplete
     níže). Detail je referenční vzhled; výpis se liší JEN velikostí
     (font-size/padding), nikdy barevností. */
  --badge-bg:#f5f7f8;
  --badge-color:#2b3a42;
  --badge-border:var(--line);
  --badge-grade-a-bg:#e8f7ee;
  --badge-grade-a-color:#1f7a4d;
  --badge-grade-a-border:#bfe8cf;
  --badge-grade-b-bg:#fff6dd;
  --badge-grade-b-color:#8a6100;
  --badge-grade-b-border:#f2e2a8;
  --badge-grade-c-bg:#fdecec;
  --badge-grade-c-color:#a13b3b;
  --badge-grade-c-border:#f3c9c9;
  /* A- odstín POUZE pro /stavy-zarizeni/ (.grade-card__badge--a-minus v
     shop.css) -- sdílená shop_grade_badge_class() (produktové karty/PDP)
     dál řadí A/A- shodně do zelené 'A' rodiny, tady jen JEDNA stránka
     dostává navíc jemně odlišný (teal, stejná rodina jako --brand tyrkys)
     odstín, ať je A vs A- na první pohled rozlišitelné. */
  --badge-grade-a-minus-bg:#e3f6f5;
  --badge-grade-a-minus-color:#0d7d78;
  --badge-grade-a-minus-border:#bfe6e3;
  --badge-incomplete-bg:#fffbeb;
  --badge-incomplete-color:#92400e;
  --badge-incomplete-border:#fde68a;

  /* Podbarvení CELÉ skupiny kusů podle stavu (.variant.is-grade-a/b/c níž,
     detail produktu -- sekce "Vyberte stav (třídu)") -- STEJNÁ barevná
     rodina/logika jako --badge-grade-*-bg/border výš (A/A- zelená, B žlutá,
     C červená), jen o polovinu blíž bílé -- velká plocha pozadí celého
     bloku potřebuje jemnější odstín než malé kolečko/badge (ty zůstávají
     beze změny, pořád čtou --badge-grade-*). Žádná nová paleta, jen
     zesvětlená verze existujících hodnot. */
  --section-grade-a-bg:#f4fbf7;
  --section-grade-a-border:#dff4e7;
  --section-grade-b-bg:#fffbee;
  --section-grade-b-border:#f9f1d4;
  --section-grade-c-bg:#fef6f6;
  --section-grade-c-border:#f9e4e4;
  /* A- karta na /stavy-zarizeni/ -- stejná "zesvětlená" logika, teal odstín
     (viz --badge-grade-a-minus-* výš). */
  --section-grade-a-minus-bg:#f2fbfa;
  --section-grade-a-minus-border:#dff2f0;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Open Sans", sans-serif;
  font-size:16px;
  line-height:1.5;
}
/* Formulářové prvky nedědí font-family z body podle výchozího UA stylu
   prohlížečů – doplněno explicitně, ať jde jednotný font i do tlačítek/inputů. */
button, input, select, textarea{
  font-family:inherit;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;color:var(--ink);margin:0 0 .5em}

/* Centrovaný obsah. Na desktopu širší (~1440px) a s většími bočními gutry,
   pod max-width se přirozeně chová jako width:100% (max-width + auto margin). */
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 14px}}

/* ---------- Topbar ---------- */
.topbar{background:#f9fafb;border-bottom:1px solid var(--line);font-size:13.5px;color:#4b5563}
/* 2 logické oblasti (left/right) -- telefon+.topbar__center zrušeny
   celoplošně (audit "TOPBAR BEZ TELEFONU GLOBÁLNĚ"), e-mail se přesunul
   do topbar__right vedle auth bloku. Pod site mobilním breakpointem (820px,
   stejný jako zbytek projektu) se vrací na původní flex-wrap chování --
   2 bloky se jednoduše zalomí pod sebe, žádný nový mobilní header. */
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px;padding-bottom:6px}
.topbar__pill{font-weight:700;color:#022c22}
/* Informační odkazy vlevo (O nás/Kontakty/Proč repasovaná technika) --
   stejný nenápadný textový styl jako pravá část lišty (e-mail/účet), viz
   .topbar__right .topbar__contact a .topbar__right a níže -- žádné velké
   buttony, jen jemné zvýraznění při hoveru. */
.topbar__left a{color:#4b5563}
.topbar__left a:hover{color:var(--brand-dark);text-decoration:none}
/* Kontakt (e-mail) -- výraznější/tmavší než zbytek lišty, blíž referenci
   (incomputer.cz: 14px/500/téměř černá) -- ale beze změny fontu (Open Sans
   zůstává) a bez fraktální váhy 450, která dřív dělala písmo opticky "jinak"
   (uživatelská zpětná vazba). Celočíselná váha 500 (medium) -- žádné
   synteticko-variabilní artefakty. Barva #1f2937 = stejný odstín, jaký web
   už používá jako tmavý titulkový text (SHOP_EMAIL_TITLE_COLOR), ne čistá
   #000 -- pořád v paletě webu, jen tmavší/výraznější než zbytek lišty.
   Specificita .topbar__right .topbar__contact (2 třídy) musí přebít obecné
   .topbar__right a níže, jinak by e-mail zdědil slabší šedou. */
.topbar__right .topbar__contact{color:#1f2937;font-size:14.5px;font-weight:500;line-height:1.35}
.topbar__right .topbar__contact:hover{color:#111827;text-decoration:underline}
/* Ikona obálky -- STEJNÝ vzor jako .quick-inquiry-open (product.php):
   inline-flex + gap, flex:0 0 auto ať se v flex kontextu nezmáčkne. Ikona
   záměrně o odstín světlejší než text (currentColor by ji ztotožnilo s
   textovou barvou linku) -- viz zvláštní barva níže. */
.topbar__contact{display:inline-flex;align-items:center;gap:5px}
.topbar__contact-icon{flex:0 0 auto;color:#94a0ad}
.topbar__right a{color:#4b5563}
.topbar__right a:hover{color:var(--brand-dark);text-decoration:none}
.topbar__sep{opacity:.5;margin:0 6px}
@media(max-width:820px){
  .topbar__inner{flex-wrap:wrap}
}

/* ---------- Header ---------- */
/* position+z-index nad .search-panel-backdrop (135) -- header/search zůstává
   použitelný i s otevřeným panelem (zatemní se jen zbytek stránky pod ním). */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:136}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.site-logo{display:flex;align-items:center;gap:10px}
.site-logo:hover{text-decoration:none}
.site-logo img{height:40px}
.site-logo__tag{
  font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--brand);border-radius:999px;padding:3px 10px;
}
.site-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.site-nav a{color:#111827;font-size:14px}
.site-nav a:hover{color:var(--brand);text-decoration:none}
.site-nav .nav-cta{background:var(--brand);color:#fff;font-weight:600;padding:8px 16px;border-radius:999px}
.site-nav .nav-cta:hover{background:var(--brand-dark)}

/* Vyhledávání v headeru (styl inComputer): kompaktní celek, jeden border +
   radius na wrapperu (input i tlačítko clipnuté přes overflow:hidden -- proto
   nemají vlastní radius, žádné dvojité okraje mezi nimi). Ikona lupy uvnitř
   inputu vlevo, tmavé textové tlačítko "Hledat" vpravo (žádná zelená/
   tyrkysová). flex:0 1 580px -- NEroste přes volný prostor mezi logem a
   pravým menu (na rozdíl od dřívějšího flex:1 1 auto), jen se může zmenšit,
   než se na užších šířkách zalomí na vlastní řádek (media query beze
   změny). */
.site-search{
  display:flex;align-items:center;flex:0 1 580px;min-width:0;
  height:46px;background:#fff;border:1px solid #aeb4ba;border-radius:8px;
  overflow:hidden;transition:border-color .15s ease, box-shadow .15s ease;
}
.site-search:focus-within{border-color:#9aa3ac;box-shadow:0 0 0 2px rgba(17,24,39,.06)}
.site-search__icon{
  flex:0 0 auto;width:18px;height:18px;margin-left:14px;color:#9aa3ac;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.site-search__icon svg{width:18px;height:18px;fill:currentColor}
.site-search__input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  padding:0 10px 0 8px;font-size:14px;line-height:46px;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.site-search__input::-webkit-search-cancel-button{-webkit-appearance:none}
/* Placeholder (i animovaný, viz shop.js) -- světlejší šedá, jasně sekundární
   vůči skutečně napsanému dotazu (var(--ink)); jen barva textu, žádný vliv
   na rozměry/layout inputu. */
.site-search__input::placeholder{color:#9aa3ac;opacity:1}
.site-search__btn{
  flex:0 0 auto;width:104px;height:100%;border:0;background:var(--bg-dark);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;line-height:1;transition:background .15s ease;
}
.site-search__btn:hover{background:#1f2c39}

/* ---------- Živý search panel (autocomplete pod headerem) ----------
   .search-panel obaluje .site-search + samotný dropdown .search-panel__drop.
   Drop je position:fixed; JS (positionDrop() v shop.js) při otevření/resize
   dopočítá top/left/width tak, aby panel PŘESNĚ kopíroval hlavní ITDelivery
   .wrap container (stejná šířka/pozice jako header i zbytek stránky) -- NE
   celý viewport od kraje k okraji monitoru, ale i NE uměle užší než container.
   Kompozice (3 sloupce 25/25/50 % s tenkými oddělovači, hutné zaplnění bez
   děr) je inspirovaná inComputer, barvy/radius/typografie naše.
   Bez JS zůstává jen běžný <form> nad /hledat/. */
.search-panel{position:relative;flex:0 1 580px;min-width:0}
@media(max-width:820px){.search-panel{order:3;flex-basis:100%}}

.search-panel-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:135}
.search-panel-backdrop[hidden]{display:none}

/* Horní hrana bez radiusu -- panel vizuálně navazuje na search input nad
   sebou; spodní rohy mají jemné zaoblení. Panel samotný zůstává VŽDY plně
   bílý a aktivní -- žádná ztmavovací vrstva uvnitř .search-panel__drop.
   Ztmavuje se jen zbytek stránky ZA panelem přes .search-panel-backdrop
   (viz výše) -- ta je v z-indexu (135) pod headerem (136), takže header
   i celý panel (140, potomek headeru) nad ní vizuálně vyčnívají neztlumené.
   Scroll dlouhého obsahu je na .search-panel__body, ne na dropu samotném. */
.search-panel__drop{
  position:fixed;z-index:140;background:#fff;border:1px solid var(--line);
  border-top:0;border-radius:0 0 14px 14px;box-shadow:0 24px 60px rgba(15,23,42,.22);
  overflow:hidden;
}
.search-panel__drop[hidden]{display:none}

.search-panel__body{padding:18px 22px 20px;max-height:calc(100vh - 110px);overflow-y:auto}

.search-panel__close{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;
  background:transparent;border-radius:8px;color:#9aa3ac;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:1;
}
.search-panel__close:hover{background:var(--bg);color:var(--ink)}
.search-panel__close svg{width:16px;height:16px;fill:currentColor}

.search-panel__hint,.search-panel__loading,.search-panel__empty,.search-panel__error{
  color:var(--muted);font-size:14px;margin:4px 0;padding:6px 32px 6px 0;
}
.search-panel__error{color:var(--off)}

/* Sloupce s tenkými vertikálními oddělovači (žádné těžké rámečky) -- jasně
   čitelné dělení místo pouhých mezer. Levý lehce zúžený z 26 % na 22 %
   (obsah -- fráze/kategorie/značky -- se dál nezalamuje ani neořezává, jen
   má méně "vzduchu" navíc), ať zbyde víc místa produktům: prostřední ("TOP
   produkty"/"Doporučujeme", 2 standardní .card karty vedle sebe -- viz
   .product-grid) na 42 %, pravý seznam ("Produkty") zůstává 1fr. Bez TOP
   produktu (--no-top) se
   prostřední sloupec sloučí do levého poměru. */
.search-panel__cols{
  display:grid;grid-template-columns:22% 1px 42% 1px 1fr;gap:0;
  align-items:start;padding-top:2px;
}
.search-panel__cols--no-top{grid-template-columns:26% 1px 1fr}
/* Ani fráze/kategorie/značky, ani TOP produkt (např. dotaz zcela bez shody)
   -- jen pravý sloupec, na celou šířku panelu. */
.search-panel__cols--single{display:block}
.search-panel__cols--single .search-panel__col--products{padding-left:0}
.search-panel__sep{align-self:stretch;background:var(--line);width:1px}
.search-panel__col{min-width:0}
.search-panel__col--left{padding-right:20px}
.search-panel__col--top{padding:0 20px}
.search-panel__col--products{padding-left:20px}

.spnl-group{margin:0 0 16px}
.spnl-group:last-child{margin-bottom:0}
.spnl-group__title{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 7px;font-weight:700}
.spnl-group__title-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 7px}
.spnl-group__title-row .spnl-group__title{margin:0}
.spnl-group__all{font-size:12px;font-weight:600;color:var(--brand-dark);flex:0 0 auto}
.spnl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.spnl-list a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 7px;margin:0 -7px;border-radius:7px;color:var(--ink);font-size:13.5px;
}
.spnl-list a:hover{background:var(--bg);text-decoration:none;color:var(--brand-dark)}
.spnl-list__cnt{color:var(--muted);font-size:12px;flex:0 0 auto}

/* Fráze jako chipy/tagy (styl inComputer) -- zaberou řádek efektivněji než
   svislý seznam a jasně se odliší od kategorií/značek pod nimi. */
.spnl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.spnl-chips a{
  display:inline-block;padding:5px 11px;border-radius:999px;background:var(--bg);
  color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.3;
}
.spnl-chips a:hover{background:rgba(0,196,204,.14);color:var(--brand-dark);text-decoration:none}

/* Až 2 hlavní produkty uprostřed panelu (prázdný dotaz i aktivní hledání,
   viz renderPanel() v shop.js) -- ŽÁDNÁ zvláštní "search top card". Server
   pošle hotové HTML PŘÍMO ze sdílené templates/_product-card.php
   (shop_search_panel_card_html() v router.php) a JS ho jen vloží do
   STEJNÉHO .product-grid, jaký používá každý jiný výpis (kategorie/
   homepage) -- stejný border/radius/padding/font/badge/cenový blok/Detail,
   stejné responsive chování (1/2 sloupce podle šířky, viz .product-grid
   výš), beze změny/kopie stylu jen pro panel. .spnl-top-slot řeší JEN
   umístění labelu nad kartou (viz .spnl-top__eyebrow), nijak nemění vzhled
   samotné `.card`. */
.spnl-top-slot{display:flex;flex-direction:column;gap:6px}
.spnl-top__eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-dark);margin:0}

/* Repasované/Stav(grade)/Nekompletní v pravém kompaktním seznamu -- STEJNÉ
   .chip/.pdp__tag-dot třídy a barvy jako výpisy/detail (žádná nová paleta),
   layout přes .spnl-badges (jen flex+gap, velikost dědí ze základních
   .chip pravidel), viz shop_product_badges()/badgesHtml(). */
.spnl-badges{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0}

/* Pravý seznam "Produkty" -- zvětšeno (viz předchozí zadání "moc drobný"):
   větší thumbnail (46->60px), čitelnější název/cena. Vertikální
   padding/gap teď zmenšený (viz zadání "zmenši zbytečné mezery, víc
   výsledků na stejnou výšku") -- ale NE zpátky názvy/ceny/thumbnail,
   jen odstup mezi řádky. Pořád kompaktní seznam, jen ne "blechy". */
.spnl-products{list-style:none;margin:0;padding:0}
/* min-height -- ať jsou položky vizuálně sjednocené na stejnou výšku, ne
   podle délky názvu/ceny každého řádku zvlášť (viz .spnl-product__name a
   .spnl-product__meta min-height níž, které rezervují prostor na 2 řádky
   názvu, resp. typický 3řádkový cenový blok). Floor, ne pevná výška --
   výjimečně delší obsah (např. akce + "od" + zvláštní režim DPH najednou)
   se pořád vejde/zalomí, jen se běžné položky přestanou "rozjíždět". */
.spnl-product{
  display:flex;align-items:center;gap:12px;padding:9px 8px;color:var(--ink);
  border-bottom:1px solid var(--line);min-height:78px;position:relative;
}
li:last-child > .spnl-product{border-bottom:0}
.spnl-product:hover{background:var(--bg);text-decoration:none}
/* Celoplošný klik na řádek (viz komentář u productLiHtml() v shop.js --
   vnější <a> by nesmělo obsahovat vnořené <a> grade odznaku, proto je tenhle
   overlay samostatný prvek přes celý řádek). Grade odznak (.chip--grade-*
   s [data-grade-trigger]) musí ležet NAD ním, jinak by overlay ukradl jeho
   kliky -- position:relative + z-index nad overlay stačí, žádná vizuální
   změna odznaku. */
.spnl-product__stretched{position:absolute;inset:0;z-index:1}
.spnl-product [data-grade-trigger]{position:relative;z-index:2}
.spnl-product__img{position:relative;width:60px;height:60px;flex:0 0 auto;border-radius:8px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}
.spnl-product__img img{width:100%;height:100%;object-fit:contain}
/* Kompaktní varianta .badge--photo (viz shop.css výš) pro malou 60x60
   miniaturu pravého search seznamu -- stejný vizuální princip (bílý
   průsvitný kruh, tmavá ikonka, jemný shadow), jen menší. Vykreslená přes
   shop.js photoBadgeHtml(), data z shop_search_panel_product() (pole
   "realPhotos"), STEJNÝ zdroj jako has_real_photos na kartě. */
.spnl-product__photo{
  position:absolute;top:3px;right:3px;width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.88);color:var(--ink);border-radius:50%;
  border:1px solid rgba(17,24,39,.08);box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.spnl-product__body{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.spnl-product__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
/* min-height = 2 řádky (14px * 1.35 line-height) -- krátký i dlouhý (2řádkový,
   viz -webkit-line-clamp:2 níž) název tak zabírá STEJNÝ prostor, výška
   položky se podle délky názvu nerozjíždí. */
.spnl-product__name{font-size:14px;line-height:1.35;margin:0;color:var(--ink);min-width:0;min-height:38px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* min-height -- rezervuje prostor na typický 3řádkový cenový blok (např.
   přeškrtnutá cena + "od <cena>" + sklad, nebo cena + bez DPH + sklad), ať
   položky s jednodušší cenou (jen cena + sklad) nevypadají nižší než ty se
   složitější (sleva/"od"/DPH režim) -- viz zadání "sjednocení boxů". */
.spnl-product__meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto;text-align:right;min-height:54px;justify-content:center}
.spnl-product__price{font-weight:700;color:var(--ink);font-size:15px;white-space:nowrap}
.spnl-product__oldprice{color:var(--muted);text-decoration:line-through;font-size:12.5px;white-space:nowrap}
/* "od" -- malé písmeno (viz shop.js pricePrefixHtml(), scoped jen sem) a
   citelná mezera k ceně (2px zděděných z .price-prefix bylo na pohled skoro
   slepené, viz zadání "mezi od a cenou musí být mezera"). */
.spnl-product__meta .price-prefix{font-size:12.5px;margin-right:5px}
.spnl-product__meta .price-exvat{font-size:12.5px}
.spnl-product__meta .price-margin{font-size:12px}
.spnl-product__stock--in{color:var(--ok);font-size:13px;white-space:nowrap}
.spnl-product__stock--out{color:var(--off);font-size:13px;white-space:nowrap}

.spnl-more{
  display:block;text-align:center;margin-top:12px;padding:11px;border-radius:8px;
  background:var(--bg-dark);color:#fff;font-weight:600;font-size:14px;
}
.spnl-more:hover{background:#1f2c39;text-decoration:none}

@media(max-width:820px){
  .search-panel__drop{left:0!important;right:0;width:auto!important;border-radius:0}
  .search-panel__body{max-height:calc(100vh - var(--spnl-top, 64px));padding:16px 18px 20px}
  .search-panel__cols,.search-panel__cols--no-top{display:flex;flex-direction:column;gap:20px}
  .search-panel__sep{display:none}
  .search-panel__col--left{order:1;padding:0}
  /* TOP (2 produkty u aktivního hledání, "Doporučujeme" u prázdného dotazu)
     PŘED běžným seznamem "Produkty" -- stejné pořadí jako na desktopu
     zleva doprava, viz zadání ("2 TOP produkty ... pak pod nimi normální
     seznam výsledků"). Dřív byl seznam nad TOP produktem, prohozeno. */
  .search-panel__col--top{order:2;padding:0}
  .search-panel__col--products{order:3;padding:0}
  .spnl-chips,.spnl-list{flex-direction:row;flex-wrap:wrap;gap:8px}
  .spnl-list a{margin:0;background:var(--bg);padding:7px 10px}
  /* Žádné .spnl-top2/.spnl-top mobilní pravidlo tu záměrně není -- TOP
     produkty teď jedou přes stejný .product-grid jako každý jiný výpis
     (viz .product-grid breakpointy výš), takže stejné responsive chování
     (1 sloupec <=480px, 2 sloupce 481-820px) platí automaticky, beze
     zvláštní search-specific úpravy. */
}

/* ---------- Navigační řádek: tlačítko Kategorie + breadcrumb (vnitřní stránky) ---------- */
.catnav{background:#fff;border-bottom:1px solid var(--line)}
.catnav__inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
/* Homepage varianta téhle lišty (viz header.php) -- na desktopu/tabletu (>=821px)
   kategorie řeší .home-shell__catalog sidebar/panel, tahle lišta by tam byla
   duplicitní -> schovaná. Na mobilu (<=820px) je naopak jediný vstup do
   kategorií na homepage, proto se tam zobrazí (viz media blok níže u drawer
   pravidel, kde je i .catalog-panel schovaný pro tuhle šířku). */
.catnav--home-mobile{display:none}

.catmenu{position:relative;flex:0 0 auto}
.cat-btn{
  display:inline-flex;align-items:center;gap:8px;height:44px;min-width:216px;
  padding:0 16px;border:0;border-radius:8px;cursor:pointer;
  background:var(--bg-dark);color:#fff;font-size:14px;font-weight:600;
}
.cat-btn:hover{background:#1f2c39}
.cat-btn__burger{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.cat-btn__chev{width:16px;height:16px;flex:0 0 auto;margin-left:auto;transition:transform .15s ease}
.catmenu.is-open .cat-btn__chev{transform:rotate(180deg)}

/* Mega-menu (dropdown) */
.megamenu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:120;
  width:264px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(15,23,42,.16);
  padding:8px;display:none;
}
/* Desktop: neviditelný "most" nad menu, ať kurzor nespadne do mezery */
.megamenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.catmenu:hover > .megamenu,
.catmenu.is-open > .megamenu{display:block}
.megamenu__head{display:none}
.megamenu__roots{list-style:none;margin:0;padding:0}
/* POZOR: .megamenu__root ZÁMĚRNĚ není position:relative – flyout se kotví
   k celému .megamenu (viz níže), aby měl vždy stejný horní začátek. */
.megamenu__rootlink{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  color:var(--ink);font-size:14px;
}
.megamenu__rootlink:hover{background:var(--bg);text-decoration:none}
.megamenu__root.has-children:hover > .megamenu__rootlink{background:var(--bg)}
.megamenu__ico{width:22px;height:22px;color:#9aa3ac;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.megamenu__ico svg{width:20px;height:20px}
.megamenu__name{flex:1;min-width:0}
.megamenu__more{width:16px;height:16px;color:#9aa3ac;flex:0 0 auto}
.megamenu__expand{display:none}

/* Flyout s podkategoriemi vpravo – ŠIROKÉ mega-menu ve více sloupcích.
   Kotví se k CELÉMU .megamenu (ne k hoverovanému <li>): top:0; left:100% →
   horní hrana je vždy stejná, nezávisle na tom, na kterou root kategorii
   najedu (Apple i Příslušenství začínají stejně nahoře).
   Žádný vnitřní scroll: obsah se rozkládá do sloupců (column-width), ne dolů.
   min-height ~ výška root menu → z KTERÉKOLIV root položky vede vodorovný
   koridor přímo do flyoutu (žádný svislý mrtvý prostor). */
.megamenu__flyout{
  position:absolute;top:0;left:100%;min-height:340px;
  width:min(1000px, calc(100vw - 300px));
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(15,23,42,.16);
  padding:22px 26px;display:none;
}
/* Neviditelný můstek přes ~8px mezeru (pravý padding .megamenu) mezi root
   položkou a flyoutem – kurzor při přejezdu doprava nepropadne do prázdna.
   ::before patří flyoutu (∈ root <li>), takže se drží uvnitř jedné hover oblasti. */
.megamenu__flyout::before{content:"";position:absolute;top:0;left:-10px;width:10px;height:100%}
.megamenu__root.has-children:hover > .megamenu__flyout,
.megamenu__root.is-hover > .megamenu__flyout,
.megamenu__root.is-expanded > .megamenu__flyout{display:block}
.megamenu__flyout-title{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.megamenu__flyout-list,.catmenu__sub{list-style:none;margin:0;padding:0}
/* 4–5 sloupců podle dostupné šířky; prohlížeč zvolí max počet, který se vejde */
.megamenu__flyout-list{
  column-width:172px;column-gap:22px;
}
/* skupina = nadpis (2. úroveň, výrazný) + její děti pod ním menším textem;
   CELÁ skupina drží pohromadě v jednom sloupci (nadpis se neodtrhne od dětí) */
.megamenu__flyout-list > li{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 10px;min-width:0;
}
.megamenu__flyout-list > li > a{display:block;padding:1px 4px;font-weight:700;font-size:13px;line-height:1.3;color:var(--ink)}
.megamenu__flyout-list > li > a:hover{color:var(--brand-dark)}
.megamenu__flyout .catmenu__sub{margin:1px 0 0;border-left:0;padding-left:0}
.megamenu__flyout .catmenu__sub a{display:block;padding:1px 4px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.megamenu__flyout .catmenu__sub a:hover{color:var(--brand-dark)}
.megamenu__flyout .catmenu__sub .catmenu__sub{padding-left:10px}
/* fallback mimo mega-menu (drawer / homepage panel si řídí vlastní pravidla) */
.catmenu__sub{margin:2px 0 6px 12px;border-left:1px solid var(--line);padding-left:10px}
.catmenu__sub a{display:block;padding:4px 0;font-size:13px;color:var(--muted)}
.catmenu__sub a:hover{color:var(--brand-dark)}

/* ---------- ŠIROKÝ katalogový panel (styl inComputer) -----------------------
   Obsah panelu = BLOKY skládané do 2–4 sloupců (třída .mm-cols-N z PHP).
   Jeden blok: malý obrázek vlevo + tučný název kategorie (2. úroveň) a pod
   ním seznam jejích přímých podkategorií (3. úroveň). U dlouhých seznamů se
   zbytek schová pod "Zobrazit další" a rozbalí se v tomtéž bloku.
   ŽÁDNÝ vnitřní scrollbar (panel roste s obsahem), ŽÁDNÉ rámečky ani
   miniatury kolem položek. Dole oddělený řádek se značkami dané kořenové
   kategorie a vpravo "Zobrazit vše →". */
.megamenu__flyout--tiles{width:auto;overflow:visible}
/* Plnohodnotné široké mega-menu ve stylu inComputer: flyout vždy vyplní
   dostupnou obsahovou šířku stránky (min(--container,100vw) − levý seznam
   kořenů 264px − odsazení .wrap 2×24px = 312px) → nikdy nepřeteče vpravo,
   nikdy nepůsobí jako malý box. Užší varianty (méně bloků) mají jen měkký
   horní strop, ať 2 bloky nejsou roztažené přes celou stránku doprázdna. */
.megamenu__flyout--tiles.mm-cols-2{width:min(1040px, calc(min(1440px, 100vw) - 312px))}
.megamenu__flyout--tiles.mm-cols-3{width:calc(min(1440px, 100vw) - 312px)}
.megamenu__flyout--tiles.mm-cols-4{width:calc(min(1440px, 100vw) - 312px)}

/* Nadpis panelu = název právě hoverované/rozbalené kořenové kategorie
   (Notebooky, Počítače, ...). Výraznější než položky uvnitř bloků, ale ne
   tak velký jako stránkový nadpis; jemná linka odděluje od dlaždic. */
.mm-flyout-title{
  margin:0 0 14px;padding:0 0 10px;
  border-bottom:1px solid var(--line);
  font-size:17px;font-weight:700;line-height:1.25;color:var(--ink);
  text-align:left;
}

.mm-groups{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:26px 44px;
  align-items:start;align-content:flex-start;
}
.mm-cols-3 .mm-groups{grid-template-columns:repeat(3, minmax(0,1fr))}
.mm-cols-4 .mm-groups{grid-template-columns:repeat(4, minmax(0,1fr));gap:24px 30px}
/* 4 sloupce = užší buňka → podseznam neodsazujeme na plnou šířku obrázku,
   ať se dlouhé názvy podkategorií nelámou divně pod sebe. */
.mm-cols-4 .mm-group__list{margin-left:18px}
.mm-group{min-width:0;break-inside:avoid}
.mm-group__head{display:flex;align-items:center;gap:14px;margin:0 0 10px;color:var(--ink)}
.mm-group__head:hover{text-decoration:none}
.mm-group__head:hover .mm-group__title{color:var(--brand-dark)}
/* Obrázek podkategorie vlevo – výrazný pevný čtverec, jednotné rozměry,
   object-fit, bez rámečku. Vizuálně důležitější než text vedle něj. */
.mm-group__img{
  width:64px;height:64px;flex:0 0 auto;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--bg);
}
.mm-group__img img{width:100%;height:100%;object-fit:contain}
.mm-group__img--icon{background:none;color:#9aa3ac}
.mm-group__img--icon svg{width:40px;height:40px}
.mm-group__title{font-weight:700;font-size:14.5px;line-height:1.25;min-width:0}
/* Seznam podkategorií – odsazený pod název (za obrázek), bez odrážek. */
.mm-group__list{list-style:none;margin:0 0 0 78px;padding:0}
.mm-group__list li{margin:0}
.mm-group__list a{display:block;padding:3px 0;font-size:13px;line-height:1.35;color:var(--muted)}
.mm-group__list a:hover{color:var(--brand-dark)}
.mm-group__morewrap{margin-top:2px}
.mm-group__more{
  display:inline-flex;align-items:center;gap:4px;
  border:0;background:none;padding:2px 0;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--brand-dark);
}
.mm-group__more-ico{transition:transform .15s ease}
.mm-group__more[aria-expanded="true"] .mm-group__more-ico{transform:rotate(180deg)}

/* Varianta se seznamu podkategorií, kde má i 3. úroveň vlastní category
   image (zatím jen větev „Telefony a tablety“ – iPhone/Android pod
   Telefony, viz _catalog-menu.php $mmSubImages). Stejné odsazení jako
   běžný .mm-group__list, jen položky vedle sebe s malou dlaždicí. */
.mm-group__list--img{display:flex;flex-wrap:wrap;gap:4px 18px}
.mm-cols-4 .mm-group__list--img{gap:4px 12px}
.mm-group__list--img li{margin:0}
.mm-group__list--img a{display:flex;align-items:center;gap:8px;padding:3px 0}
.mm-group__subimg{
  width:32px;height:32px;flex:0 0 auto;border-radius:6px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--bg);
}
.mm-group__subimg img{width:100%;height:100%;object-fit:contain}

/* Spodní oddělený řádek – značky dané kořenové kategorie (loga jako na homepage). */
.mm-brands{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;
}
.mm-brands__label{
  flex:0 0 auto;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
}
.mm-brands__list{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;min-width:0}
.mm-brands__item{display:inline-flex;align-items:center;height:26px}
.mm-brands__item img{
  max-height:22px;max-width:88px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .15s ease,opacity .15s ease;
}
.mm-brands__item:hover img{filter:none;opacity:1}
.mm-brands__item span{font-size:12.5px;font-weight:600;color:var(--ink)}
.mm-brands__item:hover span{color:var(--brand-dark)}

/* Vpravo dole – Zobrazit vše → (odkaz na kořenovou kategorii nad panelem). */
.mm-foot{margin-top:12px;display:flex;justify-content:flex-end}
.mm-foot__all{font-size:13px;font-weight:700;color:var(--brand-dark)}
.mm-foot__all:hover{text-decoration:underline}

.catnav-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:110}
.catnav-backdrop[hidden]{display:none}

/* ---------- Page shell ---------- */
.page{padding-top:18px;padding-bottom:48px}
.page--home{padding-top:22px}

.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted);margin:0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand-dark)}
.crumbs__sep{opacity:.5}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* ---------- Homepage: rozbalený katalog vlevo + obsah vpravo ---------- */
/* Levý katalog je samostatný sidebar (1. sloupec gridu). Veškerý obsah
   homepage – nadpisy "Vybrané kategorie/značky" i produktové bloky – žije
   ve 2. sloupci .home-shell__main, takže začíná až za katalogem, ne na
   x-pozici page containeru. */
.home-shell{display:grid;grid-template-columns:264px minmax(0,1fr);gap:26px;align-items:start}
.home-shell__catalog{position:sticky;top:12px;min-width:0}
.home-shell__main{min-width:0}
.home-shell__main > .home-block:first-child{margin-top:0}
.catalog-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
/* ---------- Bannery (centrální renderer shop_banner_html) ---------- */
/* Klikací i neklikací varianta vypadá stejně. Obrázek jde od kraje ke kraji
   svého sloupce: width:100%, height:auto, zachovaný poměr stran, ŽÁDNÝ
   horizontální padding/margin ani letterbox (object-fit). Výšku neomezujeme –
   případné omezení + object-fit:contain vytvářelo po stranách prázdné pruhy. */
.shop-banner{display:block;border-radius:12px;overflow:hidden}
.shop-banner img{display:block;width:100%;height:auto}
/* Horní homepage banner – JEN v pravém obsahovém sloupci (.home-shell__main),
   nad prvním blokem. width:100% se tak vztahuje k pravému sloupci, ne k celé
   stránce / levému menu. Bez bočního odsazení – lícuje s obsahem sloupce. */
.shop-banner--homepage_top{margin:0 0 22px}
/* Levý homepage banner – pod blokem Kategorie, stejná šířka jako blok Kategorie. */
.shop-banner--homepage_left{margin-top:14px}
/* Banner nahoře v kategorii – JEN v pravém obsahovém sloupci (.cat-products),
   nad názvem kategorie. NIKDY nad filtry ani v sidebaru filtrů. Bez bočního
   odsazení – lícuje s obsahem sloupce. */
.shop-banner--category_top{margin:0 0 20px}
.catalog-panel__title{margin:4px 8px 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.catalog-panel__list{list-style:none;margin:0;padding:0}
.catalog-panel__item > details > summary,
.catalog-panel__leaf{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  color:var(--ink);font-size:14px;cursor:pointer;list-style:none;
}
.catalog-panel__item > details > summary::-webkit-details-marker{display:none}
.catalog-panel__item > details > summary:hover,
.catalog-panel__leaf:hover{background:var(--bg);text-decoration:none}
.catalog-panel__ico{width:22px;height:22px;color:#9aa3ac;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.catalog-panel__ico svg{width:20px;height:20px}
.catalog-panel__name{flex:1;min-width:0}
.catalog-panel__item > details > summary::after{
  content:"";width:8px;height:8px;flex:0 0 auto;border-right:2px solid #9aa3ac;border-bottom:2px solid #9aa3ac;
  transform:rotate(-45deg);transition:transform .15s ease;
}
.catalog-panel__item > details[open] > summary::after{transform:rotate(45deg)}
.catalog-panel__children{list-style:none;margin:0 0 6px;padding:2px 0 2px 34px}
.catalog-panel__children a{display:block;padding:5px 6px;font-size:13px;color:var(--muted);border-radius:6px}
.catalog-panel__children a:hover{color:var(--brand-dark);background:var(--bg)}
.catalog-panel__children .catmenu__sub{margin-left:6px}

/* Homepage katalog: pod tabletem nad obsah, plná šířka */
@media(max-width:900px){
  .home-shell{grid-template-columns:1fr}
  .home-shell__catalog{position:static}
  .catalog-panel__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px}
}

/* Homepage na mobilu (<=820px, stejný breakpoint jako drawer níže): hamburger
   .catnav--home-mobile (viz header.php) nahrazuje statický .catalog-panel --
   jeden vstup do kategorií, stejný jako na ostatních stránkách, drawer místo
   dlouhého inline panelu nad obsahem. 821–900px (tablet) beze změny --
   .catalog-panel tam zůstává jako dřív. */
@media(max-width:820px){
  .home-shell__catalog .catalog-panel{display:none}
}

/* Homepage blok "Kategorie" – stejné mega-menu (a JS) jako tlačítko "Kategorie"
   na výpisu kategorií. Do 900px se používá původní rozbalený .catalog-panel,
   od 901px se místo něj zobrazí mega-menu se staticky otevřeným seznamem kořenů;
   flyout s podkategoriemi vyjíždí doprava přes hlavní obsah při hoveru (chování
   i vzhled dědí z .megamenu__flyout). */
.home-shell__catalog .catmenu{display:none}
@media(min-width:901px){
  .home-shell__catalog .catalog-panel{display:none}
  .home-shell__catalog{z-index:5}
  .home-shell__catalog .catmenu{display:block;position:static}
  /* Tlačítko "Kategorie" -> statický nadpis panelu (bez tmavého pilíře). */
  .home-shell__catalog .cat-btn{
    width:100%;min-width:0;height:auto;padding:4px 8px 8px;
    background:none;color:var(--muted);font-weight:600;font-size:12px;
    text-transform:uppercase;letter-spacing:.04em;cursor:default;
  }
  .home-shell__catalog .cat-btn:hover{background:none}
  .home-shell__catalog .cat-btn__burger,
  .home-shell__catalog .cat-btn__chev{display:none}
  /* Seznam kořenů staticky otevřený jako karta panelu. position:relative →
     flyout se kotví k .megamenu (stejný horní začátek jako na category page). */
  .home-shell__catalog .megamenu{
    position:relative;display:block;width:auto;margin:0;box-shadow:none;
  }
  .home-shell__catalog .megamenu::before{display:none}
  /* Flyout přes hlavní obsah. */
  .home-shell__catalog .megamenu__flyout{z-index:130}
}

/* Catnav + mega-menu: tablet/mobil */
@media(max-width:820px){
  .catnav--home-mobile{display:block}
  .catnav__inner{gap:10px}
  .cat-btn{min-width:0;flex:1 1 auto;justify-content:center}
  .crumbs{flex-basis:100%;order:2}

  /* Otevřený drawer = KLASICKÝ full-height nav drawer od úplně horního
     okraje viewportu (viz zadání) -- ne panel začínající pod hlavičkou.
     html.catmenu-open (přidává/odebírá shop.js v initCatMenu open()/close(),
     JEN na mobilu) proto schová VŠECHNO, co by jinak žilo nad drawerem:
     topbar, celý header (logo/search/cart -- .site-header, search-panel
     je jeho potomek) a v .catnav i tlačítko "Kategorie" (.cat-btn) a
     breadcrumb -- ale NE `.catnav` samotný ani `.catmenu`/`.megamenu`
     (jejich potomek), protože právě `.megamenu` JE ten drawer, co má zůstat
     vidět. Původní tlačítko "Kategorie" tak při otevřeném menu není vidět
     ani klikatelné (display:none, ne jen zakryté). */
  html.catmenu-open .topbar,
  html.catmenu-open .site-header,
  html.catmenu-open .cat-btn,
  html.catmenu-open .crumbs{display:none}

  /* Mega-menu jako drawer/overlay – jen klik, žádný hover */
  .catmenu:hover > .megamenu{display:none}
  .catmenu.is-open > .megamenu{display:block}
  /* top:0 + bottom:0 = drawer přes CELOU výšku viewportu odshora, žádný
     dynamický offset (--mobile-nav-top) už není potřeba -- nic z původního
     headeru/search/tlačítka pod ním totiž nezůstává vidět (viz pravidlo
     výš), takže drawer nemusí "uhýbat" ničemu. Šířka min(360px,88vw) --
     ~85–90 % viewportu na běžných mobilech, max. rozumná šířka na širších
     telefonech/tabletu -- zbytek plochy vpravo zabírá tmavý backdrop. */
  .megamenu{
    position:fixed;top:0;left:0;bottom:0;z-index:120;
    width:min(360px,88vw);overflow-y:auto;overscroll-behavior:contain;
    border-radius:0;border:0;box-shadow:0 0 40px rgba(15,23,42,.3);
    padding:0 0 24px;
  }
  .megamenu::before{display:none}
  .megamenu__head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;
    position:sticky;top:0;background:#fff;
  }
  .megamenu__close{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
  .megamenu__roots{padding:6px}
  .megamenu__more{display:none}
  .megamenu__expand{
    display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:34px;height:34px;margin:-9px -6px -9px 0;border:0;background:none;cursor:pointer;color:#9aa3ac;
  }
  .megamenu__expand svg{width:18px;height:18px;transition:transform .15s ease}
  .megamenu__root.is-expanded > .megamenu__rootlink .megamenu__expand svg{transform:rotate(180deg)}
  .megamenu__flyout{
    position:static;width:auto;min-height:0;max-height:none;overflow:visible;
    border:0;box-shadow:none;border-radius:0;padding:2px 8px 8px 44px;
  }
  .megamenu__flyout::before{display:none} /* hover můstek jen na desktopu */
  /* Mobil = drawer: skupiny zpět pod sebe (žádné desktop mega-menu na touch) */
  .megamenu__flyout-list{column-width:auto;column-count:1}
  .megamenu__flyout-list > li{margin-bottom:6px}
  /* Široký desktopový panel se do úzkého draweru nehodí → plná šířka draweru,
     bloky pod sebe v jednom sloupci, bez vnitřního scrollu (drawer scrolluje celý). */
  .megamenu__flyout--tiles,
  .megamenu__flyout--tiles.mm-cols-2,
  .megamenu__flyout--tiles.mm-cols-3,
  .megamenu__flyout--tiles.mm-cols-4{width:auto;min-width:0;max-width:none;max-height:none;overflow:visible}
  /* Root název je v draweru už vidět na rozbaleném řádku samotném
     (.megamenu__rootlink) -- druhý nadpis uvnitř flyoutu by ho jen zdvojil. */
  .mm-flyout-title{display:none}
  .mm-groups,
  .mm-cols-3 .mm-groups,
  .mm-cols-4 .mm-groups{grid-template-columns:1fr;gap:12px}
  .mm-brands{gap:6px 12px}
  .mm-foot{justify-content:flex-start}
  .catnav-backdrop{z-index:115}
}
@media(min-width:821px){
  /* desktop: expand tlačítko a drawer hlava nejsou potřeba */
  .megamenu__expand,.megamenu__head{display:none}
}

/* ---------- Hero ---------- */
.hero{background:var(--bg-dark);color:#e5e7eb;border-radius:14px;padding:28px;margin-bottom:28px}
.hero__eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--brand);font-size:12px;margin:0 0 8px}
.hero h1{color:#fff;font-size:28px;margin:0 0 10px}
.hero__lead{max-width:60ch;color:#cbd5e1;margin:0}

/* ---------- Kategoriální dlaždice: DVĚ komponenty ----------
   Sdílené: border, radius, typografie, hover, image wrapper (.category-tile).
   Rozdílné jsou POUZE rozměry (homepage o něco větší než podkategorie):
     .category-tile--home  ~172–185 × ~132–140, obrázek 72
     .category-tile--sub   ~148–160 × ~110–118, obrázek 62
   Grid vždy auto-fill + minmax => zalamuje se, žádný horizontální scroll. */
.home-cats,.subcats{margin-bottom:30px}

.category-grid{display:grid}
.category-tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:600;
}
.category-tile:hover{border-color:var(--brand);color:var(--brand-dark);text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.category-tile__img{
  width:100%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:#fff;border:1px solid #eef1f3;border-radius:8px;overflow:hidden;
}
.category-tile__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.category-tile__img--icon{color:#aeb6be;background:#fbfcfc}
/* Název: max 2 řádky, bez rozbití layoutu. */
.category-tile__name{
  line-height:1.25;font-weight:600;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

/* --- větší varianta: homepage – Vybrané kategorie (jeden řádek, carousel) --- */
.category-tile--home{flex:0 0 auto;width:186px;min-height:134px;gap:8px;padding:12px;border-radius:12px}
.category-tile--home .category-tile__img{height:78px;padding:8px}
.category-tile--home .category-tile__img--icon svg{width:44px;height:44px}
.category-tile--home .category-tile__name{font-size:13.5px}

/* ---------- Carousel (kategorie + značky na homepage): jeden řádek, bez scrollbaru ---------- */
.carousel{position:relative}
.carousel__track{
  display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;scroll-padding:0 8px;
  padding:4px 2px;-webkit-overflow-scrolling:touch;
}
.carousel__track::-webkit-scrollbar{width:0;height:0;display:none}
.carousel__track > *{scroll-snap-align:start}
.carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:999px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  box-shadow:0 3px 14px rgba(15,23,42,.18);cursor:pointer;
  font-size:24px;line-height:1;transition:border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.carousel__nav:hover{border-color:var(--brand);color:var(--brand-dark);box-shadow:0 4px 18px rgba(15,23,42,.22)}
.carousel__nav:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.carousel__nav[hidden]{display:none}
.carousel__nav--prev{left:-14px}
.carousel__nav--next{right:-14px}

/* --- kompaktní varianta: podkategorie na category stránce --- */
.subcats--inline{margin:0 0 18px}
.subcats--inline h2{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);margin:0 0 10px;
}
.category-grid--sub{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.category-tile--sub{gap:7px;padding:10px;border-radius:10px;min-height:112px}
.category-tile--sub .category-tile__img{height:62px;padding:5px}
.category-tile--sub .category-tile__img--icon svg{width:34px;height:34px}
.category-tile--sub .category-tile__name{font-size:12.5px}
@media(max-width:900px){ .subcats--inline{margin-bottom:14px} }
/* Kategorie -> Značky na category listingu: o něco těsnější návaznost než
   výchozích 18px (subcats--inline margin-bottom), ale sekce zůstává vizuálně
   oddělená (nadpis "Značky" má pořád vlastní odsazení dolů). Cíleno jen na
   tuto konkrétní návaznost (adjacent-sibling), nemění spacing subcats -> product-grid
   ani žádný jiný spacing mezi produkty. */
.subcats--inline + .cat-brands{margin-top:-6px}
@media(max-width:900px){ .subcats--inline + .cat-brands{margin-top:-4px} }

/* Mobil: podkategorie (grid) 2–3 dlaždice. */
@media(max-width:480px){
  .category-grid--sub{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
  .category-tile--sub{min-height:104px}
  .category-tile--sub .category-tile__img{height:54px}
}

/* ---------- Homepage bloky "kategorie" + "značky": samostatné sekce ---------- */
/* Nadpis -> obsah: cca 16 px (bloky mají jen <h2>, žádný <p>). */
.home-block--cats .home-block__head h2,
.home-block--brands .home-block__head h2{margin-bottom:16px}
/* Po kategoriích před nadpisem "Vybrané značky": cca 34 px. */
.home-block--cats{margin-bottom:34px}
/* Po značkách před dalším produktovým blokem: cca 40 px. */
.home-block--brands{margin-bottom:40px}

/* ---------- Vybrané značky (homepage) – jeden řádek, carousel ---------- */
.brand-tile{
  flex:0 0 auto;width:136px;height:88px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:10px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink);
}
.brand-tile:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.05);text-decoration:none}
/* Aktivní stav (zvolená značka ve filtru) -- jen zvýrazněný border + jemný
   podklad, žádná změna rozměru dlaždice (box-shadow místo silnějšího borderu). */
.brand-tile--active{border-color:var(--brand);background:rgba(0,196,204,.06);box-shadow:0 0 0 1px var(--brand) inset}
/* Logo je hlavní prvek: vystředěné, contain, zachované proporce. */
.brand-tile__logo{
  display:block;width:auto;height:auto;
  max-width:104px;max-height:50px;object-fit:contain;
}
/* Název pod logem – menší, doplňkový. */
.brand-tile__caption{font-size:11px;line-height:1;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Fallback, když logo opravdu chybí – text je pak hlavní. */
.brand-tile--text .brand-tile__text{font-weight:700;font-size:15px;color:var(--ink)}

/* Tablet/mobil: carousely zůstávají JEDEN řádek + swipe; jen menší dlaždice a šipky.
   (Musí být za výchozími pravidly .category-tile--home / .brand-tile kvůli kaskádě.) */
@media(max-width:640px){
  .category-tile--home{width:158px;min-height:126px;padding:11px}
  .category-tile--home .category-tile__img{height:68px}
  .brand-tile{width:120px;height:80px;padding:8px 10px}
  .brand-tile__logo{max-width:92px;max-height:44px}
  .carousel__track{gap:10px}
  .carousel__nav{width:36px;height:36px;font-size:20px}
  .carousel__nav--prev{left:-6px}
  .carousel__nav--next{right:-6px}
}

/* ---------- Stránka /znacky/ ---------- */
.brands-head{margin-bottom:18px}
.brands-head h1{font-size:26px;color:#33465a}
.brands-head__sub{color:var(--muted);margin:4px 0 0;font-size:14px}
/* Bílý obsahový panel místo šedého page pozadí -- STEJNÝ vizuální vzor jako
   .filters/.catalog-panel jinde na webu (bílá karta s jemným borderem),
   žádná nová paleta ani hack, jen aplikace existujícího "bílá karta" idiomu
   na tenhle (dřív bezbarvý) wrapper. */
.brands-page{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px 24px}

/* ---------- Jednoduché info stránky (O nás / Kontakty / Proč repasovaná technika) ---------- */
.content-page{max-width:760px}
.content-page p{color:#33465a;line-height:1.6;margin:0 0 14px}
.content-page__list{margin:0 0 14px;padding-left:20px;color:#33465a;line-height:1.7}
.content-page__section{margin-bottom:24px}
.content-page__section h2{font-size:18px;color:#33465a;margin:0 0 6px}
.content-page__section p{margin:0}

/* ---------- Stránka /stavy-zarizeni/ ----------
   Širší než běžné info stránky (760px) -- potřebuje místo na 2sloupcovou
   mřížku karet stavů. Barvy stavů čtou VÝHRADNĚ existující --badge-grade-*
   proměnné přes shop_grade_badge_class()/.chip (žádná nová paleta, viz
   zadání "14. Vzhled stavů"). Bílý panel -- STEJNÝ "bílá karta" idiom jako
   .brands-page/.catoverview-page jinde na webu (.home-shell layout, viz
   templates/stavy-zarizeni.php), žádná nová paleta. */
.grade-page{max-width:980px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px 24px}
.grade-intro{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:22px}
.grade-intro__lead{font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 8px;line-height:1.5}
/* Inline badge skupina v úvodní větě -- STEJNÉ .chip/.grade-card__badge
   barvy/border/radius/padding jako karty stavů níž (žádný nový styl), jen
   uspořádané vedle sebe v řádku textu (inline-flex) místo "Stav A / A- / B / C"
   holého textu. Zalomí se přirozeně na mobilu (flex-wrap). */
.grade-intro__badges{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;vertical-align:middle;margin-right:4px}
.grade-intro__photo{font-size:14px;color:#33465a;margin:0;line-height:1.55}
.grade-page__nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 28px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.grade-page__nav a{font-size:14px;font-weight:600;color:var(--brand-dark)}
.grade-device{margin-bottom:36px;padding-top:6px;scroll-margin-top:90px}
.grade-device__title{font-size:22px;color:var(--ink);margin:0 0 8px}
.grade-device__intro{font-size:14px;color:#33465a;line-height:1.6;margin:0 0 18px;max-width:70ch}
.grade-device__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Karta stavu -- jemně podbarvená podle gradu (STEJNÝ "zesvětlená karta"
   vzor jako .variant.is-grade-a/b/c na PDP, --section-grade-*-bg/border),
   místo plochého bílého boxu s tmavým textem. Odlehčuje celkový dojem --
   viz zadání "4) zesvětli je, méně černé texty". */
.grade-card{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:#fff;scroll-margin-top:90px}
.grade-card--a{background:var(--section-grade-a-bg);border-color:var(--section-grade-a-border)}
.grade-card--a-minus{background:var(--section-grade-a-minus-bg);border-color:var(--section-grade-a-minus-border)}
.grade-card--b{background:var(--section-grade-b-bg);border-color:var(--section-grade-b-border)}
.grade-card--c{background:var(--section-grade-c-bg);border-color:var(--section-grade-c-border)}
.grade-card__title{margin:0 0 12px}
/* Badge zvětšený oproti běžnému .chip (13px/7-13px) -- na týhle stránce má
   být hlavní grafický prvek karty, ne jen malý štítek jako na produktové
   kartě. Pořád STEJNÁ .chip/.chip--grade-*/.pdp__tag-dot komponenta/barvy,
   jen větší měřítko (font-size/padding/dot) přes modifikátor scoped na
   .grade-card__badge, aby se .chip nikde jinde na webu neovlivnil. */
.grade-card__badge{font-size:15px;padding:9px 16px 9px 10px;font-weight:700}
.grade-card__badge .pdp__tag-dot{min-width:24px;height:24px;font-size:14px}
/* A- modifikátor -- JEN na téhle stránce (viz šablona), odlišný teal odstín
   od zelené "A" rodiny sdílené se zbytkem webu (shop_grade_badge_class()). */
.grade-card__badge--a-minus{background:var(--badge-grade-a-minus-bg);color:var(--badge-grade-a-minus-color);border-color:var(--badge-grade-a-minus-border)}
.grade-card__badge--a-minus .pdp__tag-dot{background:var(--badge-grade-a-minus-color)}
/* Odlehčený text pod badge -- STEJNÁ barva jako běžný text info stránek
   (.content-page p, #33465a), ne tmavší --ink, a normální (ne polotučná)
   váha -- výraznost nese badge nahoře, ne tělo textu. */
.grade-card__short{font-size:14px;color:#33465a;line-height:1.5;margin:0 0 10px;font-weight:400}
.grade-card__bullets{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);line-height:1.6}
.grade-card__bullets li{margin-bottom:3px}
@media(max-width:480px){
  .grade-card__badge{font-size:14px;padding:8px 14px 8px 9px}
  .grade-card__badge .pdp__tag-dot{min-width:22px;height:22px;font-size:13px}
}
.grade-photos{margin-top:8px;padding-top:20px;border-top:1px solid var(--line)}
.grade-photos h2{font-size:18px;color:#33465a;margin:0 0 8px}
.grade-photos p{margin:0 0 10px;max-width:70ch}
.grade-photos p:last-child{margin-bottom:0}
/* Vysvětlivka ikony fotoaparátu -- STEJNÁ ikona jako na produktové kartě
   (shop_camera_badge_svg(), viz šablona), jen prostý inline řádek (ne
   kruhový .badge--photo, ten je navržený na fotku, ne do textu). Decentní
   --muted barva, žádný barevný box. flex-wrap, ať se na mobilu text pod
   ikonou normálně zalomí místo přetečení. */
.grade-photos__legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--muted)}
.grade-photos__legend-ico{flex:0 0 auto;display:flex;color:var(--muted)}
@media(max-width:680px){
  .grade-device__grid{grid-template-columns:1fr}
}

.brands-search{
  display:flex;align-items:center;gap:8px;max-width:420px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:0 12px;height:44px;margin-bottom:14px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.brands-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,196,204,.18)}
.brands-search__ico{flex:0 0 auto;width:18px;height:18px;color:#9aa3ac}
.brands-search__ico svg{width:18px;height:18px;fill:currentColor}
.brands-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;height:100%;color:var(--ink)}

.brands-az{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.brands-az__item{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 4px;border-radius:8px;
  font-weight:700;font-size:14px;border:1px solid var(--line);
}
a.brands-az__item{color:var(--brand-dark);background:#fff}
a.brands-az__item:hover{background:var(--brand);color:#fff;border-color:transparent;text-decoration:none}
.brands-az__item.is-disabled{color:#c8ced4;background:#fafbfc;border-color:#eef1f3;cursor:default}

.brands-noresults{color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:14px;margin:14px 0 0}

.brands-section{margin-top:26px;scroll-margin-top:96px}
.brands-section[hidden]{display:none}
.brands-section__letter{font-size:22px;color:#33465a;margin:0 0 12px;border-bottom:2px solid var(--line);padding-bottom:6px}

.brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

/* /prehled-kategorii/ -- opravdový STROM kategorií (ne karty). Kořen (h2) =
   vlastní sekce s vlastním obrázkem/ikonou (.catoverview-section__ico),
   uvnitř rekurzivní <ul class="cattree"> s "elbow" spojovacími čarami
   (li::before = vodorovná větev, li::after = svislý kmen ke staršímu/
   mladšímu sourozenci). Root sekce jdou na desktopu do 2 sloupců (CSS
   multi-column, automaticky vyvážené podle výšky -- žádné ruční dělení
   5 kategorií na dva pevné seznamy).
   Bílý obsahový panel (.catoverview-page) -- STEJNÝ "bílá karta" idiom jako
   .brands-page/.filters/.catalog-panel jinde na webu, žádná nová paleta. */
.catoverview-page{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px 24px}

.catoverview{column-count:2;column-gap:36px}
@media(max-width:900px){ .catoverview{column-count:1} }

.catoverview-section{margin:0 0 28px;break-inside:avoid}
.catoverview-section__head{font-size:19px;margin:0 0 10px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.catoverview-section__link{display:flex;align-items:center;gap:14px;color:#33465a;text-decoration:none}
.catoverview-section__link:hover{color:var(--brand-dark);text-decoration:none}
.catoverview-section__link:hover .catoverview-section__ico{border-color:var(--brand)}
/* Root obrázek/ikona -- výrazně větší než dřívější stromové ikony pod ním,
   ať je hlavní kategorie na první pohled čitelná (viz zadání "obrázky
   zvětšit"). Stejný bílý čtverec s jemným borderem jako .cattree-ico, jen
   větší měřítko. */
.catoverview-section__ico{
  flex:0 0 auto;width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:#fff;border:1px solid #eef1f3;overflow:hidden;color:#aeb6be;
  transition:border-color .15s ease;
}
.catoverview-section__ico img{max-width:100%;max-height:100%;object-fit:contain}
.catoverview-section__ico svg{width:34px;height:34px}
.catoverview-section__name{font-weight:700}
.catoverview-section__count{font-weight:400;font-size:14px;color:var(--muted);margin-left:2px}

.cattree{--cattree-indent:26px;list-style:none;margin:10px 0 0;padding:0}
.cattree .cattree{margin:2px 0 0}
.cattree li{position:relative;padding-left:var(--cattree-indent)}
/* Vodorovná "větev" k položce. */
.cattree li::before{
  content:"";position:absolute;left:0;top:19px;
  width:calc(var(--cattree-indent) - 6px);height:0;border-top:1px solid var(--line);
}
/* Svislý "kmen" spojující sourozence -- u posledního potomka končí uprostřed
   řádku (u vodorovné větve), ne až na dně, jinak by čára trčela do prázdna. */
.cattree li::after{
  content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--line);
}
.cattree li:last-child::after{bottom:auto;height:19px}

.cattree-link{
  display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 8px 4px 4px;
  border-radius:6px;color:var(--ink);text-decoration:none;
}
.cattree-link:hover{background:#f3f5f7;color:var(--brand-dark);text-decoration:none}
/* Obrázky/ikony podkategorií -- zvětšeno z původních 22px, pořád v poměru
   ke stromovému řádku (ne "karta", ale výrazně viditelnější než dřív). */
.cattree-ico{
  flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:#fff;border:1px solid #eef1f3;overflow:hidden;color:#aeb6be;
}
.cattree-ico img{max-width:100%;max-height:100%;object-fit:contain}
.cattree-ico svg{width:19px;height:19px}
.cattree-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:13.5px}
/* Počet -- STEJNÝ formát "(N)" jako u root sekce (.catoverview-section__count),
   teď přímo za názvem (uvnitř .cattree-name), ne jako samostatný sloupec. */
.cattree-count{font-weight:400;color:var(--muted)}

/* První úroveň stromu pod rootem o něco výraznější než hlubší úrovně
   (větší ikona i text), stejný odstupňovaný vzor jako dřív. */
.catoverview-section > .cattree > li > .cattree-link .cattree-name{font-size:14.5px}
.catoverview-section > .cattree > li > .cattree-link .cattree-ico{width:40px;height:40px;border-radius:9px}
.catoverview-section > .cattree > li > .cattree-link .cattree-ico svg{width:22px;height:22px}

@media(max-width:820px){
  .catoverview-page{padding:16px}
  .catoverview-section__ico{width:52px;height:52px;border-radius:9px}
  .catoverview-section__ico svg{width:28px;height:28px}
  .cattree{--cattree-indent:18px}
  .cattree-link{gap:8px;padding:3px 4px}
  .cattree-ico{width:28px;height:28px}
  .cattree-ico svg{width:16px;height:16px}
  .cattree-name{font-size:12.5px}
  .catoverview-section > .cattree > li > .cattree-link .cattree-name{font-size:13px}
  .catoverview-section > .cattree > li > .cattree-link .cattree-ico{width:32px;height:32px}
}

.brands-tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:14px 10px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink);
}
.brands-tile[hidden]{display:none}
.brands-tile:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.05);text-decoration:none}
.brands-tile__logo{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:54px;
}
.brands-tile__logo img{max-width:110px;max-height:52px;width:auto;height:auto;object-fit:contain}
.brands-tile__logo-text{font-weight:800;font-size:17px;color:var(--ink);line-height:1.1}
.brands-tile__name{font-weight:600;font-size:14px;line-height:1.2}
.brands-tile--text .brands-tile__name{color:var(--muted);font-weight:500;font-size:12px}
.brands-tile__count{font-size:12px;color:var(--muted)}
@media(max-width:480px){
  .brands-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
  .brands-tile{padding:12px 8px}
  .brands-tile__logo{height:46px}
  .brands-tile__logo img{max-height:44px;max-width:96px}
  .brands-az__item{min-width:30px;height:30px;font-size:13px}
}

/* ---------- Product grid + cards ---------- */
.home-block{margin-bottom:36px}
/* Odlehčené nadpisy homepage: brandová tmavá šedo-modrá místo skoro černé,
   o něco nižší váha, pořád dobře čitelné. */
.home-block__head h2{margin-bottom:2px;color:#33465a;font-weight:600;letter-spacing:.005em}
.home-block__head p{margin:0 0 14px;color:var(--muted);font-size:14px}

/* Blok "Značky" na category listingu -- vizuálně podřazený hlavnímu H1
   kategorie, proto menší než homepage "Vybrané značky" (jen velikost,
   váha/barva/odsazení zůstávají z .home-block__head h2 výše). */
.cat-brands .home-block__head h2{font-size:22px}

/* ---------- KOŘENOVÁ PŘÍČINA "mobil spadl na 1 sloupec" ----------
   repeat(auto-fill,minmax(230px,1fr)) je čistě responzivní vzorec bez
   explicitního mobilního pravidla: samo od sebe vytvoří tolik sloupců,
   kolik se jich vejde po 230px -- pod ~476px obsahové šířky (2×230px+gap)
   uz vyjde jen JEDEN sloupec, protože se tam druhý 230px sloupec
   nevejde. Žádné jiné pravidlo/konflikt to nepřepisovalo, jen tenhle
   auto-fill práh. JEDNA centrální oprava níž (ne desítky override) --
   .product-grid je sdílená všemi produktovými výpisy (homepage bloky,
   _category-listing.php = kategorie/podkategorie/search/brand/virtuální
   landingy/nekompletní, apple-landing.php), takže platí všude najednou. */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
/* Dvě mobilní pásma (viz zadání -- "2 vedle sebe" úplně všude na mobilu
   bylo na úzkém telefonu na výšku moc namačkané):
   <=480px (telefon na výšku)   => 1 sloupec, plná šířka, pohodlné karty.
   481-820px (telefon na šířku / tablet, existující shop breakpoint pro
   header/menu) => 2 sloupce. Nad 820px (desktop) se o počet sloupců dál
   stará jen auto-fill výš, beze změny. */
@media(max-width:480px){
  .product-grid{grid-template-columns:repeat(1, minmax(0, 1fr))}
}
@media(min-width:481px) and (max-width:820px){
  .product-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
  /* Užší karta v tomhle pásmu má míň místa na text -- menší vnitřní
     padding (ne font-size) dá cenovému bloku/Detailu pár px navíc, ať se
     zbytečně nelámou řádky. Hlavní cena/název/badge se NEMĚNÍ. */
  .card__body{padding:10px 10px 10px}
  .card__bottom{gap:6px}
  .card__price .price-exvat{font-size:11px}
  .card__price .price-margin{font-size:10px}
  .card__specs{gap:5px;min-height:48px}
  .card__spec{font-size:11px;padding:3px 8px 3px 7px}
  .card__spec svg{width:13px;height:13px}
}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card:hover{box-shadow:0 6px 20px rgba(0,0,0,.07)}
/* Wrapper: beze změny poměru stran/rozměrů karty (aspect-ratio je pořád
   stejné 4/3 pro VŠECHNY karty vč. desktopů), jen centrování obsahu
   (padding je teď redundantní -- velikost řídí přímo max-width/max-height
   na img níže). */
.card__media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:#fff}
/* Pevný strop na samotný obrázek (ne na wrapper): i produkt s poměrem stran
   blízkým hraně boxu (vysoký tower/SFF) tak nikdy nevyplní víc než 90 % okna,
   stejně jako notebook -- bez cropu a bez deformace (object-fit:contain).
   Postupně zvětšováno z původních 72 % (přes 80 %) na 90 % -- produkt na
   kartě opticky výrazně větší, pořád s malou rezervou proti okrajům
   wrapperu. Platí jen pro .card__media (výpisy) -- galerie na detailu
   (.gallery) má vlastní CSS. */
.card__media img{width:auto;height:auto;max-width:90%;max-height:90%;object-fit:contain;display:block}
/* Desktopy/PC (.card--desktop, viz repo_category_device_class_map() +
   _product-card.php) mají typicky hranatější/vyšší produktové fotky
   (tower/mini PC) než notebooky nebo monitory -- při stejném 90% stropu pak
   opticky "natahují" kartu, i když je aspect-ratio wrapperu úplně stejné
   jako u ostatních. Jen menší strop na SAMOTNÝ obrázek (~28 % menší než
   90 %), stejný wrapper/aspect-ratio/centrování/object-fit:contain jako u
   notebooků a monitorů -- jen tahle jedna kategorie zmenšená. */
.card--desktop .card__media img{max-width:65%;max-height:65%}
.card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card__brand{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
/* font-weight:600 místo výchozího bold (700) zděděného z <h3> -- jemnější,
   méně "těžký" název karty (styl inComputer). Velikost/barva/layout beze
   změny. */
/* Přirozená (auto) výška -- název se NIKDY neusekává/neořezává, ať je
   1, 2, 3 nebo víc řádků (zadání: celý název musí být vždy vidět). Dřívější
   pokus o pevnou 3řádkovou výšku + line-clamp byl EXPLICITNĚ zamítnut --
   zarovnání "Repasované/Stav" pod tím teď řeší layout (margin-top:auto na
   .card__meta níž), ne oříznutí titulku. Karta s delším názvem je prostě
   vyšší (grid řádek se přizpůsobí nejvyšší kartě v řadě). */
.card__title{font-size:15px;font-weight:600;line-height:1.3;margin:0}
/* Jemnější, ne černý název produktu na kartě (styl inComputer) -- jen
   barva, font-size/font-weight/layout beze změny. */
.card__title a{color:#5f6670}
.card__title a:hover{color:#3f454c}
/* Parametrické bubliny pod název (CPU/RAM/disk/úhlopříčka apod., viz
   shop_card_spec_chips() v app/helpers.php) -- STEJNÝ badge/chip systém jako
   .pdp__tag na detailu (--badge-* proměnné, stejné SVG ikony), jen
   kompaktnější varianta pro menší prostor karty (menší font/padding/ikona
   než .pdp__tag, ne nový vzhled). Max 4 bubliny, zalomení povolené.
   min-height rezervuje PEVNÝ prostor na max 2 řádky bublin (55.6px = 2×
   výška jedné bubliny [24.8px] + gap) bez ohledu na to, jestli karta má 2,
   3 nebo 4 bubliny (1 nebo 2 řádky) -- i prázdný wrapper (kategorie bez
   parametrů, viz _product-card.php) prostor drží. Celý blok teď žije
   uvnitř .card__footer-stack (viz níž), který se spolu s ním stará o
   zarovnání ke spodku karty. */
.card__specs{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;margin:2px 0;min-height:55.6px}
.card__spec{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;line-height:1.25;
  background:var(--badge-bg);color:var(--badge-color);border:1px solid var(--badge-border);border-radius:999px;
  padding:4px 10px 4px 8px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.card__spec svg{flex:0 0 auto;width:14px;height:14px;stroke-width:1.9;color:var(--brand-dark, #0f6b72)}
@media(max-width:480px){
  .card__specs{gap:5px;min-height:48px}
  .card__spec{font-size:11px;padding:3px 8px 3px 7px;max-width:100%}
  .card__spec svg{width:13px;height:13px}
}
/* align-items:center -- "Repasované" (.chip, prostý text) a "[A] Stav"
   (.chip--grade-*, inline-flex s kolečkem) mají mírně odlišnou vnitřní
   výšku (viz komentáře u .chip/.chip--grade-* výš); bez explicitního
   zarovnání by je výchozí stretch protáhl na výšku řádku nestejně
   (plain .chip zůstává zarovnaný nahoru, grade--chip zůstává vycentrovaný),
   což vypadalo jako badge "o pár px" mimo osu. Center = obě sedí na
   stejné vodorovné ose bez ohledu na tenhle sub-pixelový rozdíl výšky.
   min-height drží pevnou výšku řádku bez ohledu na to, kolik bublin karta má.
   flex-wrap:wrap (dřív nowrap) -- samice s podprodukty teď může zobrazit
   "Repasované" + víc stavů najednou (A/B/C, viz $cardGrades v
   _product-card.php), což se na užší (mobilní/2sloupcové) kartě na jeden
   řádek nemusí vejít -- bubliny se pak prostě zalomí pod sebe (žádné
   oříznutí/přetečení karty), místo aby vynucovaly jeden řádek za cenu
   přetečení. Zarovnání ke spodku karty teď řeší SPOLEČNÝ wrapper
   .card__footer-stack (viz níž, margin-top:auto je NA NĚM, ne tady) --
   .card__meta sám žádnou auto marži nemá. */
.card__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:32px;justify-content:flex-end}
/* Nekompletnost (.chip--incomplete, "Nekompletní: <důvod>") -- VLASTNÍ řádek
   pod .card__meta (Repasované/Nefunkční + Stav), ne uvnitř něj. Ten zůstává
   nowrap, takže tahle bublina (může mít delší text, viz shop_condition_reason_label())
   ho nikdy nezalomí a "Stav" nikdy nespadne na druhý řádek. flex-wrap:wrap +
   justify-content:flex-end -- stejné pravé zarovnání jako .card__meta výš,
   text uvnitř .chip smí zalomit, samotný řádek se jen zvětší na výšku (běžný
   flow), nikdy nepřekryje .card__pricebox pod ním (ten drží margin-top:auto
   nezávisle na počtu řádků nad sebou -- stejný mechanismus jako u
   proměnlivě dlouhého názvu karty). */
.card__meta-issue{display:flex;flex-wrap:wrap;justify-content:flex-end}
/* Hlavní cena / bez DPH / Skladem -- jeden kompaktní blok (viz
   .card__pricebox v templates/_product-card.php), ať drží vizuálně
   pohromadě místo rozjetého odstupu po celé výšce karty.
   gap:3px -- malá, ale znatelná mezera mezi řádky (0px působilo namačkaně,
   předchozích 8px "rozjetě" -- viz šíře gap+row-gap historie výš).
   line-height:1.25 -- globální body{line-height:1.5} (viz shop.css výš)
   dělal u těchhle 3 krátkých řádků zbytečně vysoký "leading" nad/pod
   textem. Zúžení jen uvnitř téhle karty, font-size/barvy/velikost textu
   beze změny, na detail produktu (.buybox__price/.pdp .stock apod. mimo
   .card) nemá vliv. */
/* Spodní řádek karty: cenový blok vlevo + tlačítko "Detail" vpravo (viz
   zadání -- cena už NESMÍ být vpravo/na střed). Vlastní margin-top:auto tu
   NENÍ (je na společném .card__footer-stack níž, viz tam). align-items:center
   -- Detail se vždy vertikálně vystředí vedle cenového bloku bez ohledu na
   to, jestli má cenový blok 2, 3 nebo 4 řádky (cena [+ old], bez DPH,
   Zvláštní režim DPH, Skladem). flex-wrap:wrap jen jako pojistka proti
   přetečení na extrémně úzkých kartách (viz mobil v zadání) -- Detail se
   v tom vzácném případě zalomí pod cenu, nikdy mimo kartu / přes okraj. */
.card__bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* Spodní shluk celé karty: bubliny + Repasované/Stav + [Nekompletní] +
   cena/sklad/Detail -- JEDEN flex-column wrapper s margin-top:auto, ať se
   celý drží pohromadě a přilepí ke spodku karty jako celek (zadání: bubliny
   mají viset těsně NAD "Repasované/Stav", ne osamocené pod názvem).
   Název (a jeho přirozená/proměnlivá výška, viz .card__title výš) zůstává
   nad tímhle wrapperem; volný prostor mezi nimi pohlcuje právě tahle auto
   marže. gap:6px -- STEJNÁ mezera, jakou dřív mezi specs/meta/bottom dávalo
   obecné .card__body{gap:6px} (teď jsou tyhle 3 bloky uvnitř vlastního
   wrapperu, ne přímo v .card__body, takže vlastní gap je potřeba
   zopakovat). V rámci jedné řady gridu (karty stretchnuté na stejnou výšku
   nejvyšší karty) tak celý spodní shluk vychází na STEJNOU vodorovnou osu
   bez ohledu na délku názvu jednotlivých karet. */
.card__footer-stack{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.card__pricebox{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.25}
/* justify-content:flex-start -- cenový blok zarovnaný DOLEVA (dřív flex-end/
   doprava), stejně jako .price-exvat/.price-margin/.card__stock níž. Jen
   zarovnání, texty/pořadí/velikosti/barvy beze změny. */
.card__price{display:flex;align-items:baseline;gap:8px;row-gap:3px;justify-content:flex-start;flex-wrap:wrap}
.card__price--ask{color:var(--muted);font-size:14px}
/* Cena bez DPH na kartě (.price-exvat je sdílená se detailem, viz
   .buybox__price) -- width:100% ji zalomí na vlastní řádek pod hlavní
   cenu, tady navíc zarovnaná doleva stejně jako .price-now nad ní. */
.card__price .price-exvat{text-align:left}
/* "Zvláštní režim DPH" -- u margin/special produktů TŘETÍ řádek pod cenou bez
   DPH (ta u margin/special zůstává vidět, jen se sem navíc přidá tenhle
   informační štítek). Ještě menší/nenápadnější než .price-exvat, stejná
   muted barva -- žádné zvýraznění, žádný badge. */
.price-margin{font-size:11px;color:var(--muted);display:block;width:100%;text-align:left}
.price-now{font-size:18px;font-weight:700;color:var(--ink)}
.price-old{font-size:13px;color:var(--muted);text-decoration:line-through}
.price-vat{font-size:12px;color:var(--muted)}

.badge{position:absolute;top:8px;left:8px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.badge--sale{background:#c0392b}
/* Fotoaparát badge -- "má reálné fotografie konkrétních kusů" (viz
   $card['has_real_photos'], shop_camera_badge_svg() v app/helpers.php).
   VŽDY vpravo nahoře (Akce zůstává vlevo nahoře, viz .badge výš -- nikdy
   nekolidují). Kruhový, decentní -- lehce průsvitné bílé podklad + tmavá
   ikonka (--ink, ne --brand), malý shadow/border místo plné barvy jako
   Akce, ať nepůsobí jako další "prodejní" štítek. */
.badge--photo{
  top:8px;left:auto;right:8px;
  width:30px;height:30px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.88);color:var(--ink);
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
@media(max-width:480px){
  .badge--photo{width:25px;height:25px}
  .badge--photo svg{width:13px;height:13px}
}

/* Základní neutrální badge/chip vzhled -- SDÍLENÝ s detailem produktu
   (.pdp__tag, viz níže): stejné proměnné --badge-bg/--badge-color/
   --badge-border, tedy stejná barva/border i pro "Repasované" apod. na
   výpisu jako na detailu. Detail je referenční vzhled -- výpis se od něj
   liší JEN velikostí (menší font-size/padding), nikdy barevností. */
/* Velikost: ~93 % detailu (.pdp__tag níž: font-size 14px, padding
   8px 16px/8px 12px) -- o kousek menší, ne o řád menší jako dřív
   (font-size 12px, padding 2px 9px). Mobil má vlastní, o něco
   kompaktnější velikost, viz @media blok níže -- pořád ale větší než
   původní desktopová hodnota. */
/* display:inline-flex;align-items:center (ne inline-block) -- STEJNÝ box model
   jako .chip--grade-* níž, aby "Repasované" a "[A/B/C] Stav" vedle sebe v
   .card__meta vycházely na STEJNOU výšku/vertikální osu. Dřív byl základní
   .chip inline-block s jiným vertikálním paddingem (7px) než grade varianta
   (6px) -- 2px rozdíl ve výšce/zarovnání ("Stav" bublina o pár px výš/menší
   než "Repasované"). Fix jen sjednocuje box model/padding, žádná barva/text
   se neměnila. */
.chip{display:inline-flex;align-items:center;font-size:13px;background:var(--badge-bg);color:var(--badge-color);border:1px solid var(--badge-border);border-radius:999px;padding:7px 13px}
.chip--muted{background:#f1f3f5;color:#556;border-color:#e4e7eb}
.chip--incomplete,.pdp__tag.chip--incomplete{background:var(--badge-incomplete-bg);color:var(--badge-incomplete-color);border-color:var(--badge-incomplete-border)}
/* Grade badge -- barevný stav podle shop_grade_badge_class() v
   app/helpers.php, jen modifikátor nad základní .chip/.pdp__tag (žádná
   duplicitní komponenta). Pastelové, ne syté/neonové -- jemné pozadí +
   tmavší text stejné barevné rodiny + jemný border, hodnoty ze sdílených
   --badge-grade-* proměnných (jedno místo pro obě velikosti). "Repasované"
   (condition chip vedle) žádnou z těchto tříd nedostává, zůstává čistě
   základní .chip/.pdp__tag. Stejná třída (shop_grade_badge_class()) se
   navíc použije i na detailu produktu i ve výpisech na štítku [kolečko
   A/B/C] Stav (.pdp__tag-dot, viz templates/product.php a
   templates/_product-card.php) -- proto tu selektor rovnou počítá i s
   kombinací .pdp__tag.chip--grade-*, ať jsou barvy 1:1 stejné na obou
   místech bez druhé kopie hodnot. */
.chip--grade-a,.pdp__tag.chip--grade-a{background:var(--badge-grade-a-bg);color:var(--badge-grade-a-color);border-color:var(--badge-grade-a-border)}
.chip--grade-b,.pdp__tag.chip--grade-b{background:var(--badge-grade-b-bg);color:var(--badge-grade-b-color);border-color:var(--badge-grade-b-border)}
.chip--grade-c,.pdp__tag.chip--grade-c{background:var(--badge-grade-c-bg);color:var(--badge-grade-c-color);border-color:var(--badge-grade-c-border)}
/* Grade chip má navíc vnitřní kolečko s písmenem vlevo -- na rozdíl od
   prostého textového .chip (Repasované/Nekompletní) potřebuje flex layout
   pro zarovnání na výšku a mezeru mezi kolečkem a textem. Beze změny pro
   .chip--muted/.chip--incomplete a ostatní čistě textové chipy. Levý
   padding menší než pravý -- kolečko už samo dodává vizuální odstup. */
/* Vertikální padding (7px) STEJNÝ jako základní .chip výš -- jen horizontální
   se liší (menší vlevo kvůli kolečku), aby výška obou variant vycházela
   identicky. */
.chip--grade-a,.chip--grade-b,.chip--grade-c{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 8px}

.stock{font-size:13px;font-weight:600}
.stock--in{color:var(--ok)}
.stock--out{color:var(--off)}
.stock--unknown{color:var(--muted)}
/* "Skladem X kusů" o něco výraznější -- detail o kousek větší než výpis,
   barva a font-weight beze změny. Zásah jen přes potomka .pdp/.card, aby
   se nedotkl .stock jinde (search panel, _unit.php apod.). */
.pdp .stock{font-size:16px}
.card .stock{font-size:15px}
/* margin-top zrušen -- mezeru nad "Skladem" teď dává .card__pricebox{gap:2px}
   výš, dvojitě by se sčítalo. text-align:left -- viz .card__bottom výš,
   cenový blok (vč. skladu) je teď celý zarovnaný doleva. */
.card__stock{text-align:left}
/* Tlačítko "Detail" vpravo od cenového bloku (.card__bottom výš) -- STEJNÝ
   zelený CTA vzhled jako "Přidat do košíku" (.buybox .btn/.unit-card__buy
   .btn.add-form__btn), STEJNÉ --cta/--cta-ink/--cta-hover proměnné a
   border-radius:4px/font-weight:700 -- žádný nový odstín. flex:0 0 auto,
   ať ho .card__pricebox (flex:1) nikdy nezmenší; white-space:nowrap, ať se
   samotné slovo "Detail" nezalomí (karta jako celek se zalomit smí, viz
   .card__bottom{flex-wrap:wrap}). */
.card__cta{
  flex:0 0 auto;display:inline-block;border:0;border-radius:4px;
  background:var(--cta);color:var(--cta-ink);font-weight:700;font-size:13px;
  padding:8px 14px;white-space:nowrap;
}
.card__cta:hover{background:var(--cta-hover);text-decoration:none}

.empty{color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:16px}
.muted{color:var(--muted);font-weight:400}

/* ---------- Category head ---------- */
.cat-head{margin-bottom:22px}
.cat-head h1{font-size:26px}
.cat-head__desc{color:#374151;max-width:75ch}

/* ---------- Brand landing head (/znacky/<slug>/) ---------- */
.brand-head__logo{display:block;max-height:48px;max-width:160px;width:auto;height:auto;object-fit:contain;margin-bottom:10px}
.brand-head__intro{color:#374151;max-width:75ch;margin-top:6px}
.cat-products__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
/* Jediný nadpis kategorie (název + počet) nad výpisem – v pravém content sloupci. */
.cat-products__title{font-size:22px;line-height:1.2;margin:0}
/* Počet produktů v závorce vedle H1 -- vizuálně podřazený nadpisu (menší,
   zarovnaný na jeho baseline). Barva/váha zůstávají z .muted. */
.cat-products__title .muted{font-size:16px;vertical-align:baseline}
.cat-products__intro{color:var(--muted);font-size:14px;line-height:1.5;margin:-6px 0 14px;max-width:70ch}
/* Modifikátor jen pro landing "Nefunkční / na opravu" (--wide, viz $listingIntroWide
   v shop_render_grade_c_landing() + _category-listing.php) -- text má využít celou
   šířku content sloupce místo úzkého 70ch bloku. Nezasahuje do základní
   .cat-products__intro, ať se sdílená komponenta jinde (search/jiné landingy) dál
   chová beze změny, kdyby v budoucnu taky začaly listingIntro vyplňovat. Jen
   max-width -- font-size/barva/line-height zůstávají stejné z .cat-products__intro. */
.cat-products__intro--wide{max-width:none}
.filter-stub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.filter-stub__label{font-weight:600}
.cat-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.cat-layout--nofilters{grid-template-columns:1fr}
.filters{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;position:sticky;top:12px}
.filters__wrap{display:block}
.filters__wrap > summary.filters__toggle{display:none}
.filters__form{display:flex;flex-direction:column;gap:0}
.filters__block{border-top:1px solid #eef2f2;padding:12px 0}
.filters__block:first-child{border-top:0;padding-top:0}
.filters__block > *:not(summary){margin-top:8px}
.filters__block summary.filters__label{cursor:pointer;list-style:revert}
.filters__label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.filters select{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13.5px;width:100%}
.filters__price{display:flex;align-items:center;gap:6px}
.filters__price input{width:0;flex:1;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.filters__opt{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.4;cursor:pointer;padding:3px 0}
.filters__opt input{flex:none;margin-top:3px}
.filters__opt-txt{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.filters__cnt{flex:none;color:var(--muted);font-size:12px}
.filters__more{margin-top:2px}
.filters__more summary{font-size:12.5px;color:var(--brand);cursor:pointer;padding:4px 0;list-style:revert}
.filters__more[open] summary{margin-bottom:2px}
.filters__actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.filters__submit{width:100%;text-align:center;border:0;cursor:pointer}
.filters__reset{text-align:center;font-size:13px;color:var(--muted)}
@media(max-width:900px){
  /* minmax(0,1fr), NE holé 1fr: grid track bez explicitního minima defaultně
     počítá "auto" minimum = min-content celého podstromu grid itemu. Uvnitř
     .cat-products je značkový carousel (.carousel__track: display:flex;
     overflow-x:auto; BEZ flex-wrap -- záměrně, má scrollovat vodorovně sám
     v sobě) -- jeho nezalomený součet šířek karet (5× 120px+gap) je přes
     600px a bez explicitního min-width:0 na tracku tenhle min-content
     probublá až do gridu, který se pak roztáhne na šířku carouselu místo
     viewportu (potvrzeno živým bisect testem: schování .cat-brands vrátí
     grid-template-columns z 644px na 343px). minmax(0,1fr) shoduje track na
     šířku kontejneru a nechá carousel scrollovat uvnitř sebe, jak bylo
     zamýšleno -- žádná změna .filters/.cat-products/.carousel markupu. */
  .cat-layout{grid-template-columns:minmax(0,1fr)}
  .filters{position:static;background:transparent;border:0;padding:0}
  /* Na mobilu je celý filtr schovaný pod jedno tlačítko "Filtrovat". */
  .filters__wrap > summary.filters__toggle{
    display:block;list-style:none;cursor:pointer;
    background:var(--brand);color:#fff;font-weight:600;font-size:14px;
    padding:11px 18px;border-radius:999px;text-align:center;
  }
  .filters__wrap > summary.filters__toggle::-webkit-details-marker{display:none}
  .filters__wrap:not([open]) > .filters__form{display:none}
  .filters__wrap[open] > .filters__form{
    margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;
  }
}
@media(min-width:901px){
  /* Desktop: žádné tlačítko, obsah je vždy vidět bez ohledu na open/close.
     display:flex!important přebije UA pravidlo pro zavřený <details>;
     ::details-content řeší novější enginy, kde je obsah skrytý přes
     content-visibility (starší prohlížeče toto pravidlo prostě ignorují). */
  .filters__wrap > .filters__form{display:flex!important}
  .filters__wrap::details-content{content-visibility:visible!important;display:block!important}
}
.sort-form{display:flex;align-items:center;gap:8px;font-size:13.5px}
.sort-form__label{color:var(--muted)}
.sort-form select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13.5px}
.pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px;font-size:14px}
.pagination__info{color:var(--muted)}
.pagination__prev,.pagination__next{font-weight:600}
@media(max-width:560px){.pagination{flex-wrap:wrap;gap:10px}}

/* ---------- Sdílený výpis (kategorie i vyhledávání) ---------- */
.listing{display:block}
.listing .cat-head{margin-bottom:16px}
.listing-narrow{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.listing-narrow__clear{margin-left:8px;color:var(--brand-dark);font-weight:600}

/* Bloky "Kategorie" / "Značky" nad výsledky hledání */
.srch-block{margin:0 0 20px}
.srch-block__title{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 10px}
.srch-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.srch-tiles--brands{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.srch-tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 10px;
  color:var(--ink);min-width:0;
}
.srch-tile:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.06);text-decoration:none}
.srch-tile.is-active{border-color:var(--brand);background:#f0fbfb}
.srch-tile__img{display:flex;align-items:center;justify-content:center;width:100%;height:56px}
.srch-tile__img img{max-height:56px;width:auto;object-fit:contain}
.srch-tile__img svg{width:34px;height:34px}
.srch-tile__img--brand{height:40px}
.srch-tile__img--brand img{max-height:38px}
.srch-tile__brandtext{font-weight:700;font-size:14px;color:var(--ink)}
.srch-tile__name{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%}
.srch-tile__cnt{font-size:12px;color:var(--muted)}

/* ---------- AJAX loading stav výpisu (jemný, bez spinneru) ---------- */
.cat-loading{display:none;font-size:12px;color:var(--muted);background:#eef6f7;border:1px solid #d5ebed;border-radius:999px;padding:3px 12px;white-space:nowrap}
#cat-listing.is-loading .cat-loading{display:inline-block}
#cat-listing.is-loading .product-grid,
#cat-listing.is-loading .pagination,
#cat-listing.is-loading .srch-tiles{opacity:.55;transition:opacity .12s ease;pointer-events:none}
#cat-listing.is-loading{cursor:progress}

/* ---------- PDP ---------- */
/* Celý detail produktu v jednom souvislém bílém pruhu (styl inComputer) --
   šedé zůstává jen mimo .wrap (kraje stránky). Jen barva pozadí, žádná
   změna šířky/rozložení: .pdp dál sedí přesně v content-boxu .wrap.
   margin-top ruší .page{padding-top:18px} (jinak by mezi bílým .catnav
   pruhem a bílým .pdp vznikla šedá mezera z pozadí body) -- odstup nahoře
   dál existuje, jen jako vnitřní padding-top uvnitř bílé plochy. */
.pdp{background:var(--card);margin-top:-18px;padding-top:20px}
/* Poměr galerie : info sloupec -- strop na info sloupci NAMĚŘEN přímo proti
   inComputeru (getBoundingClientRect na stejném viewportu 1745px): jejich
   reálný obsahový sloupec s titulkem/cenou/CTA (.p-detail-inner-header) má
   588px, ne odhad podle poměru. Galerie počítá STEJNÝ vzorec jako dřívější
   symetrický 1fr grid (calc(50% - 14px) = totéž číslo, co dávalo 1fr při
   dvou stejných 1fr tracích s gap:28px) -- galerie se tedy na žádné šířce
   stránky nezmění (682px na 1745px viewportu, beze změny).
   justify-content:space-between (ne start): jakmile info sloupec narazí na
   strop 588px a v řádku zbyde volné místo, tohle místo jde CELÉ do mezery
   MEZI galerii a info sloupec (styl inComputeru -- větší "dýchací" mezera
   uprostřed), místo aby zůstalo prázdné až za info sloupcem. Info sloupec
   tak sedí u pravého okraje stejného content containeru jako zbytek
   stránky. Pod ~1204px šířky obsahu (kdy 588px strop ještě nic neomezuje)
   se chová identicky jako předtím -- žádná změna pro tablet ani mobil. */
.pdp__top{display:grid;grid-template-columns:minmax(0,calc(50% - 14px)) minmax(0,588px);justify-content:space-between;gap:28px;margin-bottom:8px}
/* Pravý gutter info sloupce -- margin-right na samotném gridovém itemu
   (ne padding na .pdp__top), ať se nedotkne šířky gridové "kolejnice" pro
   galerii (calc(50% - 14px) počítá ze stejné content-box šířky containeru
   jako dřív). Grid item v gridu bez explicitní width standardně "stretchne"
   přes celou přidělenou kolejnici (588px) -- margin-right z toho odečte
   24px, takže .pdp__summary sám o sobě zabírá 564px, ale kolejnice (a tedy
   i galerie) zůstává 588px/682px beze změny. Na mobilu (≤820px, jeden
   sloupec) gutter ruší -- tam by jen zbytečně ukrajoval z plné šířky. */
.pdp__summary{margin-right:24px}
@media(max-width:820px){
  .pdp__top{grid-template-columns:minmax(0,1fr)}
  .pdp__summary{margin-right:0}
}
/* Na mobilu (stejný breakpoint jako .wrap{padding:0 14px} výše) zruš boční
   gutter kolem detailu -- bílá plocha .pdp se roztáhne přes celou šířku
   viewportu (žádné šedé pruhy vlevo/vpravo mimo .catnav), vnitřní odstup
   14px se vrátí jako padding, aby text/prvky nebyly nalepené na kraj.
   Netýká se desktopu/tabletu (>640px), jen tento jeden breakpoint. */
@media(max-width:640px){
  .pdp{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
}

/* ---------- Košík / checkout: stejný princip na mobilu ---------- */
/* .cart-row, .cart__summary, .checkout__summary a .fieldset jsou už
   samostatné bílé karty s vlastním paddingem (12-16px) -- na mobilu je
   necháme roztáhnout přes celou šířku obrazovky (žádný boční gutter
   z .wrap), vnitřní odstup řeší jejich vlastní padding. Holý text bez
   karty (h1, p) dostane padding zvlášť, ať nesedí na kraj. Desktop/tablet
   beze změny -- jen tento breakpoint. */
@media(max-width:640px){
  .shop-page{margin-left:-14px;margin-right:-14px}
  .shop-page > h1,
  .shop-page > p,
  .shop-page > .order-doc__back{padding-left:14px;padding-right:14px}
}
/* Hlavní fotka volně na bílé ploše, bez rámečku/karty (styl inComputer) --
   jeden společný gallery engine pro všechny produktové detaily /p/... .
   Šipky přímo na fotce mění hlavní obrázek (ne jen lightbox), klik na
   náhled dělá totéž; zoom (otevření fullscreen lightboxu) zůstává na
   kliknutí na samotnou fotku -- viz data-gallery-open v šabloně a shop.js. */
.gallery__main{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery__main img{width:100%;height:100%;object-fit:contain}
.gallery--empty img{opacity:.7}
.gallery__open{position:relative;display:flex;width:100%;height:100%;align-items:center;justify-content:center;cursor:zoom-in}
.gallery__arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:12px;
  background:#fff;box-shadow:0 0 16px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;
  color:#33424a;cursor:pointer;z-index:2}
.gallery__arrow:hover{background:#f5f7f8}
.gallery__arrow--prev{left:10px}
.gallery__arrow--next{right:10px}
.gallery__illustrative{position:absolute;right:12px;bottom:8px;font-size:12px;color:var(--muted);pointer-events:none}

/* Řádek náhledů jako posuvník (slider) -- overflow-x:auto řeší swipe na
   mobilu, šipky (JS) posouvají track na desktopu a schovají se, když není
   kam posouvat. Aktivní náhled = .thumb.is-active. */
.gallery__thumbs{display:flex;align-items:center;gap:6px;margin-top:10px;min-width:0}
/* Levý/pravý gutter uvnitř posuvníku (ne na .gallery__thumbs samotném) --
   platí i když je náhledů víc, než se vejde, a track kvůli scrollu nejde
   vycentrovat (viz komentář u @media(min-width:641px) níže): bez tohohle
   paddingu první náhled sedí přesně na hraně viewportu a je "nalepený"
   vlevo. Overflow-x:auto ho respektuje jako běžný okraj scrollované
   plochy, scroll/šipky/aktivní náhled beze změny. */
.gallery__thumbs-viewport{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 8px}
.gallery__thumbs-viewport::-webkit-scrollbar{display:none}
.gallery__thumbs-track{display:flex;gap:8px}
.thumb{flex:0 0 auto;width:64px;height:64px;border:2px solid transparent;border-radius:8px;background:#fff;padding:0;cursor:pointer;overflow:hidden;display:block;box-shadow:0 0 0 1px var(--line) inset}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{box-shadow:0 0 0 1px var(--brand) inset}
.thumb.is-active{border-color:var(--brand)}
.gallery__thumbs-arrow{flex:0 0 auto;width:32px;height:32px;border:0;border-radius:10px;background:#fff;
  box-shadow:0 0 12px rgba(0,0,0,.15);color:#33424a;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gallery__thumbs-arrow:hover{background:#f5f7f8}
.gallery__thumbs-arrow[hidden]{display:none}
@media(max-width:640px){
  .gallery__thumbs-arrow{display:none}
}
/* Jen desktop/tablet (mobil ≤640px beze změny) -- celý pás náhledů
   vycentrovaný pod hlavní fotkou, ne nalepený vlevo. display:flex bez
   šířky se sám roztáhne na 100 % rodiče (chová se jako block) -- proto
   width:max-content, ať se track zmenší na skutečnou šířku náhledů a
   margin:0 auto ho pak má na čem vycentrovat. Když je náhledů víc a track
   je širší než viewport (slider), width:max-content i auto margin nechají
   track přirozeně začínat vlevo se scrollem od první fotky -- žádný zásah
   do slideru, šipek ani aktivního náhledu. */
@media(min-width:641px){
  .gallery__thumbs-track{width:max-content;margin:0 auto}
}

.photo-caption{font-size:12px;color:var(--muted);margin:10px 0 0;display:flex;align-items:center;gap:6px}
.photo-caption::before{content:"";width:10px;height:10px;border-radius:3px;display:inline-block}
.photo-caption--catalog::before{background:#c2ccd6}
/* Text "Katalogové (ilustrační) fotografie produktu" pod thumby -- na
   desktopu se vůbec nezobrazuje (jen CSS, DOM/mobil beze změny). */
@media(min-width:641px){
  .photo-caption--catalog{display:none}
}
/* Popisek pod náhledy fotek KONKRÉTNÍHO KUSU ("Reálné fotografie tohoto
   kusu", viz _unit.php) -- bez modrého čtverečku (žádné ::before), text
   vycentrovaný pod galerií, o něco větší a s vyšší vahou písma pro lepší
   čitelnost. Platí jen pro --real, katalogová varianta výš beze změny. */
.photo-caption--real{justify-content:center;font-size:13px;font-weight:600}
.photo-caption--real::before{content:none}

.pdp__brand{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.pdp__summary h1{font-size:24px;margin-bottom:10px}
.pdp__short{color:#374151}
.pdp__description-top{margin:0 0 14px}
.pdp__notice{
  border-radius:8px;padding:9px 12px 9px 14px;font-size:13.5px;font-weight:600;
  margin:0 0 12px;border-left:4px solid transparent;
}
.pdp__notice--gradec{
  background:#f9fafb;border:1px solid var(--line);border-left:4px solid #dc2626;
  color:#7f1d1d;
}
.pdp__notice--incomplete{
  background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #d97706;
  color:#92400e;
}
.pdp__admin-edit{display:inline-block;margin:-4px 0 12px;font-size:12px;line-height:1;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.pdp__admin-edit:hover{color:var(--brand-dark);border-color:var(--brand)}

/* Kód produktu (jen admin) / SKU pod názvem -- jeden flex řádek, kód produktu
   vlevo, SKU vpravo (margin-left:auto na .pdp__codes-sku, funguje i samotné,
   kdyby kód produktu chyběl/byl skrytý). flex-wrap kvůli mobilu -- při
   zalomení zůstává SKU zarovnané doprava na vlastním řádku, žádný overflow. */
.pdp__codes{margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:13px;color:var(--muted);max-width:100%;overflow-wrap:anywhere}
.pdp__codes strong{color:#33424a;font-weight:600}
.pdp__codes-sku{margin-left:auto}
.pdp__codes-supplier,.pdp__codes-sku{display:inline-flex;align-items:center;gap:2px;position:relative;max-width:100%}

/* Copy tlačítko -- decentní, ikona malá (13px), ale klikací/dotyková plocha
   větší (28px) kvůli mobilu. Barva se na chvíli po zkopírování změní na
   --ok (viz .is-copied, přepíná JS v shop.js), žádné velké tlačítko. */
.pdp__copy-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;margin:0;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:6px}
.pdp__copy-btn:hover,.pdp__copy-btn:focus-visible{color:var(--brand-dark);background:var(--bg)}
.pdp__copy-btn.is-copied{color:var(--ok)}

/* "Zkopírováno" tooltip -- krátce nad tlačítkem, bez posunu okolního layoutu
   (position:absolute, rodič .pdp__codes-supplier/-sku má position:relative). */
.pdp__copy-toast{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);background:#33424a;color:#fff;font-size:11px;line-height:1.3;padding:3px 7px;border-radius:4px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:5}
.pdp__copy-toast.is-visible{opacity:1}

/* Řádek "Skladem X kusů", nad cenou. */
.pdp__stock-row{margin:0 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14px}

/* Ikonové štítky (styl inComputer) -- nad krátkým popisem a cenovým boxem.
   REFERENČNÍ vzhled celého badge/chip systému (viz --badge-* proměnné v
   :root a .chip výš, který čte STEJNÉ hodnoty) -- detail se od výpisu liší
   jen velikostí (větší font-size/padding/ikona), nikdy barevností. */
.pdp__tags{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
.pdp__tag{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;line-height:1.3;
  background:var(--badge-bg);color:var(--badge-color);border:1px solid var(--badge-border);border-radius:999px;
  padding:8px 16px 8px 12px;white-space:nowrap;
}
.pdp__tag svg{flex:0 0 auto;width:20px;height:20px;stroke-width:1.9;color:var(--brand-dark, #0f6b72)}
/* Baterie na detailu konkrétního kusu (_unit.php, .unit-card__battery) --
   žlutá ikona blesku (shop_chip_icon('bolt')) místo výchozí tyrkysové barvy
   ostatních .pdp__tag ikon výš, ať je baterie mezi bublinami vizuálně hned
   vidět. Jen barva ikony, pilulka samotná (.pdp__tag) zůstává stejná. */
.unit-card__battery svg{color:#f2a900}

/* Stav/Grade štítek (styl inComputer) -- [kolečko A/B/C] Stav.
   Na detailu (.pdp__tag--grade) je celý štítek <a>, klikací (scrolluje na
   výběr stavu/kusu, viz templates/product.php). Ve výpisech (.chip, viz
   _product-card.php) je STEJNÁ struktura (.pdp__tag-dot), jen bez klikací
   obálky a v menší velikosti (viz modifikátor níže) -- žádná druhá kopie
   téhle komponenty.
   Kolečko = tmavší odstín STEJNÉ barevné rodiny jako .chip--grade-* (žádná
   nová paleta), zbytek pilulky zůstává lehce pastelový přes .chip--grade-*
   výš -- selektor barvy kolečka cílí jen na .chip--grade-* (ne navíc na
   .pdp__tag--grade), ať funguje shodně na detailu i ve výpisu. */
.pdp__tag--grade{cursor:pointer}
.pdp__tag--grade:hover{text-decoration:none}
/* min-width (ne pevná width) + stadium border-radius (999px, ne 50%) --
   jednoznakové "A"/"B"/"C" pořád vykreslí dokonalý kroužek (min-width ==
   obsah+padding == height), dvojznakové "A-"/"A+" se místo useknutí v
   pevném 20x20 kruhu přirozeně rozšíří do oválné "kapsle" stejné výšky,
   text se nikdy neořízne (žádné overflow:hidden). Bug fix 2026-09-19 --
   viz shop_grade_letter() v app/helpers.php (pravý kořen problému byl tam,
   tohle je jen pojistka, kdyby CSS šířka byla i tak příliš těsná). */
.pdp__tag-dot{
  flex:0 0 auto;min-width:20px;height:20px;padding:0 3px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;line-height:1;white-space:nowrap;
}
.chip--grade-a .pdp__tag-dot{background:var(--badge-grade-a-color)}
.chip--grade-b .pdp__tag-dot{background:var(--badge-grade-b-color)}
.chip--grade-c .pdp__tag-dot{background:var(--badge-grade-c-color)}
@media(max-width:480px){
  .pdp__tags{gap:8px}
  .pdp__tag{font-size:13px;padding:7px 13px 7px 10px}
  .pdp__tag svg{width:18px;height:18px}
  .pdp__tag-dot{min-width:18px;height:18px;font-size:12px}
}

/* Stejná dot komponenta uvnitř .chip (výpisy: kategorie/hledání/homepage/
   doporučené -- vše přes sdílenou _product-card.php) -- jen o kousek menší
   než na detailu (.pdp__tag-dot výš: 20x20px, font-size 13px), ~90 % místo
   dřívějších ~75 %. Barvy pořád jen z .chip--grade-* výš, žádná nová
   paleta. Deklarace jsou u obou samostatné (ne dědění), takže případná
   budoucí změna detailu se sem sama nepropíše. */
.chip .pdp__tag-dot{min-width:18px;height:18px;font-size:12px;font-weight:700;margin-right:2px}
/* Mobil: kompaktnější než nové desktopové výpisové badge výš, ale pořád
   citelně větší než původní (font-size 12px/padding 2px 9px/dot 15px). */
@media(max-width:480px){
  .chip{font-size:12px;padding:6px 11px}
  /* Stejný vertikální padding (6px) jako .chip výš na tomhle breakpointu --
     stejný důvod jako u desktopové sady výš (sjednocená výška badge). */
  .chip--grade-a,.chip--grade-b,.chip--grade-c{gap:5px;padding:6px 10px 6px 7px}
  .chip .pdp__tag-dot{min-width:16px;height:16px;font-size:10px;margin-right:1px}
}
/* Výpis (karta): grade badge bez textu "Stav" vedle kolečka (jen kolečko
   samo, viz $cardGrades v _product-card.php) -- dřívější pravostranný
   padding/margin počítal s místem pro text napravo od kolečka, bez textu by
   kolečko sedělo mimo střed pilulky. Symetrický padding + bez margin-right
   na kolečku ho vycentruje -- STEJNÁ barva/velikost/font kolečka i pilulky
   jako doteď (viz .chip--grade-*/.pdp__tag-dot výš), jde jen o vycentrování.
   Musí být AŽ ZA .chip .pdp__tag-dot/mobilní blokem výš (stejná specificita,
   pozdější pravidlo ve zdroji vyhrává), jinak by margin-right:2px/1px odtud
   kolečko zase posunul. */
.chip--dot-only{padding:7px 10px}
.chip--dot-only .pdp__tag-dot{margin-right:0}
@media(max-width:480px){
  .chip--dot-only{padding:6px 9px}
}

.buybox{border:0;border-radius:0;background:transparent;padding:0;margin-top:14px}
/* Jedna cenová komponenta pro celý nákupní blok -- klasický buybox i každý
   Grade řádek teď renderují stejný markup (.buybox__price), viz sdílený
   partial templates/_offer-box.php, takže tu stačí JEDEN selektor (dřív
   tu byl duplicitní .variant-row__price se svými vlastními rozměry --
   34px vs. 20px -- protože šlo o dvě různé HTML struktury). */
.buybox__price{display:flex;align-items:baseline;column-gap:10px;row-gap:3px;flex-wrap:wrap;margin-bottom:12px}
.buybox__price .price-now{font-size:24px;font-weight:700;line-height:1.2;color:var(--ink)}
.buybox__price--ask{font-size:16px;color:var(--muted)}
.price-prefix{font-size:15px;font-weight:400;color:var(--muted);margin-right:2px}
/* "Od" + hlavní cena jako JEDEN atomický flex-item -- oprava zalomení na
   kartě/search panelu (.card__price je flex-wrap:wrap přes samostatné
   children price-old/price-prefix/price-now/..., takže na užší kartě
   "Od" a cena mohly spadnout každé na jiný řádek). Wrapper drží oba pohromadě
   na stejném řádku (white-space:nowrap), samotné .card__price se dál smí
   zalomit jako celek vůči price-old/price-exvat -- žádná jiná změna layoutu. */
.price-now-group{display:inline-flex;align-items:baseline;white-space:nowrap}
.price-exvat{font-size:12.5px;color:var(--muted);display:block;width:100%}
@media(max-width:480px){
  .buybox__price .price-now{font-size:20px}
}
/* Kotvy pro CTA "Koupit ↓" / "Vybrat kus ↓" z nákupního boxu – odsazení, ať
   cílový blok nekončí schovaný pod horní hranou okna (stejný princip jako
   .brands-section). #konkretni-kusy = jednotné kusy pod produktem/variantami,
   .variant = každý řádek gradu (vlastní id "variant-<ID>" v šabloně). */
#konkretni-kusy,.variant{scroll-margin-top:90px}
#konkretni-kusy:focus,.variant:focus{outline:none}

/* ---------- Sticky nákupní lišta (jen jednoduchá samice, viz $stickyBuyBar
   v templates/product.php a IntersectionObserver v shop.js) ----------
   .site-header/.catnav v tomhle shopu NEJSOU position:fixed (viz .site-header
   výš) -- scrollují normálně pryč s obsahem, takže lišta nemá s čím kolidovat
   a může sedět natvrdo na top:0 bez dopočítávání výšky headeru.
   Viditelnost řeší JS přes .is-visible (ne [hidden]) -- díky tomu má
   opacity/transform co animovat (display:none by transition zabilo). Element
   je v DOMu vždycky, jen mimo obrazovku/průhledný a s pointer-events:none,
   dokud observer nezjistí, že hlavní buybox (CTA) zmizel z viewportu.
   z-index 139 -- pod .search-panel__drop/.catnav mobilní flyout (140) a pod
   .lightbox (1000), ale nad běžným obsahem stránky a nad .site-header (136). */
.sticky-buybar{
  position:fixed;top:0;left:0;right:0;z-index:139;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .22s ease,opacity .22s ease;
}
.sticky-buybar.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.sticky-buybar__inner{display:flex;align-items:center;gap:12px;padding:8px 24px}
.sticky-buybar__img{width:40px;height:40px;flex:0 0 auto;object-fit:contain;background:var(--bg);border-radius:6px}
.sticky-buybar__body{flex:1;min-width:0}
.sticky-buybar__name{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buybar__stock{margin:1px 0 0;font-size:12px}
/* flex-wrap:wrap -- .price-exvat (viz níž) je STEJNÁ sdílená komponenta
   jako na kartách (.price-exvat{display:block;width:100%} v shop.css),
   width:100% ji zalomí na vlastní řádek přímo pod hlavní cenu, stejně
   jako v .card__price/.buybox__price. row-gap malé, ať lišta zbytečně
   neroste na výšku. */
.sticky-buybar__price{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;row-gap:0;flex-wrap:wrap;justify-content:flex-end;white-space:nowrap}
.sticky-buybar__price .price-now{font-size:17px;font-weight:700;color:var(--ink)}
.sticky-buybar__price .price-old{font-size:12px;color:var(--muted);text-decoration:line-through}
.sticky-buybar__price .price-exvat{text-align:right}
/* "Zvláštní režim DPH" štítek (viz product.php) -- STEJNÁ .price-margin
   třída/styl jako na kartách (.price-margin v shop.css), jen tady --
   stejně jako sousední .price-exvat výš -- zarovnaný doprava, ať
   navazuje na zarovnání celého .sticky-buybar__price (justify-content:
   flex-end). Karta zůstává beze změny (tam je left, viz .price-margin). */
.sticky-buybar__price .price-margin{text-align:right}
.sticky-buybar__cta{flex:0 0 auto}
.sticky-buybar__cta .add-form{display:flex}
/* Stejný vzhled jako hlavní CTA "Přidat do košíku" v buyboxu (.buybox .btn
   výš) i jako CTA v kartě kusu (.unit-card__buy .btn.add-form__btn) --
   STEJNÉ proměnné --cta/--cta-ink/--cta-hover, STEJNÝ border-radius:4px a
   font-weight:700, žádná nová paleta ani tvar. Jen padding/font-size je tady
   o kousek menší (kompaktní řádek sticky lišty) -- to je jediný rozdíl
   proti hlavnímu CTA. */
.sticky-buybar__cta .add-form__btn{
  border-radius:4px;background:var(--cta);color:var(--cta-ink);font-weight:700;
  padding:9px 18px;font-size:14px;white-space:nowrap;
}
.sticky-buybar__cta .add-form__btn:hover{background:var(--cta-hover)}
@media(max-width:640px){
  .sticky-buybar__inner{padding:7px 14px;gap:8px}
  .sticky-buybar__img{display:none}
  .sticky-buybar__body{max-width:38%}
  .sticky-buybar__stock{display:none}
  .sticky-buybar__price .price-now{font-size:15px}
  .sticky-buybar__cta .add-form__btn{padding:8px 14px;font-size:13px}
}

/* Archivní detail „zmizelo u dodavatele" – žádný nákupní CTA, jen výrazné
   upozornění o nedostupnosti. Dědí .buybox vzhled (bez rámečku). */
.pdp__unavailable-title{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--muted)}
.pdp__unavailable-hint{margin:0;font-size:13.5px;color:var(--muted)}

/* Vizuální -/+ stepper kolem množství + širší tlačítko Koupit (styl inComputer).
   Specificita .add-form.add-form--stepper (2 třídy) musí přebít pozdější
   .add-form{align-items:center} níže v souboru -- jinak stepper zůstane
   nízký (jen podle obsahu) vedle vysokého tlačítka Koupit. */
.add-form.add-form--stepper{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-top:4px}
.qty-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:0 0 auto}
.qty-stepper__btn{width:38px;border:0;background:#f5f7f8;color:#33424a;font-size:19px;line-height:1;cursor:pointer}
.qty-stepper__btn:hover{background:#e9edee}
.qty-stepper__input{width:46px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:15px;-moz-appearance:textfield}
.qty-stepper__input::-webkit-inner-spin-button,.qty-stepper__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.add-form__btn--wide{flex:0 0 auto;min-width:150px;padding:13px 20px;font-size:16px;font-weight:700}
/* Fotoaparát ikonka vlevo před textem -- JEN u tlačítek, která ji dostanou
   (viz shop_cta_scroll_link() $iconSvg param, aktuálně jen "Vybrat kus ↓"),
   ostatní CTA (.add-form__btn--wide bez téhle třídy) beze změny. Tlačítko
   je jinak `.btn{display:inline-block}` (text se jen centruje) -- inline-flex
   + align-items:center tady zarovná ikonu a text na stejnou osu, gap dělá
   normální mezeru mezi nimi (ne nalepené). */
/* .buybox .add-form__btn.add-form__btn--icon (3 třídy) kvůli specificitě --
   musí přebít ".buybox .add-form__btn,.buybox .btn--block{display:inline-block}"
   (2 třídy, viz výš) -- jinak by tenhle odkaz jako flex-item svého rodiče
   (.add-form.add-form--stepper{display:flex} výš) zblokovatěl (blockification)
   na obyčejný "block" a ikonka+text by se slily bez gapu/zarovnání. */
.buybox .add-form__btn.add-form__btn--icon{display:inline-flex;align-items:center;gap:7px}
.add-form__btn--icon svg{flex:0 0 auto}
/* Neaktivní "rezervace místa" tam, kde stepper funkčně nedává smysl (jeden
   konkrétní kus) nebo je disabled -- STEJNÝ box (šířka/border/radius) jako
   živý .qty-stepper, jen neviditelný. Díky tomu CTA tlačítko vedle něj
   začíná na identické ose X jako u řádků se skutečným stepperem, i když se
   nic neovládá. visibility (ne display:none) -- box si drží rozměr i výšku
   (stretchuje se stejně přes align-items:stretch na .add-form--stepper). */
.qty-stepper--ghost{visibility:hidden}
@media(max-width:480px){
  .add-form--stepper{flex-direction:column;align-items:stretch}
  .qty-stepper{align-self:flex-start}
  .qty-stepper--ghost{display:none} /* na mobilu (sloupcově) rezervace místa nedává smysl -- tlačítko je stejně na celou šířku */
}

/* BUYBOX (nákupní box na detailu produktu, styl inComputer) -- tlačítko
   Koupit světle zelené s tmavým textem, hranaté/lehce zaoblené rohy, širší
   -/počet/+ se třemi rovnoměrnými částmi ve stejné výšce jako tlačítko.
   Scoped na .buybox, aby se netklo tlačítek jinde (košík, účet, checkout
   používají stejnou .btn třídu se svým vzhledem). Platí stejně pro box
   bez variant (.buybox > .add-form) i s variantami (.variant-row__cta
   uvnitř .buybox .variant-rows), viz product.php. */
.buybox .btn{border-radius:4px;background:var(--cta);color:var(--cta-ink)}
.buybox .btn:hover{background:var(--cta-hover)}
/* JEDNO komponentové pravidlo pro VŠECHNA CTA nákupního bloku -- se
   stepperem ("Koupit"), bez stepperu (jediný dostupný kus varianty --
   "Koupit") i prostý odkaz ("Koupit ↓" / "Vybrat kus ↓" -- .btn--block).
   Žádné full-width/calc větve podle kontextu: kompaktní tlačítko o pevné
   min. šířce, které roste jen s vlastním textem (delší "Vybrat kus ↓" je
   o pár px širší než krátké "Koupit", ale vizuálně stejný typ tlačítka).
   .btn--block base ({display:block;width:100%}, používá se i mimo detail
   produktu -- košík/checkout/přihlášení) je tu záměrně přebitý jen uvnitř
   .buybox. .add-form__btn je základní třída na KAŽDÉM tlačítku ze
   shop_add_to_cart_form() bez ohledu na stepper, viz helpers.php. */
.buybox .add-form__btn,
.buybox .btn--block{display:inline-block;width:auto;min-width:160px;text-align:center;padding:15px 22px;font-size:17px;font-weight:700}
.buybox .add-form--stepper{gap:12px}
.buybox .qty-stepper{border-radius:4px;width:112px}
.buybox .qty-stepper__btn{flex:1 1 0;width:auto;font-size:20px}
.buybox .qty-stepper__input{flex:1 1 0;width:auto;font-size:16px}

/* Seznam prodejných podproduktů/variant v nákupním boxu -- jeden řádek za
   každou aktuálně prodejnou variantu (Grade/podprodukt), viz product.php.
   Bez vlastní karty (border/radius/background) -- to byl skutečný zdroj
   dvou zaoblených rámečků kolem Grade B / Grade A- (ne .variant níž na
   stránce). Řádky odděluje jen jemná 1px linka, žádný box. Platí globálně
   (žádný media-query breakpoint border/radius vrací zpět). */
.variant-rows{display:flex;flex-direction:column}
.variant-row{border:0;border-radius:0;background:transparent;padding:14px 0}
.variant-row:first-child{padding-top:0}
.variant-row + .variant-row{border-top:1px solid var(--line);margin-top:0}
/* Nadpis Grade + krátká spec (jediná část, která u Grade řádku existuje
   navíc oproti klasickému buyboxu) -- sklad/cena/CTA pod tím používají
   přesně stejný markup jako klasický buybox (.pdp__stock-row/.buybox__price
   /.add-form), viz sdílený partial templates/_offer-box.php. */
.variant-row__info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:13.5px}
.variant-row__grade{font-weight:700;color:var(--ink)}
.variant-row__spec{color:var(--muted)}
/* Šířka/výška CTA -- viz jedno sdílené pravidlo ".buybox .add-form__btn,
   .buybox .btn--block" výš, žádná zvláštní větev pro Grade řádky. Tady jen
   dorovnání horního odsazení (cena nad tím už má vlastní margin-bottom). */
.variant-row__cta .add-form,.variant-row__cta .add-form--stepper,.variant-row__cta .btn--block{margin-top:0}

/* Mobil/tablet (<=820px, STEJNÝ breakpoint jako jednosloupcový .pdp__top
   výš) -- celý nákupní blok (sklad + cena + qty/CTA) zarovnaný doprava
   jako JEDEN celek přes align-items:flex-end na .buybox/.variant-row,
   NE jednotlivé prvky zvlášť (cena/tlačítko/qty se nikde neposouvají
   samostatně vlastním marginem). padding-right:10px na .buybox dává
   požadovanou ~10px rezervu mezi pravým okrajem CTA a pravým okrajem
   dostupného obsahu (ten už má svůj gutter z .wrap/.pdp padding, viz
   výš -- tohle je DALŠÍCH 10px navíc uvnitř něj).
   Platí stejně pro klasický buybox bez variant (přímé děti .buybox) i
   pro Grade řádky (.variant-row uvnitř .buybox .variant-rows) -- jeden
   sdílený princip, žádná duplicitní logika/markup. Desktop (>820px)
   beze změny -- žádné pravidlo tady nemá efekt nad breakpointem. */
@media(max-width:820px){
  .buybox{display:flex;flex-direction:column;align-items:flex-end;padding-right:10px}
  .buybox .variant-rows{align-self:stretch}
  .buybox .pdp__stock-row,
  .buybox .buybox__price{justify-content:flex-end}
  .buybox .price-exvat{text-align:right}
  .variant-row{display:flex;flex-direction:column;align-items:flex-end}
  .variant-row__info{justify-content:flex-end}
  /* Qty + CTA zůstávají v JEDNOM řádku (ne sloupcově jako dřív u <=480px
     -- viz zrušené flex-direction:column níž), jen kompaktnější. Ghost
     placeholder (rezervace místa pro zarovnání CTA u řádků bez skutečného
     stepperu) se vrací do hry stejně jako na desktopu, protože zarovnání
     zprava teď záleží na skutečné šířce řádku, ne na sloupcovém layoutu. */
  /* .buybox>.add-form.add-form--stepper (3 třídy) kvůli specificitě --
     musí přebít ".buybox > .add-form{justify-content:flex-start}" níž v
     souboru (desktop, beze změny), který má stejnou specificitu jako
     obyčejné ".buybox .add-form--stepper" a je v souboru PO tomhle bloku. */
  .buybox .add-form--stepper,
  .buybox > .add-form.add-form--stepper{flex-direction:row;align-items:stretch;justify-content:flex-end}
  .buybox .qty-stepper--ghost{display:inline-flex}
  /* Na velmi úzkých šířkách (~320-360px), kde se qty+CTA nevejdou na jeden
     řádek a zabalí se (flex-wrap na .add-form--stepper výš), by wrapper
     .variant-row__cta/.add-form bez explicitní šířky spadl na celou
     dostupnou šířku (shrink-to-fit dvouřádkového obsahu = available width)
     -- justify-content:flex-end na .add-form--stepper výš drží tlačítko u
     pravého okraje i v tom případě, tohle jen totéž pro .variant-row__cta
     jako celek, ať náhodou nezůstane 100%-width blok zarovnaný doleva. */
  .variant-row__cta{align-self:stretch;display:flex;justify-content:flex-end}
  /* Kompaktnější CTA jen na mobilu/tabletu -- STEJNÁ zelená/radius/hover
     (viz .buybox .btn výš), jen menší rozměry (~44px výška místo ~50px,
     font 15px místo 17px) a bez pevné min-width 160px. */
  .buybox .add-form__btn,
  .buybox .btn--block{min-width:0;padding:12px 18px;font-size:15px}
  /* Qty stepper kompaktnější (menší šířka/font), pořád pohodlně klikatelný
     prstem -- 34px tlačítka jsou přes flex:1 1 0 dost velká na dotyk. */
  .buybox .qty-stepper{width:96px;align-self:stretch}
  .buybox .qty-stepper__btn{font-size:17px}
  .buybox .qty-stepper__input{font-size:14px}
}

.specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.specs li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.specs li:last-child{border-bottom:0;padding-bottom:0}
.specs span{color:var(--muted)}
.specs--inline{margin-top:10px}

.pdp__section{margin-top:34px}
.pdp__section h2{font-size:20px;border-bottom:2px solid var(--line);padding-bottom:6px}
/* Název produktu pod nadpisem "Parametry" (STEJNÝ display name jako H1 nahoře,
   viz $productDisplayName v templates/product.php) -- menší než H1, ale pořád
   dobře čitelný, tmavá barva jako ostatní nadpisy webu. Mezera dole ho oddělí
   od "TECHNICKÁ SPECIFIKACE" (.params h4) pod ním. */
.pdp__params-name{margin:10px 0 20px;font-size:19px;font-weight:700;color:var(--ink);line-height:1.3}
/* Jen sekce Parametry -- větší odsazení posledního boxu od spodního konce
   BÍLÉ content plochy (.pdp)/patičky, hlavně na detailech BEZ marketingových
   bloků a BEZ navazující sekce (Konkrétní kusy/Vyberte stav/Varianty), kde
   je Parametry úplně poslední obsah .pdp.
   ZÁMĚRNĚ padding-bottom, NE margin-bottom: .pdp (bílý wrapper) nemá vlastní
   padding-bottom/border-bottom, takže margin-bottom posledního potomka by
   (CSS margin collapsing) "propadl" skrz .pdp ven -- mezera by pak vznikla
   AŽ za bílou plochou (v šedém pozadí stránky), ne uvnitř ní, a poslední box
   parametrů by tak vizuálně zůstal nalepený na spodní hranu bílé plochy i
   přes nastavený margin (ověřeno computed style vs. skutečný vykreslený
   gap). Padding se nekolapsuje, takže mezera je vždycky vidět uvnitř .pdp.
   Neplatí pro ostatní .pdp__section (Konkrétní kusy/Vyberte stav/...), aby
   se neposunuly jiné sekce. Horní mezera (margin-top výš), grid parametrů
   ani velikost boxů (.specs, viz _params.php) beze změny. */
.pdp__section--params{padding-bottom:56px}

/* modelové marketingové bloky (product_model_marketing_blocks) */
/* Jen desktop/tablet (mobil ≤640px beze změny) -- stejné boční odsazení
   celé sekce "Přednosti modelu" jako u Parametry/Vyberte stav (třídu),
   ať nesedí na hraně obsahové plochy. Padding na wrapperu sekce
   (.pdp__model-marketing), ne na jednotlivých blocích -- obsah, pořadí,
   obrázky ani responzivní přepnutí na řádek (760px) se nemění. */
@media(min-width:641px){
  .pdp__model-marketing{padding-left:16px;padding-right:16px}
}
.model-blocks{display:flex;flex-direction:column;gap:28px;margin-top:18px}
.model-block{display:flex;flex-direction:column;gap:18px}
/* max-height + object-fit:contain -- bez tohohle portrétové produktové
   fotky (vysoké/úzké, viz galerie) roztahovaly celý blok na >1000px výšky
   (width:100% + height:auto = výška podle přirozeného poměru stran, žádný
   strop). contain nikdy neořízne ani nedeformuje, jen fotku "zmenší do
   krabice" -- audit "MARKETING BLOK CIK-CAK S FOTKAMI". */
.model-block__media img{width:100%;max-height:360px;object-fit:contain;border-radius:12px;display:block;margin:0 auto}
.model-block__body h3{margin:0 0 8px;font-size:18px}
.model-block__body .rte{max-width:none}
@media (min-width:760px){
  .model-block{flex-direction:row;align-items:center}
  .model-block--image_right{flex-direction:row}
  .model-block--image_left{flex-direction:row-reverse}
  .model-block--image_right .model-block__media,
  .model-block--image_left .model-block__media{flex:0 0 42%;max-width:42%}
  .model-block--image_right .model-block__body,
  .model-block--image_left .model-block__body{flex:1 1 auto}
  .model-block--wide{flex-direction:column}
  .model-block--wide .model-block__media{max-width:100%}
}

/* variants -- bez rámečků (ani vnější kolem skupiny, ani kolem jednotlivých
   Grade variant); jednotlivé varianty odděluje jen jemná 1px linka nahoře
   (ne box), obsah je zarovnaný stejně jako h2 "Vyberte stav (třídu)" nad ním.
   Platí globálně (desktop/tablet/mobil), žádný media-query rozdíl. */
.variants{display:flex;flex-direction:column}
.variant{border:0;border-radius:0;background:transparent;padding:20px 0}
.variant:first-child{padding-top:0}
.variant + .variant{border-top:1px solid var(--line)}
/* Podbarvení CELÉ skupiny kusů podle stavu (is-grade-a/b/c, přidané na
   .variant v templates/product.php) -- STEJNÁ barevná rodina/logika jako
   kolečka/badge stavu (shop_grade_badge_class(): A/A- zelená, B žlutá, C
   červená), jen o dost světlejší odstín (--section-grade-*-bg/border v
   :root výš) -- velká plocha pozadí musí být jemnější než malé kolečko/
   badge, ty barvu NEMĚNÍ (pořád čtou --badge-grade-*). Stejný vzor jako
   existující .units-section níž (jemné pozadí + border + radius + padding
   kolem celého bloku u produktu bez variant) -- jen barva podle gradu místo
   pevné tyrkysové. Vlastní ohraničení celého boxu nahrazuje "border-top"
   mezi .variant výš (ten by na barevném pozadí vypadal jako zbytná dvojitá
   linka) -- oddělení sousedních skupin řeší margin-top. Obsah uvnitř
   (bubliny/cena/CTA) se NEMĚNÍ, jen pozadí wrapperu.
   Spodní padding (22px, jen lehce větší než horních 20px) -- ať poslední
   karta uvnitř bloku nekončí natvrdo u spodní hrany podbarvení (nejvíc
   vidět u žlutého bloku), ale mezera zůstává decentní/malá, ne nápadná.
   Navíc malý margin-bottom jen na POSLEDNÍ skupině (:last-child) -- ať
   CELÝ barevný blok nekončí natvrdo hned u další části stránky/patičky.
   Mezi sousedními skupinami (ne poslední) žádný margin-bottom není -- .variants
   výš je flex kontejner (display:flex), takže by se margin-top/margin-bottom
   sousedů SČÍTAL (flex položky margin nekolabují jako běžné bloky), ne
   sbalil -- proto zůstává jen margin-top na každé skupině (dosavadní ~20px
   mezera mezi skupinami beze změny) a margin-bottom navíc POUZE na
   poslední, kde už není s čím kolidovat. */
.variant.is-grade-a,.variant.is-grade-b,.variant.is-grade-c{
  border-top:0;border-radius:12px;padding:20px 24px 22px;margin-top:20px;
}
.variant.is-grade-a:first-child,.variant.is-grade-b:first-child,.variant.is-grade-c:first-child{margin-top:0}
.variant.is-grade-a:last-child,.variant.is-grade-b:last-child,.variant.is-grade-c:last-child{margin-bottom:10px}
.variant.is-grade-a{background:var(--section-grade-a-bg);border:1px solid var(--section-grade-a-border)}
.variant.is-grade-b{background:var(--section-grade-b-bg);border:1px solid var(--section-grade-b-border)}
.variant.is-grade-c{background:var(--section-grade-c-bg);border:1px solid var(--section-grade-c-border)}
/* Mobil: 24px boční padding barevného rámu + 16-24px .unit-card padding pod
   ním zbytečně zužovaly kartu kusu (viz .unit-card níž). Zmenšit jen boční
   padding rámu na malých šířkách, ať karta uvnitř využije skoro celou šířku
   -- barva/border/radius/pořadí obsahu beze změny, jen mobilní spacing. */
@media(max-width:640px){
  .variant.is-grade-a,.variant.is-grade-b,.variant.is-grade-c{padding:14px 10px 16px}
}
.variant__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.variant__head h3{margin:0;font-size:17px}
.variant__price{display:flex;align-items:baseline;gap:8px}
.variant__price .price-now{font-size:20px}

.params{margin-top:14px}
.params h4,.units-section h4{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 8px}
/* Jen desktop/tablet (mobil ≤640px beze změny) -- CELÝ blok Parametry
   (nadpis "Parametry" + "TECHNICKÁ SPECIFIKACE" + tabulky) odsazený stejně
   zleva i zprava jako jeden celek, ať nezačíná na hraně obsahové plochy.
   Padding na úrovni sekce (.pdp__section--params), ne na .params samotném,
   aby h2 "Parametry" mělo STEJNOU levou/pravou linii jako obsah pod ním. */
@media(min-width:641px){
  .pdp__section--params{padding-left:16px;padding-right:16px}
}

/* "Vyberte stav (třídu)" / "Varianty" -- stejné boční odsazení celé sekce
   jako u Parametry (viz výše), jen desktop/tablet. */
@media(min-width:641px){
  .pdp__section--variants{padding-left:16px;padding-right:16px}
}
/* Parametry jako tematické bloky s tabulkou (styl inComputer): 2 sloupce na
   desktopu, 1 na tabletu/mobilu. Prázdné skupiny/hodnoty se vůbec nevykreslí
   (viz shop_group_attributes()/_params.php) -- jednotné pro produkty se
   i bez variant/konkrétních kusů, žádné bubliny. */
.params__groups{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.params__group{border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden}
/* Nadpis skupiny ("Obecné informace", "Displej", ...) -- normální tmavá
   barva textu jako ostatní nadpisy webu (žádná tyrkysová), větší a
   výraznější než dřív (13px -> 16px), ať se skupiny v tabulce čitelně
   oddělí od samotných řádků parametrů. */
.params__group-title{margin:0;padding:10px 16px;font-size:16px;font-weight:700;color:var(--ink);background:var(--card);border-bottom:1px solid var(--line)}
.params__table{width:100%;border-collapse:collapse}
.params__table tr{border-bottom:1px dashed var(--line)}
.params__table tr:last-child{border-bottom:0}
/* Zebra striping -- jemné, ne výrazné pruhy: liché řádky velmi světle šedé,
   sudé bílé. Centrálně přes :nth-child, žádné inline styly ani výjimky
   pro jednotlivé skupiny parametrů. */
.params__table tr:nth-child(odd){background:#f7f8f9}
.params__table tr:nth-child(even){background:#ffffff}
.params__table th,.params__table td{padding:7px 16px;font-size:14px;text-align:left;font-weight:400;vertical-align:top}
.params__table th{color:var(--muted);width:52%}
.params__table td{font-weight:700;color:var(--ink)}
@media(max-width:760px){
  .params__groups{grid-template-columns:1fr}
}

/* konkrétní fyzické kusy – vizuálně odlišený blok */
.units-section{margin-top:18px;background:#f2fbfc;border:1px solid #cfeef1;border-radius:12px;padding:20px 24px 24px}
.units-section__hint{font-size:13px;color:#4b5563;margin:0 0 12px}

/* Hlavička sekce konkrétních kusů: vlevo výrazný nadpis + podtitulek,
   vpravo Grade + počet kusů. Žádná cena ani záruka – ty patří ke konkrétnímu kusu. */
.units-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 24px}
.units-header__intro{min-width:0}
.units-header__title{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:var(--ink)}
/* Lehké, decentní zvýraznění -- ne banner/upozornění, jen vyšší font-weight
   a tmavší barva. Barva NENÍ pevná (žádný samostatný modrý/tyrkysový
   akcent) -- ladí se STEJNOU barevnou rodinou jako podbarvení skupiny
   (.variant.is-grade-a/b/c níž), jen výrazně tmavší odstín pro čitelnost --
   STEJNÉ --badge-grade-*-color proměnné, jaké už používá text badge stavu
   (žádná nová paleta). Bez gradu (negraded varianty) zůstává neutrální
   --muted jako dřív. Beze změny velikosti/layoutu, žádná ikona. */
.units-header__sub{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--muted)}
.variant.is-grade-a .units-header__sub{color:var(--badge-grade-a-color)}
.variant.is-grade-b .units-header__sub{color:var(--badge-grade-b-color)}
.variant.is-grade-c .units-header__sub{color:var(--badge-grade-c-color)}
/* Grade badge (.pdp__tag + chip--grade-*, viz product.php) VEDLE zeleného
   "Skladem X kusů" (.stock.stock--in) -- VŽDY na jednom řádku, na všech
   šířkách (extra small/mobil/tablet/desktop), nikdy pod sebou. Celá dvojice
   zůstává zarovnaná doprava (justify-content:flex-end) v rámci hlavičky
   skupiny. flex-wrap:nowrap + white-space:nowrap na obou dětech (badge má
   nowrap už z .pdp__tag) garantuje, že se to nezalomí -- gap se na
   nejužších šířkách jen mírně zmenší (viz media query níž), ať je vždycky
   dost místa. */
.units-header__meta{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
/* Menší než bublina stavu vedle ní (.pdp__tag: 14px desktop / 13px mobil,
   viz níž) -- doplňková informace, ne rovnocenný/dominantní prvek. */
.units-header__count{font-size:12px}
@media(max-width:400px){
  .units-header__meta{gap:6px}
}
@media(max-width:560px){
  .units-header{flex-direction:column}
  .units-header__meta{justify-content:flex-start;text-align:left}
}

/* ---------- Konkrétní kus jako "hero-like" karta (.unit-card) ----------
   Stejná vizuální DNA jako hlavní horní část produktu (.pdp__top): galerie
   přes STEJNÝ sdílený _gallery.php engine (viz komentář tam), cenový blok
   přes STEJNOU .buybox__price třídu jako hlavní nákupní box, jen s REÁLNÝMI
   fotkami místo katalogových. Víc kusů ve stejné stavové skupině = víc
   .unit-card bloků pod sebou (viz .unit-rows), každý samostatný a úplný.
   Desktop: 3 sloupce galerie|info|koupě. Tablet (<=900px): galerie+info
   nahoře vedle sebe, nákupní blok na celou šířku pod tím. Mobil (<=560px):
   1 sloupec, přesně v pořadí foto -> texty -> cena/tlačítko (DOM pořadí). */
.unit-rows{display:flex;flex-direction:column;gap:28px;margin-top:18px}
.unit-card{display:grid;grid-template-columns:340px minmax(0,1fr) 260px;gap:28px;
  align-items:start;background:#fff;border:1px solid #d7e9eb;border-radius:14px;padding:24px}
.unit-card--reserved{background:#fbfaf5;border-color:#e7e3cf}
.unit-card--sold{opacity:.7}

/* vlevo: galerie -- .gallery/.gallery__main/.thumb apod. jsou beze změny
   (stejné jako .pdp__gallery nahoře), tady jen omezíme šířku sloupcem gridu. */
.unit-card__gallery{min-width:0}
.unit-card__no-photo{width:100%;height:100%;
  background:repeating-linear-gradient(45deg,#f1f5f6,#f1f5f6 8px,#e8eef0 8px,#e8eef0 16px)}

/* uprostřed: název, kód kusu, chip bubliny (baterie + stručné parametry
   přes shop_unit_spec_chips()), popis stavu konkrétního kusu */
.unit-card__info{display:flex;flex-direction:column;gap:10px;min-width:0}
.unit-card__name{margin:0;font-size:18px;font-weight:700;line-height:1.3;color:var(--ink)}
.unit-card__code{margin:0;font-size:14px}
.unit-card__label{font-size:13px;color:var(--muted)}
.unit-card__code strong{font-size:15px;letter-spacing:.01em}
.unit-card__status-badge{margin-left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px}
.unit-card__status-badge--reserved{background:#fef3d8;color:#8a5a00}
.unit-card__status-badge--sold{background:#fce8e8;color:#7a2020}
/* Bubliny -- STEJNÁ .pdp__tag komponenta (ikona+text pilulka) jako horní
   ikonové štítky nad cenou (product.php .pdp__tags), tedy STEJNÝ vizuální
   jazyk jako hlavní produktová část, žádná nová paleta/tvar. Jen o kousek
   menší mezera a povolené zalomení do víc řádků (na mobilu/užší kartě). */
.unit-card__chips{display:flex;gap:8px;flex-wrap:wrap}
.unit-card__desc{margin-top:4px;border-top:1px dashed #d7e9eb;padding-top:12px}
.unit-card__desc-h{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.unit-card__desc p{margin:0;font-size:14px;color:#4b5563;line-height:1.6}

/* vpravo: nákupní blok -- STEJNÁ typografie ceny jako hlavní buybox
   (.buybox__price/.price-now přes shop.css výš), jen vlastní karta/padding
   a vlastní (o něco výraznější) CTA tlačítko ve stejné --cta paletě. */
.unit-card__buy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  background:#f6fbfb;border:1px solid #dcecee;border-radius:12px;padding:20px}
.unit-card__grade{font-size:14px;font-weight:700;color:var(--ink)}
.unit-card__stock{font-size:14px;font-weight:700;color:#0a7d32}
.unit-card__stock--res{color:#8a5a00}
.unit-card__stock--sold{color:#7a2020}
.unit-card__warranty{margin:0;font-size:13px;color:var(--muted)}
.unit-card__price{margin:6px 0 4px}
.unit-card__price .price-now{font-size:26px}
.unit-card__buy .add-form{margin:4px 0 0;display:block;width:100%}
.unit-card__buy .add-form__btn{display:block;width:100%;text-align:center;padding:14px 20px;font-size:16px;font-weight:700}
/* "Přidat do košíku" (konkrétní kus) stejný vizuál jako zelené CTA v hlavním
   buyboxu (barva, radius, typografie) -- scoped mimo .buybox, ať se nedotkne
   základní tyrkysové .btn v košíku/účtu/checkoutu. Kompozitní selektor
   .btn.add-form__btn kvůli specificitě, ať bezpečně přebije
   .unit-card__buy .add-form__btn bez ohledu na pořadí v souboru. */
.unit-card__buy .btn.add-form__btn{border-radius:4px;background:var(--cta);color:var(--cta-ink)}
.unit-card__buy .btn.add-form__btn:hover{background:var(--cta-hover)}
.unit-card__resnote{font-size:11px;color:var(--muted);margin-top:2px}
.unit-card__muted{font-size:12px;color:var(--muted)}

@media(max-width:900px){
  .unit-card{grid-template-columns:280px minmax(0,1fr);
    grid-template-areas:"gallery info" "buy buy";gap:20px;padding:20px}
  .unit-card__gallery{grid-area:gallery}
  .unit-card__info{grid-area:info}
  .unit-card__buy{grid-area:buy;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px 28px}
  .unit-card__buy .unit-card__price{margin:0}
  .unit-card__buy .add-form{width:auto;flex:0 0 auto}
  .unit-card__buy .add-form__btn{width:auto;min-width:180px}
}
@media(max-width:640px){
  .unit-card{grid-template-columns:1fr;grid-template-areas:none;gap:14px;padding:10px}
  .unit-card__gallery,.unit-card__info,.unit-card__buy{grid-area:auto}
  .unit-card__buy{flex-direction:column;align-items:stretch;padding:14px}
  .unit-card__buy .add-form{width:100%}
  .unit-card__buy .add-form__btn{width:100%}
}

/* jednoduchý lightbox pro reálné fotky kusu – bez externí knihovny */
body.lightbox-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:24px;background:rgba(15,20,24,.86)}
.lightbox[hidden]{display:none}
.lightbox__stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:calc(100% - 120px);max-height:100%}
.lightbox__img{max-width:100%;max-height:calc(100vh - 90px);object-fit:contain;border-radius:6px;background:#fff}
.lightbox__count{color:#e5e7eb;font-size:13px;letter-spacing:.03em}
.lightbox__btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;border-radius:999px;transition:background .15s}
.lightbox__btn:hover{background:rgba(255,255,255,.25)}
.lightbox__nav{width:48px;height:48px;font-size:30px;line-height:1}
.lightbox__close{position:absolute;top:16px;right:16px;width:40px;height:40px;font-size:26px;line-height:1}
@media(max-width:560px){
  .lightbox{padding:12px;gap:4px}
  .lightbox__stage{max-width:calc(100% - 90px)}
  .lightbox__nav{width:40px;height:40px;font-size:26px}
}

/* ---------- Centrální stavový modal (Stav A/A-/B/C) ----------
   JEDNA komponenta pro celý web (viz templates/footer.php + shop.js
   data-grade-trigger listener). Stejný vzor jako .lightbox výš (fixed
   overlay, flex-centered panel, body scroll-lock), vlastní z-index/třídy,
   ať se obě komponenty nikdy nepletou/nekolidují. Barvy stavu (kolečko
   uvnitř .pdp__tag-dot) beze změny -- modal žádnou novou paletu nezavádí,
   jen text v bílém panelu. */
body.grade-modal-open{overflow:hidden}
.grade-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(17,24,39,.55)}
.grade-modal[hidden]{display:none}
.grade-modal__backdrop{position:absolute;inset:0}
.grade-modal__panel{position:relative;background:#fff;border-radius:14px;max-width:440px;width:100%;
  max-height:calc(100vh - 40px);overflow-y:auto;padding:28px 24px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.grade-modal__close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;background:transparent;
  border-radius:50%;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.grade-modal__close:hover{background:var(--bg)}
.grade-modal__title{margin:0 0 10px;font-size:20px;font-weight:700;color:var(--ink);padding-right:30px}
.grade-modal__short{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.grade-modal__bullets{margin:0 0 16px;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.grade-modal__bullets li{margin-bottom:3px}
.grade-modal__unit{margin:0 0 16px;padding:12px 14px;background:var(--bg);border-radius:10px}
.grade-modal__unit h3{margin:0 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.grade-modal__unit p{margin:0;font-size:13.5px;color:var(--ink);font-weight:600}
.grade-modal__more{display:inline-block;font-size:13.5px;font-weight:600;color:var(--brand-dark)}
@media(max-width:480px){
  .grade-modal{padding:12px}
  .grade-modal__panel{padding:24px 18px 20px}
}

/* ---------- Uvítací modal po auto-registraci při objednávce ----------
   JEDNA instance pro celý web (viz templates/footer.php + shop.js
   data-welcome-modal listener). STEJNÝ vizuální vzor jako .grade-modal
   výš (fixed overlay, flex-centered panel, body scroll-lock), vlastní
   třídy/z-index ať se komponenty nepletou. Zobrazí se JEDNOU, hned po
   redirectu na homepage po registraci/auto-registraci (one-shot session
   flag, viz shop_welcome_modal_take() v app/helpers.php). */
body.welcome-modal-open{overflow:hidden}
.welcome-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(17,24,39,.55)}
.welcome-modal[hidden]{display:none}
.welcome-modal__backdrop{position:absolute;inset:0}
.welcome-modal__panel{position:relative;background:#fff;border-radius:14px;max-width:420px;width:100%;
  max-height:calc(100vh - 40px);overflow-y:auto;padding:28px 24px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25);text-align:center}
.welcome-modal__close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;background:transparent;
  border-radius:50%;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.welcome-modal__close:hover{background:var(--bg)}
.welcome-modal__title{margin:0 0 10px;font-size:21px;font-weight:700;color:var(--ink)}
.welcome-modal__text{margin:0 0 20px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.welcome-modal__cta{display:inline-block;background:var(--cta);color:var(--cta-ink);font-weight:700;
  font-size:14.5px;padding:12px 28px;border-radius:8px;text-decoration:none}
.welcome-modal__cta:hover{background:var(--cta-hover);text-decoration:none}
@media(max-width:480px){
  .welcome-modal{padding:12px}
  .welcome-modal__panel{padding:24px 18px 20px}
}

.rte{max-width:80ch;color:#1f2937}

.notfound{text-align:center;padding:40px 0}
.btn{display:inline-block;background:var(--brand);color:#fff;font-weight:600;padding:10px 20px;border-radius:999px}
.btn:hover{background:var(--brand-dark);text-decoration:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-dark);color:#e5e7eb;margin-top:40px}
.site-footer__inner{display:grid;grid-template-columns:2fr 1.5fr 1.5fr;gap:24px;padding-top:26px;padding-bottom:18px}
@media(max-width:760px){.site-footer__inner{grid-template-columns:1fr}}
.site-footer h3,.site-footer h4{color:#fff;margin-bottom:8px;font-size:16px}
.site-footer p{color:#cbd5e1;font-size:14px}
.footer-links{list-style:none;padding:0;margin:0;font-size:14px}
.footer-links li{margin-bottom:4px}
.footer-links a{color:#e5e7eb}
.footer-links a:hover{color:var(--brand)}
.site-footer__bottom{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid #35465e;padding-top:12px;padding-bottom:16px;font-size:12px;color:#9ca3af}

/* =====================================================================
   KOŠÍK / OBJEDNÁVKA
   ===================================================================== */
/* Hranaté tlačítko (jen malé zaoblení, STEJNÝ 8px radius jako ostatní
   shop tlačítka/ovládací prvky -- search input, filtry, .card__cta, viz
   shop.css výš), NE pill/ovál jako dřív (border-radius:999px). Ikona +
   text + badge jsou tři flex-itemy s vlastní mezerou (gap) -- badge tak
   nikdy není "nalepený" na text ani na hraně tlačítka. */
.nav-cart{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#eef6f7;
  color:#0f6b72;
  border:1px solid #d5ebed;
  border-radius:8px;
  padding:8px 14px;
  font-weight:600;
  font-size:14px;
}
.nav-cart__icon{display:inline-flex;flex:0 0 auto}
.nav-cart__icon svg{display:block}
.nav-cart__label{line-height:1}
/* Text „Košík" musí zůstat čitelný ve VŠECH stavech.
   Bug: na :hover ho přebíjelo obecné `.site-nav a:hover{color:var(--brand)}`
   (specificita 0-2-1 > `.nav-cart:hover` 0-2-0) → brand text na brand pozadí = neviditelný.
   Fix: vyšší specificita `.site-nav a.nav-cart:…` (0-3-1) + explicitní focus/active.
   Hover/focus/active = tmavý tyrkys #0f6b72 (stejný odstín jako text v klidu) + bílý
   text → kontrast 6,2:1. Rozměry se nemění (border zůstává 1px; outline nereflouje).
   Odkaz (href) ani počítadlo (badge) se nemění. */
.site-nav a.nav-cart:hover,
.site-nav a.nav-cart:focus,
.site-nav a.nav-cart:focus-visible,
.site-nav a.nav-cart:active{
  background:#0f6b72;
  color:#fff;
  border-color:#0f6b72;
  text-decoration:none;
}
.site-nav a.nav-cart:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nav-cart__badge{display:inline-block;min-width:18px;text-align:center;background:var(--brand);color:#fff;border-radius:999px;font-size:12px;padding:0 5px;line-height:18px}
/* badge na tmavém pillu: bílý podklad + tmavý text → zůstává čitelný (6,2:1) */
.site-nav a.nav-cart:hover .nav-cart__badge,
.site-nav a.nav-cart:focus .nav-cart__badge,
.site-nav a.nav-cart:focus-visible .nav-cart__badge,
.site-nav a.nav-cart:active .nav-cart__badge{background:#fff;color:#0f6b72}

/* ---------- Hover mini-košík (desktop) ----------
   Panel je potomek .nav-cart-wrap (position:relative), zarovnaný k pravému
   okraji tlačítka Košík, position:absolute -> nezasahuje do layoutu headeru.
   Zobrazení/skrytí řídí jen JS (shop.js [data-mini-cart-*]) přes atribut
   [hidden] -- žádný :hover CSS trigger, aby panel zůstal otevřený i při
   přejezdu myší z tlačítka do panelu (viz zadání). Na mobilu (<=820px)
   je panel natvrdo vypnutý -- tlačítko Košík tam zůstává obyčejný odkaz.
   Třída kontejneru je ".cart-drop" (ne ".mini-cart") -- ".mini-cart" už v
   téhle stránce existovala jako úplně jiná komponenta (souhrn objednávky
   na checkoutu, viz ".mini-cart"/".mini-cart li"/... níže v souboru a
   templates/checkout.php) -- shodné jméno by se s ní bilo v cascade
   (stejná specificita, číst by se to muselo v pořadí definice). JS na
   téhle třídě nezávisí, řídí se výhradně [data-mini-cart-*] atributy, takže
   přejmenování nic nerozbíjí. */
.nav-cart-wrap{position:relative;display:inline-flex}
.cart-drop{
  position:absolute;
  top:100%;
  right:0;
  margin-top:10px;
  width:560px;
  max-width:calc(100vw - 32px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(17,24,39,.16),0 3px 10px rgba(17,24,39,.08);
  z-index:200;
  color:var(--ink);
}
.cart-drop[hidden]{display:none}
.cart-drop__body{padding:20px}
.cart-drop__loading,.cart-drop__error{margin:0;padding:26px 4px;text-align:center;color:var(--muted);font-size:14px}

.cart-drop__empty{text-align:center;padding:6px 4px 2px}
.cart-drop__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--bg);color:var(--brand-dark);margin-bottom:10px}
.cart-drop__empty-icon svg{width:26px;height:26px;fill:currentColor}
.cart-drop__empty-title{font-size:16px;margin:0 0 6px}
.cart-drop__empty-text{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.cart-drop__sep{border-top:1px solid var(--line);margin:16px 0}
.cart-drop__fav-title{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:0 0 10px;font-weight:700}
.cart-drop__cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cart-drop__cat{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff;transition:border-color .15s,background .15s}
.cart-drop__cat:hover{border-color:var(--brand);background:var(--bg);text-decoration:none}
.cart-drop__cat-img{width:36px;height:36px;border-radius:8px;overflow:hidden;flex:0 0 auto;background:var(--bg)}
.cart-drop__cat-img img{width:100%;height:100%;object-fit:cover;display:block}
.cart-drop__cat-name{font-size:13px;font-weight:600;line-height:1.25}

.cart-drop__issue{background:var(--off-bg);color:var(--off);font-size:12.5px;padding:8px 10px;border-radius:8px;margin-bottom:12px}
/* Seznam produktů smí dostat vlastní scroll (max-height), ať "Celkem" +
   CTA pod ním zůstanou vždy vidět i u 3+ položek -- panel jako celek nikdy
   nepřeroste přes viewport (zadání, bod 5). */
.cart-drop__list{max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-right:4px;margin-right:-4px}
.cart-drop__row{display:grid;grid-template-columns:68px 1fr auto auto;gap:14px;align-items:start}
.cart-drop__row--off{opacity:.6}
.cart-drop__row-media{width:68px;height:68px;border-radius:8px;overflow:hidden;background:var(--bg);flex:0 0 auto}
.cart-drop__row-media img{width:100%;height:100%;object-fit:contain;display:block}
.cart-drop__row-info{display:flex;flex-direction:column;gap:5px;min-width:0}
/* Jméno v širším panelu dostává dost místa, aby se zbytečně nelámalo --
   2 řádky (line-clamp) zůstávají jen jako pojistka proti opravdu dlouhým
   názvům, ne běžný stav. */
/* Barva STEJNÁ jako název produktu v běžné kartě (.card__title a/:hover
   výš v souboru) -- žádný nový odstín, jen převzaté #5f6670/#3f454c. Dřív
   tu bylo var(--ink) (skoro černá, #111827), což vizuálně nesedělo se
   zbytkem shopu (karty/výpisy nikdy název nebarví plně černě). Velikost/
   layout/line-clamp beze změny. */
.cart-drop__row-name{font-size:14px;font-weight:600;color:#5f6670;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart-drop__row-name:hover{color:#3f454c}
/* .cart-drop__row-info je flex-direction:column BEZ align-items:flex-start
   -- jméno/warn/meta-wrapper tak dál dostávají celou šířku sloupce
   (line-clamp u jména to potřebuje pro správné zalomení). */
.cart-drop__row-unit,.cart-drop__row-qty{font-size:12.5px;color:var(--muted)}
.cart-drop__row-warn{font-size:12.5px;color:var(--off)}
/* Stavový chip (Stav A/A-/B/C) + "N ks × cena" VEDLE SEBE v jednom řádku
   (dřív každé na vlastním řádku pod sebou) -- STEJNÁ .chip/.chip--grade-*
   třída jako všude jinde na shopu (viz shop_product_badges() v
   app/helpers.php), žádný nový/speciální badge styl, jen nový wrapper
   kolem obou. align-items:center (NE stretch) drží badge na jeho
   standardní malé výšce/šířce -- .chip má display:inline-flex, takže se
   sám o sobě nikdy nerozťahuje, jen předchozí column-flex rodič ho k tomu
   nutil (viz starší bugfix). flex-wrap:wrap je pojistka pro užší panel/
   dlouhé částky, gap:8px dává rozumnou mezeru mezi bublinou a množstvím. */
.cart-drop__row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Hlavní cena + cena bez DPH/režim pod ní (STEJNÉ sdílené .price-exvat/
   .price-margin třídy jako karta/PDP/plný košík výš v souboru, viz
   shop_card_price_ex_vat() v app/helpers.php) -- text-align:right drží
   všechny 3 řádky zarovnané k pravému okraji sloupce (stejně jako
   .cart-row__price na plné stránce košíku), align-self:start místo
   dřívějšího :center, ať se sloupec se 2-3 řádky nevystřeďuje uprostřed
   výšky řádku. white-space:nowrap zůstává JEN na hlavní částce (nová
   .cart-drop__row-price-main), ne na celém sloupci -- jinak by se delší
   "bez DPH" text nemohl nikdy zalomit v užším sloupci. */
.cart-drop__row-price{font-size:15px;font-weight:700;text-align:right;align-self:start}
.cart-drop__row-price-main{display:block;white-space:nowrap}
.cart-drop__row-price .price-exvat,.cart-drop__row-price .price-margin{text-align:right}
/* Křížek úplně vpravo nahoře v řádku (poslední grid sloupec, align-items:start
   na .cart-drop__row výš) -- žádná změna umístění/chování, jen souhlasí s
   vizuálem "× vpravo nahoře" ze zadání. */
.cart-drop__row-remove{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 4px;align-self:start}
.cart-drop__row-remove:hover{color:var(--off)}
.cart-drop__summary{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.cart-drop__total{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin-bottom:12px}
.cart-drop__total strong{font-size:18px}
/* "Přejít do košíku" -- STEJNÝ zelený CTA vzhled jako hlavní nákupní
   tlačítka jinde na shopu (.card__cta / .buybox .btn, viz komentáře tam):
   STEJNÉ --cta/--cta-ink/--cta-hover proměnné + border-radius:4px +
   font-weight:700, jen velikost/padding podle kompaktního (mobilního)
   rozměru .buybox .btn--block (viz @media(max-width:820px) výš v souboru),
   protože se to líp hodí do šířky dropdown panelu než plný desktopový
   rozměr buyboxu na PDP. Žádný nový/tyrkysový mini-cart styl, žádné
   spoléhání na obecné (tady mimo kontext) `.btn`/`.btn--block`. */
.cart-drop__cta{
  display:block;
  width:100%;
  text-align:center;
  border:0;
  border-radius:4px;
  background:var(--cta);
  color:var(--cta-ink);
  font-weight:700;
  font-size:15px;
  padding:12px 18px;
  cursor:pointer;
}
.cart-drop__cta:hover{background:var(--cta-hover);text-decoration:none}
.cart-drop__cta:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px}
/* Text musí zůstat tmavý (--cta-ink, STEJNĚ jako u každého jiného zeleného
   CTA na shopu -- .card__cta/.buybox .btn/sticky lišta, viz komentář výš)
   ve VŠECH stavech, ne jen v klidu. Bug: tenhle odkaz je (přes
   .nav-cart-wrap) potomek <nav class="site-nav">, kde obecné pravidlo
   `.site-nav a:hover{color:var(--brand)}` (specificita 0-2-1) přebíjelo
   `.cart-drop__cta:hover{color:...}` (0-2-0) -- text na hoveru zezelenal do
   tyrkysové/"modré" --brand barvy místo tmavé --cta-ink. STEJNÝ bug a
   STEJNÝ fix vzor, jaký už řeší `.site-nav a.nav-cart:hover` o pár řádků
   výš pro samotné tlačítko Košík -- vyšší specificita (`.site-nav a.…`)
   přes VŠECHNY stavy, aby text nikdy nezávisel na tom, jestli visitor
   zrovna hoveruje/fokusuje/kliká. */
.site-nav a.cart-drop__cta,
.site-nav a.cart-drop__cta:hover,
.site-nav a.cart-drop__cta:focus,
.site-nav a.cart-drop__cta:focus-visible,
.site-nav a.cart-drop__cta:active,
.site-nav a.cart-drop__cta:visited{
  color:var(--cta-ink);
}

@media(max-width:820px){
  /* Hover panel je desktopová věc (viz zadání) -- na mobilu se nikdy
     nezobrazí, tlačítko Košík zůstává obyčejný odkaz na stránku košíku. */
  .cart-drop{display:none!important}
}

.flashes{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.flash{border-radius:10px;padding:10px 14px;font-size:14px;border:1px solid}
.flash--success{background:var(--ok-bg);border-color:#bfe6cb;color:#0a5c28}
.flash--error{background:var(--off-bg);border-color:#e6c4c4;color:#7a2020}
.flash--info{background:#eef2f7;border-color:#d5deea;color:#33415a}

/* Produktová stránka (add-to-cart -> redirect zpět na PDP, viz templates/header.php
   $flashesToast): hláška jde MIMO document flow, ať neposouvá galerii/pravý
   sloupec. Wrapper zůstává přesně na svém původním místě v DOMu (hned pod
   headerem, před breadcrumbem) a má height:0 -- nezabírá žádnou výšku v toku;
   .flashes je uvnitř position:absolute vůči němu, takže se vizuálně objeví
   na stejném místě jako dřív, jen bez posunu obsahu pod sebou. Šířka/odsazení
   se dědí z .wrap (24px / 14px na mobilu) -- žádná nová media query.
   Jiné šablony (košík, účet, checkout, ...) tuhle třídu nedostávají a chovají
   se beze změny. */
.flashes-slot--toast{position:relative;height:0;overflow:visible;z-index:145}
.flashes-slot--toast .flashes{
  position:absolute;top:0;left:0;right:0;margin-bottom:0;
  animation:shop-toast-fade 6s ease forwards;
}
.flashes-slot--toast .flash{box-shadow:0 8px 24px rgba(0,0,0,.12)}
@keyframes shop-toast-fade{
  0%,85%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:hidden}
}
@media(prefers-reduced-motion:reduce){
  .flashes-slot--toast .flashes{animation:none}
}

.add-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.add-form__qty{width:70px;padding:8px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.add-form__btn{cursor:pointer}
/* Hlavní nákupní box: množství + tlačítko Koupit jako kompaktní skupina
   vedle sebe (počítadlo vlevo, tlačítko hned vpravo od něj s normálním
   rozestupem -- viz gap na .add-form--stepper) -- NE nataženě přes celou
   šířku a NE nalepené na pravý okraj panelu. Šířka/výška samotného
   tlačítka -- viz jedno sdílené pravidlo ".buybox .add-form__btn,
   .buybox .btn--block" výše (kompaktní, min-width, žádný calc/100%).
   Platí stejně na všech šířkách -- žádný breakpoint to nevrací. */
.buybox > .add-form{justify-content:flex-start}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn--sm{padding:7px 12px;font-size:13px}
.btn--block{display:block;text-align:center;width:100%;margin-top:12px;border:0;cursor:pointer;font-size:15px}
.buybox__hint{margin:12px 0 0;font-size:14px;color:var(--muted)}

/* "Rychlý dotaz" -- decentní odkaz s ikonkou obálky pod hlavním CTA,
   zarovnaný doprava. Vzhled zůstává prostý text (žádné pozadí/border), jen
   o něco výraznější než čistě podtržený text -- NE druhé CTA, primární je
   pořád "Přidat do košíku" (.btn/.buybox .btn beze změny). Underline jen na
   hover/focus, ne trvale -- jemnější než dřívější trvalé podtržení.
   padding na tlačítku = jen větší klikací/dotyková plocha (min ~40px výšky
   s "inline" vzhledem), NE vizuální pozadí. */
.buybox__quick-inquiry{margin:8px 0 0;text-align:right}
.quick-inquiry-open{display:inline-flex;align-items:center;gap:6px;
  padding:8px 2px;margin:0;border:0;background:none;
  font:inherit;font-size:14.5px;font-weight:500;color:var(--muted);
  text-decoration:none;cursor:pointer;vertical-align:middle}
.quick-inquiry-open__icon{flex:0 0 auto}
.quick-inquiry-open:hover,.quick-inquiry-open:focus-visible{color:var(--brand-dark);text-decoration:underline}

/* Modal "Rychlý dotaz" -- STEJNÝ vizuální vzor jako .grade-modal (overlay,
   centered panel, křížek vpravo nahoře), jen vlastní jmenný prostor ať se
   nekolidují a nezávisí na sobě. font-family:inherit explicitně na modalu
   i formulářových prvcích -- i když button/input/select/textarea{font-family:
   inherit} už platí globálně (viz pravidlo hned pod *{box-sizing:...} nahoře
   v souboru), tady je to navíc explicitní/nezávislé na tom globálním pravidle,
   ať modal spolehlivě dědí storefrontový Open Sans (viz <link> na Google Fonts
   v header.php) a ne UA výchozí font.
   POZOR: scroll-lock třída na <body> je ZÁMĚRNĚ "quick-inquiry-modal-open",
   NE "quick-inquiry-open" -- to je (jinak nesouvisející) class odkazu
   "Rychlý dotaz" (.quick-inquiry-open, viz níž). Stejný string na <body>
   by matchnul i tamní pravidlo ".quick-inquiry-open{font:inherit;...}" (class
   selektor > element selektor specificitou), což by přepsalo body{font-family:
   "Open Sans"...} zpátky na inherit/UA serif pro CELOU stránku, dokud je
   modal otevřený -- přesně tenhle bug se stal, když obě dřív sdílely stejné
   jméno. Držet tyhle dva jmenné prostory nastálo oddělené. */
body.quick-inquiry-modal-open{overflow:hidden}
.quick-inquiry-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(17,24,39,.55);font-family:inherit}
.quick-inquiry-modal[hidden]{display:none}
.quick-inquiry-modal__backdrop{position:absolute;inset:0}
.quick-inquiry-modal__panel{position:relative;background:#fff;border-radius:14px;max-width:440px;width:100%;
  max-height:calc(100vh - 40px);overflow-y:auto;padding:28px 24px 24px;box-shadow:0 12px 32px rgba(17,24,39,.18)}
.quick-inquiry-modal__close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;background:transparent;
  border-radius:50%;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center}
.quick-inquiry-modal__close:hover{background:var(--bg);color:var(--ink)}
.quick-inquiry-modal__title{margin:0 0 4px;font-size:21px;font-weight:700;line-height:1.25;color:var(--ink);padding-right:30px}
/* Produktový náhled (obrázek + název) nad formulářem -- audit "RYCHLÝ DOTAZ
   -- OBRÁZEK PRODUKTU". flex-wrap ať se na úzkém panelu (mobil) obrázek+název
   přirozeně zalomí pod sebe místo overflow, místo vlastní media query. */
.quick-inquiry-modal__product-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.quick-inquiry-modal__product-img{flex:0 0 auto;width:72px;height:72px;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}
.quick-inquiry-modal__product-img img{width:100%;height:100%;object-fit:contain}
.quick-inquiry-modal__product{flex:1 1 160px;margin:0;font-size:13.5px;line-height:1.4;font-weight:400;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

.quick-inquiry-form__row{margin-bottom:14px;display:flex;flex-direction:column;gap:4px}
.quick-inquiry-form__row label{font-size:13.5px;font-weight:600;color:var(--ink)}
.quick-inquiry-form__row input,.quick-inquiry-form__row textarea{
  width:100%;box-sizing:border-box;padding:9px 11px;font-family:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.quick-inquiry-form__row input:focus,.quick-inquiry-form__row textarea:focus{
  outline:2px solid var(--brand);outline-offset:0}
.quick-inquiry-form__row textarea{resize:vertical;min-height:80px}
.quick-inquiry-form__row.has-error input,.quick-inquiry-form__row.has-error textarea{border-color:var(--off)}
.quick-inquiry-form__error{font-size:12px;color:var(--off);min-height:14px}
.quick-inquiry-form__notice{margin:14px 0 0;padding:9px 11px;border-radius:8px;font-size:13.5px;
  background:var(--ok-bg);color:var(--ok)}
.quick-inquiry-form__notice.is-error{background:var(--off-bg);color:var(--off)}
/* Reuse STEJNÝCH tokenů jako "Přidat do košíku" (.buybox .btn -- var(--cta)/
   --cta-ink/--cta-hover), ale menší/méně nápadné (14px/padding 12px20 proti
   17px/15×22 u Přidat do košíku), ať primární CTA zůstane vizuálně silnější. */
.quick-inquiry-form__submit{display:block;width:100%;text-align:center;border:0;cursor:pointer;
  font-family:inherit;padding:12px 20px;font-size:14px;font-weight:700;border-radius:4px;
  background:var(--cta);color:var(--cta-ink)}
.quick-inquiry-form__submit:hover{background:var(--cta-hover)}
.quick-inquiry-form__submit:disabled{opacity:.6;cursor:not-allowed}

/* Honeypot -- NORMÁLNÍ input posunutý mimo viewport (ne display:none/
   visibility:hidden/type=hidden), aby ho typičtí boti při parsování DOM
   pořád viděli a vyplnili. Skutečný uživatel ho vizuálně nikdy neuvidí. */
.quick-inquiry-form__hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:480px){
  .quick-inquiry-modal{padding:0}
  .quick-inquiry-modal__panel{max-width:100%;width:100%;height:100%;max-height:100%;border-radius:0}
}

.unit__buy{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.unit__buy-note{font-size:12px;color:var(--muted)}
.variant__buy{margin-top:14px}

/* košík – rozložení */
.cart{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
/* Cart-row (grid-area:row uvnitr .cart-row) prepina na desktop 6-sloupcovy
   grid uz nad 820px (viz .cart-row media query nize), ale postranni
   souhrn (.cart__summary) ma pevnych 300px + 24px gap -- na sirkach
   ~821-1150px by to hlavnimu sloupci nechalo min nez cca 550-650px, coz
   je min, nez desktop cart-row grid potrebuje (nazev produktu se pak lame
   do 3-4 radku, karta zbytecne roste do vysky -- presne puvodni "tablet"
   bug, jen posunuty na sirsi obrazovky). Zmereno v Chrome: 900px sirky
   dava nazvu jen ~64px (4+ radky, karta 500px vysoka), teprve od cca
   1150-1200px je nazev na rozumnych 1-2 radcich. Reseni: .cart zustava
   JEDNOSLOUPCOVY (seznam nad souhrnem, plna sirka pro cart-row) az do
   1200px -- cart-row uvnitr uz ma svuj desktop jednoradkovy layout, jen
   dostava plnou sirku containeru misto zuzene o postranni panel. Az od
   1201px (typicke desktop rozlisseni 1280/1366/1440+) je sirky dost na
   oba sloupce soucasne. */
@media(max-width:1200px){.cart{grid-template-columns:1fr}}
.cart__rows{display:flex;flex-direction:column;gap:10px}
.cart-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto auto 28px;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
/* Čistě prezentační mobilní duplikát ceny (.cart-row__pricewrap-mobile v
   cart.php) -- na desktopu se vůbec nezobrazuje, originální
   .cart-row__price/__subtotal zůstávají jediné viditelné (viz base pravidla
   výš, beze změny). Přepnutí který blok je vidět dělá jen media query níž. */
.cart-row__pricewrap-mobile{display:none}
@media(max-width:820px){
  /* Predchozi pokus (sdilene grid-area + justify-self:start) drzel qty
     u leveho okraje sdilene bunky -- vizualne pod obrazkem, ne u ceny.
     Reseni: cart-row prepnuty na flex-wrap; .cart-row__pricewrap-mobile
     dostava display:contents, cimz jeho deti (unit/exvat/margin/subtotal-m)
     vstoupi PRIMO do flex-flow .cart-row (viz cart.php pro DOM strukturu --
     zadna zmena HTML). Kazdy radek ceny ma flex:1 1 100% (vynuceny vlastni
     radek), qty a subtotal-m maji flex:0 0 auto a explicitni order tesne
     za sebou -- spolecne se vejdou na posledni radek a justify-content:flex-end
     na .cart-row zarovna CELOU tuto dvojici (qty+subtotal) k pravemu okraji,
     stejne jako radky ceny nad ni (ty zabiraji 100% sirky, takze na ne
     flex-end nema vliv). */
  .cart-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:8px 14px;
    padding:10px;
  }
  .cart-row__media{order:1;flex:0 0 64px}
  .cart-row__info{order:2;flex:1 1 0%;min-width:0}
  .cart-row__price,.cart-row__subtotal{display:none}
  /* Kompaktní: menší mezery mezi řádky ceny a menší "bez DPH"/"Zvláštní
     režim" popisky, ať celý pravý blok (a tedy i řádek qty+cena) nezabírá
     víc výšky, než musí -- žádná změna hodnot/velikosti hlavní ceny a
     mezisoučtu, jen zhuštěný odstup a menší vedlejší popisky. */
  .cart-row__pricewrap-mobile{display:contents}
  .cart-row__pricewrap-mobile .cart-row__unit{order:3;flex:1 1 100%;text-align:right;font-size:15px;color:var(--ink);font-weight:600;line-height:1.2}
  .cart-row__pricewrap-mobile .price-exvat{order:4;flex:1 1 100%;text-align:right;font-size:11px;line-height:1.2}
  .cart-row__pricewrap-mobile .price-margin{order:5;flex:1 1 100%;text-align:right;font-size:11px;line-height:1.2}
  /* Qty (order:6) a mezisoucet (order:7) jsou jedine dva prvky s auto
     sirkou v tomhle radku -- proto skonci spolu na "poslednim radku" hned
     za radky ceny (ty maji flex-basis 100% a vynuti zalomeni pred nimi). */
  .cart-row__qty{order:6;flex:0 0 auto}
  .cart-row__subtotal-m{order:7;flex:0 0 auto;font-weight:700;font-size:14px;color:var(--ink);margin-top:1px}

  /* Křížek na mobilu byl 6. grid-item, takže s implicitním
     grid-auto-flow:row (3 sloupce výš) spadl do DRUHÉHO řádku vedle
     množství/ceny -- vypadalo to, jako by patřil k nim, a dole zbýval
     prázdný sloupec. Fix: position:absolute ho z grid flow úplně vyjme
     (grid layout položky mimo tok ignoruje) a umístí do pravého horního
     rohu karty -- .cart-row potřebuje position:relative jako kotvu, ALE
     JEN na tomhle breakpointu (desktop grid i pozice beze změny). Název
     dostává padding-right, ať dlouhý text nezajíždí pod křížek. */
  .cart-row{position:relative}
  .cart-row__remove{position:absolute;top:12px;right:12px;margin:0}
  .cart-row__name{display:block;padding-right:34px}
}
.cart-row--off{background:#fbf2f2;border-color:#e6c4c4}
.cart-row__media img{width:72px;height:72px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px}
/* Barva STEJNÁ jako název produktu v běžné kartě (.card__title a/:hover
   výš v souboru) -- stejný sjednocující fix jako .cart-drop__row-name
   (hover mini-košík). Dřív var(--ink) (skoro černá), teď stejný odstín
   jako karty/výpisy i header panel. Velikost/tučnost/layout beze změny. */
.cart-row__name{font-weight:600;color:#5f6670}
.cart-row__name:hover{color:#3f454c}
/* Stav/grade + nekompletnost -- STEJNÉ .chip/.pdp__tag-dot třídy jako karty
   (.card__meta/.card__meta-issue) a detail, jen zarovnané doleva (v košíku
   je info sloupec vlevo, ne pravý okraj karty) a s vlastní mezerou k jménu/
   specům. Žádná nová barevná/grade logika -- viz shop_product_badges(). */
.cart-row__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.cart-row__meta-issue{display:flex;flex-wrap:wrap;margin-top:4px}
.cart-row__spec{font-size:13px;color:#4b5563}
.cart-row__spec--muted{color:var(--muted)}
.cart-row__warn{font-size:13px;color:#7a2020;margin-top:4px}
.cart-row__price{text-align:right;font-size:13px;color:var(--muted)}
.cart-row__unit{font-size:15px;color:var(--ink);font-weight:600}
.cart-row__qty .qty-form{display:flex;gap:6px;align-items:center}
/* Stepper v košíku sdílí STEJNÉ .qty-stepper třídy/CSS jako PDP (viz výš
   ".qty-stepper" u řádku ~1723) -- žádný nový vzhled, jen o trochu nižší
   tlačítka/input, ať sedí do výšky řádku košíku (desktop i mobil). */
.cart-row__qty .qty-stepper{height:34px}
.cart-row__qty .qty-stepper__btn{width:32px;font-size:17px}
.cart-row__qty .qty-stepper__input{width:44px;font-size:14px}
.cart-row__qty-fixed{font-size:14px;color:var(--muted)}
.cart-row__subtotal{font-weight:700;text-align:right;white-space:nowrap}
.cart-row__remove button{background:none;border:0;font-size:20px;line-height:1;color:#9ca3af;cursor:pointer}
.cart-row__remove button:hover{color:#c0392b}

.cart__summary,.checkout__summary{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;position:sticky;top:16px}
.cart__summary h2,.checkout__summary h2{font-size:16px}
.sum-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;border-bottom:1px dashed var(--line)}
.sum-row--total{border-bottom:0;border-top:2px solid var(--line);margin-top:4px;padding-top:10px;font-size:17px}
.sum-row--exvat{border-bottom:0;padding-bottom:0;font-size:12px;color:var(--muted);border-top:2px solid var(--line);margin-top:4px;padding-top:10px}
/* Souhrn košíku i checkoutu (templates/cart.php, templates/checkout.php):
   "Celkem bez DPH" je součástí finálního bloku s "Celkem" -- oddělovací čára
   patří NAD "Celkem bez DPH" (výš), takže hned pod ním "Celkem" už žádnou
   vlastní čáru/mezeru nemá, jen zůstává výrazné (font-size z .sum-row--total).
   Selektor je obecný (na sousedství tříd, ne na konkrétní šabloně), takže
   platí stejně na obou stránkách bez duplicitního pravidla. */
.sum-row--exvat + .sum-row--total{border-top:0;margin-top:0;padding-top:6px}
/* Hlavní CTA souhrnu košíku ("Pokračovat k objednávce" / "Obnovit košík") --
   STEJNÝ zelený vzhled jako hlavní nákupní tlačítka jinde na shopu
   (--cta/--cta-ink/--cta-hover + border-radius:4px + font-weight:700, viz
   .card__cta / .buybox .btn / .cart-drop__cta výš v souboru), NE obecné
   `.btn`/`.btn--block` (ty tady dřív daly tyrkysový pill vzhled --
   var(--brand), border-radius:999px -- to byl ten "cyan styl" bug).
   Self-contained třída (žádná závislost na pořadí .btn/.btn--block v
   cascade), stejný princip jako .cart-drop__cta v mini-košíku. */
.cart__cta-primary{
  display:block;
  width:100%;
  text-align:center;
  margin-top:12px;
  border:0;
  border-radius:4px;
  background:var(--cta);
  color:var(--cta-ink);
  font-weight:700;
  font-size:15px;
  padding:13px 18px;
  cursor:pointer;
}
.cart__cta-primary:hover{background:var(--cta-hover);text-decoration:none}
.cart__cta-primary:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px}
/* Text drží STEJNOU tmavou --cta-ink barvu ve VŠECH stavech (klid/hover/
   focus/active/visited) -- explicitní výčet, ať se nikdy nemůže "propadnout"
   k nějakému obecnějšímu a/a:hover/a:visited pravidlu (viz stejný fix u
   .cart-drop__cta výš a u .nav-cart v headeru -- to samé riziko, jen
   preventivně ošetřené i tady, i když dnes žádné konkurenční pravidlo pro
   .cart__cta-primary neexistuje). Žádná modrá, žádná bílá. */
.cart__cta-primary,
.cart__cta-primary:hover,
.cart__cta-primary:focus,
.cart__cta-primary:active,
.cart__cta-primary:visited{
  color:var(--cta-ink);
}
.cart__cont{display:block;text-align:center;margin-top:10px;font-size:14px}
.cart__blocked{color:#7a2020;font-size:13px;margin:10px 0 0}

/* checkout */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media(max-width:860px){.checkout{grid-template-columns:1fr}}
/* Hlavní odeslávací CTA checkoutu ("Závazně objednat") -- STEJNÝ sdílený
   zelený primary styl jako .cart__cta-primary/.cart-drop__cta (--cta/
   --cta-ink/--cta-hover, border-radius:4px, font-weight:700), NE obecné
   `.btn.btn--block` (tyrkysový pill, stejný starý bug jako u ostatních
   dvou tlačítek). Tlačítko (ne odkaz) -- žádný :visited, ale i tak
   explicitní barva pro hover/focus/active, aby text nikdy neměnil odstín. */
.checkout__cta-primary{
  display:block;
  width:100%;
  text-align:center;
  margin-top:12px;
  border:0;
  border-radius:4px;
  background:var(--cta);
  color:var(--cta-ink);
  font-weight:700;
  font-size:15px;
  padding:13px 18px;
  cursor:pointer;
}
.checkout__cta-primary:hover{background:var(--cta-hover)}
.checkout__cta-primary:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px}
.checkout__cta-primary:disabled{opacity:.5;cursor:not-allowed}
.checkout__cta-primary,
.checkout__cta-primary:hover,
.checkout__cta-primary:focus,
.checkout__cta-primary:active{
  color:var(--cta-ink);
}
.fieldset{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.fieldset h2{font-size:16px;margin-bottom:12px}
/* Checkout -- JEDNA bílá karta (stejný vzor jako .auth-card u registrace),
   jednotlivé kroky uvnitř jako podbarvené .checkout__section bloky (stejný
   vzor jako .auth-card__section) místo dřívějších samostatných bílých
   .fieldset boxů na šedém pozadí stránky (audit "CHECKOUT -- JEDNA KARTA",
   2026-09-19). */
.checkout__card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(17,24,39,.05)}
.checkout__section{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;margin-bottom:16px}
.checkout__section:last-child{margin-bottom:0}
.checkout__section h2{font-size:16px;margin:0 0 12px}
/* Sbalitelná sekce "Nakupuji na firmu" -- <details>/<summary>, žádný JS
   navíc (audit "FIRMA -- SBALITELNÁ SEKCE", 2026-09-19). Stejný "+"
   chevron vzor jako .catalog-panel__item > details > summary::after výš,
   jen samostatná třída (jiný kontext/velikost). */
.checkout__section > summary{cursor:pointer;font-size:16px;font-weight:700;color:var(--ink);list-style:none;display:flex;align-items:center;gap:8px}
.checkout__section > summary::-webkit-details-marker{display:none}
.checkout__section > summary::after{content:"";width:7px;height:7px;flex:0 0 auto;margin-left:auto;border-right:2px solid #9aa3ac;border-bottom:2px solid #9aa3ac;transform:rotate(-45deg);transition:transform .15s ease}
.checkout__section[open] > summary::after{transform:rotate(45deg)}
.checkout__section[open] > summary{margin-bottom:12px}
.checkout__section > summary .muted{font-weight:400}
@media(max-width:520px){.checkout__card{padding:16px}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.grid-2{grid-template-columns:1fr}}
.grid-2__full{grid-column:1 / -1}
.addr-street-row{display:grid;grid-template-columns:2fr 1fr;gap:12px}
@media(max-width:520px){.addr-street-row{grid-template-columns:1fr}}
/* Písmo o trochu větší (dřív 13/14px) + jemně tučné názvy polí (stejný
   decentní vzor jako .auth-card .auth-form label u registrace -- 600, ne
   700), živý audit 2026-09-19. */
.checkout label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:#374151}
.checkout input,.checkout select,.checkout textarea{padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:15px;background:#fff}
.checkout input:focus,.checkout select:focus,.checkout textarea:focus{outline:2px solid var(--brand);outline-offset:0}
.checkbox{flex-direction:row!important;align-items:center;gap:8px;font-size:14px}
.checkout-errors{margin:0;padding-left:18px}
.mini-cart{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.mini-cart li{display:flex;justify-content:space-between;gap:10px;font-size:13px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.mini-cart__off{opacity:.55}
.mini-cart__q{color:var(--muted)}
.mini-cart__sum{white-space:nowrap;font-weight:600}
.checkout__note{font-size:12px;color:var(--muted);margin-top:10px}

/* ---------- Checkout: Firma / ARES lookup ---------- */
.ares-row{display:flex;gap:10px;align-items:flex-end}
.ares-row__ico{flex:0 0 auto;width:180px}
.ares-row__btn{flex:0 0 auto;white-space:nowrap;border:0;cursor:pointer}
@media(max-width:520px){.ares-row{flex-wrap:wrap}.ares-row__ico{width:auto;flex:1 1 160px}}
.ares-status{grid-column:1 / -1;margin:0;font-size:13px}
.ares-status--ok{color:var(--ok)}
.ares-status--error{color:var(--off)}

/* Tisková hlavička (logo + čistý černý nadpis) -- vidět JEN v @media print
   (viz níž), na obrazovce zůstává skrytá. Nahrazuje zelenou "Děkujeme"
   hlášku jen pro tisk, ať tam nejsou dvě různé "Děkujeme" zprávy vedle
   sebe a žádné barevné pozadí/rámeček na vytištěném dokumentu. */
.print-header{display:none}

/* potvrzení objednávky */
.order-done{background:var(--ok-bg);border:1px solid #bfe6cb;border-radius:12px;padding:16px 20px;margin-bottom:8px}
.order-done h1{color:var(--ok);font-size:18px;margin:0 0 6px}
.order-done p{margin:0;line-height:1.45}
.order-done p + p{margin-top:4px}
.order-done__number{font-size:14px;color:var(--ink)}
.order-doc__back{display:flex;justify-content:flex-end;margin-top:24px}
/* Živý audit (Etapa 5D/5, finální kontrola) -- .order-table (6 sloupců,
   nowrap na číselných buňkách) přetékala na mobilu (360-430px) o ~120px.
   Stejný bezpečný vzor jako u admin tabulek -- scroll zůstává UVNITŘ
   tabulky, stránka sama nikdy nepřeteče. Netýká se business logiky. */
.order-table-scroll{overflow-x:auto}
.order-table-scroll .order-table{min-width:max-content}
.order-table{width:100%;border-collapse:collapse;font-size:14px}
.order-table th,.order-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.order-table td:nth-child(n+2),.order-table th:nth-child(n+2){text-align:right;white-space:nowrap}
.order-table tfoot td{border-bottom:0}
.order-table__total td{font-weight:700;font-size:16px;border-top:2px solid var(--line)}
.order-table__exvat td{color:var(--muted);font-size:12px;border-top:1px dashed var(--line)}
.order-table__itemrow{display:flex;align-items:center;gap:10px}
.order-table__thumb{flex:0 0 auto;width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px}
.order-table__itemtext{min-width:0}
/* order-confirmation.php -- STEJNÝ 6-sloupcový problém jako
   account_order.php výš, ale tahle stránka nechce žádný horizontální
   scroll ani ve scoped wrapperu (zadání). Řešení: na mobilu se tabulka
   "rozloží" na karty/řádky (display:block), každá hodnotová buňka
   dostane popisek přes data-label (viz order-confirmation.php) -- žádná
   data se neztratí, jen se přeskládají pod sebe.
   Scoped na .order-table--items (přidáno jen k tabulce POLOŽEK v
   order-confirmation.php), NE na holé .order-table -- to je sdílená
   třída i pro 2-sloupcovou platební tabulku o kousek výš na téže
   stránce (.order-paybox__pay .order-table) a pro account_order.php
   (jiné řešení = scroll). Bez téhle přesné třídy by se karta-layout
   omylem aplikoval i na platební tabulku a rozbil ji. */
@media(max-width:560px){
  .order-table--items thead{display:none}
  .order-table--items,
  .order-table--items tbody,
  .order-table--items tfoot{display:block;width:100%}
  .order-table--items tbody tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .order-table--items tbody tr:last-child{border-bottom:0}
  .order-table--items tbody td{display:block;border:0;padding:2px 0;text-align:left;white-space:normal}
  .order-table--items tbody td:not(.order-table__item){display:flex;justify-content:space-between;gap:10px}
  .order-table--items tbody td:not(.order-table__item)::before{content:attr(data-label);color:var(--muted);font-weight:400}
  .order-table--items tfoot tr{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
  .order-table--items tfoot td{display:block;border:0;padding:0;text-align:left;white-space:normal}
}
/* Jeden souvislý dokument místo samostatných karet pro každou sekci
   (platba, položky, adresy) -- JEDEN bílý kontejner, sekce uvnitř dělí
   jen nadpis + jemná linka + odsazení (žádné vnořené .fieldset karty). */
.order-doc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:8px}
.order-doc__toolbar{display:flex;justify-content:flex-end;margin-bottom:4px}
.order-doc__section h2{font-size:18px;margin:0 0 12px}
.order-doc__section + .order-doc__section{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}
@media(max-width:640px){
  /* .order-doc je vnořený uvnitř .shop-page, který na tomhle breakpointu
     UŽ SÁM bleeduje na celou šířku viewportu (margin-left/right:-14px,
     viz ".shop-page{margin-left:-14px;...}" výš -- stejný princip jako
     u .pdp/.cart-row). Když .order-doc bleedoval znovu vlastními -14px
     margin, sečetlo se to a kontejner přetekl 14px MIMO viewport (reálně
     změřeno: scrollWidth > clientWidth). Marže se tu tedy NEDÁVÁ znovu
     -- .order-doc jen zdědí už bezokrajovou šířku .shop-page a dovnitř
     si nastaví vlastní 14px padding, ať text nesedí na okraj obrazovky. */
  .order-doc{padding-left:14px;padding-right:14px;border-radius:0;border-left:0;border-right:0}
  /* .order-done (zelený "Děkujeme" box) je taky přímý dítě .shop-page,
     takže je stejně bezokrajově full-width -- jen jeho boční padding byl
     20px (z desktop base pravidla), víc než zbytek mobilní stránky
     (.order-doc 14px). Sjednoceno na 14px, ať je vnitřní odsazení
     konzistentní v celém mobilním layoutu. */
  .order-done{padding-left:14px;padding-right:14px}
}

.order-addr{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.order-addr{grid-template-columns:1fr}}
/* Platební instrukce: [tabulka] [QR] [dodací/fakturační] vedle sebe na
   desktopu, přirozeně se zalamuje na tabletu/mobilu (flex-wrap), na
   mobilu (<=600px) skládáme natvrdo pod sebe v tomto pořadí -- viz
   media query níž. Menší gap než dřív (16px), ať QR nesedí daleko od
   tabulky s platebními údaji. */
.order-paybox{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.order-paybox__pay{flex:1 1 260px;min-width:220px}
.order-paybox__pay .order-table{width:100%}
.order-paybox__qr{flex:0 0 auto;text-align:center}
.order-paybox__qr img{border:1px solid var(--line);border-radius:10px;background:#fff}
.order-paybox__qr p{max-width:180px}
.order-paybox__addr{flex:1 1 240px;min-width:220px;display:flex;flex-direction:column;gap:14px}
.order-paybox__addr h3{font-size:14px;margin:0 0 4px;color:var(--ink)}
.order-paybox__addr p{margin:0;font-size:14px;line-height:1.45}
@media(max-width:600px){
  /* Ve flex-direction:column je cross-axis (šířka) řízená align-items,
     který je nahoře nastavený na flex-start (chceme ho pro row layout na
     desktopu -- položky zarovnané odshora, ne roztažené na výšku). Na
     mobilu ale stejné flex-start zúží .order-paybox__pay/__addr na
     šířku jejich obsahu a zarovná je vlevo jako "ostrůvky" místo full
     width řádků (platební tabulka i adresy tak vypadaly uletěné/užší
     než containery kolem). QR zůstává vlastní obsahovou šířkou
     (obrázek), jen vycentrovaný. */
  .order-paybox{flex-direction:column}
  .order-paybox__pay,
  .order-paybox__addr{width:100%}
  .order-paybox__qr{align-self:center}
}
/* Velmi úzký mobil (320-400px): nejdřív zkusit vejít IBAN na 1 řádek
   mírně menším fontem/paddingem (čitelné, jen kompaktnější -- stejný
   princip jako v printu), a teprve kdyby se přesto nevešel, zalomit na
   2 řádky jako poslední pojistka -- nikdy přetéct mimo sloupec/viewport. */
@media(max-width:400px){
  .order-paybox__pay .order-table{font-size:12.5px}
  .order-paybox__pay .order-table td{padding:6px 4px}
  .order-paybox__pay .order-table td:last-child{white-space:normal;word-break:break-word}
}

/* ---------- Checkout: metody dopravy/platby ---------- */
.method-list{display:flex;flex-direction:column;gap:8px}
/* Nekompatibilní volba dopravy/platby (checkout.php, [hidden] nastaveno
   PHP i JS syncPayments()) -- bez tohoto pravidla by ji přebilo .method
   {display:flex} výš (stejná specificita, autorský styl má navrch nad UA
   výchozím [hidden]{display:none}), takže by karta zůstala vidět jen
   "disabled". .method-list má gap, ale flexbox gap se na display:none
   prvek nevztahuje, takže po skrytí nezůstává mezera. */
/* .checkout .method (ne .method samotné) -- specificita musí přebít
   .checkout label{flex-direction:column} výš (label je i .method), jinak
   se řádek s radiem/textem sesype do sloupce (živý nález, 2026-09-19). */
.checkout .method{display:flex;flex-direction:row;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;background:#fff}
/* MUSÍ být AŽ PO .checkout .method výš -- při stejné specificitě (0,2,0)
   vyhrává pozdější pravidlo v souboru, takže .method[hidden] samotné by
   tu prohrálo a nekompatibilní platba/doprava by zůstala vidět jako jen
   "disabled" místo aby zmizela (regrese živě nahlášená 2026-09-19, STEJNÁ
   bug jako popisuje komentář níž -- autorský styl přebíjí UA [hidden]). */
.checkout .method[hidden]{display:none}
.method:hover{border-color:var(--brand)}
.method__body{display:flex;flex-direction:column;gap:2px}
.method__name{font-weight:600;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.method__price{font-weight:700;font-size:15px}
.method__price--free{color:#0a7d34}
.method__price--paid{color:#f97316}
.method__desc{font-size:13px;color:var(--muted)}
/* Malé logo napojeného dopravce u názvu dopravní metody v checkoutu (audit
   "LOGO DOPRAVCE V CHECKOUTU", 2026-09-19) -- jen když carrier.logo_path
   existuje (viz methods_shipping_active(), shop/app/methods.php), nic
   velkého, jen tichý vizuální doplněk vedle textu. */
.method__carrier-logo{height:18px;width:auto;max-width:60px;object-fit:contain;align-self:center;vertical-align:middle}

/* ---------- Topbar: stav účtu (admin / zákazník) – nenápadné ---------- */
.topbar__acct{color:var(--muted);font-size:13px}
.topbar__acct strong{color:#374151;font-weight:600}
.topbar__acct-link{margin-left:8px;color:var(--brand-dark);font-weight:600}
.topbar__acct-link:hover{color:var(--brand)}

/* stavová varianta / třída (grade) na detailu produktu */
.variant__grade{display:inline-block;font-weight:800;background:#0f172a;color:#fff;border-radius:8px;padding:2px 12px;letter-spacing:.02em}
.variant__note{font-weight:400;color:#6b7280;font-size:.85em;margin-left:6px}

/* ================= zákaznické účty ================= */
.topbar__acct{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.topbar__acct-name{font-weight:600;color:#374151}
.topbar__acct-link--admin{color:#0295a0}
.topbar__logout{display:inline}
.topbar__logout button{background:none;border:0;padding:0;color:var(--brand-dark,#0295a0);font:inherit;font-size:inherit;cursor:pointer;text-decoration:underline}
.topbar__logout button:hover{color:#00c4cc}

.auth-wrap{max-width:460px;margin:0 auto;padding:8px 0 32px}
.auth-form{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.auth-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#374151}
.auth-form input,.auth-form select{padding:10px;border:1px solid var(--line,#e5e7eb);border-radius:8px;font:inherit;font-size:14px;background:#fff}
.auth-form input:disabled{background:#f3f4f6;color:#6b7280}
.grid-2--pw .field-top{line-height:1.3}
@media(min-width:521px){.grid-2--pw .field-top{display:block;min-height:2.6em}}
.auth-links{margin-top:14px;font-size:14px;text-align:center}

/* ---------- Přihlášení (/obchod/prihlaseni) -- kompaktní karta ----------
   JEN tahle stránka (templates/account_login.php) -- .auth-wrap/.auth-form/
   .auth-links výš zůstávají beze změny a dál je používají registrace/
   zapomenuté heslo/obnova hesla. Cíl: formulář nesedí roztažený přes celou
   šířku obsahu, ale ve vycentrované, vizuálně oddělené kartě (bílá karta na
   šedém --bg pozadí stránky, jemný stín, zaoblené rohy) -- audit "PŘIHLÁŠENÍ
   -- KOMPAKTNÍ KARTA". Formulářová pole/CSRF/tlačítko dál čtou STEJNÉ
   .auth-form/.btn--block třídy/styly jako dřív, jen uvnitř menšího kontejneru. */
.auth-page{display:flex;justify-content:center;padding:16px 16px 64px}
.auth-card{
  width:100%;max-width:440px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 10px 30px rgba(17,24,39,.07);
  padding:36px 32px;
}
.auth-card__title{margin:0 0 4px;font-size:22px;color:var(--ink)}
.auth-card__subtitle{margin:0 0 22px;font-size:14px;color:var(--muted)}
/* Uvnitř karty o něco vzdušnější spacing mezi poli a výraznější CTA, než je
   výchozí .auth-form (ten zůstává sdílený/beze změny pro ostatní stránky). */
.auth-card .auth-form{gap:16px;margin-top:0}
.auth-card .auth-form label{font-size:13px;font-weight:600;color:#374151;gap:6px}
/* line-height:1.5 se dědí z body (16px/1.5 -- viz body{} nahoře v souboru)
   až do inputů (.auth-form input má font:inherit) -- v kombinaci s paddingem
   to dělalo zbytečně vysoké pole. Explicitní tužší line-height tady. */
.auth-card .auth-form input{padding:9px 12px;font-size:15px;line-height:1.3}
.auth-card .btn--block{padding:12px 20px;font-size:15px;margin-top:6px}
.auth-card .auth-links{margin-top:18px}
@media(max-width:520px){
  .auth-page{padding:14px 14px 40px}
  .auth-card{padding:28px 20px;border-radius:14px}
}

/* ---------- Registrace (/obchod/registrace) -- širší karta ----------
   JEN tahle stránka (.auth-card--wide, viz templates/account_register.php)
   -- login/zapomenuté heslo/obnova hesla zůstávají na běžných 440px
   (.auth-card samo, beze změny výš). Firma/IČO/DIČ + ARES řádek potřebují
   trochu víc místa, ať IČO input + tlačítko "Načíst z ARES" vedle sebe
   nejsou zbytečně natěsno. */
.auth-card--wide{max-width:600px}
/* ARES řádek (.ares-row/.ares-row__ico/.ares-row__btn/.ares-status) --
   STEJNÉ třídy jako checkout (shop.css výš, templates/checkout.php), jen
   .ares-row__ico tady vždy (ne až pod 520px jako u checkoutu) dostává
   pružnou šířku místo pevných 180px -- karta je i na desktopu užší než
   checkout formulář, IČO sloupec je navíc jen polovina .auth-card--wide. */
.auth-card .ares-row__ico{width:auto;flex:1 1 120px}
@media(max-width:480px){
  .auth-card .ares-row{flex-wrap:wrap}
}
/* Firma/IČO/DIČ jako vlastní podbarvený blok uvnitř karty -- STEJNÝ
   "zesvětlený box" idiom jako .grade-intro/.catalog-panel jinde na webu
   (jemné --bg pozadí, tenký border, zaoblené rohy), žádná nová paleta.
   Vnitřní spacing přes "lobotomized owl" (> * + *) -- .auth-card__section
   je jeden gap-spaced item uvnitř .auth-form, potřebuje si spacing mezi
   VLASTNÍMI dětmi (ares-row/ares-status/grid-2) řešit sám. */
.auth-card__section{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px}
.auth-card__section > * + *{margin-top:14px}
/* Status hláška ARES ("Údaje načteny z ARES." apod.) -- dřív záporný margin
   (-6px) ji vizuálně natlačil skoro do pole nad ní (nahlášeno jako
   "posunutá"/špatně zobrazená). Normální kladný odstup, žádné přetahování
   přes sousední řádek. .ares-status má z checkoutu i grid-column:1/-1 (shop.css
   výš) -- tady je .auth-card__section obyčejný blok, ne grid, takže se to
   pravidlo neuplatní (neškodí, ale nic neřeší) -- šířka řádku je tak jako
   tak přirozeně celá šířka bloku. */
.auth-card__section .ares-status{margin-top:6px}
@media(max-width:520px){
  .auth-card__section{padding:14px 14px 12px}
}
/* Oranžová hvězdička u povinných polí -- JEDNA sdílená třída (.required-mark),
   žádné inline styly po jednotlivých labelech. Text labelu kolem ní zůstává
   normální barvou (dědí z .auth-form label). */
.required-mark{color:#f97316;font-weight:700}

.acct-layout{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
/* Grid track defaultně nesmršťuje pod obsah potomka (min-width:auto) --
   .acct-main se širokou order-table pak natáhl celý sloupec (i v jedno-
   sloupcovém mobilním layoutu) a .order-table-scroll neměl co ořezávat. */
.acct-layout > *{min-width:0}
@media(max-width:760px){.acct-layout{grid-template-columns:1fr}}
.acct-nav{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:10px}
.acct-nav a{padding:8px 12px;border-radius:8px;font-size:14px;color:#111827}
.acct-nav a:hover{background:#f3f4f6;text-decoration:none}
.acct-nav a.is-active{background:var(--brand,#00c4cc);color:#fff}
/* Počet objednávek u "Objednávky" (_account_nav.php) -- menší font než
   okolní text položky, jen doplňkový údaj. */
.acct-nav__count{font-size:11px}
.acct-nav__logout{margin-top:6px;border-top:1px solid var(--line,#e5e7eb);padding-top:8px}
.acct-nav__logout button{width:100%;background:none;border:1px solid var(--line,#e5e7eb);border-radius:8px;padding:8px;cursor:pointer;font:inherit;font-size:14px;color:#6b7280}
.acct-nav__logout button:hover{background:#f3f4f6}
.acct-main .fieldset{margin-bottom:16px}
.acct-main .fieldset h2{margin-top:0}
/* "Moje údaje"/"Změna hesla" -- JEN .fieldset--compact (viz templates/
   account_dashboard.php), "Adresy"/"Objednávky" beze změny.
   Karta/sekce (.fieldset) zůstává BÍLÁ a přes celou šířku .acct-main
   sloupce -- žádná zvláštní paleta navíc. Podbarvení (STEJNÝ --bg "tohle
   je formulářová sekce" idiom jako .grade-intro/.auth-card__section jinde
   na webu) nese vnitřní .acct-form-box, malý a užší než karta kolem něj
   ("malý podbarvený formulář v širší bílé sekci"). Tlačítko: .auth-form je
   display:flex;flex-direction:column (default align-items:stretch by ho
   jinak natáhlo na celou šířku formuláře) -- align-self:flex-end ho vrátí
   na přirozenou velikost A zarovná doprava pod formulář. Barva: STEJNÝ
   zelený --cta styl jako hlavní nákupní tlačítko v košíku
   (.cart__cta-primary výš v souboru), NE tyrkysový .btn pill (var(--brand))
   -- ten na týhle stránce působil jako "modré" tlačítko mimo kontext. */
.acct-form-box{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:20px}
/* "Osobní údaje" a "Změna hesla" vedle sebe (.acct-form-row), každý sloupec
   drží svůj .acct-form-box -- na užší šířce se přirozeně zalomí pod sebe
   (flex-wrap), žádná zvláštní mobilní větev navíc potřeba. */
.acct-form-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;margin-top:16px}
.acct-form-col{flex:1 1 340px;max-width:420px}
.acct-form-col h3{margin:0 0 10px;font-size:15px;color:var(--ink)}
/* Registrace/poslední přihlášení pod formulářem "Osobní údaje" -- menší
   font, každý údaj na svém řádku (dřív jeden dlouhý řádek se "·" oddělovačem,
   na mobilu působilo natěsno/neprofesionálně). */
.acct-meta{display:flex;flex-direction:column;gap:2px;margin-top:10px;font-size:12px;color:var(--muted)}
.acct-main .fieldset--compact .auth-form .btn:not(.btn--ghost){
  align-self:flex-end;width:auto;display:inline-block;
  background:var(--cta);color:var(--cta-ink);border-radius:4px;font-weight:700;
}
.acct-main .fieldset--compact .auth-form .btn:not(.btn--ghost):hover{background:var(--cta-hover)}
/* "Zrušit" (btn--ghost, Adresy -- Úprava adresy) sedí vedle primárního
   zeleného tlačítka na stejném řádku -- align-self:center, ne stretch. */
.acct-main .fieldset--compact .auth-form .btn--ghost{align-self:center;width:auto}
/* Adresy -- víc polí než Osobní údaje/Heslo, o něco širší podbarvený box
   (STEJNÝ .acct-form-box vzhled, jen jiný max-width modifikátor). */
.acct-form-box--md{max-width:600px}

.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:18px}
.addr-card{border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:14px;background:#fff;font-size:14px}
.addr-card__type{font-weight:600;margin-bottom:6px;display:flex;gap:8px;align-items:center}
.addr-card__actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.acct-addr{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
@media(max-width:600px){.acct-addr{grid-template-columns:1fr}}
.btn--ghost{background:transparent;color:#6b7280;border:1px solid var(--line,#e5e7eb)}
/* .btn--ghost dřív neměl vlastní :hover, takže se uplatnil obecný
   ".btn:hover{background:var(--brand-dark)}" (plná tmavá výplň) se
   šedým textem z .btn--ghost -- křiklavá barva a slabý kontrast.
   Decentní hover/focus/active: jemné podbarvení + brand-dark text,
   stejná paleta jako zbytek webu (žádná nová barva). */
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--bg);color:var(--brand-dark);border-color:var(--brand-dark);text-decoration:none}
.btn--ghost:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px}
.btn--ghost:active{background:#e5e7eb;color:var(--brand-dark)}
.order-table .a-num,.order-table th.a-num{text-align:right;white-space:nowrap}

/* ---- výběr uložené adresy v checkoutu ---- */
.addr-picker{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 12px}
.addr-opt{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:10px 12px;cursor:pointer;background:#fff;font-size:13px;flex:1 1 220px;max-width:320px}
.addr-opt input{margin-top:2px}
.addr-opt__body strong{font-size:14px}
.addr-opt:hover{border-color:var(--brand,#00c4cc)}
.addr-opt--new{border-style:dashed}
.addr-save{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.addr-save .checkbox{gap:6px}

/* ---------- Tisk objednávky (order-confirmation.php) ---------- */
/* .no-print označuje prvky, které do vytištěného dokumentu nepatří (tlačítko
   tisku, odkaz "Zpět do prodeje") -- vedle skrytí veškerého webového
   chrome mimo <main> (topbar/hlavička/kategorie/vyhledávání/košík/patička,
   viz templates/header.php a footer.php). Zelená "Děkujeme" hláška a
   .order-doc zůstávají, jen bez stínu/rámečku/pozadí stránky, ať to na
   A4 vypadá jako čistý dokument, ne jako web. */
@media print{
  .topbar,.site-header,.catnav,.catnav-backdrop,.search-panel-backdrop,
  .site-footer,.grade-modal,.no-print{
    display:none !important;
  }
  body{background:#fff}
  main.wrap.page{max-width:none;padding:0;margin:0}
  .print-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:22px;
  }
  .print-header__logo{height:42px;width:auto;margin-bottom:12px}
  .print-header__title{color:#000;font-size:22px;font-weight:700;margin:0}
  .order-done{display:none}
  .order-doc{border:0;box-shadow:none;padding:0}
  .order-doc__section + .order-doc__section{border-top-color:#000}

  /* Platební instrukce v tisku: skutečný 3-sloupcový grid (platba 42 /
     QR 23 / adresy 35 v poměru), ne flex s auto/minmax sloupci -- ty
     dovolí obsahu (nowrap hodnota IBAN v tabulce) protlačit sloupec přes
     jeho hranici, i když grid track samotný je omezený, protože samotná
     <table> se dál snaží roztáhnout na šířku obsahu.
     DŮLEŽITÉ: sloupce jsou v `fr`, NE v `%`. 42%+23%+35% = 100% ŠÍŘKY
     KONTEJNERU, ale column-gap (2x 20px) se k tomu při rozpočítávání %
     tracků PŘIČÍTÁ NAVRCH -- grid tak nutně přetekl přesně o 40px
     (změřeno: gridTemplateColumns se resolvlo na "294px 161px 245px",
     jejichž součet + 2×20px gap = 740px v 700px kontejneru). `fr`
     jednotky mezery odečítají automaticky před rozpočítáním poměru,
     takže sloupce+gapy vždy přesně vyplní kontejner, nikdy nepřetečou --
     nešlo tedy (jen) o délku textu v IČ/DIČ, ale o chybnou grid
     matematiku samotnou. Zbytek (table-layout:fixed, menší font,
     povolené zalomení na hodnotové buňce) zůstává jako doplňková
     pojistka pro extrémně dlouhý obsah. */
  .order-paybox{
    display:grid;
    grid-template-columns:42fr 23fr 35fr;
    column-gap:20px;
    row-gap:12px;
    align-items:start;
    min-width:0;
    max-width:100%;
  }
  .order-paybox__pay{min-width:0;max-width:100%;overflow:hidden}
  .order-paybox__pay .order-table{width:100%;max-width:100%;table-layout:fixed;font-size:11px}
  .order-paybox__pay .order-table td{padding:4px 0;min-width:0}
  .order-paybox__pay .order-table td:first-child{width:40%;padding-right:6px}
  .order-paybox__pay .order-table td:last-child{
    width:60%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .order-paybox__qr{min-width:0;width:100%;text-align:center}
  .order-paybox__qr img{width:115px;height:115px;margin:0 auto;border-color:#000}
  .order-paybox__qr p{max-width:100%;margin-left:auto;margin-right:auto}
  /* .order-paybox__addr samo mělo min-width:0/overflow:hidden, ale
     PŘETÉKALO dál (změřeno ~40px přes pravý okraj 700px stránky) --
     protože je to display:flex;flex-direction:column (viz base pravidlo
     mimo print) a jeho DVA flex děti (Dodací/Fakturační <div>) i text
     uvnitř (h3/p s dlouhou hodnotou typu "DIČ: Ogroup s.r.o.") mají
     výchozí min-width:auto (content-based) -- rostou na šířku svého
     obsahu nezávisle na tom, že RODIČ má min-width:0. min-width:0 na
     jediné úrovni nestačí, musí se propsat na KAŽDOU vnořenou úroveň,
     jinak grid track přizná overflow místo zalomení. */
  .order-paybox__addr{min-width:0;max-width:100%;overflow:hidden}
  .order-paybox__addr > div{min-width:0;max-width:100%}
  .order-paybox__addr h3,
  .order-paybox__addr p{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Pojistka pro velmi úzkou tiskovou stránku (menší @page než běžné A4
     portrét s výchozími okraji) -- kdyby se 3 sloupce fakt nevešly
     vedle sebe čistě, radši horní řádek platba+QR a adresy pod tím, než
     cokoli zmáčknuté/přetékající. Na běžné A4 se tahle větev neuplatní. */
  @media(max-width:620px){
    .order-paybox{grid-template-columns:1fr auto;grid-template-areas:"pay qr" "addr addr"}
    .order-paybox__pay{grid-area:pay}
    .order-paybox__qr{grid-area:qr;width:auto}
    .order-paybox__addr{grid-area:addr}
  }
}

/* ---------- Globální "Zpět nahoru" (back-to-top) ----------
   JEDNA instance pro celý storefront, markup v templates/footer.php,
   zobrazení/skrytí i klik řeší [data-back-to-top] v shop.js. Fixně vpravo
   dole na všech stránkách -- na tomto webu není žádný jiný fixed prvek u
   spodního okraje (sticky-buybar je top:0, ne bottom), takže není co
   překrývat/uhýbat před. Skryté výchozím stavem (opacity 0 + mírný posun
   dolů + pointer-events:none), JS jen přidává/odebírá .is-visible -- žádný
   layout shift, čistě fade+posun. */
.back-to-top{
  position:fixed;right:20px;bottom:20px;z-index:130;
  width:56px;height:56px;border-radius:14px;border:0;
  /* Stejný tmavý odstín jako tlačítko "Kategorie" (.cat-btn výš), ať jsou
     sjednocené -- ne značková tyrkysová/zelená, schválně jiná paleta než
     .btn/.cta, ať to nepůsobí jako další "akční" CTA na stránce. */
  background:var(--bg-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(17,24,39,.22);
  cursor:pointer;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,background .15s ease;
}
.back-to-top:hover,.back-to-top:focus-visible{background:#1f2c39}
.back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
@media(max-width:640px){
  .back-to-top{right:14px;bottom:14px;width:52px;height:52px;border-radius:13px}
  .back-to-top svg{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){
  .back-to-top{transition:none}
}