/* =================================================
   HOMEFIELD SIGNATURE – FINAL (Tango) – ONE CLEAN CODE
   ================================================= */

:root{
  --hf-indigo:#243C5A;
  --hf-gold:#C69B34;
  --hf-black:#0B0B0B;
  --hf-white:#ffffff;
  --hf-sand:#EDE3D2;
}

/* 1) Stop horizontálnímu přetečení + tmavé pozadí */
html,body{
  margin:0 !important;
  padding:0 !important;
  background:var(--hf-white) !important;
  overflow-x:hidden !important;
}
.overall-wrapper,#content-wrapper,#content,#footer,#header{
  max-width:100% !important;
  overflow-x:hidden !important;
}

/* 2) HEADER – Indigo (Tango wrappery) */
#header,
#header .container.navigation-wrapper,
#header .container.navigation-wrapper:before,
#header .top-nav,
#header .header-top{
  background:var(--hf-indigo) !important;
  color:var(--hf-white) !important;
}

/* 3) Ikony + odkazy v headeru (včetně SVG) */
#header a,
#header button{
  color:var(--hf-white) !important;
}
#header a:hover,
#header button:hover{
  color:var(--hf-gold) !important;
}
#header a svg,
#header a svg *,
#header button svg,
#header button svg *{
  fill:currentColor !important;
  stroke:currentColor !important;
}

/* 4) Telefon pryč (tvůj DOM: .contact-wrap a.project-phone) */
#header .contact-wrap,
#header a.project-phone,
#header a[href^="tel:"]{
  display:none !important;
}

/* 5) Košík – schovat text "Prázdný košík" (nechat ikonu + badge/počet) */
#header a[href*="/kosik"],
#header a[href*="/cart"]{
  font-size:0 !important;         /* zabije text vedle ikony */
}
#header a[href*="/kosik"] .count,
#header a[href*="/cart"] .count,
#header a[href*="/kosik"] .badge,
#header a[href*="/cart"] .badge,
#header a[href*="/kosik"] .cart-count,
#header a[href*="/cart"] .cart-count{
  font-size:12px !important;      /* vrátí velikost badge */
}
/* =========================================================
   4.1) BREADCRUMBS OFF (globálně)
   ========================================================= */
.breadcrumbs,
.breadcrumbs.navigation-home-icon-wrapper,
.navigation-home-icon-wrapper.breadcrumbs,
div[itemtype*="BreadcrumbList"]{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}


/* =================================================
   6) MENU – podle tvého DOM: nav#navigation.visible > .navigation-in.menu > ul.menu-level-1
   ================================================= */

/* Bílý box + zlatý okraj */
#header nav#navigation{
  background:var(--hf-white) !important;
  border:1px solid rgba(198,155,52,.35) !important;
  border-radius:6px !important;
  overflow:visible !important;
  max-height:none !important;
}

/* Zrušit jakýkoliv "collapsible/scroll" režim */
#header nav#navigation,
#header nav#navigation *{
  max-height:none !important;
  overflow:visible !important;
}

/* UL do řádku, vycentrovat a definovat výšku */
#header nav#navigation .navigation-in.menu{
  display:flex !important;
  justify-content:center !important;
}
#header nav#navigation ul.menu-level-1{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:46px !important;
  margin:0 !important;
  padding:0 12px !important;
  list-style:none !important;
  gap:24px !important;
}

/* LI + A: vertikální střed 100% spolehlivě */
#header nav#navigation ul.menu-level-1 > li{
  display:flex !important;
  align-items:center !important;
  height:100% !important;
}
#header nav#navigation ul.menu-level-1 > li > a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  line-height:46px !important;

  padding:0 16px !important;

  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;

  color:var(--hf-indigo) !important;
  text-decoration:none !important;
}
#header nav#navigation ul.menu-level-1 > li > a:hover{
  color:var(--hf-gold) !important;
}

/* Mobil: menu bez radius na krajích */
@media (max-width:768px){
  #header nav#navigation{
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }
}

/* 7) Texty webu na černém pozadí */
body,p,li,td,th{ color:rgba(255,255,255,.92) !important; }
h1,h2,h3,h4,h5,h6{ color:#fff !important; }.description,.perex,.content-inner small,.product-detail-description{ color:var(--hf-sand) !important; }
a{ color:var(--hf-white); transition:color .2s ease; }
a:hover{ color:var(--hf-gold); }
/* =========================
   HF HOTFIX (Tango) – DESKTOP: zobraz menu, schovej trigger + košík text
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================= */

/* 1) DESKTOP: schovat hamburger/trigger v menu liště (to kolečko) */
@media (min-width: 1025px){
  #header .menu-helper,
  #header .navigation-trigger,
  #header .navigation-close,
  #header [data-testid="hamburgerMenu"],
  #header .navigation-in.menu > button,
  #header nav#navigation button,
  #header nav#navigation .btn,
  #header nav#navigation .toggle,
  #header nav#navigation .hamburger,
  #header nav#navigation .icon-menu{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* 2) DESKTOP: vynutit, aby se skutečné menu položky zobrazily */
  #header nav#navigation,
  #header nav#navigation .navigation-in.menu{
    display:block !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #header nav#navigation ul.menu-level-1{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* 3) Košík: schovat text „Prázdný košík“ (ponechat jen ikonu + badge) */
#header a[href*="kosik"],
#header a[href*="cart"]{
  font-size:0 !important;            /* zneviditelní text vedle ikony */
}

/* vrátit velikost badge/počtu */
#header a[href*="kosik"] .count,
#header a[href*="cart"] .count,
#header a[href*="kosik"] .badge,
#header a[href*="cart"] .badge,
#header a[href*="kosik"] .cart-count,
#header a[href*="cart"] .cart-count{
  font-size:12px !important;
}
/* =========================
   HF HOTFIX 2 – STOP ROLETA V MENU + SCHOVAT "PRÁZDNÝ KOŠÍK"
   (vlož ÚPLNĚ NA KONEC CSS)
   ========================= */

/* 1) MENU: zrušit vnitřní scroll/roletu způsobenou collapsible */
@media (min-width: 1025px){

  #header nav#navigation.visible,
  #header nav#navigation.visible .navigation-in.menu,
  #header nav#navigation.visible ul.menu-level-1{
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* výšku řešit přes min-height (ne pevný height), aby se netvořil scrollbar */
  #header nav#navigation.visible ul.menu-level-1{
    min-height: 48px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    list-style: none !important;
    flex-wrap: nowrap !important;
  }

  #header nav#navigation.visible ul.menu-level-1 > li{ height: 48px !important; display:flex !important; align-items:center !important; }
  #header nav#navigation.visible ul.menu-level-1 > li > a{ line-height: 48px !important; }
}

/* 2) KOŠÍK: schovat text "Prázdný košík" (bez ohledu na URL) */
#header a[href*="kosik"],
#header a[href*="cart"],
#header a[href*="basket"],
#header a[class*="cart"],
#header a[id*="cart"]{
  font-size: 0 !important; /* zabije text vedle ikony */
}

/* vrátit velikost pro badge/počet */
#header a[href*="kosik"] .count,
#header a[href*="cart"] .count,
#header a[href*="basket"] .count,
#header a[class*="cart"] .count,
#header a[id*="cart"] .count,
#header a[href*="kosik"] .badge,
#header a[href*="cart"] .badge,
#header a[href*="basket"] .badge,
#header a[class*="cart"] .badge,
#header a[id*="cart"] .badge,
#header a[href*="kosik"] .cart-count,
#header a[href*="cart"] .cart-count,
#header a[href*="basket"] .cart-count,
#header a[class*="cart"] .cart-count,
#header a[id*="cart"] .cart-count{
  font-size: 12px !important;
}
/* =========================================
   HOMEFIELD SIGNATURE – FINAL HEADER/MENU (Tango / template-09)
   (podle tvého HTML výpisu)
   ========================================= */

