/* ════════════════════════════
   WAYANA HOME – Custom CSS
   v3 – 2026-04-mobile
   Zmeny:
   - --cta: warm karamel (nie near-black)
   - top nav bar: kontrast fix
   - menu: bez uppercase, elegantnejší štýl
   - mobile: top bar skrytý, header upratený
   - footer: mierne zosvetlený
════════════════════════════ */

:root {
  --bg:    #F8F2E8;
  --bg2:   #EFE4D0;
  --bg3:   #E3D4BC;
  --pr:    #7D4E24;
  --pr-dk: #5C3517;
  --cta:   #9B6840;   /* ★ warm karamel CTA */
  --cta-hv:#7A4E2C;
  --gold:  #C49A3C;
  --tx:    #2E1F0F;
  --tx2:   #7A6248;
  --tx3:   #A89070;
  --white: #FDFAF5;
  --brd:   rgba(58,42,26,.11);
  --brd2:  rgba(58,42,26,.22);
  --sh:    0 18px 44px rgba(90,55,20,.10);
  --r:     10px;
  --t:     .25s ease;
  --fh:    'Playfair Display', Georgia, serif;
  --fb:    'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  font-family: var(--fb) !important;
  background: var(--bg) !important;
  color: var(--tx) !important;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--fh) !important;
  font-weight: 600; line-height: 1.25; color: var(--tx);
}
a { color: var(--pr); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--pr-dk); }
img { max-width: 100%; height: auto; display: block; }

/* ════════════════════════════
   TOP NAVIGATION BAR
   – na mobile skrytý (šetrí miesto, info sú v pätičke)
   – na desktope: svetlé písmo na tmavom páse
════════════════════════════ */
.top-navigation-bar,
#top-line, .top-line, .top-info,
.top-navigation, .top-navigation-bar-in {
  background: #3A2210 !important;
  color: #EDE0CB !important;
  font-family: var(--fb) !important;
  font-size: 12px !important;
}

/* ★ FIX: Shoptet dáva vlastnú tmavú color na .container, prepíšeme všetko */
.top-navigation-bar *,
.top-navigation-bar .container,
.top-navigation-bar .container * {
  background: transparent !important;
  font-family: var(--fb) !important;
}

.top-navigation-contacts {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
  font-size: 12px !important;
  color: #EDE0CB !important;
}
.top-navigation-contacts strong {
  color: rgba(237,224,203,.55) !important;
  font-weight: 500 !important;
  margin-right: 2px !important;
}
.top-navigation-contacts a,
.top-navigation-contacts .project-phone,
.top-navigation-contacts .project-email,
.top-navigation-contacts span {
  color: #EDE0CB !important;
  text-decoration: none !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  transition: color var(--t) !important;
  opacity: 1 !important;
}
.top-navigation-contacts a:hover { color: #fff !important; }

/* Top menu links */
.top-navigation-bar-menu,
.top-navigation-menu { background: transparent !important; }
.top-navigation-bar-menu li a,
.top-navigation-bar-menu-helper li a {
  color: rgba(237,224,203,.65) !important;
  font-size: 11px !important;
  font-family: var(--fb) !important;
  letter-spacing: .2px !important;
  text-decoration: none !important;
  transition: color var(--t) !important;
}
.top-navigation-bar-menu li a:hover { color: #fff !important; }

/* Login button */
.top-nav-button-login,
button[data-testid="signin"] {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #EDE0CB !important;
  background: transparent !important;
  border: 1px solid rgba(237,224,203,.25) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
}
.top-nav-button-login:hover {
  background: rgba(237,224,203,.15) !important;
  color: #fff !important;
}

/* ★ MOBILE: hamburger je VNÚTRI .top-navigation-bar
   → neschováme celý bar, len text časti v ňom */
@media(max-width:991px) {
  /* Skryť len kontakty a menu linky */
  .top-navigation-contacts,
  .top-navigation-menu,
  .top-navigation-bar-menu,
  .top-navigation-menu-trigger,
  .top-nav-button.top-nav-button-login { display: none !important; }

  /* Bar: biely, minimálny – len hamburger + search */
  .top-navigation-bar {
    background: var(--white) !important;
    border-bottom: 1px solid var(--brd) !important;
    padding: 0 !important;
  }
  .top-navigation-bar .container {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 6px 12px !important;
    min-height: 0 !important;
  }

  /* Responsive tools (hamburger, search) – viditeľné */
  .top-navigation-tools,
  .responsive-tools {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .responsive-tools a {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: var(--tx) !important;
  }
  .responsive-tools a:hover { background: var(--bg2) !important; }
}

/* ════════════════════════════
   HAMBURGER + RESPONSIVE TOOLS
════════════════════════════ */
@media(min-width:992px) {
  .responsive-tools a[data-target="navigation"],
  a[data-testid="hamburgerMenu"],
  .responsive-tools a[aria-label="Menu"] { display: none !important; }
}

.responsive-tools {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}
.responsive-tools a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  transition: background var(--t) !important;
  color: var(--tx) !important;
}
.responsive-tools a:hover { background: var(--bg2) !important; }

/* ════════════════════════════
   HEADER
════════════════════════════ */
.page-header, #header, .header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--brd) !important;
  box-shadow: 0 2px 14px rgba(90,55,20,.06) !important;
}
.page-header .header-logo img, #logo img { max-height: 56px; width: auto; }

/* Search */
.js-search-input, .search-input, input[type="search"] {
  font-family: var(--fb) !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--brd2) !important;
  background: var(--bg) !important;
  padding: 9px 18px !important;
  color: var(--tx) !important;
}
.js-search-input:focus, .search-input:focus {
  outline: none !important;
  border-color: var(--pr) !important;
  box-shadow: 0 0 0 3px rgba(125,78,36,.10) !important;
}
.search button, .search-form button {
  background: var(--cta) !important;
  border: 1px solid var(--cta) !important;
  color: var(--white) !important;
  border-radius: 999px !important;
  padding: 9px 22px !important;
  font-family: var(--fb) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
.search button:hover, .search-form button:hover { background: var(--cta-hv) !important; }

/* ════════════════════════════
   SEARCH WHISPERER
════════════════════════════ */
.search-whisperer, .js-search-whisperer, [class*="search-whisperer"] {
  background: var(--white) !important;
  border: 1px solid var(--brd2) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh) !important;
  overflow: hidden !important;
  font-family: var(--fb) !important;
  margin-top: 6px !important;
  z-index: 9999 !important;
}
.search-whisperer-item {
  padding: 10px 16px !important;
  display: flex !important; align-items: center !important; gap: 12px !important;
  border-bottom: 1px solid var(--brd) !important;
  transition: background var(--t) !important; cursor: pointer !important;
}
.search-whisperer-item:hover { background: var(--bg) !important; }
.search-whisperer-item:last-child { border-bottom: none !important; }
.search-whisperer-item-name { font-size: 14px !important; color: var(--tx) !important; flex: 1 !important; }
.search-whisperer-item-price { font-size: 13px !important; font-weight: 700 !important; color: var(--pr) !important; }
.search-whisperer-item img { width: 40px !important; height: 40px !important; object-fit: cover !important; border-radius: 8px !important; }
.search-whisperer-header {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.2px !important;
  text-transform: uppercase !important; color: var(--tx3) !important;
  padding: 10px 16px 6px !important; background: var(--bg) !important;
}
.search-whisperer-empty, .search-whisperer-documents {
  padding: 14px 20px !important; font-size: 13px !important; color: var(--tx3) !important; font-style: italic !important;
}
.search-whisperer-footer a {
  display: block !important; text-align: center !important;
  padding: 10px 16px !important; font-size: 12px !important; font-weight: 700 !important;
  color: var(--pr) !important; border-top: 1px solid var(--brd) !important;
}
.search-whisperer-footer a:hover { background: var(--bg) !important; }

