/* ════════════════════════════════════════════════════════════════════════
   20-product-detail.css — VOALA detail produktu

   Zdroj: Figma VOALA_WEB_2025 → PRODUKT 2159:1733 (2. 9. 2026), hodnoty
   z get_design_context (Inter, black_voala #2A3133, red_voala #EA515B):
   - tělo stránky 1222 (x=109), dva sloupce 597 + 597, mezera 28
   - hlavička končí y=150, drobečky y=190 (Regular 14, #BDBDBD, i aktuální
     položka), hlavní fotka y=240 → 40 nad i pod drobečky
   - hlavní fotka 597 × 597 (ČTVERCOVÁ — korekce klienta z 2. 9.), přes ni
     tenké šipky ⟨ ⟩ bez podkladu
   - miniatury 188 × 188 ve TŘECH sloupcích, mezera 17
   - vpravo: kategorie Medium 20 červená (cap y=240) → název Medium 44/1.2
     (y=280) → cena Medium 20 + „Skladem" Regular 14 #27AE60 (y=390) →
     popis Medium 18/1.5 černý, šířka 569 (y=465) → varianty: popisek
     Medium 20 (84 široký, select začíná +108), select 430 × 40 bílý bez
     rámečku a bez radiusu, text Regular 18, placeholder #BDBDBD, chevron
     30 od pravé hrany; rozteč řádků 65 (mezera 25) → o 50 níž řádek
     množství 77 × 40 (bílé, Regular 18) + 25 + tlačítko 199 × 40, radius 30,
     červené, Semibold 20 WHITE_VOALA; řádek zarovnaný na levou hranu selectů
   - šedý blok #F2F2F2 (Figma „Gray 6") 1368 široký (tělo + 73 na každé
     straně), BEZ zaoblení, vnitřní odsazení ~65/73, dva sloupce 597:
     nadpisy Medium 44/1.2, text Medium 18/1.5 černý, odkazy červené podtržené
   - „Další produkty": linka + nadpis Medium 48/1.3 + mřížka 5 × 4 z [vo_shop]
     + pill 187 × 40 Semibold 20

   Markup: woocommerce/single-product.php + includes/product-detail.php,
   galerii přepíná assets/js/vo-product-gallery.js.

   WC/Divi pasti řešené tady: Divi šipka ::after na tlačítkách, šedé pozadí
   a rámečky inputů, `height: auto` na obrázku, variations tabulka.
   ════════════════════════════════════════════════════════════════════════ */

.vo-product-detail {
  /* šířka popisku varianty + mezera = 108 (Figma: select začíná x=842,
     sloupec x=734); řádek množství + tlačítko se zarovnává na stejnou hranu */
  --vo-pd-label-w: 84px;
  --vo-pd-label-gap: 24px;
  --vo-pd-field-h: 40px;
  --vo-pd-row-gap: 25px;
}

/* ── Drobečková navigace ─────────────────────────────────────────────── */
.vo-breadcrumb {
  margin: 0 0 clamp(22px, calc(17.17px + 1.238vw), 35px);
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #bdbdbd;
}
.vo-breadcrumb__link {
  color: #bdbdbd;
  text-decoration: none;
  transition: color var(--t-fast);
}
.vo-breadcrumb__link:hover { color: var(--red-voala); }
.vo-breadcrumb__sep { margin: 0 6px; }
.vo-breadcrumb__current { color: #bdbdbd; }

/* Sekce s galerií: nahoře jen 40 px pod hlavičkou (drobečky), dole končí
   u šedého bloku, odsazení dole si řídí blok sám. */
.vo-pd-section {
  padding-top: clamp(24px, calc(18.06px + 1.524vw), 40px);
  padding-bottom: 0;
}

/* ── Dvousloupcové rozložení ─────────────────────────────────────────── */
.vo-pd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, calc(22.5px + 0.381vw), 28px);
  align-items: start;
}

@media (max-width: 900px) {
  .vo-pd { grid-template-columns: 1fr; }
}

