/* =========================================================
   GLOWIE ABOUT 2.2.0
   TRUE FULL WIDTH + SECTION-BASED SCROLL CHOREOGRAPHY
   ========================================================= */

.elementor-widget-glowie_about,
.elementor-widget-glowie_about > .elementor-widget-container{
  width:100% !important;
  max-width:none !important;
}

.elementor-widget-glowie_about .gae-page{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

.gae-page{
  --green:#214F3C;
  --green-2:#355F4A;
  --paper:#FAF7F0;
  --cream:#F4E7D2;
  --gold:#E7D4B4;
  --ink:#153A2C;
  --muted:#6B645C;
  position:relative;
  width:100%;
  overflow-x:clip;
  overflow-y:visible;
  background:
    radial-gradient(circle at 12% 8%, rgba(231,212,180,.30), transparent 26%),
    radial-gradient(circle at 88% 22%, rgba(53,95,74,.10), transparent 24%),
    linear-gradient(180deg,#FBF8F2 0%,#FAF7F0 48%,#F7F0E6 100%);
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
}

.gae-page *{box-sizing:border-box}
.gae-page img{display:block;max-width:100%}
.gae-wrap{width:100%;padding-left:clamp(18px,4.8vw,82px);padding-right:clamp(18px,4.8vw,82px)}

.gae-panel{
  position:relative;
  width:100%;
  min-height:86vh;
  isolation:isolate;
}

.gae-panel::before,
.gae-panel::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  filter:blur(0);
}

.gae-kicker{
  display:block;
  font-size:12px;
  font-weight:900;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--green-2);
  margin-bottom:14px;
}

.gae-hero-title,
.gae-story-title,
.gae-philosophy-title,
.gae-ingredients-title,
.gae-final-title{
  font-family:Prata,Georgia,serif;
  font-weight:400;
  color:var(--ink);
  text-wrap:balance;
}

.gae-placeholder{
  width:100%;
  height:100%;
  min-height:220px;
  display:grid;
  place-items:center;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(244,231,210,.92),rgba(250,247,240,.72));
  color:#9A8C7F;
  font-size:13px;
}

.gae-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:15px 24px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--green),var(--green-2));
  color:#fff;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 14px 34px rgba(33,79,60,.14);
  transition:transform .25s ease,box-shadow .25s ease;
}
.gae-btn span{transition:transform .25s ease}
.gae-btn:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(33,79,60,.20)}
.gae-btn:hover span{transform:translate(4px,-4px) rotate(6deg)}

/* ---------- HERO ---------- */
.gae-hero{
  min-height:calc(100vh - 96px);
  display:flex;
  align-items:center;
  padding:28px 0 72px;
}
.gae-hero::before{
  width:420px;height:420px;border-radius:50%;
  left:-160px;top:70px;
  background:radial-gradient(circle,rgba(231,212,180,.34),transparent 70%);
}
.gae-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:44px;
  align-items:center;
}
.gae-hero-copy{padding-left:2vw;max-width:760px}
.gae-hero-title{
  font-size:clamp(58px,7vw,116px);
  line-height:.92;
  letter-spacing:-.055em;
  margin:0 0 24px;
}
.gae-hero-text{
  max-width:600px;
  margin:0 0 28px;
  font-size:18px;
  line-height:1.72;
  color:var(--muted);
}
.gae-hero-art{
  position:relative;
  min-height:650px;
  border-radius:38px;
  overflow:hidden;
  background:linear-gradient(145deg,#E9DCC8,#FFF9F0);
  box-shadow:0 30px 80px rgba(54,42,27,.10);
}
.gae-hero-art img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.gae-glow{
  position:absolute;z-index:2;
  width:70%;aspect-ratio:1;
  right:-18%;top:-22%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.72),rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.gae-botanical{
  position:absolute;z-index:3;pointer-events:none;
  background:rgba(33,79,60,.13);
  border-radius:100% 0 100% 0;
  mix-blend-mode:multiply;
}
.gae-botanical-a{width:150px;height:300px;right:4%;top:4%;transform:rotate(-20deg)}
.gae-botanical-b{width:118px;height:238px;right:22%;top:12%;transform:rotate(18deg)}

/* ---------- STORY ---------- */
.gae-story{
  padding:105px 0 130px;
  display:flex;
  align-items:center;
}
.gae-story::after{
  width:300px;height:500px;
  right:-100px;top:14%;
  border-radius:55% 45% 58% 42%;
  background:linear-gradient(180deg,rgba(53,95,74,.10),rgba(231,212,180,.12));
  transform:rotate(18deg);
}
.gae-story-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:72px;
  align-items:center;
}
.gae-story-images{position:relative;min-height:690px}
.gae-story-img{
  position:absolute;
  margin:0;
  overflow:hidden;
  border-radius:34px;
  background:#EFE5D6;
  box-shadow:0 34px 85px rgba(51,39,25,.12);
}
.gae-story-img img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.gae-story-img-a{left:0;top:0;width:64%;height:77%;z-index:2}
.gae-story-img-b{right:2%;bottom:0;width:55%;height:63%;z-index:1}
.gae-story-title{
  font-size:clamp(50px,5.4vw,86px);
  line-height:.98;
  letter-spacing:-.045em;
  margin:0 0 24px;
}
.gae-story-text{
  max-width:570px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.76;
}

