@charset "UTF-8";

/* Flexbox pro dvojici bloku (adresa + otev?c?oba) */
.content-wrapper #content .content-inner .bukoma-grid-two {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}


/* Vizitky týmu */
.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid .bukoma-person-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
}

.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid .bukoma-person-card img {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid .bukoma-person-card h3 {
  font-size: 20px;
  margin: 6px 0 4px;
  font-weight: 600;
}

.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid .bukoma-person-card p {
  margin: 4px 0;
  font-size: 15px;
}

.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  justify-content: center;
}

/* Poehled výhod (USP grid) */
.content-inner article.pageArticleDetail .bukoma-usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin: 40px auto;
  max-width: 1280px;
}

.content-inner .pageArticleDetail .bukoma-usp-item {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  text-align: center;
}

.content-inner .pageArticleDetail .bukoma-usp-item h3 {
  font-size: 20px;
  font-family: 'Exo 2', sans-serif;
  margin-top: 12px;
  margin-bottom: 8px;
}

.content-inner .pageArticleDetail .bukoma-usp-item p {
  font-size: 16px;
  color: #555;
  font-family: 'Source Sans 3', sans-serif;
}

.content-inner .pageArticleDetail .bukoma-usp-icon {
  font-size: 36px;
  line-height: 1;
}

.content-inner .pageArticleDetail .bukoma-usp-item a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.content-inner .pageArticleDetail .bukoma-usp-item:hover h3,
.bukoma-usp-item:hover p {
  text-decoration: underline;
}
.content-inner .pageArticleDetail .bukoma-usp-item {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.content-inner .pageArticleDetail .bukoma-usp-item:hover h3,
.bukoma-usp-item:hover p {
  text-decoration: underline;
}


/* ====== BUKOMA ? obr?k s popiskem (desktop overlay, mobile/tablet below) ====== */

/* Kontejner */
.bk-img{
  position:relative;
  display:block;
  width:100%;
  margin:0 0 24px 0;
  overflow:hidden;
  border-radius:16px;
}

/* Obr?k */
.bk-img picture,
.bk-img img{
  display:block;
  width:100%;
  height:auto;
}

/* Popisek ? z?ad (konkr??ozlo?en?iz breakpoints n? */
.bk-caption{
  display:grid;
  gap:6px;
  z-index:1;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.bk-cap-title{
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.2;
  font-size:clamp(18px, 2.4vw, 28px);
}
.bk-cap-sub{
  font-size:clamp(13px, 1.6vw, 16px);
  opacity:.95;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; /* 2 o?y poi overlayi */
  overflow:hidden;
}
.bk-cap-cta{
  --cta-bg:        #00796B;  /* Teal 700 – 5.32:1 s #fff */
  --cta-bg-hover:  #00695C;  /* Teal 800 – 6.85:1 s #fff */
  --cta-bg-active: #004D40;  /* Teal 900 – 9.83:1 s #fff */
  --cta-fg:        #FFFFFF;
  --cta-outline:   #004D40;

  justify-self:start;
  margin-top:6px;
  padding:12px 18px;
  border-radius:999px;
  background:var(--cta-bg);
  color:var(--cta-fg);
  font-weight:700;
  text-decoration:none;
  border:0;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.bk-cap-cta:hover{ background:var(--cta-bg-hover); transform:translateY(-1px); }
.bk-cap-cta:active{ background:var(--cta-bg-active); transform:none; }

/* Silně viditelný fokus (WCAG 2.2) – dvojitý prstenec */
.bk-cap-cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #FFFFFF,          /* vnitřní kontrast na tmavém tlačítku */
    0 0 0 6px var(--cta-outline); /* vnější kroužek – dobře viditelný i na fotce podkladů */
}
/* ---------- DESKTOP (overlay) ---------- */
@media (min-width:992px){
  /* gradient overlay */
  .bk-img::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 70%);
    pointer-events:none;
    transition:opacity .3s ease;
  }

  /* caption jako overlay dole */
  .bk-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:18px 22px;
  }
}

/* jemnĂ˝ zoom pouze na zao?n? s hover (kombinovan?edia query) */
@media (min-width:992px) and (hover:hover){
  .bk-img img{ transition:transform .5s ease; }
  .bk-img:hover img{ transform:scale(1.02); }
  .bk-img:hover::after{ opacity:.95; }
}

/* ---------- TABLET & MOBIL (caption mimo fotku) ---------- */
@media (max-width:991.98px){
  .bk-img::after{ display:none; }          /* bez overlaye */
  .bk-caption{
    position:static;
    padding:10px 0 0 0;
    color:#111;
    text-shadow:none;
  }
  .bk-cap-title{ font-size:clamp(18px, 5vw, 22px); color:#111; }
  .bk-cap-sub{ font-size:14px; color:#444; -webkit-line-clamp:unset; }
  .bk-cap-cta{
    padding:10px 14px;
    font-size:14px;
    border:0;
  }
  /* jemn??aoblen?a men?? zao?n? */
  .bk-img, .bk-img img{ border-radius:12px; }
}

/* ---------- Po?upnost / syst?v?reference ---------- */
@media (prefers-reduced-motion:reduce){
  .bk-img img,
  .bk-cap-cta,
  .bk-img::after{ transition:none !important; }
}

/* ---------- Modifik?ry ---------- */
/* Vynutit overlay na v?ech velikostech (napo. promo hero) */
.bk-img.bk--overlay-all::after{ display:block; }
.bk-img.bk--overlay-all .bk-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:16px 20px;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45);
}
@media (max-width:991.98px){
  .bk-img.bk--overlay-all .bk-caption{ -webkit-line-clamp:1; }
}

/* Vynutit caption mimo fotku v?ude (i na desktopu) */
.bk-img.bk--below-all::after{ display:none; }
.bk-img.bk--below-all .bk-caption{
  position:static;
  padding:12px 0 0 0;
  color:#111; text-shadow:none;
}

/* Vypnout hover-zoom */
.bk-img.bk--no-zoom img{ transform:none !important; }

/* ===== BUKOMA ? m? "masivn?obr?y na desktopu ===== */

/* Výchoz?v?echny .bk-img se na desktopu zú?? zarovnaj?a stoed.
   Netýk?e gridu/karet, kde chceme 100% ??u. */
@media (min-width: 1200px){
  .bk-img{
    max-width: 1100px;          /* z?adn?po?mn???a */
    margin-left: auto;
    margin-right: auto;
  }
  /* výjimky ? v mo?? nech?me 100% ??u parentu */
  .bukoma-grid-3 .bk-img,
  .ji-hp-cats__items .bk-img{
    max-width: 100%;
  }
}

/* Jemn?v?en?a ?ir?? monitorech */
@media (min-width: 1600px){
  .bk-img{ max-width: 1200px; }
}

/* R??/st?pro lep??dd?n?d okol?jen desktop) */
@media (min-width: 992px){
  .bk-img{
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    overflow: hidden; /* aby se zaoblen?rojevilo i na img */
  }
}

/* ??? Utility ??y ???
   Poidej na <figure class="bk-img ..."> podle potoeby. */
@media (min-width: 1200px){
  .bk-img.bk--narrow{ max-width: 900px; }
  .bk-img.bk--medium{ max-width: 1100px; }   /* default */
  .bk-img.bk--wide{ max-width: 1300px; }
  .bk-img.bk--full{ max-width: none; }       /* ponech?ull-width */
}

/* ??? HERO varianta s men??Ă˝?kou na desktopu ???
   Poidej to? .bk--hero na figure, vĂ˝?ka pusob?? "masivn? */
@media (min-width: 1200px){
  .bk-img.bk--hero img{
    aspect-ratio: 16 / 6;  /* ni???bannerovĂ˝" pom?*/
    object-fit: cover;
    object-position: center;
  }
}

/* Kdy? je obr?k uvnito textu dvousloupcov?ekce, zachov? jeho
   flexibilitu (u? si ??u o? flex parent) */
@media (min-width: 1200px){
  [style*="display:flex"] > .bk-img{ max-width: none; }
}



/* ——— HP bannery/tiles jen v OBSAHU ——— */

/* 1) Bez podtržení v základu; podtržení až na hover/focus */
.content-inner .ji-hp-cats__items a.ji-hp-cats__item{
  color: inherit !important;
  text-decoration: none !important;
}
.content-inner .ji-hp-cats__items a.ji-hp-cats__item:hover,
.content-inner .ji-hp-cats__items a.ji-hp-cats__item:focus-visible{
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* 2) Tmavý gradient přes fotku – bez vlivu na mega‑menu */
.content-inner .ji-hp-cats__items .ji-hp-cats__img{
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.content-inner .ji-hp-cats__items .ji-hp-cats__img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.15) 65%,
    rgba(0,0,0,0)   100%
  );
  pointer-events:none;
  z-index:1;
}

/* 3) Titulky nad overlay (pokud je používáš) */
.content-inner .ji-hp-cats__items .ji-hp-cats__title,
.content-inner .ji-hp-cats__items .ji-hp-cats__desc,
.content-inner .ji-hp-cats__items .ji-hp-cats__caption{
  position: relative; z-index: 2;
}

/* 4) Aspect‑ratio/cover jen pro OBSAH (ne pro menu) */
@media (min-width: 992px){
  .content-inner .ji-hp-cats__items .ji-hp-cats__img,
  .content-inner .ji-hp-cats__items .ji-hp-cats__img img{
    aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  }
}
/* speciální banner „k lepení“ jen v obsahu */
@media (min-width: 992px){
  .content-inner .ji-hp-cats__items a[href*="/vinylove-podlahy-k-lepeni"] .ji-hp-cats__img,
  .content-inner .ji-hp-cats__items a[href*="/vinylove-podlahy-k-lepeni"] .ji-hp-cats__img img{
    aspect-ratio: 35 / 16; object-fit: cover;
  }
}
@media (min-width: 768px) and (max-width: 991.98px){
  .content-inner .ji-hp-cats__items a[href*="/vinylove-podlahy-k-lepeni/"] .ji-hp-cats__img,
  .content-inner .ji-hp-cats__items a[href*="/vinylove-podlahy-k-lepeni/"] .ji-hp-cats__img img{
    aspect-ratio: 8 / 3; object-fit: cover;
  }
}

/* 5) „Pojistky“ pro navigaci – když se stejné třídy objeví v mega‑menu */
nav#navigation.visible .ji-hp-cats__items .ji-hp-cats__img::after,
#navigation              .ji-hp-cats__items .ji-hp-cats__img::after,
.navigation-in           .ji-hp-cats__items .ji-hp-cats__img::after{
  content: none !important;  /* žádný gradient v menu */
}
nav#navigation.visible .ji-hp-cats__items a.ji-hp-cats__item,
#navigation              .ji-hp-cats__items a.ji-hp-cats__item,
.navigation-in           .ji-hp-cats__items a.ji-hp-cats__item{
  text-decoration: inherit !important;
  color: inherit !important;
}





/* === [OBSAH] Odkazové bannery (.ji-hp-cats__item) – větší písmo ============ */
/* Doporučené hodnoty (klidně uprav): titulek 24–26px, podtitulek 14–16px */
.content-wrapper #content .content-inner .ji-hp-cats__items a.ji-hp-cats__item .ji-hp-cats__overlay{
  font-size: clamp(14px, 0.9rem + 0.2vw, 16px) !important;  /* podtitulek – výchozí pro overlay */
  line-height: 1.35 !important;
}

