/* ===== Real Meal — token layer =====================================
   Struktura je převzatá z produkčního obchodu Pod dřezem: stejné názvy
   proměnných, stejné role, stejná dvojice palet. Mění se hodnoty, ne
   architektura — komponentní vrstva pod tímhle blokem díky tomu platí beze
   změny.

   Poměry kontrastu v komentářích jsou spočítané podle WCAG 2.1.
   ================================================================== */

/* --- fonts --- */
/* Tři písma, tři úkoly. Bebas: prohlášení a názvy produktů, vždy verzálky.
   Cormorant kurzíva: nadpis sekce, nikdy víc než jeden na obrazovku.
   DM Sans: všechno ostatní včetně čísel (tabulkové číslice).
   Načítají se z Google Fonts v head.tpl. Před ostrým provozem nahradit
   vlastním @font-face s woff2. */

:root {
  /* tisk / obal */
  --font-display: "Bebas Neue", Anton, Impact, sans-serif;
  --font-text: "DM Sans", system-ui, -apple-system, sans-serif;
  /* Role „mono" tu drží čísla a verzálkové popisky. Real Meal nemá strojopis —
     obojí nese DM Sans s tabulkovými číslicemi. Název proměnné zůstává, aby
     komponentní vrstva nepotřebovala zásah. */
  --font-mono: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  /* obrazovka */
  --font-screen: "DM Sans", system-ui, -apple-system, sans-serif;
}

/* --- colors --- */
/* Real Meal — jedna identita ve dvou kontextech.
   Paper = tisk, obal, etiketa. Shelf = obrazovka (e-shop, app, e-mail).
   Rozdíl je v podkladu a v tom, co smí být plocha a co písmeno.

   Značková zelená #7cc93c je VÝHRADNĚ plocha. Proti bílé má 2,04 : 1,
   takže z ní nikdy nesmí být text na světlém. Text na zelené ploše je
   inkoust (8,52 : 1), ne bílá. Zelená jako písmeno má vlastní odstín
   #3f7a1e (4,86 : 1 na krémové). */

:root {
  /* ---- Paper palette (tisk a obal) ---- */
  --paper: #FAF6F0;        /* Krém — hlavní podklad všeho */
  --chalk: #F3EFE8;        /* Pole — druhotné plochy, pruhy */
  --white: #FFFFFF;        /* Bílá — karty a panely nad krémem */
  --ink: #1A1A1A;          /* Inkoust — text, tmavé plochy */
  --stone: #5F5F5A;        /* Kámen — druhotný text, popisky (5,96 : 1) */
  --clay: #7CC93C;         /* Zelená — jediný značkový akcent: plochy, čísla */
  --rust: #3F7A1E;         /* Zelená jako písmeno — drobný text a odkazy */
  --moss: #3F7A1E;         /* Systém — skladem, potvrzeno */
  --rule: #E8E2D8;         /* Linka — rámy, oddělovače */
  --clay-light: #E8A882;   /* Meruňková — akcent na tmavém podkladu */

  /* ---- Shelf palette (obrazovka) ---- */
  /* Zelená jako písmeno: jednotková cena a „nejlevnější v řadě". Nic jiného —
     řádek „skladem" je inkoustový (viz .rm-detail .rm-stock-line .rm-stock
     a poznámka u --tertiary), aby ten jeden signál u ceny nezředil. */
  --shelf-green: #3F7A1E;
  --shelf-green-soft: #EEF7E4;   /* podklad pod tím signálem */
  --shelf-raspberry: #C8324F;    /* VÝHRADNĚ slevové štítky */
  --shelf-blue: #3F7A1E;         /* odkazy a interaktivní prvky */
  --shelf-surface: #F3EFE8;      /* podklad za fotkou produktu, teplý */
  --shelf-text: #1A1A1A;         /* inkoust, sedí s fotkami jídla */
  /* Plocha primárního tlačítka a zelený proužek. Nikdy písmeno. */
  --shelf-green-area: #7CC93C;
  --shelf-green-area-hover: #6DB532;
  --shelf-green-black: #0D2A00;  /* patička a tmavé pruhy */
  --shelf-green-deep: #1E3010;

  /* ---- Semantické aliasy: kontext paper (výchozí) ---- */
  --bg-page: var(--paper);
  --bg-band: var(--chalk);
  --surface-card: var(--white);
  --text-body: var(--ink);
  --text-muted: var(--stone);
  --text-accent: var(--rust);
  --text-on-dark: var(--paper);
  --accent-area: var(--clay);
  --accent-on-dark: var(--clay-light);
  --border-hairline: var(--rule);
  /* --border-hairline je dekorace. Okraj, který JE ovládacím prvkem
     (pole, obrysové tlačítko), potřebuje podle WCAG 1.4.11 3 : 1.

     Ztmaveno z #968D80: to mělo 3,27 : 1 na bílé a 3,04 : 1 na krému, ale na
     pískovém pruhu (--shelf-surface #F3EFE8) jen 2,85 : 1 — pod prahem. Byla
     to jediná dvojice z vlastní palety, která neprošla; stačilo dát pole
     formuláře na pruh a pravidlo padlo.

     #8E8476 drží tentýž tón i sytost, jen je tmavší:
       bílá 3,68 : 1 · krém 3,41 : 1 · písek 3,21 : 1
     Zůstává světlejší než --text-muted (#5F5F5A, 5,60 : 1 na písku), takže
     hrana nepřebíjí text, který ohraničuje. */
  --border-control: #8E8476;
  --border-strong: var(--ink);
  --status-ok: var(--moss);
  --link: var(--rust);
  --link-hover: var(--ink);
  --btn-fill: var(--clay);
  --btn-fill-hover: #6DB532;
  /* Hrana plného tlačítka. Plocha #7CC93C má proti bílé kartě 2,04 : 1,
     proti krému 1,90 : 1 a proti písku 1,78 : 1 — ovládací prvek se podle
     WCAG 1.4.11 musí dát najít na 3 : 1. Plochu neměníme (je značková),
     hranu nese písmenková zelená #3F7A1E: 5,23 / 4,86 / 4,56 : 1. */
  --btn-fill-edge: var(--rust);
  --btn-text: var(--ink);
  --focus-ring: var(--rust);
  --sale: var(--shelf-raspberry);
}

/* --tertiary SE ZÁMĚRNĚ NEDEFINUJE.
   -------------------------------------------------------------------------
   theme.css ji čte na 83 místech (`a`, `.btn-primary`, `#product-availability`,
   `:root { --primary: var(--tertiary) }` …) a nikde ji nenastavuje. Vypadá to
   jako opomenutí, ale je to nosný mechanismus: nedefinovaná proměnná bez
   záložní hodnoty shodí celou deklaraci, takže se barvy zděděného tématu
   NEPROJEVÍ a vyhraje pravidlo z realmeal.css.

   Zkusil jsem ji 21. 9. dodefinovat jako „pojistku" proti deklaracím padajícím
   na počáteční hodnotu. Ověřoval jsem to ale jen na úvodní stránce a pokladně
   (0 změn z 131 a z 356) a přehlédl detail produktu. Oživilo to dvě spící
   deklarace a obě porušily pravidlo, že #3F7A1E na obrazovce znamená jedinou
   věc, cenu za jednotku:
     · #product-availability → řádek „Skladem 95 ks" i tečka zezelenaly
       (mají být inkoustové, viz .rm-detail .rm-stock-line .rm-stock)
     · .page-link → odkazy stránkování v kategorii zezelenaly

   Kdo to bude chtít znovu, musí napřed projít VŠECHNY typy stránek, ne dvě.
   Případy, kdy deklarace opravdu spadne na počáteční hodnotu a je to vidět,
   se řeší adresně — viz tlačítko „Objednat" v bloku pokladny. */

/* Kontext obrazovky. Na kořen e-shopu patří data-palette="shelf". */
[data-palette="shelf"] {
  --bg-page: var(--paper);
  --bg-band: var(--shelf-surface);
  --surface-card: var(--white);
  --text-body: var(--shelf-text);
  --text-muted: #5F5F5A;
  --text-accent: var(--shelf-green);
  --text-on-dark: var(--paper);
  --accent-area: var(--shelf-green-area);
  --accent-on-dark: var(--shelf-green-area);
  --border-hairline: #E8E2D8;
  --border-strong: var(--shelf-text);
  --status-ok: var(--shelf-green);
  --link: var(--shelf-blue);
  --link-hover: var(--shelf-green-deep);
  /* Plocha je světle zelená, písmeno na ní inkoust — 8,52 : 1. */
  --btn-fill: var(--shelf-green-area);
  --btn-fill-hover: var(--shelf-green-area-hover);
  --btn-fill-edge: var(--shelf-green);
  --btn-text: var(--ink);
  --focus-ring: var(--shelf-green);
  --sale: var(--shelf-raspberry);
}

/* --- typography --- */
/* Stupnice z brand booku: velikost / prokládání / řez / prostrkání.
   Oproti Pod dřezem jsou display a nadpisy větší: Bebas je úzké a
   verzálkové, ve stejné velikosti by působilo drobněji. */
:root {
  --ts-display-size: 72px;   --ts-display-lh: 0.88;  --ts-display-weight: 400;  --ts-display-track: -0.01em;
  --ts-h1-size: 44px;        --ts-h1-lh: 1.06;       --ts-h1-weight: 400;       --ts-h1-track: -0.02em;
  --ts-h2-size: 32px;        --ts-h2-lh: 1.12;       --ts-h2-weight: 400;       --ts-h2-track: -0.015em;
  --ts-h3-size: 18px;        --ts-h3-lh: 1.3;        --ts-h3-weight: 600;       --ts-h3-track: -0.01em;
  --ts-lead-size: 17px;      --ts-lead-lh: 1.55;     --ts-lead-weight: 400;     --ts-lead-track: 0;
  --ts-body-size: 15px;      --ts-body-lh: 1.55;     --ts-body-weight: 400;     --ts-body-track: 0;
  --ts-small-size: 13px;     --ts-small-lh: 1.5;     --ts-small-weight: 400;    --ts-small-track: 0;
  --ts-label-size: 11px;     --ts-label-lh: 1.4;     --ts-label-weight: 600;    --ts-label-track: 0.08em;
  --ts-price-size: 26px;     --ts-price-lh: 1.0;     --ts-price-weight: 600;    --ts-price-track: -0.02em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --weight-black: 700;

  /* Prostrkání verzálkových popisků je všude 0,08em. Ne 0,1, ne 0,16. */
  --tracking-claim: 0.08em;
  --numeric-table: tabular-nums;
}

/* Utility třídy: stupnice z brand booku, připravená k použití. */
.t-display { font-family: var(--font-display); font-size: var(--ts-display-size); line-height: var(--ts-display-lh); font-weight: var(--ts-display-weight); letter-spacing: var(--ts-display-track); text-transform: uppercase; }
.t-h1 { font-family: var(--font-serif); font-style: italic; font-size: var(--ts-h1-size); line-height: var(--ts-h1-lh); font-weight: var(--ts-h1-weight); letter-spacing: var(--ts-h1-track); }
.t-h2 { font-family: var(--font-serif); font-style: italic; font-size: var(--ts-h2-size); line-height: var(--ts-h2-lh); font-weight: var(--ts-h2-weight); letter-spacing: var(--ts-h2-track); }
.t-h3 { font-family: var(--font-screen); font-size: var(--ts-h3-size); line-height: var(--ts-h3-lh); font-weight: var(--ts-h3-weight); letter-spacing: var(--ts-h3-track); }
.t-lead { font-family: var(--font-text); font-size: var(--ts-lead-size); line-height: var(--ts-lead-lh); font-weight: 400; }
.t-body { font-family: var(--font-text); font-size: var(--ts-body-size); line-height: var(--ts-body-lh); font-weight: 400; }
.t-small { font-family: var(--font-text); font-size: var(--ts-small-size); line-height: var(--ts-small-lh); font-weight: 400; }
.t-label { font-family: var(--font-mono); font-size: var(--ts-label-size); line-height: var(--ts-label-lh); font-weight: var(--ts-label-weight); letter-spacing: var(--ts-label-track); text-transform: uppercase; }
.t-price { font-family: var(--font-mono); font-size: var(--ts-price-size); line-height: var(--ts-price-lh); font-weight: var(--ts-price-weight); letter-spacing: var(--ts-price-track); font-variant-numeric: tabular-nums; }
.t-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Název produktu — Bebas, verzálky. Platí na dlaždici i v košíku. */
.t-product { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; }

/* --- spacing --- */
/* Základ 4 px, žádné ozdobné mezistupně. */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --gutter-page: var(--sp-6);
  --gutter-page-lg: var(--sp-12);
  --measure-text: 62ch;   /* sloupec textu */
  --measure-lead: 48ch;
  --container: 1240px;
  --grid-gap: var(--sp-4);

  --logo-clearspace: 1em;
}

/* --- effects --- */
:root {
  /* Rohy: Real Meal má měkký tvar. Pod dřezem řezal papír, tohle je etiketa. */
  --radius-0: 0px;
  --radius-1: 12px;     /* výchozí: pole, panely */
  --radius-2: 8px;      /* čipy, drobné štítky */
  --radius-card: 20px;  /* karta produktu, panel */
  --radius-pill: 9999px;

  --border-1: 1px;
  --border-2: 2px;
  --stroke-logo: 2.1px;

  /* Stín jen tam, co se vznáší nad stránkou. */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px -12px rgba(26, 26, 26, 0.16);
  --shadow-raised: 0 2px 4px rgba(26, 26, 26, 0.05), 0 18px 40px -18px rgba(26, 26, 26, 0.26);
  --shadow-overlay: 0 24px 64px -32px rgba(13, 42, 0, 0.4);
  --shadow-focus: 0 0 0 3px var(--shelf-green-soft);

  /* Pohyb: krátký, bez odskoku. */
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 620ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- base --- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--ts-body-size);
  line-height: var(--ts-body-lh);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-screen);
  font-variant-numeric: tabular-nums;
}
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--sp-6) 0; }
::selection { background: var(--shelf-green-area); color: var(--shelf-green-black); }

/* ============================================================================
   Real Meal — komponenty obchodu
   Postaveno podle handoffu 03-templates.md §3.5 a 04-unit-price.md §4.1.
   Hodnoty jsou z tokens.css, ne z prototypů — tak to handoff žádá.

   ODCHYLKA OD HANDOFFU: handoff počítá s child theme `realmeal` nad `classic`
   a SCSS buildem. Na tomhle serveru je PrestaShop 1.7.7.5 a jediné téma
   `drogerie` bez rodiče, takže styly jdou přímo do něj jako prosté CSS.
   Rozhodnuto s klientem; viz ODCHYLKY.md.
   ========================================================================= */

/* --- dlaždice produktu ---------------------------------------------------
   Karta: bílá, 1px #E8E2D8, rádius 2px, padding 16px, gap 12px, BEZ stínu.
   Hover: rámeček → #5F5F5A za 90 ms.
   Na dlaždici jsou nejvýš tři barvy: inkoustový text, zelené pole jednotkové
   ceny a malinový slevový štítek. Nic jiného barvu nedostane. */