/* ════════════════════════════
   CART BUTTON
════════════════════════════ */
a[data-testid="headerCart"],
.navigation-buttons .btn.cart-count {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 8px 16px !important; border-radius: 999px !important;
  border: 1px solid var(--brd2) !important; background: transparent !important;
  color: var(--tx) !important; font-family: var(--fb) !important;
  font-size: 13px !important; font-weight: 500 !important;
  transition: all var(--t) !important; text-decoration: none !important;
}
a[data-testid="headerCart"]:hover,
.navigation-buttons .btn.cart-count:hover {
  background: var(--cta) !important; border-color: var(--cta) !important; color: var(--white) !important;
}
a[data-testid="headerCart"]:hover .cart-price { color: var(--white) !important; }

@media(max-width:991px) {
  a[data-testid="headerCart"],
  .navigation-buttons .btn.cart-count {
    border: 0 !important; padding: 8px !important; background: transparent !important;
  }
  a[data-testid="headerCart"] .cart-price { display: none !important; }
}

/* ════════════════════════════
   NAVIGATION
   ★ ZMENA: bez uppercase, elegantnejší štýl
════════════════════════════ */
.navigation, .navigation-in, #navigation,
.header-bottom, .header-menu {
  background: var(--white) !important;
  border-bottom: 1px solid var(--brd) !important;
}
.navigation .submenu-arrow { display: none !important; }

/* Level 1 – Playfair Display italic, elegantný štýl */
.navigation .menu-level-1 > li > a,
#navigation .menu-level-1 > li > a {
  font-family: var(--fh) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;
  text-transform: none !important;
  color: var(--tx2) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 18px 16px !important;
  display: block !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--t), border-color var(--t) !important;
}
/* skryť <b> tag bold efekt – explicitná hodnota, nie inherit */
.navigation .menu-level-1 > li > a b,
.navigation .menu-level-1 > li > a > b,
[data-testid="headerMenuItem"] b {
  font-weight: 500 !important;
  font-family: var(--fb) !important;
  font-style: normal !important;
}
.navigation .menu-level-1 > li > a:hover,
.navigation .menu-level-1 > li.active > a {
  color: var(--pr) !important;
  border-bottom-color: var(--gold) !important;
  background: transparent !important;
}

/* Dropdown – desktop */
@media(min-width:992px) {
  .navigation .menu-level-1 > li { position: relative !important; }
  .navigation .menu-level-2 { display: none !important; }
  .navigation .menu-level-1 > li:hover > .menu-level-2,
  .navigation .menu-level-1 > li:focus-within > .menu-level-2 {
    display: block !important;
    position: absolute !important; top: 100% !important; left: 0 !important;
    background: var(--white) !important;
    border: 1px solid var(--brd) !important;
    border-top: 2px solid var(--gold) !important;
    box-shadow: var(--sh) !important;
    border-radius: 0 0 12px 12px !important;
    min-width: 210px !important;
    z-index: 9999 !important;
    padding: 6px 0 !important;
    animation: vjDrop .18s ease !important;
  }
  @keyframes vjDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .navigation .menu-level-2 .menu-no-image { padding: 0 !important; }
  .navigation .menu-level-2 a {
    font-family: var(--fb) !important;
    font-size: 13px !important; font-weight: 400 !important;
    letter-spacing: .1px !important; text-transform: none !important;
    color: var(--tx2) !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid var(--brd) !important;
    display: block !important;
    transition: color var(--t), background var(--t) !important;
    white-space: nowrap !important;
  }
  .navigation .menu-level-2 a span { color: inherit !important; }
  .navigation .menu-level-2 a:hover { color: var(--pr) !important; background: var(--bg) !important; }
  .navigation .menu-level-2 li:last-child .menu-no-image a { border-bottom: none !important; }

  /* Level 3 */
  .navigation .menu-level-3 {
    display: none !important;
    position: absolute !important; left: 100% !important; top: 0 !important;
    background: var(--white) !important;
    border: 1px solid var(--brd) !important;
    border-top: 2px solid var(--gold) !important;
    border-radius: 0 12px 12px 0 !important;
    min-width: 200px !important;
    box-shadow: var(--sh) !important;
    z-index: 10000 !important;
    padding: 6px 0 !important;
  }
  .navigation .menu-level-2 li:hover > .menu-level-3 { display: block !important; }
  .navigation .menu-level-3 a {
    font-size: 12px !important; color: var(--tx3) !important;
    padding: 9px 16px !important; white-space: nowrap !important;
  }
  .navigation .menu-level-3 li { position: relative !important; }
  .navigation .menu-level-3 li a::after { content: '' !important; }
  .navigation .menu-level-3 li:not(:last-child) a { border-bottom: 1px solid var(--brd) !important; }
  /* ★ Shoptet dáva čiarky za posledným itemom – schovať */
  .navigation .menu-level-3 li::after { content: '' !important; display: none !important; }
}

/* ════════════════════════════
   MOBILE NAV
   DÔLEŽITÉ: neprepisujeme position/width/z-index/transform/left
   – Shoptet ich používa na slide-in toggle mechanizmus.
   My len štylujeme farby, fonty, spacing.
════════════════════════════ */
@media(max-width:991px) {
  /* Farba + z-index (bez width – Shoptet ho riadi cez transform/left) */
  .navigation-in, .navigation, #navigation {
    background: var(--white) !important;
    z-index: 9999 !important;
  }

  .navigation .menu-level-1 {
    padding: 8px 0 20px !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .navigation .menu-level-1 > li {
    border-bottom: 1px solid var(--brd) !important;
    margin: 0 !important;
  }
  .navigation .menu-level-1 > li > a {
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 15px 20px !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--tx) !important;
    letter-spacing: .1px !important;
    text-transform: none !important;
  }
  .navigation .menu-level-1 > li > a:hover {
    color: var(--pr) !important;
    background: var(--bg) !important;
  }
  .navigation .menu-level-2 {
    background: var(--bg) !important;
    padding: 4px 0 8px !important;
    border-top: 1px solid var(--brd) !important;
  }
  .navigation .menu-level-2 a {
    font-size: 13px !important;
    color: var(--tx2) !important;
    padding: 11px 20px 11px 32px !important;
    display: block !important;
    border-bottom: 1px solid var(--brd) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .navigation .menu-level-3 a {
    font-size: 12px !important;
    color: var(--tx3) !important;
    padding-left: 48px !important;
  }
  .navigation .menu-level-3 li::after { display: none !important; }
}

/* ════════════════════════════
   BREADCRUMBS
════════════════════════════ */
.breadcrumbs, #breadcrumbs {
  padding: 12px 0 !important; font-size: 12px !important;
  font-family: var(--fb) !important; color: var(--tx3) !important;
}

