/* =========================================================
   Pán Medvedík — vlastné CSS pre Shoptet
   Tento súbor slúži len ako lokálna referencia.
   Jednotlivé bloky kopíruj manuálne do Shoptet adminu
   (Vzhľad a obsah → Editor → HTML kód / vlastné CSS).
   ========================================================= */

/* Version: 2026-04-08-02 */

/* Google font import (alternatíva k <link> v HEAD).
   Pozn.: @import je jednoduché, ale môže byť o trochu pomalšie ako <link>. */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

/* ---------------------------------------------------------
   1) Homepage nadpisy produktových sekcií
      Cieľ: Nadpisy ako "Novinky", "Odporúčame" atď.
      majú používať font Pacifico podľa design-system.md
      (primárny nadpisový font).

      HTML príklad:
      <div class="homepage-group-title homepage-products-heading-2 h4">Novinky</div>

      Poznámka:
      - Pacifico má v Google Fonts prakticky jeden vizuálny rez,
        ale nastavujeme font-weight: 700 kvôli konzistentným pravidlám.
   --------------------------------------------------------- */

/* Nadpisy skupín na homepage majú často aj triedu .h4 (z šablóny).
   Použijeme preto presnejšie selektory, aby sme vyhrali nad default štýlmi. */
.homepage-group-title,
.homepage-group-title.h4,
.homepage-group-title.homepage-products-heading-2,
.homepage-group-title.homepage-products-heading-2.h4,
.homepage-group-title.homepage-products-heading-5,
.homepage-group-title.homepage-products-heading-5.h4 {
  font-family: 'Pacifico', cursive !important;
  font-weight: 300 !important;
  color: #1E1E1E !important; /* čierna podľa požiadavky */
}

/* Desktop veľkosť nadpisov sekcií */
@media (min-width: 768px) {
  .homepage-group-title,
  .homepage-group-title.h4,
  .homepage-group-title.homepage-products-heading-2.h4,
  .homepage-group-title.homepage-products-heading-5.h4 {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }
}

/* Mobil – nech je to stále čitateľné, ale nie obrovské */
@media (max-width: 767px) {
  .homepage-group-title,
  .homepage-group-title.h4 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
}

/* ---------------------------------------------------------
   2) Toggle „Zobraziť viac / menej“ (LL More) — CSS časť
      Cieľ: Skryť/ukázať obsah v .ll-more + štýl spínača.
      JS časť MUSÍ ostať v Shoptete ako <script>.
   --------------------------------------------------------- */

.ll-more {
  display: none;
}

.ll-more.is-open {
  display: block;
}

.ll-more-toggle {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 15px;
  color: #666;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.ll-more-toggle:hover {
  color: #333;
  text-decoration: underline;
}

.ll-more-toggle::before {
  content: "▸ ";
}

.ll-more-toggle.is-open::before {
  content: "▾ ";
}

/* ---------------------------------------------------------
   3) Homepage produktové karty (Novinky/Odporúčame)
      Cieľ:
      - odstrániť „vertikálnu čiaru“ medzi kartami
      - pridať jemnú medzeru medzi kartami (cca 1rem)
      - pridať veľmi jemný tieň + mierne silnejší na hover

      Scope:
      - len homepage skupiny #products-2 a #products-5
   --------------------------------------------------------- */

/* Medzera medzi kartami (nech nie sú nalepené) */
#products.products .product,
#products-2.products .product,
#products-5.products .product {
  padding: 1rem; /* spolu dá cca 2rem medzeru medzi kartami */
  box-sizing: border-box;
  /* vypnúť separátory medzi položkami (často border na .product) */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Pre istotu vypneme separátory aj ako pseudo-elementy na .product */
#products.products .product::before,
#products.products .product::after,
#products-2.products .product::before,
#products-2.products .product::after,
#products-5.products .product::before,
#products-5.products .product::after {
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Základný „card“ vzhľad */
#products.products .product .p,
#products-2.products .product .p,
#products-5.products .product .p {
  background: #fff;
  /* vypnúť pôvodné orámovanie/separátory zo šablóny */
  border: 0 !important;
  outline: 0 !important;
  /* niekedy je „čiara“ spravená inset shadow */
  box-shadow: 0 2px 10px rgba(30, 30, 30, 0.06) !important;

  /* vnútorný priestor karty */
  padding: 1rem 2rem 2rem !important; /* hore 1rem, boky 2rem, dole 2rem */

  border-radius: 12px;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

/* Pre istotu vypneme aj možné pseudo-elementy (separator) */
#products.products .product .p::before,
#products.products .product .p::after,
#products-2.products .product .p::before,
#products-2.products .product .p::after,
#products-5.products .product .p::before,
#products-5.products .product .p::after {
  box-shadow: none !important;
  border: 0 !important;
}