/* 1. řádek = titulek (může být <span>/<b>/<strong>) */
.content-wrapper #content .content-inner .ji-hp-cats__items a.ji-hp-cats__item
  .ji-hp-cats__overlay > :is(span,b,strong):first-child{
  font-size: clamp(22px, 1.05rem + 0.8vw, 26px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

/* 2. řádek = podtitulek (bez ohledu na typ elementu) */
.content-wrapper #content .content-inner .ji-hp-cats__items a.ji-hp-cats__item
  .ji-hp-cats__overlay > :nth-child(2){
  font-size: clamp(14px, 0.9rem + 0.2vw, 16px) !important;
  line-height: 1.35 !important;
  font-weight: 600;
}

/* Odkazové bannery MIMO HP – typografie + podtržení jen na hover */
.content-inner .ji-hp-cats__items a.ji-hp-cats__item {
  text-decoration: none;                     /* defaultně bez podtržení */
  color: inherit;
}

.content-inner .ji-hp-cats__items a.ji-hp-cats__item:hover .ji-hp-cats__overlay span,
.content-inner .ji-hp-cats__items a.ji-hp-cats__item:focus .ji-hp-cats__overlay span {
  text-decoration: underline;                /* podtržení až při hoveru/focusu */
}

/* větší, ale přizpůsobivé písmo – overlay určuje základ */
.content-inner .ji-hp-cats__items a.ji-hp-cats__item .ji-hp-cats__overlay {
  font-size: clamp(16px, 0.6vw + 14px, 20px);
  line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0,0,0,.65);
}

/* KLÍČ: spany dědí velikost z overlaye (1em), ne z rootu (1rem) */
.content-inner .ji-hp-cats__items a.ji-hp-cats__item .ji-hp-cats__overlay span {
  font-size: 1em;
  font-weight: 500;
}

.content-inner .ji-hp-cats__items a.ji-hp-cats__item .ji-hp-cats__overlay span:first-child {
  font-size: 1.12em;                         /* titul o chlup větší */
  font-weight: 700;
  letter-spacing: 0.3px;
}

@media (max-width: 768px){
  .content-inner .ji-hp-cats__items a.ji-hp-cats__item .ji-hp-cats__overlay {
    font-size: 14px;                         /* čitelný mobil */
  }
}










/* ---------- Pom?v?o? (proti CLS) ---------- */
/* Poidej to? na .bk-img, kdy? nezn?width/height nebo chce? sjednotit pom?
   St? je doporu??v?t i width/height po? na <img> kvuli CLS. */
.bk-img.bk--ar-16x9    img{ aspect-ratio:16 / 9;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-3x2     img{ aspect-ratio:3  / 2;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-4x3     img{ aspect-ratio:4  / 3;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-2x1     img{ aspect-ratio:2  / 1;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-8x3     img{ aspect-ratio:8  / 3;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-1050x480 img{ aspect-ratio:35 / 16; object-fit:cover; object-position:center; } /* ? 1050?80 */
.bk-img.bk--ar-1x1     img{ aspect-ratio:1  / 1;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-3x4     img{ aspect-ratio:3  / 4;  object-fit:cover; object-position:center; }

/* Voliteln?tility pro výoez (kdy? je hlavn?otiv mimo stoed) */
.bk-img.bk--pos-top img{ object-position:50% 10%; }
.bk-img.bk--pos-bottom img{ object-position:50% 90%; }
.bk-img.bk--pos-left img{ object-position:10% 50%; }
.bk-img.bk--pos-right img{ object-position:90% 50%; }

/* ====== BUKOMA ? dopl??pro str?u Pokl?y ====== */
:root{
  --bk-primary:#009688;
  --bk-primary-dark:#2E5F66;
  --bk-text:#111;
  --bk-text-muted:#555;
  --bk-border:#e7e7e7;
  --bk-bg:#fafafa;
}

/* Odstavce a drobn?ypografie */
.bukoma-text{ color:var(--bk-text); line-height:1.6; }
.bukoma-subtext{ color:var(--bk-text-muted); }

/* Kroky ? o?lovanĂ˝ postup */
.bukoma-steps{
  counter-reset: step;
  list-style:none; padding:0; margin:12px 0 22px 0;
  display:grid; gap:10px;
}
.bukoma-steps li{
  position:relative;
  padding:12px 12px 12px 48px;
  border:1px solid var(--bk-border);
  border-radius:12px; background:#fff;
}
.bukoma-steps li::before{
  counter-increment: step;
  content: counter(step);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bk-primary); color:#fff; font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* -----------------------------------------
   BUKOMA – jednotné odrážky přes ::marker
   ----------------------------------------- */

/* Fallback pro starší prohlížeče: klasický disc */
.bukoma-bullets {
  list-style: disc outside;
  margin: 0.75rem 0 1.125rem 0;
  padding-left: 1.25rem;     /* „závěs“ pro víceřádkové položky */
}
.bukoma-bullets li { margin: 0.6rem 0; }

/* Pojistka: vypnout dřívější pseudo-odrážky, kdyby někde zůstaly */
.bukoma-bullets li::before { content: none !important; }

/* Moderní prohlížeče: vlastní marker (barva/znak) */
@supports selector(::marker) {
  /* ponecháme outside kvůli hezkému „hanging indent“ u vícerádků */
  .bukoma-bullets { list-style: outside; padding-left: 1.25rem; }
  .bukoma-bullets li::marker {
    content: "• ";           /* záměna znaku jen tady (může být "– ", "→ ", "✓ " …) */
    color: var(--bk-primary);
    font-weight: 800;
  }
}

/* Pokud máš seznamy, kde začínáš položky emoji (✅/⚖️/❌), přidej jim třídu
   .has-icons a tím marker úplně skryješ, aby se nedvojil */
.bukoma-bullets.has-icons { list-style: none; margin: 0.75rem 0 1.125rem 0; padding: 0; }
@supports selector(::marker) {
  .bukoma-bullets.has-icons li::marker { content: ""; }
}


/* Grid 3 sloupce pro uk?y (auto-responzivn?*/
.bukoma-grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin:14px 0 8px 0;
}
@media (max-width: 991.98px){ .bukoma-grid-3{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px){ .bukoma-grid-3{ grid-template-columns:1fr; } }

/* FAQ akordeon ? minimalisticky (bez JS funguje jako sekce) */
.bukoma-faq h3{
  position:relative;
  margin:12px 0 6px 0;
  padding:12px 14px;
  border:1px solid var(--bk-border);
  border-radius:12px;
  background:var(--bk-bg);
  cursor:default;
}
.bukoma-faq p{
  margin:0 0 14px 0;
  padding:0 14px;
  color:var(--bk-text-muted);
}

/* Obecn?tility pro mezery (kdyby se hodily) */
.mt-0{ margin-top:0!important; }
.mb-0{ margin-bottom:0!important; }
.mt-8{ margin-top:8px!important; }
.mt-16{ margin-top:16px!important; }
.mb-16{ margin-bottom:16px!important; }

/* Pomocn?prava pro obr?y v gridu: sjednot? r?us s .bk-img */
.bukoma-grid-3 .bk-img,
.bukoma-grid-3 .bk-img img{ border-radius:12px; }

/* Voliteln?jemn?výrazn? odkazu v textu */
.bukoma-text a{ color:var(--bk-primary); text-decoration:underline; text-underline-offset:2px; }
.bukoma-text a:hover{ color:#0b7b72; }

/* BUKOMA ? nov?om?v?o? */
.bk-img.bk--ar-8x3  img { aspect-ratio: 8 / 3;   object-fit: cover; object-position: center; }
.bk-img.bk--ar-1050x480 img { aspect-ratio: 35 / 16; object-fit: cover; object-position: center; }

/* (pro Ăşplnost ? pokud bys je je?t?em? */
.bk-img.bk--ar-2x1  img { aspect-ratio: 2 / 1;   object-fit: cover; object-position: center; }
.bk-img.bk--ar-16x9 img { aspect-ratio: 16 / 9;  object-fit: cover; object-position: center; }
.bk-img.bk--ar-3x2  img { aspect-ratio: 3 / 2;   object-fit: cover; object-position: center; }
.bk-img.bk--ar-4x3  img { aspect-ratio: 4 / 3;   object-fit: cover; object-position: center; }


/* ===== BUKOMA ? sjednocenĂ˝ FAQ ===== */
.bk-faq { margin: 18px 0; }
.bk-faq details {
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  background: #fff;
  margin: 10px 0;
  overflow: clip;
}
.bk-faq summary {
  list-style: none; /* skryje default trojúheln?v n?erých browserech */
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: #111;
  position: relative;
  outline: none;
}
.bk-faq summary::-webkit-details-marker { display: none; } /* Safari/Chrome */

.bk-faq .bk-faq__icon {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  transition: transform .2s ease;
  font-weight: 900; color: var(--bk-primary, #009688);
}
.bk-faq details[open] .bk-faq__icon { transform: translateY(-50%) rotate(45deg); } /* + ? ?*/

.bk-faq .bk-faq__answer {
  padding: 0 16px 14px 16px;
  color: #555; line-height: 1.6;
  border-top: 1px solid #f1f1f1;
}

/* Hover/Focus stavy */
.bk-faq summary:hover { background: #fafafa; }
.bk-faq summary:focus-visible {
  box-shadow: 0 0 0 2px var(--bk-primary, #009688) inset;
  border-radius: 12px;
}

/* Kompaktn??a mobilu */
@media (max-width:640px){
  .bk-faq summary{ padding: 12px 14px; }
  .bk-faq .bk-faq__answer{ padding: 0 14px 12px 14px; }
}


/* === BK • FAQ: tap target 44px + bezpečné rozestupy ========================= */
.bk-faq details{
  margin: 12px 0;                  /* (≥ 8px rozestup mezi sousedními cíli) */
}

.bk-faq summary{
  min-height: 44px;                 /* tap target ≥ 44px */
  padding-right: 48px;              /* rezerva pro ikonku vpravo */
  display: block;                   /* jistota přes celou šířku */
}

/* Ikona je součástí téhož cíle – nenech ji „krást“ pointer události */
.bk-faq .bk-faq__icon{
  pointer-events: none;
}

/* Odkazy v odpovědi FAQ: vizuálně zřetelné jako odkazy */
.bk-faq .bk-faq__answer a{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bk-faq .bk-faq__answer a:visited{
  color: var(--bk-link-visited);
}




/* Banner rady zákazníkovi kategorie */
.bukoma-banner-rada {
  width: 100%;
  max-width: 1200px;
  margin-left: 0;
  text-align: center;
}

.bukoma-banner-rada img {
  width: 100%;
  height: auto;
  display: none;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .bukoma-banner-rada .banner-desktop {
    display: block;
  }
}

@media (max-width: 767px) {
  .bukoma-banner-rada .banner-mobile {
    display: block;
  }
}
.content-inner {max-width: none !important;}


/* Informace vedle sebe */
.bukoma-info-blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 30px 0;
}

.bukoma-info-blocks .info-block {
  flex: 1 1 300px;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}


/* GRID & card pro nativní i novou galerii — FINAL */
.plus-gallery-wrap,
.bk-gallery,
.gallery-unified{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;
  gap:16px!important;
}

.plus-gallery-wrap .plus-gallery-item,
.bk-gallery .bk-item,
.gallery-unified .bk-item{
  width:auto!important;
  height:auto!important;
  position:relative!important;
  aspect-ratio:4/3;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#f5f5f5!important;
  box-shadow:0 1px 3px rgba(0,0,0,.06)!important;
  transition:transform .15s ease, box-shadow .15s ease!important;
  cursor:pointer!important;
}

/* wrapper <span> od CMS — zruší baseline mezeru (řeší „posun o 50 %“) */
.plus-gallery-wrap .plus-gallery-item>span,
.gallery-unified .bk-item>span{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  font-size:0!important;
  line-height:0!important;
}

/* <a> přes celý tile (se/bez vnořeného <span>) — kotva pro overlay */
.plus-gallery-wrap .plus-gallery-item>span>a.glb,
.plus-gallery-wrap .plus-gallery-item>a.glb,
.gallery-unified .bk-item>span>a.glb,
.gallery-unified .bk-item>a.glb{
  position:absolute!important;
  inset:0!important;
  display:block!important;
}

/* IMG vyplní rámeček; žádný translate, jen jemný zoom na hover */
.plus-gallery-wrap .plus-gallery-item a.glb img,
.gallery-unified .bk-item a.glb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  transform:none!important;
  transition:transform .35s ease;
}
@media (hover:hover){
  .plus-gallery-wrap .plus-gallery-item a.glb:hover img,
  .gallery-unified .bk-item a.glb:hover img{
    transform:scale(1.035)!important;
  }
}

/* breakpoints – zachovávají původní logiku */
@media (max-width:991.98px){
  .plus-gallery-wrap,.bk-gallery,.gallery-unified{
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;
    gap:14px!important;
  }
}
@media (max-width:768px){
  .plus-gallery-wrap,.bk-gallery,.gallery-unified{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
    gap:12px!important;
  }
}
@media (max-width:480px){
  .plus-gallery-wrap,.bk-gallery,.gallery-unified{
    grid-template-columns:repeat(2,1fr)!important;
    gap:10px!important;
  }
  .plus-gallery-wrap .plus-gallery-item,
  .bk-gallery .bk-item,
  .gallery-unified .bk-item{ aspect-ratio:1/1; }
}






.bukoma-doprava-tab {
    width: 100%;
    border-collapse: collapse;
}

.bukoma-doprava-tab th, .bukoma-doprava-tab td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.bukoma-doprava-tab th {
    background-color: #f2f2f2;
}

.bold {
    font-weight: bold;
}

.description {
    text-align: left;
}

.free {
    color: green; /* nebo jiná barva pro zvýraznění */
}

/* Responzivní styly */
@media screen and (max-width: 600px) {
    .bukoma-doprava-tab, .bukoma-doprava-tab thead, .bukoma-doprava-tab tbody, .bukoma-doprava-tab th, .bukoma-doprava-tab td {
        display: block;
        width: 100%;
    }

    .bukoma-doprava-tab thead {
        display: none; /* Skryjeme hlavičku na menších obrazovkách */
    }

    .bukoma-doprava-tab tr {
        margin-bottom: 15px; /* Mezera mezi řádky */
    }

    .bukoma-doprava-tab td {
        position: relative;
        padding-left: 50%; /* Přidáme padding pro prostor pro popis */
    }

    .bukoma-doprava-tab td::before {
        position: absolute;
        left: 10px;
        width: 40%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
    }

    .bukoma-doprava-tab td:nth-of-type(1)::before { content: "Metoda"; }
    .bukoma-doprava-tab td:nth-of-type(2)::before { content: "Popis"; }
    .bukoma-doprava-tab td:nth-of-type(3)::before { content: "Limit"; }
    .bukoma-doprava-tab td:nth-of-type(4)::before { content: "Cena"; }
}
.bukoma-platby-tab {
    width: 100%;
    border-collapse: collapse;
}

.bukoma-platby-tab th, .bukoma-platby-tab td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.bukoma-platby-tab th {
    background-color: #f2f2f2;
}

.description {
    text-align: left;
}

.free {
    color: green; /* nebo jiná barva pro zvýraznění */
}

.disabled {
    color: red; /* pro zobrazení neplatných možností */
}

/* Responzivní styly */
@media screen and (max-width: 600px) {
    .bukoma-platby-tab, .bukoma-platby-tab thead, .bukoma-platby-tab tbody, .bukoma-platby-tab th, .bukoma-platby-tab td {
        display: block;
        width: 100%;
    }

    .bukoma-platby-tab thead {
        display: none; /* Skryjeme hlavičku na menších obrazovkách */
    }

    .bukoma-platby-tab tr {
        margin-bottom: 15px; /* Mezera mezi řádky */
    }

    .bukoma-platby-tab td {
        position: relative;
        padding-left: 50%; /* Přidáme padding pro prostor pro popis */
    }

    .bukoma-platby-tab td::before {
        position: absolute;
        left: 10px;
        width: 40%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
    }

    .bukoma-platby-tab td:nth-of-type(1)::before { content: "Metoda"; }
    .bukoma-platby-tab td:nth-of-type(2)::before { content: "Popis"; }
    .bukoma-platby-tab td:nth-of-type(3)::before { content: "Cena"; }
}


/* TOC box - OBSAH zarovnaný doleva */
.bukoma-cta-box.bk--toc-left{ text-align:left; }
.bukoma-cta-box.bk--toc-left ul{ list-style:none; padding-left:0; margin:10px 0 0 0; }
.bukoma-cta-box.bk--toc-left li{ padding:6px 0; }
.bukoma-cta-box.bk--toc-left ul ul{ margin-left:16px; font-size:95%; } /* podúrovně */
.bukoma-cta-box.bk--toc-left a{ text-decoration:underline; text-underline-offset:2px; }

@media (min-width: 1100px){
  .bk-toc.bk--cols-2{ column-count:2; column-gap:32px; }
}










/* === [GLB] Popisek v GLightboxu – jasná barva textu + odkazu === */
.glightbox-container .gslide-desc,
.glightbox-container .gslide-description,
.glightbox-container .gdesc-inner{
  color: #111 !important;                 /* tmavý text popisku */
}

.glightbox-container .gslide-desc a,
.glightbox-container .gslide-description a,
.glightbox-container .gdesc-inner a{
  color: inherit !important;              /* odkaz převezme tmavou barvu */
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.glightbox-container .gslide-desc a:hover,
.glightbox-container .gslide-description a:hover,
.glightbox-container .gdesc-inner a:hover{
  text-decoration: none;
}
/* Titulek v GLightboxu */
.glightbox-container .gslide-title{
  color:#111 !important;
  font-weight:700;
  margin:0 0 4px;
}
/* Hover štítek – také pro variantu bez <span> wrapperu */
.plus-gallery-wrap .plus-gallery-item > a[data-hover]::after,
.gallery-unified .bk-item > a[data-hover]::after{
  content: attr(data-hover);
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.65));
  color:#fff; font-size:14px; font-weight:700; text-align:center;
  opacity:0; transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none; z-index:3;
}
@media (hover:hover){
  .plus-gallery-wrap .plus-gallery-item > a[data-hover]:hover::after,
  .gallery-unified .bk-item > a[data-hover]:hover::after{
    opacity:1; transform:none;
  }
}

/* Pojistka: <a> pokryje celou dlaždici i bez <span>; zabrání „polovičním“ náhledům */
.plus-gallery-wrap .plus-gallery-item > a.glb,
.gallery-unified .bk-item > a.glb{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
}

/* IMG vždy vyplní rámeček (bez posunu o 50 %) */
.plus-gallery-wrap .plus-gallery-item a.glb img,
.gallery-unified .bk-item a.glb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  transform:none !important;
}

/* --- [GLB] Obrázky v galerii – anulace svislého centrování přes top:50% --- */
.plus-gallery-wrap .plus-gallery-item > span > a.glb img,
.plus-gallery-wrap .plus-gallery-item > a.glb img,
.gallery-unified       .bk-item    > span > a.glb img,
.gallery-unified       .bk-item    > a.glb img{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;      /* už máte, ponecháváme pro jistotu */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
/* === [GLB] Hover štítek – hardened (oba DOM scénáře, se/bez <span>) === */
.plus-gallery-wrap .plus-gallery-item > a.glb[data-hover]::after,
.plus-gallery-wrap .plus-gallery-item > span > a.glb[data-hover]::after,
.plus-gallery-wrap .plus-gallery-item > a[data-hover]::after,
.plus-gallery-wrap .plus-gallery-item > span > a[data-hover]::after,
.gallery-unified .bk-item > a.glb[data-hover]::after,
.gallery-unified .bk-item > span > a.glb[data-hover]::after,
.gallery-unified .bk-item > a[data-hover]::after,
.gallery-unified .bk-item > span > a[data-hover]::after{
  content: attr(data-hover);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  color: #fff;
  font-size: 14px; font-weight: 700; text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  z-index: 3;
}

@media (hover:hover){
  .plus-gallery-wrap .plus-gallery-item > a[data-hover]:hover::after,
  .plus-gallery-wrap .plus-gallery-item > span > a[data-hover]:hover::after,
  .gallery-unified .bk-item > a[data-hover]:hover::after,
  .gallery-unified .bk-item > span > a[data-hover]:hover::after{
    opacity: 1; transform: none;
  }
}

/* Keyboard focus (když není hover) */
.plus-gallery-wrap .plus-gallery-item > a[data-hover]:focus-visible::after,
.plus-gallery-wrap .plus-gallery-item > span > a[data-hover]:focus-visible::after,
.gallery-unified .bk-item > a[data-hover]:focus-visible::after,
.gallery-unified .bk-item > span > a[data-hover]:focus-visible::after{
  opacity: 1; transform: none;
}






/* BUKOMA – CTA (čistá verze) ==================================================== */
/* Nahrazuje všechny starší CTA bloky.                                             */

/* ── Tokeny ───────────────────────────────────────────────────────────────────── */
:root{
  /* Barvy tlačítek */
  --cta-bg: #138a6b;
  --cta-bg-hover: #0f6e57;
  --cta-fg: #fff;

  /* Vzhled + pohyb */
  --cta-outline: color-mix(in srgb, var(--cta-bg) 25%, transparent);
  --cta-shadow: 0 3px 10px rgba(0,0,0,.06);
  --cta-shadow-hover: 0 6px 16px rgba(0,0,0,.10);
  --cta-radius: 999px;
  --cta-min-h: 46px;     /* 44px+ pro touch */
  --cta-gap: 10px;

  /* Povrch karet CTA (PDP sekce) */
  --cta-surface: color-mix(in srgb, var(--cta-bg) 6%, #fff);
  --cta-surface-border: color-mix(in srgb, var(--cta-bg) 22%, transparent);
  --cta-title: #0f6e57;
  --cta-text-muted: #4a4a4a;
}

/* ── Tlačítka – globální základ ──────────────────────────────────────────────── */
.bukoma-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cta-gap);
  min-height: var(--cta-min-h);
  padding: 12px 18px;
  border-radius: var(--cta-radius);
  border: 2px solid var(--cta-bg);
  background: var(--cta-bg);
  color: var(--cta-fg) !important;
  font-weight: 800;
  font-size: 16px;     /* (případně 17–18px pro AA bez změny barvy) */
  line-height: 1.2;
  letter-spacing: .2px;
  text-decoration: none !important;   /* přetluče podtržení ze šablony */
  text-align: center;
  box-shadow: var(--cta-shadow);
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .03s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bukoma-button:hover{
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
  box-shadow: var(--cta-shadow-hover);
  transform: translateY(-1px);
}

.bukoma-button:active{ transform: translateY(0); }

.bukoma-button:focus-visible{
  outline: 3px solid var(--cta-outline);
  outline-offset: 2px;
}

/* Outline varianta – globálně zůstává „outline“ */
.bukoma-button--alt{
  background: transparent;
  color: var(--cta-bg) !important;
  border-color: var(--cta-bg);
  box-shadow: none;
}
/* Jemný hover i mimo PDP, ale stále outline */
.bukoma-button--alt:hover{
  background: color-mix(in srgb, var(--cta-bg) 12%, #fff);
  border-color: var(--cta-bg-hover);
}

/* Disabled (pokud někde použijete) */
.bukoma-button[aria-disabled="true"],
.bukoma-button.is-disabled{
  opacity: .6;
  pointer-events: none;
}

/* ── CTA sekce na PDP (váže se na váš HTML wrapper .bk-cta-grid) ─────────────── */
.bk-cta-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-block: 16px 24px;
}
@media (min-width: 740px){
  .bk-cta-grid{ grid-template-columns: 1fr 1fr; }
}

.bk-cta-grid .bukoma-cta-box{
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  /* fallback + moderní mix */
  background: #f1f8f6;                       /* fallback */
  background: var(--cta-surface);
  border: 1px solid var(--cta-surface-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.bk-cta-grid .bukoma-cta-box h3{
  margin: 0 0 2px;
  color: var(--cta-title);
  font-size: clamp(17px, 1rem + .2vw, 20px);
  line-height: 1.25;
}

.bk-cta-grid .bukoma-cta-box p{
  margin: 0 0 8px;
  color: var(--cta-text-muted);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Zarovnat tlačítko ke spodnímu okraji pro stejné výšky karet */
.bk-cta-grid .bukoma-cta-box .bukoma-button{ margin-top: auto; }

/* ALT tlačítko v CTA kartě – jistota soft fillu + bez podtržení */
.bk-cta-grid .bukoma-cta-box > a.bukoma-button.bukoma-button--alt{
  /* fallback + moderní mix */
  background-color: #ecf6f3 !important; /* fallback pro starší prohlížeče */
  background: color-mix(in srgb, var(--cta-bg) 8%, #fff) !important;
  border-color: var(--cta-bg) !important;
  color: var(--cta-bg) !important;
  box-shadow: var(--cta-shadow);
  text-decoration: none !important;       /* přetluče podtržení v obsahu */
}

.bk-cta-grid .bukoma-cta-box > a.bukoma-button.bukoma-button--alt:hover{
  background-color: #d9ece7 !important;   /* fallback */
  background: color-mix(in srgb, var(--cta-bg) 16%, #fff) !important;
  border-color: var(--cta-bg-hover) !important;
}

/* Pro jistotu vypnout podtržení i na primární variantě v gridu */
.bk-cta-grid .bukoma-cta-box > a.bukoma-button,
.bk-cta-grid .bukoma-cta-box > a.bukoma-button:hover{
  text-decoration: none !important;
}

}

/* Respekt k uživatelům s omezením animací */
@media (prefers-reduced-motion: reduce){
  .bukoma-button{ transition: none; transform: none !important; }
}

/* CTA ikonky – jen v .bk-cta-grid */
.bk-cta-grid .bk-cta-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  margin: -2px 0 8px;
  background: color-mix(in srgb, var(--cta-bg) 10%, #fff);
  border: 1px solid var(--cta-surface-border);
}
.bk-cta-grid .bk-cta-icon svg{
  width:22px; height:22px; fill: var(--cta-bg);
}
/* Jemnější spacing a stejné výšky karet */
.bk-cta-grid .bukoma-cta-box{
  display:flex; flex-direction:column; /* stejná výška řádku, tlačítko dolů */
  gap: 10px;
  padding: 18px 22px;
}

.bk-cta-grid .bukoma-cta-box h3{
  margin: 0 0 6px;
}

.bk-cta-grid .bukoma-cta-box p{ margin: 0; }
.bk-cta-grid .bukoma-cta-box ul{
  margin: 4px 0 12px;
  padding-left: 1.1rem;
  color: var(--cta-text-muted);
  font-size: 15px; line-height: 1.45;
}
.bk-cta-grid .bukoma-cta-box ul li{ margin: .2em 0; }

.bk-cta-grid .bukoma-cta-box .bukoma-button{ margin-top: auto; } /* tlačítko na dno */
/* Mapování CTA na barvy šablony (bez globálních zásahů) */
:root{
  --cta-bg:        #2E5F66; /* Konverzní barva */
  --cta-bg-hover:  #1F4E21; /* Konverzní po najetí */
  --cta-title:     #1F4E21; /* nadpis v kartě */
  --cta-surface:   color-mix(in srgb, var(--cta-bg) 6%, #fff);
  --cta-surface-border: color-mix(in srgb, var(--cta-bg) 22%, transparent);
}

/* Lepší kontrast outline tlačítka (pravá karta) – AA pro 16px text */
.bk-cta-grid .bukoma-button.bukoma-button--alt{
  color: #1F4E21 !important;
  border-color: #1F4E21;
}
.bk-cta-grid .bukoma-button.bukoma-button--alt:hover{
  background: color-mix(in srgb, var(--cta-bg) 16%, #fff);
  color: #1F4E21 !important;
  border-color: #1F4E21;
}

/* ============================================================================ */




/* === BUKOMA • paleta (WCAG-safe) ============================== */
:root{
  /* Základ */
  --bk-bg: #FFFFFF;
  --bk-text: #0F172A;      /* hlavní text (na #fff ≈ 15.3:1) */
  --bk-text-weak: #334155; /* sekundární text (na #fff ≈ 10.35:1) */
  --bk-border-ui: #64748B; /* rámečky vstupů (na #fff ≈ 4.76:1) */

  /* Primární/brand (sjednoceno s konverzní barvou) */
  --bk-primary: #2E5F66;        /* CTA */
  --bk-primary-hover: #275056;  /* :hover */
  --bk-primary-active: #1F4348; /* :active/focus-inside */

  /* Odkazy */
  --bk-link: #0F766E;           /* na #fff ≈ 5.47:1 */
  --bk-link-hover: #0A4F49;     /* ≈ 9.43:1 */
  --bk-link-visited: #0B5E58;   /* ≈ 7.62:1 */

  /* Stavové barvy – “solid” + “soft” varianta */
  --bk-success: #2E7D32;        /* solid, text bílý (≈ 5.13:1) */
  --bk-success-soft: #E8F5E9;   /* BG pro alerty */
  --bk-success-text: #1B5E20;   /* text na soft BG (≈ 7.00:1) */

  --bk-warning: #B45309;        /* solid, text bílý (≈ 5.02:1) */
  --bk-warning-soft: #FEF3C7;   /* BG pro upozornění */
  --bk-warning-text: #92400E;   /* text na soft BG (≈ 6.37:1) */

  --bk-error: #B91C1C;          /* solid, text bílý (≈ 6.47:1) */
  --bk-error-soft: #FEE2E2;
  --bk-error-text: #991B1B;     /* ≈ 6.80:1 */

  --bk-info: #075985;           /* solid, text bílý (≈ 7.56:1) */
  --bk-info-soft: #E0F2FE;
  --bk-info-text: #0C4A6E;      /* ≈ 8.24:1 */

  /* Focus ring – dvouvrstvý, aby byl vidět na bílém i na CTA */
  --bk-focus-outer: #FFFFFF;    /* 1. prstenec */
  --bk-focus-inner: #0F766E;    /* 2. prstenec (≥3:1 na #fff) */
}

/* Základní aplikace */
body { color: var(--bk-text); }
a { color: var(--bk-link); text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--bk-link-hover); }

/* Primární tlačítka/CTA – pokud nepoužíváš .btn-primary ze šablony */
.bukoma-button, .button-primary, .btn-primary{
  background: var(--bk-primary); color:#fff; border-color: transparent;
}
.bukoma-button:hover, .button-primary:hover, .btn-primary:hover{
  background: var(--bk-primary-hover); color:#fff;
}
.bukoma-button:active, .button-primary:active, .btn-primary:active{
  background: var(--bk-primary-active); color:#fff;
}

/* Focus ring – dobře viditelný i na barevných plochách */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--bk-focus-outer), 0 0 0 4px var(--bk-focus-inner);
  border-radius: 4px;
}

/* Form prvky – kontrastní rámečky */
input, select, textarea, .form-control{
  border-color: var(--bk-border-ui);
}

/* Alerty / badge – “soft” varianta (příjemná a čitelná) */
.alert--success, .badge--success{
  color: var(--bk-success-text);
  background: var(--bk-success-soft);
  border:1px solid color-mix(in srgb, var(--bk-success) 25%, #fff);
}
.alert--warning, .badge--warning{
  color: var(--bk-warning-text);
  background: var(--bk-warning-soft);
  border:1px solid color-mix(in srgb, var(--bk-warning) 25%, #fff);
}
.alert--error, .badge--error{
  color: var(--bk-error-text);
  background: var(--bk-error-soft);
  border:1px solid color-mix(in srgb, var(--bk-error) 25%, #fff);
}
.alert--info, .badge--info{
  color: var(--bk-info-text);
  background: var(--bk-info-soft);
  border:1px solid color-mix(in srgb, var(--bk-info) 25%, #fff);
}
/* [Fix] CTA bannery v článcích – nebarvit podle .content-inner a{color:var(--bk-link)} */
.content-inner a.ji-hp-cats__item,
.content-inner a.ji-hp-cats__item:visited,
.content-inner a.ji-hp-cats__item:hover,
.content-inner a.ji-hp-cats__item:focus{
  color: inherit !important;      /* nepřebírat zelenou */
  text-decoration: none;          /* na dlaždici nechceme podtržení */
}

/* Text v overlayi banneru drž vždy bílý */
.content-inner a.ji-hp-cats__item .ji-hp-cats__overlay,
.content-inner a.ji-hp-cats__item .ji-hp-cats__overlay span{
  color: #fff !important;
}





/* === BUKOMA • Galerie – jednotný hover štítek na náhledech ================== */
/* Kotva přes celou dlaždici (aby ::after mělo správný kontext) */
.plus-gallery-wrap .plus-gallery-item > span > a,
.gallery-unified .bk-item > span > a{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:100% !important;
}

/* Obrázek vyplní dlaždici (bez posunu o 50 %) */
.plus-gallery-wrap .plus-gallery-item > span > a img,
.gallery-unified .bk-item > span > a img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Hover štítek – „Otevřít detailní foto“ z data-hover */
.plus-gallery-wrap .plus-gallery-item > a[data-hover]::after,
.gallery-unified .bk-item > a[data-hover]::after{
  content: attr(data-hover);
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.65));
  color:#fff; font-size:14px; font-weight:700; text-align:center;
  opacity:0; transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none; z-index:3;
}
@media (hover:hover){
  .plus-gallery-wrap .plus-gallery-item > a[data-hover]:hover::after,
  .gallery-unified .bk-item > a[data-hover]:hover::after{ opacity:1; transform:none; }
}

/* Fallback: když by JS nepřidal data-hover, zobraz výchozí text */
.plus-gallery-wrap .plus-gallery-item > a:not([data-hover])::after,
.plus-gallery-wrap .plus-gallery-item > span > a:not([data-hover])::after,
.gallery-unified .bk-item > a:not([data-hover])::after,
.gallery-unified .bk-item > span > a:not([data-hover])::after{
  content:"Otevřít detailní foto";
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px; background:linear-gradient(transparent, rgba(0,0,0,.65));
  color:#fff; font-size:14px; font-weight:700; text-align:center;
  opacity:0; transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none; z-index:3;
}
@media (hover:hover){
  .plus-gallery-wrap .plus-gallery-item > a:not([data-hover]):hover::after,
  .plus-gallery-wrap .plus-gallery-item > span > a:not([data-hover]):hover::after,
  .gallery-unified .bk-item > a:not([data-hover]):hover::after,
  .gallery-unified .bk-item > span > a:not([data-hover]):hover::after{
    opacity:1; transform:none;
  }
}

/* Výjimka: nad hlavní (hero) fotkou na PDP štítek nechceme */
.p-detail .p-image a::after,
.p-detail [data-testid="mainImage"] a::after,
.p-detail .p-image-wrapper > .p-image a::after{ content:none !important; }











/* BK · CART name fix – tvrdé selektory včetně data-testid a micro řádku */
#tableCart td.p-name,
tr[data-micro="cartItem"] td.p-name,
[data-testid="cellProductName"].p-name,
.cart-table td.p-name,
.cart-items td.p-name,
.cart td.p-name{
  display: table-cell !important;
  width: auto !important;
  max-width: none !important;
  min-width: 260px !important;       /* aby nekolabovala na ~32 px */
  white-space: normal !important;
  float: none !important;
  vertical-align: top !important;
}
#tableCart td.p-name .main-link,
[data-testid="cellProductName"].p-name .main-link{
  white-space: normal !important;
  display: inline !important;
}



/* BK • Košík – uhladit zobrazení vloženého kupónu */
.cart .discount-coupon,
.cart .discount-coupon * {
  font-size: 0.95rem;      /* menší optika */
  font-weight: 500;        /* ne „nadpisově“ tučné */
  line-height: 1.35;
}
.cart .discount-coupon h2,
.cart .applied-discount-coupon h2 {
  font-size: 1rem;         /* stáhnout přehnaný heading */
  margin: 0 0 6px;
}


/* BK • screen‑reader‑only helper */
.sr-only, .bk-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 1px, 1px) !important;
  white-space: nowrap !important; border: 0 !important;
}




/* === BK • Hover štítek galerie – finální varianta pro oba DOM scénáře === */
.plus-gallery-wrap .plus-gallery-item > a[data-hover]::after,
.plus-gallery-wrap .plus-gallery-item > span > a[data-hover]::after,
.gallery-unified .bk-item > a[data-hover]::after,
.gallery-unified .bk-item > span > a[data-hover]::after{
  content: attr(data-hover);
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.65));
  color:#fff; font-size:14px; font-weight:700; text-align:center;
  opacity:0; transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none; z-index:3;
}
@media (hover:hover){
  .plus-gallery-wrap .plus-gallery-item > a[data-hover]:hover::after,
  .plus-gallery-wrap .plus-gallery-item > span > a[data-hover]:hover::after,
  .gallery-unified .bk-item > a[data-hover]:hover::after,
  .gallery-unified .bk-item > span > a[data-hover]:hover::after{
    opacity:1; transform:none;
  }
}
/* také zobraz při klávesové navigaci */
.plus-gallery-wrap .plus-gallery-item > a[data-hover]:focus-visible::after,
.plus-gallery-wrap .plus-gallery-item > span > a[data-hover]:focus-visible::after,
.gallery-unified .bk-item > a[data-hover]:focus-visible::after,
.gallery-unified .bk-item > span > a[data-hover]:focus-visible::after{
  opacity:1; transform:none;
}

/* Tap target ≥ 44px pro šipky v GLightboxu (mobil) */
@media (max-width: 768px){
  .glightbox-container .gprev,
  .glightbox-container .gnext{
    min-width:44px; min-height:44px;
  }
}



/* === BK • Fold-heavy bloky: vykreslit až při přiblížení (bez CLS) === */
@supports (content-visibility: auto) {
  /* PDP panely – přizpůsobte názvy podle vaší šablony */
  .p-detail #tab-popis,
  .p-detail #tab-parametry,
  .p-detail .p-description,
  .p-detail .product-parameters,
  /* upsell / cross-sell / související */
  .p-detail .recommended,
  .p-detail .also-buy,
  #relatedProducts,
  .products-recommended,
  /* hodnocení / FAQ / delší texty */
  .p-detail .reviews,
  .bk-faq,
  .bukoma-text .longread {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;   /* rezervuje výšku → žádný posun */
  }
}


/* === BK • Skip link (viditelný až při focusu) === */
.bk-skip-link{
  position:absolute; left:8px; top:-999px;
  background:#0f766e; color:#fff; padding:10px 14px;
  border-radius:8px; text-decoration:none; font-weight:700;
  z-index:10000;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.bk-skip-link:focus{ top:8px; outline:none; }
@media (prefers-reduced-motion:reduce){ .bk-skip-link{ transition:none; } }


/* === BK • Tap target ≥ 44px (mobil) === */
@media (max-width: 768px){
  /* šipky lightboxu */
  .glightbox-container .gprev,
  .glightbox-container .gnext{ min-width:44px; min-height:44px; }

  /* paginace, drobná tlačítka +/−, ikonová tlačítka ap. */
  .pagination a,
  .quantity .plus, .quantity .minus,
  .icon-button, .btn-icon{
    min-width:44px; min-height:44px; display:inline-grid; place-items:center;
  }
}


/* === BK • Textové odkazy: vždy podtržené v textu (ne v tlačítkách/CTA/nav) === */
:where(.content-inner, .pageArticleDetail, .bukoma-text, .p-detail, .product-detail, .article, .blog, .rte, .text)
  :where(p, li, dd, figcaption, blockquote, .text, .desc, .description) a
  :not(.bukoma-button):not(.btn):not(.button):not([role="button"]):not([class*="btn-"])
  :not(.tabs a):not(nav a):not(.pagination a){
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

/* navazující stavy (využívá vaši paletu) – jen pro textové odkazy, NE tlačítka */
:where(.content-inner, .pageArticleDetail, .bukoma-text, .p-detail, .product-detail, .article, .blog, .rte, .text)
  :where(p, li, dd, figcaption, blockquote, .text, .desc, .description) a:visited
  :not(.bukoma-button):not(.btn):not(.button):not([role="button"]):not([class*="btn-"]):not(.bk-cap-cta)
  :not(.tabs a):not(nav a):not(.pagination a){
  color: var(--bk-link-visited);
}


/* === BK • Header: bezpečný sizing pro ikonky v menu ========================= */
:where(header, .header, nav, .navigation, .top-navigation)
  :where(.menu-image img, [data-testid="headerMenuItem"] img){
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}


/* CTA v titulkové kartě – varianta A (výraznější kontrast, bez podtržení) */
.bk-cap-cta{
  display:inline-block;
  justify-self:start;
  margin-top:6px;
  padding:12px 18px;
  border-radius:999px;
  background:#006A61;            /* AA kontrast na #fff textu */
  color:#fff;                     /* vynutit bílou */
  font-weight:700;
  text-decoration:none;           /* bez podtržení */
  -webkit-font-smoothing:antialiased;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.bk-cap-cta:visited{ 
  color:#fff;                     /* zabrání „fialové“ visited */
  text-decoration:none;
}

.bk-cap-cta:hover,
.bk-cap-cta:focus{
  background:#005A4F;             /* ještě vyšší kontrast na hover */
  color:#fff;                      /* přebije globální a:hover { color:… } */
  text-decoration:none;            /* přebije globální a:hover { text-decoration:underline } */
  transform:translateY(-1px);
}

/* Viditelný a kontrastní focus ring */
.bk-cap-cta:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 3px rgba(0,0,0,.25);
}

/* Pojistky pro případ agresivních globálních pravidel (stejná specifita / pozdější načtení) */
a.bk-cap-cta:hover,
a.bk-cap-cta:focus{ 
  color:#fff !important; 
  text-decoration:none !important; 
}

/* Volitelné: méně pohybu pro uživatele s omezením animací */
@media (prefers-reduced-motion: reduce){
  .bk-cap-cta{ transition:none; }
}




/* === BUKOMA – Realizace: minimalistické styly pro boxy === */
.bk-case__perex{ margin: 8px 0 14px; line-height: 1.55; }

.bk-case-card{
  border:1px solid #e6eef5; background:#fbfdff; border-radius:12px;
  padding:16px 18px; margin:18px 0 22px; box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.bk-case-card > h2{ margin:0 0 10px; }
.bk-case-card__list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 16px; margin:0 0 12px; padding:0; list-style:none;
}
@media (max-width:720px){ .bk-case-card__list{ grid-template-columns:1fr; } }
.bk-case-card__cta{ display:flex; gap:10px; flex-wrap:wrap; }

.bk-used-products{ margin:20px 0 0; }
.bk-used-products > h2{ margin:0 0 10px; }
.bk-used-products__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px; margin:0; padding:0; list-style:none;
}
@media (max-width:720px){ .bk-used-products__grid{ grid-template-columns:1fr; } }
.bk-prod-card{
  display:block; border:1px solid #e6eef5; background:#fff; border-radius:12px;
  overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.bk-prod-card img{ display:block; width:100%; height:auto; }
.bk-prod-card__title{ display:block; padding:10px 12px; font-weight:700; }




/* === BUKOMA – Footer chips v2 (.bk-chip-list / .bk-chip) ================== */
/* Bezpečně zacílené na nový HTML; nezasáhne jiné seznamy v patičce */
.footer .bk-chip-list,
.bk-chip-list{
  list-style: none;                /* zruší odrážky */
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: minmax(44px, auto); /* tap target >= 44 px */
  gap: 5px;
  align-content: start;

  /* Všechny chipy budou stejně široké – podle nejdelší položky */
  width: max-content;              /* kontejner = šířka nejdelšího chipu */
}

.footer .bk-chip-list li,
.bk-chip-list li{ margin: 0; }

.footer .bk-chip,
.bk-chip{
  --bk-chip-fg:        #0F766E;    /* text */
  --bk-chip-fg-hover:  #0A4F49;    /* text na hover */
  --bk-chip-bg:        #ffffff;    /* pozadí */
  --bk-chip-bg-hover:  #F7FBFA;    /* pozadí na hover */
  --bk-chip-border:    #DFE7E4;    /* okraj */

  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;                     /* roztáhne se na šířku kontejneru */
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--bk-chip-border);
  border-radius: 999px;
  background: var(--bk-chip-bg);
  color: var(--bk-chip-fg);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums; /* hezké zarovnání 5,0 · 265 */
}

/* Ikona uvnitř chipu (★ / ✓) – malý „badge“ */
.footer .bk-chip__icon,
.bk-chip__icon{
  inline-size: 20px;
  block-size: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #E6F4F1;
  color: var(--bk-chip-fg);
  font-size: 12px;
  line-height: 1;
}

/* Hover/focus – vlastní barvy, nepřebijí se globálním a:hover */
.footer .bk-chip:hover,
.bk-chip:hover{
  background: var(--bk-chip-bg-hover);
  color: var(--bk-chip-fg-hover);
  border-color: #CFE3DF;
  text-decoration: none;
}

/* Zachovat barvu i ve :visited (kvůli globálním pravidlům pro odkazy) */
.footer .bk-chip:visited,
.bk-chip:visited{ color: var(--bk-chip-fg); }

/* Viditelný focus prstenec (WCAG 2.2) */
.footer .bk-chip:focus-visible,
.bk-chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bk-chip-fg);
}

/* Mobil: 2 sloupce, centrování obsahu, šířka = 100 % kontejneru */
@media (max-width: 768px){
  .footer .bk-chip-list,
  .bk-chip-list{
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .footer .bk-chip,
  .bk-chip{ justify-content: center; }
}

/* 1) Vypnout odrážky i „tečkové“ pseudo-prvky šablony */
:where(footer, .footer) .bk-chip-list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
:where(footer, .footer) .bk-chip-list > li{
  list-style: none !important;
  margin: 10px 0;
  padding: 0 !important;
  background: none !important;       /* kdyby šablona dávala background-bullet */
  position: relative;                 /* reset pro šablony s abs. pseudo-bullet */
}
:where(footer, .footer) .bk-chip-list > li::marker{ content: '' !important; }
:where(footer, .footer) .bk-chip-list > li::before{ content: none !important; }

/* 2) Vlastní „chip“ (pilulka) — svislé vystředění textu + ikon */
.bk-chip{
  display: inline-flex;
  align-items: center;                /* >>> svislé vystředění ikon i textu */
  gap: 10px;
  min-height: 40px;                   /* můžete zvýšit na 44px kvůli mobilům */
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #dfe7e4;
  background: #fff;
  color: #0f172a;
  text-decoration: none;
  line-height: 1.2;                   /* zabrání „lezení“ textu nahoru */
}

/* ikona hvězdičky / fajfky: ať je vizuálně uprostřed */
.bk-chip__icon{
  display: inline-grid;               /* center bez ohledu na font metrics */
  place-items: center;
  width: 18px; height: 18px;
  font-weight: 900; line-height: 1;
  color: var(--bk-primary, #2E5F66);  /* konzistentní s vaší paletou */
}

/* text v chipu – jistota stejné výšky řádku */
.bk-chip__text{ line-height: 1.2; }

/* focus ring pro přístupnost */
.bk-chip:focus-visible{
  outline: 2px solid var(--bk-primary, #2E5F66);
  outline-offset: 2px;
}

/* volitelné: lehký hover efekt (bez změny kontrastu textu) */
.bk-chip:hover{ background: #f6f8f7; }

/* === Stránka /recenze/ === */
.bk-reviews--page { margin: 2.5rem 0; }
.bk-reviews__head { margin-bottom: 1rem; }
.bk-reviews__sub { color: #4b5563; margin: 0; }

/* Grid: mobil 1 sloupec, desktop 2:1 (Shoptet širší) */
.bk-grid { display: grid; gap: 1rem; }
.bk-grid--two-13 { grid-template-columns: 1fr; }
@media (min-width: 980px) { .bk-grid--two-13 { grid-template-columns: 2fr 1fr; } }

/* Karty a obsah */
.bk-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.bk-card__body { padding: 1rem; }
.bk-card__title { margin: 0 0 .5rem 0; font-size: 1.15rem; }

/* Iframe wrapper + placeholder (CLS prevence) */
.bk-embed { position: relative; }
.bk-embed--auto { min-height: 520px; }
@media (min-width: 640px)  { .bk-embed--auto { min-height: 560px; } }
@media (min-width: 992px) { .bk-embed--auto { min-height: 600px; } }
.bk-embed__placeholder {
  display: grid; place-items: center; min-height: inherit;
  background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 12px;
  color: #9ca3af; font-size: .95rem; margin: 0;
}

/* CTA řádek – tlačítka vlevo a vpravo */
.bk-cta-row { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bk-cta-row--between { justify-content: space-between; }
.bk-note {
  margin-top: .5rem;
  font-size: clamp(1.3rem, 1.1rem + 0.3vw, 1.6rem); 
  line-height: 1.5;
  color: #4b5563;
}

/* Volitelně mírné "oříznutí" vzhledu iframu, než uživatel klikne Zobrazit více */
.bk-embed--clip { border-radius: 12px; overflow: hidden; }




/* MineCore – krátká poznámka pod cenami */
.bk-panel-note{
  margin: 10px 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #2f3a3f;
}

/* aby nikdy nepřetékala šířka sloupce */
.area-cfg .bk-panel-note{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* PDP: skryj hvězdičky, pokud produkt nemá žádné hodnocení */
.p-detail .stars-wrapper:not(:has(.star-on)),
.product-detail .stars-wrapper:not(:has(.star-on)) {
  display: none !important;
}





/* =========================================
   [PDP-VIDEO] tlačítko + modal (YT embed)
   (REVIZE: stabilní BR tlačítko, lepší čitelnost, a11y)
   ========================================= */

/* Tlačítko "Přehrát video" v rohu hlavní fotky */
.bk-play{
  position: absolute; right: 12px; bottom: 12px;
  z-index: 60; /* nad shoptet "mousetrap" (~50) */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  min-height: 48px; /* tap target */
  border: 0; border-radius: 12px; cursor: pointer;

  /* Vzhled – drž se jednoduchého kontrastu, bez animovaného posunu */
  background: #111827; color: #fff;
  font-weight: 700;
  font-size: 14px; line-height: 1;  /* fix 14px, žádné zmenšení */
  font-family: inherit;              /* respektuj písmo šablony */
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: background .2s ease;   /* žádný translate na hover -> neujíždí */
}

/* Hover/Focus: jen barva, žádný posun = stabilní kurzor */
.bk-play:hover{ background: #0e1523; }

/* Ikona "play" (trojúhelník) – čistě v CSS, vedle textu */
.bk-play__icon{ width:0; height:0; }
.bk-play__icon::before{
  content:""; display:block; width:0; height:0;
  border-left: 14px solid #fff;
  border-top: 9px  solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 2px; /* optické vycentrování */
}

/* Popisek: desktop vs. mobil */
.bk-play__label-mobile{ display: none; }
@media (max-width: 480px){
  .bk-play{ padding: 9px 11px; }                 /* lehce kompaktnější */
  .bk-play__label-desktop{ display: none; }
  .bk-play__label-mobile{ display: inline; }
  .bk-play__icon::before{
    border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px;
  }
}

/* Modal (native <dialog>) */
.bk-video-modal{
  width: min(920px, 92vw);
  border: 0; padding: 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  background: transparent; /* žádné bílé orámování u některých UA */
}
.bk-video-modal::backdrop{ background: rgba(0,0,0,.6); }

/* Fallback modal (div) + backdrop pro starší Safari/iOS */
.bk-video-modal.bk-fallback{
  position: fixed; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 9998; display: none;
}
.bk-video-modal.bk-fallback.is-open{ display: block; }
.bk-video-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 9997; display: none;
}
.bk-video-backdrop.is-open{ display: block; }

/* Embed ratio (16:9 default) + portrait 9:16) */
.bk-video-embed{ position: relative; height: 0; padding-bottom: 56.25%; }
.bk-video-embed iframe, .bk-video-embed video{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background:#000;
}
.bk-video-modal.is-portrait .bk-video-embed{ padding-bottom: 177.78%; } /* 9:16 */

/* Prefer moderní aspect-ratio, fallback na padding-bottom výše */
@supports (aspect-ratio: 1 / 1){
  .bk-video-embed{ height: auto; padding: 0; aspect-ratio: 16 / 9; }
  .bk-video-modal.is-portrait .bk-video-embed{ aspect-ratio: 9 / 16; }
}

/* Close tlačítko */
.bk-video-close{
  position: absolute; right: 8px; top: 6px; z-index: 2;
  border: 0; background: rgba(0,0,0,.35); color: #fff;
  width: 40px; height: 40px; border-radius: 999px;
  font-size: 28px; line-height: 1; cursor: pointer;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* A11y: viditelný focus */
.bk-play:focus-visible,
.bk-video-close:focus-visible{
  outline: 2px solid #fff; outline-offset: 2px;
}

/* Motion preference: bez animací posunu */
@media (prefers-reduced-motion: reduce){
  .bk-play{ transition: none; }
}

/* iOS safe-area – ať tlačítko nesedí pod „home bar“ */
@supports (top: env(safe-area-inset-top)){
  .bk-play{
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* === BK: návrat vzhledu tlačítka (pilulka vpravo dole) === */
.bk-play{
  position: absolute; right: 10px; bottom: 10px;
  z-index: 60;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  min-height: 44px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: #111827; color: #fff;
  font: 700 13px/1 inherit;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  white-space: nowrap;
}
.bk-play:hover{ transform: translateY(-1px); }

/* trojúhelník vedle textu */
.bk-play__icon{ width:0; height:0; line-height:0; }
.bk-play__icon::before{
  content:""; display:block; width:0; height:0;
  border-left: 14px solid #fff;
  border-top: 9px  solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 2px;
}

/* popisek pro mobil */
.bk-play__label-mobile{ display: none; }
@media (max-width: 480px){
  .bk-play{ padding: 7px 10px; }
  .bk-play__label-desktop{ display: none; }
  .bk-play__label-mobile{ display: inline; }
}
/* === BK: fix tlačítka videa (trojúhelník + mobilní label) === */
.bk-play{
  position:absolute; right:12px; bottom:12px; z-index:60;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; min-height:44px;
  border:0; border-radius:10px; cursor:pointer;
  background:#111827; color:#fff; font:700 14px/1 inherit;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  white-space:nowrap;
}

/* Stabilní ikona: vlastní box, v něm trojúhelník – nic se „neusekne“ u levého oblouku */
.bk-play__icon{
  width:24px; height:24px; flex:0 0 24px;
  display:inline-grid; place-items:center; line-height:0;
}
.bk-play__icon::before{
  content:""; display:block; width:0; height:0;
  border-left: 12px solid #fff;            /* trojúhelník */
  border-top:   7px solid transparent;
  border-bottom:7px solid transparent;
  /* malý posun, aby byl opticky uprostřed v boxu */
  margin-left:2px;
}

/* Desktop label default */
.bk-play__label-desktop{ display:inline; }
.bk-play__label-mobile{  display:none;   }

/* Přepnutí na zkrácený label pro mobily (reálný breakpoint šablon) */
@media (max-width: 767.98px){
  .bk-play{ right:12px; bottom:12px; padding:9px 12px; font:700 13px/1 inherit; }
  .bk-play__label-desktop{ display:none !important; }
  .bk-play__label-mobile{  display:inline !important; }
  .bk-play__icon{ width:22px; height:22px; flex:0 0 22px; }
  .bk-play__icon::before{
    border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px;
  }
}

/* Volitelně: jemný hover bez posunu (žádné „uskakování“) */
@media (hover:hover){
  .bk-play:hover{ background:#0e1523; }
}


/* BK: zruš posun tlačítka na hover (stabilní, bez mikropohybu) */
.bk-play:hover { transform: none !important; }





/* BK – Tip box in cart */
.bk-tip {
  border: 2px solid #bfe4d7; /* světle zelená linka */
  border-radius: 12px;
  background: #eef9f5;
  padding: 16px;
  margin: 16px 0;
}
.bk-tip__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.bk-tip__head svg { width: 22px; height: 22px; flex: 0 0 22px; }
.bk-tip__title { font-weight: 700; font-size: 18px; margin: 0; }
.bk-tip__desc { margin: 0 0 12px 32px; color: #374151; line-height: 1.45; }
.bk-tip__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 32px; }
.bk-tip__btn {
  appearance: none; border: 0; border-radius: 10px; padding: 10px 14px;
  background: #2f3540; color: #fff; font-weight: 700; cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease;
}
.bk-tip__btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.bk-tip__btn[disabled] { opacity: .6; cursor: wait; }
.bk-tip__msg { margin-left: 32px; margin-top: 10px; font-size: 13px; color: #065f46; }
@media (max-width: 640px) {
  .bk-tip__desc, .bk-tip__buttons, .bk-tip__msg { margin-left: 0; }
}






/* ==========================================================================
   BUKOMA • MEGA MENU — FINAL CLEAN (Merkur)
   – dvouřádkové názvy v hlavním menu, bez fixních výšek a bez ořezávání
   – obsahuje šířkové omezení, aby se text opravdu lámal
   ========================================================================== */

@media (min-width: 992px) {
  /* 0) Konfigurovatelné maximum délky textu v znakech (ch) */
  :root {
    --bk-menu-ch: 14;
  } /* 12–18ch dle potřeby; 14ch je dobrý start */

  /* 1) Wrappery nahoře – nikdy neřezat ani nefixovat výšku */
  .navigation-in,
  .navigation-in .menu-level-1-wrap,
  .navigation-in .menu-level-1 {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 2) Hlavní řada položek – umožnit více řádků položek (když je jich hodně) */
  .navigation-in .menu-level-1 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.75rem 1rem;
    margin: 0;
    padding: 0;
  }

  /* 3) Každá položka – musí se smět zúžit */
  .navigation-in .menu-level-1 > li {
    flex: 0 1 auto !important;
    min-width: 0 !important; /* klíčové u flex položky */
    list-style: none;
    margin: 0;
  }

  /* 4) Odkaz – flex kvůli šipce + skutečné zalomení textu
         DŮLEŽITÉ: max-inline-size vymezí šířku, aby text přešel na 2 řádky */
  .navigation-in .menu-level-1 > li > a {
    display: inline-flex !important;
    flex-wrap: wrap !important; /* text může na další řádek */
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-sizing: border-box;
    padding: 10px 12px;
    line-height: 1.2 !important;
    text-align: center;
    min-inline-size: 0 !important; /* ať se může zúžit */
    max-inline-size: calc(var(--bk-menu-ch) * 1ch) !important; /* ← klíč */
    white-space: normal !important; /* zrušit theme nowrap */
    overflow: visible;
    text-wrap: balance; /* moderní hezčí zalomení (podpora nevadí) */
  }

  /* 5) Všechny textové uzly uvnitř odkazu musí umět lámat */
  .navigation-in .menu-level-1 > li > a b,
  .navigation-in .menu-level-1 > li > a span {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important; /* láme i dlouhá slova */
    word-break: normal !important;
    line-height: 1.2 !important;
  }

  /* 6) Šipka – malá, fixní, ať netlačí text na jeden řádek */
  .navigation-in .menu-level-1 > li > a .submenu-arrow {
    flex: 0 0 auto;
    display: inline-block;
    line-height: 1;
  }

  /* 7) (volitelné) Přesně 2 řádky + výpustka pro extrémně dlouhé názvy – zapni jen když chceš tvrdé ořezání na 2 řádky */
  /*
  .navigation-in .menu-level-1 > li > a b,
  .navigation-in .menu-level-1 > li > a span:first-child {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  */
}


/* ==========================================================
   BUKOMA • Mega menu — CSS Opravy a vylepšení v2.1
   OPRAVY:
   1. ✅ Banner se nyní zobrazuje správně
   2. ✅ Obrázky 992+ zvětšeny (230px → 260px)
   3. ✅ Tablet 768-992px: text blíže k obrázku
   VYLEPŠENÍ:
   4. ✅ Přidáno "Příslušenství" (4. řádek v levém sloupci)
   5. ✅ Podpora pro menu-item-760, 986, 992
   ========================================================== */

/* === CSS Custom Properties === */
:root {
  --bk-mega-left-width-desktop: 360px;
  --bk-mega-left-width-tablet: 280px;
  --bk-mega-panel-gap: 20px;
  --bk-mega-panel-padding: 20px 22px;
  --bk-mega-card-gap: 16px;
  --bk-mega-grid-cols-desktop: 3;
  --bk-mega-grid-cols-tablet: 2;
  --bk-mega-active-bg: #009688;
  --bk-mega-hover-bg: #f3f5f7;
  --bk-mega-border-radius: 10px;
  --bk-mega-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
  /* OPRAVA 2: Větší obrázky na desktopu */
  --bk-mega-thumb-height-desktop: 260px;
  --bk-mega-thumb-height-tablet: 160px;
}

/* ==========================================================
   SPOLEČNÉ STYLY PRO VŠECHNA MEGA MENU (768px+)
   ========================================================== */
@media (min-width: 768px) {
  /* === Panel base === */
  .navigation-in .menu-level-1 > li[class*='menu-item-'] > ul.menu-level-2[data-bk-mega] {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff;
    border-radius: var(--bk-mega-border-radius);
    box-shadow: var(--bk-mega-shadow);
    padding: 0 !important;
    margin: 0 !important;
    z-index: 6000;
    height: auto !important;
    list-style: none;
  }

  /* Skrýt původní Shoptet položky */
  .menu-item-724 > ul.menu-level-2[data-bk-mega] > li:not(.bk-panel):not(.bk-panel-banner),
  .menu-item-760 > ul.menu-level-2[data-bk-mega] > li:not(.bk-panel):not(.bk-panel-banner) {
    display: none !important;
  }

  /* === Panel struktura (grid: levý + pravý) === */
  .bk-panel {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    align-items: start !important;
    gap: var(--bk-mega-panel-gap) !important;
    padding: var(--bk-mega-panel-padding) !important;
    box-sizing: border-box;
    min-height: 380px !important;
  }

  .bk-panel > div {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    display: block !important;
  }

  .bk-panel::before,
  .bk-panel::after {
    display: none !important;
  }

  /* === LEVÝ SLOUPEC === */
  .bk-left a.menu-image,
  .bk-left .submenu-arrow {
    display: none !important;
  }

  .bk-left,
  .bk-left .bk-l2 {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .bk-left .bk-l2 {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    row-gap: 10px;
  }

  .bk-left .bk-l2 > li {
    float: none !important;
    position: static !important;
    display: flex !important;
    align-items: center;
    min-height: 48px !important;
    padding: 10px 14px !important;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .bk-left .bk-l2 > li:hover {
    background: var(--bk-mega-hover-bg);
  }

  .bk-left .bk-l2 > li.bk-active {
    background: var(--bk-mega-active-bg);
    color: #fff;
  }

  /* FIX: Hover na aktivním L2 - zachovat bílý text, jen podtrhnout */
  .bk-left .bk-l2 > li.bk-active:hover {
    background: var(--bk-mega-active-bg);
    color: #fff;
  }

  .bk-left .bk-l2 > li.bk-active:hover > a,
  .bk-left .bk-l2 > li.bk-active:hover > div > a {
    text-decoration: underline;
    color: #fff !important;
  }

  .bk-left .bk-l2 > li > a,
  .bk-left .bk-l2 > li > div > a {
    color: inherit;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .bk-left li > ul,
  .bk-left li > div > ul {
    display: none !important;
  }

  /* === PRAVÝ SLOUPEC === */
  .bk-mega-right {
    min-width: 0 !important;
    padding-left: 4px;
  }

  .bk-mega-right .bk-grid {
    display: grid !important;
    gap: var(--bk-mega-card-gap) !important;
    min-width: 320px !important;
  }

  /* === KARTY === */
  .bk-card {
    display: block;
    border: 1px solid #e7eaef;
    border-radius: var(--bk-mega-border-radius);
    padding: 12px;
    text-decoration: none;
    color: #111 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    height: auto !important;
  }

  .bk-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    border-color: #dfe3e9;
    transform: translateY(-1px);
  }

  .bk-thumb {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f7f9;
    position: relative;
    padding-bottom: 75%; /* 4:3 aspect ratio (600x450px: výška/šířka = 0.75 = 75%) */
  }

  .bk-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: none !important;
  }

  .bk-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25 !important;
    text-align: center !important;
    font-weight: 600;
    color: #111 !important;
    font-size: 14px !important;
    /* OPRAVA 3: Menší margin na tabletu */
    margin-top: 8px;
  }

  /* === PROMO BANNER === */
  .bk-promo {
    display: block !important;
    width: 100%;
    border-radius: var(--bk-mega-border-radius);
    overflow: hidden;
    border: 1px solid #e7eaef;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    background: #fff;
  }

  /* OPRAVA 1: Banner obrázky musí být viditelné */
  .bk-promo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 10 / 3;
    object-fit: contain;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    filter: none !important;
  }

  .bk-banner-link {
    display: block;
    border-radius: var(--bk-mega-border-radius);
    overflow: hidden;
    border: 1px solid #e7eaef;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s;
  }

  .bk-banner-link:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  }

  .bk-banner-link img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* === MERKUR OVERRIDES === */
  [class*='menu-item-'] .bk-mega-right img,
  [class*='menu-item-'] .bk-thumb img,
  [class*='menu-item-'] .bk-promo img,
  [class*='menu-item-'] .bk-banner-link img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
  }

  [class*='menu-item-'] .bk-card,
  [class*='menu-item-'] .bk-card * {
    height: auto !important;
  }
}

/* ==========================================================
   TABLET (768px - 991px)
   ========================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .navigation-menu,
  .navigation-in,
  .navigation-top {
    display: block !important;
  }

  .sidebar-navigation {
    display: none !important;
  }

  /* Panel - menší šířka */
  .navigation-in .menu-level-1 > li[class*='menu-item-'] > ul.menu-level-2[data-bk-mega] {
    width: min(900px, 90vw) !important;
  }

  .bk-panel {
    grid-template-columns: var(--bk-mega-left-width-tablet) 1fr !important;
    min-height: 360px !important;
    padding: 16px 18px !important;
  }

  /* Levý sloupec - kompaktnější */
  .bk-left .bk-l2 > li {
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 14px;
  }

  /* Pravý grid - 2 sloupce */
  .bk-mega-right .bk-grid {
    grid-template-columns: repeat(var(--bk-mega-grid-cols-tablet), minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Karty - menší */
  .bk-card {
    padding: 10px;
  }

  /* OPRAVA 3: Thumb menší, title blíže */
  .bk-thumb {
    min-height: var(--bk-mega-thumb-height-tablet);
    aspect-ratio: 4 / 3;
    margin-bottom: 6px; /* Sníženo z 8px */
  }

  .bk-title {
    font-size: 13px !important;
    margin-top: 4px; /* Sníženo z 8px */
  }
}

/* ==========================================================
   DESKTOP (992px+)
   ========================================================== */
@media (min-width: 992px) {
  /* Panel - plná šířka */
  .navigation-in .menu-level-1 > li[class*='menu-item-'] > ul.menu-level-2[data-bk-mega] {
    width: min(1180px, 95vw) !important;
  }

  .bk-panel {
    grid-template-columns: var(--bk-mega-left-width-desktop) 1fr !important;
    min-height: 420px !important;
  }

  /* Pravý grid - 3 sloupce */
  .bk-mega-right .bk-grid {
    grid-template-columns: repeat(var(--bk-mega-grid-cols-desktop), minmax(0, 1fr)) !important;
  }

  /* OPRAVA 2: Větší obrázky na desktopu */
  .bk-thumb {
    min-height: var(--bk-mega-thumb-height-desktop);
    aspect-ratio: 4 / 3;
    margin-bottom: 10px;
  }

  .bk-title {
    margin-top: 6px;
  }
}

/* ==========================================================
   VELMI MALÝ TABLET (768px - 850px)
   ========================================================== */
@media (min-width: 768px) and (max-width: 850px) {
  .navigation-in .menu-level-1 > li[class*='menu-item-'] > ul.menu-level-2[data-bk-mega] {
    width: min(700px, 92vw) !important;
  }

  .bk-panel {
    grid-template-columns: 240px 1fr !important;
    padding: 12px 14px !important;
    gap: 14px !important;
  }

  .bk-left .bk-l2 > li {
    min-height: 40px !important;
    padding: 6px 10px !important;
    font-size: 13px;
  }

  .bk-mega-right .bk-grid {
    gap: 10px !important;
  }

  .bk-card {
    padding: 8px;
  }

  .bk-thumb {
    min-height: 120px;
  }

  .bk-title {
    font-size: 12px !important;
    margin-top: 3px;
  }
}

/* ==========================================================
   FOCUS STYLES (Přístupnost)
   ========================================================== */
@media (min-width: 768px) {
  .bk-left .bk-l2 > li > a:focus,
  .bk-card:focus,
  .bk-banner-link:focus {
    outline: 2px solid var(--bk-mega-active-bg);
    outline-offset: 2px;
  }

  .bk-left .bk-l2 > li > a:focus-visible,
  .bk-card:focus-visible,
  .bk-banner-link:focus-visible {
    outline: 2px solid var(--bk-mega-active-bg);
    outline-offset: 2px;
  }

  .bk-left .bk-l2 > li > a:focus:not(:focus-visible),
  .bk-card:focus:not(:focus-visible),
  .bk-banner-link:focus:not(:focus-visible) {
    outline: none;
  }
}

/* ==========================================================
   ANIMACE (Performance optimized)
   ========================================================== */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .bk-card,
  .bk-banner-link {
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  }

  .bk-left .bk-l2 > li {
    transition: background 0.15s ease, color 0.15s ease;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .bk-card,
  .bk-banner-link,
  .bk-left .bk-l2 > li {
    transition: none !important;
  }

  .bk-card:hover {
    transform: none !important;
  }
}

/* ==========================================================
   PRINT STYLES
   ========================================================== */
@media print {
  .navigation-in .menu-level-1 > li[class*='menu-item-'] > ul.menu-level-2[data-bk-mega] {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MEGA MENU - Oprava zobrazení submenu při hoveru
   ═══════════════════════════════════════════════════════════
*/
@media (min-width: 768px) {
  /* === KRITICKÁ OPRAVA: Skrýt submenu defaultně === */
  .navigation-in .menu-level-1 > li[class*='menu-item-'] > ul.menu-level-2[data-bk-mega] {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* === Zobrazit submenu při hoveru === */
  .navigation-in .menu-level-1 > li[class*='menu-item-']:hover > ul.menu-level-2[data-bk-mega] {
    display: block !important;
    opacity: 1;
    visibility: visible;
  }

  /* === Banner panely musí být viditelné uvnitř submenu === */
  .navigation-in
    .menu-level-1
    > li[class*='menu-item-']:hover
    > ul.menu-level-2[data-bk-mega]
    .bk-panel-banner {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* === Zajistit, že bannery nejsou viditelné mimo hover === */
  .navigation-in .menu-level-1 > li[class*='menu-item-']:not(:hover) .bk-panel-banner {
    display: none !important;
  }
}

/* === MEGA MENU – FIX PACK (2025‑11‑12) ================================= */
@media (min-width: 768px) {
  /* 1) Kritická oprava: thumbnaily musí VYPLNIT rámeček 4:3 */
  [class*='menu-item-'] .bk-thumb {
    position: relative !important;
    aspect-ratio: 4 / 3;
  }

  [class*='menu-item-'] .bk-thumb img {
    position: absolute !important;
    inset: 0 !important; /* top/right/bottom/left: 0 */
    width: 100% !important;
    height: 100% !important; /* přepíše nechtěné height:auto */
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 2) Změkčení „Merkur override“ – neaplikovat height:auto na thumbnaily
        (ponecháme height:auto jen pro bannery a promo) */
  [class*='menu-item-'] .bk-banner-link img,
  [class*='menu-item-'] .bk-promo img {
    height: auto !important;
    position: static !important;
  }

  /* 3) L2-only GRID – stejné chování jako pravý sloupec u L2+L3 */
  .bk-panel-grid {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--bk-mega-panel-padding) !important;
    box-sizing: border-box;
    display: block !important;
  }

  .bk-panel-grid .bk-grid {
    display: grid !important;
    gap: var(--bk-mega-card-gap) !important;
    min-width: 320px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .bk-panel-grid .bk-grid {
    grid-template-columns: repeat(var(--bk-mega-grid-cols-tablet), minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (min-width: 992px) {
  .bk-panel-grid .bk-grid {
    grid-template-columns: repeat(var(--bk-mega-grid-cols-desktop), minmax(0, 1fr)) !important;
  }
}

/* === [MEGA MENU] L3 karty – poměr 4:3 na desktopu (bez padding-bottom hacku) === */
@media (min-width: 992px) {
  .bk-mega-right .bk-grid .bk-thumb {
    aspect-ratio: 4 / 3;
    padding-bottom: 0 !important; /* vypnout starý hack */
    min-height: 0 !important;     /* nenechat ho protahovat box */
    position: relative;            /* kotva pro absolutní IMG */
  }

  .bk-mega-right .bk-grid .bk-thumb img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* === [L2/L3 stránky] Kategorie/tiles – stejný 4:3 poměr i u dlaždic v obsahu === */
@media (min-width: 992px) {
  .ji-hp-cats__items .ji-hp-cats__img,
  .ji-hp-cats__items .ji-hp-cats__img img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
  }
}

/* Desktop: o chloupek nižší banner (≈ 35:16) */
@media (min-width: 992px) {
  .ji-hp-cats__items a[href*='/vinylove-podlahy-k-lepeni'] .ji-hp-cats__img,
  .ji-hp-cats__items a[href*='/vinylove-podlahy-k-lepeni'] .ji-hp-cats__img img {
    aspect-ratio: 35 / 16;
    object-fit: cover;
  }
}

/* Tablet: o něco více (≈ 8:3) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ji-hp-cats__items a[href*='/vinylove-podlahy-k-lepeni/'] .ji-hp-cats__img,
  .ji-hp-cats__items a[href*='/vinylove-podlahy-k-lepeni/'] .ji-hp-cats__img img {
    aspect-ratio: 8 / 3;
    object-fit: cover;
  }
}

/* === BUKOMA • 986/992 – bílé plátno UL + most + šipka (sjednocené) ========== */
@media (min-width: 992px) {
  /* Kotvy – ať nic neřeže dropdown a máme referenční řádek */
  nav#navigation.visible,
  #navigation,
  .navigation-in {
    position: relative !important;
    overflow: visible !important;
    z-index: 2147483646 !important;
  }

  nav#navigation.visible .menu-level-1,
  #navigation .menu-level-1,
  .navigation-in .menu-level-1 {
    position: relative !important;
    overflow: visible !important;
    z-index: 2147483646 !important;
  }

  /* LI 986/992 nesmí být positioned – UL se má centrovat k řádku */
  nav#navigation.visible .menu-level-1 > li.menu-item-986,
  nav#navigation.visible .menu-level-1 > li.menu-item-992,
  #navigation .menu-level-1 > li.menu-item-986,
  #navigation .menu-level-1 > li.menu-item-992,
  .navigation-in .menu-level-1 > li.menu-item-986,
  .navigation-in .menu-level-1 > li.menu-item-992 {
    position: static !important;
  }

  /* UL = bílý pruh přes šířku řádku (výchozí skryto) */
  nav#navigation.visible .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega],
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega],
  #navigation .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega],
  #navigation .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega],
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega],
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega] {
    --bk-arrow-x: 50%; /* vyplní JS */
    position: absolute !important;
    top: calc(100% + 8px) !important; /* mezera pod lištou */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(1180px, 95vw) !important;
    background: #fff !important; /* ← BÍLÉ PLÁTNO */
    padding: 20px 22px !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14) !important;
    display: none !important;
    opacity: 0;
    visibility: hidden;
    z-index: 2147483647 !important;
  }

  /* Zobrazit při hoveru jak LI, tak panelu */
  nav#navigation.visible .menu-level-1 > li.menu-item-986:hover > ul.menu-level-2[data-bk-mega],
  nav#navigation.visible .menu-level-1 > li.menu-item-992:hover > ul.menu-level-2[data-bk-mega],
  #navigation .menu-level-1 > li.menu-item-986:hover > ul.menu-level-2[data-bk-mega],
  #navigation .menu-level-1 > li.menu-item-992:hover > ul.menu-level-2[data-bk-mega],
  .navigation-in .menu-level-1 > li.menu-item-986:hover > ul.menu-level-2[data-bk-mega],
  .navigation-in .menu-level-1 > li.menu-item-992:hover > ul.menu-level-2[data-bk-mega],
  nav#navigation.visible .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]:hover,
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]:hover,
  #navigation .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]:hover,
  #navigation .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]:hover,
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]:hover,
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]:hover {
    display: block !important;
    opacity: 1;
    visibility: visible;
  }

  /* MOST přes mezeru – na UL (drží otevřené při přejezdu) */
  nav#navigation.visible .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]::before,
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]::before,
  #navigation .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]::before,
  #navigation .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]::before,
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]::before,
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
    background: transparent;
  }

  /* ŠIPKA – směrem dolů, zarovnána dle --bk-arrow-x (relativně k UL!) */
  :root {
    --bk-menu-active-bg: #2b6e65; /* vaše tmavě zelená */
  }

  nav#navigation.visible .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]::after,
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]::after,
  #navigation .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]::after,
  #navigation .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]::after,
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]::after,
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]::after {
    content: '';
    position: absolute;
    top: -8px;
    left: var(--bk-arrow-x);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--bk-menu-active-bg); /* směr dolů */
    z-index: 2147483648;
  }

  /* Karta uvnitř = jen obsah; bílý dělá UL */
  nav#navigation.visible
      .menu-level-1
      > li.menu-item-986
      > ul.menu-level-2[data-bk-mega]
      > li.bk-panel-banner
      > a.bk-banner-link,
  nav#navigation.visible
      .menu-level-1
      > li.menu-item-992
      > ul.menu-level-2[data-bk-mega]
      > li.bk-panel-banner
      > a.bk-banner-link,
  #navigation .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega] > li.bk-panel-banner > a.bk-banner-link,
  #navigation .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega] > li.bk-panel-banner > a.bk-banner-link,
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega] > li.bk-panel-banner > a.bk-banner-link,
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega][data-bk-mega] > li.bk-panel-banner > a.bk-banner-link {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
  }

  nav#navigation.visible .menu-level-1 > li.menu-item-986 .bk-panel-banner img,
  nav#navigation.visible .menu-level-1 > li.menu-item-992 .bk-panel-banner img,
  #navigation .menu-level-1 > li.menu-item-986 .bk-panel-banner img,
  #navigation .menu-level-1 > li.menu-item-992 .bk-panel-banner img,
  .navigation-in .menu-level-1 > li.menu-item-986 .bk-panel-banner img,
  .navigation-in .menu-level-1 > li.menu-item-992 .bk-panel-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
  }
}

/* Tablet/mobil – bannery ve svislém menu nechceme */
@media (max-width: 991.98px) {
  nav#navigation.visible .menu-level-1 li.menu-item-986 .bk-panel-banner,
  nav#navigation.visible .menu-level-1 li.menu-item-992 .bk-panel-banner,
  #navigation .menu-level-1 li.menu-item-986 .bk-panel-banner,
  #navigation .menu-level-1 li.menu-item-992 .bk-panel-banner,
  .navigation-in .menu-level-1 li.menu-item-986 .bk-panel-banner,
  .navigation-in .menu-level-1 li.menu-item-992 .bk-panel-banner {
    display: none !important;
  }
}

/* Backdrop – sjednocené pro všechny varianty navigace */
@media (min-width: 992px) {
  #bk-mega-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 31, 44, 0.35); /* stejné ztmavení jako ostatní mega menu */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* neblokuje hover na navigaci */
    transition: opacity 0.15s ease;
    z-index: 2147483645; /* pod panelem (2147483647), nad obsahem */
  }

  #bk-mega-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
  }
}

/* Udrž navigační řádek v jednom řádku (~992–1240px) */
@media (min-width: 992px) and (max-width: 1240px) {
  /* nedovol zalomení a zmenši vodorovný padding odkazů */
  #navigation .menu-level-1,
  nav#navigation.visible .menu-level-1,
  .navigation-in .menu-level-1 {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  #navigation .menu-level-1 > li > a,
  nav#navigation.visible .menu-level-1 > li > a,
  .navigation-in .menu-level-1 > li > a {
    padding-left: 14px !important;
    padding-right: 14px !important; /* o chlup méně – vejde se „Vzorky“ */
    white-space: nowrap !important;
  }
}
/* 986/992 — širší bílý rámeček dole a po stranách, horní necháme beze změny */
@media (min-width: 992px){
  nav#navigation.visible .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega],
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega],
  #navigation .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega],
  #navigation .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega],
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega],
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]{
    /* pořadí: top  right/left  bottom  left  */
    /*           ↑    ↑   ↑     ↑     ↑
                 top  right     bottom left   */
    padding: 24px 100px 24px 48px !important; 
  }
}

/* [MEGA MENU] Grid/L3 karty — 4:3 dlaždice + fill image */
@media (min-width: 768px){
  [class*='menu-item-'] .bk-thumb{
    position: relative !important;
    aspect-ratio: 4 / 3;
  }
  [class*='menu-item-'] .bk-thumb img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;   /* přepíše height:auto */
    object-fit: cover !important;
    display: block !important;
  }
}

/* Volitelně: optická výška thumbů (desktop) */
:root{ --bk-mega-thumb-height-desktop: 260px; }

/* BK MEGA — Scoped mini pack (bezpečné jen pro mega‑menu) */

/* 1) Zobrazování panelu jen na hover (ať není „mimo“ layout) */
@media (min-width:768px){
  .navigation-in .menu-level-1 > li[class*="menu-item-"] > ul.menu-level-2{
    position:absolute !important; left:50% !important; top:100% !important;
    transform:translateX(-50%) !important;
    display:none !important; opacity:0; visibility:hidden;
    background:#fff; border-radius:10px; box-shadow:0 12px 26px rgba(0,0,0,.14);
    padding:20px 22px; margin:0; list-style:none; z-index:6000;
  }
  .navigation-in .menu-level-1 > li[class*="menu-item-"]:hover > ul.menu-level-2,
  .navigation-in .menu-level-1 > li[class*="menu-item-"] > ul.menu-level-2:hover{
    display:block !important; opacity:1; visibility:visible;
  }

  /* 2) Karty/grid – jistý poměr 4:3 (vyplnit rámeček) */
  .navigation-in .menu-level-1 > li[class*="menu-item-"] .bk-thumb{
    position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:8px; background:#f5f7f9;
  }
  .navigation-in .menu-level-1 > li[class*="menu-item-"] .bk-thumb img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; object-fit:cover !important;
    display:block !important; filter:none !important; visibility:visible !important; opacity:1 !important;
  }

  /* 3) Promo/banner v L2 bez L3 – IMG viditelně + přirozená výška */
  .navigation-in .menu-level-1 > li[class*="menu-item-"] .bk-promo img,
  .navigation-in .menu-level-1 > li[class*="menu-item-"] .bk-banner-link img{
    display:block !important; width:100% !important; height:auto !important;
    visibility:visible !important; opacity:1 !important; position:static !important;
  }

  /* 4) Pravý sloupec – smysluplná mřížka */
  .navigation-in .menu-level-1 > li[class*="menu-item-"] .bk-mega-right .bk-grid{
    display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; min-width:320px;
  }
}

/* Tablet: 2 sloupce + menší mezery */
@media (min-width:768px) and (max-width:991px){
  .navigation-in .menu-level-1 > li[class*="menu-item-"] .bk-mega-right .bk-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  }
}

/* 986/992 – širší „bílý rám“ dole a po stranách; horní ponechat */
@media (min-width:992px){
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2,
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2{
    /* pořadí: top | right | bottom | left */
    padding:24px 100px 24px 48px !important;
  }
}
/* BUKOMA – fix klikání na „Více“ (blokovala ho horní lišta) */
@media (min-width:992px){
  .top-navigation-bar,
  .top-navigation-bar .container,
  .top-navigation-bar::before,
  .top-navigation-bar::after{
    pointer-events: none !important;
  }
  .top-navigation-bar a,
  .top-navigation-bar button,
  .top-navigation-bar [role="button"],
  .top-navigation-bar [role="menuitem"],
  .top-navigation-bar [href]{
    pointer-events: auto !important;
  }

  #navigation,
  nav#navigation.visible,
  .navigation-in{
    position: relative !important;
    z-index: 2 !important;
  }
}

/* BK — Hover "koridor" pro bannery: Poptávky (#986) a Vzorky (#992) */
@media (min-width: 992px){
  /* 1) Kotva pro ::after */
  #navigation .menu-level-1 > li.menu-item-986 > a,
  #navigation .menu-level-1 > li.menu-item-992 > a,
  nav#navigation.visible .menu-level-1 > li.menu-item-986 > a,
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > a,
  .navigation-in .menu-level-1 > li.menu-item-986 > a,
  .navigation-in .menu-level-1 > li.menu-item-992 > a{
    position: relative !important;
    z-index: 2 !important;
  }

  /* 2) Neviditelný koridor pod L1 položkou (udrží :hover při přesunu myši) */
  #navigation .menu-level-1 > li.menu-item-986 > a::after,
  #navigation .menu-level-1 > li.menu-item-992 > a::after,
  nav#navigation.visible .menu-level-1 > li.menu-item-986 > a::after,
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > a::after,
  .navigation-in .menu-level-1 > li.menu-item-986 > a::after,
  .navigation-in .menu-level-1 > li.menu-item-992 > a::after{
    content: "";
    position: absolute;
    left: -6px;            /* záměrně o chlup širší než tlačítko */
    right: -6px;
    bottom: -14px;         /* sahá k hornímu okraji panelu */
    height: 18px;          /* velikost „mostu“ – lze doladit */
    background: transparent;
    pointer-events: auto;
  }

  /* 3) Při hoveru na LI, panelu nebo jeho mostu drž panel otevřený */
  .navigation-in .menu-level-1 > li.menu-item-986:hover > ul.menu-level-2[data-bk-mega],
  .navigation-in .menu-level-1 > li.menu-item-992:hover > ul.menu-level-2[data-bk-mega],
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2[data-bk-mega]:hover,
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2[data-bk-mega]:hover{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}











/* =========================================
   BK-FLOAT – Sticky CTA + BackToTop (base)
   ========================================= */
:root{
  /* výška sticky doplní JS – fallback 0 */
  --sticky-atc-h: 0px;

  /* BackToTop vzhled (barvu přepíšeme níže v brand overrides) */
  --bk-btt-size: 44px;
  --bk-btt-radius: 12px;
  --bk-btt-shadow: 0 8px 18px rgba(0,0,0,.18);

  /* z-index vrstva pro plováky */
  --bk-sticky-z: 9995;
}

/* --- BackToTop -------------------------------------------------------- */
.bk-backtotop{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--bk-sticky-z);
  width: var(--bk-btt-size);
  height: var(--bk-btt-size);
  border-radius: var(--bk-btt-radius);
  display: grid; place-items: center;
  text-decoration: none;
  box-shadow: var(--bk-btt-shadow);
  transform: translateY(16px);
  opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
  font-size: 0; line-height: 0; /* ikonu kreslí pseudo-element */
}
/* BK-FLOAT: fix ikony BackToTop */
.bk-backtotop{ color:#fff; }                   /* barva šipky */
.bk-backtotop .i{
  display:block;                                /* ať má šířku/výšku */
  width:12px; height:12px;
  border:2px solid currentColor;
  border-bottom:0; border-left:0;
  transform: rotate(-45deg);
}

.bk-backtotop.is-visible{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.bk-backtotop::before{
  content: ""; width: 12px; height: 12px;
  border: 2px solid currentColor; border-bottom: 0; border-left: 0;
  transform: rotate(-45deg);
}
@media (max-width: 768px){
  .bk-backtotop{ right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce){ .bk-backtotop{ transition: none; } }

/* --- Sticky CTA bar --------------------------------------------------- */
.sticky-atc{
  position: fixed; left: 0; right: 0; bottom: 0;
  transform: translateY(100%); transition: transform .25s ease;
  z-index: calc(var(--bk-sticky-z) + 1);
  background: #fff; color:#111;
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.sticky-atc--visible{ transform: translateY(0); }

.sticky-atc__inner{
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sticky-atc__title{ font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__meta{ font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__price{ font-weight: 700; font-size: 16px; }
.sticky-atc__btn{
  appearance: none; border: 0; border-radius: 8px;
  padding: 12px 16px; font-weight: 600; cursor: pointer;
  background:#111; color:#fff; /* přepíšeme brandem níže */
}
.sticky-atc__btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* mobil only default (desktop povolíte blokem ③) */
@media (min-width: 992px){ .sticky-atc{ display:none; } }

/* rezerva pod obsahem, když je sticky vidět */
body{ padding-bottom: var(--sticky-atc-h, 0); }

/* zvýraznění prvního nevybraného pole varianty */
.js-variant-highlight{ outline:2px solid currentColor; box-shadow:0 0 0 4px rgba(0,0,0,.08); }

/* =========================================
   BK-FLOAT – brand overrides (musí být poslední)
   ========================================= */
:root{
  /* převezme šablonovou barvu; fallback upravte na vaši „konverzní“ */
  --bk-accent: var(--color-primary, #34af80);
}
.sticky-atc__btn{ background: var(--bk-accent) !important; color:#fff !important; }
.bk-backtotop{ background: var(--bk-accent) !important; }
/* volitelné zvýraznění horní hrany lišty */
.sticky-atc{ border-top: 2px solid var(--bk-accent); }

/* povolí sticky bar i ≥ 992px – vhodné pro A/B test na desktopu */
/*@media (min-width: 992px){ .sticky-atc{ display:flex; } }*/

/* Jednoduchý fix – BackToTop vedle chatu (staticky) */
@media (min-width: 769px){
  .bk-backtotop{ right: 96px; } /* 24px okraj + ~72px bublina */
}
@media (max-width: 768px){
  .bk-backtotop{
    right: 88px; /* 16px okraj + ~72px bublina */
    bottom: calc(16px + env(safe-area-inset-bottom) + 8px);
  }
}
/* BackToTop – vždy bílá šipka přes <span class="i">, pseudo se vypíná */
.bk-backtotop{ color:#fff !important; }
.bk-backtotop .i{
  display:block;
  width:12px; height:12px;
  border:2px solid currentColor;
  border-bottom:0; border-left:0;
  transform: rotate(-45deg);
}

/* BK-FLOAT – BackToTop: kreslit šipku jen přes <span class="i"> */
.bk-backtotop{ color:#fff !important; }
.bk-backtotop::before{ content:none !important; display:none !important; } /* klíčové */
.bk-backtotop .i{
  display:block; width:12px; height:12px; box-sizing:border-box;
  border:2px solid currentColor; border-bottom:0; border-left:0;
  transform: rotate(-45deg);
}






/* karte recenze v kategorii */
/* karta je celá klikatelná */
.product--virtual .rv-card--hero{
  display:block; position:relative; z-index:5;
  height:100%; min-height:260px; border-radius:10px; overflow:hidden;
  background:#111 center/cover no-repeat;
}
.product--virtual .p::before,
.product--virtual .p::after{ content:none !important; }

/* tmavý přechod pro čitelnost textu */
.rv-card--hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
}

/* badge „Reference“ */
.rv-badge{
  position:absolute; top:10px; left:10px;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.9); color:#0F172A; padding:3px 8px; border-radius:999px;
}

/* obsah dole na kartě */
.rv-inner{ position:absolute; inset:auto 0 0 0; padding:16px; color:#fff;
  display:flex; flex-direction:column; gap:8px; }
.rv-head{ display:flex; gap:10px; align-items:center; margin:0; }
.rv-avatar{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; background:rgba(255,255,255,.9); color:#0F172A; }
.rv-meta{ font-size:13px; opacity:.9; }        /* ↑ z 12 px */
.rv-stars{ font-size:20px; color:#FFC107; text-shadow:0 1px 2px rgba(0,0,0,.6); }  /* větší + žluté */
.rv-text{ margin:4px 0 8px; font-size:15px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rv-cta{ font-size:14px; text-decoration:underline; }

/* klikne celá karta, vnitřek necháme „průchozí“ */
.product--virtual .rv-card--hero *{ pointer-events:none; }
.product--virtual .rv-card--hero{ pointer-events:auto; }

@media (max-width:480px){
  .rv-meta{ display:none; }
  .rv-card--hero{ min-height:220px; }
}
/* 1) Vizuální upgrady */
.rv-stars{ font-size:22px; letter-spacing:3px; color:#FFC107; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.rv-meta{ font-size:14px; opacity:.95; }
.rv-card--hero::before{
  /* silnější gradient = lepší čitelnost na světlých fotkách */
  background:linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.68) 100%);
}
.rv-badge{
  background:rgba(255,255,255,.92);
  font-weight:700;
}

/* 2) CTA – ať je jasněji kliknutelná */
.rv-cta{ text-decoration:underline; text-underline-offset:2px; }

/* 3) Hover (jen desktop) – drobný „lift“ */
@media (hover:hover){
  .product--virtual .rv-card--hero:hover{ transform:translateY(-2px); transition:transform .18s ease; }
}
@media (max-width: 640px){
  /* roztáhnout přes oba sloupce v typických shoptet mřížkách */
  #products .product--virtual,
  .products__list .product--virtual,
  .products .product--virtual{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .rv-card--hero{ min-height:240px; }
  .rv-text{ -webkit-line-clamp:4; font-size:15px; }
}












/* =========================================================
   Telefon + stav "otevřeno"
   ========================================================= */
.top-navigation-contacts .project-phone {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  line-height: 1.2;
}

.top-navigation-contacts .project-phone::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-right: 4px;
}

.top-navigation-contacts .project-phone > span {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}

.top-navigation-contacts .project-phone::after {
  content: attr(data-open-now);
  grid-column: 2;
  grid-row: 2;
  font-size: 11px;
  opacity: 0.8;
  white-space: nowrap;
}



/* =========================================================
   Hodnocení – desktop 5★, mobil 1★
   ========================================================= */
/* ZÁKLAD – 1 hvězda (platí pro 461–549 px) */
.trust-chip__icon::before {
  content: '★';
  color: #ffc107;
  font-size: 16px;
  line-height: 1;
}
.trust-chip__text strong {
  font-weight: 600;
  font-size: 13px;
  display: inline;
}


/* 5 hvězd pro 550–768 px */
@media (min-width: 551px) and (max-width: 768px) {
  .trust-chip__icon::before {
    content: '★★★★★';
    font-size: 15px;
    letter-spacing: 2px;
  }
}

/* 5 hvězd pro desktop ≥ 769 px */
@media (min-width: 769px) {
  .trust-chip__icon::before {
    content: '★★★★★';
    font-size: 15px;
    letter-spacing: 2px;
  }
}

/* Schovat rating na extra úzkých telefonech ≤ 480 px */
@media (max-width: 480px) {
  .trust-chip {
    display: none !important;
  }
}
/* Mezera mezi logem a hodnocením v headeru */
@media (max-width: 768px) {
  #header .site-name .trust-chip {
    margin-left: 8px;   /* klidně si uprav třeba na 10px */
  }
}

/* Text "4,9 / 5" */
.trust-chip__text {
  white-space: nowrap;   /* držet 4,9 / 5 na jednom řádku */
  font-size: 13px;
  font-weight: 600;
  color: #000;           /* stejné jako na desktopu */
}
/* Mobilní header – logo + hodnocení vedle sebe */
@media (max-width: 768px) {
  #header .site-name {
    display: flex;
    align-items: center;
    gap: 8px;          /* mezera mezi logem a hvězdičkami */
  }

  /* Logo – nenech ho zmenšovat */
  #header .site-name > a {
    flex: 0 0 auto;    /* nepovoluje shrink, bere svou přirozenou šířku */
  }

  /* Hodnocení – může se zmenšovat, ne logo */
  #header .site-name .trust-chip {
    flex: 0 1 auto;
    min-width: 0;
  }
}
/* Extra úzké displeje – logo se může zmenšit */
@media (max-width: 420px) {
  /* logo může trochu shrinkovat */
  #header .site-name > a {
    flex: 0 1 auto;
  }

  /* maximální šířka loga – uprav podle oka */
  #header .site-name img {
    max-width: 130px;
    height: auto;
  }
}

/* BK – fix klikatelnosti horní lišty „Více“ */
@media (min-width: 992px){
  .top-navigation-bar { 
    position: relative !important; 
    z-index: 50 !important;        /* lišta nad obsahem, ale pod mega menu */
  }

  /* Vypnout PE na kontejneru, zapnout je jen na interaktivních prvcích uvnitř */
  .top-navigation-bar,
  .top-navigation-bar .container {
    pointer-events: none !important;
  }
  .top-navigation-bar a,
  .top-navigation-bar button,
  .top-navigation-bar [role],
  .top-navigation-bar * {
    pointer-events: auto !important;
  }
}


/* menší vodorovný padding odkazů v zelené liště kolem 992–1240 px */
@media (min-width: 992px) and (max-width: 1240px){
  #navigation .menu-level-1 > li > a{
    padding-left: 14px !important;
    padding-right: 14px !important;
    white-space: nowrap !important;
  }
}








/* Stránka Hodnocení obchodu – wrapper všech recenzí */
body[class*="hodnoceni-obchodu"] #ratingsList {
  display: grid;
  grid-template-columns: 1fr;      /* mobil: 1 sloupec */
  gap: 24px;
}

/* tablet / menší notebooky – 2 sloupce */
@media (min-width: 768px) and (max-width: 1199px) {
  body[class*="hodnoceni-obchodu"] #ratingsList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* větší desktop – 3 sloupce */
@media (min-width: 1200px) {
  body[class*="hodnoceni-obchodu"] #ratingsList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Jedna recenze = kartička (na celé stránce hodnocení) */
body[class*="hodnoceni-obchodu"] .vote-wrap {
  display: block;                  /* zruší flex‑řádek od Shoptetu */
  margin: 0 0 24px 0;
  box-sizing: border-box;

  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Hlavička recenze (avatar, jméno, datum, hvězdy) */
body[class*="hodnoceni-obchodu"] .vote-header {
  width: 100%;
  border-right: 0;
  padding-right: 0;
  margin-bottom: 12px;
  text-align: center;
}

/* Text recenze – přes celou šířku karty */
body[class*="hodnoceni-obchodu"] .vote-content {
  width: 100%;
  border-left: 0;
  padding-left: 0;
  margin-top: 4px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}
/* Stránka Hodnocení obchodu – schovat globální box s posledními recenzemi */
body[class*="hodnoceni-obchodu"] .ratings.five-only.content-only {
  display: none;
}



/* Odkaz na stránku Reference na /hodnoceni-obchodu/ */
.bk-ratings-ref-link {
  margin: 0 0 1.5rem 0;
  font-size: 14px;
  color: #4b5563;
}

.bk-ratings-ref-link a {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================
   BK • Sticky CTA – Vzorky zdarma (MOBIL)
   ============================================ */
.bk-cta-samples {
  position: fixed;
  left: 12px;
  bottom: 16px;               /* případně uprav, pokud bude kolize s něčím dalším */
  display: none;              /* defaultně skryté, aktivuje se jen na mobilu + JS */
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #009688;        /* firemní tyrkysová */
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 3000;              /* aby bylo nad obsahem, ale klidně můžeš snížit/zvýšit */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* viditelný stav – řídí JS */
.bk-cta-samples--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Ikona v bublině */
.bk-cta-samples__icon {
  font-size: 20px;
  line-height: 1;
}

/* Text v bublině */
.bk-cta-samples__text {
  white-space: nowrap;
}

/* Aktivace pouze na mobilu */
@media (max-width: 767px) {
  .bk-cta-samples {
    display: inline-flex;
  }
}

/* Na větších displejích CTA úplně schováme (pro jistotu) */
@media (min-width: 768px) {
  .bk-cta-samples {
    display: none !important;
  }
}









/* Globálně: schovat kódy v produktových výpisech */
.category-products .product .p-code,
.products-block .product .p-code,
.products-page .product .p-code,
.products__list--main .product .p-code,
.product-list--main .product .p-code {
  display: none;
}









/* ==========================================================
   BUKOMA • Vinylové schody – PRŮBĚH REALIZACE (HERO + KROKY)
   ========================================================== */

/* ---------- HERO (sekční banner) ---------- */
/* ==========================================================
   BK • Hero switch (desktop vs mobile) – FIX
   ========================================================== */
.bk-process-heroWrap .bk-process-hero--mobile{ display: none; }
.bk-process-heroWrap .bk-process-hero--desktop{ display: block; }

@media (max-width: 767px){
  .bk-process-heroWrap .bk-process-hero--desktop{ display: none; }
  .bk-process-heroWrap .bk-process-hero--mobile{ display: block; }
}

.bk-process-hero{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.bk-process-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay + text nad obrázkem */
.bk-process-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.22));
}

.bk-process-hero__content{
  position: absolute;
  left: 0;
  top: 0;
  padding: 18px 18px;
  max-width: 820px;
  color: #fff;
}
.bk-process-hero__title{ margin: 0 0 6px; color:#fff; }
.bk-process-hero__sub{ margin: 0; color: rgba(255,255,255,.92); }


/* ---------- SEKCE KROKŮ ---------- */
.bk-process{
  margin: 18px 0 40px;
}

.bk-process__head{
  margin-bottom: 12px;
}

/* pokud jsi odstranil duplicitní nadpis pod bannerem,
   můžeš nechat jen lead text */
.bk-process__lead{
  margin: 0;
  max-width: 820px;
  color: #444;
}

/* wrapper kroků */
.bk-process__grid{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

/* ---------- KARTA / ACCORDION ---------- */
.bk-step{
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.bk-step__sum{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  display: grid;
  grid-template-columns: 32px 34px 1fr;
  gap: 12px;
  align-items: start;
  position: relative;
}

.bk-step__sum::-webkit-details-marker{ display: none; }

/* šipka vpravo – jasné, že se dá rozkliknout */
.bk-step__sum::after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 16px;
  font-size: 18px;
  color: #009688;
  transform: rotate(-90deg);     /* zavřeno = doprava */
  transition: transform .2s ease;
}

.bk-step[open] .bk-step__sum::after{
  transform: rotate(0deg);       /* otevřeno = dolů */
}

.bk-step__sum:hover{
  background: #f7f7f7;
}

.bk-step[open] .bk-step__sum{
  background: #fafafa;
}

/* číslo kroku */
.bk-step__badge{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #009688;
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 2px;
}

/* ikona */
.bk-step__ico{
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b2b2b;
}

.bk-step__ico svg{
  width: 26px;
  height: 26px;
  display: block;
}

/* texty */
.bk-step__name{
  display: block;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
}

.bk-step__sum:hover .bk-step__name{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.bk-step__short{
  display: block;
  margin-top: 2px;
  color: #5a5a5a;
  font-size: 16px;     /* FIX: dřív moc malé */
  line-height: 1.45;
  font-weight: 500;
}

/* odkazy jako “chips” */
.bk-step__short a{
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,150,136,.35);
  text-decoration: none;
  color: #009688;
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
}

.bk-step__short a:hover{
  background: rgba(0,150,136,.08);
}

/* rozbalený text */
.bk-step__body{
  padding: 0 14px 14px 92px;
  color: #444;
}

.bk-step__body p{
  margin: 0;
  line-height: 1.55;
}

/* ---------- Mobilní úpravy ---------- */
@media (max-width: 767px){
  .bk-step__sum{
    grid-template-columns: 28px 30px 1fr;
    gap: 10px;
    padding: 12px 12px;
  }

  .bk-step__sum::after{
    right: 12px;
    top: 14px;
  }

  .bk-step__ico svg{
    width: 23px;
    height: 23px;
  }

  .bk-step__name{
    font-size: 18px;
  }

  .bk-step__short{
    font-size: 15px;
  }

  .bk-step__body{
    padding: 0 12px 12px 78px;
  }
}

/* ---------- CTA pod kroky ---------- */
.bk-process__cta{
  margin-top: 18px;
  padding: 14px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fafafa;
}

.bk-process__ctaText{
  margin: 0 0 10px;
  font-size: 15px;
}

.bk-process__ctaBtns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}








/* ==========================================================
   BUKOMA • Virtuální showroom (FINAL, clean)
   Scoped do #bk-showroom (bez kolizí se Shoptetem)
   ========================================================== */

#bk-showroom{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* Head */
#bk-showroom .bk-showroom__head{ margin-bottom: 12px; }
#bk-showroom .bk-showroom__title{ font-size: 28px; line-height: 1.15; margin: 0 0 8px; }
#bk-showroom .bk-showroom__lead{ margin: 0 0 10px; color:#444; }

/* pokud chceš CTA jen v hero, nech to zapnuté */
#bk-showroom .bk-showroom__links{ display:none; }

/* ----------------------------------------------------------
   HERO – klíč: picture/img musí vyplnit box (100% width/height)
   ---------------------------------------------------------- */
#bk-showroom .bk-showroom__hero{ margin: 12px 0 14px; }

#bk-showroom .bk-hero{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;   /* klidně změň na 16/9 */
  border-radius: 16px;
  overflow: hidden;
  background: #f3f3f3;
}

/* picture a img jako bloky a fill */
#bk-showroom #bk-hero-picture{
  display: block;
  width: 100%;
  height: 100%;
}

#bk-showroom #bk-hero-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fade */
#bk-showroom .bk-hero__fade{
  position:absolute; inset:0;
  background:#000; opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
#bk-showroom .bk-hero.is-fading .bk-hero__fade{ opacity:.18; }

/* Overlay bar + gradient */
#bk-showroom .bk-hero__overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 10px 12px;
  border-radius: 0 0 16px 16px;
  z-index: 2;
}

#bk-showroom .bk-hero__overlay::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.38) 55%,
    rgba(0,0,0,0) 100%
  );
  pointer-events:none;
  z-index: 0;
}

#bk-showroom .bk-hero__bar{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

#bk-showroom .bk-hero__info{ min-width: 0; }

#bk-showroom .bk-hero__title{
  margin: 0;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bk-showroom .bk-hero__meta{
  margin-top: 2px;
  font-size: 13px;
  opacity: .92;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bk-showroom .bk-hero__cta{
  display:flex;
  gap:10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content:flex-end;
}

/* Buttons (Shoptet-like) */
#bk-showroom .bk-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 9px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

#bk-showroom .bk-btn--primary{ background:#009688; color:#fff; }
#bk-showroom .bk-btn--primary:hover{ background:#2E5F66; }

#bk-showroom .bk-btn--ghost{
  background: rgba(255,255,255,.10);
  color:#fff;
  border:1p
}  

@media (min-width: 768px){
  #bk-showroom .bk-hero__title{ font-size: 20px; }
  #bk-showroom .bk-hero__meta{  font-size: 14px; }
  #bk-showroom .bk-btn{         font-size: 14px; }
}


/* ==========================================================
   TABS (řady) – finální, vyšší specifičnost
   ========================================================== */
#bk-showroom .bk-showroom__tabs{ margin: 14px 0 10px; }

#bk-showroom .bk-showroom__tabs #bk-tabs{
  display:flex;
  gap:8px;
  overflow:auto;
  padding: 2px 0 6px;
  -webkit-overflow-scrolling: touch;
}

#bk-showroom .bk-showroom__tabs #bk-tabs .bk-tab{
  appearance:none;
  border:1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  padding: 8px 12px;
  background:#fff;
  cursor:pointer;
  font-weight:800;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

#bk-showroom .bk-showroom__back{
  display:inline-block;
  margin: 4px 0 10px;
  font-size: 16px;
  color:#2E5F66;
  text-decoration:none;
  border-bottom:1px solid rgba(46,95,102,.3);
}
#bk-showroom .bk-showroom__back:hover{
  border-bottom-color: rgba(46,95,102,.6);
}


