/* ============================================================
   DREVKO – hlavička: dklab Obľúbené produkty (srdiečko) + mobilná
   hlavička s vyhľadávaním v druhom riadku + tenké SVG ikony
   Šablóna Shoptet Disco (body.template-13, mobile-header-version-1)
   v29 – spoločná verzia pre všetky e-shopy (sk, cz, hu, de, at, it, fr)

   História: v13 počítadlo ako pri košíku · v14 srdiečko 26px, rozostupy od 768px
   · v16 rovnomerné medzery na mobile · v17 dvojriadková mobilná hlavička
   (logo | srdiečko · košík · hamburger / vyhľadávacie pole na celú šírku)
   + SVG ikony (srdiečko, košík, hamburger, X, lupa) cez CSS mask
   · v18 vlastný placeholder vyhľadávania podľa jazyka e-shopu (Shoptet bez
   tarify Premium nedovolí zmeniť systémový text) · v19 vyšší 1. riadok (60px),
   väčšie logo (130px), pole zaoblené 8px ako tlačidlá, tmavší placeholder,
   na desktope lupa priamo vo vyhľadávacom poli · v20 ikony zjednotené:
   rovnaká farba (farba textu šablóny), ťah 2px, opticky rovnaká veľkosť
   · v21 počítadlo košíka rastie ako pilulka (10 a viac kusov sa zmestí)
   · v22 poistka proti vodorovnému posúvaniu stránky na mobile
   · v23 košík: bez vyhľadávania, rovnaká výška 1. riadka na všetkých stránkach
   (logo neskáče), bez tieňa pod hlavičkou na mobile · v24 hamburger s menu
   aj na krokoch 2 a 3 objednávky · v25 desktop: medzera medzi vyhľadávaním
   a ikonami je na skupine ikon, nie na srdiečku (stránka obľúbených, košík)
   · v26 desktop: bez svetlomodrej linky pod riadkom s menu · v27 bez linky aj nad
   ním (na objednávke ostávala ako čiara pod logom), mobil: srdiečko → košík
   dorovnané na rovnakú medzeru ako košík → hamburger · v28 linky okolo menu
   zrušené aj na mobile (2px pod hlavičkou) vrátane hornej linky panela menu
   · v29 desktop: spodná linka pod menu vrátená (oddeľuje obsah), horná ostáva
   zrušená; mobil: počítadlo obľúbených viac na srdiečku

   Nasadenie: nahrať do Súbory (/user/documents/) a do hlavičky vložiť
   <link rel="stylesheet" href="/user/documents/favourites-header-fix.css?v=29">
   Pri každej zmene súboru zvýšiť číslo verzie v odkaze.
   ============================================================ */

/* ---------- POČÍTADLO (všetky šírky) ----------
   Rovnaké ako počítadlo košíka v style.css e-shopu (18×18 px, 12px tučné,
   biely text). Doplnok má pevný kruh 17 px – pri 2 a viac čísliciach text
   pretekal, preto sa kruh mení na "pilulku". Kotvíme ju vpravo, takže rastie
   doľava ponad srdiečko a nikdy nezasiahne do košíka.
   Farba pozadia ostáva z nastavenia doplnku (počítadlo košíka má #FF0000). */
.navigation-buttons #dkLabFavHeaderIconBtn em{
  width:auto !important;
  min-width:18px !important;
  height:18px !important;
  line-height:18px !important;
  padding:0 3px !important;
  border-radius:9px !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  font-size:12px !important;
  font-weight:700 !important;
  font-style:normal !important;
  text-align:center !important;
  bottom:auto !important;
  z-index:3 !important;
}

/* ---------- POČÍTADLO KOŠÍKA (všetky šírky) ----------
   style.css e-shopu má pevný kruh 18×18 px – od 10 kusov text pretekal.
   Rovnaký princíp ako pri srdiečku: pilulka, ktorá rastie doľava ponad ikonu. */
#header .navigation-buttons a[data-target="cart"] i{
  width:auto !important;
  min-width:18px !important;
  height:18px !important;
  line-height:18px !important;
  padding:0 3px !important;
  border-radius:9px !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  font-size:12px !important;
  font-weight:700 !important;
  font-style:normal !important;
  text-align:center !important;
  bottom:auto !important;
  left:auto !important;
  z-index:3 !important;
}
@media (min-width: 768px){
  /* pôvodne left:36px v tlačidle (ikona 15–45px); pravý okraj ostáva na 54px */
  #header .navigation-buttons a[data-target="cart"] i{
    top:6px !important;
    right:calc(100% - 54px) !important;
  }
}
@media (max-width: 767px){
  /* pôvodne left:29px v 40px boxe → right:-7px, rovnako ako počítadlo srdiečka */
  #header .navigation-buttons a[data-target="cart"] i{
    top:-2px !important;
    right:-7px !important;
  }
}
@media (max-width: 340px){
  #header .navigation-buttons a[data-target="cart"] i{ right:-4px !important; }
}

