/* =====================================================================
   drevko-variant-tiles-SLIDER.css  —  FRANCÚZSKO (drevko.fr)
   Verzia: v1.16-slider (2026-06-29) — modal s porovnávacím „mat vs lesk" sliderom
   (v1.12: „glissez" = tmavšia zelená bez boldu; pätička/disclaimer malá sivá dole)
   (v1.13: nadpis + popis v hlavičke vycentrované na stred)
   (v1.14: A4 výzva „Glissez" priamo na obrázku (po 1. ťahaní zmizne);
           B4 tlačidlo = ikona oka + „Voir la différence")
   (v1.15: desktop strop obrázka ADAPTÍVNY podľa výšky okna → celý obsah BEZ scrollu)
   (v1.16: jemné hnedé podčiarknutie aj na nadpisoch „Finition brillante/mate")
   + strop výšky obrázka (motívy na výšku sa nezväčšujú cez celý modal)
   + popisky strán = biely text na jemnom TIENI (gradient), KLIPOVANÉ s čiarou
     (plný lesk = len Brillante, plný mat = len Mate)
   + nadpisy „Finition brillante/mate" + guľka = čierne; „glissez" = CTA NAD obrázkom
   + slovo „finition" v titulku = jemné hnedé podfarbenie (#f3e6d6)
   + DESKTOP (≥760px): texty POD sliderom (860px, strop 52dvh), maskot MEDZI
     dvoma blokmi textu; na mobile je maskot skrytý
   (TEST varianta; pôvodný modal s 2 kartami je v drevko-variant-tiles.css)
   Štýl klikateľných dlaždíc pre variantové <select> dropdowny.
   Ktoré parametre sa dlaždicujú rieši JS podľa ID (data-parameter-id).
   ===================================================================== */

/* Nadpis nad dlaždicami (názov parametra) */
.drevko-tiles-label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#111;
  text-transform:uppercase;
  letter-spacing:.72px;
  margin-bottom:8px;
  font-family:inherit;
}

/* Mriežka dlaždíc */
.drevko-tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:6px;
  width:100%;
}

