/* =============================================================================
   EL TOMINO — vlastní styl pro Shoptet, šablona 12 — VERZE 2 (11. 9. 2026)
   -----------------------------------------------------------------------------
   Nová verze vedle původní css/eltomino.css (ta zůstává netknutá). Vychází z ní;
   změny v původních sekcích jsou označené „v2:", nové věci jsou v sekci 14.
   Předloha: novy_navrh/web/index.html — TMAVÁ VARIANTA (rozhodnutí zadavatele
   11. 9. 2026): pozadí #141110, krémový text #f2ece3, zlatá #d9a441 místo hnědé,
   červenooranžová #e2492f na CTA a kódy. Krémová verze téhož je vedle
   v eltomino-v2-kremova.css (liší se jen tokeny v sekci 1 a sekcí 15).
   -----------------------------------------------------------------------------
   Jediný zdroj stylů celého webu. Vkládá se do administrace:
   Vzhled a obsah → Editor vzhledu → HTML kód v hlavičce (soubor header.html).
   HTML bannery nesmí mít vlastní <style> — všechno patří sem.

   Předloha: Stary_web/index.html (motiv „terakota").

   DŮLEŽITÉ PŘI ÚPRAVÁCH
   • Shoptet má html{font-size:10px}, takže 1rem = 10 px, ne 16 px.
     Hodnoty z původního webu proto NEJDOU přenést v rem — všechno je tu v px.
   • Nativní main-12.css je dvě zřetězené vrstvy; některé selektory jsou v témže
     @media bloku deklarované dvakrát. Přebíjí se ten druhý výskyt.
   • Breakpointy šablony: 480 / 768 / 992 / 1200 / 1440 (+321/479 pro mobilní grid).
   ========================================================================== */


/* =============================================================================
   1. TOKENY
   ========================================================================== */
:root{
  /* paleta — 1:1 z původního webu */
  /* tmavá paleta 1:1 z prototypu (novy_navrh/web/styles.css) */
  --et-bg:#141110;          /* teplá téměř černá (--bg)        */
  --et-surface:#221d1a;     /* karty (--card)                  */
  --et-section:#1b1715;     /* pás každé druhé sekce (--bg-alt)*/
  --et-deep:#0f0d0c;        /* patička, USP pás — nejtmavší    */
  --et-text:#f2ece3;        /* krémový text                    */
  --et-muted:#a99f92;
  --et-subtle:#8a8175;      /* kontrast na pozadí 4,6:1        */
  --et-accent:#d9a441;      /* zlatá — odkazy, čísla, drobné nadpisy (--gold) */
  --et-accent2:#e8b85c;     /* hover                           */
  --et-terra:#b8862f;       /* tmavší zlatá (linka USP pásu)   */
  --et-border:#35302a;
  --et-border-soft:rgba(242,236,227,.08);
  --et-glow:rgba(217,164,65,.18);

  /* v2: červenooranžový akcent z prototypu (novy_navrh/web) — jen CTA, slevové
     kódy a zvýraznění v heru. #e2492f je barva z fight.html; na tlačítkách je
     o odstín tmavší, aby bílý text splnil kontrast 4,5:1 (na #e2492f je jen 4,0). */
  --et-fire:#e2492f;
  --et-fire-btn:#d2402a;
  --et-fire-hover:#b33520;
  --et-fire-glow:rgba(210,64,42,.22);

  /* v2: jednotný svislý rytmus uvnitř sekce: hlavička → obsah → CTA */
  --et-gap:56px;

  /* písma */
  --et-display:"Anton",sans-serif;
  --et-head:"Oswald",sans-serif;
  --et-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --et-quote:"Bitter",Georgia,serif;

  /* rozměry */
  --et-maxw:1160px;         /* obsahová šířka sekcí */
  --et-gutter:24px;
  --et-radius:16px;
  --et-section-y:96px;      /* svislý rytmus sekcí (orig. 6rem) */

  /* zpětná kompatibilita se staršími bannery, dokud se nevymění */
  --bg:var(--et-bg); --surface:var(--et-surface); --section:var(--et-section);
  --text:var(--et-text); --muted:var(--et-muted); --subtle:var(--et-subtle);
  --accent:var(--et-accent); --accent2:var(--et-accent2); --terra:var(--et-terra);
  --border:var(--et-border);
}

/* Barevné a fontové proměnné Shoptetu.
   Šablona je jen konzumuje; hodnoty generuje administrace (Vzhled → Barvy) do
   <style> v <head> PŘED tímhle souborem, takže je tady přebijeme.
   Nastavením --template-font/--template-headings-font odpadá potřeba přepisovat
   font-family u body a h1–h6 zvlášť.

   Doporučeno nastavit stejné hodnoty i v administraci — promítají se do míst,
   kam CSS nedosáhne (e-mailové šablony, náhledy v adminu, theme-color). */
:root{
  --color-primary:#d9a441;          /* odkazy, hvězdičky, stránkování, checkboxy, táhlo filtru */
  --color-primary-hover:#e8b85c;
  --color-secondary:#d2402a;        /* v2: „Do košíku“ a konverzní tlačítka — stejná červená jako .et-btn */
  --color-secondary-hover:#b33520;  /* v2 */
  --color-tertiary:#35302a;         /* .btn-default, sociální ikony */
  --color-tertiary-hover:#4a4038;
  --color-header-background:#141110;
  --cookies-notice-background:#221d1a;
  --cookies-notice-color:#f2ece3;
  --cookies-notice-button-hover:#2a2420;
  --cookies-notice-link-hover:#d9a441;
  --template-font:"Inter";
  --template-headings-font:"Oswald";
}

/* Šablona bere neutrální tokeny odsud — přebarvení bez !important. */
:root{
  --colors-surface-primary:#141110;              /* body + .content-wrapper */
  --colors-surface-secondary:#0f0d0c;            /* #footer                 */
  --colors-foregrounds-content-primary-dark:#f2ece3;
  --colors-foregrounds-content-primary:#f2ece3;
  --colors-foregrounds-headlines-primary:#f2ece3;
  --colors-foregrounds-content-secondary:#a99f92;
  --colors-foregrounds-content-tertiary:#8a8175;
  --colors-foregrounds-borders-secondary:#35302a;
  --colors-foregrounds-borders-primary:#4a4038;
}

/* Text a okraje v hlavičce. Šablona je řídí přes .header-background-light. */
body.header-background-light,
body.header-background-dark{
  --_color-header-text:#f2ece3;
  --_color-header-contrast-bg:var(--et-accent);
  --_color-header-contrast-text:#141110;
  --_color-header-menu-border:var(--et-border);
  --_color-header-dropdown-border:var(--et-border);
  --_color-header-button-border:transparent;
}