/* ---------- DESKTOP + TABLET (≥ 768px) ----------
   Srdiečko medzi vyhľadávaním a košíkom, rozostupy 40 / 40px */
@media (min-width: 768px){
  .navigation-buttons #dkLabFavHeaderWrapper{
    display:inline-block !important;
    vertical-align:middle !important;
  }
  /* Disco dáva pred ikony 20px odsadenie (a od 1200px ešte 40px za vyhľadávaním),
     takže lupa bola od srdiečka 66–106px a srdiečko od košíka 37px.
     transition: doplnok animuje všetko 350ms, my len farbu. */
  /* 40px medzera za vyhľadávaním patrí skupine ikon, nie srdiečku – platí aj
     na stránkach, kde doplnok srdiečko nevkladá (obľúbené, košík, objednávka) */
  #header .navigation-buttons{
    padding-left:40px !important;
  }
  .navigation-buttons #dkLabFavHeaderIconBtn{
    margin-left:0 !important;
    margin-right:25px !important;
    position:relative !important;
    z-index:2 !important;
    transition:color .35s !important;
  }
  /* počítadlo: hore vpravo, rovnako ako počítadlo košíka (top:6px;
     1 číslica = 23–41px v 32px širokom odkaze, viac číslic rastie doľava) */
  body.template-13 .navigation-buttons #dkLabFavHeaderIconBtn em{
    top:6px !important;
    left:auto !important;
    right:-9px !important;
  }
  /* srdiečko 26px = výška ikony košíka (30×26px) */
  .navigation-buttons #dkLabFavHeaderIconBtn:before{
    font-size:26px !important;
  }
  .navigation-buttons #dkLabFavHeaderIconBtn:hover{
    color:var(--color-primary-hover) !important;
  }
  .navigation-buttons #dkLabFavHeaderIconBtn:hover:before{
    background-color:var(--color-primary-hover) !important;
  }
  /* lupa priamo vo vyhľadávacom poli (tlačidlo prekrýva pravý koniec poľa),
     pole zaoblené 8px ako tlačidlá e-shopu; srdiečko 40px od okraja poľa */
  #header .search-form{ position:relative !important; }
  #header .search-form .query-input{
    width:100% !important;
    padding-right:60px !important;
    border:1px solid #cacaca !important;
    border-radius:8px !important;
  }
  #header .search-form .search-button{
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    height:100% !important;
    width:60px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
  }
}

/* ---------- LINKY OKOLO MENU ----------
   Disco dáva riadku s menu (.header-bottom) 1px svetlomodrú linku hore aj dole
   (rgb 215,223,241). Desktop: horná (medzi vyhľadávaním a menu) zrušená,
   spodná pod menu ostáva – opticky oddeľuje obsah. Na krokoch objednávky má
   riadok nulovú výšku, preto tam rušíme aj spodnú (inak čiara pod logom).
   Mobil: riadok má nulovú výšku, obe linky tvorili 2px čiaru pod hlavičkou –
   rušíme obe aj hornú linku vysúvacieho panela menu. */
@media (min-width: 768px){
  #header .header-bottom{ border-top:0 !important; }
  body.id--16 #header .header-bottom,
  body.id--17 #header .header-bottom{ border-bottom:0 !important; }
}
@media (max-width: 767px){
  #header .header-bottom{ border-top:0 !important; border-bottom:0 !important; }
  #navigation{ border-top:0 !important; }
}

/* ---------- DESKTOP ≥ 1200px ----------
   Disco tu pridáva vyhľadávaniu padding-right:40px, čím by lupa opäť odskočila
   od srdiečka; rušíme (vyhľadávacie pole je o 40px širšie, nič iné sa nemení). */
@media (min-width: 1200px){
  #header .header-top-wrapper .search{
    padding-right:0 !important;
  }
}