:root{
  --hf-indigo:#243C5A;
  --hf-gold:#C69B34;
  --hf-black:#0B0B0B;
  --hf-white:#fff;
  --hf-sand:#EDE3D2;
}

/* background + stop X overflow */
html,body{margin:0!important;padding:0!important;background:var(--hf-white)!important;overflow-x:hidden!important;}
.overall-wrapper,#content-wrapper,#content,#footer,#header{max-width:100%!important;overflow-x:hidden!important;}

/* HEADER indigo */
#header,
#header .container.navigation-wrapper,
#header .top-nav{
  background:var(--hf-indigo)!important;
  color:var(--hf-white)!important;
}

/* Ikony v top-nav bílé (SVG přes currentColor) */
#header .top-nav a,
#header .top-nav button{color:var(--hf-white)!important;}
#header .top-nav a:hover,
#header .top-nav button:hover{color:var(--hf-gold)!important;}
#header .top-nav svg,
#header .top-nav svg *{
  fill:currentColor!important;
  stroke:currentColor!important;
}

/* Telefon pryč (přesně podle HTML: a.project-phone[data-testid=contactboxPhone]) */
#header a.project-phone[data-testid="contactboxPhone"]{display:none!important;}

/* Prázdný košík pryč (přesně podle HTML: span.cart-price) */
#header a[data-testid="headerCart"] .cart-price{display:none!important;}

/* =========================
   MENU box (nav#navigation)
   ========================= */
#header nav#navigation.visible{
  background:var(--hf-white)!important;
  border:1px solid rgba(198,155,52,.35)!important;
  border-radius:6px!important;
  overflow:visible!important;
  max-height:none!important;
}

/* zrušit jakýkoli vnitřní scroll/roletu */
#header nav#navigation.visible,
#header nav#navigation.visible .navigation-in.menu,
#header nav#navigation.visible .menu-level-1{
  overflow:visible!important;
  max-height:none!important;
  height:auto!important;
}

/* položky menu – vertikálně i horizontálně na střed */
#header nav#navigation.visible .navigation-in.menu{
  display:flex!important;
  justify-content:center!important;
}

#header nav#navigation.visible ul.menu-level-1{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:24px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 12px!important;
  list-style:none!important;
}

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

#header nav#navigation.visible ul.menu-level-1 > li > a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:48px!important;
  line-height:48px!important;
  padding:0 18px!important;

  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;

  color:var(--hf-indigo)!important;
  text-decoration:none!important;
}

/* v menu máš <b>…</b> – taky přebarvit */
#header nav#navigation.visible ul.menu-level-1 > li > a b{
  color:inherit!important;
  font-weight:inherit!important;
}

#header nav#navigation.visible ul.menu-level-1 > li > a:hover{
  color:var(--hf-gold)!important;
}

/* =========================================
   DESKTOP (>=768px): vypnout mobilní menu větev
   - schovat hamburger tlačítko (a.menu-trigger)
   - schovat menu-helper.visible (ten dělá scroll/roletu)
   ========================================= */
@media (min-width:768px){
  #header a.menu-trigger[data-testid="hamburgerMenu"]{display:none!important;}
  #header .menu-helper.visible[data-testid="hamburgerMenu"]{display:none!important;}

  /* vynutit, že nav menu je vidět */
  #header nav#navigation.visible{display:block!important;}
  #header nav#navigation.visible ul.menu-level-1{display:flex!important;}
}

/* =========================================
   MOBIL (<768px): nechat hamburger + menu-helper fungovat,
   jen zjemnit box (bez radiusu na kraje)
   ========================================= */
@media (max-width:767px){
  #header nav#navigation.visible{
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }
}

/* Texty webu na tmavém pozadí */
body,p,li,td,th,h1,h2,h3,h4,h5,h6{color:var(--hf-white)!important;}
.description,.perex,.content-inner small,.product-detail-description{color:var(--hf-sand)!important;}
a{color:var(--hf-white);}
a:hover{color:var(--hf-gold);}
/* =========================================
   HF FIX – DESKTOP: vypnout collapsible panel + vnitřní scrollbar v menu (Tango / mobile-header-v1)
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================= */

@media (min-width: 768px){

  /* mobilní větev menu pryč */
  header#header .menu-helper,
  header#header .menu-helper.visible{
    display:none !important;
  }

  /* zavírací overlay pryč (umí překrývat menu) */
  header#header nav#navigation .navigation-close{
    display:none !important;
  }

  /* hlavní win: vypnout collapsible/scroll režim na desktopu */
  header#header nav#navigation,
  header#header nav#navigation.visible,
  header#header nav#navigation[data-collapsible="true"]{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-y:visible !important;
    position:relative !important;
    z-index:50 !important;
  }

  header#header nav#navigation .navigation-in.menu{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-y:visible !important;
  }

  /* vynutit zobrazení položek menu */
  header#header nav#navigation ul.menu-level-1{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* aby wrapper hlavičky nic neřezal */
  header#header .container.navigation-wrapper{
    overflow:visible !important;
  }
}

/* košík – podle tvého HTML (span.cart-price) */
header#header a[data-testid="headerCart"] .cart-price{
  display:none !important;
}
/* =========================================
   HF – FIX DESKTOP MENU (Tango / mobile header v1)
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================= */

/* 1) Desktop: zrušit "panelové" (collapsible) chování navigace = žádná bílá vrstva + žádný vnitřní scrollbar */
@media (min-width: 768px){

  header#header nav#navigation.visible[data-collapsible="true"]{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    overflow-y:visible !important;
    position:relative !important;
  }

  header#header nav#navigation.visible[data-collapsible="true"] .navigation-in.menu{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
  }

  /* 2) Desktop: zobrazit UL vodorovně a vycentrovat */
  header#header nav#navigation.visible .menu-level-1{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:28px !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    width:100% !important;
  }

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

  header#header nav#navigation.visible .menu-level-1 > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    padding:14px 0 !important;
    white-space:nowrap !important;
  }

  /* 3) Desktop: schovat duplicitu "Více" (menu-helper) + zavírací overlay */
  header#header .menu-helper.visible{
    display:none !important;
  }

  header#header nav#navigation .navigation-close{
    display:none !important;
  }
}

/* 4) Košík: podle tvého HTML (span.cart-price...) schovat "Prázdný košík" */
header#header a[data-testid="headerCart"] span.cart-price{
  display:none !important;
}
/* =========================================================
   HOMEFIELD SIGNATURE – DESKTOP FORCE MENU (Tango / mobile-header v1)
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================================= */

