/* ==========================================================================
   notte.cz: jediný vlastní stylesheet (kompromis: UX ze starých vrstev,
   postavený stabilně). Nahrazuje style.css, css/styles.css i staré notte.css.
   Cíl: šablona Disco (generace 3).

   Zásady:
   - nejdřív nativní proměnné šablony, selektory jen kde to jinak nejde
   - barvy a rozměry jen přes tokeny --notte-*
   - vlastní třídy notte-*; ji-* zůstává jen u HTML v administraci
   - !important jen tam, kde přebíjíme inline styl nebo utilitu šablony
   - prvky, které vytváří notte.js, mají třídy notte-*; když JS selže,
     web zůstane funkční v nativní podobě šablony
   ========================================================================== */


/* 1) TOKENY ---------------------------------------------------------------- */

:root {
  --notte-pine:        #3B5B50;   /* informační lišta */
  --notte-ink:         #1F1B16;   /* text, nadpisy, tmavé prvky */
  --notte-muted:       #6B645A;   /* popisky */
  --notte-white:       #FFFFFF;
  --notte-bg:          #FFFFFF;   /* pozadí stránky */
  --notte-nav-bg:      #F1EADF;   /* pás hlavního menu */
  --notte-topbar-bg:   #FFFFFF;   /* horní utility lišta */
  --notte-surface:     #F1EADF;   /* patička, dlaždice, odznaky */
  --notte-surface-2:   #EBE2D2;   /* hover na plochách */
  --notte-line:        #E4DCCD;   /* linky */
  --notte-line-strong: #CFC5B4;   /* rámečky */
  --notte-field-line:  #A5A8A8;   /* podtržení vyhledávání */

  --notte-radius:      8px;
  --notte-radius-lg:   12px;

  --notte-pad:         20px;      /* boční odsazení kontejneru */
  --notte-p-pad:       10px;      /* odsazení karty produktu */
  --notte-section-gap: 64px;
  --notte-title-gap:   32px;
  --notte-hp-pad:      45px;
  --notte-product-title-gap: 60px;

  --notte-admin-bar-h: 0px;
}

body:is(.admin-logged, .jh-admin-bar):not(.jh-admin-bar-hidden) {
  --notte-admin-bar-h: 25px;
}
@media (max-width: 991px) {
  body:is(.admin-logged, .jh-admin-bar):not(.jh-admin-bar-hidden) {
    --notte-admin-bar-h: 0px;
  }
}

@media (min-width: 768px) {
  :root {
    --notte-icon:            32px;
    --notte-icon-gap:        25px;
    --notte-topbar-h:        30px;
    --notte-header-top-h:    90px;
    --notte-helper-w:        110px;
    --notte-popup-offset:    16px;
    --notte-whisperer-margin: 170px;
  }
}
@media (max-width: 1199px) {
  :root { --notte-whisperer-margin: 0px; }
}
@media (max-width: 479px) {
  :root {
    --notte-section-gap: 50px;
    --notte-title-gap:   15px;
    --notte-hp-pad:      5px;
  }
}