/* =============================================================================
   2. ZÁKLAD
   ========================================================================== */
body{
  background:var(--et-bg);
  color:var(--et-text);
  font-family:var(--et-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Kotvy: hlavička je fixní jen do 991 px, na desktopu by odsazení dělalo mezeru. */
html{scroll-behavior:smooth;scroll-padding-top:0}
@media (max-width:991px){ html{scroll-padding-top:72px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--et-head);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--et-text);
}
h2,.h2{font-size:clamp(32px,4.5vw,54px)}
h3,.h3{font-size:clamp(18px,2vw,24px)}

p{margin:0 0 16px;color:var(--et-muted)}

a{color:var(--et-accent)}
a:focus,a:hover{color:var(--et-accent2)}

/* Sdílené drobnosti sekcí */
.et-eyebrow{
  display:block;margin:0 0 22px;   /* 12. 9.: dřív 12px — nadpis se na drobný lepil */
  font:600 16px/1 var(--et-head);   /* 12. 9.: dřív 12px, pak 14px */
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--et-accent);text-align:center;
}
.et-lead{
  max-width:680px;margin:0 auto 48px;
  color:var(--et-muted);text-align:center;
  font-size:20px;line-height:1.6;   /* 12. 9.: dřív 18px — vedle 54px nadpisů působilo drobně */
}

/* Tlačítka — pilulka, Oswald, hnědá. Nativní barvy řeší panel Barvy,
   tady zůstává jen tvar a typografie. */
.btn,a.btn{
  border-radius:999px;
  font-family:var(--et-head);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}


/* =============================================================================
   3. OPRAVY NATIVNÍ ŠABLONY
   Bez těchhle pravidel se homepage rozsype. Každé má u sebe důvod.
   ========================================================================== */

/* 3a. Trust strip se vytahoval o -110 px nahoru přes hero fotku.
       Slot „vedle carouselu" je nativně přilepený na spodek slideru.
       Strip se přesunul do banneru carouselu (62), tady se slot jen zneškodní. */
.banners-row:has(.carousel) .next-to-carousel-banners{margin-top:0!important}
.next-to-carousel-banners:empty,
.next-to-carousel-banners .banner-wrapper:empty{display:none!important}

/* 3b. Body bannery jsou nativně flex-row, takže každý pás byl široký jen podle
       obsahu a vypadal jako plovoucí obdélník místo pásu přes celou šířku. */
.type-index .banners-content.body-banners{display:block!important;margin:0!important}
.type-index .banners-content.body-banners .banner-wrapper{margin:0!important}

/* 3b2. Pořadí bloků homepage. V DOM jdou v pořadí bannery → produkty → úvodní
        text; potřebujeme úvodní text → produkty → bannery. */
.type-index .index-content-wrapper{display:flex;flex-direction:column}
.type-index .index-content-wrapper .homepage-texts-wrapper{order:0;margin-bottom:0}
.type-index .index-content-wrapper .shp-tabs-wrapper{order:1}
.type-index .index-content-wrapper .banners-content.body-banners{order:2}

/* 3c. Full-bleed pás. .index-content-wrapper má max-width 1418 px, takže se
       z něj musí vystoupit. Kvůli nativnímu scrollbar-gutter:stable je 100vw
       o šířku gutteru širší než obsah — přesah ořízne clip na obalu. */
.et-bleed{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
#content-wrapper{overflow-x:clip}

/* 3d. Carousel má jediný slide — ovládání pryč, ať nepřekáží, a overflow ven,
       aby full-bleed pás pod herem nebyl oříznutý na šířku slideru. */
.type-index .carousel-control,
.type-index .carousel-indicators{display:none!important}
.type-index .carousel-inner{overflow:visible}
.type-index .banners-row{margin-left:0;margin-right:0}

/* 3e. Název produktu má nativně height:57px + zděděný overflow:hidden (≥768 px).
       Dnes to nevadí (názvy jsou krátké), po doplnění gramáže by se ořízl. */
.products-block>div .p .name{height:auto;overflow:visible}

/* 3f. „Kód: 44" je absolutně pozicovaný přes obsah karty. Nikde ho nechceme. */
.p-code{display:none!important}

/* 3g. Lišta záložek: pravidlo bylo psané pro homepage, ale schovávalo i záložky
       na detailu produktu. Zúženo jen na homepage. */
.type-index .shp-tabs-row.responsive-nav{display:none!important}

/* 3h. Nadpis skupiny produktů nahrazuje úvodní text (nativně je stejně skrytý). */
.type-index .homepage-group-title{display:none!important}
.type-index .top-products-wrapper{display:none!important}

/* 3i. Prázdné kontejnery, které šablona vypisuje i bez obsahu. */
.container--bannersBenefit:empty,
.p-variants-block .detail-parameters:not(:has(tr)),
.p-basic-info-block .block:empty,
.p-image-wrapper .row:empty{display:none!important}


/* =============================================================================
   4. HLAVIČKA
   ========================================================================== */
#header{
  background:var(--et-bg);
  border-bottom:1px solid var(--et-border);
}
.navigation-in{font-family:var(--et-head)}
.navigation-in ul li a{letter-spacing:.06em}
@media (min-width:992px){
  .navigation-in{background:var(--et-bg)}
  .navigation-in ul.menu-level-2{background:var(--et-bg);border-color:var(--et-border)}
}
/* POZOR: .navigation-in je na ≥992 px position:absolute;width:9999em a šířku si
   měří JS, který pak dopíše .fitted. Do rozvržení menu se nesahá. */

/* Přihlášení zpět do hlavičky a do palety značky. */
.navigation-buttons .top-nav-button-login,
.navigation-buttons .top-nav-button-account,
.navigation-buttons a.top-nav-button-account{display:inline-block!important}
.navigation-buttons a,
.navigation-buttons .top-nav-button{color:var(--et-text)}
.navigation-buttons a:hover,
.navigation-buttons .top-nav-button:hover{color:var(--et-accent)}


/* =============================================================================
   5. HERO + TRUST STRIP   (banner „Carousel", promo 62)
   ========================================================================== */
body .et-hero{
  width:min(var(--et-maxw),calc(100% - 48px));
  margin:0 auto;
  padding:72px 0 84px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  align-items:center;
  gap:clamp(38px,6vw,72px);
}
.et-hero__copy{text-align:left}

