/*
 * Baseball Shop child theme — implementace schválené homepage v2.
 * Systém: tokeny → vzory (karta, tlačítko, nadpis, hover) → komponenty → responzivita.
 * Základ (barvy, fonty, hlavička, menu) řeší Warehouse theme editor (iqitthemeed_* v DB).
 * Texty jsou v Elementoru / modulech (editovatelné per jazyk); CSS řeší jen vzhled.
 */

/* ══ 1. TOKENY ══════════════════════════════════════════════════════════ */

:root {
  --bso-navy: #312783;
  --bso-navy-dark: #221b5e;
  --bso-navy-footer: #16123f;
  --bso-red: #e30613;
  --bso-red-hover: #c00510;
  --bso-red-light: #ff5a63;
  --bso-zluta: #ffb400;
  --bso-zelena: #1f9d55;
  --bso-oranzova: #d97706;
  --bso-bg: #f7f7f9;
  --bso-text: #1c1c28;
  --bso-muted: #6b6b78;
  --bso-muted-2: #9a9aa6;
  --bso-border: #e7e7ee;
  --bso-radius: 10px;
  --bso-radius-s: 6px;
  --bso-condensed: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --bso-base: 'Barlow', Arial, Helvetica, sans-serif;
  --bso-sekce-mezera: 56px;
  --bso-stin-hover: 0 6px 18px rgba(34, 27, 94, 0.08);
  --bso-prechod: 0.2s ease;
  /* horní hrana lepivých sloupců (pokladna, košík): zafixovaná lišta menu
     #iqitmegamenu-wrapper.stuck má změřených 44 px + 16 px na nadechnutí */
  --bso-sticky-top: 60px;
  /* Šířka čtecího sloupce dlouhých textů. Jedna hodnota pro obě dlouhá čtení
     na webu (detail článku na blogu, statická stránka), aby se nemohly
     rozejít. 620 px karty je 558 px textu, což je v Barlow 15px změřených
     79 znaků na řádek (medián, obchodní podmínky); 900 px dělalo 115 znaků. */
  --bso-cteci-sloupec: 620px;
  /* obsah dokumentu vedle textu na statické stránce: šířka sloupce a mezera;
     ze všech tří hodnot se počítá i celková šířka stránky s obsahem */
  --bso-cms-obsah-sirka: 264px;
  --bso-cms-obsah-mezera: 40px;
  /* šev míčku (oblouk pod nadpisy) */
  --bso-sev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='11' viewBox='0 0 110 11'%3E%3Cpath d='M2 8.5 C36 2.5 74 2.5 108 8.5' fill='none' stroke='%23e30613' stroke-width='2.4' stroke-dasharray='6 5' stroke-linecap='round'/%3E%3C/svg%3E");
  --bso-sev-svetly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='11' viewBox='0 0 110 11'%3E%3Cpath d='M2 8.5 C36 2.5 74 2.5 108 8.5' fill='none' stroke='%23ff5a63' stroke-width='2.4' stroke-dasharray='6 5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ══ 2. VZORY ═══════════════════════════════════════════════════════════ */

/* Typografie */
h1, h2, h3, .elementor-heading-title {
  text-transform: uppercase;
  font-weight: 700 !important;
}
h1 { color: var(--bso-navy-dark); }

/* Nadpis sekce se švem (vzor: nadpis + oblouk) */
.bso-h2 .elementor-heading-title {
  font-family: var(--bso-condensed) !important;
  font-size: 32px !important;
  color: var(--bso-navy-dark) !important;
  text-align: left !important;
  margin: 0;
}
.bso-h2 .elementor-heading-title::after {
  content: "";
  display: block;
  width: 110px;
  height: 11px;
  margin-top: 5px;
  background: var(--bso-sev) no-repeat;
}
.bso-h3 .elementor-heading-title {
  font-family: var(--bso-condensed) !important;
  font-size: 24px !important;
  color: var(--bso-navy-dark) !important;
  margin: 0 0 4px 0;
}
.bso-h3 .elementor-heading-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 90px 10px;
}

/* Karta (vzor: bílá, okraj, rádius, stín na hover) */
.bso-kat-card > .elementor-column-wrap.elementor-element-populated,
.bso-onas-card > .elementor-column-wrap.elementor-element-populated {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  height: 100%;
  transition: box-shadow var(--bso-prechod);
}
.bso-kat-card:hover > .elementor-column-wrap.elementor-element-populated,
.bso-onas-card:hover > .elementor-column-wrap.elementor-element-populated {
  box-shadow: var(--bso-stin-hover);
}

/* Primární CTA (vzor: červené kondenzované tlačítko) */
.bso-btn-cta a.elementor-button {
  background: var(--bso-red) !important;
  color: #fff !important;
  font-family: var(--bso-condensed) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 30px !important;
  border-radius: var(--bso-radius-s) !important;
  border: none !important;
  transition: background var(--bso-prechod);
}
.bso-btn-cta a.elementor-button:hover { background: var(--bso-red-hover) !important; }

/* ══ 3. HLAVIČKA A MENU ═════════════════════════════════════════════════ */

#desktop_logo img { max-width: 240px; height: auto; }

/* Vyhledávání: integrované pole s lupou a vnitřním tlačítkem */
#search_widget .input-group {
  background: #f2f2f6;
  border-radius: var(--bso-radius-s);
  padding: 4px 4px 4px 16px;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}
#search_widget .bso-search-ico { color: var(--bso-muted); font-size: 16px; }
#search_widget .form-search-control::placeholder { color: var(--bso-muted-2); }
#search_widget .form-search-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 15px;
  height: auto;
  padding: 8px 0;
}
#search_widget .search-btn { position: static !important; height: auto; line-height: 1.2; flex-shrink: 0; margin: 0 !important; align-self: stretch; }
#search_widget .form-search-control { min-width: 0; }
#search_widget form button[type="submit"],
.search-widget form button[type="submit"] {
  background: var(--bso-navy) !important;
  color: #fff !important;
  font-family: var(--bso-condensed) !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 9px 22px;
  border: none;
  transition: background var(--bso-prechod);
}
#search_widget form button[type="submit"]:hover,
.search-widget form button[type="submit"]:hover { background: var(--bso-navy-dark) !important; }
/* text tlačítka je v child šabloně search-bar.tpl přes {l} (přeložitelné) */

/* Košík: míček jako počítadlo (schválená varianta A) */
.cart-products-count-btn,
#cart-toogle .cart-products-count-btn {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 5 C4.8 9 4.8 15 2.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.75' stroke-width='1.4' stroke-dasharray='1.5 2'/%3E%3Cpath d='M21.5 5 C19.2 9 19.2 15 21.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.75' stroke-width='1.4' stroke-dasharray='1.5 2'/%3E%3C/svg%3E") !important;
  background-size: cover;
  border: 1px solid #c9c9d6;
  border-radius: 50% !important;
  color: var(--bso-navy-dark) !important;
  /* rodinu i sklon nastavit explicitně: na desktopu je míček v <i class="fa …">
     (dědil by Font Awesome), na mobilu v našem <i class="bso-mh-ico"> (dědil by
     kurzívu tagu <i>) — bez toho vypadá číslice na každém zařízení jinak */
  font-family: var(--bso-base) !important;
  font-style: normal !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 16px !important;
  box-shadow: 0 1px 3px rgba(18, 16, 31, 0.18);
  text-align: center;
  padding: 0 !important;
}

/* Menu: jeden řádek, malé šipky u položek s podmenu */
#iqitmegamenu-horizontal .cbp-hrmenu-tab > a {
  font-family: var(--bso-condensed) !important;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
/* flex se středěním: pojistka svislého zarovnání tabů (home čtverec 30 px
   vs. line-height 44 ostatních), floaty li flex ignoruje */
#iqitmegamenu-horizontal .cbp-hrmenu > ul {
  white-space: nowrap;
  display: flex;
  align-items: center;
}
#iqitmegamenu-horizontal .cbp-hrmenu-tab { white-space: nowrap; }
#iqitmegamenu-horizontal .cbp-mainlink-iicon {
  height: 17px;
  width: auto;
  margin-right: 6px;
  vertical-align: text-bottom;
}
#iqitmegamenu-horizontal .cbp-hrmenu-tab-1 > a { background: transparent !important; }
/* Domů: home plate ve čtverci 30×30 s čárkovaným rámečkem (Hero2.dc.html) */
#iqitmegamenu-horizontal .cbp-hrmenu-tab-1 .fa-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* !important: kompilované hm_btn_icon_size drží ikonu na 17 px (i max-height) */
  width: 30px !important;
  height: 30px !important;
  max-height: none !important;
  max-width: none !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  line-height: 1;
  vertical-align: middle;
  transition: border-color var(--bso-prechod);
}
#iqitmegamenu-horizontal .cbp-hrmenu-tab-1 > a:hover .fa-home {
  border-style: solid;
  border-color: #fff;
}
#iqitmegamenu-horizontal .cbp-hrmenu-tab-1 .fa-home::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M4 4h16v8l-8 8-8-8z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Submenu (megamenu panel): schválená varianta B (Submenu.dc.html) — úzký
   bílý seznam pod tabem s míčkovými odrážkami (záhlaví panelu na přání
   klienta vynecháno, název už nese tab). Šířku určovala bootstrap třída
   col-3 z konfigurace tabu (25 % šířky nav ≈ 320 px): přebita na pevných
   280 px; přetečení u tabů vpravo řeší megamenu JS třídou .cbp-notfit. */
#iqitmegamenu-horizontal .cbp-hrsub {
  white-space: normal;
  width: 280px !important;
  max-width: 280px;
}
#iqitmegamenu-horizontal .cbp-hrsub-inner {
  background: #fff;
  border-radius: 0 0 var(--bso-radius) var(--bso-radius);
  box-shadow: 0 14px 30px rgba(18, 16, 31, 0.12);
  padding: 0 0 6px 0 !important;
  overflow: hidden;
}
/* vnitřní bootstrap mřížka (container/row/col) na plnou šířku bez mezer;
   mezi bloky (.menu_row) bylo ~14px odsazení: srovnat na nulu */
#iqitmegamenu-horizontal .cbp-hrsub-inner .iqitmegamenu-submenu-container { padding: 0; max-width: none; }
#iqitmegamenu-horizontal .cbp-hrsub-inner .row { margin: 0; }
#iqitmegamenu-horizontal .cbp-hrsub-inner .row.menu_row { margin: 0 !important; }
#iqitmegamenu-horizontal .cbp-hrsub-inner [class*="col-"] { padding: 0; }
/* modul dává blokům .cbp-menu-column margin-top 20px (mezera kolem bloku
   Pro leváky) a wrapperu odkazu nic: vynulovat, výšku řádku drží padding a */
#iqitmegamenu-horizontal .cbp-hrsub-inner .cbp-menu-column { margin: 0; }
#iqitmegamenu-horizontal .cbp-hrsub .cbp-category-link-w { margin: 0; padding: 0; }
/* oddělovací linky přes border-top na položkách: funguje i přes hranice
   bloků (.menu_row / .cbp-menu-column), první položka celého panelu bez linky */
#iqitmegamenu-horizontal .cbp-hrsub .cbp-categories-row > [class*="col-"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-top: 1px solid #f0f0f5;
}
#iqitmegamenu-horizontal .cbp-hrsub-inner .row.menu_row:first-child > .cbp-menu-column:first-child .cbp-categories-row:first-child > [class*="col-"]:first-child { border-top: none; }
/* položky: 14 px normal case, míčková odrážka (stejné SVG jako v patičce),
   hover červený text + světlé pozadí */
#iqitmegamenu-horizontal .cbp-hrsub .cbp-category-title,
#iqitmegamenu-horizontal .cbp-hrsub .cbp-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--bso-text) !important;
  padding: 10px 18px;
  margin: 0; /* front.css dává .cbp-column-title margin-bottom 8px: hover bg pak nedosáhl k lince */
  width: 100%;
  transition: color var(--bso-prechod), background var(--bso-prechod);
}
#iqitmegamenu-horizontal .cbp-hrsub .cbp-category-title::before,
#iqitmegamenu-horizontal .cbp-hrsub .cbp-column-title::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%238f8ab8' stroke-width='2'/%3E%3Cpath d='M6.5 4.5 C10 8.5 10 15.5 6.5 19.5 M17.5 4.5 C14 8.5 14 15.5 17.5 19.5' fill='none' stroke='%23ff5a63' stroke-width='1.8' stroke-dasharray='2.4 2.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
#iqitmegamenu-horizontal .cbp-hrsub .cbp-category-title:hover,
#iqitmegamenu-horizontal .cbp-hrsub .cbp-column-title:hover {
  color: var(--bso-red) !important;
  background: #f7f7f9;
}
#iqitmegamenu-horizontal .cbp-hrsub a { color: var(--bso-text); transition: color var(--bso-prechod); }
#iqitmegamenu-horizontal .cbp-hrsub a:hover { color: var(--bso-red) !important; }
#iqitmegamenu-horizontal .cbp-hrsub a:empty { display: none; }
/* obrázkové odkazy kategorií v panelu nejsou v návrhu: skrýt */
#iqitmegamenu-horizontal .cbp-hrsub .cbp-category-thumb { display: none; }
#iqitmegamenu-horizontal .cbp-submenu-aindicator {
  display: inline-block;
  font-size: 10px !important;
  margin-left: 4px;
  opacity: 0.75;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Sticky menu: klon košíku skrytý (v návrhu není, rozbíjel layout) */
#sticky-cart-wrapper { display: none !important; }

/* Horní lišta: kontakty vlevo (obsah v iqithtmlandbanners, editovatelný) */
.bso-topbar-contact { display: inline-flex; gap: 22px; align-items: center; }
.bso-topbar-contact span { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }

/* Horní lišta vpravo: jeden ovladač země/jazyk/měna (sekce 14), decentní šipka */
#header .header-nav .right-nav,
#header .header-nav .right-nav a { color: var(--bso-text); }
#header .header-nav .right-nav > div:after { display: none; }
#header .header-nav .right-nav > div + div { margin-left: 20px; }
#header .header-nav .fa-angle-down {
  font-size: 12px;
  color: #6b6b78;
  margin-left: 2px;
  vertical-align: baseline;
}

/* ══ 4. HOMEPAGE SEKCE ══════════════════════════════════════════════════ */

/* Elementor boxed kontejner (jeho generované CSS obcházíme, šířka dle hlavičky) */
.elementor-section-boxed > .elementor-container {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Rytmus */
.bso-usp, .bso-banner, .bso-kategorie, .bso-hry, .bso-doporucene, .bso-novinky,
.bso-hero, .bso-prodejna, .bso-onas, .bso-znacky {
  margin-bottom: var(--bso-sekce-mezera);
}
.bso-sekce-head { margin-bottom: 18px; }
.bso-sekce-head .elementor-element-populated { padding-top: 0; padding-bottom: 0; }
/* řádek nadpisu s odkazem Zobrazit vše (dle návrhu) */
.bso-sekce-head-row .elementor-row { align-items: flex-end; }
.bso-sekce-head-row .elementor-column:last-child .elementor-widget-wrap { text-align: right; }
.bso-link-vse a.elementor-button {
  background: transparent !important;
  color: var(--bso-navy) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  transition: color var(--bso-prechod);
}
.bso-link-vse a.elementor-button:hover { color: var(--bso-red) !important; }
.bso-znacky { margin-bottom: 28px; }

/* Hero nalepený přímo pod menu: horní padding wrapperu (theme editor
   w_padding, kompilované #wrapper padding-top 1rem/1.333rem) jen na homepage */
#index #wrapper { padding-top: 0 !important; }

/* Hero v2 (Hero2.dc.html): video přes celé pozadí sekce, full-bleed jako
   prodejna. Vrstvy v kontextu sekce: ::before fotka (z0), .bso-hero-video
   bez z-indexu (iframe z1), ::after gradient (z2), obsah (z3), štítek (z4). */
.bso-hero {
  position: relative;
  margin-top: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  min-height: 460px;
  overflow: hidden;
  background: var(--bso-navy-dark);
}
.bso-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/img/cms/banner-620x310-baseball.jpg") center / cover;
  filter: saturate(0.7);
}
.bso-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(22, 18, 63, 0.88) 0%, rgba(22, 18, 63, 0.55) 50%, rgba(22, 18, 63, 0.35) 100%);
}
/* video/štítek se absolutně vážou na sekci: mezilehlé wrappery statické */
.bso-hero .elementor-container,
.bso-hero .elementor-row,
.bso-hero .elementor-column,
.bso-hero .elementor-column-wrap,
.bso-hero .elementor-widget-wrap,
.bso-hero .elementor-widget-html,
.bso-hero .elementor-widget-html .elementor-widget-container { position: static; }
/* obsahové widgety nad gradientem */
.bso-hero .elementor-widget:not(.elementor-widget-html) { position: relative; z-index: 3; }
.bso-hero .elementor-row { min-height: 460px; align-items: center; }
.bso-hero-content .elementor-element-populated {
  padding: 40px !important;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.bso-hero-kicker .elementor-heading-title {
  color: var(--bso-red-light) !important;
  font-family: 'Barlow', Arial, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.bso-hero-title .elementor-heading-title {
  font-family: var(--bso-condensed) !important;
  font-size: 54px !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  color: #ffffff !important;
  margin-bottom: 14px;
}
.bso-hero-text { font-size: 17px; color: #c8c5e8; max-width: 460px; }
.bso-hero-text p { margin-bottom: 20px; }
/* odkaz Navštívit prodejnu: na tmavém podkladu bílý, hover červeně */
.bso-hero .bso-btn-link a.elementor-button {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}
.bso-hero .bso-btn-link a.elementor-button:hover {
  color: var(--bso-red-light) !important;
  border-bottom-color: var(--bso-red-light) !important;
}
.bso-hero-content .elementor-widget-button { display: inline-block; width: auto; vertical-align: middle; margin-top: 18px; }
.bso-btn-link { margin-left: 14px; }
.bso-btn-link a.elementor-button {
  background: transparent !important;
  color: var(--bso-navy) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 0 0 2px 0 !important;
  border: none !important;
  border-bottom: 2px solid var(--bso-navy) !important;
  border-radius: 0 !important;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-btn-link a.elementor-button:hover {
  color: var(--bso-red) !important;
  border-bottom-color: var(--bso-red) !important;
}

/* Hero: vrstva videa přes celou sekci (bez z-indexu, aby štítek mohl nad gradient) */
.bso-hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Rozměr iframu dopočítává bsoHeroVideoCover() v custom.js (cover při zachování
   16:9; procenta to napříč osami neumí). min-width/min-height jsou jen fallback
   bez JS — s nimi samotnými by iframe přebil aspect-ratio a YouTube by uvnitř
   dorovnal poměr černými pruhy. */
.bso-hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 101%;
  min-height: 101%;
  width: auto;
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  filter: saturate(0.8) brightness(0.85);
  border: 0;
  z-index: 1;
  /* iframe musí smět přetéct obal (cover); globální max-width: 100% ho jinak
     ořízne na šířku obalu a dopočet z JS se neprojeví */
  max-width: none !important;
  max-height: none !important;
}

/* USP: navy pás se švy mezi položkami */
.bso-usp { padding: 0; }
.bso-usp > .elementor-container {
  background: var(--bso-navy-dark);
  border-radius: var(--bso-radius);
  padding: 20px 28px;
}
.bso-usp .elementor-column { position: relative; }
/* položka = ikona (::before jako flex prvek) + textový blok, vystředěná ve své třetině */
.bso-usp-item > .elementor-column-wrap.elementor-element-populated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 12px;
  position: relative;
}
.bso-usp-item .elementor-widget-wrap { width: auto; }
.bso-usp-item .elementor-heading-title {
  font-family: var(--bso-condensed) !important;
  font-size: 19px !important;
  letter-spacing: 0.05em;
  color: #ffffff !important;
  margin-bottom: 1px;
}
.bso-usp-item p { font-size: 13px; color: #c8c5e8; margin-bottom: 0; }
/* Odkaz na recenze (Heureka v češtině a slovenštině, jinde Google). Drží
   barvu popisku, aby pruh zůstal klidný; podtržení se ukáže až pod myší,
   jinak by tři třetiny pruhu vypadaly jako tři různé úrovně důležitosti. */
.bso-usp-item .bso-usp-odkaz {
  color: #c8c5e8 !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 197, 232, 0.35);
}
.bso-usp-item .bso-usp-odkaz:hover,
.bso-usp-item .bso-usp-odkaz:focus {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}
/* ikony (bílé s červeným akcentem) */
.bso-usp-item > .elementor-column-wrap.elementor-element-populated::before {
  content: "";
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
  background-size: contain;
}
.bso-usp-doprava > .elementor-column-wrap.elementor-element-populated::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10v10H6'/%3E%3Cpath d='M14 9h3.5l2.5 3v4h-2.2'/%3E%3Ccircle cx='8.6' cy='17.4' r='1.7'/%3E%3Ccircle cx='16.4' cy='17.4' r='1.7'/%3E%3Cpath d='M1.5 9h3M1 12h3.5' stroke='%23ff5a63' stroke-width='1.6'/%3E%3C/svg%3E");
}
.bso-usp-prodejna > .elementor-column-wrap.elementor-element-populated::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1.2-4h13.6L20 9'/%3E%3Cpath d='M4 9c0 1.2 1 2.2 2.2 2.2S8.4 10.2 8.4 9c0 1.2 1 2.2 2.2 2.2s2.2-1 2.2-2.2c0 1.2 1 2.2 2.2 2.2S17.2 10.2 17.2 9c0 1.2 1 2.2 2.2 2.2' stroke='%23ff5a63' stroke-width='1.5'/%3E%3Cpath d='M5 11.5V20h14v-8.5'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3C/svg%3E");
}
.bso-usp-overeno > .elementor-column-wrap.elementor-element-populated::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.5 5 5.5.7-4 3.9 1 5.5-5-2.7-5 2.7 1-5.5-4-3.9 5.5-.7z'/%3E%3Ccircle cx='18.6' cy='17.6' r='3.6' fill='%23221b5e' stroke='%23ff5a63' stroke-width='1.6'/%3E%3Cpath d='M17.2 17.6l1 1 1.8-2' stroke='%23ff5a63' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* svislé švy mezi položkami */
.bso-usp .elementor-column + .elementor-column::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='64' viewBox='0 0 14 64'%3E%3Cpath d='M4 2 C10 22 10 42 4 62' fill='none' stroke='%23ff5a63' stroke-opacity='0.7' stroke-width='2' stroke-dasharray='5 5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
/* první šev (na 2. sloupci) zrcadlově: dvojice ( ) rámuje prostřední sloupec jako švy míčku */
.bso-usp .elementor-column:nth-child(2)::before { transform: translateY(-50%) scaleX(-1); }

/* Bannery lícují s navy USP pruhem nad nimi, tedy s hranou .elementor-container
   (USP kreslí pozadí na kontejner, jeho vnitřní padding 28 je uvnitř barvy).
   Šířku bannerů brala dvě odsazení po 15 px na každé straně: boxed kontejner
   (.elementor-section-boxed > .elementor-container) a column-wrap Elementoru.
   Obě se tady nulují, obrázek pak drží plnou šířku sekce; mezi bannery 14 px. */
.bso-banner > .elementor-container { padding-left: 0; padding-right: 0; }
.bso-banner .elementor-column-wrap.elementor-element-populated { padding: 0; }
.bso-banner .elementor-widget-image,
.bso-banner .elementor-widget-image .elementor-widget-container { margin: 0; padding: 0; }
.bso-banner .elementor-widget-image + .elementor-widget-image { margin-top: 14px; }
.bso-banner .elementor-image { line-height: 0; }
.bso-banner-img img {
  border-radius: var(--bso-radius);
  width: 100%;
  transition: opacity var(--bso-prechod);
}
.bso-banner-img a:hover img { opacity: 0.92; }
/* Dva bannery vedle sebe (vnořená sekce 50/50 v mutacích): mezera nad nimi i mezi nimi 14 px
   jako mezi bannery pod sebou, okraje zarovnané s bannerem přes celou šířku nad nimi;
   pod 768 px se sloupce skládají pod sebe se stejnou mezerou. */
.bso-banner .elementor-widget-image + .elementor-inner-section { margin-top: 14px; }
.bso-banner .elementor-inner-section > .elementor-container { padding-left: 0; padding-right: 0; }
.bso-banner .elementor-inner-section .elementor-row { margin-left: -7px; margin-right: -7px; }
.bso-banner .elementor-inner-section .elementor-column { padding-left: 7px; padding-right: 7px; }
@media (max-width: 767.98px) {
  .bso-banner .elementor-inner-section .elementor-row { margin-left: 0; margin-right: 0; }
  .bso-banner .elementor-inner-section .elementor-column { padding-left: 0; padding-right: 0; }
  .bso-banner .elementor-inner-section .elementor-column + .elementor-column { margin-top: 14px; }
}

/* Kategorie karty s čísly */
.bso-kategorie .elementor-row,
.bso-hry .elementor-row,
.bso-onas .elementor-row { margin-left: -9px; margin-right: -9px; }
.bso-kategorie .elementor-column,
.bso-hry .elementor-column,
.bso-onas .elementor-column { padding: 0 9px; }
.bso-kat-card > .elementor-column-wrap.elementor-element-populated {
  padding: 22px;
  overflow: hidden;
  position: relative;
}
/* Celá karta je klikatelná.
   Elementor dává odkaz jen kolem nadpisu, takže kurzor sice ukazoval ruku
   (to řeší `cursor: pointer` na kartě), ale kliknout šlo doopravdy jen na text.
   Odkaz proto roztahujeme přes `::after` přes celou kartu. Aby se rozměr
   počítal od karty a ne od widgetu, musí mezilehlé obaly Elementoru přestat
   být pozicované; `.elementor-widget` a `.elementor-widget-wrap` mají
   od Elementoru `position: relative`, stejně jako nadpis `.elementor-heading-title`
   a samotný odkaz. Dokud kterýkoli z nich pozicovaný zůstal, `::after` se
   počítalo od něj a odkaz zůstal velký jako text. V kartě není nic absolutně
   pozicovaného, takže je zrušení bez následků.
   Vodoznak v rohu má `pointer-events: none`, takže klikání nebrání.
   Platí pro horní kartičky kategorií i pro dlaždice „Nakupujte podle hry",
   které mají stejnou stavbu; u nich je odkaz jen kolem titulku dole.
   `!important` je tu nutné: Elementor se v kompilovaném theme.css načítá
   až za námi a se stejnou specificitou tak přebíjí naše `position: static`. */
:is(.bso-kat-card, .bso-hry .elementor-column) :is(
  .elementor-widget,
  .elementor-widget-wrap,
  .elementor-heading-title,
  a
) { position: static !important; }

:is(.bso-kat-card, .bso-hry .elementor-column) > .elementor-column-wrap a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Text musí zůstat nad dekorací karty.
   Karta má pod textem pozicovanou výplň: u dlaždic „Nakupujte podle hry"
   je to `::before` s tmavým přechodem, u kartiček kategorií `::after`
   s vodoznakem. Dokud byl titulek `position: relative`, kreslil se nad nimi
   sám od sebe; jakmile jsme ho kvůli roztažení odkazu zestatičtěli, přechod
   se dostal nad text a titulky zšedly.
   `.elementor-column-wrap` je flex kontejner, takže `.elementor-widget-wrap`
   je flex položka a `z-index` na ní platí i bez pozicování. Tím se text
   dostane nad výplň, aniž bychom se vraceli k `position: relative`. */
:is(.bso-kat-card, .bso-hry .elementor-column) > .elementor-column-wrap::before,
:is(.bso-kat-card, .bso-hry .elementor-column) > .elementor-column-wrap::after { z-index: 0; }

:is(.bso-kat-card, .bso-hry .elementor-column) > .elementor-column-wrap > .elementor-widget-wrap { z-index: 1; }

/* vodoznakové ilustrace v rohu karty (schválený návrh Submenu.dc.html,
   místo dřívějších číslic 01–04); texty drží nad ilustrací přes z-index */
.bso-kat-card > .elementor-column-wrap::after {
  content: "";
  position: absolute;
  width: 124px;
  height: 124px;
  right: -16px;
  top: -14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
.bso-kat-01 > .elementor-column-wrap::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='rotate(10 60 60)'%3E%3Cg transform='translate(68 50) scale(1.12) translate(-60 -60)'%3E%3Cg fill='%23f0f0f5'%3E%3Cg transform='rotate(38 60 60)'%3E%3Crect x='51' y='6' width='18' height='66' rx='9'/%3E%3Crect x='55' y='66' width='10' height='30' rx='5'/%3E%3Ccircle cx='60' cy='100' r='8'/%3E%3C/g%3E%3Cg transform='rotate(-38 60 60)'%3E%3Crect x='51' y='6' width='18' height='66' rx='9'/%3E%3Crect x='55' y='66' width='10' height='30' rx='5'/%3E%3Ccircle cx='60' cy='100' r='8'/%3E%3C/g%3E%3Ccircle cx='60' cy='18' r='12'/%3E%3C/g%3E%3Cpath d='M52 12 A14 14 0 0 1 55 25' fill='none' stroke='%23ffffff' stroke-width='2' stroke-dasharray='2.5 3' stroke-linecap='round'/%3E%3Cpath d='M68 12 A14 14 0 0 0 65 25' fill='none' stroke='%23ffffff' stroke-width='2' stroke-dasharray='2.5 3' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.bso-kat-02 > .elementor-column-wrap::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='rotate(-8 60 60)'%3E%3Cg fill='%23f0f0f5'%3E%3Ccircle cx='72' cy='42' r='28'/%3E%3Crect x='40' y='36' width='62' height='54' rx='26'/%3E%3Crect x='22' y='30' width='20' height='44' rx='10' transform='rotate(-24 32 52)'/%3E%3Crect x='34' y='24' width='26' height='20' rx='9' transform='rotate(-18 47 34)'/%3E%3C/g%3E%3Cpath d='M40 54 L53 40' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='70' cy='64' r='16' fill='%23ffffff'/%3E%3Ccircle cx='70' cy='64' r='12.5' fill='%23f0f0f5'/%3E%3Cpath d='M62.5 55 A12.5 12.5 0 0 0 62.5 73' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-dasharray='2 2.4' stroke-linecap='round'/%3E%3Cpath d='M77.5 55 A12.5 12.5 0 0 1 77.5 73' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-dasharray='2 2.4' stroke-linecap='round'/%3E%3Cpath d='M46 90 A36 30 0 0 0 98 72' fill='none' stroke='%23ffffff' stroke-width='2' stroke-dasharray='3 3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"); }
.bso-kat-03 > .elementor-column-wrap::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='rotate(8 60 60)'%3E%3Cg transform='translate(76 42) scale(1.5) translate(-60 -60)'%3E%3Cg fill='%23f0f0f5'%3E%3Cpath d='M24 70 A36 34 0 0 1 96 70 L96 78 L24 78 Z'/%3E%3Crect x='2' y='68' width='58' height='13' rx='6.5'/%3E%3Crect x='72' y='74' width='27' height='30' rx='11'/%3E%3C/g%3E%3Ccircle cx='85' cy='89' r='5.5' fill='%23ffffff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.bso-kat-04 > .elementor-column-wrap::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='rotate(11 60 60)'%3E%3Cg transform='translate(70 46) scale(1.3) translate(-60 -60)'%3E%3Cg fill='%23f0f0f5'%3E%3Crect x='70' y='24' width='24' height='48' rx='10'/%3E%3Crect x='10' y='48' width='72' height='24' rx='12'/%3E%3Crect x='8' y='68' width='90' height='10' rx='5'/%3E%3Crect x='18' y='80' width='11' height='8' rx='3'/%3E%3Crect x='46' y='80' width='11' height='8' rx='3'/%3E%3Crect x='74' y='80' width='11' height='8' rx='3'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M40 52 L50 58'/%3E%3Cpath d='M50 48 L60 54'/%3E%3Cpath d='M60 44 L70 50'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.bso-kat-card .elementor-heading-title,
.bso-kat-card .elementor-heading-title a {
  font-family: var(--bso-condensed) !important;
  font-size: 24px !important;
  color: var(--bso-navy) !important;
  position: relative;
  z-index: 1;
  margin-bottom: 2px;
  transition: color var(--bso-prechod);
}
.bso-kat-card .elementor-heading-title a:hover { color: var(--bso-red) !important; }
.bso-kat-card p { font-size: 13px; color: var(--bso-muted); position: relative; z-index: 1; margin: 0; }

/* Nakupujte podle hry */
.bso-hra-tile > .elementor-column-wrap.elementor-element-populated {
  border-radius: var(--bso-radius);
  overflow: hidden;
  min-height: 150px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  transition: box-shadow var(--bso-prechod);
}
.bso-hra-tile:hover > .elementor-column-wrap.elementor-element-populated {
  box-shadow: 0 6px 18px rgba(34, 27, 94, 0.25);
}
.bso-hra-baseball > .elementor-column-wrap { background-image: url("/img/cms/sekce/Baseball-vyrez2.png"); }
.bso-hra-softball > .elementor-column-wrap { background-image: url("/img/cms/sekce/Softball-vyrez2.png"); }
.bso-hra-palka > .elementor-column-wrap { background-image: url("/img/cms/sekce/Na_palce-vyrez2.png"); }
.bso-hra-pole > .elementor-column-wrap { background-image: url("/img/cms/sekce/V_poli-vyrez2.png"); }
.bso-hra-tile .elementor-column-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(34, 27, 94, 0.85) 0%, rgba(34, 27, 94, 0.05) 60%);
}
.bso-hra-tile .elementor-widget-wrap { position: relative; align-items: flex-end; }
.bso-hra-tile .elementor-widget-heading { padding: 0 18px 12px 18px; }
.bso-hra-tile .elementor-heading-title,
.bso-hra-tile .elementor-heading-title a {
  font-family: var(--bso-condensed) !important;
  font-size: 26px !important;
  color: #fff !important;
  margin: 0;
}

/* Produktové karty (miniatury — markup v child šabloně) */
.products-grid .product-miniature {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  overflow: hidden;
  height: 100%;
}
.products-grid .thumbnail-container { padding: 10px; }
.products-grid .product-miniature .product-thumbnail img {
  max-height: 175px;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}
.products-grid .product-miniature .product-description-min { border-top: 1px solid #f0f0f5; }
.product-miniature .product-title { text-align: left; }
.product-miniature .product-title,
.product-miniature .product-title a {
  font-weight: 600 !important;
  color: var(--bso-text) !important;
  transition: color var(--bso-prechod);
}
/* Název na dlaždici se ořezává po celých řádcích, ne uprostřed písmen.
   `!important` je nutné: šablona dává elementu bootstrapí třídu `.d-block`
   s `display: block !important`, která `-webkit-box` přebíjela. Ořez podle
   řádků se tím neuplatnil, zbyla jen pevná výška s `overflow: hidden`
   a čtvrtý řádek se uřízl v půlce. */
.product-miniature .product-title {
  font-size: 14px;
  line-height: 1.35;
  min-height: 57px;
  max-height: 57px;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bso-mini-actions .btn-product-list .bag-icon { display: none; }
.product-miniature .product-title a:hover { color: var(--bso-red) !important; }
.product-miniature .product-price {
  font-family: var(--bso-condensed) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--bso-navy-dark) !important;
}
.product-miniature .has-discount .product-price,
.product-miniature .product-price.price-sale {
  color: var(--bso-red) !important;
}
.product-miniature .regular-price {
  font-size: 13px;
  color: var(--bso-muted-2);
  text-decoration: line-through;
}
.product-flag.new {
  background: var(--bso-red);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
}
.product-flag.discount, .product-flag.on-sale,
.product-flag.dm_color.yellow {
  background: var(--bso-zluta);
  color: var(--bso-navy-dark);
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
}

/* Štítky z modulu dm_label leží ve stejném seznamu jako odznak slevy, ale
   nesou vlastní třídy (dm_color + název barvy) a bez tohohle sjednocení
   měly hranaté rohy, jiný odstín žluté a jinou velikost písma. Geometrie
   je proto společná pro všechny štítky v pruhu. */
.product-flags .product-flag,
.product-flags .product-flag.dm_color {
  font-family: var(--bso-base);
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
  border: 0;
  letter-spacing: 0.02em;
}

/* Ostatní barvy modulu na paletu e-shopu, ať nevznikne cizí odstín. */
.product-flag.dm_color.red { background: var(--bso-red); color: #fff; }
.product-flag.dm_color.green { background: var(--bso-zelena); color: #fff; }
.product-flag.dm_color.blue { background: var(--bso-navy); color: #fff; }
.bso-mini-stock {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--bso-zelena);
  font-weight: 600;
}
.bso-mini-stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bso-zelena);
}
.bso-mini-stock--out { color: var(--bso-oranzova); }
.bso-mini-stock--out::before { background: var(--bso-oranzova); }
.bso-mini-ref { font-size: 11px; color: #b9b9c6; }
.bso-mini-actions { display: flex; gap: 8px; align-items: stretch; margin-top: auto; padding-top: 6px; }
.bso-mini-actions .product-add-cart,
.bso-mini-actions form { width: 100%; }
.bso-mini-actions .input-group-add-cart {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.bso-mini-actions .input-group-add-cart .btn-product-list { flex-grow: 1; }
/* stepper dle Hero2.dc.html: box 34 px, SVG ±11 px ve čtvercích 30×34, utlumené číslo */
.bso-mini-qty {
  display: flex;
  align-items: stretch;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #e2e2ea;
  border-radius: var(--bso-radius-s);
  overflow: hidden;
}
.bso-mini-qty input {
  width: 26px;
  border: none;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--bso-muted);
  background: transparent;
  height: auto;
  padding: 0;
}
.bso-mini-qty button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--bso-prechod);
}
.bso-mini-qty button:hover { opacity: 0.65; }
/* na limitu (sklad/minimum) tlačítko ztlumit, ať nepůsobí rozbitě */
.bso-mini-qty.is-max .js-bso-qty-up,
.bso-mini-qty.is-min .js-bso-qty-down { opacity: 0.3; cursor: default; }
.bso-mini-actions .add-to-cart,
.bso-mini-actions .btn-product-list {
  flex-grow: 1;
  background: var(--bso-navy) !important;
  color: #fff !important;
  border-radius: var(--bso-radius-s) !important;
  font-size: 13px;
  font-weight: 600;
  border: none;
  transition: background var(--bso-prechod);
}
.bso-mini-actions .add-to-cart:hover,
.bso-mini-actions .btn-product-list:hover { background: var(--bso-red) !important; }

/* Prodejna: full-bleed navy pás (pozadí i fotka od okraje k okraji okna),
   obsah lícuje se středovou mřížkou 1320 (obsahový sloupec max 660 = polovina) */
.bso-prodejna {
  background: var(--bso-navy-dark);
  color: #fff;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* 100vw počítá i scrollbar a menu fullwidth přetéká přes -500% margin:
   přesahy řeže clip na obalu obsahu (clip nevytváří scroll kontejner). */
#main-page-content { overflow-x: clip; }
/* Sticky menu (Waypoint se context: window): html/body height 100 % z Warehouse
   dělá z body scroll container, window scroll je mrtvý a sticky se nikdy
   nechytí. Stejný přepis dělá Warehouse ve větvi f_fixed; scroll pak jde
   normálně přes window (funguje i window.scrollTo). */
html, body { height: auto; min-height: 100%; }
/* !important: elementor CSS drží boxed max-width 1270 i přes pozdější pořadí */
.bso-prodejna > .elementor-container { max-width: none !important; padding: 0; }
.bso-prodejna .elementor-row { min-height: 380px; }
.bso-prodejna-photo {
  background-image: url("/img/cms/BSO-prodejna.jpg");
  background-size: cover !important;
  background-position: center !important;
  min-height: 380px;
}
.bso-prodejna-content .elementor-element-populated {
  padding: 40px 48px !important;
  max-width: 660px;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.bso-prodejna .elementor-heading-title {
  font-family: var(--bso-condensed) !important;
  font-size: 36px !important;
  color: #fff !important;
  margin-bottom: 4px;
}
.bso-prodejna h2.elementor-heading-title::after {
  content: "";
  display: block;
  width: 110px;
  height: 11px;
  margin-top: 5px;
  background: var(--bso-sev-svetly) no-repeat;
}
.bso-prodejna p { color: #c8c5e8; font-size: 15px; }
.bso-prodejna-content .elementor-widget-text-editor .elementor-widget-container { margin-bottom: 10px; }
.bso-prodejna .bso-btn-cta a.elementor-button {
  font-size: 17px !important;
  padding: 12px 26px !important;
}
.bso-prodejna-karta .elementor-widget-container {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--bso-radius);
  padding: 14px 16px;
}
.bso-prodejna-karta p { font-size: 13px; margin: 0; }
.bso-prodejna-karta .bso-prodejna-karta-nadpis {
  font-family: var(--bso-condensed);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
}
/* karty Kontakt a Otevírací doba: vnořená sekce 50/50 (build_homepage.php),
   stejná výška obou karet přes height 100 % celé cesty column → container */
.bso-prodejna-karty { margin-top: 16px; }
.bso-prodejna-karty > .elementor-container { max-width: none !important; padding: 0; }
/* vnořený řádek nesmí zdědit min-height 380 sekce prodejny */
.bso-prodejna-karty .elementor-row { min-height: 0; }
/* mezera 16 px rozpůlená mezi sloupce: obě karty stejně široké */
.bso-prodejna-karty .elementor-column:first-child { padding-right: 8px; }
.bso-prodejna-karty .elementor-column + .elementor-column { padding-left: 8px; }
.bso-prodejna-karty .elementor-column-wrap,
.bso-prodejna-karty .elementor-widget-wrap,
.bso-prodejna-karty .bso-prodejna-karta,
.bso-prodejna-karty .bso-prodejna-karta .elementor-widget-container { height: 100%; }
/* reset: obecné pravidlo .bso-prodejna-content .elementor-element-populated
   (padding 40/48, flex, center) dopadalo i na sloupce vnořené sekce karet */
.bso-prodejna-karty .elementor-element-populated {
  padding: 0 !important;
  height: 100%;
  display: block;
  justify-content: initial;
}
.bso-prodejna-content .elementor-widget-button { display: inline-block; width: auto; vertical-align: middle; margin-top: 16px; }
.bso-prodejna-content .bso-prodejna-doprava { display: inline-block; width: auto; vertical-align: middle; margin-left: 14px; margin-top: 16px; }
.bso-prodejna-doprava p {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  /* stejná výška jako CTA tlačítko (změřeno 49.5 px): středy obou widgetů se kryjí */
  min-height: 49.5px;
  font-size: 13px;
  color: #c8c5e8;
  margin: 0;
}
/* obecné pravidlo text-editorů v prodejně dává containeru margin-bottom 10:
   u poznámky s kamionem posouvalo střed o 5 px nahoru */
.bso-prodejna-content .bso-prodejna-doprava .elementor-widget-container { margin-bottom: 0; }
.bso-prodejna-doprava p::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a63' stroke-width='2'%3E%3Cpath d='M3 7h11v10H3z'/%3E%3Cpath d='M14 10h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* O nás + Bezpečný nákup */
.bso-onas-card > .elementor-column-wrap.elementor-element-populated { padding: 26px 28px; }
.bso-onas-card p { font-size: 14px; line-height: 1.6; color: #55555f; margin-bottom: 10px; }
.bso-certifikaty img { max-height: 58px; width: auto; }
/* vnitřní tok karty: nadpis+šev, 12px, text, 12px, certifikáty vlevo */
.bso-onas-card .elementor-widget-text-editor { margin-top: 12px; }
.bso-onas-card .elementor-widget-text-editor p { font-size: 14px; line-height: 1.6; color: #55555f; margin: 0; }
.bso-onas-card .bso-certifikaty { margin-top: 12px; text-align: left; }
.bso-onas-card .bso-certifikaty img { max-height: 58px; width: auto; }

/* Značky (carousel widgetu Brands) */
.bso-znacky img {
  filter: grayscale(1);
  opacity: 0.75;
  max-height: 46px;
  width: auto;
  margin: 0 auto;
  transition: filter var(--bso-prechod), opacity var(--bso-prechod);
}
.bso-znacky img:hover { filter: none; opacity: 1; }
.bso-znacky .swiper-slide, .bso-znacky .brand-item {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
/* šipky: bílé kruhy v bočních gutterech karuselu (52 px padding kontejneru),
   svisle na středu mezery mezi dvěma řadami karet (řada 98 px → top 98 − 21) */
.bso-znacky .swiper-container {
  padding-left: 52px;
  padding-right: 52px;
  /* overflow ořezává až na hraně paddingu: sousední karty by prosvítaly v gutterech */
  clip-path: inset(0 52px);
}
.bso-znacky .swiper-button-prev, .bso-znacky .swiper-button-next {
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(34, 27, 94, 0.1);
  color: var(--bso-navy);
  padding: 0;
  margin: 0;
  opacity: 1;
  top: 77px;
  z-index: 3;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-znacky .swiper-button-prev { left: 0; }
.bso-znacky .swiper-button-next { right: 0; }
.bso-znacky .swiper-button-prev:hover, .bso-znacky .swiper-button-next:hover {
  color: var(--bso-red);
  border-color: var(--bso-red);
}
.bso-znacky .swiper-button-prev::after, .bso-znacky .swiper-button-next::after { font-size: 16px; font-weight: 700; }
/* tečky: pilulky, aktivní širší navy; stažení spodku sekce (dots-outside má
   z Warehouse padding 10 a min-height 40) */
.bso-znacky .swiper-pagination.swiper-dots-outside { margin-top: 10px; padding: 0; min-height: 0; }
.bso-znacky .swiper-pagination-bullet {
  width: 8px;
  height: 5px;
  border-radius: 3px;
  background: #d6d4d4;
  opacity: 1 !important;
  margin: 0 3px;
  transition: background var(--bso-prechod), width var(--bso-prechod);
}
.bso-znacky .swiper-pagination-bullet-active { width: 18px; background: var(--bso-navy); }

/* ══ 5. PATIČKA (obsah v modulech, editovatelný) ════════════════════════ */

.bso-footer-logo {
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  display: inline-block;
}
.bso-footer-logo img { width: 170px; height: auto; display: block; }
.bso-footer-tagline { font-size: 14px; color: #c8c5e8; line-height: 1.5; margin: 12px 0 10px 0; }
.bso-footer-legal { font-size: 11.5px; color: #6f6a9c; line-height: 1.55; margin: 0; }

/* míčkové odrážky u odkazů (jemné) */
#footer .block-links li, #footer .iqitlinksmanager-block li {
  list-style: none;
  position: relative;
  padding-left: 16px;
}
#footer .block-links li::before, #footer .iqitlinksmanager-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%238f8ab8' stroke-width='2'/%3E%3Cpath d='M6.5 4.5 C10 8.5 10 15.5 6.5 19.5 M17.5 4.5 C14 8.5 14 15.5 17.5 19.5' fill='none' stroke='%23ff5a63' stroke-width='1.8' stroke-dasharray='2.4 2.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
#footer a { transition: color var(--bso-prechod); }
#footer a:hover { color: #ffffff; }
#footer .block-links li a, #footer .iqitlinksmanager-block li a { font-size: 13px; }
.bso-footer-kontakt .block-content span { color: #c8c5e8; }

/* kontaktní řádky s tenkými ikonami (pin/telefon/mail/hodiny/kalendář) */
.bso-footer-kontakt .block-content span { display: flex; gap: 9px; align-items: center; font-size: 13px; margin-bottom: 8px; }
.bso-footer-kontakt .block-content span::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-size: contain;
}
.bso-fk-adresa::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8ab8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4-4.5-7-7.7-7-11a7 7 0 0 1 14 0c0 3.3-3 6.5-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.bso-fk-telefon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8ab8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a12 12 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.bso-fk-email::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8ab8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.bso-fk-hodiny1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8ab8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
/* telefony na jednom řádku s jednou ikonou; když se nevejdou, druhé číslo se
   zalomí pod první zarovnané s textem (ikona absolutně, závěs 23 px = 14 + 9) */
.bso-footer-kontakt .block-content .bso-fk-telefon {
  display: block;
  position: relative;
  padding-left: 23px;
}
.bso-footer-kontakt .block-content .bso-fk-telefon::before {
  position: absolute;
  left: 0;
  top: 2px;
}
/* poznámka pod provozní dobou: bez ikony, odsazená na text řádků nad ní */
.bso-footer-kontakt .block-content .bso-fk-pozn {
  font-size: 12px;
  font-style: italic;
  color: #8f8ab8;
  padding-left: 23px;
}
.bso-footer-kontakt .block-content .bso-fk-pozn::before { content: none; display: none; }

/* nadpisy sloupců: kondenzované, bez podtržení; nadpis brand sloupce skrytý */
#footer .block-title, #footer .block-title.h5 {
  font-family: var(--bso-condensed) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: #fff !important;
  border-bottom: none !important;
  padding-bottom: 0;
  margin-bottom: 14px;
}
#footer .block-title::after { display: none !important; }
/* Bloky 3 (brand), 4 (platební pás) a 6 (copyright) jsou v návrhu bez nadpisu;
   iqithtmlandbanners ale vypisuje název bloku z administrace, a ten je česky
   ve všech jazycích (je to interní název, ne obsah). Proto se nadpis skrývá. */
#footer #iqithtmlandbanners-block-3 .block-title,
#footer #iqithtmlandbanners-block-4 .block-title,
#footer #iqithtmlandbanners-block-6 .block-title,
#footer .block-banners .block-title { display: none; }

/* Sledujte nás: čtverečky s rámečkem (dle návrhu) */
#footer .social-links._footer li a,
#footer .social-links._footer li a i { color: #fff !important; }
#footer .social-links._footer li a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12);
  transition: border-color var(--bso-prechod), background var(--bso-prechod);
}
#footer .social-links._footer li a:hover { border-color: var(--bso-red); background: var(--bso-red); }

/* Zpravodaj: pole a červené odesílací tlačítko tvoří jeden ovládací prvek.
   Rámeček proto drží obal, ne vstupní pole; kdyby ho mělo pole, zůstane mezi
   ním a tlačítkem linka a zaoblený pravý roh, na který tlačítko nenavazuje.
   Theme editor generuje specifičtější selektory `#footer .ps-emailsubscription-block …`,
   proto jsou tady selektory zesílené. */
#footer .newsletter-input-group,
#footer .ps-emailsubscription-block .newsletter-input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--bso-radius-s) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#footer .input-subscription,
#footer .ps-emailsubscription-block .newsletter-input-group input.input-subscription {
  flex: 1;
  min-width: 0;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 13px;
  box-sizing: border-box;
}
#footer .ps-emailsubscription-block input.input-subscription:focus {
  outline: none !important;
  box-shadow: none !important;
}
#footer .input-subscription::placeholder { color: #8f8ab8 !important; }
#footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder { color: #8f8ab8; }
#footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder { color: #8f8ab8; }

/* Obal tlačítka nesmí přidávat vlastní výšku ani odsazení. */
#footer .newsletter-input-group .input-group-append,
#footer .ps-emailsubscription-block .newsletter-input-group .input-group-append {
  display: flex;
  align-items: stretch;
  margin: 0 !important;
}

#footer .btn-subscribe,
#footer .ps-emailsubscription-block .btn-subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: auto !important;
  align-self: stretch;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--bso-red) !important;
  box-shadow: none !important;
  transition: background var(--bso-prechod);
}
#footer .btn-subscribe:hover { background: var(--bso-red-hover) !important; }
#footer .btn-subscribe:focus { outline: none !important; box-shadow: none !important; }

#footer .btn-subscribe .fa-envelope-o {
  display: block;
  line-height: 0;
}
#footer .btn-subscribe .fa-envelope-o::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Copyright řádek (obsah v iqithtmlandbanners bloku 6) */
.bso-footer-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 28px;
  padding-top: 16px;
  font-size: 12px;
  color: #c8c5e8;
}

/* Platební lišta úplně dole: text vlevo, loga vpravo (dle návrhu) */
#footer-copyrights { background: #fff; }
#footer-copyrights .row { flex-wrap: nowrap; }
#footer-copyrights .copyright-txt { color: var(--bso-muted-2); text-align: left; order: 1; }
#footer-copyrights .copyright-img { text-align: right; order: 2; }

/* Značky: velké sjednocené karty (dle návrhu) */
.bso-znacky .swiper-slide {
  padding: 7px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.bso-znacky .swiper-slide a {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 84px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  padding: 12px;
  transition: box-shadow var(--bso-prechod);
}
.bso-znacky .swiper-slide a:hover { box-shadow: var(--bso-stin-hover); }
.bso-znacky .swiper-slide img {
  max-height: 46px;
  max-width: 82%;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--bso-prechod), opacity var(--bso-prechod);
}
.bso-znacky .swiper-slide a:hover img { filter: grayscale(0); opacity: 1; }

/* platební pás */
.bso-platby {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}
.bso-platby span { font-size: 12px; color: var(--bso-muted-2); }
.bso-platby img { height: 22px; width: auto; }

/* ══ 6. RESPONZIVITA ════════════════════════════════════════════════════ */

/* ≤1199: menší hero, menu těsnější */
@media (max-width: 1199.98px) {
  .bso-hero-title .elementor-heading-title { font-size: 44px !important; }
  .bso-hero-content .elementor-element-populated { padding: 40px 32px !important; }
  #iqitmegamenu-horizontal .cbp-hrmenu-tab > a { font-size: 14px !important; }
  #iqitmegamenu-horizontal .cbp-mainlink-iicon { height: 15px; }
  /* topbar: adresa se pod 1200 nevejde; s ní musí zmizet i oddělovač za ní,
     jinak lišta začíná osamocenou tečkou (obal .bso-tc-sep dělá custom.js) */
  .bso-tc-adresa,
  .bso-tc-adresa + .bso-tc-sep { display: none !important; }
}

/* ≤991: hero pod sebou, USP sloupec, kategorie/hry 2×2 */
@media (max-width: 991.98px) {
  /* hero v2 na mobilu: výška podle obsahu, obsah přes celou šířku, tmavší gradient */
  .bso-hero { min-height: 0; }
  .bso-hero .elementor-row { min-height: 0; }
  .bso-hero-content .elementor-element-populated { max-width: none; }
  .bso-hero::after { background: linear-gradient(90deg, rgba(22, 18, 63, 0.9) 0%, rgba(22, 18, 63, 0.7) 100%); }
  /* USP pruh dle Mobil.dc.html: padding 14/16, ikona 28, nadpis 16, podtitulek
     12, mezera ikona→text 12. Na mobilu jede jako slider (custom.js), třídy
     swiperu přidává JS; bez JS zůstane fallback = položky pod sebou. */
  .bso-usp > .elementor-container { padding: 14px 16px; position: relative; }
  .bso-usp .elementor-row { flex-wrap: wrap; }
  .bso-usp .elementor-column { width: 100% !important; }
  .bso-usp .elementor-column + .elementor-column::before { display: none; }
  .bso-usp-item > .elementor-column-wrap.elementor-element-populated {
    justify-content: flex-start;
    gap: 12px;
    /* vpravo místo pro tečky, ať do nich text nenaráží */
    padding: 0 46px 0 0;
  }
  .bso-usp-item > .elementor-column-wrap.elementor-element-populated::before { width: 28px; height: 28px; }
  .bso-usp-item .elementor-heading-title { font-size: 16px !important; }
  .bso-usp-item p { font-size: 12px; }
  /* slider aktivní: řádek je swiper-wrapper, nesmí se lámat.
     overflow: hidden ořezává až na hraně PADDING boxu, takže s vodorovným
     paddingem 16 prosvítal v pravém pruhu následující slide. V režimu slideru
     proto container padding vlevo/vpravo nemá (ořez = hrana navy karty)
     a odsazení obsahu si nese samotná položka. */
  .bso-usp.bso-usp-slider > .elementor-container {
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
  }
  .bso-usp.bso-usp-slider .bso-usp-item > .elementor-column-wrap.elementor-element-populated {
    padding-left: 16px;
    padding-right: 62px;
  }
  .bso-usp.bso-usp-slider .elementor-row { flex-wrap: nowrap; align-items: stretch; }
  .bso-usp.bso-usp-slider .elementor-column { height: auto; }
  /* tečky vpravo uvnitř pruhu (Mobil.dc.html): aktivní pilulka 14x4 bílá,
     neaktivní 6x4 rgba(255,255,255,0.35), gap 4, radius 2 */
  .bso-usp-dots.swiper-pagination {
    position: absolute;
    left: auto;
    bottom: auto;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    width: auto;
    z-index: 2;
  }
  .bso-usp-dots .swiper-pagination-bullet {
    width: 6px;
    height: 4px;
    margin: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    opacity: 1;
    transition: width var(--bso-prechod), background var(--bso-prechod);
  }
  .bso-usp-dots .swiper-pagination-bullet-active { width: 14px; background: #ffffff; }
  .bso-kategorie .elementor-column, .bso-hry .elementor-column { width: 50% !important; }
  .bso-kategorie .elementor-row, .bso-hry .elementor-row { flex-wrap: wrap; }
  .bso-prodejna .elementor-row { flex-wrap: wrap; }
  .bso-prodejna .elementor-column { width: 100% !important; }
  .bso-prodejna-photo { min-height: 260px; }
  /* full-bleed zůstává, ale obsahový sloupec pod fotkou přes celou šířku */
  .bso-prodejna-content .elementor-element-populated { max-width: none; margin-right: 0; }
  .bso-onas .elementor-row { flex-wrap: wrap; }
  .bso-onas .elementor-column { width: 100% !important; }
  .bso-onas-card { margin-bottom: 14px; }
  :root { --bso-sekce-mezera: 40px; }
  /* topbar: pod 992 zůstává jen telefon (a e-mail mizí, adresa už od 1200);
     s e-mailem mizí i oddělovač před ním, ať lišta nekončí tečkou */
  .bso-tc-email,
  .bso-tc-sep:has(+ .bso-tc-email) { display: none !important; }
  /* ── Mobilní hlavička varianta 1 (jeden řádek: burger | lupa | logo | účet | košík).
     Bílé pozadí a barvu ikon řeší theme editor (rm_* klíče); tady geometrie
     dle Mobil.dc.html: pruh padding 10/12, sloty 38×38, mezera 4, ikony 22
     (burger) a 21 (ostatní), logo 158. Tvar ikon kreslí inline SVG z child
     šablony templates/_partials/_variants/mobile-header-1.tpl (Font Awesome
     má plné glyfy, návrh linkové). */
  #mobile-header-sticky > .container { padding-left: 12px; padding-right: 12px; }
  #mobile-header .mobile-main-bar { padding: 10px 0; }
  #mobile-header .row-mobile-header {
    margin-left: 0;
    margin-right: 0;
    gap: 4px;
    flex-wrap: nowrap;
  }
  #mobile-header .col-mobile-logo { padding: 0 4px; min-width: 0; }
  #mobile-header .col-mobile-logo img { max-width: 158px; height: auto; }
  #mobile-header .mobile-main-bar .m-nav-btn {
    padding: 0 !important;
    line-height: 1;
    display: flex;
    align-items: center;
  }
  #mobile-header .bso-mh-ico {
    width: 38px;
    height: 38px;
    /* vlastní obal inline SVG je <i>, které má výchozí kurzívu; ruší se tady,
       aby ji nedědilo počítadlo košíku uvnitř slotu */
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    border-radius: var(--bso-radius-s);
    transition: background var(--bso-prechod), color var(--bso-prechod);
  }
  #mobile-header .bso-mh-ico > svg { display: block; }
  /* aktivní hledání: světlý zaoblený čtverec s červenou lupou (návrh, sekce 3) */
  #mobile-btn-search .m-nav-btn[aria-expanded="true"] .bso-mh-ico,
  #mobile-btn-search .m-nav-btn.show .bso-mh-ico {
    background: #f2f2f6;
    color: var(--bso-red);
  }
  /* míček-počítadlo na mobilním košíku: 15×15 v pravém horním rohu slotu */
  #mobile-header .mobile-bag-icon .cart-products-count-btn {
    top: 2px;
    right: 0;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px;
    font-size: 9px !important;
    line-height: 13px !important;
  }

  /* ── Mobilní menu (dropdown pod burgerem): bílý panel přes celou šířku.
     Typografii a linky 1. úrovně řeší mm_* klíče (16/700/uppercase/navy, linka
     #e7e7ee); tady font rodina, ikony a podúrovně dle návrhu. */
  #iqitmegamenu-mobile .mobile-menu__link { font-family: var(--bso-condensed); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon { margin-right: 11px; }
  /* Odznak Ověřeno zákazníky je `position: fixed` s maximálním `z-index`
     (2147483647), takže leží nad vším včetně otevřeného mobilního menu
     a zakrýval ikony prvních čtyř kategorií. Skrývá se jen po dobu, kdy je
     menu otevřené; jinde na webu zůstává. Selektor stojí na `.show`, které
     na obal menu dává Bootstrap při otevření. */
  body:has(.dropdown-menu-custom.show) #hw-87kwowifjjowiklsadh666left,
  body:has(.dropdown-menu-custom.show) [id^="hw-"][id$="left"] {
    display: none !important;
  }

  /* PNG ikony megamenu jsou bílé, na bílém panelu by nebyly vidět.
     Dřív je barvil řetěz filtrů s `hue-rotate`, což je jen přibližná náhrada
     barvy: výsledek ujížděl do fialova a s navy zbytku designu neseděl.
     Maska bere z obrázku jen tvar a barvu dodá `background-color`, takže
     odstín je přesně ten z proměnné a při změně barvy se nedopočítává filtr.
     Cestu k obrázku CSS z `src` přečíst neumí, proto je pro každou ikonu
     jedno pravidlo; obrázků je deset a leží v `img/cms/ikony-40x40/`.
     Samotný obrázek se kreslit nesmí, proto ho `content` nahradí prázdným SVG. */
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img {
    width: 17px;
    height: 17px;
    max-height: 17px !important;
    opacity: 1;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3C/svg%3E");
    background-color: var(--bso-navy-dark);
    -webkit-mask: var(--bso-ikona) no-repeat center / contain;
    mask: var(--bso-ikona) no-repeat center / contain;
  }

  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="batoh-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/batoh-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="boty-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/boty-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="cepice-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/cepice-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="chranice-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/chranice-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="helma-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/helma-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="mice-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/mice-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="p-rukavicky-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/p-rukavicky-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="palka-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/palka-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="rukavice-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/rukavice-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__tab-icon--img[src*="textil-40x40"] { --bso-ikona: url("/img/cms/ikony-40x40/textil-40x40.png"); }
  #iqitmegamenu-mobile .mobile-menu__scroller { padding-top: 0 !important; padding-bottom: 0 !important; }
  /* podúrovně (panel s kategoriemi): světlé pozadí, 14 px, normal case, bez obrázků.
     Warehouse dává obalu kategorie margin-bottom 32 a skrytému obrázku dalších
     12 → řádky byly ~80 px vysoké a linky visely mimo text. Marginy nulujeme,
     rytmus drží padding 12/16 a min-height 46. */
  #iqitmegamenu-mobile .mobile-menu__submenu--panel {
    background: #f7f7f9;
    padding: 0 !important;
  }
  #iqitmegamenu-mobile .mobile-menu__category-image { display: none !important; }
  /* Warehouse dělí kategorie do sloupců s margin-bottom 32 — na mobilu jsou
     pod sebou, takže z toho byly díry uprostřed seznamu */
  #iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__row,
  #iqitmegamenu-mobile .mobile-menu__submenu--panel .mobile-menu__column {
    margin: 0 !important;
    padding: 0 !important;
  }
  #iqitmegamenu-mobile .mobile-menu__column-categories {
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f5;
  }
  /* linku ruší jen úplně poslední položka panelu; kategorie jsou rozdělené do
     několika .mobile-menu__column, takže prosté :last-child by ji sebralo
     na konci každého sloupce */
  #iqitmegamenu-mobile .mobile-menu__column:last-child .mobile-menu__column-categories:last-child { border-bottom: none; }
  #iqitmegamenu-mobile .mobile-menu__column-title,
  #iqitmegamenu-mobile .mobile-menu__submenu--panel a {
    font-family: 'Barlow', Arial, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--bso-text) !important;
    display: flex;
    align-items: center;
    min-height: 46px;
    margin: 0 !important;
    padding: 12px 16px;
    transition: color var(--bso-prechod);
  }
  #iqitmegamenu-mobile .mobile-menu__submenu--panel a:hover,
  #iqitmegamenu-mobile .mobile-menu__submenu--panel a:focus,
  #iqitmegamenu-mobile .mobile-menu__submenu--panel a.current { color: var(--bso-red) !important; }
  /* hlavička panelu: zpětná šipka i křížek min. 38×38 (dotyková plocha) */
  #iqitmegamenu-mobile .mobile-menu__back-btn,
  #iqitmegamenu-mobile .mobile-menu__close {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    min-width: 38px;
  }
  /* třetí úroveň: stejný rytmus, odsazení o 12 px navíc */
  #iqitmegamenu-mobile .mobile-menu__submenu--panel ul a { padding-left: 28px; }
  #iqitmegamenu-mobile .mobile-menu__submenu--panel ul ul a { padding-left: 40px; }
  #iqitmegamenu-mobile .mobile-menu__submenu--panel ul { margin: 0; padding: 0; list-style: none; }
  #iqitmegamenu-mobile .mobile-menu__submenu--panel li { border-top: 1px solid #f0f0f5; }
  /* spodní část menu (jazyk/měna + přihlášení): šedý pruh z mm_hf klíčů, decentní text */
  #iqitmegamenu-mobile .mobile-menu__footer { font-size: 12px; }
  #iqitmegamenu-mobile .mobile-menu__user,
  #iqitmegamenu-mobile .mobile-menu__user a {
    color: var(--bso-navy) !important;
    font-size: 14px;
    font-weight: 600;
  }

  /* ── Mobilní hledání (rozbalovací pod hlavičkou): stejný vzor jako desktop */
  #search-widget-mobile.dropdown-mobile {
    background: #fff;
    border: none;
    border-bottom: 1px solid #e2e2ea;
    box-shadow: 0 8px 18px rgba(18, 16, 31, 0.08);
    padding: 12px 12px 14px 12px;
  }
  #search-widget-mobile .input-group {
    background: #f2f2f6;
    border: 1px solid #e2e2ea;
    border-radius: var(--bso-radius-s);
    padding: 4px 4px 4px 13px;
    align-items: center;
    flex-wrap: nowrap;
    gap: 9px;
  }
  #search-widget-mobile .bso-search-ico { color: var(--bso-muted); font-size: 17px; }
  #search-widget-mobile .form-search-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14px;
    height: auto;
    /* 7 + 7 + 21 = 35 px, stejně vysoké jako tlačítko → pole 43 px dle návrhu */
    padding: 7px 0;
    min-width: 0;
    flex-grow: 1;
  }
  #search-widget-mobile .form-search-control::placeholder { color: var(--bso-muted-2); }
  #search-widget-mobile .search-btn {
    position: static !important;
    height: auto;
    line-height: 1.2;
    flex-shrink: 0;
    margin: 0 !important;
    align-self: center;
    font-size: 14px !important;
    letter-spacing: 0.06em;
    padding: 9px 18px !important;
    border-radius: 5px !important;
  }
}

/* ≤767: vše pod sebou, menší typografie */
@media (max-width: 767.98px) {
  .bso-hero-title .elementor-heading-title { font-size: 34px !important; }
  .bso-hero-content .elementor-element-populated { padding: 28px 20px !important; }
  .bso-hero-text { font-size: 15px; }
  .bso-h2 .elementor-heading-title { font-size: 26px !important; }
  .bso-kategorie .elementor-column, .bso-hry .elementor-column { width: 100% !important; }
  .bso-kat-card { margin-bottom: 4px; }
  /* dlaždice Nakupujte podle hry: na mobilu jsou pod sebou a lepily se na sebe;
     16 px svisle stejně jako ostatní karty (radius a stín drží karta) */
  .bso-hry .elementor-column + .elementor-column { margin-top: 16px; }
  .bso-prodejna-content .elementor-element-populated { padding: 24px 20px !important; }
  /* mobilní padding contentu výše dopadá i na vnořené karty (equal specificita,
     pozdější pořadí přebíjí reset z desktopové sekce) → zopakovat reset zde */
  .bso-prodejna-karty .elementor-element-populated { padding: 0 !important; }
  .bso-prodejna .elementor-heading-title { font-size: 28px !important; }
  .bso-prodejna-karty .elementor-row { flex-wrap: wrap; }
  .bso-prodejna-karty .elementor-column { width: 100% !important; }
  .bso-prodejna-karty .elementor-column:first-child { padding-right: 0; }
  /* rytmus: mezi kartami 16 px (margin-bottom containeru 10 z obecného pravidla
     text-editorů vynulovat), před tlačítkem Kudy k nám 24 px */
  .bso-prodejna-karty .bso-prodejna-karta .elementor-widget-container { margin-bottom: 0; }
  .bso-prodejna-karty .elementor-column + .elementor-column { padding-left: 0; margin-top: 16px; }
  .bso-prodejna-content .elementor-widget-button { margin-top: 24px; }
  .bso-platby { flex-direction: column; gap: 8px; }
  :root { --bso-sekce-mezera: 32px; }

  /* ── Horní lišta: telefon vlevo + jeden ovladač vpravo, 12 px, jeden řádek */
  #header .header-nav { font-size: 12px; }
  #header .header-nav .right-nav > div + div { margin-left: 10px; }

  /* Řádek lišty je bootstrapí `.row`, tedy `align-items: stretch`. Telefon je
     nižší než přepínač země a měny vedle něj, takže se lepil k hornímu okraji
     a proti němu seděl o tři pixely výš. Svisle se srovnají na střed. */
  #header .header-nav > .container > .row { align-items: center; }

  /* ── Kategorie nad filtry: sbalovací karta ─────────────────────────────
     Blok přesouvá nad pruh s Filtrovat skript v custom.js, protože je v jiném
     sloupci a pořadím v CSS to nejde. Šablona umí přepínat sama: klik na
     titulek přidá bloku `_toggled`. Warehouse ale to schování obsahu má
     scopované na patičku, takže tady zbývalo dopsat. Výchozí stav je sbalený;
     rozbalený je jen s `_toggled`, ať pruh s filtry zůstane hned na očích. */
  .block-categories.bso-kat-nad-filtry {
    background: #fff;
    border: 1px solid var(--bso-border);
    border-radius: var(--bso-radius);
    margin: 16px 0 12px 0;
    padding: 0;
  }
  /* `!important` je nutné: Warehouse dává titulku bloku spodní linku
     (`border-bottom: 2px solid`) i vlastní odsazení, protože v postranním
     sloupci odděluje nadpis od výpisu. Tady je box sbalený, takže ta linka
     visela pod nadpisem sama o sobě a protínala kartu. */
  .block-categories.bso-kat-nad-filtry > .block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 !important;
    padding: 13px 16px !important;
    border-bottom: 0 !important;
    cursor: pointer;
    /* Stejný vizuál jako nadpis boxu nejprodávanějších (sekce 22):
       Barlow Condensed 17/700 verzálkami, tmavá navy. `!important` ze
       stejného důvodu jako u linky výš: titulek nese od šablony třídu `h5`
       a její pravidla mají vyšší specificitu než náš selektor. */
    font-family: var(--bso-condensed) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: var(--bso-navy-dark) !important;
  }
  .block-categories.bso-kat-nad-filtry > .block-title::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--bso-muted);
    border-bottom: 2px solid var(--bso-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s ease;
  }
  .block-categories.bso-kat-nad-filtry._toggled > .block-title::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }
  .block-categories.bso-kat-nad-filtry > .block-content { display: none; }
  .block-categories.bso-kat-nad-filtry._toggled > .block-content {
    display: block;
    padding: 0 16px 12px 16px;
    border-top: 1px solid #f0f0f5;
  }

  /* ── Patička: akordeon (rm_footer_collapse) — chevron šablony vpravo, linky mezi bloky */
  #footer .block-toggle { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  #footer .block-toggle > .block-title {
    margin-bottom: 0;
    padding: 13px 0;
  }
  #footer .block-toggle > .block-title span {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #footer .block-toggle > .block-title span::after {
    color: #8f8ab8;
    font-size: 13px;
    margin-left: 10px;
  }
  #footer .block-toggle._toggled > .block-content { padding-bottom: 16px; }
  /* brand blok, platební pás a copyright mají skrytý titulek: obsah nesmí akordeon schovat */
  #footer #iqithtmlandbanners-block-3 > .block-content,
  #footer #iqithtmlandbanners-block-4 > .block-content,
  #footer #iqithtmlandbanners-block-6 > .block-content { display: block !important; }
  #footer #iqithtmlandbanners-block-4 { border-top: none; }
  #footer #iqithtmlandbanners-block-3 { border-top: none; }
  #footer #iqithtmlandbanners-block-3 > .block-content { padding-bottom: 20px; }
  /* copyright (blok 6): linku kreslí .bso-footer-copy přímo nad textem, obal ji
     mít nesmí — jinak jsou nad copyrightem dvě linky s prázdným pruhem mezi nimi */
  #footer #iqithtmlandbanners-block-6 { border-top: none; padding-bottom: 16px; }
  #footer .bso-footer-copy { margin-top: 0; padding-top: 18px; }

  /* copyright řádek: smí se zalomit pod sebe, na střed */
  .bso-footer-copy {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    text-align: center;
  }

  /* platební pás: text a loga pod sebou na střed */
  #footer-copyrights .row { flex-wrap: wrap; }
  #footer-copyrights .copyright-txt,
  #footer-copyrights .copyright-img {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  #footer-copyrights .copyright-txt { order: 1; }
  #footer-copyrights .copyright-img { order: 2; padding-top: 8px; }
}

/* Košík a účet v hlavičce: sloupečky ikona + popisek dle návrhu
   (Účet vlevo, Košík vpravo; obrysové ikony 22px, popisek 12px) */
.header-top .col-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}
.header-top .col-header-right > .col-12 { display: none; }
#ps-shoppingcart-wrapper { order: 2; }
/* šablona dává #user_info margin-top 9px → Účet seděl o 4,5 px níž než košík */
#user_info { order: 1; margin-top: 0 !important; }
#header .header-cart-btn, #header .cart-toogle {
  background: transparent !important;
  border: none !important;
  color: var(--bso-navy) !important;
  padding: 0 !important;
}
#header .header-cart-btn,
#user_info > a, #user_info .account {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
#header .header-cart-btn .icon { color: var(--bso-navy); font-size: 22px; position: relative; display: block; }
/* fa-fw dává boxu 27.5 px, ::before ikona má 22 px: zúžit, aby míček seděl u tašky */
#header .header-cart-btn .fa-shopping-bag { width: 22px; }
#header .header-cart-btn .title,
#user_info .account > .title {
  color: var(--bso-muted);
  font-size: 12px;
  line-height: 1;
  margin: 0;
}
/* Popisek Účtu nese v přihlášeném stavu křestní jméno zákazníka, takže se musí
   vystředit pod ikonou (blok dědí text-align: right z hlavičky) a mít strop
   šířky, jinak by „Bartoloměj“ roztáhl pravý sloupec hlavičky a odsunul Košík.
   90 px odpovídá zhruba deseti znakům; delší jméno se ořízne třemi tečkami. */
#user_info .account > .title {
  display: block;
  max-width: 90px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Sloupec drží stejnou minimální šířku v obou stavech, aby se Košík vedle něj
   po přihlášení neposunul u krátkých jmen. */
#user_info .account { min-width: 44px; }
#header .header-cart-btn .cart-toggle-details,
#header .header-cart-btn .cart-separator,
#user_info .text-faded, #user_info .logout { display: none !important; }
#header .header-btn { transition: opacity var(--bso-prechod); }
#header .header-btn:hover { opacity: 0.75; }
/* obrysové ikony (fa glyf nahrazen SVG dle návrhu) */
/* Ikonu Účtu kreslí přímo šablona jako inline SVG s currentColor (child
   modules/ps_customersignin/ps_customersignin.tpl), v obou stavech tutéž.
   Dřív ji nahrazoval background-image na ::before fontového glyfu; v
   přihlášeném stavu má ale glyf navíc třídu fa-fw, takže box zůstal široký
   0 px a kresba se vykreslovala mimo osu popisku (naměřeno: ikona x 1296,2,
   popisek x 1271,7-1320,7, tedy o 12,5 px vpravo). */
#user_info .account .bso-uc-ico {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--bso-navy);
}
#header .header-cart-btn .fa-shopping-bag::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: contain;
}
#header .header-cart-btn .fa-shopping-bag::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312783' stroke-width='2'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
/* Rozbalovací nabídka Účtu ve stejném provedení jako panel košíku (sekce 9)
   a panel Doručení v liště (sekce 14): bílá, rámeček #e7e7ee, radius 8, stín
   0 12px 32px rgba(22,18,63,.16), zvýraznění položky #f4f3fb.
   Panel visí 8 px pod ikonou; offsetParent je .dropdown uvnitř #user_info,
   takže se počítá z jeho spodní hrany (stejný postup jako u košíku, dopočet
   z výšky #headeru dává o 75 px nižší panel). */
#user_info .dropdown { position: relative; }
#header #user_info .dropdown-menu {
  box-sizing: border-box;
  min-width: 232px;
  margin: 0;
  padding: 6px;
  top: calc(100% + 8px) !important;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(22, 18, 63, 0.16);
  text-align: left;
}
/* Kompilované CSS theme editoru (načítá se za námi) dává každé položce
   `border-bottom: 1px solid #e3e3e3` a `color: #878787 !important`, proto se tu
   linka ruší a barva se přebíjí také přes !important. Oddělovače v panelu
   nechceme, zvýraznění nese pozadí položky; jediná linka je nad Odhlásit. */
#header #user_info .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  border-radius: var(--bso-radius-s);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bso-text) !important;
  white-space: nowrap;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
#header #user_info .dropdown-menu .dropdown-item svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--bso-muted-2);
  transition: color var(--bso-prechod);
}
#header #user_info .dropdown-menu .dropdown-item:hover,
#header #user_info .dropdown-menu .dropdown-item:focus {
  background: #f4f3fb;
  color: var(--bso-navy-dark) !important;
}
#header #user_info .dropdown-menu .dropdown-item:hover svg { color: var(--bso-navy); }
/* odhlášení je tichá akce, oddělená linkou (stejně jako v boční navigaci účtu) */
#header #user_info .dropdown-menu .bso-uc-odhlasit {
  margin-top: 6px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f5;
  border-radius: 0 0 var(--bso-radius-s) var(--bso-radius-s);
  color: var(--bso-muted) !important;
}

/* obal titulku Košík: line-height 21px zvedal sloupec košíku o 9 px proti Účtu;
   cíl: anchor košíku 37 px (22 ikona + 3 mezera + 12 popisek), shodně s Účtem */
#header .header-cart-btn .info-wrapper { display: block; line-height: 1; }
#header .header-cart-btn .title { line-height: 1; display: block; }
/* míček s počtem: vpravo nahoře na ikoně */
#header .header-cart-btn .cart-products-count-btn {
  position: absolute;
  top: -7px;
  right: -10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Patička: sloupec Kontakt a prodejna (ps_customtext) se chová jako col-md */
#footer-container-main #custom-text {
  flex: 1 0 0%;
  width: auto;
}

/* Hero video: iframe skrytý, dokud nehraje (fallback = fotka + play kolečko);
   štítek a gradient jsou viditelné vždy (dle návrhu) */
.bso-hero-video iframe { opacity: 0; transition: opacity 0.6s ease; }
.bso-hero-video.is-playing iframe { opacity: 1; }

/* ══ 7. LEPIDLO PO AGENTECH ═════════════════════════════════════════════ */

/* Miniatura: řádek skladovost + kód (jeden řádek, kód se zkracuje výpustkou) */
.bso-mini-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  /* cena se na řádek dostupnosti lepila (mezera byla 0) */
  margin-bottom: 6px;
}
.bso-mini-stock { white-space: nowrap; flex-shrink: 0; }
.bso-mini-ref { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bso-mini-actions .btn-product-list { white-space: nowrap; }
/* duplicitní availability badge na obrázku (skladovost máme v meta řádku) */
.product-miniature .product-availability { display: none !important; }
/* stepper tlačítka a input (hodnoty viz .bso-mini-qty v sekci 4) */
.bso-mini-qty .bso-mini-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--bso-prechod);
}
.bso-mini-qty .bso-mini-qty-btn:hover { opacity: 0.65; }
.bso-mini-qty .bso-mini-qty-btn svg { flex-shrink: 0; }
.bso-mini-qty .bso-mini-qty-input {
  width: 26px;
  border: none;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--bso-muted);
  background: transparent;
  -moz-appearance: textfield;
}
.bso-mini-qty .bso-mini-qty-input::-webkit-outer-spin-button,
.bso-mini-qty .bso-mini-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Horní lišta: ikonky před kontakty (tenké, navy). Oddělovač " · " ikonu
   nemá, je to jen obalený textový uzel z editovatelného obsahu lišty. */
.bso-topbar-contact span:not(.bso-tc-sep)::before {
  content: "";
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.bso-tc-adresa::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l8-6 8 6v10H4z'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.bso-tc-telefon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a12 12 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.bso-tc-email::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.bso-topbar-contact a { color: inherit; }

/* Patička: skrýt nadpisy servisních bloků (brand, platby), obsah je v HTML */
#footer .bso-footer-logo + h4, #footer .iqit-banner-title { display: none; }

/* Topbar na mobilu: těsnější mezery (adresa mizí od 1200, e-mail od 992, viz sekce 6) */
@media (max-width: 767.98px) {
  .bso-topbar-contact { gap: 10px; }
}

/* Produktové sekce homepage: 4 karty v řadě (dle návrhu), níže 3/2 */
.bso-doporucene .products-grid > .js-product-miniature-wrapper,
.bso-novinky .products-grid > .js-product-miniature-wrapper {
  flex: 0 0 25%;
  max-width: 25%;
}
/* první karta na hraně sekce (grid +6, padding wrapperů +9), dole totéž */
.bso-doporucene .products-grid, .bso-novinky .products-grid { margin-top: -15px; margin-bottom: -9px; }
@media (max-width: 1199.98px) {
  .bso-doporucene .products-grid > .js-product-miniature-wrapper,
  .bso-novinky .products-grid > .js-product-miniature-wrapper { flex: 0 0 33.333%; max-width: 33.333%; }
}
@media (max-width: 991.98px) {
  .bso-doporucene .products-grid > .js-product-miniature-wrapper,
  .bso-novinky .products-grid > .js-product-miniature-wrapper { flex: 0 0 50%; max-width: 50%; }
}

/* Spodní pás copyrights (Warehouse fc zóna): text vlevo, malá loga vpravo */
#footer-copyrights .copyright-img img { height: 22px; width: auto; }
#footer-copyrights { font-size: 12px; }

/* Odrážky odkazů v patičce: míček místo šipky šablony */
#footer .block-links li::before {
  content: "" !important;
}
#footer .block-links li a::before, #footer .block-links li i { display: none !important; }

/* Vyhledávání: plná šířka sloupce */
.col-header-center #search_widget, .col-header-center .search-widget form { width: 100%; }
#search_widget .form-search-control { flex-grow: 1; width: auto; }

/* ══ 8. STRÁNKA KATEGORIE (Kategorie.dc.html) ══════════════════════════ */

/* Breadcrumb: domeček (child breadcrumb.tpl), tlumený text */
.breadcrumb { font-size: 13px; }
.bso-breadcrumb-home svg { vertical-align: -2px; }

/* Fotografická hlavička kategorie: full-bleed pruh 190 px s gradientem;
   fotky výřezů mapované per id kategorie (rozšiřitelné), ostatní kategorie
   dostanou výchozí fotku zápasu ze základního pravidla ::before (jedna větev
   stylů, per-id pravidla jen přepíšou background-image).
   Header sedí v pravém (necentrovaném) sloupci, takže trik 50 % − 50vw
   nefunguje: přesný full-bleed posun počítá custom.js (margin-left + width),
   bez JS zůstává pruh v šíři obsahového sloupce. */
.bso-cat-header {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: var(--bso-navy-dark);
  margin-bottom: 20px;
}
.bso-cat-header::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Výchozí fotka hlavičky pro všechny kategorie bez vlastního výřezu
     (nadhoz a vnitřní pole, černobílá už jako soubor, zdroj Pexels/Pixabay,
     volné užití, 1400×490). Změna výchozího pozadí = tyto dva řádky;
     per-id pravidla níž si obrázek i zarovnání přepisují sama. */
  background-image: url("/img/cms/kategorie_pozadi_hriste_sirsi.jpg");
  background-position: center 38%;
  background-size: cover;
  background-repeat: no-repeat;
}
.bso-cat-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(34, 27, 94, 0.92) 0%, rgba(34, 27, 94, 0.55) 45%, rgba(34, 27, 94, 0.15) 100%);
}
/* Jediná odchylka výchozí fotky proti výřezům: o stupeň silnější překryv,
   aby fotka zápasu působila jako podklad a titulek nad ní dominoval.
   Platí jen tam, kde chybí per-id třída, takže kategorie s vlastním
   výřezem mají překryv beze změny. */
.bso-cat-header:not(.bso-cat-header-5, .bso-cat-header-29, .bso-cat-header-15, .bso-cat-header-16)::after {
  background: linear-gradient(90deg, rgba(34, 27, 94, 0.97) 0%, rgba(34, 27, 94, 0.88) 45%, rgba(34, 27, 94, 0.68) 100%);
}
/* vlastní výřezy: kromě fotky si nesou i své zarovnání (výchozí procento
   patří fotce zápasu, výřezy postav sedí na 30 %) */
.bso-cat-header-5::before { background-image: url("/img/cms/sekce/Na_palce-vyrez2.png"); background-position: center 30%; }
.bso-cat-header-29::before { background-image: url("/img/cms/sekce/V_poli-vyrez2.png"); background-position: center 30%; }
.bso-cat-header-15::before { background-image: url("/img/cms/sekce/Baseball-vyrez2.png"); background-position: center 30%; }
.bso-cat-header-16::before { background-image: url("/img/cms/sekce/Softball-vyrez2.png"); background-position: center 30%; }
/* obsah v reálném .container (šířky/padding mřížky řeší bootstrap sám);
   breadcrumb nahoře, titulek s podtitulkem vystředěný ve zbytku */
.bso-cat-header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}
/* pruh nalepený přímo pod menu (jako hero na homepage) */
#category #wrapper { padding-top: 0 !important; }
.bso-cat-header { margin-top: 0; }
/* breadcrumb na fotce: světlý, poslední položka bílá, oddělovač tlumený */
.bso-cat-header-bc { padding-top: 14px; font-size: 13px; }
.bso-cat-header-bc ol { display: flex; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.bso-cat-header-bc li { display: inline-flex; align-items: center; }
.bso-cat-header-bc li + li::before {
  content: "\203A";
  margin: 0 9px;
  color: rgba(255, 255, 255, 0.5);
}
/* !important: obecná pravidla odkazů tématu tu vyhrávala (navy na tmavé fotce) */
.bso-cat-header-bc a { color: #c8c5e8 !important; transition: color var(--bso-prechod); }
.bso-cat-header-bc a:hover { color: var(--bso-red-light) !important; }
.bso-cat-header-bc .bso-bc-current { color: #ffffff; }
.bso-cat-header-bc .bso-breadcrumb-home svg { display: block; }
.bso-cat-header-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: auto 0;
  padding-bottom: 10px;
}
.bso-cat-title,
.bso-cat-title span {
  font-family: var(--bso-condensed) !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  /* Warehouse .page-title dává border-bottom (čára přes pruh) a velký margin */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.bso-cat-title span { display: inline; background: transparent !important; }
.bso-cat-title::before { display: none !important; }
.bso-cat-title::after {
  content: "";
  display: block;
  width: 110px;
  height: 11px;
  margin-top: 5px;
  background: var(--bso-sev-svetly) no-repeat;
}
.bso-cat-subtitle,
.bso-cat-subtitle p { font-size: 14px; color: #c8c5e8; margin: 0; }

/* Sloupce: sidebar 280 px; full-bleed pruh je v content sloupci, sidebar
   proto začíná až pod ním (190 + 20 mezera) */
@media (min-width: 768px) {
  #category #left-column { flex: 0 0 280px; max-width: 280px; margin-top: 210px; }
  /* min-width 0: full-bleed header nesmí zvětšit min-content šířku sloupce
     (jinak flex row wrapne a sidebar spadne pod obsah) */
  #category #content-wrapper { flex: 1 1 0; max-width: none; width: auto; min-width: 0; }
}

/* Sidebar karty: strom kategorií i každá fazeta jako bílá karta */
#category #left-column .block-categories,
#left-column #search_filters .facet {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
#left-column .block-facets { background: transparent; border: none; padding: 0; margin: 0; }
#category #left-column .block-categories .block-title,
#left-column #search_filters .facet-title {
  font-family: var(--bso-condensed) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--bso-navy-dark) !important;
  margin: 0 0 12px 0;
  padding: 0;
  border: none;
}
#category #left-column .block-categories .block-title a { color: var(--bso-navy-dark); }

/* Strom kategorií: 14 px, aktivní položka červeně (třídu přidává custom.js) */
#category .block-categories .category-sub-menu a { font-size: 14px; color: var(--bso-text); }
#category .block-categories .category-sub-menu a:hover { color: var(--bso-red); }
#category .block-categories .category-sub-menu a.bso-current-cat {
  color: var(--bso-red) !important;
  font-weight: 600;
}

/* Fazety: checkboxy 18 px radius 4, zaškrtnuté červené s červeným labelem */
#search_filters .facet-label { font-size: 14px; display: flex; align-items: center; gap: 9px; }
#search_filters .custom-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #c9c9d6;
  border-radius: 4px;
  position: relative;
  margin: 0;
  transition: background var(--bso-prechod), border-color var(--bso-prechod);
}
#search_filters .facet-label.active .custom-checkbox {
  background: var(--bso-red);
  border-color: var(--bso-red);
}
#search_filters .custom-checkbox .checkbox-checked { color: #fff; font-size: 10px; margin: 0; }
#search_filters .facet-label .search-link { color: var(--bso-text); }
#search_filters .facet-label.active .search-link { color: var(--bso-red) !important; font-weight: 600; }
#search_filters .facet-label .magnitude { color: var(--bso-muted-2); font-weight: 400; }

/* Dostupnost a Výběr: červený toggle-switch (typové třídy bso-facet-availability
   a bso-facet-extras z child
   facets.tpl). Pilulku kreslí ::before (dráha) a ::after (knob) na .custom-checkbox;
   nativní input je neviditelný přes celou pilulku (zůstává klikací) a vnitřní
   span (fa-check box z Warehouse/theme editoru) je skrytý, jinak prosvítá jako
   bílý čtvereček. Checked stav přes :has(input:checked), protože span je v DOM
   ZA inputem a třída .active na labelu vzniká až po překreslení fazet.

   Obě fazety jsou zapnout/vypnout, sdílejí proto jedna pravidla přes :is().
   Kopie pro každý typ zvlášť by se dřív nebo později rozešly; poprvé se to
   stalo hned, kopie zapomněla order: 2 a přepínač skončil vlevo od textu. */
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .facet-label { justify-content: space-between; }
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .custom-checkbox {
  order: 2;
  position: relative;
  width: 40px;
  height: 22px;
  border: none;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
}
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .custom-checkbox input[type=checkbox] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
/* !important nutné: PS JS (ps-shown-by-js) dává spanu inline display:inline */
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .custom-checkbox input[type=checkbox] + span { display: none !important; }
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .custom-checkbox::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: #d6d6e0;
  transition: background var(--bso-prechod);
}
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .custom-checkbox::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--bso-prechod);
}
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .custom-checkbox:has(input:checked)::before,
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .facet-label.active .custom-checkbox::before { background: var(--bso-red); }
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .custom-checkbox:has(input:checked)::after,
#search_filters :is(.bso-facet-availability, .bso-facet-extras) .facet-label.active .custom-checkbox::after { transform: translateX(18px); }

/* Cenový slider: dráha šedá, výplň červená (pl_faceted_slider_color), úchyty
   bílé kruhy s červeným rámečkem */
#search_filters .noUi-target {
  background: #e2e2ea;
  border: none;
  box-shadow: none;
  height: 4px;
  border-radius: 2px;
}
#search_filters .noUi-connect { border-radius: 2px; }
#search_filters .noUi-handle {
  width: 14px;
  height: 14px;
  right: -7px;
  top: -5px;
  background: #fff;
  border: 2px solid var(--bso-red);
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}
#search_filters .noUi-handle::before,
#search_filters .noUi-handle::after { display: none; }

/* ── Aktivní filtry: pilulky uvnitř lišty nad výpisem (Kategorie.dc.html, A).
   Šablony: child active_filters.tpl (markup) + products-top.tpl (umístění).
   Obal .bso-top-left má display: contents, aby pilulky i počet byly přímé
   flex položky řádku lišty a šly na mobilu přeskládat do druhého pásu. ── */
#js-product-list-top .bso-top-left { display: contents; }
/* bez filtrů nesmí prázdný blok zabírat flex slot (posouval položky pásu 1) */
.bso-af.hide { display: none !important; }
.bso-af.active_filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.bso-af-title { font-size: 13px; color: #9a97b5; margin-right: 2px; }
.bso-af-list { display: contents; list-style: none; margin: 0; padding: 0; }
/* flex, ať se bílé znaky ze šablony nepočítají jako obsah (posouvaly odkaz);
   Warehouse dává .filter-block border-left rgba(160,160,160,.25) — u pilulek
   ho překryje vlastní podklad, u odkazu Zrušit vše prosvítal jako svislá čárka */
.bso-af .filter-block {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
}
.bso-af .filter-block-all { margin-left: 4px; }
.bso-af-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  box-sizing: border-box;
  background: #fdeaec;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--bso-red) !important;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
.bso-af-pill:hover,
.bso-af-pill:focus { background: #fbd9dd; color: var(--bso-red-hover) !important; text-decoration: none; }
.bso-af-x { flex-shrink: 0; }
.bso-af-text { font-weight: 400; }
.bso-af-value { font-weight: 600; }
.bso-af-clear {
  font-size: 13px;
  color: #55555f !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color var(--bso-prechod);
}
.bso-af-clear:hover { color: var(--bso-red) !important; text-decoration: underline; }
/* bez filtrů: vlevo tlumeně počet výsledků, lišta drží stejnou výšku */
.bso-top-count { font-size: 13px; color: #9a97b5; }
.bso-af.active_filters ~ .bso-top-count { display: none; }

/* Toolbar: bílá karta, řazení jako select s rámečkem, tlumený počet produktů */
#js-product-list-top {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  padding: 10px 16px;
  margin-bottom: 16px;
}
.bso-products-count { color: var(--bso-muted); font-size: 13px; margin-right: 12px; }
.products-sort-order .select-title {
  border: 1px solid #e2e2ea !important;
  border-radius: var(--bso-radius-s);
  padding: 7px 12px;
  font-size: 14px;
  background: #fff;
  box-shadow: none;
}
.view-switcher a { color: #c9c9d6; }
.view-switcher a.current, .view-switcher a:hover { color: var(--bso-navy); }

/* Stránkování: aktivní navy pilulka 52×38, ostatní kruhy s rámečkem */
.pagination { justify-content: center; }
.pagination .page-list { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 10px 0; }
.pagination .page-list li { margin: 0; }
.pagination .page-list li a,
.pagination .page-list li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 19px;
  color: var(--bso-text);
  font-size: 14px;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.pagination .page-list li a:hover { color: var(--bso-red); border-color: var(--bso-red); }
.pagination .page-list li.current a {
  width: 52px;
  background: var(--bso-navy);
  border-color: var(--bso-navy);
  color: #fff;
  font-weight: 600;
}

/* ══ 9. STRÁNKA PRODUKTU (Produkt.dc.html) ═════════════════════════════ */

/* Nákupní panel: bílá karta */
#col-product-info {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  padding: 28px 30px;
}
/* titulek: condensed 34/800 navy-dark, bez uppercase, bez linky šablony */
#col-product-info .page-title,
#col-product-info .page-title span {
  font-family: var(--bso-condensed) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: var(--bso-navy-dark) !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* logo značky vpravo: rámeček, proklik na výpis značky */
#col-product-info .product-manufacturer-next {
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius-s);
  padding: 6px 10px;
  margin-left: 16px;
  background: #fff;
}
#col-product-info .manufacturer-logo { max-height: 36px; width: auto; }

/* cena 40/800 + „s DPH" vedle na baseline, pod tím řádek dostupnost + kód */
.product-prices .current-price-value { color: var(--bso-navy-dark); font-family: var(--bso-condensed) !important; }
.product-prices .product-discount .regular-price { font-size: 15px; color: var(--bso-muted-2); }
.product-prices > div:not(.bso-pp-meta) { display: inline-block; vertical-align: baseline; }
.product-prices .tax-shipping-delivery-label {
  display: inline-block;
  font-size: 13px;
  color: var(--bso-muted);
  margin-left: 0;   /* lícuje s číslem ceny nad ním, ne odsazené doprava */
}
.bso-pp-meta {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
/* dostupnost: tečka + text místo badge */
.bso-pp-meta .js-product-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--bso-zelena);
}
.bso-pp-meta .js-product-availability::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bso-zelena);
  flex-shrink: 0;
}
.bso-pp-meta .js-product-availability.product-last-items,
.bso-pp-meta .js-product-availability.product-unavailable-allow-oosp { color: var(--bso-oranzova); }
.bso-pp-meta .js-product-availability.product-last-items::before,
.bso-pp-meta .js-product-availability.product-unavailable-allow-oosp::before { background: var(--bso-oranzova); }
.bso-pp-meta .js-product-availability.product-unavailable { color: var(--bso-red); }
.bso-pp-meta .js-product-availability.product-unavailable::before { background: var(--bso-red); }
.bso-pp-meta .product-reference { font-size: 11px; color: #b9b9c6; margin: 0; }
.bso-pp-meta .product-reference .label { color: #b9b9c6; margin: 0 4px 0 0; font-weight: 400; }

/* Prázdné sekce panelu nechávají za sebou border/mezeru (variants border-top,
   additional-info border-top z Warehouse, discounts mb-3) → zdvojené linky.
   Skrývat podle prázdnosti (:not(:has(*)) toleruje whitespace), ne plošně:
   u produktů s variantami/slevami/obsahem se blok sám zase ukáže. */
.product-actions .product-variants:not(:has(*)),
.product-actions .product-discounts:not(:has(*)),
.product-actions .product-additional-info:not(:has(*)) { display: none; }

/* ── Varianty: radio hodnoty jako dlaždice (Produkt.dc.html, child
   product-variants.tpl + bsoVariantTiles v custom.js) ── */
.product-variants { border-top: 1px solid #f0f0f5; padding-top: 16px; }
/* label atributu: sjednocený s nadpisy facetů */
.product-variants .form-control-label {
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
/* krátké hodnoty: kompaktní dlaždice na flex řádku */
.product-variants .product-variants-item ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 8px 0 0 0;
  list-style: none;
}
/* dlouhé hodnoty s "|": mřížka 3 sloupce (třídu přidává custom.js) */
.product-variants .product-variants-item ul.bso-var-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
/* li je grid/flex item; dlaždice se přes height:100% roztáhne na výšku
   nejvyšší v řádku → všechny dlaždice v řádku stejně vysoké */
/* !important: Warehouse dává `.product-variants > .product-variants-item ul li`
   margin-right/bottom .5rem (vyšší specificita), mezery řeší gap */
.product-variants li.input-container { margin: 0 !important; float: none; display: flex; }
.product-variants .bso-variant-tile {
  position: relative;
  display: block;
  flex: 1 1 auto;
  height: 100%;
  min-width: 64px;
  background: #fff;
  border: 1px solid #e2e2ea;
  border-radius: 8px;
  padding: 10px 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--bso-text);
  cursor: pointer;
  margin: 0;
  transition: border-color var(--bso-prechod), background var(--bso-prechod), color var(--bso-prechod), box-shadow var(--bso-prechod);
}
.bso-var-grid .bso-variant-tile { min-width: 0; padding: 8px 10px; text-align: left; }
/* vnitřní span bez vlastního rámu: Warehouse mu dává outline 1px (plus
   border na .active/:hover), min-width/height 2rem a line-height 2rem */
.product-variants .bso-variant-tile .radio-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  /* !important i na padding a line-height: Warehouse .input-radio:hover+span
     a :checked+span mění padding (0 4px) a line-height — dlaždice by měnila
     rozměr podle stavu */
  padding: 0 !important;
  margin: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  line-height: 1.35 !important;
}
.product-variants .bso-var-primary { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--bso-text); }
.product-variants .bso-var-secondary { font-size: 11px; font-weight: 400; line-height: 1.35; color: #9a97b5; }
.product-variants .bso-variant-tile .input-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
/* Rozměr dlaždice je konstantní ve všech stavech: border zůstává 1px a padding
   se nikdy nemění. Zvýraznění (hover i vybraná) kreslí inset box-shadow, který
   leží uvnitř rámu a nezvětšuje layout box. */
.product-variants .bso-variant-tile:hover {
  border-color: var(--bso-navy);
  box-shadow: inset 0 0 0 1px var(--bso-navy);
}
.product-variants .attribute-not-in-stock .bso-variant-tile:hover {
  border-color: #e7e7ee;
  box-shadow: none;
}
/* vybraná: navy rám (1px border + 2px inset), podklad #f4f3fb, navy hodnota */
.product-variants .bso-variant-tile:has(.input-radio:checked) {
  border-color: var(--bso-navy);
  box-shadow: inset 0 0 0 2px var(--bso-navy);
  background: #f4f3fb;
  color: var(--bso-navy);
}
.product-variants .bso-variant-tile:has(.input-radio:checked) .bso-var-primary,
.product-variants .bso-variant-tile:has(.input-radio:checked) .radio-label { color: var(--bso-navy); }
/* fajfka v navy kroužku vpravo nahoře (18 px včetně bílého ringu 2px) */
.product-variants .bso-variant-tile:has(.input-radio:checked)::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--bso-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
  box-shadow: 0 1px 4px rgba(18, 16, 31, 0.25);
}
/* nedostupná kombinace: tlumená s přeškrtnutou hodnotou */
.product-variants .attribute-not-in-stock .bso-variant-tile {
  background: #fafafb;
  border-color: #e7e7ee;
  cursor: default;
}
.product-variants .attribute-not-in-stock .bso-var-primary,
.product-variants .attribute-not-in-stock .radio-label { color: #b9b9c6; text-decoration: line-through; }
.product-variants .attribute-not-in-stock .bso-var-secondary { color: #d0cfdd; text-decoration: line-through; }
/* Mobil: při 3 sloupcích má dlaždice na 390 px jen 72 px vnitřní šířky, což
   sekundární řádek ("♀ US 5,5 · UK 3 · 22,5 cm", ~72 px) zalomí na dva řádky.
   Dva sloupce dají 120 px vnitřní šířky → text drží na jednom řádku. */
@media (max-width: 575.98px) {
  .product-variants .product-variants-item ul.bso-var-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* množství + CTA na řádku: velký stepper (touchspin), červené CTA */
.product-add-to-cart .qty { margin: 0; }
.product-add-to-cart #quantity_wanted {
  width: 30px;
  height: 48px;
  border: none;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--bso-muted);
  background: transparent;
  -moz-appearance: textfield;
  padding: 0;
}
.product-add-to-cart #quantity_wanted::-webkit-outer-spin-button,
.product-add-to-cart #quantity_wanted::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-add-to-cart .bootstrap-touchspin {
  border: 1px solid #e2e2ea;
  border-radius: var(--bso-radius-s);
  overflow: hidden;
  align-items: stretch;
  box-shadow: none;
}
.product-add-to-cart .bootstrap-touchspin .btn-touchspin {
  width: 40px;
  border: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1.5 5.5h8' fill='none' stroke='%236b6b78' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  font-size: 0;
  transition: opacity var(--bso-prechod);
}
.product-add-to-cart .bootstrap-touchspin .bootstrap-touchspin-up {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1.5 5.5h8M5.5 1.5v8' fill='none' stroke='%236b6b78' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.product-add-to-cart .bootstrap-touchspin .btn-touchspin:hover { opacity: 0.65; }
.product-add-to-cart .add-to-cart {
  width: 100%;
  background: var(--bso-red) !important;
  color: #fff !important;
  font-family: var(--bso-condensed) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none !important;
  border-radius: var(--bso-radius-s) !important;
  padding: 14px 20px;
  transition: background var(--bso-prechod);
}
.product-add-to-cart .add-to-cart:hover { background: var(--bso-red-hover) !important; }
.product-add-to-cart .col-add-btn { flex: 1 1 auto; }

/* mini-USP: kompaktní karta pod CTA, čtyři položky na jednom řádku
   (Produkt.dc.html). Nad kartou vodorovný čárkovaný šev místo šedé linky. */
.bso-pp-usp { margin-top: 16px; }
/* Šev nad kartou se roztahuje na šířku panelu. Sdílený --bso-sev tady použít
   nejde: má viewBox 110x11 a výchozí preserveAspectRatio 'meet', takže by se
   do pruhu 550x10 vykreslil proporčně jen ~100 px široký a vycentroval
   (ověřeno měřením). Proto vlastní široká varianta s preserveAspectRatio='none'. */
.bso-pp-usp-sev {
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='574' height='10' viewBox='0 0 574 10' preserveAspectRatio='none'%3E%3Cpath d='M3 7.2 C150 2 424 2 571 7.2' fill='none' stroke='%23e30613' stroke-opacity='0.55' stroke-width='2' stroke-dasharray='5 5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 10px;
}
.bso-pp-usp-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  background: #f4f3fb;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0;
  list-style: none;
}
/* Ikona NAD textem, vše vystředěné. Varianta „ikona vlevo" měřením nevyšla:
   ve sloupci 122 px zbude vedle kroužku na text 86 px, ale nejdelší položka
   potřebuje na jeden řádek 117,6 px — všechny čtyři by se lámaly na dva řádky.
   S ikonou nahoře má text celou šířku sloupce a vejde se na jeden řádek. */
.bso-pp-usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  margin: 0;
  padding: 0;
}
.bso-pp-usp-text { font-size: 12.5px; line-height: 1.3; color: #55555f; }
.bso-pp-usp-text strong { font-weight: 600; color: #1c1c28; }
/* kroužek je bílý schválně: na fialovém podkladu karty by #ecebf7 zmizel */
.bso-pp-usp-ico {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.bso-pp-usp-gls { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v10H3z'/%3E%3Cpath d='M14 10h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E"); }
.bso-pp-usp-odber { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l8-6 8 6v10H4z'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.bso-pp-usp-heureka { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.3.8-4.6 4.3 1.2 6.1L12 16.9 6.4 19.8l1.2-6.1L3 9.4l6.3-.8z'/%3E%3C/svg%3E"); }
.bso-pp-usp-vymena { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E"); }

/* Mobil: čtyři sloupce se do 390 px nevejdou → 2×2, pod 360 px jeden sloupec */
@media (max-width: 480px) {
  .bso-pp-usp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 10px; }
}
@media (max-width: 359.98px) {
  .bso-pp-usp-list { grid-template-columns: minmax(0, 1fr); }
}

/* galerie: hlavní obrázek bílá karta, náhledy radius 10, aktivní navy border 2 */
.col-product-image .product-cover {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  overflow: hidden;
  padding: 20px;
}
/* Rámeček náhledu kreslíme na obrázku, ne na .thumb-container: container má
   vodorovný gutter 7,5 px a leží o 7,5 px vlevo od masky (.js-qv-mask má
   overflow: hidden, .product-images kompenzuje gutter margin-left: -7.5px),
   takže levý rámeček PRVNÍ miniatury se ořezával. Obrázek začíná až za
   paddingem, uvnitř masky. */
.col-product-image .thumb-container {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.col-product-image .thumb {
  display: block;
  background: #fff;
  /* box-sizing: border-box → padding a rámeček nemění vnější rozměr */
  box-sizing: border-box;
  border: 1px solid var(--bso-border) !important;
  border-radius: var(--bso-radius);
  padding: 6px;
  /* rámeček je nově na obrázku, takže musí mít u všech miniatur stejný box
     (dřív ho držel container); čtverec s contain dle návrhu (92×92, padding 8) */
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
/* vybraná: konstantní 1px rámeček + 1px stín dovnitř (do paddingu, kam obrázek
   nedosáhne), aby se rozměr mezi stavy neměnil a nic se nekreslilo za hranu
   boxu — vnější stín by u první miniatury maska opět ořízla.
   Před inicializací swiperu drží zvýraznění serverová třída .selected
   (výchozí obrázek), po ní ho řídí swiper přes .swiper-slide-thumb-active;
   .selected je statická a za výběrem uživatele se nikdy neposune. */
.col-product-image .thumb.selected,
#product-images-thumbs.swiper-initialized .swiper-slide-thumb-active .thumb {
  border-color: var(--bso-navy) !important;
  box-shadow: inset 0 0 0 1px var(--bso-navy);
}
#product-images-thumbs.swiper-initialized .swiper-slide:not(.swiper-slide-thumb-active) .thumb {
  border-color: var(--bso-border) !important;
  box-shadow: none;
}

/* sekce Popis / Parametry / Recenze: karty pod sebou s nadpisem a švem */
.product-tabs.product-sections { margin-top: 40px; }
.product-sections .block-section,
.product-sections section {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  padding: 24px 26px;
  margin-bottom: 40px;
}
.product-sections .section-title,
.product-sections .section-title span {
  font-family: var(--bso-condensed) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--bso-navy-dark) !important;
  border: none !important;
  margin: 0;
  padding: 0;
  background: transparent !important;
}
.product-sections .section-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 90px 10px;
}
.product-sections .section-content { margin-top: 14px; }
/* parametry: tabulka dle návrhu */
.product-sections .data-sheet .name,
.product-sections dl.data-sheet dt { color: var(--bso-muted); font-weight: 400; background: transparent; }
.product-sections .data-sheet .value,
.product-sections dl.data-sheet dd { font-weight: 600; background: transparent; }

/* Mohlo by se hodit / příslušenství: nadpis se švem, karty už jsou finální */
.product-accessories .section-title,
#content-wrapper .featured-products .section-title { text-align: left; }

/* krátký popis v panelu: obsahové headingy (h2/h3 z migrace) nesmí křičet */
#col-product-info .product-description { font-size: 14px; color: var(--bso-muted); }
#col-product-info .product-description h1,
#col-product-info .product-description h2,
#col-product-info .product-description h3,
#col-product-info .product-description h4 {
  font-family: 'Barlow', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none;
  color: var(--bso-text);
  margin: 0 0 4px 0;
}

/* stepper horizontálně [−][1][+]: touchspin tlačítka absolutně po stranách boxu;
   sloupec množství musí boxu 110 px stačit (jinak přetéká do CTA) */
.product-add-to-cart .col-add-qty { flex: 0 0 122px; width: 122px; max-width: 122px; }
.product-add-to-cart .bootstrap-touchspin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 48px;
  padding: 0 40px;
  width: 110px;
}
.product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical { position: static; width: 0; }
.product-add-to-cart .bootstrap-touchspin .btn-touchspin {
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  margin: 0;
  padding: 0;
}
.product-add-to-cart .bootstrap-touchspin .bootstrap-touchspin-down { left: 0; }
.product-add-to-cart .bootstrap-touchspin .bootstrap-touchspin-up { right: 0; left: auto; }
.product-add-to-cart .bootstrap-touchspin .btn-touchspin i { display: none; }

/* wishlist / porovnání: čtverce s rámečkem vedle CTA */
.product-add-to-cart .btn-iqitwishlist,
.product-add-to-cart .btn-iqitcompare,
.product-actions button[data-button-action="add-to-iqitwishlist"],
.product-actions .iqitcompare-action {
  width: 48px;
  min-height: 48px;
  border: 1px solid #e2e2ea !important;
  border-radius: var(--bso-radius-s) !important;
  background: #fff !important;
  color: var(--bso-navy) !important;
}
/* up tlačítko je v DOM před inputem: doprava přes order */
.product-add-to-cart .bootstrap-touchspin .bootstrap-touchspin-up { order: 1; }

/* Mohlo by se hodit (ps_categoryproducts): nadpis se švem jako sekce */
.product-miniature-list-header,
#content-wrapper .products-section-title {
  font-family: var(--bso-condensed) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--bso-navy-dark) !important;
  text-align: left !important;
  border: none;
}
.products-section-title::after {
  content: "";
  display: block;
  width: 110px;
  height: 11px;
  margin-top: 5px;
  background: var(--bso-sev) no-repeat;
}

/* ── Fazety jako select boxy (jedna společná karta, selecty pod sebou) ── */
#left-column #search_filters {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
#left-column #search_filters .facet {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px 0;
}
#left-column #search_filters .facet:last-child { margin-bottom: 0; }
#left-column #search_filters .facet-title {
  font-size: 15px !important;
  margin: 0 0 6px 0;
}
#search_filters .facet ul { margin: 0; }
/* select vzhled (facet-dropdown je stylizovaný bootstrap dropdown) */
#search_filters .facet-dropdown .select-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  background: #fff !important;
  border: 1px solid #e2e2ea !important;
  border-radius: var(--bso-radius-s) !important;
  font-size: 14px;
  color: var(--bso-text);
  padding: 0 12px;
  box-shadow: none !important;
  transition: border-color var(--bso-prechod);
}
/* otevřený stav: bootstrap 5 dává .show POUZE na .dropdown-menu, ne na obal
   .dropdown — stav se proto čte z aria-expanded na samotném triggeru */
#search_filters .facet-dropdown .select-title:hover,
#search_filters .facet-dropdown .select-title[aria-expanded="true"] { border-color: var(--bso-navy) !important; }
#search_filters .facet-dropdown .select-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#search_filters .facet-dropdown .drop-icon { color: var(--bso-muted); font-size: 14px; }
/* vybraná ne-výchozí hodnota = aktivní filtr červeně */
#search_filters .facet-dropdown.bso-facet-active .select-title {
  border-color: var(--bso-red) !important;
  color: var(--bso-red);
  font-weight: 600;
}
#search_filters .facet-dropdown.bso-facet-active .drop-icon { color: var(--bso-red); }
/* otevřený select: šipka nahoru, u aktivní hodnoty červený glow */
#search_filters .facet-dropdown .drop-icon { transition: transform var(--bso-prechod); }
#search_filters .facet-dropdown .select-title[aria-expanded="true"] .drop-icon { transform: rotate(180deg); }
#search_filters .facet-dropdown.bso-facet-active .select-title[aria-expanded="true"] {
  border-color: var(--bso-red) !important;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.07) !important;
}
/* panel selectu (Kategorie.dc.html, detail Rozbalený select) */
#search_filters .facet-dropdown .dropdown-menu {
  width: 100%;
  background: #fff;
  border: 1px solid #e7e7ee;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(22, 18, 63, 0.12);
  padding: 6px;
  margin-top: 6px;
  max-height: 320px;
  overflow-y: auto;
}
/* položky jako pilulky, bez oddělovacích linek (Warehouse dává border-bottom) */
#search_filters .facet-dropdown .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none !important;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14px !important;
  color: var(--bso-text) !important;
  line-height: 1.35;
  white-space: normal;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
#search_filters .facet-dropdown .dropdown-menu .dropdown-item .magnitude {
  margin-left: auto;
  color: #9a97b5;
  font-weight: 400;
}
#search_filters .facet-dropdown .dropdown-menu .dropdown-item:hover {
  background: #f4f4f8;
  color: var(--bso-red) !important;
}
/* vybraná položka: červený tučný text + míčková odrážka (stejné SVG jako strom
   kategorií); křížek Warehouse skrýt, odebrání řeší klik na položku */
#search_filters .facet-dropdown .dropdown-menu .dropdown-item.current {
  color: var(--bso-red) !important;
  font-weight: 600;
}
#search_filters .facet-dropdown .dropdown-menu .dropdown-item.current::before {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffffff' stroke='%23d6d4d4' stroke-width='1.5'/%3E%3Cpath d='M6.5 4.5 C10 8.5 10 15.5 6.5 19.5 M17.5 4.5 C14 8.5 14 15.5 17.5 19.5' fill='none' stroke='%23e30613' stroke-width='1.6' stroke-dasharray='2 2'/%3E%3C/svg%3E") no-repeat center / contain;
}
#search_filters .facet-dropdown .dropdown-menu .dropdown-item .fa-times { display: none; }

/* ── Toolbar: bez přepínače grid/list, selecty řazení a počtu jednotně ── */
#js-product-list-top .view-switcher { display: none !important; }
.products-sort-order .select-title,
.products-nb-per-page .select-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  background: #fff !important;
  border: 1px solid #e2e2ea !important;
  border-radius: var(--bso-radius-s) !important;
  font-size: 14px;
  color: var(--bso-text);
  padding: 0 12px;
  box-shadow: none !important;
}
.products-sort-order .fa-angle-down,
.products-nb-per-page .fa-angle-down { color: var(--bso-muted); }
.products-sort-order, .products-nb-per-page { margin-left: 10px; }

/* Rozbalené panely řazení a počtu na stránku: 1:1 s panely selectů ve filtrech
   (#search_filters .facet-dropdown .dropdown-menu). Scope na lištu nad výpisem,
   aby se styl nepropsal do dropdownů v hlavičce (jazyk, měna, doprava).
   Třídu bso-facet-active na obalu dává child sort-orders.tpl. */
#js-product-list-top .products-sort-nb-dropdown .select-title:hover,
#js-product-list-top .products-sort-nb-dropdown .select-title[aria-expanded="true"] {
  border-color: var(--bso-navy) !important;
}
#js-product-list-top .products-sort-nb-dropdown .fa-angle-down {
  transition: transform var(--bso-prechod);
}
#js-product-list-top .products-sort-nb-dropdown .select-title[aria-expanded="true"] .fa-angle-down {
  transform: rotate(180deg);
}
/* zvolená ne-výchozí hodnota = aktivní, stejně jako u filtrů */
#js-product-list-top .products-sort-nb-dropdown.bso-facet-active .select-title {
  border-color: var(--bso-red) !important;
  color: var(--bso-red);
  font-weight: 600;
}
#js-product-list-top .products-sort-nb-dropdown.bso-facet-active .fa-angle-down { color: var(--bso-red); }
#js-product-list-top .products-sort-nb-dropdown.bso-facet-active .select-title[aria-expanded="true"] {
  border-color: var(--bso-red) !important;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.07) !important;
}
/* panel */
#js-product-list-top .products-sort-nb-dropdown .dropdown-menu {
  /* trigger je úzký (99 px), obsah širší; max-content drží položky na jednom
     řádku, dokud se vejdou do stropu, teprve pak se text zalomí */
  min-width: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #e7e7ee !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(22, 18, 63, 0.12) !important;
  padding: 6px !important;
  margin-top: 6px;
  max-height: 320px;
  overflow-y: auto;
}
/* položky jako pilulky, bez oddělovacích linek (Warehouse dává border-bottom) */
#js-product-list-top .products-sort-nb-dropdown .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none !important;
  border-radius: 6px;
  padding: 9px 12px !important;
  font-size: 14px !important;
  color: var(--bso-text) !important;
  line-height: 1.35;
  white-space: normal;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
#js-product-list-top .products-sort-nb-dropdown .dropdown-menu .dropdown-item:hover {
  background: #f4f4f8 !important;
  color: var(--bso-red) !important;
}
#js-product-list-top .products-sort-nb-dropdown .dropdown-menu .dropdown-item.current {
  background: transparent !important;
  color: var(--bso-red) !important;
  font-weight: 600;
}
#js-product-list-top .products-sort-nb-dropdown .dropdown-menu .dropdown-item.current:hover {
  background: #f4f4f8 !important;
}
#js-product-list-top .products-sort-nb-dropdown .dropdown-menu .dropdown-item.current::before {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffffff' stroke='%23d6d4d4' stroke-width='1.5'/%3E%3Cpath d='M6.5 4.5 C10 8.5 10 15.5 6.5 19.5 M17.5 4.5 C14 8.5 14 15.5 17.5 19.5' fill='none' stroke='%23e30613' stroke-width='1.6' stroke-dasharray='2 2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Stránkování: bez vnějších rámečků šablony, styl nese jen vnitřní prvek ── */
.pagination .page-list li,
.pagination .page-list li.current {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
}
.pagination .page-list li .spacer,
.pagination .page-list li.spacer span {
  width: auto;
  height: 38px;
  background: transparent;
  border: none;
  color: var(--bso-muted-2);
  display: flex;
  align-items: center;
}
/* spodní řádek: počet vlevo, stránkování na středu zbytku */
.bso-list-bottom { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.bso-list-bottom .bso-products-count { color: var(--bso-muted); font-size: 13px; flex-shrink: 0; margin: 0; }
.bso-list-bottom .pagination { flex: 1 1 auto; }

/* ── Galerie produktu: šipky jako u značek, mezery náhledů ── */
.product-images-large .swiper-button-prev,
.product-images-large .swiper-button-next {
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(34, 27, 94, 0.1);
  color: var(--bso-navy);
  opacity: 1;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.product-images-large .swiper-button-prev::after,
.product-images-large .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.product-images-large .swiper-button-prev:hover,
.product-images-large .swiper-button-next:hover { color: var(--bso-red); border-color: var(--bso-red); }
#product-images-thumbs { margin-top: 12px; }
#product-images-thumbs .swiper-slide { padding: 0 5px; box-sizing: border-box; }
#product-images-thumbs .swiper-slide:first-child { padding-left: 0; }

/* ── Mohlo by se hodit: rytmus a nadpis sekce ── */
.category-products.block-section { border: none; background: transparent; padding: 24px 0 0 0; margin-bottom: 0; }
.category-products .products-section-title { margin-bottom: 14px; }

/* ── SEO blok popisu kategorie (pod stránkováním) ── */
.bso-cat-seo {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  padding: 26px 28px;
  margin: 24px 0;
}
.bso-cat-seo-title {
  font-family: var(--bso-condensed) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--bso-navy-dark) !important;
  margin: 0;
}
.bso-cat-seo-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 90px 10px;
}
/* velikost písma a nadpisy řeší obsahová typografie níže (jedna škála pro
   popis produktu, SEO kategorie a CMS); tady jen geometrie sbalení.
   max-height = 4 řádky à 25,5 px (15 px × 1,7) */
.bso-cat-seo-text {
  position: relative;
  max-width: 760px;
  max-height: 102px;
  overflow: hidden;
  margin-top: 14px;
  transition: max-height 0.3s ease;
}
.bso-cat-seo-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}
.bso-cat-seo.is-open .bso-cat-seo-text { max-height: 4000px; }
.bso-cat-seo.is-open .bso-cat-seo-text::after { display: none; }
.bso-cat-seo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy);
  cursor: pointer;
  transition: color var(--bso-prechod);
}
.bso-cat-seo-toggle:hover { color: var(--bso-red); }
.bso-cat-seo-toggle .fa-angle-down { transition: transform var(--bso-prechod); }
.bso-cat-seo .bso-cat-seo-less { display: none; }
.bso-cat-seo.is-open .bso-cat-seo-less { display: inline; }
.bso-cat-seo.is-open .bso-cat-seo-more { display: none; }
.bso-cat-seo.is-open .bso-cat-seo-toggle .fa-angle-down { transform: rotate(180deg); }
/* krátký popis: bez fade i tlačítka (třídu přidává custom.js podle výšky) */
.bso-cat-seo.bso-seo-short .bso-cat-seo-text { max-height: none; }
.bso-cat-seo.bso-seo-short .bso-cat-seo-text::after,
.bso-cat-seo.bso-seo-short .bso-cat-seo-toggle { display: none; }
/* ── Titulek CMS stránky ──────────────────────────────────────────────────
   Stejný princip jako nadpisy sekcí (.product-sections .section-title):
   Barlow Condensed, uppercase, navy, pod tím červený čárkovaný šev. O dva
   stupně větší (28 vs 24), protože jde o titulek stránky, ne o sekci — musí
   zůstat nad obsahovým h2 (20 px).
   Scope přes id <body> (nese název controlleru), takže se pravidlo nemůže
   propsat do h1 produktu (#product) ani kategorie (#category). Stránky se
   stejným page-header patternem (mapa stránek, kontakt) jedou taky. */
#cms .page-header .page-title,
#cms .page-header .page-title span,
#sitemap .page-header .page-title,
#sitemap .page-header .page-title span,
#contact .page-header .page-title,
#contact .page-header .page-title span {
  font-family: var(--bso-condensed) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: var(--bso-navy-dark) !important;
  /* Warehouse .page-title dává border-bottom (čára pod titulkem) a velký margin */
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
#cms .page-header .page-title::before,
#sitemap .page-header .page-title::before,
#contact .page-header .page-title::before { display: none !important; }
#cms .page-header .page-title::after,
#sitemap .page-header .page-title::after,
#contact .page-header .page-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 90px 10px;
}
#cms .page-header,
#sitemap .page-header,
#contact .page-header { margin: 0 0 20px 0; padding: 0; border: none; }

/* ── Obsahová typografie: jedna škála pro rich text z administrace ────────
   Platí pro popis produktu (sekce Popis), SEO popis kategorie, CMS stránky,
   text článku na blogu a popis rubriky blogu (sekce 16).
   Nadpisy jsou Barlow (ne Condensed a ne uppercase — obsahové texty z migrace
   jsou celé věty) a všechny zůstávají pod nadpisem sekce
   (.product-sections .section-title = Barlow Condensed 24/700 uppercase).
   h1 z migrace se sjednocuje na styl h2, ať nekonkuruje titulku stránky.
   Pozor na tři pasti scope, všechny ověřené měřením:
   1. Holá .rte-content nestačí jako scope, tu třídu nesou i HTML bloky
      v patičce a horní liště (iqithtmlandbanners) a krátký popis v nákupním
      panelu, kam škála prosáknout nesmí.
   2. Třídu page-cms nese i <body>, takže `.page-cms .rte-content` by na CMS
      stránce chytilo úplně všechny rte bloky včetně lišty a patičky. Scope
      proto drží #content.page-cms (id je jen na obsahové sekci).
   3. Na CMS stránce se scope váže na .bso-cms-telo, ne na .rte-content:
      obálku .rte-content vypisuje iqitelementor jen u stránek s HTML obsahem,
      kdežto stránka převedená do Elementoru vysype rovnou <div class=elementor>.
   Rozšiřuje se přidáním selektoru do :is() listu u každého pravidla níže. */
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) {
  font-size: 15px;
  line-height: 1.7;
  color: #55555f;
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--bso-base) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 0;
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) :is(h1, h2) {
  font-size: 20px !important;
  color: var(--bso-navy-dark) !important;
  margin: 28px 0 10px 0 !important;
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) h3 {
  font-size: 17px !important;
  color: var(--bso-text) !important;
  margin: 22px 0 8px 0 !important;
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) :is(h4, h5, h6) {
  font-size: 15px !important;
  color: var(--bso-text) !important;
  margin: 18px 0 6px 0 !important;
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) :is(p, li) {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  color: #55555f;
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) p {
  margin: 0 0 12px 0;
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) :is(ul, ol) {
  margin: 0 0 12px 0;
  padding-left: 20px;
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) li { margin: 0 0 4px 0; }
/* Obsah převedený do Elementoru: každý odstavec i nadpis je vlastní widget
   a Elementor jim nuluje okraje, takže text i nadpisy stály na sobě. Rytmus
   proto drží widgety, ne značky uvnitř nich. Odsazení odpovídá škále výš:
   nadpis h1 a h2 dostane 28 bodů shora, h3 dvacet dva, h4 osmnáct. */
:is(#content.page-cms .bso-cms-telo, .simpleblog__post__content) .elementor-widget { margin-bottom: 14px; }
:is(#content.page-cms .bso-cms-telo, .simpleblog__post__content) .elementor-widget:last-child { margin-bottom: 0; }
:is(#content.page-cms .bso-cms-telo, .simpleblog__post__content) .elementor-widget-heading { margin-top: 28px; margin-bottom: 8px; }
:is(#content.page-cms .bso-cms-telo, .simpleblog__post__content) .elementor-widget-heading:has(h3) { margin-top: 22px; }
:is(#content.page-cms .bso-cms-telo, .simpleblog__post__content) .elementor-widget-heading:has(:is(h4, h5, h6)) { margin-top: 18px; margin-bottom: 6px; }
/* První widget ve sloupci nesmí odsazovat od horní hrany karty. */
:is(#content.page-cms .bso-cms-telo, .simpleblog__post__content) .elementor-widget-wrap > .elementor-element:first-child .elementor-widget { margin-top: 0; }

/* První prvek celého bloku nesmí odsazovat od horní hrany karty. Řetěz
   `> :first-child` schválně, ne prostý `:first-child`: texty z migrace balí
   nadpisy do obalů (div.sub-heading), kterým by prostý zápis sebral margin-top
   uprostřed textu a rozbil rytmus. Tři úrovně pokryjí i
   .section-content > .product-description > .rte-content > h2. */
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) > :first-child,
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) > :first-child > :first-child,
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) > :first-child > :first-child > :first-child {
  margin-top: 0 !important;
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) > :last-child,
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) > * > :last-child { margin-bottom: 0; }
/* tučné a odkazy uvnitř textu: odkazy drží konvenci webu (navy → hover červená) */
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) :is(strong, b) { font-weight: 700; color: var(--bso-text); }
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) a {
  color: var(--bso-navy);
  text-decoration: underline;
  transition: color var(--bso-prechod);
}
:is(.product-sections .section-content, .bso-cat-seo-text, #content.page-cms .bso-cms-telo, .simpleblog__post__content, .bso-blog-perex-kat) a:hover { color: var(--bso-red); }

/* nadpis Mohlo by se hodit (h4.section-title v category-products) */
.category-products > .section-title,
.category-products > .section-title span {
  font-family: var(--bso-condensed) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--bso-navy-dark) !important;
  border: none !important;
  background: transparent !important;
  margin: 0;
  padding: 0;
}
.category-products > .section-title::after {
  content: "";
  display: block;
  width: 110px;
  height: 11px;
  margin-top: 5px;
  background: var(--bso-sev) no-repeat;
}
.category-products > .section-title + * { margin-top: 14px; }

/* ── Doladění kategorie dle klientského feedbacku ── */
/* toolbar: selecty řazení + počet doprava (toggler je na desktopu skrytý);
   flex-shrink 0, ať je pilulky aktivních filtrů nezmáčknou */
#js-product-list-top .col-left-sort { margin-left: auto; flex-shrink: 0; }
/* dolní řádek: počet vlevo, stránkování doprava */
.bso-list-bottom { justify-content: space-between; }
.bso-list-bottom .pagination { flex: 0 1 auto; }
.bso-list-bottom .pagination .page-list { justify-content: flex-end; padding: 0; }

/* strom kategorií: míčkové odrážky, chevrony, odsazené podkategorie */
#category .block-categories .category-sub-menu > li {
  position: relative;
  border: none;
}
#category .block-categories .category-sub-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 2px 0;
}
#category .block-categories .category-sub-menu > li > a::before {
  content: "";
  /* Warehouse .block-links dává ::before position absolute (fa šipka): vrátit do flow */
  position: static !important;
  margin: 0 !important;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffffff' stroke='%23d6d4d4' stroke-width='1.5'/%3E%3Cpath d='M6.5 4.5 C10 8.5 10 15.5 6.5 19.5 M17.5 4.5 C14 8.5 14 15.5 17.5 19.5' fill='none' stroke='%23e30613' stroke-width='1.6' stroke-dasharray='2 2'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* chevron rozbalení: decentní, vpravo, rotace při otevření */
#category .block-categories .collapse-icons {
  position: absolute;
  right: 0;
  top: 4px;
  color: #b9b9c6;
  cursor: pointer;
  padding: 2px 4px;
}
#category .block-categories .collapse-icons i { font-size: 14px; color: #b9b9c6; transition: color var(--bso-prechod); }
#category .block-categories .collapse-icons:hover i { color: var(--bso-red); }
/* podkategorie: odsazené, jemnější, bez odrážky */
#category .block-categories .category-sub-menu .category-sub-menu { padding-left: 19px; margin: 0; }
#category .block-categories .category-sub-menu .category-sub-menu li { border: none; }
#category .block-categories a.category-sub-link {
  font-size: 13px;
  color: #55555f;
  display: inline-block;
  padding: 3px 0;
}
#category .block-categories a.category-sub-link:hover { color: var(--bso-red); }

/* dostupnost: jednotné řádky, label vlevo (počet tlumeně), toggle vpravo na ose */
#search_filters .bso-facet-availability li { margin: 0; }
#search_filters .bso-facet-availability .facet-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
  margin: 0;
  width: 100%;
}
#search_filters .bso-facet-availability .facet-label .search-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
}
#search_filters .bso-facet-availability .custom-checkbox { flex-shrink: 0; align-self: center; top: 0; }

/* ── Mobilní filtry (MobilFiltry.dc.html): tlačítko Filtrovat s badge,
   hlavička panelu FILTRY, sticky spodní lišta. Panel je Warehouse takeover
   (-only-facet-search na #left-column), obsah = stejný #search_filters. ── */
#search_filter_toggler {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  background: #fff !important;
  border: 1px solid #e2e2ea !important;
  border-radius: var(--bso-radius-s) !important;
  color: var(--bso-text) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 0 16px;
  box-shadow: none !important;
  justify-content: center;
}
#search_filter_toggler .fa-filter { color: var(--bso-navy); }
.bso-filter-badge {
  width: 18px;
  height: 18px;
  background: var(--bso-red);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.bso-filter-badge[hidden] { display: none; }
/* hlavička panelu */
.bso-mfilters-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #e7e7ee;
  padding: 16px 18px 13px 18px;
}
.bso-mfilters-title {
  display: block;
  font-family: var(--bso-condensed);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-mfilters-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 9px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat left center / 64px 9px;
}
.bso-mfilters-close {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: #f2f2f6;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
/* sticky spodní lišta (desktop skrývá Warehouse přes hidden-md-up !important) */
#search_filter_controls {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-top: 1px solid #e7e7ee;
  box-shadow: 0 -8px 20px rgba(18, 16, 31, 0.08);
  padding: 12px 18px 14px 18px;
  margin: 0;
  text-align: center;
}
.bso-mfilters-show {
  width: 100%;
  background: var(--bso-navy);
  color: #fff;
  border: none;
  border-radius: var(--bso-radius-s);
  padding: 13px 0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  margin: 0 !important;
  transition: background var(--bso-prechod);
}
.bso-mfilters-show:hover { background: var(--bso-red); }
.bso-mfilters-clear {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #55555f;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  margin: 0 !important;
}
.bso-mfilters-clear[hidden] { display: none; }
/* ── Lišta nad výpisem na mobilu: dva pásy (Kategorie.dc.html, poznámka
   grafika). Pás 1 = Filtrovat + řazení, každý 1fr výšky 42; pás 2 = pilulky
   aktivních filtrů pod linkou. Bez filtrů se pás 2 nevykreslí (.hide) a lišta
   má jen jeden pás; popisek „Aktivní filtry" i počet vlevo na mobilu odpadají
   (počítadlo je v tlačítku Filtrovat). ── */
@media (max-width: 767.98px) {
  #js-product-list-top { padding: 12px 14px; }
  #js-product-list-top > .row {
    flex-wrap: wrap;
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
  }
  #js-product-list-top .facated-toggler {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
  }
  #js-product-list-top .facated-toggler .filter-button,
  #js-product-list-top #search_filter_toggler { width: 100%; }
  #js-product-list-top .col-left-sort {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    margin-left: 0;
    display: flex;
    align-items: center;
  }
  #js-product-list-top .col-left-sort .products-sort-order {
    width: 100%;
    margin: 0;
  }
  /* pás 1 má dle návrhu dvě položky 1fr (Filtrovat + řazení); počet na stránku
     se na 390 nevejde, na mobilu odpadá (na desktopu zůstává) */
  #js-product-list-top .col-left-sort .products-nb-per-page { display: none; }
  /* Obsah řadicího tlačítka se srovná na střed jako u sousedního Filtrovat;
     ve výchozím stavu je `justify-content: normal`, takže text seděl vlevo
     a dvojice tlačítek vedle sebe působila nesouměrně. */
  #js-product-list-top .products-sort-order .select-title {
    height: 42px;
    width: 100%;
    justify-content: center;
  }
  #js-product-list-top .bso-af.active_filters {
    order: 3;
    flex: 1 0 100%;
    border-top: 1px solid #f0f0f5;
    padding-top: 10px;
    gap: 8px;
  }
  #js-product-list-top .bso-af-title,
  #js-product-list-top .bso-top-count { display: none; }
}

/* otevřený takeover: bílé pozadí panelu přes celou obrazovku */
@media (max-width: 767.98px) {
  #left-column.-only-facet-search {
    background: #fff;
    min-height: 100vh;
    padding: 0;
  }
  #left-column.-only-facet-search #search_filters {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
  }
}

/* SEO blok: šířka výpisu (blok je nově v content sloupci), rytmus */
.bso-cat-seo { margin: 24px 0 8px 0; }

/* ── Produkt: CTA navy (sjednocení s miniaturami), hover červené ── */
.product-add-to-cart .add-to-cart { background: var(--bso-navy) !important; }
.product-add-to-cart .add-to-cart:hover { background: var(--bso-red) !important; }

/* Množství a tlačítko drží na jednom řádku i na úzkém displeji.
   Sloupce mají od šablony `col-12 col-sm-auto`, takže pod 576 px zabere
   každý celou šířku a tlačítko spadne pod stepper; lepivá lišta se tím
   zdvojnásobí a ukusuje výšku obrazovky. Zalomení proto vypínáme,
   stepper drží svých 122 px a tlačítko dobere zbytek. `min-width: 0`
   je nutné, aby se flex položka směla zúžit pod šířku svého obsahu. */
@media (max-width: 575px) {
  .product-add-to-cart .product-quantity { flex-wrap: nowrap; }
  .product-add-to-cart .col-add-btn {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
}

/* ── Parametry: jediný rámeček (karta sekce), tabulka bez boxu, jemné linky ── */
.product-sections .data-sheet,
.product-sections dl.data-sheet {
  display: grid;
  grid-template-columns: 35% 1fr;
  margin: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none;
  max-width: 760px;
}
.product-sections dl.data-sheet dt.name,
.product-sections dl.data-sheet dd.value {
  margin: 0;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid #f0f0f5;
  background: transparent !important;
  font-size: 14px;
  text-transform: none;
}
.product-sections dl.data-sheet dt.name { font-weight: 600; color: var(--bso-text); padding-right: 18px; }
.product-sections dl.data-sheet dd.value { font-weight: 400; color: #55555f; }
.product-sections dl.data-sheet dt.name:nth-last-of-type(1),
.product-sections dl.data-sheet dd.value:nth-last-of-type(1) { border-bottom: none; }
.product-sections .product-features { border: none; background: transparent; padding: 0; margin: 0; }
/* Přečíst více v hlavičce: světlé podtržené, hover červené */
.bso-cat-header .bso-cat-header-more,
.bso-cat-header-more {
  /* !important: obecná pravidla odkazů tématu (a { color }) tu vyhrávala */
  color: #c8c5e8 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 6px;
  font-size: 14px;
  transition: color var(--bso-prechod);
}
.bso-cat-header-more:hover { color: var(--bso-red-light) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   MODÁL „PŘIDÁNO DO KOŠÍKU" (Modaly.dc.html, sekce 1)
   Šablona: child modules/ps_shoppingcart/modal.tpl. Bootstrap modál si drží
   zavření klikem mimo, Esc i správu fokusu; tady jen vzhled.
   ══════════════════════════════════════════════════════════════════════════ */
#blockcart-modal.bso-cart-modal .modal-dialog {
  max-width: 700px !important;
  width: calc(100% - 32px);
  margin: 1.75rem auto;
}
.bso-cart-modal .modal-content {
  background: #fff;
  border: none;
  border-radius: var(--bso-radius);
  box-shadow: 0 20px 56px rgba(22, 18, 63, 0.34);
  overflow: hidden;
}
.bso-cart-modal .modal-backdrop,
.modal-backdrop.show { opacity: 1; background: rgba(18, 16, 31, 0.62); }

/* hlavička */
.bso-cm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px 22px;
  border-bottom: 1px solid var(--bso-border);
}
.bso-cm-head-main { display: flex; gap: 12px; align-items: flex-start; }
.bso-cm-ok {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-top: 2px;
  background: #eaf6ef;
  color: #1f9d55;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bso-cm-ok--error { background: #fdeaec; color: var(--bso-red); }
.bso-cm-title {
  font-family: var(--bso-condensed);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
  margin: 0;
}
.bso-cm-seam {
  display: block;
  width: 150px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat left center / 150px 10px;
}
.bso-cm-close {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f6;
  border: none;
  border-radius: var(--bso-radius-s);
  color: #55555f;
  padding: 0;
  cursor: pointer;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
.bso-cm-close:hover { background: #fdeaec; color: var(--bso-red); }

/* tělo: dva sloupce dělené linkou */
.bso-cm-body { display: flex; align-items: stretch; padding: 0; }
.bso-cm-product { flex-grow: 1; padding: 18px 22px; display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.bso-cm-thumb {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.bso-cm-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bso-cm-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bso-cm-name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--bso-text); }
.bso-cm-name a { color: inherit; }
.bso-cm-name a:hover { color: var(--bso-red); }
.bso-cm-attr { font-size: 13px; color: #55555f; }
.bso-cm-attr-val { font-weight: 600; color: var(--bso-text); }
.bso-cm-ref { font-size: 12px; color: #9a97b5; }
.bso-cm-priceline { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.bso-cm-price {
  font-family: var(--bso-condensed);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--bso-navy-dark);
}
.bso-cm-tax { font-size: 12px; color: #9a97b5; }
.bso-cm-qty {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  background: #f4f3fb;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bso-navy);
}

/* pravý sloupec: souhrn */
.bso-cm-summary {
  flex: 0 0 258px;
  width: 258px;
  flex-shrink: 0;
  box-sizing: border-box;
  border-left: 1px solid #f0f0f5;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bso-cm-sum-head { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.bso-cm-ball {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 5 C4.8 9 4.8 15 2.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.8' stroke-width='1.8' stroke-dasharray='1.6 2'/%3E%3Cpath d='M21.5 5 C19.2 9 19.2 15 21.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.8' stroke-width='1.8' stroke-dasharray='1.6 2'/%3E%3C/svg%3E") no-repeat center / cover;
  border: 1px solid #d6d6e0;
  border-radius: 50%;
}
.bso-cm-sum-title {
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-cm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.bso-cm-row-label { color: #55555f; }
.bso-cm-row-value { font-weight: 600; color: var(--bso-text); white-space: nowrap; }
.bso-cm-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-top: 1px solid #f0f0f5;
  margin-top: 5px;
  padding-top: 10px;
}
.bso-cm-total-label {
  font-family: var(--bso-condensed);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-cm-total-value {
  font-family: var(--bso-condensed);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--bso-navy-dark);
  white-space: nowrap;
}

/* patička s akcemi */
.bso-cm-foot {
  display: flex;
  gap: 14px;
  align-items: stretch;
  justify-content: flex-start;
  padding: 16px 22px 18px 22px;
  border-top: 1px solid #f0f0f5;
  background: #fafafb;
  margin: 0;
}
.bso-cm-foot > * { margin: 0; }

/* sdílená tlačítka modálů (primární navy / outline navy) */
.bso-btn-primary {
  box-sizing: border-box;
  height: 46px !important;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  background: var(--bso-navy);
  border: none;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-condensed);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.bso-btn-primary:hover,
.bso-btn-primary:focus {
  background: var(--bso-red);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.28);
  text-decoration: none;
}
.bso-btn-outline {
  box-sizing: border-box;
  height: 46px !important;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  background: #fff;
  border: 1px solid var(--bso-navy);
  border-radius: var(--bso-radius-s);
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bso-btn-outline:hover,
.bso-btn-outline:focus { background: #f4f3fb; color: var(--bso-navy) !important; text-decoration: none; }
.bso-btn-primary:focus-visible,
.bso-btn-outline:focus-visible,
.bso-cm-close:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 2px; }
.bso-cm-continue { flex: 0 0 246px; width: 246px; }
.bso-cm-checkout { flex: 1 1 auto; }

/* mobil: sekce pod sebou, tlačítka na plnou šířku, primární nahoře */
@media (max-width: 575.98px) {
  .bso-cart-modal .modal-dialog { width: calc(100% - 32px); margin: 16px auto; }
  .bso-cm-head { padding: 16px 16px 13px 16px; gap: 12px; }
  .bso-cm-ok { width: 26px; height: 26px; margin-top: 1px; }
  .bso-cm-title { font-size: 22px; }
  .bso-cm-seam { width: 124px; height: 9px; background-size: 124px 9px; }
  .bso-cm-close { width: 32px; height: 32px; }
  .bso-cm-body { flex-direction: column; }
  .bso-cm-product { padding: 16px; gap: 14px; }
  .bso-cm-thumb { width: 84px; height: 84px; padding: 7px; }
  .bso-cm-name { font-size: 15px; }
  .bso-cm-attr { font-size: 12.5px; }
  .bso-cm-price { font-size: 22px; }
  .bso-cm-summary {
    width: 100%;
    border-left: none;
    border-top: 1px solid #f0f0f5;
    padding: 14px 16px;
    gap: 8px;
  }
  .bso-cm-total-value { font-size: 23px; }
  .bso-cm-foot { flex-direction: column; padding: 14px 16px 16px 16px; gap: 10px; }
  /* flex: 0 0 246px z desktopu by ve sloupcovém směru určovalo VÝŠKU */
  .bso-cm-continue,
  .bso-cm-checkout { flex: 0 0 auto; width: 100%; }
  .bso-cm-checkout { order: 1; }
  .bso-cm-continue { order: 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ROZBALOVACÍ KOŠÍK V HLAVIČCE (Modaly.dc.html, sekce 2)
   Šablony: child modules/ps_shoppingcart/ps_shoppingcart-content.tpl
   a ps_shoppingcart-product-line.tpl. Otevírání drží Warehouse (bootstrap
   dropdown na #cart-toogle / #mobile-cart-toogle), na mobilu dopočítává
   custom.js horní hranu do --bso-mc-top.
   !important je nutné proti themes/warehouse/_dev/css/components/block-cart.scss.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── panel ── */
.ps-shoppingcart.dropdown #blockcart-content.bso-mc,
#blockcart-content.bso-mc {
  box-sizing: border-box;
  width: 380px !important;
  min-width: 380px !important;
  max-width: 100%;
  padding: 0 !important;
  /* offsetParent je #blockcart (blok Košík v hlavičce), takže 100 % = jeho
     spodní hrana; panel tak visí 8 px pod ikonou a překrývá lištu menu */
  top: calc(100% + 8px) !important;
  /* panel překrývá lištu menu: #iqitmegamenu-wrapper má ve stohovacím
     kontextu #headeru z-index 97, panel 1000 */
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  box-shadow: 0 12px 32px rgba(22, 18, 63, 0.16);
  overflow: visible;
  text-align: left;
}
/* Warehouse ztlumuje odkazy v panelu na opacity .8; barvy si řídíme sami */
#blockcart-content.bso-mc a:not(.btn):hover { opacity: 1; }

/* ── záhlaví ── */
.ps-shoppingcart.dropdown #blockcart-content .cart-title.bso-mc-head,
#blockcart-content .cart-title.bso-mc-head {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px 16px;
  margin: 0;
  border-bottom: 1px solid #f0f0f5;
}
.bso-mc-head hr { display: none; }
.bso-mc-title {
  display: block;
  font-family: var(--bso-condensed);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-mc-seam {
  display: block;
  width: 88px;
  height: 9px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat left center / 88px 9px;
}
.bso-mc-count {
  flex-shrink: 0;
  padding-bottom: 2px;
  font-size: 12px;
  color: #9a97b5;
  white-space: nowrap;
}
/* křížek je jen mobilní varianta zavření (desktop zavírá klik mimo / Esc) */
.bso-mc-close { display: none; }

/* ── seznam položek ── */
.bso-mc-listwrap { position: relative; }
.ps-shoppingcart.dropdown #blockcart-content .cart-products.bso-mc-list,
#blockcart-content .cart-products.bso-mc-list {
  max-height: 268px;
  margin: 0;
  /* vpravo 2 + rezervovaný žlábek posuvníku 4 = stejné odsazení jako vlevo (6) */
  padding: 4px 2px 0 6px;
  scrollbar-gutter: stable;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  /* scrollbar-width/-color se ZÁMĚRNĚ nepoužívá: jakmile je některá z těchto
     standardních vlastností nastavena, Chrome ignoruje ::-webkit-scrollbar
     a vykreslí překryvný posuvník, který návrh (stálý pruh 4 px) nemá */
}
/* specificita musí přebít .ps-shoppingcart.dropdown #blockcart-content .cart-products (6 px) */
.ps-shoppingcart.dropdown #blockcart-content .cart-products.bso-mc-list::-webkit-scrollbar,
#blockcart-content .cart-products.bso-mc-list::-webkit-scrollbar { width: 4px; }
.ps-shoppingcart.dropdown #blockcart-content .cart-products.bso-mc-list::-webkit-scrollbar-track,
#blockcart-content .cart-products.bso-mc-list::-webkit-scrollbar-track { background: transparent; }
.ps-shoppingcart.dropdown #blockcart-content .cart-products.bso-mc-list::-webkit-scrollbar-thumb,
#blockcart-content .cart-products.bso-mc-list::-webkit-scrollbar-thumb { background-color: #d6d6e0; border-radius: 2px; }
#blockcart-content .cart-products.bso-mc-list > li {
  padding: 0;
  margin: 0;
  border: none;
}
.bso-mc-fade {
  position: absolute;
  left: 1px;
  right: 5px;
  bottom: 0;
  height: 22px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

/* ── položka ── */
.bso-mc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* vodorovné 10 + padding seznamu 6 = odsazení obsahu 16;
     hover se tak roztáhne o 10 px na každou stranu (návrh: margin −10 / padding 10) */
  padding: 14px 10px;
  border-bottom: 1px solid #f0f0f5;
  border-radius: var(--bso-radius-s);
  transition: background var(--bso-prechod);
}
#blockcart-content .cart-products.bso-mc-list > li:last-child .bso-mc-item { border-bottom: none; }
.bso-mc-item:hover { background: #fafafb; }
.bso-mc-thumb {
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 8px;
}
.bso-mc-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.bso-mc-info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bso-mc-name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bso-text) !important;
  text-decoration: none;
  transition: color var(--bso-prechod);
}
.bso-mc-item:hover .bso-mc-name { color: var(--bso-red) !important; }
.bso-mc-attr { font-size: 12px; line-height: 1.35; color: #9a97b5; }
.bso-mc-priceline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 1px;
}
.bso-mc-qty { font-size: 12.5px; color: #55555f; }
.bso-mc-line-total { font-size: 14px; font-weight: 700; color: var(--bso-navy-dark); white-space: nowrap; }
.bso-mc-remove {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #9a97b5 !important;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
.bso-mc-item:hover .bso-mc-remove { background: #fdeaec; color: var(--bso-red) !important; }
.bso-mc-remove:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 1px; }

/* ── souhrn ── */
.ps-shoppingcart.dropdown #blockcart-content .cart-subtotals.bso-mc-sum,
#blockcart-content .cart-subtotals.bso-mc-sum {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid #f0f0f5;
}
.bso-mc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
/* Warehouse dává .cart-summary-line clearfix ::after; ve flexu je to TŘETÍ
   položka, kterou space-between odsune doprava a hodnotu nechá uprostřed
   (mezisoučet a doručení pak nelícovaly s celkovou částkou) */
.bso-mc-row::after { display: none !important; }
.bso-mc-row-label { color: #55555f; }
.bso-mc-row-value {
  font-weight: 600;
  color: var(--bso-text);
  white-space: nowrap;
  /* pravá hrana hodnoty drží i kdyby přibyl další potomek (sleva, DPH, poukaz) */
  margin-left: auto;
  text-align: right;
}
#blockcart-content .cart-totals.bso-mc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 0 0 0;
  border-top: 1px solid #f0f0f5;
  font-size: inherit;
  line-height: inherit;
}
.bso-mc-total-label {
  font-family: var(--bso-condensed);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-mc-total-value {
  font-family: var(--bso-condensed);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--bso-navy-dark);
  white-space: nowrap;
}

/* ── akce ── */
#blockcart-content .cart-buttons.bso-mc-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px 16px 16px;
  border-top: 1px solid #f0f0f5;
  background: #fafafb;
  border-radius: 0 0 var(--bso-radius) var(--bso-radius);
  text-align: left;
}
.bso-mc-actions .bso-mc-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 44px !important;
  min-height: 44px;
  padding: 0 8px;
  white-space: nowrap;
}
.bso-mc-actions .bso-btn-primary.bso-mc-btn { gap: 8px; font-size: 17px; letter-spacing: 0.07em; }
.bso-mc-actions .bso-btn-outline.bso-mc-btn { font-size: 13.5px; }
.bso-mc-warning {
  flex: 1 1 100%;
  padding: 8px 10px;
  background: #fdeaec;
  border-radius: var(--bso-radius-s);
  font-size: 12.5px;
  color: var(--bso-red-hover);
}

/* ── prázdný stav ── */
.bso-mc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 24px 26px 24px;
  text-align: center;
}
.bso-mc-ball {
  position: relative;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f3fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 5 C4.8 9 4.8 15 2.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.35' stroke-width='1.4' stroke-dasharray='1.6 2'/%3E%3Cpath d='M21.5 5 C19.2 9 19.2 15 21.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.35' stroke-width='1.4' stroke-dasharray='1.6 2'/%3E%3C/svg%3E") no-repeat center / 60px 60px;
  border: 1px solid var(--bso-border);
  border-radius: 50%;
  color: #9a97b5;
}
.bso-mc-ball-bag { display: block; }
.bso-mc-empty-text { display: flex; flex-direction: column; gap: 5px; }
.bso-mc-empty-title {
  font-family: var(--bso-condensed);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-mc-empty-sub { font-size: 13px; line-height: 1.45; color: #55555f; }
.bso-mc-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  border-bottom: 2px solid var(--bso-navy);
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-mc-empty-link:hover { color: var(--bso-red) !important; border-bottom-color: var(--bso-red); }

/* ── ikona košíku v hlavičce po dobu otevření (červená) ── */
#header .header-cart-btn.show .fa-shopping-bag::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e30613' stroke-width='2'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}
#header .header-cart-btn.show .title { color: var(--bso-red); font-weight: 600; }
#header .header-btn.show:hover { opacity: 1; }

/* ── mobil: panel přes celou šířku pod hlavičkou + ztmavená stránka ── */
.bso-mc-backdrop {
  position: fixed;
  /* začíná až u horní hrany panelu, hlavička zůstává nezastíněná;
     hodnotu nastavuje custom.js stejně jako panelu */
  top: var(--bso-mc-top, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(18, 16, 31, 0.45);
  /* #header má z-index 100 a je stohovací kontext, ve kterém panel leží;
     ztmavení proto musí zůstat POD ním, jinak by přebilo i panel */
  z-index: 90;
}

@media (max-width: 991.98px) {
  .ps-shoppingcart.dropdown #blockcart-content.bso-mc,
  #blockcart-content.bso-mc {
    position: fixed !important;
    top: var(--bso-mc-top, 60px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-left: none;
    border-right: none;
    border-radius: 0 0 var(--bso-radius) var(--bso-radius);
    z-index: 995;
  }
  .bso-mc-count { display: none; }
  .bso-mc-close {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f2f2f6;
    border: none;
    border-radius: var(--bso-radius-s);
    color: #55555f;
    cursor: pointer;
    transition: background var(--bso-prechod), color var(--bso-prechod);
  }
  .bso-mc-close:hover { background: #fdeaec; color: var(--bso-red); }
  .bso-mc-close:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 2px; }
  .ps-shoppingcart.dropdown #blockcart-content .cart-title.bso-mc-head,
  #blockcart-content .cart-title.bso-mc-head { padding: 14px 16px 12px 16px; }
  /* seznam se scrolluje uvnitř panelu, souhrn a akce zůstávají viditelné */
  .ps-shoppingcart.dropdown #blockcart-content .cart-products.bso-mc-list,
  #blockcart-content .cart-products.bso-mc-list {
    max-height: calc(100vh - var(--bso-mc-top, 60px) - 268px);
    min-height: 120px;
  }
  /* aktivní košík v mobilní hlavičce (návrh: světle červený čtverec) */
  #mobile-header #mobile-cart-toogle.show .bso-mh-ico,
  #mobile-header #mobile-cart-toogle[aria-expanded="true"] .bso-mh-ico {
    background: #fdeaec;
    color: var(--bso-red);
  }
}
/* Warehouse pod 400 px stahuje panel na 92vw; návrh ho chce přes celou šířku */
@media screen and (max-width: 400px) {
  .ps-shoppingcart.dropdown #blockcart-content.bso-mc {
    min-width: 0 !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BOX „HLÍDAT DOSTUPNOST" (Modaly.dc.html, sekce 3)
   Šablona: child modules/ps_emailalerts/views/templates/hook/product.tpl,
   odesílání custom.js (bsoMailAlert). Blok vykresluje modul jen u nedostupného
   produktu, na plnou šířku nákupního panelu.
   ══════════════════════════════════════════════════════════════════════════ */
.js-mailalert.bso-alert {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 16px;
  background: #f4f3fb;
  border-radius: 8px;
  transition: background var(--bso-prechod);
}
.bso-alert-form,
.bso-alert-done { display: flex; }
.bso-alert-form { flex-direction: column; gap: 12px; }
.bso-alert-form[hidden],
.bso-alert-done[hidden],
.bso-alert-msg[hidden] { display: none !important; }

.bso-alert-intro { display: flex; flex-direction: column; gap: 5px; }
.bso-alert-titleline { display: flex; align-items: center; gap: 8px; }
.bso-alert-ball {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 5 C4.8 9 4.8 15 2.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.8' stroke-width='1.8' stroke-dasharray='1.6 2'/%3E%3Cpath d='M21.5 5 C19.2 9 19.2 15 21.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.8' stroke-width='1.8' stroke-dasharray='1.6 2'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  border: 1px solid #d6d6e0;
  border-radius: 50%;
}
.bso-alert-title {
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-alert-sub { font-size: 12.5px; line-height: 1.4; color: #55555f; }

/* V úzkém sloupci detailu produktu (768 px, box kolem 300 px) by se pole
   vedle stodmasedmdesátipixelového tlačítka zmáčklo pod 80 px. Řádek se
   proto zalomí a pole si drží použitelnou minimální šířku. */
.bso-alert-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; }
.js-mailalert .bso-alert-input {
  flex: 1 1 190px;
  min-width: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e2e2ea;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-base);
  font-size: 14px;
  color: var(--bso-text);
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
.js-mailalert .bso-alert-input::placeholder { color: #9a97b5; opacity: 1; }
/* fokus: rámeček 2 px, padding se srovná na 13, výška zůstává 44 */
.js-mailalert .bso-alert-input:focus {
  outline: none;
  padding: 0 13px;
  border: 2px solid var(--bso-navy);
  box-shadow: 0 0 0 3px rgba(49, 39, 131, 0.12);
}
.js-mailalert .bso-alert-btn {
  width: 178px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--bso-navy);
  border: none;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-condensed);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background var(--bso-prechod), box-shadow var(--bso-prechod);
}
.js-mailalert .bso-alert-btn:hover,
.js-mailalert .bso-alert-btn:focus {
  background: var(--bso-red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.28);
}
.js-mailalert .bso-alert-btn:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 2px; }
.js-mailalert .bso-alert-btn svg { flex-shrink: 0; }

.bso-alert-legal { font-size: 11px; line-height: 1.4; color: #9a97b5; }
.bso-alert-legal-em { color: var(--bso-navy); font-weight: 600; }
/* odkaz na CMS „Zásady ochrany údajů": v drobném právním řádku nemá křičet */
.bso-alert-legal-link {
  color: #55555f !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--bso-prechod);
}
.bso-alert-legal-link:hover,
.bso-alert-legal-link:focus { color: var(--bso-red) !important; text-decoration: underline; }

/* chybový stav: celý box zčervená, hláška je řádek pod inputem */
.bso-alert-msg {
  display: block;
  margin-top: -4px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--bso-red-hover);
}
.js-mailalert.bso-alert--error { background: #fdeaec; }
.bso-alert--error .bso-alert-sub,
.bso-alert--error .bso-alert-legal { color: #a8434c; }
.bso-alert--error .bso-alert-legal-em { color: var(--bso-red-hover); }
.bso-alert--error .bso-alert-legal-link { color: #a8434c !important; }
.js-mailalert.bso-alert--error .bso-alert-input { border-color: var(--bso-red); }

/* stav po odeslání */
.js-mailalert.bso-alert--done { background: #eaf6ef; }
.bso-alert-done { gap: 12px; align-items: flex-start; }
.bso-alert-check {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  color: var(--bso-zelena);
}
.bso-alert-done-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bso-alert-done-title {
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #146c3a;
}
.bso-alert-done-text { font-size: 12.5px; line-height: 1.4; color: #3d6b52; overflow-wrap: anywhere; }
.bso-alert-done-text strong { font-weight: 600; color: #1c4a30; }
.bso-alert-done-note { margin-top: 2px; font-size: 11.5px; color: #5c8a70; }

/* pod 480 px se input a tlačítko skládají pod sebe (návrh: 44 a 46) */
@media (max-width: 479.98px) {
  .bso-alert-row { flex-direction: column; gap: 12px; }
  .js-mailalert .bso-alert-btn { width: 100%; height: 46px; font-size: 17px; }
}


/* ══ 10. CHYBOVÁ STRÁNKA (Chyba404.dc.html) ════════════════════════════ */

/* Univerzální šablona pro 404, 500 i prázdný výsledek: mění se jen číslo
   a texty (errors/_partials/error-page.tpl). Stránka nemá vlastní nadpis
   ani patičku obsahu, pás jde full-bleed přes celou šířku okna. */
.bso-err-page { padding: 0 !important; margin-bottom: 0 !important; }
.bso-err-page .page-header { display: none; }
/* pás lícuje s lištou menu a USP pruh s patičkou (Warehouse jinak přidává
   15 px nad obsah a 150 px pod něj) */
#pagenotfound #wrapper { padding-top: 0; }

/* Pás 448 px: fotka pálkaře + navy gradient + dráha odpáleného míče */
.bso-err-band {
  position: relative;
  height: 448px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40px 60px 40px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bso-err-photo {
  position: absolute;
  inset: 0;
  background: url("/img/cms/banner-620x310-baseball.jpg") center 32% / cover;
  filter: saturate(0.6) brightness(0.5);
}
.bso-err-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(34, 27, 94, 0.92) 0%, rgba(34, 27, 94, 0.52) 48%, rgba(34, 27, 94, 0.88) 100%);
}
.bso-err-track { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.bso-err-track--m { display: none; }
/* home plate drží vlastní poměr stran (pás se roztahuje, značka ne) */
.bso-err-plate { position: absolute; left: 9.23%; bottom: 9px; width: 41px; height: 41px; }

/* Lockup čísla: míček nahrazuje nulu */
.bso-err-lockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--bso-condensed);
  font-size: 190px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.01em;
}
.bso-err-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
}
.bso-err-ball svg {
  width: 140px;
  height: 140px;
  transform: rotate(-14deg);
  filter: drop-shadow(0 10px 26px rgba(10, 8, 30, 0.45));
}
.bso-err-page .bso-err-title {
  position: relative;
  margin: 20px 0 0 0;
  font-family: var(--bso-condensed);
  font-size: 46px;
  font-weight: 800 !important;
  color: #fff;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.bso-err-seam { position: relative; display: block; margin-top: 8px; width: 130px; height: 12px; }
.bso-err-lead {
  position: relative;
  margin: 14px 0 0 0;
  max-width: 640px;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  color: #c8c5e8;
}
.bso-err-lead--short { display: none; }

/* Akční karta 900 px, přesah 78 px přes pás */
.bso-err-card-wrap { position: relative; margin-top: -78px; padding: 0 40px; }
.bso-err-card {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  box-shadow: 0 18px 44px rgba(22, 18, 63, 0.16);
  padding: 28px 34px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bso-err-divider { border-top: 1px solid #f0f0f5; }

/* Hledání 1:1 s hlavičkou, jen výška 48 */
.bso-err-search { display: flex; flex-direction: column; gap: 7px; }
.bso-err-search-form {
  display: flex;
  align-items: center;
  height: 48px;
  box-sizing: border-box;
  background: #f2f2f6;
  border-radius: var(--bso-radius-s);
  padding: 4px 4px 4px 16px;
  gap: 10px;
  margin: 0;
}
.bso-err-search-ico { color: var(--bso-muted); font-size: 16px; flex-shrink: 0; }
.bso-err-search-input {
  flex-grow: 1;
  min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 15px;
  color: var(--bso-text);
  padding: 8px 0;
}
.bso-err-search-input:focus { outline: none; box-shadow: none; }
.bso-err-search-input::placeholder { color: var(--bso-muted-2); }
.bso-err-search-btn {
  flex-shrink: 0;
  align-self: stretch;
  background: var(--bso-navy);
  color: #fff;
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  padding: 10px 26px;
  line-height: 1.2;
  transition: background var(--bso-prechod);
}
.bso-err-search-btn:hover { background: var(--bso-navy-dark); }
.bso-err-hint { font-size: 12px; color: #9a97b5; }

/* Pilulky hlavních kategorií */
.bso-err-pills-block { display: flex; flex-direction: column; gap: 12px; }
.bso-err-label {
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-err-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.bso-err-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 999px;
  padding: 0 18px 0 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy-dark) !important;
  white-space: nowrap;
  transition: border-color var(--bso-prechod), color var(--bso-prechod);
}
.bso-err-pill:hover,
.bso-err-pill:focus { border-color: var(--bso-navy); color: var(--bso-red) !important; text-decoration: none; }
.bso-err-pill-ico {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  background-color: var(--bso-navy);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color var(--bso-prechod);
}
.bso-err-pill:hover .bso-err-pill-ico { background-color: var(--bso-red); }
/* fallback bez ikony v navigaci: obecný míček */
.bso-err-pill-ico--ball {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6.5 5.5 C9.5 9 9.5 15 6.5 18.5 M17.5 5.5 C14.5 9 14.5 15 17.5 18.5' stroke-dasharray='2 2' stroke-width='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6.5 5.5 C9.5 9 9.5 15 6.5 18.5 M17.5 5.5 C14.5 9 14.5 15 17.5 18.5' stroke-dasharray='2 2' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* Akce: navy tlačítko (červená je vyhrazená nákupním akcím) + odkaz */
.bso-err-actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.bso-err-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bso-navy);
  color: #fff !important;
  font-family: var(--bso-condensed);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--bso-radius-s);
  transition: background var(--bso-prechod), box-shadow var(--bso-prechod);
}
.bso-err-btn:hover,
.bso-err-btn:focus {
  background: var(--bso-red);
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.28);
}
.bso-err-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.bso-err-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  border-bottom: 2px solid var(--bso-navy);
  padding-bottom: 2px;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-err-link:hover,
.bso-err-link:focus { color: var(--bso-red) !important; border-bottom-color: var(--bso-red); text-decoration: none; }
.bso-err-link svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Světlý USP pruh 900×72 (navy pruh z homepage by pod tmavým pásem zavalil) */
.bso-err-usp-wrap { padding: 26px 40px 34px 40px; }
.bso-err-usp {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  padding: 14px 24px;
}
.bso-err-usp-item { display: flex; gap: 12px; align-items: center; flex: 1 1 0; justify-content: center; }
.bso-err-usp-item > svg { width: 24px; height: 24px; flex-shrink: 0; }
.bso-err-usp-sep { width: 12px; height: 44px; flex-shrink: 0; }
.bso-err-usp-t {
  font-family: var(--bso-condensed);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-err-usp-d { font-size: 12px; color: #55555f; }

/* Mobil 390: pás 300, číslo 108, míček 80, svislý gradient, tlačítka na šířku */
@media (max-width: 767.98px) {
  .bso-err-band { height: 300px; padding: 0 18px 46px 18px; }
  .bso-err-photo { background-position: center 30%; filter: saturate(0.55) brightness(0.42); }
  .bso-err-shade { background: linear-gradient(180deg, rgba(34, 27, 94, 0.78) 0%, rgba(34, 27, 94, 0.92) 100%); }
  .bso-err-track { display: none; }
  .bso-err-track--m { display: block; }
  .bso-err-plate { left: 4.1%; bottom: 5px; width: 29px; height: 29px; }
  .bso-err-lockup { font-size: 108px; gap: 2px; }
  .bso-err-ball, .bso-err-ball svg { width: 80px; height: 80px; }
  .bso-err-page .bso-err-title { margin-top: 12px; font-size: 30px; }
  .bso-err-seam { display: none; }
  .bso-err-lead { margin-top: 8px; font-size: 14px; line-height: 1.45; }
  /* na mobilu kratší věta (návrh), delší se skryje */
  .bso-err-band:has(.bso-err-lead--short) .bso-err-lead:not(.bso-err-lead--short) { display: none; }
  .bso-err-lead--short { display: block; }

  .bso-err-card-wrap { margin-top: -34px; padding: 0 14px 18px 14px; }
  .bso-err-card { padding: 16px 16px 18px 16px; gap: 14px; box-shadow: 0 12px 30px rgba(22, 18, 63, 0.16); }
  .bso-err-search-form { padding-left: 12px; gap: 8px; }
  .bso-err-search-input { font-size: 14px; }
  .bso-err-search-btn { font-size: 14px; padding: 10px 18px; }
  .bso-err-pills { gap: 8px; }
  .bso-err-pill { height: 40px; padding: 0 14px 0 12px; font-size: 13px; gap: 8px; }
  .bso-err-pill-ico { width: 17px; height: 17px; }
  .bso-err-actions { flex-direction: column; gap: 12px; }
  .bso-err-btn {
    width: 100%;
    height: 48px;
    justify-content: center;
    padding: 0 20px;
    font-size: 17px;
  }
  .bso-err-usp-wrap { display: none; }
}


/* ══ 11. PRODUKT BEZ FOTKY (Produkt.dc.html) ═══════════════════════════ */

/* Nahrazuje výchozí šedý obrázek PrestaShopu. Plocha #f7f7fb je světlejší než
   rámeček karty, takže miniatura nikde nevytvoří tmavý obdélník; švy jen
   u krajů, uprostřed logo jednobarevně (CSS maska z reálného souboru loga). */
.bso-noimg {
  position: relative;
  width: 100%;
  background: #f7f7fb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bso-noimg-seams { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.bso-noimg-logo {
  position: relative;
  display: block;
  aspect-ratio: 2732 / 586;
  background-color: #c8c5e8;
  -webkit-mask-image: url("/img/cms/loga/BSO_blue_transparent.png");
  mask-image: url("/img/cms/loga/BSO_blue_transparent.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.bso-noimg-note {
  position: relative;
  margin-top: 16px;
  font-size: 12px;
  color: #9a97b5;
}

/* Galerie detailu (návrh 560×480: logo 300 = 54 % šířky). Poměr i strop výšky
   se berou z výchozího obrázku (large_default), takže plocha zabírá přesně to,
   co by zabrala fotka, a na užším okně se sama zkrátí. */
.bso-noimg--detail {
  aspect-ratio: var(--bso-noimg-ar, 560 / 480);
  max-height: var(--bso-noimg-max, 480px);
}
.bso-noimg--detail .bso-noimg-logo { width: 54%; max-width: 300px; }

/* Miniatura ve výpisu (návrh 292×195: logo 170 = 58 % šířky), bez popisku.
   Výška 175 = strop obrázku v mřížce (theme editor pl_grid, pravidlo
   .products-grid .product-miniature .product-thumbnail img { max-height }),
   aby karta bez fotky byla stejně vysoká jako karty s fotkou. */
.bso-noimg--mini { height: 175px; }
.bso-noimg--mini .bso-noimg-logo { width: 58%; max-width: 170px; }

/* ══ 12. POKLADNA (thecheckout) ═════════════════════════════════════════ */
/*
 * Jednostránková pokladna modulu thecheckout 3.4.8, substyle `clean`.
 * Pořadí zdrojů v kompilovaném theme.css: custom.css → front.less.css →
 * styles/clean.less.css → css-config.css, takže modul se načítá AŽ ZA námi.
 * Proto je všude scope `body#checkout` (id nese <body>) a u pravidel, kde má
 * modul stejnou nebo vyšší specificitu, je nutné !important. Každý takový
 * případ má u sebe poznámku, které modulové pravidlo přebíjí.
 * Barvu odrážek, fajfek a hvězdiček řídí modul přes --tc-color-base
 * (TC_color_base = #e30613 v ps_configuration), takže se neřeší v CSS.
 */

/* ── 12.1 Rám stránky a nadpis ─────────────────────────────────────────── */

/* Pokladna nemá page-header, nadpis stránky nese HTML box 1 modulu
   (TC_html_box_1 v ps_configuration_lang, per jazyk, obsahem holý text
   „Objednávka"). Blok proto není karta, ale titulek stránky ve stejném stylu
   jako titulky CMS stránek: Barlow Condensed 28/700 uppercase + červený šev.
   Pozor: kdyby do boxu přibylo HTML, styl se propíše i na vnořené značky. */
body#checkout #thecheckout-html-box-1 { padding: 0 9px 20px 9px !important; }
body#checkout #thecheckout-html-box-1 > .inner-area {
  padding: 0 !important;
  background: transparent;
  border: none;
  font-family: var(--bso-condensed);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
body#checkout #thecheckout-html-box-1 > .inner-area::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 90px 10px;
}

/* ---------- PŘIHLÁŠENÍ PŘES FACEBOOK A GOOGLE ---------- */
/* Modul thecheckout vykresluje dvojici tlačítek na stránce přihlášení
   i v pokladně. Facebookové kreslí sám, googlovské vykresluje knihovna
   Google Identity Services do vlastního uzlu: má pevnou šířku v atributu
   `style`, vlastní rámeček a popisek roztažený na celou šířku doprostřed.
   Sjednocujeme je proto ve třech krocích: obal dostane půlku řádku,
   vnitřek Googlu se roztáhne a jeho popisek se přisune k ikoně.

   Uvnitř Googlu se vybírá přes `[role="button"]` a strukturu, ne přes
   třídy: ty jsou generované a mění se s každou verzí knihovny. */
#tc-facebook-signin,
#tc-google-signin {
  /* Pevná polovina řádku, ne `flex: 1 1 0`: facebookový popisek je delší
     než googlovský a s `min-width: auto` by si ukrojil víc místa, takže by
     tlačítka vyšla různě široká (254 a 203 px). Osm pixelů, ne pět:
     při přesně poloviční šířce se druhé tlačítko po zaokrouhlení
     zlomilo na další řádek. */
  flex: 0 0 calc(50% - 8px);
  width: calc(50% - 8px);
  min-width: 0;
  height: 44px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius-s);
  background: #fff;
  overflow: hidden;
}
#tc-facebook-signin.tc-social-login-btn:hover,
#tc-google-signin:hover {
  border-color: var(--bso-navy);
}

/* Facebook: ikona a text vedle sebe, zarovnané doleva jako u Googlu */
/* `!important` je nutný: modul kreslí facebookové tlačítko jako blok
   s ikonou v pozadí a odsazením zleva, a to pravidlo je silnější. */
#tc-facebook-signin.tc-social-login-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 12px !important;
  background-image: none !important;
  font-family: var(--bso-base) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--bso-text) !important;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Modul logo umísťuje absolutně přes text; ve flexu musí stát v řadě. */
#tc-facebook-signin .social-logo {
  position: static !important;
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0 14px 0 0 !important;
}
/* Samotné logo je uvnitř umístěné absolutně a po vrácení do toku se smrsklo
   na šest bodů na šířku, takže obrázek na pozadí (`background-size: contain`)
   vyšel jako tečka. Roztažením na celý obal se srovná s ikonou Googlu. */
/* Logo nemá obsah, jen obrázek na pozadí, takže se ve flexu smrsklo na šest
   bodů a `background-size: contain` z něj udělalo tečku. Rozměr proto v bodech
   a natvrdo, ne procenty. */
#tc-facebook-signin .social-logo .facebook-logo {
  position: static !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Google: pryč s vlastním rámečkem, šířku bere z obalu */
#tc-google-signin > div,
#tc-google-signin [role="button"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 42px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Popisek Googlu je ve výchozím stavu roztažený a vystředěný; přisuneme
   ho k ikoně, ať dvojice vypadá stejně. */
/* Knihovna si uvnitř drží vlastní odsazení; v úzkém sloupci pokladny kvůli
   němu popisek nevyšel a Google ho zkrátil na „Přihlášení přes Go…". */
#tc-google-signin [role="button"] > div {
  justify-content: flex-start !important;
  padding: 0 !important;
  width: 100% !important;
}
#tc-google-signin [role="button"] > div > div {
  margin: 0 !important;
  padding: 0 !important;
}
/* Knihovna popisek zkracuje třemi tečkami, jakmile se jí zdá úzký; necháme
   ho v plné šířce, do tlačítka se vejde. */
#tc-google-signin [role="button"] span {
  flex: 0 0 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  margin-left: 14px !important;
  text-align: left !important;
  font-family: var(--bso-base) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bso-text) !important;
}

/* Obě stránky: dvojice v jednom řádku, na úzkém displeji pod sebou. */
body#authentication .login-form > div:has(> #tc-facebook-signin),
body#checkout .social-login {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
body#authentication .login-form > div:has(> #tc-facebook-signin) {
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bso-border);
}
body#checkout .social-login { margin-bottom: 8px; }

/* V pokladně je sloupec užší než na stránce přihlášení, popisky se do
   tlačítek nevejdou. Menší písmo a užší odsazení je srovnají; platí pro
   všechny jazyky, délka popisku se jazyk od jazyka liší. */
body#checkout #tc-facebook-signin.tc-social-login-btn {
  padding: 0 6px !important;
  font-size: 12px !important;
}
/* Ikona Facebooku je plný čtverec bez vnitřního bílého okraje, kdežto
   Google si kolem svého G kus místa nese sám. Aby popisky odsazovaly
   opticky stejně, dostane Facebook větší mezeru v číslech. */
body#checkout #tc-facebook-signin .social-logo { margin-right: 14px !important; }
body#checkout #tc-google-signin [role="button"] span {
  margin-left: 8px !important;
  font-size: 12px !important;
}

@media (max-width: 480px) {
  #tc-facebook-signin,
  #tc-google-signin { flex: 0 0 100%; width: 100%; }
}

/* Popisek nad poli e-mailu a hesla se liší podle zvolené možnosti. Modul má
   v bloku jediný popisek, „Již máte účet?", a nechává ho viset i v režimu
   Registrace, kde se pod ním nový účet naopak zakládá. Child šablona
   `modules/thecheckout/.../login-form.tpl` proto nese obě znění a přepíná
   se tady, podle třídy, kterou modul dává na <body>.
   Registrace nemá vlastní tlačítko schválně: účet vzniká odesláním
   objednávky, zákazník jen vyplní heslo.
   Vlastní `!important` a `.offer-login` navíc v selektoru jsou tu nutné:
   popisky výš v této sekci dostávají `display: flex !important` se stejnou
   vahou, takže bez přidané třídy by vyhrálo pravidlo, které stojí níž. */
body#checkout .offer-login .bso-popisek-registrace { display: none !important; }
body#checkout.checkout-option-customer .already-account-label { display: none !important; }
body#checkout.checkout-option-customer .offer-login .bso-popisek-registrace { display: flex !important; }

/* Výzva ke kontrole košíku (html-box-2) stojí hned pod titulkem přes celou
   šířku. Klient na ní trvá: objednávka se potvrzuje jedním tlačítkem, takže
   je to poslední místo, kde zákazník obsah košíku uvidí. Proto červená a
   výrazná, ale ne jako druhý nadpis stránky. */
body#checkout #thecheckout-html-box-2 { padding: 0 9px 20px 9px !important; }
body#checkout #thecheckout-html-box-2 > .inner-area {
  padding: 0 !important;
  background: transparent;
  border: none;
}
body#checkout .tc-vyzva-kosik {
  margin: 0;
  font-family: var(--bso-condensed);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--bso-red);
}

/* Upozornění, kam e-shop nedoručuje (html-box-3), stojí pod výzvou ke
   kontrole košíku. Menší a klidnější než ta výzva, ať se dvě upozornění
   nad sebou nepřekřikují; podstatná část věty je červeně. */
body#checkout #thecheckout-html-box-3 { padding: 0 9px 20px 9px !important; }
body#checkout #thecheckout-html-box-3 > .inner-area {
  padding: 0 !important;
  background: transparent;
  border: none;
}
body#checkout .tc-doruceni-eu {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--bso-text);
}
body#checkout .tc-doruceni-eu .tc-zvyrazneni { color: var(--bso-red); }

/* Věta o souhlasu (html-box-4) nahrazuje zaškrtávátko obchodních podmínek
   a stojí těsně nad potvrzovacím tlačítkem. Drobným písmem, aby tlačítko
   zůstalo dominantní. */
body#checkout #thecheckout-html-box-4 { padding: 0 9px 6px 9px !important; }
body#checkout #thecheckout-html-box-4 > .inner-area {
  padding: 0 !important;
  background: transparent;
  border: none;
}
body#checkout .tc-souhlas-vetou {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bso-muted);
}
body#checkout .tc-souhlas-vetou a {
  color: inherit;
  text-decoration: underline;
}

/* Podklad stránky zůstává bílý jako na zbytku webu; karty jsou vidět díky
   rámečku. `.checkout-block` má od modulu padding 10px 3px, `.main-block`
   15px 7px, což dělalo nestejné mezery mezi sloupci i pod sebou. */
body#checkout #content { background: #fff; }
body#checkout #tc-container,
body#checkout #tc-container-mobile { padding: 0; }
body#checkout .checkout-block { padding: 0 9px 18px 9px !important; }
body#checkout .tc-block-placeholder { display: none !important; }

/* ── 12.2 Karty bloků a hlavičky kroků ─────────────────────────────────── */

/* Jedna karta pro všechny obsahové bloky. Modul dává `.checkout-block
   .inner-area` padding 10px, clean substyle navíc `.main-block .inner-area`
   rámeček #d2d2d2, radius 5 a padding-top 34 (místo pro plovoucí legendu). */
body#checkout .checkout-block.main-block > .inner-area,
body#checkout #thecheckout-cart-summary > .inner-area,
body#checkout #thecheckout-order-message > .inner-area,
body#checkout #thecheckout-confirm > .inner-area {
  padding: 16px 18px !important;
  background: #fff;
  border: 1px solid var(--bso-border) !important;
  border-radius: var(--bso-radius) !important;
  box-shadow: none;
}
/* clean substyle barví celý blok souhrnu košíku na #f6f6f7 a dává mu margin */
body#checkout #tc-container #thecheckout-cart-summary,
body#checkout #tc-container-mobile #thecheckout-cart-summary {
  background: transparent !important;
  margin: 0 !important;
}
body#checkout #thecheckout-cart-summary > .inner-area { overflow: hidden; }

/* Hlavička bloku: clean substyle ji dává absolutně na horní hranu rámečku
   jako legendu fieldsetu (position:absolute, top:-1em, bílé pozadí). Vracíme
   ji do toku jako nadpis karty, aby seděla do vzhledu ostatních panelů. */
body#checkout .block-header,
body#checkout .already-account-label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center;
  gap: 9px;
  flex-basis: auto;
  margin: 0 0 14px 0 !important;
  padding: 0 0 11px 0 !important;
  border-bottom: 1px solid #f0f0f5;
  background: transparent !important;
  font-family: var(--bso-condensed) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bso-navy-dark) !important;
  text-align: left;
}
/* Číslo kroku: front.less mu dává hranatý rámeček, clean substyle ho schovává
   (display:none), css-config barví text na --tc-color-base. Kulatá červená
   plaketa s bílou číslicí, jako odrážky v ostatních sekcích webu. */
body#checkout .checkout-block[class*='num-'] .block-header::before {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50%;
  background: var(--bso-red);
  font-family: var(--bso-base);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff !important;
}

/* ── 12.3 Formulářová pole ─────────────────────────────────────────────── */

/* Vzhled inputů drží stejnou linku jako box „Hlídat dostupnost" a vyhledávání
   v hlavičce: bílé pole, rámeček #e2e2ea, radius 6, fokus 2px navy + halo.
   Přebíjí `.page-content .form-control` z clean substylu (1px #d2d2d2, r3). */
body#checkout .page-content .form-control:not(textarea),
body#checkout .page-content select.form-control-select.form-control {
  box-sizing: border-box;
  height: 44px !important;
  padding: 0 14px !important;
  background-color: #fff;
  border: 1px solid #e2e2ea !important;
  border-radius: var(--bso-radius-s) !important;
  font-family: var(--bso-base) !important;
  font-size: 14px !important;
  line-height: 42px !important;
  color: var(--bso-text);
  box-shadow: none;
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
/* Select: modul si kreslí vlastní dvojitou šipku jako background-image;
   nahrazena jednoduchou šipkou dolů v tlumené barvě webu. */
body#checkout .page-content .has-float-label select.form-control,
body#checkout .page-content select.form-control-select.form-control {
  padding: 0 36px 0 14px !important;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.8 6 6.2l4.5-4.4' fill='none' stroke='%236b6b78' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
}
body#checkout .page-content textarea.form-control {
  padding: 12px 14px !important;
  background-color: #fff;
  border: 1px solid #e2e2ea !important;
  border-radius: var(--bso-radius-s) !important;
  font-family: var(--bso-base);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bso-text);
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
body#checkout .page-content .form-control::placeholder { color: var(--bso-muted-2); opacity: 1; }
/* front.less barví vyplněné pole na zeleno (`:not(:placeholder-shown)`),
   clean substyle to vrací na #d2d2d2; sjednoceno na náš neutrální rámeček */
/* `:not(.-error)` je nutné: bez něj má tohle pravidlo vyšší specificitu (1,5,1)
   než pravidlo chybového stavu a přebilo by mu červený rámeček */
body#checkout .has-float-label :not(:placeholder-shown):not(:focus):not(.-error) { border-color: #e2e2ea !important; }
body#checkout .page-content .form-control:focus,
body#checkout .has-float-label input:focus,
body#checkout .has-float-label select:focus,
body#checkout .page-content textarea.form-control:focus {
  outline: none;
  border-color: var(--bso-navy) !important;
  box-shadow: 0 0 0 3px rgba(49, 39, 131, 0.12);
}

/* Popisek nad polem (float label). clean substyle ho drží absolutně nad
   inputem přes top:-25px a margin-top:20px na labelu. */
body#checkout label.has-float-label { margin-top: 26px !important; }
body#checkout .has-float-label span.field-label,
body#checkout .has-float-label.required span.field-label,
body#checkout .need-dni .has-float-label span.field-label,
body#checkout .has-float-label input:placeholder-shown:not(:focus) ~ span.field-label,
body#checkout .has-float-label select:placeholder-shown:not(:focus) ~ span.field-label {
  top: -22px !important;
  font-family: var(--bso-base) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  color: var(--bso-navy-dark) !important;
  opacity: 1 !important;
}
/* Okap mezi poli vedle sebe. `.form-fields` je flex se `space-between` a pole
   mají inline `flex-basis` (50 %, 75 %, 25 %, 100 %), takže `gap` nelze použít:
   dvě pole plus mezera by přesáhly 100 % a zalomily se pod sebe. Klasický
   okap přes záporný margin kontejneru a padding polí je vůči inline hodnotám
   imunní (`box-sizing: border-box` platí globálně z Bootstrapu).
   9 px na stranu dává mezi rámečky 18 px, tedy stejný rozestup jako mezi
   bloky pokladny (padding .checkout-block) a jako svislá mezera mezi řádky
   polí. Pole na plnou šířku i nadpis karty tak lícují na stejné ose.
   Selektor je záměrně potomkovský: pokrývá i pole uvnitř
   .business-fields-container, který dědí rozšířený box od .form-fields
   a vlastní záporný margin mít nesmí (jinak by se odsazení sečetlo). */
body#checkout .form-fields { margin-left: -9px; margin-right: -9px; }
body#checkout .form-fields .form-group { padding-left: 9px !important; padding-right: 9px !important; }
/* řádek telefonu (předvolba + číslo) je vnořená bootstrapí .row, ta si okap
   řeší sama a druhý by se sečetl */
body#checkout .form-fields .form-group.row { margin-bottom: 0 !important; }
body#checkout .form-fields .form-group.row > [class*="col"] { padding-left: 0; padding-right: 0; }

/* Chybové stavy */
/* selektor musí přebít vlastní základní pravidlo o kus výš, které má kvůli
   `:not(textarea)` o jeden typový selektor navíc, proto scope přes #content */
body#checkout #content.page-content .form-control.-error,
body#checkout #content.page-content .has-float-label .form-control.-error {
  border-color: var(--bso-red) !important;
  background-color: #fdeaec !important;
}
body#checkout .error-msg,
body#checkout .form-group .error-msg {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--bso-red-hover);
}

/* Přepínač telefonní předvolby drží výšku inputu */
body#checkout .country-call-prefix { height: 44px !important; background: #f4f3fb; border-radius: var(--bso-radius-s) 0 0 var(--bso-radius-s); }

/* ── 12.4 Checkboxy a souhlasy ─────────────────────────────────────────── */

/* Řádek souhlasu je flex: čtvereček nahoře, text zalomený vedle něj.
   Přebíjí `body#checkout span.custom-checkbox { margin-top: .15rem }`
   z front.less (stejná specificita, ale modul se načítá za námi). */
body#checkout span.custom-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px;
  margin-top: 0 !important;
  padding-left: 0 !important;
}
body#checkout #content.page-content .custom-checkbox input[type=checkbox] + span {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 1px 0 0 0 !important;
  border: 2px solid #cfcfdd !important;
  border-radius: 4px;
  background: #fff;
  transition: border-color var(--bso-prechod), background var(--bso-prechod);
}
body#checkout #content.page-content .custom-checkbox input[type=checkbox]:checked + span {
  border-color: var(--bso-red) !important;
  background: var(--bso-red);
}
/* fajfku kreslí modul přes mask-image na ::after; na červeném poli musí být
   bílá (css-config ji barví na --tc-color-base, tedy na stejnou červenou) */
body#checkout #content.page-content .custom-checkbox input[type=checkbox]:checked + span::after {
  background-color: #fff !important;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-position: center;
  mask-position: center;
}
body#checkout .custom-checkbox span.label,
body#checkout span.custom-checkbox > label,
body#checkout .custom-checkbox span.label p {
  flex: 1 1 auto;
  font-family: var(--bso-base);
  font-size: 13.5px !important;
  font-weight: 400 !important;
  font-style: normal;
  line-height: 1.45 !important;
  color: var(--bso-text);
}
/* vysvětlující text pod souhlasem (GDPR, newsletter) modul sází kurzívou */
body#checkout .custom-checkbox span.label em,
body#checkout .checkbox-description,
body#checkout #thecheckout-psgdpr em,
body#checkout #thecheckout-newsletter em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.4;
  color: var(--bso-muted);
}
/* Hvězdička povinného souhlasu: modul ji sází jako ::before na span.label
   s float:right, takže odletí k pravému okraji karty daleko od textu.
   Vypnuto a nahrazeno vlastním ::after hned za posledním slovem. */
body#checkout.mark-required .form-group.checkbox label.required span.label::before { display: none !important; }
body#checkout.mark-required .form-group.checkbox label.required span.label::after {
  content: " *";
  color: var(--bso-red);
  font-weight: 700;
}
/* souhlas uvnitř karty (bez okapu) versus souhlas v mřížce polí (s okapem,
   aby lícoval s poli nad ním) */
body#checkout .form-group.checkbox { margin-bottom: 0; padding-left: 0 !important; padding-right: 0 !important; }
body#checkout .form-fields .form-group.checkbox { padding-left: 9px !important; padding-right: 9px !important; }

/* Souhlasy mezi účtem a fakturační adresou (newsletter a psgdpr) tvoří jeden
   světle fialový blok. Bloky jsou v DOM sourozenci v pořadí newsletter →
   psgdpr; když modul psgdpr nevykreslí, zaoblení dopočítá :has(). */
body#checkout #thecheckout-newsletter,
body#checkout #thecheckout-psgdpr {
  padding: 0 9px !important;
}
body#checkout #thecheckout-newsletter > .inner-area,
body#checkout #thecheckout-psgdpr > .inner-area {
  padding: 10px 14px !important;
  background: #f4f3fb;
  border: none;
  border-radius: 0;
}
body#checkout #thecheckout-newsletter > .inner-area {
  border-radius: var(--bso-radius) var(--bso-radius) 0 0;
  padding-top: 13px !important;
}
body#checkout #thecheckout-psgdpr > .inner-area {
  border-radius: 0 0 var(--bso-radius) var(--bso-radius);
  padding-bottom: 13px !important;
}
/* sám newsletter (bez psgdpr) uzavírá zaoblení na všech čtyřech rozích */
body#checkout #thecheckout-newsletter:not(:has(~ #thecheckout-psgdpr)) > .inner-area {
  border-radius: var(--bso-radius);
  padding-bottom: 13px !important;
}
/* skupina drží pohromadě: spodní odsazení jen pod posledním blokem */
body#checkout #thecheckout-newsletter { padding-bottom: 0 !important; }
body#checkout #thecheckout-newsletter:not(:has(~ #thecheckout-psgdpr)) { padding-bottom: 18px !important; }
body#checkout #thecheckout-psgdpr { padding-bottom: 18px !important; }

/* ── 12.5 Přepínače host / přihlášení / registrace ─────────────────────── */

body#checkout .checkout-options-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px 0;
  padding: 0 !important;
}
/* v úzkém sloupci (33 % šířky, na 1024 px kolem 274 px) se tři popisky
   sotva vejdou, flex-basis 84 px je proto pustí do druhé řádky místo ořezu */
body#checkout .checkout-options-buttons .btn {
  flex: 1 1 84px;
  min-width: 0;
  white-space: nowrap;
  box-sizing: border-box;
  height: 38px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bso-navy) !important;
  box-shadow: none;
  transition: background var(--bso-prechod), border-color var(--bso-prechod), color var(--bso-prechod);
}
body#checkout .checkout-options-buttons .btn:hover { background: #f4f3fb; border-color: #c9c6e3; }
body#checkout .checkout-options-buttons .btn.active,
body#checkout .checkout-options-buttons .btn.active:hover {
  background: var(--bso-navy);
  border-color: var(--bso-navy);
  color: #fff !important;
}
/* nabídka přihlášení uvnitř bloku účtu (modul ji centruje) */
body#checkout .login-block-moved { background: transparent !important; }
body#checkout .inner-area .offer-login { justify-content: flex-start !important; text-align: left !important; }
body#checkout .inner-area .offer-login a.log-in {
  font-size: 14px !important;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body#checkout .inner-area .offer-login a.log-in:hover { color: var(--bso-red) !important; }
/* nadpis „Již máte účet?" je flex položka v .offer-login, musí držet celou
   šířku, jinak se linka pod nadpisem zkrátí na šířku textu */
body#checkout .already-account-label { flex-basis: 100% !important; }
body#checkout #login-form { padding: 0 !important; max-width: none; }
/* přepínač viditelnosti hesla na střed pole vysokého 44 px */
body#checkout [data-link-action="toggle-password-visibility"] {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  opacity: 0.45;
}
body#checkout [data-link-action="toggle-password-visibility"]:hover { opacity: 0.8; }
body#checkout .icon-remove-red-eye { margin-top: 0; }
body#checkout .forgot-password { margin-top: 10px; text-align: left; font-size: 13px; }

/* ── 12.6 Doprava a platba ─────────────────────────────────────────────── */

/* Každá varianta je vlastní volitelná karta; vybraná zčervená.
   `:has(input:checked)` pokrývá i platební metody, kterým modul třídu
   `.selected` nedává (tu má jen doprava). */
body#checkout .delivery-options .delivery-option-row,
body#checkout .payment-options .payment-option {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0 0 9px 0 !important;
  padding: 12px 14px !important;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--bso-prechod), background var(--bso-prechod), box-shadow var(--bso-prechod);
}
body#checkout .delivery-options .delivery-option-row:hover,
body#checkout .payment-options .payment-option:hover { border-color: #c9c6e3; background: #fafafb; }
body#checkout .delivery-options .delivery-option-row:has(input:checked),
body#checkout .payment-options .payment-option:has(input:checked) {
  border-color: var(--bso-red);
  background: #fff7f7;
  box-shadow: 0 2px 10px rgba(227, 6, 19, 0.08);
}
body#checkout .delivery-options .delivery-option-row:last-child,
body#checkout .payment-options > div:last-child .payment-option { margin-bottom: 0 !important; }
body#checkout .delivery-options .row.delivery-option { margin-left: 0; margin-right: 0; }
body#checkout .delivery-option-label { display: flex; flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; }
body#checkout .delivery-option-detail { display: flex; align-items: center; gap: 12px; width: 100%; }
body#checkout .delivery-option-name,
body#checkout .payment-option label span.h6 {
  font-family: var(--bso-base);
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  color: var(--bso-text);
  margin: 0;
}
body#checkout .name-and-delay { flex: 1 1 auto; min-width: 0; }
body#checkout .page-content span.carrier-delay,
body#checkout .delivery-option-delay {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--bso-muted) !important;
}
body#checkout .delivery-option-price,
body#checkout .carrier-price {
  font-family: var(--bso-condensed);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bso-navy-dark);
  white-space: nowrap;
}
body#checkout .delivery-option-price.free,
body#checkout .delivery-option-price.free .carrier-price { color: var(--bso-zelena); }
body#checkout .delivery-option-logo:empty { display: none; }
body#checkout .delivery-option-logo img { max-height: 26px; width: auto; }

/* Radiobutton: modul kreslí kroužek 20px s rámečkem #7a7a7a, uvnitř
   dvanáctipixelový puntík barvený z --tc-color-base. */
body#checkout .checkout-block span.custom-radio {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-right: 12px !important;
  border: 2px solid #cfcfdd !important;
  background: #fff;
  transition: border-color var(--bso-prechod);
}
body#checkout .checkout-block span.custom-radio:has(input:checked) { border-color: var(--bso-red) !important; }
body#checkout .payment-option .custom-radio { margin-top: 0 !important; }
body#checkout .shipping-radio { flex-basis: auto; }
body#checkout .payment-options > div > .payment-option { align-items: center; }
/* modul dává sekci kroku platby margin-bottom 15px, uvnitř karty přebývá */
body#checkout #thecheckout-payment section#checkout-payment-step { margin-bottom: 0 !important; }
body#checkout .payment-option label { align-items: center !important; margin: 0; flex: 1 1 auto; min-width: 0; cursor: pointer; }
body#checkout .payment-option .payment-call-to-action-and-logo {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* Loga platebních metod.
   Modul sází logo z `PaymentOption::setLogo()` do <div class="payment-logo">
   v přirozené velikosti obrázku, takže každá metoda měla jinou šířku loga
   a název metody začínal pokaždé jinde.
   Každé logo proto dostává identický rámeček 50x30 px podle vzhledu loga
   PayPalu (bílý box, 1px šedý rám, kulaté rohy); značka uvnitř drží padding
   a nic se nezvětšuje nad zdrojové rozlišení. Obrázek vnitřní plochu vyplní
   (`width`/`height` 100 %) a `object-fit: contain` mu uvnitř drží poměr
   stran, takže se logo vejde celé a nedeformuje se; užší loga
   (Apple Pay 45x20, Google Pay 20x20) plochu opticky nevyplní a zůstane
   kolem nich volné místo, což je záměr.
   Plochu drží i metody, kterým modul žádné logo nepošle (hotovost, PayPal),
   takže názvy všech metod začínají na stejné svislé ose.
   Plocha se uplatní jen tehdy, když má logo aspoň jedna metoda v seznamu;
   v seznamu bez log by jinak vznikl prázdný okap. */
body#checkout .payment-options:has(.payment-logo img) .payment-option .payment-logo {
  display: block;
  box-sizing: border-box;
  flex: 0 0 50px;
  width: 50px;
  height: 30px;
  margin: 0 12px 0 0;
  padding: 4px 6px;
  border: 1px solid #dddcdc;
  border-radius: 5px;
  background: #fff;
}
body#checkout .payment-option .payment-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Hotově (dm_cash) žádné logo neposílá a rámeček by u ní zůstal prázdný;
   kreslí se do něj bankovka, ať jsou všechny metody vizuálně jednotné.
   background-origin drží kresbu uvnitř paddingu rámečku. */
body#checkout .payment-options .payment-option:has(input[data-module-name^="dm_cash"]) .payment-logo {
  background: #fff url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2038%2018%27%3E%3Crect%20x=%271%27%20y=%271%27%20width=%2736%27%20height=%2716%27%20rx=%272%27%20fill=%27%23e6f4ea%27%20stroke=%27%232f9e44%27/%3E%3Ccircle%20cx=%2719%27%20cy=%279%27%20r=%273.6%27%20fill=%27none%27%20stroke=%27%232f9e44%27/%3E%3Cline%20x1=%275.5%27%20y1=%279%27%20x2=%278.5%27%20y2=%279%27%20stroke=%27%232f9e44%27%20stroke-linecap=%27round%27/%3E%3Cline%20x1=%2729.5%27%20y1=%279%27%20x2=%2732.5%27%20y2=%279%27%20stroke=%27%232f9e44%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  background-origin: content-box;
}

/* Druhý tvar, kterým loga přicházejí: modul vloží <img> rovnou do názvu
   metody (call_to_action_text jde do šablony nefiltrovaný). Takové logo
   dostane stejnou plochu i stejnou mezeru za sebou; prázdná plocha pro logo
   se u takové metody sbalí, aby se odsazení nesčítalo. */
body#checkout .payment-option:has(label span.h6 img) .payment-logo { display: none !important; }
body#checkout .payment-option label span.h6 img {
  display: inline-block;
  box-sizing: border-box;
  width: 50px;
  height: 30px;
  margin: 0 12px 0 0;
  padding: 4px 6px;
  border: 1px solid #dddcdc;
  border-radius: 5px;
  background: #fff;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
}
/* doplňkový text platební metody (např. instrukce k převodu) */
body#checkout .additional-information {
  margin: -3px 0 12px 46px !important;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bso-muted);
}
body#checkout .additional-information p:last-child { margin-bottom: 0; }

/* ── 12.7 Souhrn košíku ────────────────────────────────────────────────── */

body#checkout #thecheckout-cart-summary .card,
body#checkout #thecheckout-cart-summary .cart-container,
body#checkout #thecheckout-cart-summary .cart-summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body#checkout #thecheckout-cart-summary .cart-grid { margin: 0 !important; }
body#checkout #thecheckout-cart-summary .cart-items { margin: 0; padding: 0; list-style: none; }
body#checkout #thecheckout-cart-summary .cart-item {
  padding: 12px 0 !important;
  margin: 0;
  border-bottom: 1px solid #f0f0f5;
}
body#checkout #thecheckout-cart-summary .cart-item:first-child { padding-top: 0 !important; }
body#checkout #thecheckout-cart-summary .cart-item:last-child { border-bottom: none; }
body#checkout.compact-cart #tc-container .cart-item .product-line,
body#checkout.compact-cart #tc-container-mobile .cart-item .product-line {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0 !important;
}
body#checkout.compact-cart #tc-container .product-line-image img,
body#checkout.compact-cart #tc-container-mobile .product-line-image img {
  box-sizing: border-box;
  width: 64px !important;
  max-width: 64px !important;
  height: 64px;
  margin: 0 !important;
  padding: 4px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 8px;
}
body#checkout #thecheckout-cart-summary .product-line-info.product-title a.label,
body#checkout.compact-cart #tc-container .product-line-info .label {
  font-family: var(--bso-base);
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  color: var(--bso-navy-dark) !important;
  transition: color var(--bso-prechod);
}
body#checkout #thecheckout-cart-summary .product-line-info.product-title a.label:hover { color: var(--bso-red) !important; }
body#checkout #thecheckout-cart-summary .product-reference,
body#checkout #thecheckout-cart-summary .product-line-info.quantity-info {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--bso-muted-2);
}
body#checkout #thecheckout-cart-summary .product-line-price .product-price,
body#checkout #thecheckout-cart-summary .product-line-price strong {
  font-family: var(--bso-condensed);
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  color: var(--bso-navy-dark) !important;
  white-space: nowrap;
}
/* Měnič množství v souhrnu košíku.
   Modul ho staví jinak než stránka košíku: místo touchspinu jsou to dva <a>
   se znaménkem v background-image. V režimu compact-cart mu navíc dává
   `transform: scale(.8)`, takže se celý box i se znaménky vykresloval na
   půlpixelech a znaménka vypadala mimo střed. Transform rušíme a box
   skládáme ve skutečné velikosti jako na stránce košíku (sekce 13.4),
   jen o něco menší; znaménka jsou tatáž SVG.
   Pozor: modul souhrn po každé změně množství, dopravy nebo adresy překreslí
   ajaxem, proto tady nesmí být nic navěšeného na stav, jen čisté CSS. */
body#checkout #thecheckout-cart-summary .product-line-actions .qty-box {
  transform: none !important;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  box-sizing: border-box;
  width: 88px;
  height: 30px;
  background: #fff;
  border: 1px solid #e2e2ea;
  border-radius: var(--bso-radius-s);
  overflow: hidden;
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
body#checkout #thecheckout-cart-summary .product-line-actions .qty-box:focus-within {
  border-color: var(--bso-navy);
  box-shadow: 0 0 0 3px rgba(49, 39, 131, 0.12);
}
body#checkout #thecheckout-cart-summary .product-line-actions .qty-box input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--bso-text);
}
body#checkout #thecheckout-cart-summary .product-line-actions .qty-box input:focus {
  outline: none;
  border: none !important;
  box-shadow: none;
}
/* Znaménka: stejné SVG jako na stránce košíku, 12 px na střed tlačítka.
   Tlačítko je 30 px vysoké i široké, takže střed padne na celý pixel. */
body#checkout #thecheckout-cart-summary div.product-line-actions .qty-box a {
  flex: 0 0 28px;
  width: 28px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none !important;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1.5 5.5h8' fill='none' stroke='%236b6b78' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12px 12px;
  transition: background-color var(--bso-prechod);
}
body#checkout #thecheckout-cart-summary div.product-line-actions .qty-box a.cart-line-product-quantity-up {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1.5 5.5h8M5.5 1.5v8' fill='none' stroke='%236b6b78' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Na hoveru se mění jen barva podkladu. Zkratka `background` by přepsala
   i background-image a znaménko by zmizelo, proto výhradně background-color. */
body#checkout #thecheckout-cart-summary div.product-line-actions .qty-box a:hover,
body#checkout #thecheckout-cart-summary div.product-line-actions .qty-box a:active {
  background-color: #f4f3fb;
}
body#checkout #thecheckout-cart-summary .remove-from-cart { color: var(--bso-muted-2) !important; transition: color var(--bso-prechod); }
body#checkout #thecheckout-cart-summary .remove-from-cart:hover { color: var(--bso-red) !important; }

/* Řádky rozpisu a celková částka */
body#checkout #thecheckout-cart-summary .cart-detailed-totals {
  margin-top: 12px;
  border-top: 1px solid #f0f0f5 !important;
}
body#checkout #thecheckout-cart-summary .card-block { padding: 10px 0 0 0 !important; }
/* Bootstrap 5 už třídu .hidden nedefinuje, ale šablona modulu ji dál používá
   (např. řádek s celkovou hmotností), takže by se řádek jinak zobrazil */
body#checkout #thecheckout-cart-summary .cart-summary-line.hidden { display: none !important; }
body#checkout #thecheckout-cart-summary .cart-summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px 0 !important;
  font-size: 13.5px;
  color: #55555f;
}
/* .cart-summary-line nese od Warehouse clearfix ::after, který by ve flexu
   byl třetí položkou a odtlačil hodnotu od pravého okraje */
body#checkout #thecheckout-cart-summary .cart-summary-line::after { display: none !important; }
body#checkout.compact-cart #tc-container .cart-summary-line > span,
body#checkout.compact-cart #tc-container-mobile .cart-summary-line > span {
  float: none !important;
  line-height: 1.5 !important;
  font-size: 13.5px !important;
}
body#checkout #thecheckout-cart-summary .cart-summary-line .value { margin-left: auto; text-align: right; font-weight: 600; color: var(--bso-text); white-space: nowrap; }
body#checkout #thecheckout-cart-summary .cart-summary-line.free .value { color: var(--bso-zelena); }
/* Rozpad DPH (PS_TAX_DISPLAY = 1): shop je B2C s cenami s DPH, takže řádky
   „Celkem (bez DPH)" a „vč. DPH" jsou sekundární a hlavní je až Celkem s DPH.
   Oddělovací čára patří nad celý blok součtů, ne až nad poslední řádek. */
body#checkout #thecheckout-cart-summary .cart-summary-line.cart-total-tax-excluded {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #f0f0f5;
}
body#checkout #thecheckout-cart-summary .cart-summary-line.cart-total-tax-excluded,
body#checkout #thecheckout-cart-summary .cart-summary-line.cart-total-tax {
  margin-bottom: 3px !important;
  color: var(--bso-muted);
}
body#checkout.compact-cart #tc-container .cart-total-tax-excluded > span,
body#checkout.compact-cart #tc-container .cart-total-tax > span,
body#checkout.compact-cart #tc-container-mobile .cart-total-tax-excluded > span,
body#checkout.compact-cart #tc-container-mobile .cart-total-tax > span {
  font-size: 12.5px !important;
}
body#checkout #thecheckout-cart-summary .cart-total-tax-excluded .value,
body#checkout #thecheckout-cart-summary .cart-total-tax .value {
  font-weight: 500;
  color: var(--bso-muted);
}
/* popisek řádku s DPH sází modul jako <div class="label">, ne jako <span>,
   takže ho pravidlo pro `> span` o kus výš míjelo a jediný z rozpisu zůstával
   ve 13,5 px; na stránce košíku je celý rozpis ve 12,5 px (sekce 13.5) */
body#checkout #thecheckout-cart-summary .cart-summary-line.cart-total-tax > .label { font-size: 12.5px !important; }
body#checkout #thecheckout-cart-summary .cart-summary-line.cart-total,
body#checkout #thecheckout-cart-summary .cart-summary-line.cart-total:last-child {
  margin: 6px 0 0 0 !important;
  padding-top: 11px !important;
  border-top: 1px solid #f0f0f5 !important;
}
body#checkout.compact-cart #tc-container .cart-summary-line.cart-total > span.label,
body#checkout.compact-cart #tc-container-mobile .cart-summary-line.cart-total > span.label,
body#checkout #thecheckout-cart-summary .cart-total .label,
body#checkout #thecheckout-cart-summary .cart-total > span:first-child {
  font-family: var(--bso-condensed) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-navy-dark) !important;
}
/* selektor musí přebít modulové `.compact-cart #tc-container
   .cart-summary-line > span { font-size: 13.5px !important }` (2,2,2) */
body#checkout.compact-cart #tc-container .cart-summary-line.cart-total > span.value,
body#checkout.compact-cart #tc-container-mobile .cart-summary-line.cart-total > span.value,
body#checkout #thecheckout-cart-summary .cart-total .value {
  font-family: var(--bso-condensed) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--bso-navy-dark) !important;
}

/* Slevový kód (modul ho vykresluje jen když je v shopu aktivní) */
body#checkout .cart-voucher > p > a.promo-code-button {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
body#checkout .cart-voucher > p > a.promo-code-button:hover { color: var(--bso-red) !important; }
body#checkout .block-promo .promo-code { background: transparent !important; padding: 10px 0 !important; }
body#checkout .block-promo .promo-input-button { display: flex; gap: 8px; height: auto !important; }
body#checkout .block-promo .promo-code .promo-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px !important;
  background: #fff !important;
  border: 1px solid #e2e2ea !important;
  border-radius: var(--bso-radius-s) !important;
  font-size: 14px;
}
body#checkout .block-promo .promo-code .btn-primary {
  flex: 0 0 auto;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  background: var(--bso-navy) !important;
  border: none !important;
  border-radius: var(--bso-radius-s) !important;
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff !important;
}
body#checkout .block-promo .promo-code .btn-primary:hover { background: var(--bso-red) !important; }

/* Lepivý souhrn: modul dává bloku třídu `sticky` a `front.less` k ní
   `#tc-container .checkout-block.sticky { position: sticky; top: 0 }`, takže
   by karta zalezla pod zafixovanou lištu menu. Ta má ve stuck stavu
   (`#iqitmegamenu-wrapper.stuck`, position fixed) změřených 44 px, plus
   16 px na nadechnutí. Sticky funguje jen díky tomu, že žádný předek
   (`.blocks`, `.flex-split-horizontal`, `#tc-container`, `#content`) nemá
   overflow jiný než visible; scrollování je až uvnitř karty, což sticky neruší. */
body#checkout #tc-container .checkout-block.sticky {
  top: var(--bso-sticky-top);
  align-self: flex-start;
}
/* Vysoký košík (hodně položek, sleva, rozpad DPH) by přerostl okno a sticky
   by neměl co lepit. Karta se proto vejde do výšky okna a scrolluje se jen
   seznam položek; hlavička i celková částka zůstávají vždy vidět. */
body#checkout #thecheckout-cart-summary.sticky > .inner-area {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--bso-sticky-top) - 20px);
}
/* `flex-wrap: nowrap` je nutné: .cart-grid je bootstrapí .row s wrapem,
   ve svislém flexu s omezenou výškou by položky přetekly do dalšího sloupce
   místo aby se seznam zmenšil */
body#checkout #thecheckout-cart-summary.sticky > .inner-area,
body#checkout #thecheckout-cart-summary.sticky > .inner-area > section,
body#checkout #thecheckout-cart-summary.sticky .cart-inner-wrapper,
body#checkout #thecheckout-cart-summary.sticky .cart-grid,
body#checkout #thecheckout-cart-summary.sticky .cart-overview { flex-wrap: nowrap; }
body#checkout #thecheckout-cart-summary.sticky > .inner-area > section,
body#checkout #thecheckout-cart-summary.sticky .cart-inner-wrapper,
body#checkout #thecheckout-cart-summary.sticky .cart-grid {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body#checkout #thecheckout-cart-summary.sticky .block-header,
body#checkout #thecheckout-cart-summary.sticky .cart-summary-top,
body#checkout #thecheckout-cart-summary.sticky .cart-summary.card { flex: 0 0 auto; }
body#checkout #thecheckout-cart-summary.sticky .cart-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* žlábek posuvníku vpravo, aby seznam nepodskakoval při změně počtu položek */
  scrollbar-gutter: stable;
  padding-right: 4px !important;
}
/* posuvník stejný jako v rozbalovacím košíku v hlavičce (sekce bso-mc-):
   scrollbar-width/-color se ZÁMĚRNĚ nepoužívá, jinak Chrome ignoruje
   ::-webkit-scrollbar a vykreslí překryvný posuvník */
/* Náznak, že seznam pokračuje: dvě bílé krycí vrstvy (background-attachment
   local, scrollují s obsahem) a pod nimi dva měkké stíny (attachment scroll,
   drží se hran). Stín u hrany je tak vidět jen dokud je kam scrollovat, což
   statický přechod jako v rozbalovacím košíku neumí. Selektor s .card musí
   přebít pravidlo výš, které kartám souhrnu maže pozadí. */
body#checkout #thecheckout-cart-summary .card.cart-container {
  background:
    linear-gradient(#fff 40%, rgba(255, 255, 255, 0)) center top,
    linear-gradient(rgba(255, 255, 255, 0), #fff 60%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(22, 18, 63, 0.13), rgba(22, 18, 63, 0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(22, 18, 63, 0.13), rgba(22, 18, 63, 0)) center bottom !important;
  background-repeat: no-repeat !important;
  background-size: 100% 22px, 100% 22px, 100% 7px, 100% 7px !important;
  background-attachment: local, local, scroll, scroll !important;
}
body#checkout #thecheckout-cart-summary .cart-container::-webkit-scrollbar { width: 4px; }
body#checkout #thecheckout-cart-summary .cart-container::-webkit-scrollbar-track { background: transparent; }
body#checkout #thecheckout-cart-summary .cart-container::-webkit-scrollbar-thumb { background-color: #d6d6e0; border-radius: 2px; }

/* Varianta pod názvem: modul jí dává stejnou velikost i barvu jako názvu
   (`.compact-cart #tc-container .product-line-info .label`), takže s ním
   splývala. Stejné provedení jako v rozbalovacím košíku (sekce bso-mc-):
   12 px, #9a97b5, hodnota o odstín tmavší. */
body#checkout #thecheckout-cart-summary .product-line-info.product-attribute {
  margin-top: 2px;
  font-size: 12px !important;
  line-height: 1.35;
  color: #9a97b5 !important;
}
body#checkout.compact-cart #tc-container .product-line-info.product-attribute .label,
body#checkout.compact-cart #tc-container-mobile .product-line-info.product-attribute .label,
body#checkout #thecheckout-cart-summary .product-line-info.product-attribute .label {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #9a97b5 !important;
}
body#checkout #thecheckout-cart-summary .product-line-info.product-attribute .value {
  font-size: 12px !important;
  font-weight: 600;
  color: var(--bso-muted);
}

/* Zlevněná položka. Modul v kompaktním souhrnu jednotkovou cenu celou skrývá
   (`.product-line-info.product-price { display: none }`), takže o slevě nebylo
   v pokladně ani stopy, i když je vidět na kartě produktu i na stránce košíku.
   Zlevněné položce se proto vrací jeden malý řádek pod názvem se stejnými
   prvky jako ve výpisu: přeškrtnutá původní cena, žlutý odznak a červená
   aktuální cena. Nezlevněné položky zůstávají skryté, tam stačí řádková cena. */
body#checkout #thecheckout-cart-summary .product-line-info.product-price.has-discount {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 2px 0 0 0 !important;
  font-size: 12.5px !important;
}
body#checkout #thecheckout-cart-summary .product-price.has-discount .product-discount {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body#checkout #thecheckout-cart-summary .product-price.has-discount .regular-price {
  font-size: 12px !important;
  font-weight: 400;
  color: var(--bso-muted-2) !important;
  text-decoration: line-through;
}
body#checkout #thecheckout-cart-summary .product-price.has-discount .discount {
  display: inline-block;
  margin: 0 !important;
  padding: 1px 6px;
  background: var(--bso-zluta);
  border-radius: 4px;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bso-navy-dark) !important;
}
body#checkout #thecheckout-cart-summary .product-price.has-discount .current-price .price {
  font-size: 12.5px !important;
  font-weight: 600;
  color: var(--bso-red) !important;
}

/* Ikony koše (odebrání položky i odebrání kupónu) přicházejí z modulu jako
   base64 SVG v background-image s natvrdo černou výplní, takže na ně `color`
   nedosáhne. Nahrazeny maskou, aby držely stejnou tlumenou barvu a červený
   hover jako koš na stránce košíku a v rozbalovacím košíku. */
body#checkout #thecheckout-cart-summary .non-material-icon.delete-from-cart,
body#checkout #thecheckout-cart-summary .promo-name .icon-delete {
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: none !important;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6.5 7l1 12.5h9L17.5 7M9 7V4.5h6V7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6.5 7l1 12.5h9L17.5 7M9 7V4.5h6V7'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
body#checkout #thecheckout-cart-summary .promo-name li > a { color: #9a97b5 !important; transition: color var(--bso-prechod); }
body#checkout #thecheckout-cart-summary .promo-name li > a:hover { color: var(--bso-red) !important; }

/* Uplatněné slevy nad polem pro kupón. Modul je sází jako popisek, odkaz na
   odebrání a plovoucí hodnotu; ve flexu by koš skončil mezi textem a částkou,
   proto ho `order` posílá dopředu, stejně jako na stránce košíku. */
body#checkout #thecheckout-cart-summary .promo-name {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  list-style: none;
}
body#checkout #thecheckout-cart-summary .promo-name li.cart-summary-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px !important;
}
body#checkout #thecheckout-cart-summary .promo-name li > a {
  order: -1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
/* automatické pravidlo (doprava zdarma) odkaz na odebrání nemá */
body#checkout #thecheckout-cart-summary .promo-name li:not(:has(a)) { padding-left: 25px; }
body#checkout #thecheckout-cart-summary .promo-name li .label { flex: 1 1 auto; font-weight: 600; }
body#checkout #thecheckout-cart-summary .promo-name li .float-xs-right {
  float: none !important;
  margin-left: auto;
  font-weight: 600;
  color: var(--bso-zelena);
  white-space: nowrap;
}
/* uplatněná sleva je jediná záporná částka v souhrnu, drží zelenou jako
   doprava zdarma (stejně jako v košíku, sekce 13.5) */
body#checkout #thecheckout-cart-summary #cart-subtotal-discount .value { color: var(--bso-zelena); }

/* ── 12.8 Poznámka k objednávce ────────────────────────────────────────── */

/* Hlavičku bloku dopisuje child šablona (themes/baseball-shop/modules/
   thecheckout/views/templates/front/blocks/order-message.tpl), vzhled dědí
   z pravidla pro .block-header v 12.2. */
body#checkout #thecheckout-order-message .block-header { margin-bottom: 12px !important; }
/* popisek je vysvětlující věta, ne druhý nadpis */
body#checkout #thecheckout-order-message #delivery label {
  display: block;
  margin: 0 0 8px 0;
  font-family: var(--bso-base);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--bso-muted);
}
/* textarea sjednocená s ostatními poli pokladny (12.3): radius 6, rámeček
   #e2e2ea, padding 12/14, fokus navy s prstencem; výška na tři řádky */
body#checkout #delivery_message,
body#checkout #gift_message {
  box-sizing: border-box;
  width: 100%;
  min-height: 92px;
  margin-top: 0 !important;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e2ea;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-base);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bso-text);
  resize: vertical;
  box-shadow: none;
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
body#checkout #delivery_message::placeholder,
body#checkout #gift_message::placeholder { color: var(--bso-muted-2); opacity: 1; }
body#checkout #delivery_message:focus,
body#checkout #gift_message:focus {
  outline: none;
  border-color: var(--bso-navy);
  box-shadow: 0 0 0 3px rgba(49, 39, 131, 0.12);
}

/* ── 12.9 Dokončení objednávky ─────────────────────────────────────────── */

/* modul centruje celý blok potvrzení; souhlas i tlačítko patří doleva */
body#checkout div#tc-payment-confirmation { text-align: left !important; }
/* nad 1000 px modul řádek souhlasu centruje (justify-content: center) */
body#checkout div#tc-payment-confirmation .terms-and-conditions { justify-content: flex-start !important; }
body#checkout #conditions-to-approve { margin: 0 0 14px 0; }
body#checkout #conditions-to-approve ul { display: block; margin: 0; padding: 0; list-style: none; }
body#checkout #conditions-to-approve > ul > li { display: flex; align-items: flex-start; gap: 9px; margin: 0 !important; }
body#checkout #conditions-to-approve .float-xs-left { float: none; }
body#checkout .condition-label {
  margin-top: 0 !important;
  /* modul dává .condition-label margin-left 5px, mezeru řeší gap na řádku */
  margin-left: 0 !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--bso-text);
}

/* Souhlasy z modulů (dm_heureka, dm_zbozi a další, co přibudou).
   Moduly je vkládají hookem `displayCheckoutBeforeConfirmation` a šablona
   pro PS 9 (`dm_consent_9.tpl`) je balí do vlastního <div class="dm_nazev">
   se dvěma skrytými inputy, .float-xs-left s checkboxem a .condition-label
   s textem. Modul thecheckout takový blok nad 1000 px centruje
   (`div#tc-payment-confirmation :is(.dm_zbozi, .dm_heureka, …)
   { justify-content: center }`), takže souhlas odskočil doprava zhruba do
   třetiny šířky. Srovnáváme ho na stejnou levou hranu, stejný řádek
   a stejnou mezeru jako souhlas s obchodními podmínkami pod ním. Selektor
   jde na prefix třídy `dm_`, aby platil i pro další moduly téhož dodavatele.
   Starší šablony (`dm_consent_17.tpl`) mají navíc <br> a obal <ul><li>,
   proto jsou ošetřené i ty. */
body#checkout div#tc-payment-confirmation > div[class^="dm_"] {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 10px 0;
  text-align: left;
}
/* Bootstrapí float na obalu checkboxu by ho vytáhl z flexu a mezera by
   zmizela; `!important` přebíjí `.float-xs-left { float: left !important }`
   z parent tématu. */
body#checkout div#tc-payment-confirmation > div[class^="dm_"] .float-xs-left {
  float: none !important;
  flex: 0 0 auto;
}
body#checkout div#tc-payment-confirmation > div[class^="dm_"] .condition-label {
  flex: 1 1 0;
  min-width: 0;
}
/* svislou mezeru drží margin bloku, ne <br> ze starší šablony modulu */
body#checkout div#tc-payment-confirmation > div[class^="dm_"] br { display: none; }
body#checkout div#tc-payment-confirmation > div[class^="dm_"] > div:has(ul) { flex: 1 1 100%; }
body#checkout div#tc-payment-confirmation > div[class^="dm_"] ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
body#checkout div#tc-payment-confirmation > div[class^="dm_"] ul > li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 !important;
  padding: 0;
}
/* starší šablona má další <li> jen se skrytými inputy (id_cart, base_uri);
   ty nesmí dělat prázdný řádek pod souhlasem */
body#checkout div#tc-payment-confirmation > div[class^="dm_"] ul > li:not(:has(.condition-label)) {
  display: none;
}
body#checkout .condition-label label { margin: 0; font-weight: 400; }
body#checkout .condition-label a {
  color: var(--bso-navy) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body#checkout .condition-label a:hover { color: var(--bso-red) !important; }
/* povinný souhlas s obchodními podmínkami nemá od modulu hvězdičku */
body#checkout #conditions-to-approve .condition-label label::after {
  content: " *";
  color: var(--bso-red);
  font-weight: 700;
}
/* Hlavní nákupní tlačítko: červené, stejné jako CTA na zbytku webu */
body#checkout #tc-payment-confirmation #confirm_order,
body#checkout .ps-shown-by-js button.btn.btn-primary.center-block {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 26px !important;
  background: var(--bso-red) !important;
  border: none !important;
  border-radius: var(--bso-radius-s) !important;
  font-family: var(--bso-condensed) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff !important;
  box-shadow: none;
  transition: background var(--bso-prechod), box-shadow var(--bso-prechod);
}
body#checkout #tc-payment-confirmation #confirm_order:hover,
body#checkout .ps-shown-by-js button.btn.btn-primary.center-block:hover {
  background: var(--bso-red-hover) !important;
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.28);
}
body#checkout #tc-payment-confirmation #confirm_order:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 2px; }
body#checkout .minimal-purchase-error-msg { font-size: 12.5px; }

/* ── 12.10 Responzivita ────────────────────────────────────────────────── */

/* Modul přesouvá bloky do #tc-container-mobile pod hranicí 991 px včetně
   (`tcMobileViewThreshold` ve views/js/front.js), takže od 991 dolů je
   pokladna jednosloupcová a boční odsazení bloků nemá smysl. */
@media (max-width: 991.98px) {
  body#checkout #tc-container-mobile > .checkout-block,
  body#checkout #tc-container-mobile #thecheckout-html-box-1,
  body#checkout #tc-container-mobile #thecheckout-newsletter,
  body#checkout #tc-container-mobile #thecheckout-psgdpr {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Modul přesouvá bloky do mobilního kontejneru v pořadí DOM, takže by
     souhrn košíku spadl až pod tlačítko Objednat. Kontejner je flex sloupec,
     stačí tedy posunout dva bloky přes `order`; ostatní zůstávají na 0 a drží
     své vzájemné pořadí z rozvržení (účet, adresy, doprava, platba,
     poznámka, souhlasy, potvrzení). */
  body#checkout #tc-container-mobile > #thecheckout-html-box-1 { order: -2; }
  body#checkout #tc-container-mobile > #thecheckout-cart-summary { order: -1; }

  /* lepení nemá na jednosloupcovém mobilu smysl */
  body#checkout #tc-container-mobile .checkout-block.sticky,
  body#checkout #thecheckout-cart-summary.sticky {
    position: static !important;
    top: auto !important;
  }
  body#checkout #thecheckout-cart-summary.sticky > .inner-area { max-height: none; }

  /* Souhrn nesmí sníst první obrazovku. Seznam položek se scrolluje uvnitř
     (dvě a půl položky), hlavička a celková částka zůstávají vidět; volba
     padla na scroll místo sbalovacího panelu, protože modul obsah bloku
     překresluje ajaxem (`cartSummaryBlockElement` ve front.js) a jakýkoli
     dopsaný přepínač by po překreslení zmizel. Zároveň je to stejné řešení
     jako v rozbalovacím košíku v hlavičce. */
  body#checkout #tc-container-mobile #thecheckout-cart-summary .cart-container {
    max-height: 176px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding-right: 4px !important;
  }
}

@media (max-width: 767.98px) {
  body#checkout #thecheckout-html-box-1 > .inner-area { font-size: 24px; }
  body#checkout .checkout-block.main-block > .inner-area,
  body#checkout #thecheckout-cart-summary > .inner-area,
  body#checkout #thecheckout-order-message > .inner-area,
  body#checkout #thecheckout-confirm > .inner-area { padding: 14px !important; }
  body#checkout .block-header,
  body#checkout .already-account-label { font-size: 17px !important; }
  body#checkout .checkout-options-buttons .btn { font-size: 14px; letter-spacing: 0.03em; }
  body#checkout #tc-payment-confirmation #confirm_order,
  body#checkout .ps-shown-by-js button.btn.btn-primary.center-block { max-width: none; height: 50px !important; font-size: 18px !important; }
  body#checkout.compact-cart #tc-container-mobile .product-line-image img { width: 54px !important; max-width: 54px !important; height: 54px; }
  body#checkout .additional-information { margin-left: 0 !important; }
}

/* ══ 13. STRÁNKA KOŠÍKU ═════════════════════════════════════════════════ */
/*
 * Mezikrok mezi výpisem a pokladnou (TC_separate_cart_summary = 1), vykresluje
 * ho nativní CartController se šablonami parenta Warehouse; thecheckout do
 * stránky nesahá. Košík a pokladna jsou dvě po sobě jdoucí obrazovky téhož
 * nákupu, takže si sekce 13 NEVYMÝŠLÍ vlastní hodnoty a přebírá je ze sekce 12:
 * karta 1px #e7e7ee / radius 10 / padding 16-18, linky uvnitř karty #f0f0f5,
 * typografie souhrnu (13,5px řádky, Condensed 16 uppercase u popisku celkem,
 * Condensed 24/800 u částky), červené CTA vysoké 52 px a lepení na
 * --bso-sticky-top.
 * Scope je všude `body#cart` (id nese <body>): stejné třídy (.cart-item,
 * .cart-summary-line, .product-line-*) používá i souhrn košíku v pokladně
 * a rozbalovací košík v hlavičce, nic se do nich nesmí propsat.
 */

/* ── 13.1 Rám stránky a nadpis ─────────────────────────────────────────── */

/* Titulek stránky ve stejném provedení jako titulek pokladny (sekce 12.1):
   Barlow Condensed 28/700 uppercase navy + červený šev. Warehouse mu dává
   22px, šedou #333 a spodní linku přes celou šířku, to se ruší. */
body#cart #main h1.page-title {
  margin: 0 0 6px 0;
  padding: 0;
  border: none;
  font-family: var(--bso-condensed);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
body#cart #main h1.page-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 90px 10px;
}
/* Podtitulek s počtem položek (child checkout/cart.tpl, $cart.summary_string) */
body#cart .bso-cart-count {
  margin: 0 0 20px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--bso-muted);
}

/* Mezera mezi sloupci 18 px, stejná jako mezi bloky pokladny (2× 9px padding
   v sekci 12.1). Bootstrap row má na této stránce --bs-gutter-x 22,5 px. */
body#cart .cart-grid { --bs-gutter-x: 18px; align-items: flex-start; }

/* ── 13.2 Karta se seznamem položek ────────────────────────────────────── */

body#cart .cart-container {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  box-shadow: none;
}
body#cart .cart-overview { margin: 0; }
body#cart ul.cart-items { margin: 0; padding: 0; list-style: none; }
body#cart .cart-item {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f5;
}
body#cart .cart-item:first-child { padding-top: 0; }
body#cart .cart-item:last-child { padding-bottom: 0; border-bottom: none; }

/* ── 13.3 Řádek položky ────────────────────────────────────────────────── */

/* Rozvržení řádku. Warehouse dělí řádek na dvě půlky bootstrapí mřížky
   (col-md-6 popis / col-md-6 akce). Na užším desktopu (1024) se do pravé
   půlky nevejde jednotková cena, měnič, řádková cena a koš najednou a koš
   spadne pod cenu. Blok akcí proto dostane přesně tolik místa, kolik
   potřebuje, a popis si bere zbytek: nikdy se nezalomí, jen se zkrátí
   sloupec s názvem. */
body#cart .cart-item .product-line-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  margin-left: 0;
  margin-right: 0;
}
body#cart .cart-item .product-line-grid-body {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
}
body#cart .cart-item .product-line-grid-right {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}
body#cart .cart-item .product-line-grid-body > .row,
body#cart .cart-item .product-line-grid-right > .row {
  flex-wrap: nowrap;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
}
body#cart .cart-item .product-line-grid-right > .row > [class*="col"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-left: 7px;
  padding-right: 7px;
}
body#cart .cart-item .product-line-grid-right > .row > [class*="col"]:last-child { padding-right: 0; }

/* Sloupce akcí mají pevnou šířku. Bez ní si každý řádek bere šířku podle délky
   částky a levé hrany měniče množství se v svislém sloupci rozjedou (naměřeno
   15 px rozdílu mezi řádkem s cenou 3 400 Kč a řádkem s 690 Kč), což oko
   okamžitě vidí jako roztřesený sloupec. Šířky (včetně 2× 7px odsazení sloupce)
   vycházejí z nejširšího obsahu, který se ve sloupci může objevit:
     jednotková cena 132 = přeškrtnutá cena 13px (71) + mezera (6) + odznak
       slevy (40) + odsazení, tedy i zlevněná položka se vejde na jeden řádek,
     měnič množství 118 = stepper 104 (sekce 13.4) + odsazení,
     řádková cena 118 = šestimístná částka v Condensed 20 (104) + odsazení,
     koš 39 = plaketa 32 + levé odsazení, vpravo sloupec odsazení nemá.
   Ceny zůstávají zarovnané doprava, s délkou částky se hýbe jen text. */
body#cart .cart-item .product-line-grid-right > .row > .unit-price { flex: 0 0 132px; width: 132px; }
body#cart .cart-item .product-line-grid-right > .row > .qty { flex: 0 0 118px; width: 118px; }
body#cart .cart-item .product-line-grid-right > .row > .price { flex: 0 0 118px; width: 118px; text-align: right; }
body#cart .cart-item .product-line-grid-right > .row > [class*="col"]:last-child { flex: 0 0 39px; width: 39px; }

/* Náhled: stejná dlaždice jako v souhrnu pokladny (bílá, rámeček, radius 8,
   contain), jen větší, protože tady je řádek hlavním obsahem stránky.
   Placeholder bez fotky (sekce 11) sem nedosáhne, šablonu řádku parenta
   nepřepisujeme; výchozí obrázek PrestaShopu se do dlaždice vejde stejně. */
body#cart .cart-item .product-image { flex: 0 0 88px; max-width: 88px; padding: 0; }
body#cart .cart-item .product-image a { display: block; }
body#cart .cart-item .product-image img {
  box-sizing: border-box;
  width: 88px;
  max-width: 88px;
  height: 88px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 8px;
  object-fit: contain;
}
body#cart .cart-item .product-line-grid-body .col.col-9 {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  padding-left: 14px;
  padding-right: 0;
}
body#cart .cart-item .product-line-info a.label {
  font-family: var(--bso-base);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bso-navy-dark);
  transition: color var(--bso-prechod);
}
body#cart .cart-item .product-line-info a.label:hover { color: var(--bso-red); }
/* varianta (velikost, barva, ruka) a další doplňkové údaje řádku */
body#cart .cart-item .product-line-info-secondary {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--bso-muted-2) !important;
}
body#cart .cart-item .product-line-info-secondary .label { font-weight: 400; }
body#cart .cart-item .product-line-info-secondary .value { font-weight: 600; color: var(--bso-muted); }

/* Jednotková cena je sekundární údaj, dominuje až cena za řádek */
body#cart .product-line-actions .unit-price .value {
  font-size: 14px;
  font-weight: 500;
  color: var(--bso-muted);
  white-space: nowrap;
}
body#cart .product-line-actions .unit-price-cart { font-size: 12px; color: var(--bso-muted-2); }
/* Sleva mluví stejným jazykem jako karta produktu ve výpisu (sekce 4/8):
   přeškrtnutá původní cena 13 px --bso-muted-2, žlutý odznak se slevou
   (.product-flag.discount) a aktuální cena červeně. */
body#cart .product-line-actions .unit-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
body#cart .product-line-actions .product-discount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 6px;
  white-space: nowrap;
}
body#cart .product-line-actions .product-discount .regular-price {
  font-size: 13px;
  color: var(--bso-muted-2);
  text-decoration: line-through;
}
body#cart .product-line-actions .product-discount .discount {
  display: inline-block;
  margin: 0 !important;
  padding: 1px 6px;
  background: var(--bso-zluta);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
body#cart .product-line-actions .unit-price:has(.product-discount) .value { color: var(--bso-red); font-weight: 600; }
body#cart .product-line-actions .price .product-price strong,
body#cart .product-line-actions .price .product-price {
  font-family: var(--bso-condensed);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bso-navy-dark);
  white-space: nowrap;
}
body#cart .product-line-actions .price .gift {
  font-family: var(--bso-base);
  font-size: 13px;
  color: var(--bso-zelena);
}

/* Odstranění položky: stejná plaketa jako v rozbalovacím košíku (bso-mc-remove),
   jen o dva pixely větší, ať se na ni dobře míří i na dotyku. */
body#cart .cart-line-product-actions { display: flex; justify-content: flex-end; align-items: center; }
body#cart .cart-line-product-actions .remove-from-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bso-radius-s);
  font-size: 15px;
  color: #9a97b5 !important;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
body#cart .cart-item:hover .remove-from-cart,
body#cart .cart-line-product-actions .remove-from-cart:hover { background: #fdeaec; color: var(--bso-red) !important; }
body#cart .cart-line-product-actions .remove-from-cart:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 1px; }

/* ── 13.4 Měnič množství ───────────────────────────────────────────────── */

/* Stejný stepper jako na detailu produktu (sekce 9): jeden box s rámečkem
   #e2e2ea a radiusem 6, uvnitř [−][počet][+] a znaménka jako SVG pozadí.
   Warehouse tu nechává touchspin ve svislé variantě (šipky nad sebou vpravo);
   `display: contents` na obalu tlačítek je pustí do stejného flexu jako input
   a `order` je rozdělí na obě strany. */
body#cart .product-line-actions .bootstrap-touchspin {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  box-sizing: border-box;
  /* Warehouse tu má max-width 75px, min-height 40px a margin: 0 auto */
  width: 104px;
  max-width: none;
  min-height: 0;
  height: 40px;
  margin: 0;
  background: #fff;
  border: 1px solid #e2e2ea;
  border-radius: var(--bso-radius-s);
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
body#cart .product-line-actions .bootstrap-touchspin:focus-within {
  border-color: var(--bso-navy);
  box-shadow: 0 0 0 3px rgba(49, 39, 131, 0.12);
}
body#cart .product-line-actions .bootstrap-touchspin .input-group-addon { display: none; }
body#cart .product-line-actions .bootstrap-touchspin .input-group-btn-vertical { display: contents; }
body#cart .product-line-actions .bootstrap-touchspin .btn-touchspin {
  flex: 0 0 34px;
  width: 34px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1.5 5.5h8' fill='none' stroke='%236b6b78' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--bso-prechod);
}
body#cart .product-line-actions .bootstrap-touchspin .btn-touchspin i { display: none; }
/* Na hoveru se mění jen barva podkladu, znaménko zůstává plně čitelné
   a tlačítko si drží rozměr, aby měnič nepodskakoval. Zkratka `background`
   by přepsala i background-image a znaménko by zmizelo. */
body#cart .product-line-actions .bootstrap-touchspin .btn-touchspin:hover,
body#cart .product-line-actions .bootstrap-touchspin .btn-touchspin:active {
  background-color: #f4f3fb;
}
body#cart .product-line-actions .bootstrap-touchspin .bootstrap-touchspin-down { order: -1; }
body#cart .product-line-actions .bootstrap-touchspin .bootstrap-touchspin-up {
  order: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1.5 5.5h8M5.5 1.5v8' fill='none' stroke='%236b6b78' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
body#cart input.js-cart-line-product-quantity {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-text);
  -moz-appearance: textfield;
}
body#cart input.js-cart-line-product-quantity:focus { outline: none; border: none; box-shadow: none; }
body#cart input.js-cart-line-product-quantity::-webkit-outer-spin-button,
body#cart input.js-cart-line-product-quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* dárek nemá měnič, jen pevný počet ve stejném boxu */
body#cart .product-line-actions .gift-quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 104px;
  height: 40px;
  background: #f4f3fb;
  border-radius: var(--bso-radius-s);
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-muted);
}

/* ── 13.5 Souhrn objednávky ────────────────────────────────────────────── */

body#cart .cart-grid-right .card.cart-summary {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  box-shadow: none;
}
body#cart .cart-summary .card-body,
body#cart .cart-summary .card-block { padding: 0; }
/* Warehouse odděluje bloky souhrnu značkami <hr> přes celou šířku karty;
   linky kreslí border-top na blocích, aby seděly do rytmu sekce 12. */
body#cart .cart-summary hr { display: none; }
body#cart .cart-summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #55555f;
}
/* .cart-summary-line nese od Warehouse clearfix ::after, ve flexu by byl
   třetí položkou a odtlačil hodnotu od pravého okraje */
body#cart .cart-summary-line::after { display: none; }
body#cart .cart-summary-line .value {
  margin-left: auto;
  text-align: right;
  font-weight: 600;
  color: var(--bso-text);
  white-space: nowrap;
}
body#cart .cart-summary-line.free .value { color: var(--bso-zelena); }
/* uplatněná sleva je jediná záporná částka v souhrnu, drží zelenou jako
   doprava zdarma, ať je hned vidět, co z ceny ubylo */
body#cart #cart-subtotal-discount .value { color: var(--bso-zelena); }
body#cart .cart-detailed-subtotals .cart-summary-line:last-child { margin-bottom: 0; }

/* Blok součtů. Rozpad cen je řádek po řádku shodný se souhrnem v pokladně
   (sekce 12.7): shop je B2C s cenami s DPH, takže „Celkem (bez DPH)" a
   „vč. DPH (21 %)" jsou sekundární a dominuje až CELKEM (S DPH). Tvar rozpisu
   drží child checkout/_partials/cart-summary-totals.tpl, tady jen typografie
   a rytmus; hodnoty jsou převzaté ze sekce 12.7, nic se tu nevymýšlí.
   Oddělovací čára patří nad celý blok součtů, druhá pak nad celkovou částku. */
/* selektor musí přebít pravidlo `.cart-summary .card-body { padding: 0 }` o kus
   výš, blok součtů je zároveň .card-body */
body#cart .cart-summary .cart-summary-totals {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f5;
}
body#cart .cart-summary-line.cart-total-tax-excluded,
body#cart .cart-summary-line.cart-total-tax {
  margin-bottom: 3px;
  font-size: 12.5px;
  color: var(--bso-muted);
}
body#cart .cart-total-tax-excluded .value,
body#cart .cart-total-tax .value {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--bso-muted);
}
body#cart .cart-summary-line.cart-total {
  margin: 6px 0 0 0;
  padding-top: 11px;
  border-top: 1px solid #f0f0f5;
}
body#cart .cart-summary-line.cart-total .label {
  font-family: var(--bso-condensed);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
body#cart .cart-summary-line.cart-total .value {
  font-family: var(--bso-condensed);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--bso-navy-dark);
}
body#cart .cart-summary-totals .cart-summary-line:last-child { margin-bottom: 0; }

/* Tlačítko do pokladny: stejné provedení jako Objednat v pokladně (12.9) */
body#cart .cart-detailed-actions { margin-top: 16px; padding: 0; }
body#cart .cart-detailed-actions .text-xs-center { text-align: left; }
body#cart .cart-detailed-actions .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 20px;
  background: var(--bso-red);
  border: none;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-condensed);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: none;
  transition: background var(--bso-prechod), box-shadow var(--bso-prechod);
}
body#cart .cart-detailed-actions .btn-primary:hover {
  background: var(--bso-red-hover);
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.28);
}
body#cart .cart-detailed-actions .btn-primary:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 2px; }
/* nedosažená minimální hodnota objednávky nebo prázdný košík */
body#cart .cart-detailed-actions .btn-primary.disabled,
body#cart .cart-detailed-actions .btn-primary:disabled {
  background: #cfcfdd;
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── 13.6 Slevový kód ──────────────────────────────────────────────────── */

/* Blok se vykreslí jen když je v shopu aktivní funkce slevových pravidel
   (PS_CART_RULE_FEATURE_ACTIVE). Pole i tlačítko mají stejné rozměry jako
   slevový kód v pokladně (sekce 12.7): 42 px, radius 6, navy tlačítko. */
body#cart .block-promo {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f5;
}
body#cart .block-promo .cart-voucher-area { padding: 0; background: transparent; }
body#cart .block-promo .promo-code { padding: 0; background: transparent; }
body#cart .block-promo .promo-code .input-group { display: flex; align-items: stretch; gap: 8px; flex-wrap: nowrap; }
/* ikona visačky je jen dekorace a v našem provedení pole překáží */
body#cart .block-promo .voucher-icon { display: none; }
body#cart .block-promo .promo-code input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 42px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e2e2ea;
  border-radius: var(--bso-radius-s);
  font-size: 14px;
  color: var(--bso-text);
  box-shadow: none;
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
body#cart .block-promo .promo-code input.form-control::placeholder { color: var(--bso-muted-2); opacity: 1; }
body#cart .block-promo .promo-code input.form-control:focus {
  outline: none;
  border-color: var(--bso-navy);
  box-shadow: 0 0 0 3px rgba(49, 39, 131, 0.12);
}
body#cart .block-promo .input-group-append { flex: 0 0 auto; }
body#cart .block-promo .input-group-append .btn {
  box-sizing: border-box;
  height: 42px;
  margin: 0;
  padding: 0 20px;
  background: var(--bso-navy);
  border: none;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  transition: background var(--bso-prechod);
}
body#cart .block-promo .input-group-append .btn:hover { background: var(--bso-red); }
/* uplatněné slevy nad polem */
body#cart .block-promo .promo-name { margin: 0 0 10px 0; padding: 0; list-style: none; }
body#cart .block-promo .promo-name li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px 0;
  font-size: 13.5px;
  color: var(--bso-text);
}
body#cart .block-promo .promo-name li .label { flex: 1 1 auto; font-weight: 600; }
/* automatické pravidlo (doprava zdarma) nemá odkaz na odebrání; bez odsazení
   by jeho popisek začínal jinde než popisky ručně zadaných kupónů */
body#cart .block-promo .promo-name li:not(:has(a)) { padding-left: 24px; }
body#cart .block-promo .promo-name li .pull-right { margin-left: auto; font-weight: 600; color: var(--bso-zelena); }
body#cart .block-promo .promo-name li a { color: #9a97b5; transition: color var(--bso-prechod); }
body#cart .block-promo .promo-name li a:hover { color: var(--bso-red); }
/* nabídka aktivních slev pod polem */
body#cart .block-promo .promo-highlighted { margin: 12px 0 6px 0; font-size: 12.5px; color: var(--bso-muted) !important; }
body#cart .block-promo .promo-discounts { margin: 0; padding: 0; list-style: none; }
body#cart .block-promo .promo-discounts li { margin-bottom: 4px; font-size: 12.5px; color: var(--bso-muted); }
body#cart .block-promo .promo-discounts .code { font-weight: 700; color: var(--bso-navy); }

/* ── 13.7 Pokračovat v nákupu ──────────────────────────────────────────── */

/* Warehouse z odkazu dělá šedé tlačítko; na naší stránce je to zpáteční
   odkaz, ne akce, takže má stejné provedení jako textové odkazy v pokladně. */
body#cart .cart-grid-body > a.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  margin: 18px 0 0 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy);
  box-shadow: none;
  transition: color var(--bso-prechod);
}
body#cart .cart-grid-body > a.btn-secondary:hover { background: transparent; color: var(--bso-red); }
body#cart .cart-grid-body > a.btn-secondary .fa { font-size: 15px; }

/* ── 13.8 Lepivý souhrn ────────────────────────────────────────────────── */

/* Stejné lepení i stejný offset jako u souhrnu v pokladně (sekce 12.7):
   sdílená proměnná --bso-sticky-top (sekce 1). `align-self: flex-start` je
   nutné, .cart-grid je bootstrapí .row (display: flex) a natažený sloupec
   by neměl kam lepit. */
body#cart .cart-grid-right {
  position: sticky;
  top: var(--bso-sticky-top);
  align-self: flex-start;
}

/* ── 13.9 Hlášky ───────────────────────────────────────────────────────── */

body#cart #main .alert {
  box-sizing: border-box;
  margin: 0 0 12px 0;
  padding: 11px 14px;
  border: 1px solid;
  border-radius: var(--bso-radius-s);
  font-size: 13px;
  line-height: 1.45;
}
body#cart #main .alert-warning { background: #fff8e8; border-color: #f0dcae; color: #7a5b00; }
body#cart #main .alert-danger { background: #fdeaec; border-color: #f3c2c6; color: var(--bso-red-hover); }
body#cart #main .alert-success { background: #eefaf2; border-color: #b9e6cb; color: #146b3a; }
body#cart .cart-overview .alert:last-child { margin-bottom: 0; }

/* ── 13.10 Prázdný košík ───────────────────────────────────────────────── */

/* Vlastní stav místo holé věty, v provedení prázdného rozbalovacího košíku
   (sekce bso-mc-), jen v měřítku celé stránky: míček 96 px na #f4f3fb
   s tlumenými švy, nadpis Condensed, věta a navy tlačítko zpět do nabídky.
   Markup: child checkout/cart-empty.tpl. */
body#cart .bso-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 54px 24px 58px 24px;
  text-align: center;
}
body#cart .bso-cart-empty-ball {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  background: #f4f3fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 5 C4.8 9 4.8 15 2.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.35' stroke-width='1.4' stroke-dasharray='1.6 2'/%3E%3Cpath d='M21.5 5 C19.2 9 19.2 15 21.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.35' stroke-width='1.4' stroke-dasharray='1.6 2'/%3E%3C/svg%3E") no-repeat center / 94px 94px;
  border: 1px solid var(--bso-border);
  border-radius: 50%;
  color: #9a97b5;
}
body#cart .bso-cart-empty-title {
  margin: 0;
  font-family: var(--bso-condensed);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
body#cart .bso-cart-empty-sub {
  max-width: 420px;
  margin: -6px 0 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #55555f;
}
body#cart .bso-cart-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 4px; }
body#cart .bso-cart-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
body#cart .bso-cart-empty-link:hover { color: var(--bso-red) !important; border-bottom-color: var(--bso-red); }
/* prázdná stránka nemá pravý sloupec (child cart-empty.tpl ho nevykresluje),
   karta se seznamem tedy drží celou šířku mřížky */
body#cart.cart-empty .cart-grid-body { flex: 0 0 100%; max-width: 100%; }

/* ── 13.11 Responzivita ────────────────────────────────────────────────── */

/* Sloupce mřížky se rozpadají na col-lg, tedy pod 992 px. Souhrn má pak být
   hned pod položkami a zpáteční odkaz až úplně dole; odkaz je ale v DOM uvnitř
   levého sloupce, proto `display: contents` pustí obsah levého sloupce přímo
   do mřížky a `order` obě části prohodí. */
@media (max-width: 991.98px) {
  body#cart .cart-grid { --bs-gutter-x: 0px; }
  body#cart .cart-grid-body { display: contents; }
  body#cart .cart-container { flex: 0 0 100%; max-width: 100%; order: 1; }
  body#cart .cart-grid-right {
    flex: 0 0 100%;
    max-width: 100%;
    order: 2;
    margin-top: 16px;
    position: static;
    top: auto;
  }
  body#cart .cart-grid-body > a.btn-secondary { order: 3; align-self: flex-start; margin-top: 16px; }
}

@media (max-width: 767.98px) {
  body#cart #main h1.page-title { font-size: 24px; }
  body#cart .cart-container,
  body#cart .cart-grid-right .card.cart-summary { padding: 14px; }
  /* řádek se zalomí na dva pásy (popis / akce), náhled se zmenší */
  /* na mobilu se řádek rozpadne na dva pásy: popis nahoře, akce pod ním */
  body#cart .cart-item .product-line-grid { flex-wrap: wrap; gap: 0; }
  body#cart .cart-item .product-line-grid-body { flex: 0 0 100%; }
  body#cart .cart-item .product-line-grid-right { flex: 0 0 100%; margin-top: 10px; }
  body#cart .cart-item .product-line-grid-right > .row { justify-content: flex-end; }
  /* Pás akcí má na mobilu k dispozici jen šířku karty, pevné šířky sloupců
     ze sekce 13.3 (dohromady 407 px) by se do 390 px nevešly. Měnič, řádková
     cena i koš zůstávají pevné, aby jejich hrany držely společnou osu;
     jednotková cena si bere zbytek pásu a je dál zarovnaná doprava. */
  body#cart .cart-item .product-line-grid-right > .row > .unit-price { flex: 1 1 auto; width: auto; min-width: 0; }
  body#cart .cart-item .product-line-grid-right > .row > .price { flex: 0 0 100px; width: 100px; }
  body#cart .cart-item .product-image { flex: 0 0 68px; max-width: 68px; }
  body#cart .cart-item .product-image img { width: 68px; max-width: 68px; height: 68px; }
  body#cart .cart-item .product-line-grid-body .col.col-9 { padding-left: 12px; }
  body#cart .cart-item .product-line-info a.label { font-size: 14px; }
  body#cart .product-line-actions .price .product-price strong { font-size: 18px; }
  body#cart .cart-detailed-actions .btn-primary { height: 50px; font-size: 18px; }
  body#cart .bso-cart-empty { padding: 38px 16px 42px 16px; }
  body#cart .bso-cart-empty-ball { width: 78px; height: 78px; background-size: 76px 76px; }
  body#cart .bso-cart-empty-title { font-size: 22px; }
  body#cart .bso-cart-empty-sub { font-size: 13.5px; }
}

/* ══ 14. HORNÍ LIŠTA ════════════════════════════════════════════════════ */

/* Jeden ovladač vpravo v liště (modul ff_geoswitcher): země · jazyk · měna.
   Nahrazuje původní trojici (mrtvý text "Doprava", jazyk, měna), protože
   modul ets_geolocation si volby stejně řetězí: volba země přednastaví jazyk
   i měnu. Panel drží stejné provedení jako ostatní rozbalovací panely shopu
   (selecty filtrů, řadicí lišta, mini košík). */

/* ── Spouštěč ── */
.bso-geo .bso-geo-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--bso-radius-s);
  color: var(--bso-text);
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
.bso-geo .bso-geo-trigger:hover,
.bso-geo .bso-geo-trigger[aria-expanded="true"] {
  background: #e9e9f1;
  color: var(--bso-navy-dark);
}
.bso-geo-label { display: inline-flex; align-items: center; }
/* oddělovač mezi částmi popisku, aby v HTML nebyl textový znak navíc */
.bso-geo-part + .bso-geo-part::before {
  content: "·";
  margin: 0 5px;
  color: var(--bso-muted-2);
}
.bso-geo .fa-angle-down { transition: transform var(--bso-prechod); }
.bso-geo .bso-geo-trigger[aria-expanded="true"] .fa-angle-down { transform: rotate(180deg); }

/* vlajka země: SVG (flag-icons), poměr 4:3. Pevná šířka i výška, ať seznam
   nepřeskakuje během načítání. Rámeček je vnější prstenec, ne inset: inset
   stín u <img> překreslí sama fotka a u bílých vlajek (Polsko) by rámeček
   zmizel a vlajka by splynula s bílým panelem. */
.bso-geo-vlajka {
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(22, 18, 63, 0.16);
}
/* Ve spouštěči je text menší než v panelu (horní lišta jede na 12,5 px), tak
   je menší i vlajka; 16x12 sedí výškou na verzálky popisku a nepřebíjí ho.
   Poměr 4:3 je u obou velikostí celočíselný, takže se okraje nerozmazávají. */
.bso-geo-trigger .bso-geo-vlajka { width: 16px; height: 12px; }

/* ikona bez vlajky (jazyk, měna, chybějící soubor): destička s ISO kódem. Typografická, takže ostrá při jakémkoli
   DPI, a nová země nepotřebuje dokreslit obrázek. Rastrové vlajky (16x11 JPEG
   v PrestaShopu i v ets_geolocation) se na retině rozpadají, nepoužíváme je. */
.bso-geo-kod {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: #f4f3fb;
  color: var(--bso-navy-dark);
  font-family: var(--bso-condensed);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}

/* ── Panel ── */
#header .header-nav .bso-geo .bso-geo-panel {
  width: max-content;
  max-width: min(460px, calc(100vw - 24px));
  padding: 14px 16px !important;
  background: #fff;
  border: 1px solid var(--bso-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(22, 18, 63, 0.16) !important;
  margin-top: 6px;
  font-family: var(--bso-base);
  color: var(--bso-text);
  text-align: left;
}
.bso-geo-cols { display: flex; gap: 22px; align-items: flex-start; }
.bso-geo-zeme { flex: 0 0 208px; }
.bso-geo-sloupec { flex: 0 0 178px; display: flex; flex-direction: column; gap: 14px; }
.bso-geo-sekce { min-width: 0; }

/* nadpis sekce: drobný, ať nekřičí */
.bso-geo-h {
  margin: 0 0 6px 0;
  font-family: var(--bso-condensed);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bso-muted);
}
.bso-geo-list { list-style: none; margin: 0; padding: 0; }
/* seznamy s vlastním posuvníkem (vzor: mini košík); výšky jsou zvolené tak,
   aby oba sloupce panelu končily zhruba na stejné lince */
.bso-geo-zeme .bso-geo-list,
.bso-geo-jazyk .bso-geo-list {
  overflow-y: auto;
  padding-right: 2px;
}
.bso-geo-zeme .bso-geo-list { max-height: 244px; }
.bso-geo-jazyk .bso-geo-list { max-height: 156px; }
.bso-geo-list::-webkit-scrollbar { width: 4px; }
.bso-geo-list::-webkit-scrollbar-track { background: transparent; }
.bso-geo-list::-webkit-scrollbar-thumb { background-color: #d6d6e0; border-radius: 2px; }

/* ── Položky ── */
#header .header-nav .bso-geo .bso-geo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 14px;
  line-height: 1.3;
  color: var(--bso-text);
  text-align: left;
  cursor: pointer;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
#header .header-nav .bso-geo .bso-geo-item:hover { background: #f4f3fb; }
/* destička na hoveru nesmí splynout s podkladem položky (obojí #f4f3fb) */
#header .header-nav .bso-geo .bso-geo-item:hover .bso-geo-kod { background: #e5e2f5; }
#header .header-nav .bso-geo .bso-geo-item.current {
  color: var(--bso-navy);
  font-weight: 700;
}
#header .header-nav .bso-geo .bso-geo-item.current .bso-geo-kod {
  background: var(--bso-navy);
  color: #fff;
}
.bso-geo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* aktivní volba musí být poznat i bez barvy: míčková odrážka vpravo */
.bso-geo-item.current::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffffff' stroke='%23d6d4d4' stroke-width='1.5'/%3E%3Cpath d='M6.5 4.5 C10 8.5 10 15.5 6.5 19.5 M17.5 4.5 C14 8.5 14 15.5 17.5 19.5' fill='none' stroke='%23e30613' stroke-width='1.6' stroke-dasharray='2 2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* měny: krátký výčet, pilulky vedle sebe */
.bso-geo-list-pilulky { display: flex; flex-wrap: wrap; gap: 6px; }
#header .header-nav .bso-geo .bso-geo-pilulka {
  width: auto;
  padding: 5px 12px;
  border: 1px solid #e2e2ea;
}
#header .header-nav .bso-geo .bso-geo-pilulka.current {
  border-color: var(--bso-navy);
  background: #f4f3fb;
}
.bso-geo-pilulka.current::after { display: none; }

.bso-geo-pozn {
  margin: 12px 0 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--bso-border);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--bso-muted-2);
}

/* přepínání země běží přes AJAX: po kliknutí panel zešedne, ať se neklikne dvakrát */
.bso-geo.bso-geo-loading .bso-geo-panel { opacity: 0.55; pointer-events: none; }

/* ── Tablet: panel zůstává jako na desktopu, jen se drží uvnitř okna ── */
@media (max-width: 991.98px) {
  #header .header-nav .bso-geo .bso-geo-panel { max-width: calc(100vw - 20px); }
}

/* ── Telefon: panel přes celou šířku pod lištou (stejně jako mini košík) ── */
@media (max-width: 575.98px) {
  #header .header-nav .bso-geo { position: static; }
  #header .header-nav .bso-geo .bso-geo-panel {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 12px 14px !important;
  }
  /* dva sloupce zůstávají i na telefonu: pod sebou by panel sahal přes půl
     obrazovky (naměřeno 545 px na 390px šířce), vedle sebe vyjde na ~294 px */
  .bso-geo-cols { gap: 14px; }
  .bso-geo-zeme, .bso-geo-sloupec { flex: 1 1 0; }
  #header .header-nav .bso-geo .bso-geo-item { gap: 6px; padding: 6px; font-size: 13.5px; }
  .bso-geo-zeme .bso-geo-list { max-height: 200px; }
  .bso-geo-jazyk .bso-geo-list { max-height: 138px; }
  /* v úzké liště stačí země a měna, jazyk je vidět po rozbalení */
  .bso-geo-label .bso-geo-part:nth-child(2) { display: none; }
}

/* ══ 15. ÚČET, PŘIHLÁŠENÍ, REGISTRACE ═══════════════════════════════════ */
/*
 * Přihlášení, registrace, obnova hesla a celý zákaznický účet. Do childu se
 * k těmto stránkám dosud nesáhlo, běžely ve výchozím vzhledu Warehouse.
 *
 * Sekce si NEVYMÝŠLÍ vlastní hodnoty a přebírá je z pokladny (sekce 12)
 * a z košíku (sekce 13), protože účet je s nákupem jedna cesta:
 *   pole        44 px, radius 6, rámeček #e2e2ea, fokus 2 px navy
 *               s prstencem rgba(49,39,131,.12)     … sekce 12.3
 *   karta       bílá, 1px #e7e7ee, radius 10, vnitřní linky #f0f0f5 … 12.1 a 13.2
 *   hlášky      .alert 11/14, radius 6, 13 px       … sekce 13.9
 *   prázdný stav míček na #f4f3fb, nadpis Condensed, věta, cesta zpět … 13.10
 *   titulek     Barlow Condensed 28/700 uppercase navy + červený šev … 12.1 a 13.1
 * Odlišné jsou jen dvě věci a obě záměrně: primární tlačítko účtu je vysoké
 * 48 px (nákupní CTA v košíku a pokladně má 52 px a musí zůstat nejsilnější
 * prvek cesty) a prázdné stavy jsou o něco menší, protože stojí uvnitř
 * obsahového sloupce účtu, ne přes celou stránku.
 *
 * Scope: každé pravidlo drží id <body> konkrétní stránky, protože všechny
 * použité třídy (.form-control, .form-group.row, .alert, .custom-checkbox,
 * .table) jsou sdílené s pokladnou, košíkem, filtry i CMS stránkami.
 * Skupina všech stránek účtu se píše přes :is(...) — jeho specificita se
 * rovná nejsilnějšímu argumentu, a ty jsou tu všechny stejné (id + typ),
 * takže je chování předvídatelné.
 *
 * Markup: child šablony themes/baseball-shop/templates/customer/*.tpl
 * (hlavičkový komentář každé z nich říká, čím se liší od parenta).
 */

/* ── 15.1 Rám stránky a titulek ────────────────────────────────────────── */

/* Titulek stránky ve stejném provedení jako titulek košíku (sekce 13.1)
   a pokladny (12.1). Warehouse mu dává 22 px, šedou #333 a spodní linku. */
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip, body#guest-tracking) #main h1.page-title {
  margin: 0 0 18px 0;
  padding: 0;
  border: none;
  font-family: var(--bso-condensed);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip, body#guest-tracking) #main h1.page-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 90px 10px;
}

/* Stránky bez boční navigace (přihlášení, registrace, obnova hesla,
   sledování objednávky) se zužují na úrovni #main, ne až uvnitř obsahu:
   titulek pak lícuje s levou hranou karty. Formulář přes celou šířku stránky
   je u dvou polí nečitelný a láme konverzi. */
body#authentication #main,
body#password #main,
body#guest-tracking #main { max-width: 520px; margin: 0 auto; }
body#registration #main { max-width: 640px; margin: 0 auto; }
.bso-ucet-uzky { width: 100%; }

/* Rozvržení podstránek účtu: navigace vlevo, obsah vpravo. Mezera 18 px je
   stejná jako mezi sloupci košíku (sekce 13.1) a bloky pokladny.
   `min-width: 0` je nutné, jinak široká tabulka historie roztáhne flex
   položku a navigace spadne pod obsah. */
.bso-ucet-layout { display: flex; align-items: flex-start; gap: 18px; }
.bso-ucet-obsah { flex: 1 1 auto; min-width: 0; }
/* Warehouse dává #content.page-content rámeček rgba(160,160,160,.25) a padding
   15 px, takže kolem karet vznikal druhý, slabší rám. Na stránkách účtu je
   #content jen obal, rám nesou samy karty. */
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip) #content.page-content {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Úvodní věta stránky (perex) a věta pod titulkem rozcestníku */
.bso-ucet-lead,
.bso-ucet-uvod {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bso-muted);
}
.bso-ucet-uvod { margin-top: -4px; }

/* Bílá karta kolem formuláře, shodná s kartou košíku (sekce 13.2) */
.bso-ucet-karta-formular {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}

/* ── 15.2 Formulářová pole ─────────────────────────────────────────────── */

/*
 * Warehouse staví každé pole jako bootstrapí .row: popisek col-md-2,
 * pole col-md-8, poznámka („Volitelné“) col-md-2. Na úzké kartě to nedává
 * smysl, popisek patří nad pole. Řádek proto zůstává flexem, ale zalamuje se
 * a pořadím se skládá takto:
 *     [ popisek ............... Volitelné ]
 *     [ pole na celou šířku řádku         ]
 * Poznámka „Volitelné“ tak neubírá svislý prostor a drží se u popisku.
 */
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 16px 0;
}
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group.row > label {
  order: 1;
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 0 6px 0;
  font-family: var(--bso-base);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--bso-navy-dark);
}
/* Řádky se souhlasem mají levý popisek prázdný (text nese až popisek
   u zaškrtávátka), Warehouse mu přesto dává třídu required, takže by nad
   souhlasem visela osamocená hvězdička. Popisek se proto celý skryje
   a hvězdička se přenese k textu souhlasu.
   `:empty` na to nestačí: popisek obsahuje bílé znaky, a tak prázdný není. */
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group.row:has(.custom-checkbox) > label { display: none; }
:is(body#registration, body#identity, body#address) .form-group.row:has(> label.required) .custom-checkbox > label::after {
  content: " *";
  color: var(--bso-red);
  font-weight: 700;
}
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group.row > .form-control-comment {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-left: auto;
  padding: 0 0 6px 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--bso-muted-2);
}
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group.row > .js-input-column,
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group.row > label + div:not(.form-control-comment) {
  order: 3;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
/* nápověda pod polem (např. povolené znaky u jména) */
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) .js-input-column > span.form-control-comment,
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) .js-input-column > .form-control-comment {
  display: block;
  margin-top: 5px;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--bso-muted-2);
}
/* hvězdička u povinných polí; Warehouse žádnou nekreslí */
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) label.required::after,
.bso-ucet-form label.required::after {
  content: " *";
  color: var(--bso-red);
  font-weight: 700;
}

/* Vzhled pole: shodný s pokladnou (sekce 12.3) */
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) .form-control:not(textarea):not(select),
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) select.form-control {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background-color: #fff;
  border: 1px solid #e2e2ea;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-base);
  font-size: 14px;
  line-height: 42px;
  color: var(--bso-text);
  box-shadow: none;
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
/* Warehouse barví vyplněná pole světle modrým autofill pozadím prohlížeče;
   sjednoceno na bílou, aby pole nevypadala jako zvýrazněná */
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) .form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--bso-text);
}
/* Select: vlastní jednoduchá šipka dolů místo systémové dvojité (12.3) */
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) select.form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.8 6 6.2l4.5-4.4' fill='none' stroke='%236b6b78' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) textarea.form-control {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e2ea;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-base);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bso-text);
}
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) .form-control::placeholder { color: var(--bso-muted-2); opacity: 1; }
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) .form-control:focus {
  outline: none;
  border-color: var(--bso-navy);
  box-shadow: 0 0 0 3px rgba(49, 39, 131, 0.12);
}

/* Pole s heslem a tlačítkem oka. Warehouse dává tlačítku plnou šedou výplň
   #b7b7b7, tady je to tichý ovládací prvek na okraji pole. */
:is(body#authentication, body#registration, body#password, body#identity) .input-group.js-parent-focus { display: flex; flex-wrap: nowrap; }
:is(body#authentication, body#registration, body#password, body#identity) .input-group .form-control {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
:is(body#authentication, body#registration, body#password, body#identity) .input-group-append { display: flex; flex: 0 0 auto; }
:is(body#authentication, body#registration, body#password, body#identity) .input-group-append .btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 44px;
  min-width: 46px;
  margin: 0;
  padding: 0;
  background: #f7f7fb;
  border: 1px solid #e2e2ea;
  border-left: none;
  border-radius: 0 var(--bso-radius-s) var(--bso-radius-s) 0;
  color: var(--bso-muted);
  box-shadow: none;
  transition: color var(--bso-prechod), background var(--bso-prechod);
}
:is(body#authentication, body#registration, body#password, body#identity) .input-group-append .btn:hover { background: #f0eff8; color: var(--bso-navy); }
/* fontový glyf nahrazen mask ikonou (theme jinde ikony nerastruje ani nefontuje);
   třídu fa-eye / fa-eye-slash přepíná JS Warehouse podle stavu pole */
:is(body#authentication, body#registration, body#password, body#identity) .input-group-append .btn i.fa { font-size: 0; line-height: 0; }
:is(body#authentication, body#registration, body#password, body#identity) .input-group-append .btn i.fa::before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 19px 19px;
  mask-size: 19px 19px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
}
:is(body#authentication, body#registration, body#password, body#identity) .input-group-append .btn i.fa-eye-slash::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M3.5 3.5 20.5 20.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M3.5 3.5 20.5 20.5'/%3E%3C/svg%3E");
}

/* ── 15.3 Souhlasy a přepínače ─────────────────────────────────────────── */

/* Čtvereček a kolečko ve stejném provedení jako v pokladně (sekce 12.4).
   Warehouse kreslí stav přes `outline` a mění u něj padding a line-height,
   takže se komponenta při přepnutí zvětšovala; reset musí pokrýt obojí. */
:is(body#registration, body#identity, body#address) span.custom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0;
}
:is(body#registration, body#identity, body#address) .custom-checkbox input[type="checkbox"] + span {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 1px 0 0 0;
  padding: 0;
  outline: none;
  border: 2px solid #cfcfdd;
  border-radius: 4px;
  background: #fff;
  line-height: 1;
  transition: border-color var(--bso-prechod), background var(--bso-prechod);
}
:is(body#registration, body#identity, body#address) .custom-checkbox input[type="checkbox"]:checked + span {
  border-color: var(--bso-red);
  background: var(--bso-red);
}
/* fajfku drží Warehouse absolutně (top 2 / left 1), uvnitř flexu je na střed */
:is(body#registration, body#identity, body#address) .custom-checkbox input[type="checkbox"] + span i.checkbox-checked { position: static; top: auto; left: auto; }
:is(body#registration, body#identity, body#address) .custom-checkbox input[type="checkbox"] + span i.checkbox-checked {
  display: none;
  font-size: 11px;
  line-height: 1;
  color: #fff;
}
:is(body#registration, body#identity, body#address) .custom-checkbox input[type="checkbox"]:checked + span i.checkbox-checked { display: block; }
:is(body#registration, body#identity, body#address) .custom-checkbox label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--bso-text);
  cursor: pointer;
}
:is(body#registration, body#identity, body#address) .custom-checkbox label em {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
  color: var(--bso-muted-2);
}
/* Kolečko má u Warehouse jinou stavbu než čtvereček: kroužek kreslí sám obal
   .custom-radio, vnitřní span je jen 6px puntík na jeho středu a input je
   opacity 0, ale JE v toku, takže puntík vytlačoval mimo kroužek. Input proto
   překrývá celý obal absolutně a puntík se vrací doprostřed. */
:is(body#registration, body#identity, body#address) span.custom-radio {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 2px solid #cfcfdd;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  transition: border-color var(--bso-prechod);
}
:is(body#registration, body#identity, body#address) span.custom-radio:has(input[type="radio"]:checked) { border-color: var(--bso-red); }
:is(body#registration, body#identity, body#address) .custom-radio input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
:is(body#registration, body#identity, body#address) .custom-radio input[type="radio"] + span { display: none; }
:is(body#registration, body#identity, body#address) .custom-radio input[type="radio"]:checked + span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border: none;
  border-radius: 50%;
  background: var(--bso-red);
}
:is(body#registration, body#identity, body#address) .form-control-valign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; min-height: 44px; }
:is(body#registration, body#identity, body#address) label.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--bso-text);
  cursor: pointer;
}
:is(body#registration, body#identity, body#address) label.radio-inline span.custom-radio { display: inline-flex; margin: 0; padding: 0; }

/* ── 15.4 Chyby a hlášky ───────────────────────────────────────────────── */

/* Chyba u konkrétního pole: červený rámeček a světle červené pozadí jako
   v pokladně (12.3), text drobným tučným písmem pod polem. Warehouse dává
   každé chybě vlastní box .alert-danger, ten se tu ruší.
   `#main` v selektoru není dekorace: hlášky o kus níž mají scope `#main .alert`
   (dvě id), a bez něj by měla pravidla u polí nižší specificitu a chyba u pole
   by zůstala plnohodnotným růžovým boxem. */
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group.has-error .form-control {
  border-color: var(--bso-red);
  background-color: #fdeaec;
}
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group .help-block { margin: 6px 0 0 0; }
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group .help-block ul { margin: 0; padding: 0; list-style: none; }
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group .help-block li.alert {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bso-red-hover);
}
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) #main .form-group .help-block li.alert + li.alert { margin-top: 2px; }

/* Hláška nad formulářem (chybné přihlášení, potvrzení uložení, systémová
   oznámení). Stejné provedení jako hlášky v košíku (sekce 13.9). */
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip, body#guest-tracking) #main .alert {
  box-sizing: border-box;
  margin: 0 0 16px 0;
  padding: 11px 14px;
  border: 1px solid;
  border-radius: var(--bso-radius-s);
  font-size: 13px;
  line-height: 1.45;
}
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip, body#guest-tracking) #main .alert ul { margin: 0; padding: 0; list-style: none; }
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip, body#guest-tracking) #main .alert li + li { margin-top: 4px; }
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip, body#guest-tracking) #main .alert-danger { background: #fdeaec; border-color: #f3c2c6; color: var(--bso-red-hover); }
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip, body#guest-tracking) #main .alert-success { background: #eefaf2; border-color: #b9e6cb; color: #146b3a; }
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip, body#guest-tracking) #main .alert-warning { background: #fff8e8; border-color: #f0dcae; color: #7a5b00; }
:is(body#authentication, body#registration, body#password, body#my-account,
    body#identity, body#addresses, body#address, body#history, body#discount,
    body#order-slip, body#guest-tracking) #main .alert-info { background: #f4f3fb; border-color: #dcd9ef; color: var(--bso-navy-dark); }
/* aside s oznámeními má od Warehouse spodní mezeru i když je prázdný */
:is(body#my-account, body#identity, body#addresses, body#address, body#history,
    body#discount, body#order-slip) #notifications:empty { display: none; }

/* Chyba přihlášení stojí nad formulářem jako plnohodnotná hláška, ne jako
   drobný text u pole (nepatří k žádnému konkrétnímu poli). */
body#authentication .login-form > .help-block { margin: 0 0 16px 0; }
body#authentication .login-form > .help-block ul { margin: 0; padding: 0; list-style: none; }
body#authentication .login-form > .help-block li.alert-danger {
  margin: 0;
  padding: 11px 14px;
  background: #fdeaec;
  border: 1px solid #f3c2c6;
  border-radius: var(--bso-radius-s);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--bso-red-hover);
}

/* ── 15.5 Tlačítka formulářů ───────────────────────────────────────────── */

/* Primární tlačítko účtu: červené jako nákupní CTA, ale 48 px místo 52 px
   (sekce 12.9), aby zůstalo o stupeň tišší než Objednat a Do pokladny. */
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) .btn.btn-primary,
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) button.form-control-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 24px;
  background: var(--bso-red);
  border: none;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-condensed);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--bso-prechod), box-shadow var(--bso-prechod);
}
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) .btn.btn-primary:hover,
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) button.form-control-submit:hover {
  background: var(--bso-red-hover);
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.28);
}
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) .btn.btn-primary:focus-visible,
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) button.form-control-submit:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 2px; }
:is(body#authentication, body#registration, body#password, body#identity,
    body#address, body#guest-tracking) footer.form-footer {
  display: flex;
  margin: 4px 0 0 0;
  padding: 0;
  text-align: left;
}
/* Na stránkách, kde formulář stojí v širokém sloupci účtu, by tlačítko přes
   celou šířku působilo jako pruh; na úzkých přihlašovacích stránkách je
   naopak plná šířka správně (je to jediná akce obrazovky). */
:is(body#identity, body#address, body#guest-tracking) .btn.btn-primary,
:is(body#identity, body#address, body#guest-tracking) button.form-control-submit { max-width: 260px; }

/* ── 15.6 Přihlášení, registrace, obnova hesla ─────────────────────────── */

body#authentication .login-form .forgot-password { margin: -2px 0 0 0; text-align: right; }
body#authentication .login-form .forgot-password a {
  font-size: 13px;
  font-weight: 600;
  color: var(--bso-navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
body#authentication .login-form .forgot-password a:hover { color: var(--bso-red); border-bottom-color: var(--bso-red); }
body#authentication .login-form form > section { margin-bottom: 18px; }

/* Přepnutí mezi přihlášením a registrací */
.bso-ucet-prepnuti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 14px 0 0 0;
  padding: 16px 20px;
  background: #f4f3fb;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}
.bso-ucet-prepnuti-txt { font-size: 14px; font-weight: 600; color: var(--bso-navy-dark); }
.bso-ucet-prepnuti--radka {
  margin: 0 0 14px 0;
  padding: 0;
  background: transparent;
  border: none;
  justify-content: flex-start;
  gap: 8px;
}
.bso-ucet-prepnuti-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-ucet-prepnuti-link:hover { color: var(--bso-red) !important; border-bottom-color: var(--bso-red); }

/* Vlastní formulář obnovy hesla (child password-email.tpl a password-new.tpl) */
.bso-ucet-form .form-group { margin: 0 0 16px 0; }
.bso-ucet-form .col-form-label {
  display: block;
  margin: 0;
  padding: 0 0 6px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bso-navy-dark);
}
.bso-ucet-pod-formularem { margin-top: 16px; }
.bso-ucet-zpet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-ucet-zpet:hover { color: var(--bso-red) !important; border-bottom-color: var(--bso-red); }
/* potvrzení odeslané obnovy hesla: stejná skladba jako prázdné stavy */
.bso-ucet-potvrzeni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px 44px 24px;
  text-align: center;
}
.bso-ucet-prazdno-text--drobne { font-size: 13px; color: var(--bso-muted); }

/* ── 15.7 Rozcestník účtu (dlaždice) ───────────────────────────────────── */

/*
 * Dlaždice a odkazy modulů (hook displayCustomerAccount) sdílejí markup
 * <a><span class="link-item"> ikona + popisek </span></a>, proto se styluje
 * `> a`, ne třída: odkaz z ps_emailalerts nebo psgdpr vypadá pak stejně jako
 * naše dlaždice. Modulové odkazy nesou bootstrapí třídy sloupců (col-lg-4…),
 * které by v mřížce nastavily šířku 33 %, proto `width: auto`.
 */
.bso-ucet-dlazdice-mrizka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bso-ucet-dlazdice-mrizka > a {
  display: block;
  box-sizing: border-box;
  flex: none;
  width: auto;
  max-width: none;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  text-decoration: none;
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
.bso-ucet-dlazdice-mrizka > a:hover { border-color: #cfcbe6; box-shadow: var(--bso-stin-hover); }
.bso-ucet-dlazdice-mrizka > a:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 2px; }
.bso-ucet-dlazdice-mrizka > a > .link-item { display: flex; align-items: flex-start; gap: 14px; }
/* dlaždice bez popisku (odkazy modulů) mají jen jednu řádku textu, ta patří
   na osu ikony, ne k hornímu okraji */
.bso-ucet-dlazdice-mrizka > a:not(:has(.bso-ucet-popis)) > .link-item { align-items: center; }
.bso-ucet-dlazdice-mrizka > a .bso-ucet-ico,
.bso-ucet-dlazdice-mrizka > a .link-item > i.fa {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: #f4f3fb;
  border-radius: 50%;
  color: var(--bso-navy);
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
.bso-ucet-dlazdice-mrizka > a:hover .bso-ucet-ico,
.bso-ucet-dlazdice-mrizka > a:hover .link-item > i.fa { background: var(--bso-navy); color: #fff; }
.bso-ucet-dlazdice-mrizka > a .bso-ucet-txt { display: block; padding-top: 2px; }
.bso-ucet-dlazdice-mrizka > a .bso-ucet-nazev {
  display: block;
  font-family: var(--bso-condensed);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-ucet-dlazdice-mrizka > a .bso-ucet-popis {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bso-muted);
}
/* Odhlášení je tichá akce, ne rovnocenná dlaždice */
.bso-ucet-dlazdice-mrizka > a.bso-ucet-odhlasit .bso-ucet-nazev { color: var(--bso-muted); }
.bso-ucet-dlazdice-mrizka > a.bso-ucet-odhlasit:hover .bso-ucet-ico { background: var(--bso-red); }

/* Ikony modulových odkazů: fontový glyf se skryje a místo něj se kreslí mask
   ikona ve stejné kresbě jako inline SVG našich dlaždic. Výchozí je míček,
   konkrétní moduly si ho přepisují podle id nebo cíle odkazu. */
.bso-ucet-dlazdice-mrizka > a .link-item > i.fa,
.bso-ucet-nav > a .link-item > i.fa {
  --bso-ucet-ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M6.6 6 C9.4 9.2 9.4 14.8 6.6 18 M17.4 6 C14.6 9.2 14.6 14.8 17.4 18' stroke-dasharray='2 2' stroke-width='1.5'/%3E%3C/svg%3E");
  font-size: 0;
  line-height: 0;
}
.bso-ucet-dlazdice-mrizka > a .link-item > i.fa::before,
.bso-ucet-nav > a .link-item > i.fa::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--bso-ucet-ico-mask) no-repeat center / 22px 22px;
  mask: var(--bso-ucet-ico-mask) no-repeat center / 22px 22px;
}
/* ps_emailalerts: Moje oznámení */
.bso-ucet-dlazdice-mrizka > a#emailsalerts .link-item > i.fa,
.bso-ucet-nav > a#emailsalerts .link-item > i.fa {
  --bso-ucet-ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2a5.4 5.4 0 0 0-5.4 5.4c0 4.8-2 6.2-2 6.2h14.8s-2-1.4-2-6.2A5.4 5.4 0 0 0 12 4.2z'/%3E%3Cpath d='M10.3 18.6a2 2 0 0 0 3.4 0'/%3E%3C/svg%3E");
}
/* psgdpr: Moje osobní data */
.bso-ucet-dlazdice-mrizka > a[href*="psgdpr"] .link-item > i.fa,
.bso-ucet-nav > a[href*="psgdpr"] .link-item > i.fa {
  --bso-ucet-ico-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 19 6.2v6c0 4.2-3 7-7 8.4-4-1.4-7-4.2-7-8.4v-6z'/%3E%3Cpath d='M9.2 12.2l2 2 3.6-3.8'/%3E%3C/svg%3E");
}
/* popisek modulového odkazu je holý textový uzel vedle ikony */
.bso-ucet-dlazdice-mrizka > a .link-item {
  font-family: var(--bso-condensed);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-ucet-dlazdice-mrizka > a .bso-ucet-popis { font-family: var(--bso-base); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ── 15.8 Boční navigace podstránek ────────────────────────────────────── */

.bso-ucet-nav {
  box-sizing: border-box;
  flex: 0 0 244px;
  width: 244px;
  align-self: flex-start;
  position: sticky;
  top: var(--bso-sticky-top);
  padding: 8px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}
.bso-ucet-nav > a {
  display: block;
  box-sizing: border-box;
  flex: none;
  width: auto;
  max-width: none;
  padding: 0;
  border-radius: var(--bso-radius-s);
  text-decoration: none;
  transition: background var(--bso-prechod), box-shadow var(--bso-prechod);
}
.bso-ucet-nav > a > .link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bso-text);
}
.bso-ucet-nav > a .bso-ucet-ico,
.bso-ucet-nav > a .link-item > i.fa {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--bso-muted-2);
  transition: color var(--bso-prechod);
}
.bso-ucet-nav > a .link-item > i.fa::before { width: 18px; height: 18px; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; }
.bso-ucet-nav > a .bso-ucet-nazev { display: block; }
.bso-ucet-nav > a:hover { background: #f7f7fb; }
.bso-ucet-nav > a:hover .bso-ucet-ico,
.bso-ucet-nav > a:hover .link-item > i.fa { color: var(--bso-navy); }
/* aktivní položka: světlé pozadí a červený pásek u hrany. Pásek je inset
   stínem, ne borderem, aby položka nezměnila rozměr (poučení z detailu). */
.bso-ucet-nav > a.bso-je-aktivni {
  background: #f4f3fb;
  box-shadow: inset 3px 0 0 var(--bso-red);
}
.bso-ucet-nav > a.bso-je-aktivni > .link-item { color: var(--bso-navy-dark); }
.bso-ucet-nav > a.bso-je-aktivni .bso-ucet-ico { color: var(--bso-navy); }
.bso-ucet-nav > a:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: -2px; }
/* odhlášení oddělené linkou a tlumené */
.bso-ucet-nav > a.bso-ucet-odhlasit { margin-top: 6px; padding-top: 6px; border-top: 1px solid #f0f0f5; border-radius: 0 0 var(--bso-radius-s) var(--bso-radius-s); }
.bso-ucet-nav > a.bso-ucet-odhlasit > .link-item { color: var(--bso-muted); }

/* ── 15.9 Adresy ───────────────────────────────────────────────────────── */

/* Warehouse styluje kartu adresy přes `.page-addresses .address …`
   (specificita 0,3,0) a dává jí padding 1rem uvnitř těla, min-height 9rem
   na samotné adrese a spodní mezeru 1,875rem. Naše pravidla proto musí mít
   scope `body#addresses` (1,2,1), jinak by se neprosadila. */
body#addresses .bso-adresy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body#addresses .bso-adresa-karta {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}
body#addresses .bso-adresa-karta .address-body { flex: 1 1 auto; padding: 0; }
body#addresses .bso-adresa-karta .bso-adresa-alias {
  margin: 0 0 8px 0;
  font-family: var(--bso-condensed);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
body#addresses .bso-adresa-karta address {
  margin: 0;
  min-height: 0;
  font-size: 14px;
  font-style: normal;
  line-height: 1.6;
  color: #55555f;
}
body#addresses .bso-adresa-karta .address-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0 0 0;
  padding: 12px 0 0 0;
  border-top: 1px solid #f0f0f5;
}
body#addresses .bso-adresa-karta .address-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  transition: color var(--bso-prechod);
}
body#addresses .bso-adresa-karta .address-footer a svg { width: 16px; height: 16px; flex-shrink: 0; }
body#addresses .bso-adresa-karta .address-footer a:hover { color: var(--bso-red) !important; }
body#addresses .bso-adresa-karta .address-footer .bso-adresa-smazat { margin-left: auto; color: #9a97b5 !important; }
body#addresses .bso-adresy-patka { margin-top: 16px; }

/* ── 15.10 Tabulky, karty a prázdné stavy ──────────────────────────────── */

/* Tabulka historie objednávek, poukazů a dobropisů. Obal má vlastní
   overflow-x: na šířkách 768-991 px je sloupec obsahu užší než tabulka
   a bez obalu by vodorovně scrollovala celá stránka. Pod 768 px se tabulka
   nezobrazuje vůbec, místo ní jsou karty (.bso-ucet-karty), takže tam se
   nescrolluje nic. */
.bso-ucet-tabulka-obal {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}
.bso-ucet-tabulka { width: 100%; margin: 0; border-collapse: collapse; font-size: 13.5px; }
.bso-ucet-tabulka th,
.bso-ucet-tabulka td {
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid #f0f0f5;
  text-align: left;
  vertical-align: middle;
  color: var(--bso-text);
}
.bso-ucet-tabulka thead th {
  background: #faf9fd;
  font-family: var(--bso-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bso-navy-dark);
}
.bso-ucet-tabulka tbody th[scope="row"] { font-weight: 700; color: var(--bso-navy-dark); white-space: nowrap; }
.bso-ucet-tabulka tbody tr:last-child th,
.bso-ucet-tabulka tbody tr:last-child td { border-bottom: none; }
.bso-ucet-tabulka tbody tr:hover th,
.bso-ucet-tabulka tbody tr:hover td { background: #fbfbfd; }
.bso-ucet-tabulka-cena { font-weight: 700; color: var(--bso-navy-dark); white-space: nowrap; }
.bso-ucet-tabulka-akce { white-space: nowrap; }
.bso-ucet-tabulka-akce a {
  font-size: 13px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  transition: color var(--bso-prechod);
}
.bso-ucet-tabulka-akce a:hover { color: var(--bso-red) !important; }
.bso-ucet-tabulka-akce a + a { margin-left: 12px; padding-left: 12px; border-left: 1px solid #e7e7ee; }
.bso-ucet-prazdna-bunka { color: var(--bso-muted-2); }
.bso-ucet-faktura {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--bso-navy);
  transition: color var(--bso-prechod);
}
.bso-ucet-faktura svg { width: 19px; height: 19px; }
.bso-ucet-faktura:hover { color: var(--bso-red); }
/* Barvu pozadí štítku určuje stav objednávky v adminu (inline style), proto
   se tu nastavuje jen tvar a barva textu. PS posílá ve `contrast` hodnotu
   `dark` (světlé pozadí, tmavý text) nebo `bright` (tmavé pozadí, bílý text). */
.bso-ucet-stav {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: #fff;
}
.bso-ucet-stav.dark { color: #1c1c28; }
.bso-ucet-kod {
  display: inline-block;
  padding: 3px 9px;
  background: #f4f3fb;
  border: 1px dashed #cfcbe6;
  border-radius: 4px;
  font-family: var(--bso-base);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bso-navy);
}

/* Karty místo tabulky na mobilu */
.bso-ucet-karty { display: flex; flex-direction: column; gap: 12px; }
.bso-ucet-karta {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}
.bso-ucet-karta-ref {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--bso-condensed);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bso-navy-dark) !important;
  text-decoration: none;
}
.bso-ucet-karta-nazev { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--bso-text); }
.bso-ucet-karta-radky { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bso-ucet-karta-datum { font-size: 13px; color: var(--bso-muted); }
.bso-ucet-karta-cena { font-size: 17px; font-weight: 700; color: var(--bso-navy-dark); }
.bso-ucet-karta-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0 0; font-size: 13px; }
.bso-ucet-karta-dl dt { color: var(--bso-muted); font-weight: 400; }
.bso-ucet-karta-dl dd { margin: 0; color: var(--bso-text); font-weight: 600; text-align: right; }
.bso-ucet-karta-akce { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f0f5; }
.bso-ucet-karta-akce a { font-size: 13.5px; font-weight: 600; color: var(--bso-navy) !important; text-decoration: none; }
.bso-ucet-karta-akce a:hover { color: var(--bso-red) !important; }

/* Prázdný stav ve stejné skladbě jako prázdný košík (sekce 13.10), jen
   v menším měřítku, protože stojí uvnitř obsahového sloupce účtu. */
.bso-ucet-prazdno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 24px 48px 24px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  text-align: center;
}
.bso-ucet-prazdno-mic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 88px;
  height: 88px;
  background: #f4f3fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 5 C4.8 9 4.8 15 2.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.35' stroke-width='1.4' stroke-dasharray='1.6 2'/%3E%3Cpath d='M21.5 5 C19.2 9 19.2 15 21.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.35' stroke-width='1.4' stroke-dasharray='1.6 2'/%3E%3C/svg%3E") no-repeat center / 86px 86px;
  border: 1px solid var(--bso-border);
  border-radius: 50%;
  color: #9a97b5;
}
.bso-ucet-prazdno-mic svg { width: 34px; height: 34px; }
.bso-ucet-prazdno-mic--ok { color: var(--bso-zelena); }
.bso-ucet-prazdno-nadpis {
  margin: 0;
  font-family: var(--bso-condensed);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-ucet-prazdno-text {
  max-width: 420px;
  margin: -6px 0 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #55555f;
}
.bso-ucet-prazdno-akce { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 4px; }
.bso-ucet-prazdno-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-ucet-prazdno-link:hover { color: var(--bso-red) !important; border-bottom-color: var(--bso-red); }

/* ── 15.11 Sledování objednávky bez registrace ─────────────────────────── */

body#guest-tracking #content.page-content {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}
body#guest-tracking #content > form > header p { margin: 0 0 16px 0; font-size: 14px; line-height: 1.5; color: var(--bso-muted); }
body#guest-tracking .form-control-comment { color: var(--bso-muted-2); }

/* ── 15.12 Responzivita ────────────────────────────────────────────────── */

/* Sloupce se rozpadají na stejné hranici jako v košíku (992 px). Boční
   navigace se mění na vodorovný pás pilulek nad obsahem: sedm položek pod
   sebou by na mobilu odtlačilo obsah přes celou první obrazovku, pás drží
   výšku jedné řádky a scrolluje uvnitř sebe, ne stránkou. */
@media (max-width: 991.98px) {
  .bso-ucet-layout { display: block; }
  .bso-ucet-nav {
    display: flex;
    gap: 6px;
    position: static;
    width: 100%;
    margin-bottom: 16px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .bso-ucet-nav > a { flex: 0 0 auto; }
  .bso-ucet-nav > a > .link-item { padding: 8px 12px; white-space: nowrap; }
  .bso-ucet-nav > a.bso-je-aktivni { background: var(--bso-navy); box-shadow: none; }
  .bso-ucet-nav > a.bso-je-aktivni > .link-item { color: #fff; }
  .bso-ucet-nav > a.bso-je-aktivni .bso-ucet-ico { color: #fff; }
  .bso-ucet-nav > a.bso-ucet-odhlasit { margin: 0 0 0 6px; padding: 0 0 0 6px; border-top: none; border-left: 1px solid #f0f0f5; border-radius: var(--bso-radius-s); }
  .bso-ucet-dlazdice-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  :is(body#authentication, body#registration, body#password, body#my-account,
      body#identity, body#addresses, body#address, body#history, body#discount,
      body#order-slip, body#guest-tracking) #main h1.page-title { font-size: 24px; margin-bottom: 14px; }
  .bso-ucet-karta-formular,
  body#guest-tracking #content.page-content { padding: 16px; }
  body#addresses .bso-adresy { grid-template-columns: minmax(0, 1fr); }
  .bso-ucet-prepnuti { padding: 14px 16px; }
  .bso-ucet-prazdno { padding: 34px 16px 38px 16px; }
  .bso-ucet-prazdno-mic { width: 76px; height: 76px; background-size: 74px 74px; }
  .bso-ucet-prazdno-mic svg { width: 30px; height: 30px; }
  .bso-ucet-prazdno-nadpis { font-size: 21px; }
  .bso-ucet-prazdno-text { font-size: 13.5px; }
  /* na mobilu je i uložení jediná akce obrazovky, tlačítko jde na plnou šířku */
  :is(body#identity, body#address, body#guest-tracking) .btn.btn-primary,
  :is(body#identity, body#address, body#guest-tracking) button.form-control-submit { max-width: none; }
}

@media (max-width: 575.98px) {
  .bso-ucet-dlazdice-mrizka { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bso-ucet-dlazdice-mrizka > a { padding: 14px 16px; }
  .bso-ucet-dlazdice-mrizka > a .bso-ucet-ico,
  .bso-ucet-dlazdice-mrizka > a .link-item > i.fa { flex: 0 0 38px; width: 38px; height: 38px; padding: 9px; }
  .bso-ucet-dlazdice-mrizka > a .bso-ucet-nazev,
  .bso-ucet-dlazdice-mrizka > a .link-item { font-size: 18px; }
}

/* ══ 16. BLOG (ph_simpleblog) ══════════════════════════════════════════ */

/*
 * Blog má tři typy stránek a všechny nesou id na <body>:
 *   module-ph_simpleblog-list      výpis /blog
 *   module-ph_simpleblog-category  výpis rubriky
 *   module-ph_simpleblog-single    detail článku
 * Scope proto drží body[id^="module-ph_simpleblog"], což pokryje i stránky
 * autorů, kdyby se někdy zapnuly, a nic z toho nemůže vytéct jinam.
 *
 * Blog nemá boční sloupec (hook displayLeftColumn nemá modul zaregistrovaný,
 * layout je layout-full-width). Navigaci mezi rubrikami proto nese pás pilulek
 * nad výpisem, ne sidebar.
 *
 * Výpis článků přebírá tvarosloví výpisu produktů (sekce 8 a karta miniatury
 * ze sekce 4): bílá karta, rámeček #e7e7ee, radius 10, stín na hover.
 * Text článku jede na obsahové typografii ze sekce 9 (rich text z administrace);
 * selektory .simpleblog__post__content a .ph_cat_description jsou tam přidané
 * do :is() listu, tady se už neopakují.
 */

/* ── 16.1 Titulek stránky ──────────────────────────────────────────────── */

/* Shodné provedení jako titulek CMS stránky (sekce 9): Barlow Condensed 28,
   uppercase, navy, pod tím červený šev. Warehouse dává .page-title
   border-bottom a velký margin, oboje se ruší. */
body[id^="module-ph_simpleblog"] .page-header .page-title,
body[id^="module-ph_simpleblog"] .page-header .page-title span {
  font-family: var(--bso-condensed) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: var(--bso-navy-dark) !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
body[id^="module-ph_simpleblog"] .page-header .page-title::before { display: none !important; }
body[id^="module-ph_simpleblog"] .page-header .page-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 90px 10px;
}
body[id^="module-ph_simpleblog"] .page-header { margin: 0 0 18px 0; padding: 0; border: none; }
/* Warehouse dává obsahové sekci rámeček a podklad; bloky blogu si nesou
   vlastní karty, druhý rám kolem všeho by je zdvojil (stejné jako u účtu). */
body[id^="module-ph_simpleblog"] #content.page-content {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Nadpis bloku uvnitř článku (sdílení, další články, související produkty).
   O dva stupně menší než titulek stránky, jinak stejný vzor jako nadpisy
   sekcí produktu (.product-sections .section-title). */
.bso-blog-h2 {
  font-family: var(--bso-condensed) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: var(--bso-navy-dark) !important;
  margin: 0 0 16px 0 !important;
  padding: 0;
  border: none;
}
.bso-blog-h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 90px 10px;
}

/* ── 16.2 Perex rubriky a pás rubrik ───────────────────────────────────── */

.bso-blog-kat-obraz { margin: 0 0 16px 0; }
.bso-blog-kat-obraz img { width: 100%; height: auto; border-radius: var(--bso-radius); display: block; }

/* Popis rubriky: bez karty, ať nekonkuruje kartám článků. Jen text pod
   titulkem, stejná role jako .bso-ucet-lead v účtu. */
.bso-blog-perex-kat { max-width: 760px; margin: -4px 0 18px 0; }

/* Pás rubrik: pilulky jako aktivní filtry v kategorii, jen neutrální
   (bílá s rámečkem), aktivní je plná navy. */
.bso-blog-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px 0;
}
.bso-blog-nav-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: border-box;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--bso-text) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bso-prechod), border-color var(--bso-prechod), background var(--bso-prechod);
}
.bso-blog-nav-pill:hover,
.bso-blog-nav-pill:focus { color: var(--bso-red) !important; border-color: var(--bso-red); text-decoration: none; }
.bso-blog-nav-pill--aktivni,
.bso-blog-nav-pill--aktivni:hover,
.bso-blog-nav-pill--aktivni:focus {
  background: var(--bso-navy);
  border-color: var(--bso-navy);
  color: #fff !important;
}

/* ── 16.3 Mřížka a karta článku ────────────────────────────────────────── */

/* Warehouse dává výpisu margin-top 30 px; titulek se švem už odsazení nese. */
.simpleblog__listing { margin-top: 0; padding-bottom: 0; }
/* sloupec je flex, aby karta vyplnila výšku řádku (karty v řádku stejně vysoké) */
.simpleblog__listing__post { display: flex; margin-bottom: 24px; }

.bso-blog-karta {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* .cardblog z parenta má margin-bottom .75rem, mezeru řeší sloupec */
  margin-bottom: 0;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  overflow: hidden;
  transition: box-shadow var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-blog-karta:hover { box-shadow: var(--bso-stin-hover); }

/* Obálka: pevný poměr 2:1 (miniatura se generuje 600×300), ořez object-fit,
   aby řádek karet začínal textem na stejné výšce i u jinak ořezaných fotek. */
.bso-blog-obal {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #f4f3fb;
}
.bso-blog-obal img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  display: block;
}

.bso-blog-karta .simpleblog__listing__post__wrapper__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 18px 14px 18px;
}

/* Štítek rubriky: stejné tvarosloví jako pilulky filtrů, jen v tlumené
   fialové místo červené, aby na kartě nepřebil titulek. */
.bso-blog-stitek {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 24px;
  box-sizing: border-box;
  padding: 0 10px;
  background: #f4f3fb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-navy) !important;
  text-decoration: none;
  transition: background var(--bso-prechod), color var(--bso-prechod);
}
.bso-blog-stitek:hover,
.bso-blog-stitek:focus { background: #fdeaec; color: var(--bso-red) !important; text-decoration: none; }

/* Titulek karty: Barlow (ne Condensed) a bez verzálek, protože jde o větu.
   Globální pravidlo h1,h2,h3 dává uppercase, Warehouse k tomu čáru pod
   titulkem a odsazení, oboje se ruší. */
.bso-blog-karta .simpleblog__listing__post__wrapper__content__headline {
  font-family: var(--bso-base) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 10px 0 8px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.bso-blog-karta .simpleblog__listing__post__wrapper__content__headline a {
  color: var(--bso-navy-dark) !important;
  text-decoration: none;
  transition: color var(--bso-prechod);
  /* dva řádky napevno: řádek karet drží stejnou linku perexu */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 45px;
}
.bso-blog-karta .simpleblog__listing__post__wrapper__content__headline a:hover { color: var(--bso-red) !important; }

/* Perex: tři řádky, zbytek ořezaný. Parent dává <p> třídu d-inline,
   proto display s !important. */
.bso-blog-perex {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 14px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #55555f;
}

/* Odkaz do článku: navy → hover červená, šipka se posune, jako u ostatních
   textových odkazů v tématu. */
.bso-blog-vice {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  transition: color var(--bso-prechod);
}
.bso-blog-vice span { text-decoration: underline; text-underline-offset: 3px; }
.bso-blog-vice svg { transition: transform var(--bso-prechod); }
.bso-blog-vice:hover,
.bso-blog-vice:focus { color: var(--bso-red) !important; text-decoration: none; }
.bso-blog-vice:hover svg { transform: translateX(3px); }

/* Patička karty: tenká linka a datum, stejné provedení jako patičky karet účtu */
.bso-blog-karta-paticka {
  margin: 0;
  padding: 11px 18px;
  border-top: 1px solid #f0f0f5;
}
.bso-blog-datum {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--bso-muted);
}
.bso-blog-datum svg { color: var(--bso-muted-2); flex-shrink: 0; }

/* ── 16.4 Stránkování ──────────────────────────────────────────────────── */

/* Bílý pruh jako lišta nad výpisem produktů (#js-product-list-top): vlevo
   počet článků, vpravo pilulky stránek (vzhled pilulek řeší sekce 8). */
.bso-blog-strankovani {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 4px 0 0 0;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}
.bso-blog-strankovani > .bso-blog-strankovani-pocet { font-size: 13px; color: var(--bso-muted); }
.bso-blog-strankovani .page-list { padding: 0; }
.bso-blog-strankovani .page-list li a.disabled { opacity: 0.4; pointer-events: none; }

/* ── 16.5 Prázdný stav ─────────────────────────────────────────────────── */

/* Stejná skladba jako prázdný košík (sekce 13.10) a prázdné stavy účtu
   (sekce 15.10): míček na světle fialové ploše, nadpis, věta, cesta dál. */
.bso-blog-prazdno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 24px 48px 24px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  text-align: center;
}
.bso-blog-prazdno-mic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 88px;
  height: 88px;
  background: #f4f3fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 5 C4.8 9 4.8 15 2.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.35' stroke-width='1.4' stroke-dasharray='1.6 2'/%3E%3Cpath d='M21.5 5 C19.2 9 19.2 15 21.5 19' fill='none' stroke='%23e30613' stroke-opacity='0.35' stroke-width='1.4' stroke-dasharray='1.6 2'/%3E%3C/svg%3E") no-repeat center / 86px 86px;
  border: 1px solid var(--bso-border);
  border-radius: 50%;
  color: #9a97b5;
}
.bso-blog-prazdno-mic svg { width: 34px; height: 34px; }
.bso-blog-prazdno-nadpis {
  margin: 0;
  font-family: var(--bso-condensed);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-blog-prazdno-text {
  max-width: 420px;
  margin: -6px 0 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #55555f;
}
.bso-blog-prazdno-akce { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 4px; }
.bso-blog-prazdno-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bso-navy) !important;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-blog-prazdno-link:hover { color: var(--bso-red) !important; border-bottom-color: var(--bso-red); }

/* ── 16.6 Detail článku ────────────────────────────────────────────────── */

/* Meta pruh nad článkem: datum, rubrika, případně autor. Warehouse odděluje
   položky svislou čárkou přes ::after, tady je mezera dost. */
.bso-blog-meta ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0 0 16px 0;
  padding: 0;
  list-style: none;
}
.bso-blog-meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--bso-muted);
}
.bso-blog-meta li::after { display: none !important; }
.bso-blog-meta li svg { color: var(--bso-muted-2); flex-shrink: 0; }
.bso-blog-meta li a:not(.bso-blog-stitek) { color: var(--bso-navy) !important; text-decoration: none; }
.bso-blog-meta li a:not(.bso-blog-stitek):hover { color: var(--bso-red) !important; }

/* Šířka čtecího sloupce. Na plné šířce obsahu (1240 px) má řádek článku přes
   150 znaků, což se nedá číst. Detail článku proto drží sloupec na hodnotě
   --bso-cteci-sloupec na střed, včetně drobečků nad titulkem, aby levá hrana
   lícovala. Ostatní stránky blogu zůstávají na plné šířce.
   Pod 992 px se nic neomezuje, tam je sloupec užší sám o sobě.
   Obsah článku vypisuje modul iqitelementor dvěma způsoby: prostý text
   v .rte-content, článek poskládaný v Elementoru rovnou jako .elementor.
   Sloupec platí pro obojí.
   U dlouhého článku přibude vedle textu obsah dokumentu (sekce 17.3);
   tělo stránky se pak rozšíří o jeho sloupec i mezeru, aby levá hrana textu
   zůstala pod titulkem. Sčítá se ze stejných tokenů jako mřížka, takže se
   hodnoty nemohou rozejít. */
@media (min-width: 992px) {
  body#module-ph_simpleblog-single:has(.simpleblog__post__content > :is(.rte-content, .elementor)) #main,
  body#module-ph_simpleblog-single:has(.simpleblog__post__content > :is(.rte-content, .elementor)) .breadcrumb {
    max-width: var(--bso-cteci-sloupec);
    margin-left: auto;
    margin-right: auto;
  }
}

/* S obsahem dokumentu se tělo stránky rozšíří o jeho sloupec i mezeru.
   Práh je stejný jako u statické stránky, sekce 17.1. */
@media (min-width: 1200px) {
  body#module-ph_simpleblog-single.bso-cms-sobsahem:has(.simpleblog__post__content > :is(.rte-content, .elementor)) #main,
  body#module-ph_simpleblog-single.bso-cms-sobsahem:has(.simpleblog__post__content > :is(.rte-content, .elementor)) .breadcrumb {
    max-width: calc(var(--bso-cteci-sloupec) + var(--bso-cms-obsah-mezera) + var(--bso-cms-obsah-sirka));
  }
}

/* Karta článku: bílá plocha s rámečkem, obálka lícuje s horní hranou. */
.bso-blog-clanek {
  margin-bottom: 40px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  overflow: hidden;
}
.bso-blog-clanek-obalka { background: #f4f3fb; }
.bso-blog-clanek-obalka img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  margin: 0;
}
.bso-blog-clanek .simpleblog__post__content { padding: 26px 30px 28px 30px; }
/* obrázky vložené do textu článku nesmí přetéct a mají stejný radius jako karty */
.bso-blog-clanek .simpleblog__post__content img { max-width: 100%; height: auto; border-radius: var(--bso-radius-s); }
.bso-blog-clanek .simpleblog__post__after-content:empty { display: none; }

/* Sdílení: neutrální pilulky, ne barvy sítí; web má vlastní barevnost. */
.bso-blog-sdileni { margin-bottom: 40px; }
.bso-blog-sdileni ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bso-blog-sdileni li { margin: 0; }
.bso-blog-sdileni-btn {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  width: auto !important;
  height: 42px;
  padding: 0 20px !important;
  background: #fff !important;
  border: 1px solid var(--bso-border) !important;
  border-radius: var(--bso-radius-s) !important;
  box-shadow: none !important;
  font-family: var(--bso-base) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--bso-navy) !important;
  cursor: pointer;
  transition: border-color var(--bso-prechod), background var(--bso-prechod), color var(--bso-prechod);
}
.bso-blog-sdileni-btn:hover,
.bso-blog-sdileni-btn:focus {
  background: #f4f3fb !important;
  border-color: var(--bso-navy) !important;
  color: var(--bso-navy) !important;
}
.bso-blog-sdileni-btn svg { flex-shrink: 0; }
/* stav po zkopírování odkazu (třídu přepíná custom.js) */
.bso-blog-sdileni-btn.je-hotovo {
  background: #eaf7ef !important;
  border-color: var(--bso-zelena) !important;
  color: var(--bso-zelena) !important;
}

/* Další články: dvě karty, předchozí vlevo, následující vpravo. */
.bso-blog-dalsi { margin-bottom: 40px; }
.bso-blog-dalsi-radek { display: flex; flex-wrap: wrap; gap: 16px; }
.bso-blog-dalsi-karta {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  text-decoration: none;
  transition: box-shadow var(--bso-prechod), border-color var(--bso-prechod);
}
.bso-blog-dalsi-karta:hover { box-shadow: var(--bso-stin-hover); text-decoration: none; }
.bso-blog-dalsi-karta--vpred { flex-direction: row-reverse; text-align: right; }
.bso-blog-dalsi-obrazek {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--bso-radius-s);
  background: #f4f3fb;
}
.bso-blog-dalsi-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bso-blog-dalsi-karta--vpred .bso-blog-dalsi-text { align-items: flex-end; }
.bso-blog-dalsi-smer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bso-muted-2);
}
.bso-blog-dalsi-titulek {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bso-navy-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--bso-prechod);
}
.bso-blog-dalsi-karta:hover .bso-blog-dalsi-titulek { color: var(--bso-red); }

/* Související produkty: nadpis se švem, mřížka karet je už hotová ze sekce 4 */
.bso-blog-produkty { margin-bottom: 40px; }
.bso-blog-produkty .block-content { margin-top: 0; }

/* Karta autora, kdyby se autoři zapnuli: bílá karta místo linek nahoře a dole */
body[id^="module-ph_simpleblog"] .author-card {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}

/* ── 16.7 Responzivita ─────────────────────────────────────────────────── */

/* 768-991 px: nastavené tři (nebo čtyři) sloupce jsou tu na 230 px karty,
   obálka by měla 115 px na výšku. Pás se proto láme na dva sloupce.
   Selektor drží konkrétní bootstrapí třídu, takže nastavení mřížky
   v administraci (PH_BLOG_GRID_COLUMNS) zůstává rozhodující nad 992 px. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .simpleblog__listing__post.col-md-4,
  .simpleblog__listing__post.col-md-3 { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 991.98px) {
  .bso-blog-clanek .simpleblog__post__content { padding: 22px 22px 24px 22px; }
  .bso-blog-clanek-obalka img { max-height: 320px; }
  /* parent roztahuje tlačítka sdílení na plnou šířku, pilulky to nechtějí */
  .simpleblog__share .btn { width: auto !important; }
}

@media (max-width: 767.98px) {
  body[id^="module-ph_simpleblog"] .page-header .page-title,
  body[id^="module-ph_simpleblog"] .page-header .page-title span { font-size: 24px !important; }
  .bso-blog-h2 { font-size: 21px !important; }
  .simpleblog__listing__post { margin-bottom: 18px; }
  .bso-blog-nav { gap: 7px; margin-bottom: 18px; }
  .bso-blog-nav-pill { height: 32px; padding: 0 13px; font-size: 13.5px; }
  .bso-blog-clanek { margin-bottom: 30px; }
  .bso-blog-sdileni,
  .bso-blog-dalsi,
  .bso-blog-produkty { margin-bottom: 30px; }
  /* pořadí čtení na mobilu: předchozí a následující článek pod sebou, oba
     zarovnané doleva (zrcadlení má smysl jen ve dvou sloupcích) */
  .bso-blog-dalsi-karta--vpred { flex-direction: row; text-align: left; }
  .bso-blog-dalsi-karta--vpred .bso-blog-dalsi-text { align-items: flex-start; }
}

@media (max-width: 575.98px) {
  .bso-blog-clanek .simpleblog__post__content { padding: 18px 16px 20px 16px; }
  .bso-blog-clanek-obalka img { max-height: 220px; }
  .bso-blog-karta .simpleblog__listing__post__wrapper__content { padding: 14px 15px 12px 15px; }
  .bso-blog-karta-paticka { padding: 10px 15px; }
  .bso-blog-prazdno { padding: 34px 18px 38px 18px; }
  .bso-blog-prazdno-akce { flex-direction: column; gap: 12px; }
  .bso-blog-prazdno-akce .bso-btn-primary { width: 100%; }
  .bso-blog-strankovani { justify-content: center; padding: 10px 12px; }
  .bso-blog-sdileni ul { gap: 8px; }
  .bso-blog-sdileni-btn { padding: 0 15px !important; }
  .bso-blog-dalsi-obrazek { flex: 0 0 60px; width: 60px; height: 60px; }
}

/* ══ 17. STATICKÉ STRÁNKY (CMS) ════════════════════════════════════════ */

/*
 * Statické stránky (obchodní podmínky, cookies, reklamace, o nás, doprava,
 * prodejna) jedou přes jednu šablonu: child override templates/cms/page.tpl.
 * Text vypisuje iqitelementor přes hook displayCMSDisputeInformation do
 * obálky .rte-content, kterou šablona balí do .bso-cms > .bso-cms-telo.
 *
 * Scope drží body#cms (id nese název controlleru) a #content.page-cms.
 * Obsahovou typografii (nadpisy, odstavce, seznamy, odkazy) si stránka
 * nevymýšlí, bere ji ze škály v sekci 9, kde je `#content.page-cms
 * .rte-content` v :is() listu spolu s popisem produktu a textem článku
 * na blogu. Tady jsou jen věci navíc, které rich text z migrace potřebuje:
 * tabulky, obrázky, vložená videa, prázdné odstavce, čtecí sloupec
 * a obsah dokumentu.
 *
 * Čtecí sloupec drží token --bso-cteci-sloupec (sekce 1), stejný jako detail
 * článku na blogu (sekce 16.6). Obě dlouhá čtení na webu tak mají řádek
 * stejně dlouhý a hodnoty se nemohou rozejít.
 * Bez omezení má řádek na 1440 přes 150 znaků a nedá se číst.
 *
 * Obálku textu vypisuje modul dvěma způsoby: stránka s HTML obsahem přijde
 * v .rte-content, stránka poskládaná v Elementoru rovnou jako
 * <div class="elementor"> se sekcemi. Selektory níž proto berou obojí
 * (.bso-cms-telo > :is(.rte-content, .elementor)), a to jen jako přímého
 * potomka obálky: elementorový textový widget má vlastní .rte-content
 * (.elementor-text-editor.rte-content) a karta ani odsazení mu do ní nesmí
 * zasahovat. Stejné dělení hlídá custom.js (bsoCmsText) i obsah dokumentu.
 */

/* ── 17.1 Čtecí sloupec ────────────────────────────────────────────────── */

@media (min-width: 992px) {
  /* bez obsahu dokumentu: samotný text na střed, drobečky a titulek lícují
     s jeho levou hranou (stejně jako u detailu článku) */
  body#cms:has(.js-bso-cms-telo > :is(.rte-content, .elementor)) #main,
  body#cms:has(.js-bso-cms-telo > :is(.rte-content, .elementor)) .breadcrumb {
    max-width: var(--bso-cteci-sloupec);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Obsah dokumentu vedle textu až od --bso-cms-obsah-prah.
   Práh není 992: v okně kolem tisíce bodů se sice mřížka zapne, ale na text
   zbude po odečtení obsahu a mezery necelých 300 bodů a odstavce se rozpadnou
   do dvou slov na řádek. Do prahu proto obsah zůstává sbalený nad textem,
   stejně jako na mobilu. Stejnou hodnotu čte custom.js, když rozhoduje,
   jestli obsah otevřít. */
@media (min-width: 1200px) {
  /* text + mezera + obsah na střed, levá hrana textu tedy zůstává pod
     titulkem i drobečky. Sčítá se ze stejných tří tokenů, ze kterých se
     skládá mřížka níž, takže se nemůže rozejít. */
  body#cms.bso-cms-sobsahem:has(.js-bso-cms-telo > :is(.rte-content, .elementor)) #main,
  body#cms.bso-cms-sobsahem:has(.js-bso-cms-telo > :is(.rte-content, .elementor)) .breadcrumb {
    max-width: calc(var(--bso-cteci-sloupec) + var(--bso-cms-obsah-mezera) + var(--bso-cms-obsah-sirka));
  }
  :is(body#cms, body#module-ph_simpleblog-single).bso-cms-sobsahem .bso-cms {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--bso-cms-obsah-sirka);
    gap: var(--bso-cms-obsah-mezera);
    align-items: start;
  }
  :is(body#cms, body#module-ph_simpleblog-single).bso-cms-sobsahem .bso-cms-telo { grid-column: 1; grid-row: 1; min-width: 0; }
  :is(body#cms, body#module-ph_simpleblog-single).bso-cms-sobsahem .bso-cms-obsah { grid-column: 2; grid-row: 1; }
}

/* ── 17.2 Karta dokumentu ──────────────────────────────────────────────── */

/* Bílá plocha s rámečkem a radiusem, stejné provedení i odsazení jako karta
   článku na blogu (.bso-blog-clanek + .simpleblog__post__content). */
.bso-cms-telo > :is(.rte-content, .elementor) {
  padding: 26px 30px 28px 30px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  /* migrované texty vozí dlouhé URL bez mezer, ty nesmí přetéct kartu */
  overflow-wrap: break-word;
}

/* ── 17.3 Rich text z migrace ──────────────────────────────────────────── */

/* Obsah přišel z jiného webu: prázdné odstavce, obrázky bez rozměrů, tabulky
   bez tříd, vložená videa s pevnou šířkou. Obsah se needituje, řeší se tady.
   Třídy bso-cms-prazdny, bso-cms-foto, bso-cms-tabulka a bso-cms-media
   přidává custom.js. */

/* prázdné odstavce (i <p><strong></strong></p>) místo mezery nedělají nic */
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) .bso-cms-prazdny { display: none !important; }

/* nadpis s kotvou nesmí skončit pod zafixovanou lištou menu */
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) .bso-cms-kotva { scroll-margin-top: 76px; }

/* Odstavec povýšený na podnadpis: migrovaný text (zásady cookies) člení
   obsah odstavcem, který je celý tučný. Když z nich vznikl obsah dokumentu,
   dostanou i vzhled nadpisu h3 z obsahové škály (sekce 9). */
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) .bso-cms-podnadpis {
  margin: 22px 0 8px 0;
  font-size: 17px;
  line-height: 1.35;
  color: var(--bso-text);
}
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) .bso-cms-podnadpis strong,
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) .bso-cms-podnadpis b { font-weight: 700; }

/* obrázky: nikdy přes šířku sloupce; fotky (od 320 px zdroje) dostanou
   rámeček a radius jako ostatní plochy webu, malá loga zůstanou nahá */
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) img { max-width: 100%; height: auto; }
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) img.bso-cms-foto {
  border-radius: var(--bso-radius-s);
  background: #f4f3fb;
}

/* vložené video a mapa: poměr stran drží obal, iframe vyplní plochu */
.bso-cms-media {
  width: 100%;
  margin: 0 auto 16px auto;
  background: #f4f3fb;
  border-radius: var(--bso-radius-s);
  overflow: hidden;
}
.bso-cms-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tlačítko uvnitř textu. Migrace veze odkazy s třídami btn btn-default
   z Bootstrapu 3, který téma nemá, takže by zůstaly obyčejným odkazem.
   Dostanou vzhled primárního tlačítka (vzor .bso-btn-primary ze sekce 2),
   jen s pružnou výškou, protože text v nich bývá dlouhý a na mobilu se láme.
   Nadpis, ve kterém odkaz sedí, nesmí tlačítku vnutit svoji velikost. */
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) a.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 46px;
  padding: 10px 26px;
  background: var(--bso-navy);
  border: none;
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-condensed);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #fff !important;
  text-decoration: none !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) a.btn:hover,
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) a.btn:focus {
  background: var(--bso-red);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.28);
}
/* nadpis, který nese jen tlačítko, se chová jako obal, ne jako nadpis */
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) :is(h1, h2, h3, h4):has(> a.btn:only-child) {
  margin: 0 0 16px 0 !important;
}

/* vodorovná linka a citace */
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--bso-border);
}
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) blockquote {
  margin: 0 0 16px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--bso-red);
  color: var(--bso-text);
}

/* ── 17.4 Tabulky ──────────────────────────────────────────────────────── */

/* Tabulka se na mobilu nesmí roztáhnout přes stránku, jinak scrolluje celý
   web do strany. Obal .bso-cms-tabulka (přidává custom.js) má vlastní
   vodorovný scroll a nese rámeček.
   Migrovaný obsah používá tabulky dvěma způsoby a každý chce jinou obranu,
   custom.js je rozliší podle počtu sloupců a délky textu v buňce:
     --data  tři a víc sloupců, tedy skutečná tabulka (ceník dopravy,
             velikostní tabulka). Drží min-width, aby se sloupce nesmáčkly,
             a na úzké obrazovce se scrolluje uvnitř obalu.
     --text  dva sloupce s dlouhým textem, tedy dvousloupcové rozvržení
             (srovnání odstoupení a reklamace). Na mobilu se sloupce
             poskládají pod sebe, vodorovný scroll u souvislého textu nedává
             smysl. */
.bso-cms-tabulka {
  margin: 0 0 16px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius-s);
}
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) table {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14.5px;
}
.bso-cms-tabulka--data table { min-width: 460px; }
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) :is(th, td) {
  padding: 9px 14px;
  border: 1px solid var(--bso-border);
  border-left: 0;
  border-right: 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  color: #55555f;
}
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) th {
  background: #f4f3fb;
  font-weight: 700;
  color: var(--bso-navy-dark);
}
/* svislý šev mezi sloupci; krajní svislé linky nese rámeček obalu */
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) :is(th, td) + :is(th, td) { border-left: 1px solid var(--bso-border); }
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) tbody tr:last-child :is(th, td) { border-bottom: 0; }
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) thead tr:first-child :is(th, td) { border-top: 0; }
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) tbody tr:first-child :is(th, td) { border-top: 0; }
#content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) table p { margin: 0; }

/* ── 17.5 Obsah dokumentu ──────────────────────────────────────────────── */

/* Seznam odkazů na nadpisy. Na desktopu lepivý sloupec vpravo od textu,
   pod 992 px sbalený panel nad textem. Skládá ho inline skript v šabloně
   (aby se sloupec po načtení bundlu nepřeskládal), chování řeší custom.js. */
.bso-cms-obsah {
  margin: 0 0 18px 0;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  overflow: hidden;
}

.bso-cms-obsah-prepinac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #f0f0f5;
  font-family: var(--bso-condensed);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--bso-navy-dark);
  cursor: pointer;
  transition: color var(--bso-prechod);
}
.bso-cms-obsah-prepinac:hover { color: var(--bso-red); }
.bso-cms-obsah-sipka {
  flex-shrink: 0;
  color: var(--bso-muted-2);
  transform: rotate(180deg);
  transition: transform var(--bso-prechod);
}

.bso-cms-obsah-seznam {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.bso-cms-obsah-polozka { margin: 0; }
.bso-cms-obsah-odkaz {
  display: block;
  padding: 6px 16px 6px 14px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.45;
  color: #55555f !important;
  text-decoration: none;
  transition: color var(--bso-prechod), border-color var(--bso-prechod), background var(--bso-prechod);
}
.bso-cms-obsah-odkaz:hover,
.bso-cms-obsah-odkaz:focus { color: var(--bso-red) !important; text-decoration: none; }
.bso-cms-obsah-polozka--niz .bso-cms-obsah-odkaz { padding-left: 28px; font-size: 13px; color: var(--bso-muted) !important; }
/* aktivní sekce (třídu přepíná custom.js podle scrollu) */
.bso-cms-obsah-odkaz.je-aktivni {
  background: #f8f8fc;
  border-left-color: var(--bso-red);
  font-weight: 600;
  color: var(--bso-navy) !important;
}

/* sbalený stav: seznam pryč, šipka dolů */
.bso-cms-obsah--sbaleno .bso-cms-obsah-seznam { display: none; }
.bso-cms-obsah--sbaleno .bso-cms-obsah-prepinac { border-bottom-color: transparent; }
.bso-cms-obsah--sbaleno .bso-cms-obsah-sipka { transform: rotate(0deg); }

@media (min-width: 992px) {
  .bso-cms-obsah {
    position: sticky;
    top: var(--bso-sticky-top);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--bso-sticky-top) - 24px);
    margin: 0;
  }
  .bso-cms-obsah-prepinac { flex: 0 0 auto; }
  .bso-cms-obsah-seznam { flex: 1 1 auto; overflow-y: auto; }
}

/* ── 17.6 Responzivita ─────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .bso-cms-telo > :is(.rte-content, .elementor) { padding: 22px 22px 24px 22px; }
}

@media (max-width: 767.98px) {
  /* titulek stránky o dva stupně níž, stejně jako na blogu */
  #cms .page-header .page-title,
  #cms .page-header .page-title span { font-size: 24px !important; }
  #content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) .bso-cms-kotva { scroll-margin-top: 68px; }
  .bso-cms-obsah-prepinac { font-size: 16px; padding: 11px 14px; }
  .bso-cms-obsah-odkaz { padding: 7px 14px 7px 12px; }
  .bso-cms-obsah-polozka--niz .bso-cms-obsah-odkaz { padding-left: 26px; }
  /* seznam na mobilu nesmí zabrat celou obrazovku, dvanáct položek stačí */
  .bso-cms-obsah-seznam { max-height: 52vh; overflow-y: auto; }
}

@media (max-width: 575.98px) {
  .bso-cms-telo > :is(.rte-content, .elementor) { padding: 18px 16px 20px 16px; }
  #content.page-cms .bso-cms-telo > :is(.rte-content, .elementor) :is(th, td) { padding: 8px 12px; }
  .bso-cms-tabulka--data table { min-width: 420px; }
  /* dvousloupcové rozvržení pod sebe: buňky jako bloky přes celou šířku,
     svislý šev se mění na vodorovný */
  .bso-cms-tabulka--text :is(table, tbody, tr, th, td) { display: block; width: auto !important; }
  .bso-cms-tabulka--text :is(th, td) + :is(th, td) { border-left: 0; border-top: 1px solid var(--bso-border); }
  .bso-cms-tabulka--text tbody tr + tr :is(th, td):first-child { border-top: 1px solid var(--bso-border); }
}


/* ══ 18. COOKIE LIŠTA (dm_cookies) ══════════════════════════════════════ */

/* Malý box vlevo dole, provedení sourozence rozbalovacího košíku v hlavičce:
   bílá karta, rámeček, radius 10, stín 0 12px 32px. Šablona je child override
   themes/baseball-shop/modules/dm_cookies/views/templates/hook/dm_cookies_banner.tpl.

   Kaskáda: modulový modules/dm_cookies/views/css/dm_cookies_new.css je
   v compiled theme.css hned na začátku, custom.css až na konci, takže na
   shodné specificitě vyhráváme. Blok <style> ze šablony (barvy z konfigurace
   modulu) je ale poslední stylesheet v dokumentu a vyhrává on. Proto tu
   NENASTAVUJEME barvy tlačítek ani pozadí zapnutého přepínače, a pozadí
   vypnutého přepínače se píše bez id v selektoru, aby ho nepřebilo. */

/* ── box ── */
#dm-cookie-popup-container .dm-cookie-popup {
  box-sizing: border-box;
  width: 340px;
  max-width: calc(100vw - 40px);
  /* vlastní scroll, aby box nikdy nerostl přes obrazovku */
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 0;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  box-shadow: 0 12px 32px rgba(22, 18, 63, 0.16);
  /* nad lištou menu (z-index 97) i nad panelem košíku (1000) */
  z-index: 1080;
  font-family: var(--bso-base);
  color: #55555f;
  text-align: left;
}
#dm-cookie-popup-container .dm-cookie-popup.position-bottomleft { bottom: 20px; left: 20px; }
#dm-cookie-popup-container .dm-cookie-popup.position-bottomright { bottom: 20px; right: 20px; }
#dm-cookie-popup-container .dm-cookie-popup.position-topleft { top: 20px; left: 20px; }
#dm-cookie-popup-container .dm-cookie-popup.position-topright { top: 20px; right: 20px; }

/* ── záhlaví ── */
#dm-cookie-popup-container .dm-cookie-popup-inner { padding: 14px 16px 0 16px; }
#dm-cookie-popup-container .bso-ck-headline { position: relative; padding-right: 0; }
.bso-ck-title {
  display: block;
  font-family: var(--bso-condensed);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bso-navy-dark);
}
.bso-ck-seam {
  display: block;
  width: 72px;
  height: 8px;
  margin-top: 4px;
  background: var(--bso-sev) no-repeat;
  background-size: 72px 8px;
}
#dm-cookie-popup-container .dm-cookie-popup-sub-headline {
  margin: 8px 0 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #55555f;
}
#dm-cookie-popup-container .dm-cookie-popup-sub-headline a { color: var(--bso-navy); text-decoration: underline; }
#dm-cookie-popup-container .dm-cookie-popup-sub-headline a:hover { color: var(--bso-red) !important; }
/* křížek se ukazuje jen při DM_COOKIES_CLOSE_BUTTON = 1 */
#dm-cookie-popup-container .bso-ck-close {
  position: absolute;
  top: -4px;
  right: 0;
  width: 28px;
  height: 28px;
  font-size: 22px;
  line-height: 1;
  color: var(--bso-muted-2);
}
#dm-cookie-popup-container .bso-ck-close:hover { color: var(--bso-red); }

/* ── skupiny cookies (rozklikávací řádky) ── */
#dm-cookie-popup-container .dm-cookie-popup-lower {
  padding: 10px 16px 2px 16px;
  /* rozbalené popisy skupin nesmí box protáhnout přes obrazovku */
  max-height: min(320px, 38vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d6d6e0 transparent;
}
#dm-cookie-popup-container .dm-cookie-popup-lower::-webkit-scrollbar { width: 4px; }
#dm-cookie-popup-container .dm-cookie-popup-lower::-webkit-scrollbar-track { background: transparent; }
#dm-cookie-popup-container .dm-cookie-popup-lower::-webkit-scrollbar-thumb { background-color: #d6d6e0; border-radius: 2px; }
#dm-cookie-popup-container .dm_cookies_variant { margin: 0; padding: 0; list-style: none; }
#dm-cookie-popup-container .dm_cookies_variant_item {
  margin: 0;
  padding: 7px 0;
  background: transparent;
  border-radius: 0;
  border-top: 1px solid #f0f0f5;
  cursor: pointer;
}
#dm-cookie-popup-container .dm_cookies_variant_item:first-child { border-top: none; }
#dm-cookie-popup-container .dm_cookies_variant_item > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}
#dm-cookie-popup-container .dm_title_group {
  flex: 1 1 auto;
  padding-left: 0;
  font-family: var(--bso-base);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bso-navy-dark);
}
#dm-cookie-popup-container .dm_cookies_more_info {
  margin: 6px 0 2px 50px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--bso-muted);
}

/* šipka jako tenký chevron (parent kreslí plný trojúhelník) */
#dm-cookie-popup-container .dm_arrow {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 0;
  border: none;
  border-right: 2px solid var(--bso-muted-2);
  border-bottom: 2px solid var(--bso-muted-2);
  transform: rotate(45deg);
  transition: transform var(--bso-prechod), margin var(--bso-prechod);
}
#dm-cookie-popup-container .dm_cookies_variant_item.active .dm_arrow { margin-top: 2px; transform: rotate(-135deg); }
#dm-cookie-popup-container .dm_cookies_variant_item:hover .dm_arrow {
  border-right-color: var(--bso-navy);
  border-bottom-color: var(--bso-navy);
}

/* ── přepínač (stejná geometrie jako přepínač dostupnosti ve filtrech) ── */
#dm-cookie-popup-container .switch {
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  min-width: 40px !important;
  margin: 0;
  transform: none;
}
/* bez id v selektoru: zapnutý stav barví blok <style> ze šablony
   (DM_COOKIES_COLOR_SLIDER) selektorem input:checked + .dm_slider */
.dm-cookie-popup .dm_slider { background-color: #d6d6e0; border-radius: 11px; }
#dm-cookie-popup-container .dm_slider:before {
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
#dm-cookie-popup-container input:checked + .dm_slider:before { transform: translateX(18px); }
/* nezbytné cookies: zamčeno a zaškrtnuto */
#dm-cookie-popup-container input:disabled + .dm_slider { opacity: 0.55; cursor: default; }

/* ── tlačítka ── */
#dm-cookie-popup-container .dm-cookie-popup-right {
  margin-top: 10px;
  padding: 12px 16px 0 16px;
  border-top: 1px solid #f0f0f5;
  background: #fafafb;
}
#dm-cookie-popup-container .dm-cookie-popup-buttons {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
#dm-cookie-popup-container .dm-cookie-popup-buttons button {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--bso-radius-s);
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
#dm-cookie-popup-container .bso-ck-btn-primary {
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#dm-cookie-popup-container .bso-ck-btn-light {
  font-family: var(--bso-base);
  font-size: 12.5px;
  font-weight: 600;
}
/* modul si na tlačítkách vynucuje outline: none !important */
#dm-cookie-popup-container .dm-cookie-popup-buttons button:focus-visible {
  outline: 2px solid var(--bso-navy) !important;
  outline-offset: 2px;
}

/* ── odkaz na zásady ── */
#dm-cookie-popup-container .dm-cookie-popup-cms-link {
  margin: 0;
  padding: 8px 16px 12px 16px;
  background: #fafafb;
  border-radius: 0 0 var(--bso-radius) var(--bso-radius);
  text-align: center;
  font-size: 11.5px;
}
#dm-cookie-popup-container .dm-cookie-popup-cms-link a {
  color: var(--bso-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#dm-cookie-popup-container .dm-cookie-popup-cms-link a:hover { color: var(--bso-red) !important; }

/* ── odkaz na znovuvyvolání nastavení v patičce ── */
#footer #dm_set_cookie_new { cursor: pointer; }

/* ── mobil: box přes šířku dole, tlačítka pod sebou ── */
@media (max-width: 575.98px) {
  /* pod 600 px vnucuje JS modulu třídu position-center, proto se přebíjí
     i ta včetně jejího transform */
  #dm-cookie-popup-container .dm-cookie-popup,
  #dm-cookie-popup-container .dm-cookie-popup.position-center,
  #dm-cookie-popup-container .dm-cookie-popup.position-bottomleft,
  #dm-cookie-popup-container .dm-cookie-popup.position-bottomright,
  #dm-cookie-popup-container .dm-cookie-popup.position-topleft,
  #dm-cookie-popup-container .dm-cookie-popup.position-topright {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100% - 24px);
    overflow: auto;
    transform: none;
  }
  #dm-cookie-popup-container .dm-cookie-popup-inner { padding: 16px 16px 0 16px; }
  #dm-cookie-popup-container .dm-cookie-popup-lower {
    padding: 12px 16px 2px 16px;
    max-height: min(340px, 42vh);
  }
  #dm-cookie-popup-container .dm-cookie-popup-right { padding: 14px 16px 0 16px; }
  #dm-cookie-popup-container .dm-cookie-popup-cms-link { padding: 10px 16px 14px 16px; font-size: 12px; }
  /* na mobilu se nezmenšuje na úkor čitelnosti a trefitelnosti */
  #dm-cookie-popup-container .bso-ck-title { font-size: 19px; }
  #dm-cookie-popup-container .dm-cookie-popup-sub-headline { font-size: 13px; }
  #dm-cookie-popup-container .dm_title_group { font-size: 13px; }
  #dm-cookie-popup-container .dm_cookies_more_info { font-size: 12px; }
  #dm-cookie-popup-container .dm_cookies_variant_item { padding: 10px 0; }
  #dm-cookie-popup-container .dm-cookie-popup-buttons { flex-direction: column; gap: 10px; }
  /* flex: 1 1 0 z desktopu by ve sloupcovém směru určovalo VÝŠKU */
  #dm-cookie-popup-container .dm-cookie-popup-buttons button {
    flex: 0 0 auto;
    width: 100%;
    height: 46px;
    font-size: 14px;
  }
  #dm-cookie-popup-container .dm-cookie-popup-buttons button.bso-ck-btn-primary { font-size: 17px; }
  /* primární souhlas nahoře, pod ním odmítnutí */
  #dm-cookie-popup-container .dm-cookie-popup-decline-cookies { order: 2; }
  #dm-cookie-popup-container .dm-cookie-popup-accept-cookies,
  #dm-cookie-popup-container .dm-cookie-popup-accept-cookies-save-group { order: 1; }
}


/* ══ 19. KONTAKTNÍ STRÁNKA (Kontakt.dc.html) ════════════════════════════ */

/* Stránka /napiste-nam. Šablony:
     themes/baseball-shop/templates/contact.tpl (celá stránka),
     themes/baseball-shop/modules/contactform/views/templates/widget/contactform.tpl.
   Data dodává override/controllers/front/ContactController.php,
   chování (odznak otevírací doby, mapa po souhlasu, příloha) custom.js.

   Skladba je stejná jako na ostatních vlastních stránkách: bílá karta
   s rámečkem a radiusem, nadpis se švem míčku, štítek verzálkami nad ním. */

/* ── 19.1 Sdílené prvky stránky ────────────────────────────────────────── */

/* Šev míčku jako samostatný prvek (jinde na webu je z ::after nadpisu,
   tady ho šablona staví jako <span>, aby šel dát i pod nadpis v pruhu). */
.bso-sev {
  display: block;
  width: 110px;
  height: 11px;
  background: var(--bso-sev) no-repeat;
}
.bso-sev--svetly { background-image: var(--bso-sev-svetly); }

.bso-kontakt .bso-karta {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
}

.bso-kontakt-stitek {
  display: block;
  font-family: var(--bso-base);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bso-red);
}
.bso-kontakt-stitek--svetly { color: var(--bso-red-light); }

.bso-kontakt-h2 {
  font-family: var(--bso-condensed);
  font-size: 32px;
  font-weight: 800 !important;
  line-height: 1.1;
  color: var(--bso-navy-dark);
  margin: 8px 0 0 0;
  text-transform: uppercase;
}
.bso-kontakt-h2 + .bso-sev { margin-top: 12px; }

.bso-kontakt-h3 {
  font-family: var(--bso-condensed);
  font-size: 18px;
  font-weight: 700 !important;
  color: var(--bso-navy-dark);
  margin: 0;
  text-transform: uppercase;
}

.bso-kontakt-pozn {
  font-size: 12px;
  line-height: 1.5;
  color: var(--bso-muted);
  margin: 12px 0 0 0;
}
.bso-kontakt-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #55555f;
  margin: 12px 0 14px 0;
}

/* tlačítka stránky: CTA (červené), světlé (na mapě), obrysové, červené obrysové */
.bso-kontakt-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--bso-radius-s);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--bso-prechod), color var(--bso-prechod), box-shadow var(--bso-prechod);
}
.bso-kontakt-btn:focus-visible { outline: 2px solid var(--bso-navy); outline-offset: 2px; }

.bso-kontakt-btn--cta {
  padding: 13px 30px;
  background: var(--bso-red);
  border: none;
  font-family: var(--bso-condensed);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff !important;
}
.bso-kontakt-btn--cta:hover { background: var(--bso-red-hover); color: #fff !important; }
.bso-kontakt-btn--cta[disabled] { background: #c9c9d6; cursor: not-allowed; }

.bso-kontakt-btn--obrys {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--bso-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--bso-navy) !important;
}
.bso-kontakt-btn--obrys:hover { background: #f4f3fb; color: var(--bso-navy) !important; }

.bso-kontakt-btn--cervena {
  padding: 10px 18px;
  background: #fff;
  border: 1.5px solid var(--bso-red);
  font-family: var(--bso-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bso-red) !important;
}
.bso-kontakt-btn--cervena:hover { background: var(--bso-red); color: #fff !important; }

.bso-kontakt-btn--svetly {
  padding: 11px 22px;
  background: #fff;
  border: 1px solid var(--bso-border);
  font-family: var(--bso-condensed);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bso-navy) !important;
  box-shadow: 0 6px 18px rgba(22, 18, 63, 0.12);
}
.bso-kontakt-btn--svetly:hover { background: var(--bso-red); border-color: var(--bso-red); color: #fff !important; }

/* ── 19.2 Hlavička stránky ─────────────────────────────────────────────── */

/* Navy pruh jde od okraje k okraji okna, obsah ale zůstává v obsahové
   mřížce. Proto se full-bleed dělá pozadím v ::before (posun 50 % − 50vw),
   ne posunem celého prvku: text se pak nemusí nijak dopočítávat. */
.bso-kontakt-hero {
  position: relative;
  padding: 42px 0 46px 0;
  margin-bottom: 28px;
}
.bso-kontakt-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--bso-navy-footer)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='400' viewBox='0 0 420 400'%3E%3Ccircle cx='320' cy='90' r='159' fill='none' stroke='%23ff5a63' stroke-opacity='0.20' stroke-width='2' stroke-dasharray='10 8'/%3E%3Ccircle cx='295' cy='155' r='94' fill='none' stroke='%23ff5a63' stroke-opacity='0.14' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E")
    no-repeat right top;
}
.bso-kontakt-hero-inner {
  position: relative;
  max-width: 720px;
}
.bso-kontakt-h1 {
  font-family: var(--bso-condensed);
  font-size: 46px;
  font-weight: 800 !important;
  line-height: 1.02;
  color: #fff !important;
  margin: 10px 0 0 0;
  text-transform: uppercase;
}
.bso-kontakt-h1 + .bso-sev { margin-top: 14px; }
.bso-kontakt-perex {
  margin: 16px 0 0 0;
  max-width: 620px;
  font-size: 16.5px;
  line-height: 1.55;
  color: #c8c5e8;
}

/* obsah stránky navazuje rovnou na pruh, patička obsahu je vypnutá */
#contact #content.bso-kontakt { padding: 0; }
#contact .page-footer { display: none; }

/* ── 19.3 Tři rychlé kontakty ──────────────────────────────────────────── */

.bso-kontakt-karty {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.bso-kontakt-karta {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 24px 22px 24px;
  display: flex;
  flex-direction: column;
}
.bso-kontakt-karta-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bso-kontakt-ikona {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f4f3fb;
  color: var(--bso-navy);
}
.bso-kontakt-ikona--cervena {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fdecec;
  color: var(--bso-red);
}
.bso-kontakt-karta-titulek {
  font-family: var(--bso-condensed);
  font-size: 19px;
  font-weight: 700 !important;
  color: var(--bso-navy-dark);
  margin: 0;
  text-transform: uppercase;
}
.bso-kontakt-hodnota {
  display: block;
  margin-top: 16px;
  font-family: var(--bso-condensed);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--bso-navy) !important;
  text-decoration: none;
  word-break: break-word;
}
a.bso-kontakt-hodnota:hover { color: var(--bso-red) !important; }
/* e-mail je delší než telefon a v úzké kartě by přetekl */
.bso-kontakt-hodnota--mail { font-size: 23px; }
.bso-kontakt-hodnota-2 {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #55555f !important;
  text-decoration: none;
}
.bso-kontakt-hodnota--adresa + .bso-kontakt-hodnota-2 { margin-top: 6px; font-weight: 400; }
a.bso-kontakt-hodnota-2:hover { color: var(--bso-red) !important; }

/* odznak: zelený „otevřeno", šedý „zavřeno", navy a červený jako informace */
.bso-kontakt-odznak {
  align-self: flex-start;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f0f0f5;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bso-muted);
}
.bso-kontakt-odznak[hidden] { display: none; }
.bso-kontakt-odznak-tecka {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.bso-kontakt-odznak--otevreno { background: #eaf7ee; color: #1b7a3d; }
.bso-kontakt-odznak--navy { background: #f4f3fb; color: var(--bso-navy); }
.bso-kontakt-odznak--cervena { background: #fdecec; color: var(--bso-red-hover); }
/* poznámka pod odznakem se přilepí ke spodní hraně, aby karty lícovaly */
.bso-kontakt-karta .bso-kontakt-pozn { margin-top: auto; padding-top: 12px; }

/* ── 19.4 Prodejna: mapa, otevírací doba, cesta ────────────────────────── */

.bso-kontakt-sekce { margin-top: 44px; }
.bso-kontakt-prodejna {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}
.bso-kontakt-mapa {
  flex: 0 0 52%;
  max-width: 52%;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bso-kontakt-mapa-plocha {
  position: relative;
  flex: 1 1 auto;
  min-height: 330px;
  background: #e6eaf0;
}
.bso-kontakt-mapa-plocha iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  border: 0;
}

/* Schematický náhled: ulice a bloky jsou nakreslené v CSS (procenta, aby
   schéma drželo v každé šířce), žádný obrázek a žádný požadavek ven. */
.bso-mapa-schema {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 19%, #fff 19% 22.7%, transparent 22.7% 53.4%, #fff 53.4% 56.3%, transparent 56.3%),
    linear-gradient(180deg, transparent 0 29%, #fff 29% 35.8%, transparent 35.8% 75.8%, #fff 75.8% 80.6%, transparent 80.6%),
    #e6eaf0;
}
.bso-mapa-blok {
  position: absolute;
  background: #d3d9e3;
  border-radius: 3px;
}
.bso-mapa-blok--a { left: 22.7%; top: 35.8%; width: 30.7%; height: 40%; }
.bso-mapa-blok--b { left: 56.3%; top: 35.8%; width: 24.3%; height: 40%; }
.bso-mapa-blok--c { left: 22.7%; top: 80.6%; width: 30.7%; height: 19.4%; }
.bso-mapa-popis {
  position: absolute;
  font-size: 11.5px;
  font-weight: 600;
  color: #8b93a2;
  white-space: nowrap;
}
.bso-mapa-popis--ulice1 { left: 3.2%; top: 3.6%; }
.bso-mapa-popis--ibc { left: 24.3%; top: 38.8%; }
.bso-mapa-popis--prikop { left: 58%; top: 38.8%; }
.bso-mapa-zastavka {
  position: absolute;
  left: 15.5%;
  top: 71.5%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 600;
  color: var(--bso-navy);
  white-space: nowrap;
}
.bso-mapa-pin {
  position: absolute;
  left: 47.9%;
  top: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bso-mapa-pin-kolecko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bso-red);
  color: #fff;
  box-shadow: 0 6px 18px rgba(227, 6, 19, 0.45);
}
.bso-mapa-pin-stitek {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--bso-navy-footer);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Zámek nad náhledem mapy: přes celou plochu závoj a v něm jedna karta
   s tlačítkem a vysvětlením. Dřív tlačítko i věta plavaly samostatně u spodní
   hrany a praly se o místo s kolíčkem prodejny a se štítkem zastávky. */
.bso-mapa-souhlas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(238, 240, 245, 0.66);
  backdrop-filter: blur(1px);
  text-align: center;
}
.bso-mapa-souhlas-karta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  padding: 18px 22px 16px;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius-m);
  background: #fff;
  box-shadow: 0 12px 32px rgba(22, 18, 63, 0.16);
}
.bso-mapa-souhlas-text {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--bso-muted);
}

.bso-kontakt-mapa-pata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--bso-border);
}
.bso-kontakt-mapa-adresa { font-size: 13.5px; color: #55555f; }

.bso-kontakt-prodejna-sloupec {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bso-kontakt-blok { padding: 20px 22px; }
.bso-kontakt-blok--svetly { background: #f4f3fb; border-color: #e0dff0; }
.bso-kontakt-blok-head { display: flex; align-items: center; gap: 10px; }

.bso-kontakt-hodiny { margin-top: 14px; }
.bso-kontakt-hodiny-radek {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f0f5;
}
.bso-kontakt-hodiny-den { font-size: 14.5px; font-weight: 600; color: var(--bso-text); }
.bso-kontakt-hodiny-cas { font-size: 14.5px; font-weight: 700; color: var(--bso-navy); }
.bso-kontakt-hodiny-radek--ostatni { border-bottom: none; }
.bso-kontakt-hodiny-radek--ostatni .bso-kontakt-hodiny-den { font-weight: 400; color: #55555f; }
.bso-kontakt-hodiny-radek--ostatni .bso-kontakt-hodiny-cas { font-size: 13.5px; font-weight: 400; color: #55555f; }

.bso-kontakt-cesta {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.bso-kontakt-cesta-polozka { display: flex; gap: 11px; }
.bso-kontakt-cesta-ikona { flex: none; margin-top: 2px; color: var(--bso-red); }
.bso-kontakt-cesta-titulek { font-size: 13.5px; font-weight: 700; color: var(--bso-navy-dark); }
.bso-kontakt-cesta-text { font-size: 13.5px; line-height: 1.5; color: #55555f; }

/* ── 19.5 Formulář a postranní sloupec ─────────────────────────────────── */

.bso-kontakt-formular {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  align-items: flex-start;
}
.bso-kontakt-form {
  flex: 1 1 auto;
  min-width: 0;
  padding: 26px 28px 28px 28px;
}
.bso-kontakt-bocni {
  flex: 0 0 372px;
  width: 372px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bso-form-radek { display: flex; gap: 16px; }
.bso-form-radek > .bso-form-pole { flex: 1 1 0; min-width: 0; }
.bso-form-pole + .bso-form-pole,
.bso-form-radek + .bso-form-pole { margin-top: 16px; }
.bso-form-popisek {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bso-navy-dark);
}
.bso-form-volitelne { font-weight: 500; color: #8b8b99; }

.bso-kontakt .bso-form-vstup {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-base);
  font-size: 14.5px;
  color: var(--bso-text);
  box-shadow: none;
}
.bso-kontakt .bso-form-textarea {
  height: 132px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
.bso-kontakt .bso-form-vstup::placeholder { color: #9a9aa8; }
.bso-kontakt .bso-form-vstup:focus {
  border-color: var(--bso-navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 39, 131, 0.10);
}

/* select: vlastní šipka, nativní se schová */
.bso-form-select { position: relative; }
.bso-form-select svg {
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -6px;
  color: #8b8b99;
  pointer-events: none;
}
.bso-kontakt .bso-form-select select {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 36px 0 14px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius-s);
  font-family: var(--bso-base);
  font-size: 14.5px;
  color: var(--bso-text);
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
}
.bso-kontakt .bso-form-select select:focus {
  border-color: var(--bso-navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 39, 131, 0.10);
}

/* příloha: přerušovaný rám, do kterého jde soubor přetáhnout */
.bso-form-priloha {
  position: relative;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px dashed #d8d8e2;
  border-radius: var(--bso-radius-s);
  background: #fafafd;
  color: var(--bso-navy);
  transition: border-color var(--bso-prechod), background var(--bso-prechod);
}
.bso-form-priloha.is-nad { border-color: var(--bso-navy); background: #f4f3fb; }
.bso-form-priloha.is-plna { border-style: solid; border-color: var(--bso-navy); background: #f4f3fb; }
.bso-form-priloha-popisek {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  color: #55555f;
  cursor: pointer;
}
.bso-form-priloha-vyber {
  margin-left: 4px;
  font-weight: 700;
  color: var(--bso-navy);
  border-bottom: 1px solid var(--bso-navy);
}
/* vstup musí zůstat dosažitelný z klávesnice, proto ne display: none */
.bso-form-priloha-vstup {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.bso-form-priloha-vstup:focus-visible + .bso-form-priloha-popisek,
.bso-form-priloha:focus-within { outline: 2px solid var(--bso-navy); outline-offset: 2px; }

/* Souhlas se zpracováním údajů kreslí modul psgdpr; samotné zaškrtávátko
   stylujeme jednotně pro celý web v sekci 20, tady zbývá jen umístění. */
.bso-form-souhlas { margin-top: 18px; }
.bso-form-souhlas .gdpr_consent { margin: 0; }
.bso-form-souhlas p { margin: 0; display: inline; }

.bso-form-pata {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.bso-form-pozn { font-size: 13px; color: var(--bso-muted); }

.bso-form-hlaska {
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: var(--bso-radius-s);
  font-size: 14px;
}
.bso-form-hlaska ul { margin: 0; padding: 0; list-style: none; }
.bso-form-hlaska li + li { margin-top: 6px; }
.bso-form-hlaska--ok { background: #eaf7ee; color: #1b7a3d; }
.bso-form-hlaska--chyba { background: #fdecec; color: var(--bso-red-hover); }

.bso-kontakt-odkazy {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bso-kontakt-odkaz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius-s);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bso-navy-dark) !important;
  text-decoration: none;
  transition: border-color var(--bso-prechod), box-shadow var(--bso-prechod);
}
.bso-kontakt-odkaz svg { flex: none; color: var(--bso-red); }
.bso-kontakt-odkaz:hover {
  border-color: var(--bso-red);
  box-shadow: var(--bso-stin-hover);
  color: var(--bso-navy-dark) !important;
}
.bso-kontakt-blok--svetly .bso-kontakt-pozn { margin: 8px 0 0 0; }

/* ── 19.6 Fakturační údaje ─────────────────────────────────────────────── */

.bso-kontakt-fakturace {
  display: flex;
  gap: 40px;
  padding: 26px 28px;
  border-radius: var(--bso-radius);
  background: var(--bso-navy-footer);
}
.bso-kontakt-fakturace-firma { flex: 1 1 0; min-width: 0; }
.bso-kontakt-fakturace-nazev {
  font-family: var(--bso-condensed);
  font-size: 22px;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 8px 0 0 0;
  text-transform: uppercase;
}
.bso-kontakt-fakturace-adresa {
  margin: 10px 0 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #c8c5e8;
}
.bso-kontakt-fakturace-udaje {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bso-kontakt-fakturace-radek {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200, 197, 232, 0.16);
}
.bso-kontakt-fakturace-radek:last-child { border-bottom: none; padding-bottom: 0; }
.bso-kontakt-fakturace-radek dt { font-size: 13.5px; font-weight: 400; color: #8f8ab8; }
.bso-kontakt-fakturace-radek dd { margin: 0; font-size: 14px; font-weight: 600; color: #fff; text-align: right; }

/* ── 19.7 Responzivita ─────────────────────────────────────────────────── */

/* pod 992 px: tři karty pod sebe, mapa nad údaji, postranní sloupec
   formuláře pod formulářem (postup podle zadání návrhu) */
@media (max-width: 991.98px) {
  .bso-kontakt-karty { flex-direction: column; gap: 16px; }
  .bso-kontakt-karta .bso-kontakt-pozn { margin-top: 12px; padding-top: 0; }
  .bso-kontakt-prodejna { flex-direction: column; }
  .bso-kontakt-mapa { flex: 1 1 auto; max-width: none; width: 100%; }
  .bso-kontakt-formular { flex-direction: column; }
  .bso-kontakt-bocni { flex: 1 1 auto; width: 100%; }
  .bso-kontakt-h1 { font-size: 40px; }
  .bso-kontakt-h2 { font-size: 28px; }
}

@media (max-width: 767.98px) {
  .bso-kontakt-hero { padding: 30px 0 32px 0; margin-bottom: 22px; }
  .bso-kontakt-h1 { font-size: 34px; }
  .bso-kontakt-perex { font-size: 15px; }
  .bso-kontakt-sekce { margin-top: 34px; }
  .bso-kontakt-karta { padding: 20px; }
  .bso-kontakt-hodnota { font-size: 24px; }
  .bso-kontakt-hodnota--mail { font-size: 19px; }
  .bso-kontakt-mapa-plocha { min-height: 260px; }
  .bso-kontakt-mapa-plocha iframe { min-height: 260px; }
  .bso-kontakt-mapa-pata { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* zůstává absolutně u spodní hrany náhledu; statické umístění by ho
     v kartě s overflow: hidden odřízlo */
  .bso-mapa-souhlas { padding: 12px; }
  .bso-mapa-souhlas-karta { gap: 8px; padding: 14px 16px 12px; }
  .bso-kontakt-btn--svetly { padding: 9px 18px; font-size: 15px; }
  .bso-mapa-souhlas-text { font-size: 11px; padding: 5px 10px; }
  .bso-kontakt-form { padding: 20px; }
  .bso-form-radek { flex-direction: column; gap: 0; }
  .bso-form-radek > .bso-form-pole + .bso-form-pole { margin-top: 16px; }
  .bso-kontakt-fakturace { flex-direction: column; gap: 20px; padding: 22px 20px; }
  .bso-kontakt-fakturace-udaje { padding-top: 0; }
  .bso-kontakt-btn--cta { width: 100%; }
  .bso-form-pata { gap: 12px; }
}

/* nejužší mobil: schéma mapy je pod 400 px nečitelné, popisky ulic pryč */
@media (max-width: 479.98px) {
  .bso-mapa-popis { display: none; }
  .bso-mapa-zastavka { font-size: 10px; padding: 3px 7px; }
  .bso-mapa-pin-kolecko { width: 34px; height: 34px; }
}


/* ══ 20. SOUHLASY GDPR (psgdpr) ═════════════════════════════════════════ */

/* Zaškrtávátko souhlasu kreslí modul psgdpr přes hook displayGDPRConsent,
   šablona je z parenta (themes/warehouse/modules/psgdpr/.../displayGDPRConsent.tpl)
   a je pro všechna místa stejná: obal `#gdpr_consent_<id_modulu>`, uvnitř
   `.custom-checkbox` s inline `display: flex`, v něm `<label>` s průhledným
   inputem, spanem čtverečku a spanem textu.

   Vykresluje se na pěti místech (id modulu v závorce): zpravodaj v patičce
   (58, na každé stránce), hodnocení produktu v modálním okně (26), box hlídání
   dostupnosti na detailu nedostupného produktu (56), kontaktní formulář (21),
   komentář pod článkem na blogu (100, zapíná se v nastavení ph_simpleblog)
   a přihlášení k odběru vložené přes Elementor (84).

   Geometrie je stejná jako u souhlasů v pokladně (12.4) a v registraci (15.3),
   tedy 18px čtvereček, rámeček 2px, rádius 4, zaškrtnutý červený s bílou
   fajfkou. Warehouse čtvereček dělá 16px s vnitřním stínem a fajfku umisťuje
   absolutně, reset proto musí pokrýt obojí; `mr-2` ze šablony je bootstrapí
   `!important`, taky se přebíjí. */

[id^="gdpr_consent_"] .custom-checkbox {
  position: relative;
  margin: 0;
  padding: 0;
}
[id^="gdpr_consent_"] .custom-checkbox label.psgdpr_consent_message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-family: var(--bso-base);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  color: var(--bso-text);
  cursor: pointer;
}
/* průhledný input zůstává absolutní (Warehouse), jen kopíruje velikost pole */
[id^="gdpr_consent_"] .custom-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0 0;
}
[id^="gdpr_consent_"] .custom-checkbox input[type="checkbox"] + span {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 1px 0 0 0 !important;
  padding: 0;
  border: 2px solid #cfcfdd !important;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  line-height: 1;
  transition: border-color var(--bso-prechod), background var(--bso-prechod);
}
[id^="gdpr_consent_"] .custom-checkbox input[type="checkbox"]:checked + span {
  border-color: var(--bso-red) !important;
  background: var(--bso-red);
}
[id^="gdpr_consent_"] .custom-checkbox input[type="checkbox"] + span .psgdpr_consent_icon {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0;
  display: none;
  font-size: 11px;
  line-height: 1;
  color: #fff;
}
[id^="gdpr_consent_"] .custom-checkbox input[type="checkbox"]:checked + span .psgdpr_consent_icon { display: block; }
/* text zabírá zbytek řádku a smí se zalomit i uvnitř dlouhého slova */
[id^="gdpr_consent_"] .custom-checkbox label.psgdpr_consent_message > span + span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
[id^="gdpr_consent_"] .psgdpr_consent_message a {
  color: var(--bso-navy);
  text-decoration: underline;
}
[id^="gdpr_consent_"] .psgdpr_consent_message a:hover { color: var(--bso-red); }
/* focus z klávesnice: input je průhledný, obrys proto nese čtvereček */
[id^="gdpr_consent_"] .custom-checkbox input[type="checkbox"]:focus-visible + span {
  outline: 2px solid var(--bso-navy);
  outline-offset: 2px;
}

/* Patička je tmavě navy: bílý čtvereček by na ní svítil, text v --bso-text
   by nebyl čitelný. Zaškrtnutý stav zůstává červený jako všude jinde. */
#footer [id^="gdpr_consent_"] .custom-checkbox label.psgdpr_consent_message {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
#footer [id^="gdpr_consent_"] .custom-checkbox input[type="checkbox"] + span {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.08);
}
#footer [id^="gdpr_consent_"] .custom-checkbox input[type="checkbox"]:checked + span {
  border-color: var(--bso-red) !important;
  background: var(--bso-red);
}
#footer [id^="gdpr_consent_"] .psgdpr_consent_message a { color: #fff; }
#footer [id^="gdpr_consent_"] .psgdpr_consent_message a:hover { color: var(--bso-red-light); }
#footer [id^="gdpr_consent_"] .custom-checkbox input[type="checkbox"]:focus-visible + span {
  outline-color: #fff;
}
/* Sloupec zpravodaje je `col-md-auto`, jeho šířku tedy určuje nejširší obsah.
   Souhlas se bez omezení vysází na jeden řádek a sloupec podle něj naroste:
   měřeno na 1440 px vyskočil z 263 px na 530 px v češtině a na 716 px
   v bulharštině, a o to se zúžily sloupce vedle. Warehouse na to pamatuje
   (`#footer-container-main.footer-style-1 .ps-emailsubscription-block
   .gdpr_module { max-width: 240px }`), jenže psgdpr 1.4.3 dává obalu třídu
   `gdpr_module_<id>` s číslem modulu, na kterou parentí selektor nesedne.
   Stejný strop proto dorovnáváme podle id; drží se hodnoty parenta, aby
   souhlas lícoval s větou o odhlášení odběru nad ním. */
#footer .ps-emailsubscription-block [id^="gdpr_consent_"] { max-width: 240px; }


/* ─────────────────────────────────────────────────────────────────────────
   21. Slevy: odznak u ceny, odpočet a fazeta Výběr
   ───────────────────────────────────────────────────────────────────────── */

/* ── 21.1 Odznak se slevou u ceny ──────────────────────────────────────────
   Odznak na dlaždici (.product-flag.discount, sekce 4) je žlutý záměrně.
   Odznak u ceny na detailu produktu ale zůstával ve výchozím vzhledu
   Warehouse, takže vedle něj vypadal jako cizí prvek. Mluví teď stejným
   jazykem: stejná žlutá, stejné navy písmo, stejné zaoblení. */
.badge-discount.discount-percentage,
.product-price-block .discount-percentage {
  background: var(--bso-zluta);
  color: var(--bso-navy-dark);
  font-family: var(--bso-base);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
  border: 0;
  white-space: nowrap;
}

/* ── 21.2 Odpočet do konce slevy ───────────────────────────────────────────
   Modul iqitcountdown kreslí odpočet jako plný žlutý blok se stejnou
   sytostí jako odznak slevy, takže na kartě soupeřil o pozornost s cenou.
   Odpočet je doplňková informace, ne hlavní sdělení, drží proto světlejší
   podklad a barvu si bere z odznaku, aby bylo poznat, že spolu souvisí.

   Ikona hodin se v modulu točí (fa-spin). Na výpisu se dvaceti kartami je
   to dvacet nekonečných animací naráz; zastavujeme ji a respektujeme
   i nastavení "omezit pohyb" v systému. */
.price-countdown-wrapper { margin-top: 8px; }

.price-countdown.badge-discount,
.price-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 180, 0, 0.14);
  color: var(--bso-navy-dark);
  border: 1px solid rgba(255, 180, 0, 0.45);
  border-radius: var(--bso-radius-s);
  padding: 6px 10px;
  font-family: var(--bso-base);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price-countdown .price-countdown-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bso-navy-dark);
  font-weight: 700;
}

/* Ikona hodin: bez rotace, tlumenější než text. */
.price-countdown .fa-clock-o,
.price-countdown .fa-spin {
  animation: none !important;
  opacity: 0.7;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .price-countdown * { animation: none !important; }
}

/* Na detailu produktu má odpočet víc místa, může být o stupeň větší. */
#product .price-countdown { font-size: 14px; padding: 8px 12px; }

/* ── 21.4 Stejná výška produktových karet ──────────────────────────────────
   Karta se slevou nese o řádek víc (odpočet), takže byla vyšší než sousedé
   a tlačítka "Do košíku" nebyla v jedné lince. Řeší se to protažením karet
   na výšku nejvyšší z řady a přišpendlením akční části ke dnu; odpočet pak
   přidá místo doprostřed, ne pod tlačítko.

   Swiper dává slajdům pevnou výšku podle prvního z nich, proto height: auto
   a stretch na obalu. Scopováno na produktové karusely, ať se to nedotkne
   karuselu značek (sekce 9), který má vlastní geometrii. */
.products.products-grid .swiper-wrapper { align-items: stretch; }
.products.products-grid .swiper-slide { height: auto; }

.products-grid .product-miniature,
.products-grid .js-product-miniature-wrapper {
  display: flex;
  flex-direction: column;
}

.products-grid .product-miniature .product-description {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Název může být na jeden i dva řádky; pružná mezera pod ním srovná zbytek. */
.products-grid .product-miniature .bso-mini-meta { margin-top: auto; }

/* Akční řádek (množství a tlačítko) drží u dna karty. */
.products-grid .product-miniature .bso-mini-actions { margin-top: 10px; }

/* Mezi slajdem a kartou je ještě obal js-product-miniature-wrapper; bez
   protažení i jeho se karta na výšku slajdu nenatáhne a rovnání nefunguje.
   Řetěz je: .swiper-slide > .js-product-miniature-wrapper > .product-miniature */
.products-grid .swiper-slide > .js-product-miniature-wrapper { height: 100%; }
.products-grid .js-product-miniature-wrapper > .product-miniature { flex: 1 1 auto; }

/* ── 21.5 Celá dlaždice jako odkaz ─────────────────────────────────────────
   Widget nadpisu v Elementoru obaluje odkazem jen samotný text, takže na
   kartách "Vyberte kategorii" a "Nakupujte podle hry" reagovala na klik jen
   ta dvě tři slova, ne celá karta. Uživatel přitom míří na obrázek.

   Řeší se to roztažením klikací plochy odkazu přes celou kartu přes ::after,
   ne obalením karty dalším <a>: markup přichází z Elementoru a ten by se při
   dalším uložení homepage přepsal. Karty už position: relative mají.

   z-index 1 drží plochu pod textem popisku (ten má z-index 1 taky a je
   deklarovaný později), takže se text dá normálně označit myší. */
.bso-kat-card .elementor-heading-title a::after,
.bso-hra-tile .elementor-heading-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Kurzor ruky nad celou kartou, ať je proklik poznat i před kliknutím. */
.bso-kat-card > .elementor-column-wrap.elementor-element-populated,
.bso-hra-tile > .elementor-column-wrap.elementor-element-populated { cursor: pointer; }

/* ── 21.6 Dodací lhůta pod cenou ───────────────────────────────────────────
   `.tax-shipping-delivery-label` je drobný popisek "S DPH" vedle ceny, jenže
   modul dostupnosti do něj vkládá i celou dodací lhůtu ("(2 ks) Doručení do
   2 dnů. | (5 ks) U dodavatele…"). Dohromady to přeteklo a dlouhá věta se
   zalomila pod číslo ceny, takže vypadala jako nechtěné odsazení.

   Popisek daně zůstává u ceny, dodací lhůta se odsune na vlastní řádek pod
   ni. Nemění se markup, ten patří cizímu modulu.

   Selektor musí přebít `.product-prices > div:not(.bso-pp-meta)` výše (ten dává
   inline-block a má specificitu 0,2,1); proto `> div.tax-...` (taky 0,2,1) a
   protože je v souboru později, vyhraje. Bez toho se dodací lhůta zalomí zpět
   na řádek s cenou a slevou. */
.product-prices > div.tax-shipping-delivery-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.product-prices .tax-shipping-delivery-label .delivery-information {
  flex: 1 0 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bso-border);
  font-size: 13px;
  line-height: 1.55;
  color: var(--bso-text);
}

/* Oddělovač "|" mezi skladem a dodavatelem je v textu z modulu; dáme mu
   vzduch, ať se dvě různá sdělení nelepí na sebe. */
.product-prices .delivery-information { word-spacing: 0.03em; }


/* ─────────────────────────────────────────────────────────────────────────
   22. Nejprodávanější v kategorii (dm_bestsellersproducts)
   ─────────────────────────────────────────────────────────────────────────
   Kompaktní box nad výpisem, ne druhý výpis. Drží se vedle sebe na jednom
   řádku: pořadí, miniatura, název a cena. Popis se schválně nezobrazuje,
   u tohohle katalogu je dlouhý a z boxu dělal plnohodnotný seznam.

   Rozvržení je flex, ne grid: modul dává řádkům vlastní `display: flex`
   a `float` s !important a markup se mezi prvními třemi položkami a těmi
   donačtenými liší. Grid se čtyřmi pevnými sloupci na to reagoval tak, že
   se cena vysunula do páté, dopočítané kolonky a text dostupnosti se lámal
   po písmenech. Flex s pevnými šířkami je proti takovému markupu odolný. */

#best-sellers_in_cat {
  background: #fff;
  border: 1px solid var(--bso-border);
  border-radius: var(--bso-radius);
  padding: 16px 18px !important;   /* !important kvůli .card-block z Bootstrapu */
  /* Vlastní odsazení žádné: výpis `#products` si pod boxem drží svých 15 px,
     což odpovídá rozestupu 16 px mezi boxy v levém sloupci. Cokoli navíc by
     mezeru zdvojilo. */
  margin-bottom: 0;
}

/* Modul sype kolem svého boxu čtyři <br>: jeden nad ním a tři pod ním.
   Ten horní box odsazoval o 21 px, takže nelícoval s boxem Kategorie
   v levém sloupci, spodní tři nafukovaly mezeru nad výpisem produktů.
   Cílíme přesně na ně, ne na `#main > br`, aby se rušením prázdných řádků
   nerozbil obsah jiných výpisů. */
#main br:has(+ #best-sellers_in_cat),
#best-sellers_in_cat ~ br {
  display: none;
}

#best-sellers_in_cat .block_content { margin: 0; padding: 0; }
#best-sellers_in_cat .block_content > *:last-child { margin-bottom: 0; }

#best-sellers_in_cat > .h2 {
  font-family: var(--bso-condensed);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bso-navy-dark);
  margin: 0 0 10px;
}

#best-sellers_in_cat .product_images { list-style: none; margin: 0; padding: 0; }

/* Modul dělí položky do dvou skupin: první tři jsou přímo v `<ul>`,
   zbytek je zabalený v `<div id="dm_hide_block">` uvnitř téhož seznamu
   a odkrývá ho tlačítko „Zobrazit další". Selektor `> li` proto na donačtené
   řádky vůbec nesedl a ty se řídily výchozím stylem modulu: jiná šířka
   buňky s obrázkem, jiné odsazení názvu, jiná barva pořadí. Obě skupiny
   se proto adresují společně. */
#best-sellers_in_cat :is(.product_images, #dm_hide_block) > li {
  display: flex !important;
  align-items: center;
  gap: 12px;
  float: none !important;
  width: 100% !important;
  padding: 10px 0 !important;
  border-bottom: 0 !important;
  border-top: 1px solid var(--bso-border);
}
#best-sellers_in_cat .product_images > li:first-child { border-top: 0; padding-top: 0 !important; }
/* První řádek odkryté skupiny navazuje na poslední viditelný, takže si
   oddělovač nahoře nechává; resetuje se jen úplně první řádek seznamu. */

/* Pořadí */
#best-sellers_in_cat .bs-counter {
  flex: 0 0 24px;
  padding: 0 !important;
}
#best-sellers_in_cat .bs-counter span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0 !important;
  border-radius: 50%;
  background: var(--bso-navy-dark);
  color: #fff;
  font-family: var(--bso-condensed);
  font-size: 13px;
  font-weight: 700;
  line-height: 1 !important;
}
/* Modul kreslí první tři místa jako medaile v barvách, které do palety
   e-shopu nepatří; přebíjí se na červenou. */
#best-sellers_in_cat li.item1 .bs-counter span,
#best-sellers_in_cat li.item2 .bs-counter span,
#best-sellers_in_cat li.item3 .bs-counter span {
  background-color: var(--bso-red) !important;
  border-color: var(--bso-red) !important;
  color: #fff !important;
}

/* Miniatura.
   Selektor musí přebít modulové `#best-sellers_in_cat li a.products-block-image`,
   které buňce dává `display: block`, `float: left`, `width: 11%`,
   `min-width: 95px` a `padding-left: 5px`. Dokud vyhrávalo, buňka byla
   95 px široká, blok místo flexu, a miniatury tak seděly u levého okraje
   místo uprostřed; při různých poměrech stran obrázků to bilo do očí. */
#best-sellers_in_cat :is(.product_images, #dm_hide_block) > li a.products-block-image,
#best-sellers_in_cat .products-block-image {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  float: none;
  padding: 0;
}
#best-sellers_in_cat .products-block-image img {
  max-width: 48px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Název; min-width: 0 je nutné, jinak dlouhý název flex položku roztáhne
   a vytlačí cenu z řádku. */
#best-sellers_in_cat .bs-content {
  flex: 1 1 auto;
  min-width: 0;
}
#best-sellers_in_cat .bs-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--bso-navy-dark);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
}
#best-sellers_in_cat .bs-name:hover { color: var(--bso-red); }

/* Popis v kompaktním boxu nemá místo. */
#best-sellers_in_cat .bs-description { display: none; }

/* Cena a dostupnost */
#best-sellers_in_cat .bs-price {
  flex: 0 0 150px;
  text-align: right;
  font-family: var(--bso-condensed);
  font-size: 16px;
  font-weight: 700;
  color: var(--bso-navy-dark);
  line-height: 1.2;
}
#best-sellers_in_cat .bs-price .availability {
  display: block;
  margin-top: 2px;
  font-family: var(--bso-base);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}
#best-sellers_in_cat .bs-price .label-success { color: var(--bso-zelena); }
#best-sellers_in_cat .bs-price .label-warning { color: var(--bso-oranzova); }
#best-sellers_in_cat .bs-price .label-danger { color: var(--bso-red); }

/* Zobrazit další */
#best-sellers_in_cat .block_content > a {
  display: block;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--bso-border);
  text-align: center;
  color: var(--bso-navy-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
#best-sellers_in_cat .block_content > a:hover { color: var(--bso-red); }

@media (max-width: 575px) {
  #best-sellers_in_cat { padding: 14px !important; }
  #best-sellers_in_cat :is(.product_images, #dm_hide_block) > li { flex-wrap: wrap; gap: 8px 10px; }
  #best-sellers_in_cat .bs-content { flex: 1 1 100%; order: 3; }
  #best-sellers_in_cat .bs-price { flex: 1 1 auto; text-align: left; }
}

/* ============================================================================
   STRÁNKA PRODEJNY (CMS 13)
   ============================================================================
   Stránka je hlavně navigace k prodejně a nese šestnáct fotek, které měly
   po převodu z produkce jedenáct různých šířek a stály pod sebou nalevo.
   Skript `uprav_stranku_prodejny.php` je zabalil do .bso-prodejna-fotky,
   tady se z toho dělá mřížka: dvě fotky vedle sebe, na mobilu jedna pod
   druhou. Fotky se nikde neořezávají, jsou to fotky cesty a detail na kraji
   snímku může být to podstatné; srovnává se jen šířka.
   ============================================================================ */
.bso-prodejna-fotky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: center;
  margin: 4px 0 18px;
}

/* Samotná fotka ať zabere celou šířku, půl sloupce vypadá jako nedopatření */
.bso-prodejna-fotky:has(> img:only-child) { grid-template-columns: 1fr; }

.bso-prodejna-fotky img {
  width: 100%;
  height: auto;
  border-radius: var(--bso-radius);
  border: 1px solid var(--bso-border);
}

/* Samostatný obrázek stránky ať vypadá stejně jako fotky v mřížce */
#content.page-cms-13 .elementor-widget-image img {
  border-radius: var(--bso-radius);
  border: 1px solid var(--bso-border);
}

/* ── Otevírací doba ─────────────────────────────────────────────────────── */
.bso-prodejna-doba {
  display: inline-block;
  min-width: 260px;
  margin: 4px 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--bso-border);
  border-left: 3px solid var(--bso-red);
  border-radius: var(--bso-radius);
  background: var(--bso-bg);
}

.bso-prodejna-doba__popisek {
  margin: 0 0 8px;
  font-family: var(--bso-condensed);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bso-navy);
}

/* Obecný styl tabulek v obsahu je pro tabulku s dobou moc těžký (podklad
   buněk, rámečky), přebíjí se proto ve stejné hloubce zanoření. */
#content.page-cms .bso-cms-telo :is(.rte-content, .elementor) .bso-prodejna-doba :is(table, tbody, tr, th, td) {
  border: 0;
  background: none;
  box-shadow: none;
}

/* Tabulky v obsahu balí custom.js do posuvného rámečku (.bso-cms-tabulka).
   Dvě řádky otevírací doby se nikam posouvat nepotřebují a rámeček v rámečku
   vypadá jako chyba, tady se proto ruší. */
#content.page-cms .bso-cms-telo :is(.rte-content, .elementor) .bso-prodejna-doba .bso-cms-tabulka {
  border: 0;
  border-radius: 0;
  overflow: visible;
}

#content.page-cms .bso-cms-telo :is(.rte-content, .elementor) .bso-prodejna-doba table { margin: 0; width: auto; }

#content.page-cms .bso-cms-telo :is(.rte-content, .elementor) .bso-prodejna-doba :is(th, td) {
  padding: 3px 0;
  font-size: 15px;
  line-height: 1.5;
  vertical-align: baseline;
}

#content.page-cms .bso-cms-telo :is(.rte-content, .elementor) .bso-prodejna-doba th {
  padding-right: 18px;
  text-align: left;
  font-weight: 600;
  color: var(--bso-text);
}

#content.page-cms .bso-cms-telo :is(.rte-content, .elementor) .bso-prodejna-doba td {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--bso-text);
}

/* ── Věty s telefonem ───────────────────────────────────────────────────── */
p.bso-prodejna-kontakt {
  margin: 4px 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bso-muted);
}

/* Podtržení si kreslí téma samo, vlastní rámeček zdola by ho zdvojil */
p.bso-prodejna-kontakt a {
  font-weight: 600;
  white-space: nowrap;
}

p.bso-prodejna-kontakt a:hover { color: var(--bso-red); }


/* ============================================================================
   PRŮVODCE VÝBĚREM PÁLKY
   ============================================================================
   Styly průvodce tady nejsou, bydlí ve vlastním CSS poli editoru tématu
   (Design, Theme editor). Verzované jsou v repozitáři projektu a do pole
   je zapisuje projektový skript `nasad_pruvodce.php`, ne ruční editace.
   ============================================================================ */