/* ==========================================================
   BREADCRUMBS
========================================================== */

.breadcrumbs {
    background: var(--sh-color-bg) !important;

    /* main-14: font-weight:700 + letter-spacing:.8px — moc těžké a
       roztažené oproti zbytku webu, kde je i "bold" jen 405 a
       letter-spacing všude 0 */
    font-family: var(--sh-font-family-body);
    font-weight: var(--sh-font-weight-medium);
    letter-spacing: 0;
}

/* ==========================================================
   FILTRY – SBALOVACÍ SEKCE (accordion)
   Vyžaduje JS snippet vložený v adminu (vlastní kód hlavičky
   stránek) – bez něj zůstanou filtry normálně rozbalené.
========================================================== */

/* vlastní nadpis "Filtrace produktů" vložený přes JS
   (má i třídu pageElement__heading, aby seděl na Kategorie/Vyhledávání) */
.js-filters-collapse .filters-custom-heading {
    margin-top: 0 !important;
    margin-bottom: var(--sh-space-s);
    padding-top: var(--sh-space-s);

    font-size: var(--sh-text-xl);
    font-family: var(--sh-font-family-headings);
}

/* stejný odstup shora u nadpisu Vyhledávání */
.search-widget .pageElement__heading {
    padding-top: var(--sh-space-s);
}

/* schovat filtr "Na skladě" a "Cena" */
.js-filters-collapse .filter-section-boolean,
.js-filters-collapse .slider-wrapper {
    display: none !important;
}

/* pozadí filtrů splyne s okolím, pryč s čárou nad Značky */
.js-filters-collapse #filters,
.js-filters-collapse .filter-sections {
    background: transparent !important;
    border-top: none !important;
}

/* rozbalený box #filters – main-14 mu dává celý rámeček (border 1px)
   a padding 24px na všech stranách. Rámeček pryč, levý padding pryč,
   ať text sedí na stejné hraně jako nadpis "Filtrace produktů" nad ním */
#content #filters {
    border: none !important;
    padding-left: 0 !important;
}

/* main-14 dává každé hodnotě filtru (checkbox + label) 8px nahoře/dole
   navíc k vlastnímu řádkování – hodnoty pak byly zbytečně od sebe */
#content .filter-section fieldset div label:not(.advanced-parameter) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================
   FILTRY – TABLET/MOBIL (nativní "Otevřít filtr" tlačítko)
   Pod breakpointem, kde main-14 ještě nepřesune .filters-wrapper do
   .sidebar (tam už má sám od sebe text-align:left a schovaný
   unveil-button), main-14 dává .filters-wrapper text-align:center a
   ukáže vlastní plný "Otevřít filtr" blok. Sjednoceno na stejnou
   vizuální řeč jako desktopové "ROZBALIT FILTR" – prostý text s
   ikonou, bez pozadí/bloku, zarovnáno doleva. */
.filters-wrapper {
    text-align: left !important;
}

.filters-wrapper .filters-unveil-button-wrapper {
    display: inline-flex !important;
    width: auto !important;
    justify-content: flex-start !important;
    background: transparent !important;
    padding: 0 !important;
}

.filters-wrapper .filters-unveil-button-wrapper .btn.btn-default.unveil-button {
    background: transparent !important;
    border: none !important;
    color: var(--sh-color-accent) !important;
    padding: 0 !important;
    width: auto !important;
    text-transform: uppercase;
    font-weight: var(--sh-font-weight-bold);
}

/* ikona u "ROZBALIT FILTR" – radši úplně schovat, ne jen obarvit */
.filters-wrapper .filters-unveil-button-wrapper i {
    display: none !important;
}

/* oddělovací čáry mezi filtry – zkouška průhledné varianty */
#category-filter-hover .filter-section {
    border-top-color: transparent !important;
}

/* main-14 dává každé sekci filtru padding-bottom:16px – zbytečná
   mezera navíc pod (i tak dost velkým) nadpisem sekce */
.filter-sections .filter-section {
    padding-bottom: 0 !important;
}

/* větší odstup nad bloky Filtrace produktů a Vyhledávání */
.box-search,
.box-filters {
    margin-top: var(--sh-space-md) !important;
}