/* Jedna dlaždica */
.drevko-tile{
  position:relative;
  border:1px solid #e2e2e2;
  border-radius:8px;
  padding:11px 10px;
  cursor:pointer;
  background:#fff;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:48px;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.drevko-tile .drevko-tile-name{font-size:14px;font-weight:700;color:#111;line-height:1.2}
.drevko-tile .drevko-tile-sub{font-size:12px;color:#7ea035;font-weight:600}

/* Aktívna (zvolená) dlaždica */
.drevko-tile.is-active{border-color:#93ba40;background:#f4f8ea}
.drevko-tile.is-active .drevko-tile-name{color:#5d7a22}

/* Zelený „✓" odznak */
.drevko-tile .drevko-tile-check{
  position:absolute;top:-7px;right:-7px;
  width:21px;height:21px;border-radius:50%;
  background:#93ba40;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5);
  transition:opacity .15s,transform .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.drevko-tile.is-active .drevko-tile-check{opacity:1;transform:scale(1)}
.drevko-tile .drevko-tile-check svg{width:11px;height:11px;display:block}

.drevko-tile:active{transform:scale(.98)}

/* Responzív */
@media (max-width:339px){
  .drevko-tiles{grid-template-columns:1fr}
}
@media (min-width:480px){
  .drevko-tiles{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .drevko-tile:not(.is-active):hover{
    border-color:#93ba40;
    box-shadow:0 0 0 3px rgba(147,186,64,.25),0 2px 10px rgba(147,186,64,.35);
  }
}
@media (min-width:768px){
  .drevko-tiles{grid-template-columns:repeat(auto-fit,minmax(130px,160px));justify-content:start}
}

/* Skryť natívny <select>, ktorý nahrádzajú dlaždice */
select.drevko-tile-native{display:none!important}

/* =====================================================================
   ZJEDNOTENIE naprieč variantmi (dlaždice aj farebné swatche)
   ===================================================================== */

/* (2) Jednotný nadpis parametra.
   Dlaždice používajú .drevko-tiles-label, farebné swatche majú natívny
   .variant-label — nech vyzerajú rovnako. */
.variant-list > .variant-label{
  display:block;            /* bez !important — nech inline display:none (skryté pri dlaždiciach) vyhrá */
  font-size:14px !important;
  font-weight:700 !important;
  color:#111 !important;
  text-transform:uppercase !important;
  letter-spacing:.72px !important;
  margin-bottom:8px !important;
  font-family:inherit !important;
}

/* (1) Farebné swatche: rovnaký hover a „zvolený" stav ako dlaždice.
   Pravidlá Shoptetu majú vyššiu špecificitu (#product-detail-form …),
   preto !important. */

/* Efekt patrí na VONKAJŠÍ rámik (.advanced-parameter), NIE na vnútornú farbu
   (.advanced-parameter-inner) — glow ide von, rovnako ako pri dlaždiciach. */

/* hover = zelený vonkajší rám + jemný zelený glow (identické s .drevko-tile:hover) */
.advanced-parameter:hover{
  border-color:#93ba40 !important;
  box-shadow:0 0 0 3px rgba(147,186,64,.25),0 2px 10px rgba(147,186,64,.35) !important;
}

/* zvolený = zelený vonkajší rám; ✓ odznak ostáva (rieši ho tvoja hlavička) */
.advanced-parameter:has(.advanced-parameter-inner.yes-before){
  border-color:#93ba40 !important;
  box-shadow:0 0 0 2px rgba(147,186,64,.35) !important;
}

/* =====================================================================
   VALIDÁCIA „vyber variant"
   Shoptet pri pokuse o pridanie do košíka bez výberu pridá na <body>
   triedu .variant-not-chosen a červeno zvýrazní nevybrané varianty.
   Natívny <select> však skrývame -> premietneme červené na dlaždice;
   a swatchom dáme červené na vonkajší rámik (konzistentne so zeleným).
   ===================================================================== */

/* (a) dlaždice — náhrada za červený rám skrytého <select>-u.
   Nadpis NEčervenáme (natívne sa label tiež nečervená) — červené ostávajú
   len jednotlivé možnosti (dlaždice), konzistentne s farbami. */
body.variant-not-chosen .variant-list:not(.variant-selected) .drevko-tile{
  border-color:var(--colors-state-danger,#d63500);
}

/* (b) farby — červené presunieme z vnútornej farby na vonkajší rámik */
body.variant-not-chosen .variant-list:not(.variant-selected) .advanced-parameter-inner{
  border-color:transparent !important;
  box-shadow:none !important;
}
body.variant-not-chosen .variant-list:not(.variant-selected) .advanced-parameter{
  border-color:var(--colors-state-danger,#d63500) !important;
  box-shadow:0 0 0 2px rgba(214,53,0,.28) !important;
}

/* =====================================================================
   EXPLAINER MODAL (vysvetlenie rozdielu možností, napr. Mate / Brillante)
   Dátový a znovupoužiteľný; trigger sa pridáva len k parametrom, ktoré
   majú obsah v configu (JS: EXPLAINERS).
   ===================================================================== */

/* trigger pri nadpise parametra */
.drevko-help{
  display:inline-flex;align-items:center;gap:0;vertical-align:middle;
  margin-left:2px;
  border:0;background:#f3e6d6;color:#6b4a2a;
  font-family:inherit;font-weight:700;font-size:12.5px;
  text-transform:none;letter-spacing:0;line-height:1.2;
  padding:6px;border-radius:8px;cursor:pointer;
  transition:background-color .15s,color .15s;
}
.drevko-help:hover{background:#ebd9c2;color:#573a1f}
.drevko-help svg{width:14px;height:14px;flex:0 0 auto;display:block}
/* Default: zobrazené celé „? Mate ou brillante?"; po výbere variantu sa
   text animovane stiahne a ostane len ikona „?". */
.drevko-help-txt{
  display:inline-block;max-width:240px;opacity:1;overflow:hidden;white-space:nowrap;
  margin-left:6px;transition:max-width .32s ease,opacity .25s ease,margin-left .32s ease;
}
.drevko-help.is-collapsed .drevko-help-txt{max-width:0;opacity:0;margin-left:0}

/* overlay + okno */
.drevko-modal-ov{
  position:fixed;inset:0;background:rgba(28,22,14,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:0;z-index:99999;
  overscroll-behavior:contain;
}
.drevko-modal-ov[hidden]{display:none}
.drevko-modal{
  background:#fff;width:100%;max-width:760px;
  max-height:92vh;max-height:92dvh;          /* dvh = reálna výška na mobile (adresný riadok) */
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:18px 18px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.25);
  position:relative;font-family:inherit;
}
/* scrolluje sa len obsah; „×" (mimo tohto wrapperu) ostáva fixne navrchu */
.drevko-modal-scroll{
  flex:1 1 auto;min-height:0;overflow:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
@media (min-width:600px){
  .drevko-modal-ov{align-items:center;padding:20px}
  .drevko-modal{border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.32)}
}
.drevko-modal-x{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;
  background:#f4f4f4;color:#444;font-size:22px;line-height:1;cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
}
.drevko-modal-x:hover{background:#ececec}
.drevko-modal-head{padding:22px 52px 8px;text-align:center}  /* nadpis + popis na stred (52px po stranách = priestor pre „×") */
/* maskot drevko — MEDZI dvoma blokmi textu; na mobile skrytý (zapne sa ≥760px) */
.drevko-modal-mascot{display:none;width:auto;height:104px;align-self:center}
.drevko-modal-head h3{margin:0;font-size:21px;font-weight:800;color:#202020}
.drevko-u{box-shadow:inset 0 -8px 0 #f3e6d6}  /* jemné hnedé podfarbenie slova „finition" */
.drevko-modal-sub{margin:6px 0 0;color:#7a7a7a;font-size:14px;font-weight:600}
.drevko-modal-grid{display:grid;grid-template-columns:1fr;gap:14px;padding:16px 22px 8px}
@media (min-width:600px){ .drevko-modal-grid{grid-template-columns:1fr 1fr;gap:18px} }
.drevko-fcard{border:1px solid #ececec;border-radius:14px;overflow:hidden;background:#fafafa}
.drevko-fart{position:relative;aspect-ratio:4/3;overflow:hidden}
.drevko-fart img{width:100%;height:100%;display:block;object-fit:cover}
/* Rozdiel mat/lesk je zapečený priamo v obrázkoch (finition-mate.jpg /
   finition-brillante.jpg), preto tu už CSS efekt nie je. Triedy .matte/.glossy
   ostávajú pre prípadné budúce doladenie. */
.drevko-fbody{padding:13px 15px 16px}
.drevko-ftag{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:15px;color:#111}
.drevko-ftag::before{content:"";width:9px;height:9px;border-radius:50%;background:#111}
.drevko-ftag .drevko-u{box-shadow:inset 0 -6px 0 #f3e6d6}  /* jemné hnedé podčiarknutie nadpisu (tenšie ako v titulku) */
.drevko-fcard p{margin:7px 0 0;font-size:14px;line-height:1.5;color:#333;font-weight:600}
.drevko-modal-foot{padding:10px 22px 20px;color:#9b9b9b;font-size:11px;font-weight:500;line-height:1.4;text-align:center}
body.drevko-modal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* =====================================================================
   POROVNÁVACÍ SLIDER (mat vs lesk) — slider varianta modalu
   ===================================================================== */
/* obsah modalu je v jednom stĺpci (nie 2 karty vedľa seba) */
.drevko-modal-grid{display:block}

.drevko-cmp{
  position:relative;width:fit-content;max-width:100%;margin:0 auto;
  border-radius:12px;overflow:hidden;line-height:0;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize;
}
/* base určuje veľkosť boxu. STROP VÝŠKY: motívy na výšku sa nenatiahnu cez
   celý modal — ostávajú v prirodzenom pomere, zmenšené a vycentrované.
   Na šírku obrázok stále vyplní šírku (max-width:100%). */
.drevko-cmp-base{
  display:block;max-width:100%;width:auto;height:auto;pointer-events:none;
  max-height:60vh;                 /* fallback pre staršie prehliadače */
  max-height:min(560px,60dvh);
}
.drevko-cmp-top{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.drevko-cmp-top img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.drevko-cmp-line{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;
  transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.15);z-index:4;
}
.drevko-cmp-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;gap:2px;
}
.drevko-cmp-knob svg{width:11px;height:11px;color:#6b4a2a}
/* Popisky strán (V3, klipované s čiarou): „Brillante" žije v LESKLEJ vrstve
   (.drevko-cmp-gside vnútri .drevko-cmp-top → klipuje sa s leskom), „Mate" v
   MATNEJ vrstve (.drevko-cmp-mside, prekrytá leskom). Bez podfarbenia – biely
   text na jemnom TIENI (gradient dole) pre čitateľnosť. Pri plnom lesku ostane
   len Brillante, pri plnom mate len Mate. */
.drevko-cmp-gside,.drevko-cmp-mside{
  position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
}
.drevko-cmp-flabel{
  position:absolute;bottom:11px;width:50%;text-align:center;pointer-events:none;
  font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.drevko-cmp-flabel.l{left:0}
.drevko-cmp-flabel.r{right:0}
/* A4 – výzva „Glissez" PRIAMO na obrázku (nad rukoväťou); jemne sa kýve a po
   prvom ťahaní zmizne (JS pridá .is-gone). */
.drevko-cmp-cue{
  position:absolute;left:50%;bottom:54px;transform:translateX(-50%);z-index:5;pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;line-height:1;
  background:rgba(0,0,0,.58);color:#fff;font-size:12px;font-weight:800;letter-spacing:.2px;
  padding:6px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.3);
  animation:drevko-cue-nudge 2.4s ease-in-out infinite;
  transition:opacity .35s ease,transform .35s ease;
}
.drevko-cmp-cue svg{width:15px;height:15px}
.drevko-cmp-cue.is-gone{opacity:0;animation:none;transform:translateX(-50%) translateY(6px)}
@keyframes drevko-cue-nudge{0%,100%{transform:translateX(-50%)}30%{transform:translateX(-58%)}70%{transform:translateX(-42%)}}
@media (prefers-reduced-motion:reduce){ .drevko-cmp-cue{animation:none} }
.drevko-cmp-texts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
@media (min-width:600px){ .drevko-cmp-texts{grid-template-columns:1fr 1fr;gap:18px} }
.drevko-cmp-texts p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#333;font-weight:600}

/* =====================================================================
   DESKTOP (len ≥760px): texty OSTÁVAJÚ POD sliderom (tak sa to páčilo viac).
   Okno je širšie, nech sa 2-stĺpcový text pohodlne zmestí, a obrázok má o
   niečo nižší strop výšky, aby celý modal sadol BEZ vertikálneho scrollu.
   Mobil ostáva úplne nezmenený.
   ===================================================================== */
@media (min-width:760px){
  .drevko-modal{max-width:860px}
  /* strop výšky obrázka sa PRISPÔSOBÍ výške okna tak, aby sa do modalu zmestil
     CELÝ obsah (nadpis, texty, maskot, pätička) BEZ vertikálneho scrollu */
  .drevko-cmp-base{max-height:calc(90vh - 285px);max-height:min(520px,calc(90dvh - 285px))}
  /* maskot medzi dvoma blokmi textu (stredný stĺpec) */
  .drevko-cmp-texts{grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
  .drevko-cmp-texts .drevko-modal-mascot{display:block}
}