/* ikony (data-URI SVG) */
:root {
  --notte-ico-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M2.32 1.05a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.42l12.68 12.68L15 13.73ZM27.38 28.94a1 1 0 0 0 .71.3 1 1 0 0 0 .71-1.71L16.41 15.15 15 16.56Z'/%3E%3Cpath d='M29.09 1.05a1 1 0 0 0-1.41 0L15 13.73l-1.41 1.42L1.2 27.53a1 1 0 0 0 .71 1.71 1 1 0 0 0 .71-.3L15 16.56l1.41-1.41L29.09 2.47a1 1 0 0 0 0-1.42Z'/%3E%3C/svg%3E");
  --notte-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M14.84 17.28a7.37 7.37 0 1 0-7.37-7.37 7.38 7.38 0 0 0 7.37 7.37Z' style='fill:none'/%3E%3Cpath d='M14.84 19.28a9.37 9.37 0 1 0-9.37-9.37 9.38 9.38 0 0 0 9.37 9.37Zm0-16.73a7.37 7.37 0 1 1-7.37 7.36 7.37 7.37 0 0 1 7.37-7.36ZM14.84 21.75A18.57 18.57 0 0 0 .81 28 1 1 0 0 0 1 29.41a1.05 1.05 0 0 0 .62.21 1 1 0 0 0 .79-.37 16.68 16.68 0 0 1 12.46-5.5 18 18 0 0 1 12.8 5.52 1 1 0 1 0 1.5-1.27 19.63 19.63 0 0 0-14.33-6.25Z'/%3E%3C/svg%3E");
  --notte-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none%7D%3C/style%3E%3C/defs%3E%3Cg id='kresby'%3E%3Ccircle cx='12.52' cy='11.95' r='9.29' class='cls-1'/%3E%3Ccircle cx='12.52' cy='11.95' r='9.29' class='cls-1'/%3E%3Cpath d='m28.48 27.63-7.84-7.84a11.28 11.28 0 1 0-8.12 3.46 11.18 11.18 0 0 0 6.6-2.15l8 8a1 1 0 0 0 1.41-1.42ZM3.23 12a9.3 9.3 0 1 1 9.29 9.3A9.3 9.3 0 0 1 3.23 12Z'/%3E%3C/g%3E%3C/svg%3E");
  --notte-ico-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none%7D%3C/style%3E%3C/defs%3E%3Cg id='kresby'%3E%3Cpath d='M15 2.66a3.07 3.07 0 0 0-2.9 2.08h5.8A3.07 3.07 0 0 0 15 2.66ZM25 6.74H5a1 1 0 0 0-.69.3.91.91 0 0 0-.25.7l1.09 19a.94.94 0 0 0 .94.89h17.79a.94.94 0 0 0 .94-.89l1.09-19a.91.91 0 0 0-.25-.7 1 1 0 0 0-.66-.3Z' class='cls-1'/%3E%3Cpath d='M27.11 5.66A3 3 0 0 0 25 4.74h-5a5.08 5.08 0 0 0-10 0H5a2.94 2.94 0 0 0-2.91 3.12l1.09 19a3 3 0 0 0 2.94 2.77h17.76a3 3 0 0 0 2.94-2.77l1.09-19a3 3 0 0 0-.8-2.2ZM15 2.66a3.07 3.07 0 0 1 2.9 2.08h-5.8A3.07 3.07 0 0 1 15 2.66Zm9.82 24.07a.94.94 0 0 1-.94.89H6.12a.94.94 0 0 1-.94-.89l-1.09-19A.91.91 0 0 1 4.34 7 1 1 0 0 1 5 6.74h20a1 1 0 0 1 .69.3.91.91 0 0 1 .25.7Z'/%3E%3C/g%3E%3C/svg%3E");
  --notte-ico-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M28.56.66H1.44a1 1 0 0 0 0 2h27.12a1 1 0 0 0 0-2ZM28.56 14H1.44a1 1 0 0 0 0 2h27.12a1 1 0 1 0 0-2ZM28.56 27.34H1.44a1 1 0 0 0 0 2h27.12a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E");
  --notte-ico-newsletter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 115.575 65.92'%3E%3Cpath d='M99.24 49.31A4.2 4.2 0 0 1 97.16 51a4.25 4.25 0 0 1-2 .24l-.16.16c1.27 4.65.23 8.08-2.74 9.19-3.36 1.25-6.85-1.28-9.1-7.31-2.06-5.53-1-9.38 2.17-11a11.05 11.05 0 0 1 3.87-1.13v-.44a12.43 12.43 0 0 0-3.91.79c-5.78 2.15-9 7.56-6.67 13.92 2.38 6.21 8.01 8.1 13.68 5.98 5.15-1.91 8.32-6.51 7.16-12.06z' class='cls-1' style='fill:%231a1a1b' transform='matrix(1 0 0 1 -11.77 -17.79)'/%3E%3Cpath d='M93.17 48.25a2.84 2.84 0 0 0 4.11.85 3.23 3.23 0 0 0 .8-4.51c-1.33-2.07-4-2.92-5.39-3.24l-.22.4a2.73 2.73 0 0 1 .7 2c-.05 1.38-.79 3.08 0 4.5zm-42.41-3.31a.94.94 0 0 1 .12-.09.94.94 0 0 0-.12.09zm58.61-27.12h-.15.17zM50.54 45.6a.65.65 0 0 1 0-.2.65.65 0 0 0 0 .2zm.04-.37a.69.69 0 0 1 .1-.17c-.03.07-.07.11-.1.17zm58.96-27.3.15.1zM51.7 44.69l2.15.7 53.42-24.9 1-2.19a.81.81 0 0 1 .46-.45L51.05 44.73a.87.87 0 0 1 .65-.04zm57.22-26.9h.13z' class='cls-1' style='fill:%231a1a1b' transform='matrix(1 0 0 1 -11.77 -17.79)'/%3E%3Cpath d='m127.26 55.56-17.39-37.28s-.05-.06-.07-.1a.89.89 0 0 1 .08.85l-.8 1.79 16.18 34.69-56 26.12L53.11 47l-2-.64a.89.89 0 0 1-.57-.61.89.89 0 0 0 0 .14L68 83.2a.89.89 0 0 0 .81.51.87.87 0 0 0 .38-.08l57.63-26.88a.89.89 0 0 0 .44-1.19z' class='cls-1' style='fill:%231a1a1b' transform='matrix(1 0 0 1 -11.77 -17.79)'/%3E%3Cpath d='m108.25 18.3-1 2.19-8.36 18.73a.9.9 0 0 0 .45 1.19.92.92 0 0 0 .36.07.89.89 0 0 0 .82-.53l8.56-19.13.8-1.79a.89.89 0 0 0-.08-.85l-.11-.15-.15-.1-.11-.08h-.47l-.21.06a.81.81 0 0 0-.5.39zm-57.1 28.09 2 .64 19.83 6.52a.87.87 0 0 0 .28.05.9.9 0 0 0 .27-1.75l-19.68-6.46-2.15-.7a.87.87 0 0 0-.67.05l-.15.11a.94.94 0 0 0-.12.09s0 .09-.08.14a.69.69 0 0 0-.1.17.59.59 0 0 0 0 .14.65.65 0 0 0 0 .2.58.58 0 0 0 0 .18.89.89 0 0 0 .57.62zm-38.38-7.81h35.64a1 1 0 1 0 0-2H12.77a1 1 0 0 0 0 2zm0 15.42h32.65a1 1 0 0 0 0-2H12.77a1 1 0 0 0 0 2zm38.54 13.43H12.77a1 1 0 0 0 0 2h38.54a1 1 0 0 0 0-2z' class='cls-1' style='fill:%231a1a1b' transform='matrix(1 0 0 1 -11.77 -17.79)'/%3E%3C/svg%3E");
  --notte-ico-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 35'%3E%3Cpath d='M7.18 30.67A1 1 0 0 1 6.47 29l11.46-11.5L6.47 6a1 1 0 0 1 0-1.41 1 1 0 0 1 1.42 0l12.16 12.2a1 1 0 0 1 0 1.42L7.89 30.37a1 1 0 0 1-.71.3Z'/%3E%3Cpath d='M20.65 30.67a1 1 0 0 1-.7-.3A1 1 0 0 1 20 29l11.41-11.5L20 6a1 1 0 0 1 1.41-1.41l12.12 12.2a1 1 0 0 1 0 1.42L21.36 30.37a1 1 0 0 1-.71.3Z'/%3E%3C/svg%3E");
}