/* Jemný hover efekt */
#products.products .product:hover .p,
#products-2.products .product:hover .p,
#products-5.products .product:hover .p {
  box-shadow: 0 10px 26px rgba(30, 30, 30, 0.14);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   4) Homepage – názov produktu v kartách (Novinky/Odporúčame)
      Cieľ:
      - o ~3–4px väčší font
      - mierne hrubší rez
   --------------------------------------------------------- */

#products.products .product .name,
#products-2.products .product .name,
#products-5.products .product .name {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25;
}

/* ---------------------------------------------------------
   4b) Produktové štítky (flag: Novinka/Zľava/Odporúčame…)
       Cieľ:
       - zaoblené “pill” štítky
       - farby podľa design-system.md
       Scope: homepage (#products-2, #products-5) + katalóg (#products)
   --------------------------------------------------------- */

#products-2.products .product .flag,
#products-5.products .product .flag,
#products.products .product .flag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #D4C4A8;
  font-family: 'Patrick Hand SC', cursive;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  line-height: 1.2;
  background: #EDE7D9; /* --color-bg-highlight */
  color: #3A6B7C;      /* --color-heading */
}

/* Novinka – jemná “tag” modrá */
#products-2.products .product .flag.flag-new,
#products-5.products .product .flag.flag-new,
#products.products .product .flag.flag-new {
  background: #C17B4A !important; /* hrdzavá (brand) */
  border-color: #C17B4A !important;
  color: #FAF8F3 !important; /* opticky biela */
}

/* TIP – prašná modrá (častejšie býva inline background-color, preto !important) */
#products-2.products .product .flag.flag-tip,
#products-5.products .product .flag.flag-tip,
#products.products .product .flag.flag-tip {
  background: #1E1E1E !important; /* výrazná neutrálna (čierna) */
  border-color: #1E1E1E !important;
  color: #FAF8F3 !important;
}

/* Zľavy / akcie – hrdzavá (CTA akcent) */
#products-2.products .product .flag.flag-sale,
#products-2.products .product .flag.flag-action,
#products-5.products .product .flag.flag-sale,
#products-5.products .product .flag.flag-action,
#products.products .product .flag.flag-sale,
#products.products .product .flag.flag-action {
  background: #A76035 !important; /* tmavšia hrdzavá – odlíšiť od NOVINKA */
  border-color: #A76035 !important;
  color: #FAF8F3 !important; /* opticky biela */
}

/* Vypredané / nedostupné – piesok + tmavý text (rôzne triedy podľa šablóny) */
#products-2.products .product .flag.flag-soldout,
#products-5.products .product .flag.flag-soldout,
#products.products .product .flag.flag-soldout,
#products-2.products .product .flag.flag-out,
#products-5.products .product .flag.flag-out,
#products.products .product .flag.flag-out,
#products-2.products .product .flag.flag-out-of-stock,
#products-5.products .product .flag.flag-out-of-stock,
#products.products .product .flag.flag-out-of-stock {
  background: #D4C4A8 !important; /* piesok */
  border-color: #D4C4A8 !important;
  color: #1E1E1E !important;
}

/* ---------------------------------------------------------
   5) Benefit banner (USP pásik) — nadpisy položiek
      Cieľ: Použiť sekundárny font z design systému:
      Patrick Hand SC (uppercase + letter-spacing).
   --------------------------------------------------------- */

.benefitBanner__title {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 600 !important; /* font môže mať len 1 rez; zvyšok dorobíme opticky */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Optické „zhrubnutie“ (keď reálny bold neexistuje) */
  text-shadow:
    0.25px 0   0 currentColor,
   -0.25px 0   0 currentColor;
}

/* Rovnaký sekundárny font aj pre text pod nadpisom v USP položkách */
.benefitBanner__data {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------
   6) Základné pozadie sekcií na homepage
      Cieľ: Použiť default pozadie šablóny (krémové) a
      zrušiť prípadné biele pozadia wrapperov, aby sa
      neobjavovali „biele bloky“.
   --------------------------------------------------------- */

body {
  background-color: #FAF8F3; /* design-system: --color-bg */
}

/* Sekcie na homepage nech sú transparentné (pozadie ide z body) */
body.in-index .homepage-box,
body.in-index .welcome-wrapper,
body.in-index .welcome,
body.in-index .content-wrapper.homepage-box {
  background: transparent !important;
}

/* ---------------------------------------------------------
   7) Footer — skryť „Vytvoril Shoptet“
   --------------------------------------------------------- */

footer #signature {
  display: none !important;
}

/* ---------------------------------------------------------
   7b) Tlačidlá – font podľa sekundárnych nadpisov (test)
       Cieľ:
       - všetky tlačidlá (Do košíka, Detail, atď.) v Patrick Hand SC
       - uppercase + letter-spacing podľa design-system.md
   --------------------------------------------------------- */