.product-miniature .rm-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  /* .product-miniature je řádkový flex, takže karta je flexová položka na
     HLAVNÍ ose — a bez šířky se smrští podle obsahu. Dlaždice s kratším
     názvem jídla proto vyšla užší než sousední: naměřeno 297 px vedle 358,
     na úvodní stránce až pět různých šířek (215 / 241 / 247 / 297 / 358).
     Fotoplocha má aspect-ratio 1/1, takže s šířkou kolísala i výška karty
     (488 až 631 px) a mřížka vypadala rozsypaně. height: 100 % řeší jen
     svislou osu, na vodorovnou nedosáhne. */
  width: 100%;
  padding: 16px;
  background: var(--shelf-white, #FFFFFF);
  border: 1px solid #E8E2D8;
  border-radius: var(--radius-1);
  box-shadow: none;
  transition: border-color 90ms ease-out;
}
.product-miniature .rm-card:hover { border-color: #5F5F5A; }

/* 1) fotoplocha — obrázek se vejde celý, nic se neořezává */
.product-miniature .rm-plate {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--shelf-surface, #F3EFE8);
  border-radius: var(--radius-1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Odkaz kolem fotky nemá vlastní barvu, takže po zapnutí obrazovkové
     palety dědil modrou z obecného pravidla pro <a>. Vidět to není
     (obsahuje jen obrázek), ale v CSS je to čtvrtá barva na dlaždici. */
  color: inherit;
}
.product-miniature .rm-plate img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

/* 2) slevový štítek — jen když sleva opravdu je */
.product-miniature .rm-flag-discount,
.rm-flag-discount {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 7px;
  border-radius: var(--radius-2);
  background: var(--shelf-raspberry, #C8324F);
  color: #FFFFFF;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* 3) značka */
.product-miniature .rm-brand {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5F5F5A;
}

/* 4) název — dva řádky, pevně, aby se karty nerozjely */
.product-miniature .rm-name { margin: 0; }
.product-miniature .rm-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--shelf-text, #1A1A1A);
  text-decoration: none;
  min-height: 2.5em;
}
.product-miniature .rm-name a:hover { color: var(--link-hover); text-decoration: none; }

/* 5) balení */
.product-miniature .rm-pack {
  font-size: 13px;
  line-height: 1.5;
  color: #5F5F5A;
  font-variant-numeric: tabular-nums;
}

/* 6) cena balení */
.product-miniature .rm-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.product-miniature .rm-price__now {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
}
.product-miniature .rm-price__was {
  font-size: 14px;
  color: #5F5F5A;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.product-miniature .rm-price__off {
  font-size: 12px;
  font-weight: 700;
  color: var(--shelf-raspberry, #C8324F);
  font-variant-numeric: tabular-nums;
}

/* 7) jednotková cena — jediné zelené místo na kartě.
      Handoff 04 §4.1: jmenovatel 70 % velikosti a řez 400. */
.rm-unit-price {
  /* Číslo a měna patří k sobě; v plánovači a v souhrnu se lámaly na dva řádky. */
  white-space: nowrap;
  display: block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--shelf-green-soft, #EEF7E4);
  color: var(--shelf-green, #3F7A1E);
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.rm-unit-price__unit {
  /* Jmenovatel („/ 100 g") nesmí klesnout pod 13 px — pravidlo značky. */
  font-size: max(13px, 70%);
  font-weight: 400;
}
.rm-unit-price__flag {
  display: block;
  margin-top: 2px;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* upozornění na levnější balení — na dlaždici tiše, na detailu jako blok */
.product-miniature .rm-cheaper {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5F5F5A;
}

/* 8) sklad — čísla, ne přídavná jména */
.rm-stock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  /* Mech #3F7A1E je barva PAPÍROVÉ palety (tisk, obaly) — ve schváleném
     návrhu e-shopu se nevyskytuje ani jednou, na obrazovku nepatří. Návrh
     navíc na dlaždici žádný řádek se skladem nemá, takže předepsanou barvu
     nemá: text jde do druhotné šedi (tu dlaždice už používá na značku
     a balení), tečka zůstává zelená — zelená na kartě už je, takže
     nepřibývá čtvrtá barva. */
  color: #5F5F5A;
}
.rm-stock--out { color: #5F5F5A; }
.rm-stock--out .rm-stock__dot { background: #5F5F5A; }
.rm-stock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* 9) tlačítko — vždy dole, celá šířka */
.product-miniature .rm-actions { margin-top: auto; }
.product-miniature .rm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--shelf-text, #1A1A1A);
  border-radius: var(--radius-1);
  background: var(--shelf-text, #1A1A1A);
  color: #FFFFFF;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 90ms ease-out, color 90ms ease-out;
}
.product-miniature .rm-btn:hover { background: #1E3010; border-color: #1E3010; color: #FFFFFF; }
.product-miniature .rm-btn[disabled] {
  background: transparent;
  color: #5F5F5A;
  border-color: #D5CEC2;
  cursor: default;
}

/* mřížka výpisu — čtyři v řadě, stejně vysoké karty */
.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.products .product-miniature { display: flex; width: auto; max-width: none; flex: 0 1 auto; padding: 0; margin: 0; }
@media (max-width: 1199px) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .products { grid-template-columns: 1fr; } }

/* Panel s tlačítkem z původního tématu je absolutní a posunutý transformem
   (hover reveal). Karta ho nepoužívá, ale kdyby ho někde zbylo, vrátíme ho do toku. */
.product-miniature .highlighted-informations {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
}

/* RM-BLOK: detail produktu (handoff 03 §3.11, 04 §4.1/§4.4) — zacatek */
/* ============================================================================
   Real Meal — detail produktu
   Patří na konec themes/drogerie/assets/css/realmeal.css (načítá se až za
   stylesheety tématu, takže při stejné specificitě vyhrává).

   Hodnoty jsou z tokenů (reference/tokens/*.css), ne z prototypů.
   Barvy jsou na stránce tři: inkoustový text #1A1A1A, zelené pole jednotkové
   ceny #3F7A1E na #EEF7E4 a malinový slevový štítek #C8324F. Nic jiného barvu
   nedostane — ani odkaz v upozornění na levnější balení (handoff by ho chtěl
   modrý, akceptační kritérium zakázky říká tři barvy; vyhrává kritérium).

   Globální třídy .rm-unit-price, .rm-stock a .rm-stock__dot už v realmeal.css
   jsou. Přebírají se beze změny až na barvu .rm-stock: ta je tam mechová
   (#3F7A1E z papírové palety) a na detailu by byla čtvrtá barva, takže ji
   .rm-detail přepisuje na inkoust. .rm-brand a .rm-btn jsou v realmeal.css
   zaneseny jen pro .product-miniature, proto je detail definuje po svém.
   ========================================================================= */

/* --- pravý sloupec: značka, název, popisek ------------------------------ */

.rm-detail .rm-detail__brand {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5F5F5A;
}

.rm-detail .rm-detail__title {
  margin: 0 0 10px;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--shelf-text, #1A1A1A);
  text-transform: none;
}

.rm-detail .rm-detail__lede {
  max-width: 52ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #5F5F5A;
}
.rm-detail .rm-detail__lede p { margin: 0 0 8px; }
.rm-detail .rm-detail__lede p:last-child { margin-bottom: 0; }

/* --- linkovaný blok „Vybrané balení" ------------------------------------
   18px nahoře i dole, vlasová linka nad i pod. Uvnitř je všechno, co
   zákazník potřebuje k rozhodnutí: balení, obě ceny, aritmetika, sklad. */

.rm-detail .product-prices.rm-selected {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 0;
  padding: 18px 0;
  border-top: 1px solid #E8E2D8;
  border-bottom: 1px solid #E8E2D8;
}

.rm-selected__label {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5F5F5A;
}

.rm-selected__pack {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
}

/* --- cena balení vedle ceny za jednotku ---------------------------------
   Jednotková cena NIKDY není menší než cena balení. Handoff 03 §3.11 psal
   26 px proti 32 px; zadání říká „nikdy menší", takže obě mají 32 px. */

.rm-detail .rm-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.rm-price-row__pack {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.rm-detail .rm-price-now {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* jediný malinový prvek na stránce */
.rm-detail .rm-price-off {
  padding: 3px 7px;
  border-radius: var(--radius-2);
  background: var(--shelf-raspberry, #C8324F);
  color: #FFFFFF;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* zelené pole jednotkové ceny — velká varianta pro detail */
.rm-unit-price--lg {
  padding: 8px 12px;
  font-size: 32px;
  line-height: 1.15;
  white-space: nowrap;
}

/* malá varianta do tabulky balení a do řádky košíku */
.rm-unit-price--sm {
  display: inline-block;
  align-self: flex-start;
  width: auto;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}

/* chybějící jednotková cena: cena nikdy nestojí sama.
   Malina je vyhrazená slevě. Chybějící údaj není sleva ani chyba zákazníka,
   jen číslo, které doplňujeme — patří do šedi, ne do křiku. */
.rm-unit-price--missing {
  background: var(--shelf-surface, #F3EFE8);
  color: #5F5F5A;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 8px 12px;
}

/* --- aritmetika na vyžádání --------------------------------------------- */

.rm-howto { margin: 0; }
.rm-howto__summary {
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  color: #5F5F5A;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
}
.rm-howto__summary::-webkit-details-marker { display: none; }
.rm-howto__summary:hover { color: var(--shelf-text, #1A1A1A); }
.rm-howto[open] .rm-howto__summary { color: var(--shelf-text, #1A1A1A); }
.rm-howto__body {
  margin: 6px 0 0;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
}

.rm-selected__tax {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5F5F5A;
}

/* --- sklad --------------------------------------------------------------
   .rm-stock a .rm-stock__dot jsou už v realmeal.css, tady jen odsazení,
   velikost a barva pro detail.

   Základní .rm-stock má color: var(--moss, #3F7A1E) — mech z PAPÍROVÉ palety.
   Na detailu by to byla čtvrtá barva (a míchání palet, které tokens.css
   zakazuje), proto skladová věta dostává inkoust. Tečka jede na currentColor,
   takže zezelenat nemůže. Přepis je schválně zúžený na .rm-detail, aby
   nesahal na sazbu ve výpisu. */

.rm-stock-line { margin: 0; }
.rm-detail .rm-stock-line .rm-stock {
  font-size: 15px;
  color: var(--shelf-text, #1A1A1A);
}
.rm-detail .rm-stock-line .rm-stock--out { color: #5F5F5A; }

/* --- levnější balení ----------------------------------------------------
   Handoff 04 §4.4: podklad #EEF7E4, 3px zelený pruh vlevo, 16px padding.
   Blok stojí v toku nad tlačítkem. Když modul nic nevrátí, nevykreslí se ani
   prázdný rámeček — proto tu není žádný min-height ani margin na prázdno. */

.rm-cheaper-pack {
  margin: 16px 0 0;
  padding: 16px;
  border-left: 3px solid var(--shelf-green, #3F7A1E);
  border-radius: var(--radius-1);
  background: var(--shelf-green-soft, #EEF7E4);
}

.rm-cheaper-pack__title {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--shelf-green, #3F7A1E);
}

/* věta z modulu drogeriecena (<p class="rm-cheaper">) */
.rm-cheaper-pack .rm-cheaper {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
}

.rm-cheaper-pack__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--shelf-text, #1A1A1A);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rm-cheaper-pack__link:hover { color: var(--shelf-text, #1A1A1A); }

/* --- množství a tlačítko ------------------------------------------------ */

.rm-detail .rm-cart { margin-top: 16px; }

.rm-detail .rm-cart .rm-cart__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}

.rm-qty { flex: 0 0 auto; }
.rm-qty__label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5F5F5A;
}

/* Vstup přebírá bootstrap-touchspin z theme.js — stylujeme obě podoby,
   holý input i obalený .bootstrap-touchspin. */
.rm-detail .rm-qty__input,
.rm-detail .rm-qty .bootstrap-touchspin input.rm-qty__input {
  width: 72px;
  min-height: 52px;
  padding: 0 10px;
  border: 1px solid #1A1A1A;
  border-radius: var(--radius-1);
  background: #FFFFFF;
  color: var(--shelf-text, #1A1A1A);
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.rm-detail .rm-qty .bootstrap-touchspin { border-radius: var(--radius-1); }
.rm-detail .rm-qty .bootstrap-touchspin .btn,
.rm-detail .rm-qty .btn.js-touchspin {
  min-width: 34px;
  padding: 0 6px;
  border: 1px solid #1A1A1A;
  border-radius: 0;
  background: #FFFFFF;
  color: var(--shelf-text, #1A1A1A);
  box-shadow: none;
}
.rm-detail .rm-qty .bootstrap-touchspin .btn:hover,
.rm-detail .rm-qty .btn.js-touchspin:hover { background: var(--shelf-surface, #F3EFE8); }

.rm-detail .rm-cart .rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 240px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--shelf-text, #1A1A1A);
  border-radius: var(--radius-1);
  background: var(--shelf-text, #1A1A1A);
  color: #FFFFFF;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 90ms ease-out, border-color 90ms ease-out;
}
.rm-detail .rm-cart .rm-btn:hover,
.rm-detail .rm-cart .rm-btn:focus {
  background: #1E3010;
  border-color: #1E3010;
  color: #FFFFFF;
}
.rm-detail .rm-cart .rm-btn[disabled] {
  background: transparent;
  border-color: #D5CEC2;
  color: #5F5F5A;
  cursor: default;
}
.rm-detail .rm-cart .rm-btn img { display: none; }

.rm-cart__note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5F5F5A;
}

/* věta pod tlačítkem */
.rm-detail .rm-detail__note {
  display: block;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.5;
  color: #5F5F5A;
}
.rm-detail .rm-detail__note strong { color: var(--shelf-text, #1A1A1A); font-weight: 700; }

/* --- tabulka všech balení ----------------------------------------------- */

.rm-packs { margin: 40px 0 0; }

.rm-packs__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--shelf-text, #1A1A1A);
}
.rm-packs__count {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: #5F5F5A;
}

.rm-packs__scroll { overflow-x: auto; }

.rm-packs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.rm-packs__table th,
.rm-packs__table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid #E8E2D8;
  text-align: left;
  vertical-align: middle;
}
.rm-packs__table thead th {
  padding-bottom: 8px;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5F5F5A;
  white-space: nowrap;
}
.rm-packs__pack {
  font-size: 15px;
  font-weight: 700;
  color: var(--shelf-text, #1A1A1A);
}
.rm-packs__pack a {
  color: var(--shelf-text, #1A1A1A);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rm-packs__price {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-weight: 700;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rm-packs__delta {
  font-size: 13px;
  color: #5F5F5A;
  white-space: nowrap;
}
.rm-packs__out {
  font-size: 13px;
  font-weight: 400;
  color: #5F5F5A;
  white-space: nowrap;
}

/* nejlevnější v řadě — jediné zvýraznění v tabulce */
.rm-packs__row--cheapest > th,
.rm-packs__row--cheapest > td { background: var(--shelf-green-soft, #EEF7E4); }
.rm-packs__row--cheapest .rm-packs__delta {
  color: var(--shelf-green, #3F7A1E);
  font-weight: 700;
}
.rm-packs__row--current > th,
.rm-packs__row--current > td { box-shadow: inset 0 -2px 0 var(--shelf-text, #1A1A1A); }
.rm-packs__row--out .rm-packs__pack,
.rm-packs__row--out .rm-packs__price { color: #5F5F5A; }

.rm-packs__note {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.5;
  color: #5F5F5A;
}

/* --- fotka a náhledy ----------------------------------------------------
   Plocha pod fotkou, aktivní náhled inkoustovým rámečkem. Poměr 4/3 se
   nevynucuje — galerie jede na slicku, který si výšku počítá sám. */

.rm-detail .products-imagescover .product-img {
  background: var(--shelf-surface, #F3EFE8);
  border-radius: var(--radius-1);
  /* Blok je jinak sirokу jako cely sloupec (683 px), ale fotka ma 452 px
     — sablona ji pevne nastavuje width/height. Podklad pak pretrcival
     ~230 px vpravo od fotky a vypadal jako druhy, prazdny ramecek
     (sedelo v nem i tlacitko lupy). fit-content zuzi plochu presne
     na fotku, velikost fotky se nemeni. */
  width: fit-content;
  max-width: 100%;
}
.rm-detail .product-thumbs .thumb {
  background: var(--shelf-surface, #F3EFE8);
  border: 1px solid transparent;
  border-radius: var(--radius-1);
}
.rm-detail .product-thumbs .slick-current .thumb,
.rm-detail .product-thumbs .thumb.selected {
  border: 2px solid var(--shelf-text, #1A1A1A);
}

/* --- mobil (≤767px) -----------------------------------------------------
   Tlačítko se drží u spodní hrany, upozornění na levnější balení zůstává
   nad ním v toku — nikdy se neschovává do harmoniky. */

@media (max-width: 767px) {
  .rm-detail .rm-detail__title { font-size: 26px; }
  .rm-detail .rm-price-now { font-size: 28px; }
  .rm-unit-price--lg { font-size: 28px; }

  .rm-detail .rm-cart {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 16px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    border-top: 1px solid #E8E2D8;
  }
  .rm-detail .rm-cart .rm-btn { flex: 1 1 160px; }
  .rm-packs__table th,
  .rm-packs__table td { padding-right: 12px; }
}

/* RM-BLOK: detail produktu — konec */

/* RM-BLOK: kosik (handoff 03 §3.8) — zacatek */
/* ============================================================================
   Real Meal — košík, souhrn pokladny, mini-košík
   Handoff 03 §3.8 a §3.14, 04 §4.1 a §4.6, texty 06 §6.3.

   Patří na konec themes/drogerie/assets/css/realmeal.css (ten se v head.tpl
   načítá až za theme.css a custom.css, takže při shodné specificitě vyhrává).

   Barvy: inkoust #1A1A1A, tlumená #5F5F5A, vlas #E8E2D8, plocha #F3EFE8.
   Barvu dostanou jen dvě věci — zelené pole jednotkové ceny (#3F7A1E na
   #EEF7E4) a malinový slevový štítek (#C8324F). Nic jiného.
   ODCHYLKA: handoff §3.8 chce odkaz „Odebrat" v #3F7A1E. Pravidlo tří barev
   je závaznější, takže je inkoustový a podtržený. Vrátit zpět = jeden řádek,
   viz .rm-cart-line__remove.
   ========================================================================= */

/* --- jednotková cena: varianty pro košík ---------------------------------
   Základní .rm-unit-price (18px, zelené pole) je výš v tomhle souboru.
   14px varianta do řádky košíku, 13px bez pole do mini-košíku a do souhrnu. */

.rm-unit-price--mini {
  display: inline-block;
  padding: 0;
  background: none;
  color: var(--shelf-green, #3F7A1E);
  font-size: 13px;
  line-height: 1.4;
}
/* Chybějící jednotková cena se v ostrém provozu nevykreslí vůbec
   (viz {if} v šablonách). Tohle je jen pro _PS_MODE_DEV_ při QA. */

/* --- slevový štítek v řádce (základ je absolutní nad fotkou dlaždice) --- */
.rm-flag-discount--inline {
  position: static;
  display: inline-block;
}

/* =========================================================================
   1) Stránka košíku — seznam položek
   ====================================================================== */

.rm-cart-items { display: block; }

/* --- přebití zděděných pravidel z theme.css -------------------------------
   Šablona si nechává třídy .product-line-grid, .product-line__title,
   .product-line__img a .cart-item kvůli shodě s jádrem. theme.css je ale
   stylované a u tří z nich vyšší specificitou, takže samotné pozdější načtení
   realmeal.css nestačí. Konkrétně:
     .product-line-grid .product-line__title { font-size:1.2rem; color:#1A1A1A;
                                               margin-bottom:.75rem }   (0,2,0)
     .product-line-grid .remove-from-cart    { color:#B02A1F }          (0,2,0)
     .cart-item                              { border-bottom:1px solid #F4F2EF }
     @media(max-width:991.98px) .cart-item   { padding:1rem 0 }
     .product-line__img                      { margin-right:1rem }
   Bez těchhle pěti řádků je název řádky #1A1A1A v 1.2rem, odkaz Odebrat je
   bootstrapově červený (#B02A1F = čtvrtá barva) a nad vlasem .rm-cart-line
   leží druhý vlas #F4F2EF. Na žádné z těch tříd nevisí JS (grep v theme.js
   i custom.js: 0 výskytů), takže by šly i smazat ze šablony — tohle je
   bezpečnější, kdyby na ně sahal modul. */
.rm-cart-line .rm-cart-line__name {
  font-size: 15px;
  margin-bottom: 0;
  color: var(--shelf-text, #1A1A1A);
}
.rm-cart-line .rm-cart-line__remove { color: var(--shelf-text, #1A1A1A); }
.rm-cart-line .rm-cart-line__remove:hover { color: #5F5F5A; }
.rm-cart-item { border-bottom: 0; padding: 0; }
.rm-cart-line__img { margin-right: 0; width: 82%; height: 82%; object-fit: contain; }

.rm-cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid #E8E2D8;
}
.rm-cart-item:first-child .rm-cart-line { border-top: 0; }

.rm-cart-line__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--shelf-surface, #F3EFE8);
  border-radius: var(--radius-1);
  overflow: hidden;
}

.rm-cart-line__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.rm-cart-line__brand {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #5F5F5A;
}

.rm-cart-line__name {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--shelf-text, #1A1A1A);
  text-decoration: none;
}
.rm-cart-line__name:hover {
  color: var(--shelf-text, #1A1A1A);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.rm-cart-line__pack,
.rm-cart-line__attr {
  font-size: 13px;
  line-height: 1.5;
  color: #5F5F5A;
  font-variant-numeric: tabular-nums;
}

.rm-cart-line__customizations { margin-top: 4px; font-size: 13px; }

/* --- množství --- */
.rm-cart-line__qty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 2px;
}
.rm-cart-line__qty input.js-cart-line-product-quantity {
  width: 62px;
  height: 40px;
  padding: 0 6px;
  border: 1px solid #E8E2D8;
  border-radius: var(--radius-1);
  background: #FFFFFF;
  color: var(--shelf-text, #1A1A1A);
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.rm-cart-line__qty input.js-cart-line-product-quantity::-webkit-outer-spin-button,
.rm-cart-line__qty input.js-cart-line-product-quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* TouchSpin si kolem inputu postaví vlastní obal — držíme ho v metrikách
   34–40px a bez barvy. Když TouchSpin neběží, platí pravidla výš. */
.rm-cart-line__qty .bootstrap-touchspin { display: inline-flex; align-items: stretch; }
.rm-cart-line__qty .bootstrap-touchspin .btn,
.rm-cart-line__qty .btn-touchspin {
  min-width: 34px;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid #E8E2D8;
  border-radius: var(--radius-1);
  background: #FFFFFF;
  box-shadow: none;
  color: var(--shelf-text, #1A1A1A);
}
.rm-cart-line__qty .bootstrap-touchspin .btn:hover,
.rm-cart-line__qty .btn-touchspin:hover { background: var(--shelf-surface, #F3EFE8); color: var(--shelf-text, #1A1A1A); }

.rm-cart-line__qty-fixed {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rm-cart-line__qty-note {
  max-width: 130px;
  font-size: 12px;
  line-height: 1.4;
  color: #5F5F5A;
}

/* --- částky --- */
.rm-cart-line__sum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 120px;
  text-align: right;
}
.rm-cart-line__discount {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rm-cart-line__was {
  font-size: 13px;
  color: #5F5F5A;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.rm-cart-line__each {
  font-size: 13px;
  color: #5F5F5A;
  font-variant-numeric: tabular-nums;
}
.rm-cart-line__total {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
}
.rm-cart-line__gift {
  font-size: 14px;
  font-weight: 700;
  color: var(--shelf-text, #1A1A1A);
}

.rm-cart-line__actions { display: flex; align-items: center; justify-content: flex-end; }
.rm-cart-line__remove {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--shelf-text, #1A1A1A);   /* handoff chce #3F7A1E — viz hlavička souboru */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.rm-cart-line__remove:hover { color: #5F5F5A; text-decoration-thickness: 2px; }

@media (max-width: 767px) {
  .rm-cart-line { grid-template-columns: 72px 1fr; gap: 12px 14px; }
  .rm-cart-line__plate { grid-column: 1; grid-row: 1; }
  .rm-cart-line__body  { grid-column: 2; grid-row: 1; }
  .rm-cart-line__qty   { grid-column: 2; grid-row: 2; }
  .rm-cart-line__sum   { grid-column: 2; grid-row: 3; align-items: flex-start; text-align: left; min-width: 0; }
  .rm-cart-line__actions { justify-content: flex-start; }
  .rm-cart-line__remove { justify-content: flex-start; }
}

/* =========================================================================
   2) Prázdný košík (06 §6.3)
   ====================================================================== */

.rm-cart-empty {
  max-width: 720px;
  padding: 64px 24px;
  text-align: left;
}
.rm-cart-empty__title {
  margin: 0 0 12px;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--shelf-text, #1A1A1A);
}
.rm-cart-empty__body {
  max-width: 48ch;
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.55;
  color: #5F5F5A;
}
.rm-cart-empty__cta { display: inline-flex; }

@media (max-width: 575px) {
  .rm-cart-empty { padding: 40px 16px; }
  .rm-cart-empty__title { font-size: 25px; }
  .rm-cart-empty__body { font-size: 15px; }
}

/* =========================================================================
   3) Tlačítka prázdného košíku

   Jednopomlčková sada: žije už jen v cart-prazdny.tpl. Zbytek obchodu má
   .rm-btn + .rm-btn--lg / .rm-btn--ghost (ř. ~3011 a 4581), tedy zelenou
   pilulku s inkoustovým písmem. Tady stála černá hranatá varianta, takže
   táž výzva „Hotová jídla“ vypadala na prázdném košíku jinak než na úvodní
   stránce, v detailu i v plánovači. Tvar, plochu i hranu proto čtou stejné
   tokeny jako hlavní sada. Až šablona přejde na .rm-btn, smí se celý blok
   smazat — jinam už nesahá.
   ====================================================================== */

.rm-btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--btn-fill-edge);
  border-radius: var(--radius-pill);
  background: var(--btn-fill);
  color: var(--btn-text);
  font-family: var(--font-screen);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.rm-btn-lg:hover,
.rm-btn-lg:focus {
  background: var(--btn-fill-hover);
  border-color: var(--btn-fill-edge);
  color: var(--btn-text);
  text-decoration: none;
}
.rm-btn-lg:active { transform: translateY(1px); }

.rm-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-screen);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.rm-btn-ghost:hover {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-body);
  text-decoration: none;
}

/* =========================================================================
   4) Souhrn objednávky v pokladně (cart-summary-product-line.tpl)
   ====================================================================== */

/* „x2" zůstává v DOM pro čtečky, vizuálně ho nahrazuje odznak nad miniaturou */
.rm-summary-line__row .product-quantity {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rm-summary-line__thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  background: var(--shelf-surface, #F3EFE8);
  border-radius: var(--radius-1);
  overflow: hidden;
}
.rm-summary-line__thumb img { width: 82%; height: 82%; object-fit: contain; }
.rm-summary-line__thumb .checkout-item__qty {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-1);
  background: var(--shelf-text, #1A1A1A);
  color: #FFFFFF;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Mezera mezi miniaturou a textem.
   -------------------------------------------------------------------------
   Řádek souhrnu je flex (li.media.media-list__item), ale bez gapu, a
   .rm-summary-line__thumb nemá margin — text proto začínal přesně na pixelu,
   kde obrázek končil. Modul si tohle řeší přes `margin-right: 12px` na svém
   .checkout-item__thumb, jenže to je jiná třída než ta, kterou vykresluje
   tohle téma, takže se na ni nevztahuje.

   Gap na kontejneru, ne margin na miniatuře: když se obrázek nevykreslí
   (produkt bez fotky), nezůstane po něm viset odsazení. 12 px je táž hodnota,
   jakou používá modul, ať se řádky v obchodě neliší podle toho, kdo je sází. */
body#checkout #js-checkout-summary .cart-summary-products .media-list__item {
  column-gap: 12px;
}

/* Odznak s množstvím patří DOVNITŘ miniatury.
   -------------------------------------------------------------------------
   adaptisultracart ho věší na roh (`top: -7px; right: -7px`), protože ve svém
   vlastním .checkout-item__thumb má kolem sebe místo. Tohle téma ho ale dává
   do .rm-summary-line__thumb, který má overflow: hidden — takže se odznak
   ořízl a místo čitelného počtu zbyl tmavý klín v rohu obrázku.
   (Pravidlo modulu má #checkout, tedy (1,1,1), a přebilo tím původní
   dvoutřídní zápis tématu. Tenhle selektor má (1,2,1).) */
body#checkout .rm-summary-line__thumb .checkout-item__qty {
  top: 2px;
  right: 2px;
  border-radius: var(--radius-1);
}

.rm-summary-line__name {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--shelf-text, #1A1A1A);
}
.rm-summary-line__pack,
.rm-summary-line__attr {
  font-size: 12px;
  line-height: 1.5;
  color: #5F5F5A;
}
/* Souhrn je JEDEN sloupec, ne mřížka.
   -------------------------------------------------------------------------
   adaptisultracart dělá z .media-body mřížku `minmax(0,1fr) auto` a počítá
   s vlastními dětmi: .product-name do prvního sloupce, .clearfix s cenou do
   druhého. Tohle téma ale posílá čtyři jiné prvky (název, kód, řádek s cenami,
   cena za jednotku). Žádný z nich nemá grid-column, takže se do dvou sloupců
   rozsadily samy podle pořadí: název | kód, ceny | jednotková cena.

   Na 372px širokém sloupci pokladny zbylo na ceny 144 px, takže se „115,00 Kč
   / balení" i celková částka lámaly uprostřed čísla — „115,00" na jeden řádek,
   „Kč" na druhý. Číslo rozdělené na dva řádky se špatně čte a v souhrnu
   objednávky je to to poslední, co si má zákazník přepočítávat.

   Jeden sloupec dá řádku s cenami celých 255 px a všechno se srovná pod sebe.
   Selektor má stejnou specificitu (2,4,1) jako pravidlo modulu o pár řádků
   níž; realmeal.css se načítá až za ním, takže vyhrává pořadím a nepotřebuje
   !important. */
body#checkout #js-checkout-summary .cart-summary-products .media-list__item .media-body {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1px;
}

.rm-summary-line__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  /* Částky mají nowrap, aby se nezlomilo číslo od měny. Kdyby se ale sloupec
     zúžil pod jejich součet, nowrap by je místo zalomení vystrčil ven z karty.
     S wrapem spadne celková cena na vlastní řádek — ošklivější, ale pořád
     celá a uvnitř. Projeví se až hluboko pod šířkou mobilu (~260 px). */
  flex-wrap: wrap;
}
.rm-summary-line__each {
  font-size: 12px;
  color: #5F5F5A;
  font-variant-numeric: tabular-nums;
  /* Částka se nesmí zlomit mezi číslem a měnou ani před lomítkem. */
  white-space: nowrap;
}
.rm-summary-line__total {
  float: none;
  white-space: nowrap;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   5) Tlačítko košíku v hlavičce + mini-košík
   ====================================================================== */

.rm-minicart { position: relative; }

/* .rm-header__actions a je v custom.css grid o třech sloupcích — přebíjíme
   vyšší specificitou, ne !important. */
.rm-header__actions .rm-minicart__button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--shelf-text, #1A1A1A);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--shelf-text, #1A1A1A);
  text-decoration: none;
}
.rm-header__actions .rm-minicart__button:hover { background: var(--shelf-surface, #F3EFE8); }
.rm-header__actions .rm-minicart__icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}
.rm-header__actions .rm-minicart__label {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
}
.rm-header__actions .rm-minicart__total {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rm-header__actions .rm-minicart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-1);
  background: var(--shelf-text, #1A1A1A);
  color: #FFFFFF;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rm-minicart.inactive .rm-minicart__count { display: none; }

/* --- rozbalený mini-košík (jen myš/klávesnice, jen desktop) --- */
.rm-minicart__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: none;
  width: 340px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid #E8E2D8;
  border-radius: var(--radius-1);
  box-shadow: 0 12px 32px rgba(36, 30, 23, 0.16);
  text-align: left;
}
.rm-minicart:hover .rm-minicart__panel,
.rm-minicart:focus-within .rm-minicart__panel { display: block; }

.rm-minicart__panel-head {
  margin-bottom: 8px;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5F5F5A;
}
.rm-minicart__list { margin: 0; padding: 0; list-style: none; }
.rm-minicart__item { padding: 10px 0; border-top: 1px solid #E8E2D8; }
.rm-minicart__item:first-child { border-top: 0; }

.rm-minicart-line { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: start; }
.rm-minicart-line__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--shelf-surface, #F3EFE8);
  border-radius: var(--radius-1);
  overflow: hidden;
}
.rm-minicart-line__thumb img { width: 84%; height: 84%; object-fit: contain; }
.rm-minicart-line__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-minicart-line__name {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--shelf-text, #1A1A1A);
}
.rm-minicart-line__pack,
.rm-minicart-line__price { font-size: 12px; line-height: 1.4; color: #5F5F5A; font-variant-numeric: tabular-nums; }
.rm-minicart-line__sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rm-minicart-line__total {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
}
/* custom.css:123 stylede `.rm-header__actions a` jako mřížku 44×44 s vlastní
   barvou a paddingem (0,1,1). Každý odkaz v panelu proto potřebuje přebít
   i min-width a gap, ne jen display. */
.rm-header__actions .rm-minicart-line__remove {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 24px;
  gap: 0;
  padding: 0;
  font-size: 12px;
  color: #5F5F5A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rm-header__actions .rm-minicart-line__remove:hover { color: var(--shelf-text, #1A1A1A); background: none; }

.rm-minicart__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E8E2D8;
}
.rm-minicart__foot-label {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5F5F5A;
}
.rm-minicart__foot-value {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
}
/* Tlačítko „Zobrazit košík" v panelu.
   .rm-btn-lg je (0,1,0), ale custom.css:123 má `.rm-header__actions a` (0,1,1)
   a custom.css:337 `.rm-header__actions a:hover` (0,2,1) — obě vyhrávají nad
   .rm-btn-lg i .rm-btn-lg:hover bez ohledu na pořadí souborů. Samotné
   `width: 100%` proto nestačí: tlačítko by dostalo color: var(--dg-ink)
   na inkoustovém pozadí, tedy tmavý text na tmavém, a po najetí myší
   pozadí --dg-krida pod bílým textem. Musíme zopakovat všechno, co
   `.rm-header__actions a` nastavuje. */
.rm-header__actions .rm-minicart__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  gap: 0;
  padding: 0 22px;
  margin-top: 10px;
  background: var(--shelf-text, #1A1A1A);
  color: #FFFFFF;
  font-size: 15px;
  text-decoration: none;
}
.rm-header__actions .rm-minicart__cta:hover,
.rm-header__actions .rm-minicart__cta:focus {
  background: #1E3010;
  border-color: #1E3010;
  color: #FFFFFF;
}

@media (max-width: 767px) {
  /* Na dotyku by se panel otevřel prvním klepnutím místo přechodu do košíku. */
  .rm-minicart__panel { display: none !important; }
  .rm-header__actions .rm-minicart__button { padding: 6px 8px; gap: 6px; }
}

/* =========================================================================
   6) Potvrzení vložení do košíku (modal.tpl)
   ====================================================================== */

.rm-cart-modal__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--shelf-surface, #F3EFE8);
  border-radius: var(--radius-1);
}
.rm-cart-modal__plate img { width: 100%; height: auto; object-fit: contain; }
.rm-cart-modal__body { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.rm-cart-modal__title {
  margin: 0;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--shelf-text, #1A1A1A);
}
.rm-cart-modal__product { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rm-cart-modal__name {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--shelf-text, #1A1A1A);
}
.rm-cart-modal__pack { font-size: 13px; color: #5F5F5A; }
.rm-cart-modal__prices { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.rm-cart-modal__price {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums;
}
.rm-cart-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rm-cart-modal__actions .rm-btn-lg,
.rm-cart-modal__actions .rm-btn-ghost { flex: 1 1 180px; }

@media (max-width: 575px) {
  .rm-cart-modal__body { padding: 16px; }
  .rm-cart-modal__title { font-size: 19px; }
}

/* RM-BLOK: kosik — konec */

/* RM-BLOK: hlavicka a paticka (handoff 03 §3.3, §3.4) — zacatek */
/* ============================================================================
   Real Meal — hlavička, navigace, drobečky, patička.
   Handoff 03-templates.md §3.3 a §3.4, hodnoty z reference/tokens/*.css.

   Patří na konec themes/drogerie/assets/css/realmeal.css (ten se v head.tpl
   načítá až za sdruženým theme.css, takže tyhle třídy vyhrávají bez !important).

   Barvy: inkoustový text #1A1A1A, tlumený #5F5F5A, vlásová linka #E8E2D8,
   plocha #F3EFE8, inkoustová plocha pruhu #1A1A1A. Zelená (#3F7A1E) ani
   malinová (#C8324F) tu nejsou vůbec — ty patří jednotkové ceně a slevě.
   Jediná systémová výjimka je modrý focus ring #3F7A1E, jak žádá handoff §2.4.
   ========================================================================= */

/* --- společná obálka: obsah max 1180px, okraj 24px ------------------------ */
.rm-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

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

/* Hlavička zůstává v toku dokumentu. Zdrojové téma ji fixuje a při scrollu
   posouvá transformem; to se s třípruhovou hlavičkou o proměnné výšce pere. */
#header.l-header {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  box-shadow: none;
  transition: none;
}

/* --- řádek 1: pruh se sliby ---------------------------------------------- */
/* Povinné upozornění na testovací obchod je první a stojí na vlastním řádku.
   Slib o jednotkové ceně a slib o dopravě jsou pod ním vlevo a vpravo —
   upozornění tedy nic nenahrazuje, jen se k němu přidávají. */
.rm-promise {
  background: #1A1A1A;
  color: #FFFFFF;
  padding: 7px 0;
}
.rm-promise__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rm-promise__legal,
.rm-promise__item {
  margin: 0;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
/* Proužek nese větu, ne popisek: „Chráněný testovací obchod — objednávka
   slouží pouze k ověření nákupu.“ Verzálky nemají tvar slov a čtou se po
   písmenech, prostrkání popisků to ještě zhoršuje. Je to jediné místo, kde
   obchod sám říká, že se objednávka nevyexpeduje, takže musí jít přečíst.
   Prostrkání 0,08em proto pro tenhle řádek NEPLATÍ a chybí i ve sjednoceném
   seznamu níž — patří verzálkovým popiskům, ne souvislému textu. */
.rm-promise__legal {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.rm-promise__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
}
.rm-promise__item--ship { text-align: right; }

/* --- řádek 2: hlavní lišta ----------------------------------------------- */
.rm-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E8E2D8;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  color: #1A1A1A;
}
.rm-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* logo: značka 34px + název 20/700 + claim v mono kapitálkách */
.rm-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: #1A1A1A;
  text-decoration: none;
}
.rm-logo:hover { color: #1A1A1A; text-decoration: none; }
/* Značkové logo z real-meal.cz. Nese v sobě i nápis, takže nahrazuje jak
   dřívější kresbu talíře, tak textový wordmark vedle ní. Na 52 px byl nápis
   uvnitř listu sotva čitelný a hlavička působila prázdně — 68 px dá nápisu
   zhruba stejnou velikost, jakou měl dřívější dvacetipixelový wordmark. */
.rm-logo__obrazek {
  display: block;
  flex: 0 0 auto;
  height: 68px;
  width: auto;
}

/* Patička je zelenočerná a list v logu tmavě zelený — bez podložky by zanikl. */
.rm-logo--footer .rm-logo__obrazek {
  /* Výška je i s odsazením (box-sizing: border-box), takže samotné logo z ní
     vychází o 12 px nižší — proto je číslo větší než v hlavičce. */
  height: 62px;
  padding: 6px 10px;
  background: #FFFFFF;
  border-radius: var(--radius-1, 12px);
}

.rm-logo__mark { flex: 0 0 auto; display: block; }
.rm-logo__text { display: flex; flex-direction: column; }
.rm-logo__word {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.rm-logo__claim {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5F5F5A;
}

/* hledání: výška 44px, max 420px, lupa 12px od levého kraje */
.rm-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 420px;
  margin: 0;
}
.rm-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #5F5F5A;
  pointer-events: none;
}
.rm-search__input {
  width: 100%;
  height: 44px;
  padding: 0 12px 0 40px;
  background: #FFFFFF;
  border: 1px solid #E8E2D8;
  border-radius: var(--radius-1);
  color: #1A1A1A;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 90ms cubic-bezier(0.2, 0, 0.2, 1);
}
.rm-search__input::placeholder { color: #5F5F5A; opacity: 1; }
.rm-search__input:hover { border-color: #5F5F5A; }
.rm-search__input:focus {
  border-color: #5F5F5A;
  outline: 2px solid #3F7A1E;
  outline-offset: 2px;
}
/* Ve widgetu modulu je mezi .rm-search a polem ještě <form>; bez tohohle
   pravidla je form flex položka o šířce obsahu a width:100% na poli nemá
   z čeho počítat — pole by se smrsklo na výchozí šířku inputu. */
.rm-search--widget > form {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
}

/* účet a košík */
.rm-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: 0 0 auto;
}
.rm-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.rm-account:hover {
  color: #1A1A1A;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.rm-account__icon { flex: 0 0 auto; }

/* košík = sekundární tlačítko: průhledné, 1px inkoustový rámeček */
/* .rm-cart-slot je obal #blockcart-wrapper ze šablony modulu — bez něj by
   ps_shoppingcart.js po ajaxu tlačítko z hlavičky odstranil, viz komentář
   v modules/ps_shoppingcart/ps_shoppingcart.tpl. */
.rm-cart-slot { display: flex; align-items: center; flex: 0 0 auto; }
.rm-cart { display: block; flex: 0 0 auto; }
.rm-cart__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid #1A1A1A;
  border-radius: var(--radius-1);
  color: #1A1A1A;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 90ms cubic-bezier(0.2, 0, 0.2, 1);
}
.rm-cart__link:hover {
  background: #F3EFE8;
  color: #1A1A1A;
  text-decoration: none;
}
.rm-cart__link:active { transform: translateY(1px); }
.rm-cart__icon { flex: 0 0 auto; }
.rm-cart__amount {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- řádek 3: navigace --------------------------------------------------- */
.rm-nav {
  background: #FFFFFF;
  border-bottom: 1px solid #E8E2D8;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
}
.rm-nav__inner {
  display: flex;
  align-items: stretch;
  /* 11px, ne 18px: s položkou Jídelníček přetekl pás i na 1400 px a poslední
     kategorie končila za okrajem. 1265 − (11 × 7) = 1188, vejde se do 1200. */
  gap: 11px;
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Odkazy mají margin-bottom: -1px, aby podtržení aktivní položky leželo přesně
   na lince pod navigací. Obsah je tím o 1 px vyšší než kontejner, a protože
   overflow-x: auto povyšuje overflow-y z visible na auto, vyskočil vpravo
   svislý posuvník — ukrajoval 11 px šířky, aniž by bylo co posouvat. Ten 1 px
   pohltíme vnitřním odsazením a stejně velkým záporným marginem vrátíme lištu
   na místo: výška navigace ani poloha podtržení se nemění, vodorovné posouvání
   na úzkém displeji zůstává funkční.

   Selektor je o třídu delší než .rm-nav__inner schválně: element nese i
   .rm-shell a při stejné specifičnosti by rozhodovalo pořadí v souboru. */
.rm-nav .rm-nav__inner {
  padding-bottom: 1px;
  margin-bottom: -1px;
}
.rm-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: #5F5F5A;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 90ms cubic-bezier(0.2, 0, 0.2, 1);
}
.rm-nav__link:hover { color: #1A1A1A; text-decoration: none; }
/* Ikona kategorie — kresba i žebříček velikosti a tahu jsou z brand booku
   (deska Ikony). Barvu nedostává, dědí ji přes currentColor z odkazu, takže
   v liště nepřibývá žádná další barva. V posuvném kontejneru se nesmí
   smrsknout, proto flex: 0 0 auto. */
.rm-nav__ikona { flex: 0 0 auto; }
.rm-nav__link--current {
  color: #1A1A1A;
  font-weight: 700;
  border-bottom-color: #1A1A1A;
}

/* --- drobečková navigace ------------------------------------------------- */
.rm-breadcrumb {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: #5F5F5A;
  padding: 12px 0;
}
.rm-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rm-breadcrumb__item { display: inline-flex; align-items: center; }
.rm-breadcrumb__item + .rm-breadcrumb__item::before {
  content: "/";
  margin: 0 8px;
  color: #5F5F5A;
}
.rm-breadcrumb__link { color: #5F5F5A; text-decoration: none; }
.rm-breadcrumb__link:hover {
  color: #1A1A1A;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.rm-breadcrumb__item--current { color: #1A1A1A; }

/* --- patička ------------------------------------------------------------- */
/* Zdrojové téma dává .l-footer bílé pozadí, bílý text a horní odsazení.
   Přebíráme obojí, jinak by se v patičce nedal přečíst ani jeden řádek. */
#footer.l-footer {
  margin-top: 0;
  padding-top: 0;
  background: transparent;
  color: #1A1A1A;
}
.rm-footer {
  background: var(--shelf-green-black);
  border-top: 0;
  color: #B6BFB2;               /* 8,24 : 1 na zelenočerné */
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  padding: 56px 0 32px;
}
.rm-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}
.rm-footer__brand { flex: 1.4 1 260px; }
.rm-footer__col { flex: 1 1 160px; }
.rm-footer__tagline {
  margin: 12px 0 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.55;
  color: #9EAA99;               /* 6,42 : 1 na zelenočerné */
}
.rm-footer__head {
  margin: 0 0 10px;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #9EAA99;               /* 6,42 : 1 na zelenočerné */
}
.rm-footer__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* MRTVÉ: .rm-footer a (ř. 2939) má vyšší specificitu a nastavuje #B6BFB2.
   Inkoust by na zelenočerné patičce byl 1,12 : 1 — kdyby tenhle řádek někdy
   začal platit, odkazy v patičce zmizí. Nechává se jen kvůli rozměrům níž. */
.rm-footer__link {
  color: #1A1A1A;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
}
.rm-footer__link:hover {
  color: #1A1A1A;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.rm-footer__bottom {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #E8E2D8;
}
.rm-footer__legal {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #B6BFB2;               /* 8,24 : 1 na zelenočerné */
  font-variant-numeric: tabular-nums;
}

/* --- focus: nikdy se neodstraňuje --------------------------------------- */
/* .rm-cart__link se přejmenoval na .rm-minicart__button (vykresluje ho
   ps_shoppingcart), ale tenhle seznam se s ním nepřejmenoval — tlačítko košíku
   bylo jediný ovládací prvek v hlavičce bez značkového fokusového prstenu.
   Vidět byl (výchozí obrys nikdo neruší), jen jiný než všude jinde. */
.rm-logo:focus-visible,
.rm-account:focus-visible,
.rm-minicart__button:focus-visible,
.rm-nav__link:focus-visible,
.rm-breadcrumb__link:focus-visible,
.rm-footer__link:focus-visible {
  outline: 2px solid #3F7A1E;
  outline-offset: 2px;
}

/* --- tablet -------------------------------------------------------------- */
@media (max-width: 991px) {
  .rm-header__inner { gap: 16px; }
  .rm-search { max-width: 320px; }
}

/* --- mobil (≤767px): lišty 56px, dotykové cíle 44px ---------------------- */
@media (max-width: 767px) {
  .rm-promise { padding: 6px 0; }
  /* Nesnižovat: 10 px verzálek v bílé na černé se na telefonu nečte.
     Řádek `letter-spacing: 0.1em` tu byl mrtvý — přebíjel ho sjednocený
     seznam prostrkání níž. */
  .rm-promise__legal,
  .rm-promise__item {
    font-size: 12px;
  }
  .rm-promise__row {
    flex-direction: column;
    gap: 3px;
  }
  .rm-promise__item--ship { text-align: left; }

  .rm-header__inner {
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .rm-logo__claim { display: none; }
  .rm-logo__word { font-size: 18px; }
  .rm-logo__obrazek { height: 46px; }
  .rm-logo--footer .rm-logo__obrazek { height: 54px; }
  .rm-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
  /* Popisek u účtu se jen schová z pohledu, pro odečítač zůstává. */
  .rm-account__label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rm-account { padding: 0 10px; }

  .rm-nav__inner { gap: 16px; scrollbar-width: none; }
  .rm-nav__inner::-webkit-scrollbar { display: none; }

  .rm-footer { padding: 24px 0 20px; }
  .rm-footer__inner { gap: 24px; }
  .rm-footer__brand { flex: 1 1 100%; }
  .rm-footer__col { flex: 1 1 140px; }
}

@media (max-width: 575px) {
  .rm-cart__label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rm-cart__link { padding: 0 12px; }
  .rm-shell { padding-left: 16px; padding-right: 16px; }
}

/* --- bez pohybu, když si ho uživatel nepřeje ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rm-search__input,
  .rm-cart__link,
  .rm-nav__link { transition: none; }
  .rm-cart__link:active { transform: none; }
}

/* RM-BLOK: hlavicka a paticka — konec */

/* PD-OPRAVA: categorySlider
   Modul categoryslider nic nevykresluje — na kategoriích je jeho <section>
   prázdná (0 znaků), na hlavní stránce a detailu není vůbec. theme.css mu
   ale dává margin-top: 156px, takže prázdný blok odsouval celý obsah
   stránky o 156 px dolů: mezi navigací a drobečkovou navigací zela díra.
   Margin nulujeme; kdyby modul někdy něco vykreslil, odsazení si musí
   nastavit jeho vlastní obsah. */
#categorySlider { margin-top: 0; }


/* RM-BLOK: uvodni stranka (pocitadlo) — zacatek */
/* ============================================================================
   Real Meal — úvodní stránka „Počítadlo"
   Stránka je nástroj: vyber skupinu, dostaneš číslo a pod ním skutečné zboží.

   BEZ JAVASCRIPTU: přepínání skupin dělá <input type="radio"> a :checked.
   Panely jsou vykreslené ze serveru, CSS jen ukáže vybraný.

   BARVY: zelená JEN v poli jednotkové ceny a u štítku „nejlevnější v řadě".
   Žebříček různých produktů zelenou nemá — pořadí tam nese číslo.
   Malina se na téhle stránce nevyskytuje.
   ========================================================================= */

.rm-h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--shelf-text, #1A1A1A);
  margin: 0 0 8px;
}

/* --- počítadlo ---------------------------------------------------------- */
.rm-pocitadlo { padding: 40px 0 8px; background: #FFFFFF; }
.rm-pocitadlo__nad { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #5F5F5A; margin: 0 0 10px; }
.rm-pocitadlo__h1 { font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 44px; line-height: 1.16; font-weight: 700; letter-spacing: -0.03em;
  color: var(--shelf-text, #1A1A1A); margin: 0 0 10px; }
.rm-pocitadlo__pod { font-size: 18px; line-height: 1.45; color: #5F5F5A; margin: 0 0 26px; }
.rm-pocitadlo__form { border: 0; }
.rm-vyber { border: 0; margin: 0; padding: 0; }
.rm-vyber__popisek { font-size: 15px; font-weight: 700; color: var(--shelf-text, #1A1A1A); margin: 0 0 10px; }

/* Radia nejsou vidět, ale zůstávají dostupná z klávesnice. */
.rm-vyber__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }

.rm-vyber__mrizka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin: 0 0 28px; }
.rm-dlazdice { display: flex; flex-direction: column; gap: 4px; justify-content: center;
  min-height: 74px; padding: 12px 14px; background: #FFFFFF; border: 1px solid #E8E2D8;
  border-radius: var(--radius-2); cursor: pointer; transition: border-color 90ms ease-out; }
.rm-dlazdice:hover { border-color: #5F5F5A; }
.rm-dlazdice__nazev { font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 16px; font-weight: 700; color: var(--shelf-text, #1A1A1A); }
.rm-dlazdice__cislo { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 12.5px; color: #5F5F5A; font-variant-numeric: tabular-nums; }

/* --- panely ------------------------------------------------------------- */
.rm-panel { display: none; }

/* --- kolik za měsíc ----------------------------------------------------- */
.rm-kolik { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 18px; }
.rm-kolik__popisek { font-size: 15px; font-weight: 700; color: var(--shelf-text, #1A1A1A); }
.rm-kolik__pilulky { display: none; gap: 6px; }
.rm-pilulka { min-width: 48px; height: 40px; padding: 0 10px; background: #FFFFFF;
  border: 1px solid #E8E2D8; border-radius: var(--radius-2); cursor: pointer;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif); font-size: 15px;
  color: var(--shelf-text, #1A1A1A); font-variant-numeric: tabular-nums; }
.rm-pilulka:hover { border-color: #5F5F5A; }
.rm-pilulka--vybrana { border: 2px solid var(--shelf-blue, #3F7A1E); font-weight: 700; }
.rm-kolik__napoveda { display: none; font-size: 13px; color: #5F5F5A; }

/* Velké číslo je ČERNÉ, ne zelené: zelená patří poli jednotkové ceny. */
.rm-vysledek { margin: 0 0 22px; }
.rm-vysledek__cislo { display: block; font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 52px; line-height: 1.05; font-weight: 700; color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rm-vysledek__popis { display: block; margin-top: 6px; font-size: 15px; color: #5F5F5A; }
.rm-vysledek__pocet { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-weight: 700; color: var(--shelf-text, #1A1A1A); font-variant-numeric: tabular-nums; }
.rm-vysledek--bez .rm-vysledek__cislo { font-size: 40px; }

.rm-panel__hlavicka { font-size: 13px; line-height: 1.5; color: #5F5F5A; margin: 0 0 10px; }

/* --- žebříček ----------------------------------------------------------- */
.rm-zebricek { list-style: none; margin: 0 0 14px; padding: 0; }
.rm-radek { display: grid; align-items: center; gap: 16px;
  grid-template-columns: 34px 72px minmax(0, 1fr) 118px 172px 112px 104px;
  min-height: 88px; border-top: 1px solid #E8E2D8; }
.rm-radek:last-child { border-bottom: 1px solid #E8E2D8; }
.rm-radek__poradi { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 15px; color: #5F5F5A; font-variant-numeric: tabular-nums; }
.rm-radek__plocha { display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; background: var(--shelf-surface, #F3EFE8);
  border-radius: var(--radius-2); overflow: hidden; color: inherit; }
.rm-radek__plocha img { width: 84%; height: 84%; object-fit: contain; }
.rm-stitek { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; border: 1px solid #E8E2D8; border-radius: var(--radius-2); }
.rm-stitek__cislo { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 16px; font-weight: 700; color: var(--shelf-text, #1A1A1A); font-variant-numeric: tabular-nums; }
.rm-stitek__jed { font-size: 11px; color: #5F5F5A; }
.rm-radek__popis { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rm-radek__znacka { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #5F5F5A; }
.rm-radek__nazev { font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--shelf-text, #1A1A1A);
  text-decoration: none; }
.rm-radek__nazev:hover { text-decoration: underline; }
.rm-radek__cena { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 19px; font-weight: 700; text-align: right; color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums; }
.rm-radek__jed { justify-self: start; }
.rm-radek__sklad { font-size: 13px; color: #5F5F5A; font-variant-numeric: tabular-nums; }
.rm-radek__do-kosiku { min-height: 40px; padding: 0 14px; font-size: 14px; }

.rm-panel__vic { margin: 0 0 8px; font-size: 15px; }
.rm-panel__jinak { margin: 0 0 8px; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.6; color: #5F5F5A; }
.rm-pocitadlo__noscript { font-size: 13.5px; color: #5F5F5A; }

/* --- žebřík balení (upsell) --------------------------------------------- */
.rm-zebrik { padding: 36px 0; background: #FFFFFF; border-top: 1px solid #E8E2D8; }
.rm-zebrik__pod { font-size: 15px; color: #5F5F5A; margin: 0 0 16px; }
.rm-zebrik__seznam { list-style: none; margin: 0 0 14px; padding: 0; }
.rm-zebrik__radek { display: grid; align-items: center; gap: 16px;
  grid-template-columns: 150px 118px 190px minmax(0, 1fr) 104px;
  min-height: 84px; padding: 0 12px; border-top: 1px solid #E8E2D8; position: relative; }
.rm-zebrik__radek:last-child { border-bottom: 1px solid #E8E2D8; }
/* Jediné místo na stránce se signálem „nejlevnější v řadě". */
.rm-zebrik__radek--nej { background: var(--shelf-green-soft, #EEF7E4);
  box-shadow: inset 3px 0 0 var(--shelf-green, #3F7A1E); }
.rm-zebrik__stitek { position: absolute; top: 6px; left: 12px;
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif); font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-green, #3F7A1E); }
.rm-zebrik__baleni { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 16px; font-weight: 700; color: var(--shelf-text, #1A1A1A); font-variant-numeric: tabular-nums; }
.rm-zebrik__cena { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 19px; font-weight: 700; text-align: right; color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums; }
.rm-zebrik__rozdil { font-size: 13.5px; color: #5F5F5A; font-variant-numeric: tabular-nums; }
.rm-zebrik__akce { min-height: 40px; padding: 0 14px; font-size: 14px; }
.rm-zebrik__nevyhoda { font-size: 16px; line-height: 1.5; color: var(--shelf-text, #1A1A1A); margin: 0 0 4px; }
.rm-zebrik__pozn { font-size: 13.5px; color: #5F5F5A; margin: 0; }

/* --- důkaz, jak počítáme, sortiment, sliby ------------------------------ */
.rm-dukaz { padding: 30px 0; background: var(--shelf-surface, #F3EFE8); }
.rm-dukaz__text { font-size: 16px; color: #5F5F5A; margin: 0; }

.rm-jak { padding: 36px 0; background: #FFFFFF; }
.rm-jak__sloupce { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 14px; }
.rm-jak__cislo { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 13px; color: #5F5F5A; }
.rm-jak__h3 { font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 19px; font-weight: 700; margin: 4px 0 6px; color: var(--shelf-text, #1A1A1A); }
.rm-jak__sloupec p { font-size: 15px; line-height: 1.6; color: #5F5F5A; margin: 0; }

.rm-sortiment { padding: 36px 0; background: #FFFFFF; border-top: 1px solid #E8E2D8; }
.rm-sortiment__mrizka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px; margin: 14px 0 12px; }
.rm-kat { display: flex; flex-direction: column; gap: 5px; min-height: 120px; padding: 14px;
  background: #FFFFFF; border: 1px solid #E8E2D8; border-radius: var(--radius-2); text-decoration: none;
  color: inherit; transition: border-color 90ms ease-out; }
.rm-kat:hover { border-color: #5F5F5A; }
.rm-kat__nazev { font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 17px; font-weight: 700; color: var(--shelf-text, #1A1A1A); }
.rm-kat__pocet { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 13px; color: #5F5F5A; font-variant-numeric: tabular-nums; }
.rm-kat__cena { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 13.5px; color: var(--shelf-text, #1A1A1A); font-variant-numeric: tabular-nums; }
.rm-sortiment__tenke, .rm-sortiment__pozn { font-size: 14px; color: #5F5F5A; margin: 0 0 6px; }

.rm-sliby { padding: 34px 0; background: var(--shelf-surface, #F3EFE8); }
.rm-sliby__sloupce { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.rm-sliby__seznam { margin: 10px 0 0; padding-left: 0; list-style: none;
  font-size: 16px; line-height: 1.7; color: var(--shelf-text, #1A1A1A); }
.rm-sliby__h3 { font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--shelf-text, #1A1A1A); }
.rm-sliby__ne { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 1.7; color: #5F5F5A; }
.rm-sliby__ne li::before { content: "—"; margin-right: 8px; color: var(--text-muted); }
.rm-sliby__test { margin: 22px 0 14px; font-size: 16px; color: var(--shelf-text, #1A1A1A); }
.rm-btn--lg { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; }
.rm-home-nouze { padding: 60px 0; text-align: center; }

/* --- mobil -------------------------------------------------------------- */
@media (max-width: 991px) {
  .rm-vyber__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-jak__sloupce { grid-template-columns: 1fr; gap: 20px; }
  .rm-sortiment__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-sliby__sloupce { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
  .rm-pocitadlo__h1 { font-size: 28px; }
  .rm-pocitadlo__pod { font-size: 16px; }
  .rm-vysledek__cislo { font-size: 38px; }
  .rm-radek { grid-template-columns: 44px minmax(0, 1fr); grid-auto-rows: min-content;
    gap: 6px 12px; padding: 14px 0; min-height: 0; }
  .rm-radek__plocha { width: 44px; height: 44px; grid-row: span 2; }
  .rm-radek__poradi { display: none; }
  .rm-radek__cena, .rm-radek__jed, .rm-radek__sklad, .rm-radek__do-kosiku { grid-column: 2; }
  .rm-radek__cena { text-align: left; }
  .rm-radek__do-kosiku { justify-self: start; }
  .rm-zebrik__radek { grid-template-columns: 1fr 1fr; padding: 14px 12px; min-height: 0; gap: 8px; }
  .rm-zebrik__cena { text-align: left; }
  .rm-zebrik__akce { grid-column: span 2; justify-self: start; }
}

/* Přepínání skupin bez JavaScriptu: zaškrtnuté radio obarví svou dlaždici
   a ukáže svůj panel. Selektory se musí vypsat pro každou skupinu zvlášť,
   protože CSS neumí spojit id radia s třídou panelu jinak než výčtem. */


/* Přepínání skupin bez JavaScriptu: zaškrtnuté radio obarví svou dlaždici
   a ukáže svůj panel. Radia stojí v HTML PŘED mřížkou i panely, takže se
   na ně dá dosáhnout sourozeneckým selektorem. Pro každou skupinu se to
   musí vypsat zvlášť — CSS neumí spojit id radia s třídou panelu jinak. */
#rm-s-prani-davky:checked ~ .rm-vyber__mrizka label[for="rm-s-prani-davky"] { border: 2px solid var(--shelf-blue, #3F7A1E); padding: 11px 13px; }
#rm-s-prani-davky:checked ~ .rm-panely .rm-panel--prani-davky { display: block; }
#rm-s-prani-davky:focus-visible ~ .rm-vyber__mrizka label[for="rm-s-prani-davky"] { outline: 2px solid var(--shelf-blue, #3F7A1E); outline-offset: 2px; }
#rm-s-prani-kapsle:checked ~ .rm-vyber__mrizka label[for="rm-s-prani-kapsle"] { border: 2px solid var(--shelf-blue, #3F7A1E); padding: 11px 13px; }
#rm-s-prani-kapsle:checked ~ .rm-panely .rm-panel--prani-kapsle { display: block; }
#rm-s-prani-kapsle:focus-visible ~ .rm-vyber__mrizka label[for="rm-s-prani-kapsle"] { outline: 2px solid var(--shelf-blue, #3F7A1E); outline-offset: 2px; }
#rm-s-mycka-kapsle:checked ~ .rm-vyber__mrizka label[for="rm-s-mycka-kapsle"] { border: 2px solid var(--shelf-blue, #3F7A1E); padding: 11px 13px; }
#rm-s-mycka-kapsle:checked ~ .rm-panely .rm-panel--mycka-kapsle { display: block; }
#rm-s-mycka-kapsle:focus-visible ~ .rm-vyber__mrizka label[for="rm-s-mycka-kapsle"] { outline: 2px solid var(--shelf-blue, #3F7A1E); outline-offset: 2px; }
#rm-s-nadobi-rucne:checked ~ .rm-vyber__mrizka label[for="rm-s-nadobi-rucne"] { border: 2px solid var(--shelf-blue, #3F7A1E); padding: 11px 13px; }
#rm-s-nadobi-rucne:checked ~ .rm-panely .rm-panel--nadobi-rucne { display: block; }
#rm-s-nadobi-rucne:focus-visible ~ .rm-vyber__mrizka label[for="rm-s-nadobi-rucne"] { outline: 2px solid var(--shelf-blue, #3F7A1E); outline-offset: 2px; }
#rm-s-uklid:checked ~ .rm-vyber__mrizka label[for="rm-s-uklid"] { border: 2px solid var(--shelf-blue, #3F7A1E); padding: 11px 13px; }
#rm-s-uklid:checked ~ .rm-panely .rm-panel--uklid { display: block; }
#rm-s-uklid:focus-visible ~ .rm-vyber__mrizka label[for="rm-s-uklid"] { outline: 2px solid var(--shelf-blue, #3F7A1E); outline-offset: 2px; }
#rm-s-osobni:checked ~ .rm-vyber__mrizka label[for="rm-s-osobni"] { border: 2px solid var(--shelf-blue, #3F7A1E); padding: 11px 13px; }
#rm-s-osobni:checked ~ .rm-panely .rm-panel--osobni { display: block; }
#rm-s-osobni:focus-visible ~ .rm-vyber__mrizka label[for="rm-s-osobni"] { outline: 2px solid var(--shelf-blue, #3F7A1E); outline-offset: 2px; }

/* Pilulky s počtem se ukážou, jen když běží skript, který je umí obsloužit.
   Bez JS by to byla tlačítka, co vypadají klikatelně a nic nedělají. Číslo
   pro výchozích 20 praní vykresluje server, takže stránka dává smysl i tak. */
.rm-js .rm-kolik__pilulky { display: inline-flex; }
.rm-js .rm-kolik__napoveda { display: inline; }
/* RM-BLOK: uvodni stranka — konec */

/* RM-BLOK: rady na uvodni strance — zacatek */

/* --- úvodní stránka: řady produktů ------------------------------------- */
.rm-uvod { padding: 40px 0 26px; margin-bottom: 0; background: #FFFFFF; }
/* Hlavní prohlášení úvodní stránky. Kurzívní Cormorant smí být na obrazovce
   jeden; na úvodní stránce ho má pruh „Co teď vaříme", takže titulek nese
   Bebas — „velká prohlášení", přesně na tohle je. Jediná deklarace v souboru:
   dřív jich bylo tady DM Sans 40 px, o kus níž Cormorant a nakonec Bebas. */
.rm-uvod__h1 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 78px);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--shelf-text, #1A1A1A);
  margin: 0 0 10px;
  max-width: 900px;
}
.rm-uvod__pod { font-size: 18px; line-height: 1.5; color: #5F5F5A; margin: 0 0 20px; max-width: 760px; }
.rm-uvod__akce { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 0; }
.rm-uvod__odkaz { font-size: 15.5px; color: var(--shelf-blue, #3F7A1E); }

.rm-rada { padding: 26px 0; background: #FFFFFF; border-top: 1px solid #E8E2D8; }
.rm-rada__hlava { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; }
.rm-rada__hlava .rm-h2 { margin: 0; }
.rm-rada__pod { font-size: 14px; color: #5F5F5A; margin: 0; font-variant-numeric: tabular-nums; }
.rm-rada__vic { margin-left: auto; font-size: 15px; color: var(--shelf-blue, #3F7A1E); }
/* Mřížka dědí .products z výpisu, jen se na úvodní stránce nikdy nezalomí
   pod dva sloupce — čtyři dlaždice jsou jedna řada, ne stránkovaný výpis. */
.rm-rada__mrizka { margin: 0; }

@media (max-width: 991px) {
  .rm-rada__vic { margin-left: 0; }
}
@media (max-width: 767px) {
  .rm-uvod__pod { font-size: 16px; }
}
/* RM-BLOK: rady na uvodni strance — konec */

/* RM-BLOK: zalozka Detaily produktu — zacatek */
.rm-datasheet { margin: 0; padding: 0; max-width: 620px; }
.rm-datasheet__radek { display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid #E8E2D8; }
.rm-datasheet__radek:last-child { border-bottom: 0; }
.rm-datasheet dt { margin: 0; font-size: 14px; color: #5F5F5A; }
.rm-datasheet dd { margin: 0; font-size: 15px; font-weight: 700;
  color: var(--shelf-text, #1A1A1A); }
/* Čísla ve Space Mono s tabulkovými číslicemi — ať jdou číst ve sloupci. */
.rm-datasheet__cislo { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
@media (max-width: 575px) {
  .rm-datasheet__radek { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
}
/* RM-BLOK: zalozka Detaily produktu — konec */


/* RM-BLOK: pokladna (objednavka) — zacatek
   ---------------------------------------------------------------------------
   Pokladnu vykresluje modul adaptisultracart a nese si vlastni vzhled po
   predchozim obchodu (SpinKids): cervena #B02A1F, systemove pismo, zaoblene
   rohy 8-16 px. Vedle zbytku webu to vypadalo jako cizi stranka.

   Modul ma cely vzhled v promennych --co-*, takze staci prepsat tokeny —
   nemusi se prepisovat jednotlive selektory ani sahat do souboru modulu.
   Tenhle blok je v realmeal.css, ktery se nacita AZ ZA CSS modulu,
   takze prepis plati.

   Mapovani na obrazovkovou paletu:
     cervena  -> inkoustova cern (hlavni tlacitko je na webu cerne)
     focus    -> modra #3F7A1E, jak velí manual
     uspech   -> zelena #3F7A1E (stejna jako pole jednotkove ceny)
     rohy     -> tokeny --radius-* obchodu (20 / 12 / 8 px)
     pismo    -> --font-screen (DM Sans), cisla --font-mono s tabulkovymi
                 cislicemi. „Space Grotesk" tu stavalo drive, ale head.tpl:41
                 stahuje z Google Fonts jen Bebas Neue, Cormorant Garamond
                 a DM Sans — zadne @font-face pro nej v repozitari neni,
                 takze pokladna jela systemovym pismem. Kdyby mela kdykoliv
                 dostat vlastni rodinu, musi se NEJDRIV pridat do <link>.
   ========================================================================= */
body#checkout,
body.page-order,
.checkout-header,
#checkout-process {
  --co-ground: #FFFFFF;
  --co-panel: #F3EFE8;
  --co-panel-2: #FFFFFF;
  --co-ink: #1A1A1A;
  --co-muted: #5F5F5A;
  --co-muted-2: #6F6F68;
  --co-line: #E8E2D8;
  --co-line-strong: #D5CEC2;

  /* Hlavni akce je na celem webu inkoustove cerna, ne barevna. */
  --co-brand: #1A1A1A;
  --co-brand-ink: #1E3010;
  --co-brand-tint: #F3EFE8;

  /* --co-success barvi hotove kroky pokladny (cislo kroku, fajfka), ne cenu.
     Zelena #3F7A1E na webu znamena JEDINOU vec: cenu za jednotku a signal
     "nejlevnejsi v rade". Kdyby oznacovala i hotovy krok, prestala by ten
     jeden vyznam nest — stejny duvod, proc z radku skladem zmizel mech.
     Hotovy krok proto dostane inkoust; ze je hotovy, rekne fajfka tvarem. */
  --co-success: #1A1A1A;
  --co-success-tint: #F3EFE8;
  --co-focus: #3F7A1E;

  /* 2 px tu stavala s poznamkou „jak ma zbytek webu" — zbytek webu ale 2 px
     nema nikde, v celem souboru neni jedine border-radius: 2px. */
  --co-r-sm: var(--radius-2);
  --co-r-md: var(--radius-1);
  --co-r-lg: var(--radius-card);

  --co-shadow: none;
  --co-shadow-card: none;

  --co-sans: var(--font-screen);
  --co-round: var(--font-screen);

  /* Hlavni tlacitko pokladny cte background: var(--primary, #c71717).
     --primary nikde definovana neni, takze padalo na zalozni cervenou
     z predchoziho obchodu. Definujeme ji tady — pravidlo ma !important,
     ale promennou prebit lze, takze neni potreba nic prepisovat silou.

     Zelena, jako zbytek webu: "Do kosiku" i "Prochazet sortiment" jedou na
     --btn-fill #7CC93C. Driv tu stal inkoust s komentarem, ze hlavni akce je
     na celem webu cerna — to o tomhle obchode neplatilo. */
  --primary: #7CC93C;
  --primary-hover: #6DB532;
}

/* Podklad pokladny.
   -------------------------------------------------------------------------
   Modul má v `body#checkout` zkratku `background:` se dvěma vrstvami —
   růžovým přechodem #FFF4F6 odvozeným od --co-brand #E4002B předchozí značky
   a až pod ním --co-ground. Přepis tokenu na něj nedosáhne a průhledný
   přechod je natvrdo v souboru modulu, do kterého se nesmí sáhnout.
   Musí to být zkratka `background`, ne `background-color` — jinak vrstva
   s přechodem zůstane. Krém platí na všech ostatních stránkách, takže
   pokladna už nevypadá, že patří někomu jinému. --co-ground zůstává bílý,
   čtou ho panely kroků. Specificita (1,0,1) je shodná s modulem,
   realmeal.css se načítá až za ním. */
body#checkout {
  background: var(--paper);
}

/* Zaoblení, která modul píše natvrdo, mimo tokeny --co-r-*. Vždycky se
   stejně hlubokým selektorem včetně `body#checkout` — bez něj nepřebíjí. */
body#checkout .checkout-step .form-control,
body#checkout .checkout-step .custom-select { border-radius: var(--radius-2); }

body#checkout .checkout-step .step-number { border-radius: var(--radius-pill); }

body#checkout .address-item .card { border-radius: var(--radius-1); }

body#checkout #checkout-payment-step .additional-information .alert {
  border-radius: var(--radius-1);
}

/* Zaoblení 14 px je u toho tlacitka natvrdo, token to neresi. */
body.page-order .btn-primary,
body#checkout .btn-primary {
  border-radius: var(--radius-1) !important;
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  box-shadow: none !important;
}

/* Cisla at jdou porovnavat ve sloupci, stejne jako ve zbytku obchodu.
   body.page-order je potvrzeni objednavky; kroky pokladny maji body#checkout,
   takze potrebuji vlastni radek — jinak by souhrn sazel cislice bez
   tabulkoveho rezu prave tam, kde se porovnavaji ceny. */
body.page-order .co-total,
body.page-order .co-price,
body.page-order .co-sum__value,
body.page-order .opt__price,
body.page-order [class*="price"],
body.page-order [class*="total"],
body#checkout [class*="price"],
body#checkout [class*="total"],
body#checkout .checkout-summary-head__title {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}

/* Tlacitko OBJEDNAT. Plochu uz obarvila --primary vyse, ale pismo a stin
   si modul pise natvrdo (color: #fff !important a cerveny stin po predchozim
   obchode). Na zelene #7CC93C ma bila 2,04 : 1 — necitelne. Inkoust ma 8,52 : 1,
   presne jak to dela zbytek obchodu.

   Hrana je povinna: plocha #7CC93C ma proti bile karte 2,04 : 1, takze bez
   --btn-fill-edge by tlacitko nemelo obrys a splynulo by s podnozi souhrnu.

   Selektor je stejne specificky jako modulovy, vyhrava poradim souboru
   (realmeal.css se nacita az za CSS modulu) — proto to chce !important. */
body#checkout #payment-confirmation .btn {
  color: var(--btn-text, #1A1A1A) !important;
  border: 1px solid var(--btn-fill-edge, #6DB532) !important;
  box-shadow: none !important;
}
body#checkout #payment-confirmation .btn:hover:not([disabled]),
body#checkout #payment-confirmation .btn:focus:not([disabled]) {
  background: var(--primary-hover, #6DB532) !important;
  color: var(--btn-text, #1A1A1A) !important;
}
/* Sipka za popiskem dedi color, takze se srovna sama; jen at nezustane bila. */
body#checkout #payment-confirmation .btn::after { color: inherit; }

/* Tlacitka "Pokracovat" UVNITR kroku zustavaji inkoustova.
   Modul je barvi pres var(--primary) stejne jako hlavni CTA — na poddrezemu
   jsou proto obe cervena. Tady ma --primary zelenou, takze by se zelena
   rozlezla i do kroku a na obrazovce by byly tri stejne hlasita tlacitka.
   Jedna hlavni akce na obrazovku: zelene je OBJEDNAT pod souhrnem, kroky
   jsou tise inkoustove — presne jak to dela sousedni pravidlo modulu pro
   .checkout-step .btn-primary (background: var(--co-ink)).

   Hover modul pise natvrdo #a91313, cervenou po predchozim obchode; na zelene
   plose by tlacitko pri najeti zcervenalo. Srovnano na #000, jak to maji
   ostatni tlacitka v krocich.

   Specificita (2,2,2) je stejna jako u modulu, vyhrava poradim souboru. */
body#checkout .checkout-step button.continue,
body#checkout #js-checkout-process .checkout-step button.continue {
  background: var(--co-ink, #1A1A1A) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
body#checkout .checkout-step button.continue:hover:not([disabled]),
body#checkout #js-checkout-process .checkout-step button.continue:hover:not([disabled]),
body#checkout .checkout-step button.continue:focus:not([disabled]),
body#checkout #js-checkout-process .checkout-step button.continue:focus:not([disabled]) {
  background: #000000 !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

/* Kontaktní odkaz ve štíhlé hlavičce pokladny.
   -------------------------------------------------------------------------
   Modul ho sází jako .checkout-header__phone bez odsazení, takže má na výšku
   jen 18 px — designový systém přitom žádnou klikací plochu pod 24 px
   nepřipouští. A jako jediný ovládací prvek na pokladně mu chyběl značkový
   fokusový prsten; vidět byl (výchozí obrys nikdo neruší), jen jiný než
   všude jinde.

   Řeší se z tématu, ne zásahem do modulu — modul je produkční kód. */
.checkout-header__phone {
  min-height: 24px;
  align-items: center;
}
/* Strop výšky loga v pokladně.
   -------------------------------------------------------------------------
   Modul počítá se širokým nápisem (max-height 40 px, na mobilu 34 px) — při
   poměru 3,75 : 1 to dávalo 150 px na šířku a nápis šel přečíst. Značkové
   logo má poměr 1,31 : 1, takže při 34 px vyšlo 44 px široké a nápis uvnitř
   listu byl nečitelný. Selektor má navíc oproti modulovému jméno značky,
   takže vyhrává na specificitě bez !important.

   Řeší se z tématu, ne zásahem do modulu — modul je produkční kód. */
body#checkout .checkout-header__logo img.logo { max-height: 56px; }

@media (max-width: 767px) {
  body#checkout .checkout-header__logo img.logo { max-height: 46px; }
}

.checkout-header__phone:focus-visible,
.checkout-header__logo:focus-visible {
  outline: 2px solid #3F7A1E;
  outline-offset: 2px;
}

/* Znacka v hlavicce pokladny — misto zastupneho loga PrestaShopu
   stejny znak jako v hlavicce obchodu. */
.checkout-header__logo .rm-logo__mark { display: block; }
.checkout-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--shelf-text, #1A1A1A);
  text-decoration: none;
}
.checkout-header__logo .rm-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.checkout-header__logo .rm-logo__word {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
}
.checkout-header__logo .rm-logo__claim {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #5F5F5A;
}
/* RM-BLOK: pokladna (objednavka) — konec */

/* RM-BLOK: zebrik baleni a podobne zbozi pod detailem — zacatek */
.rm-rada-baleni { padding: 30px 0 8px; background: #FFFFFF; border-top: 1px solid #E8E2D8; }
.rm-rada-baleni__pod { font-size: 14px; color: #5F5F5A; margin: 0 0 14px; }
.rm-rada-baleni__seznam { list-style: none; margin: 0; padding: 0; }
.rm-rada-baleni__radek { display: grid; align-items: center; gap: 14px;
  grid-template-columns: 150px 120px 116px 176px minmax(0, 1fr) 108px;
  min-height: 74px; padding: 0 12px; border-top: 1px solid #E8E2D8; }
.rm-rada-baleni__radek:last-child { border-bottom: 1px solid #E8E2D8; }
/* Jedine misto na detailu se signalem „nejlevnejsi v rade". */
.rm-rada-baleni__radek--nej { background: var(--shelf-green-soft, #EEF7E4);
  box-shadow: inset 3px 0 0 var(--shelf-green, #3F7A1E); }
.rm-rada-baleni__radek--tenhle { outline: 2px solid #D5CEC2; outline-offset: -2px; }
.rm-rada-baleni__stitky { display: flex; flex-direction: column; gap: 2px; }
.rm-rada-baleni__nej { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--shelf-green, #3F7A1E); }
.rm-rada-baleni__tento { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #5F5F5A; }
.rm-rada-baleni__baleni { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 16px; font-weight: 700; color: var(--shelf-text, #1A1A1A); font-variant-numeric: tabular-nums; }
.rm-rada-baleni__cena { font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 18px; font-weight: 700; text-align: right; color: var(--shelf-text, #1A1A1A);
  font-variant-numeric: tabular-nums; }
.rm-rada-baleni__rozdil { font-size: 13.5px; color: #5F5F5A; font-variant-numeric: tabular-nums; }
.rm-rada-baleni__akce { min-height: 38px; padding: 0 14px; font-size: 14px; }
.rm-rada-baleni__akce--tento { display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; font-size: 13px; color: #5F5F5A; }

.rm-podobne { padding: 26px 0 34px; background: #FFFFFF; border-top: 1px solid #E8E2D8; }
.rm-podobne__pod { font-size: 14px; color: #5F5F5A; margin: 0 0 16px; }

@media (max-width: 991px) {
  .rm-rada-baleni__radek { grid-template-columns: 1fr 1fr; padding: 12px; min-height: 0; gap: 8px; }
  .rm-rada-baleni__cena { text-align: left; }
  .rm-rada-baleni__akce, .rm-rada-baleni__akce--tento { grid-column: span 2; justify-self: start; }
}
/* RM-BLOK: zebrik baleni a podobne zbozi pod detailem — konec */

/* ===================================================================== */
/* RM-BLOK: naseptavac ve vyhledavacim poli                              */
/* ===================================================================== */
/* Panel visí pod polem v hlavičce. Barvy jsou jen tři: inkoust na text,
   šedá na doplňky a zelené pole jednotkové ceny — tedy přesně to, co smí
   být zelené i na dlaždici. Dostupnost používá HOTOVOU komponentu
   .rm-stock z výpisu, ne vlastní barvu, aby se regál a našeptávač
   neshodovaly jen náhodou. */

.rm-naseptavac {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #E8E2D8;
  border-radius: var(--radius-1);
  box-shadow: 0 6px 18px rgba(20, 22, 20, 0.08);
}

.rm-naseptavac__polozka {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #F4F2EF;
  color: var(--shelf-text, #1A1A1A);
  text-decoration: none;
}
.rm-naseptavac__polozka:last-of-type { border-bottom: 0; }
.rm-naseptavac__polozka:hover,
.rm-naseptavac__polozka--vybrana {
  background: var(--shelf-surface, #F3EFE8);
  text-decoration: none;
  color: var(--shelf-text, #1A1A1A);
}

.rm-naseptavac__plocha {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shelf-surface, #F3EFE8);
  border-radius: var(--radius-1);
  overflow: hidden;
}
.rm-naseptavac__plocha img { width: 100%; height: 100%; object-fit: contain; }

.rm-naseptavac__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rm-naseptavac__znacka {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5F5F5A;
}
.rm-naseptavac__nazev {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rm-naseptavac__sklad { font-size: 12px; font-weight: 400; gap: 6px; }
.rm-naseptavac__sklad .rm-stock__dot { width: 7px; height: 7px; }

.rm-naseptavac__ceny {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}
.rm-naseptavac__cena {
  font-family: var(--font-mono, "DM Sans", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rm-naseptavac__jednotkova {
  padding: 3px 7px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.rm-naseptavac__zprava {
  margin: 0;
  padding: 14px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5F5F5A;
}

.rm-naseptavac__vse {
  display: block;
  padding: 11px 12px;
  border-top: 1px solid #E8E2D8;
  background: #FFFFFF;
  color: var(--shelf-text, #1A1A1A);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.rm-naseptavac__vse:hover,
.rm-naseptavac__vse.rm-naseptavac__polozka--vybrana {
  background: var(--shelf-surface, #F3EFE8);
  text-decoration: none;
  color: var(--shelf-text, #1A1A1A);
}

.rm-naseptavac__polozka:focus-visible,
.rm-naseptavac__vse:focus-visible {
  outline: 2px solid var(--shelf-blue, #3F7A1E);
  outline-offset: -2px;
}

/* Na širokém displeji panel přesahuje vyhledávací pole doprava, jinak se
   názvy ořezávají po dvou třetinách — pole má 420 px a půlku z toho zaberou
   ceny. Roste doprava, kde je v hlavičce místo. */
@media (min-width: 768px) {
  .rm-naseptavac { min-width: 560px; }
}

@media (max-width: 767px) {
  .rm-naseptavac { max-height: 60vh; }
  .rm-naseptavac__polozka { gap: 10px; padding: 9px 10px; }
  .rm-naseptavac__plocha { width: 38px; height: 38px; }
  .rm-naseptavac__nazev { font-size: 13.5px; white-space: normal; }
  .rm-naseptavac__ceny { gap: 2px; }
}

/* ============================================================================
   RM-BLOK: odchylky Real Meal od Pod dřezem — zacatek

   Všechno nad tímhle blokem je struktura produkčního obchodu, jen s jinými
   hodnotami tokenů. Tady stojí to, co se liší tvarem, ne barvou:

   1. Podklad je krémový, ne bílý. Karta zůstává bílá — kontrast dělá plocha,
      ne linka.
   2. Tlačítko je pilulka se zelenou plochou a inkoustovým písmem. Pod dřezem
      mělo inkoustovou plochu a bílé písmo; zelená Real Meal má proti bílé
      2,04 : 1, takže bílé písmo na ní nesmí být. Inkoust na zelené má 8,52 : 1.
   3. Název produktu nese Bebas ve verzálkách.
   4. Nadpis sekce nese Cormorant v kurzívě. Nikdy víc než jeden na obrazovku.
   5. Patička je jediná velká tmavá plocha na stránce.
   ========================================================================= */

/* --- 1. podklad ---------------------------------------------------------- */

.rm-header,
.rm-nav,
.rm-uvod,
.rm-rada,
.rm-pocitadlo,
.rm-listing,
.rm-detail {
  background: var(--paper);
}

body[data-palette="shelf"] {
  background: var(--paper);
}

/* Karta drží bílou: na krémové ploše ji poznat i bez stínu. */
.rm-card {
  border-radius: var(--radius-card);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.rm-card:hover,
.rm-card:focus-within {
  border-color: var(--border-hairline);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* --- 2. tlačítko --------------------------------------------------------- */

.rm-btn,
.rm-btn--lg,
.product-miniature .rm-btn,
.rm-detail .rm-cart .rm-btn {
  border-radius: var(--radius-pill);
  background: var(--btn-fill);
  /* Celá zkratka, ne jen barva: samotné border-color nechá prohlížeč
     dokreslit výchozí 2px outset a tlačítko dostane rám jako z Windows 95.
     Hrana je o odstín tmavší než plocha — viz --btn-fill-edge. */
  border: 1px solid var(--btn-fill-edge);
  color: var(--btn-text);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.rm-btn:hover,
.product-miniature .rm-btn:hover,
.rm-detail .rm-cart .rm-btn:hover {
  background: var(--btn-fill-hover);
  border: 1px solid var(--btn-fill-edge);
  color: var(--btn-text);
}

.rm-btn:active,
.product-miniature .rm-btn:active {
  transform: translateY(1px);
}

.rm-btn:disabled,
.rm-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Druhá role: obrys. Plocha zůstává prázdná, aby na stránce byla jedna
   zelená výzva, ne tři. */
.rm-btn--ghost {
  background: transparent;
  border-color: var(--border-hairline);
  color: var(--text-body);
}

.rm-btn--ghost:hover {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-body);
}

/* --- 3. název produktu --------------------------------------------------- */

.product-miniature .rm-name a,
.rm-detail .rm-name,
.rm-minicart__name,
.rm-radek__nazev {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-body);
  text-decoration: none;
}

.rm-detail .rm-name {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 0.95;
}

/* --- 4. nadpisy ---------------------------------------------------------- */

/* Verzálkový popisek má všude prostrkání 0,08em. Ne 0,1, ne 0,13. */
.rm-brand,
.rm-footer__head,
.rm-pocitadlo__nad,
.t-label {
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* --- 5. patička ---------------------------------------------------------- */

/* Odkazy v patičce. Podtitulek značky sem nepatří — není to odkaz a má
   vlastní, tlumenější tón #9EAA99 přímo v .rm-footer__tagline. */
.rm-footer a,
.rm-footer__col a {
  color: #B6BFB2;
}

.rm-footer a:hover {
  color: var(--paper);
}

/* --- drobnosti ----------------------------------------------------------- */

/* Jednotková cena je značkový signál — zelený podklad, zelené písmo.
   Zůstává z produkce beze změny, jen se zaoblí do tvaru etikety. */
/* Slevový štítek: malina, nikdy ozdoba. */
.rm-sleva,
.rm-discount,
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale {
  background: var(--sale);
  color: var(--paper);
  border-radius: var(--radius-pill);
}

/* RM-BLOK: odchylky Real Meal — konec */

/* ============================================================================
   RM-BLOK: záchranná síť pro stránky Classic — zacatek

   Košík, pokladna, účet a obsahové stránky zatím běží na výchozích šablonách
   PrestaShopu. Aby nesvítily modrou a hranatou z theme.css, dostávají tady
   značkovou podobu přes vlastní selektory Classicu. Až se převede košík na
   rm-* komponenty, tahle část se o to zmenší.
   ========================================================================= */

/* --- tlačítka ------------------------------------------------------------ */

.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary {
  font-family: var(--font-screen);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: var(--radius-pill);
  padding: 14px 24px;
  border: 1px solid transparent;
  text-transform: none;
  box-shadow: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* Písmo na zelené je inkoust — 8,52 : 1. Bílá by měla 2,04 : 1.
   Hrana je --btn-fill-edge, jinak se plocha 2,04 : 1 od bílé karty neodlepí. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background: var(--btn-fill);
  border-color: var(--btn-fill-edge);
  color: var(--btn-text);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--btn-fill-hover);
  border-color: var(--btn-fill-edge);
  color: var(--btn-text);
}

.btn-secondary,
.btn-tertiary {
  background: transparent;
  border-color: var(--border-hairline);
  color: var(--text-body);
}

.btn-secondary:hover,
.btn-tertiary:hover {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-body);
}

.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 17px 32px; font-size: 15px; }
.btn-unstyle { color: inherit; }

/* --- pole ---------------------------------------------------------------- */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
select,
textarea {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-1);
  background: var(--white);
  color: var(--text-body);
  font-family: var(--font-screen);
  font-size: 15px;
  padding: 13px 15px;
  height: auto;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.form-control::placeholder { color: #6F6F68; }
.form-control:hover { border-color: #D5CEC2; }

.form-control:focus {
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.has-danger .form-control,
.form-control-danger { border-color: #B02A1F; }

.form-control-label,
label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 0;
  margin-bottom: 7px;
}

.form-control-comment { font-size: 12px; color: #6F6F68; padding-top: 6px; }

/* Popisek pole smí být verzálkový popisek. Věta ne.
   -------------------------------------------------------------------------
   Souhlas s obchodními podmínkami, poučení o zpracování osobních údajů
   i nabídka partnerů se vykreslují jako .custom-control-label — jsou to celé
   věty, a pravidlo výše z nich dělalo 11px verzálky v tlumené šedi. Právně
   povinný text, který se nedá přečíst, se jen odklikne — a pravidlo značky
   říká, že nevýhoda se říká dřív, než se klikne, ne drobným písmem dole.

   Druhá úroveň selektoru je kvůli pokladně: adaptisultracart tam má
   `body#checkout .checkout-step label` (1,2,0), holá třída (0,1,0) by
   prohrála a názvy dopravy a platby by zůstaly 12,5px verzálky. */
.custom-control-label,
.custom-checkbox label,
.custom-radio label,
body#checkout .checkout-step .custom-control-label {
  font-family: var(--font-screen);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-body);
  line-height: 1.45;
}

/* Kurzíva uvnitř souhlasu zůstává, jen ať z ní není druhá úroveň drobného
   písma pod větou, kterou právě zvětšujeme. */
.custom-control-label em { font-size: 14px; }

/* Zaškrtnutý přepínač se vybarví zeleně. Míří to na PrestaShopí ukazatel —
   prázdný <span> hned za <input>, který dělá jen ten kolečkový/čtvercový
   svit. Bootstrapí .custom-control ale klade za input POPISEK, a
   checkout/_partials/address-selector-block.tpl ho vykresluje jako
   <span class="custom-control-label">Moje adresa</span>. Selektor `+ span`
   ho bral taky, takže vybraná adresa byla zelený obdélník se šedým textem
   uvnitř — 1,2 : 1, název adresy prakticky neviditelný.
   Popisek je text, ne plocha, a proto je z pravidla vyjmutý. */
.custom-radio input[type="radio"]:checked + span:not(.custom-control-label),
.custom-checkbox input[type="checkbox"]:checked + span:not(.custom-control-label) {
  background: var(--shelf-green);
  border-color: var(--shelf-green);
}

.custom-radio,
.custom-checkbox input[type="checkbox"] + span:not(.custom-control-label) { border-color: var(--border-control); }

/* Ukazatel pro bootstrapí .custom-control, kde je za inputem POPISEK.
   Vlastní input má opacity: 0, takže bez tohohle by po vyjmutí popisku z
   výplně výše nebylo vidět vůbec nic — u dvou adres by zákazník nepoznal,
   kam mu to pojede.
   Barva je inkoust, ne zelená: #3F7A1E na tomhle webu znamená jedinou věc,
   cenu za jednotku a „nejlevnější v řadě". Vybraný přepínač není cena. */
.custom-control:not(.custom-control--bez-ukazatele) { position: relative; padding-left: 26px; }
.custom-control .custom-control-label { display: inline-block; }
.custom-control .custom-control-label::before {
  content: "";
  position: absolute;
  /* Záporně, protože theme.css dává .custom-control-label position: relative,
     takže se ukazatel kotví k POPISKU, ne k obalu. S left: 0 ležel na prvních
     písmenech („PŘIjímat speciální nabídky"). −26 px ho posadí do mezery,
     kterou obalu udělal padding-left. */
  left: -26px;
  top: 0.15em;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-control);
  background: #FFFFFF;
  box-sizing: border-box;
}
.custom-radio .custom-control-label::before { border-radius: 50%; }
.custom-control input:checked ~ .custom-control-label::before {
  border-color: var(--shelf-text, #1A1A1A);
  background: var(--shelf-text, #1A1A1A);
}
/* Tečka uvnitř — aby zaškrtnutí neslo tvar, ne jen tmavší plochu. */
.custom-control input:checked ~ .custom-control-label::after {
  content: "";
  position: absolute;
  left: -21px;
  top: calc(0.15em + 5px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
}
.custom-checkbox .custom-control-label::after { border-radius: 0; }
/* Obrys při procházení klávesnicí — input je neviditelný, takže by focus
   jinak nebylo kam nakreslit. */
.custom-control input:focus-visible ~ .custom-control-label::before {
  outline: 2px solid var(--co-focus, #3F7A1E);
  outline-offset: 2px;
}

/* --- panely -------------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.card-block,
.card-body { padding: 24px; }

#left-column .block-categories,
#left-column #search_filters,
#left-column .block,
#right-column .block,
.block-category,
#category-description {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 24px;
  margin-bottom: 24px;
}

#left-column .block-categories .h6,
#left-column #search_filters .h6,
#search_filters .facet-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6F6F68;
}

#search_filters .ui-slider-horizontal .ui-slider-range { background: var(--accent-area); }

#search_filters .ui-slider-handle {
  background: var(--white);
  border: 2px solid var(--shelf-green);
  border-radius: var(--radius-pill);
}

/* --- řazení a stránkování ------------------------------------------------ */

.products-selection {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  padding: 14px 20px;
  margin-bottom: 24px;
}

.products-sort-order .select-title {
  background: var(--white);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  font-size: 13px;
  padding: 8px 16px;
  box-shadow: none;
}

.products-sort-order .dropdown-menu {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-overlay);
  padding: 6px 0;
}

.products-sort-order .select-list:hover {
  background: var(--shelf-green-soft);
  color: var(--shelf-green-deep);
}

.pagination { background: transparent; padding: 16px 0; }

/* Obě třídy nese jeden <ul> (page-list pagination …), ne dva vnořené prvky —
   potomkovský selektor se proto nikdy netrefil. */
.page-list.pagination {
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: inline-flex;
  gap: 4px;
}

.pagination a,
.pagination .disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 14px;
  text-decoration: none;
}

.pagination a:hover { background: var(--shelf-green-soft); color: var(--shelf-green-deep); }

/* Aktuální stránka. Šablona _partials/pagination.tpl vypíše
   `<li class="page-item active"><a class="page-link disabled …">`, třída
   `current` z jádrové šablony tu není — starý selektor .pagination .current a
   se proto nikdy neuplatnil a všechna čísla vypadala stejně.
   Specificita (0,4,0) je potřeba: přebíjí i `.pagination .disabled` (0,2,0),
   které na aktivní odkaz sedá zároveň. */
.pagination .page-item.active .page-link {
  background: var(--accent-area);
  color: var(--ink);
  font-weight: 600;
}
/* Aktivní číslo není odkaz nikam, ať se pod myší nechová jako odkaz. */
.pagination .page-item.active .page-link:hover { background: var(--accent-area); }

/* --- košík a pokladna ---------------------------------------------------- */

/* .checkout-step ve skupine neni: adaptisultracart ho kresli sam pres
   `body#checkout .checkout-step` (1,1,0) a hole (0,1,0) nikdy nevyhralo.
   Zaobleni panelu kroku resi token --co-r-lg vys, ktery uz cte --radius-card. */
.cart-grid-body .card,
.cart-grid-right .card,
.cart-summary,
#checkout .card,
.order-confirmation-table,
#order-details {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: none;
  margin-bottom: 20px;
}

.cart-item { border-bottom: 1px solid var(--border-hairline); padding: 20px 0; }
.cart-items .cart-item:last-child { border-bottom: 0; }

.product-line-grid-body .product-line-info .label,
.cart-item .product-line-info a.label {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 20px;
  color: var(--text-body);
  text-decoration: none;
}

.cart-summary-line { font-size: 15px; color: var(--text-muted); }
.cart-summary-line .label,
.cart-summary-line .value { color: var(--text-body); }

.cart-summary-line.cart-total,
.cart-total .value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-body);
}

.cart-detailed-actions .btn,
.checkout .btn-primary { width: 100%; min-height: 48px; }

#checkout .checkout-step .step-title,
.checkout-step .step-title {
  font-family: var(--font-screen);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-body);
  padding: 20px 24px;
  margin: 0;
}

#checkout .checkout-step .step-number,
.checkout-step .step-number {
  background: var(--chalk);
  color: var(--text-body);
  border-radius: var(--radius-pill);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

#checkout .checkout-step.-current .step-number,
.checkout-step.-current .step-number { background: var(--accent-area); color: var(--ink); }

/* Hotový krok: číslo musí zůstat čitelné i na inkoustové ploše.
   -------------------------------------------------------------------------
   Pravidlo o řádek výš dává -current kroku zelenou plochu a inkoustové písmo.
   Jenže adaptisultracart u hotového kroku plochu PŘEMALUJE na --co-success
   (ř. 117 checkout-1.3.37.css), a to je v tomhle tématu inkoust — kdežto barva
   písma dál padá z pravidla pro -current, protože to má vyšší specificitu
   (1,3,0) než základní pravidlo modulu (1,2,1).

   Krok, na kterém zákazník stojí, je ale zároveň -current I opc-done, jakmile
   jsou jeho údaje vyplněné. Výsledek: inkoust na inkoustu, 1 : 1 — z odznaku
   zbyl tmavý čtvereček bez čísla.

   Písmo se proto váže na plochu, ne na stav. Bílá na #1A1A1A je 17,4 : 1.
   Kdyby se --co-success někdy vrátil na zelenou, musí se s ním změnit i tohle. */
body#checkout #js-checkout-process .checkout-step.opc-done .step-number {
  color: #FFFFFF;
}

#checkout .checkout-step.-complete .step-title .done { color: var(--shelf-green); }

.delivery-option,
.payment-option {
  background: #F4F2EF;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.delivery-option:hover,
.payment-option:hover { border-color: #D5CEC2; }

/* --- hlášky -------------------------------------------------------------- */

.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  font-size: 15px;
  padding: 15px 20px;
}

.alert-success { background: var(--shelf-green-soft); border-color: #CFE6B8; color: var(--shelf-green-deep); }
.alert-danger  { background: #FDF2F4; border-color: #F0CCD3; color: #B02A1F; }
.alert-warning { background: #FDF1E9; border-color: #F2D6C1; color: #A55A14; }
.alert-info    { background: #EEF1E9; border-color: var(--border-hairline); color: var(--text-body); }

/* --- modál po vložení do košíku ------------------------------------------ */

.modal-content {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay);
}

/* Okno po vložení do košíku ještě patří předchozí značce.
   -------------------------------------------------------------------------
   theme.css má `.blockcart-modal .modal-content { background-color: transparent }`
   (0,2,0) — přebíjí .modal-content výše (0,1,0), takže ze základu zbyl
   prázdný rám bez výplně a bez stínu. Uvnitř leží `.modal-gray` s plochou
   #F6F6F6 (barva, která v paletě není) bez zaoblení, takže jeho špičaté rohy
   vystupují přes 20px zaoblení rodiče. Id přebíjí obojí, overflow zaoblení
   dotáhne; .modal-header / .modal-title žádná šablona nevykresluje.

   #arrow-icon a #cart-icon je dvouvteřinová animace vozíku z předchozího
   obchodu — po hlavní akci obchodu to vypadá, že se něco rozbilo. */
#blockcart-modal .modal-content {
  background: var(--surface-card);
  overflow: hidden;
}

#blockcart-modal .modal-body .modal-gray {
  background: transparent;
  padding: var(--sp-8);
}

#arrow-icon,
#cart-icon { display: none; }

#blockcart-modal .product-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 22px;
  color: var(--text-body);
}

/* --- obsahové stránky a účet --------------------------------------------- */

#main .page-header h1,
.page-header h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: none;
}

.page-content.page-cms,
#authentication .page-content,
#identity .page-content,
#history .page-content,
#addresses .page-content {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 28px;
}

.links .h3,
.myaccount-title,
.block-contact-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* V patičce jsou tyhle nadpisy na tmavé ploše. */
.rm-footer .links .h3,
.rm-footer .myaccount-title,
.rm-footer .block-contact-title { color: #9EAA99; }

.rm-footer .links .collapse { display: block; }

/* RM-BLOK: záchranná síť — konec */

/* ============================================================================
   RM-BLOK: obálka stránky a detail jídla — zacatek

   Zdrojové téma drželo šířku obsahu v .l-wrapper. Dává mu stejné metriky jako
   .rm-shell, aby hlavička, obsah i patička stály v jedné ose.
   ========================================================================= */

#wrapper.l-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 56px;
  background: transparent;
  box-shadow: none;
}

/* --- fotka a náhledy ----------------------------------------------------- */

.rm-detail__images { margin: 0 0 24px; }

.rm-detail__plate {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--shelf-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
}

.rm-detail__plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rm-detail__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.rm-detail__thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  background: var(--shelf-surface);
}

/* --- popis a parametry --------------------------------------------------- */

.rm-detail__sheet {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border-hairline);
}

.rm-detail__block { margin-bottom: 32px; max-width: var(--measure-text); }

.rm-detail__block .product-description {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}

/* Datový list: dvousloupec, teplá zebra. Čísla pod sebou, ať jdou porovnat. */
.rm-sheet {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.rm-sheet dt,
.rm-sheet dd {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-hairline);
}

.rm-sheet dt { font-weight: 600; color: var(--text-body); }
.rm-sheet dd { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rm-sheet dt:nth-of-type(odd),
.rm-sheet dd:nth-of-type(odd) { background: var(--chalk); }

@media (max-width: 575px) {
  .rm-sheet { grid-template-columns: 1fr; }
  .rm-sheet dt { border-bottom: 0; padding-bottom: 0; }
  .rm-sheet dt:nth-of-type(odd),
  .rm-sheet dd:nth-of-type(odd) { background: transparent; }
}

.rm-detail__brand { display: block; margin-bottom: 8px; }
.rm-detail__lede { font-size: 17px; line-height: 1.55; color: var(--text-muted); margin: 0 0 20px; }
.rm-detail__note { font-size: 13px; color: #6F6F68; }

.rm-detail__h {
  font-family: var(--font-screen);
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-body);
  margin: 0 0 12px;
}

/* --- proužek se sliby na úzkém displeji ---------------------------------- */

@media (max-width: 767px) {
  #wrapper.l-wrapper { padding: 0 16px 40px; }
  .rm-detail__sheet { margin-top: 28px; padding-top: 24px; }
}

/* RM-BLOK: obálka stránky a detail jídla — konec */

/* ============================================================================
   RM-BLOK: přebití obecných pravidel pro pole — zacatek

   Záchranná síť výš cílí mimo jiné na input[type="search"] a [type="number"].
   Selektor s atributem má specificitu třídy, takže přebíjel .rm-search__input
   i .rm-qty__input a značkové metriky polí padaly. Tady se vracejí, o třídu
   výš přes rodiče.
   ========================================================================= */

.rm-header .rm-search__input {
  height: 44px;
  padding: 0 12px 0 40px;
  border-radius: var(--radius-pill);
  font-size: 15px;
}

.rm-header .rm-search__input:focus {
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.rm-cart .rm-qty__input,
.rm-qty .rm-qty__input {
  height: 48px;
  padding: 0 8px;
  text-align: center;
  font-weight: 600;
  border-radius: var(--radius-1);
  background: var(--chalk);
  font-variant-numeric: tabular-nums;
}

/* RM-BLOK: přebití obecných pravidel pro pole — konec */

/* Tlačítko není odkaz v textu — podtržení z obecného pravidla pro <a> na něj
   nepatří. Platí i pro odkazy, které tlačítko jen předstírají. */
a.rm-btn,
a.rm-btn:hover,
a.btn,
a.btn:hover,
.rm-nav__link,
.rm-nav__link:hover,
.rm-minicart__button,
.rm-minicart__button:hover,
.rm-logo,
.rm-logo:hover,
.rm-account,
.rm-account:hover {
  text-decoration: none;
}

/* Nadpisy sloupců v patičce dodávají tři různé moduly a každý si nese vlastní
   třídu. Sjednocujeme je na značkový verzálkový popisek, ať pruh drží jednu
   linku. */
.rm-footer .myaccount-title,
.rm-footer .myaccount-title a,
.rm-footer .block-contact-title,
.rm-footer .links .h3,
.rm-footer h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #9EAA99;
  margin: 0 0 10px;
  text-decoration: none;
}

/* Odrážky u slibů: značka používá pomlčku, ne puntík. Pomlčka je písmeno,
   ne plocha — plochová zelená #7CC93C má na pískovém pruhu 1,78 : 1.
   Písmenková zelená #3F7A1E má 4,56 : 1. */
.rm-sliby__seznam li::before {
  content: "—";
  margin-right: 8px;
  color: var(--text-accent);
}

/* Sloupec „Váš účet" dodává ps_customeraccountlinks s vlastními třídami.
   Srovnáváme ho do řady s ostatními sloupci patičky. */
.rm-footer .links.wrapper,
.rm-footer .block-contact {
  flex: 1 1 160px;
  padding: 0;
}

.rm-footer .footer__title,
.rm-footer .footer__title--desktop,
.rm-footer .footer__title--mobile {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #9EAA99;
  margin: 0 0 10px;
  text-decoration: none;
  display: block;
}

.rm-footer .account-list,
.rm-footer .block-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rm-footer .account-list li,
.rm-footer .block-contact li { margin-bottom: 6px; }

.rm-footer .account-list a { color: #B6BFB2; text-decoration: none; font-size: 14px; }
.rm-footer .account-list a:hover { color: var(--paper); }

/* Nadpis stránky — jedna deklarace pro celý obchod. Do téhle chvíle stály
   v souboru dvě: clamp(34px, 5vw, 56px) pro výpisy a plánovač a
   clamp(30px, 4vw, 44px) pro košík a Classic, takže titulky vycházely
   44 / 56 px podle toho, na které stránce jste stáli, a kontaktní formulář
   měl 22 px z Rubiku zdrojového tématu.

   Stupnice má tři stupně a každý má důvod:
     78 px Bebas      — jedno prohlášení na úvodní stránce (.rm-uvod__h1)
     52 px Bebas      — název jídla na detailu (.rm-detail__title)
     44 px Cormorant  — název stránky, kurzíva, jeden na obrazovku
   Nic dalšího tuhle roli nemá. */
#main > .h1,
#main h1.h1,
.cart-grid h1,
#content-wrapper > h1,
.rm-listing__h1,
.rm-jidelnicek__h1,
#main .page-header h1,
#js-product-list-header,
#_desktop_category_header h1,
.block-category h1,
.rm-detail__h1,
.contact-form h1,
.page-not-found h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Zdrojové téma nese v patičce dva nadpisy sloupce: jeden pro mobil (rozbalovací)
   a jeden pro desktop. Na šířce nad 992 px se ukazovaly oba pod sebou. */
@media (min-width: 992px) {
  .rm-footer .footer__title--mobile { display: none; }
}

@media (max-width: 991px) {
  .rm-footer .footer__title--desktop { display: none; }
}

/* Hlavička tabulky v košíku: verzálkový popisek, ne běžný text. */
.cart-grid .cart-overview .cart-items + *,
.cart-grid-body .card-block > .row > div > .h6,
.cart-grid-body .cart-header,
.cart-grid-body .row > .col-md-6 > .h6 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6F6F68;
}

/* Značka je na dlaždici nepovinná. Bez rezervovaného řádku skáče název
   nahoru a jména v řadě si přestanou odpovídat — porovnávat se pak dá hůř. */
.product-miniature .rm-card .rm-brand {
  display: block;
  min-height: 1.4em;
}

.product-miniature .rm-card .rm-name { min-height: 2.1em; }

/* ============================================================================
   RM-BLOK: popis jídla — zacatek

   Popis produktu je HTML složené importérem: perex ze seedu, pak Složení,
   Alergeny, tabulka výživových hodnot, Ohřev a Skladování. Bez těchhle
   pravidel splývá <th> s <td> a nadpisy sekcí se lepí na předchozí odstavec.
   ========================================================================= */

.rm-detail__block .product-description > h3 {
  font-family: var(--font-screen);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-body);
  margin: 28px 0 8px;
}

.rm-detail__block .product-description > h3:first-child { margin-top: 0; }

.rm-detail__block .product-description p { margin: 0 0 12px; }

/* Výživové hodnoty: dva sloupce, čísla pod sebou, teplá zebra. */
.product-description table.rm-nutrition {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  margin: 4px 0 8px;
  font-variant-numeric: tabular-nums;
}

.product-description table.rm-nutrition th,
.product-description table.rm-nutrition td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 14.5px;
  line-height: 1.4;
  vertical-align: baseline;
}

.product-description table.rm-nutrition th {
  width: 60%;
  text-align: left;
  font-weight: 500;
  color: var(--text-body);
}

.product-description table.rm-nutrition td {
  text-align: right;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Řádky „z toho…" patří pod svůj nadřazený, a tak je i odsazujeme. */
.product-description table.rm-nutrition tr:nth-child(3) th,
.product-description table.rm-nutrition tr:nth-child(5) th {
  padding-left: 28px;
  color: var(--text-muted);
}

.product-description table.rm-nutrition tr:last-child th,
.product-description table.rm-nutrition tr:last-child td { border-bottom: 0; }

/* Název jídla nese Bebas i na detailu. Na dlaždici je ve verzálkách a při
   prokliku by se jinak změnilo písmo — u téhož jídla dvakrát jinak.
   Kurzívní Cormorant zůstává nadpisům výpisů a obsahových stránek. */
#product #main .rm-detail__title,
#main h1.rm-detail__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
  font-size: clamp(32px, 4.4vw, 52px);
}

/* RM-BLOK: popis jídla — konec */

/* ============================================================================
   RM-BLOK: opravy po auditu katalogu — zacatek
   ========================================================================= */

/* 1. Vyprodané jídlo mělo na dlaždici plné zelené tlačítko „Zobrazit jídlo".
      Zelená plocha je výzva k nákupu; u něčeho, co koupit nejde, klame.
      Obrysová varianta prohrávala specificitou s .product-miniature .rm-btn. */
.rm-btn--ghost,
.product-miniature .rm-btn--ghost,
.rm-detail .rm-cart .rm-btn--ghost {
  background: transparent;
  border-color: var(--border-hairline);
  color: var(--text-body);
}

.rm-btn--ghost:hover,
.product-miniature .rm-btn--ghost:hover,
.rm-detail .rm-cart .rm-btn--ghost:hover {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-body);
}

/* 3. Nepřístupné tlačítko se tlumilo dvakrát — barvou i průhledností —
      a skončilo na 1,97 : 1. Tlumí ho teď jen barva, ta má 5,96 : 1. */
.rm-btn:disabled,
.rm-btn[aria-disabled="true"],
.product-miniature .rm-btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  background: var(--chalk);
  border-color: var(--border-hairline);
  color: var(--text-muted);
}

/* 4. Patička: drobné písmo pod čarou mělo 2,43 : 1 na zelenočerné. */
.rm-footer .rm-logo__claim { color: #9EAA99; } /* 6,42 : 1 */

/* 5. Sleva na detailu jídla se nevykreslovala přeškrtnutá: pravidlo mířilo na
      .rm-price-was, šablona vypisuje .rm-price__was. */
.rm-detail .rm-price__was,
.rm-price-row .rm-price__was {
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}

/* 6. Název jídla v košíku dědil Rubik ze zdrojového tématu a nadpis souhrnu
      Trebuchet. Jedno jídlo mělo na třech stránkách tři písma. */
.product-line-grid .product-line__title,
.product-line-grid .product-line-info .label,
.cart-item .product-line-info a.label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-body);
  text-decoration: none;
}

.cart-summary h2,
.cart-grid h2,
#main h2:not([class]) {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* 7. Prostrkání verzálkových popisků je 0,08em. Místa, která si držela 0,13
      nebo 0,16 z produkčního obchodu, kde byl popisek ve Space Mono.
      Doplněn rozbalený mini-košík: visí nad stránkou, na níž jsou popisky
      „VYBRANÉ BALENÍ“ a „POČET“ na 0,08em, a dva stejné popisky vedle sebe
      s jiným prostrkáním čte oko jako dvě různá písma.
      .rm-promise__legal v seznamu není — je to věta, ne popisek. */
.rm-brand,
.rm-footer__head,
.rm-pocitadlo__nad,
.rm-promise__item,
.rm-logo__claim,
.rm-selected__label,
.rm-qty__label,
.rm-cart-line__brand,
.rm-minicart__panel-head,
.rm-minicart__foot-label,
.category_description_action,
.t-label {
  letter-spacing: 0.08em;
}

/* RM-BLOK: opravy po auditu katalogu — konec */

/* Slevový štítek na dlaždici. Bez vlastního umístění stál jako druhé dítě
   flexu vedle fotky, přetékal z talíře a text se lámal. Malina patří výhradně
   skutečné slevě, takže štítek je na kartě nejvýš jeden. */
.rm-plate .rm-sleva {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Perex kategorie zdrojové téma schovává (`#category-description-full{display:none}`)
   a odkrývá ho JS přepínačem „Zobrazit více". Ten se opírá o zkrácenou variantu,
   kterou naše šablona nevykresluje — text tak zůstal v HTML, ale nikdo ho
   neviděl. Perexy nesou u kategorií čísla (od kolika korun za 100 g), takže
   patří na stránku rovnou, ne za proklik. */
.block-category #category-description-full,
#category-description-full {
  display: block;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure-lead);
}

.block-category #category-description-full p:last-child { margin-bottom: 0; }

/* Přepínač nemá co přepínat. */
.category_description_action { display: none; }

/* ============================================================================
   RM-BLOK: jídelníček na týden — zacatek

   Sedm sloupců je jediné, co v tomhle souboru dosud nebylo. Zbytek stránky
   staví na už existujících třídách (.rm-shell, .rm-btn, .rm-pilulka,
   .rm-unit-price, .rm-vyber, .rm-zebrik__nevyhoda), takže plánovač vypadá
   jako zbytek obchodu, ne jako přilepená appka.

   Zlomy jsou tytéž jako u mřížky produktů: 1199 / 991 / 767 / 575.
   ========================================================================= */

.rm-jidelnicek { padding: 40px 0 0; background: var(--paper); }

.rm-jidelnicek__h1 { margin: 0 0 12px; }

.rm-jidelnicek .rm-zebrik__nevyhoda {
  max-width: var(--measure-text);
  margin: 0 0 28px;
}

/* --- nastavení ----------------------------------------------------------- */

.rm-nastaveni {
  background: var(--white);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin: 0 0 24px;
}

.rm-nastaveni__radek {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 32px;
}

.rm-nastaveni__radek .rm-vyber { flex: 0 0 auto; min-width: 140px; }
.rm-nastaveni__radek .form-control { min-width: 120px; }

.rm-nastaveni__filtry {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rm-nastaveni__filtry legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; }

.rm-nastaveni__filtry .rm-pilulka { cursor: pointer; border: 1px solid #857C70; }
.rm-nastaveni__filtry .rm-pilulka input { margin-right: 6px; }

.rm-nastaveni__rozsah {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.rm-nastaveni__rozsah strong { color: var(--text-body); font-weight: 600; }

.rm-nastaveni__akce {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
}

/* --- poznámky: co nevyšlo ------------------------------------------------ */

.rm-poznamky {
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--shelf-green-soft);
  border-left: 3px solid var(--shelf-green);
  border-radius: var(--radius-1);
}

.rm-poznamky__radek {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.rm-poznamky__radek + .rm-poznamky__radek { margin-top: 6px; }

/* --- týden: sedm sloupců ------------------------------------------------- */

.rm-tyden {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.rm-den {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 14px 12px;
  min-width: 0;
}

.rm-den__hlavicka { margin: 0 0 10px; }

.rm-den__nazev {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Zkratka je pro úzký displej; na širokém stačí celé jméno. */
.rm-den__zkratka { display: none; border: 0; text-decoration: none; }

.rm-den__chody {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

/* --- jedno jídlo v políčku ----------------------------------------------- */

.rm-chod {
  position: relative;
  background: var(--chalk);
  border-radius: var(--radius-1);
  padding: 10px 26px 10px 10px;
}

.rm-chod__nazev {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-body);
  text-decoration: none;
}

.rm-chod__nazev:hover { color: var(--link-hover); text-decoration: none; }

.rm-chod__cisla {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.rm-chod__cisla span { display: block; }
.rm-chod__kcal { font-weight: 600; color: var(--text-body); }

.rm-chod__cena {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.rm-chod__cena .rm-unit-price { margin-top: 4px; }

.rm-chod__vyprodano {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sale);
}

.rm-chod__odebrat {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .6);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}


.rm-chod__odebrat:hover { background: var(--white); color: var(--text-body); }

/* --- prázdné políčko ----------------------------------------------------- */

.rm-chod--prazdny {
  background: transparent;
  border: 1px dashed #857C70;
  padding: 8px;
}

/* „Vybrat jídlo" je ovládací prvek, ne cena. Zelená #3F7A1E na téhle
   obrazovce znamená jedinou věc — cenu za jednotku a „nejlevnější v řadě";
   v jednadvaceti políčkách týdne by ten signál značce značně zředila.
   Prvek je zároveň <a> i <summary> a má list-style i text-decoration
   vypnuté, takže po odebrání barvy by mu nezbyla žádná stopa, že se na něj
   kliká — podtržení se proto vrací. */
.rm-chod__vyber-spust {
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-body);
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* plocha na klik nesmí být pod 24 px */
  min-height: 24px;
  padding: 3px 0;
}

.rm-chod__vyber-spust::-webkit-details-marker { display: none; }

.rm-chod__vyber .form-control {
  margin: 8px 0 6px;
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
}

.rm-chod__vyber-ok { width: 100%; padding: 8px 12px; font-size: 13px; }

/* --- součet dne ---------------------------------------------------------- */

.rm-den__soucet {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border-hairline);
  font-variant-numeric: tabular-nums;
}

.rm-den__soucet-kcal {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-body);
}

.rm-den__soucet-pod {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* --- součet týdne a objednání -------------------------------------------- */

.rm-objednat {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 40px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.rm-objednat__hlavni {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.rm-objednat__pod {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- zlomy: stejné jako u mřížky produktů -------------------------------- */

@media (max-width: 1199px) {
  .rm-tyden { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .rm-tyden { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .rm-tyden { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rm-nastaveni { padding: 16px; }
  .rm-nastaveni__radek { gap: 14px 20px; }
}

@media (max-width: 575px) {
  .rm-tyden { grid-template-columns: 1fr; }
  .rm-den { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; }
  .rm-den__hlavicka { flex: 0 0 100%; }
  .rm-den__chody { flex: 1 1 100%; }
  .rm-den__soucet { flex: 1 1 100%; }
  .rm-objednat { flex-direction: column; align-items: stretch; }
  .rm-objednat .rm-btn { width: 100%; }
}

/* RM-BLOK: jídelníček na týden — konec */

/* Vyprodané položky v jídelníčku: malinová linka, protože to je překážka
   nákupu, ne poznámka. Malina jinak patří jen slevě — tady je to jediná
   další věc, která zákazníkovi brání dokončit, co chtěl. */
.rm-poznamky--vyprodano {
  background: var(--sale-wash, #FDF2F4);
  border-left-color: var(--sale);
}

.rm-objednat__blok {
  display: block;
  margin-top: 2px;
  color: var(--sale);
  font-variant-numeric: tabular-nums;
}

.rm-objednat__nic {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--sale);
}

/* ============================================================================
   RM-BLOK: jídelníček — opravy po auditu — zacatek
   ========================================================================= */

/* Prázdné políčko poznal jen ten, kdo rozezná přerušovanou linku s poměrem
   1,29 : 1. Tenhle odstín má 3,27 : 1 na bílé a 3,04 : 1 na krémové, takže
   projde i jako netextový prvek podle WCAG. */

/* Křížek měl 22 × 22 px, minimum pro dotyk je 24. Vejde se beze změny
   rozvržení — sedí v 26px pravém okraji karty. */

/* „Vybrat jídlo" mělo odebranou značku rozbalení a barvu odkazu, takže se
   tvářilo jako odkaz jinam. Značka se vrací, jen vlastní — nativní trojúhelník
   se v každém prohlížeči kreslí jinak. */

.rm-chod__vyber-spust::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.rm-chod__vyber[open] > .rm-chod__vyber-spust::before { transform: rotate(90deg); }

/* Zkratka dne ležela v DOM a nikdy se nezobrazila. Na nejužším displeji, kde
   je den v řádku vedle jídel, dává smysl právě ona. */
/* Premisa tohohle pravidla („na nejužším displeji je den v řádku vedle jídel")
   už neplatí: tatáž media query dává .rm-den__hlavicka flex: 0 0 100 %, takže
   hlavička stojí na vlastním řádku přes celou kartu. Naměřeno na 390 px:
   hlavička 332 px, zkratka „Po" v ní 17 px, celé „Pondělí" by zabralo 52 px.
   Navíc je zkratka <abbr title="Pondělí"> a vysvětlivku v title se na dotyku
   nedá vyvolat — zůstalo by „Po" s tečkovaným podtržením a kurzorem help. */
@media (max-width: 575px) {
  .rm-den__zkratka { display: none; }
}

/* Vodorovné posouvání navigace má být poznat. */
@media (max-width: 1199px) {
  .rm-nav__inner {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .rm-nav__link { scroll-snap-align: start; }
}

/* RM-BLOK: jídelníček — opravy po auditu — konec */

/* ============================================================================
   RM-BLOK: pozvánka na jídelníček na úvodní stránce — zacatek
   ========================================================================= */

.rm-pozvanka {
  padding: 56px 0;
  background: var(--chalk);
  border-top: 1px solid var(--border-hairline);
}

.rm-pozvanka__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px 64px;
  align-items: center;
}

.rm-pozvanka__text .rm-h2 { margin: 0 0 12px; }

.rm-pozvanka__pod {
  margin: 0 0 24px;
  max-width: var(--measure-lead);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Tři čísla vedle sebe. Číslo nese Bebas, protože je to prohlášení —
   popisek pod ním zůstává v DM Sans, aby šel přečíst. */
.rm-pozvanka__fakta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.rm-pozvanka__fakt {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-hairline);
}

.rm-pozvanka__fakt:last-child { border-bottom: 0; padding-bottom: 0; }

/* Čísla pozvánky (počet jídel, rozsah kalorií, počet políček) nejsou cena.
   Na úvodní stránce stojí pár set pixelů od zelených jednotkových cen na
   dlaždicích — dvě různé věci stejnou barvou na jedné obrazovce. Důraz
   nesou samy: 30–42 px v Bebas. Zelená zůstává v pozvánce jen plochou
   tlačítka „Sestavit jídelníček". */
.rm-pozvanka__cislo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rm-pozvanka__popis {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 991px) {
  .rm-pozvanka { padding: 40px 0; }
  .rm-pozvanka__inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 575px) {
  .rm-pozvanka__fakt { grid-template-columns: 1fr; gap: 2px; }
  .rm-pozvanka__cislo { font-size: 28px; }
}

/* RM-BLOK: pozvánka na jídelníček — konec */

/* ============================================================================
   RM-BLOK: kontrast ovládacích prvků a bílý pruh na úvodní stránce — zacatek

   --border-hairline (#E8E2D8) je dekorativní linka: na krémové má 1,20 : 1.
   To je v pořádku pro oddělovač, ale ne pro okraj, který JE tím prvkem —
   obrysové tlačítko a pole formuláře se bez něj nedají najít. WCAG 1.4.11
   chce u netextových prvků 3 : 1, proto vlastní token.
   #8E8476 má 3,68 : 1 na bílé, 3,41 : 1 na krému a 3,21 : 1 na písku. Token je deklarovaný
   nahoře v pásmu sémantických aliasů, vedle --border-hairline.
   ========================================================================= */

/* Obrysové tlačítko: na úvodní stránce stálo vedle zeleného jako holý text. */
/* Šířku i styl je nutné napsat: zdrojové téma obrysovým tlačítkům okraj
   nuluje (border: none), takže samotná barva nic nevykreslila — tlačítko
   „Sestavit jídelníček" stálo na úvodní stránce jako holý text. */
.rm-btn--ghost,
.product-miniature .rm-btn--ghost,
.rm-detail .rm-cart .rm-btn--ghost,
.btn-secondary,
.btn-tertiary {
  border: 1px solid var(--border-control);
}

.rm-btn--ghost:hover,
.product-miniature .rm-btn--ghost:hover,
.rm-detail .rm-cart .rm-btn--ghost:hover,
.btn-secondary:hover,
.btn-tertiary:hover {
  border: 1px solid var(--border-strong);
}

/* Pole formulářů: totéž. Týká se hledání, pokladny, účtu i plánovače. */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea,
.rm-header .rm-search__input,
.products-sort-order .select-title {
  border-color: var(--border-control);
}

.form-control:hover,
.rm-header .rm-search__input:hover { border-color: var(--border-strong); }

/* Úvodní stránka: .page-home ze zdrojového tématu je bílá, takže 32px mezera
   mezi úvodem a řadou jídel svítila jako bílý pruh přes celou šířku mezi
   dvěma krémovými pásy. */
#wrapper.page-home,
section.page-home { background: var(--paper); }


/* RM-BLOK: kontrast ovládacích prvků — konec */

/* ============================================================================
   RM-BLOK: opravy po auditu rozhraní — zacatek
   ========================================================================= */

/* 1. Nadpisy. Zdrojové theme.css staví výchozí rodinu na Rubik, takže každý
      nadpis, který nemá vlastní pravidlo, vypadl z písma značky — na stránce
      Časté dotazy jich takhle bylo devatenáct. Základ je DM Sans, Bebas
      a Cormorant si pak berou jen ty nadpisy, které o ně stojí. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
}

/* 2. Kurzívní Cormorant zůstává nadpisu stránky a jednomu nadpisu pásu.
      Nadpisy uvnitř obsahových stránek a dvojice slibů na úvodní stránce
      se vracejí do DM Sans — jinak jich na jedné obrazovce stálo až pět. */
.page-content--cms h2,
.page-content--cms h3,
#main h2:not([class]),
.cart-summary h2,
.cart-grid h2,
.rm-sliby .rm-h2 {
  font-family: var(--font-screen, "DM Sans", system-ui, sans-serif);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rm-sliby .rm-h2 { font-size: 19px; line-height: 1.3; }

/* 3. Pomlčky u slibů: vyřešené v základních pravidlech .rm-sliby__seznam
      a .rm-sliby__ne. Zelená smí být písmenem jen v odstínu #3F7A1E,
      vlasová #E8E2D8 (1,12 : 1) není písmo vůbec. */

/* 4. Nativní <select> řazení má okraj ze zdrojového tématu (1,26 : 1) a nulovou
      šířku — barva sama nestačí, musí se napsat celá zkratka. */
.custom-select,
select.custom-select,
.products-sort-order .select-title {
  border: 1px solid var(--border-control);
}

.rm-nastaveni__filtry .rm-pilulka--vybrana {
  border-color: var(--shelf-green);
  background: var(--shelf-green-soft);
  color: var(--shelf-green-deep);
}

/* 6. Popisek legendy vedle dvou stejných popisků měl jiný řez i velikost. */
legend.rm-vyber__popisek {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 7. Obsahové stránky: text byl odsazený o 20 px proti nadpisu a řádka měla
      přes 110 znaků. Měřítko čitelnosti je 68 znaků. */
section.page-content--cms { padding-left: 0; padding-right: 0; }

.page-content--cms p,
.page-content--cms li { max-width: var(--measure-text); }

/* 7b. Doslovná citace z certifikátu. Bootstrap dává holému <blockquote> jen
      spodní mezeru, takže citovaný rozsah auditu vypadal jako další odstavec
      textu. U věty uvozené „doslova podle certifikátu" musí být na první
      pohled vidět, kde cizí text začíná a kde končí. */
.page-content--cms blockquote {
  margin: 20px 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--border-control);
  max-width: var(--measure-text);
}

.page-content--cms blockquote p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 8. Přeskočení na obsah. Mezi začátkem stránky a obsahem stojí 16 prvků,
      přes které se klávesnicí prochází na každé stránce znovu. */
.rm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--shelf-green);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-1);
  text-decoration: none;
}

.rm-skip:focus { left: 8px; top: 8px; }

/* Cíl přeskoku musí jít zaostřit, jinak fokus po skoku spadne zpátky na body. */
#content-main:focus { outline: none; }

/* 9. Lepicí lišta košíku na mobilu překrývala zaostřený odkaz v patičce.
      Odsazení musí být UVNITŘ tmavé plochy: #footer.l-footer má pozadí
      transparent (ř. ~2106), takže 96 px na něm leželo pod tmavým pruhem
      a vykreslilo se jako prázdný krémový pás přes 12 % displeje
      na konci každé stránky. */
@media (max-width: 767px) {
  html { scroll-padding-bottom: 96px; }
  .rm-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* RM-BLOK: opravy po auditu rozhraní — konec */

/* ============================================================================
   RM-BLOK: drobnosti po auditu rozhraní — zacatek
   ========================================================================= */

/* 1. iOS Safari přibližuje stránku při zaostření pole menšího než 16 px a zpět
      už se sám neoddálí. Na mobilu proto 16 px, na myši zůstává 15. */
@media (max-width: 767px) {
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  select,
  textarea,
  /* `select` je element (0,0,1) a theme.css má `.custom-select` (0,1,0)
     s .875rem — holý element prohraje bez ohledu na pořadí souborů.
     Týká se řazení ve výpisu, kontaktního formuláře i adres. */
  .custom-select,
  .custom-file-label,
  .rm-header .rm-search__input { font-size: 16px; }
}

/* 2. Křížek u položky košíku byl bootstrapí #DC3545 — čtvrtá červená, která
      v paletě značky není. Malina je vyhrazená slevě, takže odebrání je
      neutrální: barva textu, ne poplach. */
.cart-line-product-actions .remove-from-cart,
.cart-line-product-actions .remove-from-cart i { color: var(--text-muted); }

.cart-line-product-actions .remove-from-cart:hover,
.cart-line-product-actions .remove-from-cart:hover i { color: var(--text-body); }

/* 3. Na pískovém pruhu (--bg-band #F3EFE8) klesne --border-control na 2,85 : 1.
      Prvky, které na něm leží, dostanou tmavší okraj. Pilulky plánovače mají
      #857C70 rovnou v základním pravidle, aby stav „vybraná" (zelený okraj)
      nepadal na stejnou specifičnost a neprohrával pořadím v souboru. */
.rm-pozvanka .rm-btn--ghost,
.rm-sliby .rm-btn--ghost { border-color: #857C70; }

/* 4. Plochy na klik pod 24 px. „Vybrat jídlo" mělo 76 × 19 (opraveno
      v základním pravidle .rm-chod__vyber-spust), odkazy v patičce
      necelých 20 na výšku. */
.rm-footer__list li { margin-bottom: 2px; }

.rm-footer__link,
.rm-footer .account-list a {
  display: inline-block;
  min-height: 24px;
  padding: 3px 0;
}

/* 5. Mezi polem hledání a první položkou navigace zůstávala pod 767 px
      jednopixelová škvíra, kterou bylo vidět jako přerušenou linku. */
@media (max-width: 767px) {
  .rm-nav { margin-top: -1px; }
}

/* RM-BLOK: drobnosti po auditu rozhraní — konec */

/* ============================================================================
   RM-BLOK: zděděné šedé z Classicu — zacatek

   Zdrojové theme.css nese pět vlastních šedých na text. Měřeno na plochách
   obchodu (bílá karta #FFFFFF, krém #FAF6F0, písek #F3EFE8):

     #777777  4,48 / 4,16 / 3,91 : 1   .text-muted, .custom-select, .price,
                                       .section-description, .sort-by-row,
                                       .categorytiles-list a, caption
     #6C757D  4,69 / 4,36 / 4,09 : 1   .blockquote-footer, .figure-caption,
                                       .dropdown-header, .toast-header
     #747474  4,67 / 4,34 / 4,08 : 1   .delivery-information, .wishlist .label
     #7C7C7C  4,17 / 3,88 / 3,64 : 1   .alert-light
     #888888  3,54 / 3,29 / 3,09 : 1   .nav-tabs .nav-link

   Žádná z nich není v paletě značky a všech pět je pod 4,5 : 1. Druhotný
   text má značka jediný: kámen --stone #5F5F5A — 6,42 / 5,96 / 5,60 : 1.
   Nová šedá se nezavádí, jen se zděděné přepíšou na kámen.

   Vypnuté prvky (:disabled) se nechávají: WCAG je z požadavku vyjímá a ztmavit
   je by znamenalo tvářit se, že jdou použít.
   ========================================================================= */

caption,
.custom-select,
.section-description,
.sort-by-row,
.categorytiles-list a,
.blockquote-footer,
.figure-caption,
.dropdown-header,
.toast-header,
.delivery-information,
.wishlist .label,
.alert-light,
.nav-tabs .nav-link {
  color: var(--text-muted);
}

/* .text-muted je bootstrapovská utilita a nese !important; přebít ji jde
   jen stejnou zbraní. Zbytek seznamu jsou komponenty, tam stačí pořadí. */
.text-muted {
  color: var(--text-muted) !important;
}

/* Přepínač „ukázat heslo" u pole hesla je .btn-light: plocha #EEEEEE na bílé,
   1,16 : 1, bez okraje. Prvek, který se nedá najít, se nedá ani použít —
   dostane stejnou hranu jako ostatní ovládací prvky (#8E8476, 3,68 : 1). */
.input-group-btn > .btn-light,
.input-group-append > .btn-light {
  border: 1px solid var(--border-control);
}

/* RM-BLOK: zděděné šedé z Classicu — konec */

/* RM-BLOK: opravy po měření na skutečném mobilu — zacatek
   ============================================================================
   Měřeno v Chrome přes DevTools protokol se skutečnou emulací (390×844, dpr 3,
   mobile: true), takže se vyhodnotily i media queries. Dřívější „zúžení
   kontejneru" je nespouštělo a tyhle vady proto neukázalo.
   ========================================================================= */
@media (max-width: 767px) {
  /* Boční okraj stránky je 16 px a drží ho karty obsahu. Výpis produktů ho
     ale porušoval: .products má bootstrapí margin -15px, takže dlaždice
     vyjely z mřížky a vnitřní .rm-card skončila 1 px od levého okraje a 8 px
     od pravého — nejen moc u kraje, ale ještě nesymetricky.
     Na mobilu je mřížka jednosloupcová, takže záporný okraj nemá co vyvažovat. */
  #js-product-list .products,
  .products-selection {
    margin-left: 0;
    margin-right: 0;
  }

  /* Řadicí prvek („Seřadit podle") vytlačoval vlastního rodiče až na 11 px
     od kraje obrazovky — dál než cokoliv jiného na stránce.
     Na vině je theme.css: `.sort-by-row .custom-select { min-width: 368px }`.
     Pevné minimum ze zdrojového tématu je na 390px telefonu širší než sloupec
     (286 px), a min-width přebíjí max-width — omezovat šířku shora proto
     nepomůže, naopak to vytlačí vnitřní .form-group a stránka dostane
     vodorovný posuv. Musí se přepsat samotné minimum. */
  .sort-by-row .custom-select,
  .products-selection .custom-select {
    min-width: 0;
    width: 100%;
  }
  .sort-by-row { min-width: 0; }

  /* Další bootstrapí řádek se záporným okrajem, tentokrát nad výpisem. */
  .row.u-a-i-c {
    margin-left: 0;
    margin-right: 0;
  }

  /* Dotykové cíle. Designový systém nepřipouští klikací plochu pod 24 px a
     tenhle blok si v nadpisu slibuje 44. Tyhle tři odkazy měly 20–23 px:
     jsou to samostatné odkazy bez odsazení, ne text uvnitř věty. */
  .rm-rada__vic,
  .category_description_action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Drobečky jsou řádek odkazů, ne věta — 44 px by z nich udělalo pruh,
     proto 24 px, což je práh WCAG 2.5.8 AA. */
  .rm-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  /* Samostatné odkazy, které měly pod 24 px: nápověda pod tlačítkem
     Objednat („Pokračovat ve vyplňování", 17 px) a e-mail na kontaktní
     stránce (20 px). Odkaz na podmínky uvnitř věty se záměrně nezvětšuje —
     text v souvislé větě WCAG 2.5.8 z požadavku vyjímá a roztahovat ho by
     rozhodilo řádkování odstavce. */
  .opc-cta-hint__link,
  .contact-rich a[href^="mailto:"],
  .contact-rich a[href^="tel:"],
  #content a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  /* Název jídla ve slotu jídelníčku je odkaz na detail a měl 17 px
     (blokový, bez odsazení, řádkování 16,5). V naplněném týdnu jich je
     jedenadvacet, takže je to nejčastější klikací plocha na stránce. */
  .rm-chod__nazev {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  /* Název jídla v košíku je hlavní odkaz na produkt a měl 20 px. */
  .rm-cart-line__name {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  /* Popisek přepínače u dopravy a platby je zaručený klikací cíl daný
     značkou (klik na něj přepínač vybere) a měl 20×20. Řádek je sice
     klikací i mimo něj, ale spoléhat se na to, co drží jen JavaScript,
     se nemá. Roste jen plocha, samotný ukazatel zůstává 16 px. */
  .custom-control .custom-control-label {
    min-height: 24px;
  }
}
/* RM-BLOK: opravy po měření na skutečném mobilu — konec */

/* RM-BLOK: opravy jídelníčku po měření na mobilu — zacatek
   ============================================================================
   Měřeno v Chrome přes DevTools protokol, 390×844, mobile: true.
   ========================================================================= */

/* 1) Zdvojené odsazení. Jídelníček držel od kraje 32 px, zbytek webu 16 px
   (na desktopu 88 vs 64). Na úvodní stránce sedí .rm-shell nahoře a jeho
   padding JE okraj stránky; tady je vnořený do PrestaShopího sloupce, který
   okraj už udělal:  .l-wrapper (16) → .row (-15) → .col-12 (+15) = 16
   → .rm-shell (+16) = 32. Shell si nechává jen šířku a centrování. */
.rm-jidelnicek > .rm-shell {
  padding-left: 0;
  padding-right: 0;
}

/* 2) Prázdný jídelníček: souhrnný pruh se nelepí. Je vysoký 174 px, tedy
   20,6 % displeje, a při načtení zakrýval spodních 9 px pole „Cíl na den".
   Dokud je týden prázdný, nemá co shrnovat — hlásí „Jídelníček je prázdný"
   a odkazuje na tlačítko 196 px pod ohybem. V toku poslouží líp. */
.rm-objednat--prazdny {
  position: static;
  box-shadow: none;
}

/* 3) Zaškrtnuté políčko filtru se kreslilo systémovou modrou (accent-color:
   auto), která v paletě není. Plochová zelená je na to ta správná barva:
   je to plocha, ne písmo, a fajfku na ní kreslí prohlížeč inkoustem. */
.rm-nastaveni__filtry input[type="checkbox"],
.rm-pilulka input[type="checkbox"] {
  accent-color: var(--btn-fill, #7CC93C);
}

/* 4) Text ve slotu nesmí zajíždět pod tlačítko „odebrat". .rm-chod mělo
   vpravo 26 px, jenže tlačítko je position: absolute s right: 6px a šířkou
   24 px, tedy zabírá 30 px od kraje. Poslední 4 px názvu ležely POD ním:
   klepnutí na konec dlouhého názvu jídlo ODEBRALO místo otevření. Naměřeno
   u 6 z 21 slotů. 36 = 6 (odsazení) + 24 (šířka) + 6 (mezera). */
.rm-chod { padding-right: 36px; }

/* 5) Fokus na formulářových polích. .form-control:focus dává outline: none
   a nahrazuje ho barvou rámečku (5,23 : 1, ale jen 1 px) a závojem #EEF7E4,
   který má proti bílé 1,05 : 1 — prakticky nic. Proti globálnímu
   :focus-visible (2px obrys) je to znatelně slabší a pravidlo značky říká,
   že se prstenec neodstraňuje. Barva i závoj zůstávají, obrys se vrací. */
.form-control:focus-visible,
select.form-control:focus-visible,
textarea.form-control:focus-visible {
  outline: 2px solid var(--focus-ring, #3F7A1E);
  outline-offset: 2px;
}
/* RM-BLOK: opravy jídelníčku po měření na mobilu — konec */


/* ============================================================================
   RM-BLOK: opravy po auditu mobilu a pokladny — zacatek

   Pořadí v souboru je tu nástroj: realmeal.css se v head.tpl:44 načítá až za
   CSS modulů, takže pravidlo se stejně hlubokým selektorem vyhraje pořadím.
   Do modules/adaptisultracart/views/css se NESAHÁ: soubory jsou verzované
   názvem (ASSET_VERSION) a sdílené s produkčním obchodem — změna obsahu bez
   přejmenování se neprojeví a riskuje cizí e-shop.
   ========================================================================= */

/* 1. Pole pokladny na mobilu. iOS Safari přibliží stránku při zaostření pole
      menšího než 16 px a sám se už neoddálí — zbytek objednávky se pak
      vyplňuje na stránce, která přetéká doprava a tlačítko Objednat je mimo
      obraz. Záchranná síť výše míří na `.form-control` (0,1,0), modul má
      `body#checkout .checkout-step .form-control` (1,2,1) se 14,5 px — media
      query specificitu nepřidává, takže síť prohrávala. Výška polí 44 px
      zůstává, u užšího kupónu (40 px) a hledání předvolby (34 px) se 16px text
      vejde jen s užším vnitřním odsazením. */
@media (max-width: 767px) {
  body#checkout .checkout-step .form-control,
  body#checkout .checkout-step .custom-select,
  body#checkout #js-checkout-summary .form__add-voucher .form-control,
  body#checkout .opc-tel-search,
  body#checkout .opc-map__search {
    font-size: 16px;
  }

  body#checkout #js-checkout-summary .form__add-voucher .form-control,
  body#checkout .opc-tel-search {
    padding: 0 12px;
  }
}

/* 2. Výběr jídla v plánovači. Naplnění týdne je 21 klepnutí do těchto dvou
      prvků za sebou: <select> měl 13 px (totéž přiblížení) a obě plochy kolem
      34 px, kdežto blok výše si v nadpisu slibuje dotykové cíle 44 px.
      Selektory musí být stejně hluboké jako `.rm-chod__vyber .form-control`
      (0,2,0) a stát až za ním, jinak je základní pravidlo přebíjí. */
@media (max-width: 767px) {
  .rm-chod__vyber .form-control {
    font-size: 16px;
    padding: 11px 10px;
  }

  .rm-chod__vyber .rm-chod__vyber-ok {
    min-height: 44px;
    font-size: 15px;
  }

  .rm-chod__vyber-spust {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* 3. Řazení výpisu. theme.css skrývá popisek „Seřadit podle:" už od tabletu
      (`.visible--desktop { display: none }`), takže nad seznamem jídel zůstane
      holé pole s nápisem „Důležitost" a není z čeho poznat, co to dělá.
      Popisek se má zmenšit, ne zmizet. Specificita (1,1,1) přebíjí
      `.visible--desktop` (0,1,0) i bez !important a nezávisí na tom, jestli
      šablona tu třídu ještě vypíše. Šířku pole řeší `.sort-by-row .custom-select`
      výše, ta se tímhle nemění. */
@media (max-width: 991.98px) {
  #js-product-list-top label[for="select-sort-order"] {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
  }
}

/* 4. Blok recenzí pod jídlem je jediná část detailu mimo designový systém:
      modul productcomments ho kreslí jako bílý obdélník bez rámu a bez
      zaoblení na krémovém podkladu, s vycentrovanou větou. Vidí ho zákazník
      u všech jídel — katalog zatím nemá jedinou recenzi. Dvojitá třída
      u #empty-product-comment je nutná, aby pravidlo přebilo
      `background-color: #ffffff` i `text-align: center` z modulu. */
#product-comments-list-header .comments-nb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#product-comments-list-header .comments-nb .material-icons {
  font-size: 18px;
  margin-right: 0;
}

#empty-product-comment.product-comment-list-item {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
  color: var(--text-muted);
  text-align: left;
}
/* RM-BLOK: opravy po auditu mobilu a pokladny — konec */