/* 2) NATIVNÍ PROMĚNNÉ ŠABLONY (Disco) -----------------------------------------
   Pozadí stránky, linky a barva textu se kreslí z těchto proměnných.
   Přepis proměnné je stabilnější než přepis pravidel. Barva tlačítek
   (Do košíku) se bere z Editoru vzhledu, proto ji tu nepřepisujeme. */

:root {
  --colors-surface-primary:               var(--notte-bg);
  --colors-surface-secondary:             var(--notte-surface);
  --colors-foregrounds-borders-secondary: var(--notte-line);
  --colors-foregrounds-headlines-primary: var(--notte-ink);
  --colors-foregrounds-content-primary:   var(--notte-ink);
  --color-header-background:              var(--notte-white);
  --banner-rating-border-color:           var(--notte-line-strong);
}

.btn,
.form-control,
.quantity,
.checkout-box,
.order-summary-inner {
  border-radius: var(--notte-radius);
}
.quantity { overflow: hidden; }
.form-control::placeholder { color: var(--notte-muted); opacity: .7; }

.btn-conversion { transition: transform .3s ease, box-shadow .3s ease; }
.btn-conversion:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(31, 27, 22, .18);
}

.overall-wrapper { padding-bottom: 0 !important; }


/* 3) INFORMAČNÍ LIŠTA A HORNÍ UTILITY LIŠTA ---------------------------------- */

.site-msg.information {
  background-color: var(--notte-pine);
  color: var(--notte-white);
  max-width: none;
  position: relative;
  left: 0;
  top: 0;
  bottom: auto;
  opacity: 1;
  box-shadow: none;
  padding-block: 10px;
}
.site-msg.information .text {
  padding-left: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--notte-white);
}
.site-msg.information .close::before { color: var(--notte-white); }

.top-navigation-bar {
  height: var(--notte-topbar-h, 30px);
  background-color: var(--notte-topbar-bg);
}
.top-navigation-bar a:hover { text-decoration: underline; }
.top-navigation-menu a,
.notte-top-contacts a { color: var(--notte-ink); }

@media (min-width: 768px) {
  .top-navigation-bar > .container { justify-content: space-between; padding-inline: 0; }
  .top-navigation-bar > .container::before,
  .top-navigation-bar > .container::after { content: none; }
  .top-navigation-bar .container > div { flex: unset; }
  .top-navigation-bar .container > .top-navigation-menu { flex: 1; }
  .notte-has-account .top-navigation-bar .top-navigation-tools { display: none; }  /* přihlášení je ikona v hlavičce (třídu nastaví notte.js po ověření) */

  .notte-top-contacts {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
  }
  .notte-top-contacts a {
    display: inline-flex;
    align-items: center;
    padding: 4px 15px;
  }
  .notte-top-contacts a:last-child { padding-right: 0; }
  .notte-top-contacts__mail::before,
  .notte-top-contacts__phone::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background: var(--notte-ico) no-repeat center / contain;
  }
  .notte-top-contacts__phone { --notte-ico: url("../upload/Images/phone-call.svg"); }
  .notte-top-contacts__mail  { --notte-ico: url("../upload/Images/email.svg"); }
}


/* 4) HLAVIČKA: logo, hledání, ikony (desktop) ---------------------------------- */

@media (min-width: 768px) {
  #header .site-name a img { transform: translateX(-4%); }
  #header .header-top-wrapper .search { flex: unset; margin-left: auto; padding-inline: 20px 0; }
  #header .search fieldset { display: flex; align-items: center; }

  #header .search-input {
    border: 0;
    border-bottom: 2px solid var(--notte-field-line);
    border-radius: 0;
    padding-left: 10px;
    font-size: 14px;
    height: unset;
    width: 30dvw;
    max-width: 270px;
  }
  #header .search-form:hover .search-input,
  #header .search-input:focus,
  .search-window-visible #header .search-input {
    border: 0;
    border-bottom: 2px solid var(--notte-ink);
    box-shadow: none;
    background: none;
  }
  #header .search-input-icon {
    order: 1;
    position: static;
    transform: none;
    width: var(--notte-icon);
    height: var(--notte-icon);
    margin-left: var(--notte-icon-gap);
    cursor: pointer;
  }
  #header .search-input-icon::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background: var(--notte-ico-search) no-repeat center / contain;
  }
  .search-focused #header .search-input-icon::before,
  .search-window-visible .search-input-icon::before {
    background-image: var(--notte-ico-close);
  }

  #header .header-top-wrapper .navigation-buttons { flex: unset; margin-left: unset; padding-left: 0; }
  #header .navigation-buttons { display: flex; }

  /* ikona účtu: nový odkaz s vloženým SVG (vytváří notte.js); !important přebíjí případné
     skrývání neznámých odkazů v .navigation-buttons v šabloně */
  #header .navigation-buttons .notte-header-account {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: var(--notte-icon);
    height: var(--notte-icon);
    margin-left: var(--notte-icon-gap);
    color: var(--notte-ink);
    cursor: pointer;
  }
  #header .navigation-buttons .notte-header-account svg {
    display: block;
    width: 32px;
    height: 32px;
  }
  #header .navigation-buttons .notte-header-account:hover { color: var(--notte-muted); }

  /* ikona košíku */
  #header .navigation-buttons a[data-target="cart"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--notte-icon);
    height: var(--notte-icon);
    margin-left: var(--notte-icon-gap);
    text-align: center;
  }
  #header .navigation-buttons a[data-target="cart"]::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0;
    background: var(--notte-ico-cart) no-repeat center / contain;
  }
  #header .cart-price { display: none !important; }   /* přebíjí utilitu visible-lg-inline-block */
  #header .navigation-buttons a[data-target="cart"] i { inset: auto -4px -4px auto; }
}