/* ---------- MOBILE (≤ 767px) ----------
   Riadok 1 (60px; 80px pri 480–767px): logo vľavo | srdiečko · košík · hamburger
   Riadok 2: vyhľadávacie pole na celú šírku s lupou vnútri (48px + 2px hore + 10px dole)
   Výška hlavičky = 120px (140px pri 480–767px). Hlavička je v Discu position:fixed,
   preto rovnakú hodnotu dostáva aj odsadenie obsahu (.overall-wrapper), vysúvacie
   menu (#navigation) a našepkávač vyhľadávania (.searchWhisperer). */
@media (max-width: 767px){
  div.navigation-wrapper.header-top-wrapper{
    position:relative !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    padding-left:12px !important;
    padding-right:12px !important;
    box-sizing:border-box !important;
  }

  /* logo vľavo; flex:1 1 0 = nikdy nevytlačí ikony do ďalšieho riadku.
     Veľkosť loga určuje style.css e-shopu (100px, od 480px 170px); na extrémne
     úzkych displejoch (Galaxy Fold 280px, zväčšené písmo) sa zmenší */
  div.header-top-wrapper .site-name{
    order:1 !important;
    position:static !important;
    left:auto !important; right:auto !important;
    transform:none !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    transition:none !important;
  }
  div.header-top-wrapper .site-name a{
    display:block !important;
    max-width:100% !important;
    margin:0 !important;
    text-align:left !important;
  }
  div.header-top-wrapper .site-name a img{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 !important;
  }

  /* skupina ikon vpravo; padding 10px = riadok vysoký 60px pri 40px boxoch
     (style.css e-shopu jej dáva padding-right:10px – rušíme) */
  div.header-top-wrapper .navigation-buttons{
    order:2 !important;
    margin-left:auto !important;
    padding:10px 0 !important;
    height:60px !important;
    width:auto !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    box-sizing:border-box !important;
  }

  /* lupa v rade ikon už nie je potrebná – vyhľadávanie je trvalo zobrazené */
  div.navigation-buttons a.toggle-window[data-target="search"]{
    display:none !important;
  }

  /* všetky ikony rovnaký box 40×40 (ako košík) + vycentrovaný obsah */
  div.navigation-buttons #dkLabFavHeaderWrapper,
  div.navigation-buttons a[data-target="cart"],
  div.navigation-buttons a.toggle-window[data-target="navigation"]{
    flex:0 0 40px !important;
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  /* rovnomerné medzery podľa OBRYSOV ikon (srdiečko má v 26px boxe okraj 2px,
     hamburger 2px): srdiečko → košík 22px, košík → hamburger 21px,
     hamburger → okraj 20px; počítadlo 6px od košíka */
  div.navigation-buttons #dkLabFavHeaderWrapper{
    margin-right:5px !important;
  }
  div.navigation-buttons a[data-target="cart"]{
    margin-right:4px !important;
  }
  div.navigation-buttons #dkLabFavHeaderIconBtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    height:40px !important;
    line-height:1 !important;
    font-size:24px !important;
    margin:0 !important;
    top:0 !important;
  }
  /* glyfy: box glyfu = box ikony (Disco dáva ::before line-height 80/50px,
     ktorý presahoval a klikateľná plocha zasahovala pod hlavičku) */
  div.navigation-buttons a.toggle-window[data-target="navigation"]:before,
  div.navigation-buttons #dkLabFavHeaderIconBtn:before{
    font-size:24px !important;
    line-height:40px !important;
    height:40px !important;
    top:0 !important;
  }
  div.navigation-buttons #dkLabFavHeaderIconBtn:before{
    font-size:26px !important;
  }
  /* počítadlo: hore vpravo, viac na srdiečku (1 číslica 24–42px v 40px boxe,
     srdiečko 9–31px; viac číslic rastie doľava) – ako na desktope */
  body.template-13 div.navigation-buttons #dkLabFavHeaderIconBtn em{
    top:-2px !important;
    left:auto !important;
    right:-2px !important;
  }
  /* hamburger vždy posledný; pevná šírka => X po kliku neposunie ikony */
  div.navigation-buttons a.toggle-window[data-target="navigation"]{
    position:static !important;
    order:9 !important;
  }
  div.navigation-buttons, div.navigation-buttons > *{ transition:none !important; }

  /* ---- riadok 2: vyhľadávanie ---- */
  div.header-top-wrapper > .search{
    display:block !important;
    position:static !important;
    order:3 !important;
    flex:0 0 100% !important;
    width:100% !important;
    height:auto !important;
    padding:2px 0 10px !important;
    margin:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:auto !important;
    top:auto !important;
  }
  div.header-top-wrapper > .search .search-form{
    display:block !important;
    position:relative !important;
    width:100% !important;
    margin:0 !important;
  }
  div.header-top-wrapper > .search .search-form fieldset{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }
  /* 16px = hranica, pod ktorou iOS Safari pri ťuknutí do poľa priblíži celú stránku */
  div.header-top-wrapper > .search .query-input{
    width:100% !important;
    height:48px !important;
    border:1px solid #cacaca !important;
    border-right-style:solid !important;
    border-radius:8px !important;
    padding:0 52px 0 18px !important;
    font-size:16px !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }
  div.header-top-wrapper > .search .query-input::placeholder{ font-size:16px !important; }
  div.header-top-wrapper > .search .search-input-icon{ display:none !important; }
  /* tlačidlo hľadania = lupa vnútri poľa vpravo (ikona nižšie v sekcii IKONY) */
  div.header-top-wrapper > .search .search-button{
    display:block !important;
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    width:52px !important;
    height:48px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:8px !important;
    font-size:0 !important;
    color:transparent !important;
  }

  /* ---- odsadenia pod pevnou hlavičkou (Disco: 50px) ---- */
  .overall-wrapper{ padding-top:120px !important; }
  #navigation{ top:120px !important; }
  .navigation-in{ height:calc(100% - 110px) !important; }
  #header .searchWhisperer{
    max-height:calc(100vh - 120px) !important;
    max-height:calc(var(--vh, 1vh) * 100 - 120px) !important;
  }
  /* okno košíka po ťuknutí na ikonu košíka (Disco ho lepí na 50px/81px) */
  .user-action-in .popup-widget.cart-widget{
    top:120px !important;
    height:calc(100% - 120px) !important;
  }
  /* Disco skrýva hlavičku pri scrollovaní nadol, výnimku má len stav
     search-window-visible (lupa v rade ikon), ktorý už nenastane –
     hlavičku držíme aj počas písania do vyhľadávania */
  .scrolled-down body.search-focused:not(.ordering-process) #header{ transform:none !important; }
  .scrolled-down body:not(.ordering-process) #header:has(.query-input:focus, .searchWhisperer.active){ transform:none !important; }

  /* bez tieňa / linky pod hlavičkou (ako wilsondo.sk) */
  #header{ box-shadow:none !important; border-bottom:0 !important; }

  /* košík, krok 1 (body.id--9): bez vyhľadávania, menu ostáva; 1. riadok má
     rovnakých 60px ako inde, takže logo pri prechode do košíka a späť neskáče */
  body.id--9 div.header-top-wrapper > .search{ display:none !important; }
  body.id--9 .overall-wrapper{ padding-top:60px !important; }
  body.id--9 #navigation{ top:60px !important; }
  body.id--9 .navigation-in{ height:calc(100% - 50px) !important; }

  /* objednávka krok 2 a 3 (body.id--16 / id--17): Disco tam skrýva vyhľadávací
     formulár, rad ikon aj panel menu. Ponechávame logo + hamburger s menu
     (vyhľadávanie skryté), 1. riadok rovnakých 60px, odsadenia 60px. */
  body.id--16 div.header-top-wrapper > .search,
  body.id--17 div.header-top-wrapper > .search{ display:none !important; }
  body.id--16 div.header-top-wrapper .navigation-buttons,
  body.id--17 div.header-top-wrapper .navigation-buttons,
  body.id--16 div.navigation-buttons a.toggle-window[data-target="navigation"],
  body.id--17 div.navigation-buttons a.toggle-window[data-target="navigation"]{ display:flex !important; }
  body.id--16 .header-bottom #navigation,
  body.id--17 .header-bottom #navigation{ display:block !important; }
  body.id--16 .overall-wrapper,
  body.id--17 .overall-wrapper{ padding-top:60px !important; }
  body.id--16 #navigation,
  body.id--17 #navigation{ top:60px !important; }
  body.id--16 .navigation-in,
  body.id--17 .navigation-in{ height:calc(100% - 50px) !important; }
}

