/* ==========================================================================
   dolomit-all-15-09-2026.css — Ellami.cz (Shoptet Classic + šablona Dolomit)
   Jediný vlastní stylesheet. Načítá se AŽ PO screen.min.css Dolomitu.

   Obsah
   1. Hlavička – desktop (všechny stránky)
   2. Vyhledávání – pole v hlavičce + kompaktní našeptávač
   3. HP – banner přes celou šířku okna
   4. HP – hlavička (trvale bílá)

   Poznámky
   - Dolomit přepíná mobil/desktop na 767/768 px, držíme stejnou hranici.
   - Dolomit při scrollu přidává #header.fixed-menu (přilepené menu). V tom
     stavu vracíme jeho výchozí kompaktní rozložení (ikony vedle menu,
     vyhledávání jako ikona) – proto všude :not(.fixed-menu).
   - Odpočtová lišta (#promo-countdown-bar) se zde neřeší.
   ========================================================================== */

:root {
  --hdr-gap: 16px;               /* mezera nad hlavičkou (od odpočtové lišty) */
}


/* ==========================================================================
   1. HLAVIČKA – desktop
   Řádek 1 = vyhledávání | logo | účet + košík. Řádek 2 = menu přes celou
   šířku, verzálkami. Horní lišta s kontakty a odkazy se skrývá.
   ========================================================================== */
@media (min-width: 768px) {

  .top-navigation-bar {
    height: calc(73px + var(--hdr-gap));   /* Dolomit: 73px; vnitřek zůstává 73px */
    padding-top: var(--hdr-gap);
    border-bottom: 0;            /* jediná linka zůstává pod menu (#header) */
    z-index: 1;                  /* Dolomit: 99 – překrývalo by prvky z #header
                                    vysunuté nahoru do tohoto řádku */
  }
  .top-navigation-bar .top-navigation-contacts,
  .top-navigation-bar .top-navigation-menu {
    display: none;
  }
  #header .header-top:before {
    display: none;               /* linka mezi řádky */
  }

  /* --- účet + košík: vpravo v řádku s logem ----------------------------- */
  /* Dolomit: absolutně v .header-top (height 0), bottom:-48px = řádek menu.
     top:-57px → svisle na střed 73px řádku s logem. */
  #header:not(.fixed-menu) .header-top .top-nav-button-login,
  #header:not(.fixed-menu) .header-top .top-nav-button-account {
    right: 52px;
    top: -57px;
    bottom: auto;
  }
  #header:not(.fixed-menu) .navigation-buttons .btn.cart-count {
    top: -57px;
    bottom: auto;
  }

  /* --- menu: celá šířka, rozprostřené, verzálky ------------------------- */
  #header:not(.fixed-menu) #navigation {
    width: 100%;                 /* Dolomit: calc(100% - 300px) kvůli ikonám */
  }
  #header:not(.fixed-menu) .menu-helper {
    right: 0;                    /* „≡“ pro položky, které se nevejdou */
  }
  /* POZOR na .fitted: Shoptet má .navigation-in před rozměřením menu široký
     9999em (položky v jedné řadě), změří, co se vejde do #navigation, zbytek
     dá do „≡“ a teprve pak přidá .fitted (šířka 100 %). Kdyby space-between
     platilo už při měření, rozprostře položky po 9999em a Shoptet schová
     všechny kromě první (ostrý provoz 17. 9.). Proto obě pravidla až po .fitted. */
  #navigation.fitted:has(> .menu-helper.visible) .navigation-in,
  .fitted #navigation:has(> .menu-helper.visible) .navigation-in {
    width: calc(100% - 50px);    /* aby poslední položka nelezla pod „≡“ */
  }
  #navigation.fitted .navigation-in > ul.menu-level-1,
  .fitted #navigation .navigation-in > ul.menu-level-1 {
    justify-content: space-between;
  }
  #navigation ul.menu-level-1 > li > a {
    padding: 0 12px 1px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
  }
  #navigation ul.menu-level-1 > li > a b {
    font-weight: 500;
  }
  #navigation ul.menu-level-1 > li:last-child > a {
    padding-right: 0;
  }
}


/* --- drobečková navigace: bílé pozadí (Dolomit šedý pruh) – všechny stránky --- */
.breadcrumbs-wrapper,
body.blank-mode .container.breadcrumbs-wrapper,
.breadcrumbs-wrapper .breadcrumbs {
  background: #fff !important;
}
.breadcrumbs-wrapper,
body.blank-mode .container.breadcrumbs-wrapper {
  margin-bottom: 0 !important;   /* Dolomit: 40px */
}


/* ==========================================================================
   2. VYHLEDÁVÁNÍ
   Dolomit má na desktopu jen ikonu (.search-toggle), klik otevírá fullscreen
   (.search-form.hovered). My zobrazujeme přímo pole vlevo v řádku s logem
   a našeptávač Shoptetu (.search-whisperer.active) tvarujeme do panelu pod
   polem. Fullscreen režim Dolomitu zůstává jen pro přilepené menu.
   Mobil (≤767px): Dolomit po kliknutí na lupu ukáže formulář fixně pod
   hlavičkou (top: 60px, šedý pruh, tlačítko Hledat vpravo). My ho dáváme
   přes celou hlavičku – absolutně uvnitř #header (ten je na mobilu fixed a
   odpočtová lišta ho posouvá, takže se posune i formulář).
   ========================================================================== */

/* --- křížek pro smazání dotazu (vkládá dolomit-all JS) – všechny šířky --- */
/* Základ = skrytý. Bez toho na mobilu chytal pravidlo Dolomitu
   `#header .search-form fieldset button` (75px zlaté tlačítko) a vedle
   „Hledat" seděl prázdný zlatý čtverec. Zobrazuje ho jen desktop s dotazem. */
#header .search-form .search-clear {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 26px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1e1e1c;
  font-size: 20px;
  line-height: 40px;
  cursor: pointer;
}
#header .search-form .search-clear:before {
  content: "\00d7";
}

/* --- mobil: formulář přes celou hlavičku ---------------------------------- */
@media (max-width: 767px) {
  .search-window-visible #header .search-form {
    position: absolute;          /* Dolomit: fixed, top 60px */
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;                 /* nad logo (z-index 9) a ikony */
    padding: 20px 15px 15px;     /* 20px = mezera pod odpočtovou lištou */
    background: #fff;
    border-bottom: 1px solid #ededed;
  }
  .search-window-visible #header .search-form fieldset input {
    border: 1px solid #d0ab82;   /* zlaté orámování pole */
  }
}

