/* ===========================================================================
   Výpis produktů (woocommerce/archive-product.php, /objednavka/, SK /sk/obchod/)
   — styly vytažené z markupu.

   Načítá se za vlasimo-base.css / vlasimo-ui.css (inc/assets.php; slug
   `obchod` dává `vlasimo_page_css_slug()` podmínkou `is_post_type_archive
   ( 'product' )`, ne názvem šablony), takže responzivní vrstvy základu jdou
   přebít bez `!important`.

   Karty dlaždic mají vlastní soubory: assets/css/parts/shop-card.css
   (výpis) a parts/lp-card.css (landing věrnostní slevy).

   CO ZŮSTÁVÁ V base.css (a proto se sem nekopíruje):
     - `.vl-wrap` (max-width 1024 + boční padding 32/20 px pod 1024 px,
       oboje `!important`) — držel šířku i dřív, inline `max-width:1440px`
       přebíjel `!important`em stejně jako teď třídu;
     - `body.post-type-archive-product .vl-desktop > .vl-wrap` a `> *`
       (tablet: boční 32 px na obalu, 0 na jeho dětech) — třídové pravidlo
       se specificitou (0,3,1), vyhrává nad vším tady;
     - `.vl-sechead` (sloupec pod 1240 px), `.vl-kury-grid` (proměnná
       `--vl-kury-top`), `.vl-shoprev` (2 sloupce na tabletu),
       `.vl-shoprev-more` (skrytý pod 1024 px), `[data-vl-tabs]
       .vpv-modal-trigger--simple` (knoflík pluginu průvodce).

   Hodnoty NEJSOU z návrhu, ale z computed stylů živé stránky ve třech
   šířkách (tools/css-snap/w5/obchod@{1440,900,390}.json + CDP výpis
   pravidel `[style*=…]`, která na prvky skutečně seděla). Pozor: desktopová
   vrstva je pod 768 px `display:none`, ale její computed hodnoty snímek
   pořád čte — mobilní hodnoty se proto musí zachovat taky.

   Migrace: tools/migrate/28-obchod.py
   =========================================================================== */

/* Sloupcové utility `.vl-shop-col*` jsou od 16. 9. v assets/css/parts/
   shop-advice.css (sdílená sekce průvodce + poradna je používá a načítá se
   i na landing page); výpis je bere odtud. */

/* Zvýraznění v textech souhrnu (dřív 3× opsané `color:…; font-weight:600`). */
/* Tatáž třída nese i čísla v souhrnu hodnocení nad výpisem — ta zůstávají
   tmavá; zelené je jen zvýrazněné číslo v podnadpisu sekce („ušetříte až
   *544 Kč*" / při akci „celkem až *−27 %*"), jako cena po slevě
   (David 16. 9., CDXXXIX). */
