:root{ --bk-priority-loaded: "ok"; }

/* ==== A11Y: skip link + focus === */
.bk-skip-link{
  position: fixed; left: 12px; top: 8px;
  transform: translateY(-200%);
  background: #fff; color:#111; padding:10px 14px;
  border-radius:8px; box-shadow:0 6px 12px rgba(0,0,0,.12);
  z-index:10000; text-decoration:none; font-weight:700;
}
.bk-skip-link:focus{ transform: translateY(0); outline:2px solid var(--bk-brand-600, #0A6600); }

:focus-visible{ outline:2px solid var(--bk-brand-600, #0A6600); outline-offset:2px; border-radius:6px; }

/* Utility třída na „neviditelný“ text (např. doplněné labely) */
.bk-sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Listing i PDP: rezervace místa pro fotky */
.p-image, .product .image { aspect-ratio: 4 / 3; }     /* případně 3/2 nebo 1/1 */
.p-image img, .product .image img { display:block; width:100%; height:auto; }


/* =========================================================
   BUKOMA • Accessibility / Contrast fixes (priority layer)
   ========================================================= */

/* 1) Barevné proměnné (navázané na nastavení šablony) */
:root{
  /* Konverzní barva a hover (z administrace) */
  --bukoma-brand:        #2E5F66;   /* Konverzní barva */
  --bukoma-brand-hover:  #0A6600;   /* Konverzní barva po najetí */

  /* Texty a odkazy na světlém pozadí */
  --bukoma-text:         #111827;   /* hlavní text */
  --bukoma-text-2:       #374151;   /* sekundární text/popisky */
  --bukoma-link:         #1B4B52;   /* odkazy na bílém pozadí (vyšší kontrast) */
  --bukoma-link-hover:   #0A6600;

  /* Kontrastní placeholdery & okraje polí */
  --bukoma-placeholder:  #4B5563;   /* dobře čitelné na #fff */
  --bukoma-border:       #D1D5DB;

  /* Text na konverzním/polních pozadích */
  --bukoma-on-brand:     #ffffff;
}

/* 2) Základ textu & odkazy (kontrast na bílém) */
body { color: var(--bukoma-text); }
a { color: var(--bukoma-link); }
a:hover,
a:focus { color: var(--bukoma-link-hover); }

/* 3) Tlačítka – konverzní/primární (bílý text + spolehlivý hover) */
.btn-conversion,
.btn.btn-conversion,
.add-to-cart-button,
.btn-primary {
  color: var(--bukoma-on-brand) !important;
  background-color: var(--bukoma-brand) !important;
  border-color: var(--bukoma-brand) !important;
}
.btn-conversion:hover,
.btn.btn-conversion:hover,
.add-to-cart-button:hover,
.btn-primary:hover {
  background-color: var(--bukoma-brand-hover) !important;
  border-color: var(--bukoma-brand-hover) !important;
  color: var(--bukoma-on-brand) !important;
}

/* 4) Vstupní pole – tmavší placeholder + čitelný focus */
input::placeholder,
textarea::placeholder { 
  color: var(--bukoma-placeholder) !important; 
  opacity: 1; 
}
/* cíleně i na vyhledávání, které PageSpeed hlásil */
.query-input::placeholder,
.search-input::placeholder,
.js-search-input::placeholder { 
  color: var(--bukoma-placeholder) !important; 
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
textarea,
select {
  color: var(--bukoma-text);
  border-color: var(--bukoma-border);
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--bukoma-brand);
  outline: 2px solid transparent;
  /* decentní brand „ring“, nebliká a je přístupný */
  box-shadow: 0 0 0 3px rgba(46, 95, 102, .20);
}

/* 5) Text na bannerech/kartách s obrázkem – jemný stín pro čitelnost */
.banner__text, 
.gdesc-inner, 
.hp-banner .text {
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  /* ponecháme původní barvu textu; stín zlepší reálný kontrast na fotkách */
}

/* 6) Odkazy v navigačních/prvkových lištách – konzistentní přechod */
.navigation a,
.menu a,
.pager a {
  color: var(--bukoma-link);
}
.navigation a:hover,
.menu a:hover,
.pager a:hover {
  color: var(--bukoma-link-hover);
}

/* 7) Bez animací = respektování preferencí uživatele */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; }
}


/* =========================================
   [CAT HERO] BUKOMA – banner v kategoriích
   - HTML beze změny:
     .bukoma-flex-banner
       .banner-text
       .banner-image-box
         <img class="banner-desktop">
         <div class="banner-mobile-bg" style="background-image:url('...')">
           .banner-links > .banner-title + odkazy
   ========================================= */

/* --- Desktop ≥1200px: 2 sloupce (text vlevo, obrázek vpravo) --- */
@media (min-width: 1200px){
  .bukoma-flex-banner{
    display: grid;
    grid-template-columns: 1fr minmax(420px, 540px);
    gap: 28px;
    align-items: start;
    margin: 24px 0 16px;
  }
  .bukoma-flex-banner .banner-text{ min-width: 0; }

  .bukoma-flex-banner .banner-image-box{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16/9;
    min-height: 320px;
    isolation: isolate;
  }
  .bukoma-flex-banner .banner-image-box > img.banner-desktop{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* čitelný overlay */
  .bukoma-flex-banner .banner-image-box::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.25) 0%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.40) 100%
    );
    pointer-events:none;
    z-index: 1;
  }
  .bukoma-flex-banner .banner-links{
    position:absolute; z-index:2;
    left:16px; top:16px; right:16px; max-width:80%;
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.85);
  }
  .bukoma-flex-banner .banner-title{
    margin:0 0 10px; font-weight:800; font-size:18px;
  }
  .bukoma-flex-banner .banner-links a{
    display:block; color:#fff; font-weight:700; text-decoration:underline;
    padding-left:20px; margin:4px 0; position:relative;
  }
  .bukoma-flex-banner .banner-links a::before{
    content:"→"; position:absolute; left:0; top:0;
  }
  /* bezpečně schovat mobilní verzi na desktopu */
  .bukoma-flex-banner .banner-mobile-bg{ display:none; }
}

/* --- Tablet 769–1199px: pod sebe, obrázek pod text --- */
@media (min-width: 769px) and (max-width: 1199px){
  .bukoma-flex-banner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 20px 0 14px;
  }
  .bukoma-flex-banner .banner-image-box{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16/9;
    min-height: 280px;
  }
  .bukoma-flex-banner .banner-image-box > img.banner-desktop{
    display:block; width:100%; height:100%; object-fit:cover;
  }
  .bukoma-flex-banner .banner-image-box::after{ /* stejný overlay */
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.22) 0%,
                                         rgba(0,0,0,0) 40%,
                                         rgba(0,0,0,.35) 100%);
    pointer-events:none; z-index:1;
  }
  .bukoma-flex-banner .banner-links{
    position:absolute; z-index:2;
    left:14px; top:14px; right:14px; max-width:85%;
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7);
  }
  .bukoma-flex-banner .banner-title{ font-size:17px; margin-bottom:8px; }
  .bukoma-flex-banner .banner-links a{ padding-left:18px; }
  .bukoma-flex-banner .banner-links a::before{ content:"→"; left:0; top:0; }
  .bukoma-flex-banner .banner-mobile-bg{ display:none; }
}