@media (min-width: 768px) {

  /* --- pozice formuláře ------------------------------------------------- */
  #header:not(.fixed-menu) .search-form {
    left: 0;
    right: auto;
    top: -57px;
    bottom: auto;
    cursor: default;
  }
  #header:not(.fixed-menu) .search-form .search-toggle {
    display: none;
  }
  #header:not(.fixed-menu) .search-form fieldset {
    display: block;
    padding: 0;
    animation: none;
  }

  /* --- pole ------------------------------------------------------------- */
  #header:not(.fixed-menu) .search-form fieldset input {
    float: none;
    display: block;
    width: 200px;
    height: 40px;
    padding: 0 26px 0 28px;
    opacity: 1;
    color: #1e1e1c;
    font-size: 14px;
    border: 0;
    border-bottom: 1px solid #d6d6d6;
    background: transparent url(https://cdn.myshoptet.com/usr/shoptet.tomashlad.eu/user/documents/extras/dolomit/img/icons/search.svg?v3) no-repeat left center / 18px;
    transition: color .25s, border-color .25s, filter .25s;
  }
  #header:not(.fixed-menu) .search-form fieldset input::placeholder {
    color: inherit;
    opacity: .75;
    font-weight: 400;
  }
  #header:not(.fixed-menu) .search-form fieldset input:focus {
    outline: none;
    box-shadow: none;
  }
  #header:not(.fixed-menu) .search-form fieldset button[type="submit"] {
    display: none;               /* odesílá Enter */
  }

  /* --- křížek pro smazání dotazu: zobrazit jen s dotazem ------------------ */
  /* základní styl (skrytý) je nad tímto media query – platí i pro mobil */
  #header:not(.fixed-menu) .search-form.has-query .search-clear {
    display: block;
  }

  /* --- našeptávač jako panel pod polem ---------------------------------- */
  /* Dolomit ho počítá pro fullscreen (šířka 100 %, produkty ve 4 sloupcích,
     dokumenty vpravo). Scope :not(.hovered) dává o třídu vyšší specificitu. */
  #header .search-form:not(.hovered) .search-whisperer {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: auto !important;
    width: 430px !important;
    max-width: calc(100vw - 30px);
    min-width: 0;
    transform: none !important;
    margin: 0;
    font-size: 14px;
    border: 1px solid #ececec;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  }
  #header .search-form:not(.hovered) .search-whisperer.active {
    display: block;
    max-height: calc(100vh - 220px);
    overflow: auto;
  }
  #header .search-form:not(.hovered) .search-whisperer > div,
  #header .search-form:not(.hovered) .search-whisperer > ul {
    padding: 14px 20px !important;
  }

  /* dokumenty (kategorie, články, značky) */
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-documents {
    width: 100%;
    min-width: 0;
    margin: 0;
    order: 0;
    border-bottom: 1px solid #ececec;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-documents.text-center {
    width: 100%;
    min-width: 0;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-documents a {
    font-size: 14px;
    letter-spacing: 0;
    margin-bottom: 6px;
    padding: 4px 0;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-documents .search-whisperer-document:after {
    width: 20px;
    height: 20px;
    background-size: 20px;
    margin-right: 8px;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-documents .search-whisperer-document:before {
    display: none !important;    /* nadpisy „Kategorie“ / „Články“ / „Značky“ */
  }

  /* produkty – jeden sloupec: obrázek | název + dostupnost | cena */
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products,
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-documents + .search-whisperer-products {
    display: block;
    width: 100%;
    margin: 0;
    background: #fff;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products:before {
    display: none;               /* nadpis „Produkty“ */
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products li {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ececec;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products li:last-child {
    border-bottom: 0;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products li a {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    text-align: left;
    padding: 10px 0;
    letter-spacing: 0;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products li a .search-whisperer-image {
    width: 50px;
    height: 50px;
    max-width: 50px;
    margin: 0 14px 0 0;
    flex: 0 0 50px;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products li a .p-info {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0 12px 0 0;
    padding: 0;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products li a .p-info .p-name {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 4px;
    -webkit-line-clamp: 1;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products li a .p-availability {
    height: auto;
    font-size: 13px;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products li a .p-availability .p-availability-inner {
    position: static;
  }
  #header .search-form:not(.hovered) .search-whisperer.active .search-whisperer-products li a .price {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 15px;
    text-align: right;
    white-space: nowrap;
  }

  /* --- přilepené menu: zpět na ikonu Dolomitu --------------------------- */
  #header.fixed-menu .search-form .search-toggle:after {
    content: none;
  }
}


/* ==========================================================================
   2b. PŘILEPENÉ MENU – chování při scrollu
   Dolomit: po odscrollování za horní lištu #header.fixed-menu (bílé, jeden
   řádek), po dalších ~80 px .roll-up (schované, top:-82px). Zpět ho ukáže
   třída html.hdr-scroll-up, kterou nastavuje dolomit-all JS při scrollu
   nahoru. Chceš-li menu přilepené trvale, nahraď selektor za
   `#header.fixed-menu.roll-up`.
   ========================================================================== */
@media (min-width: 768px) {
  html.hdr-scroll-up #header.fixed-menu.roll-up {
    top: 0 !important;
  }
}


/* ==========================================================================
   3. HP – banner přes celou šířku okna
   ========================================================================== */
.type-index .homepage-box.before-carousel .container {
  max-width: none;
  padding: 0 !important;         /* Dolomit: padding 0 15px !important ≤1200px */
}
.type-index .homepage-box.before-carousel .banners-row {
  margin: 0;                     /* Dolomit: margin-top 40px; USP pruh navazuje přímo */
}
.type-index .homepage-box.before-carousel .wide-carousel {
  padding: 0;
}


/* ==========================================================================
   4. HP – hlavička
   Hlavička je trvale bílá (původně průhledná přes banner s hoverem na bílou;
   na přání zrušeno). Banner začíná pod hlavičkou, přes celou šířku okna
   (sekce 3). Rozložení hlavičky viz sekce 1 a 2.
   ========================================================================== */


/* ==========================================================================
   5. HP – USP / konkurenční výhody (Bannery → Konkurenční výhody)
   Markup Shoptetu: .benefitBanner.position--benefitHomepage
     > .benefitBanner__item > .benefitBanner__picture img + .benefitBanner__content
   Celý pruh má gradient přes šířku okna (pseudo :before), karty bílé se
   zlatým rámečkem, ikona vlevo, text vpravo, hover = mírné zvednutí.
   Ikony: /user/banners/… (nahrány v adminu u každého banneru, 192×192 px).
   ========================================================================== */
.type-index .benefitBanner.position--benefitHomepage,
.type-detail .benefitBanner.position--benefitProduct {
  position: relative;
  isolation: isolate;            /* aby :before se z-index:-1 zůstal uvnitř bloku */
  gap: 20px;
  margin: 0 0 60px;
  padding: 44px 0;
  border: 0;
  background: transparent;
  justify-content: stretch;
}
.type-index .benefitBanner.position--benefitHomepage:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: auto;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(208, 171, 130, .30) 0%, #fff 100%);
  z-index: -1;
}
.type-index .benefitBanner.position--benefitHomepage:after {
  display: none;                 /* Dolomit: linka přes 100vw pod blokem */
}
.type-detail .benefitBanner.position--benefitProduct {
  margin: 10px 0 30px;
  padding: 0;
}
.type-detail .benefitBanner.position--benefitProduct:before,
.type-detail .benefitBanner.position--benefitProduct:after {
  display: none;                 /* na detailu bez gradientního pruhu */
}
.type-index .benefitBanner .benefitBanner__item,
.type-detail .benefitBanner .benefitBanner__item {
  flex: 1 1 0 !important;        /* Dolomit: flex:1 !important */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  text-align: left;
  padding: 20px 22px;
  border: 1px solid #e4cdb2 !important;
  border-radius: 8px;
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.type-index .benefitBanner .benefitBanner__item:hover,
.type-detail .benefitBanner .benefitBanner__item:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 30px rgba(208, 171, 130, .30);
  z-index: 1;
}
.type-index .benefitBanner .benefitBanner__picture,
.type-detail .benefitBanner .benefitBanner__picture {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin: 0 !important;          /* Dolomit: margin-right/bottom 0 !important */
}
.type-index .benefitBanner .benefitBanner__picture img,
.type-detail .benefitBanner .benefitBanner__picture img {
  width: 56px;
  height: 56px;
}
.type-index .benefitBanner .benefitBanner__item .benefitBanner__content,
.type-detail .benefitBanner .benefitBanner__item .benefitBanner__content {
  padding-left: 0;
  min-width: 0;
}
.type-index .benefitBanner .benefitBanner__item .benefitBanner__title,
.type-detail .benefitBanner .benefitBanner__item .benefitBanner__title {
  display: block;
  font-size: 1.05em;
  line-height: 1.3;
}
.type-index .benefitBanner .benefitBanner__item .benefitBanner__data,
.type-detail .benefitBanner .benefitBanner__item .benefitBanner__data {
  margin-top: 4px;
  line-height: 1.4;
}
@media (max-width: 1199px) {
  .type-index .benefitBanner .benefitBanner__item,
.type-detail .benefitBanner .benefitBanner__item {
    flex: 1 1 calc(50% - 10px) !important;
  }
}
/* --- mobil: 2×2, bez hover efektu, gradient jako na desktopu -------------- */
@media (max-width: 767px) {
  .type-index .benefitBanner.position--benefitHomepage {
    margin: 0 0 40px;
    padding: 24px 0;
  }
  .type-index .benefitBanner.position--benefitHomepage:before {
    display: block;              /* Dolomit pod 767px: .benefitBanner:before { display: none } → gradient chyběl */
  }
  .type-index .benefitBanner.position--benefitHomepage {
    gap: 10px;
  }
  /* detail: na desktopu bez gradientu, na mobilu stejně jako HP/kategorie;
     gap 10px nutný – s 20px se 2 × calc(50% − 5px) nevejde a karty padají pod sebe */
  .type-detail .benefitBanner.position--benefitProduct {
    gap: 10px;
    margin: 0 0 40px;
    padding: 24px 0;
  }
  .type-detail .benefitBanner.position--benefitProduct:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(208, 171, 130, .30) 0%, #fff 100%);
    z-index: -1;
  }
  .type-index .benefitBanner .benefitBanner__item,
  .type-detail .benefitBanner .benefitBanner__item {
    flex: 1 1 calc(50% - 5px) !important;    /* 2 karty vedle sebe → 2×2 */
    gap: 10px;                   /* ikona vlevo, text vpravo – „nudle“ */
    padding: 10px 12px;
    border-radius: 6px;
    transition: none;
  }
  .type-index .benefitBanner .benefitBanner__picture,
  .type-detail .benefitBanner .benefitBanner__picture {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
  .type-index .benefitBanner .benefitBanner__picture img,
  .type-detail .benefitBanner .benefitBanner__picture img {
    width: 36px;
    height: 36px;
  }
  .type-index .benefitBanner .benefitBanner__item .benefitBanner__title,
  .type-detail .benefitBanner .benefitBanner__item .benefitBanner__title {
    font-size: .95em;
  }
  .type-index .benefitBanner .benefitBanner__item .benefitBanner__data,
  .type-detail .benefitBanner .benefitBanner__item .benefitBanner__data {
    margin-top: 2px;
    font-size: .85em;
    line-height: 1.3;
  }
  .type-index .benefitBanner .benefitBanner__item:hover,
  .type-detail .benefitBanner .benefitBanner__item:hover {
    transform: none;             /* na dotyku by hover „zůstal viset“ */
    box-shadow: none;
  }
}


/* ==========================================================================
   6. HP – KOLEKCE (Bannery → Doplňkové bannery, pozice Zápatí)
   Markup: .footer-banners.row.banner-wrapper > .footer-banner > a > img
           + span.extended-banner-texts (> .extended-banner-title/-text/-link)
   Dolomit blok přesouvá před <footer>.

   Obsah se řídí jen bannery v adminu:
   - PRVNÍ banner v pořadí = hlavička bloku přes celou šířku. Buď obrázek
     s textem (kolekce-nadpis.png), nebo – při vyplněném „Název banneru" –
     texty z adminu s průhledným placeholderem místo obrázku.
   - Ostatní bannery = dlaždice kolekcí, 5 vedle sebe.
   Gradient (bílá → brand hnědá) přes celou šířku okna, obsah max 1280 px.
   ========================================================================== */
.type-index .footer-banners {
  position: relative;
  isolation: isolate;            /* :before se z-index:-1 zůstane uvnitř bloku */
  overflow: visible;             /* Dolomit: overflow:hidden – ořezal by :before */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;                /* bez mezery – gradient navazuje na bestsellery */
  padding: 60px 15px 70px;
  background: transparent;
}
/* gradient přes celou šířku okna: nahoře bílá, dole brand hnědá */
.type-index .footer-banners:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;       /* Shoptet/Dolomit mají pro :before vlastní pravidla */
  max-width: none !important;
  height: auto;
  margin: 0;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #fff 0%, rgba(208, 171, 130, .35) 100%);
  z-index: -1;
}
.type-index .footer-banners .footer-banner {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
  background: transparent;
}
.type-index .footer-banners .footer-banner > a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
}
.type-index .footer-banners .footer-banner > a > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 786 / 922;
  object-fit: cover;
  order: 0;
  transition: transform .5s ease;
}
.type-index .footer-banners .footer-banner > a:hover > img {
  transform: scale(1.05);
}
.type-index .footer-banners .footer-banner .extended-banner-texts.empty {
  display: none;
}

/* --- hlavička bloku = PRVNÍ banner v pořadí --------------------------- */
/* Varianta A (výchozí): obrázkový banner s textem (kolekce-nadpis.png,
   průhledné PNG 2400×440) – zobrazí se přes celou šířku, bez zoomu.
   Varianta B: vyplněný „Název banneru" → texty z adminu, obrázek skrytý. */
.type-index .footer-banners .footer-banner:first-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 10px;
  text-align: center;
}
.type-index .footer-banners .footer-banner:first-child > a {
  overflow: visible;
  border-radius: 0;
}
.type-index .footer-banners .footer-banner:first-child > a > img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.type-index .footer-banners .footer-banner:first-child > a:hover > img {
  transform: none;
}

/* varianta B – texty z adminu */
.type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) {
  max-width: 760px;
}
.type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) > a > img {
  display: none;                 /* průhledný placeholder */
}
.type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) .extended-banner-texts {
  position: static;
  display: block;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent;
  transform: none;
  text-align: center;
  color: #1e1e1c;
}
.type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) .extended-banner-title {
  display: block;
  margin: 0 0 14px;
  font-family: "Abhaya Libre", var(--template-headings-font), serif;
  font-size: 2.6em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: #1e1e1c;
}
.type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) .extended-banner-text {
  display: block;
  margin: 0;
  font-size: 1.05em;
  line-height: 1.7;
  color: #1e1e1c;
}
.type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) .extended-banner-link {
  display: inline-block;
  margin-top: 14px;
  padding: 0 0 2px;
  font-size: 1em;
  color: #1e1e1c;
  border-bottom: 1px solid var(--color-primary);
  background: transparent;
}
.type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) .extended-banner-link:after {
  content: none;
}

@media (max-width: 767px) {
  .type-index .footer-banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .type-index .footer-banners .footer-banner:last-child:not(:first-child) {
    grid-column: 1 / -1;
    width: calc(50% - 7px);
    justify-self: center;
  }
  .type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) .extended-banner-title {
    font-size: 1.9em;
  }
}



/* --- mobil: úvodní text + mřížka 2 sloupce (2×2 + poslední na střed) ------ */
/* Shoptet na mobilu vykreslí jen bannery s „Viditelný na: Mobil": první je
   „Kolekce textace – mobil" (úvod přes celou šířku – texty z adminu přes
   Název + Text banneru, průhledný obrázek; platí varianta B výše), za ním
   dlaždice kolekcí po dvou. Při lichém počtu dlaždic jde poslední na střed. */