.et-hero h1{
  max-width:620px;margin:0 0 20px;
  font-family:var(--et-display);
  font-weight:400;
  /* v2: tři věty, každá na svém řádku; 56 px je max, při kterém se
     „CHIPSY NECH SOUSEDŮM." vejde do sloupce (~570 px). Dřív clamp(46px,7.4vw,91px). */
  font-size:clamp(30px,4.3vw,56px);
  line-height:1.04;
  letter-spacing:.01em;
  text-transform:uppercase;   /* v2: verzálky jako v prototypu (fight.html) */
  color:var(--et-text);
}
/* Anton nemá kurzívu — bez tohohle si ji prohlížeč falešně dopočítá. */
.et-hero h1 em{
  font-style:normal;
  background:linear-gradient(180deg,var(--et-terra),var(--et-accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.et-hero__lead{
  max-width:540px;margin:0 0 28px;
  color:var(--et-text);opacity:.9;
  font-size:21px;line-height:1.6;   /* 12. 9.: dřív 19px */
}
.et-hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px}

.et-btn{
  min-height:48px;padding:14px 30px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--et-fire-btn);border-radius:999px;   /* v2: červená */
  background:var(--et-fire-btn);color:#fff;
  font:600 15px/1 var(--et-head);letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;
  transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s;
  box-shadow:0 8px 24px -8px var(--et-fire-glow);
}
.et-btn:hover{
  background:var(--et-fire-hover);border-color:var(--et-fire-hover);color:#fff;   /* v2 */
  transform:translateY(-2px);box-shadow:0 16px 36px -10px var(--et-fire-glow);
}
.et-btn--outline{background:transparent;color:var(--et-text);box-shadow:none}
.et-btn--outline:hover{
  background:rgba(122,74,42,.06);border-color:var(--et-accent);
  color:var(--et-accent);transform:none;box-shadow:none;
}

/* Řádek s ikonami — z původního webu (.risk-row) */
.et-hero__risks{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:9px 22px;margin:26px 0 0;padding:0;
}
.et-hero__risks li{
  display:flex;align-items:center;gap:7px;
  font-size:13px;letter-spacing:.02em;color:var(--et-muted);
}
.et-hero__risks svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--et-accent);stroke-width:1.7}
.et-hero__risks svg.et-flag{stroke:none}

.et-hero__micro{
  margin-top:22px;
  font-family:var(--et-quote);font-style:italic;font-size:13px;
  letter-spacing:.04em;color:var(--et-subtle);
}

.et-hero__media{
  width:100%;
  border:1px solid var(--et-border);border-radius:24px;
  overflow:hidden;background:var(--et-surface);
  box-shadow:0 40px 90px -36px var(--et-glow);
}
/* 4:3 jako v originálu — čtvercový ořez usekával spodky sáčků. */
.et-hero__media img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;object-position:center 28%;
}

/* Trust strip — pás přes celou šířku hned pod herem. */
.et-trust-strip{
  min-height:64px;padding:18px 24px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  background:var(--et-deep);
  border-top:2px solid var(--et-terra);
  border-bottom:1px solid var(--et-border-soft);
}
.et-trust-strip span{
  position:relative;padding:4px 26px;
  color:var(--et-muted);font-size:14px;font-weight:500;line-height:1.4;   /* 12. 9.: dřív 13px */
  text-align:center;
}
.et-trust-strip span:not(:last-child):after{
  content:"";position:absolute;top:50%;right:0;
  width:1px;height:18px;background:rgba(122,74,42,.2);transform:translateY(-50%);
}


/* =============================================================================
   6. ÚVODNÍ TEXT NAD PRODUKTY  (úvodní text homepage)
   ========================================================================== */
body .welcome-wrapper,
body .welcome{
  width:100%;max-width:100%;
  float:none;display:block;margin:0 auto;text-align:center;
}
body .et-intro{
  display:block;width:100%;
  max-width:calc(var(--et-maxw) + 2*var(--et-gutter));
  margin:0 auto;padding:var(--et-section-y) var(--et-gutter) 0;
  text-align:center;box-sizing:border-box;
}
body .et-intro h2{margin:0 0 16px;text-align:center}
body .et-intro p{
  max-width:620px;margin:0 auto;
  color:var(--et-muted);font-family:var(--et-body);
  font-size:18px;line-height:1.6;text-align:center;
}


/* =============================================================================
   7. KARTY PRODUKTŮ
   Platí GLOBÁLNĚ — homepage, kategorie i vyhledávání sdílí stejné třídy.
   (Dřív to bylo pod .type-index, takže kategorie měla stock vzhled.)
   ========================================================================== */
.products-block{margin-top:8px}
.type-index .products-block{margin:56px 0 40px}

.products-block>div .p{
  height:auto;min-height:0;overflow:visible;
  border:1px solid var(--et-border);border-radius:var(--et-radius);
  background:linear-gradient(180deg,var(--et-surface),var(--et-section));
  box-shadow:none;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;
}
.products-block>div .p:hover{
  transform:translateY(-6px);
  border-color:var(--et-accent);
  box-shadow:0 24px 60px -20px var(--et-glow);
}
/* Fotka je odsazená od hran karty a zaoblená ze všech stran — když sahala až
   k okraji, ostré rohy nahoře popíraly zaoblení karty.
   Vlastní rámeček tu ZÁMĚRNĚ není: karta už jeden má a druhý vedle něj působil
   jako rám v rámu. */
.products-block>div .p>a.image{
  display:block;overflow:hidden;
  margin:14px 14px 0;
  background:var(--et-surface);
  border-radius:10px;
}
/* Produktové fotky jsou na výšku, ale Shoptet z nich generuje náhledy na šířku
   (detail 423x318, big 1024x768) a rozdíl dolévá bílou. Ta pak kolem fotky
   prosvítala jako obdélník s ostrými rohy uvnitř zaobleného rámu.

   aspect-ratio MUSÍ odpovídat poměru nahraných fotek — pak ořez ukáže přesně
   obsah bez dolité bílé:
     • původní fotky 1181x1348  -> 279/318 (0,877)
     • fotky od Radka 1143x1600 -> 1143/1600 (0,714)   <- AKTUÁLNÍ
   Při další výměně fotek s jiným poměrem přepočítat!

   Systémovější řešení je nastavit v administraci rozměry produktových náhledů
   na poměr fotek (hledat „Obrázky" ve Vzhled a obsah) — bílá by zmizela všude
   a náhledy by byly ostřejší. Pak tohle pravidlo smazat. */
.products-block>div .p>a.image img{
  display:block;width:100%;height:auto;
  aspect-ratio:1143/1600;object-fit:cover;
}

/* Totéž na detailu produktu: big verze 1024x768 má po stranách 238 px bílé.
   Ořez + omezení výšky, ať fotka na výšku nezabere celou stránku. */
.type-product .p-image .p-main-image img{
  display:block;margin:0 auto;
  width:auto;max-width:100%;height:auto;max-height:620px;
  aspect-ratio:1143/1600;object-fit:cover;
  border-radius:12px;
}
/* ...a miniatury galerie pod hlavní fotkou (čtvercové náhledy s dolitou bílou) */
.type-product .p-thumbnails img{
  aspect-ratio:1143/1600;object-fit:cover;border-radius:6px;
}
.products-block>div .p>a.image img{transition:transform .6s ease}
.products-block>div .p:hover>a.image img{transform:scale(1.04)}

