/* ============================================================
   HAPPY HAIR – VLASTNÍ ÚPRAVY ŠABLONY APOLLO (CSS)
   Originál: CLAUDE_dokumenty/Shoptet - uprava sablony/hh-upravy-sablony.css
   Na eshopu: Správce souborů → /user/documents/upload/hh/ (aktuální název viz README)
   Načítá se z HTML kód → Záhlaví. Historie změn: README.md
   ============================================================ */

/* (v13: Cormorant Garamond už se nepoužívá – nadpisy jsou v písmu stránky Roboto) */

/* 1) Horní lišta – e-mail nepřekrývá přepínač měny/jazyka (desktop + tablet)
      Apollo dává e-mail (.top-navigation-contacts) absolutně vpravo (right:15px, z-index 99)
      a přepínač měny/jazyka je zarovnaný také doprava → ležel pod e-mailem.
      Řešení: přepínači přidat zprava místo o šířce e-mailu (~192 px + mezera).
      Mobil (< 768 px) beze změny. Přidáno 21.10.2026 */
@media (min-width: 768px) {
  .top-navigation-bar .top-navigation-tools--language {
    padding-right: 215px;
  }
}

/* 2) Homepage – přeskládání bloků (dělá hh-upravy-sablony.js)
      Aby návštěvník neviděl "přeskakování", jsou oba přesouvané bloky do přesunu
      neviditelné. Pojistka: kdyby JS nedoběhl, po 1,5 s se zobrazí i tak.
      Přidáno 21.10.2026 */
.in-index .welcome-wrapper,
.in-index .banners-top-block {
  opacity: 0;
  animation: hh-pojistka 0s linear 1.5s forwards;
}
.hh-poradi-ok .in-index .welcome-wrapper,
.hh-poradi-ok .in-index .banners-top-block {
  opacity: 1;
  animation: none;
}
@keyframes hh-pojistka { to { opacity: 1; } }

/* 3) Homepage – bannery „Banner: Top“ (Návrhář šablon) v mřížce 2 × 2, na mobilu pod sebou
      + nadpis NAŠE ZNAČKY / Péče o vlasy, tělo i duši (vkládá hh-upravy-sablony JS).
      Apollo dává všechny Top bannery do .banners-top-block > .next-to-carousel-banners.
      Přidáno 21.10.2026 */
