/* ===========================================================================
   Detail produktu — kúra (woocommerce/single-product.php), desktopová vrstva.

   Načítá se za vlasimo-base.css / vlasimo-ui.css / parts/* (inc/assets.php,
   slug `produkt` z `vlasimo_page_css_slug()` — is_singular('product'), tedy
   i na PDP kosmetiky; ta má vlastní markup a sem nesahá). Tabletová (769–1024)
   a mobilní (≤768) pravidla, která na inline styly mířila přes `[style*="…"]`
   ve vlasimo-base.css, jsou přepsaná na třídy dole v tomhle souboru.

   Sdílené party mají vlastní soubory: assets/css/parts/pdp-gallery.css,
   pdp-ingredients.css, pdp-consult.css.

   Hodnoty NEJSOU z návrhu, ale z vypočtených stylů živé stránky ve třech
   šířkách na třech variantách produktu (1M = konfigurátor délek, 3M = řádky
   upgradu, 6M = hláška „nejvýhodnější"). Dvě místa by se z kaskády odhadla
   špatně:
     * `#popis` má na mobilu odsazení `12px 20px` — vyhrálo obecné
       `[style*="padding:16px 48px"]`, ne konkrétnější pravidlo s `56px`,
       a mezera sloupců zůstává 56 px (mobilní vrstva ji nestahuje),
     * poslední řádek účinků dostává na tabletu `grid-template-columns:
       repeat(2, 1fr)`, i když je to flexbox: jehla
       `border-top:… #e8e5d9; border-bottom:… #e8e5d9` je sdílená s mřížkou
       na homepage. Vidět to není, ve snímku computed stylů ano.

   POZOR na to, co dělá skript v šabloně: barvy dlaždic délek, rámeček
   doplňku, `display` přeškrtnuté ceny a štítku úspory a celý styl hlavního
   obrázku galerie se zapisují inline za běhu a tyhle třídy přebijí. Proto
   tu nejsou stavy „vybráno" / „zaškrtnuto" — vlastní by se s inline stylem
   pobily.

   Migrace: tools/migrate/26-produkt.py
   =========================================================================== */

/* --- Rám stránky -----------------------------------------------------------
   Dva obaly: drobečky + buybox, a od pásu záložek níž popis. Mezi nimi je
   `parts/pdp-tabs.php` schválně MIMO obal (sticky se lepí jen v rodiči). */
.vl-pdp-wrap { max-width: 1440px; margin: 0 auto; }
.vl-pdp-top { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; padding: 24px 48px 56px; }

/* --- Hlavička buyboxu ------------------------------------------------------ */
.vl-pdp-buycol { display: flex; flex-direction: column; gap: 18px; }
/* Tři sloupce s mezerou 10 px: hlavička, řádky upgradu, doplňky. */
.vl-pdp-stack10 { display: flex; flex-direction: column; gap: 10px; }
.vl-pdp-stack16 { display: flex; flex-direction: column; gap: 16px; }
.vl-pdp-kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #0b7c3d; }
/* `h1 { margin:0; letter-spacing:-.01em; color:#16211c }` z vlasimo.css je jen
   (0,0,0,1) — třída ho přebije, ale hodnoty se musí vypsat celé. */