/* Shoptet typicky používa .btn na <a>, <button> aj <input> */
a.btn,
button.btn,
input.btn,
.btn {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------
   Košík/checkout – aktívny krok jemne zvýrazniť
   Pozn.: Shoptet má viac variantov tried, pokrývame najčastejšie.
   --------------------------------------------------------- */

.order-steps li.is-active,
.order-steps li.active,
.order-steps li.current,
.checkout-steps li.is-active,
.checkout-steps li.active,
.checkout-steps li.current,
.cart-steps li.is-active,
.cart-steps li.active,
.cart-steps li.current {
  background: rgba(237, 231, 217, 0.65) !important; /* --color-bg-highlight */
  border-radius: 999px;
}

/* Košík/checkout – názvy krokov (NÁKUPNÝ KOŠÍK / DOPRAVA & PLATBA / …) */
ol.cart-header li,
ol.cart-header li a,
ol.cart-header li span {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1E1E1E !important;
}

@media (min-width: 768px) {
  ol.cart-header li,
  ol.cart-header li a,
  ol.cart-header li span {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 767px) {
  ol.cart-header li,
  ol.cart-header li a,
  ol.cart-header li span {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}

/* Košík/checkout – boxové nadpisy (napr. "ZVOĽTE SPÔSOB DOPRAVY") */
body .cart-content h4.order-icon,
body .cart-content .co-box > h4,
body .cart-content .box > h4,
body .cart-content #summary-box > h4,
body .cart-content .order-summary > h4,
body .cart-content .order-summary h4 {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1E1E1E !important;
}

/* Košík/checkout – názvy dopravy a platby (OSOBNÝ ODBER, PACKETA, …) */
body .cart-inner .shipping-billing-name {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1E1E1E !important;
}

/* Košík/checkout – ceny dopravy/platby v zozname (napr. "ZADARMO", "€3,50") */
body .cart-inner strong.payment-shipping-price,
body .cart-inner .payment-shipping-price {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1E1E1E !important;
}

/* Košík/checkout sidebar – “Celkom za tovar:” (len label) */
body .cart-inner #summary-box .order-summary-item strong {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #1E1E1E !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Košík/checkout sidebar – 1 riadok: label + suma (nezalamovať) */
body .cart-inner #summary-box .order-summary-item.helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;
}

body .cart-inner #summary-box .order-summary-item.helper > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .cart-inner #summary-box .order-summary-item.helper > div:last-child,
body .cart-inner #summary-box [data-testid="recapItemTotalPrice"] {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: 'Pacifico', cursive !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  color: #1E1E1E !important;
}

/* Košík/checkout sidebar – finálna suma (Celkom k úhrade) */
body .cart-inner #summary-box [data-testid="recapFullPrice"],
body .cart-inner #summary-box .price-primary,
body .cart-inner #summary-box .price-primary span {
  font-family: 'Pacifico', cursive !important;
  font-weight: 300 !important;
  color: #1E1E1E !important;
  white-space: nowrap;
}

/* Košík/checkout sidebar – label pri finálnej sume ("Celkom k úhrade") */
body .cart-inner #summary-box .price-label.price-primary {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1E1E1E !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

@media (min-width: 768px) {
  body .cart-inner #summary-box [data-testid="recapFullPrice"],
  body .cart-inner #summary-box .price-primary,
  body .cart-inner #summary-box .price-primary span {
    font-size: 36px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 767px) {
  body .cart-inner #summary-box [data-testid="recapFullPrice"],
  body .cart-inner #summary-box .price-primary,
  body .cart-inner #summary-box .price-primary span {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }
}

/* Shoptet niekedy pridáva inline štýly s !important – poistka */
footer #signature[style] {
  display: none !important;
}

/* ---------------------------------------------------------
   Header – hlavná navigácia (top level menu)
   Cieľ: Sekundárny font aj v menu (Patrick Hand SC), čierna farba,
   a konzistentná veľkosť ako ostatné texty.
   --------------------------------------------------------- */

header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"] {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Desktop: zjednotiť vertikálne odsadenie menu, aby sa text “neodrezával” */
@media (min-width: 768px) {
  header#header nav#navigation {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Pri niektorých šablónach má .navigation-in.menu extrémnu šírku – vynútime limit */
  header#header nav#navigation .navigation-in.menu,
  header#header nav#navigation div.navigation-in.menu,
  header#header nav#navigation .navigation-in,
  header#header nav#navigation .menu {
    display: flex;
    align-items: center;
    min-height: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  header#header nav#navigation ul.menu-level-1 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
  }

  header#header nav#navigation ul.menu-level-1 > li {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: auto !important;
  }

  header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"] {
    height: auto !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Jemne zmenšiť tracking na desktope, aby sa zmestili všetky položky (napr. Kontakt) */
  header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"] {
    letter-spacing: 1px !important;
    font-size: 17px !important;
  }
}