/* ════════════════════════════
   BUTTONS
════════════════════════════ */
.btn, button, input[type="submit"] {
  font-family: var(--fb) !important; cursor: pointer !important; transition: all var(--t) !important;
}
.products .btn.btn-cart,
.btn-buy, .buy-btn,
.product-detail .btn-cart {
  border-radius: 999px !important;
  padding: 11px 16px !important; border: none !important;
  background: var(--cta) !important; color: var(--white) !important;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .6px !important; text-transform: uppercase !important;
}
.products .btn.btn-cart:hover { background: var(--cta-hv) !important; }

/* ════════════════════════════
   PRODUCT CARD
════════════════════════════ */
.products .product .p {
  background: var(--white) !important; border: 1px solid var(--brd) !important;
  border-radius: 14px !important; overflow: hidden !important;
  transition: transform var(--t), box-shadow var(--t) !important;
}
.products .product .p:hover { transform: translateY(-4px) !important; box-shadow: var(--sh) !important; }
.products .product a.image img {
  width: 100% !important; aspect-ratio: 1/1 !important; object-fit: cover !important;
}
.products .product .p-in { padding: 14px 16px 16px !important; }
.products .product .name span {
  font-family: var(--fh) !important; font-size: 15px !important; color: var(--tx) !important;
}
.products .product .price,
.products .product .price-final { font-weight: 700 !important; color: var(--pr) !important; }

/* ════════════════════════════
   PRODUCT CAROUSEL
════════════════════════════ */
.vajana-carousel { position: relative !important; }
.vajana-carousel .vajana-viewport { width: 100% !important; overflow: hidden !important; }
.vajana-carousel .vajana-track {
  display: flex !important; flex-wrap: nowrap !important;
  gap: 18px !important; padding: 6px 2px 14px !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  overscroll-behavior-x: contain !important;
}
.vajana-carousel .vajana-track::-webkit-scrollbar { display: none !important; }
.vajana-carousel .vajana-track > .product {
  float: none !important; flex: 0 0 auto !important; scroll-snap-align: start !important;
}

@media(min-width:1200px) {
  .vajana-carousel .vajana-track > .product {
    flex-basis: calc((100% - 3*18px)/4) !important; width: calc((100% - 3*18px)/4) !important;
  }
}
@media(min-width:768px) and (max-width:1199px) {
  .vajana-carousel .vajana-track > .product {
    flex-basis: calc((100% - 2*18px)/3) !important; width: calc((100% - 2*18px)/3) !important;
  }
}
@media(max-width:767px) {
  .vajana-carousel .vajana-track { gap: 12px !important; }
  .vajana-carousel .vajana-track > .product {
    flex-basis: calc((100% - 12px)/2) !important; width: calc((100% - 12px)/2) !important;
  }
}

.vajana-carousel .vajana-arrow {
  position: absolute !important; top: 42% !important; transform: translateY(-50%) !important;
  width: 38px !important; height: 38px !important;
  border-radius: 999px !important; border: 1px solid var(--brd2) !important;
  background: rgba(253,250,245,.94) !important; backdrop-filter: blur(6px) !important;
  box-shadow: 0 6px 20px rgba(90,55,20,.12) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; z-index: 5 !important;
  transition: opacity var(--t), background var(--t) !important;
}
@media(hover:hover) {
  .vajana-arrow { opacity: 0 !important; pointer-events: none !important; }
  .vajana-carousel:hover .vajana-arrow { opacity: 1 !important; pointer-events: auto !important; }
  .vajana-arrow:hover { background: var(--cta) !important; }
  .vajana-arrow:hover svg { stroke: var(--white) !important; }
}
@media(hover:none) {
  .vajana-arrow { opacity: 1 !important; pointer-events: auto !important; }
}
.vajana-arrow[style*="visibility: hidden"],
.vajana-arrow[style*="visibility:hidden"] { opacity: 0 !important; pointer-events: none !important; }
.vajana-arrow svg {
  width: 16px !important; height: 16px !important;
  stroke: var(--pr) !important; fill: none !important; stroke-width: 2.5 !important;
}
.vajana-arrow.prev { left: -14px !important; }
.vajana-arrow.next { right: -14px !important; }
@media(max-width:767px) { .vajana-arrow { display: none !important; } }

.vajana-carousel .vajana-progress {
  height: 2px !important; background: var(--brd) !important;
  border-radius: 999px !important; margin: 8px 0 0 !important; overflow: hidden !important;
}
.vajana-carousel .vajana-progress > i {
  display: block !important; height: 100% !important; width: 0% !important;
  background: var(--pr) !important; border-radius: 999px !important; transition: width .12s linear !important;
}

/* ════════════════════════════
   HOMEPAGE TITLES
════════════════════════════ */
.homepage-products-1 h2,
.homepage-products-2 h2,
.homepage-products-3 h2,
.homepage-products-4 h2 {
  font-family: var(--fh) !important;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
  color: var(--tx) !important; font-style: italic !important;
  text-align: center !important; margin-bottom: 6px !important;
}
.homepage-products-1 h2::after,
.homepage-products-2 h2::after,
.homepage-products-3 h2::after,
.homepage-products-4 h2::after {
  content: '' !important; display: block !important;
  width: 40px !important; height: 2px !important;
  background: var(--gold) !important; margin: 10px auto 24px !important;
}

/* ════════════════════════════
   BENEFIT BANNER
════════════════════════════ */
.benefitBanner.position--benefitHomepage {
  max-width: 1200px !important; margin: 16px auto !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--brd) !important; border-bottom: 1px solid var(--brd) !important;
}

/* ════════════════════════════
   HERO
════════════════════════════ */
#carousel { border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
#carousel .carousel-indicators { display: none !important; }

/* ════════════════════════════
   FORMS
════════════════════════════ */
input[type="text"], input[type="email"],
input[type="tel"], input[type="password"],
textarea, select {
  background: var(--bg) !important; border: 1px solid var(--brd2) !important;
  border-radius: 8px !important; padding: 10px 14px !important;
  font-family: var(--fb) !important; font-size: 14px !important; color: var(--tx) !important;
  transition: border-color var(--t), box-shadow var(--t) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important; border-color: var(--pr) !important;
  box-shadow: 0 0 0 3px rgba(125,78,36,.10) !important;
}

/* ════════════════════════════
   PAGINATION
════════════════════════════ */
.pagination {
  display: flex !important; justify-content: center !important; gap: 6px !important; margin: 36px 0 !important;
}
.pagination a, .pagination span {
  width: 36px !important; height: 36px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid var(--brd2) !important; border-radius: 50% !important;
  font-family: var(--fb) !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--tx2) !important; background: var(--white) !important;
}
.pagination a:hover, .pagination .active {
  background: var(--cta) !important; border-color: var(--cta) !important; color: var(--white) !important;
}

