/* ============================================================
   TWIKO · twiko-base-5.css · v5 · 14. 09. 2026
   v5: plochy a stíny pro hloubku stránky (--tw-ground krémový podklad,
   --tw-ground-deep pás, --tw-shadow-card a -card-h pro karty).
   v4 se nenasazovala (archiv).
   v3 · 13. 09. 2026: obsah max. 1300 px (kontejner plynulý od 1200 px se stropem 1340 px).
   v2 · 13. 09. 2026: modrá posunuta do odstínu Twiko #02A3DE (197°, sytost 96 %)
   a ztmavená na čitelnost. Payne's gray #315A72 nahrazen #03658C.
   Základ skinu: tokeny, písma a přemapování proměnných šablony
   Classic (template-11). Načítá se v Záhlaví jako PRVNÍ vlastní CSS.

   Proč přes proměnné: main-11 bere písmo i barvy z --template-*
   a --color-*. Přepsáním proměnných se Twiko vzhled propíše i do
   nativních stránek, které ještě nemají vlastní skin, a to bez
   jediného !important.

   Pravidla (převzato z BASELINE skinspecialistu):
   - easing jen cubic-bezier(.4,0,.2,1), vždy vypsaná délka zvlášť
   - nikdy transition:all
   - token --tw-ease je JEN křivka, bez délky (jinak vzniká delay)
   ============================================================ */

html:root {
  /* ---- plochy ---- */
  --tw-bg: #FFFFFF;
  --tw-soft: #E7E6ED;          /* Ghost white, pásy a sekce */
  --tw-warm: #FFCAA7;          /* Peach, zvýrazněné bloky */
  --tw-cool: #87C5EA;          /* Light Sky Blue, dekorace */
  --tw-dark: #03658C;          /* Twiko modrá ztmavená, patička, inverzní sekce */

  /* ---- text ---- */
  --tw-ink: #03658C;           /* odstín #02A3DE, 6,47 na bílé, 5,22 na Ghost white */
  --tw-ink-h: #024F6E;         /* hover tmavých ploch */
  --tw-brand: #02A3DE;         /* Twiko modrá: JEN plochy a grafika, na text 2,88 */
  --tw-dim: #446C7E;           /* sekundární text, 5,69 na bílé, 4,59 na Ghost white */
  --tw-ink-on-cool: #12303A;
  --tw-ink-inverse: #FFFFFF;
  --tw-inverse-dim: #C8E4EF;   /* tlumený text na patičce, 4.87 */

  /* ---- akce ---- */
  --tw-act: #B85800;           /* tlačítka a odkazy, bílý text 4,74 */
  --tw-act-h: #AE5400;
  --tw-acc: #E16C00;           /* JEN plochy, ikony, badge, grafika */
  --tw-ok: #2E7D52;            /* skladem */

  --tw-line: #DEDDE5;

  /* ---- hloubka (v5) ----
     Krémový podklad odvozený z Peach, bílé karty na něm vystupují.
     Na --tw-ground má ink 5,95 a dim 5,23, na --tw-ground-deep 5,36 a 4,72. */
  --tw-ground: #FAF4EE;
  --tw-ground-deep: #F6E6D8;
  --tw-shadow-card: 0 1px 2px rgba(3, 52, 74, .06), 0 14px 34px -14px rgba(3, 52, 74, .22);
  --tw-shadow-card-h: 0 2px 4px rgba(3, 52, 74, .07), 0 24px 48px -16px rgba(3, 52, 74, .30);

  /* ---- tvarosloví (moodboard) ---- */
  --tw-r-sm: 8px;
  --tw-r: 14px;
  --tw-r-lg: 20px;
  --tw-shadow: 0 1px 2px rgba(3, 76, 105, .06), 0 8px 22px rgba(3, 76, 105, .09);
  --tw-ease: cubic-bezier(.4, 0, .2, 1);

  /* ---- písmo ---- */
  --tw-serif: Fraunces, Georgia, serif;
  --tw-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- proměnné šablony Classic ---- */
  --template-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto;
  --template-headings-font: Fraunces, Georgia, serif;

  /* primary = odkazy a navigace → Twiko modrá ztmavená */
  --color-primary: #03658C;
  --color-primary-h: 197;
  --color-primary-s: 96%;
  --color-primary-l: 28%;
  --color-primary-hover: #024F6E;
  --color-primary-hover-h: 197;
  --color-primary-hover-s: 96%;
  --color-primary-hover-l: 22%;

  /* secondary = konverzní barva (Do košíku) → akční oranžová */
  --color-secondary: #B85800;
  --color-secondary-h: 29;
  --color-secondary-s: 100%;
  --color-secondary-l: 36%;
  --color-secondary-hover: #AE5400;
  --color-secondary-hover-h: 29;
  --color-secondary-hover-s: 100%;
  --color-secondary-hover-l: 34%;

  /* tertiary nese bílý text (štítky) → stejná akční barva, Ochre by měl 3,31 */
  --color-tertiary: #B85800;
  --color-tertiary-h: 29;
  --color-tertiary-s: 100%;
  --color-tertiary-l: 36%;
  --color-tertiary-hover: #AE5400;
  --color-tertiary-hover-h: 29;
  --color-tertiary-hover-s: 100%;
  --color-tertiary-hover-l: 34%;

  --color-header-background: #FFFFFF;
}

/* ---- tělo stránky ---- */
body {
  color: var(--tw-ink);
  background-color: var(--tw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--tw-warm);
  color: var(--tw-ink);
}

/* Viditelný focus pro klávesnici (Ochre na bílé 3,3 = splňuje 3:1 pro ne-text) */
:focus-visible {
  outline: 3px solid var(--tw-acc);
  outline-offset: 2px;
}

/* ---- šířka webu: obsah max. 1300 px ----
   Od 1200 px je .container plynulý se stropem 1340 px (1300 + 2× 20 px
   padding). Hlavička, patička i sekce úvodní stránky (.tw-wrap) tak
   vždy lícují. Pod 1200 px zůstávají nativní šířky 747 / 972 px. */
.tw-wrap {
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) { .tw-wrap { width: 747px; } }
@media (min-width: 992px) { .tw-wrap { width: 972px; } }
@media (min-width: 1200px) {
  .container,
  .tw-wrap {
    width: auto;
    max-width: 1340px;
  }
}

/* ---- ceny: tabulkové číslice všude ---- */
.price,
.price-final,
.price-standard,
.p-final-price-wrapper,
[data-testid="productCardPrice"] {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}