/* ============================================================
   TWIKO · twiko-vypis-4.css · v4 · 18. 09. 2026
   v4: krátký popis na kartě (p-desc) do mřížky nepatří, karta má fotku,
   název, dostupnost, prodejny a cenu.

   TWIKO · twiko-vypis-3.css · v3 · 18. 09. 2026
   v3: drobečková navigace jako prostá textová cesta (nativně je to bílý pruh
   s lomenými čárkami a domečkem z ikonového fontu) a dotažený panel kategorií
   (linka pod nadpisem, vodicí linka otevřené větve, rozplynutá spodní hrana).

   TWIKO · twiko-vypis-2.css · v2 · 18. 09. 2026
   v2: strom kategorií podle skutečného DOM Shoptetu (hlavní kategorie je
   v .topic, ne v li), šipka z nativního .cat-trigger, zvýraznění jen
   nejhlubší aktivní kategorie a vzhled prázdné kategorie.

   TWIKO · twiko-vypis-1.css · v1 · 18. 09. 2026
   JEDEN vzhled pro VŠECHNY výpisy produktů: kategorie, výsledky
   hledání, značka, novinky, akce. Dřív se kategorie a hledání
   dělaly zvlášť a vzhled se rozešel, proto je tu jediný soubor
   a jediný skript (twiko-vypis-1.js), který si stránku označí
   třídou html.tw-vypis a atributem data-tw-list.

   Stylujeme NATIVNÍ DOM Shoptetu (template-11), nic nepřestavujeme:
   #products.products-block > .product > .p > a.image + .p-in
   (.p-in-in > a.name + .ratings-wrapper > .availability,
    .p-bottom > [data-micro=offer] > .prices + .p-tools) + .p-code
   Díky tomu funguje dál nativní filtrování, řazení i stránkování.

   Tokeny: twiko-base-5.css. Kontrasty ověřené: ink na krémové 5,95,
   dim na bílé 5,69, bílá na akční oranžové 4,74.
   ============================================================ */

/* ---------- 1) Plocha stránky ---------- */
html.tw-vypis body { background: var(--tw-ground); }
.tw-vypis #content-wrapper,
.tw-vypis main#content { background: transparent; }
.tw-vypis .container { font-family: var(--tw-sans); }
.tw-vypis h1,
.tw-vypis h2,
.tw-vypis h3,
.tw-vypis h4 {
  font-family: var(--tw-serif);
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--tw-ink);
}
.tw-vypis .breadcrumbs,
.tw-vypis .breadcrumbs a {
  font: 400 13px/1.5 var(--tw-sans);
  color: var(--tw-dim);
}
/* Nativně je to bílý pruh s linkou, lomenými čárkami z pseudoprvků a domečkem
   z ikonového fontu. U nás prostá textová cesta na krémové ploše. */