#bk-showroom .bk-showroom__tabs #bk-tabs .bk-tab[aria-selected="true"]{
  border-color: rgba(0,150,136,.70);
  box-shadow: 0 0 0 3px rgba(0,150,136,.14);
}

/* ==========================================================
   DEKORY – finální, vyšší specifičnost
   ========================================================== */

#bk-showroom .bk-showroom__deck #bk-decor-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

@media (min-width: 768px){
  #bk-showroom .bk-showroom__deck #bk-decor-grid{
    grid-template-columns: repeat(6, minmax(0,1fr));
  }
}

#bk-showroom .bk-showroom__deck #bk-decor-grid .bk-decor{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background:#fff;
  padding: 10px;
  cursor:pointer;
}

#bk-showroom .bk-showroom__deck #bk-decor-grid .bk-decor:hover{
  border-color: rgba(0,0,0,.18);
}

#bk-showroom .bk-showroom__deck #bk-decor-grid .bk-decor[aria-current="true"]{
  border-color: rgba(0,150,136,.70);
  box-shadow: 0 0 0 3px rgba(0,150,136,.14);
}

#bk-showroom .bk-showroom__deck #bk-decor-grid .bk-decor__thumb{
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  background:#eee;
  flex:0 0 auto;
  display:block;
}

#bk-showroom .bk-showroom__deck #bk-decor-grid .bk-decor__name{
  font-weight:800;
  font-size: 14px;
  line-height: 1.2;
}

