@charset "UTF-8";
/* ==========================================================================
   HASAKI — Shoptet skin  ·  style.css
   --------------------------------------------------------------------------
   Kompletní přepis vzhledu šablony Shoptetu do designu HASAKI.
   Nahrát přes FTP do:  /user/documents/hasaki/style.css
   Připojit v administraci (Vzhled a obsah → Editor vzhledu → HTML kódy → hlavička):
     <link rel="stylesheet" href="/user/documents/hasaki/style.css?v=69">

   Obsah
     01  Fonty + design tokeny
     02  Base / reset nad Shoptetem
     03  Atomy (tlačítka, štítky, nadpisy sekcí, hvězdičky, reveal)
     04  Hlavička: topbar, logo, navigace, mega menu, hledání, košík
     05  Sekce úvodní strany (injektuje script.js)
     06  Produktové dlaždice (výpisy, homepage bloky)
     07  Kategorie: hero, filtry, řazení, stránkování
     08  Detail produktu
     09  Košík a objednávkový proces
     10  Patička
     11  Doplňky: back-to-top, blog, kontakt, 404, tisk
   ========================================================================== */

/* PÍSMO — proč Fraunces místo Bodoni Moda (verze 69)
   ---------------------------------------------------------------------------
   Bodoni je didone: má extrémně tenké vlasové tahy. Ve velkých nadpisech to
   funguje, jenže tenhle skin ho používal i na názvy produktů, ceny a součty
   (12–17 px). Tam vlasový tah spadne pod jeden pixel displeje a písmo se
   „rozpadne" — a čeština to má horší než angličtina, protože háčky a čárky
   jsou kreslené právě těmi nejtenčími tahy (ě, š, č, ř, ž, ů). Bylo to v
   souboru ostatně už jednou přiznané: gravírovací náhled má vlastní písmo
   (Playfair Display) přesně proto, že „vlasové tahy Bodoni se při malé
   velikosti prakticky ztrácely".

   Fraunces to řeší osou opsz (optical size, 9–144). Není to jedno písmo
   nastavené na dvě velikosti — jsou to plynule odlišné kresby: v drobném
   textu tlustší tahy a otevřenější tvary, ve velkém nadpisu subtilnější a
   elegantnější. Prohlížeč si osu dosazuje sám podle font-size
   (font-optical-sizing:auto je výchozí), takže se o to nemusí nikdo starat.
   Má pravou kurzivu (ne nakloněný roman) i latin-ext, takže česká diakritika
   je skutečně kreslená, ne poskládaná.

   Alex Brush z importu zmizel — proměnná --ff-script na něj sice ukazovala,
   ale po přechodu gravírování na Playfair ji už nikdo nepoužíval. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,700&display=swap');

/* ==========================================================================
   01  DESIGN TOKENY
   ========================================================================== */
:root{
  /* --ink3 bylo #847C6E: na krémovém pozadí kontrast 3,67:1, tedy pod
     hranicí čitelnosti (4,5:1) — a sedí na něm popisky variant, poznámky
     pod cenou, popisky záruk i perexy kategorií. #736B5D dává 5,18:1 na
     papíru a 4,68:1 na krému a pořád je to zřetelně „tišší" odstín. */
  --ink:#141311;--ink2:#4A453D;--ink3:#736B5D;
  --bg:#F6F1E7;--paper:#FFFDF9;--paper-dk:#EFE7D6;
  --dark:#111010;--dark2:#1C1A17;--dark3:#2A2621;
  --steel:#C3CBCE;--steel-dk:#8E9799;
  --red:#8F2430;--red-dk:#6E1B25;--red-soft:#F3DEDE;
  /* --gold-dk je „zlatá na světlém" — kromě rámečků a hvězdiček ji nese
     i text (dostupnost „Skladem", popisky sekcí). #A17C31 měl na krému
     3,43:1, #8C6A26 má 4,44:1 a pořád čte jako zlatá, ne jako hnědá.
     Jasná --gold zůstává beze změny, ta svítí jen na tmavém (7,85:1). */
  --gold:#C9A14A;--gold-dk:#8C6A26;--gold-soft:#F3E7C9;
  --line:rgba(20,19,17,.13);--line2:rgba(20,19,17,.07);
  --line-dark:rgba(255,253,249,.14);--line-dark2:rgba(255,253,249,.08);
  --maxw:1220px;
  --shadow-sm:0 2px 10px rgba(20,19,17,.06);
  --shadow-md:0 12px 40px rgba(20,19,17,.10);
  --shadow-lg:0 30px 80px rgba(17,16,16,.28);
  --ease:cubic-bezier(.22,1,.36,1);
  /* Náhradní řada je vybraná podle výšky střední dotažnice (x-height):
     Fraunces ji má vysokou, takže než se webfont natáhne, drží Iowan/
     Palatino/Georgia podobně velký obraz textu a stránka „neposkočí". */
  --ff-display:'Fraunces',"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ff-body:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* --- Košík "MONOLIT" (sekce 09) -----------------------------------------
     Tmavý panel košíku není plochá barva, ale kovaná deska: svislý gradient
     + teplý zlatý přísvit z pravého horního rohu. Rádius 12px je vědomý
     kompromis — ostřejší než zbytek webu (20–22px), aby deska působila jako
     opracovaný blok, ale ne cizí. --ok/--warn jsou PŘÍSTUPNÉ ekvivalenty
     barev dostupnosti, které Shoptet posílá inline (#20c52c má na papíru
     kontrast jen ~2:1); mapuje je initAvailabilityTone() v script.js. */
  --slab:linear-gradient(158deg,#232120 0%,#171513 46%,#0E0D0C 100%);
  --slab-heat:radial-gradient(120% 80% at 78% -12%,rgba(201,161,74,.16),transparent 62%);
  --bevel:inset 0 1px 0 rgba(255,253,249,.10);
  --shadow-slab:0 30px 64px -30px rgba(20,19,17,.55);
  --shadow-card:0 1px 2px rgba(20,19,17,.04),0 14px 30px -18px rgba(20,19,17,.14);
  --r-cart:12px;
  --ok:#3E6B33;--warn:#8A5A16;
  /* (--ff-script s písmem Alex Brush tu byl pro náhled gravírování. Ten už
     dávno jede na italické Playfair Display podle skutečné fotky od klienta,
     takže proměnnou nikdo nepoužíval a font se stahoval zbytečně.) */
  /* Cesta k čepeli pro efekt záblesku v heru — přepisuje JS podle HASAKI_CONFIG.assets */
  --hs-blade-url:url('/user/documents/hasaki/hasaki-knife-gyuto.svg');
}

/* ==========================================================================
   02  BASE — jemné srovnání Shoptetu pod náš design
   ========================================================================== */
html:root body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Osa opsz u Fraunces — prohlížeč ji dosazuje podle font-size sám a auto
     je i výchozí hodnota, píšeme ji ale natvrdo: kdyby ji cizí reset
     (Shoptet/Apeti/doplněk) přepnul na none, drobný text by se vykresloval
     kresbou určenou pro velké nadpisy, tedy přesně tím, čemu se vyhýbáme.
     ZÁMĚRNĚ tu NENÍ font-synthesis:none. Vypadá to jako správná hygiena
     („máme pravé řezy, náhražky nechceme"), jenže Inter se natahuje bez
     kurzivy — a popisky produktů píše obchodník ve vizuálním editoru, kde
     <em>/<i> vzniká jedním kliknutím. Zákaz náhražky by takové zvýraznění
     potichu smazal (text by zůstal stojatý). Fraunces pravou kurzivu má,
     takže tam, kde na ní záleží (nadpis v heru), se stejně použije. */
  font-optical-sizing:auto;
}
/* Váha 500, ne 600 jako u Bodoni. Tam bylo tučnější řezání nutné, aby
   vlasové tahy nezmizely; Fraunces má tahy plné samo o sobě a v 600 by
   nadpisy působily zavalitě. Záporné prostrkání drží velké nadpisy pohromadě
   — Fraunces je širší než Bodoni. */
html:root h1,html:root h2,html:root h3,html:root h4,html:root .h1,html:root .h2,html:root .h3,html:root .h4{
  font-family:var(--ff-display);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.012em;
  color:var(--ink);
}
html:root a{color:var(--ink);text-decoration:none}
html:root a:hover,html:root a:focus{color:var(--red);text-decoration:none}
html:root ::selection{background:var(--gold);color:var(--dark)}
html:root :focus-visible{outline:2px solid var(--gold-dk);outline-offset:3px}
html:root hr{border-color:var(--line)}

/* Sjednocení šířky obsahu se sekcemi, které injektuje JS */
html:root .container{max-width:var(--maxw);padding-left:24px;padding-right:24px}
@media (max-width:640px){html:root .container{padding-left:18px;padding-right:18px}}

/* Vlastní container pro injektované sekce (nemíchá se s bootstrapem Shoptetu) */
html:root .hs-container{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding:0 24px}
@media (max-width:640px){html:root .hs-container{padding:0 18px}}

/* Obsahová plocha */
html:root #content-wrapper{background:var(--bg)}
html:root body.hs-page-index #content-wrapper{padding-top:64px;padding-bottom:20px}
html:root #content{color:var(--ink2)}
html:root #content h1,html:root #content h2,html:root #content h3,html:root #content h4{color:var(--ink)}

/* Formulářové prvky */
html:root input[type=text],html:root input[type=email],html:root input[type=tel],html:root input[type=password],html:root input[type=number],html:root input[type=search],html:root input[type=url],html:root textarea,html:root select,html:root .form-control{
  font-family:var(--ff-body);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:none;
}
html:root input[type=text]:focus,html:root input[type=email]:focus,html:root input[type=tel]:focus,html:root input[type=password]:focus,html:root input[type=number]:focus,html:root input[type=search]:focus,html:root textarea:focus,html:root select:focus,html:root .form-control:focus{
  outline:0;border-color:var(--gold-dk);box-shadow:0 0 0 3px rgba(201,161,74,.16);
}
html:root input[type=checkbox],html:root input[type=radio]{accent-color:var(--red)}
html:root label{font-weight:500;color:var(--ink2)}

/* Boxy v postranním panelu */
html:root .box,html:root .sidebar .box,html:root #categories{background:var(--paper);border:1px solid var(--line);border-radius:20px}
html:root .box .box-title,html:root .box h3,html:root .box h4,html:root #categories .box-title{
  font-family:var(--ff-body);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);
}

/* Tabulky */
html:root table:not(.hs-raw){border-color:var(--line2)}
html:root table:not(.hs-raw) th{color:var(--ink3);font-weight:600}

/* Skryté prvky Shoptetu, které duplikují náš design (řídí JS třídami) */
html:root .hs-hide{display:none !important}

/* ==========================================================================
   03  ATOMY
   ========================================================================== */

/* --- Tlačítka: naše i Shoptetová --------------------------------------- */
html:root .hs-btn,html:root .btn,html:root button.btn,html:root a.btn,html:root input.btn,html:root .add-to-cart-button,html:root .btn-cart,html:root .btn-conversion{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--ff-body);
  font-weight:600;
  font-size:15px;
  line-height:1.2;
  letter-spacing:.01em;
  padding:15px 28px;
  cursor:pointer;
  text-align:center;
  text-transform:none;
  box-shadow:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             background-color .25s,color .25s,border-color .25s;
}
html:root .hs-btn:active,html:root .btn:active{transform:scale(.97)}
html:root .hs-btn svg,html:root .btn svg{width:16px;height:16px;flex:none}

html:root .hs-btn-primary,html:root .btn-primary,html:root .btn-conversion,html:root .add-to-cart-button,html:root .btn-cart,html:root button[type=submit].btn-default,html:root .next-step-forward .btn{
  background:var(--ink) !important;
  color:var(--paper) !important;
  border-color:transparent !important;
  box-shadow:var(--shadow-sm);
}
html:root .hs-btn-primary:hover,html:root .hs-btn-primary:focus,html:root .btn-primary:hover,html:root .btn-primary:focus,html:root .btn-conversion:hover,html:root .btn-conversion:focus,html:root .add-to-cart-button:hover,html:root .add-to-cart-button:focus,html:root .btn-cart:hover,html:root .btn-cart:focus{
  background:var(--red) !important;color:#fff !important;
  box-shadow:var(--shadow-md);transform:translateY(-2px);
}

html:root .hs-btn-gold,html:root .btn-gold{background:var(--gold);color:var(--dark);border-color:transparent}
html:root .hs-btn-gold:hover,html:root .hs-btn-gold:focus,html:root .btn-gold:hover{
  background:var(--gold-dk);color:var(--dark);transform:translateY(-2px);box-shadow:var(--shadow-md);
}

html:root .hs-btn-ghost,html:root .btn-default,html:root .btn-secondary,html:root .btn-outline{
  background:transparent;color:var(--ink);border-color:var(--line);
}
html:root .hs-btn-ghost:hover,html:root .btn-default:hover,html:root .btn-secondary:hover{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}

html:root .hs-btn-on-dark{background:transparent;color:#fff;border-color:var(--line-dark)}
html:root .hs-btn-on-dark:hover{background:#fff;color:var(--dark);border-color:#fff}

html:root .hs-btn-sm,html:root .btn-sm,html:root .btn-xs{padding:10px 18px;font-size:13px}
html:root .hs-btn[disabled],html:root .btn[disabled],html:root .btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none;transform:none}

/* --- Eyebrow, štítky, hvězdičky ---------------------------------------- */
html:root .hs-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  font-family:var(--ff-body);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);font-weight:700;
}
html:root .hs-eyebrow::before{content:'';width:22px;height:1px;background:var(--gold-dk)}
html:root .hs-eyebrow.on-dark{color:var(--gold)}

html:root .hs-badge{display:inline-block;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;background:var(--ink);color:var(--paper)}
html:root .hs-badge-sale{background:var(--red)}
html:root .hs-badge-new{background:var(--gold);color:var(--dark)}

html:root .hs-sec-head{max-width:640px;margin:0 0 44px}
html:root .hs-sec-head h2{font-size:clamp(28px,3.4vw,44px);margin:14px 0 0}
html:root .hs-sec-head p{margin-top:14px;color:var(--ink2);font-size:16px;line-height:1.6}
html:root .hs-sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
html:root .hs-sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:40px;flex-wrap:wrap}
html:root .hs-sec-head-row .hs-sec-head{margin-bottom:0}

/* --- Reveal on scroll (aktivní jen když běží JS) ------------------------ */
html:root.hs-js .hs-rv{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html:root.hs-js .hs-rv.is-in{opacity:1;transform:none}
html:root.hs-js .hs-rv-stagger.is-in > *{transition-delay:calc(var(--i,0) * 70ms)}
@media (prefers-reduced-motion:reduce){
  html:root.hs-js .hs-rv,html:root.hs-js .hs-rv.is-in{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   04  HLAVIČKA
   ========================================================================== */

/* --- Horní tmavý pruh --------------------------------------------------- */
html:root .hs-topbar,html:root .top-navigation-bar{
  background:var(--dark) !important;
  color:var(--steel) !important;
  border:0 !important;
  font-size:12.5px;
  line-height:1.4;
}
html:root .hs-topbar a,html:root .top-navigation-bar a,html:root .top-navigation-bar .top-navigation-menu a{color:var(--steel) !important}
html:root .hs-topbar a:hover,html:root .top-navigation-bar a:hover{color:var(--gold) !important}
html:root .top-navigation-bar .container{min-height:38px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
html:root .top-navigation-bar .dropdown-menu{background:var(--dark2);border:1px solid var(--line-dark)}

html:root .hs-topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 0;white-space:nowrap;overflow:hidden}
html:root .hs-topbar-msg{margin:0;overflow:hidden;text-overflow:ellipsis;color:var(--steel)}
html:root .hs-topbar-contact{display:flex;gap:18px;flex:none}
@media (max-width:820px){
  html:root .hs-topbar-msg{display:none}
  html:root .hs-topbar-in{justify-content:center}
}

/* Informační pruh Shoptetu ve stylu značky */
html:root .site-msg,html:root .site-msg.information{background:var(--gold);color:var(--dark);border:0;font-weight:600}
html:root .site-msg a{color:var(--dark);text-decoration:underline}

/* --- Hlavička ----------------------------------------------------------- */
html:root #header,html:root .header{background:var(--paper);border-bottom:1px solid var(--line)}
html:root #header .container{position:relative}
html:root body.hs-sticky-header #header{position:sticky;top:0;z-index:60;transition:box-shadow .3s}
html:root body.hs-scrolled #header{box-shadow:var(--shadow-sm)}

html:root .site-name a,html:root .site-name img,html:root .header .logo img{max-height:44px;width:auto;transition:max-height .3s var(--ease)}
html:root body.hs-scrolled .site-name img{max-height:34px}
html:root .site-name{padding:0}

/* --- Hlavní navigace -----------------------------------------------------
   Pozn.: cíleno přes #navigation .navigation-in, NE jen #navigation —
   #navigation totiž obsahuje i .menu-helper se zdvojeným seznamem „Více",
   kde chceme JINÝ vzhled (svislý rozbalovací seznam, ne vodorovný řádek).
   Kvůli ID v „#navigation ul.menu-level-1" by tahle pravidla jinak
   specificitou přebila i „display:none"/padding definované níže pro
   .menu-helper (viz sekce 12) bez ohledu na pořadí v souboru. */
html:root #navigation,html:root .navigation-window{background:transparent;border:0}
html:root #navigation .navigation-in{background:transparent}
html:root #navigation .navigation-in ul.menu-level-1{display:flex;align-items:center;gap:28px;margin:0;padding:0;list-style:none;background:none}
html:root #navigation .navigation-in ul.menu-level-1 > li{background:none;border:0;margin:0;padding:0;position:relative}
html:root #navigation .navigation-in ul.menu-level-1 > li > a{
  position:relative;display:inline-block;
  font-family:var(--ff-body);font-size:14.5px;font-weight:600;
  color:var(--ink);background:none;border:0;padding:18px 0;text-transform:none;letter-spacing:0;
}
html:root #navigation .navigation-in ul.menu-level-1 > li > a::after{
  content:'';position:absolute;left:0;right:100%;bottom:12px;height:2px;background:var(--red);
  transition:right .28s var(--ease);
}
html:root #navigation .navigation-in ul.menu-level-1 > li > a:hover::after,html:root #navigation .navigation-in ul.menu-level-1 > li.active > a::after,html:root #navigation .navigation-in ul.menu-level-1 > li.exp > a::after{right:0}
html:root #navigation .navigation-in ul.menu-level-1 > li > a:hover,html:root #navigation .navigation-in ul.menu-level-1 > li.active > a{color:var(--ink);background:none}

/* Rozbalovací (mega) panel */
html:root #navigation .navigation-in .menu-level-2{
  background:var(--paper);
  border:0;border-top:1px solid var(--line2);
  border-radius:0 0 20px 20px;
  box-shadow:var(--shadow-md);
  padding:22px;
  min-width:260px;
}
html:root #navigation .navigation-in .menu-level-2 > li > a{
  display:block;padding:9px 12px;border-radius:12px;
  font-size:14px;font-weight:600;color:var(--ink);transition:background .2s,color .2s;
}
html:root #navigation .navigation-in .menu-level-2 > li > a:hover{background:var(--bg);color:var(--red)}
html:root #navigation .navigation-in .menu-level-3 a{font-size:13px;color:var(--ink3);padding:5px 12px}
html:root #navigation .navigation-in .menu-level-3 a:hover{color:var(--red)}
html:root #navigation .navigation-in .has-third-level .menu-level-2{display:flex;flex-wrap:wrap;gap:8px 24px}

/* Menu-helper („Více"): vlastní, svislý vzhled pro zdvojený seznam.
   Bez „display" — o zobrazení/skrytí rozhoduje výhradně .menu-helper > ul
   v sekci 12 (podle .visible); tady jen nastavujeme SMĚR a mezery, které se
   uplatní až v okamžiku, kdy se panel zobrazí. */
html:root .menu-helper ul.menu-level-1{
  flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;min-width:200px;
}
html:root .menu-helper ul.menu-level-1 > li > a{
  display:block;padding:10px 14px;border-radius:12px;
  font-family:var(--ff-body);font-size:14px;font-weight:600;color:var(--ink);
  transition:background .2s,color .2s;
}
html:root .menu-helper ul.menu-level-1 > li > a:hover{background:var(--bg);color:var(--red)}

/* Mobilní vysunovací menu — tmavé, jako v předloze.
   Třídu hs-nav-mobile nastavuje JS teprve tehdy, když šablona opravdu
   přepnula na vysunovací menu (je vidět tlačítko hamburgeru). Jinak by se
   u šablon s vodorovnou navigací na tabletu objevil tmavý blok v světlé
   hlavičce. */
html:root body.hs-nav-mobile #navigation.navigation-window,html:root body.hs-nav-mobile #navigation .navigation-in{background:var(--dark)}
html:root body.hs-nav-mobile #navigation ul.menu-level-1{display:block}
html:root body.hs-nav-mobile #navigation ul.menu-level-1 > li > a{
  display:block;color:#fff;padding:16px 22px;border-bottom:1px solid var(--line-dark2);width:100%;
}
html:root body.hs-nav-mobile #navigation ul.menu-level-1 > li > a::after{display:none}
html:root body.hs-nav-mobile #navigation .menu-level-2{
  background:rgba(255,255,255,.04);box-shadow:none;border-radius:0;padding:6px 0 14px;
}
html:root body.hs-nav-mobile #navigation .menu-level-2 > li > a{color:#fff}
html:root body.hs-nav-mobile #navigation .menu-level-2 > li > a:hover{background:rgba(255,255,255,.06);color:var(--gold)}
html:root body.hs-nav-mobile #navigation .menu-level-3 a{color:var(--steel)}

/* --- Nástroje v hlavičce (hledání, košík, účet) -------------------------- */
html:root .navigation-buttons a,html:root .navigation-buttons button,html:root .header-tools a,html:root .top-nav-button,html:root .responsive-tools a{
  color:var(--ink);border-radius:999px;
}
html:root .navigation-buttons a:hover,html:root .responsive-tools a:hover{color:var(--red);background:var(--bg)}

/* Hledání */
html:root .search .form-control,html:root .search-form input[type=text],html:root .search-form input[type=search],html:root #search input[type=text],html:root #formSearchForm input{
  border-radius:999px;padding:11px 20px;background:var(--paper);border:1px solid var(--line);
}
html:root .search-form button,html:root .search .btn,html:root #formSearchForm button{border-radius:999px;padding:11px 18px}
html:root .search-whisperer,html:root .search-whisperer-wrapper{
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);
  background:var(--paper);overflow:hidden;
}
html:root .search-whisperer a{padding:10px 14px;color:var(--ink)}
html:root .search-whisperer a:hover{background:var(--bg)}

/* Košík v hlavičce */
html:root .cart-count,html:root .navigation-buttons .cart-count{position:relative;color:var(--ink)}
html:root .cart-count i,html:root .cart-count .count,html:root .cart-count strong,html:root .navigation-buttons .cart-count span:not(.cart-price){
  background:var(--red);color:#fff;border-radius:999px;
  font-family:var(--ff-body);font-size:10.5px;font-weight:700;
  min-width:17px;height:17px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
}
html:root .cart-price{font-family:var(--ff-display);font-size:15px;color:var(--ink)}

/* Vysunovací okénka (mini-košík, přihlášení, hledání — všechna jsou
   .popup-widget). Apeti má „.popup-widget{position:fixed;z-index:56}", naše
   lepivá hlavička (#header, viz body.hs-sticky-header výše) ale běží na
   z-index:60 — bez zvýšení schovávala horní část vysunutého okénka přesně
   pod sebou, jako by přes ni „nešlo vidět". */
html:root .popup-widget{z-index:91}
html:root .popup-widget:before{display:none}
html:root .popup-widget,html:root .cart-widget,html:root #cart-window,html:root .popup-widget.cart-widget{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-lg);overflow:hidden;padding-top:0 !important;
}
html:root .popup-widget h2{
  font-family:var(--ff-display);font-size:19px;color:var(--ink);
  padding:18px 20px 0;margin:0 0 6px;
}
/* Vysunovací mini-košík má vlastní sekci 21 na konci souboru — panel je
   celý přestavěný (hlavička, seznam, pata) a mít ho na dvou místech
   znamenalo přebíjet vlastní pravidla vlastními. Tady zůstává jen to,
   co widget sdílí s přihlašovacím okénkem (#login): karta a nadpis. */

/* Drobečková navigace */
html:root .breadcrumbs,html:root #navigation-first-level,html:root .breadcrumbs-wrapper{
  font-size:13px;color:var(--ink3);padding:16px 0 0;
}
/* initPageHero() (script.js) přesune .breadcrumbs z .breadcrumbs-wrapper
   dovnitř .hs-page-hero — obal samotný po přesunu zůstane v DOMu prázdný,
   ale s paddingem výše si i bez obsahu drží 16px výšky: mezi hlavičkou
   a tmavým pruhem tak zůstala díra přesně na jeho místě. */
html:root body.hs-has-page-hero .breadcrumbs-wrapper{display:none}
/* Apeti dělá z .breadcrumbs vlastní bílý pruh přes celou šířku
   (background:#fff, margin:20px -20px 0 — proto přesahuje přes okraje
   .breadcrumbs-wrapper) se zaoblením a rámečkem podle šablony. Uvnitř
   .hs-page-hero to už resetujeme (níže); initPageHero() ale běží jen na
   kategoriích/košíku — na detailu produktu zůstávala tahle bílá krabice
   živá a plovala na krémovém pozadí bez jakékoli vazby na obsah pod ní. */
html:root .breadcrumbs{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;margin:20px 0 0 !important;
}
html:root .breadcrumbs a{color:var(--ink3)}
html:root .breadcrumbs a:hover{color:var(--red)}
html:root .breadcrumbs span[itemprop=name]{color:var(--ink)}

/* ==========================================================================
   05  SEKCE ÚVODNÍ STRANY  (markup vkládá script.js)
   ========================================================================== */

/* --- HERO --------------------------------------------------------------- */
html:root .hs-hero{
  position:relative;overflow:hidden;color:#fff;padding:76px 0 60px;
  background:
    radial-gradient(1100px 600px at 82% -10%,rgba(143,36,48,.35),transparent 60%),
    radial-gradient(900px 620px at -5% 105%,rgba(201,161,74,.18),transparent 55%),
    linear-gradient(180deg,var(--dark),#0c0b0b);
}
html:root .hs-hero-kanji{
  position:absolute;right:-40px;top:-60px;font-size:min(46vw,620px);line-height:1;
  font-family:var(--ff-display);color:rgba(255,253,249,.05);pointer-events:none;user-select:none;
}
html:root .hs-hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;position:relative}
/* Nadpis je <h1>, pokud stránka jiný <h1> nemá; jinak <p> se stejným vzhledem. */
html:root .hs-hero-title{
  font-family:var(--ff-display);font-weight:600;letter-spacing:.002em;
  font-size:clamp(38px,5.4vw,68px);color:#fff;margin:18px 0 0;line-height:1.06;
}
html:root .hs-hero-title em{color:var(--gold);font-style:italic}
html:root .hs-hero-lead{margin-top:22px;font-size:17px;line-height:1.7;color:var(--steel);max-width:480px}
html:root .hs-hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
html:root .hs-hero-trust{display:flex;gap:34px;margin-top:46px;flex-wrap:wrap}
html:root .hs-hero-trust strong{display:block;font-family:var(--ff-display);font-size:22px;color:#fff}
html:root .hs-hero-trust span{font-size:12.5px;color:var(--steel)}

html:root .hs-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px}
html:root .hs-hero-glow{position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,161,74,.35),transparent 70%);filter:blur(10px)}
html:root .hs-blade-wrap{position:relative;width:100%;max-width:520px;transform:rotate(-16deg);
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:hsHeroFloat 6s ease-in-out infinite}
html:root .hs-blade{width:100%;display:block;max-width:100%}
@keyframes hsHeroFloat{0%,100%{transform:rotate(-16deg) translateY(0)}50%{transform:rotate(-16deg) translateY(-14px)}}
html:root .hs-blade-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%);
  background-size:260% 260%;background-position:120% 120%;
  -webkit-mask-image:var(--hs-blade-url);mask-image:var(--hs-blade-url);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  animation:hsGlint 3.6s ease-in-out 1.1s 1 both;
}
@keyframes hsGlint{0%{background-position:120% -20%}45%{background-position:-20% 120%}100%{background-position:-20% 120%}}
html:root .hs-chip{
  position:absolute;background:rgba(20,19,17,.65);backdrop-filter:blur(6px);
  border:1px solid var(--line-dark);color:#fff;font-size:12px;padding:9px 14px;border-radius:999px;
  white-space:nowrap;opacity:0;animation:hsChipIn .6s var(--ease) forwards;
}
html:root .hs-chip-1{left:-4%;bottom:14%;animation-delay:1.3s}
html:root .hs-chip-2{right:-2%;top:18%;animation-delay:1.55s}
@keyframes hsChipIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html:root .hs-blade-wrap{animation:none}
  html:root .hs-blade-wrap::after{display:none}
  html:root .hs-chip{animation:none;opacity:1}
}
@media (max-width:960px){
  html:root .hs-hero-in{grid-template-columns:1fr}
  html:root .hs-hero-visual{order:-1;min-height:220px}
  html:root .hs-chip{display:none}
  html:root .hs-hero-kanji{top:-20px}
}

/* --- MARQUEE ------------------------------------------------------------ */
html:root .hs-marquee{background:var(--gold);color:var(--dark);overflow:hidden;padding:13px 0;
  font-weight:700;font-size:13px;letter-spacing:.03em}
html:root .hs-marquee-track{display:flex;gap:22px;width:max-content;animation:hsMarquee 26s linear infinite}
html:root .hs-marquee:hover .hs-marquee-track{animation-play-state:paused}
html:root .hs-marquee-track span{white-space:nowrap}
@keyframes hsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){html:root .hs-marquee-track{animation-duration:80s}}

/* --- USP ---------------------------------------------------------------- */
html:root .hs-usp{padding:54px 0;background:var(--bg)}
html:root .hs-usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
html:root .hs-usp-item svg{width:34px;height:34px;color:var(--red)}
html:root .hs-usp-item h3{font-size:17px;margin:16px 0 8px}
html:root .hs-usp-item p{color:var(--ink2);font-size:14px;line-height:1.6;margin:0}
@media (max-width:820px){html:root .hs-usp-grid{grid-template-columns:repeat(2,1fr)}}