/* "Položek k zobrazení" – obyčejná textová barva místo modré */
.filter-total-count {
    color: var(--sh-color-text) !important;
    margin-top: var(--sh-space-sm);
}

/* zarovnat doleva odkazy "Rozbalit filtr" a "Vymazat filtry" */
.filter-section-button,
.filter-section-count p {
    text-align: left !important;
}

/* checkboxy filtrů – hranatý roh a naše světlá barva místo bílé */
.filter-label::before {
    border-radius: var(--sh-radius-md) !important;
    background: var(--sh-color-bg) !important;
}

/* main-14 dává zaškrtnutému filtru font-weight:700 (main-14.css:52) —
   tvrdých 700 je oproti zbytku webu moc těžkých, naše "bold" je 405 */
.filter-section label.active {
    font-weight: var(--sh-font-weight-bold) !important;
}

/* main-14 dává h4 uvnitř filtru pevných 24px shora, my o trochu méně */
.filter-sections .filter-section h4 {
    margin-top: var(--sh-space-sm) !important;
}

/* počet produktů u hodnoty filtru – bez bílého kolečka, jako v závorce */
.filter-count {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--sh-color-text) !important;
    font-weight: var(--sh-font-weight-body);
}

.filter-count::before {
    content: "(";
}

.filter-count::after {
    content: ")";
}

.js-filters-collapse .slider-wrapper > h4,
.js-filters-collapse .filter-section-manufacturer > h4,
.js-filters-collapse .filter-section-parametric > h4 {
    cursor: pointer;
    user-select: none;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0;

    /* stejný styl jako odkazy v seznamu kategorií (#categories a) */
    font-size: var(--sh-text-base);
    font-family: var(--sh-font-family-body);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

.js-filters-collapse .slider-wrapper > h4::after,
.js-filters-collapse .filter-section-manufacturer > h4::after,
.js-filters-collapse .filter-section-parametric > h4::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: var(--sh-space-xs);
    flex-shrink: 0;

    border-right: 1.5px solid var(--sh-color-cta);
    border-bottom: 1.5px solid var(--sh-color-cta);
    transform: rotate(-45deg);
    transition: var(--sh-transition);
}

/* rozbalený stav – šipka dolů */
.js-filters-collapse .slider-wrapper.is-expanded > h4::after,
.js-filters-collapse .filter-section-manufacturer.is-expanded > h4::after,
.js-filters-collapse .filter-section-parametric.is-expanded > h4::after {
    transform: rotate(45deg);
}

/* obsah sekce je ve výchozím stavu skrytý */
.js-filters-collapse .slider-wrapper > *:not(h4),
.js-filters-collapse .filter-section-manufacturer > *:not(h4),
.js-filters-collapse .filter-section-parametric > *:not(h4) {
    display: none;
}

/* po rozbalení se obsah zobrazí */
.js-filters-collapse .slider-wrapper.is-expanded > *:not(h4),
.js-filters-collapse .filter-section-manufacturer.is-expanded > *:not(h4),
.js-filters-collapse .filter-section-parametric.is-expanded > *:not(h4) {
    display: block;
}

/* odstup mezi nadpisem a hodnotami po rozbalení */
.js-filters-collapse .filter-section-manufacturer > form,
.js-filters-collapse .filter-section-parametric > form {
    padding-top: var(--sh-space-xs);
}

/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar-inner {
    margin: 0 !important;
    border: 1px solid var(--sh-color-border) !important;
    background: var(--sh-color-surface);
    padding: var(--sh-space-box) !important;
    box-sizing: border-box;
    border-radius: var(--sh-radius-md) !important;
}

.sidebar.sidebar-left {
    margin-right: var(--sh-space-box) !important;
}

.pageElement__heading{
    margin-top:0 !important;
    margin-bottom:var(--sh-space-sm) !important;

    font-size:var(--sh-text-xl);
    font-family:var(--sh-font-family-headings);
    font-weight:var(--sh-font-weight-heading);
    line-height:var(--sh-line-height-heading);
    color:var(--sh-color-text);
}

/* ---------- seznam kategorií ---------- */

#categories {
    font-weight: inherit;
}

#categories a{

    font-size:var(--sh-text-base);
    font-family:var(--sh-font-family-body);
    font-weight:var(--sh-font-weight-heading);
    color:var(--sh-color-text);
    transition:var(--sh-transition);

    border-radius:var(--sh-radius-md);
}