/* desktop: kartičky */
@media (min-width: 768px){
  #bk-showroom .bk-showroom__deck #bk-decor-grid .bk-decor{
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap:8px;
    min-height: 132px;
  }

  #bk-showroom .bk-showroom__deck #bk-decor-grid .bk-decor__thumb{
    width: 100%;
    height: 92px;
  }

  #bk-showroom .bk-showroom__deck #bk-decor-grid .bk-decor__name{
    font-size: 13px;
  }
}




/* ==========================================================
   BUKOMA • Virtuální showroom (ROZCESTNÍK scén)
   Scoped: #bk-virtual-showroom
   ========================================================== */

#bk-virtual-showroom{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* Head */
#bk-virtual-showroom .bk-vs__head{ margin-bottom: 14px; }
#bk-virtual-showroom .bk-vs__title{
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
}
#bk-virtual-showroom .bk-vs__lead{
  margin: 0;
  color: #444;
  font-size: 15px;
  line-height: 1.55;
  max-width: 70ch;
}

/* Section headings */
#bk-virtual-showroom .bk-vs__h2{
  margin: 18px 0 10px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

/* List “how it works” */
#bk-virtual-showroom .bk-vs__list{
  margin: 0;
  padding-left: 18px;
  color: #333;
  line-height: 1.6;
}
#bk-virtual-showroom .bk-vs__list li{ margin: 6px 0; }
#bk-virtual-showroom .bk-vs__list strong{ font-weight: 900; }

