/* =============================================================
   sportoutlety.cz — NÁŠ custom layer (PohodaFlow)
   Servírováno z Cloudflare Pages, načteno aditivním <link>
   v Shoptet hlavičce VEDLE kódu Štefana Mazáně (SMupravy).
   Mazáňův kód nemažeme; tohle je jen naše nadstavba.
   Šablona = stock Shoptet (primární #050d48, konverzní #c80909, Poppins).
   Záloha zrcadla Mazáně: git tag `mazan-mirror-v2`.
   POZOR: každá změna = git push + bump ?v v Shoptet hlavičce.
   ============================================================= */

:root {
  --so-navy: #101B4F;   /* akcentová tmavě modrá (nadpisy, cena, CTA) */
  --so-red:  #E5304C;   /* slevový badge */
  --so-line: #EDEFF4;   /* jemné dělící linky */
  --so-bord: #E3E6EE;   /* rámeček karty */
}

/* -------------------------------------------------------------
   Detail produktu: skrýt řádek hodnocení nad názvem produktu,
   dokud produkt nemá reálné hodnocení. Nehodnocený stav má jen
   .star-off; jakmile přijde recenze (.star-on / .star-half),
   se řádek sám zase zobrazí.
   ------------------------------------------------------------- */
.type-detail .stars-wrapper:not(:has(.star-on, .star-half)) {
  display: none;
}

/* -------------------------------------------------------------
   Detail produktu → vzhled „1a Pročištěná klasika" (Claude Design).
   Reskin pravého informačního sloupce do karty. Cílový produkt,
   ze kterého maketa vychází: Ulysses Ahuli.
   Doplňkové prvky (badge −%, trust ikony) vkládá script.js.
   ------------------------------------------------------------- */

/* Karta kolem info sloupce */
/* velký rámeček kolem detailového boxu ODSTRANĚN (Petr chce zkusit bez něj;
   snadný rollback = vrátit border/radius/padding/background). */
.type-detail .p-detail-inner .p-data-wrapper {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.type-detail .p-detail-inner-header { margin-bottom: 14px; }
.type-detail h1 {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--so-navy);
  margin: 0;
}

/* Cena + velikosti VŽDY pod sebou (varianta 1c): cena na svém řádku, pak
   velikosti → dostupnost → košík přes CELOU šířku. Šablona `.p-to-cart-block`
   je dává vedle sebe (flex-wrap) → u textilu / posledních 1–2 velikostí se
   blok vešel vedle ceny → rozhozený layout (varianty 1/1b). Sloupec to sjednotí. */
.type-detail .p-to-cart-block { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; }
.type-detail .p-to-cart-block .p-final-price-wrapper { width: 100% !important; float: none !important; }
.type-detail .p-to-cart-block .p-add-to-cart-wrapper { width: 100% !important; margin-top: 4px !important; }

/* Cena: skrýt „bez DPH", zvýraznit finální cenu. LEGISLATIVA (Omnibus):
   referenční cena je DMOC výrobce — NIKDY nepřeškrtávat (přeškrtnutí
   implikuje předchozí cenu e-shopu). (Oddělovač nad cenou nepřidáváme —
   stock šablona už má linku nad meta řádkem „Zvolte variantu…".) */
.type-detail .p-final-price-wrapper { margin: 8px 0 4px; }
.type-detail .p-final-price-wrapper .price-additional { display: none !important; }
.type-detail strong.price-final,
.type-detail .price-final .price-final-holder {
  font-size: 34px !important;
  font-weight: 700;
  color: var(--so-navy);
  line-height: 1.1;
}
.type-detail .price-standard,
.type-detail .price-standard * {
  font-size: 15px;
  color: #6E7488;
  /* POZOR: šablona škrtá až VNITŘNÍ bezejmenný <span> — pravidlo musí
     dopadnout i na potomky, samotný .price-standard nestačí */
  text-decoration: none !important;
}

/* Košík: BARVU řídí Editor vzhledu (konverzní barva, od 12.7. #F5A623) —
   tady jen tvar/typografie. Tmavý text řeší dávka 03 na konci souboru. */
.type-detail .add-to-cart-button {
  border-radius: 4px !important;
  font-weight: 600;
  letter-spacing: .5px;
  min-height: 48px;
}