@media (max-width: 767px) {
  .type-index .footer-banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 36px 15px 44px;
  }
  .type-index .footer-banners .footer-banner:first-child {
    max-width: none;
    margin-bottom: 10px;
  }
  .type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) .extended-banner-texts {
    font-size: 16px;             /* pevný základ – Shoptet dává textům banneru
                                    velikost ve vw, na mobilu ~7px */
    padding: 0 6px;
  }
  .type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) .extended-banner-title {
    margin-bottom: 10px;
    font-size: 2em;              /* 32px */
    text-transform: none;        /* Dolomit: uppercase */
  }
  .type-index .footer-banners .footer-banner:first-child:has(.extended-banner-title) .extended-banner-text {
    font-size: .95em;            /* ~15px */
    line-height: 1.55;
  }
  .type-index .footer-banners .footer-banner > a {
    border-radius: 6px;
  }
  /* sudý počet potomků = úvod + lichý počet dlaždic → poslední dlaždice
     přes oba sloupce, na střed, v šířce jedné dlaždice */
  .type-index .footer-banners .footer-banner:last-child:nth-child(even) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px);
  }
}


/* ==========================================================================
   7. PRODUKTOVÉ KARTY – globálně
   Dolomit na hover přes fotku vkládá .product-buttons (bílý poloprůhledný
   overlay + tlačítko „Detail"). Nechceme ani overlay, ani zašednutí.
   Platí ve výpisu kategorie i v HP blocích.
   ========================================================================== */
.products-block.products .product .image .product-buttons {
  display: none !important;
}


/* ==========================================================================
   8. HP – BESTSELLERY (produktová skupina z adminu + Text úvodní stránky)
   Strukturu skládá dolomit-all JS (initBestsellers):
   section.hp-best > .hp-best__intro (nadpis + text)
                   + .products-block > .hp-best__viewport > .hp-best__track
                     > .hp-best__group × 2 > .product …
   Karta: obrázek → název → dostupnost → cena (popisek, varianty a tlačítka
   skryté).
   ========================================================================== */
.type-index .hp-best {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  flex: 0 0 100%;                /* kdyby seděl ve flex kontejneru Dolomitu */
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto 40px;
  padding: 50px 15px 40px;
}
/* gradient přes celou šířku okna: nahoře brand hnědá, dole bílá */
.type-index .hp-best:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(208, 171, 130, .35) 0%, #fff 100%);
  z-index: -1;
}

/* --- úvod: nadpis + text vlevo nahoře ----------------------------------- */
.type-index .hp-best .hp-best__intro {
  max-width: 640px;
  margin: 0 0 20px;
}
.type-index .hp-best .homepage-group-title {
  position: relative;
  margin: 0 0 22px;
  padding: 0 0 18px;
  font-family: "Abhaya Libre", var(--template-headings-font), serif;
  font-size: 2.4em;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: #1e1e1c;
}
.type-index .hp-best .homepage-group-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  background: var(--color-primary);
}
.type-index .hp-best .hp-best__text {
  font-size: 1.05em;
  line-height: 1.7;
  color: #1e1e1c;
}
.type-index .hp-best .hp-best__text p {
  margin: 0 0 12px;
}
.type-index .hp-best .hp-best__text a {
  display: inline-block;
  margin-top: 6px;
  padding: 0 0 2px;
  color: #1e1e1c;
  border-bottom: 1px solid var(--color-primary);
  text-decoration: none;
}
.type-index .hp-best .hp-best__text a:hover {
  color: var(--color-primary);
}

/* --- pravý sloupec: posuvník --------------------------------------------- */
.type-index .hp-best .products-block {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.type-index .hp-best .hp-best__viewport {
  width: 100%;
  padding: 16px 0;               /* prostor pro zvětšení karty na hover */
  border: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.type-index .hp-best .hp-best__track {
  display: flex;
  width: max-content;
  animation: hp-best-scroll 60s linear infinite;   /* dobu přepočítává JS */
  will-change: transform;
}
.type-index .hp-best .hp-best__viewport:hover .hp-best__track {
  animation-play-state: paused;
}
.type-index .hp-best .hp-best__group {
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  padding-right: 16px;           /* mezera mezi koncem skupiny a její kopií */
}
@keyframes hp-best-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .type-index .hp-best .hp-best__track { animation: none; }
  .type-index .hp-best .hp-best__viewport { overflow-x: auto; }
}

/* --- karta ---------------------------------------------------------------- */
.type-index .hp-best .product {
  flex: 0 0 165px;
  width: 165px;
  max-width: none;
  margin: 0;
  padding: 0;
  transition: transform .3s ease;
}
.type-index .hp-best .product:hover {
  transform: scale(1.06);
  z-index: 1;
}
.type-index .hp-best .product .p {
  margin: 0;
}
.type-index .hp-best .product .image {
  width: 100%;
  margin: 0 0 8px;
}
.type-index .hp-best .product .p-in {
  padding: 0 2px 6px;
}
.type-index .hp-best .product .p .name {
  height: auto;
  margin: 0 0 6px;
  font-size: .9em;
  font-weight: 600;
  line-height: 1.3;
}
.type-index .hp-best .product .ratings-wrapper {
  justify-content: center;
  margin: 0 0 6px;
}
.type-index .hp-best .product .availability {
  justify-content: center;
  font-size: .78em;
}
.type-index .hp-best .product .prices {
  font-size: 1.1em;
  justify-content: center;
}
.type-index .hp-best .product .prices .price-final strong {
  font-size: 1em;
}
/* žádná rezervovaná výška mezi dostupností a cenou */
.type-index .hp-best .product .p-in,
.type-index .hp-best .product .p-in-in,
.type-index .hp-best .product .p-bottom,
.type-index .hp-best .product .p-bottom > div {
  min-height: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --- doplněk Dynamické akce a slevy (.shkDiscountPromoProduct) ------------ */
/* dolomit-all JS přesune celý box doplňku na začátek .p-in (nad název) a do
   .prices vloží kopii akční ceny (.hp-best__promo-price). Z boxu doplňku
   zůstává viditelný jen odkaz s kódem jako zlatý obdélník; klik dál
   aktivuje kód přes doplněk. Pořadí: kód → název → dostupnost → akční cena
   → původní cena přeškrtnutá. */
.type-index .hp-best .product .shkDiscountPromoProduct {
  position: static !important;
  display: block !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}
.type-index .hp-best .product .shkDiscountPromoProduct__top,
.type-index .hp-best .product .shkDiscountPromoProduct__header,
.type-index .hp-best .product .shkDiscountPromoProduct__content__priceWrap {
  display: none !important;
}
.type-index .hp-best .product .shkDiscountPromoProduct__content,
.type-index .hp-best .product .shkDiscountPromoProduct__content__main,
.type-index .hp-best .product .shkDiscountPromoProduct__content__promoWrap {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.type-index .hp-best .product .shkDiscountPromoProduct__content__promoCode {
  position: static !important;
  display: inline-block !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 4px 10px !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-size: .72em !important;
  font-weight: 600 !important;
  letter-spacing: .4px;
  line-height: 1.3 !important;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.type-index .hp-best .product .shkDiscountPromoProduct__content__promoCode:hover {
  background: var(--color-primary-hover) !important;
  color: #fff !important;
}
.type-index .hp-best .product .shkDiscountPromoProduct__content__promoCodeText {
  color: inherit !important;
}
.type-index .hp-best .product .prices {
  flex-direction: column;
}
.type-index .hp-best .product .hp-best__promo-price {
  display: block;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.2;
  color: #1e1e1c;
}
.type-index .hp-best .product .prices:has(.hp-best__promo-price) .price-final strong {
  font-size: .8em;
  font-weight: 400;
  color: #8a8a8a;
  text-decoration: line-through;
}

/* skrýt vše kromě obrázku, názvu, dostupnosti a ceny */
.type-index .hp-best .product .p-desc,
.type-index .hp-best .product .p-tools,
.type-index .hp-best .product .widget-parameter-wrapper,
.type-index .hp-best .product .manufactures-widget,
.type-index .hp-best .product .stars-wrapper,
.type-index .hp-best .product .price-additional,
.type-index .hp-best .product .p-code,
.type-index .hp-best .product .quick-view-btn {
  display: none !important;
}

/* --- responzivita -------------------------------------------------------- */
@media (max-width: 991px) {
  .type-index .hp-best .homepage-group-title {
    font-size: 2em;
  }
}



/* ==========================================================================
   9. HP – ostatní bloky
   ========================================================================== */

/* --- Text úvodní stránky (.welcome-wrapper) ------------------------------ */
/* Blok s nadpisem „Prodej šperků z chirurgické oceli…" se nezobrazuje.
   Vlastní text z pole přesouvá JS k bestsellerům (sekce 8). */
.type-index .homepage-box.welcome-wrapper {
  display: none;
}

/* --- Středový banner (Jak se starat o šperky) ------------------------------ */
/* Gradient přes celou šířku okna: nahoře bílá, dole brand hnědá
   (navazuje na bestsellery, které končí bílou). */
.type-index .homepage-box.middle-banners-wrapper {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin: 0;
  padding: 50px 0 60px;
}
.type-index .homepage-box.middle-banners-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff 0%, rgba(208, 171, 130, .32) 100%);
  z-index: -1;
}

/* --- Blog (.hp-news) ------------------------------------------------------- */
/* Dolomit: šedé pozadí (#f7f7f9) + 50px mezera pod blokem. Místo šedé dvojitý
   gradient přes celou šířku okna: nahoře #f0e4d7 (= konec středového banneru,
   rgba(208,171,130,.32) na bílé), uprostřed bílá, dole #f0e4d7 (= začátek
   Instagram bloku v patičce). */
.type-index .hp-news {
  position: relative;
  isolation: isolate;
  margin-bottom: 0;              /* Dolomit: 50px → bílý pás před patičkou */
  background: transparent;
}
.type-index .hp-news:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f0e4d7 0%, #fff 50%, #f0e4d7 100%);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 767px) {
  .type-index .hp-news:before {
    background: linear-gradient(180deg, #fff 0%, #f0e4d7 100%);   /* mobil: bílá → zlatá */
  }
}

/* --- Instagram v patičce (Prvky šablony) ----------------------------------- */
/* Dolomit: šedé pozadí widgetu, linka pod blokem (:after), levý rámeček
   sloupce a vložený .separator. Vše pryč, místo toho gradient přes celou
   šířku okna (nahoře brand hnědá, dole bílá). */
footer .custom-footer > div.instagram-line,
footer .custom-footer > div.custom-footer__instagram {
  position: relative;
  border: 0 !important;
  padding: 50px 0 60px !important;
}
footer .custom-footer > div.instagram-line + div {
  border-left: 0 !important;
}
footer .custom-footer > div.separator {
  display: none;
}
footer .custom-footer .instagram-line:after {
  display: none;
}
footer .custom-footer .instagram-line:before {
  display: block;
  top: -80px;                    /* překrýt i případnou mezeru nad blokem */
  left: 50%;
  width: 100vw;
  height: calc(100% + 80px);
  transform: translateX(-50%);
  opacity: 1;
  background: linear-gradient(180deg, #f0e4d7 0%, #fff 100%);   /* neprůhledné – pod tím je tmavá patička */
  z-index: 0;
}
/* mobil: pozadí Instagramu navazuje na blok nad ním – HP blog končí zlatou
   (sekce 8, mobil bílá → zlatá) → celý zlatý; kategorie: USP končí bílou
   (sekce 15) → celý bílý. Ostatní typy stránek zatím na desktopovém gradientu. */
@media (max-width: 767px) {
  body.type-index footer .custom-footer .instagram-line:before {
    background: #f0e4d7;
  }
  body.type-category footer .custom-footer .instagram-line:before {
    background: #fff;
  }
}
footer .custom-footer .instagram-line .instagram-widget {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
footer .custom-footer .instagram-line .instagram-widget > a {
  border-right: 4px solid transparent;   /* mezera mezi fotkami bez bílé linky */
}
footer .custom-footer .instagram-line .instagram-widget > a:last-child {
  border-right: 0;
}



/* ==========================================================================
   10. PATIČKA – tmavá varianta podle původního designu
   Markup (Prvky šablony): footer .custom-footer > .custom-footer__banner36
   (Zákaznický servis) / __banner40 (O Ellami) / __banner41 (Potřebujete
   poradit?) / __instagram / __newsletter.extended / __onlinePayments /
   __banner53 (Shop the look). Dolomit přesouvá onlinePayments k podpisu.
   Pořadí: Instagram (gradient, sekce 9) → 4 sloupce (3× odkazy + newsletter)
   → Shop the look → copyright. Texty newsletteru (nadpis + odstavec) se
   editují v adminu: Vzhled a obsah → Šablony → Prvky → Newsletter → Upravit.
   ========================================================================== */
footer#footer {
  background: #1e1e1c;
  color: #fff;
  border-top: 0;
  padding-top: 0 !important;     /* Dolomit: footer.distanced.with-instagram padding-top */
}
footer#footer .footer-rows {
  padding-top: 0;
}
/* Rozložení gridem s pevnými pozicemi – nezávislé na pořadí v DOM
   (Dolomit JS prvky přesouvá). Řádek 1 Instagram, řádek 2 čtyři sloupce,
   řádek 3 Shop the look, cokoli dalšího se zařadí pod to přes celou šířku. */
footer#footer .custom-footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  padding-top: 0;
}
footer#footer .custom-footer > div {
  width: auto;
  max-width: none;
  grid-column: 1 / -1;
  border-left: 0 !important;
  padding: 60px 35px 40px !important;
}
footer#footer .custom-footer > div.instagram-line,
footer#footer .custom-footer > div.custom-footer__instagram {
  grid-row: 1;
  grid-column: 1 / -1;
}
footer#footer .custom-footer > div.custom-footer__banner36 { grid-row: 2; grid-column: 1; }
footer#footer .custom-footer > div.custom-footer__banner40 { grid-row: 2; grid-column: 2; }
footer#footer .custom-footer > div.custom-footer__banner41 { grid-row: 2; grid-column: 3; }
footer#footer .custom-footer > div.custom-footer__newsletter { grid-row: 2; grid-column: 4; }
footer#footer .custom-footer > div.custom-footer__banner53 { grid-row: 3; grid-column: 1 / -1; padding-top: 0 !important; }