header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:hover,
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:focus,
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:active {
  color: #000 !important;
}

/* Aktívna/otvorená položka (po kliknutí alebo na aktuálnej stránke) */
header#header nav#navigation .menu-level-1 > li.active > a[data-testid="headerMenuItem"],
header#header nav#navigation .menu-level-1 > li.is-active > a[data-testid="headerMenuItem"],
header#header nav#navigation .menu-level-1 > li.selected > a[data-testid="headerMenuItem"],
header#header nav#navigation .menu-level-1 > li.current > a[data-testid="headerMenuItem"],
header#header nav#navigation .menu-level-1 > li.exp > a[data-testid="headerMenuItem"],
header#header nav#navigation .menu-level-1 > li.ext.exp > a[data-testid="headerMenuItem"],
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"][aria-expanded="true"] {
  color: #000 !important;
}

/* Niektoré šablóny balia text do <b>/<span> – držíme konzistentný štýl */
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"] b,
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"] span {
  font: inherit !important;
  color: inherit !important;
}

header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:hover b,
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:hover span,
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:focus b,
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:focus span,
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:active b,
header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:active span {
  color: inherit !important;
}

/* Megamenu / dropdown – položky + nadpisy (2. úroveň a vyššie) */
header#header nav#navigation .menu-level-2 a,
header#header nav#navigation .menu-level-2 span,
header#header nav#navigation .menu-level-3 a,
header#header nav#navigation .menu-level-3 span {
  font-family: 'Patrick Hand SC', cursive !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* Header – logo zväčšiť o 20 % */
header#header .site-name-wrapper .site-name a > img,
header#header .site-name-wrapper .site-name > a > img,
header#header .site-name a > img {
  transform: scale(1.2);
  transform-origin: left center;
  display: block;
}

/* ---------------------------------------------------------
   Header – vyhľadávanie (brand “pill” štýl)
   Cieľ: podobné ako na screenshote – jemné pozadie, čistý input,
   “chip” tlačidlo vpravo.

   Dôležité: Chrome/Chromium pri <fieldset> vytvára anonymný vnútorný box,
   takže flex/grid na samotnom fieldset často NE centrovanie ignoruje — vyzerá to,
   ako keby boli prvky na začiatku cross-osy (tlačidlo „prilepené“ hore).
   Riešenie: vizuálny „pill“ + flex kontajner je <form>; fieldset má display:contents,
   takže priamy potomkovia sú priamo vo flex riadku formulára.

   Štruktúra Shoptetu (fieldset): meta(schema), hidden language, search input, button.
   --------------------------------------------------------- */

header#header form#formSearchForm {
  position: relative;
  box-sizing: border-box;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(212, 196, 168, 0.75); /* piesok */
  background: rgba(232, 213, 196, 0.35); /* jemná “blush” */
  box-shadow: 0 6px 18px rgba(30, 30, 30, 0.05);
}

header#header form#formSearchForm fieldset {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
}

header#header form#formSearchForm fieldset::before {
  content: none !important;
}

header#header form#formSearchForm fieldset meta[itemprop],
header#header form#formSearchForm input[type="hidden"] {
  display: none !important;
}

/* Input */
header#header form#formSearchForm input[type="search"].query-input,
header#header form#formSearchForm input[type="search"][data-testid="searchInput"],
header#header form#formSearchForm .search-input {
  position: static !important;
  flex: 1 1 auto !important;
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  height: auto !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  color: #1E1E1E !important;
}

header#header form#formSearchForm input[type="search"]::placeholder {
  color: rgba(30, 30, 30, 0.62);
}

/* Tlačidlo
   Shoptet má button v search-form default position:absolute (top:0; right:0) — tým je
   prilepené v pravom hornom rohu pillu a flex/align-items na rodičovi ho ignoruje.
   Resetujeme position + okraje a necháme flex-box centrovať. */
header#header form#formSearchForm button[type="submit"][data-testid="searchBtn"],
header#header form#formSearchForm button.btn.btn-default,
header#header form#formSearchForm button,
header#header form#formSearchForm input[type="submit"],
header#header form#formSearchForm .btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  min-height: 36px !important;
  line-height: 1 !important;
  background: rgba(232, 213, 196, 0.85) !important; /* jemná ružovo-piesková */
  color: #1E1E1E !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  cursor: pointer;
}

header#header form#formSearchForm button:hover,
header#header form#formSearchForm input[type="submit"]:hover,
header#header form#formSearchForm .btn:hover {
  background: rgba(212, 196, 168, 0.95) !important;
}

/* Focus ring (prístupnosť) */
header#header form#formSearchForm:focus-within {
  border-color: rgba(58, 107, 124, 0.65);
  box-shadow: 0 0 0 3px rgba(91, 139, 160, 0.22), 0 6px 18px rgba(30, 30, 30, 0.05);
}

