/* ==========================================================
   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-cta) !important;
    padding: 0 !important;
    width: auto !important;
    text-transform: uppercase;
    font-weight: var(--sh-font-weight-bold);
}

.filters-wrapper .filters-unveil-button-wrapper i {
    background: transparent !important;
    color: var(--sh-color-cta) !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-inverse) !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 — jedle, ne šípek: tohle je navigace do kategorie, ne
   transakční akce, takže patří k té druhé barvě (viz sidebar aktivní
   stav, patička) */
.subcategories.with-image li a:hover {
    background: var(--sh-color-active);
    border-color: var(--sh-color-active) !important;
    color: var(--sh-color-text-inverse);
}

/* 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:transparent !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-secondary-btn) !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-surface) !important;
    border-color:var(--sh-color-secondary-btn) !important;
    color:var(--sh-color-secondary-btn) !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-text-inverse) !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;
}


.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;
    }

}