/* Maison Miel — focused UX/UI refinement */

/* ---------- refined floating header ---------- */
.hero-shell::before {
  top: 42px;
  height: 170px;
  background: linear-gradient(180deg,
    #f7dfa0 0%,
    #f7c64c 46%,
    rgba(247,191,51,.48) 68%,
    rgba(252,241,220,.10) 91%,
    rgba(252,241,220,0) 100%);
}

.main-header {
  position: fixed;
  top: 14px;
  left: clamp(22px, 3vw, 50px);
  right: clamp(22px, 3vw, 50px);
  height: 96px;
  padding: 0 24px 0 30px;
  border-radius: 27px;
  gap: 22px;
  background: rgba(255,250,240,.92);
  border: 1px solid rgba(207,143,17,.20);
  box-shadow: 0 13px 34px rgba(86,54,0,.10), inset 0 1px 0 rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
  transition: top .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1),
              left .35s ease, right .35s ease, box-shadow .35s ease, background .35s ease;
}
.main-header::before {
  content:"";
  position:absolute;
  left: 28px;
  right: 28px;
  bottom: -1px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(226,157,18,.58) 25%, rgba(245,191,56,.9) 50%, rgba(226,157,18,.58) 75%, transparent);
  opacity: .58;
  pointer-events:none;
}
.main-header.is-scrolled {
  top: 10px;
  height: 76px;
  left: clamp(14px, 2vw, 34px);
  right: clamp(14px, 2vw, 34px);
  background: rgba(255,250,240,.965);
  box-shadow: 0 14px 38px rgba(76,47,0,.15), inset 0 1px 0 rgba(255,255,255,.9);
}

