/* ESPEON custom CSS — načítáno přes <link> v Záhlaví (mimo 8192 limit HTML kódů)
 * Verze: 2026-08-25 (v16 – homepage banner „Jak ušetřit při nákupu?": zarovnané sloupce
 *   slev (.bs-amt v textu banneru, admin Doplňkové bannery) + řádky vlevo i na mobilu.)
 * Předchozí: 2026-07-12 (v15 – info stránky type-page: obsah VLEVO, obrázky/ikony na střed,
 *   VIDEA vlevo (fix: :has(iframe) přebíjí re-center :has(img), který video-<p> chytal).)
 * Obsah: UX opravy košíku (#70). Blogová typografie (#73) zůstává v Zápatí.
 * 2026-07-09: mini-košík šedý rámeček (border-color transparent) + větší mezera
 *   balení↔název. „100 ks" na jeden řádek řeší espeon-cart.js (miniCartNbsp).
 * 2026-07-09 (v4): REVERT carousel „Vyzkoušej mě" – všechna pravidla na ten button
 *   odstraněna, tlačítko zpět do původního (theme) stavu dle přání uživatele.
 * Nasazení + rollback: viz DEPLOY.md. PO UPLOADU BUMPNI ?v v Záhlaví!
 * ------------------------------------------------------------------------- */

/* === Mini-košík (hover popup): rozložení řádku ========================= */
/* PŮVODNÍ funkční verze (potvrzená uživatelem v dry-runu, než jsme šli na jiný
   úkol). Pevné šířky sloupců + menší font přerozdělí řádek tak, že „balení" je
   odsazené, „g" u gramáže i „ZDARMA" zůstanou na svém řádku a název nenaráží do
   jednotky. Třídy popupu: .cart-widget .cart-widget-product-image/-amount/-unit
   + .cart-widget-inner. (Nezaměňovat s třídami STRÁNKY košíku .p-name/.p-price.) */
@media (min-width: 992px) {
  .cart-widget .cart-widget-inner { font-size: 13px; line-height: 1.35; }
  .cart-widget .cart-widget-product-image { width: 52px; }
  .cart-widget .cart-widget-product-amount { width: 60px; padding: 0 4px; }
  .cart-widget .cart-widget-product-unit { width: 50px; white-space: nowrap; padding: 0 2px 0 8px; }
  /* padding-left = větší mezera mezi „balení" a názvem produktu (přání uživatele). */
  .cart-widget .cart-widget-product-name { font-size: 11.5px; line-height: 1.3; text-wrap: pretty; padding-left: 16px; }
}

/* Tlačítko košíku (toggle): potlačit ŠEDÝ RÁMEČEK, který theme přidává na
   hover/focus-visible/aktivní stav. Diagnóza: toggle nemá base border ani border
   ze stavových tříd; předchozí override resetoval jen outline + box-shadow, NE
   `border` → rámeček je border(-color) na :hover/:focus-visible. Přidán reset
   border-color: transparent (bez layout shiftu). Cílí JEN na toggle tlačítko,
   NE na popup .cart-widget (jeho rámeček dropdownu je chtěný a zůstává). */
a[data-testid="headerCart"],
a[data-testid="headerCart"]:hover,
a[data-testid="headerCart"]:focus,
a[data-testid="headerCart"]:focus-visible,
a[data-testid="headerCart"]:active,
a.cart-count.toggle-window,
a.cart-count.toggle-window:hover,
a.cart-count.toggle-window:focus,
a.cart-count.toggle-window:focus-visible,
a.cart-count.toggle-window:active {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* === Košík: rekapitulace objednávky (checkout) ========================= */
/* „balení" nesmí narážet do svislé přepážky (přetok buňky). */
.order-summary .cart-item-amount { padding: 8px 6px; }
.order-summary .cart-item-amount .unit-value { font-size: 13px; white-space: nowrap; }

/* === Košík: slevový kupón sbalený do odkazu ============================ */
/* Velké prázdné pole „Vložit slevový kupón" → decentní odkaz „Mám slevový
   kód", který se přes JS (espeon-cart.js) rozbalí na místě. */
.espeon-coupon-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  color: #732382; text-decoration: underline; cursor: pointer;
  font-weight: 600; font-size: 14px; margin: 2px 0 6px;
}
.espeon-coupon-toggle:before { content: "%"; font-weight: 700; }