/* Grid of scenes */
#bk-virtual-showroom .bk-vs__grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-top: 10px;
}

@media (min-width: 640px){
  #bk-virtual-showroom .bk-vs__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px){
  #bk-virtual-showroom .bk-vs__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Card */
#bk-virtual-showroom .bk-vs__card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

#bk-virtual-showroom .bk-vs__cardLink{
  display: block;
  color: inherit;
  text-decoration: none;
}

#bk-virtual-showroom .bk-vs__thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f3f3f3;
  overflow: hidden;
}

#bk-virtual-showroom .bk-vs__thumbPlaceholder{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.55);
  font-weight: 900;
  letter-spacing: .2px;
}

/* Pokud později dáš <img>, tak ať se chová správně */
#bk-virtual-showroom .bk-vs__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body */
#bk-virtual-showroom .bk-vs__cardBody{
  padding: 12px 12px 12px;
}

#bk-virtual-showroom .bk-vs__cardTitle{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

#bk-virtual-showroom .bk-vs__cardText{
  margin: 0 0 10px;
  color: #444;
  font-size: 13px;
  line-height: 1.45;
}

#bk-virtual-showroom .bk-vs__cardCta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 13px;
  color: #2E5F66;
  border-bottom: 1px solid rgba(46,95,102,.25);
  padding-bottom: 2px;
}

