/* =============================================================================
   SYMPAKT 2026 — „Cream"
   Motiv pro celý web, odvozený z artboardu `Sympakt Home - Cream.dc.html`
   (projekt „Třetí návrh sympakt.cz", claude.ai/design).

   Nasazuje se jako POSLEDNÍ stylesheet v head.tpl, za `sympakt-custom-v1.css`.
   Ten má 5 200 řádků a téměř všechno v něm je `!important`, takže i tady je
   `!important` u každé vlastnosti, o kterou se se starým listem přetahujeme.
   Není to elegance, je to nutnost dokud starý list existuje.

   OBSAH
     0. Tokeny
     1. Plátno, typografie, odkazy
     2. Tlačítka
     3. Hlavička — desktop dle artboardu
     4. Hlavička — telefon (v artboardu nenakreslena, viz poznámka u §4)
     5. Hero na homepage
     6. Pilířový pruh
     7. Mřížka produktů — plynulá, na telefonu vždy dva sloupce
     8. Produktová karta — JEDNA podoba pro všechny kontexty
     9. Stránka kategorie
    10. Detail produktu
    11. Patička
    12. Úklid po starém listu

   CO JE ODVOZENÉ, NE NAKRESLENÉ
   Artboard pokrývá hlavičku, hero a pilíře na desktopu. Nemá telefon, nemá
   produktovou kartu, kategorii, detail ani patičku. Všechno ostatní je
   dostavěné ze stejných tokenů; místa, kde jsem musel barvu vymyslet
   (výprodej, skladem, došlo), jsou označená `ODVOZENO`.
   ========================================================================== */


/* =============================================================================
   0. TOKENY
   Hodnoty 1:1 z artboardu, tón „Warm paper" (výchozí v props).
   ========================================================================== */
:root {
  /* plochy */
  --sk-page:      #f3eee0;   /* plátno stránky */
  --sk-raised:    #faf6ec;   /* karty, inputy — o stupeň světlejší */
  --sk-sunken:    #eae2d0;   /* utility lišta, pruhy — o stupeň tmavší */

  /* inkoust */
  --sk-ink:       #0c1a14;   /* nadpisy, CTA pozadí, ikony */
  --sk-ink-hover: #152e22;
  --sk-oncta:     #f4f5f1;   /* text na tmavém CTA */
  --sk-sub:       #4a5850;   /* sekundární text */
  --sk-body:      #223028;   /* běžný text */
  --sk-tag:       #d6c69d;   /* šampaňský štítek na fotkách */

  /* linky */
  --sk-line:      rgba(12, 26, 20, 0.14);
  --sk-line2:     rgba(12, 26, 20, 0.17);

  /* ODVOZENO — stavy, které artboard nekreslí.
     Drženy v rodině palety: tlumená cihlová a tmavě zelená, ne systémová
     červená/zelená, aby nevypadaly nalepené z jiného webu. */
  --sk-sale:      #9d3b2f;   /* sleva, stará cena, vyprodáno */
  --sk-ok:        #2f6b4f;   /* skladem */
  --sk-warn:      #8a5a1c;   /* poslední kusy, na objednání */

  /* rádiusy */
  --sk-r-sm:      8px;       /* tlačítka */
  --sk-r:         12px;      /* karty */
  --sk-r-pill:    9999px;    /* hledání, odznaky */

  /* stíny — z artboardu */
  --sk-sh-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sk-sh-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --sk-sh-3: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.12);

  /* písmo */
  --sk-font: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* rytmus stránky — postranní okap nikdy neklesne pod 16 px */
  --sk-gutter: 16px;
  --sk-maxw:   1440px;

  /* mřížka produktů */
  --sk-card-min: 210px;
  --sk-card-gap: 12px;

  /* minimální klikací plocha; audit 2026-09-12 našel na telefonu
     tlačítka karty 40 × 28 px, tedy nižší než na desktopu */
  --sk-tap: 44px;
}

@media (min-width: 600px) { :root { --sk-gutter: 20px; --sk-card-gap: 16px; } }
/* Pozor na 1024 px. V kategorii je vedle mřížky ještě postranní lišta, takže
   mřížce zbyde 724 px (měřeno na živé kategorii 2026-09-12). Tři sloupce po
   230 px s mezerou 20 px potřebují 730 px — chybí šest pixelů, a `auto-fill`
   proto spadne na dva sloupce po 352 px. Kategorie tím měla na 1024 px MÍŇ
   sloupců než na 768 px, což je proti smyslu plynulé mřížky.
   Minimum je tu proto 220 px: tři sloupce potřebují 700 px a vejdou se.
   Plných 230 px se vrací až od 1280 px, kde je místa dost. */
@media (min-width: 1024px) { :root { --sk-gutter: 24px; --sk-card-gap: 20px; --sk-card-min: 220px; } }
@media (min-width: 1280px) { :root { --sk-card-min: 230px; } }


/* =============================================================================
   1. PLÁTNO, TYPOGRAFIE, ODKAZY
   ========================================================================== */
body {
  background: var(--sk-page) !important;
  color: var(--sk-body) !important;
  font-family: var(--sk-font) !important;
  -webkit-font-smoothing: antialiased;
}

/* `section#wrapper` maluje přes celou stránku #f8f9fa (naměřeno: 390 × 6653 px)
   a překryje tím krémové plátno na body. Musí zprůhlednět, jinak se z celé
   palety projeví jen hlavička a patička. Totéž pro obaly obsahu. */
#wrapper, section#wrapper,
#content-wrapper, #main, #content,
.page-content, .page-wrapper, #columns {
  background: transparent !important;
  background-color: transparent !important;
}

/* Šířkový obal. AngarTheme používá .container z Bootstrapu; přebíjíme ho na
   plynulý s pevným okapem, aby na 320 px nezůstal text nalepený na hraně. */
body .container,
body .container-fluid {
  width: 100% !important;
  max-width: var(--sk-maxw) !important;
  margin-inline: auto !important;
  padding-inline: var(--sk-gutter) !important;
}

h1, h2, h3, h4, .page-heading, .product_name, #main .page-header h1 {
  color: var(--sk-ink) !important;
  letter-spacing: -0.02em;
  font-weight: 700 !important;
}
h1, .page-heading { font-size: clamp(1.5rem, 2.2vw + 0.9rem, 2.25rem) !important; line-height: 1.15 !important; }
h2 { font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.625rem) !important; line-height: 1.2 !important; }

a { color: var(--sk-ink); }
a:hover { color: var(--sk-ink-hover); }

/* Viditelný fokus všude — starý list ho na řadě prvků ruší. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sk-ink) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Audit našel 10px text ve 123 výskytech (rozbalovací menu, přepínač měny).
   Pod 12 px nejde na telefonu přečíst; zvedáme podlahu. */
@media (max-width: 767px) {
  body,
  body .dropdown-menu a,
  body .dropdown-item,
  body .currency-selector a,
  body .language-selector a { font-size: max(13px, 1em) !important; }
}


/* =============================================================================
   2. TLAČÍTKA
   Jeden tvar: plné inkoustové primární, obrysové sekundární, 44 px vysoké.
   ========================================================================== */
.btn, .button, button.btn, a.btn,
.btn-primary, .btn-secondary, .btn-default,
input[type="submit"] {
  font-family: var(--sk-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  text-transform: none !important;
  border-radius: var(--sk-r-sm) !important;
  min-height: var(--sk-tap) !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: var(--sk-sh-1) !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.btn-primary, .btn.btn-primary, button[type="submit"].btn, input[type="submit"] {
  background: var(--sk-ink) !important;
  border: 1px solid var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
}
.btn-primary:hover, .btn.btn-primary:hover, button[type="submit"].btn:hover, input[type="submit"]:hover {
  background: var(--sk-ink-hover) !important;
  border-color: var(--sk-ink-hover) !important;
  color: var(--sk-oncta) !important;
  box-shadow: var(--sk-sh-2) !important;
}

.btn-secondary, .btn-default, .btn.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--sk-line2) !important;
  color: var(--sk-ink) !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .btn-default:hover, .btn.btn-secondary:hover {
  border-color: var(--sk-ink) !important;
  background: var(--sk-sunken) !important;
  color: var(--sk-ink) !important;
}

.btn[disabled], .btn:disabled, button[disabled] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Pole formulářů do stejné rodiny */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], input[type="number"], select, textarea {
  min-height: var(--sk-tap) !important;
  border: 1px solid var(--sk-line2) !important;
  border-radius: var(--sk-r-sm) !important;
  background: var(--sk-raised) !important;
  color: var(--sk-body) !important;
  font-family: var(--sk-font) !important;
  font-size: 16px !important;   /* pod 16 px iOS při fokusu zoomuje stránku */
  padding: 10px 14px !important;
}


/* =============================================================================
   3. HLAVIČKA — DESKTOP (dle artboardu)
   Dvě patra: utility lišta na --sk-sunken, pod ní logo / centrovaná navigace /
   hledání + košík na --sk-page.
   ========================================================================== */