/* --- Mobil ≤768px: bez <img>, používá se .banner-mobile-bg --- */
@media (max-width: 768px){
  .bukoma-flex-banner{ display:block; margin:16px 0 12px; }
  .bukoma-flex-banner img.banner-desktop{ display:none !important; }

  .bukoma-flex-banner .banner-image-box{
    border-radius: 12px;
    overflow: hidden;
  }
  .bukoma-flex-banner .banner-mobile-bg{
    display:block; width:100%;
    background-size:cover; background-position:center;
    border-radius:12px;
    padding:14px 16px;
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4);
    min-height: 220px; /* ať je cítit „hero“ */
  }
  .bukoma-flex-banner .banner-links{
    position: static; max-width: none;
  }
  .bukoma-flex-banner .banner-title{ font-size:17px; font-weight:800; margin:0 0 8px; }
  .bukoma-flex-banner .banner-links a{
    display:block; color:#fff; text-decoration:underline;
    font-size:15px; line-height:1.35;
    padding-left:18px; margin:4px 0; position:relative;
  }
  .bukoma-flex-banner .banner-links a::before{
    content:"→"; position:absolute; left:0; top:0;
  }
}

/* === [CAT HERO] – opravný patch pro desktop: odkazy nad obrázkem === */

/* Jistota správného vrstvení boxu s obrázkem */
.bukoma-flex-banner .banner-image-box{
  position: relative;
  border-radius: 12px;
  overflow: hidden;       /* aby gradient a overlay čistě kopírovaly rádius */
  isolation: isolate;     /* jistota správného z-index kontextu */
}

/* Obrázek na pozadí (desktop) */
.bukoma-flex-banner .banner-desktop{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ⛑ Kritická změna: na desktopu NEschovávat .banner-mobile-bg,
   ale použít ho jako průhledný overlay kontejner pro .banner-links */
@media (min-width: 769px){
  .bukoma-flex-banner .banner-image-box .banner-mobile-bg{
    display: block !important;   /* místo původního "display:none" */
    position: absolute;
    inset: 0;
    padding: 16px 18px;
    background: none !important; /* mobilní pozadí na desktopu skryjeme */
    z-index: 2;                   /* nad gradientem, pod křížky apod. */
  }

  /* Odkazy = skutečný overlay textu nad fotkou */
  .bukoma-flex-banner .banner-image-box .banner-links{
    position: absolute;
    top: 15px; left: 15px; right: 15px;
    max-width: 80%;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
    z-index: 3;  /* nad gradientem i obrázkem */
  }

  /* Jemný gradient pro lepší čitelnost textu */
  .bukoma-flex-banner .banner-image-box::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.25) 0%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.35) 100%
    );
    pointer-events: none;
    z-index: 1; /* pod textem, nad fotkou */
  }
}

/* Bezpečnostní „guma“ – kdyby někde přetrval starý styl se schováváním */
@media (min-width: 769px){
  .bukoma-flex-banner .banner-image-box .banner-mobile-bg[style]{
    background-image: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1199px){
  .bukoma-flex-banner .banner-image-box{
    /* nic dramatického, jen bezpečnější šířky na menších desktopech */
    max-width: 100%;
  }

  .bukoma-flex-banner .banner-image-box .banner-links{
    left: 20px; right: 20px; top: 16px;
    max-width: 86%;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
  }

  .bukoma-flex-banner .banner-links .banner-title{
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 800;
    color: #fff !important;
  }

  /* klíčové: každý odkaz je blok a je bílý */
  .bukoma-flex-banner .banner-links a{
    display: block;
    margin: 6px 0;
    line-height: 1.4;
    color: #fff !important;
    text-decoration: underline;
  }

  /* decentní šipka před odkazem */
  .bukoma-flex-banner .banner-links a::before{
    content: "→ ";
    /* záměrně bez absolute – ať netlačí layout */
  }

  .bukoma-flex-banner .banner-links a:hover{
    text-decoration: none;
  }
}








/* TLAČÍTKA SE ZAOBALENÝMI ROHY */
.btn:not(.cart-count), .compact-form .form-control, .pagination > a, .pagination > strong, a.login-btn{border-radius: 30px;} 

/* ZMĚNA BARVY POZADÍ HLAVNÍHO MENU */
@media screen and (min-width: 768px) {
#header::after{background-color: #009e98;} /* BARVA POZADÍ MENU */
.navigation-in {background-color: transparent;}
.navigation-in > ul > li > a, .submenu-arrow::after {color: #fff;} /* BARVA TEXTU V MENU */
.menu-helper::after {color: #fff;} /* BARVA HAMBURGERU */
.menu-item-992 {background-color: red; color: white;} /* TLAČÍTKO MENU VZORKY ZDARMA ČERVENÉ */
}

/* PŘIDÁNÍ E-MAILOVÉ ADRESY DO HLAVIČKY WEBU */
@media screen and (min-width: 1200px){
.top-navigation-bar .project-email {display: inline-block;font-size: 16px;font-weight: bold;margin-left: 24px;color: var(--color-primary);}
a.project-email::before {content: '\e910';font-size: 16px;}
}
@media screen and (min-width: 360px) and (max-width: 767px){
.top-navigation-contacts{display: block !important;}
.top-navigation-contacts .project-phone{display: none !important;}
.top-navigation-contacts .project-email{display: block !important;position: absolute;right: 164px;top: 15px;color: #A3A3AF;}
a.project-email::before {content: '\e910';}
.top-navigation-contacts .project-email span{display: none;}
}



/* === BK • Dlaždice „kategorie“ (overlay) — FINÁL jen pro tiles ================= */
/* Grid */
.ji-hp-cats__items{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
@media (max-width:1024px){ .ji-hp-cats__items{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){  .ji-hp-cats__items{ grid-template-columns:repeat(2,1fr); } }

/* Tile odkaz */
.ji-hp-cats__item{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  transition:transform .3s, box-shadow .3s;
  text-decoration:none;
  color:inherit;
}
.ji-hp-cats__item img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s, filter .3s;
}
.ji-hp-cats__item:hover img{ filter:grayscale(100%) blur(1px); transform:scale(1.05); }
.ji-hp-cats__item::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,0); transition:background .3s; z-index:1;
}
.ji-hp-cats__item:hover::after{ background:rgba(0,0,0,.25); }
.ji-hp-cats__item:hover{ transform:scale(1.015); box-shadow:0 8px 18px rgba(0,0,0,.25); }

/* OVERLAY — POZOR: už jen uvnitř .ji-hp-cats__item (ne globálně) */
.ji-hp-cats__item .ji-hp-cats__overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  padding:30px 10px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.40), transparent 60%);
  color:#fff;
  line-height:1.1;
  z-index:2;
  pointer-events:none;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}

/* TYPO • Výchozí = VĚTŠÍ (mimo HP) */
.ji-hp-cats__item .ji-hp-cats__overlay > span{
  display:block;
  font-size:16px;
  font-weight:500;
  line-height:1.1;
}
.ji-hp-cats__item .ji-hp-cats__overlay > span:first-child{
  font-size:26px;              /* headline */
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:4px;
  letter-spacing:.3px;
}