.tw-vypis .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 12px 0 2px;
  border: 0;
  background: transparent;
}
.tw-vypis .breadcrumbs > span {
  display: inline-flex;
  align-items: center;
}
.tw-vypis .breadcrumbs > span > a,
.tw-vypis .breadcrumbs > span > span {
  display: block;
  min-height: 0;
  padding: 2px 0;
}
.tw-vypis .breadcrumbs > span > a::before,
.tw-vypis .breadcrumbs > span > a::after { content: none; }
.tw-vypis .breadcrumbs .navigation-bullet {
  display: block;
  padding: 0 9px;
  color: var(--tw-line);
}
/* domeček z ikonového fontu ven, místo něj slovo Domů, které je v DOM pro čtečky */
.tw-vypis .breadcrumbs.navigation-home-icon-wrapper::before,
.tw-vypis .breadcrumbs .navigation-home-icon::before { content: none; }
.tw-vypis .breadcrumbs .navigation-home-icon {
  padding: 2px 0;
  color: var(--tw-dim);
}
.tw-vypis .breadcrumbs .navigation-home-icon .sr-only {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
}
.tw-vypis .breadcrumbs a:hover {
  color: var(--tw-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tw-vypis .breadcrumbs > span:last-child > span[itemprop="name"] {
  color: var(--tw-ink);
  font-weight: 500;
}

/* ---------- 2) Hlavička výpisu ---------- */
.tw-vypis .category-top,
.tw-vypis .search-results > h4,
.tw-vypis #content > h2 { margin-bottom: 18px; }
.tw-vypis .category-top h1,
.tw-vypis #content > h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
}
.tw-vypis #content > h2 .highlight { color: var(--tw-act); }
.tw-vypis .category-perex,
.tw-vypis .category-top .description {
  max-width: 760px;
  font: 400 16px/1.6 var(--tw-sans);
  color: var(--tw-dim);
}
/* podkategorie pod nadpisem: bez vlastního obrázku štítky (obrázek odebírá JS),
   s obrázkem nativní dlaždice v našem kabátě */
.tw-vypis .subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.tw-vypis .subcategories > li {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  list-style: none;
}
.tw-vypis .subcategories.tw-bez-obrazku li a {
  display: inline-flex;
  align-items: center;
  height: auto;                            /* nativně 51 px pro dlaždici s obrázkem */
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--tw-line);
  border-radius: 999px;
  background: #FFFFFF;
  font: 500 14px/1.2 var(--tw-sans);
  color: var(--tw-ink);                    /* 5,95 na krémové */
  white-space: nowrap;
  text-decoration: none;
  transition:
    border-color .18s cubic-bezier(.4, 0, .2, 1),
    background-color .18s cubic-bezier(.4, 0, .2, 1),
    color .18s cubic-bezier(.4, 0, .2, 1);
}
/* nativní šipka z ikonového fontu uvnitř štítku dělá zmatek, štítek mluví sám */
.tw-vypis .subcategories.tw-bez-obrazku li a::before { content: none; }
/* nativní .text je uvnitř dlaždice oříznutý na 75 % šířky, ve štítku chceme celý název */
.tw-vypis .subcategories.tw-bez-obrazku li a .text {
  width: auto;
  max-height: none;
  padding-left: 0;
  overflow: visible;
  text-overflow: clip;
}
.tw-vypis .subcategories.tw-bez-obrazku li a:hover {
  border-color: var(--tw-ink);
  background: var(--tw-ink);
  color: #FFFFFF;                          /* 6,47 */
}
.tw-vypis .subcategories:not(.tw-bez-obrazku) > li { width: 168px; }
.tw-vypis .subcategories:not(.tw-bez-obrazku) a {
  display: block;
  padding: 10px;
  border-radius: var(--tw-r);
  background: #FFFFFF;
  box-shadow: var(--tw-shadow-card);
  font: 500 14px/1.3 var(--tw-sans);
  color: var(--tw-ink);
  text-align: center;
  text-decoration: none;
}
.tw-vypis .subcategories:not(.tw-bez-obrazku) a:hover { box-shadow: var(--tw-shadow-card-h); }
.tw-vypis .subcategories .text { display: block; }

/* nativní „nejprodávanější" uvnitř hlavičky kategorie do výpisu nepatří */
.tw-vypis .category-top .products-block,
.tw-vypis .category-top .products-top { display: none; }

/* ---------- 3) Rozvržení: nativní postranní panel vlevo, karty vpravo ----------
   Shoptet dává na kategorii aside.sidebar (kategorie, filtry, top produkty)
   a main#content vedle něj. Nepřestavujeme to, jen panelu dáme naše karty. */
