/* ==========================================================================
   toy-store.cz — vzhled e-shopu v šabloně cassiopeia_ts (5. 10. 2026)

   Dvě části:
   1. PŘEDĚLÁVKA Z T4 — bloky z template/css/v2.css (produkce, T4 t4_bs5_blank)
      převedené skriptem: vypuštěna pravidla pro hlavičku, zápatí, masthead
      a vysouvací menu T4, prefix #t4-main-body odstraněn, tmavé přepínače tokenů
      zrušené. Třídy .ts-* vykreslují overridy v html/com_virtuemart/.
   2. CHROM CASSIOPEIE — hlavička, pás menu, zápatí a přepínač měny pro
      paletu A „Pastelka“ (krém #FFFBF4, bílá hlavička, žlutý pás #FFE27A,
      text a zápatí #2A2440, tlačítko #E0322F). Načítá se za user.css.
   ========================================================================== */

/* ============================================================
   ZÁKLAD v2 — barvy, písmo, mobil (2. 9. 2026)
   Krok 1 předělávky vzhledu. Rozcestník: docs/vzhled/README.md
   Návrh: https://claude.ai/code/artifact/4ce61b81-9ad2-43dc-91ec-a664f7ce63d7
   Nasazuje se jako 00-hlavicka.css + custom.css.server + v2.css.
   Nic nad tímto blokem se needituje.
   ============================================================ */

:root {
  /* Paleta A „Pastelka“ (5. 10. 2026). Názvy tokenů zůstaly z předělávky v T4, hodnoty jsou světlé. */
  --ts-cerven: #E0322F;        /* barva akce — o odstín tmavší než logo #FF4141, s bílým textem 4,5 : 1 */
  --ts-cerven-tma: #C42A27;
  --ts-cerven-svit: #FFE4DE;
  --ts-inkoust: #2A2440;
  --ts-seda: #6B6580;
  --ts-jamka: #F7F3EE;         /* podklad pod fotkou produktu (fotky mají multiply, proto světlý) */
  --ts-plocha: #fff;           /* povrch panelů a čipů */
  --ts-karta: #fff;            /* povrch karty produktu */
  --ts-karta-ram: var(--ts-ram);
  --ts-cerven-tlum: #E0322F;   /* tlačítko na kartě — na světlém už není důvod tlumit */
  --ts-losos: #E8562F;         /* akcent velkých nadpisů (3,6 : 1 — jen velké písmo) */
  --ts-losos-text: #C7471F;    /* tentýž akcent pro malý text (4,8 : 1) */
  --ts-ram: #EFE6DA;
  --ts-zelena: #1E7D4A;        /* skladem — #2E9C63 na krému neprošlo 4,5 : 1 */
  --ts-d: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --ts-b: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* bývalé tmavé tokeny titulky (T4) — teď světlé, ať titulka drží paletu bez přepisu pravidel */
  --ts-tma: #fff;
  --ts-tma-hloub: #FFFBF4;
  --ts-tma-text: #2A2440;
  --ts-tma-seda: #6B6580;
  --ts-tma-ram: #EFE6DA;
  --ts-tma-svit: #FFF0C7;
  --ts-tma-karta: #fff;
  --ts-tma-karta-ram: #EFE6DA;
  /* pastely dlaždic a čipů: [plocha, text] */
  --ts-p-jantar: #FFE9A8; --ts-p-jantar-t: #5A4300;
  --ts-p-mata: #CFF2E2;   --ts-p-mata-t: #0F4A33;
  --ts-p-losos: #FFD8CC;  --ts-p-losos-t: #5A1E10;
  --ts-p-nebe: #D3ECFF;   --ts-p-nebe-t: #0E3A5E;
  --ts-p-levand: #E6DDFF; --ts-p-levand-t: #34206B;
}

/* ---------- typografie ---------- */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-family: var(--ts-d);
  font-weight: 700;
  line-height: 1.2;          /* Baloo 2 má výchozí proklad hodně velký */
  text-wrap: balance;
}

h1,
.h1 { color: var(--ts-inkoust); letter-spacing: -.01em; }

h2,
.h2 { color: var(--ts-inkoust); text-transform: none; }

/* Nadpis kategorie — dřív pastelová oranžová #f7a75e, což není barva značky */

.com_virtuemart .category-view h1,
.com_virtuemart .productdetails-view h1 { color: var(--ts-inkoust); }

/* ---------- karta produktu ve výpisu ---------- */

/* Řádky výpisu roztáhnout na stejnou výšku (dosud se lišily o ~20 px) */

.browse-view .row .product,
.related-products-view .row .product { display: flex; }

.browse-view .row .product > .spacer.product-container,
.related-products-view .row .product > .spacer.product-container { width: 100%; }

/* Jamka pod fotkou — sjednotí karty bez ohledu na poměr stran fotky */

.browse-view .row .product .vm-product-media-container,
.related-products-view .row .product .vm-product-media-container {
  background: var(--ts-jamka);
  border-radius: 12px;
  padding: 10px;
}

/* Název: konec verzálek. Data z importu jsou psaná normálně, verzálky dělal styl. */

.com_virtuemart .vm-product-descr-container-0 > h2,
.com_virtuemart .vm-product-descr-container-1 > h2 {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  color: var(--ts-inkoust);
  margin: 10px 0 6px;
  min-height: 2.7em;
}

.com_virtuemart .vm-product-descr-container-0 > h2 > a,
.com_virtuemart .vm-product-descr-container-1 > h2 > a {
  color: inherit;
  text-transform: none;
  text-decoration: none;
}

/* Cena — písmem nadpisů, aby byla na kartě to první, co padne do oka */

.browse-view .product-price .PricesalesPrice,
.related-products-view .product-price .PricesalesPrice,
.featured-view .product-price .PricesalesPrice,
.latest-view .product-price .PricesalesPrice {
  font-family: var(--ts-d);
  font-size: 19px;
  font-weight: 600;
  color: var(--ts-inkoust) !important;
  font-variant-numeric: tabular-nums;
}

/* Šablona T4 skrývá tlačítko na kartě globálně
   (`css/extras/com_virtuemart.css`: `.com_virtuemart .vm-details-button{display:none}`),
   takže karta ve výpisu neměla žádnou výzvu k akci. Vracíme ho jen do výpisů. */

.com_virtuemart .browse-view .vm-details-button,
.com_virtuemart .related-products-view .vm-details-button { display: block; }

/* „Detail zboží“ jako plnohodnotné tlačítko, 44 px na dotek */

.browse-view .vm-details-button .product-details,
.related-products-view .vm-details-button .product-details {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ts-cerven);
  color: #fff;
  font-family: var(--ts-d);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.browse-view .vm-details-button .product-details:hover,
.browse-view .vm-details-button .product-details:focus-visible {
  background: var(--ts-cerven-tma);
  color: #fff;
}

/* ---------- skladem ---------- */

.availability { color: var(--ts-zelena); }

/* ---------- klikací plochy 44 px ---------- */

.com_virtuemart .vm-pagination ul li .pagenav {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 8px;
}

.com_virtuemart .vm-pagination li:not(.pagination-start):not(.pagination-prev):not(.pagination-next):not(.pagination-end) > span.pagenav {
  background: var(--ts-cerven);
  color: #fff;
}

/* Přepínač bočního menu byl 19 × 22 px. Pravidlo patří výhradně pod `lg` —
   `display: inline-flex !important` mimo media query přebilo `.d-lg-none`
   a hamburger se objevil i na desktopu vedle košíku. */

.dropdownCart-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- formulářové prvky ---------- */

.com_virtuemart select,
.com_virtuemart input[type="text"],
.com_virtuemart input[type="search"] {
  min-height: 44px;
}

/* Pod 16 px iOS Safari při zaostření zvětší celou stránku. */

@media (max-width: 991.98px) {
  input,
  select,
  textarea,
  .chosen-container,
  .chosen-container .chosen-single { font-size: 16px !important; }
}

/* ---------- mobil ---------- */

@media (max-width: 767.98px) {
  .com_virtuemart .category-view h1 { font-size: 28px; }

  /* Řadicí lišta zabírala tři řádky rozbalovačů nad polovinou obrazovky */

  .com_virtuemart .orderby-displaynumber { margin-bottom: 1.25rem; }

  .com_virtuemart div[class*="-view"] .row { margin-top: 1rem; }

  /* Horní stránkování je na telefonu jen překážka mezi hlavičkou a zbožím */

  .com_virtuemart .vm-pagination-top { display: none; }

  .com_virtuemart .vm-product-descr-container-0 > h2 { font-size: 13px; }

  .browse-view .vm-details-button .product-details { font-size: 14px; padding: 10px 12px; }
}

/* ============================================================
   VÝPIS KATEGORIE v2 — krok 2 (2. 9. 2026)
   Patří k overridům `html/com_virtuemart/category/default.php`,
   `sublayouts/products.php` a `sublayouts/categories.php`.
   ============================================================ */

/* ---------- drobečky ---------- */

.ts-drobky {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ts-seda);
  margin-bottom: 10px;
}

.ts-drobky a { color: var(--ts-seda); text-decoration: none; }

.ts-drobky a:hover { color: var(--ts-cerven); text-decoration: underline; }

.ts-drobky b { color: var(--ts-inkoust); font-weight: 600; }

/* ---------- nadpis a popis ---------- */

.com_virtuemart .category-view > h1 { margin: 0 0 6px; }

.com_virtuemart .category-view > .category_description {
  color: var(--ts-seda);
  max-width: 66ch;
  margin-bottom: 4px;
}

.com_virtuemart .category-view > .category_description:empty { display: none; }

/* ---------- podkategorie ---------- */

.ts-podkategorie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
}

.ts-cip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--ts-ram);
  border-radius: 999px;
  background: var(--ts-plocha);
  color: var(--ts-inkoust);
  font-size: 13.5px;
  text-decoration: none;
  line-height: 1.2;
}

.ts-cip:hover,
.ts-cip:focus-visible {
  border-color: var(--ts-cerven);
  color: var(--ts-cerven);
}

.ts-cip u {
  text-decoration: none;
  color: var(--ts-seda);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------- řadicí lišta ---------- */

.com_virtuemart .orderby-displaynumber {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 1.5rem;
}

#com_virtuemart .vm-order-list,
.comvirtuemartmod .vm-order-list {
  border: 0;
  padding: 0;
  margin-top: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.com_virtuemart .orderlistcontainer { position: relative; }

/* Řazení jako čipy (override sublayoutu `orderby`). Rozbalovač na najetí myší
   je pryč — všechny volby jsou vidět rovnou a fungují na dotek. */

.ts-radit { flex: 1; }

.ts-radit-cipy { display: flex; flex-wrap: wrap; gap: 8px; }

.ts-radit-cip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--ts-ram);
  border-radius: 999px;
  background: var(--ts-plocha);
  color: var(--ts-inkoust);
  font-size: 13.5px;
  text-decoration: none;
  line-height: 1.2;
}

.ts-radit-cip:hover,
.ts-radit-cip:focus-visible { border-color: var(--ts-cerven); color: var(--ts-cerven); }

.ts-radit-cip.je-aktivni {
  background: var(--ts-inkoust);
  border-color: var(--ts-inkoust);
  color: var(--ts-plocha);
}

.ts-pocet { font-variant-numeric: tabular-nums; }

/* Cena a sklad na jednom řádku */

.ts-cena-radek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ts-cena-radek .ts-sklad { margin-bottom: 0; }

.ts-cena-radek .product-price { text-align: left; }

.com_virtuemart .orderlistcontainer .title {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ts-seda);
  margin-bottom: 4px;
}

.com_virtuemart .orderlistcontainer .activeOrder,
.com_virtuemart .orderlistcontainer .activeOrder a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ts-inkoust);
  color: var(--ts-plocha);
  font-size: 13.5px;
  text-decoration: none;
}

/* Druhý rozbalovač je výrobce — filtr, který nikdo nezvolil. Tmavý čip by
   vypadal jako aktivní volba, takže zůstává obrysový. */

.com_virtuemart .orderlistcontainer + .orderlistcontainer .activeOrder,
.com_virtuemart .orderlistcontainer + .orderlistcontainer .activeOrder a {
  background: var(--ts-plocha);
  border: 1px solid var(--ts-ram);
  color: var(--ts-inkoust);
}

.com_virtuemart .orderlistcontainer .orderlist {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--ts-plocha);
  border: 1px solid var(--ts-ram);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px -12px rgba(38, 35, 43, .3);
}

.com_virtuemart .orderlistcontainer .orderlist a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ts-inkoust);
  text-decoration: none;
  background: transparent;
  margin: 0;
}

.com_virtuemart .orderlistcontainer .orderlist a:hover { background: var(--ts-cerven-svit); color: var(--ts-cerven-tma); }

.com_virtuemart .display-number {
  text-align: right;
  font-size: 13px;
  color: var(--ts-seda);
  font-variant-numeric: tabular-nums;
}

/* ---------- karta ---------- */

.ts-karta { gap: 0; }

.ts-karta .vm-product-media-container { position: relative; }

.ts-stitek {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}