/* --- sloupce s odkazy --------------------------------------------------- */
footer#footer .custom-footer .banner h4,
footer#footer .custom-footer .banner h4 span {
  font-family: "Abhaya Libre", var(--template-headings-font), serif;
  font-size: 1.55em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: #fff;
  text-transform: none;
  margin: 0 0 26px;
}
footer#footer ul li,
footer#footer p,
footer#footer a,
footer#footer ul li a {
  color: #fff !important;
}
footer#footer ul li a {
  margin-bottom: 10px;
  font-weight: 400;
}
footer#footer a:hover {
  color: var(--color-primary) !important;
  text-decoration: none;
}
/* ikony IG/FB v bloku „Potřebujete poradit?" – tmavé SVG → bílé */
footer#footer .custom-footer__banner41 li a img {
  filter: brightness(0) invert(1);
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
footer#footer .custom-footer__banner41 li a + a {
  margin-left: 14px;
}
footer#footer .custom-footer__banner41 li a:has(img) {
  display: inline-block;
  margin-top: 6px;
}

/* --- newsletter (4. sloupec) --------------------------------------------- */
/* Dolomit JS přesune <h3> do formuláře (form > .newsletter-left > h3) a
   .newsletter-header s odstavcem nechá před formulářem. Přes display:contents
   je proto řadíme jako přímé potomky sloupce: nadpis → text → pole + tlačítko. */
footer#footer .custom-footer > div.custom-footer__newsletter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 !important;
  text-align: left;
  background: transparent;
}
footer#footer .custom-footer > div.custom-footer__newsletter:before {
  display: none;                 /* Dolomit: linka 100vw nad newsletterem */
}
footer#footer .custom-footer__newsletter .newsletter-header,
footer#footer .custom-footer__newsletter form {
  display: contents;
}
footer#footer .custom-footer__newsletter .newsletter-left {
  order: 1;
  width: 100%;
  text-align: left;
}
footer#footer .custom-footer__newsletter .newsletter-header p {
  order: 2;
  width: 100%;
  margin: 0 0 18px;
  font-size: .92em;
  letter-spacing: 0;
  line-height: 1.5;
  color: #fff;
}
footer#footer .custom-footer__newsletter form fieldset {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  padding: 0;
  margin: 0;
}
footer#footer .custom-footer__newsletter h3 {
  font-family: var(--template-headings-font);
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.2 !important;
  text-transform: uppercase;
  margin: 0 0 12px;
  text-align: left;
  color: #fff;
}
footer#footer .custom-footer__newsletter form .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
footer#footer .custom-footer__newsletter form .form-group {
  flex: 1 1 160px;
  width: auto;
  margin: 0;
}
footer#footer .custom-footer__newsletter form .smart-label-wrapper > label {
  display: none;
}
footer#footer .custom-footer__newsletter form .form-control {
  width: 100%;
  max-width: none;
  height: 48px;
  padding: 10px 14px;
  font-size: 1em;
  font-weight: 400;
  color: #1e1e1c;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  margin: 0;
}
footer#footer .custom-footer__newsletter form .form-control::placeholder {
  color: #1e1e1c;
  opacity: .5;
}
footer#footer .custom-footer__newsletter form button {
  flex: 0 0 auto;
  order: 0;
  height: 48px;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0 18px;
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: 0;
}
footer#footer .custom-footer__newsletter form button:hover {
  background: var(--color-primary-hover);
  opacity: 1;
}
footer#footer .custom-footer__newsletter .consents,
footer#footer .custom-footer__newsletter .validator-msg-holder {
  width: 100%;
  max-width: none;
  margin-top: 10px;
  font-size: .85em;
  text-align: left;
  order: 4;
}
footer#footer .custom-footer__newsletter .consents label {
  color: #fff;
  opacity: .8;
  margin: 0;
}

/* --- Shop the look (7. prvek) -------------------------------------------- */
footer#footer .custom-footer__banner53 h3,
footer#footer .custom-footer__banner53 h2,
footer#footer .custom-footer__banner53 h2 a {
  color: #fff;
}

/* --- spodní řádek ---------------------------------------------------------- */
footer#footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 22px 15px;
  color: rgba(255, 255, 255, .7);
}
footer#footer .footer-bottom a,
footer#footer .copyright,
footer#footer #signature {
  color: rgba(255, 255, 255, .7) !important;
}
footer#footer .custom-footer__onlinePayments h3 {
  display: none;
}

/* --- responzivita -------------------------------------------------------- */
@media (max-width: 991px) {
  footer#footer .custom-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  footer#footer .custom-footer > div {
    padding: 40px 20px 20px !important;
  }
  footer#footer .custom-footer > div.custom-footer__banner36 { grid-row: 2; grid-column: 1; }
  footer#footer .custom-footer > div.custom-footer__banner40 { grid-row: 2; grid-column: 2; }
  footer#footer .custom-footer > div.custom-footer__banner41 { grid-row: 3; grid-column: 1; }
  footer#footer .custom-footer > div.custom-footer__newsletter { grid-row: 3; grid-column: 2; }
  footer#footer .custom-footer > div.custom-footer__banner53 { grid-row: 4; }
}
@media (max-width: 767px) {
  /* Dolomit ≤992px: každý blok má border-bottom 1px #e6e6e6 + margin-bottom
     18px → bílé dělicí čáry a velké mezery mezi bloky. Pryč. */
  footer#footer .custom-footer > div {
    margin-bottom: 0;
    border-bottom: 0 !important;
    padding: 22px 15px 4px !important;
  }
  footer#footer .custom-footer .banner h4,
  footer#footer .custom-footer .banner h4 span {
    margin-bottom: 14px;
  }
}
@media (max-width: 575px) {
  footer#footer .custom-footer {
    grid-template-columns: minmax(0, 1fr);
  }
  footer#footer .custom-footer > div.custom-footer__banner36 { grid-row: 2; grid-column: 1; }
  footer#footer .custom-footer > div.custom-footer__banner40 { grid-row: 3; grid-column: 1; }
  footer#footer .custom-footer > div.custom-footer__banner41 { grid-row: 4; grid-column: 1; }
  footer#footer .custom-footer > div.custom-footer__newsletter { grid-row: 5; grid-column: 1; }
  footer#footer .custom-footer > div.custom-footer__banner53 { grid-row: 6; }
}



/* ==========================================================================
   11. KATEGORIE – rozvržení
   Dolomit: aside.sidebar (300px) + main.content vedle sebe uvnitř
   #content-wrapper > .content-wrapper-in. Na kategorii JS (initCategoryTop)
   přesune .category-top (H1 + popis kategorie + podkategorie) PŘED
   .content-wrapper-in, takže hero a dlaždice podkategorií jdou přes celou
   šířku a sloupce začínají až řazením/výpisem.
   ========================================================================== */
.type-category #content-wrapper {
  padding-top: 0;
}
.type-category #content-wrapper > .category-top {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 0 0 10px;
  margin: -16px 0 20px;          /* pohltí horní margin .ella-cat (16px z popisu) */
}
.type-category #content-wrapper > .category-top:not(:has(.ella-cat)) {
  margin-top: 0;
  padding-top: 30px;
}
.type-category #content-wrapper > .category-top .category-perex p:last-child {
  margin-bottom: 0;
}
/* sidebar bez rámečku Dolomitu */
.type-category aside.sidebar .box.box-filters {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
}
@media (max-width: 767px) {
  /* drobečková navigace: Dolomit ji na mobilu skrývá – ukazujeme (jako
     starý web), vlevo, bez spodní mezery; hero popisu pak navazuje hned */
  .breadcrumbs-wrapper,
  body.blank-mode .container.breadcrumbs-wrapper,
  .type-category #content .breadcrumbs-wrapper {
    display: block;
    padding: 10px 15px 6px !important;
    font-size: .85em;
    text-align: left;
  }
  .type-category #content-wrapper > .category-top {
    padding-top: 0;
    padding-bottom: 0;
  }
  /* popis (.ella-cat má vlastní margin 16px !important) → podkategorie bez mezery */
  .type-category #content-wrapper > .category-top .ella-cat {
    margin-bottom: 0 !important;
  }
  .type-category #content-wrapper > .category-top .category-perex {
    margin-bottom: 0;
  }
}