@media (min-width: 768px){

  /* 0) Zrušit jakékoli "panel/roleta" chování navigace */
  body.desktop header#header nav#navigation,
  body.desktop header#header nav#navigation.visible,
  body.desktop header#header nav#navigation.visible[data-collapsible="true"]{
    display:block !important;
    position:relative !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-y:visible !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    z-index:50 !important;
    background:#ffffff !important;
    border:1px solid rgba(198,155,52,.35) !important;
    border-radius:6px !important;
  }

  body.desktop header#header nav#navigation > .navigation-in,
  body.desktop header#header nav#navigation.visible > .navigation-in,
  body.desktop header#header nav#navigation.visible[data-collapsible="true"] > .navigation-in{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:56px !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 18px !important;
    margin:0 !important;
    background:transparent !important;
  }

  /* 1) Hlavní UL – jedna řada, uprostřed */
  body.desktop header#header nav#navigation ul.menu-level-1{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:28px !important;
    height:56px !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    max-height:none !important;
    overflow:visible !important;
  }

  body.desktop header#header nav#navigation ul.menu-level-1 > li{
    display:flex !important;
    align-items:center !important;
    height:56px !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* 2) Odkazy – barvy + vycentrování textu */
  body.desktop header#header nav#navigation ul.menu-level-1 > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:56px !important;
    line-height:56px !important;
    padding:0 14px !important;
    white-space:nowrap !important;
    color:#243C5A !important;           /* indigo */
    text-decoration:none !important;
    font-weight:600 !important;
  }

  body.desktop header#header nav#navigation ul.menu-level-1 > li > a:hover{
    color:#C69B34 !important;           /* gold */
  }

  /* 3) Pryč duplicita "Více" + pryč hamburger tlačítko na desktopu */
  body.desktop header#header .menu-helper,
  body.desktop header#header .menu-helper.visible{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body.desktop header#header a.menu-trigger[data-testid="hamburgerMenu"]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* 4) Pryč zavírací overlay (křížek / close) */
  body.desktop header#header nav#navigation .navigation-close{
    display:none !important;
  }

  /* 5) Košík – schovat text "Prázdný košík" (podle tvého HTML) */
  body.desktop header#header a[data-testid="headerCart"] span.cart-price{
    display:none !important;
  }
}
/* ===== FIX: nav#navigation se scukne na 1px (Tango) ===== */
@media (min-width: 768px){

  body.desktop header#header nav#navigation.visible{
    height:auto !important;
    min-height:56px !important;
    max-height:none !important;
    overflow:visible !important;
  }

  body.desktop header#header nav#navigation.visible > .navigation-in.menu{
    height:56px !important;
    min-height:56px !important;
    max-height:none !important;
    overflow:visible !important;
  }

  body.desktop header#header nav#navigation.visible > .navigation-in.menu > ul.menu-level-1{
    display:flex !important;
    height:56px !important;
    min-height:56px !important;
    max-height:none !important;
    overflow:visible !important;
  }
}
/* ===== FIX: barva textu menu ===== */
@media (min-width: 768px){

  body.desktop #navigation{
    background:#EDE3D2 !important; /* světlá lišta */
  }

  body.desktop #navigation ul.menu-level-1 > li > a{
    color:#243C5A !important; /* Indigo text */
  }

  body.desktop #navigation ul.menu-level-1 > li > a:hover{
    color:#C69B34 !important; /* Gold hover */
  }

}
/* ===== DESKTOP: vynutit viditelné menu + text ===== */
@media (min-width: 768px){

  /* samotný pruh menu */
  #header #navigation{
    display:block !important;
    position:relative !important;
    z-index:50 !important;
    height:auto !important;
    min-height:56px !important;
    overflow:visible !important;
    background:#EDE3D2 !important; /* světlá lišta */
    border-top:1px solid rgba(198,155,52,.35) !important;
    border-bottom:1px solid rgba(36,60,90,.25) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  /* vnitřek navigace */
  #header #navigation .navigation-in.menu{
    width:100% !important;
  }

  /* seznam položek */
  #header #navigation ul.menu-level-1{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:26px !important;
    margin:0 !important;
    padding:0 18px !important;
    list-style:none !important;
    white-space:nowrap !important;
  }

  #header #navigation ul.menu-level-1 > li{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* odkazy + jejich <b> */
  #header #navigation ul.menu-level-1 > li > a,
  #header #navigation ul.menu-level-1 > li > a > b{
    color:#243C5A !important;         /* Indigo text */
    font-weight:600 !important;
    font-size:14px !important;
    line-height:56px !important;       /* vertikální vycentrování */
    text-decoration:none !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #header #navigation ul.menu-level-1 > li > a:hover,
  #header #navigation ul.menu-level-1 > li > a:hover > b{
    color:#C69B34 !important;
  }
}
/* ===== MENU BAR – šířka přes pseudo-element (spolehlivé) ===== */

/* kontejner menu */
#header #navigation .navigation-in.menu{
  position: relative !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding: 0 !important;              /* padding tady ignoruj */
  background: transparent !important; /* bílé dělá pseudo-element */
}

/* bílý pruh jako "pozadí" */
#header #navigation .navigation-in.menu::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  height:100%;
  width:min(1100px, calc(100vw - 80px)) !important;  /* TADY roztahuješ */
  background:#fff;
  border-radius:6px;
  z-index:0;
}

/* text menu nad pruhem */
#header #navigation ul.menu-level-1{
  position:relative !important;
  z-index:1 !important;

  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;

  width:min(1100px, calc(100vw - 140px)) !important; /* TADY řídíš vnitřek */
  margin:0 auto !important;
  padding:0 28px !important;                        /* malý vnitřní okraj */
  gap:0 !important;                                 /* mezery řeší space-between */
}

/* linky v menu */
#header #navigation ul.menu-level-1 > li > a{
  padding:12px 10px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#header #navigation .navigation-in.menu::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  height:100%;
  width:min(1100px, calc(100vw - 80px));
  background:#fff;
  border-radius:8px;

  /* ZLATÝ LEM */
  box-shadow: 0 0 0 2px #C69B34;

  z-index:0;
}
/* HOMEPAGE: přehodí pořadí Welcome a Benefit banneru */
body.type-index main{
  display:flex;
  flex-direction:column;
}

body.type-index .welcome-wrapper{
  order:1; /* bude nahoře */
}

body.type-index .benefitBanner.position--benefitHomepage{
  order:2; /* bude pod textem */
}
.welcome-wrapper {
    text-align: center;
    padding: 40px 20px 40px 20px; /* méně nahoře */
}
.welcome-wrapper p {
    max-width: 760px;
    margin: 20px auto 0 auto;
    line-height: 1.7;
/* Přirozené napojení welcome textu na banner */
}
.benefitBanner.position--benefitHomepage + .welcome-wrapper{
  margin-top: -30px !important;
  padding-top: 0 !important;
}
/* Zlatá oddělovací linka nad výhodami */

.benefitBanner.position--benefitHomepage {
    position: relative;
    padding-top: 50px; /* místo pro linku */
}

.benefitBanner.position--benefitHomepage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px; /* délka linky */
    height: 1px;
    background: #C69B34; /* Gold */
    opacity: 0.8;
}
/* Zmenšení mezery mezi výhodami a footerem */

#footer {
    margin-top: 5px !important;
}
/* =========================================================
   HF – FINAL MENU OVERRIDE
   Desktop = pill menu
   Mobil/Tablet = Shoptet hamburger/drawer (bez rozbití)
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================================= */