/* ---------------------------------------------------------
   8) Katalóg / výpis produktov v kategórii (#products)
      Cieľ: rovnaké karty ako na homepage:
      - odstrániť pôvodné orámovanie/separátory
      - medzera medzi kartami cca 2rem
      - jemný tieň + výraznejší hover
      - vnútorný padding 1rem (aby obsah nebol nalepený)
   --------------------------------------------------------- */

/* Pozn.: Katalóg používa rovnaké karty ako homepage – pravidlá sú vyššie spojené. */

/* ---------------------------------------------------------
   9) Kategória – hlavný nadpis (H1)
      Cieľ: Pacifico pre názov kategórie (napr. "Hračky")
   --------------------------------------------------------- */

h1.category-title,
h1.category-title[data-testid="titleCategory"] {
  font-family: 'Pacifico', cursive !important;
  font-weight: 600 !important;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  h1.category-title,
  h1.category-title[data-testid="titleCategory"] {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }
}

/* Skryť "Strana N" prívesok v H1 kategórie (pri stránkovaní) */
h1.category-title .pagination-appendix {
  display: none !important;
}

/* ---------------------------------------------------------
   9c) Mobilná navigácia (off-canvas drawer)
       Cieľ: rovnaké tmavé pozadie ako desktopové menu
       (medvedík čierny #1E1E1E), biely text, viditeľný X,
       jemný hover/aktívny stav v akcentovej farbe.
   --------------------------------------------------------- */

@media (max-width: 991px) {
  /* Drawer panel ako celok – hrdzavé akcentové pozadie */
  header#header nav#navigation,
  header#header nav#navigation .navigation-in,
  header#header nav#navigation .navigation-in.menu,
  header#header nav#navigation .menu {
    background-color: #C17B4A !important;
  }

  /* Položky 1. úrovne – biele na hrdzavom */
  header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"],
  header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"] b,
  header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"] span {
    color: #fff !important;
  }

  /* Hover / focus / aktívna položka – tmavá farba pre dobrý kontrast na hrdzavom */
  header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:hover,
  header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:focus,
  header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"]:active,
  header#header nav#navigation .menu-level-1 > li.active > a[data-testid="headerMenuItem"],
  header#header nav#navigation .menu-level-1 > li.is-active > a[data-testid="headerMenuItem"],
  header#header nav#navigation .menu-level-1 > li.selected > a[data-testid="headerMenuItem"],
  header#header nav#navigation .menu-level-1 > li.current > a[data-testid="headerMenuItem"],
  header#header nav#navigation .menu-level-1 > li.exp > a[data-testid="headerMenuItem"],
  header#header nav#navigation .menu-level-1 > li.ext.exp > a[data-testid="headerMenuItem"],
  header#header nav#navigation .menu-level-1 > li > a[data-testid="headerMenuItem"][aria-expanded="true"] {
    color: #1E1E1E !important; /* medvedík čierny */
    background-color: rgba(255, 255, 255, 0.18) !important;
  }

  /* Oddeľovače medzi položkami – jemná svetlá linka */
  header#header nav#navigation .menu-level-1 > li,
  header#header nav#navigation .menu-level-2 > li,
  header#header nav#navigation .menu-level-3 > li {
    border-color: rgba(255, 255, 255, 0.18) !important;
  }

  /* Submenu (2. a 3. úroveň) – tmavšia hrdzavá pre vizuálne odlíšenie */
  header#header nav#navigation .menu-level-2,
  header#header nav#navigation .menu-level-3 {
    background-color: #A76035 !important; /* tmavšia hrdzavá */
  }

  header#header nav#navigation .menu-level-2 a,
  header#header nav#navigation .menu-level-2 span,
  header#header nav#navigation .menu-level-3 a,
  header#header nav#navigation .menu-level-3 span {
    color: #fff !important;
  }

  header#header nav#navigation .menu-level-2 a:hover,
  header#header nav#navigation .menu-level-2 a:focus,
  header#header nav#navigation .menu-level-3 a:hover,
  header#header nav#navigation .menu-level-3 a:focus {
    color: #1E1E1E !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
  }

  /* Šípka rozbalenia podmenu */
  header#header nav#navigation .submenu-arrow,
  header#header nav#navigation .submenu-arrow::before,
  header#header nav#navigation .submenu-arrow::after {
    color: #fff !important;
    border-color: #fff !important;
  }

  /* Tlačidlo zatvorenia mobilnej navigácie (X) – biele */
  header#header nav#navigation .navigation-close,
  header#header nav#navigation .navigation-close::before,
  header#header nav#navigation .navigation-close::after {
    color: #fff !important;
  }

  /* Ak je X realizovaný cez SVG/ikonu pomocou pseudo-elementu s background-image,
     zafarbíme aj cez filter, aby sa určite zobrazil bielou. */
  header#header nav#navigation .navigation-close svg,
  header#header nav#navigation .navigation-close img {
    filter: brightness(0) invert(1) !important;
  }
}

