/* ============================================================
   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
   ============================================================ */

/* Písmo nadpisu „Péče o vlasy, tělo i duši“ (stejné jako na bannerech) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&display=swap');

/* 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: 940px;
    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č: všechny 4 v jedné řadě (poloviční velikost – pokyn Lucie 21.10.2026) */
@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; }
}