.miel-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  color: white;
  background: linear-gradient(#122317a6, transparent)
}

.miel-header .header nav>a,
.miel-header .header nav .univers-toggle,
.miel-header .social-link,
.miel-header .search-toggle,
.miel-header .menu-toggle {
  color: #fff
}

.miel-header .social-link {
  border-color: #ffffffa6
}

.miel-page {
  background: #fff;
  color: #203322
}

.miel-wrap {
  width: calc(100% - 100px);
  max-width: 1200px;
  margin: auto
}

.miel-hero {
  min-height: 610px;
  display: flex;
  align-items: center;
  padding: 155px 0 80px;
  background: #253a26 url('../images/miel/hero.png') center/cover;
  text-align: center;
  color: #fff
}

.miel-hero h1 img {
  width: 280px;
  max-width: 75%;
  height: auto
}

.miel-hero p {
  max-width: 720px;
  margin: 24px auto 0;
  font-size: 15px;
  line-height: 1.9
}

.miel-button {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  border: 2px solid #fff;
  background: white;
  border-radius: 30px;
  color: #23651c;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 25px
}

.miel-button:hover {
  background: #e6f4dd;
  color: #20451b
}

.miel-spread {
  background: #3e4a3e url('../images/miel/honey.png') center/cover;
  padding: 50px 0;
  color: #fff
}

.miel-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 65px
}

.miel-spread h2 {
  font-size: 38px;
  margin-bottom: 20px
}

.miel-spread p {
  font-size: 14px;
  line-height: 1.9;
  max-width: 540px
}

.miel-spread img {
  width: 100%;
  height: 380px;
  object-fit: contain
}

.miel-outline {
  background: transparent;
  color: #fff
}

.miel-products {
  padding: 55px 0 70px;
  background: radial-gradient(ellipse at 20% 70%, #dcebd2, transparent 60%), linear-gradient(130deg, #f4f9ee, #e3efd8);
  scroll-margin-top: 20px
}

.miel-products>.miel-wrap>h2 {
  text-align: center;
  font-size: 40px;
  margin: 8px 0 15px
}

.miel-eyebrow {
  color: #c51d25;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  display: block
}

.miel-rule {
  display: block;
  width: 65px;
  height: 2px;
  background: #488033;
  margin: 22px auto
}

.miel-products .miel-split {
  margin-top: 28px
}

.miel-details h3 {
  font-size: 29px;
  margin-bottom: 20px
}

.miel-details p {
  font-size: 16px;
  line-height: 1.8
}

.miel-details ul {
  padding: 0;
  list-style: none;
  margin-top: 25px
}

.miel-details li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 13px 0;
  font-size: 16px
}

.miel-details li:before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: #2e7223;
  color: #fff;
  border-radius: 50%
}

.miel-page .asta-flip {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  background: transparent;
  padding: 0;
  perspective: 1200px;
  text-align: center;
  cursor: pointer
}

.miel-page .asta-flip-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .65s
}

.miel-page .asta-flip.is-flipped .asta-flip-inner {
  transform: rotateY(180deg)
}

.miel-page .asta-flip-front,
.miel-page .asta-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden
}

.miel-page .asta-flip-front img {
  width: 100%;
  height: 365px;
  object-fit: contain
}

.miel-discover {
  font-size: 12px;
  color: #2e7223;
  display: flex;
  gap: 25px;
  margin-top: 15px
}

