/* Wenrex Cocoa homepage mobile polish — desktop layout remains untouched. */
@media (max-width: 991.98px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: 0 !important; }

  /* Header / navigation */
  .navbar { padding-left: 16px !important; padding-right: 16px !important; min-height: 72px; }
  .navbar-brand { margin-right: 8px; min-width: 0; }
  .navbar-brand img { max-height: 50px !important; width: auto !important; max-width: 178px; object-fit: contain; }
  .navbar-toggler { border: 0; box-shadow: none !important; padding: 7px 6px; }
  .navbar-collapse { background: #fff; max-height: calc(100vh - 76px); overflow-y: auto; }
  .navbar .navbar-nav { padding: 12px 0 16px !important; }
  .navbar .navbar-nav > .nav-item > .nav-link,
  .navbar .navbar-nav > .nav-link { padding: 11px 8px !important; margin: 0 !important; font-size: 1rem; }
  .navbar .dropdown-menu { margin: 0 0 8px !important; padding: 4px 0 4px 14px !important; background: #f8faf8 !important; border-radius: 12px; }

  /* Hero */
  #header-carousel { margin-bottom: 0 !important; }
  #header-carousel .carousel-item { height: 410px !important; min-height: 410px !important; }
  #header-carousel video { min-width: 100%; min-height: 100%; object-fit: cover !important; }
  #header-carousel .carousel-caption { padding: 0 18px !important; }
  #header-carousel .carousel-caption .container { margin-top: 0 !important; padding-left: 0; padding-right: 0; }
  #header-carousel .carousel-caption h1 { font-size: clamp(2.35rem, 10vw, 3.4rem) !important; line-height: 1.05 !important; margin-bottom: 14px !important; }
  #header-carousel .carousel-caption p { font-size: .98rem !important; }

  /* Premium journey: mobile becomes a clean visual story, not a desktop sticky layout squeezed into a phone. */
  .journey-experience { padding-top: 46px !important; overflow: hidden !important; }
  .journey-experience-intro { padding: 0 18px 4px !important; }
  .journey-intro-mark { padding: 7px 12px; margin-bottom: 14px; font-size: .68rem; letter-spacing: .11em; }
  .journey-intro-mark::before { width: 18px; }
  .journey-experience-intro h1 { max-width: 355px; margin: 0 auto 12px; font-size: clamp(2rem, 8.7vw, 2.65rem) !important; line-height: 1.08; letter-spacing: -.025em; }
  .journey-experience-intro p { max-width: 350px; font-size: .96rem; line-height: 1.65; }

  .journey-story-track { height: auto !important; min-height: 0 !important; margin-top: 10px; }
  .journey-sticky-canvas { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; }
  .journey-sticky-canvas::before { width: 410px; height: 410px; opacity: .72; }
  .journey-sticky-canvas::after { display: none; }
  .journey-stage-grid { display: block !important; padding: 0 14px; }
  .journey-story-copy, .journey-stage-nav, .journey-progress-line, .journey-scroll-cue { display: none !important; }

  .journey-centerpiece {
    width: min(100%, 390px) !important;
    height: 330px !important;
    min-height: 0 !important;
    margin: 0 auto 2px !important;
    overflow: hidden;
  }
  .journey-premium-bean { width: 100%; height: 100%; overflow: hidden !important; }
  .journey-premium-bean .bean-particle-layer { overflow: hidden !important; }
  .journey-premium-image { max-width: 91% !important; max-height: 91% !important; }
  .journey-orbit-one { width: 80%; opacity: .75; }
  .journey-orbit-two { width: 64%; opacity: .38; }
  .journey-bean-shadow { width: 48%; bottom: 7%; }

  .journey-mobile-story {
    display: grid !important;
    gap: 14px;
    padding: 8px 16px 48px !important;
    max-width: 560px;
    margin: 0 auto;
  }
  .journey-mobile-story article {
    position: relative;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start;
    padding: 20px 18px !important;
    border: 1px solid rgba(42,93,82,.10) !important;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 32px rgba(48,66,52,.055);
    backdrop-filter: blur(8px);
  }
  .journey-mobile-story article::after {
    content: "";
    position: absolute;
    left: 40px;
    bottom: -15px;
    width: 1px;
    height: 15px;
    background: rgba(42,93,82,.18);
  }
  .journey-mobile-story article:last-child::after { display: none; }
  .journey-mobile-story article > span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(42,93,82,.14);
    font-size: 1rem !important;
    line-height: 1;
    color: #4f775d !important;
    box-shadow: 0 5px 16px rgba(42,93,82,.07);
  }
  .journey-mobile-story small { margin-bottom: 5px !important; font-size: .67rem; letter-spacing: .105em !important; }
  .journey-mobile-story h3 { margin-bottom: 7px !important; font-size: clamp(1.35rem, 6vw, 1.65rem) !important; line-height: 1.22; }
  .journey-mobile-story p { font-size: .93rem; line-height: 1.68 !important; color: #6d746d; }

  /* About section: make the left gallery a true 2x2 grid on phones/tablets. */
  .about-green-section { padding-top: 38px !important; padding-bottom: 42px !important; overflow: hidden; }
  .about-green-section > .container-xxl,
  .about-green-section > .container-xxl > .container { padding-left: 14px; padding-right: 14px; }
  .about-green-section .row.g-5 { --bs-gutter-y: 2rem; }
  .about-green-section .col-lg-6:first-child .row.g-2 > .col-6 { aspect-ratio: 1 / 1; min-height: 0; }
  .about-green-section .col-lg-6:first-child .row.g-2 > .col-6 > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .about-green-section .cocoa-animation-origin { position: absolute !important; inset: 0 !important; overflow: hidden !important; }
  .about-green-section .cocoa-animation-origin .hero-bean-scene { overflow: hidden !important; }
  .about-green-section .cocoa-animation-origin .bean-particle-layer { overflow: hidden !important; }
  .about-green-section .cocoa-static-bean { max-width: 94% !important; max-height: 94% !important; }
  .about-green-section .col-lg-6:last-child { padding-top: 4px; }
  .about-green-section .section-title { margin-bottom: 12px; font-size: .9rem; }
  .about-green-section h1 { font-size: clamp(2rem, 7.8vw, 2.7rem); line-height: 1.1; margin-bottom: 18px !important; }
  .about-green-section p { font-size: .97rem; line-height: 1.75; }
  .about-green-section .row.g-5.pt-2.mb-5 { --bs-gutter-y: 1.75rem; margin-bottom: 2rem !important; }
  .about-green-section .row.g-5.pt-2.mb-5 img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 14px !important; }
  .about-green-section .btn { width: 100%; max-width: 310px; text-align: center; padding: 13px 24px !important; }

  /* General homepage section spacing */
  .container-xxl.py-5, .container-fluid.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .back-to-top { right: 16px; bottom: 16px; }
}

