:root{
    --umbra-900:#1b1611;
    --umbra-850:#211b15;
    --umbra-800:#241e18;
    --umbra-700:#39301f;
    --okr:#e3ba76;
    --okr-dim:#c89f5c;
    --okr-deep:#6b4119;
    --oliva:#b8be7f;
    --cream:#f1ead9;
    --ink:#271f17;
    --paper:#f8f3ea;
    --paper-dim:rgba(248,243,234,.74);
    --paper-faint:rgba(248,243,234,.46);
    --container:1440px;
    --radius:6px;
    --font-heading:"Roboto Slab",Georgia,serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--umbra-900);color:var(--paper);font-family:"Inter",Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;}
  img{display:block;max-width:100%;height:auto;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3{font-family:var(--font-heading);font-weight:600;margin:0;}
  p{margin:0;}
  h1,h2,h3,p,blockquote,li{text-wrap:pretty;}
  button{font-family:inherit;}
  .wrap{max-width:var(--container);margin:0 auto;padding:0 70px;}
  .center{text-align:center;}

  /* ---------- logo mark ---------- */
  .logo-mark{display:inline-flex;align-items:center;gap:10px;color:var(--paper);}
  .logo-mark svg{display:block;height:44px;width:auto;}
  .logo-mark .lm-corner{stroke:currentColor;stroke-width:2;fill:none;}
  .logo-mark .lm-word{font-family:"Roboto Slab",serif;font-weight:700;font-size:15px;letter-spacing:.02em;fill:currentColor;}

  /* ================= HLAVIČKA v2 — začátek přenositelného CSS blok ================= */
  .site-header{position:sticky;top:0;left:0;right:0;z-index:50;background:var(--umbra-900);border-bottom:1px solid rgba(248,243,234,.08);box-shadow:none;transition:box-shadow .25s ease,border-color .25s ease;}
  .site-header.is-scrolled{box-shadow:0 10px 24px -16px rgba(0,0,0,.6);border-bottom-color:rgba(248,243,234,.16);}
  .hdr-row{display:flex;align-items:center;gap:40px;height:80px;}
  .hdr-nav{display:flex;gap:26px;flex:1 1 auto;}
  .hdr-nav a{position:relative;font-size:14px;letter-spacing:.03em;color:var(--paper-dim);transition:color .15s;white-space:nowrap;padding-bottom:5px;}
  .hdr-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--okr);transition:right .22s ease;}
  .hdr-nav a:hover,.hdr-nav a.is-active{color:var(--okr);}
  .hdr-nav a:hover::after,.hdr-nav a.is-active::after{right:0;}
  .hdr-tools{display:flex;align-items:center;gap:22px;flex:0 0 auto;}
  .icon-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--paper-dim);cursor:pointer;font-size:14px;letter-spacing:.03em;padding:0;transition:color .15s;}
  .icon-btn:hover{color:var(--okr);}
  .icon-btn svg{width:18px;height:18px;flex:0 0 auto;}
  .cart-ico-wrap{position:relative;display:inline-flex;}
  .cart-count{position:absolute;top:-7px;right:-9px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--okr);color:var(--ink);font-size:10px;font-weight:700;line-height:15px;text-align:center;}
  .menu-toggle-input{position:absolute;opacity:0;width:1px;height:1px;}
  .burger-label{display:none;}
  .hdr-mobile-panel{display:none;}

  @media (max-width:980px){
    .hdr-nav{display:none;}
    .hdr-row{height:68px;gap:16px;}
    .icon-btn span.lbl{display:none;}
    .burger-label{display:flex;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;cursor:pointer;}
    .burger-label span{display:block;height:2px;background:var(--paper);border-radius:1px;}
    .hdr-mobile-panel{
      display:block;max-height:0;overflow:hidden;visibility:hidden;background:var(--umbra-850);
      transition:max-height .3s ease,visibility 0s linear .3s;border-bottom:1px solid rgba(248,243,234,.08);
    }
    .menu-toggle-input:checked ~ .hdr-mobile-panel{max-height:420px;visibility:visible;transition:max-height .3s ease,visibility 0s linear 0s;}
    .hdr-mobile-panel nav{display:flex;flex-direction:column;padding:8px 20px 20px;}
    .hdr-mobile-panel a{padding:13px 0;font-size:15px;letter-spacing:.03em;color:var(--paper-dim);border-bottom:1px solid rgba(248,243,234,.06);}
    .hdr-mobile-panel a:last-child{border-bottom:none;}
  }
  /* ================= /HLAVIČKA v2 ================= */

    /* ---------- buttons ---------- */
  .btn{display:inline-block;padding:14px 30px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;transition:transform .15s ease,background .15s ease;border:none;cursor:pointer;}
  .btn-light{background:var(--paper);color:var(--ink);}
  .btn-light:hover{background:var(--okr);transform:translateY(-1px);}
  .btn-outline{border:1px solid var(--paper-faint);color:var(--paper);background:none;}
  .btn-outline:hover{border-color:var(--okr);color:var(--okr);}

  /* ---------- hledáček: sdílená komponenta ---------- */
  .vf-corner{position:absolute;width:18px;height:18px;z-index:2;opacity:0;transition:opacity .25s ease;pointer-events:none;}
  .vf-corner.tl{top:10px;left:10px;border-top:2px solid var(--okr);border-left:2px solid var(--okr);}
  .vf-corner.tr{top:10px;right:10px;border-top:2px solid var(--okr);border-right:2px solid var(--okr);}
  .vf-corner.bl{bottom:10px;left:10px;border-bottom:2px solid var(--okr);border-left:2px solid var(--okr);}
  .vf-corner.br{bottom:10px;right:10px;border-bottom:2px solid var(--okr);border-right:2px solid var(--okr);}

  /* ---------- section shell ---------- */
  section{padding:88px 0;}
  .section-title{font-size:30px;line-height:1.3;font-family:var(--font-heading);color:var(--paper);}
  .eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--okr);font-weight:600;margin-bottom:14px;display:block;}

  /* ================= BREADCRUMBS ================= */
  .crumbs{padding-top:26px;}
  .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--paper-faint);}
  .crumbs a{color:var(--paper-dim);}
  .crumbs a:hover{color:var(--okr);}
  .crumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--paper-faint);}
  .crumbs li:last-child{color:var(--paper);}

  /* ================= BLOK PRODUKTU — u3: fotka/scéna 60 % vlevo, panel nákupu vpravo — STEJNÁ VÝŠKA ================= */
  /* align-items:stretch (ne start jako v d1/d3): oba sloupce dostanou stejnou výšku řádku (danou tím
     delším — typicky panelem). Panel vyplňuje svou výšku obsahem (display:flex + justify-content:
     space-between, přebytek jde jako vzduch MEZI horní a patní blok). Fotka/scéna svou stranu řeší
     JINAK — viz komentář u `.pd-photo` a `.d3-scene` níž („u3 oprava 3"): oprava z kola 3 po
     vlastníkovi, protože tahle verze ještě nechávala pod fotkou prázdnou mezeru (fotka má pevný
     aspect-ratio, který se stretchem nenatáhne — viz ZDUVODNENI.md „Opravy 3 po vlastníkovi"). */
  .product{padding-top:40px;}
  .product-grid{display:grid;grid-template-columns:minmax(0,60%) 1fr;gap:54px;align-items:stretch;}

  /* u3 oprava 3 (vlastník): fotka a nákupní panel musí mít shodnou horní I spodní hranu na 1440 i 1280.
     Panelu nejde brát obsah (do košíku musí zůstat čitelné), takže se neřeší „ustřihnutím" panelu —
     řeší se tím, že .pd-photo vyplní CELOU výšku stretchnutého sloupce (height:100%, dáno grid
     align-items:stretch na .product-grid) a samotný <img> uvnitř zůstává celý, nezořezaný
     (object-fit:contain, ne cover) — žádný crop, jen se na širších poměrech (kde by panel byl
     nižší než fotka) nebo užších (kde je panel vyšší) doplní neviditelný podklad ve stejné barvě
     jako stránka, takže to nepůsobí jako díra. Mobil (≤980px, 1 sloupec) se vrací k původnímu
     aspect-ratio:3/2 boxu — tam se nic nestretchuje, zarovnání není potřeba. */
  .pd-photo{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-width:900px;border-radius:var(--radius);cursor:zoom-in;background:var(--umbra-900);}
  .pd-photo[hidden]{display:none;}
  .pd-photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:var(--radius);box-shadow:0 30px 60px -28px rgba(0,0,0,.6);transition:transform .45s ease;}
  .pd-photo:hover img,.pd-photo:focus-visible img{transform:scale(1.035);}
  .pd-photo:hover .vf-corner,.pd-photo:focus-visible .vf-corner{opacity:1;}
  .pd-photo .vf-corner{width:26px;height:26px;}
  .pd-zoom-hint{position:absolute;right:16px;bottom:16px;background:rgba(18,14,10,.82);color:var(--paper);font-size:12px;letter-spacing:.04em;padding:8px 13px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease;display:flex;align-items:center;gap:6px;pointer-events:none;}
  .pd-zoom-hint svg{width:14px;height:14px;}
  .pd-photo:hover .pd-zoom-hint,.pd-photo:focus-visible .pd-zoom-hint{opacity:1;transform:translateY(0);}

  /* ---------- d3: přepínač Fotka / Na stěně + scéna ---------- */
  /* u3 oprava po oponentovi: přepínač NENÍ uvnitř .pd-left (to posouvalo horní hranu fotky o 64 px
     níž než horní hranu .pd-panel) — je teď samostatný řádek NAD .product-grid, společný pro oba
     sloupce, takže .pd-photo i .pd-panel začínají na stejné souřadnici. */
  .pd-left{height:100%;}
  .pd-mode-toggle{display:inline-flex;gap:4px;margin-bottom:18px;background:var(--umbra-850);border:1px solid rgba(241,234,217,.1);border-radius:999px;padding:5px;}
  .pd-mode-toggle button{border:none;background:none;color:var(--paper-dim);font-size:13px;font-weight:600;letter-spacing:.03em;padding:9px 20px;border-radius:999px;cursor:pointer;transition:background .18s ease,color .18s ease;}
  .pd-mode-toggle button.is-active{background:var(--okr);color:var(--ink);}
  .pd-mode-toggle button:hover:not(.is-active){color:var(--paper);}

  /* u3 oprava 3: výška scény = 100 % .pd-left (grid stretch), ne vlastní clamp — scéna tak drží
     stejnou horní i spodní hranu jako nákupní panel stejně jako fotka výš. JS čte skutečnou výšku
     přes getBoundingClientRect(), takže souřadnicový systém postavy/plátna funguje beze změny.
     Mobil (≤980px, 1 sloupec) má vlastní pravidlo níž (zpět na clamp/aspect-ratio). */
  .d3-scene{position:relative;width:100%;max-width:900px;height:100%;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.4);}
  .d3-scene[hidden]{display:none;}
  .d3-wall{position:absolute;inset:0;background:linear-gradient(165deg,#f5efe2 0%,#efe7d4 55%,#e7dec8 100%);}
  .d3-wall::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 30% 15%, rgba(255,255,255,.55), transparent 65%);pointer-events:none;}
  .d3-baseboard{position:absolute;left:0;right:0;bottom:11%;height:2px;background:linear-gradient(to right,transparent,rgba(39,31,23,.14) 18%,rgba(39,31,23,.14) 82%,transparent);}

  .d3-stage{position:absolute;left:8%;right:8%;bottom:11%;display:flex;align-items:flex-end;gap:clamp(28px,4vw,56px);}
  .d3-figure{position:relative;flex:none;}
  .d3-figure svg{display:block;transition:height .5s cubic-bezier(.22,1,.36,.98),width .5s cubic-bezier(.22,1,.36,.98);}
  /* "180 cm" je plovoucí popisek pod chodidly — position:absolute, aby nepřidával výšku do figure
     (jinak by se "podlaha" postavy a souřadnice plátna rozešly o výšku textu, past z oponentova nálezu) */
  .d3-figure-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:8px;font-size:11.5px;letter-spacing:.05em;color:var(--ink);opacity:.55;white-space:nowrap;}

  /* canvas-slot se roztáhne (align-self:stretch) přesně na výšku figury (0 cm dole, 180 cm nahoře) —
     plátno a popisek jsou uvnitř position:absolute a JS je zavěsí tak, aby STŘED plátna byl ve
     výšce očí (150 cm), ne na podlaze */
  .d3-canvas-slot{flex:1;min-width:0;position:relative;align-self:stretch;}
  .d3-canvas{position:absolute;left:50%;transform:translateX(-50%);overflow:hidden;background:#0d0a07;box-shadow:0 18px 38px -16px rgba(39,31,23,.5),0 1px 0 rgba(255,255,255,.5) inset;transition:width .55s cubic-bezier(.22,1,.36,.98),height .55s cubic-bezier(.22,1,.36,.98),bottom .55s cubic-bezier(.22,1,.36,.98);}
  .d3-canvas img{width:100%;height:100%;object-fit:cover;display:block;}
  .d3-canvas-size{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.04em;color:var(--ink);opacity:.62;white-space:nowrap;transition:bottom .55s cubic-bezier(.22,1,.36,.98);}

  /* u3 oprava 3: mírně zúžené odstupy (dřív 34/32 pad, 22/24/26/22 margins, gap 28) — snižuje
     přirozenou výšku panelu, aby byla blíž přirozené výšce fotky a na 1440/1280 nevznikal zbytečně
     velký neviditelný dorovnávací prostor za fotkou (viz .pd-photo výš). */
  .pd-panel{position:sticky;top:104px;background:var(--umbra-850);border:1px solid rgba(241,234,217,.08);border-radius:14px;padding:30px 32px 26px;box-shadow:0 24px 50px -26px rgba(0,0,0,.55);display:flex;flex-direction:column;justify-content:space-between;gap:20px;}
  .pd-panel-top{display:flex;flex-direction:column;}
  .pd-name{font-size:28px;line-height:1.28;color:var(--paper);margin-bottom:6px;}
  .pd-kod{font-size:12.5px;color:var(--paper-faint);letter-spacing:.03em;margin-bottom:16px;display:block;}
  .pd-price{font-family:var(--font-heading);font-weight:700;font-size:34px;color:var(--okr);line-height:1;margin-bottom:18px;}
  .pd-price sup{font-size:16px;font-weight:600;color:var(--paper-faint);margin-left:9px;text-decoration:line-through;display:none;}

  .pd-label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:11px;}
  .pd-sizes{display:flex;gap:10px;margin-bottom:20px;}
  .pd-sizes input{position:absolute;opacity:0;width:1px;height:1px;}
  .pd-sizes label{flex:1 1 0;text-align:center;font-size:14.5px;font-weight:700;color:var(--paper);border:1.5px solid rgba(248,243,234,.22);border-radius:10px;padding:13px 10px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
  .pd-sizes input:checked + label{border-color:var(--okr);background:var(--okr);color:var(--ink);}
  /* tri a vice voleb: text na jednom radku (uzsi vnitrni odsazeni, vyska stejna jako u dvou voleb) */
  .pd-sizes--vice{gap:8px;}
  .pd-sizes--vice label{white-space:nowrap;padding-left:3px;padding-right:3px;}

  .pd-qty-row{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
  .pd-qty{display:inline-flex;align-items:center;border:1.5px solid rgba(248,243,234,.22);border-radius:999px;overflow:hidden;}
  .pd-qty button{width:38px;height:38px;background:none;border:none;color:var(--paper);font-size:17px;cursor:pointer;transition:background .15s;}
  .pd-qty button:hover{background:rgba(248,243,234,.08);}
  .pd-qty span{width:34px;text-align:center;font-size:15px;color:var(--paper);}

  .pd-buy{display:block;width:100%;background:var(--okr);color:var(--ink);border:none;border-radius:999px;padding:17px 20px;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,transform .15s;}
  .pd-buy:hover{background:var(--okr-dim);transform:translateY(-1px);}

  .pd-meta{padding-top:18px;border-top:1px solid rgba(248,243,234,.1);display:grid;gap:11px;}
  .pd-meta-row{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--paper-dim);line-height:1.4;}
  .pd-meta-row svg{width:18px;height:18px;flex:0 0 auto;color:var(--okr);margin-top:1px;}
  .pd-meta-row b{color:var(--paper);font-weight:600;}

  /* ================= DVA SLOUPCE — u3: "Jak to vzniklo" vlevo, "Parametry" (tabulka) vpravo ================= */
  /* u3 oprava po oponentovi: align-items:stretch (ne start) — pravý sloupec (tabulka, delší obsah)
     určuje výšku řádku, levý sloupec (.pd-emoce) se na ni roztáhne. .pd-emoce je teď sám flex sloupec
     s justify-content:space-between: text nahoře, rámeček se srdcem dole, takže se mezi nimi rozloží
     PŘESNĚ ten prostor, který dřív zůstával jako ~550 px prázdná tma — gap:28px je jen podlaha pro
     mobil, kde se sloupce nestretchují (1 sloupec, viz @media 980px). */
  .pd-cols{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch;}
  .pd-col h2{font-size:22px;color:var(--paper);margin-bottom:22px;}

  /* u3 oprava 3 (vlastník): dřív justify-content:space-between nacpalo VEŠKERÝ přebytečný prostor
     (až 190 px) jako jednu mezeru MEZI citace a rámeček — přesně ta „nesmyslná mezera". Teď je
     gap pevných 28 px (strop ze zadání je ≤32 px) a přebytek jde do rámečku samotného (flex:1 na
     .pd-ekol níž) — roste on, ne prázdnota před ním. */
  .pd-emoce{display:flex;flex-direction:column;justify-content:flex-start;gap:28px;}
  .pd-emoce-text{display:flex;flex-direction:column;}
  .pd-emoce blockquote{margin:0 0 20px;font-family:var(--font-heading);font-style:italic;font-weight:500;font-size:19px;line-height:1.56;color:var(--paper);}
  .pd-emoce blockquote:last-of-type{margin-bottom:26px;}
  .pd-read{display:inline-block;font-size:13.5px;letter-spacing:.03em;color:var(--okr);text-decoration:underline;text-underline-offset:4px;}
  .pd-read:hover{color:var(--okr-dim);}

  /* ---------- Parametry: tabulka název/hodnota (vlastnosti = i filtr kategorie) ---------- */
  .pd-table{width:100%;border-collapse:collapse;}
  .pd-table tr{border-bottom:1px solid rgba(248,243,234,.09);}
  .pd-table tr:first-child{border-top:1px solid rgba(248,243,234,.09);}
  .pd-table td{padding:14px 0;vertical-align:top;font-size:14.5px;line-height:1.5;}
  /* Poslední dávka oprav (bod 5), ověřená příčina (porovnán živý outerHTML proti návrhu):
     návrh má v textu popisků natvrdo "&nbsp;" (např. "Dominantní&nbsp;barva") — díky tomu
     je fráze NEROZBITELNÁ a table-layout:auto prohlížeče jí kvůli tomu sám "vybojuje"
     širší sloupec (naměřeno 150,6px/43 % místo deklarovaných 38 %=133px), ZATÍMCO
     identický text/font/CSS na webu (admin text BEZ nbsp) se volně zalomí na dva řádky
     (DOMINANTNÍ / BARVA) — to posune výšku celé .pd-cols-wrap o -28px proti návrhu
     (tester-9a nález). Administrátorský text (lencis_volba(), termín atributu, popisek
     řádku parametrů) nbsp mít nebude a mít nemusí — vynutit nezalomení CSS
     (white-space:nowrap), ne obsahem/nbsp. Auto layout (beze změny) column pak sám
     doroste na šířku potřebnou pro nejdelší popisek, přesně jako u návrhu. */
  .pd-table td.pd-table-k{color:var(--paper-faint);font-size:12px;letter-spacing:.06em;text-transform:uppercase;width:38%;padding-right:18px;white-space:nowrap;}
  .pd-table td.pd-table-v{color:var(--paper);font-weight:500;}
  .pd-color-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:9px;vertical-align:-1px;border:1px solid rgba(248,243,234,.3);}
  .pd-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em;padding:5px 12px;border-radius:999px;background:rgba(227,186,118,.14);color:var(--okr);border:1px solid rgba(227,186,118,.4);}

  /* ---------- "Nákupem pomůžete české přírodě" — zvýrazněný rámeček, teď VĚTŠÍ a vycentrovaný ---------- */
  /* u3 oprava 3: flex:1 (dřív 0 0 auto) — rámeček vyplní celý zbylý prostor sloupce .pd-emoce (ten
     je stretchnutý na výšku delší Parametry tabulky), takže přebytek je VIDĚT jako větší rámeček,
     ne jako mezera nad ním. align-items:center vycentruje ikonu+text uprostřed té větší plochy.
     Písmo/ikona/odsazení zvětšené, ať to působí jako záměr, ne jako nafouknutý box. */
  .pd-ekol{background:var(--cream);border:1.5px solid var(--okr-dim);border-radius:16px;padding:30px 36px;display:flex;align-items:center;gap:22px;flex:1 1 auto;}
  .pd-ekol svg{width:38px;height:38px;flex:0 0 auto;color:#b23b3b;}
  .pd-ekol b{display:block;color:var(--okr-deep);font-weight:700;font-size:20px;margin-bottom:10px;}
  .pd-ekol p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink);}

  /* ================= Z KOLEKCE — karta 1:1 z ra/index.html, u3: 6 dlaždic, 2 řady po 3 ================= */
  .q4-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;}
  .q4-card{display:flex;flex-direction:column;background:var(--umbra-850);border:1px solid rgba(241,234,217,.08);border-radius:12px;overflow:hidden;box-shadow:0 22px 44px -24px rgba(0,0,0,.55);}
  .q4-foto{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;cursor:pointer;background:var(--umbra-800);}
  .q4-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
  .q4-foto:hover img,.q4-foto:focus-visible img{transform:scale(1.045);}
  .q4-foto:hover .vf-corner,.q4-foto:focus-visible .vf-corner{opacity:1;}
  .q4-detail-btn{position:absolute;left:50%;bottom:20px;transform:translate(-50%,8px);z-index:3;padding:11px 22px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none;}
  .q4-foto:hover .q4-detail-btn,.q4-foto:focus-visible .q4-detail-btn{opacity:1;transform:translate(-50%,0);}

  .q4-bar{background:var(--cream);padding:17px 18px 19px;}
  .q4-name{display:block;font-family:var(--font-heading);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:13px;}
  .q4-row{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;white-space:nowrap;}
  .q4-sizes{display:flex;gap:5px;flex:0 0 auto;}
  .q4-sizes input{position:absolute;opacity:0;width:1px;height:1px;}
  .q4-sizes label{display:inline-block;font-size:11px;font-weight:700;color:var(--ink);border:1.5px solid rgba(39,31,23,.22);border-radius:999px;padding:5px 9px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;white-space:nowrap;}
  .q4-sizes input:checked + label{border-color:var(--okr-deep);background:var(--okr-deep);color:var(--paper);}
  .q4-price-cart{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto;}
  .q4-row--vice{flex-wrap:wrap;row-gap:12px;}
  .q4-row--vice .q4-sizes{flex:1 1 100%;flex-wrap:wrap;row-gap:6px;}
  .q4-price{font-family:var(--font-heading);font-weight:700;font-size:17px;color:var(--okr-deep);white-space:nowrap;}
  .q4-cart{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;background:var(--okr-deep);border:none;color:var(--paper);border-radius:50%;padding:0;cursor:pointer;transition:background .15s;}
  .q4-cart:hover{background:#4e2f12;}
  .q4-cart svg{width:14px;height:14px;flex:0 0 auto;}

  /* ================= LIGHTBOX ================= */
  .lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:90;padding:32px;}
  .lightbox.open{display:flex;}
  .lightbox::before{content:"";position:absolute;inset:0;background:rgba(14,11,8,.86);backdrop-filter:blur(5px);}
  .lightbox-panel{position:relative;z-index:1;max-width:min(94vw,1200px);max-height:88vh;}
  .lightbox-panel img{max-width:100%;max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:4px;display:block;box-shadow:0 40px 90px -20px rgba(0,0,0,.7);}
  .lightbox-close{position:absolute;top:-18px;right:-18px;width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--ink);border:none;font-size:16px;cursor:pointer;z-index:2;transition:background .15s;}
  .lightbox-close:hover{background:var(--okr);}

  /* ================= PATKA v2 — začátek přenositelného CSS blok ================= */
  .site-footer{padding:60px 0 28px;background:var(--umbra-900);border-top:1px solid rgba(248,243,234,.08);}
  .foot-top{display:grid;grid-template-columns:1.05fr .9fr 1fr;gap:48px;align-items:start;padding-bottom:36px;margin-bottom:24px;border-bottom:1px solid rgba(248,243,234,.08);}
  .foot-brand{max-width:340px;}
  .foot-brand .logo-mark{margin-bottom:16px;}
  .foot-line{font-size:14px;color:var(--paper-faint);line-height:1.6;text-wrap:balance;}
  .foot-social{display:flex;gap:10px;margin-top:18px;}
  .foot-social-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid rgba(248,243,234,.16);color:var(--paper-dim);transition:border-color .15s,color .15s;}
  .foot-social-ico svg{width:16px;height:16px;flex:0 0 auto;}
  .foot-social-ico:hover{border-color:var(--okr);color:var(--okr);}
  .foot-nav{display:grid;grid-template-columns:repeat(2,auto);grid-auto-flow:column;grid-template-rows:repeat(5,auto);gap:11px 28px;}
  .foot-nav a{font-size:13px;letter-spacing:.03em;color:var(--paper-dim);white-space:nowrap;}
  .foot-nav a:hover{color:var(--okr);}
  .foot-news p{font-size:13px;color:var(--paper-faint);margin-bottom:14px;max-width:260px;line-height:1.5;text-wrap:balance;}
  .news-form{display:flex;gap:8px;}
  .news-form input{flex:1 1 auto;min-width:0;background:var(--umbra-850);border:1px solid rgba(248,243,234,.14);border-radius:999px;padding:10px 16px;color:var(--paper);font-size:13px;}
  .news-form input::placeholder{color:var(--paper-faint);}
  .news-form button{background:var(--okr);border:none;color:var(--ink);border-radius:999px;padding:10px 18px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap;}
  .news-form button:hover{background:var(--okr-dim);}
  .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--paper-faint);}
  .foot-bottom-nav{display:flex;gap:20px;}
  .foot-bottom-nav a{color:var(--paper-faint);}
  .foot-bottom-nav a:hover{color:var(--okr);}
  @media (max-width:980px){
    .foot-top{grid-template-columns:1fr 1fr;}
    .foot-news{grid-column:1/-1;}
  }
  @media (max-width:760px){
    .foot-top{grid-template-columns:1fr;text-align:center;gap:36px;}
    .foot-social{justify-content:center;}
    .foot-nav{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none;justify-content:center;}
    .foot-bottom{flex-direction:column;text-align:center;}
  }
  /* ================= /PATKA v2 ================= */

  /* ================= HLEDÁNÍ v2 — modál, začátek přenositelného CSS blok ================= */
  .src-overlay{position:fixed;inset:0;z-index:300;background:rgba(14,10,7,.86);display:flex;align-items:flex-start;justify-content:center;padding:70px 24px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s;}
  .src-overlay.is-open{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s linear 0s;}
  .src-modal{width:100%;max-width:760px;max-height:calc(100vh - 140px);background:var(--umbra-850);border-radius:14px;box-shadow:0 50px 90px -30px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;transform:translateY(-14px);transition:transform .22s ease;}
  .src-overlay.is-open .src-modal{transform:translateY(0);}
  .src-top{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid rgba(248,243,234,.1);flex:0 0 auto;}
  .src-top svg{width:20px;height:20px;color:var(--paper-dim);flex:0 0 auto;}
  .src-input{flex:1 1 auto;min-width:0;background:none;border:none;color:var(--paper);font-size:17px;font-family:inherit;outline:none;}
  .src-input::placeholder{color:var(--paper-faint);}
  .src-close{background:none;border:none;color:var(--paper-dim);font-size:24px;line-height:1;cursor:pointer;padding:2px 4px;flex:0 0 auto;}
  .src-close:hover{color:var(--okr);}
  .src-suggest{padding:4px 24px 4px;border-bottom:1px solid rgba(248,243,234,.08);flex:0 0 auto;}
  .src-suggest:empty{display:none;border-bottom:none;}
  .src-suggest button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--paper-dim);font-size:14px;padding:9px 0;cursor:pointer;font-family:inherit;}
  .src-suggest button:hover,.src-suggest button:focus-visible{color:var(--okr);}
  .src-body{overflow-y:auto;padding:20px 24px 28px;flex:1 1 auto;}
  .src-group{margin-bottom:26px;}
  .src-group:last-child{margin-bottom:0;}
  .src-group-title{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--okr);font-weight:700;margin-bottom:14px;}
  .src-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .src-tile{display:block;}
  .src-tile-photo{display:block;position:relative;aspect-ratio:3/2;border-radius:6px;overflow:hidden;background:var(--umbra-900);}
  .src-tile-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .src-tile-name{display:block;margin-top:8px;font-family:var(--font-heading);font-weight:600;font-size:13.5px;color:var(--paper);line-height:1.3;}
  .src-tile-price{display:block;margin-top:3px;font-size:12px;color:var(--okr);}
  .src-row{display:flex;align-items:center;gap:14px;padding:8px 0;}
  .src-row-photo{display:block;flex:0 0 auto;width:58px;height:40px;border-radius:4px;overflow:hidden;background:var(--umbra-900);}
  .src-row-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .src-row-name{font-size:14.5px;color:var(--paper);font-weight:600;}
  .src-row-meta{font-size:12.5px;color:var(--paper-faint);margin-top:2px;}
  .src-more{margin-top:14px;}
  .src-more button{background:none;border:1px solid rgba(248,243,234,.18);color:var(--paper-dim);border-radius:999px;padding:9px 18px;font-size:12.5px;cursor:pointer;font-family:inherit;}
  .src-more button:hover{border-color:var(--okr);color:var(--okr);}
  .src-empty{text-align:center;padding:26px 10px 6px;}
  .src-empty p{color:var(--paper-dim);font-size:15px;margin-bottom:6px;}
  .src-empty .src-empty-lbl{color:var(--paper-faint);font-size:13px;margin-bottom:16px;}
  .src-empty-sugg{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
  .src-empty-sugg button{background:none;border:1px solid rgba(248,243,234,.18);color:var(--paper-dim);border-radius:999px;padding:8px 16px;font-size:13px;cursor:pointer;font-family:inherit;}
  .src-empty-sugg button:hover{border-color:var(--okr);color:var(--okr);}
  @media (max-width:760px){
    .src-overlay{padding:0;}
    .src-modal{max-width:none;max-height:none;height:100%;border-radius:0;}
    .src-grid{grid-template-columns:repeat(2,1fr);}
  }
  /* ================= /HLEDÁNÍ v2 ================= */

    /* ---------- responsive ---------- */
  @media (max-width:1180px){
    .q4-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:980px){
    .pd-panel{height:auto;}
  }
  @media (max-width:980px){
    .wrap{padding:0 32px;}
    section{padding:64px 0;}
    .product-grid{grid-template-columns:1fr;gap:34px;}
    .pd-panel{position:static;}
    .pd-cols{grid-template-columns:1fr;gap:40px;}
    /* u3 oprava 3: jeden sloupec = žádný grid-stretch mezi fotkou a panelem, takže height:100%
       (potřebné jen pro zarovnání na desktopu) tady nemá o co se opřít — vrátit na vlastní
       aspect-ratio box, jako před opravou. */
    .pd-left{height:auto;}
    /* fotka se neorezava: box se rovna fotce (na sirku 3:2 jako v navrhu, na vysku vyssi), contain pro jistotu */
    .pd-photo{height:auto;aspect-ratio:auto;background:none;}
    .pd-photo img{width:100%;height:auto;max-height:80vh;object-fit:contain;}
    .d3-scene{height:auto;aspect-ratio:3/2;}
  }
  @media (max-width:760px){
    .wrap{padding:0 20px;}
    .pd-name{font-size:24px;}
    .pd-price{font-size:28px;}
    /* past z h3: pevná px výška scény na úzkém viewportu dělá nepřirozeně úzkou vysokou krabici —
       na mobilu scénu přepnout na aspect-ratio, výška se dopočítá ze šířky */
    .d3-scene{height:auto;aspect-ratio:4/5;}
    .d3-stage{gap:16px;left:6%;right:6%;}
    .q4-grid{grid-template-columns:1fr 1fr;gap:16px;}
    .foot-brand{text-align:center;max-width:100%;}
    .foot-brand .logo-mark{justify-content:center;}
    .foot-nav{align-items:center;}
    .foot-news{width:100%;}
  }
  @media (max-width:560px){
    .q4-grid{grid-template-columns:1fr;}
  }