.tw-vypis .content-wrapper-in {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.tw-vypis .sidebar {
  flex: 0 0 282px;
  width: 282px;
  max-width: 100%;
  padding: 0;
}
.tw-vypis main#content {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.tw-vypis .sidebar-inner {
  display: grid;
  gap: 18px;
}
.tw-vypis .sidebar .box {
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: var(--tw-r-lg);
  background: #FFFFFF;
  box-shadow: var(--tw-shadow-card);
}
.tw-vypis .sidebar .pageElement__heading,
.tw-vypis .sidebar h3,
.tw-vypis .sidebar h4 {
  margin: 0 0 12px;
  font: 700 12px/1.3 var(--tw-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-dim);
}
.tw-vypis .skip-link__wrapper { display: none; }
/* strom kategorií v panelu */
/* nadpis panelu kategorií oddělíme linkou, ať strom nezačíná „ve vzduchu" */
.tw-vypis .sidebar .box-categories .pageElement__heading {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tw-line);
}
.tw-vypis #categories {
  max-height: min(68vh, 620px);            /* rozbalená je jen aktivní větev, zbytek otevře přepínač */
  overflow-y: auto;
  /* nativní odkazy přesahují zápornými okraji do paddingu boxu, scroll kontejner
     je proto musí obsáhnout, jinak je ořízne zleva */
  margin: 0 -20px;
  padding: 0 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--tw-line) transparent;
}
.tw-vypis #categories::-webkit-scrollbar { width: 6px; }
.tw-vypis #categories::-webkit-scrollbar-track { background: transparent; }
.tw-vypis #categories::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--tw-line);
}
/* dokud je kam rolovat (třídu dává JS), spodní hrana se rozplyne */
.tw-vypis #categories.tw-lze-dolu {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}
.tw-vypis #categories .categories + .categories { margin-top: 2px; }
/* otevřená větev drží pohromadě vodicí linkou */
.tw-vypis #categories .categories > ul {
  margin: 2px 0 8px 14px;
  border-left: 1px solid var(--tw-line);
}
.tw-vypis #categories .categories > ul > li > ul {
  margin: 2px 0 4px 12px;
  border-left: 1px solid var(--tw-line);
}
.tw-vypis #categories ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tw-vypis #categories li { margin: 0; }
.tw-vypis #categories a {
  position: relative;
  display: block;
  margin: 0;                               /* nativně mají záporné okraje a scroll je ořízne */
  padding: 7px 10px;
  border-radius: 9px;
  font: 400 14.5px/1.35 var(--tw-sans);
  color: var(--tw-ink);
  transition: background-color .18s cubic-bezier(.4, 0, .2, 1);
}
.tw-vypis #categories a:hover { background: var(--tw-ground); }
/* hlavní kategorie je v nativním DOM v div.topic, podkategorie až v ul pod ním */
.tw-vypis #categories .topic > a { font-weight: 600; }
.tw-vypis #categories ul a {
  padding-left: 14px;
  font-size: 13.5px;
  color: var(--tw-dim);
}
.tw-vypis #categories ul ul a { padding-left: 14px; }
/* Shoptet značí jako .active celou cestu, zvýrazní se jen nejhlubší (.tw-akt z JS) */
.tw-vypis #categories a.tw-akt {
  background: var(--tw-ink);
  color: #FFFFFF;                          /* 6,47 */
  font-weight: 600;
}
.tw-vypis #categories a.tw-akt:hover { background: var(--tw-ink-h); }
/* Přepínač větve: nativně je to span vlevo s plus/minus z ikonového fontu Shoptetu
   (#categories .expandable>.topic>a>span). Přesouváme ho doprava a měníme na šipku,
   jakou má mega menu v hlavičce. Klik obsluhuje dál Shoptet. */
