/* =========================================================================
   V PRESU – homepage
   Layout a rozměry odpovídají Figma návrhu „home-desktop“ (1920 × 6609).
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* Reset                                                               */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

body {
  min-height: 100vh;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Podtržení odkazů sedí 4 px pod účařím – jedna hodnota pro celý web
   (26. 10. 2026; předtím se po komponentách lišila 3, 4 i 5 px). */
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }

blockquote { quotes: none; }

/* Klikatelné prvky: žádný rámeček po kliknutí ani po tabu a žádné šedé
   zvýraznění při ťuknutí na mobilu. -webkit-tap-highlight-color se dědí,
   takže by stačilo jednou na <html>; vypsané prvky jsou tu proto, aby
   bylo na první pohled vidět, čeho se pravidlo týká. */
a, button, input, select, textarea, summary, label,
[tabindex], [role="button"], [role="tab"], [role="radio"], [role="checkbox"] {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

:focus,
:focus-visible { outline: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Text se nedá označit tažením – pro ovládací prvky, kde by se při
   opakovaném klikání modře vybarvoval popisek. Stejná třída je
   i v administraci (admin/css/admin.css). */
.nonselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* Sdílené prvky                                                       */
/* ------------------------------------------------------------------ */

/* Figma měří výšku textových rámů od horní hrany verzálek po účaří
   (text-box-trim). Bez toho je každý textový blok o cca 0,18em vyšší
   a všechny odsazení převzatá z návrhu se posouvají. Tímto sedí 1:1 –
   např. hero H1 96/0,9 na dva řádky = 156 px, benefit 28/1,2 na tři
   řádky = 88 px, tlačítko „VÍCE“ = 74 px, tag receptu = 33 px.        */
.section-title,
.hero__title,
.hero__perex,
.box__title,
.box__perex,
.benefits__lead,
.benefit__text,
.product__name,
.product__volume,
.product__price,
.product__stock,
.product__badge,
.step__number,
.step__text,
.chef__name,
.chef__role,
.chef__quote p,
.review__author,
.review__verified,
.review__date,
.review__text,
.recipe__title,
.pill,
.btn,
.footer__heading,
.footer__text,
.footer__lead,
.footer__ids,
.footer__recipes-link,
.footer__legal a,
.footer__links,
.listing__title,
.listing__perex,
.sort__label,
.sort__select,
.listing__sklad-label,
.buy-watch__text,
.buy-watch__check-label,
.product__price-old,
.story__title,
.blog__title,
.blog__filter-label,
.blog-article__title,
.partner__name,
.partner__address,
.blog__more-link,
.story__text,
.story__heading,
.story__caption,
.phero__ghost,
.phero__title,
.phero__perex,
.phero__reviews-link,
.awards__label,
.buy__price,
.buy__unit,
.why__title,
.why__text,
.nutrition__head,
.note__title,
.note__text,
.score__value,
.score__count,
.histogram__count,
.review-item__name,
.review-item__text,
.review-item__date,
.buy__sleva,
.sada-panel__title,
.sada-panel__stav,
.sada-panel__popis,
.sada-panel__cena {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
  text-align: center;
}

/* ---- Tlačítka ----
   Rámeček i stín kreslí --btn-obrys. Standardně je černý; místo na
   tmavém podkladu (cookie lišta) si ho přepne na bílý, jinak by stín
   na černé nebyl vidět. Nic jiného se u takového tlačítka nemění. */
.btn {
  --btn-obrys: var(--c-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid var(--btn-obrys);
  box-shadow: 4px 4px 0 0 var(--btn-obrys);
  color: var(--c-black);
  text-transform: uppercase;
  text-align: center;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--btn-obrys); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--btn-obrys); }

/* ---- Šipka v tlačítku ----
   Symbol šipky dodal designér přímo z Figmy (Trello „FRONTED Desktop
   vol. III“, 1. 11. 2026: „šipky v primárních buttons jsou pořád blbě,
   dej tam tyhle symboly“) – assets/icons/button-arrow.svg, 57 × 53
   s tahem 6, a ve stejném duchu button-arrow-down.svg a button-add.svg.
   Kreslí se v přirozené velikosti: políčko 57 × 53 = obrázek, nic
   nepřetéká a nic se nedopočítává.

   Do té doby se do tlačítek dával arrow.svg (kresba 40 px v plátně
   45 × 41, tah 6), nafouknutý na 64 × 56 a posunutý o 2 px, aby
   dosáhl na velikost z pokladny – šipka pak měla tah 8,5 px a délku
   57 místo 52. arrow.svg zůstává jen u šipek sliderů, galerií
   a odkazů, kde má vlastní velikosti.

   Jedna velikost pro všechna tlačítka .btn--display (Trello 28. 10.
   2026), na užších displejích se přepíše jen --sipka-sirka (žebřík
   v breakpointech níž). Šipka „Náš příběh“ a „Uložit“ v účtu měly
   vlastní menší velikost – patří sem taky, je to totéž tlačítko. */
.btn--display .btn-sipka,
.checkout-pay__icon,
.buy__submit-icon,
.reviews__cta-icon,
.recipes__cta-icon,
.recenze__cta-icon,
.chyba__ikona,
.kosik-pokladna__ikona,
.thanks__cta-icon,
.prihlasit-odeslat__sipka,
.story__cta-icon,
.ucet__odeslat-icon {
  /* Šířka šipky; výšku dopočítá poměr symbolu. */
  --sipka-sirka: 57px;

  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--sipka-sirka);
  aspect-ratio: 57 / 53;
}
.btn--display .btn-sipka img,
.checkout-pay__icon img,
.buy__submit-icon img,
.reviews__cta-icon img,
.recipes__cta-icon img,
.recenze__cta-icon img,
.chyba__ikona img,
.kosik-pokladna__ikona img,
.thanks__cta-icon img,
.prihlasit-odeslat__sipka img,
.story__cta-icon img,
.ucet__odeslat-icon img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.btn--display {
  background: var(--c-white);
  /* 11,5 + 54 řádek + 14,5 + 2 rámeček = 82 px, jako v návrhu.
     Horní a dolní odsazení schválně není stejné: obraz písma je v této
     velikosti 52,5 px vysoký a v návrhu mu zbývá 11 px nad a 18,5 px
     pod sebou – se stejným paddingem sedí text o 1,5 px níž.          */
  padding: 11.5px 14px 14.5px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
}
.btn--display:hover { background: var(--c-yellow); }

/* Bílé tlačítko – komponenta secondary-button z Figmy (node 2001:376).
   Používá ho pás „Jak vznikají naše oleje“ a na úvodní stránce tlačítka
   pod recepty a recenzemi; .btn--display je o dvě čísla větší.

   Stav komponenty k 1. 11. 2026 (Trello „Maxim Desktop Review“ –
   „zvětšit secondary button“): písmo GT Pressura Bold 22 px s prokladem
   2 %, 15 px nad verzálkami i pod účařím, 14 po stranách, pevná výška
   48 px. Do té doby tu bylo 43 px a písmo 16. Výška je napsána přímo:
   tlačítko je flexbox a na flexbox `text-box-trim` z hromadného pravidla
   neplatí, svislé centrování dá týž výsledek.

   Tlačítka v pokladně („Přidat“, „Použít“) zůstávají na 78 × 43 s písmem
   16 – ve Figmě jsou to instance malého primary-buttonu, ne tahle
   komponenta; pevný rozměr jim dává .checkout-suggest__add níž. */
.btn--secondary {
  height: 48px;
  padding: 0 14px;
  background: var(--c-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.btn--secondary:hover { background: var(--c-yellow); }

.btn--compact {
  background: var(--c-yellow);
  padding: 15px 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-bold);
}
.btn--compact:hover { background: var(--c-white); }

/* ---- Zavírací křížek ----
   Jedna komponenta pro vysouvací menu, dialog přihlášení, košíkový
   panel i nastavení cookies – dřív to byly čtyři skoro stejné sady
   pravidel. Plocha pod prstem, délka a síla čáry se nastavují
   proměnnými, barvu bere z `color`:

     <button class="zavrit …">
       <span class="zavrit__cara zavrit__cara--1"></span>
       <span class="zavrit__cara zavrit__cara--2"></span>
     </button>                                                        */
.zavrit {
  --zavrit-plocha: 44px;
  --zavrit-cara: 22px;
  --zavrit-sila: 3px;
  position: relative;
  width: var(--zavrit-plocha);
  height: var(--zavrit-plocha);
  flex: 0 0 auto;
}
.zavrit__cara {
  position: absolute;
  left: calc(50% - var(--zavrit-cara) / 2);
  top: calc(50% - var(--zavrit-sila) / 2);
  width: var(--zavrit-cara);
  height: var(--zavrit-sila);
  background: currentColor;
}
.zavrit__cara--1 { transform: rotate(45deg); }
.zavrit__cara--2 { transform: rotate(-45deg); }

/* ---- Hodnocení ---- */
.rating { display: flex; align-items: center; gap: 8px; }
.rating img { width: 24px; height: 24px; flex: 0 0 auto; }
.rating--sm img { width: 16px; height: 16px; }

/* ---- Ovládání slideru ----
   Komponenta slider-control (Figma, stav k 1. 11. 2026, Trello „Maxim
   Desktop Review“): šipka je kresba 24 × 25 px s tahem 4 (dřív 35 × 32),
   tečky 8 px a aktivní 16 (dřív 12 / 24), mezery 16 (dřív 24), celek
   40 px vysoký s odsazením 8 / 12. Hero má navíc poloprůhlednou pilulku,
   uvnitř sekcí jsou šipky a tečky přímo na podkladu. */
.slider-nav {
  --arrow-w: 25px;
  --arrow-h: 24px;
  --nav-h: 40px;
  --dot: 8px;
  --dot-active: 16px;
  --nav-gap: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nav-gap);
  height: var(--nav-h);
  padding-inline: 0;
}

/* Poloprůhledná pilulka je v návrhu jen u hero slideru (216,96 × 40,
   odsazení 8 / 12, rozostření 40); u referencí a receptů jsou
   šipky/tečky přímo na bílé. */
.hero__nav {
  height: var(--nav-h);
  padding-inline: 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.slider-nav__arrow { position: relative; display: block; flex: 0 0 auto; transition: opacity var(--t-fast), transform var(--t-fast); }
/* Menší kresba, stejně velká plocha pod kurzorem: 40 × 40 px drží
   neviditelný pseudoprvek, takže se šipka trefí stejně jako dřív. */
.slider-nav__arrow::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
}
.slider-nav__arrow[disabled] { opacity: .25; cursor: default; }
.slider-nav__arrow:not([disabled]):hover { transform: scale(1.08); }

/* Zdrojové SVG má viewBox 45 × 41 a tah o síle 6 vyplní skoro celý –
   kresba sahá od 0 do 44,97 vodorovně a od 0 do 40,33 svisle. Obraz
   šipky je tedy prakticky celý obrázek, takže rámeček = rozměr šipky
   a nic z něj nepřetéká (dřív se kreslilo o 12,5 % větší).            */
.slider-nav__icon { display: block; width: var(--arrow-w); height: var(--arrow-h); }
.slider-nav__icon img { display: block; width: 100%; height: 100%; }
.slider-nav__arrow--prev .slider-nav__icon { transform: scaleX(-1); }

.slider-nav__dots { display: flex; align-items: center; gap: var(--nav-gap); }
.slider-nav__dots li { display: flex; align-items: center; }
.slider-nav__dot {
  display: block;
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  background: var(--c-black);
  transition: width var(--t-fast), height var(--t-fast);
}
.slider-nav__dot.is-active { width: var(--dot-active); height: var(--dot-active); }

/* ------------------------------------------------------------------ */
/* HEADER                                                              */
/* ------------------------------------------------------------------ */

.header {
  position: relative;
  z-index: 20;
  height: var(--header-h); /* 18 px odsazení + 86 px logo; hero začíná na 105 px */
  background: var(--c-white);
}

/* Plná hlavička visí v okně napořád. Dřív se po zarolování překlápěla
   z relative na fixed – tím ale vypadla z toku a tělo si muselo ve
   stejné chvíli přidat odsazení. Po tlačítku zpět prohlížeč obnoví
   pozici rolování dřív, než se javascript dostane ke slovu, takže se
   stránka na jeden snímek vykreslila s jiným rozvržením a poskočila.
   Fixed pozice i odsazení těla teď platí pořád, rozvržení se při
   rolování nemění a není co glitchovat. Pokladna (.header--minimal)
   zůstává v toku, tam se nic nepřipíná. */
body.ma-fixni-hlavicku { padding-top: var(--header-h); }
body.ma-fixni-hlavicku .header { position: fixed; top: 0; left: 0; right: 0; }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(var(--w-header), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
  /* Návrh: řádek s ikonami a menu sedí na y = 34–74. */
  padding-top: 34px;
  height: 74px;
}

.header__side { display: flex; align-items: center; gap: 36px; min-width: 0; }
.header__side--end { flex: 1 1 0; justify-content: flex-end; gap: 32px; }

.header__nav { display: flex; align-items: center; gap: 24px; }

.header__link {
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  --phero-nav-zaklad: var(--c-text-secondary);

  color: var(--phero-nav-zaklad);   /* návrh: #666666, aktivní položka #1a1a1a */
  white-space: nowrap;
  transition: color var(--t-fast);
}
/* Názvy v navigaci se mají s podkladem násobit, aby měly dobrý kontrast
   i na sytých barvách (Trello „FRONTED Desktop vol. III"). Na bílé se
   tím nic nezmění, ale když pod hlavičku vyjede sytá barva – chilli
   hořčice má hned nahoře #F34136 – šedá #666 se v ní ztrácí.

   `mix-blend-mode: multiply` na odkazu nestačí: hlavička je
   `position: fixed`, tedy vlastní vrstvicí kontext, a odkaz uvnitř se
   násobí jen s jejím vlastním (průhledným) pozadím, ne s heroem za ní.
   Součin proto spočítá js/hero-napis.js z gradientu a pošle ho sem
   v --phero-nav. Bez javascriptu i mimo detail zůstává návrhová šedá.

   Připnutá lišta má bílé pozadí, tam platí zase šedá – proto první
   :not(). Vybraná položka a položka pod myší jsou černé, a černá je
   po vynásobení pořád černá – ty se tedy vynechávají taky, jinak by
   je tohle pravidlo svou vyšší specifičností přebilo. */
.page-detail .header:not(.is-pripnuta) .header__link:not(.is-active):not(:hover):not(:focus-visible) {
  color: var(--phero-nav, var(--phero-nav-zaklad));
}
.header__link:hover,
.header__link:focus-visible { color: var(--c-black); }
.header__link.is-active { color: var(--c-black); }


.header__cart {
  --kosik-ikona: 40px;
  position: relative; display: block; flex: 0 0 auto;
  width: var(--kosik-ikona); height: var(--kosik-ikona);
}
.header__cart img { width: var(--kosik-ikona); height: var(--kosik-ikona); }

/* ---- Počítadlo položek ----
   Plná žlutá bublina bez obtažení a bez stínu, hned za pravou hranou
   vozíku a svisle na jeho středu. Poměry jsou odměřené z podkladu
   (bublina 0,70 kresby vozíku, číslo 0,45) a počítají se z velikosti
   ikony, aby to na užším okně sedlo stejně.                            */
.header__cart-count {
  position: absolute;
  left: calc(var(--kosik-ikona) * .9);
  top: calc(var(--kosik-ikona) * .15);
  display: grid; place-items: center;
  /* Od 9. 11. 2026 počítá kusy (Trello #93), takže dvouciferné číslo
     je běžné: jednička zůstane v kolečku, delší číslo bublinu roztáhne
     do oválu (min-width + odsazení po stranách). */
  --bublina: calc(var(--kosik-ikona) * .7);
  min-width: var(--bublina);
  height: var(--bublina);
  padding-inline: calc(var(--bublina) * .2);
  border-radius: 999px;
  background: var(--c-yellow);
  font-weight: 700;
  font-size: calc(var(--kosik-ikona) * .45);
  line-height: 1;
  letter-spacing: normal;
  /* Ořez kolečkem – číslo, které zrovna odjíždí, zmizí za jeho hranou. */
  overflow: hidden;
}
/* Prázdný košík bublinu nemá; bez obtažení by to byla bílá nula v prázdnu. */
.header__cart-count--prazdny { display: none; }

/* Válec s čísly: vidět je vždycky jen horní, nové se přidává pod něj
   a celý válec se posune o jedno číslo nahoru. */
.header__cart-roll { display: block; width: 100%; text-align: center; }
.header__cart-roll.is-roluje {
  transform: translateY(-1em);
  transition: transform var(--t-badge) var(--e-badge);
}
.header__cart-digit { display: block; height: 1em; }

@keyframes kosik-skok {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  70%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
.header__cart-count.is-skace { animation: kosik-skok var(--t-badge) ease-out; }

@media (prefers-reduced-motion: reduce) {
  .header__cart-roll.is-roluje { transition: none; }
  .header__cart-count.is-skace { animation: none; }
}

/* ---- Přepínač jazyka ---- */
.header__lang { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; }
.header__lang-link {
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  color: var(--c-gray);
  transition: color var(--t-fast);
}
.header__lang-link:hover,
.header__lang-link:focus-visible { color: var(--c-black); }
.header__lang-link.is-active { color: var(--c-black); }
/* Lomítko mezi jazyky, ale jen mezi nimi. */
.header__lang-link + .header__lang-link::before {
  content: "/";
  margin-right: 6px;
  color: var(--c-gray);
}

/* Ve vysouvacím menu je přepínač nahoře naproti křížku – dole by se
   na nižších telefonech schoval pod okraj obrazovky. */
.menu-vysouvaci-jazyk {
  position: absolute;
  right: 20px; top: 15px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 33px;
  letter-spacing: var(--ls-bold);
  transition: opacity 800ms var(--easing);
}
.menu-vysouvaci.is-open .menu-vysouvaci-jazyk { opacity: 1; transition-delay: 600ms; }
.menu-vysouvaci-jazyk-link { color: var(--c-gray); }
.menu-vysouvaci-jazyk-link.is-active { color: var(--c-white); }
.menu-vysouvaci-jazyk-link + .menu-vysouvaci-jazyk-link::before {
  content: "/";
  margin-right: 8px;
  color: var(--c-gray);
}

/* Logo v návrhu měří 90,5 × 86 px a začíná na y = 18, špička končí
   těsně nad hero. SVG v projektu je čtvercové (120 × 120), takže se
   řídíme výškou – na šířku vyjde o 4,5 px užší než v návrhu.
   Až přijde logo přímo z Figmy, stačí dosadit 90,5 × 86. */
/* ---- Lišta kategorií pod hlavičkou (jen telefon) ----
   Na desktopu jsou kategorie v .header__nav; mobilní návrh je dává do
   vlastního šedého pruhu pod hlavičku. Tady se jen schová, zapíná se
   v bloku pro ≤ 767 px. */
.kat-lista { display: none; }

/* Pruh náhledů pod heroem je taky jen pro telefon – na desktopu
   zůstává galerie v samostatné sekci níž na stránce. */
.nahledy { display: none; }
/* Slider hera s fotkami z galerie je taky jen na telefonu (mobil.css). */
.phero__slider,
.phero__tah { display: none; }

/* U hvězdiček je na telefonu jen číslo, na desktopu celý text. */
.phero__reviews-pocet { display: none; }

.header__logo {
  position: absolute;
  left: 50%; top: 18px;
  transform: translateX(-50%);
  width: 86px; height: 86px;
}
.header__logo img { display: block; width: 86px; height: 86px; }
/* Specificita schválně stejná jako u pravidla nad ním, jinak by ho
   `.header__logo img` přebilo a nápis by svítil i nahoře. */
.header__logo img.header__logo-text { display: none; }

/* ---- Minimální hlavička (pokladna, děkovací stránka) ----
   Tahle hlavička má v návrhu větší logo – 120 × 120 na y = 18 –
   a obsah pokladny začíná až na 204 px, takže si drží původní
   výšku 158. Na tabletu a mobilu se srovná s plnou hlavičkou
   (viz breakpointy níže). */
/* ---- Připnutá lišta ----
   Po zarolování se hlavička přilepí k hornímu okraji okna, zúží se na
   72 px a místo šipky ukáže samotný nápis. Aby obsah pod ní nenaskočil
   nahoru ve chvíli, kdy hlavička vypadne z toku, dostane <body>
   odsazení o její původní výšku. */
.header.is-pripnuta { height: var(--header-pripnuta-h); }

/* Zúžená lišta nenaskočí, ale vyroluje se zeshora. */
@keyframes lista-dolu {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.header.is-pripnuta.is-roluje { animation: lista-dolu var(--t-lista) var(--e-lista); }
@media (prefers-reduced-motion: reduce) {
  .header.is-pripnuta.is-roluje { animation: none; }
}
.header.is-pripnuta .header__inner {
  padding-top: 0;
  height: var(--header-pripnuta-h);
}
.header.is-pripnuta .header__logo {
  top: 50%;
  width: 93px; height: 36px;
  transform: translate(-50%, -50%);
}
.header.is-pripnuta .header__logo-sipka { display: none; }
.header.is-pripnuta .header__logo-text { display: block; width: 93px; height: 36px; }


.header--minimal { height: 158px; }
.header--minimal .header__inner { padding-top: 38px; height: 78px; }
.header--minimal .header__logo { top: 18px; width: 120px; height: 120px; }
.header--minimal .header__logo img { width: 120px; height: 120px; }

/* ---- Hamburger ---- */
.header__burger { display: none; position: relative; width: 32px; height: 32px; flex: 0 0 auto; }
.header__burger-bar,
.header__burger-bar::before,
.header__burger-bar::after {
  position: absolute; left: 4px;
  width: 24px; height: 3px;
  background: var(--c-black);
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.header__burger-bar { top: 15px; }
.header__burger-bar::before,
.header__burger-bar::after { content: ""; left: 0; }
.header__burger-bar::before { top: -8px; }
.header__burger-bar::after { top: 8px; }

/* ---- Vysouvací menu (do 1023 px) ----------------------------------
   Převzaté z původního webu i s názvy tříd. Tam to jelo na jQuery
   .animate() s pluginem jquery.easing; tady na CSS přechodech se stejnou
   křivkou (easeInOutCubic) a stejnými časy:

     panel        posun 800 ms
     položky      posun 1000 ms, každá další o 100 ms později
     položky      prolnutí 800 ms, start v 600 ms, po 100 ms
     křížek       prolnutí 800 ms, start v 600 ms

   Pořadí položky nese proměnná --i v atributu style, takže stačí
   přidat řádek do menu a časování si sedne samo.
   ------------------------------------------------------------------ */

.menu-vysouvaci {
  --easing: cubic-bezier(.645, .045, .355, 1);

  position: fixed;
  left: 0; top: 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100vw;
  height: 100%;
  /* Okraj 24 px podle mobilního návrhu (měřeno 46/813 šířky panelu).
     Dole je víc, aby poslední řádek neseděl na hraně displeje. */
  padding: 0 24px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Návrh má plnou tmavou plochu, ne průsvit – panel překrývá celý
     displej a prosvítající stránka pod ním jen ruší. */
  background: var(--c-black);
  color: var(--c-white);
  transform: translateX(-100%);
  transition: transform 800ms var(--easing);
}
.menu-vysouvaci[hidden] { display: none; }
.menu-vysouvaci.is-open { transform: none; }

/* ---- Křížek ----
   Samotný znak je v návrhu malý (13 px), ale plocha pod prstem musí
   být větší – tlačítko je proto 44 px a čáry se kreslí na střed. */
.menu-zavrit {
  position: absolute;
  left: 14px; top: 12px;
  color: var(--c-white);
  opacity: 0;
  transition: opacity 800ms var(--easing);
}
.menu-vysouvaci.is-open .menu-zavrit { opacity: 1; transition-delay: 600ms; }

/* ---- Položky ----
   Rozvržení i velikosti jsou z mobilního návrhu (podklady/mobil.pdf,
   str. 1). Měřeno jako podíl šířky panelu, protože snímek v PDF je
   z telefonu, ne export z Figmy – u 390px okna pak vychází kategorie
   na 66 px, doplňková navigace na 20 a právní odkazy na 16. */
.menu-vysouvaci-polozky { position: relative; width: 100%; margin-top: 77px; }

.menu-vysouvaci-polozka {
  opacity: 0;
  transform: translateX(-50vw);
  transition:
    transform 1000ms var(--easing),
    opacity 800ms var(--easing);
}
.menu-vysouvaci.is-open .menu-vysouvaci-polozka {
  opacity: 1;
  transform: none;
  transition-delay:
    calc(var(--i, 0) * 100ms),
    calc(600ms + var(--i, 0) * 100ms);
}

.menu-vysouvaci-odkaz {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 66px;
  line-height: 58px;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--c-white);
  transition: color 500ms;
}

/* Vybraná kategorie je bílá, ostatní šedé – jen na stránkách, kde
   nějaká kategorie vybraná je (viz $vpMaAktivniKategorii). */
.menu-vysouvaci-nav.ma-aktivni .menu-vysouvaci-odkaz { color: var(--c-gray); }
.menu-vysouvaci-nav.ma-aktivni .menu-vysouvaci-odkaz.is-active { color: var(--c-white); }

/* Najetím na položku ostatní zešednou – jako na původním webu.
   Na telefonu se to neuplatní, hover tam není. */
@media (hover: hover) {
  .menu-vysouvaci-polozky nav:hover .menu-vysouvaci-odkaz { color: var(--c-story-gray); }
  .menu-vysouvaci-polozky nav .menu-vysouvaci-odkaz:hover { color: var(--c-white); }
}

/* ---- Druhá a třetí skupina ----
   Obě jsou menší a v textovém písmu, ne v nadpisovém. */
.menu-vysouvaci-skupina--doplnkova { margin-top: 33px; }
.menu-vysouvaci-skupina--pravni    { margin-top: 35px; }

.menu-vysouvaci-odkaz--doplnkovy,
.menu-vysouvaci-odkaz--pravni {
  font-family: var(--font-body);
  letter-spacing: var(--ls-bold);
}
.menu-vysouvaci-odkaz--doplnkovy { font-size: 20px; line-height: 24px; }
.menu-vysouvaci-odkaz--pravni    { font-size: var(--fs-body); line-height: 22px; }

/* Šedivění neaktivních se týká jen kategorií – doplňkové odkazy
   zůstávají bílé, jak je v návrhu. */
.menu-vysouvaci-nav.ma-aktivni .menu-vysouvaci-odkaz--doplnkovy { color: var(--c-white); }

/* ---- Kontakt ---- */
.menu-vysouvaci-kontakt {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 46px;
  opacity: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  transition: opacity 800ms var(--easing);
}
.menu-vysouvaci.is-open .menu-vysouvaci-kontakt {
  opacity: 1;
  transition-delay: calc(600ms + var(--i, 0) * 100ms);
}
.menu-vysouvaci a { color: var(--c-white); }

/* ---- Sítě ----
   Ikony jsou černé (kreslené do světlé patičky) a načítají se přes
   <img>, takže na ně `color` nedosáhne. Na tmavém panelu se proto
   obracejí filtrem – u plné černé z toho vyjde přesná bílá. */
.menu-vysouvaci-site { display: flex; gap: 24px; flex: 0 0 auto; }
.menu-vysouvaci-sit  { display: block; }
.menu-vysouvaci-sit img { display: block; width: 36px; height: 36px; filter: invert(1); }

/* Nízké displeje: kategorie by jinak panel protáhly do scrollu. */
@media (max-height: 740px) {
  .menu-vysouvaci-polozky { margin-top: 60px; }
  /* Jen kategorie – doplňkové a právní odkazy mají taky třídu
     .menu-vysouvaci-odkaz a zvětšily by se na 52 px (8. 11. 2026). */
  .menu-vysouvaci-odkaz:not(.menu-vysouvaci-odkaz--doplnkovy, .menu-vysouvaci-odkaz--pravni) {
    font-size: 52px;
    line-height: 46px;
  }
  .menu-vysouvaci-skupina--doplnkova { margin-top: 24px; }
  .menu-vysouvaci-skupina--pravni    { margin-top: 24px; }
  .menu-vysouvaci-kontakt { margin-top: 32px; }
}

/* Zavírání: panel odjíždí 800 ms a teprve pak se položky vrátí do
   výchozí polohy – jinak by uskočily rovnou při kliknutí na křížek. */
.menu-vysouvaci.is-closing .menu-zavrit,
.menu-vysouvaci.is-closing .menu-vysouvaci-polozka,
.menu-vysouvaci.is-closing .menu-vysouvaci-kontakt {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---- Dialog přihlášení (do 1023 px i na desktopu) ------------------
   Převzatý z původního webu i s názvy tříd a ID polí, aby na něj
   seděly jeho ajax skripty (libs/ajax-email.php, ajax-heslo.php,
   ajax-prihlaseni.php). Velikosti jsou přepočtené na px – starý web
   měl kořenové písmo 18 px, tenhle 16.
   ------------------------------------------------------------------ */

.dialog-prostor {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity 400ms ease;
}
.dialog-prostor[hidden] { display: none; }
.dialog-prostor.is-open { opacity: 1; }

.dialog-prostor-table { display: table; width: 100%; height: 100%; }
.dialog-prostor .table-cell { display: table-cell; vertical-align: middle; }

.dialog-panel {
  position: relative;
  width: 480px;
  margin: auto;
  background: #f2f2f2;
  box-shadow: 15px 15px 0 0 var(--c-black);
}
/* Panel se výškou řídí podle otevřeného pohledu – přihlášení má pevné
   minimum kvůli odkazu na registraci dole, zapomenuté heslo je nižší. */
.dialog-pohled { position: relative; }
.dialog-pohled[hidden] { display: none; }
.dialog-pohled--prihlaseni { min-height: 384px; }

/* ---- Křížek ----
   z-index je potřeba: .dialog-pohled je taky pozicovaný a stojí v DOMu
   za křížkem, takže by se bez něj vykreslil přes něj a spolkl kliknutí.
   Křížek by byl vidět, ale nešel by zavřít. */
.dialog-zavrit {
  --zavrit-cara: 35px;
  position: absolute;
  z-index: 1;
  right: 15px; top: 25px;
  color: var(--c-story-gray);
}

/* ---- Nadpis ---- */
.dialog-panel .smazat-hlaska {
  width: calc(100% - 100px);
  margin-bottom: 30px;
  padding: 30px 0 0 35px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-black);
}

/* ---- Pole ---- */
/* Podtržená pole s popiskem uvnitř sdílí přihlašovací dialog se
   stránkou registrace. V obou je obal .objednavka-form, stejně jako
   na původním webu; dialogu patří jen odsazení od stěn panelu. */
.dialog-prostor .objednavka { width: 100%; }

.objednavka-form fieldset {
  position: relative;
  height: 75px;
  padding: 0;
  border: 0;
}
.dialog-prostor .objednavka-form fieldset { width: calc(100% - 40px); margin-left: 20px; }

.objednavka-form legend {
  display: none;
  position: absolute;
  top: 10px;
  height: 0;
  padding-left: 17px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 140%;
  color: var(--c-story-gray);
}
.objednavka-form fieldset.error legend { display: block; color: var(--c-out-stock); }
.objednavka-form .error-hlaska { display: none; color: var(--c-out-stock); }
.objednavka-form fieldset.error .error-hlaska { display: inline; }
/* Pole s víc možnými hláškami ukáže tu, kterou vybere třída fieldsetu –
   „je prázdné“ a „je ve špatném tvaru“ nedávají smysl vedle sebe. */
.objednavka-form fieldset.error[class*="hlaska-"] .error-hlaska { display: none; }
.objednavka-form fieldset.error.hlaska-a .error-hlaskaA,
.objednavka-form fieldset.error.hlaska-b .error-hlaskaB,
.objednavka-form fieldset.error.hlaska-c .error-hlaskaC { display: inline; }

.objednavka-form input,
.objednavka-form select {
  box-sizing: border-box;
  width: 100%;
  padding: 30px 17px 10px;
  border: 0;
  border-bottom: 1px solid var(--c-black);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .02em;
  color: var(--c-black);
}
/* Popisek v prázdném poli je menší než text, který se do něj píše. */
.objednavka-form input::placeholder { color: var(--c-black); opacity: 1; font-size: 16px; }
/* Zaostřené pole pozná podle silnější linky – rámeček kolem celého
   pole by v tomhle layoutu působil jako chyba. */
.objednavka-form input:focus,
.objednavka-form select:focus { outline: none; box-shadow: 0 1px 0 0 var(--c-black); }
.objednavka-form fieldset.error input:focus { box-shadow: 0 1px 0 0 var(--c-out-stock); }
.objednavka-form fieldset.error input { border-bottom: 2px solid var(--c-out-stock); color: var(--c-out-stock); }
/* Doplňování z prohlížeče jinak přebarví pozadí pole na modro. */
.objednavka-form input:-webkit-autofill,
.objednavka-form input:-webkit-autofill:hover,
.objednavka-form input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px #f2f2f2 inset !important; }

/* Výběr státu má popisek vidět vždycky – hodnota je v poli od začátku,
   takže by jinak nebylo poznat, co znamená. */
.objednavka-form fieldset.vyber legend { display: block; }
.objednavka-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.objednavka-form fieldset.vyber::after {
  content: "";
  position: absolute;
  right: 17px; top: 38px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid var(--c-black);
  pointer-events: none;
}

.objednavka-form .ok-icon,
.objednavka-form .error-icon { display: none; position: absolute; }
.objednavka-form .ok-icon {
  right: 7px; top: 24px;
  width: 28px; height: 28px;
  background: url("../assets/icons/small-check.svg") no-repeat 0 0 / 28px 28px;
}
.objednavka-form .error-icon {
  right: 0; top: 18px;
  width: 42px; height: 36px;
  background: url("../assets/icons/warning.svg") no-repeat 0 0 / 42px 36px;
}
.objednavka-form fieldset.ok .ok-icon { display: block; }
.objednavka-form fieldset.error .error-icon { display: block; }

/* ---- Spodek panelu ----
   Původní web tu skládal obsah plovoucími prvky (float). Teď je to
   jeden řádek: vlevo text nebo odkaz, vpravo odesílací tlačítko. */
.dialog-pata {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 14px 20px 30px 35px;
}

.dialog-prihlaseni .zapomenute-heslo {
  align-self: center;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--c-black);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 25px;
  color: var(--c-black);
}

/* Odesílací tlačítko je komponenta .btn .btn--display – stejná jako
   „Uložit“ na stránce registrace. Panel je ale jen 480 px široký, tak
   má písmo velikost nadpisu dialogu (28 px) místo velkého --fs-h3. */
.dialog-prihlaseni .prihlasit-odeslat {
  flex: 0 0 auto;
  gap: 14px;
  font-size: 28px;
}
.dialog-prihlaseni .prihlasit-odeslat[disabled] {
  opacity: .4;
  cursor: default;
  transform: none;
  box-shadow: var(--shadow-button);
}

/* Text vedle tlačítka v pohledu se zapomenutým heslem – stejné místo,
   kde je v přihlášení odkaz „Zapomenuté heslo“. */
.dialog-pokyny {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 25px;
  color: var(--c-black);
}

.nova-registrace {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  margin: auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
}
.nova-registrace a { color: var(--c-black); }

/* Hláška, když se ajax skript nepodaří zavolat. */
.dialog-chyba {
  clear: both;
  margin: 0 35px;
  padding-top: 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 140%;
  color: var(--c-out-stock);
}
.dialog-chyba:empty { display: none; }

@media (max-width: 1023px) {
  .dialog-panel { width: calc(100% - 40px); max-width: 480px; }
}
@media (max-width: 413px) {
  .dialog-panel .smazat-hlaska { font-size: 18px; line-height: 1.2em; padding-left: 24px; }
  .dialog-prostor .objednavka-form fieldset { width: calc(100% - 24px); margin-left: 12px; }
  /* Na nejužších displejích se text a tlačítko nevejdou vedle sebe. */
  .dialog-pata { flex-wrap: wrap; margin-left: 24px; margin-right: 12px; }
  .dialog-prihlaseni .prihlasit-odeslat { font-size: 22px; }
  .dialog-prostor .objednavka-form input.nonempty { font-size: 20px; }
}

/* ------------------------------------------------------------------ */
/* REGISTRACE                                                          */
/* ------------------------------------------------------------------ */
/* Rozvržení podle původního webu: vlevo formulář, vpravo velké slovo.
   Pole samotná jsou sdílená s přihlašovacím dialogem (.objednavka-form
   výš), takže obě místa vypadají a chovají se stejně.                 */

.ucet { padding: 48px var(--page-gutter) var(--section-gap); }

.ucet__inner {
  width: min(var(--w-listing), 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.ucet__title {
  grid-column: 1 / -1;
  margin-bottom: clamp(24px, 3vw, 48px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-black);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}

.ucet__ghost {
  /* Jedno dlouhé slovo se nezalomí, takže velikost musí sedět i tehdy,
     když se nenačte úzký Kommissar a nastoupí širší náhrada. */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 96px);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-black);
  user-select: none;
}

.ucet__perex,
.ucet__group-label,
.ucet__hlaska {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.ucet__perex { margin-bottom: 32px; color: var(--c-story-gray); }

/* Mezinadpis skupiny polí – „Fakturační údaje“. */
.ucet__group-label {
  margin: 40px 0 8px;
  color: var(--c-story-gray);
}
.ucet__group-label:first-child { margin-top: 0; }

/* Zaškrtávátka mají stejný tvar jako v pokladně. */
.ucet__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  cursor: pointer;
}
.ucet__check-box {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  border: 1px solid var(--c-black);
  background: var(--c-white);
  cursor: pointer;
}
.ucet__check-box:checked {
  border-color: transparent;
  background: url("../assets/icons/checkbox-box.svg") center / 20px 20px no-repeat;
}
.ucet__check-label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.ucet__check-label a { text-decoration: underline; }

/* Skupina, kterou odkrývá zaškrtávátko nad ní. */
.ucet__panel { margin-top: 24px; }
.ucet__panel[hidden] { display: none; }

/* Rozvržení i stín má .btn; tady jen širší mezera k šipce. */
.ucet__odeslat { gap: 24px; margin-top: 40px; }
/* .ucet__odeslat-icon – šipka je společná pro tlačítka .btn--display,
   viz „Šipka v tlačítku“ nahoře (do 2. 11. 2026 tu bylo 45 px). */

/* Hláška nad tlačítkem – souhrn serverové validace i výsledek odeslání. */
.ucet__hlaska {
  margin-top: 32px;
  padding: 16px 20px;
  border: 1px solid var(--c-out-stock);
  color: var(--c-out-stock);
}
.ucet__hlaska--ok { border-color: var(--c-black); color: var(--c-black); }
.ucet__hlaska:empty { display: none; }


@media (max-width: 1023px) {
  .ucet__inner { grid-template-columns: minmax(0, 1fr); }
  .ucet__ghost { display: none; }
}

.blog__prazdno {
  padding: 40px 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-gray);
}

.listing__prazdno {
  grid-column: 1 / -1;
  padding: 40px 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-gray);
}

/* ------------------------------------------------------------------ */
/* DETAIL ČLÁNKU, RECEPTU A PARTNERA                                   */
/* ------------------------------------------------------------------ */

.clanek { padding: 48px var(--page-gutter) var(--section-gap); }
.clanek__inner { width: min(var(--w-detail), 100%); margin-inline: auto; }

/* Když pod článkem jede pás dalších záznamů, nese si mezeru nad sebou
   s sebou (`.recipes` má margin-top --section-gap). Spodní odsazení
   článku by se k ní přičetlo a pod textem by zívala dvojnásobná mezera. */
.clanek--s-pasem { padding-bottom: 0; }

.clanek__title {
  margin-top: 40px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 76px);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}