/* hover */

#categories a:hover {
    background: var(--sh-color-bg);
    color: var(--sh-color-text);
}

/* aktivní — nejvyšší úroveň i podkategorie mají dostat stejný vzhled.
   Shoptet zjevně značí "tady jsi" různě podle úrovně (.topic.active
   nahoře, jinam umístěná .active třída u vnořených položek), takže
   cílíme na víc možných tvarů najednou místo jednoho selektoru */
#categories li.active>a,
#categories a.active,
#categories .active>a{

    background:var(--sh-color-active) !important;
    color:var(--sh-color-text) !important;
    border-radius:var(--sh-radius-md);
    /* main-14 má #categories .categories .topic.active>a {font-weight:700}
       — vyšší specificita (3 třídy) porazí naše (1,1,1), takže bez
       !important by se pořád použilo tvrdých 700 */
    font-weight:var(--sh-font-weight-bold) !important;
}

/* podkategorie */

#categories ul a{

    font-weight:var(--sh-font-weight-body);
    color:var(--sh-color-text);
     padding-left:36px;
}

/* hover podkategorií */

#categories ul a:hover{

    background:var(--sh-color-bg);
    border-radius:var(--sh-radius-md);
}

/* Top produkty */

.top-products-wrapper {
    padding-top: var(--sh-space-sm);
}

.top-products-wrapper .pageElement__heading {
    margin-bottom: var(--sh-space-sm);
}

/* ==========================================================
CATEGORY HEADER
========================================================== */


.category-title {
    text-align: left !important;
    margin-bottom: var(--sh-space-sm);

    font-size: var(--sh-heading-md);
    line-height: var(--sh-line-height-heading);
    font-weight: var(--sh-font-weight-heading);
}

.category-perex,
.category__secondDescription {
    text-align: left !important;

    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    font-weight: var(--sh-font-weight-body);

    color: var(--sh-color-text);
}

.category-title .pagination-appendix{
    display:none !important;
}

.category-top {
    border-bottom: none !important;
}

/* ==========================================================
   CATEGORY SUBCATEGORIES
========================================================== */

ul.subcategories.with-image {
    justify-content: flex-start !important;
    margin-left: 0;

    /* main-14 nedává na tenhle ul žádný flex-wrap, jen na náš vlastní
       @media (max-width:991px) override níže — takže mezi 992px a
       skutečnou šířkou sloupce (když je užší než viewport, např. kvůli
       postrannímu sloupci s kategoriemi) se karty nemají jak zalomit
       a místo toho se všechny vměstnají vedle sebe (viz komentář u
       @media (max-width:991px) níže) */
    flex-wrap: wrap;
}

.subcategories.with-image > li {
    padding-left: 0;
    padding-right: var(--sh-space-sm);
}

.subcategories li a:before {
  padding-right: 12px !important;
}

/* schovat obrázek */
.subcategories.with-image li a .image {
    display: none;
}

/* kartička — zpátky na světlou (plná jedle na tolika kartičkách
   najednou působila těžce), zelená zůstává jen na hoveru */
.subcategories.with-image li a {
    justify-content: flex-start;
    background: var(--sh-color-surface);
    color: var(--sh-color-text);
    padding: 22px 18px !important;
    height: auto !important;
    border: 1px solid var(--sh-color-border) !important;
    border-radius: var(--sh-radius-md);
    box-shadow: none;
    transition: var(--sh-transition);
}

/* hover — zpátky na CTA (žádná samostatná "jedle" barva navíc) */
.subcategories.with-image li a:hover {
    background: var(--sh-color-cta);
    border-color: var(--sh-color-cta) !important;
    color: var(--sh-color-on-cta);
}

/* text */
/* stejný styl jako položky hlavního menu (.navigation-in > ul > li > a
   v header.css) — font body, ne headings, a VELKÁ PÍSMENA */
