/* stylesheet_zz_bs_vzhled.css - obchodní rozložení hlavičky a bloků úvodní stránky bs222 (design obchodu, etapa 70).
   Struktura a tvary jsou společné pro všechny obchody; barvy, písma a zaoblení berou z proměnných --obchod-* (generuje stylesheet_zz_obchod.css
   z obchod.json). Ruční doladění jednoho obchodu patří do vzhled/obchod.css (načítá se až za tímto souborem). */

:root {
  --bs-obsah-max: 1400px;
  --bs-okraj: 1rem;
  --bs-zelena-svetla: color-mix(in srgb, var(--obchod-primarni, #4f7b16) 12%, #fff);
}

/* ---------------------------------------------------------------- šířka obsahu
   Hlavička, tělo i patička mají stejnou nejvyšší šířku (--bs-obsah-max) a stojí na středu okna; pozadí pruhů hlavičky (horní lišta, navigace) zůstává přes celou šířku.
   Šířku jednoho obchodu lze změnit ve vzhled/obchod.css: :root { --bs-obsah-max: 1280px; } */
#header-wrapper { padding-left: 0; padding-right: 0; }
#header-wrapper > .row { margin-left: 0; margin-right: 0; }
#header-wrapper > .row > .col { padding-left: 0; padding-right: 0; }
#mainWrapper, #footer-wrapper { box-sizing: border-box; max-width: var(--bs-obsah-max); margin-left: auto; margin-right: auto; padding-left: var(--bs-okraj); padding-right: var(--bs-okraj); }

/* ---------------------------------------------------------------- hlavička */
#headerWrapper.bs-hlavicka { margin: 0; background: var(--obchod-pozadi, #fff); }
.bs-hlavicka-lista-vnitrek,
.bs-hlavicka-hlavni-vnitrek,
#navMain .bs-nav { max-width: var(--bs-obsah-max); margin-left: auto; margin-right: auto; padding-left: var(--bs-okraj); padding-right: var(--bs-okraj); }

.bs-hlavicka-lista { background: var(--cmf-lehke, #f0f1f1); border-bottom: 1px solid var(--cmf-ramecek, #dcdfe0); font-size: .8125rem; color: var(--cmf-slaby, #5b6366); }
.bs-hlavicka-lista-vnitrek { display: flex; justify-content: space-between; align-items: center; min-height: 2rem; }
.bs-hlavicka-lista a, .bs-hlavicka-lista a:visited { color: var(--obchod-text, #26343a); text-decoration: none; }
.bs-hlavicka-lista a:hover { color: var(--obchod-primarni, #4f7b16); text-decoration: underline; }
.bs-hlavicka-lista-odkazy .list-inline-item:not(:last-child) { margin-right: 1.25rem; }
.bs-hlavicka-lista .cm-topbar-porovnani { display: inline-flex; align-items: center; gap: .35rem; }

.bs-hlavicka-hlavni { background: var(--obchod-hlavicka, var(--obchod-pozadi, #fff)); }
.bs-hlavicka-hlavni-vnitrek { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding-top: 1rem; padding-bottom: 1rem; }
.bs-hlavicka-logo { flex: 0 0 auto; }
.bs-hlavicka-logo img { max-width: 100%; height: auto; display: block; }
.bs-hlavicka-hledani { flex: 1 1 18rem; min-width: 0; }
.bs-hlavicka-hledani form { margin: 0; }
.bs-hlavicka-hledani .input-group { flex-wrap: nowrap; width: 100%; max-width: 38rem; }
.bs-hlavicka-hledani input[name="keyword"] { height: 3rem; border-color: var(--cmf-ramecek, #cfd2d4); border-radius: var(--obchod-zaobleni-tlacitek, .25rem) 0 0 var(--obchod-zaobleni-tlacitek, .25rem); padding: 0 1rem; }
.bs-hlavicka-hledani .input-group-append .btn,
.bs-hlavicka-hledani .input-group-append input[type="submit"],
.bs-hlavicka-hledani .input-group-append button { height: 3rem; min-width: 3.25rem; border: 0; border-radius: 0 var(--obchod-zaobleni-tlacitek, .25rem) var(--obchod-zaobleni-tlacitek, .25rem) 0;
  background: var(--obchod-sekundarni, #0d3b4f); color: #fff; padding: 0 1.1rem; }
.bs-hlavicka-hledani .input-group-append .btn:hover,
.bs-hlavicka-hledani .input-group-append button:hover { background: var(--obchod-primarni, #4f7b16); color: #fff; }

/* tlačítko hledání: lupa místo textu (popisek zůstává pro čtečky v atributech tlačítka) */
.bs-hlavicka-hledani .input-group-append button { font-size: 0; line-height: 1; }
.bs-hlavicka-hledani .input-group-append button::before { content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.1rem; }

.bs-hlavicka-telefon { flex: 0 0 auto; align-items: center; gap: .75rem; line-height: 1.25; }
.bs-hlavicka-telefon-ikona { font-size: 1.75rem; color: var(--obchod-primarni, #4f7b16); }
.bs-hlavicka-telefon-nadpis { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--obchod-sekundarni, #0d3b4f); max-width: 13rem; }
.bs-hlavicka-telefon-cislo, .bs-hlavicka-telefon-cislo:visited { display: block; font-size: 1.5rem; font-weight: 800; color: var(--obchod-primarni, #4f7b16); text-decoration: none; letter-spacing: .01em; }
a.bs-hlavicka-telefon-cislo:hover { text-decoration: underline; }
.bs-hlavicka-telefon-hodiny { font-size: .8125rem; color: var(--cmf-slaby, #5b6366); }

.bs-hlavicka-kosik { flex: 0 0 auto; margin-left: auto; }
.bs-hlavicka-kosik .cm-kosik { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.25rem; border: 1px solid var(--cmf-ramecek, #dcdfe0); border-radius: var(--obchod-zaobleni, .5rem);
  background: #fff; color: var(--obchod-text, #26343a); font-weight: 700; text-decoration: none; box-shadow: 0 1px 3px rgba(13, 59, 79, .08); }
.bs-hlavicka-kosik .cm-kosik:hover { border-color: var(--obchod-primarni, #4f7b16); color: var(--obchod-text, #26343a); text-decoration: none; }
.bs-hlavicka-kosik .cm-kosik i { color: var(--obchod-primarni, #4f7b16); font-size: 1.35rem; }
.bs-hlavicka-kosik .cm-kosik-pocet { position: absolute; top: -.55rem; right: -.55rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: 999px; background: var(--obchod-primarni, #4f7b16); color: #fff; font-size: .75rem; line-height: 1.5rem; text-align: center; }

/* ---------------------------------------------------------------- navigační lišta */
#navMainWrapper.bs-nav-obal { background: var(--obchod-navigace, #fff); border-top: 1px solid var(--cmf-ramecek, #dcdfe0); border-bottom: 1px solid var(--cmf-ramecek, #dcdfe0); box-shadow: 0 2px 4px rgba(13, 59, 79, .05); }
#navMain .bs-nav { position: static; padding-top: 0; padding-bottom: 0; background: transparent; }
#navMain .bs-nav-seznam { width: 100%; align-items: stretch; }
#navMain .bs-nav .nav-link { font-weight: 600; color: var(--obchod-text, #26343a); text-decoration: none; }
#navMain .bs-nav .nav-link:hover { background: transparent; color: var(--obchod-primarni, #4f7b16); }

@media (min-width: 992px) {
  #navMain .bs-nav-seznam { flex-direction: row; flex-wrap: wrap; }
  #navMain .bs-nav .nav-link { text-transform: uppercase; font-size: .8125rem; letter-spacing: .01em; padding: 1rem .75rem; border-bottom: 3px solid transparent; }
  #navMain .bs-nav .nav-item.active > .nav-link,
  #navMain .bs-nav .nav-link:hover { border-bottom-color: var(--obchod-primarni, #4f7b16); color: var(--obchod-primarni, #4f7b16); }
  .bs-vsechny-kategorie { margin-right: .5rem; position: static; }
  .bs-vsechny-kategorie-tlacitko, .bs-vsechny-kategorie-tlacitko:visited { display: flex; align-items: center; gap: .6rem; height: 100%; min-height: 3.25rem; padding: 0 1.4rem; background: var(--obchod-primarni, #4f7b16); color: #fff;
    font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; border-radius: 0; }
  .bs-vsechny-kategorie-tlacitko:hover, .bs-vsechny-kategorie.show > .bs-vsechny-kategorie-tlacitko { background: var(--obchod-sekundarni, #0d3b4f); color: #fff; text-decoration: none; }
  .bs-vsechny-kategorie-tlacitko::after { margin-left: .35rem; }
  .bs-mega.dropdown-menu { left: 0; right: 0; margin-top: 0; padding: 1.5rem 1.75rem; border: 1px solid var(--cmf-ramecek, #dcdfe0); border-top: 3px solid var(--obchod-primarni, #4f7b16); border-radius: 0 0 var(--obchod-zaobleni, .5rem) var(--obchod-zaobleni, .5rem);
    box-shadow: 0 12px 28px rgba(13, 59, 79, .15); max-width: var(--bs-obsah-max); }
  #navMain .bs-nav { position: relative; }
  .bs-mega-sloupce { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.25rem 2rem; }
  .bs-mega-nadpis, .bs-mega-nadpis:visited { display: block; margin-bottom: .4rem; font-weight: 700; color: var(--obchod-sekundarni, #0d3b4f); text-decoration: none; }
  .bs-mega-nadpis:hover { color: var(--obchod-primarni, #4f7b16); }
  .bs-mega-sloupec li a { display: block; padding: .15rem 0; font-size: .875rem; color: var(--obchod-text, #26343a); text-decoration: none; }
  .bs-mega-sloupec li a:hover { color: var(--obchod-primarni, #4f7b16); text-decoration: underline; }
  .bs-mega-vice { font-weight: 600; color: var(--obchod-primarni, #4f7b16) !important; }
  /* kategorie bez podkategorií: kompaktní řádek odkazů pod sloupci (žádný prázdný blok) */
  .bs-mega-bez { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--cmf-ramecek, #dcdfe0); }
  .bs-mega-bez--sam { margin-top: 0; padding-top: 0; border-top: 0; }
  .bs-mega-bez .bs-mega-nadpis { display: inline-block; margin-bottom: 0; }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  #navMain .bs-nav .nav-link { padding-left: .55rem; padding-right: .55rem; font-size: .75rem; }
  .bs-vsechny-kategorie-tlacitko { padding: 0 1rem; font-size: .8125rem; }
}

@media (max-width: 991.98px) {
  .bs-hlavicka-hlavni-vnitrek { gap: .6rem 1rem; padding-top: .75rem; padding-bottom: .75rem; }
  .bs-hlavicka-logo { flex: 1 1 8rem; min-width: 0; }
  .bs-hlavicka-logo img { max-height: 3.25rem; max-width: 100%; width: auto; }
  .bs-hlavicka-hledani { flex: 1 1 100%; order: 3; }
  .bs-hlavicka-hledani .input-group { max-width: none; }
  .bs-hlavicka-kosik { order: 2; }
  .bs-hlavicka-kosik .cm-kosik { padding: .55rem .85rem; }
  #navMainWrapper.bs-nav-obal { background: var(--obchod-sekundarni, #0d3b4f); border: 0; }
  #navMain .bs-nav { padding-top: .35rem; padding-bottom: .35rem; }
  #navMain .bs-nav-menu-tlacitko { display: inline-flex; align-items: center; gap: .5rem; border: 0; color: #fff; background: transparent; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .5rem .25rem; }
  #navMain .bs-nav-menu-tlacitko:hover, #navMain .bs-nav-menu-tlacitko:focus { background: transparent; color: #fff; }
  #navMain .navbar-collapse { background: #fff; margin: .35rem calc(var(--bs-okraj) * -1) -.35rem; padding: .25rem var(--bs-okraj) .75rem; }
  #navMain .bs-nav .nav-link { padding: .65rem .25rem; border-bottom: 1px solid var(--cmf-lehke, #f0f1f1); }
}

/* ---------------------------------------------------------------- úvodní stránka: bloky (uvod.bloky v obchod.json) */
.bs-hero { margin: 1rem 0 0; border-radius: var(--obchod-zaobleni, .5rem); overflow: hidden;
  background-color: #f1f5e8; background-image: linear-gradient(105deg, color-mix(in srgb, var(--obchod-primarni, #4f7b16) 14%, #fff) 0%, #f7f9f3 55%, #fff 100%); background-size: cover; background-position: center right; background-repeat: no-repeat; }
.bs-hero-vnitrek { display: flex; align-items: center; min-height: 24rem; padding: 3rem 2.5rem 5.5rem; }
.bs-hero-text { max-width: 34rem; }
.bs-hero-nadpis { margin: 0 0 1rem; font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.08; color: var(--obchod-sekundarni, #0d3b4f); }
.bs-hero-nadpis span { display: block; margin-top: .15rem; font-size: .82em; color: var(--obchod-primarni, #4f7b16); }
.bs-hero-popis { max-width: 27rem; margin: 0 0 1.5rem; font-size: 1.0625rem; color: var(--obchod-text, #26343a); }
.bs-hero-tlacitko, .bs-hero-tlacitko:visited { display: inline-block; padding: .85rem 1.9rem; border: 0; border-radius: var(--obchod-zaobleni-tlacitek, .25rem); background: var(--obchod-primarni, #4f7b16); color: #fff;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; }
.bs-hero-tlacitko:hover { background: var(--obchod-sekundarni, #0d3b4f); color: #fff; text-decoration: none; }

.bs-pruh { margin: 0 0 2rem; }
.bs-pruh-seznam { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0; }
.bs-pruh-polozka { display: flex; align-items: center; gap: .9rem; padding: 1.25rem 1.5rem; }
.bs-pruh-polozka + .bs-pruh-polozka { border-left: 1px solid var(--cmf-ramecek, #dcdfe0); }
.bs-pruh-ikona { flex: 0 0 auto; font-size: 2rem; line-height: 1; color: var(--obchod-primarni, #4f7b16); }
.bs-pruh-obsah { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bs-pruh-nadpis { font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--obchod-sekundarni, #0d3b4f); }
.bs-pruh-text { font-size: .8125rem; color: var(--cmf-slaby, #5b6366); }
.bs-pruh-odkaz, .bs-pruh-odkaz:visited { margin-top: .35rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--obchod-primarni, #4f7b16); text-decoration: none; }
.bs-pruh-odkaz:hover { text-decoration: underline; }

.bs-pruh--karta { position: relative; margin: -3.25rem 1.5rem 2.25rem; background: #fff; border: 1px solid var(--cmf-ramecek, #dcdfe0); border-radius: var(--obchod-zaobleni, .5rem); box-shadow: 0 6px 20px rgba(13, 59, 79, .1); }
.bs-pruh--plocha { background: var(--obchod-patice, var(--cmf-lehke, #f1f3ec)); border: 1px solid var(--cmf-ramecek, #dcdfe0); border-radius: var(--obchod-zaobleni, .5rem); }
.bs-pruh--info { background: #fff; border: 1px solid var(--cmf-ramecek, #dcdfe0); border-radius: var(--obchod-zaobleni, .5rem); box-shadow: 0 2px 8px rgba(13, 59, 79, .06); }
.bs-pruh--info .bs-pruh-ikona { color: var(--obchod-sekundarni, #0d3b4f); }
.bs-pruh--info .bs-pruh-nadpis { font-size: .9375rem; text-transform: none; }

.bs-produkty { margin: 0 0 2rem; }
.bs-blok-hlava { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.bs-blok-nadpis { margin: 0; font-size: 1.75rem; font-weight: 800; color: var(--obchod-sekundarni, #0d3b4f); }
.bs-blok-vice, .bs-blok-vice:visited { font-weight: 600; color: var(--obchod-odkaz, #497214); text-decoration: none; }
.bs-blok-vice:hover { text-decoration: underline; }

.bs-zalozky { flex-wrap: wrap; margin: 0 0 1.25rem; }
.bs-zalozky .nav-link { margin: 0 .4rem .4rem 0; padding: .45rem 1.1rem; border: 1px solid var(--cmf-ramecek, #dcdfe0); border-radius: var(--obchod-zaobleni-tlacitek, .25rem); background: #fff; color: var(--obchod-text, #26343a); font-size: .875rem; text-decoration: none; }
.bs-zalozky .nav-link:hover { border-color: var(--obchod-primarni, #4f7b16); color: var(--obchod-primarni, #4f7b16); }
.bs-zalozky .nav-link.active { background: var(--obchod-primarni, #4f7b16); border-color: var(--obchod-primarni, #4f7b16); color: #fff; font-weight: 700; }

.bs-produkty-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.bs-dlazdice { display: flex; flex-direction: column; padding: 1rem 1rem .9rem; background: #fff; border: 1px solid var(--cmf-ramecek, #dcdfe0); border-radius: var(--obchod-zaobleni, .5rem); text-align: center; transition: box-shadow .15s ease, border-color .15s ease; }
.bs-dlazdice:hover { border-color: var(--obchod-primarni, #4f7b16); box-shadow: 0 6px 18px rgba(13, 59, 79, .12); }
.bs-dlazdice-nazev { margin: 0 0 .6rem; font-size: 1rem; font-weight: 800; line-height: 1.25; min-height: 2.5em; }
.bs-dlazdice-nazev a, .bs-dlazdice-nazev a:visited { color: var(--obchod-sekundarni, #0d3b4f); text-decoration: none; }
.bs-dlazdice-nazev a:hover { color: var(--obchod-primarni, #4f7b16); }
.bs-dlazdice-obrazek { display: flex; align-items: center; justify-content: center; height: 11rem; margin-bottom: .6rem; }
.bs-dlazdice-obrazek img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.bs-dlazdice-popis { flex: 1 1 auto; margin: 0 0 .75rem; font-size: .8125rem; color: var(--cmf-slaby, #5b6366); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bs-dlazdice-dole { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; }
.bs-dlazdice-cena { font-size: 1.25rem; font-weight: 800; color: var(--obchod-primarni, #4f7b16); text-align: left; line-height: 1.2; }
.bs-dlazdice-cena .normalprice, .bs-dlazdice-cena .productSpecialPriceOld { font-size: .8125rem; font-weight: 400; color: var(--cmf-slaby, #5b6366); }
.bs-dlazdice-detail, .bs-dlazdice-detail:visited { padding: .5rem 1.15rem; border: 0; border-radius: var(--obchod-zaobleni-tlacitek, .25rem); background: var(--obchod-sekundarni, #0d3b4f); color: #fff; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; }
.bs-dlazdice-detail:hover { background: var(--obchod-primarni, #4f7b16); color: #fff; text-decoration: none; }
.bs-produkty-prazdno { padding: 1.5rem 0; color: var(--cmf-slaby, #5b6366); }

@media (max-width: 767.98px) {
  .bs-hero-vnitrek { min-height: 0; padding: 2rem 1.25rem 4.5rem; }
  .bs-pruh--karta { margin: -3rem .5rem 1.5rem; }
  .bs-pruh-seznam { grid-template-columns: 1fr 1fr; }
  .bs-pruh-polozka { padding: .9rem 1rem; }
  .bs-pruh-polozka + .bs-pruh-polozka { border-left: 0; }
  .bs-pruh-seznam > li:nth-child(even) { border-left: 1px solid var(--cmf-ramecek, #dcdfe0); }
  .bs-pruh-seznam > li:nth-child(n+3) { border-top: 1px solid var(--cmf-ramecek, #dcdfe0); }
  .bs-blok-nadpis { font-size: 1.4rem; }
  .bs-produkty-mrizka { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .bs-dlazdice { padding: .75rem .6rem; }
  .bs-dlazdice-obrazek { height: 8rem; }
  .bs-dlazdice-dole { flex-direction: column; align-items: stretch; gap: .5rem; }
  .bs-dlazdice-cena { text-align: center; font-size: 1.1rem; }
}
@media (max-width: 479.98px) {
  .bs-pruh-seznam { grid-template-columns: 1fr; }
  .bs-pruh-seznam > li:nth-child(even) { border-left: 0; }
  .bs-pruh-seznam > li + li { border-top: 1px solid var(--cmf-ramecek, #dcdfe0); }
}

/* ---------------------------------------------------------------- výpis produktů a detail: sjednocení s designem obchodu */
.centerBoxContentsListing { border-color: var(--cmf-ramecek, #dcdfe0); border-radius: var(--obchod-zaobleni, .5rem); transition: box-shadow .15s ease, border-color .15s ease; }
.centerBoxContentsListing:hover { border-color: var(--obchod-primarni, #4f7b16); box-shadow: 0 6px 18px rgba(13, 59, 79, .12); }
.centerBoxContentsListing .itemTitle { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.centerBoxContentsListing .itemTitle a, .centerBoxContentsListing .itemTitle a:visited { color: var(--obchod-sekundarni, #0d3b4f); text-decoration: none; }
.centerBoxContentsListing .itemTitle a:hover { color: var(--obchod-primarni, #4f7b16); }
.centerBoxContentsListing .listingDescription { font-size: .8125rem; color: var(--cmf-slaby, #5b6366); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.centerBoxContentsListing .productBasePrice, .centerBoxContentsListing .productSpecialPrice { font-size: 1.25rem; font-weight: 800; color: var(--obchod-primarni, #4f7b16); }
.centerBoxContentsListing .normalprice, .centerBoxContentsListing .productSpecialPriceOld { color: var(--cmf-slaby, #5b6366); font-size: .8125rem; font-weight: 400; }
.centerBoxContentsListing .moreinfoLink, .centerBoxContentsListing .moreinfoLink:visited { display: inline-block; margin: .35rem 0; padding: .45rem 1.1rem; border-radius: var(--obchod-zaobleni-tlacitek, .25rem); background: var(--obchod-sekundarni, #0d3b4f); color: #fff;
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; }
.centerBoxContentsListing .moreinfoLink:hover { background: var(--obchod-primarni, #4f7b16); color: #fff; }

#productInfo-productDescription h2, #productInfo-productDescription h3, #productInfo-productDescription .blokhybrid_nadpis { margin: 1.5rem 0 .6rem; font-size: 1.35rem; font-weight: 800; color: var(--obchod-sekundarni, #0d3b4f); }
#productInfo-productName { font-size: 1.9rem; font-weight: 800; color: var(--obchod-sekundarni, #0d3b4f); }

/* ---------------------------------------------------------------- doladění podle návrhu: popisek košíku, hodnocení, ilustrace banneru */
.bs-hlavicka-kosik .cm-kosik-castka { display: flex; flex-direction: column; line-height: 1.15; font-size: .9375rem; }
.bs-hlavicka-kosik .cm-kosik-castka::before { content: var(--bs-kosik-popisek, ""); font-size: .75rem; font-weight: 400; color: var(--cmf-slaby, #5b6366); }

.bs-pruh-hodnoceni { display: flex; align-items: center; gap: .4rem; margin-top: .1rem; }
.bs-pruh-hodnoceni-cislo { font-size: .875rem; font-weight: 800; color: var(--obchod-sekundarni, #0d3b4f); }
.bs-pruh-hvezdy { color: #f2b01e; font-size: .8rem; letter-spacing: .08em; }

.bs-hero--obrazek { background-size: auto 112%; background-position: right 2% bottom; }
@media (max-width: 991.98px) {
  .bs-hero--obrazek { background-size: auto 80%; background-position: right -4rem bottom; }
}
@media (max-width: 767.98px) {
  .bs-hero--obrazek { background-size: 92% auto; background-position: center bottom; }
  .bs-hero--obrazek .bs-hero-vnitrek { padding-bottom: 15rem; }
  .bs-hlavicka-kosik .cm-kosik-castka::before { display: none; }
}
@media (max-width: 991.98px) {
  .bs-hlavicka-kosik .cm-kosik-castka::before { display: none; }
}

/* ---------------------------------------------------------------- levý sloupec a obrázky produktů
   Levý sloupec s boxy je o čtvrtinu užší než výchozí (18,75 % místo 25 %); šířku jednoho obchodu lze změnit ve vzhled/obchod.css: :root { --bs-levy-sloupec: 20%; }.
   Počet dlaždic v řádku výpisu určuje obchod.json -> vypis.max_na_radek (extra_datafiles/bs_vypis_mrizka.php), velikost obrázků vypis.obrazek_sirka/vyska a vypis.detail_obrazek_*. */
@media (min-width: 992px) {
  #navColumnOne { flex: 0 0 var(--bs-levy-sloupec, 18.75%); max-width: var(--bs-levy-sloupec, 18.75%); }
  #navColumnOne + [class*="col-lg-"] { flex: 0 0 calc(100% - var(--bs-levy-sloupec, 18.75%)); max-width: calc(100% - var(--bs-levy-sloupec, 18.75%)); }
}

/* obrázek na dlaždici vyplní šířku karty (miniatura se tvoří ve velikosti z nastavení, karta ji jen přizpůsobí) */
.centerBoxContentsListing .list-image { display: block; width: 100%; }
.centerBoxContentsListing .list-image a { display: block; }
.centerBoxContentsListing img.listingProductImage { display: block; width: 100%; height: auto; max-width: 100%; margin: 0 auto; }
.bs-dlazdice-obrazek { display: block; height: auto; aspect-ratio: 4 / 3; }
.bs-dlazdice-obrazek img { width: 100%; height: 100%; object-fit: contain; }
#productMainImage img, #productMainImage-modal img { max-width: 100%; height: auto; }