/* Maison Miel — V19 mobile polish
   No footer selectors. Focus: mobile navigation + Home About + About page imagery. */

/* Robust mobile navigation surface. */
@media (max-width: 820px) {
  .main-header { z-index: 10000 !important; }
  .main-header .mobile-nav-toggle { position: relative !important; z-index: 10003 !important; touch-action: manipulation; }
  .main-header .nav {
    z-index: 10002 !important;
    max-height: min(68vh, 520px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform-origin: top center;
    visibility: hidden !important;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s !important;
  }
  .main-header .nav.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s !important;
  }
  html.mm-nav-open,
  body.mm-nav-open { overflow: hidden !important; }
}

/* HOME — mobile About section: less oversized, more editorial, tighter flow. */
@media (max-width: 820px) {
  body:not(.inner-site-page) .about-hero {
    background: #fff5df !important;
  }
  body:not(.inner-site-page) .about-hero__stage {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: linear-gradient(180deg,#f7e7c5 0%,#fff5df 49%,#f3dfb8 100%) !important;
  }
  body:not(.inner-site-page) .about-hero__backdrop {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: clamp(292px, 76vw, 370px) !important;
  }
  body:not(.inner-site-page) .about-hero__backdrop img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 22% 48% !important;
  }
  body:not(.inner-site-page) .about-hero__stage::before {
    top: 0 !important;
    height: 42px !important;
    background: linear-gradient(to bottom,#f7e7c5 0%,rgba(247,231,197,.44) 50%,transparent 100%) !important;
  }
  body:not(.inner-site-page) .about-hero__stage::after {
    top: clamp(232px, 61vw, 300px) !important;
    bottom: auto !important;
    height: 94px !important;
    background: linear-gradient(to bottom,transparent 0%,rgba(255,245,223,.72) 45%,#fff5df 100%) !important;
  }
  body:not(.inner-site-page) .about-hero__copy {
    position: relative !important;
    min-height: 0 !important;
    padding: clamp(320px, 82vw, 400px) 20px 50px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  body:not(.inner-site-page) .about-hero__copy h2 {
    position: static !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 !important;
    font-size: clamp(38px, 10.2vw, 47px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    white-space: normal !important;
  }
  body:not(.inner-site-page) .about-hero__paragraphs {
    position: static !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 22px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.58 !important;
    text-align: left !important;
  }
  body:not(.inner-site-page) .about-hero__paragraphs br { display: none !important; }
  body:not(.inner-site-page) .about-hero__paragraphs p + p { margin-top: 13px !important; }
  body:not(.inner-site-page) .about-hero__cta {
    position: static !important;
    width: min(100%, 330px) !important;
    height: 54px !important;
    margin: 23px 0 0 !important;
    padding-left: 19px !important;
    padding-right: 8px !important;
  }
}

/* ABOUT PAGE — mobile image/story flow: no overlap, no collage accident. */
@media (max-width: 820px) {
  body.about-v5-page .about-v5-bees {
    padding: 66px 16px 78px !important;
  }
  body.about-v5-page .about-v5-bees__intro {
    width: 100% !important;
    max-width: 610px !important;
    margin: 0 auto 30px !important;
  }
  body.about-v5-page .about-v5-bees__intro h2 {
    max-width: 570px !important;
    font-size: clamp(39px, 10.5vw, 53px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
  }
  body.about-v5-page .about-v5-bees__intro h2 br { display: none !important; }
  body.about-v5-page .about-v5-bees__intro > p:not(.about-v5-eyebrow) {
    margin-top: 20px !important;
    max-width: 560px !important;
    font-size: 15.5px !important;
    line-height: 1.62 !important;
  }
  body.about-v5-page .about-v5-bees__visuals {
    width: 100% !important;
    max-width: 640px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  body.about-v5-page .about-v5-craft,
  body.about-v5-page .about-v5-bee-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }
  body.about-v5-page .about-v5-craft { aspect-ratio: 4 / 3 !important; }
  body.about-v5-page .about-v5-bee-photo {
    width: 86% !important;
    align-self: flex-end !important;
    aspect-ratio: 1.18 / 1 !important;
  }
  body.about-v5-page .about-v5-craft img,
  body.about-v5-page .about-v5-bee-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body.about-v5-page .about-v5-craft img { object-position: 52% 44% !important; }
  body.about-v5-page .about-v5-bee-photo img { object-position: center !important; }
  body.about-v5-page .about-v5-bees__decor { display: none !important; }
  body.about-v5-page .about-v5-bees__links {
    width: 100% !important;
    max-width: 640px !important;
    margin: 24px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
  }
  body.about-v5-page .about-v5-bees__links .about-v5-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 0 !important;
  }
}

@media (max-width: 430px) {
  body:not(.inner-site-page) .about-hero__backdrop { height: 292px !important; }
  body:not(.inner-site-page) .about-hero__stage::after { top: 225px !important; height: 90px !important; }
  body:not(.inner-site-page) .about-hero__copy { padding: 315px 18px 44px !important; }
  body:not(.inner-site-page) .about-hero__copy h2 { font-size: clamp(37px, 10.8vw, 44px) !important; }
  body:not(.inner-site-page) .about-hero__paragraphs { font-size: 14.5px !important; line-height: 1.55 !important; }

  body.about-v5-page .about-v5-bees { padding-left: 12px !important; padding-right: 12px !important; }
  body.about-v5-page .about-v5-bee-photo { width: 90% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .main-header .nav { transition: none !important; }
}


/* ===== V22 mobile-only footer honey line fix ===== */
@media (max-width: 640px) {
  .footerref-page {
    overflow: hidden !important;
  }

  /* Use the single supplied artwork on mobile so the wave and drips stay visually connected. */
  .footerref-left-wave {
    display: none !important;
  }

  .footerref-honey {
    left: 50% !important;
    top: 0 !important;
    width: 138% !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
    object-position: top center !important;
  }
}

@media (max-width: 430px) {
  .footerref-honey {
    width: 148% !important;
  }
}


/* ===== V23 mobile-only home about image refinement ===== */
@media (max-width: 820px) {
  /* Turn the about image into a clean mobile editorial card instead of a wide desktop crop. */
  .about-hero__stage {
    min-height: auto !important;
    height: auto !important;
    padding: 16px 0 0 !important;
    background: linear-gradient(180deg,#f7e7c5 0%,#fff5df 34%,#f1ddb2 100%) !important;
  }

  .about-hero__backdrop {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% - 24px) !important;
    max-width: 560px !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .about-hero__backdrop img {
    display: block !important;
    width: 100% !important;
    height: clamp(280px, 56vw, 420px) !important;
    object-fit: cover !important;
    object-position: 36% 50% !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .about-hero__stage::before {
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: -1px !important;
    height: 74px !important;
    background: linear-gradient(to bottom, rgba(255,245,223,0) 0%, rgba(255,245,223,.78) 58%, #fff5df 100%) !important;
  }

  .about-hero__stage::after {
    display: none !important;
  }

  .about-hero__copy {
    min-height: auto !important;
    padding: 30px 22px 55px !important;
    text-align: left !important;
  }

  .about-hero__copy h2 {
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(34px, 10vw, 54px) !important;
    line-height: 0.97 !important;
  }

  .about-hero__paragraphs {
    max-width: none !important;
    margin: 22px 0 0 !important;
    text-align: left !important;
  }

  .about-hero__cta {
    margin: 28px 0 0 !important;
    width: min(320px, 100%) !important;
  }
}

@media (max-width: 430px) {
  .about-hero__backdrop {
    width: calc(100% - 20px) !important;
    border-radius: 24px !important;
  }

  .about-hero__backdrop img {
    height: 300px !important;
    object-position: 34% 50% !important;
  }

  .about-hero__copy {
    padding: 26px 20px 48px !important;
  }
}


/* ===== V24 mobile-only bienenprodukte stage refinement ===== */
@media (max-width: 640px) {
  body.products-discovery .collection-stage {
    padding: 28px 0 72px !important;
  }

  body.products-discovery .collection-stage .wrap {
    width: calc(100% - 24px) !important;
  }

  body.products-discovery .collection-stage .jar-stage {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin: 0 0 26px !important;
    padding: 6px 2px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.products-discovery .collection-stage .jar-stage::-webkit-scrollbar {
    display: none !important;
  }

  body.products-discovery .collection-stage .jar-stage a,
  body.products-discovery .collection-stage .jar-stage a:nth-child(2),
  body.products-discovery .collection-stage .jar-stage a:nth-child(3) {
    flex: 0 0 min(78vw, 290px) !important;
    width: min(78vw, 290px) !important;
    min-width: min(78vw, 290px) !important;
    max-width: min(78vw, 290px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 18px 14px 20px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(255,252,246,.95) 0%, rgba(251,241,216,.92) 100%) !important;
    box-shadow: 0 14px 34px rgba(127, 83, 15, 0.08) !important;
    scroll-snap-align: start !important;
    text-align: center !important;
    transform: none !important;
    justify-self: auto !important;
    grid-column: auto !important;
  }

  body.products-discovery .collection-stage .jar-stage img {
    height: 228px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 10px !important;
    filter: drop-shadow(0 16px 18px rgba(112,73,18,.10)) !important;
  }

  body.products-discovery .collection-stage .jar-stage h3 {
    margin-top: 4px !important;
    font-size: 24px !important;
    line-height: 1.02 !important;
  }

  body.products-discovery .collection-stage .jar-stage span {
    display: block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body.products-discovery .collection-stage .editorial-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 8px !important;
    text-align: center !important;
  }
}

@media (max-width: 430px) {
  body.products-discovery .discovery-hero .wrap {
    width: calc(100% - 26px) !important;
  }

  body.products-discovery .collection-stage .wrap {
    width: calc(100% - 18px) !important;
  }

  body.products-discovery .collection-stage .jar-stage {
    gap: 12px !important;
  }

  body.products-discovery .collection-stage .jar-stage a,
  body.products-discovery .collection-stage .jar-stage a:nth-child(2),
  body.products-discovery .collection-stage .jar-stage a:nth-child(3) {
    flex-basis: calc(100vw - 62px) !important;
    width: calc(100vw - 62px) !important;
    min-width: calc(100vw - 62px) !important;
    max-width: calc(100vw - 62px) !important;
    border-radius: 24px !important;
    padding: 16px 12px 18px !important;
  }

  body.products-discovery .collection-stage .jar-stage img {
    height: 218px !important;
  }

  body.products-discovery .collection-stage .jar-stage h3 {
    font-size: 22px !important;
  }
}


/* ===== V25 mobile-only home about simplification ===== */
@media (max-width: 820px) {
  body:not(.inner-site-page) .about-hero__stage {
    background: linear-gradient(180deg, #f7e7c5 0%, #fff5df 58%, #f5e6c4 100%) !important;
    border-radius: 0 0 30px 30px !important;
    overflow: hidden !important;
  }

  body:not(.inner-site-page) .about-hero__backdrop {
    display: none !important;
  }

  body:not(.inner-site-page) .about-hero__stage::before,
  body:not(.inner-site-page) .about-hero__stage::after {
    display: none !important;
    content: none !important;
  }

  body:not(.inner-site-page) .about-hero__copy {
    padding: 42px 20px 50px !important;
  }

  body:not(.inner-site-page) .about-hero__copy h2 {
    max-width: 340px !important;
  }

  body:not(.inner-site-page) .about-hero__paragraphs {
    margin-top: 20px !important;
  }

  body:not(.inner-site-page) .about-hero__cta {
    margin-top: 24px !important;
  }
}

@media (max-width: 430px) {
  body:not(.inner-site-page) .about-hero__copy {
    padding: 36px 18px 44px !important;
  }

  body:not(.inner-site-page) .about-hero__copy h2 {
    font-size: clamp(36px, 10.4vw, 43px) !important;
  }
}

/* ===== V26 mobile-only: Bienenprodukte swipe + newsletter sizing ===== */
@media (max-width: 640px) {
  body.products-discovery .collection-stage .jar-stage {
    justify-content: flex-start !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    scroll-padding-left: 14px !important;
    scroll-padding-right: 14px !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
  }
  body.products-discovery .collection-stage .jar-stage a:first-child {
    scroll-margin-left: 14px !important;
  }
  body.products-discovery .collection-stage .jar-stage a:last-child {
    scroll-margin-right: 14px !important;
  }
  .footerref-newsletter {
    width: calc(100% - 20px) !important;
    max-width: 520px !important;
    padding: 0 2px !important;
  }
  .footerref-signup {
    width: 100% !important;
    gap: 12px !important;
    margin-top: 4px !important;
  }
  .footerref-signup input {
    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 0 22px !important;
    border-radius: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .footerref-signup button {
    width: 100% !important;
    min-height: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
    font-size: 18px !important;
  }
}
@media (max-width: 430px) {
  body.products-discovery .collection-stage .jar-stage {
    padding-left: 10px !important;
    padding-right: 10px !important;
    scroll-padding-left: 10px !important;
    scroll-padding-right: 10px !important;
  }
  .footerref-newsletter {
    width: calc(100% - 12px) !important;
  }
  .footerref-signup input {
    min-height: 62px !important;
    height: 62px !important;
    font-size: 17px !important;
  }
  .footerref-signup button {
    min-height: 60px !important;
    height: 60px !important;
    font-size: 17px !important;
  }
}

/* V29 fix: product detail pages related products spacing on mobile */
@media (max-width: 820px){
  body.product-clean-v6 .pc-related-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
    overflow:visible !important;
    padding-bottom:0 !important;
  }
  body.product-clean-v6 .pc-related-item,
  body.product-clean-v6 .pc-related-item:first-child{
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    grid-row:auto !important;
    align-items:center !important;
    gap:18px !important;
    min-height:0 !important;
    height:auto !important;
    width:100% !important;
    flex:none !important;
    padding:8px 0 !important;
  }
  body.product-clean-v6 .pc-related-item img,
  body.product-clean-v6 .pc-related-item:first-child img{
    width:112px !important;
    height:142px !important;
    object-fit:contain !important;
  }
  body.product-clean-v6 .pc-related-item > div,
  body.product-clean-v6 .pc-related-item:first-child > div{
    min-width:0 !important;
    align-self:center !important;
  }
}

@media (max-width: 480px){
  body.product-clean-v6 .pc-related-grid{gap:18px !important;}
  body.product-clean-v6 .pc-related-item,
  body.product-clean-v6 .pc-related-item:first-child{
    grid-template-columns:98px minmax(0,1fr) !important;
    gap:16px !important;
  }
  body.product-clean-v6 .pc-related-item img,
  body.product-clean-v6 .pc-related-item:first-child img{
    width:98px !important;
    height:132px !important;
  }
}

/* V30 fix: product-detail mobile section-to-footer fade */
@media (max-width: 820px){
  body.product-clean-v6.footer-soft-v6 .pc-related{
    background:linear-gradient(to bottom,
      #f7e7c7 0%,
      #f7e7c7 calc(100% - 150px),
      rgba(249,236,211,.92) calc(100% - 96px),
      rgba(255,246,230,.98) 100%) !important;
  }

  body.product-clean-v6.footer-soft-v6 .footer-boundary-fade{
    height:118px !important;
    margin-top:-118px !important;
    background:linear-gradient(to bottom,
      rgba(247,231,199,0) 0%,
      rgba(247,231,199,.30) 18%,
      rgba(249,236,211,.62) 45%,
      rgba(255,246,230,.88) 76%,
      #fff6e6 100%) !important;
  }

  body.product-clean-v6.footer-soft-v6 .footerref-page::before{
    height:42px !important;
    background:linear-gradient(to bottom,
      #fff6e6 0%,
      rgba(255,246,230,.76) 48%,
      rgba(255,246,230,0) 100%) !important;
  }
}

@media (max-width: 480px){
  body.product-clean-v6.footer-soft-v6 .pc-related{
    background:linear-gradient(to bottom,
      #f7e7c7 0%,
      #f7e7c7 calc(100% - 130px),
      rgba(249,236,211,.94) calc(100% - 82px),
      #fff6e6 100%) !important;
  }
  body.product-clean-v6.footer-soft-v6 .footer-boundary-fade{
    height:104px !important;
    margin-top:-104px !important;
  }
}