.vl-shop-b  { color: #16211c; font-weight: 600; }
.vl-shop-secnote .vl-shop-b { color: #0d8f46; }
.vl-shop-bg { color: #0b7c3d; font-weight: 600; }
/* Podtržení odkazů uvnitř boxů — dvě různá odsazení z návrhu. */
.vl-shop-u3 { text-decoration: underline; text-underline-offset: 3px; }
.vl-shop-u4 { text-decoration: underline; text-underline-offset: 4px; }
/* Ikona v liště tabů; `display:block` ruší baseline mezeru pod SVG. */
.vl-shop-ico { display: block; }

/* --- Obal stránky ----------------------------------------------------------
   Prvky si nechávají i `.vl-wrap`: nese tabletové a mobilní stažení šířky
   a bočního odsazení (viz hlavička souboru). */
.vl-shop-wrap { max-width: 1440px; margin: 0 auto; }

/* --- Hlavička výpisu (nadpis + box souhrnu hodnocení) ---------------------- */
.vl-shop-head { padding: 44px 48px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* `h1, h2, h3 { margin:0; color:#16211c; letter-spacing:-.01em }` z vlasimo.css
   je (0,0,1) — třída ho přebije, ale všechny tři vlastnosti musí být vypsané. */
.vl-shop-title { margin: 0; font-size: 38px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; color: #16211c; }
/* `.vl p { text-align: justify }` platilo i dřív (inline text-align neměl),
   proto se tu text-align schválně nenastavuje. */
.vl-shop-lead { margin: 0; font-size: 16px; color: #3d443e; }

/* Box souhrnu je `<a>` (otevírá modal se zkušenostmi), takže `.vl a`
   (0,1,1) přebíjí holou třídu a `.vl a:hover` by ho přebarvil — inline
   `color:inherit` to dřív držel sám. */
.vl-shop-sum { display: flex; align-items: center; gap: 20px; background: #ffffff; border: 1px solid #e3e0d4; border-radius: 14px; padding: 16px 22px; text-decoration: none; }
.vl a.vl-shop-sum,
.vl a.vl-shop-sum:hover { color: inherit; }
.vl-shop-sum__num { font-size: 32px; font-weight: 600; color: #16211c; line-height: 1; }
.vl-shop-sum__sep { width: 1px; height: 44px; background: #e3e0d4; }
.vl-shop-sum__txt { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #5d6b62; }

/* --- Lišta tabů ------------------------------------------------------------
   Na obalu zůstává inline `--vl-quiz-lead` (překládaný text návěští pro
   `[data-vl-tabs] .vpv-modal-trigger--simple span::before` v base.css) —
   hodnota je obsah, ne konečná množina rozměrů, do CSS nepatří.

   Taby jsou `<a>`: barvu, tučnost a barvu spodní linky přepisuje po
   načtení scroll-spy ve `woocommerce/archive-product.php` inline
   (`t.style.color = …`), takže třída platí jen do prvního `onScroll()`.
   I tak musí sedět — a musí být psaná `.vl a.<třída>`, jinak by výchozí
   stav před spuštěním skriptu vzalo `.vl a { color:#16211c }`. */
/* `top` počítá s lepivou hlavičkou (od 11. 9.): `--hm-hdr` publikuje skript
   podle skutečně viditelné části hlavičky, takže při jejím schování spadne na
   nulu a pás vyjede nahoru. Bez toho se pás schová za hlavičku — přesně to se
   děje na Herbasu, odkud je vzor. */
.vl-shop-tabs { position: sticky; top: var(--hm-hdr, 0px); z-index: 30; background: #fdfcf8; padding-top: 10px; margin: 28px 48px 0; border-bottom: 1px solid #e3e0d4; display: flex; align-items: center; gap: 28px; }
.vl-shop-tab { padding: 0 4px 12px; font-size: 15px; font-weight: 500; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.vl-shop-tab--on { font-weight: 600; border-bottom-color: #0d8f46; }
.vl-shop-tab--ico { display: inline-flex; align-items: center; gap: 8px; }
/* Barva zvlášť a s `:hover` variantou: kdyby ji nesla celá deklarace
   `.vl a.vl-shop-tab:hover` (0,3,1), přebila by u aktivního tabu i zelenou
   spodní linku z `.vl-shop-tab--on` (0,1,0). */
.vl a.vl-shop-tab,
.vl a.vl-shop-tab:hover { color: #5d6b62; }
.vl a.vl-shop-tab--on,
.vl a.vl-shop-tab--on:hover { color: #16211c; }
.vl-shop-tab__tip { background: #ffd21f; color: #16211c; font-size: 10px; font-weight: 700; letter-spacing: .06em; border-radius: 999px; padding: 2px 8px; }
.vl-shop-stock { margin-left: auto; padding-bottom: 12px; font-size: 13px; color: #8a887f; }

/* --- Hlavička sekce (kicker + nadpis · poznámka) ---------------------------
   `scroll-margin-top` je kotva tabů; obě sekce se liší jen odsazením. */
.vl-shop-sec { scroll-margin-top: 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.vl-shop-sec--kury { padding: 40px 48px 0; }
.vl-shop-sec--kosm { padding: 48px 48px 0; }
.vl-shop-kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #0b7c3d; }
/* Řádek si nechává i `.vl-sechead` — base.css ho pod 1240 px překlápí do
   sloupce (`!important`, přebíjelo i inline). */
.vl-shop-sechead { display: flex; align-items: center; gap: 18px; }
.vl-shop-h3 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: #16211c; }
.vl-shop-dot { color: #d5d2c6; font-size: 18px; }
.vl-shop-secnote { font-size: 14px; color: #5d6b62; }

/* --- Mřížky dlaždic --------------------------------------------------------
   Kúry si nechávají `.vl-kury-grid` — nad 1024 px jí base.css zkracuje
   horní odsazení proměnnou `--vl-kury-top` (42 → 17 px). */
.vl-shop-grid { display: grid; gap: 15px; }
.vl-shop-grid--kury { padding: var(--vl-kury-top, 42px) 48px 8px; grid-template-columns: repeat(3, 1fr); }
.vl-shop-grid--kosm { padding: 52px 48px 56px; grid-template-columns: repeat(4, 1fr); }

/* Pruh průvodce výběrem a tmavý pás „kúra × kosmetika" + telefon
   (`.vl-shop-quiz*`, `.vl-shop-mix*`, `.vl-shop-bar*`, `.vl-shop-fine`,
   `.vl-shop-help*`) jsou od 16. 9. komponenta assets/css/parts/shop-advice.css
   — markup parts/shop-advice.php sdílí výpis s landing page s kódem z odkazu.
   Pravidla se přesunula 1:1 včetně bloku ≤1300 (pás pod sebe) a tabletové
   velikosti čísla. */

/* --- Dárkové poukazy ------------------------------------------------------- */
.vl-shop-gc { max-width: 1440px; margin: 0 auto; padding: 48px 48px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.vl-shop-gc__kick { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #0b7c3d; }
.vl-shop-gc__dot { width: 4px; height: 4px; border-radius: 50%; background: #c99a12; }
.vl-shop-gc__title { margin: 14px 0 0; font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: #16211c; }
/* `.vl p { text-align: justify }` (0,1,1) je specifičtější než holá třída —
   hodnota je stejná, ale ať to nedrží náhoda. */
.vl .vl-shop-gc__text { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: #3d443e; max-width: 480px; text-align: justify; }
.vl-shop-gc__vals { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
/* Dlaždice částky: `--btn` jsou tři přepínatelné `<span>` (kurzor ruka),
   bez modifikátoru je odkaz „Vlastní…". Vybranou hodnotu drží `.is-active`,
   kterou přepíná assets/js/vlasimo-cart.js — a hned za to zapisuje tytéž
   barvy inline, takže se stavy nemohou rozejít. */
.vl-shop-vch { border: 1px solid #d5d2c6; background: #ffffff; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: #16211c; }
.vl-shop-vch--btn { cursor: pointer; }
.vl-shop-vch.is-active { border: 2px solid #0d8f46; background: #e4eee6; color: #0b7c3d; }
.vl a.vl-shop-vch,
.vl a.vl-shop-vch:hover { color: #16211c; }
.vl-shop-gc__buy { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.vl-shop-gc__btn { height: 52px; padding: 0 26px; background: #0d8f46; color: #ffffff; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; box-shadow: 0 3px 0 #075c2e; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.vl-shop-gc__arw { font-size: 15px; line-height: 1; }
.vl-shop-gc__note { font-size: 13px; color: #5d6b62; }

/* --- Ohlasy zákazníků (hlavička + mřížka tří karet) -----------------------
   Karty kreslí parts/review-card.php, ten se v téhle vlně nemigruje. */
.vl-shop-revhead { max-width: 1440px; margin: 0 auto; padding: 48px 48px 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.vl-shop-revhead__title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: #16211c; }
.vl-shop-more { font-size: 15px; font-weight: 500; }
.vl a.vl-shop-more,
.vl a.vl-shop-more:hover { color: #0b7c3d; }
.vl-shop-revgrid { max-width: 1440px; margin: 0 auto; padding: 20px 48px 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* --- Modal s věnováním k poukazu -------------------------------------------
   Schválně `data-vl-vmodal`, ne `data-vl-modal` — obecná pravidla modalů by
   ho na mobilu roztáhla přes celou obrazovku (viz komentář v šabloně). */
.vl-shop-vm__bg { position: fixed; inset: 0; z-index: 200; background: rgba(22, 33, 28, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.vl-shop-vm__panel { position: relative; background: #fdfcf8; border-radius: 20px; max-width: 540px; width: 100%; box-shadow: 0 30px 80px rgba(22, 33, 28, .35); padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 16px; }
.vl-shop-vm__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: #16211c; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; }
.vl-shop-vm__title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #16211c; padding-right: 44px; }
.vl-shop-vm__amt { color: #0b7c3d; white-space: nowrap; }
.vl-shop-vm__lbl { font-size: 13px; font-weight: 600; color: #16211c; }
.vl-shop-vm__lblnote { font-weight: 400; color: #8a887f; }
/* Na dotyku vlasimo.css vnucuje polím 16 px `!important` — přebíjelo i inline,
   takže se tím nic nemění. */
.vl-shop-vm__ta { border: 1px solid #d5d2c6; border-radius: 12px; padding: 13px 16px; font-size: 14px; color: #16211c; background: #ffffff; font-family: inherit; resize: vertical; min-height: 52px; outline: none; width: 100%; box-sizing: border-box; }
.vl-shop-vm__btn { height: 54px; background: #0d8f46; color: #ffffff; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 16px; font-weight: 600; box-shadow: 0 4px 0 #075c2e; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.vl-shop-vm__arw { font-size: 16px; line-height: 1; }
.vl-shop-vm__err { font-size: 13px; color: #b3261e; text-align: center; }

/* ===== ≤1240 — hlavička sekce ==============================================
   Přesun z vlasimo-base.css (`.vl-sechead > span[style*="color:#d5d2c6"]`
   a `… span[style*="color:#5d6b62"]`). Sloupcové překlopení samotného
   `.vl-sechead` zůstává v base.css — nevisí na inline stylu. */
@media (max-width: 1240px) {
	.vl-shop-dot { display: none; }
	.vl-shop-secnote { max-width: 46ch; }
}

/* ===== ≤1024 (tablet i mobil) ==============================================
   Desktopová vrstva je pod 768 px `display:none`, ale snímek computed stylů
   ji čte dál — tahle dvě pravidla proto musí platit i na 390 px, přesně jak
   je dřív dávala `.vl-desktop [style*="padding:44px 48px"]` (pozor: shorthand
   `44px 32px` přepisoval i spodní nulu na 44 px) a `.vl-desktop
   [style*="font-size:30px"]`. Boční 32 px na tabletu stejně vynuluje
   `…> .vl-wrap > *` z base.css, na 390 px zůstávají. */
@media (max-width: 1024px) {
	.vl-shop-head { padding: 44px 32px; }
	.vl-shop-h3,
	.vl-shop-gc__title { font-size: 24px; }
}

/* ===== Tablet 769–1024 =====================================================
   Šířku obalů (1024 px) i jejich boční odsazení řeší `.vl-wrap`
   a `body.post-type-archive-product .vl-desktop > .vl-wrap` v base.css,
   proto tu nejsou. Zůstávají jen svislá odsazení a typografická škála. */
@media (min-width: 769px) and (max-width: 1024px) {
	.vl-shop-title { font-size: 30px; }
	.vl-shop-sum__num { font-size: 26px; }
	.vl-shop-sec--kury { padding: 40px 32px 0; }
	.vl-shop-sec--kosm { padding: 32px 48px 0; }
	.vl-shop-gc { padding: 32px 48px 36px; gap: 32px; }
	.vl-shop-revhead__title { font-size: 25px; }
}

/* ===== Mobil ≤768 ==========================================================
   Prázdné schválně: výpis má vlastní markupovou vrstvu (parts/shop-mobile.php
   uvnitř `.vl-mobile`) a desktopová vrstva se pod 768 px nekreslí. Jediná
   pravidla, která na její inline styly na 390 px mířila, jsou v blocích
   ≤1024, ≤1240 a ≤1300 výš — do samostatného mobilního bloku nepatří,
   protože platí i na tabletu. */