/* MOBILní zmenšení (platí pro všechny) */
@media (max-width:768px){
  .ji-hp-cats__item .ji-hp-cats__overlay{ padding:20px 6px 8px; }
  .ji-hp-cats__item .ji-hp-cats__overlay > span{ font-size:13.5px; }
  .ji-hp-cats__item .ji-hp-cats__overlay > span:first-child{ font-size:20px; }
}

/* VARIANTA HP — wrapper .bk-hp udrží PŮVODNÍ „menší“ optiku na homepage */
.bk-hp .ji-hp-cats__item .ji-hp-cats__overlay > span{
  font-size:1rem;    /* ~16px podle vaší šablony */
  font-weight:500;
}
.bk-hp .ji-hp-cats__item .ji-hp-cats__overlay > span:first-child{
  font-size:1.15rem; /* ~18–19px */
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:4px;
  letter-spacing:.3px;
}

/* Dotyková zařízení: vypnout hover efekty */
@media (hover:none) and (pointer:coarse){
  .ji-hp-cats__item:hover img{ filter:none; transform:none; }
  .ji-hp-cats__item:hover::after{ background:none; }
  .ji-hp-cats__item:hover{ transform:none; box-shadow:0 6px 12px rgba(0,0,0,.15); }
}






/* BUKOMA – galerie grid + hover s textem */
.bk-gallery{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 18px !important;
}

.bk-gallery .bk-item{
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform .15s ease !important;
  cursor: pointer !important;
}

.bk-gallery .bk-item:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}

.bk-gallery .bk-item > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .35s ease !important;
}

.bk-gallery .bk-item:hover > img{
  transform: scale(1.03) !important;
}

/* Overlay text na hover */
.bk-gallery .bk-item::after{
  content: "Otevø񘁤etailn𙡯to";
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 6px 8px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.bk-gallery .bk-item:hover::after{
  opacity: 1;
}



/* =========================================
   [TYPE] Globální typografie + speciály pro patičku
   ========================================= */

/* 1) Základní proměnné – snadno se ladí na jednom místě */
:root{
  --font-body: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-heading: 'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --lh-body: 1.7;
  --lh-heading: 1.2;

  /* základ textu (ponechávám blízko vašim ~21px) */
  --fs-body: clamp(18px, 1.2vw + 0.4rem, 20px);

  /* nadpisy – plynule od mobilu po desktop */
  --fs-h1: clamp(28px, 2.4vw + 0.9rem, 44px);
  --fs-h2: clamp(24px, 1.8vw + 0.8rem, 36px);
  --fs-h3: clamp(20px, 1.1vw + 0.6rem, 32px); /* max ~32px na desktopu */
  --fs-h4: 20px;
  --fs-h5: 18px;
  --fs-h6: 16px;
}

/* 2) Tělo webu */
body{
  font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
}

/* 3) Nadpisy – jednotný vzhled */
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  letter-spacing: .2px;
  margin: 0 0 .6em;
}

/* Pozn.: !important překryje inline pravidlo v Záhlaví
   (tam je nyní h2,h3=38px a přepisuje externí CSS). */
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }
h5{ font-size: var(--fs-h5); }
h6{ font-size: var(--fs-h6); }

/* 4) Patička – menší H3, aby se vešla do sloupců */
footer h3{
  /* cca 18px na mobilu → 22–24px na desktopu */
  font-size: clamp(16px, 1.0vw + .5rem, 22px);
  line-height: 1.25;
  margin-bottom: .5em;
}

/* (volitelné) Titulky uvnitř menších boxů/widgetů, modálů apod. */
.widget h3, .box h3, .modal h3{
  font-size: clamp(18px, 1vw + .4rem, 24px);
}

/* === BK • Footer bottom: podtrhni jen odkaz na nastavení cookies ============ */
:where(footer, .footer, .site-footer) .bk-cookies-link{
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
:where(footer, .footer, .site-footer) .bk-cookies-link:visited{
  color: var(--bk-link-visited);
}



/* =========================
   [PG-TOC] /schody-z-vinylu/ — 2 sloupce + sticky TOC
   ========================= */

/* Desktopové rozložení */
@media (min-width: 1200px){
  body.pg-vinyl-stairs .content-inner.bk-two-cols{
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr); /* šířku levého sloupce lze doladit */
    gap: 28px;
    align-items: start;
    /* ZÁMĚRNĚ žádné max-width: nechceme zúžit stránku */
  }
  /* vše kromě TOC do pravého sloupce */
  body.pg-vinyl-stairs .content-inner.bk-two-cols > :not(#bk-toc){
    grid-column: 2 / -1;
    min-width: 0; /* prevence přetékání dlouhých řádků */
  }

  /* TOC = levý sticky panel */
  body.pg-vinyl-stairs #bk-toc{
    position: sticky;
    top: var(--bk-sticky-top, 96px); /* respektuje globální offset hlavičky */
    max-height: calc(100vh - var(--bk-sticky-top, 96px) - 24px);
    overflow: auto;
    padding: 16px;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    background: #fff;         /* aby přes něj neprorůstal obsah */
    z-index: 3;                /* ať leží nad pravým sloupcem */
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
  }
}

/* Kosmetika TOC */
body.pg-vinyl-stairs #bk-toc nav,
body.pg-vinyl-stairs #bk-toc ul{ margin:0; padding:0; list-style:none; }
body.pg-vinyl-stairs #bk-toc li{ margin:6px 0; }
body.pg-vinyl-stairs #bk-toc a{ color:inherit; text-decoration:none; }
body.pg-vinyl-stairs #bk-toc a:hover{ text-decoration:underline; }
body.pg-vinyl-stairs #bk-toc a.is-active{ font-weight:700; text-decoration:underline; }

/* Skoky na kotvy – posun pod pevnou hlavičku */
body.pg-vinyl-stairs [id]{
  scroll-margin-top: calc(var(--bk-sticky-top, 96px) + 12px);
}

/* Mobil – jednosloupcově */
@media (max-width: 1199px){
  body.pg-vinyl-stairs .content-inner.bk-two-cols{ display:block; }
}




/* === Dostupnost – barevné tokeny === */
:root{
  --stock-ok-600:      #16A34A;
  --stock-ok-700:      #166534;
  --stock-warn-700:    #B45309;
  --stock-warn-800:    #92400E;
  --stock-info-600:    #2563EB;
  --stock-info-800:    #1E40AF;
  --stock-neutral-600: #475569;
  --stock-neutral-700: #374151;
  --stock-danger-700:  #B91C1C;
}

/* Základ: cílíme na textové štítky dostupnosti v PDP i listingu.
   U Shoptetu je to nejčastěji .availability, .availability-value,
   .p-in-stock, .availability-label, případně .flag.availability apod.
   Níže jsou bezpečné „catch-all“ selektory – klidný override.
*/
.availability, .availability-value, .availability-label,
.product .availability, .product-box .availability, .p-detail .availability{
  font-weight: 600;
}