.vl-pdp-title { margin: 0; font-size: 38px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; color: #16211c; }
.vl-pdp-rate { display: flex; align-items: center; gap: 10px; }
/* Táž deklarace u hodnocení v hlavičce i u věty o spokojenosti v recenzích. */
.vl-pdp-note14 { font-size: 14px; color: #5d6b62; }
.vl-pdp-rate__num { color: #16211c; font-weight: 600; }
/* `.vl a { color:#16211c; text-decoration:none }` (0,0,1,1) je specifičtější
   než holá třída → odkaz musí být psaný `.vl a.trida`. Hover inline styl
   přebíjel, takže se barva na hover neměnila; `:hover` to drží dál. */
.vl a.vl-pdp-rate__link,
.vl a.vl-pdp-rate__link:hover { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.vl p.vl-pdp-lead { margin: 0; font-size: 15.5px; line-height: 1.65; color: #3d443e; text-align: justify; }
/* Zvýraznění `*takto*` z Customizeru (vlasimo_text / vlasimo_hl). */
.vl-pdp-b { font-weight: 600; color: #16211c; }
.vl-pdp-bw { font-weight: 600; }

/* --- Nákupní box ----------------------------------------------------------- */
.vl-pdp-box { border: 1px solid #e3e0d4; background: #ffffff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.vl-pdp-boxlabel { font-size: 13.5px; font-weight: 600; color: #16211c; }
.vl-pdp-boxlabel__note { font-weight: 400; color: #5d6b62; }

/* Řádky upgradu na delší balení (jen samostatná balení ≥ 2 měsíce). */
.vl a.vl-pdp-up,
.vl a.vl-pdp-up:hover { display: flex; align-items: center; gap: 12px; border: 1px solid #e3e0d4; background: #ffffff; border-radius: 12px; padding: 12px 16px; color: inherit; }
.vl-pdp-up__thumb { width: 44px; height: 44px; min-width: 44px; border-radius: 8px; border: 1px solid #e3e0d4; background: #fdfcf8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Miniatura v řádku upgradu i u doplňku — `img { max-width:100% }` z vlasimo.css
   je (0,0,0,1), takže 86 % musí být na třídě. */
.vl-pdp-thumb__img { max-height: 86%; max-width: 86%; object-fit: contain; display: block; }
.vl-pdp-up__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vl-pdp-up__name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #16211c; }
.vl-pdp-badge { background: #0b7c3d; color: #ffffff; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; }
.vl-pdp-up__per { font-size: 12.5px; color: #5d6b62; }
.vl-pdp-up__right { margin-left: auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.vl-pdp-up__diff { font-size: 14.5px; font-weight: 600; color: #16211c; }
.vl-pdp-up__arrow { font-size: 15px; color: #0b7c3d; transform: translateY(-1px); }

/* Hláška „nejvýhodnější balení" u nejdelší kúry (místo mřížky délek). */
.vl-pdp-best { display: flex; align-items: center; gap: 10px; background: #e4eee6; border: 1px solid #c6dbcb; border-radius: 10px; padding: 10px 14px; }
.vl-pdp-best__ico { color: #0b7c3d; display: flex; }
.vl-pdp-best__txt { font-size: 13.5px; color: #16211c; }

/* --- Konfigurátor délky kúry -----------------------------------------------
   Vybranou dlaždici kreslí skript inline (`t.style.border`, `t.style.background`
   a barvy `.vl-tile-n` / `.vl-tile-per`), aby se desktopová a mobilní vrstva
   nerozešly — třída drží jen výchozí stav. Párování jde přes `data-vl-tile`,
   ne přes pořadí v DOM. */
.vl-pdp-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.vl-pdp-tile { position: relative; border: 1px solid #d5d2c6; background: #ffffff; border-radius: 10px; padding: 10px 4px 9px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.vl-pdp-tile__badge { position: absolute; top: -9px; background: #0b7c3d; color: #ffffff; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; }
/* Číslice dlaždice a nadpisky karet měly v návrhu tutéž deklaraci — jedna třída,
   ne pět kopií. */
.vl-pdp-h16 { font-size: 16px; font-weight: 600; color: #16211c; }
.vl-pdp-tile__per { font-size: 10.5px; color: #5d6b62; }

/* --- Cena ------------------------------------------------------------------
   `--sale` = zlevněná varianta zeleně. Barvu SPANU uvnitř přepisuje skript
   (`[data-vl-price].style.color`), obal se ho netýká. `display:none`
   u přeškrtnuté ceny a štítku úspory zůstává inline — skript je vrací zpět
   zápisem `style.display=''`, což třídu neodstraní. */
/* Cena a přepočet na kapsli jsou jeden blok: .vl-pdp-box odděluje prvky 16 px,
   pod cenou to je moc — proto vlastní obal s 6 px (David 17. 9., podle Herbasu). */
.vl-pdp-priceblock { display: flex; flex-direction: column; gap: 6px; }
/* Štítky nad perexem — stejný vzhled jako podtitulek karty ve výpisu
   (.vl-shop-card__tag), jen bez bubliny se složením (David 17. 9.). */
.vl-pdp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vl-pdp-tag { display: inline-flex; align-items: center; gap: 7px; background: #ecebe6; color: #31312f; padding: 6px 16px; border-radius: 16px; font-size: .74rem; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.vl-pdp-tag__ico { height: 15px; width: auto; flex: none; display: block; }

/* Řádek dávkování a přepočet na kapsli pod cenou — týž řádek jako mobilní
   vrstva (David 17. 9.); do té doby měl desktop jen přepočet.
   POZOR na jméno: .vl-pdp-dose je sekce dávkování (#davkovani) níž na stránce,
   mřížka 2×1 s odsazením 48 px — stejné jméno tenhle řádek rozbilo. */
.vl-pdp-doseline { font-size: 13px; line-height: 1.5; color: #8a887f; }
.vl-pdp-pricerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.vl-pdp-pricerow__l { display: flex; align-items: flex-end; gap: 12px; }
.vl-pdp-price { font-size: 40px; font-weight: 600; letter-spacing: -.03em; color: #16211c; line-height: .95; }
.vl-pdp-price--sale { color: #0d8f46; }
.vl-pdp-oldwrap { font-size: 15px; color: #8a887f; text-decoration: line-through; padding-bottom: 3px; }
.vl-pdp-save { background: #16211c; color: #ffd21f; border: none; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; white-space: nowrap; }

/* --- Kampaňový rámeček EXTRA ------------------------------------------------
   Barvy dává `vlasimo_coupon_box_style()` podle stylu kampaně. Pro rámeček
   jsou to tři varianty: žlutý default (základní třída), `--dark` a `--green`
   (styl „forest" i „green" mají v rámečku stejné barvy, liší se jen chipem
   na obrázku, který tady není). */
.vl-pdp-ex { display: flex; align-items: center; gap: 10px; background: #fdf3c8; border: 1.5px dashed #d9a800; border-radius: 10px; padding: 9px 13px; }
/* Varianty podle „Barevného stylu" kampaně — slug nese vlasimo_coupon_box_style();
   forest má rámeček ve světlém zeleném provedení jako green (Davidova korekce 31. 8.). */
.vl-pdp-ex--dark { background: #16211c; border: 1.5px dashed #ffd21f; }
.vl-pdp-ex--green,
.vl-pdp-ex--forest { background: #f4faf6; border: 1.5px dashed #0d8f46; }
.vl-pdp-ex--orange { background: #fdf1e9; border: 1.5px dashed #e35a0e; }
.vl-pdp-ex__badge { background: #16211c; color: #ffd21f; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; }
.vl-pdp-ex--dark .vl-pdp-ex__badge { background: #ffd21f; color: #16211c; }
.vl-pdp-ex--green .vl-pdp-ex__badge,
.vl-pdp-ex--forest .vl-pdp-ex__badge { background: #0d8f46; color: #ffffff; }
.vl-pdp-ex--orange .vl-pdp-ex__badge { background: #e35a0e; color: #ffffff; }
.vl-pdp-ex__txt { font-size: 13.5px; color: #16211c; }
.vl-pdp-ex--dark .vl-pdp-ex__txt { color: #ffffff; }
/* Částka s kódem (do 17. 9. procento, třída __pct) — jako cena na kartě výpisu. */
.vl-pdp-ex__price { font-size: 16px; font-weight: 600; color: #16211c; }
.vl-pdp-ex--dark .vl-pdp-ex__price { color: #ffd21f; }
.vl-pdp-ex--green .vl-pdp-ex__price,
.vl-pdp-ex--forest .vl-pdp-ex__price { color: #0b7c3d; }
.vl-pdp-ex--orange .vl-pdp-ex__price { color: #c24a09; }
.vl-pdp-ex__code { font-weight: 700; }
/* Mobilní vrstva (≤768): rámeček má jen šířku karty (~330 px), takže drží
   krátký badge „%" z vlasimo-base.css a menší stupnici písma — s desktopovými
   16 px se „421 Kč s kódem TOPVLASY · Uplatnit" lámalo na dva řádky
   (vyzkoušeno 17. 9. na 390px snímku). */
@media (max-width: 768px) {
	/* Odsazení shora stejné jako zdola (David 17. 9.): pod rámečkem drží
	   mezeru `margin-top:14px` řádku se stepperem, nad ním nebylo nic. */
	.vl-pdp-ex { gap: 8px; padding: 8px 10px; margin-top: 14px; }
	.vl-pdp-ex__txt { font-size: 12.5px; }
	.vl-pdp-ex__price { font-size: 14px; }
	.vl-pdp-ex__apply { font-size: 12.5px; }
}

.vl-pdp-ex__apply { margin-left: auto; font-size: 13px; font-weight: 500; color: #8a6a00; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vl-pdp-ex--dark .vl-pdp-ex__apply { color: #ffd21f; }
.vl-pdp-ex--green .vl-pdp-ex__apply,
.vl-pdp-ex--forest .vl-pdp-ex__apply { color: #0b7c3d; }
.vl-pdp-ex--orange .vl-pdp-ex__apply { color: #c24a09; }

/* --- Stepper a hlavní CTA --------------------------------------------------
   „Stisk" na hover/active dělá `.vl [data-vl-add]:hover` ve vlasimo-base.css —
   sem nepatří, visí na atributu, ne na téhle třídě. */
.vl-pdp-buyrow { display: flex; gap: 12px; }
.vl-pdp-step { display: flex; align-items: center; border: 1px solid #d5d2c6; border-radius: 12px; overflow: hidden; }
.vl-pdp-step__btn { width: 44px; height: 58px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #5d6b62; cursor: pointer; }
.vl-pdp-step__n { width: 34px; text-align: center; font-size: 16px; font-weight: 500; color: #16211c; }
.vl-pdp-add { flex: 1; height: 58px; background: #0d8f46; color: #ffffff; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 17px; font-weight: 600; box-shadow: 0 4px 0 #075c2e; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
/* Slot ikony košíku PŘED textem (vlasimo_cart_add_svg, 21 px; do 16. 9. šipka
   „→" za textem — CHANGELOG CDXXXI). Fajfku po přidání do slotu dává vlasimo-cart.js. */
.vl-pdp-add__ico { display: flex; }
.vl-pdp-add__ico svg { display: block; }

/* --- Pruh se skladem, dopravou a vrácením ---------------------------------- */
.vl-pdp-perks { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5d6b62; flex-wrap: wrap; }
.vl-pdp-perks__item { display: flex; align-items: center; gap: 7px; }
.vl-pdp-perks__dot { width: 7px; height: 7px; border-radius: 50%; background: #0d8f46; }
/* Odkaz na okno s termíny. Tečku nese ::before, ne samostatný span jako u
   ostatních položek — po zalomení pruhu (tablet, úzký sloupec) by zůstala
   viset na začátku řádku sama. */
.vl-pdp-perks__more { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: #5d6b62; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vl-pdp-perks__more::before { content: '·'; margin-right: 6px; text-decoration: none; display: inline-block; }
.vl-pdp-perks__more:hover { color: #0b7c3d; }

/* --- Doplňky ---------------------------------------------------------------
   Zaškrtnutý stav (rámeček, podklad a celý styl čtverečku) kreslí skript
   inline. Čtvereček `[data-vl-check]` proto vlastní třídu NEMÁ: skript mu
   přepisuje `style.cssText` a zapnutý stav rámeček nemá — z třídy by ho
   dostal zpátky a 18px čtvereček by vyrostl na 22. */
.vl-pdp-addon { display: flex; align-items: center; gap: 12px; border: 1px solid #e3e0d4; background: #ffffff; border-radius: 12px; padding: 12px 16px; cursor: pointer; }
.vl-pdp-addon__thumb { width: 44px; height: 44px; border-radius: 8px; border: 1px solid #e3e0d4; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vl-pdp-addon__name { font-size: 14px; color: #16211c; }
.vl-pdp-addon__price { margin-left: auto; font-size: 14.5px; font-weight: 600; color: #16211c; }
/* Poznámka o balíčku: `display:none` zůstává inline (skript ji zapíná
   zápisem `style.display=''`). */
.vl-pdp-bnote { font-size: 12.5px; color: #0b7c3d; }
.vl-pdp-sku { font-size: 13px; color: #8a887f; }

/* --- Popis (#popis) -------------------------------------------------------- */
.vl-pdp-desc { padding: 16px 48px 56px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
/* Odsazení shora srovnává nadpisek „Popis" s nadpiskem v kartě vpravo: ta má
   26px vnitřní odsazení a 1px rámeček, levý sloupec žádné. */
.vl-pdp-desc__l { padding-top: 27px; display: flex; flex-direction: column; gap: 16px; }
.vl-pdp-desc__h2 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: #16211c; }
.vl p.vl-pdp-p { margin: 0; font-size: 15px; line-height: 1.7; color: #3d443e; text-align: justify; }
.vl-pdp-h3 { margin: 12px 0 0; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; color: #16211c; }
.vl-pdp-pack { display: flex; align-items: center; gap: 14px; background: #e4eee6; border: 1px solid #c6dbcb; border-radius: 12px; padding: 14px 18px; margin-top: 4px; }
.vl-pdp-pack__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: #0d8f46; }
.vl-pdp-pack__txt { font-size: 13.5px; line-height: 1.55; color: #16211c; }

/* Pravý sloupec popisu: karta složení ve zkratce a karta účinků. */
.vl-pdp-card { background: #f6f5ef; border: 1px solid #e3e0d4; border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.vl-pdp-card--gap14 { gap: 14px; }
.vl-pdp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-pdp-chip { background: #ffffff; border: 1px solid #e3e0d4; border-radius: 999px; padding: 7px 14px; font-size: 13.5px; color: #3d443e; white-space: nowrap; }
.vl-pdp-chips__more { padding: 7px 4px; font-size: 13.5px; color: #5d6b62; white-space: nowrap; }
.vl a.vl-pdp-cardlink,
.vl a.vl-pdp-cardlink:hover { align-self: flex-start; font-size: 14px; font-weight: 500; color: #0b7c3d; text-decoration: underline; text-underline-offset: 4px; }
.vl-pdp-col { display: flex; flex-direction: column; }
.vl-pdp-eff { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid #e8e5d9; font-size: 13.5px; line-height: 1.5; color: #3d443e; }
.vl-pdp-eff--last { border-bottom: 1px solid #e8e5d9; }
.vl-pdp-eff__ico { color: #0b7c3d; flex: none; margin-top: 3px; }
.vl-pdp-eff__note { font-size: 12px; color: #8a887f; line-height: 1.5; }

/* --- Dávkování a upozornění (#davkovani) ----------------------------------- */
.vl-pdp-dose { max-width: 1440px; margin: 0 auto; padding: 48px 48px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vl-pdp-wcard { background: #ffffff; border: 1px solid #e3e0d4; border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.vl-pdp-wcard__head { display: flex; align-items: center; gap: 12px; }
.vl-pdp-wcard__ico { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: #e4eee6; display: flex; align-items: center; justify-content: center; }
.vl-pdp-wcard__ico--warn { background: #fdf3c8; }
.vl p.vl-pdp-p14 { margin: 0; font-size: 14px; line-height: 1.7; color: #3d443e; text-align: justify; }

/* --- Recenze (#recenze) ---------------------------------------------------- */
.vl-pdp-rev { max-width: 1440px; margin: 0 auto; padding: 48px; display: flex; flex-direction: column; gap: 24px; }
.vl-pdp-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.vl-pdp-sechead__l { display: flex; flex-direction: column; gap: 8px; }
.vl-pdp-h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: #16211c; }
.vl-pdp-sat { color: #0b7c3d; font-weight: 600; }
.vl-pdp-revgrid { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
/* Mřížka karet: na tabletu ji stahuje `.vl-pdp [data-vl-rev-grid]` ve
   vlasimo-base.css (visí na atributu, ne na inline stylu, takže tam zůstává
   a pořád platí — nepřidávat sem konkurenční pravidlo). */
.vl-pdp-revcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.vl-pdp-more { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vl-pdp-more__btn { height: 50px; padding: 0 26px; border: 1.5px solid #0d8f46; color: #0b7c3d; border-radius: 12px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.vl-pdp-more__shown { font-size: 12.5px; color: #8a887f; }

/* --- Spodní nákupní lišta --------------------------------------------------
   Pozici, vyjetí a strop šířky tlačítka drží `.vl-buybar` ve vlasimo-base.css;
   tady je jen vzhled z návrhu. */
.vl-pdp-bar { background: rgba(253,252,248,.97); border-top: 1px solid #e3e0d4; box-shadow: 0 -10px 30px rgba(22,33,28,.10); }
.vl-pdp-bar__in { max-width: 1440px; margin: 0 auto; padding: 10px 48px; display: flex; align-items: center; gap: 14px; }
.vl-pdp-bar__thumb { width: 46px; height: 46px; border-radius: 9px; border: 1px solid #e3e0d4; background: #f2f1e9; display: flex; align-items: center; justify-content: center; }
.vl-pdp-bar__img { max-width: 88%; max-height: 88%; object-fit: contain; display: block; }
.vl-pdp-bar__name { font-size: 14px; font-weight: 600; color: #16211c; }
.vl-pdp-bar__rate { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #5d6b62; }
.vl-pdp-bar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.vl-pdp-bar__price { font-size: 16px; font-weight: 600; color: #0b7c3d; }
.vl-pdp-bar__old { font-size: 12.5px; color: #8a887f; text-decoration: line-through; }
.vl-pdp-bar__cta { background: #0d8f46; color: #ffffff; font-size: 14px; font-weight: 600; border-radius: 10px; padding: 11px 24px; box-shadow: 0 3px 0 #075c2e; cursor: pointer; }
.vl-pdp-pointer { cursor: pointer; }

/* ===== Tablet a užší okna do 1024 ==========================================
   Dvě velikosti písma stahovala pravidla `.vl-desktop [style*="font-size:…"]`
   z bloku `@media (max-width: 1024px)`, tedy i na telefonu — mobilní blok níž
   je pak přebíjí. Pořadí těch dvou bloků se nesmí prohodit. */
@media (max-width: 1024px) {
	.vl-pdp-price { font-size: 32px; }
	.vl-pdp-desc__h2 { font-size: 24px; }
}

/* ===== Tablet 769–1024 ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
	.vl-pdp-wrap,
	.vl-pdp-dose,
	.vl-pdp-rev,
	.vl-pdp-bar__in { max-width: 1024px; }
	.vl-pdp-top { gap: 36px; padding: 24px 32px 36px; }
	.vl-pdp-title { font-size: 30px; }
	.vl-pdp-tiles { grid-template-columns: repeat(3, 1fr); }
	.vl-pdp-desc { gap: 36px; padding: 16px 32px 36px; }
	.vl-pdp-dose { padding: 32px 48px 8px; }
	.vl-pdp-rev { padding: 32px; }
	.vl-pdp-h2 { font-size: 25px; }
	.vl-pdp-revgrid { grid-template-columns: 260px minmax(0, 1fr); }
	.vl-pdp-bar__in { padding: 10px 32px; }
	/* Poslední řádek účinků je flexbox, `grid-template-columns` na něm nic
	   nekreslí — pravidlo ve vlasimo-base.css na něj ale mířilo (sdílená jehla
	   s mřížkou na homepage) a snímek computed stylů to vidí. */
	.vl-pdp-eff--last { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Mobil ≤768 ==========================================================
   Desktopová vrstva je pod 768 px schovaná (`.vl-desktop { display:none }`),
   ale vypočtené styly se dál měří — hodnoty proto musí sedět i tady.
   Šířku kontejnerů mobil NEstahuje (max-width zůstává 1440), mezery sloupců
   taky ne (56 px), mění se odsazení, počet sloupců a velikost písma. */
@media (max-width: 768px) {
	.vl-pdp-top { padding: 16px 20px 36px; grid-template-columns: 1fr; }
	.vl-pdp-title { font-size: 27px; }
	.vl-pdp-price { font-size: 28px; }
	.vl-pdp-tiles { grid-template-columns: repeat(3, 1fr); }
	.vl-pdp-desc { padding: 12px 20px; grid-template-columns: 1fr; }
	.vl-pdp-desc__h2 { font-size: 22px; }
	.vl-pdp-dose { padding: 28px 20px 8px; grid-template-columns: 1fr; }
	.vl-pdp-rev { padding: 28px 20px; }
	.vl-pdp-h2 { font-size: 22px; }
	.vl-pdp-revgrid { grid-template-columns: 1fr; }
	.vl-pdp-revcards { grid-template-columns: 1fr; }
	/* Sticky lišta: na telefonu jen miniatura + cena + CTA — dlouhý název
	   s hodnocením lištu přeléval. */
	.vl-pdp-bar__in { padding: 8px 14px; gap: 10px; }
	.vl-pdp-bar__name,
	.vl-pdp-bar__rate { display: none; }
}

/* Strop kusů: hláška pod stepperem (obě vrstvy, klon do mobilní dělá skript PDP). */
.vl-qty-limit { margin-top: 12px; background: #fdf3e9; border: 1px solid #eec49b; border-radius: 11px; padding: 11px 14px; font-size: 13px; line-height: 1.5; color: #8a4d15; }
.vl-qty-limit b { color: #6b3a0e; }
.vl-qty-limit--m { margin: 10px 0 0; font-size: 12.5px; }