/* =========================================================================
   SPOJAK.sk — product.css
   Iba PDP-špecifické sekcie (galéria, buy-box, taby, bundle, alternatívy,
   recenzie, FAQ, naposledy prezerané). Zdieľaný základ je v base.css.
   ========================================================================= */

/* Drobčeky sú zdieľané (.crumbs v base.css, komponent x-site.crumbs) — tu len mobilný padding. */

/* ===== HERO ===== */
.hero{display:grid;grid-template-columns:46% 54%;gap:36px;padding:30px 48px 30px}
/* gallery */
.gal-main{position:relative;aspect-ratio:1/1;background:var(--ph);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;overflow:hidden}
.gal-main>[data-ic]{font-size:150px;color:#1A1A1A}
.gal-main img{max-width:100%;max-height:100%;object-fit:contain}
.no-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);width:100%;height:100%}
.no-img svg{width:96px;height:96px;color:var(--muted)}
.no-img span{font-size:13px;font-weight:500}
.gal-main .no-img svg{width:120px;height:120px}
.thumb .no-img{gap:0}
.thumb .no-img svg{width:28px;height:28px}
.thumb .no-img span{display:none}
.gview{position:absolute;bottom:14px;right:14px;display:flex;gap:6px}
.gview button{background:var(--ink);color:#fff;font-size:11px;padding:4px 9px;border-radius:5px;display:inline-flex;align-items:center;gap:5px;border:none;font-family:inherit;cursor:pointer}.gview button [data-ic]{font-size:13px}
.gview button:disabled{background:rgba(255,255,255,.85);color:var(--muted);cursor:not-allowed;opacity:.75}
.gactions{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:7px}
.gactions .ga{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.92);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}.gactions .ga:hover{color:var(--red);border-color:var(--red)}.gactions .ga [data-ic]{font-size:17px}
.gactions .ga.js-fav.on{color:var(--red);border-color:var(--red)}
/* 4 v riadku, ďalšie sa zalomia do ďalšieho riadka — produkty majú aj 18 fotiek
   a s pevným jedným riadkom boli ostatné pre zákazníka nedostupné. */
.gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.thumb{aspect-ratio:1;background:var(--ph);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;transition:.15s;overflow:hidden}
.thumb [data-ic]{font-size:34px;color:#9a9a9a}
.thumb img{max-width:100%;max-height:100%;object-fit:contain}
.thumb.act{border-color:var(--red)}.thumb:hover{border-color:var(--red)}

/* info */
.brandrow{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.brandrow .wurth{background:var(--ink);color:#fff;font-size:10px;padding:3px 9px;border-radius:4px;font-weight:500;letter-spacing:.5px}
.brandrow .sku{font-size:11px;color:var(--muted)}
.info h1{font-size:26px;font-weight:500;line-height:1.22;letter-spacing:-0.5px;margin-bottom:10px}
.ratingrow{display:flex;align-items:center;gap:9px;font-size:13px;margin-bottom:14px}
.ratingrow .stars{display:inline-flex;gap:1px;color:var(--green)}.ratingrow .stars [data-ic]{font-size:16px}
.ratingrow .rval{font-weight:500}.ratingrow .rmeta{color:var(--muted)}.ratingrow a{color:var(--muted);text-decoration:none}.ratingrow a:hover{color:var(--red)}
.stockbox{background:#E8F4EA;color:var(--green);padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:9px;border-left:3px solid var(--green)}
.stockbox [data-ic]{font-size:17px}.stockbox b{font-weight:500}
.stockbox.out{background:#FBEAEB;color:var(--red);border-left-color:var(--red)}
.stockbox.order{background:#FFF6EA;color:#B45309;border-left-color:var(--amber)}
.features{margin:0 0 16px;padding-left:20px;font-size:13px;color:var(--ink);line-height:1.7}
.features li{margin-bottom:2px}.features li::marker{color:var(--red)}

/* price box */
.pricebox{background:var(--bg);border-radius:10px;padding:16px;margin-bottom:14px}
.price-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.price-now{font-size:30px;font-weight:500;letter-spacing:-1px;line-height:1}.price-now .pk{font-size:13px;color:var(--muted);font-weight:400}
.price-vat{font-size:11px;color:var(--muted);margin-top:3px}
/* Akciová cena — pôvodná prečiarknutá + úspora (zhodný vzor s .pc .pold na kartách). */
.price-was{margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.price-was s{font-size:13px;color:var(--muted)}
.price-save{font-size:11px;font-weight:500;color:var(--red);background:var(--pink);padding:2px 7px;border-radius:100px}
.price-b2b{text-align:right}
.price-b2b .lab{font-size:10px;color:var(--red);letter-spacing:.6px;font-weight:500}
.price-b2b .val{font-size:18px;font-weight:500;color:var(--red);line-height:1.1}.price-b2b .val .pk{font-size:10px}
.tiers-lab{font-size:10px;color:var(--muted);letter-spacing:.6px;font-weight:500;margin-bottom:6px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tier{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px;text-align:center;cursor:pointer;transition:.15s}
.tier:hover{border-color:var(--red)}
.tier .tq{font-size:11px;color:var(--muted);margin-bottom:2px}
.tier .tp{font-size:13px;font-weight:500}
.tier.on{border-color:var(--red);background:var(--pink)}.tier.on .tq{color:var(--red)}.tier.on .tp{color:var(--red)}
.tier .disc{font-size:10px;color:var(--green);font-weight:500}
/* Pásmo nad dostupným skladom — vizuálne stlmené, klik naň množstvo nemení. */
.tier.unreachable{opacity:.45;cursor:not-allowed}
.tier.unreachable:hover{border-color:var(--line)}

/* pack selector + upsell nudges */
.packsel{margin:0 0 12px}
.packsel .pl{font-size:10px;color:var(--muted);letter-spacing:.6px;font-weight:500;margin-bottom:6px}
.packsel .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pu{background:#fff;border:1px solid var(--line);border-radius:6px;padding:9px 8px;text-align:center;cursor:pointer;transition:.15s;font:inherit}
.pu:hover{border-color:var(--red)}
.pu.on{border-color:var(--red);background:var(--pink)}
.pu .pt{font-size:12px;font-weight:500;color:var(--ink)}
.pu .ps{font-size:10px;color:var(--muted);margin-top:2px}
.pu.on .ps{color:var(--red)}
.pu .save{color:var(--green);font-weight:500}
.pu.on .save{color:var(--red)}
/* round-up nudge */
.upnudge{display:flex;align-items:center;gap:11px;background:#FFF6EA;border:1px solid #F1DCB8;border-radius:8px;padding:11px 13px;margin-bottom:12px}
.upnudge.hide{display:none}
.upnudge .ui{width:32px;height:32px;border-radius:7px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--amber)}.upnudge .ui [data-ic]{font-size:18px}
.upnudge .ut{flex:1;font-size:12.5px;line-height:1.4;color:var(--ink)}.upnudge .ut b{font-weight:600}
.upnudge .ub{background:var(--amber-t);color:#fff;border:none;border-radius:6px;padding:8px 13px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:.15s}.upnudge .ub:hover{background:#bd6304}
/* free-shipping progress in buy box */
.fship{margin-bottom:12px}
.fship .ft{font-size:11.5px;color:var(--ink);margin-bottom:5px;display:flex;align-items:center;gap:6px}.fship .ft [data-ic]{font-size:15px;color:var(--green)}.fship .ft b{font-weight:600}
.fship .track{height:6px;background:#E2E2E2;border-radius:100px;overflow:hidden}.fship .fill{height:100%;background:var(--green);width:0;transition:width .35s;border-radius:100px}

/* buy row */
.buyrow{display:flex;gap:8px;margin-bottom:10px}
.stepper{display:flex;align-items:center;border:1px solid var(--ink);border-radius:8px;overflow:hidden;flex-shrink:0}
.stepper button{width:36px;height:42px;border:none;background:var(--ph);font-size:18px;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}.stepper button:hover{background:#e6e6e6}.stepper button [data-ic]{font-size:17px}
.stepper .qv{padding:0 16px;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:42px;min-width:64px;text-align:center}
.stepper input.qv{border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);background:#fff;outline:none;font-family:inherit;font-size:15px;font-weight:500;text-align:center;width:76px;height:42px;padding:0 4px;-moz-appearance:textfield}
.stepper input.qv:focus{box-shadow:inset 0 -2px 0 var(--red)}
.stepper input.qv::-webkit-outer-spin-button,.stepper input.qv::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cta-main{flex:1;font-size:15px}
.actbtns{display:flex;gap:7px}
.act-btn{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:500;transition:.15s;text-decoration:none}
.act-btn.flex{flex:1}.act-btn:hover{border-color:var(--red);color:var(--red)}.act-btn [data-ic]{font-size:16px}
.act-btn.js-fav.on{color:var(--red);border-color:var(--red)}.act-btn.js-fav.on [data-ic]{color:var(--red)}

/* ===== TRUST STRIP ===== */
.trust{background:var(--bg);padding:14px 48px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .ti{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink)}.trust .ti [data-ic]{font-size:20px;color:var(--red);flex-shrink:0}

/* ===== VARIANTY (iné rozmery tej istej rady, oc_product_variant) ===== */
.var-cnt{font-size:13px;color:var(--muted);font-weight:400}
.var-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.var{display:grid;grid-template-columns:48px minmax(0,1fr) 180px 110px 124px;gap:14px;align-items:center;padding:8px 14px;border-top:1px solid var(--div)}
.var:first-child{border-top:none}
.var.cur{background:var(--pink)}
.var-img{width:48px;height:48px;border-radius:6px;background:var(--ph);display:flex;align-items:center;justify-content:center;overflow:hidden}
.var-img img{max-width:100%;max-height:100%;object-fit:contain}
.var-img .no-img{gap:0}.var-img .no-img svg{width:24px;height:24px}.var-img .no-img span{display:none}
.var-name{font-size:13.5px;line-height:1.3;min-width:0}
.var-name a{color:var(--ink);text-decoration:none}.var-name a:hover{color:var(--red)}
.var-name b{font-weight:500}
.var-full{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.var-stock{font-size:12px;display:flex;align-items:center;gap:6px;min-width:0}
.var-stock [data-ic]{font-size:15px;flex-shrink:0}
.var-stock.in{color:var(--green)}.var-stock.order{color:var(--amber-t)}.var-stock.out{color:var(--muted)}
.var-price{text-align:right;font-size:14px;white-space:nowrap}
.var-price b{font-weight:500}.var-price b.sale{color:var(--red)}
.var-price s{display:block;font-size:11px;color:var(--muted)}
.var-price .pk{font-size:11px;color:var(--muted)}
.var-act{text-align:right}
.var-here{font-size:11.5px;color:var(--red);font-weight:500}

/* ===== TABS ===== */
.ptabs{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:6px;padding:0 48px;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.ptab{padding:15px 16px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.ptab.on{color:var(--ink);border-bottom-color:var(--red)}.ptab:hover{color:var(--ink)}
.ptab .cnt{font-size:11px;background:var(--ph);color:var(--muted);padding:1px 7px;border-radius:100px;font-weight:500}
.ptab.on .cnt{background:var(--pink);color:var(--red)}
.tabpanel{display:none}

/* section base (PDP) — pozn.: .sec tu má užší padding než homepage .sec */
.pdp .sec{padding:26px 48px;border-bottom:1px solid var(--line)}
.pdp .sec.bg{background:var(--bg)}
.sec-h{font-size:17px;font-weight:500;letter-spacing:-0.3px;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.sec-h [data-ic]{font-size:19px;color:var(--red)}
.sec-h.between{justify-content:space-between}
.sec-h .more{font-size:12.5px;color:var(--red);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:4px}

/* technical */
.tech-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.spec-eye{font-size:10px;color:var(--red);letter-spacing:.6px;font-weight:500;margin-bottom:8px}
.spec-row{display:flex;padding:8px 0;border-bottom:1px solid var(--div);font-size:12.5px}.spec-row:last-child{border-bottom:none}
.spec-k{width:46%;color:var(--muted)}.spec-v{flex:1;font-weight:500;font-variant-numeric:tabular-nums}
.tech-extra{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:22px;align-items:start}
.drawing{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:18px;position:relative}
.drawing .dh{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-family:var(--mono);margin-bottom:10px}
.drawing svg{width:100%;height:auto}
.drawing .dwg-dl{margin-top:10px;font-size:12.5px;color:var(--red);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:6px}.drawing .dwg-dl [data-ic]{font-size:15px}
.docbtns{display:flex;flex-direction:column;gap:8px}
.docbtns .act-btn{justify-content:flex-start}
.proza{max-width:760px;font-size:14px;line-height:1.7;color:var(--ink)}.proza p{margin-bottom:12px}.proza h3{font-size:16px;font-weight:500;margin:18px 0 8px}.proza ul{margin:0 0 12px 20px;color:var(--muted)}.proza li{margin-bottom:5px}

/* ===== bundle (often bought together) ===== */
.bundle{display:flex;align-items:stretch;gap:8px}
.mini-pc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;text-align:center;flex:1;display:flex;flex-direction:column;position:relative}
.mini-pc.this{border-color:var(--red)}
.mini-ico{background:var(--ph);height:84px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.mini-pc.this .mini-ico{border:1.5px solid var(--red)}
.mini-ico [data-ic]{font-size:38px;color:#1A1A1A}
.mini-name{font-size:12px;line-height:1.3;min-height:31px}
.mini-price{font-size:13px;font-weight:500;margin-top:6px;font-variant-numeric:tabular-nums}
.mini-stock{font-size:10px;margin-top:3px}.mini-stock.s{color:var(--green)}.mini-stock.o{color:var(--amber-t)}.mini-stock.t{color:var(--muted)}
.mini-pc .mck{position:absolute;top:8px;left:8px;width:19px;height:19px;border-radius:5px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s;z-index:2}
.mini-pc .mck [data-ic]{font-size:13px;color:#fff;opacity:0;transition:.12s}
.mini-pc.sel .mck{background:var(--red);border-color:var(--red)}
.mini-pc.sel .mck [data-ic]{opacity:1}
/* Aktuálny produkt nemá zaškrtávacie políčko — nedá sa odškrtnúť a NIE je v súčte doplnkov
   (pridáva ho hlavné CTA so zvoleným množstvom). Červená "fajka" tu tvrdila opak. */
.mini-pc.this .mck{display:none}
.mini-pc.js-bopt{cursor:pointer}
.mini-pc.off{opacity:.5}.mini-pc.off .mini-ico{filter:grayscale(1)}
/* Bez vybraného doplnku nemá "Pridať vybrané" čo pridať. */
.js-bundle.is-disabled{opacity:.5;pointer-events:none}
.bundle .plus{display:flex;align-items:center;color:var(--muted);flex-shrink:0}.bundle .plus [data-ic]{font-size:18px}
.bundle-total{background:var(--ink);color:#fff;padding:14px 18px;border-radius:10px;margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.bundle-total .bl{font-size:11px;color:rgba(255,255,255,.6)}
.bundle-total .bv{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}.bundle-total .bv .save{font-size:12px;color:var(--lgreen);font-weight:500}

/* product FAQ */
.pfaq .qa{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;overflow:hidden;transition:.12s;background:#fff}
.pfaq .qa.open{border-color:var(--red)}
.pfaq .q{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;font-size:14px;font-weight:500;user-select:none}
.pfaq .q .qx{margin-left:auto;color:var(--muted);transition:transform .25s;flex-shrink:0}.pfaq .qa.open .q .qx{transform:rotate(45deg);color:var(--red)}.pfaq .q .qx [data-ic]{font-size:19px}
.pfaq .a{max-height:0;overflow:hidden;transition:max-height .3s ease}.pfaq .qa.open .a{max-height:320px}
.pfaq .a-in{padding:0 16px 15px;font-size:13.5px;line-height:1.6;color:#3a3a3a}.pfaq .a-in b{font-weight:500;color:var(--ink)}.pfaq .a-in a{color:var(--red);text-decoration:none}

/* alternatives */
.alt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.alt{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;transition:.15s;cursor:pointer;text-decoration:none;color:inherit;display:block}
.alt:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.05)}
.alt .mini-ico{height:90px;margin-bottom:11px}
.alt .an{font-size:12.5px;font-weight:500;line-height:1.3;min-height:33px}
.alt .atag{font-size:10.5px;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:4px}.alt .atag [data-ic]{font-size:12px;color:var(--red)}
.alt .ap{font-size:15px;font-weight:500;margin-top:8px;font-variant-numeric:tabular-nums}

/* reviews */
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.rev{background:#fff;border:1px solid var(--line);border-top:2px solid var(--red);border-radius:8px;padding:16px}
.rev-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rev-top .stars{display:inline-flex;gap:1px;color:var(--green)}.rev-top .stars [data-ic]{font-size:14px}
.rev-top .rd{font-size:11px;color:var(--muted)}
.rev p{font-size:13px;line-height:1.55;margin-bottom:9px}
.rev .who{font-size:12px;color:var(--muted)}.rev .who b{color:var(--ink);font-weight:500}.rev .who .vf{color:var(--green)}

/* recently viewed (dark) */
.recent{background:#1A1A1A;color:#fff;padding:18px 48px}
.recent .rl{font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.6px;margin-bottom:10px;text-transform:uppercase}
.recent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
/* min-width:0 — bez neho automatické minimum grid/flex bunky kopíruje šírku nowrap textu v .rn
   a celá stránka preteká vodorovne (na 390px sa layout viewport roztiahol na 505px, čím
   vypadol zoom lightbox aj jeho krížik mimo obrazovku). */
.rc{background:#0F0F0F;border-radius:8px;padding:11px;display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.rc>div{min-width:0}
.rc .ri{width:38px;height:38px;background:#2A2A2A;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.rc .ri [data-ic]{color:var(--red);font-size:19px}
.rc .rn{font-size:12px;color:#fff;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .rp{font-size:12px;color:var(--red-on-dark);font-weight:500;font-variant-numeric:tabular-nums;margin-top:2px}

/* mobile sticky bottom CTA */
.mcta{display:none}

/* ===== MOBILE (PDP) ===== */
/* 769–899 px: dvojstĺpcový layout ešte platí, ale pravý stĺpec je taký úzky, že nákupný riadok
   (množstvo + „Do košíka") sa doň nezmestí — tlačidlo pretŕčalo mimo obrazovku o 40 px pri
   769 px a o 24 px pri 800 px, takže sa nedalo pohodlne kliknúť. Nižšie (≤768 px) to už rieši
   `flex-wrap`, tu chýbal. `min-width:0` je nutné, inak flex položka odmietne zúžiť pod obsah. */
@media(min-width:769px) and (max-width:899px){
  .gal,.info{min-width:0}
  .buyrow{flex-wrap:wrap}
  .cta-main{min-width:0;flex:1 1 180px}
  .stepper{flex:0 0 auto}
}

@media(max-width:768px){
  /* Celá cesta (až 6 úrovní + názov) zabrala na 390 px štyri riadky nad fotkou. Na mobile ukážeme
     len krok späť na najbližšiu kategóriu — názov produktu je hneď pod ním v H1. */
  .pdp .crumbs>*{display:none}
  .pdp .crumbs>a:last-of-type{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
  .pdp .crumbs>a:last-of-type::before{content:"‹ "}
  .hero{grid-template-columns:minmax(0,1fr);gap:22px;padding:22px 16px}
  .gal,.info{min-width:0}
  .gal-main>[data-ic]{font-size:120px}
  .info h1{font-size:22px}
  .price-now{font-size:26px}
  .buyrow{flex-wrap:wrap}.cta-main{min-width:0;flex:1 1 180px;font-size:14px}.stepper{flex:0 0 auto}
  /* Text CTA „Pridať do košíka — 11,36 €" (dopĺňa ho JS so sumou) je pri 390 px širší než
     tlačidlo: .btn má nowrap, takže „€" sa orezalo. Na mobile smie text zalomiť na 2 riadky
     (balance = rovnomerne) a tlačidlo má užší bočný padding — zmestí sa aj štvorciferná suma. */
  .cta-main,.mcta .btn{white-space:normal;text-wrap:balance;text-align:center;line-height:1.2;padding:9px 12px;gap:7px}
  .cta-main [data-ic],.mcta .btn [data-ic]{flex-shrink:0}
  /* Varianty: obrázok | názov + cena / dostupnosť + tlačidlo v druhom riadku. */
  .var{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"img name price" "img stock act";gap:6px 12px;padding:10px 12px}
  .var-img{grid-area:img;width:44px;height:44px;align-self:start}
  .var-name{grid-area:name}.var-stock{grid-area:stock}.var-price{grid-area:price;align-self:start}.var-act{grid-area:act}
  .trust{grid-template-columns:1fr 1fr;padding:14px 16px}
  .ptabs{overflow-x:auto;scrollbar-width:none;gap:2px;padding:0 16px;top:0}.ptabs::-webkit-scrollbar{display:none}
  .pdp .sec{padding:22px 16px}
  .tech-cols{grid-template-columns:1fr;gap:18px}
  .tech-extra{grid-template-columns:1fr;gap:16px}
  .bundle{flex-wrap:wrap}.mini-pc{flex:1 1 40%;min-width:0}.bundle .plus{display:none}
  .bundle-total{flex-direction:column;align-items:flex-start;gap:10px}
  .alt-grid{grid-template-columns:1fr 1fr}
  .rev-grid{grid-template-columns:1fr}
  .recent{padding:18px 16px}.recent-grid{grid-template-columns:1fr 1fr}
  .mcta{display:flex;position:sticky;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:12px 16px;box-shadow:0 -6px 20px rgba(0,0,0,.08);gap:12px;align-items:center}
  .mcta .mprice{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
  .mcta .btn{flex:1;min-width:0}
}

/* ---------- zoom lightbox (PDP galéria) ---------- */
.js-zoom{cursor:zoom-in}
.gactions button.js-zoom{border:none;font-family:inherit}
.gactions button.js-zoom:disabled{cursor:not-allowed;opacity:.4}
/* Rozmery viažeme na viewport (dvw/dvh), nie na inset:0 — ak stránka niekedy pretečie vodorovne,
   layout viewport sa roztiahne a overlay by z obrazovky vysunul obrázok aj zatvárací krížik. */
.zoom-ov{position:fixed;top:0;left:0;width:100vw;height:100vh;width:100dvw;height:100dvh;background:rgba(0,0,0,.88);z-index:200;display:flex;align-items:center;justify-content:center;padding:32px;cursor:zoom-out;overflow:hidden}
.zoom-ov[hidden]{display:none}
@media(max-width:768px){.zoom-ov{padding:16px}.zoom-close{top:10px;right:10px}}
.zoom-ov img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;box-shadow:0 20px 60px rgba(0,0,0,.5);border-radius:6px;touch-action:none;user-select:none;-webkit-user-drag:none;will-change:transform}
.zoom-ov.is-zoomed img{transition:none}
.zoom-ov:not(.is-zoomed) img{transition:transform .15s ease-out}
/* z-index: priblížený obrázok má transform (= vlastná vrstva) a je v DOM za krížikom, takže pri
   zoome 2× ho prekryl — prvý klik na krížik trafil obrázok a len ho oddialil. Ovládacie prvky
   preto držíme nad obrázkom. */
.zoom-hint{position:absolute;z-index:2;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:12px;pointer-events:none}
.zoom-close{position:absolute;z-index:3;top:18px;right:18px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px}
.zoom-close:hover{background:rgba(255,255,255,.22)}

/* ---------- TLAČ (tlačidlo .js-print v buyboxe) ----------
   Bez týchto pravidiel mala tlač 5 strán: hlavička, menu, tlačidlá, stepper, pätička… a záložka
   Popis sa nevytlačila vôbec (neaktívny tab má display:none). Tlačíme to, čo zákazník potrebuje
   na papieri: logo, drobčeky, foto, názov, kódy, dostupnosť, cenu, varianty a obsah VŠETKÝCH tabov. */
@media print{
  @page{margin:12mm}
  html,html:root,body{background:#fff!important}
  .site-shell{box-shadow:none!important;max-width:none!important;min-height:0!important}
  .utility-bar,.main-nav,.m-nav,.m-nav-ov,.footer,.ckbar,.toast,.phpdebugbar,.mcta,
  .header>:not(.brand),
  .pdp .gactions,.pdp .gview,.pdp .gal-thumbs,.pdp .zoom-ov,
  .pdp .packsel,.pdp .upnudge,.pdp .fship,.pdp .buyrow,.pdp .actbtns,
  .pdp .trust,.pdp .ptabs,.pdp .var-act,.pdp .pdp-bundle,.pdp .pdp-alt,.pdp .recent{display:none!important}
  .header{padding:0 0 8px!important;border:none!important;box-shadow:none!important}
  .crumbs{padding:0 0 8px!important;background:none!important;border:none!important}
  .pdp .crumbs>*{display:inline!important}.pdp .crumbs>a:last-of-type::before{content:none}
  a{color:inherit!important;text-decoration:none!important}
  .hero{gap:20px;padding:6px 0 10px}
  .gal,.info{min-width:0}
  .gal-main{aspect-ratio:auto;height:60mm;background:none}
  .info h1{font-size:20px}
  .pricebox{background:none;border:1px solid var(--line)}
  .pdp .sec{padding:10px 0;border-bottom:none}
  .tabpanel{display:block!important}
  .proza{max-width:none;font-size:12px}
  .var,.spec-row,.rev{break-inside:avoid}
  /* A4 má ~720 px, takže platia aj mobilné pravidlá (≤768 px) — riadok variantu vrátime na
     jednoriadkový bez tlačidla. */
  .var{grid-template-columns:36px minmax(0,1fr) 150px 100px;grid-template-areas:none;padding:5px 8px}
  .var>*{grid-area:auto!important;align-self:center!important}
  .var-img{width:36px;height:36px}
  .hero{grid-template-columns:minmax(0,38fr) minmax(0,62fr)!important}
}

/* Upozornenie po naskladnení (buybox) */
.restock{margin:0 0 14px;border:1px solid var(--line);border-radius:8px;font-size:13.5px}
.restock [hidden]{display:none !important}
.restock summary{display:flex;align-items:center;gap:8px;padding:11px 14px;font-weight:600;cursor:pointer}
.restock summary [data-ic]{font-size:17px}
.restock form,.restock-done{padding:0 14px 13px}
.restock-note{color:var(--muted);line-height:1.45;margin-bottom:9px}
.restock-row{display:flex;gap:8px}
.restock-row input{flex:1;min-width:0;border:1px solid #CFCFCF;border-radius:var(--rad);padding:9px 11px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff}
.restock-row input[aria-invalid="true"]{border-color:var(--red)}
.restock-row .btn{padding:9px 16px;font-size:14px;flex:none}
.restock-row .btn:disabled{opacity:.6;cursor:wait}
.restock-err{margin-top:9px;font-size:13px;color:var(--red);background:var(--pink);border-radius:var(--rad);padding:8px 10px}
.restock-done{color:var(--green);font-weight:500;line-height:1.45}
@media print{.restock{display:none}}