.clanek__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.clanek__photo { margin-top: 48px; }
.clanek__photo img { display: block; width: 100%; height: auto; }

.clanek__body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.clanek__share-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.clanek__share-link { display: inline-block; margin-top: 16px; transition: opacity var(--t-fast); }
.clanek__share-link:hover { opacity: .7; }
.clanek__share-link img { display: block; width: 32px; height: 32px; }

.clanek__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.clanek__text p { margin-top: 1em; }
.clanek__text p:first-child { margin-top: 0; }
.clanek__text h2,
.clanek__text h3 {
  margin-top: 1.6em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 2vw, 32px);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.clanek__text ul,
.clanek__text ol { margin: 1em 0 0 1.2em; list-style: disc; }
.clanek__text ol { list-style: decimal; }
.clanek__text li { margin-top: .3em; }
.clanek__text a { text-decoration: underline; }
.clanek__text img { max-width: 100%; height: auto; }

/* ---- Recept: strukturovaná pole (6. 11. 2026, libs/strukturovana-data.php) ----
   Doby a porce nad textem, suroviny a postup pod ním. Vypisuje se jen
   vyplněné; nadpisy a seznamy přebírají styl textu článku výš. */
.recept-fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 0 0 32px;
  padding: 20px 24px;
  background: var(--c-light-gray);
}
.recept-fakta__polozka { display: flex; flex-direction: column; gap: 6px; }
.recept-fakta__nazev {
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.recept-fakta__hodnota { font-size: var(--fs-body-lg); line-height: var(--lh-tight); }
.clanek__text .recept-nadpis { margin-top: 1.6em; }
.clanek__text .recept-suroviny__skupina { margin-top: 1.2em; font-weight: 700; }
.clanek__text .recept-suroviny__skupina + .recept-suroviny { margin-top: .4em; }
.clanek__text .recept-postup li { margin-top: .6em; padding-left: .2em; }

/* ---- Čtěte dále ---- */
.clanek__next {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 32px;
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--c-black);
}
.clanek__next-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.clanek__next-link { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; align-items: start; }
.clanek__next-photo img { display: block; width: 100%; height: auto; }
.clanek__next-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 34px);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}
.clanek__next-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---- Partner ---- */
.partner__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.partner__gallery img { display: block; width: 100%; height: auto; }

.partner__claim {
  margin-top: 56px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}

/* Detail partnera stojí na šedé, aby z ní bílá karta s adresou
   vystoupila – stejný podklad má výpis blogu i partnerů. */
.page-partner .clanek { background: var(--c-blog-bg); }

/* Adresa i mapa jsou v jedné bílé kartě, web ve žlutém pruhu pod ní. */
.partner__box {
  margin-top: 48px;
  padding: 32px;
  background: var(--c-white);
}
.partner__box-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.partner__box-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}
.partner__box-text {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.partner__box--web {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: center;
  margin-top: 24px;
  padding: 24px 32px;
  background: var(--c-yellow);
}
.partner__web-odkaz {
  justify-self: end;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.partner__mapa { margin-top: 32px; aspect-ratio: 16 / 9; }
.partner__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 767px) {
  .clanek { padding-top: 32px; }
  .clanek__title { margin-top: 32px; }
  .clanek__photo { margin-top: 32px; }
  .clanek__body,
  .clanek__next,
  .partner__box-head,
  .partner__box--web { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .partner__web-odkaz { justify-self: start; }
  .clanek__share { display: flex; align-items: center; gap: 16px; }
  .clanek__share-link { margin-top: 0; }
  .clanek__next-link { grid-template-columns: minmax(0, 1fr); }
  .partner__gallery { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* HERO SLIDER                                                         */
/* ------------------------------------------------------------------ */

/* Stejné odsazení jako zbytek stránky. Dřív tu bylo vlastní --hero-gutter
   počítané z vw: při 1920 vyšlo stejně, ale jakmile ubral šířku svislý
   posuvník, slider se zužoval rychleji než hlavička a menu pak začínalo
   o 8 px víc vlevo než hrana slideru. */
.hero { padding-inline: var(--page-gutter); }

.hero__stage { position: relative; width: min(var(--w-hero), 100%); margin-inline: auto; }

.hero__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 1790 / 600;   /* rozměr slideru z Figmy */
  max-height: 600px;
  touch-action: pan-y;
}

.hero__track { display: flex; height: 100%; will-change: transform; transition: transform var(--t-slide); }

/* Barvy slidu z administrace (tabulka slider_new). Výchozí hodnoty jsou tady,
   index.php je na tomhle elementu přepíše inline stylem, když slide barvu má. */
.hero__slide {
  --slide-panel: var(--c-hero-beige);
  --slide-nadpis: var(--c-hero-brown);
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.hero__panel {
  display: flex;
  flex: 1 1 50%;
  min-width: 0;
  flex-direction: column;
  gap: clamp(20px, 3.333vw, 64px);
  background: var(--slide-panel);
  padding: clamp(24px, 3.333vw, 64px) clamp(24px, 13.333vw, 256px)
           clamp(24px, 3.333vw, 64px) clamp(20px, 2.5vw, 48px);
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}
.hero__title b,
.hero__title strong { color: var(--slide-nadpis); } 

.hero__panel-bottom {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: clamp(16px, 2.083vw, 40px);
  min-height: 0;
}

.hero__perex {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-tight);
  /* v návrhu je perex zkrácený na tři řádky */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  /* Odsazení 10 px pod perexem (8. 11. 2026) – kvůli dotahům (g, j, p, y)
     posledního řádku, které overflow: hidden u textu oříznutého na účaří
     usekával.

     Samotný padding by ale u delšího textu odkryl vršek čtvrtého řádku:
     Chrome řádky za ořezem na tři dál kreslí a po oříznutí účaří začíná
     čtvrtý hned pod ním. Proto:
       – dole se neořezává (trim jen nahoře), takže dotahy jsou uvnitř
         obsahu a čtvrtý řádek začíná až pod nimi,
       – padding je o ten neořezaný kus menší, aby box skončil přesně
         10 px pod účařím, jak bylo zadáno (ořez dole = půl prokladu
         + dotah 0,215em; GT Pressura má výšku písma 1,1em),
       – clip-path odsazení nekreslí, takže čtvrtý řádek nenakoukne. */
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
  text-box: trim-start cap alphabetic;
  padding-bottom: calc(10px - (1lh - 1.1em) / 2 - 0.215em);
  clip-path: inset(0 0 calc(10px - (1lh - 1.1em) / 2 - 0.215em) 0);
}

.hero__media { flex: 1 1 50%; min-width: 0; border-radius: var(--r-md); overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---- Prolínání slidů (data-rezim="prolnuti") ----
   Podle přílohy karty FRONTEND (css-code.txt). Místo posouvání pásu leží
   slidy na sobě a přepíná se jen viditelnost: odcházející text rychle
   zhasne, teprve pak naskočí nový – nadpis, perex a tlačítko po sobě.
   Fotka se prolne a zároveň dojede z nepatrného přiblížení.

   Ovládání (.hero__nav) zůstává, jak bylo – kartička to výslovně říká. */
.hero__viewport[data-rezim="prolnuti"],
.chef__viewport[data-rezim="prolnuti"] {   /* šéfkuchaři – viz REFERENCE ŠÉFKUCHAŘŮ */
  --motion-soft: cubic-bezier(.22, 1, .36, 1);

  /* Délky prolnutí. Od 14. 10. 2026 pomalejší a měkčí, než byly
     v příloze karty FRONTEND (fotka 550, text 150/300) – na videu
     „SLIDER | Náhled jemného prolnutí“ má přechod znatelně delší náběh.
     Drží se tady pohromadě, aby se daly ladit na jednom místě. */
  --prolnuti-foto: 900ms;     /* prolnutí fotky */
  --prolnuti-zoom: 1400ms;    /* dojezd z přiblížení – delší než prolnutí,
                                 pohyb tím doznívá, místo aby sekl */
  --prolnuti-pryc: 220ms;     /* zhasnutí odcházejícího textu */
  --prolnuti-text: 420ms;     /* náběh nového textu */
}

.hero__viewport[data-rezim="prolnuti"] .hero__track {
  display: block;
  transform: none;
  transition: none;
  will-change: auto;
}

.hero__viewport[data-rezim="prolnuti"] .hero__slide {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  /* Odcházející slide musí stihnout dohrát, proto se schová až potom –
     tedy po nejdelším z odchodů, což je prolnutí fotky. */
  transition: visibility 0s linear var(--prolnuti-foto);
}
.hero__viewport[data-rezim="prolnuti"] .hero__slide.is-active {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Fotografie */
.hero__viewport[data-rezim="prolnuti"] .hero__media {
  opacity: 0;
  /* Symetrická křivka: obě fotky se potkají v půlce stejně, takže mezi
     nimi neprobleskne pozadí. */
  transition: opacity var(--prolnuti-foto) ease-in-out;
}
/* Výchozí (nepřiblížený) stav se vrací až po prolnutí, ne hned.
   Dokud se vracel okamžitě, odcházející fotka v půlce zhasínání
   skočila zpátky do přiblížení – právě to „zvláštní dopozicování",
   o kterém mluví Trello („FRONTED Desktop vol. III", HP / slider).
   Nulová délka se zpožděním je stejný trik, jakým se o kus výš skrývá
   `visibility`: změna proběhne, až když ji není vidět. */
.hero__viewport[data-rezim="prolnuti"] .hero__media img {
  transform: scale(1.015);
  transition: transform 0s linear var(--prolnuti-foto);
}
.hero__viewport[data-rezim="prolnuti"] .hero__slide.is-active .hero__media { opacity: 1; }
.hero__viewport[data-rezim="prolnuti"] .hero__slide.is-active .hero__media img {
  transform: scale(1);
  transition: transform var(--prolnuti-zoom) var(--motion-soft);
}

/* Text – nejdřív zmizí starý, potom se objeví nový.

   Posouvá se vlastnost `translate`, ne `transform`. CTA je tlačítko
   a to má `transform` zabraný hoverem (`.btn:hover` ho posouvá o 2 px
   do stínu). Tohle pravidlo má vyšší specifičnost, takže hover přebíjelo
   – tlačítko se při najetí nepohnulo a jen mu zmizel stín. Dvě
   samostatné vlastnosti se naopak skládají a nepřekáží si. */
.hero__viewport[data-rezim="prolnuti"] .hero__title,
.hero__viewport[data-rezim="prolnuti"] .hero__perex,
.hero__viewport[data-rezim="prolnuti"] .hero__cta {
  opacity: 0;
  translate: 0 6px;
  /* Odchod: zhasnutí bez posunu textu, pořád rychlejší než fotka – ať
     se dva nadpisy přes sebe nepřekrývají. Výchozích 6 px se proto
     nevrací průběžně, ale až po zhasnutí – jinak text v okamžiku
     odchodu o těch 6 px poskočil. */
  transition:
    opacity var(--prolnuti-pryc) ease-out,
    translate 0s linear var(--prolnuti-pryc);
}
.hero__viewport[data-rezim="prolnuti"] .hero__slide.is-active .hero__title,
.hero__viewport[data-rezim="prolnuti"] .hero__slide.is-active .hero__perex {
  opacity: 1;
  translate: 0;
  transition:
    opacity var(--prolnuti-text) var(--motion-soft),
    translate var(--prolnuti-text) var(--motion-soft);
}
/* Text nastupuje, až je fotka ve druhé půlce prolínutí – jinak by nový
   nadpis naskočil na ještě starou fotografii. */
.hero__viewport[data-rezim="prolnuti"] .hero__slide.is-active .hero__title { transition-delay: 340ms; }
.hero__viewport[data-rezim="prolnuti"] .hero__slide.is-active .hero__perex { transition-delay: 420ms; }

/* CTA má zpoždění jen u nástupní dvojice. Dokud se `transition-delay`
   psával zvlášť, platil na všechny přechody včetně těch z `.btn` –
   a hover se pak probudil až půl vteřiny po najetí myši. */
.hero__viewport[data-rezim="prolnuti"] .hero__slide.is-active .hero__cta {
  opacity: 1;
  translate: 0;
  transition:
    opacity var(--prolnuti-text) var(--motion-soft) 480ms,
    translate var(--prolnuti-text) var(--motion-soft) 480ms,
    transform var(--t-fast),
    box-shadow var(--t-fast),
    background-color var(--t-fast);
}

/* Barva levého panelu – plynulý přechod (8. 11. 2026)
   Všechny panely berou barvu vybraného slidu (--slide-panel-aktivni,
   nastavuje Slider.update v js/main.js) a mění ji s přechodem stejně
   dlouhým jako prolnutí fotky. Odcházející i přicházející panel se tak
   přebarvují současně a stejně, ať leží kterýkoli nahoře – barva
   plynule přejde, místo aby skočila. Bez skriptu platí barva slidu. */
.hero__viewport[data-rezim="prolnuti"] .hero__panel {
  background-color: var(--slide-panel-aktivni, var(--slide-panel));
  transition: background-color var(--prolnuti-foto) ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .hero__viewport[data-rezim="prolnuti"] .hero__panel,
  .hero__viewport[data-rezim="prolnuti"] .hero__slide,
  .hero__viewport[data-rezim="prolnuti"] .hero__media,
  .hero__viewport[data-rezim="prolnuti"] .hero__media img,
  .hero__viewport[data-rezim="prolnuti"] .hero__title,
  .hero__viewport[data-rezim="prolnuti"] .hero__perex,
  .hero__viewport[data-rezim="prolnuti"] .hero__cta {
    transition: none !important;
    transform: none !important;
    translate: none !important;
  }
}

/* Návrh: pilulka 280 × 48 na středu slideru, 48 px nad jeho spodní hranou. */
.hero__nav { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); }

/* ------------------------------------------------------------------ */
/* BENEFITY                                                            */
/* ------------------------------------------------------------------ */

.benefits {
  margin-top: var(--section-gap);
  padding-inline: var(--page-gutter);
}

/* Úvodní věta nad benefity. Návrh: blok 561 px na střed, 28/34 tučně
   verzálkami, 48 px nad pásem benefitů. Šířka je tam proto, aby se věta
   zlomila na dva řádky jako v návrhu. */
.benefits__lead {
  width: min(561px, 100%);
  margin-inline: auto;
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  text-align: center;
}
/* Věta je statická všude (9. 11. 2026, dřív běžící pás na telefonu). */
.benefits__lead-text { display: block; }

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  width: min(var(--w-benefits), 100%);
  /* Návrh (Frame 117, 1. 11. 2026): věta → pás benefitů 24 px, pás má
     vlastní horní odsazení 24 (.benefit), ikona tedy začíná 48 pod
     větou. Dřív 48 + 24 = 72 („zmenšit vertical gap“, Trello Maxim). */
  margin-top: 24px;
  margin-inline: auto;
}

.benefit { display: flex; flex-direction: column; gap: 24px; padding: 24px 24px 0; }
.benefit__icon { width: 64px; height: 64px; }
.benefit__text { font-size: var(--fs-body-lg); line-height: var(--lh-tight); }

/* ------------------------------------------------------------------ */
/* NEJOBLÍBENĚJŠÍ                                                      */
/* ------------------------------------------------------------------ */

.products { margin-top: var(--section-gap); padding-inline: var(--page-gutter); }
.products__inner { width: min(var(--w-products), 100%); margin-inline: auto; }

/* Sekce se sadami je v návrhu užší než „Nejoblíbenější“: vedle jedné
   karty (424) stojí box (1124) a mezi nimi 32 px, dohromady 1580.
   Proto vlastní šířka i mřížka o dvou sloupcích, ne o čtyřech. */
.products--sady .products__inner { width: min(1580px, 100%); }
.products--sady .products__grid { grid-template-columns: minmax(0, 424fr) minmax(0, 1124fr); }
/* Box je v návrhu 1124 × 552 a sedí u horní hrany řádku – není tak
   vysoký jako karta vedle (654). */
.products--sady .box { grid-column: 2; align-self: start; aspect-ratio: 1124 / 552; }

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 64px;
}

/* Rozměry odměřené z referenčního renderu (karta 426,5 × 550,5):
   obrazová část je čtverec 426,5 × 426,5, informační blok 124 px,
   padding 16, vnitřní mezera 12, rámeček 1 px #EDEDED.               */
.product {
  position: relative;
  background: var(--c-white);
}

.product__media {
  position: relative;
  aspect-ratio: 424 / 530;      /* obrazová část z návrhu, ne čtverec */
  /* Stejná šedá jako pozadí studiových snímků ze share – fotka je vysoká
     na celou dlaždici a po stranách na podklad plynule navazuje. */
  background: var(--c-produkt-pozadi);
  overflow: hidden;
}

/* Studiový snímek ze složky share. Vysoký je na celou dlaždici a po
   stranách zbyde pruh podkladu – ten má stejnou šedou jako pozadí
   snímků (--c-produkt-pozadi), takže spoj není vidět. Snímky jsou
   800 × 1200, pole 424 × 530, takže se nic neořezává.
   Ořezaná fotka se stínem z CSS (.product__scene níž) zůstává pro
   produkty, které snímek ve share nemají. */
.product__snimek {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Čtvercové šedé pole, ve kterém stojí lahev se stínem.
   Lahev je menší než celá dlaždice, aby byla celá vidět
   a pod ní se vešel stín: obsah = 72 % výšky. */
.product__scene {
  position: absolute;
  inset: 0;
  padding: 14% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;          /* obal fotky z ní počítá svou výšku */
  transition: opacity var(--t-fast);
}

/* ---- Produkt se stínem ----
   Obal má poměr stran skutečné fotky (--vp-pomer z PHP), takže sedí
   přesně na obrázku – u ploché tyčinky stejně jako u vysoké lahve.
   Díky tomu je „pata produktu“ vždycky spodní hrana obalu a stín
   pod ní neplave v prázdnu. */
.product__bottle {
  position: relative;
  display: block;
  /* Menší z obou mezí: buď celá výška plochy, nebo výška, která
     odpovídá plné šířce. Vysoká lahev se opře o výšku, plochá
     tyčinka o šířku – a obal tak v obou případech sedí přesně na
     fotce, ne na prázdném okolí. */
  height: min(100cqh, calc(100cqw * var(--vp-foto-sirka, 1) / var(--vp-pomer-cislo, 0.3132)));
  width: auto;
  aspect-ratio: var(--vp-pomer, 202 / 645);
}

.product__photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Nakreslené stíny (assets/icons/shadow.svg) jsou od 12. 10. 2026 pryč
   – Trello „FRONTEND Desktop vol. II", bod 3. Zůstalo jen odsazení
   fotky od hran pole u produktů, které jsou širší než lahev. */

/* Sáček tyčinek (400 g) a sady – plochá krabička, potřebují kolem sebe
   víc místa než lahev. --vp-foto-sirka je podíl šířky obrazového pole. */
.product__scene--400g,
.product__scene--sady { --vp-foto-sirka: .8; }

/* ---- Fotka na hover ---- */
.product__hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
}

.product:hover .product__hover { opacity: 1; }

/* Na dotykových zařízeních hover není, tak ani fotka na hover. */
@media (hover: none) {
  .product__hover { display: none; }
}

/* DOČASNĚ VYPNUTO spolu s fotkou na hover (libs/polozky-produkty.php):
   při najetí má zůstat vidět láhev zvolené velikosti. Až se fotka
   vrátí, odkomentovat i tenhle řádek.
.product:hover .product__scene { opacity: 0; } */

/* ---- Odznaky ---- */
/* Odznaky ani loga ocenění klik nechytají – propadne pod ně na odkaz,
   který pokrývá celou kartu (.product__link::after), takže i kliknutí
   na odznak vede do detailu produktu. Přepínač velikostí a košík mají
   vyšší vrstvu, ty klikatelné zůstávají. */
.product__badges,
.product__certificates { pointer-events: none; }

/* Odznaky jdou do řádku a zalamují se, když se nevejdou (9. 11. 2026,
   dřív sloupec pod sebou). Pravý okraj drží `right`: bez ocenění 8 px
   od kraje fotky jako vlevo, s oceněním končí řádek před sloupcem log
   (BIO, Regionální potravina, Taste…) – ten zabírá 5,66 % odsazení
   + 23,35 % šířky (viz .product__certificates), k tomu mezera 8 px. */
.product__badges {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

.product__media:has(> .product__certificates) > .product__badges {
  right: calc(5.66% + 23.35% + 8px);
}

/* Tag delší než celé volné místo (na telefonu „Lisováno: 21. 9. 26“
   vedle sloupce log) se zalomí uvnitř odznaku, místo aby přečníval
   přes loga. Kratší tagy se nezalamují – flex je nejdřív přesune
   na další řádek a zúží jen ten, který se nevejde ani sám. Datum drží
   pohromadě pevné mezery z typografie, láme se jen za dvojtečkou. */
.product__badges .product__badge { white-space: normal; }

/* Tagy produktu mají vlastní obal (.js-product-tagy). Bez display: contents
   byl ten obal jedinou položkou sloupce a tagy v něm stály vedle sebe
   slepené bez mezery („DO KAŠÍ LISOVÁNO…“ jako jeden černý pruh).
   Takhle je každý tag samostatná položka s mezerou 6 px jako ostatní
   odznaky – stejně jako na detailu (.js-detail-tagy, 8. 11. 2026). */
.product__badges > .js-product-tagy { display: contents; }

.product__badge {
  /* Odznak není flexbox a nemá pevnou výšku: `text-box-trim` z hromadného
     pravidla na začátku souboru platí jen na blokový kontejner, na flexu
     se ignoruje – a bez něj se nápis o půl pixelu propadne nad střed,
     protože font má nad verzálkami víc místa než pod účařím. S oříznutím
     je výška boxu přesně výška verzálek (1cap) a zbytek návrhových
     34 px se rozdělí na stejné odsazení nahoru i dolů. */
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white);
  padding: calc((34px - 1cap) / 2) 8px;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  white-space: nowrap;
}

.product__badge--sale { background: var(--c-yellow); color: var(--c-black); }
/* Terakotový odznak (návrh: color-product-terracotta) – „4 × 100 ml" u sady na míru. */
.product__badge--terakota { background: #b88162; color: var(--c-white); }

/* ---- Certifikace (BIO) – pravý horní roh obrazové části ----
   Odměřeno z návrhu: odsazení 24 px, loga 99 a 98 px široká, mezera 16 px
   (vztaženo ke kartě 424 px, proto v procentech – škáluje s kartou).      */
.product__certificates {
  position: absolute;
  z-index: 3;
  right: 5.66%;
  top: 5.66%;
  width: 23.35%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(8px, 0.8333vw, 16px);
}

.product__certificate { display: block; width: 100%; height: auto; }

/* Hero fotka sady na úvodní stránce – jen telefon (css/mobil.css). */
.product__hero { display: none; }


/* ---- Informační blok ---- */
/* Rámeček má v návrhu jen spodní část karty – šedá plocha s fotkou
   jde přes celých 424 px bez něj, proto rameček sedí tady, ne na .product. */
.product__info {
  display: flex;
  /* Všechny tři sloupce (název + sklad, cena, košík) na svislý střed
     (Trello Maxim, 1. 11. 2026). Dřív stretch: první sloupec začínal
     u horní hrany, cena s košíkem seděly na středu. */
  align-items: center;
  gap: 12px;
  border: 1px solid var(--c-product-line);
  border-top: 0;
  /* Zprava bez odsazení – tlačítko košíku dosedá na hranu karty. */
  padding: 16px 0 16px 16px;
}

.product__col {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.product__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* Odkaz pokrývá celou kartu, tlačítka nad ním zůstávají klikatelná.
   Název se po najetí nepodtrhává – klikatelná je celá karta, podtržení
   jen jednoho řádku působilo, že odkaz je právě a jen ten text. */
.product__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }

.product__volume {
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
}

.product__stock {
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-text);
  color: var(--c-in-stock);
}

/* „Momentálně vyprodáno“ – vlastní tmavší červená (zadání 22. 10. 2026);
   --c-out-stock zůstává chybovým hláškám formulářů. */
.product__stock--out { color: #b42318; }

.product__actions { display: flex; align-items: center; flex: 0 0 auto; }

.product__price {
  font-weight: 700;
  font-size: min(var(--fs-body-lg), 22px);   /* strop 22 px (zadání 22. 10. 2026) */
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* Sloupeček cen: zvýrazněná cena a pod ní přeškrtnutá původní, na střed. */
.product__prices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;   /* návrh: 8 mezi zvýrazněnou a původní cenou */
}

.product__price--sale {
  background: var(--c-yellow);
  padding: 6px;   /* žlutá plocha 32 px z návrhu nad cap-oříznutým boxem */
}

.product__price-old {
  font-weight: 700;
  /* Návrh karty (Product Card, 1. 11. 2026): GT Pressura Bold 18 px,
     proklad 2 %, text/primary, přeškrtnuté. Do té doby 12–16 px podle
     šířky okna a šedá; Trello Maxim: „zvětšit cenu před slevou“. */
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-black);
  text-decoration: line-through;
  white-space: nowrap;
}

/* Vyprodaný produkt: v návrhu zůstává košík aktivní. Pokud se má nedostupné
   zboží nedat vložit, stačí tlačítku přidat atribut disabled. */
.product__cart:disabled { opacity: 0.35; cursor: not-allowed; }
.product__cart:disabled:hover { transform: none; }

.product__divider {
  align-self: center;
  flex: 0 0 auto;
  width: 1px;
  height: 72px;
  margin-left: 20px;          /* návrh: 20 px mezi cenou a čárou, košík už dosedá */
  background: var(--c-degustace);
}

.product__cart {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  transition: transform var(--t-fast);
}
.product__cart img { width: 32px; height: 32px; }
.product__cart:hover { transform: scale(1.1); }

/* ---- Úzká karta (9. 11. 2026) ----
   Řádek název | ceny | košík potřebuje kartu aspoň ~300 px: nejdelší
   název („Ostropestřec“) 113 px, ceny se 72px košíkem a čárou 141 až
   163 px, k tomu odsazení. Užší karty – Nejoblíbenější ve čtyřech
   sloupcích pod ~1360 px, karta vedle boxu vlastní sady pod ~1250 px
   a na tabletu – měly název překrytý cenou. Ceny s košíkem tu jdou
   pod název jako na telefonu: ceny vedle sebe, košík 44 px u pravé
   hrany, bez svislé čáry. Rozhoduje šířka karty (container query),
   ne okna, takže to platí v každé mřížce. Telefon má vlastní pravidla
   v mobil.css, proto až od 768 px. */
@media (min-width: 768px) {
  .product { container-type: inline-size; }

  @container (max-width: 299.98px) {
    .product__info { flex-direction: column; align-items: stretch; gap: 16px; }
    .product__actions { justify-content: space-between; }
    .product__divider { display: none; }
    .product__cart { width: 44px; height: 44px; }
    .product__cart img { width: 28px; height: 28px; }
    .product__prices { flex-direction: row; align-items: baseline; gap: 8px; }
  }
}

/* ------------------------------------------------------------------ */
/* BOX – VLASTNÍ SADA                                                  */
/* ------------------------------------------------------------------ */

/* Box je dlaždice v mřížce se sadami: na desktopu zabírá tři sloupce
   prvního řádku, takže vedle něj zbude místo přesně na jednu kartu.
   Výšku mu dává řádek mřížky, tedy karta vedle – proto tu není žádný
   pevný poměr stran. Na rozdíl od karet nemá rámeček, jen šedou plochu. */
.box {
  position: relative;
  grid-column: 2 / span 3;
  grid-row: 1;
  background: var(--c-light-gray);
  overflow: hidden;
}

.box__content {
  position: absolute;
  left: 5.694%;   /*  64 / 1124 */
  top: 13%;
  width: 24%;
  display: flex;
  flex-direction: column;
}

.box__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}

.box__perex {
  margin-top: clamp(12px, 1.7vw, 32px);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
}

/* Žlutá varianta komponenty secondary-button (178 × 48, písmo 22) –
   stejná geometrie jako .btn--secondary, jen ve žluté. Ostatní
   .btn--compact (newsletter, slevový kód) jsou malý primary-button
   s písmem 16 a zůstávají, jak jsou. */
.box .btn--compact {
  margin-top: clamp(12px, 1.7vw, 32px);
  align-self: flex-start;
  height: 48px;
  padding: 0 14px;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Fotka boxu, lahvičky a stín sedí v jednom rámu s pevným poměrem stran
   – výřez 729,7 × 332,2 z původního Figma rámu 1124 × 552. Díky tomu se
   při jakékoli výšce dlaždice posouvají jako celek a stín zůstane přesně
   pod boxem. Lahvičky vpravo schválně přetékají přes hranu, jako v návrhu. */
/* Scéna kryje celou dlaždici, takže se krabice i lahvičky dají
   napozicovat přímo v procentech karty – tak, jak je to odměřené
   z návrhu (Figma node 10159-21103, karta 1124 × 552). */
.box__scene {
  position: absolute;
  inset: 0;
  /* Scéna kryje celou dlaždici, tedy i text a tlačítko pod sebou,
     a ve značce stojí až za nimi. Bez tohohle řádku by polykala
     kliknutí na „Chci svoji sadu". Je to jen dekorace (aria-hidden),
     takže o myš nemá co stát. */
  pointer-events: none;
}

/* Pozice uvnitř rámu (v procentech jeho šířky a výšky). Krabice je od
   27. 10. 2026 skutečná fotka (2799 × 2368, poměr 1,182) místo kresby
   866 × 646 – při stejné výšce rámu je tedy užší, proto 53,8 % místo
   59,324 %. Lahvičky se posunuly doleva pod ni: z řady zůstane vidět
   necelá polovina, zbytek krabice zakryje („za krabici pozicovat
   rozmazanou degustační sadu BESTSELLER"). */
/* Krabice: v návrhu stojí na x 452–861 (šířka 410) a dosedá na y 465. */
.box__media {
  position: absolute;
  left: 40.214%;      /* 452 / 1124 */
  bottom: 15.761%;    /* 552 − 465 */
  width: 36.477%;     /* 410 / 1124 */
}
/* Degustační sada za krabicí. Rozmazává ji CSS, ne zapečený filtr
   v souboru (Trello „FRONTED Desktop vol. III"): poloměr tím drží krok
   s velikostí karty a fotka zůstává použitelná i jinde.

   Rozměry vycházejí z návrhu: řada stojí na y 207–413 a levým koncem
   zajíždí za krabici (vykouká z ní kousek páté lahvičky) – je za ní,
   takže ji perspektiva zkrátí, je menší a výš.

   Vpravo ale pokračuje za hranu karty a ta ji usekne (.box má
   overflow: hidden). V exportu z Figmy řada končí 29 px před hranou,
   jenže to je jen mezera mezi lahvičkami – zadání i upřesnění
   z 29. 10. 2026 chtějí, aby sada hranou končila. Element proto
   přetéká o 13 px ven, aby ořez padl na hranu karty ostře; kdyby
   dosedl přesně, rozostření by poslední lahvičku na hraně rozpilo
   do průhledna a byl by z toho měkký šmouhový konec.

   Rozostření 3 px: v návrhu přechází hrana lahvičky z pozadí do plné
   barvy přes osm pixelů, což odpovídá sigmě kolem tří. Drží krok se
   šířkou karty přes vw, ať je rozmazání na každém monitoru stejně
   silné vůči obrázku. Okraje doznívají do průhledna samy – filtr
   počítá i s plochou kolem prvku, takže po nich nezůstane hrana divu. */
.box__bottles {
  position: absolute;
  left: 73.398%;      /* 825 / 1124 */
  bottom: 25.181%;    /* 552 − 413 */
  width: 27.758%;     /* 312 / 1124 – pravý konec 13 px za hranou karty */
  filter: blur(clamp(1.5px, 0.17vw, 3.4px));
}
.box__media img,
.box__bottles img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ */
/* JAK VZNIKAJÍ NAŠE OLEJE                                             */
/* ------------------------------------------------------------------ */

.process { position: relative; margin-top: var(--section-gap); padding-inline: var(--page-gutter); }

/* Pozadí: fotka stékajícího oleje otočená o 180° + plná žlutá pod ní.
   Sekce už je přes celou šířku stránky a odsazení má uvnitř, takže
   stačí natáhnout pozadí na její okraje. 100vw by počítalo i se
   svislým posuvníkem a stránka by se dala posunout o 7 px do strany. */
.process__bg {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 0;
}
.process__drip {
  flex: 0 0 auto;
  width: 100%;
  height: min(45.21vw, 868px);   /* 1920 × 868 z Figmy */
  background: url("../assets/images/drip.webp") center / cover no-repeat;
  transform: rotate(180deg);
}
.process__drip::after {
  content: "";
  position: absolute;
  inset: 0;
  background:linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 20%);
  pointer-events: none;
}
.process__fill { flex: 1 1 auto; background: var(--c-oil-yellow); }

.process__title {
  position: relative;
  z-index: 1;
  /* nadpis je na bílé části, karty začínají až pod hranou stékajícího oleje */
  margin-bottom: clamp(48px, calc(20.99vw - .72em), 333px);
}

.process__inner { position: relative; z-index: 1; width: min(var(--w-process), 100%); margin-inline: auto; }

.process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 33px; }

/* Šipky ke krokům jsou jen na telefonu – na širším okně jsou vidět
   všechny karty najednou a posouvat není co. */
.process__nav { display: none; }

/* Otázka a odkaz na Náš příběh pod videi – pořád na žlutém pruhu,
   proto se jen odsadí odshora i odspodu a žlutá se o to natáhne. */
/* Návrh: text a tlačítko na jednom řádku, 32 px mezi nimi, 70 px pod
   kartami a 112 px ke spodní hraně žluté plochy. */
.process__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.667vw, 32px);
  margin-top: clamp(32px, 3.646vw, 70px);
  /* Mezera pod tlačítkem je padding, ne margin – spodní margin by
     posledního potomka propadl ven ze sekce a žlutá by končila hned
     pod tlačítkem. */
  padding-bottom: clamp(48px, 5.833vw, 112px);
}

.process__cta-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}

/* Šipka i mezera kolem textu jsou stejné jako u tlačítka na konci
   stránky Náš příběh, ať jsou obě tlačítka k nerozeznání. */
.step { display: flex; flex-direction: column; gap: 32px; background: var(--c-light-gray); padding: 24px; }

/* Číslo a text vedle sebe, mezi nimi 48 px (var(--space-48) z Figmy,
   rám 1920; na užším okně úměrně méně) – text začíná hned za číslem,
   ne až v polovině karty (Trello #85, 9. 11. 2026; dřív 1fr 1fr).
   Hlavička roste (flex 1 0 auto): karty v řadě jsou stejně vysoké podle
   nejdelšího textu (položky mřížky i pásu na telefonu se natahují na
   výšku řádku) a přebytek připadne hlavičce, takže videa začínají
   ve všech kartách ve stejné výšce. */
.step__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(24px, 2.5vw, 48px);
  align-items: start;
  flex: 1 0 auto;
}
.step__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
}
.step__text { font-size: var(--fs-body); line-height: var(--lh-body); }

/* ---- Video karta ---- */
.video-card {
  position: relative;
  aspect-ratio: 375.33 / 610.4;   /* poměr videa z Figmy */
  overflow: hidden;
  background: var(--c-black);
}
.video-card__video { width: 100%; height: 100%; object-fit: cover; }

/* Závoj přes náhled – v návrhu leží přes fotku 20% černá. Při přehrávání
   se schová, ať nekazí obraz. V modalu u šéfkuchaře se nepoužívá. */
.step .video-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, .2);
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.step .video-card.is-playing::after { opacity: 0; }

.video-card__play {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  /* v návrhu je trojúhelník mírně nad středem – 47,35 % výšky */
  padding-bottom: 5.3%;
  transition: opacity var(--t-fast);
}
.video-card__play img {
  width: 50px; height: 58px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
  transition: transform var(--t-fast);
}
.video-card__play:hover img { transform: scale(1.1); }
/* Při přehrávání ikona play zmizí úplně a vrátí se, až se video zastaví
   nebo dohraje (zadání 9. 11. 2026). Dřív se při najetí myší vracela –
   kurzor po kliknutí na play nad videem zůstane, takže ikona přes
   běžící video pořád svítila. Ovládá se pak přes ovládání prohlížeče
   (controls zapíná initVideos v js/main.js). */