/* ---------- DESKTOP: pill menu ---------- */
@media (min-width: 1024px){

  /* hamburger pryč */
  #header a.menu-trigger[data-testid="hamburgerMenu"],
  #header .menu-helper,
  #header .menu-helper.visible,
  #header .navigation-close{
    display:none !important;
  }

  /* nav box */
  #header nav#navigation{
    display:block !important;
    background:#fff !important;
    border:1px solid rgba(198,155,52,.35) !important;
    border-radius:8px !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #header nav#navigation .navigation-in.menu{
    position:relative !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    min-height:56px !important;
    padding:0 !important;
    background:transparent !important;
  }

  /* BÍLÝ “PILL” PODKLAD + GOLD OKRAJ (jen desktop) */
  #header nav#navigation .navigation-in.menu::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:0;
    height:100%;
    width:min(1100px, calc(100vw - 80px)) !important;
    background:#fff !important;
    border-radius:8px !important;
    box-shadow:0 0 0 2px #C69B34 !important;
    z-index:0 !important;
  }

  #header nav#navigation ul.menu-level-1{
    position:relative !important;
    z-index:1 !important;
    display:flex !important;
    align-items:center !important;
    
    margin:0 auto !important;
    padding:0 28px !important;
    gap:0 !important;
    list-style:none !important;
    max-height:none !important;
    overflow:visible !important;
    white-space:nowrap !important;
  }

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

  #header nav#navigation ul.menu-level-1 > li > a,
  #header nav#navigation ul.menu-level-1 > li > a > b{
    color:#243C5A !important;
    font-weight:600 !important;
    font-size:14px !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
  }

  #header nav#navigation ul.menu-level-1 > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px 10px !important;
    line-height:1 !important;
  }

  #header nav#navigation ul.menu-level-1 > li > a:hover,
  #header nav#navigation ul.menu-level-1 > li > a:hover > b{
    color:#C69B34 !important;
  }
}

/* ---------- MOBIL + TABLET: vrátit Shoptet hamburger ---------- */
@media (max-width: 1023px){

  /* hamburger musí být vidět a klikací */
  #header a.menu-trigger[data-testid="hamburgerMenu"]{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* ZRUŠIT PILL STYLY, které rozbíjí drawer */
  #header nav#navigation{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    max-height:none !important;
  }

  #header nav#navigation .navigation-in.menu{
    display:block !important;
    position:static !important;
    padding:0 !important;
    min-height:0 !important;
    background:transparent !important;
  }

  /* vypnout pseudo “pill” podklad */
  #header nav#navigation .navigation-in.menu::before{
    content:none !important;
    display:none !important;
  }

  /* UL nenechat jako flex – drawer si to řeší sám */
  #header nav#navigation ul.menu-level-1{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
    white-space:normal !important;
  }

  /* když Shoptet otevře menu, vykreslí panel přes .menu-helper.visible */
  #header .menu-helper.visible{
    display:block !important;
  }

  /* křížek – aby byl vidět na bílé */
  #header .navigation-close{
    display:block !important;
    color:#243C5A !important;
  }
  #header .navigation-close::before,
  #header .navigation-close::after{
    background:#243C5A !important;
  }
}
/* =========================================================
   HF – MOBILE/TABLET MENU DRAWER FIX (text mimo panel)
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================================= */
@media (max-width: 1023px){

  /* samotný vysunutý panel (menu-helper) – pevná pozice, správná šířka */
  #header .menu-helper.visible{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(86vw, 380px) !important;
    height: 100vh !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 100000 !important;
    box-shadow: -24px 0 60px rgba(0,0,0,.35) !important;
  }

  /* nav uvnitř panelu nesmí být flex/space-between */
  #header .menu-helper.visible nav#navigation,
  #header .menu-helper.visible nav#navigation .navigation-in.menu,
  #header .menu-helper.visible nav#navigation ul.menu-level-1{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    white-space: normal !important;
    transform: none !important;
    position: static !important;
  }

  /* vypnout pill pseudo-element v draweru (kdyby se znovu chytil) */
  #header .menu-helper.visible nav#navigation .navigation-in.menu::before{
    content: none !important;
    display: none !important;
  }

  /* RESET položek – aby text byl uvnitř a zarovnaný */
  #header .menu-helper.visible ul.menu-level-1 > li{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #header .menu-helper.visible ul.menu-level-1 > li > a,
  #header .menu-helper.visible ul.menu-level-1 > li > a > b{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;

    padding: 16px 18px !important;
    line-height: 1.25 !important;

    letter-spacing: .08em !important;   /* klidně dej 0, pokud chceš */
    text-transform: uppercase !important;
    font-weight: 600 !important;

    color: #243C5A !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #header .menu-helper.visible ul.menu-level-1 > li > a:hover,
  #header .menu-helper.visible ul.menu-level-1 > li > a:hover > b{
    color: #C69B34 !important;
  }

  /* Křížek – viditelný */
  #header .menu-helper.visible .navigation-close,
  #header .menu-helper.visible .navigation-close *{
    color:#243C5A !important;
    fill:#243C5A !important;
    stroke:#243C5A !important;
  }
}
/* =========================================================
   HF – MOBILE/TABLET MENU RESET (hamburger/drawer)
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================================= */

@media (max-width: 1024px){

  /* 1) Zrušit desktop "menu bar" pseudo-pruh a flex rozvržení */
  #header #navigation .navigation-in.menu{
    display:block !important;
    position:static !important;
    padding:0 !important;
    background:transparent !important;
  }
  #header #navigation .navigation-in.menu::before{
    content:none !important;
    display:none !important;
  }

  /* 2) Mobilní menu = klasický sloupec, text začíná nahoře */
  #header #navigation ul.menu-level-1{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:72px 22px 22px 22px !important; /* nahoře prostor pro X */
    gap:0 !important;
    white-space:normal !important;
  }
  #header #navigation ul.menu-level-1 > li{
    display:block !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  #header #navigation ul.menu-level-1 > li > a{
    display:block !important;
    height:auto !important;
    line-height:1.2 !important;
    padding:16px 0 !important;
    text-align:left !important;
    color:var(--hf-indigo) !important;
  }

  /* 3) Drawer panel – připnout vpravo, správná šířka, scroll jen v něm */
  #header nav#navigation.visible{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    width:min(380px, 90vw) !important;
    height:100vh !important;
    max-height:100vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-radius:0 !important;
    z-index:9999 !important;
    background:var(--hf-white) !important;
  }

  /* 4) X (close) – aby byl vidět i na bílé */
  #header nav#navigation .navigation-close{
    display:block !important;
    position:fixed !important;
    top:14px !important;
    right:14px !important;
    z-index:10000 !important;
    width:44px !important;
    height:44px !important;
    border-radius:999px !important;
    background:#fff !important;
    border:1px solid rgba(198,155,52,.35) !important;
    color:var(--hf-indigo) !important; /* když je to font/icon */
  }
  /* pokud je X kreslené pseudo-elementy */
  #header nav#navigation .navigation-close::before,
  #header nav#navigation .navigation-close::after{
    background:var(--hf-indigo) !important;
  }

  /* 5) Zabránit scrollbaru přímo v hlavičce (ten pruh vpravo v modré) */
  #header,
  #header .container.navigation-wrapper,
  #header .top-nav{
    overflow:visible !important;
  }
}
/* =========================================================
   HF – FIX MENU: Mobil = hamburger, Tablet+PC = desktop menu
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================================= */

/* 1) TABLET + PC: VYNUTIT DESKTOP MENU (zrušit drawer/menu-helper) */
@media (min-width:768px){

  /* hamburger + mobilní pomocný panel pryč */
  #header a.menu-trigger,
  #header a.menu-trigger[data-testid="hamburgerMenu"],
  #header .menu-helper,
  #header .menu-helper.visible,
  #header nav#navigation .navigation-close{
    display:none !important;
  }

  /* navigace jako normální bar (NE vysouvací panel) */
  #header nav#navigation{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
  }

  /* bílý box (tvůj pseudo-element) musí být v barě, ne jako panel */
  #header #navigation .navigation-in.menu{
    position:relative !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    height:56px !important;
    overflow:visible !important;
  }

  /* položky vždy viditelné v jedné řadě */
  #header #navigation ul.menu-level-1{
    position:relative !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:center !important;

    width:min(1100px, calc(100vw - 140px)) !important;
    margin:0 auto !important;
    padding:0 28px !important;

    max-height:none !important;
    overflow:visible !important;
    list-style:none !important;
  }

  #header #navigation ul.menu-level-1 > li,
  #header #navigation ul.menu-level-1 > li > a{
    height:56px !important;
    line-height:56px !important;
    display:flex !important;
    align-items:center !important;
  }
}