.products-block>div .p .p-in{display:block;height:auto;min-height:0;padding-top:20px}
.products-block>div .p .p-bottom{display:block;margin-top:0;overflow:visible;padding:0 20px 4px}

.products-block>div .p .name{
  color:var(--et-text);
  font-family:var(--et-head);font-size:20px;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;
}
.products-block>div .p .name:hover{text-decoration:none;color:var(--et-accent)}

.products-block>div .p .availability{
  font-size:13px;letter-spacing:.02em;
}
.products-block>div .p .price,
.products-block>div .p .price-final{
  display:block;
  color:var(--et-text);
  font-family:var(--et-head);font-size:20px;font-weight:600;
}
.products-block>div .p .p-desc{
  display:block;margin:14px 0 0;
  color:var(--et-muted);font-size:15px;line-height:1.55;text-align:center;   /* 12. 9.: dřív 14px */
}
.products-block>div .p .p-tools{padding:16px 0 20px}
.products-block>div .p .p-tools .btn.btn-cart{
  width:auto;min-width:150px;padding:12px 26px;
  border-radius:999px;line-height:1.2;
}

/* Odkaz „Nevíš, co vybrat?" pod mřížkou (z původního webu). */
.et-subcta{
  margin:8px 0 0;padding:0 var(--et-gutter);
  color:var(--et-muted);font-size:16px;text-align:center;
}
.et-subcta a{border-bottom:1px solid transparent;transition:border-color .2s}
.et-subcta a:hover{border-bottom-color:var(--et-accent)}


/* =============================================================================
   8. SEKCE HOMEPAGE
   ========================================================================== */
.et-section{
  max-width:calc(var(--et-maxw) + 2*var(--et-gutter));
  margin:0 auto;
  padding:var(--et-section-y) var(--et-gutter);
}
.et-section__head{max-width:760px;margin:0 auto var(--et-gap);text-align:center}   /* v2: dřív 64px */
.et-section__head h2{margin:0 0 16px;text-align:center}
.et-section__head .et-lead{margin-bottom:0}

/* Světlý pás — v originálu section:nth-of-type(even). */
.et-band{background:var(--et-section)}

/* 8a. Reference ------------------------------------------------------------ */
body .et-proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
body .et-testimonial{
  position:relative;padding:36px 28px;
  border:1px solid var(--et-border);border-radius:var(--et-radius);
  background:var(--et-surface);
  box-shadow:0 12px 30px -20px rgba(26,18,11,.35);
}
body .et-testimonial:before{
  content:'"';position:absolute;top:2px;left:20px;
  font:italic 80px/1 var(--et-quote);color:var(--et-accent);opacity:.25;
}
body .et-testimonial p{
  position:relative;margin:8px 0 16px;
  font:italic 500 19px/1.45 var(--et-quote);color:var(--et-text);
}
body .et-testimonial__attr{color:var(--et-subtle);font-size:15px;letter-spacing:.05em}   /* 12. 9.: dřív 14px */

/* 8b. Proces --------------------------------------------------------------- */
body .et-tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
body .et-tl:before{
  content:"";position:absolute;top:32px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--et-accent),transparent);
}
body .et-tl-step{position:relative;z-index:1;padding:0 8px;text-align:center}
body .et-tl-num{
  width:64px;height:64px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--et-border);border-radius:50%;
  background:var(--et-surface);
  box-shadow:0 0 0 6px var(--et-section),0 0 30px var(--et-glow);
  font:700 22px var(--et-head);color:var(--et-accent);
  transition:transform .4s;
}
body .et-tl-step:hover .et-tl-num{transform:scale(1.08)}
body .et-tl-step h3{margin:0 0 8px;font:600 17px var(--et-head);text-transform:uppercase}
body .et-tl-step p{margin:0;font-size:15px;line-height:1.55;color:var(--et-muted)}   /* 12. 9.: dřív 14px */

/* 8c. Příběh --------------------------------------------------------------- */
body .et-story{max-width:1088px;margin:0 auto;padding:var(--et-section-y) var(--et-gutter)}
body .et-story__grid{display:grid;grid-template-columns:330px 1fr;gap:64px;align-items:center}
body .et-story__badge{
  width:100%;border-radius:50%;
  border:2px solid var(--et-border);
  box-shadow:0 0 0 4px var(--et-surface),0 12px 30px -8px var(--et-glow);
}
body .et-story__grid h3{
  margin:24px 0 8px;
  font:italic 500 21px var(--et-quote);color:var(--et-accent);
  text-transform:none;letter-spacing:0;
}
body .et-story__grid h3:first-child{margin-top:0}
body .et-story__grid p{margin:0 0 8px;color:var(--et-muted);font-size:17px;line-height:1.65}   /* 12. 9.: dřív 16px */
body .et-pull{
  margin:0;padding:40px 16px 0;
  font:italic 500 clamp(24px,3vw,34px)/1.35 var(--et-quote);
  color:var(--et-accent);text-align:center;
}
body .et-pull:before,body .et-pull:after{
  content:"";display:block;width:60px;height:1px;
  margin:16px auto;background:var(--et-accent);opacity:.5;
}
body .et-payoff{
  margin:32px 0 0;
  font:italic 19px/1.55 var(--et-quote);color:var(--et-text);text-align:center;
}

/* 8d. Čísla ---------------------------------------------------------------- */
body .et-stats{max-width:928px;margin:0 auto;padding:var(--et-section-y) var(--et-gutter)}
body .et-stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body .et-stat{
  padding:36px 24px;text-align:center;
  border:1px solid var(--et-border-soft);border-radius:var(--et-radius);
  background:linear-gradient(180deg,var(--et-surface),var(--et-section));
  transition:transform .3s,border-color .3s;
}
body .et-stat:hover{transform:translateY(-2px);border-color:var(--et-border)}
body .et-stat__val{
  font:400 clamp(42px,5vw,58px)/1 var(--et-display);
  color:var(--et-accent);letter-spacing:.01em;
}
body .et-stat__lbl{margin-top:12px;color:var(--et-muted);font-size:16px}   /* 12. 9.: dřív 15px */