/* Hover/focus */
@media (hover:hover){
  #bk-virtual-showroom .bk-vs__card:hover{
    border-color: rgba(0,150,136,.45);
    box-shadow: 0 10px 26px rgba(0,0,0,.09);
  }
  #bk-virtual-showroom .bk-vs__card:hover .bk-vs__cardCta{
    border-bottom-color: rgba(46,95,102,.6);
  }
}
#bk-virtual-showroom .bk-vs__cardLink:focus-visible{
  outline: 3px solid rgba(0,150,136,.25);
  outline-offset: 4px;
  border-radius: 16px;
}

/* Note */
#bk-virtual-showroom .bk-vs__note{
  margin: 10px 0 0;
  color: #555;
  font-size: 13px;
}

/* Tips paragraphs */
#bk-virtual-showroom .bk-vs__p{
  margin: 0 0 10px;
  color: #444;
  line-height: 1.6;
  max-width: 80ch;
}

/* CTA row */
#bk-virtual-showroom .bk-vs__ctaRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Buttons (consistent with showroom) */
#bk-virtual-showroom .bk-vs__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

#bk-virtual-showroom .bk-vs__btn--primary{
  background: #009688;
  color: #fff;
}
#bk-virtual-showroom .bk-vs__btn--primary:hover{
  background: #2E5F66;
}

