/* ==========================================================================
   Detail tovaru - pravidlá z náhľadu dukla-eshop/nahlad/produkt.html
   ========================================================================== */
.drobky{font-size:12px;color:var(--dk-tlm);padding:14px 0}
.drobky a:hover{color:var(--dk-zlta)}
.volby{display:flex;flex-wrap:wrap;gap:6px}
.volba{
  border:1px solid var(--dk-okraj);background:transparent;color:rgba(255,244,248,.86);
  padding:6px 12px;font-size:13px;cursor:pointer;font-family:var(--telo);
}
.volba:hover{border-color:var(--dk-zlta);color:var(--dk-zlta)}
.volba.vybrana{background:var(--dk-zlta);border-color:var(--dk-zlta);color:var(--dk-bordo);font-weight:700}
.volba.nedostupna{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.volba.nedostupna:hover{border-color:var(--dk-okraj);color:rgba(255,244,248,.86)}
.strankovanie a.aktivna,.strankovanie a:hover{background:var(--dk-zlta);border-color:var(--dk-zlta);color:var(--dk-bordo)}
.nahlady{display:grid;gap:8px}
.nahlady img{
  border:1px solid var(--dk-okraj);background:#fff;padding:5px;cursor:pointer;
  height:78px;object-fit:contain;width:100%;
}
.nahlady img.vybraty{border-color:var(--dk-zlta)}
.hlavna-foto{
  border:1px solid var(--dk-okraj);background:#fff;
  display:flex;align-items:center;justify-content:center;
  height:430px;overflow:hidden;
}
.hlavna-foto img{max-height:90%;max-width:90%;width:auto}
.skupina{margin-bottom:20px}
.skupina .popiska{
  font-family:var(--nadpis);text-transform:uppercase;font-size:14px;font-weight:700;
  letter-spacing:.06em;margin-bottom:8px;display:flex;gap:7px;align-items:baseline;color:var(--dk-biela);
}
.skupina .popiska span{font-family:var(--telo);text-transform:none;font-weight:400;
  color:var(--dk-tlm);font-size:13px;letter-spacing:0}
.farby-vyber{display:flex;gap:8px}
.farba-tlacidlo{width:34px;height:34px;border:2px solid var(--dk-okraj);cursor:pointer;padding:0}
.farba-tlacidlo.vybrana{border-color:var(--dk-zlta)}
.sklad{display:inline-flex;align-items:center;gap:7px;font-size:14px;margin-bottom:18px;color:rgba(255,244,248,.86)}
.sklad::before{content:"";width:8px;height:8px;border-radius:50%;background:#3FBF6E}
.sklad.malo::before{background:var(--dk-zlta)}
.sklad.ziadny::before{background:#D0523F}
.kupa{display:flex;gap:10px;align-items:stretch;margin-bottom:20px}
.pocet-kusov{display:flex;border:1px solid var(--dk-okraj)}
.pocet-kusov button{width:38px;border:0;background:transparent;color:var(--dk-biela);
  font-size:19px;cursor:pointer;font-family:var(--telo)}
.pocet-kusov button:hover{color:var(--dk-zlta)}
.pocet-kusov input{width:46px;border:0;background:transparent;color:var(--dk-biela);
  text-align:center;font-family:var(--nadpis);font-weight:700;font-size:18px}
.kupa .tlacidlo{flex:1;text-align:center}
.zalozky{border-top:1px solid var(--dk-okraj);margin-top:30px}
.zalozky-hlava{display:flex;gap:24px;border-bottom:1px solid var(--dk-okraj);flex-wrap:wrap}
.zalozky-hlava button{
  background:none;border:0;padding:14px 0;font-family:var(--nadpis);text-transform:uppercase;
  font-weight:700;font-size:17px;letter-spacing:.05em;cursor:pointer;
  border-bottom:2px solid transparent;color:var(--dk-tlm);
}
.zalozky-hlava button.aktivna{color:var(--dk-zlta);border-color:var(--dk-zlta)}
.zalozka{display:none;padding:20px 0;max-width:80ch;color:rgba(255,244,248,.86);font-size:15px}
.zalozka.aktivna,.zalozka.otvorena{display:block}
.zalozka p{margin:0 0 10px}
.tabulka{width:100%;border-collapse:collapse;font-size:14px;max-width:480px}
.tabulka th,.tabulka td{border:1px solid var(--dk-okraj);padding:8px 11px;text-align:left}
.tabulka th{background:var(--dk-karta);font-family:var(--nadpis);text-transform:uppercase;
  font-size:14px;letter-spacing:.04em;color:var(--dk-biela)}
.moznost.vybrana{border-color:var(--dk-zlta);background:rgba(252,213,0,.06)}
@media(max-width:1000px){
  .vypis,.produkt,.kosik-mriezka,.pokladna{grid-template-columns:1fr}
  .filtre{position:static}
  .suhrn{position:static}
  .galeria{grid-template-columns:1fr}
  .nahlady{grid-auto-flow:column;grid-template-columns:repeat(5,1fr)}
  .hlavna-foto{height:330px}
}
@media(max-width:560px){
  .polia{grid-template-columns:1fr}
  .pole.cele{grid-column:span 1}
  .hlava-kat h1{font-size:24px}
  .info h1{font-size:24px}
  .hlavna-foto{height:260px}
  .riadok-kosika{grid-template-columns:70px 1fr}
  .riadok-kosika .suma{grid-column:2}
}
.drobky{color:var(--text-tlm)}
.drobky a:hover{color:var(--dk-bordo)}
.volba{border-color:var(--linka);color:var(--text)}
.volba:hover{border-color:var(--dk-bordo);color:var(--dk-bordo)}
.volba.nedostupna:hover{border-color:var(--linka);color:var(--text)}
.nahlady img{border-color:var(--linka)}
.nahlady img.vybraty{border-color:var(--dk-bordo)}
.hlavna-foto{border-color:var(--linka)}
.skupina .popiska{color:var(--text)}
.skupina .popiska span{color:var(--text-tlm)}
.farba-tlacidlo{border-color:var(--linka)}
.farba-tlacidlo.vybrana{border-color:var(--dk-bordo)}
.sklad{color:var(--text)}
.pocet-kusov{border-color:var(--text)}
.pocet-kusov button{color:var(--text)}
.pocet-kusov button:hover{color:var(--dk-bordo)}
.pocet-kusov input{color:var(--text)}
.zalozky,.zalozky-hlava{border-color:var(--linka)}
.zalozky-hlava button{color:var(--text-tlm)}
.zalozky-hlava button.aktivna{color:var(--text);border-color:var(--dk-zlta)}
.zalozka{color:var(--text)}

/* Záložky pod detailom - podľa vzoru: väčšie, vzdušnejšie, aktívna tmavá
   s bordovou linkou. Hore nie je čiara, aby sa nezdvojila s tou pod hlavou. */
.zalozky{border-top:0;margin-top:44px}
.zalozky-hlava{gap:36px}
.zalozky-hlava button{font-size:20px;padding:16px 0;border-bottom-width:3px}
.zalozky-hlava button:hover{color:var(--text)}
.zalozky-hlava button.aktivna{color:var(--text);border-color:var(--dk-bordo)}
.zalozka{padding:26px 0;max-width:none;line-height:1.7}
.zalozka p{margin:0 0 12px;max-width:95ch}

/* Tlačidlo porovnania sa nad výpisom nezobrazuje. */
/* Bootstrapová trieda d-block má !important, bez neho sa lišta ukáže. */
#compare-total{display:none!important}

/* Zoznamové zobrazenie - karta sa otočí na šírku: fotka vľavo, údaje vpravo.
   Bez tohto bola v zozname jedna karta na celú šírku s obrovskou fotkou. */
/* Vnútro karty je jeden formulár, mriežka teda musí sedieť na ňom. */
.product-list .produkt-karta{text-align:left}
.product-list .produkt-karta > form{
  display:grid;grid-template-columns:220px minmax(0,1fr);
  grid-auto-rows:min-content;align-content:center;column-gap:6px;
}
/* Fotka drží celý ľavý stĺpec, ostatné prvky idú pod seba vpravo. */
.product-list .produkt-obal{grid-column:1;grid-row:1 / span 6;aspect-ratio:1/1;align-self:center}
.product-list .produkt-karta .kat-maly,
.product-list .produkt-karta h3,
.product-list .produkt-karta .karta-spodok,
.product-list .produkt-karta .akcie-riadok{grid-column:2}
.product-list .produkt-karta h3{
  justify-content:flex-start;min-height:0;padding:0 14px;margin:2px 0 6px;
}
.product-list .produkt-karta .kat-maly{margin-top:16px;padding:0 14px}
.product-list .karta-spodok{justify-content:flex-start;gap:18px}
.product-list .akcie-riadok{justify-content:flex-start;max-width:360px}

/* Rad „Mohlo by sa vám páčiť" - päť kariet v rade. */
.suvisiace{padding-top:10px}
.produkty.pat-v-rade{grid-template-columns:repeat(5,1fr)}
@media(max-width:1200px){.produkty.pat-v-rade{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.produkty.pat-v-rade{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.produkty.pat-v-rade{grid-template-columns:1fr}}
.tabulka th,.tabulka td{border-color:var(--linka)}
.tabulka th{background:var(--plocha-2);color:var(--text)}
.moznost.vybrana{border-color:var(--dk-bordo);background:rgba(115,0,55,.04)}
.karta .obal,
.hlavna-foto,
.nahlady img,
.riadok-kosika .foto{border-radius:0}
.hero-body span.aktivna{background:var(--dk-zlta);width:26px}
/* Hlavné tlačidlo v detaile - bordové so žltým písmom. */
.do-kosika{
  display:inline-block;width:100%;max-width:220px;height:45px;
  background:var(--dk-bordo);color:var(--dk-zlta);
  font-family:var(--telo);text-transform:uppercase;font-weight:500;
  font-size:15px;letter-spacing:normal;border:0;border-radius:0;cursor:pointer;
  transition:background .2s ease;
}
.do-kosika:hover{background:var(--dk-bordo-dark)}
.drobky-pas{background:var(--plocha-2);padding:20px 0;font-size:14px;color:var(--text-tlm)}
.drobky-pas a:hover{color:var(--dk-bordo)}
.drobky-pas span{margin:0 6px}
.produkty.tri-v-rade{grid-template-columns:repeat(3,1fr)}
/* Fotka a údaje vedľa seba. Stĺpce sú pružné, aby sa detail zmestil aj
   vtedy, keď je vľavo bočný panel - predtým mali pevných 479 px a pri paneli
   by pretiekli von. */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start;
  margin:0 0 44px;justify-content:stretch}
.detail-obsah{min-width:0}
.detail > *{min-width:0}
.detail-galeria .hlavna-foto{
  background:var(--plocha);border:0;border-radius:0;
  aspect-ratio:1/1;height:auto;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* Fotka vypĺňa rámik takmer celý - sivý okraj okolo nej je len naznačený. */
.detail-galeria .hlavna-foto img{max-height:99%;max-width:99%;width:auto}
.detail-galeria .nahlady{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.detail-galeria .nahlady img{
  aspect-ratio:1/1;height:auto;width:100%;object-fit:contain;padding:8px;
  background:var(--plocha);border:1px solid var(--linka);border-radius:0;cursor:pointer;
}
.detail-galeria .nahlady img.vybraty{border-color:var(--dk-bordo)}
.detail-info h1{
  font-family:var(--telo);font-size:25px;font-weight:500;
  text-transform:none;color:var(--text);line-height:1.3;margin-bottom:12px;
}
.detail-cena{font-family:var(--telo);font-size:22px;font-weight:500;color:var(--dk-bordo);margin:0 0 8px}
.detail-kod{font-size:13px;color:var(--text-tlm);margin:0 0 16px}
.detail-kod .sklad{color:#2E9E5B}

/* Dostupnosť a kód pod sebou - prehľadnejšie než jeden riadok s bodkou. */
.detail-udaje{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:0;font-size:14px;line-height:1.35;color:var(--text)}
/* Dva stĺpce, aby hodnoty („Skladom", kód tovaru) začínali pod sebou.
   Riadok je mriežka aj preto, že značka skladu je inline-flex s bodkou a
   v obyčajnom riadku zdvíhala riadkovanie na dvojnásobok. */
.detail-udaje li{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;min-height:0}
.detail-udaje span:first-child{color:var(--text-tlm);margin-right:0}
/* Spodný odstup zo základnej značky skladu tu nemá čo robiť - v riadku
   mriežky zdvíhal „Skladom" nad popisku. */
.detail-udaje .sklad{color:#2E9E5B;line-height:1.35;margin-bottom:0}

/* Prepínanie farieb medzi samostatnými tovarmi - vyzerá ako výber voľby,
   ale sú to odkazy na súrodenecký tovar. */
.detail-info .rodina-farieb{margin-bottom:18px}
.detail-info .rodina-farieb .farba-tlacidlo{display:block;text-decoration:none}
.detail-info .rodina-farieb .farba-tlacidlo:hover{border-color:var(--dk-bordo)}

/* Nadpis nad voľbami, oddelený čiarou. */
.detail-volby-nadpis{
  font-family:var(--nadpis);font-size:19px;font-weight:600;color:var(--text);
  margin:0 0 18px;padding-top:20px;border-top:1px solid var(--linka);
}

/* Druhé, celoširoké tlačidlo pod „Do košíka" - vedie rovno do pokladne.
   Na vzore je odlíšené farbou, u nás je klubové bordové. */
.kupit-ihned{
  display:block;width:100%;margin-top:10px;height:52px;border:0;cursor:pointer;
  background:linear-gradient(155deg,var(--dk-bordo),var(--dk-bordo-dark));
  color:#fff;font-family:var(--nadpis);font-size:20px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;border-radius:0;
  transition:filter .2s ease;
}
.kupit-ihned:hover{filter:brightness(1.12)}

/* Obľúbené a porovnanie ako nenápadné odkazy pod tlačidlom. */
.detail-odkazy{display:flex;gap:20px;margin:16px 0 0;flex-wrap:wrap}
.odkaz-akcia{
  background:0;border:0;padding:0;cursor:pointer;
  font-size:14px;color:var(--text-tlm);transition:color .2s ease;
}
.odkaz-akcia:hover{color:var(--dk-bordo)}

.detail-kategorie,.detail-zdielanie{font-size:14px;color:var(--text-tlm);margin:16px 0 0}
.detail-kategorie span,.detail-zdielanie span{margin-right:6px}
.detail-kategorie a{color:var(--dk-bordo)}
.detail-kategorie a:hover{text-decoration:underline}
.detail-zdielanie a{
  display:inline-block;margin-right:8px;padding:4px 12px;
  background:var(--plocha-2);border:1px solid var(--linka);border-radius:0;
  color:var(--text);font-size:13px;
}
.detail-zdielanie a:hover{background:var(--dk-bordo);border-color:var(--dk-bordo);color:#fff}
.detail-popis{font-size:14px;line-height:25px;color:var(--text-tlm);margin:0 0 22px}
/* Voľby v dvoch stĺpcoch: popiska vľavo, výber vpravo. Popisky sú tak pod
   sebou zarovnané a výbery začínajú na rovnakej zvislici. */
.detail-info .skupina{
  /* Stĺpec popisiek je široký toľko, aby sa názov zvolenej farby zmestil
     vedľa slova FARBA a nepadal pod neho. */
  display:grid;grid-template-columns:170px minmax(0,1fr);
  align-items:start;gap:8px 16px;margin-bottom:16px;
}
.detail-info .popiska{
  font-family:var(--telo);text-transform:uppercase;font-size:13px;font-weight:500;
  letter-spacing:.04em;color:var(--text);margin:0;padding-top:8px;
  display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;
}
.detail-info .popiska span{text-transform:none;font-weight:400;color:var(--text-tlm);font-size:13px}
.detail-info .skupina .chyba-volby{grid-column:2}

@media(max-width:560px){
  .detail-info .skupina{grid-template-columns:1fr;gap:6px}
  .detail-info .popiska{padding-top:0}
  .detail-info .skupina .chyba-volby{grid-column:1}
}
.do-kosika.siroke{max-width:none;flex:1}
.detail-vyhody{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--linka);display:grid;gap:8px;font-size:14px;color:var(--text-tlm)}
.detail-vyhody li::before{content:"– ";color:var(--dk-zlta)}
.suvisiace{margin-top:50px}
.suvisiace .nadpis-sekcie{min-height:auto;margin-bottom:26px}
/* Nadpis radu je o štvrtinu menší, písmená sú veľké ako v ostatných sekciách. */
.suvisiace .nadpis-sekcie h2{font-size:34px;line-height:40px;text-transform:uppercase}
@media(max-width:1400px){
  .detail{grid-template-columns:minmax(0,1fr);margin-left:0}
  .detail-galeria .hlavna-foto{height:420px}
}
@media(max-width:1000px){
  .obchod-mriezka{grid-template-columns:1fr}
  .panel{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
  .produkty.tri-v-rade{grid-template-columns:repeat(2,1fr)}
  .banner-text{aspect-ratio:auto;padding:34px 28px}
}
@media(max-width:560px){
  .panel{grid-template-columns:1fr}
  .produkty.tri-v-rade{grid-template-columns:1fr}
  .detail-galeria .hlavna-foto{height:300px}
  .detail-galeria .nahlady{grid-template-columns:repeat(4,1fr)}
  .banner-popis{left:14px;bottom:14px;padding:10px 14px}
}
.tlacidlo.klub.siroke{display:block;width:500px;max-width:100%;margin:0 auto;text-align:center}

/* --------------------------------------------------------------------------
   Náhľad mal voľby ako <button>, v OpenCarte to musí byť skutočný formulár.
   Preto sú to <label> so skrytým prepínačom - vzhľad zostáva rovnaký. */
.volba,.farba-tlacidlo{position:relative;display:inline-flex;align-items:center;justify-content:center}
.volba input,.farba-tlacidlo input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.farba-tlacidlo .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.volba:has(input:checked){background:var(--dk-zlta);border-color:var(--dk-zlta);color:var(--dk-bordo);font-weight:700}
.farba-tlacidlo:has(input:checked){border-color:var(--dk-bordo);box-shadow:0 0 0 2px var(--dk-bordo)}

/* chyba pri voľbe - OpenCart ju vracia ako text pod skupinu */
.chyba-volby{display:none;color:#C41230;font-size:14px;margin-top:6px}
.chyba-volby.vidno{display:block}

.detail-poznamka{font-size:14px;color:var(--text-tlm);margin:10px 0 0}
.cena-stara{text-decoration:line-through;color:var(--text-tlm);font-size:.7em;margin-left:8px}
.detail-pas{padding-top:26px}

/* drobky nad detailom - v náhľade sú vodorovné, nie odrážkový zoznam */
.detail-pas .drobky{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 22px;padding:0;font-size:14px;color:var(--text-tlm);
}
.detail-pas .drobky li + li::before{content:"›";margin-right:8px;color:var(--text-tlm)}
.detail-pas .drobky a{color:var(--text-tlm);text-decoration:none}
.detail-pas .drobky a:hover{color:var(--dk-bordo)}

/* tlačidlo Do košíka je v klube hranaté, nie oblé */
.do-kosika.siroke{
  border-radius:0;flex:1;height:52px;padding:0 28px;border:0;cursor:pointer;
  background:var(--dk-zlta);color:var(--dk-bordo);
  font-family:var(--telo);font-size:17px;font-weight:700;text-transform:uppercase;
}
.do-kosika.siroke:hover{background:var(--dk-zlta-tmava)}

/* fotka tovaru stojí na svetlej ploche ako v náhľade */
.detail-galeria .hlavna-foto{background:var(--plocha-2);border:1px solid var(--linka)}

/* zväčšenie fotky tovaru */
.detail-galeria .hlavna-foto{position:relative;cursor:zoom-in}
.foto-zoom{
  position:fixed;inset:0;z-index:1300;display:none;
  align-items:center;justify-content:center;padding:36px;
  background:rgba(6,2,5,.88);cursor:zoom-out;
}
.foto-zoom.vidno{display:flex}
.foto-zoom img{max-width:100%;max-height:100%;width:auto;height:auto;background:#fff;border-radius:0}
.foto-zoom__zavri{
  position:absolute;top:18px;right:22px;background:0;border:0;cursor:pointer;
  color:#fff;font-size:34px;line-height:1;
}

/* Stránkovanie - bootstrapová modrá nemá v klubových farbách čo hľadať. */
.pagination{gap:4px}
.pagination .page-link{
  border:1px solid var(--linka);color:var(--text);background:#fff;
  font-family:var(--telo);font-size:14px;padding:7px 13px;box-shadow:none;
}
.pagination .page-link:hover{background:var(--plocha-2);border-color:var(--dk-bordo);color:var(--dk-bordo)}
.pagination .page-link:focus{box-shadow:none;border-color:var(--dk-bordo)}
.pagination .page-item.active .page-link{
  background:var(--dk-bordo);border-color:var(--dk-bordo);color:var(--dk-zlta);font-weight:700;
}
.pagination .page-item.disabled .page-link{color:var(--text-tlm);background:var(--plocha-2)}

/* Popis je posledná bunka mriežky detailu - vľavo zarovnaný s galériou,
   vpravo ide až po okraj obsahu. */
.detail > .zalozky{grid-column:1 / -1;margin-top:6px}

/* Dodacia doba - v detaile, v košíku aj v rekapitulácii pred platbou. */
.detail-udaje .dodanie{color:var(--dk-bordo);font-weight:700}
.kosik-polozka__dodanie{margin:2px 0 0;font-size:12px;color:var(--dk-bordo)}
.meta--dodanie{color:var(--dk-bordo);font-weight:600}

/* Odkaz „viac" pod skráteným popisom - skočí na celý popis pod galériou. */
.detail-popis .viac-popis{
  color:var(--dk-bordo);font-weight:700;text-decoration:underline;white-space:nowrap;
}
.detail-popis .viac-popis:hover{color:var(--dk-bordo-dark)}
.zalozky{scroll-margin-top:100px}

/* Personalizácia dresu (meno / číslo). noGrey */
.tabulka-velkosti{margin-left:8px;font-size:13px;color:var(--dk-bordo);text-decoration:underline;text-transform:none;letter-spacing:0;font-family:var(--telo)}
.perso{margin:18px 0 4px;border:1px solid var(--linka);background:#F7F3F5}
.perso__hlava{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--linka)}
.perso__hlava p{margin:0;font-family:var(--nadpis);font-size:20px;letter-spacing:.04em;text-transform:uppercase}
.perso__hlava span{font-size:13px;color:var(--text-tlm)}
.perso__volba{background:#fff;border:1px solid var(--linka);margin:10px 12px;padding:10px 12px}
.perso__prepinac{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;font-weight:600}
.perso__prepinac input{width:18px;height:18px;accent-color:var(--dk-bordo);margin:0}
.perso__cena{margin-left:auto;font-family:var(--nadpis);font-size:18px;color:var(--dk-bordo);font-weight:600}
.perso__pole{display:none;margin-top:10px}
.perso__volba.zapnuta .perso__pole{display:block}
.perso__text{width:100%;padding:10px 12px;border:1px solid var(--linka);font:600 16px var(--telo);text-transform:uppercase;letter-spacing:.06em}
.perso__text:focus{outline:2px solid var(--dk-bordo);outline-offset:-1px}
.perso__pole small{display:block;margin-top:4px;font-size:12px;color:var(--text-tlm)}
.perso__rozpis{margin:8px 0 0;font-size:13px;color:var(--text-tlm)}