/* ---------------------------------------------------------
   9d) Článok / stránka – hlavný nadpis (H1)
       Cieľ: rovnaký štýl ako ostatné H1 (Pacifico, čierna)
   --------------------------------------------------------- */

body .pageArticleDetail > header > h1 {
  font-family: 'Pacifico', cursive !important;
  font-weight: 300 !important;
  color: #1E1E1E !important;
  line-height: 1.15 !important;
  margin: 0 0 14px 0;
  text-align: center;
}

@media (min-width: 768px) {
  body .pageArticleDetail > header > h1 {
    font-size: 36px !important;
  }
}

@media (max-width: 767px) {
  body .pageArticleDetail > header > h1 {
    font-size: 28px !important;
  }
}

/* Článok – nadpisy v obsahu (H3) */
body .pageArticleDetail h3 {
  font-family: 'Pacifico', cursive !important;
  font-weight: 300 !important;
  color: #1E1E1E !important;
  line-height: 1.15 !important;
}

/* Článok – malé uppercase nadpisy (napr. "NAPÍŠ EMAIL") */
body .pageArticleDetail div[style*="text-transform: uppercase"][style*="letter-spacing"] {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1E1E1E !important;
  font-size: 18px !important;
  padding: 16px 20px !important;
}

/* ---------------------------------------------------------
   9b) Kategória – H2 nadpisy v zozname produktov (napr. "Najpredávanejšie")
       Cieľ: Sekundárny font Patrick Hand SC
   --------------------------------------------------------- */

h2#productsTopHeading.products-top-header {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1E1E1E;
}

/* ---------------------------------------------------------
   9c) Sidebar – nadpisy boxov (napr. "KATEGÓRIE", "PRIJÍMAME ONLINE PLATBY")
       Cieľ: Sekundárny font Patrick Hand SC + menšia veľkosť
   --------------------------------------------------------- */

aside.sidebar .pageElement__heading > span,
aside.sidebar-left .pageElement__heading > span,
aside.sidebar-right .pageElement__heading > span {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px !important;
  color: #1E1E1E;
}

/* ---------------------------------------------------------
   9e) Sidebar – kategórie: vizuálne oddeliť úrovne
       Cieľ:
       - 1. úroveň (hlavné kategórie): jemné hnedé pozadie, “pill” blok
       - nižšie úrovne: svetlejší odtieň + odsadenie
   --------------------------------------------------------- */

/* Základ: linky v kategóriách nech sú blokové */
aside #categories a {
  display: block;
  position: relative;
  border-radius: 8px;
  padding: 6px 10px 6px 42px; /* stabilné miesto pre +/- vľavo */
  margin: 1px 0;
  text-decoration: none;
}

/* +/- spínač (cat-trigger) – nech sa neprekrýva s textom */
aside #categories a > .cat-trigger {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  float: none !important;
  pointer-events: none; /* klik ostáva na linku */
}

/* 1. úroveň (topic) */
aside #categories .topic > a {
  background: rgba(212, 196, 168, 0.65); /* piesok */
  color: #1E1E1E !important;
  font-weight: 700;
}

/* 1. úroveň – aktívna/otvorená */
aside #categories .topic.active > a,
aside #categories .topic.is-active > a {
  background: rgba(193, 123, 74, 0.28); /* jemná hrdzavá */
}

/* 2. úroveň a nižšie */
aside #categories ul li > a {
  background: rgba(237, 231, 217, 0.85); /* bg-highlight */
  color: #1E1E1E !important;
  font-weight: 600;
  padding-left: 46px; /* mierne viac odsadené než 1. úroveň */
  border-left: 0;
}

/* 3. úroveň a nižšie – ešte jemnejšie odsadenie */
aside #categories ul ul li > a {
  padding-left: 54px;
  background: rgba(250, 248, 243, 0.9); /* bg */
}

/* Hover */
aside #categories a:hover,
aside #categories a:focus {
  background: rgba(91, 139, 160, 0.22); /* jemný blue hover */
  color: #1E1E1E !important;
}

/* ---------------------------------------------------------
   12) Footer bannery – nadpisy (rovnako ako sekundárne nadpisy)
       Cieľ: Patrick Hand SC + uppercase + letter-spacing
   --------------------------------------------------------- */

.pm-footer-box__title {
  font-family: 'Patrick Hand SC', cursive !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 18px;
  color: #1E1E1E;
  margin: 0 0 10px 0;
}

.pm-footer-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pm-footer-box__list li {
  margin: 6px 0;
}

.pm-footer-box__list a {
  color: #555;
  text-decoration: none;
}

.pm-footer-box__list a:hover {
  color: #1E1E1E;
  text-decoration: underline;
}