.subcategories.with-image li a .text,
.subcategories.with-image li a .text.text,
#content .subcategories.with-image li a .text {
    width: auto;
    flex: 1;
    padding-left: var(--sh-space-s);
    /* main-14 má na tenhle .text vlastní font-size se stejnou
       specificitou + !important (main-14.css:52) — obyčejné !important
       ani duplicitní třída to jistě nepřebily, možná má main-14 ještě
       vyšší specificitu (např. přes ID), kterou nevidíme lokálně.
       "#content ..." přidává ID do specificity, což porazí libovolný
       počet tříd bez ohledu na to, co přesně main-14 používá. */
    font-size: clamp(14px, 0.9vw, 16px) !important;
    font-family: var(--sh-font-family-body);
    font-weight: var(--sh-font-weight-body);
    text-transform: uppercase;
    /* 1 bylo moc těsné — s overflow:hidden (kvůli ellipsis) to nahoře
       ořezávalo háčky/čárky nad velkými písmeny (Č, Ě...). 1.3 dá
       diakritice dost místa a pořád je to citelně těsnější box než
       main-14 default. */
    line-height: 1.3;
    letter-spacing: 0;

    /* main-14 dává max-height:32px — u větší velikosti písma to
       zbytečně omezovalo výšku, tak pryč. Ale overflow:hidden necháváme
       (spolu s main-14 white-space:nowrap + text-overflow:ellipsis) —
       jinak se .text jako flex:1 položka nesmrskne pod obsah a dlouhý
       název kategorie přeteče přes kartu místo aby se zkrátil na "…" */
    max-height: none !important;
    overflow: hidden !important;
}


/* ==========================================================
CATEGORY SORTING
========================================================== */

.category-header {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: var(--sh-space-md);
  margin-bottom: var(--sh-space-md);
}

.listSorting.js-listSorting {
  width: 100%;
}

.listSorting__controls {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--sh-space-md);
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none;
}

.listSorting__controls li {
  list-style: none;
}

.listSorting__control {
  position: relative;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  padding: 0 0 var(--sh-space-xs) !important;

  font-family: var(--sh-font-family-body);
  font-size: var(--sh-text-base);
  line-height: var(--sh-line-height-body);
  font-weight: var(--sh-font-weight-body);

  color: var(--sh-color-text) !important;
  border-radius: 0 !important;
}

/* přejmenování textů */
.listSorting__control {
  font-size: 0;
}

.listSorting__control::after {
  font-size: var(--sh-text-base);
}

.listSorting__control[data-sort="price"]::after {
  content: "Od nejlevnějšího";
}

.listSorting__control[data-sort="-price"]::after {
  content: "Od nejdražšího";
}

.listSorting__control[data-sort="bestseller"]::after {
  content: "Oblíbené";
}

.listSorting__control[data-sort="name"]::after {
  content: "A–Z";
}

/* aktivní stav */
.listSorting__control--current,
.listSorting__control--current:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--sh-color-text) !important;
  font-weight: var(--sh-font-weight-heading) !important;
}

.listSorting__control--current::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--sh-color-accent);
}

/* hover */
.listSorting__control:hover {
  color: var(--sh-color-text) !important;
}


/* ==========================================================
   PRODUCT LIST 
========================================================== */


.products-block > div {
    padding: 24px 16px !important;
}


/*  SKRÝT KÓD A KRÁTKÝ POPIS  */

.category-content-wrapper .product .p-code,
.category-content-wrapper .product .p-desc{
    display:none !important;
}

/*  SCHOVAT PRÁZDNÉ MÍSTO PRO HODNOCENÍ */

.products.products-page .stars-placeholder{
    display:none !important;
    height:0 !important;
}

.products.products-page .ratings-wrapper{
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
}

/*  DALŠÍ PRODUKTY NAČTENÍ */

.listingControls{
    padding-top: var(--sh-space-md);
}


/*  LOAD MORE — sekundární akce (opakuje se, není hlavní CTA), obrys
    v inkoustové barvě místo plné výplně */

.loadMore__button{
    background:var(--sh-color-secondary-btn) !important;
    border:1.5px solid var(--sh-color-secondary-btn) !important;
    box-shadow:none !important;
    border-radius:var(--sh-radius-btn) !important;
    color:var(--sh-color-text) !important;
    transition:var(--sh-transition);
    font-weight: var(--sh-font-weight-heading);
    font-size:var(--sh-text-base);
    padding:12.5px 32px !important;
}

.loadMore__button:hover{
    background:var(--sh-color-cta) !important;
    border-color:var(--sh-color-cta) !important;
    color:var(--sh-color-on-cta) !important;
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}