/* --- Dlaždice kategorií -------------------------------------------------- */
html:root .hs-categories{padding:74px 0;background:var(--paper)}
html:root .hs-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
html:root .hs-cat-tile{
  position:relative;border-radius:22px;overflow:hidden;background:var(--paper-dk);
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
html:root .hs-cat-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
html:root .hs-cat-tile-img{background:linear-gradient(160deg,#fff,var(--paper-dk));padding:26px;
  display:flex;align-items:center;justify-content:center;height:150px}
html:root .hs-cat-tile-img img{max-height:100%;max-width:100%;transition:transform .5s var(--ease)}
html:root .hs-cat-tile:hover .hs-cat-tile-img img{transform:scale(1.08) rotate(-2deg)}
html:root .hs-cat-tile-body{padding:18px 20px 22px}
html:root .hs-cat-tile-body h3{font-size:18px;margin:0}
html:root .hs-cat-tile-body p{color:var(--ink3);font-size:13px;margin-top:6px}
html:root .hs-cat-tile-arrow{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  transform:scale(.8) rotate(-40deg);opacity:0;transition:all .35s var(--ease);
}
html:root .hs-cat-tile-arrow svg{width:16px;height:16px}
html:root .hs-cat-tile:hover .hs-cat-tile-arrow{opacity:1;transform:scale(1) rotate(0)}
@media (max-width:960px){html:root .hs-cat-grid{grid-template-columns:repeat(2,1fr)}}

/* --- GRAVÍROVÁNÍ --------------------------------------------------------- */
html:root .hs-engrave{padding:74px 0;background:var(--paper-dk)}
/* align-items:stretch (ne center) — .hs-engrave-visual je teď samo o sobě
   flex sloupec (jeviště + volitelná lišta nožů), který vyplní celou výšku
   řádku, takže se nůž (široká, nízká fotka) neztrácí osamocený uprostřed
   vysoké bílé karty vedle delšího textu — to byla ta velká bílá mezera. */
html:root .hs-engrave-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch}
html:root .hs-engrave-visual{
  position:relative;background:linear-gradient(160deg,#fff,var(--paper-dk));
  border-radius:28px;border:1px solid var(--line);padding:36px 30px 28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}

/* Jeviště pro otočení nože (přední/zadní strana) — 3D flip na .hs-knife-flip,
   obě strany přes sebe absolutně, viditelná jen ta neotočená (backface-
   visibility). Zadní strana nese fotku se značkou „HASAKI 刃崎", přední
   strana skutečnou fotku rubu bez značky (CFG.engrave.knives[].imageFront);
   bez ní kreslí náhled gravírování na destičku .hs-engrave-mark (viz níže).

   Obě fotky mají různý poměr stran (jiné focení, jiný ořez), a přitom musí
   sedět do STEJNÉHO rámu, jinak by nůž při otočení „poskočil" do jiné
   velikosti a zadní strana by přesahovala kartu ven. Proto .hs-knife-flip
   dostává pevný aspect-ratio (podle fotky se značkou) a obě fotky uvnitř
   jedou na object-fit:contain — každá se vejde celá, bez oříznutí a beze
   změny poměru stran, jen s (neviditelnou, díky průhlednému pozadí) mezerou
   navíc tam, kde je od svého rámu o něco „hubenější". */
html:root .hs-knife-stage{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
html:root .hs-knife-flip{position:relative;width:100%;aspect-ratio:1014/199;perspective:1800px}
html:root .hs-knife-face{
  position:absolute;inset:0;width:100%;height:100%;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .8s cubic-bezier(.4,.1,.2,1);transform:rotateY(0deg);
  /* .hs-engrave-text potřebuje jednotku cqw, ne vw — jinak by se velikost
     písma řídila šířkou celého okna, ne šířkou fotky v tomhle půl-sloupci
     (na širokém monitoru by tak mohl text vylézt mimo čepel). */
  container-type:inline-size;
}
html:root .hs-knife-face-front{transform:rotateY(0deg)}
html:root .hs-knife-face-back{transform:rotateY(180deg)}
html:root .hs-knife-flip.is-flipped .hs-knife-face-front{transform:rotateY(-180deg)}
html:root .hs-knife-flip.is-flipped .hs-knife-face-back{transform:rotateY(0deg)}
html:root .hs-engrave-blade{width:100%;height:100%;display:block;object-fit:contain;transform:rotate(-4deg)}

/* --- Gravírovací destička ------------------------------------------------
   Jediná fotka, kterou od nože máme, nese natrvalo vypálenou značku
   „HASAKI 刃崎" (změřeno na pixelech: leží na 39–65 % délky a 19–93 % výšky
   fotky, na plošce hned u příklopu/rukojeti). Na PŘEDNÍ (gravírovací)
   straně ji proto kryjeme destičkou přesně na jejím místě — tam, kde
   uživatel gravírování u nože čeká, ne uprostřed čepele.
   Rozměry jsou v procentech šířky/výšky fotky, ne v pixelech, takže
   destička zůstane na svém místě bez ohledu na to, v jak širokém sloupci
   nebo na jak velké obrazovce se fotka právě vykresluje — a stejný -4deg
   náklon jako u fotky ji udrží vizuálně „na" čepeli i po otočení layoutu. */
/* Vrstva pro destičku i text. Rozměry jí v procentech dorovnává
   syncMark() ve script.js tak, aby přesně kryla VYKRESLENOU fotku — ne celé
   jeviště. Přední a zadní fotka mají různý poměr stran, takže ta „hubenější"
   se v rámu (object-fit:contain) vycentruje a nahoře i dole po ní zbude
   prázdný pruh; procenta níž by pak měřila jiný obdélník než ten, na kterém
   je vidět čepel.
   Rotace -4deg je schválně na téhle plné vrstvě, ne na menším boxu uvnitř:
   fotka rotuje kolem středu jeviště, a kdyby menší box rotoval kolem svého
   vlastního (jiného) středu, text by se od nože posunul — u předchozí verze
   to dělalo ~3,5 px svisle. */
html:root .hs-engrave-mark{
  position:absolute;left:0;top:0;width:100%;height:100%;
  transform:rotate(-4deg);
  pointer-events:none;
}
/* Destička kryjící vypálenou značku „HASAKI 刃崎" — souřadnice odpovídají
   jejímu místu na fotce (jen fallback, když chybí fotka rubu, viz níž). */
html:root .hs-engrave-mark::before{
  content:'';position:absolute;left:28%;top:19%;width:24%;height:74%;border-radius:999px;
  /* Barvy odečtené přímo z fotky nad/pod značkou (broušená ocel v tomhle
     míst přechází ze světlé přes střed do temnější ke krajům) — destička
     tak sedí do fotky tónem, ne že by na ní ležel cizí bílý flek. */
  background:linear-gradient(180deg,
    rgba(58,54,50,.85) 0%,
    rgba(205,201,197,.93) 24%,
    rgba(236,234,231,.96) 50%,
    rgba(198,194,190,.93) 76%,
    rgba(52,48,44,.85) 100%);
  border:1px solid rgba(20,19,17,.22);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 5px rgba(0,0,0,.3);
}
/* Skutečná fotka rubu (CFG.engrave.knives[].imageFront) → destička zbytečná,
   protože na ní logo prostě není. Text náhledu zůstává, jen bez podkladu. */
html:root .hs-engrave-mark.hs-mark-real-photo::before{display:none}

/* Podle referenční fotky skutečně gravírovaného nože od klienta — jemná
   rytina přímo v oceli, ŽÁDNÝ rámeček ani podklad.

   PÍSMO: italická Playfair Display, tučná (700). Předloha má italický
   serif s vysokým kontrastem tahů (ne spojovaný skript jako dřívější Alex
   Brush) — tomu odpovídá i Bodoni Moda, kterou web jinak používá všude,
   ale ta má vlasové tahy TAK tenké, že se při malé velikosti prakticky
   ztrácely (klientovo „je to moc malé“ bylo z poloviny o velikosti, ale
   i o tomhle). Playfair Display v tučném řezu drží stejný italický
   kontrast, jenže tlustý tah je citelně tlustší — čitelné i drobné.

   POZICE: odečtená z předlohy — 50,7 % délky fotky, 28 % její výšky.
   Ověřeno proti skutečné geometrii čepele: v tom místě sahá čepel od
   y 45 do 369 px, takže text leží 19 % pod hřbetem, vysoko na čepeli
   (přesně jako na předloze), a příklop začíná až na 60,5 % délky — text
   tedy na leštěnou objímku nezasahuje. */
html:root .hs-engrave-text{
  /* --hs-engrave-x je vodorovný střed textu. Je to proměnná, protože ji
     potřebuje i fit() ve script.js: u extrémně širokého zadání (16 velkých
     „W") text odsune doleva a počítá `calc(var(--hs-engrave-x) - Xpx)`.
     Kdyby tam byla hodnota napsaná zvlášť, rozešla by se s touhle. */
  --hs-engrave-x:40%;
  position:absolute;left:var(--hs-engrave-x);top:56%;transform:translate(-50%,-50%);z-index:1;
  font-family:'Playfair Display',var(--ff-display);font-style:italic;font-weight:700;
  /* cqw = % šířky .hs-knife-face (viz container-type výše), ne okna — proto
     text neroste bez limitu na širokém desktopu. initEngravePreview() navíc
     při delším textu font-size ještě zmenší, ať nezasáhne na příklop
     (viz MAX_FRACTION ve script.js).
     Velikost je záměrně dost nad tím, co by vyšlo z doslovného přepočtu
     předlohy (tam je text ~2 % šířky fotky) — klient chtěl větší a lépe
     čitelné, ne přesnou kopii měřítka. */
  font-size:clamp(13px,3cqw,26px);color:rgba(28,26,23,.94);white-space:nowrap;
  letter-spacing:.01em;pointer-events:none;
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 -.5px .5px rgba(0,0,0,.3);
}
/* Se skutečnou fotkou rubu jde text tam, kam se gravíruje doopravdy (viz
   souřadnice výše). Bez ní musí ležet na destičce, která kryje logo —
   tedy na jejím středu (28 % + 24 %/2, 19 % + 74 %/2).
   Střed je 48 %, ne 50,7 % jako na předloze: naše písmo je o něco větší
   (viz poznámka k velikosti výše), takže při stejném středu by text
   dosahoval až na 59,7 % délky a lepil se na příklop (ten začíná na
   60,5 %). Posunutím doleva končí text na ~56 %, tedy se stejnou rezervou
   před objímkou, jakou má předloha. */
html:root .hs-engrave-mark.hs-mark-real-photo .hs-engrave-text{--hs-engrave-x:48%;top:28%}
html:root .hs-knife-flip-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  border-radius:999px;border:1px solid var(--line);background:var(--paper);
  font:inherit;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;
  transition:background .2s,border-color .2s;
}
html:root .hs-knife-flip-btn svg{width:15px;height:15px;transition:transform .5s var(--ease)}
html:root .hs-knife-flip-btn:hover{background:var(--gold-soft);border-color:var(--gold)}
html:root .hs-knife-flip-btn.is-active svg{transform:rotateY(180deg)}

/* Lišta miniatur pro výběr nože — vykreslí se (viz script.js) jen když je
   v CFG.engrave.knives víc než jedna položka, takže dnes se vůbec
   nezobrazuje a nic nezabírá místo navíc. */
html:root .hs-knife-picker{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
html:root .hs-knife-thumb{
  width:60px;height:60px;border-radius:14px;border:2px solid var(--line);background:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:8px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
html:root .hs-knife-thumb img{width:100%;height:auto}
html:root .hs-knife-thumb:hover{border-color:var(--gold)}
html:root .hs-knife-thumb.is-active{border-color:var(--gold-dk);background:var(--gold-soft)}

html:root .hs-engrave-copy{display:flex;flex-direction:column;justify-content:center}
html:root .hs-engrave-copy h2{font-size:clamp(28px,3.4vw,44px);margin:14px 0 0}
html:root .hs-engrave-copy .hs-hero-lead{color:var(--ink2);margin-top:20px}
html:root .hs-engrave-field{display:flex;flex-direction:column;gap:8px;margin-top:26px;max-width:360px}
html:root .hs-engrave-field span{font-size:12.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
html:root .hs-engrave-field input{padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  font:inherit;font-size:15px;background:var(--paper)}
html:root .hs-engrave-buy{display:flex;align-items:center;gap:18px;margin-top:22px;flex-wrap:wrap}
html:root .hs-engrave-buy strong{font-family:var(--ff-display);font-size:24px}
html:root .hs-engrave-note{margin-top:14px;font-size:12.5px;color:var(--ink3);max-width:380px}
@media (max-width:900px){html:root .hs-engrave-in{grid-template-columns:1fr;gap:36px}}

/* --- ŘEMESLO / PRŮVODCE NOŽEM -------------------------------------------- */
html:root .hs-craft{padding:74px 0;background:var(--dark);color:#fff}
html:root .hs-craft .hs-sec-head h2{color:#fff}
html:root .hs-craft .hs-sec-head p{color:var(--steel)}

/* Vlevo klikací seznam tvarů čepele, vpravo velký náhled — klik v seznamu
   přepíná obsah náhledu (viz initCraftGuide ve script.js), beze změny
   výšky sekce (náhled má pevnou min-height, viz níže). */
html:root .hs-guide-in{display:grid;grid-template-columns:340px 1fr;gap:28px;margin-top:36px;align-items:stretch}
html:root .hs-guide-list{display:flex;flex-direction:column;gap:10px}
html:root .hs-guide-item{
  display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:16px;
  border:1px solid var(--line-dark2);background:var(--dark2);text-align:left;cursor:pointer;
  font:inherit;transition:border-color .25s,background .25s;
}
html:root .hs-guide-item:hover{border-color:var(--gold)}
html:root .hs-guide-item.is-active{border-color:var(--gold);background:var(--dark3)}
html:root .hs-guide-item-img{
  flex:none;width:44px;height:44px;padding:6px;border-radius:12px;
  background:linear-gradient(160deg,#fff,var(--paper-dk));
  display:flex;align-items:center;justify-content:center;
}
html:root .hs-guide-item-img img{max-width:100%;max-height:100%}
html:root .hs-guide-item-body{display:flex;flex-direction:column;gap:3px;min-width:0}
html:root .hs-guide-item-body b{font-size:14.5px;color:#fff;font-weight:600}
html:root .hs-guide-item-body small{font-size:12.5px;color:var(--steel);line-height:1.4}

html:root .hs-guide-preview{
  border-radius:24px;border:1px solid var(--line-dark2);background:var(--dark2);
  display:flex;flex-direction:column;overflow:hidden;
}
html:root .hs-guide-preview-img{
  flex:1;display:flex;align-items:center;justify-content:center;padding:36px;
  background:linear-gradient(160deg,#fff,var(--paper-dk));min-height:200px;
}
html:root .hs-guide-preview-img img{max-width:100%;max-height:220px}
html:root .hs-guide-preview-body{padding:26px 30px 30px}
html:root .hs-guide-preview-body h3{font-family:var(--ff-display);font-size:24px;color:#fff;margin:0}
html:root .hs-guide-preview-body p{margin-top:10px;color:var(--steel);font-size:14.5px;line-height:1.6}
html:root .hs-guide-preview-body a{margin-top:18px}
@media (max-width:820px){
  html:root .hs-guide-in{grid-template-columns:1fr}
  html:root .hs-guide-preview{order:-1}
}

/* --- VÝLOHA NEJPRODÁVANĚJŠÍCH / SAD --------------------------------------- */
html:root .hs-shelf{padding:74px 0;background:var(--dark);color:#fff}
html:root .hs-shelf .hs-sec-head h2{color:#fff}
html:root .hs-shelf .hs-sec-head p{color:var(--steel)}
html:root .hs-link-more{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--gold);
  white-space:nowrap;padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .2s;
}
html:root .hs-link-more:hover{border-color:var(--gold)}
html:root .hs-link-more svg{width:14px;height:14px}

html:root .hs-shelf-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
html:root .hs-shelf-tab{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line-dark2);background:transparent;
  color:var(--steel);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
html:root .hs-shelf-tab:hover{border-color:var(--gold)}
html:root .hs-shelf-tab.is-active{background:var(--gold);border-color:var(--gold);color:var(--dark)}

html:root .hs-shelf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
html:root .hs-shelf-card{
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--paper);
  border:1px solid var(--line-dark2);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
/* .hs-shelf-card{display:flex} má vyšší specificitu než výchozí UA
   pravidlo [hidden]{display:none} — bez tohohle by karty skryté záložkami
   (viz initBestsellerTabs) zůstaly vidět i s atributem hidden. */
html:root .hs-shelf-card[hidden]{display:none}
html:root .hs-shelf-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
html:root .hs-shelf-card-img{
  position:relative;display:flex;align-items:center;justify-content:center;height:150px;
  padding:22px;background:linear-gradient(160deg,#fff,var(--paper-dk));
}
html:root .hs-shelf-card-img img{max-height:100%;max-width:100%;transition:transform .5s var(--ease)}
html:root .hs-shelf-card:hover .hs-shelf-card-img img{transform:scale(1.08)}
html:root .hs-shelf-badge{position:absolute;top:12px;left:12px}
html:root .hs-shelf-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
html:root .hs-shelf-card-name{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
html:root .hs-shelf-card-price{font-family:var(--ff-display);font-size:19px;color:var(--ink)}
@media (max-width:960px){html:root .hs-shelf-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){html:root .hs-shelf-grid{grid-template-columns:1fr}}

/* --- STATISTIKY ---------------------------------------------------------- */
html:root .hs-stats{padding:74px 0;background:var(--ink);color:#fff}
html:root .hs-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
html:root .hs-stat strong{display:block;font-family:var(--ff-display);font-size:clamp(30px,4vw,46px);color:var(--gold)}
html:root .hs-stat span{font-size:13px;color:var(--steel);margin-top:6px;display:block}
@media (max-width:820px){html:root .hs-stats-grid{grid-template-columns:repeat(2,1fr);row-gap:36px}}

/* --- RECENZE ------------------------------------------------------------- */
html:root .hs-reviews{padding:74px 0;background:var(--bg)}
/* Šířku okna karuselu omezujeme na jednu kartu — posun o 100 % pak odpovídá
   přesně jedné recenzi (jinak by se karty rozjely mimo osu). */
html:root .hs-reviews-carousel{overflow:hidden;max-width:640px;margin:0 auto}
html:root .hs-reviews-track{display:flex;transition:transform .5s var(--ease)}
html:root .hs-review-card{
  flex:0 0 100%;max-width:100%;margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:22px;padding:38px 40px;text-align:center;
}
html:root .hs-review-stars{color:var(--gold-dk);letter-spacing:3px;font-size:15px}
html:root .hs-review-card p{margin-top:16px;font-family:var(--ff-display);font-size:19px;line-height:1.5;font-style:italic}
html:root .hs-review-card footer{margin-top:18px;font-weight:700;font-size:14px}
html:root .hs-review-card footer span{display:block;font-weight:400;color:var(--ink3);font-size:12.5px;margin-top:2px}
html:root .hs-reviews-dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
html:root .hs-reviews-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--line);
  cursor:pointer;transition:background .2s,transform .2s}
html:root .hs-reviews-dots button.is-active{background:var(--red);transform:scale(1.25)}
@media (max-width:640px){html:root .hs-review-card{padding:30px 22px}}

/* --- NEWSLETTER ---------------------------------------------------------- */
html:root .hs-newsletter{padding:74px 0;background:linear-gradient(120deg,var(--dark),#241d16)}
html:root .hs-newsletter-in{text-align:center;max-width:560px;margin:0 auto}
html:root .hs-newsletter-in h2{color:#fff;font-size:clamp(28px,3.4vw,44px);margin:0}
html:root .hs-newsletter-in > p{color:var(--steel);margin-top:14px}
html:root .hs-newsletter-form{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;justify-content:center}
html:root .hs-newsletter-form input[type=email],html:root .hs-newsletter-form input[type=text]{
  flex:1;min-width:220px;padding:15px 20px;border-radius:999px;border:1px solid var(--line-dark);
  background:rgba(255,255,255,.05);color:#fff;font:inherit;
}
html:root .hs-newsletter-form input::placeholder{color:var(--steel)}
html:root .hs-newsletter-form input:focus{outline:0;border-color:var(--gold);box-shadow:none}
html:root .hs-newsletter-consent{display:flex;gap:9px;align-items:flex-start;justify-content:center;
  margin-top:16px;font-size:12px;color:rgba(255,253,249,.55);text-align:left}
html:root .hs-newsletter-consent a{color:var(--gold);text-decoration:underline}
html:root .hs-newsletter-fine{font-size:11.5px;color:rgba(255,253,249,.4);margin-top:14px}
/* Přeoblečení newsletterového formuláře, který vykreslil sám Shoptet */
html:root .hs-newsletter .hs-newsletter-form{width:100%}
html:root .hs-newsletter .hs-newsletter-form .form-group,html:root .hs-newsletter .hs-newsletter-form > div{margin:0;flex:1;min-width:220px}
html:root .hs-newsletter .hs-newsletter-form input[type=email],html:root .hs-newsletter .hs-newsletter-form input[type=text],html:root .hs-newsletter .hs-newsletter-form .form-control{
  width:100%;padding:15px 20px;border-radius:999px;border:1px solid var(--line-dark);
  background:rgba(255,255,255,.05);color:#fff;
}
html:root .hs-newsletter .hs-newsletter-form label,html:root .hs-newsletter .hs-newsletter-form .consent,html:root .hs-newsletter .hs-newsletter-form small{color:rgba(255,253,249,.55);font-size:12px}
html:root .hs-newsletter .hs-newsletter-form label a{color:var(--gold);text-decoration:underline}
html:root .hs-newsletter .hs-newsletter-form .btn{background:var(--gold) !important;color:var(--dark) !important}
html:root .hs-newsletter .hs-newsletter-form .btn:hover{background:var(--gold-dk) !important;color:var(--dark) !important}

/* --- KONTAKT ------------------------------------------------------------- */
html:root .hs-contact{padding:74px 0;background:var(--bg)}
html:root .hs-contact-in{display:grid;grid-template-columns:1fr 1.3fr;gap:50px;align-items:center}
html:root .hs-contact-in h2{font-size:clamp(28px,3.4vw,44px);margin:14px 0 0}
html:root .hs-contact-in .hs-hero-lead{color:var(--ink2)}
html:root .hs-contact-cards{display:grid;gap:14px}
html:root .hs-contact-card{
  display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:18px 20px;transition:border-color .2s,transform .3s var(--ease);
}
html:root a.hs-contact-card:hover{transform:translateX(4px);border-color:var(--gold-dk)}
html:root .hs-contact-card svg{width:24px;height:24px;color:var(--red);flex:none}
html:root .hs-contact-card strong{display:block;font-size:15px}
html:root .hs-contact-card span{display:block;font-size:12.5px;color:var(--ink3)}
@media (max-width:860px){html:root .hs-contact-in{grid-template-columns:1fr;gap:30px}}

/* ==========================================================================
   06  PRODUKTOVÉ DLAŽDICE (výpisy kategorií i bloky na úvodní straně)
   ========================================================================== */
/* Pozn.: carousely (slick / owl) si mřížku přebít nesmí — rozbilo by je to. */
html:root .products-block:not(.slick-slider):not(.slick-initialized):not(.owl-carousel):not(.carousel),html:root #products.products:not(.slick-slider):not(.owl-carousel){
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}
html:root .products-block:not(.slick-slider):not(.slick-initialized):not(.owl-carousel):not(.carousel) > .product,html:root #products.products:not(.slick-slider):not(.owl-carousel) > .product{
  width:auto !important;max-width:none !important;float:none !important;
  padding:0 !important;margin:0 !important;border:0 !important;
}
@media (max-width:520px){
  html:root .products-block:not(.slick-slider):not(.slick-initialized):not(.owl-carousel):not(.carousel),html:root #products.products:not(.slick-slider):not(.owl-carousel){grid-template-columns:1fr}
}

html:root .product .p,html:root .products-block .p{
  position:relative;height:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
html:root .product .p:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}

html:root .product .image,html:root .product .p .image{
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(160deg,#fff,var(--paper-dk));
  padding:22px;height:190px;border:0;margin:0;
}
html:root .product .image img,html:root .product .p .image img{
  max-height:100%;max-width:100%;width:auto;object-fit:contain;
  transition:transform .5s var(--ease);
}
html:root .product .p:hover .image img{transform:scale(1.08)}

html:root .product .p-in,html:root .product .p-in-in{padding:0;display:flex;flex-direction:column;flex:1}
html:root .product .p-in{padding:16px 18px 20px;gap:7px}
html:root .product .name,html:root .product a.name{
  font-family:var(--ff-display);font-size:17px;line-height:1.3;color:var(--ink);font-weight:600;
  display:block;margin:0;
}
html:root .product .name:hover,html:root .product a.name:hover{color:var(--red)}
html:root .product .p-desc,html:root .product .short-description{font-size:12.5px;color:var(--ink3);line-height:1.5}
html:root .product .availability,html:root .product .availability-label{font-size:12px;color:var(--ink3)}
html:root .product .availability-amount{color:var(--gold-dk)}

html:root .product .p-bottom{margin-top:auto;padding-top:12px;border:0;display:flex;flex-direction:column;gap:10px}
html:root .product .prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0}
html:root .product .price-final,html:root .product .price-final strong,html:root .product strong.price-final{
  font-family:var(--ff-display);font-size:19px;color:var(--ink);font-weight:600;
}
html:root .product .price-standard,html:root .product .price-standard span{
  color:var(--ink3);font-size:14px;text-decoration:line-through;font-family:var(--ff-body);
}
html:root .product .price-save,html:root .product .flag-discount{color:var(--red)}
html:root .product .p-tools{padding:0;border:0;display:flex;gap:8px;align-items:center}
html:root .product .p-tools .btn,html:root .product .p-tools .add-to-cart-button,html:root .product .btn-cart{
  flex:1;padding:11px 16px;font-size:13.5px;
}

/* Štítky (akce, novinka, tip, doprava zdarma) */
html:root .flags,html:root .product .flags{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:6px}
html:root .flag,html:root .flag span,html:root .product .flag{
  border-radius:999px !important;background:var(--ink);color:var(--paper);
  font-family:var(--ff-body);font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 11px;line-height:1.3;box-shadow:none;
}
html:root .flag-discount,html:root .flag-discount span,html:root .flag.discount{background:var(--red) !important;color:#fff !important}
html:root .flag-new,html:root .flag-new span,html:root .flag.new{background:var(--gold) !important;color:var(--dark) !important}
html:root .flag-tip,html:root .flag-tip span,html:root .flag-action,html:root .flag-action span{background:var(--ink) !important;color:var(--paper) !important}
html:root .flag-freeshipping span{background:var(--gold-dk) !important;color:#fff !important}

/* Hvězdičkové hodnocení */
html:root .stars,html:root .ratings-wrapper .stars,html:root .star-wrapper{color:var(--gold-dk)}
html:root .stars .star,html:root .stars-label{color:var(--ink3);font-size:12.5px}

/* Nadpisy produktových bloků na úvodní straně */
html:root .homepage-group-title,html:root h2.homepage-group-title,html:root .products-block-header,html:root #content .homepage-group-title{
  font-family:var(--ff-display);font-size:clamp(26px,3vw,38px);color:var(--ink);
  text-align:left;margin:0 0 30px;padding:0;border:0;text-transform:none;letter-spacing:0;
}
html:root .homepage-group-title::after,html:root .products-block-header::after{display:none}
html:root body.hs-page-index .products-block{margin-bottom:56px}

/* Bannery na úvodní straně */
html:root .banners-row,html:root .banner-wrapper{gap:22px}
html:root .banner-wrapper img,html:root .banners-row img{border-radius:20px}

/* ==========================================================================
   07  KATEGORIE
   ========================================================================== */

/* Tmavý hero pruh (vkládá JS na kategoriích, detailu, košíku a stránkách) */
html:root .hs-page-hero{background:var(--dark);color:#fff;padding:40px 0 32px}
html:root .hs-page-hero h1,html:root .hs-page-hero .h1{color:#fff;font-size:clamp(30px,4vw,46px);margin:14px 0 0}
html:root .hs-page-hero .hs-eyebrow{color:var(--gold)}
html:root .hs-page-hero-sub,html:root .hs-page-hero p{margin-top:16px;font-size:15px;line-height:1.6;color:var(--steel);max-width:620px}
html:root .hs-page-hero-sub a{color:var(--gold)}
/* Počet kusů pod přejmenovaným nadpisem košíku "Vaše sbírka" — vkládá
   initCartCollectionHeading() (script.js). */
html:root .hs-cart-collection-sub{margin:6px 0 0;font-size:13.5px;color:var(--steel-dk);letter-spacing:.02em}
/* Drobečková navigace v tmavém pruhu.
   POZOR: doplněk dělá z .breadcrumbs samostatný SVĚTLÝ pruh přes celou šířku
   (`background-color:var(--colors-surface-primary)` = bílá, spodní rámeček,
   `margin-left/right:-20px`) a vlastní oddělovače kreslí přes `a::before/::after`,
   zatímco skutečný `.navigation-bullet` schovává. V tmavém heru to vypadalo
   jako prázdný bílý pruh s bílým (neviditelným) textem — proto všechno tohle
   chrome uvnitř heru resetujeme a oddělovač si vrátíme vlastní. */
html:root .hs-page-hero .breadcrumbs,html:root .hs-page-hero .hs-crumbs{
  background:transparent !important;border:0 !important;margin:0 !important;
  width:auto;max-width:none;box-shadow:none !important;
  padding:0 0 6px;font-size:13px;color:var(--steel);display:flex;flex-wrap:wrap;gap:0;align-items:center;
}
html:root .hs-page-hero .breadcrumbs > span{display:inline-flex;align-items:center;min-height:0}
html:root .hs-page-hero .breadcrumbs > span > a,
html:root .hs-page-hero .breadcrumbs > span > span{
  display:inline-block !important;padding:0 !important;min-height:0 !important;font-size:13px;
}
/* Oddělovače doplňku (svislé čárky kreslené na odkazu) v heru nechceme. */
html:root .hs-page-hero .breadcrumbs > span > a::before,
html:root .hs-page-hero .breadcrumbs > span > a::after{display:none !important}
/* ...místo nich vrátíme skutečný „/", který doplněk schovává. */
html:root .hs-page-hero .breadcrumbs .navigation-bullet{
  display:inline-block !important;padding:0 9px !important;color:var(--line-dark);
}
html:root .hs-page-hero .breadcrumbs a,html:root .hs-page-hero .hs-crumbs a{color:var(--steel)}
html:root .hs-page-hero .breadcrumbs a:hover,html:root .hs-page-hero .hs-crumbs a:hover{color:var(--gold)}
html:root .hs-page-hero .breadcrumbs span[itemprop=name],html:root .hs-page-hero .breadcrumbs strong{color:#fff}
/* Předloha (kategorie.html) má první drobeček jako TEXT „Domů", ne ikonu
   domečku. Doplněk kreslí domeček jako ::before na samotném .breadcrumbs
   (nese třídu navigation-home-icon-wrapper) — což navíc není odkaz, takže
   by první drobeček nešel prokliknout. V heru proto ikonu schováme
   a zviditelníme skutečný text odkazu, který Shoptet drží jako .sr-only. */
html:root .hs-page-hero .breadcrumbs::before{display:none !important}
html:root .hs-page-hero .breadcrumbs .navigation-home-icon{color:var(--steel)}
html:root .hs-page-hero .breadcrumbs .navigation-home-icon:hover{color:var(--gold)}
html:root .hs-page-hero .breadcrumbs .navigation-home-icon .sr-only{
  position:static !important;width:auto !important;height:auto !important;
  margin:0 !important;padding:0 !important;overflow:visible !important;
  clip:auto !important;clip-path:none !important;white-space:nowrap !important;
  border:0;
}
html:root .hs-page-hero-steps{display:flex;gap:14px;margin-top:22px;font-size:13px;color:var(--steel);flex-wrap:wrap}
html:root .hs-page-hero-steps span{display:flex;align-items:center;gap:8px}
html:root .hs-page-hero-steps span.is-active{color:var(--gold);font-weight:700}
html:root .hs-page-hero-steps b{width:22px;height:22px;border-radius:50%;border:1px solid currentColor;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px}

html:root body.hs-has-page-hero #content-wrapper{padding-top:36px}
html:root body.hs-has-page-hero .breadcrumbs:not(.hs-kept),html:root body.hs-has-page-hero #category-header .category-title,html:root body.hs-has-page-hero #content > h1:first-child{display:none}
/* Košík: nadpis se do pruhu jen kopíruje, originál (který Shoptet překresluje
   při přechodu mezi kroky) proto schováváme, ne přesouváme. */
html:root body.hs-page-cart.hs-has-page-hero #checkoutContent h1,html:root body.hs-page-cart.hs-has-page-hero .cart-content h1{display:none}

/* Layout se sidebarem */
html:root .content-wrapper-in{gap:40px}
html:root #categories,html:root .sidebar-inner{padding:24px 22px 28px;box-shadow:var(--shadow-sm)}
html:root #categories ul li a{display:block;padding:8px 0;font-size:14.5px;color:var(--ink2);border:0}
html:root #categories ul li a:hover,html:root #categories ul li.active > a{color:var(--red);font-weight:600}
html:root #categories ul ul li a{font-size:13.5px;color:var(--ink3);padding-left:14px}

/* Filtry — box jen na nejvyšší úrovni, jinak by se vnořené #filters
   a .filter-sections zdvojily do rámečku v rámečku. */
html:root .filters-wrapper,html:root .category-filter{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:24px 26px;box-shadow:var(--shadow-sm);margin-bottom:32px;
}
html:root .filter-section,html:root #filters .filter-section{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line2)}
html:root .filter-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
html:root .filter-section-header,html:root .filter-section h4,html:root #filters h4{
  font-family:var(--ff-body);font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink3);margin-bottom:14px;
}
html:root .filter-section label,html:root #filters label{
  display:flex;align-items:center;gap:11px;padding:6px 0;font-size:14.5px;color:var(--ink2);cursor:pointer;
}
html:root .filter-section label:hover{color:var(--ink)}
html:root .filter-section input:checked + span,html:root .filter-section .active{color:var(--ink);font-weight:600}
html:root .slider-selection,html:root .noUi-connect{background:var(--red) !important}
html:root .noUi-handle{border-color:var(--ink) !important;border-radius:50% !important;box-shadow:var(--shadow-sm) !important}
html:root .selected-filters .selected-filter,html:root .active-filters a{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;
}

/* Řazení a počty */
html:root #sorting,html:root .category-sorting,html:root .sorting-wrapper{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line);
}
html:root #sorting select,html:root .category-sorting select{
  border-radius:999px;padding:10px 16px;font-size:14px;border:1px solid var(--line);background:var(--paper);
}
html:root #sorting a,html:root .sorting-title{font-size:13.5px;color:var(--ink3)}
html:root #sorting a.active,html:root #sorting .active{color:var(--ink);font-weight:700}
html:root .category-perex,html:root #category-perex,html:root .category-description{
  color:var(--ink2);font-size:15px;line-height:1.7;max-width:70ch;
}

/* Stránkování */
html:root .pagination,html:root .pagination-wrapper{display:flex;justify-content:center;gap:8px;margin:44px 0 0;padding:0}
html:root .pagination a,html:root .pagination span,html:root .pagination-wrapper a{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--line);background:var(--paper);
  font-size:14px;font-weight:600;color:var(--ink2);transition:all .2s;
}
html:root .pagination a:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
html:root .pagination .active,html:root .pagination .active a,html:root .pagination-wrapper .active{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}

/* Prázdný výpis */
html:root .category-empty,html:root .no-products,html:root #products:empty{
  text-align:center;padding:70px 20px;background:var(--paper);border:1px solid var(--line);border-radius:20px;
}

/* ==========================================================================
   07b KATEGORIE — podle skutečné šablony (Shoptet Classic gen 3, catalog3)
   --------------------------------------------------------------------------
   Sekce 07 výše cílí na obecné/odhadnuté názvy tříd. Tahle sekce cílí na
   SKUTEČNÉ třídy, které HASAKI.cz vykresluje (ověřeno z inspectu kategorie
   /kuchynske-noze/) — strom kategorií jsou vnořené <div>, ne <ul><li>,
   filtry mají jQuery UI slider, stránkování je BEM (.pagination__*) atd.
   ========================================================================== */

/* Dvousloupcé rozvržení jen tam, kde skutečně existuje postranní panel
   (na úvodní straně je content-wrapper-in jednosloupcový).
   990px, ne 900px — doplněk/šablona na tuhle šířku schovává „.sidebar"
   (display:none), takže by pod 990 zůstal prázdný sloupec 260px místo
   kategorií, kdybychom se zlomili dřív nebo později. */
html:root body.multiple-columns-body .content-wrapper-in{
  display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;
}
@media (max-width:990px){
  html:root body.multiple-columns-body .content-wrapper-in{grid-template-columns:1fr}
}

/* --- Postranní panel: box + nadpis -------------------------------------- */
html:root .pageElement__heading{
  font-family:var(--ff-body);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 16px;
}
html:root .sidebar .box{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:22px 22px 6px;margin-bottom:20px;box-shadow:var(--shadow-sm);
}
html:root .sidebar .box.box-filters{background:transparent;border:0;box-shadow:none;padding:0;margin:0}

/* --- Strom kategorií (#categories — vnořené divy .categories/.topic/ul) */
html:root #categories{padding:0;background:transparent;border:0}
html:root #categories .categories{border-bottom:1px solid var(--line2)}
html:root #categories .categories:last-child{border-bottom:0}
html:root #categories .topic{position:relative}
html:root #categories .topic a{
  display:block;padding:11px 26px 11px 0;font-size:14.5px;font-weight:600;color:var(--ink2);
}
html:root #categories .topic a:hover{color:var(--red)}
html:root #categories .topic.active > a{color:var(--red)}
html:root #categories .categories.expandable > .topic .cat-trigger{
  position:absolute;right:0;top:0;bottom:0;width:26px;cursor:pointer;
}
html:root #categories .categories.expandable > .topic .cat-trigger::before{
  content:'';position:absolute;top:50%;left:50%;width:7px;height:7px;
  margin:-5px 0 0 -5px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
  transform:rotate(45deg);transition:transform .2s;
}
html:root #categories .categories.expandable.expanded > .topic .cat-trigger::before{
  transform:rotate(-135deg);margin-top:-3px;
}
html:root #categories .categories > ul{list-style:none;margin:0 0 8px;padding:0 0 0 12px;display:none}
html:root #categories .categories > ul.expanded{display:block}
html:root #categories .categories > ul li a{display:block;padding:7px 0;font-size:13.5px;color:var(--ink3)}
html:root #categories .categories > ul li a:hover{color:var(--red)}

/* --- Dlaždice podkategorií nad výpisem (ul.subcategories.with-image) ---- */
html:root ul.subcategories.with-image{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;
  list-style:none;margin:0 0 40px;padding:0;
}
html:root ul.subcategories.with-image > li{width:auto !important;float:none !important;padding:0 !important}
html:root ul.subcategories.with-image a{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:22px 12px;border-radius:18px;background:var(--paper);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
html:root ul.subcategories.with-image a:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold-dk);
}
html:root ul.subcategories.with-image .image{
  display:flex;align-items:center;justify-content:center;width:100%;height:60px;
}
html:root ul.subcategories.with-image .image img{max-height:100%;max-width:100%;object-fit:contain;opacity:.8}
html:root ul.subcategories.with-image .text{font-family:var(--ff-display);font-size:14px;color:var(--ink);font-weight:600}

/* --- „Nejprodávanější" — vodorovný pás bestsellerů (#productsTop) ------- */
html:root .products-top-wrapper{margin:0 0 44px}
html:root .products-top-header{
  font-family:var(--ff-display);font-size:clamp(22px,2.4vw,30px);margin:0 0 20px;color:var(--ink);
}
html:root #productsTop.products{
  display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;margin:0;list-style:none;
}
html:root #productsTop .product{flex:0 0 220px;width:auto !important;padding:0 !important}
html:root #productsTop .product.inactive{display:none}
html:root .products-top-wrapper .button-wrapper{margin-top:14px;text-align:center}
html:root .toggle-top-products{
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:11px 22px;
  font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .2s;
}
html:root .toggle-top-products:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* --- Řazení + počet položek (#category-header) -------------------------- */
html:root #category-header{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
html:root .listSorting__controls{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
html:root .listSorting__control{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;transition:all .2s;
}
html:root .listSorting__control:hover{border-color:var(--ink);color:var(--ink)}
html:root .listSorting__control--current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
html:root .listItemsTotal{font-size:14px;color:var(--ink2);order:-1}
html:root .listItemsTotal strong{color:var(--ink);font-family:var(--ff-display)}

/* --- Nadpis „Filtry" + „Zrušit filtry" (vkládá script.js) ------- */
html:root .hsh-filters-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:18px;border-bottom:1px solid var(--line2);margin-bottom:20px;
}
html:root .hsh-filters-head h2{font-size:19px;margin:0}
html:root .hsh-filters-clear{
  background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-family:var(--ff-body);font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;white-space:nowrap;
}
html:root .hsh-filters-clear:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* --- Filtry (#filters-wrapper) — vnitřní patra bez vlastního rámečku ----
   POZOR: reálné CSS doplňku/šablony má „.filters{display:none}" jak pod
   767px, tak „#content .filters{display:none}" nad 768px — #filters je
   tedy schovaný ÚPLNĚ VŽDY, na všech šířkách, a viditelný ho dělá teprve
   JS šablony přesunutím/odkrytím jinam. My ho ukazujeme sami: na desktopu
   rovnou (přebijeme přes html:root specificitu), na mobilu (jako
   v předloze — .shop-filter-toggle) až po kliknutí na tlačítko „Otevřít
   filtr" (skutečný prvek Shoptetu, ne náš vlastní). Stav dává
   script.js jako třídu na <body>, ne na .filters-wrapper — Shoptet
   po zaškrtnutí filtru překresluje #filters-wrapper přes AJAX
   (ShoptetDOMPageAjaxLoaded), takže by se třída na smazaném uzlu ztratila
   a panel by se po každém kliknutí zase zavřel. */
html:root #filters{display:block}
html:root .filters-unveil-button-wrapper{display:none}
html:root .filters-unveil-button-wrapper .unveil-button{
  display:none;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .2s;
}
html:root .filters-unveil-button-wrapper .unveil-button:hover{border-color:var(--ink)}
html:root .filters-unveil-button-wrapper .unveil-button::after{content:'⌄';font-size:11px;transition:transform .2s}
html:root body.hs-filters-open .filters-unveil-button-wrapper .unveil-button::after{transform:rotate(180deg)}
/* 990px, ne 900px — na tuhle šířku doplněk/šablona schovává .sidebar
   (kategorie); sjednoceno, ať se layout nepřelamuje ve dvou různých bodech. */
@media (max-width:990px){
  html:root .filters-unveil-button-wrapper{display:block;margin-bottom:16px}
  html:root .filters-unveil-button-wrapper .unveil-button{display:inline-flex}
  html:root #filters{display:none}
  html:root body.hs-filters-open #filters{display:block}
}

html:root .slider-wrapper{margin-bottom:22px}
html:root .slider-wrapper h4{
  font-family:var(--ff-body);font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink3);margin:0 0 12px;
}
html:root .slider-header{display:flex;justify-content:space-between;font-size:14px;color:var(--ink);font-weight:600;margin-bottom:16px}
html:root .slider-content{padding:0 8px}
html:root .ui-slider.ui-widget-content{position:relative;height:4px;background:var(--line);border-radius:999px;border:0}
html:root .ui-slider .ui-slider-range{position:absolute;height:100%;background:var(--gold);border-radius:999px;top:0}
html:root .ui-slider .ui-slider-handle{
  position:absolute;top:50%;width:18px;height:18px;margin-left:-9px;margin-top:-9px;
  background:var(--paper);border:2px solid var(--ink);border-radius:50%;cursor:pointer;outline:0;
}

html:root .filter-sections .filter-section{padding:16px 0 !important;margin-bottom:0 !important;border-bottom:0 !important;border-top:1px solid var(--line2)}
html:root .filter-sections .filter-section:first-child{border-top:0;padding-top:0 !important}
html:root .filter-section label.filter-label{
  display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;color:var(--ink2);cursor:pointer;
  transition:color .2s;
}
html:root .filter-section label.filter-label:hover{color:var(--ink)}
html:root .filter-section label.filter-label.disabled{opacity:.4;cursor:not-allowed}
/* POZOR: nativní checkbox NEZVĚTŠOVAT. Apeti ho přes příznak
   `ums_forms_redesign--on` na <body> schovává do 1×1 px s position:absolute
   a kreslí vlastní ovládací prvek. Když se mu vrátí velikost, zůstane
   absolutně pozicovaný a leze přes text štítku jako černý čtverec.
   Čtvereček proto kreslíme na labelu (::before), stejně jako u kategorií. */
html:root .filter-section input[type=checkbox],
html:root .filter-section input[type=radio]{
  position:absolute !important;width:1px !important;height:1px !important;
  margin:-1px !important;padding:0 !important;border:0 !important;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
/* Apeti kreslí čtvereček jako `label::before` (rámeček) + `label::after`
   (výplň), oba ABSOLUTNĚ na left:0. Náš štítek je flex, takže by text začínal
   na stejné souřadnici a čtvereček by mu ležel přes první písmeno. Vracíme
   ::before do normálního toku jako flex položku a ::after (výplň doplňku)
   rušíme — fajfku kreslíme obrázkem na ::before. */
html:root .filter-section label.filter-label::after{display:none !important}
html:root .filter-section label.filter-label::before{
  content:'' !important;display:block !important;position:static !important;
  top:auto !important;left:auto !important;transform:none !important;
  width:17px !important;height:17px !important;flex:none;
  border:1.5px solid var(--line) !important;border-radius:4px !important;
  background-color:var(--paper) !important;background-image:none !important;
  transition:background-color .2s,border-color .2s;
}
html:root .filter-section input[type=radio] + label.filter-label::before{border-radius:50% !important}
html:root .filter-section label.filter-label:hover::before{border-color:var(--ink3) !important}
html:root .filter-section input[type=checkbox]:checked + label.filter-label::before,
html:root .filter-section input[type=radio]:checked + label.filter-label::before{
  background-color:var(--red) !important;border-color:var(--red) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") !important;
  background-size:11px;background-position:center;background-repeat:no-repeat;
}
html:root .filter-section label.filter-label.disabled::before{opacity:.4}
/* Zaškrtnutý filtr — input a label jsou sourozenci (for/id), ne vnořené,
   proto input:checked + label, ne :checked + span. */
html:root .filter-section input[type=checkbox]:checked + label.filter-label{color:var(--ink);font-weight:600}
html:root .filter-section .filter-count{margin-left:auto;color:var(--ink3);font-size:12.5px}
html:root .filter-section-button{padding:10px 0 0 !important}
html:root .toggle-filters{
  display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--red);cursor:pointer;
}
html:root .toggle-filters::after{content:'⌄';font-size:11px;transition:transform .2s}
html:root .toggle-filters.expanded::after,html:root .expanded > .toggle-filters::after{transform:rotate(180deg)}
html:root .filter-section-manufacturer h4{
  font-family:var(--ff-body);font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink3);margin:0 0 10px;
}
html:root .filter-total-count{font-size:13px;color:var(--ink3)}
html:root .filter-total-count strong{color:var(--ink);font-weight:700}

/* --- Barevné/velikostní varianty pod kartou (.widget-parameter-wrapper) - */
html:root .widget-parameter-wrapper{margin-top:8px}
html:root .widget-parameter-list{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
html:root .widget-parameter-list a{
  font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink2);
}
html:root .widget-parameter-list a:hover{border-color:var(--ink);color:var(--ink)}
html:root .widget-parameter-more{font-size:12px;color:var(--ink3);margin-top:4px}

/* --- Načíst více / stránkování ------------------------------------------- */
html:root .loadMore{display:flex;justify-content:center;margin:34px 0 10px}
html:root .loadMore__button{
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:14px 32px;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .2s;
}
html:root .loadMore__button:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

html:root nav.pagination{display:flex;justify-content:center;margin:10px 0 0}
html:root .pagination__list{display:flex;gap:8px;list-style:none;margin:0;padding:0}
html:root .pagination__currentPage,html:root .pagination__link{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--line);background:var(--paper);
  font-size:14px;font-weight:600;color:var(--ink2);transition:all .2s;
}
html:root .pagination__currentPage{background:var(--ink);border-color:var(--ink);color:var(--paper)}
html:root .pagination__link:hover{border-color:var(--ink);color:var(--ink)}

html:root .itemsTotal{text-align:center;font-size:13px;color:var(--ink3);margin-top:18px}
html:root .itemsTotal strong{color:var(--ink);font-weight:700}
html:root .goToTop{display:flex;justify-content:center;margin-top:16px}
html:root .goToTop__button{
  background:transparent;border:0;color:var(--ink3);font-size:13px;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
}
html:root .goToTop__button:hover{color:var(--red)}

/* ==========================================================================
   07c KATEGORIE — dorovnání 1:1 na předlohu kategorie.html
   --------------------------------------------------------------------------
   Předloha měla: tmavý pruh s podnadpisem → dvousloupec 260px/1fr →
   VLEVO jedna bílá karta „Filtry" se skupinami → VPRAVO toolbar
   (počet položek + <select> řazení) a mřížka produktů o 4 sloupcích.

   Shoptet vykresluje totéž jinak, proto:
     · #filters-wrapper stěhuje script.js do #filters-default-position —
       prázdného slotu, který má šablona v postranním panelu připravený sama.
       Její vlastní JS ho v blank-mode nenaplní, proto filtry visely nad
       výpisem produktů. Stěhuje se uzel s ID, ne jeho obsah: Shoptet po
       zaškrtnutí filtru překresluje právě #filters-wrapper podle ID, takže
       ho najde i v panelu a filtry se nevrátí zpátky nahoru.
     · Řazení má Shoptet jako řádek tlačítek; script.js z nich staví <select>
       jako v předloze (tlačítka zůstanou v DOMu, jen schovaná — kdyby na ně
       spoléhal JS šablony).
   ========================================================================== */

/* --- Postranní panel = JEDNA karta ---------------------------------------
   Bez tohohle se sečtou tři pravidla ze sekcí 03/06/07b a vznikne
   karta v kartě v kartě (.sidebar-inner > .box > #categories). */
html:root .sidebar .sidebar-inner{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:24px 22px 28px;box-shadow:var(--shadow-sm);position:sticky;top:110px;
}
html:root .sidebar .sidebar-inner .box,
html:root .sidebar .sidebar-inner .box.box-filters{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--line2);
}
html:root .sidebar .sidebar-inner > .box:last-child{
  border-bottom:0;margin-bottom:0;padding-bottom:0;
}
html:root .sidebar #categories{
  background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;
}
/* Přestěhované filtry nesmí mít vlastní rámeček — ten dostávají ze sekce 06
   jako .filters-wrapper, uvnitř panelu by to byl rámeček v rámečku. */
html:root .sidebar .filters-wrapper{
  background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;
}
html:root .sidebar #filters-wrapper{margin:0}
html:root .sidebar .pageElement__heading,html:root .sidebar .box-title{
  font-family:var(--ff-body);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 14px;
}
@media (max-width:990px){
  html:root .sidebar .sidebar-inner{position:static}
}

/* --- Toolbar nad výpisem: počet vlevo, řazení vpravo -------------------- */
html:root #category-header{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line);
}
html:root #category-header .listSorting{margin-left:auto}
html:root #category-header .listSorting__controls{display:none}  /* nahrazeno <select>em */
html:root .hs-sort{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink3)}
html:root .hs-sort-select{
  font-family:var(--ff-body);font-size:14px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer;
}
html:root .hs-sort-select:focus{outline:0;border-color:var(--gold-dk)}
html:root .listItemsTotal{order:-1;font-size:14px;color:var(--ink2)}
html:root .listItemsTotal strong{color:var(--ink);font-family:var(--ff-display);font-weight:600}
@media (max-width:520px){
  html:root #category-header{flex-direction:column;align-items:stretch}
  html:root #category-header .listSorting{margin-left:0}
  html:root .hs-sort{justify-content:space-between}
}