/* ==========================================================================
   12. KATEGORIE – hero blok z popisu kategorie (.ella-cat)
   Záměrně bez pravidel: popis kategorie v adminu obsahuje vlastní <style>
   (layout, obrázky karet, skrytí H1) a je soběstačný. Přesun nad sloupce
   řeší JS (sekce 11), přes celou šířku se roztahuje sám (100vw pseudo).
   ========================================================================== */


/* ==========================================================================
   13. KATEGORIE – dlaždice podkategorií (.subcategories.with-image)
   Ohraničené boxy s ikonou, řazené zleva, bez stínu a šipky Dolomitu.
   ========================================================================== */
.type-category .subcategories,
.type-category .subcategories.with-image {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100% !important;
  margin: 0 0 30px;
  padding: 0;
}
.type-category .subcategories.with-image li,
.type-category .subcategories li {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.type-category .subcategories.with-image li a,
.type-category .subcategories li a {
  height: 64px;
  min-width: 260px;
  padding: 10px 28px 10px 14px;
  border: 1px solid #d8c7ab !important;
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
  color: #1e1e1c;
  transition: border-color .25s, box-shadow .25s;
}
.type-category .subcategories.with-image li a:before,
.type-category .subcategories li a:before,
.type-category .subcategories.with-image li a:after,
.type-category .subcategories li a:after {
  display: none !important;      /* šipka a hover překryv Dolomitu */
}
.type-category .subcategories.with-image li a:hover,
.type-category .subcategories li a:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 8px 20px rgba(208, 171, 130, .25);
  color: #1e1e1c;
}
.type-category .subcategories.with-image li a .image {
  width: 46px;
  max-width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  top: 0;
}
.type-category .subcategories.with-image li a .image img {
  max-width: 46px;
  max-height: 46px;
}
.type-category .subcategories.with-image li a .text {
  width: auto;
  padding-left: 14px;
  font-size: 1.05em;
  font-weight: 500;
  white-space: normal;
}


/* --- mobil: dlaždice po dvou, lichá poslední zůstává vlevo ---------------- */
@media (max-width: 767px) {
  .type-category .subcategories,
  .type-category .subcategories.with-image {
    position: relative;
    isolation: isolate;
    gap: 10px;
    margin: 0 0 22px;
    padding: 24px 0 26px;
  }
  /* pozadí: gradient zlatá → bílá přes celou šířku okna (pseudo-prvek je
     absolutní, takže není položkou flexu) */
  .type-category .subcategories:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #f0e4d7 0%, #fff 100%);
    z-index: -1;
    pointer-events: none;
  }
  .type-category .subcategories.with-image li,
  .type-category .subcategories li {
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px);
  }
  .type-category .subcategories.with-image li a,
  .type-category .subcategories li a {
    height: auto;
    min-height: 56px;
    min-width: 0;
    padding: 8px 10px;
  }
  .type-category .subcategories.with-image li a .image {
    width: 36px;
    max-width: 36px;
    height: 36px;
  }
  .type-category .subcategories.with-image li a .image img {
    max-width: 36px;
    max-height: 36px;
  }
  .type-category .subcategories.with-image li a .text {
    padding-left: 10px;
    font-size: .9em;
    line-height: 1.25;
  }
}


/* ==========================================================================
   14. KATEGORIE – filtry v levém sloupci
   Dolomit dělá z hodnot dlaždice s rámečkem; vracíme klasické checkboxy,
   počet vpravo, tučné nadpisy bez linky, barvy jako kolečka, posuvník ceny
   s černými úchyty.
   ========================================================================== */
/* nadpisy sekcí */
.type-category #filters .filter-section h4,
.type-category #filters .slider-wrapper h4,
.type-category aside #filters h4, .type-category #filters h4 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: var(--template-font);
  font-size: 1.35em !important;
  font-weight: 700;
  letter-spacing: 0;
  color: #1e1e1c;
  background: transparent;
}
.type-category #filters .filter-section h4:before,
.type-category #filters .slider-wrapper h4:before {
  display: none;                 /* linka přes nadpis */
}
.type-category #filters .filter-section h4 span,
.type-category #filters .slider-wrapper h4 span {
  padding: 0;
  background: transparent;
}
.type-category #filters .filter-sections .filter-section {
  margin-bottom: 26px;
}
.type-category #filters .param-filter-top {
  margin-top: 0;
}
/* tlačítko „Otevřít filtr" na desktopu pryč (mobil ho potřebuje) */
@media (min-width: 768px) {
  .type-category aside .filters-wrapper .filters-unveil-button-wrapper {
    display: none;
  }
}
/* hodnoty pod sebou, přes celou šířku (Dolomit: flex-wrap + width:auto!important) */
.type-category #filters .filter-sections fieldset {
  display: block;
}
.type-category #filters .filter-sections fieldset > div,
.type-category #filters .filter-section fieldset > div:nth-child(odd),
.type-category #filters .filter-section fieldset > div:nth-child(2n) {
  display: flex;
  align-items: center;
  float: none;
  clear: none;
  width: 100% !important;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
/* skryté checkboxy/popisky u barev zůstávají skryté */
.type-category #filters .filter-section input[type="checkbox"].no-display,
.type-category #filters .filter-section label.no-display {
  display: none !important;
}
/* checkbox + popisek + počet */
.type-category #filters .filter-section input[type="checkbox"] {
  display: inline-block;
  -webkit-appearance: auto;
  appearance: auto;
  width: 16px;
  height: 16px;
  margin: 0 10px 0 0;
  top: 0;
  flex: 0 0 16px;
  accent-color: #1e1e1c;
  cursor: pointer;
}
.type-category #filters .filter-section input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 !important;
  padding: 7px 0 !important;
  border: 0;
  background: transparent;
  font-size: .95em;
  font-weight: 400;
  letter-spacing: 0;
  color: #1e1e1c;
  position: relative;
}
.type-category #filters .filter-section input[type="checkbox"] + label:before,
.type-category #filters .filter-section input[type="checkbox"] + label:after,
.type-category #filters .filter-section input[type="checkbox"]:checked + label:before,
.type-category #filters .filter-section input[type="checkbox"]:checked + label:after {
  display: none !important;      /* zelené orámování a fajfka Dolomitu */
}
.type-category #filters .filter-section input[type="checkbox"]:checked + label {
  font-weight: 600 !important;
}
.type-category #filters .filter-section label.disabled {
  opacity: .4;
}
.type-category #filters .filter-section .filter-count,
.type-category #filters .filter-sections .filter-section .filter-count {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 22px;
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 2px;
  background: #f2f2f2;
  font-size: .72em;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: #777;
}
/* barvy – kolečka */
.type-category #filters .filter-sections fieldset > div.advanced-filters-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.type-category #filters .filter-section .advanced-filters-wrapper > div {
  width: auto !important;
  height: auto;
  padding: 0 !important;
}
.type-category #filters .filter-section .advanced-filters-wrapper label .advanced-parameter-inner {
  width: 36px;
  height: 36px;
  margin: 0;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  overflow: hidden;
}
.type-category #filters .filter-section .advanced-filters-wrapper label .advanced-parameter-inner img {
  border-radius: 50%;
}
.type-category #filters .filter-section .advanced-filters-wrapper label .advanced-parameter-inner.yes-before {
  border: 2px solid #1e1e1c;
}
/* posuvník ceny */
.type-category #filters .slider-header {
  padding-bottom: 12px;
  font-size: .95em;
}
.type-category #filters .ui-slider-horizontal {
  height: 2px;
  background: #e0d6c8;
}
.type-category #filters .ui-slider-range {
  background: var(--color-primary) !important;
  opacity: 1;
}
.type-category #filters .ui-slider-horizontal .ui-slider-handle {
  width: 14px;
  height: 14px;
  top: -6px;
  margin-left: -7px;
  border-radius: 50%;
  background: #1e1e1c !important;
  box-shadow: none;
}
/* posuvník sekce s mnoha hodnotami */
.type-category #filters .filter-section h4 + form {
  max-height: 210px;
  padding-right: 8px;
}
.type-category .filter-section form ::-webkit-scrollbar-thumb {
  background: #d8c7ab;
}
.type-category .filter-section form ::-webkit-scrollbar-track {
  border: 0;
  background: #f2f2f2;
}


/* ==========================================================================
   15. KATEGORIE – karta produktu ve výpisu (#products.products-page)
   Pořadí: fotka (šedý podklad) → název → krátký popis → blok doplňku
   Dynamické akce a slevy (.shkDiscountPromoProduct, vzhled doplňku beze
   změny) → cena → dostupnost → varianty. Pořadí se skládá přes
   display:contents na obalech Dolomitu (.p-in-in, .p-bottom,
   .p-bottom > div) a flex order na .p-in.
   ========================================================================== */
.type-category #products.products-page {
  display: flex;
  flex-wrap: wrap;
  gap: 44px 28px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.type-category #products.products-page .product {
  flex: 0 0 calc(33.333% - 19px);
  width: calc(33.333% - 19px);
  margin: 0;
  padding: 0 !important;
}
.type-category #products.products-page .product:after,
.type-category #products.products-page .product:before {
  display: none !important;      /* oddělovače Dolomitu */
}
@media (max-width: 991px) {
  .type-category #products.products-page {
    gap: 32px 16px;
  }
  .type-category #products.products-page .product {
    flex-basis: calc(50% - 8px);
    width: calc(50% - 8px);
  }
}
.type-category #products.products-page .product .p {
  margin: 0;
}
/* fotka */
.type-category #products.products-page .product .image {
  width: 100%;
  margin: 0 0 16px;
  padding: 24px;
  background: #f7f6f4;
  border-radius: 2px;
}
.type-category #products.products-page .product .image img {
  mix-blend-mode: multiply;      /* bílé pozadí fotek splyne se šedou */
}
.type-category #products.products-page .product .flags.flags-default {
  left: 10px;
  top: 10px;
}
/* doplňkový název produktu (.product-appendix) – dolomit-all JS
   (initCategoryAppendix) ho přesune z názvu do .image jako zlatý štítek
   v levém spodním rohu fotky */
.type-category #products.products-page .product .image .product-appendix {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-block;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  background: #b58b5d;
  color: #fff;
  font-size: .85em;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* text */
.type-category #products.products-page .product .p-in {
  display: flex;
  flex-direction: column;
  padding: 0 2px 10px;
  background: transparent;
}
.type-category #products.products-page .product .p-in-in,
.type-category #products.products-page .product .p-bottom,
.type-category #products.products-page .product .p-bottom > div {
  display: contents;
}
.type-category #products.products-page .product .p .name {
  order: 1;
  height: auto;
  min-height: 2.7em;             /* rezerva na 2 řádky (1.35 × 2) – karty drží zarovnané */
  margin: 0 0 6px;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
