/* ===== v3.7 – farby na jednom mieste (zmena tu sa prejaví všade v súbore) ===== */
:root {
  --fg-zlta: #e2a703;            /* konverzná farba (tlačidlá) */
  --fg-zlta-hover: #ecc14b;      /* konverzná farba pred kliknutím, zlaté linky v menu */
  --fg-text-na-zlatej: #3b2314;  /* tmavohnedý text na zlatých tlačidlách */
  --fg-ciara: #d9ccbd;           /* jemné deliace čiary v menu a pruhu výhod */
  --fg-krem: #f7f1e6;            /* pozadie pruhu výhod */
}
@media (min-width: 769px) {ul.menu-level-1 {height: 50px}}
/*header#header {background-image: url('https://www.fgarms.eu/user/documents/upload/2026 dizajnové veci/header-tmava-textura-1-90q.jpg');}*/
header#header {
  background-color: #3a2b1f;
  background-image:
    radial-gradient(ellipse 55% 130% at 50% 45%, rgba(135,100,66,.55) 0%, rgba(70,50,34,.75) 50%, rgba(30,22,16,.92) 100%),
    url('https://www.fgarms.eu/user/documents/upload/2026 dizajnové veci/header-tmava-textura-1-90q.jpg');
  background-size: cover;
}
#header .cart-count {color: var(--fg-zlta-hover) !important}
div.navigation-buttons {font-size: 17px}
body {font-size: 15px}
.sidebar h4 {font-size: 16px}
div.benefitBanner__title a,
div.benefitBanner__title .link-like,
div.benefitBanner__content a,
div.benefitBanner__content .link-like,
div.benefitBanner__link a,
div.benefitBanner__link .link-like {color: var(--color-primary) !important; text-decoration: none !important;}
.header-top .btn.cart-count {font-size: 19px}
/* Skryje všetky li od 4. ďalej v top menu */ .top-navigation-bar-menu li:nth-child(n+4) {display: none !important}
/* skryje položky aj v rozbalenej sipke (responsive menu) */ .top-navigation-bar-menu .dropdown-menu li:nth-child(n+4) {display:none !important}
.navigation-tools .dropdown-menu li:nth-child(n+4){display:none !important}
.top-navigation-bar-menu .navigation-dropdown {display: none !important}
.top-navigation-bar-menu li a, .top-navigation-bar-menu-helper li a {padding: 4px 10px}
.top-navigation-bar-menu li:before { line-height: normal}
#navigation .navigation-in ul li a span {white-space: nowrap}

/* detail produktu všetky výhody v 1 r. */
@media (min-width: 769px) {
div.benefitBanner.position--benefitProduct .benefitBanner__item {
    width: 25%; /* každá výhoda zaberie 1/4 šírky */
    box-sizing: border-box;
    word-wrap: break-word; /* text sa zalomí ak je dlhý */
    white-space: normal;
    text-align: center; /* centrovanie */}
div.benefitBanner.position--benefitProduct .benefitBanner {
    display: flex;
    flex-wrap: nowrap; /* nedovoľ zalomenie na ďalší riadok */
    justify-content: space-between; /* rozmiestni rovnomerne */}
@media (min-width: 992px) {.multiple-columns-body .position--benefitProduct .benefitBanner__item {flex: 1 1 25% !important; /* prepíše predchádzajúce 33% */}}
}

div.content-wrapper.homepage-box.before-carousel {background-color: transparent; border-bottom-color: transparent}

/* Uvítací text na celú šírku (celá sekcia vrátane odstavcov) */
@media (min-width: 769px) {
 .welcome .h1, .welcome div {
    max-width: 100% !important;
    }
}

/* výška menu, pozadie a hover pre desktop */
@media (min-width: 769px) {
nav#navigation.fitted.visible {height: 50px !important}
nav#navigation.fitted.visible .navigation-in {height: 50px !important}
nav#navigation, nav#navigation .navigation-in, nav#navigation ul.menu-level-1 {background-color: white !important}
nav#navigation ul.menu-level-1 li {display: inline-block !important}
nav#navigation ul.menu-level-1 li a {
    display: block !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 18px !important;
    color: #333333 !important;
    font-size: 14pt !important;
    font-weight: 500 !important;
    background-color: white !important}