.video-card.is-playing .video-card__play { opacity: 0; visibility: hidden; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* REFERENCE ŠÉFKUCHAŘŮ                                                */
/* ------------------------------------------------------------------ */

.chef { margin-top: var(--section-gap); padding-inline: var(--page-gutter); }

/* Mezi nadpisem a slidery je v návrhu 64 px, stejně jako u ostatních sekcí. */
.chef__stage {
  margin-top: 64px;
  width: min(var(--w-chef), 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chef__viewport { width: 100%; overflow: hidden; touch-action: pan-y; }
.chef__track { display: flex; will-change: transform; transition: transform var(--t-slide); }

.chef__slide { display: flex; flex: 0 0 100%; width: 100%; }

.chef__photo { flex: 0 0 35.874%; }  /* 480 / 1338 – rám fotky 480 × 480 (Trello Maxim, 1. 11. 2026); dřív 605 */
.chef__photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

.chef__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  background: var(--c-chef-bg);
  padding: clamp(24px, 4.78vw, 64px);
}

.chef__head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.chef__name {
  /* Jméno a příjmení pod sebou jako v návrhu – každé slovo na svém řádku. */
  max-width: min-content;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}
.chef__role { font-weight: 700; font-size: var(--fs-body-lg); line-height: var(--lh-tight); }
.chef__quote { font-size: var(--fs-body-lg); line-height: var(--lh-tight); }

.chef__nav { margin-top: 24px; }

/* ---- Prolínání referencí (data-rezim="prolnuti", od 768 px) ----
   Trello „Desktop / LP / slider ŠÉFKUCHAŘI“ (3. 11. 2026): stejné
   „převíjení“ jako hero na úvodní stránce, bez posunu do strany.
   Fotka se prolne a dojede z nepatrného přiblížení, starý text rychle
   zhasne a nový naskočí po sobě – jméno, funkce, citát. Délky jsou
   společné s hero (--prolnuti-* u .hero__viewport výš).

   Na telefonu (do 767 px) zůstává posun: karty tam vykukují a listuje
   se prstem. Skript přepíná podle data-rezim-media, CSS podle stejného
   dotazu – musí sedět oba.

   Rozdíly proti hero:
   – Karta nemá pevnou výšku, slidy proto neleží absolutně, ale v jedné
     buňce mřížky. Pás má výšku nejvyšší karty jako dřív ve flexu.
   – Aktivní slide je nahoře (z-index). Nová fotka se tak prolne přes
     starou, která stojí, dokud ji nová nezakryje – mezi nimi
     neprobleskne podklad. U hero se směr dozadu kreslil pod odcházející.
   – Žlutý podklad textu nese pás, ne karty. Kdyby ho měla každá karta,
     nová (nahoře) by starý text zakryla hned a nebylo by vidět, jak
     zhasíná. Textová část je 100 − 35,874 % (šířka fotky) vpravo. */
@media (min-width: 768px) {
  .chef__viewport[data-rezim="prolnuti"] .chef__track {
    display: grid;
    transform: none;
    transition: none;
    will-change: auto;
    background: linear-gradient(var(--c-chef-bg), var(--c-chef-bg)) right top / 64.126% 100% no-repeat;
  }
  .chef__viewport[data-rezim="prolnuti"] .chef__slide {
    grid-area: 1 / 1;
    width: auto;
    visibility: hidden;
    pointer-events: none;
    /* odcházející slide se schová, až dohraje prolnutí fotky */
    transition: visibility 0s linear var(--prolnuti-foto);
  }
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active {
    z-index: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .chef__viewport[data-rezim="prolnuti"] .chef__body { background: none; }

  /* Fotka (i s tlačítkem videa a štítkem VIDEO). Odcházející zůstává
     plná, dokud se slide neschová – zhasne až pod novou. */
  .chef__viewport[data-rezim="prolnuti"] .chef__photo {
    overflow: hidden;   /* přiblížení nesmí přetéct do textu */
    opacity: 0;
    transition: opacity 0s linear var(--prolnuti-foto);
  }
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active .chef__photo {
    opacity: 1;
    transition: opacity var(--prolnuti-foto) ease-in-out;
  }
  /* Jen fotka, ne ikona trojúhelníku ve štítku VIDEO. Výchozí přiblížení
     se vrací až po prolnutí – stejný trik jako u hero. */
  .chef__viewport[data-rezim="prolnuti"] .chef__photo > img,
  .chef__viewport[data-rezim="prolnuti"] .chef__video > img {
    transform: scale(1.015);
    transition: transform 0s linear var(--prolnuti-foto);
  }
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active .chef__photo > img,
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active .chef__video > img {
    transform: scale(1);
    transition: transform var(--prolnuti-zoom) var(--motion-soft);
  }

  /* Text – odchod bez posunu, 6 px se vrací až po zhasnutí (jako hero). */
  .chef__viewport[data-rezim="prolnuti"] .chef__name,
  .chef__viewport[data-rezim="prolnuti"] .chef__role,
  .chef__viewport[data-rezim="prolnuti"] .chef__quote {
    opacity: 0;
    translate: 0 6px;
    transition:
      opacity var(--prolnuti-pryc) ease-out,
      translate 0s linear var(--prolnuti-pryc);
  }
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active .chef__name,
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active .chef__role,
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active .chef__quote {
    opacity: 1;
    translate: 0;
    transition:
      opacity var(--prolnuti-text) var(--motion-soft),
      translate var(--prolnuti-text) var(--motion-soft);
  }
  /* nastupuje ve druhé půlce prolnutí fotky, stejné rozestupy jako hero */
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active .chef__name  { transition-delay: 340ms; }
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active .chef__role  { transition-delay: 380ms; }
  .chef__viewport[data-rezim="prolnuti"] .chef__slide.is-active .chef__quote { transition-delay: 420ms; }
}

/* 768–1023: karta stojí v sloupci (fotka nahoře přes celou šířku),
   podklad tedy může zabrat celý pás – horní část zakrývá fotka. */
@media (min-width: 768px) and (max-width: 1023px) {
  .chef__viewport[data-rezim="prolnuti"] .chef__track { background-size: 100% 100%; }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .chef__viewport[data-rezim="prolnuti"] .chef__slide,
  .chef__viewport[data-rezim="prolnuti"] .chef__photo,
  .chef__viewport[data-rezim="prolnuti"] .chef__photo > img,
  .chef__viewport[data-rezim="prolnuti"] .chef__video > img,
  .chef__viewport[data-rezim="prolnuti"] .chef__name,
  .chef__viewport[data-rezim="prolnuti"] .chef__role,
  .chef__viewport[data-rezim="prolnuti"] .chef__quote {
    transition: none !important;
    transform: none !important;
    translate: none !important;
  }
}

/* ---- Fotka šéfkuchaře jako video ----
   Když má reference nahrané video, je z fotky tlačítko, které otevře
   modal níž. Značka „VIDEO“ sedí v levém horním rohu, ztmavení pod ní
   je jen kvůli čitelnosti na světlých fotkách. */
.chef__video {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chef__video img { display: block; }
.chef__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 40%);
  transition: opacity var(--t-fast);
}
.chef__video:hover::after,
.chef__video:focus-visible::after { opacity: .65; }

/* Rozměry z Figmy: značka 16 px od rohu, trojúhelník 32 × 37,
   mezera 23 px, text GT Bold 28 / 1,2 bez prostrkání. Na užších
   obrazovkách se zmenší se zbytkem typografie. */
.chef__video-znacka {
  position: absolute;
  z-index: 1;
  left: clamp(10px, .83vw, 16px);
  top: clamp(10px, .83vw, 16px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 23px);
  color: var(--c-white);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-tight);
}
.chef__video-znacka img {
  width: clamp(18px, 1.67vw, 32px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

/* ---- Modal s videem šéfkuchaře ----
   Křížek i šipky stojí mimo bílý panel, přímo na ztmaveném pozadí.
   Šířka panelu se řídí i výškou okna, aby se vysoké video vešlo
   na obrazovku i na notebooku. */
.chef-video {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 40px);
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.chef-video[hidden] { display: none; }
.chef-video.is-open { opacity: 1; }

.chef-video__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 40px);
  max-width: 100%;
}

.chef-video__panel {
  container-type: inline-size;
  flex: 0 1 auto;
  min-width: 0;
  /* 425 × 820 je panel z návrhu; u nízkého okna se zmenší oboje naráz */
  width: min(425px, calc(min(820px, 100svh - 2 * clamp(16px, 3vw, 40px)) * 0.5183));
  max-width: 100%;
  padding: clamp(12px, 1.05vw, 20px);
  background: #fff;
}

.chef-video__hlavicka { padding-bottom: 4.7cqw; }
.chef-video__jmeno {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 8.8cqw;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}
.chef-video__role {
  margin-top: 2.6cqw;
  font-weight: 700;
  font-size: 4.5cqw;
  line-height: var(--lh-tight);
  white-space: pre-line;
}
.chef-video__role[hidden] { display: none; }

/* Šipky – stejná geometrie jako u slideru, jen bílé a bez pilulky. */
.chef-video__sipka {
  flex: 0 0 auto;
  display: block;
  cursor: pointer;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.chef-video__sipka[disabled] { opacity: .25; cursor: default; }
.chef-video__sipka:not([disabled]):hover { transform: scale(1.08); }
.chef-video__sipka-ikona {
  position: relative;
  display: block;
  width: clamp(26px, 2.1vw, 40px);
  height: clamp(25px, 2vw, 38px);
}
.chef-video__sipka-ikona img {
  position: absolute; left: 0; top: -1.5px;
  width: 112.5%; height: 107.9%;
  max-width: none;
  filter: brightness(0) invert(1);
}
.chef-video__sipka--prev .chef-video__sipka-ikona { transform: scaleX(-1); }

/* Křížek – nad pravou šipkou, zarovnaný s horní hranou panelu.
   Komponenta .zavrit; čára je tu dlouhá přes celou plochu. */
.chef-video__zavrit {
  --zavrit-plocha: clamp(26px, 2.1vw, 40px);
  --zavrit-cara: var(--zavrit-plocha);
  position: absolute;
  top: 0; right: 0;
  color: var(--c-white);
}

@media (max-width: 767px) {
  /* Na mobilu se panel roztáhne přes celou šířku a šipky slezou pod něj;
     křížek si nahoře nechá vlastní pruh, ať neleží na panelu. */
  .chef-video__inner {
    flex-wrap: wrap;
    padding-top: 48px;
    width: 100%;
  }
  .chef-video__panel {
    order: -1;
    flex-basis: 100%;
    width: min(425px, 100%, calc((100svh - 140px) * 0.5183));
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------------ */
/* RECENZE                                                             */
/* ------------------------------------------------------------------ */

.reviews { margin-top: var(--section-gap); padding-inline: var(--page-gutter); }
.reviews__inner { width: min(var(--w-reviews), 100%); margin-inline: auto; margin-top: 64px; }

/* Karty se natáhnou na stejnou výšku, ať mřížka drží jednu spodní
   linku i při různě dlouhých recenzích. */
.reviews__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px; align-items: stretch; }

/* Šipky k recenzím jsou jen na telefonu – na širším okně jsou vidět
   všechny najednou a posouvat není co. */
.reviews__nav { display: none; }

.review { display: flex; flex-direction: column; padding-top: 24px; border-top: 1px solid var(--c-degustace); }

.review__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.review__author { font-weight: 700; font-size: var(--fs-body-lg); line-height: var(--lh-tight); }

.review__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: var(--c-green);
  color: var(--c-black);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-text);
  text-transform: uppercase;
}
.review__verified-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: var(--c-black);
  -webkit-mask: url("../assets/icons/check.svg") center / 24px 24px no-repeat;
  mask: url("../assets/icons/check.svg") center / 24px 24px no-repeat;
}

/* 28 px: v návrhu má blok se jménem pod odznakem ještě 4 px vzduchu,
   které nám ubírá ořez účtaře (text-box-trim). */
.review__body { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 28px; }
.review__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review__date { font-size: var(--fs-sm); color: var(--c-text-secondary); letter-spacing: var(--ls-text); white-space: nowrap; }
.review__text { margin-top: 24px; font-size: var(--fs-body); line-height: var(--lh-body); }


/* Tlačítko na Heureku pod mřížkou – stejné jako pod videi. */
.reviews__cta { display: flex; justify-content: center; margin-top: 64px; }
.reviews__cta-btn { gap: 32px; }
/* Šipka v tlačítku. Asset `arrow.svg` má kresbu větší než svůj viewBox
   (tah 6 px přesahuje na všech stranách), takže při vložení jedna ku jedné
   se konce tahů ořížnou a šipka vypadá tupě. V pokladně už byla geometrie
   dopočítaná (rámeček 57 × 52, obrázek 64 × 56 posazený o 2 px výš)
   a podle návrhu je správně – tady je totéž v procentech, aby to platilo
   v každé velikosti. Šipky otočené o 90° si drží svoje.          */

/* ------------------------------------------------------------------ */
/* RECEPTY                                                             */
/* ------------------------------------------------------------------ */

/* Pás receptů přetéká přes kontejner až k okrajům stránky – třetí karta
   je v návrhu vidět až k pravé hraně (x = 1918,5 z 1919) a odjíždějící
   karta mizí teprve na levé hraně. Ořez proto sedí na sekci, ne na
   kontejneru, a padding drží až vnitřní obal.                          */
/* Vodorovne se pas orezava az na hrane stranky, svisle ne - jinak
   sekce ukousne 4px stin tlacitka "Vsechny recepty" na spodni hrane.
   `overflow: hidden` zustava jako zaloha pro prohlizece bez `clip`.   */
.recipes { margin-top: var(--section-gap); overflow: hidden; overflow: clip visible; }

.recipes__inner {
  width: min(var(--w-recipes), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.recipes__viewport {
  width: 100%;
  margin-top: 48px;
  /* karty smí přetéct přes kontejner, ořízne je až sekce na hraně stránky */
  overflow: visible;
  touch-action: pan-y;
}

/* Pás jde chytit a posunout myší – viz data-drag v detailu produktu. */
.recipes__viewport[data-drag] { cursor: grab; }
.recipes__viewport[data-drag] img { -webkit-user-drag: none; }
.recipes__viewport.is-tazeny {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.recipes__empty { margin-top: 48px; }

.recipes__track {
  display: flex;
  gap: 2.99%;              /*  40 / 1338 */
  will-change: transform;
  transition: transform var(--t-slide);
}

.recipe {
  flex: 0 0 44.843%;       /* 600 / 1338 */
  display: flex;
  gap: 3.333%;             /*  20 / 600  */
  padding: 24px 0;
  border-top: 1px solid var(--c-degustace);
  border-bottom: 1px solid var(--c-degustace);
}

.recipe__body {
  flex: 0 0 48.333%;       /* 290 / 600 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.recipe__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}
.recipe__title a { transition: color var(--t-fast); }
.recipe__title a:hover { color: var(--c-hero-brown); }

.recipe__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.recipe__media { flex: 0 0 48.333%; }
.recipe__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.recipes__nav { padding-inline: 12px; margin-top: 12px; }  /* 12 + 25 + 16 + 25 + 12 = 90, odsazení jako u komponenty slider-control */

/* ------------------------------------------------------------------ */
/* FOOTER                                                              */
/* ------------------------------------------------------------------ */

/* Rozměry odměřené z reference (kontejner 1802 px; sloupce začínají na
   0 / 229,5 / 459,5 / 789,5 / 1148 / 1505).                            */
.footer { margin-top: var(--section-gap); padding: 0 var(--page-gutter) 64px; }
.footer__inner { width: min(var(--w-footer), 100%); margin-inline: auto; }

.footer__top {
  display: grid;
  /* minmax(0, …) je nutné – bez něj má každý sloupec minimální šířku
     podle obsahu a mřížka se rozjede (seznam IČ/DIČ tlačil druhý
     sloupec na 255 px místo 230 a třetí začínal o 21 px dál).        */
  grid-template-columns:
    minmax(0, 229.5fr) minmax(0, 230fr) minmax(0, 330fr)
    minmax(0, 358.5fr) minmax(0, 357fr) minmax(0, 297fr);
  align-items: start;
  column-gap: 0;
  row-gap: 40px;
}

.footer__col { padding-right: 24px; }

.footer__heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  margin-bottom: 40px;   /* návrh: 40 px mezi dolní hranou verzálek a prvním řádkem */
}

.footer__heading--lg { font-size: var(--fs-title); margin-bottom: 17px; }

/* Mobilní varianty nadpisů. Nadpis KONTAKT nad oběma sloupci je na
   desktopu navíc – musí být display: none, jinak by se zařadil jako
   sedmá položka do šestisloupcové mřížky patičky. */
.footer__heading--mobil-kontakt,
.footer__heading-mobil { display: none; }

.footer__text,
.footer__links,
.footer__ids {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.footer__text a:hover,
.footer__links a:hover { color: var(--c-slightly-grayish); }

.footer__links { margin-top: 38px; }
.footer__links a { text-decoration: none; text-underline-offset: 4px; }
.footer__links a:hover { text-decoration: underline; }

.footer__ids {
  display: grid;

  /* V návrhu začíná hodnota 43 px od začátku popisku – česky jsou to
     zkratky, takže sloupec popisků je úzký. fit-content drží strop na
     100 px pro anglické plné názvy, které se musí zalomit.            */
  grid-template-columns: fit-content(100px) auto;
  column-gap: 17px;
  margin-top: 38px;
}


.footer__ids--dlouhe dd {
  margin-bottom: 12px;
}

.footer__ids--dlouhe dd:last-child {
  margin-bottom: 0;
}
.footer__ids dt,
.footer__ids dd { margin: 0; }

.footer__lead {
  /* GT Pressura Regular 22 – token --fs-title končí na 22 px a níž se
     sám zmenšuje. Dřív to bylo --fs-body-lg (28 px), což bylo moc. */
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: var(--lh-tight);
  padding-right: 24px;
}

/* Odznak Heureky (4. sloupec) je z patičky odebraný (9. 11. 2026).
   Newsletter proto stojí ve svých sloupcích výslovně – jinak by se
   automaticky posunul o sloupec doleva a poslední by zel prázdnotou.
   Užší okna mají vlastní rozložení níž v breakpointech. */
.footer__intro { grid-column: 5; }
.newsletter { grid-column: 6; }

/* ---- Newsletter ---- */
.newsletter { display: flex; flex-direction: column; align-items: stretch; }

.newsletter__field {
  border: 1px solid var(--c-degustace);
  background: var(--c-white);
  /* Pevná výška místo dopočítané z obsahu: popisek se od 27. 10. 2026
     ořezává na verzálky (kvůli přesnému usazení plovoucího popisku),
     takže by se výška pole měnila s velikostí písma podle šířky okna –
     a plovoucí popisek se centruje právě vůči ní. Devětapadesátka je
     ta, kterou mělo pole před ořezem. */
  height: 59px;
  padding: 8px 12px 0;
}

.newsletter__label {
  display: block;
  font-size: clamp(11px, .729vw, 14px);
  line-height: var(--lh-tight);
  color: var(--c-gray);
}

.newsletter__input {
  display: block;
  width: 100%;
  border: 0;
  padding: 4px 0 0;
  background: none;
  font-weight: 700;
  font-size: min(var(--fs-body), 16px);   /* strop 16 px (zadání 22. 10. 2026) */
  line-height: var(--lh-tight);
}
.newsletter__input:focus { outline: none; }
.newsletter__field:focus-within { border-color:#000 }
.newsletter__input::placeholder { color: var(--c-gray); font-weight: 400; }

.newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  font-size: clamp(11px, .729vw, 14px);
  line-height: var(--lh-body);
}
.newsletter__checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 0;
  border: 1px solid var(--c-black);
  background: var(--c-white);
  cursor: pointer;
}
.newsletter__checkbox:checked {
  border-color: transparent;
  background: url("../assets/icons/checkbox-box.svg") center / 20px 20px no-repeat;
}
.newsletter__consent a { text-decoration: underline; text-underline-offset: 4px; }

/* Tlačítko jen tak široké jako jeho text, u pravého okraje (22. 10. 2026). */
.newsletter__submit { margin-top: 20px; justify-content: flex-start; padding-inline: 16px; align-self: flex-end; width: auto; }
.newsletter__message { margin-top: 12px; font-size: var(--fs-sm); }
.newsletter__message:empty { display: none; }
.newsletter__message.is-error { color: #c22; }

/* ---- Spodní lišta ---- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 98px;
  padding-top: 24px;
  border-top: 1px solid var(--c-black);
}

.footer__social { display: flex; align-items: center; gap: 40px; }
.footer__social-link { display: block; color: var(--c-black); transition: opacity var(--t-fast); }
.footer__social-link:hover { opacity: .7; }
.footer__social-link img,
.footer__social-link svg { width: 36px; height: 36px; }

.footer__recipes-link,
.footer__legal a {
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 40px; }
.footer__legal a { transition: opacity var(--t-fast); }
.footer__legal a:hover { opacity: .6; }


/* =========================================================================
   BREAKPOINTY
   ========================================================================= */

/* ---------------- ≤ 1279 px ---------------- */
@media (max-width: 1279px) {
  .header__side { gap: 24px; }
  .header__nav { gap: 18px; }
  .hero__panel { padding-right: clamp(24px, 7vw, 120px); }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .footer__top { grid-template-columns: 1fr 1fr 1fr; column-gap: 32px; row-gap: 48px; }
  .footer__col { padding-right: 0; }
  .footer__intro { grid-column: 1 / 3; }
  .newsletter { grid-column: 3; }
}

/* ---------------- ≤ 1199 px ----------------
   Těsně nad hranicí hamburgeru se do řádku musí vejít obě menu i logo.
   Bez stažení písma a mezer leze „NÁŠ PŘÍBĚH“ pod logo. */
@media (max-width: 1199px) {
  .header__link { font-size: 13px; }
  .header__nav { gap: 10px; }
  .header__side { gap: 14px; }
  .header__side--end { gap: 16px; }
}

/* ---------------- ≤ 1023 px (tablet) ---------------- */
@media (max-width: 1023px) {
  .header { height: var(--header-h); }
  .header__inner { padding-top: 28px; height: 60px; }
  .header__logo { top: 28px; width: 86px; height: 86px; }
  .header__logo img { width: 86px; height: 86px; }

  .header--minimal { height: var(--header-h); }
  .header--minimal .header__inner { padding-top: 28px; height: 60px; }
  .header--minimal .header__logo { top: 28px; width: 86px; height: 86px; }
  .header--minimal .header__logo img { width: 86px; height: 86px; }

  /* Pod 1024 px se obě desktopová menu i ikona domů schovají
     a jejich místo přebírá hamburger s vysouvacím panelem. */
  .header__burger { display: block; }
  .header__side nav { display: none; }

  .benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  /* Ve dvousloupcové mřížce je box na celou šířku a stojí v řádku sám.
     Výšku by mu tedy neměl kdo dát – všechno uvnitř je odsazené
     absolutně – tak si ji určí sám poměrem stran z návrhu. */
  .box { grid-column: 1 / -1; aspect-ratio: 1124 / 552; }

  .process__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .chef__slide { flex-direction: column; }
  .chef__photo { flex: 0 0 auto; }
  .chef__photo img { aspect-ratio: 16 / 10; }
  .chef__body { gap: 24px; }
  .chef__head { grid-template-columns: 1fr; gap: 8px; }
  .chef__name { max-width: none; }

  .reviews__inner { margin-top: 40px; }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .review__body { margin-top: 32px; }
  .review__head { gap: 16px; }


  .recipes__viewport { margin-top: 24px; }
  .recipes__nav { margin-top: 32px; }
  .recipes__track { gap: 4%; }
  .recipe { flex: 0 0 65%; flex-direction: column-reverse; gap: 16px; padding: 20px 0; }
  .recipe__body,
  .recipe__media { flex: 0 0 auto; }

  .footer__top { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .footer__intro { grid-column: 1 / -1; }
  .newsletter { grid-column: 1 / -1; max-width: 420px; }
  .footer__bottom { margin-top: 56px; }
}

/* ---------------- ≤ 899 px (hero se přeskládá) ---------------- */
@media (max-width: 899px) {
  .hero__stage { display: flex; flex-direction: column; align-items: center; }
  .hero__viewport { width: 100%; aspect-ratio: auto; max-height: none; }
  .hero__slide { flex-direction: column-reverse; height: auto; }
  .hero__panel { flex: 0 0 auto; padding: 28px 24px 32px; gap: 20px; }
  .hero__panel-bottom { flex: 0 0 auto; gap: 20px; }
  .hero__media { flex: 0 0 auto; aspect-ratio: 3 / 2; border-radius: 0; }
  .hero__nav { position: static; transform: none; margin-top: 20px; background: var(--c-light-gray); }

  /* Bez pevného poměru stran nemá výřez z čeho vzít výšku: v režimu
     prolínání leží všechny slidy na sobě přes `position: absolute`,
     takže uvnitř nezůstane nic, co by ho rozepřelo, a slider zmizel.
     Na úzkém okně se proto vrací do toku všechny – pás je mřížka
     o jedné buňce a slidy se do ní skládají na sebe. Výška výřezu
     tím odpovídá nejvyššímu slidu a při přepnutí se nemění; kdyby se
     do toku vracel jen vybraný slide, výška by skočila podle délky
     jeho textu a s ní by poskočila i prolínaná fotka. */
  .hero__viewport[data-rezim="prolnuti"] .hero__track { display: grid; }
  .hero__viewport[data-rezim="prolnuti"] .hero__slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    /* Slide se roztáhne na výšku nejvyššího z nich a kratší text by
       se ve zbylém místě posunul dolů – u `column-reverse` packuje
       `flex-start` ke spodní hraně. Fotka by pak u každého slidu
       začínala jinde a při přepnutí by poskočila. */
    justify-content: flex-end;
  }
}

/* ---------------- ≤ 767 px (mobil) ---------------- */
@media (max-width: 767px) {
  .slider-nav {
    --arrow-w: 26px; --arrow-h: 24px;
    --dot: 9px; --dot-active: 18px; --nav-gap: 16px;
    height: 52px;
    padding-inline: 18px;
  }
  /* Holé ovládání (recepty, šéfkuchaři, recenze) je v návrhu vysoké jen
     jako kresba šipky – 24,7 px – a bez bočního odsazení: obě šipky
     i s mezerou měří 67 px. Dotyková plocha 48 px zůstává, jen ji nese
     pseudoprvek uvnitř tlačítka, takže řádek nenafukuje. */
  .slider-nav:not(.hero__nav) {
    height: var(--arrow-h);
    padding-inline: 0;
  }
  .slider-nav:not(.hero__nav) .slider-nav__arrow { position: relative; }
  .slider-nav:not(.hero__nav) .slider-nav__arrow::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 48px; height: 48px;
    transform: translate(-50%, -50%);
  }
  /* Pilulka v hero má v návrhu 12 px po stranách (133,2 na 109,2 teček). */
  .hero__nav { padding-inline: 12px; }
  
  
  /* Vozík je v návrhu 40 × 40 kresby, tedy 20 px. */
  .header__cart { --kosik-ikona: 20px; }
  /* Bublina s počtem stojí nalevo od vozíku. Napravo, jako na
     desktopu, by přetekla okraj stránky – vozík je na telefonu
     poslední prvek u pravého okraje. V návrhu měří 43 kresby na
     40 vozíku, tedy o kousek víc než ikona. */
  .header__cart-count {
    left: auto;
    right: calc(var(--kosik-ikona) * .95);
    top: 0;
    --bublina: calc(var(--kosik-ikona) * 1.07);
    font-size: calc(var(--kosik-ikona) * .55);
  }

  /* Mobilní návrh (19. 10. 2026): bílý pruh 63 px se samotným nápisem
     (šipka na telefonu není) a pod ním šedá lišta kategorií 43 px.
     Obojí leží uvnitř <header>, takže --header-h drží součet 106 –
     o tolik si tělo odsazuje obsah a od tolika se počítá i gradient
     v heru. */
  .header { height: var(--header-h); }
  .header__inner { padding-top: 0; height: 63px; gap: 12px; }
  .header__side--end { gap: 20px; }
  /* Nápis je v návrhu 151 × 58 kresby, tedy 75 × 29, horní hrana na 17. */
  .header__logo { top: 17px; width: 75px; height: 29px; }
  .header__logo img.header__logo-sipka { display: none; }
  .header__logo img.header__logo-text { display: block; width: 75px; height: 29px; }

  /* Připnutí na telefonu nic nemění – nápis tu svítí pořád a lišta
     kategorií má zůstat vidět, jinak by obsah pod hlavičkou poskočil. */
  .header.is-pripnuta { height: var(--header-h); }
  .header.is-pripnuta .header__inner { height: 63px; }
  .header.is-pripnuta .header__logo { top: 17px; width: 75px; height: 29px; transform: translateX(-50%); }
  .header.is-pripnuta .header__logo-text { width: 75px; height: 29px; }

  /* Pokladna lištu kategorií nemá, takže si drží jen bílý pruh. */
  .header--minimal { height: 63px; }
  .header--minimal .header__inner { padding-top: 0; height: 63px; }
  .header--minimal .header__logo { top: 17px; width: 75px; height: 29px; }

  /* ---- Lišta kategorií ----
     Návrh: pruh 43 px, výplň #ededed, položky od levého okraje
     stránky s roztečí 26, aktivní černá, ostatní #666666.
     Výška verzálek 14,5 → 20 px. Na úzkém displeji se dá odrolovat
     do strany, aby se dlouhé názvy kategorií neschovaly. */
  .kat-lista {
    display: block;
    height: 43px;
    background: var(--c-kat-lista);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .kat-lista::-webkit-scrollbar { display: none; }
  .kat-lista__seznam {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    padding-inline: var(--page-gutter);
    white-space: nowrap;
  }
  .kat-lista__odkaz {
    font-family: var(--font-body);
    font-weight: 700;
    /* Návrh: výška verzálek 11 px a „POKRUTINY“ 75 široké – to sedí
       na 15 px, tedy na stejnou velikost, jakou mají odkazy
       v desktopové hlavičce (--fs-body je na telefonu 15). */
    font-size: var(--fs-body);
    line-height: 1;
    letter-spacing: var(--ls-bold);
    color: var(--c-text-secondary);
  }
  .kat-lista__odkaz.is-active { color: var(--c-black); }
  .kat-lista__odkaz:hover,
  .kat-lista__odkaz:focus-visible { color: var(--c-black); }

  /* ---- Hero ----
     Návrh (podklady/mobil.pdf, str. 2) má slider přes celou šířku:
     fotka 390 × 301 u obou hran, pod ní béžový panel s textem a
     tečky ležící ve fotce 17 px nad jejím spodkem. Šipky na telefonu
     nejsou, přepíná se tažením. */
  .hero { --hero-foto: 301 / 390; padding-inline: 0; }
  .hero__viewport { border-radius: 0; }
  .hero__media { aspect-ratio: 390 / 301; }

  /* Tečky sedí ve fotce, a ta je vysoká podle poměru z šířky okna –
     odtud ten výpočet. 57 = výška pilulky 40 + odstup ode dna 17. */
  .hero__nav {
    position: absolute;
    left: 50%; top: calc(100vw * var(--hero-foto) - 57px);
    transform: translateX(-50%);
    margin-top: 0;
    height: 40px;
    background: rgba(255, 255, 255, .85);
  }
  .hero__nav .slider-nav__arrow { display: none; }

  /* Titulek je v návrhu výrazně větší než jinde na stránce – „TAJNÁ
     PŘÍSADA DO“ měří 238 px z 390. Sedí mu proto vlastní velikost,
     ne globální --fs-h1 (ten drží nadpisy sekcí). */
  .hero__title { font-size: 55px; line-height: 57px; }

  /* Na desktopu se perex krátí na tři řádky, protože stojí vedle
     fotky a musí se vejít. Pod ní místo je – návrh jich má pět. */
  .hero__perex { -webkit-line-clamp: 5; font-size: 16px; }

  /* ---- Velikosti textů podle mobilního návrhu ----
     Odměřeno porovnáním šířky konkrétních řetězců v PDF s tím, co
     vykreslí prohlížeč na 390px okně; u každé položky je v komentáři
     šířka z návrhu a z ní dopočítaná velikost.

     Mobilní škála není jen zmenšenina desktopové: nadpisy sekcí jsou
     proti ní větší (viz --fs-h2 ve variables.css), kdežto drobné texty
     menší. Proto jsou tu po jednotlivých komponentách. */

  /* „zdroj esenciálních mastných“ 157 px → 13,4 */
  .benefit__text { font-size: 14px; line-height: 20px; }

  /* „První krok je pečlivý výběr semen od českých“ 253 px → 13,9 */
  .step__text { font-size: 14px; line-height: 20px; }

  /* „01“ 18 px široké, 30 vysoké → 35 */
  .step__number { font-size: 35px; }

  /* „LNĚNÝ OLEJ“ 77 px → 15,1; „250 ml“ 44 px → 15,4 */
  /* Mobil/Body 16 Bold – název i objem jsou v návrhu 16 px tučně. */
  .product__name,
  .product__volume { font-size: 16px; }
  .product__volume { font-weight: 700; }

  /* Nadpis boxu vlastní sady je v návrhu stejně velký jako nadpisy
     sekcí („SESTAVTE SI VLASTNÍ SADU“ 291 px → 45,8). */
  .box__title { font-size: var(--fs-h2); line-height: var(--lh-heading); }

  /* Nadpisy sekcí jsou v návrhu zarovnané doleva na okraj stránky,
     ne na střed jako na desktopu – všechny v PDF začínají na x 20–21,
     což u téhle řezu písma odpovídá okraji 24. */
  .section-title { text-align: left; }
  /* U receptů stojí nadpis ve sloupci se zarovnáním na střed, takže
     samotné zarovnání textu nestačí – musí se posunout celý blok. */
  .recipes__inner > .section-title { align-self: flex-start; }

  /* „A BAMBULÍ“ 100 px → 39 */
  .recipe__title { font-size: 39px; }

  /* Karty receptů jsou v pásu stejně vysoké jako ta nejvyšší a kratší
     titulek nechával volné místo – jenže u `column-reverse` packuje
     `flex-start` obsah ke spodní hraně, takže se o to místo posunula
     dolů fotka. Fotka a titulek proto patří nahoru (`flex-end` je
     u obráceného směru horní hrana) a štítky dolů. */
  /* Mezera za poslední kartou – viz .process__grid. */
  .recipes__track { padding-right: var(--page-gutter); }

  .recipe { justify-content: flex-end; }
  .recipe__body { flex: 1 1 auto; }
  .recipe__tags { margin-top: auto; }

  /* Karta produktu má v návrhu odsazení textu 8 px od hrany, ne 16 –
     v 161px kartě je to znát. Odměřeno z rámečku karty (x 20) a
     začátku názvu (x 28). */
  /* Product / Info má v návrhu odsazení 6 px dokola. */
  .product__info { padding: 6px; }

  /* Reference šéfkuchařů mají v návrhu zajíždět za okraj okna na obě
     strany, ne končit na okraji stránky. Odsazení proto nemá celá
     sekce a výřez sahá od hrany k hraně; nadpis si ho bere sám, ten
     na okraji stránky zůstat má. Šipky se centrují přes celou šířku
     okna, takže sedí samy. Fotka první karty tím začíná u levé hrany,
     stejně jako v návrhu. */
  .chef { padding-inline: 0; }
  .chef .section-title { padding-inline: var(--page-gutter); }
  /* Ve výchozím stavu ale karta na okraji stránky začínat má – pás si
     odsazení bere sám. Zajíždění do krajů se tím nemění: výřez sahá
     od hrany k hraně, takže odjíždějící karta mizí až pod okrajem
     okna, ne na okraji stránky. */
  .chef__track {
    padding-left: var(--page-gutter);
    /* A stejná mezera za poslední kartou, viz .process__grid. */
    padding-right: var(--page-gutter);
  }

  /* „Makový olej je můj nejoblíbenější! Skvělý na“ 253 px → 14,4 */
  .review__text { font-size: 14px; line-height: 20px; }

  /* „Helebrandtová“ 123 px → 20,1 */
  .review__author { font-size: 20px; line-height: 24px; }

  /* „KONTAKT“ 50 px → 13 */
  .footer__heading { font-size: 13px; }

  /* Nadpis nad newsletterem je v návrhu nadpisovým písmem a stejně
     velký jako nadpisy sekcí, ne drobný popisek jako na desktopu:
     „ZŮSTAŇME V KONTAKTU“ měří v návrhu 254 px a přesně tolik vyjde
     .section-title na 390px okně. */
  .footer__heading--lg {
    /* Dole 33 px – v návrhu tolik dělí účtařskou linku nadpisu od
       verzálek prvního řádku perexu. */
    margin-bottom: 33px;
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-h1);
    text-transform: uppercase;
  }

  /* Věta nad benefity: dřív na telefonu běžící pás, od 9. 11. 2026
     statická jako na desktopu (krátká věta „Proč si naše oleje
     zamilujete“). Mobilní velikost písma zůstává. */
  .benefits__lead-text { font-size: 24px; }

  /* Tlačítko přes celou šířku panelu, popisek vlevo a šipka vpravo.
     Šipka se kreslí z pozadí, aby se kvůli ní nemusela měnit šablona;
     4 px vpravo si drží místo pro stín, jinak by přetekl do okraje. */
  .hero__cta {
    justify-content: space-between;
    width: calc(100% - 4px);
    /* Komponenta „Mobil / Button" má v návrhu 56 px – stejně jako
       všechna ostatní celošířková tlačítka na telefonu. */
    height: 56px;
    padding: 0 20px;
    font-size: var(--fs-body);
  }
  .hero__cta::after {
    content: "";
    width: 45px; height: 41px;
    background: url("../assets/icons/arrow.svg") no-repeat center / contain;
  }
  /* Na desktopu nese šipku span .btn-sipka (komponenta primary-button);
     tady ji kreslí ::after výš, takže span zůstává schovaný. */
  .hero__cta .btn-sipka { display: none; }

  .benefit { padding: 0; gap: 16px; }
  .benefit__icon { width: 48px; height: 48px; }

  /* Na mobilu se dlaždice rozloží na výšku: text nahoře, fotka pod ním.
     Stín by pod srovnanou fotkou visel v prázdnu, tak se schová. */
  .box { display: flex; flex-direction: column; aspect-ratio: auto; }
  .box__content { position: static; width: auto; padding: 24px 24px 0; }
  .box__scene { position: static; width: auto; aspect-ratio: auto; }
  .box__bottles { position: static; width: 46%; margin: 0 auto -14%; padding-top: 24px; }
  .box__media { position: static; width: 78%; margin: 0 auto; padding: 0 0 24px; }

  /* Návrh má karty 169 px při okrajích 20 a mezeře 12 (popis komponenty
     „Mobil / Product Card"). S 20px mezerou vycházela karta na 165. */
  .products__grid { gap: 12px; }
  /* Výšku drží odsazení dopočítané z výšky verzálek, mění se jen strany. */
  /* Na telefonu má návrh písmo 12 px a odsazení 6 px dokola, tedy box
     21 px místo desktopových 34. Výšku dál drží dopočet z výšky
     verzálek (1cap), mění se jen čísla. */
  .product__badge {
    padding: calc((21px - 1cap) / 2) 6px;
    font-size: 12px;
  }

  /* Recenze z Heureky jedou na telefonu do strany, jako v návrhu:
     karta přes tři čtvrtiny šířky, další vykukuje a listuje se
     tažením – šipky u nich návrh nemá. Posouvání řeší prohlížeč sám
     (scroll-snap), žádný javascript k tomu není potřeba. Pás sahá až
     za okraj stránky, aby karta nekončila v půlce odsazení. */
  .reviews { overflow-x: clip; }
  .reviews__grid {
    display: flex;
    grid-template-columns: none;
    /* Mezera je stejná jako okraj stránky, a to schválně: pás začíná
       24 px od kraje, ale ořezává se až na hraně okna. S menší mezerou
       zůstal po přepnutí z odjeté karty vidět proužek textu v tom
       odsazení – s touhle se její pravá hrana trefí přesně na kraj. */
    gap: var(--page-gutter);
    /* Posun se musí odjet, ne skočit – stejně jako u referencí
       šéfkuchařů, které jedou na témže slideru. */
    transition: transform var(--t-slide);
    will-change: transform;
    /* Mezera za poslední kartou – viz .process__grid. */
    padding-right: var(--page-gutter);
  }
  .reviews__grid > * { flex: 0 0 76%; }

  .reviews__nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 24px;
    background: none;
    padding: 0;
    height: auto;
  }

  /* Tlačítko na Heureku je v návrhu přes celou šířku, popisek vlevo
     a šipka u pravé hrany – stejně jako „Více“ v heru. */
  .reviews__cta-btn {
    justify-content: space-between;
    width: calc(100% - 4px);
    padding-inline: 20px;
  }
  .reviews__cta-btn { gap: 16px; }

  /* Vodorovná karusel místo sloupce pod sebou: karta zabírá 76 %
     šířky, takže další vykukuje a je poznat, že se dá posouvat.
     Pás přetéká doprava až za okraj stránky (data-bleed), proto se
     ořezává až na sekci. */
  .process { overflow-x: clip; }
  .process__grid {
    display: flex;
    grid-template-columns: none;
    /* Stejně jako u recenzí: mezera musí být na šířku okraje stránky,
       jinak po přepnutí vykoukne proužek odjeté karty. */
    gap: var(--page-gutter);
    /* A stejně jako u recenzí i referencí se posun odjíždí, neskáče.
       Mřížka přechod nikdy nepotřebovala, tak ho tu neměla. */
    transition: transform var(--t-slide);
    will-change: transform;
    /* Mezera za poslední kartou, aby na konci pásu nedosedla na hranu
       okna. Slider si pravý padding tracku připočítá k délce pásu. */
    padding-right: var(--page-gutter);
  }
  .process__grid > .step { flex: 0 0 76%; }

  .process__nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 24px;
    background: none;
    padding: 0;
    height: auto;
  }

  /* Reference šéfkuchařů: v návrhu další karta vykukuje, ať je poznat,
     že se dá listovat. Karta proto nezabírá celou šířku výřezu. */
  .chef__track { gap: 16px; }
  .chef__slide { flex: 0 0 85%; width: auto; }

  /* ---- Degustační a dárkové sady + box vlastní sady ----
     Na desktopu stojí karta sady (424) a box (1124) vedle sebe v jednom
     řádku. Návrh je na telefonu rozpojuje: nejdřív karta přes celou
     šířku, pod ní šedý pruh s vlastní sadou od kraje ke kraji. */
  .products--sady .products__grid { grid-template-columns: minmax(0, 1fr); }
  .products--sady .box {
    grid-column: auto;
    grid-row: auto;
    order: 2;              /* v kódu je box první, v návrhu až pod kartou */
    aspect-ratio: auto;
    margin-inline: calc(-1 * var(--page-gutter));
    padding: 40px var(--page-gutter) 48px;
  }

  /* Uvnitř boxu je na desktopu všechno absolutně napozicované kolem
     fotky. Na telefonu z toho má být obyčejný sloupec v pořadí nadpis,
     fotka, perex, tlačítko. Obalový .box__content proto mizí přes
     `display: contents` a jeho obsah se řadí přímo v boxu. */
  .products--sady .box { display: flex; flex-direction: column; }
  .products--sady .box__content { display: contents; }
  .products--sady .box__title { order: 1; }
  .products--sady .box__scene {
    order: 2;
    position: relative;
    right: auto; bottom: auto;
    width: 100%;
    margin: 28px 0 24px;
  }
  .products--sady .box__perex { order: 3; margin-top: 0; }
  /* „Chci svoji sadu“ – na telefonu stejné tlačítko jako ODESLAT
     v patičce a POUŽÍT v pokladně (10. 11. 2026): žluté, 48 px,
     GT Pressura Bold 16, proklad 0,32, odsazení 14, bez šipky.
     Rozložení boxu (perex a tlačítko v jednom řádku) je na konci
     css/mobil.css. Do 9. 11. celošířkové 56 px s písmem 36 a šipkou,
     9. 11. krátce bílé s písmem 22. */
  .products--sady .box .btn--compact {
    order: 4;
    height: 48px;
    padding: 0 14px;
    font-size: 16px;
    letter-spacing: 0.32px;
    white-space: nowrap;
  }
  .process__cta { flex-direction: column; text-align: center; }
  .step__head { grid-template-columns: auto 1fr; gap: 20px; }
  .video-card { max-height: 78vh; }

  .recipe { flex: 0 0 82%; }

  /* ---- Patička podle mobilního návrhu (str. 2) ----
     Návrh má na telefonu jen tři bloky: newsletter, KONTAKT (adresa |
     osoba s ikonami sítí) a právní odkazy. Fakturační adresa s
     IČO/DIČ/č. ú., odznak „Ověřeno zákazníky“, odkaz RECEPTY ani odkaz
     O COOKIES v něm nejsou (rozhodnuto 15. 10.) – v kódu zůstávají
     kvůli desktopu, na telefonu se skrývají.

     Celá patička je tu jedna dvousloupcová mřížka. Je to kvůli ikonám
     sítí: v návrhu stojí pod sloupcem s kontaktní osobou, ne pod celým
     blokem, a přitom jsou v kódu až ve spodní liště. Obaly
     .footer__top a .footer__bottom proto mizí přes `display: contents`
     a jejich obsah se řadí přímo v .footer__inner, kde si každý blok
     řekne o své místo. Levý sloupec sahá přes oba řádky, takže ikony
     můžou začít hned pod telefonním číslem. */
  /* Patička má v návrhu na rozdíl od zbytku stránky teplý podklad
     (surface-warm #f5f5f0) – začíná přesně na horní hraně patičky a
     jde až na konec stránky. Na desktopu zůstává bílá, tam návrh
     nemám. */
  .footer {
    background: var(--c-chef-bg);
    padding-top: 20px;   /* návrh: verzálky nadpisu začínají na y 19,5 */
    padding-bottom: 20px;
  }
  .footer__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;   /* návrh: druhý sloupec začíná na x 201 */
  }
  .footer__top,
  .footer__bottom { display: contents; }

  .footer__col--fakturace,
  .footer__recipes-link,
  .footer__legal-cookies,
  .footer__col--provozovna > .footer__heading,
  .footer__col--kontakt > .footer__heading,
  .footer__heading-desktop { display: none; }

  .footer__heading-mobil { display: inline; }

  .footer__intro { grid-area: 1 / 1 / 2 / -1; }
  .newsletter    { grid-area: 2 / 1 / 3 / -1; }
  .footer__heading--mobil-kontakt {
    display: block;
    grid-area: 3 / 1 / 4 / -1;
    /* Dole 9 px – v návrhu je tolik mezi účtařskou linkou nadpisu a
       verzálkami prvního řádku adresy. Nahoře 48: v návrhu je mezi
       souhlasem a nadpisem 104, ale 62 z toho zabírá velké tlačítko,
       které tu podle rozhodnutí z 15. 10. není. */
    margin: 48px 0 9px;
  }
  .footer__col--provozovna { grid-area: 4 / 1 / 6 / 2; }
  .footer__col--kontakt    { grid-area: 4 / 2 / 5 / 3; }
  .footer__social          { grid-area: 5 / 2 / 6 / 3; align-self: start; margin-top: 30px; }
  .footer__legal           { grid-area: 6 / 1 / 7 / -1; }

  .footer__col { padding-right: 0; }

  /* „Rodinná lisovna“ 99 px → 15,6; „ondrej@vpresu.cz“ 116,5 → 15,9;
     „+420 777 244 041“ 106 → 15,6. Řádkování 22 (rozestup verzálek
     mezi řádky v návrhu). Odkazy na mapy jdou ve stejném rytmu jako
     adresa, žádná mezera navíc před nimi v návrhu není. */
  .footer__text,
  .footer__links { font-size: 16px; line-height: 22px; }
  /* 10, ne 0: oba odstavce ořezává text-box-trim, takže mezi
     účtařskou linkou adresy a verzálkami odkazu nezbyde žádné
     prokládání a řádky by na sebe dosedly po 12 px místo 22. */
  .footer__links { margin-top: 10px; }

  /* Ikony 36 px s mezerou 24 (návrh: 201..236,5 a 261..296,5). */
  .footer__social { gap: 24px; }

  /* Spodní lišta na telefonu neexistuje jako pruh – čára je až nad
     právními odkazy, protože ikony sítí jsou výš u kontaktu. */
  .footer__legal {
    margin-top: 31px;    /* návrh: 31,5 od účtařské linky adresy k čáře */
    padding-top: 20px;   /* návrh: 21,5 od čáry k verzálkám odkazů */
    border-top: 1px solid var(--c-black);
  }
  /* „OBCHODNÍ PODMÍNKY“ 123 px → 13,3. Rozestup řádků v návrhu 29,
     mezera mezi odkazy 17. */
  /* Velikost musí být i na seznamu, ne jen na odkazu – výšku řádku
     drží řádkový box položky, ten by jinak zůstal na 15,2/1,4. */
  .footer__legal a { font-size: 13px; }
  .footer__legal ul { font-size: 13px; line-height: 1.2; gap: 13px 16px; }

  /* ---- Newsletter ----
     Návrh má pole a žluté tlačítko vedle sebe v jednom řádku:
     pole 20..268, mezera 12, tlačítko 280..370. Souhlas je pod nimi
     přes celou šířku. */
  .newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    column-gap: 12px;
    align-items: start;
    margin-top: 16px;   /* návrh: 16 od účtařské linky perexu k rámečku pole */
  }
  .newsletter__field   { grid-area: 1 / 1 / 2 / 2; height: 56px; padding: 9px 12px 0; }
  .newsletter__submit  {
    grid-area: 1 / 2 / 2 / 3;
    align-self: auto;
    width: 90px;
    min-height: 56px;
    margin-top: 0;
    padding-inline: 0;
    justify-content: center;
  }
  /* Souhlas se v návrhu láme na šířce pole (text končí na x 263),
     ne pod tlačítkem – drží proto jen první sloupec mřížky. */
  .newsletter__consent { grid-area: 2 / 1 / 3 / 2; }
  .newsletter__message { grid-area: 3 / 1 / 4 / -1; }

  /* „Váš email“ v návrhu měří 44,5 px a má výšku verzálek 8,5 → 12 px. */
  .newsletter__label { font-size: 12px; }

  /* „Souhlasím se zasíláním obchodních sdělení“ 210 px → 11,9. */
  .newsletter__consent { font-size: 12px; line-height: 17px; margin-top: 12px; }
}

