/* ============================================================
   PRODUCT DETAIL - jen pro produkt.php
   ============================================================ */

/* ===== BREADCRUMBS ===== */
.crumbs{font-size:15px;color:var(--text3);margin-bottom:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--text2);transition:all .3s ease}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--text3);opacity:.5}

/* ===== DETAIL LAYOUT ===== */
.det{display:grid;grid-template-columns:380px 1fr;gap:32px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:32px;margin-bottom:40px}
.det-img-wrap{background:var(--bg3);border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:sticky;top:88px;align-self:start}
.det-img-wrap svg{width:100%;height:100%;display:block}
/* Zástupný obrázek bez fotky - vyplní rám (viz .prod-noimg v shop.css) */
.det-img-wrap>.prod-noimg{width:100%;height:100%;object-fit:cover;display:block}

/* ===== FOTOGALERIE PRODUKTU =====
   Čtvercový poměr drží až vnitřní .det-gallery-main, ne wrap - pod hlavní
   fotkou přibývá mřížka náhledů, takže wrap čtvercový být nesmí. */
.det-img-wrap.has-photos{aspect-ratio:auto;display:block;background:none}
.det-gallery-main{display:block;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--bg3);cursor:zoom-in}
.det-gallery-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.det-gallery-main:hover img{transform:scale(1.03)}
.det-gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.det-gallery-thumb{display:block;aspect-ratio:1/1;border-radius:calc(var(--r) - 4px);overflow:hidden;border:1.5px solid var(--border);background:var(--bg2);cursor:pointer;transition:border-color .3s ease}
.det-gallery-thumb:hover{border-color:var(--accent)}
.det-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== LIGHTBOX =====
   Position/background dává sdílená .overlay (base.css), tady jen odlišnosti.
   POZOR: samostatná kopie téhle dvojice pravidel je i v shop.css (admin
   lightbox) - drž je v souladu. */
.lightbox-overlay{z-index:900;display:none;align-items:center;justify-content:center;flex-direction:column;padding:40px}
.lightbox-overlay.open{display:flex}
.lightbox-img{max-width:88vw;max-height:76vh;object-fit:contain;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lightbox-caption{color:#fff;margin-top:16px;font-size:14px;text-align:center}
.lightbox-close{position:absolute;top:20px;right:24px;background:0 0;border:0;color:#fff;font-size:32px;cursor:pointer;line-height:1;padding:4px}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;font-size:30px;width:46px;height:46px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s ease}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.24)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-overlay.single .lightbox-prev,.lightbox-overlay.single .lightbox-next{display:none}
@media(max-width:640px){
  .det-gallery-thumbs{grid-template-columns:repeat(3,1fr)}
  .lightbox-overlay{padding:20px}
  .lightbox-prev,.lightbox-next{width:36px;height:36px;font-size:22px}
  .lightbox-close{top:10px;right:14px}
}

.det-info h1{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-1px;line-height:1.2;margin-bottom:14px}
.det-badges{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
/* Krátký popis pod nadpisem - šedá, ale světlejší než var(--text2). */
.det-lead{font-size:15px;color:#adadba;line-height:1.6;margin-bottom:24px}

/* ===== INFO ŘÁDKY (ŠÍŘKA/VÝŠKA/VÁHA/MATERIÁL...) =====
   max-content 1fr dá levému sloupci šířku podle NEJDELŠÍHO popisku napříč
   všemi řádky - proto .info-lbl/.info-val nesmí být zabalené po řádcích do
   obalu, jsou to samostatné grid items. */
.info-grid{display:grid;grid-template-columns:max-content 1fr;margin-bottom:24px}
/* POZOR na dvě věci:
   1) Mezera mezi popiskem a hodnotou musí být PADDING na .info-lbl, ne
      column-gap na gridu - column-gap by udělal díru i v border-bottom a
      čára pod řádkem by nebyla souvislá.
   2) .info-grid nesmí mít align-items:center - popisek (11px) a hodnota
      (14px) jsou různě vysoké a jejich border-bottomy by se rozešly o 1-2px.
      Výchozí stretch je natáhne na stejnou výšku; text se centruje flexem
      uvnitř .info-lbl/.info-val, ne na gridu. */
.info-lbl{display:flex;align-items:center;font-size:11px;line-height:1;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);white-space:nowrap;padding:10px 20px 10px 0;border-bottom:1px solid var(--bg3)}
.info-val{display:flex;align-items:center;font-size:14px;line-height:1;font-weight:600;color:var(--text);padding:10px 0;border-bottom:1px solid var(--bg3)}
/* Odebrání čáry pod posledním řádkem musí cílit na POSLEDNÍ DVOJICI buněk.
   NEPOUŽÍVAT :last-of-type - vyhodnocuje se podle TAGU, a protože .info-lbl
   i .info-val jsou obyčejné <div>, netrefilo by to poslední popisek a čára
   by zůstala uťatá napůl. Takhle to funguje pro libovolný počet řádků. */
.info-grid>div:nth-last-child(-n+2){border-bottom:0}

/* ===== DETAIL SECTIONS ===== */
.det-section{margin-bottom:24px}
.det-section h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.det-section h3 .ic{color:var(--accent)}
.det-section p{font-size:15px;color:var(--text2);line-height:1.7}
.det-section p+p{margin-top:12px}
.det-section ul{padding-left:20px;font-size:15px;color:var(--text2);line-height:1.8}
.det-section ul li{margin-bottom:4px}
.det-instr-dl{margin-top:12px;width:auto}

/* Detailní popis produktu - světlý text menším písmem. Schválně vlastní
   pravidlo místo ".det-section p", ať ostatní sekce zůstanou tlumené. */
.det-desc{color:var(--text);font-size:13px;line-height:1.7}
.det-desc p{color:var(--text);font-size:13px}
.det-desc p+p{margin-top:10px}
.det-desc ul{color:var(--text);font-size:13px}

/* ===== VARIANTS BOX ===== */
.vbox{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);padding:8px 16px;margin-top:8px}
.vbox .vrow:first-child{border-top:0}

/* ===== RELATED SECTION ===== */
.related-wrap{margin-top:16px}
.related-cta{display:flex;justify-content:flex-end;margin-top:8px;margin-bottom:32px}

/* ===== RESPONSIVE ===== */
@media(max-width:840px){
  .det{grid-template-columns:1fr;padding:20px;gap:24px}
  .det-img-wrap{position:static;max-width:340px;margin:0 auto;width:100%}
}
@media(max-width:640px){
  .det{padding:16px}
  .det-info h1{font-size:22px}
}