/* === Produkt: hláška o dopravě zdarma =================================== */
.espeon-prod-freeship {
  display: inline-block; margin: 6px 0; font-size: 13px; font-weight: 600;
  color: #2e7d32;
}
.espeon-prod-freeship:before { content: "🚚 "; }

/* === Checkout: bezpečnostní microcopy u platby ========================= */
.espeon-pay-trust {
  margin: 4px 0 10px; font-size: 13px; color: #555;
}

/* === Košík: informace o nákladech (nad tlačítkem Pokračovat) =========== */
.espeon-cost-info {
  margin: 10px 0; padding: 10px 12px; background: #f6f0f8;
  border-radius: 8px; font-size: 13px; line-height: 1.5; color: #444;
}
.espeon-cost-info b { color: #2e7d32; }
.espeon-return { margin-top: 6px; font-size: 12px; color: #777; }
.espeon-reg-vp { margin: 4px 0 0 24px; font-size: 12px; color: #732382; }

/* === Košík: Uložit na později ========================================== */
.espeon-sfl-link {
  display: inline-block; margin-right: 12px; font-size: 12px;
  color: #732382; text-decoration: underline; cursor: pointer;
}
.espeon-saved { margin: 16px 0; padding: 12px 14px; border: 1px solid #ead9ee; border-radius: 8px; }
.espeon-saved-h { margin: 0 0 8px; font-size: 15px; }
.espeon-saved-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #f0e6f3; }
.espeon-saved-item img { width: 40px; height: 40px; object-fit: contain; }
.espeon-saved-name { flex: 1; font-size: 13px; }
.espeon-saved-add { font-size: 13px; color: #732382; font-weight: 600; white-space: nowrap; }
.espeon-sfl-del { color: #999; text-decoration: none; font-size: 18px; line-height: 1; }

/* === Mobil: souhrn + hlavní CTA nalepené dole (Baymard mobile) ========= */
/* Aby cena a tlačítko Pokračovat zůstaly viditelné při scrollu na telefonu. */
@media (max-width: 600px) {
  .cart-summary .next-step,
  .cart-summary .next-step--cart {
    position: sticky; bottom: 0; z-index: 20;
    background: #fff; padding: 8px 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  }
}

/* === Blog článek (desktop): tabulka + „Doporučený výběr" na šířku textu =====
   Čtený sloupec článku má max-width 800px (vycentrovaný auto-margins). Tabulka
   ani box doporučení tento cap nedědily → breakout na plnou šířku .text (1378px),
   takže na širokém monitoru přetékaly VLEVO i VPRAVO mimo text (nahlášeno + změřeno:
   text 800px/left553 vs tabulka 1378px/left264). Cap 800px + auto-margins je
   srovná přesně s textovým sloupcem (800px/left553 na všech šířkách; fixní čtený
   sloupec). Ověřeno měřením na článku 134. */
.news-item-detail .text table,
.news-item-detail .es-article-picks {
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Tabulka: hodnotové buňky na střed (jako hlavička) + zalomení místo přetečení. */
.news-item-detail .text table td { text-align: center !important; }
.news-item-detail .text table td,
.news-item-detail .text table th { word-break: break-word; }
/* Doporučený výběr k článku: 2×2 dlaždice (vždy 4 karty – doplněno v snippetu) do
   800px + text 12pt + standardní nadpis (custom 17px → 16px = default h3 webu).
   Snippet: .es-article-pick-*. */
.es-article-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.es-article-pick-card { padding: 13px !important; }
.es-article-pick-card p,
.es-article-pick-note,
.es-article-pick-link { font-size: 12pt !important; }
.es-article-pick-card h3 { font-size: 16px !important; }

/* Autor / odborný garant box (#espeon-author-box, snippet v Záhlaví): sjednotit
   s „Doporučeným výběrem" – šířka textu (800px, vycentrováno) + text 12pt.
   Box má inline styly → !important (datum span má inline font-size:13px). */
#espeon-author-box {
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 12pt !important;
}
#espeon-author-box span { font-size: 12pt !important; }

/* === Homepage: kategoriové dlaždice „podle povolání" (jen mobil) ==============
   Dlouhé labely (Potravinářství, Salony krásy) se na ÚZKÝCH telefonech nevešly do
   3-sloupcové dlaždice (calc(100%/3-10px)) při fixních 14px a lámaly se; na širším
   telefonu (Martin) OK → proto to každý viděl jinak. FLUIDNÍ velikost (clamp, NE
   fixní px) label zmenší přesně o kolik třeba jen na telefonech; tablet/desktop
   (6 sloupců/18px od 920px) beze změny. hyphens:auto = kdyby přeteklo i tak, zalomí
   čistě (html lang=cs). Zdroj stylu = dklab style_dklab.min.css (.welcome
   .categories__title); náš override je načten po něm, takže vyhrává.
   Nejdelší label „Průmysl a servis" byl i s clampem na hraně (2px rezerva) → navíc
   zmenšíme MEZERU mezi dlaždicemi z 10px na 6px (dlaždice o ~4px širší, místa je dost),
   čímž se nejdelší label vejde na 1 řádek napříč 320–430px (ověřeno měřením klonu do
   pevné šířky). Container margin -3px drží zarovnání s -6px součtem margin dlaždic.
   OVĚŘIT NA REÁLNÝCH TELEFONECH (mobilní render nejde reprodukovat v automatizaci).
   Reroll: smazat tento blok + bump ?v (záloha backups/espeon-custom-css-2026-07-10/live-v11.css). */
@media (max-width: 600px) {
  .welcome .categories__title { font-size: clamp(11px, 3.4vw, 14px); hyphens: auto; }
  .welcome .categories__in { margin: -3px; }
  .welcome .categories__item { width: calc(100% / 3 - 6px); margin: 3px; }
}

/* === Nadpisové bannery .articleHead → jen text-nadpis ===========================
   Stránky /vyber-rukavic/ a podstránky /o-nas/ (jak-rosteme, pomahame, tym, videa) mají
   nadpisy v `<p class="articleHead">` (na /vyber-rukavic/ + articleHeadSmall) s FIALOVÝM
   gradientovým boxem (radial-gradient, bílý text, velký padding). Uživatel chce banner
   pryč, nechat jen text jako nadpis. Třída .articleHead je JEN na těchto 5 stránkách
   (jinde na webu se nepoužívá – ověřeno crawlem), takže obecný selektor je bezpečný
   (pozor: /vyber-rukavic/ NENÍ v .news-item-detail, proto cílíme p.articleHead obecně).
   Titul (<strong>) = fialová #732382, podtitulek = šedá, vycentrováno, bez pozadí.
   Fluidní titul (clamp) ať se dlouhé „JAKÉ RUKAVICE POTŘEBUJETE?" nezalomí zle na mobilu.
   Ověřeno živě na /vyber-rukavic/, /o-nas/tym/, /o-nas/videa/. */
p.articleHead {
  background: none !important;
  color: #555 !important;
  padding: 0 !important;
  margin: 8px 0 24px !important;
  min-height: 0 !important;
  text-align: center !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  border-radius: 0 !important;
}
p.articleHead strong {
  display: inline-block;
  margin-bottom: 4px;
  color: #732382 !important;
  font-size: clamp(22px, 5vw, 30px) !important;
  line-height: 1.2 !important;
}
/* /vyber-rukavic/ je STRÁNKA (má vlastní černý H1 „Pomocník s výběrem rukavic"), takže
   fialový „JAKÉ RUKAVICE POTŘEBUJETE?" je navíc → menší podnadpis zarovnaný VLEVO (page-style,
   jako doprava-a-platba). Cílíme jen variantu .articleHeadSmall (jen na této stránce); o-nas
   (.articleHead bez Small) zůstává vycentrovaný. */
p.articleHead.articleHeadSmall {
  text-align: left !important;
  margin: 4px 0 18px !important;
}
p.articleHead.articleHeadSmall strong {
  font-size: 20px !important;
}

/* === Info stránky (type-page) – sjednotit obsah VLEVO (vzor doprava-a-platba) =======
   Textové/informační stránky (doprava-a-platba, reklamace, obchodní podmínky, ochrana
   údajů, slevy, časté dotazy, velkoobchod, kontakty, testujeme/tvoříme/natáčíme, postup,
   vyber-rukavic) mají rozházené inline text-align:center/justify na nadpisech i textu
   (nadpisy bývají i v centrovaných <div>). Sjednotíme na VLEVO. Jen OBRÁZKY/loga (ikony
   dopravců apod.) necháme VYCENTROVANÉ přes re-center :has(img). VIDEA (YouTube iframe)
   MAJÍ BÝT VLEVO (přání uživatele – vzor doprava-a-platba): re-center :has(img) je totiž
   chytal taky (video-<p> to matchovalo → center), proto je NÁSLEDNÝM pravidlem :has(iframe)
   vracíme zpět vlevo (stejná/vyšší specificita + pozdější pořadí → vyhrává; ověřeno live).
   Scope `body.type-page` = přesně info stránky (produkty=type-category/detail, blog=
   type-post(s), homepage=type-index → netýká se). Pozn.: /o-nas/ je type-posts (zvlášť). */
body.type-page .content-inner,
body.type-page .content-inner * {
  text-align: left !important;
}
body.type-page .content-inner p:has(img),
body.type-page .content-inner div:has(> img):not(.captcha-image),
body.type-page .content-inner span:has(> img) {
  text-align: center !important;
}
body.type-page .content-inner p:has(iframe),
body.type-page .content-inner div:has(iframe),
body.type-page .content-inner span:has(iframe) {
  text-align: left !important;
}

/* === „?" ikony u nadpisů (.news-item) – ODSTRANIT + blog nadpis center na mobilu ===
   dklab CSS dává před nadpisy v .news-item „?" ikonu (Font Awesome question-circle
   \f059, ::before). Je na blog výpisu (a.title) i na FAQ/textových stránkách (h2 –
   reklamace, časté dotazy…) a dělá nepořádek → uživatel je chce pryč všude. content:none
   je odstraní úplně. Navíc na MOBILU vycentrujeme nadpisy karet blog výpisu (a.title;
   FAQ h2 necháváme vlevo). Desktop beze změny (nadpis vpravo u obrázku, jak je).
   Ověřit na reálném telefonu (mobilní render nejde v automatizaci). */
.news-item > .text > a.title::before,
.news-item > .text > h2::before,
.news-item > .text > h2.active::before {
  content: none !important;
  display: none !important;
  margin-right: 0 !important;
}
@media (max-width: 767px) {
  .news-item > .text > a.title {
    text-align: center !important;
  }
}

/* === Homepage banner „Jak ušetřit při nákupu?": zarovnané sloupce slev =======
   Řádky „Nad 2 000 Kč -> Sleva 4 %" skákaly (různá šířka částek). Částky jsou
   v textu banneru (admin Doplňkové bannery) obalené <span class="bs-amt"> a tady
   dostanou pevnou šířku -> šipky i Slevy jsou pod sebou. Číslo a Kč drží
   nezlomitelné mezery přímo v textu. Mobil obsah centroval -> řádky vlevo. */
.banner-save__col .bs-amt { display: inline-block; min-width: 13.5ch; }
.banner-save__col { text-align: left; }