.brand { width: clamp(210px, 15.8vw, 265px); }
.brand img { transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.brand:hover img { transform: translateY(-2px) scale(1.015); filter: saturate(1.04); }
.main-header.is-scrolled .brand { width: clamp(180px, 13.5vw, 226px); }

.nav { gap: clamp(22px, 2.45vw, 44px); }
.nav a {
  font-family: "Baskerville", Georgia, serif;
  font-size: clamp(16px, 1.05vw, 18px);
  font-weight: 600;
  padding: 14px 3px;
}
.nav a::after {
  bottom: 7px;
  height: 2px;
  background: linear-gradient(90deg,#f2c354,#d9940b,#f2c354);
}
.nav a.is-active { color: #b56d00; }
.nav a.is-active::after { width: 100%; }

.header-actions { gap: 5px; }
.icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid transparent;
}
.icon-btn:hover {
  transform: translateY(-2px) scale(1.04);
  background: rgba(246,188,47,.12);
  border-color: rgba(220,151,16,.18);
  box-shadow: 0 8px 18px rgba(143,89,0,.08);
}
.main-header.is-scrolled .icon-btn { width: 38px; height: 38px; }

/* ---------- flowers must stay in front of fades ---------- */
.about-hero__stage { isolation: isolate; }
.about-hero__backdrop { z-index: 0; }
.about-hero__stage::before,
.about-hero__stage::after { z-index: 1; }
.about-hero__copy { z-index: 6; }

.footerref-page::before { z-index: 1; }
.footerref-honey { z-index: 7; }
.footerref-flowers {
  z-index: 6;
  opacity: .36;
  filter: saturate(.76) brightness(1.05);
}
.footerref-flowers-left {
  left: -46px;
  top: 116px;
  width: clamp(220px, 16vw, 295px);
}
.footerref-flowers-right {
  right: -42px;
  top: 245px;
  width: clamp(220px, 15vw, 285px);
}
.footerref-newsletter,
.footerref-footer,
.footerref-footer-rule,
.footerref-copyright { z-index: 10; }

/* ---------- interactions ---------- */
.mm-product-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.mm-product-card .mm-product-visual img {
  transition: transform .45s cubic-bezier(.2,.75,.2,1), filter .35s ease;
}
.mm-product-card:hover .mm-product-visual img {
  transform: translateY(-5px) scale(1.035);
  filter: drop-shadow(0 14px 14px rgba(121,72,0,.10));
}
.mm-product-cart.is-added {
  animation: cartPulse .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes cartPulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.cart-badge.bump { animation: badgeBump .42s ease; }
@keyframes badgeBump { 50% { transform: scale(1.34); } }

.footerref-footer-links a,
.footerref-brand,
.footerref-signup button {
  transition: transform .22s ease, opacity .22s ease, filter .22s ease, box-shadow .22s ease;
}
.footerref-footer-links a:hover { transform: translateX(4px); opacity: .62; }
.footerref-brand:hover { transform: translateY(-2px); opacity: .86; }
.footerref-signup button:hover { transform: translateY(-1px); filter: brightness(1.035); box-shadow:0 8px 18px rgba(211,143,14,.14); }

.site-toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 18px);
  padding: 12px 18px;
  border: 1px solid rgba(208,143,18,.18);
  border-radius: 999px;
  background: rgba(255,250,240,.96);
  color: #2a2115;
  box-shadow: 0 14px 34px rgba(84,50,0,.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.site-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive header / foreground flowers ---------- */
@media (max-width: 1100px) {
  .main-header { left: 18px; right: 18px; padding-left: 22px; padding-right: 17px; }
  .brand { width: 205px; }
  .nav { gap: 20px; }
  .nav a { font-size: 15px; }
  .footerref-flowers-left { width: 230px; left: -68px; }
  .footerref-flowers-right { width: 225px; right: -60px; }
}

@media (max-width: 820px) {
  .main-header,
  .main-header.is-scrolled {
    top: 10px;
    left: 10px;
    right: 10px;
    height: 70px;
    border-radius: 21px;
    padding: 0 10px 0 13px;
  }
  .main-header.is-scrolled { top: 8px; }
  .main-header::before { left: 16px; right: 16px; opacity: .38; }
  .brand, .main-header.is-scrolled .brand { width: 142px; }
  .footerref-flowers { display: block !important; opacity: .22; }
  .footerref-flowers-left { left: -92px; top: 108px; width: 205px; }
  .footerref-flowers-right { right: -100px; top: 520px; width: 205px; }
}

@media (prefers-reduced-motion: reduce) {
}

/* === Requested fixes: flowers above fades, clean header background === */
.hero-shell::before {
  display: none !important;
}

.main-header,
.main-header.is-scrolled {
  box-shadow: 0 13px 34px rgba(86,54,0,.10), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.main-header::before {
  display: none !important;
}

.about-hero__stage::before,
.about-hero__stage::after,
.footerref-page::before,
.footerref-page::after {
  z-index: 0 !important;
}


.footerref-left-wave {
  z-index: 4 !important;
}

.footerref-honey {
  z-index: 5 !important;
}

.footerref-flowers {
  z-index: 12 !important;
}

.footerref-newsletter,
.footerref-footer,
.footerref-footer-rule,
.footerref-copyright {
  z-index: 14 !important;
}


/* Products -> About crossfade. The image fades in from the shared cream tone. */
.about-hero {
  position: relative;
  margin-top: -1px;
}
.about-hero::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: 82px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    #f7e7c5 0%,
    rgba(247,231,197,.82) 28%,
    rgba(247,231,197,.34) 62%,
    rgba(247,231,197,.08) 84%,
    rgba(247,231,197,0) 100%);
}
.about-hero__backdrop img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.48) 4%, #000 11%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.28) 8%, #000 22%, #000 100%);
}

/* Header starts at the top now that the shipping banner is removed. */
.main-header { top: 14px !important; }
.main-header.is-scrolled { top: 10px !important; }

@media (max-width: 820px) {
  .main-header,
  .main-header.is-scrolled { top: 8px !important; }
  .about-hero::before { height: 54px; }
}


/* ===== Static fades + rebuilt mobile layout ===== */
/* Section transitions are always present. They never wait for scroll/JS. */
.reveal-section,
.reveal-section.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Keep Products -> About fade compact, not a giant empty band. */
.about-hero::before {
  height: 82px !important;
  background: linear-gradient(to bottom,
    #f7e7c5 0%,
    rgba(247,231,197,.72) 30%,
    rgba(247,231,197,.24) 67%,
    rgba(247,231,197,0) 100%) !important;
}
.about-hero__backdrop img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.56) 3.5%, #000 10%, #000 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.56) 3.5%, #000 10%, #000 100%) !important;
}