.tw-vypis #categories .expandable > .topic > a,
.tw-vypis #categories li.expandable > a { padding-right: 34px; }
.tw-vypis #categories .expandable > .topic > a > .cat-trigger,
.tw-vypis #categories .expandable > a > .cat-trigger {
  top: 50%;
  right: 4px;
  left: auto;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
}
.tw-vypis #categories .expandable > .topic > a > .cat-trigger::before,
.tw-vypis #categories .expandable > a > .cat-trigger::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 7px;
  height: 7px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  opacity: .55;
  transform: rotate(45deg);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), opacity .18s;
}
.tw-vypis #categories .cat-trigger:hover::before { opacity: 1; }
.tw-vypis #categories .expandable.expanded > .topic > a > .cat-trigger::before,
.tw-vypis #categories .expandable.expanded > a > .cat-trigger::before {
  top: 12px;
  transform: rotate(225deg);
}
/* kategorie bez podkategorií mají span prázdný, šipku u nich nechceme */
.tw-vypis #categories li:not(.expandable) > a > .cat-trigger,
.tw-vypis #categories .categories:not(.expandable) > .topic > a > .cat-trigger { display: none; }
/* Top 10 v panelu zatím nezobrazujeme, bestsellery má úvodní stránka */
.tw-vypis .box-topProducts { display: none; }
/* nativní box newslettery uvnitř výpisu: odběr řeší úvodní stránka */
.tw-vypis .box-newsletter,
.tw-vypis .custom-footer__newsletter,
.tw-vypis .newsletter-header { display: none; }
/* prázdné místo pro filtry nad výpisem (Shoptet ho nechá i když jsou v panelu) */
.tw-vypis #filters-wrapper:empty { display: none; }

/* ---------- 4) Lišta s počtem a řazením ---------- */
.tw-vypis #category-header {
  display: flex;
  background: transparent;                 /* nativně má šedý pruh, u nás leží na ploše */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tw-line);
}
.tw-vypis .listItemsTotal,
.tw-vypis .itemsTotal {
  font: 400 14px/1.4 var(--tw-sans);
  color: var(--tw-dim);
}
.tw-vypis .listItemsTotal strong,
.tw-vypis .itemsTotal strong {
  font-weight: 600;
  color: var(--tw-ink);
}
.tw-vypis .listSorting__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tw-vypis .listSorting__control {
  padding: 8px 14px;
  border: 1px solid var(--tw-line);
  border-radius: 999px;
  background: #FFFFFF;
  font: 500 13.5px/1.2 var(--tw-sans);
  color: var(--tw-ink);
  cursor: pointer;
  transition:
    background-color .18s cubic-bezier(.4, 0, .2, 1),
    border-color .18s cubic-bezier(.4, 0, .2, 1),
    color .18s cubic-bezier(.4, 0, .2, 1);
}
.tw-vypis .listSorting__control:hover { border-color: var(--tw-ink); }
.tw-vypis .listSorting__control--current,
.tw-vypis .listSorting__control[aria-disabled="true"] {
  border-color: var(--tw-ink);
  background: var(--tw-ink);
  color: #FFFFFF;                          /* 6,47 */
  cursor: default;
}

/* ---------- 5) Filtry ---------- */
.tw-vypis .sidebar .box-filters { position: sticky; top: calc(var(--tw-hdr-h, 128px) + 16px); }
.tw-vypis #filters {
  padding: 20px 20px 8px;
  border-radius: var(--tw-r-lg);
  background: #FFFFFF;
  box-shadow: var(--tw-shadow-card);
}
.tw-vypis #filters h4,
.tw-vypis #filters .filter-section > strong {
  margin: 0 0 10px;
  font: 700 12px/1.3 var(--tw-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-dim);
}
.tw-vypis .filter-section {
  padding: 16px 0;
  border-top: 1px solid var(--tw-line);
}
.tw-vypis .filter-section:first-child { border-top: 0; }
.tw-vypis #filters label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font: 400 14.5px/1.4 var(--tw-sans);
  color: var(--tw-ink);
  cursor: pointer;
}
/* zaškrtávátka nechává šablona vlastní (pseudo-prvek), nenutíme nativní,
   jinak by se ukázala dvakrát; jen barvu a rozestup */