/* --- Mřížka produktů ----------------------------------------------------
   Předloha měla natvrdo 4 sloupce, jenže počítala s krátkými demo názvy
   („Gyuto Damašek 210 mm"). Při kontejneru 1220 px a panelu 260 px vychází
   na kartu jen 201 px — reálné názvy (~68 znaků) se v ní lámaly do čtyř
   řádků a dlaždice byly vytáhlé do výšky.

   Místo pevného počtu sloupců proto držíme MINIMÁLNÍ ŠÍŘKU KARTY 250 px
   a počet sloupců si mřížka dopočítá sama:
     hlavní sloupec 872 px  → 3 sloupce po 276 px
     bez panelu (≤990) 942 px → 3 sloupce po 300 px
     úzký panel 700 px      → 2 sloupce
   Na úvodní straně (bez panelu, 1172 px) vyjdou 4 sloupce po 276 px —
   stejná šířka karty jako na kategorii, takže obojí vypadá jednotně.

   `auto-fill` (ne `auto-fit`) je schválně: při jediném produktu nechá
   zbylé stopy prázdné a karta si drží normální šířku místo roztažení
   přes celý výpis. */
html:root #products.products-page:not(.slick-slider):not(.owl-carousel){
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}

/* --- Dlaždice podkategorií: předloha je nemá ----------------------------
   Duplikují strom kategorií v panelu a Shoptet k nim servíruje jen zástupný
   obrázek složky, takže se vykreslovaly jako prázdné šedé pilulky se šipkou.
   Zapnout: HASAKI_CONFIG.category.subcategoryTiles = true */
html:root body:not(.hs-show-subcats) #content ul.subcategories{display:none}

/* Pás „Nejprodávanější" — vypnutelný přes category.topProducts = false */
html:root body.hs-hide-top-products .products-top-wrapper{display:none}

/* ==========================================================================
   07d KATEGORIE — tvrdé dorovnání na návrh
   --------------------------------------------------------------------------
   Sekce potlačuje prvky výchozí šablony, které v návrhu nejsou, a přetváří
   ty, které vypadají jinak. Priorita je vizuální shoda s předlohou, proto se
   tady nešetří s !important ani s display:none.
   ========================================================================== */

/* --- Toolbar: počet VLEVO, řazení VPRAVO -------------------------------
   Pořadí drží i přesun v DOMu (script.js → initToolbarOrder); CSS `order`
   samo o sobě nestačilo, přebíjela ho pravidla šablony. */
html:root #category-header{
  display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;
  align-items:center !important;justify-content:space-between !important;
}
html:root #category-header .listItemsTotal{order:-1 !important;margin:0 !important}
html:root #category-header .listSorting{margin-left:auto !important;order:1 !important}

/* --- Rozbalovací seznam řazení jako v návrhu ---------------------------- */
html:root .hs-sort span{white-space:nowrap}
html:root .hs-sort-select{
  -webkit-appearance:none;appearance:none;min-width:190px;
  padding:11px 42px 11px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141311' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;
}

/* --- Strom kategorií jako zaškrtávací skupina --------------------------
   Návrh má v panelu skupinu KATEGORIE se čtverečky, ne odsazený strom
   odkazů. Shoptet tu vykresluje navigaci, ne filtr — čtvereček je proto
   jen vizuální (::before), kliknutí dál normálně přejde do kategorie. */
html:root #categories .categories{border-bottom:0 !important;margin:0 !important}
html:root #categories .topic{margin:0}
html:root #categories .topic > a{
  display:flex !important;align-items:center;gap:11px;
  padding:7px 0 !important;font-size:14.5px;font-weight:400;color:var(--ink2);
  background:none;transition:color .2s;
}
html:root #categories .topic > a::before{
  content:'';width:17px;height:17px;flex:none;border-radius:4px;
  border:1.5px solid var(--line);background:var(--paper);
  transition:background-color .2s,border-color .2s;
}
/* Apeti maluje aktivní/hoverovanou položku stromu vlastním plným pozadím
   (`.categories .topic.active>a:hover{background-color:var(--color-primary)}`) —
   bez explicitního resetu tu probleskne přes naši barvu textu plná barevná
   plocha přes celý řádek, i když skin žádné pozadí na hoveru nechce (jen
   barva textu a rámečku čtverečku). */
html:root #categories .topic > a:hover{color:var(--ink);background:none}
html:root #categories .topic > a:hover::before{border-color:var(--ink3)}
html:root #categories .topic.active > a{color:var(--ink);font-weight:600}
html:root #categories .topic.active > a::before{
  background-color:var(--red);border-color:var(--red);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}
/* Podkategorie a rozbalovací šipka — návrh je nemá.
   Zpět je zapne HASAKI_CONFIG.category.sidebarSubcategories = true */
html:root body:not(.hs-sidebar-subcats) #categories .categories > ul{display:none !important}
html:root body:not(.hs-sidebar-subcats) #categories .cat-trigger{display:none !important}
html:root body.hs-sidebar-subcats #categories .categories > ul{padding-left:28px}

/* --- Karta produktu: doladění na návrh ---------------------------------- */
/* Shoptet píše dostupnost inline stylem (style="color:#20c52c") — zelená
   do palety nepatří, přebíjíme ji. V návrhu je na tomhle místě šedý řádek
   s parametry; ten Shoptet nemá (viz poznámka o serverových datech). */
html:root .product .availability span,
html:root .product .availability .show-tooltip,
html:root .product .availability .acronym{
  color:var(--ink3) !important;font-size:12.5px !important;font-weight:400 !important;
  border:0 !important;text-decoration:none !important;
}
html:root body.hs-hide-availability .product .availability{display:none !important}

/* Prázdné placeholdery hodnocení zabíraly místo a rozhazovaly výšku karet */
html:root .stars-placeholder:empty,
html:root .ratings-wrapper:empty{display:none !important}
html:root .ratings-wrapper{margin:0;padding:0}

/* Pozn.: .p-tools („Detail" / „Do košíku") se NESCHOVÁVÁ — v návrhu je z něj
   pilulka vyjíždějící zpod obrázku. Řeší sekce 13 níže. */

/* --- Přebití pravidel doplňku Apeti ------------------------------------- */
/* 0) Apeti dává `.sidebar` PEVNOU šířku (290px základ, 295px nad 768/992px,
      240px pod 1100px). V našem gridu 260px/1fr tím panel z vlastního sloupce
      přetékal do výpisu. Šířku řídí mřížka, ne prvek. */
html:root .sidebar,
html:root .sidebar.sidebar-left{
  width:auto !important;max-width:none !important;float:none !important;
  /* Apeti dává .sidebar navíc bílé pozadí (#fff) a odsazení — prosvítalo to
     kolem krémové karty a vypadalo jako druhý rámeček za panelem. */
  background:transparent !important;padding:0 !important;border:0 !important;box-shadow:none !important;
}

/* Apeti podbarvuje řádek řazení bíle; návrh ho má na pozadí stránky. */
html:root #category-header,
html:root #category-header .listSorting{background:transparent !important;box-shadow:none !important}

/* 1) Apeti: `.listItemsTotal{display:none}` a `block` teprve od 768px, takže
      počet položek na mobilu úplně zmizel. */
html:root #category-header .listItemsTotal{display:block !important}

/* 2) Apeti: `@media (max-width:990px){.sidebar{display:none}}` — celý postranní
      panel je pod 990px schovaný. Dokud v něm byly jen kategorie, nevadilo to
      (jsou i v hamburgeru), ale filtry jsme do něj přesunuli, takže by na
      mobilu nešlo filtrovat vůbec. Vracíme panel zpátky; v mřížce 1fr sedne
      nad výpis produktů — přesně jako panel v předloze. Filtry uvnitř zůstávají
      sbalené pod tlačítkem „Otevřít filtr". */
@media (max-width:990px){
  html:root .sidebar,
  html:root .sidebar.sidebar-left{display:block !important}
  html:root .sidebar .sidebar-inner{display:block !important;margin-bottom:28px}
}

/* ==========================================================================
   08  DETAIL PRODUKTU
   ========================================================================== */
html:root .p-detail{padding:30px 0 12px}
html:root .p-detail-inner{display:block}
html:root .p-detail-inner-header h1,html:root .p-detail h1{font-size:clamp(26px,3vw,38px);margin:0 0 8px}

/* Galerie */
html:root .p-image-wrapper,html:root .p-image{
  position:relative;background:linear-gradient(160deg,#fff,var(--paper-dk));
  border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-md);overflow:hidden;
}
/* Vnitřní .p-image nesmí přemalovat vodoznak, který leží pod ním. */
html:root .p-image-wrapper .p-image{border:0;box-shadow:none;border-radius:0;background:transparent}
html:root .p-image img,html:root .p-main-image img{position:relative;z-index:1;padding:6%;max-width:100%;height:auto;margin:0 auto}
/* Vodoznak 刃 za fotkou produktu (vkládá JS) */
html:root .hs-kanji-watermark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:clamp(140px,20vw,320px);line-height:1;
  color:rgba(20,19,17,.045);pointer-events:none;user-select:none;z-index:0;overflow:hidden;
}
html:root .p-thumbnails-wrapper,html:root .p-thumbnails{margin-top:14px}
html:root .p-thumbnails img,html:root .p-thumbnails-inner img{
  border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:6px;transition:border-color .2s;
}
html:root .p-thumbnails a:hover img,html:root .p-thumbnails .active img{border-color:var(--gold-dk)}
html:root .p-detail .flags{top:20px;left:20px}

/* Informační sloupec */
html:root .p-info-wrapper{padding-top:2px}
html:root .p-short-description,html:root .p-detail .description-inner{color:var(--ink2);font-size:15.5px;line-height:1.7;max-width:52ch}
html:root .p-final-price-wrapper,html:root .price-final-holder,html:root .p-detail .prices{margin:18px 0 4px}
html:root .p-final-price-wrapper .price-final,html:root .price-final-holder strong,html:root .p-detail .price-final strong{
  font-family:var(--ff-display);font-size:clamp(26px,2.6vw,34px);color:var(--ink);font-weight:600;
}
html:root .p-detail .price-standard,html:root .p-final-price-wrapper .price-standard{
  color:var(--ink3);font-size:19px;text-decoration:line-through;font-family:var(--ff-body);font-weight:500;
  margin-right:12px;
}
html:root .p-detail .price-save,html:root .price-save{color:var(--red);font-size:14px;font-weight:600}

/* Parametry */
html:root .detail-parameters,html:root .p-detail .detail-parameters{
  width:100%;border-collapse:collapse;font-size:14px;margin:22px 0 0;
  border-top:1px solid var(--line2);
}
html:root .detail-parameters tr{border-bottom:1px solid var(--line2)}
html:root .detail-parameters th,html:root .detail-parameters td{padding:11px 0;text-align:left;vertical-align:baseline;border:0}
html:root .detail-parameters th{color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;font-weight:600;width:42%}
html:root .detail-parameters td{color:var(--ink);font-weight:600;text-align:right}

/* Varianty */
html:root .p-detail .advanced-parameter,html:root .variant-list label,html:root .parameter-values label{
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
}
html:root .p-detail .advanced-parameter.active,html:root .variant-list input:checked + label{border-color:var(--ink)}

/* Množství + koupit */
html:root .add-to-cart,html:root #product-detail-form .add-to-cart{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;
}
/* border !important: Apeti má ".quantity{border:1px solid var(--template-
   color-gray)!important}" — i bez ID selektoru vyhraje nad naší vyšší
   specificitou jen díky !important, takže bez odpovědi tady měl stepper
   VŽDY šedý rámeček podle šablony, ne náš --line. padding:0 !important
   ze stejného důvodu — Apeti tam navíc přidává padding-right:30px, které
   by s naším overflow:hidden dělalo prázdnou mezeru za tlačítkem "+". */
/* Skutečné pořadí v DOM je vždy increase PŘED decrease (viz reálný
   markup košíku/detailu) — bez order by "+" bylo první zleva. label/
   input/+/- mají navíc flex-shrink:0, ať se v užším sloupci nezmenší
   pod přirozenou šířku (viz .cart-widget-product-amount .quantity, kde
   se stejná chyba poprvé odhalila). */
html:root .quantity,html:root .p-detail .quantity{
  display:inline-flex;flex-shrink:0;align-items:center;border:1px solid var(--line) !important;border-radius:999px;
  overflow:hidden;background:var(--paper);padding:0 !important;
}
html:root .quantity label{order:2;flex:none;margin:0}
html:root .quantity input,html:root .quantity .amount{
  order:2;width:52px;flex:none;border:0;background:transparent;text-align:center;font-weight:700;color:var(--ink);
  -moz-appearance:textfield;box-shadow:none;
}
html:root .quantity input::-webkit-outer-spin-button,html:root .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* !important: ".quantity span[class*=decr]" o kousek níž (kryje i staré
   varianty s krátkými třídami .incr/.decr) bere podle podřetězce, takže
   omylem chytá i ".decrease-tooltip"/".increase-tooltip" (obsahují "decr"/
   "incr") a vrací jim display:flex — obě prázdné bubliny se pak počítaly
   do šířky pilulky jako dva duchové navíc. */
html:root .quantity .increase-tooltip,html:root .quantity .decrease-tooltip{display:none !important}
html:root .quantity .decrease,html:root .quantity span[class*=decr]{order:1}
html:root .quantity .increase,html:root .quantity span[class*=incr]{order:3}
/* position:static — Apeti dává +/- tlačítkům position:absolute (vlastní
   svisle skládaný stepper, dvě šipky nad sebou přes sebe); bez resetu
   se buď nezapočítávají do šířky pilulky, nebo zůstanou vizuálně
   stacknuté jedno na druhém místo vedle sebe. */
html:root .quantity .increase,html:root .quantity .decrease,html:root .quantity span[class*=incr],html:root .quantity span[class*=decr]{
  position:static;flex:none;width:38px;height:40px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--ink2);cursor:pointer;font-size:16px;transition:background .2s,color .2s;
  /* margin:0 je oprava, ne kosmetika: Apeti dává OBĚMA tlačítkům
     `margin:0 5px 0 0`. Pravý odsazovník za "+" tlačil celou trojici
     −/číslo/+ o 5 px doleva a rozestupy vycházely nesymetricky (naměřeno
     43 px vlevo vs 38 px vpravo). Teď sedí přesně na střed pilulky. */
  margin:0;
}
html:root .quantity .increase::before,html:root .quantity .decrease::before{content:none}
/* Apeti kreslí +/− ikonovým fontem přes ::before (content:"\e911"/"\e90e") a
   textové <span class="increase__sign"> naopak schovává (display:none). My
   ikonový font ruším (content:none výš), takže znaky musí dodat zpátky ty
   spany — jinak by tlačítka zůstala prázdná. Dosud se to dělo jen NÁHODOU:
   selektor span[class*=incr] o pár řádků níž chytá "increase__sign" podle
   podřetězce. Tady je to explicitně a záměrně. */
html:root .quantity .increase__sign,html:root .quantity .decrease__sign{
  display:block !important;font-size:16px;line-height:1;font-family:var(--ff-body);
}
html:root .quantity .increase:hover,html:root .quantity .decrease:hover{background:var(--ink);color:var(--paper)}
html:root .add-to-cart .add-to-cart-button{flex:1;min-width:200px;justify-content:center}

/* Doplňkové odkazy pod tlačítkem */
html:root .p-detail .link-icons,html:root .p-detail .social-buttons{margin-top:18px}
html:root .p-detail .link-icons a{color:var(--ink3);font-size:13px}
html:root .p-detail .link-icons a:hover{color:var(--red)}

/* Důvěryhodnostní řádky, které vkládá JS — vzhled dořešený v sekci 14
   (.hs-trust), tady by šlo jen o duplicitu se stejnou specificitou. */

/* Záložky */
html:root .shp-tabs-holder,html:root .p-detail-tabs{border:0}
html:root .shp-tabs,html:root ul.shp-tabs{
  display:flex;gap:4px;list-style:none;margin:0;padding:0;
  border-bottom:1px solid var(--line);overflow-x:auto;
}
html:root .shp-tabs li{margin:0;border:0;background:none}
html:root .shp-tabs a,html:root .shp-tab-link{
  position:relative;display:block;padding:14px 20px;border:0;background:none;
  font-family:var(--ff-body);font-weight:700;font-size:14.5px;color:var(--ink3);white-space:nowrap;
  transition:color .2s;
}
html:root .shp-tabs a::after{content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:2px;
  background:transparent;transition:background .2s}
html:root .shp-tabs a:hover{color:var(--ink)}
html:root .shp-tabs li.active a,html:root .shp-tabs a.active{color:var(--ink);background:none}
html:root .shp-tabs li.active a::after,html:root .shp-tabs a.active::after{background:var(--red)}
html:root .shp-tab-content,html:root .tab-content{padding:32px 0 4px}
html:root .shp-tab-content p,html:root .tab-content p{color:var(--ink2);line-height:1.75;font-size:15.5px}

/* Související produkty */
html:root .products-related-header,html:root .products-alternative-header,html:root .p-detail h2{
  font-family:var(--ff-display);font-size:clamp(24px,2.6vw,34px);margin:0 0 26px;
}

/* Diskuze a hodnocení */
html:root .p-detail-tabs .rate-wrap,html:root .votes-wrap,html:root .comment{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:14px;
}

@media (max-width:900px){
  html:root .p-detail .add-to-cart{gap:12px}
  html:root .add-to-cart .add-to-cart-button{min-width:0;width:100%}
}

/* ==========================================================================
   09  KOŠÍK A OBJEDNÁVKA
   ========================================================================== */
html:root body.hs-page-cart #content-wrapper{background:var(--bg)}
html:root #checkoutContent,html:root .cart-content{padding-top:10px}
/* Apeti dává .cart-content bílé pozadí a 40px padding. V levém sloupci to
   znamenalo, že karty položek ležely na bílém panelu místo na krémové
   stránce (a deska vpravo si to řeší sama). Karty i co-boxy mají vlastní
   odsazení, takže padding tady jen zužoval obsah. */
html:root body.hs-page-cart .cart-row>.col-md-8>.cart-content,
html:root body.hs-page-cart #checkoutContent>.cart-content{
  background:none !important;padding:0 !important;
}
/* Sloupce se dřív dotýkaly hrana na hranu (col-md-8 končil přesně tam, kde
   začínal col-md-4) — 60px padding-left uvnitř desky vypadá jako mezera,
   ale je to vnitřní odsazení OBSAHU desky, ne skutečná mezera MEZI sloupci.
   Zmenšujeme desku o 32px a posouváme ji o stejnou hodnotu doprava — pravá
   hrana (a tím pádem šířka stránky) se nehne, jen vznikne skutečná spára
   mezi kartami položek a deskou. Jen ≥1200px: pod tím jsou sloupce beztak
   100% na sobě (viz media query níž) a margin by jen posunul desku vpravo
   mimo stránku. */
@media (min-width:1200px){
  html:root .cart-row>.col-md-4{width:calc(33.3333% - 32px) !important;margin-left:32px}
}

/* ==========================================================================
   --- Košík (/kosik/) — "MONOLIT" ------------------------------------------
   Levý sloupec = papírový pracovní stůl s samostatně osvětlenými kartami
   položek. Pravý sloupec = jedna nepřerušená deska kované ocele (viz
   .sidebar-in-cart dál). Celá stránka má jen JEDNU dominantu: obří součet
   na desce. Nic jiného s ním nesoupeří.

   Apeti dělá v .ordering-process z KAŽDÉHO <tr> vlastní kartu a skládá je
   přes tbody{display:flex;flex-wrap:wrap} po dvou vedle sebe. Přebíráme
   celé rozvržení: tbody je svislý stack, každý <tr class="removeable"> je
   grid o 4 sloupcích.

   POZOR na rozsah: stylujeme JEN tr.removeable. Do stejné tabulky Shoptet
   vkládá i jiné řádky (dárek k objednávce, slevový kupón, doplňkový
   prodej) — ty by v "kartovém" provedení vypadaly jako plnohodnotné
   položky košíku, což by bylo zavádějící. */
html:root .ordering-process .cart-table,
html:root .ordering-process table.cart-table{
  display:block;background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;width:100%;
}
/* align-items:stretch je tu KLÍČOVÉ: Apeti má na tomhle tbody
   `display:flex;flex-wrap:wrap` a bez explicitního stretch se karty
   zmenšily na obsah (~240px) místo plné šířky sloupce. */
html:root .ordering-process .cart-table tbody{
  display:flex !important;flex-direction:column;align-items:stretch;gap:12px;margin:0 !important;
}
html:root .ordering-process .cart-table tr{display:block;border:0 !important;margin:0 !important}
html:root .ordering-process .cart-table tr>td{border:0 !important;padding:0 !important}
html:root .ordering-process .cart-table tr .p-label{display:none !important}
/* Apeti zarovnává buňky na střed (a sudé i vpravo) — v kartovém provedení
   musí být VŠECHNO zleva, jinak se dlouhý název rozsype na střed. Součet si
   pravé zarovnání vrátí u sebe. Ověřeno měřením: bez tohohle přepisu měly
   .p-name i .p-availability text-align:center. */
html:root .ordering-process .cart-table tr.removeable>td{
  text-align:left !important;justify-content:flex-start;
}

/* Karta jedné položky. grid-row/-column přiřazujeme explicitně, protože
   pořadí <td> v DOM (obrázek, název, dostupnost, množství, cena/mj, součet)
   neodpovídá vizuální kompozici — a přesouvat uzly uvnitř <tr> nesmíme,
   Shoptet celý řádek při AJAX přepočtu nahrazuje novým. */
html:root .ordering-process .cart-table tr.removeable{
  display:grid !important;
  /* Pevné sloupce jsou schválně úsporné: co zbyde, dostane název. Při
     původních 96/132/152 + 24px mezerách zbylo na název jen ~175 px a
     dvouřádkové názvy se lámaly na pět řádků. */
  /* Pevné sloupce jsou schválně úsporné: co zbyde, dostane název. Při
     původních 96/132/152 + 24px mezerách zbylo na název jen ~175 px a
     dvouřádkové názvy se lámaly na pět řádků.
     Součet je minmax(148px,max-content), NE pevných 148px: "1 249 970 Kč"
     má ve 148px jen 4px rezervu a vyšší částka by se kvůli overflow:hidden
     na kartě tiše odřízla. Takhle si sloupec vezme, co potřebuje, a ubere
     se názvu (ten má minmax(0,1fr), takže se umí zmenšit). */
  grid-template-columns:88px minmax(0,1fr) 112px minmax(148px,max-content);
  column-gap:20px;row-gap:7px;align-items:center;
  position:relative;overflow:hidden;
  /* width:100% je nutnost, ne kosmetika: <tr> se ani s display:grid
     nechová jako běžný flex item — align-items:stretch na tbody ho
     neroztáhne (obyčejný <div> na stejném místě ano) a karta zůstane
     zúžená na obsah. Ověřeno měřením v prohlížeči. */
  width:100%;
  min-height:128px;padding:20px 24px !important;
  background:var(--paper);border:1px solid var(--line2) !important;border-radius:var(--r-cart) !important;
  box-shadow:var(--shadow-card);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
/* Zlatá "páteř" u levé hrany karty — jediný hover ornament na řádku. */
html:root .ordering-process .cart-table tr.removeable::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  transform:scaleY(.15);opacity:0;transform-origin:center;
  transition:transform .22s var(--ease),opacity .22s var(--ease);
}
html:root .ordering-process .cart-table tr.removeable:hover,
html:root .ordering-process .cart-table tr.removeable:focus-within{
  border-color:var(--line) !important;box-shadow:var(--shadow-md);
}
html:root .ordering-process .cart-table tr.removeable:hover::before,
html:root .ordering-process .cart-table tr.removeable:focus-within::before{transform:scaleY(1);opacity:1}

/* 1 · fotka */
html:root .ordering-process .cart-table tr.removeable .cart-p-image{
  grid-column:1;grid-row:1/4;display:block !important;
  width:88px;height:88px;border-radius:8px;overflow:hidden;
  background:var(--paper-dk);box-shadow:inset 0 0 0 1px var(--line2);
}
html:root .ordering-process .cart-table tr.removeable .cart-p-image a{display:block;width:100%;height:100%}
html:root .ordering-process .cart-table tr.removeable .cart-p-image img{
  margin:0 !important;padding:8px !important;width:100%;height:100%;object-fit:contain;
  border:0 !important;border-radius:0 !important;background:none !important;
  transition:transform .22s var(--ease);
}
html:root .ordering-process .cart-table tr.removeable:hover .cart-p-image img{transform:scale(1.03)}

/* 2 · název — varianta jde nad název jako drobný nadtitul. Text názvu je
   uvnitř <a> jen textový uzel (anonymní flex item, order 0), takže
   order:-1 na variantě ho spolehlivě předběhne bez zásahu do markupu. */
html:root .ordering-process .cart-table tr.removeable .p-name{
  grid-column:2;grid-row:1;display:block !important;min-width:0;
}
html:root .ordering-process .cart-table tr.removeable .p-name .main-link{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  font-family:var(--ff-display);font-size:clamp(18px,1.4vw,22px);line-height:1.18;
  color:var(--ink);font-weight:400;
}
html:root .ordering-process .cart-table tr.removeable .p-name .main-link:hover{color:var(--red)}
html:root .ordering-process .cart-table tr.removeable .p-name .main-link-variant{
  order:-1;margin:0 !important;font-family:var(--ff-body);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);line-height:1.4;
}

/* 3 · meta řádek: dostupnost + značka materiálu.
   Barvu dostupnosti řeší --av, kterou z inline barvy Shoptetu mapuje
   initAvailabilityTone() (script.js) na přístupný odstín — surové #20c52c
   má na papíru kontrast ~2:1 a jako text by bylo nečitelné. Tečka bere
   --av, text zůstává v --ink2, aby prošel AA i v 11px. */
html:root .ordering-process .cart-table tr.removeable .p-availability{
  grid-column:2;grid-row:2;display:flex !important;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;
}
html:root .ordering-process .cart-table tr.removeable .availability-label{
  display:inline-flex !important;align-items:center;gap:7px;
  font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2) !important;
}
html:root .ordering-process .cart-table tr.removeable .availability-label::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--av,var(--ink2));
}
/* Značka materiálu (Damašek, VG-10…) — vkládá initMaterialTag() (script.js)
   jen když skutečný název produktu obsahuje známé klíčové slovo. */
html:root .hs-material-tag{
  display:inline-block;padding:2px 9px;border:1px solid var(--gold-dk);border-radius:999px;
  font-family:var(--ff-body);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-dk);
}

/* 4 · cena za m. j. — ZÁMĚRNĚ degradovaná na metadata a odsunutá do
   levého sloupce, daleko od součtu. Dřív stály obě čísla vedle sebe a
   nebylo poznat, které je které; teď je v řádku jen JEDNO velké číslo
   (součet) a tohle je pod ním jako poznámka. */
html:root .ordering-process .cart-table tr.removeable .p-price{
  grid-column:2;grid-row:3;display:flex !important;align-items:baseline;gap:3px;
  font-family:var(--ff-body);font-size:12.5px;color:var(--ink2);
}
html:root .ordering-process .cart-table tr.removeable .p-price .price-final{
  font-family:var(--ff-body);font-size:12.5px;color:var(--ink2);font-weight:500;
}
html:root .ordering-process .cart-table tr.removeable .p-price .unit-value{
  color:var(--ink3);padding-left:2px;font-size:12.5px;
}

/* 5 · množství — "vanička" místo pilulky, ať ladí s hranatější kartou. */
html:root .ordering-process .cart-table tr.removeable .p-quantity{
  grid-column:3;grid-row:1/4;display:flex !important;justify-content:center;
}
html:root .ordering-process .cart-table tr.removeable .quantity{
  border-radius:8px !important;background:var(--paper-dk);overflow:hidden;
}
html:root .ordering-process .cart-table tr.removeable .quantity .increase,
html:root .ordering-process .cart-table tr.removeable .quantity .decrease{width:42px;height:44px}
html:root .ordering-process .cart-table tr.removeable .quantity .decrease{border-right:1px solid var(--line2)}
html:root .ordering-process .cart-table tr.removeable .quantity .increase{border-left:1px solid var(--line2)}
html:root .ordering-process .cart-table tr.removeable .quantity input,
html:root .ordering-process .cart-table tr.removeable .quantity .amount{
  width:46px;height:44px;font-family:var(--ff-body);font-weight:500;font-size:15px;
}
html:root .ordering-process .cart-table tr.removeable .quantity:focus-within{
  border-color:var(--gold-dk) !important;
}

/* 6 · součet — JEDINÉ velké číslo v řádku. Pod ním "Odebrat". */
html:root .ordering-process .cart-table tr.removeable .p-total{
  grid-column:4;grid-row:1/4;display:flex !important;flex-direction:column;
  align-items:flex-end;justify-content:center;gap:10px;text-align:right !important;
}
html:root .ordering-process .cart-table tr.removeable .p-total .price-final{
  font-family:var(--ff-display);font-size:24px;font-weight:400;color:var(--ink);
  line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* Jeden sloupec až do 1199px: dvousloupcové rozvržení má smysl teprve
   tehdy, když na název zbyde rozumná šířka. Mezi 1024–1199px byl sloupec
   s názvem tak úzký, že se dvouřádkový název lámal na pět řádků. */
@media (max-width:1199px){
  /* Karta se přeskládá na dva sloupce: fotka + textový stack, a pod tím
     samostatný řádek s množstvím vlevo a součtem vpravo. */
  html:root .ordering-process .cart-table tr.removeable{
    grid-template-columns:72px minmax(0,1fr);column-gap:16px;
    min-height:0;padding:16px 18px !important;
  }
  html:root .ordering-process .cart-table tr.removeable .cart-p-image{width:72px;height:72px;grid-row:1/4}
  html:root .ordering-process .cart-table tr.removeable .p-quantity{
    grid-column:1/-1;grid-row:4;justify-content:flex-start;margin-top:6px;
  }
  html:root .ordering-process .cart-table tr.removeable .p-total{
    grid-column:1/-1;grid-row:4;align-items:flex-end;justify-content:center;margin-top:6px;
  }
  html:root .ordering-process .cart-table tr.removeable .p-total .price-final{font-size:21px}
}
/* Na nejužších telefonech (≤400px) už množství a součet na jeden řádek
   nevejdou — oba jsou zarovnané do stejné mřížkové buňky z opačných stran a
   u vyšší částky by se text překryl (naměřeno na 320px). Součet proto
   dostane vlastní řádek. */
@media (max-width:400px){
  html:root .ordering-process .cart-table tr.removeable .p-total{
    grid-row:5;margin-top:2px;
  }
}
/* Stejná vlastní SVG ikona (koš) jako u vysunovacího mini-košíku v
   hlavičce, místo drobného ikonového písma Apeti (.remove-item:before,
   omezené na line-height:10px — v praxi jen tenký nečitelný fragment).
   Text "Odebrat" vedle ikony je z ::after (skutečné tlačítko nese jen
   sr-only text pro čtečky) — jasnější akce než osamocená ikonka. */
html:root .cart-table .remove-item{
  display:inline-flex !important;align-items:center;gap:6px;position:relative;
  color:var(--ink3);width:auto !important;height:auto !important;line-height:1;padding:0 !important;
  font-family:var(--ff-body);font-size:12.5px;font-weight:600;
}
html:root .cart-table .remove-item::before{
  content:'';display:block;flex:none;width:15px;height:15px;background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
}
html:root .cart-table .remove-item::after{content:'Odebrat'}
html:root .cart-table .remove-item,html:root .remove-item a{color:var(--ink3)}
html:root .cart-table .remove-item:hover,html:root .remove-item a:hover{color:var(--red)}
/* Apeti schovává celé tlačítko do najetí na řádek (tr.removeable
   .remove-item{opacity:0}) — dokud šlo jen o osamocenou ikonku, dávalo to
   smysl (méně vizuálního šumu); s viditelným textem "Odebrat" má být akce
   jasná napořád. Skrývat destruktivní akci do hoveru navíc na dotykových
   zařízeních znamená, že se k ní uživatel nedostane vůbec. */
html:root .cart-table tr.removeable .remove-item{opacity:1 !important}
/* V kartovém košíku je "Odebrat" tichý drobný popisek pod součtem — a hlavně
   má plnohodnotný 44px zásah pro prst, i když text sám je 11px. */
html:root .ordering-process .cart-table tr.removeable .remove-item{
  gap:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  min-height:44px;align-items:center;
}
html:root .ordering-process .cart-table tr.removeable .remove-item::before{width:13px;height:13px}
/* (Styly pro odložené "Zpět?" u odebrání položky byly odstraněny spolu
   s funkcí — důvod je popsaný v script.js u místa, kde initUndoRemove()
   býval: odložené odeslání mohlo položku tiše ponechat v košíku.) */

/* Souhrn / postranní panel objednávky (kroky /objednavka/krok-N/).
   POZOR: .summary-wrapper (košík) tu VĚDOMĚ NENÍ — na košíku dělá tmavý
   povrch až rodičovská deska .sidebar-in-cart o kousek níž, a kdyby si
   vnitřní .box bral tmavé pozadí sám, byla by z desky opět krabice
   v krabici (přesně ta chyba, kterou tenhle redesign řeší). */
html:root #orderFormSummary,html:root .checkout-summary,html:root .cart-summary,html:root #checkoutSidebar,html:root .co-box.summary{
  background:var(--dark);color:#fff;border:0;border-radius:22px;padding:28px 26px;box-shadow:var(--shadow-lg);
}