/* ---------------- ≤ 400 px (velmi úzký viewport) ---------------- */
@media (max-width: 400px) {
  .header__side--end { gap: 12px; }
  /* Logo tu dřív sjíždělo na 64 – to platilo pro šipku. Na telefonu
     je v hlavičce samotný nápis, ten se vejde i na 320 px. */
  /* Dva sloupce drží i na 390 px – návrh je tak má u výhod i u výpisu
     produktů. Dřív se tu obojí rozpadalo do jednoho sloupce. */
  .recipe { flex: 0 0 90%; }
  /* Ve sloupci zpátky stretch – svislé centrování tří sloupců (1. 11.
     2026) platí jen pro řádek na desktopu, tady by text vycentrovalo
     vodorovně. */
  .product__info { flex-direction: column; align-items: stretch; gap: 16px; }
  .product__actions { align-self: stretch; justify-content: space-between; }
  .product__divider { display: none; }

  /* Karta je na dvou sloupcích 161 px široká a 72px košík z desktopu
     by z ní vytlačil přeškrtnutou cenu pod novou. V návrhu stojí obě
     ceny vedle sebe a košík je u pravé hrany, tak se zmenší na 44 –
     pořád dost velké na prst. Ceny tím pádem jdou do řádku. */
  .product__cart { width: 44px; height: 44px; }
  .product__cart img { width: 28px; height: 28px; }
  .product__prices { flex-direction: row; align-items: baseline; gap: 8px; }
}


/* =========================================================================
   POKLADNA
   Layout a rozměry odpovídají návrhu „pokladna-desktop“ (1920 × 2985).
   Levý sloupec (formulář) 448 px, pravý (souhrn) 448 px, mezi nimi 128 px
   s dělicí linkou přesně na středu stránky.
   ========================================================================= */

/* Stejný trik jako u homepage – texty se měří od verzálek po účaří, jinak
   se všechna odsazení odečtená z návrhu posunou o cca 0,18em.             */
.checkout-section__title,
.checkout-section__note,
.checkout-login,
.checkout-field__label,
.newsletter__label,
.checkout-check__label,
.checkout-option__title,
.checkout-option__desc,
.checkout-option__price,
.checkout-summary__name,
.checkout-summary__volume,
.checkout-summary__price,
.checkout-summary__row,
.checkout-summary__total,
.checkout-summary__tax,
.checkout-suggest__title,
.checkout-suggest__name,
.checkout-suggest__price,
.checkout-legal__links a {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

.page-checkout { background: var(--c-checkout-bg); }

/* Hlavička pokladny – jen logo a košík, podklad je společný se stránkou. */
.header--minimal { background: transparent; }

/* Svislá linka jde od horní hrany loga až po patičku pokladny, proto sedí
   na obalu celé stránky, ne uvnitř mřížky sloupců.                        */
.checkout-page { position: relative; }
.checkout-page::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 200px;   /* linka nezačíná u loga, ale až na úrovni obsahu */
  bottom: 0;
  width: 1px;
  background: var(--c-degustace);
}

.checkout { padding-bottom: 120px; }

.checkout__inner {
  /* Kvůli svislému předělu mezi sloupci – viz ::before níž. */
  position: relative;
  display: grid;
  grid-template-columns: var(--co-col) var(--co-col);
  justify-content: center;
  column-gap: var(--co-gap);
  padding-top: 42px; /* hlavička 158 px → obsah začíná na 200 px */
  padding-inline: var(--page-gutter);
}

/* Návrh dělí pokladnu svislou linkou border/default přesně na středu
   stránky; začíná na horní hraně obsahu a jde až dolů. */
.checkout__inner::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 42px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--c-degustace);
}

/* Pravý sloupec začíná na 200 px, levý o 8 px níž (verzálky popisku). */
.checkout__form { padding-top: 8px; }

/* ------------------------------------------------------------------ */
/* Sekce formuláře                                                     */
/* ------------------------------------------------------------------ */

.checkout-section { margin-top: 48px; }
/* Kontakt je od zrušení expresní pokladny první sekcí formuláře,
   takže nahoře nic neodsazuje (26. 10. 2026). */
.checkout-section--contact { margin-top: 0; }
.checkout-section--payment,
.checkout-section--billing { margin-top: 41px; }

.checkout-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.checkout-section__head .checkout-section__title { margin-bottom: 0; }

.checkout-section__title {
  margin-bottom: 32px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-co-h);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.checkout-section--shipping .checkout-section__title { margin-bottom: 28px; }
.checkout-section__title--tight { margin-bottom: 16px; }

.checkout-section__note {
  margin-bottom: 24px;
  font-size: var(--fs-co-base);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

.checkout-login {
  font-size: var(--fs-co-sm);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--t-fast);
}
.checkout-login:hover { color: var(--c-ink-muted); }

/* ------------------------------------------------------------------ */
/* Pole formuláře                                                      */
/* ------------------------------------------------------------------ */

.checkout-fields { display: grid; gap: 16px; }
.checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.checkout-field {
  position: relative;
  display: block;
  height: var(--co-field-h);
  padding: 11px 12px 0;
  border: 1px solid var(--c-degustace);
  background: var(--c-white);
}

.checkout-field__label {
  display: block;
  font-size: var(--fs-co-label);
  line-height: var(--lh-tight);
  color: var(--c-ink-muted);
}

/* Input se nesmí ořezávat přes text-box-trim – prohlížeč u formulářových
   prvků ořízne i dolní dotažnice (Vaclava, Praha 6…). Místo toho má input
   plnohodnotný řádek a odsazení je dopočítané tak, aby verzálky seděly
   na stejné hraně jako v návrhu.                                        */
.checkout-field__input {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: 22px;
  color: var(--c-ink);
}
/* Údaje doplněné prohlížečem (Chrome, Edge, Safari) dostávají modrý
   podklad, který nejde přebít `background` – kreslí se nad ním. Přebije
   ho až vnitřní stín v barvě pole; `transition` na barvu pozadí odsune
   okamžik, kdy si ho prohlížeč nakreslí zpátky. Text si barvu musí říct
   taky zvlášť (-webkit-text-fill-color).

   Třídu .checkout-field__input nosí i rozbalovací seznam se zemí, takže
   pravidlo platí pro textová pole i pro něj; `select` je vypsaný zvlášť
   jen kvůli čitelnosti. */
.checkout-field__input:-webkit-autofill,
.checkout-field__input:-webkit-autofill:hover,
.checkout-field__input:-webkit-autofill:focus,
.checkout-field__input:-webkit-autofill:active,
select.checkout-field__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--c-white) inset;
  box-shadow: 0 0 0 1000px var(--c-white) inset;
  -webkit-text-fill-color: var(--c-ink);
  caret-color: var(--c-ink);
  transition: background-color 600000s 0s;
}
.checkout-field__input:focus { outline: none; }
.checkout-field__input::placeholder { color: var(--c-ink-faint); font-weight: 400; }

/* Select – nativní šipku schováme a nakreslíme vlastní 12 × 7 px */
.checkout-field--select .checkout-field__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
}
.checkout-field--select::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 12px;
  height: 7px;
  margin-top: -3px;
  background: var(--c-ink);
  clip-path: polygon(0 0, 50% 100%, 100% 0, 88% 0, 50% 76%, 12% 0);
  pointer-events: none;
}

/* ---- Zaškrtávátko ---- */
/* Zaškrtávátko drží u prvního řádku, ne uprostřed celého odstavce –
   souhlas se zasíláním novinek je od 26. 10. 2026 na tři řádky a na
   svislém středu by políčko viselo někde v půlce věty. Řádek měří
   14 × 1,4 = 19,6 px a políčko 20, takže u jednořádkového popisku
   („uložit údaje") je to proti středu rozdíl 0,2 px. */
.checkout-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  cursor: pointer;
}
.checkout-check__box {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 0;
  border: 1px solid var(--c-field-line);
  background: var(--c-white);
  cursor: pointer;
}
.checkout-check__box:checked {
  border-color: transparent;
  background: url("../assets/icons/checkbox-box.svg") center / 20px 20px no-repeat;
}
.checkout-check__label {
  font-size: var(--fs-co-sm);
  line-height: var(--lh-body);
  color: var(--c-ink);
}
/* Popisek je výš v seznamu oříznutý na výšku verzálek (text-box-trim),
   takže jeho první řádek začíná přesně na horní hraně písmen – a protože
   má .checkout-check `align-items: flex-start`, začínalo tam i 20px
   políčko a viselo pod textem. Posuneme text o polovinu rozdílu, aby se
   obojí opticky krylo. Bez podpory ořezu se nic neposouvá, tam sedí
   zarovnání samo. */
@supports (text-box-trim: trim-both) {
  .checkout-check__label { margin-top: calc((20px - .71em) / 2); }
}
@supports (text-box-trim: trim-both) and (margin-top: 1cap) {
  .checkout-check__label { margin-top: calc((20px - 1cap) / 2); }
}
/* Odkaz na zásady ochrany osobních údajů v textu souhlasu. Podžití
   je stejné jako u odkazů v patičce pokladny. */
.checkout-check__label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity var(--t-fast);
}
.checkout-check__label a:hover { opacity: .6; }

/* ------------------------------------------------------------------ */
/* Volby dopravy, platby a fakturační adresy                           */
/* ------------------------------------------------------------------ */

.checkout-options { display: grid; gap: 12px; }
.checkout-options--tight { gap: 8px; }

.checkout-option {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 15px;
  border: 1px solid var(--c-option-line);
  border-radius: 8px;
  background: var(--c-option-bg);
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

/* Vybraná volba má tmavou zeleň (status-success-text), ne svítivou
   --c-green z odznaku OVĚŘENO – stejnou barvu nese i kolečko. */
.checkout-option.is-selected {
  padding: 14px;              /* 2px rámeček + 14 = stejná vnitřní hrana */
  border: 2px solid var(--c-in-stock);
  background: var(--c-white);
}
.checkout-option:hover { border-color: var(--c-ink-faint); }
.checkout-option.is-selected:hover { border-color: var(--c-in-stock); }

.checkout-radio {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--c-option-line);
  border-radius: 50%;
  background: var(--c-white);
  cursor: pointer;
}
.checkout-radio:checked {
  border: 2px solid var(--c-in-stock);
  background: radial-gradient(circle, var(--c-black) 0 5px, var(--c-white) 5px);
}

.checkout-option__body { flex: 1 1 auto; min-width: 0; }

.checkout-option__title {
  display: block;
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  color: var(--c-ink);
}

.checkout-option__desc {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-co-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}
/* Bez vybrané výdejny Zásilkovny se řádek nevypisuje. Vlastní pravidlo
   je potřeba proto, že `display: block` výš přebíjí výchozí chování
   atributu hidden a prázdný řádek pak rozhazoval řádkování volby. */
.checkout-option__desc[hidden] { display: none; }

/* Loga platebních metod u brány – podle Figmy (Pokladna / Desktop,
   „Frame 161“) stojí vpravo na řádku s názvem, vycentrovaná na jeho
   výšku: 14 px vysoká (Visa 12), mezera 12 (Trello „Maxim Desktop
   Review“, 2. 11. 2026 – „zmenšit ikony providerů a přidat Google Pay
   a Apple Pay“). Dřív stála pod popiskem po 24 px. Popisek jde přes
   celou šířku pod obojím. Na telefonu sjedou loga pod popisek (mobil.css). */
.checkout-option__body--brana {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titulek loga" "popis popis";
  column-gap: 16px;
  align-items: center;
}
.checkout-option__body--brana .checkout-option__title { grid-area: titulek; }
.checkout-option__body--brana .checkout-option__desc { grid-area: popis; }
.checkout-option__body--brana .checkout-option__loga { grid-area: loga; margin-top: 0; }
.checkout-option__loga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.checkout-option__logo { display: block; height: 14px; width: auto; }
.checkout-option__logo--visa { height: 12px; }
/* Od 2. 11. 2026 je název krátký („Kartou online“), takže se loga
   vejdou vedle něj i do nejužší volby na desktopu (334 px, 960–1199 px).
   Pod popisek sjíždějí jen na telefonu (mobil.css). */
/* Náhradní štítek, kdyby soubor s logem chyběl – stejně vysoký jako logo. */
.checkout-option__logo--text {
  height: 14px;
  padding: 0 4px;
  border: 1px solid var(--c-option-line);
  border-radius: 3px;
  background: var(--c-white);
  font-weight: 700;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: var(--ls-bold);
  color: var(--c-ink);
  white-space: nowrap;
}

.checkout-option__price {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
}

/* ---- Volba s vnořeným formulářem (jiná fakturační adresa) ---- */
.checkout-option--panel {
  display: block;
  min-height: 0;
  /* Odsazení nese hlavička a panel, ne tahle obálka – jinak by byl
     klikatelný jen řádek s popiskem a okraje volby by na klik
     nereagovaly. */
  padding: 0;
}
.checkout-option--panel.is-selected { padding: 0; }

/* Hlavička je <label>, roztažený přes celou šířku i výšku sbalené
   volby, takže se dá kliknout kamkoli do rámečku. */
.checkout-option__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 15px 24px;
}
/* Vybraná volba má 2px rámeček místo 1px, proto o pixel méně; dole
   odsazení přebírá rozbalený panel. */
.checkout-option--panel.is-selected .checkout-option__head { padding: 21px 14px 0; }

.checkout-option__panel { margin-top: 16px; padding: 0 14px 23px; }
.checkout-option__panel[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* Tlačítko Zaplatit + patička pokladny                                */
/* ------------------------------------------------------------------ */

/* Chyby z kontroly na serveru nad tlačítkem Zaplatit. */
.checkout-chyba { margin: 24px 0 0; padding: 16px 20px; border: 2px solid var(--c-red, #eb5757);
  color: var(--c-red, #eb5757); font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.4; }
.checkout-chyba p { margin: 0; }
.checkout-chyba p + p { margin-top: 6px; }
/* Vypnuté cookies – nahoře nad formulářem pokladny, ne u tlačítka. */
.checkout-chyba--cookies { margin: 0 0 24px; }

.checkout-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  margin-top: 40px;
  padding: 0 20px 0 14px;
  gap: 16px;
}

/* Šipka má stejný poměr jako v navigaci slideru – viditelná geometrie
   57 × 52 px sedí uvnitř assetu s viewBoxem 45 × 41.                  */

.checkout-legal {
  margin-top: 41px;
  padding-top: 28px;
  border-top: 1px solid var(--c-black);
  text-align: center;
}

.checkout-legal__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.checkout-legal__links a {
  font-size: var(--fs-co-label);
  line-height: var(--lh-tight);
  color: var(--c-slightly-grayish);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity var(--t-fast);
}
.checkout-legal__links a:hover { opacity: .6; }

/* ------------------------------------------------------------------ */
/* Plovoucí popisek polí                                               */
/* ------------------------------------------------------------------ */
/* Trello „FRONTED Desktop vol. III": pole mají mít ve výchozím stavu
   popisek uvnitř, ve velikosti textu, místo klasického placeholderu.
   Po kliknutí nebo tabulátoru – a taky když v poli něco je – se popisek
   plynule zmenší a vyjede k horní hraně.

   Dělá to transform, ne přepočet rozměrů: popisek zůstane v toku, pole
   se nehýbe, nic nepřeskakuje a animace běží na kompozitoru. Pořadí
   funkcí je zprava doleva – nejdřív se popisek zvětší od svého levého
   horního rohu, pak se posune o svou vlastní výšku (translateY(100 %))
   na řádek s textem a nakonec se dorovná na jeho účaří.

   Prázdnotu pole pozná CSS přes :placeholder-shown, proto mají inputy
   placeholder=" " (pokladna.php, detail.php, libs/panel-kosik-obsah.php,
   libs/footer.php). Select má hodnotu vždycky, u něj popisek zůstává
   nahoře – proto výjimka na .checkout-field--select. */
.checkout-field__label,
.kosik-pole__label,
.newsletter__label {
  /* Jak velký je text v poli, jak vysoké je pole a kde uvnitř něj leží
     horní hrana popisku – obojí měřeno od horní hrany rámečku pole. */
  --plovouci-velikost: var(--fs-co-base);
  --plovouci-vyska: var(--co-field-h);
  --plovouci-horni: 12px;

  transform-origin: 0 0;
  /* Popisek leží přes input; bez tohohle by se do pole nedalo kliknout
     doprostřed. Kliknutí tak projde na input pod ním. */
  pointer-events: none;
  transition: font-size var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
/* Klidový stav: popisek má velikost textu v poli a stojí přesně na
   svislém středu pole – zastupuje placeholder, a ten je v jednořádkovém
   poli vždycky uprostřed.

   Popisky jsou v ořezávací skupině (text-box-edge: cap alphabetic),
   takže jejich box začíná na horní hraně verzálek a končí na účaří –
   je tedy přesně tak vysoký, jak je text doopravdy vidět, a dá se
   centrovat bez dohadování, kolik z řádku zabírají dotažnice. Po
   zvětšení na velikost textu v poli měří 1cap, takže jeho horní hrana
   patří na (výška pole − 1cap) / 2; posun je rozdíl proti tomu, kde
   popisek leží v toku. Žádné empirické dorovnávání – proto sedí
   i ve footeru. */
.checkout-field:not(.checkout-field--select):not(:focus-within):has(.checkout-field__input:placeholder-shown) .checkout-field__label,
.kosik-pole:not(:focus-within):has(.kosik-pole__input:placeholder-shown) .kosik-pole__label,
.newsletter__field:not(:focus-within):has(.newsletter__input:placeholder-shown) .newsletter__label {
  font-size: var(--plovouci-velikost);
  transform: translateY(calc((var(--plovouci-vyska) - 1cap) / 2 - var(--plovouci-horni)));
}
/* Newsletter má jiné odsazení i jiný text v poli než pokladna. Výška
   pole je tam daná obsahem, proto je níž pevná – ať se dá počítat. */
.newsletter__label {
  --plovouci-velikost: min(var(--fs-body), 16px);
  --plovouci-vyska: 59px;
  --plovouci-horni: 9px;
}
/* Na telefonu je pole o tři pixely nižší a popisek začíná o pixel níž
   (viz .newsletter__field v bloku pro ≤ 767 px). Pravidlo musí stát až
   tady, za obecným – jinak by ho přebilo. */
@media (max-width: 767px) {
  .newsletter__label { --plovouci-vyska: 56px; --plovouci-horni: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-field__label,
  .kosik-pole__label,
  .newsletter__label { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Souhrn objednávky (pravý sloupec)                                   */
/* ------------------------------------------------------------------ */

.checkout-summary__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--c-product-line);
}
.checkout-summary__item + .checkout-summary__item { margin-top: 16px; }
/* Pod poslední položkou v návrhu linka není – mezeru dělá až karta
   „Mohlo by se Vám líbit“ (24 px). */
.checkout-summary__item:last-child { padding-bottom: 0; border-bottom: 0; }

/* V návrhu byl šedý čtverec placeholder – s reálnou lahví a stínem
   zůstává plocha průhledná. Šedé pole vrátí `background: var(--c-thumb)`.

   Poměr stran je stejný jako u dlaždice ve výpisu (.product__media),
   protože studiový snímek z files/produkty/vypis je 800 × 1000. Ve
   čtverci by zbyly šedé pruhy po stranách a lahev by v něm stála jinak
   než všude jinde. */
.checkout-summary__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 80px;
  aspect-ratio: 424 / 530;
}
/* Studiový snímek z výpisu si nese pozadí i stín – scéna by mu jen
   přidala druhý, takže se jen posadí doprostřed pole. */
.checkout-summary__thumb--snimek { background: var(--c-produkt-pozadi); }
.checkout-summary__snimek {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.checkout-summary__qty {
  position: absolute;
  z-index: 2;
  top: 0; right: 0;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-black);
  color: var(--c-white);
  font-size: 11px;
  line-height: 1;
}

.checkout-summary__info { flex: 1 1 auto; min-width: 0; }

.checkout-summary__name {
  display: block;
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  color: var(--c-black);
}
.checkout-summary__name a:hover { color: var(--c-slightly-grayish); }

.checkout-summary__volume {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--c-text-secondary);   /* návrh: #666666, ne světlejší šedá */
}
/* Počet kusů za objemem („250 ml • 1 ks“) má v návrhu jen mobilní souhrn
   děkovací stránky – všude jinde ho nese kolečko nad miniaturou.
   Jednotka zůstává malým písmem ze stejného důvodu jako „ml“ (.u-ml__j):
   řádek s objemem jede verzálkami, jednotka se do nich nepřepisuje. */
.checkout-summary__kusu {
  display: none;
  text-transform: none;
  white-space: nowrap;
}
/* Produkt bez objemu má na řádku jen počet kusů – a ten je mimo telefon
   schovaný, takže by po něm zbyla prázdná mezera pod názvem. */
.checkout-summary__volume--kusy { margin-top: 0; }

.checkout-summary__price {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  color: var(--c-black);
  white-space: nowrap;
}

/* ---- Mohlo by se Vám líbit ----
   Bílá karta mezi seznamem položek a slevovým kódem. Miniatura je
   stejná jako u položek souhrnu (.checkout-summary__thumb a spol.),
   jen bez bublinky s počtem kusů. */
.checkout-suggest {
  margin-top: 24px;
  padding: 16px;
  background: var(--c-white);
}
.checkout-suggest[hidden] { display: none; }

.checkout-suggest__title {
  font-weight: 700;
  font-size: var(--fs-co-h);
  line-height: var(--lh-tight);
  color: var(--c-black);
}

.checkout-suggest__list { margin-top: 24px; }

.checkout-suggest__item {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Mezi miniaturami je v návrhu 32 px a linka leží uprostřed. */
.checkout-suggest__item + .checkout-suggest__item {
  margin-top: 15px;
  padding-top: 16px;
  border-top: 1px solid var(--c-product-line);
}

.checkout-suggest__info { flex: 1 1 auto; min-width: 0; }

.checkout-suggest__name {
  display: block;
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  color: var(--c-black);
}
.checkout-suggest__name a:hover { color: var(--c-slightly-grayish); }
/* Objem zůstává malým písmem – v návrhu je „HOŘČIČNÝ OLEJ 100 ml“. */
.checkout-suggest__volume { text-transform: lowercase; }

.checkout-suggest__price {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  color: var(--c-text-secondary);   /* návrh: #666666 */
}

/* Tlačítko je komponenta .btn .btn--secondary (bílé). Tady zůstává
   jen to, čím se v pokladně liší: pevný rozměr a pevné písmo návrhu.
   Stín odsazený o 4 px doprava je součást tvaru tlačítka, ne jeho
   okraj – bez téhle rezervy dosedal na hranu bílé karty a vypadal
   uříznutě. Tlačítko se posune o ty 4 px dovnitř, takže na mřížce
   dál sedí vnější hrana i se stínem. */
.checkout-suggest__add,
.checkout-discount__submit {
  flex: 0 0 auto;
  margin-right: 4px;
  width: 78px; height: 43px;
  padding: 0;
  font-size: var(--fs-co-base);
  line-height: 0.9;
  letter-spacing: var(--ls-bold);
}
/* Mezi kliknutím a odpovědí serveru, ať to nejde zmáčknout dvakrát. */
.checkout-suggest__add[disabled] { opacity: .4; cursor: default; transform: none; box-shadow: var(--shadow-button); }

/* ---- Slevový kód ---- */
.checkout-discount {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.checkout-discount .checkout-field { flex: 1 1 auto; }

/* „Použít" u slevového kódu je stejný secondary button jako „Přidat"
   u doporučeného zboží – rozměry i písmo sdílí pravidlo výš. Do
   29. 10. 2026 bylo žluté (.btn--compact), o 2 px nižší, o pixel užší
   a mělo menší písmo; v souhrnu stojí obě tlačítka kousek od sebe,
   takže to bilo do očí („tlačítko POUŽÍT A PŘIDAT v checkoutu prostě
   pořád není jednotný", Trello 28. 10. 2026). */

.checkout-discount__message { margin-top: 12px; font-size: var(--fs-co-sm); color: var(--c-slightly-grayish); }
.checkout-discount__message:empty { display: none; }
.checkout-discount__message.is-error { color: #c22; }

/* ---- Součty ---- */
.checkout-summary__totals { margin-top: 40px; }

.checkout-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  color: var(--c-slightly-grayish);
}
.checkout-summary__row + .checkout-summary__row { margin-top: 20px; }
.checkout-summary__row b { font-weight: 700; text-transform: uppercase; }
.checkout-summary__row--muted span:last-child { color: var(--c-gray); }

.checkout-summary__label { display: inline-flex; align-items: center; gap: 6px; }

/* „Zadat dodací adresu" místo ceny dopravy – viz libs/pokladna-souhrn.php.
   Je to odkaz, ne tlumený text, takže si drží černou a podtržení. */
.checkout-summary__zadat { color: var(--c-black); text-decoration: underline; }
.checkout-summary__zadat[hidden] { display: none; }
/* „Odebrat“ u uplatněného slevového kódu (1. 11. 2026) – tlačítko
   vysázené jako odkaz, stejně jako „Zadat dodací adresu“. */
.checkout-summary__zrusit {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.checkout-summary__zrusit:hover { text-decoration-color: transparent; }
.checkout-summary__row .js-souhrn-doprava[hidden] { display: none; }
.checkout-summary__label img { width: 16px; height: 16px; }

.checkout-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--c-degustace);
  font-weight: 700;
  font-size: var(--fs-co-total);
  line-height: var(--lh-tight);
  color: var(--c-black);
}

.checkout-summary__tax {
  margin-top: 20px;
  text-align: right;
  font-size: var(--fs-co-sm);
  line-height: var(--lh-tight);
  color: var(--c-gray);
}

/* ---------------- Pokladna – breakpointy ---------------- */

/* Do 1199 px se sloupce zúží na 400 px (viz variables.css), rozložení
   zůstává dvousloupcové. */
@media (max-width: 1199px) {
  .checkout-summary__thumb { width: 72px; }
}

/* Pod 960 px už se dva sloupce vedle sebe nevejdou – souhrn jde nahoru. */
@media (max-width: 959px) {
  /* Obě varianty svislého předělu: starší na .checkout-page a ta, která
     ho dnes kreslí, na .checkout__inner. Skrytá byla jen první, takže
     na jednom sloupci šla linka celou stránkou přes obsah. */
  .checkout-page::before,
  .checkout__inner::before { display: none; }

  .checkout__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    width: min(560px, 100%);
    margin-inline: auto;
    padding-top: 32px;
  }

  .checkout__form { padding-top: 0; }
  .checkout-summary { order: -1; }

  .checkout-summary__totals { margin-top: 32px; }
  .checkout-pay { height: 72px; }
  /* Šipka v tlačítku se na užších displejích zmenší – všude stejně,
     hodnota je z pokladny, kde byla odměřená z návrhu. */
  .btn--display .btn-sipka,
  .checkout-pay__icon,
  .buy__submit-icon,
  .reviews__cta-icon,
  .recipes__cta-icon,
  .recenze__cta-icon,
  .chyba__ikona,
  .kosik-pokladna__ikona,
  .thanks__cta-icon,
  .prihlasit-odeslat__sipka,
  .story__cta-icon,
  .ucet__odeslat-icon { --sipka-sirka: 44px; }
}

@media (max-width: 767px) {
  .checkout { padding-bottom: 72px; }
  .checkout__inner { padding-top: 24px; }

  .checkout-section { margin-top: 40px; }
  .checkout-section--contact,
  .checkout-section--payment,
  .checkout-section--billing { margin-top: 36px; }

  .checkout-option { gap: 12px; }
  .checkout-option__price { align-self: center; }

  .checkout-legal { margin-top: 32px; padding-top: 24px; }
}

/* Volby dopravy a platby zůstávají i na telefonu v jednom řádku –
   kolečko vlevo, název s popisem uprostřed, cena vpravo (mobilní
   návrh ve Figmě, 22. 10. 2026). Dřív se kolečko, název a cena
   skládaly pod sebe. Dvojice polí
   (Jméno | Příjmení, PSČ | Město) zůstávají vedle sebe – návrh
   (podklady/mobil.pdf, str. 9) je tak má i na 390px okně, kde na
   pole vyjde 167 px. */
@media (max-width: 479px) {

  .checkout-pay { height: 64px; padding-inline: 12px 8px; }
  .btn--display .btn-sipka,
  .checkout-pay__icon,
  .buy__submit-icon,
  .reviews__cta-icon,
  .recipes__cta-icon,
  .recenze__cta-icon,
  .chyba__ikona,
  .kosik-pokladna__ikona,
  .thanks__cta-icon,
  .prihlasit-odeslat__sipka,
  .story__cta-icon,
  .ucet__odeslat-icon { --sipka-sirka: 36px; }

  .checkout-discount { flex-wrap: wrap; }
  .checkout-discount .checkout-field { flex: 1 1 100%; }
  .checkout-discount__submit { width: 100%; }
}

/* Panel s vnořeným formulářem není klikací celý – kurzor patří jen hlavičce. */
.checkout-option--panel { cursor: default; }
.checkout-option__head { cursor: pointer; }

/* Chybně vyplněné pole – rámeček zčervená, dokud uživatel neopraví hodnotu. */
.checkout-field.has-error { border-color: #c22; }
.checkout-field.has-error .checkout-field__label { color: #c22; }

/* ---- Focus v pokladně ----
   Globální obrys z homepage by v pokladně rušil – u vybrané volby má být
   vidět jen zelený rámeček. Focus se proto na této stránce nekreslí. */
.page-checkout :focus-visible,
.page-checkout :focus-within,
.page-checkout :focus { outline: none; }

/* ---- Miniatura produktu ----
   Stejný princip jako v produktové kartě na homepage. */
.checkout-summary__scene {
  position: absolute;
  inset: 0;
  padding: 12% 0;
}

.checkout-summary__bottle {
  position: relative;
  display: block;
  height: 100%;
  width: fit-content;
  margin-inline: auto;
}

.checkout-summary__photo {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* =========================================================================
   VÝPIS KATEGORIE (vypis.html)
   Rozměry odměřené z 2× exportu návrhu (3840 × 2104 = 1920 × 1052 px):
   okraj stránky 64, kontejner 1792, karta 424 × 548, mezera 32.
   Hlavička kategorie je zarovnaná na sloupce produktové mřížky – nadpis
   drží první sloupec (424), perex začíná na 520 (= 424 + 32), řazení
   dosedá na pravý okraj kontejneru (1856).
   ========================================================================= */

.listing {
  margin-top: clamp(44px, 6.7188vw, 129px); /* 1920 → text hlavičky na y = 234 (105 + 129) */
  padding-inline: var(--page-gutter);
}

.listing__inner {
  width: min(var(--w-listing), 100%);
  margin-inline: auto;
}

.listing__head {
  display: grid;
  grid-template-columns: minmax(0, 424px) minmax(0, 616px) 1fr;
  gap: 32px;
  align-items: start;
}

.listing__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}

/* Perex: 24 / 1.2 (řádkování 29 px odměřené z návrhu). */
.listing__perex {
  margin-top: 10px;
  font-size: var(--fs-perex);
  line-height: var(--lh-tight);
}

/* ------------------------------ Řazení ------------------------------ */

.listing__sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}

.sort__label {
  flex: 0 0 auto;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--c-slightly-grayish);
}

/* Pole 240 × 58 s 1px černým rámečkem, text s odsazením 18 px. */
.sort {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  max-width: 100%;
}

.sort__select {
  width: 100%;
  height: 59px;
  padding: 0 48px 0 18px;
  border: 1px solid var(--c-black);
  border-radius: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  appearance: none;
  cursor: pointer;
}

/* Nativní šipka je vypnutá přes appearance, v návrhu je plný trojúhelník. */
.sort::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-inline: 10px solid transparent;
  border-top: 11px solid var(--c-black);
  pointer-events: none;
}

/* ---- Filtr „Pouze produkty skladem“ ----
   Návrh: zaškrtávátko 209 px, mezera 32, skupina řazení 322
   (popisek 66 + 16 + pole 240). Zaškrtávátko je stejné 20 × 20 jako
   v pokladně, včetně sdílené ikony fajfky. */

.listing__razeni {
  display: flex;
  align-items: center;
  gap: 16px;
}

.listing__sklad {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.listing__sklad-box {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--c-black);
  background: var(--c-white);
  cursor: pointer;
}

.listing__sklad-box:checked {
  border-color: transparent;
  background: url("../assets/icons/checkbox-box.svg") center / 20px 20px no-repeat;
}

.listing__sklad-label {
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
}

/* ------------------------------ Mřížka ------------------------------ */

.listing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Návrh: karty 424 vedle sebe po 32, řady po 60 (karta 654, rozteč 714). */
  gap: 60px 32px;
  margin-top: var(--section-gap);           /* 1920 → mřížka začíná na y = 474 */
}

/* Výpis „Vše“ je soupis kategorií pod sebou – v návrhu 120 px mezi bloky. */
.listing__kategorie + .listing__kategorie { margin-top: var(--section-gap); }

/* ---------------------------- Breakpointy ---------------------------- */

/* Pod 1520 px se přestane vejít nadpis 424 + perex 616 + řazení 336.
   Nadpis se zúží a perex převezme zbytek, řazení zůstane na stejném řádku. */
@media (max-width: 1519px) {
  .listing__head { grid-template-columns: minmax(0, 320px) minmax(0, 1fr) auto; }
}

@media (max-width: 1023px) {
  .listing__head { grid-template-columns: 1fr; gap: 24px; }
  .listing__sort { justify-content: flex-start; }
  .listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sort__select { height: 52px; padding: 0 44px 0 14px; }
}

/* ---- Výpis na telefonu (podklady/mobil.pdf, str. 3) ----
   Návrh dává řádek s filtrem a řazením nad nadpis kategorie, ne pod
   perex, a drží ho na jednom řádku: zaškrtávátko vlevo, pole s
   řazením 192 × 48 vpravo. Popisek „Řadit od:" v něm není – pole samo
   ukazuje zvolenou hodnotu.

   Souřadnice z návrhu (od horní hrany obsahu, prohlížečová lišta
   v PDF zabírá prvních 56 px): řádek 152..200, nadpis od 219,5,
   perex od 280,5, mřížka od 400. Mezi bloky je tedy 20. */
@media (max-width: 767px) {
  .listing__head { gap: 20px; }
  .listing__sort {
    order: -1;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .listing__razeni { flex: 0 0 auto; flex-wrap: nowrap; width: auto; }
  /* Popisek u zaškrtávátka se smí zalomit – anglicky je delší a bez
     tohohle by přetekl pod pole s řazením. */
  .listing__sklad { min-width: 0; }
  .listing__sklad-label { min-width: 0; }
  .sort__label { display: none; }
  .sort { width: 192px; }
  .sort__select { height: 48px; padding: 0 40px 0 14px; }
  .sort::after { right: 14px; }

  /* „OLEJE" měří v návrhu 70 px, což u nadpisového řezu dá 55 –
     stejně jako titulek na detailu a v heru. */
  .listing__title { font-size: 55px; }

  /* Perex: pět řádků s roztečí 22, první řádek 342 px → 15,8. */
  .listing__perex { font-size: 16px; line-height: 22px; }

  /* Karty 168,5 vedle sebe s mezerou 12,5; řady po 23,5. */
  .listing__grid { gap: 24px 12px; margin-top: 20px; }
}

@media (max-width: 400px) {
  /* Dva sloupce drží i na 390 px – návrh má na straně 3 vedle sebe
     dvě karty (20..188,5 a 201..369,5). Dřív se tu mřížka rozpadala
     do jednoho sloupce a karta byla přes celou šířku. */
  .listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   DETAIL PRODUKTU (detail.html)
   Rozměry odměřené z exportu návrhu 1920 × 6232.
   Hero je vysoké 800 px, gradient sahá až pod hlavičku (proto je hlavička
   na této stránce průhledná a hero má záporný horní margin).
   Kontejnery: hero 1400, galerie 992, benefity 1200, složení a recenze 880,
   „Objevte další chutě“ 1802 (sdílená sekce z homepage).
   ========================================================================= */

/* Hlavička je na detailu průhledná, aby skrz ni prošel gradient hero.
   Jakmile se ale připne k oknu a leze přes bílý obsah pod hero, musí
   podklad dostat – jinak se pod menu promítá fotka a text sekcí. */
.page-detail .header { background: transparent; }
.page-detail .header.is-pripnuta { background: var(--c-white); }
/* Připnutá lišta je pevná vrstva nad rolujícím gradientem hero. Na jejím
   spodním okraji se při rolování umí objevit světlý vlas – prohlížeč
   skládá dvě vrstvy, které se vůči sobě hýbou po zlomcích pixelu, a
   jedna řádka vyjde z obojího napůl (Trello „FRONTED Desktop vol. III“:
   „občas mi při scrollu začne svítit 1x linka“). Podklad lišty proto
   přesahuje o pixel dolů – překrytí je pod ní schované a vlas nemá kde
   vzniknout. */
.page-detail .header.is-pripnuta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1px;
  background: inherit;
  pointer-events: none;
}

.phero {
  /* Barvu i škálu přepisuje detail inline podle tabulky `barvy`.
     --phero-stupnice je hotový seznam zarážek z vp_stupnice() – kolik
     jich je, rozhoduje PHP, protože barvy bez prostředního vzorku mají
     jen dvě. --phero-barva zůstává zvlášť: potřebuje ji „duch“ názvu
     a ten chce jednu barvu, ne přechod. Lišta záložek se tím neřídí,
     má vlastní pevnou barvu (--c-tab-bar). */
  --phero-barva: var(--c-hero-blue);
  --phero-stupnice: var(--c-white) 0%, var(--phero-barva) 62.5%;

  /* O kolik je střed mřížkového řádku níž než střed hero plochy.
     Hero je 800 vysoké, střed tedy na 400; řádek začíná na 235
     (hlavička 105 + odsazení 130) a končí na 697 nad lištou záložek,
     jeho střed je 466. Rozdíl 66 px potřebuje všechno, co se má
     postavit na osu lahve. */
  --phero-osa-posun: 66px;

  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: calc(-1 * var(--header-h));
  /* Návrh: hero 1920 × 800, lišta 697–752, tedy 48 px ke spodní hraně.
     Výška je pevná, ne na celé okno – jinak se celý obsah hero posune
     o 115–165 px níž, než ho má návrh.                                */
  padding: var(--header-h) var(--page-gutter) 48px;
  min-height: 800px;
  /* Záloha pro prohlížeče bez interpolace v oklch (Chrome < 111,
     Safari < 16.2): stejné zarážky, jen se mezi nimi míchá v sRGB. */
  background: linear-gradient(180deg, var(--phero-stupnice));
  /* Vzorky z generátoru gradientů jsou spočítané v OKLCH, takže se
     v něm má i dopočítávat – jinak cesta z bílé do syté barvy vede
     přes zašedlý střed. */
  background: linear-gradient(180deg in oklch, var(--phero-stupnice));
  overflow: hidden;
}

/* ---- „Duch“ – název příchuti na pozadí ----
   Barva je barva gradientu v místě dolní hrany nápisu – spočítá ji
   js/hero-napis.js do --phero-napis (specifikace 13. 10. 2026). Bez JS
   zůstává konec gradientu (--phero-barva). */
.phero__ghost {
  position: absolute;
  z-index: 0;
  /* Návrh (Figma MOJE-vpresu): Kommissar 400 px, horní hrana verzálek
     na 252 px. Dřív 320 px / 258 px. */
  top: clamp(120px, 13.125vw, 252px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(110px, 20.833vw, 400px);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--phero-napis, var(--phero-barva));
  pointer-events: none;
  user-select: none;
}

/* ---- Obsah hero ----
   Sloupce 1fr auto 1fr drží lahev přesně na středu stránky, jak je v návrhu;
   svislé odsazení 130 / 42 posadí lahev na y = 235 a lištu záložek na 697.
   Číslo je dopočtené k --header-h: 105 + 130 = 235 jako v návrhu. */
.phero__inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  /* Sloupce začínají každý jinde: lahev na 129, levý sloupec na 235,
     nákupní box na 280 – proto start a vlastní odsazení, ne střed. */
  align-items: start;
  gap: 32px;
  width: min(var(--w-phero), 100%);
  margin-inline: auto;
  padding: 130px 0 0;
}

/* Text se středí na stejnou osu jako lahev a nákupní box, ne na začátek
   řádku. Výška textu se liší produkt od produktu, takže se to nedá udělat
   pevným odsazením jako u lahve: u align-self: center posune rozdíl okrajů
   střed boxu o svou polovinu, nezávisle na jeho výšce — odtud dvojnásobek
   posunu osy v dolním okraji. */
.phero__info {
  max-width: 442px;   /* návrh: levý sloupec 442 */
  align-self: center;
  margin-bottom: calc(2 * var(--phero-osa-posun));
}

/* Odznaky nad názvem – v návrhu řádek 384 × 34. Vzhled je stejný jako
   na kartě ve výpisu, proto sdílí .product__badge. */
.phero__badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 24px; }

