/* =========================================================
   Včelí farma Peškovi – vlastní styly (Shoptet, šablona Classic)
   Nahráno přes FTP: /user/documents/assets/vcelifarma.css
   Font Dancing Script je hostovaný lokálně ve složce fonts/.
   ========================================================= */

/* ---------- Font Dancing Script – hostovaný lokálně (FTP: assets/fonts/) ---------- */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dancing-script-v29-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dancing-script-v29-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/dancing-script-v29-latin_latin-ext-600.woff2') format('woff2');
}

:root {
  --vf-font-script: 'Dancing Script', cursive;
  --vf-yellow: #dea747;
  --vf-red: #9b1425;
}

/* ---------- Homepage – uvítací box ---------- */
.homepage-box.welcome-wrapper {
  background-color: var(--vf-yellow);
  padding: 40px 0;
}

/* POZOR: nadpis uvítacího boxu je v Shoptetu <div class="h1">, ne <h1>,
   takže tato pravidla (a pravidla v sekci 10) se nyní neuplatní. */
.homepage-box.welcome-wrapper h1 {
  color: var(--vf-red);
}

/* ---------- Logo – zvětšení a posun (desktop/tablet) ---------- */
@media (min-width: 768px) {
  /* odblokování limitů hlavičky (Shoptet) */
  #header .header-top,
  #header .site-name-wrapper,
  #header .site-name {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #header .site-name a img {
    height: 150px !important;
    max-height: none !important;
    width: auto !important;
    display: block;
  }

  #header .site-name {
    margin-left: 50px;
  }
}

/* ---------- Logo – zvětšení na mobilu (do 767 px) ---------- */
/* Horní lišta zvýšena z 50 na 90 px, logo 80 px, ikony vycentrované */
@media (max-width: 767px) {
  .top-navigation-bar {
    height: 90px !important;
  }

  .top-navigation-bar .responsive-tools {
    height: 90px !important;
    align-items: center;
  }

  /* obsah a hlavička posunuté pod vyšší lištu */
  .overall-wrapper {
    padding-top: 90px !important;
  }

  #header {
    top: 90px !important;
  }

  #header .site-name,
  #header .site-name a {
    height: auto !important;
  }

  #header .site-name {
    top: -85px !important;
  }

  #header .site-name a img {
    height: 80px !important;
    max-height: none !important;
    max-width: none !important;
    width: auto !important;
  }

  /* ikona košíku zarovnaná s lupou a menu */
  #header .navigation-buttons a.cart-count {
    top: -59px !important;
  }
}

/* ---------- 1) Hlavní menu ---------- */
#header #navigation .menu-level-1 > li > a {
  font-family: var(--vf-font-script) !important;
  font-size: 28px;
  font-weight: 600;
}

/* ---------- 2) Horní lišta ---------- */
.top-navigation-bar,
.top-navigation-bar a,
.top-navigation-bar strong,
.top-navigation-bar span {
  font-family: var(--vf-font-script) !important;
  font-size: 18px;
  font-weight: 500;
}

/* ---------- 3) Header-top – logo, košík, texty ---------- */
#header .header-top,
#header .header-top a,
#header .header-top span {
  font-family: var(--vf-font-script) !important;
  font-size: 20px;
  font-weight: 500;
}

/* ---------- 4) Benefit banner ---------- */
.benefitBanner__content,
.benefitBanner__title,
.benefitBanner__data {
  font-family: var(--vf-font-script) !important;
}

.benefitBanner__title {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
}

.benefitBanner__data {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
}

/* ---------- 5) Homepage – nadpis sekce produktů ---------- */
.homepage-group-title.homepage-products-heading-2 {
  font-family: var(--vf-font-script) !important;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- 6) Produktová karta – název ---------- */
.products .p-in-in > a.name,
.products .p-in-in > a.name > span {
  font-family: var(--vf-font-script) !important;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-block;
}

.products .p-in-in > a.name {
  height: auto !important;
  min-height: 72px; /* 2 řádky při 30px písmu */
  overflow: visible !important;
}

/* ---------- 7) Sidebar – kategorie + top produkty ---------- */
.sidebar-inner h4,
.sidebar-inner h4 span {
  font-family: var(--vf-font-script) !important;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

.sidebar-inner #categories a {
  font-family: var(--vf-font-script) !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.sidebar-inner #categories .active > a,
.sidebar-inner #categories .topic > a {
  font-weight: 600;
}

.sidebar-inner .top-products-name {
  font-family: var(--vf-font-script) !important;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

/* cena zůstává ve výchozím fontu */
.sidebar-inner .top-products-content strong {
  font-family: inherit;
}

/* ---------- 8) Drobečková navigace ---------- */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span {
  font-family: var(--vf-font-script) !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.breadcrumbs .navigation-bullet {
  font-weight: 400;
  opacity: 0.8;
}

/* ---------- 9) Detail produktu – H1 + kód ---------- */
.p-detail-inner-header h1 {
  font-family: var(--vf-font-script) !important;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 6px;
}

.p-detail-inner-header .p-code,
.p-detail-inner-header .p-code span {
  font-family: var(--vf-font-script) !important;
  font-size: 18px;
  font-weight: 500;
  opacity: 0.85;
}

/* ---------- 10) Homepage – uvítací sekce ---------- */
.welcome-wrapper h1 { /* viz poznámka nahoře – nyní se neuplatní */
  font-family: var(--vf-font-script) !important;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 16px;
}

.welcome-wrapper p {
  font-family: var(--vf-font-script) !important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.7;
}

.welcome-wrapper strong {
  font-family: var(--vf-font-script) !important;
  font-weight: 600;
}

/* ---------- 11) Header – pozadí ---------- */
#header {
  background-color: var(--vf-yellow);
}

/* ---------- 12) Homepage – sekce s bannery ---------- */
.content-wrapper.homepage-box.before-carousel {
  position: relative;
  background-color: var(--vf-yellow);
  padding: 40px 0;
}

/* ---------- 13) Menu – více místa dole, bez ořezu (desktop/tablet) ---------- */
@media (min-width: 768px) {
  #header #navigation {
    height: auto !important;
    min-height: 58px !important;
    overflow: visible !important;
    padding-bottom: 12px !important;
  }

  #header #navigation .navigation-in {
    height: auto !important;
    overflow: visible !important;
  }

  #header #navigation .menu-level-1 > li > a {
    padding: 14px 22px 18px !important;
    line-height: 1.2 !important;
    display: inline-block !important;
  }
}

/* ---------- 14) Pozadí webu (desktop) ---------- */
@media (min-width: 992px) {
  .overall-wrapper {
    background-color: var(--vf-yellow);
  }
}

/* ---------- 15) Homepage – bez šedých čar mezi sekcemi ---------- */
.homepage-box {
  border-top: 0 !important;
  border-bottom: 0 !important;
}