/* --- MONOLIT: celý pravý sloupec košíku jako JEDEN kus kované ocele ------
   Shoptet sem dává dvě nezávislé krabice (.checkout-box-wrapper s nápovědou
   a .summary-wrapper se souhrnem), každá s vlastním <h2> mimo krabici a
   vlastním vnořeným .box. Výsledkem byl osiřelý nadpis na holém krému a
   krabice v krabici. Řešení bez jediné řádky JS: deskou se stane jejich
   společný rodič .sidebar-in-cart, VŠECHNY vnořené .box se zploští a
   pořadí (souhrn nahoru, nápověda dolů) se otočí přes flex order.
   .sidebar-in-cart existuje jen na /kosik/ — kroky objednávky mají
   #checkoutSidebar, takže se tyhle dva světy nemíchají. */
html:root .sidebar-in-cart{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background-color:#171513;background-image:var(--slab-heat),var(--slab);
  border:1px solid var(--line-dark);border-radius:var(--r-cart);
  box-shadow:var(--shadow-slab),var(--bevel);
  color:var(--steel);
  /* Apeti dává .col-md-4 (tenhle element) svůj vlastní grid gutter
     padding-left:60px, padding-right:0 — pozůstatek z doby, než jsme
     přidali skutečnou mezeru mezi sloupci (margin-left na .col-md-4, viz
     výše). Ta asymetrie posouvala VŠECHEN vycentrovaný obsah desky o 30px
     doprava od skutečného středu viditelného rámu. .cart-content už má
     svůj vlastní symetrický padding, takže tenhle navíc nemá co dělat. */
  padding-left:0 !important;
}
/* Vyražená pečeť přetékající přes pravý dolní rok desky. URL dodává JS
   (--hs-seal-url), protože cestu k assetům zná jen HASAKI_CONFIG. */
html:root .sidebar-in-cart::after{
  content:'';position:absolute;right:-26px;bottom:-34px;width:168px;height:168px;
  background:var(--hs-seal-url) center/contain no-repeat;opacity:.05;pointer-events:none;
}
html:root .sidebar-in-cart>.cart-content{
  position:relative;z-index:1;
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:26px 28px !important;margin:0 !important;
}
/* Zploštění všech vnořených krabic — tohle je ta oprava "krabice v krabici". */
html:root .sidebar-in-cart .box,
html:root .sidebar-in-cart .box.box-sm,
html:root .sidebar-in-cart .box.box-bg-default{
  background:none !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:0 !important;margin:0 !important;
}
/* Souhrn nahoru, nápověda dolů — nadpis "Potřebujete pomoc?" tím přestane
   být osiřelý a stane se nadtitulem spodní sekce vevnitř desky. */
html:root .sidebar-in-cart .summary-wrapper{order:1}
html:root .sidebar-in-cart .checkout-box-wrapper{order:2;border-top:1px solid var(--line-dark2)}
html:root .sidebar-in-cart .checkout-box-wrapper .h4{
  font-family:var(--ff-body) !important;font-size:11px !important;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dk) !important;margin:0 0 14px !important;
}
/* Kontakty na tmavém — Shoptetův generický portrét operátorky do téhle
   estetiky nepatří, e-mail a telefon jsou plnohodnotné 44px řádky. */
html:root .sidebar-in-cart .contact-box strong{
  font-family:var(--ff-body);font-size:13.5px;font-weight:600;color:var(--steel);margin-bottom:10px;
}
html:root .sidebar-in-cart .contact-box ul{border-top:1px solid var(--line-dark2)}
html:root .sidebar-in-cart .contact-box li{
  display:flex;align-items:center;min-height:44px;padding:0;
  border-bottom:1px solid var(--line-dark2);font-size:13.5px;
}
html:root .sidebar-in-cart .contact-box a{color:var(--steel) !important}
html:root .sidebar-in-cart .contact-box a:hover{color:var(--gold) !important}
/* Apeti dává KAŽDÉMU .cart-content bílé pozadí (".cart-content,.cart-header
   {background-color:var(--colors-surface-primary)}") — uvnitř tmavého
   #checkoutSidebar to vykreslí bílý obdélník přes celý obsah (nadpis i
   texty v steel/bílé pak na bílé zmizí). .summary-wrapper na /kosik/ je
   dodatečná třída na TOMTÉŽ elementu, ne nový obal — selektor níž ho tedy
   pokryje taky. */
html:root #checkoutSidebar .cart-content{background:transparent !important}
/* --- Košík (/kosik/) i Doprava&platba/Rekapitulace (/objednavka/krok-N/) —
   souhrn v pravém panelu ---------------------------------------------------
   Shoptet dává do .price-wrapper jen ploché řádky (Celkem/bez DPH, případně
   Doprava a platba) — grid s automatickým řádkováním (2 sloupce, popisek+
   částka za sebou v DOM) je rozdělí do čitelných řádků beze zásahu do
   markupu. Řádek "Doprava a platba" na /kosik/ doplňuje
   initCartSummaryExtras() (script.js) — čistě informativní text, žádná
   cena se nedopočítává. .order-summary je stejný panel na krocích
   objednávky (jiná třída než .summary-wrapper na /kosik/, ale STEJNÝ
   sdílený #checkoutSidebar dává tmavé pozadí oběma), tam už doprava i
   platba skutečně zvolené jsou. */
html:root .summary-wrapper .price-wrapper,html:root .order-summary .price-wrapper{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px 14px;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line-dark2);
}
html:root .summary-wrapper .price-label,html:root .order-summary .price-label{font-size:13.5px;color:var(--steel);font-variant-numeric:tabular-nums}
html:root .summary-wrapper .price,html:root .order-summary .price{font-family:var(--ff-display);font-size:15px;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
html:root .summary-wrapper .price-label.price-primary,html:root .order-summary .price-label.price-primary{font-size:16px;font-weight:600;color:#fff}
html:root .summary-wrapper .price.price-primary,html:root .order-summary .price.price-primary{font-size:26px;color:var(--gold);font-weight:700}
html:root .summary-wrapper .price-label.price-shipping,html:root .summary-wrapper .price.price-shipping,
html:root .order-summary .price-label.price-shipping,html:root .order-summary .price.price-shipping{
  font-size:12.5px;color:var(--steel-dk);font-family:var(--ff-body);
}

/* --- MONOLIT: obří součet ------------------------------------------------
   Jediná dominanta celé stránky. Shoptet vysype do .price-wrapper šest
   plochých sourozenců v pořadí "Celkem / částka / bez DPH / částka /
   (naše) Doprava / (naše) v dalším kroku". Vizuální stavbu — drobný řádek
   dopravy, zlaté pravítko, nadtitul, OBŘÍ číslo, pečeť, poznámka bez DPH —
   skládáme jen přes order + grid-column. Žádný přesun uzlů, takže to
   přežije i AJAX přepočet, který .price-wrapper nahrazuje novou kopií. */
/* Na přání vycentrováno — všech šest řádků teď leží přes celou šířku
   (grid-column:1/-1) a text-align/justify-self je :center místo :start/
   :right. Mechanismus (order + grid-column, žádný přesun uzlů) je beze
   změny, takže sestava dál přežije AJAX přepočet .price-wrapper. */
html:root .summary-wrapper .price-wrapper{
  grid-template-columns:1fr;justify-items:center;text-align:center;
  gap:0;padding-bottom:0;margin-bottom:22px;border-bottom:0;
}
html:root .summary-wrapper .price-label.price-shipping{order:1;grid-column:1;padding:4px 0 0}
html:root .summary-wrapper .price.price-shipping{order:2;grid-column:1;text-align:center;padding:0 0 9px}
/* Zlaté pravítko + nadtitul nad číslem. */
html:root .summary-wrapper .price-label.price-primary{
  order:3;grid-column:1;margin-top:14px;
  font-family:var(--ff-body) !important;font-size:11px !important;font-weight:600 !important;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dk) !important;
}
html:root .summary-wrapper .price-label.price-primary::before{
  content:'';display:block;width:44px;height:2px;background:var(--gold);margin:0 auto 16px;
}
/* Největší a nejsvětlejší typografie na celém webu. white-space:nowrap +
   uzamčení šířky v JS během dopočítávání, ať číslo neposkakuje. */
html:root .summary-wrapper .price.price-primary{
  order:4;grid-column:1;justify-self:center;text-align:center;
  font-family:var(--ff-display);font-size:clamp(40px,3.6vw,58px);line-height:.94;
  letter-spacing:-.02em;color:var(--paper) !important;font-weight:400 !important;
  margin:6px 0 0;white-space:nowrap;
}
/* Cena bez DPH je poznámka pod číslem, ne rovnocenný řádek. */
html:root .summary-wrapper .price-label.price-secondary{
  order:6;grid-column:1;font-size:12px;color:var(--steel-dk);padding-top:12px;
}
html:root .summary-wrapper .price.price-secondary{
  order:7;grid-column:1;text-align:center;font-family:var(--ff-body);font-size:12px;color:var(--steel-dk);padding-top:2px;
}
/* Doprava zdarma — vkládá initFreeShippingBar() (script.js) POUZE když má
   Shoptet limit skutečně nastavený v administraci. Aktuálně nastavený není,
   takže se prvek nevykreslí vůbec; jakmile ho klient zapne, rozsvítí se sám. */
html:root .hs-ship-goal{
  grid-column:1/-1;order:8;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line-dark2);font-size:12px;color:var(--steel-dk);
}
html:root .hs-ship-goal-track{
  height:2px;background:var(--line-dark);margin-bottom:9px;overflow:hidden;
}
html:root .hs-ship-goal-track i{display:block;height:100%;background:var(--gold)}
html:root .hs-ship-goal strong{color:var(--paper);font-weight:600}
html:root .hs-ship-goal.is-done span{display:inline-flex;align-items:center;gap:8px;color:var(--gold)}
html:root .hs-ship-goal svg{width:15px;height:15px;flex:none}

/* Jedna pečeť u celkové částky — initCartSealMoment() (script.js). Vědomě
   jediné místo na stránce s tímhle motivem jako TEXT; velká vyražená pečeť
   v rohu desky (.sidebar-in-cart::after) je jen tichý vodoznak na 5 %. */
html:root .hs-cart-seal{
  grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:11.5px;color:var(--steel-dk);
}
/* order patří JEN k přeskládanému souhrnu na košíku. Na krocích objednávky
   se .price-wrapper neskládá přes order, takže tam by order:5 pečeť poslal
   až pod řádek "Cena bez DPH" — tedy pryč od částky, ke které patří. */
html:root .summary-wrapper .hs-cart-seal{order:5;grid-column:1;justify-content:center}
html:root .hs-cart-seal svg{width:15px;height:15px;flex:none;color:var(--gold-dk)}
/* CTA: zlatá pilulka přes celou šířku je hlavní akce, "Zpět do obchodu" už
   jen tichý odkaz — dvě stejně těžká tlačítka nad sebou dřív soupeřila. */
html:root .summary-wrapper .next-step,html:root .order-summary .next-step{flex-direction:column-reverse;gap:10px;margin-top:0}
html:root .summary-wrapper .next-step .btn,html:root .order-summary .next-step .btn{width:100%;text-align:center;justify-content:center}
html:root .summary-wrapper .next-step-forward .btn,html:root .summary-wrapper .next-step-forward{min-height:56px}
html:root .order-summary .next-step-back{
  background:transparent !important;color:var(--steel) !important;border:1px solid var(--line-dark) !important;
}
html:root .order-summary .next-step-back:hover{background:#fff !important;color:var(--dark) !important;border-color:#fff !important}
html:root .summary-wrapper .next-step-back{
  background:none !important;border:0 !important;box-shadow:none !important;
  color:var(--steel-dk) !important;font-family:var(--ff-body);font-size:13px;font-weight:500;
  text-decoration:underline;text-underline-offset:3px;padding:6px 0 !important;min-height:0;
  transform:none !important;
}
html:root .summary-wrapper .next-step-back:hover{color:var(--gold) !important}
/* Rekapitulace objednávky — nadpis + položky + řádek "Celkem za zboží" +
   zvolená doprava/platba (#shipping-billing-summary), vše na tmavém pozadí
   zděděném od #checkoutSidebar. */
html:root .order-summary-inner .h4{font-family:var(--ff-display);font-size:19px;color:#fff;margin:0 0 18px;font-weight:600}
html:root .order-summary-inner .cart-items{margin-bottom:4px}
html:root .order-summary-inner .cart-item{
  display:flex;flex-wrap:wrap;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line-dark2);font-size:13px;
}
html:root .order-summary-inner .cart-item:first-child{padding-top:0}
html:root .order-summary-inner .cart-item-name{flex:1 1 100%;color:var(--steel);order:1}
html:root .order-summary-inner .cart-item-name a{color:#fff}
html:root .order-summary-inner .cart-item-amount{order:2;color:var(--steel-dk)}
html:root .order-summary-inner .cart-item-price{order:3;margin-left:auto;color:#fff;font-family:var(--ff-display)}
html:root .order-summary-item.helper{
  display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line-dark2);
  color:var(--steel);font-size:13.5px;
}
html:root .order-summary-item.helper strong{font-weight:600;color:#fff}
html:root #shipping-billing-summary{padding:16px 0 4px;border-bottom:1px solid var(--line-dark2);margin-bottom:20px}
html:root .recapitulation-single{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;
  padding:6px 0;font-size:13px;color:var(--steel);
}
html:root .recapitulation-shipping-billing-info{color:#fff;font-weight:600;text-align:right}
html:root .recapitulation-shipping-billing-info span{color:var(--gold);font-family:var(--ff-display);margin-right:8px}
/* Odznaky důvěry + platební metody pod tlačítky — vkládá initCartTrustBadges()
   (script.js); ikonky plateb recyklují stejné .hs-pay* třídy jako patička. */
html:root .hs-cart-trust{
  display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line-dark2);font-size:12.5px;
}
html:root .hs-cart-trust-item{display:flex;align-items:center;gap:10px;color:var(--steel)}
html:root .hs-cart-trust-item svg{width:17px;height:17px;flex:none;color:var(--gold-dk)}
/* .hs-pay-* třídy jsou od patičky JIŽ navržené pro tmavé pozadí (--steel/
   --steel-dk) — žádný další přepis barvy tu není potřeba, jen rozestupy.
   justify-content:center — bez něj se ikony na úzké desce zalomily a
   Apple Pay osaměla na druhém řádku přilepená vlevo, zatímco první řádek
   byl vycentrovaný jen náhodou tím, že skoro vyplnil šířku. */
html:root .hs-cart-pay{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px}
/* Krabice "Potřebujete pomoc?" — sociální sítě jsou během placení jen
   rozptýlení (odkaz pryč z pokladny), necháváme jen to nejdůležitější:
   e-mail a telefon.
   Shoptet tu bohužel dává NESTEJNOU třídu podle kroku: na /kosik/ je to
   .checkout-box-wrapper, na /objednavka/krok-N/ jen .checkout-box (bez
   -wrapper) — obě musí být v selektoru, jinak jedna ze stránek o kartu
   přijde. !important: na krok-* stránkách sedí uvnitř tmavého
   #checkoutSidebar/.order-summary se stejnou/nižší specificitou. */
/* POZOR: platí JEN pro .checkout-box (kroky /objednavka/krok-N/), kde je
   nápověda samostatnou světlou kartou. Na /kosik/ má Shoptet pro tentýž
   blok třídu .checkout-box-wrapper a ten je od redesignu "MONOLIT" součástí
   tmavé desky — kdyby byl v tomhle selektoru, přebil by (stejná specificita,
   ale pozdější pozice v souboru) zploštění z .sidebar-in-cart .box a uvnitř
   desky by se objevila světlá krabice. */
html:root .checkout-box .box{background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:18px;box-shadow:none;padding:20px 22px}
html:root .checkout-box .h4{font-family:var(--ff-display);font-size:16px;color:var(--ink);margin:0 0 14px}
/* JEN v pokladně! Bez tohohle omezení tahle pravidla schovávala fotku
   operátorky a odkazy na Facebook/Instagram i na samostatné stránce
   /kontakty/, kam redesign košíku vůbec nemá zasahovat — tedy ztráta
   obsahu na nesouvisející stránce. Patička má vlastní pravidla
   (body.blank-mode #footer .contact-box). */
html:root .sidebar-in-cart .contact-box img,html:root #checkoutSidebar .contact-box img,html:root .checkout-box .contact-box img{display:none}
html:root .sidebar-in-cart .contact-box strong,html:root #checkoutSidebar .contact-box strong,html:root .checkout-box .contact-box strong{display:block;font-family:var(--ff-display);font-size:15px;color:var(--ink);margin-bottom:8px}
html:root .sidebar-in-cart .contact-box ul,html:root #checkoutSidebar .contact-box ul,html:root .checkout-box .contact-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
html:root .sidebar-in-cart .contact-box li,html:root #checkoutSidebar .contact-box li,html:root .checkout-box .contact-box li{padding:0;font-size:13.5px}
html:root .sidebar-in-cart .contact-box a,html:root #checkoutSidebar .contact-box a,html:root .checkout-box .contact-box a{color:var(--ink2)}
html:root .sidebar-in-cart .contact-box a:hover,html:root #checkoutSidebar .contact-box a:hover,html:root .checkout-box .contact-box a:hover{color:var(--red)}
html:root .sidebar-in-cart .contact-box .facebook,html:root #checkoutSidebar .contact-box .facebook,html:root .checkout-box .contact-box .facebook,
html:root .sidebar-in-cart .contact-box .instagram,html:root #checkoutSidebar .contact-box .instagram,html:root .checkout-box .contact-box .instagram{display:none}
/* Datum doručení — tichý řádek pod seznamem položek. Předchozí verze byla
   natočené razítko s pulsující tečkou; to na prémiové stránce působilo jako
   jarmareční samolepka a blikající tečka je při třetí návštěvě otravná.
   Statická zlatá tečka, verzálkový popisek, datum v Bodoni. */
html:root .delivery-time{
  display:flex;align-items:baseline;gap:10px;margin:18px 2px 0;padding:0;
  background:none;border:0;border-radius:0;transform:none;
  font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2);
}
html:root .delivery-time::before{
  content:'';width:6px;height:6px;flex:none;border-radius:50%;background:var(--gold-dk);
  transform:translateY(-2px);
}
html:root .delivery-time strong{
  font-family:var(--ff-display);font-size:16px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink);text-decoration:none !important;border:0 !important;
}

/* --- Doplňkový prodej pod kartami košíku (initCartCrossSell) ------------
   Levý sloupec je o dost kratší než pravá deska (souhrn+důvěra+platby+
   kontakt) a bez tohoto bloku pod poslední kartou zbývala holá krémová
   plocha, zatímco deska vedle ní ještě dlouho pokračovala. */
html:root .hs-cart-more{margin:34px 2px 0;padding-top:22px;border-top:1px solid var(--line2)}
html:root .hs-cart-more-label{
  font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 14px;
}
html:root .hs-cart-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
html:root .hs-cart-more-item{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:16px 10px;border:1px solid var(--line2);border-radius:var(--r-cart);
  background:var(--paper);transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
html:root .hs-cart-more-item:hover{
  border-color:var(--line);box-shadow:var(--shadow-sm);transform:translateY(-2px);
}
html:root .hs-cart-more-item span:last-child{font-size:12.5px;color:var(--ink2);line-height:1.35}
html:root .hs-cart-more-img{
  display:flex;align-items:center;justify-content:center;width:100%;height:46px;
}
html:root .hs-cart-more-img img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:520px){html:root .hs-cart-more-grid{grid-template-columns:1fr}}

/* --- Přilepený panel na desktopu ----------------------------------------
   SKUTEČNÁ CHYBA, kterou tohle opravuje: Apeti má
   `.overall-wrapper{overflow:hidden;position:relative}`. overflow:hidden
   dělá z toho obalu scroll-kontejner, a position:sticky uvnitř se pak
   "lepí" k němu místo k okně — tedy nefunguje vůbec. V předchozím kole to
   uniklo, protože testovací harness .overall-wrapper vůbec neobsahoval.
   overflow-x:clip ponechá ochranu proti vodorovnému přetečení (kvůli ní to
   tam Apeti má), ale scroll-kontejner nevytváří, takže sticky ožije.
   Omezeno na stránky objednávky, ať se nikde jinde nic nemění.

   Deska je vyšší než okno u plného košíku; proto se lepí až negativním
   topem podle vlastní výšky (--hs-sum-h zapisuje initStickySidebarBlur()),
   aby byl dojezd vždy až na tlačítko a nikdy se neodřízl. */
html:root body.hs-page-cart .overall-wrapper{overflow-x:clip;overflow-y:visible}
@media (min-width:1200px){
  html:root .sidebar-in-cart{
    position:sticky;
    top:calc(24px - max(0px, var(--hs-sum-h, 0px) - (100vh - 48px)));
  }
}
@media (min-width:992px){
  html:root .order-summary{position:sticky;top:24px}
}
/* Zaseknutá deska: JEN hlubší stín. Původně tu bylo rozostření pozadí, ale
   to na desce nemohlo nikdy nic udělat — background-image (--slab) je plně
   neprůhledný gradient nad background-color, takže ani průhlednost, ani
   backdrop-filter nejsou vidět. Místo předstírání efektu radši ohlásíme
   odlepení od stránky tím, co na neprůhledném objektu funguje: stínem.
   (Na krocích objednávky rozostření funguje — .order-summary používá
   zkratku `background`, která background-image smaže.) */
html:root .sidebar-in-cart.hs-stuck{
  box-shadow:0 40px 80px -28px rgba(20,19,17,.7),var(--bevel);
}
html:root .order-summary.hs-stuck .box.box-bg-default{
  background:rgba(17,16,16,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
/* Pod 1024px jde vše do jednoho sloupce — Bootstrap by od 768px držel
   66/33, což by desku i karty stlačilo do nečitelně úzkých pruhů. */
@media (max-width:1199px){
  html:root .cart-row>div.col-md-8,html:root .cart-row>div.col-md-4{
    width:100% !important;flex:0 0 100% !important;max-width:100% !important;
  }
  html:root .sidebar-in-cart{margin-top:28px}
}

/* Přilepená lišta na mobilu — initStickyMobileBar()/syncMobileBarTotal()
   (script.js). display:none mimo mobil, uvnitř media query se přepíná na
   flex a viditelnost řeší jen transform (žádný konflikt s display). */
html:root .hs-mobile-cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--dark);box-shadow:0 -8px 24px rgba(0,0,0,.25);
  transform:translateY(100%);transition:transform .3s var(--ease);
}
@media (max-width:767px){html:root .hs-mobile-cta-bar{display:flex}}
html:root .hs-mobile-cta-bar.is-visible{transform:translateY(0)}
html:root .hs-mobile-cta-total{font-family:var(--ff-display);color:var(--gold);font-size:18px;font-weight:700}
html:root .hs-mobile-cta-bar .btn{margin:0;flex:none}

/* --- Košík — WOW animace: řádky, hover, stepper, CTA, blesknutí ceny ---- */
/* Vstup řádků řeší initCartRowAnimation() (script.js) přes .hs-rv/
   .hs-rv-stagger — stejný systém jako zbytek webu, jen aplikovaný na
   Shoptetem vykreslenou tabulku. */
/* Hover karty (páteř, rámeček, stín, přiblížení fotky) je definovaný u
   .cart-table tr.removeable výš — vědomě jen tyhle čtyři vlastnosti a nic
   víc, žádné zvedání celé karty ani reagování na pohyb kurzoru. */
/* Stepper množství — krátký "stisk" při kliknutí, ať akce působí hmatatelně. */
html:root .quantity .increase,html:root .quantity .decrease{transition:background .15s,color .15s,transform .1s}
html:root .quantity .increase:active,html:root .quantity .decrease:active{transform:scale(.85)}
/* Zlaté hlavní tlačítko — jemný přejezd lesku, ne agresivní smyčka
   (spustí se jen jednou při najetí myší, na dotykových zařízeních nevadí,
   že se nespustí vůbec). */
html:root .summary-wrapper .next-step-forward .btn,html:root .order-summary .next-step-forward .btn{position:relative;overflow:hidden}
html:root .summary-wrapper .next-step-forward .btn::after,html:root .order-summary .next-step-forward .btn::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease);pointer-events:none;
}
html:root .summary-wrapper .next-step-forward .btn:hover::after,html:root .order-summary .next-step-forward .btn:hover::after{left:130%}
/* Blesknutí celkové ceny (.hs-flash) je ODSTRANĚNO, ne jen vypnuté:
   1) nemohlo fungovat — animovalo jen `color`, ale barvu součtu na desce
      drží `color:var(--paper) !important`, a autorské !important animaci
      přebije;
   2) i kdyby fungovalo, dublovalo by dopočítávání částky (tweenCartTotal),
      které je podle návrhu JEDINOU zpětnou vazbou na změnu množství.
   Mrtvý kód i mrtvé CSS proto radši nenecháváme. */
/* Odznaky důvěry — drobné probuzení ikony při najetí myší. */
html:root .hs-cart-trust-item svg{transition:transform .25s var(--ease)}
html:root .hs-cart-trust-item:hover svg{transform:scale(1.15) rotate(-4deg)}
@media (prefers-reduced-motion:reduce){
  html:root .summary-wrapper .next-step-forward .btn::after,html:root .order-summary .next-step-forward .btn::after{display:none}
  html:root .ordering-process .cart-table tr.removeable,
  html:root .ordering-process .cart-table tr.removeable::before,
  html:root .ordering-process .cart-table tr.removeable .cart-p-image img,
  html:root .quantity .increase,html:root .quantity .decrease,html:root .hs-cart-trust-item svg,
  html:root .shipping-billing-table .radio-wrapper,html:root .hs-mobile-cta-bar{transition:none}
  html:root .ordering-process .cart-table tr.removeable:hover .cart-p-image img{transform:none}
  html:root .hs-cart-trust-item:hover svg{transform:none}
}
html:root #orderFormSummary h3,html:root .checkout-summary h3,html:root .cart-summary h3,html:root #checkoutSidebar h3{color:#fff;font-size:20px;margin:0 0 18px}
html:root #orderFormSummary td,html:root #orderFormSummary th,html:root .checkout-summary td,html:root .checkout-summary th{
  color:var(--steel);border-color:var(--line-dark2);padding:9px 0;font-size:14.5px;background:transparent;
}
html:root #orderFormSummary .price-final,html:root .checkout-summary .price-final,html:root .cart-summary .total{
  color:#fff;font-family:var(--ff-display);font-size:22px;
}
html:root #orderFormSummary a,html:root .checkout-summary a{color:var(--gold)}
/* Ve světlém provedení by tlačítka i pole v tmavém souhrnu zmizela — proto
   se uvnitř těchto panelů obarvují na světlo. */
html:root #orderFormSummary .btn-default,html:root .checkout-summary .btn-default,html:root #checkoutSidebar .btn-default,html:root .cart-summary .btn-default,html:root #orderFormSummary .btn-secondary,html:root .checkout-summary .btn-secondary{
  background:transparent;color:#fff;border-color:var(--line-dark);
}
html:root #orderFormSummary .btn-default:hover,html:root .checkout-summary .btn-default:hover,html:root #checkoutSidebar .btn-default:hover,html:root .cart-summary .btn-default:hover{
  background:#fff;color:var(--dark);border-color:#fff;
}
html:root #orderFormSummary input[type=text],html:root #orderFormSummary input[type=email],html:root .checkout-summary input[type=text],html:root #checkoutSidebar input[type=text],html:root .cart-summary input[type=text]{
  background:rgba(255,255,255,.06);border-color:var(--line-dark);color:#fff;
}
html:root #orderFormSummary input::placeholder,html:root .checkout-summary input::placeholder,html:root #checkoutSidebar input::placeholder,html:root .cart-summary input::placeholder{color:var(--steel)}

/* --- Doprava & platba (/objednavka/krok-1/) — full custom -----------------
   Shoptet/Apeti tu má vlastní očíslovaný postup (ol.cart-header) — je ale
   duplicitní s .hs-page-hero-steps, který do tmavého pruhu vkládá
   initPageHero() (script.js) na všech stránkách objednávky; ponecháváme
   jen ten náš. */
html:root .cart-header{display:none !important}

/* Tři sekce kroku (Základní údaje / Doprava / Platba) — v DOM je to
   .box.box-bg-default.co-box.co-* pro každou samostatně, ne jedna sdílená
   krabice; Apeti jim dává jen šedé pozadí + hornÍ linku mezi sekcemi.
   Přebíráme na stejný "papírový" jazyk karet jako zbytek webu. Ikona
   před nadpisem (h2:before, písmový font "shoptet") necháváme, jen
   přebarvujeme na zlatou. */
html:root .ordering-process .co-box{
  background:var(--paper) !important;border:1px solid var(--line) !important;border-top-style:solid !important;
  border-radius:20px;padding:30px 32px !important;box-shadow:var(--shadow-sm);margin:0 0 20px !important;
}
html:root .ordering-process .co-box h2,html:root .ordering-process .co-box h4{
  font-family:var(--ff-display);font-size:20px;color:var(--ink);font-weight:600;
}
html:root .ordering-process .co-box h2:before,html:root .ordering-process .co-box h4:before{
  color:var(--gold-dk) !important;
}
html:root .co-basic-information .row{gap:16px 20px}

/* Seznam metod uvnitř sekce — jen obal na karty, sám žádný box není. */
html:root .shipping-billing-table{padding:0 !important}

/* Jedna metoda dopravy/platby = jedna karta. Apeti dělá jen spodní linku
   mezi řádky (.radio-wrapper{border-bottom}); přepínáme na samostatné
   karty s mezerou, ať jde vybraná možnost jasně poznat i bez kliknutí. */
html:root .shipping-billing-table .radio-wrapper{
  border:1px solid var(--line) !important;border-bottom-style:solid !important;border-radius:16px;
  margin-bottom:12px;padding:2px 18px !important;background:var(--paper);
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
html:root .shipping-billing-table .radio-wrapper:last-child{margin-bottom:0}
html:root .shipping-billing-table .radio-wrapper:hover{border-color:var(--ink3) !important}
/* Vybraná karta — Shoptet sám přepíná .active na stejném elementu jako
   input (viz reálný markup), :has(:checked) navíc funguje okamžitě i
   bez čekání na tenhle JS toggle. */
html:root .shipping-billing-table .radio-wrapper.active,
html:root .shipping-billing-table .radio-wrapper:has(input:checked){
  border-color:var(--gold-dk) !important;background:var(--gold-soft);box-shadow:0 0 0 1px var(--gold-dk) inset;
}
html:root .shipping-billing-table .radio-wrapper label{
  display:flex !important;align-items:center !important;flex-wrap:wrap;gap:6px 16px;color:var(--ink2);width:100%;
}
html:root .shipping-billing-table .payment-info{order:1;flex:1 1 260px;max-width:none !important}
html:root .shipping-billing-table .payment-info .shipping-billing-name{
  font-family:var(--ff-display);font-size:15.5px;font-weight:600;color:var(--ink);text-transform:none !important;
}
html:root .shipping-billing-table .payment-logo{order:2;flex:none !important;text-align:center !important}
html:root .shipping-billing-table .payment-logo img{
  border:1px solid var(--line);border-radius:10px;background:#fff;padding:5px;max-height:32px !important;
}
html:root .shipping-billing-table .payment-shipping-price{
  order:3;flex:none !important;font-family:var(--ff-display);font-size:16px;font-weight:600;color:var(--ink);
}
/* Zvýhodněná cena (sleva za platbu, ZDARMA) — malý zlatý odznak místo
   obyčejného textu, ať je výhoda vidět na první pohled. */
html:root .shipping-billing-table .for-free{
  display:inline-block !important;padding:3px 10px;border-radius:999px;background:var(--gold-soft);
  color:var(--gold-dk) !important;font-weight:700 !important;font-size:13.5px;
}
/* Vlastní radio tečka (Apeti: label:before/:after, input je vizuálně
   schovaný přes clip:rect) — jen přebarvujeme na zlatou. */
html:root .shipping-billing-table input[type=radio]+label:before{border-color:var(--ink3) !important}
html:root .shipping-billing-table input[type=radio]:checked+label:before{border-color:var(--gold-dk) !important}
html:root .shipping-billing-table input[type=radio]:checked+label:after{background-color:var(--gold-dk) !important;border-color:var(--gold-dk) !important}
/* Odznak "?" s nápovědou — zlatý kroužek místo výchozí modré Shoptet barvy. */
html:root .shipping-billing-table .question-tooltip{
  border-color:var(--gold-dk) !important;color:var(--gold-dk) !important;background:transparent !important;
}
/* "Zvolte odběrné místo" (Zásilkovna/GLS/Balíkovna) — pilulka místo
   holého odkazu, ať je jasné, že se dá kliknout. */
html:root .shipping-billing-table .sublabel.new-widget-choose{margin-top:2px}
html:root .shipping-billing-table .sublabel.new-widget-choose a{
  display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--ink2);transition:border-color .2s,color .2s;
}
html:root .shipping-billing-table .sublabel.new-widget-choose a:hover{border-color:var(--gold-dk);color:var(--ink)}
/* Nekompatibilní kombinace dopravy+platby — Apeti sama zobrazí jen uvnitř
   .inactive (viz .inactive .not-possible-info{display:inherit}), tady jen
   dostane barvu. */
html:root .shipping-billing-table .inactive .not-possible-info{
  color:var(--red);font-size:12px;font-style:normal;display:block !important;width:100%;order:4;margin-top:2px;
}
html:root .shipping-billing-table .radio-wrapper:has(input[disabled]){opacity:.5}
html:root .shipping-billing-table .radio-wrapper:has(input[disabled]) label{cursor:not-allowed}

/* Slevový kupón */
html:root .discount-coupon,html:root #discountCoupon{display:flex;gap:8px;flex-wrap:wrap}
html:root .discount-coupon input{border-radius:999px;padding:12px 18px;flex:1;min-width:180px}

/* Další krok */
html:root .next-step,html:root .cart-buttons{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:26px}
html:root .next-step .btn-conversion,html:root .next-step-forward .btn{background:var(--gold) !important;color:var(--dark) !important}
html:root .next-step .btn-conversion:hover,html:root .next-step-forward .btn:hover{background:var(--gold-dk) !important;color:var(--dark) !important}

/* Prázdný košík */
html:root .cart-empty,html:root #cart-empty,html:root .empty-cart{
  text-align:center;padding:90px 20px;background:var(--paper);border:1px solid var(--line);border-radius:22px;
}

/* Poděkování */
html:root .order-confirmation,html:root #thank-you,html:root .thank-you-page{text-align:center;padding:70px 20px}

/* ==========================================================================
   10  PATIČKA
   ========================================================================== */
/* Apeti dává #footer ještě margin-top:100px navrch (mezera MIMO patku,
   mezi obsahem stránky a jejím tmavým pozadím) — v getBoundingClientRect()
   na .height se vůbec neprojeví, proto to při měření výšky patičky snadno
   unikne. Spolu s padding-top by dělalo skoro 150px prázdna nad patičkou. */
html:root #footer{margin-top:48px}
html:root #footer,html:root .footer{background:var(--dark);color:var(--steel);padding-top:40px;border:0;font-size:13.5px}
/* Pozn.: záměrně jen nadpisy — <strong> se v patičce vyskytuje i uvnitř textu
   (copyright), kde by verzálky a spodní mezera vypadaly rozbitě. */
html:root #footer h3,html:root #footer h4,html:root #footer .h4,html:root #footer .pageElement__heading{
  color:#fff;font-family:var(--ff-body);font-size:14px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px;
}
html:root #footer strong{color:#fff;font-weight:700}
html:root #footer a{color:var(--steel)}
html:root #footer a:hover{color:var(--gold)}
html:root #footer p,html:root #footer li,html:root #footer td{color:var(--steel);line-height:1.6}
html:root #footer ul{list-style:none;margin:0;padding:0}
html:root #footer li{padding:5px 0}
html:root #footer hr{border-color:var(--line-dark2)}
html:root #footer img{max-width:100%}
/* Shoptet mezitím přejmenoval #signature na .signature-theme (dřívější
   selektor tu proto ležel mrtvý) a k oběma dětem .footer-bottom lepí
   vlastní odshora přehnané okraje (30px/50px) navíc k paddingu rodiče —
   součet dělal z patičky nejdelší blok na stránce. Nulujeme přímo na
   dětech, rozestup mezi nimi řeší výhradně gap na .footer-bottom (níže). */