/* ---------- MOBIL NA VÝŠKU (≤ 479px): väčšie logo ----------
   style.css e-shopu dáva logu 100px; 130px = výška 31px v 60px riadku.
   Na 280px displeji sa vďaka flex:1 1 0 + max-width:100% zmenší. */
@media (max-width: 479px){
  div.header-top-wrapper .site-name a{
    width:130px !important;
  }
  div.header-top-wrapper .site-name a img{
    max-height:none !important;
  }
}

/* ---------- 480–767px (mobil na šírku, malé tablety) ----------
   Disco tu má riadok ikon 80px (.overall-wrapper 80px, #navigation 80px, logo 170px) */
@media (min-width: 480px) and (max-width: 767px){
  div.header-top-wrapper .navigation-buttons{
    padding:20px 0 !important;
    height:80px !important;
  }
  .overall-wrapper{ padding-top:140px !important; }
  #navigation{ top:140px !important; }
  .navigation-in{ height:calc(100% - 130px) !important; }
  #header .searchWhisperer{
    max-height:calc(100vh - 140px) !important;
    max-height:calc(var(--vh, 1vh) * 100 - 140px) !important;
  }
  .user-action-in .popup-widget.cart-widget{
    top:140px !important;
    height:calc(100% - 140px) !important;
  }
  body.id--9 .overall-wrapper{ padding-top:80px !important; }
  body.id--9 #navigation{ top:80px !important; }
  body.id--9 .navigation-in{ height:calc(100% - 70px) !important; }
  body.id--16 .overall-wrapper,
  body.id--17 .overall-wrapper{ padding-top:80px !important; }
  body.id--16 #navigation,
  body.id--17 #navigation{ top:80px !important; }
  body.id--16 .navigation-in,
  body.id--17 .navigation-in{ height:calc(100% - 70px) !important; }
}