.ts-stitek-novinka { background: #178047; }   /* jako produkce: Novinka zelená, Náš tip fialový */

.ts-stitek-tip { background: #7A4DE8; }

.ts-meta {
  display: block;
  font-size: 11px;
  color: var(--ts-seda);
  letter-spacing: .03em;
  margin-top: 10px;
}

/* Vzduch nad a pod názvem produktu na kartě (4. 9. 2026, dřív 4 px / 6 px) */

.com_virtuemart .ts-karta .vm-product-descr-container-0 > h2,
.com_virtuemart .ts-karta .vm-product-descr-container-1 > h2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.ts-sklad {
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.ts-sklad::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ts-sklad-ano { color: var(--ts-zelena); }

.ts-sklad-ne { color: var(--ts-seda); }

/* ---------- do košíku na kartě ---------- */

.ts-akce { margin-top: auto; }

.ts-akce .addtocart-area,
.ts-akce form.product,
.ts-akce .addtocart-bar { margin: 0; padding: 0; }

.ts-akce .vm-customfields-wraps:empty { display: none; }

/* Množství se na kartě nenastavuje — pole zůstává v DOM, aby se odeslalo `quantity[]=1` */

.ts-akce span.quantity-controls { display: block; }

.ts-akce input.quantity-controls,
.ts-akce .quantity-box { display: none !important; }

.ts-akce .addtocart-button { display: block; width: 100%; }

/* Specificita schválně vysoká: `com_virtuemart.css` šablony má
   `.com_virtuemart span.addtocart-button input.addtocart-button` (0,3,2)
   a barví tlačítko tyrkysovou `--color-primary`. */

.com_virtuemart .ts-akce span.addtocart-button input.addtocart-button,
.com_virtuemart .ts-akce input.addtocart-button,
.com_virtuemart .ts-akce button.addtocart-button {
  width: 100% !important;
  min-height: 44px;
  padding: 10px 14px !important;
  border: 0;
  border-radius: 999px;
  background: var(--ts-cerven);
  color: #fff;
  font-family: var(--ts-d);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}

.com_virtuemart .ts-akce span.addtocart-button input.addtocart-button:hover,
.com_virtuemart .ts-akce input.addtocart-button:hover { background: var(--ts-cerven-tma); }

.ts-akce .notify {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
}

/* ---------- stránkování ---------- */

.com_virtuemart .vm-pagination-bottom { margin-top: 26px; }

.com_virtuemart .vm-pagination ul li .pagenav {
  background: var(--ts-plocha);
  border: 1px solid var(--ts-ram);
  color: var(--ts-inkoust);
}

.com_virtuemart .vm-pagination ul li a.pagenav:hover {
  border-color: var(--ts-cerven);
  color: var(--ts-cerven);
}

.com_virtuemart .vm-pagination li:not(.pagination-start):not(.pagination-prev):not(.pagination-next):not(.pagination-end) > span.pagenav {
  background: var(--ts-cerven);
  border-color: var(--ts-cerven);
  color: #fff;
}

.com_virtuemart .vm-pagination li.pagination-start > span.pagenav,
.com_virtuemart .vm-pagination li.pagination-prev > span.pagenav,
.com_virtuemart .vm-pagination li.pagination-next > span.pagenav,
.com_virtuemart .vm-pagination li.pagination-end > span.pagenav {
  color: var(--ts-seda);
  opacity: .55;
}

@media (max-width: 767.98px) {
  .com_virtuemart .orderby-displaynumber { margin: 12px 0 1rem; }

  .com_virtuemart .display-number { text-align: left; }

  .ts-podkategorie { margin: 12px 0 2px; }

  .ts-meta { font-size: 10.5px; }
}

/* ============================================================
   PODKLAD v2 — teplá plocha, bílé karty, konec mátové (2. 9. 2026)
   Plocha stránky byla `#F9FBFA` (nazelenalá bílá) a zápatí `#D9E9E8`
   (mátová) — obojí ze staré tyrkysové identity. `--color-primary`
   se schválně NEMĚNÍ: sáhla by na detail produktu, košík i OPC.
   ============================================================ */

:root {
  --ts-podklad: #FFFBF4;   /* krém palety A */
  --ts-podklad-tma: #2A2440;   /* zápatí */
}

body { background-color: var(--ts-podklad); }

/* Hlavička zůstává bílá — na teplé ploše se tím sama oddělí */

/* ---------- zápatí ---------- */

/* ---------- karta jako samostatný objekt ----------
   ⚠️ Na tmavém katalogu karta **nesmí** brát `--ts-plocha`. Panel `#211E26`
   má proti ploše `#1A171F` kontrast 1,09:1, což je pod prahem, kdy oko vidí
   hranu — mřížka karet splývala v jednu tmavou plochu. Karta proto sedí
   o stupeň výš na `--ts-karta` (`#302B38`, 1,30:1) a hranu dokresluje
   světlejší rámeček se stínem. Ostatní panely (nákupní rámeček, výhody,
   čipy, stránkování) zůstávají na `--ts-plocha`. */

.browse-view .row .product > .spacer.product-container,
.related-products-view .row .product > .spacer.product-container {
  background: var(--ts-karta);
  border: 1px solid var(--ts-karta-ram);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .9);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.browse-view .row .product > .spacer.product-container:hover,
.related-products-view .row .product > .spacer.product-container:hover {
  border-color: var(--ts-losos);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 1);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .browse-view .row .product > .spacer.product-container,
  .related-products-view .row .product > .spacer.product-container {
    transition: none;
  }

  .browse-view .row .product > .spacer.product-container:hover,
  .related-products-view .row .product > .spacer.product-container:hover {
    transform: none;
  }
}

/* ---------- zbytky mátové na katalogových stránkách ---------- */

.dropdownCart-container {
  background-color: #fff !important;
  border: 1px solid var(--ts-ram);
  border-radius: 14px;
}

.chosen-container .chosen-results li.highlighted {
  background-color: var(--ts-cerven-svit) !important;
  color: var(--ts-cerven-tma);
}

#com_virtuemart .vm-order-list a:hover,
#com_virtuemart .vm-order-list a.aktivni,
.comvirtuemartmod .vm-order-list a:hover,
.comvirtuemartmod .vm-order-list a.aktivni {
  background: var(--ts-cerven-svit);
  color: var(--ts-cerven-tma);
}

/* ============================================================
   VÝPIS KATEGORIE — doladění podle návrhu (3. 9. 2026)
   Krok 2 stál na overridech; tenhle blok dorovnává zbylé rozdíly
   proti návrhu: hustota mřížky, řadicí lišta a zarovnání ceny.
   Musí zůstat POSLEDNÍ blok výpisu — přebíjí PODKLAD i krok 2.
   ============================================================ */

/* ---------- hustota mřížky ----------
   Bootstrapí `col-lg-3` dával na 1140 px čtyři karty široké 260 px, takže
   fotka zabrala půl obrazovky a na první pohled bylo vidět osm produktů.
   Návrh počítá s kartou ~200 px (`minmax(178px,1fr)` na 1180 px). Mřížka se
   proto od 576 px skládá gridem; pod 576 px zůstávají bootstrapí sloupce,
   tedy dvě karty vedle sebe jako v návrhu na telefonu. */

@media (min-width: 576px) {
  .com_virtuemart .browse-view > .row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 0;
  }

  .com_virtuemart .browse-view > .row > .product {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0;
  }
}

/* ---------- řadicí lišta ----------
   Návrh má vlevo počet produktů, vpravo čipy řazení a žádné popisky:
   „Nejlevnější“ ani „Vyberte výrobce“ nadpis nepotřebují. */

.com_virtuemart .orderby-displaynumber { align-items: center; }

.com_virtuemart .orderby-displaynumber .display-number {
  order: -1;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}

.com_virtuemart .orderby-displaynumber .vm-order-list { margin-left: auto; }

.ts-radit { flex: none; }

.com_virtuemart .orderlistcontainer .title { display: none; }

/* Počet na stránku zůstává — je to ovládání, ne filtr; v návrhu není,
   protože ten ukazuje jen výchozích 24. Aby nevypadal jako cizí prvek,
   dostal tvar čipu jako řazení. */

.com_virtuemart .display-number select#limit {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--ts-ram);
  border-radius: 999px;
  background-color: var(--ts-plocha);
  color: var(--ts-inkoust);
  font-size: 13.5px;
  width: auto;
}

/* ---------- cena vždy dole ----------
   Bez toho se cena a sklad drží pod názvem, takže u dvouřádkového
   a třířádkového názvu vyjdou v jednom řádku karet různě vysoko. */

.browse-view .row .product [class^="vm-product-descr-container"] {
  display: flex;
  flex-direction: column;
}

.ts-karta .ts-cena-radek { margin-top: auto; }

@media (max-width: 575.98px) {
  .com_virtuemart .orderby-displaynumber .display-number { order: 0; }
}

/* ---------- vnitřní okraj karty ----------
   Šablona T4 má `.com_virtuemart .browse-view .row .product .spacer { padding: 0 !important }`
   (`css/extras/com_virtuemart.css`), takže `padding: 12px` z bloku PODKLAD nikdy
   nechytlo. Při čtyřech kartách v řadě to nebylo vidět — obsah držela od okraje
   vlastní výplň jamky. Na užší kartě text doléhá na rámeček, proto `!important`. */

.browse-view .row .product > .spacer.product-container,
.related-products-view .row .product > .spacer.product-container {
  padding: 12px !important;
}

/* Bootstrapí záporné okraje `.row` přebíjí `#t4-main-body .row` (id, tedy vyšší
   specificita než naše třídy) — bez `!important` by mřížka přetékala o 16 px
   ven z obsahové plochy. */