nav#navigation ul.menu-level-1 li a b {color: #333333 !important}
nav#navigation ul.menu-level-1 > li:hover {background-color: #1d1d1d !important}
nav#navigation ul.menu-level-1 > li:hover > a {background-color: #1d1d1d !important; color: white !important}
nav#navigation ul.menu-level-1 > li:hover > a > b {color: white !important}

nav#navigation.fitted.visible div.navigation-in.menu {justify-content: center !important}
nav#navigation.fitted.visible div.navigation-in.menu ul {justify-content: center !important}
nav#navigation.fitted.visible div.navigation-in.menu ul.menu-level-1 li {justify-content: center !important}

.homepage-products-1 .product, .homepage-products-1 .product > div {border: none !important}
.homepage-products-2 .product, .homepage-products-2 .product > div {border: none !important}
.h4.homepage-group-title, h4.homepage-group-title {font-size: 35px}
}

/* Zruší limit výšky loga na desktop */
@media (min-width: 769px) {
.header-top {max-height: none !important}
#header .site-name a img {max-height: none !important}
}
/* Posunie menu presne pod logo podľa jeho výšky */
@media (max-width: 768px) {nav#navigation.fitted.visible {margin-top: 15px !important; /* menšia medzera na mobily */}}
@media (min-width: 769px) {nav#navigation.fitted.visible {margin-top: 30px !important; /* gap na desktop */}}

/* Desktop– zruší limit šírky footer loga */
@media (min-width: 769px) {
    #footer .site-name {
        max-width: none !important;
        width: 196px !important; /* šírka nového loga */}}
/* Skryje pôvodné footer logo */
#footer .site-name img {
    display: none !important}
/* Nové ČB logo vo footer */
#footer .site-name a {
    display: block;
    width: 196px;
    height: 100px;
    background-image: url("https://www.fgarms.eu/user/documents/upload/2026 dizajnové veci/Logo FG ARMS s hviezdou a švihom-196x100.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center}
/* Zarovnanie */
#footer .site-name {
    display: flex;
    justify-content: center;
    align-items: center}
/* kontakt */
@media (min-width: 1200px) {.content-inner {max-width: none !important}}
header[itemprop="headline"] {text-align: center}

/* pre prihláseného zákazníka */
body.in-klient .tracking-link {
  pointer-events: none;   /* zakáže kliknutie */
  color: inherit;         /* zachová farbu textu */
  text-decoration: none;  
  cursor: default;        /* kurzor sa nemení na ruku */
}

/* zmena fontu */
body {font-family: 'Titillium Web', sans-serif !important}

/* btn variantné produkty */
a.btn.btn-primary[tabindex="-1"],
a.btn.btn-primary[data-force-scroll="1"] {
    background-color: var(--fg-zlta) !important;
    border-color: var(--fg-zlta) !important;
    color: var(--fg-text-na-zlatej) !important;
}
a.btn.btn-primary[tabindex="-1"]:hover,
a.btn.btn-primary[data-force-scroll="1"]:hover {
    background-color: var(--fg-zlta-hover) !important;
    border-color: var(--fg-zlta-hover) !important;
    color: var(--fg-text-na-zlatej) !important;
}

@media (min-width: 769px) {

  /* --- Druhá úroveň: dlaždice k hornému okraju, nie na stred --- */
  nav#navigation .navigation-in ul.menu-level-2 { align-items: flex-start !important; }
  nav#navigation .navigation-in ul.menu-level-2 > li { vertical-align: top !important; }

  /* --- Tretia úroveň: zvislý zoznam --- */
  nav#navigation .navigation-in li.has-third-level > div {
    display: block !important;
    width: auto !important;
    min-width: 160px;
    overflow: visible !important;
  }

  nav#navigation .navigation-in ul.menu-level-3,
  nav#navigation .navigation-in ul.menu-level-3.has-more-items {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* font-size: 0 zhasne čiarky, ktoré Shoptet vkladá medzi názvy */
  nav#navigation .navigation-in ul.menu-level-3 > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* odkaz: zrušiť zdedenú výšku 50px z menu 1. úrovne + kompaktný riadok */
  nav#navigation .navigation-in ul.menu-level-3 > li > a {
    display: block !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    white-space: normal;
    padding: 3px 0 !important;
    margin: 0 !important;
  }

  nav#navigation .navigation-in ul.menu-level-3 .more-items-trigger { display: none !important; }
}