/* 8e. FAQ ------------------------------------------------------------------ */
.et-faq{max-width:760px;margin:0 auto}
.et-faq details{border-bottom:1px solid var(--et-border-soft);padding:24px 0;transition:border-color .2s}
.et-faq details[open]{border-bottom-color:var(--et-border)}
.et-faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font:600 17px var(--et-head);color:var(--et-text);
  text-transform:uppercase;letter-spacing:.02em;
}
.et-faq summary::-webkit-details-marker{display:none}
.et-faq summary:after{
  content:"+";width:24px;flex-shrink:0;
  font:300 24px/1 var(--et-body);color:var(--et-accent);text-align:center;
  transition:transform .3s;
}
.et-faq details[open] summary:after{transform:rotate(45deg)}
.et-faq details p{
  margin:16px 0 0;color:var(--et-muted);
  font-size:16px;line-height:1.7;text-transform:none;
}

/* 8f. Finální CTA ---------------------------------------------------------- */
.et-cta{
  position:relative;overflow:hidden;
  padding:80px 32px;text-align:center;
  border:1px solid var(--et-border);border-radius:var(--et-radius);
  background:linear-gradient(135deg,rgba(122,74,42,.12),var(--et-deep));
}
.et-cta:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(122,74,42,.18),transparent 55%);
}
.et-cta__in{position:relative;z-index:1}
.et-cta h2{margin:0 0 16px}
.et-cta p{max-width:520px;margin:0 auto 32px;color:var(--et-muted);font-size:17px;text-transform:none}
.et-cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* Nativní newsletter uvnitř CTA (šablona ho jinak schovává v patičce). */
.et-cta .footer-newsletter,
.et-cta .newsletter-header{border:0;padding:0;background:none}
.et-cta .footer-newsletter h3,
.et-cta .footer-newsletter h4{display:none}
.et-cta form .form-group{margin-bottom:0}


/* =============================================================================
   9. PATIČKA
   ========================================================================== */
#footer,
.footer-rows,
.footer-bottom{background-color:var(--et-deep)}
#footer{border-top:1px solid var(--et-border-soft);margin-top:0}
/* .banner obaluje patičkový banner a nativně má overflow:hidden a min-height. */
#footer .banner{overflow:visible;min-height:0;margin-bottom:0}

body .et-footer{
  max-width:calc(var(--et-maxw) + 2*var(--et-gutter));
  margin:0 auto;padding:64px var(--et-gutter) 32px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;
  align-items:start;                 /* dřív align-items:end → rozhozené sloupce */
  color:var(--et-muted);font-size:15px;line-height:1.6;
}
body .et-footer__brand{display:flex;flex-direction:column;gap:14px}
body .et-footer__brand img{width:96px;height:96px;border-radius:50%;object-fit:cover}
body .et-footer__brand p{max-width:360px;margin:0;color:var(--et-subtle);font-size:15px}
body .et-footer__col h4{
  margin:0 0 16px;
  font:600 13px var(--et-head);letter-spacing:.15em;text-transform:uppercase;
  color:var(--et-accent);
}
body .et-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* Šablona kreslí u položek v patičce šipkovou odrážku přes ::before. */
body .et-footer ul li{padding:0}
body .et-footer ul li:before{display:none!important;content:none!important}
body .et-footer__col a,
body .et-footer__col span{color:var(--et-muted);font-size:15px;text-decoration:none}
body .et-footer__col a:hover{color:var(--et-accent)}
body .et-footer__legal{
  grid-column:1/-1;
  margin-top:8px;padding-top:24px;
  border-top:1px solid var(--et-border-soft);
  color:var(--et-subtle);font-size:13px;letter-spacing:.03em;
}
body .et-footer__legal strong{color:var(--et-muted);font-weight:600}

.footer-bottom{border-top:1px solid var(--et-border-soft)}
.footer-bottom,
.footer-bottom a,
.footer-bottom .copyright{color:var(--et-subtle);font-size:13px}
.footer-bottom a:hover{color:var(--et-accent)}


/* =============================================================================
   10. PODSTRÁNKY
   ========================================================================== */
.content-wrapper{background:var(--et-bg)}

/* Kategorie */
.type-category .category-title,
.type-category h1{margin-bottom:16px}
.et-cat-perex{
  max-width:760px;margin:0 0 32px;
  color:var(--et-muted);font-size:17px;line-height:1.65;
}
.type-category #filters-wrapper:empty{display:none}

/* Postranní panel je nativní součást šablony 12 — kategorie je jediná
   dvousloupcová stránka na webu. Necháváme ho a sladíme s paletou.
   Jeho obsah (strom kategorií, filtry, bannery) se zapíná v administraci:
   Vzhled a obsah → Postranní panel.

   Kdyby ho měl web mít jednosloupcový jako zbytek stránek, stačí odkomentovat:
   .type-category .sidebar{display:none}
   .type-category .content{width:100%}
*/
.sidebar .box{
  margin-bottom:20px;padding:20px;
  border:1px solid var(--et-border);border-radius:var(--et-radius);
  background:var(--et-surface);
}
.sidebar .box.box-bg-variant,
.sidebar .box.box-bg-default,
.sidebar .box.box-bg-dark{background:var(--et-surface)}
.sidebar .box h3,
.sidebar .box h4{
  margin:0 0 12px;
  font:600 13px var(--et-head);letter-spacing:.15em;text-transform:uppercase;
  color:var(--et-accent);
}
.sidebar .box ul{list-style:none;margin:0;padding:0}
.sidebar .box ul li:before{display:none!important;content:none!important}
.sidebar .box a{color:var(--et-muted);text-decoration:none}
.sidebar .box a:hover,
.sidebar .box a.active{color:var(--et-accent)}

/* Detail produktu */
.type-product .p-detail-inner{padding-top:8px}
.type-product h1{font-size:clamp(28px,3.4vw,42px)}
.type-product .p-short-description{color:var(--et-muted);font-size:17px;line-height:1.65}
/* Tabulka výživových údajů má v HTML natvrdo width:430.484px (dědictví WYSIWYGu),
   což přetéká na mobilu. Pevné šířky pryč, ale ať se neroztáhne přes celou stránku. */
.type-product .basic-description table{
  width:100%!important;max-width:520px;
  table-layout:auto;border-collapse:collapse;
}
.type-product .basic-description table td,
.type-product .basic-description table th{
  width:auto!important;
  padding:6px 12px 6px 0;
  border-bottom:1px solid var(--et-border);
}
.type-product .basic-description table td:last-child,
.type-product .basic-description table th:last-child{text-align:right;padding-right:0}
.type-product .basic-description{overflow-x:auto}

/* Textové stránky */
.type-page .content-inner,
.type-post .content-inner{font-size:17px;line-height:1.7}
.type-page .content-inner h2,
.type-page .content-inner h3{margin-top:32px}
/* Podmínky byly nakopírované i s <blockquote>, který obaloval celý dokument. */
.type-page [itemprop=about]>blockquote{
  margin:0;padding:0;border:0;background:none;font-size:inherit;
}
.type-page [itemprop=about] h1:empty,
.type-page [itemprop=about] p:empty{display:none}