/* ikony na mobilu */
@media (max-width: 767px) {
  #header .navigation-buttons .notte-header-account { display: none; }   /* přihlášení je v hamburger menu */
  #header .navigation-buttons a[data-target="search"]::before,
  #header .navigation-buttons a[data-target="cart"]::before,
  #header .navigation-buttons a[data-target="navigation"]::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 80px;
    background: var(--notte-ico-search) no-repeat center / contain;
  }
  #header .navigation-buttons a[data-target="cart"]::before       { background-image: var(--notte-ico-cart); }
  #header .navigation-buttons a[data-target="navigation"]::before { background-image: var(--notte-ico-menu); }
  .navigation-window-visible #header .navigation-buttons a[data-target="navigation"]::before { background-image: var(--notte-ico-close); }
  .search-focused .search-input-icon:before,
  .search-window-visible .search-input-icon:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: var(--notte-ico-close) no-repeat center / contain;
  }
}
@media (max-width: 479px) {
  #header .navigation-buttons a[data-target="search"]::before,
  #header .navigation-buttons a[data-target="cart"]::before,
  #header .navigation-buttons a[data-target="navigation"]::before { width: 20px; height: 50px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .overall-wrapper { padding-top: 80px !important; }   /* hlavička je na mobilu fixní */
}


/* 5) HLAVNÍ MENU --------------------------------------------------------------- */

.menu-level-1 { gap: 4px; }
#navigation .menu-level-1 > li > a b {
  font-family: var(--template-headings-font), sans-serif;
  font-weight: 500;
  letter-spacing: .4px;
  font-size: 18px;
  line-height: 18px;
  color: var(--notte-ink);
}
#navigation .menu-level-1 > li:nth-child(-n+3) > a b { font-weight: 700; }

@media (min-width: 768px) {
  /* krémový pás menu */
  #header .header-bottom,
  #navigation,
  #navigation .menu-level-1 { background-color: var(--notte-nav-bg); }

  .navigation-wrapper li.ext > a .submenu-arrow { display: inline-block; padding-left: 1ex; }
  .navigation-wrapper li.ext > a .submenu-arrow::after,
  .menu-helper > span::after {
    transform: rotate(270deg);
    font-size: 14px;
    position: relative;
    top: -1px;
    line-height: 0;
  }
  .submenu-visible .navigation-wrapper li.exp > a .submenu-arrow::after,
  .menu-helper-visible .menu-helper > span::after { content: "\e90e"; transform: none; }
  .menu-helper > span { padding-inline: 20px; }

  /* rovnoměrné rozprostření položek: jen když notte.js zabalil měření menu
     (html.notte-menu-spread). Bez něj zůstává nativní menu šablony. */
  .notte-menu-spread #navigation:not(.notte-measuring) .navigation-in { width: calc(100% - var(--notte-helper-w)); }
  .notte-menu-spread #navigation:not(.notte-measuring).fitted .navigation-in { width: 100%; }
  .notte-menu-spread #navigation:not(.notte-measuring) .navigation-in > ul { justify-content: space-between; }
  .notte-menu-spread #navigation:not(.notte-measuring) .navigation-in > ul > li.splitted { display: none; }

  /* rozbalené menu (Disco: li.ext.exp > ul.menu-level-2) */
  .submenu-visible .navigation-in > ul > li.ext.exp > ul {
    border-bottom: 0;
    border-radius: 0 0 var(--notte-radius-lg) var(--notte-radius-lg);
    box-shadow: 0 18px 36px rgba(31, 27, 22, .14);
    padding: 8px 12px 12px;
  }
  .navigation-in > ul > li.ext > ul > li {
    border-radius: var(--notte-radius);
    transition: background-color .2s ease;
  }
  .navigation-in > ul > li.ext > ul > li:hover { background-color: var(--notte-surface); }
}


/* 6) VYSOUVACÍ OKNA (přihlášení, košík), STICKY HLAVIČKA ----------------------- */