html:root #footer .copyright,html:root #footer .signature-theme{
  margin:0;padding:0;font-size:12.5px;color:var(--steel-dk);
}
html:root #footer .signature-theme a,html:root #footer .copyright a{color:var(--steel-dk)}
html:root #footer .signature-theme{display:flex;gap:14px;flex-wrap:wrap}

/* Naše 4sloupcová mřížka (HTML snippet pro vlastní patičku) */
html:root .hs-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
html:root .hs-footer-brand p{margin-top:16px;font-size:13.5px;line-height:1.6;max-width:280px;color:var(--steel)}
html:root .hs-footer-brand img{max-height:96px;width:auto;margin-bottom:4px}
html:root .hs-footer-social{display:flex;gap:10px;margin-top:20px}
html:root .hs-footer-social a{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,border-color .2s;
}
html:root .hs-footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--dark)}
html:root .hs-footer-social svg{width:16px;height:16px}
html:root .hs-footer-col{display:flex;flex-direction:column;gap:11px;font-size:13.5px}
html:root .hs-footer-col h4{color:#fff;font-size:14px;margin:0 0 16px;letter-spacing:.04em;text-transform:uppercase}
html:root .hs-footer-bottom-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  border-top:1px solid var(--line-dark2);padding:20px 0;font-size:12.5px}
@media (max-width:820px){html:root .hs-footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){html:root .hs-footer-grid{grid-template-columns:1fr}}

/* ==========================================================================
   11  DOPLŇKY
   ========================================================================== */

/* Zpět nahoru */
html:root .hs-back-to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;border:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s,transform .3s,background .2s;z-index:50;box-shadow:var(--shadow-md);padding:0;
}
html:root .hs-back-to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
html:root .hs-back-to-top:hover{background:var(--red)}
html:root .hs-back-to-top svg{width:20px;height:20px}

/* Blog / články / statické stránky */
html:root .article,html:root .news-item,html:root .blog-post{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}
html:root .article h2 a,html:root .news-item h2 a{font-family:var(--ff-display)}
html:root #content .basic-description,html:root .type-page #content{color:var(--ink2);line-height:1.75}
html:root #content .basic-description h2{margin-top:34px}

/* Formuláře (kontakt, hlídací pes, dotaz na produkt) */
html:root .contact-box,html:root .contact-form,html:root #contact-form{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px 24px;
}
/* …ale v pokladně je .contact-box VŽDY vnitřkem jiné karty (tmavá deska na
   /kosik/, světlá krabice na krocích objednávky), takže tam vlastní kartový
   vzhled dělal krabici v krabici. Reset musí být ZA generickým pravidlem
   výš — se stejnou specificitou rozhoduje pozice v souboru. */
html:root .sidebar-in-cart .contact-box,
html:root #checkoutSidebar .contact-box,
html:root .checkout-box .contact-box{
  background:none;border:0;border-radius:0;padding:0;
}

/* Hlášky */
html:root .msg,html:root .alert{border-radius:14px;border:1px solid var(--line);padding:14px 18px}
html:root .msg.msg-error,html:root .alert-danger{background:var(--red-soft);border-color:rgba(143,36,48,.3);color:var(--red-dk)}
html:root .msg.msg-success,html:root .alert-success{background:var(--gold-soft);border-color:rgba(201,161,74,.4);color:var(--gold-dk)}

/* Cookie lišta */
html:root #cookies-bar,html:root .cookies-bar{background:var(--dark);color:var(--steel);border:0}
html:root #cookies-bar a{color:var(--gold)}

/* 404 */
html:root .error-page,html:root #error-404{text-align:center;padding:110px 20px}

/* ==========================================================================
   12  HLAVIČKA A PATIČKA V BLANK-MODE (šablona bez vlastního CSS)
   --------------------------------------------------------------------------
   Když e-shop běží v režimu prázdné šablony (body.blank-mode), Shoptet
   nenačte žádné CSS šablony a layout hlavičky i patičky dělá buď doplněk
   vzhledu, nebo nikdo. Tahle sekce proto rozvržení popisuje sama, aby web
   odpovídal předloze bez ohledu na to, co je pod ním.
   ========================================================================== */

/* --- Horní tmavý pruh: jeden řádek, ne dva ------------------------------ */
html:root body.blank-mode .top-navigation-bar .container{
  display:flex;align-items:center;gap:20px;flex-wrap:nowrap;
  min-height:46px;padding-top:0;padding-bottom:0;
}
html:root body.blank-mode .top-navigation-bar .hs-topbar-msg{order:1;flex:1 1 auto;min-width:0;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:root body.blank-mode .top-navigation-bar .top-navigation-menu{display:none}
html:root body.blank-mode .top-navigation-bar .top-navigation-contacts,
html:root body.blank-mode .top-navigation-bar .hs-topbar-contact{
  order:2;flex:none;display:flex;align-items:center;gap:18px;
}
html:root body.blank-mode .top-navigation-bar .top-navigation-contacts strong{display:none}
html:root body.blank-mode .top-navigation-bar .top-navigation-contacts a,
html:root body.blank-mode .top-navigation-bar .hs-topbar-contact a{display:inline-flex;align-items:center;gap:7px}
/* Hledání v horním pruhu je pryč — se stejným polem uvnitř lupy/vyskakovacího
   okna (viz .hsh-search-panel) by bylo zbytečně duplicitní. `.search` je
   ovšem POŘÁD ta samá skutečná instance formuláře, kterou script.js hledá
   a přesouvá (viz `searchWrap = $('.search', header)`) — proto ji jen
   schováváme (display:none), ne mažeme; kdyby ji script.js nenašel jako
   první `.search` v hlavičce, přesunul by do vyskakovacího okna tu úplně
   jinou (skutečně prázdnou/needitovatelnou) instanci. */
html:root body.blank-mode .top-navigation-bar .search{display:none}
html:root body.blank-mode .top-navigation-bar .top-navigation-tools{order:4;flex:none;display:flex;align-items:center;gap:12px}
/* Vlastní vyhledávání v hlavičce (hsh-search-toggle) nahrazuje tenhle
   spouštěč — necháváme ho zapnutý by mohl doplňku přepnout stav
   ".search-window-visible" na <body>/<html>, který by zase přebil pozici
   přesunutého formuláře uvnitř .hsh-search-panel (viz README). */
html:root body.blank-mode .top-navigation-bar .responsive-tools [data-target="search"]{display:none !important}
html:root body.blank-mode .top-navigation-bar .top-nav-button{background:none;border:0;color:var(--steel);font-size:12.5px}
html:root body.blank-mode .top-navigation-bar .top-nav-button:hover{color:var(--gold)}
@media (max-width:1279px){html:root body.blank-mode .top-navigation-bar .hs-topbar-msg{display:none}}
@media (max-width:991px){
html:root body.blank-mode .top-navigation-bar .search,html:root body.blank-mode .top-navigation-bar .top-navigation-contacts{display:none}
html:root body.blank-mode .top-navigation-bar .container{justify-content:flex-end}
}

/* --- Logo v patičce (v hlavičce se .site-name přesouvá do .hsh-brand,
   viz níže — moveHeaderIntoHsh v script.js) ----------------------- */
html:root body.blank-mode #footer .site-name{
  display:block !important;position:static !important;
  float:none;width:auto;margin:0 0 16px;padding:0;
}
/* Textový odkaz Shoptetu nahrazujeme obrázkem starým dobrým "image
   replacement" trikem (font-size:0 schová text, background-image ho
   nahradí) — na rozdíl od hlavičky sem script.js nezasahuje (běží, jen
   když administrátor nepoužije vlastní patičku 03-paticka.html), takže
   je to jediná cesta, jak sem dostat logo bez JS.
   max-height:44px níže (obecné pravidlo pro .site-name a/img) by jinak
   uřízlo výšku na 44px bez ohledu na height — height sama o sobě strop
   nepřebije, jde o jinou vlastnost.
   Pečeť 60×44 (dřív 168×124) — jako celostránkový hero prvek fungovala,
   v patičce jen zbytečně natahovala celý blok do výšky. */
html:root body.blank-mode #footer .site-name a,html:root body.blank-mode #footer .site-name .text-logo{
  display:inline-block;width:60px;height:44px;max-height:none;margin-bottom:0;
  font-size:0;color:transparent;border-bottom:0;
  background:url('/user/documents/hasaki/hasaki-seal-white.png') no-repeat left center;
  background-size:contain;
}
html:root body.blank-mode #footer .site-name a:hover{opacity:.85}
/* initFooterColumns() (script.js) přesouvá totéž .site-name do sloupcové
   patičky jako hlavní značku — tam vedle nadpisů sloupců potřebuje větší
   velikost než malá "pečeť" u kontaktů výše, proto přepis na stejných
   96px jako u <img> ve snippety/03-paticka.html. */
html:root body.blank-mode #footer .hs-footer-brand .site-name a,
html:root body.blank-mode #footer .hs-footer-brand .site-name .text-logo{
  width:221px;height:96px;margin-bottom:4px;
}

/* --- Hlavička je KOMPLETNĚ VLASTNÍ, ne restylovaný Apeti -------------------
   Dřívější verze skinu se snažila jen dobarvit rozvržení doplňku Apeti
   (calc() šířky, .menu-helper "Více" přetečení) — po opakovaných problémech
   (menu se zalamovalo na dva řádky, „Více" zůstávalo otevřené přes hero)
   skin místo toho staví VLASTNÍ hlavičku 1:1 podle předlohy (hasaki-theme.css
   / hasaki-home.css, třídy .nav-main/.nav-links/.icon-btn/..., tady s
   prefixem "hsh-") a script.js (buildCustomHeader) do ní přesune
   SKUTEČNÉ funkční prvky Shoptetu — položky menu, vyhledávací formulář,
   odkaz do košíku — aby fungovalo hledání, AJAX košík i reálné odkazy.
   Původní #navigation/.menu-helper/.search se po přesunu skryjí (níže). */
/* Pozici hlavičky si v blank-mode řídíme sami (lepivá nahoře, jako
   `.site-header` v předloze). Doplněk má pro mobil variantu
   `:where(.ums_mobile_header_v1--on) #header{position:fixed;top:50px}`,
   která hlavičku odsazuje o svůj vlastní horní pruh — s naší vlastní
   hlavičkou by přesahovala přes obsah, proto ji přebíjíme. */
html:root body.blank-mode #header{
  background:var(--paper);z-index:90;
  position:sticky !important;top:0 !important;width:auto !important;
  /* OPRAVA: Apeti má `#header{height:100px}` napevno. Původní hlavičku
     (.navigation-wrapper/.header-top) sice sbalíme na nulu, ale tahle pevná
     výška zůstávala — takže box hlavičky měřil 100 px, zatímco naše skutečná
     lišta .hsh-nav-main má 124 px. Přetékajících 24 px se s pozadím a
     z-index:90 kreslilo PŘES začátek obsahu a ukusovalo horní polovinu
     drobečkové navigace na detailu produktu (naměřeno: clientHeight 100 vs
     scrollHeight 124). Výšku proto řídí obsah. */
  height:auto;
}
/* POZOR — souvisí s opravou sticky u košíku (sekce 09):
   position:sticky výš je na CELÉM webu neúčinné, protože Apeti dává
   `.overall-wrapper{overflow:hidden}` a tím z obalu dělá scroll-kontejner.
   Na stránkách objednávky to obcházíme (overflow-x:clip), aby se mohl
   lepit souhrn — tím by se ale ZÁROVEŇ probudila lepivá hlavička, a to
   jen tam. Deska by se pak zasouvala pod ni (má top:24px, hlavička je
   ~90–125 px vysoká). Vypínáme ji proto zpět: chování hlavičky tak zůstává
   shodné se zbytkem webu a lepí se jen souhrn.
   Zapnout lepivou hlavičku globálně jde kdykoliv — je to ale vědomá změna
   na celém webu, ne vedlejší efekt košíku. Musí být ZA pravidlem výš:
   stejná specificita, rozhoduje pozice v souboru. */
html:root body.hs-page-cart #header{position:static !important}
/* Apeti dává .header-top pevnou výšku (98–100px) přes calc() vlastního
   rozvržení — jakmile z něj skutečné prvky přesuneme pryč, prázdný obal by
   po sobě nechal díru. Schováváme celý .navigation-wrapper/.header-top,
   ne jen jednotlivé děti. */
html:root body.blank-mode #header .navigation-wrapper{display:block !important;height:auto !important}
html:root body.blank-mode #header .header-top{display:none !important;height:0 !important}

html:root .hsh-nav-main{background:var(--paper);position:relative}
html:root .hsh-nav-in{
  max-width:var(--maxw);margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;gap:28px;transition:padding .3s var(--ease);
}
html:root body.hs-scrolled .hsh-nav-in{padding:11px 24px}
@media (max-width:640px){html:root .hsh-nav-in{padding:18px}}

/* .hsh-brand nese teď skutečné logo (hasaki-seal-black.png), ne textový
   odkaz Shoptetu — místo font-size/barvy proto řídíme výšku obrázku;
   scrollem se zmenšuje stejně plynule jako dřív text (transition na
   height). PNG je oříznuté natěsno na obsah (žádné prázdné okraje), takže
   height odpovídá SKUTEČNÉ vizuální výšce značky — dřív měl soubor pod
   sebou kus prázdného plátna, takže logo bylo v `height:58px` boxu ve
   skutečnosti vysoké jen ~34px a navíc opticky posazené nahoru
   (nevycentrované). */
html:root .hsh-brand{
  flex:none;display:inline-flex;align-items:center;height:88px;
  transition:height .3s var(--ease);
}
/* Rámeček značky (obdélník s "HASAKI"/"刃崎") NENÍ v PNG dokonale na
   střed — červená tečka přesahuje nahoru za horní hranu rámu a znaky
   崎 mají spodní tahy pod dolní hranou, a ty dole zabírají víc místa než
   tečka nahoře. Bez korekce tak samotný rám (na který se oko upíná víc
   než na tečku/přesahy) vizuálně sedí nad středem řádku menu, i když je
   celý obrázek (včetně přesahů) svisle vycentrovaný přesně. Malý posun
   dolů srovná POHLEDOVÝ střed rámu s textem menu. */
html:root .hsh-brand img{display:block;height:100%;width:auto;transform:translateY(3px)}
html:root .hsh-brand:hover{opacity:.82}
html:root body.hs-scrolled .hsh-brand{height:66px}

/* --- Položky menu (skutečné <li>, jen přesunuté a přejmenovaný obal) ----- */
html:root .hsh-links{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:0 6px 0 0;padding:0;list-style:none;flex:1 1 auto;
}
html:root .hsh-links > li{list-style:none;margin:0;padding:0}
html:root .hsh-links > li > a{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--ff-body);font-size:14.5px;font-weight:600;color:var(--ink);
  padding:6px 0;position:relative;white-space:nowrap;
}
html:root .hsh-links > li > a b{font:inherit;font-weight:inherit}
html:root .hsh-links > li > a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--red);
  transition:right .28s var(--ease);
}
html:root .hsh-links > li > a:hover::after{right:0}
html:root .hsh-links > li .submenu-arrow{display:inline-block;margin-left:2px;opacity:.55;transition:transform .2s,opacity .2s}
html:root .hsh-links > li .submenu-arrow::after{content:'⌄';font-size:11px}
html:root .hsh-links > li:hover > a .submenu-arrow,html:root .hsh-links > li.exp > a .submenu-arrow{transform:rotate(180deg);opacity:1}

/* Mega panel (jen položky s reálnými podkategoriemi — třída .ext) */
html:root .hsh-links > li.ext{position:static}
html:root .hsh-links > li.ext > ul.menu-level-2{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
  padding:30px 0;margin:0;list-style:none;z-index:5;
}
html:root .hsh-links > li.ext:hover > ul.menu-level-2,html:root .hsh-links > li.ext.exp > ul.menu-level-2{
  display:block;animation:hshMegaIn .26s var(--ease);
}
@keyframes hshMegaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Můstek přes mezeru mezi položkou a panelem. Položka (`<a>`) končí uvnitř
   `.hsh-nav-main` — panel začíná až pod ní, u JEHO spodní hrany (`top:100%`),
   protože `li.ext` je schválně `position:static` (jinak by se panel zúžil
   na šířku slova, ne celé lišty). Zbytek výšky `.hsh-nav-main` pod textem
   (padding `.hsh-nav-in`, naměřeno ~13px) je tak mezera, kde kurzor při
   sjíždění dolů není nad ničím hoverovaným a panel se zavře dřív, než se do
   něj stihne dostat. `::after` kryje přesně tuhle mezeru — `bottom:0`, ne
   `top:100%`, protože mezera je ještě NAD spodní hranou `.hsh-nav-main`, ne
   pod ní (tam už je panel). Hover nad `::after` počítá jako hover nad
   `li.ext`, i když je (stejně jako panel) umístěný vůči `.hsh-nav-main`. */
html:root .hsh-links > li.ext::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:18px;display:none;
}
html:root .hsh-links > li.ext:hover::after,html:root .hsh-links > li.ext.exp::after{display:block}
html:root .hsh-links > li.ext > ul.menu-level-2 > .hsh-mega-grid{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;
}
html:root .hsh-links ul.menu-level-2 > li{
  display:flex !important;flex-direction:column;align-items:center;gap:8px;
  padding:14px 8px;border-radius:14px;text-align:center;list-style:none;
  transition:background .2s,transform .3s var(--ease);
}
html:root .hsh-links ul.menu-level-2 > li:hover{background:var(--bg);transform:translateY(-3px)}
html:root .hsh-links ul.menu-level-2 .menu-image{display:flex;width:100%;height:40px;align-items:center;justify-content:center;padding:0;background:none}
html:root .hsh-links ul.menu-level-2 .menu-image img{height:40px;width:auto;object-fit:contain;opacity:.85}
html:root .hsh-links ul.menu-level-2 > li > div > a{
  font-size:12.5px;font-weight:600;color:var(--ink);padding:0;background:none;display:block;
}
html:root .hsh-links ul.menu-level-2 > li > div > a::after{display:none}
html:root .hsh-links ul.menu-level-2 > li > div > a:hover{color:var(--red)}
html:root .hsh-mobile-head,html:root .hsh-close,html:root .hsh-backdrop{display:none}

/* I po zúžení menu (CFG.nav.exclude) je 6 reálných položek na hraně —
   default rozestupy (26–28px, 14.5px písmo) se mezi ~901–1180px zalomí na
   dva řádky, ale na vysunovací menu je ještě brzy. Utáhneme mezery a písmo
   jen v tomhle pásu; nad 1180px i pod 901px (mobil) platí výchozí hodnoty. */
@media (min-width:901px) and (max-width:1180px){
  html:root .hsh-nav-in{gap:12px;padding:18px 14px}
  html:root .hsh-links{gap:6px}
  html:root .hsh-links > li > a{font-size:12.5px}
}

/* --- Ikony vpravo: hledání + košík --------------------------------------- */
html:root .hsh-actions{display:flex;align-items:center;gap:6px;flex:none}
html:root .hsh-icon-btn{
  position:relative;width:40px;height:40px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink);
  cursor:pointer;transition:background .2s;padding:0;
}
html:root .hsh-icon-btn:hover{background:var(--bg)}
html:root .hsh-icon-btn svg{width:19px;height:19px;pointer-events:none}
html:root .hsh-burger{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;border:0;background:transparent;cursor:pointer;flex:none;padding:0;margin-right:4px;
}
html:root .hsh-burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}

/* Skutečný odkaz do košíku (.cart-count), jen přeoblečený do ikony s bublinou.
   Apeti má na mobilní šířky "#header .cart-count{position:absolute;top:-49px}"
   — ID v selektoru vyhraje nad libovolným počtem tříd (i s prefixem html:root),
   takže position/top musí mít !important, jinak ikona uletí z hlavičky pryč. */
html:root .hsh-cart-slot .cart-count{
  display:inline-flex !important;align-items:center;gap:8px;position:relative !important;
  top:0 !important;left:0 !important;right:auto !important;bottom:auto !important;
  width:40px !important;height:40px !important;border-radius:50% !important;
  padding:0 !important;background:transparent !important;color:var(--ink) !important;
  border:0 !important;cursor:pointer;transition:background .2s;
}
html:root .hsh-cart-slot .cart-count:hover{background:var(--bg) !important}
html:root .hsh-cart-slot .cart-count .cart-price{display:none !important}
html:root .hsh-cart-slot .cart-count::before{
  content:'';width:19px;height:19px;flex:none;background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Ccircle cx='18' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L20.5 7H6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Ccircle cx='18' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L20.5 7H6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
html:root .hsh-cart-slot .cart-count i{
  font-style:normal;background:var(--red);color:#fff;border-radius:999px;
  min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;top:1px;right:1px;
}

/* --- Vyhledávací panel — full custom rebuild ----------------------------
   Předchozí verze opravovala Apeti výchozí styly bod po bodu (!important
   na každou jednotlivou vlastnost) a pořád z toho něco prosakovalo (viz
   nahlášený rámeček kolem pole). Tady místo toho každý reálný prvek
   formuláře Shoptetu (.search/.search-form/fieldset/input/tlačítko)
   nejdřív úplně vynulujeme (all:unset) a pak znovu postavíme jen z
   vlastností, které chceme — nemůže z něj tak prosáknout NIC neočekávaného,
   ať už z libovolného, i budoucího, selektoru Apeti. Funkce/AJAX zůstává
   beze změny, mění se jen vzhled. */
html:root .hsh-search-panel{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,9,8,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;justify-content:center;align-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease);
}
html:root .hsh-search-panel.is-open{opacity:1;visibility:visible}
html:root body.hsh-search-open{overflow:hidden}

/* Křížek napevno v rohu okna (ne vedle pilulky) — jasně čitelný, plná
   bílá kolečko s tmavou ikonou, ne poloprůhledný šedý kruh mizející do
   ztmaveného pozadí. */
html:root .hsh-search-close{
  all:unset;position:fixed;top:24px;right:24px;z-index:1;
  width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--shadow-md);transition:background .2s,transform .3s var(--ease);
}
html:root .hsh-search-close svg{width:18px;height:18px}
html:root .hsh-search-close:hover{background:var(--gold);transform:rotate(90deg)}

html:root .hsh-search-stage{
  display:flex;flex-direction:column;align-items:center;gap:18px;width:min(640px,100%);
  transform:translateY(-16px);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease);
}
html:root .hsh-search-panel.is-open .hsh-search-stage{transform:translateY(0);opacity:1}
html:root .hsh-search-stage .hs-eyebrow{justify-content:center}

html:root .hsh-search-card{
  width:100%;position:relative;background:#fff;border-radius:999px;box-shadow:var(--shadow-lg);
  padding:8px 8px 8px 26px;display:flex;align-items:center;gap:14px;
}
/* Když nápověda (search-whisperer) ukazuje výsledky nebo „nic nenalezeno",
   dolní rohy pilulky se srovnají do rovna, ať navazuje na kartu pod ní
   beze švu/mezery — jinak to vypadalo jako dvě na sobě nezávislé bubliny. */
html:root .hsh-search-card:has(.search-whisperer.active){border-radius:28px 28px 0 0}
html:root .hsh-search-icon{flex:none;display:flex;color:var(--ink3)}
html:root .hsh-search-icon svg{width:22px;height:22px}
html:root .hsh-search-in{flex:1 1 auto;min-width:0;display:flex;align-items:center}

/* all:unset na .search/.search-form/fieldset — Apeti na nich nastavuje
   display/position podle VLASTNÍCH (nepoužívaných) breakpointů a mobilního
   přepínače; jistější vynulovat úplně a postavit znovu, než dohledávat
   každou jednotlivou uniklou vlastnost zvlášť. position se tím zároveň
   vrátí na static — .hsh-search-card (position:relative výše) tak zůstává
   jediným containing blockem pro absolutně umístěnou nápovědu níže.
   display:block !important: pod 767px má Apeti "#header .search-form,
   #header .search{display:none}" — ID v selektoru vyhraje nad libovolným
   počtem tříd i bez !important, takže na mobilu bez něj celý formulář
   (a s ním input i tlačítko) mizel na 0×0. */
html:root .hsh-search-in .search,
html:root .hsh-search-in .search-form,
html:root .hsh-search-in .search-form fieldset{
  all:unset;display:block !important;width:100%;min-width:0;box-sizing:border-box;
}
/* min-width:0 nad rámec unset (jeho výchozí "auto" by na .search jako
   flex-itemu uvnitř .hsh-search-in dovolil nanejvýš zúžení na min-content
   šířku obsahu, ne libovolně málo) — bez toho na úzkém mobilu tlačítko
   "Hledat" přetékalo mimo pilulku i mimo obrazovku. */
html:root .hsh-search-in .search{flex:1 1 auto}
html:root .hsh-search-in .search-form fieldset{display:flex !important;align-items:center}
/* Skutečný viník toho "orámovaného pole": Apeti má
   ".search-form input[type=search].form-control{background:#f5f5f5
   !important;border-color:#f5f5f5!important}" — vyšší specificita (3
   třídy/atributy + typ) i !important, takže náš dřívější
   ".hsh-search-in .search-input" (jen 2 třídy, bez !important) proti němu
   neměl šanci, ať jsme na inputu nulovali cokoliv jiného. Selektor níže
   musí mít STEJNÝ tvar (element+atribut+třída), jen navíc s předkem
   .hsh-search-in pro vyšší specificitu, a vlastní !important. */
html:root .hsh-search-in .search-form input[type=search].form-control{
  all:unset;flex:1 1 auto;min-width:0;box-sizing:border-box;cursor:text;
  background:transparent !important;border-color:transparent !important;
  color:var(--ink);font-family:var(--ff-body);font-size:18px;padding:18px 0;
}
html:root .hsh-search-in .search-input::placeholder{color:var(--ink3);opacity:1}
/* Element+atribut v selektoru (button.btn), ne jen .btn — jinak specificitou
   prohraje s obecným "button[type=submit].btn-default" výše v souboru. */
/* !important na display/background/color: button[type=submit].btn-default
   (skutečná třída tlačítka „Hledat") už dřív dostal jinde ve skinu vlastní
   tmavý vzhled přes !important (viz univerzální primární tlačítko výše v
   souboru) — bez !important by tenhle jinak specifičtější selektor stejně
   prohrál. display:inline-flex musí být explicitní: all:unset resetuje
   display na výchozí "inline", a protože tlačítko sedí uvnitř fieldsetu s
   display:flex, "inline" se "blokuje" na block — ikona (Apeti :before) by
   pak stála NAD textem "Hledat" na vlastním řádku místo vedle něj. */
html:root .hsh-search-in button.btn{
  all:unset;display:inline-flex !important;align-items:center;justify-content:center;
  flex:none;box-sizing:border-box;cursor:pointer;text-align:center;white-space:nowrap;
  background:var(--gold) !important;color:var(--dark) !important;border-radius:999px;
  padding:16px 28px;font-family:var(--ff-body);font-weight:700;font-size:15.5px;
  transition:background .2s;
}
html:root .hsh-search-in button.btn:hover{background:var(--gold-dk) !important}
/* Apeti vkládá do tlačítka vlastní ikonu (přes písmo shoptet, :before) —
   .hsh-search-icon vlevo v pilulce už lupu ukazuje, druhá uvnitř tlačítka
   by byla zbytečná duplicita. */
html:root .hsh-search-in button.btn::before{content:none !important}
/* top:100% (bez mezery) + zaoblení jen dole — navazuje rovnou na pilulku
   nad sebou (ta si zase zaoblí jen nahoře, viz .hsh-search-card:has()
   výše), takže obojí čte jako JEDNA souvislá plocha, ne dvě bubliny
   s mezerou mezi sebou. */
html:root .hsh-search-in .search-whisperer{
  position:absolute;left:0;right:0;top:100%;background:#fff;
  border:0;border-top:1px solid var(--line);max-height:min(50vh,400px);overflow:auto;
  border-radius:0 0 28px 28px;box-shadow:var(--shadow-lg);
}
html:root .hsh-search-in .search-whisperer-empty{
  padding:18px 24px !important;color:var(--ink3);font-size:14px;text-align:center;
}
@media (max-width:600px){
  html:root .hsh-search-close{top:16px;right:16px;width:40px;height:40px}
  html:root .hsh-search-close svg{width:16px;height:16px}
  html:root .hsh-search-card{padding:6px 6px 6px 18px;gap:10px}
  html:root .hsh-search-in .search-input{font-size:16px;padding:14px 0}
  html:root .hsh-search-in button.btn{padding:13px 18px;font-size:14px}
}
/* --- Obsah nápovědy: kategorie (folder) + produkty (obrázek/název/cena) ---
   Shoptet sem vykresluje vlastní strukturu (.search-whisperer-category,
   .search-whisperer-products), kterou skin dosud nijak nestylizoval — bez
   flexu se obrázek/název/dostupnost/cena skládaly pod sebe jako rozpadlý
   sloupec a dostupnost si nesla natvrdo zelenou `style="color:#20c52c"`,
   která do palety nepatří (stejný případ jako u karty produktu, sekce 06). */
html:root .search-whisperer-category{
  display:flex !important;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3) !important;
  border-bottom:1px solid var(--line2);background:var(--bg) !important;
}
html:root .search-whisperer-category:hover{color:var(--red) !important;background:var(--bg) !important}
html:root .search-whisperer-category em{
  width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
html:root .search-whisperer-products{list-style:none;margin:0;padding:0}
html:root .search-whisperer-products li{border-bottom:1px solid var(--line2)}
html:root .search-whisperer-products li:last-child{border-bottom:0}
html:root .search-whisperer-products li a{
  display:flex !important;align-items:center;gap:12px;padding:10px 14px;
}
html:root .search-whisperer-image{flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;background:var(--bg)}
html:root .search-whisperer-image img{width:100%;height:100%;object-fit:contain}
/* Apeti dává .p-info `width:50%` a .price `width:100%;margin-top:-13px`
   (starý trik: cena při zalomení na vlastní řádek vytažená záporným
   marginem zpátky nahoru) — na `display:flex` řádku výše se `width:100%`
   u .price rovná "zaber celý řádek", takže se přes flex-wrap zalomí na
   samostatný řádek a záporný margin ji přitáhne přes název/dostupnost.
   Přesně tohle je ten "rozdělený" vzhled — width i margin-top proto
   musíme explicitně přepsat, ne jen dodat flex. */
html:root .search-whisperer-products .p-info{
  flex:1 1 auto;width:auto;min-width:0;display:flex;flex-direction:column;gap:2px;
}
html:root .search-whisperer-products .p-name{
  font-size:13.5px;font-weight:600;color:var(--ink);white-space:normal;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
html:root .search-whisperer-products .p-availability,
html:root .search-whisperer-products .availability-label,
html:root .search-whisperer-products .availability-label span{
  color:var(--ink3) !important;font-size:12px !important;font-weight:400 !important;
}
html:root .search-whisperer-products .price{
  flex:none !important;width:auto !important;margin-top:0 !important;
  font-family:var(--ff-display);font-size:14.5px;font-weight:600;color:var(--ink);
  text-align:right;white-space:nowrap;
}

/* --- Mobilní vysunovací menu (≤900px) ------------------------------------ */
@media (max-width:900px){
  html:root .hsh-burger{display:flex}
  html:root .hsh-links{
    position:fixed;top:0;bottom:0;left:0;width:min(340px,84vw);background:var(--dark);
    flex-direction:column;align-items:stretch;gap:0;padding:0 0 40px;flex-wrap:nowrap;
    transform:translateX(-100%);transition:transform .4s var(--ease);z-index:95;overflow-y:auto;
  }
  html:root .hsh-links.is-open{transform:translateX(0)}
  html:root .hsh-mobile-head{
    display:flex;align-items:center;justify-content:space-between;padding:20px 22px;
    border-bottom:1px solid var(--line-dark2);
  }
  html:root .hsh-mobile-head .hsh-brand-sm{display:flex;align-items:center;height:48px}
  html:root .hsh-mobile-head .hsh-brand-sm img{display:block;height:100%;width:auto}
  html:root .hsh-close{display:block;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1;padding:0}
  html:root .hsh-links > li{
    color:#fff;width:100%;border-bottom:1px solid var(--line-dark2);margin:0;
  }
  html:root .hsh-links > li > a{color:#fff;padding:15px 22px;width:100%;display:flex;align-items:center;justify-content:space-between}
  html:root .hsh-links > li > a::after{display:none}
  html:root .hsh-links > li.ext > ul.menu-level-2{
    position:static;box-shadow:none;border:0;background:rgba(255,255,255,.03);
    padding:4px 0 12px;animation:none;
  }
  html:root .hsh-links > li.ext:hover > ul.menu-level-2{display:none}
  html:root .hsh-links > li.ext:hover::after{display:none} /* můstek je zbytečný, mobil rozbaluje jen klikem (.exp) */
  html:root .hsh-links > li.ext.exp > ul.menu-level-2{display:block}
  html:root .hsh-links > li.ext > ul.menu-level-2 > .hsh-mega-grid{grid-template-columns:repeat(3,1fr);padding:0 22px}
  html:root .hsh-links ul.menu-level-2 > li > div > a{color:#fff}
  html:root .hsh-links ul.menu-level-2 > li:hover{background:rgba(255,255,255,.06)}
  html:root .hsh-backdrop{
    display:block;position:fixed;inset:0;background:rgba(17,16,16,.5);z-index:93;
    opacity:0;pointer-events:none;transition:opacity .35s;
  }
  html:root body.hsh-nav-open .hsh-backdrop{opacity:1;pointer-events:auto}
  html:root body.hsh-nav-open{overflow:hidden}
}

/* --- Patička v blank-mode ----------------------------------------------- */
/* Doplněk vzhledu dává patičce světlé pozadí a sloupcům pevné šířky —
obojí resetujeme,jinak se text zalomí po písmenech. */
html:root body.blank-mode #footer .footer-rows{background:transparent !important;padding-bottom:24px}
html:root body.blank-mode #footer .custom-footer{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;
  width:auto;margin:0;padding:0;
}
html:root body.blank-mode #footer .custom-footer > *{
  width:auto !important;min-width:0;max-width:none;flex:none;float:none;margin:0;padding:0;
}
/* Instagram sloupec je v administraci prázdný (žádný feed nastavený), ale
   pořád je to grid-item — nárokuje si celou třetí kolonu a zbylé dvě
   (kontakt/platby) by se zbytečně zúžily.
   :empty nepomůže — Shoptet do něj i prázdný vykreslí odsazení/zalomení
   řádků jako textový uzel, takže element technicky "prázdný" není a
   :empty na něj nikdy nesedne (ověřeno, ne teorie). Dokud administrátor
   feed nezapne, ať zabírá 0 místa natvrdo; zapnutí feedu vyžaduje i tak
   zásah v administraci, tenhle řádek se při tom smaže spolu s ním. */
html:root body.blank-mode #footer .custom-footer__instagram{display:none}
/* S bannerem plateb přesunutým dolů (viz initFooterPayments, script.js)
   zbývá v mřížce jen kontaktní sloupec — bez stropu na šířku by ho grid
   1fr roztáhl přes celý řádek a čtyři krátké řádky textu by osaměly
   uprostřed široké tmavé plochy. */
html:root body.blank-mode #footer .custom-footer__contact{max-width:280px}
html:root body.blank-mode #footer .contact-box,html:root body.blank-mode #footer .banner,html:root body.blank-mode #footer .banner-wrapper{
  width:auto !important;max-width:none;background:transparent;
}
html:root body.blank-mode #footer .banner-wrapper img{max-width:100%;height:auto}
html:root body.blank-mode #footer .contact-box ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
html:root body.blank-mode #footer .contact-box li{padding:0}
html:root body.blank-mode #footer .contact-box a{color:var(--steel)}
html:root body.blank-mode #footer .contact-box a:hover{color:var(--gold)}
/* "PŘIJÍMÁME ONLINE PLATBY" necháváme jen pro čtečky obrazovky — vedle
   "KONTAKTU" to jako druhý nadpis dělalo z bloku plakát; ikony samy o
   sobě říkají totéž. Vizuálně skrytý (ne display:none), ať o něj čtečky
   nepřijdou. */
html:root body.blank-mode #footer .banner-wrapper h4{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
html:root body.blank-mode #footer .banner-wrapper ul{padding:0;margin:0;list-style:none}
/* Malá bílá karta s logem plateb — jen záložní varianta pro nesloupcovou
   patičku (viz initFooterPayments ve script.js). Obrázek (comgate+Visa+
   Mastercard+GPay+ApplePay) je JEDEN spojený PNG s vlastním neprůhledným
   BÍLÝM pozadím (2200×200 px), takže bez rámečku by ležel jako bílý flek
   přímo na tmavé patičce. Zarámovaný a zmenšený vypadá jako záměrný
   odznak, ne jako chyba. Ve sloupcové patičce se místo toho kreslí vlastní
   drobné ikonky bez bílé — viz .hs-footer-pay-icons níže. */
html:root body.blank-mode #footer .hs-footer-pay-native{
  display:inline-flex;align-items:center;background:#fff;border-radius:8px;
  padding:5px 10px;line-height:0;order:-1;
}
html:root body.blank-mode #footer .hs-footer-pay-native img{height:18px;width:auto;max-width:none;display:block}
/* Vlastní drobné značky (bez bílého pozadí) pod sociálními ikonami ve
   sloupcové patičce — viz initFooterPayments()/PAY_ICONS ve script.js. */