/* 2) MOBIL: nechat drawer, ale opravit začátek menu nahoře + žádné divné posuny */
@media (max-width:767px){

  /* nav je panel/drawer */
  #header nav#navigation.visible{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    height:100vh !important;
    max-height:100vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;

    background:#fff !important;
    border-radius:0 !important;
  }

  /* menu položky hned odshora (žádné obří odsazení) */
  #header nav#navigation.visible ul.menu-level-1{
    display:block !important;
    padding:18px 18px 22px !important;
    margin:0 !important;
  }

  #header nav#navigation.visible ul.menu-level-1 > li > a{
    line-height:1.2 !important;
    padding:14px 0 !important;
  }

  /* křížek musí být vidět (ne bílý na bílém) */
  #header nav#navigation .navigation-close{
    display:block !important;
    color:#243C5A !important;
  }
  #header nav#navigation .navigation-close::before,
  #header nav#navigation .navigation-close::after{
    background:#243C5A !important;
  }
}
/* =========================================
   HF – MOBIL: hamburger bez kolečka + menu panel s pozadím
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================= */

@media (max-width:767px){

  /* 1) Hamburger: zrušit "kolečko" (background/shadow/radius) */
  #header a.menu-trigger,
  #header a.menu-trigger[data-testid="hamburgerMenu"]{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    padding:8px 10px !important;
  }

  /* některé šablony dělají kolečko přes ::before */
  #header a.menu-trigger::before,
  #header a.menu-trigger::after{
    background:transparent !important;
    box-shadow:none !important;
  }

  /* 2) Otevřené menu: udělat z něj jasný bílý panel */
  #header nav#navigation.visible{
    background:#ffffff !important;
    z-index:9999 !important;

    /* typicky stačí */
    right:0 !important;
    left:auto !important;
    width:min(86vw, 380px) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.35) !important;
  }

  /* aby položky byly čitelné na bílém */
  #header nav#navigation.visible ul.menu-level-1 > li > a,
  #header nav#navigation.visible ul.menu-level-1 > li > a > b{
    color:#243C5A !important;
  }
}
/* =========================================
   HF – DESKTOP MENU WIDTH FIX + REMOVE IG CLICK
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================= */

@media (min-width:1024px){

  /* 1) Zrušit starý pseudo pill */
  #header nav#navigation .navigation-in.menu::before{
    content:none !important;
    display:none !important;
  }

  /* 2) Navigační box bude jen podle skutečné šířky UL */
  #header nav#navigation{
    background:transparent !important;
    border:0 !important;
  }

  #header nav#navigation .navigation-in.menu{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }

  /* 3) MENU = skutečný box s gold rámečkem */
  #header nav#navigation ul.menu-level-1{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:26px !important;

    background:#ffffff !important;
    padding:0 34px !important;
    height:56px !important;

    border-radius:10px !important;
    box-shadow:0 0 0 2px #C69B34 !important;

    margin:0 auto !important;
    width:auto !important;
  }

  /* položky */
  #header nav#navigation ul.menu-level-1 > li,
  #header nav#navigation ul.menu-level-1 > li > a{
    height:56px !important;
    display:flex !important;
    align-items:center !important;
  }

  /* 4) ZABÍT případný overlay vpravo (Instagram layer) */
  #header .top-nav,
  #header .top-nav *{
    pointer-events:auto !important;
  }

  /* pokud tam zůstává prázdný wrapper */
  #header .container.navigation-wrapper{
    overflow:visible !important;
  }
}
/* =========================================================
   HF – MENU PILL = UL WIDTH (fix border) + REMOVE IG OVERLAY
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================================= */

@media (min-width:1024px){

  /* 0) ZABÍT všechny staré "pill" pseudo-elementy (dělají šířku 1100px) */
  #header #navigation .navigation-in.menu::before,
  #header nav#navigation .navigation-in.menu::before{
    content:none !important;
    display:none !important;
  }

  /* 1) Srovnat wrapper navigace – nic navíc vpravo */
  #header nav#navigation,
  #header nav#navigation.visible{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  #header nav#navigation .navigation-in.menu{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:0 !important;
    position:relative !important;
  }

  /* 2) PILL DĚLÁ UL (rámeček = přesně podle obsahu) */
  #header nav#navigation ul.menu-level-1{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    /* důležité: žádné space-between ani pevné šířky */
    width:fit-content !important;
    max-width:calc(100vw - 80px) !important;

    gap:26px !important;
    margin:0 !important;
    padding:0 34px !important;
    height:56px !important;

    background:#fff !important;
    border-radius:10px !important;
    box-shadow:0 0 0 2px #C69B34 !important;

    list-style:none !important;
    white-space:nowrap !important;
  }

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

  #header nav#navigation ul.menu-level-1 > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:56px !important;
    line-height:56px !important;
    padding:0 10px !important;
  }

  /* 3) Schovat “divné” pomocné prvky, co dělají klikací plochy vpravo */
  #header nav#navigation .tab-index,
  #header nav#navigation .tab-index-wrapper,
  #header nav#navigation .navigation-close,
  #header .menu-helper,
  #header .menu-helper.visible{
    display:none !important;
    pointer-events:none !important;
  }

  /* 4) ZABÍT INSTAGRAM (i kdyby byl jako neviditelný overlay) */
  #header a[href*="instagram"],
  #header a[href*="instagr.am"],
  #header [class*="instagram"],
  #header [id*="instagram"]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}
/* =========================================================
   5) INFO STRÁNKY (.pageArticleDetail) – Signature typografie
   ========================================================= */
main#content .pageArticleDetail{
  max-width:980px !important;
  margin:0 auto !important;
  padding:10px 14px !important;

  color:var(--hf-text) !important;
  font-size:16px !important;
  line-height:1.75 !important;
}

/* H1 (šablonový headline) */
.pageArticleDetail header[itemprop="headline"] h1,
main#content .pageArticleDetail h1{
  color:var(--hf-indigo) !important;
  text-transform:uppercase !important;
  letter-spacing:2px !important;
  font-weight:600 !important;
  line-height:1.08 !important;

  margin:0 0 14px 0 !important;
  padding:0 0 14px 0 !important;

  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  position:relative !important;
}

.pageArticleDetail header[itemprop="headline"] h1::after,
main#content .pageArticleDetail h1::after{
  content:"" !important;
  display:block !important;
  width:var(--hf-h1-underline-w) !important;
  height:var(--hf-h1-underline-h) !important;
  background:var(--hf-gold) !important;
  margin-top:12px !important;
  opacity:.9 !important;
}

/* H2/H3 v obsahu – indigo, bez šablonových obdélníků */
.pageArticleDetail .content-inner h2,
.pageArticleDetail .content-inner h3,
#content .pageArticleDetail h2,
#content .pageArticleDetail h3{
  color:var(--hf-indigo) !important;
  text-transform:uppercase !important;
  letter-spacing:1.5px !important;
  font-weight:600 !important;
  line-height:1.2 !important;

  margin:18px 0 10px 0 !important;

  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.pageArticleDetail h2::before,