.phero__title {
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}

.phero__rating { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.phero__reviews-link {
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Návrh: čtyři řádky v bloku 442 × 77, rozteč řádků 22. */
.phero__perex {
  margin-top: 24px;
  font-size: var(--fs-sm);
  line-height: 1.375;
}

/* ---- Ocenění ---- */
.awards { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
/* Návrh: GT BOLD 18, verzálky, prostrkání 2 % – „ZÍSKANÁ / OCENĚNÍ“. */
.awards__label {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: min(var(--fs-title), 18px);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Log může být podle ocenění dvě až čtyři. Nesmí se zmenšovat (jinak je
   flexbox v užším sloupci stlačí až na nulu) – radši se zalomí. */
.awards__list { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.awards__list li { flex: 0 0 auto; }
.awards__logo { display: block; width: auto; height: 88px; }

/* BIO loga jsou na šířku (97×52 a 100×67), při výšce 88 px by byla přes
   160 px široká. Drží se proto do 100 px a výšku si dopočítají samy. */
.awards__logo--bio { max-width: 100px; height: auto; }

/* ---- Lahev ---- */
/* ---- Scéna s lahví ----
   Ze starého webu: láhev je ukotvená ke spodní hraně scény a mění se
   jí jen šířka (--lahev), takže 100, 250 i 500 ml stojí na stejné
   čáře a liší se jen velikostí. */
.phero__media {
  position: relative;
  /* Scéna produktu. V návrhu je 129–671, tedy 542 vysoká a o 106 px výš
     než zbytek obsahu hero (ten začíná na 235); její střed tak sedí
     přesně na středu hero plochy.

     Fotka i stín jsou v jedné buňce mřížky, takže stín drží spodní hranu
     fotky, ať je fotka jakkoli vysoká, a celá dvojice je ve scéně svisle
     na střed. Dřív byla fotka přisazená ke spodku scény – u lahví to
     nebylo poznat, ale ploché produkty (sady, tyčinky) jsou nižší a
     visely dole s velkou mezerou nad sebou. */
  display: grid;
  grid-template-columns: 100%;
  align-content: center;
  /* Čtvrtlitr má podle návrhu (Figma MOJE-vpresu, 21. 10. 2026) sklo
     161 px široké a 433 vysoké: 52,5 % × 307 px. Dřív min(400px, 34vh),
     lahev pak vycházela o ~13 % větší. */
  width: min(307px, 30vh);
  height: 542px;
  margin-top: -106px;
  margin-inline: auto;
  align-self: start;
}
/* Lahve stojí na čáře 645 px (scéna 129–671, dno skla 26 px nad spodkem
   scény) – v návrhu je čtvrtlitr 212–645. Ploché produkty zůstávají
   svisle na středu (viz výš). */
.phero:not(.phero--plochy) .phero__media { align-content: end; padding-bottom: 26px; }
/* Sáčky jsou o třetinu nižší než lahve, takže na jejich čáře visely
   u spodní hrany scény. Stojí proto na jejím svislém středu, který sedí
   na středu celého hero (Trello „FRONTED Desktop vol. III": zvětšit
   produkt v heru a lépe vertikálně centrovat). */
.phero.phero--stred .phero__media { align-content: center; padding-bottom: 0; }
/* Obojí do stejné buňky; pořadí v HTML (stín, pak fotka) drží fotku nahoře. */
/* Základ stylů knihovny stínů (js/shadow.js) přímo tady. Knihovna
   si je vkládá do <head> až z main.js, a do té doby měla fotka lahve
   výšku z atributu height (2000 px) – po refreshi lahvičky na chvíli
   vyskočily přes celou stránku a pak teprve zapadly na místo.
   Pravidla jsou stejná jako v knihovně, takže po jejím načtení se nic
   nezmění; specifičtější selektory níž je přebíjejí jako dosud. */
.product-shadow { position: relative; isolation: isolate; width: 100%; overflow: visible; }
.product-shadow > img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* Stín se počítá až z načtené fotky, ať tedy nevyskočí, ale naběhne. */
.product-shadow > .contact-shadow { animation: vp-stin-nabeh .3s ease-out both; }
@keyframes vp-stin-nabeh { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .product-shadow > .contact-shadow { animation: none; } }

/* Rozměry drží obal fotky, ne fotka: stín se umisťuje v procentech
   fotky, takže potřebuje prvek, který má přesně její rozměry (viz
   .product-shadow z js/shadow.js). Fotka uvnitř je na 100 %. */
.phero__media .phero__foto {
  grid-area: 1 / 1;
  align-self: end;
  width: var(--lahev, 47%);
  max-width: var(--lahev-max, none);
  margin-inline: auto;
}
.phero__media .phero__foto > img {
  display: block;
  width: 100%;
  height: auto;
}
/* ---- Ploché produkty (sáček tyčinek, sady) ----
   Na starém webu jsou širší než scéna a měří se ve vh
   (.detail-center-velikost-40g a spol., viz vp_lahev v libs/produkty.php).
   Fotka proto přetéká přes scénu a středí se na ni. */
.phero--plochy .phero__media .phero__foto {
  /* Fotka je širší než scéna; auto okraje by ji přilepily doleva,
     justify-self rozloží přetečení na obě strany stejně. */
  justify-self: center;
  margin-inline: 0;
  /* Šířka ve vh na nízkém a úzkém okně přeroste displej – 86 % šířky
     okna je strop, aby fotka nekoukala za hranu. */
  max-width: min(86vw, var(--lahev-max, 800px));
}

/* ---- Vlastní sada: krabice složená ze tří vrstev ----
   Trello „FRONTED Desktop vol. III": hero dárkové sady se skládá
   z vnitřku krabice, řady lahviček a pláště. Plášť má v místě otvoru
   průhlednou díru (Podklady/Foto cuts P3/BOX.png), takže se jím dívá
   dovnitř, a jeho spodní lem lahvičkám zakryje dna – stojí tedy
   v krabici, ne před ní.

   Čísla jsou změřená v předloze 2798 × 2368 px (26. 10. 2026):
     otvor    x 454–2739 (16,226 % – 97,891 %), y 1680–2163
     lahvička 545 px široká, dno v y 2285
   Z toho šířka řady 81,665 %, výška lahvičky 93,92 % krabice
   a dno řady 3,505 % nad spodní hranou. Čtyři místa v řadě jsou
   stejně široká (571 px), takže poloprázdná krabice má lahvičky
   tam, kde budou i v plné. */
.phero__krabice {
  grid-area: 1 / 1;
  position: relative;
  display: block;
  /* Stejná šířka, jakou měl dosavadní snímek krabice: plochý produkt
     se měří ve vh (viz vp_lahev v libs/produkty.php). Krabice je širší
     než scéna (307 px), takže z ní přetéká – justify-self rozloží
     přetečení na obě strany stejně, jako to dělá .phero__foto
     u ostatních plochých produktů. Automatické okraje by se v mřížce
     při přetečení vynulovaly a krabice by lezla jen doprava, na
     1024 px až o 68 px pod nákupní box (změřeno 26. 10. 2026). */
  justify-self: center;
  width: var(--lahev, 47%);
  max-width: min(86vw, var(--lahev-max, 800px));
  aspect-ratio: 2798 / 2368;
  margin-inline: 0;
}
.phero__krabice-vrstva {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* Kontaktní stín pod krabicí – tvar i sytost jako u stínů z js/shadow.js
   (varianta „box"): svislý přechod s měkkými konci po stranách. Krabice
   stojí v předloze na x 433–2788 z 2798, střed je tedy na 57,6 % a
   půdorys 84 % šířky. */
/* Stín z CMS (Trello „Maxim Desktop Review“, 2. 11. 2026): obal přes
   celou složenou krabici, podstavy jsou procenta hero fotky vlastní
   sady, která má stejný výřez. Pod vrstvami krabice jako stín natvrdo. */
.phero__krabice-stiny.product-shadow {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  pointer-events: none;
}
/* Dlaždice vlastní sady na úvodní stránce: stejný stín pod fotkou krabice. */
.box__foto { display: block; }
.phero__krabice-stin {
  position: absolute;
  left: 57.6%;
  /* Stín je z pětiny zastrčený pod krabici, zbytek leží na zemi –
     stejný poměr, jaký má „tuck" v js/shadow.js. */
  bottom: -4.8%;
  z-index: -1;
  width: 84%;
  height: 6%;
  transform: translateX(-50%);
  border-radius: 30%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .16) 20%, rgba(0, 0, 0, .65) 50%, rgba(0, 0, 0, .16) 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  opacity: .72;
  pointer-events: none;
}
/* Řada leží mezi vrstvami – v HTML je mezi nimi, a protože jsou obě
   absolutní, rozhoduje o pořadí vykreslení pořadí ve značce. */
.phero__krabice-rada {
  position: absolute;
  left: 16.226%;
  bottom: 3.505%;
  width: 81.665%;
  height: 93.92%;
  display: grid;
  /* Počet míst drží PHP (VP_SADA_POCET), ne CSS. Řádek je jeden a má
     výšku řady: bez `grid-template-rows: 100%` by se procentní výška
     lahvičky neměla oč opřít a ve zvětšenině by se fotka roztáhla na
     svou vlastní velikost. `minmax(0, 1fr)` ze stejného důvodu ruší
     automatické minimum sloupce – to je min-content obsahu, tedy celá
     fotka. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: 100%;
}
.phero__krabice-misto {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  height: 100%;
}
/* Výška, ne šířka: fotky lahviček se o pár pixelů liší v šířce
   (490–494 px při 2000 na výšku), takže při shodné výšce sedí
   popisky všech čtyř na stejné čáře. */
.phero__krabice-kus {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
}
/* Zvětšenina: stejná krabice, jen větší. Dvojnásobek 820 px je 1640,
   což pokryje horní krok žebříku (1600) – proto má odkaz
   data-pswp-sizes a photoswipe.js podle něj přepíše sizes. */
.pswp-sada .phero__krabice { width: min(88vw, 820px); max-width: none; }

/* ---- Degustační sada: fotka složená z jednotlivých olejů ----
   Degustační sady se prodávají jako volné lahvičky, úvodní fotka proto
   není snímek sady, ale řada produktových fotek olejů, které v ní jsou
   (vp_sada_oleje, viz detail.php). Když se složení sady změní, změní se
   s ním i fotka. Dárkové sady mají dál svůj snímek krabice.

   Řada je širší než scéna – jako grid položka s justify-self: center
   přeteče na obě strany stejně, auto okraje by ji přilepily doleva. */
.phero__media--sada {
  /* Pevná výška, ne procenta: řádek mřížky se u scény vyměřuje podle
     obsahu, takže procentní výška by se neměla oč opřít a lahvičky by
     naskočily v původní velikosti. 340 px dá pětici lahviček stejnou
     šířku, jakou měl dosavadní snímek sady (489 px viditelné plochy). */
  --sada-vyska: 340px;
}
.phero__sada {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: flex-end;
  /* Mezera odměřená ze studiového snímku sady (files/produkty/share/54.jpg):
     lahvička 135 px široká, mezera 11 px, tedy 8 % šířky lahvičky. Lahvička
     je 24,5 % své výšky široká, takže 11 px mezery vyjde na 1/50 výšky řady –
     a mezera tak drží stejný poměr i ve zvětšenině, kde je řada vyšší. */
  gap: calc(var(--sada-vyska, 340px) / 50);
  height: var(--sada-vyska, 340px);
}
/* Kus sady je zároveň .product-shadow (stín), a ta má v knihovně
   width: 100 %. Ve flexové řadě by si tím každá lahvička řekla
   o celou šířku, proto se šířka vrací na obsah. */
.phero__sada .phero__sada-kus { position: relative; display: block; width: auto; height: 100%; }
/* Selektor stojí na .phero__sada, ne na scéně – stejná řada se vykresluje
   i ve zvětšenině, kde žádná .phero__media--sada není. Specifičnost musí
   zůstat vyšší než .phero__media img výš, jinak by lahvičky ve scéně
   dostaly šířku --lahev. */
.phero__sada .phero__sada-kus img {
  display: block;
  grid-area: auto;
  width: auto;
  max-width: none;
  height: 100%;
  margin-inline: 0;
  /* Šířku drží poměr, ne až načtený soubor: bez něj má `width: auto`
     u nenačteného obrázku nulu, takže se řada při načítání srovnává
     z prázdna doprostřed. Lahvička 100 ml je 24,5 % své výšky široká
     (49 / 200); `contain` pojistí, že se případná jiná fotka nenatáhne. */
  aspect-ratio: 49 / 200;
  object-fit: contain;
}
/* Odkaz, kterým se úvodní fotka zvětšuje. Nesmí být display: contents –
   Chrome na takový prvek nedá fokus, takže by se zvětšenina nedala
   otevřít z klávesnice. Je proto sám položkou mřížky scény (jediná
   buňka 1/1) a uvnitř má stejnou mřížku o jednom sloupci. Stín i fotka
   tak počítají procenta ze stejné šířky jako dřív a nic se neposune. */
.phero__zvetsit {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 100%;
  cursor: zoom-in;
}
.phero__zvetsit:focus-visible { outline: 2px solid var(--c-black); outline-offset: 2px; }

/* Zvětšenina složené sady – stejná řada lahviček, jen větší.
   --sada-vyska zdědí .phero__sada uvnitř. */
.pswp-sada {
  --sada-vyska: min(78vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------ */
/* NÁKUPNÍ BOX                                                         */
/* ------------------------------------------------------------------ */

/* Nákupní box je v návrhu 304 široký a začíná na y = 280, tedy
   o 45 px níž než levý sloupec. */
/* Nákupní box stojí na stejné ose jako text a lahev (střed hero plochy),
   ne 45 px pod začátkem řádku jako v návrhu – ten rozdíl byl vidět u sad,
   které nemají přepínač velikosti, takže je box nižší. Posun je stejný
   trik jako u .phero__info: rozdíl okrajů posune střed o svou polovinu. */
.buy {
  justify-self: end;
  align-self: center;
  width: 304px;
  max-width: 100%;
  margin-bottom: calc(2 * var(--phero-osa-posun));
}

/* ---- Hlídání dostupnosti ----
   Návrh: text, pak pole 56 px (mezera 24), zaškrtávátko (16)
   a tlačítko 43 px (24). Blok stojí ve stejném poli mřížky jako
   .buy, takže se jen prohodí s nákupním boxem. */
.buy__watch { display: none; margin-top: 24px; }
.buy.is-vyprodano .buy__watch { display: block; }

.buy-watch__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}

.buy-watch__field { margin-top: 24px; }

.buy-watch__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  cursor: pointer;
}

.buy-watch__check-box {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--c-black);
  background: var(--c-white);
  cursor: pointer;
}

.buy-watch__check-box:checked {
  border-color: transparent;
  background: url("../assets/icons/checkbox-box.svg") center / 20px 20px no-repeat;
}

.buy-watch__check-label {
  font-size: var(--fs-co-label);
  line-height: var(--lh-tight);
}
.buy-watch__check-label a { text-decoration: underline; }

.buy-watch__submit {
  width: 100%;
  margin-top: 24px;
  justify-content: center;
}
.buy-watch__field[hidden],
.buy-watch__check[hidden],
.buy-watch__submit[hidden] { display: none; }

.buy-watch__message { margin-top: 12px; font-size: var(--fs-co-label); color: var(--c-slightly-grayish); }
.buy-watch__message:empty { display: none; }
.buy-watch__message.is-error { color: #c22; }

/* Vyprodaná velikost: cena, počet ani tlačítko nemá co dělat,
   místo nich se ukáže .buy-watch. Přepínač velikostí zůstává. */
.buy.is-vyprodano .buy__cena,
.buy.is-vyprodano .buy__submit { display: none; }

/* ---- Velikost balení ---- */
/* Návrh (inspect 9179:15322): šířka 304, výška 47, rádius 40, výplň
   overlay/dark a rozostření pozadí 40. Není to plná šedá – barevné
   hero pod ní prosvítá, proto průhledná výplň a backdrop-filter.
   Obtažení tu nemá být (14. 10.): lišta záložek pod heroem žádné
   nemá a obojí má vypadat stejně. Místo rámečku drží výšku 1px
   odsazení po stranách – přesně jako .tabs__list.
   Nahoře a dole odsazení není: proužek výplně kolem vybrané bílé
   velikosti vypadal jako tmavý rámeček (19. 10.). Velikosti proto
   sahají přes celou výšku lišty a dělí si ji na stejné díly;
   jedenáctka z návrhu platí jen pro štítky se slevou nad nimi.   */
.buy__sizes {
  display: flex;
  /* fieldset má od prohlížeče 2px boční margin – bez vynulování by
     pilulka byla 300 místo 304. */
  margin: 0;
  padding: 0 1px;
  border: 0;
  border-radius: 40px;
  /* Stejná výplň jako lišta záložek pod heroem – jeden token, protože
     obojí je totéž ovládání s bílým textem a musí se krýt. */
  background: var(--c-tab-bar);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  /* Pilulka musí přebít štítky se slevou, které leží pod ní (.buy__slevy). */
  position: relative;
  z-index: 1;
}

/* Obal kolem přepínače drží štítky se slevou. Ty nemůžou být uvnitř
   fieldsetu: backdrop-filter z něj dělá vlastní vrstvu a nic z jeho
   potomků se pod jeho výplň nedostane. */
.buy__prepinac { position: relative; }
/* Štítek vyčnívá nad pilulku 34 px – o tolik se přepínač posune dolů,
   aby štítky nelezly do perexu nad sebou. Jen tam, kde nějaké jsou. */
.buy__prepinac--sleva { margin-top: 34px; }

/* Řada štítků kopíruje mřížku pilulky: stejné odsazení po stranách
   a stejně široké díly, takže každý štítek sedí přesně na svém dílu
   přepínače. Prázdný díl drží místo u velikosti bez slevy. */
.buy__slevy {
  position: absolute;
  /* Stejná mřížka jako u pilulky, takže každý štítek sedí přesně na
     svém dílu přepínače. Krajní štítky se pak ještě odsadí – viz níž. */
  left: 1px;
  right: 1px;
  /* Spodních 24 px z 58 zajede pod pilulku, 34 zůstane vidět. */
  bottom: calc(100% - 24px);
  z-index: 0;
  display: flex;
  pointer-events: none;
}
.buy__slevy-dil { display: flex; flex: 1 1 0; min-width: 0; }
/* Krajní štítky nesahají až k okraji lišty: v návrhu začíná první
   11 px od levé hrany a poslední končí 11 od pravé. Vnitřní předěly
   přitom musí zůstat na hranách dílů přepínače, takže se odsazení
   řeší okrajem štítku, ne posunem celé řady. */
.buy__slevy-dil:first-child .buy__sleva { margin-left: 10px; }
.buy__slevy-dil:last-child .buy__sleva { margin-right: 10px; }

.buy__size { position: relative; flex: 1 1 0; display: block; min-width: 0; }

/* Sleva u konkrétní velikosti – žlutý štítek za dílem přepínače.
   V detailu je tohle jediné místo, kde se procenta ukazují; odznak
   u názvu zůstává vždycky jen „Akce“.
   Návrh (inspect 10017:21110): díl 94 × 58, zaoblení 12 jen nahoře,
   výplň action-accent, text GT BOLD 16. Odsazení nahoře je 8 podle
   Mírova upřesnění z 19. 10. (návrh má 12); měří se k hornímu dotahu
   verzálek, proto je štítek mezi prvky s ořezem účtaře. */
.buy__sleva {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: flex-start;
  justify-content: center;
  height: 58px;
  /* 24 po stranách místo osmi z návrhu: tam je štítek široký přesně
     jako díl přepínače (94) a text v něm stojí na středu, takže osmička
     je jen spodní mez. U štítku nad cenou, který se tahá podle textu,
     drží čtyřiadvacítka stejnou šířku jako v návrhu (≈94). */
  padding: 8px 24px 0;
  border-radius: 12px 12px 0 0;
  background: var(--c-yellow);
  color: var(--c-black);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.2;
  letter-spacing: var(--ls-bold);
  white-space: nowrap;
  pointer-events: none;
}
.buy__size-input { position: absolute; opacity: 0; pointer-events: none; }
.buy__size-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 47px;              /* výška celé pilulky, lišta už nemá odsazení */
  border-radius: 40px;
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: var(--ls-text);
  /* Bílá jako na liště záložek pod heroem – obojí je totéž ovládání
     na overlay/dark a návrh je chce sjednocené do bílé (Trello
     „FRONTED Desktop vol. III“, upřesnění 14. 10. 2026). Dřív se barva
     nenastavovala vůbec a dědila se černá z .phero. */
  color: var(--c-white);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.buy__size-label:hover { background: var(--c-prepinac-hover); }
.buy__size-input:checked + .buy__size-label {
  background: var(--c-white);
  /* Vybraná pilulka je bílá, takže text musí zpátky na černou. */
  color: var(--c-black);
}

/* ---- Cena + počet kusů ---- */
.buy__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 95px;              /* návrh: cena 345–440, tlačítko 440–520 */
  /* Odsazení drží obal .buy__cena, aby se proti němu dal spolehlivě
     usadit štítek se slevou. */
  margin-top: 0;
  /* Stejně jako pilulka musí box přebít štítek, který leží pod ním. */
  z-index: 1;
  /* Horní rohy jsou v návrhu zaoblené 16 px, dolní hrana dosedá
     na hranaté tlačítko. Odsazení 16 na obě strany.                */
  padding-inline: 16px;
  border: 1px solid var(--c-black);
  border-radius: 16px 16px 0 0;
  /* Stejné sklo jako u pilulky s velikostmi – barevné hero se pod boxem
     rozostří. Výplň zůstává průhledná, box má jen rámeček. */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* Jediná velikost znamená žádný přepínač, za který by štítek se slevou
   zajel – schová se tedy stejným způsobem za box s cenou. Obal kolem
   boxu hraje roli .buy__prepinac: drží odsazení i souřadnice štítku. */
.buy__cena { position: relative; margin-top: 16px; }
/* 16 jako jindy + 34, o co štítek vyčnívá nad box. */
.buy__cena--sleva { margin-top: 50px; }
/* Zarovnává se na levý okraj ceny (vnitřní odsazení boxu), ne na střed
   jako nad dílem přepínače, a šířku si bere podle textu. */
.buy__sleva--sama {
  position: absolute;
  left: 16px;
  bottom: calc(100% - 24px);
  z-index: 0;
  flex: 0 0 auto;
}

.buy__prices { display: flex; flex-direction: column; gap: 10px; }
.buy__price {
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-tight);
  white-space: nowrap;
}
/* „Kč“ je v návrhu menší než samotné číslo – obraz 16 proti 20 px. */
.buy__currency { font-size: var(--fs-title); }

.buy__price-old {
  font-weight: 700;
  /* Návrh: obraz písma 14 px, tedy o dvě čísla míň než --fs-title.
     Zesvětlení dělá průhlednost 50 %, ne vlastní šedá – na barevném
     heru se tak drží odstín pozadí. */
  font-size: clamp(16px, 1.0417vw, 20px);
  line-height: var(--lh-tight);
  opacity: .5;
  text-decoration: line-through;
  white-space: nowrap;
}
.buy__unit { font-size: var(--fs-sm); line-height: var(--lh-tight); white-space: nowrap; }

/* Návrh: 144 × 48, tři stejná pole po 48 – černá, bílá, černá.
   Žádné mezery ani odsazení, bílý čtverec jde přes celou výšku. */
.qty {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 48px;
  background: var(--c-black);
}
.qty__btn {
  width: 48px;
  height: 100%;
  color: var(--c-light-gray);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: 1;
  transition: color var(--t-fast);
}
.qty__btn:hover { color: var(--c-white); }
.qty__input {
  width: 48px;
  height: 100%;
  border: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Do košíku ---- */
/* Popisek je v návrhu 147 px široký při velikosti 55 px – to zvládne jen
   Kommissar XCond. S náhradním fontem se text nevejde, proto nowrap +
   ořez, aby nerozbil výšku tlačítka (viz fonts/README.md). */
.buy__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 81px;
  /* Tlačítko při hoveru odjíždí o 2 px dolů (.btn:hover), takže v klidu
     sedí o 2 px výš, než kam patří – po najetí dosedne přesně na box
     s cenovkou a mezi nimi se neotevře škvíra. */
  margin-top: -3px;
  padding: 0 10px 0 15px;
  font-size: clamp(30px, 2.865vw, 55px);
  white-space: nowrap;
  overflow: hidden;
}

/* Sada na míru se z hero neukládá do košíku – tlačítko jen sjede dolů
   k výběru, tak šipka míří tam. Symbol button-arrow-down.svg (53 × 57,
   designér 1. 11. 2026) leží na středu stejného políčka 57 × 53 jako
   šipka doprava – procenta jsou 53/57 a 57/53 jeho rozměrů, takže
   tlačítko nezvýší a šipka se zmenšuje s --sipka-sirka. Dřív se
   otáčel obrázek šipky doprava. */
.buy__submit--dolu .buy__submit-icon img {
  left: 3.509%;
  top: -3.774%;
  width: 92.982%;
  height: 107.547%;
}
/* „Vybrat“ u sady na míru má v návrhu šedé pozadí (22. 10. 2026);
   hover zůstává z .btn--display:hover. */
.buy__submit--dolu { background: #d9d9d9; }

/* ------------------------------------------------------------------ */
/* VLASTNÍ SADA – „KTERÉ ČTYŘI BUDOU VAŠE?"                            */
/* ------------------------------------------------------------------ */

/* Mřížka z návrhu: tři dlaždice olejů vedle sebe a vedle nich panel
   se sadou, který je zhruba o polovinu širší než dlaždice (3 × 281 +
   462 + 3 × 32 mezery = 1400, tedy šířka hero). V poměru je to
   1,96 : 1, takže se to roztáhne i na užším okně. */
/* Stejný odstup jako u .detail-blok – initKotvy() si ho přečte
   a odečte, takže tlačítko „Vybrat" doroluje pod připnutou lištu
   a ne pod ni. */
.sada { margin-top: 96px; padding-inline: var(--page-gutter); scroll-margin-top: calc(var(--header-pripnuta-h) + 24px); }
.sada__inner { width: min(var(--w-phero), 100%); margin-inline: auto; }

.sada__hlavicka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 64px;
}
.sada__title {
  max-width: 12ch;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  text-transform: uppercase;
}
.sada__perex { max-width: 46ch; font-size: var(--fs-body-lg); line-height: var(--lh-body); }

.sada__telo {
  display: grid;
  grid-template-columns: minmax(0, 1.96fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.sada__oleje {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* ---- Dlaždice oleje ---- */
/* Podklad je šedý jako ve výpisu; vybraná (a najetá) dlaždice se
   probarví gradientem produktu – stejným přechodem, jaký má hero. */
.sada-karta {
  /* Škálu přepisuje výpis inline podle produktu; bez ní zůstane
     dlaždice jen šedá, jako když produkt barvu nemá. */
  --sada-stupnice: var(--c-produkt-pozadi) 0%, var(--c-produkt-pozadi) 62.5%;

  display: flex;
  flex-direction: column;
  background: var(--c-produkt-pozadi);
  transition: background var(--t-fast);
}
/* Do sady se přidává kliknutím kamkoli do dlaždice (js/main.js), takže
   kurzor musí dávat najevo, že je na co kliknout. Vyprodaná dlaždice
   nereaguje, proto u ní zůstává šipka. */
.sada-karta:not(.is-vyprodano) { cursor: pointer; }
.sada-karta.is-vybrana,
.sada-karta:hover {
  /* Dvakrát kvůli oklch – viz .phero výš. */
  background: linear-gradient(180deg, var(--sada-stupnice));
  background: linear-gradient(180deg in oklch, var(--sada-stupnice));
}
.sada-karta.is-vyprodano { opacity: .55; }

/* Poměr stran drží dlaždice, ne fotka: lahvička je 490 × 2000 a jako
   položka mřížky by si obal roztáhla na svou výšku (a procentní výška
   by se neměla oč opřít). Absolutní pozice to obojí řeší najednou. */
.sada-karta__media {
  position: relative;
  aspect-ratio: 217 / 268;
}
/* Rozměr drží obal, ne fotka: ProductShadow si do fotky sahá vlastními
   styly (width: 100 %), takže by absolutní umístění na <img> přebila –
   její styly se vkládají do <head> až za tímhle souborem. Šířka 28,1 %
   odpovídá dřívější výšce 93 %: lahev je 490 × 2000, pole 217 × 268.
   Selektor je dvojitý schválně, aby přebil .product-shadow z knihovny. */
.sada-karta__media .sada-karta__lahev {
  position: absolute;
  /* O kousek nad dnem pole, ať se kontaktní stín vejde celý dovnitř
     a nespadne do nadpisu pod dlaždicí. */
  bottom: 2.5%;
  left: 50%;
  width: 28.1%;
  transform: translateX(-50%);
}

.sada-karta__nazev {
  margin-top: 16px;
  padding-inline: 20px;
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  /* Figma GT BOLD 22: proložení 2 % (node 2001:3885). */
  letter-spacing: 0.44px;
}
.sada-karta__velikost { display: block; font-weight: 400; }

.sada-karta__vic {
  margin: 24px 0 16px;
  padding-inline: 20px;
  font-size: var(--fs-sm);
  /* Figma Mobil/Label 14 má řádkování 1,3; s 1,2 byla karta o pixel nižší. */
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sada-karta__vic:hover { text-decoration-thickness: 2px; }
.sada-karta__sipka { margin-left: 4px; }

/* Počítadlo sedí na spodní hraně dlaždice, ať je u všech ve stejné
   výšce i při různě dlouhých názvech. */
.sada-karta__qty { margin-top: auto; width: 100%; }
/* V komponentě (node 2001:3885) jsou „−“ a „+“ čtverce 48 × 48 a roztahuje
   se jen pole s číslem. Do 26. 10. 2026 se roztahovala všechna tři, takže
   tlačítka vycházela na 56 px a karta neseděla s návrhem. */
.sada-karta__qty .qty__btn { flex: 0 0 48px; width: 48px; }
.sada-karta__qty .qty__input { flex: 1 1 auto; width: auto; font-size: var(--fs-sm); }
.sada-karta__qty .qty__btn:disabled { color: var(--c-gray); cursor: default; }

/* Stav „sada je plná“. Cedulka má rozměry krokovače, aby dlaždice
   nezměnila výšku, až se jedno za druhé prohodí. */
.sada-karta__plna {
  display: none;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--c-degustace);
  background: var(--c-light-gray);
  color: var(--c-gray);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-bold);
}
.sada-karta__plna img { flex: 0 0 auto; }

.sada-karta.is-plna .sada-karta__qty { display: none; }
.sada-karta.is-plna .sada-karta__plna { display: flex; }

.sada-karta__vyprodano {
  margin-top: auto;
  padding: 16px 20px;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--ls-bold);
}

/* ---- Panel „Vaše sada" ---- */
/* Jede s obsahem: na dlouhé mřížce by jinak zůstal nahoře a u posledních
   olejů by nebylo vidět, kolik lahviček ještě chybí. */
.sada-panel {
  position: sticky;
  top: calc(var(--header-pripnuta-h) + 24px);
  padding: 24px;
  background: var(--c-sada-panel);
}
.sada-panel__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}
.sada-panel__stav {
  margin-top: 16px;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.sada-panel__ukazatel {
  margin-top: 12px;
  height: 6px;
  background: var(--c-product-line);
}
.sada-panel__pruh {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-snackbar-ok);
  transition: width var(--t-fast);
}

.sada-panel__sloty {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 24px;
}
/* Čtverec drží poměr stran, ne obsah: lahvička je vysoká 2000 px a jako
   položka mřížky by si slot roztáhla na svou výšku. Proto absolutně. */
.sada-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-white);
}
/* Jako u dlaždice: rozměr drží obal kvůli stínu. Šířka 19,1 % odpovídá
   dřívější výšce 78 % – pole je čtvercové, lahev 490 × 2000. */
.sada-slot .sada-slot__lahev {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19.1%;
  transform: translate(-50%, -50%);
}

/* Obsazené místo otevírá okno „Více o produktu". Plocha je přes celé
   pole, aby se trefilo i vedle lahvičky. */
.sada-slot__vic {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  background: none;
  cursor: pointer;
}
.sada-slot__vic:focus-visible { outline: 2px solid var(--c-black); outline-offset: -2px; }

/* Prázdné místo – kolečko s křížkem jako v návrhu, nakreslené z CSS,
   ať kvůli němu nemusí vznikat ikona. */
.sada-slot__plus {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-product-line);
  border-radius: 50%;
}
.sada-slot__plus::before,
.sada-slot__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--c-product-line);
  transform: translate(-50%, -50%);
}
.sada-slot__plus::before { width: 14px; height: 1px; }
.sada-slot__plus::after { width: 1px; height: 14px; }
.sada-slot.is-plny .sada-slot__plus { display: none; }

.sada-panel__popis { margin-top: 24px; font-size: var(--fs-sm); line-height: var(--lh-tight); }
.sada-panel__cena {
  margin-top: 0;
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-tight);
}
.sada-panel__mena { font-size: var(--fs-body); }