/* Kontakty */
.et-contact{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
  margin-bottom:40px;
}
.et-contact h2{font-size:22px;margin:0 0 16px}
.et-contact ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.et-contact ul li:before{display:none!important;content:none!important}
.et-contact p{margin:20px 0 0}
.et-contact a{text-decoration:none}
.et-contact a:hover{text-decoration:underline}

/* Košík a objednávka — body tu nemá žádnou type-* třídu. */
.ordering-process .content-wrapper{background:var(--et-bg)}
.ordering-process .cart-heading,
.ordering-process h1,
.ordering-process h2{font-family:var(--et-head)}
.ordering-process .box{
  border:1px solid var(--et-border);border-radius:var(--et-radius);
  background:var(--et-surface);
}
/* Patička v košíku vzniká skriptem z footer.html — šablona ji sem nerenderuje. */
.et-cart-footer{
  margin-top:48px;border-top:1px solid var(--et-border-soft);
  background:var(--et-deep);
}

/* Vyhledávání a 404 */
.type-search .content h2:first-child{font-size:clamp(28px,3.4vw,42px)}
.empty-content h1,
.empty-content h2{color:var(--et-accent)}


/* =============================================================================
   11. STICKY MOBILNÍ CTA
   ========================================================================== */
.et-mobile-cta{
  display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:40;
  padding:16px;border-radius:999px;
  background:var(--et-fire-btn);color:#fff;   /* v2 */
  font:600 15px/1 var(--et-head);letter-spacing:.04em;
  text-align:center;text-decoration:none;text-transform:uppercase;
  box-shadow:0 12px 30px -5px rgba(0,0,0,.35);
}
.et-mobile-cta:hover,.et-mobile-cta:focus{background:var(--et-fire-hover);color:#fff}   /* v2 */
@media (max-width:860px){
  .type-index .et-mobile-cta{display:block}
  .type-index #footer{padding-bottom:88px}
}


/* =============================================================================
   12. ODKRÝVÁNÍ SEKCÍ
   Skrývá se jen tehdy, když běží JS (třídu .et-js dopisuje skript v hlavičce)
   — jinak by při vypnutém JS zůstal obsah trvale neviditelný.
   Třídu .et-in pak doplňuje IntersectionObserver z footer.html.
   ========================================================================== */
.et-js .et-reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);
}
.et-js .et-reveal.et-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .et-js .et-reveal{opacity:1;transform:none;transition:none}
}

/* Slot na newsletter v CTA — naplní ho skript přesunem nativního formuláře. */
.et-cta__newsletter:empty{display:none}
.et-cta__newsletter{max-width:520px;margin:32px auto 0}
.et-cta__newsletter .footer-newsletter{border:0;padding:0;background:none}

/* Náhradní patička v košíku (šablona tam #footer nerenderuje vůbec). */
.et-cart-footer{display:none}
.ordering-process .et-cart-footer{
  display:block;padding:40px 24px;
  background:var(--et-deep);
  border-top:1px solid var(--et-border-soft);
  color:var(--et-muted);font-size:14px;text-align:center;
}
.ordering-process .et-cart-footer a{color:var(--et-muted);text-decoration:none}
.ordering-process .et-cart-footer a:hover{color:var(--et-accent)}
.et-cart-footer__row{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center}
.et-cart-footer__legal{margin-top:16px;color:var(--et-subtle);font-size:13px}


/* =============================================================================
   13. RESPONZIVITA
   ========================================================================== */
@media (max-width:1199px){
  /* Šablona přepíná produkty na 3 sloupce až od 1200 px. */
  :root{--et-section-y:80px}
}