/* ── Galerie ─────────────────────────────────────────────────────────── */
/* Hlavní fotka je čtvercová (korekce klienta z 2. 9. 2026) — fotka se
   ořízne na střed, ne roztáhne. */
.vo-pd__main {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gray-voala);
  box-shadow: var(--shadow-map);
}
/* !important + absolutní pozice: WooCommerce/Divi mají na obrázku v detailu
   produktu `height: auto` s vyšší specificitou, fotka pak čtverec nevyplnila
   a pod ní zůstal šedý pruh (stejná past jako u karet v 19-shop-archive). */
.vo-pd__main-img,
.vo-pd__main img.vo-pd__main-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
}
.vo-pd__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  color: rgba(42, 49, 51, .3);
}
.vo-pd__placeholder svg { width: 64px; height: auto; }

/* Šipky přes fotku — ve Figmě tenké obrysové ⟨ ⟩ 37 px bez podkladu,
   světle šedé (na fotkách produktů je světlé pozadí i tmavý diář, proto
   jemný světlý kruh, ať jsou vidět všude). */
.vo-pd__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, calc(27.4px + 0.667vw), 37px);
  height: clamp(30px, calc(27.4px + 0.667vw), 37px);
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(250, 250, 250, .6);
  color: #8a8f91;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.vo-pd__nav--prev { left: clamp(14px, calc(4.9px + 2.9vw), 42px); }
.vo-pd__nav--next { right: clamp(14px, calc(4.9px + 2.9vw), 42px); }
.vo-pd__nav svg { width: 70%; height: 70%; }
.vo-pd__nav svg path { stroke-width: 1.5; }
.vo-pd__nav:hover { background: var(--white-voala); color: var(--red-voala); }
.vo-pd__nav:focus-visible {
  outline: 2px solid var(--red-voala);
  outline-offset: 2px;
}

/* Tři sloupce podle Figmy (188 × 188, mezera 17) */
.vo-pd__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, calc(7.4px + 0.667vw), 17px);
  margin: clamp(10px, calc(7.4px + 0.667vw), 17px) 0 0;
  padding: 0;
  list-style: none;
}
.vo-pd__thumbs li { margin: 0; padding: 0; list-style: none; }
.vo-pd__thumbs li::before { content: none; }

.vo-pd__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gray-voala);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.vo-pd__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.vo-pd__thumb:hover { border-color: rgba(234, 81, 91, .5); }
.vo-pd__thumb.is-active { border-color: var(--red-voala); }
.vo-pd__thumb:focus-visible {
  outline: 2px solid var(--red-voala);
  outline-offset: 2px;
}

/* ── Info sloupec ────────────────────────────────────────────────────────
   Rytmus z Figmy (od verzálek): kategorie 240 → název 280 → cena 390 →
   popis 465 → první select 609. Mezery jsou přepočítané na margin-top
   (odečtené půlky řádkování), proto nejsou kulaté.
   ──────────────────────────────────────────────────────────────────────── */
.vo-pd__info { font-family: var(--font-base); }

/* Divi dává každému <p> padding-bottom 1em — u našich prvků rytmus řídí
   margin-top, proto padding pryč. */
.vo-pd__info p,
.vo-breadcrumb { padding: 0; }