/* ---------- ÚZKE MOBILY (≤ 340px, napr. iPhone SE 1. gen.) ---------- */
@media (max-width: 340px){
  div.navigation-wrapper.header-top-wrapper{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  div.header-top-wrapper .navigation-buttons{
    gap:4px !important;
  }
  /* boxy 4 / 8 / 8px → obrysy 17 / 17 / 16px */
  div.navigation-buttons #dkLabFavHeaderWrapper{
    margin-right:4px !important;
  }
  div.navigation-buttons a[data-target="cart"]{
    margin-right:4px !important;
  }
}

/* ============================================================
   IKONY (SVG cez CSS mask) – srdiečko, košík, hamburger, X, lupa
   Obrysové ikony, ťah 2px, mriežka 24px (Feather Icons, licencia MIT).
   Farba lupy, srdiečka a hamburgera = farba textu šablóny
   (--colors-foregrounds-content-primary, #1f1f1f); farba srdiečka z nastavenia
   doplnku sa tu zámerne NEpoužíva, aby boli všetky tri ikony rovnaké.
   Košík je biely na zelenom boxe. Veľkosti: srdiečko 26px, hamburger 26px
   (čiary 22px), lupa 24px, X 24px – opticky rovnako veľké.
   Zmena tvaru: prepísať SVG v url("data:image/svg+xml;utf8,...") – rovnaký
   SVG je aj v priečinku icons/ (heart.svg, cart.svg, menu.svg, close.svg,
   search.svg). Hrúbka: stroke-width='2' (napr. 1.5 tenšie, 2.5 hrubšie).
   Bez tejto sekcie ostanú pôvodné ikony (font doplnku, font Shoptetu, cart.svg
   a search.svg zo style.css).
   ============================================================ */
@supports ((-webkit-mask-repeat: no-repeat) or (mask-repeat: no-repeat)){
/* srdiečko */
.navigation-buttons #dkLabFavHeaderIconBtn:before{
  content:"" !important;
  display:inline-block !important;
  width:26px !important;
  height:26px !important;
  font-size:0 !important;
  line-height:26px !important;
  vertical-align:middle !important;
  background-color:var(--colors-foregrounds-content-primary,#1f1f1f) !important;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") center / 26px 26px no-repeat !important;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") center / 26px 26px no-repeat !important;
}
/* košík (biely obrys na zelenom boxe; nahrádza cart.svg zo style.css) */
#header .navigation-buttons a[data-target="cart"]:before{
  background:#fff !important;
  width:30px !important;
  min-width:30px !important;
  height:26px !important;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center / 26px 26px no-repeat !important;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center / 26px 26px no-repeat !important;
}
/* lupa v tlačidle vyhľadávania (nahrádza search.svg zo style.css).
   Maska je na ::before, nie na tlačidle – tlačidlo si tak zachová
   zvýraznenie pri ovládaní klávesnicou (focus). */