@media (min-width: 768px) {
  .template-13:not(.jupiter) #header { top: -1px; padding-top: 1px; }   /* trik pro sticky pozorovatel */

  .user-action > .container { padding-inline: 0; }
  .user-action-in { position: relative; }
  body:not(.notte-sticky) .user-action-in { top: calc(var(--notte-topbar-h) + var(--notte-admin-bar-h)); }
  body.notte-sticky .user-action { position: fixed; top: -1px; left: 0; right: 0; z-index: 10; }

  .user-action-in .popup-widget,
  .scrolled .popup-widget.cart-widget {
    top: calc(var(--notte-header-top-h) - var(--notte-popup-offset)) !important;   /* přebíjí inline pozici šablony */
    right: 0;
    left: unset;
    bottom: unset;
    margin: 0;
    position: absolute !important;
  }
  .user-action-in .popup-widget.login-widget::before { right: 65px; }
  .user-action-in .popup-widget.cart-widget { margin-top: 18px; }
  .user-action-in .popup-widget.cart-widget::before { right: 13px; }

  .searchWhisperer.active {
    width: calc(100% - 2 * var(--notte-whisperer-margin));
    margin-inline: auto;
    top: 100%;
  }
}

[data-testid="formLogin"] [data-testid="signup"] { font-weight: 700; text-decoration: underline; }
[data-testid="formLogin"] [data-testid="signup"]:hover { text-decoration: none; }
[data-testid="formLogin"] .btn-login { font-weight: 400; }


/* 7) PRÁZDNÝ KOŠÍK: hover okno -------------------------------------------------
   Okno vytváří notte.js hned za tlačítkem košíku. Ukáže se jen, když odkaz
   košíku NEobsahuje <i> s počtem kusů. Jen desktop s myší. */

.notte-cart-empty { display: none; }