/* ==========================================================
   PAGINATION
========================================================== */

.pagination{
    line-height:1 !important;
}

.pagination .pagination__link,
.pagination .pagination__currentPage{

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    border-radius:var(--sh-radius-btn) !important;
}

.pagination__link,
.pagination__currentPage{

    background:transparent !important;
    border:none !important;
    box-shadow:none !important;

    color:var(--sh-color-text) !important;

    transition:var(--sh-transition);
}

/* čísla stránek */
.pagination__link:not(.pagination__link--first):not(.pagination__link--last){
    background:var(--sh-color-cta-subtle) !important;
}

/* aktivní stránka = stejná jako ostatní */
.pagination__currentPage{
    background:transparent !important;
    color:var(--sh-color-text) !important;
}

/* hover */
.pagination__link:hover,
.pagination__currentPage:hover{
    color:var(--sh-color-accent) !important;
}

/* první a poslední stránka */
.pagination__link--first,
.pagination__link--last{
    background:transparent !important;
}

.pagination__link--first:hover,
.pagination__link--last:hover{
    background:var(--sh-color-cta) !important;
    color:var(--sh-color-on-cta) !important;
}
/* ==========================================================
   GO TO TOP
========================================================== */

.goToTop .btn{
    background:none !important;
    border:none !important;
    border-radius:0 !important;

    padding:12px 0px !important;

    color:var(--sh-color-text) !important;
    font-size:var(--sh-text-base);
    font-weight: var(--sh-font-weight-heading);

    display:inline-flex;
    align-items:center;
    gap:8px;

    text-decoration:none !important;
    transition:var(--sh-transition);
}

.goToTop .btn:hover{
    color:var(--sh-color-accent) !important;
}


/* ==========================================================
   VÝSLEDKY VYHLEDÁVÁNÍ
========================================================== */

/* main-14 centruje ".content>h2" i skupinové nadpisy/odkazy uvnitř
   výsledků hledání (stejné pravidlo jako u .category-title výše:
   ".category-title, .content-inner>h1, .content>h2, article header h1
   {text-align:center}") - na stránce vyhledávání ("Výsledky vyhledávání",
   "Články", "Produkty" + odkaz na článek) chceme všechno doleva. */
#content.content > h2{
    text-align:left !important;
}

.search-results-groups h1,
.search-results-groups h2,
.search-results-groups h3,
.search-results-groups h4,
.search-results-groups p,
.search-results-groups a,
#products-found h1,
#products-found h2,
#products-found h3,
#products-found h4{
    text-align:left !important;
}


.itemsTotal{
    display:none;
}

/* ==========================================================
   RESPONZIVITA
========================================================== */


/* ==========================================================
   CATEGORY SUBCATEGORIES – TABLET + MOBILE
========================================================== */

@media (max-width: 991px){

    ul.subcategories.with-image{
        display:flex !important;
        flex-wrap:wrap !important;

        width:100% !important;

        margin-left:0 !important;
        margin-right:0 !important;

        padding-left:0 !important;
        padding-right:0 !important;

        gap:var(--sh-space-sm);
    }

    .subcategories.with-image > li{
        flex:0 0 calc(50% - (var(--sh-space-sm) / 2)) !important;
        width:calc(50% - (var(--sh-space-sm) / 2)) !important;
        max-width:calc(50% - (var(--sh-space-sm) / 2)) !important;

        margin:0 !important;
        padding:0 !important;
    }

    .subcategories.with-image > li > a{
        width:100% !important;
        height:100%;
    }

}

/* ==========================================================
   CATEGORY SORTING – TABLET
========================================================== */

@media (max-width: 991px){

    .listSorting__controls{
        column-gap:12px;
        row-gap:8px;
    }

}

/* ==========================================================
   CATEGORY SORTING – MOBILE
========================================================== */

@media (max-width: 767px){

    .listSorting__controls{
        column-gap:10px;
        row-gap:6px;
    }

}


/* ==========================================================
   CATEGORY SUBCATEGORIES – MOBILE
========================================================== */

@media (max-width: 767px){

    .subcategories.with-image > li{
        flex:0 0 100% !important;
        width:100% !important;
        max-width:100% !important;
    }

}

/* ==========================================================
   CATEGORY – LOAD MORE TABLET
========================================================== */