.vo-pd__cat {
  /* verzálky kategorie lícují s horní hranou fotky (Figma y=240) */
  margin: -7px 0 0;
  font-size: clamp(16px, calc(14.51px + 0.381vw), 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.vo-pd__cat a {
  color: var(--red-voala);
  text-decoration: none;
  transition: color var(--t-fast);
}
.vo-pd__cat a:hover { color: var(--red-voala-dark); text-decoration: underline; }

.vo-pd__title {
  margin: 8px 0 0;
  padding: 0;
  font-size: clamp(28px, calc(22.06px + 1.524vw), 44px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--black-voala);
  text-align: left;
}

.vo-pd__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin: 8px 0 0;
  font-size: clamp(16px, calc(14.51px + 0.381vw), 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--black-voala);
}
.vo-pd__price del {
  margin-right: 8px;
  font-weight: 400;
  color: var(--muted);
}
.vo-pd__price ins {
  text-decoration: none;
  color: var(--red-voala);
}
/* Figma: „Skladem" Regular 14, zelená #27AE60 */
.vo-pd__stock {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #27ae60;
}
.vo-pd__stock--out { color: var(--warning); }

.vo-pd__excerpt {
  max-width: 569px;
  margin-top: clamp(28px, calc(21.69px + 1.619vw), 45px);
  font-size: clamp(16px, calc(15.26px + 0.19vw), 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--black-voala);
}
.vo-pd__excerpt p { margin: 0 0 .8em; }
.vo-pd__excerpt p:last-child { margin-bottom: 0; }

/* ── Formulář do košíku (nativní WC) ─────────────────────────────────────
   Variabilní produkt: form.cart je mřížka „popisek | pole". Tabulka
   variant z WC se rozpustí (display: contents), takže popisky a selecty
   sedí v mřížce přímo a řádek s množstvím a tlačítkem se zarovná na levou
   hranu selectů, ať je popisek jakkoli dlouhý (Figma: „Velikost:" 84 +
   mezera 24, u klienta i „počet stran").
   ──────────────────────────────────────────────────────────────────────── */
.vo-pd__cart { margin-top: clamp(28px, calc(22.43px + 1.429vw), 43px); }

.vo-pd__cart form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vo-pd-row-gap);
  margin: 0;
}

.vo-pd__cart form.cart.variations_form {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--vo-pd-label-gap);
  row-gap: var(--vo-pd-row-gap);
  align-items: center;
}
.vo-pd__cart .variations,
.vo-pd__cart .variations tbody,
.vo-pd__cart .variations tr {
  display: contents;
}
.vo-pd__cart .variations th.label {
  grid-column: 1;
  min-width: var(--vo-pd-label-w);
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(16px, calc(14.51px + 0.381vw), 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--black-voala);
  text-align: left;
  white-space: nowrap;
}
.vo-pd__cart .variations th.label label { font-weight: inherit; cursor: default; }
.vo-pd__cart .variations th.label label::after { content: ':'; }
.vo-pd__cart .variations td.value {
  grid-column: 2;
  position: relative;
  width: auto;
  padding: 0;
  border: 0;
}

/* Select — bílý obdélník 430 × 40 bez rámečku a bez radiusu, vlastní chevron */
.vo-pd__cart .variations select {
  display: block;
  width: 100%;
  max-width: 430px;
  height: var(--vo-pd-field-h);
  margin: 0;
  padding: 0 44px 0 13px !important;
  font-family: var(--font-base) !important;
  font-size: clamp(16px, calc(15.26px + 0.19vw), 18px) !important;
  line-height: var(--vo-pd-field-h);
  color: var(--black-voala) !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%232A3133' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 22px center !important;
  background-size: 16px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
/* Nevybraná varianta = placeholder šedě (#BDBDBD) */
.vo-pd__cart .variations select:has(option[value='']:checked),
.vo-pd__cart .variations select:invalid { color: #bdbdbd !important; }
.vo-pd__cart .variations select:focus {
  outline: 2px solid var(--red-voala);
  outline-offset: -2px;
}

/* „Vyčistit" — WC ho lepí za select; ve Figmě není, necháme ho drobný
   pod polem, ať nezužuje select */
.vo-pd__cart .reset_variations {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  margin: 5px 0 0;
  font-size: var(--fs-small);
  line-height: 1.2;
  color: var(--muted);
}
.vo-pd__cart .reset_variations:hover { color: var(--red-voala); }

/* Řádek s cenou varianty, dostupností a tlačítkem — do druhého sloupce,
   50 px pod posledním selectem (25 mřížka + 25 margin) */
.vo-pd__cart .single_variation_wrap {
  grid-column: 2;
  width: 100%;
  margin-top: var(--vo-pd-row-gap);
}
.vo-pd__cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vo-pd-row-gap);
}