#bk-virtual-showroom .bk-vs__btn--ghost{
  background: rgba(0,0,0,.04);
  color: #2E5F66;
  border: 1px solid rgba(46,95,102,.20);
}
#bk-virtual-showroom .bk-vs__btn--ghost:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(46,95,102,.35);
}

@media (min-width: 992px){
  #bk-virtual-showroom{ padding: 18px; }
}

/* --- TYPO: jemné zvětšení pro lepší čitelnost --- */
#bk-virtual-showroom .bk-vs__title{ font-size: 34px; }
#bk-virtual-showroom .bk-vs__lead{ font-size: 16px; }

#bk-virtual-showroom .bk-vs__h2{ font-size: 20px; }

#bk-virtual-showroom .bk-vs__list{ font-size: 14px; }
#bk-virtual-showroom .bk-vs__p{ font-size: 14px; }

#bk-virtual-showroom .bk-vs__cardTitle{ font-size: 17px; }
#bk-virtual-showroom .bk-vs__cardText{ font-size: 14px; }

@media (max-width: 480px){
  #bk-virtual-showroom .bk-vs__title{ font-size: 30px; }
  #bk-virtual-showroom .bk-vs__lead{ font-size: 15px; }
}
#bk-virtual-showroom .bk-vs__card--click{ cursor: pointer; }
#bk-virtual-showroom .bk-vs__card--click:focus-visible{
  outline: 3px solid rgba(0,150,136,.25);
  outline-offset: 4px;
  border-radius: 16px;
}
/* ==========================================================
   BK • Showroom Compare – TYPO TUNING (final)
   ========================================================== */