/* 7a: box množství (+/−) vlevo od košíku — zaoblený + jemný rámeček (dle návrhu) */
.type-detail .add-to-cart .quantity {
  border: 1px solid #D6DAE6 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.type-detail .add-to-cart .quantity input,
.type-detail .add-to-cart .quantity label {
  border-color: #EDEFF4 !important;
}
.type-detail .add-to-cart .quantity .increase,
.type-detail .add-to-cart .quantity .decrease { border: none !important; color: #8A8FA3 !important; }

/* Dlaždice velikostí (Mazáňův radio-picker .master-radio-wrapper) */
.type-detail .choose-parameters-wrap label {
  border: 1px solid #D6DAE6 !important;
  border-radius: 4px !important;
  min-width: 56px;
  justify-content: center;
  font-weight: 500;
}
.type-detail .choose-parameters-wrap label.active {
  border: 2px solid var(--so-navy) !important;
  background: #F3F6FC !important;
  color: var(--so-navy) !important;
}

/* Trust (7a): Doprava | Vrácení na JEDNOM řádku (2 sloupce) */
.type-detail .so-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 12px;
  color: #555;
  border-top: 1px solid var(--so-line);
  padding-top: 14px;
  margin: 16px 0 0;
}
.type-detail .so-trust > div { display: flex; align-items: center; gap: 8px; }
.type-detail .so-trust svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Slevový badge −% (vkládá script.js za .price-standard) */
.type-detail .so-badge {
  background: var(--so-red);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  /* CLS rezerva (D1): badge nesmí zvětšit řádkový box škrtnuté ceny —
     výška 12px + 2×3px = 18px se vejde do 24px řádku níže → vložení JS
     badge neposune obsah pod ním (jen rozšíří řádek doprava). */
  line-height: 1;
  max-height: 20px;
}
/* řádek škrtnuté ceny má PEVNOU výšku, s badgem i bez něj */
.type-detail .p-final-price-wrapper .price-standard { line-height: 24px !important; display: inline-block; }

/* Skrýt doplňkový kontakt box (.contact-specialist, hasekakip — Petr ho
   vypíná, nahrazen naším .so-contact) a share odkazy Tisk/Zeptat se/Sdílet. */
.type-detail .contact-specialist { display: none !important; }
.type-detail .p-param-block .link-icons { display: none !important; }

/* 7a: řádek CENA (vlevo) + DOSTUPNOST (vpravo) */
.type-detail .so-pricerow {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
/* cena jen na šířku obsahu (přebít 1c pravidlo `.p-to-cart-block .p-final-price-wrapper{width:100%}`) */
.type-detail .so-pricerow .p-final-price-wrapper { width: auto !important; flex: 0 1 auto !important; margin: 0 !important; }
.type-detail .so-avail {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; padding-top: 6px; align-items: flex-start;
}
.type-detail .so-avail-line { display: flex; align-items: center; gap: 7px; color: #1FA463; font-weight: 600; }
.type-detail .so-avail-dot { width: 7px; height: 7px; border-radius: 50%; background: #1FA463; flex-shrink: 0; }
.type-detail .so-avail--out .so-avail-line { color: #8A8FA3; }
.type-detail .so-avail--out .so-avail-dot { background: #C4C8D4; }
.type-detail .so-avail .so-avail-delivery { font-size: 12px; color: #8A8FA3; padding-left: 14px; }
.type-detail .so-avail .so-avail-ship { font-size: 12px; font-weight: 600; color: #1E88E5 !important; padding-left: 14px; }
/* původní zdroj dostupnosti („Skladem – odesíláme ihned") u ceny/nahoře se
   DUPLIKUJE s naším so-avail → vizuálně skrýt. CSS `:has()` (ne JS třída, kterou
   Shoptet při překreslení varianty smázne). NENÍ display:none — zůstává čitelný
   pro JS zrcadlení (offsetParent≠null). V bloku zůstane jen Kód + Značka. */
.type-detail .so-src-hidden,
.type-detail .p-basic-info-block .block:has(.availability-label) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  padding: 0 !important; margin: -1px !important; pointer-events: none !important;
}

/* 7a: BOX HODNOCENÍ (5★ + dynamický text z reálných recenzí) */
.type-detail .so-rating {
  background: #F5F6F9; border-radius: 6px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; margin-top: 14px;
}
.type-detail .so-rating-head { display: flex; align-items: center; justify-content: space-between; }
.type-detail .so-rating-score { display: flex; align-items: center; gap: 8px; }
.type-detail .so-rating-stars { color: #F5A623; font-size: 17px; letter-spacing: 1.5px; line-height: 1; }
.type-detail .so-rating-avg { font-size: 14px; font-weight: 700; color: var(--so-navy); }
.type-detail .so-rating-verified { font-size: 12px; font-weight: 700; color: var(--so-navy); }
.type-detail .so-rating-quote { font-size: 12px; line-height: 1.6; color: #444; font-style: italic; }
.type-detail .so-rating-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.type-detail .so-rating-author { font-size: 11px; color: #8A8FA3; }
.type-detail .so-rating-all { font-size: 11px; font-weight: 600; color: #1E88E5 !important; white-space: nowrap; }

/* 7a: „Přidat k oblíbeným" jako jemný odkaz POD kontaktem */
.type-detail .so-fav-under { margin-top: 8px; padding-left: 4px; font-size: 12px; }
.type-detail .so-fav-under, .type-detail .so-fav-under a, .type-detail .so-fav-under span { color: #8A8FA3 !important; font-size: 12px !important; }

/* Náš kontakt box (1a) s reálnou fotkou z CDN */
.type-detail .so-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F5F6F9;
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 16px;
}
.type-detail .so-contact-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.type-detail .so-contact-name { font-size: 13px; font-weight: 600; color: var(--so-navy); }
.type-detail .so-contact-lines { font-size: 13px; color: #8A8FA3; margin-top: 2px; }
.type-detail .so-contact-lines a { color: #1E88E5; }

/* =============================================================
   GLOBÁLNÍ SEKCE (všechny stránky) → Claude Design „Produktová
   stránka": Hodnocení obchodu, Instagram, patička. Záměrně BEZ
   `.type-detail` scope (jsou site-wide).
   ============================================================= */

/* ----- Hodnocení obchodu -----
   Karty + typografie NEJDOU z našeho CSS: doplněk Dominika Martiniho
   vyhrává specifitou (ID selektory + !important v cross-origin/hlavičce),
   přebít lze jen INLINE → řeší script.js (styleShopRating). Tady jen
   tlačítko „ZOBRAZIT VÍCE" (to jde, když náš selektor nese #hodnoceniobchodu).
   POZOR: `#hodnoceniobchodu .shop-stat-all a` (Dominik Martini) je ID
   selektor — náš MUSÍ taky obsahovat #hodnoceniobchodu, jinak i s !important prohraje. */
#hodnoceniobchodu .shop-stat-all a.btn.btn-conversion {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid #D6DAE6 !important;
  color: var(--so-navy) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
#hodnoceniobchodu .shop-stat-all a.btn.btn-conversion:hover {
  border-color: var(--so-navy) !important;
  background-color: #F3F6FC !important;
}
/* hvězdičky (glyf v .star-on::before) tmavě žluté dle návrhu.
   Nadpis „Hodnocení obchodu" na navy řeší script.js (inline, fortress). */
.star-on, .star-on::before { color: #F5A623 !important; }

/* ===== HLAVIČKA — hlavní menu dle návrhu (JEN DESKTOP ≥992px) =====
   Návrh: položky 14px/500 bílé na navy liště, Výprodej/aktivní žlutý akcent
   #FFD400/600, hover žlutý. Logo a pravé ikony ZÁMĚRNĚ nesaháme.
   POZOR: mobilní menu (≤991px, `.navigation-in`) je BÍLÝ drawer → bílý text by
   ZMIZEL. Proto celý restyle scope `min-width:992px`; ≤991px = výchozí tmavý text. */
@media (min-width: 992px) {
  .navigation-wrapper .navigation-in .menu-level-1 > li > a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
  }
  .navigation-wrapper .navigation-in .menu-level-1 > li > a:hover,
  .navigation-wrapper .navigation-in .menu-level-1 > li:hover > a {
    color: #FFD400 !important;
  }
  /* Výprodej + aktivní sekce = žlutý akcent */
  .navigation-wrapper .navigation-in .menu-level-1 > li.menu-item-1223 > a,
  .navigation-wrapper .navigation-in .menu-level-1 > li > a[href*="vyprodej"],
  .navigation-wrapper .navigation-in .menu-level-1 > li.active > a,
  .navigation-wrapper .navigation-in .menu-level-1 > li.selected > a,
  .navigation-wrapper .navigation-in .menu-level-1 > li[class*="active"] > a {
    color: #FFD400 !important;
    font-weight: 600 !important;
  }
  /* rozbalené podkategorie STEJNĚ velké jako nadpis (14px/400); šablona má vyšší
     specifitu → nutno .menu-level-1 v řetězci (0,4,1 přebije). */
  .navigation-wrapper .navigation-in .menu-level-1 .menu-level-2 a,
  .navigation-wrapper .navigation-in .menu-level-1 .menu-level-3 a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #fff !important;
  }
  .navigation-wrapper .navigation-in .menu-level-1 .menu-level-2 a:hover,
  .navigation-wrapper .navigation-in .menu-level-1 .menu-level-3 a:hover {
    color: #FFD400 !important;
  }
}

/* ===== USP PÁS „Výhody obchodu" (dklab Banplus Ikony) dle návrhu Produktová stránka =====
   Světle šedý pás, 4 sloupce, ikona v BÍLÉM KOLEČKU (současné ikony PONECHÁNY),
   titulek 13px/700 CAPS navy, podtitulek 12px šedý. Ikony byly lazy + šířka 0px →
   nikdy se nenačítaly; dáním velikosti (+ JS eager) se načtou. */
.dklabBanplusIkony.grid_4 {
  background: #F5F6F9 !important;
  border-radius: 12px !important;
  padding: 40px 32px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 32px !important;
  /* rodič `.content.wide` je plná šířka (2545px) → margin auto VYCENTRUJE pás
     (byl `0` → přilepený vlevo). max-width sladí s vycentrovaným obsahem pod ním. */
  max-width: 1418px !important;
  margin: 32px auto !important;
}
/* doplněk má clearfix ::before/::after (content:" ") → jako flex/grid položky
   rozhazovaly řádek. Vypnout. */
.dklabBanplusIkony.grid_4::before,
.dklabBanplusIkony.grid_4::after { content: none !important; display: none !important; }
/* položky = 4 STEJNĚ ŠIROKÉ sloupce; doplněk je floatuje + margin → vynulovat */
.dklabBanplusIkony.grid_4 > .dklabBanplusIkona {
  flex: 1 1 0 !important; min-width: 0 !important; float: none !important; margin: 0 !important;
}
.dklabBanplusIkona {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; text-align: center !important;
  gap: 10px !important; padding: 0 !important; float: none !important; width: auto !important;
}
.dklabBanplusIkona br { display: none !important; }
/* span .dklabBanplusIkonaImg OBALUJE ikonu (img) → udělat z něj BÍLÉ KOLEČKO */
.dklabBanplusIkona .dklabBanplusIkonaImg {
  width: 56px !important; height: 56px !important; border-radius: 50% !important;
  background: #fff !important; display: flex !important; align-items: center !important;
  justify-content: center !important; margin: 0 auto !important; padding: 0 !important;
  box-shadow: 0 2px 8px rgba(16,27,79,0.06) !important; overflow: hidden !important;
}
.dklabBanplusIkona .dklabBanplusIkonaImg img,
.dklabBanplusIkona img {
  width: 28px !important; height: 28px !important; object-fit: contain !important;
  background: none !important; padding: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; display: block !important; margin: 0 !important;
}
.dklabBanplusIkona strong {
  font-size: 13px !important; font-weight: 700 !important; color: var(--so-navy) !important;
  text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.3 !important;
}
.dklabBanplusIkona .dklabBanplusIkonaPop {
  font-size: 12px !important; color: #8A8FA3 !important; line-height: 1.6 !important; display: block !important;
}

/* ----- Instagram (dklab widget) → kontejner + 4 zaoblené fotky v řadě.
   padding MUSÍ být !important (jinak přebije šablona → nalepené na patičku). */
.overall-wrapper .container.grid4:has(.dklab_instagram_widget_box) {
  max-width: none !important;          /* PLNÁ šířka kontejneru (jako Hodnocení obchodu) */
  margin: 0 auto !important;
  padding: 8px 20px 72px !important;   /* horizontálně jako motiv (20px) → fotky po čtvrtinách přes celou šířku */
  box-sizing: border-box;
}
.overall-wrapper .container.grid4:has(.dklab_instagram_widget_box) > div {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;   /* stejný gap jako karty recenzí → IG fotky (1/4) stejně široké */
}
.dklab_instagram_widget_box {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 280px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.dklab_instagram_widget_box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Hodnocení obchodu: PLNÁ šířka kontejneru (jako původně) — Instagram pod ním
   se roztáhne na stejnou šířku po čtvrtinách. (Dřív omylem zúženo na 1240.) */
.shop-eval {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* ----- Patička (tmavě navy) ----- */
footer.footer { background: var(--so-navy) !important; color: #B9C0DC; }
/* nadpisy bílé; nadpisy sloupců 14px/700 (šablona je má 20px → potřebuje !important) */
footer.footer h1, footer.footer h2, footer.footer h4, footer.footer h5,
footer.footer .topic, footer.footer h4.topic span { color: #fff !important; }
/* nadpisy sloupců BÍLÉ vč. vnitřního <span> (jinak ho `footer span{#B9C0DC}`
   obarví na šedomodrou → nadpisy vypadají šedé místo bílé). */
footer.footer h3.pageElement__heading, footer.footer .custom-footer h3,
footer.footer h3.pageElement__heading *, footer.footer .custom-footer h3 * {
  color: #fff !important;
}
footer.footer h3.pageElement__heading, footer.footer .custom-footer h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}
/* text + odkazy */
footer.footer .newsletter-header p, footer.footer .contact-box,
footer.footer .news-item-widget, footer.footer li,
footer.footer p, footer.footer span, footer.footer div { color: #B9C0DC; }
footer.footer a { color: #B9C0DC; text-decoration: none; }
footer.footer a:hover { color: #fff; }
footer.footer .custom-footer__articles ul li a,
footer.footer .custom-footer ul li a { font-size: 14px !important; line-height: 2.0 !important; padding-left: 0 !important; }
/* odkazy zarovnané vlevo stejně jako nadpis (pryč šipka „›" a odsazení) */
footer.footer .custom-footer__articles ul, footer.footer .custom-footer ul {
  padding-left: 0 !important; margin-left: 0 !important; list-style: none !important;
}
footer.footer .custom-footer__articles li, footer.footer .custom-footer li {
  padding-left: 0 !important; margin-left: 0 !important; list-style: none !important;
  text-indent: 0 !important; background-image: none !important;
}
footer.footer .custom-footer__articles li::before, footer.footer .custom-footer li::before {
  content: none !important; display: none !important;
}
footer.footer .news-item-widget a { color: #FFD400; font-weight: 600; }
/* newsletter tlačítko + input (jemné zaoblení, žlutá) */
footer.footer .btn.btn-default, footer.footer .btn.btn-default * { color: var(--so-navy) !important; }
footer.footer .btn.btn-default {
  background: #FFD400 !important;
  border-color: #FFD400 !important;
  font-weight: 700;
}
footer.footer .subscribe-form button.btn.btn-default,
footer.footer .subscribe-form .btn.btn-default.btn-arrow { border-radius: 0 6px 6px 0 !important; }
footer.footer .btn.btn-default:hover { background: #FFDF40 !important; }
footer.footer input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
footer.footer .subscribe-form input[type],
footer.footer .subscribe-form fieldset input { border-radius: 6px 0 0 6px !important; }
footer.footer input::placeholder { color: #B9C0DC; }
/* copyright pruh (vč. „Vytvořil Shoptet" — jinak černý odkaz na navy) */
footer.footer .container.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
footer.footer .footer-bottom a.title,
footer.footer .footer-bottom a,
footer.footer div.footer-bottom * { color: #8A93BC !important; font-size: 12px !important; }

/* ----- Patička: dolad po zpětné vazbě ----- */
/* jednotné nadpisy sloupců — „Tabulky velikostí" je banner H4 (byl 18px) */
footer.footer .custom-footer__banner6 h4, footer.footer .banner h4, footer.footer .banner-wrapper h4,
footer.footer .custom-footer__banner6 h4 *, footer.footer .banner h4 *, footer.footer .banner-wrapper h4 * {
  color: #fff !important;
}
footer.footer .custom-footer__banner6 h4,
footer.footer .banner h4,
footer.footer .banner-wrapper h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}
/* newsletter: jemnější dělící linka + víc prostoru */
footer.footer .container.footer-newsletter {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 40px 20px !important;
}
/* titulek blíž k podtitulku, podtitulek 13px */
footer.footer .newsletter-header .topic,
footer.footer .newsletter-header h4.topic { margin-bottom: 4px !important; }
footer.footer .newsletter-header p { font-size: 14px !important; margin-top: 0 !important; }
/* sloupce: blíž k lince nahoře (28px) i menší mezera k copyright lince dole (20px) */
footer.footer .container.footer-rows { padding: 28px 20px 20px !important; }
/* consent „Vložením e-mailu": blíž k formuláři + podtržený odkaz */
footer.footer .subscribe-form .form-group { margin-top: 4px !important; }
footer.footer .subscribe-form .whole-width a,
footer.footer .subscribe-form label a { text-decoration: underline !important; }
/* blog: text pod nadpisem stejně velký jako odkazy v menu (14px), titulek 15px */
footer.footer .news-item-widget { font-size: 14px !important; }
footer.footer .newsItemWidget__head { font-size: 15px !important; }

/* prostor kolem sekce Hodnocení obchodu; dole méně (blíž k Instagramu) */
.overall-wrapper .container.row:has(.shop-stat-all) {
  padding-top: 28px !important;
  padding-bottom: 12px !important;
}

/* =============================================================
   KATEGORIE PRODUKTŮ → Claude Design „Kategorie.dc.html".
   Scope: .products-page / .category-title / .sidebar-left / .listSorting
   (jen stránka výpisu kategorie). Fontová konzistence: Poppins, navy #101B4F.
   ============================================================= */

/* titulek kategorie */
.category-title { color: var(--so-navy) !important; font-size: 28px !important; font-weight: 700 !important; }

/* produktové karty. Rámeček dáváme na VNITŘNÍ `.p` (ne na `.product`), aby
   padding buňky `.product` (~13px) vytvořil MEZERU mezi rámečky sousedních
   karet (jinak se rámečky na kraji buněk dotýkají). `.p` měl původní ostrý
   #DADADA rámeček → přepíšeme naším zaobleným. */
.products-page .product {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  position: relative !important;
}
.products-page .product .p {
  border: 1px solid var(--so-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  position: relative !important;
}
.products-page .product:hover .p { border-color: #C9CEDC !important; }
.products-page .product .p-in { padding: 16px !important; }
/* fotka se nesmí dotýkat horní hrany karty (štítek −% a srdíčko ji překrývaly) */
.products-page .product .p .image { margin-top: 14px !important; }
.products-page .product a.name, .products-page .product .name {
  color: var(--so-navy) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.products-page .product .price.price-final, .products-page .product .price-final {
  color: var(--so-navy) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.products-page .product .price-standard,
.products-page .product .price-standard * {
  color: #9AA0B0 !important;
  font-size: 13px !important;
  text-decoration: none !important; /* legislativa: DMOC neškrtat (i vnitřní span) */
}
.products-page .product .availability-label { color: #1FA463 !important; font-size: 12px !important; }
/* slevový badge (červený, zaoblený) */
.products-page .product .flag-action-percentage, .products-page .product .flag {
  background: var(--so-red) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
}
/* DETAIL tlačítko = obrysové navy */
.products-page .product .p-tools a, .products-page .product .p-tools .btn,
.products-page .product .p-bottom a, .products-page .product .p-bottom .btn,
.products-page .product .p-bottom button {
  border: 1px solid var(--so-navy) !important;
  color: var(--so-navy) !important;
  background: transparent !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

/* řazení = pilulky. POZOR: uvnitř <li> je <button> s vlastním OSTRÝM
   rámečkem → stylovat BUTTON (ne li), jinak dvojitý rámeček. Li reset. */
.listSorting__controls > li { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; list-style: none; }
.listSorting__controls button, .listSorting__controls li > a {
  border: none !important;
  border-radius: 18px !important;
  background: #F5F6F9 !important;
  color: var(--so-navy) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  box-shadow: none !important;
}
.listSorting__controls li.active button, .listSorting__controls li[aria-current] button,
.listSorting__controls button.active, .listSorting__controls button[aria-current="true"],
.listSorting__controls button[aria-pressed="true"], .listSorting__controls .listSorting__control--active,
.listSorting__controls button.is-active, .listSorting__controls button.selected {
  background: var(--so-navy) !important; color: #fff !important; font-weight: 600 !important;
}

/* sidebar: nadpisy navy */
.sidebar-left .navigation-title, .sidebar-left h3,
.sidebar-left .topic, .sidebar-left .p-heading { color: var(--so-navy) !important; font-weight: 700 !important; }

/* ----- Kategorie: dolad dle QA (subagent) ----- */
/* dostupnost: zelená #1FA463 12px + zelená tečka (třída je .availability, ne .availability-label) */
.products-page .product .availability {
  font-size: 12px !important; color: #1FA463 !important;
  display: flex !important; align-items: center; gap: 6px;
}
.products-page .product .availability::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #1FA463; flex-shrink: 0;
}
.products-page .product .availability span { color: #1FA463 !important; font-size: 12px !important; }
/* počet kusů „(N ks)" v NÁHLEDU kategorie/titulky PRYČ (stačí „Skladem – odesíláme
   ihned"; vejde se na 2 řádky, důležité na mobilu). Počet zůstává jen na detailu. */
.products-page .product .availability-amount { display: none !important; }

/* karty STEJNĚ VYSOKÉ → tlačítko (.p-tools) VŽDY dole. Bez toho měly karty
   s variantami (řádek velikostí) tlačítko níž než karty bez variant → nezarovnané.
   POZOR 1: height:100% LÁMALO stretch (fixovalo kartu na obsah) → height:auto +
   align-items:stretch na kontejneru. POZOR 2: .p-bottom občas obaluje obsah dalším
   <div> (tlačítko = .p-bottom > div > .p-tools) → i ten musí být filling flex-column,
   jinak margin-top:auto na tlačítku nedosáhne dolů. */
.products-page { align-items: stretch !important; align-content: flex-start !important; }
.products-page .product { display: flex !important; flex-direction: column !important; height: auto !important; align-self: stretch !important; }
.products-page .product .p { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
.products-page .product .p-in { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
.products-page .product .p-bottom { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
.products-page .product .p-bottom > div { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
.products-page .product .p-tools { margin-top: auto !important; flex: 0 0 auto !important; }

/* Cena na kartě: referenční cena (DMOC) je `.price-additional` v `.prices`
   (NE `.price-standard` — ta je jen ve skrytém flagu). LEGISLATIVA (Omnibus):
   zobrazit šedě BEZ přeškrtnutí — není to předchozí cena e-shopu. */
.products-page .product .prices .price-additional {
  display: inline-block !important;
  color: #9AA0B0 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
.products-page .product .prices .price-additional,
.products-page .product .prices .price-additional * {
  text-decoration: none !important; /* i vnitřní span šablony */
}

/* DETAIL: 13px + PLNÁ ŠÍŘKA, výška 40px (byl úzký 136px) */
.products-page .product .btn-primary {
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  width: 100% !important;
  height: 40px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* Do košíku na kartě: BARVA = šablonová proměnná --color-secondary (plní ji
   Editor vzhledu → konverzní barva, od 12.7. #F5A623) — zdroj pravdy zůstává
   admin. Explicitní background je NUTNÝ: naše obrysové pravidlo pro tlačítka
   karty (.p-bottom .btn) by jinak vyhrálo a tlačítko by bylo bez pozadí.
   Tmavý text řeší dávka 03 na konci souboru. */
.products-page .product .p-bottom .btn.btn-cart,
.products-page .product .p-bottom .btn.add-to-cart-button,
.products-page .product .btn.btn-cart, .products-page .product .btn.add-to-cart-button {
  background: var(--color-secondary, #F5A623) !important;
  border: 1px solid var(--color-secondary, #F5A623) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  width: 100% !important;
  height: 40px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* krátký popis „Země značky: …" na kartě = p.p-desc → skrýt (návrh ho nemá) */
.products-page .product .p-desc { display: none !important; }

/* ceny VEDLE SEBE na řádku, zarovnané VLEVO (byly block + center); final první */
.products-page .product .prices {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  text-align: left !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
}
.products-page .product .prices .price.price-final, .products-page .product .prices .price-final { order: 1; }
.products-page .product .prices .price-additional { order: 2; }

/* velikosti: BEZ rámečku, zarovnané VLEVO */
.products-page .product .widget-parameter-wrapper,
.products-page .product .widget-parameter-list,
.products-page .product .widget-parameter-value,
.products-page .product .widget-parameter-value a {
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  text-align: left !important;
}
.products-page .product .widget-parameter-list { justify-content: flex-start !important; padding-left: 0 !important; margin-left: 0 !important; }

/* slevový štítek: odsadit DOVNITŘ (byl v rohu -1px jako původní stužka) +
   skrýt duplicitní cenový flag (.flags-extra / .flag-discount). */
.products-page .product .flags-default { top: 12px !important; left: 12px !important; }
.products-page .product .flags-extra, .products-page .product .flag-discount { display: none !important; }

/* řazení: mezera mezi pilulkami a linkou pod nimi + aktivní pilulka navy (JS) */
.listSorting__controls { padding-bottom: 14px !important; margin-bottom: 0 !important; }
.listSorting { margin-bottom: 16px !important; }
.listSorting__controls button.so-sort-active, .listSorting__controls .so-sort-active button,
.listSorting__control.so-sort-active {
  background: var(--so-navy) !important; color: #fff !important; font-weight: 600 !important;
}

/* ----- Kategorie: dolad round 5 (vizuální nálezy Petra) ----- */
/* velikosti VLEVO — wrapper měl justify-content:center (proto na středu) */
.products-page .product .widget-parameter-wrapper { justify-content: flex-start !important; }

/* vertikální rytmus v kartě: stejné mezery dostupnost → cena → velikost → DETAIL
   (byly nalepené, 0 margin). .p-bottom obsahuje cenu+velikost+DETAIL. */
.products-page .product .p-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 10px !important;
  /* .p-bottom mělo padding-left 10px → cena/velikosti/DETAIL byly odsazené
     o 10px vpravo oproti dostupnosti/názvu. Zarovnat vše VLEVO na hranu obsahu. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* mezery mezi kartami řeší padding buňky `.product` + rámeček na `.p` (viz výše);
   `.products` a `.products-page` je STEJNÝ element (ne descendant), gap nešel. */

/* tlačítko „Nahoru" (goToTop) = stejný styl jako „Načíst další" (obrysové navy) */
.goToTop__button {
  border: 1px solid var(--so-navy) !important;
  color: var(--so-navy) !important;
  background: transparent !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 12px 28px !important;
}
.goToTop__button:hover { background: var(--so-navy) !important; color: #fff !important; }

/* VŠECHNY štítky zaoblené (žádný ostrý/špičatý ocásek z původní šablony) */
.products-page .product .flag {
  border-radius: 5px !important;
  overflow: hidden !important;
}
.products-page .product .flag::before, .products-page .product .flag::after { display: none !important; }

/* „Načíst další" + počet položek */
.loadMore__button, .loadMore__button.loadMore {
  border: 1px solid var(--so-navy) !important;
  color: var(--so-navy) !important;
  background: transparent !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 12px 28px !important;
}
.loadMore__button:hover { background: var(--so-navy) !important; color: #fff !important; }
.itemsTotal { color: #8A8FA3 !important; font-size: 13px !important; }

/* sidebar filtry (Cena slider / Značky / Velikost) → navy akcent */
/* nadpisy filtrů byly #1F1F1F (skoro černé) → navy jako „Kategorie" */
.sidebar-left h4, .sidebar-left .slider-wrapper h4,
.sidebar-left .parameter-name, .sidebar-left .filter-name, .sidebar-left .navigation-title { color: var(--so-navy) !important; }
/* vybraný rozsah cenového slideru byl šedý #DADADA → navy */
.sidebar-left .ui-slider-range, #slider .ui-slider-range { background: var(--so-navy) !important; }
.sidebar-left .ui-slider-handle, .sidebar-left .slider-handle { background: #fff !important; border: 2px solid var(--so-navy) !important; }
.sidebar-left input[type="checkbox"]:checked, .sidebar-left .checkbox input:checked { accent-color: var(--so-navy) !important; }
/* „Výprodej" v sidebaru červeně (dle návrhu) */
.sidebar-left a[href*="vyprodej"], .sidebar-left a[href*="Vyprodej"] { color: var(--so-red) !important; font-weight: 600 !important; }

/* řazení: label „Řadit:" před pilulkami */
.listSorting__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.listSorting__controls::before {
  content: 'Řadit:'; font-size: 13px; color: #8A8FA3; font-weight: 400; margin-right: 2px; align-self: center;
}

/* srdíčko: bílé kolečko + stín, nad obrázkem vpravo nahoře */
.products-page .product { position: relative !important; }
.products-page .product .dkLabFavouriteProductDiv {
  position: absolute !important; top: 10px; right: 10px; z-index: 3;
  width: 34px !important; height: 34px !important; background: #fff !important;
  border-radius: 50% !important; box-shadow: 0 1px 4px rgba(16, 27, 79, 0.12) !important;
  display: flex !important; align-items: center; justify-content: center;
}
.products-page .product .dkLabFavouriteProductDiv,
.products-page .product .dkLabFavouriteProductDiv span,
.products-page .product .dkLabFavouriteProductDiv span::before { color: #E91E63 !important; }

/* velikosti: menší šedé, zarovnané vlevo (byly 14px černé vycentrované) */
.products-page .product .widget-parameter-wrapper,
.products-page .product .widget-parameter-value,
.products-page .product .widget-parameter-value a {
  font-size: 12px !important; color: #8A8FA3 !important; text-align: left !important; font-weight: 400 !important;
}

/* podkategorie: 8 orámovaných karet vedle sebe; obrázek jako obdélník
   (BEZ kruhového ořezu — kruh usekával boty), popisek navy. */
.subcategories.with-image {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 12px !important;
}
.subcategories.with-image li, .subcategories.with-image > li {
  width: auto !important; max-width: none !important; flex: none !important;
  padding: 0 !important; margin: 0 !important; list-style: none !important; float: none !important;
}
.subcategories.with-image a {
  display: flex !important; flex-direction: column; align-items: center; gap: 8px;
  border: 1px solid #EDEFF4 !important; border-radius: 12px !important;
  padding: 12px 8px !important; text-align: center !important; background: #fff !important; height: 100%;
}
.subcategories.with-image a:hover { border-color: var(--so-navy) !important; }
.subcategories.with-image .image {
  width: 100% !important; height: 64px !important; border-radius: 8px !important;
  overflow: hidden !important; padding: 0 !important; margin: 0 !important;
  background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.subcategories.with-image .image img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; }
.subcategories.with-image .text { font-size: 12px !important; font-weight: 500 !important; color: var(--so-navy) !important; line-height: 1.3; }

/* =============================================================
   SIDEBAR FILTRY — dolad dle návrhu (jemnější fonty, navy slider,
   VELIKOSTI jako chipy). Scope .sidebar-left.
   ============================================================= */

/* nadpisy filtrů (Kategorie/Cena/Značky/Velikost) 15px navy (byly 18px) */
.sidebar-left h3, .sidebar-left h4,
.sidebar-left .filter-section h4, .sidebar-left .parameter-name,
.sidebar-left .navigation-title { font-size: 15px !important; font-weight: 700 !important; color: var(--so-navy) !important; }

/* cenový posuvník: tenký zaoblený track + navy vybraný rozsah + bílá kolečka navy */
.sidebar-left .slider-content .ui-slider,
.sidebar-left .param-price-filter.ui-slider,
.sidebar-left .ui-slider {
  height: 3px !important; background: #E7EAF2 !important; border: none !important; border-radius: 3px !important;
}
.sidebar-left .ui-slider-range { background: var(--so-navy) !important; border: none !important; border-radius: 3px !important; }
.sidebar-left .ui-slider-handle {
  width: 16px !important; height: 16px !important; background: #fff !important;
  border: 2px solid var(--so-navy) !important; border-radius: 50% !important; top: -5px !important; margin-left: -8px !important;
}
.sidebar-left .slider-header, .sidebar-left .slider-header .from, .sidebar-left .slider-header .to { font-size: 12px !important; color: #8A8FA3 !important; }

/* značky: jméno 13px tmavé, počet šedý drobný */
.sidebar-left [class*="filter-section-manuf"] .filter-label { font-size: 13px !important; color: #333 !important; font-weight: 400 !important; }
.sidebar-left .filter-count { color: #B0B5C4 !important; font-size: 12px !important; font-weight: 400 !important; }

/* ===== VELIKOSTI jako CHIPY (orámované boxy, VÍCE VEDLE SEBE) ===== */
/* sekce = .filter-section-parametric. Kontejner fieldset je block a každý chip
   ve vlastním block <div> → chipy pod sebou. Fieldsetu dáme flex-wrap a vnitřní
   <div>y zúžíme na obsah → chipy se zabalí vedle sebe. */
.sidebar-left [class*="filter-section-param"] fieldset {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important;
  gap: 8px !important; padding: 0 !important; margin: 0 !important; border: none !important;
}
.sidebar-left [class*="filter-section-param"] fieldset > div,
.sidebar-left [class*="filter-section-param"] fieldset > label {
  width: 100% !important; margin: 0 !important; display: block !important;
}
/* native checkbox input + custom ::before/::after checkbox v chipu PRYČ (návrh: čistý box) */
.sidebar-left [class*="filter-section-param"] input[type="checkbox"] { display: none !important; }
.sidebar-left [class*="filter-section-param"] .filter-label::before,
.sidebar-left [class*="filter-section-param"] .filter-label::after { display: none !important; content: none !important; }
.sidebar-left [class*="filter-section-param"] .filter-label {
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; min-width: 0 !important; padding: 7px 6px !important; margin: 0 !important;
  border: 1px solid #D6DAE6 !important; border-radius: 6px !important;
  font-size: 13px !important; font-weight: 500 !important; color: #333 !important;
  text-align: center !important; box-sizing: border-box; cursor: pointer;
  white-space: nowrap; line-height: 1.1;
}
.sidebar-left [class*="filter-section-param"] .filter-label:hover { border-color: var(--so-navy) !important; }
/* počet u velikostí skrýt (návrh chipy nemají počet) */
.sidebar-left [class*="filter-section-param"] .filter-count { display: none !important; }
/* zvolená velikost = navy rámeček + světlé pozadí (JS přidá .so-chip-active,
   +fallback přes input:checked sourozence, pokud input předchází label) */
.sidebar-left [class*="filter-section-param"] input:checked + .filter-label,
.sidebar-left [class*="filter-section-param"] .filter-label.so-chip-active,
.sidebar-left [class*="filter-section-param"] .filter-label.active,
.sidebar-left [class*="filter-section-param"] .filter-label.checked {
  border: 2px solid var(--so-navy) !important; background: #F3F6FC !important;
  color: var(--so-navy) !important; font-weight: 600 !important; padding: 6px 5px !important;
}

/* ===== ZAOBLENÉ CHECKBOXY: Značky + Na skladě (custom checkbox = label::before) ===== */
.sidebar-left [class*="filter-section-manuf"] .filter-label::before,
.sidebar-left [class*="filter-section-bool"] .filter-label::before,
.sidebar-left [class*="filter-section-store"] .filter-label::before {
  border-radius: 4px !important; border: 2px solid #D6DAE6 !important;
  width: 16px !important; height: 16px !important; background: #fff !important;
  box-sizing: border-box !important;
}
.sidebar-left [class*="filter-section-manuf"] .filter-label.active::before,
.sidebar-left [class*="filter-section-bool"] .filter-label.active::before,
.sidebar-left [class*="filter-section-store"] .filter-label.active::before,
.sidebar-left [class*="filter-section-manuf"] input:checked + .filter-label::before,
.sidebar-left [class*="filter-section-bool"] input:checked + .filter-label::before,
.sidebar-left [class*="filter-section-store"] input:checked + .filter-label::before {
  background: var(--so-navy) !important; border-color: var(--so-navy) !important;
}
/* bílá „fajfka" v zatrženém boxu */
.sidebar-left [class*="filter-section-manuf"] .filter-label.active::after,
.sidebar-left [class*="filter-section-bool"] .filter-label.active::after,
.sidebar-left [class*="filter-section-store"] .filter-label.active::after,
.sidebar-left [class*="filter-section-manuf"] input:checked + .filter-label::after,
.sidebar-left [class*="filter-section-bool"] input:checked + .filter-label::after,
.sidebar-left [class*="filter-section-store"] input:checked + .filter-label::after {
  content: '' !important; display: block !important; position: absolute;
  left: 6px; top: 3px; width: 4px; height: 8px; background: transparent !important;
  border: solid #fff !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg);
}
.sidebar-left [class*="filter-section-manuf"] .filter-label,
.sidebar-left [class*="filter-section-bool"] .filter-label,
.sidebar-left [class*="filter-section-store"] .filter-label { position: relative; }

/* ===== CENOVÝ POSUVNÍK: čisté kolečko (žádná široká tečka) ===== */
.sidebar-left .ui-slider-handle {
  width: 14px !important; height: 14px !important; background: #fff !important;
  background-image: none !important; border: 2px solid var(--so-navy) !important;
  border-radius: 50% !important; box-shadow: 0 1px 3px rgba(16,27,79,0.25) !important;
  top: -5px !important; margin-left: -7px !important;
}
.sidebar-left .ui-slider-handle::before,
.sidebar-left .ui-slider-handle::after { display: none !important; content: none !important; }

/* ===== STROM KATEGORIÍ: jemnější font + řádkování ===== */
.sidebar-left .categories a, .sidebar-left .navigation-categories a,
.sidebar-left .categories li > a, .sidebar-left .navigation-tree a,
.sidebar-left nav a, .sidebar-left .menu-level a {
  font-size: 13px !important; font-weight: 400 !important; line-height: 1.7 !important;
  color: #3A4256 !important; letter-spacing: 0.1px;
}
.sidebar-left .categories a:hover, .sidebar-left nav a:hover { color: var(--so-navy) !important; }

/* „Zobrazit všechny značky" toggle (JS) */
.sidebar-left .so-brands-toggle {
  display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 500;
  color: var(--so-navy); cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0;
}
.sidebar-left .so-brands-toggle:hover { color: var(--so-red); }
.sidebar-left [class*="filter-section-manuf"] .so-brand-hidden { display: none !important; }

/* tlačítko „Filtrovat" je jen mobilní (JS ho na desktopu nevytváří — pojistka) */
.so-filter-toggle { display: none; }

/* ==================== MOBIL (≤991px) ==================== */
@media (max-width: 991px) {
  /* --- USP pás „Výhody obchodu": titulní strana PRYČ, detail KOMPAKTNÍ ---
     POZOR specifita: desktop pravidla mají (0,3,0)+ → mobilní musí být SILNĚJŠÍ,
     jinak prohrají i uvnitř @media. Popisek má třídu dklabBanplusIkonaPopis
     (NE ...Pop!) → [class*=]. */
  .type-index .dklabBanplusIkony.grid_4 { display: none !important; }
  .type-detail .dklabBanplusIkony.grid_4 {
    flex-wrap: wrap !important; padding: 16px !important; gap: 14px 10px !important; margin: 16px auto !important;
  }
  .type-detail .dklabBanplusIkony.grid_4 > .dklabBanplusIkona { flex: 1 1 40% !important; }
  .type-detail .dklabBanplusIkony.grid_4 .dklabBanplusIkonaImg { width: 40px !important; height: 40px !important; }
  .type-detail .dklabBanplusIkony.grid_4 .dklabBanplusIkonaImg img { width: 20px !important; height: 20px !important; }
  .type-detail .dklabBanplusIkony.grid_4 strong { font-size: 12px !important; }
  .type-detail .dklabBanplusIkony.grid_4 [class*="dklabBanplusIkonaPop"] { display: none !important; }  /* jen ikona + titulek */

  /* --- DETAIL: tabulky (tabulka velikostí, parametry) roztahovaly layout
     viewport na 485px → celá stránka odzoomovaná/posuvná do boku. Tabulka
     nově scrolluje UVNITŘ (klasický responsive-table trik). --- */
  .type-detail table {
    display: block !important; overflow-x: auto !important; max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Druhý viník viewportu 485: AI-generovaný POPIS produktu (inline styly —
     fixní šířky/flex-basis). Neutralizace min-content šířek + pojistka clipem;
     tabulka uvnitř dál scrolluje sama (overflow-x:auto výše). */
  .basic-description { overflow-x: hidden !important; }
  .basic-description * { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  .basic-description [style*="display: flex"], .basic-description [style*="display:flex"] { flex-wrap: wrap !important; }
  .basic-description img { height: auto !important; }

  /* --- Instagram: menší mezera k patičce + fotky PŘESNĚ 2×2 (dklab má vlastní
     šířky se stejnou specifitou → přebít silnějším selektorem) --- */
  .overall-wrapper .container.grid4:has(.dklab_instagram_widget_box) { padding-bottom: 24px !important; }
  .overall-wrapper .container.grid4:has(.dklab_instagram_widget_box) > div { flex-wrap: wrap !important; gap: 12px !important; }
  .overall-wrapper .dklab_instagram_widget_box {
    flex: 0 0 calc(50% - 6px) !important; width: calc(50% - 6px) !important; max-width: calc(50% - 6px) !important;
    height: auto !important; aspect-ratio: 1 / 1 !important;
  }

  /* --- Patička: STEJNÉ mezery mezi sekcemi (Informace pro vás / Kontakt /
     Tabulky velikostí / Blog). Vnitřní spodní okraje (ul 14px, banner 40px,
     news 10px, contact 0…) byly RŮZNÉ → vynulovat vše a mezeru tvoří JEN
     jednotný padding-bottom sekce. --- */
  footer.footer .footer-rows { padding: 24px 20px 12px !important; }
  footer.footer .pageElement__heading, footer.footer .custom-footer h3,
  footer.footer .custom-footer .banner h4 { margin: 0 0 8px !important; }
  footer.footer .custom-footer [class*="custom-footer__"] {
    padding: 0 0 26px !important; margin: 0 !important;
  }
  footer.footer .custom-footer [class*="custom-footer__"] > * { margin-bottom: 0 !important; }
  footer.footer .custom-footer [class*="custom-footer__"] > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  footer.footer .custom-footer ul { margin-bottom: 0 !important; }
  footer.footer .custom-footer ul li { padding: 3px 0 !important; margin: 0 !important; }
  footer.footer .custom-footer .banner { margin-bottom: 0 !important; }
  footer.footer .custom-footer .news-item-widget { margin-bottom: 0 !important; }
  footer.footer .custom-footer .contact-box { margin-bottom: 0 !important; }
  /* .banner (220px při obsahu 101px) a .contact-box (100 vs 68) mají PEVNOU
     výšku → prázdný prostor pod obsahem = nestejné mezery → height auto */
  footer.footer .custom-footer .banner,
  footer.footer .custom-footer .banner-wrapper,
  footer.footer .custom-footer .contact-box {
    height: auto !important; min-height: 0 !important; max-height: none !important;
  }
  /* .banner-wrapper má margin-top 20px → nadpis „Tabulky velikostí" seděl
     hlouběji než ostatní nadpisy */
  footer.footer .custom-footer .banner-wrapper { margin-top: 0 !important; }
  /* odkazy v banneru nemají 3px li padding jako ostatní sekce → dorovnat 4px,
     ať je mezera pod „Tabulky velikostí" identická (33px všude) */
  footer.footer .custom-footer .custom-footer__banner6 { padding-bottom: 30px !important; }

  /* --- Řazení (Řadit: Nejlevnější/Nejdražší/…) na mobilu skrýt — zabíralo
     2 řádky pilulek nad filtrem/produkty --- */
  .listSorting { display: none !important; }

  /* --- DETAIL: velká mezera mezi názvem a cenou (58px prázdných skořápek):
     header mb 14 + prázdný .p-variants-block (20px čistý padding) +
     .shkDiscountPromoExtension (14px padding) + padding cenového bloku --- */
  .type-detail .p-detail-inner-header { margin-bottom: 4px !important; }
  .type-detail .p-variants-block { padding-top: 0 !important; padding-bottom: 0 !important; }
  .type-detail .shkDiscountPromoExtension { padding-top: 0 !important; }
  .type-detail .p-to-cart-block { padding-top: 0 !important; }

  /* --- KARTY: fotka byla nalepená na vršek (překrývaly ji slevový štítek
     a srdíčko) + velká mezera pod fotkou. Fotka níž + vycentrovaná, menší
     srdíčko, menší horní padding obsahu. --- */
  .products-page .product .p .image {
    margin-top: 16px !important; height: 126px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    overflow: hidden !important;
  }
  /* img ABSOLUTNĚ vyplní box + object-fit:contain = celá fotka, nikdy ořez.
     (Šablona img posouvala o -9px přes margin/transform → ořez nahoře;
     absolutní pozice tyhle posuny ignoruje.) */
  .products-page .product .p .image img {
    position: absolute !important; top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; transform: none !important;
    object-fit: contain !important; object-position: center !important;
  }
  .products-page .product .p-in { padding: 6px 12px 12px !important; }
  .products-page .product .dkLabFavouriteProductDiv {
    width: 28px !important; height: 28px !important;
  }
  .products-page .product .dkLabFavouriteProductDiv i,
  .products-page .product .dkLabFavouriteProductDiv span,
  .products-page .product .dkLabFavouriteProductDiv svg {
    font-size: 14px !important; line-height: 28px !important; max-width: 16px;
  }

  /* --- Obrázkové podkategorie: 4 vedle sebe, obrázky STEJNĚ velké ---
     Desktopové repeat(8,1fr) na mobilu přetékalo (min-content šířky → scroll
     do boku, scrollW 670 vs 350). minmax(0,1fr) vypne min-content floor. */
  .subcategories.with-image {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .subcategories.with-image a { min-width: 0 !important; padding: 8px 4px !important; }
  .subcategories.with-image .image {
    height: 52px !important; width: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    overflow: hidden !important;
  }
  .subcategories.with-image .image img {
    max-height: 52px !important; max-width: 100% !important; width: auto !important; height: auto !important;
    object-fit: contain !important;
  }
  .subcategories.with-image .text { font-size: 11px !important; line-height: 1.25 !important; word-break: break-word; }

  /* --- Instagram: dklab na mobilu SKRÝVÁ 4. box (fotka je přitom načtená)
     → zapnout, ať je mřížka 2×2 kompletní. dklab CSS je v kaskádě POZDĚJI se
     stejnou specifitou → nutná eskalace (0,3,0). --- */
  .overall-wrapper .container.grid4 .dklab_instagram_widget_box { display: block !important; }

  /* --- Mobilní menu (drawer): sladit s designem — navy položky, Výprodej
     červeně (žlutá na bílém pozadí draweru nejde) --- */
  .navigation-in .menu-level-1 > li > a {
    color: var(--so-navy) !important; font-size: 15px !important; font-weight: 600 !important;
  }
  .navigation-in .menu-level-1 .menu-level-2 a { color: #3A4256 !important; font-size: 14px !important; font-weight: 400 !important; }
  .navigation-in .menu-level-1 > li.menu-item-1223 > a,
  .navigation-in .menu-level-1 > li > a[href*="vyprodej"] { color: var(--so-red) !important; }

  /* --- Sbalovací filtr: filtry (972px!) byly VŽDY rozbalené nad produkty →
     tlačítko „Filtrovat", výchozí sbaleno (JS collapseMobileFilters) --- */
  .so-filter-toggle {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; margin: 0 0 14px;
    border: 1px solid #D6DAE6; border-radius: 6px; background: #fff;
    color: var(--so-navy); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .so-filter-toggle::after { content: '▾'; font-size: 12px; }
  .so-filter-toggle--open::after { content: '▴'; }
  .so-mfilters { display: none !important; }
  .so-mfilters.so-mfilters--open { display: block !important; }

  /* --- Filtr: nadpisy jemné navy (byly velké černé) + počty šedé --- */
  .filters h3, .filters h4, .filters-wrapper h3, .filters-wrapper h4,
  [class*="filter-section"] h3, [class*="filter-section"] h4,
  .slider-wrapper h3, .slider-wrapper h4 {
    font-size: 16px !important; font-weight: 700 !important; color: var(--so-navy) !important;
    margin: 0 0 10px !important; text-align: left !important;
  }
  .filter-count { color: #B0B5C4 !important; font-weight: 400 !important; font-size: 12px !important; }

  /* --- Cenový posuvník: jako desktop (tenká lišta, kulaté bílé kolečko) —
     mobilní filtr NENÍ v .sidebar-left → desktopová pravidla se neaplikovala
     (byl tlustý navy pás se čtvercovými úchyty) --- */
  .param-price-filter.ui-slider, .slider-content .ui-slider {
    height: 3px !important; background: #E7EAF2 !important; border: none !important; border-radius: 3px !important;
  }
  .ui-slider .ui-slider-range { background: var(--so-navy) !important; border: none !important; border-radius: 3px !important; }
  .ui-slider .ui-slider-handle {
    width: 18px !important; height: 18px !important; background: #fff !important; background-image: none !important;
    border: 2px solid var(--so-navy) !important; border-radius: 50% !important;
    top: -8px !important; margin-left: -9px !important; box-shadow: 0 1px 3px rgba(16,27,79,0.25) !important;
  }
  .ui-slider .ui-slider-handle::before, .ui-slider .ui-slider-handle::after { display: none !important; content: none !important; }
  .slider-header, .slider-header .from, .slider-header .to { font-size: 12px !important; color: #8A8FA3 !important; }

  /* --- Filtry: stejný styl jako desktop (i kdyby byl mobilní filtr mimo .sidebar-left) --- */
  [class*="filter-section-param"] input[type="checkbox"] { display: none !important; }
  [class*="filter-section-param"] .filter-label::before,
  [class*="filter-section-param"] .filter-label::after { display: none !important; content: none !important; }
  [class*="filter-section-param"] fieldset {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important;
    gap: 8px !important; padding: 0 !important; border: none !important; margin: 0 !important;
  }
  [class*="filter-section-param"] fieldset > div { width: 100% !important; margin: 0 !important; }
  [class*="filter-section-param"] .filter-label {
    display: flex !important; align-items: center; justify-content: center; width: 100% !important;
    min-width: 0 !important; padding: 8px 6px !important; margin: 0 !important;
    border: 1px solid #D6DAE6 !important; border-radius: 6px !important;
    font-size: 13px !important; font-weight: 500 !important; color: #333 !important; text-align: center !important;
  }
  [class*="filter-section-param"] .filter-count { display: none !important; }
  [class*="filter-section-manuf"] .filter-label::before,
  [class*="filter-section-boolean"] .filter-label::before {
    border-radius: 4px !important; border: 2px solid #D6DAE6 !important; width: 16px !important; height: 16px !important;
  }
  /* VYBRANÁ velikost = navy rámeček + světlé pozadí (Shoptet přidá .active,
     JS .so-chip-active; input je skrytý → i input:checked+label) */
  [class*="filter-section-param"] input:checked + .filter-label,
  [class*="filter-section-param"] .filter-label.active,
  [class*="filter-section-param"] .filter-label.so-chip-active,
  [class*="filter-section-param"] .filter-label.checked {
    border: 2px solid var(--so-navy) !important; background: #F3F6FC !important;
    color: var(--so-navy) !important; font-weight: 600 !important; padding: 7px 5px !important;
  }
  /* Značky: sbalení (8 + „Zobrazit všechny") i mimo .sidebar-left */
  [class*="filter-section-manuf"] .so-brand-hidden { display: none !important; }
  .so-brands-toggle {
    display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 500;
    color: var(--so-navy); cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0;
  }
}
/* ==========================================================================
   DAVKA 03 - CTA pres EDITOR VZHLEDU (rozhodnuto 12.7., D2)
   Barvu CTA nove ridi nastaveni sablony (konverzni barva -> #F5A623),
   NE CSS override. Tento blok resi JEN kontrast textu: sablona dava na
   konverzni tlacitka BILY text (na #F5A623 = 2,03:1 FAIL); tmavy #1A1A1A
   = 8,59:1 (AAA).

   POSTUP NASAZENI (v tomto poradi, tesne po sobe):
   1. Admin: Editor vzhledu -> Barvy -> konverzni barva = #F5A623
   2. style.css: SMAZAT navy CTA bloky ("Kosik = plna navy" na detailu
      + navy pravidla pro .btn-cart/.add-to-cart-button na kartach vc. hoveru)
   3. style.css: PRILEPIT tento blok
   Dokud se neprovede krok 1, tento blok NENASAZOVAT (tmavy text na cervene
   #C80909 je necitelny).
   Rollback: vratit konverzni barvu v adminu + vratit style.css z gitu.
   ========================================================================== */

/* tmavy text na vsech konverznich tlacitkach (barvu pozadi dava sablona).
   Karta potrebuje vyssi specificitu - starsi pravidlo .p-tools/.p-bottom
   barvi text navy a jinak by vyhralo. */
.btn.btn-conversion,
.btn.add-to-cart-button,
.btn.btn-cart,
.products-page .product .p-bottom .btn.btn-cart,
.products-page .product .p-bottom .btn.add-to-cart-button,
.products-page .product .btn.btn-cart,
.products-page .product .btn.add-to-cart-button {
  color: #1A1A1A !important;
}
.btn.btn-conversion i, .btn.btn-conversion span, .btn.btn-conversion svg,
.btn.add-to-cart-button i, .btn.add-to-cart-button span, .btn.add-to-cart-button svg {
  color: #1A1A1A !important;
  stroke: currentColor;
}
.btn.add-to-cart-button:active,
.products-page .product .btn.btn-cart:active { transform: scale(0.98); }
/* ======================== KONEC DAVKY 03 ================================== */
/* ==========================================================================
   DAVKA 01 - P0 SAFE (nulove riziko)
   Badge slevy (NATIVNI prvky, jen prebarvene) + citelna skrtnuta cena +
   pojistka sekundarnich akci + mekke stiny + hover states.
   Nasazeni: prilepit na KONEC style.css (viz NASAZENI.md). Zadny JS.
   Rollback: smazat tento blok ze style.css.
   ========================================================================== */
:root {
  --so-sale: #D93025;        /* badge slevy; bily text 4,77:1 = WCAG AA */
  --so-muted: #6E7488;       /* skrtnuta cena; na bile 4,65:1 = WCAG AA */
  --so-shadow: 0 2px 30px rgba(0, 0, 0, 0.08);
  --so-transition: 200ms ease;
}

/* --- Badge slevy ------------------------------------------------------------
   NATIVNI selektory (overeno v SSR HTML, 12.7.):
   - karty:  .flag.flag-discount obsahuje .price-standard + .price-save
             s textem "&ndash;57 %" (ref-home.html, 14 vyskytu)
   - detail: .flags-extra .flag-discount v GALERII obsahuje jen skrtnutou
             cenu (zadne procento; .price-save na detailu neexistuje - 0 vyskytu)
   - karty VIDITELNY -% badge: .flag.flag-action-percentage - vklada ho
     DOPLNEK dominikmartini/action_price_plus client-side (v SSR neni!)
   - detail vedle ceny: -56 % je .so-badge z EXISTUJICI JS vrstvy (11.7.,
     commit b5792f7) - v SSR neni; zde ho jen prebarvujeme, o jeho osudu
     rozhoduje bod D1 (viz NASAZENI.md). */
.flag.flag-discount,
.flags-default .flag,
.products-page .product .flag.flag-action-percentage,
.flag.flag-action-percentage,
.type-detail .so-badge {
  background: var(--so-sale) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.flag.flag-discount .price-save { color: #fff !important; font-weight: 700 !important; }

/* --- Citelna referencni cena (DMOC vyrobce) ----------------------------------
   Puvodne #9AA0B0 (3,0:1 - na hranici viditelnosti); u outletu je DMOC
   soucast hlavniho sdeleni. LEGISLATIVA (Omnibus): bez preskrtnuti —
   line-through resi zakladni pravidla vyse (text-decoration: none). */
.type-detail .price-standard,
.type-detail .price-standard * {
  color: var(--so-muted) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
.products-page .product .price-standard,
.products-page .product .prices .price-additional,
.products-page .product .prices .price-additional * {
  color: var(--so-muted) !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

/* --- Pojistka: sekundarni akce NIKDY plny akcent ------------------------------
   Oblibene/DETAIL zustavaji outline/odkaz. :not() vyjimky - kosikove tlacitko
   na karte sedi TAKY v .p-tools a pojistka mu nesmi sebrat pozadi. */
.type-detail .dkLabFavouriteDiv,
.type-detail .dkLabFavouriteDiv a,
.products-page .product .p-tools .btn:not(.btn-cart):not(.add-to-cart-button):not(.btn-conversion):not(.so-cta-detail) {
  background: transparent !important;
}

/* --- Mekke stiny (jen karty / plovouci prvky) --------------------------------*/
.products-page .product .p:hover,
.dkLabFavouriteProductDiv,
.siteCookies {
  box-shadow: var(--so-shadow) !important;
}

/* --- Hover + transition 200ms na klikatelnych prvcich -------------------------*/
a, .btn, button, .filter-label, .listSorting__control,
.products-page .product .p {
  transition: color var(--so-transition), background-color var(--so-transition),
              border-color var(--so-transition), box-shadow var(--so-transition);
}
/* ======================== KONEC DAVKY 01 ================================== */
/* ==========================================================================
   DAVKA 02b - ZAKLADNI PISMO (hygiena)
   body 14px/1.38 -> 16px/1.5 + barva textu #000 -> #1A1A1A (cista cerna
   21:1 je opticky tvrda; #1A1A1A = 17,4:1).
   ZADNE dalsi zmeny velikosti (redukce skaly zrusena 12.7. - boj se
   symptomy em-kaskady sablony; H1 zustava 26px, viz NASAZENI.md).
   Explicitni prebiti nize = mista, kde by 16px em-dedicnost zvetsila
   kompaktni UI (overeno na 375px viewportu).
   Nasazeni: prilepit na KONEC style.css. Nezavisla na 01/02a/03/04.
   Rollback: smazat blok DAVKA 02b.
   ========================================================================== */
body {
  font-size: 16px;
  line-height: 1.5;
  color: #1A1A1A;
}
/* dolaeni em-kaskady (jen tri mista, otestovano 375px - zadny overflow): */
.navigation-in .menu-level-1 > li > a { font-size: 14px; }
footer.footer .custom-footer a,
footer.footer .custom-footer li { font-size: 14px; }
.breadcrumbs, .breadcrumbs a, .breadcrumbs span { font-size: 14px; }
/* ======================== KONEC DAVKY 02b ================================= */
/* ==========================================================================
   DAVKA 04 - BORDER-RADIUS (P2, nejnizsi priorita)
   Sjednoceni radiusu na 4px. POZOR: mockupy z Claude Design pouzivaji na
   kartach a chipech mekci radius (12px / 6px) - nasazeni teto davky vzhled
   karet zmeni. Pokud maji karty zustat dle mockupu, smazte JEN pravidlo
   oznacene [KARTY]. Rollback: smazat tento blok.
   Selektory s vyssi specificitou nize jsou NUTNE - starsi pravidla ve
   style.css (karta-tlacitka 6px (0,5,0), flagy 5px (0,3,0), mobilni chipy
   6px) by jinak davku prebila.
   ========================================================================== */
:root { --so-radius: 4px; }

.btn, button.btn, .form-control, input[type="text"], input[type="email"],
.type-detail .so-badge, .flag,
.sidebar-left [class*="filter-section-param"] .filter-label,
[class*="filter-section-param"] .filter-label,
.so-filter-toggle, .quantity,
.loadMore__button, .goToTop__button {
  border-radius: var(--so-radius) !important;
}
/* karta: Do kosiku + DETAIL + flagy (starsi pravidla maji 5-6px s vyssi
   specificitou -> nutno vyrovnat) */
.products-page .product .p-bottom .btn.btn-cart,
.products-page .product .p-bottom .btn.add-to-cart-button,
.products-page .product .btn.btn-cart,
.products-page .product .btn.add-to-cart-button,
.products-page .product .p-tools .btn,
.products-page .product .p-tools a,
.products-page .product .p-bottom a.btn,
.products-page .product .flag {
  border-radius: var(--so-radius) !important;
}
/* [KARTY] mockup ma 12px - smazanim tohoto radku zustanou karty mekci */
.products-page .product .p { border-radius: var(--so-radius) !important; }
/* ======================== KONEC DAVKY 04 ================================== */
/* ==========================================================================
   DAVKA 02a - INPUTY (iOS zoom fix)
   Jedina polozka: pole formularu minimalne 16px. iOS Safari pri fokusu na
   input s font-size < 16px zoomne celou stranku a uzivatel musi rucne
   odzoomovat - tyka se hledani, newsletteru a hlavne CHECKOUTU.
   Scope na mobil (<=991px): problem existuje jen na iOS/dotykovych zarizenich,
   desktopovy vzhled se nemeni.
   Nasazeni: prilepit na KONEC style.css. Nezavisla na 01/02b/03/04.
   Rollback: smazat blok DAVKA 02a.
   ========================================================================== */
@media (max-width: 991px) {
  input, select, textarea, .form-control {
    font-size: 16px !important;
  }
}
/* ======================== KONEC DAVKY 02a ================================= */

/* ==========================================================================
   Dolaeni detailu (12.7., Petr): (1) pod košíkem byly DVĚ linky nad sebou —
   slabší (.so-trust border-top #EDEFF4) ODSTRANĚNA, zbylá šablonová
   (.p-to-cart-block border-bottom #DADADA) sladěna na jemný odstín ostatních
   oddělovačů karty. (2) mezera cena→Velikost zmenšena o ~8px (31→23):
   Mazáňův .choose-parameters-wrap má mt 10px → 4px, wrapper 4px → 2px.
   ========================================================================== */
.type-detail .so-trust { border-top: none !important; padding-top: 0 !important; }
.type-detail .p-to-cart-block { border-bottom-color: #EDEFF4 !important; }
.type-detail .master-radio-wrapper .choose-parameters-wrap { margin-top: 4px !important; }
.type-detail .p-to-cart-block .p-add-to-cart-wrapper { margin-top: 2px !important; }

/* ==========================================================================
   Země značky s vlaječkou (12.7.) — vkládá script.js vedle Kód/Značka;
   data countries.json na CDN, vlajky self-hosted /flags/ (flag-icons, MIT).
   ========================================================================== */
.type-detail .so-country { display: flex; align-items: center; gap: 7px; }
.type-detail .so-country .so-country-flag {
  width: 20px; height: 15px; border-radius: 2px; display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Dolaeni meta řádku + trust (12.7., Petr):
   (1) Kód měl vnitřní spany 14px, Značka a Země značky 16px → sjednoceno
       na 16px (vlaječka zůstává 20×15).
   (2) „Přidat k oblíbeným" přesunuto ze spodku do trust řádku jako 3. položka
       (Doprava zdarma | Snadné vrácení | Přidat k oblíbeným) → parametry
       se přiblíží k panelu „rádi poradíme". Přesun dělá layoutDetail().
   ========================================================================== */
.type-detail .p-code, .type-detail .p-code span { font-size: 16px !important; }
.type-detail .so-trust { grid-template-columns: 1fr 1fr auto !important; }
.type-detail .so-fav-inline {
  margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center !important;
}
.type-detail .so-fav-inline, .type-detail .so-fav-inline a,
.type-detail .so-fav-inline span { color: #555 !important; font-size: 12px !important; }
@media (max-width: 991px) {
  /* na mobilu se 3 položky nevejdou vedle sebe → oblíbené pod nimi */
  .type-detail .so-trust { grid-template-columns: 1fr 1fr !important; }
  .type-detail .so-fav-inline { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ==========================================================================
   Oprava meta řádku (12.7., Petr — verze 2):
   (1) Kód/Značka/Země značky = VŠE 14px (jako měl původně Kód; předchozí
       sjednocení na 16px bylo obráceně). Vlaječka zůstává 20×15.
   (2) Linky nad/pod meta řádkem (.p-basic-info-block, byly tvrdé #DADADA)
       → jemné #EDEFF4 jako ostatní oddělovače; řádek přisunut k nadpisu
       (header margin-bottom 14→6px).
   ========================================================================== */
.type-detail .p-basic-info-block .block,
.type-detail .p-code, .type-detail .p-code span,
.type-detail .p-manufacturer, .type-detail .p-manufacturer a, .type-detail .p-manufacturer span,
.type-detail .so-country, .type-detail .so-country b, .type-detail .so-country .so-country-name {
  font-size: 14px !important;
}
.type-detail .so-country .so-country-flag { width: 20px !important; height: 15px !important; }
.type-detail .p-basic-info-block {
  border-top-color: #EDEFF4 !important;
  border-bottom-color: #EDEFF4 !important;
}
.type-detail .p-detail-inner-header { margin-bottom: 6px !important; }

/* ==========================================================================
   Kontakt box „Potřebujete poradit?" (12.7., dle Petrovy předlohy):
   nadpis → telefon větším písmem (zelená; oranžová zůstává jen pro CTA)
   → provozní doba. Markup staví buildContact() v script.js.
   ========================================================================== */
.type-detail .so-contact-info { display: flex; flex-direction: column; gap: 1px; }
.type-detail .so-contact-phone {
  font-size: 18px !important; font-weight: 700 !important;
  color: #1FA463 !important; text-decoration: none; line-height: 1.3;
}
.type-detail .so-contact-phone:hover { color: #178A52 !important; }
.type-detail .so-contact-hours { font-size: 12px; color: #8A8FA3; }

/* ==========================================================================
   KARTA v3 (18.7., Petrův mockup — LEGISLATIVA, směrnice Omnibus):
   žádná přeškrtnutá cena, žádné „MOC". Cenová skupina (staví
   restyleCardCommerce v script.js):
     velká cena → „DMOC výrobce: X Kč" (šedě, neškrtnuté)
     → zelená pilulka [🏷 O Y % méně než DMOC].
   Zachováno z v2: −% badge na fotce PRYČ, TOP CENA žlutě (.so-flag-top),
   jedno CTA (DETAIL u variant vypadá jako Do košíku, vede na detail).
   ========================================================================== */
.products-page .product .flag.flag-action-percentage { display: none !important; }
.flag.so-flag-top {
  background: #FFD400 !important; color: #101B4F !important; font-weight: 700 !important;
}
.products-page .product .prices {
  flex-direction: column !important; align-items: flex-start !important; gap: 3px !important;
}
.products-page .product .so-dmoc-row {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 13px; color: var(--so-muted, #6E7488);
}
.products-page .product .so-dmoc-row .price-additional { margin: 0 !important; text-decoration: none !important; }
.products-page .product .so-dmoc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #E9F6EE; color: #157A46;
  font-size: 12px; font-weight: 600;
  border-radius: 6px; padding: 5px 9px; line-height: 1.3; margin-top: 2px;
}
.products-page .product .so-dmoc-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.products-page .product .p-tools .btn.so-cta-detail {
  background: var(--color-secondary, #F5A623) !important;
  border-color: var(--color-secondary, #F5A623) !important;
  color: #1A1A1A !important;
}
/* pořadí cenové skupiny (staré pravidlo .price-final{order:1} zůstává):
   velká cena → DMOC řádek → pilulka */
.products-page .product .so-dmoc-row { order: 2; }
.products-page .product .so-dmoc-pill { order: 3; }

/* ==========================================================================
   Cenová skupina DETAILU v3 (18.7., stejný jazyk jako karta v3):
   34px cena → „DMOC výrobce: X Kč" (neškrtnuté) → zelený
   box [🏷] „O X Kč méně než DMOC výrobce / To je o Y % méně než DMOC
   výrobce". Markup staví buildDetailPriceGroup(); hodnoty přepočítává
   observer při výběru varianty. Červený .so-badge zrušen (pojistka).
   ========================================================================== */
.type-detail .so-badge { display: none !important; }
.type-detail .p-final-price-wrapper .so-dmoc-row {
  display: flex; align-items: baseline; gap: 6px; margin-top: 4px;
  font-size: 15px; color: var(--so-muted, #6E7488);
}
.type-detail .p-final-price-wrapper .price-standard { margin: 0 !important; }
.type-detail .so-dmoc-box {
  display: flex; align-items: center; gap: 12px;
  background: #E9F6EE; border-radius: 8px;
  padding: 12px 14px; margin-top: 12px;
}
.type-detail .so-dmoc-ico {
  width: 34px; height: 34px; border-radius: 8px; background: #1FA463;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.type-detail .so-dmoc-ico svg { width: 18px; height: 18px; }
.type-detail .so-dmoc-lines { display: flex; flex-direction: column; gap: 2px; }
.type-detail .so-dmoc-save { font-size: 15px; font-weight: 700; color: #157A46; line-height: 1.35; }
.type-detail .so-dmoc-pct { font-size: 13px; font-weight: 500; color: #1FA463; line-height: 1.35; }
/* LEGISLATIVA: v galerii detailu nezobrazovat nativní flag s přeškrtnutou
   cenou (.flag-discount) ani −% flag doplňku (bez kontextu DMOC) */
.type-detail .flags-extra .flag-discount,
.type-detail .flag.flag-action-percentage { display: none !important; }

/* ==========================================================================
   Patička: úplný kontakt (13.7.) — adresu vkládá decorateFooterContact()
   (nativní Shoptet contact-box umí jen jméno/e-mail/telefon).
   ========================================================================== */
footer.footer .so-footer-address {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px;
}
footer.footer .so-footer-address strong { color: #fff; font-size: 14px; }
footer.footer .so-footer-address span { color: #B9C0DC; font-size: 14px; }

/* ---------- Popisky 2.0 (faktury-app) — jednotná struktura AI popisků ----------
   HTML generuje faktury-app (blokový renderer, třídy pd-*), sem patří JEN vzhled.
   Bloky: pd-heading, pd-subheading, pd-intro, pd-benefits, pd-params,
   pd-forwhom, pd-sizefit, pd-faq, pd-shared. */
.pd-desc { line-height: 1.65; color: #2c2f38; font-size: 15px; }
.pd-desc .pd-heading {
  font-size: 24px; font-weight: 700; color: var(--so-navy);
  margin: 0 0 14px; line-height: 1.3;
}
.pd-desc .pd-subheading {
  font-size: 18px; font-weight: 700; color: var(--so-navy);
  margin: 22px 0 8px; padding-bottom: 6px;
  border-bottom: 2px solid var(--so-line);
}
.pd-desc .pd-intro { font-size: 16px; margin: 0 0 12px; }
.pd-desc .pd-forwhom, .pd-desc .pd-sizefit { margin: 6px 0 12px; }
.pd-desc .pd-benefits { list-style: none; margin: 8px 0 14px; padding: 0; }
.pd-desc .pd-benefits li {
  position: relative; padding: 4px 0 4px 26px; margin: 0;
}
.pd-desc .pd-benefits li::before {
  content: "✓"; position: absolute; left: 2px; top: 4px;
  color: var(--so-navy); font-weight: 700;
}
.pd-desc .pd-params {
  width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 14px;
}
.pd-desc .pd-params th {
  text-align: left; font-weight: 600; width: 38%;
  padding: 8px 12px; border: 1px solid var(--so-bord); background: #F7F8FB;
  color: #2c2f38;
}
.pd-desc .pd-params td { padding: 8px 12px; border: 1px solid var(--so-bord); }
.pd-desc .pd-params tr:nth-child(even) td { background: #FBFBFD; }
.pd-desc .pd-faq { margin: 8px 0 14px; }
.pd-desc .pd-faq-item { border-bottom: 1px solid var(--so-line); padding: 8px 0; }
.pd-desc .pd-faq-item:last-child { border-bottom: 0; }
.pd-desc .pd-faq-q { margin: 0 0 4px; color: var(--so-navy); }
.pd-desc .pd-faq-a { margin: 0; color: #4a4e5a; }
.pd-desc .pd-shared { margin: 14px 0; }
@media (max-width: 600px) {
  .pd-desc .pd-heading { font-size: 20px; }
  .pd-desc .pd-subheading { font-size: 16px; }
  .pd-desc .pd-params th { width: 44%; }
}

/* Popisky 2.0: tabulka vlastního měření (pd-measure) */
.pd-desc .pd-measure {
  border-collapse: collapse; margin: 8px 0 6px; font-size: 14px; min-width: 60%;
}
.pd-desc .pd-measure th {
  text-align: left; font-weight: 700; padding: 8px 14px;
  border: 1px solid var(--so-bord); background: #F7F8FB; color: var(--so-navy);
}
.pd-desc .pd-measure td { padding: 8px 14px; border: 1px solid var(--so-bord); }
.pd-desc .pd-measure tr:nth-child(even) td { background: #FBFBFD; }
.pd-desc .pd-measure-note {
  font-size: 13px; color: #4a4e5a; margin: 4px 0 14px; font-style: italic;
}

/* =============================================================
   UPSELL / CROSS-SELL blok (náhrada doplňku honzabartos).
   Vkládá script.js pod cenový/košíkový blok na detailu.
   ============================================================= */
.so-ups {
  margin: 20px 0 8px; padding: 16px; border: 1px solid var(--so-bord);
  border-radius: 14px; background: #FBFBFD;
}
.so-ups-head {
  font-size: 15px; font-weight: 700; color: var(--so-navy);
  margin-bottom: 12px; letter-spacing: .01em;
}
.so-ups-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.so-ups-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--so-bord); border-radius: 10px; overflow: hidden;
  background: #fff; transition: box-shadow .15s, border-color .15s;
}
.so-ups-card:hover {
  border-color: var(--so-navy); box-shadow: 0 4px 14px rgba(16,27,79,.10);
}
.so-ups-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.so-ups-add {
  margin: 4px 8px 8px; padding: 8px 6px; border: none; border-radius: 8px;
  background: var(--so-navy); color: #fff; font-weight: 700; font-size: 12px;
  cursor: pointer; text-align: center; text-decoration: none; display: block;
  transition: background .15s, opacity .15s;
}
.so-ups-add:hover { opacity: .92; }
.so-ups-add.is-added { background: #1FA463; }
.so-ups-add-link { background: #fff; color: var(--so-navy); border: 1px solid var(--so-navy); }
.so-ups-img {
  display: block; aspect-ratio: 1/1; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.so-ups-img img { width: 100%; height: 100%; object-fit: contain; }
.so-ups-img-empty { background: #F2F3F7; }
.so-ups-name {
  font-size: 13px; line-height: 1.35; color: #1A1A1A; padding: 8px 10px 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 38px;
}
.so-ups-price {
  font-size: 15px; font-weight: 800; color: var(--so-navy);
  padding: 0 10px 10px; margin-top: auto;
}
.so-ups-orig {
  font-size: 12px; font-weight: 500; color: #8A8F9C; margin-left: 6px;
}
.so-ups-banner { display: block; margin: 20px 0 8px; }
.so-ups-banner img { width: 100%; height: auto; border-radius: 14px; display: block; }
/* Nezobrazovat v klonu sticky lišty (Jupiter/Apollo klonuje form) */
.fix-detail-header .so-ups { display: none !important; }
@media (max-width: 767px) {
  .so-ups-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Dárek (offer_type=gift): zelený akcent + "Zdarma" + progress k prahu. */
.so-ups-gift { background: #EAF7EE; border-color: #B9DFC6; }
.so-ups-gift .so-ups-head { color: #1B7A3D; }
.so-ups-gift-note { font-size: 13px; color: #1B7A3D; margin: -6px 0 12px; font-weight: 600; }
.so-ups-gift-price { color: #1FA463 !important; }
.so-ups-gift .so-ups-add { background: #1FA463; }

/* ============================================================
   Nativni Doplnkove bannery (pozice Top) na homepage
   — nahrada dklab Bannery (JS-injekce zpusobovala CLS 0.48).
   Markup sablony 12: .banners-row > .next-to-carousel-banners
   > .banner-wrapper > a > img. Aktivni az po zviditelneni
   banneru v adminu (Vzhled a obsah -> Bannery -> Doplnkove).
   ============================================================ */
.in-index .next-to-carousel-banners {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px auto 0;
  /* sirku a zarovnani dava sdilene kontejnerove pravidlo sablony
     (stejna sirka jako .index-content-wrapper) — nepretezovat max-width */
  padding: 0 !important;
}
.in-index .next-to-carousel-banners .banner-wrapper {
  margin: 0 !important;
  min-width: 0;
}
.in-index .next-to-carousel-banners .banner-wrapper a { display: block; }
.in-index .next-to-carousel-banners .banner-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  /* rezerva vysky = zadny layout shift pri nacitani obrazku */
  aspect-ratio: 450 / 559;
  object-fit: cover;
}
/* Na mobilu bannery nezobrazujeme (stejne jako dklab - mel jen desktop kreativy) */
@media (max-width: 767px) {
  .in-index .next-to-carousel-banners { display: none !important; }
}

/* Ikony vyhod na homepage: sedy pas pres sirku obsahu, centrovane, mensi ikony
   (vzhled puvodniho dklab bloku ikon) */
.in-index .benefitBanner.position--benefitHomepage {
  background: #f4f5f7;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 26px 24px;
  margin: 20px 0 8px;
}
.in-index .benefitBanner.position--benefitHomepage { justify-items: stretch; }
.in-index .position--benefitHomepage .benefitBanner__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin: 0;
  width: 100% !important;
  max-width: none !important;
}
.in-index .position--benefitHomepage .benefitBanner__picture { margin: 0; }
.in-index .position--benefitHomepage .benefitBanner__content {
  /* sablona nuti ~163px -> titulky se lamaly */
  width: 100% !important;
  max-width: 300px;
}
.in-index .position--benefitHomepage .benefitBanner__img {
  width: 46px;
  height: auto;
}
.in-index .position--benefitHomepage .benefitBanner__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.in-index .position--benefitHomepage .benefitBanner__data {
  font-size: 12px;
  color: #6a7080;
  max-width: 280px;
}
@media (max-width: 767px) {
  .in-index .benefitBanner.position--benefitHomepage {
    grid-template-columns: repeat(2, 1fr);
    padding: 18px 12px;
  }
}