/* hevea-vzhled.css – vlastní vzhled Hevey (WOODS s.r.o.), načítá se v Záhlaví pod style.css.
   v1 (6. 11. 2026): galerie obrázků na detailu + oprava přetékání z okna (od 768 px).
   v2 (6. 11. 2026): varianty na detailu jako dlaždice místo roletky (všechny šířky).
   Soubory po EshopGuru (style.css, script.js…) se nepřepisují, změny patří sem. */

/* ===== Galerie obrázků na detailu (podle DEK, mechanika z Ebau) – návrh pro Heveu 6. 11. 2026 =====
   Barvy Hevey ze style.css: hnědá lišta menu #5a300f (najetí #553216), oranžová tlačítka #f7941d,
   béžové boxy #faf3ed (karta s košíkem, záložky), písmo Montserrat, rohy 3 px jako tlačítka webu. */
html.hg-open{overflow:hidden}
.hg{position:fixed;inset:0;z-index:2147483000;background:rgba(43,24,8,.72);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif}
.hg-panel{position:relative;background:#fff;width:calc(100vw - 32px);height:calc(100vh - 32px);height:calc(100dvh - 32px);max-width:1600px;display:grid;grid-template-columns:1fr 300px;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden}
.hg-panel:focus{outline:none}
.hg-stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.hg-imgbox{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:28px 84px 12px;touch-action:pan-y}
.hg-imgbox img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.hg-count{align-self:center;margin:0 0 18px;padding:4px 14px;background:#faf3ed;border-radius:3px;color:#5a300f;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
/* šipky a křížek jako lišta menu: hnědé, po najetí oranžové (jako tlačítko Do košíku) */
.hg-arrow,.hg-close{display:flex;align-items:center;justify-content:center;padding:0;border:0;background:#5a300f;color:#faf3ed;cursor:pointer;transition:background-color .15s,color .15s}
.hg-arrow:hover,.hg-close:hover{background:#f7941d;color:#fff}
.hg-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:3px;box-shadow:0 2px 7px rgba(0,0,0,.16)}
.hg-arrow svg{width:22px;height:22px}
.hg-prev{left:18px}.hg-next{right:18px}
.hg-side{background:#faf3ed;padding:22px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.hg-head{display:flex;align-items:flex-start;gap:12px}
.hg-name{flex:1;margin:0;padding-bottom:12px;font-size:17px;line-height:1.35;font-weight:600;color:#000;position:relative}
.hg-name:after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;background:#f7941d}
.hg-close{flex:none;width:38px;height:38px;border-radius:3px;margin:-4px -4px 0 0}
.hg-close svg{width:18px;height:18px}
.hg button:focus:not(:focus-visible){outline:none}
.hg button:focus-visible{outline:2px solid #f7941d;outline-offset:2px}
.hg-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hg-thumb{aspect-ratio:1;background:#fff;border:1px solid #e3e3e3;border-radius:3px;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .15s}
.hg-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.hg-thumb:hover{border-color:#f7941d}
.hg-thumb.is-on{border-color:#5a300f;box-shadow:inset 0 0 0 1px #5a300f}
.hg.hg-one .hg-arrow,.hg.hg-one .hg-count,.hg.hg-one .hg-thumbs{display:none}
/* tablet: užší boční panel */
@media (max-width:1023px){
  .hg-panel{grid-template-columns:1fr 230px}
  .hg-thumbs{grid-template-columns:repeat(2,1fr)}
  .hg-imgbox{padding:24px 76px 12px}
}
/* mobil (do 767 px): beze změny, jak to má Shoptet – okno se tam neotevírá */
/* tablet na výšku (768–1023 px): název nahoře, fotka přes celou šířku, náhledy v řádku dole
   (převzato z Ebau css v167, schváleno Lenkou 6. 11. 2026 i pro Heveu) */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait){
  .hg-panel{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}
  .hg-side{display:contents}
  .hg-head{grid-row:1;padding:16px 16px 14px 20px;background:#faf3ed}
  .hg-close{margin:0}
  .hg-stage{grid-row:2}
  .hg-imgbox{padding:20px 76px 8px}
  .hg-thumbs{grid-row:3;display:flex;gap:10px;overflow-x:auto;padding:12px 20px 16px;background:#faf3ed}
  .hg-thumb{flex:none;width:76px;height:76px}
}
/* nízké okno (notebook 1280 × 720 a podobné): menší okraje, ať je fotka co největší */
@media (min-width:768px) and (max-height:760px){
  .hg-panel{width:calc(100vw - 20px);height:calc(100vh - 20px);height:calc(100dvh - 20px)}
  .hg-imgbox{padding-top:14px;padding-bottom:6px}
  .hg-count{margin-bottom:10px}
  .hg-side{padding-top:16px;padding-bottom:16px}
}

/* ===== Nic nesmí přetékat z okna (počítač a tablet; mobil je Shoptet) – 6. 11. 2026 ===== */
/* 1) Úvodní banner: Shoptet dává šipkám right/left:-20px, banner je u Hevey přes celé okno,
      takže šipka „další“ po najetí myší vyčnívá z okna a stránka poskočí o 20 px. */
@media (min-width:768px){
  #carousel .carousel-control.right:before{right:20px}
  #carousel .carousel-control.left:before{left:20px}
}
/* 2) Posuvníky výrobků a výhod: style.css dává šipkám right/left:-44px (vedle obsahu).
      Na užších oknech vedle obsahu místo není (1024, 1200–1270, 768–850 px…). Šipka zůstane
      vedle obsahu, dokud je místo, jinak se posune dovnitř – vždy aspoň 16 px od okraje okna. */
@media (min-width:768px){
  .slick-next{right:max(-44px, calc((100% - 100vw) / 2 + 16px));z-index:9}
  .slick-prev{left:max(-44px, calc((100% - 100vw) / 2 + 16px));z-index:9}
}


/* ===== Varianty jako dlaždice místo roletky (v2, 6. 11. 2026) =====
   Nadpis parametru („Délka prkna“) černě, tučně (Lenka 6. 11.), pod ním dlaždice: vždy 2 vedle sebe (Lenka 6. 11.: 3 v řadě bylo nahuštěné),
   2 na mobilu; 1 a 2 možnosti po polovině šířky. Na dlaždici rozměr, cena za jednotku, případně stav.
   Vpravo nahoře kroužek výběru, vybraná dlaždice: hnědý rámeček, béžové pozadí,
   kroužek s fajfkou. Barvy, rohy a linky podle vzorů detailu (ID 77 a 365):
   hnědá #553216, linky #ecdcc8 / #e6ddd3, béžová #fff8ee, druhý text #6b5a4c, rohy 8 px. Vyprodané tlumeně a napoprvé schované pod odkazem. */
.p-detail .detail-parameters tr.hv-var-radek,
.p-detail .detail-parameters tr.hv-var-radek > th,
.p-detail .detail-parameters tr.hv-var-radek > td{display:block;width:auto;padding:0;border:0;background:none;text-align:left}
.p-detail .detail-parameters tr.hv-var-radek > th{margin:0 0 14px;font-size:19px;font-weight:700;line-height:1.3;color:#000}
.p-detail .detail-parameters tr.hv-var-radek > td{position:relative}
.hv-var-skryta{position:absolute!important;left:0!important;top:0!important;width:1px!important;min-width:0!important;height:1px!important;min-height:0!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;opacity:0!important;pointer-events:none!important;background:none!important}

.hv-var-obal{margin:0 0 20px;font-family:'Montserrat',sans-serif}
.hv-var{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hv-var.hv-var-dve{grid-template-columns:repeat(2,minmax(0,1fr))}
.hv-var-tile{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;min-height:0;margin:0;padding:16px 18px 15px;background:#fff;border:1px solid #ecdcc8;border-radius:8px;color:#1a1a1a;font:inherit;line-height:1.2;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,box-shadow .15s ease}
/* délka nahoře (velká, hnědá jako lišta menu – Lenka 6. 11.), pod tenkou linkou cena (tmavá) a stav */
.hv-var-val{display:block;padding-right:28px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:#553216;font-variant-numeric:tabular-nums}
.hv-var-price{display:block;margin-top:11px;padding-top:11px;border-top:1px solid #e6ddd3}
.hv-var-price{font-size:16.5px;font-weight:600;color:#1a1a1a;font-variant-numeric:tabular-nums;line-height:1.3}
.hv-var-num,.hv-var-unit{white-space:nowrap}
.hv-var-unit{font-size:14px;font-weight:400;color:#6b5a4c}
.hv-var-stav{display:block;margin-top:6px;font-size:14px;font-weight:500;color:#8a7d72}
.hv-var-stav.is-skladem{color:#2b7f41}
.hv-var-stav.is-skladem::before{content:"";display:inline-block;width:8px;height:8px;margin:0 6px 1px 0;border-radius:50%;background:currentColor;vertical-align:middle}

/* kroužek výběru vpravo nahoře */
.hv-var-kruh{position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;border:1.5px solid #cdbfb2;background:#fff}
/* fajfka zeleně jako „Skladem“ (Lenka 6. 11.), u vyprodané šedě níž */
.hv-var-tile[aria-checked="true"] .hv-var-kruh{border-color:#2b7f41;background:#2b7f41 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}

@media (hover:hover){
  .hv-var-tile:hover{border-color:#c9ab92;box-shadow:0 4px 14px rgba(85,50,22,.08)}
  .hv-var-tile:hover .hv-var-kruh{border-color:#553216}
}
/* vybraná: stejná béžová jako box s cenou a košíkem (#faf3ed ze style.css), linka jako čárkovaná linka
   v boxu (#e0cdb9), jednoduchý hnědý rámeček – jedna barevná rodina s boxem (Lenka 6. 11.) */
/* vybraná: bílé tělo, podsvícená jen délka, silný hnědý rámeček (Lenka 6. 11., podle vzoru „Prohlížíte“) */
.hv-var-tile[aria-checked="true"]{background:#fff;border-color:#553216;box-shadow:inset 0 0 0 1px #553216}
.hv-var-tile[aria-checked="true"] .hv-var-price{border-top-color:#e0cdb9}   /* cena zůstává tmavá – hnědá je jen délka v nadpisu a výběr */

/* vyprodané: tlumeně, ale čitelně */
.hv-var-tile.is-vyprodano{background:#faf9f8;border-color:#ebe6e1}
.hv-var-tile.is-vyprodano .hv-var-val{color:#8f8780}
.hv-var-tile.is-vyprodano .hv-var-price{color:#a39b95;font-weight:500;border-top-color:#f0ece8}
.hv-var-tile.is-vyprodano .hv-var-kruh{border-color:#ddd6d0}
.hv-var-tile.is-vyprodano[aria-checked="true"]{background:#f3f0ed;border-color:#8f8780;box-shadow:inset 0 0 0 1px #8f8780}
.hv-var-tile.is-vyprodano[aria-checked="true"] .hv-var-kruh{border-color:#8f8780;background-color:#8f8780}
.hv-var-tile:disabled{opacity:.45;cursor:not-allowed}

/* délka podsvícená béžovým pruhem v horní části dlaždice (Lenka 6. 11.), barva jako box s košíkem */
.hv-var-tile{overflow:hidden}
.hv-var-val{margin:-16px -18px 0;padding:15px 50px 13px 18px;background:#faf3ed;border-bottom:1px solid #ecdcc8}
.hv-var-kruh{top:15px}
.hv-var-price{margin-top:12px;padding-top:0;border-top:0}
.hv-var-tile[aria-checked="true"] .hv-var-val{background:#f5e8db;border-bottom-color:#e0cdb9}
.hv-var-tile.is-vyprodano .hv-var-val{background:#f3f0ed;border-bottom-color:#ebe6e1}

/* schované navíc (vyprodané) a odkaz „Zobrazit i vyprodané délky (n)“ */
.hv-var-tile.hv-var-navic{display:none}
.hv-var-obal.is-vse .hv-var-tile.hv-var-navic{display:flex}
.hv-var-vice{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:4px 0;background:none;border:0;color:#553216;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.hv-var-vice span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(85,50,22,.35)}
.hv-var-vice:hover span{text-decoration-color:#f7941d}
.hv-var-vice::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.hv-var-vice[aria-expanded="true"]::after{margin-top:3px;transform:rotate(-135deg)}

.hv-var-tile:focus:not(:focus-visible),.hv-var-vice:focus:not(:focus-visible){outline:none}
.hv-var-tile:focus-visible,.hv-var-vice:focus-visible{outline:2px solid #f7941d;outline-offset:2px}

@media (max-width:767px){
  .hv-var{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hv-var-tile{padding:12px 14px 11px}
  .hv-var-val{font-size:17px}
  .hv-var-price{margin-top:9px;padding-top:9px;font-size:15px}
  .hv-var-unit,.hv-var-stav{font-size:13px}
  .hv-var-kruh{top:12px;right:12px}
  .hv-var-val{margin:-12px -14px 0;padding:12px 42px 11px 14px}
  .hv-var-price{margin-top:10px;padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .hv-var-tile,.hv-var-kruh,.hv-var-vice::after{transition:none}
}

/* ===== Box s cenou: nahoře „hlava“ s variantou a dostupností (v2, Lenka 6. 11. 2026) =====
   Všechno, co patří k ceně, je v jednom béžovém boxu: nahoře vlevo zvolená varianta („Délka prkna: 4000 mm“,
   jen u výrobku s jedinou variantou), vpravo dostupnost jako text („● Skladem (715 ks)“ – Skladem zeleně,
   počet černě), pod tím linka jako „1 ks = 1 prkno…“, pak cena a košík. Zelený pruh nad boxem zmizel.
   Před výběrem varianty je v hlavě hnědě „Vyberte variantu“. Skript hlavu vytvoří a dostupnost do ní přesune. */
.p-detail .p-info-wrapper .kosik > .hv-kosik-hlava{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;grid-column:1/-1;flex:0 0 100%;width:100%;order:-1;margin:0 0 16px;padding:0 0 13px;border-bottom:1px dashed #d4bba1;font-family:'Montserrat',sans-serif;font-size:15px;line-height:1.35}
.hv-kosik-varianta{order:1;font-weight:600;color:#000}
.hv-kosik-varianta b{margin-left:6px;font-weight:700;color:#553216}
.p-detail .p-info-wrapper .kosik .hv-kosik-hlava .availability-value{order:2;display:flex!important;align-items:baseline;gap:6px;width:auto;max-width:100%;margin:0!important;padding:0!important;background:none!important;border-radius:0;font-size:15px;line-height:1.35}
.p-detail .p-info-wrapper .kosik .hv-kosik-hlava .availability-value span{padding:0!important;background:none!important}
.p-detail .p-info-wrapper .kosik .hv-kosik-hlava .availability-value .availability-label{font-weight:700}
/* „Skladem“ dobře vidět: zeleně, tučně, větší, se zelenou fajfkou (Lenka 6. 11.) */
.p-detail .p-info-wrapper .kosik .hv-kosik-hlava .availability-value .availability-label.hv-skladem{color:#2b7f41;font-size:16px;font-weight:700}
.p-detail .p-info-wrapper .kosik .hv-kosik-hlava .availability-value .availability-label.hv-skladem::before{content:"";display:inline-block;width:18px;height:18px;margin:0 7px 0 0;border-radius:50%;vertical-align:-3px;background:#2b7f41 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.p-detail .p-info-wrapper .kosik .hv-kosik-hlava .availability-value .availability-amount{font-weight:500;color:#000}
.p-detail .p-info-wrapper .kosik .hv-kosik-hlava .availability-value > .default-variant:not(.no-display) .availability-label{font-weight:600;color:#553216}
/* jediná varianta skladem: řádek s dlaždicemi se schová, varianta je napsaná v hlavě boxu */
.p-detail .detail-parameters tr.hv-var-radek.hv-var-jedina{display:none}

/* cena a „/ ks“ vždy na jednom řádku (na notebooku 1366 px padalo „/ ks“ pod cenu) */
.p-detail .p-info-wrapper .kosik .price-final,.p-detail .p-info-wrapper .kosik .price-final-holder{white-space:nowrap}
.type-detail .p-info-wrapper .kosik{grid-template-columns:max-content minmax(0,1fr)}
.type-detail .p-info-wrapper .kosik .add-to-cart{justify-self:end}
@media (max-width:520px){
  .type-detail .p-info-wrapper .kosik{grid-template-columns:1fr}
  .type-detail .p-info-wrapper .kosik .add-to-cart{justify-self:stretch}
}