/* =========================================================================
   MOBIL PODLE FIGMY (29. 10. 2026)
   Doladění telefonní verze (do 767 px) podle mobilního návrhu ve Figmě
   (soubor 5KXnvP8OlK9ZpaPI1P22c5, plátno 2041:20936) a auditu
   claude/figma-audit-mobil-2026-10-22.md. Načítá se v libs/head.php
   hned za style.css, takže přebíjí jeho mobilní pravidla stejnou
   specifičností. Desktopu se nic z toho netýká – kromě dvou pomocných
   tříd hned dole, které schovávají text určený jen pro jednu verzi.
   ========================================================================= */

/* Text jen pro telefon / jen pro desktop (např. jiný nadpis sekce). */
.vp-mobil { display: none; }
/* Dlaždice olejů hotové sady jsou jen v mobilním návrhu. */
.sada--hotova { display: none; }

/* Pokladna: nadpis stránky a sbalení souhrnu jsou jen na telefonu.
   Děkovačka: řádek © v patičce má jen mobilní návrh. */
.checkout-nadpis,
.checkout-summary__prepinac,
.thanks__copy { display: none; }

/* Pokladna: předvolba telefonu v pravé části pole (všude). Podle
   mobilní Figmy (pokladna-mobile, rámeček „chevron-down“ 65 px):
   šedé pole #EDEDED, vlajka 24 × 24 a šipka dolů (Trello „Maxim
   Desktop Review“, 2. 11. 2026 – „místo CZ a SK dát vlajky“). Text
   vybrané volby je v zavřeném selectu průhledný a místo něj je vidět
   vlajka (assets/icons/vlajky/). Prohlížeč bez :has() ukáže „+420“.
   Šipka má stejný tvar jako u výběru země (.checkout-field--select). */