@media (min-width: 768px) and (hover: hover) {
  #header .navigation-buttons { position: relative; }

  .notte-cart-empty {
    --notte-cart-empty-offset: 14px;
    display: block;
    position: absolute;
    top: calc(100% + var(--notte-cart-empty-offset));
    right: 0;
    z-index: 1002;
    width: 280px;
    padding: 20px;
    background: var(--colors-surface-white, #fff);
    border: 1px solid var(--notte-line);
    border-radius: var(--notte-radius-lg);
    box-shadow: 0 18px 36px rgba(31, 27, 22, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .notte-cart-empty::after {                /* přemostění mezery */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--notte-cart-empty-offset);
  }
  .notte-cart-empty::before {               /* šipka k ikoně */
    content: "";
    position: absolute;
    top: -6px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: var(--colors-surface-white, #fff);
    border-top: 1px solid var(--notte-line);
    border-left: 1px solid var(--notte-line);
    transform: rotate(45deg);
  }
  #header .navigation-buttons a[data-target="cart"]:not(:has(i)):is(:hover, :focus-visible) + .notte-cart-empty,
  #header .navigation-buttons .notte-cart-empty:hover,
  #header .navigation-buttons .notte-cart-empty:focus-within {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .notte-cart-empty__title { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--notte-ink); }
  .notte-cart-empty__text  { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--notte-muted); }
  .notte-cart-empty__btn   { display: block; margin-top: 16px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .notte-cart-empty { transition: none; } }


/* 8) PATIČKA ------------------------------------------------------------------- */

#footer { background-color: var(--notte-surface); }
.footer-bottom { background-color: var(--notte-white); padding-block: 24px; }

.footer-rows .custom-footer { padding-bottom: 0; }
.custom-footer .banner-wrapper > span > p:last-child { margin-bottom: 0; }
.banner-wrapper h4 { margin-bottom: 16px; }
.banner-wrapper ul { margin-top: 0; padding-top: 0; }
.custom-footer__contact { display: none; }   /* kontakt je v kontaktní liště */
#footer .social-icon-list { display: none; }

@media (min-width: 768px) and (max-width: 1199px) {
  .custom-footer { display: flex; flex-wrap: wrap; }
}

/* newsletter (vytváří notte.js: přesune nativní formulář do pruhu) */
.notte-newsletter { background: var(--notte-surface); }
.notte-newsletter__in {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 40px;
  row-gap: 30px;
  padding-block: 45px;
}
.notte-newsletter__in::before,
.notte-newsletter__in::after { content: none; }
.notte-newsletter__header {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  row-gap: 20px;
  column-gap: 35px;
}
.notte-newsletter__header::before {
  content: "";
  display: inline-block;
  width: 120px;
  height: 75px;
  background: var(--notte-ico-newsletter) no-repeat center / contain;
}
.notte-newsletter__header h4 { font-size: 26px; text-transform: none; margin: 0 0 6px; line-height: 1.1; }
.notte-newsletter__header p  { margin: 0; font-size: 17px; }
.notte-newsletter__form { flex: 1; max-width: 520px; }
.notte-newsletter__form .form-control {
  border-radius: 5px;
  border: 1px solid var(--notte-line-strong);
  height: 56px;
  padding-left: 20px;
}
.notte-newsletter__form br { display: none; }
.notte-newsletter__form .consents { margin: 2px 0 0; }
.notte-newsletter__form .consents label { cursor: auto; }
.notte-newsletter__form .consents a { font-weight: 400; }
.notte-newsletter__form .consents a:hover { text-decoration: none; }
.notte-newsletter__form .btn {
  font-size: 0;
  line-height: 0;
  background: var(--notte-ink);
  border-radius: 5px;
  margin: 8px;
  border: 0;
  height: 40px;
  padding-inline: 20px;
}
.notte-newsletter__form .btn::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 20px;
  background: var(--notte-white);
  mask: var(--notte-ico-chevron-right) no-repeat center / contain;
}

/* kontaktní lišta nad spodní částí patičky (vytváří notte.js) */
.notte-contact-bar { background: var(--notte-surface); padding: 11px 0 62px; }
.notte-contact-bar .container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 25px;
  column-gap: 35px;
}
.notte-contact-bar .container::before,
.notte-contact-bar .container::after { content: none; }
.notte-contact-bar__left { position: relative; }
.notte-contact-bar__left h4 { font-size: 26px; margin: 0 0 6px; }
.notte-contact-bar__left p  { margin-bottom: 0; font-size: 14px; position: absolute; }
.notte-contact-bar__center { display: contents; }
.notte-contact-bar__center a { font-size: 22px; font-weight: 700; }
.notte-contact-bar__center a:hover { text-decoration: underline; }
.notte-contact-bar__center a::before,
.notte-contact-bar__wapp::before {
  content: "";
  display: inline-block;
  margin-right: 12px;
  width: 32px;
  height: 32px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  vertical-align: middle;
}
.notte-contact-bar__phone::before { background-image: url("../upload/Images/phone-call.svg"); }
.notte-contact-bar__mail::before  { background-image: url("../upload/Images/email.svg"); }
.notte-contact-bar__wapp {
  width: 230px;
  font-size: 0 !important;                    /* přebíjí velikost písma tlačítka .btn */
  border: 0 !important;
  border-radius: var(--notte-radius-lg) !important;
  background: url("../upload/Images/wa-button.svg") 50% 50% / cover no-repeat;
  transition: none !important;
}
.notte-contact-bar__wapp::before { content: none; }
.notte-contact-bar__wapp:hover { background-image: url("../upload/Images/wa-button-hover.svg"); }

/* lišta odkazů */
.footer-links-icons { padding-top: 0; padding-bottom: 10px; }
.footer-links-icons .footer-links { display: flex; flex-flow: row wrap; justify-content: space-between; list-style: none; }
.footer-links .footer-link { padding-left: 0; margin-bottom: 10px; }
.footer-links .footer-link a { display: inline-block; padding-block: 5px; }
.footer-links .footer-link:not(:last-child) { margin-right: 20px; padding-right: 20px; position: relative; }
.footer-links .footer-link:not(:last-child)::after { content: "|"; position: absolute; right: -1px; top: -1px; font-weight: 700; }

/* spodní řádek: copyright, sociální sítě, podpis */
.footer-bottom .container { display: flex; flex-flow: row wrap; align-items: center; }
.footer-bottom .copyright { display: block; flex: 1; margin-right: 20px; font-weight: 600; }
.footer-bottom .copyright i { font-weight: 400; }
.notte-copyright-notice { display: block; margin: 4px 0; font-weight: 400; }
.footer-bottom .js-cookies-settings { display: block; margin: 0; }
.footer-bottom #signature { margin-left: 0; }
.notte-momma-logo { margin-left: calc(-1 * var(--notte-pad)); margin-right: 5px; }
.notte-momma-logo img { width: 102px; height: auto; transform: scale(1.1); }
.notte-footer-bottom__right { display: flex; flex-flow: column; align-items: flex-end; }
.notte-socials { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 15px; }
.notte-socials img { width: 36px; margin: 4px 10px; transition: transform .3s; }
.notte-socials a:hover img { transform: scale(1.1); }

@media (max-width: 1199px) {
  .notte-newsletter__header { flex: 0 0 100%; justify-content: center; }
  .notte-newsletter__form { margin: 0 auto; }
  .notte-contact-bar__left { flex: 0 0 100%; text-align: center; }
  .notte-contact-bar__left p { position: static; }
}
@media (max-width: 991px) {
  .notte-contact-bar .container { justify-content: center; }
  .notte-footer-bottom__right { flex: 0 0 100%; align-items: center; margin-top: 20px; }
}
@media (max-width: 767px) {
  .notte-newsletter__in { padding-block: 30px; row-gap: 20px; }
  .notte-newsletter__header::before { width: 105px; height: 60px; }
  .footer-rows .custom-footer { padding-top: 0; }
  .notte-contact-bar { padding-block: 38px; }
  .footer-links-icons .footer-links { justify-content: center; }
  .footer-links .footer-link:not(:last-child) { margin-right: 10px; padding-right: 10px; }
  .footer-bottom .copyright { flex: 0 0 100%; }
  .footer-bottom .copyright i { display: block; margin-top: 12px; }
  .notte-momma-logo { margin-left: 0; }
  .notte-footer-bottom__right { display: contents; }
  .notte-socials { order: -1; flex: 0 0 100%; justify-content: center; }
  .footer-bottom #signature { margin-top: 16px; }

  /* skládací sloupce patičky na mobilu (třídy přidává notte.js) */
  .custom-footer > div.notte-openable:not(.notte-open) h4 + ul { display: none; }
  .custom-footer > div.notte-openable h4 + ul { margin-bottom: 24px; }
  .custom-footer > div.notte-openable { padding-bottom: 0; border-bottom: 1px solid var(--notte-line-strong); }
  .custom-footer > div.notte-openable h4 { position: relative; margin: 0 -20px; padding: 20px; z-index: 1; cursor: pointer; }
  .custom-footer > div.notte-openable h4::after {
    content: "\e911";
    font-family: shoptet;
    position: absolute;
    right: 20px;
    font-size: 12px;
    line-height: 22px;
    transform: rotate(180deg);
  }
  .custom-footer > div.notte-openable.notte-open h4::after { transform: none; }
  .custom-footer > div.notte-openable + :not(.notte-openable) { margin-top: 15px; }
  #footer .banner-wrapper { margin-top: 0; }
  #footer .banner { margin-bottom: 0; min-height: auto; }
}
@media (max-width: 589px) {
  .notte-newsletter__header { justify-content: start; }
  .notte-newsletter__header-in { flex: 0 0 100%; }
}


/* 9) HOMEPAGE ------------------------------------------------------------------ */

/* nadpis nad výhodami: text je v CSS (pozůstatek; případně přesunout do úvodního textu v administraci) */
.benefitBanner::before {
  content: "Jsme specialisté na vůně, svíčky a originální dárky.";
  display: block;
  width: 100%;
  margin: 0 0 var(--notte-section-gap);
  text-align: center;
  font-family: var(--template-headings-font), sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--notte-ink);
}
@media (max-width: 767px) {
  .benefitBanner::before { font-size: 24px; line-height: 30px; margin-bottom: 24px; }
}
.benefitBanner.position--benefitCategory,
.benefitBanner.position--benefitProduct { margin-bottom: 0; }
.type-index .benefitBanner.position--benefitHomepage { margin-top: var(--notte-section-gap); margin-bottom: -15px; }
.type-index .benefitBanner__title { display: block; line-height: 1.4; margin-bottom: 2px; }
.type-index .body-banners { margin-top: var(--notte-section-gap); }