.pageArticleDetail h2::after,
.pageArticleDetail h3::before,
.pageArticleDetail h3::after,
.pageArticleDetail h2 span::before,
.pageArticleDetail h2 span::after,
.pageArticleDetail h3 span::before,
.pageArticleDetail h3 span::after,
.pageArticleDetail h2 i::before,
.pageArticleDetail h2 i::after,
.pageArticleDetail h3 i::before,
.pageArticleDetail h3 i::after{
  content:none !important;
  display:none !important;
}

/* Responsive sizes */
@media (min-width:1024px){
  .pageArticleDetail header[itemprop="headline"] h1{ font-size:var(--hf-h1-d) !important; }
  .pageArticleDetail .content-inner h2{ font-size:var(--hf-h2-d) !important; }
}
@media (max-width:1023px){
  .pageArticleDetail header[itemprop="headline"] h1{ font-size:var(--hf-h1-m) !important; letter-spacing:1.6px !important; }
  .pageArticleDetail .content-inner h2{ font-size:var(--hf-h2-m) !important; }
}

/* =========================================================
   7) FAQ – hf-faq2 (clean, bez dvojité linky)
   ========================================================= */

:root{
    --hf-indigo:#243C5A;
    --hf-gold:#C69B34;
  }

  .hf-faq2{
    max-width:980px;
    margin:0 auto;
    padding-bottom:30px;
  }

  /* Sekce – bez zlatých linek */
  .hf-faq2__section{
    margin:30px 0 12px;
    font-size:22px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--hf-indigo);
    border:0 !important;
  }
  .hf-faq2__section::before,
  .hf-faq2__section::after{
    display:none !important;
    content:none !important;
  }

  .hf-faq2__item{
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .hf-faq2__q{
    width:100%;
    background:none;
    border:0;
    padding:18px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:600;
    cursor:pointer;
  }

  .hf-faq2__icon{
    width:26px;
    height:26px;
    border-radius:50%;
    border:1px solid rgba(198,155,52,.7);
    position:relative;
  }

  .hf-faq2__icon::before,
  .hf-faq2__icon::after{
    content:"";
    position:absolute;
    background:var(--hf-gold);
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }

  .hf-faq2__icon::before{ width:12px; height:2px; }
  .hf-faq2__icon::after{ width:2px; height:12px; }

  .hf-faq2__q[aria-expanded="true"] .hf-faq2__icon::after{
    display:none;
  }

  .hf-faq2__a{
    padding:0 0 18px 0;
    line-height:1.7;
    color:#222;
  }

/* ---------- TABLET + DESKTOP: Signature pill ---------- */
@media (min-width:768px){

  /* 1) Kill staré pseudo-pill řešení (to dělalo široký box) */
  #header #navigation .navigation-in.menu::before,
  #header nav#navigation .navigation-in.menu::before{
    content:none !important;
    display:none !important;
  }

  /* 2) Wrapper navigace – jen centrovat */
  #header nav#navigation,
  #header nav#navigation.visible{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  #header nav#navigation .navigation-in.menu{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:0 !important;
  }

  /* 3) PILL = UL přesně na obsah (žádné prázdno vpravo) */
  #header nav#navigation ul.menu-level-1{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:fit-content !important;          /* klíč */
    max-width:calc(100vw - 40px) !important;

    gap:28px !important;
    margin:0 auto !important;

    height:54px !important;
    padding:0 34px !important;

    background:var(--hf-white) !important;
    border-radius:12px !important;

    /* Signature: tenký gold okraj + jemný stín */
    box-shadow:
      0 0 0 1.5px rgba(198,155,52,.95),
      0 14px 35px rgba(0,0,0,.18) !important;

    list-style:none !important;
    white-space:nowrap !important;
  }

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

  #header nav#navigation ul.menu-level-1 > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:54px !important;
    line-height:54px !important;

    padding:0 6px !important;

    color:var(--hf-indigo) !important;
    text-decoration:none !important;

    /* Signature typografie */
    font-weight:600 !important;
    font-size:13px !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
  }

  #header nav#navigation ul.menu-level-1 > li > a b{
    color:inherit !important;
    font-weight:inherit !important;
  }

  #header nav#navigation ul.menu-level-1 > li > a:hover,
  #header nav#navigation ul.menu-level-1 > li > a:hover b{
    color:var(--hf-gold) !important;
  }

  /* 4) Kompozice hlavičky – menu blíž k logu (méně prázdna) */
  #header .container.navigation-wrapper{
    padding-bottom:18px !important;
  }

  /* Pokud máš mezi logem a menu velkou mezeru, stáhni ji (bez rozbití) */
  #header .site-name,
  #header .site-name a{
    margin-bottom:10px !important;
  }
}

/* ---------- MOBIL: nic nepřepisuj (ať jede drawer) ---------- */
@media (max-width:767px){
  /* schválně prázdné – mobil řešíš drawerem */
}
/* =========================================================
   HF – ONE TRUE PILL (Tango): pill kreslí navigation-wrapper
   1) vypne všechny staré pill rámečky
   2) udělá jeden pill s řízenou šířkou
   ========================================================= */

@media (min-width:768px){

  /* A) VYPNOUT všechny možné "pill" pseudo-elementy a rámečky */
  #header nav#navigation,
  #header #navigation,
  #header nav#navigation.visible,
  #header #navigation.visible{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  #header nav#navigation::before,
  #header nav#navigation::after,
  #header #navigation::before,
  #header #navigation::after,
  #header nav#navigation .navigation-in::before,
  #header nav#navigation .navigation-in::after,
  #header #navigation .navigation-in::before,
  #header #navigation .navigation-in::after,
  #header nav#navigation .navigation-in.menu::before,
  #header nav#navigation .navigation-in.menu::after,
  #header #navigation .navigation-in.menu::before,
  #header #navigation .navigation-in.menu::after,
  #header .navigation-wrapper::before,
  #header .navigation-wrapper::after,
  #header .container.navigation-wrapper::before,
  #header .container.navigation-wrapper::after{
    content:none !important;
    display:none !important;
  }

  /* B) VYROBIT jeden pill na wrapperu navigace (tohle je stabilní u Tango) */
  #header .container.navigation-wrapper{
    position:relative !important;
    padding-bottom:18px !important; /* prostor, aby se pill “dýchal” */
  }

  /* pill jako nový jediný prvek */
  #header .container.navigation-wrapper::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;

    /* umístění pill pod logem – v místě menu */
    left:50% !important;
    transform:translateX(-50%) !important;

    /* DŮLEŽITÉ: výška a šířka pill */
    height:56px !important;

    /* 👇 TADY ŘÍDÍŠ DÉLKU BÍLÉHO MENU */
    width:min(600px, calc(100vw - 80px)) !important;

    /* pozice: dej dolů do wrapperu navigace */
    bottom:12px !important;

    background:#fff !important;
    border-radius:12px !important;
    box-shadow:0 0 0 2px #C69B34 !important;

    z-index:1 !important; /* pod textem menu */
    pointer-events:none !important;
  }

  /* C) Menu text musí být NAD pillem */
  #header nav#navigation,
  #header #navigation{
    position:relative !important;
    z-index:2 !important;
    background:transparent !important;
  }
/* =========================================================
   HF – CLEAN SINGLE PILL (no extra block under menu)
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================================= */