/* Cena vybrané varianty: ve Figmě je cena jen nahoře pod názvem, proto se
   po výběru přepíše tam (assets/js/vo-product-variation.js) a WC výpis
   nad tlačítkem je schovaný. */
.vo-pd__cart .woocommerce-variation-price { display: none; }
/* Dostupnost / popis varianty jen když něco obsahují (WC vypisuje prázdné obaly) */
.vo-pd__cart .woocommerce-variation-availability,
.vo-pd__cart .woocommerce-variation-description { margin: 0; font-size: 14px; }
.vo-pd__cart .woocommerce-variation-availability:empty,
.vo-pd__cart .woocommerce-variation-description:empty { display: none; }
.vo-pd__cart .woocommerce-variation-availability:not(:empty),
.vo-pd__cart .woocommerce-variation-description:not(:empty) { margin-bottom: 10px; }
.vo-pd__cart .woocommerce-variation-description { color: var(--muted); }
.vo-pd__cart .woocommerce-variation-availability p,
.vo-pd__cart .woocommerce-variation-description p { margin: 0; padding: 0; }

/* Množství — bílý obdélník 77 × 40 bez rámečku */
.vo-pd__cart .quantity {
  float: none !important;
  margin: 0 !important;
}
.vo-pd__cart .quantity .qty {
  width: 77px;
  height: var(--vo-pd-field-h);
  margin: 0;
  padding: 0 8px !important;
  text-align: center;
  font-family: var(--font-base) !important;
  font-size: clamp(16px, calc(15.26px + 0.19vw), 18px) !important;
  color: var(--black-voala) !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.vo-pd__cart .quantity .qty:focus {
  outline: 2px solid var(--red-voala);
  outline-offset: -2px;
}

/* Tlačítko — červený pill 199 × 40, Semibold 20, bez Divi šipky */
.vo-pd__cart .single_add_to_cart_button,
.vo-pd__cart button.single_add_to_cart_button.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 199px;
  height: var(--vo-pd-field-h);
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: var(--red-voala) !important;
  color: var(--white-voala) !important;
  font-family: var(--font-base) !important;
  font-size: clamp(16px, calc(14.51px + 0.381vw), 20px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background var(--t-fast);
}
.vo-pd__cart .single_add_to_cart_button:hover { background: var(--red-voala-dark) !important; }
.vo-pd__cart .single_add_to_cart_button.disabled,
.vo-pd__cart .single_add_to_cart_button:disabled {
  opacity: .5 !important;
  cursor: not-allowed;
}
.vo-pd__cart .single_add_to_cart_button::after,
.vo-pd__cart .single_add_to_cart_button::before {
  display: none !important;
  content: '' !important;
}
.vo-pd__cart .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--black-voala);
  outline-offset: 3px;
}

/* Skladovost u jednoduchého produktu (WC ji vypíše nad formulář) */
.vo-pd__cart .stock { width: 100%; margin: 0; font-size: 14px; }
.vo-pd__cart .stock.in-stock { color: #27ae60; }
.vo-pd__cart .stock.out-of-stock { color: var(--warning); }

/* ── Šedý blok „O produktu" / „Specifikace" ──────────────────────────────
   Figma: Rectangle 679 — #F2F2F2, 1368 × 812 bez zaoblení (tělo stránky +
   ~73 na každé straně), nadpisy Medium 44 na y=1449 (75 pod horní hranou),
   text od y=1541, dva sloupce 597 s mezerou 28.
   Levý sloupec je dlouhý popis produktu, pravý část za řádkem
   „Specifikace" (nebo tabulka vlastností) — viz includes/product-detail.php.
   ──────────────────────────────────────────────────────────────────────── */
.vo-pd-about {
  padding: clamp(50px, calc(21.4px + 7.333vw), 127px) var(--gutter) clamp(48px, calc(21.3px + 6.857vw), 120px);
  background: var(--white-voala);
}
.vo-pd-about__box {
  width: 100%;
  max-width: 1368px;
  margin: 0 auto;
  padding: clamp(28px, calc(14.26px + 3.524vw), 65px) clamp(24px, calc(5.8px + 4.667vw), 73px);
  border-radius: 0;
  background: #f2f2f2;
}
.vo-pd-about__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, calc(20.3px + 3vw), 64px) clamp(24px, calc(22.5px + 0.381vw), 28px);
  max-width: var(--container);
  margin: 0 auto;
}
.vo-pd-about__grid--single { grid-template-columns: minmax(0, 1fr); }