/* ===== BK – kvalitativní štítky (Pro / Za lidovku) – čistá verze ===== */

/* Proměnné: velikosti a barvy */
:root{
  /* PDP (detail) */
  --bk-badge-title-size-pdp: 18px;  /* titulek */
  --bk-badge-sub-size-pdp:   13px;    /* popisek */

  /* Listing (náhledy) */
  --bk-badge-title-size-list: 16px;   /* titulek */
  --bk-badge-sub-size-list:   13px; /* popisek */

  /* Barvy – jasně odlišené */
  --bk-pro-bg:   #F4C145;  /* zlatá */
  --bk-pro-fg:   #111827;  /* tmavý text (vysoký kontrast) */

  --bk-value-bg: #34D399;  /* sytá zelená „lidovka“ */
  --bk-value-fg: #111827;  /* sjednocený tmavý text (ještě lepší kontrast) */
}

/* Skrýt nevybraný duplikát (uvnitř stejného .flags) */
.flags .flag.bk-hide-flag { display: none !important; }

/* Základ pro naše kvalitativní štítky (převlek .flags .flag) */
.flags .flag.flag--bk{
  display: inline-block;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 3px 8px rgba(0,0,0,.10);
  position: relative;
  max-width: 100%;
  white-space: normal; /* žádné zkracování */
}

/* PDP – typografie */
.p-detail .flags .flag.flag--bk{
  font-weight: 800;
  font-size: var(--bk-badge-title-size-pdp);
  line-height: 1.15;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--bk-pro-fg); /* varianta níže přepíše */
}
.p-detail .flags .flag.flag--bk::after{
  content: attr(data-bk-sub);
  display: block;
  margin-top: 2px;
  font-weight: 600;
  font-size: var(--bk-badge-sub-size-pdp);
  line-height: 1.18;
  opacity: .95;
  text-transform: none;
}

/* Listing – menší a bez uppercase */
.products-list .flags .flag.flag--bk,
.product .flags .flag.flag--bk,
.product-item .flags .flag.flag--bk,
.product-box .flags .flag.flag--bk{
  font-weight: 800;
  font-size: var(--bk-badge-title-size-list);
  line-height: 1.12;
  letter-spacing: .15px;
  text-transform: none;
  color: var(--bk-pro-fg);
}
.products-list .flags .flag.flag--bk::after,
.product .flags .flag.flag--bk::after,
.product-item .flags .flag.flag--bk::after,
.product-box .flags .flag.flag--bk::after{
  content: attr(data-bk-sub);
  display: block;
  margin-top: 2px;
  font-weight: 600;
  font-size: var(--bk-badge-sub-size-list);
  line-height: 1.16;
  opacity: .95;
}

/* Varianty – BARVY (jen dvě) */
.flags .flag.flag--bk-pro{
  background: var(--bk-pro-bg) !important;
  color: var(--bk-pro-fg) !important;
}
.flags .flag.flag--bk-value{
  background: var(--bk-value-bg) !important;
  color: var(--bk-value-fg) !important;
}

/* Telefony – víc místa pro text */
@media (max-width: 480px){
  .products-list .flags .flag.flag--bk,
  .product .flags .flag.flag--bk,
  .product-item .flags .flag.flag--bk,
  .product-box .flags .flag.flag--bk{
    max-width: 100%;
    padding: 6px 8px;
  }
  .products-list .flags .flag.flag--bk::after,
  .product .flags .flag.flag--bk::after,
  .product-item .flags .flag.flag--bk::after,
  .product-box .flags .flag.flag--bk::after{
    font-size: calc(var(--bk-badge-sub-size-list) - .5px);
  }
}







/* Jednotný poloměr pro média (obrázky/videa) – můžeš změnit na 10px apod. */
:root { --bk-radius-media: 12px; }

/* INLINE video v textu PDP */
.bk-product-detail .bk-video--wide{
  aspect-ratio: 16/9;
  border-radius: var(--bk-radius-media);
  overflow: hidden;
  background: #000;          /* hezky „ztmaví“ okraje při načítání */
}
.bk-product-detail .bk-video--wide iframe{
  width: 100%; height: 100%; display: block; border: 0;
}
/* fallback pro starší prohlížeče bez aspect-ratio */
@supports not (aspect-ratio: 16/9){
  .bk-product-detail .bk-video--wide{ position:relative; height:0; padding-top:56.25%; }
  .bk-product-detail .bk-video--wide iframe{ position:absolute; inset:0; }
}