/* ════════════════════════════
   W-WRAP
════════════════════════════ */
.w-wrap {
  max-width: 1100px !important; margin: 0 auto !important; padding: 0 16px !important;
  display: flex !important; flex-direction: column !important; gap: 16px !important;
}
.w-story {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 28px !important;
  background: var(--white) !important; border: 1px solid var(--brd) !important;
  border-radius: 20px !important; padding: 24px !important; overflow: hidden !important;
}
.w-story__img { flex: 1 1 240px !important; min-width: 0 !important; }
.w-story__img img {
  display: block !important; width: 100% !important;
  border-radius: 16px !important; box-shadow: 0 12px 32px rgba(90,55,20,.12) !important;
}
.w-story__text { flex: 1 1 260px !important; min-width: 0 !important; }
.w-heading {
  font-family: var(--fh) !important; font-size: clamp(22px,3.5vw,32px) !important;
  font-style: italic !important; font-weight: 600 !important; color: var(--tx) !important; margin: 0 0 6px !important;
}
.w-sub { font-size: 14px !important; color: var(--tx2) !important; margin: 0 0 14px !important; }
.w-line {
  width: 36px !important; height: 2px !important; background: var(--gold) !important;
  border-radius: 999px !important; margin: 0 0 16px !important; display: block !important;
}
.w-body { font-size: 14px !important; line-height: 1.8 !important; color: var(--tx) !important; }
.w-body p { margin: 0 0 10px !important; }
.w-section-head { text-align: center !important; }
.w-cards {
  display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 12px !important;
}
.w-card {
  background: var(--white) !important; border: 1px solid var(--brd) !important;
  border-radius: 16px !important; padding: 20px 16px !important;
  text-align: center !important; transition: transform .2s, box-shadow .2s !important;
}
.w-card:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 32px rgba(90,55,20,.10) !important; }
.w-card__icon { font-size: 26px !important; margin-bottom: 10px !important; }
.w-card__title { font-family: var(--fh) !important; font-size: 16px !important; font-weight: 600 !important; color: var(--tx) !important; margin: 0 0 8px !important; }
.w-card__text { font-size: 13px !important; line-height: 1.7 !important; color: var(--tx2) !important; }

@media(max-width:860px) { .w-cards { grid-template-columns: repeat(2,1fr) !important; } }
@media(max-width:540px) {
  .w-story { padding: 18px !important; }
  .w-story__img, .w-story__text { flex: 1 1 100% !important; }
  .w-cards { grid-template-columns: 1fr !important; }
}

details summary {
  background: var(--cta) !important; color: var(--white) !important;
  font-family: var(--fb) !important; font-size: 13px !important; font-weight: 700 !important;
  padding: 11px 22px !important; border-radius: 999px !important;
  cursor: pointer !important; list-style: none !important; display: inline-block !important;
}
details summary:hover { background: var(--cta-hv) !important; }
details summary::-webkit-details-marker { display: none !important; }

/* ════════════════════════════
   CATEGORY PAGE – TITLE
════════════════════════════ */
.category-title {
  font-family: var(--fh) !important;
  font-style: italic !important;
  font-size: clamp(1.8rem,3vw,2.4rem) !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  margin-bottom: 24px !important;
}

/* ════════════════════════════
   SUBCATEGORY TILES
════════════════════════════ */
.subcategories {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
}
/* reset Bootstrap col-* float */
.subcategories li {
  width: auto !important;
  padding: 0 !important;
  float: none !important;
}
.subcategories li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 12px 16px !important;
  background: var(--white) !important;
  border: 1px solid var(--brd) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: all var(--t) !important;
}
.subcategories li a:hover {
  background: var(--bg2) !important;
  border-color: var(--pr) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(90,55,20,.09) !important;
}
.subcategories .text {
  font-family: var(--fb) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--tx2) !important;
  text-align: center !important;
  line-height: 1.4 !important;
}
.subcategories li a:hover .text { color: var(--pr) !important; }

@media(max-width:860px) { .subcategories { grid-template-columns: repeat(3,1fr) !important; } }
@media(max-width:560px) { .subcategories { grid-template-columns: repeat(2,1fr) !important; } }

/* ════════════════════════════
   PRODUCTS TOP (Najpredávanejšie)
════════════════════════════ */
.products-top-wrapper {
  background: var(--bg2) !important;
  border-radius: 16px !important;
  padding: 20px 24px 16px !important;
  margin-bottom: 28px !important;
  border: 1px solid var(--brd) !important;
}
.products-top-header {
  font-family: var(--fh) !important;
  font-style: italic !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  margin: 0 0 14px !important;
  display: block !important;
}
.products-top .product .p {
  background: var(--white) !important;
  border-radius: 10px !important;
  border: 1px solid var(--brd) !important;
}
.toggle-top-products {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--pr) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px 0 0 !important;
  transition: color var(--t) !important;
}
.toggle-top-products:hover { color: var(--pr-dk) !important; }

/* ════════════════════════════
   LIST SORTING + HEADER
════════════════════════════ */
.category-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--brd) !important;
  margin-bottom: 24px !important;
}
.listSorting__controls {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.listSorting__control {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--tx2) !important;
  background: var(--white) !important;
  border: 1px solid var(--brd2) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
}
.listSorting__control:hover {
  background: var(--bg2) !important;
  border-color: var(--pr) !important;
  color: var(--pr) !important;
}
.listSorting__control--current {
  background: var(--cta) !important;
  border-color: var(--cta) !important;
  color: var(--white) !important;
}
.listItemsTotal {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  color: var(--tx3) !important;
}

/* ════════════════════════════
   PRODUCT FLAGS / BADGES
════════════════════════════ */
.flag {
  font-family: var(--fb) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  line-height: 1.5 !important;
}
.flag-new { background: var(--pr) !important; color: var(--white) !important; }
.flag-action { background: var(--gold) !important; color: var(--white) !important; }
.flag-quantity-discount { background: var(--cta) !important; color: var(--white) !important; }
.flag-sale { background: #C04040 !important; color: var(--white) !important; }

/* ════════════════════════════
   LOAD MORE + LISTING CONTROLS
════════════════════════════ */
.loadMore { text-align: center !important; margin: 28px 0 !important; }
.loadMore__button,
.btn-secondary.loadMore__button {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  color: var(--tx) !important;
  background: var(--white) !important;
  border: 1px solid var(--brd2) !important;
  border-radius: 999px !important;
  padding: 13px 32px !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
}
.loadMore__button:hover {
  background: var(--cta) !important;
  border-color: var(--cta) !important;
  color: var(--white) !important;
}

.listingControls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--brd) !important;
  margin-top: 8px !important;
}
.goToTop__button, a.goToTop__button {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tx3) !important;
  background: transparent !important;
  border: 1px solid var(--brd2) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
}
.goToTop__button:hover { color: var(--pr) !important; border-color: var(--pr) !important; }

/* ════════════════════════════
   SIDEBAR
════════════════════════════ */
.sidebar { font-family: var(--fb) !important; }

/* Všetky .box v sidebare */
.sidebar .box {
  border-radius: 14px !important;
  padding: 20px !important;
  margin-bottom: 14px !important;
  border: 1px solid var(--brd) !important;
}
.sidebar .box-bg-variant { background: var(--bg2) !important; }
.sidebar .box-bg-default { background: var(--white) !important; }

/* Box headings v sidebare */
.sidebar .pageElement__heading,
.sidebar .pageElement__heading span {
  font-family: var(--fb) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--tx3) !important;
  font-style: normal !important;
  margin: 0 0 14px !important;
  display: block !important;
}

/* Kategórie strom */
#categories { font-size: 13px !important; }
#categories .categories { margin-bottom: 2px !important; }
#categories .topic a {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  text-decoration: none !important;
  display: block !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  transition: all var(--t) !important;
}
#categories .topic.active > a {
  color: var(--pr) !important;
  background: var(--bg) !important;
}
#categories .topic a:hover { color: var(--pr) !important; background: var(--bg) !important; }

