/* ===== Pod dřezem — token layer (z handoffu, reference/tokens/*.css) ===== */

/* --- fonts --- */
/* Webfonts. No binaries were supplied with the brief, so the four families are
   loaded from Google Fonts, where all four are published.
   Replace with self-hosted @font-face + woff2 files before production. */

:root {
  /* print / packaging */
  --font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-text: "Karla", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  /* screen */
  --font-screen: "Space Grotesk", system-ui, sans-serif;
}

/* --- colors --- */
/* Pod dřezem — two palettes, deliberately NOT unified.
   Paper palette = print, packaging, brand manual, boxes, flyers.
   Shelf palette = screen (e-shop, app, e-mail).
   Never mix them in one artefact. */

:root {
  /* ---- Paper palette (print & packaging) ---- */
  --paper: #F4EFE6;        /* Papír — main ground for everything */
  --chalk: #E3DACB;        /* Křída — secondary areas, bands */
  --white: #FFFFFF;        /* Bílá — cards and panels over paper */
  --ink: #241E17;          /* Inkoust — text, buttons, dark areas */
  --stone: #6B6759;        /* Kámen — secondary text, captions */
  --clay: #B55A34;         /* Hlína — the one brand accent: areas, big numbers */
  --rust: #8E4525;         /* Rez — accent for small text and links */
  --moss: #3F6543;         /* Mech — system only: in stock, confirmed */
  --rule: #DED3C2;         /* Linka — rules, frames, dividers */
  --clay-light: #E8A57F;   /* Hlína světlá — clay on dark grounds */

  /* ---- Shelf palette (screen) ---- */
  --shelf-green: #14724C;        /* unit-price field, "cheapest in row" signal */
  --shelf-green-soft: #E8F3EC;   /* ground under that signal */
  --shelf-raspberry: #C8324F;    /* discount labels ONLY */
  --shelf-blue: #17619C;         /* links and interactive elements */
  --shelf-surface: #F2F6F3;      /* ground behind product photo, barely green */
  --shelf-text: #141614;         /* warmer than pure black, sits with photos */

  /* ---- Semantic aliases: paper context (default) ---- */
  --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-strong: var(--ink);
  --status-ok: var(--moss);
  --link: var(--rust);
  --link-hover: var(--ink);
  --btn-fill: var(--ink);
  --btn-fill-hover: #100D09;
  --btn-text: var(--paper);
  --focus-ring: var(--clay);
}

/* Screen context. Put data-palette="shelf" on the e-shop root. */
[data-palette="shelf"] {
  --bg-page: var(--white);
  --bg-band: var(--shelf-surface);
  --surface-card: var(--white);
  --text-body: var(--shelf-text);
  --text-muted: #5C635E;
  --text-accent: var(--shelf-green);
  --text-on-dark: var(--white);
  --accent-area: var(--shelf-green);
  --accent-on-dark: #7FC9A6;
  --border-hairline: #E1E6E2;
  --border-strong: var(--shelf-text);
  --status-ok: var(--shelf-green);
  --link: var(--shelf-blue);
  --link-hover: #104A78;
  --btn-fill: var(--shelf-green);
  --btn-fill-hover: #0F5B3C;
  --btn-text: var(--white);
  --focus-ring: var(--shelf-blue);
  --sale: var(--shelf-raspberry);
}

/* --- typography --- */
/* Size scale from the brand manual: size / line-height / weight / tracking. */
:root {
  --ts-display-size: 48px;   --ts-display-lh: 0.95;  --ts-display-weight: 800;  --ts-display-track: -0.035em; 
  --ts-h1-size: 34px;        --ts-h1-lh: 1.05;       --ts-h1-weight: 800;       --ts-h1-track: -0.03em; 
  --ts-h2-size: 25px;        --ts-h2-lh: 1.15;       --ts-h2-weight: 700;       --ts-h2-track: -0.025em; 
  --ts-h3-size: 19px;        --ts-h3-lh: 1.25;       --ts-h3-weight: 700;       --ts-h3-track: -0.02em; 
  --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: 700;    --ts-label-track: 0.13em; 
  --ts-price-size: 26px;     --ts-price-lh: 1.0;     --ts-price-weight: 800;    --ts-price-track: -0.01em; 

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

  --tracking-claim: 0.16em; 
  /* claim under the logo, Space Mono, caps */
  --numeric-table: tabular-nums; 
}

/* Utility classes: the manual's scale, ready to use. */
.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); }
.t-h1 { font-family: var(--font-display); 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-display); 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-display); 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: 700; 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: 700; letter-spacing: var(--ts-price-track); font-variant-numeric: tabular-nums; }
.t-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- spacing --- */
/* 4px base, no decorative steps. */
: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;   /* prose column */
  --measure-lead: 48ch;
  --container: 1180px;
  --grid-gap: var(--sp-4);

  /* logo clear space = height of the sink glyph */
  --logo-clearspace: 1em;
}