@media (min-width: 576px) {
  .com_virtuemart .browse-view > .row { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---------- čtyři karty v řadě (4. 9. 2026) ----------
   ⚠️ `auto-fill` se řídí jen tím, kolik se toho vejde, a nemá strop: na 1140px
   obsahové ploše z něj vycházelo pět karet, ale T4 dává na širokém okně
   1288 px, takže od 1440 px naskočila šestá. Počet se proto na desktopu
   předepisuje natvrdo. Pod 992 px `auto-fill` zůstává — tam vychází tři karty
   a níž se stejně přebírá mřížka pro mobil (dvě vedle sebe). */

@media (min-width: 992px) {
  .com_virtuemart .browse-view > .row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cena a sklad se na užší kartě nemusí vejít na jeden řádek — pak se sklad
   zalomí pod cenu, což je čitelnější než zmenšené písmo. */

.ts-cena-radek { row-gap: 2px; }

/* ---------- čipy na mobilu: jeden posuvný řádek ----------
   Sedm podkategorií a pět voleb řazení se na 390 px zalomí do šesti řádků
   a odsune první produkt o ~400 px níž. Návrh má na telefonu čipy v jednom
   řádku, který se posouvá prstem. */

@media (max-width: 767.98px) {
  .ts-podkategorie,
  .ts-radit-cipy {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ts-podkategorie::-webkit-scrollbar,
  .ts-radit-cipy::-webkit-scrollbar { display: none; }

  .ts-podkategorie > .ts-cip,
  .ts-radit-cipy > .ts-radit-cip { flex: 0 0 auto; }

  /* Řazení dostane celý řádek, aby se posouvalo uvnitř sebe a nepřetékalo
       ven z lišty; výrobce se zalomí pod něj. */

  .ts-radit { flex: 1 1 100%; min-width: 0; }
}

/* ---------- tlačítko na kartě: tlumeněji a menší (3. 9. 2026) ----------
   Dvacet čtyři sytě červených tlačítek na stránce přebilo fotky i ceny.
   Výplň jde o tón dolů na `--ts-cerven-tlum` a tlačítko se na desktopu
   zmenší na 34 px. Na dotek zůstává 44 px — pravidlo „klikací plocha
   44 px“ platí dál, jen se přestěhovalo pod `lg`.

   Druhé kolo (3. 9. 2026, po pohledu na tmavý výpis): i `#C9352F` bylo
   na kartě pořád nejsilnější prvek, proto odsyceno na `#A8403A`
   (bílý text 6,1:1) a písmo z 14 na 13 px. Sytá `--ts-cerven` zůstává
   na hoveru, takže akce je pořád čitelná jako akce. */

.com_virtuemart .ts-akce span.addtocart-button input.addtocart-button,
.com_virtuemart .ts-akce input.addtocart-button,
.com_virtuemart .ts-akce button.addtocart-button {
  background: var(--ts-cerven-tlum);
  min-height: 34px;
  padding: 7px 12px !important;
  font-size: 13px;
}

.com_virtuemart .ts-akce span.addtocart-button input.addtocart-button:hover,
.com_virtuemart .ts-akce input.addtocart-button:hover {
  background: var(--ts-cerven);
}

@media (max-width: 991.98px) {
  .com_virtuemart .ts-akce span.addtocart-button input.addtocart-button,
  .com_virtuemart .ts-akce input.addtocart-button,
  .com_virtuemart .ts-akce button.addtocart-button {
    min-height: 44px;
    padding: 10px 14px !important;
  }
}

/* ---------- věk a štítky na kartě ----------
   ⚠️ Původní `custom.css` má `.browse-view .row .product .spacer span
   { color: #595959 }` (0,4,1). Cokoli na kartě, co je `<span>`, tím dostane
   tmavě šedou — `.ts-meta` (0,1,0) ani `.ts-stitek` na to nestačí. Vlastní
   pravidlo proto musí mít aspoň PĚT tříd; `!important` netřeba. */

.browse-view .row .product .spacer .ts-meta,
.related-products-view .spacer .ts-meta {
  /* Od 4. 9. 2026 v akcentu — dřív šedá `--ts-seda`. Na bílé kartě palety A má
     `--ts-losos` jen 3,6 : 1, malý text proto bere tmavší `--ts-losos-text` (4,8 : 1). */
  color: var(--ts-losos-text);
  font-size: 11px;
}

/* Štítek má bílý text zapsaný u sebe (`.ts-stitek { color: #fff }`), ale ten
   selektor má jen (0,1,0) a `#595959` z původního souboru ho přebíjelo —
   „Náš tip“ i „Novinka“ se kreslily šedě na sytém podkladu. */

.browse-view .row .product .spacer .ts-stitek,
.related-products-view .spacer .ts-stitek { color: #fff; }

/* ============================================================
   BARVY PODLE NÁVRHU — čipy podkategorií a nadpis (3. 9. 2026)
   Vzor: věkový pás z návrhu (tlačítko `#ED7465`, pilulky s tlumeným
   podbarvením a barevným textem). Čipy nemají rámeček, barvu nesou
   výplň a text; pětice odstínů se opakuje přes `nth-child(5n)`.
   Poslední slovo nadpisu je v akcentu `--ts-losos`, jako „oslavenci?“
   ve vzoru; jednoslovný název se obarví celý.
   ============================================================ */

.com_virtuemart .category-view h1 .ts-akcent { color: var(--ts-losos); }

body.com_virtuemart.view-category .ts-podkategorie .ts-cip {
  border-color: transparent;
  background: var(--ts-cip-plocha, var(--ts-plocha));
  color: var(--ts-cip-text, var(--ts-inkoust));
  font-weight: 600;
}

/* Počet v čipu: tentýž odstín, jen tlumeně — ve vzoru je o tón níž */

body.com_virtuemart.view-category .ts-podkategorie .ts-cip u {
  color: inherit;
  opacity: .62;
  font-weight: 500;
}

body.com_virtuemart.view-category .ts-podkategorie .ts-cip:hover,
body.com_virtuemart.view-category .ts-podkategorie .ts-cip:focus-visible {
  border-color: var(--ts-cip-text, var(--ts-losos));
  color: var(--ts-cip-text, var(--ts-losos));
}

/* ============================================================
   DETAIL PRODUKTU v2 (3. 9. 2026)
   Krok 5 předělávky vzhledu. Override `productdetails/default.php`
   + `productdetails/default_images.php`, rozcestník docs/vzhled/README.md.

   Detail přechází na tmavou plochu stejně jako výpis kategorie —
   rozdělení „tmavý chrom, světlý katalog“ padlo 3. 9. 2026. Fotku drží
   světlá jamka `--ts-jamka`: obrázky od dodavatele mají bílé pozadí.

   Musí zůstat za blokem TMAVÝ KATALOG — přebírá od něj způsob překlopení
   tokenů, ale na jiném pohledu (`view-productdetails`).
   ============================================================ */

body.com_virtuemart.view-productdetails { background-color: var(--ts-tma-hloub); }

/* ---------- rozvržení ---------- */

.ts-detail { max-width: 1180px; margin: 0 auto; }

.ts-detail .ts-drobky { margin-bottom: 28px; }

.ts-detail-mrizka {
  display: grid;
  /* ⚠️ `minmax(0, 1fr)`, ne `1fr` — položky gridu mají `min-width: auto`
     a nejširší potomek (pás náhledů, nákupní panel) by sloupec roztáhl
     přes okraj stránky. */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (min-width: 992px) {
  .ts-detail-mrizka {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
    gap: 40px;
  }
}

/* ---------- galerie ---------- */

.ts-detail .vm-product-media-container { position: relative; }

.ts-galerie-jamka {
  background: var(--ts-jamka);
  border-radius: 20px;
  padding: 22px;
  display: grid;
  place-items: center;
  min-height: 300px;
  position: relative;
}

/* ---------- posouvání fotek prstem (5. 9. 2026) ----------
   Fotky leží v jamce vedle sebe ve vodorovném pásu a listuje se nativním
   scrollem se `scroll-snap` — žádná knihovna, žádné `touchstart`. Prohlížeč
   tím dá zadarmo setrvačnost, doraz i správnou rychlost gesta.

   ⚠️ `overflow-x: auto` musí zůstat na `.ts-pas`, ne na jamce: jamka má
   `padding: 22px` a snímek je široký `100 %` jejího obsahu, takže se fotky
   nelepí na kulaté rohy.

   ⚠️ Vodorovný scroll kontejner nesmí mít `overflow-y: auto` (ani implicitně
   přes `overflow: auto`) — na iOS by pak polykal i svislé tažení a stránkou
   by nešlo scrollovat prstem přes fotku. Proto `overflow: hidden auto`
   NEpoužívat, jen `overflow-x`. */

.ts-pas {
  width: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ts-pas::-webkit-scrollbar { display: none; }

.ts-snimek {
  /* `min-width: 0` — položky flexu se jinak roztáhnou na šířku fotky
     a snap by padal mimo. */
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;

  /* ⚠️ Podklad jamky MUSÍ být i tady, na samotném snímku, a k tomu
     `isolation: isolate`. Fotky se do jamky vlévají přes
     `mix-blend-mode: multiply` (bílé pozadí fotky × teple bílá jamka),
     jenže **posuvný kontejner si prohlížeč povýší na vlastní kompoziční
     vrstvu** — a jakmile to udělá, fotka uvnitř pásu se míchá s prázdnem
     té vrstvy, ne s podkladem jamky pod ní. Fotka pak svítí čistě bílým
     obdélníkem (`#FFF`) na teple bílé jamce (`#F4F0F3`).

     Nestačí `isolation: isolate` na jamce — její podklad zůstane pod
     vrstvou pásu. Podklad musí ležet UVNITŘ pásu, tedy na snímku, aby byl
     ve stejné vrstvě jako fotka. Ověřeno: bez tohohle dvojřádku vyjde roh
     fotky `(255,255,255)`, s ním `(244,240,243)` = barva jamky.

     Pás náhledů má týž problém vyřešený sám sebou — `background` je na
     `.ts-nahled`, tedy taky uvnitř posuvného kontejneru. */
  background: var(--ts-jamka);
  isolation: isolate;
}

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

/* Počitadlo „2/8" — na telefonu jediné vodítko, že fotek je víc.
   Na desktopu je vidět pás náhledů, tam by jen překáželo. */

.ts-galerie-citac {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(33, 30, 38, .72);
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

@media (min-width: 992px) {
  .ts-galerie-citac { display: none; }
}

/* Původní `custom.css` má na obrázcích v `.vm-product-media-container`
   čtyři vlastnosti s `!important` (oprava deformace v modálu), takže
   výšku fotky jde omezit taky jen `!important`. */

.ts-detail .ts-galerie-jamka .main-image img {
  max-height: 580px !important;
  width: auto !important;
  border-radius: 8px;
}

.ts-detail .ts-galerie-jamka .main-image a { display: block; }

/* Pás náhledů. Na produkt připadá v katalogu průměrně čtyři fotky,
   rekord je 71 — proto se posouvá a override jich vypíše nejvýš 16. */

.ts-nahledy {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ts-nahledy::-webkit-scrollbar { display: none; }

.ts-nahled {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--ts-jamka);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ts-nahled:hover { border-color: var(--ts-losos); }

.ts-nahled.je-aktivni { border-color: var(--ts-cerven); }

.ts-detail .ts-nahled .ts-nahled-obr {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.ts-nahled-vic {
  flex: 0 0 auto;
  align-self: center;
  padding: 0 8px;
  color: var(--ts-seda);
  font-size: 13px;
}

/* Štítek nad fotkou — stejný jako na kartě ve výpisu */

.ts-detail .vm-product-media-container > .ts-stitek {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* ---------- panel ---------- */

/* Řádek nad názvem: věkový čip a vedle něj kód produktu. Od 4. 9. 2026 —
   dřív byl kód v tabulce parametrů pod panelem, ta je zrušená. */

.ts-panel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 8px;
}

/* ⚠️ Kód je `<span>`, a `.browse-view … .spacer span` z původního `custom.css`
   na detail nedosáhne — tady je to `.ts-detail-panel`, ne výpis. Barvu si tedy
   nese sám a stačí mu jedna třída. */

.ts-kod {
  font-size: 12px;
  color: var(--ts-seda);
  white-space: nowrap;
}

.ts-kod b { color: var(--ts-inkoust); font-weight: 600; }

.ts-detail .ts-cip-vek {
  display: inline-block;
  background: var(--ts-p-losos);
  color: var(--ts-p-losos-t);
  border-color: transparent;
  font-weight: 600;
}

.ts-detail h1.vm-product-title {
  font-family: var(--ts-d);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  color: var(--ts-inkoust);
  margin: 0 0 8px;
}

/* První slovo v akcentu — u kategorie totéž nese poslední slovo nadpisu */

.ts-detail h1.vm-product-title .ts-akcent { color: var(--ts-losos); }

@media (max-width: 767.98px) {
  .ts-detail h1.vm-product-title { font-size: 22px; }
}

/* Dodavatelské značky vyjmuté z názvu (`*KOSTÝM*`) */

.ts-znacky { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.ts-znacka {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ts-seda);
  border: 1px solid var(--ts-ram);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---------- nákupní rámeček ---------- */

.ts-nakup {
  background: var(--ts-plocha);
  border: 1px solid var(--ts-ram);
  border-radius: 16px;
  padding: 12px 14px;
  /* Vzduch nad i pod rámečkem — vyžádal zákazník 4. 9. 2026, dřív 2 px / 10 px */
  margin: 18px 0 20px;
}

.ts-nakup-cena { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.ts-nakup-cena .product-price { line-height: 1.1; }

.ts-detail .ts-nakup .PricesalesPrice {
  font-family: var(--ts-d);
  font-size: 28px;
  font-weight: 700;
  color: var(--ts-inkoust) !important;
  font-variant-numeric: tabular-nums;
}

.ts-dph { font-size: 12.5px; color: var(--ts-seda); }

.ts-nakup .ts-sklad { margin: 5px 0 9px; font-size: 13px; }

.ts-detail .ts-sklad-ano { color: var(--ts-zelena); }

/* Množství a tlačítko na jednom řádku, tlačítko bere zbytek šířky.
   Na detailu je tlačítko jediné na stránce, takže smí být sytě červené —
   tlumená `--ts-cerven-tlum` je jen pro karty, kterých jsou na výpisu desítky. */

.ts-nakup-akce .addtocart-area,
.ts-nakup-akce form.product { margin: 0; padding: 0; }

.ts-nakup-akce .vm-customfields-wraps:empty { display: none; }

.ts-nakup-akce .addtocart-bar { margin: 0; }

.ts-detail .ts-nakup-akce span.quantity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ts-detail .ts-nakup-akce span.quantity-controls input.quantity-controls {
  width: 42px;
  height: 44px;
  border: 1px solid var(--ts-ram);
  border-radius: 12px;
  background-color: var(--ts-plocha);
  background-repeat: no-repeat;
  background-position: center !important;
  background-size: 14px 14px;
}

/* Ikony ± jsou v šabloně `plus.png` / `minus.png`, tedy tmavá kresba na bílém.
   Na tmavém panelu se místo nich kreslí vložené SVG ve světlé barvě — filtrem
   by se invertovalo i pozadí tlačítka. */

.ts-detail .ts-nakup-akce span.quantity-controls input.quantity-minus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12' stroke='%23F2EDF2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ts-detail .ts-nakup-akce span.quantity-controls input.quantity-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23F2EDF2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ts-detail .ts-nakup-akce span.quantity-controls input.quantity-controls:hover { border-color: var(--ts-losos); }

.ts-detail .ts-nakup-akce .quantity-box { display: block; }

.ts-detail .ts-nakup-akce span.quantity-controls .quantity-input {
  width: 50px;
  height: 44px;
  text-align: center;
  border: 1px solid var(--ts-ram);
  border-radius: 12px;
  background: var(--ts-plocha);
  color: var(--ts-inkoust);
  font-size: 16px;      /* pod 16 px zvětší iOS Safari při zaostření celou stránku */
  font-variant-numeric: tabular-nums;
}

.ts-detail .ts-nakup-akce span.addtocart-button { flex: 1; padding-left: 0; }

.com_virtuemart .ts-detail .ts-nakup-akce span.addtocart-button input.addtocart-button,
.com_virtuemart .ts-detail .ts-nakup-akce input.addtocart-button {
  width: 100%;
  min-height: 44px;
  padding: 9px 16px !important;
  border: 0;
  border-radius: 999px;
  background: var(--ts-cerven);
  color: #fff;
  font-family: var(--ts-d);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.com_virtuemart .ts-detail .ts-nakup-akce span.addtocart-button input.addtocart-button:hover,
.com_virtuemart .ts-detail .ts-nakup-akce input.addtocart-button:hover { background: var(--ts-cerven-tma); }

/* T4 dělá z „Dotazu na produkt“ tlačítko přes celou šířku
   (`.com_virtuemart .productdetails-view .ask-a-question a.ask-a-question`, 0,4,0),
   takže pod nákupním tlačítkem stál druhý, prázdný rámeček. */

.ts-nakup .ask-a-question { margin-top: 9px; font-size: 12.5px; }

.com_virtuemart .productdetails-view .ts-nakup .ask-a-question a.ask-a-question {
  display: inline;
  width: auto;
  padding: 0;
  border: 0;
  text-align: left;
  font-size: 13px;
  color: var(--ts-seda);
  text-decoration: underline;
}

.com_virtuemart .productdetails-view .ts-nakup .ask-a-question a.ask-a-question:hover {
  background: transparent;
  color: var(--ts-cerven);
}

/* ---------- výhody nákupu (modul `modul_produkt`) ----------
   Od 4. 9. 2026 to vykresluje vlastní modul **SemaVýhody**
   (`mod_semavyhody`, zdroj v `~/Developer/toy-store/mod_semavyhody`), ne
   SP Page Builder. Rozvržení mřížky si veze modul ve vlastním CSS, tady se
   sedí jen rámeček, písmo a barvy — a protože je to naše značkování, obejde
   se to bez jediného `!important`. Předtím tu bylo devět pravidel, která
   přebíjela `#section-id-…` a `#sppb-addon-…` z page builderu. */

.ts-detail .ts-vyhody {
  margin: 0 0 12px;
  padding: 5px 8px;
  border: 1px solid var(--ts-ram);
  border-radius: 16px;
}

.ts-detail .ts-vyhody .mod-semavyhody {
  --semavyhody-min: 180px;
  --semavyhody-mezera: 6px 10px;
}

.ts-detail .ts-vyhody .semavyhody-polozka { padding: 5px 10px; }

.ts-detail .ts-vyhody .semavyhody-titul {
  font-family: var(--ts-d);
  font-size: 12.5px;
  font-weight: 600;
  /* Akcent jako zvýrazněná slova v názvu produktu; malé písmo → `--ts-losos-text` */
  color: var(--ts-losos-text);
  margin: 0 0 1px;
}

.ts-detail .ts-vyhody .semavyhody-text {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ts-seda);
}

/* ---------- krátký popis a parametry ---------- */

.ts-detail .vm-product-short-desc {
  color: var(--ts-seda);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 12px;
}

.ts-detail .vm-product-short-desc .ts-vic {
  display: inline-block;
  margin-top: 4px;
  color: var(--ts-cerven);
  font-weight: 600;
  text-decoration: none;
}

.ts-detail .vm-product-short-desc .ts-vic:hover { text-decoration: underline; }

/* ⚠️ Tabulka parametrů (`.ts-parametry dl`) je od 4. 9. 2026 zrušená —
   s ní odešlo devět pravidel na `dt`/`dd`. V `.ts-parametry` zbyly jen ikony
   (PDF, tisk, poslat známému) a odkaz na úpravu produktu pro přihlášenou
   obsluhu; obojí bývá vypnuté, proto ta pravidla na `:empty`. */

.ts-parametry .icons { margin-top: 12px; }

.ts-parametry .product-fields:empty,
.ts-parametry .edit-this-product:empty { display: none; }

/* ---------- sekce pod ohybem ---------- */

.ts-sekce { margin-top: 44px; }

.ts-detail .ts-sekce > h2 {
  font-family: var(--ts-d);
  font-size: 22px;
  font-weight: 700;
  color: var(--ts-inkoust);
  text-transform: none;
  margin: 0 0 14px;
}

.ts-popis-text {
  max-width: 74ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ts-inkoust);
}

.ts-popis-text img { max-width: 100%; height: auto; border-radius: 12px; }

.ts-video { margin-top: 18px; }

.ts-video iframe { max-width: 100%; border-radius: 12px; }

/* ---------- spodek: vlevo popis, vpravo podobné hračky ----------
   Od 4. 9. 2026. Popis je úzký sloupec textu (`max-width: 74ch`), takže vedle
   něj zbývalo na širokém okně prázdno; podobné hračky ho zaplní. */

.ts-spodek {
  display: grid;
  /* ⚠️ `minmax(0, …)`, ne `1fr` — položky gridu mají `min-width: auto`
     a mřížka karet vpravo by sloupec roztáhla přes okraj stránky. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}

@media (min-width: 992px) {
  /* Pravý sloupec musí uživit dvě karty vedle sebe — pod 400 px se na kartě
       přestane vedle ceny vejít sklad a zalomí se pod ni. */

  .ts-spodek { grid-template-columns: minmax(0, 1fr) minmax(400px, 440px); }

  /* Bez podobných hraček nemá druhý sloupec co držet */

  .ts-spodek.ts-spodek-sam { grid-template-columns: minmax(0, 1fr); }
}

.ts-spodek-hlavni,
.ts-spodek-vedle { min-width: 0; }

/* V pravém sloupci už popis nemusí být užší než sloupec sám */

.ts-spodek-hlavni .ts-popis-text { max-width: 68ch; }

/* Karty podobných hraček jedou přes sdílený `sublayouts/products.php`,
   takže dědí mřížku i vzhled karty z `.browse-view`. */

.ts-podobne .browse-view { margin-top: 4px; }

/* ⚠️ Mřížka z výpisu kategorie je `repeat(auto-fill, minmax(200px, 1fr))`.
   V užším pravém sloupci by z toho vyšly dva sloupce jen náhodou a při jiné
   šířce okna jeden — proto se tady natvrdo předepisují dva. Selektor musí být
   delší než `.com_virtuemart .browse-view > .row` (0,3,1) z bloku výš. */

.com_virtuemart .ts-spodek .ts-podobne .browse-view > .row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 991.98px) {
  .ts-sekce { margin-top: 32px; }
}

/* ⚠️ Jamka má na desktopu pevnou výšku, aby levý sloupec končil zhruba tam
   co panel i u produktů se širokou (nízkou) fotkou — bez ní se sloupce
   rozešly o 160 px. Fotka se neroztahuje, jen se v jamce vystředí.
   Musí být AŽ ZA `.ts-galerie-jamka { min-height: 300px }` výš — obě pravidla
   mají stejnou váhu, takže rozhoduje pořadí. */

@media (min-width: 992px) {
  .ts-galerie-jamka { min-height: 580px; }
}

/* ⚠️ T4 má `.com_virtuemart .productdetails-view .vm-product-media
   { position: sticky; top: 5% }`. Na desktopu to dává smysl (fotka jde
   s panelem), na mobilu jsou sloupce pod sebou, takže fotka zůstala viset
   přes text pod ní a nedalo se to číst. Pod 992 px se lepení vypíná. */

@media (max-width: 991.98px) {
  .com_virtuemart .productdetails-view .ts-detail-media { position: static; }
}

/* Na telefonu by fotka 460 px vysoká odsunula cenu i tlačítko pod ohyb */

@media (max-width: 767.98px) {
  .ts-galerie-jamka { padding: 14px; min-height: 0; }

  .ts-detail .ts-galerie-jamka .main-image img { max-height: 320px !important; }

  .ts-nakup { padding: 16px; }

  .ts-detail .ts-nakup .PricesalesPrice { font-size: 30px; }
}

/* ---------- jedna šířka pro všechny bloky ----------
   ⚠️ Položky gridu mají `min-width: auto`, takže je nejširší potomek
   (pás náhledů, nákupní panel) roztáhl přes okraj: na 390px viewportu
   měly `.ts-detail-media` i `.ts-detail-panel` 436 px, kdežto drobečky
   a sekce pod nimi 358 px. Odtud „různá šířka bloků". */

/* ⚠️ Tady kdysi stálo bezpodmínečné `.ts-detail-mrizka { grid-template-columns:
   minmax(0, 1fr) }`. Stojí to AŽ ZA `@media (min-width: 992px)` z bloku
   DETAIL PRODUKTU a má stejnou váhu (0,1,0), takže to přebilo i desktop
   a detail produktu se na velké obrazovce složil do jednoho sloupce.
   `minmax(0, 1fr)` je nově rovnou v základu mřížky výš; tady zůstává
   jen `min-width: 0` na položkách, které platí v každé šířce. */

.ts-detail-media,
.ts-detail-panel { min-width: 0; }

/* Mřížka karet i na telefonu, ať sedí do stejné šířky jako zbytek stránky.
   Bootstrapí `col-6` v `.row` se zápornými okraji vylézal o 8 px ven. */

@media (max-width: 575.98px) {
  .com_virtuemart .browse-view > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .com_virtuemart .browse-view > .row > .product {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0;
  }
}

/* ---------- drobečky bez názvu produktu ----------
   Na 390 px se poslední článek (celý název produktu) zalomil na vlastní
   řádek nad fotkou a vypadal jako druhý, malý nadpis. `h1` je hned pod ním,
   takže na mobilu stačí cesta ke kategorii. */

@media (max-width: 767.98px) {
  .ts-detail .ts-drobky > b,
  .ts-detail .ts-drobky > span:last-of-type { display: none; }
}

/* ============================================================
   TITULNÍ STRANA v2 — krok 3 (4. 9. 2026)
   Titulka přestala být stránkou SP Page Builderu a staví se z katalogu:
   override `html/com_virtuemart/virtuemart/default.php` + modul
   `mod_semavyhody` v pozici `modul_titulka` (pás výhod).

   Plocha je tmavá jako výpis kategorie a detail produktu, takže se tady
   překlápějí titíž tokeny na `#t4-main-body`. Selektor je `view-virtuemart`,
   ne `item-108` — aby stránka fungovala i při náhledu bez položky menu.

   Musí zůstat POSLEDNÍ blok souboru.
   ============================================================ */

body.com_virtuemart.view-virtuemart { background-color: var(--ts-tma-hloub); }

/* Skladem: `#2E9C63` je na tmavém mdlá, návrh má `var(--ts-zelena)` (totéž jako výpis) */

body.com_virtuemart.view-virtuemart .ts-sklad-ano { color: var(--ts-zelena); }

.ts-titulka {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 8px 0 8px;
}

/* ---------- pás výhod ----------
   Obsah je modul `mod_semavyhody`; tady se jen barví a rozkládá. Na tmavém
   podkladu drží pás tlumené červené podbarvení `--ts-cerven-svit` (#3A2220),
   stejně jako v tmavé variantě návrhu. */

.ts-pas-vyhod {
  background: var(--ts-cerven-svit);
  border: 1px solid var(--ts-tma-ram);
  border-radius: 16px;
  overflow: hidden;
}

.ts-pas-vyhod .mod-semavyhody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
}

/* Dvousloupcové rozvržení dlaždice (ikona vlevo) kreslí modul sám —
   `.semavyhody-s-ikonou` v `media/mod_semavyhody/css/semavyhody.css`. */

.ts-pas-vyhod .semavyhody-polozka {
  padding: 15px 18px;
  border: 0;
}

.ts-pas-vyhod .semavyhody-titul {
  font-family: var(--ts-d);
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-tma-text);
}

.ts-pas-vyhod .semavyhody-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ts-tma-seda);
}

/* Barvy ikon podle návrhu — každá dlaždice pásu jiná, aby se pás četl po očích.
   SVG kreslí modul a barvu bere z `currentColor`. */

.ts-pas-vyhod .semavyhody-ikona-kontrola { color: #1E9E5A; }

.ts-pas-vyhod .semavyhody-ikona-doprava { color: #1D7FE0; }

.ts-pas-vyhod .semavyhody-ikona-hvezda { color: #C98A00; }

.ts-pas-vyhod .semavyhody-ikona-vraceni { color: #7A4DE8; }

.ts-pas-vyhod .semavyhody-ikona-darek { color: var(--ts-cerven-tma); }

.ts-pas-vyhod .semavyhody-ikona-prodejna { color: #E0322F; }

.ts-pas-vyhod .semavyhody-ikona-hodiny { color: #1D7FE0; }

.ts-pas-vyhod .semavyhody-ikona-stit { color: #1E9E5A; }

/* ---------- „Kolik je oslavenci?“ ---------- */

.ts-uvod {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 30px;
  align-items: center;
}

.ts-uvod-nadpisek {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ts-tma-seda);
}

.ts-titulka h1 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--ts-tma-text);
}

.ts-titulka h1 .ts-akcent { color: var(--ts-losos); }

.ts-uvod-text {
  margin: 12px 0 0;
  max-width: 42ch;
  color: var(--ts-tma-seda);
}

/* Věkové čipy. Pětice odstínů je táž jako u podkategorií ve výpisu — tady
   ale barva nese význam: skupin je právě pět a pořadí je dané tím, jak dítě
   roste, takže odstín zůstává u téhož věku. */

.ts-veky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}

.ts-veky .ts-vek-cip {
  border-color: transparent;
  background: var(--ts-cip-plocha, var(--ts-tma));
  color: var(--ts-cip-text, var(--ts-tma-text));
  font-weight: 600;
}

.ts-veky .ts-vek-cip u {
  color: inherit;
  opacity: .62;
  font-weight: 500;
}

.ts-veky .ts-vek-cip:hover,
.ts-veky .ts-vek-cip:focus-visible {
  border-color: var(--ts-cip-text, var(--ts-losos));
  color: var(--ts-cip-text, var(--ts-losos));
}

.ts-veky .ts-vek-cip:nth-child(5n+1) { --ts-cip-plocha: var(--ts-p-jantar); --ts-cip-text: var(--ts-p-jantar-t); }

.ts-veky .ts-vek-cip:nth-child(5n+2) { --ts-cip-plocha: var(--ts-p-mata); --ts-cip-text: var(--ts-p-mata-t); }

.ts-veky .ts-vek-cip:nth-child(5n+3) { --ts-cip-plocha: var(--ts-p-losos); --ts-cip-text: var(--ts-p-losos-t); }

.ts-veky .ts-vek-cip:nth-child(5n+4) { --ts-cip-plocha: var(--ts-p-nebe); --ts-cip-text: var(--ts-p-nebe-t); }

.ts-veky .ts-vek-cip:nth-child(5n+5) { --ts-cip-plocha: var(--ts-p-levand); --ts-cip-text: var(--ts-p-levand-t); }

/* Tlačítko „Vybrat dárek“ — v návrhu je to jediné velké tlačítko na stránce,
   proto sytá `--ts-cerven` (na kartách se používá tlumená). */

.ts-titulka .ts-tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 20px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ts-cerven);
  color: #fff;
  font-family: var(--ts-d);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.ts-titulka .ts-tlacitko:hover,
.ts-titulka .ts-tlacitko:focus-visible { background: var(--ts-cerven-tma); color: #fff; }

/* Koláž čtyř fotek. Pastelové jamky jsou z návrhu; fotky od dodavatele mají
   bílé pozadí, které `mix-blend-mode: multiply` na světlé jamce zahladí.
   Na tmavém podkladu jsou to zároveň jediné světlé plochy na stránce. */

.ts-uvod-kolaz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  /* Rámeček je kolem CELÉ čtveřice, ne kolem každého čtverce — stejný jako
     má karta produktu (zákazník 4. 9. 2026). */
  padding: 12px;
  border: 1px solid var(--ts-tma-karta-ram);
  border-radius: 20px;
  background: var(--ts-tma-karta);
}

.ts-kolaz-dilek {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 16px;
  overflow: hidden;
}

.ts-kolaz-dilek:nth-child(1) { background: #FFF1CC; }

.ts-kolaz-dilek:nth-child(2) { background: #D9EFFA; }

.ts-kolaz-dilek:nth-child(3) { background: #DFF3E7; }

.ts-kolaz-dilek:nth-child(4) { background: #FFE1DD; }

.ts-uvod-kolaz img {
  max-height: 100%;
  width: auto;
  mix-blend-mode: multiply;
}

/* ---------- hlavičky sekcí ---------- */

.ts-sekce-hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ts-sekce-hlava h2 {
  margin: 0;
  font-size: 24px;
  color: var(--ts-tma-text);
}

.ts-sekce-hlava .ts-vic {
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-cerven);
  text-decoration: none;
}

.ts-sekce-hlava .ts-vic:hover { color: var(--ts-cerven-tma); }

/* ---------- dlaždice kategorií ----------
   Návrh má v dlaždici velké průsvitné emoji. Emoji by ale znamenalo ruční
   mapu na kategorii a nová kategorie od KAMARa by zůstala prázdná, proto je
   v dlaždici fotka produktu z té kategorie. Světlá jamka je tu ze stejného
   důvodu jako na kartě: fotky mají bílé pozadí. */

.ts-dlazdice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.ts-dlazdice-polozka {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--ts-cip-plocha, var(--ts-tma-karta));
  color: var(--ts-cip-text, var(--ts-tma-text));
  text-decoration: none;
}

.ts-dlazdice-polozka:hover,
.ts-dlazdice-polozka:focus-visible {
  border-color: var(--ts-cerven);
  color: var(--ts-cip-text, var(--ts-tma-text));
}

.ts-dlazdice-foto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 8px;
  border-radius: 12px;
  background: var(--ts-jamka);
  overflow: hidden;
}

.ts-dlazdice-foto img { max-height: 100%; width: auto; }

/* Ilustrace kategorie (`images/kategorie/<id>.svg`) má průhledné pozadí,
   jamka je proto zesvětlená barva dlaždice a obrázek jde přes celou plochu
   bez multiply. */
.ts-dlazdice-foto.ts-dlazdice-ilustrace {
  padding: 0;
  background: rgb(255 255 255 / .45);
}

.ts-dlazdice-polozka .ts-dlazdice-ilustrace img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  mix-blend-mode: normal;
  transition: transform .25s ease;
}

.ts-dlazdice-polozka:hover .ts-dlazdice-ilustrace img { transform: scale(1.04); }

.ts-dlazdice-polozka b {
  font-family: var(--ts-d);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.ts-dlazdice-pocet {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ts-cip-text, var(--ts-tma-seda));
  opacity: .85;
}

/* Táž pětice odstínů jako čipy — barva je tady dekorace, ne význam */

.ts-dlazdice-polozka:nth-child(5n+1) { --ts-cip-plocha: var(--ts-p-jantar); --ts-cip-text: var(--ts-p-jantar-t); }

.ts-dlazdice-polozka:nth-child(5n+2) { --ts-cip-plocha: var(--ts-p-mata); --ts-cip-text: var(--ts-p-mata-t); }

.ts-dlazdice-polozka:nth-child(5n+3) { --ts-cip-plocha: var(--ts-p-losos); --ts-cip-text: var(--ts-p-losos-t); }

.ts-dlazdice-polozka:nth-child(5n+4) { --ts-cip-plocha: var(--ts-p-nebe); --ts-cip-text: var(--ts-p-nebe-t); }

.ts-dlazdice-polozka:nth-child(5n+5) { --ts-cip-plocha: var(--ts-p-levand); --ts-cip-text: var(--ts-p-levand-t); }

/* ---------- pruh s kategoriemi přes celou šířku ----------
   Blok kategorií má tmavší podklad než plocha stránky (`--ts-tma` jako
   hlavička a zápatí) a táhne se od kraje ke kraji.

   Trik s `50vw`: obsah je uvnitř `.container` šablony, takže se blok vytáhne
   zápornými okraji ven a stejně velkým vnitřním odsazením se text vrátí zpátky
   na mřížku. Procenta se počítají z šířky RODIČE (kontejneru), `vw` z okna —
   rozdíl obou je přesně okrajová mezera.

   ⚠️ `100vw` počítá i se svislým posuvníkem, takže by blok o jeho šířku
   přetékal do stran. Řeší to `overflow-x: clip` na `#t4-main-body` — na rozdíl
   od `hidden` nezakládá posuvný kontejner, takže nerozbíjí `position: sticky`
   (na titulce sice nic lepivého není, ale pravidlo ať se dá zkopírovat). */

.ts-sekce-kategorie {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 34px calc(50vw - 50%);
  background: var(--ts-tma);
  border-top: 1px solid var(--ts-tma-ram);
  border-bottom: 1px solid var(--ts-tma-ram);
}

/* Na tmavším pruhu potřebuje dlaždice vlastní odstín, jinak splyne s podkladem */

.ts-sekce-kategorie .ts-dlazdice-polozka { background: var(--ts-tma-hloub); }

/* ---------- řada „Právě naskladněno“ ----------
   Mřížku i kartu má na starosti blok VÝPIS KATEGORIE (`.browse-view > .row`),
   tady se jen ruší vnější odsazení, které si `.row` nese z Bootstrapu. */

.ts-rada > .row { margin: 0; }

/* ---------- mobil ---------- */

/* Osm dlaždic má být 4 + 4. `auto-fill` se řídí jen tím, kolik se vejde —
   na 1440px okně z něj vyšlo sedm v prvním řádku a jedna osiřelá pod nimi
   (táž past jako u mřížky výpisu, viz blok VÝPIS KATEGORIE — doladění). */

@media (min-width: 992px) {
  .ts-dlazdice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .ts-uvod { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .ts-titulka { gap: 30px; }
}

@media (max-width: 767.98px) {
  /* Pás výhod (Doprava zdarma…) jde na mobilu až na konec titulky, nad zápatí —
       nahoře odsouval „Kolik je oslavenci?" pod první obrazovku. `.ts-titulka`
       je flex sloupec, takže stačí `order`; v HTML zůstává první. */

  .ts-titulka > .ts-pas-vyhod { order: 99; }

  /* Čipy v jednom posuvném řádku — stejně jako podkategorie ve výpisu.
       Pět čipů se na 390 px jinak zalomí do tří řádků. */

  .ts-veky {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ts-veky::-webkit-scrollbar { display: none; }

  .ts-veky > .ts-vek-cip { flex: 0 0 auto; }

  .ts-dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .ts-sekce-hlava h2 { font-size: 21px; }

  .ts-titulka .ts-tlacitko { width: 100%; }

  /* Klikací plocha 44 px na dotek: čipy mají v základu 40 px (`.ts-cip`)
       a odkaz „Všech 26 kategorií“ jen výšku řádku, tedy 20 px. Na titulce
       jsou to hlavní cesty dál, jinde ve výpisu je to ovládání navíc. */

  .ts-veky .ts-vek-cip { min-height: 44px; }

  .ts-sekce-hlava .ts-vic {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================================
   PŘEPÍNAČ MĚNY V HLAVIČCE (4. 9. 2026)
   Vyžádal zákazník: „změna měny — stejný styl jak ikony vedle“.
   Modul `mod_virtuemart_currencies` je `<select>`, který v prohlížeči
   přebírá **Chosen** (jQuery) a vykreslí `div.chosen-container` s
   `a.chosen-single` — světlý rámeček 1 px #aaa, rádius 5 px, výška 25 px
   a bílý vnitřní stín. Vedle dvou tmavých koleček 42 px to svítilo.
   ============================================================ */

/* Šipku kreslí Chosen obrázkem `chosen-sprite.png` (tmavá na tmavém) v `div`,
   který si sám polohuje `position: absolute` k pravému hornímu rohu — v nižším
   tlačítku visela nad pilulkou. Celý `div` se proto skrývá a trojúhelník
   kreslí `::after`, tedy další položka flexu vedle textu. */

/* Rozbalený seznam měn patří k tmavé hlavičce */

/* ============================================================
   INFORMAČNÍ STRÁNKY — články (4. 9. 2026)
   Osm stránek (kontakty, o nás, doprava, obchodní podmínky, ochrana údajů,
   vrácení zboží, cookies, kamenná prodejna) přešlo ze SP Page Builderu do
   článků Joomly. Adresy zůstaly, obsah je čisté HTML bez obalů builderu,
   takže se dá ostylovat jednou pro všechny.

   Nadpis stránky vykresluje jádro jako `h1` v `.page-header` (parametr
   `show_title=1` u položky menu, `show_page_heading=0` — záhlaví T4 je
   schované, tam by nadpis zmizel).
   ============================================================ */

body.com_content.view-article { background-color: var(--ts-tma-hloub); }

/* Obchodní podmínky mají 114 odstavců; přes celou šířku 1288 px by měl řádek
   přes 200 znaků. Sloupec se proto drží na čitelné šířce a centruje. */

.com-content-article.item-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 4px 0 32px;
}

.item-page .page-header h1 {
  margin: 0 0 20px;
  font-size: clamp(26px, 3.2vw, 38px);
  color: var(--ts-tma-text);
  /* T4 dává nadpisu stránky verzálky (`.page-header h1`), návrh je nechce */
  text-transform: none;
  letter-spacing: -.01em;
}

.item-page h2 {
  margin: 30px 0 10px;
  font-size: 22px;
  color: var(--ts-tma-text);
}

.item-page h3 {
  margin: 24px 0 8px;
  font-size: 17px;
  color: var(--ts-tma-text);
}

.item-page p,
.item-page li { line-height: 1.7; }

.item-page strong,
.item-page b { color: var(--ts-tma-text); }

.item-page a { color: var(--ts-cerven); text-decoration: underline; }

.item-page a:hover { color: var(--ts-cerven-tma); }

.item-page ul,
.item-page ol { padding-left: 22px; }

.item-page img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.item-page hr { border-color: var(--ts-tma-ram); }

/* Tabulky (cookies, ochrana údajů) — rámečky v barvě podkladu, hlavička tmavší */

.item-page table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  font-size: 13.5px;
}

.item-page th,
.item-page td {
  padding: 8px 10px;
  border: 1px solid var(--ts-tma-ram);
  text-align: left;
  vertical-align: top;
}

.item-page thead th {
  background: var(--ts-tma);
  color: var(--ts-tma-text);
}

@media (max-width: 767.98px) {
  .item-page h2 { font-size: 19px; }

  .item-page h3 { font-size: 16px; }

  /* Čtyřsloupcová tabulka cookies se na 390 px vejde jen s menším písmem
       a lámáním dlouhých názvů (`_ga_XXXXXXXX`, `hg_ocm_id`). */

  .item-page table { font-size: 12px; }

  .item-page th,
  .item-page td {
    padding: 6px 7px;
    /* `word-break: break-word` láme i běžná slova („Expi race“). `anywhere`
       zalomí jen tam, kde to jinak nejde — tedy uvnitř `cookieconsent_status`. */
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* ---------- tlačítko „Odstoupit od smlouvy on-line“ ----------
   Vykresluje ho `pkg_semavmwithdrawal` (modál pro odstoupení od smlouvy),
   v článku „Vrácení zboží“ je vložené ručně jako `<button id="vmw-trigger">`.
   Plugin má vlastní izolované styly a modrou `#1f6feb`, kterou si ale bere
   z proměnné — stačí ji tedy překlopit do barvy značky, nic se nepřebíjí. */

body.com_content.view-article {
  --vmw-accent: var(--ts-cerven);
  --vmw-accent-hover: var(--ts-cerven-tma);
}

.item-page .ts-vmw { margin: 4px 0 22px; }

.item-page .vmw-trigger {
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--ts-d);
  font-size: 15px;
  font-weight: 600;
}

/* ============================================================
   JEDNA BÍLÁ POD FOTKAMI (4. 9. 2026)
   Zákazník: „u některých produktových obrázků je jako podklad jiná bílá“.

   VirtueMart zmenšuje fotky **bez doplnění na čtverec** — z fotky 4:3 vyjde
   `500×380`. Ve čtvercové jamce (`--ts-jamka`, teple bílá `#F4F0F3`) tak nad
   a pod fotkou zůstane pruh jamky vedle čistě bílého pozadí fotky, které
   dodavatel fotí na bílém. Dvě bílé vedle sebe, každá jiná.

   Řeší to `mix-blend-mode: multiply`: bílá fotky vynásobená jamkou dá přesně
   jamku, takže se okraj fotky ztratí. Týž trik má koláž na titulce a je
   v návrhu. Fotku to nemění — násobí se hodnotou 0,96, což je pod prahem
   rozlišitelnosti; funguje i na fotky s lehce šedým pozadím (`253,252,255`).

   ⚠️ Platí **jen tam, kde je jamka světlá**. Kdyby někdo dal jamce tmavý
   odstín, multiply by fotky zčernal — pak se pravidlo musí zrušit.
   ============================================================ */

.browse-view .row .product .vm-product-media-container img,
.related-products-view .row .product .vm-product-media-container img,
.ts-detail .ts-galerie-jamka .main-image img,
.ts-detail .ts-nahled .ts-nahled-obr,
.ts-dlazdice-foto img {
  mix-blend-mode: multiply;
}

/* ==========================================================================
   CHROM CASSIOPEIE — paleta A „Pastelka“
   user.css (RD/millers) dává hlavičce barvu zápatí (--rd-primary-dark); tady
   ji přebíjíme na bílou. Pás menu a zápatí berou tokeny --rd-* z user.css.
   ========================================================================== */

body {
  font-family: var(--ts-b);
  background: var(--ts-podklad);
  color: var(--ts-inkoust);
}

/* ---------- hlavička: bílá, logo vlevo, hledání uprostřed ---------- */
.rd-header,
.rd-header-main {
  background: #fff;
  color: var(--ts-inkoust);
}
.rd-header-main { border-bottom: 1px solid var(--ts-ram); }
.rd-logo .mo-logo-img { height: 40px; width: auto; }
.rd-logo .site-description { color: var(--ts-seda); font-size: 13px; }

.rd-search-input {
  background: #F3EEFF !important;
  border-color: #F3EEFF !important;
  color: var(--ts-inkoust) !important;
}
.rd-search-input::placeholder { color: #6C6385; }
.rd-search-input:focus { border-color: var(--ts-p-levand) !important; background: #fff !important; }
.rd-search-btn { background: var(--ts-cerven) !important; color: #fff !important; }
.rd-search-btn:hover { background: var(--ts-cerven-tma) !important; }

.rd-hamburger span { background: var(--ts-inkoust); }

/* ---------- pás menu ---------- */
.rd-navbar {
  background: #FFE27A;
  color: var(--ts-inkoust);
  box-shadow: none;
}
.rd-nav-menu .mod-menu > li > a,
.rd-nav-menu .mod-menu > li > .nav-header,
.rd-nav-menu .mod-menu > li > span {
  color: var(--ts-inkoust);
  font-weight: 700;
}
.rd-nav-menu .mod-menu > li > a:hover,
.rd-nav-menu .mod-menu > li.current > a,
.rd-nav-menu .mod-menu > li.active > a { color: var(--ts-inkoust); }
.rd-nav-actions a,
.rd-nav-actions .rd-nav-login { color: var(--ts-inkoust); }
.rd-nav-actions a:hover { color: var(--ts-cerven-tma); }

/* přepínač měny (modul 110, pozice below-top): select, případně Chosen */
.rd-nav-actions .vm-chzn-select,
.rd-nav-actions select {
  min-height: 34px;
  padding: 4px 28px 4px 12px;
  border: 0;
  border-radius: 999px;
  background-color: #FFF0C7;
  color: var(--ts-inkoust);
  font: 700 13px var(--ts-b);
}
.rd-nav-actions .chosen-container-single .chosen-single {
  height: 34px;
  line-height: 34px;
  padding: 0 28px 0 12px;
  border: 0;
  border-radius: 999px;
  background: #FFF0C7;
  box-shadow: none;
  color: var(--ts-inkoust);
  font: 700 13px var(--ts-b);
}

/* ---------- zápatí ---------- */
.rd-footer,
.rd-footer-main { background: #2A2440; color: #F4EFFF; }
.rd-footer a { color: #F4EFFF; }
.rd-footer a:hover { color: #FFD8CC; }
.rd-footer h3 { color: #fff; font-family: var(--ts-d); }
.rd-footer-bottom { background: #1E1A30; color: #CFC8E6; }
.rd-footer-logo .mo-logo-img { height: 36px; width: auto; }
.ts-socialni a { margin-right: 12px; }

/* položky menu jako v náhledu palety: tučně, bez verzálek */
.rd-nav-menu .mod-menu > li > a,
.rd-nav-menu .mod-menu > li > .nav-header,
.rd-nav-menu .mod-menu > li > span { text-transform: none; letter-spacing: 0; font-size: 15px; }

/* dlaždice kategorií: pastel dlaždice má být vidět i kolem fotky */
.ts-dlazdice-foto { background: rgba(255, 255, 255, .55); }

/* přepínač měny se na mobilu do hlavičky nevejde (logo + účet + košík + hamburger) — skrytý,
   měna zůstává zvolená; na desktopu je v pásu menu */
@media (max-width: 991.98px) {
  .rd-nav-actions form:has(#virtuemart_currency_id) { display: none; }
}

/* ==========================================================================
   STRUKTURA JAKO PRODUKCE, SVĚTLE (DC 5. 10. 2026)
   „Přeber celou šablonu původního webu, jen udělej světlou variantu“ — paleta
   Pastelka zůstává, rozložení je 1:1 s T4 předělávkou na www.toy-store.cz:
   jednořádková hlavička (logo | menu | kolečka), žádný levý sloupec, nadpis
   kategorie vlevo v akcentu, barevné čipy, řadicí lišta mezi linkami.
   Hlavička (index.php .ts-hlavicka) a menu sdílí třídy .rd-nav-* s user.css
   kvůli vysouvacímu panelu na mobilu; vzhled na desktopu se přebíjí tady.
   ========================================================================== */

/* ---------- hlavička ---------- */
.ts-hlavicka {
  position: sticky;
  top: 0;
  z-index: 300;
  background: #fff;
  border-bottom: 1px solid var(--ts-ram);
}
.ts-hlavicka-radek {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 80px;
}
.ts-logo { flex: 0 0 auto; display: flex; align-items: center; }
.ts-logo .mo-logo-img { height: 40px; width: auto; }

.ts-nav { flex: 1 1 auto; justify-content: center; }
.ts-hlavicka .rd-nav-menu .mod-menu > li > a,
.ts-hlavicka .rd-nav-menu .mod-menu > li > .nav-header {
  padding: 28px 14px;
  font: 700 17px/1 var(--ts-d);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ts-inkoust);
}
.ts-hlavicka .rd-nav-menu .mod-menu > li > a::after,
.ts-hlavicka .rd-nav-menu .mod-menu > li > .nav-header::after { display: none; }
.ts-hlavicka .rd-nav-menu .mod-menu > li > a:hover,
.ts-hlavicka .rd-nav-menu .mod-menu > li > .nav-header:hover,
.ts-hlavicka .rd-nav-menu .mod-menu > li.active > a,
.ts-hlavicka .rd-nav-menu .mod-menu > li.current > a,
.ts-hlavicka .rd-nav-menu .mod-menu > li.active > .nav-header { color: var(--ts-cerven); }
/* šipka u „Hračky“ — jako T4, jen naznačená */
.ts-hlavicka .rd-nav-menu .mod-menu > li.deeper > .nav-header::before,
.ts-hlavicka .rd-nav-menu .mod-menu > li.deeper > a::before { opacity: .45; }

/* mega panel Hračky: bílý pod hlavičkou, sloupce kategorií */
@media (min-width: 992px) {
  .ts-hlavicka .rd-nav-menu .mo-mega-menu > li > .mod-menu__sub.mo-mega {
    top: 100%;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 18px 40px rgba(42, 36, 64, .12);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ts-hlavicka .mo-mega > .mo-mega-intro { display: none; }
  .ts-hlavicka .rd-nav-menu .mo-mega > li > a { border-left: 0; padding: 8px 12px; border-radius: 10px; }
  .ts-hlavicka .rd-nav-menu .mo-mega > li > a:hover { background: var(--ts-podklad); }
  .ts-hlavicka .mo-mega-title { font-weight: 600; color: var(--ts-inkoust); }
  .ts-hlavicka .rd-nav-menu { position: static; }
  .ts-hlavicka-radek { position: relative; }
}

/* ---------- kolečka vpravo: účet, měna, hledání, košík ---------- */
.ts-hlavicka-akce {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto;
}
.ts-kruh {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ts-podklad);
  color: var(--ts-inkoust);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.ts-kruh:hover,
.ts-kruh:focus-visible { background: #FFF0C7; color: var(--ts-inkoust); }
.ts-hlavicka-akce .rd-user-dropdown { position: relative; }
.ts-hlavicka-akce .rd-user-menu { right: 0; left: auto; }
.rd-nav-cart-link .rd-cart-count:not(:empty) {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--ts-cerven);
  color: #fff;
  font: 800 11px/20px var(--ts-b);
  text-align: center;
}
.ts-mena .chosen-container-single .chosen-single,
.ts-mena select {
  height: 44px;
  line-height: 44px;
  padding: 0 32px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ts-podklad);
  box-shadow: none;
  color: var(--ts-inkoust);
  font: 700 14px var(--ts-b);
}
.ts-mena form { margin: 0; }
.ts-hamburger { display: none; flex-direction: column; gap: 4px; }
.ts-hamburger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ts-inkoust); }

/* ---------- hledání pod hlavičkou ---------- */
.ts-hledani { border-top: 1px solid var(--ts-ram); background: #fff; padding: 14px 0; }
.ts-hledani-form { display: flex; gap: 10px; max-width: 720px; margin: 0 auto; }
.ts-hledani-pole {
  flex: 1;
  height: 46px;
  padding: 0 18px;
  border: 1px solid var(--ts-ram);
  border-radius: 999px;
  background: var(--ts-podklad);
  font: 500 16px var(--ts-b);
  color: var(--ts-inkoust);
}
.ts-hledani-pole:focus { outline: 2px solid var(--ts-p-levand); background: #fff; }
.ts-hledani-odeslat {
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ts-cerven);
  color: #fff;
  font: 700 15px var(--ts-b);
}
.ts-hledani-odeslat:hover { background: var(--ts-cerven-tma); }

/* ---------- mobil: menu do panelu, kolečka menší ---------- */
@media (max-width: 991.98px) {
  .ts-hlavicka-radek { min-height: 64px; gap: 10px; }
  .ts-logo .mo-logo-img { height: 30px; }
  .ts-hlavicka-akce { gap: 8px; }
  .ts-kruh { width: 40px; height: 40px; }
  .ts-mena { display: none; }   /* jako dřív: na mobilu se nevejde, měna zůstává zvolená */
  .ts-hamburger { display: inline-flex; }
  .ts-hlavicka .rd-nav-menu { background: #fff; }
  .ts-hlavicka .rd-nav-menu .mod-menu > li > a,
  .ts-hlavicka .rd-nav-menu .mod-menu > li > .nav-header { padding: 14px 20px; font-size: 16px; }
}

/* ---------- obsah: bez rámečku karty kolem stránky, šířka jako hlavička ---------- */
/* Cassiopeia má 6 stop (areas banner/top-a… je pojmenovávají); se 3 stopami vznikly implicitní sloupce s mezerou 15 px a obsah ujel o 22 px doleva */
.site-grid { grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 322px)) [main-end] minmax(0, 1fr) [full-end]; column-gap: 0; }
.container-component { padding-top: 0; }
body.com_virtuemart .container-component,
body.com_content .container-component { background: transparent; box-shadow: none; border: 0; }

/* ---------- výpis kategorie jako produkce ---------- */
.com_virtuemart .category-view > .vendor-store-desc { display: none; }   /* uvítací text obchodu — produkce ho na kategorii nemá */
body.com_virtuemart.view-category .category-view h1 {
  margin: 8px 0 14px;
  text-align: left;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--ts-losos);
}
body.com_virtuemart.view-category .category-view h1::after { display: none; }   /* user.css: čárka pod nadpisem */

/* čipy podkategorií: pětice pastelů jako na produkci (tam tmavé odstíny) */
body.com_virtuemart.view-category .ts-podkategorie .ts-cip:nth-child(5n+1) { --ts-cip-plocha: var(--ts-p-jantar); --ts-cip-text: var(--ts-p-jantar-t); }
body.com_virtuemart.view-category .ts-podkategorie .ts-cip:nth-child(5n+2) { --ts-cip-plocha: var(--ts-p-mata);   --ts-cip-text: var(--ts-p-mata-t); }
body.com_virtuemart.view-category .ts-podkategorie .ts-cip:nth-child(5n+3) { --ts-cip-plocha: var(--ts-p-losos);  --ts-cip-text: var(--ts-p-losos-t); }
body.com_virtuemart.view-category .ts-podkategorie .ts-cip:nth-child(5n+4) { --ts-cip-plocha: var(--ts-p-nebe);   --ts-cip-text: var(--ts-p-nebe-t); }
body.com_virtuemart.view-category .ts-podkategorie .ts-cip:nth-child(5n+5) { --ts-cip-plocha: var(--ts-p-levand); --ts-cip-text: var(--ts-p-levand-t); }

/* ---------- karta produktu jako produkce: čtvercová jamka, cena + sklad v řádku, pilulka ---------- */
body.com_virtuemart .ts-karta .vm-product-media-container {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; position: relative;
}
body.com_virtuemart .ts-karta .vm-product-media-container { flex: 0 0 auto; min-height: 0; overflow: hidden; }
/* fotka absolutně uvnitř jamky — jinak ve flex sloupci karty roztáhne jamku podle své výšky a aspect-ratio neplatí */
body.com_virtuemart .ts-karta .vm-product-media-container > a { position: absolute; inset: 14px; display: flex; align-items: center; justify-content: center; }
body.com_virtuemart .ts-karta .vm-product-media-container img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
body.com_virtuemart .ts-karta .vm-price-desc,
body.com_virtuemart .ts-karta .vm-prices-info { display: none; }   /* „Vaše cena vč. DPH“ — produkce ho na kartě nemá */
body.com_virtuemart .ts-karta .ts-cena-radek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 8px; }
body.com_virtuemart .ts-karta .ts-cena-radek > div:first-child { margin: 0; }
body.com_virtuemart .ts-karta .ts-akce input.addtocart-button,
body.com_virtuemart .ts-karta .ts-akce .addtocart-button {
  border-radius: 999px !important;
  box-shadow: none !important;
  background: var(--ts-cerven) !important;
}

/* lišta řazení bez boxu, linky nahoře a dole */
body.com_virtuemart.view-category .orderby-displaynumber {
  background: transparent; box-shadow: none; border: 0;
  border-top: 1px solid var(--ts-linka, #ECE4DA); border-bottom: 1px solid var(--ts-linka, #ECE4DA);
  border-radius: 0; padding: 10px 0;
}

/* cena a tlačítko na stejné výšce ve všech kartách řádku (produkce) */
body.com_virtuemart .ts-karta { display: flex; flex-direction: column; height: 100%; }
body.com_virtuemart .ts-karta > [class^="vm-product-descr-container"] { flex: 1 1 auto; display: flex; flex-direction: column; }
body.com_virtuemart .ts-karta .ts-cena-radek { margin-top: auto; }
body.com_virtuemart .ts-karta .vm-product-descr-container-0 > h2,
body.com_virtuemart .ts-karta .vm-product-descr-container-1 > h2 { font-weight: 600; }
body.com_virtuemart .ts-karta .vm-product-descr-container-0 > h2 a,
body.com_virtuemart .ts-karta .vm-product-descr-container-1 > h2 a { color: var(--ts-inkoust); }

/* popis kategorie: větší a čitelný jako na produkci, těsně pod nadpisem */
body.com_virtuemart.view-category .category-view h1 { margin-bottom: 6px; }
body.com_virtuemart.view-category .category-view .category_description { font-size: 16px; line-height: 1.5; color: var(--ts-inkoust); max-width: 620px; margin: 0 0 18px; }
body.com_virtuemart.view-category .category-view .category_description p { margin: 0; }

/* detail: cena bez popisku „Vaše cena vč. DPH“ (DPH je vedle v .ts-dph), tlačítko v řádku s množstvím */
.ts-detail .ts-nakup .vm-price-desc { display: none; }
.ts-detail .ts-nakup-akce span.quantity-controls input.quantity-minus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12' stroke='%232A2440' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ts-detail .ts-nakup-akce span.quantity-controls input.quantity-plus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%232A2440' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ts-detail .ts-nakup-akce span.quantity-controls input.quantity-controls { padding: 0; box-shadow: none; }
.ts-detail .ts-nakup-akce .quantity-box { margin: 0; }
.com_virtuemart .ts-detail .ts-nakup-akce input.addtocart-button { box-shadow: none !important; }
.com_virtuemart .ts-detail .ts-nakup-akce input.addtocart-button { border-radius: 999px !important; }   /* user.css .btn, input[type=submit] → --rd-radius-sm */

/* titulka: dlaždice kategorií jako produkce — jednotná karta, pastel nese jen počet hraček */
.ts-dlazdice-polozka { background: var(--ts-plocha); border-color: var(--ts-ram); color: var(--ts-inkoust); }
.ts-dlazdice-polozka:hover, .ts-dlazdice-polozka:focus-visible { color: var(--ts-inkoust); }
.ts-dlazdice-pocet { color: var(--ts-cip-text, var(--ts-seda)); }

/* =====================================================================
   TITULKA — HRAVÝ ÚVOD A VĚKOVÉ KARTY (5. 10. 2026)
   Nahrazuje „Kolik je oslavenci?“ (`.ts-uvod`, `.ts-veky` výš už HTML
   nepoužívá). Hravý, ale čistý: paleta Pastelka, zaoblené tvary, jemné
   pohyby jen na hover a jen bez `prefers-reduced-motion`.
   ===================================================================== */

.ts-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 32px;
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, var(--ts-p-jantar) 0, transparent 34%),
    radial-gradient(circle at 92% 88%, var(--ts-p-nebe) 0, transparent 38%),
    radial-gradient(circle at 70% 8%, var(--ts-p-levand) 0, transparent 30%),
    #FFF6EC;
}

.ts-hero-nadpisek {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--ts-cerven-tma);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 2px 0 var(--ts-ram);
}

.ts-titulka .ts-hero h1 {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.05;
  max-width: 13ch;
}

/* vlnka pod zvýrazněným slovem */
.ts-titulka .ts-hero h1 .ts-akcent {
  text-decoration: underline wavy #FFC94D;
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
  text-decoration-skip-ink: none;
}

.ts-hero-text {
  margin: 16px 0 0;
  max-width: 44ch;
  color: var(--ts-seda);
  font-size: 17px;
}

.ts-hero-hledani {
  display: flex;
  max-width: 480px;
  margin: 24px 0 0;
  padding: 6px;
  border: 2px solid var(--ts-ram);
  border-radius: 999px;
  background: #fff;
  transition: border-color .2s;
}

.ts-hero-hledani:focus-within { border-color: var(--ts-cerven); }

.ts-hero-hledani input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--ts-inkoust);
  font-size: 16px;
  outline: 0;
}

.ts-hero-hledani button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ts-inkoust);
  color: #fff;
  font-family: var(--ts-d);
  font-weight: 600;
  cursor: pointer;
}

.ts-hero-hledani button:hover,
.ts-hero-hledani button:focus-visible { background: var(--ts-cerven); }

.ts-hero-akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 6px;
}

.ts-hero-odkaz {
  margin-top: 20px;
  color: var(--ts-inkoust);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ts-p-losos);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.ts-hero-odkaz:hover { color: var(--ts-cerven-tma); }

/* scéna: polaroidy kolem medvěda */
.ts-hero-scena {
  position: relative;
  width: min(100%, 500px);
  margin-left: auto;
  aspect-ratio: 10 / 9;
}

.ts-polaroid {
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  padding: 10px 10px 26px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(42, 36, 64, .12);
  transition: transform .3s ease;
}

.ts-polaroid-foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: var(--ts-jamka);
  mix-blend-mode: multiply;
}

.ts-polaroid-1 { top: 2%;    left: 2%;  transform: rotate(-6deg); }
.ts-polaroid-2 { top: 0;     right: 2%; transform: rotate(5deg); }
.ts-polaroid-3 { bottom: 0;  left: 6%;  transform: rotate(4deg); }
.ts-polaroid-4 { bottom: 3%; right: 0;  transform: rotate(-5deg); }

.ts-medved {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 28%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 14px rgba(196, 42, 39, .25));
}

.ts-tvar { position: absolute; z-index: 1; }
.ts-tvar-hvezda { top: -4px; left: 46%; width: 38px; }
.ts-tvar-kruh   { bottom: 38%; left: -10px; width: 30px; }
.ts-tvar-vlnka  { bottom: -4px; right: 40%; width: 64px; }

/* věkové karty */
.ts-vekovky-pozn { color: var(--ts-seda); font-size: 14px; }

.ts-vek-karty {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.ts-vek-karta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 22px 12px 18px;
  border-radius: 24px;
  background: var(--ts-v-plocha);
  color: var(--ts-v-text);
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.ts-vek-karta:hover,
.ts-vek-karta:focus-visible {
  color: var(--ts-v-text);
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(42, 36, 64, .12);
}

.ts-vek-ikona {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  padding: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
}

.ts-vek-nazev { font-family: var(--ts-d); font-size: 19px; font-weight: 700; line-height: 1.2; }
.ts-vek-roky  { font-size: 14px; font-weight: 600; }
.ts-vek-pocet { margin-top: 6px; font-size: 13px; opacity: .75; }

.ts-vek-karta:nth-child(5n+1) { --ts-v-plocha: var(--ts-p-jantar); --ts-v-text: var(--ts-p-jantar-t); }
.ts-vek-karta:nth-child(5n+2) { --ts-v-plocha: var(--ts-p-mata);   --ts-v-text: var(--ts-p-mata-t); }
.ts-vek-karta:nth-child(5n+3) { --ts-v-plocha: var(--ts-p-losos);  --ts-v-text: var(--ts-p-losos-t); }
.ts-vek-karta:nth-child(5n+4) { --ts-v-plocha: var(--ts-p-nebe);   --ts-v-text: var(--ts-p-nebe-t); }
.ts-vek-karta:nth-child(5n+5) { --ts-v-plocha: var(--ts-p-levand); --ts-v-text: var(--ts-p-levand-t); }

@media (prefers-reduced-motion: no-preference) {
  .ts-hero-scena:hover .ts-polaroid { transform: rotate(0deg) scale(1.02); }

  .ts-vek-karta:hover .ts-vek-ikona { animation: ts-zavrtet .5s ease; }

  .ts-tvar-hvezda { animation: ts-vznaset 5s ease-in-out infinite; }
  .ts-tvar-kruh   { animation: ts-vznaset 6s ease-in-out -2s infinite; }

  .ts-medved-oci { transform-origin: 100px 92px; animation: ts-mrknout 6s infinite; }
}

@keyframes ts-zavrtet { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 65% { transform: rotate(8deg); } }
@keyframes ts-vznaset { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes ts-mrknout { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

@media (max-width: 991.98px) {
  .ts-hero { grid-template-columns: minmax(0, 1fr); }
  .ts-hero-scena { max-width: 460px; width: 100%; margin: 0 auto; }
  .ts-vek-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .ts-hero { padding: 24px 18px; border-radius: 24px; }
  .ts-hero-text { font-size: 16px; }
  .ts-hero-hledani input { padding: 0 10px; }
  .ts-hero-hledani button { padding: 0 16px; }
  .ts-hero-odkaz { margin-top: 4px; }
  .ts-hero-akce { flex-direction: column; align-items: stretch; text-align: center; }

  /* Scéna na telefonu jen jako pruh s medvědem — fotky by odsunuly věk
     pod první obrazovku. */
  .ts-hero-scena { position: absolute; top: 14px; right: 12px; width: 84px; height: 84px; aspect-ratio: auto; margin: 0; }
  .ts-polaroid, .ts-tvar-kruh, .ts-tvar-vlnka { display: none; }
  .ts-medved { width: 72px; }
  .ts-tvar-hvezda { left: -6px; top: -4px; width: 22px; }
  .ts-hero-nadpisek { max-width: calc(100% - 76px); padding: 5px 12px; font-size: 12px; letter-spacing: 0; }

  /* věk: posuvný řádek karet, ať jsou všechny skupiny na jednom místě */
  .ts-vek-karty {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 4px 16px 8px;
  }
  .ts-vek-karty::-webkit-scrollbar { display: none; }
  .ts-vek-karta { flex: 0 0 138px; scroll-snap-align: start; padding: 16px 10px 14px; }
  .ts-vek-ikona { width: 60px; height: 60px; }
  .ts-vek-nazev { font-size: 17px; }
}

/* =====================================================================
   MEGA MENU — KOMPAKTNÍ A U KAŽDÉ HLAVNÍ KATEGORIE (5. 10. 2026)
   Panel: vlevo pastelová vizitka rubriky se „Zobrazit vše“, vpravo husté
   odkazy s barevnou tečkou; počet sloupců dává mega.php (mo-mega-sloupcu-N).
   Barva vizitky se střídá podle pořadí položky v liště.
   ===================================================================== */

.ts-podmenu-prepinac { display: none; }

@media (min-width: 992px) {
  .ts-hlavicka .mo-mega-menu > li:nth-child(5n+1) { --ts-m-plocha: var(--ts-p-losos);  --ts-m-text: var(--ts-p-losos-t); }
  .ts-hlavicka .mo-mega-menu > li:nth-child(5n+2) { --ts-m-plocha: var(--ts-p-jantar); --ts-m-text: var(--ts-p-jantar-t); }
  .ts-hlavicka .mo-mega-menu > li:nth-child(5n+3) { --ts-m-plocha: var(--ts-p-mata);   --ts-m-text: var(--ts-p-mata-t); }
  .ts-hlavicka .mo-mega-menu > li:nth-child(5n+4) { --ts-m-plocha: var(--ts-p-nebe);   --ts-m-text: var(--ts-p-nebe-t); }
  .ts-hlavicka .mo-mega-menu > li:nth-child(5n+5) { --ts-m-plocha: var(--ts-p-levand); --ts-m-text: var(--ts-p-levand-t); }

  .ts-hlavicka .rd-nav-menu .mo-mega-menu > li > .mod-menu__sub.mo-mega {
    grid-template-columns: 210px repeat(var(--ts-m-sloupcu, 4), minmax(0, 1fr));
    grid-auto-flow: row;
    align-content: start;
    gap: 2px 14px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px;
    border-radius: 0 0 24px 24px;
    background: #fff;
  }
  .ts-hlavicka .mo-mega.mo-mega-sloupcu-1 { --ts-m-sloupcu: 1; max-width: 470px !important; }
  .ts-hlavicka .mo-mega.mo-mega-sloupcu-2 { --ts-m-sloupcu: 2; max-width: 680px !important; }
  .ts-hlavicka .mo-mega.mo-mega-sloupcu-3 { --ts-m-sloupcu: 3; max-width: 860px !important; }

  /* vizitka rubriky */
  .ts-hlavicka .rd-nav-menu .mo-mega > .mo-mega-intro {
    display: flex;
    grid-row: 1 / span var(--ts-m-radku, 4);   /* přesně přes řádky odkazů — viz mega.php */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-right: 6px;
    padding: 14px 16px;
    border: 0;
    border-radius: 18px;
    background: var(--ts-m-plocha, var(--ts-p-losos));
    color: var(--ts-m-text, var(--ts-inkoust));
  }
  .ts-hlavicka .mo-mega > .mo-mega-intro strong {
    font-family: var(--ts-d);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.15;
    text-transform: none;
    color: inherit;
  }
  .ts-hlavicka .mo-mega > .mo-mega-intro span { font-size: 13px; color: inherit; opacity: .8; }
  .ts-hlavicka .rd-nav-menu .mo-mega > .mo-mega-intro a.mo-mega-vse {
    margin-top: auto;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--ts-m-text, var(--ts-inkoust));
    font-family: var(--ts-d);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: row;
  }
  .ts-hlavicka .rd-nav-menu .mo-mega > .mo-mega-intro a.mo-mega-vse::after { content: " →"; }
  .ts-hlavicka .rd-nav-menu .mo-mega > .mo-mega-intro a.mo-mega-vse:hover { padding-left: 16px; background: var(--ts-inkoust); color: #fff; }

  /* husté odkazy s tečkou */
  .ts-hlavicka .rd-nav-menu .mo-mega > li:not(.mo-mega-intro) { padding: 0; }
  .ts-hlavicka .rd-nav-menu .mo-mega > li:not(.mo-mega-intro) > a {
    display: flex;
    flex-direction: row;   /* user.css (millers) má column — tečka by byla nad textem */
    align-items: center;
    text-align: left;
    gap: 9px;
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.3;
  }
  .ts-hlavicka .rd-nav-menu .mo-mega > li:not(.mo-mega-intro) > a::before {
    content: "";
    flex: 0 0 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ts-m-text, var(--ts-cerven));
    opacity: .35;
    transition: transform .15s, opacity .15s;
  }
  .ts-hlavicka .rd-nav-menu .mo-mega > li:not(.mo-mega-intro) > a:hover { padding-left: 10px; background: var(--ts-m-plocha, var(--ts-podklad)); }
  .ts-hlavicka .rd-nav-menu .mo-mega > li:not(.mo-mega-intro) > a:hover::before { opacity: 1; transform: scale(1.3); }
  .ts-hlavicka .mo-mega .mo-mega-title { font-weight: 600; color: var(--ts-inkoust); }
}

/* mobil: podmenu se rozbaluje tlačítkem, ne celé najednou */
@media (max-width: 991.98px) {
  .ts-hlavicka .rd-nav-menu .mo-mega-menu > li.deeper { position: relative; }
  .ts-podmenu-prepinac {
    position: absolute;
    top: 4px;
    right: 8px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--ts-podklad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232A2440' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
    transition: transform .2s;
  }
  .ts-otevreno > .ts-podmenu-prepinac { transform: rotate(180deg); }
  .ts-hlavicka .rd-nav-menu .mo-mega-menu > li > .mod-menu__sub { display: none; }
  .ts-hlavicka .rd-nav-menu .mo-mega-menu > li.ts-otevreno > .mod-menu__sub { display: block; }
  .ts-hlavicka .rd-nav-menu .mo-mega > .mo-mega-intro { display: block; padding: 4px 0; }
  .ts-hlavicka .mo-mega > .mo-mega-intro strong,
  .ts-hlavicka .mo-mega > .mo-mega-intro span { display: none; }
  .ts-hlavicka .rd-nav-menu .mo-mega > .mo-mega-intro a.mo-mega-vse { font-weight: 700; color: var(--ts-cerven-tma); }
}

/* ---------- zápatí: sociální sítě jako ikony pod logem (5. 10. 2026) ---------- */
.rd-footer .ts-socialni { display: none; }   /* textové odkazy v modulu Kontakt — nahrazují je ikony */
.rd-footer .rd-footer-brand .ts-site { display: flex; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }   /* user.css nuluje okraje ul v zápatí */
.ts-sit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: transform .2s, background .2s;
}
.ts-sit:hover, .ts-sit:focus-visible { color: #fff; transform: translateY(-3px); }
.ts-sit-facebook:hover, .ts-sit-facebook:focus-visible { background: #1877F2; }
.ts-sit-instagram:hover, .ts-sit-instagram:focus-visible { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.ts-sit-youtube:hover, .ts-sit-youtube:focus-visible { background: #FF0000; }

/* =====================================================================
   PŘIHLÁŠENÍ A REGISTRACE — KOMPAKTNÍ KARTA NA STŘED (5. 10. 2026)
   Přihlášení (com_users login, reset, remind) 440 px, registrace VM
   (view=user) 880 px se dvěma sloupci. Pole už nejdou přes celou stránku.
   ===================================================================== */

.ts-ucet-karta,
body.com_users.view-reset .com-users-reset,
body.com_users.view-remind .com-users-remind,
body.com_users.view-registration .com-users-registration {
  max-width: 440px;
  margin: 24px auto 48px;
  padding: 32px;
  border: 1px solid var(--ts-ram);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(42, 36, 64, .07);
}
.ts-ucet-karta.ts-ucet-registrace { max-width: 880px; }

.ts-ucet-karta .page-header { margin: 0 0 18px; text-align: center; }
.ts-ucet-karta h1 { margin: 0; font-size: 30px; text-align: center; color: var(--ts-inkoust); }
.ts-ucet-karta h1::after { display: none; }
.ts-ucet-podtitul { margin: 6px auto 22px; max-width: 52ch; color: var(--ts-seda); text-align: center; }
.ts-ucet-podtitul a { color: var(--ts-cerven-tma); font-weight: 700; }

/* pole */
.ts-ucet-karta .control-group,
.ts-ucet-karta .form-group { margin-bottom: 14px; }
.ts-ucet-karta label { font-size: 14px; font-weight: 600; color: var(--ts-inkoust); }
.ts-ucet-karta input[type=text],
.ts-ucet-karta input[type=email],
.ts-ucet-karta input[type=password],
.ts-ucet-karta input[type=tel],
.ts-ucet-karta select {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--ts-ram);
  border-radius: 14px;
  background: var(--ts-podklad);
  font-size: 16px;
}
.ts-ucet-karta input:focus,
.ts-ucet-karta select:focus { border-color: var(--ts-cerven); background: #fff; box-shadow: 0 0 0 3px var(--ts-cerven-svit); outline: 0; }
.ts-ucet-karta .input-password-toggle { border-radius: 0 14px 14px 0; border-color: var(--ts-ram); }
.ts-ucet-karta .input-group { flex-wrap: nowrap; }
.ts-ucet-karta .input-group > input { flex: 1 1 auto; width: 1%; border-radius: 14px 0 0 14px; }
.ts-ucet-karta .input-group > .input-password-toggle { flex: 0 0 auto; min-height: 46px; border: 1.5px solid var(--ts-ram); border-left: 0; background: var(--ts-podklad); }

/* tlačítka: plná šířka, pilulka */
.ts-ucet-karta .com-users-login__submit button,
.ts-ucet-karta .rd-account-buttons .button[type=submit] {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px !important;
  background: var(--ts-cerven);
  box-shadow: none !important;
  color: #fff;
  font-family: var(--ts-d);
  font-size: 17px;
  font-weight: 600;
}
.ts-ucet-karta .com-users-login__submit button:hover,
.ts-ucet-karta .rd-account-buttons .button[type=submit]:hover { background: var(--ts-cerven-tma); }

/* odkazy pod přihlášením: drobné, bez rámečků list-group */
.ts-ucet-karta .com-users-login__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ts-ram);
  border-radius: 0;
}
.ts-ucet-karta .com-users-login__options .list-group-item {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ts-seda);
  font-size: 14px;
}
.ts-ucet-karta .com-users-login__options .com-users-login__register {
  flex-basis: 100%;
  margin-top: 6px;
  padding: 11px;
  border: 1.5px solid var(--ts-inkoust);
  border-radius: 999px;
  color: var(--ts-inkoust);
  font-weight: 700;
  text-align: center;
}
.ts-ucet-karta .com-users-login__options .com-users-login__register:hover { background: var(--ts-inkoust); color: #fff; }

/* registrace VM: dvě sekce vedle sebe uvnitř karty, tlačítka na střed */
.ts-ucet-registrace .rd-account-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  margin: 18px auto 0;
}
.ts-ucet-registrace .rd-account-buttons .button[type=reset] {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ts-seda);
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .ts-ucet-karta,
  body.com_users.view-reset .com-users-reset,
  body.com_users.view-remind .com-users-remind { margin: 12px 0 32px; padding: 22px 18px; border-radius: 22px; }
  .ts-ucet-karta h1 { font-size: 26px; }
}
.ts-ucet-karta .cf-turnstile { display: flex; justify-content: center; margin: 8px 0; }

/* =====================================================================
   TITULKA — VÝHODY JAKO TLAČÍTKA A SLIDER NOVINEK (5. 10. 2026)
   Pás výhod: místo jednoho růžového pruhu čtyři samostatné pastelové
   dlaždice; na titulce jsou to odkazy (override html/mod_semavyhody,
   cíl podle ikony). Novinky: `.row` z products.php jako posuvný řádek
   se scroll-snap, 5 karet na desktopu, šipky v hlavičce sekce.
   ===================================================================== */

.ts-pas-vyhod {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.ts-pas-vyhod .mod-semavyhody {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ts-pas-vyhod .semavyhody-polozka {
  --ts-v-plocha: var(--ts-p-nebe);
  --ts-v-text: var(--ts-p-nebe-t);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 12px 16px 12px 12px;
  border-radius: 999px;
  background: var(--ts-v-plocha);
  color: var(--ts-v-text);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.ts-pas-vyhod a.semavyhody-polozka:hover,
.ts-pas-vyhod a.semavyhody-polozka:focus-visible {
  color: var(--ts-v-text);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(42, 36, 64, .12);
}

.ts-pas-vyhod .semavyhody-ikona {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
}

.ts-pas-vyhod .semavyhody-ikona svg { width: 22px; height: 22px; }

.ts-pas-vyhod .semavyhody-titul { color: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; }
.ts-pas-vyhod .semavyhody-text  { color: inherit; opacity: .8; }

.ts-pas-vyhod a.semavyhody-polozka .semavyhody-titul::after { content: " →"; }

.ts-pas-vyhod .semavyhody-p-doprava { --ts-v-plocha: var(--ts-p-nebe);   --ts-v-text: var(--ts-p-nebe-t); }
.ts-pas-vyhod .semavyhody-p-vraceni { --ts-v-plocha: var(--ts-p-levand); --ts-v-text: var(--ts-p-levand-t); }
.ts-pas-vyhod .semavyhody-p-stit    { --ts-v-plocha: var(--ts-p-mata);   --ts-v-text: var(--ts-p-mata-t); }
.ts-pas-vyhod .semavyhody-p-hvezda,
.ts-pas-vyhod .semavyhody-p-prodejna { --ts-v-plocha: var(--ts-p-jantar); --ts-v-text: var(--ts-p-jantar-t); }

@media (prefers-reduced-motion: no-preference) {
  .ts-pas-vyhod a.semavyhody-polozka:hover .semavyhody-ikona { animation: ts-zavrtet .5s ease; }
}

/* slider novinek */
.ts-slider-ovladani { display: flex; align-items: center; gap: 8px; }
.ts-slider-ovladani .ts-vic { margin-right: 6px; }

.ts-slider-sipka {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ts-ram);
  border-radius: 50%;
  background: #fff;
  color: var(--ts-inkoust);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.ts-slider-sipka:hover:not(:disabled) { background: var(--ts-inkoust); color: #fff; }
.ts-slider-sipka:disabled { opacity: .35; cursor: default; }

.ts-titulka .ts-novinky .ts-slider > .row {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  margin: 0;
  padding: 4px 2px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ts-titulka .ts-novinky .ts-slider > .row::-webkit-scrollbar { display: none; }

.ts-titulka .ts-novinky .ts-slider > .row > .product {
  flex: 0 0 calc((100% - 4 * 14px) / 5);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

@media (max-width: 1199.98px) {
  .ts-titulka .ts-novinky .ts-slider > .row > .product { flex-basis: calc((100% - 3 * 14px) / 4); }
}

@media (max-width: 991.98px) {
  .ts-pas-vyhod .mod-semavyhody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-titulka .ts-novinky .ts-slider > .row > .product { flex-basis: calc((100% - 2 * 14px) / 3); }
}

@media (max-width: 767.98px) {
  .ts-slider-sipka, .ts-slider-ovladani .ts-vic + .ts-slider-sipka { display: none; }
  .ts-slider-ovladani .ts-vic { margin: 0; }
  .ts-titulka .ts-novinky .ts-slider > .row {
    gap: 10px;
    margin: 0 -16px;
    padding: 4px 16px 12px;
    scroll-padding: 0 16px;
  }
  .ts-titulka .ts-novinky .ts-slider > .row > .product { flex-basis: 46%; }
}

@media (max-width: 575.98px) {
  .ts-pas-vyhod .mod-semavyhody { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* =====================================================================
   INFORMAČNÍ STRÁNKY — DVA SLOUPCE (5. 10. 2026)
   Kontakty, O nás a Doprava a platba mají přepsané HTML (zdroj
   tools/clanky/*.html, do DB je dává tools/obsah-z-ts_old.sh): obal
   `.ts-info`, mřížka `.ts-2sl`, pastelové bloky `.ts-blok-<barva>`.
   Stránka s `.ts-info` dostane širší sloupec než 900 px u podmínek.
   ===================================================================== */

.com-content-article.item-page:has(.ts-info) { max-width: 1140px; }

.ts-info { display: flex; flex-direction: column; gap: 22px; }
.ts-info > h2 { margin: 14px 0 0; }

.ts-info-perex { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ts-inkoust); }

.ts-info-nadpisek {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--ts-cerven);
  font-size: 13px;
  font-weight: 700;
}

.ts-info-pozn { font-size: 14px; opacity: .8; }

.ts-2sl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.ts-blok {
  --ts-b-plocha: #fff;
  --ts-b-text: var(--ts-inkoust);
  padding: 22px 24px;
  border-radius: 24px;
  background: var(--ts-b-plocha);
  color: var(--ts-b-text);
}

.ts-blok > :last-child { margin-bottom: 0; }
.ts-blok h2, .ts-blok h3 { margin-top: 0; color: inherit; }
.item-page .ts-blok a:not(.ts-info-tlacitko) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.ts-blok-jantar { --ts-b-plocha: var(--ts-p-jantar); --ts-b-text: var(--ts-p-jantar-t); }
.ts-blok-mata   { --ts-b-plocha: var(--ts-p-mata);   --ts-b-text: var(--ts-p-mata-t); }
.ts-blok-losos  { --ts-b-plocha: var(--ts-p-losos);  --ts-b-text: var(--ts-p-losos-t); }
.ts-blok-nebe   { --ts-b-plocha: var(--ts-p-nebe);   --ts-b-text: var(--ts-p-nebe-t); }
.ts-blok-levand { --ts-b-plocha: var(--ts-p-levand); --ts-b-text: var(--ts-p-levand-t); }

.ts-info-tlacitko {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: 14px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ts-cerven);
  color: #fff;
  font-family: var(--ts-d);
  font-weight: 600;
  text-decoration: none;
}

.item-page .ts-info a.ts-info-tlacitko { color: #fff; text-decoration: none; }
.item-page .ts-info a.ts-info-tlacitko:hover,
.item-page .ts-info a.ts-info-tlacitko:focus-visible { background: var(--ts-cerven-tma); color: #fff; }
.ts-info-tlacitko::after { content: " →"; white-space: pre; }

.ts-info-foto { margin: 0; }
.ts-info-foto img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 14px 30px rgba(42, 36, 64, .14); }

/* kontakty */
.ts-kontakt-polozka { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .7); }
.ts-kontakt-polozka:first-of-type { border-top: 0; padding-top: 0; }
.ts-kontakt-popis { font-size: 14px; opacity: .8; }
.item-page .ts-blok a.ts-kontakt-velky { font-family: var(--ts-d); font-size: 24px; font-weight: 700; text-decoration: none; }

/* doprava */
.ts-zdarma {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  font-weight: 700;
}

.ts-metoda { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .8); }
.ts-metoda h3 { margin-bottom: 4px; font-size: 17px; }
.ts-metoda p { margin: 0 0 4px; }
.ts-metoda-cena { font-weight: 700; }

.ts-platebni-loga { margin: 0; text-align: center; }
.ts-platebni-loga img { max-width: 640px; width: 100%; height: auto; }

/* o nás */
.ts-onas-uvod { align-items: center; gap: 36px; }
.ts-onas-uvod h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.ts-onas-uvod .ts-info-foto img { transform: rotate(2deg); }
.ts-onas-uvod .ts-info-perex { margin-bottom: 14px; }
.item-page ul.ts-cisla { padding: 0; margin-left: 0; }
.item-page ul.ts-cisla li { margin: 0; }

.ts-cisla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.ts-cisla li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 10px;
  border-radius: 22px;
  background: var(--ts-b-plocha);
  color: var(--ts-b-text);
  text-align: center;
}

.ts-cisla strong { font-family: var(--ts-d); font-size: 30px; line-height: 1.1; }
.ts-cisla span { font-size: 14px; }

.ts-vyhody-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ts-vyhody-mrizka .ts-blok { padding: 18px 20px; border: 1px solid var(--ts-ram); }
.ts-vyhody-mrizka h3 { font-size: 17px; margin-bottom: 4px; }
.ts-vyhody-mrizka p { margin: 0; font-size: 15px; }

.ts-onas-prodejna { align-items: center; gap: 28px; padding: 28px; }
.ts-onas-prodejna h2 { margin-bottom: 10px; }

@media (max-width: 991.98px) {
  .ts-vyhody-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-cisla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .ts-2sl, .ts-vyhody-mrizka { grid-template-columns: minmax(0, 1fr); }
  .ts-blok, .ts-onas-prodejna { padding: 18px; border-radius: 20px; }
  .ts-info-perex { font-size: 16px; }
  .ts-onas-uvod .ts-info-foto img { transform: none; }
  .item-page .ts-blok a.ts-kontakt-velky { font-size: 21px; }
}