.tw-vypis #filters input[type="checkbox"] { accent-color: var(--tw-ink); }
.tw-vypis #filters .count,
.tw-vypis #filters label span:last-child {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--tw-dim);
  font-variant-numeric: tabular-nums;
}
.tw-vypis #filters .slider-header {
  display: flex;
  justify-content: space-between;
  font: 500 13.5px/1.4 var(--tw-sans);
  color: var(--tw-ink);
}
.tw-vypis #filters .ui-slider {
  height: 5px;
  margin: 12px 4px 18px;
  border: 0;
  border-radius: 3px;
  background: var(--tw-soft);
}
.tw-vypis #filters .ui-slider .ui-slider-range { background: var(--tw-ink); }
.tw-vypis #filters .ui-slider .ui-slider-handle {
  width: 18px;
  height: 18px;
  top: -7px;
  border: 2px solid var(--tw-ink);
  border-radius: 50%;
  background: #FFFFFF;
}
.tw-vypis .toggle-filters,
.tw-vypis #filters a.chevron-after {
  font: 600 13.5px/1.3 var(--tw-sans);
  color: var(--tw-ink);
  border-bottom: 2px solid var(--tw-acc);
}
.tw-vypis .filters-unveil-button-wrapper { display: none; }
/* tlačítka ve spodní liště výpisu (Načíst další) a otevření filtrů */
.tw-vypis .listingControls .btn,
.tw-vypis #products-found > .btn,
.tw-vypis .filters-unveil-button-wrapper .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 2px solid var(--tw-ink);
  border-radius: 11px;
  background: transparent;
  font: 600 14.5px/1.2 var(--tw-sans);
  color: var(--tw-ink);
  text-transform: none;
  transition:
    background-color .18s cubic-bezier(.4, 0, .2, 1),
    color .18s cubic-bezier(.4, 0, .2, 1);
}
.tw-vypis .listingControls .btn:hover,
.tw-vypis #products-found > .btn:hover,
.tw-vypis .filters-unveil-button-wrapper .btn:hover {
  background: var(--tw-ink);
  color: #FFFFFF;
}

/* ---------- 6) Mřížka karet ---------- */
.tw-vypis #products.products-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
}
/* bez postranního panelu se vejdou čtyři karty, s panelem tři */
.tw-vypis:not([data-tw-panel]) #products.products-block { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tw-vypis #products .product {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}
.tw-vypis #products .product .p {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: var(--tw-r-lg);
  background: #FFFFFF;
  box-shadow: var(--tw-shadow-card);
  transition:
    transform .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}
.tw-vypis #products .product .p:hover {
  transform: translateY(-3px);
  box-shadow: var(--tw-shadow-card-h);
}
/* Obrázek absolutně v boxu pevné výšky: jinak řádek roste podle fotky */
.tw-vypis #products .product a.image {
  position: relative;
  display: block;
  height: 216px;
  margin: 0;
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r);
  background: #FFFFFF;
  overflow: hidden;
}
.tw-vypis #products .product a.image img {
  position: absolute;
  top: 14px;
  left: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  max-width: none;
  object-fit: contain;
}
.tw-vypis #products .p-in {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 14px 6px 4px;
}
.tw-vypis #products .p-in-in { flex: 1 1 auto; }
.tw-vypis #products .product a.name {
  /* pevný počet řádků, aby se karty v řadě srovnaly a název se neuřízl v půlce písmene
     (šablona dává odkazu display:flow-root, proto je selektor přes .product) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  min-height: 4.26em;
  max-height: 4.26em;
  margin-bottom: 10px;
  overflow: hidden;
  font: 500 15px/1.42 var(--tw-sans);
  color: var(--tw-ink);
}
.tw-vypis #products a.name:hover { color: var(--tw-ink-h); }
.tw-vypis #products .stars-placeholder,
.tw-vypis #products .p-code,
.tw-vypis #products .p-desc { display: none; }

/* dostupnost: tečka místo barevného textu od Shoptetu */
.tw-vypis #products .availability {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  font: 600 12.5px/1.3 var(--tw-sans);
  color: var(--tw-ink);
}
.tw-vypis #products .availability::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tw-ok);
}
.tw-vypis #products .availability.tw-av-no { color: var(--tw-dim); }
.tw-vypis #products .availability.tw-av-no::before { background: #C9C8D2; }
.tw-vypis #products .availability span { color: inherit; }