@media (min-width: 992px) {
  header#header, #header {
    background: var(--sk-page) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* utility lišta */
  #header .header-nav {
    background: var(--sk-sunken) !important;
    border-bottom: 1px solid var(--sk-line) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    min-height: 36px !important;
    padding: 0 !important;
  }
  #header .header-nav .container {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }
  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav .contact-link a {
    color: var(--sk-sub) !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
  }
  #header .header-nav a:hover { color: var(--sk-ink) !important; }
  #header .header-nav strong { color: var(--sk-body) !important; font-weight: 600 !important; }

  /* Hlavní řada.
     Pozor na stavbu: `.header-top` obsahuje DVA `.container` (první nese logo,
     hledání a košík, druhý je obal mobilních zásuvek a na desktopu je prázdný)
     a hlavní navigace `#_desktop_top_menu` je SOUROZENEC `.header-top`, ne jeho
     potomek. Když se pravidlo pustí na oba containery, hlavička naroste —
     naměřeno 234 → 306 px. Proto cílíme jen na první a druhý sážeme na nulu. */
  #header .header-top {
    background: var(--sk-page) !important;
    border: 0 !important;
    padding: 0 !important;
  }
  #header .header-top > .container:first-of-type {
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    padding-block: 14px !important;
  }
  #header .header-top > .container:not(:first-of-type) {
    min-height: 0 !important;
    padding-block: 0 !important;
  }
  #header .header-top > .container:not(:first-of-type):empty { display: none !important; }
  #header #_desktop_logo img,
  #header .logo { height: 58px !important; width: auto !important; max-width: 100% !important; display: block !important; }

  /* Navigace: zelený pruh pryč, verzálky na krému, podtržení místo pozadí.
     `#_desktop_top_menu` je sourozenec `.header-top`, takže tvoří vlastní řadu.
     Artboard má navigaci v jedné řadě s logem — to vyžaduje výměnu partialu
     `header.tpl` (viz `proposed/header.tpl`); tenhle blok řeší stav, kdy se
     nasazuje jen CSS a markup zůstává původní. */
  #header #_desktop_top_menu.menu,
  #header #_desktop_top_menu {
    background: var(--sk-page) !important;
    border-top: 1px solid var(--sk-line) !important;
    border-bottom: 1px solid var(--sk-line) !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  #header .sk-nav__menu { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; justify-content: center !important; }

  #header #_desktop_top_menu .menu > ul,
  #header #_desktop_top_menu ul.top-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
  }
  #header #_desktop_top_menu ul.top-menu > li > a,
  #header .sk-nav__primary-link {
    display: inline-block !important;
    padding: 12px !important;
    background: transparent !important;
    color: var(--sk-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  #header #_desktop_top_menu ul.top-menu > li > a:hover,
  #header .sk-nav__primary-link:hover {
    background: transparent !important;
    color: var(--sk-ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 7px !important;
    text-decoration-thickness: 1.5px !important;
  }

  /* hledání jako pilulka */
  #header #search_widget form,
  #header .search-widget form { position: relative !important; width: 240px !important; max-width: 42vw !important; }
  #header #search_widget input[type="text"],
  #header .search-widget input[type="text"] {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 44px 0 16px !important;
    border: 1px solid var(--sk-line2) !important;
    border-radius: var(--sk-r-pill) !important;
    background: var(--sk-raised) !important;
    font-size: 13px !important;
  }
  #header #search_widget button[type="submit"],
  #header .search-widget button[type="submit"] {
    position: absolute !important;
    /* Vyplní pravý konec pilulky celý. Dřív bylo 32 × 32 uvnitř 40px pole,
       tedy klikací plocha menší, než na jakou se dá trefit prstem. Šířka 44 px
       sedí přesně na `padding-right: 44px` toho pole, takže text pod tlačítko
       nepodleze. Výš než 40 px to nejde — to je výška pilulky a hlavička je
       schválená. */
    top: 0 !important; right: 0 !important;
    width: 44px !important; height: 40px !important; min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--sk-r-pill) !important;
    background: transparent !important;
    color: var(--sk-ink) !important;
    box-shadow: none !important;
  }

  /* košík */
  #header .blockcart,
  #header #_desktop_cart .blockcart {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--sk-ink) !important;
    box-shadow: none !important;
  }
  /* `:not(.btn)` je tu schválně: uvnitř `#header .blockcart` žije i rozbalený
     košík `#subcart` s tlačítkem „K pokladně". Bez té výjimky dostane
     inkoustový text na inkoustovém pozadí a nápis zmizí (naměřeno na
     produkci: background i color = rgb(12,26,20)). */
  #header .blockcart a:not(.btn) { color: var(--sk-ink) !important; }
  /* Pozor: `.cart-products-count` NENÍ na desktopu odznak. Obsahuje celý
     popisek „0 produktů 0 Kč" (naměřeno v markupu), takže jakmile z něj
     uděláme pilulku, přeleze text vedle sebe. Odznak má jen mobilní košík. */
  #header .blockcart .cart-products-count {
    display: inline !important;
    position: static !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--sk-sub) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
  #header .blockcart .cart_title { color: var(--sk-ink) !important; font-size: 13px !important; font-weight: 600 !important; }
  #header .blockcart i.material-icons { color: var(--sk-ink) !important; font-size: 22px !important; }
  #header .blockcart .cart_link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: var(--sk-tap) !important;
    padding: 0 !important;
  }
}


/* =============================================================================
   4. HLAVIČKA — TELEFON A TABLET  (do 991 px)

   V artboardu tenhle stav NENÍ. Vykreslení artboardu ve 390 px přeteče o 377 px
   do strany: utility lišta má `white-space:nowrap` a dvě telefonní čísla, takže
   roztlačí stránku na 767 px, a navigace se láme do dvou řad verzálek.

   Pravidla, podle kterých je stav dostavěný:
     - nic v hlavičce nesmí být `nowrap` napříč celou šířkou,
     - z utility lišty zůstane na telefonu jen to, co se vejde: jedno telefonní
       číslo jako ikona; zbytek žije v hamburgeru,
     - navigace je hamburger, ne zalomené verzálky,
     - každá ikona má plochu aspoň 44 × 44 px (audit našel 40 × 50 a 34 × 34),
     - hlavička drží pod 100 px, aby zboží začínalo výš.
   ========================================================================== */
@media (max-width: 991px) {
  header#header, #header {
    background: var(--sk-page) !important;
    border-bottom: 1px solid var(--sk-line) !important;
  }

  /* utility lišta se na telefonu nevejde — schovat, obsah je v hamburgeru */
  #header .header-nav { display: none !important; }

  /* Do 991 px se překrývaly dvě navigace naráz: mobilní pás ikon `#rwd_menu`
     i desktopové menu `#_desktop_top_menu`. Hlavička kvůli tomu na tabletu
     narostla 223 → 289 px. Desktopové menu tady nemá co dělat. */
  #header #_desktop_top_menu { display: none !important; }

  /* Logo a pás ikon jsou v markupu sourozenci, každý na vlastní řádce.
     Srovnáme je vedle sebe; zásuvky se zalomí pod ně. */
  #header .header-top {
    background: var(--sk-page) !important;
    border: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  #header .header-top > .container:first-of-type {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 56px !important;
    padding-block: 6px !important;
    flex-wrap: nowrap !important;
  }
  #header .header-top > .container:not(:first-of-type) {
    flex: 0 0 100% !important;   /* zásuvky vždy přes celou šířku, pod řádek */
    min-height: 0 !important;
    padding-block: 0 !important;
  }

  #header #_desktop_logo, #header .logo-wrapper { flex: 0 1 auto !important; min-width: 0 !important; }
  #header #_desktop_logo img, #header .logo {
    height: 36px !important;
    width: auto !important;
    max-width: 46vw !important;
    display: block !important;
  }

  /* pás ikon: hledat / účet / košík / menu — každá 44 × 44 */
  #header #rwd_menu, #header .sk-nav__rwd {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    background: transparent !important;
    border: 0 !important;
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;
    padding-inline-end: var(--sk-gutter) !important;
  }
  #header #rwd_menu > .container {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }
  #header #rwd_menu .rwd_menu_item,
  #header #rwd_menu .rwd_menu_item > a,
  #header #rwd_menu .rwd_menu_item > div {
    min-width: var(--sk-tap) !important;
    min-height: var(--sk-tap) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--sk-ink) !important;
    border: 0 !important;
  }
  #header #rwd_menu .material-icons { font-size: 24px !important; color: var(--sk-ink) !important; }

  /* odznak košíku do rohu ikony, ne přes ni */
  #header #rwd_menu .cart-products-count,
  #header #_mobile_cart .cart-products-count {
    position: absolute !important;
    top: 2px !important; right: 2px !important;
    min-width: 18px !important; height: 18px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border-radius: var(--sk-r-pill) !important;
    background: var(--sk-sub) !important;
    color: var(--sk-oncta) !important;
    font-size: 11px !important;
    line-height: 18px !important;
    text-align: center !important;
  }
  #header #_mobile_cart, #header #rwd_menu .rwd_menu_item { position: relative !important; }

  /* rozbalené zásuvky (menu / hledání / účet) — neprůhledné, ať pod nimi
     neprosvítá obsah stránky */
  #header .rwd_menu_open,
  #mobile_top_menu_wrapper2, #mobile_search_wrapper, #mobile_user_wrapper {
    background: var(--sk-page) !important;
    border-top: 1px solid var(--sk-line) !important;
    box-shadow: var(--sk-sh-2) !important;
  }
  #header .rwd_menu_open a {
    display: block !important;
    min-height: var(--sk-tap) !important;
    padding: 12px var(--sk-gutter) !important;
    color: var(--sk-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--sk-line) !important;
  }

  /* vyhledávací pole v zásuvce */
  #mobile_search_wrapper input[type="text"] {
    width: 100% !important;
    height: var(--sk-tap) !important;
    border-radius: var(--sk-r-pill) !important;
    background: var(--sk-raised) !important;
    border: 1px solid var(--sk-line2) !important;
    padding: 0 16px !important;
    font-size: 16px !important;
  }
}


/* =============================================================================
   5. HERO NA HOMEPAGE  (.sk-hero-2026)
   Dle artboardu: text vlevo, 2×2 fotokarty vpravo, na úzkém pod sebou.
   Flex s `flex:1 1 380px` se zalomí sám, bez breakpointu.
   ========================================================================== */
.sk-hero-2026 { background: var(--sk-page); padding: 28px 0 14px; }
.sk-hero-2026 .sk-hero__wrap {
  max-width: var(--sk-maxw);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}
.sk-hero-2026 .sk-hero__row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  align-items: center;
}
.sk-hero-2026 .sk-hero__copy {
  flex: 1 1 330px;
  min-width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sk-hero-2026 .sk-hero__title {
  margin: 0;
  font-size: clamp(1.875rem, 3.2vw + 0.8rem, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--sk-ink);
}
.sk-hero-2026 .sk-hero__lede {
  margin: 20px 0 0;
  max-width: 36rem;
  font-size: 19px;
  font-style: italic;
  line-height: 1.7;
  color: var(--sk-sub);
}
.sk-hero-2026 .sk-hero__cta-row { margin-top: 32px; }
.sk-hero-2026 .sk-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--sk-r-sm);
  background: var(--sk-ink);
  color: var(--sk-oncta);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none;
  box-shadow: var(--sk-sh-1);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.sk-hero-2026 .sk-hero__cta:hover {
  background: var(--sk-ink-hover);
  color: var(--sk-oncta);
  box-shadow: var(--sk-sh-2);
}
/* na nejužších telefonech ať CTA netrčí — plná šířka */
@media (max-width: 420px) {
  .sk-hero-2026 .sk-hero__cta { width: 100%; }
}

.sk-hero-2026 .sk-hero__cards {
  flex: 1 1 330px;
  min-width: min(100%, 300px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sk-hero-2026 .sk-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 2;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--sk-r);
  border: 1px solid var(--sk-line);
  background: var(--sk-ink);
  padding: 16px;
  text-decoration: none;
  box-shadow: var(--sk-sh-2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sk-hero-2026 .sk-hero__card:hover { transform: translateY(-2px); box-shadow: var(--sk-sh-3); }
.sk-hero-2026 .sk-hero__card img {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.sk-hero-2026 .sk-hero__card:hover img { transform: scale(1.05); }
.sk-hero-2026 .sk-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.35) 45%, transparent);
}
.sk-hero-2026 .sk-hero__card-label {
  position: relative;
  font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff;
}
.sk-hero-2026 .sk-hero__card-tag {
  position: relative;
  margin-top: 4px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--sk-tag);
}
/* Na tabletu se text a fotokarty zalomí pod sebe a dlaždice mají najednou
   celou šířku — 2×2 by z hera udělalo 917 px vysoký blok a zboží by spadlo
   hluboko pod záhyb. V tom pásmu jdou karty do jedné řady po čtyřech. */