.type-category #products.products-page .product .p .name span {
  display: block;                /* bez zkracování na „…" (Dolomit: -webkit-box + line-clamp 2) */
  -webkit-line-clamp: unset;
  overflow: visible;
}
.type-category #products.products-page .product .p-desc {
  order: 2;
  margin: 0 0 12px;
  padding: 0;
  font-size: .9em;
  line-height: 1.5;
  color: #5a5a5a;
  text-align: left;
  max-height: none;
  min-height: 3em;               /* rezerva na 2 řádky (line-height 1.5 × 2) */
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* blok doplňku Dynamické akce a slevy – doplněk ho vkládá do .p-in mezi
   .p-in-in a .p-bottom; jen pořadí, vzhled necháváme doplňku */
.type-category #products.products-page .product .shkDiscountPromoProduct {
  order: 3;
}
.type-category #products.products-page .product .prices {
  order: 4;
  justify-content: flex-start;
  margin: 0 0 4px;
  font-size: 1.45em;
  text-align: left;
}
.type-category #products.products-page .product .prices .price-final strong {
  font-weight: 700;
}
.type-category #products.products-page .product .ratings-wrapper {
  order: 5;
  align-items: flex-start;       /* Dolomit: column-reverse + center → dostupnost byla na střed */
  min-height: 0;
  margin: 0 0 12px;
}
.type-category #products.products-page .product .availability {
  justify-content: flex-start;
  font-size: 1.25em;
  font-weight: 400;
  text-transform: none;
  color: var(--color-primary);
}
.type-category #products.products-page .product .availability span {
  color: var(--color-primary) !important;
  justify-content: flex-start;
}
.type-category #products.products-page .product .availability .availability-amount {
  display: none;                 /* „(4 ks)" ve výpisu neukazujeme */
}
.type-category #products.products-page .product .widget-parameter-wrapper {
  order: 6;
  margin: 0;
}
.type-category #products.products-page .product .widget-parameter-wrapper .widget-parameter-list {
  justify-content: flex-start;
  margin: 0;
}
.type-category #products.products-page .product .widget-parameter-value {
  margin: 0 8px 8px 0;
}
.type-category #products.products-page .product .widget-parameter-value a {
  padding: 7px 12px;
  border-radius: 999px;
  background: #f5ede3;
  color: #8a6a44;
  font-size: .85em;
}
.type-category #products.products-page .product .widget-parameter-value a:hover {
  background: var(--color-primary);
  color: #fff;
}
.type-category #products.products-page .product .widget-parameter-more {
  text-align: left;
}
.type-category #products.products-page .product .p-tools {
  order: 7;
}
.type-category #products.products-page .product .dkLabFavouriteProductDiv {
  order: 8;
}
/* --- mobil: karty ve dvou sloupcích – větší název, rezervy pro stejnou
   výšku, varianty 3 vedle sebe (+ další ukazuje dolomit-all JS) ------------ */
@media (max-width: 767px) {
  .type-category #products.products-page .product .p .name {
    min-height: 4.05em;          /* 3 řádky × 1.35 – dlouhé názvy v úzké kartě */
    font-size: 1.3em;
  }
  .type-category #products.products-page .product .p-desc {
    min-height: 3em;             /* 2 řádky */
  }
  .type-category #products.products-page .product .prices {
    font-size: 1.3em;
  }
  .type-category #products.products-page .product .widget-parameter-wrapper {
    min-height: 54px;            /* řádek pilulek + „další“ – karty bez variant nerozhodí */
  }
  .type-category #products.products-page .product .widget-parameter-value {
    margin: 0 6px 6px 0;
  }
  .type-category #products.products-page .product .widget-parameter-value a {
    padding: 6px 10px;
    font-size: .8em;
  }
  .type-category #products.products-page .product .widget-parameter-more {
    margin: 0;
    font-size: .8em;
    color: #8a6a44;
    text-align: center;
  }
}
/* řazení (společné; mobilní blok níže ho musí v pořadí zdroje přebíjet –
   stejná specificita, Dolomit dává .category-header na mobilu font-size:0) */
.type-category .category-header {
  margin-bottom: 24px;
}
.type-category .category-header .listSorting .listSorting__controls li button {
  font-size: 1em;
  color: #1e1e1c;
}
/* --- mobil: lišta řazení + filtr přilepená pod hlavičkou ------------------ */
/* Dolomit: .overall-wrapper { overflow: hidden } → sticky hlavička na mobilu
   nedrží (překryv „hidden“ ruší sticky u potomků). Pod 767px overflow-x: clip
   – ořízne 100vw prvky stejně, ale sticky funguje: hlavička zůstává nahoře
   a odpočtová lišta (v toku nad ní) při scrollu odjede. Tlačítko filtru
   přesouvá dolomit-all JS (initCategoryFilterBar) z aside do
   .category-header; výšku hlavičky dává do --hdr-h. */
@media (max-width: 767px) {
  .overall-wrapper {
    overflow: visible;
    overflow-x: clip;
  }
  .type-category .category-header {
    position: sticky;
    top: var(--hdr-h, 61px);
    z-index: 8;
    display: flex;
    flex-direction: row;         /* Dolomit: row-reverse */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -15px 16px;
    padding: 8px 15px;
    background: #fff !important; /* Dolomit: transparent !important */
    border-bottom: 1px solid #ededed;
  }
  .type-category .category-header .listSorting {
    margin: 0;
  }
  .type-category .category-header .listSorting .listSorting__controls li button {
    font-size: 14px;             /* Dolomit dává .category-header font-size:0 → 1em z desktopu = neviditelný text */
    color: #1e1e1c !important;   /* text řazení (i v rozbalené nabídce) černý */
    background: transparent;     /* bílé pozadí by překrylo ikonu řazení (li má bílou od Dolomitu) */
  }
  /* nabídku řazení neotevírá emulovaný :hover (tap = hover + click naráz →
     hned se zvolí položka), ale třída .is-open z dolomit-all JS */
  .type-category .category-header .listSorting .listSorting__controls:hover {
    overflow: hidden;
  }
  .type-category .category-header .listSorting .listSorting__controls.is-open,
  .type-category .category-header .listSorting .listSorting__controls.is-open:hover {
    overflow: visible;
  }
  .type-category .category-header .listSorting .listSorting__controls.is-open li {
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
  }
  .type-category .category-header .listSorting .listSorting__controls.is-open li:last-child {
    border-bottom: 1px solid #ededed;
    box-shadow: 0 10px 18px -6px rgba(0, 0, 0, .14);
  }
  /* bez zvoleného řazení Dolomit neukáže žádný text (jen ikonu) – první
     položku posadíme na místo „aktuální“, ať je vidět, podle čeho se řadí */
  .type-category .category-header .listSorting .listSorting__controls:not(:has(.listSorting__control--current)) li:first-child button {
    position: absolute;
    top: 0;
    left: 0;
  }
  .type-category .category-header .filters-unveil-button-wrapper {
    display: block !important;   /* mimo .filters-wrapper ho základ Shoptetu skrývá */
    margin-left: auto;
  }
  .type-category .category-header .unveil-button {
    width: auto;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: #1e1e1c;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
  }
  .type-category .category-header .unveil-button:hover {
    background: #3a3a3a;
    color: #fff;
  }
}
/* --- mobil: USP pod výpisem (.benefitBanner.position--benefitCategory) ------
   Stejný vzhled jako USP na HP pod 767px (sekce 5): gradientní pruh přes
   šířku okna, bílé karty se zlatým rámečkem 2×2, ikona vlevo. Desktop
   zůstává na Dolomitu, proto samostatný blok jen v tomto @media. Dolomit
   tu má :before/:after skryté a karty pod 480px na 100 % šířky. */
@media (max-width: 767px) {
  .type-category .benefitBanner.position--benefitCategory {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 10px;
    margin: 0 0 40px;
    padding: 24px 0;
    border: 0;
    border-radius: 0 !important;  /* Dolomit: .st-rounding-corners … !important */
    background: transparent;
  }
  .type-category .benefitBanner.position--benefitCategory:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(208, 171, 130, .30) 0%, #fff 100%);
    z-index: -1;
  }
  .type-category .benefitBanner.position--benefitCategory:after {
    display: none;
  }
  .type-category .benefitBanner.position--benefitCategory .benefitBanner__item {
    flex: 1 1 calc(50% - 5px) !important;    /* 2 karty vedle sebe → 2×2 */
    width: auto;                 /* Dolomit ≤480px: 100 % */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e4cdb2 !important;
    border-radius: 6px;
    background: #fff;
  }
  .type-category .benefitBanner.position--benefitCategory .benefitBanner__picture {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 0 !important;
  }
  .type-category .benefitBanner.position--benefitCategory .benefitBanner__picture img {
    width: 36px;
    height: 36px;
  }
  .type-category .benefitBanner.position--benefitCategory .benefitBanner__item .benefitBanner__content {
    padding-left: 0;
    min-width: 0;
  }
  .type-category .benefitBanner.position--benefitCategory .benefitBanner__item .benefitBanner__title {
    display: block;
    font-size: .95em;
    line-height: 1.3;
  }
  .type-category .benefitBanner.position--benefitCategory .benefitBanner__item .benefitBanner__data {
    margin-top: 2px;
    font-size: .85em;
    line-height: 1.3;
  }
}



/* ==========================================================================
   16. DETAIL PRODUKTU – rozvržení a pravý sloupec
   DOM skládá dolomit-all JS (initProductDetail). Pravý sloupec řadíme přes
   flex order, aby DOM zůstal pro skripty Shoptetu beze změny.
   ========================================================================== */
.type-detail .p-detail-inner-header {
  display: none;                 /* H1 je přesunutý do pravého sloupce */
}
.type-detail .product-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
  margin: 0 0 50px;
  padding-top: 20px;
}
.type-detail .product-top .p-detail-info {
  display: none;
}
.type-detail .product-top .p-image-wrapper {
  flex: 999 1 0;                 /* bere volné místo přednostně, strop 882 px = 2 × 433 + 16;
                                    v užším okně se zmenšuje, pravý sloupec drží 380 px
                                    (se základem 882 px by se pod ~1340 px zalomil pod galerii) */
  width: auto;
  min-width: 0;
  max-width: 882px;
  padding: 0;
}
.type-detail .product-top .p-info-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 380px;
  min-width: 320px;
  width: auto;
  padding: 0;
}
@media (max-width: 991px) {
  .type-detail .product-top .p-image-wrapper,
  .type-detail .product-top .p-info-wrapper {
    flex: 1 1 100%;
  }
}

/* --- pořadí prvků v pravém sloupci --------------------------------------- */
.type-detail .p-info-wrapper > * { order: 20; }
.type-detail .p-info-wrapper > .p-detail-title        { order: 1; }
.type-detail .p-info-wrapper > .p-short-description   { order: 2; }
.type-detail .p-info-wrapper > .p-colors              { order: 3; }
.type-detail .p-info-wrapper > .detail-parameters     { order: 4; }
.type-detail .p-info-wrapper > .p-final-price-wrapper { order: 5; }
.type-detail .p-info-wrapper > .availability-value    { order: 6; }
.type-detail .p-info-wrapper > #shkDiscountPromoExtension,
.type-detail .p-info-wrapper > .shkDiscountPromoExtension { order: 7; } /* mezi cenou a košíkem */
.type-detail .p-info-wrapper > .add-to-cart,
.type-detail .p-info-wrapper > form,
.type-detail .p-info-wrapper > .pr-action             { order: 8; }
.type-detail .p-info-wrapper > .p-code                { order: 9; }
.type-detail .p-info-wrapper > .social-buttons-wrapper{ order: 30; }