.miel-page .asta-flip-back {
  transform: rotateY(180deg);
  padding: 35px;
  background: linear-gradient(140deg, #38662d, #163116);
  color: #fff
}

.miel-page .asta-flip-back .miel-eyebrow {
  color: #d5ecc9;
  font-size: 12px;
  letter-spacing: 2px
}

.miel-page .asta-flip-back strong {
  font-size: 30px;
  margin-top: 22px
}

.miel-description {
  font-size: 15px;
  line-height: 1.85
}

.miel-return {
  font-size: 11px;
  margin-top: 25px;
  color: #d5ecc9
}

.miel-page :focus-visible {
  outline: 3px solid #23651c;
  outline-offset: 5px
}

@media(max-width:950px) {
  .miel-wrap {
    width: calc(100% - 48px)
  }

  .miel-split {
    gap: 30px
  }

  .miel-spread h2 {
    font-size: 30px
  }

  .miel-page .asta-flip-back {
    padding: 25px
  }

  .miel-description {
    font-size: 14px
  }
}

@media(max-width:600px) {
  .miel-wrap {
    width: calc(100% - 36px)
  }

  .miel-hero {
    min-height: 580px;
    padding: 140px 0 60px
  }

  .miel-hero h1 img {
    width: 245px
  }

  .miel-hero p {
    font-size: 14px
  }

  .miel-split {
    grid-template-columns: 1fr;
    gap: 25px
  }

  .miel-spread {
    padding: 40px 0
  }

  .miel-spread img {
    height: 290px
  }

  .miel-products {
    padding: 40px 0 50px
  }

  .miel-products>.miel-wrap>h2 {
    font-size: 34px
  }

  .miel-page .asta-flip {
    height: 425px
  }

  .miel-page .asta-flip-front img {
    height: 340px
  }

  .miel-details {
    padding: 10px
  }

  .miel-details h3 {
    font-size: 26px
  }
}

@media(prefers-reduced-motion:reduce) {
  .miel-page .asta-flip-inner {
    transition: none
  }
}

.miel-hero {
  text-align: left;
  min-height: 680px
}

.miel-hero h1 img {
  width: 155px
}

.miel-hero p {
  max-width: 470px;
  margin: 20px 0 0
}

.miel-hero .miel-button {
  background: #287617;
  color: #fff
}

.miel-hero .miel-button:hover {
  background: #1b5411
}

.miel-spread {
  min-height: 490px;
  display: flex;
  align-items: center
}

.miel-spread .miel-copy {
  max-width: 550px
}

.miel-spread .miel-eyebrow {
  font-size: 28px;
  text-align: left;
  color: #fff;
  margin-bottom: 10px
}

.miel-page .asta-flip-front img {
  height: 345px
}

.miel-range {
  width: 100%;
  height: 320px;
  object-fit: contain;
  margin-top: 35px
}

.miel-details {
  padding: 15px 0
}

.miel-products .miel-split {
  max-width: 1000px;
  margin: 28px auto 0
}

@media(max-width:600px) {
  .miel-hero {
    display: block;
    min-height: 0;
    padding: 96px 0 0;
    background: #203b23
  }

  .miel-hero:before {
    content: '';
    display: block;
    aspect-ratio: 1348/795;
    background: url('../images/miel/hero.png') center/cover
  }

  .miel-hero>.miel-wrap {
    padding: 28px 0 35px
  }

  .miel-hero h1 img {
    width: 130px
  }

  .miel-spread {
    min-height: 420px
  }

  .miel-range {
    height: 260px
  }

  .miel-details {
    padding: 0 10px
  }

  .miel-page .asta-flip-front img {
    height: 330px
  }
}

.miel-hero {
  background-image: linear-gradient(90deg, #0005, transparent 65%), url('../images/miel/hero.png')
}

.miel-hero h1 {
  font-size: 48px;
  line-height: 1.15;
      color: #981f20;
}

.miel-spread {
  /* background-image: linear-gradient(90deg, #0008, #0002), url('../images/miel/honey.png') */

  background-image: linear-gradient(90deg, #241a1354, #241a1300), url(../images/miel/honey.png);
}



.miel-page .asta-flip-front img {
  height: 345px;
  width: auto;
  max-width: 90%
}

@media(max-width:600px) {
  .miel-hero {
    background-image: none
  }

  .miel-hero h1 {
    font-size: 36px
  }

  .miel-page .asta-flip-front img {
    height: 320px
  }
}

/* Product cutout beside the description banner. */
.miel-banner-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 55px
}

.miel-spread .miel-banner-product {
  display: block;
  width: 100%;
  height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px #0003)
}

@media(max-width:800px) {
  .miel-banner-layout {
    gap: 24px;
    grid-template-columns: 1.2fr 1fr
  }

  .miel-spread .miel-banner-product {
    height: 340px
  }
}

@media(max-width:600px) {
  .miel-banner-layout {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .miel-spread .miel-banner-product {
    height: 310px;
    max-width: 100%;
    margin: auto
  }
}

.miel-hero .miel-button {
  background: #a71720;
  border-color: #ffda78
}

.miel-hero .miel-button:hover {
  background: #80131a
}

.miel-spread {
  background-image: linear-gradient(90deg, #241a13a6, #241a1322), url('../images/miel/honey.png')
}

.miel-spread h2 {
  color: #f3ae1f;
}

.miel-products {
  background: linear-gradient(125deg, #f1fbff, #e5f3f9)
}

.miel-rule {
  background: #c79736
}

.miel-details li:before {
  background: #a57824
}

.miel-page .asta-flip-back {
  background: linear-gradient(135deg, #77501d, #342311)
}

.miel-page .asta-flip-back .miel-eyebrow,
.miel-return {
  color: #ffe3a3
}

.miel-page .asta-flip-front img {
  height: 350px
}

.miel-video {
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #251709
}

.miel-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.miel-page :focus-visible {
  outline-color: #a57824
}

@media(max-width:600px) {
  .miel-page .asta-flip-front img {
    height: 325px
  }

  .miel-hero {
    background-color: #3d351b
  }
}

/* Preserve the full video frame on phones and tablets. */
@media (max-width: 950px) {
  .miel-video {
    height: auto;
  }

  .miel-video video {
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }
}