/* ---------------------------------------------------------
   13) Homepage intro + hodnoty (pattern pozadie)
   Použitie: HTML blok s triedami .pm-home-intro / .pm-values
   --------------------------------------------------------- */

.pm-home-intro {
  background-color: #FAF8F3;
  padding: 34px 0;
}

.pm-home-intro__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

.pm-home-intro__inner::after {
  display: none !important; /* zrušiť veľký dekor – prekrýval obsah */
}

.pm-home-intro__lead {
  max-width: 720px;
  margin: 0 auto 22px auto;
  text-align: center;
  font-family: "Open Sans", Arial, sans-serif;
  color: #555;
  font-size: 15px;
  line-height: 1.7;
}

/* Homepage intro – hlavný nadpis (H2) */
body.in-index .pm-home-intro .pm-home-intro__title {
  max-width: 900px;
  margin: 0 auto 10px auto;
  text-align: center;
  font-family: 'Pacifico', cursive !important;
  font-weight: 300 !important;
  color: #1E1E1E !important;
  line-height: 1.15 !important;
  display: block;
}

@media (min-width: 768px) {
  body.in-index .pm-home-intro .pm-home-intro__title {
    font-size: 36px !important;
  }
}

@media (max-width: 767px) {
  body.in-index .pm-home-intro .pm-home-intro__title {
    font-size: 28px !important;
  }
}

.pm-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pm-value-card {
  background: rgba(245, 240, 232, 0.92);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(30, 30, 30, 0.06);
  border: 1px solid rgba(212, 196, 168, 0.55);
}

.pm-value-card--blue {
  border-top: 4px solid #5B8BA0;
}

.pm-value-card--rust {
  border-top: 4px solid #C17B4A;
}

.pm-value-card__title {
  font-family: "Patrick Hand SC", cursive;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1E1E1E;
  font-size: 14px;
  margin-bottom: 8px;
}

.pm-value-card__text {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 13.5px;
  color: #666;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .pm-values {
    grid-template-columns: 1fr;
  }

  .pm-home-intro__inner::after {
    opacity: 0.12;
    width: 240px;
    height: 170px;
  }
}

/* ---------------------------------------------------------
   10) Tlačidlo „DETAIL“ v produktových kartách (vypredané/neskladom)
       Cieľ: Menej výrazná farba (brand), bez zásahu do „Do košíka“.
       Scope: katalóg (#products) + homepage skupiny (#products-2, #products-5)
   --------------------------------------------------------- */

/* Katalóg */
#products.products .product a.btn.btn-primary:not(.btn-cart):not(.btn-conversion):not(.add-to-cart-button) {
  background: #EDE7D9 !important; /* design-system: --color-bg-highlight */
  color: #3A6B7C !important;      /* design-system: --color-heading */
  border: 1px solid #D4C4A8 !important; /* design-system: --color-border */
  box-shadow: none !important;
  border-radius: 10px !important;
}

#products.products .product a.btn.btn-primary:not(.btn-cart):not(.btn-conversion):not(.add-to-cart-button):hover {
  background: #E8D5C4 !important; /* jemný hover */
  color: #3A6B7C !important;
}

/* Homepage */
#products-2.products .product a.btn.btn-primary:not(.btn-cart):not(.btn-conversion):not(.add-to-cart-button),
#products-5.products .product a.btn.btn-primary:not(.btn-cart):not(.btn-conversion):not(.add-to-cart-button) {
  background: #EDE7D9 !important;
  color: #3A6B7C !important;
  border: 1px solid #D4C4A8 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

#products-2.products .product a.btn.btn-primary:not(.btn-cart):not(.btn-conversion):not(.add-to-cart-button):hover,
#products-5.products .product a.btn.btn-primary:not(.btn-cart):not(.btn-conversion):not(.add-to-cart-button):hover {
  background: #E8D5C4 !important;
  color: #3A6B7C !important;
}

/* Jemné zaoblenie aj pre tlačidlo „Do košíka“ v kartách */
#products.products .product .btn.btn-cart,
#products-2.products .product .btn.btn-cart,
#products-5.products .product .btn.btn-cart {
  border-radius: 10px !important;
}

/* ---------------------------------------------------------
   10b) Ceny (homepage + katalóg + Najpredávanejšie)
       Cieľ:
       - všade rovnaký vzhľad cien v listingu
       - Pacifico, farba vždy čierna
       - desktop: 32px
   --------------------------------------------------------- */

#products.products .product .price-final strong,
#products.products .product .price-final,
#products-2.products .product .price-final strong,
#products-2.products .product .price-final,
#products-5.products .product .price-final strong,
#products-5.products .product .price-final,
#productsTop .product .price-final strong,
#productsTop .product .price-final,
#productsTop .product .offers {
  font-family: 'Pacifico', cursive !important;
  font-weight: 300 !important;
  color: #1E1E1E !important;
  line-height: 1.1 !important;
}