#categories ul {
  list-style: none !important;
  padding-left: 14px !important;
  margin: 2px 0 6px !important;
  border-left: 2px solid var(--brd2) !important;
  margin-left: 10px !important;
}
#categories ul li a {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  color: var(--tx3) !important;
  text-decoration: none !important;
  padding: 5px 8px !important;
  display: block !important;
  border-radius: 6px !important;
  transition: all var(--t) !important;
}
#categories ul li a:hover,
#categories ul li.active > a {
  color: var(--pr) !important;
  background: var(--bg) !important;
}
/* Skryť expand trigger – kategórie sú vždy rozvinuté */
#categories .cat-trigger { display: none !important; }

/* Filter tlačidlo */
.unveil-button, a.unveil-button {
  width: 100% !important;
  background: var(--bg) !important;
  border: 1px solid var(--brd2) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-family: var(--fb) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.unveil-button:hover {
  background: var(--pr) !important;
  border-color: var(--pr) !important;
  color: var(--white) !important;
}

/* Price range slider */
.slider-wrapper h4 {
  font-family: var(--fb) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--tx3) !important;
  margin: 0 0 10px !important;
}
.slider-header {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  margin-bottom: 10px !important;
}
.ui-slider {
  background: var(--bg3) !important;
  border: none !important;
  height: 3px !important;
  border-radius: 99px !important;
}
.ui-slider-range { background: var(--pr) !important; }
.ui-slider-handle {
  background: var(--white) !important;
  border: 2px solid var(--pr) !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  top: -7px !important;
  cursor: pointer !important;
}
.filter-label {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  color: var(--tx2) !important;
  cursor: pointer !important;
}
.filter-count { font-size: 11px !important; color: var(--tx3) !important; margin-left: 3px !important; }

/* Top 10 produktov */
.top-products {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.top-products li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--brd) !important;
}
.top-products li:last-child { border-bottom: none !important; }
.top-products-image { flex-shrink: 0 !important; }
.top-products-image img {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid var(--brd) !important;
  display: block !important;
}
.top-products-content {
  flex: 1 !important;
  min-width: 0 !important;
  text-decoration: none !important;
}
.top-products-name {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  color: var(--tx) !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  margin-bottom: 2px !important;
  transition: color var(--t) !important;
}
.top-products-content:hover .top-products-name { color: var(--pr) !important; }
.top-products strong {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--pr) !important;
  display: block !important;
}

/* Online platby */
.box-onlinePayments { text-align: center !important; }