@media (min-width:768px){

  /* 0) ZRUŠIT ten náš “nový blok” na wrapperu (pokud tam zůstal) */
  #header .container.navigation-wrapper::after{
    content:none !important;
    display:none !important;
  }
  #header .container.navigation-wrapper{
    padding-bottom:0 !important;
  }

  /* 1) Připravit navigaci – bez vlastních borderů, ať nemáš dvojité rámečky */
  #header nav#navigation,
  #header #navigation,
  #header nav#navigation.visible,
  #header #navigation.visible{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* 2) Pill uděláme JEN tady: na .navigation-in.menu::before (a vynutíme ho) */
  #header nav#navigation .navigation-in.menu,
  #header #navigation .navigation-in.menu{
    position:relative !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    height:56px !important;
  }

  #header nav#navigation .navigation-in.menu::before,
  #header #navigation .navigation-in.menu::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    top:0 !important;
    height:100% !important;

    /* ✅ TADY SE MĚNÍ VELIKOST BÍLÉHO MENU (zkus klidně 700px a uvidíš změnu) */
    width:min(850px, calc(100vw - 120px)) !important;

    background:#fff !important;
    border-radius:12px !important;

    /* zlatý lem */
    box-shadow:0 0 0 2px #C69B34 !important;

    z-index:0 !important;
    pointer-events:none !important;
  }

  /* 3) Menu text vždy nad pill */
  #header nav#navigation ul.menu-level-1,
  #header #navigation ul.menu-level-1{
    position:relative !important;
    z-index:1 !important;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:28px !important;

    height:56px !important;
    margin:0 auto !important;
    padding:0 28px !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    white-space:nowrap !important;
    list-style:none !important;
  }

  /* 4) Kdyby Shoptet dělal “zlaté podtržení/šipku” přes pseudo prvky, zabít */
  #header nav#navigation ul.menu-level-1 > li::before,
  #header nav#navigation ul.menu-level-1 > li::after,
  #header #navigation ul.menu-level-1 > li::before,
  #header #navigation ul.menu-level-1 > li::after{
    content:none !important;
    display:none !important;
  }
}
  #header nav#navigation ul.menu-level-1,
  #header #navigation ul.menu-level-1{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:28px !important;

    height:56px !important;
    margin:0 auto !important;
    padding:0 28px !important;
    white-space:nowrap !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    list-style:none !important;
  }

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

  #header nav#navigation ul.menu-level-1 > li > a,
  #header #navigation ul.menu-level-1 > li > a{
    height:56px !important;
    line-height:56px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 8px !important;
  }
}
/* =========================================================
   HF – REMOVE NEW (INNER) GOLD FRAME, KEEP ORIGINAL PILL
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================================= */

@media (min-width:768px){

  /* 1) Zrušit nový rámeček kolem textu menu (UL / LI / A) */
  #header nav#navigation ul.menu-level-1,
  #header #navigation ul.menu-level-1,
  #header nav#navigation ul[class*="menu-level-1"],
  #header #navigation ul[class*="menu-level-1"]{
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    background:transparent !important;
  }

  #header nav#navigation ul.menu-level-1::before,
  #header nav#navigation ul.menu-level-1::after,
  #header #navigation ul.menu-level-1::before,
  #header #navigation ul.menu-level-1::after{
    content:none !important;
    display:none !important;
  }

  #header nav#navigation ul.menu-level-1 > li,
  #header #navigation ul.menu-level-1 > li,
  #header nav#navigation ul.menu-level-1 > li > a,
  #header #navigation ul.menu-level-1 > li > a{
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    background:transparent !important;
  }

  /* 2) Ať je text nad původním bílým barem */
  #header nav#navigation ul.menu-level-1,
  #header #navigation ul.menu-level-1{
    position:relative !important;
    z-index:5 !important;
  }
}
@media (min-width:768px){
  #header nav#navigation ul.menu-level-1,
  #header #navigation ul.menu-level-1{
    filter:none !important;
  }
}
/* =========================================================
   HF – ZKRÁCENÍ MENU BOXU (REAL WIDTH FIX)
   ========================================================= */

@media (min-width:768px){

  /* 1) ZKRÁTIT SKUTEČNÝ MENU BOX */
  #header #navigation,
  #header nav#navigation{
    width:auto !important;
    max-width:850px !important;   /* 👈 TADY měníš délku boxu */
    margin:0 auto !important;
  }

  /* 2) Vnitřní wrapper nesmí být 100% */
  #header .navigation-in.menu{
    width:auto !important;
    max-width:850px !important;   /* 👈 stejné číslo */
    margin:0 auto !important;
  }

  /* 3) UL nesmí roztahovat box */
  #header ul.menu-level-1{
    width:auto !important;
    justify-content:center !important;
  }

}
/* =========================================================
   HF – PILL: sjednotit zakřivení (radius) boxu i rámečku
   VLOŽIT ÚPLNĚ NA KONEC CSS
   ========================================================= */

@media (min-width:768px){

  /* 0) společný radius (změň jen tady) */
  :root{ --hf-pill-radius: 50px; }

  /* 1) hlavní box (pozadí) */
  #header #navigation,
  #header nav#navigation{
    border-radius: var(--hf-pill-radius) !important;
    overflow: hidden !important; /* aby se vnitřek “neprokousal” */
  }

  /* 2) rámeček (border / shadow) – ať kopíruje stejný radius */
  #header #navigation,
  #header nav#navigation{
    border: 2px solid #C69B34 !important;
    box-shadow: none !important;
  }

  /* 3) pro jistotu sjednotit i vnitřní wrapper */
  #header .navigation-in.menu{
    border-radius: var(--hf-pill-radius) !important;
  }

  /* 4) UL a linky – bez vlastního radiusu (ať nic nepřekáží) */
  #header ul.menu-level-1,
  #header ul.menu-level-1 > li,
  #header ul.menu-level-1 > li > a{
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
/* =========================================================
   HF – FORCE PILL RADIUS (aplikuje radius na VŠECHNO,
   včetně pseudo-elementů, kde bývá zlatý lem)
   ========================================================= */

@media (min-width:768px){

  :root{ --hf-pill-radius: 5px; } /* ZKUS KLIDNĚ 50px – musí být vidět */

  /* 1) hlavní kontejnery */
  header#header #navigation,
  header#header nav#navigation,
  header#header #navigation.visible,
  header#header nav#navigation.visible,
  body.desktop header#header #navigation,
  body.desktop header#header nav#navigation,
  body.desktop header#header #navigation.visible,
  body.desktop header#header nav#navigation.visible{
    border-radius: var(--hf-pill-radius) !important;
    overflow: hidden !important;
    outline: 0 !important;
  }

  /* 2) vnitřní wrapper (často drží pozadí) */
  header#header #navigation .navigation-in.menu,
  header#header nav#navigation .navigation-in.menu,
  header#header #navigation .navigation-in,
  header#header nav#navigation .navigation-in{
    border-radius: var(--hf-pill-radius) !important;
    overflow: hidden !important;
  }

  /* 3) pokud je pill / zlatý lem kreslený pseudo-elementem */
  header#header #navigation::before,
  header#header #navigation::after,
  header#header nav#navigation::before,
  header#header nav#navigation::after,
  header#header #navigation .navigation-in.menu::before,
  header#header #navigation .navigation-in.menu::after,
  header#header nav#navigation .navigation-in.menu::before,
  header#header nav#navigation .navigation-in.menu::after{
    border-radius: var(--hf-pill-radius) !important;
  }

  /* 4) UL a položky – ať si do toho nekreslí vlastní radius */
  header#header ul.menu-level-1,
  header#header ul.menu-level-1 > li,
  header#header ul.menu-level-1 > li > a{
    border-radius: 0 !important;
    outline: 0 !important;
  }
}
:root{
  --hf-indigo:#243C5A;
  --hf-gold:#C69B34;
  --hf-text:#1A1A1A;       /* hlavní text */
  --hf-text-soft:#444444;  /* jemnější text */
}

