/* ================================================
   NUTIVA LISTING DETAIL — štruktúra v5.1
   v1.0 — 5. 9. 2026 (prvé vydanie: dlaždice, FAQ akordeón, súvisí, značky, dáta)

   Konvencia je rovnaká ako pri nutiva-custom.css (jadro/eshop.md): číslo tu hore sa DRŽÍ
   ROVNÉ `?v=` v Záhlaví. Poradie nasadenia: najprv nahrať súbor, až potom prepnúť `?v=`.
   Volať AŽ ZA nutiva-custom.css — pri rovnakej sile rozhoduje v CSS poradie.
   Master: Nutiva_kod/katalog/css/listing-detail-v51.css
   ================================================ */

/* listing-detail-v51.css — vzhľad blokov ŠTRUKTÚRY v5.1 v detaile produktu.
   Zdroj: schválený mockup Ecom_Data/nutiva-listing/nahlady/0069_navrh_v51b.html (Šimon 4.9.2026).
   Do popisu produktu sa NIKDY nevkladá <style> ani obrázok ikony — popis nesie len triedy,
   vzhľad drží tento súbor v šablóne Shoptetu. Chýbajúca trieda = prvok bez ozdoby, nič sa nerozbije.
   Ikony dlaždíc (ld5-ico-*) generuje skript z priečinka katalog/ikony/ ako data-URI.

   NÁZVY TRIED: všetko má predponu ld5- a koreň je .listing-detail-v51. Je to zámer, nie
   ozdoba — v téme Shoptetu musia byť oba súbory naraz (1900 kariet je vo v4), takže sa
   verzie nesmú deliť o žiadny selektor. Párový súbor: listing-detail-v4.css. */

:root {
  --ld5-green: #5a8a00;
  --ld5-lime: #a1bf37;
  --ld5-line: #e5e7eb;
  --ld5-bg: #f6f7f4;
  --ld5-muted: #6b7280;
}

/* --- hero ------------------------------------------------------------------ */
.ld5-hero p { font-size: 15.5px; line-height: 1.6; margin: 0 0 10px; }
.ld5-hero-img { margin: 14px 0 4px; }
.ld5-hero-img img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* --- dlaždice --------------------------------------------------------------- */
.ld5-dlazdice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 22px; }
.ld5-dl { background: var(--ld5-bg); border-radius: 12px; padding: 16px 14px 14px; text-align: center; }
.ld5-dl b { display: block; font-size: 14.5px; color: #1f2937; margin-bottom: 3px; }
.ld5-dl span { display: block; font-size: 12.5px; color: #4b5563; line-height: 1.4; }
.ld5-dl[class*="ld5-ico-"]::before {
  content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 8px;
  background: no-repeat center / contain;
}

/* --- časté otázky ----------------------------------------------------------- */
.ld5-faq { margin: 18px 0; }
.ld5-faq h2 { font-size: 17px; margin: 0 0 6px; }
.ld5-faq details { border-top: 1px solid var(--ld5-line); padding: 8px 0; }
.ld5-faq details:last-child { border-bottom: 1px solid var(--ld5-line); }
.ld5-faq summary {
  cursor: pointer; font-weight: 600; font-size: 15px;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.ld5-faq summary::-webkit-details-marker { display: none; }
.ld5-faq summary::after { content: "+"; color: var(--ld5-green); font-size: 20px; line-height: 1; }
.ld5-faq details[open] summary::after { content: "−"; }
.ld5-faq details p { margin: 8px 0 4px; font-size: 14.5px; line-height: 1.55; }

/* --- súvisí ----------------------------------------------------------------- */
.ld5-suvisi {
  margin: 20px 0; padding: 12px 16px; border-left: 4px solid var(--ld5-lime);
  background: #f3f9f0; border-radius: 8px; font-size: 14.5px;
}
.ld5-suvisi p { margin: 4px 0; }
.ld5-tip { color: var(--ld5-green); }

/* --- značky, citát, dátum ---------------------------------------------------- */
.ld5-brand {
  margin: 22px 0 6px; font-size: 14px; color: #444;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.ld5-brand b { display: block; color: #1f2937; margin-bottom: 2px; }
.ld5-citat { font-size: 14.5px; color: #4b5563; margin: 10px 0 4px; }
.ld5-meta { font-size: 12px; color: var(--ld5-muted); margin: 6px 0 0; }

/* --- dáta (zloženie + výživové hodnoty) -------------------------------------- */
/* Triedy ld5-zlozenie a ld5-nutrition sú stabilné — skript šablóny ich na desktope
   presúva do pravého stĺpca pod nákupný blok. Nepremenovávať. */
.ld5-zlozenie, .ld5-nutrition { margin-bottom: 4px; }
.ld5-data { margin-top: 22px; border-top: 1px solid var(--ld5-line); padding-top: 6px; }
.ld5-data h4 {
  margin: 14px 0 6px; font-size: 14px; text-transform: uppercase;
  letter-spacing: .04em; color: #555;
}
table.ld5-par { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.ld5-par th { text-align: left; font-weight: 500; width: 34%; padding: 6px 8px; color: #444; vertical-align: top; }
table.ld5-par td { padding: 6px 8px; }
table.ld5-par tr:nth-child(even) { background: #fafafa; }
table.ld5-nutri { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ld5-nutri thead tr { background: var(--ld5-green); color: #fff; }
.ld5-nutri th, .ld5-nutri td { padding: 6px 8px; }
.ld5-nutri td:last-child, .ld5-nutri th:last-child { text-align: right; }
.ld5-nutri tbody tr:nth-child(even) { background: #f3f9f0; }

@media (max-width: 800px) {
  .ld5-dlazdice { grid-template-columns: 1fr 1fr; }
  .ld5-brand { grid-template-columns: 1fr; }
}