/* ════════════════════════════
   COOKIES LIŠTA – floating card
════════════════════════════ */
.siteCookies,
.siteCookies--bottom,
.siteCookies--dark {
  position: fixed !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 860px !important;
  background: #1C1814 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.40) !important;
  padding: 18px 24px !important;
  z-index: 99999 !important;
  font-family: var(--fb) !important;
  box-sizing: border-box !important;
}
.siteCookies__form {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}
.siteCookies__content { flex: 1 1 200px !important; min-width: 0 !important; }
.siteCookies__text {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(253,250,245,.60) !important;
  margin: 0 !important;
}
.siteCookies__text a {
  color: var(--gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.siteCookies__links { margin: 6px 0 0 !important; padding: 0 !important; }
.siteCookies__link {
  background: none !important;
  border: none !important;
  color: rgba(253,250,245,.35) !important;
  font-size: 12px !important;
  font-family: var(--fb) !important;
  cursor: pointer !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color var(--t) !important;
}
.siteCookies__link:hover { color: rgba(253,250,245,.65) !important; }
.siteCookies__buttonWrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
/* Odmietnuť */
.siteCookies__button[value="reject"] {
  background: transparent !important;
  border: 1px solid rgba(253,250,245,.18) !important;
  color: rgba(253,250,245,.55) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-family: var(--fb) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.siteCookies__button[value="reject"]:hover {
  border-color: rgba(253,250,245,.35) !important;
  color: rgba(253,250,245,.80) !important;
}
/* Súhlasím */
.siteCookies__button[value="all"] {
  background: var(--cta) !important;
  border: none !important;
  color: var(--white) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-family: var(--fb) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background var(--t) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.siteCookies__button[value="all"]:hover { background: var(--cta-hv) !important; }

@media(max-width:600px) {
  .siteCookies, .siteCookies--bottom, .siteCookies--dark {
    bottom: 8px !important;
    width: calc(100% - 16px) !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }
  .siteCookies__buttonWrap {
    width: 100% !important;
    justify-content: stretch !important;
  }
  .siteCookies__button {
    flex: 1 !important;
    text-align: center !important;
  }
}

/* ════════════════════════════
   PRODUCT DETAIL PAGE
════════════════════════════ */

/* Názov produktu */
.p-detail-inner-header h1 {
  font-family: var(--fh) !important;
  font-style: italic !important;
  font-size: clamp(1.5rem,2.8vw,2.1rem) !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  line-height: 1.3 !important;
  margin: 0 0 6px !important;
}
.p-code {
  font-family: var(--fb) !important;
  font-size: 11px !important;
  color: var(--tx3) !important;
  letter-spacing: .4px !important;
}
.p-code-label { font-weight: 600 !important; }

/* Hodnotenie – hviezdy */
.stars-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 !important;
}
.stars { display: flex !important; gap: 2px !important; }
.star { color: var(--gold) !important; font-size: 14px !important; }
.star-off { color: var(--bg3) !important; }
.stars-label {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  color: var(--tx3) !important;
}

/* Cena */
.p-final-price-wrapper {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 16px 0 10px !important;
}
.price-final {
  font-family: var(--fh) !important;
  font-size: 2.1rem !important;
  font-weight: 600 !important;
  color: var(--pr) !important;
  font-style: normal !important;
}
.price-final-holder {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}
.pr-list-unit {
  font-family: var(--fb) !important;
  font-size: 14px !important;
  color: var(--tx3) !important;
  font-weight: 400 !important;
}

/* Dostupnosť */
.availability-value { margin-bottom: 12px !important; }
.availability-label {
  font-family: var(--fb) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Možnosti doručenia */
.shipping-options {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  color: var(--pr) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.detail-parameters {
  border: none !important;
  margin: 10px 0 16px !important;
  width: 100% !important;
}
.detail-parameters th, .detail-parameters td {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  padding: 7px 10px !important;
  border-bottom: 1px solid var(--brd) !important;
  background: transparent !important;
}
.detail-parameters th {
  color: var(--tx3) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.detail-parameters td { color: var(--tx) !important; }
.detail-parameters a { color: var(--pr) !important; }

/* Quantity stepper + add to cart */
.add-to-cart {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 16px 0 20px !important;
}
.quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--white) !important;
  border: 1px solid var(--brd2) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  height: 48px !important;
  flex-shrink: 0 !important;
}
.quantity .amount {
  width: 52px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--fb) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  padding: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
}
.quantity .amount::-webkit-inner-spin-button,
.quantity .amount::-webkit-outer-spin-button { -webkit-appearance: none !important; }
.quantity .increase,
.quantity .decrease {
  width: 38px !important;
  height: 48px !important;
  border: none !important;
  background: transparent !important;
  color: var(--tx2) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--t) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.quantity .increase:hover,
.quantity .decrease:hover {
  background: var(--bg2) !important;
  color: var(--pr) !important;
}

/* ★ Add to cart CTA button */
.btn-conversion,
.btn.btn-conversion,
.btn.btn-lg.btn-conversion,
.add-to-cart-button.btn-conversion,
button.btn-conversion {
  background: var(--cta) !important;
  border: none !important;
  color: var(--white) !important;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background var(--t) !important;
  height: 48px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-conversion:hover,
.btn.btn-conversion:hover { background: var(--cta-hv) !important; }

/* Krátky popis */
.p-short-description {
  font-family: var(--fb) !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: var(--tx2) !important;
  margin: 4px 0 16px !important;
  border-top: 1px solid var(--brd) !important;
  padding-top: 16px !important;
}
.p-short-description ul {
  padding-left: 18px !important;
  margin: 8px 0 !important;
}
.p-short-description li { margin-bottom: 4px !important; }
.p-short-description strong { color: var(--tx) !important; }

/* Detailné informácie link */
a.chevron-after, a.chevron-down-after {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  color: var(--pr) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
a.chevron-after:hover, a.chevron-down-after:hover { color: var(--pr-dk) !important; }

/* Social action ikony (Tlač, Opýtať, Strážiť, Zdieľať) */
.social-buttons-wrapper { margin: 16px 0 0 !important; }
.link-icons {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.link-icon {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--brd) !important;
  border-radius: 10px !important;
  background: var(--white) !important;
  color: var(--tx2) !important;
  font-family: var(--fb) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  text-decoration: none !important;
  transition: all var(--t) !important;
  cursor: pointer !important;
  min-width: 56px !important;
}
.link-icon:hover {
  background: var(--bg2) !important;
  border-color: var(--pr) !important;
  color: var(--pr) !important;
}
.link-icon span { font-size: 11px !important; }

/* ════════════════════════════
   PRODUCT DETAIL TABS
════════════════════════════ */
.shp-tabs-wrapper {
  margin-top: 32px !important;
  border-top: 1px solid var(--brd) !important;
  padding-top: 0 !important;
}
.p-detail-tabs,
ul#p-detail-tabs {
  display: flex !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 16px 0 0 !important;
  margin: 0 0 24px !important;
  border-bottom: 1px solid var(--brd) !important;
  flex-wrap: wrap !important;
}
.shp-tab-link {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  border: 1px solid var(--brd2) !important;
  background: var(--white) !important;
  text-decoration: none !important;
  display: block !important;
  transition: all var(--t) !important;
  white-space: nowrap !important;
}
.shp-tab-link:hover {
  background: var(--bg2) !important;
  color: var(--pr) !important;
  border-color: var(--pr) !important;
}
.shp-tab.active .shp-tab-link {
  background: var(--cta) !important;
  border-color: var(--cta) !important;
  color: var(--white) !important;
}

/* Obsah tabov */
.basic-description h3,
.extended-description h3 {
  font-family: var(--fh) !important;
  font-style: italic !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  margin: 0 0 16px !important;
}
.basic-description {
  font-family: var(--fb) !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: var(--tx2) !important;
}
.basic-description ul { padding-left: 20px !important; margin: 8px 0 !important; }
.basic-description li { margin-bottom: 5px !important; }
.basic-description strong { color: var(--tx) !important; }

/* Diskusia */
.discussionContainer p {
  font-family: var(--fb) !important;
  font-size: 14px !important;
  color: var(--tx2) !important;
}
.add-comment .comment-icon,
.add-comment .link-like {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  color: var(--pr) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.discussion-form input[type="submit"],
.discussion-form .btn-primary {
  background: var(--cta) !important;
  border: none !important;
  color: var(--white) !important;
  border-radius: 999px !important;
  padding: 11px 28px !important;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background var(--t) !important;
}
.discussion-form input[type="submit"]:hover { background: var(--cta-hv) !important; }
.vj-fade { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.vj-fade.vj-show { opacity: 1; transform: none; }

#vj-top {
  position: fixed !important; bottom: 24px !important; right: 20px !important;
  width: 40px !important; height: 40px !important;
  background: var(--cta) !important; color: var(--white) !important;
  border: none !important; border-radius: 50% !important;
  font-size: 16px !important; cursor: pointer !important;
  opacity: 0 !important; transform: translateY(8px) !important;
  transition: opacity var(--t), transform var(--t) !important;
  z-index: 9999 !important; box-shadow: 0 4px 16px rgba(90,55,20,.28) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
#vj-top.show { opacity: 1 !important; transform: translateY(0) !important; }
#vj-top:hover { background: var(--cta-hv) !important; }

/* ════════════════════════════
   NEWSLETTER PÁS
   Vlastné HTML – žiadny boj so Shoptetom
════════════════════════════ */

/* Skry Shoptet original (JS ho skryje aj inline, toto je záloha) */
.custom-footer__newsletter { display: none !important; }

#vj-newsletter-band {
  background: var(--bg);
  border-top: 1px solid var(--brd);
  border-bottom: 1px solid var(--brd);
  padding: 52px 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
#vj-newsletter-band h3 {
  font-family: var(--fh);
  font-style: italic;
  font-size: 26px;
  font-weight: 600;
  color: var(--tx);
  margin: 0 0 24px;
}
#vj-newsletter-band form {
  max-width: 420px;
  margin: 0 auto;
}
#vj-newsletter-band input[type="email"] {
  display: block;
  width: 100%;
  height: 48px;
  background: var(--white);
  border: 1px solid var(--brd2);
  border-radius: 999px;
  padding: 0 20px;
  font-size: 14px;
  font-family: var(--fb);
  color: var(--tx);
  margin: 0 0 10px;
  box-sizing: border-box;
  box-shadow: none;
}
#vj-newsletter-band input[type="email"]:focus {
  outline: none;
  border-color: var(--pr);
  box-shadow: 0 0 0 3px rgba(125,78,36,.10);
}
#vj-newsletter-band button[type="submit"] {
  display: block;
  width: 100%;
  background: var(--cta);
  border: none;
  color: var(--white);
  font-family: var(--fb);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
}
#vj-newsletter-band button[type="submit"]:hover { background: var(--cta-hv); }
#vj-newsletter-band .vj-nl-note {
  font-size: 12px;
  color: var(--tx3);
  margin: 14px 0 0;
  line-height: 1.6;
}
#vj-newsletter-band .vj-nl-note a { color: var(--pr); }

@media(max-width:480px) {
  #vj-newsletter-band { padding: 36px 16px; }
  #vj-newsletter-band h3 { font-size: 22px; }
}

/* ════════════════════════════
   PÄTIČKA
   ★ ZMENA: mierne zosvetlená (#242018 namiesto #1C1814)
════════════════════════════ */
#footer, footer { background: #252018 !important; color: rgba(253,250,245,.7) !important; }
#footer .content-wrapper,
#footer .content-wrapper-in,
#footer .row,
#footer > div { background: #252018 !important; }

#footer img:not(.vam), footer img:not(.vam) {
  filter: brightness(0) invert(1) !important; opacity: 0.5 !important;
}

.custom-footer.elements-5 {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  align-items: flex-start !important; gap: 32px 48px !important;
  max-width: 1200px !important; margin: 0 auto !important;
  padding: 52px 40px 44px !important; width: 100% !important; box-sizing: border-box !important;
}
.custom-footer.elements-5 > * {
  flex: 1 1 180px !important; min-width: 0 !important; max-width: 300px !important;
}
.custom-footer__section1 {
  display: none !important; flex: none !important; max-width: 0 !important; padding: 0 !important; margin: 0 !important;
}
.custom-footer.elements-5 > .custom-footer__logo { flex: 0 0 140px !important; max-width: 140px !important; }