@media (max-width: 991px){

    .loadMore{
        justify-content:flex-start;
    }

    .loadMore__button{
        width:auto !important;
        padding:14px 32px !important;
        flex:none !important;
    }

}

/* ==========================================================
   CATEGORY PRODUCTS – MOBILE
========================================================== */

@media (max-width: 767px){

    .products-block > div{
        padding:20px 8px !important;
    }

}

/* ==========================================================
   CATEGORY LISTING CONTROLS – MOBILE
========================================================== */

@media (max-width: 767px){

    /* zrušit horní odsazení */
    .listingControls{
        padding-top:0;
    }

    /* vše doleva */
    .loadMore,
    .pagination,
    .goToTop{
        justify-content:center;
    }

    /* menší mezery mezi bloky */
    .listingControls{
        gap:12px;
    }

    /* menší stránkování */
    .pagination .pagination__link,
    .pagination .pagination__currentPage{

        min-height:40px;
        height:40px;
        min-width:40px;

        padding:0 12px;

        font-size:14px;
    }

    /* šipky budou čtvercové */
    .pagination .pagination__link--prev,
    .pagination .pagination__link--next,
    .pagination .pagination__link--first,
    .pagination .pagination__link--last{
        padding:0;
    }

}

/* ==========================================================
   MOBILE – SKRÝT PAGINATION
========================================================== */

@media (max-width: 767px){

    .listingControls .pagination{
        display:none !important;
    }

}

/* ==========================================================
   CATEGORY SUBCATEGORIES – TABLET + MOBILE
========================================================== */

@media (max-width: 991px) {

    .subcategories.with-image li a {

        height: auto !important;
        min-height: 0 !important;

        padding: 16px 14px !important;

        display: flex;
        align-items: center;
    }

}

/* ==========================================================
   USP ŘÁDEK (vlastní HTML blok na kategorii)
   4 karty ikona + nadpis + text, znovupoužité .sh-delivery-feature
   z homepage.css (stejný recept jako .sh-page__delivery-row v
   pages.css) – jen vlastní 4sloupcová mřížka a ikony podle pořadí
   karty. Bez podbarveného boxu – stejné holé pozadí jako "Neplaťte
   za to, co nepotřebujete" řádek na homepage. Ikony jako CSS
   mask-image, ne inline <svg> – Shoptetův editor při uložení <svg>
   z HTML odstraňuje (viz CLAUDE.md). Poslední karta (Výhody pro
   členy) má .sh-delivery-feature__link – stejný odkaz se šipkou
   jako "Jak balíme produkty →" / "To mě zajímá →" na homepage,
   ne plné tlačítko.
========================================================== */

.sh-category-usp {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sh-space-md);

    margin-top: var(--sh-space-lg);
    margin-bottom: var(--sh-space-lg);
}

/* 4 užší sloupce než homepage originál (3) – --sh-heading-sm by se
   zalamoval na 2 řádky u delších titulků ("Výhody pro členy"),
   o stupeň menší --sh-text-xl se vejde na jeden řádek */
.sh-category-usp .sh-delivery-feature__title {
    font-size: var(--sh-text-xl);
}

.sh-category-usp .sh-delivery-feature__icon {
    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 1. karta – Doprava zdarma – truck (Lucide, ISC) */
.sh-category-usp .sh-delivery-feature:nth-child(1) .sh-delivery-feature__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}

/* 2. karta – Sleva 5 % – percent (Lucide, ISC) */
.sh-category-usp .sh-delivery-feature:nth-child(2) .sh-delivery-feature__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
}

/* 3. karta – Posíláme do 2 dnů – calendar-check (Lucide, ISC) */
.sh-category-usp .sh-delivery-feature:nth-child(3) .sh-delivery-feature__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E");
}

/* 4. karta – Pro firmy – store (Lucide, ISC) */
.sh-category-usp .sh-delivery-feature:nth-child(4) .sh-delivery-feature__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E");
}

/* odkaz „Ozvěte se →“ v USP řádku: běžný řez místo tučného, šipka jako
   znak → v nadpisovém písmu (ikonový font šablony je tlustší a
   vypadá jinak než šipky jinde na webu) */
.sh-category-usp .sh-delivery-feature__link {
    font-weight: var(--sh-font-weight-body);
}