@media (max-width: 575.98px) {
  .navbar { padding-left: 12px !important; padding-right: 12px !important; min-height: 66px; }
  .navbar-brand img { max-height: 43px !important; max-width: 150px; }

  #header-carousel .carousel-item { height: 330px !important; min-height: 330px !important; }
  #header-carousel .carousel-caption { padding: 0 14px !important; }
  #header-carousel .carousel-caption h1 { font-size: clamp(2.15rem, 11vw, 2.85rem) !important; }
  #header-carousel .carousel-caption p { font-size: .9rem !important; }

  .journey-experience { padding-top: 38px !important; }
  .journey-experience-intro { padding-left: 15px !important; padding-right: 15px !important; }
  .journey-experience-intro h1 { max-width: 330px; font-size: clamp(1.9rem, 9.4vw, 2.35rem) !important; }
  .journey-centerpiece { width: min(100%, 340px) !important; height: 275px !important; }
  .journey-premium-image { max-width: 88% !important; max-height: 88% !important; }
  .journey-orbit-two { display: none; }
  .journey-mobile-story { padding-left: 13px !important; padding-right: 13px !important; gap: 12px; }
  .journey-mobile-story article { grid-template-columns: 40px minmax(0,1fr) !important; gap: 12px !important; padding: 17px 14px !important; border-radius: 16px; }
  .journey-mobile-story article::after { left: 34px; bottom: -13px; height: 13px; }
  .journey-mobile-story article > span { width: 36px; height: 36px; font-size: .9rem !important; }
  .journey-mobile-story h3 { font-size: 1.35rem !important; }
  .journey-mobile-story p { font-size: .9rem; }

  .about-green-section > .container-xxl,
  .about-green-section > .container-xxl > .container { padding-left: 10px; padding-right: 10px; }
  .about-green-section .col-lg-6:first-child .row.g-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  .about-green-section h1 { font-size: 2rem; }
  .about-green-section .row.g-5.pt-2.mb-5 .col-sm-6 { padding-top: 2px; }

  .footer .container { padding-left: 18px; padding-right: 18px; }
  .copyright { padding-bottom: 26px !important; }
}