/* Text vlevo, šipka vpravo – jako „Do košíku“ v hero (.buy__submit). */
.sada-panel__koupit { width: 100%; margin-top: 24px; justify-content: space-between; padding-left: 15px; padding-right: 10px; }
/* Dokud nejsou v krabici všechny čtyři lahve, je tlačítko vypnuté:
   světlé pozadí (surface-warm), šedý rámeček i stín a žádná reakce na
   najetí myší – po kliknutí by se stejně nic nestalo.

   Rámeček a stín kreslí obojí --btn-obrys (viz komentář u .btn), takže
   stačí přepsat tu jednu proměnnou. Hover se musí přebít zvlášť: obě
   pravidla výš (.btn:hover posune a zkrátí stín, .btn--display:hover
   zežloutne) platí i na vypnuté tlačítko. */
.sada-panel__koupit:disabled {
  --btn-obrys: var(--c-product-line);
  background: var(--c-chef-bg);
  color: var(--c-gray);
  cursor: default;
}
.sada-panel__koupit:disabled:hover {
  background: var(--c-chef-bg);
  transform: none;
  box-shadow: 4px 4px 0 0 var(--btn-obrys);
}
.sada-panel__koupit:disabled .buy__submit-icon img { opacity: .35; }

/* ---- Okno „Více o produktu" ---- */
/* Ve stejném duchu jako zvětšenina fotek (libs/photoswipe): přes celé
   okno, tmavý podklad na 50 %, křížek vpravo nahoře. Vlevo fotka přes
   celou plochu, vpravo bílý sloupec s textem. */
.sada-okno {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(0px, 2vw, 24px);
  opacity: 0;
  transition: opacity var(--t-fast);
}
/* Zavřené okno musí z cesty úplně: `display: grid` výš přebíjí
   display: none, které atributu hidden dává prohlížeč, takže by
   neviditelná plocha přes celou obrazovku polykala všechna kliknutí.
   pointer-events k tomu drží plochu průchozí i během prolnutí. */
.sada-okno[hidden] { display: none; }
.sada-okno { pointer-events: none; }
.sada-okno.is-videt { opacity: 1; pointer-events: auto; }
.sada-okno__podklad { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }

.sada-okno__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(1680px, 100%);
  /* Pevná výška, ne podle textu: krátký popis by jinak okno srazil
     na proužek a z fotky vlevo by nezbylo nic. */
  height: min(820px, 100%);
  overflow: hidden;
  background: var(--c-white);
}
.sada-okno__obsah { display: contents; }

/* Křížek – komponenta .zavrit, stejný tvar jako má photoswipe. */
.sada-okno__krizek {
  --zavrit-plocha: 48px;
  --zavrit-cara: 26px;
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  color: var(--c-black);
}

.sada-okno__foto { position: relative; background: var(--c-produkt-pozadi); }
.sada-okno__pas { position: absolute; inset: 0; }
.sada-okno__snimek { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity var(--t-fast); }
.sada-okno__snimek.is-videt { visibility: visible; opacity: 1; }
.sada-okno__snimek img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Náhradní produktová fotka je vystřižená lahev – tu nelze oříznout
   na formát okna, musí se vejít celá. */
.sada-okno__foto--lahev .sada-okno__snimek { padding: clamp(24px, 3vw, 64px); }
.sada-okno__foto--lahev .sada-okno__snimek img { object-fit: contain; }

/* Šipky v jedné pilulce dole uprostřed, jako v návrhu. */
.sada-okno__sipky {
  position: absolute;
  bottom: 24px;
  left: 50%;
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--c-white);
  transform: translateX(-50%);
}
.sada-okno__sipka { display: block; width: 44px; height: 32px; transition: transform var(--t-fast); }
.sada-okno__sipka img { display: block; width: 100%; height: 100%; object-fit: contain; }
.js-sada-okno-zpet img { transform: rotate(180deg); }
.js-sada-okno-zpet:hover { transform: translateX(-4px); }
.js-sada-okno-dal:hover { transform: translateX(4px); }

.sada-okno__text {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.3vw, 64px);
  overflow-y: auto;
}
.sada-okno__nadtitulek {
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.sada-okno__nazev {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
}
/* Hvězdičky v okně nejsou – do výběru sady nepatří (rozhodnuto
   9. 10. 2026). Kdyby se měly vrátit, patří mezi název a popis. */
.sada-okno__popis { margin-top: 24px; font-size: var(--fs-body-lg); line-height: var(--lh-body); }

/* Patička se tlačí dolů, ať je u krátkého i dlouhého popisu na stejném
   místě. Odsazení je na ní, ne na řádku „už máte v sadě" – ten
   u nevybraného oleje mizí a tlačítko by se vytáhlo nahoru. */
.sada-okno__paticka { margin-top: auto; padding-top: 32px; }

.sada-okno__vsade {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.sada-okno__vsade[hidden] { display: none; }
/* Odfajfkované kolečko z CSS – jinde na webu se nepoužívá. */
.sada-okno__fajfka {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 2px solid var(--c-black);
  border-radius: 50%;
}
.sada-okno__fajfka::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--c-black);
  border-bottom: 2px solid var(--c-black);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Volná místa v krabici. Kolečka jsou vlevo, věta vedle nich –
   v návrhu je mezi nimi výrazná mezera, ne obvyklých 12 px. */
.sada-okno__mista {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 16px;
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.sada-okno__tecky { display: flex; flex: 0 0 auto; gap: 12px; }
.sada-okno__tecka {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--c-black);
  border-radius: 50%;
}
/* Obsazené místo je plné kolečko. */
.sada-okno__tecka.is-plna { background: var(--c-black); }

.sada-okno__pridat { width: 100%; margin-top: 24px; justify-content: space-between; }
/* Plus je symbol od designéra (button-add.svg, 48 × 48 s tahem 6 –
   Trello „FRONTED Desktop vol. III“, 1. 11. 2026), stejný tah jako
   šipka. Kreslí se jako maska barvou textu, aby vypnuté tlačítko
   zešedlo i s ním. Dřív to byly dva kreslené pruhy 56 × 8. */
.sada-okno__plus {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: currentColor;
  -webkit-mask: url("../assets/icons/button-add.svg") no-repeat center / contain;
  mask: url("../assets/icons/button-add.svg") no-repeat center / contain;
}
/* Na užším desktopu se plus zmenšuje stejně jako šipka (57 → 44 px),
   tedy 48 × 44/57 ≈ 37 px. Musí stát až za základním pravidlem, jinak
   ho přebije. Na mobilu je plus schované (mobil.css). */
@media (max-width: 959px) {
  .sada-okno__plus { width: 37px; height: 37px; }
}

/* Plná krabice: tlačítko zůstává na místě, jen zhasne. Stín i posun
   při najetí se vypínají, jinak by vypadalo dál klikatelně. */
.sada-okno__pridat:disabled {
  border-color: var(--c-degustace);
  background: var(--c-light-gray);
  box-shadow: none;
  color: var(--c-gray);
  cursor: default;
}
.sada-okno__pridat:disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--c-light-gray);
}

/* ==================================================================
   VLASTNÍ SADA NA DESKTOPU – návrh Figma MOJE-vpresu (22. 10. 2026)
   ------------------------------------------------------------------
   Hero 620 px bez fotky, konfigurátor v kontejneru 1058 px (tři
   dlaždice 206 × 443 po 24 px a panel 368), okno „Více o produktu"
   960 × 480 na světlém rozmazaném podkladu. Pod 1024 px platí
   dosavadní rozložení výš a pravidla pro telefon.
   ================================================================== */
@media (min-width: 1024px) {
  /* ---- Hero ---- */
  .phero--sada-miru { min-height: 620px; }
  /* Nápis „SADA OLEJŮ" v návrhu: verzálky od 165 px, 400 px písmo. */
  .phero--sada-miru .phero__ghost { top: clamp(100px, 8.6vw, 165px); }

  /* ---- Konfigurátor ---- */
  .sada { margin-top: 80px; }
  .sada__inner { width: min(1058px, 100%); }
  .sada__hlavicka { gap: 32px; margin-bottom: 32px; grid-template-columns: minmax(0, 513fr) minmax(0, 513fr); }
  .sada__perex { font-size: min(var(--fs-body-lg), 22px); }
  .sada__telo { grid-template-columns: minmax(0, 666fr) minmax(0, 368fr); gap: 24px; }
  .sada__oleje { gap: 24px; }

  /* Dlaždice 206 × 443: odsazení 16, mezi prvky 12. Pole s lahvičkou
     174 × 244, lahvička 53 × 216 nahoře 8 px. */
  .sada-karta { gap: 12px; padding: 16px; }
  .sada-karta__media { aspect-ratio: 174 / 244; }
  .sada-karta__media .sada-karta__lahev { bottom: 8.2%; width: 30.6%; }
  .sada-karta__nazev {
    margin-top: 0;
    padding-inline: 0;
    min-height: 65px;   /* návrh drží místo na tři řádky (65 px s ořezem textu) */
    font-size: min(var(--fs-title), 22px);
    line-height: 1.2;
  }
  .sada-karta__vic { margin: 0; padding-inline: 0; font-weight: 700; font-size: 14px; }
  .sada-karta__vyprodano { padding: 0; }

  /* Panel 368: odsazení 24, mezi řádky 20. */
  .sada-panel { padding: 24px; }
  .sada-panel__stav { margin-top: 20px; font-size: 18px; }
  .sada-panel__ukazatel { margin-top: 20px; height: 8px; background: #d9d9d9; }
  .sada-panel__pruh { background: var(--c-green); }
  .sada-panel__sloty { gap: 12px; margin-top: 20px; }
  .sada-slot { aspect-ratio: 154 / 148; }
  .sada-panel__popis { margin-top: 20px; font-size: 16px; line-height: 1.4; }
  /* Figma (node 2001:3920): mezi popisem a cenou je 8 px, jinde 20.
     Cena je jeden běh GT BOLD 28 – měna není menší. */
  .sada-panel__cena { margin-top: 8px; font-size: min(var(--fs-body-lg), 28px); }
  .sada-panel__mena { font-size: inherit; }
  .sada-panel__koupit { margin-top: 20px; height: 80px; }

  /* ---- Okno „Více o produktu" 960 × 480 ---- */
  /* Ztmavení je černé. Bílé tu bylo podle návrhu, ten měl ale chybu
     („dimmer udělat černý, sorry, měl jsem blbě ve figmě", Trello
     28. 10. 2026) – barvu proto dává základní pravidlo výš a tady
     zůstává jen rozmazání pozadí. */
  .sada-okno__podklad {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .sada-okno__panel { width: min(960px, 100%); height: min(480px, 100%); }
  .sada-okno__sipky {
    bottom: 12px;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .sada-okno__sipka { width: 32px; height: 31px; }
  .sada-okno__text { padding: 24px; }
  .sada-okno__krizek { --zavrit-plocha: 40px; --zavrit-cara: 22px; top: 16px; right: 16px; }
  .sada-okno__nadtitulek { padding-right: 48px; font-size: 16px; }
  .sada-okno__nazev { margin-top: 12px; font-size: min(var(--fs-h3), 60px); }
  .sada-okno__popis { margin-top: 12px; font-size: 16px; line-height: 1.4; }
  .sada-okno__paticka { padding-top: 16px; }
  .sada-okno__vsade,
  .sada-okno__mista { font-size: 18px; }
  .sada-okno__mista { gap: 10px; }
  .sada-okno__tecky { gap: 8px; }
  .sada-okno__tecka { width: 12px; height: 12px; }
  .sada-okno__pridat { margin-top: 16px; }
}

/* ------------------------------------------------------------------ */
/* DROBEČKOVÁ NAVIGACE                                                  */
/* ------------------------------------------------------------------ */
/* V návrhu drobečky nejsou – přibyly kvůli SEO (kontrolní seznam
   13. 10. 2026). Proto jsou držené co nejtišeji: velikost drobného
   popisku, šedá jako datum u recenze, a oddělovač lomítkem jako
   u přepínače jazyka v hlavičce. */
.drobecky {
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}
.drobecky__seznam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drobecky__polozka {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text-secondary);
}
/* Oddělovač patří k položce, ne mezi ně – ve flexu s wrapem se tak
   nikdy neocitne sám na začátku řádku. */
.drobecky__polozka + .drobecky__polozka::before {
  content: "/";
  color: var(--c-product-line);
}
.drobecky__odkaz {
  color: var(--c-text-secondary);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--t-fast);
}
.drobecky__odkaz:hover { color: var(--c-black); }
/* Aktuální stránka není odkaz; tmavší barva to říká i bez kliknutí. */
.drobecky__tady { color: var(--c-black); font-weight: 700; }

/* Výpis i článek mají vlastní vnitřní kontejner, stačí odsadit zespodu. */
.drobecky--vypis { margin-bottom: 24px; }
.drobecky--clanek { margin-bottom: 24px; }

/* Na detailu sedí drobečky v levém sloupci hera nad odznaky, tedy na
   produktovém přechodu. Šedá z bílého podkladu by se na tmavším konci
   přechodu ztrácela, proto tmavší odstíny – ty jsou čitelné na světlém
   i na barevném. */
.drobecky--detail { margin-bottom: 16px; }
.drobecky--detail .drobecky__polozka,
.drobecky--detail .drobecky__odkaz { color: var(--c-slightly-grayish); }
.drobecky--detail .drobecky__polozka + .drobecky__polozka::before { color: var(--c-border-control); }
.drobecky--detail .drobecky__odkaz:hover { color: var(--c-black); }

/* ------------------------------------------------------------------ */
/* ZÁLOŽKY                                                             */
/* ------------------------------------------------------------------ */

/* Lišta sedí na spodku hero plochy, obsah nad ní vyplní zbytek. */
/* Lišta pod heroem na detailu produktu. V návrhu nic nepřepíná –
   je to jen rychlý odkaz na sekci, která je stejně vidět níž na
   stránce. Komponenta má 325 × 55, položky 53 vysoké s odsazením 20. */
.tabs__bar { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: auto; }

.tabs__list {
  display: inline-flex;
  max-width: 100%;
  /* Bez rámečku (Trello „FRONTED Desktop vol. III": odebrat outline
     u navigačního baru). Pixel odsazení je po něm – lišta tím drží
     návrhových 55 px a vybraná pilulka sedí tam, kde seděla. */
  padding: 1px;
  border-radius: 999px;
  /* Pevná výplň, ne odvozená od produktu – overlay/dark z návrhu,
     stejná jako u přepínače objemů nad lištou, včetně rozostření
     pozadí. Viz --c-tab-bar. */
  background: var(--c-tab-bar);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.tabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  padding: 0 20px;
  border-radius: 999px;
  text-decoration: none;
  /* Bílá jako u přepínače objemů nad lištou – obojí je v heru totéž
     ovládání a návrh je chce stejně (Trello „FRONTED Desktop vol. III“,
     upřesnění 14. 10. 2026: sjednotit do bílé, ne do černé). */
  color: var(--c-white);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
/* Vybraná položka je v návrhu bílá. Sekce jsou vidět všechny, takže
   nic nepřepíná – jen drží, na co se naposledy odrolovalo. */
.tabs__tab.is-active { background: var(--c-white); color: var(--c-black); }
/* Hover je stejný jako u přepínače velikostí – ztmavení podkladu, žádná
   žlutá. Vybraná položka je bílá už tak, ta se po najetí nemění. */
.tabs__tab:hover { background: var(--c-prepinac-hover); }
.tabs__tab.is-active:hover { background: var(--c-white); color: var(--c-black); }

/* Sekce detailu jdou pod sebou; kotva na ně nesmí skončit pod hlavičkou.
   Po zarolování je nahoře připnutá lišta, takže odstup musí počítat
   i s ní – initKotvy() si scroll-margin-top přečte a odečte ho. */
.detail-blok[id] { scroll-margin-top: calc(var(--header-pripnuta-h) + 24px); }

/* ------------------------------------------------------------------ */
/* ZÁLOŽKA PRODUKT – galerie, „proč“, benefity                          */
/* ------------------------------------------------------------------ */

.gallery { margin-top: 80px; padding-inline: var(--page-gutter); }   /* návrh: 80 pod herem */

/* Mřížka do tří fotek. Sloupce nejsou tři napevno, ale tolik, kolik je
   fotek – jedna tak stojí uprostřed a dvě vedle sebe na střed, místo aby
   se lepily doleva a vpravo zbyla díra. Šířka sloupce se drží návrhu
   (320 px), jen se smrskne, když se na úzkém displeji nevejde. */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: min(var(--w-gallery), 100%);
  margin-inline: auto;
}
.gallery__grid[data-pocet="1"],
.gallery__grid[data-pocet="2"] {
  grid-template-columns: repeat(var(--pocet), minmax(0, 320px));
  justify-content: center;
  width: 100%;
}
.gallery__grid[data-pocet="1"] { --pocet: 1; }
.gallery__grid[data-pocet="2"] { --pocet: 2; }

.gallery__item { position: relative; aspect-ratio: 1 / 1; background: var(--c-product-line); }
.gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Kliknutím se fotka zvětší (libs/photoswipe). Odkaz vyplní celou
   dlaždici, aby se dalo klepnout kamkoli do čtverce; v mřížce je
   náhled, odkaz vede na plnou fotku. */
.gallery__item > .pswp-gallery__item {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.gallery__item > .pswp-gallery__item:focus-visible { outline: 2px solid var(--c-black); outline-offset: 2px; }

/* Po zvětšenině otevřené myší se obrys nekreslí vůbec – photoswipe po
   zavření vrací fokus na odkaz a prohlížeč ho bere jako fokus
   z klávesnice, takže kolem fotky problikne tmavý rámeček. Platí pro
   všechny položky galerie: úvodní fotku i obsahovou galerii. Třídu
   nasazuje a sundává libs/photoswipe/js/photoswipe.js – ovládání
   klávesnicí si obrys ponechá.

   Pravidlo musí stát až za oběma :focus-visible výš; má s tím
   o kousek výš stejnou specificitu a rozhoduje pořadí. */
.pswp-bez-obrysu .pswp-gallery__item:focus-visible { outline: none; }

/* Nad tři fotky je z galerie slider – tentýž komponent jako u receptů,
   viz Slider v js/main.js. Pás se posouvá transformem, takže viewport
   nesmí scrollovat; ořezává ho overflow. Na rozdíl od receptů nemá
   data-bleed: galerie je vycentrovaná na 992 px a doběhnout k hraně
   stránky by jí vzalo souměrnost. */
/* Ovládání je inline-flex, takže by bez tohohle stálo u levé hrany
   stránky, ne pod galerií. Stejně to řeší recepty i šéfkuchaři –
   jejich sekce jsou taky flex sloupec na střed. */
.gallery--slider { display: flex; flex-direction: column; align-items: center; }

.gallery--slider .gallery__viewport {
  width: min(var(--w-gallery), 100%);
  overflow: hidden;
  touch-action: pan-y;
}
.gallery--slider .gallery__viewport[data-drag] { cursor: grab; }
.gallery--slider .gallery__viewport[data-drag] img { -webkit-user-drag: none; }
.gallery--slider .gallery__viewport.is-tazeny {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.gallery__track {
  display: flex;
  gap: 16px;
  will-change: transform;
  transition: transform var(--t-slide);
}
/* 320 px je rozměr z návrhu; calc drží tři karty i se spárami přesně
   v 992 px, takže čtvrtá vykoukne až za hranou. */
.gallery--slider .gallery__item {
  flex: 0 0 calc((100% - 32px) / 3);
  max-width: 320px;
}
.gallery__nav { margin-top: 24px; }

.why { margin-top: 64px; padding-inline: var(--page-gutter); }   /* návrh: 64 pod galerií */
.why__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 84px;        /* návrh: sloupce 398 + 85 + 398 v kontejneru 881 */
  align-items: start;
  width: min(var(--w-detail), 100%);
  margin-inline: auto;
}
.why__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  line-height: .9;   /* 22. 10. 2026: dřív .79 */
  text-transform: uppercase;
}
/* Návrh: 11 řádků po 25, tedy stejné písmo jako v patičce. */
.why__text { font-size: var(--fs-body); line-height: var(--lh-body); }

/* Na detailu je pás benefitů jiný než na homepage: čtyři pruhy
   310 px na sraz (bez spáry) a drobnější text. */
.page-detail .benefits { margin-top: 60px; }
.page-detail .benefits__grid { width: min(var(--w-detail-benefits), 100%); gap: 0; margin-top: 48px; }  /* 48 jako dřív – zmenšení na 24 (1. 11. 2026) platí jen pro úvodní stránku s větou nad pásem */
/* Text benefitů do 22 px (zadání 22. 10. 2026; dřív strop 18 px z --fs-body).
   Na 1920 px vychází 22, směrem dolů se zmenšuje. */
.page-detail .benefit__text { font-size: clamp(15px, 1.1458vw, 22px); line-height: var(--lh-body); }

/* ------------------------------------------------------------------ */
/* ZÁLOŽKA SLOŽENÍ                                                     */
/* ------------------------------------------------------------------ */

.nutrition { margin-top: var(--section-gap); padding-inline: var(--page-gutter); }
.nutrition__inner { width: min(var(--w-detail), 100%); margin-inline: auto; }

.nutrition__head {
  margin-top: 63px;
  font-size: var(--fs-body);
  line-height: 22px;        /* návrh: dva řádky s roztečí 22 */
}

/* Složení z databáze přichází jako hotová tabulka bez tříd. Hlavní řádky
   pozná podle <strong>, podřazené podle šipky, kterou už mají v textu. */
.nutrition__db { margin-top: 20px; }
.nutrition__db table {
  width: 100%;
  border-collapse: collapse;
}
.nutrition__db td {
  height: 40px;
  padding: 0;
  border-bottom: 1px solid var(--c-table-line);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  vertical-align: middle;
}
/* Linka je v návrhu i nad prvním řádkem, ne jen pod každým. */
.nutrition__db tr:first-child td { border-top: 1px solid var(--c-table-line); }

/* Odsazení řídí úroveň z vp_slozeni_sestav(): nadřazené řádky na
   nulu, první úroveň 16, druhá 32 (návrh: 0 / 17 / 33). */
.nutrition__db td:first-child { text-align: left; padding-left: 0; }
.nutrition__db tr.is-sub td:first-child { padding-left: 16px; }
.nutrition__db tr.is-sub2 td:first-child { padding-left: 32px; }
/* Sloupec s hodnotou si bere jen tolik, kolik potřebuje (width: 1 %
   u tabulkové buňky znamená „co nejmíň"), a nikdy se nezalamuje –
   zbytek šířky zůstane popisku, který se zalomit může. Delší nebo
   kombinovaná hodnota („120 %*" nad „840 mg") se tím vejde i tehdy,
   když je popisek dlouhý (Trello „FRONTED Desktop vol. III“:
   vybalancovat sloupce v tabulce složení). Mezera 12 px drží hodnotu
   od popisku, aby se v nejtěsnějším případě nedotkly. */
.nutrition__db .table-td-right,
.nutrition__db td:last-child {
  width: 1%;
  padding-left: 12px;
  text-align: right;
  white-space: nowrap;
}
.nutrition__db tr:has(strong) td {
  padding-left: 0;
  font-weight: 700;
}
.nutrition__db strong { font-weight: 700; }
/* Ze složení chodí z databáze dvě tabulky – od tabletu nahoru stojí
   vedle sebe, na užších displejích pod sebou. Samotná šířka 50 % je
   nechávala pod sebou, protože tabulka je blokový prvek. */
@media (min-width: 768px) {
  .nutrition__db {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;              /* návrh: 428 + 24 + 428 */
    align-items: start;
  }
  .nutrition__db table { width: 100%; }
  /* Poznámka patří pod obě tabulky, ne vedle jedné z nich. */
  .nutrition__pozn { grid-column: 1 / -1; }
}

/* Poznámka pod tabulkou složení – například vysvětlivka k referenční
   hodnotě příjmu u pokrutin. Chodí z administrace spolu s hodnotami. */
.nutrition__pozn {
  margin-top: 16px;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}

/* ---- Žluté poznámky ---- */
/* Boxy jsou dva nebo tři podle toho, jestli má velikost vyplněnou
   trvanlivost. Auto-flow je rozdělí rovným dílem, ať je jich kolik chce –
   schovaný box se do mřížky nepočítá. */
/* Návrh: tři boxy 285 × 113,5 se spárou 12. Ikona 36 je zarovnaná
   k horní hraně, ne na střed – u jednořádkového textu by jinak
   plavala uprostřed. */
/* ---- Složení olejů v sadě ----
   Návrh „detail olejů v sadě“: dva sloupce rozklikávacích položek,
   otevřená ukazuje popis a nutriční tabulku. Rozměry odměřené z exportu
   (2×): obsah 1336, sloupce 652 + spára 32, zavřená položka 75 vysoká,
   název 28 px, text a tabulka 16 px. */
.sada-slozeni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  /* Sekce je v návrhu širší než obal složení (880), proto se z něj
     vyvazuje – 1336 na střed stránky, na užším okně na šířku okna. */
  width: min(1336px, 100vw - 2 * var(--page-gutter));
  margin: 64px 0 0 50%;
  transform: translateX(-50%);
  align-items: start;
}

.sada-olej { border-top: 1px solid var(--c-sada-linka); }

.sada-olej__nadpis { margin: 0; }

.sada-olej__prepinac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 74px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-black);
  font-family: inherit;
  font-weight: 400;
  font-size: var(--fs-sada-nazev);
  line-height: var(--lh-tight);
  text-align: left;
  cursor: pointer;
}

/* Šipka je trojúhelník z ořezu, ne další asset – v návrhu je to plná
   špička 16 × 8. Otevřená položka ji překlopí. */
.sada-olej__sipka {
  flex: 0 0 auto;
  width: 16px; height: 8px;
  margin-right: 12px;
  background: var(--c-black);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform var(--t-fast);
}
.sada-olej.is-otevreno .sada-olej__sipka { transform: rotate(180deg); }

.sada-olej__panel[hidden] { display: none; }
.sada-olej__panel { padding-bottom: 40px; }

.sada-olej__popis {
  font-size: var(--fs-sada-text);
  line-height: var(--lh-body);
}
.sada-olej__popis p { margin: 0 0 1em; }
.sada-olej__popis p:last-child { margin-bottom: 0; }

/* Hodnocení je zatím zakomentované v detail.php, styl čeká připravený. */
.sada-olej__hodnoceni {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}
.sada-olej__pocet { font-size: var(--fs-sada-text); color: var(--c-gray); }

/* Hlavička i tabulka jsou tytéž třídy jako u jednoho produktu, jen
   menším písmem a bez horního odsazení – uvnitř panelu už odsazuje
   popis nad nimi. */
.sada-olej__panel .nutrition__head {
  margin-top: 32px;
  font-size: var(--fs-sada-text);
  line-height: var(--lh-tight);
}
/* Uvnitř sady je sloupec o polovinu užší než na detailu jednoho oleje,
   takže obě tabulky jdou pod sebe – návrh je má taky pod sebou. Přebíjí
   to dvousloupcový grid z @media (min-width: 768px). */
.sada-olej__panel .nutrition__db {
  display: block;
  margin-top: 16px;
  font-size: var(--fs-sada-text);
}
.sada-olej__panel .nutrition__db table { width: 100%; }
.sada-olej__panel .nutrition__db .table2 { margin-top: 32px; }
.sada-olej__panel .nutrition__pozn { margin-top: 24px; }

@media (max-width: 1023px) {
  .sada-slozeni {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin: 40px 0 0;
    transform: none;
  }
}

/* ---- Rozbalovací sekce na detailu (telefon) ----
   Na desktopu tlačítko není vidět a sekce je celá rozbalená; mobilní
   pravidla jsou v bloku ≤767 px. */
.sekce__prepinac { display: none; }

.notes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 24px;   /* 22. 10. 2026: dřív 60px */
}
.note {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-height: 113px;
  padding: 18px 20px 20px;
  background: var(--c-yellow);
}
/* Bez tohohle řádku by atribut hidden nestačil – display: flex výš
   přebíjí výchozí pravidlo prohlížeče [hidden] { display: none }. */
.note[hidden] { display: none; }

.note__icon { flex: 0 0 auto; width: 36px; height: 36px; }
.note__title {
  font-weight: 700;
  /* Do 18 px (zadání 22. 10. 2026; dřív strop 16 px z --fs-sm). */
  font-size: clamp(13px, 0.9375vw, 18px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  /* Nadpis sedí vedle ikony, v návrhu o 6 px níž než její horní hrana. */
  margin-top: 6px;
}
.note__text { margin-top: 20px; font-size: var(--fs-sm); line-height: 23px; }

/* ------------------------------------------------------------------ */
/* ZÁLOŽKA RECENZE                                                     */
/* ------------------------------------------------------------------ */

.reviews-detail { margin-top: var(--section-gap); padding-inline: var(--page-gutter); }
.reviews-detail__inner { width: min(var(--w-detail), 100%); margin-inline: auto; }

.reviews-detail__summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-top: 63px;
}

.score { flex: 0 0 292px; text-align: center; }
.score__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(64px, 6.5625vw, 126px);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
}
.score__meta { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; }
.score__count { font-size: var(--fs-sm); line-height: var(--lh-tight); }

/* ---- Histogram ---- */
.histogram { flex: 0 1 431px; display: flex; flex-direction: column; gap: 16px; }
.histogram__row { display: flex; align-items: center; gap: 14px; }
.histogram__stars { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.histogram__stars img { width: 16px; height: 16px; }
.histogram__star--empty { opacity: .25; }
.histogram__bar {
  position: relative;
  flex: 1 1 auto;
  height: 16px;
  border: 2px solid var(--c-black);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-white);
}
.histogram__fill { position: absolute; inset: 0 auto 0 0;left:-2px; background: var(--c-yellow);border-right: 2px solid var(--c-black); }
.histogram__count {
  flex: 0 0 auto;
  min-width: 24px;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  
}

.reviews-detail__sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  margin-top: 66px;
}

/* ---- Seznam recenzí ---- */
.review-list { margin-top: 32px; border-top: 1px solid var(--c-table-line); }
.review-item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 24px 0 40px;
  border-bottom: 1px solid var(--c-table-line);
}
.review-item__name {
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
}
.review-item__verified {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 8px 12px;
  background: var(--c-green);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.review-item__text { margin-top: 20px; font-size: var(--fs-title); line-height: var(--lh-title); }
.review-item__date {
  justify-self: end;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--c-gray);
  white-space: nowrap;
}

/* ---- Stránkování ---- */
.pagination { display: flex; align-items: center; gap: 28px; margin-top: 24px; }
.pagination__step { display: flex; align-items: center; transition: transform var(--t-fast); }
.pagination__step:hover { transform: translateX(4px); }
.pagination__step img { display: block; width: 42px; height: auto; }

/* ---------------- Detail produktu – breakpointy ---------------- */

/* Lišta záložek se na užších displejích posouvá vodorovně, aby se
   nezalamovala ani neořezávala. */