@media (min-width: 600px) and (max-width: 991px) {
  .sk-hero-2026 .sk-hero__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dvě fotokarty vedle sebe zůstávají i na 320 px. Zkusil jsem je tam složit
   pod sebe, ale hero tím narostl na 1220 px a uživatel se k produktům
   neprokousal — dvě těsnější dlaždice jsou menší zlo. Štítek se na úzkém
   zmenší, aby se nelámal na tři řádky. */
@media (max-width: 400px) {
  .sk-hero-2026 .sk-hero__cards { gap: 10px; }
  .sk-hero-2026 .sk-hero__card { padding: 10px; }
  .sk-hero-2026 .sk-hero__card-label { font-size: 13px; }
  .sk-hero-2026 .sk-hero__card-tag { font-size: 10px; letter-spacing: 0.04em; }
}


/* =============================================================================
   6. PILÍŘOVÝ PRUH
   auto-fit + minmax — počet sloupců si řeší sám, žádný breakpoint.
   ========================================================================== */
.sk-hero-2026 .sk-pillars {
  margin-top: 32px;
  border-top: 1px solid var(--sk-line2);
  padding-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.sk-hero-2026 .sk-pillar { display: flex; align-items: center; gap: 12px; }
.sk-hero-2026 .sk-pillar svg { display: block; color: var(--sk-ink); flex: 0 0 auto; }
.sk-hero-2026 .sk-pillar span:last-child {
  font-size: 13px; font-weight: 500; line-height: 1.375; color: var(--sk-body);
}


/* =============================================================================
   7. MŘÍŽKA PRODUKTŮ
   Audit 2026-09-12: dnes 1 sloupec na telefonu (karta 573 px vysoká),
   2 od 768, 3 od 1024 — a na 1024 je karta 226 px, užší než na telefonu.
   Příčina: pevné počty sloupců na třech breakpointech.

   Nově: na telefonu vždy DVA sloupce, od 640 px `auto-fill`, takže počet
   sloupců roste plynule s dostupnou šířkou a je jedno, jestli je vedle
   postranní sloupec nebo ne.
   ========================================================================== */
.products,
#js-product-list .products,
body#index .products,
body#category #js-product-list .products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--sk-card-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

@media (min-width: 640px) {
  .products,
  #js-product-list .products,
  body#index .products,
  body#category #js-product-list .products {
    grid-template-columns: repeat(auto-fill, minmax(var(--sk-card-min), 1fr)) !important;
  }
}

/* V postranním sloupci je místo jen na jednu kartu vedle druhé. */
#left-column .products, #right-column .products {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}

/* Na tabletu ukrajoval postranní sloupec třetinu šířky a zboží se do ní vešlo
   jen po dvou (karta 261 px). Do 991 px jde obsah přes celou šířku a postranní
   bloky se řadí pod něj — produkty tím dostanou tři až čtyři sloupce. */
@media (max-width: 991px) {
  #content-wrapper,
  #content-wrapper.left-column,
  #content-wrapper.right-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 1 !important;
  }
  #left-column, #right-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 2 !important;
  }
  #wrapper .container > .row { display: flex !important; flex-wrap: wrap !important; }
}