.vo-pd-about__title {
  margin: 0 0 clamp(24px, calc(16.94px + 1.81vw), 43px);
  padding: 0;
  font-family: var(--font-base);
  font-size: clamp(28px, calc(22.06px + 1.524vw), 44px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--black-voala);
  text-align: left;
}

/* Text v bloku: Medium 18/1.5 jako popis nahoře, sloupec drží šířku sám */
.vo-pd-about__text.vo-content {
  max-width: none;
  font-size: clamp(16px, calc(15.26px + 0.19vw), 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--black-voala);
}
.vo-pd-about__text.vo-content p { margin: 0 0 1.5em; padding: 0; }   /* Divi: p padding-bottom 1em pryč */
.vo-pd-about__text.vo-content p:last-child { margin-bottom: 0; }
.vo-pd-about__text.vo-content ul,
.vo-pd-about__text.vo-content ol { margin: 0 0 1.5em; padding-left: 27px; }
.vo-pd-about__text.vo-content li { margin: 0 0 1.5em; }
.vo-pd-about__text.vo-content li:last-child { margin-bottom: 0; }
.vo-pd-about__text.vo-content strong,
.vo-pd-about__text.vo-content b { font-weight: 700; color: var(--black-voala); }
.vo-pd-about__text.vo-content a {
  color: var(--red-voala);
  text-decoration: underline;
  text-underline-offset: .12em;
}
.vo-pd-about__text.vo-content a:hover { color: var(--red-voala-dark); }

/* Tabulka vlastností (záloha, když popis řádek „Specifikace" nemá) */
.vo-pd-about__text .woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
}
.vo-pd-about__text .woocommerce-product-attributes th,
.vo-pd-about__text .woocommerce-product-attributes td {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  vertical-align: top;
}
.vo-pd-about__text .woocommerce-product-attributes th { padding-right: 16px; font-weight: 700; }
.vo-pd-about__text .woocommerce-product-attributes p { margin: 0; font-style: normal; }

@media (max-width: 900px) {
  .vo-pd-about__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Mobilní sticky CTA (functions.php → wp_footer, jen na produktu) ─── */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-mobile-cta);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--white-voala);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
  font-family: var(--font-base);
}
@media (max-width: 640px) {
  .mobile-cta { display: flex; }
}
.mobile-cta-price { display: flex; flex-direction: column; line-height: 1.2; }
.mobile-cta-price small { font-size: 11px; color: var(--muted); }
.mobile-cta-price strong { font-size: 16px; color: var(--black-voala); }
.mobile-cta-price ins { text-decoration: none; color: var(--red-voala); }
.mobile-cta-price del { font-weight: 400; color: var(--muted); margin-right: 4px; }
.mobile-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--red-voala);
  color: var(--white-voala);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.mobile-cta .btn:hover { background: var(--red-voala-dark); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .vo-pd__cart .single_add_to_cart_button { flex: 1 1 auto; }
  /* Úzké okno: popisek nad selectem, tlačítko přes celou šířku */
  .vo-pd__cart form.cart.variations_form { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .vo-pd__cart .variations th.label { grid-column: 1; }
  .vo-pd__cart .variations td.value { grid-column: 1; margin-bottom: calc(var(--vo-pd-row-gap) - 8px); }
  .vo-pd__cart .single_variation_wrap { grid-column: 1; }
}