/* Nadpisy stĺpcov – ★ odstraňujem uppercase & italic z pätičky */
.custom-footer__contact h3,
.custom-footer__articles h3,
.custom-footer__section2 h3,
.custom-footer__contact h3 span,
.custom-footer__articles h3 span,
.custom-footer__section2 h3 span {
  font-family: var(--fb) !important;    /* ★ sans-serif, nie serif italic */
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important; /* tracking + caps = čitateľné štítky */
  color: rgba(253,250,245,.45) !important;
  margin: 0 0 16px !important;
  display: block !important;
  word-break: normal !important; white-space: normal !important;
}

/* Kontakt */
.custom-footer__contact .contact-box ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.custom-footer__contact .contact-box li { margin-bottom: 10px !important; }
.custom-footer__contact .tel a {
  white-space: nowrap !important; font-family: var(--fb) !important;
  font-size: 15px !important; font-weight: 600 !important;
  color: rgba(253,250,245,.90) !important; text-decoration: none !important; transition: color var(--t) !important;
}
.custom-footer__contact .mail a {
  font-family: var(--fb) !important; font-size: 13px !important; font-weight: 400 !important;
  color: rgba(253,250,245,.65) !important; text-decoration: none !important;
  word-break: break-word !important; transition: color var(--t) !important;
}
.custom-footer__contact .facebook a,
.custom-footer__contact .instagram a {
  font-family: var(--fb) !important; font-size: 13px !important;
  color: rgba(253,250,245,.50) !important; text-decoration: none !important; transition: color var(--t) !important;
}
.custom-footer__contact .contact-box a:hover { color: var(--gold) !important; }

/* Informácie */
.custom-footer__articles ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.custom-footer__articles li { margin-bottom: 8px !important; }
.custom-footer__articles a {
  font-family: var(--fb) !important; font-size: 13px !important;
  color: rgba(253,250,245,.50) !important; text-decoration: none !important;
  display: block !important; word-break: break-word !important; transition: color var(--t) !important;
  font-weight: 400 !important;  /* ★ nie bold */
}
.custom-footer__articles a:hover { color: var(--gold) !important; }

/* Spolupráca */
.custom-footer__section2 .news-item-widget { margin-bottom: 8px !important; }
.custom-footer__section2 .newsItemWidget__heading a {
  font-family: var(--fb) !important; font-size: 13px !important;
  color: rgba(253,250,245,.50) !important; text-decoration: none !important;
  display: block !important; transition: color var(--t) !important;
  font-weight: 400 !important;  /* ★ nie bold */
}
.custom-footer__section2 .newsItemWidget__heading a:hover { color: var(--gold) !important; }

/* Footer bottom */
.footer-bottom, #footer-bottom,
[class*="footer-bottom"], [class*="footer-copy"] {
  background: #16120D !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  text-align: center !important; padding: 14px 20px !important;
}
.footer-bottom *, [class*="footer-bottom"] *, #signature, #signature a, .copyright, .copyright * {
  font-family: var(--fb) !important; font-size: 12px !important;
  color: rgba(253,250,245,.28) !important;
}
.footer-bottom a:hover, #signature a:hover { color: var(--gold) !important; }
.footer-bottom img { filter: none !important; opacity: .2 !important; }

/* ════════════════════════════
   MOBILE FOOTER
════════════════════════════ */
@media(max-width: 767px) {
  .custom-footer.elements-5 {
    flex-direction: column !important; padding: 36px 20px 28px !important;
    gap: 24px !important; align-items: flex-start !important;  /* ★ left-align na mobile */
  }
  .custom-footer.elements-5 > * { flex: 1 1 100% !important; max-width: 100% !important; }
}
@media(min-width: 768px) and (max-width: 1024px) {
  .custom-footer.elements-5 { padding: 40px 24px !important; gap: 28px 32px !important; }
  .custom-footer.elements-5 > * { flex: 1 1 160px !important; }
}

/* ═══════════════════════════════════════════════
   OPRAVY v3
   ✅ 1. Biely pásik na mobile (overflow-x)
   ✅ 2. Nav – správny selektor .navigation-in (nie .navigation)
   ✅ 3. flag-discount badge
   ✅ 4. Produktové názvy – Playfair Display
   ✅ 5. Sekčné nadpisy HP – .homepage-group-title
   ✅ 6. Dostupnosť – Skladom badge
═══════════════════════════════════════════════ */

/* 1. Biely pásik na mobile */
html, body { overflow-x: hidden !important; }

/* ─────────────────────────────────────
   2. NAVIGÁCIA – KOMPLETNÝ FIX
   Skutočný HTML wrapper je .navigation-in.menu
   NIE .navigation – preto pôvodné pravidlá nefungovali
───────────────────────────────────────────── */

/* Pozadie a spodný border celého nav baru */
.navigation-in {
  background: var(--white) !important;
  border-bottom: 1px solid var(--brd) !important;
}

/* Odstrán separátory medzi položkami (border-right na li, ::after, atď.) */
.navigation-in .menu-level-1 > li {
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  list-style: none !important;
}
.navigation-in .menu-level-1 > li::after,
.navigation-in .menu-level-1 > li::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
}
/* Shoptet dáva aj separátor ako background-image na li */
.navigation-in .menu-level-1 { background-image: none !important; }

/* ★ PRIAMY FIX FONTU – Playfair Display italic cez data-testid */
[data-testid="headerMenuItem"] {
  font-family: var(--fh) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  letter-spacing: .2px !important;
  text-transform: none !important;
}
[data-testid="headerMenuItem"] span {
  font-family: var(--fh) !important;
  font-style: italic !important;
  font-weight: 600 !important;
}
/* <b> tag v level-1 linkoch */
[data-testid="headerMenuItem"] b {
  font-family: var(--fh) !important;
  font-weight: 600 !important;
  font-style: italic !important;
  display: inline !important;
}

/* Štýl nav linkov level-1 */
.navigation-in .menu-level-1 > li > a {
  font-family: var(--fh) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  color: var(--tx2) !important;
  letter-spacing: .2px !important;
  text-transform: none !important;
  background: transparent !important;
  padding: 18px 16px !important;
  display: block !important;
  white-space: nowrap !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--t), border-color var(--t) !important;
}

/* Skryj dropdown šípku */
.navigation-in .submenu-arrow { display: none !important; }

/* Hover + active stav */
.navigation-in .menu-level-1 > li > a:hover {
  color: var(--pr) !important;
  border-bottom-color: var(--gold) !important;
  background: transparent !important;
}
/* Active - Shoptet dáva class="active" na <a>, nie na <li> */
.navigation-in .menu-level-1 > li > a.active,
#navigation .menu-level-1 > li > a.active {
  color: var(--pr) !important;
  border-bottom-color: var(--gold) !important;
}
.navigation-in .menu-level-1 > li > a:not(.active):not(:hover) {
  border-bottom-color: transparent !important;
}