.checkout-field--telefon { padding-right: 73px; }
.checkout-predvolba {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 65px;
  padding: 0 24px 0 8px;
  border: 0;
  border-left: 1px solid var(--c-degustace);
  background: #ededed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M0 0h1.44L6 5.32 10.56 0H12L6 7z' fill='%231a1a1a'/%3E%3C/svg%3E") no-repeat right 9px center / 12px 7px;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.checkout-predvolba option { color: var(--c-ink); background: var(--c-white); }
.checkout-predvolba:has(option[value="+420"]:checked),
.checkout-predvolba:has(option[value="+421"]:checked) {
  color: transparent;
  background-repeat: no-repeat, no-repeat;
  background-position: left 6px center, right 9px center;
  background-size: 24px 24px, 12px 7px;
}
.checkout-predvolba:has(option[value="+420"]:checked) { background-image: url("../assets/icons/vlajky/cz.svg"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M0 0h1.44L6 5.32 10.56 0H12L6 7z' fill='%231a1a1a'/%3E%3C/svg%3E"); }
.checkout-predvolba:has(option[value="+421"]:checked) { background-image: url("../assets/icons/vlajky/sk.svg"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M0 0h1.44L6 5.32 10.56 0H12L6 7z' fill='%231a1a1a'/%3E%3C/svg%3E"); }
.checkout-legal__copy {
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
  color: var(--c-ink-muted);
}

@media (max-width: 767px) {
  .vp-mobil { display: inline; }
  .vp-desktop { display: none; }

  /* ---------------------------------------------------------------
     VŠUDE
     --------------------------------------------------------------- */

  /* Hlavička po zarolování: v návrhu zůstane jen šedá lišta
     kategorií (43 px), bílý pruh s nápisem odjede nahoru. Hlavička
     je fixní a tělo má odsazení pořád stejné, takže nic neposkočí. */
  :root { --header-pripnuta-h: 43px; }
  .header { transition: transform var(--t-lista, .32s) var(--e-lista, ease); }
  .header.is-pripnuta { height: var(--header-h); transform: translateY(-61px); }
  .header.is-pripnuta.is-roluje { animation: none; }
  @media (prefers-reduced-motion: reduce) { .header { transition: none; } }

  /* Šipky sliderů: v návrhu obě černé a bez teček (tečky má jen
     hero). Neaktivní šipka se jen zneprůhlední o kousek. */
  .slider-nav__arrow[disabled] { opacity: 1; }
  .slider-nav:not(.hero__nav) .slider-nav__dots { display: none; }
  .slider-nav:not(.hero__nav) { gap: 16px; }

  /* Benefity: ikony ~20 px, text 14 px v normálním řezu. */
  .benefit { gap: 10px; }
  .benefit__icon { width: 22px; height: 22px; }
  .benefit__text { font-size: 14px; line-height: 20px; font-weight: 400; }
  .benefits__grid,
  .page-detail .benefits__grid { row-gap: 24px; column-gap: 16px; }
  .page-detail .benefit__text { font-size: 14px; line-height: 20px; }
  /* Na detailu jsou ikony výhod v návrhu o něco větší (32 kresby). */
  .page-detail .benefit__icon { width: 28px; height: 28px; }

  /* Karta produktu: cena menším písmem („320 Kč“ ~14 px), košík
     menší a vše v jednom řádku. */
  .product__price { font-size: 14px; }
  .product__price--sale { padding: 3px 4px; }
  .product__price-old { font-size: 12px; }
  /* Karta má v návrhu rámeček kolem celé plochy včetně fotky, ne jen
     kolem spodního bloku s textem. */
  .product { border: 1px solid var(--c-product-line); }
  .product__info { border: 0; gap: 8px; }
  .product__cart { width: 32px; height: 32px; }
  .product__cart img { width: 22px; height: 22px; }

  /* ---------------------------------------------------------------
     MENU
     --------------------------------------------------------------- */
  /* Bez aktivní kategorie (úvod, blog…) svítí jako v návrhu „VŠE“
     a ostatní kategorie jsou šedé. */
  .menu-vysouvaci-nav.bez-aktivni > .menu-vysouvaci-polozka:not(:first-child) .menu-vysouvaci-odkaz { color: var(--c-gray); }

  /* ---------------------------------------------------------------
     ÚVODNÍ STRÁNKA
     --------------------------------------------------------------- */

  /* Tlačítko „VÍCE“ má v návrhu nadpisové písmo ~30 px. „CHCI SVOJI
     SADU“ ho mělo taky, od 9. 11. 2026 je to secondary button
     (viz .products--sady .box .btn--compact ve style.css). */
  .hero__cta {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: var(--ls-h3);
  }

  /* Dárkové sady: obrazová část karty je v návrhu nižší (350 × 210). */
  .products--sady .product__media { aspect-ratio: 350 / 210; }

  /* Sestavte si vlastní sadu: menší obrázek, perex normálním řezem. */
  /* Krabice vlevo, rozmazané lahvičky vykukují zprava za ní. */
  .products--sady .box__scene { position: relative; margin: 24px 0; }
  .products--sady .box__media { position: relative; inset: auto; z-index: 1; width: 64%; margin: 0; padding: 0; }
  .products--sady .box__bottles {
    position: absolute; z-index: 0;
    inset: 14% 0 auto auto;
    width: 46%; margin: 0; padding: 0;
    filter: blur(2px);
  }
  .products--sady .box__perex { font-weight: 400; font-size: 15px; line-height: 22px; }

  /* Jak vznikají naše oleje: nahoře velká kapka, nadpis až na žluté,
     v kartě číslo nad textem a fotka přes celou šířku karty. */
  .process__drip { height: 56vw; }
  .process__drip::after { display: none; }
  .process__title { padding-top: calc(56vw + 24px); margin-bottom: 24px; }
  .step { gap: 16px; padding: 12px; background: var(--c-white); }
  .step__head { display: flex; flex-direction: column; gap: 10px; }
  .step__number { font-size: 35px; line-height: 1; }
  .step .video-card { aspect-ratio: 264 / 350; max-height: none; }
  .process__cta { display: none; }
  .process__nav { padding-bottom: 32px; }

  /* Křížek v menu má v návrhu ikonu 24 × 24 při okraji 16 px, tedy střed
     na (28, 28). Dotyková plocha 44 px kolem něj zůstává, jen se posune. */
  .menu-zavrit { left: 6px; top: 6px; }

  /* Hero: pod fotkou je v návrhu 40 px, než začne titulek (Hero / Text
     má horní odsazení 40). Web měl 28. */
  .hero__panel { padding-top: 40px; }

  /* Hotová sada: řada lahviček v heru je v návrhu 294 × 224, na webu
     měla desktopových 340 na výšku, a tedy 444 na šířku. Šířku řady drží
     výška (lahvička je 24,5 % své výšky široká, mezera 1/50 výšky), takže
     stačí přepsat jedinou proměnnou: 294 / 1,305 = 224. Řada je ve scéně
     na střed, takže přečuhuje symetricky a začíná na x = 48 jako v návrhu. */
  .phero__media--sada { --sada-vyska: 224px; }
  /* Řada je širší než scéna (294 proti 179), a na telefonu se jí obal
     ořízne na šířku scény – bez tohohle by přečuhovala jen doprava
     a začínala na x = 105 místo návrhových 48. */
  .phero__sada { justify-content: center; }

  /* Šéfkuchaři: fotka skoro dvakrát vyšší, jméno velké na dvou
     řádcích s funkcí vedle, karta na šedé (štítek VIDEO zůstává, 9. 11. 2026). */
  .chef__photo img { aspect-ratio: 290 / 350; }
  .chef__slide { background: var(--c-light-gray); }
  .chef__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
  .chef__name {
    max-width: 7ch;
    font-size: 40px;      /* Mobil/H3 – v návrhu měří dva řádky 69 px */
    line-height: 1;
  }
  .chef__role { font-size: 13px; line-height: 17px; }

  /* Mezi nadpisem a pásem je v návrhu 16 px (na desktopu 64). */
  .chef__stage { margin-top: 16px; }

  /* Recenze: karty na šedém podkladu, OVĚŘENO vedle hvězdiček,
     menší hvězdičky, datum pod textem. */
  .review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 8px;
    padding: 16px;
    border-top: 0;
    background: var(--c-light-gray);
  }
  .review__head,
  .review__body,
  .review__row { display: contents; }
  .review__author { grid-column: 1 / -1; order: 1; }
  .review .rating { order: 2; }
  .review .rating { gap: 3px; }
  .review .rating img { width: 18px; height: 18px; }
  .review__verified { order: 3; justify-self: end; font-size: 12px; padding: 2px 6px; }
  .review__verified-icon { width: 18px; height: 18px; -webkit-mask-size: 18px; mask-size: 18px; }
  .review__text { order: 4; grid-column: 1 / -1; }
  .review__date { order: 5; grid-column: 1 / -1; font-size: 12px; }

  /* Štítky filtru jsou na telefonu menší: návrh má pilulku 22 px vysokou,
     písmo 14 px a odsazení 6 px po stranách (desktop 33 / 16 / 8).
     Svislé odsazení se dál počítá z výšky verzálek, aby text seděl
     opticky na střed; čtyři pixely v odečtu jsou dva rámečky. */
  .pill {
    padding: calc((22px - 4px - 1cap) / 2) 6px;
    font-size: 14px;
  }

  /* Recepty: nadpis receptu ~30 px, tlačítko „Všechny recepty“
     návrh nemá – recepty jsou v menu. */
  .recipe__title { font-size: 40px; line-height: 1; letter-spacing: 0.6px; }
  /* Karta receptu: odsazení 16 px nahoře i dole a fotka 290 × 250,
     ne čtverec – v návrhu je na šířku. */
  .recipe { padding-block: 16px; }
  /* Poměr drží rámeček, ne obrázek: mezi .recipe__media a <img> je ještě
     odkaz, takže samotný aspect-ratio na obrázku se neprosadí. */
  .recipe__media { aspect-ratio: 290 / 250; overflow: hidden; }
  .recipe__media > a { display: block; width: 100%; height: 100%; }
  .recipe__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .stranka-uvod .recipes__cta { display: none; }
  /* ---------------------------------------------------------------
     VÝPIS – jen texty v šabloně (vypis.php)
     DETAIL PRODUKTU
     --------------------------------------------------------------- */
  /* Složení: řádky tabulky 30 px. */
  .nutrition__db td { height: 30px; }

  /* Žlutý box: ikony ~24 px, nadpis a text těsně pod sebou. */
  .notes { gap: 16px; padding: 20px 16px; }
  .note { gap: 16px; }
  .note__icon { width: 24px; height: 24px; }
  .note__title { margin-top: 0; font-size: 13px; }
  .note__text { margin-top: 8px; font-size: 15px; line-height: 21px; }
  /* ---------------------------------------------------------------
     HOTOVÁ SADA
     Místo „Proč…?“ a rozklikávacího Složení dlaždice „5 OLEJŮ V SADĚ“
     (detail.php). Žlutý box s alergeny a skladováním zůstává.
     --------------------------------------------------------------- */
  .sada--hotova { display: block; margin-top: 40px; }
  .sada-hotova__nadpis { margin-bottom: 24px; }
  .sada--hotova .sada-karta {
    cursor: default;
    background: linear-gradient(180deg, var(--sada-stupnice));
    background: linear-gradient(180deg in oklch, var(--sada-stupnice));
  }
  .sada--hotova .sada-karta[data-prechod="srgb"] { background: linear-gradient(180deg, var(--sada-stupnice)); }
  .sada-karta__nazev { text-transform: uppercase; }
  .sada-karta__velikost { text-transform: none; }
  .why.je-hotova-sada { display: none; }
  .nutrition.je-hotova-sada .section-title,
  .nutrition.je-hotova-sada .sada-slozeni { display: none; }
  /* ---------------------------------------------------------------
     VLASTNÍ SADA (body.je-sada-miru, detail.php)
     --------------------------------------------------------------- */
  /* Úvod: jen 320px blok s nadpisem, odznaky, perexem a cenou – bez
     fotky krabice, množství a tlačítka Vybrat (výběr je hned pod ním). */
  .phero--sada-miru { min-height: 0; }
  .phero--sada-miru::before { height: auto; bottom: 0; }
  /* Mřížka tu měla řádky v `fr`, a protože fotka krabice je schovaná,
     zbylé místo se rozlilo do prázdna – nad nadpisem bylo 113 px místo
     návrhových 48 a pod cenou dalších 24 navíc. Sloupec si velikosti
     bere z obsahu. V návrhu je nad nadpisem 48 px, mezi bloky 20
     a pod cenou 32. */
  .phero--sada-miru .phero__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 48px;
    padding-bottom: 32px;
  }
  /* Odstupy nese `gap`, ne okraje potomků: `.phero__info` má z desktopu
     margin-top kolem 88 px, který v mřížce nebyl vidět, ale ve sloupci
     by nadpis odsunul o dalších 89 px dolů. */
  .phero--sada-miru .phero__info,
  .phero--sada-miru .buy { margin-top: 0; }
  .phero--sada-miru .phero__ghost,
  .phero--sada-miru .phero__media,
  .phero--sada-miru .buy .qty,
  .phero--sada-miru .buy__submit { display: none; }

  body.je-sada-miru .sada { margin-top: 24px; }

  /* Dlaždice výběru má v mobilním návrhu 169 × 326: odsazení 16 px nahoře
     a dole, 12 px po stranách, mezi prvky 12 px, pole s lahvičkou
     145 × 160 a krokovač ze tří čtverců 48 × 48. Bez těchhle hodnot
     platily základní (pole 217/268) a dlaždice měřila 387.
     Desktop od 1024 px má vlastní rozměry ve style.css. */
  .sada-karta { gap: 12px; padding: 16px 12px; }
  .sada-karta__media { aspect-ratio: 145 / 160; }
  /* Lahvička je 490 × 2000, pole 145 × 160: 24,8 % šířky dá přesně
     návrhových 36 × 147. S původními 28,1 % by z kratšího pole vyčuhovala. */
  .sada-karta__media .sada-karta__lahev { bottom: 3.1%; width: 24.8%; }
  .sada-karta__nazev {
    margin-top: 0;
    padding-inline: 0;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.32px;
  }
  .sada-karta__vic { margin: 0; padding-inline: 0; font-size: 14px; }

  /* Dlaždice: krokovač ze tří čtverců 48 px (dohromady 144 jako v návrhu). */
  .sada-karta__qty .qty__btn { flex: 0 0 48px; width: 48px; height: 48px; }
  .sada-karta__qty .qty__input { width: 48px; height: 48px; font-size: 16px; }

  /* Spodní lišta: „VAŠE SADA · 2 / 4“ a cena na jednom řádku. Věta
     o zbývajících lahvičkách zůstává jen pro odečítače (role=status). */
  .sada-panel__title {
    grid-area: 1 / 1 / 2 / 2; align-self: center;
    font-family: var(--font-body); font-weight: 700; font-size: 18px;
    letter-spacing: var(--ls-bold); text-transform: uppercase;
  }
  .sada-panel__cena { grid-area: 1 / 2 / 2 / 3; align-self: center; font-size: 20px; }
  .sada-panel__stav {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .sada-panel__sloty { grid-area: 2 / 1 / 3 / -1; }
  .sada-panel__koupit { grid-area: 3 / 1 / 4 / -1; }

  /* Okno oleje: nahoře „OLEJ DO SADY“ s křížkem a název, pod nimi
     vodorovná galerie, text, a žluté „PŘIDAT DO SADY“. */
  .sada-okno__panel { display: flex; flex-direction: column; overflow-y: auto; }
  .sada-okno__text { display: contents; }
  .sada-okno__nadtitulek { order: 1; padding: 22px 64px 0 20px; font-size: 14px; }
  .sada-okno__nazev { order: 2; margin: 0; padding: 12px 20px 16px; font-size: 36px; line-height: 1; }
  .sada-okno__foto { order: 3; flex: 0 0 auto; height: 165px; margin-left: 20px; background: none; }
  .sada-okno__snimek { background: var(--c-produkt-pozadi); }
  .sada-okno__popis { order: 4; margin: 0; padding: 16px 20px 0; }
  .sada-okno__paticka { order: 5; padding: 16px 20px 20px; }
  .sada-okno__krizek { top: 12px; right: 12px; }
  .sada-okno__pridat:not(:disabled) { background: var(--c-yellow); }
  .sada-okno__odebrat {
    display: block;
    margin: 16px auto 0;
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .sada-okno__odebrat[hidden] { display: none; }

  /* Pod konfigurátorem v návrhu hned následuje patička. */
  body.je-sada-miru .detail-blok,
  body.je-sada-miru #obsah > .products { display: none; }
  /* ---------------------------------------------------------------
     KOŠÍK
     Slevový kód už se schovává za „Uplatnit slevový kód“ a tlačítko
     zůstává „K POKLADNĚ“ (v návrhu „DO KOŠÍKU“ – chyba návrhu).
     --------------------------------------------------------------- */
  .kosik-soucet__radek--celkem { align-items: baseline; }
  /* ---------------------------------------------------------------
     POKLADNA
     Tlačítko zůstává „ZAPLATIT“: návrh má „DOKONČIT OBJEDNÁVKU“, ale
     tlačítko musí jasně říkat, že objednávka zavazuje k platbě
     (§ 1826a obč. zákoníku), a to „Dokončit objednávku“ nesplní.
     --------------------------------------------------------------- */
  .checkout-nadpis {
    display: block;
    order: -2;
    margin: 0 0 20px;
    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;
  }

  /* Souhrn jde sbalit – rozbalený ukazuje šipku nahoru. */
  .checkout-summary__text { display: none; }
  .checkout-summary__prepinac {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .checkout-summary__prepinac .sekce__sipka {
    width: 14px; height: 7px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: rotate(180deg);
    transition: transform var(--t-fast);
  }
  .checkout-summary__prepinac[aria-expanded="false"] .sekce__sipka { transform: none; }
  .checkout-summary.is-sbaleno .js-souhrn-seznam,
  .checkout-summary.is-sbaleno .checkout-suggest { display: none; }

  /* ---- Souhrn na děkovací stránce ----
     V mobilním návrhu je cena třetím řádkem textu vedle miniatury – pod
     velikostí, ne vpravo u kraje – a počet kusů je text za objemem místo
     kolečka nad miniaturou. Na desktopu to návrh má po staru, proto je to
     jen tady.

     Mřížka místo flexu: miniatura drží obě řádky levého sloupce a cena si
     tím sedne přesně pod název, ať je miniatura široká jakkoli (na telefonu
     je 72 px, na desktopu 80 – odsazení marginem by se muselo hlídat). */
  .thanks__summary .checkout-summary__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
  }
  .thanks__summary .checkout-summary__thumb { grid-row: span 2; }
  .thanks__summary .checkout-summary__qty { display: none; }
  .thanks__summary .checkout-summary__kusu { display: inline; }
  .thanks__summary .checkout-summary__volume--kusy { margin-top: 8px; }
  .thanks__summary .checkout-summary__price {
    grid-column: 2;
    margin-top: 8px;
  }
  /* Sbalený souhrn nechává vidět součty – stejně jako v pokladně. */
  .thanks__summary.is-sbaleno .checkout-summary__list { display: none; }

  /* „Mohlo by se vám líbit“: malý nadpis a žluté čtvercové „+“. */
  .checkout-suggest__title { font-size: 16px; }
  .checkout-suggest__list { margin-top: 12px; }
  .checkout-suggest__add {
    position: relative;
    flex: 0 0 40px;
    width: 40px; height: 40px;
    padding: 0;
    background: var(--c-yellow);
    font-size: 0;
    display: grid;
    place-items: center;
  }
  .checkout-suggest__add::before {
    content: "+";
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 28px;
    line-height: 40px;
    height: 40px;
  }

  /* Slevový kód: pole a POUŽÍT vedle sebe, tlačítko žluté. */
  .checkout-discount { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
  .checkout-discount .checkout-field { flex: 1 1 auto; min-width: 0; }
  .checkout-discount__submit { flex: 0 0 auto; width: auto; height: auto; padding: 0 16px; background: var(--c-yellow); }

  /* Pořadí sekcí: Fakturační adresa → Doprava → Platba. */
  .checkout__form { display: flex; flex-direction: column; }
  .checkout-section--contact  { order: 1; }
  .checkout-section--delivery { order: 2; }
  .checkout-section--billing  { order: 3; margin-top: 48px; }
  .checkout-section--shipping { order: 4; }
  .checkout-section--payment  { order: 5; }
  .checkout__form > :not(.checkout-section) { order: 6; }
  /* ---------------------------------------------------------------
     RECEPTY (výpis) – počet v nadpisu, hledání i sbalené tagy už web
     má; v návrhu stojí popisek nad polem a pole jde přes celou šířku.
     --------------------------------------------------------------- */
  .vypis-hledani { flex-direction: column; align-items: stretch; gap: 8px; }
  /* Oddělovač mezi recepty je v návrhu tenký šedý. */
  .page-recipes .blog-article { border-bottom: 1px solid var(--c-degustace); }

  /* ---------------------------------------------------------------
     KOŠÍK – rozměry z mobilního návrhu (30. 10. 2026)
     Pruhy s oznámením jsou na telefonu poloviční proti desktopu:
     v návrhu 358 × 32 s ikonou 24 × 24 a čtyřpixelovým odsazením
     (desktopových 8/12 a písmo 16 je ze zadání v Trellu, to platí
     jen pro velké okno). Text má v návrhu verzálky 10 px, tedy
     písmo 14.

     Fotka položky je 80 × 100 místo 86,4 × 108 a mezi řádky je
     24 px: řádky v návrhu začínají po 124 px a obsah měří 100.
     --------------------------------------------------------------- */
  /* Pruh s dopravou zdarma: v návrhu je ikona 24 px na x = 24 a text
     hned za ní na x = 56, tedy mezera 8 px (ne 16). */
  /* Řádek je v návrhu 32 px vysoký, ikona 24 px začíná 8 px od kraje
     a text hned 8 px za ní – tedy odsazení 4 px svisle a 8 vodorovně. */
  .kosik-pruh { gap: 8px; padding: 4px 8px; font-size: 14px; }
  .kosik-pruh__ikona img { width: 24px; height: 24px; }
  .kosik-polozka { --kosik-foto: 80px; }
  .kosik-polozka + .kosik-polozka { margin-top: 24px; }

  /* ---------------------------------------------------------------
     TLAČÍTKA – „Mobil / Button" je v návrhu všude 350 × 56
     Web měl 58 v heru, 61 u odkazů na Heuréku a recepty, 64 v
     pokladně a 72 na děkovačce. Šířka 346 u celošířkových tlačítek
     zůstává – ty 4 px si drží stín, aby nedosedl na hranu.
     Svislé odsazení se nuluje, jinak by text z .btn--display
     (11,5 + 14,5) ze 56 px vytekl.
     --------------------------------------------------------------- */
  .reviews__cta-btn,
  .recipes__cta-btn,
  .checkout-pay,
  .thanks__cta-btn,
  .chyba__odkazy .btn--display,
  .kosik-pokladna__odkaz,
  .sada-panel__koupit,
  .sada-okno__pridat { height: 56px; padding-block: 0; }

  /* ---------------------------------------------------------------
     DĚKOVAČKA – blok se stavem platby (30. 10. 2026)
     Nad blokem „✓ Zaplaceno kartou" v návrhu žádná čára není; dělicí
     linka přijde až pod ním, před souhrnem objednávky – tu kreslí
     .thanks__block, takže stačí zrušit tu horní. Odměřeno z exportu
     mobilního rámu: jediná vodorovná linka v okolí je na y 417, tedy
     24 px pod blokem, žádná nad ním.

     Mezera od věty s potvrzovacím e-mailem je v návrhu 44 px k fajfce
     (24 ke hraně bloku + 20 jeho vnitřního odsazení); tady drží celou
     mezeru margin, protože blok sám odsazení nemá.
     --------------------------------------------------------------- */
  .thanks__payment { margin-top: 40px; padding-top: 0; border-top: 0; }

  /* Úvod děkovačky je na telefonu sražený k sobě (zadání 30. 10. 2026):
     nadpis 56 px a mezi číslem objednávky, nadpisem, větou „Objednávku
     jsme přijali" a potvrzovacím e-mailem jsou 4 px. Popis pod stavem
     platby sedí rovnou pod nadpisem stavu. Desktop zůstává na 96 px
     a mezerách 12/16/16/8. */
  .thanks__title { margin-top: 4px; font-size: 56px; }
  .thanks__lead { margin-top: 4px; }
  .thanks__main > .thanks__note { margin-top: 4px; }
  .thanks__payment-text { margin-top: 0; }

  /* ---------------------------------------------------------------
     DĚKOVAČKA – pořadí bloků podle návrhu (30. 10. 2026)
     Návrh má: číslo a nadpis → stav platby → souhrn objednávky →
     doručení a fakturace → pás receptů → „Potřebujete s něčím
     pomoct?" → ZPĚT DO OBCHODU → právní odkazy.

     Web měl souhrn úplně nahoře (ještě nad „Děkujeme!") a pás receptů
     naopak až za právními odkazy, tedy na konci stránky.

     Aby šlo pořadí přeskládat, musí být všechny bloky sourozenci:
     .thanks__inner i .thanks__main proto na telefonu mizí přes
     display: contents a kontejnerem se stává samo <main class="thanks">.
     Selektory se tím nemění (display: contents přepisuje jen boxy, ne
     strom), takže se pořád dá mířit přes `.thanks__main > …` a trefit
     jen bloky nejvyšší úrovně – ne třeba .thanks__note uvnitř bloku
     s kontaktem.

     Vnitřní odsazení, které dřív držel .thanks__inner, si nesou bloky
     samy, a to okrajem, ne výplní: dělicí linky tak zůstávají odsazené
     od kraje stejně jako dřív.
     --------------------------------------------------------------- */
  .thanks { display: flex; flex-direction: column; }
  .thanks__inner,
  .thanks__main { display: contents; }

  .thanks__main > .thanks__number,
  .thanks__main > .thanks__title,
  .thanks__main > .thanks__lead,
  .thanks__main > .thanks__note,
  .thanks__main > .thanks__payment,
  .thanks__main > .thanks__heureka,
  .thanks__inner > .thanks__summary,
  .thanks__main > .thanks__block,
  .thanks__main > .thanks__cta,
  .thanks__main > .thanks__foot { margin-inline: var(--page-gutter); }

  /* Odsazení shora, které měl .thanks__inner. */
  .thanks__main > .thanks__number { margin-top: 42px; }

  /* Souhrn má v návrhu nad sebou dělicí linku, stejnou jako ostatní
     bloky – na desktopu je to sloupec vedle, takže ji tam nemá. */
  .thanks__inner > .thanks__summary {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--c-field-line);
  }

  .thanks__main > .thanks__number  { order: 1; }
  .thanks__main > .thanks__title   { order: 2; }
  .thanks__main > .thanks__lead    { order: 3; }
  .thanks__main > .thanks__note    { order: 4; }
  .thanks__main > .thanks__payment { order: 5; }
  /* Prosba o hodnocení hned pod platbou (Trello #96, 9. 11. 2026). */
  .thanks__main > .thanks__heureka { order: 5; margin-top: 24px; padding: 20px; }
  .thanks__inner > .thanks__summary { order: 6; }
  .thanks__main > .thanks__block   { order: 7; }
  /* ZPĚT DO OBCHODU hned pod údaji objednávky a pod ním „Potřebujete
     s něčím pomoct?“, obojí nad pásem receptů (zadání 9. 11. 2026 –
     dřív byly oba bloky až za recepty). */
  .thanks__main > .thanks__cta     { order: 8; }
  .thanks__main > .thanks__block--pomoc { order: 9; }
  /* Patička se na telefonu rozpadne (display: contents): právní odkazy
     jdou hned pod „Potřebujete s něčím pomoct?“, © zůstává na konci
     stránky pod recepty (zadání 9. 11. 2026). */
  .thanks__main > .thanks__foot    { display: contents; }
  .thanks__foot > .thanks__legal   { order: 10; margin: 32px var(--page-gutter) 0; }
  .thanks > .recipes               { order: 11; }
  .thanks__foot > .thanks__copy    { order: 12; margin-inline: var(--page-gutter); }

  /* =================================================================
     ČTVRTÉ ČTENÍ – 1 : 1 PROTI RENDERŮM Z FIGMY (30. 10. 2026)
     Hodnoty jsou z `get_design_context` jednotlivých sekcí mobilního
     plátna, tedy z přesného CSS návrhu, ne z odhadu. Všechno uvnitř
     @media (max-width: 767px); desktop zůstává.
     ================================================================= */

  /* ---- Mobil / Button (komponenta 2041:21069) ----
     Výška 56, odsazení 12 po stranách, popisek Kommissar XCond Bold 36 px
     s prokladem 2 % (0,72 px), „původní šipka“ v boxu 31,2 × 30. Web měl
     popisek 30 (hero) nebo 28 (recenze, recepty), odsazení 20 a šipku
     45 × 41. Šipka je tentýž arrow.svg (45 × 41), jen zmenšený – tah 6
     se tím opticky zúží na 4, což odpovídá renderu. */
  .btn--display {
    padding-inline: 12px;
    font-size: 36px;
    letter-spacing: 0.72px;
  }
  .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 { --sipka-sirka: 31px; }
  /* Tlačítka, která si šipku kreslí z pozadí přes ::after. */
  .hero__cta::after { width: 31px; height: 28px; }
  .hero__cta { padding: 0 12px; font-size: 36px; letter-spacing: 0.72px; }

  /* ---- Hero ---- */
  .hero__title { font-size: 56px; line-height: 0.9; letter-spacing: 0.84px; }   /* Mobil/H1 */
  .hero__perex { line-height: 1.4; }                                             /* Mobil/Body 16 */
  .hero__media { border-radius: 8px; }
  .hero__nav {
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
  }

  /* ---- Nadpisy sekcí: Mobil/H2 = 48 px, řádkování 1, proklad 1 % ---- */
  .section-title,
  .products--sady .box__title,
  .footer__heading--lg { font-size: 48px; line-height: 1; letter-spacing: 0.48px; }

  /* ---- Patička (komponenta Mobil / Footer): popisky Label 14 Bold,
     právní odkazy 14 tučně verzálkami, linka #b2b2b2 a 24 px pod ní ---- */
  .footer__heading:not(.footer__heading--lg) { font-size: 14px; }
  .footer__legal { padding-top: 24px; border-top-color: var(--c-border-default, #b2b2b2); }
  .footer__legal a { font-size: 14px; font-weight: 700; text-transform: uppercase; }
  .footer__legal ul { font-size: 14px; line-height: 1.3; gap: 16px; }

  /* ---- Benefity: ikona 32, mezera ikona–text 12, mřížka 20 × 12 ---- */
  .benefit { gap: 12px; }
  .benefit__icon { width: 32px; height: 32px; }
  .benefit__icon img { width: 100%; height: 100%; }
  .benefits__grid { gap: 20px 12px; }

  /* ---- „Sestavte si vlastní sadu“: odsazení 20, mezi bloky 48, perex 16/1,4 ---- */
  .products--sady .box { padding: 20px; }
  .products--sady .box__perex { font-size: 16px; line-height: 1.4; }

  /* ---- Pásy se slidery: karta je v návrhu všude 290 px široká ----
     (recepty, šéfkuchaři, kroky výroby, recenze). Web měl 65–90 %
     a 76 %, tedy 251 až 298. */
  .recipe,
  .chef__slide,
  .process__grid > .step,
  .review { flex: 0 0 290px; }

  /* ---- Mezery mezi sekcemi ----
     Rámy jsou v návrhu 20 px od sebe a každý má 20 px vnitřní odsazení:
     bílá na bílé dělí 60 px obsahu od obsahu (web 56 – nechávám), ale
     mezi BAREVNÝMI bloky je vidět jen těch 20. Web měl všude 56. */
  .process { margin-top: 20px; }     /* šedá karta „Sestavte si…“ → žlutá */
  .chef    { margin-top: 40px; }     /* konec žluté → nadpis (20 mezera + 20 odsazení) */
  .reviews,
  .recipes { margin-top: 60px; }     /* bílá na bílé: 20 + 20 + 20 (1 : 1, dřív 56) */
  .footer  { margin-top: 40px; }     /* šipky receptů → teplý podklad patičky */

  /* ---- Jak vznikají naše oleje: číslo kroku Mobil/H3 40 px ---- */
  .step__number { font-size: 40px; line-height: 1; letter-spacing: 0.6px; }

  /* ---- Šéfkuchaři: karta 0 20 20, funkce Label 14/1,3, citát Body 16/1,4 ---- */
  .chef__body { padding: 24px 20px 20px; }      /* fotka → jméno 24 (gap), dole 20 */
  /* Jediná reference: karta na střed místo u levého okraje – není
     kam listovat, vykukující místo vpravo by jen zelo prázdnotou.
     Pás má vlevo i vpravo stejné odsazení, takže střed sedí. Od 768 px
     jede prolnutí přes celou šířku a tohle se ho netýká. */
  .chef--jedna .chef__track { justify-content: center; }
  .chef__slide,
  .chef__body { background: var(--c-light-gray); }   /* surface-subtle #f2f2f2, ne teplá (ta je desktop) */

  /* ---- Karta produktu: akce bez žlutého podkladu, vozík 20 px v boxu 28 ----
     Mobilní karta v návrhu má cenu v akci jen tučně a přeškrtnutou původní;
     žlutá plocha 32 px je z desktopového návrhu. Tlačítko do košíku je
     28 × 28 s ikonou 20 (popis komponenty: „48px akce do košíku“ –
     dotyk drží pseudoprvek). */
  .product__price--sale { background: none; padding: 0; }
  .product__cart { position: relative; width: 28px; height: 28px; }
  .product__cart img, .product__cart svg { width: 20px; height: 20px; }
  .product__cart::after { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); }

  /* ---- Detail produktu: odznaky pod nadpisem jsou Label 14 Bold
     v odsazení 6 (web 13 px a 7 po stranách) ---- */
  .phero__badges > * { padding-inline: 6px; font-size: 14px; }

  /* ---- Štítky na kartě receptu (KEYWORDS): rámeček 1 px, písmo 12,
     odsazení 6, výška 22 (komponenta má p-6 + Badge 12/1,3 oříznuté
     na verzálky = 22,4; výpis receptů má 22 napevno) ---- */
  .recipe__tags .pill {
    padding: calc((22px - 2px - 1cap) / 2) 6px;
    border-width: 1px;
    font-size: 12px;
  }
  .chef__role { font-size: 14px; line-height: 1.3; }
  .chef__quote { font-size: 16px; line-height: 1.4; }

  /* ---- Recenze: karta na teplé #f5f5f0, hvězdy 16 s mezerou 4,
     OVĚŘENO s ikonou 20 a písmem 14 v odsazení 4, datum 12/1,5 ---- */
  .review { background: var(--c-surface-warm, #f5f5f0); }
  .review__author { letter-spacing: 0.4px; }
  .review .rating { gap: 4px; }
  .review .rating img { width: 16px; height: 16px; }
  .review__verified { padding: 4px; font-size: 14px; line-height: 1.3; gap: 4px; }
  .review__verified-icon { width: 20px; height: 20px; -webkit-mask-size: 20px; mask-size: 20px; }
  .review__date { line-height: 1.5; }

  /* ---- Košíkový panel (rám cart-drawer) ----
     Panel #333, seznam položek na #3d3d3d; nadpis Title/M 20 Bold;
     linky hlavičky a paty bílé; krokovač 96 × 32 ze tří stejných buněk
     s ikonou 20; cena položky 20 Bold; odkazy „Přidat poznámku“ a
     „Uplatnit slevový kód“ Link 14; součty s odsazením 24 – popisek 16
     Bold, částka Price 24 Bold; záruky Body 14 s ikonou 32. */
  .kosik-panel__nadpis { font-size: 20px; letter-spacing: 0.4px; }
  .kosik-panel__head { border-bottom-color: var(--c-white); }
  .kosik-panel__rolovaci { background: #3d3d3d; }
  .kosik-polozka__nazev { font-size: 16px; }
  .kosik-pocet { width: 96px; height: 32px; }
  .kosik-pocet__tlacitko,
  .kosik-pocet__cislo { width: 32px; height: 30px; font-size: 16px; font-weight: 700; }
  .kosik-pocet__tlacitko img,
  .kosik-pocet__tlacitko svg { width: 20px; height: 20px; }
  .kosik-polozka__za-kus { font-size: 14px; }
  .kosik-polozka__cena { font-size: 20px; letter-spacing: 0.4px; }
  .kosik-polozka__cena-puvodni { font-size: 14px; }
  .kosik-poznamka__odkaz { font-size: 14px; color: var(--c-white); }
  .kosik-panel__pata { padding: 16px 24px 20px; border-top-color: var(--c-white); }
  .kosik-uplatnit,
  .kosik-uplatnit button { font-size: 14px; }
  .kosik-soucet__radek { font-size: 16px; font-weight: 700; }
  .js-kosik-celkem { font-size: 24px; }
  .kosik-zaruka { font-size: 14px; }
  .kosik-zaruka img { width: 32px; height: 32px; }

  /* ---- Pokladna 1 : 1 (rámy 2123:24883 a 2123:24976) ----
     Stránka: odsazení 20, H1 Mobil/H1 56/0,9. Souhrn: nadpis Title/L 24
     nad linkou #b2b2b2 s odsazením 12, šipka arrow_drop_down (10 × 5
     v boxu 24); položky s miniaturou 72 × 72, kolečkem 20 vysunutým
     o 9 doprava a 6 nahoru (Badge 12 Bold), objem Body 16 v černé,
     mezi položkami 8 + linka #d9d9d9 + 8. Karta „Mohlo by se vám líbit“
     p-12, nadpis Title/M 20, řádky 72 (objem na druhém řádku tučně,
     cena Body 14 #666 s mezerou 12), žluté „+“ 50 × 48 s obrysem
     a stínem 4. Před slevovým kódem linka #b2b2b2 (16 + 16); pole 48
     (popisek 12 na 9,5 od horní hrany, hodnota 16 Bold na 25,5),
     POUŽÍT 48 vysoké s odsazením 14. Součty: řádky Body 16 v černé
     s mezerou 12, „Zadat dodací adresu“ Link 14, nad Celkem linka
     #b2b2b2 (12 + 12), Celkem Title/M 20 + částka Price 24, daň
     Caption 12 #666 s mezerou 8.
     Formulář: sekce po 40; nadpisy Title/L 24 (Doručení má v návrhu
     Title/M 20 – ponecháno 1 : 1); pole 48 (telefon 56) s rámečkem
     #888, šipka výběru 18 od pravé hrany; zaškrtávátko s rámečkem
     #888 a 8 pod řádkem; volby dopravy a platby: mezera 16 mezi
     kolečkem a textem, nevybraná na #f5f5f0 s kolečkem 1,5 px,
     názvy bez verzálek (návrh je nemá); patička 40 nad linkou,
     odkazy i © Body 14 v černé, © oříznuté na verzálky. */
  .checkout { --co-field-h: 48px; padding-bottom: 20px; }
  .checkout__inner { row-gap: 0; padding-top: 20px; }
  .checkout-nadpis {
    font-size: 56px;
    line-height: 0.9;
    letter-spacing: 0.84px;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .checkout-section__title {
    margin-bottom: 24px;
    font-size: 24px;
    line-height: 1.2;
  }
  .checkout-section--delivery .checkout-section__title { font-size: 20px; letter-spacing: 0.4px; }
  .checkout-section--shipping .checkout-section__title { margin-bottom: 20px; }
  .checkout-section__title--tight { margin-bottom: 16px; }
  .checkout-section__head { margin-bottom: 24px; }
  .checkout-section,
  .checkout-section--contact,
  .checkout-section--payment,
  .checkout-section--billing { margin-top: 40px; }

  /* Souhrn */
  .checkout-summary__nadpis {
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--c-degustace);
  }
  /* Tlačítko se ořízne na verzálky samo (h2 je flex, ořez se přes něj
     nepropaguje); šipka proto stojí absolutně, 7 px od pravé hrany
     (ikona 24 s trojúhelníkem 10 × 5 uprostřed). */
  .checkout-summary__prepinac {
    display: block;
    position: relative;
    padding-block: 3.5px;   /* řádek je vysoký jako ikona šipky (24) */
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .checkout-summary__prepinac .sekce__sipka {
    position: absolute;
    right: 7px;
    top: 50%;
    width: 10px; height: 5px;
    margin-top: -2.5px;
  }
  .checkout-summary__thumb { width: 72px; aspect-ratio: 1 / 1; }
  /* Střed kolečka v pravém horním rohu náhledu jako na desktopu – posun
     o půl kolečka dělá translate(50%, -50%) ve style.css. Dřív tu byl
     navíc posun -6 / -9 px ze staršího návrhu, a protože se oba sečetly,
     stálo kolečko vedle náhledu (8. 11. 2026). */
  .checkout-summary__qty {
    top: 0; right: 0;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
  }
  .checkout-summary__item { padding-bottom: 8px; }
  .checkout-summary__item + .checkout-summary__item { margin-top: 0; padding-top: 8px; }
  .checkout-summary__volume { margin-top: 10px; line-height: 1.4; color: var(--c-black); }

  .checkout-suggest { margin-top: 16px; padding: 12px; }
  .checkout-suggest__title { font-size: 20px; line-height: 1.2; letter-spacing: 0.4px; }
  .checkout-suggest__list { margin-top: 16px; }
  .checkout-suggest__item + .checkout-suggest__item { margin-top: 8px; padding-top: 8px; }
  .checkout-suggest__name { line-height: 1.3; }
  .checkout-suggest__volume { display: block; }
  .checkout-suggest__price { margin-top: 12px; font-size: 14px; line-height: 1.4; }
  .checkout-suggest__add {
    flex: 0 0 50px;
    width: 50px; height: 48px;
    margin-right: 0;
  }
  /* Plus musí ležet mimo mřížku tlačítka: vedle něj je v tlačítku
     ještě schovaný text „Přidat“ (písmo 0, kvůli čtečkám) a ten v mřížce
     založil druhý řádek – plus pak sedělo v horním řádku 25 px vysokém,
     ne na středu 48 (Trello „Mobil / checkout / add buttons“, 2. 11.
     2026). Absolutně na střed se do mřížky nepočítá. */
  .checkout-suggest__add::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 2h2v16H9z M2 9h16v2H2z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 2h2v16H9z M2 9h16v2H2z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  }

  .checkout-discount {
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--c-degustace);
  }
  .checkout-discount__submit {
    margin-right: 0;
    padding: 0 14px;
    letter-spacing: 0.32px;
  }

  .checkout-summary__totals { margin-top: 20px; }
  .checkout-summary__row { color: var(--c-black); }
  .checkout-summary__row + .checkout-summary__row { margin-top: 12px; }
  /* Řádky součtů jsou flex, takže ořez na verzálky musí nést až jejich
     děti – jinak by mezery 12 z návrhu seděly na řádkový box, ne na
     písmena. Ikona ⓘ (16) je vystředěná na verzálky (16 − 11,2) / 2. */
  .checkout-summary__row > *,
  .checkout-summary__total > span {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .checkout-summary__label { display: block; gap: 0; white-space: nowrap; }
  .checkout-summary__label img { display: inline-block; margin-left: 4px; vertical-align: -2.4px; }
  .checkout-summary__zadat { font-size: 14px; }
  .checkout-summary__total {
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top-color: var(--c-degustace);
    font-size: 20px;
    letter-spacing: 0.4px;
  }
  .checkout-summary__total > span:last-child { font-size: 24px; letter-spacing: 0; }
  .checkout-summary__tax {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-text-secondary);
  }

  /* Pole formuláře */
  .checkout-field {
    padding-top: 8.5px;
    border-color: var(--c-option-line);
  }
  .checkout-field__input { margin-top: 2px; }
  .checkout-field__label { --plovouci-horni: 9.5px; }
  .checkout-field--select::after { right: 18px; }
  .checkout-field--telefon { height: 56px; padding-top: 12.5px; }
  .checkout-field--telefon .checkout-field__label { --plovouci-vyska: 56px; --plovouci-horni: 13.5px; }
  .checkout-predvolba { border-left-color: var(--c-option-line); }
  .checkout-check__box { border-color: var(--c-option-line); }
  .checkout-section > .checkout-check:last-child { padding-bottom: 8px; }

  /* Volby dopravy a platby */
  .checkout-option { gap: 16px; background: var(--c-surface-warm, #f5f5f0); }
  .checkout-option.is-selected { background: var(--c-white); }
  .checkout-radio { border-width: 1.5px; }
  .checkout-radio:checked { border-width: 2px; }
  .checkout-option__title { text-transform: none; }
  .checkout-option__desc { margin-top: 8px; font-size: 16px; }

  /* Patička pokladny */
  .checkout-legal { margin-top: 40px; }
  .checkout-legal__links a { font-size: 14px; color: var(--c-black); }
  .checkout-legal__copy {
    font-size: 14px;
    line-height: 1.4;
    color: var(--c-black);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }

  /* ---- Děkovačka 1 : 1 (rám 2123:25672, sbalený 2123:25735) ----
     Obsah začíná 48 pod hlavičkou, texty úvodu jsou oříznuté na verzálky
     a mají mezi sebou 12: číslo objednávky Label 14 Bold #666, DĚKUJEME!
     H1 56, „Objednávku jsme přijali." Title/M 20, e-mail Body 16. Blok
     se stavem platby má v návrhu vlastní odsazení 20 + mezeru 24, tedy
     44 nad fajfkou i pod ním; stav Body 16 Bold zelený, popis 8 pod
     ním. Souhrn: linka #b2b2b2, nadpis Title/L 24 s šipkou v boxu 32,
     položky bez linek s mezerou 16 (fotka 72, cena 12 pod objemem),
     pak 24 + linka #b2b2b2 + 24 řádky součtů (mezera 12, cena dopravy
     Body 16 Bold v černé), 24 pod nimi „Celkem zaplaceno" Body 16 Bold
     + Price 24 bez linky, daň Caption 12 #666 po 8. Doručení: linka
     #d9d9d9, nadpis Title/L 24, adresa Body 16 /1,4; fakturace 24 pod
     adresou s popisem 8 pod nadpisem. Recepty 44 pod fakturací bez
     šipek a tlačítka (návrh má jen pás karet). Pomoc 44 pod recepty bez
     linky, odkaz Link 14 podtržený 8 pod otázkou; tlačítko 24; patička
     24 + 24 bez linky, odkazy i © Body 14 černé podtržené; dole 32. */
  .thanks { padding-bottom: 32px; }
  .thanks__number,
  .thanks__title,
  .thanks__lead,
  .thanks__main > .thanks__note,
  .thanks__payment-state,
  .thanks__payment-text,
  .thanks__heading,
  .thanks__strong,
  .thanks__address,
  .thanks__muted,
  .thanks__block--pomoc .thanks__note,
  .thanks__legal a,
  .thanks__copy {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .thanks__main > .thanks__number {
    margin-top: 48px;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--c-text-secondary);
  }
  .thanks__title { margin-top: 12px; line-height: 0.9; letter-spacing: 0.84px; }
  .thanks__lead { margin-top: 12px; font-size: 20px; line-height: 1.2; letter-spacing: 0.4px; }
  .thanks__main > .thanks__note { margin-top: 12px; line-height: 1.4; }
  .thanks__payment { margin-top: 44px; }
  .thanks__payment-state { line-height: 1.3; }
  .thanks__payment-text { margin-top: 8px; line-height: 1.4; }

  .thanks__inner > .thanks__summary {
    margin-top: 44px;
    padding-top: 12px;
    border-top-color: var(--c-degustace);
  }
  .thanks__summary-title { margin-bottom: 24px; font-size: 24px; line-height: 1.2; }
  .thanks__summary-title .checkout-summary__prepinac { padding-block: 7.6px; }
  .thanks__summary-title .sekce__sipka {
    right: 9.3px;
    width: 13.3px; height: 6.7px;
    margin-top: -3.3px;
  }
  /* Řádky mřížky (název + objem, cena) se jinak roztáhnou na výšku fotky
     a cena spadne až k její spodní hraně; návrh má texty vystředěné
     s mezerou 12. Dvě pružné řádky okolo odsají zbytek výšky rovným
     dílem, fotka drží všechny čtyři. */
  .thanks__summary .checkout-summary__item {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 0;                /* mezeru 12 k ceně dělá její margin */
    min-height: 72px;
    padding: 0 0 0 88px;   /* fotka 72 + mezera 16 */
    border: 0;
  }
  .thanks__summary .checkout-summary__thumb {
    position: absolute;
    left: 0; top: 0;
    grid-row: auto;
  }
  .thanks__summary .checkout-summary__price { grid-column: 1; }
  .thanks__summary .checkout-summary__item + .checkout-summary__item { margin-top: 16px; padding-top: 0; }
  .thanks__summary .checkout-summary__price { margin-top: 12px; }
  .thanks__summary .checkout-summary__totals {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--c-degustace);
  }
  .thanks__summary .checkout-summary__row--muted span:last-child { font-weight: 700; color: var(--c-black); }
  .thanks__summary .checkout-summary__total {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* Sbalený souhrn (rám 2123:25735) nechává jen „Celkem zaplaceno" s daní,
     24 pod nadpisem – bez řádků mezisoučtu a dopravy i bez linky. */
  .thanks__summary.is-sbaleno .checkout-summary__row { display: none; }
  .thanks__summary.is-sbaleno .checkout-summary__totals { margin-top: 24px; padding-top: 0; border-top: 0; }
  .thanks__summary.is-sbaleno .checkout-summary__total { margin-top: 0; }

  .thanks__block { border-top-color: var(--c-product-line); }
  .thanks__heading { font-size: 24px; line-height: 1.2; }
  .thanks__strong { line-height: 1.3; }
  .thanks__address { line-height: 1.4; }
  .thanks__muted { line-height: 1.4; }
  .thanks__block--navazuje .thanks__strong + .thanks__muted { margin-top: 8px; }

  .page-dekujeme .recipes { margin-top: 44px; }
  .page-dekujeme .recipes__nav,
  .page-dekujeme .recipes__cta { display: none; }

  .thanks__block--pomoc { margin-top: 32px; padding-top: 0; border-top: 0; }   /* pod ZPĚT DO OBCHODU (dřív 44 pod recepty) */
  .thanks__block--pomoc .thanks__note {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-position: from-font;
  }
  .thanks__cta { margin-top: 32px; }   /* pod fakturačními údaji (dřív 24 pod „pomoct?“) */
  .thanks__foot { margin-top: 24px; padding-top: 24px; border-top: 0; }
  .thanks__legal ul { gap: 16px; }
  .thanks__legal a {
    display: block;        /* ať ořez na verzálky drží i <li> okolo */
    border-bottom: 0;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-position: from-font;
  }
  .thanks__copy {
    display: block;
    margin-top: 44px;   /* pod pásem receptů (dřív 12 pod právními odkazy) */
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: var(--c-black);
  }

  /* ---- Menu (rám 2123:25147) ----
     Řádek s křížkem 56 (16 + 24 + 16), obsah px 24, pt 24, pb 48, mezi
     skupinami 32. Kategorie Mobil/Navigation 64/0,9 s prokladem 2 %
     (1,28 px), doplňkové odkazy Title/M 20, právní Body 16 Bold,
     kontakt Body 16 /1,4, ikony sítí 36 s mezerou 32. Skupiny jsou
     oříznuté na verzálky nahoře a účaří dole (první a poslední řádek),
     aby mezery 32 seděly na písmena jako v návrhu. */
  .menu-vysouvaci { padding: 0 24px 48px; }
  .menu-vysouvaci-polozky { margin-top: 80px; }
  .menu-vysouvaci-odkaz { font-size: 64px; line-height: 0.9; letter-spacing: 1.28px; }
  .menu-vysouvaci-nav > .menu-vysouvaci-polozka:first-child .menu-vysouvaci-odkaz,
  .menu-vysouvaci-skupina > .menu-vysouvaci-polozka:first-child .menu-vysouvaci-odkaz {
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
    text-box: trim-start cap alphabetic;
  }
  .menu-vysouvaci-polozka:has(+ .menu-vysouvaci-skupina) .menu-vysouvaci-odkaz,
  .menu-vysouvaci-skupina > .menu-vysouvaci-polozka:last-child .menu-vysouvaci-odkaz {
    text-box-trim: trim-end;
    text-box-edge: cap alphabetic;
    text-box: trim-end cap alphabetic;
  }
  .menu-vysouvaci-skupina--doplnkova,
  .menu-vysouvaci-skupina--pravni { margin-top: 32px; }
  .menu-vysouvaci-odkaz--doplnkovy { font-size: 20px; line-height: 1.2; letter-spacing: 0.4px; }
  .menu-vysouvaci-odkaz--pravni { font-size: 16px; line-height: 1.3; letter-spacing: 0; }
  .menu-vysouvaci-kontakt { min-height: 66px; margin-top: 32px; font-size: 16px; line-height: 1.4; }
  .menu-vysouvaci-kontakt-text {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .menu-vysouvaci-site { gap: 32px; }

  /* ---- Výpis receptů (rám 2123:26271) ----
     Obsah pt 32, pb 48; H1 Mobil/H1 56; „FILTROVAT PODLE" Label 14
     20 pod nadpisem, pole 12 pod popiskem, štítky kategorií 20 pod
     polem (22 vysoké, rámeček 1 px, Label 14); výpis 32 pod štítky.
     Karta receptu: pt 16, fotka 350 × 250, 16, název H3 40, 20,
     klíčová slova (22, rámeček 1 px, Caption Bold 12), pb 24, linka
     #b2b2b2; mezi kartami 32. */
  .page-recipes .blog__inner { padding-top: 32px; padding-bottom: 48px; }
  .page-recipes .blog__title { font-size: 56px; line-height: 0.9; letter-spacing: 0.84px; }
  .page-recipes .vypis-hlavicka { gap: 20px; }
  .page-recipes .vypis-hledani { margin-top: 0; gap: 12px; }
  .page-recipes .vypis-hledani__label {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .page-recipes .blog__filters { margin-top: 20px; }
  .page-recipes .blog__filters .pill {
    padding: calc((22px - 2px - 1cap) / 2) 6px;
    border-width: 1px;
  }
  .page-recipes .blog__list { margin-top: 32px; }
  .page-recipes .blog-article { padding: 16px 0 24px; }
  .page-recipes .blog-article + .blog-article { margin-top: 32px; }
  .page-recipes .blog-article__link { flex-direction: column; gap: 16px; margin-top: 0; }
  .page-recipes .blog-article__photo { width: 100%; }
  .page-recipes .blog-article__photo img { height: 250px; }
  .page-recipes .blog-article__body { gap: 20px; min-height: 0; }
  .page-recipes .blog-article__title { font-size: 40px; line-height: 1; letter-spacing: 0.6px; }
  .page-recipes .blog-article__tags { gap: 8px; }
  .page-recipes .blog-article__tags .pill {
    padding: calc((22px - 2px - 1cap) / 2) 6px;
    border-width: 1px;
    font-size: 12px;
    line-height: 1.5;
  }

  /* ---- Detail produktu a hotová sada 1 : 1 (rámy 2123:24451, 2123:25824) ----
     Sekce jdou v návrhu po 20 + vlastní odsazení: PROČ… má linku 32 pod
     tlačítkem a nadpis H2 48 oříznutý na verzálky 12 pod linkou, text
     24 pod nadpisem; benefity 20 pod textem (ikony 32, sloupce 12,
     řádky 20); SLOŽENÍ 60 pod benefity (20 + 20 + 20), tabulka Body 14;
     praktické informace p-20 s mezerou 24, ikona 24 v boxu 28, nadpis
     Label 14, text Body 16; recepty 40 pod složením bez šipek; výroba
     40 pod recepty, v kartě 16 mezi číslem a textem, pás po 12, šipky
     16 pod kartami a 16 pod nimi; šéfkuchaři bez nadpisu, karty 56
     pod šipkami výroby; „Objevte další chutě" 60 pod šipkami, nadpis
     H3 40, mřížka 24 pod ním, řádky po 24. Hotová sada: nadpis 64 pod
     tlačítkem (12 + 20 + 32), pod kartami 32, názvy olejů oříznuté. */
  .why__title .sekce__text,
  .nutrition .section-title .sekce__text,
  .sada-karta__nazev {
    display: block;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .why__title,
  .nutrition .section-title { font-size: 48px; line-height: 1; letter-spacing: 0.48px; }
  .why__inner,
  .nutrition__inner { padding-top: 12px; }
  .why__text { margin-top: 24px; line-height: 1.4; }
  .page-detail .benefits { margin-top: 20px; }
  .page-detail .benefits__grid { margin-top: 0; gap: 20px 12px; }
  .page-detail .benefit__icon { width: 32px; height: 32px; }
  .sada--hotova { margin-top: 56px; padding-bottom: 32px; }
  .nutrition { margin-top: 60px; }
  .nutrition__db td { font-size: 14px; }
  .notes { gap: 24px; padding: 20px; }
  .note { align-items: center; gap: 16px; }
  .note__icon { width: 24px; height: 24px; margin-inline: 2px; }   /* ikona 24 v boxu 28 */
  .note__title { font-size: 14px; line-height: 1.3; }
  .note__text { margin-top: 8px; font-size: 16px; line-height: 1.4; }
  .page-detail .recipes { margin-top: 40px; }
  /* Šipky pod recepty na detailu se zase ukazují (Trello „Mobil / Product
     detail page / chybí šipky pod sliderem s recepty“, 3. 11. 2026) –
     dřív tu bylo .page-detail .recipes__nav { display: none; }. */
  .page-detail .process { margin-top: 40px; }
  .step__head { gap: 16px; }
  .step__text { line-height: 1.4; }
  .process__grid,
  .reviews__grid,
  .recipes__track { gap: 12px; }
  .process__nav { margin-top: 16px; padding-bottom: 16px; }
  .page-detail .chef { margin-top: 56px; }
  .chef .slider-nav { margin-top: 16px; }   /* šipky 16 pod kartami, doma i na detailu */
  .page-detail .chef .section-title {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .page-detail .chef__inner,
  .page-detail .chef .js-slider { margin-top: 0; }
  .page-detail .products { margin-top: 60px; }
  .page-detail .products .section-title { font-size: 40px; letter-spacing: 0.6px; }
  .page-detail .products__grid { margin-top: 24px; }
  .products__grid { gap: 24px 12px; }

  /* ---- Vlastní sada 1 : 1 (rámy 2123:25787, 26123, 26163, 26095, 26228) ----
     Úvod: přechod bílá → #b2b2b2 od hlavičky po konec bloku, pt 48,
     pb 32, H1 56, odznaky Label 14 s odsazením 6, perex 20 pod odznaky,
     cena 20 pod perexem. Konfigurátor začíná 52 pod úvodem (20 + 32;
     nadpis „Které čtyři budou vaše?" i perex jsou pryč podle Trella).
     Spodní lišta: #d9d9d9, pt 16, pb 20, nadpis Title/M 20, sloty 86
     vysoké s mezerou 12 a kolečkem 24, tlačítko 12 pod nimi, nedoplněná
     sada = tlačítko v 35 % krytí. Plachta oleje: px 20, pt 20, pb 24,
     řádek „OLEJ DO SADY" 24 vysoký (Label 14 + křížek 24), název H2 48
     20 pod ním, fotky 160 × 160 s mezerou 8 (vybraná s 2px rámečkem),
     perex Body 16 po 20, řádek stavu 20 pod perexem (kolečka 20 +
     Label 14 po 10), tlačítko 20 pod ním bez plusu (žluté PŘIDAT DO
     SADY), odkaz „Odebrat…" Body 14 podtržený 20 pod tlačítkem. */
  .je-sada-miru .phero {
    padding-bottom: 0;
    background: linear-gradient(180deg, #fff var(--header-h), #b2b2b2 100%);
  }
  .phero__title { font-size: 56px; line-height: 0.9; letter-spacing: 0.84px; }
  .phero__badges .product__badge {
    padding: 6px;
    font-size: 14px;
    line-height: 1.3;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .phero--sada-miru .phero__perex { margin-top: 20px; }
  .phero--sada-miru .buy__cena { margin-top: 0; }
  body.je-sada-miru .sada { margin-top: 52px; }

  .sada-panel { row-gap: 0; padding: 16px var(--page-gutter) 20px; background: var(--c-product-line); }
  .sada-panel__title { font-size: 20px; line-height: 1.2; letter-spacing: 0.4px; }
  .sada-panel__cena { font-size: 20px; line-height: 1.2; letter-spacing: 0.4px; }
  .sada-panel__mena { font-size: inherit; }   /* „819 Kč" v jedné velikosti */
  .sada-panel__sloty { gap: 12px; margin-top: 12px; }
  .sada-slot { aspect-ratio: auto; height: 86px; }
  .sada-slot__plus { width: 24px; height: 24px; border-color: var(--c-option-line); }
  .sada-slot__plus::before,
  .sada-slot__plus::after { background: var(--c-option-line); }
  .sada-slot__plus::before { width: 12px; }
  .sada-slot__plus::after { height: 12px; }
  .sada-panel__koupit { margin-top: 12px; font-size: 36px; }
  .sada-panel__koupit:disabled {
    --btn-obrys: var(--c-black);
    background: var(--c-white);
    color: var(--c-black);
    opacity: .35;
  }
  .sada-panel__koupit:disabled:hover { background: var(--c-white); }
  .sada-panel__koupit:disabled .buy__submit-icon img { opacity: 1; }

  .sada-okno__nadtitulek {
    display: flex;
    align-items: center;
    box-sizing: content-box;
    height: 24px;            /* řádek vysoký jako křížek */
    padding: 20px 64px 0 20px;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .sada-okno__nadtitulek .vp-mobil {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .sada-okno__krizek { top: 12px; right: 12px; }
  .sada-okno__nazev {
    padding: 20px 20px 20px;
    font-size: 48px;
    line-height: 1;
    letter-spacing: 0.48px;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .sada-okno__foto { height: 160px; }
  .sada-okno__snimek { flex-basis: 160px; width: 160px; }
  /* Vybraný snímek galerie bez rámečku (zadání 10. 11. 2026). */
  .sada-okno__popis { padding: 20px 20px 0; font-size: 16px; line-height: 1.4; }
  .sada-okno__paticka { padding: 20px 20px 24px; }
  .sada-okno__mista,
  .sada-okno__vsade { gap: 10px; margin-top: 0; font-size: 14px; line-height: 1.3; letter-spacing: 0; }
  .sada-okno__tecky { gap: 0; }
  .sada-okno__tecka { width: 13px; height: 13px; margin: 0 3.5px; }
  .sada-okno__fajfka { width: 24px; height: 24px; }
  .sada-okno__pridat { margin-top: 20px; justify-content: flex-start; }
  .sada-okno__plus { display: none; }
  .sada-okno__odebrat { margin: 20px 0 0; font-weight: 400; text-underline-position: from-font; text-underline-offset: auto; }

  /* ---- Košíkový panel 1 : 1 (rámy 2123:25168–25552) – doplnění ----
     Křížek 24 s pravým okrajem 16 (box 40 → right 8), pruhy 8 pod
     hlavičkou, položky 20 pod pruhy (8 + 12), název oříznutý na verzálky
     a sloupec s odsazením 4 nahoře i dole, „1 ks = …" 11 za krokovačem,
     poznámka 24 pod položkami, součet Price 24, tlačítko 16 pod součtem,
     záruky 20 pod tlačítkem. */
  .kosik-panel__zavrit { right: 8px; }
  .kosik-panel__rolovaci { padding-top: 8px; }
  .kosik-seznam { margin-top: 20px; }
  .kosik-polozka__telo { justify-content: space-between; padding-block: 4px; }
  .kosik-polozka__nazev { margin-top: 0; line-height: 1.3; }
  .kosik-polozka__nazev > * {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .kosik-polozka__radek-poctu { gap: 11px; }
  .kosik-poznamka { margin-top: 24px; }
  .kosik-soucet__radek--celkem span:last-child,
  .kosik-soucet__radek--celkem .js-kosik-celkem { font-size: 24px; line-height: 1.2; }
  .kosik-pokladna { margin-top: 16px; }
  .kosik-zaruky { margin-top: 20px; }

  /* ---- Hlavička 1 : 1 (komponenta Mobil / NavBar Stack) ----
     Bílý pruh 61 (16 + nápis 29 + 16), ikony 24 s okrajem 16 (menu
     = tři čárky 18 × 2 v rozteči 5, vozík 24 s bublinou 22 a Badge 12
     hned vlevo), šedá lišta 43 s odkazy Label 16 od x 16 s roztečí 24.
     Celkem 104 – o tolik si tělo odsazuje obsah. */
  :root { --header-h: 104px; }
  .header__inner,
  .header.is-pripnuta .header__inner,
  .header--minimal .header__inner { height: 61px; }
  .header--minimal { height: 61px; }
  .header__logo,
  .header.is-pripnuta .header__logo,
  .header--minimal .header__logo { top: 16px; }
  .header__burger { margin-left: -8px; }
  .header__burger-bar,
  .header__burger-bar::before,
  .header__burger-bar::after { left: 7px; width: 18px; height: 2px; }
  .header__burger-bar { top: 12.5px; }   /* střed ikony na 28 od horní hrany */
  .header__burger-bar::before,
  .header__burger-bar::after { left: 0; }
  .header__burger-bar::before { top: -5px; }
  .header__burger-bar::after { top: 5px; }
  .header__cart { --kosik-ikona: 24px; margin-right: -4px; }
  .header__cart-count {
    right: 24px;
    top: 1px;
    --bublina: 22px;
    font-size: 12px;
  }
  .kat-lista__seznam { padding-inline: 16px; }
  .kat-lista__odkaz {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.32px;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }

  /* ---- Karta produktu (komponenta Mobil / Product Card) – doplnění ----
     Odznak 6 od rohu fotky, název a objem jako dva řádky jednoho textu
     (16/1,3 → 20,8 mezi verzálkami), sklad Caption Bold 12 po 8,
     původní cena Body 14. */
  .product__badges { left: 6px; right: 6px; top: 6px; }
  .product__media:has(> .product__certificates) > .product__badges {
    right: calc(5.66% + 23.35% + 6px);
  }
  .product__col { gap: 8px; }
  .product__volume { margin-top: 1.6px; }
  .product__stock { font-size: 12px; line-height: 1.5; }
  .product__price-old { font-size: 14px; line-height: 1.5; }

  /* ---- Úvod: běžící věta a benefity (rám 2123:24017) ----
     Věta Body 24 Bold s verzálkami 36 pod herem, text od x 24, pás
     benefitů 30 pod ní (mřížka 83 pod herem, pt 20 bloku). */
  .benefits { margin-top: 36px; }
  .benefits__lead { line-height: 1.2; width: auto; margin-inline: 0; text-align: left; }   /* na mobilu vlevo (9. 11. 2026) */
  .benefits__lead-text {
    padding-inline: 0;   /* dřív odsazení kopií běžícího pásu (do 9. 11. 2026) */
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  .benefits__grid { margin-top: 30px; }

  /* ---- Úvod: produkty a „Sestavte si vlastní sadu" (rámy 2123:24043,
     24051, 24054) ----
     Nadpisy sekcí 20 pod předchozím blokem s odsazením 20 (= 60 od
     posledního textu), mřížka 24 pod nadpisem; karta sady s rámečkem
     #b2b2b2; box #f2f2f2 p-20 s mezerami 48 (nadpis → scéna → text),
     scéna: krabice 220 široká, lahvičky 146 široké na x 208,5 / y 43,
     text 12 nad tlačítkem Mobil / Button (36 px). */
  .products { margin-top: 60px; }
  .products__grid { margin-top: 24px; }
  .products--sady .product { border-color: var(--c-degustace); }
  .products--sady .box { margin-top: 16px; }   /* 24 mezery mřížky + 16 = 40 */
  .products--sady .box__scene { margin: 48px 0; }
  .products--sady .box__media { width: 220px; }
  .products--sady .box__bottles { inset: 43px auto auto 208.5px; width: 146px; }
  .hero__cta { font-size: 36px; letter-spacing: 0.72px; }
  .products--sady .box .btn--compact { margin-top: 12px; }
  /* „Všechny sady“ pod sekcí přes celou šířku jako ostatní primary
     buttony na telefonu (Mobil / Button 350 × 56), šipka vpravo –
     stejně jako „Více na Heureka.cz“. 4 px drží stín. 9. 11. 2026 */
  .products__cta .btn {
    justify-content: space-between;
    width: calc(100% - 4px);
  }

  /* ---- Výpis (rám 2123:24230) ----
     Řádek s filtrem 20 pod hlavičkou, nadpis Mobil/H1 56 (88 pod
     hlavičkou), popisek u zaškrtávátka Body 14. */
  .page-listing main { margin-top: 20px; }
  .listing__title { font-size: 56px; line-height: 0.9; letter-spacing: 0.84px; }
  .listing__sklad-label { font-size: 14px; line-height: 1.4; }

  /* ---- Patička (komponenta Mobil / Footer) – doplnění ----
     Bloky po 32 (newsletter → KONTAKT → linka), tlačítko ODESLAT jako
     secondary button návrhu (48 vysoké, px 14, Label 16, ve středu
     56px řádku), právní odkazy oříznuté na verzálky s mezerou 16. */
  .newsletter { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .newsletter__submit {
    width: auto;
    height: 48px;
    min-height: 48px;
    padding: 0 14px;
    font-size: 16px;
    letter-spacing: 0.32px;
  }
  .footer__heading--mobil-kontakt { margin-top: 32px; }
  .footer__legal { margin-top: 32px; }
  .footer__legal a {
    display: block;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }
  /* ---- Úvodní stránka: „Více na Heureka.cz“ (1. 11. 2026) ----
     Na desktopu je to secondary button bez šipky (Trello „Maxim Desktop
     Review“), na telefonu zůstává celošířkové tlačítko se šipkou jako
     dřív – stejná geometrie jako „Více“ v heru (56 vysoké, písmo 36,
     šipka 31 × 28 z ::after). */
  .reviews__cta-btn--sekundarni {
    justify-content: space-between;
    width: calc(100% - 4px);
    height: 56px;
    padding: 0 12px;
    font-family: var(--font-heading);
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.72px;
  }
  .reviews__cta-btn--sekundarni::after {
    content: "";
    flex: 0 0 auto;
    width: 31px; height: 28px;
    background: url("../assets/icons/arrow.svg") no-repeat center / contain;
  }
  /* ---- Detail: pořadí sekcí (1. 11. 2026) ----
     Desktop má podle Trella („Maxim Desktop Review“) RECEPTY až pod JAK
     VZNIKAJÍ NAŠE OLEJE, mobilní návrh (product-detail-mobile-A) je má
     před nimi. Markup je desktopový; tady se main stane sloupcem a
     recepty jdou přes order zpátky před proces: položky s order 0 drží
     pořadí zdroje, proces a všechno za ním dostává 1, recepty zase 0. */
  .page-detail main { display: flex; flex-direction: column; }
  .page-detail main > .detail-blok--proces,
  .page-detail main > .detail-blok--proces ~ * { order: 1; }
  .page-detail main > #sekce-recepty { order: 0; }

  /* =================================================================
     TRELLO „FRONTEND / Mobil“ (1. 11. 2026)
     Dvanáct bodů karty; všechno v tomhle bloku platí jen do 767 px,
     desktop a tablet se nemění. Rozměry z mobilní Figmy (V-PRESU-2026,
     page Phone).
     ================================================================= */

  /* ---- Jak vznikají naše oleje: kapka s chlebem ----
     Návrh (Rectangle 4 v rámu „Jak vznikají naše oleje“) má fotku
     stékajícího oleje 1070 × 199 otočenou o 180° a na střed – je mnohem
     širší než telefon a okno ji ořízne ze stran. Web ji natahoval na
     šířku okna (cover), takže chleba vyšel kolem 37 px a byl z něj
     drobek. Fotka se teď kreslí v pevné velikosti 1129 × 635 px (tak
     velká je v návrhu: chleba 147 px, vlna u levého kraje 89 px a u
     pravého 75 px pod horní hranou) a pruh je vysoký 199 px; posun
     −302 px vybírá z neotočené fotky řádky 302–501, po otočení tedy
     výřez od vlny dolů do plné žluté. Nadpis 24 pod pruhem (223 jako
     v návrhu).

     Mezera mezi fotkou a žlutou plochou: pruh měl výšku 56vw, tedy
     zlomek pixelu, a na jeho spodní hraně prosvítal bílý vlas. Výška
     je teď celá a žlutá pod ním o pixel podjíždí – otočený pruh leží
     nad ní, takže překrytí není vidět. */
  .process__drip {
    height: 199px;
    background-size: 1129px auto;
    background-position: 50% -302px;
  }
  .process__fill { margin-top: -1px; }
  .process__title { padding-top: 223px; }

  /* ---- Karta produktu: košík 24, recenze ----
     Ikona košíku 24 px (dřív 20); políčko 28 i dotyková plocha 48 přes
     ::after zůstávají. Recenze (hvězdy 12 s mezerou 2, počet Caption
     12 šedě, mezi nimi 4) stojí mezi objemem a dostupností – markup
     v libs/polozky-produkty.php, jen u produktu, který recenze má. */
  .product__cart img,
  .product__cart svg { width: 24px; height: 24px; }
  /* Hvězdičky na kartě jsou na telefonu schované stejně jako na desktopu
     (zadání 8. 11. 2026). Rozvržení níž zůstává – až se mají vrátit,
     stačí tu `display: none` přepsat zpět na `display: flex`. */
  .product .product__hodnoceni {
    display: none;
    align-items: center;
    gap: 4px;
    margin: 0;
  }
  .product__hvezdy { display: flex; gap: 2px; }
  .product__hvezdy img { width: 12px; height: 12px; }
  .product__hodnoceni-pocet {
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-text-secondary);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }

  /* ---- Primární tlačítko: šipka ----
     „Mobil / Button“ má šipku jako vektor 31,2 × 30 s tahem 3 px
     (border/strong). Web kreslil arrow.svg s tahem 6, zmenšený na
     27–31 px: tah vycházel 4,1–4,6 px a šipka byla menší. Asset
     arrow-tenka.svg je symbol od designéra (button-arrow.svg, 2. 11.
     2026) s tahem 5 v jednotkách obrázku, tedy přesně 3 px při velikosti
     návrhu (měřítko 0,6); viewBox zahrnuje i hrot pokosu (2,5 px za
     koncem vektoru), proto je políčko 33,7 × 32,4
     a přesahuje pravé odsazení tlačítka o 3,5 px (hrot 2,5 + rámeček
     1, který Figma do odsazení nepočítá) – vektor sám tak končí 12 px
     od hrany tlačítka jako v návrhu. Tlačítka se šipkou ve <span><img>
     dostanou obrázek do pozadí a <img> se schová; ta, co si šipku
     kreslí přes ::after, jen vymění obrázek a rozměr. */
  .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,
  .btn--display .story__cta-icon,
  .btn--display .ucet__odeslat-icon {
    width: 33.72px;
    aspect-ratio: 56.2 / 54.01;
    margin-right: -3.5px;
    background: url("../assets/icons/arrow-tenka.svg") no-repeat center / contain;
  }
  .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,
  .btn--display .story__cta-icon img,
  .btn--display .ucet__odeslat-icon img { display: none; }
  /* „Vybrat oleje“ na vlastní sadě míří dolů – otáčí se teď políčko,
     ne schovaný obrázek. */
  .buy__submit--dolu .buy__submit-icon { transform: rotate(90deg); }
  .hero__cta::after,
  .reviews__cta-btn--sekundarni::after {
    width: 33.72px;
    height: 32.41px;
    margin-right: -3.5px;
    background-image: url("../assets/icons/arrow-tenka.svg");
  }

  /* ---- Počítadlo kusů (detail produktu, dlaždice vlastní sady) ----
     Návrh: 144 × 48, tři pole po 48 (černé, bílé, černé) a kolem
     rámeček 1 px border/strong, který odděluje bílé pole s číslem od
     bílé stránky – webu chyběl. Rámeček leží nad poli (jako vnitřní
     tah ve Figmě), takže pole zůstávají 48 × 48. Ikony jsou Material
     „remove“ a „add_2“ v rámečku 24: čára 14 × 2 (u plusu dvě), bílé.
     Dřív tu byl znak „−“/„+“ tučným písmem. */
  .qty { position: relative; }
  .qty::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--c-black);
    pointer-events: none;
  }
  .qty__btn { position: relative; color: var(--c-white); }
  .qty__btn > span { display: none; }
  .qty__btn::before,
  .qty__btn[data-step="1"]::after,
  .qty__btn[data-krok="1"]::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 14px; height: 2px;
    margin: -1px 0 0 -7px;
    background: currentColor;
  }
  .qty__btn[data-step="1"]::after,
  .qty__btn[data-krok="1"]::after { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
  .qty__input { font-size: 16px; font-weight: 700; }

  /* Dlaždice vlastní sady: počítadlo přes celou šířku dlaždice (její
     odsazení zůstává) – roztahuje se pole s číslem, „−“ a „+“ drží
     48 × 48. Cedulka „sada je plná“ má rozměry počítadla, takže jde
     taky přes celou šířku. */
  .sada-karta__qty { width: 100%; }   /* .qty { width: 144px } z detailu ji dřív držel na 144 i na širším telefonu */
  .sada-karta__qty .qty__input { flex: 1 1 auto; width: auto; }

  /* ---- Vlastní sada: lišta až s první lahvičkou ----
     Dokud v krabici nic není, lišta „Vaše sada · 0 / 4“ jen zabírala
     spodek obrazovky. Ukáže se s první lahvičkou a vyjede zespodu;
     třídu bez-vyberu dává initSadaNaMiru (bez javascriptu lišta
     zůstane, jak byla). */
  .sada__telo.bez-vyberu .sada-panel { display: none; }
  @keyframes sada-panel-vyjede {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .sada-panel { animation: sada-panel-vyjede var(--t-lista, .32s) var(--e-lista, ease); }

  /* ---- Hotová sada: plachta s detailem oleje ----
     Stejná plachta jako u vlastní sady (styly .sada-okno výš), dole
     místo přidávání odkaz na celý detail oleje. */
  .sada--hotova .sada-okno__paticka { padding-top: 20px; }
  .sada-okno__detail { margin: 0; font-weight: 400; }

  /* ---- Košík: počítadlo, křížek, štítky ----
     Počítadlo (ADD/REMOVE, 96 × 32): tři pole po 32 a nad nimi bílý
     rámeček 1 px. Dřív zůstala z desktopu mřížka 1fr 38px 1fr, do které
     se pole po 32 nevešla – „+“ vyjíždělo o 6 px za rámeček. Ikony
     Material „remove“/„add_2“ v rámečku 20: čára 11,67 × 1,67.
     Křížek: Material „close“ 24 – ramena 14 × 14 s tahem 2, tedy čára
     19,8 px (dřív 30 px). Štítky slev 8 px pod názvem (název je oříznutý
     na verzálky). */
  .kosik-pocet {
    position: relative;
    grid-template-columns: repeat(3, 32px);
    border: 0;
  }
  .kosik-pocet::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--c-white);
    pointer-events: none;
  }
  .kosik-pocet__tlacitko,
  .kosik-pocet__cislo { height: 32px; }
  .kosik-pocet__tlacitko { position: relative; font-size: 0; }
  .kosik-pocet__tlacitko::before,
  .kosik-pocet__tlacitko.js-kosik-plus::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 11.67px; height: 1.67px;
    transform: translate(-50%, -50%);
    background: var(--c-white);
  }
  .kosik-pocet__tlacitko.js-kosik-plus::after { width: 1.67px; height: 11.67px; }
  /* Křížek je v toku hlavičky (position: relative), takže dřívější
     `right: 8px` ho neposouval ke kraji, ale o 8 px dovnitř – ikona
     stála 24 px od hrany místo 16. Políčko 40 na střed ikony 24 tedy
     přesahuje odsazení hlavičky o 8 px. */
  .kosik-panel__zavrit {
    --zavrit-cara: 19.8px;
    --zavrit-sila: 2px;
    right: auto;
    margin-right: -8px;
  }
  /* Štítky slev: 8 pod verzálkami názvu, mezi sebou 8; štítek 16 px
     (Badge 12 Bold oříznutý na verzálky + odsazení 4). Dřív zbyly
     z desktopu záporný spodní okraj názvu a mezera 6, takže štítek
     seděl 1,8 px pod názvem. */
  .kosik-polozka__nazev { margin-bottom: 0; }
  .kosik-polozka__stitky { gap: 8px; margin-top: 8px; }
  .kosik-stitek {
    padding: 4px;
    font-size: 12px;
    line-height: 1.3;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }

  /* ---- Připnutá hlavička: zůstává horní lišta s košíkem ----
     Do teď po zarolování odjel bílý pruh s logem a košíkem a zůstala
     šedá lišta kategorií. Karta chce opak: pruh s ikonou košíku zůstává
     (61 px), lišta kategorií zajede pod něj. Hlavička je fixní a tělo
     má pořád stejné odsazení, takže obsah neposkočí; s ní se mění
     i --header-pripnuta-h, od které počítají odskok kotvy. */
  :root { --header-pripnuta-h: 61px; }
  /* Lišta kategorií zajede pod bílý pruh (ten leží nad ní a má
     v připnutém stavu vlastní bílý podklad – na detailu je hlavička
     jinak průhledná), hlavička se přitom zkrátí na 61. */
  .header { transition: height var(--t-lista, .32s) var(--e-lista, ease); }
  .header.is-pripnuta { height: 61px; transform: none; }
  /* Bílý podklad pruhu přes celou šířku – .header__inner má okraje
     20 px a lišta kategorií by vedle něj vykukovala. */
  .header__inner { position: relative; z-index: 2; }
  .header.is-pripnuta::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    z-index: 1;
    height: 61px;
    background: var(--c-white);
    pointer-events: none;
  }
  /* Schovaná lišta je po dojetí i neviditelná, aby se pod bílým pruhem
     nedalo omylem ťuknout na kategorii vedle loga. */
  .kat-lista { transition: transform var(--t-lista, .32s) var(--e-lista, ease), visibility 0s; }
  .header.is-pripnuta .kat-lista {
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--t-lista, .32s) var(--e-lista, ease), visibility 0s linear var(--t-lista, .32s);
  }
  @media (prefers-reduced-motion: reduce) {
    .header,
    .kat-lista { transition: none; }
  }

  /* ---------------------------------------------------------------
     TRELLO „Maxim Desktop Review“ – zbytek (2. 11. 2026)
     --------------------------------------------------------------- */

  /* Loga u platební brány: na telefonu se vedle názvu nevejdou,
     stojí pod popiskem (mobilní Figma je u brány ještě nemá). */
  .checkout-option__body--brana {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titulek" "popis" "loga";
  }
  .checkout-option__body--brana .checkout-option__loga { margin-top: 12px; }

  /* Karta produktu – spodek ve sloupci na celém telefonu (Trello
     „Mobil / Product Card“: „u mě na mobilu stále jinej layout toho
     spodku“). Mobilní uspořádání (název, objem, dostupnost; pod tím
     cena a košík, bez svislé linky) platilo jen do 400 px (style.css).
     Telefon 1080 px s hustotou 2,625 má ale 411 CSS px, a tak dostal
     desktopový řádek se třemi sloupci a linkou. Teď platí do 767 px. */
  .product__info { flex-direction: column; align-items: stretch; }
  .product__actions { align-self: stretch; justify-content: space-between; }
  .product__divider { display: none; }
  .product__prices { flex-direction: row; align-items: baseline; gap: 8px; }

  /* Plachta oleje u vlastní i hotové sady (bottom sheet) – vyjede
     zespodu a při zavření zase sjede (Trello „Mobil / Frontend /
     Bottom sheet“). Podklad se prolíná, panel jen jede – na desktopu
     zůstává prolnutí celého okna. Skrytí odkládá js/main.js
     (vp_okno_skryj), dokud panel nedojede. */
  .sada-okno { opacity: 1; transition: none; }
  .sada-okno__podklad { opacity: 0; transition: opacity var(--t-lista, .32s) var(--e-lista, ease); }
  .sada-okno.is-videt .sada-okno__podklad { opacity: 1; }
  .sada-okno__panel { transform: translateY(100%); transition: transform var(--t-lista, .32s) var(--e-lista, ease); }
  .sada-okno.is-videt .sada-okno__panel { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .sada-okno__podklad,
    .sada-okno__panel { transition: none; }
  }
  /* „Tento olej už máte v sadě“ a kolečka obsazenosti pod ním se
     dotýkaly (obojí má na telefonu margin-top 0). Mezera 16 jako mezi
     týmiž řádky v okně na desktopu. */
  .sada-okno__vsade:not([hidden]) + .sada-okno__mista { margin-top: 16px; }

  /* ---- Detail: hero jako slider s pruhem fotek (2. 11. 2026) ----
     Má-li produkt obsahové fotky, je celé hero (gradient, duch s názvem,
     lahev) první snímek a fotky z galerie další. Posouvá se tažením
     prstem nebo klepnutím na náhled, šipky nejsou. Posun drží jedna
     proměnná --hero-x (px, nastavuje initHeroSlider v js/main.js);
     posouvá se vlastností `translate`, protože duch má vlastní
     `transform` na vystředění. .phero má overflow: hidden, snímky mimo
     se tedy ořežou.
       – .phero__slider: pás fotek, nad gradientem a duchem (z 0, za nimi
         v pořadí), pod obsahem hera (.phero__inner má z 1) – pruh
         náhledů tak do fotky zajíždí stejně jako do gradientu;
       – .phero__tah: průhledná plocha na tažení přes celé hero až po
         horní hranu pruhu náhledů (ten do bloku zajíždí 24 px + 2 px
         na obrys), takže náhledy zůstávají klikatelné. Kryje i lahev –
         zvětšení lightboxem na telefonu není. */
  .phero { --hero-x: 0px; }
  .phero__slider,
  .phero__tah {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--header-h) + var(--foto-top));
  }
  .phero__slider { z-index: 0; height: var(--foto-blok); pointer-events: none; }
  .phero__tah {
    z-index: 2;
    height: calc(var(--foto-blok) - 26px);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .phero__slajdy {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .phero__slajd { flex: 0 0 100%; height: 100%; background: var(--c-produkt-pozadi, #ededed); }
  .phero__slajd img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* Loga ocenění a BIO přes fotku (.awards s jedním nebo dvěma logy)
     patří k lahvi, ne ke slideru – jezdí s prvním snímkem a s ním
     i odjedou za okraj, takže přes fotky z galerie nejsou (8. 11. 2026).
     Tři a víc log stojí v řádku pod perexem a nehýbou se. */
  .phero--slider::before,
  .phero--slider .phero__ghost,
  .phero--slider .phero__media,
  .phero--slider .awards:not(:has(li:nth-child(3))),
  .phero--slider .phero__slajdy {
    translate: var(--hero-x) 0;
    transition: translate .35s cubic-bezier(.2, .8, .2, 1);
  }
  .phero--slider.je-tazeno::before,
  .phero--slider.je-tazeno .phero__ghost,
  .phero--slider.je-tazeno .phero__media,
  .phero--slider.je-tazeno .awards:not(:has(li:nth-child(3))),
  .phero--slider.je-tazeno .phero__slajdy { transition: none; }
  @media (prefers-reduced-motion: reduce) {
    .phero--slider::before,
    .phero--slider .phero__ghost,
    .phero--slider .phero__media,
    .phero--slider .awards:not(:has(li:nth-child(3))),
    .phero--slider .phero__slajdy { transition: none; }
  }
}

/* Nízké displeje: stejná pojistka jako ve style.css – kategorie 64 px by
   pět řádků protáhly do scrollu. Musí stát až za mobilním blokem, který
   velikost z návrhu nastavuje.
   Jen kategorie: doplňkové (O nás, Blog, Recepty) a právní odkazy mají
   taky třídu .menu-vysouvaci-odkaz a dřív tu dostaly 52 px místo 20/16 –
   na iPhonu, kde má Safari s lištami okno nižší než 740 px (8. 11. 2026). */
@media (max-width: 767px) and (max-height: 740px) {
  .menu-vysouvaci-odkaz:not(.menu-vysouvaci-odkaz--doplnkovy, .menu-vysouvaci-odkaz--pravni) {
    font-size: 52px;
    line-height: 46px;
  }
}

/* =========================================================================
   TRELLO „Maxim Mobil Feedback“ (3. 11. 2026)
   ========================================================================= */
@media (max-width: 767px) {

  /* LP / hero bez zaoblení. */
  .hero__media { border-radius: 0; }

  /* Karta produktu (Figma Mobil / Product Card → Product / Info):
     odsazení 10, mezi řádky (název+objem, recenze, dostupnost, cena)
     všude 8. Košík dřív stál v řádku s cenou a svou výškou 28 px
     roztahoval mezeru nad cenou na 17 px – teď visí vpravo dole mimo
     tok, takže cena je 8 pod dostupností jako ostatní řádky. */
  .product__info { padding: 10px; gap: 8px; }
  .product__actions { position: relative; }
  .product__prices { padding-right: 36px; }
  .product__actions > .product__cart { position: absolute; right: 0; bottom: 0; }

  /* LP / karta sady přes celý sloupec (Figma 10236:3065): název a
     objem v jednom řádku, recenze vpravo na tomtéž řádku, pod tím
     dostupnost a cena s košíkem. */
  .products--sady .product__col {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
  }
  .products--sady .product__volume { margin-top: 0; }
  .products--sady .product .product__hodnoceni { margin-left: auto; }
  .products--sady .product__stock { flex: 0 0 100%; }

  /* LP / CTA „VÍCE NA HEUREKA“ blíž k recenzím – stejně jako mezi
     pásem recenzí a šipkami (24). */
  .reviews__cta { margin-top: 24px; }

  /* LP / Jak vznikají naše oleje: šipky pod sliderem odsazené jako
     u recenzí (24 místo 16). */
  .process__nav { margin-top: 24px; }

  /* LP / Jak vznikají naše oleje: nová fotka chleba s olejem (příloha
     karty, olej-chleba.png → drip-mobil.webp, 1672 × 941 jako stará).
     Je už ve správné poloze – stará drip.webp se kvůli tomu otáčela
     o 180°, tahle ne. Výřez ukazuje vlnu s chlebem a pod ní plnou žlutou;
     desktop zůstává u drip.webp. */
  .process__drip {
    background-image: url("../assets/images/drip-mobil.webp");
    background-position: 50% -100px;
    transform: none;
  }

  /* Detail / štítky zarovnané k levé hraně názvu: obal spravovaných
     tagů dostával z pravidla `.phero__badges > *` vlastní odsazení
     6 px, a tak první štítek začínal o 6 px vpravo od nadpisu. */
  .phero__badges > .js-detail-tagy { display: contents; }

  /* Detail / produkt bez variant: sleva je už v odznaku „Akce −N %“
     u názvu, druhý štítek nad cenou se nevypisuje. */
  .buy__sleva--sama { display: none; }

  /* Detail / primární tlačítko ve žluté verzi (vyprodané zůstává bílé). */
  .buy__submit:not(:disabled) { background: var(--c-yellow); }

  /* Košík / původní (nezlevněná) cena 16 px. */
  .kosik-polozka__cena-puvodni { font-size: 16px; }
}

/* =========================================================================
   TRELLO „Mobil / Product Detail Page / accordion … při rozbalení se
   změní gap mezi headline a textem a text pak poskakuje“ (3. 11. 2026)
   ========================================================================= */
@media (max-width: 767px) {
  /* Sbalená sekce PROČ… vypíná kvůli ořezu na dva řádky text-box-trim
     a nahrazuje ho zápornými okraji (style.css). Ty ale přepsaly i horní
     odstup 24 pod nadpisem, a tak sbalený text stál o 24 px výš než
     rozbalený a při rozklepnutí poskočil dolů. Horní okraj je teď 24 px
     mínus prostor nad verzálkami (4,86 px u 16/22,4), spodní tak, aby
     sekce končila na účaří jako rozbalená – změřeno v prohlížeči. */
  .why.is-sbaleno .why__text { margin: calc(24px - 0.30375em) 0 -0.396em; }
}

/* =========================================================================
   TRELLO „Mobil / sekundární lišta s kolekcemi – dát ji pod hlavní lištu
   ve smyslu z-indexu, aby při vyjíždění jela zespod hlavní lišty“
   (3. 11. 2026)
   ========================================================================= */
@media (max-width: 767px) {
  /* Bílý podklad pod pruhem s logem (.header.is-pripnuta::before) zmizí
     hned, jak se třída is-pripnuta sundá – lišta kategorií pak sjížděla
     přes průhledný pruh a kreslila se přes logo a košík. Lišta se teď
     ořezává spolu s posunem: clip-path schová přesně tu část, která je
     nad svou výchozí polohou (nad spodní hranou hlavního pruhu). Obojí
     běží se stejnou délkou a křivkou, takže lišta vyjíždí zpod pruhu
     a stejně pod něj i zajíždí, ať je pruh bílý, nebo průhledný. */
  .kat-lista {
    clip-path: inset(0);
    transition:
      transform var(--t-lista, .32s) var(--e-lista, ease),
      clip-path var(--t-lista, .32s) var(--e-lista, ease),
      visibility 0s;
  }
  .header.is-pripnuta .kat-lista {
    clip-path: inset(100% 0 0 0);
    transition:
      transform var(--t-lista, .32s) var(--e-lista, ease),
      clip-path var(--t-lista, .32s) var(--e-lista, ease),
      visibility 0s linear var(--t-lista, .32s);
  }
  @media (prefers-reduced-motion: reduce) {
    .kat-lista,
    .header.is-pripnuta .kat-lista { transition: none; }
  }
}

/* =========================================================================
   TRELLO 4. 11. 2026 – výroba a košík
   ========================================================================= */
@media (max-width: 767px) {
  /* LP / Jak vznikají naše oleje: pod šipkami stejně místa jako nad nimi
     (24). Šipky mají napevno výšku 24 s box-sizing: border-box, takže
     jejich spodní odsazení se „vešlo dovnitř“ a pod šipkami zbývalo 12.
     Místo nese teď sekce sama – žlutá (absolutní .process__bg) sahá až
     k její spodní hraně. */
  .process__nav { padding-bottom: 0; }
  .process { padding-bottom: 24px; }

  /* Košík / název položky: text-box-trim na odkazu spolu s ořezem na dva
     řádky (overflow: hidden) usekával háčky a čárky (TMAVA HORCICE).
     Ořez zůstává, jen se oblast, kterou overflow ořezává, roztáhne
     vnitřním odsazením nahoru i dolů a záporný okraj ho vyrovná –
     posazení textu se nemění. Odsazení zároveň zvětší plochu pro ťuknutí:
     ořezaný odkaz byl vysoký jen na verzálky. */
  .kosik-polozka__nazev > a {
    padding-block: 0.35em;
    margin-block: -0.35em;
  }
}

/* Fotka položky v košíku je odkaz na detail (libs/panel-kosik-obsah.php). */
a.kosik-polozka__foto { display: block; color: inherit; }

/* =========================================================================
   TRELLO „Detail product Page / zmenšit gap mezi sekcí RECEPTY a JAK
   VZNIKAJÍ NAŠE OLEJE na polovinu“ (4. 11. 2026)
   -------------------------------------------------------------------------
   Jen telefon – na příloze je mobilní detail, kde recepty stojí nad
   procesem (na desktopu je pořadí obrácené, viz order výš).

   Mezera od spodní hrany šipek receptů k prvnímu viditelnému bodu fotky
   (stín nad chlebem) byla 98 px: 40 margin sekce + 58 průhledného horního
   okraje drip-mobil.webp ve výřezu. Teď 49:
   – margin sekce 12 (40 → 12). Míň ne: šipky mají dotykovou plochu
     48 px (::after), která přečuhuje 12 px pod ně, a sekce procesu
     (nadpis má z-index 1) by jim ji jinak přikryla.
   – výřez fotky začíná o 21 px níž (pozice −100 → −121), pruh je o 21 px
     nižší a nadpis o 21 px výš. Uříznuté řádky jsou úplně průhledné
     (alfa 0 až do 35. řádku výřezu), takže se na kapce ani chlebu nic
     nemění a všechno pod vlnou jen popojede o 49 px nahoru.
   Záporný margin se nepoužil ze stejného důvodu: průhledný okraj sekce
   by ležel přes šipky receptů a bral by jim kliknutí.
   ========================================================================= */
@media (max-width: 767px) {
  .page-detail .process { margin-top: 12px; }
  .page-detail .process__drip {
    height: 178px;                     /* 199 − 21 */
    background-position: 50% -121px;   /* −100 − 21 */
  }
  .page-detail .process__title { padding-top: 202px; }   /* 223 − 21 */
}

/* =========================================================================
   Mobil / úvodní stránka – box „Sestavte si vlastní sadu“ (10. 11. 2026)
   Podle obrázku od Míry: nahoře nadpis, pod ním scéna s krabicí a dole
   v jednom řádku perex vlevo a tlačítko CHCI SVOJI SADU vpravo, na svislý
   střed. Box je proto mřížka o dvou sloupcích (text | tlačítko), nadpis
   a scéna jdou přes oba. Perex v užším sloupci Body 14 / 1,4, aby se
   vešel na dva řádky. Tlačítko je stejné jako ODESLAT v patičce
   (vzhled ve style.css), 4 px vpravo a dole drží místo pro stín.
   ========================================================================= */
@media (max-width: 767px) {
  .products--sady .box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: center;
  }
  .products--sady .box__title { grid-area: 1 / 1 / 2 / 3; }
  .products--sady .box__scene { grid-area: 2 / 1 / 3 / 3; }
  .products--sady .box__perex {
    grid-area: 3 / 1 / 4 / 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
  }
  .products--sady .box .btn--compact {
    grid-area: 3 / 2 / 4 / 3;
    align-self: center;
    margin: 0 4px 4px 0;
  }
}
/* Na úzkých telefonech (320–359 px) by perex vedle tlačítka měl po
   dvou slovech na řádek – tam jde tlačítko pod něj, zarovnané vlevo. */
@media (max-width: 359px) {
  .products--sady .box__perex { grid-area: 3 / 1 / 4 / 3; }
  .products--sady .box .btn--compact { grid-area: 4 / 1 / 5 / 3; justify-self: start; margin-top: 16px; }
}

/* =========================================================================
   Mobil / úvodní stránka – vybraná sada vedle „Sestavte si vlastní sadu“
   (10. 11. 2026): místo studiového snímku (files/produkty/vypis/) hero
   fotka sady z administrace (files/produkty/<ID>.avif) i s uloženým
   stínem, jako v heru detailu. Řada lahviček stojí dole uprostřed
   šedé plochy, nad ní zůstává místo pro odznaky.
   ========================================================================= */
@media (max-width: 767px) {
  .products--sady .product__media:has(> .product__hero) > .product__snimek { display: none; }
  .products--sady .product__hero {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 7%;
  }
  .products--sady .product__hero-foto { position: relative; display: block; width: 74%; }
  .products--sady .product__hero-foto img { display: block; width: 100%; height: auto; }
}