@media (max-width:960px){
  body .et-hero{
    grid-template-columns:1fr;gap:32px;
    padding:24px 0 56px;
  }
  .et-hero__media{order:-1}
  .et-hero__copy{text-align:center}
  .et-hero h1{margin-left:auto;margin-right:auto}
  .et-hero__lead{margin-left:auto;margin-right:auto}
  .et-hero__actions,.et-hero__risks{justify-content:center}
  body .et-tl{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  body .et-tl:before{display:none}
  body .et-proof__grid{grid-template-columns:1fr;gap:16px}
}

@media (max-width:860px){
  :root{--et-section-y:72px}
  body .et-story__grid{grid-template-columns:1fr;gap:32px;text-align:center}
  body .et-story__badge{max-width:240px;margin:0 auto}
  body .et-footer{grid-template-columns:1fr;gap:32px;text-align:center}
  body .et-footer__brand{align-items:center}
  body .et-footer__brand p{margin:0 auto}
  body .et-footer__col ul{justify-items:center}
  .et-trust-strip span{padding:6px 16px}
  .et-trust-strip span:after{display:none!important}
}

@media (max-width:620px){
  body .et-stats__grid{grid-template-columns:1fr;max-width:340px;margin:0 auto}
  .et-contact{grid-template-columns:1fr;gap:32px}
  .et-cta{padding:56px 20px}
  .et-hero__media img{aspect-ratio:4/3}
}

@media (max-width:520px){
  .et-hero__actions{flex-direction:column;align-items:stretch;width:100%}
  .et-hero__actions .et-btn{width:100%}
  .et-trust-strip{gap:4px 0}
  .et-trust-strip span{flex:0 0 50%;padding:6px 8px;font-size:12px}
}

/* Produkty na mobilu POD SEBOU. Šablona je nativně skládá po dvou
   (body má .columns-mobile-2: 50 % šířky od 321 px, .columns-3: 50 % od 480 px),
   což u tří produktů dává 2+1 a malá okýnka. Selektory musí obsahovat třídy
   z body, jinak prohrají specificitou s nativními pravidly. */
@media (max-width:639px){
  .columns-mobile-2 .products-block>div,
  .columns-3 .products-block>div{width:100%;float:none;padding:8px 5px}
}


/* =============================================================================
   14. V2 — 11. 9. 2026
   Předloha novy_navrh/web/index.html (barvy řeší tokeny v sekci 1 + sekce 15). Nové: hero s fotkou na
   výšku a červeným zvýrazněním, sekce „35 g bílkovin" se srovnávací tabulkou,
   karty partnerů se slevovými kódy, zvýraznění Starter packu v mřížce produktů,
   jednotné mezery (hlavička sekce → obsah → CTA = --et-gap).
   ========================================================================== */

/* 14a. Hero ------------------------------------------------------------------ */
.et-eyebrow--left{text-align:left}
.et-hero .et-smash{display:block;color:var(--et-fire)}   /* vždy na vlastním řádku */
.et-hero__note{margin:14px 0 0;color:var(--et-subtle);font-size:14px;letter-spacing:.03em}   /* 12. 9.: dřív 13px */
/* Fotka je na výšku (4:5) — nesmí zabrat celý sloupec, jinak přeroste text. */
.et-hero__media--portrait{max-width:400px;justify-self:end}   /* 400×500 px; dřív 460 (575 na výšku) */
.et-hero__media--portrait img{aspect-ratio:4/5;object-position:center 22%}

/* 14a2. Prohození obrázků (12. 9. 2026): kulatý brand badge v heru, fotka
   majitele v příběhu. Badge je čtvercový JPEG bez průhlednosti — kruh dělá CSS,
   proto pryč s obdélníkovou kartou (.et-hero__media má rámeček a radius 24). */
.et-hero__media--badge{
  max-width:380px;justify-self:end;
  border:0;border-radius:50%;background:none;box-shadow:none;overflow:visible;
}
.et-hero__media--badge img{
  aspect-ratio:1/1;object-fit:cover;object-position:center;
  border-radius:50%;border:2px solid var(--et-border);
  box-shadow:0 0 0 4px var(--et-surface),0 30px 70px -30px rgba(0,0,0,.8);
}
body .et-story__photo{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;
  border:1px solid var(--et-border);border-radius:24px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}

/* 14b. Rytmus a drobnosti ---------------------------------------------------- */
.et-section__cta{margin-top:var(--et-gap);text-align:center}
.et-section__cta p{
  margin:0 0 20px;
  font:600 clamp(20px,2.2vw,26px)/1.3 var(--et-head);
  color:var(--et-text);text-transform:uppercase;letter-spacing:.02em;
}
.et-fineprint{
  max-width:760px;margin:16px auto 0;
  color:var(--et-subtle);font-size:14px;line-height:1.5;font-style:italic;text-align:center;   /* 12. 9.: dřív 13px */
}

/* 14c. „35 g bílkovin" -------------------------------------------------------- */
body .et-stats--wide{max-width:calc(var(--et-maxw) + 2*var(--et-gutter))}
body .et-stats__grid--4{grid-template-columns:repeat(4,1fr)}
body .et-stat__val--fire{color:var(--et-fire)}
.et-compare-wrap{
  margin-top:var(--et-gap);overflow-x:auto;
  border:1px solid var(--et-border);border-radius:var(--et-radius);
  background:var(--et-surface);
}
.et-compare{width:100%;min-width:600px;border-collapse:collapse;font-size:15px}
.et-compare th,.et-compare td{
  padding:14px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--et-border-soft);color:var(--et-muted);
}
.et-compare thead th{
  background:var(--et-section);
  font:600 13px var(--et-head);letter-spacing:.12em;text-transform:uppercase;   /* 12. 9.: dřív 12px */
}
.et-compare tbody tr:last-child td{border-bottom:0}
.et-compare tbody td:first-child{color:var(--et-text);font-weight:600}
.et-compare thead th.et-compare__hero{color:var(--et-accent)}
.et-compare td.et-compare__win{color:var(--et-text);font-weight:600;background:rgba(122,74,42,.05)}
.et-stats__note{
  max-width:680px;margin:var(--et-gap) auto 0;
  color:var(--et-text);font-size:19px;line-height:1.6;text-align:center;   /* 12. 9.: dřív 17px */
}
.et-stats__cta{margin-top:28px;text-align:center}

/* 14d. Partneři ---------------------------------------------------------------- */
body .et-partners{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
body .et-partner{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--et-border);border-radius:var(--et-radius);
  background:var(--et-surface);
  box-shadow:0 12px 30px -20px rgba(26,18,11,.35);
}
body .et-partner__photo{
  display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:center top;
}
body .et-partner__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
body .et-partner__name{
  margin:0;
  font:600 19px var(--et-head);text-transform:uppercase;letter-spacing:.03em;
  color:var(--et-text);
}
body .et-partner__role{
  color:var(--et-fire);
  font:600 13px var(--et-head);letter-spacing:.12em;text-transform:uppercase;   /* 12. 9.: dřív 12px */
}
body .et-partner__quote{
  margin:6px 0 0;padding:0 0 0 14px;border-left:3px solid var(--et-accent);
  font:italic 500 17px/1.5 var(--et-quote);color:var(--et-muted);   /* 12. 9.: dřív 16px */
}
body .et-partner__quote a{color:var(--et-accent)}
body .et-partner__code{
  align-self:flex-start;margin-top:14px;padding:8px 14px;
  border:1px dashed var(--et-fire);border-radius:8px;
  background:rgba(226,73,47,.07);
  color:var(--et-fire);font:600 13px var(--et-head);letter-spacing:.08em;
}
/* kód / Instagram sedí u všech karet na stejné výšce — dole */
body .et-partner__quote{flex:1}
/* 12. 9. 2026: odkaz na Instagram sportovce pod citátem */
body .et-partner__ig{
  align-self:flex-start;margin-top:14px;
  font:600 14px var(--et-head);letter-spacing:.06em;
  color:var(--et-accent);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s,color .2s;
}
body .et-partner__ig:hover{color:var(--et-accent2);border-bottom-color:var(--et-accent2)}
/* Třetí karta — zatím bez sportovce: šrafování, velký otazník, „Už brzy". */
body .et-partner--soon{opacity:.9}
body .et-partner__soon{
  aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px;text-align:center;
  background:repeating-linear-gradient(45deg,var(--et-section),var(--et-section) 12px,var(--et-deep) 12px,var(--et-deep) 24px);
  color:var(--et-muted);font:600 13px var(--et-head);letter-spacing:.18em;text-transform:uppercase;
}
body .et-partner__soon-mark{
  display:block;
  font:400 clamp(110px,11vw,160px)/1 var(--et-display);
  color:var(--et-accent);opacity:.85;
  text-shadow:0 10px 30px var(--et-glow);
}

/* 14e. Příběh — citát manželky (nahrazuje h3 podnadpisy z v1) ----------------- */
body .et-story__quote{
  margin:40px 0;padding:4px 0 4px 18px;border-left:4px solid var(--et-accent);   /* 12. 9.: dřív 20px */
  font:italic 500 clamp(21px,2.4vw,26px)/1.35 var(--et-quote);color:var(--et-accent);
}
body .et-story__quote span{
  display:block;margin-top:6px;
  font:14px/1.4 var(--et-body);font-style:normal;color:var(--et-subtle);
}

/* 14f. Starter pack v mřížce produktů (Shoptet, ID 52) ------------------------
   Zvýraznění jako .product-card.fp v prototypu. Karta je position:relative
   a má overflow:visible (sekce 7), takže štítek jde absolutně. */
