<style>
  /* ======================================================
   1. ZÁKLADNÍ BARVY A POZADÍ
====================================================== */
:root {
  --page-bg: #fdf5d8;
}

body,
.content-wrapper,
#content {
  background-color: var(--page-bg);
}

/* ======================================================
   2. HLAVIČKA + HOMEPAGE PRVKY (BEZ POSUNŮ)
====================================================== */
.header,
.site-header,
#header,
.header-top,
.header-inner,
.slider,
.carousel,
.homepage-slider,
.slider-wrapper,
.banner,
.banners,
.homepage-banners,
.banners-wrapper {
  background-color: var(--page-bg);
}


/* ======================================================
   3. DETAIL PRODUKTU – SVĚTLÁ KARTA
====================================================== */
.p-detail,
.product-detail,
#content .product {
  background-color: #f7f6f5;
  padding: 32px;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.product-detail,
.product-detail p,
.product-detail li {
  color: #2b2b2b;
}

.product-detail h1,
.product-detail h2,
.product-detail h3 {
  color: #1f1f1f;
}


/* ======================================================
   4. DETAIL PIVA – OBSAH
====================================================== */
.beer-detail {
  margin-top: 30px;
  color: #2b2b2b;
}

.beer-head {
  margin-bottom: 20px;
}

.beer-style {
  display: inline-block;
  background: #f4b400;
  color: #000;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ======================================================
   5. IKONOVÝ BLOK PARAMETRŮ
====================================================== */
.beer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 16px;
  margin: 24px 0 28px;
}

.beer-stat {
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.beer-stat img.icon {
  height: 48px;
  width: auto;
  margin-bottom: 6px;
}

.beer-stat .value {
  font-size: 1.4rem;
  font-weight: 700;
}

.beer-stat .label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #777;
}


/* ======================================================
   6. TEXTOVÉ SEKCE
====================================================== */
.beer-section {
  margin-top: 25px;
}

.beer-section h3 {
  margin-bottom: 6px;
  font-size: 1.2rem;
  font-weight: 700;
}

.p-short-description,
.product-short-description {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 16px 0 24px;
}