#header .search-form .search-button{
  position:absolute !important;
  background:transparent !important;
  -webkit-mask:none !important;
          mask:none !important;
}
#header .search-form .search-button::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background-color:var(--colors-foregrounds-content-primary,#1f1f1f) !important;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>") center / 24px 24px no-repeat !important;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>") center / 24px 24px no-repeat !important;
}
@media (max-width: 767px){
  /* hamburger */
  div.navigation-buttons a.toggle-window[data-target="navigation"]:before{
    content:"" !important;
    display:block !important;
    width:26px !important;
    height:26px !important;
    line-height:26px !important;
    font-size:0 !important;
    background-color:var(--colors-foregrounds-content-primary,#1f1f1f) !important;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6h20M2 12h20M2 18h20'/></svg>") center / 26px 26px no-repeat !important;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6h20M2 12h20M2 18h20'/></svg>") center / 26px 26px no-repeat !important;
  }
  /* X pri otvorenom menu */
  body.navigation-window-visible div.navigation-buttons a.toggle-window[data-target="navigation"]:before{
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>") center / 24px 24px no-repeat !important;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>") center / 24px 24px no-repeat !important;
  }
  /* srdiečko na mobile: box glyfu = box ikony */
  div.navigation-buttons #dkLabFavHeaderIconBtn:before{
    display:block !important;
    height:40px !important;
    line-height:40px !important;
  }
}
} /* koniec @supports */

/* Windows – režim vysokého kontrastu: systém prepíše farby pozadia,
   maskované ikony by zmizli; necháme im farbu textu/odkazu. */
@media (forced-colors: active){
  .navigation-buttons #dkLabFavHeaderIconBtn:before,
  #header .navigation-buttons a[data-target="cart"]:before,
  div.navigation-buttons a.toggle-window[data-target="navigation"]:before{
    forced-color-adjust:none;
    background-color:currentColor !important;
  }
  #header .search-form .search-button::before{
    forced-color-adjust:none;
    background-color:FieldText !important;
  }
}

/* ============================================================
   PLACEHOLDER VYHĽADÁVANIA podľa jazyka e-shopu
   Systémový text (napr. „Terme de recherche“) sa bez tarify Premium nedá
   zmeniť, preto ho skryjeme (priehľadný) a cez ::before formulára zobrazíme
   vlastný text. Zobrazuje sa len kým je pole prázdne (:placeholder-shown).
   Prehliadače bez podpory :has() (pred 2023) ostanú pri pôvodnom texte.
   Jazyk sa berie z <html lang="…">: fr, it, de (aj at), hu, cs, sk.
   ============================================================ */
@supports selector(:has(a)){
  html:is(:lang(fr),:lang(it),:lang(de),:lang(hu),:lang(cs),:lang(sk)) #header .search-form .query-input::placeholder{
    color:transparent !important;
  }
  #header .search-form:has(.query-input:placeholder-shown)::before{
    position:absolute !important;
    left:20px !important;
    top:0 !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    pointer-events:none !important;
    color:#555 !important;
    font-size:16px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    max-width:calc(100% - 92px) !important;
    z-index:1 !important;
  }
  html:lang(fr) #header .search-form:has(.query-input:placeholder-shown)::before{ content:"Que recherchez-vous ?"; }
  html:lang(it) #header .search-form:has(.query-input:placeholder-shown)::before{ content:"Cosa stai cercando?"; }
  html:lang(de) #header .search-form:has(.query-input:placeholder-shown)::before{ content:"Wonach suchen Sie?"; }
  html:lang(hu) #header .search-form:has(.query-input:placeholder-shown)::before{ content:"Mit keres?"; }
  html:lang(cs) #header .search-form:has(.query-input:placeholder-shown)::before{ content:"Napište, co hledáte"; }
  html:lang(sk) #header .search-form:has(.query-input:placeholder-shown)::before{ content:"Napíšte, čo hľadáte"; }
  @media (max-width: 767px){
    #header .search-form:has(.query-input:placeholder-shown)::before{ left:18px !important; max-width:calc(100% - 76px) !important; }
  }
}

/* ============================================================
   POISTKA: žiadne vodorovné posúvanie stránky na mobile
   Na detaile produktu sú galéria a posuvník súvisiacich produktov širšie
   než displej (orezáva ich overflow:hidden). Na niektorých verziách iOS Safari
   orezanie zlyhá a stránka sa dá ťahať do strany, pričom pevná hlavička
   „pokračuje“ doprava. overflow-x:clip zakáže vodorovné pretečenie na úrovni
   stránky a na rozdiel od overflow:hidden nepokazí position:sticky.
   ============================================================ */
@supports (overflow-x: clip){
  @media (max-width: 767px){
    html, body{ overflow-x:clip !important; }
  }
}