/* Dropdown Level 2 */
@media(min-width:992px) {
  .navigation-in .menu-level-1 > li { position: relative !important; }
  .navigation-in .menu-level-2 { display: none !important; }
  .navigation-in .menu-level-1 > li:hover > .menu-level-2,
  .navigation-in .menu-level-1 > li:focus-within > .menu-level-2 {
    display: block !important;
    position: absolute !important; top: 100% !important; left: 0 !important;
    background: var(--white) !important;
    border: 1px solid var(--brd) !important;
    border-top: 2px solid var(--gold) !important;
    box-shadow: var(--sh) !important;
    border-radius: 0 0 12px 12px !important;
    min-width: 210px !important;
    z-index: 9999 !important;
    padding: 6px 0 !important;
    animation: vjDrop .18s ease !important;
  }
  .navigation-in .menu-level-2 li::after,
  .navigation-in .menu-level-2 li::before { content: none !important; display: none !important; }
  .navigation-in .menu-level-2 .menu-no-image { padding: 0 !important; }
  .navigation-in .menu-level-2 a {
    font-family: var(--fb) !important; font-size: 13px !important; font-weight: 400 !important;
    text-transform: none !important; color: var(--tx2) !important;
    padding: 10px 20px !important; border-bottom: 1px solid var(--brd) !important;
    display: block !important; white-space: nowrap !important;
    transition: color var(--t), background var(--t) !important;
  }
  .navigation-in .menu-level-2 a:hover { color: var(--pr) !important; background: var(--bg) !important; }
  .navigation-in .menu-level-2 li:last-child a { border-bottom: none !important; }

  /* Schovaj čiarky za level-3 itemmi (,) – Shoptet ich generuje ako text node */
  .navigation-in .menu-level-3 li {
    font-size: 0 !important; /* schová text-node čiarky */
  }
  .navigation-in .menu-level-3 li a {
    font-size: 12px !important; /* obnov pre samotný link */
    font-family: var(--fb) !important;
    color: var(--tx3) !important;
    padding: 9px 16px !important;
    display: block !important;
  }
  .navigation-in .menu-level-3 li::after,
  .navigation-in .menu-level-3 li::before { content: none !important; display: none !important; }
  .navigation-in .more-items-trigger { display: none !important; }
}

/* ─────────────────────────────────────
   3. FLAG-DISCOUNT BADGE
   HTML: <span class="flag flag-discount">
           <span class="price-standard"><span>54 €</span></span>
           <span class="price-save">–7 %</span>
         </span>
───────────────────────────────────────── */
.flag.flag-discount {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--cta) !important;
  color: var(--white) !important;
  border-radius: 10px !important;
  padding: 5px 8px !important;
  font-family: var(--fb) !important;
  line-height: 1.3 !important;
  min-width: 52px !important;
  text-align: center !important;
}

/* Pôvodná cena – prečiarknutá */
.flag.flag-discount .price-standard {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.65) !important;
  text-decoration: line-through !important;
  display: block !important;
}
.flag.flag-discount .price-standard span {
  text-decoration: line-through !important;
  color: rgba(255,255,255,.65) !important;
}

/* Zľava % – veľká a výrazná */
.flag.flag-discount .price-save {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  display: block !important;
  letter-spacing: .2px !important;
}

/* ─────────────────────────────────────
   DETAIL tlačidlo – správny selektor
   HTML: .p-bottom > .p-tools > a.btn.btn-primary
   NIE .p-in ako som mal predtým
───────────────────────────────────────── */
.p-tools .btn.btn-primary,
.p-tools a.btn.btn-primary,
.p-bottom .btn.btn-primary,
.products .btn.btn-detail,
.products a.btn.btn-detail {
  background: var(--cta) !important;
  border: 1px solid var(--cta) !important;
  color: var(--white) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-family: var(--fb) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--t), border-color var(--t) !important;
}
.p-tools .btn.btn-primary:hover,
.p-tools a.btn.btn-primary:hover,
.p-bottom .btn.btn-primary:hover {
  background: var(--cta-hv) !important;
  border-color: var(--cta-hv) !important;
  color: var(--white) !important;
}

/* ─────────────────────────────────────
   FILTER – tlačidlo + checkboxy + labels
   HTML: .filters-unveil-button-wrapper > a.btn.btn-default.unveil-button
───────────────────────────────────────── */

/* Tlačidlo "Otvoriť filter" */
.filters-unveil-button-wrapper .btn,
a.unveil-button.btn-default,
.btn.btn-default.unveil-button {
  width: 100% !important;
  background: var(--bg2) !important;
  border: 1px solid var(--brd2) !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-family: var(--fb) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
  box-sizing: border-box !important;
}
.filters-unveil-button-wrapper .btn:hover,
a.unveil-button.btn-default:hover {
  background: var(--pr) !important;
  border-color: var(--pr) !important;
  color: var(--white) !important;
}

/* Filter sekcie – nadpisy */
.filter-section h4 {
  font-family: var(--fb) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--tx3) !important;
  margin: 16px 0 10px !important;
  padding: 0 !important;
  border: none !important;
}
.filter-section h4 span {
  font-family: var(--fb) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Filter labels – len font a farba, nič iné */
.filter-label {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  color: var(--tx2) !important;
  transition: color var(--t) !important;
  line-height: 1.4 !important;
}
.filter-label:hover { color: var(--pr) !important; }
.filter-label.disabled { color: var(--tx3) !important; opacity: .5 !important; cursor: default !important; }

/* Filter count */
.filter-count {
  font-family: var(--fb) !important;
  font-size: 11px !important;
  color: var(--tx3) !important;
}

/* Shoptet má vlastný checkbox widget – nemeníme appearance ani layout,
   len farbu keď je zaškrtnutý */
.filter-section input[type="checkbox"]:checked {
  accent-color: var(--pr) !important;
}

.filter-section fieldset { border: none !important; padding: 0 !important; margin: 0 !important; }

/* ─────────────────────────────────────
   NAV FONT – <b> tag fix
   Selektor cez #navigation (id) ktorý naozaj existuje v HTML
   <nav id="navigation"> > .navigation-in.menu > ul.menu-level-1
───────────────────────────────────────── */
#navigation .menu-level-1 > li > a b,
#navigation .menu-level-1 > li > a > b,
[data-testid="headerMenuItem"] b {
  font-weight: 500 !important;
  font-family: var(--fb) !important;
  font-style: normal !important;
  display: inline !important;
}
.products .product .name a,
.products .product .name span {
  font-family: var(--fh) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--tx) !important;
}

/* ─────────────────────────────────────
   5. Sekčné nadpisy HP
   Skutočný HTML: <div class="homepage-group-title homepage-products-heading-1 h4">
───────────────────────────────────────── */
.homepage-group-title,
[class*="homepage-products-heading"] {
  font-family: var(--fh) !important;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  text-align: center !important;
}
.homepage-group-title::after,
[class*="homepage-products-heading"]::after {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 2px !important;
  background: var(--gold) !important;
  margin: 10px auto 20px !important;
}

/* ─────────────────────────────────────
   6. Dostupnosť – Skladom badge
   inline style="color:#3c840f" prebijeme cez !important
───────────────────────────────────────── */
.availability { margin: 6px 0 !important; }
.availability span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #2d6e0f !important;
  background: #edf7e6 !important;
  border: 1px solid #c3e6aa !important;
  border-radius: 999px !important;
  font-family: var(--fb) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  line-height: 1.5 !important;
}
.availability span::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #3c840f !important;
  flex-shrink: 0 !important;
}

/* ═══ Celý názov produktu na mobile ═══ */
@media(max-width:991px) {
  .products .product .name,
  .products .product .name a,
  .products .product .name span,
  .product-name,
  .product-name a,
  .product-name span {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    display: block !important;
    -webkit-box-orient: unset !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
  }
}