/* Hromadná změna textů */
body{
  color: var(--hf-text);
}

/* Info stránky */
.content,
.article-content,
.hf-faq2{
  color: var(--hf-text);
}
/* =========================
   HOMEFIELD – Hlavní nadpis stránky (H1)
   ========================= */

main#content h1,
#content-wrapper h1,
.content-wrapper h1,
.page-title h1 {

    color: #243C5A !important;     /* Indigo */
    font-size: 44px !important;    /* větší */
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    line-height: 1.15 !important;
}

/* Zlatá linka pod nadpisem */
main#content h1::after,
#content-wrapper h1::after {
    content: "";
    display: block;
    width: 140px;
    height: 2px;
    background: #C69B34;
    margin-top: 14px;
}
   /* =====================================================
   HOMEFIELD SIGNATURE – INFO STRÁNKY (DESKTOP + MOBIL)
   sjednocení: breadcrumb OFF, H1 Signature, H2 1 marker
   ===================================================== */

/* A) Breadcrumb pryč úplně */
html body main#content .breadcrumbs,
html body .breadcrumbs.navigation-home-icon-wrapper{
  display:none !important;
}

/* B) Obsah info stránek – šířka + typografie (platí všude) */
html body main#content .pageArticleDetail{
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 10px 0 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #111 !important;
}

/* C) H1 = hlavní nadpis stránky (Signature) */
html body main#content .pageArticleDetail header[itemprop="headline"] h1,
html body main#content .pageArticleDetail h1{
  margin: 0 0 18px 0 !important;
  font-size: 44px !important;
  line-height: 1.05 !important;
  color: #243C5A !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;

  /* jistota proti šablonovým dekoracím */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* D) Jedno decentní podtržení pod H1 (jen 1 linka) */
html body main#content .pageArticleDetail header[itemprop="headline"] h1::after,
html body main#content .pageArticleDetail h1::after{
  content:"" !important;
  display:block !important;
  width: 130px !important;
  height: 2px !important;
  background: #C69B34 !important;
  opacity: .95 !important;
  margin-top: 14px !important;
}

/* E) HR linka = Signature gold */
html body main#content .pageArticleDetail hr{
  border:0 !important;
  height:1px !important;
  background:#C69B34 !important;
  opacity:.9 !important;
  margin:22px 0 !important;
}

/* F) H2 = sekce (indigo, vždy stejné) */
html body main#content .pageArticleDetail h2{
  margin: 0 0 10px 0 !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  color: #243C5A !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;

  /* odstranění šablonových věcí */
  background:none !important;
  border:0 !important;
  box-shadow:none !important;

  /* náš layout pro 1 marker */
  position: relative !important;
  padding-left: 22px !important;
}

/* G) Zrušit šablonové pseudo-elementy, co dělají duplicity markerů */
html body main#content .pageArticleDetail h2::before,
html body main#content .pageArticleDetail h2::after,
html body main#content .pageArticleDetail h2 span::before,
html body main#content .pageArticleDetail h2 span::after,
html body main#content .pageArticleDetail h2 i::before,
html body main#content .pageArticleDetail h2 i::after{
  content: none !important;
  display: none !important;
}

/* H) Náš JEDINÝ marker (zlatý obdélník) */
html body main#content .pageArticleDetail h2::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  height: 18px !important;
  background:#C69B34 !important;
  border-radius:2px !important;
}

/* I) Mobilní doladění (aby H1 nebyl obří) */
@media (max-width: 767px){
  html body main#content .pageArticleDetail{
    padding: 10px 16px !important;
  }
  html body main#content .pageArticleDetail h1{
    font-size: 34px !important;
    letter-spacing: 2px !important;
  }
  html body main#content .pageArticleDetail h1::after{
    width: 110px !important;
  }
  html body main#content .pageArticleDetail h2{
    font-size: 22px !important;
    letter-spacing: 1.2px !important;
    padding-left: 20px !important;
  }
  html body main#content .pageArticleDetail h2::before{
    width: 9px !important;
    height: 16px !important;
  }
}
/* ====================================
   HOMEFIELD SIGNATURE – FAQ STYLE
   ==================================== */

.hf-faq2{
  max-width: 900px;
  margin: 0 auto 60px;
}

/* Sekce (PRODUKT, OBJEDNÁVKA…) */
.hf-faq2__section{
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hf-indigo);
  margin: 50px 0 25px;
  position: relative;
}

/* Decentní zlaté podtržítko */
.hf-faq2__section::after{
  content:"";
  display:block;
  width:60px;
  height:2px;
  background: var(--hf-gold);
  margin-top:12px;
  opacity:.7;
}

/* Položky */
.hf-faq2__item{
  border-bottom:1px solid rgba(0,0,0,.08);
}

/* Otázka */
.hf-faq2__q{
  font-size:14px;
  letter-spacing:.06em;
  font-weight:600;
  color: var(--hf-text);
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition: color .3s ease;
}

.hf-faq2__q:hover{
  color: var(--hf-indigo);
}

/* Ikona */
.hf-faq2__icon{
  width:22px;
  height:22px;
  border:1px solid rgba(198,155,52,.6);
  border-radius:50%;
  position:relative;
}

.hf-faq2__icon::before,
.hf-faq2__icon::after{
  content:"";
  position:absolute;
  background:var(--hf-gold);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.hf-faq2__icon::before{ width:10px; height:2px; }
.hf-faq2__icon::after{ width:2px; height:10px; }

.hf-faq2__q[aria-expanded="true"] .hf-faq2__icon::after{
  display:none;
}

/* Odpověď */
.hf-faq2__a{
  font-size:15px;
  line-height:1.8;
  color: var(--hf-text-soft);
  padding-bottom:24px;
}
/* ============================
   FAQ – větší spacing NAD sekcemi (Shoptet-safe)
   ============================ */

/* hlavní spacing řešíme paddingem (ne marginem) */
.hf-faq2__section{
  display: block;
  padding-top: 100px !important;     /* ↑ zvětši třeba na 60px */
  margin-top: 0 !important;         /* margin vypneme, ať ho nic nekoliduje */
  margin-bottom: 18px !important;
}

/* první sekce (PRODUKT) ať nemá obří odsazení od začátku stránky */
.hf-faq2__section:first-of-type{
  padding-top: 18px !important;
}

/* linka mezi sekcemi – když ji chceš zpět */
.hf-faq2__section{
  border-top: 1px solid rgba(0,0,0,.08); /* šedá linka */
}

/* aby linka nebyla nalepená na text nadpisu */
.hf-faq2__section{
  padding-top: 46px !important;  /* linka je nahoře, text níž */
}

/* jemné doladění, aby otázky nebyly hned pod nadpisem */
.hf-faq2__q{
  padding: 20px 0 !important;
}
/* TEST – musí se projevit hned (změní barvu a pozadí nadpisů sekcí) */
.hf-faq2 h2{
  background: rgba(255,0,0,.08) !important;
  color: red !important;
}
<style>
.hf-faq2 h2{
  background: rgba(255,0,0,.08) !important;
  color: red !important;
}
</style>