/* ---------- PHILOSOPHY ---------- */
.gae-philosophy{
  min-height:112vh;
  padding:88px 0 120px;
  background:
    radial-gradient(circle at 16% 18%,rgba(255,255,255,.08),transparent 20%),
    radial-gradient(circle at 88% 72%,rgba(231,212,180,.10),transparent 26%),
    linear-gradient(135deg,#194231 0%,#285744 100%);
  color:#fff;
}
.gae-philosophy::before{
  left:5%;bottom:4%;
  width:260px;height:260px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
}
.gae-philosophy .gae-kicker,
.gae-philosophy-title{color:#fff!important}
.gae-philosophy-head{
  text-align:center;
  max-width:980px;
  margin:0 auto 54px;
}
.gae-philosophy-title{
  font-size:clamp(52px,6vw,94px);
  line-height:.94;
  letter-spacing:-.05em;
  margin:0;
}
.gae-philosophy-stage{
  position:relative;
  min-height:570px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1500px;
}
.gae-ph-card{
  position:absolute;
  width:min(390px,29vw);
  min-height:350px;
  padding:34px;
  border-radius:30px;
  background:linear-gradient(155deg,#FFFDF8,#F7EDDD);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 30px 70px rgba(0,0,0,.18);
  transform-origin:center;
}
.gae-ph-icon{
  width:72px;height:72px;
  display:grid;place-items:center;
  margin-bottom:28px;
  border-radius:50%;
  background:linear-gradient(145deg,#F1E1C6,#FFF9EE);
  box-shadow:inset 0 0 0 1px rgba(33,79,60,.07);
}
.gae-ph-icon img{width:38px;height:38px;object-fit:contain}
.gae-ph-number{font-size:11px;letter-spacing:.16em;color:#948475;margin-bottom:10px}
.gae-ph-card h3{margin:0 0 14px;font:400 30px/1.08 Prata,Georgia,serif}
.gae-ph-card p{margin:0;color:#6E665E;font-size:15px;line-height:1.66}

/* ---------- INGREDIENTS ---------- */
.gae-ingredients{
  min-height:112vh;
  padding:90px 0 124px;
  background:
    radial-gradient(circle at 50% 0%,rgba(231,212,180,.26),transparent 38%),
    linear-gradient(180deg,#FBF8F2 0%,#F4E8D6 100%);
}
.gae-ingredients-head{
  text-align:center;
  max-width:980px;
  margin:0 auto 56px;
}
.gae-ingredients-title{
  font-size:clamp(52px,6vw,94px);
  line-height:.94;
  letter-spacing:-.05em;
  margin:0 0 18px;
}
.gae-ingredients-text{margin:0;color:var(--muted);font-size:17px}
.gae-ingredient-stage{
  position:relative;
  min-height:620px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1500px;
}
.gae-ing-card{
  position:absolute;
  width:min(320px,22vw);
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  box-shadow:0 30px 70px rgba(58,45,28,.13);
  border:1px solid rgba(33,79,60,.06);
  transform-origin:center;
}
.gae-ing-media{
  height:320px;
  overflow:hidden;
  background:#EDE2D1;
}
.gae-ing-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease;
}
.gae-ing-card:hover .gae-ing-media img{transform:scale(1.055)}
.gae-ing-copy{padding:20px 22px 24px}
.gae-ing-copy>span{font-size:10px;letter-spacing:.16em;color:#A08D7B}
.gae-ing-copy h3{margin:7px 0 8px;font:400 26px/1.08 Prata,Georgia,serif}
.gae-ing-copy p{margin:0;color:#726A62;font-size:13px;line-height:1.56}

/* ---------- FINAL ---------- */
.gae-final{
  min-height:92vh;
  padding:110px 0 80px;
  display:flex;
  align-items:center;
}
.gae-final::after{
  right:3%;bottom:4%;
  width:240px;height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(53,95,74,.10),transparent 68%);
}
.gae-final-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:64px;
  align-items:center;
}
.gae-final-image{
  min-height:600px;
  border-radius:36px;
  overflow:hidden;
  background:#EADDC7;
  box-shadow:0 30px 80px rgba(54,42,27,.10);
}
.gae-final-image img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.gae-final-title{
  font-size:clamp(52px,6vw,94px);
  line-height:.95;
  letter-spacing:-.05em;
  margin:0 0 22px;
}
.gae-final-text{
  max-width:570px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.76;
}

/* ---------- EDITOR CLICK-TO-EDIT ---------- */
.elementor-editor-active .elementor-widget-glowie_about [data-gae-edit]{cursor:pointer}
.elementor-editor-active .elementor-widget-glowie_about [data-gae-edit]:hover{
  outline:1px dashed rgba(183,79,255,.85);
  outline-offset:4px;
}

/* ---------- MOBILE ---------- */
@media(max-width:767px){
  .gae-wrap{padding-left:12px;padding-right:12px}
  .gae-panel{min-height:auto}
  .gae-hero{padding:16px 0 58px}
  .gae-hero-grid,.gae-story-grid,.gae-final-grid{grid-template-columns:1fr;gap:24px}
  .gae-hero-art{order:1;min-height:0;aspect-ratio:4/5;border-radius:26px}
  .gae-hero-copy{order:2;padding:0 4px}
  .gae-hero-title{font-size:52px}
  .gae-hero-text{font-size:15px}
  .gae-story{padding:68px 0}
  .gae-story-images{min-height:450px}
  .gae-story-img-a{width:70%;height:72%}
  .gae-story-img-b{width:60%;height:59%}
  .gae-philosophy{padding:64px 0 76px}
  .gae-philosophy-stage{display:grid;grid-template-columns:1fr;gap:14px;min-height:auto}
  .gae-ph-card{position:relative;width:100%;min-height:auto}
  .gae-ingredients{padding:70px 0}
  .gae-ingredient-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:auto}
  .gae-ing-card{position:relative;width:100%}
  .gae-ing-media{height:180px}
  .gae-final{padding:72px 0 40px}
  .gae-final-image{min-height:0;aspect-ratio:4/3}
}




/* =========================================================
   v2.5.0 — REAL STICKY LOCK WITHOUT EMPTY GIANT HEIGHT
   ========================================================= */
@media(min-width:768px){

  /* Enough scroll distance for the animation, but not absurdly tall. */
  .gae-philosophy,
  .gae-ingredients{
    min-height:175vh !important;
    padding:0 !important;
    overflow:visible !important;
  }

  /* THIS is the real locked viewport. */
  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    position:sticky !important;
    top:86px !important;
    height:calc(100vh - 86px) !important;
    min-height:620px !important;
    padding-top:30px !important;
    padding-bottom:30px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow:visible !important;
    z-index:3;
  }

  .gae-philosophy-head,
  .gae-ingredients-head{
    flex:0 0 auto;
    margin-bottom:22px !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    flex:1 1 auto;
    min-height:390px !important;
    max-height:540px !important;
    overflow:visible !important;
  }

  /* Make sure no Elementor wrapper breaks sticky. */
  .elementor-widget-glowie_about,
  .elementor-widget-glowie_about > .elementor-widget-container,
  .elementor-widget-glowie_about .gae-page{
    overflow-y:visible !important;
  }
}


/* =========================================================
   v2.6.0 — NO FAKE SECTION HEIGHT
   Every animated section keeps its natural visual height.
   JS temporarily locks the user's scroll INSIDE the section
   until that section animation fully opens/closes.
   ========================================================= */

@media(min-width:768px){
  .gae-hero,
  .gae-story,
  .gae-philosophy,
  .gae-ingredients,
  .gae-final{
    min-height:auto !important;
    height:auto !important;
    overflow:visible !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    padding:88px 0 110px !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    display:block !important;
    overflow:visible !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    min-height:560px !important;
    max-height:none !important;
  }

  /* Visual cue only while the section is consuming scroll. */
  .gae-panel.gae-scroll-locked{
    z-index:20;
  }
}

/* Smooth movement while progress is updated by wheel/touch */
.gae-ph-card,
.gae-ing-card,
.gae-story-img,
.gae-story-copy,
.gae-final-image,
.gae-final-copy,
.gae-hero-copy > *,
.gae-hero-art{
  will-change:transform,opacity;
}


/* =========================================================
   v2.7.0 FINAL OVERRIDES — LIGHTWEIGHT NATIVE SCROLL
   ========================================================= */
.elementor-widget-glowie_about,
.elementor-widget-glowie_about > .elementor-widget-container,
.elementor-widget-glowie_about .gae-page{
  overflow-y:visible !important;
}

@media(min-width:768px){
  .gae-hero,
  .gae-story,
  .gae-philosophy,
  .gae-ingredients,
  .gae-final{
    min-height:auto !important;
    height:auto !important;
    overflow:visible !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    padding:88px 0 108px !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    display:block !important;
    overflow:visible !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    min-height:560px !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

.gae-ph-card,
.gae-ing-card,
.gae-story-img,
.gae-story-copy,
.gae-final-image,
.gae-final-copy,
.gae-hero-art,
.gae-hero-eyebrow,
.gae-hero-title,
.gae-hero-text,
.gae-btn{
  will-change:transform,opacity;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}


/* =========================================================
   v2.8.0 — PROFESSIONAL LIGHT LOCK + VIVID VISUAL SYSTEM
   ========================================================= */

.gae-page{
  --green:#0F4A35;
  --green-2:#1F6A4A;
  --green-3:#2B7A57;
  --ink:#123D2D;
  --muted:#4F5C54;
  --cream:#F6E8D2;
  --gold:#D9B873;
  background:
    radial-gradient(circle at 10% 8%, rgba(217,184,115,.18), transparent 24%),
    radial-gradient(circle at 90% 18%, rgba(31,106,74,.10), transparent 24%),
    linear-gradient(180deg,#FFFDF8 0%,#FAF7F0 48%,#F7EFE3 100%) !important;
}

.gae-kicker{
  color:var(--green-2) !important;
  font-weight:900 !important;
  letter-spacing:.21em !important;
}

.gae-hero-title,
.gae-story-title,
.gae-philosophy-title,
.gae-ingredients-title,
.gae-final-title{
  color:var(--ink) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.gae-hero-text,
.gae-story-text,
.gae-ingredients-text,
.gae-final-text,
.gae-ph-card p,
.gae-ing-copy p{
  color:var(--muted) !important;
}

.gae-philosophy{
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.09), transparent 24%),
    radial-gradient(circle at 82% 78%, rgba(217,184,115,.13), transparent 25%),
    linear-gradient(135deg,#103F2E 0%,#1C5D43 52%,#2B6D50 100%) !important;
}

.gae-philosophy .gae-kicker,
.gae-philosophy-title{
  color:#FFFDF8 !important;
}

.gae-ph-card{
  background:
    linear-gradient(155deg,#FFFDF8 0%,#F9EEDB 100%) !important;
  border:1px solid rgba(15,74,53,.10) !important;
  box-shadow:0 28px 65px rgba(18,61,45,.18) !important;
}

.gae-ph-card h3,
.gae-ing-copy h3{
  color:#123D2D !important;
}

.gae-ph-icon{
  background:
    linear-gradient(145deg,#F1DDAE,#FFF7E6) !important;
}

.gae-ingredients{
  background:
    radial-gradient(circle at 50% 0%,rgba(217,184,115,.23),transparent 32%),
    radial-gradient(circle at 15% 80%,rgba(31,106,74,.08),transparent 28%),
    linear-gradient(180deg,#FFFDF8 0%,#F3E5D0 100%) !important;
}

.gae-ing-card{
  border:1px solid rgba(15,74,53,.08) !important;
  box-shadow:0 26px 58px rgba(18,61,45,.13) !important;
}

.gae-btn{
  background:linear-gradient(135deg,#0F4A35,#2B7A57) !important;
  box-shadow:0 14px 32px rgba(15,74,53,.20) !important;
}

/* Lightweight lock:
   no fake 200vh sections. Only a short 135vh scroll runway.
   Content itself is sticky for a brief professional interaction. */
@media(min-width:768px){
  .gae-philosophy,
  .gae-ingredients{
    min-height:135vh !important;
    height:auto !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    position:sticky !important;
    top:86px !important;
    height:calc(100vh - 86px) !important;
    min-height:620px !important;
    padding-top:26px !important;
    padding-bottom:26px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow:visible !important;
    z-index:4;
  }

  .gae-philosophy-head,
  .gae-ingredients-head{
    margin-bottom:18px !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    min-height:420px !important;
    max-height:520px !important;
    overflow:visible !important;
  }

  .elementor-widget-glowie_about,
  .elementor-widget-glowie_about > .elementor-widget-container,
  .elementor-widget-glowie_about .gae-page{
    overflow-y:visible !important;
  }
}

/* Subtle decorative outlines */
.gae-philosophy::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  right:4%;
  top:8%;
  pointer-events:none;
}

.gae-ingredients::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border:1px solid rgba(15,74,53,.08);
  border-radius:58% 42% 62% 38%;
  left:-80px;
  bottom:4%;
  transform:rotate(18deg);
  pointer-events:none;
}


/* =========================================================
   v2.9.0 — COMPACT 21:9 SECTION SYSTEM
   Desktop sections are wide/short so scroll animations are visible
   without giant vertical empty space.
   ========================================================= */

@media(min-width:1025px){

  .gae-hero,
  .gae-story,
  .gae-philosophy,
  .gae-ingredients,
  .gae-final{
    min-height:0 !important;
    height:auto !important;
    padding-top:clamp(34px,3vw,54px) !important;
    padding-bottom:clamp(34px,3vw,54px) !important;
  }

  /* Visual section stage ≈ 21:9 */
  .gae-hero > .gae-wrap,
  .gae-story > .gae-wrap,
  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap,
  .gae-final > .gae-wrap{
    min-height:0 !important;
    height:auto !important;
  }

  .gae-hero-grid,
  .gae-story-grid,
  .gae-final-grid{
    min-height:min(43vw,700px) !important;
    max-height:700px;
    align-items:center;
  }

  .gae-hero-art{
    min-height:0 !important;
    height:min(43vw,700px) !important;
    aspect-ratio:21/9 !important;
  }

  .gae-story-images{
    min-height:0 !important;
    height:min(41vw,660px) !important;
  }

  .gae-final-image{
    min-height:0 !important;
    height:min(40vw,650px) !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    min-height:128vh !important;
    padding:0 !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    position:sticky !important;
    top:86px !important;
    height:calc(100vh - 86px) !important;
    min-height:0 !important;
    padding-top:22px !important;
    padding-bottom:22px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    min-height:0 !important;
    height:min(38vw,520px) !important;
    max-height:520px !important;
  }

  .gae-ph-card{
    min-height:300px !important;
    padding:28px !important;
  }

  .gae-ing-media{
    height:min(18vw,270px) !important;
  }

  .gae-philosophy-head,
  .gae-ingredients-head{
    margin-bottom:14px !important;
  }
}

/* Tablet */
@media(min-width:768px) and (max-width:1024px){
  .gae-hero,
  .gae-story,
  .gae-final{
    padding-top:36px !important;
    padding-bottom:48px !important;
  }

  .gae-hero-art{
    min-height:0 !important;
    aspect-ratio:16/9 !important;
    height:auto !important;
  }

  .gae-story-images{
    min-height:520px !important;
  }

  .gae-final-image{
    min-height:0 !important;
    aspect-ratio:16/9 !important;
    height:auto !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    min-height:122vh !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    min-height:440px !important;
  }
}

/* Mobile: vertical, compact, no horizontal 21:9 forcing */
@media(max-width:767px){
  .gae-hero,
  .gae-story,
  .gae-philosophy,
  .gae-ingredients,
  .gae-final{
    min-height:0 !important;
    height:auto !important;
  }

  .gae-hero{
    padding:14px 0 42px !important;
  }

  .gae-story,
  .gae-philosophy,
  .gae-ingredients,
  .gae-final{
    padding-top:52px !important;
    padding-bottom:52px !important;
  }

  .gae-hero-art{
    aspect-ratio:4/5 !important;
    min-height:0 !important;
    height:auto !important;
  }

  .gae-story-images{
    min-height:420px !important;
    height:auto !important;
  }

  .gae-final-image{
    aspect-ratio:4/3 !important;
    min-height:0 !important;
    height:auto !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    min-height:0 !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    height:auto !important;
    min-height:0 !important;
  }
}


/* =========================================================
   v3.0.0 — SMOOTH SCRUB + ULTRA COMPACT SECTIONS
   ========================================================= */

/* HERO: image touches the RIGHT edge of the viewport with zero outer gap */
.gae-hero{
  overflow:hidden !important;
}

.gae-hero > .gae-wrap{
  width:100% !important;
  max-width:none !important;
  padding-right:0 !important;
  margin-right:0 !important;
}

.gae-hero-grid{
  width:100% !important;
  margin-right:0 !important;
}

.gae-hero-art{
  margin-right:0 !important;
  justify-self:stretch !important;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

.gae-hero-art img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* Keep text breathing room even though image is edge-to-edge */
.gae-hero-copy{
  padding-left:clamp(28px,5vw,86px) !important;
  padding-right:clamp(24px,4vw,72px) !important;
}

@media(min-width:1025px){
  /* Compact horizontal composition */
  .gae-hero,
  .gae-story,
  .gae-final{
    padding-top:28px !important;
    padding-bottom:28px !important;
  }

  .gae-hero-grid{
    min-height:min(39vw,610px) !important;
    max-height:610px !important;
  }

  .gae-hero-art{
    height:min(39vw,610px) !important;
    min-height:0 !important;
  }

  .gae-story-grid{
    min-height:min(37vw,585px) !important;
    max-height:585px !important;
  }

  .gae-story-images{
    height:min(36vw,565px) !important;
    min-height:0 !important;
  }

  .gae-final-grid{
    min-height:min(36vw,570px) !important;
    max-height:570px !important;
  }

  .gae-final-image{
    height:min(35vw,550px) !important;
    min-height:0 !important;
  }

  /* Lowest practical sticky runway while still showing the animation clearly */
  .gae-philosophy,
  .gae-ingredients{
    min-height:116vh !important;
    height:auto !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    position:sticky !important;
    top:78px !important;
    height:calc(100vh - 78px) !important;
    min-height:0 !important;
    padding:16px 0 18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  .gae-philosophy-head,
  .gae-ingredients-head{
    margin-bottom:8px !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    height:min(34vw,470px) !important;
    min-height:0 !important;
    max-height:470px !important;
  }

  .gae-ph-card{
    min-height:270px !important;
    padding:24px !important;
  }

  .gae-ing-media{
    height:min(16vw,235px) !important;
  }
}

@media(min-width:768px) and (max-width:1024px){
  .gae-hero > .gae-wrap{
    padding-right:0 !important;
  }

  .gae-hero-copy{
    padding-right:30px !important;
    padding-left:30px !important;
  }

  .gae-hero-art{
    border-top-right-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    min-height:114vh !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    top:72px !important;
    height:calc(100vh - 72px) !important;
  }
}

@media(max-width:767px){
  /* Mobile keeps natural vertical flow; image can still touch the right edge */
  .gae-hero > .gae-wrap{
    width:100% !important;
    max-width:none !important;
    padding-right:0 !important;
  }

  .gae-hero-copy{
    padding:24px 22px 20px !important;
  }

  .gae-hero-art{
    width:100% !important;
    margin-right:0 !important;
    border-top-right-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }

  .gae-story,
  .gae-philosophy,
  .gae-ingredients,
  .gae-final{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }
}


/* =========================================================
   v3.0.1 — HERO ALIGNMENT CORRECTION
   Keep the hero image inside the normal content container.
   Balanced left/right gutters, no edge-sticking.
   ========================================================= */

.gae-hero{
  overflow:visible !important;
}

.gae-hero > .gae-wrap{
  width:min(92%, 1440px) !important;
  max-width:1440px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:clamp(18px,2vw,28px) !important;
  padding-right:clamp(18px,2vw,28px) !important;
}

.gae-hero-grid{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  column-gap:clamp(28px,4vw,72px) !important;
}

.gae-hero-copy{
  padding-left:0 !important;
  padding-right:0 !important;
}

.gae-hero-art{
  margin-left:0 !important;
  margin-right:0 !important;
  justify-self:stretch !important;
  border-radius:clamp(22px,2.2vw,36px) !important;
  overflow:hidden !important;
}

.gae-hero-art img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
}

@media(max-width:1024px){
  .gae-hero > .gae-wrap{
    width:94% !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .gae-hero-grid{
    column-gap:28px !important;
  }
}

@media(max-width:767px){
  .gae-hero > .gae-wrap{
    width:100% !important;
    max-width:none !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .gae-hero-copy{
    padding:20px 0 18px !important;
  }

  .gae-hero-art{
    width:100% !important;
    margin:0 !important;
    border-radius:22px !important;
  }
}


/* =========================================================
   v3.1.0 — SECTION SEPARATION + CONTROLLED CARD SPREAD
   ========================================================= */

/* Hero is a completely independent section */
.gae-hero{
  position:relative !important;
  z-index:3 !important;
  isolation:isolate !important;
  overflow:hidden !important;
  margin-bottom:0 !important;
  padding-bottom:36px !important;
  background:
    radial-gradient(circle at 84% 18%,rgba(53,95,74,.09),transparent 26%),
    linear-gradient(180deg,#FFFDF8 0%,#FAF7F0 100%) !important;
}

/* Story starts AFTER hero. No visual overlap between the two sections. */
.gae-story{
  position:relative !important;
  z-index:2 !important;
  clear:both !important;
  margin-top:0 !important;
  padding-top:54px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 15% 70%,rgba(217,184,115,.15),transparent 28%),
    linear-gradient(180deg,#FAF7F0 0%,#F7EFE4 100%) !important;
}

.gae-story-grid{
  position:relative !important;
  z-index:2 !important;
}

.gae-story-images{
  position:relative !important;
  overflow:visible !important;
}

/* Prevent story image cards from visually escaping into the hero */
.gae-story-img{
  top:auto;
}

.gae-story-img-a{
  left:0 !important;
  top:4% !important;
  bottom:auto !important;
}

.gae-story-img-b{
  right:2% !important;
  top:auto !important;
  bottom:2% !important;
}

/* Desktop: compact but clearly separated sections */
@media(min-width:1025px){
  .gae-hero{
    min-height:0 !important;
    padding-top:24px !important;
    padding-bottom:34px !important;
  }

  .gae-hero-grid{
    min-height:min(36vw,560px) !important;
    max-height:560px !important;
  }

  .gae-hero-art{
    height:min(36vw,560px) !important;
  }

  .gae-story{
    min-height:0 !important;
    padding-top:54px !important;
    padding-bottom:54px !important;
  }

  .gae-story-grid{
    min-height:min(34vw,535px) !important;
    max-height:none !important;
  }

  .gae-story-images{
    height:min(33vw,515px) !important;
    min-height:0 !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    min-height:114vh !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    height:min(32vw,450px) !important;
    max-height:450px !important;
  }
}

/* Tablet */
@media(min-width:768px) and (max-width:1024px){
  .gae-hero{
    padding-bottom:34px !important;
  }

  .gae-story{
    padding-top:46px !important;
    padding-bottom:50px !important;
  }

  .gae-story-images{
    min-height:480px !important;
  }
}

/* Mobile: each section naturally follows the previous one */
@media(max-width:767px){
  .gae-hero{
    padding-bottom:32px !important;
  }

  .gae-story{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

  .gae-story-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .gae-story-images{
    min-height:390px !important;
  }

  .gae-story-img-a{
    width:70% !important;
    height:72% !important;
  }

  .gae-story-img-b{
    width:58% !important;
    height:56% !important;
  }
}


/* =========================================================
   v3.2.0 — FULL MOBILE RESPONSIVE + MOBILE STACK/SPREAD
   ========================================================= */

@media(max-width:767px){

  .gae-page{
    overflow-x:hidden !important;
  }

  /* Global mobile spacing */
  .gae-wrap{
    width:100% !important;
    max-width:none !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .gae-hero,
  .gae-story,
  .gae-final{
    min-height:0 !important;
    height:auto !important;
    padding-top:34px !important;
    padding-bottom:38px !important;
  }

  .gae-hero-grid,
  .gae-story-grid,
  .gae-final-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
  }

  /* Typography */
  .gae-hero-title{
    font-size:clamp(48px,13vw,74px) !important;
    line-height:.92 !important;
    letter-spacing:-.045em !important;
    overflow-wrap:anywhere !important;
  }

  .gae-story-title,
  .gae-philosophy-title,
  .gae-ingredients-title,
  .gae-final-title{
    font-size:clamp(40px,10.5vw,58px) !important;
    line-height:.96 !important;
    letter-spacing:-.035em !important;
  }

  .gae-hero-text,
  .gae-story-text,
  .gae-final-text,
  .gae-ph-card p,
  .gae-ing-copy p{
    font-size:15px !important;
    line-height:1.62 !important;
  }

  .gae-kicker{
    font-size:11px !important;
    letter-spacing:.17em !important;
  }

  /* Hero image and copy */
  .gae-hero-copy{
    padding:0 !important;
    max-width:none !important;
  }

  .gae-hero-art{
    width:100% !important;
    aspect-ratio:4/5 !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  .gae-hero-art img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  /* Story: images are contained inside their own section */
  .gae-story{
    padding-top:44px !important;
    padding-bottom:44px !important;
  }

  .gae-story-images{
    position:relative !important;
    min-height:420px !important;
    height:420px !important;
    overflow:hidden !important;
    border-radius:24px !important;
  }

  .gae-story-img{
    position:absolute !important;
    margin:0 !important;
  }

  .gae-story-img-a{
    width:72% !important;
    height:76% !important;
    left:0 !important;
    top:0 !important;
    bottom:auto !important;
  }

  .gae-story-img-b{
    width:62% !important;
    height:58% !important;
    right:0 !important;
    left:auto !important;
    top:auto !important;
    bottom:0 !important;
  }

  .gae-story-copy{
    padding:0 !important;
    margin:0 !important;
  }

  /* Mobile animated sections:
     short sticky runway, but compact enough not to feel endless */
  .gae-philosophy,
  .gae-ingredients{
    min-height:120svh !important;
    height:auto !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    position:sticky !important;
    top:58px !important;
    height:calc(100svh - 58px) !important;
    min-height:0 !important;
    padding:18px 14px 20px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  .gae-philosophy-head,
  .gae-ingredients-head{
    margin-bottom:12px !important;
    padding:0 6px !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    position:relative !important;
    width:100% !important;
    height:min(61svh,530px) !important;
    min-height:430px !important;
    max-height:530px !important;
    overflow:visible !important;
  }

  /* Mobile cards overlap in one stack before opening */
  .gae-ph-card,
  .gae-ing-card{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    margin:0 !important;
    transform-origin:center center !important;
    box-sizing:border-box !important;
  }

  .gae-ph-card{
    width:min(82vw,340px) !important;
    min-height:230px !important;
    padding:22px !important;
  }

  .gae-ing-card{
    width:min(42vw,178px) !important;
    max-width:178px !important;
    min-height:238px !important;
    border-radius:20px !important;
    overflow:hidden !important;
  }

  .gae-ing-media{
    height:142px !important;
    min-height:142px !important;
  }

  .gae-ing-copy{
    padding:14px 13px 15px !important;
  }

  .gae-ing-copy h3{
    font-size:23px !important;
    line-height:1 !important;
    margin-bottom:7px !important;
  }

  .gae-ing-copy p{
    font-size:11.5px !important;
    line-height:1.4 !important;
  }

  /* Closing */
  .gae-final{
    padding-top:44px !important;
    padding-bottom:46px !important;
  }

  .gae-final-image{
    width:100% !important;
    aspect-ratio:4/3 !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:24px !important;
  }

  .gae-final-copy{
    padding:0 !important;
  }

  .gae-btn{
    min-height:48px !important;
    padding:13px 22px !important;
  }
}

@media(max-width:390px){
  .gae-wrap{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .gae-ing-card{
    width:43vw !important;
    max-width:166px !important;
  }

  .gae-ing-media{
    height:132px !important;
    min-height:132px !important;
  }
}


/* =========================================================
   v3.3.0 — MOBILE SCALE POLISH + WEBSITE BACKGROUND MATCH
   ========================================================= */

/* Match GLOWIE website canvas so the plugin does not look like a separate block */
.gae-page,
.gae-hero,
.gae-story,
.gae-ingredients,
.gae-final{
  background-color:#FAF7F0 !important;
}

.gae-page{
  background-image:none !important;
}

.gae-hero,
.gae-story,
.gae-ingredients,
.gae-final{
  background-image:
    radial-gradient(circle at 15% 18%,rgba(53,95,74,.045),transparent 26%),
    radial-gradient(circle at 88% 72%,rgba(217,184,115,.07),transparent 28%) !important;
}

/* Remove visible seams between light sections */
.gae-hero,
.gae-story,
.gae-ingredients,
.gae-final{
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* Dark philosophy remains an intentional brand chapter, not a mismatch */
.gae-philosophy{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.07),transparent 26%),
    linear-gradient(135deg,#123F2F 0%,#1E5B43 100%) !important;
}

/* MOBILE — smaller cards so the complete composition is visible */
@media(max-width:767px){

  .gae-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .gae-hero,
  .gae-story,
  .gae-final{
    padding-top:30px !important;
    padding-bottom:34px !important;
  }

  .gae-story{
    padding-top:38px !important;
    padding-bottom:38px !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    min-height:116svh !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    top:56px !important;
    height:calc(100svh - 56px) !important;
    padding:14px 10px 16px !important;
  }

  .gae-philosophy-head,
  .gae-ingredients-head{
    margin-bottom:8px !important;
    padding:0 8px !important;
  }

  .gae-philosophy-title,
  .gae-ingredients-title{
    font-size:clamp(34px,9vw,46px) !important;
    line-height:.96 !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    height:min(54svh,430px) !important;
    min-height:350px !important;
    max-height:430px !important;
  }

  /* Philosophy: compact 3-card storytelling stack */
  .gae-ph-card{
    width:min(70vw,286px) !important;
    min-height:178px !important;
    max-height:205px !important;
    padding:17px 18px !important;
    border-radius:22px !important;
  }

  .gae-ph-card h3{
    font-size:clamp(23px,6vw,30px) !important;
    line-height:1.02 !important;
    margin-bottom:8px !important;
  }

  .gae-ph-card p{
    font-size:12px !important;
    line-height:1.45 !important;
  }

  .gae-ph-icon{
    width:50px !important;
    height:50px !important;
    margin-bottom:14px !important;
  }

  /* Ingredients: make all 4 cards visible together in final 2x2 layout */
  .gae-ing-card{
    width:min(36vw,148px) !important;
    max-width:148px !important;
    min-height:190px !important;
    height:190px !important;
    border-radius:18px !important;
  }

  .gae-ing-media{
    height:108px !important;
    min-height:108px !important;
  }

  .gae-ing-copy{
    padding:10px 10px 11px !important;
  }

  .gae-ing-copy h3{
    font-size:18px !important;
    line-height:1 !important;
    margin-bottom:5px !important;
  }

  .gae-ing-copy p{
    font-size:9.5px !important;
    line-height:1.28 !important;
  }

  .gae-ing-num{
    font-size:8px !important;
    margin-bottom:5px !important;
  }

  /* Mobile hero/story image proportions and gaps */
  .gae-hero-grid,
  .gae-story-grid,
  .gae-final-grid{
    gap:20px !important;
  }

  .gae-hero-art{
    aspect-ratio:4/4.6 !important;
  }

  .gae-story-images{
    height:365px !important;
    min-height:365px !important;
    border-radius:22px !important;
  }

  .gae-story-img-a{
    width:68% !important;
    height:72% !important;
  }

  .gae-story-img-b{
    width:56% !important;
    height:52% !important;
  }

  .gae-final-image{
    aspect-ratio:4/3 !important;
  }
}

@media(max-width:390px){
  .gae-wrap{
    padding-left:13px !important;
    padding-right:13px !important;
  }

  .gae-ph-card{
    width:min(72vw,272px) !important;
    min-height:170px !important;
  }

  .gae-ing-card{
    width:min(35vw,136px) !important;
    max-width:136px !important;
    min-height:180px !important;
    height:180px !important;
  }

  .gae-ing-media{
    height:100px !important;
    min-height:100px !important;
  }

  .gae-ingredient-stage{
    min-height:335px !important;
  }
}


/* =========================================================
   v3.4.0 — MOBILE COMPACT LOCK SYSTEM (ALL SECTIONS)
   ========================================================= */

@media(max-width:767px){

  html, body{
    overflow-x:hidden !important;
  }

  .gae-page{
    overflow-x:hidden !important;
    background:#FAF7F0 !important;
  }

  .gae-wrap{
    width:100% !important;
    max-width:none !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* ---------- GLOBAL MOBILE SECTION RHYTHM ---------- */
  .gae-hero,
  .gae-story,
  .gae-final{
    min-height:0 !important;
    height:auto !important;
    padding-top:22px !important;
    padding-bottom:26px !important;
    margin:0 !important;
  }

  .gae-hero-grid,
  .gae-story-grid,
  .gae-final-grid{
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    gap:16px !important;
  }

  .gae-kicker{
    margin-bottom:8px !important;
  }

  .gae-hero-title{
    font-size:clamp(42px,11.5vw,58px) !important;
    line-height:.93 !important;
    margin-bottom:12px !important;
  }

  .gae-story-title,
  .gae-philosophy-title,
  .gae-ingredients-title,
  .gae-final-title{
    font-size:clamp(34px,9vw,44px) !important;
    line-height:.96 !important;
    margin-bottom:10px !important;
  }

  .gae-hero-text,
  .gae-story-text,
  .gae-final-text{
    margin-bottom:14px !important;
    font-size:14px !important;
    line-height:1.5 !important;
  }

  /* ---------- HERO ---------- */
  .gae-hero-copy{
    padding:0 !important;
  }

  .gae-hero-art{
    aspect-ratio:16/12.5 !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:20px !important;
  }

  /* ---------- STORY ---------- */
  .gae-story{
    padding-top:30px !important;
    padding-bottom:30px !important;
  }

  .gae-story-images{
    height:300px !important;
    min-height:300px !important;
    border-radius:20px !important;
    overflow:hidden !important;
  }

  .gae-story-img-a{
    width:66% !important;
    height:72% !important;
    top:0 !important;
    left:0 !important;
  }

  .gae-story-img-b{
    width:53% !important;
    height:50% !important;
    right:0 !important;
    bottom:0 !important;
  }

  /* ---------- ANIMATED LOCK SECTIONS ---------- */
  /*
    The section is only slightly taller than the viewport.
    This gives the cards a real scroll runway for the animation
    without creating the huge blank area seen before.
  */
  .gae-philosophy,
  .gae-ingredients{
    min-height:108svh !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    position:sticky !important;
    top:54px !important;
    height:calc(100svh - 54px) !important;
    min-height:0 !important;
    padding:10px 10px 12px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }

  .gae-philosophy-head,
  .gae-ingredients-head{
    flex:0 0 auto !important;
    margin:0 0 8px !important;
    padding:0 4px !important;
  }

  .gae-philosophy-head p,
  .gae-ingredients-head p{
    font-size:13px !important;
    line-height:1.4 !important;
    margin-top:5px !important;
    margin-bottom:0 !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    position:relative !important;
    flex:1 1 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* ---------- PHILOSOPHY CARDS ---------- */
  .gae-ph-card{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:min(64vw,248px) !important;
    min-height:150px !important;
    max-height:176px !important;
    padding:14px 15px !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
  }

  .gae-ph-icon{
    width:42px !important;
    height:42px !important;
    margin-bottom:9px !important;
  }

  .gae-ph-card h3{
    font-size:21px !important;
    line-height:1 !important;
    margin:0 0 6px !important;
  }

  .gae-ph-card p{
    font-size:10.8px !important;
    line-height:1.32 !important;
    margin:0 !important;
  }

  /* ---------- INGREDIENT CARDS ---------- */
  .gae-ing-card{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:min(31.5vw,126px) !important;
    max-width:126px !important;
    height:166px !important;
    min-height:166px !important;
    margin:0 !important;
    border-radius:15px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .gae-ing-media{
    height:92px !important;
    min-height:92px !important;
  }

  .gae-ing-copy{
    padding:8px 8px 9px !important;
  }

  .gae-ing-num{
    font-size:7px !important;
    margin-bottom:3px !important;
  }

  .gae-ing-copy h3{
    font-size:16px !important;
    line-height:1 !important;
    margin:0 0 4px !important;
  }

  .gae-ing-copy p{
    font-size:8px !important;
    line-height:1.22 !important;
    margin:0 !important;
  }

  /* ---------- FINAL ---------- */
  .gae-final{
    padding-top:30px !important;
    padding-bottom:32px !important;
  }

  .gae-final-image{
    aspect-ratio:16/11 !important;
    min-height:0 !important;
    height:auto !important;
    border-radius:20px !important;
  }

  .gae-final-copy{
    padding:0 !important;
  }

  .gae-btn{
    min-height:44px !important;
    padding:11px 18px !important;
  }
}

@media(max-width:390px){
  .gae-wrap{
    padding-left:11px !important;
    padding-right:11px !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    min-height:106svh !important;
  }

  .gae-ph-card{
    width:min(66vw,236px) !important;
  }

  .gae-ing-card{
    width:min(31vw,116px) !important;
    max-width:116px !important;
    height:158px !important;
    min-height:158px !important;
  }

  .gae-ing-media{
    height:86px !important;
    min-height:86px !important;
  }
}


/* =========================================================
   v3.5.0 — COMPACT / SQUARE MOBILE COMPOSITION
   Goal: no tall empty sections, tighter gaps, larger cards.
   ========================================================= */

@media(max-width:767px){

  /* Entire page rhythm: compact and consistent */
  .gae-hero,
  .gae-story,
  .gae-philosophy,
  .gae-ingredients,
  .gae-final{
    margin:0 !important;
  }

  .gae-wrap{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* Natural sections: visually closer to square, no excessive vertical whitespace */
  .gae-hero,
  .gae-story,
  .gae-final{
    padding-top:18px !important;
    padding-bottom:20px !important;
  }

  .gae-hero-grid,
  .gae-story-grid,
  .gae-final-grid{
    gap:12px !important;
  }

  .gae-kicker{
    margin-bottom:5px !important;
  }

  .gae-hero-title{
    margin-bottom:8px !important;
    font-size:clamp(40px,10.8vw,54px) !important;
  }

  .gae-story-title,
  .gae-philosophy-title,
  .gae-ingredients-title,
  .gae-final-title{
    margin-bottom:7px !important;
    font-size:clamp(32px,8.5vw,42px) !important;
  }

  .gae-hero-text,
  .gae-story-text,
  .gae-final-text{
    margin-bottom:10px !important;
    line-height:1.42 !important;
  }

  /* HERO */
  .gae-hero-art{
    aspect-ratio:1/1 !important;
    height:auto !important;
    border-radius:18px !important;
  }

  /* STORY */
  .gae-story{
    padding-top:22px !important;
    padding-bottom:22px !important;
  }

  .gae-story-images{
    height:min(78vw,330px) !important;
    min-height:0 !important;
    border-radius:18px !important;
  }

  .gae-story-img-a{
    width:67% !important;
    height:73% !important;
  }

  .gae-story-img-b{
    width:54% !important;
    height:51% !important;
  }

  /* Animated sections:
     only a tiny extra runway beyond one viewport.
     Visually compact; no giant blank area. */
  .gae-philosophy,
  .gae-ingredients{
    min-height:103svh !important;
    height:auto !important;
    padding:0 !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    top:52px !important;
    height:calc(100svh - 52px) !important;
    padding:8px 10px 10px !important;
    justify-content:center !important;
  }

  .gae-philosophy-head,
  .gae-ingredients-head{
    margin:0 0 5px !important;
    padding:0 3px !important;
  }

  .gae-philosophy-head p,
  .gae-ingredients-head p{
    margin-top:3px !important;
    font-size:12px !important;
    line-height:1.32 !important;
  }

  /* Square-ish visual stage */
  .gae-philosophy-stage,
  .gae-ingredient-stage{
    flex:0 0 auto !important;
    width:100% !important;
    height:min(82vw,360px) !important;
    min-height:0 !important;
    max-height:360px !important;
  }

  /* Philosophy cards slightly larger */
  .gae-ph-card{
    width:min(69vw,268px) !important;
    min-height:164px !important;
    max-height:188px !important;
    padding:15px 16px !important;
    border-radius:18px !important;
  }

  .gae-ph-icon{
    width:44px !important;
    height:44px !important;
    margin-bottom:8px !important;
  }

  .gae-ph-card h3{
    font-size:23px !important;
    margin-bottom:5px !important;
  }

  .gae-ph-card p{
    font-size:11px !important;
    line-height:1.28 !important;
  }

  /* Ingredients cards: bigger than previous version, still all 4 visible */
  .gae-ing-card{
    width:min(36vw,146px) !important;
    max-width:146px !important;
    height:188px !important;
    min-height:188px !important;
    border-radius:17px !important;
  }

  .gae-ing-media{
    height:108px !important;
    min-height:108px !important;
  }

  .gae-ing-copy{
    padding:9px 9px 10px !important;
  }

  .gae-ing-num{
    font-size:7.5px !important;
    margin-bottom:3px !important;
  }

  .gae-ing-copy h3{
    font-size:18px !important;
    margin-bottom:4px !important;
  }

  .gae-ing-copy p{
    font-size:8.5px !important;
    line-height:1.22 !important;
  }

  /* FINAL */
  .gae-final{
    padding-top:22px !important;
    padding-bottom:24px !important;
  }

  .gae-final-image{
    aspect-ratio:1/1 !important;
    border-radius:18px !important;
  }
}

@media(max-width:390px){
  .gae-philosophy-stage,
  .gae-ingredient-stage{
    height:min(84vw,330px) !important;
    max-height:330px !important;
  }

  .gae-ph-card{
    width:min(70vw,250px) !important;
  }

  .gae-ing-card{
    width:min(36vw,132px) !important;
    max-width:132px !important;
    height:176px !important;
    min-height:176px !important;
  }

  .gae-ing-media{
    height:100px !important;
    min-height:100px !important;
  }
}


/* =========================================================
   v3.6.0 — FINAL RESPONSIVE FIT + NO FORCED SECTION JUMPS
   ========================================================= */

.gae-page,
.gae-page *{
  scroll-snap-type:none !important;
  scroll-snap-align:none !important;
  scroll-margin:0 !important;
}
.gae-page{
  overflow-anchor:none !important;
}

@media(min-width:768px){
  .gae-hero{
    overflow:visible !important;
    min-height:0 !important;
    height:auto !important;
    padding-top:34px !important;
    padding-bottom:38px !important;
  }

  .gae-hero > .gae-wrap,
  .gae-hero-grid,
  .gae-hero-copy{
    overflow:visible !important;
  }

  .gae-hero-grid{
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    align-items:center !important;
  }

  .gae-hero-title{
    font-size:clamp(72px,7.1vw,118px) !important;
    line-height:.90 !important;
    letter-spacing:-.045em !important;
    margin:0 0 18px !important;
    overflow:visible !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .gae-hero-text{
    margin-bottom:20px !important;
  }

  .gae-hero-art{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1.30/1 !important;
    max-height:none !important;
  }
}

@media(max-width:767px){

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    top:92px !important;
    height:calc(100svh - 92px) !important;
    min-height:0 !important;
    padding:8px 10px 10px !important;
    justify-content:flex-start !important;
  }

  .gae-philosophy,
  .gae-ingredients{
    min-height:106svh !important;
    height:auto !important;
    padding:0 !important;
  }

  .gae-philosophy-head,
  .gae-ingredients-head{
    flex:0 0 auto !important;
    margin:0 0 8px !important;
    padding:0 3px !important;
  }

  .gae-philosophy-title,
  .gae-ingredients-title{
    font-size:clamp(30px,8.3vw,40px) !important;
    line-height:.95 !important;
    margin:0 0 5px !important;
  }

  .gae-philosophy-head p,
  .gae-ingredients-head p{
    font-size:11.5px !important;
    line-height:1.3 !important;
    margin:0 !important;
  }

  .gae-philosophy-stage,
  .gae-ingredient-stage{
    position:relative !important;
    flex:1 1 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .gae-ph-card{
    width:min(70vw,270px) !important;
    min-height:158px !important;
    max-height:178px !important;
    padding:14px 15px !important;
    border-radius:18px !important;
  }

  .gae-ph-icon{
    width:42px !important;
    height:42px !important;
    margin-bottom:8px !important;
  }

  .gae-ph-card h3{
    font-size:22px !important;
    line-height:1 !important;
    margin-bottom:5px !important;
  }

  .gae-ph-card p{
    font-size:10.5px !important;
    line-height:1.28 !important;
  }

  .gae-ing-card{
    width:min(37vw,150px) !important;
    max-width:150px !important;
    height:184px !important;
    min-height:184px !important;
    border-radius:17px !important;
  }

  .gae-ing-media{
    height:104px !important;
    min-height:104px !important;
  }

  .gae-ing-copy{
    padding:9px 9px 10px !important;
  }

  .gae-ing-copy h3{
    font-size:18px !important;
    margin-bottom:4px !important;
  }

  .gae-ing-copy p{
    font-size:8.3px !important;
    line-height:1.20 !important;
  }

  .gae-hero{
    padding-top:18px !important;
    padding-bottom:20px !important;
    overflow:visible !important;
  }

  .gae-hero-grid{
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;
    gap:14px !important;
    overflow:visible !important;
  }

  .gae-hero-title{
    font-size:clamp(40px,10.5vw,54px) !important;
    line-height:.94 !important;
    margin-bottom:8px !important;
    overflow:visible !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .gae-hero-text{
    font-size:13.5px !important;
    line-height:1.45 !important;
    margin-bottom:10px !important;
  }

  .gae-hero-art{
    aspect-ratio:1/1 !important;
    height:auto !important;
    min-height:0 !important;
  }

  .gae-story,
  .gae-final{
    padding-top:20px !important;
    padding-bottom:22px !important;
  }

  .gae-story-grid,
  .gae-final-grid{
    gap:12px !important;
  }

  .gae-story-images{
    height:min(74vw,310px) !important;
    min-height:0 !important;
  }

  .gae-final-image{
    aspect-ratio:1/1 !important;
  }
}

@media(max-width:390px){
  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    top:88px !important;
    height:calc(100svh - 88px) !important;
  }

  .gae-ing-card{
    width:min(37vw,138px) !important;
    max-width:138px !important;
    height:174px !important;
    min-height:174px !important;
  }

  .gae-ing-media{
    height:98px !important;
    min-height:98px !important;
  }
}


/* =========================================================
   v3.7.0 — NON-DESTRUCTIVE EDITOR CONTROLS
   Same Elementor widget/data. Layout fixes only.
   ========================================================= */

/* HERO: keep image close to copy instead of visually detached */
.gae-hero-grid{
  gap:18px !important;
}
.gae-hero-copy{
  padding-left:0 !important;
}
.gae-hero-art{
  min-height:0 !important;
}

/* STORY: heights are controlled from Elementor; no forced percentage heights */
.gae-story-images{
  --gae-story-gap:36px;
  min-height:0 !important;
}
.gae-story-img-a,
.gae-story-img-b{
  min-height:0 !important;
}
.gae-story-img-a{
  left:0 !important;
  top:0 !important;
  width:64% !important;
}
.gae-story-img-b{
  right:0 !important;
  bottom:0 !important;
  width:55% !important;
}
.gae-story-img img{
  object-position:center !important;
  background:#F7F0E5;
}

/* PHILOSOPHY ICONS:
   uploaded image = the circular icon itself, no beige badge behind it */
.gae-ph-icon{
  width:var(--gae-ph-icon-size,72px) !important;
  height:var(--gae-ph-icon-size,72px) !important;
  flex:0 0 var(--gae-ph-icon-size,72px) !important;
}

.gae-ph-icon.has-image{
  width:var(--gae-ph-icon-size,72px) !important;
  height:var(--gae-ph-icon-size,72px) !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:none !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.gae-ph-icon.has-image::before,
.gae-ph-icon.has-image::after{
  content:none !important;
  display:none !important;
}

.gae-ph-icon.has-image img{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:50% !important;
  transform:scale(var(--gae-ph-icon-zoom,1.55)) !important;
  transform-origin:center center !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

/* fallback symbol only keeps a soft badge */
.gae-ph-icon:not(.has-image){
  background:linear-gradient(145deg,#F1DDAE,#FFF7E6) !important;
  border-radius:50% !important;
}

/* INGREDIENT IMAGES: per-card height + fit from Elementor */
.gae-ing-media{
  height:var(--gae-ing-height,260px) !important;
  min-height:0 !important;
}
.gae-ing-media img{
  height:100% !important;
  object-fit:var(--gae-ing-fit,cover) !important;
  object-position:center !important;
}

/* keep card height natural after user changes image height */
.gae-ing-card{
  height:auto !important;
  min-height:0 !important;
}

/* Closing image respects user-selected height */
.gae-final-image{
  min-height:0 !important;
}

@media(max-width:767px){
  .gae-hero-grid{
    gap:12px !important;
  }

  .gae-story-images{
    min-height:0 !important;
  }

  .gae-story-img-a{
    width:72% !important;
  }

  .gae-story-img-b{
    width:60% !important;
  }

  /* Don't force old mobile ingredient image/card heights over Elementor */
  .gae-ing-card{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  .gae-ing-media{
    height:var(--gae-ing-height,180px) !important;
    min-height:0 !important;
  }

  .gae-ph-icon{
    width:var(--gae-ph-icon-size,58px) !important;
    height:var(--gae-ph-icon-size,58px) !important;
  }
}


/* =========================================================
   v3.8.0 — HERO SEPARATION + STORY TRUE FULL-BLEED IMAGES
   Non-destructive replacement: same Elementor data/settings.
   ========================================================= */

/* DESKTOP HERO:
   Keep copy completely in the left column and artwork completely on the right.
   The title can NEVER flow under/over the image. */
@media(min-width:1025px){
  .gae-hero > .gae-wrap{
    width:min(94%,1500px) !important;
    max-width:1500px !important;
    padding-left:clamp(24px,3vw,54px) !important;
    padding-right:clamp(24px,3vw,54px) !important;
  }

  .gae-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr) !important;
    column-gap:clamp(58px,5.5vw,96px) !important;
    align-items:center !important;
    width:100% !important;
    overflow:visible !important;
  }

  .gae-hero-copy{
    grid-column:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    position:relative !important;
    z-index:2 !important;
    overflow:visible !important;
  }

  .gae-hero-title{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(66px,6vw,104px) !important;
    line-height:.91 !important;
    letter-spacing:-.045em !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    text-wrap:balance !important;
  }

  .gae-hero-text{
    max-width:560px !important;
  }

  .gae-hero-art{
    grid-column:2 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    justify-self:stretch !important;
    position:relative !important;
    z-index:1 !important;
    overflow:hidden !important;
  }

  .gae-hero-art img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }
}

/* TABLET: still side-by-side until mobile breakpoint, with a safe gap. */
@media(min-width:768px) and (max-width:1024px){
  .gae-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) !important;
    gap:34px !important;
    align-items:center !important;
  }

  .gae-hero-copy,
  .gae-hero-art{
    min-width:0 !important;
    width:100% !important;
  }

  .gae-hero-title{
    font-size:clamp(52px,6.2vw,72px) !important;
    white-space:normal !important;
    max-width:100% !important;
  }
}

/* STORY IMAGES:
   Frame is completely filled. No beige/white empty bars on any side. */
.gae-story-img-a,
.gae-story-img-b{
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}

.gae-story-img-a img,
.gae-story-img-b img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

/* Remove old background that became visible with contain. */
.gae-story-img img{
  background:transparent !important;
}

/* User still controls both image heights from Elementor.
   Changing height changes the crop window instead of adding gaps. */
.gae-story-images{
  overflow:visible !important;
}

@media(max-width:767px){
  .gae-hero-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
  }

  .gae-hero-copy,
  .gae-hero-art{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .gae-story-img-a img,
  .gae-story-img-b img{
    object-fit:cover !important;
  }
}


/* =========================================================
   v3.8.1 — HERO IMAGE SHIFT RIGHT
   Uses the existing right-side whitespace without touching copy/data.
   ========================================================= */
@media(min-width:1025px){
  .gae-hero-art{
    transform:translateX(clamp(24px,2.6vw,46px)) !important;
  }
}

@media(min-width:768px) and (max-width:1024px){
  .gae-hero-art{
    transform:translateX(16px) !important;
  }
}

@media(max-width:767px){
  .gae-hero-art{
    transform:none !important;
  }
}
\n\n/* =========================================================\n   v3.8.2 — MOBILE INGREDIENTS: ALL 4 CARDS FULLY VISIBLE\n   ========================================================= */\n@media(max-width:767px){\n  /* Give the cards a predictable visible stage below the heading. */\n  .gae-ingredients > .gae-wrap{\n    height:calc(100svh - 84px) !important;\n    min-height:620px !important;\n    padding-top:8px !important;\n    padding-bottom:10px !important;\n    overflow:visible !important;\n  }\n\n  .gae-ingredients-head{\n    margin-bottom:6px !important;\n    flex:0 0 auto !important;\n  }\n\n  .gae-ingredient-stage{\n    flex:1 1 auto !important;\n    width:100% !important;\n    min-height:500px !important;\n    height:auto !important;\n    max-height:none !important;\n    overflow:visible !important;\n  }\n\n  /* 2 columns that fit comfortably on real mobile widths. */\n  .gae-ing-card{\n    width:min(38.5vw,156px) !important;\n    max-width:156px !important;\n    min-width:0 !important;\n    height:auto !important;\n    min-height:0 !important;\n    max-height:none !important;\n    border-radius:16px !important;\n  }\n\n  /* Keep Elementor's chosen image height, but cap it on mobile so\n     two complete card rows can coexist inside one viewport. */\n  .gae-ing-media{\n    height:min(var(--gae-ing-height,260px),205px) !important;\n    min-height:145px !important;\n    max-height:205px !important;\n  }\n\n  .gae-ing-copy{\n    padding:9px 9px 10px !important;\n  }\n\n  .gae-ing-copy h3{\n    font-size:18px !important;\n    line-height:1.02 !important;\n    margin:4px 0 4px !important;\n  }\n\n  .gae-ing-copy p{\n    font-size:8.6px !important;\n    line-height:1.22 !important;\n    margin:0 !important;\n  }\n\n  .gae-ing-num{\n    font-size:8px !important;\n  }\n}\n\n@media(max-width:390px){\n  .gae-ing-card{\n    width:min(39vw,146px) !important;\n    max-width:146px !important;\n  }\n  .gae-ing-media{\n    height:min(var(--gae-ing-height,260px),185px) !important;\n    max-height:185px !important;\n  }\n}\n

/* =========================================================
   v3.8.3 — MOBILE PHILOSOPHY FULL CARDS + HERO FARTHER RIGHT
   ========================================================= */

/* Push desktop hero artwork farther into the available right whitespace. */
@media(min-width:1025px){
  .gae-hero-art{
    transform:translateX(clamp(58px,4.6vw,88px)) !important;
  }
}

@media(min-width:768px) and (max-width:1024px){
  .gae-hero-art{
    transform:translateX(26px) !important;
  }
}

@media(max-width:767px){
  .gae-hero-art{transform:none !important;}

  /* Give Philosophy enough clean stage space for 1 + 2 cards. */
  .gae-philosophy > .gae-wrap{
    height:calc(100svh - 82px) !important;
    min-height:610px !important;
    padding:8px 8px 12px !important;
    overflow:visible !important;
  }

  .gae-philosophy-head{
    margin-bottom:4px !important;
  }

  .gae-philosophy-stage{
    flex:1 1 auto !important;
    width:100% !important;
    min-height:390px !important;
    height:auto !important;
    overflow:visible !important;
  }

  /* Smaller than the old 70vw cards so the two lower cards can sit side by side fully. */
  .gae-ph-card{
    width:min(42vw,166px) !important;
    min-width:0 !important;
    min-height:138px !important;
    max-height:none !important;
    padding:12px 12px 13px !important;
    border-radius:17px !important;
    overflow:hidden !important;
  }

  .gae-ph-icon{
    width:min(var(--gae-ph-icon-size,52px),52px) !important;
    height:min(var(--gae-ph-icon-size,52px),52px) !important;
    margin-bottom:7px !important;
  }

  .gae-ph-card h3{
    font-size:19px !important;
    line-height:1.02 !important;
    margin:0 0 5px !important;
    white-space:normal !important;
  }

  .gae-ph-card p{
    font-size:9.2px !important;
    line-height:1.22 !important;
    margin:0 !important;
    white-space:normal !important;
  }
}

@media(max-width:390px){
  .gae-ph-card{
    width:min(41vw,150px) !important;
    min-height:132px !important;
    padding:11px !important;
  }
  .gae-ph-card h3{font-size:17px !important;}
  .gae-ph-card p{font-size:8.7px !important;}
  .gae-ph-icon{
    width:min(var(--gae-ph-icon-size,48px),48px) !important;
    height:min(var(--gae-ph-icon-size,48px),48px) !important;
  }
}


/* =========================================================
   v3.8.4 — MOBILE ONLY: FULL 3 + 4 CARD EXPANSION
   Non-destructive: desktop/tablet untouched. Keeps existing
   scroll-open / reverse-close behavior; only fixes mobile fit.
   ========================================================= */
@media (max-width:767px){
  /* Keep the animated sections and their cards fully visible. */
  .gae-philosophy,
  .gae-ingredients,
  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap,
  .gae-philosophy-stage,
  .gae-ingredient-stage{
    overflow:visible !important;
  }

  .gae-philosophy > .gae-wrap,
  .gae-ingredients > .gae-wrap{
    min-height:0 !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  /* JS sets an exact safe stage height after measuring the real cards. */
  .gae-philosophy-stage,
  .gae-ingredient-stage{
    position:relative !important;
    width:100% !important;
    max-height:none !important;
    box-sizing:border-box !important;
  }

  /* -------- 3 PHILOSOPHY CARDS -------- */
  .gae-ph-card{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:min(42vw,166px) !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:12px 12px 13px !important;
    border-radius:17px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .gae-ph-icon{
    width:min(var(--gae-ph-icon-size,52px),52px) !important;
    height:min(var(--gae-ph-icon-size,52px),52px) !important;
    margin-bottom:7px !important;
    flex:none !important;
  }

  .gae-ph-card h3{
    font-size:clamp(16px,4.7vw,19px) !important;
    line-height:1.06 !important;
    margin:0 0 5px !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  .gae-ph-card p{
    font-size:clamp(8.6px,2.45vw,9.6px) !important;
    line-height:1.25 !important;
    margin:0 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    display:block !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  /* -------- 4 INGREDIENT CARDS -------- */
  .gae-ing-card{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:min(40.5vw,154px) !important;
    max-width:154px !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    border-radius:16px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .gae-ing-media{
    height:clamp(118px,34vw,150px) !important;
    min-height:0 !important;
    max-height:150px !important;
  }

  .gae-ing-copy{
    padding:9px 9px 10px !important;
    overflow:visible !important;
  }

  .gae-ing-copy h3{
    font-size:clamp(15px,4.4vw,18px) !important;
    line-height:1.05 !important;
    margin:4px 0 4px !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  .gae-ing-copy p{
    font-size:clamp(8px,2.25vw,9px) !important;
    line-height:1.22 !important;
    margin:0 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    display:block !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  .gae-ing-copy > span{
    font-size:8px !important;
    line-height:1 !important;
  }
}

@media (max-width:390px){
  .gae-ph-card{
    width:min(41vw,150px) !important;
    padding:10px 10px 11px !important;
  }
  .gae-ph-icon{
    width:min(var(--gae-ph-icon-size,46px),46px) !important;
    height:min(var(--gae-ph-icon-size,46px),46px) !important;
  }
  .gae-ing-card{
    width:min(40vw,146px) !important;
    max-width:146px !important;
  }
  .gae-ing-media{
    height:clamp(108px,32vw,132px) !important;
  }
}