@media (max-width: 820px) {
  html, body { overflow-x: hidden; }

  /* Header: usable menu, compact proportions, no empty top band. */
  .main-header,
  .main-header.is-scrolled {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    height: 64px !important;
    padding: 0 8px 0 12px !important;
    border-radius: 20px !important;
    gap: 4px !important;
  }
  .brand,
  .main-header.is-scrolled .brand { width: 132px !important; flex: 0 0 auto; }
  .mobile-nav-toggle { display:flex !important; order: 2; margin-left:auto; }
  .header-actions { order: 3; margin-left: 0 !important; }
  .header-actions .icon-btn[aria-label="Konto"] { display:none !important; }
  .icon-btn { width:34px !important; height:34px !important; }
  .icon-btn svg { width:20px !important; height:20px !important; }
  .nav {
    top: calc(100% + 7px) !important;
    border-radius: 15px !important;
    padding: 7px !important;
  }
  .nav a { padding: 12px 14px !important; font-size:16px !important; }

  /* Hero: less dead space, clearer hierarchy, product stays visible without taking 2 screens. */
  .hero-shell { min-height: 790px !important; height: 790px !important; }
  .hero-content { min-height: 790px !important; }
  .copy-block {
    top: 130px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    text-align: center !important;
  }
  .copy-block h1 {
    font-size: clamp(42px, 11.4vw, 52px) !important;
    line-height: .99 !important;
    letter-spacing: -.045em !important;
  }
  .copy-block p {
    margin-top: 18px !important;
    font-size: 16px !important;
    line-height: 1.48 !important;
  }
  .copy-block p br { display:none !important; }
  .cta {
    width: min(292px, 92%) !important;
    height: 56px !important;
    margin-top: 21px !important;
    border-radius: 13px !important;
  }
  .cta-icon { width:40px !important; height:40px !important; }

  .jar {
    left: 50% !important;
    top: 48.5% !important;
    height: 36.5% !important;
    transform: translateX(-50%) !important;
  }
  .honeycomb {
    right: -18px !important;
    left: auto !important;
    top: 61% !important;
    height: 27% !important;
  }
  .flowers-main {
    left: 1% !important;
    top: 67% !important;
    width: 38% !important;
  }
  .ghost-flowers {
    left: -48px !important;
    top: 61% !important;
    width: 38% !important;
    opacity: .07 !important;
  }
  .bee-a { left: 13% !important; top: 54% !important; width: 11% !important; }
  .bee-c { right: 12% !important; top: 58% !important; width: 10% !important; }
  .bee-b, .flight-path { display:none !important; }

  .trust-row {
    bottom: 15px !important;
    width: calc(100% - 22px) !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 3px !important;
  }
  .trust-item { font-size: 11.5px !important; line-height: 1.15 !important; gap: 4px !important; }
  .trust-icon { width:24px !important; height:24px !important; }

  /* Products: less oversized vertical whitespace. */
  .mm-products-section { padding: 76px 0 62px !important; }
  .mm-products-intro h2 { font-size: 40px !important; }
  .mm-products-all { font-size: 16px !important; }
  .mm-products-grid {
    width: min(370px, calc(100% - 24px)) !important;
    margin-top: 34px !important;
    gap: 14px !important;
  }
  .mm-product-card { min-height: 430px !important; border-radius: 17px !important; }
  .mm-product-visual { height: 245px !important; }
  .mm-product-copy h3 { font-size: 23px !important; }
  .mm-product-copy p { font-size: 16px !important; }

  /* Products -> About: small, permanently visible fade. */
  .about-hero::before { height: 54px !important; }
  .about-hero__backdrop img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.62) 3%, #000 8%, #000 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.62) 3%, #000 8%, #000 100%) !important;
  }

  /* About: photo + copy read as one section rather than two huge screens. */
  .about-hero__stage {
    min-height: 735px !important;
    height: auto !important;
    background: linear-gradient(180deg,#f7e7c5 0%,#fff5df 48%,#f1ddb2 100%) !important;
  }
  .about-hero__backdrop {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 320px !important;
    bottom: auto !important;
  }
  .about-hero__backdrop img {
    object-fit: cover !important;
    object-position: 22% center !important;
  }
  .about-hero__stage::before {
    top: 0 !important;
    height: 54px !important;
    background: linear-gradient(to bottom,#f7e7c5 0%,rgba(247,231,197,.58) 42%,transparent 100%) !important;
  }
  .about-hero__stage::after {
    bottom: auto !important;
    top: 250px !important;
    height: 95px !important;
    background: linear-gradient(to bottom,transparent 0%,rgba(255,245,223,.76) 56%,#fff5df 100%) !important;
  }
  .about-hero__copy {
    position: relative !important;
    min-height: 735px !important;
    padding: 350px 22px 55px !important;
    text-align: center !important;
  }
  .about-hero__copy h2 {
    position: static !important;
    margin: 0 auto !important;
    max-width: 360px !important;
    font-size: clamp(35px, 9.5vw, 44px) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
  }
  .about-hero__paragraphs {
    position: static !important;
    max-width: 390px !important;
    margin: 24px auto 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  .about-hero__paragraphs br { display:none !important; }
  .about-hero__paragraphs p + p { margin-top: 17px !important; }
  .about-hero__cta {
    position: static !important;
    width: min(270px, 100%) !important;
    height: 56px !important;
    margin: 25px auto 0 !important;
  }

  /* Footer: compact, centered, and still keeps the honey artwork visible. */
  .footerref-page {
    min-height: 0 !important;
    height: auto !important;
    padding: 112px 16px 30px !important;
  }
  .footerref-honey {
    width: 165% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .footerref-left-wave { width: 78% !important; height: 72px !important; }
  .footerref-newsletter { width: min(520px,100%) !important; }
  .footerref-newsletter h1 { font-size: 36px !important; line-height: 1.03 !important; }
  .footerref-newsletter p { margin: 14px 0 20px !important; font-size: 16px !important; }
  .footerref-signup { gap: 9px !important; }
  .footerref-signup input,
  .footerref-signup button { height: 54px !important; font-size:16px !important; }
  .footerref-footer {
    width: min(520px,100%) !important;
    margin-top: 46px !important;
    gap: 24px !important;
  }
  .footerref-brand { gap: 12px !important; }
  .footerref-logo-bee { width:70px !important; height:70px !important; }
  .footerref-brand-main { font-size:22px !important; }
  .footerref-brand-sub { font-size:16px !important; }
  .footerref-footer-links h2 { margin-bottom:14px !important; font-size:19px !important; }
  .footerref-footer-links a { margin-bottom:12px !important; font-size:16px !important; }
  .footerref-footer-rule { margin-top:34px !important; }
  .footerref-copyright { margin-top:16px !important; font-size:13px !important; }
  .footerref-flowers-left { left:-92px !important; top:118px !important; width:190px !important; }
  .footerref-flowers-right { right:-102px !important; top:auto !important; bottom:60px !important; width:190px !important; }
}

@media (max-width: 430px) {
  .main-header,
  .main-header.is-scrolled { height:60px !important; }
  .brand,
  .main-header.is-scrolled .brand { width:120px !important; }
  .header-actions .icon-btn[aria-label="Suche"] { display:grid !important; }
  .hero-shell,
  .hero-content { height: 760px !important; min-height:760px !important; }
  .copy-block { top:116px !important; }
  .copy-block h1 { font-size: 41px !important; }
  .jar { top:49.5% !important; height:35% !important; }
  .honeycomb { top:63% !important; height:25% !important; }
  .flowers-main { top:69% !important; width:36% !important; }
  .about-hero__stage,
  .about-hero__copy { min-height:720px !important; }
  .about-hero__backdrop { height:300px !important; }
  .about-hero__stage::after { top:235px !important; }
  .about-hero__copy { padding-top:330px !important; }
  .footerref-page { padding-top:102px !important; }
  .footerref-honey { width:185% !important; }
}


/* ===== Exact new brand logo + favicon update ===== */
.brand,
.main-header.is-scrolled .brand {
  width: auto !important;
  height: 82px;
  display: flex;
  align-items: center;
}
.brand img {
  display: block;
  width: auto !important;
  height: 78px !important;
  max-width: 190px;
  object-fit: contain;
}

.footerref-brand {
  width: 290px !important;
  justify-content: center;
}
.footerref-brand-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.footerref-logo-bee,
.footerref-brand-name {
  display: none !important;
}

@media (max-width: 1100px) {
  .brand,
  .main-header.is-scrolled .brand {
    height: 70px;
  }
  .brand img {
    height: 66px !important;
    max-width: 160px;
  }
  .footerref-brand { width: 255px !important; }
}

@media (max-width: 820px) {
  .brand,
  .main-header.is-scrolled .brand {
    width: auto !important;
    height: 58px !important;
  }
  .brand img {
    height: 54px !important;
    max-width: 124px;
  }
  .footerref-brand { width: 235px !important; }
}

@media (max-width: 430px) {
  .brand,
  .main-header.is-scrolled .brand {
    width: auto !important;
    height: 52px !important;
  }
  .brand img {
    height: 48px !important;
    max-width: 112px;
  }
  .footerref-brand { width: 215px !important; }
}