.products-block>div .p[data-micro-product-id="52"]{border-color:var(--et-fire)}
.products-block>div .p[data-micro-product-id="52"]:before{
  content:"Nejvýhodnější";position:absolute;top:24px;left:24px;z-index:2;
  padding:6px 10px;border-radius:6px;
  background:var(--et-fire-btn);color:#fff;
  font:600 11px/1 var(--et-head);letter-spacing:.1em;text-transform:uppercase;
}

/* 14g. Zatím vypnuté (BACKLOG.md) --------------------------------------------
   Sběr e-mailů: v prototypu je za FAQ sekce „Sleva 10 % za e-mail" (PRVNI10).
   Není nastavená, proto se nativní newsletter schovává i v patičce; slot v CTA
   už v bannerech není. Až se zapne, tohle pravidlo smazat. */
#footer .footer-newsletter{display:none}

/* 14h. Responzivita nových prvků ------------------------------------------------ */
@media (max-width:1199px){
  body .et-partners{gap:16px}
}
@media (max-width:960px){
  .et-hero__media--portrait{max-width:360px;justify-self:center}
  .et-hero__media--badge{max-width:280px;justify-self:center}
  body .et-stats__grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body .et-partners{grid-template-columns:1fr;max-width:420px;margin:0 auto}
}
@media (max-width:620px){
  /* na mobilu je fotka nad titulkem — čtverec, aby text nebyl až za druhou obrazovkou */
  .et-hero__media--portrait img{aspect-ratio:1/1;object-position:center 45%}
  .et-hero__media--badge{max-width:220px}
  body .et-stats__grid--4{grid-template-columns:1fr}
  .et-compare{font-size:14px}
}


/* =============================================================================
   15. TMAVÁ VARIANTA — 11. 9. 2026
   Paletu přepínají tokeny v sekci 1. Tady je jen to, co mělo barvu natvrdo
   (hnědé rgba() z původního webu), a nativní prvky Shoptetu, které na tmavém
   pozadí potřebují pomoc.
   ========================================================================== */

/* Logo v hlavičce je černé na průhledném pozadí (user/logos/el_tomino_(1).png,
   jednobarevné) — na tmavé by zmizelo. Invert ho udělá krémové. Čistší cesta:
   nahrát LOGO/text_logo_white.svg jako logo (Vzhled a obsah → Logo) a tohle
   pravidlo smazat. */
#header .site-name img{filter:invert(1) brightness(.95)}

/* Zbytky hnědých rgba() z krémové verze */
.et-btn--outline:hover{background:rgba(217,164,65,.1)}
.et-trust-strip span:not(:last-child):after{background:rgba(242,236,227,.12)}
body .et-tl-num{box-shadow:0 0 0 6px var(--et-bg),0 0 30px var(--et-glow)}
.et-compare td.et-compare__win{background:rgba(217,164,65,.08)}
body .et-partner__code{background:rgba(226,73,47,.14)}
.et-cta{background:linear-gradient(135deg,rgba(217,164,65,.14),var(--et-section))}
.et-cta:before{background:radial-gradient(circle at 50% 0%,rgba(226,73,47,.18),transparent 55%)}
body .et-partner__soon{
  background:repeating-linear-gradient(45deg,var(--et-surface),var(--et-surface) 12px,var(--et-bg) 12px,var(--et-bg) 24px);
}
body .et-story__badge{box-shadow:0 0 0 4px var(--et-surface),0 12px 30px -8px rgba(0,0,0,.6)}
body .et-testimonial,body .et-partner{box-shadow:0 12px 30px -20px rgba(0,0,0,.7)}
.et-hero__media{box-shadow:0 40px 90px -36px rgba(0,0,0,.8)}

/* Uvítací text má z WYSIWYG natvrdo color:#1a120b na nadpisu — na tmavém pozadí
   by zmizel. !important přebije inline styl. */
.et-intro-standalone h2{color:var(--et-text)!important}
.et-intro-standalone p{font-size:20px!important;max-width:680px!important}   /* 12. 9.: WYSIWYG má natvrdo 16px */

/* Formuláře (košík, objednávka, kontakt, vyhledávání) — šablona jim barvu
   nedává přes tokeny */
.form-control,
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
textarea,select{
  background-color:var(--et-surface);color:var(--et-text);border-color:var(--et-border);
}
.form-control:focus,input:focus,textarea:focus,select:focus{border-color:var(--et-accent);outline:none}
::placeholder{color:var(--et-subtle);opacity:1}
.ordering-process .box,
.ordering-process .cart-table,
.ordering-process .cart-summary{color:var(--et-text)}

/* Odkazy v běžném textu zlatě, hover světlejší */
.content-inner a:not(.btn),.basic-description a:not(.btn){color:var(--et-accent)}
.content-inner a:not(.btn):hover,.basic-description a:not(.btn):hover{color:var(--et-accent2)}

/* Tabulka výživových hodnot na detailu produktu */
.type-product .basic-description table td,
.type-product .basic-description table th{border-bottom-color:var(--et-border)}

/* Šablona dává některým blokům bílé pozadí natvrdo */
.type-category .sidebar .box,
.p-detail-inner,
.products-block>div .p>a.image{background:var(--et-surface)}

/* Dva tokeny šablony, které sekce 1 nepokrývá: „bílý povrch" (aktivní záložka
   Popis/Hodnocení, řazení v kategorii, filtr Na skladě, počítadlo u filtru)
   a „terciární povrch" (hover záložek). Bez nich zůstávají bílé a text na nich
   v tmavé verzi zmizí. */
:root{
  --colors-surface-white:#221d1a;
  --colors-surface-tertiary:#2a2420;
  --colors-surface-subtle:#2a2420;
  --colors-surface-quaternary:#4a4038;
  --colors-surface-disabled:#2a2420;
  --colors-surface-overlay:#141110a6;
  --colors-surface-overlay-light:#141110a6;
  /* formuláře: pozadí, rámeček, focus, vypnuté pole */
  --colors-forms-background:#221d1a;
  --colors-forms-border:#4a4038;
  --colors-forms-activated:#d9a441;
  --colors-forms-disabled:#2a2420;
  --colors-focus-primary:#d9a441;
  --colors-focus-secondary:#141110;
  --colors-foregrounds-icons-primary:#a99f92;
  --colors-foregrounds-content-quaternary:#8a8175;
  --colors-foregrounds-borders-tertiary:#4a4038;
}
.active .shp-tab-link,
.listSorting__control--current{background-color:var(--et-surface);color:var(--et-text)}
.listSorting__control{color:var(--et-muted)}
.listSorting__control:hover{color:var(--et-text)}
.filter-sections,
.filter-section,
.param-filter-top{background-color:var(--et-surface);color:var(--et-text)}
.filter-label{color:var(--et-text)}
.filter-count{background-color:var(--et-section);color:var(--et-muted)}