/* ===== podmenu 2. a 3. úrovne: zarovnanie, rytmus, jemné oddelenie ===== */
@media (min-width: 769px) {

  /* 1) Koniec centrovania zdedeného z menu 1. úrovne, položky od ľavého okraja */
  body nav#navigation.fitted.visible div.navigation-in.menu ul.menu-level-2 {
    justify-content: flex-start !important;
    align-items: stretch !important; /* rovnako vysoké stĺpce = rovnaké deliace čiary */
    flex-wrap: wrap !important;
  }
  body nav#navigation.fitted.visible div.navigation-in.menu ul.menu-level-2 > li,
  body nav#navigation.fitted.visible div.navigation-in.menu ul.menu-level-3 > li {
    justify-content: flex-start !important;
  }

  /* 2) Bunka: obrázok nad textom, všetko vľavo, vzdušné odstupy */
  body nav#navigation ul.menu-level-2 > li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    padding: 24px 24px 20px !important;
    text-align: left !important;
  }

  /* jemné deliace čiary medzi stĺpcami (nie v 1. stĺpci riadku) */
  body nav#navigation ul.menu-level-2 > li:not(:nth-child(4n+1)) {
    border-left: 1px solid var(--fg-ciara) !important;
  }

  /* 3) Obrázok: rovnaký rámček, zarovnaný vľavo, bez dedených výšok z menu 1. úrovne */
  body nav#navigation ul.menu-level-2 > li > a.menu-image {
    display: block !important;
    height: auto !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    background: transparent !important;
  }
  body nav#navigation ul.menu-level-2 > li > a.menu-image img {
    display: block !important;
    width: 140px !important;
    height: 100px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* 4) Nadpis kategórie: žiadny padding 18 px ani výška 50 px */
  body nav#navigation ul.menu-level-2 > li > div {
    display: block !important;
    width: 100% !important;
  }
  body nav#navigation ul.menu-level-2 > li > div > a {
    display: block !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    background: transparent !important;
    text-decoration: none !important;
  }
  body nav#navigation ul.menu-level-2 > li > div > a:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--fg-zlta-hover) !important;
    text-underline-offset: 4px;
  }

  /* zlatá linka pod nadpisom, len ak má položka podkategórie */
  body nav#navigation ul.menu-level-2 > li.has-third-level > div > a::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--fg-zlta-hover);
    margin: 10px 0 6px;
  }

  /* 5) Tretia úroveň: zarovnaná presne pod nadpis, väčšie rozostupy, jemnejšia farba */
  body nav#navigation .navigation-in ul.menu-level-3 > li > a {
    padding: 4px 0 !important;
    font-size: 14px !important;
    color: #555555 !important;
    background: transparent !important;
  }
  body nav#navigation .navigation-in ul.menu-level-3 > li > a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--fg-zlta-hover) !important;
    text-underline-offset: 3px;
  }

  /* 6) Panel podmenu: jemná horná čiara a mäkký tieň dole (hĺbka bez orámovania) */
  body nav#navigation ul.menu-level-2 {
    border-top: 1px solid var(--fg-ciara) !important;
    box-shadow: 0 14px 24px -14px rgba(0,0,0,.2) !important;
  }
}

/* ===== v3.5 – oddeľovače medzi položkami menu 1. úrovne ===== */
@media (min-width: 769px) {
  nav#navigation ul.menu-level-1 > li {
    border-color: var(--fg-ciara) !important; /* bledohnedá; tmavšie napr. #c9b8a4, svetlejšie #e6dccf */
  }
}

/* Zlaté tlačidlá – tmavohnedý text (košík, hľadať; variantné majú farbu vyššie) */
.btn.btn-conversion,
.add-to-cart-button,
button[data-testid="searchBtn"] {
    color: var(--fg-text-na-zlatej) !important;
}