.homepage-group-title {
  text-align: start;
  padding-inline: var(--notte-hp-pad);
  margin-top: var(--notte-section-gap);
  margin-bottom: calc(var(--notte-product-title-gap) - var(--notte-p-pad) - 5px);
}
.type-index .product-slider-holder { padding: 0 var(--notte-hp-pad); }
.type-index .product-slider { margin-inline: calc(-1 * var(--notte-p-pad) - 5px); padding: 5px; }
.type-index .product-slider-holder .products-block > div { border: 0; padding: 0 !important; }   /* přebíjí padding slideru */
.type-index .product-slider-holder .products-block .p { padding-inline: var(--notte-p-pad); }

.type-index .welcome-wrapper { padding-block: 0; margin-block: var(--notte-section-gap); }
.type-index .welcome-wrapper.container-narrow { max-width: none; width: 100%; }
.type-index .welcome { padding-inline: 0; }
.type-index .welcome .badge-container { display: none; }

/* nadpis sekce s odkazem "více" (používá HTML v administraci i notte.js) */
.ji-hp-section-title {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  margin: 0 0 var(--notte-title-gap);
  text-align: start !important;
}
.ji-hp-section-title__left { flex: 1; }
.ji-hp-section-title__above-text {
  display: block;
  margin-bottom: 4px;
  font-family: var(--template-font), sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--notte-muted);
}
.ji-hp-section-title__text {
  margin: 0;
  font-family: var(--template-headings-font), sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--notte-ink);
}
.ji-hp-section-title__more-link {
  display: inline-block;
  padding: 8px 15px 5px;
  border-radius: var(--notte-radius);
  background: var(--notte-surface);
  font-family: var(--template-font), sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}
.ji-hp-section-title__more-link:hover { text-decoration: underline; }
.ji-hp-section-mobile-more-link { display: none; flex: 0 0 100%; width: 100%; margin-top: 20px; text-align: center; }
@media (max-width: 767px) {
  .ji-hp-section-title__more-link { display: none; }
  .ji-hp-section-mobile-more-link { display: block; }
}

/* odznaky */
.ji-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.ji-badges__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  border-radius: var(--notte-radius);
  background: var(--notte-surface);
  color: inherit;
  line-height: 1.4;
}
.ji-badges__badge:hover { background: var(--notte-surface-2); text-decoration: none; }
.ji-badges__badge > img { max-width: 55px; height: auto; }
.ji-badges__badge-text { min-width: 50%; text-align: start; }
@media (max-width: 1199px) { .ji-badges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px)  { .ji-badges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .ji-badges { grid-template-columns: 1fr; gap: 10px; } }

/* pás s logy partnerů (pozadí přes celou šířku okna) */
.ji-logos {
  position: relative;
  z-index: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 20px 50px;
  margin-top: var(--notte-section-gap);
  padding-block: 30px;
}
.ji-logos::before {
  content: "";
  position: absolute;
  inset-inline: calc(50% - 50dvw + var(--scrollbar-width, 0px) / 2);
  inset-block: 0;
  z-index: -1;
  background: var(--notte-surface);
}
.ji-logos::after { content: none; }
.ji-logos__title {
  font-family: var(--template-font), sans-serif;
  font-size: 16px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--notte-muted);
}
.ji-logos__items { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 40px; }
.ji-logos__item img { width: 100%; height: auto; transition: transform .3s cubic-bezier(.25, .46, .45, .94); }
.ji-logos__item:hover img { transform: scale(1.02); }
@media (max-width: 991px) { .ji-logos__title, .ji-logos__items { flex: 0 0 100%; } }
@media (max-width: 767px) { .ji-logos__items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479px) { .ji-logos__items { grid-template-columns: repeat(2, 1fr); gap: 10px 20px; } }