html:root .hs-footer-pay-icons{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
html:root .hs-pay{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;line-height:1;letter-spacing:.01em}
html:root .hs-pay-visa{color:#5C7CFA;font-style:italic;font-weight:800;font-size:15px}
html:root .hs-pay-mc svg{width:26px;height:16px;display:block}
html:root .hs-pay-gpay,html:root .hs-pay-apay{color:var(--steel);font-weight:600}
html:root .hs-pay-apay svg{width:11px;height:13px}
html:root .hs-pay-comgate{color:var(--steel-dk);font-weight:600;text-transform:lowercase;font-size:12.5px}
html:root body.blank-mode #footer .container,html:root body.blank-mode #footer .footer-links-icons,html:root body.blank-mode #footer .footer-bottom,html:root body.blank-mode #footer .footer-rows{
  background:transparent !important;box-shadow:none;
}
html:root body.blank-mode #footer .footer-links{
  display:flex;flex-wrap:wrap;gap:7px 22px;list-style:none;margin:0;padding:16px 0 0;
  border-top:1px solid var(--line-dark2);
}
html:root body.blank-mode #footer .footer-links li{padding:0}
html:root body.blank-mode #footer .footer-links a{font-size:13px}
/* Apeti dává téhle liště flex-direction:column-reverse (počítá s tím, že se
   signatura vypisuje NAD copyrightem na mobilu) — na šířku to ale zbytečně
   skládá dva bloky pod sebe i na desktopu, s velkými okraji navíc (viz báze
   výše). Řádek + zarovnané okraje na 0 dělaly z patičky nejdelší blok webu. */
html:root body.blank-mode #footer .footer-bottom{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  min-height:0;padding:16px 0 0;margin-top:16px;border-top:1px solid var(--line-dark2);
}
html:root body.blank-mode #footer .copyright strong{font-family:var(--ff-body);font-size:inherit;text-transform:none;letter-spacing:0}
html:root body.blank-mode #footer .cookies-settings{margin-left:14px;text-decoration:underline}
@media (max-width:600px){
  html:root body.blank-mode #footer .footer-bottom{flex-direction:column-reverse;align-items:flex-start;gap:8px}
}

/* Šablona má vlastní tlačítko „nahoru" — necháváme jen jedno (naše).
   .hs-has-back-to-top je třída na <body>, ne na předkovi, proto sloučená
   (compound), ne oddělená mezerou — jinak by selektor nikdy nic nenašel. */
html:root body.blank-mode.hs-has-back-to-top div.back-to-top,html:root body.blank-mode.hs-has-back-to-top a.back-to-top{display:none !important}

/* Prázdný obsah úvodní strany (nejsou nastavené produkty) nemá dělat díru. */
html:root body.blank-mode.hs-page-index.hs-empty-content #content-wrapper{padding-top:0;padding-bottom:0}
html:root body.blank-mode.hs-page-index.hs-empty-content #content-wrapper .banners-row:empty,html:root body.blank-mode.hs-page-index.hs-empty-content #content-wrapper .wide-carousel:empty{display:none}

/* Tisk */
@media print{
  html:root .hs-hero,html:root .hs-marquee,html:root .hs-usp,html:root .hs-craft,html:root .hs-stats,html:root .hs-reviews,html:root .hs-newsletter,html:root .hs-contact,html:root .hs-engrave,html:root .hs-back-to-top,html:root .hs-topbar,html:root #navigation{display:none !important}
  html:root body{background:#fff}
}

/* ==========================================================================
   13  PRODUKTOVÁ DLAŽDICE — dorovnání 1:1 na návrh (.pcard)
   --------------------------------------------------------------------------
   Zdroj pravdy: .pcard v hasaki-home.css + cardHTML() v hasaki-products.js.
   Platí pro VŠECHNY výpisy — úvodní strana, kategorie, vyhledávání, podobné
   i alternativní produkty, cross-sell v košíku — proto se cílí na .product .p
   obecně, ne na konkrétní stránku.

   Návrh:
     ┌─ obrázek 170px, přechod #fff → --paper-dk, padding 22px ─┐
     │  štítek vlevo nahoře (12/12)                             │
     │  … při hoveru zpod spodní hrany vyjede pilulka           │
     ├───────────────────────────────────────────────────────────┤
     │  název (Bodoni 17)                                        │
     │  parametry (12px, šedé)                                   │
     │  hvězdičky                                                │
     │  cena (Bodoni 19; stará přeškrtnutá 14px Inter)           │
     └───────────────────────────────────────────────────────────┘
   Hover celé karty: posun o 6px nahoru + --shadow-md, obrázek scale(1.08).
   ========================================================================== */

:root{
  /* Výška obrázkové plochy. Používá ji i výpočet pozice vyjíždějícího
     tlačítka — měňte jen tady, ať obojí zůstane zarovnané. */
  /* Předloha měla 170 px, ale počítala s průhlednými SVG ilustracemi.
     U skutečných fotek působila dlaždice drobně — proto o něco výš. */
  --hs-card-img-h:200px;
}

/* --- Rám karty ---------------------------------------------------------- */
html:root .product .p,
html:root .products-block .p,
html:root .products .p{
  position:relative;height:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
html:root .product .p:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}

/* --- Obrázková plocha --------------------------------------------------- */
/* Pozadí obrázkové plochy je ČISTĚ BÍLÉ, ne krémový přechod z předlohy.
   Předloha pracovala s průhlednými SVG ilustracemi, kterým přechod slušel.
   Skutečné produktové fotky mají bílé pozadí — na krémovém přechodu se pak
   obdélník fotky (a bílé plochy uvnitř ní) ostře odráží a vypadá jako špína.
   Na bílé se fotka ztratí a dlaždice působí čistě; oddělení od těla karty
   drží vlasová linka. */
html:root .product .image,
html:root .product .p > .image{
  position:relative;flex:none;border:0;margin:0;
  height:var(--hs-card-img-h) !important;padding:22px !important;
  background:#fff !important;
  border-bottom:1px solid var(--line2) !important;
  display:flex !important;align-items:center;justify-content:center;overflow:hidden;
}
html:root .product .image img{
  max-height:100% !important;max-width:100% !important;width:auto !important;height:auto !important;
  object-fit:contain;transition:transform .5s var(--ease);
}
html:root .product .p:hover .image img{transform:scale(1.08)}

/* --- Štítky vlevo nahoře ------------------------------------------------ */
/* Shoptet používá .extra-flags uvnitř .image; .flags je varianta jinde. */
html:root .product .flags,
html:root .product .extra-flags{
  position:absolute;top:12px;left:12px;z-index:2;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
html:root .product .extra-flags:empty{display:none}

/* --- Tlačítko vyjíždějící zpod obrázku ----------------------------------
   Návrh: bottom:-50px → při hoveru bottom:14px. Shoptet má .p-tools až dole
   v .p-bottom, takže ho posadíme absolutně ke spodní hraně obrázku.
   `.p` má overflow:hidden, schovaný stav se tím ořízne. */
/* Ořezávací obal přes obrázkovou plochu (vkládá script.js). Bez něj by
   schované tlačítko nepřeteklo přes obrázek, ale přes název — .p ořezává až
   na okraji celé karty, kdežto v předloze ořezává samotný .pcard-img. */
html:root .hs-card-tools{
  position:absolute;left:0;right:0;top:0;height:var(--hs-card-img-h);
  overflow:hidden;pointer-events:none;z-index:3;
}
html:root .hs-card-tools .p-tools{
  position:absolute;left:14px;right:14px;bottom:-56px;top:auto;
  display:flex !important;gap:8px;padding:0 !important;border:0 !important;margin:0 !important;
  pointer-events:auto;transition:bottom .3s var(--ease);
}
html:root .product .p:hover .hs-card-tools .p-tools{bottom:14px}
html:root body.hs-no-hover-button .hs-card-tools{display:none !important}

html:root .product .p-tools .btn,
html:root .product .p-tools .add-to-cart-button,
html:root .product .p-tools .btn-cart,
html:root .product .p-tools button,
html:root .product .p-tools a{
  flex:1;display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
  background:var(--ink) !important;color:#fff !important;border:0 !important;
  border-radius:999px !important;padding:11px 16px !important;
  font-family:var(--ff-body) !important;font-size:13px !important;font-weight:700 !important;
  line-height:1.2 !important;letter-spacing:0;text-transform:none;box-shadow:none !important;
  cursor:pointer;white-space:nowrap;transition:background-color .2s;
}
html:root .product .p-tools .btn:hover,
html:root .product .p-tools a:hover,
html:root .product .p-tools button:hover{background:var(--red) !important;color:#fff !important}

/* Ikonka košíku před textem — v návrhu ji tlačítko má. Kreslí se maskou,
   takže dědí barvu textu i při hoveru. */
html:root .product .p-tools .btn::before,
html:root .product .p-tools a::before,
html:root .product .p-tools button::before{
  content:'';width:15px;height:15px;flex:none;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Ccircle cx='18' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L20.5 7H6'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Ccircle cx='18' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L20.5 7H6'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Dotykové displeje hover nemají — tlačítko tam necháme viditelné natrvalo
   (stejně jako předloha pod 520px). */
@media (max-width:520px){
  html:root .hs-card-tools .p-tools{bottom:14px}
}
@media (hover:none){
  html:root .hs-card-tools .p-tools{bottom:14px}
}

/* --- Tělo karty --------------------------------------------------------- */
html:root .product .p-in{
  padding:18px 20px 22px !important;display:flex;flex-direction:column;gap:8px;flex:1;
}
html:root .product .p-in-in{padding:0 !important;display:flex;flex-direction:column;gap:7px;flex:1}
/* Název: strop 3 řádky. Delší se ořízne (plné znění dá script.js do title),
   jinak jedna dlouhá položka vytáhne celou řadu karet do výšky. */
html:root .product .name,
html:root .product a.name{
  font-family:var(--ff-display) !important;font-size:17px !important;line-height:1.3 !important;
  color:var(--ink) !important;font-weight:600 !important;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
html:root .product .name:hover,html:root .product a.name:hover{color:var(--red) !important}

/* Krátký popis = řádek s parametry v návrhu. Ořízneme na dva řádky, ať
   karty ve mřížce drží stejnou výšku. */
html:root .product .p-desc{
  font-size:12px !important;color:var(--ink3) !important;line-height:1.5 !important;margin:0 !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

html:root .product .p-bottom{
  margin-top:auto;padding-top:8px;border:0 !important;display:flex;flex-direction:column;gap:6px;
}
html:root .product .prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0;padding:0}
/* Shoptet vkládá prázdný placeholder s &nbsp; — dělal mezeru nad cenou. */
html:root .product .price-standard-wrapper-placeholder{display:none !important}
html:root .product .price-final,
html:root .product .price-final strong,
html:root .product strong.price-final{
  font-family:var(--ff-display) !important;font-size:20px !important;
  color:var(--ink) !important;font-weight:600 !important;
}
html:root .product .price-standard,
html:root .product .price-standard span{
  color:var(--ink3) !important;font-size:14px !important;font-weight:500 !important;
  text-decoration:line-through;font-family:var(--ff-body) !important;
}

/* --- Varianty pod kartou: návrh je nemá --------------------------------
   Zpět: HASAKI_CONFIG.card.variantPicker = true */
html:root body:not(.hs-card-variants) .widget-parameter-wrapper{display:none !important}

/* --- Responzivita ------------------------------------------------------- */
@media (max-width:960px){
  :root{--hs-card-img-h:180px}
}
@media (max-width:520px){
  :root{--hs-card-img-h:240px}   /* jeden sloupec → obrázek smí být vyšší */
  html:root .product .p-in{padding:16px 18px 20px !important}
  html:root .product .name{font-size:16.5px !important}
}

/* ==========================================================================
   14  DETAIL PRODUKTU — dorovnání 1:1 na návrh (produkt.html)
   --------------------------------------------------------------------------
   Zdroj pravdy: hasaki-product.css. Sekce 08 výše cílí na obecné názvy tříd,
   tahle na SKUTEČNÝ DOM hasaki.cz (ověřeno z inspectu detailu produktu):
   .row.product-top → .p-image-wrapper (col-lg-6) + .p-info-wrapper (col-lg-6),
   .p-detail-inner-header, .p-final-price-wrapper, .add-to-cart, .shp-tabs.

   Návrh:  galerie 2fr | info 1fr, mezera 60px
           rám galerie: přechod, radius 28, stín, poměr 1:1, vodoznak 刃
           nadpis → hodnocení → cena → popis → parametry → koupit → benefity
   ========================================================================== */

/* --- Rozvržení: Shoptet má 50/50 přes Bootstrap, návrh 2fr/1fr ----------- */
html:root .p-detail .row.product-top{
  display:grid !important;grid-template-columns:2fr 1fr;gap:60px;
  align-items:start;margin:0 !important;
}
html:root .p-detail .row.product-top > .col-xs-12:empty{display:none}
html:root .p-detail .product-top > .p-image-wrapper,
html:root .p-detail .product-top > .p-info-wrapper{
  width:auto !important;max-width:none !important;flex:none !important;
  float:none !important;padding:0 !important;
}
@media (max-width:900px){
  html:root .p-detail .row.product-top{grid-template-columns:1fr;gap:36px}
}

/* --- Galerie: vitrína ----------------------------------------------------
   Rám dostal teplou přísvětlou plochu místo ploché bílé, dva protilehlé
   rohové paspartové zámky jako u výstavní vitríny a při najetí myší se
   fotka nadechne a stín zhoustne — efekt „přiblížení se ke sklu“. Prvky
   vkládané initGalleryShowcase() (plaketa s pořadím, ošetření rozbité
   fotky) zůstávají funkční, jen jim dáváme vrstvy a místo v rámu. Lupu
   Shoptetu (.mousetrap) níže nahrazujeme vlastní kruhovou čočkou —
   viz initGalleryTactility(). */
html:root .p-detail .p-image-wrapper{
  position:relative;background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;overflow:visible;
  /* Výchozí hodnoty čočky a náklonu — mění je initGalleryTactility() přes
     inline custom properties, ať má CSS i JS jediný zdroj pravdy (--hs-lens-d). */
  --hs-lens-d:172px;--hs-lens-x:50%;--hs-lens-y:50%;
  --hs-lens-bg:none;--hs-lens-size:220% 220%;--hs-lens-pos:50% 50%;
}
/* KURZOR MUSÍ BÝT NA <a>/<img>, NE NA PŘEDKOVI.
   Fotka je zabalená v <a class="p-main-image">, a UA stylesheet deklaruje
   odkazům `cursor:pointer`. Dědění se uplatní jen tam, kde element vlastní
   deklarovanou hodnotu nemá — takže `cursor` napsaný na .p-image nebo
   .p-image-wrapper se k fotce nikdy nedostane a nad ní zůstane ručička.
   (Ověřeno: elementFromPoint nad fotkou = IMG, computed cursor = pointer,
   i když .p-image mělo `none`.) Proto se cílí i na odkaz a obrázek. */
html:root .p-detail .p-image-wrapper > .p-image,
html:root .p-detail .p-image-wrapper > .p-image .p-main-image,
html:root .p-detail .p-image-wrapper > .p-image img{cursor:zoom-in}
/* Rozbitá/chybějící fotka se nedá zvětšovat — lupovací kurzor by sliboval
   funkci, která nenastane. */
html:root .p-detail .p-image-wrapper > .p-image.hs-img-broken,
html:root .p-detail .p-image-wrapper > .p-image.hs-img-broken .p-main-image,
html:root .p-detail .p-image-wrapper > .p-image.hs-img-broken img{cursor:default}
html:root .p-detail .p-image-wrapper > .p-image{
  position:relative;overflow:hidden;
  /* ČISTĚ BÍLÉ, žádné tónování ani gradient — a musí to tak zůstat.
     Shoptet servíruje fotky přes ?ff=1 („fill frame"): fotku na výšku
     768×1024 dopcpe na čtverec 1024×1024 dvěma NEPRŮHLEDNÝMI bílými pruhy
     po 128 px vlevo a vpravo (změřeno po pixelech na souboru, který stránka
     reálně načítá; surové PNG samo je čistý ořez s alfa kanálem).
     Na bílém podkladu ty pruhy splynou a nejsou vidět. Na krémovém přechodu
     nebo pod drop-shadow (viz .p-image img níž) se z nich stanou dva
     zřetelné bílé obdélníky vedle produktu.
     Prémiový dojem drží rám, stín rámu, rohové akcenty a lupa při hoveru —
     ne podklad pod fotkou. Stejné rozhodnutí jako u dlaždic (sekce 13). */
  background:#fff;
  border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-md);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:9%;
  transition:box-shadow .4s var(--ease);
}
/* Rohové zámky — jen dva protilehlé rohy, ať rám nezačne připomínat
   formulářové pole. z-index nad #wrap, ale pointer-events:none, ať
   nepřekáží kurzoru ani sledování myši pro čočku níže. Apeti dává
   `.p-image::after` vlastní šedou background-color (placeholder pro
   nedostupnou fotku) — bez explicitního resetu by prosvítala pod zámkem
   jako šedý čtvereček místo tenké zlaté linky. */
html:root .p-detail .p-image-wrapper > .p-image::before,
html:root .p-detail .p-image-wrapper > .p-image::after{
  content:'';position:absolute;width:26px;height:26px;z-index:2;
  background:transparent;border:1px solid var(--gold-dk);opacity:.5;pointer-events:none;
  transition:opacity .4s var(--ease),top .4s var(--ease),left .4s var(--ease),right .4s var(--ease),bottom .4s var(--ease);
}
html:root .p-detail .p-image-wrapper > .p-image::before{top:16px;left:16px;border-width:1px 0 0 1px}
html:root .p-detail .p-image-wrapper > .p-image::after{bottom:16px;right:16px;border-width:0 1px 1px 0}
/* Hover se váže na .p-image (rám s fotkou), NE na .p-image-wrapper.
   Wrapper totiž obsahuje i pás náhledů pod fotkou — při najetí na náhled se
   proto rozjížděly rohové akcenty, náklon fotky i kruhová lupa. */
html:root .p-detail .p-image-wrapper > .p-image:hover::before{top:12px;left:12px;opacity:.85}
html:root .p-detail .p-image-wrapper > .p-image:hover::after{bottom:12px;right:12px;opacity:.85}
html:root .p-detail .p-image-wrapper > .p-image:hover{box-shadow:var(--shadow-lg)}
html:root .p-detail .p-image #wrap{
  position:relative;z-index:1;width:100%;height:100%;
  display:flex !important;align-items:center;justify-content:center;
}
html:root .p-detail .p-main-image{display:flex !important;align-items:center;justify-content:center;width:100%;height:100%}
html:root .p-detail .p-image img{
  max-width:100% !important;max-height:100% !important;width:auto !important;height:auto !important;
  object-fit:contain;padding:0 !important;margin:0 auto;
  /* ŽÁDNÝ filter:drop-shadow — a je to schválně (ověřeno měřením pixelů).
     Shoptet servíruje fotky přes ?ff=1 („fill frame"): fotku na výšku
     768×1024 dopcpe na čtverec 1024×1024 dvěma NEPRŮHLEDNÝMI bílými pruhy
     po 128 px (12,5 %) vlevo a vpravo. drop-shadow se počítá z neprůhledné
     siluety, takže obkresloval právě tyhle dva obdélníky — a z neviditelné
     bílé výplně se staly dva zřetelné „bílé bannery" vedle nože.
     Bez stínu bílé pruhy splynou s bílým podkladem rámu a zmizí.
     Prémiový dojem drží rám (.p-image box-shadow), rohové akcenty
     a náklon při hoveru — ne stín pod fotkou. */
  transform:perspective(1600px) rotateX(0) rotateY(0) scale(1);
  transition:transform .5s var(--ease);
}
/* Náklon (--hs-tilt-x/y) sleduje kurzor — nastavuje ho initGalleryTactility()
   při mousemove; v klidu (bez JS nebo mimo hover) jede na výchozí 0deg. */
html:root .p-detail .p-image-wrapper > .p-image:hover img{
  transform:perspective(1600px) rotateX(var(--hs-tilt-x,0deg)) rotateY(var(--hs-tilt-y,0deg)) scale(1.025);
}

/* --- Fotka s vlastním pozadím: přes celý rám ----------------------------
   Třídu .hs-bleed nasazuje applyFit() (script.js, sekce 6b2), když z pixelů
   vyjde, že fotka NENÍ vyřezaný produkt na průhledné/bílé, ale reportážní
   snímek s vlastním pozadím. Taková fotka nemá důvod plavat uprostřed bílé
   pasparty — vyplní rám od hrany k hraně, zaoblení řeší overflow:hidden rámu.
   --hs-fit-scale / -x / -y dopočítá JS tak, aby se odřízla bílá výplň, kterou
   do souboru přidal Shoptet přes ?ff=1. Bez JS (nebo když CDN nepustí čtení
   pixelů) třída nevznikne a platí dál výchozí pasparta — nic se nerozbije. */
html:root .p-detail .p-image-wrapper > .p-image.hs-bleed{padding:0}
html:root .p-detail .p-image-wrapper > .p-image.hs-bleed img{
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  object-fit:cover;
  transform:translate(var(--hs-fit-x,0),var(--hs-fit-y,0)) scale(var(--hs-fit-scale,1));
}
html:root .p-detail .p-image-wrapper > .p-image.hs-bleed:hover img{
  transform:translate(var(--hs-fit-x,0),var(--hs-fit-y,0))
            perspective(1600px) rotateX(var(--hs-tilt-x,0deg)) rotateY(var(--hs-tilt-y,0deg))
            scale(calc(var(--hs-fit-scale,1) * 1.025));
}
/* Rohové akcenty na tmavé fotce potřebují víc kontrastu než na bílé. */
html:root .p-detail .p-image-wrapper > .p-image.hs-bleed::before,
html:root .p-detail .p-image-wrapper > .p-image.hs-bleed::after{
  border-color:rgba(255,255,255,.75);opacity:.8;
}

/* --- Čočka: kruhová lupa nahrazující výchozí hranatou lupu Shoptetu -----
   .mousetrap necháváme v DOMu (Shoptetovy skripty na něj sahají), jen ho
   zcela skryjeme — vlastní čočka běží na .p-image-wrapper::after a polohu
   i náhled dostává přes custom properties z initGalleryTactility(). */
html:root .p-detail .mousetrap{display:none !important}
html:root .p-detail .p-image-wrapper::after{
  content:'';position:absolute;z-index:4;pointer-events:none;
  width:var(--hs-lens-d);height:var(--hs-lens-d);border-radius:50%;
  left:var(--hs-lens-x);top:var(--hs-lens-y);
  transform:translate(-50%,-50%) scale(.86);opacity:0;
  border:1px solid var(--gold-dk);box-shadow:var(--shadow-lg);
  background:var(--paper) var(--hs-lens-bg) no-repeat;
  background-size:var(--hs-lens-size);background-position:var(--hs-lens-pos);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
html:root .p-detail .p-image-wrapper.hs-zoom-active::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Kurzor mizí jen nad fotkou (lupa ho nahrazuje), ne nad náhledy pod ní —
   tam ho uživatel potřebuje vidět, aby věděl, že se dá klikat.
   Znovu: musí se cílit i na <a> a <img>, jinak vyhraje `cursor:pointer`
   z UA stylesheetu pro odkazy (viz komentář u cursor:zoom-in výše). */
html:root .p-detail .p-image-wrapper.hs-zoom-active > .p-image,
html:root .p-detail .p-image-wrapper.hs-zoom-active > .p-image .p-main-image,
html:root .p-detail .p-image-wrapper.hs-zoom-active > .p-image img{cursor:none}

/* --- Přepnutí fotky: tvrdý střih, ŽÁDNÉ prolnutí ------------------------
   Dřív tu byla animace hsGallerySwap (opacity 0 → 1 + drobné zvětšení), která
   se přehrála po každé výměně src. Dokud se fotka nepřednačítala, maskovala
   prázdný rám; jenže po přednačtení už nemá co maskovat a čtenář ji vidí jako
   bliknutí. Odstraněno včetně keyframes.
   .hs-nofx nasazuje show() na jediný snímek, aby se změna režimu rámu
   (pasparta ↔ přes celý rám) neanimovala na staré fotce — to bylo to druhé
   bliknutí. Uvolní se hned v následujícím requestAnimationFrame. */
html:root .p-detail .p-image.hs-nofx img,
html:root .p-detail .p-image.hs-nofx,
html:root .p-detail .p-image.hs-nofx::before,
html:root .p-detail .p-image.hs-nofx::after{transition:none !important}

@media (prefers-reduced-motion:reduce){
  html:root .p-detail .p-image-wrapper::after{display:none !important}
  html:root .p-detail .p-image-wrapper > .p-image:hover img{transform:scale(1.025)}
}

/* Vodoznak 刃 (vkládá initDetailExtras). Obecné pravidlo sekce 08 ho sází
   doprostřed přes celou fotku — tady ho posouváme do rohu jako punc a
   barvíme do zlata místo inkoustu, ať nekříží siluetu nože. Vyšší
   specificita (o třídu navíc) ho bez !important přebije. */
html:root .p-detail .hs-kanji-watermark{
  inset:auto;top:auto;left:auto;right:-4%;bottom:-8%;
  font-size:clamp(120px,15vw,240px);color:rgba(201,161,74,.12);z-index:0;
}
/* Rozbitá fotka (testovací produkty) by v rámu ukázala jen šedou ikonku
   prohlížeče — necháme <img> schovaný, rám dál nese záři a vodoznak; ty
   ztmavíme, ať prázdný rám nepůsobí jako chyba, ale jako záměrná vitrína. */
html:root .p-detail .p-image.hs-img-broken img{visibility:hidden}
html:root .p-detail .p-image.hs-img-broken .hs-kanji-watermark{color:rgba(201,161,74,.22)}

/* Plaketa s pořadím fotky (vkládá initGalleryShowcase), čtená jako popisek
   exponátu. Skript ji vytváří jen od druhé fotky výš. */
html:root .p-detail .hs-gallery-count{
  position:absolute;left:18px;bottom:16px;z-index:3;
  font-family:var(--ff-display);font-size:12px;letter-spacing:.06em;
  color:var(--ink2);background:rgba(255,253,249,.82);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  pointer-events:none;
}

/* Řemeslné odznaky (vkládá initGalleryCraftBadges, čte skutečné parametry
   produktu). Horní pravý roh je jediný, kam nekřižují zámky/plaketa/vodoznak
   výše — beze shody v datech se blok vůbec nevytvoří. */
html:root .p-detail .hs-craft-badges{
  position:absolute;top:18px;right:18px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:none;
}
html:root .p-detail .hs-craft-badge{
  display:flex;align-items:baseline;gap:6px;max-width:100%;
  background:rgba(255,253,249,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px 6px 12px;
  box-shadow:var(--shadow-sm);opacity:0;transform:translateY(-6px);
  animation:hsCraftBadgeIn .5s var(--ease) forwards;
}
html:root .p-detail .hs-craft-badge strong{
  font-family:var(--ff-display);font-size:15px;font-weight:600;color:var(--gold-dk);line-height:1;white-space:nowrap;
}
html:root .p-detail .hs-craft-badge span{
  font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12ch;
}
html:root .p-detail .hs-craft-badge:nth-child(2){animation-delay:.14s}
@keyframes hsCraftBadgeIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html:root .p-detail .hs-craft-badge{animation:none;opacity:1;transform:none}
}

@media (max-width:520px){
  html:root .p-detail .p-image-wrapper > .p-image{border-radius:22px;padding:12%}
  html:root .p-detail .p-image-wrapper > .p-image::before,
  html:root .p-detail .p-image-wrapper > .p-image::after{width:20px;height:20px}
  html:root .p-detail .hs-craft-badges{top:12px;right:12px;gap:6px}
  html:root .p-detail .hs-craft-badge{padding:5px 11px 5px 10px}
  html:root .p-detail .hs-craft-badge strong{font-size:13px}
  html:root .p-detail .p-image-wrapper{--hs-lens-d:132px}
}

/* --- Pás náhledů: vybraný kus jako exponát se zlatým špendlíkem --------- */
html:root .p-detail .p-thumbnails-wrapper{margin-top:16px}
/* Jediná fotka nemá co vybírat — pruh s jedním čtverečkem by jen budil dojem,
   že existují další fotky. */
html:root .p-detail .p-thumbnails-wrapper:has(.p-thumbnail:only-child){display:none}
html:root .p-detail .p-thumbnails-inner > div{display:flex;gap:10px;flex-wrap:wrap}
/* Apeti dává té řádce clearfix (.p-thumbnails>div>div:before/:after
   {content:" ";display:table}) — počítá s float layoutem. Ve flexu z nich
   jsou ale plnohodnotné flex items: nulově široké, zato každý spotřebuje
   jeden gap. Pás náhledů tím začínal odsazený a na mobilu se kvůli tomu
   čtvrtý náhled zalamoval do druhé řady. Ve flexu clearfix nemá co dělat. */
html:root .p-detail .p-thumbnails-inner > div::before,
html:root .p-detail .p-thumbnails-inner > div::after{display:none}
html:root .p-detail .p-thumbnail{
  display:block;width:96px;height:96px;position:relative;cursor:pointer;
  /* Shoptet/Apeti počítá s float layoutem a sype na náhledy marginy
     (margin-left:-1px, margin-right:5px). Ve flexu tím náhledy o pixel lezou
     jeden na druhý, ukrajují si klikací plochu a rozestup se sčítá s gapem
     (výsledná mezera byla 13px místo 10px, což na mobilu vytlačilo čtvrtý
     náhled do druhé řady). Nulujeme vše, rozestup řeší výhradně gap. */
  margin:0 !important;
  transition:transform .3s var(--ease);
}
html:root .p-detail .p-thumbnail img{
  width:100%;height:100%;object-fit:contain;display:block;
  border:1px solid var(--line) !important;border-radius:14px;
  /* BÍLÁ podložka, ne krémová --paper. Fotky mají od Shoptetu (?ff=1)
     neprůhledné bílé postranní pruhy — na krémové ploše z nich svítily dva
     obdélníky a celý náhled působil špinavě a „zašedle". Na bílé splynou
     a zůstane čistý náhled se samotným nožem. */
  background:#fff;
  padding:5px;transition:border-color .25s,box-shadow .25s;filter:none;
}
html:root .p-detail .p-thumbnail:hover{transform:translateY(-2px)}
html:root .p-detail .p-thumbnail:hover img{
  border-color:var(--gold-dk) !important;box-shadow:0 0 0 3px rgba(201,161,74,.18),var(--shadow-sm);
}
html:root .p-detail .p-thumbnail.highlighted{transform:translateY(-3px)}
html:root .p-detail .p-thumbnail.highlighted img{
  border-color:var(--gold-dk) !important;box-shadow:0 0 0 3px rgba(201,161,74,.32),var(--shadow-sm);
}
/* Zlatá tečka pod vybraným náhledem — jako špendlík u vystaveného kusu */
html:root .p-detail .p-thumbnail::after{
  content:'';position:absolute;left:50%;bottom:-9px;width:5px;height:5px;border-radius:50%;
  background:var(--gold-dk);opacity:0;transform:translateX(-50%) scale(.4);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
html:root .p-detail .p-thumbnail.highlighted::after{opacity:1;transform:translateX(-50%) scale(1)}
/* Rozbitý náhled (testovací fotka) raději úplně schováme, než ukazovat
   šedou ikonku v řadě vedle skutečných fotek. */
html:root .p-detail .p-thumbnail.hs-img-broken{display:none}
html:root .p-detail .cbox-gal{display:none}
html:root .p-detail .thumbnail-prev,html:root .p-detail .thumbnail-next{display:none}

/* --- Hlavička informačního sloupce -------------------------------------- */
html:root .p-detail .p-detail-inner-header h1{
  font-family:var(--ff-display);font-size:clamp(26px,3vw,38px) !important;
  line-height:1.06;color:var(--ink);margin:0;font-weight:600;
}
html:root .p-detail .stars-wrapper{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
}
html:root .p-detail .stars{color:var(--gold-dk)}
html:root .p-detail .stars-label{font-size:13px;color:var(--ink3)}
html:root .p-detail .js-ratingDialogTrigger{
  background:none !important;border:0 !important;padding:0 !important;
  font-family:var(--ff-body);font-size:13px;color:var(--ink3);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
html:root .p-detail .js-ratingDialogTrigger:hover{color:var(--red)}

/* Značka + kód — na JEDNOM řádku, zarovnané vlevo.
   Apeti sype .p-detail-info{flex-direction:column} a to je potřeba explicitně
   přebít: bez toho se údaje řadily pod sebe a moje `align-items:center` v tom
   sloupci znamenala vodorovné vycentrování, takže to plavalo na střed. */
html:root .p-detail .p-detail-info{
  display:flex;flex-direction:row !important;justify-content:flex-start;
  align-items:center;flex-wrap:wrap;gap:0 0;row-gap:6px;
  margin-top:12px;font-size:13px;color:var(--ink3);
}
/* Svislá vlásková linka mezi údaji. Kreslí se přes `* + *`, takže vzniká jen
   tam, kde něco předchází — produkt bez značky (nebo bez kódu) nezůstane
   s osamocenou čárkou na začátku řádku. */
html:root .p-detail .p-detail-info > * + *::before{
  content:'';display:inline-block;vertical-align:middle;
  width:1px;height:12px;margin:0 16px;background:var(--line);
}
/* Apeti cílí přímo na dítě: `.p-detail-info .p-code{color:#333;font-size:11px}`.
   Deklarace na potomkovi vyhraje nad hodnotou zděděnou z .p-detail-info, takže
   kód byl vedle značky menší a tmavší. Sjednocujeme ho zpět. */
html:root .p-detail .p-detail-info .p-code{font-size:13px;color:var(--ink3)}
html:root .p-detail .p-detail-info a{color:var(--ink3)}
html:root .p-detail .p-detail-info a:hover{color:var(--red)}
/* Scopovat na .p-detail-info — Apeti stejnou třídu .p-code používá i v hlavičce
   detailu a v dlaždicích výpisu, kde by nám tenhle styl přetekl. */
html:root .p-detail .p-detail-info a span,
html:root .p-detail .p-detail-info .p-code > span:last-child{color:var(--ink);font-weight:600}

/* --- Cena --------------------------------------------------------------- */
html:root .p-detail .p-final-price-wrapper{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 4px;
}
html:root .p-detail .p-final-price-wrapper .price-final,
html:root .p-detail .price-final-holder{
  font-family:var(--ff-display) !important;font-size:clamp(26px,2.6vw,34px) !important;
  color:var(--ink) !important;font-weight:600 !important;
}
html:root .p-detail .price-additional{font-size:13px;color:var(--ink3);font-family:var(--ff-body)}

/* Dostupnost — Shoptet ji píše zelenou inline stylem */
html:root .p-detail .availability-value{margin-top:6px}
html:root .p-detail .availability-label,
html:root .p-detail .availability-label span{
  color:var(--gold-dk) !important;font-size:13.5px !important;font-weight:600 !important;
  border:0 !important;text-decoration:none !important;
}

/* --- Parametry v pravém sloupci (přesouvá script.js) --------------------- */
html:root .hs-detail-specs{margin:22px 0 0}
html:root .hs-detail-specs table,
html:root .p-info-wrapper table.detail-parameters{
  width:100%;border-collapse:collapse;font-size:14px;margin:0;
  border-top:1px solid var(--line2);
}
html:root .p-info-wrapper .detail-parameters tr{border-bottom:1px solid var(--line2)}
html:root .p-info-wrapper .detail-parameters th,
html:root .p-info-wrapper .detail-parameters td{padding:11px 0;text-align:left;vertical-align:baseline;border:0}
html:root .p-info-wrapper .detail-parameters th{
  color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;
  font-size:11.5px;font-weight:600;width:44%;
}
html:root .p-info-wrapper .detail-parameters td{color:var(--ink);font-weight:600;text-align:right}
html:root .p-info-wrapper .detail-parameters td a{color:var(--ink)}
html:root .p-info-wrapper .detail-parameters td a:hover{color:var(--red)}
/* Návrh nemá za názvem parametru dvojtečku */
html:root .row-header-label-colon{display:none}
/* Osiřelý nadpis „Doplňkové parametry" v záložce (tabulku jsme odnesli) */
html:root .extended-description.hs-empty{display:none}
/* Dodací lhůta zůstává v info sloupci jako první řádek parametrů */
html:root .p-info-wrapper .delivery-time-label{
  color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;font-weight:600;
}
html:root .p-info-wrapper .delivery-time{display:inline-block;margin-left:8px;color:var(--ink);font-weight:600}

/* --- Krátký popis ------------------------------------------------------- */
html:root .p-detail .p-short-description{
  color:var(--ink2);font-size:15.5px;line-height:1.7;margin-top:14px;max-width:52ch;
}
html:root .p-detail .p-short-description p{margin:0}

/* --- Nákupní řádek ------------------------------------------------------ */
html:root .p-detail .add-to-cart{
  display:flex !important;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;
}
html:root .p-detail .quantity{
  display:inline-flex !important;align-items:center;order:0;
  border:1px solid var(--line) !important;border-radius:999px !important;
  overflow:hidden;background:var(--paper) !important;padding:0 !important;
}
html:root .p-detail .quantity label{margin:0;order:2}
html:root .p-detail .quantity .amount{
  width:52px;border:0 !important;background:transparent !important;text-align:center;
  font-family:var(--ff-body);font-weight:700;color:var(--ink);box-shadow:none !important;
  -moz-appearance:textfield;padding:0 !important;height:40px;
}
html:root .p-detail .quantity .amount::-webkit-outer-spin-button,
html:root .p-detail .quantity .amount::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html:root .p-detail .quantity .decrease{order:1}
html:root .p-detail .quantity .increase{order:3}
html:root .p-detail .quantity .increase,
html:root .p-detail .quantity .decrease{
  width:38px;height:40px;display:flex;align-items:center;justify-content:center;
  border:0 !important;background:transparent !important;color:var(--ink2) !important;
  cursor:pointer;font-size:16px;padding:0 !important;border-radius:0 !important;
  transition:background-color .2s,color .2s;
}
html:root .p-detail .quantity .increase:hover,
html:root .p-detail .quantity .decrease:hover{background:var(--ink) !important;color:var(--paper) !important}
html:root .p-detail .quantity .increase-tooltip,
html:root .p-detail .quantity .decrease-tooltip{display:none !important}
/* Vedle tlačítka s flex:1 by se pilulka smrskla — overflow:hidden jí dělá
   automatickou minimální šířku 0. Držíme ji na součtu prvků (38+52+38). */
html:root .p-detail .add-to-cart .quantity{flex:none;min-width:128px}

/* POZOR na rozsah: jen tlačítko v nákupním řádku pravého sloupce.
   Tabulka variant má vlastní, ikonkové (.variant-cart .btn-cart) — viz sekce 15. */
html:root .p-detail .add-to-cart .add-to-cart-button{
  flex:1;min-width:200px;justify-content:center;
  display:inline-flex !important;align-items:center;gap:8px;
  background:var(--ink) !important;color:var(--paper) !important;border:0 !important;
  border-radius:999px !important;padding:15px 28px !important;
  font-family:var(--ff-body) !important;font-size:15px !important;font-weight:600 !important;
  letter-spacing:.01em;box-shadow:var(--shadow-sm) !important;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s;
}
html:root .p-detail .add-to-cart .add-to-cart-button:hover{
  background:var(--red) !important;box-shadow:var(--shadow-md) !important;transform:translateY(-2px);
}

/* --- Benefity pod tlačítkem (vkládá script.js) --------------------------
   Původně tři drobné 18px ikonky v řádku — vedle nadpisu/ceny/tlačítka
   úplně zapadly. Ikona teď sedí ve vlastní zlaté plaketě jako v sekci USP
   na úvodní straně (tam 34px, tady o trochu menší, ať se tři řádky vejdou
   pod nákupní tlačítko bez nafouknutí celého sloupce).
   initDetailExtras() vkládá blok BUĎ do úzkého .p-info-wrapper (běžný
   produkt, ~370px), BUĎ — u produktu s variantami, kde není v pravém
   sloupci nákupní řádek — jako sourozence celé mřížky galerie/info
   (~1170px). Pevný flex-column by ve druhém případě zůstal nalepený na
   levém okraji té široké plochy. `flex-wrap` s `flex-basis` na položce
   totéž zvládne responzivně bez druhé sady pravidel: v širokém obalu se
   3 kusy vejdou do jednoho řádku a rozestoupí se přes celou šířku, v úzkém
   se nevejdou dva a spadnou zpátky pod sebe — dnešní vzhled se nezmění. */
html:root .hs-trust{
  display:flex;flex-wrap:wrap;gap:18px 32px;margin-top:26px;padding-top:24px;
  border-top:1px solid var(--line2);
}
/* justify-content:center — v širokém řádku (viz výše) má každá položka
   flex-grow přes třetinu šířky; bez centrování zůstávala ikona+text
   nalepené k levému okraji SVÉ třetiny a napravo od poslední položky
   zbyla jedna velká prázdná plocha až k okraji produktu. Centrováním
   obsahu v každé třetině vyjde řádek vizuálně vyvážený, na střed se
   šířkou celého produktu (fotka + info sloupec). */
html:root .hs-trust span{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:15.5px;font-weight:600;color:var(--ink);text-align:center;
  flex:1 1 230px;
}
html:root .hs-trust svg{
  width:24px;height:24px;padding:13px;box-sizing:content-box;flex:none;
  color:var(--gold-dk);background:var(--gold-soft);border-radius:50%;
}

/* --- Odkazy Tisk / Zeptat se / Hlídat / Sdílet -------------------------- */
html:root .p-detail .social-buttons-wrapper{margin-top:20px}
html:root .p-detail .link-icons{display:flex;gap:18px;flex-wrap:wrap;padding:0;border:0}
html:root .p-detail .link-icons a{color:var(--ink3);font-size:12.5px}
html:root .p-detail .link-icons a:hover{color:var(--red)}

/* --- Pás benefitů (banner z administrace; návrh ho nemá) ---------------- */
html:root .benefitBanner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  margin:50px 0 10px;padding:34px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
}
html:root .benefitBanner__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
html:root .benefitBanner__picture{width:76px;height:76px;display:flex;align-items:center;justify-content:center}
html:root .benefitBanner__img{max-width:100%;max-height:100%;object-fit:contain}
html:root .benefitBanner__title{
  font-family:var(--ff-display);font-size:15px;font-weight:600;color:var(--ink);
  text-transform:none;letter-spacing:0;
}
html:root .benefitBanner__data{font-size:13px;color:var(--ink3);line-height:1.5}
html:root body.hs-no-benefit-banner .benefitBanner{display:none !important}
@media (max-width:820px){html:root .benefitBanner{grid-template-columns:repeat(2,1fr);row-gap:28px}}
@media (max-width:480px){html:root .benefitBanner{grid-template-columns:1fr}}

/* --- Záložky ------------------------------------------------------------ */
html:root .p-detail-tabs-wrapper{padding:26px 0 78px}
/* Apeti dává liště záložek `overflow:auto` na OBOU osách. Vodorovně se to
   hodí (na úzkém displeji ať jde záložky přejet prstem), ale obsah je i tak
   o 1px vyšší než box (subpixelové zaokrouhlení řádku), takže "auto" na Y
   ukázalo permanentní, nefunkční svislý posuvník vedle záložek. Svisle tu
   nikdy nic přetéct nemá — Y natvrdo schováváme, X zůstává funkční. */
html:root .shp-tabs-holder,
html:root .shp-tabs.p-detail-tabs{overflow-y:hidden}
html:root .shp-tabs-holder{border-bottom:1px solid var(--line);overflow-x:auto}
html:root ul.shp-tabs{
  display:flex;gap:4px;list-style:none;margin:0;padding:0;border:0;background:transparent;
}
html:root .shp-tab{margin:0;padding:0;border:0;background:transparent}
html:root .shp-tab .shp-tab-link{
  display:block;position:relative;background:none !important;border:0 !important;
  padding:14px 20px !important;
  font-family:var(--ff-body) !important;font-weight:700 !important;font-size:14.5px !important;
  color:var(--ink3) !important;white-space:nowrap;transition:color .2s;
}
html:root .shp-tab .shp-tab-link::after{
  content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:2px;
  background:transparent;transition:background-color .2s;
}
html:root .shp-tab .shp-tab-link:hover{color:var(--ink) !important}
html:root .shp-tab.active .shp-tab-link{color:var(--ink) !important}
html:root .shp-tab.active .shp-tab-link::after{background:var(--red)}

html:root #tab-content{padding:32px 0 4px}
html:root #tab-content .tab-pane{max-width:860px}
html:root .description-inner p{color:var(--ink2);line-height:1.75;font-size:15.5px;margin:0 0 14px}
html:root .description-inner h1,html:root .description-inner h2,
html:root .description-inner h3,html:root .description-inner h4{
  font-family:var(--ff-display);color:var(--ink);margin:26px 0 12px;
}
html:root .description-inner h1{font-size:26px}
html:root .description-inner h3{font-size:20px}
html:root .description-inner img{border-radius:16px;margin:8px auto}
html:root .description-inner table{
  width:100%;border-collapse:collapse;font-size:14.5px;margin:18px 0;
  background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:16px;overflow:hidden;
}
html:root .description-inner table th,html:root .description-inner table td{
  padding:12px 14px !important;border:0 !important;border-bottom:1px solid var(--line2) !important;text-align:left !important;
}
html:root .description-inner table th{
  color:var(--ink3) !important;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;font-weight:600;
  background:transparent !important;
}
html:root .description-inner table td{color:var(--ink)}
html:root .description-inner table tr:last-child td{border-bottom:0 !important}

/* Diskuze */
html:root .discussion-wrapper h2{font-family:var(--ff-display);font-size:24px;margin:0 0 14px}
html:root .discussionContainer p{color:var(--ink2);font-size:15px}

/* ==========================================================================
   15  VARIANTY + SPODNÍ ČÁST DETAILU (popis, diskuze)
   --------------------------------------------------------------------------
   Produkty s variantami se z výpisu do košíku přidat nedají — Shoptet místo
   nákupního řádku vykreslí záložku „Varianty" s tabulkou (.variant-table).
   Ta je postavená na bootstrapím gridu (.table-row / .table-col / .col-xs-*),
   který se v našem rozvržení rozpadal.

   Zároveň tady dostává tvar celá spodní část stránky — obsah záložek stál na
   holém bílém pozadí. Dáváme mu papírovou kartu, typografii HASAKI a krotíme
   tabulky/obrázky vložené z editoru administrace (mívají `float:left`
   a pevné šířky v px).
   ========================================================================== */

/* --- Tabulka variant ---------------------------------------------------- */
html:root .variant-table{display:block}
html:root .variant-table .table-row{
  display:grid !important;grid-template-columns:1fr auto auto;gap:28px;align-items:center;
  padding:22px 0 !important;margin:0 !important;
  border-bottom:1px solid var(--line2);float:none !important;width:auto !important;
}
html:root .variant-table .table-row:last-child{border-bottom:0}
html:root .variant-table .table-col{
  width:auto !important;max-width:none !important;float:none !important;
  padding:0 !important;margin:0 !important;
}
html:root .variant-table .variant-name{
  font-family:var(--ff-display);font-size:19px;line-height:1.3;
  color:var(--ink);font-weight:600;margin-bottom:6px;
}
html:root .variant-table .variant-name-wrapper{font-size:13px;color:var(--ink3)}
html:root .variant-table .variant-name-wrapper > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
html:root .variant-table .variant-name{flex:0 0 100%}

/* Dostupnost píše Shoptet inline barvou (#20c52c skladem, #cb0000 na dotaz).
   Zelená ani signální červená do palety nepatří — přebarvujeme, ale rozdíl
   „skladem / nedostupné" zachováváme. */
html:root .variant-table .variant-name-wrapper span[style]{color:var(--gold-dk) !important;font-weight:600}
html:root .variant-table .variant-name-wrapper span[style*="cb0000"],
html:root .variant-table .variant-name-wrapper span[style*="c00"],
html:root .variant-table .variant-name-wrapper span[style*="red"]{color:var(--red) !important}
html:root .variant-table .variant-name-wrapper span[style] .acronym,
html:root .variant-table .variant-name-wrapper .acronym{
  color:inherit !important;border:0 !important;text-decoration:none !important;
}
html:root .variant-table .delivery-time{display:inline-flex;gap:6px;align-items:baseline;color:var(--ink3)}
html:root .variant-table .delivery-time-label{
  text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600;color:var(--ink3);
}
html:root .variant-table .delivery-time .acronym{color:var(--ink);font-weight:600}

/* Cena varianty */
html:root .variant-table .variant-price-wrap{text-align:right;white-space:nowrap}
html:root .variant-table .price-final{
  font-family:var(--ff-display) !important;font-size:21px !important;
  color:var(--ink) !important;font-weight:600 !important;
}
html:root .variant-table .price-additional{font-size:12.5px;color:var(--ink3);margin-top:2px}

/* Nákup varianty: pilulka s počtem + kulaté tlačítko s ikonou košíku */
html:root .variant-cart form,
html:root .variant-cart fieldset{
  margin:0 !important;padding:0 !important;border:0 !important;
  display:flex;align-items:center;gap:10px;
}
/* Pilulka má overflow:hidden, takže její automatická minimální šířka je 0
   a sloupec `auto` v gridu ji stlačil na pár pixelů (prvky uvnitř pak
   přetekly a ořízly se). Explicitní min-width = 32 + 44 + 32 px to drží. */
html:root .variant-cart .quantity{flex:none;min-width:108px}
html:root .p-detail .quantity .amount,
html:root .p-detail .quantity .increase,
html:root .p-detail .quantity .decrease{flex:none}
html:root .variant-cart .quantity .amount{width:44px;height:38px}
html:root .variant-cart .quantity .increase,
html:root .variant-cart .quantity .decrease{width:32px;height:38px}
html:root .variant-table .add-to-cart-button,
html:root .variant-cart .btn-cart{
  flex:none !important;min-width:0 !important;width:46px;height:46px;padding:0 !important;
  border-radius:50% !important;border:0 !important;box-shadow:none !important;
  background:var(--ink) !important;color:#fff !important;
  display:inline-flex !important;align-items:center;justify-content:center;
  font-size:0 !important;cursor:pointer;transition:background-color .2s,transform .2s;
}
html:root .variant-cart .btn-cart:hover{background:var(--red) !important;transform:translateY(-2px)}
/* Vlastní ikona maskou — ikonový font Shoptetu se v blank-mode nemusí načíst */
html:root .variant-cart .btn-cart::before{
  content:'' !important;width:19px;height:19px;background-color:currentColor;font-size:0 !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Ccircle cx='18' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L20.5 7H6'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Ccircle cx='18' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L20.5 7H6'/%3E%3C/svg%3E") no-repeat center/contain;
}

@media (max-width:720px){
  html:root .variant-table .table-row{grid-template-columns:1fr auto;gap:14px;row-gap:14px}
  html:root .variant-table .variant-name-wrapper{grid-column:1 / -1}
  html:root .variant-table .variant-price-wrap{text-align:left}
  html:root .variant-table .table-col.cart{justify-self:end}
}

/* --- Obsah záložek na papírové kartě ------------------------------------ */
html:root #tab-content{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-sm);padding:34px 36px;margin-top:26px;
}
html:root #tab-content .tab-pane{max-width:none}
@media (max-width:640px){
  html:root #tab-content{padding:24px 20px;border-radius:18px}
}

/* Typografie vloženého popisu */
html:root .description-inner{color:var(--ink2);font-size:15.5px;line-height:1.75;max-width:80ch}
html:root .description-inner p{margin:0 0 14px}
html:root .description-inner strong{color:var(--ink)}
html:root .description-inner a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
html:root .description-inner h1,html:root .description-inner h2,
html:root .description-inner h3,html:root .description-inner h4{
  font-family:var(--ff-display);color:var(--ink);font-weight:600;line-height:1.15;margin:28px 0 12px;
}
html:root .description-inner > *:first-child,
html:root .basic-description > h3:first-child{margin-top:0}
html:root .description-inner h1{font-size:clamp(22px,2.4vw,28px)}
html:root .description-inner h2{font-size:22px}
html:root .description-inner h3{font-size:19px}
html:root .description-inner ul,html:root .description-inner ol{margin:0 0 14px;padding-left:22px}
html:root .description-inner li{margin-bottom:6px}
html:root .description-inner hr{border:0;border-top:1px solid var(--line2);margin:26px 0}

/* Obrázky z editoru */
html:root .description-inner img{
  max-width:100% !important;height:auto !important;border-radius:16px;margin:10px auto;
}

/* Tabulky z editoru — chodí s `float:left`, pevnými šířkami v px a černým
   rámečkem. Bez tohohle rozhodí sloupec a text jim obtéká. */
html:root .description-inner table{
  float:none !important;width:100% !important;max-width:100% !important;
  margin:18px 0 !important;border-collapse:separate;border-spacing:0;
  background:var(--bg) !important;border:1px solid var(--line) !important;
  border-radius:16px;overflow:hidden;font-size:14.5px;
}
html:root .description-inner table th,
html:root .description-inner table td{
  width:auto !important;padding:12px 16px !important;text-align:left !important;
  border:0 !important;border-bottom:1px solid var(--line2) !important;vertical-align:top;
}
html:root .description-inner table th{
  color:var(--ink3) !important;background:transparent !important;
  text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;font-weight:600;
}
html:root .description-inner table td{color:var(--ink);font-weight:500}
html:root .description-inner table tr:last-child td{border-bottom:0 !important}
html:root .description-inner .scroll-wrapper,
html:root .description-inner [class*="overflow-auto"]{
  overflow-x:auto;border:0 !important;border-radius:16px;background:transparent !important;
}

/* Doplňkové parametry, když zůstanou v záložce (nepřesunuly se nahoru) */
html:root #tab-content .extended-description{margin-top:28px;padding-top:24px;border-top:1px solid var(--line2)}

/* --- Diskuze ------------------------------------------------------------ */
html:root .discussion-wrapper h2{font-family:var(--ff-display);font-size:24px;color:var(--ink);margin:0 0 14px}
html:root .discussionContainer > p{color:var(--ink2);font-size:15px;margin-bottom:18px}
html:root .discussion-form-trigger .btn,
html:root .discussion-form-trigger button{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;border-radius:999px !important;
  padding:12px 22px !important;font-family:var(--ff-body) !important;
  font-size:13.5px !important;font-weight:600 !important;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
html:root .discussion-form-trigger .btn:hover{
  background:var(--ink) !important;color:var(--paper) !important;border-color:var(--ink) !important;
}

html:root .discussion-form{margin-top:22px}
html:root .discussion-form .form-legend{font-size:12px;color:var(--ink3);margin-bottom:14px}
html:root .discussion-form .required-asterisk::after,
html:root .required-asterisk--before::before{color:var(--red)}
html:root .discussion-form .form-group{margin:0 0 16px;max-width:560px}
html:root .discussion-form label{
  display:block;margin-bottom:6px;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);
}
html:root .discussion-form .form-control{
  width:100%;padding:13px 16px !important;font:inherit;font-size:14.5px;
  color:var(--ink);background:var(--bg) !important;
  border:1px solid var(--line) !important;border-radius:12px !important;box-shadow:none !important;
  transition:border-color .2s;
}
html:root .discussion-form textarea.form-control{border-radius:16px !important;min-height:130px;resize:vertical}
html:root .discussion-form .form-control:focus{outline:0;border-color:var(--gold-dk) !important}
html:root .discussion-form .btn-primary,
html:root .discussion-form button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink) !important;color:var(--paper) !important;border:0 !important;
  border-radius:999px !important;padding:14px 28px !important;
  font-family:var(--ff-body) !important;font-size:14.5px !important;font-weight:600 !important;
  box-shadow:var(--shadow-sm) !important;cursor:pointer;
  transition:background-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease);
}
html:root .discussion-form .btn-primary:hover,
html:root .discussion-form button[type=submit]:hover{
  background:var(--red) !important;transform:translateY(-2px);box-shadow:var(--shadow-md) !important;
}

/* ==========================================================================
   16  DRUHÁ FOTKA PŘI HOVERU (výpisy produktů)
   --------------------------------------------------------------------------
   Shoptet u produktů s víc obrázky vykresluje `<img class="swap-image"
   data-next="…">` a přepínání řeší vlastním JS, který se v blank-mode
   nespustí — druhá fotka tak ležela ladem. script.js vloží druhý <img>
   navrch (.hs-swap-img) a tady se jen prolnou.

   Proč prolnutí a ne výměna `src`: při výměně se obrázek na okamžik ztratí,
   než se nový dotáhne ze sítě, a karta blikne.

   Pozn.: pod fotkou schválně NENÍ žádný barevný podklad ani gradient.
   Produktové fotky mají bílé pozadí, takže by se jejich obdélník proti
   jakémukoli tónování ostře odrážel (viz sekce 13). Efekt proto stojí na
   pohybu a druhé fotce, ne na podkladu.
   ========================================================================== */

html:root .product .image .hs-swap-img{
  position:absolute;inset:22px;margin:auto;
  width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease),transform .6s var(--ease);
}
html:root .product .p.hs-has-swap:hover .hs-swap-img{opacity:1;transform:scale(1.06)}
/* Původní fotka se pod ní odkryje zpět — obě mají stejné načasování,
   takže přechod působí jako plynulé prolnutí, ne jako záblesk. */