/* ===== v3.6 – pruh výhod ===== */
div.benefitBanner.position--benefitHomepage,
div.benefitBanner.position--benefitCategory,
div.benefitBanner.position--benefitProduct {
  color: #333333 !important;
  background-color: var(--fg-krem) !important;
  border: 1px solid var(--fg-ciara);  /* aj ľavá a pravá čiara */
}
div.benefitBanner { --color-primary: #333333 }  /* odkazy v bannere preberú tmavú farbu */
div.benefitBanner__title { font-weight: 600 }

@media (min-width: 769px) {
  div.benefitBanner .benefitBanner__item + .benefitBanner__item {
    border-left: 1px solid var(--fg-ciara);
  }
}

/* ===== v3.10 – pruh výhod: vycentrovanie bez zväčšenia výšky, čiary na celú výšku ===== */
div.benefitBanner.position--benefitHomepage,
div.benefitBanner.position--benefitCategory,
div.benefitBanner.position--benefitProduct {
  align-items: stretch;            /* výhody vyplnia celú výšku pruhu */
}
div.benefitBanner .benefitBanner__item {
  align-self: stretch;             /* zvislá čiara ide od hora po spodok */
  align-items: center;             /* obsah vertikálne na stred */
  justify-content: center;         /* obsah horizontálne na stred */
  margin-bottom: 0;                /* šablóna dáva 15 px len dole, preto bol obsah pri hornom okraji */
  padding-top: 8px;                /* rovnaká medzera hore aj dole, výška pruhu ostáva podobná */
  padding-bottom: 8px;
}
div.benefitBanner .benefitBanner__link {
  width: 100%;
  align-items: center;
  justify-content: center;
}
div.benefitBanner .benefitBanner__picture {
  align-items: center;
  flex-shrink: 0;
}

/* ===== v3.11 – pruh výhod na mobile: zoznam zarovnaný zľava ===== */
@media (max-width: 768px) {
  /* položka funguje rovnako s odkazom aj bez neho */
  div.benefitBanner .benefitBanner__item {
    justify-content: flex-start;
    padding-left: 24px;            /* odsadenie od ľavého okraja pruhu */
    gap: 16px;                     /* medzera medzi ikonou a textom (pre výhodu bez odkazu) */
  }
  div.benefitBanner .benefitBanner__link {
    justify-content: flex-start;
    gap: 16px;                     /* to isté pre výhody s odkazom */
    padding-left: 0;
  }
  div.benefitBanner .benefitBanner__picture {
    flex: 0 0 64px;                /* pevný rámik, aby texty začínali v rovnakej zvislici */
    width: 64px;
    justify-content: center;
  }
  div.benefitBanner .benefitBanner__content {
    text-align: left;
  }
  /* jemná čiara medzi riadkami */
  div.benefitBanner .benefitBanner__item + .benefitBanner__item {
    border-top: 1px solid var(--fg-ciara);
  }
}

/* ===== v3.15 – FAQ (section.faq) a uvítací text na homepage ===== */
section.faq { margin-top: 32px; }

section.faq details {
  border-bottom: 1px solid #e3e3e3;
  padding: 12px 0;
}

section.faq summary {
  position: relative;
  padding-left: 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: #262626;
}
section.faq summary::-webkit-details-marker { display: none; }

section.faq summary::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--fg-zlta-hover);
}
section.faq details[open] summary::before { content: "–"; }

/* hover: text ostáva čitateľný, zlatá len v podčiarknutí (ako v menu) */
section.faq summary:hover {
  text-decoration: underline;
  text-decoration-color: var(--fg-zlta-hover);
  text-underline-offset: 4px;
}
section.faq summary:focus-visible {
  outline: 2px solid var(--fg-zlta);
  outline-offset: 3px;
}

section.faq details > div {
  padding: 10px 0 4px 20px;
  color: #444;
  line-height: 1.6;
}

/* uvítací text na homepage */
.welcome-wrapper .container p,
.welcome-wrapper .container li,
.welcome-wrapper .container details { font-size: 13pt !important; }
.welcome-wrapper .container h2 { font-size: 16pt !important; }