/* --- effects --- */
:root {
  /* Corners: near-square. Paper is cut, not rounded. */
  --radius-0: 0px;
  --radius-1: 2px;   /* default: inputs, buttons, cards */
  --radius-2: 4px;   /* chips, small labels */
  --radius-pill: 999px; /* qty steppers only */

  --border-1: 1px;
  --border-2: 2px;
  --stroke-logo: 2.1px; /* logo stroke width, range 2.0–2.2 */

  /* Shadows are used sparingly: only for things that float over the page. */
  --shadow-none: none;
  --shadow-card: 0 1px 0 var(--border-hairline);
  --shadow-raised: 0 2px 6px rgba(36, 30, 23, 0.08);
  --shadow-overlay: 0 12px 32px rgba(36, 30, 23, 0.16);
  --shadow-focus: 0 0 0 2px var(--focus-ring);

  /* Motion: short, linear-ish, no bounce. */
  --dur-fast: 90ms; 
  --dur-base: 140ms; 
  --dur-slow: 220ms; 
  --ease-out: cubic-bezier(0.2, 0, 0.2, 1); 
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); 
}

/* --- 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;
}
[data-palette="shelf"] { 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: 2px; }
hr { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--sp-6) 0; }
::selection { background: var(--clay-light); color: var(--ink); }
/* ============================================================================
   Pod dřezem — 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 `poddrezem` 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 #E1E6E2, rádius 2px, padding 16px, gap 12px, BEZ stínu.
   Hover: rámeček → #5C635E 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 .pd-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 16px;
  background: var(--shelf-white, #FFFFFF);
  border: 1px solid #E1E6E2;
  border-radius: 2px;
  box-shadow: none;
  transition: border-color 90ms ease-out;
}
.product-miniature .pd-card:hover { border-color: #5C635E; }

/* 1) fotoplocha — obrázek se vejde celý, nic se neořezává */
.product-miniature .pd-plate {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--shelf-surface, #F2F6F3);
  border-radius: 2px;
  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 .pd-plate img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

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

/* 3) značka */
.product-miniature .pd-brand {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5C635E;
}

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

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

/* 6) cena balení */
.product-miniature .pd-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.product-miniature .pd-price__now {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--shelf-text, #141614);
  font-variant-numeric: tabular-nums;
}
.product-miniature .pd-price__was {
  font-size: 14px;
  color: #5C635E;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.product-miniature .pd-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. */
.pd-unit-price {
  display: block;
  padding: 6px 10px;
  border-radius: 2px;
  background: var(--shelf-green-soft, #E8F3EC);
  color: var(--shelf-green, #14724C);
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.pd-unit-price__unit {
  font-size: 70%;
  font-weight: 400;
}
.pd-unit-price__flag {
  display: block;
  margin-top: 2px;
  font-family: var(--font-screen, "Space Grotesk", 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 .pd-cheaper {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5C635E;
}

/* 8) sklad — čísla, ne přídavná jména */
.pd-stock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  /* Mech #3F6543 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: #5C635E;
}
.pd-stock__dot { background: var(--shelf-green, #14724C); }
.pd-stock--out { color: #5C635E; }
.pd-stock--out .pd-stock__dot { background: #5C635E; }
.pd-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 .pd-actions { margin-top: auto; }
.product-miniature .pd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--shelf-text, #141614);
  border-radius: 2px;
  background: var(--shelf-text, #141614);
  color: #FFFFFF;
  font-family: var(--font-screen, "Space Grotesk", 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 .pd-btn:hover { background: #2B302C; border-color: #2B302C; color: #FFFFFF; }
.product-miniature .pd-btn[disabled] {
  background: transparent;
  color: #5C635E;
  border-color: #D7DDD9;
  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;
}

/* PD-BLOK: detail produktu (handoff 03 §3.11, 04 §4.1/§4.4) — zacatek */
/* ============================================================================
   Pod dřezem — detail produktu
   Patří na konec themes/drogerie/assets/css/poddrezem.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 #141614, zelené pole jednotkové
   ceny #14724C na #E8F3EC 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 .pd-unit-price, .pd-stock a .pd-stock__dot už v poddrezem.css
   jsou. Přebírají se beze změny až na barvu .pd-stock: ta je tam mechová
   (#3F6543 z papírové palety) a na detailu by byla čtvrtá barva, takže ji
   .pd-detail přepisuje na inkoust. .pd-brand a .pd-btn jsou v poddrezem.css
   zaneseny jen pro .product-miniature, proto je detail definuje po svém.
   ========================================================================= */

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

.pd-detail .pd-detail__brand {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5C635E;
}

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

.pd-detail .pd-detail__lede {
  max-width: 52ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #5C635E;
}
.pd-detail .pd-detail__lede p { margin: 0 0 8px; }
.pd-detail .pd-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. */

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

.pd-selected__label {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5C635E;
}

.pd-selected__pack {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--shelf-text, #141614);
  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. */

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

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

.pd-detail .pd-price-now {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--shelf-text, #141614);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pd-detail .pd-price-was {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #5C635E;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* jediný malinový prvek na stránce */
.pd-detail .pd-price-off {
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--shelf-raspberry, #C8324F);
  color: #FFFFFF;
  font-family: var(--font-screen, "Space Grotesk", 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 */
.pd-unit-price--lg {
  padding: 8px 12px;
  font-size: 32px;
  line-height: 1.15;
  white-space: nowrap;
}

/* malá varianta do tabulky balení */
.pd-unit-price--sm {
  display: inline-block;
  padding: 4px 8px;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
}

/* chybějící jednotková cena: cena nikdy nestojí sama */
.pd-unit-price--missing {
  background: var(--shelf-surface, #F2F6F3);
  color: #5C635E;
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 400;
  padding: 8px 12px;
}

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

.pd-howto { margin: 0; }
.pd-howto__summary {
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  color: #5C635E;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
}
.pd-howto__summary::-webkit-details-marker { display: none; }
.pd-howto__summary:hover { color: var(--shelf-text, #141614); }
.pd-howto[open] .pd-howto__summary { color: var(--shelf-text, #141614); }
.pd-howto__body {
  margin: 6px 0 0;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.5;
  color: var(--shelf-text, #141614);
  font-variant-numeric: tabular-nums;
}

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

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

   Základní .pd-stock má color: var(--moss, #3F6543) — 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 .pd-detail, aby
   nesahal na sazbu ve výpisu. */

.pd-stock-line { margin: 0; }
.pd-detail .pd-stock-line .pd-stock {
  font-size: 15px;
  color: var(--shelf-text, #141614);
}
.pd-detail .pd-stock-line .pd-stock--out { color: #5C635E; }

/* --- levnější balení ----------------------------------------------------
   Handoff 04 §4.4: podklad #E8F3EC, 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. */

.pd-cheaper-pack {
  margin: 16px 0 0;
  padding: 16px;
  border-left: 3px solid var(--shelf-green, #14724C);
  border-radius: 2px;
  background: var(--shelf-green-soft, #E8F3EC);
}

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

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

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

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

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

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

.pd-qty { flex: 0 0 auto; }
.pd-qty__label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5C635E;
}

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

.pd-detail .pd-cart .pd-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, #141614);
  border-radius: 2px;
  background: var(--shelf-text, #141614);
  color: #FFFFFF;
  font-family: var(--font-screen, "Space Grotesk", 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;
}
.pd-detail .pd-cart .pd-btn:hover,
.pd-detail .pd-cart .pd-btn:focus {
  background: #2B302C;
  border-color: #2B302C;
  color: #FFFFFF;
}
.pd-detail .pd-cart .pd-btn[disabled] {
  background: transparent;
  border-color: #D7DDD9;
  color: #5C635E;
  cursor: default;
}
.pd-detail .pd-cart .pd-btn img { display: none; }

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

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

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

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

.pd-packs__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--shelf-text, #141614);
}
.pd-packs__count {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  color: #5C635E;
}

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

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

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

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

/* --- 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. */

.pd-detail .products-imagescover .product-img {
  background: var(--shelf-surface, #F2F6F3);
  border-radius: 2px;
  /* 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%;
}
.pd-detail .product-thumbs .thumb {
  background: var(--shelf-surface, #F2F6F3);
  border: 1px solid transparent;
  border-radius: 2px;
}
.pd-detail .product-thumbs .slick-current .thumb,
.pd-detail .product-thumbs .thumb.selected {
  border: 2px solid var(--shelf-text, #141614);
}

/* --- 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) {
  .pd-detail .pd-detail__title { font-size: 26px; }
  .pd-detail .pd-price-now { font-size: 28px; }
  .pd-unit-price--lg { font-size: 28px; }

  .pd-detail .pd-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 #E1E6E2;
  }
  .pd-detail .pd-cart .pd-btn { flex: 1 1 160px; }
  .pd-packs__table th,
  .pd-packs__table td { padding-right: 12px; }
}

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

/* PD-BLOK: kosik (handoff 03 §3.8) — zacatek */
/* ============================================================================
   Pod dřezem — 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/poddrezem.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 #141614, tlumená #5C635E, vlas #E1E6E2, plocha #F2F6F3.
   Barvu dostanou jen dvě věci — zelené pole jednotkové ceny (#14724C na
   #E8F3EC) a malinový slevový štítek (#C8324F). Nic jiného.
   ODCHYLKA: handoff §3.8 chce odkaz „Odebrat" v #17619C. Pravidlo tří barev
   je závaznější, takže je inkoustový a podtržený. Vrátit zpět = jeden řádek,
   viz .pd-cart-line__remove.
   ========================================================================= */

/* --- jednotková cena: varianty pro košík ---------------------------------
   Základní .pd-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. */

.pd-unit-price--sm {
  align-self: flex-start;
  width: auto;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.3;
}
.pd-unit-price--mini {
  display: inline-block;
  padding: 0;
  background: none;
  color: var(--shelf-green, #14724C);
  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. */
.pd-unit-price--missing {
  background: var(--shelf-surface, #F2F6F3);
  /* Malina je vyhrazená slevě. Chybějící jednotková cena není sleva ani
     chyba zákazníka, jen údaj, který doplňujeme — patří do šedi, ne do křiku. */
  color: #5C635E;
  font-size: 12px;
  letter-spacing: 0.04em;
}

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

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

.pd-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í
   poddrezem.css nestačí. Konkrétně:
     .product-line-grid .product-line__title { font-size:1.2rem; color:#222;
                                               margin-bottom:.75rem }   (0,2,0)
     .product-line-grid .remove-from-cart    { color:#dc3545 }          (0,2,0)
     .cart-item                              { border-bottom:1px solid #f1f1f1 }
     @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 #222 v 1.2rem, odkaz Odebrat je
   bootstrapově červený (#dc3545 = čtvrtá barva) a nad vlasem .pd-cart-line
   leží druhý vlas #f1f1f1. 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. */
.pd-cart-line .pd-cart-line__name {
  font-size: 15px;
  margin-bottom: 0;
  color: var(--shelf-text, #141614);
}
.pd-cart-line .pd-cart-line__remove { color: var(--shelf-text, #141614); }
.pd-cart-line .pd-cart-line__remove:hover { color: #5C635E; }
.pd-cart-item { border-bottom: 0; padding: 0; }
.pd-cart-line__img { margin-right: 0; }

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

.pd-cart-line__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--shelf-surface, #F2F6F3);
  border-radius: 2px;
  overflow: hidden;
}
.pd-cart-line__img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

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

.pd-cart-line__brand {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #5C635E;
}

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

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

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

/* --- množství --- */
.pd-cart-line__qty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 2px;
}
.pd-cart-line__qty input.js-cart-line-product-quantity {
  width: 62px;
  height: 40px;
  padding: 0 6px;
  border: 1px solid #E1E6E2;
  border-radius: 2px;
  background: #FFFFFF;
  color: var(--shelf-text, #141614);
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.pd-cart-line__qty input.js-cart-line-product-quantity::-webkit-outer-spin-button,
.pd-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ýš. */
.pd-cart-line__qty .bootstrap-touchspin { display: inline-flex; align-items: stretch; }
.pd-cart-line__qty .bootstrap-touchspin .btn,
.pd-cart-line__qty .btn-touchspin {
  min-width: 34px;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid #E1E6E2;
  border-radius: 2px;
  background: #FFFFFF;
  box-shadow: none;
  color: var(--shelf-text, #141614);
}
.pd-cart-line__qty .bootstrap-touchspin .btn:hover,
.pd-cart-line__qty .btn-touchspin:hover { background: var(--shelf-surface, #F2F6F3); color: var(--shelf-text, #141614); }

.pd-cart-line__qty-fixed {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pd-cart-line__qty-note {
  max-width: 130px;
  font-size: 12px;
  line-height: 1.4;
  color: #5C635E;
}

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

.pd-cart-line__actions { display: flex; align-items: center; justify-content: flex-end; }
.pd-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, #141614);   /* handoff chce #17619C — viz hlavička souboru */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.pd-cart-line__remove:hover { color: #5C635E; text-decoration-thickness: 2px; }

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

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

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

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

/* =========================================================================
   3) Tlačítka použitá v košíku
   (samostatná, .pd-btn je scopnutá na .product-miniature)
   ====================================================================== */

.pd-btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--shelf-text, #141614);
  border-radius: 2px;
  background: var(--shelf-text, #141614);
  color: #FFFFFF;
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 90ms cubic-bezier(.2,0,.2,1), border-color 90ms cubic-bezier(.2,0,.2,1);
}
.pd-btn-lg:hover,
.pd-btn-lg:focus { background: #2B302C; border-color: #2B302C; color: #FFFFFF; text-decoration: none; }
.pd-btn-lg:active { transform: translateY(1px); }

.pd-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--shelf-text, #141614);
  border-radius: 2px;
  background: transparent;
  color: var(--shelf-text, #141614);
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 90ms cubic-bezier(.2,0,.2,1);
}
.pd-btn-ghost:hover { background: var(--shelf-surface, #F2F6F3); color: var(--shelf-text, #141614); 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 */
.pd-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;
}

.pd-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, #F2F6F3);
  border-radius: 2px;
  overflow: hidden;
}
.pd-summary-line__thumb img { width: 82%; height: 82%; object-fit: contain; }
.pd-summary-line__thumb .checkout-item__qty {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 2px;
  background: var(--shelf-text, #141614);
  color: #FFFFFF;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pd-summary-line__name {
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--shelf-text, #141614);
}
.pd-summary-line__pack,
.pd-summary-line__attr {
  font-size: 12px;
  line-height: 1.5;
  color: #5C635E;
}
.pd-summary-line__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.pd-summary-line__each {
  font-size: 12px;
  color: #5C635E;
  font-variant-numeric: tabular-nums;
}
.pd-summary-line__total {
  float: none;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--shelf-text, #141614);
  font-variant-numeric: tabular-nums;
}

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

.pd-minicart { position: relative; }

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

/* --- rozbalený mini-košík (jen myš/klávesnice, jen desktop) --- */
.pd-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 #E1E6E2;
  border-radius: 2px;
  box-shadow: 0 12px 32px rgba(36, 30, 23, 0.16);
  text-align: left;
}
.pd-minicart:hover .pd-minicart__panel,
.pd-minicart:focus-within .pd-minicart__panel { display: block; }

.pd-minicart__panel-head {
  margin-bottom: 8px;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5C635E;
}
.pd-minicart__list { margin: 0; padding: 0; list-style: none; }
.pd-minicart__item { padding: 10px 0; border-top: 1px solid #E1E6E2; }
.pd-minicart__item:first-child { border-top: 0; }

.pd-minicart-line { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: start; }
.pd-minicart-line__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--shelf-surface, #F2F6F3);
  border-radius: 2px;
  overflow: hidden;
}
.pd-minicart-line__thumb img { width: 84%; height: 84%; object-fit: contain; }
.pd-minicart-line__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-minicart-line__name {
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--shelf-text, #141614);
}
.pd-minicart-line__pack,
.pd-minicart-line__price { font-size: 12px; line-height: 1.4; color: #5C635E; font-variant-numeric: tabular-nums; }
.pd-minicart-line__sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pd-minicart-line__total {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--shelf-text, #141614);
  font-variant-numeric: tabular-nums;
}
/* custom.css:123 stylede `.pd-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. */
.pd-header__actions .pd-minicart-line__remove {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 24px;
  gap: 0;
  padding: 0;
  font-size: 12px;
  color: #5C635E;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-header__actions .pd-minicart-line__remove:hover { color: var(--shelf-text, #141614); background: none; }

.pd-minicart__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E1E6E2;
}
.pd-minicart__foot-label {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5C635E;
}
.pd-minicart__foot-value {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 17px;
  font-weight: 700;
  color: var(--shelf-text, #141614);
  font-variant-numeric: tabular-nums;
}
/* Tlačítko „Zobrazit košík" v panelu.
   .pd-btn-lg je (0,1,0), ale custom.css:123 má `.pd-header__actions a` (0,1,1)
   a custom.css:337 `.pd-header__actions a:hover` (0,2,1) — obě vyhrávají nad
   .pd-btn-lg i .pd-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
   `.pd-header__actions a` nastavuje. */
.pd-header__actions .pd-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, #141614);
  color: #FFFFFF;
  font-size: 15px;
  text-decoration: none;
}
.pd-header__actions .pd-minicart__cta:hover,
.pd-header__actions .pd-minicart__cta:focus {
  background: #2B302C;
  border-color: #2B302C;
  color: #FFFFFF;
}

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

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

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

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

/* PD-BLOK: kosik — konec */

/* PD-BLOK: hlavicka a paticka (handoff 03 §3.3, §3.4) — zacatek */
/* ============================================================================
   Pod dřezem — 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/poddrezem.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 #141614, tlumený #5C635E, vlásová linka #E1E6E2,
   plocha #F2F6F3, inkoustová plocha pruhu #141614. Zelená (#14724C) ani
   malinová (#C8324F) tu nejsou vůbec — ty patří jednotkové ceně a slevě.
   Jediná systémová výjimka je modrý focus ring #17619C, jak žádá handoff §2.4.
   ========================================================================= */

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

.pd-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í. */
.pd-promise {
  background: #141614;
  color: #FFFFFF;
  padding: 7px 0;
}
.pd-promise__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pd-promise__legal,
.pd-promise__item {
  margin: 0;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.pd-promise__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
}
.pd-promise__item--ship { text-align: right; }

/* --- řádek 2: hlavní lišta ----------------------------------------------- */
.pd-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E1E6E2;
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  color: #141614;
}
.pd-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 */
.pd-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: #141614;
  text-decoration: none;
}
.pd-logo:hover { color: #141614; text-decoration: none; }
.pd-logo__mark { flex: 0 0 auto; display: block; }
.pd-logo__text { display: flex; flex-direction: column; }
.pd-logo__word {
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.pd-logo__claim {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5C635E;
}

/* hledání: výška 44px, max 420px, lupa 12px od levého kraje */
.pd-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 420px;
  margin: 0;
}
.pd-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #5C635E;
  pointer-events: none;
}
.pd-search__input {
  width: 100%;
  height: 44px;
  padding: 0 12px 0 40px;
  background: #FFFFFF;
  border: 1px solid #E1E6E2;
  border-radius: 2px;
  color: #141614;
  font-family: var(--font-screen, "Space Grotesk", 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);
}
.pd-search__input::placeholder { color: #5C635E; opacity: 1; }
.pd-search__input:hover { border-color: #5C635E; }
.pd-search__input:focus {
  border-color: #5C635E;
  outline: 2px solid #17619C;
  outline-offset: 2px;
}
/* Ve widgetu modulu je mezi .pd-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. */
.pd-search--widget > form {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
}

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

/* košík = sekundární tlačítko: průhledné, 1px inkoustový rámeček */
/* .pd-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. */
.pd-cart-slot { display: flex; align-items: center; flex: 0 0 auto; }
.pd-cart { display: block; flex: 0 0 auto; }
.pd-cart__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid #141614;
  border-radius: 2px;
  color: #141614;
  font-family: var(--font-screen, "Space Grotesk", 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);
}
.pd-cart__link:hover {
  background: #F2F6F3;
  color: #141614;
  text-decoration: none;
}
.pd-cart__link:active { transform: translateY(1px); }
.pd-cart__icon { flex: 0 0 auto; }
.pd-cart__amount {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- řádek 3: navigace --------------------------------------------------- */
.pd-nav {
  background: #FFFFFF;
  border-bottom: 1px solid #E1E6E2;
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
}
.pd-nav__inner {
  display: flex;
  align-items: stretch;
  gap: 18px;
  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í.

   POZOR na selektor: element nese i třídu .pd-shell a ta je níž v souboru
   předefinovaná zkratkami `padding` a `margin` (řádek s max-width: 1200px).
   Při stejné specifičnosti by zkratka tyhle dvě hodnoty vynulovala, proto
   je tu selektor o třídu delší. */
.pd-nav .pd-nav__inner {
  padding-bottom: 1px;
  margin-bottom: -1px;
}
.pd-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: #5C635E;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 90ms cubic-bezier(0.2, 0, 0.2, 1);
}
.pd-nav__link:hover { color: #141614; 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. */
.pd-nav__ikona { flex: 0 0 auto; }
.pd-nav__link--current {
  color: #141614;
  font-weight: 700;
  border-bottom-color: #141614;
}

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

/* --- 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: #141614;
}
.pd-footer {
  background: #F2F6F3;
  border-top: 1px solid #E1E6E2;
  color: #141614;
  font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  padding: 32px 0 24px;
}
.pd-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}
.pd-footer__brand { flex: 1.4 1 260px; }
.pd-footer__col { flex: 1 1 160px; }
.pd-footer__tagline {
  margin: 12px 0 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.55;
  color: #5C635E;
}
.pd-footer__head {
  margin: 0 0 10px;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5C635E;
}
.pd-footer__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-footer__link {
  color: #141614;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
}
.pd-footer__link:hover {
  color: #141614;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.pd-footer__bottom {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #E1E6E2;
}
.pd-footer__legal {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5C635E;
  font-variant-numeric: tabular-nums;
}

/* --- focus: nikdy se neodstraňuje --------------------------------------- */
.pd-logo:focus-visible,
.pd-account:focus-visible,
.pd-cart__link:focus-visible,
.pd-nav__link:focus-visible,
.pd-breadcrumb__link:focus-visible,
.pd-footer__link:focus-visible {
  outline: 2px solid #17619C;
  outline-offset: 2px;
}

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

/* --- mobil (≤767px): lišty 56px, dotykové cíle 44px ---------------------- */
@media (max-width: 767px) {
  .pd-promise { padding: 6px 0; }
  .pd-promise__legal,
  .pd-promise__item {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .pd-promise__row {
    flex-direction: column;
    gap: 3px;
  }
  .pd-promise__item--ship { text-align: left; }

  .pd-header__inner {
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .pd-logo__claim { display: none; }
  .pd-logo__word { font-size: 18px; }
  .pd-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
  /* Popisek u účtu se jen schová z pohledu, pro odečítač zůstává. */
  .pd-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;
  }
  .pd-account { padding: 0 10px; }

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

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

@media (max-width: 575px) {
  .pd-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;
  }
  .pd-cart__link { padding: 0 12px; }
  .pd-shell { padding-left: 16px; padding-right: 16px; }
}

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

/* PD-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; }


/* PD-BLOK: uvodni stranka (pocitadlo) — zacatek */
/* ============================================================================
   Pod dřezem — ú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.
   ========================================================================= */

.pd-shell { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pd-h2 { font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em;
  color: var(--shelf-text, #141614); margin: 0 0 8px; }
.pd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

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

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

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

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

/* --- kolik za měsíc ----------------------------------------------------- */
.pd-kolik { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 18px; }
.pd-kolik__popisek { font-size: 15px; font-weight: 700; color: var(--shelf-text, #141614); }
.pd-kolik__pilulky { display: inline-flex; gap: 6px; }
.pd-pilulka { min-width: 48px; height: 40px; padding: 0 10px; background: #FFFFFF;
  border: 1px solid #E1E6E2; border-radius: 4px; cursor: pointer;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace); font-size: 15px;
  color: var(--shelf-text, #141614); font-variant-numeric: tabular-nums; }
.pd-pilulka:hover { border-color: #5C635E; }
.pd-pilulka--vybrana { border: 2px solid var(--shelf-blue, #17619C); font-weight: 700; }
.pd-kolik__napoveda { font-size: 13px; color: #5C635E; }

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

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

/* --- žebříček ----------------------------------------------------------- */
.pd-zebricek { list-style: none; margin: 0 0 14px; padding: 0; }
.pd-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 #E1E6E2; }
.pd-radek:last-child { border-bottom: 1px solid #E1E6E2; }
.pd-radek__poradi { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 15px; color: #5C635E; font-variant-numeric: tabular-nums; }
.pd-radek__plocha { display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; background: var(--shelf-surface, #F2F6F3);
  border-radius: 4px; overflow: hidden; color: inherit; }
.pd-radek__plocha img { width: 84%; height: 84%; object-fit: contain; }
.pd-stitek { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; border: 1px solid #E1E6E2; border-radius: 4px; }
.pd-stitek__cislo { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 16px; font-weight: 700; color: var(--shelf-text, #141614); font-variant-numeric: tabular-nums; }
.pd-stitek__jed { font-size: 11px; color: #5C635E; }
.pd-radek__popis { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-radek__znacka { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #5C635E; }
.pd-radek__nazev { font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--shelf-text, #141614);
  text-decoration: none; }
.pd-radek__nazev:hover { text-decoration: underline; }
.pd-radek__cena { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 19px; font-weight: 700; text-align: right; color: var(--shelf-text, #141614);
  font-variant-numeric: tabular-nums; }
.pd-radek__jed { justify-self: start; }
.pd-radek__sklad { font-size: 13px; color: #5C635E; font-variant-numeric: tabular-nums; }
.pd-radek__do-kosiku { min-height: 40px; padding: 0 14px; font-size: 14px; }

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

/* --- žebřík balení (upsell) --------------------------------------------- */
.pd-zebrik { padding: 36px 0; background: #FFFFFF; border-top: 1px solid #E1E6E2; }
.pd-zebrik__pod { font-size: 15px; color: #5C635E; margin: 0 0 16px; }
.pd-zebrik__seznam { list-style: none; margin: 0 0 14px; padding: 0; }
.pd-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 #E1E6E2; position: relative; }
.pd-zebrik__radek:last-child { border-bottom: 1px solid #E1E6E2; }
/* Jediné místo na stránce se signálem „nejlevnější v řadě". */
.pd-zebrik__radek--nej { background: var(--shelf-green-soft, #E8F3EC);
  box-shadow: inset 3px 0 0 var(--shelf-green, #14724C); }
.pd-zebrik__stitek { position: absolute; top: 6px; left: 12px;
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace); font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shelf-green, #14724C); }
.pd-zebrik__baleni { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 16px; font-weight: 700; color: var(--shelf-text, #141614); font-variant-numeric: tabular-nums; }
.pd-zebrik__cena { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 19px; font-weight: 700; text-align: right; color: var(--shelf-text, #141614);
  font-variant-numeric: tabular-nums; }
.pd-zebrik__rozdil { font-size: 13.5px; color: #5C635E; font-variant-numeric: tabular-nums; }
.pd-zebrik__akce { min-height: 40px; padding: 0 14px; font-size: 14px; }
.pd-zebrik__nevyhoda { font-size: 16px; line-height: 1.5; color: var(--shelf-text, #141614); margin: 0 0 4px; }
.pd-zebrik__pozn { font-size: 13.5px; color: #5C635E; margin: 0; }

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

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

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

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

/* --- mobil -------------------------------------------------------------- */
@media (max-width: 991px) {
  .pd-vyber__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-jak__sloupce { grid-template-columns: 1fr; gap: 20px; }
  .pd-sortiment__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-sliby__sloupce { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
  .pd-pocitadlo__h1 { font-size: 28px; }
  .pd-pocitadlo__pod { font-size: 16px; }
  .pd-vysledek__cislo { font-size: 38px; }
  .pd-radek { grid-template-columns: 44px minmax(0, 1fr); grid-auto-rows: min-content;
    gap: 6px 12px; padding: 14px 0; min-height: 0; }
  .pd-radek__plocha { width: 44px; height: 44px; grid-row: span 2; }
  .pd-radek__poradi { display: none; }
  .pd-radek__cena, .pd-radek__jed, .pd-radek__sklad, .pd-radek__do-kosiku { grid-column: 2; }
  .pd-radek__cena { text-align: left; }
  .pd-radek__do-kosiku { justify-self: start; }
  .pd-zebrik__radek { grid-template-columns: 1fr 1fr; padding: 14px 12px; min-height: 0; gap: 8px; }
  .pd-zebrik__cena { text-align: left; }
  .pd-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. */
#pd-s-prani-davky:checked ~ .pd-vyber__mrizka label[for="pd-s-prani-davky"] { border: 2px solid var(--shelf-blue, #17619C); padding: 11px 13px; }
#pd-s-prani-davky:checked ~ .pd-panely .pd-panel--prani-davky { display: block; }
#pd-s-prani-davky:focus-visible ~ .pd-vyber__mrizka label[for="pd-s-prani-davky"] { outline: 2px solid var(--shelf-blue, #17619C); outline-offset: 2px; }
#pd-s-prani-kapsle:checked ~ .pd-vyber__mrizka label[for="pd-s-prani-kapsle"] { border: 2px solid var(--shelf-blue, #17619C); padding: 11px 13px; }
#pd-s-prani-kapsle:checked ~ .pd-panely .pd-panel--prani-kapsle { display: block; }
#pd-s-prani-kapsle:focus-visible ~ .pd-vyber__mrizka label[for="pd-s-prani-kapsle"] { outline: 2px solid var(--shelf-blue, #17619C); outline-offset: 2px; }
#pd-s-mycka-kapsle:checked ~ .pd-vyber__mrizka label[for="pd-s-mycka-kapsle"] { border: 2px solid var(--shelf-blue, #17619C); padding: 11px 13px; }
#pd-s-mycka-kapsle:checked ~ .pd-panely .pd-panel--mycka-kapsle { display: block; }
#pd-s-mycka-kapsle:focus-visible ~ .pd-vyber__mrizka label[for="pd-s-mycka-kapsle"] { outline: 2px solid var(--shelf-blue, #17619C); outline-offset: 2px; }
#pd-s-nadobi-rucne:checked ~ .pd-vyber__mrizka label[for="pd-s-nadobi-rucne"] { border: 2px solid var(--shelf-blue, #17619C); padding: 11px 13px; }
#pd-s-nadobi-rucne:checked ~ .pd-panely .pd-panel--nadobi-rucne { display: block; }
#pd-s-nadobi-rucne:focus-visible ~ .pd-vyber__mrizka label[for="pd-s-nadobi-rucne"] { outline: 2px solid var(--shelf-blue, #17619C); outline-offset: 2px; }
#pd-s-uklid:checked ~ .pd-vyber__mrizka label[for="pd-s-uklid"] { border: 2px solid var(--shelf-blue, #17619C); padding: 11px 13px; }
#pd-s-uklid:checked ~ .pd-panely .pd-panel--uklid { display: block; }
#pd-s-uklid:focus-visible ~ .pd-vyber__mrizka label[for="pd-s-uklid"] { outline: 2px solid var(--shelf-blue, #17619C); outline-offset: 2px; }
#pd-s-osobni:checked ~ .pd-vyber__mrizka label[for="pd-s-osobni"] { border: 2px solid var(--shelf-blue, #17619C); padding: 11px 13px; }
#pd-s-osobni:checked ~ .pd-panely .pd-panel--osobni { display: block; }
#pd-s-osobni:focus-visible ~ .pd-vyber__mrizka label[for="pd-s-osobni"] { outline: 2px solid var(--shelf-blue, #17619C); 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. */
.pd-kolik__pilulky { display: none; }
.pd-js .pd-kolik__pilulky { display: inline-flex; }
.pd-kolik__napoveda { display: none; }
.pd-js .pd-kolik__napoveda { display: inline; }
/* PD-BLOK: uvodni stranka — konec */

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

/* --- úvodní stránka: řady produktů ------------------------------------- */
.pd-uvod { padding: 40px 0 26px; background: #FFFFFF; }
.pd-uvod__h1 { font-family: var(--font-screen, "Space Grotesk", system-ui, sans-serif);
  font-size: 40px; line-height: 1.16; font-weight: 700; letter-spacing: -0.03em;
  color: var(--shelf-text, #141614); margin: 0 0 10px; max-width: 900px; }
.pd-uvod__pod { font-size: 18px; line-height: 1.5; color: #5C635E; margin: 0 0 20px; max-width: 760px; }
.pd-uvod__akce { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 0; }
.pd-uvod__odkaz { font-size: 15.5px; color: var(--shelf-blue, #17619C); }

.pd-rada { padding: 26px 0; background: #FFFFFF; border-top: 1px solid #E1E6E2; }
.pd-rada__hlava { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; }
.pd-rada__hlava .pd-h2 { margin: 0; }
.pd-rada__pod { font-size: 14px; color: #5C635E; margin: 0; font-variant-numeric: tabular-nums; }
.pd-rada__vic { margin-left: auto; font-size: 15px; color: var(--shelf-blue, #17619C); }
/* 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. */
.pd-rada__mrizka { margin: 0; }

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

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


/* PD-BLOK: pokladna (objednavka) — zacatek
   ---------------------------------------------------------------------------
   Pokladnu vykresluje modul adaptisultracart a nese si vlastni vzhled po
   predchozim obchodu (SpinKids): cervena #E4002B, 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 poddrezem.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 #17619C, jak velí manual
     uspech   -> zelena #14724C (stejna jako pole jednotkove ceny)
     rohy     -> 2 px, jak ma zbytek webu
     pismo    -> Space Grotesk, cisla Space Mono
   ========================================================================= */
body#checkout,
body.page-order,
.checkout-header,
#checkout-process {
  --co-ground: #FFFFFF;
  --co-panel: #F2F6F3;
  --co-panel-2: #FFFFFF;
  --co-ink: #141614;
  --co-muted: #5C635E;
  --co-muted-2: #8A918C;
  --co-line: #E1E6E2;
  --co-line-strong: #D7DDD9;

  /* Hlavni akce je na celem webu inkoustove cerna, ne barevna. */
  --co-brand: #141614;
  --co-brand-ink: #2B302C;
  --co-brand-tint: #F2F6F3;

  /* --co-success barvi hotove kroky pokladny (cislo kroku, fajfka), ne cenu.
     Zelena #14724C 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: #141614;
  --co-success-tint: #F2F6F3;
  --co-focus: #17619C;

  --co-r-sm: 2px;
  --co-r-md: 2px;
  --co-r-lg: 2px;

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

  --co-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --co-round: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* 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. */
  --primary: #141614;
  --primary-hover: #2B302C;
}

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

/* Cisla at jdou porovnavat ve sloupci, stejne jako ve zbytku obchodu. */
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"] {
  font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

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

/* PD-BLOK: zebrik baleni a podobne zbozi pod detailem — zacatek */
.pd-rada-baleni { padding: 30px 0 8px; background: #FFFFFF; border-top: 1px solid #E1E6E2; }
.pd-rada-baleni__pod { font-size: 14px; color: #5C635E; margin: 0 0 14px; }
.pd-rada-baleni__seznam { list-style: none; margin: 0; padding: 0; }
.pd-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 #E1E6E2; }
.pd-rada-baleni__radek:last-child { border-bottom: 1px solid #E1E6E2; }
/* Jedine misto na detailu se signalem „nejlevnejsi v rade". */
.pd-rada-baleni__radek--nej { background: var(--shelf-green-soft, #E8F3EC);
  box-shadow: inset 3px 0 0 var(--shelf-green, #14724C); }
.pd-rada-baleni__radek--tenhle { outline: 2px solid #D7DDD9; outline-offset: -2px; }
.pd-rada-baleni__stitky { display: flex; flex-direction: column; gap: 2px; }
.pd-rada-baleni__nej { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--shelf-green, #14724C); }
.pd-rada-baleni__tento { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #5C635E; }
.pd-rada-baleni__baleni { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 16px; font-weight: 700; color: var(--shelf-text, #141614); font-variant-numeric: tabular-nums; }
.pd-rada-baleni__cena { font-family: var(--font-mono, "Space Mono", ui-monospace, monospace);
  font-size: 18px; font-weight: 700; text-align: right; color: var(--shelf-text, #141614);
  font-variant-numeric: tabular-nums; }
.pd-rada-baleni__rozdil { font-size: 13.5px; color: #5C635E; font-variant-numeric: tabular-nums; }
.pd-rada-baleni__akce { min-height: 38px; padding: 0 14px; font-size: 14px; }
.pd-rada-baleni__akce--tento { display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; font-size: 13px; color: #5C635E; }

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

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

/* ===================================================================== */
/* PD-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
   .pd-stock z výpisu, ne vlastní barvu, aby se regál a našeptávač
   neshodovaly jen náhodou. */

.pd-search { position: relative; }

.pd-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 #E1E6E2;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(20, 22, 20, 0.08);
}

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

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

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

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

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

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

.pd-naseptavac__polozka:focus-visible,
.pd-naseptavac__vse:focus-visible {
  outline: 2px solid var(--shelf-blue, #17619C);
  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) {
  .pd-naseptavac { min-width: 560px; }
}

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