html:root .product .p .image img:not(.hs-swap-img){transition:opacity .45s var(--ease),transform .5s var(--ease)}
html:root .product .p.hs-has-swap:hover .image img:not(.hs-swap-img){opacity:0}

@media (prefers-reduced-motion:reduce){
  html:root .product .image .hs-swap-img,
  html:root .product .p .image img:not(.hs-swap-img){transition:none}
  html:root .product .p.hs-has-swap:hover .hs-swap-img{transform:none}
}

/* Odkazy přesunuté z hlavního menu do patičky (script.js → buildCustomHeader) */
html:root .footer-links .hs-moved-link a{color:inherit}

/* --- Zlatý pruh přes aktivní kategorii ----------------------------------
   Apeti podbarvuje aktivní položku stromu plnou barvou šablony:
     .categories .topic.active > a      { background: var(--color-primary) }
     .categories li.active > a:hover    { background: var(--color-primary) }
   Náš panel značí aktivní kategorii červeným zaškrtávátkem a tučným textem,
   žádný podklad nechce — plný zlatý blok přes celý řádek vypadal jako chyba.
   Dřívější pravidlo rušilo jen `:hover`, takže pruh zůstával viditelný
   i bez najetí myší. */
html:root #categories .topic > a,
html:root #categories .topic.active > a,
html:root #categories .topic.child-active > a,
html:root #categories li.active > a,
html:root #categories li > a:hover,
html:root #categories .topic > a:hover{
  background:none !important;background-color:transparent !important;
}
html:root #categories .subcategories li a:hover::after,
html:root #categories li a:hover::after{background:none !important}

/* ==========================================================================
   17  DROBEČKOVÁ NAVIGACE MIMO TMAVÝ PRUH (detail produktu, obsahové stránky)
   --------------------------------------------------------------------------
   Na kategorii a v košíku stopu přebírá tmavý pruh (.hs-page-hero, dostane
   třídu .hs-kept). Na detailu produktu zůstává samostatně nad obsahem a
   Apeti jí dává rozestupy, které tam dělaly díru a stopu ztrácely:
     .breadcrumbs      margin:20px 0 0 + padding:16px 0 0   → 52 px nad textem
     .navigation-bullet padding:8px 17px                    → 34 px mezi položkami
     a                  font-weight:300, barva --ink3        → útlá a světlá
   ========================================================================== */

html:root .breadcrumbs-wrapper{padding:14px 0 0}
html:root .breadcrumbs:not(.hs-kept){
  margin:0 !important;padding:0 !important;
  font-size:14px;color:var(--ink2);
  align-items:center;flex-wrap:wrap;row-gap:2px;
}
html:root .breadcrumbs:not(.hs-kept) a{color:var(--ink2);font-weight:500}
html:root .breadcrumbs:not(.hs-kept) a:hover{color:var(--red)}
/* Aktuální stránka — poslední článek stopy, tmavě a tučně */
html:root .breadcrumbs:not(.hs-kept) > span:last-child span[itemprop=name],
html:root .breadcrumbs:not(.hs-kept) > span:last-child > span:not(.navigation-bullet){
  color:var(--ink);font-weight:600;
}
/* Oddělovač: z 34 px na 14 px a jemnější */
html:root .breadcrumbs:not(.hs-kept) .navigation-bullet{
  padding:0 7px !important;margin:0 !important;
  font-size:12px;color:var(--ink3);opacity:.55;
}
html:root .breadcrumbs:not(.hs-kept) .navigation-home-icon{color:var(--ink2)}
html:root .breadcrumbs:not(.hs-kept) .navigation-home-icon:hover{color:var(--red)}

/* Mezera od stopy k obsahu detailu (bylo 30 px) */
html:root .p-detail{padding-top:18px}

/* --- Mezera mezi stopou a produktem na detailu --------------------------
   Sečetlo se to ze tří míst:
     .content-wrapper-in  padding-top:20px   (Apeti)
     .p-detail            padding-top:18px   (naše)
     .navigation-home-icon padding:8px … 8px (Apeti — zvyšovalo celý řádek
                                              stopy z ~22 px na 30 px)
   Na kategorii/košíku necháváme 20px být — tam nad obsahem sedí tmavý pruh
   a mezera je tam potřeba; ořezáváme jen na detailu. */
html:root body.hs-page-detail .content-wrapper-in{padding-top:0}
html:root .p-detail{padding-top:14px}
html:root .breadcrumbs:not(.hs-kept) .navigation-home-icon{
  padding-top:0 !important;padding-bottom:0 !important;
  display:inline-flex;align-items:center;min-height:22px;
}

/* Odkazy ve stopě mají od Apeti `padding:8px 17px` — svisle zvyšovaly řádek
   z ~22 na 35 px, vodorovně přidávaly dalších 34 px k mezerám mezi položkami
   (nad rámec oddělovače, který jsme už stáhli). Domeček vynecháváme, jeho
   levý padding drží místo pro ikonu na pozadí. */
html:root .breadcrumbs:not(.hs-kept) a:not(.navigation-home-icon){padding:0 !important}

/* --- OPRAVA: šipky ve stopě lezly na text -------------------------------
   Apeti nekreslí oddělovač přes .navigation-bullet (ten má display:none),
   ale jako dvě otočené 2px čárky na `a::before` / `a::after`, obě
   `position:absolute; right:0` — tedy na PRAVÉM OKRAJI odkazu. Odstup od
   textu jim dělal jedině vodorovný padding odkazu (8px 17px, nad 992px
   10px 20px). Když jsem ho vynuloval, šipka si sedla na poslední písmeno.

   Správně je padding nechat, jen ho zmenšit: text …11px… šipka …11px… text.
   Mezi popisky je tak 22 px místo původních 40 a šipka zůstává uprostřed.
   Svislý padding může být 0 — šipka se pozicuje jen vodorovně. */
html:root .breadcrumbs:not(.hs-kept) > span > a:not(.navigation-home-icon),
html:root .breadcrumbs:not(.hs-kept) > span > span:not(.navigation-bullet){
  padding:0 11px !important;
}
/* Domeček: levý prostor drží ikonu na pozadí, měnit se smí jen pravý. */
html:root .breadcrumbs:not(.hs-kept) .navigation-home-icon{padding:0 11px 0 40px !important}
/* Pozor: první položka JE domeček — levý padding mu nulovat nesmíme,
   sedí v něm ikona na pozadí. */
html:root .breadcrumbs:not(.hs-kept) > span:first-child > a:not(.navigation-home-icon){padding-left:0 !important}

/* --- Šedé pásmo za záložkami -------------------------------------------
   Apeti dává `.shp-tabs-wrapper{background:#f5f5f5;border-radius:10px}`.
   Studená šedá se s krémovým pozadím stránky tluče a celý blok vypadal
   jako cizí těleso. Necháváme wrapper průhledný — lišta záložek sedí na
   pozadí stránky (aktivní má červené podtržení) a obsah pod ní nese
   papírová karta #tab-content. */
html:root .shp-tabs-wrapper,
html:root .p-detail-tabs-wrapper{
  background:transparent !important;border-radius:0 !important;box-shadow:none !important;
}
html:root .shp-tabs-row{padding:0 !important}
html:root .shp-tabs-holder{padding:0 !important;background:transparent !important}

/* --- Pás náhledů: 150 000px široká dráha --------------------------------
   Shoptet dělá z náhledů posuvný pás — `.p-thumbnails-inner` dostane
   absurdní šířku (naměřeno 149 985 px) a jeho JS s ním posouvá přes
   `left`. V blank-mode se ten JS nespustí, takže dráha jen trčí do strany
   a šipky prev/next nefungují (schováváme je).

   My žádný posuv nepotřebujeme — náhledů jsou jednotky. Vracíme dráhu na
   normální šířku a necháme je prostě zalomit do řádku. */
/* Výšku nechat dopočítat — Shoptet ji má pevně 70px kvůli jednořádkovému
   posuvu; při zalomení na druhý řádek by ho to oříznulo. */
html:root .p-detail .p-thumbnails,
html:root .p-detail .p-thumbnails-wrapper,
html:root .p-detail .p-thumbnails > div,
html:root .p-detail .p-thumbnails-inner{height:auto !important;overflow:visible}
html:root .p-detail .p-thumbnails-inner{
  position:static !important;left:auto !important;
  width:100% !important;max-width:100% !important;
}
html:root .p-detail .p-thumbnails-inner > div{
  /* row-gap 14px, ne 10px: zlatá tečka vybraného náhledu (.p-thumbnail::after,
     bottom:-9px, výška 5px) přečuhuje 4–9px pod box. Při 10px zbývala 1px
     rezerva a při zalomení na druhý řádek by tečka lezla na náhled pod sebou. */
  display:flex;flex-wrap:wrap;gap:14px 10px;width:100%;
}

/* Menší náhledy na mobilu, ať se čtyři vejdou na jeden řádek i na 360px.
   POZOR NA POŘADÍ: tenhle blok musí stát ZA základními pravidly náhledů
   (.p-thumbnail i .p-thumbnails-inner > div). @media nezvyšuje specificitu,
   o remíze rozhoduje pořadí ve zdroji — dokud tyhle dva řádky stály nahoře
   u ostatních mobilních korekcí (u .p-image-wrapper), byly úplně mrtvé. */
@media (max-width:520px){
  html:root .p-detail .p-thumbnail{width:74px;height:74px}
  html:root .p-detail .p-thumbnails-inner > div{gap:12px 8px}
}

/* ==========================================================================
   18  ZBYLÉ STRÁNKY — dokončení webu
   --------------------------------------------------------------------------
   Krok 3 objednávky, děkovací stránka, prázdné stavy, vyhledávání a
   přihlášení/registrace. Tyhle stránky dosud dostávaly jen základní styl.

   Názvy tříd NEJSOU hádané — jsou vytažené z Apeti stylesheetu (jediný
   spolehlivý zdroj skutečného markupu Shoptetu, viz _nahled/apeti-styles.
   header.min.css). Celá sekce je ZÁMĚRNĚ jen aditivní: nic neschovává ani
   nepřestavuje neznámé obaly, takže selektor, který na stránce nic nenajde,
   prostě nic neudělá. Proto je bezpečná i tam, kde jsme markup neviděli.
   ========================================================================== */

/* --- 18.1  Formuláře v objednávce (krok 3 „Informace o vás") --------------
   .co-box už je nastylovaný jako papírová karta v sekci 09; tady dolaďujeme
   jen jeho vnitřek. Rozsah je schválně .ordering-process, ať se to nepromítne
   do formulářů jinde na webu. */
html:root .ordering-process .co-box .form-group{margin-bottom:18px}
html:root .ordering-process .co-box label{
  display:block;margin-bottom:7px;
  font-family:var(--ff-body);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);
}
html:root .ordering-process .co-box .form-control{
  border-radius:10px;padding:13px 15px;font-size:15px;background:var(--paper);
}
html:root .ordering-process .co-box .form-control:focus{
  border-color:var(--gold-dk);box-shadow:0 0 0 3px rgba(201,161,74,.16);
}
/* Povinné pole — hvězdička je informace, ne výstraha; červená se šetří na
   skutečné chyby. */
html:root .ordering-process .required-asterisk::after,
html:root .ordering-process label.required::after{content:' *';color:var(--gold-dk)}
/* Chybový stav: barevný rámeček + čitelná hláška, ne jen tenká linka. */
html:root .ordering-process .form-group.has-error .form-control,
html:root .ordering-process .form-control.error{
  border-color:var(--red) !important;box-shadow:0 0 0 3px rgba(143,36,48,.12);
}
html:root .ordering-process .msg-error,html:root .ordering-process .form-group .error-message{
  display:block;margin-top:6px;font-size:12.5px;color:var(--red);font-weight:600;
}
/* Souhlasy a zaškrtávátka (obchodní podmínky, registrace) — plnohodnotný
   44px cíl pro prst, ať se na mobilu netrefuje do 14px čtverečku. */
html:root .ordering-process input[type=checkbox]+label,
html:root .ordering-process .co-registration label{
  display:flex;align-items:flex-start;gap:10px;min-height:44px;
  text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:400;
  color:var(--ink2);line-height:1.5;padding-top:2px;
}
html:root .ordering-process .co-box.co-registration{padding-top:22px !important}

/* --- 18.2  Děkovací stránka po objednávce --------------------------------
   Poslední obrazovka nákupu a jediné místo, kde zákazník čeká na potvrzení,
   že vše dopadlo. Apeti jí dává jen `max-width:1000px;margin:auto` — dostane
   proto vlastní klidný, sebevědomý závěr místo holého textu. */
html:root .recapitulation-wrapper{padding:8px 0 8px}
html:root .recapitulation-wrapper h1,
html:root .recapitulation-wrapper h2{
  font-family:var(--ff-display);font-size:clamp(26px,3vw,38px);
  color:var(--ink);text-transform:none !important;font-weight:400;line-height:1.15;
}
/* Zlatá pečeť nad poděkováním — stejný motiv jako u souhrnu v košíku, jen
   jednou a ve větším. */
html:root .recapitulation-wrapper h1::before,
html:root .recapitulation-wrapper h2:first-of-type::before{
  content:'';display:block;width:46px;height:46px;margin:0 auto 20px;
  /* TMAVÁ varianta: tady je pozadí krémové, bílá pečeť by byla neviditelná. */
  background:var(--hs-seal-dark-url) center/contain no-repeat;opacity:.75;
}
html:root .recapitulation-wrapper .summary-thx{
  font-size:15.5px;line-height:1.7;color:var(--ink2);max-width:56ch;margin:14px auto 0;
}
html:root .recapitulation-wrapper .order-summary-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-cart);
  padding:18px 22px;margin-top:14px;
}
/* Číslo objednávky patří mezi to, co si zákazník opisuje — dáme mu váhu. */
html:root .recapitulation-wrapper strong,
html:root .confirmation strong{font-family:var(--ff-display);font-size:18px;color:var(--ink)}

/* --- 18.3  Prázdné stavy (košík, kategorie, 404, výsledky hledání) -------
   Apeti sem dává jen ikonu přes ::after. Prázdná stránka je slepá ulička —
   dostane vzdušnou papírovou kartu a zřetelnou cestu ven. */
html:root .empty-content,
html:root .empty-content-404,
html:root .empty-content-category,
html:root #content .cart-empty{
  text-align:center;padding:clamp(48px,7vw,86px) 24px;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-sm);margin:8px 0;
}
html:root .empty-content h2,
html:root .empty-content-404 h2,
html:root .empty-content-category h2,
html:root #content .cart-empty h2{
  font-family:var(--ff-display);font-size:clamp(22px,2.6vw,30px);color:var(--ink);
  margin:0 0 12px;font-weight:400;
}
/* Apeti věší na nadpis ikonu přes ::after, takže se lepí na konec věty
   („…zatím nic není✂"). Přesouváme ji nad nadpis jako samostatný blok. */
html:root .empty-content h2::after,
html:root .empty-content-404 h2::after,
html:root .empty-content-category h2::after{
  display:block;font-size:40px;line-height:1;color:var(--gold-dk);
  margin:0 0 16px;order:-1;
}
html:root .empty-content h2,
html:root .empty-content-404 h2,
html:root .empty-content-category h2{display:flex;flex-direction:column;align-items:center}
html:root .empty-content p,
html:root .empty-content-404 p,
html:root .empty-content-category p,
html:root #content .cart-empty p{color:var(--ink2);font-size:15px;max-width:48ch;margin:0 auto 22px}
html:root .empty-content .btn,
html:root .empty-content-404 .btn,
html:root .empty-content-category .btn,
html:root #content .cart-empty .btn{margin-top:4px}

/* --- 18.4  Výsledky vyhledávání ------------------------------------------
   Apeti láme seznam do tří sloupců (columns:240px 3) a nechává odrážky —
   necháváme sloupce, jen z odkazů děláme čitelné řádky. */
html:root .search-results-groups h4{
  font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 12px;
}
html:root .search-results-groups ul{padding-left:0 !important;list-style:none}
html:root .search-results-groups li{margin:0;break-inside:avoid}
html:root .search-results-groups li a{
  display:block;padding:9px 12px;border-radius:10px;color:var(--ink2);font-size:14px;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
html:root .search-results-groups li a:hover{background:var(--bg);color:var(--ink)}
html:root .search-results-group{margin-bottom:26px}

/* --- 18.5  Přihlášení, registrace, zapomenuté heslo ----------------------
   Rozsah #content je nutný: stejné třídy (.login-form) nese i vysunovací
   přihlášení v hlavičce, které má vlastní tmavý vzhled — bez omezení by se
   mu tenhle světlý kartový styl vnutil. */
html:root #content .login-form,
html:root #content .registration-form,
html:root #content .forgotten-password-form{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm);
  max-width:520px;margin-inline:auto;
}
html:root #content .login-form .form-group,
html:root #content .registration-form .form-group{margin-bottom:16px}
html:root #content .login-form label,
html:root #content .registration-form label,
html:root #content .forgotten-password-form label{
  display:block;margin-bottom:7px;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);
}
html:root #content .login-form .btn,
html:root #content .registration-form .btn{width:100%;justify-content:center;margin-top:6px}
html:root #content .login-form .alternative-links{
  /* flex-direction je nutné: Apeti nastavuje column, my chceme jeden řádek. */
  display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 18px;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--line2);font-size:13.5px;
}
html:root #content .login-form .alternative-links a{color:var(--ink2)}
html:root #content .login-form .alternative-links a:hover{color:var(--red)}

/* ==========================================================================
   20  OBSAHOVÉ STRÁNKY (Kontakty a spol.)
   --------------------------------------------------------------------------
   Shoptet vykresluje i na obsahových stránkách postranní sloupec s filtry
   a kategoriemi. Na stránce Kontakty tak vedle textu stál blok „Filtry /
   Zrušit filtry / KATEGORIE…", který nemá co filtrovat a jen ukrajoval
   šířku. Třídu .hs-no-products dává <body> initStrayFilters() (script.js)
   POUZE když na stránce není žádný výpis produktů — na kategoriích tedy
   filtry zůstávají nedotčené.
   ========================================================================== */
/* Skutečný markup /kontakty/ (ověřeno): žádný #filters neexistuje, je tu
   <aside class="sidebar sidebar-left"> se seznamem kategorií. Ten na
   kontaktní stránce jen ukrajuje šířku — obsah je tam to podstatné. */
html:root body.hs-no-products .sidebar,
html:root body.hs-no-products #filters,
html:root body.hs-no-products #filters-wrapper,
html:root body.hs-no-products .filters-wrapper,
html:root body.hs-no-products .hsh-filters-head{display:none !important}
/* Apeti drží sloupce přes .content-wrapper-in; po schování postranního
   panelu musí obsah dostat celou šířku, jinak zůstane v úzkém sloupci. */
html:root body.hs-no-products .content-wrapper-in{display:block !important}
html:root body.hs-no-products #content,
html:root body.hs-no-products #content.narrow{
  width:100% !important;max-width:none !important;float:none !important;
  margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;
}

/* --- Obsah v papírové kartě ---------------------------------------------
   Holý text na krémovém pozadí působil jako nedodělaná stránka. Obsah
   dostane stejnou kartu jako zbytek webu. Cílíme na .content-inner, což je
   obal, který Shoptet používá na obsahových stránkách; na kategorii/detailu
   /košíku ho vyřazujeme, tam má obsah vlastní kompozici. */