html:not(#sk-a) body:not(#sk-b) /* =============================================================================
   8. PRODUKTOVÁ KARTA — JEDNA PODOBA PRO VŠECHNY KONTEXTY

   Selektory tady nesou prefix `html:not(#sk-a) body:not(#sk-b)` ze stejného
   důvodu jako sekce 13: starý list cílí kartu přes `body:not(#index) …`, což
   se do specificity počítá jako ID. Bez prefixu prohrála velikost písma,
   barva ceny, čtvercový obrázek i šířka tlačítka — naměřeno.

   Starý list ji popisuje dvakrát a rozdílně: `body#index` (textová červená
   tlačítka, bez dostupnosti, cena 16 px) proti `body:not(#index)` (ikonová
   zelená tlačítka 40 px, tečka + dostupnost, cena 19 px), plus zelený podtón
   pro `#angarbest`. Tady je jedna karta bez ohledu na stránku — selektory
   proto vědomě NEROZLIŠUJÍ `#index`.
   ========================================================================== */
.product-miniature,
  html:not(#sk-a) body:not(#sk-b) .js-product-miniature {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  background: transparent !important;
}

html:not(#sk-a) body:not(#sk-b) .product-miniature .thumbnail-container {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-r) !important;
  background: var(--sk-raised) !important;
  box-shadow: var(--sk-sh-1) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature:hover .thumbnail-container {
  border-color: var(--sk-line2) !important;
  box-shadow: var(--sk-sh-3) !important;
  transform: translateY(-2px) !important;
}

html:not(#sk-a) body:not(#sk-b) /* AngarTheme dělí kartu na .product-left / .product-right a plave je vedle
   sebe. Na kartě v mřížce to nedává smysl — skládáme je pod sebe. */
.product-miniature .product-left,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-right {
  float: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-right { flex: 1 1 auto !important; padding: 12px !important; }

html:not(#sk-a) body:not(#sk-b) /* ---- obrázek: čtverec, fotka se do něj vejde celá ---- */
.product-miniature .product-image-container { padding: 0 !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-thumbnail {
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  background: #fff !important;
  border-bottom: 1px solid var(--sk-line) !important;
  overflow: hidden !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  padding: 10px !important;
  transition: transform .4s ease !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature:hover .product-thumbnail img { transform: scale(1.04) !important; }

html:not(#sk-a) body:not(#sk-b) /* ---- vlaječky ---- */
.product-miniature .product-flags-plist,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-flags {
  position: absolute !important;
  top: 10px !important; left: 10px !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  margin: 0 !important; padding: 0 !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-flag {
  display: inline-block !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border-radius: var(--sk-r-pill) !important;
  background: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  width: auto !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-flag.discount-percentage,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-flag.discount,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-flag.on-sale,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-flag.on_sale,
  html:not(#sk-a) body:not(#sk-b) .product-miniature span.discount-percentage {
  background: var(--sk-sale) !important;   /* ODVOZENO */
  color: #fff !important;
}

html:not(#sk-a) body:not(#sk-b) /* ---- srdíčko: 44 × 44 klikací plocha (dnes 34 × 34) ---- */
.product-miniature .wishlist-button-add,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .wishlist-button {
  position: absolute !important;
  top: 4px !important; right: 4px !important;
  z-index: 2 !important;
  width: var(--sk-tap) !important;
  height: var(--sk-tap) !important;
  min-height: var(--sk-tap) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--sk-r-pill) !important;
  background: rgba(250, 246, 236, 0.82) !important;
  color: var(--sk-ink) !important;
  box-shadow: none !important;
}

html:not(#sk-a) body:not(#sk-b) /* ---- text ---- */
.product-miniature .pl_reference,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .pl_manufacturer,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-desc {
  display: none !important;   /* na kartě v mřížce není místo; žijí na detailu */
}

html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: var(--sk-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

html:not(#sk-a) body:not(#sk-b) /* ---- spodek karty: cena → dostupnost → tlačítko, přišpendlený dolů,
        aby karty v řadě končily stejně ---- */
.product-miniature .product-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-price-and-shipping {
  order: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
  margin: 0 !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-price-and-shipping .price,
  html:not(#sk-a) body:not(#sk-b) .product-miniature span.price {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--sk-ink) !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .regular-price {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--sk-sub) !important;
  text-decoration: line-through !important;
}

html:not(#sk-a) body:not(#sk-b) .product-miniature .availability { order: 2 !important; margin: 0 !important; min-height: 16px !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--sk-ok) !important;            /* ODVOZENO */
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability i,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability i.material-icons { display: none !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability::after { content: none !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability::before {
  content: "" !important;
  width: 7px !important; height: 7px !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  background: currentColor !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability:has(.product-last-items) { color: var(--sk-warn) !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability:has(.product-unavailable) { color: var(--sk-sale) !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability.avail-onorder { color: var(--sk-warn) !important; }

html:not(#sk-a) body:not(#sk-b) /* ---- akce: jedno plné tlačítko přes celou šířku, 44 px vysoké.
        Dnes je to na telefonu 40 × 28 px, tedy menší než na desktopu. ---- */
.product-miniature .button-container {
  order: 3 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container form.add-to-cart-or-refresh { flex: 1 1 auto !important; margin: 0 !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container a.btn.add-to-cart,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container button.add-to-cart {
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--sk-tap) !important;
  height: auto !important;
  padding: 0 12px !important;
  border-radius: var(--sk-r-sm) !important;
  background: var(--sk-ink) !important;
  border: 1px solid var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: var(--sk-sh-1) !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart:hover:not([disabled]) {
  background: var(--sk-ink-hover) !important;
  border-color: var(--sk-ink-hover) !important;
  box-shadow: var(--sk-sh-2) !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart i,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart i.material-icons {
  color: var(--sk-oncta) !important;
  font-size: 18px !important;
}
html:not(#sk-a) body:not(#sk-b) /* „Zobrazit" je samostatná ikona vedle; celá karta je stejně prokliknutelná */
.product-miniature .button-container .lnk_view,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container a.button.lnk_view {
  flex: 0 0 auto !important;
  width: var(--sk-tap) !important;
  min-width: var(--sk-tap) !important;
  min-height: var(--sk-tap) !important;
  padding: 0 !important;
  border-radius: var(--sk-r-sm) !important;
  background: transparent !important;
  border: 1px solid var(--sk-line2) !important;
  color: var(--sk-ink) !important;
  box-shadow: none !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .lnk_view:hover { border-color: var(--sk-ink) !important; background: var(--sk-sunken) !important; }

html:not(#sk-a) body:not(#sk-b) /* množstevní pole na kartě je na telefonu na obtíž */
.product-miniature .qty_container { display: none !important; }

/* Na nejužších telefonech text na tlačítku zmizí, zůstane ikona —
   jinak se do 138px karty nevejde.
   POZOR: před `@media` nesmí stát selektor. Stál tu (zbytek po hromadném
   přeznačení specificity) a prohlížeč kvůli tomu celý blok zahazoval. */
@media (max-width: 400px) {
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart span,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart { font-size: 12px !important; }
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title a { font-size: 13px !important; }
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-price-and-shipping .price { font-size: 15px !important; }
}

html:not(#sk-a) body:not(#sk-b) /* zelený podtón bestsellerů pryč — karta je všude stejná */
#angarbest .product-miniature .thumbnail-container,
  html:not(#sk-a) body:not(#sk-b) #left-column .product-miniature .thumbnail-container {
  background: var(--sk-raised) !important;
  border-color: var(--sk-line) !important;
}


/* =============================================================================
   9. STRÁNKA KATEGORIE
   ========================================================================== */
body#category #content-wrapper, body#category #main { background: transparent !important; }

/* Popisný box kategorie. Skutečné id v tomhle tématu je `#category_desc`
   (ne `#category-description`, jak se dá čekat) — ověřeno na produkci. */
#category_desc,
body#category .block-category {
  background: var(--sk-raised) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-r) !important;
  padding: 20px !important;
  color: var(--sk-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  box-shadow: none !important;
}
#category_desc p:last-child { margin-bottom: 0 !important; }

/* Dlouhý SEO popis kategorie tlačí zboží pod záhyb — na telefonu ho složíme
   do prvních pár řádků. Rozbalení řeší `sympakt-2026.js`. */
@media (max-width: 767px) {
  #category_desc.sk-clamped {
    max-height: 8.5em !important;
    overflow: hidden !important;
    position: relative !important;
  }
  #category_desc.sk-clamped::after {
    content: "";
    position: absolute; inset-inline: 0; bottom: 0; height: 3em;
    background: linear-gradient(to top, var(--sk-raised), rgba(250, 246, 236, 0));
  }
  body#category .sk-desc-toggle {
    display: inline-flex !important;
    align-items: center;
    min-height: var(--sk-tap);
    margin-top: 4px;
    padding: 0 4px;
    background: none;
    border: 0;
    color: var(--sk-ink);
    font: 600 14px/1 var(--sk-font);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
  }
}

/* podkategorie — stejná plynulá mřížka jako produkty, nikdy 1 sloupec */
body#category #subcategories ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--sk-card-gap) !important;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
@media (min-width: 640px) {
  body#category #subcategories ul { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
}
body#category #subcategories li { width: auto !important; margin: 0 !important; }
body#category #subcategories .subcategory-image,
body#category #subcategories li > a {
  display: block !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-r) !important;
  background: var(--sk-raised) !important;
  overflow: hidden !important;
}
body#category #subcategories img { width: 100% !important; height: auto !important; aspect-ratio: 3/2 !important; object-fit: cover !important; display: block !important; }
body#category #subcategories .subcategory-name {
  display: block !important;
  min-height: var(--sk-tap) !important;
  padding: 10px 12px !important;
  color: var(--sk-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

/* řazení + filtry */
body#category .products-sort-order .select-title,
body#category .sort-orders .select-title {
  min-height: var(--sk-tap) !important;
  border: 1px solid var(--sk-line2) !important;
  border-radius: var(--sk-r-sm) !important;
  background: var(--sk-raised) !important;
  color: var(--sk-body) !important;
  font-size: 14px !important;
}

/* drobečky */
.breadcrumb, #wrapper .breadcrumb {
  background: transparent !important;
  border: 0 !important;
  padding-inline: 0 !important;
}
.breadcrumb a, .breadcrumb li, .breadcrumb span {
  color: var(--sk-sub) !important;
  font-size: 13px !important;
  background: none !important;
}
.breadcrumb a:hover { color: var(--sk-ink) !important; }

/* stránkování — dlaždice aspoň 44 px */
.pagination a, .pagination .page-list a, .pagination li a {
  min-width: var(--sk-tap) !important;
  min-height: var(--sk-tap) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-r-sm) !important;
  background: var(--sk-raised) !important;
  color: var(--sk-ink) !important;
}
.pagination .current a, .pagination li.current a {
  background: var(--sk-ink) !important;
  border-color: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
}


/* =============================================================================
   10. DETAIL PRODUKTU
   ========================================================================== */
body#product .product_name { font-size: clamp(1.375rem, 1.6vw + 1rem, 2rem) !important; }
body#product .product-prices .current-price span.price {
  font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem) !important;
  font-weight: 700 !important;
  color: var(--sk-ink) !important;
}
body#product .product-prices .regular-price { color: var(--sk-sub) !important; text-decoration: line-through !important; }

body#product .product-add-to-cart .add-to-cart,
body#product button.add-to-cart {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: var(--sk-r-sm) !important;
  background: var(--sk-ink) !important;
  border-color: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
@media (min-width: 768px) {
  body#product .product-add-to-cart .add-to-cart { width: auto !important; min-width: 260px !important; }
}

body#product .product-cover img,
body#product .product-images img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--sk-r) !important;
  background: #fff !important;
}
body#product .product-tabs .nav-tabs .nav-link,
body#product .tabs .nav-tabs .nav-link {
  min-height: var(--sk-tap) !important;
  color: var(--sk-sub) !important;
  border: 0 !important;
  font-weight: 600 !important;
}
body#product .product-tabs .nav-tabs .nav-link.active {
  color: var(--sk-ink) !important;
  border-bottom: 2px solid var(--sk-ink) !important;
  background: transparent !important;
}


/* =============================================================================
   11. PATIČKA
   ========================================================================== */
#footer, .footer-container {
  background: var(--sk-sunken) !important;
  border-top: 1px solid var(--sk-line) !important;
  color: var(--sk-body) !important;
}
#footer h3, #footer .h3, #footer .myaccount-title, #footer .block-title {
  color: var(--sk-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
#footer a, .footer-container a { color: var(--sk-sub) !important; text-decoration: none !important; }
#footer a:hover { color: var(--sk-ink) !important; text-decoration: underline !important; }

/* na telefonu mají odkazy v patičce plnou klikací výšku */
@media (max-width: 767px) {
  #footer .block_content li a, .footer-container .block_content li a {
    display: block !important;
    min-height: var(--sk-tap) !important;
    display: flex !important;
    align-items: center !important;
  }
}

#footer .block-newsletter input[type="email"],
#blockEmailSubscription_displayFooterAfter input[type="email"] {
  min-height: var(--sk-tap) !important;
  border-radius: var(--sk-r-sm) !important;
  background: var(--sk-raised) !important;
  border: 1px solid var(--sk-line2) !important;
}


/* =============================================================================
   12. ÚKLID PO STARÉM LISTU
   Věci, které nová paleta přebíjí plošně, ať někde nezůstane zelený pruh
   nebo červené tlačítko z předchozí fáze.
   ========================================================================== */
/* Starý zelený hero je nahrazený `hero.tpl`. */
.sympakt-home-hero { display: none !important; }

/* USP pruh („Doprava zdarma / Vrácení zboží / Jsme tu pro vás / Bezpečnost
   plateb") jde pryč celý — pokyn Láďa 2026-09-12. Nejdřív se měl stěhovat nad
   patičku, pak padlo rozhodnutí ho zrušit. Markup z `index.tpl` odstraňuje
   `proposed/index.tpl`; tohle pravidlo je pojistka pro případ, že se blok
   vykreslí odjinud (např. z modulu na jiné stránce než homepage). */
.usp-trust-bar,
body#index .usp-trust-bar { display: none !important; }


/* -----------------------------------------------------------------------------
   HOMEPAGE: PRODUKTY MUSÍ BÝT VIDĚT HNED  (pokyn Láďa 2026-09-12)

   Naměřeno na produkci: po načtení homepage je viditelných 0 produktů. Lišta
   záložek se vykreslí, ale žádný `.tab-pane` nemá `active`/`in`, takže se zboží
   objeví teprve po kliknutí (pak 8 kusů).

   Záchranná síť bez JS: pokud uvnitř #tab-content není ANI JEDEN aktivní panel,
   ukaž první. `sympakt-2026.js` navíc doplní třídy, aby seděla i lišta záložek.
   -------------------------------------------------------------------------- */
#tab-content:not(:has(> .tab-pane.active)) > .tab-pane:first-of-type,
.tab-content:not(:has(> .tab-pane.active)) > .tab-pane:first-of-type {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
}

/* Lišta záložek do vizuálu Cream */
#home-page-tabs.nav-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sk-line) !important;
  list-style: none !important;
}
#home-page-tabs .nav-item > a, #home-page-tabs li > a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: var(--sk-tap) !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sk-sub) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
#home-page-tabs .nav-item > a.active, #home-page-tabs li.active > a,
#home-page-tabs .nav-item > a:hover {
  color: var(--sk-ink) !important;
  border-bottom-color: var(--sk-ink) !important;
  background: transparent !important;
}

/* zelené pozadí hlavní nav lišty z AngarTheme */
#header .header-top .menu,
#header #_desktop_top_menu .menu { background: transparent !important; }

/* WhatsApp bublina ať nepřekrývá tlačítko na kartě vpravo dole */
@media (max-width: 767px) {
  .angarwhatsapp, #angarwhatsapp, .whatsapp-button { bottom: 76px !important; }
}

/* žádná stránka nesmí přetékat do strany */
html, body { max-width: 100% !important; overflow-x: hidden !important; }
img, video, iframe, table { max-width: 100% !important; }


/* =============================================================================
   13. PŘETLAČENÍ STARÉHO LISTU

   Tenhle blok existuje jen kvůli specificitě. `sympakt-custom-v1.css` má na
   řadě míst selektory jako `body:not(#index) .product-miniature
   .button-container .add-to-cart` (0,4,1) s `!important`; pravidlo o jednu
   třídu slabší prohraje, i když je v pořadí později. Ověřeno na produkci —
   bez tohohle bloku zůstaly zelený košík, zelený podtón bestsellerů a
   ikonové tlačítko 40 px široké.

   Proč zrovna `html:not(#sk-a) body:not(#sk-b)`: `:not(#index)` se do
   specificity počítá jako ID, takže `body:not(#index) .product-miniature
   .button-container .add-to-cart` má (1,3,1). Prefix `html body` dá jen
   (0,x,2) a prohraje bez ohledu na počet tříd — proto dvě umělá `:not(#…)`,
   která zvednou ID na dvě, aniž by cokoliv vybrala jinak. Selektory
   `#sk-a`/`#sk-b` v dokumentu neexistují a existovat nemají.

   Jinak se tu nic nového nevymýšlí, jen se opakují deklarace z bloků výš.
   Až starý list zmizí, celá sekce jde smazat.
   ========================================================================== */

/* --- plátno a velké panely --- */
html:not(#sk-a) body:not(#sk-b) section#wrapper,
html:not(#sk-a) body:not(#sk-b) #wrapper {
  background: transparent !important;
  background-color: transparent !important;
}
html:not(#sk-a) body:not(#sk-b) #category_desc,
html:not(#sk-a) body:not(#sk-b) #subcategories {
  background: var(--sk-raised) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-r) !important;
  box-shadow: none !important;
}
html:not(#sk-a) body:not(#sk-b) #subcategories .subcategory-heading,
html:not(#sk-a) body:not(#sk-b) .products-section-title,
html:not(#sk-a) body:not(#sk-b) #left-column .block .title_block,
html:not(#sk-a) body:not(#sk-b) #left-column .block h3 {
  color: var(--sk-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom-color: var(--sk-line) !important;
}
html:not(#sk-a) body:not(#sk-b) #left-column .block .title_block::after,
html:not(#sk-a) body:not(#sk-b) #left-column .block h3::after,
html:not(#sk-a) body:not(#sk-b) .products-section-title::after { background: var(--sk-ink) !important; }

/* --- karta: zrušit zelený podtón a srovnat tlačítka --- */
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature .thumbnail-container,
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature .product-right,
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature .product-left {
  background: var(--sk-raised) !important;
  background-color: var(--sk-raised) !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature .product-thumbnail,
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature .product-thumbnail img { background: #fff !important; }

html:not(#sk-a) body:not(#sk-b) .products .product-miniature.product-miniature .button-container .add-to-cart,
html:not(#sk-a) body:not(#sk-b) .products .product-miniature.product-miniature .button-container a.btn.add-to-cart,
html:not(#sk-a) body:not(#sk-b) .products .product-miniature.product-miniature .button-container button.add-to-cart {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: var(--sk-tap) !important;
  background-color: var(--sk-ink) !important;
  border-color: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
  box-shadow: var(--sk-sh-1) !important;
}
html:not(#sk-a) body:not(#sk-b) .products .product-miniature.product-miniature .button-container .add-to-cart:hover:not([disabled]) {
  background-color: var(--sk-ink-hover) !important;
  border-color: var(--sk-ink-hover) !important;
}
html:not(#sk-a) body:not(#sk-b) .products .product-miniature.product-miniature .button-container .lnk_view,
html:not(#sk-a) body:not(#sk-b) .products .product-miniature.product-miniature .button-container a.button.lnk_view {
  width: var(--sk-tap) !important;
  min-width: var(--sk-tap) !important;
  min-height: var(--sk-tap) !important;
  background-color: transparent !important;
  border: 1px solid var(--sk-line2) !important;
  color: var(--sk-ink) !important;
}
/* odznak „BESTSELLER" a vlaječky do palety */
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature .product-flag { background-color: var(--sk-ink) !important; color: var(--sk-oncta) !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature .product-flag.discount-percentage,
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature span.discount-percentage,
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature .product-flag.on-sale,
html:not(#sk-a) body:not(#sk-b) .product-miniature.product-miniature .product-flag.on_sale { background-color: var(--sk-sale) !important; color: #fff !important; }
html:not(#sk-a) body:not(#sk-b) #angarbest .product-miniature.product-miniature .product-flag,
html:not(#sk-a) body:not(#sk-b) .bestseller-badge { background-color: var(--sk-sunken) !important; color: var(--sk-ink) !important; }

/* --- košík v hlavičce: zelená krabice pryč --- */
html:not(#sk-a) body:not(#sk-b) #header .blockcart,
html:not(#sk-a) body:not(#sk-b) #header .blockcart .header,
html:not(#sk-a) body:not(#sk-b) #header #_desktop_cart .blockcart,
html:not(#sk-a) body:not(#sk-b) #header #_desktop_cart .blockcart .header {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--sk-ink) !important;
}
html:not(#sk-a) body:not(#sk-b) #header .blockcart a:not(.btn),
html:not(#sk-a) body:not(#sk-b) #header .blockcart .header a:not(.btn),
html:not(#sk-a) body:not(#sk-b) #header .blockcart span:not(.btn) { color: var(--sk-ink) !important; }

/* tlačítka v rozbaleném košíku si drží světlý text na tmavém pozadí */
html:not(#sk-a) body:not(#sk-b) #header .blockcart a.btn,
html:not(#sk-a) body:not(#sk-b) #subcart .cart-buttons .viewcart,
html:not(#sk-a) body:not(#sk-b) #subcart .cart-buttons a.btn {
  background-color: var(--sk-ink) !important;
  border-color: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
}
html:not(#sk-a) body:not(#sk-b) #header .blockcart a.btn i,
html:not(#sk-a) body:not(#sk-b) #subcart .cart-buttons a.btn i { color: var(--sk-oncta) !important; }
html:not(#sk-a) body:not(#sk-b) #header .blockcart .cart-products-count {
  background-color: transparent !important;
  color: var(--sk-sub) !important;
  border-radius: 0 !important;
  position: static !important;
  padding: 0 !important;
  min-width: 0 !important;
}
/* odznak s číslem zůstává jen mobilnímu košíku v pásu ikon */
html:not(#sk-a) body:not(#sk-b) #_mobile_cart .cart-products-count {
  background-color: var(--sk-sub) !important;
  color: var(--sk-oncta) !important;
  border-radius: var(--sk-r-pill) !important;
  position: absolute !important;
  padding: 0 4px !important;
  min-width: 18px !important;
}

/* --- drobečky: bez šipkových dlaždic --- */
html:not(#sk-a) body:not(#sk-b) .breadcrumb,
html:not(#sk-a) body:not(#sk-b) .breadcrumb li,
html:not(#sk-a) body:not(#sk-b) .breadcrumb li a,
html:not(#sk-a) body:not(#sk-b) .breadcrumb li span {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--sk-sub) !important;
}
html:not(#sk-a) body:not(#sk-b) .breadcrumb li::after,
html:not(#sk-a) body:not(#sk-b) .breadcrumb li::before { background: none !important; border: 0 !important; }
html:not(#sk-a) body:not(#sk-b) .breadcrumb li a { color: var(--sk-sub) !important; }
html:not(#sk-a) body:not(#sk-b) .breadcrumb li a:hover { color: var(--sk-ink) !important; }

/* --- zbylá zelená tlačítka mimo kartu --- */
/* POZOR: `#cookie-accept` tu dřív bylo taky, s inkoustovým pozadím. Jenže
   cookie lišta má pozadí sama inkoustové, takže tlačítko splynulo s podkladem.
   Přesunuto do §17.6. „Odebírat" v patičce inkoustové zůstává — leží na
   krémové, tam je to správně. */
html:not(#sk-a) body:not(#sk-b) input.btn-newsletter,
html:not(#sk-a) body:not(#sk-b) .btn-newsletter {
  background-color: var(--sk-ink) !important;
  border-color: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
  min-height: var(--sk-tap) !important;
  border-radius: var(--sk-r-sm) !important;
}
html:not(#sk-a) body:not(#sk-b) #cookie-banner { background-color: var(--sk-ink) !important; color: var(--sk-oncta) !important; }
html:not(#sk-a) body:not(#sk-b) #cookie-banner a { color: var(--sk-tag) !important; }

/* WhatsApp bublina je cizí widget s vlastní zelenou — nesaháme na barvu,
   jen ji držíme mimo tlačítka karet (viz §12). */

/* --- rozměry uvnitř karty ---------------------------------------------------
   Naměřeno po prvním průchodu: karta 182 px, ale `.button-container` jen 76 px
   a `.product-thumbnail` 131 × 116 px. Sloupce uvnitř karty se nenatahovaly na
   plnou šířku, takže `width:100%` na tlačítku se počítalo z úzkého rodiče.
   ------------------------------------------------------------------------- */
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-left,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-right,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-description,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-bottom,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-image-container,
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-price-and-shipping {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  align-items: stretch !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 8px !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-price-and-shipping {
  align-items: baseline !important;
  justify-content: flex-start !important;
}

/* obrázek: čtverec přes celou šířku karty */
html:not(#sk-a) body:not(#sk-b) .product-miniature a.thumbnail.product-thumbnail,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-thumbnail {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-thumbnail picture { display: block !important; width: 100% !important; height: 100% !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-thumbnail img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  padding: 10px !important;
  margin: 0 !important;
}

/* titulek na dva řádky, ne na jeden */
html:not(#sk-a) body:not(#sk-b) .product-miniature h3.product-title,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title {
  height: auto !important;
  max-height: none !important;
  min-height: 2.7em !important;
  overflow: visible !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

/* cena a dostupnost do palety (starý list měl námořnickou modř a jinou zeleň) */
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-price-and-shipping .price,
html:not(#sk-a) body:not(#sk-b) .product-miniature span.price {
  font-size: 17px !important;
  color: var(--sk-ink) !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability { color: var(--sk-ok) !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability:has(.product-last-items)  { color: var(--sk-warn) !important; }
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability:has(.product-unavailable) { color: var(--sk-sale) !important; }

@media (max-width: 400px) {
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title a { font-size: 13px !important; }
  html:not(#sk-a) body:not(#sk-b) .product-miniature .product-price-and-shipping .price { font-size: 15px !important; }
}

/* --- srovnání vnitřních odsazení karty --------------------------------------
   Naměřeno: `thumbnail-container` má 16 px, `product-left` dalších 15 px a
   `product-right` 12 px. Ve 182px kartě na telefonu z toho zbyde 122 px na
   obsah a obrázek vyjde 131 px místo 158. Obrázek má jít od kraje ke kraji,
   text si odsazení nechá.
   ------------------------------------------------------------------------- */
html:not(#sk-a) body:not(#sk-b) .product-miniature .thumbnail-container {
  padding: 0 !important;
  gap: 0 !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-left,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-image-container {
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-right {
  padding: 12px !important;
  flex: 1 1 auto !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-description {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}

/* formulář s košíkem musí vyplnit řádek, jinak zůstane tlačítko na šířku ikony */
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container form,
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container form.add-to-cart-or-refresh {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container { justify-content: flex-start !important; }

/* --- max-width na tlačítku karty --------------------------------------------
   Starý list má `.button-container .add-to-cart { max-width: 28px !important }`.
   Samotné `width: 100%` proto nestačí — stovka se o ten strop zasekne
   a tlačítko zůstane na šířku ikony. Ověřeno přes CSS.getMatchedStylesForNode.
   ------------------------------------------------------------------------- */
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart,
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container a.btn.add-to-cart,
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container button.add-to-cart {
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .lnk_view,
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container a.button.lnk_view {
  max-width: var(--sk-tap) !important;
  width: var(--sk-tap) !important;
  min-width: var(--sk-tap) !important;
}
/* ikona v tlačítku nesmí pohltit šířku popisku */
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart i.material-icons {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* --- popisek tlačítka, zarovnání a rytmus karty -----------------------------
   Popisek „Přidat do košíku" se na úzké kartě láme na dva řádky, ale starý
   list drží na tlačítku skoro nulový `line-height`, takže se řádky překryly
   přes sebe. Markup je přitom v pořádku (ikona + text, `aria-label` sedí).
   ------------------------------------------------------------------------- */
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart {
  line-height: 1.15 !important;
  white-space: normal !important;
  text-align: center !important;
  padding: 6px 10px !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart i.material-icons {
  line-height: 1 !important;
}

/* text karty doleva — editorial jazyk artboardu, ne vystředěný e-shop */
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-right,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-description,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title a,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-price-and-shipping,
html:not(#sk-a) body:not(#sk-b) .product-miniature .availability,
html:not(#sk-a) body:not(#sk-b) .product-miniature .pl-availability {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* dělicí linka mezi titulkem a cenou je z původního tématu — pryč */
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-description::after,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title::after,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-bottom::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-bottom {
  border-top: 0 !important;
  padding-top: 10px !important;
}

/* titulek ať neroste do zbytečné výšky, když má jeden řádek */
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-title {
  min-height: 0 !important;
  margin: 0 0 6px !important;
}

/* ikona oka v sekundárním tlačítku zůstávala zelená z původní palety */
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .lnk_view i,
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .lnk_view i.material-icons,
html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .lnk_view::before {
  color: var(--sk-ink) !important;
}
html:not(#sk-a) body:not(#sk-b) .product-miniature .wishlist-button-add i,
html:not(#sk-a) body:not(#sk-b) .product-miniature .wishlist-button-add i.material-icons { color: var(--sk-ink) !important; }

/* --- telefon: jedno tlačítko přes celou kartu --------------------------------
   Ve 182px kartě zbyde na tlačítko 102 px a „Přidat do košíku" se láme na tři
   řádky. Sekundární „oko" na telefonu nemá co dělat — celá karta je odkaz na
   detail — takže ho schováme a primární akce dostane celou šířku.
   ------------------------------------------------------------------------- */
@media (max-width: 575px) {
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .lnk_view,
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container a.button.lnk_view {
    display: none !important;
  }
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart {
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }
  html:not(#sk-a) body:not(#sk-b) .product-miniature .button-container .add-to-cart i.material-icons {
    font-size: 17px !important;
  }
}

/* --- vlaječky: jen procento a „Výprodej" ------------------------------------
   Na kartě se skládaly tři nad sebou („-60 %", „VÝPRODEJ!", „SNÍŽENÁ CENA")
   a říkaly totéž. Odznak „Nedostupné" navíc duplikoval řádek dostupnosti pod
   cenou. Schváleno Láďou 2026-09-12: zůstává procento a „Výprodej", plus
   „Nové", protože nese jinou informaci.
   ------------------------------------------------------------------------- */
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-flag.discount,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-flag.out_of_stock,
html:not(#sk-a) body:not(#sk-b) .product-miniature .product-flag.out-of-stock {
  display: none !important;
}

/* =============================================================================
   14. NÁKUPNÍ CESTA — opravy nalezené na produkci 2026-09-12

   Obojí je v košíku, tedy na nejcitlivějším místě webu.
   ========================================================================== */

/* 1) `a.btn.btn-primary.viewcart` („K pokladně" v okně po přidání do košíku)
      měl inkoustové pozadí i inkoustový text — nápis byl neviditelný.
      Naměřeno: background rgb(12,26,20), color rgb(12,26,20).
      Barvu textu proto vynucujeme u všech primárních tlačítek, ne jen pozadí. */
html:not(#sk-a) body:not(#sk-b) .btn-primary,
html:not(#sk-a) body:not(#sk-b) a.btn.btn-primary,
html:not(#sk-a) body:not(#sk-b) button.btn.btn-primary,
html:not(#sk-a) body:not(#sk-b) .btn-primary span,
html:not(#sk-a) body:not(#sk-b) .btn-primary i {
  color: var(--sk-oncta) !important;
}
html:not(#sk-a) body:not(#sk-b) .btn-primary {
  background-color: var(--sk-ink) !important;
  border-color: var(--sk-ink) !important;
}
html:not(#sk-a) body:not(#sk-b) .btn-primary:hover {
  background-color: var(--sk-ink-hover) !important;
  border-color: var(--sk-ink-hover) !important;
  color: var(--sk-oncta) !important;
}

/* 2) Neaktivní „Pokračovat k pokladně" u prázdného košíku zůstávalo zelené
      ze staré palety (rgb(46,125,50)). Nedostupné tlačítko má být ztlumený
      inkoust, ne jiná barva. */
html:not(#sk-a) body:not(#sk-b) .btn-primary.disabled,
html:not(#sk-a) body:not(#sk-b) .btn-primary[disabled],
html:not(#sk-a) body:not(#sk-b) .btn.disabled,
html:not(#sk-a) body:not(#sk-b) .btn[disabled] {
  background-color: var(--sk-ink) !important;
  border-color: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
  opacity: .4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* 3) Blok se zárukami pod košíkem (modul blockreassurance) zůstal bílý
      a v verzálkách. Do palety a bez křiku. */
html:not(#sk-a) body:not(#sk-b) #block-reassurance,
html:not(#sk-a) body:not(#sk-b) .block-reassurance,
html:not(#sk-a) body:not(#sk-b) [class*="reassurance"] > ul,
html:not(#sk-a) body:not(#sk-b) .blockreassurance_product {
  background: var(--sk-raised) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-r) !important;
  box-shadow: none !important;
}
html:not(#sk-a) body:not(#sk-b) [class*="reassurance"] span,
html:not(#sk-a) body:not(#sk-b) [class*="reassurance"] p {
  text-transform: none !important;
  color: var(--sk-body) !important;
  line-height: 1.4 !important;
}
html:not(#sk-a) body:not(#sk-b) [class*="reassurance"] .block-title,
html:not(#sk-a) body:not(#sk-b) [class*="reassurance"] span.h6 {
  color: var(--sk-ink) !important;
  font-weight: 700 !important;
}

/* =============================================================================
   15. ZBYTKY STARÉ ZELENÉ

   Sken osmi typů stránek (home, kategorie, detail, košík, hledání, kontakt,
   účet, CMS) našel místa, kde prosvítala původní paleta — #1b7a3d, #2e7d32,
   #0f4f25, #01c810. Vždy jen barva textu nebo pozadí, žádná struktura.
   WhatsApp bublina je cizí widget a barvu si nechává.
   ========================================================================== */

/* kontakty v horní liště */
html:not(#sk-a) body:not(#sk-b) #header .header-nav a,
html:not(#sk-a) body:not(#sk-b) #header .header-nav strong,
html:not(#sk-a) body:not(#sk-b) #header .header-nav .brand-email-link,
html:not(#sk-a) body:not(#sk-b) #header .header-nav i { color: var(--sk-sub) !important; }
html:not(#sk-a) body:not(#sk-b) #header .header-nav a:hover,
html:not(#sk-a) body:not(#sk-b) #header .header-nav a strong { color: var(--sk-ink) !important; }

/* aktivní záložka na homepage — skutečná třída je `.nav-link.active`,
   ne `.nav-item > a.active`, jak jsem původně cílil */
html:not(#sk-a) body:not(#sk-b) #home-page-tabs .nav-link,
html:not(#sk-a) body:not(#sk-b) #home-page-tabs a.nav-link { color: var(--sk-sub) !important; }
html:not(#sk-a) body:not(#sk-b) #home-page-tabs .nav-link.active,
html:not(#sk-a) body:not(#sk-b) #home-page-tabs a.nav-link.active {
  color: var(--sk-ink) !important;
  border-bottom-color: var(--sk-ink) !important;
}

/* cena: zelenou nesl obal, ne jen `.price`, takže prosvítala skrz */
html:not(#sk-a) body:not(#sk-b) .product-price-and-shipping,
html:not(#sk-a) body:not(#sk-b) .pl_price_default,
html:not(#sk-a) body:not(#sk-b) .pl_price_default span,
html:not(#sk-a) body:not(#sk-b) span.price { color: var(--sk-ink) !important; }
html:not(#sk-a) body:not(#sk-b) .regular-price,
html:not(#sk-a) body:not(#sk-b) .pl_price_default .regular-price { color: var(--sk-sub) !important; }

/* odkazy a nadpisy v modulech na homepage */
html:not(#sk-a) body:not(#sk-b) .all-product-link,
html:not(#sk-a) body:not(#sk-b) #angarcatproduct a,
html:not(#sk-a) body:not(#sk-b) #angarcatproduct span { color: var(--sk-ink) !important; }

/* dostupnost na detailu produktu — stejné tři stavy jako na kartě */
html:not(#sk-a) body:not(#sk-b) #product-availability { color: var(--sk-ok) !important; }
html:not(#sk-a) body:not(#sk-b) #product-availability i.product-available { color: var(--sk-ok) !important; }
html:not(#sk-a) body:not(#sk-b) #product-availability i.product-last-items { color: var(--sk-warn) !important; }
html:not(#sk-a) body:not(#sk-b) #product-availability i.product-unavailable { color: var(--sk-sale) !important; }

/* tlačítko u výsledků hledání */
html:not(#sk-a) body:not(#sk-b) #search_filters button,
html:not(#sk-a) body:not(#sk-b) .search-widget button,
html:not(#sk-a) body:not(#sk-b) button.search-button {
  background-color: var(--sk-ink) !important;
  border-color: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
}

/* patička a upozornění v košíku */
html:not(#sk-a) body:not(#sk-b) .bottom-footer,
html:not(#sk-a) body:not(#sk-b) .bottom-footer a,
html:not(#sk-a) body:not(#sk-b) .bottom-footer span { color: var(--sk-sub) !important; }
html:not(#sk-a) body:not(#sk-b) #cart .alert span,
html:not(#sk-a) body:not(#sk-b) #cart .alert strong { color: var(--sk-ink) !important; }

/* časová osa na stránce O nás */
html:not(#sk-a) body:not(#sk-b) .timeline-badge {
  background-color: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
}
html:not(#sk-a) body:not(#sk-b) .timeline span,
html:not(#sk-a) body:not(#sk-b) .timeline-panel span { color: var(--sk-ink) !important; }

/* =============================================================================
   16. OPRAVY Z REVIZE (2026-09-12)

   Nálezy z adversariální kontroly motivu. Seřazeno podle dopadu.
   ========================================================================== */

/* --- 16.1 Množstevní ovladač v košíku — NEJVYŠŠÍ RIZIKO ---------------------
   Globální pravidlo §2 dává každému `.btn` výšku 44 px a boční odsazení 20 px.
   Bootstrap-touchspin ale generuje v košíku dvě šipky nad sebou jako
   `button.btn.bootstrap-touchspin-up` / `-down`. S 44 px na kus vyroste
   ovladač na ~88 px vedle 44px pole a řádek košíku se rozsype.
   Starý list je stylizuje jen pro `body#product`, v košíku tedy nikdo.
   Tyhle šipky nejsou tlačítka v našem smyslu — vyjímáme je.
   ------------------------------------------------------------------------- */
/* Pozor na míru. Dvě slepé uličky, ať se neopakují:
   1) `height:auto; padding:0` — šipky spadly na 2 × 2 px, neklikatelné.
   2) vlastní rozměry 26 × 20 px + `display:flex` — šipky vypadly z rozvržení,
      které téma staví na tabulce, a ovladač vyrostl ze 40 na 80 px.
   Řešení není vymýšlet vlastní geometrii, ale vrátit tu, kterou téma už má.
   Z `themes/AngarTheme/assets/css/theme.css`:
       .input-group-btn-vertical      { display:table-cell; vertical-align:middle }
       .input-group-btn-vertical>.btn { display:block; float:none; width:100%;
                                        max-width:100%; padding:8px 10px;
                                        margin-left:-1px; position:relative }
       .bootstrap-touchspin-down      { margin-top:-2px }
       .input-group-btn-vertical i    { position:absolute }
   Níž se ty hodnoty jen obnovují proti globálnímu `.btn` pravidlu z §2
   (44px výška, boční odsazení 20 px, poloměr, stín) a dobarvují do krémové.
   Rozměry se NEVYMÝŠLEJÍ — šipka je vysoká 8 + 8 px odsazení + rámeček,
   dvě nad sebou sednou na výšku pole. */
html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin .input-group-btn-vertical {
  display: table-cell !important;
  vertical-align: middle !important;
  position: relative !important;
  white-space: nowrap !important;
  float: none !important;
  width: 1% !important;
}
html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin .btn,
html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin button,
html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin-up,
html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin-down,
html:not(#sk-a) body:not(#sk-b) .btn-touchspin,
html:not(#sk-a) body:not(#sk-b) .qty_btn {
  display: block !important;
  position: relative !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  margin: 0 0 0 -1px !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--sk-sunken) !important;
  border: 1px solid var(--sk-line2) !important;
  color: var(--sk-ink) !important;
  font-size: 12px !important;
}
html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
  margin-top: -2px !important;
}
html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin .btn i,
html:not(#sk-a) body:not(#sk-b) .btn-touchspin i,
html:not(#sk-a) body:not(#sk-b) .qty_btn i {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  font-weight: 400 !important;
  color: var(--sk-ink) !important;
}
html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin { overflow: visible !important; }

/* Na telefonu dostane pole `width:100%`, takže se buňka se šipkami zalomí pod
   něj a ovladač je 74 px vysoký místo 40. Držíme ho na jedné řádce: skupina
   se chová jako tabulka a pole si nebere celou šířku. Měřeno na živém košíku
   2026-09-12: 1440 px 72 × 40, 390 px bez tohohle pravidla 72 × 74. */
@media (max-width: 575px) {
  html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin {
    display: table !important;
    width: auto !important;
  }
  html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin input.form-control,
  html:not(#sk-a) body:not(#sk-b) input#quantity_wanted {
    display: table-cell !important;
    width: 48px !important;
    float: none !important;
  }
}

html:not(#sk-a) body:not(#sk-b) .bootstrap-touchspin input.form-control,
html:not(#sk-a) body:not(#sk-b) input#quantity_wanted {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 8px !important;
  text-align: center !important;
}

/* --- 16.2 Chybové stavy formulářů -------------------------------------------
   §2 vnucuje všem polím `border: 1px solid var(--sk-line2) !important`, čímž
   by přebilo červený rámeček u neplatného pole, pokud ho téma nedeklaruje
   s `!important`. V pokladně a registraci by pak zůstal jen text chyby.
   Doplňujeme vlastní chybový stav, silnější než obecné pravidlo.
   ------------------------------------------------------------------------- */
html:not(#sk-a) body:not(#sk-b) .has-error .form-control,
html:not(#sk-a) body:not(#sk-b) .has-danger .form-control,
html:not(#sk-a) body:not(#sk-b) .form-control.is-invalid,
html:not(#sk-a) body:not(#sk-b) .form-control:invalid:not(:placeholder-shown),
html:not(#sk-a) body:not(#sk-b) input.is-invalid,
html:not(#sk-a) body:not(#sk-b) select.is-invalid {
  border: 2px solid var(--sk-sale) !important;
  background: #fff6f4 !important;
}
html:not(#sk-a) body:not(#sk-b) .help-block li,
html:not(#sk-a) body:not(#sk-b) .form-control-comment.text-danger,
html:not(#sk-a) body:not(#sk-b) .invalid-feedback,
html:not(#sk-a) body:not(#sk-b) .alert-danger {
  color: var(--sk-sale) !important;
}

/* --- 16.3 Zelená pilulka „★ BESTSELLER" -------------------------------------
   Starý list ji vykresluje přes `#angarbest … .product-description::before`.
   Nový motiv rušil jen `::after`, takže na krémové kartě zůstávala jediná
   zelená skvrna a rozbíjela cíl „jedna karta všude". Odznak necháváme, jen
   v paletě.
   ------------------------------------------------------------------------- */
html:not(#sk-a) body:not(#sk-b) #angarbest .product-miniature .product-description::before {
  background: var(--sk-sunken) !important;
  color: var(--sk-ink) !important;
  border-radius: var(--sk-r-pill) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* --- 16.4 Spodní navigační pruh na telefonu ---------------------------------
   `#mobile-bottom-nav` ze starého listu je bílý a leží na krémové stránce na
   každé stránce. Do palety.
   ------------------------------------------------------------------------- */
html:not(#sk-a) body:not(#sk-b) #mobile-bottom-nav {
  background: var(--sk-raised) !important;
  border-top: 1px solid var(--sk-line) !important;
}
html:not(#sk-a) body:not(#sk-b) #mobile-bottom-nav a,
html:not(#sk-a) body:not(#sk-b) #mobile-bottom-nav span,
html:not(#sk-a) body:not(#sk-b) #mobile-bottom-nav i { color: var(--sk-ink) !important; }

/* --- 16.5 Zbylé zelené odkazy v modulech na homepage ------------------------ */
html:not(#sk-a) body:not(#sk-b) #angarcatproduct a,
html:not(#sk-a) body:not(#sk-b) #angarcatproduct a span,
html:not(#sk-a) body:not(#sk-b) .angarcatproduct a,
html:not(#sk-a) body:not(#sk-b) .cat-title a,
html:not(#sk-a) body:not(#sk-b) .subcategory-name { color: var(--sk-ink) !important; }


/* =============================================================================
   17. ČITELNOST — NÁLEZY ZÁVĚREČNÉHO PRŮCHODU (2026-09-12)

   Projeté typy stránek: detail produktu, košík, pokladna, CMS, kontakt,
   výsledky hledání; 390 a 1440 px. Vodorovné přetečení nikde. Všechno níž
   je text, který po přebarvení na krémovou paletu zůstal v barvě, se kterou
   se nedá číst. Kontrast je u každé opravy dopočítaný.
   ========================================================================== */

/* --- 17.1 Patička — NEJVĚTŠÍ DOPAD, je na každé stránce -------------------
   Původní patička byla tmavozelená a měla bílé nadpisy. Pozadí jsem v §11
   přebarvil na `--sk-sunken`, ale bílý text tam zůstal: naměřeno
   `rgb(255,255,255)` na `rgb(234,226,208)`, tedy kontrast 1.29:1. Prakticky
   neviditelné. Kontakt v patičce byl na 1.21:1.

   Dvě příčiny, obě moje:
     1. pravidla v §11 jsou psaná jen na `#footer`, ale živé značkování je
        `div.footer-container` — nadpis `.h3` tam žádné moje pravidlo nechytlo;
     2. §11 nemá prefix specificity, takže i to, co selektorem sedělo,
        prohrálo se starým listem.
   Proto se to opravuje tady, s prefixem, a na obě větve značkování.
   Po opravě: nadpisy 13.88:1, text 10.71:1, odkazy 5.81:1. */
html:not(#sk-a) body:not(#sk-b) .footer-container .h3,
html:not(#sk-a) body:not(#sk-b) .footer-container .h3 span,
html:not(#sk-a) body:not(#sk-b) .footer-container .h3 a,
html:not(#sk-a) body:not(#sk-b) .footer-container .myaccount-title,
html:not(#sk-a) body:not(#sk-b) .footer-container .myaccount-title a,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-title,
html:not(#sk-a) body:not(#sk-b) #block-newsletter-label,
html:not(#sk-a) body:not(#sk-b) #block-social-label,
html:not(#sk-a) body:not(#sk-b) #footer .h3,
html:not(#sk-a) body:not(#sk-b) #footer .h3 span,
html:not(#sk-a) body:not(#sk-b) #footer .h3 a {
  color: var(--sk-ink) !important;
}
/* POZOR: tyhle selektory NESMÍ znít `.footer-container span` ani
   `.footer-container p`. Uvnitř `.footer-container` totiž visí i cookie
   lišta `#cookie-banner`, která má vlastní TMAVÉ pozadí. První verze tohohle
   pravidla ji přebarvila na `--sk-body` a text na liště spadl na 1.3:1,
   odkazy na 2.39:1 — tedy regrese na každé stránce, horší než nález, který
   jsem opravoval. Proto se cílí jmenovitě na bloky patičky. */
html:not(#sk-a) body:not(#sk-b) .footer-container .links li,
html:not(#sk-a) body:not(#sk-b) .footer-container .links span,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-contact li,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-contact span,
html:not(#sk-a) body:not(#sk-b) .footer-container .block_newsletter p,
html:not(#sk-a) body:not(#sk-b) .footer-container .block_newsletter span,
html:not(#sk-a) body:not(#sk-b) #footer_contact li,
html:not(#sk-a) body:not(#sk-b) #footer_contact li span {
  color: var(--sk-body) !important;
}
html:not(#sk-a) body:not(#sk-b) .footer-container .links a,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-contact a,
html:not(#sk-a) body:not(#sk-b) .footer-container .block_newsletter a,
html:not(#sk-a) body:not(#sk-b) #footer_contact a { color: var(--sk-sub) !important; }
html:not(#sk-a) body:not(#sk-b) .footer-container .links a:hover,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-contact a:hover,
html:not(#sk-a) body:not(#sk-b) #footer_contact a:hover { color: var(--sk-ink) !important; }

/* Pojistka pro cookie lištu. `#cookie-banner` je ID, takže tohle přebije
   jakékoliv budoucí pravidlo psané na třídy patičky — i kdyby někdo tu chybu
   výš zopakoval. Lišta má tmavé pozadí, text tedy světlý: 16.34:1,
   odkazy 10.59:1. */
html:not(#sk-a) body:not(#sk-b) #cookie-banner,
html:not(#sk-a) body:not(#sk-b) #cookie-banner p,
html:not(#sk-a) body:not(#sk-b) #cookie-banner span,
html:not(#sk-a) body:not(#sk-b) #cookie-banner li { color: var(--sk-oncta) !important; }
html:not(#sk-a) body:not(#sk-b) #cookie-banner a { color: var(--sk-tag) !important; text-decoration: underline !important; }

/* --- 17.2 Zbytky původní zelené ------------------------------------------
   `rgb(46,125,50)` je zelená starého motivu. Přežila na dvou místech, obě
   mimo homepage, takže je dřívější kontrola nenašla:
     - nadpis „BESTSELERY" v `#angarbest` (vidět na detailu a ve výsledcích
       hledání, na homepage je `#left-column` sbalený) — 4.42:1
     - číslo aktivní stránky ve stránkování, zelená na inkoustu — 3.49:1 */
html:not(#sk-a) body:not(#sk-b) #angarbest .products-section-title,
html:not(#sk-a) body:not(#sk-b) #angarbest .products-section-title a,
html:not(#sk-a) body:not(#sk-b) #left-column .products-section-title,
html:not(#sk-a) body:not(#sk-b) #left-column .products-section-title a { color: var(--sk-ink) !important; }
html:not(#sk-a) body:not(#sk-b) .page-list li.current a,
html:not(#sk-a) body:not(#sk-b) .page-list li.current span { color: var(--sk-oncta) !important; }

/* --- 17.3 Cena v košíku ---------------------------------------------------
   `span.price_red` svítí čistě červenou `rgb(255,0,0)` — 3.45:1 na krémové.
   Sleva má všude jinde `--sk-sale`, tady taky. Po opravě 6.77:1 na bílé. */
html:not(#sk-a) body:not(#sk-b) .price_red,
html:not(#sk-a) body:not(#sk-b) #cart .product-discount .price_red { color: var(--sk-sale) !important; }

/* --- 17.4 Tlumené popisky ------------------------------------------------
   Šedá `rgb(122,122,122)` je pod hranicí čitelnosti všude, kde leží na
   krémové (3.7:1). Jde o „nepovinné" u polí, `text-muted` v pokladně, název
   souboru u vlastního potisku a ikony. `--sk-sub` dává 6.46:1 na krémové
   a 7.49:1 na bílé, a je to barva, kterou pro tlumený text používá zbytek
   motivu. */
html:not(#sk-a) body:not(#sk-b) .form-control-comment,
html:not(#sk-a) body:not(#sk-b) .text-muted,
html:not(#sk-a) body:not(#sk-b) .js-file-name,
html:not(#sk-a) body:not(#sk-b) li.product-customization-item small,
html:not(#sk-a) body:not(#sk-b) .contact-rich .icon i.material-icons,
html:not(#sk-a) body:not(#sk-b) .product-cover .layer i.material-icons { color: var(--sk-sub) !important; }

/* Tlačítko „Ukázat" u hesla mělo šedé pozadí s bílým textem (4.29:1).
   POZOR: cílí se `.input-group-btn`, NE `.input-group-btn-vertical` — ten
   druhý patří množstevnímu ovladači v košíku a ten se řeší v §16.1.
   Jsou to dvě různé třídy, tohle pravidlo na šipky nesáhne. */
html:not(#sk-a) body:not(#sk-b) .js-parent-focus .input-group-btn .btn,
html:not(#sk-a) body:not(#sk-b) .js-parent-focus .input-group-btn button {
  background: var(--sk-ink) !important;
  border-color: var(--sk-ink) !important;
  color: var(--sk-oncta) !important;
}

/* Křížek v modálních oknech byl šedý na bílé. */
html:not(#sk-a) body:not(#sk-b) .modal-header button.close,
html:not(#sk-a) body:not(#sk-b) .modal-header button.close span { color: var(--sk-ink) !important; opacity: 1 !important; }

/* Silný text v košíkových kartách svítil jedovatě zelenou `rgb(1,200,16)`
   při 2.27:1. Je to text modulu, ne náš, ale číst se má. */
/* Původně tu stálo `body:not(#sk-b) #cart .card-block strong`, což nemohlo
   nikdy platit: `#cart` je id SAMOTNÉHO body, ne jeho potomka. Cílí se proto
   na blok modulu. Po opravě 17.9:1. */
html:not(#sk-a) body:not(#sk-b) .pscartbanner strong,
html:not(#sk-a) body:not(#sk-b) .pscartbanner .card-block strong,
html:not(#sk-a) body:not(#sk-b) .pscartbanner .card-block p span strong { color: var(--sk-ink) !important; }

/* --- 17.5 Patička: rámečky z původního motivu ----------------------------
   Vidět až na snímku, měření barev textu je nenašlo, protože jde o rámečky.
   Nadpisy v patičce mají `border-bottom: 2px solid rgb(27,122,61)` — zelená
   starého motivu — a vedle toho `1px solid rgba(255,255,255,0.16)`, což je
   bílá linka dělaná pro původní TMAVOU patičku a na krémové je neviditelná.
   Na telefonu se z nadpisů stávají rozklikávací pruhy s rámečkem dokola,
   takže ta zelená je tam vidět ještě víc. */
html:not(#sk-a) body:not(#sk-b) .footer-container .h3,
html:not(#sk-a) body:not(#sk-b) .footer-container .myaccount-title,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-title,
html:not(#sk-a) body:not(#sk-b) #footer .h3,
html:not(#sk-a) body:not(#sk-b) #footer .myaccount-title,
/* Zelenou `rgb(27,122,61)` nekreslí `.h3`, ale jeho POTOMEK — `span`
   u „Produkty" a „Naše společnost", `a.text-uppercase` u „Váš účet"
   a „Kontakt". Měření na `.h3` proto hlásilo správnou barvu, zatímco
   na snímku byla linka pořád zelená. Tohle je důvod, proč se kontrolují
   i obrázky, ne jen dopočítané hodnoty. */
html:not(#sk-a) body:not(#sk-b) .footer-container .h3 span,
html:not(#sk-a) body:not(#sk-b) .footer-container .h3 a,
html:not(#sk-a) body:not(#sk-b) .footer-container .myaccount-title a,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-contact-title a,
html:not(#sk-a) body:not(#sk-b) #footer .h3 span,
html:not(#sk-a) body:not(#sk-b) #footer .h3 a,
/* Na telefonu se patička skládá do rozklikávacích pruhů, a ty NEJSOU `.h3`.
   `.h3` má třídu `hidden-sm-down`, tedy jen desktop; mobilní pruh je
   `div.title.hidden-md-up`. Proto na něm zelený rámeček přežil i potom,
   co byl desktop čistý. */
html:not(#sk-a) body:not(#sk-b) .footer-container .title,
html:not(#sk-a) body:not(#sk-b) .footer-container .title a,
html:not(#sk-a) body:not(#sk-b) .footer-container .title span,
html:not(#sk-a) body:not(#sk-b) #footer .title {
  border-color: var(--sk-line2) !important;
}
/* předěl nad odběrem novinek byl `rgba(15,79,37,0.1)`, taky zelený */
html:not(#sk-a) body:not(#sk-b) .footer-container .social_footer,
html:not(#sk-a) body:not(#sk-b) #footer .social_footer { border-top-color: var(--sk-line) !important; }

/* Kroužky u Facebooku a Instagramu měly zelený prstenec `rgba(15,79,37,0.2)`
   a zelenou ikonu. Značkové barvy to nejsou — je to zelená starého motivu. */
html:not(#sk-a) body:not(#sk-b) .block-social li,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-social li { border-color: var(--sk-line2) !important; }
html:not(#sk-a) body:not(#sk-b) .block-social li a,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-social li a,
html:not(#sk-a) body:not(#sk-b) .block-social li a::before,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-social li a::before { color: var(--sk-sub) !important; }
html:not(#sk-a) body:not(#sk-b) .block-social li:hover,
html:not(#sk-a) body:not(#sk-b) .footer-container .block-social li:hover { border-color: var(--sk-ink) !important; }
html:not(#sk-a) body:not(#sk-b) .block-social li:hover a { color: var(--sk-ink) !important; }
@media (max-width: 767px) {
  html:not(#sk-a) body:not(#sk-b) .footer-container .h3,
  html:not(#sk-a) body:not(#sk-b) .footer-container .myaccount-title,
  html:not(#sk-a) body:not(#sk-b) .footer-container .title,
  html:not(#sk-a) body:not(#sk-b) #footer .h3,
  html:not(#sk-a) body:not(#sk-b) #footer .title {
    background: var(--sk-raised) !important;
    border-radius: var(--sk-r) !important;
  }
}

/* --- 17.6 Cookie lišta: hlavní tlačítko nebylo vidět ---------------------
   „Akceptovat" je `<button>`, takže mu globální pravidlo z §2 dalo inkoustové
   pozadí. Jenže lišta má pozadí taky inkoustové, takže tlačítko splynulo
   a vypadalo jako holý text — zatímco vedlejší „Exit" (odhlašovací odkaz)
   rámeček má. Hlavní akce tím vypadala jako ta vedlejší.
   Na tmavé liště tedy světlé tlačítko: `--sk-tag` s inkoustovým textem,
   kontrast 10.59:1. */
/* Specificita: dřívější pravidlo na tohle tlačítko znělo
   `… #cookie-accept.button`, tedy (3 ID, 1 třída, 2 prvky). Selektor jen
   s prvkem `button` je (3,0,3) a prohrál by — třída váží víc než počet prvků.
   Proto se tu třída opakuje a přidává se ID lišty: (4,1,2). */
html:not(#sk-a) body:not(#sk-b) #cookie-banner #cookie-accept.button,
html:not(#sk-a) body:not(#sk-b) #cookie-banner button.button,
html:not(#sk-a) body:not(#sk-b) #cookie-banner button,
html:not(#sk-a) body:not(#sk-b) #cookie-banner .btn {
  background: var(--sk-tag) !important;
  border-color: var(--sk-tag) !important;
  color: var(--sk-ink) !important;
  font-weight: 700 !important;
}
html:not(#sk-a) body:not(#sk-b) #cookie-banner #cookie-accept.button:hover,
html:not(#sk-a) body:not(#sk-b) #cookie-banner button.button:hover,
html:not(#sk-a) body:not(#sk-b) #cookie-banner button:hover,
html:not(#sk-a) body:not(#sk-b) #cookie-banner .btn:hover {
  background: var(--sk-oncta) !important;
  border-color: var(--sk-oncta) !important;
  color: var(--sk-ink) !important;
}