/* ======================================================
   7. CTA – KOŠÍK (DESKTOP)
====================================================== */
@media (min-width: 769px) {

  .p-detail .add-to-cart {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .p-detail .add-to-cart-button {
    padding: 12px 28px;
    font-size: 1.2rem;
    border-radius: 8px;
  }
}


/* ======================================================
   8. POČÍTADLO KUSŮ
====================================================== */
.p-detail .quantity {
  display: flex;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.p-detail .quantity input.amount {
  border: none;
  width: 48px;
  text-align: center;
}

.p-detail .quantity .increase,
.p-detail .quantity .decrease {
  background: #f4f4f4;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-detail .quantity .increase {
  border-left: 1px solid #cfcfcf;
}

.p-detail .quantity .decrease {
  border-top: 1px solid #cfcfcf;
}


/* ======================================================
   HLAVIČKA + LOGO (DESKTOP + MOBIL)
====================================================== */

/* ===== DESKTOP ===== */
.header-top img,
.site-header img[src*="logo"],
.header img[src*="logo"] {
  max-height: 120px !important;
  height: auto !important;
  width: auto !important;
  margin: 0 auto;
}

.site-header,
.header,
#header,
.header-top {
  min-height: 180px !important;
  align-items: center;
}

/* ===== MOBIL ===== */
@media (max-width: 768px) {

  /* 1. ZRUŠENÍ FIXNÍ POZICE - hlavička už nebude odskakovat */
  .site-header, 
  .header, 
  #header, 
  .header-top,
  #header-inner {
    position: relative !important; /* Změna z fixed na relative */
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 30px !important;    /* Posun loga níže */
    padding-bottom: 5px !important; /* Mezera pod logem */
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  /* 2. SAMOTNÉ LOGO */
  .header-top img,
  .site-header img[src*="logo"],
  .header img[src*="logo"],
  .logo img {
    max-height: 100px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* 3. OPRAVA POZICE TĚLA STRÁNKY */
  /* Protože hlavička už "neplave", nepotřebujeme pod ní umělou mezeru */
  body {
    padding-top: 0 !important; 
  }

  #cuckoo-header-placeholder, 
  .header-placeholder {
    display: none !important;
  }

  /* Pokud by pod hlavičkou stále zlobila mezera, vynutíme ji u slideru */
  #content, .content-wrapper, .homepage-slider {
    margin-top: 0 !important;
  }
}



/* ======================================================
   11. HOMEPAGE – SLIDER + BANNER VE STEJNÉ VÝŠCE
====================================================== */
.homepage-banners {
  display: flex;
  align-items: stretch;
}

.homepage-slider,
.slider,
.carousel {
  height: 100%;
}

.homepage-banners .banner {
  height: 100%;
  display: flex;
}

/* 1. Sjednocení barev v mobilním menu */
@media (max-width: 991px) {
    /* Oprava barvy pozadí za ikonami, aby tam nebyl bílý pruh */
    .header-top, .navigation-buttons {
        background-color: transparent !important;
    }
    
    /* Vycentrování ikon menu a košíku vůči tvému velkému logu */
    .navigation-buttons {
        top: 45px !important; /* Posune ikony trochu níže, aby byly v úrovni středu loga */
    }
}

/* 2. Zvýraznění aktivní položky v menu */
/* Aby zákazník věděl, v jaké kategorii zrovna je */
#navigation .menu-helper > ul > li.active > a,
.navigation-in .menu-helper > ul > li.active > a {
    background-color: #8d5524 !important;
    color: #fdf5d8 !important;
}

/* 3. Vylepšení stínů u produktových karet */
/* Tvůj web teď působí trochu ploše, jemný stín mu dodá hloubku */
.p {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.p:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(75, 44, 32, 0.15) !important;
}
/* ======================================================
   AGE GATE 18+
====================================================== */
.age-gate {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.age-gate-box {
  background: #ffffff;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.age-gate-buttons {
  display: flex;
  gap: 14px;
  margin-top: 24px;
}

.age-btn {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}


/* ======================================================
   PRODUKTOVÁ KARTA – VZHLED (BEZ ŘÍZENÍ ŠÍŘKY)
====================================================== */
.products .product {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.products .product:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
}

.products .product .p-image {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f6f5;
}

.products .product .p-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 1. Hlavní lišta menu - Gradient */
#navigation, 
.navigation-in,
.menu-helper {
    background: linear-gradient(90deg, #4b2c20 0%, #8d5524 100%) !important;
}

/* 2. Texty v hlavní liště (ponecháme původní zarovnání) */
.menu-helper > ul > li > a {
    background-color: transparent !important; /* Odstraní případné bloky barev */
    color: #ffffff !important;
}

/* 3. VYSKAKOVACÍ MENU (Dropdown) - Pouze barva podkladu */
/* Zacílíme na celý kontejner vyskakovacího okna */
.menu-helper ul li ul,
.menu-helper .dropdown,
.navigation-in ul li ul,
.menu-sub {
    background-color: #8d5524 !important;
}

/* 4. Texty a obrázky ve vyskakovacím menu */
/* Zde měníme barvu textu, ale nesaháme na display nebo width */
.menu-helper ul li ul li a,
.menu-helper .dropdown a,
.navigation-in ul li ul li a {
    color: #ffffff !important;
    background-color: transparent !important; /* Důležité: nepřebíjet plochou barvou */
}

/* 5. Hover efekt - pouze změna barvy pozadí pod myší */
.menu-helper ul li ul li a:hover,
.navigation-in ul li ul li a:hover {
    background-color: #4b2c20 !important;
    color: #fdf5d8 !important;
}

/* ======================================================
   HOVER EFEKT PRO TLAČÍTKO V HLAVNÍM MENU
====================================================== */

/* Změní barvu pozadí hlavního tlačítka, když na něj najedeš myší */
.menu-helper > ul > li:hover > a,
.navigation-in > ul > li:hover > a {
    background-color: #8d5524 !important; /* Stejná barva jako dropdown */
    color: #ffffff !important; /* Tmavý text, aby byl na světlé barvě vidět */
    transition: background-color 0.3s ease; /* Plynulý přechod */
}

/* Pokud máš v menu šipky u kategorií, toto zajistí, aby i ony změnily barvu */
.menu-helper > ul > li:hover > a::after {
    color: #4b2c20 !important;
}

/* ======================================================
   MOBIL A TABLET - POUZE TEXTY MENU BÍLÉ (BEZ KOŠÍKU)
====================================================== */

@media (max-width: 991px) {
    /* Cílíme pouze na odkazy v menu a navigaci, vynecháme globální ikony */
    .menu-helper > ul > li > a,
    .navigation-in > ul > li > a,
    #menu-mobile .menu-helper a,
    .menu-indicator {
        color: #ffffff !important;
    }

    /* Šipky u kategorií v menu */
    .menu-helper > ul > li > a::after,
    .navigation-in > ul > li > a::after {
        color: #ffffff !important;
    }

    /* --- VOLITELNÉ: SPECIFICKÁ BARVA PRO KOŠÍK --- */
    /* Pokud chceš košíku vrátit původní barvu (např. černou), použij toto: */
    .cart-count, 
    .navigation-buttons .cart-indicator {
        /* color: #000000 !important; */ /* Odmaž lomítka a změň barvu podle potřeby */
    }
}

</style>