.in-index .banners-top-block .next-to-carousel-banners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .in-index .banners-top-block .next-to-carousel-banners {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
/* Menší mezera pod bannery značek: Apollo dává bloku margin-bottom 70 px a řádku výhod
   (benefitBanner) margin-top 80 px → bylo 150 px prázdna. (21.10.2026) */
.in-index .banners-top-block {
  margin-bottom: 20px;
}
.in-index .banners-top-block + .container > .benefitBanner.position--benefitHomepage {
  margin-top: 20px;
}
/* 4) Carousel na počítači menší (cca 80 %: 940 px místo 1178 px), vycentrovaný (21.10.2026).
      Mobil beze změny – tam se carousel přizpůsobí výšce obrázku sám (mobilní verze bannerů
      v Shoptetu: Viditelný na → jen Mobil). */
@media (min-width: 992px) {
  .in-index .banners-row > .col-sm-8 {
    max-width: 1140px;   /* v11: 940 → 1140 px (schváleno Lucií 22.10.2026) */
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
}
/* 5) Nadpisy sekcí na homepage (Novinky, Nejoblíbenější zboží…, Nové články, Recenze,
      Značky a Partnerství) stejným písmem jako „Péče o vlasy, tělo i duši“ (21.10.2026).
      Apollo nadpisům vnucuje Roboto 700 → !important. */
.in-index .homepage-group-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  color: #3b2a22 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}
@media (min-width: 768px) {
  .in-index .homepage-group-title { font-size: 42px !important; }
}
/* „Novinky“ bylo natlačené pod carouselem → větší mezera nad nadpisem */
.in-index .homepage-group-title.homepage-products-heading-2 {
  margin-top: 48px !important;
  margin-bottom: 24px !important;
}

/* Počítač: 4 bannery v JEDNÉ ŘADĚ přes šířku stránky (bannery v8, cca 275 × 340 px), v10, 21.10.2026.
   (v9 bylo 2 × 2 – „vizuálně velké“.) */
@media (min-width: 992px) {
  .in-index .banners-top-block .next-to-carousel-banners {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}
/* (v7 bylo 2 × 2 přes celou šířku – „obrovské“.)
   Pro 4 v jedné řadě (poloviční velikost, verze v6) stačí sem vrátit:
   @media (min-width: 992px) { .in-index .banners-top-block .next-to-carousel-banners {
     grid-template-columns: repeat(4, 1fr); gap: 20px; } } */
.in-index .banners-top-block .next-to-carousel-banners > .banner-wrapper {
  width: auto;
  max-width: none;
  flex: none;
  margin: 0;
  padding: 0;
}
.in-index .banners-top-block .next-to-carousel-banners img {
  width: 100%;
  height: auto;
  display: block;
}
.hh-znacky-nadpis {
  text-align: center;
  margin: 0 0 24px;
}
.hh-znacky-nadpis__nad {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #a0743f;
  margin-bottom: 6px;
}
.hh-znacky-nadpis__h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.15;
  color: #3b2a22;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.hh-znacky-nadpis__h em { font-style: italic; }
/* Apollo vnucuje nadpisům písmo Roboto – proto !important */
.hh-znacky-nadpis .hh-znacky-nadpis__h,
.hh-znacky-nadpis .hh-znacky-nadpis__h em {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
}
@media (min-width: 768px) {
  .hh-znacky-nadpis__h { font-size: 42px; }
}

/* 6) Vyrovnané mezery na homepage – POČÍTAČ (v11, 22.10.2026, schváleno náhledem).
      Mezera nad nadpisem = mezera pod ním (změřeno na viditelném textu, okno 1440 px). */
@media (min-width: 992px) {
  /* „NAŠE ZNAČKY / Péče o vlasy, tělo i duši“: nad 48 → 34 px (= pod) */
  .in-index .banners-top-block { margin-top: 31px !important; }
  /* nadpisy sekcí */
  .in-index .homepage-group-title.homepage-products-heading-2 { margin-top: 34px !important; }   /* Novinky */
  .in-index .homepage-group-title.homepage-products-heading-1 { margin-top: -19px !important; }  /* Nejoblíbenější z Natulique */
  .in-index .homepage-group-title.homepage-products-heading-3 { margin-top: 21px !important; }   /* Nejoblíbenější z Naturigin */
  .in-index .homepage-blog-wrapper .homepage-group-title { margin-top: 21px !important; }        /* Nové články */
  .in-index .ratings-block .homepage-group-title { margin-top: -39px !important; }               /* Recenze */
  .in-index .partners-block .homepage-group-title { margin-top: -44px !important; }              /* Značky a Partnerství */
  /* tlačítko „Všechny články“ blíž k článkům, s mezerou pod ním */
  .in-index .homepage-blog-wrapper > .text-center { margin-top: 0 !important; margin-bottom: 28px !important; }
}

/* 7) Vyrovnané mezery nad/pod nadpisy – TELEFON (v12, 22.10.2026; v14 22.10.2026 přeměřeno po změně písma
      na Roboto 20 px – iPhone 440 px, měřeno na viditelném textu: mezera nad = pod, schváleno náhledem).
      Posun = margin-top +X a margin-bottom −X (celková výška stránky se nemění). */
@media (max-width: 991px) {
  .in-index .homepage-group-title.homepage-products-heading-2 { margin-top: 2px !important; margin-bottom: 22px !important; }       /* Novinky */
  .in-index .homepage-group-title.homepage-products-heading-1 { margin-top: -34px !important; margin-bottom: 19px !important; }     /* Nejoblíbenější z Natulique */
  .in-index .homepage-group-title.homepage-products-heading-3 { margin-top: -14.5px !important; margin-bottom: 19.5px !important; } /* Nejoblíbenější z Naturigin */
  .in-index .homepage-blog-wrapper .homepage-group-title { margin-top: -5px !important; margin-bottom: 28px !important; }           /* Nové články */
  .in-index .ratings-block .homepage-group-title { margin-top: -19.5px !important; margin-bottom: 28.5px !important; }              /* Recenze */
  .in-index .partners-block .homepage-group-title { margin-top: -20px !important; margin-bottom: 27px !important; }                 /* Značky a Partnerství */
}

/* 8) v13 (22.10.2026, schváleno náhledem): nadpisy sekcí v písmu stránky (Roboto 20 px, velká písmena,
      jako „OVĚŘENO ZÁKAZNÍKY“) a bannery značek 2 vedle sebe na počítači (mobil pod sebou). */
.hh-znacky-nadpis .hh-znacky-nadpis__h,
.hh-znacky-nadpis .hh-znacky-nadpis__h em,
.in-index .homepage-group-title {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #3b2a22 !important;
}
@media (min-width: 992px) {
  .in-index .banners-top-block .next-to-carousel-banners {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}