@media (max-width: 899px) {
  .tabs__bar {
    justify-content: flex-start;
    margin-inline: calc(-1 * var(--page-gutter));
    padding-inline: var(--page-gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs__bar::-webkit-scrollbar { display: none; }
  .tabs__list { flex: 0 0 auto; }
  .tabs__tab { height: 48px; padding: 0 16px; }
}

@media (max-width: 1023px) {
  .phero { min-height: 0; padding-bottom: 32px; }
  .phero__media { height: auto; min-height: 320px; margin-top: 0; }
  .phero:not(.phero--plochy) .phero__media { align-content: center; padding-bottom: 0; }
  .buy { margin-top: 24px; }
  .phero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px 32px;
    padding: 64px 0 32px;
  }
  /* Hero tu nemá pevnou výšku ani posunutou lahev, takže se text
     nemá na co středit – vrací se na začátek řádku. */
  .phero__info { grid-column: 1; grid-row: 1; max-width: none; align-self: start; margin-bottom: 0; }
  .phero__media { grid-column: 2; grid-row: 1; }
  /* Plochý produkt (sady, sáčky) je širší než scéna a schválně z ní
     přetéká. V tomhle rozložení ale scéna stojí u pravé hrany, takže
     přetečení spadlo za okraj hero a `overflow: hidden` ho uťal –
     na 768–1023 px byla krabice i degustační sada oříznutá zprava
     (změřeno 27. 10. 2026: fotka 378 px končila na 788 při okně 768).
     Scéna si tu proto bere šířku fotky a mřížka s ní počítá; strop
     46vw drží levému sloupci s textem aspoň polovinu okna. */
  .phero--plochy .phero__media { width: auto; }
  .phero--plochy .phero__media .phero__foto,
  .phero--plochy .phero__krabice { max-width: min(46vw, var(--lahev-max, 800px)); }
  .phero--plochy .phero__media--sada { width: auto; }
  .phero--plochy .phero__sada { max-width: 46vw; }
  .buy { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 420px; justify-self: start; align-self: start; margin-bottom: 0; }

  .why__inner { gap: 40px; }
  .reviews-detail__summary { gap: 32px; }
  .score { flex: 0 0 240px; }
}

@media (max-width: 767px) {
  .phero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 72px 0 32px;   /* místo pro odkaz „Zpět“, který leží nad obsahem */
  }
  /* Scéna se zmenší, ale poměry lahví (--lahev) zůstávají. */
  .phero__media { grid-column: 1; grid-row: 1; justify-self: center; width: min(260px, 62vw); height: min(360px, 52vh); }
  .phero__info { grid-row: 2; }
  .buy { grid-row: 3; max-width: none; }

  .why__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .notes { grid-auto-flow: row; grid-auto-columns: auto; }

  .reviews-detail__summary { flex-wrap: wrap; justify-content: flex-start; }
  .score { flex: 1 1 200px; text-align: left; }
  .score__meta { justify-content: flex-start; }
  .histogram { flex: 1 1 100%; }
  .reviews-detail__sort { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
  .reviews-detail__sort .sort { width: 100%; }

  .review-item { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; }
  .review-item__body { grid-column: 1 / -1; grid-row: 2; }
  .review-item__date { grid-column: 2; grid-row: 1; }

  /* Tři čtverce vedle sebe jsou na mobilu každý sotva 100 px. Mřížka
     se proto skládá pod sebe a slider ukazuje jednu fotku a kus další,
     ať je poznat, že se dá posunout. */
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__grid[data-pocet="1"] { grid-template-columns: minmax(0, 320px); }
  .gallery--slider .gallery__item { flex: 0 0 72%; max-width: none; }
}

@media (max-width: 479px) {
  .awards { flex-wrap: wrap; gap: 16px; }
  .awards__logo { height: 64px; }
  /* Znovu, ať pevná výška nad ním nedeformuje poměr stran. Šířka klesá
     ve stejném poměru jako u kulatých log (64/88). */
  .awards__logo--bio { max-width: 72px; height: auto; }
  .buy__box { height: auto; flex-wrap: wrap; gap: 16px; padding: 16px; }
  .qty { width: 100%; justify-content: space-between; }
  .gallery__grid { gap: 8px; }
  .gallery__track { gap: 8px; }
  .gallery--slider .gallery__item { flex: 0 0 78%; }
  .pagination { gap: 20px; }
  .pagination__step img { width: 34px; }
}

/* ---------------- Vlastní sada na telefonu (podklady/mobil.pdf, str. 12–13) ----
   Na desktopu stojí mřížka olejů (3 sloupce) a panel sady vedle sebe.
   Na 390px okně z toho byly dlaždice široké 60 px s názvem po jednom
   slově na řádek – jediná sekce, která byla na telefonu opravdu
   rozbitá, ne jen jinak poskládaná.

   Návrh to rozpojuje: dlaždice jdou přes celou šířku ve dvou
   sloupcích a z panelu je lišta u spodní hrany okna („VAŠE SADA · 2/4"
   s cenou, čtyři místa a tlačítko do košíku). Lišta je `sticky`, ne
   `fixed`: drží se u spodní hrany, dokud je sekce s výběrem na
   obrazovce, a na jejím konci dosedne na své místo – jinak by zakryla
   patičku i sekce pod výběrem. */
@media (max-width: 767px) {
  .sada__hlavicka { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 32px; }
  .sada__title { max-width: none; }
  .sada__telo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sada__oleje { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .sada-panel {
    position: sticky;
    top: auto;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 16px;
    /* Lišta jde od kraje ke kraji, text v ní drží okraj stránky. */
    margin-inline: calc(-1 * var(--page-gutter));
    padding: 14px var(--page-gutter) 16px;
  }
  .sada-panel__title { grid-area: 1 / 1 / 2 / 2; font-size: 20px; }
  .sada-panel__stav  { grid-area: 2 / 1 / 3 / 2; margin-top: 0; }
  .sada-panel__cena  { grid-area: 1 / 2 / 3 / 3; margin-top: 0; }
  .sada-panel__sloty {
    grid-area: 3 / 1 / 4 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }
  .sada-panel__koupit { grid-area: 4 / 1 / 5 / -1; margin-top: 12px; height: 56px; font-size: 31px; }
  /* Ukazatel i popisek („4x100 ml · box a DPH v ceně") v návrhu
     v liště nejsou – počet míst je vidět na slotech a na stavu. */
  .sada-panel__ukazatel,
  .sada-panel__popis { display: none; }

  /* ---- Okno „Více o produktu" (návrh str. 13–16) ----
     Na desktopu je to dvousloupcové okno (fotka vlevo, text vpravo).
     Na telefonu z něj návrh dělá plachtu u spodní hrany: nahoře pás
     fotek vedle sebe, pod ním text a dole stav sady s tlačítkem.
     Dřív se dvousloupcové okno mačkalo do 390 px a v textovém sloupci
     zbývalo 187 px, tedy dvě slova na řádek. */
  .sada-okno { place-items: end stretch; padding: 0; }
  .sada-okno__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: auto;
    max-height: 92svh;
  }

  /* Z přepínaných snímků je vodorovný pás – v návrhu jsou tři fotky
     vedle sebe a třetí vykukuje za okrajem. Šipky tím ztrácejí smysl,
     pás se posouvá prstem. */
  .sada-okno__foto { height: 165px; }
  .sada-okno__pas {
    position: static;
    display: flex;
    gap: 8px;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .sada-okno__pas::-webkit-scrollbar { display: none; }
  .sada-okno__snimek {
    position: static;
    flex: 0 0 165px;
    visibility: visible;
    opacity: 1;
    scroll-snap-align: start;
  }
  .sada-okno__foto--lahev .sada-okno__snimek { padding: 12px; }
  .sada-okno__sipky { display: none; }
  .sada-okno__text { padding: 20px; }
  .sada-okno__krizek { top: 8px; right: 8px; width: 40px; height: 40px; }
}

/* ---------------- Detail produktu na telefonu (podklady/mobil.pdf, str. 4) ----
   Návrh skládá produktový blok jinak než desktop. Gradient drží jen
   fotku, všechno ostatní stojí na bílé; ocenění leží přes fotku;
   titulek je velký nadpis a pod ním jdou odznaky, perex, přepínač
   objemu, řádek cena + počet kusů a tlačítko. Záložky pod heroem
   návrh nemá (rozhodnuto 15. 10.).

   Blok je až tady, za pravidly pro ≤479 px, protože je přebíjí
   (velikost log u ocenění, skládání cenového boxu).

   Souřadnice v komentářích jsou z návrhu, počítané od horní hrany
   obsahu stránky (prohlížečová lišta v PDF zabírá prvních 56 px). */
@media (max-width: 767px) {
  .phero {
    /* Fotka: gradient 150..521, lahev 190..465. Hlavička končí na 132,
       takže gradient začíná 18 px pod ní a lahev 40 px pod gradientem. */
    /* Mobilní návrh 19. 10. 2026, odměřeno z podkladu (392 px široký,
       hodnoty v CSS px): hlavička s lištou končí na 106, gradient
       106..512, lahev 179..454,5. Odtud:
         gradient začíná hned pod hlavičkou (0),
         blok je 406 = 103,6 % šířky,
         lahev 73 pod jeho horní hranou = 18,6 %,
         lahev vysoká 275,5 = 70,5 % (beze změny). */
    --foto-top: 0px;
    --foto-blok: clamp(330px, 103.6vw, 460px);
    --lahev-top: clamp(56px, 18.6vw, 82px);
    --lahev-h: clamp(230px, 70.5vw, 320px);    /* návrh 275 */

    /* Dole musí zbýt na stín tlačítka „Do košíku" (4 px) a na jeho
       posun při najetí (2 px) – .phero má overflow: hidden, takže
       s nulovým odsazením se stín i spodek tlačítka ořízly o hranu
       sekce. */
    padding-bottom: 8px;
    background: none;   /* gradient přebírá ::before, viz níž */
  }

  /* Gradient jako podvrstva, ne pozadí celé sekce: v návrhu končí hned
     pod lahví a titulek i nákupní box stojí na bílé. „Duch" musí
     zůstat nad ním, proto pseudoprvek a ne pozadí na .phero__media –
     to by ducha překrylo. */
  .phero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(var(--header-h) + var(--foto-top));
    right: 0;
    left: 0;
    height: var(--foto-blok);
    background: linear-gradient(180deg, var(--phero-stupnice));
    background: linear-gradient(180deg in oklch, var(--phero-stupnice));
  }

  /* „Duch" je v návrhu přes dva řádky, slovo pod slovem, a mnohem
     větší než dosud: „MODRÝ" měří 229 z 392 a výška verzálek je 109.
     Na Kommissaru to vychází na 35 % šířky okna. Šířka min-content
     zalomí název po slovech – přesně jako v návrhu – a protože je
     prvek ořezaný účtařem, `top` rovnou sedí na horní dotah verzálek
     (15 pod horní hranou gradientu). */
  .phero__ghost {
    top: calc(var(--header-h) + var(--foto-top) + 15px);
    width: min-content;
    white-space: normal;
    text-align: center;
    font-size: 35vw;
  }

  .phero__inner {
    padding: calc(var(--foto-top) + var(--lahev-top)) 0 0;
    row-gap: 0;
  }
  /* Lahev se měří šířkou (--lahev drží poměr mezi 100, 250 a 500 ml),
     takže se výška v barevném bloku ladí šířkou scény. U běžné
     produktové fotky (poměr 210 × 565) vyjde při scéně 50 % šířky
     okna lahev vysoká jako --lahev-h, tedy 275 na 390 jako v návrhu.
     Dřív tu bylo 56 % a lahev z bloku vyrůstala. */
  .phero__media {
    width: min(196px, 50vw);
    height: var(--lahev-h);
    min-height: 0;
  }

  /* Text začíná 32 px pod spodní hranou gradientu. Když je nad ním
     pruh náhledů, začíná blok dřív: náhledy do gradientu 24 px
     zajíždějí a teprve za nimi je oněch 32 na text. */
  .phero__info {
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--foto-blok) - var(--lahev-top) - var(--lahev-h) + 32px);
  }
  .phero__info:has(.nahledy) {
    margin-top: calc(var(--foto-blok) - var(--lahev-top) - var(--lahev-h) - 24px);
  }

  /* ---- Pruh náhledů ----
     Návrh: čtyři čtverce přes celou šířku obsahu, mezera 8, horních
     24 px leží ještě na gradientu. Vybraná (úvodní) fotka má černé
     obtažení 2 px – kreslí se obrysem, aby se řada nerozjela.
     Víc než čtyři fotky se dají odrolovat do strany. */
  .nahledy {
    order: -1;
    display: flex;
    gap: 8px;
    /* Dvojka dokola je místo pro obrys vybraného náhledu – rolovací
       kontejner by ho u krajní fotky jinak uřízl. Záporný okraj ji
       zase sebere, takže fotky stojí přesně na okraji stránky. */
    margin: -2px -2px 30px;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nahledy::-webkit-scrollbar { display: none; }
  .nahledy__polozka { flex: 0 0 calc((100% - 3 * 8px) / 4); }
  .nahledy__odkaz {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
  }
  .nahledy__odkaz.is-active { outline: 2px solid var(--c-black); }
  .nahledy__odkaz img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* Úvodní fotka je lahev na průhledném pozadí – pod náhledem proto
     stojí tentýž gradient jako v heru a lahev se do čtverce vejde celá. */
  .nahledy__polozka--hlavni .nahledy__odkaz {
    background: linear-gradient(180deg, var(--phero-stupnice));
    background: linear-gradient(180deg in oklch, var(--phero-stupnice));
  }
  .nahledy__polozka--hlavni .nahledy__odkaz img { object-fit: contain; padding: 10px; }

  /* Galerie je na telefonu nahoře v pruhu náhledů, sekce níž by tytéž
     fotky ukázala podruhé. Schovává se jen galerie – ve stejném bloku
     (#sekce-produkt) je i „Proč …“ s popisem a výhody s ikonami a ty na
     telefonu být mají. Dřív se schovával celý blok, takže zmizely s ním
     (jen u produktů s galerií, 8. 11. 2026). */
  .detail-blok > .gallery { display: none; }

  .drobecky        { order: 0; }
  .phero__title    { order: 1; }
  .phero__badges   { order: 2; }
  .phero__rating   { order: 3; }
  .phero__perex    { order: 4; }

  /* „MAKOVÝ OLEJ 250 ml" má v návrhu výšku verzálek 41 px, což u
     nadpisového řezu odpovídá 55 – stejně jako titulek hero na
     homepage. */
  .phero__title {
    font-family: var(--font-heading);
    font-size: 55px;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-h1);
    margin-bottom: 0;
  }

  /* Odznaky jsou v návrhu až pod titulkem a drobné: rámeček 21,5 px
     vysoký, výška verzálek 9,5 (tedy 13 px), odsazení 7 po stranách.
     Platí jen tady, na kartách ve výpisu zůstávají velké. */
  .phero__badges { order: 2; margin: 16px 0 0; gap: 8px; }
  .phero__badges .product__badge {
    padding: calc((22px - 1cap) / 2) 7px;   /* desktop má 34 */
    font-size: 13px;
  }

  /* Návrh: hvězdička 16 px s mezerou 4, číslo recenzí hned za nimi. */
  .phero__rating { gap: 8px; }
  .phero__rating .rating { gap: 4px; }
  .phero__rating .rating img { width: 16px; height: 16px; }
  .phero__reviews-plne {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .phero__reviews-pocet { display: inline; }

  /* Návrh: pět řádků s roztečí 22, výška verzálek 11,5 → 16 px. */
  .phero__perex { margin-top: 24px; font-size: 16px; line-height: 22px; }

  /* ---- Ocenění přes fotku ----
     Návrh je pokládá na okraje gradientu (x 44..134 a 254..342), ve
     svislé ose lahve. Popisek „Získaná ocenění" tam není. Platí jen
     pro jedno nebo dvě loga – u tří a víc by se přes fotku nevešla a
     zůstávají v řádku pod perexem. */
  .awards:not(:has(li:nth-child(3))) {
    position: absolute;
    z-index: 2;
    top: calc(var(--foto-top) + var(--lahev-top) + (var(--lahev-h) - 80px) / 2);
    right: 0;
    left: 0;
    margin: 0;
    /* Návrh 19. 10.: loga 80 vysoká, levé 45 od okraje stránky, pravé
       48. Odsazení se počítá od .phero__inner, které už samo stojí
       20 px od okraje – odtud 25 a 28. */
    padding-inline: 25px 28px;
    pointer-events: none;
  }
  .awards:not(:has(li:nth-child(3))) .awards__label { display: none; }
  .awards:not(:has(li:nth-child(3))) .awards__list {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .awards:not(:has(li:nth-child(3))) .awards__logo { height: 80px; }
  .awards:not(:has(li:nth-child(3))) .awards__logo--bio { max-width: 92px; height: auto; }

  /* ---- Nákup ---- */
  .buy { margin-top: 24px; }   /* návrh: 24,5 od perexu k pilulce */

  /* Pilulka je v návrhu 39 px vysoká (desktop 49). A hlavně: na
     telefonu nestojí na barevném heru, ale na bílé, takže průhledná
     výplň overlay/dark z desktopu by z ní udělala šedivku s bílým
     textem. Návrh ji má plně šedou (#d9d9d9 = border-subtle)
     s černým textem a bílou vybranou pilulkou. */
  .buy__sizes {
    background: var(--c-product-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Dráha 36 px s pilulkami 34 – odměřeno po pixelech z exportu
     mobilního rámu (Figma „mobil", node 2123:24604): vodorovné linky
     dráhy sedí na y 315 a 350, bílá vybraná pilulka mezi 316 a 349.
     Do 30. 10. 2026 tu bylo 38/38 podle staršího návrhu. */
  .buy__sizes { padding: 1px; }
  .buy__size-label { height: 34px; font-size: 15px; color: var(--c-black); }
  .buy__size-label:hover { background: rgba(0, 0, 0, .06); }
  .buy__size-input:checked + .buy__size-label { background: var(--c-white); }

  /* Cena a počet kusů stojí v návrhu vedle sebe na bílé, bez rámečku
     a bez skla – ten box patří barevnému heru na desktopu. */
  /* Štítek se slevou drží i na telefonu skoro desktopovou velikost:
     55 px celkem, z toho 21 zajede pod dráhu a 34 zůstane vidět (žlutá
     začíná na y 281, dráha na 315). Písmo 15 px jako v pilulce – v
     návrhu mají oba texty stejnou výšku verzálek. Zaoblení 12 jako na
     desktopu. Do 30. 10. 2026 tu byl štítek 44 px, z toho 27 vidět. */
  .buy__prepinac--sleva { margin-top: 34px; }
  .buy__slevy { bottom: calc(100% - 21px); }
  .buy__sleva {
    height: 55px;
    padding: 8px 12px 0;
    border-radius: 12px 12px 0 0;
    font-size: 15px;
  }

  /* Cenový box tu nemá výplň ani rámeček, takže za něj není štítek kam
     schovat – stojí proto celý nad cenou a zarovnává se na levou hranu
     (box nemá vnitřní odsazení). */
  .buy__cena { display: flex; flex-direction: column; gap: 10px; }
  .buy__cena--sleva { margin-top: 16px; }
  .buy__sleva--sama {
    position: static;
    align-self: flex-start;
    height: auto;
    padding: 6px 12px;
    border-radius: 8px;
  }

  .buy__box {
    height: auto;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .buy__prices { gap: 6px; }
  .buy__price { font-size: 28px; }        /* návrh: výška verzálek 20,5 */
  .buy__currency { font-size: 28px; }
  .qty { width: 144px; }                  /* návrh: 222..366 */
  .qty__btn { width: 48px; }
  .qty__input { flex: 1 1 auto; width: auto; }

  /* Velké tlačítko má v návrhu na telefonu 56 px, ne 81 jako na
     desktopu. */
  .buy__submit {
    height: 56px;
    margin-top: 16px;
    padding: 0 11px 0 13px;
    font-size: 31px;
  }

  /* Záložky návrh na telefonu nemá – sekce jdou rovnou pod sebou. */
  .tabs__bar { display: none; }

  /* ---- Rozbalovací sekce PROČ… a SLOŽENÍ ----
     Návrh má vedle nadpisu plnou špičku 13 × 6 u pravého okraje
     a sbalený text ukazuje dva řádky. */
  .why__title,
  .nutrition .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .sekce__prepinac {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: -6px;   /* špička končí 10 px od okraje stránky */
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-black);
    cursor: pointer;
  }
  .sekce__sipka {
    width: 14px;
    height: 7px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform var(--t-fast);
  }
  /* Sbalená sekce ukazuje špičku dolů („rozbalit"), rozbalená nahoru. */
  .sekce__prepinac[aria-expanded="true"] .sekce__sipka { transform: rotate(180deg); }

  /* Rozbaluje i klepnutí na nadpis (main.js, initDetailSekce, 8. 11. 2026).
     Bez výběru textu a šedého záblesku při klepnutí. */
  .why__title,
  .nutrition .section-title {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Ořez na dva řádky. Text přichází z databáze jako jeden blok
     s <br>, takže se ořezává přímo .why__text – a na něm sedí
     text-box-trim, který spolu s overflow: hidden usekne háčky a
     čárky prvního řádku (OSTROPESTREC místo OSTROPESTŘEC). Ořez se
     proto na sbalené sekci vypne a nahradí ho záporné okraje: u
     GT Pressura (hhea 885/215, verzálky 700) a 16/22 je nad
     verzálkami 0,3225em a pod účařím 0,3525em. */
  .why.is-sbaleno .why__text {
    text-box-trim: none;
    text-box: normal;
    margin: -0.3225em 0 -0.3525em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .nutrition.is-sbaleno .nutrition__inner > :not(.section-title) { display: none; }

  /* Perex sekce má v návrhu stejnou míru jako perex produktu. */
  .why__text { font-size: 16px; line-height: 22px; }

  /* Sekce odděluje v návrhu tenká linka border-default přes šířku
     obsahu (x 20..370), ne přes celé okno. Nad ní je 28 px od
     předchozího bloku, pod ní 14 px k verzálkám nadpisu. */
  /* 24 + 8 odsazení hera = 32 od spodní hrany tlačítka k lince,
     návrh má 31,5. */
  .why,
  .nutrition { margin-top: 24px; }
  .why__inner,
  .nutrition__inner {
    border-top: 1px solid var(--c-degustace);
    padding-top: 14px;
  }
  .nutrition { margin-top: 48px; }
  .nutrition__head { margin-top: 20px; }

  /* ---- Praktické informace ----
     Návrh má jeden žlutý blok se třemi položkami, ne tři samostatné
     rámečky pod sebou. */
  .notes {
    gap: 24px;
    padding: 24px 20px;
    background: var(--c-yellow);
  }
  .note {
    min-height: 0;
    padding: 0;
    background: none;
  }
}

/* =========================================================================
   NÁŠ PŘÍBĚH (nas-pribeh.html)
   Tělo stránky je převzaté 1:1 z původního webu vpresu.cz/nas-pribeh –
   černý blok, kontejner 940, textový sloupec 600, nadpisy Kommissar
   6,5vw a 3,15vw, text GT Pressura 18/140 %. Odsazení jsou v původních
   jednotkách (vw pro nadpis, vh pro svislé mezery), aby se stránka chovala
   stejně jako originál. Hlavička a patička jsou z redesignu.
   ========================================================================= */

.story {
  /* Černý blok dosedá rovnou na hlavičku – bez bílého proužku nad
     sebou (zadání 30. 10. 2026). Platí na desktopu i na telefonu,
     mobilní přepis tahle vlastnost nemá. */
  margin-top: 0;
  padding-inline: 20px;
  background: var(--c-black);
  color: var(--c-white);
}

.story__inner {
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  padding-bottom: 6vh;
}

.story__title {
  /* Stejná poloha nadpisu jako u Receptů a Blogu (.blog__inner má 61 px)
     – sekce začíná hned pod šipkou, bez odsazení navíc (Trello „Desktop /
     Náš příběh / optimalizace vertical spacingu“, 2. 11. 2026). Dřív 8vw,
     tedy 115 px na 1440 a 154 px na 1920. Telefon si drží 8vw (≈ 31 px),
     což odpovídá 32 px u Receptů. */
  padding-top: 61px;
  margin-bottom: 8vh;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(48px, 6.5vw, 125px);
  line-height: 0.892;                 /* 5,8vw / 6,5vw */
  letter-spacing: 0.005em;
  text-align: center;
  text-transform: uppercase;
}

.story__text {
  max-width: 600px;
  margin: 0 auto 8vh;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.story__text p + p { margin-top: 1.4em; }

.story__heading {
  max-width: 600px;
  margin: 0 auto 8vh;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 3.15vw, 60px);
  line-height: 0.921;                 /* 2,9vw / 3,15vw */
  letter-spacing: var(--ls-bold);
  text-align: center;
  text-transform: uppercase;
}
.story__heading--muted { color: var(--c-story-gray); }

/* ---- Fotky ----
   Fotky jsou natočené jako polaroidy a přilepené páskou; úhly i pozice
   pásek jsou převzaté z původního webu. */
.story__photo {
  position: relative;
  width: 90%;
  margin: 12vh auto;
}
.story__photo img { display: block; width: 100%; height: auto; }

.story__photo--tilt { max-width: 600px; }
.story__photo--tilt img { transform: rotate(-5deg); }

.story__photo--pair {
  max-width: 660px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.story__photo--pair img { width: 48%; }
.story__photo-a { transform: rotate(3deg); }
.story__photo-b { transform: rotate(-3.76deg); }

.story__photo--flat { max-width: 600px; margin: 8vh auto 6vh; }

.story__caption {
  width: 100%;
  margin-top: 20px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: center;
  color: var(--c-story-gray);
}

/* ---- Lepicí páska ---- */
.story__tape {
  position: absolute;
  z-index: 10;
  background: rgba(196, 196, 196, .8);
}
.story__tape--1 { width: 40%; height: 12%; top: -6.8%; left: 9%;    transform: rotate(-11.24deg); }
.story__tape--2 { width: 35%; height: 12%; bottom: -2%; right: 5%;  transform: rotate(-5.96deg); }
.story__tape--3 { width: 6%;  height: 40%; top: 30%;   left: -3.5%; transform: rotate(3.55deg); }
.story__tape--4 { width: 6%;  height: 40%; top: 29%;   right: -3%;  transform: rotate(-5.61deg); }
.story__tape--7 { width: 8%;  height: 56%; top: 22%;   left: -3%; }
.story__tape--8 { width: 8%;  height: 56%; top: 22%;   right: -4%; }

/* ---- Odkaz do eshopu ---- */
.story__cta { display: flex; justify-content: center; margin-top: 8vh; }
.story__cta .btn { gap: 40px; }
/* Šipka je společná pro všechna tlačítka .btn--display (nahoře, „Šipka
   v tlačítku“). Do 2. 11. 2026 tu měla vlastní velikost 24–35 px. */

/* ---------------- Náš příběh – breakpointy ---------------- */

@media (max-width: 767px) {
  .story__title { padding-top: 8vw; }
}

@media (max-width: 1023px) {
  /* Nulové odsazení řeší základní pravidlo výš, tady zbývalo jen
     `.story__title { margin-top: 50px }`. To ale nic nedrželo: nad
     nadpisem ani v .story__inner, ani v .story není výplň, takže
     okraj prosákl ven (slučování svislých okrajů) a vracel nad černý
     blok přesně těch 50 px, které měla nulová hodnota odstranit.
     Nadpis si odsazení drží vlastní výplní 8vw, která je uvnitř. */
}

@media (max-width: 560px) {
  /* Dvojice fotek se pod sebe vejde líp než vedle sebe. */
  .story__photo--pair { max-width: 400px; }
  .story__photo--pair img { width: 100%; }
  .story__photo-b { margin-top: 8vh; }
  .story__cta .btn { gap: 20px; }
}

/* =========================================================================
   BLOG – VÝPIS ČLÁNKŮ (blog.html)
   Převzato 1:1 z původního webu vpresu.cz/blog: šedý podklad #E5E5E5,
   sloupec 600, nadpis Kommissar 6,5vw, štítky s 2px rámečkem, články
   střídavě foto vlevo a vpravo, foto 290 px na výšku s ořezem.
   Hlavička a patička jsou z redesignu.
   ========================================================================= */

.blog {
  padding-inline: 20px;
  background: var(--c-blog-bg);
}

.blog__inner {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding-top: 61px;      /* v originálu vychází horní hrana verzálek nadpisu na 61 px */
  padding-bottom: 8vh;
}

.blog__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(48px, 6.5vw, 125px);
  line-height: 0.892;                  /* 5,8vw / 6,5vw */
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* ---- Hlavička výpisu ----
   Nadpis s počtem vlevo, vyhledávací pole vpravo. Hlavička i řada
   štítků jdou podle návrhu přes celou šířku stránky, zatímco samotný
   výpis zůstává v úzkém sloupci – proto se vytahují ze 600px obalu
   zápornými okraji. */
.blog__inner > .vypis-hlavicka,
.blog__inner > .blog__filters {
  width: auto;
  margin-inline: calc((min(var(--w-detail), 100vw - 2 * var(--page-gutter)) - 100%) / -2);
  max-width: none;
}

.vypis-hlavicka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
}

.vypis-hledani {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}
/* Popisek se nepodbarvuje – světlejší blok, který je kolem něj v návrhu
   stavů, je jen podklad plátna, ne součást komponenty (upřesněno
   26. 10. 2026). Pozadí zůstává za všech okolností stejné. */
.vypis-hledani__label {
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  white-space: nowrap;
}

/* V návrhu 240 px; na úzkém okně se smrskne, aby pole i s popiskem
   zůstalo uvnitř stránky (jinak přetékalo za pravý okraj). */
.vypis-hledani__obal {
  position: relative;
  display: flex;
  flex: 0 1 240px;
  width: 240px;
  min-width: 0;
  max-width: 100%;
}
.vypis-hledani__pole {
  width: 100%;
  min-width: 0;
  height: 56px;
  /* Vpravo místo pro křížek – dlouhý text se před ním uřízne třemi tečkami. */
  padding: 0 34px 0 16px;
  border: 1px solid var(--c-border-control);
  background: var(--c-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1;
  color: var(--c-black);
  text-overflow: ellipsis;
}
/* Vybrané pole má v návrhu černý dvoupixelový rámeček. Vnější rozměr
   se nemění (border-box), proto text neposkočí. */
.vypis-hledani__pole:focus { border: 2px solid var(--c-black); }
.vypis-hledani__pole::placeholder { color: var(--c-text-secondary); }
/* Křížek, kterým prohlížeč doplňuje type="search", by do návrhu nesedl –
   máme vlastní. */
.vypis-hledani__pole::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Křížek na vyprázdnění. Je to odkaz na výpis bez hledání, aby fungoval
   i bez JavaScriptu; s ním se pole vyprázdní na místě. Ukazuje se jen
   u vyplněného pole. Plocha na klik je vyšší a širší než samá značka. */
.vypis-hledani__smazat {
  position: absolute;
  top: 0;
  right: 6px;
  display: none;
  width: 42px;
  height: 100%;
  color: var(--c-black);
  transition: opacity var(--t-fast);
}
.vypis-hledani.je-vyplneno .vypis-hledani__smazat { display: block; }
.vypis-hledani__smazat:hover { opacity: .6; }
.vypis-hledani__smazat::before,
.vypis-hledani__smazat::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: currentColor;
}
.vypis-hledani__smazat::before { transform: rotate(45deg); }
.vypis-hledani__smazat::after { transform: rotate(-45deg); }

.blog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

/* Na telefonu se hledání zalomí pod nadpis a roztáhne přes celou
   šířku – vedle popisku „Filtrovat podle“ by na 240px pole místo
   nezbylo. */
@media (max-width: 767px) {
  .vypis-hlavicka { gap: 16px; }
  .vypis-hledani { width: 100%; }
  /* Pole je přes celou šířku, ale `flex-basis` se tu nesmí nechat v pixelech:
     `.vypis-hledani` je na telefonu sloupec, takže by se ze 140 px stala
     VÝŠKA obalu – pole pak mělo pod sebou 84 px prázdna. */
  .vypis-hledani__obal { flex: 0 0 auto; width: auto; }
}

/* Štítek slouží zároveň jako filtr nad výpisem i jako rubrika u článku.

   Velikost je pevných 16 px, ne --fs-body: ta se s šířkou okna mění
   mezi 15 a 18 a štítek pak byl na úzkém okně menší a na širokém větší,
   než má být. Osmnáctka patří hlavní navigaci, štítkům šestnáctka.

   Jeden štítek pro všechno: filtr nad výpisem, rubrika u článku
   i štítek v pásu receptů. Do 27. 10. 2026 měla každá role vlastní
   výšku (28 / 34 / 40) a filtr navíc vlastní barvu. */
.pill {
  display: inline-block;
  /* Výška 33 px a popisek opticky na střed. Svislé odsazení se počítá
     od verzálkové výšky (1cap), ne od řádku – stejně jako
     u .product__badge, který je v pořádku. Do 27. 10. 2026 tu byl
     inline-flex s align-items: center; ten ale centruje celý řádek
     i s prostorem pro dotažnice, takže verzálky seděly pod středem
     rámečku, a text-box-trim na flexový prvek neplatí (proto byla
     .pill--vyrazny v ořezávací skupině zbytečně).

     Trello „RECEPTY + BLOG / používat nový design tagů": vycentrovat,
     pevná výška 33 px, černý obrys. Čtyři pixely v odečtu jsou dva
     rámečky. */
  padding: calc((33px - 4px - 1cap) / 2) 8px;
  border: 2px solid var(--c-black);
  color: var(--c-black);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  /* Dvouslovný štítek se nesmí zalomit – rámeček by pak měl dva řádky
     a vypadl z řady. */
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
/* Počet u filtrů. Mezeru dělá mezera v HTML (inline-block ji na rozdíl
   od flexu nezahodí), tahle ji jen dorovná na šestku z návrhu. */
.pill__count { margin-left: 2px; }
/* Najetím se štítek obarví na to, jak bude vypadat po zvolení. */
a.pill:hover { background: var(--c-black); color: var(--c-white); }

/* Štítky ve filtru měly vlastní výšku a barvu – od 27. 10. 2026 je
   obojí v základu .pill, takže tu nezůstalo co přepisovat. */

/* Tlačítko „…“ rozbaluje zbylé štítky; v návrhu je černé jako vybraná
   volba, aby bylo poznat, že to není další rubrika. */
.pill--vice {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
  letter-spacing: 0;
}
a.pill--vice:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); opacity: .75; }

.pill--active,
a.pill--active:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

/* Štítek v pásu receptů a článků. Byl 40 px vysoký a měl vlastní
   barvy; od 27. 10. 2026 je stejný jako všude jinde (Trello „RECEPTY
   + BLOG": sjednotit tagy ve slideru i ve výpisu). Třída zůstává
   v HTML, ať se dá kdykoli znovu odlišit. */

/* ---- Výpis článků ---- */
.blog__list { margin-top: 50px; }

.blog-article {
  padding: 20px 0;
  border-bottom: 2px solid var(--c-black);
}

.blog-article__link {
  display: flex;
  align-items: flex-start;   /* foto si drží 290 px i u delšího názvu (v originálu jsou to floaty) */
  gap: 20px;
  margin-top: 20px;
}
.blog-article--reverse .blog-article__link { flex-direction: row-reverse; }

.blog-article__photo { flex: 1 1 0; min-width: 0; }
.blog-article__photo img {
  display: block;
  width: 100%;
  height: 290px;
  object-fit: cover;
}

/* Název nahoře, rubrika dole – v návrhu je štítek ukotvený k patě sloupce. */
.blog-article__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  min-height: 290px;
}

.blog-article__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 3.15vw, 60px);
  line-height: 0.917;                  /* 2,9vw / 3,15vw */
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  overflow-wrap: break-word;   /* pojistka pro dlouhá slova v úzkém sloupci */
}


.blog-article__tags { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Starší články ---- */
.blog__more { display: flex; justify-content: flex-end; margin-top: 20px; }
/* display:flex výš přebíjí výchozí chování atributu hidden, kterým se
   tlačítko schovává, když další záznamy nejsou. */
.blog__more[hidden] { display: none; }

.blog__more-link {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 3.15vw, 60px);
  line-height: 0.917;
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  transition: transform var(--t-fast);
}
.blog__more-link:hover { transform: translateY(3px); }

.blog__more-icon { display: block; flex: 0 0 auto; width: clamp(28px, 3vw, 58px); }
/* „Starší“ má stejný symbol jako tlačítka – šipku dolů od designéra
   (button-arrow-down.svg, tah 6; Trello „FRONTED Desktop vol. III“).
   Dřív to byla otočená arrow.svg 45 × 41, která se na 58 px nafoukla
   na tah skoro 8 px a vedle tlačítek působila tučněji. Šířka 53/57
   drží stejnou výšku, jakou měla otočená šipka. */
.blog__more-icon img { display: block; width: 92.982%; height: auto; margin-inline: auto; }

/* ---------------- Blog – breakpointy ---------------- */

@media (max-width: 560px) {
  /* Vedle sebe by foto i název byly příliš úzké – skládají se pod sebe.
     Sloupcový směr mění význam flex-basis, proto se poměry musí zrušit. */
  .blog-article__link,
  .blog-article--reverse .blog-article__link {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .blog-article__photo,
  .blog-article__body { flex: 0 0 auto; }
  .blog-article__photo img { height: 220px; }
  .blog-article__body { min-height: 0; }
  .blog__more-link { gap: 16px; }
}

/* =========================================================================
   OBCHODNÍ PODMÍNKY (obchodni-podminky.html)
   Převzato 1:1 z původního webu: šedý podklad, text vlevo na 50 % šířky,
   nadpis s údaji o společnosti vpravo na 40 %, číslování kapitol a odstavců
   přes CSS countery (1. / 1.1.). Hlavička a patička jsou z redesignu.
   Text se záměrně neořezává přes text-box-trim – originál ho neořezává
   a stránka tak drží stejné vertikální rozestupy.
   ========================================================================= */

.terms {
  padding: 30px 3vw;
  background: var(--c-blog-bg);
}

.terms__inner {
  display: grid;
  grid-template-columns: 50% 40%;
  justify-content: space-between;
  align-items: start;
  width: min(var(--w-header), 100% - 2 * var(--page-gutter));
  margin:auto;
}

.terms__intro {
  grid-column: 2;
  grid-row: 1;
  margin-top: 10px;
  padding-right: 40px;
}

.terms__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(48px, 6.5vw, 125px);
  line-height: 0.892;                  /* 5,8vw / 6,5vw */
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.terms__meta {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.terms__body {
  grid-column: 1;
  grid-row: 1;
  margin-top: 50px;
  margin-bottom: 8vh;
}

/* ---- Číslování ----
   Kapitoly 1., 2., … odstavce 1.1., 1.2., … Číslo odstavce visí
   v levém odsazení, stejně jako v originále. */
.terms__chapters { list-style: none; counter-reset: chapter; }
.terms__chapters > li:not(.terms__form) { counter-increment: chapter; }

/* Kapitola s kotvou (dnes jen #reklamace, kam vede odkaz z patičky)
   by po odrolování dosedla na horní hranu okna – tohle jí nechá mezeru. */
.terms__chapters > li[id] { scroll-margin-top: 30px; }

.terms__chapter-title {
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: 1.16;                   /* 1,8rem / 1,55rem */
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.terms__chapter-title::before { content: counter(chapter) ". "; }

.terms__items {
  list-style: none;
  counter-reset: item;
  margin-bottom: 50px;
}

.terms__items > li {
  position: relative;
  margin-top: 25px;
  margin-left: 80px;
  counter-increment: item;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.terms__items > li::before {
  position: absolute;
  margin-left: -80px;
  content: counter(chapter) "." counter(item) ". ";
  font-weight: 700;
}

/* Bílý box s odkazem na reklamační formulář – v originále má vlevo místo
   na ikonu, používáme stejnou šipku jako u „Starší“ na blogu. */
/* Odrážkové seznamy uvnitř číslovaného odstavce (stránka Ochrana osobních dat). */
.terms__bullets { margin-top: 8px; }
.terms__bullets > li {
  margin-left: 100px;
  list-style: disc outside;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Číslované podseznamy uvnitř odstavce (body 3.4, 4.1 a 7.2).
   Číslují se plnou cestou 7.2.1. – countery `chapter` a `item` jsou
   nastavené na nadřazené kapitole a odstavci, takže na ně podseznam
   dosáhne a stačí přidat vlastní `subitem`.
   Číslo stojí v textovém bloku a text se pod něj zalamuje (originál to
   má jako `list-style: decimal inside`), proto ::before a ne visící
   číslo jako u odstavců. */
.terms__subitems { list-style: none; counter-reset: subitem; }
.terms__subitems > li {
  margin-top: 25px;
  margin-left: 60px;
  counter-increment: subitem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.terms__subitems > li::before {
  content: counter(chapter) "." counter(item) "." counter(subitem) ". ";
}

.terms__form { margin-bottom: 50px; }

.terms__download {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: -20px;
  padding: 15px 20px;
  background: var(--c-white);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition: background-color var(--t-fast);
}
.terms__download:hover { background: var(--c-yellow); }
.terms__download-icon { display: block; flex: 0 0 auto; width: 20px; }
.terms__download-icon img { display: block; width: 100%; height: auto; transform: rotate(90deg); }

.terms__date {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------------- Obchodní podmínky – breakpointy ---------------- */

@media (max-width: 1023px) {
  .terms__inner { grid-template-columns: minmax(0, 1fr); }
  .terms__intro { grid-column: 1; grid-row: 1; padding-right: 0; }
  .terms__body { grid-column: 1; grid-row: 2; margin-top: 40px; }
}

@media (max-width: 560px) {
  .terms__items > li { margin-left: 56px; }
  .terms__items > li::before { margin-left: -56px; }
  .terms__subitems > li { margin-left: 40px; }
}

/* =========================================================================
   DĚKOVACÍ STRÁNKA (dekujeme.php)
   Staví na pokladně: stejné dva sloupce (2 × 448 px + 128 px mezera),
   stejný krémový podklad a stejná dělicí linka uprostřed – proto má
   stránka na <body> i třídu page-checkout. Vlevo rekapitulace, vpravo
   souhrn objednávky ve stejné značce jako .checkout-summary.
   ========================================================================= */

.thanks { padding-bottom: 120px; }

/* Dělicí linka z pokladny jde přes celou stránku až dolů – tady by
   prošla i pásem receptů pod sloupci. Vypne se a nakreslí se znovu
   jen přes mřížku sloupců. */
.page-dekujeme .checkout-page::before { display: none; }

.thanks__inner {
  position: relative;
  display: grid;
  grid-template-columns: var(--co-col) var(--co-col);
  justify-content: center;
  column-gap: var(--co-gap);
  padding-top: 42px;   /* hlavička 158 px → obsah začíná na 200 px */
  padding-inline: var(--page-gutter);
}
.thanks__inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42px;
  bottom: 0;
  width: 1px;
  background: var(--c-degustace);
}

/* ---- Levý sloupec ---- */
.thanks__number {
  /* GT Pressura Bold – --font-body je GT Pressura, chybl jen řez. */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

/* Pevných 80 px, ne clamp podle šířky okna: levý sloupec má na desktopu
   i pod zlomem stejných 448 px, takže se nadpis nemá podle čeho měnit.
   Slovo je v tomhle řezu široké asi 240 px, takže se vejde i na 320px
   displej. Odměřeno z návrhu: verzálky 70 px, což je u tohohle řezu
   (poměr 0,734) právě 96 px. */
.thanks__title {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 96px;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
  color: var(--c-ink);
}

/* 22 px, ne --fs-co-h (28) jako v pokladně: pod osmdesátkou nadpisu
   by dvacet osm působilo jako druhý titulek. Z návrhu. */
.thanks__lead {
  margin-top: 16px;
  font-weight: 700;
  font-size: 22px;
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

.thanks__note { margin-top: 16px; font-size: var(--fs-co-base); line-height: var(--lh-body); color: var(--c-ink); }
/* Adresa podpory je v návrhu bez podtržení; odkaz zůstává, jen se
   nekreslí linka. Na najetí zešedne, ať je poznat, že se dá kliknout. */
.thanks__note a { transition: opacity var(--t-fast); }
.thanks__note a:hover { opacity: .6; }

.thanks__muted { font-size: var(--fs-co-base); line-height: var(--lh-body); color: var(--c-ink-muted); }

/* Bloky pod sebou odděluje vlasová linka, stejná jako v pokladně. */
.thanks__payment,
.thanks__block,
.thanks__foot {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--c-field-line);
}

/* Patička stránky má v návrhu černou linku, stejně jako v pokladně. */
.thanks__foot { border-top-color: var(--c-black); padding-top: 28px; }

/* Fakturační údaje patří k doručení, ne do vlastní sekce – linka mezi
   nimi v návrhu není. */
.thanks__block--navazuje {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

/* ---- Stav platby ---- */
.thanks__payment { display: flex; align-items: flex-start; gap: 12px; }

.thanks__check {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  background-color: var(--c-in-stock);
  -webkit-mask: url("../assets/icons/check.svg") center / 24px 24px no-repeat;
  mask: url("../assets/icons/check.svg") center / 24px 24px no-repeat;
}

.thanks__payment-state {
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.thanks__payment--paid .thanks__payment-state { color: var(--c-in-stock); }
.thanks__payment-text { margin-top: 8px; font-size: var(--fs-co-base); line-height: var(--lh-body); color: var(--c-ink); }
/* Tělo bloku si bere zbytek řádku vedle fajfky, ať se do něj vejde
   QR platba s údaji vedle sebe. */
.thanks__payment-body { flex: 1 1 auto; min-width: 0; }

/* ---- QR platba (převod, ještě nezaplaceno) ---- */
/* Kód vlevo, údaje k ručnímu zadání vpravo, popisek pod nimi přes celou
   šířku. Když se údaje vedle kódu nevejdou (úzké telefony), zalomí se
   pod něj – flex-wrap, žádný breakpoint. Obrázek má dvojnásobné
   rozlišení a zobrazuje se v polovině (atributy width/height), takže je
   ostrý i na retině. */
.thanks__qr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 20px;
}
.thanks__qr-img { flex: 0 0 auto; display: block; background-color: #fff; }
.thanks__qr-udaje {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.thanks__qr-radek dt { font-size: var(--fs-co-sm); line-height: var(--lh-tight); color: var(--c-ink-muted); }
.thanks__qr-radek dd {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.thanks__qr-popis { flex: 1 1 100%; font-size: var(--fs-co-sm); line-height: var(--lh-body); color: var(--c-ink-muted); }

/* ---- Platba kartou neprošla: „Zaplatit kartou“ (PayU) ---- */
.thanks__payment-form { margin-top: 20px; }

/* ---- Prosba o hodnocení na Heurece (Trello #96, 9. 11. 2026) ----
   Mezi platbou a Doručením, v šedém rámečku bez linky – oddělená od
   údajů objednávky, stejně jako v potvrzovacím e-mailu. */
.thanks__heureka {
  margin-top: 32px;
  padding: 24px;
  background: var(--c-product-line);   /* zadání 9. 11. 2026 – dřív --c-light-gray */
}
.thanks__heureka-title {
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.thanks__heureka-text {
  margin-top: 8px;
  font-size: var(--fs-co-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
}

/* ---- Doručení, fakturace, pomoc ---- */
/* Stejných 22 px jako podnadpis výš. „Fakturační údaje“ nadpis není –
   je to popisek uvnitř stejné sekce, viz .thanks__strong. */
.thanks__heading {
  font-weight: 700;
  font-size: 22px;
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.thanks__heading + * { margin-top: 12px; }

.thanks__strong { font-weight: 700; font-size: var(--fs-co-base); line-height: var(--lh-tight); color: var(--c-ink); }
.thanks__strong + .thanks__address { margin-top: 12px; }
/* Adresa podpory navazuje na otázku jako další řádek odstavce, ne jako
   samostatný blok – v návrhu je mezi nimi jen řádkování. */
.thanks__strong + .thanks__note { margin-top: 0; }

.thanks__address { font-size: var(--fs-co-base); line-height: 1.6; color: var(--c-ink); }

/* ---- Tlačítko zpět do obchodu ---- */
/* Stejné tlačítko jako „Zaplatit“ v pokladně – návrh má obojí shodné,
   včetně výšky 80 px a velké šipky (viditelná geometrie 57 × 52 uvnitř
   assetu s viewBoxem 45 × 41). */
.thanks__cta { margin-top: 32px; }
.thanks__cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  padding: 0 20px 0 14px;
  gap: 16px;
}
/* Šipku řeší společné pravidlo pro všechna tlačítka .btn--display
   nahoře (--sipka-sirka), včetně zmenšení na užších displejích.
   Vlastní kopie tady přebíjela ten žebřík, takže na telefonu
   zůstávala desktopových 57 px. */

/* ---- Patička stránky ---- */
/* Stejné rozestupy jako v patičce pokladny – s 32px mezerou se tři
   odkazy do 448px sloupce nevešly a „Zásady vracení“ padaly na druhý
   řádek. */
.thanks__legal ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
}
.thanks__legal a {
  font-size: var(--fs-co-sm);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-field-line);
}
.thanks__legal a:hover { border-bottom-color: var(--c-ink); }


/* ---- Pravý sloupec: souhrn ---- */
.thanks__summary-title {
  margin-bottom: 32px;
  font-weight: 700;
  font-size: var(--fs-co-h);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

/* ---- Pás receptů pod obsahem ---- */
.page-dekujeme .recipes { margin-top: clamp(64px, 6.4vw, 120px); }

/* Tlačítko pod pásem – stejné jako ostatní velká tlačítka se šipkou. */
.recipes__cta { display: flex; justify-content: center; margin-top: 48px; }
.recipes__cta-btn { gap: 32px; }
/* Stejná geometrie jako u šipky v pokladně – viz .reviews__cta-icon. */

/* ---------------- Děkovací stránka – breakpointy ---------------- */

/* Pod 960 px jsou sloupce pod sebou (--co-col je 100 %), souhrn jde
   nahoru – po zaplacení zajímá zákazníka nejdřív, co si objednal. */
@media (max-width: 959px) {
  .thanks__inner { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .thanks__inner::before { display: none; }
  .thanks__summary { order: -1; }
}

@media (max-width: 560px) {
  .thanks { padding-bottom: 72px; }
  .thanks__payment,
  .thanks__block,
  .thanks__foot { margin-top: 24px; padding-top: 24px; }
  .thanks__block--navazuje { margin-top: 24px; padding-top: 0; }
  .thanks__cta-btn { gap: 16px; }
  .recipes__cta-btn { gap: 16px; }
}

/* ------------------------------------------------------------------ */
/* PARTNEŘI (partneri.html)                                            */
/* Řádky staví na výpisu blogu – i v originále je to tentýž `.clanek`  */
/* a `.clanek-foto`. Liší se jen vyšší foto a pravý sloupec, kde je    */
/* název nahoře a adresa u paty.                                       */
/* ------------------------------------------------------------------ */

.blog-article--partner .blog-article__link { margin-top: 0; }
.blog-article--partner .blog-article__photo img { height: 310px; }
.blog-article--partner .blog-article__body { min-height: 310px; }

.partner__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 3.15vw, 60px);
  line-height: 0.917;
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.partner__name a:hover { text-decoration: underline; text-underline-offset: 4px; }

.partner__address {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* „Google maps →“ je v návrhu podtržené silnou linkou. */
.partner__maps {
  display: inline-block;
  margin-top: 2px;
  border-bottom: 2px solid var(--c-black);
}
.partner__maps a:hover { color: var(--c-slightly-grayish); }

@media (max-width: 560px) {
  .blog-article--partner .blog-article__photo img { height: 240px; }
  .blog-article--partner .blog-article__body { min-height: 0; }
}

/* ==================================================================
   KOŠÍK – vysouvací panel
   ------------------------------------------------------------------
   Leží schovaný za pravým okrajem a vyjede po kliknutí na ikonu
   košíku. Stejný princip jako .menu-vysouvaci, jen zprava a přes
   celou výšku. Animaci dělá CSS, main.js jen přepíná třídy.

   Rozměry z návrhu „kosik“ (panel 525 px, odsazení 20 px, export 2×).
   Panel má tři pásma: hlavička (70 px), rolovací obsah a patka, která
   zůstává vidět i u dlouhého košíku.
   ================================================================== */
.kosik-prostor {
  --kosik-easing: cubic-bezier(.645, .045, .355, 1);
  --kosik-prechod: 500ms;
  --kosik-odsazeni: 20px;
  --kosik-linka: #888888;              /* odměřeno – předěly v panelu */

  position: fixed;
  inset: 0;
  z-index: 120;
}
.kosik-prostor[hidden] { display: none; }

/* Ztmavení webu pod panelem. */
.kosik-zaves {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity var(--kosik-prechod) var(--kosik-easing);
}
.kosik-prostor.is-open .kosik-zaves { opacity: 1; }

.kosik-panel {
  position: absolute;
  top: 0; right: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(525px, 100vw);
  height: 100%;
  background: var(--c-slightly-grayish);
  color: var(--c-white);
  transform: translateX(100%);
  transition: transform var(--kosik-prechod) var(--kosik-easing);
}
.kosik-prostor.is-open .kosik-panel { transform: none; }

/* Texty se měří od verzálek po účaří, stejně jako na pokladně – jinak
   by všechna odsazení odečtená z návrhu seděla o ~0,18em vedle. */
.kosik-panel__nadpis,
.kosik-polozka__cena,
.kosik-polozka__cena-puvodni,
.kosik-polozka__za-kus,
.kosik-stitek,
.kosik-poznamka__odkaz,
.kosik-pole__label,
.kosik-soucet__radek span,
.kosik-zaruka {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

/* ---- Hlavička panelu ---- */
.kosik-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  min-height: 71px;                    /* 70 px + linka */
  padding: 0 var(--kosik-odsazeni);
  border-bottom: 1px solid var(--kosik-linka);
}

.kosik-panel__nadpis {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}

/* Křížek v návrhu měří 23 × 23 px – při otočení o 45° to vyjde na
   čáru dlouhou 30 px. */
.kosik-panel__zavrit {
  --zavrit-plocha: 40px;
  --zavrit-cara: 30px;
  --zavrit-sila: 2px;
  color: var(--c-white);
}

/* ---- Obsah ----
   Obal vyměňuje ajax, proto v něm musí být i patka. Rolování si bere
   jen vnitřní .kosik-panel__rolovaci. */
.kosik-panel__telo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.kosik-panel__rolovaci {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px var(--kosik-odsazeni) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Systémový posuvník je na tmavém panelu světlý pruh – přebarvený
     na černou. scrollbar-color umí Firefox i novější Chrome,
     ::-webkit-scrollbar pokrývá starší WebKit. */
  scrollbar-width: thin;
  scrollbar-color: var(--c-black) transparent;
}
.kosik-panel__rolovaci::-webkit-scrollbar { width: 8px; }
.kosik-panel__rolovaci::-webkit-scrollbar-track { background: transparent; }
.kosik-panel__rolovaci::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--c-black);
}
.kosik-panel__rolovaci::-webkit-scrollbar-thumb:hover { background: #000; }

.kosik-panel__prazdny {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-degustace);
}

/* ---- Pruhy nad položkami ----
   V návrhu stojí hned pod hlavičkou, ne až pod seznamem. */
.kosik-pruh {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Rozměry ze zadání (Trello 28. 10. 2026): 8 px zeshora, 12 ze stran,
     písmo 16 a mezi oběma pruhy 4 px. Písmo je napevno – panel má pevnou
     šířku, takže nemá podle čeho růst; --fs-body dávalo 15 až 18 px. */
  margin: 0 0 4px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: var(--lh-tight);
}
.kosik-pruh { background: var(--c-black); color: var(--c-white); }
.kosik-pruh--sleva { margin-bottom: 0; }
/* Splněná podmínka (doprava zdarma / množstevní sleva) – pruh zezelená. */
.kosik-pruh.is-splneno { background: var(--c-green); color: var(--c-black); }

/* Ikony z assetů mají každá jinou barvu (local_shipping.svg bílou,
   sell.svg tmavou) – přebarvují se podle pruhu: na černém bílá,
   na zeleném černá. */
.kosik-pruh__ikona { flex: 0 0 auto; display: flex; }
.kosik-pruh__ikona img { display: block; width: 32px; height: 32px; filter: brightness(0) invert(1); }
.kosik-pruh.is-splneno .kosik-pruh__ikona img { filter: brightness(0); }

/* „Přidejte ještě 1 ks a máte slevu 10 %“ pod názvem položky. */
/* Drobné texty pod názvem mají jednotný odstup 6 px a těsnější
   řádkování – v položce se jich sejde i několik (upozornění na
   množstevní slevu, štítky slev, výpis sady). */
.kosik-polozka__jeste-kus {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--c-green);
}

/* ---- Položky ---- */
.kosik-seznam {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

/* Fotka je čtverec 108 × 108 (návrh V-PRESU-2026, 4802:4761 – změřeno
   20,7–128,1 px od levého okraje panelu); tělo i cenový sloupec se
   táhnou na stejnou výšku, aby přepínač kusů i „1 ks = …“ seděly na
   spodní hraně fotky.

   Do 27. 10. 2026 tu byl poměr 424 : 530 převzatý z dlaždice ve výpisu.
   Řádek košíku tím vycházel 137,5 px vysoký proti 108 v návrhu a mezi
   názvem a přepínačem zela mezera – v panelu se vešly dvě položky
   místo tří. */
.kosik-polozka {
  /* 86,4 × 108: formát 4 : 5 se dělá zúžením, výška 108 zůstává
     (upřesnění v Trellu – „zmenšit proporcně šířku, výšku ponechat").
     Řádek košíku si tím drží 108 px, takže se jich do panelu vejde
     o jeden víc než s původními 137,5. */
  --kosik-foto: 86.4px;

  display: flex;
  align-items: stretch;
  gap: 16px;
}
/* Rozestup řádků 26 (návrh: 336,9 → 362,7). */
.kosik-polozka + .kosik-polozka { margin-top: 26px; }

/* Stejná role jako .product__media ve výpisu – pole, ve kterém stojí
   scéna s fotkou. Odsazení si scéna nese s sebou (.product__scene /
   .product__bottle), takže fotka v košíku vypadá jako na kartě. */
.kosik-polozka__foto { flex: 0 0 var(--kosik-foto); }

.kosik-polozka__pole {
  position: relative;
  display: grid;
  align-content: center;
  width: 100%;
  /* Formát 4 : 5 (Trello „FRONTED Desktop vol. III", 27. 10. 2026).
     Mezitím tu byl čtverec podle návrhu v Figmě; 4 : 5 sedí studiovému
     snímku (800 × 1000) přesně, takže se vejde na celou výšku pole.
     Šířka se počítá z --kosik-foto, výška z poměru – proto 86,4 × 108. */
  aspect-ratio: 4 / 5;
  background: #ededed;                 /* odměřeno z návrhu */
  overflow: hidden;
}
/* Se studiovým snímkem se pozadí srovná s tím na fotce, jinak by vedle
   něj zůstal proužek jiné šedé. */
.kosik-polozka__pole--snimek { background: var(--c-produkt-pozadi); }

/* Dárková sada na míru: v náhledu stojí krabice s vybranými lahvičkami.
   Skládá se ze stejných vrstev jako hero na detailu, jen vyplní pole –
   proto se jí tady vrací šířka a ruší strop, který platí v heru. */
.kosik-polozka__krabice {
  grid-area: 1 / 1;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.kosik-polozka__snimek {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Název nahoře, přepínač kusů dole – štítek se slevou se drží nad ním. */
.kosik-polozka__telo {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

/* Dva řádky napevno – s velikostí i bez ní, takže řádky košíku
   nepodskakují podle délky názvu. Delší název se ořízne: když je pod ním
   velikost, vejde se na jeden řádek, bez velikosti má oba. */
.kosik-polozka__nazev {
  /* Název se NESMÍ ořezávat přes text-box-trim: spolu s -webkit-line-clamp
     by se ořez na verzálky promítl i do oříznutí vykreslování a usekl by
     háčky a čárky (OSTROPESTREC místo OSTROPESTŘEC). Stejného posazení
     dosáhnou záporné okraje.

     Horní okraj byl dopočítaný z metrik hhea (885/215) a vyšel o kousek
     větší, než kolik prohlížeč nad verzálkami opravdu nechává – název pak
     přečníval 0,8 px nad horní hranu miniatury. Od 26. 10. 2026 je tu
     hodnota změřená v prohlížeči (0,189em nad verzálkami při řádkování 1,2). */
  margin: -0.189em 0 -0.265em;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}
.kosik-polozka__nazev a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Velikost patří na první řádek za název („Cart / Desktop / drobnosti":
   400 ml na první řádek, uvolní se tím místo pro výpis olejů v sadě).
   Dřív měla `display: block` a brala si vlastní řádek. Flex s baseline
   je tu proto, že název je `-webkit-box` kvůli ořezu na dva řádky –
   jako inline prvek by se s ním na řádek nedostala. Dlouhý název si
   vezme celou šířku a velikost se zalomí pod něj, jako dřív. */
.kosik-polozka__nazev a { color: inherit; text-decoration: none; }
.kosik-polozka__nazev a:hover { text-decoration: underline; }

.kosik-polozka__nazev {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
}
.kosik-polozka__velikost { display: inline; }

/* Obsah sady na míru – čtyři vybrané lahvičky pod názvem položky.
   Je to výčet, ne název, takže drobnějším písmem a bez verzálek. */
.kosik-polozka__obsah {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-transform: none;
}

/* Štítky slev jsou v návrhu pod názvem, ne u ceny. */
.kosik-polozka__stitky {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}

.kosik-stitek {
  display: inline-block;
  padding: 4px 6px;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  color: var(--c-black);
}
.kosik-stitek--akce { background: var(--c-yellow); }
.kosik-stitek--mnozstvi { background: var(--c-yellow); }   /* 22. 10. 2026: dřív zelená */

/* ---- Přepínání počtu kusů ----
   116 × 36 s bílým rámečkem; prostřední buňka je tmavší než tlačítka.
   Změřeno z návrhu 4802:4761 (147,8–263,5 × 299,7–335,9). */
.kosik-pocet {
  display: grid;
  grid-template-columns: 1fr 38px 1fr;
  align-items: stretch;
  box-sizing: border-box;
  width: 116px;
  height: 36px;
  border: 1px solid var(--c-white);
}

.kosik-pocet__tlacitko {
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .2);
  color: var(--c-white);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
}
.kosik-pocet__tlacitko:hover { background: rgba(255, 255, 255, .32); }

.kosik-pocet__cislo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
  font-weight: 700;
  font-size: var(--fs-body);
}

/* ---- Ceny u položky ----
   Cena nahoře, „1 ks = …“ na spodní hraně fotky. */
.kosik-polozka__ceny {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  text-align: right;
}

.kosik-polozka__cena {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
}

.kosik-polozka__cena-puvodni {
  /* Škrtnutá, jak má původní cena být (Trello 27. 10. 2026); dřív se
     od ceny lišila jen šedou a vypadala jako druhá cena.

     Odstup je 14 px. Čtyři byly málo, osm taky („spacing pořád není“,
     28. 10. 2026) – škrtací linka běží prostředkem obrazu písma, takže
     se opticky přiblíží k účaří ceny nad sebou a potřebuje víc místa,
     než by u dvou obyčejných řádků stačilo. Měří se mezi cap-oříznutými
     boxy (text-box-trim výš), ne mezi řádky, takže 14 px je 14 px.
     Řádek položky se tím neprodlouží – ceny jsou vlastní sloupec vedle
     fotky, a tu drží na 108 px. */
  margin: 14px 0 0;
  text-decoration: line-through;
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  color: var(--c-gray);
}

/* Krokovač a cena za kus na jednom řádku, cena svisle na středu
   krokovače a o obvyklých 16 px dál („Cart / Desktop / drobnosti").
   Dřív stála cena za kus na spodní hraně cenového sloupce vpravo. */
.kosik-polozka__radek-poctu {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}
.kosik-polozka__za-kus {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  color: var(--c-gray);
  white-space: nowrap;
}

/* ---- Poznámka k objednávce ----
   V návrhu je vidět jen podtržený odkaz, pole se vysune po kliknutí. */
.kosik-poznamka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 40px 0 0;
}

.kosik-poznamka__odkaz {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  /* Bílá místo šedé (Trello „Maxim Desktop Review“, 1. 11. 2026) –
     odkazy „Přidat poznámku“ a „Uplatnit slevový kód“; telefon je měl
     bílé už dřív. Pod myší zůstává bílá a mizí podtržení. */
  color: var(--c-white);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  text-decoration: underline;
  /* Podtržení níž, ať nezasahuje do písmen (22. 10. 2026). */
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
  cursor: pointer;
}
.kosik-poznamka__odkaz:hover { color: var(--c-white); text-decoration-color: transparent; }
/* Po kliknutí se odkaz schovává přes [hidden]; vlastní `display`
   v pravidle výš by ho jinak přebil a odkaz by zůstal nad polem. */
.kosik-poznamka__odkaz[hidden] { display: none; }
.kosik-poznamka[hidden],
.kosik-poznamka__pole[hidden] { display: none; }

.kosik-poznamka__pole {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--kosik-linka);
  background: rgba(255, 255, 255, .05);
  color: var(--c-white);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  resize: vertical;
}
.kosik-poznamka__pole::placeholder { color: var(--c-gray); opacity: 1; }

/* ---- Patka panelu ---- */
.kosik-panel__pata {
  flex: 0 0 auto;
  padding: 16px var(--kosik-odsazeni) var(--kosik-odsazeni);
  border-top: 1px solid var(--kosik-linka);
}

/* ---- Slevový kód ----
   Pole vypadá stejně jako na pokladně, jen v tmavé. Ve výchozím stavu
   je místo něj jen odkaz (.kosik-uplatnit), stejně jako u poznámky. */
.kosik-uplatnit { margin: 0 0 16px; }
/* Uplatněný kód (1. 11. 2026): název kódu vlevo, „Odebrat kód“ vpravo
   jako odkaz – stejný řádek, jaký má jinak odkaz „Uplatnit slevový kód“. */
.kosik-uplatnit--hotovo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
}
.kosik-uplatnit__kod b { font-weight: 700; }
.kosik-uplatnit[hidden] { display: none; }
.kosik-sleva[hidden] { display: none; }
.kosik-sleva {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kosik-pole {
  position: relative;
  display: block;
  box-sizing: border-box;
  flex: 1 1 auto;
  height: var(--co-field-h);
  margin: 0;
  padding: 11px 12px 0;
  border: 1px solid var(--kosik-linka);
  background: rgba(255, 255, 255, .05);
}

.kosik-pole__label {
  display: block;
  font-size: var(--fs-co-label);
  line-height: var(--lh-tight);
  color: var(--c-gray);
}

/* Input se nesmí ořezávat přes text-box-trim – prohlížeč u formulářových
   prvků ořízne i dolní dotažnice. Místo toho má plnohodnotný řádek. */
.kosik-pole__input {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-white);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-co-base);
  line-height: 22px;
  letter-spacing: var(--ls-bold);
}
.kosik-pole__input:focus { outline: none; }

/* Komponenta .btn .btn--compact – stejné tlačítko jako „použít“
   u slevového kódu v pokladně. Rezerva na stín vpravo jako tam. */
.kosik-sleva__tlacitko {
  flex: 0 0 auto;
  margin-right: 4px;
  width: 79px; height: 43px;
  padding: 0;
}

.kosik-sleva__hlaska {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--c-gray);
}
.kosik-sleva__hlaska:empty { display: none; }
.kosik-sleva__hlaska.is-error { color: var(--c-yellow); }

/* ---- Součet ---- */
.kosik-soucet { margin-top: 24px; }

.kosik-soucet__radek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
}
.kosik-soucet__radek + .kosik-soucet__radek { margin-top: 24px; }

.kosik-soucet__radek--usetreno,
.kosik-soucet__radek--kod { color: var(--c-gray); }
.kosik-soucet__radek--usetreno span:last-child { font-size: var(--fs-title); }

/* Verzálky má v návrhu jen první slovo, proto <b> v popisku. */
.kosik-soucet__radek--celkem b { font-weight: inherit; text-transform: uppercase; }
.kosik-soucet__radek--celkem span:last-child {
  font-size: var(--fs-body-lg);
  letter-spacing: normal;
}

/* ---- K pokladně ---- */
.kosik-pokladna { margin: 25px 0 0; }

.kosik-pokladna__odkaz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}


/* ---- Záruky ---- */
.kosik-zaruky {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.kosik-zaruka {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--c-white);
}
.kosik-zaruka img { display: block; width: 32px; height: 32px; }

@media (max-width: 767px) {
  /* Panel má v návrhu okraje 16 px a hlavičku 56 px (ne 20 a 60):
     hlavička, pruh i položky tím začínají na x = 16 a položka je
     358 široká místo 350. */
  .kosik-prostor { --kosik-odsazeni: 16px; }
  .kosik-panel__head { min-height: 56px; }
  .kosik-panel__nadpis { font-size: 26px; }
  .kosik-panel__rolovaci { padding-bottom: 26px; }
  /* Ceny zůstávají i na telefonu ve třetím sloupci vpravo, jak je
     v návrhu (podklady/mobil.pdf, str. 5–8): cena nahoře u názvu,
     „1 ks = …" dole u spodní hrany fotky. Dřív se přesouvaly pod tělo
     položky a slevový kód s tlačítkem POUŽÍT se lámal na dva řádky –
     návrh je má vedle sebe (pole 250, tlačítko 82). */
}

/* ==================================================================
   SNACKBAR „PŘIDÁNO DO KOŠÍKU“
   ------------------------------------------------------------------
   Vzhled i animace podle přílohy karty FRONTEND (snackbar-css-anim.txt
   a návrh): tmavý pruh u pravého dolního rohu, zelené zaškrtnutí a
   verzálkový popisek. Vyjede zespodu, necelé tři vteřiny počká a zajede
   zpátky. Dřív to byl proužek pod hlavičkou s názvem produktu a barevnou
   tečkou – ten je pryč, ajax ale název i barvu posílá dál, takže se dají
   kdykoli vrátit (viz libs/ajax-kosik.php).

   Celý běh drží dvě animace: příjezd hned a odjezd se zpožděním
   příjezd + pauza. Javascript tedy jen nasazuje a po doběhnutí snímá
   třídu is-videt, aby šla animace spustit znovu.
   ================================================================== */
.snackbar {
  --snackbar-dole: 24px;
  /* o kolik se schová pod spodní hranu okna */
  --snackbar-mimo: calc(100% + var(--snackbar-dole) + 16px);

  position: fixed;
  z-index: 130;                 /* nad připnutou lištou i panelem košíku */
  right: 24px;
  bottom: var(--snackbar-dole);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 48px);
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  background: var(--c-black);
  color: var(--c-white);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;

  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--snackbar-mimo));
  pointer-events: none;
}

.snackbar__ikona {
  display: block;
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: var(--c-snackbar-ok);
}
.snackbar__ikona svg { display: block; width: 100%; height: 100%; }

.snackbar.is-videt {
  visibility: visible;
  animation:
    snackbar-prijezd var(--t-snackbar-in) var(--e-snackbar-in) both,
    snackbar-odjezd  var(--t-snackbar-out) var(--e-snackbar-out)
                     calc(var(--t-snackbar-in) + var(--t-snackbar-pauza)) forwards;
}

@keyframes snackbar-prijezd {
  from { opacity: 0; transform: translateY(var(--snackbar-mimo)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes snackbar-odjezd {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(var(--snackbar-mimo)); visibility: hidden; }
}

/* Při omezeném pohybu zůstane jen prolnutí, nic nevyjíždí. */
@media (prefers-reduced-motion: reduce) {
  .snackbar { --snackbar-mimo: 0px; }
}

/* Upozornění na vypnuté cookies (10. 11. 2026) – stejná lišta, jen žlutá,
   delší věta malými písmeny a déle na očích (6 s). */
.snackbar--varovani {
  --t-snackbar-pauza: 6000ms;
  /* Bez cookies se nedá uložit ani souhlas, takže cookie lišta (.gdpr,
     z-index 1000000) je dole pořád – hláška musí být nad ní. */
  z-index: 1000001;
  max-width: min(440px, calc(100vw - 48px));
  padding: 14px 16px;
  background: var(--c-yellow);
  color: var(--c-black);
  border: 1px solid var(--c-black);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

/* ==================================================================
   COOKIE LIŠTA
   ------------------------------------------------------------------
   Struktura i názvy tříd jsou z původního webu (.gdpr, .gdpr-info),
   barvy a písma z redesignu. Lišta je černá dole uprostřed, nastavení
   je bílý panel u pravého okraje – stejně jako na vpresu.cz.
   ================================================================== */
.gdpr {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 1000000;
  display: flex;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  width: min(1100px, calc(100vw - 40px));
  padding: 28px 32px;
  background: rgba(0, 0, 0, .9);
  color: var(--c-white);
  transform: translateX(-50%);
}
.gdpr[hidden] { display: none; }

.gdpr-left { position: relative; flex: 1 1 auto; min-width: 0; }

.gdpr-nadpis {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-bold);
  text-transform: uppercase;
}

.gdpr-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.gdpr-text a { color: inherit; border-bottom:1px solid #fff }

.gdpr-right {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  /* 10 px z návrhu + 4 px na stín tlačítka nad mezerou. */
  gap: 14px;
}

/* Tlačítka lišty jsou komponenta .btn; na černém podkladu se obrací
   barva rámečku i stínu. Zbylo tu jen písmo a rozměr. */
.gdpr { --btn-obrys: var(--c-white); }

.gdpr-button {
  padding: 12px 22px;
  color: var(--c-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-bold);
  white-space: nowrap;
}
.gdpr-button:hover { background: rgba(255, 255, 255, .15); }

/* Hlavní tlačítko je obrácené – bílé s černým textem. */
.gdpr-prijmout {
  background: var(--c-white);
  color: var(--c-black);
}
.gdpr-prijmout:hover { background: var(--c-light-gray); }

/* ---- Křížek ----
   Komponenta .zavrit, jen menší. Odsazený je stejně jako text pod ním,
   aby s ním lícoval – hodnoty musí sedět s paddingem .gdpr-info-prostor. */
.gdpr-info-close {
  --zavrit-plocha: 26px;
  --zavrit-cara: 24px;
  --zavrit-sila: 2px;
  position: absolute;
  top: 28px; right: 32px;
  color: var(--c-black);
}

/* ==================================================================
   NASTAVENÍ COOKIES
   ================================================================== */
/* Nalepené na pravou hranu přes celou výšku – stejně jako panel košíku. */
.gdpr-info {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100000000;
  box-sizing: border-box;
  width: min(500px, 100vw);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-white);
  color: var(--c-black);
  box-shadow: 0 4px 30px rgba(0, 0, 0, .25);
}
.gdpr-info[hidden] { display: none; }

.gdpr-info-prostor { position: relative; padding: 28px 32px 32px; }

.gdpr-info hr {
  height: 1px;
  margin: 20px 0;
  border: 0;
  background: var(--c-table-line);
}

.gdpr-info-uvod-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.gdpr-info-uvod-text p { margin: 0 0 10px; }

.gdpr-info-nadpis-text {
  font-weight: 700;
  letter-spacing: var(--ls-bold);
}

/* ---- Jedna skupina ---- */
.gdpr-info-polozka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--c-table-line);
}

.gdpr-info-click {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}

/* Plus se při rozbalení překlopí na minus – jen otočením svislé čárky. */
.gdpr-info-znak {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.gdpr-info-znak::before,
.gdpr-info-znak::after {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 18px;
  height: 2px;
  background: var(--c-black);
}
.gdpr-info-znak::after { transform: rotate(90deg); transition: transform 200ms; }
.gdpr-info-click[aria-expanded="true"] .gdpr-info-znak::after { transform: rotate(0deg); }

.gdpr-info-cookies {
  font-weight: 700;
  letter-spacing: var(--ls-bold);
}

.gdpr-info-aktivni {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-gray);
  white-space: nowrap;
}

.gdpr-info-text {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.gdpr-info-text[hidden] { display: none; }

/* ---- Přepínač ---- */
.gdpr-info-checkbox { position: relative; }
.gdpr-info-checkbox input {
  position: absolute;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* Flex místo okrajů na puntíku – jinak se svislé odsazení sčítá
   s řádkováním popisku a puntík sedí kousek pod osou. */
.gdpr-info-checkbox label {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 48px;
  height: 26px;
  padding: 0 3px;
  border-radius: 13px;
  background: var(--c-degustace);
  transition: background 200ms;
  cursor: pointer;
}
.gdpr-info-checkbox label::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-white);
  transition: transform 200ms;
}
.gdpr-info-checkbox input:checked + label { background: var(--c-green); }
.gdpr-info-checkbox input:checked + label::after { transform: translateX(22px); }
.gdpr-info-checkbox input:focus-visible + label { outline: 2px solid var(--c-black); outline-offset: 2px; }

/* ---- Tlačítka pod nastavením ----
   Panel je bílý, takže --btn-obrys zůstává černý jako všude jinde;
   mezera 14 px = 10 px z návrhu + 4 px na stín. */
.gdpr-souhlas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-right: 4px;
}
.gdpr-souhlas .gdpr-button {
  flex: 1 1 auto;
  color: var(--c-black);
}
.gdpr-souhlas .gdpr-button:hover { background: var(--c-light-gray); }
.gdpr-souhlas .gdpr-prijmout {
  background: var(--c-black);
  color: var(--c-white);
}
.gdpr-souhlas .gdpr-prijmout:hover { background: var(--c-slightly-grayish); }

@media (max-width: 767px) {
  .gdpr {
    left: 10px;
    right: 10px;
    bottom: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: auto;
    padding: 22px 20px;
    transform: none;
  }
  .gdpr-nadpis { font-size: 24px; }
  .gdpr-right { flex-direction: column; }
  .gdpr-button { width: 100%; }

  .gdpr-info { width: 100vw; }
  .gdpr-info-prostor { padding: 22px 20px 26px; }
  .gdpr-info-close { top: 22px; right: 20px; }
}

/* ==================================================================
   DOČASNĚ SKRYTO
   ------------------------------------------------------------------
   Sekce s recenzemi a odkaz na ni na detailu produktu, hvězdičky
   u názvu produktu i v kartách výpisu a fotogalerie na detailu.
   Až se budou vracet, stačí smazat tenhle blok – značka i skripty
   zůstaly.

   Pozor, tohle není omyl ani zbytek po něčem zrušeném: návrh recenze
   na detailu pořád má. V mobilní Figmě (plátno „mobil", rám
   product-detail-mobile-A) stojí sekce mezi pásem šéfkuchařů
   a „Objevte další chutě" – přesně tam, kde ji detail.php vykresluje
   (#sekce-recenze). Schované jsou jen proto, že k produktům zatím
   nejsou data; design platí a po doplnění recenzí se blok smaže
   a sekce naskočí sama. Ověřeno proti návrhu 30. 10. 2026.
   ================================================================== */
#tab-recenze,
#sekce-recenze,
.phero__rating,
.product .rating { display: none; }

/* Jednotka „ml" – nikdy velkými písmeny, nikdy odtržená od čísla.
   Vkládá ji libs/jednotky.php (server) a vp_jednotky() v js/main.js
   (obsah měněný za běhu): <span class="u-ml">250 <span class="u-ml__j">ml</span></span>. */
.u-ml { white-space: nowrap; }
.u-ml__j { text-transform: none; }

/* ---- Gradient z nového editoru produktu (26. 10. 2026) ----
   Devět zarážek z generátoru (libs/gradient.php, admin/produkt.php) je
   spočítaných pro míchání v sRGB – specifikace gradientů chce
   `linear-gradient(180deg in srgb, …)`. Výchozí míchání přechodu je
   sRGB, takže stačí deklarace bez `in oklch`. Škály z číselníku barvy
   (bez data-prechod) se dál míchají v oklch podle pravidel výš.
   Barvu ducha k tomu vzorkuje js/hero-napis.js ve stejném prostoru. */
@media (min-width: 768px) {
  .phero[data-prechod="srgb"] { background: linear-gradient(180deg, var(--phero-stupnice)); }
}
@media (max-width: 767px) {
  .phero[data-prechod="srgb"]::before,
  .phero[data-prechod="srgb"] .nahledy__polozka--hlavni .nahledy__odkaz {
    background: linear-gradient(180deg, var(--phero-stupnice));
  }
}
.sada-karta[data-prechod="srgb"].is-vybrana,
.sada-karta[data-prechod="srgb"]:hover { background: linear-gradient(180deg, var(--sada-stupnice)); }

/* ==========================================================================
   Trello „Maxim Desktop Review“ – zbývající body (1. 11. 2026)
   ========================================================================== */

/* LP / Hero – bez zakulacení ve spoji levé a pravé půlky. Kulaté jsou jen
   vnější rohy (dělá je .hero__viewport s overflow: hidden), fotka uvnitř
   vlastní zaoblení nemá. */
.hero__media { border-radius: 0; }

/* Checkout / rekapitulace – střed kolečka s počtem kusů leží přesně
   v pravém horním rohu náhledu, ne celé kolečko uvnitř něj. */
.checkout-summary__qty { transform: translate(50%, -50%); }

/* LP / banner vlastní sady – na výšku produktové karty vedle (už ne
   pevný poměr 1124 × 552 u horní hrany) a obsah na svislý střed.
   Scéna s krabicí a lahvičkami si drží rám s poměrem z návrhu, takže se
   pozice v procentech nemění – jen se celý rám posadí doprostřed. */
/* Responzivita (9. 11. 2026): platí už od 768 px. Do té doby od 1024,
   pod tím měl box pevný poměr 1124 × 552 a text s tlačítkem z něj na
   tabletu vytekly dolů a ořízly se; na 1024–1279 se „Chci svoji sadu“
   lámalo na dva řádky.
   - Text už není absolutně, stojí v toku boxu (flex, svislý střed).
     Box je tak vždycky aspoň tak vysoký jako text + 32 px nahoře
     i dole; kdyby byl vyšší než karta vedle, natáhne se řádek mřížky
     a nic se neořízne.
   - Sloupec textu má aspoň --box-text (220 px), aby se tlačítko vešlo
     na jeden řádek a perex se nedrobil po dvou slovech.
   - Když je box tak úzký, že by text dosáhl na krabici, scéna se
     zmenší a přisadí doprava, krabice pak začíná 24 px za textem.
     Šířka scény s: levá hrana krabice W − s + 0,40214 s má být
     0,05694 W + text + 24, tedy s = 1,577 W − 1,6722 (text + 24).
     Na širokém boxu vyjde přes 100 % a platí min() – scéna je celá
     jako dosud. Lahvičky vpravo přetečou přes hranu, jak mají. */
@media (min-width: 768px) {
  .products--sady .box {
    --box-text: 220px;
    display: flex;
    align-items: center;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 0;
  }
  .products--sady .box__content {
    position: relative;   /* left 5,694 % z obecného pravidla posouvá dál */
    top: auto;
    flex: 0 0 auto;
    width: max(24%, var(--box-text));
    margin-block: 32px;
  }
  .products--sady .box .btn--compact { white-space: nowrap; }
  .products--sady .box__scene {
    inset: auto 0 auto auto;
    top: 50%;
    width: min(100%, calc(157.7% - 1.6722 * (var(--box-text) + 24px)));
    aspect-ratio: 1124 / 552;
    transform: translateY(-50%);
  }
}

/* Telefon v pokladně – hláška pod polem při inline kontrole. */
.checkout-field-chyba { margin: 6px 0 0; font-size: var(--fs-co-sm, 13px); color: #c22; }
.checkout-field-chyba[hidden] { display: none; }
.checkout-predvolba.is-prazdna { color: var(--c-ink-faint, #999); }

/* Úvodní stránka – tlačítko „Všechny sady“ pod sekcí sad (Trello #66, 8. 11. 2026).
   Stejné jako „Všechny recepty“ (.recipes__cta). */
.products__cta { display: flex; justify-content: center; margin-top: 48px; }

/* Pokladna – dva odmítací checkboxy pod e-mailem (Trello #70, 8. 11. 2026):
   druhý blíž k prvnímu, ať drží pohromadě. */
.checkout-check + .checkout-check { margin-top: 12px; }

/* =========================================================================
   HP slider: delší nadpis nesmí useknout perex (8. 11. 2026)
   -------------------------------------------------------------------------
   Výřez měl pevný poměr 1790 : 600 a slidy v něm ležely přes
   position: absolute. Když se nadpis zalomil na tři řádky, perex se
   zmáčkl do zbylého místa a overflow: hidden ho usekl uprostřed řádku
   (na 1280 px zbylo z perexu 0,2 řádku, na 1920 px 1,3).

   Poměr z návrhu je teď jen minimální výška: drží ji prázdný
   ::before v téže buňce mřížky jako pás slidů. Když se obsah některého
   slidu nevejde, výřez se o to prodlouží. Slidy leží na sobě v jedné
   buňce (jako na úzkém okně pod 900 px), takže výška se řídí nejvyšším
   z nich a při přepnutí neposkočí. Fotka do výšky nemluví – je
   absolutně přes celou svou polovinu, jinak by výřez natáhla podle
   svého rozměru.
   ========================================================================= */
@media (min-width: 900px) {
  .hero__viewport {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: auto;
    max-height: none;
  }
  .hero__viewport::before {
    content: "";
    grid-area: 1 / 1;
    aspect-ratio: 1790 / 600;
    max-height: 600px;
    pointer-events: none;
  }
  .hero__track { grid-area: 1 / 1; height: auto; min-width: 0; }
  .hero__slide { height: auto; }
  .hero__media { position: relative; }
  .hero__media img { position: absolute; inset: 0; }

  .hero__viewport[data-rezim="prolnuti"] .hero__track { display: grid; }
  .hero__viewport[data-rezim="prolnuti"] .hero__slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
  }
}

/* HP Slider – barva ostatního (nezvýrazněného) textu nadpisu z administrace
   (slider_new.BARVA_TEXT, 8. 11. 2026). Bez ní zůstává barva z webu. */
.hero__title { color: var(--slide-text, inherit); }