.sh-category-usp .sh-delivery-feature__link i {
    display: none;
}

.sh-category-usp .sh-delivery-feature__link::after {
    content: "→";
    margin-left: .4em;
    font-family: var(--sh-font-family-headings);
    transition: var(--sh-transition);
}

.sh-category-usp .sh-delivery-feature__link:hover::after {
    transform: translateX(4px);
}

/* ==========================================================
   USP ŘÁDEK – TABLET + MOBILE
========================================================== */

@media (max-width: 991px) {

    .sh-category-usp {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--sh-space-lg);
    }

}

@media (max-width: 767px) {

    .sh-category-usp {
        grid-template-columns: 1fr;

        margin-top: var(--sh-space-section-mobile);
        margin-bottom: var(--sh-space-section-mobile);

        row-gap: var(--sh-space-md);
    }

}

/* ==========================================================
   KATEGORIE — VĚTŠÍ NADPIS A NÁZVY PRODUKTŮ
   H1 kategorie ve stejné velikosti jako H1 stránek a hera
   (--sh-heading-display, base.css); názvy produktů v kartách v
   nadpisovém písmu a ve velikosti nadpisů karet (--sh-heading-card),
   dřív 14,6 px Arial.
========================================================== */

h1.category-title,
.category-top > h1 {
    font-size: var(--sh-heading-display);
    line-height: 1;
    text-wrap: balance;
}

@media (max-width: 767px) {
    h1.category-title,
    .category-top > h1 {
        font-size: var(--sh-heading-display-mobile);
    }
}

.products .product .p .name,
.products .product .p .name span {
    font-family: var(--sh-font-family-headings) !important;
    font-size: var(--sh-heading-card) !important;
    font-weight: var(--sh-font-weight-heading) !important;
    line-height: var(--sh-line-height-heading-sm) !important;
    color: var(--sh-color-text) !important;
}


/* ==========================================================
   USP ŘÁDEK NA SVĚTLE ZELENÉM PODKLADU
   Pruh přes celou šířku okna (stín + clip-path, ne 100vw, aby nevznikl
   vodorovný posuvník), uvnitř karty na stránkovém odsazení. Nad
   patičkou nezůstává bílý pruh — odsazení kontejneru se nuluje.
========================================================== */

/* Odsazení všude stejné: pás je přes celou šířku okna a karty sedí na
   okraji kontejneru, kterým je --sh-space-page (stejně jako H1 a mřížka
   produktů), takže stejnou hodnotu dostane i horní a dolní odsazení —
   pás pak má vizuálně stejný „rám“ ze všech stran (dřív 80 px nahoře a
   dole proti 72 px po stranách). */
.sh-category-usp {
    padding-top: max(var(--sh-space-page), var(--sh-space-md));
    padding-bottom: max(var(--sh-space-page), var(--sh-space-md));
    margin-bottom: 0;
    background: var(--sh-color-surface);
    box-shadow: 0 0 0 100vmax var(--sh-color-surface);
    clip-path: inset(0 -100vmax);
}

#content-wrapper:has(.sh-category-usp),
.content-inner:has(.sh-category-usp),
.container-full-width:has(.sh-category-usp) {
    margin-bottom: 0;
    padding-bottom: 0;
}


/* Světle zelený pás USP se roztahuje stínem přes celou šířku okna, ale
   obaly banneru Shoptetu (.benefitBanner__item / __content z main-14) mají
   overflow: hidden a pás useknou na šířku obsahu — po stranách zůstal
   bílý pruh o velikosti bočního odsazení. Pro obal, který USP obsahuje,
   se oříznutí vypíná. Karty zůstávají na odsazení kontejneru, takže
   lícují s mřížkou produktů. */
.benefitBanner:has(.sh-category-usp),
.benefitBanner__item:has(.sh-category-usp),
.benefitBanner__content:has(.sh-category-usp),
.benefitBanner__data:has(.sh-category-usp) {
    overflow: visible !important;
}

/* main-14 dává .benefitBanner margin 40px auto — nahoře se sčítal s
   odsazením pásu (.sh-category-usp má vlastní margin-top) a dole nechával
   40 px bílé před patičkou. Odsazení řídí jen pás sám. */
.benefitBanner:has(.sh-category-usp) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}