/* About Wenrex visual refresh: one large animated cocoa bean, no image collage. */
.about-green-section .about-bean-stage {
  position: relative;
  width: 100%;
  min-height: 650px;
  height: 100%;
  overflow: visible;
}
.about-green-section .about-bean-stage .cocoa-animation-origin {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
.about-green-section .about-bean-stage .hero-bean-scene,
.about-green-section .about-bean-stage .bean-particle-layer {
  overflow: visible !important;
}
.about-green-section .about-bean-stage .cocoa-static-bean {
  max-width: 92% !important;
  max-height: 92% !important;
}
.about-green-section .row.g-5.align-items-end {
  align-items: center !important;
}

@media (max-width: 1199.98px) {
  .about-green-section .about-bean-stage { min-height: 590px; }
  .about-green-section .about-bean-stage .cocoa-static-bean {
    max-width: 94% !important;
    max-height: 94% !important;
  }
}

@media (max-width: 991.98px) {
  .about-green-section .about-bean-stage {
    min-height: 500px;
    max-width: 680px;
    margin: 0 auto;
  }
  .about-green-section .about-bean-stage .cocoa-animation-origin,
  .about-green-section .about-bean-stage .hero-bean-scene,
  .about-green-section .about-bean-stage .bean-particle-layer {
    overflow: hidden !important;
  }
}

@media (max-width: 575.98px) {
  .about-green-section .about-bean-stage {
    min-height: 390px;
    margin-bottom: 4px;
  }
  .about-green-section .about-bean-stage .cocoa-static-bean {
    max-width: 96% !important;
    max-height: 96% !important;
  }
}

/* Wenrex About: premium three-image cocoa collage */
.about-green-section .wenrex-about-gallery {
  width: min(100%, 690px);
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  grid-template-rows: 370px 275px;
  gap: 14px;
  margin: 0 auto;
  align-items: stretch;
}
.about-green-section .wenrex-about-card {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,.35);
  box-shadow: 0 13px 34px rgba(39,70,55,.15);
  border: 1px solid rgba(255,255,255,.45);
}
.about-green-section .wenrex-about-card-pods {
  grid-column: 1;
  grid-row: 1;
}
.about-green-section .wenrex-about-card-sorting {
  grid-column: 2;
  grid-row: 1;
  margin-top: 38px;
}
.about-green-section .wenrex-about-card-products {
  grid-column: 1 / -1;
  grid-row: 2;
}
.about-green-section .wenrex-about-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22,.61,.36,1), filter .45s ease;
}
.about-green-section .wenrex-about-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}

@media (max-width: 1199.98px) {
  .about-green-section .wenrex-about-gallery {
    grid-template-rows: 330px 240px;
  }
}

@media (max-width: 991.98px) {
  .about-green-section .wenrex-about-gallery {
    max-width: 700px;
    grid-template-rows: 310px 235px;
  }
  .about-green-section .wenrex-about-card-sorting { margin-top: 28px; }
}

@media (max-width: 575.98px) {
  .about-green-section .wenrex-about-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 210px 165px;
    gap: 8px;
  }
  .about-green-section .wenrex-about-card {
    border-radius: 16px;
    box-shadow: 0 9px 24px rgba(39,70,55,.13);
  }
  .about-green-section .wenrex-about-card-sorting { margin-top: 18px; }
}