/* kde to zboží leží: dvě prodejny, doplňuje twiko-vypis-1.js z mapy skladů */
.tw-vypis .tw-kde {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 12px;
}
.tw-vypis .tw-kde span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1.3 var(--tw-sans);
  color: var(--tw-dim);
}
.tw-vypis .tw-kde span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tw-ok);
}
.tw-vypis .tw-kde span.tw-kde-no::before { background: #C9C8D2; }

.tw-vypis #products .prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 12px;
}
.tw-vypis #products .price-final,
.tw-vypis #products .price-final strong {
  font: 600 21px/1.1 var(--tw-sans);
  color: var(--tw-ink);
  font-variant-numeric: tabular-nums;
}
.tw-vypis #products .price-additional,
.tw-vypis #products .price-standard {
  font: 400 12.5px/1.3 var(--tw-sans);
  color: var(--tw-dim);
}
.tw-vypis #products .price-standard { text-decoration: line-through; }
.tw-vypis #products .p-bottom { margin-top: auto; }
.tw-vypis #products .p-tools {
  display: flex;
  gap: 8px;
}
.tw-vypis #products .p-tools .btn,
.tw-vypis #products .p-tools .add-to-cart-button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border: 2px solid var(--tw-act);
  border-radius: 11px;
  background: var(--tw-act);
  color: #FFFFFF;
  font: 600 14.5px/1.2 var(--tw-sans);
  text-transform: none;
  transition:
    background-color .18s cubic-bezier(.4, 0, .2, 1),
    border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.tw-vypis #products .p-tools .btn:hover,
.tw-vypis #products .p-tools .add-to-cart-button:hover {
  border-color: var(--tw-act-h);
  background: var(--tw-act-h);
}
/* štítky (Akce, Novinka, Tip) v rohu fotky */
.tw-vypis #products .flags {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tw-vypis #products .flags .flag,
.tw-vypis #products .flag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tw-warm);
  font: 700 11px/1.3 var(--tw-sans);
  letter-spacing: .04em;
  color: var(--tw-ink-h);                  /* 6,08 na Peach */
  text-transform: uppercase;
}

/* ---------- 7) Stránkování a spodní lišta ---------- */
.tw-vypis .listingControls,
.tw-vypis .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.tw-vypis .pagination a,
.tw-vypis .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--tw-line);
  border-radius: 10px;
  background: #FFFFFF;
  font: 600 14px/1 var(--tw-sans);
  color: var(--tw-ink);
}
.tw-vypis .pagination .active,
.tw-vypis .pagination a:hover {
  border-color: var(--tw-ink);
  background: var(--tw-ink);
  color: #FFFFFF;
}