@media (min-width: 768px) {
  #products.products .product .price-final strong,
  #products.products .product .price-final,
  #products-2.products .product .price-final strong,
  #products-2.products .product .price-final,
  #products-5.products .product .price-final strong,
  #products-5.products .product .price-final,
  #productsTop .product .price-final strong,
  #productsTop .product .price-final,
  #productsTop .product .offers {
    font-size: 32px !important;
  }
}

@media (max-width: 767px) {
  #products.products .product .price-final strong,
  #products.products .product .price-final,
  #products-2.products .product .price-final strong,
  #products-2.products .product .price-final,
  #products-5.products .product .price-final strong,
  #products-5.products .product .price-final,
  #productsTop .product .price-final strong,
  #productsTop .product .price-final,
  #productsTop .product .offers {
    font-size: 26px !important;
  }
}

/* ---------------------------------------------------------
   11) Detail produktu – nadpis + info nad cenou
       Cieľ:
       - názov produktu (header) Pacifico, 36px na desktop
       - „Novinka / hodnotenia / značka…“ zobrazovať nad cenou
         (vizuálne cez flex order, bez zásahu do HTML)
   --------------------------------------------------------- */

/* Pozn.: Pôvodný header na detaile schovávame a nadpis vkladá JS ako .pm-detail-title.
   Staršie štýly pre .p-detail-inner-header a pôvodné order pravidlá boli odstránené. */

/* Detail produktu – poradie prvkov v pravom stĺpci
   Cieľ: nadpis (mimo p-info-wrapper), potom short description, potom cena,
   sklad, pridať do košíka a nakoniec ikonky. */

/* Zjednotiť rozostupy v pravom stĺpci detailu */
body.type-detail .p-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* 1) Short description hneď pod nadpisom */
body.type-detail .p-info-wrapper .p-short-description,
body.type-detail .p-info-wrapper [data-testid="productCardShortDescr"] {
  order: 1;
  margin: 0 !important;
}

/* 2) Cena */
body.type-detail .p-info-wrapper .p-final-price-wrapper {
  order: 2;
  margin: 0 !important;
}

/* Detail produktu – finálna cena (väčšia, čierna, Pacifico) */
body.type-detail .p-info-wrapper .p-final-price-wrapper .price-final strong,
body.type-detail .p-info-wrapper .p-final-price-wrapper .price-final {
  font-family: 'Pacifico', cursive !important;
  font-weight: 300 !important;
  color: #1E1E1E !important;
}

@media (min-width: 768px) {
  body.type-detail .p-info-wrapper .p-final-price-wrapper .price-final strong,
  body.type-detail .p-info-wrapper .p-final-price-wrapper .price-final {
    font-size: 44px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 767px) {
  body.type-detail .p-info-wrapper .p-final-price-wrapper .price-final strong,
  body.type-detail .p-info-wrapper .p-final-price-wrapper .price-final {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
}

/* 3) Dostupnosť */
body.type-detail .p-info-wrapper .availability-value {
  order: 3;
  margin: 0 !important;
}

/* 4) Pridať do košíka */
body.type-detail .p-info-wrapper .add-to-cart {
  order: 4;
  margin: 0 !important;
}

/* 5) Ikonky akcií */
body.type-detail .p-info-wrapper .social-buttons-wrapper,
body.type-detail .p-info-wrapper [data-testid="productDetailActionIcons"] {
  order: 5;
  margin-top: 0.25rem;
}

/* Ostatný popis/link „Detailné informácie“ nech ide až pod ikonky */
body.type-detail .p-info-wrapper [data-testid="productCardDescr"] {
  order: 6;
}

/* Jemnejšie rozostupy a veľkosť textu ikoniek */
body.type-detail .p-info-wrapper .link-icons .link-icon {
  font-size: 12px;
}

body.type-detail .availability-label,
body.type-detail .availability-amount {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Pozn.: Nadpis na detaile presúvame JS do .p-info-wrapper (viď shoptet-custom.js),
   takže pôvodný header schováme a nový sa vykreslí priamo v pravom stĺpci. */
body.type-detail .p-detail-inner-header {
  display: none !important;
}

/* Nový nadpis v pravom stĺpci (vložený cez JS) */
body.type-detail .p-info-wrapper .pm-detail-title {
  margin: 0 0 0.25rem 0;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-weight: 800 !important;
  color: #1E1E1E;
}

/* Detail – riadok „Novinka / hodnotenie / značka“ presunutý do p-info-wrapper */
body.type-detail .p-info-wrapper .pm-detail-info-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0.25rem !important;
}

@media (min-width: 768px) {
  body.type-detail .p-info-wrapper .pm-detail-title {
    font-size: 26px;
    line-height: 1.15;
  }
}

@media (max-width: 767px) {
  body.type-detail .p-info-wrapper .pm-detail-title {
    font-size: 22px;
    line-height: 1.2;
  }
}