html:root body.hs-no-products:not(.hs-page-cart):not(.hs-page-detail):not(.hs-page-category) #content .content-inner{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-sm);padding:clamp(26px,4vw,54px);
  max-width:900px;margin-inline:auto;
}
html:root body.hs-no-products #content .content-inner h2,
html:root body.hs-no-products #content .content-inner h3{
  font-family:var(--ff-display);color:var(--ink);font-weight:400;
  font-size:clamp(19px,2.2vw,25px);margin:30px 0 12px;
}
html:root body.hs-no-products #content .content-inner h2:first-child,
html:root body.hs-no-products #content .content-inner h3:first-child{margin-top:0}
html:root body.hs-no-products #content .content-inner p{
  color:var(--ink2);font-size:15.5px;line-height:1.75;margin:0 0 14px;
}
/* Telefon a e-mail jsou na Kontaktech to hlavní — ať jdou snadno kliknout
   a nesplývají s běžným textem. */
html:root body.hs-no-products #content .content-inner a[href^="tel:"],
html:root body.hs-no-products #content .content-inner a[href^="mailto:"]{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-display);font-size:19px;color:var(--ink);
  border-bottom:1px solid var(--gold-dk);padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
html:root body.hs-no-products #content .content-inner a[href^="tel:"]:hover,
html:root body.hs-no-products #content .content-inner a[href^="mailto:"]:hover{
  color:var(--red);border-color:var(--red);
}
/* ZÁMĚRNĚ BEZ „plakety" na <strong>. Zkoušel jsem zvýraznit upozornění
   selektorem `p > strong:only-child` — na skutečném obsahu Kontaktů to
   trefilo přesně naopak: plaketu dostal nadpis „Provozovatel eshopu:" a
   e-mailový odkaz, zatímco varování o reklamacích ne (má <strong> zabalený
   ve <span>). Obsah je psaný ve WYSIWYG editoru, takže z tvaru markupu se
   význam odvodit nedá — a nepřesné zvýraznění je horší než žádné. */
html:root body.hs-no-products #content .content-inner hr{
  border:0;border-top:1px solid var(--line2);margin:28px 0;
}

/* ==========================================================================
   21  MINI-KOŠÍK — vlastní vysunovací panel
   --------------------------------------------------------------------------
   Nahrazuje dřívější dvě místa (sekce 04 a 19), kde byl widget jenom
   „přebarvený Apeti": karta, seznam položek, tlačítko. Panel má teď vlastní
   tři patra — tmavou hlavičku s počtem kusů, papírový seznam a světlou patu
   se součtem, tlačítkem a zárukami — a hlavně vlastní geometrii a otevírání.

   Co se přebíjí a proč (výchozí Apeti, ověřeno ve styles.header.min.css):

     .popup-widget{position:fixed;z-index:56}
       Naše lepivá hlavička (#header) běží na z-index:60, widget by se pod ni
       schoval. Kotvíme si ho navíc sami — viz --hs-cw-top/--hs-cw-right.

     ≥992: .popup-widget{left:50%;margin-left:56px;width:430px;max-height:520px}
       Panel visel 56 px vpravo od STŘEDU obrazovky, tedy na 1440px displeji
       ~160 px vlevo od ikony košíku, ze které vyjíždí. Souřadnice počítá
       initCartWidget() z ikony (script.js), tady je jen dosazujeme.

     ≥992: .popup-widget-inner .cart-widget-products{max-height:360px}
       Výšku řídí celý panel (flex sloupec: hlavička + seznam + pata),
       ne napevno jenom seznam — jinak se pata odřízne mimo kartu.

     ≤991: .popup-widget{bottom:0;left:0;width:100%}
     ≤767: .popup-widget.cart-widget{height:calc(100vh - 104px);top:104px}
           + body.scrolled varianta s jinou výškou a padding-bottom:120px
       Tři různé stavy „skoro celá stránka", každý s vlastní magickou
       konstantou podle výšky hlavičky. Nahrazujeme jednou zásuvkou od
       pravého okraje na plnou výšku — nezávislou na tom, co dělá hlavička.

     .user-action .user-action-in>div{display:none}
       display necháváme být a zavřený stav držíme na visibility/opacity —
       z display:none se nedá animovat, panel by naskakoval.

   Uzly se nepřesouvají (obsah widgetu překresluje Shoptet přes AJAX po každé
   změně košíku) s JEDNOU výjimkou: cenu položky přendává initCartWidget()
   o úroveň výš, aby mohla být vlastní buňkou mřížky. Kdyby JS nedoběhl,
   funguje i záložní podoba ceny pod názvem (viz .cart-widget-product-name>span).
   ========================================================================== */

/* --- Geometrie a otevření ------------------------------------------------ */
html:root #cart-widget{
  display:flex !important;flex-direction:column;
  position:fixed;z-index:91;
  top:var(--hs-cw-top,96px);right:var(--hs-cw-right,24px);left:auto;bottom:auto;
  width:412px;max-width:calc(100vw - 32px);
  /* Ne „76vh": panel začíná až pod hlavičkou, takže procento z celé výšky
     okna přeteče spodní okraj na každém nižším displeji (u 150px odsazení
     shora už pod 625 px výšky okna). Počítáme zbytek pod hlavičkou. */
  max-height:min(660px,calc(100vh - var(--hs-cw-top,96px) - 20px));
  margin:0 !important;padding:0 !important;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);overflow:hidden;
  transform:translateY(-10px) scale(.985);transform-origin:100% 0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),transform .34s var(--ease),visibility 0s linear .34s;
}
html:root body.cart-window-visible #cart-widget{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .26s var(--ease),transform .34s var(--ease),visibility 0s;
}
/* Zlatý vlas přes horní hranu — stejné gesto jako u tmavé desky v košíku.
   ::after, ne ::before: ::before drží Apeti pro špičku „bublinky" a sekce 04
   ho vypíná. */
html:root #cart-widget::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent);
  opacity:.9;
}

/* --- Hlavička panelu ----------------------------------------------------- */
html:root .hs-cw-head{
  position:relative;flex:none;display:flex;align-items:center;gap:13px;
  padding:16px;background:var(--slab);color:var(--paper);
  box-shadow:var(--bevel);
}
html:root .hs-cw-head::before{
  content:'';position:absolute;inset:0;background:var(--slab-heat);pointer-events:none;
}
/* Vyražená pečeť jako vodoznak — cestu dosazuje boot() do --hs-seal-url.
   Krytí .18 (ne .06 jako na desce v košíku): pečeť je bílá kresba na tmavém
   gradientu a v tak malém pruhu se při nižší hodnotě prostě ztratila —
   nebylo poznat, že tam vůbec něco je. */
html:root .hs-cw-head::after{
  content:'';position:absolute;right:78px;top:50%;transform:translateY(-50%);
  width:82px;height:82px;opacity:.18;pointer-events:none;
  background:var(--hs-seal-url) center/contain no-repeat;
}
html:root .hs-cw-mark{
  position:relative;flex:none;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(201,161,74,.5);color:var(--gold);
  font-family:var(--ff-display);font-size:19px;line-height:1;
}
html:root .hs-cw-head-txt{position:relative;display:block;min-width:0;flex:1 1 auto}
html:root .hs-cw-eyebrow{
  display:block;font-family:var(--ff-body);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
html:root .hs-cw-count{
  display:block;margin-top:3px;font-family:var(--ff-display);font-size:19px;
  font-weight:400;color:var(--paper);
}
html:root .hs-cw-close{
  position:relative;flex:none;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,253,249,.07);border:1px solid var(--line-dark);
  color:var(--paper);cursor:pointer;padding:0;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
html:root .hs-cw-close:hover{background:rgba(255,253,249,.16);border-color:rgba(201,161,74,.55)}
html:root .hs-cw-close svg{width:17px;height:17px}

/* --- Seznam položek ------------------------------------------------------ */
/* Vnitřek od Shoptetu je jen obal — veškerý vzhled nese panel a řádky. */
html:root #cart-widget .popup-widget-inner{
  position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  width:auto !important;height:auto !important;padding:0 !important;margin:0;
  background:transparent;border:0;box-shadow:none;
}
/* Měkký přechod na spodní hraně seznamu — ať je poznat, že se dá rolovat,
   a ať poslední řádek nekončí useknutý o patu. */
html:root #cart-widget .popup-widget-inner::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none;
  background:linear-gradient(rgba(255,253,249,0),var(--paper));
}
html:root #cart-widget .cart-widget-products{
  flex:1 1 auto;min-height:0;max-height:none !important;height:auto !important;
  overflow:auto;overscroll-behavior:contain;
  padding:4px 0 !important;margin:0 !important;
  scrollbar-width:thin;scrollbar-color:rgba(20,19,17,.22) transparent;
}
html:root #cart-widget .cart-widget-products::-webkit-scrollbar{width:8px}
html:root #cart-widget .cart-widget-products::-webkit-scrollbar-thumb{
  background:rgba(20,19,17,.18);border-radius:99px;border:2px solid var(--paper);
}
html:root #cart-widget .cart-widget-products::-webkit-scrollbar-track{background:transparent}

/* Mřížka řádku. Pořadí <div> v DOM je obrázek → množství → „ks" → název+cena
   → smazat, proto se všechno umisťuje explicitně:
       obrázek | název + varianta        | smazat
               | množství                | cena                                */
html:root #cart-widget .cart-widget-product{
  position:relative;display:grid !important;
  grid-template-columns:64px minmax(0,1fr) auto;
  column-gap:14px;row-gap:9px;align-items:center;
  width:auto;table-layout:auto;
  padding:14px 16px !important;margin:0;border:0 !important;background:transparent;
  transition:background .25s var(--ease);
}
html:root #cart-widget .cart-widget-product>div{display:block !important;padding:0 !important;vertical-align:top}
/* Dělítko jako ::before, ne border-bottom: podbarvení řádku při hoveru jde
   přes celou šířku a border by se v něm kreslil jako přerušená čára. */
html:root #cart-widget .cart-widget-product+.cart-widget-product::before{
  content:'';position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--line2);
}
html:root #cart-widget .cart-widget-product:hover{
  background:linear-gradient(90deg,rgba(201,161,74,.10),rgba(201,161,74,0) 65%);
}

html:root #cart-widget .cart-widget-product-image{
  grid-column:1;grid-row:1/3;box-sizing:border-box;
  width:64px !important;height:64px !important;
  border-radius:14px;overflow:hidden;background:linear-gradient(158deg,var(--paper-dk),var(--paper));
  box-shadow:inset 0 0 0 1px var(--line2);
}
html:root #cart-widget .cart-widget-product-image a{
  display:flex !important;align-items:center;justify-content:center;width:100%;height:100% !important;
}
html:root #cart-widget .cart-widget-product-image img{
  box-sizing:border-box;width:100%;height:100%;max-height:100%;object-fit:contain;padding:5px;
  transition:transform .4s var(--ease);
}
html:root #cart-widget .cart-widget-product:hover .cart-widget-product-image img{transform:scale(1.06)}

html:root #cart-widget .cart-widget-product-name{grid-column:2;grid-row:1;min-width:0}
/* ŽÁDNÝ -webkit-line-clamp na odkazu! Varianta (.cart-widget-product-variant)
   je ve skutečném markupu UVNITŘ téhož <a> — clamp na dva řádky ji celou
   uřízl a zákazník neviděl, kterou variantu má v košíku. */
html:root #cart-widget .cart-widget-product-name strong{display:block;font-weight:400}
html:root #cart-widget .cart-widget-product-name a{
  display:block;font-family:var(--ff-display);font-size:14.5px;line-height:1.32;
  color:var(--ink);transition:color .2s var(--ease);
}
html:root #cart-widget .cart-widget-product-name a:hover{color:var(--red)}
html:root #cart-widget .cart-widget-product-variant,
html:root #cart-widget .cart-widget-product-surcharges{
  display:block;margin-top:6px;
  font-family:var(--ff-body);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2);
}
/* Zlatá tečka místo dvojtečkového odsazení — varianta se tak nesplete
   s pokračováním názvu. */
html:root #cart-widget .cart-widget-product-variant::before{
  content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--gold-dk);margin-right:7px;vertical-align:middle;position:relative;top:-1px;
}
/* Cena: samostatná buňka mřížky (přendává ji initCartWidget). */
html:root #cart-widget .hs-cw-price{
  grid-column:3;grid-row:2;justify-self:end;align-self:center;
  font-family:var(--ff-display);font-size:16.5px;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* Záložní podoba, kdyby JS nedoběhl a cena zůstala uvnitř názvu. */
html:root #cart-widget .cart-widget-product-name>span{
  display:block;margin-top:7px;font-family:var(--ff-display);font-size:16.5px;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* Množství. Skutečná struktura: .amount je uvnitř <label>, +/- jsou dvě
   <button> a v DOM je increase PŘED decrease — bez order by „+" bylo první
   zleva. Prázdné .increase-tooltip/.decrease-tooltip (jen pro JS validaci)
   by jinak zabíraly místo jako duchové v pilulce. */
html:root #cart-widget .cart-widget-product-amount{grid-column:2;grid-row:2;justify-self:start}
html:root #cart-widget .cart-widget-product-amount .quantity-form{display:flex;flex-shrink:0}
html:root #cart-widget .cart-widget-product-amount .increase-tooltip,
html:root #cart-widget .cart-widget-product-amount .decrease-tooltip{display:none !important}
/* flex-shrink:0 na .quantity i na jejích dětech — .quantity je sama flex-item
   a bez zákazu zmenšení by se v úzkém řádku smrskla pod přirozenou šířku
   obsahu a „+" by přesahovalo mimo pilulku, uříznuté přes overflow:hidden. */
html:root #cart-widget .cart-widget-product-amount .quantity{
  display:inline-flex;flex-shrink:0;align-items:center;height:32px;
  border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
html:root #cart-widget .cart-widget-product:hover .cart-widget-product-amount .quantity{border-color:rgba(20,19,17,.22)}
html:root #cart-widget .cart-widget-product-amount .quantity:focus-within{
  border-color:var(--gold-dk);box-shadow:0 0 0 3px rgba(201,161,74,.16);
}
html:root #cart-widget .cart-widget-product-amount .quantity label{order:2;margin:0;flex:none}
html:root #cart-widget .cart-widget-product-amount .quantity input,
html:root #cart-widget .cart-widget-product-amount .quantity .amount{
  width:34px;height:30px;flex:none;border:0;background:transparent;text-align:center;
  font-family:var(--ff-body);font-weight:700;font-size:13px;color:var(--ink);
  padding:0;box-shadow:none;border-radius:0;
}
html:root #cart-widget .cart-widget-product-amount .quantity input:focus{box-shadow:none;outline:0}
html:root #cart-widget .cart-widget-product-amount .quantity .decrease{order:1}
html:root #cart-widget .cart-widget-product-amount .quantity .increase{order:3}
/* position:static — Apeti dává +/- position:absolute (vlastní svisle
   skládaný stepper, dvě šipky nad sebou), bez resetu se nezapočítávají do
   šířky a celá pilulka se smrskne na šířku inputu. */
html:root #cart-widget .cart-widget-product-amount .quantity .increase,
html:root #cart-widget .cart-widget-product-amount .quantity .decrease{
  position:static;flex:none;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--ink2);cursor:pointer;
  font-family:var(--ff-body);font-size:14px;line-height:1;padding:0;
  transition:background .2s var(--ease),color .2s var(--ease);
}
html:root #cart-widget .cart-widget-product-amount .quantity .increase::before,
html:root #cart-widget .cart-widget-product-amount .quantity .decrease::before{content:none}
html:root #cart-widget .cart-widget-product-amount .quantity .increase:hover,
html:root #cart-widget .cart-widget-product-amount .quantity .decrease:hover{background:var(--ink);color:var(--paper)}
/* Jednotka („ks") je v mřížce navíc — počet je vidět v pilulce. Selektor
   musí jít přes rodiče (>): pravidlo o kus výš dává všem přímým <div>
   řádku display:block !important a při shodné váze !important by vyhrálo
   ono (má o jeden typový selektor navíc) — „ks" pak viselo pod obrázkem
   jako prázdný třetí řádek. */
html:root #cart-widget .cart-widget-product>.cart-widget-product-unit{display:none !important}

/* Mazání je trvale viditelné, jen tiché: schovat destruktivní akci do hoveru
   znamená, že se k ní na dotyku nikdo nedostane. Skutečné tlačítko nese jen
   sr-only text pro čtečky, viditelnou ikonu dřív dodával Apeti z vlastního
   ikonového písma (.remove-item:before) — kreslíme si vlastní SVG masku,
   ať nezávisíme na tom, jestli se to písmo načte. */
html:root #cart-widget .cart-widget-product-delete{grid-column:3;grid-row:1;justify-self:end;align-self:start}
html:root #cart-widget .cart-widget-product-delete form,
html:root #cart-widget .cart-widget-product-delete .inline{display:block}
html:root #cart-widget .cart-widget-product-delete button{
  position:relative;width:28px;height:28px;border-radius:50%;
  visibility:visible !important;opacity:1;
  background:transparent;border:1px solid transparent;padding:0;cursor:pointer;
  color:var(--ink3);font-size:0;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
html:root #cart-widget .cart-widget-product-delete button::before{content:none !important}
html:root #cart-widget .cart-widget-product-delete button::after{
  content:'';position:absolute;inset:6px;background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
html:root #cart-widget .cart-widget-product-delete button:hover{
  background:var(--red-soft);border-color:rgba(143,36,48,.22);color:var(--red);
}

/* Vstupní animace řádků. Nepoužívá .hs-rv (IntersectionObserver) — panel je
   v DOM pořád, takže by se řádky „odhalily" už zavřené a při otevření by se
   nic nedělo. Klíčem je tady třída na <body>, kterou přidává Shoptet. */
@keyframes hsCwRow{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
html:root body.cart-window-visible #cart-widget .cart-widget-product{
  animation:hsCwRow .45s var(--ease) both;
  animation-delay:calc(.09s + var(--i,0)*.05s);
}

/* --- Pata: součet, tlačítko, záruky -------------------------------------- */
html:root .hs-cw-sum{
  flex:none;position:relative;z-index:1;
  padding:14px 16px 0;background:var(--paper);border-top:1px solid var(--line);
}
/* Souhrn NEDOPOČÍTÁVÁME — jen zrcadlíme částku, kterou Shoptet sám vypisuje
   u ikony košíku v hlavičce (.hsh-cart-slot .cart-price). Vlastní součet by
   se dřív nebo později rozešel se skutečnou cenou v košíku (příplatky,
   slevové kupóny, dárky zdarma). Vkládá initCartWidget() (script.js). */
html:root .hs-cart-widget-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:0;margin:0;border:0;
}
html:root .hs-cart-widget-total span{
  font-family:var(--ff-body);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);
}
html:root .hs-cart-widget-total strong{
  font-family:var(--ff-display);font-size:23px;font-weight:400;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
html:root .hs-cw-note{
  margin:5px 0 0;font-family:var(--ff-body);font-size:11.5px;color:var(--ink3);
}
/* Pruh „do dopravy zdarma zbývá" (stejná data i třídy jako v košíku, viz
   initFreeShippingBar) — v panelu jen sedí nad součtem místo pod ním. */
html:root .hs-cw-sum .hs-ship-goal{margin:0 0 12px}

/* position:static !important — Apeti pinuje .cart-widget-button na
   position:fixed;bottom:0 (mobilní vzor „lišta napevno dole"), konkrétně přes
   „.cart-widget .popup-widget-inner.full+.cart-widget-button" — bez !important
   tlačítko vypadlo z karty a viselo na spodním okraji okna. */
html:root #cart-widget .cart-widget-button{
  position:static !important;flex:none;z-index:1;
  padding:12px 16px 0 !important;margin:0;background:var(--paper);border:0;text-align:left;
}
/* Viditelnost tlačítka řídíme podle vlastní třídy, ne podle Apeti. To ho
   ukazuje/schovává sourozeneckým selektorem „.popup-widget-inner.full +
   .cart-widget-button" — a mezi ně jsme vložili souhrn, takže sousedy nejsou.
   Bez těchhle dvou řádků by tlačítko u prázdného košíku zůstalo viset pod
   hláškou „Košík je zatím prázdný" a vedlo do prázdného košíku.
   Pozor: obě třídy dává až initCartWidget(), takže když JS nedoběhne,
   nezmění se nic a platí původní chování Apeti. */
html:root #cart-widget.hs-cw-full .cart-widget-button{display:block !important}
html:root #cart-widget.hs-cw-empty .cart-widget-button{display:none !important}
html:root #cart-widget .cart-widget-button .btn{
  display:flex !important;align-items:center;justify-content:center;gap:10px;
  width:100% !important;max-width:none;margin:0 !important;padding:15px 20px !important;
  border:0;border-radius:999px;background:var(--dark) !important;color:var(--paper) !important;
  font-family:var(--ff-body);font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
html:root #cart-widget .cart-widget-button .btn:hover{background:var(--red) !important;transform:translateY(-1px)}
html:root #cart-widget .cart-widget-button .btn:active{transform:none}
/* Apeti sem dává šipku z ikonového písma (content:"\e910") — nahrazujeme
   vlastní maskou, ať sedí do stejného jazyka jako ostatní ikony skinu. */
html:root #cart-widget .cart-widget-button .btn::after{
  content:'' !important;flex:none;width:16px;height:16px;margin:0 !important;
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  transition:transform .25s var(--ease);
}
html:root #cart-widget .cart-widget-button .btn:hover::after{transform:translateX(3px)}

html:root .hs-cw-extra{
  flex:none;position:relative;z-index:1;background:var(--paper);padding:10px 16px 14px;
}
html:root .hs-cw-continue{
  display:block;width:100%;padding:10px 0;background:none;border:0;cursor:pointer;
  font-family:var(--ff-body);font-size:13px;font-weight:500;color:var(--ink2);
  transition:color .2s var(--ease);
}
html:root .hs-cw-continue:hover{color:var(--red)}
/* Tři záruky se do šířky panelu vejdou na jeden řádek jen těsně, proto
   nowrap na položkách (ať se nelámou uprostřed sousloví) a wrap na obalu —
   v užší zásuvce se přeskládají pod sebe místo aby přetekly. */
html:root .hs-cw-trust{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 14px;
  margin-top:6px;padding-top:12px;border-top:1px solid var(--line2);
}
html:root .hs-cw-trust span{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:var(--ff-body);font-size:9px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3);
}
html:root .hs-cw-trust svg{flex:none;width:14px;height:14px;color:var(--gold-dk)}

/* --- Přepočet (AJAX) ----------------------------------------------------- */
/* Apeti kreslí do widgetu při přepočtu vlastní kroužek (.loader-wrapper:before)
   a ztmavení (:after). Kroužek vypíná už sekce 04 (.popup-widget:before) a
   ztmavení bychom stejně přebili zlatým vlasem na ::after — takže by změna
   množství neměla ŽÁDNOU zpětnou vazbu. Dáváme panelu vlastní: seznam
   zesvětlí a nedá do sebe klikat, zlatý vlas nahoře pulzuje. Třídu
   .ajax-pending přidává Shoptet (na <body>, některé stavy na sám widget). */
html:root body.ajax-pending #cart-widget .cart-widget-products,
html:root #cart-widget.ajax-pending .cart-widget-products{
  opacity:.45;pointer-events:none;transition:opacity .2s var(--ease);
}
@keyframes hsCwPulse{0%,100%{opacity:.25}50%{opacity:1}}
html:root body.ajax-pending #cart-widget::after,
html:root #cart-widget.ajax-pending::after{animation:hsCwPulse 1s ease-in-out infinite}

/* --- Prázdný košík ------------------------------------------------------- */
/* Shoptet pro prázdný widget nevykresluje nic — zůstane v něm jen věčně
   běžící .loader-overlay (Apeti ji má na display:block natvrdo). Schováváme
   ji jen tehdy, když se zrovna nečeká na AJAX; při přepočtu má loader smysl. */
html:root body:not(.ajax-pending) #cart-widget.hs-cw-empty .loader-overlay{display:none !important}
html:root #cart-widget.hs-cw-empty .popup-widget-inner::after{content:none}
html:root .hs-cw-empty-box{padding:38px 26px 34px;text-align:center}
/* Tentýž vozík jako u ikony košíku v hlavičce (.hsh-cart-slot .cart-count) —
   ať je hned poznat, o čí prázdno jde. Linková ikona nože/čepele se v tomhle
   kolečku četla jako „∞". */
html:root .hs-cw-empty-icon{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:linear-gradient(158deg,var(--paper-dk),var(--paper));
  color:var(--gold-dk);
}
html:root .hs-cw-empty-icon::before{
  content:'';width:24px;height:24px;background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Ccircle cx='18' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L20.5 7H6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Ccircle cx='18' cy='21' r='1.4' fill='black' stroke='none'/%3E%3Cpath d='M2.5 3h2l2.2 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L20.5 7H6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
html:root .hs-cw-empty-box h3{
  margin:0 0 6px;font-family:var(--ff-display);font-size:19px;font-weight:400;color:var(--ink);
}
html:root .hs-cw-empty-box p{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--ink3)}
html:root .hs-cw-empty-box .hs-btn{display:inline-flex}

/* --- Zásuvka na mobilu --------------------------------------------------- */
html:root .hs-cw-back{
  display:none;position:fixed;inset:0;z-index:90;
  background:rgba(14,13,12,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
@media (max-width:991px){
  html:root #cart-widget{
    top:0 !important;right:0 !important;bottom:0 !important;left:auto !important;
    width:min(420px,100%);max-width:100%;height:100vh;height:100dvh;max-height:none;
    border-radius:0;border-width:0 0 0 1px;
    transform:translateX(102%) scale(1);transform-origin:100% 50%;
    transition:opacity .001s,transform .38s var(--ease),visibility 0s linear .38s;
  }
  html:root #cart-widget,html:root body.cart-window-visible #cart-widget{opacity:1}
  html:root body.cart-window-visible #cart-widget{
    transform:none;transition:transform .38s var(--ease),visibility 0s;
  }
  html:root #cart-widget::after{border-radius:0}
  html:root .hs-cw-back{display:block}
  html:root body.cart-window-visible .hs-cw-back{
    opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s;
  }
  html:root .hs-cw-head{padding:16px}
  html:root #cart-widget .cart-widget-product{padding:15px 16px !important}
}
/* Pod 380 px se cena a pilulka množství do jednoho řádku nevejdou. */
@media (max-width:380px){
  html:root #cart-widget .cart-widget-product{grid-template-columns:56px minmax(0,1fr) auto;column-gap:12px}
  html:root #cart-widget .cart-widget-product-image{width:56px !important;height:56px !important}
  html:root #cart-widget .hs-cw-price{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  html:root #cart-widget{transition:opacity .001s,visibility 0s;transform:none !important}
  html:root body.cart-window-visible #cart-widget{transform:none !important}
  html:root body.cart-window-visible #cart-widget .cart-widget-product{animation:none}
  html:root body.ajax-pending #cart-widget::after,
  html:root #cart-widget.ajax-pending::after{animation:none}
  html:root #cart-widget .cart-widget-product-image img,
  html:root #cart-widget .cart-widget-button .btn,
  html:root #cart-widget .cart-widget-button .btn::after{transition:none}
}

/* ==========================================================================
   22  OKNO „PŘIDÁNO DO KOŠÍKU"
   --------------------------------------------------------------------------
   Shoptet po vložení do košíku otevře jQuery colorbox s obsahem
   .advanced-order (nadpis, název produktu s variantou, .extras-wrap, dvě
   tlačítka). Colorbox si přitom sám měří obsah a výsledek zapisuje INLINE
   na #colorbox, #cboxWrapper, #cboxContent i #cboxLoadedContent — proto je
   tady u rozměrů a pozice všude !important (autorské !important přebíjí
   běžný inline zápis; kdyby ne, okno by zůstalo v napevno spočítaném
   rámečku 600×372 px a nešlo by udělat responzivní).

   Třídu .hs-ao přidává JS (initAddedModalWatch) POUZE tomuhle jednomu oknu.
   V témže colorboxu totiž Shoptet otevírá i galerii fotek, cookie lištu,
   výdejní místa nebo expresní objednávku — ty musí zůstat nedotčené.
   Krytí #cboxOverlay schválně nepřebíjíme: colorbox na něm jede vlastní
   prolnutí (0 → .9), takže místo něj jen ztmavujeme barvu pozadí.
   ========================================================================== */
html:root #cboxOverlay.hs-ao{
  background:rgba(12,11,10,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
html:root #colorbox.hs-ao{
  position:fixed !important;top:50% !important;left:50% !important;
  right:auto !important;bottom:auto !important;
  transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 28px)) !important;height:auto !important;
  max-height:calc(100vh - 32px);overflow:visible !important;
}
/* position:static je KLÍČOVÉ. Apeti má „#cboxOverlay,#cboxWrapper,#colorbox
   {position:absolute}", takže obal vypadne z toku a #colorbox mu dopočítá
   výšku 0. Procenta v translate() se ale počítají z vlastní velikosti prvku,
   takže translateY(-50%) z nulové výšky posunul o 0 px — okno pak začínalo
   přesně v polovině obrazovky a spodkem přetékalo ven (na mobilu bylo
   „Nákupní košík" pod okrajem). Stejný trik používá i sám Apeti u expresní
   objednávky. */
html:root #colorbox.hs-ao #cboxWrapper{
  position:static !important;
  width:100% !important;height:auto !important;max-width:none;overflow:visible !important;
}
/* 9-dílný rámeček colorboxu (rohy a strany) — vlastní kartu si kreslíme
   sami na #cboxContent, tyhle prázdné dílky by jen přidávaly pixely navíc. */
html:root #colorbox.hs-ao #cboxTopLeft,html:root #colorbox.hs-ao #cboxTopCenter,
html:root #colorbox.hs-ao #cboxTopRight,html:root #colorbox.hs-ao #cboxMiddleLeft,
html:root #colorbox.hs-ao #cboxMiddleRight,html:root #colorbox.hs-ao #cboxBottomLeft,
html:root #colorbox.hs-ao #cboxBottomCenter,html:root #colorbox.hs-ao #cboxBottomRight,
html:root #colorbox.hs-ao #cboxPrevious,html:root #colorbox.hs-ao #cboxNext,
html:root #colorbox.hs-ao #cboxSlideshow{display:none !important}
html:root #colorbox.hs-ao #cboxContent{
  float:none !important;clear:none !important;
  width:100% !important;height:auto !important;margin:0 !important;
  background:var(--paper) !important;border:1px solid var(--line) !important;
  border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden !important;
  animation:hsAoPop .45s var(--ease) both;
}
@keyframes hsAoPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
html:root #colorbox.hs-ao #cboxLoadedContent{
  width:100% !important;height:auto !important;max-height:calc(100vh - 34px);
  margin:0 !important;padding:0 !important;overflow:auto !important;
}
html:root #colorbox.hs-ao .colorbox-html-content{padding:0 !important}
/* Zavírací tlačítko: Apeti mu dává bílé pozadí přes !important a text
   odsazuje mimo obrazovku (text-indent:-9999px, ikona z vlastního písma). */
html:root #colorbox.hs-ao #cboxClose{
  top:14px;right:14px;width:38px;height:38px;border-radius:50%;z-index:5;
  background:var(--paper) !important;border:1px solid var(--line);
  color:var(--ink2);text-indent:0 !important;font-size:0 !important;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
html:root #colorbox.hs-ao #cboxClose:hover{background:var(--bg) !important;color:var(--red);border-color:rgba(143,36,48,.3)}
html:root #colorbox.hs-ao #cboxClose::before{
  content:'' !important;position:static;width:15px;height:15px;line-height:0;
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}

/* --- Obsah okna ---------------------------------------------------------- */
/* Bez #colorbox v selektoru: .advanced-order nikde jinde na webu není a
   pravidla tak platí hned, ne až JS doplní .hs-ao (colorbox si obsah měří
   dřív, než se k tomu dostaneme). */
html:root .advanced-order{
  position:relative;text-align:center;padding:36px 30px 28px;
  background:radial-gradient(120% 90% at 50% -25%,rgba(201,161,74,.13),transparent 62%);
}
html:root .advanced-order .h1{
  margin:0 !important;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(21px,3.4vw,26px);line-height:1.15;color:var(--ink);
}
html:root .advanced-order .h2{
  flex:1 1 auto;min-width:0;margin:0 !important;text-align:left;
  font-family:var(--ff-display);font-weight:400;font-size:15.5px;line-height:1.35;
  color:var(--ink);text-transform:none;
}
html:root .advanced-order .h2 span{
  display:block;margin-top:6px;
  font-family:var(--ff-body);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2);
}
html:root .advanced-order .h2 span::before{
  content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--gold-dk);margin-right:7px;vertical-align:middle;position:relative;top:-1px;
}

/* Potvrzovací značka: kroužek s fajfkou, která se dokreslí. Poloměr 23 →
   obvod 2πr ≈ 144,5, odtud stroke-dasharray. */
html:root .hs-ao-mark{width:58px;height:58px;margin:0 auto 18px}
html:root .hs-ao-mark svg{
  width:100%;height:100%;display:block;fill:none;
  stroke:var(--gold-dk);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
html:root .hs-ao-ring{stroke-dasharray:145;stroke-dashoffset:145;transform:rotate(-90deg);transform-origin:50% 50%}
html:root .hs-ao-tick{stroke-dasharray:34;stroke-dashoffset:34;stroke-width:2.8}
html:root .advanced-order.is-in .hs-ao-ring{animation:hsAoDraw .65s var(--ease) .06s forwards}
html:root .advanced-order.is-in .hs-ao-tick{animation:hsAoDraw .34s var(--ease) .5s forwards}
@keyframes hsAoDraw{to{stroke-dashoffset:0}}

html:root .hs-ao-item{
  display:flex;align-items:center;gap:15px;text-align:left;
  margin:20px 0 0;padding:13px 14px;border:1px solid var(--line2);border-radius:16px;
  background:linear-gradient(158deg,var(--paper-dk),var(--paper));
}
html:root .hs-ao-thumb{
  flex:none;box-sizing:border-box;width:64px;height:64px;border-radius:12px;overflow:hidden;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line2);
  display:flex;align-items:center;justify-content:center;
}
html:root .hs-ao-thumb img{box-sizing:border-box;width:100%;height:100%;object-fit:contain;padding:5px}
html:root .hs-ao-qty{
  flex:none;font-family:var(--ff-display);font-size:15px;color:var(--ink);
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  white-space:nowrap;
}
html:root .hs-ao-goal{margin:16px 0 0;text-align:left}
html:root .hs-ao-goal .hs-ship-goal{margin:0}

html:root .advanced-order .extras-wrap{margin-top:20px}
html:root .advanced-order .advancedOrder__buttons{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:22px 0 0 !important;
}
html:root .advanced-order .advancedOrder__buttons .btn{
  flex:1 1 170px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 22px !important;margin:0;border-radius:999px;
  font-family:var(--ff-body);font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
html:root .advanced-order .advancedOrder__buttons .btn:hover{transform:translateY(-1px)}
html:root .advanced-order .advancedOrder__buttons .btn:active{transform:none}
html:root .advanced-order .next-step-back{
  background:transparent !important;color:var(--ink2) !important;border:1px solid var(--line) !important;
}
html:root .advanced-order .next-step-back:hover{background:var(--bg) !important;color:var(--ink) !important;border-color:var(--ink3) !important}
html:root .advanced-order .btn-conversion{
  background:var(--dark) !important;color:var(--paper) !important;border:0 !important;
}
html:root .advanced-order .btn-conversion:hover{background:var(--red) !important}
html:root .advanced-order .btn-conversion::after{
  content:'' !important;flex:none;width:16px;height:16px;margin:0 !important;background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  transition:transform .25s var(--ease);
}
html:root .advanced-order .btn-conversion:hover::after{transform:translateX(3px)}

/* Postupný nájezd obsahu. Zapíná ho třída .is-in, kterou JS přidává až
   v dalším tiku — ve stejném rámci, ve kterém prvek vzniká, prohlížeč
   animaci spolkne.

   Výchozí opacity:0 je schválně podmíněná třídou .hs-ao (tu dává JS na
   #colorbox): kdyby se skript nenačetl, zůstal by obsah okna neviditelný —
   a to je okno, ve kterém se rozhoduje o dokončení nákupu. */
@keyframes hsAoIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html:root #colorbox.hs-ao .advanced-order>*{opacity:0}
/* opacity:1 vedle animace je pojistka pro případ, že se animace vůbec
   nespustí (rozšíření prohlížeče, vypnutá podpora). Když běží, přebije ji
   výplň klíčových snímků (animace vyhrává nad běžnou deklarací) — krátká
   chvilka neviditelnosti na začátku je tedy záměr, ne chyba. */
html:root .advanced-order.is-in>*{opacity:1;animation:hsAoIn .5s var(--ease) both}
html:root .advanced-order.is-in>*:nth-child(1){animation-delay:.04s}
html:root .advanced-order.is-in>*:nth-child(2){animation-delay:.12s}
html:root .advanced-order.is-in>*:nth-child(3){animation-delay:.2s}
html:root .advanced-order.is-in>*:nth-child(4){animation-delay:.28s}
html:root .advanced-order.is-in>*:nth-child(5){animation-delay:.36s}
html:root .advanced-order.is-in>*:nth-child(6){animation-delay:.42s}

@media (max-width:520px){
  html:root .advanced-order{padding:30px 20px 22px}
  html:root .hs-ao-item{gap:12px;padding:12px}
  html:root .hs-ao-thumb{width:56px;height:56px}
  html:root .advanced-order .advancedOrder__buttons .btn{flex:1 1 100%}
}
/* Bez JS (nebo než doběhne) by obsah zůstal neviditelný — opacity:0 výš je
   výchozí stav animace. Tahle pojistka ho vrátí, kdyby .is-in nedorazilo. */
@media (prefers-reduced-motion:reduce){
  html:root #colorbox.hs-ao #cboxContent{animation:none}
  html:root .advanced-order>*,html:root .advanced-order.is-in>*{opacity:1;animation:none}
  html:root .hs-ao-ring,html:root .hs-ao-tick{stroke-dashoffset:0;animation:none !important}
}