/* ---------- 8) Výsledky hledání ---------- */
.tw-vypis .search-results-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-bottom: 26px;
  padding: 18px 22px;
  border-radius: var(--tw-r-lg);
  background: #FFFFFF;
  box-shadow: var(--tw-shadow-card);
}
.tw-vypis .search-results-group h4 {
  margin: 0 0 10px;
  font: 700 12px/1.3 var(--tw-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-dim);
}
.tw-vypis .search-results-group-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tw-vypis .search-results-group-list li { margin: 0; }
.tw-vypis .search-results-group-list a {
  display: inline-flex;
  padding: 7px 14px;
  border: 1px solid var(--tw-line);
  border-radius: 999px;
  background: #FFFFFF;
  font: 500 13.5px/1.2 var(--tw-sans);
  color: var(--tw-ink);
  transition: border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.tw-vypis .search-results-group-list a:hover { border-color: var(--tw-ink); }
.tw-vypis .search-products-heading {
  margin: 0 0 18px;
  font: 700 12px/1.3 var(--tw-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-dim);
}

/* ---------- 9) Prázdná kategorie a hledání bez výsledku ----------
   Shoptet vrací .category-perex.empty-content (kategorie) nebo .no-products.
   Bez produktů by stránka byla holý text uprostřed prázdné plochy. */
.tw-vypis .empty-content,
.tw-vypis .no-products {
  max-width: none;
  margin: 0;
  padding: 52px 28px 44px;
  border-radius: var(--tw-r-lg);
  background: #FFFFFF;
  box-shadow: var(--tw-shadow-card);
  text-align: center;
}
.tw-vypis .empty-content h2,
.tw-vypis .no-products h2 {
  margin: 0 0 8px;
  font-size: clamp(21px, 2.2vw, 25px);
}
.tw-vypis .empty-content p,
.tw-vypis .no-products p {
  max-width: 460px;
  margin: 0 auto 6px;
  font: 400 15px/1.6 var(--tw-sans);
  color: var(--tw-dim);
}
.tw-vypis .empty-content p:last-child { margin-top: 24px; }
/* hledání bez výsledku: nadpis nese sdělení, ne popisek sekce */
.tw-vypis .search-results-groups:empty { display: none; }
.tw-vypis[data-tw-empty] #products-found {
  padding: 44px 28px;
  border-radius: var(--tw-r-lg);
  background: #FFFFFF;
  box-shadow: var(--tw-shadow-card);
  text-align: center;
}
.tw-vypis[data-tw-empty] .search-products-heading {
  margin: 0;
  font: 600 clamp(19px, 2vw, 22px)/1.3 var(--tw-serif);
  letter-spacing: -.018em;
  text-transform: none;
  color: var(--tw-ink);
}
.tw-vypis .tw-tip {
  margin: 10px 0 0;
  font: 400 15px/1.6 var(--tw-sans);
  color: var(--tw-dim);
}
.tw-vypis .empty-content .btn,
.tw-vypis .no-products .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 24px;
  border: 0;
  border-radius: 11px;
  background: var(--tw-act);
  color: #FFFFFF;                          /* 4,74 */
  font: 600 15px/1.2 var(--tw-sans);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background-color .18s cubic-bezier(.4, 0, .2, 1);
}
.tw-vypis .empty-content .btn:hover,
.tw-vypis .no-products .btn:hover { background: var(--tw-act-h); }

/* ---------- 10) Zlomy ---------- */
@media (max-width: 1199px) {
  .tw-vypis .content-wrapper-in { gap: 22px; }
  .tw-vypis .sidebar {
    flex-basis: 240px;
    width: 240px;
  }
  .tw-vypis #products.products-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-vypis:not([data-tw-panel]) #products.products-block { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .tw-vypis .content-wrapper-in { display: block; }
  .tw-vypis .sidebar {
    width: auto;
    margin-bottom: 20px;
  }
  /* strom kategorií na mobilu nedává smysl, navigaci má vysouvací menu */
  .tw-vypis .box-categories { display: none; }
  .tw-vypis #filters-wrapper { position: static; }
  .tw-vypis .sidebar .box-filters { position: static; }
  /* filtry se na mobilu otevírají nativním tlačítkem */
  .tw-vypis .filters-unveil-button-wrapper {
    display: block;
    margin-bottom: 4px;
  }
  .tw-vypis .filters-unveil-button-wrapper .btn { width: 100%; }
  .tw-vypis:not([data-tw-panel]) #products.products-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tw-vypis #products.products-block,
  .tw-vypis:not([data-tw-panel]) #products.products-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .tw-vypis #products .product .p { padding: 8px; }
  .tw-vypis #products .product a.image { height: 150px; }
  .tw-vypis #products .product a.name {
    -webkit-line-clamp: 2;
    min-height: 2.84em;
    max-height: 2.84em;
    font-size: 14px;
  }
  .tw-vypis #products .prices {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .tw-vypis #products .price-final,
  .tw-vypis #products .price-final strong { font-size: 18px; }
  .tw-vypis #products .p-tools .btn { height: 38px; font-size: 13.5px; }
  .tw-vypis .tw-kde { gap: 2px 10px; }
  .tw-vypis #category-header {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tw-vypis #products .product .p,
  .tw-vypis .listSorting__control { transition: none; }
  .tw-vypis #products .product .p:hover { transform: none; }
}