#bk-showroom .bk-showroom-compare{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  max-width: 920px;
}

/* H2 */
#bk-showroom .bk-showroom-compare .bk-h2{
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 10px;
}

/* lead + běžné p */
#bk-showroom .bk-showroom-compare .bk-lead,
#bk-showroom .bk-showroom-compare p{
  font-size: 14.5px;
  line-height: 1.7;
  color:#444;
  margin: 0 0 10px;
  max-width: 78ch; /* aby text nebyl moc dlouhý */
}

/* H3 */
#bk-showroom .bk-showroom-compare .bk-h3{
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
  margin: 14px 0 8px;
}

/* Lists */
#bk-showroom .bk-showroom-compare .bk-bullets,
#bk-showroom .bk-showroom-compare .bk-list{
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.7;
}

#bk-showroom .bk-showroom-compare li{
  margin: 6px 0;
}

/* “Card” odstavec (bk-compare-decor) – jemnější */
#bk-showroom .bk-showroom-compare .bk-compare-decor{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0 12px;
}

#bk-showroom .bk-showroom-compare .bk-compare-decor p{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

/* “more” závěr */
#bk-showroom .bk-showroom-compare .bk-more{
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.7;
}

/* linky */
#bk-showroom .bk-showroom-compare a{
  color:#2E5F66;
  text-decoration:none;
  border-bottom: 1px solid rgba(46,95,102,.25);
}
#bk-showroom .bk-showroom-compare a:hover{
  border-bottom-color: rgba(46,95,102,.6);
}

/* Mobile: lehce menší nadpis */
@media (max-width: 480px){
  #bk-showroom .bk-showroom-compare .bk-h2{ font-size: 20px; }
}





/* ================================
   BUKOMA – CTA Virtuální showroom + Porovnání dekorů
   ================================ */

.bk-compare-decor{
  margin: 18px 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
}
.bk-compare-decor p{
  margin: 0;
  line-height: 1.55;
}
.bk-compare-decor strong{
  white-space: nowrap;
}

/* CTA box */
.bk-cta-showroom{
  margin: 12px 0 22px;
}
.bk-cta-showroom__link{
  position: relative;
  display: block;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(0,150,136,.08), rgba(0,0,0,.00));
  text-decoration: none !important;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bk-cta-showroom__link::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 180px at 15% 0%, rgba(0,150,136,.18), transparent 60%);
  pointer-events: none;
}
.bk-cta-showroom__kicker{
  display: inline-block;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #1f2d2f;
  font-size: 14px;
  opacity: 1;
}
.bk-cta-showroom__title{
  display: block;
  margin-top: 4px;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
}
.bk-cta-showroom__text{
  font-size: 15.5px;
  display: block;
  margin-top: 6px;
  line-height: 1.5;
  opacity: .92;
}
.bk-cta-showroom__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  background: #1f5c63;
  color: #fff;
  transition: background-color .18s ease;
}

/* Hover / focus */
.bk-cta-showroom__link:hover,
.bk-cta-showroom__link:focus{
  border-color: rgba(0,150,136,.45);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
.bk-cta-showroom__link:hover .bk-cta-showroom__cta,
.bk-cta-showroom__link:focus .bk-cta-showroom__cta{
  background: #16474d;
}
.bk-cta-showroom__link:focus{
  outline: none;
}
.bk-cta-showroom__link:focus-visible{
  outline: 2px solid rgba(0,150,136,.55);
  outline-offset: 2px;
}

/* Mobile */
@media (max-width: 768px){
  .bk-cta-showroom__title{ font-size: 16px; }
  .bk-compare-decor{ border-radius: 12px; }
  .bk-cta-showroom__link{ border-radius: 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bk-cta-showroom__link{ transition: none; }
  .bk-cta-showroom__cta{ transition: none; }
}

/* ===== BUKOMA: mini CTA Virtuální showroom (pro horní popisy kategorií) ===== */
.bk-mini-showroom{ margin: 10px 0 0; }
.bk-mini-showroom__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(0,150,136,.10), rgba(0,0,0,0));
  text-decoration:none !important;
}
.bk-mini-showroom__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border: 1px solid rgba(0,0,0,.12);
  font-weight:800;
  line-height:1;
  flex:0 0 auto;
}
.bk-mini-showroom__text{
  line-height:1.35;
  flex:1 1 auto;
}
.bk-mini-showroom__cta{
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:12px;
  background:#009688;
  color:#fff;
  font-weight:800;
}
.bk-mini-showroom__link:hover .bk-mini-showroom__cta{ background:#2E5F66; }
@media (max-width: 768px){
  .bk-mini-showroom__text{ font-size: 14px; }
  .bk-mini-showroom__cta{ padding:8px 10px; }
}

/* ==========================================================
   BK Showroom • Mobile hero UX fix
   ========================================================== */
@media (max-width: 767px){

  /* HERO: více prostoru pro obrázek */
  #bk-showroom .bk-hero{
    aspect-ratio: 4 / 5; /* víc „na výšku“, víc podlahy */
  }

  /* Overlay: jen text, bez CTA */
  #bk-showroom .bk-hero__overlay{
    padding: 8px 10px;
  }

  #bk-showroom .bk-hero__cta{
    display: none; /* CTA z overlay pryč */
  }

  #bk-showroom .bk-hero__title{
    font-size: 15px;
    line-height: 1.2;
  }

  #bk-showroom .bk-hero__meta{
    font-size: 12px;
    opacity: .9;
  }

  /* CTA blok POD obrázkem */
  #bk-showroom .bk-hero-mobile-cta{
    display: flex;
    gap: 10px;
    padding: 10px 0 4px;
  }

  #bk-showroom .bk-hero-mobile-cta .bk-btn{
    flex: 1 1 auto;
    justify-content: center;
    font-size: 14px;
    padding: 11px 14px;
  }
}

#bk-showroom .bk-opts{
  display:flex; gap:10px; flex-wrap:wrap;
  margin: 10px 0 12px;
}
#bk-showroom .bk-opt{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background:#fff;
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  user-select:none;
}
#bk-showroom .bk-opt input{
  width: 16px; height: 16px;
  accent-color: #009688;
}
/* Showroom – variant přepínače (chips) */
#bk-showroom .bk-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* input schováme, ale necháme „klikatelné přes label“ */
#bk-showroom .bk-opt > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* vzhled chipu je na span */
#bk-showroom .bk-opt > span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  padding: 8px 12px;
  line-height: 1;
  user-select: none;
}

/* AKTIVNÍ stav */
#bk-showroom .bk-opt > input:checked + span {
  border-color: #009688;
  box-shadow: 0 0 0 2px rgba(0,150,136,.15);
}
#bk-showroom .bk-tab--disabled{
  opacity: .45;
  cursor: not-allowed;
}
#bk-showroom .bk-opt.is-disabled{
  opacity: .45;
  cursor: not-allowed;
}
#bk-showroom .bk-opt.is-disabled > span{
  text-decoration: line-through;
}
#bk-showroom .bk-tab--disabled{
  opacity: .45;
  cursor: not-allowed !important;
}

#bk-showroom .bk-tab--disabled:hover{
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}











/* ===== poznámka na filtry na /vinylove-podlahy/ a /vinylove-plovoci-podlahy/ ===== */

.bk-filter-note{
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,150,136,.10), rgba(0,0,0,0));
  line-height: 1.45;
}