/* --- název, krátký popis --------------------------------------------------- */
.type-detail .p-info-wrapper .p-detail-title {
  margin: 0 0 14px;
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
.type-detail .p-info-wrapper .p-short-description {
  margin: 0 0 22px;
  font-size: 1em;
  line-height: 1.6;
  color: #3a3a3a;
}
.type-detail .p-info-wrapper .p-short-description p:last-child {
  margin-bottom: 0;
}

/* --- Podobné jako kolečka -------------------------------------------------- */
.type-detail .p-colors {
  margin: 0 0 22px;
}
.type-detail .p-colors__label {
  display: block;
  margin: 0 0 10px;
  font-size: .95em;
  color: #3a3a3a;
}
.type-detail .p-colors__list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.type-detail .p-colors__item {
  display: block;
  width: 92px;
  height: 92px;
  padding: 6px;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.type-detail .p-colors__item img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.type-detail .p-colors__item:hover {
  border-color: var(--color-primary);
}
.type-detail .p-colors__item.is-current {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* --- tabulka parametrů (varianty + příplatek) ------------------------------ */
.type-detail .p-info-wrapper .detail-parameters {
  width: 100%;
  margin: 0 0 20px;
  border: 0;
}
.type-detail .p-info-wrapper .detail-parameters tr,
.type-detail .p-info-wrapper .detail-parameters th,
.type-detail .p-info-wrapper .detail-parameters td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.type-detail .p-info-wrapper .detail-parameters tr {
  margin: 0 0 18px;
}
.type-detail .p-info-wrapper .detail-parameters th {
  margin: 0 0 8px;
  font-size: .95em;
  font-weight: 400;
  color: #3a3a3a;
}
.type-detail .p-info-wrapper .detail-parameters #jsUnavailableCombinationMessage {
  margin: 0;
}

/* varianty jako tlačítka */
.type-detail .p-variants__select {
  display: none !important;      /* hodnotu drží skrytý select */
}
.type-detail .p-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.type-detail .p-variants__btn {
  min-width: 86px;
  padding: 11px 14px;
  border: 1px solid #d6d6d6;
  border-radius: 0;
  background: #fff;
  color: #1e1e1c;
  font-size: .95em;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.type-detail .p-variants__btn:hover {
  border-color: #1e1e1c;
}
.type-detail .p-variants__btn.is-active {
  border-color: #1e1e1c;
  background: #1e1e1c;
  color: #fff;
}
.type-detail .p-variants__btn.is-unavailable {
  position: relative;
  overflow: hidden;
  color: #b5b5b5;
  border-color: #e6e6e6;
  background: #f4f4f4;
}
.type-detail .p-variants__btn.is-unavailable:before {
  content: "";
  position: absolute;
  left: -10%;
  top: 50%;
  width: 120%;
  height: 1px;
  background: #d0d0d0;
  transform: rotate(-20deg);
  pointer-events: none;
}
.type-detail .p-variants__btn.is-unavailable.is-active {
  color: #1e1e1c;
  border-color: #1e1e1c;
  background: #f4f4f4;
}
.type-detail .p-variants__btn.is-disabled {
  cursor: not-allowed;
}

/* příplatek jako checkbox */
.type-detail .p-surcharge__select {
  display: none !important;
}
.type-detail .p-surcharge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 6px 0;
  font-weight: 400;
  cursor: pointer;
}
.type-detail .p-surcharge:before,
.type-detail .p-surcharge:after,
.type-detail .p-surcharge .p-surcharge__input:before,
.type-detail .p-surcharge .p-surcharge__input:after {
  display: none !important;      /* Dolomit kreslí vlastní checkbox přes pseudo-elementy */
}
.type-detail .p-surcharge .p-surcharge__input {
  position: relative;            /* Dolomit: display:none + vlastní čtvereček přes :before */
  display: inline-block !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: #1e1e1c;
  cursor: pointer;
}
.type-detail .p-surcharge__img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: #f7f6f4 url(/user/documents/upload/dolomit/darkove-baleni.png) center / contain no-repeat;
}
.type-detail .p-surcharge__name {
  flex: 1 1 auto;
  font-size: .95em;
  color: #1e1e1c;
}
.type-detail .p-surcharge__price {
  flex: 0 0 auto;
  font-size: .95em;
  color: #1e1e1c;
  white-space: nowrap;
}

/* doprava zdarma pod oblíbenými (zdroj: USP banner „Doprava zdarma") */
.type-detail .p-info-wrapper > .p-shipping-note { order: 10; }
.type-detail .p-shipping-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 18px;
  font-size: .95em;
  color: #1e1e1c;
}
.type-detail .p-shipping-note img {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

/* blok doplňku Dynamické akce a slevy – na celou šířku sloupce */
.type-detail .p-info-wrapper #shkDiscountPromoExtension,
.type-detail .p-info-wrapper .shkDiscountPromoExtension {
  width: 100% !important;
  max-width: none !important;
  margin: 4px 0 16px !important;
  padding: 0 !important;
}
.type-detail .p-info-wrapper .add-to-cart {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* tlačítko košíku až k pravému okraji sloupce (Dolomit: max-width 470px),
   aby vše v pravém sloupci končilo na jedné hraně */
.type-detail .product-top .add-to-cart .quantity {
  margin: 0 20px 0 0 !important;
}
.type-detail .product-top .add-to-cart button.add-to-cart-button {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo,
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__content {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__content__main {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
}
/* červená karta s kódem širší (admin doplňku rozměry ani písmo neumožňuje) */
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__content__promoWrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 8px;
  flex: 0 0 44% !important;
  width: 44% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__content__promoCodeText,
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__content__promoCode {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 100%;
}
/* bez mezery pod blokem (skrytý odpočet doplňku) */
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo,
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__bottom {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__countdown--timeHide,
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__bottom:empty {
  display: none !important;
}
/* písmo +35 %: „Cena po zadání kódu … Kč", „Slevový kód:" a znění kódu */
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__mainText,
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__content__promoCodeText,
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__content__promoCode {
  font-size: 1.35em !important;
  line-height: 1.3 !important;
}
.type-detail .p-info-wrapper #shkDiscountPromoExtension .shkDiscountPromo__mainText .shkDiscountPromo__content__promoPrice {
  font-size: 1em !important;     /* cena uvnitř věty už zvětšení dědí */
}

/* cena, dostupnost, kód, košík – Dolomit, jen odsazení */
.type-detail .p-info-wrapper .p-final-price-wrapper {
  margin: 6px 0 0 !important;
  padding: 0 !important;
}
.type-detail .p-info-wrapper .availability-value {
  margin: 4px 0 16px !important;
  padding: 0 !important;
}
.type-detail .p-info-wrapper .add-to-cart {
  margin-bottom: 10px;
}
.type-detail .p-info-wrapper .p-code {
  margin: 0 0 6px;
  font-size: .9em;
  color: #6a6a6a;
}


/* --- mobil: odsazení nahoře, varianty 3 sloupce ---------------------------- */
@media (max-width: 767px) {
  .type-detail .product-top {
    padding-top: 0;              /* galerie hned pod drobečky */
  }
  .type-detail .product-top .p-image-wrapper {
    margin: 0;                   /* Dolomit ≤992px: margin 20px auto */
  }
  .type-detail .p-variants {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 sloupce, řádků kolik je třeba */
  }
  .type-detail .p-variants__btn {
    min-width: 0;
    width: 100%;
    text-align: center;
  }
}


/* ==========================================================================
   17. DETAIL PRODUKTU – galerie jako mřížka
   Všechny položky (obrázky i video) stejný čtverec, max 433×433 px,
   video na druhé pozici. Původní hlavní obrázek a náhledy Dolomitu skryté.
   ========================================================================== */
.type-detail .p-image-wrapper.has-gallery-grid .p-image,
.type-detail .p-image-wrapper.has-gallery-grid .p-thumbnails-wrapper {
  display: none !important;
}
.type-detail .p-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.type-detail .p-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f7f6f4;
  border-radius: 2px;
}
.type-detail .p-gallery__item img,
.type-detail video.p-gallery__item {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.type-detail .p-gallery__item img {
  mix-blend-mode: multiply;
}
.type-detail .p-gallery__item .flags {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
/* --- mobil: jeden hlavní obrázek + miniatury + šipky ----------------------- */
/* Stejné položky (.p-gallery__item, obrázky i video), jen místo mřížky
   vodorovný pás se scroll-snapem: 1 položka = šířka okna (full-bleed),
   pod ním pás miniatur, přes obrázek šipky. Obal .p-gallery-stage, šipky
   .p-gallery-nav a miniatury .p-gallery-thumbs vytváří dolomit-all JS
   (initMobileGallery) jen pod 767px; přepínání = scrollTo, aktivní
   miniatura podle scrollLeft. Video: miniatura = první fotka + trojúhelník. */
@media (min-width: 768px) {
  .type-detail .p-gallery-nav,
  .type-detail .p-gallery-thumbs {
    display: none;               /* pojistka při změně šířky okna po sestavení */
  }
}
@media (max-width: 767px) {
  .type-detail .p-gallery-stage {
    position: relative;
    margin: 0 -16px;             /* přes okraje: Dolomit .p-detail-inner má margin -15px + padding 16px */
  }
  .type-detail .p-gallery {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .type-detail .p-gallery::-webkit-scrollbar {
    display: none;
  }
  .type-detail .p-gallery__item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 0;
  }
  .type-detail .p-gallery__item .flags {
    top: 12px;
    left: 16px;
  }
  .type-detail .p-gallery__item .flags .flag {
    padding: 4px 8px 5px;        /* Dolomit mobil .8em / 3px 6px 4px → o 30 % větší */
    font-size: 1.04em;
  }
  .type-detail .p-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px;
    min-width: 0;                /* Dolomit: form button { min-width: 90px; min-height: 42px } → elipsa */
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transform: translateY(-50%);
    cursor: pointer;
  }
  .type-detail .p-gallery-nav--prev { left: 4px; }
  .type-detail .p-gallery-nav--next { right: 4px; }
  .type-detail .p-gallery-nav:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    border-left: 2px solid #1e1e1c;
    border-bottom: 2px solid #1e1e1c;
  }
  .type-detail .p-gallery-nav--prev:before { transform: translateX(2px) rotate(45deg); }
  .type-detail .p-gallery-nav--next:before { transform: translateX(-2px) rotate(-135deg); }
  .type-detail .p-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 2px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .type-detail .p-gallery-thumbs::-webkit-scrollbar {
    display: none;
  }
  .type-detail .p-gallery-thumb {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    min-width: 0;                /* Dolomit: form button min-width/min-height */
    height: 64px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    background: #f7f6f4;
    overflow: hidden;
    cursor: pointer;
  }
  .type-detail .p-gallery-thumb.is-active {
    border-color: #d0ab82;
    box-shadow: inset 0 0 0 1px #d0ab82;
  }
  .type-detail .p-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
  }
  .type-detail .p-gallery-thumb--video:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(30, 30, 28, .65);
    transform: translate(-50%, -50%);
  }
  .type-detail .p-gallery-thumb--video:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
    transform: translate(-40%, -50%);
  }
}