/* MODAL video (otevírané z badge/tlačítka) – <dialog> */
.bk-video-modal{
  width: min(920px, 92vw);
  border: 0; padding: 0;
  border-radius: var(--bk-radius-media);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Volitelné: zachovej i v modalu 16:9 */
.bk-video-modal .bk-video-aspect{ aspect-ratio:16/9; background:#000; }
.bk-video-modal .bk-video-aspect iframe{
  width:100%; height:100%; display:block; border:0;
}
@supports not (aspect-ratio:16/9){
  .bk-video-modal .bk-video-aspect{ position:relative; height:0; padding-top:56.25%; }
  .bk-video-modal .bk-video-aspect iframe{ position:absolute; inset:0; }
}










/* ====== ARCHIV – obecné ====== */
.bk-archive-intro { padding: .5rem 0 1rem; }
.bk-archive-intro .bk-lead { margin: 0 0 .5rem; }

.bk-bullets { margin: 0 0 .75rem; padding-left: 1.1rem; }
.bk-bullets--inline { list-style: none; padding: 0; margin: .25rem 0 .75rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.bk-bullets--inline li::before { content: "• "; color: #2E5F66; }

/* [BK-PDP] CTA – kontrastní hover a accessibilita */
:root{
  --bk-brand: #1a7a69;        /* tvoje zelená – klidně dolaď */
  --bk-brand-dark: #145f52;   /* hover */
  --bk-ink: #0f3f39;          /* text pro outline variantu */
}

.bk-product-detail .bk-cta-group{ display:flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }

.bk-product-detail .bk-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 44px; padding: 10px 16px;
  border-radius: 12px; border:1px solid transparent;
  font-weight: 800; letter-spacing:.2px;
  background: var(--bk-brand); color:#fff; text-decoration:none;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: background-color .2s, color .2s, box-shadow .2s, transform .03s;
}
.bk-product-detail .bk-btn:hover{ background: var(--bk-brand-dark); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); transform: translateY(-1px); }
.bk-product-detail .bk-btn:active{ transform: translateY(0); box-shadow:none; }
.bk-product-detail .bk-btn:focus-visible{ outline:3px solid #8fe3d2; outline-offset:2px; }

/* sekundární (outline) varianta */
.bk-product-detail .bk-btn--alt{
  background:#fff; color:var(--bk-ink);
  border-color: var(--bk-ink);
}
.bk-product-detail .bk-btn--alt:hover{
  background: var(--bk-ink); color:#fff; border-color:var(--bk-ink);
}
.bk-btn--alt { background:#009688; }
.bk-btn--ghost { background:transparent; border:1px solid #2E5F66; color:#2E5F66; }

.bk-archive-detail { padding: 1rem 0 0; }
.bk-h2, .bk-h3 { margin: .75rem 0 .5rem; }
.bk-steps { counter-reset: step; margin: 0 0 1rem 0; padding-left: 1.2rem; }
.bk-steps li { margin: .35rem 0; }

.bk-disclaimer { border:1px solid #e0f0ee; background:#f6fbfb; padding:.75rem .9rem; border-radius:.5rem; margin:.75rem 0 1rem; }

.bk-links-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.5rem; margin:.5rem 0 1rem; }
.bk-links-grid a { display:block; padding:.6rem .75rem; border:1px solid #e5e7eb; border-radius:.4rem; text-decoration:none; }
.bk-links-grid a:hover { border-color:#2E5F66; }

.bk-advice { margin: .75rem 0 1.25rem; }
.bk-list { padding-left: 1.2rem; }

.bk-banner-honza { border:1px dashed #c6d9d6; padding: .9rem; border-radius:.6rem; background:#fbfffe; }
.bk-banner-honza__kicker { display:block; font-size:.85rem; text-transform:uppercase; color:#2E5F66; letter-spacing:.03em; margin-bottom:.25rem; }

/* Karty v kategorii – dvouřádkový krátký popis (pokud použijete) */
.products-list .p .p-short-description,
.products .product .p-short-description{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35; margin-bottom:.5rem;
}






/* ============ [BK-PDP] Produktová karta – společné prvky ============ */

/* Video – responzivní 16:9, větší na desktopu */
.bk-product-detail .bk-video{max-width:980px; margin:18px 0;}
.bk-product-detail .bk-video--wide{aspect-ratio:16/9;}
.bk-product-detail .bk-video--wide iframe{width:100%; height:100%; display:block; border:0;}
@supports not (aspect-ratio:16/9){
  .bk-product-detail .bk-video--wide{position:relative; height:0; padding-top:56.25%;}
  .bk-product-detail .bk-video--wide iframe{position:absolute; inset:0; width:100%; height:100%;}
}

/* Parametry – „karty“ v gridu (key–value) */
.bk-product-detail .bk-spec{list-style:none; margin:12px 0 18px; padding:0; display:grid; gap:10px;}
@media (min-width:720px){ .bk-product-detail .bk-spec{grid-template-columns:1fr 1fr;} }
.bk-product-detail .bk-spec li{
  display:grid; grid-template-columns:200px 1fr; gap:14px;
  padding:10px 14px; border:1px solid #e9ecef; border-radius:12px; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.bk-product-detail .bk-spec__k{color:#111827; font-weight:800; min-width:180px;}
.bk-product-detail .bk-spec__v{color:#111827;}
@media (max-width:480px){ .bk-product-detail .bk-spec li{grid-template-columns:150px 1fr;} }

/* ========== [BK-PDP] Srovnávací tabulka – HTML‑řízené zvýraznění sloupce ========== */

/* výchozí akcent (lze přepsat inline na <table> / wrapperu) */
.bk-product-detail .bk-compare{ --bk-compare-accent: #fff8e6; }

/* hlavička tabulky */
.bk-product-detail .bk-compare thead th{
  background:#fffdf3;
  border-bottom:2px solid #f6c453;
}
.bk-product-detail .bk-compare thead th:nth-child(2){ border-top-left-radius:12px; }
.bk-product-detail .bk-compare thead th:last-child{  border-top-right-radius:12px; }

/* zvýrazni CELÝ sloupec podle toho, který <th> v theadu má .is-primary */
.bk-product-detail .bk-compare:has(> thead > tr > th:nth-child(2).is-primary) tr > *:nth-child(2),
.bk-product-detail .bk-compare:has(> thead > tr > th:nth-child(3).is-primary) tr > *:nth-child(3),
.bk-product-detail .bk-compare:has(> thead > tr > th:nth-child(4).is-primary) tr > *:nth-child(4){
  background: var(--bk-compare-accent) !important;
}

/* Zebra pouze přes řádek – nepřebije zvýrazněný sloupec */
.bk-product-detail .bk-compare{
  border-collapse: separate;
  border-spacing: 0;
}
.bk-product-detail .bk-compare tbody tr{ background:#fff; }
.bk-product-detail .bk-compare tbody tr:nth-child(even){ background:#fbfdff; }
.bk-product-detail .bk-compare tr > * + *{ border-left: 1px solid #eef2f6; }
.bk-product-detail .bk-compare tbody td:first-child{
  font-weight:800; color:#0f172a; white-space:nowrap;
}
.bk-product-detail .bk-compare th,
.bk-product-detail .bk-compare td{
  padding:14px 20px; line-height:1.45; vertical-align:top;
}

/* ====== [BK-PDP] CTA boxy (kompaktní verze do PDP) ====== */

/* napojení na globální proměnné z tvého globálního stylu */
:root{
  --bk-brand: var(--bk-primary);
  --bk-brand-dark: var(--bk-primary-dark);
  --bk-ink: var(--bk-text);
}

/* Grid pro 2 boxy vedle sebe (na mobilu pod sebe) */
.bk-product-detail .bk-cta-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin:18px 0 6px;
}
@media (min-width:840px){
  .bk-product-detail .bk-cta-grid{ grid-template-columns:1fr 1fr; }
}

/* Samotný box – kompaktní, aby nepřekřičel obsah */
.bk-product-detail .bukoma-cta-box{
  border:1px solid #e6f2ef;
  background:#f9fffd;
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.bk-product-detail .bukoma-cta-box h3{
  margin:0 0 6px;
  font-size:1.125rem;
  line-height:1.25;
}
.bk-product-detail .bukoma-cta-box p{ margin:0 0 12px; }

/* Tlačítko – respektuje globální .bukoma-button; přidáme jen minimum pro PDP */
.bk-product-detail .bukoma-button{
  min-height:42px;                 /* pohodlný tap/click */
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}
.bk-product-detail .bukoma-button:hover{
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}

/* Outline varianta (ALT) pro PDP – používá globální barvy */
.bk-product-detail .bukoma-button--alt{
  background:#fff;
  color:var(--bk-brand);
  border:2px solid var(--bk-brand);
}
.bk-product-detail .bukoma-button--alt:hover{
  background:var(--bk-brand);
  color:#fff;
}

/* Kompaktní „textové“ bannery v levém sloupci */
#bk-toc .bk-aside-cta{
  margin-top:14px;
  padding:12px 14px;
  background:#eef9f6;
  border:1px solid #bfe8dd;
  border-radius:12px;
}
#bk-toc .bk-aside-cta.is-alt{
  background:#f3f7f9; /* ladí s .bukoma-cta-box--alt */
  border-color:#d6e6ee;
}
#bk-toc .bk-aside-cta strong{
  display:block;
  font-size:16px;
  color:#2E5F66;
  margin-bottom:6px;
}
#bk-toc .bk-aside-cta p{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.4;
}
#bk-toc .bukama-cta-box{ display:none; } /* volitelně: vypnout velké dlaždice v levém sloupci */
#bk-toc .bukoma-button{ display:block; width:100%; }
.bukoma-button--sm{ padding:.45rem .7rem; font-size:.95rem; }



/* === [TABLE FIX] – zabraň horizontálnímu roztahování layoutu === */

/* Scrollovací obal – přebere overflow, stránka zůstane široká max. 100 % */
.bk-product-detail .bk-table-scroll{
  display: block;
  max-width: 100%;
  overflow-x: auto;                 /* horizontální scroll jen uvnitř wrapperu */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch; /* příjemné scrollování na iOS */
  overscroll-behavior-x: contain;    /* nepropaguj „přestřely“ */
}

/* === [TABLE FIX] – PDP srovnávací tabulka ===================== */

/* 1) Wrapper: horizontální scroll drž jen uvnitř tabulky */
.bk-product-detail .bk-table-scroll{
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* 2) Tabulka se roztáhne podle obsahu (ať mají sloupce místo) */
.bk-product-detail .bk-table-scroll > .bk-compare{
  width: max-content;      /* šířka dle obsahu, stránka se neroztahuje */
  table-layout: auto;      /* nefixuj šířky – nech je spočítat podle obsahu */
}

/* 3) HLAVIČKA: nerozlamuj text (hlavně odkazy) a centrovat */
.bk-product-detail .bk-compare thead th{
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  text-align: center;
}
.bk-product-detail .bk-compare thead th a{
  display: inline-block;
  white-space: nowrap;      /* jistota i pro odkazy */
}

/* 4) Sloupce 2..n: dej jim minimální šířku (na mobilu uživatel posune do strany) */
.bk-product-detail .bk-compare thead th:not(:first-child),
.bk-product-detail .bk-compare tbody td:not(:first-child){
  min-width: 10.5rem;       /* ~168 px – uprav dle potřeby */
}
@media (max-width: 420px){
  .bk-product-detail .bk-compare thead th:not(:first-child),
  .bk-product-detail .bk-compare tbody td:not(:first-child){
    min-width: 9.25rem;     /* ~148 px na užších mobilech */
  }
}

/* 5) OBSAHOVÉ BUŇKY: může se lámat, ale ne „po písmenech“ */
.bk-product-detail .bk-compare tbody td{
  overflow-wrap: break-word; /* raději než anywhere */
  word-break: normal;
  hyphens: auto;
}

/* 6) (volitelné) 1. sloupec může zůstat bez zalomení na šířkách >420px */
@media (min-width: 421px){
  .bk-product-detail .bk-compare tbody td:first-child{
    white-space: nowrap;
  }
}

/* 7) (volitelné) sticky 1. sloupec – drž ho na očích při horizontálním scrollu */
.bk-product-detail .bk-table-scroll .bk-compare th:first-child,
.bk-product-detail .bk-table-scroll .bk-compare td:first-child{
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;                    /* sladit se zebrou */
}
.bk-product-detail .bk-table-scroll .bk-compare thead th:first-child{
  background: #fffdf3;                 /* sladit s hlavičkou */
  z-index: 2;
}
.bk-product-detail .bk-table-scroll .bk-compare td:first-child{
  box-shadow: 1px 0 0 #eef2f6;         /* jemná oddělovací linka */
}
/* === [PDP TABLE – FIX v2] ===================================== */

/* A) wrapper – posuvník uvnitř, ne roztahovat layout */
.bk-product-detail .bk-table-scroll{
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges; /* na podporovaných UA rezervuje místo pro lištu */
}

/* B) sjednocení šířek sloupců přes fixed layout (bez zásahu do HTML)
   - nastavíme šířky přes proměnné a použijeme je v <thead> */
.bk-product-detail .bk-table-scroll > .bk-compare{
  /* uprav si dle potřeby (níže jsou breakpointy) */
  --bk-col-label: 9.5rem;   /* 1. sloupec (popisky) */
  --bk-col-data:  10.5rem;  /* každý z 2.–4. sloupce */

  table-layout: fixed;
  width: calc(var(--bk-col-label) + 3 * var(--bk-col-data));
  border-collapse: separate; /* zachová tvé zebra/rádiusy */
  border-spacing: 0;
}

/* konkrétní šířky pro sloupce – fixed layout vezme šířky z THEAD */
.bk-product-detail .bk-compare thead th:first-child{ width: var(--bk-col-label); }
.bk-product-detail .bk-compare thead th:nth-child(2),
.bk-product-detail .bk-compare thead th:nth-child(3),
.bk-product-detail .bk-compare thead th:nth-child(4){ width: var(--bk-col-data); }

/* C) 1. sloupec – přepiš staré nowrap pravidlo (vyšší specificita + !important) */
.bk-product-detail .bk-compare tbody td:first-child{
  white-space: normal !important;   /* přebije původní nowrap */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  box-sizing: border-box;
}

/* D) buňky obecně – ať se obsah drží uvnitř své šířky */
.bk-product-detail .bk-compare th,
.bk-product-detail .bk-compare td{
  box-sizing: border-box;
}

/* E) sticky 1. sloupec – aby nepřekryval sousední text “přes čáru” */
.bk-product-detail .bk-table-scroll .bk-compare th:first-child,
.bk-product-detail .bk-table-scroll .bk-compare td:first-child{
  position: sticky;
  left: 0;
  z-index: 2;           /* nad ostatními buňkami */
  background: #fff;     /* kryje podklad, nic “neprosvítá” */
}
.bk-product-detail .bk-table-scroll .bk-compare thead th:first-child{
  background: #fffdf3;  /* ladí s tvou hlavičkou */
  z-index: 3;
}
.bk-product-detail .bk-table-scroll .bk-compare td:first-child{
  box-shadow: 1px 0 0 #eef2f6; /* jemná svislá linka */
}

/* F) datové sloupce – drobné vyhlazení typografie */
.bk-product-detail .bk-compare thead th{
  white-space: nowrap;         /* U‑CLICK / PREMIUM… na jeden řádek */
  word-break: keep-all;
  text-align: center;
}
.bk-product-detail .bk-compare tbody td{
  overflow-wrap: break-word;   /* uvnitř buněk se klidně zalamuj */
  word-break: normal;
}

/* G) breakpoints – na užších šířkách ubereme trochu z každého sloupce */
@media (max-width: 480px){
  .bk-product-detail .bk-table-scroll > .bk-compare{
    --bk-col-label: 8.75rem;
    --bk-col-data:  9.75rem;
  }
}
@media (max-width: 360px){
  .bk-product-detail .bk-table-scroll > .bk-compare{
    --bk-col-label: 8.25rem;
    --bk-col-data:  9.25rem;
  }
}

/* H) (volitelné) trvale “viditelnější” scrollbary na podporovaných UA */
.bk-product-detail .bk-table-scroll::-webkit-scrollbar{ height: 10px; }
.bk-product-detail .bk-table-scroll::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.28); border-radius: 8px; }
.bk-product-detail .bk-table-scroll{ scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.35) transparent; }

/* Gradientové “šipky” – čistě UX nápověda */
.bk-product-detail .bk-table-scroll.has-hints::before,
.bk-product-detail .bk-table-scroll.has-hints::after{
  content:""; position: sticky; top:0; bottom:0; width:18px; pointer-events:none; z-index:4;
}
.bk-product-detail .bk-table-scroll.has-hints::before{
  left:0;  background:linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%); opacity:0;
}
.bk-product-detail .bk-table-scroll.has-hints::after{
  right:0; background:linear-gradient(to left,  #fff 0%, rgba(255,255,255,0) 100%); opacity:0;
}
.bk-product-detail .bk-table-scroll.hint-left::before { opacity:1; }
.bk-product-detail .bk-table-scroll.hint-right::after { opacity:1; }



/* === PDP srovnávací tabulka – MOBIL: pevné šířky + overflow ===== */
@media (max-width: 960px){

  /* Wrapper – scroll jen uvnitř */
  .bk-product-detail .bk-table-scroll{
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable both-edges;
  }

  /* Tabulka: fixní layout + pevné MIN šířky v PX => vynutí overflow */
  .bk-product-detail .bk-table-scroll > .bk-compare{
    /* cílové šířky (upravitelné) */
    --bk-col-label-px: 144px;    /* 1. sloupec: "Povrch" apod. */
    --bk-col-data-px:  168px;    /* každý z 2.–4. sloupce */

    table-layout: fixed;
    width: auto !important;                       /* aby se mohla roztáhnout */
    min-width: calc(var(--bk-col-label-px) +      /* >>> vynutí > viewportu */
                    3 * var(--bk-col-data-px));
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Sjednocené šířky sloupců (stejné pro 2.–4.) */
  .bk-product-detail .bk-compare thead th:first-child{ width: var(--bk-col-label-px); }
  .bk-product-detail .bk-compare thead th:nth-child(2),
  .bk-product-detail .bk-compare thead th:nth-child(3),
  .bk-product-detail .bk-compare thead th:nth-child(4){ width: var(--bk-col-data-px); }

  /* Hlavička – lámat jen na mezerách, ne uvnitř slov */
  .bk-product-detail .bk-compare thead th{
    display: table-cell !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none;
    text-align: center;
    vertical-align: middle;
  }
  .bk-product-detail .bk-compare thead th a{
    display: inline !important;
    white-space: inherit;
    word-break: keep-all;            /* U-CLICK zůstane celé */
  }

  /* 1. sloupec – dovol zalomení obsahu */
  .bk-product-detail .bk-compare tbody td:first-child{
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    box-sizing: border-box;
  }

  /* Sticky 1. sloupec jen na mobilu */
  .bk-product-detail .bk-table-scroll .bk-compare th:first-child,
  .bk-product-detail .bk-table-scroll .bk-compare td:first-child{
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
  }
  .bk-product-detail .bk-table-scroll .bk-compare thead th:first-child{ background:#fffdf3; z-index:3; }
  .bk-product-detail .bk-table-scroll .bk-compare td:first-child{ box-shadow: 1px 0 0 #eef2f6; }
}

/* === DESKTOP (≥961px): ponech původní chování ================== */
@media (min-width: 961px){
  .bk-product-detail .bk-table-scroll > .bk-compare{
    table-layout: auto !important;
    width: auto !important;
    min-width: 0 !important;        /* žádné vynucování overflow */
  }
  .bk-product-detail .bk-compare thead th{
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap;
    word-break: keep-all;
  }
  .bk-product-detail .bk-compare thead th a{
    display: inline !important;
    white-space: nowrap;
  }
  .bk-product-detail .bk-table-scroll .bk-compare th:first-child,
  .bk-product-detail .bk-table-scroll .bk-compare td:first-child{
    position: static; box-shadow: none;
  }
}


/* === PDP srovnávací tabulka – DESKTOP: stejné šířky sloupců ==== */
@media (min-width: 961px){

  /* Přepni desktop na fixed layout + 100% šířku tabulky */
  .bk-product-detail .bk-table-scroll > .bk-compare{
    /* snadno laditelné proměnné */
    --bk-col-label-d: 26%;                    /* 1. sloupec (popisky) */
    --bk-col-data-d: calc((100% - var(--bk-col-label-d)) / 3); /* 2.–4. sloupec */

    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;                  /* žádné vynucené overflow na desktopu */
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Rozdejte šířky z proměnných */
  .bk-product-detail .bk-compare thead th:first-child{
    width: var(--bk-col-label-d) !important;
  }
  .bk-product-detail .bk-compare thead th:nth-child(2),
  .bk-product-detail .bk-compare thead th:nth-child(3),
  .bk-product-detail .bk-compare thead th:nth-child(4){
    width: var(--bk-col-data-d) !important;
  }

  /* Hlavička na desktopu bez zbytečných zalomení (jako dřív) */
  .bk-product-detail .bk-compare thead th{
    white-space: nowrap;
    word-break: keep-all;
    text-align: center;
  }
  .bk-product-detail .bk-compare thead th a{
    white-space: nowrap;
    display: inline;
  }

  /* 1. sloupec na desktopu nenecháváme „sticky“ */
  .bk-product-detail .bk-table-scroll .bk-compare th:first-child,
  .bk-product-detail .bk-table-scroll .bk-compare td:first-child{
    position: static;
    box-shadow: none;
  }

  /* Obsah buněk: standardně se může lámat, ale drž se uvnitř své šířky */
  .bk-product-detail .bk-compare th,
  .bk-product-detail .bk-compare td{
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: normal;
  }
}







/* ===== BUKOMA • vzorky – skrýt hodnocení na detailu ===== */
/* Hvězdičky / rating wrap u názvu produktu */
.bk-sample-detail .p-detail-info .stars-wrapper { display: none !important; }
/* Pro jistotu i případné generické „hvězdičky“ v info panelu */
.bk-sample-detail .p-detail-info .star-list,
.bk-sample-detail .p-detail-info .show-ratings { display: none !important; }

/* (volitelné) schování samotné záložky a obsahu Hodnocení, pokud by zůstala vidět – JS to řeší taky */
.bk-sample-detail a[href="#ratingTab"],
.bk-sample-detail #ratingTab { display: none !important; }




/* === A11y utility === */

/* 1) Visually-hidden (jen pro čtečky, neviditelné vizuálně) */
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 2) Viditelný focus na klíčových prvcích (jen když to UA vyhodnotí jako vhodné) */
:root{
  --bk-focus-color: #0f766e; /* můžeš upravit na firemní kontrastní barvu */
  --bk-focus-outline: 2px solid var(--bk-focus-color);
  --bk-focus-offset: 3px;
}
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: var(--bk-focus-outline);
  outline-offset: var(--bk-focus-offset);
  border-radius: 4px;
}

/* 3) Skip-link – ukaž na focus (v Shoptetu obvykle existuje, jen je schovaný) */
.skip-link, a[href*="#content"].skip-link, a[href*="#main"].skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus, a[href*="#content"].skip-link:focus, a[href*="#main"].skip-link:focus{
  left:12px; top:12px; z-index:9999;
  background:#fff; color:#111; padding:8px 12px; border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* 4) Neopírej se jen o barvu – linky decentně podtrhni */
a { text-underline-offset: 2px; text-decoration-thickness: 1.5px; }

/* 5) Tap targety – drobná rezerva na menších CTA */
.bukoma-button, .btn, .button, button, [role="button"]{
  min-height: 40px; /* AA je 24px, AAA 44px – začni na 40px */
}









/* YouTube wrapper – 16:9 na desktopu (letterbox), 9:16 na mobilech */
.bk-video {
  position: relative;
  width: 100%;
  max-width: 720px;           /* volitelně – omezení šířky na desktopu */
  margin: 1rem auto 2rem;     /* centrování a rozestupy */
  background: #000;           /* černé okraje */
  border-radius: 12px;        /* zaoblení, můžeš klidně smazat */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
/* Poměr stran – 16:9 jako výchozí (desktop) */
.bk-video::before { content:""; display:block; padding-top:56.25%; }
/* Vlastní iframe vyplní obal */
.bk-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Mobil: přepnout rám na 9:16, ať je „shorts“ vysoký bez černých boků */
@media (max-width: 768px) {
  .bk-video::before { padding-top:177.78%; } /* 9:16 */
  .bk-video { max-width: 420px; }            /* můžeš klidně odstranit */
}


/* Přehrávač – 16:9, letterbox */
.bk-video { position:relative; background:#000; border-radius:12px; overflow:hidden; margin:16px 0; }
.bk-video::before { content:""; display:block; padding-top:56.25%; }
.bk-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Náhledy */
.video-wrap { margin-top:12px; }
.video-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.video-thumb { display:flex; position:relative; aspect-ratio:16/9; border:0; padding:0; background:#111; border-radius:8px; overflow:hidden; cursor:pointer; }
.video-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.video-thumb[aria-pressed="true"] { outline:2px solid #444; }
.video-thumb .label { position:absolute; left:8px; bottom:8px; font-size:12px; color:#fff; background:rgba(0,0,0,.6); padding:4px 6px; border-radius:4px; }

/* „Zobrazit další“ */
.video-actions { display:flex; justify-content:center; margin-top:10px; }
.video-more { border:1px solid #ddd; background:#fff; border-radius:8px; padding:8px 14px; cursor:pointer; }

/* Skrývání přebytečných náhledů */
.video-wrap:not(.expanded) .video-thumb.is-extra { display:none; }

/* Mobil – horizontální scroller */
@media (max-width: 768px) {
  .video-gallery { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
  .video-thumb { min-width: 240px; scroll-snap-align:start; }
}





@media (max-width: 991.98px){
  .bk-archive-cut { display: none !important; }
}

/* BUKOMA — Fix názvů (A HARD, target: .product .name + [data-testid="productCardName"]) */
.product .name,
.product .name [data-testid="productCardName"]{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto;

  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;

  /* zrušit multi-line clamp z šablony */
  display: block !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: initial !important;
  text-overflow: clip !important;
}

/* Když by text pořád mizel, bývá to overflow na obalu — odkomentuj dle potřeby:.product, .p-in, .p-in-in { overflow: visible !important; } */










/* Grid: 1 sloupec na mobilu, 2 na desktopu */
.bk-grid.bk-grid--two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px) {
  .bk-grid.bk-grid--two { grid-template-columns: 1fr 1fr; }
}

/* Karty, perexy – navazuje na váš vizuál */
.bk-reviews { margin: 2rem 0; }
.bk-reviews__head { margin-bottom: 1rem; }
.bk-reviews__sub { color: #6b7280; margin: 0; }
.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; }

/* Iframe wrapper – responzivní výška */
.bk-embed { position: relative; }
.bk-embed--auto { min-height: 420px; }
@media (min-width: 640px)  { .bk-embed--auto { min-height: 520px; } }
@media (min-width: 1024px) { .bk-embed--auto { min-height: 600px; } }

/* Doplňková poznámka a CTA */
.bk-note { margin-top: .5rem; font-size: .875rem; color: #6b7280; }
.bk-cta-row { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }







/* === BK • Core types grid (SPC/PP/LVT/HDF) === */
.bk-coretypes{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin:24px 0;
}
.bk-coretype{ text-align:center; }
.bk-coretype img{
  width:100%;
  aspect-ratio:1/1;            /* čtverec */ 
  object-fit:contain;
  background:#f6f6f6;          /* jemné pozadí pod ikonou/fotkou */
  border:1px solid #e6e8eb;
  border-radius:12px;
  padding:16px;
  display:block;
  margin:0 auto 10px;
}
.bk-coretype h鑰{ margin:8px 0 6px; font-weight:700; font-size:clamp(18px,1.2vw + 12px,22px); color:#2E5F66; }
.bk-coretype p{ margin:0; font-size:clamp(15px,.9vw + 10px,18px); line-height:1.55; color:#2b2b2b; }

@media (max-width:1024px){ .bk-coretypes{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bk-coretypes{ grid-template-columns:1fr; } }

/* drobná typografie v rámci článku, ať nejsi na 10–11px */
.bk-article .bukoma-text{ font-size:clamp(16px,1.05vw + 10px,18px); line-height:1.6; }
.bk-article h3{ font-size:clamp(22px,1.6vw + 16px,28px); }
.bk-caption{ font-size:.95rem; }


/* === BK • Zámkové systémy – 3 dlaždice s 1:1 obrázkem === */
.bk-join-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin:24px 0;
}
.bk-join{
  text-align:center;
}
.bk-join__img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#fff;
  border:1px solid #e6e8eb;
  border-radius:12px;
  padding:18px;
  margin-bottom:10px;
}
.bk-join__title{
  font-weight:700;
  font-size:clamp(18px,1.2vw + 12px,22px);
  color:#2E5F66;
  margin:4px 0 6px;
}
.bk-join__text{
  font-size:clamp(15px,.9vw + 10px,18px);
  line-height:1.55;
  color:#2b2b2b;
}
.bk-join__note{
  font-size:.9rem;
  color:#6b7280;
  margin-top:6px;
}
@media (max-width:1024px){ .bk-join-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .bk-join-grid{ grid-template-columns:1fr; } }

/* BK • velký callout pro články (větší text, panelový vzhled) */
.bk-callout{
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  background: #fff;
  font-size: 18px;           /* stejná velikost jako běžný text v článku */
  line-height: 1.55;
}
.bk-callout h4{ margin:0 0 6px; font-weight:700; color:#2E5F66; }
.bk-callout--info{    background:#eef3fb; border-color:#c7d8ff; }
.bk-callout--success{ background:#eef9f6; border-color:#bfe8dd; }
.bk-callout--warning{ background:#fff3f0; border-color:#ffd4c7; }


/* BK – globální banner s jemným zoomem a zaoblením */
.bk-promo-banner { margin: 16px 0; }
.bk-promo-link{
  display:block;
  border-radius:14px;         /* zaoblení rohů */
  overflow:hidden;            /* ořez obrázku v rozích */
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  transform:translateZ(0);    /* HW akcelerace pro plynulý hover */
}
.bk-promo-link img{
  display:block;
  width:100%;
  height:auto;
  transition: transform .35s ease;
}
.bk-promo-link:hover img{ transform: scale(1.03); } /* jemný zoom */
.bk-promo-link:focus-visible{
  outline:3px solid #009688;  /* přístupnost */
  outline-offset:3px;
  border-radius:14px;
}