/* hodnocení obchodu (blok doplňku; nadpis přestavuje notte.js) */
#hodnoceniobchodu { margin-top: var(--notte-section-gap); padding-top: 0; }
#hodnoceniobchodu .ji-hp-section-title { margin-bottom: 10px; }
#hodnoceniobchodu .shop-eval-stars { display: contents; }
#hodnoceniobchodu .shop-eval-stars .rate-average-inner { justify-content: start; margin-bottom: calc(var(--notte-title-gap) - 7.5px); }
#hodnoceniobchodu > br { display: none; }
#hodnoceniobchodu .shop-eval { margin-bottom: -7.5px; }
#hodnoceniobchodu .shop-stat-all { display: none; }

/* blog na homepage (vytváří notte.js) */
.notte-blog { margin-top: var(--notte-section-gap); }
.notte-blog__items { display: flex; flex-wrap: wrap; margin: 0 -10px; width: auto; }
.notte-blog__items .news-item { width: 33.3333%; padding: 0 10px; display: block; }
.notte-blog h2 { margin: 0 0 10px; font-size: 20px; }
.notte-blog h2 a:hover { text-decoration: underline; }
.notte-blog__more { display: block; margin-top: 24px; font-weight: 700; text-transform: uppercase; }
.notte-blog__more:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .notte-blog__items { margin: 0; }
  .notte-blog__items .news-item { width: 100%; padding: 0; }
}

/* blog: výpis článků */
#newsWrapper .news-item { display: flex; flex-flow: row wrap; justify-content: start; align-items: start; align-content: start; }
#newsWrapper .news-item h2,
#newsWrapper .news-item .description { flex: 0 0 100%; }


/* 10) VÝPISY PRODUKTŮ A OBECNÉ ÚPRAVY ----------------------------------------- */

.products-block .p .flags-default { top: 0; left: 0; }
.products-block .p .flags-default .flag { font-size: 14px; font-weight: 600; margin-bottom: 5px; letter-spacing: unset; }
.products-block > div .p .p-bottom.single-button { padding-top: 0; }

/* rozhodnutí o obchodu: prvky, které obchod nepoužívá */
#cat-manufacturers,
.stars-placeholder,
.products-block > div .p .stars-wrapper,
.products-block > div .p .p-bottom > div .p-tools,
a.link-icon.print { display: none; }

.breadcrumbs { margin-top: 14px; }
.breadcrumbs { padding-bottom: 0 !important; margin-bottom: 0 !important; }   /* přebíjí padding šablony */

/* Shoptet: dočasná oprava pro úzký mobil (doprava a platba v košíku) */
@media only screen and (max-width: 473px) {
  .shipping-billing-name { max-width: 80px; }
  .inactive .not-possible-info { max-width: 80px; }
  .shipping-billing-table .radio-wrapper input[type="radio"] + label .payment-shipping-price { flex-basis: auto !important; }
  .question-tooltip { vertical-align: top; }
}

.quote-box {
  margin: 1.5em 0;
  padding: 1em;
  border-left: 4px solid var(--notte-line-strong);
  background: var(--notte-surface);
  font-style: italic;
}
.quote-box strong { font-weight: 600; }

/* záložka "Vůně" u svíček: pastely jsou identita řad, záměrně mimo paletu */
.vune-sekce { margin-top: 20px; }
.vune-blok  { margin: 0 0 14px; padding-left: 12px; border-left: 5px solid var(--notte-line-strong); }
.vune-blok .claim { color: var(--notte-muted); font-style: italic; }
.vune-orient   { border-left-color: #86A8C4; }
.vune-sumatra  { border-left-color: #9EBA78; }
.vune-kralovna { border-left-color: #7FB8AC; }
.vune-napeceno { border-left-color: #E7C15E; }
.vune-samet    { border-left-color: #C6BFA4; }
.vune-orient   .je-jako-label { color: #86A8C4; }
.vune-sumatra  .je-jako-label { color: #9EBA78; }
.vune-kralovna .je-jako-label { color: #7FB8AC; }
.vune-napeceno .je-jako-label { color: #E7C15E; }
.vune-samet    .je-jako-label { color: #C6BFA4; }


/* 11) ENCYKLOPEDIE: rejstřík písmen (vytváří notte.js) ------------------------ */

.seznam-pismen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--notte-line-strong);
}
.seznam-pismen a { padding: 12px 16px; font-weight: 700; text-decoration: underline; }
.seznam-pismen a:hover { text-decoration: none; }
.pismeno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 24px 0 12px;
  border-bottom: 1px solid var(--notte-line-strong);
  scroll-margin-top: 160px;
}
.pismeno > span { width: 100px; margin-bottom: 12px; font-size: 30px; font-weight: 900; line-height: 1.2; color: var(--notte-line-strong); }
.pismeno:hover > span { color: var(--notte-ink); }
.pismeno > div { display: flex; flex-wrap: wrap; width: calc(100% - 100px); }
.pismeno > div > a { width: 25%; padding: 0 12px 12px 0; text-decoration: underline; }
.pismeno > div > a:hover { text-decoration: none; }
@media (max-width: 991px) { .pismeno > div > a { width: 33.3333%; } }
@media (max-width: 767px) {
  .pismeno > span { width: 50px; }
  .pismeno > div  { width: calc(100% - 50px); }
}
@media (max-width: 479px) { .pismeno > div > a { width: 50%; } }