/* ==========================================================================
   18. DETAIL PRODUKTU – popis a parametry přes celou šířku
   ========================================================================== */
.type-detail .p-detail-section {
  margin: 0 0 50px;
}
.type-detail .p-detail-section--description {
  padding-top: 10px;
}
.type-detail .p-detail-section--params {
  position: relative;
  isolation: isolate;
  margin: 0 0 40px;
  padding: 50px 0 60px;
}
.type-detail .p-detail-section--params:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(208, 171, 130, .32) 0%, #fff 100%);
  z-index: -1;
}
.type-detail .p-detail-section--params .extended-description {
  padding: 30px 36px 20px;
  background: #fff;
  border: 1px solid #d8c7ab;
  border-radius: 8px;
}
@media (max-width: 767px) {
  /* mezi parametry a USP žádný bílý pás: 40px margin sekce + 24px spodní
     padding Dolomitu na .p-detail-inner (USP je až za ním, uvnitř .p-detail) */
  .type-detail .p-detail-section--params {
    margin-bottom: 0;
  }
  .type-detail .p-detail-inner {
    padding-bottom: 0;
  }
  .type-detail .p-detail-section--params:before {
    background: linear-gradient(180deg, #fff 0%, rgba(208, 171, 130, .32) 100%);   /* mobil otočeno: dole zlatá → navazuje na zlatý začátek USP */
  }
  .type-detail .p-detail-section--params .extended-description {
    padding: 20px 18px 10px;
  }
}
.type-detail .p-detail-section h3,
.type-detail .p-detail-section .row-header-label:first-child h3 {
  position: relative;
  margin: 0 0 24px;
  padding: 0 0 16px;
  font-family: "Abhaya Libre", var(--template-headings-font), serif;
  font-size: 2em;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #1e1e1c;
}
.type-detail .p-detail-section h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 2px;
  background: var(--color-primary);
}
.type-detail .p-detail-section--description .basic-description {
  font-size: 1.02em;
  line-height: 1.7;
  color: #2b2b2b;
}
.type-detail .p-detail-section--description .basic-description p {
  margin: 0 0 14px;
}
.type-detail .p-detail-section--description .basic-description ul {
  margin: 0 0 14px 18px;
}
/* parametry: dvousloupcová mřížka řádků, popisek | hodnota */
.type-detail .p-detail-section--params .extended-description table,
.type-detail .p-detail-section--params .extended-description tbody {
  display: block;
  width: 100%;
}
.type-detail .p-detail-section--params .extended-description tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 60px;
}
.type-detail .p-detail-section--params .extended-description tr {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
}
.type-detail .p-detail-section--params .extended-description th,
.type-detail .p-detail-section--params .extended-description td {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: .95em;
}
.type-detail .p-detail-section--params .extended-description th {
  font-weight: 400;
  color: #a8825a;
}
.type-detail .p-detail-section--params .extended-description td {
  color: #1e1e1c;
}
.type-detail .p-detail-section--params .row-header-label-colon {
  display: none;
}
@media (max-width: 767px) {
  .type-detail .p-detail-section--params .extended-description tbody {
    grid-template-columns: 1fr;
  }
  .type-detail .p-detail-section--params .extended-description tr {
    grid-template-columns: 130px minmax(0, 1fr);
  }
}
/* záložky Popis / Soubory jsou prázdné → skryté (JS přidá .no-display) */
.type-detail .shp-tabs-wrapper.no-display {
  display: none !important;
}



/* ==========================================================================
   19. BLOG – výpis článků (body.type-posts-listing, #newsWrapper)
   Dolomit: flex-wrap; první článek = text vlevo + fotka vpravo s čarou pod
   sebou, ostatní bílé karty (stín) po 4 v řádku. Nově CSS grid 4 sloupce:
   nejnovější článek přes 2 sloupce jako fotka s textem přes ni (celoplošný
   tmavý gradient, text bílý), články 2 a 3 vedle něj jako karty Dolomitu,
   pod celým prvním řádkem oddělovací čára, dál karty beze změny.
   „Celý článek" (.read-more) vkládá JS Dolomitu. Selektor s #newsWrapper
   kvůli specificitě nad pravidly šablony.
   ========================================================================== */
/* --- pozadí stránky: gradient bílá → béžová přes celou šířku okna ---------- */
/* Dolomit dává body šedou (#f7f7f9 !important). Vracíme bílou a na
   #content-wrapper kreslíme pseudo-prvkem gradient přes 100vw; končí barvou
   #f0e4d7, kterou začíná gradient Instagram bloku v patičce (sekce 10), a
   přesahuje 100px pod #content-wrapper, aby mezi nimi nezůstal bílý pás
   (Instagram :before je v DOM později, takže překryv přemaluje). */
body.type-posts-listing {
  background: #fff !important;
}
body.type-posts-listing #content-wrapper {
  position: relative;
  isolation: isolate;
}
body.type-posts-listing #content-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -100px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff 0%, #f0e4d7 calc(100% - 100px), #f0e4d7 100%);
  z-index: -1;
  pointer-events: none;
}
body.type-posts-listing .sectionDescription h1 {
  font-family: "Abhaya Libre", var(--template-headings-font), serif;
  font-size: 2.6em;
  font-weight: 600;
  letter-spacing: 0;
  color: #1e1e1c;
}
body.type-posts-listing #newsWrapper.news-wrapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin: 0;
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item {
  width: auto;
  max-width: none;
  margin: 0;
}
/* první řádek (články 1–3): mezera pod ním, čára pod celým řádkem přes
   pseudo-prvek prvního článku (2 × jeho šířka + mezera = celý řádek) */
body.type-posts-listing #newsWrapper.news-wrapper .news-item:nth-child(-n+3) {
  margin-bottom: 40px;
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20px;
  width: calc(200% + 24px);
  height: 1px;
  background: #e5e5e5;
}

/* --- nejnovější článek: fotka + text přes ni ------------------------------ */
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 0;
  border: 0;
  background: #1e1e1c;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .image a {
  display: block;
  height: 100%;
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .text {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: none;
  padding: 120px 36px 32px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, .78) 100%);
  color: #fff;
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .text .title {
  display: block;                /* Dolomit: -webkit-box + line-clamp 2 */
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
  margin: 0 0 12px;
  font-family: "Abhaya Libre", var(--template-headings-font), serif;
  font-size: 2.2em;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .text .description {
  max-width: 640px;
  margin: 0 0 18px;
  font-size: 1em;
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .text .description p {
  margin: 0;
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .text .read-more {
  margin-top: 0;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .text .read-more:after {
  color: #fff;
}

/* --- responzivita (mobil zatím neřešen, jen aby grid nespadl) ------------- */
@media (max-width: 991px) {
  body.type-posts-listing #newsWrapper.news-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child:after {
    width: 100%;
  }
}
@media (max-width: 767px) {
  body.type-posts-listing #newsWrapper.news-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child {
    grid-column: auto;
    min-height: 360px;
  }
  body.type-posts-listing #newsWrapper.news-wrapper .news-item:first-child .text {
    padding: 80px 20px 24px;
  }
}



/* ==========================================================================
   20. MOBIL (≤767px) – společné
   ========================================================================== */
/* --- hamburger menu přes celou šířku --------------------------------------- */
/* Dolomit: boční panel 320px (#navigation je uvnitř #header, position: fixed,
   left −322px → 0), stránka za ním ztmavená a scrolluje s ním. Nově: panel
   přes celou šířku od spodní hrany hlavičky dolů (top dává dolomit-all JS
   do --nav-top), stránka zamčená, hlavička zůstává nahoře jako pevná lišta
   (logo → HP, účet, lupa, košík) a hamburger se změní na ✕. Vlastní křížek
   Dolomitu, tmavý překryv a duplicitní „Přihlášení" dole v panelu skryté. */
@media (max-width: 767px) {
  html.navigation-window-visible,
  body.navigation-window-visible {
    overflow: hidden;            /* zamknout scroll stránky pod menu */
  }
  .navigation-window-visible #header #navigation {
    top: var(--nav-top, 0px);
    bottom: 0;
    left: 0 !important;
    width: 100% !important;
    height: auto;
    margin: 0 !important;        /* Shoptet/Dolomit: margin-top 60px → panel seděl o hlavičku níž */
    padding: 0 0 24px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-top: 1px solid #ededed;
  }
  .navigation-window-visible #header #navigation .navigation-close,
  .navigation-window-visible #header #navigation .navigationActions,
  .navigation-window-visible .overall-wrapper:after {
    display: none !important;
  }
  .navigation-window-visible #header .responsive-tools a[data-target="navigation"]:before {
    content: "\e912";           /* ikona ✕ z fontu Shoptetu (stejná jako .navigation-close) */
  }
  /* rozbalená kategorie: Dolomit dává šipku zpět (.submenu-arrow, ikona ←)
     45px nad nadpis, do horního paddingu panelu (52px), který jsme zrušili
     → místo pro ni dostane jen rozbalená položka */
  .navigation-window-visible #header #navigation ul.menu-level-1 > li.ext.exp {
    padding-top: 48px;
  }
  .navigation-window-visible #header #navigation ul.menu-level-1 > li.ext.exp > .menu-level-2 {
    top: 88px;                   /* Dolomit: absolutně top 40px pod nadpisem → + 48px paddingu */
  }
}

/* Dolomit dává #content-wrapper { margin-top: 85px } jako kompenzaci fixní
   hlavičky. Hlavička je ale na mobilu ve skutečnosti position: sticky
   (v toku stránky, pod odpočtovou lištou), takže 85px je jen prázdná
   mezera mezi hlavičkou a obsahem (na HP nad bannerem). Pryč. */
@media (max-width: 767px) {
  #content-wrapper {
    margin-top: 0;
  }
  /* HP: mobilní carousel Shoptet vykresluje uvnitř main#content jako
     .row.banners-row s margin-top: 40px; margin propadá přes main a
     .content-wrapper-in až k #content-wrapper → mezera hlavička → banner.
     (Desktopový carousel je mimo #content-wrapper, sekce 3.) */
  .type-index #content-wrapper .banners-row {
    width: 100vw;                /* přes celou šířku okna (kontejner má padding 15px) */
    margin: 0 calc(50% - 50vw);
  }
  .type-index #content-wrapper .banners-row > div {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
  }
  /* mezera banner → USP: .carousel.slide uvnitř .banners-row má
     margin-bottom: 20px (změřeno v DevTools) */
  .type-index #content-wrapper .banners-row .carousel {
    margin-bottom: 0;
  }
  /* prázdný košík: Dolomit schovává blok s nabídkou („Podívejte se na naši
     nabídku" – kategorie + vyhledávání); starý web ho ukazoval */
  body.ordering-process .cart-empty .col-md-4 .cart-content {
    display: block;
  }
  /* objednávkový proces: Dolomit má vlastní, specifičtější kompenzaci
     hlavičky (.ordering-process #content-wrapper { margin-top: 60px }) –
     hlavička je i tady sticky v toku, takže pryč; nadpis prázdného košíku
     má od Dolomitu margin-top 80px */
  body.ordering-process #content-wrapper {
    margin-top: 0;
  }
  body.ordering-process .cart-inner.cart-empty h1,
  body.ordering-process .cart-inner.cart-empty .h1 {
    margin-top: 30px;
  }
}