/* ============================================================
   THANIKAN FARMS — "Growth Ledger" design system
   Palette drawn from the client's brand colours (#2c5f34 / #faf5ec)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');

:root{
  --canopy:#2c5f34;
  --canopy-dark:#193b21;
  --canopy-tint:#e7efe4;
  --husk:#fffcf5;
  --husk-deep:#f0e6d2;
  --gold:#c68a2c;
  --gold-dark:#a06f1f;
  --ink:#23301f;
  --ink-soft:#5b6656;
  --sage:#93ab84;
  --line:#d9cdb0;
  --white:#fffdf8;

  --serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1180px;
  --radius: 4px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--husk);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  margin:0 0 .4em;
  color:var(--canopy-dark);
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;color:var(--ink-soft);}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 28px;}

::selection{background:var(--gold);color:var(--white);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- eyebrow / ledger label ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin-bottom:1em;
}
.eyebrow::before{
  display:none; /* removed line to use leaf icon instead */
}
.eyebrow-icon {
  width: 37px !important;
  height: 37px !important;
  animation: leafGrow 1.5s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes leafGrow {
  0% { transform: scale(0.9); }
  100% { transform: scale(1.2); }
}

/* ---------- topbar marquee ---------- */
.site-topbar{
  background:var(--canopy-dark);
  color:var(--husk);
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.04em;
  padding:8px 0;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topbar-track{
  display:flex;
  gap:44px;
  white-space:nowrap;
  animation:topbarScroll 30s linear infinite;
  align-items:center;
}
.site-topbar:hover .topbar-track{
  animation-play-state:paused;
}
@keyframes topbarScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.topbar-track span, .topbar-track a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--husk);
  opacity:.92;
}
.topbar-track a:hover{
  color:var(--gold);
}
.topbar-track span::before, .topbar-track a::before{
  content:"◆";
  color:var(--gold);
  font-size:.6rem;
}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,245,236,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;max-width:var(--container);margin:0 auto;position:relative;
}
.brand{
  display:inline-flex;align-items:center;flex-shrink:0;
}
.brand img{
  height:48px;width:auto;max-width:240px;object-fit:contain;display:block;
}
.footer-brand{
  margin-bottom:14px;
}
.footer-brand img{
  height:46px;width:auto;max-width:180px;object-fit:contain;display:block;
}
.nav-links{
  display:flex;gap:26px;align-items:center;justify-content:center;
  margin:0 auto;padding:0;list-style:none;
}
.nav{position:relative;z-index:1001;}
.nav-actions{
  display:inline-flex;align-items:center;gap:12px;flex-shrink:0;
}
.nav-links a{
  font-size:.88rem;font-weight:500;color:var(--ink);position:relative;padding:4px 0;
}
.nav-links a.active,.nav-links a:hover{color:var(--canopy);}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);
}

/* ---------- Products Mega Dropdown Menu ---------- */
.nav-dropdown-wrap{
  position:relative;
  list-style:none;
}
.nav-dropdown-head{
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-dropdown-trigger{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.nav-dropdown-arrow{
  transition:transform .25s ease;
  color:var(--ink-soft);
}
.nav-dropdown-wrap:hover .nav-dropdown-arrow,
.nav-dropdown-wrap.open .nav-dropdown-arrow{
  transform:rotate(180deg);
  color:var(--canopy);
}
.nav-dropdown-toggle-btn{
  display:none;
  background:none;
  border:none;
  padding:4px;
  color:var(--ink);
  cursor:pointer;
}

/* Mega dropdown container - Left aligned with Microgreen */
.nav-mega-dropdown{
  position:absolute;
  top:100%;
  left:0;
  transform:translateY(12px);
  width:780px;
  max-width:min(780px, calc(100vw - 40px));
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 22px 48px rgba(25,59,33,.18), 0 4px 14px rgba(0,0,0,.06);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:1000;
}

/* Show on hover or focus */
.nav-dropdown-wrap:hover .nav-mega-dropdown,
.nav-dropdown-wrap:focus-within .nav-mega-dropdown,
.nav-dropdown-wrap.open .nav-mega-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(6px);
}

.nav-mega-dropdown-inner{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.nav-mega-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

/* Product Card - Matching the 8 card grid image */
.nav-product-card{
  position:relative;
  display:block;
  text-decoration:none;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:16 / 11;
  background:#1a1a1a;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nav-product-card:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.nav-product-card::after{
  display:none !important;
}

.nav-product-img-box{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#2a2a2a;
}
.nav-product-img-box img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .35s ease;
}
.nav-product-card:hover .nav-product-img-box img{
  transform:scale(1.08);
}

.nav-product-gradient{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:auto;
  height:65%;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  pointer-events:none;
  z-index:1;
}

.nav-product-label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  color:#ffffff;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:700;
  text-align:center;
  padding:0 6px 8px;
  width:100%;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  letter-spacing:-.01em;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .2s ease;
}
.nav-product-card:hover .nav-product-label{
  color:#fce899;
}

.nav-mega-footer{
  border-top:1px dashed var(--line);
  padding-top:12px;
  text-align:center;
}
.nav-mega-view-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.86rem;
  font-weight:700;
  color:var(--canopy-dark);
  transition:color .2s ease, transform .2s ease;
}
.nav-mega-view-btn:hover{
  color:var(--gold);
  transform:translateX(3px);
}
.nav-mega-view-btn::after{
  display:none !important;
}

.nav-cta{
  background:var(--gold);color:var(--white) !important;padding:10px 22px;border-radius:2px;
  font-size:.82rem;letter-spacing:.03em;font-weight:600;display:inline-flex;align-items:center;
  justify-content:center;transition:background .2s ease;white-space:nowrap;
}
.nav-cta:hover{background:var(--gold-dark);}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--canopy-dark);cursor:pointer;padding:4px 8px;}
.nav-mobile-cta{display:none;width:100%;margin-top:8px;}

@media (max-width:960px){
  .nav{
    padding:12px 20px;
  }
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--husk);
    flex-direction:column;align-items:flex-start;padding:20px 24px 28px;
    border-bottom:1px solid var(--line);display:none;gap:16px;
    margin:0;box-shadow:0 12px 24px rgba(0,0,0,.08);z-index:1002;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .nav-actions .nav-cta{display:none;}
  .nav-mobile-cta{display:block;}
  .nav-mobile-cta .nav-cta{display:flex;width:100%;text-align:center;}

  .nav-dropdown-wrap{
    width:100%;
  }
  .nav-dropdown-head{
    width:100%;
    justify-content:space-between;
  }
  .nav-dropdown-trigger .nav-dropdown-arrow{
    display:none;
  }
  .nav-dropdown-toggle-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .nav-dropdown-toggle-btn svg{
    transition:transform .25s ease;
  }
  .nav-dropdown-wrap.open .nav-dropdown-toggle-btn svg{
    transform:rotate(180deg);
    color:var(--canopy);
  }
  .nav-mega-dropdown{
    position:static;
    transform:none !important;
    width:100%;
    max-width:100%;
    display:none;
    box-shadow:none;
    border:1px solid var(--line);
    margin-top:8px;
    padding:12px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-dropdown-wrap.open .nav-mega-dropdown{
    display:block;
  }
  .nav-mega-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  .nav-product-label{
    font-size:.8rem;
    padding:0 4px 6px;
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:2px;font-weight:600;font-size:.9rem;
  letter-spacing:.02em;border:1px solid transparent;transition:transform .15s ease, background .15s ease;
}
.btn-primary{background:var(--canopy);color:var(--white);}
.btn-primary:hover{background:var(--canopy-dark);transform:translateY(-1px);}
.btn-outline{border-color:var(--canopy);color:var(--canopy);}
.btn-outline:hover{background:var(--canopy);color:var(--white);}
.btn-gold{background:var(--gold);color:var(--white);}
.btn-gold:hover{background:var(--gold-dark);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Full-Width Background Hero Banner ---------- */
.hero-bg-banner{
  position:relative;
  min-height:580px;
  padding:90px 0 85px;
  background:linear-gradient(rgba(18, 42, 24, 0.82), rgba(18, 42, 24, 0.88)), url('../assets/images/hero-microgreens.jpg') center/cover no-repeat;
  color:var(--husk);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-center-shell{
  max-width:960px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:2;
}
.hero-live-pill-glass{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
  padding:6px 16px;
  border-radius:20px;
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--gold);
  margin-bottom:20px;
}
.pulse-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 0 0 0 rgba(37,211,102,.7);
  animation:pulseDot 1.8s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.7);}
  70%{box-shadow:0 0 0 8px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
.hero-title-light{
  font-family:var(--serif);
  font-size:clamp(2.5rem, 5.5vw, 4.2rem);
  line-height:1.15;
  color:var(--white);
  margin:0 0 18px;
  letter-spacing:-.02em;
}
.hero-title-light em{
  font-style:italic;
  color:var(--gold);
}
.hero-lede-light{
  font-size:1.1rem;
  color:#d5e5d3;
  max-width:62ch;
  margin:0 auto 28px;
  line-height:1.6;
}
.btn-glass-outline{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.35);
  color:var(--white);
}
.btn-glass-outline:hover{
  background:var(--white);
  color:var(--canopy-dark);
  border-color:var(--white);
}
.hero-btn-row{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.hero-value-pills-glass{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:10px;
}
.hero-value-item-glass{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-size:.84rem;
  font-weight:600;
  color:#eaf5ea;
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(4px);
  padding:6px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
}
.hero-value-item-glass svg{
  width:16px;
  height:16px;
  stroke:var(--gold);
  fill:none;
}

/* ---------- ring badge (signature element) ---------- */
.ring{position:relative;width:46px;height:46px;flex-shrink:0;}
.ring svg{transform:rotate(-90deg);}
.ring circle{fill:none;stroke-width:4;}
.ring .track{stroke:var(--husk-deep);}
.ring .fill{stroke:var(--canopy);stroke-linecap:round;transition:stroke-dashoffset .6s ease;}
.ring.ready .fill{stroke:var(--gold);}
.ring-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.55rem;color:var(--canopy-dark);font-weight:700;
}

/* ---------- trust strip ---------- */
.trust-strip{
  background:var(--canopy);color:var(--husk);padding:16px 0;overflow:hidden;
}
.trust-track{display:flex;gap:48px;white-space:nowrap;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  animation:scroll 26s linear infinite;
}
.trust-strip:hover .trust-track{animation-play-state:paused;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.trust-track span{opacity:.92;}
.trust-track span::before{content:"◆ ";color:var(--gold);}

/* ---------- section shells ---------- */
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--husk-deep);}
.section-dark{background:var(--canopy-dark);color:var(--husk);}
.section-dark h2,.section-dark h3{color:var(--white);}
.section-dark p{color:#cfe0cd;}
.section-head{max-width:680px;margin:0 0 48px;}
.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.section-head.center .eyebrow{
  justify-content:center;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.section-head.center h1,
.section-head.center h2,
.section-head.center h3{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
.section-head.center p,
.section-head.center .hero-lede{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width:100%;
  max-width:54ch;
}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);}

/* ---------- divider ---------- */
.hairline{border:0;border-top:1px solid var(--line);margin:0;}

/* ---------- grid helpers ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media (max-width:980px){
  .hero-grid,.grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .grid-3,.grid-4{grid-template-columns:1fr;}
}

/* ---------- illustrated placeholder art ---------- */
.leaf-art{
  width:100%;aspect-ratio:4/3;border-radius:4px;
  background:linear-gradient(160deg,var(--canopy-tint),var(--husk-deep));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  border:1px solid var(--line);
}
.leaf-art svg{width:58%;height:58%;}
.founder-image{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.leaf-art .tag{
  position:absolute;bottom:10px;left:10px;font-family:var(--mono);font-size:.6rem;
  color:var(--ink-soft);background:rgba(250,245,236,.85);padding:3px 8px;border-radius:2px;
}

/* ---------- process steps ---------- */
.process-step{
  display:grid;grid-template-columns:90px 1fr;gap:28px;padding:36px 0;border-top:1px solid var(--line);
}
.process-step:last-child{border-bottom:1px solid var(--line);}
.process-num{font-family:var(--mono);font-size:.85rem;color:var(--gold-dark);padding-top:6px;}
.process-step h3{font-size:1.4rem;}

/* ---------- cards ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;
}
.pack-card{position:relative;}
.pack-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background-image:radial-gradient(circle at 8px 3px, var(--husk) 3px, transparent 3.5px);
  background-size:16px 6px; background-repeat:repeat-x;
}
.pack-media{padding:26px 22px 0;}
.pack-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.pack-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.pack-name{font-family:var(--serif);font-size:1.25rem;color:var(--canopy-dark);margin:0;}
.stage-badge{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;white-space:nowrap;
  background:#badbae;color:var(--canopy-dark);
}
.stage-badge.growing{background:#badbae;color:var(--canopy-dark);font-weight:700;}
.stage-badge.ready{background:#ffde9dd9;color:var(--gold-dark);}
.pack-meta{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);}
.pack-price{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin-top:auto;}
.pack-foot{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px dashed var(--line);}

/* ---------- pillars / feature list ---------- */
.pillar{display:flex;gap:18px;}
.pillar-num{font-family:var(--mono);font-size:.75rem;color:var(--gold-dark);padding-top:3px;}
.pillar h3{font-size:1.15rem;margin-bottom:.3em;}

/* ---------- badges row ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:12px;}
.badge{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--white);
  padding:9px 14px;border-radius:2px;font-size:.8rem;font-weight:500;color:var(--ink);
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--canopy);}

/* ---------- accordion (FAQ) ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;background:none;border:0;text-align:left;padding:20px 0;
  display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);
  font-size:1.05rem;color:var(--canopy-dark);
}
.faq-q::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--gold-dark);transition:transform .2s;}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{padding-bottom:18px;margin:0;}

/* ---------- gallery ---------- */
.gallery-filter-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:28px 0 40px;
}
.gallery-filter-btn{
  background:var(--white);
  border:1px solid var(--line);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:600;
  padding:10px 22px;
  border-radius:30px;
  cursor:pointer;
  transition:all .25s ease;
}
.gallery-filter-btn:hover,
.gallery-filter-btn.active{
  background:var(--canopy);
  border-color:var(--canopy);
  color:var(--white);
  box-shadow:0 4px 14px rgba(44,95,52,.15);
}

.gallery-photo-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.gallery-item{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--husk);
  box-shadow:0 6px 20px rgba(44,95,52,.06);
  border:1px solid var(--line);
  cursor:pointer;
  transition:transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s ease;
}
.gallery-item:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(44,95,52,.14);
}
.gallery-item-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover .gallery-item-img{
  transform:scale(1.08);
}
.gallery-item-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(20,48,27,.88) 100%);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px;
  opacity:1;
  transition:background .3s ease;
}
.gallery-item-tag{
  align-self:flex-start;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--canopy-dark);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.gallery-item-info{
  color:var(--white);
}
.gallery-item-info h4{
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:700;
  color:var(--white);
  margin:0 0 2px;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.gallery-item-info p{
  font-family:var(--sans);
  font-size:.78rem;
  color:#d4e6d2;
  margin:0;
}

@media (max-width:1100px){
  .gallery-photo-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:768px){
  .gallery-photo-grid{grid-template-columns:repeat(2, 1fr); gap:12px;}
  .gallery-item{border-radius:14px;}
  .gallery-item-overlay{padding:10px;}
  .gallery-item-tag{font-size:.62rem; padding:2px 8px;}
}
@media (max-width:420px){
  .gallery-photo-grid{grid-template-columns:repeat(2, 1fr); gap:8px;}
  .gallery-item{border-radius:12px;}
  .gallery-item-overlay{padding:8px;}
  .gallery-item-tag{font-size:.58rem; padding:2px 6px;}
}

/* ---------- blog ---------- */
.blog-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  text-decoration:none;
  color:inherit;
}
.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(44,95,52,.1);
  border-color:rgba(44,95,52,.3);
}
.blog-card-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--husk);
}
.blog-card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover .blog-card-img{
  transform:scale(1.06);
}
.blog-card-badge{
  position:absolute;
  top:14px;
  left:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--canopy-dark);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.blog-card-body{
  padding:24px 22px 26px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.blog-card-body .eyebrow{
  margin-bottom:8px;
  font-size:.78rem;
}
.blog-card-body h3{
  font-family:var(--serif);
  font-size:1.25rem;
  line-height:1.35;
  color:var(--canopy-dark);
  margin:0 0 10px;
  transition:color .2s ease;
}
.blog-card:hover .blog-card-body h3{
  color:var(--canopy);
}
.blog-card-body p{
  font-size:.9rem;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0 0 16px;
  flex-grow:1;
}
.blog-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--muted);
}
.blog-card-read{
  color:var(--canopy);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

/* Blog 2-Column Mobile View */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .blog-card {
    border-radius: 14px;
  }
  .blog-card-badge {
    top: 8px;
    left: 8px;
    font-size: .62rem;
    padding: 3px 7px;
  }
  .blog-card-body {
    padding: 12px 10px 14px;
  }
  .blog-card-body .eyebrow {
    font-size: .68rem;
    margin-bottom: 4px;
  }
  .blog-card-body h3 {
    font-size: .95rem;
    line-height: 1.3;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card-body p {
    font-size: .78rem;
    line-height: 1.4;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card-meta {
    padding-top: 10px;
    font-size: .66rem;
  }
  .blog-card-read {
    font-size: .68rem;
  }
}

@media (max-width: 420px) {
  .blog-grid {
    gap: 10px !important;
  }
  .blog-card {
    border-radius: 12px;
  }
  .blog-card-body {
    padding: 10px 8px 12px;
  }
  .blog-card-body h3 {
    font-size: .88rem;
  }
  .blog-card-body p {
    font-size: .74rem;
    margin-bottom: 8px;
  }
  .blog-card-read {
    display: inline-flex !important;
  }
}

/* Blog Post Hero Image */
.blog-post-hero-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  margin-bottom:32px;
  box-shadow:0 14px 36px rgba(44,95,52,.12);
  background:var(--husk);
}
.blog-post-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.field label{font-size:.8rem;font-weight:600;color:var(--canopy-dark);}
.field input,.field select,.field textarea{
  border:1px solid var(--line);background:var(--white);padding:12px 14px;border-radius:2px;
  font-family:var(--sans);font-size:.95rem;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--canopy);outline-offset:1px;}

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  background-color:var(--canopy-dark);
  background-image:linear-gradient(rgba(20,48,27,0.88), rgba(20,48,27,0.94)), url('../assets/images/breadcrumb.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  color:#cfe0cd;
  padding:72px 0 28px;
  border-top:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
}
.footer-top-strip{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgb(223 215 196);padding-bottom:32px;margin-bottom:48px;flex-wrap:wrap;gap:20px;}
.fts-item{display:flex;align-items:flex-start;gap:15px;flex:1;position:relative;}
.fts-item:not(:last-child)::after{content:"";position:absolute;right:0;top:10%;height:80%;width:1px;background:#a7a69d;}
.fts-icon{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-top:2px;transition:all 0.3s ease;}
.fts-item:hover .fts-icon{background:var(--gold);color:var(--canopy-dark);border-color:var(--gold);transform:scale(1.06);box-shadow:0 6px 16px rgba(198,138,44,0.35);}
.fts-text{display:flex;flex-direction:column;gap:6px;padding-right:20px;}
.fts-lbl{font-size:1.05rem;font-weight:600;color:#fff;font-family:var(--sans);}
.fts-val{font-size:0.95rem;color:rgba(255,255,255,0.7);text-decoration:none;line-height:1.4;display:block;}
.fts-val:hover{color:#fff;}
.fts-btn-wrap{margin-left:10px;}
@media(max-width:992px){.footer-top-strip{flex-direction:column;align-items:flex-start;padding-bottom:20px;gap:30px;}.fts-item{width:100%;}.fts-item:not(:last-child)::after{display:none;}.fts-btn-wrap{margin-left:0;}}
.footer-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1.05fr 1.25fr;
  gap:44px;
  margin-bottom:48px;
  align-items:start;
}
.footer-col-brand .footer-brand{
  margin-bottom:16px;
}
.footer-col-brand .footer-brand img{
  height:48px;
  width:auto;
  max-width:190px;
  object-fit:contain;
  display:block;
}
.footer-desc{
  color:#cfe0cd;
  font-size:.92rem;
  line-height:1.65;
  margin-bottom:22px;
  max-width:32ch;
}
.footer-social-wrap{
  margin-top:6px;
}
.footer-social-title{
  color:var(--white);
  font-family:var(--sans);
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 12px 0;
  letter-spacing:-0.01em;
}
.footer-social-links{
  display:flex;
  gap:12px;
  align-items:center;
}
.social-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  color:#cfe0cd;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  transition:all 0.25s ease;
}
.social-icon-btn:hover{
  color:var(--canopy-dark);
  background:var(--gold);
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(198,138,44,0.35);
}
.footer-badges{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:16px;
}
.footer-badge-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#a9c1a5;
  font-size:.74rem;
  padding:3px 8px;
  border-radius:3px;
  width:fit-content;
  letter-spacing:.02em;
}
.footer-badge-tag .badge-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
}
.footer-title{
  color:var(--white);
  font-family:var(--sans);
  font-weight:700;
  font-size:1.15rem;
  margin:0 0 20px 0;
  letter-spacing:-0.01em;
}
.footer-links-list{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links-list li{
  margin-bottom:10px;
}
.footer-links-list li a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#cfe0cd;
  font-size:.92rem;
  font-weight:500;
  transition:all 0.2s ease;
}
.footer-arrow{
  color:var(--gold);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:-0.05em;
  transition:transform 0.2s ease, color 0.2s ease;
}
.footer-links-list li a:hover{
  color:var(--gold);
  transform:translateX(4px);
}
.footer-links-list li a:hover .footer-arrow{
  color:var(--white);
}
.footer-contact-items,
.footer-contact-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.footer-contact-card{
  display:flex;
  align-items:center;
  gap:16px;
}
.footer-icon-badge{
  flex-shrink:0;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border-radius:50%;
  background:rgba(198,138,44,0.18);
  border:1px solid rgba(198,138,44,0.45);
  color:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
  transition:all 0.25s ease;
}
.footer-contact-card:hover .footer-icon-badge{
  background:var(--gold);
  color:var(--canopy-dark);
  border-color:var(--gold);
  transform:scale(1.06);
  box-shadow:0 6px 16px rgba(198,138,44,0.35);
}
.footer-contact-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  justify-content:center;
}
.footer-contact-lbl{
  font-size:.8rem;
  color:#a9c1a5;
  font-weight:500;
  line-height:1.2;
}
.footer-contact-main{
  font-size:.95rem;
  font-weight:700;
  color:var(--white);
  line-height:1.3;
  transition:color 0.2s ease;
}
a.footer-contact-main:hover{
  color:var(--gold);
  text-decoration:none;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.14);
  padding-top:24px;
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.82rem;
  color:#a9c1a5;
  flex-wrap:wrap;
  gap:12px;
}
.footer-partner a{
  color:var(--gold);
  font-weight:600;
  transition:all 0.2s ease;
}
.footer-partner a:hover{
  color:var(--white);
  text-decoration:underline;
}
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:30px;}
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media (max-width:540px){
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px;}
}

/* ---------- page banner / curved breadcrumb hero ---------- */
.page-banner-outer{
  max-width:var(--wrap);
  margin:24px auto 0;
  padding:0 24px;
}
.page-banner{
  position:relative;
  background-color:var(--canopy-dark);
  background-image:linear-gradient(rgba(20,48,27,.60), rgba(20,48,27,.75)), url('../assets/images/breadcrumb.webp');
  background-size:cover;
  background-position:center;
  padding:80px 24px;
  border-radius:14px;
  color:var(--white);
  text-align:center;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(44,95,52,.12);
  border:1px solid rgba(255,255,255,.1);
}
.page-banner-content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.page-banner h1{
  color:var(--white);
  font-size:clamp(2.2rem, 4.5vw, 3.4rem);
  margin:0;
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}
.page-banner-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:500;
  color:rgba(255,255,255,.85);
  margin-bottom:4px;
}
.page-banner-nav a{
  color:rgba(255,255,255,.9);
  transition:color .15s ease;
}
.page-banner-nav a:hover{
  color:var(--gold);
}
.page-banner-nav .sep{
  color:var(--gold);
  font-weight:700;
  font-size:.78rem;
  opacity:.9;
}
.page-banner-nav .current{
  color:var(--white);
  font-weight:600;
}
.page-banner-leaf-left{
  position:absolute;
  bottom:-10px;
  left:16px;
  width:110px;
  height:110px;
  opacity:.7;
  pointer-events:none;
  z-index:2;
}
.page-banner-leaf-right{
  position:absolute;
  bottom:-10px;
  right:16px;
  width:110px;
  height:110px;
  opacity:.7;
  pointer-events:none;
  z-index:2;
}
@media (max-width:768px){
  .page-banner-outer{
    margin-top:14px;
    padding:0 16px;
  }
  .page-banner{
    padding:44px 18px;
    border-radius:10px;
  }
  .page-banner-leaf-left,
  .page-banner-leaf-right{
    display:none;
  }
}

/* ---------- contact sidebar with icons ---------- */
/* ---------- contact sidebar with icons ---------- */
.contact-info-list{
  display:flex;
  flex-direction:column;
  gap:26px;
  margin:28px 0 32px;
}
.contact-info-item{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.contact-info-item:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.contact-icon-box{
  width:46px;
  height:46px;
  border-radius:6px;
  background:var(--canopy-tint);
  color:var(--canopy);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid rgba(44,95,52,.15);
  margin-top:2px;
}
.contact-icon-box svg{
  width:22px;
  height:22px;
  stroke:var(--canopy);
  fill:none;
}
.contact-info-content h4{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:400; /* removed font-weight */
  color:var(--canopy-dark);
  margin:0 0 6px;
  line-height:1.25;
}
.contact-info-content p, .contact-info-content a{
  font-size:.9rem;
  font-weight:400; /* removed font-weight */
  color:var(--ink);
  margin:0 0 4px;
  line-height:1.5;
}
.contact-info-content p.small{
  font-size:.82rem;
  color:var(--ink-soft);
  margin-top:3px;
  margin-bottom:0;
}
.contact-info-content a:hover{
  color:var(--canopy);
}

/* Contact Form Stack - Matched to Popup Modal Input Style */
.contact-form-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-form-stack .cust-input-group label{
  display:block;
  font-size:.82rem;
  font-weight:400; /* removed font-weight */
  color:var(--ink);
  margin-bottom:5px;
}
.contact-form-stack .cust-input-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}
.contact-form-stack .cust-input-icon{
  position:absolute;
  left:14px;
  width:18px;
  height:18px;
  color:var(--ink-soft);
  pointer-events:none;
  flex-shrink:0;
}
.contact-form-stack .cust-input-wrapper input,
.contact-form-stack .cust-input-wrapper textarea{
  width:100%;
  padding:11px 14px 11px 42px;
  border:1.5px solid var(--line);
  border-radius:8px;
  font-size:.88rem;
  color:var(--ink);
  background:transparent;
  transition:all .2s ease;
  outline:none;
  font-family:var(--sans);
  box-sizing:border-box;
}
.contact-form-stack .cust-input-wrapper input:focus,
.contact-form-stack .cust-input-wrapper textarea:focus{
  background:transparent;
  border-color:var(--canopy);
  box-shadow:0 0 0 3px rgba(44,95,52,.12);
}
.contact-form-stack .cust-textarea-wrapper{
  align-items:flex-start;
}
.contact-form-stack .cust-textarea-icon{
  top:14px;
}
.contact-form-stack textarea{
  resize:vertical;
  min-height:115px;
  line-height:1.5;
}

/* ---------- full width map ---------- */
.full-width-map-section{
  width:100%;
  margin-top:64px;
  background:var(--husk-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.full-width-map-section iframe{
  width:100%;
  height:450px;
  border:0;
  display:block;
}
.map-header-wrap{
  padding:20px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  border-bottom:1px solid var(--line);
  background:var(--white);
}

/* ---------- utility ---------- */
.center-text, .text-center{text-align:center;}
.mt-0{margin-top:0;}
.mt-36{margin-top:36px;}
.mb-0{margin-bottom:0;}
.small{font-size:.82rem;}
.stamp-tag{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.05em;
  color:var(--ink-soft);
  border:1px dashed var(--line);
  padding:8px 12px;
  border-radius:2px;
  display:inline-block;
}
.two-col-cta{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.two-col-left{
  max-width:680px;
}

/* ---------- layout & utility classes replacing inline styles ---------- */
.hero-tight{padding-bottom:20px;}
.hero-lede-lg{font-size:1.15rem;}
.hero-lede-md{font-size:1.1rem;}
.max-w-16ch{max-width:16ch;}
.max-w-18ch{max-width:18ch;}
.max-w-760{max-width:760px;}
.max-w-820{max-width:820px;}
.max-w-32ch{max-width:32ch;}
.serif-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--canopy-dark);
}
.serif-quote-sm{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  color:var(--canopy-dark);
}
.card-padded{padding:34px;}
.card-padded-lg{padding:36px;}
.card-padded-sm{padding:22px;}
.card-padded-md{padding:30px;}
.card-accent-border{border-color:var(--canopy);}
.heading-md{font-size:1.3rem;}
.heading-lg{font-size:1.45rem;}
.heading-xl{font-size:40px;}
.heading-2xl{font-size:2.2rem;margin-bottom:.2em;}
.eyebrow-center{justify-content:center;}
.eyebrow-no-margin{margin-bottom:0;}
.pillar-col{flex-direction:column;}
.leaf-art-16-10{aspect-ratio:16/10;margin-bottom:20px;}
.leaf-art-16-9{aspect-ratio:16/9;margin-bottom:32px;}
.leaf-art-1-1{aspect-ratio:1/1;}
.btn-white-outline{border-color:#fff;color:#fff;}
.btn-white-outline:hover{background:#fff;color:var(--canopy-dark);}
.btn-size-toggle{padding:10px 20px;}
.btn-full-width{width:100%;justify-content:center;padding:15px;}
.badge-row-bordered{margin-top:24px;padding-top:20px;border-top:1px dashed var(--line);}
.badge-row-mt{margin-top:18px;}
.badge-col-list{display:flex;flex-direction:column;gap:26px;}
.badge-grid-gap{gap:20px;}
.process-list-compact{display:flex;flex-direction:column;gap:0;}
.process-step-first{padding-top:0;border-top:0;}
.section-head-mb-40{margin-bottom:40px;}
.section-pt-0{padding-top:0;}
.section-pt-10{padding-top:10px;}
.section-pt-20{padding-top:20px;}
.section-pt-30{padding-top:30px;}
.section-pt-40{padding-top:40px;}
.section-pt-44{padding-top:44px;}
.section-pt-60{padding-top:60px;}
.section-pb-0{padding-bottom:0;}
.section-pb-20{padding-bottom:20px;}
.section-pb-30{padding-bottom:30px;}
.section-pb-40{padding-bottom:40px;}
.two-col-cta-top{align-items:flex-start;}
.two-col-cta-bordered{margin-top:48px;padding-top:32px;border-top:1px solid var(--line);}
.microgreens-final-cta{
  margin-top:76px;
  padding:30px 28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(135deg, #e8f2e2 0%, #f5f9ef 100%);
  box-shadow:0 10px 28px rgba(44,95,52,.06);
}
.link-canopy{color:var(--canopy);}
.link-canopy-bold{color:var(--canopy);font-weight:600;}
.text-canopy-dark-bold{color:var(--canopy-dark);font-weight:600;}
.text-canopy-dark-med{color:var(--canopy-dark);font-weight:500;}
.stamp-tag-block{display:block;margin-top:28px;}
.stamp-tag-block-my{display:block;margin:18px 0;}
.btn-row-mt-20{margin-top:20px;}
.mb-10{margin-bottom:10px;}
.mb-12{margin-bottom:12px;}
.mb-16{margin-bottom:16px;}
.mb-20{margin-bottom:20px;}
.mb-24{margin-bottom:24px;}
.mt-14{margin-top:14px;}
.mt-18{margin-top:18px;}
.mt-36{margin-top:36px;}
.grid-start{align-items:flex-start;}
.product-size-section{margin:24px 0;}
.ring-lg{width:56px;height:56px;}

/* ---------- process timeline & zig-zag layout ---------- */
/* ---------- 5-stage connected timeline with staggered animation ---------- */
.process-stages-section{
  padding:60px 0 50px;
  background:transparent;
  overflow:hidden;
}
.process-timeline-wrap{
  position:relative;
  margin-top:36px;
  background:var(--husk-deep);
  border:1px solid var(--line);
  border-radius:12px;
  padding:36px 20px 30px;
  box-shadow:0 8px 24px rgba(44,95,52,.04);
}
/* Home Page Process Section: Full Background with Seamless Timeline */
.home-process-section{
  padding:70px 0 65px;
  background:var(--husk-deep);
}
.home-process-section .process-timeline-wrap{
  background:transparent;
  border:none;
  padding:10px 0 0;
  box-shadow:none;
  margin-top:28px;
}
.process-timeline-line{
  position:absolute;
  top:124px;
  left:10%;
  right:10%;
  height:2px;
  border-top:2px dashed var(--gold);
  z-index:1;
  transform:scaleX(1);
  transform-origin:left center;
  transition:transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) .1s;
}
.process-stages-section.is-visible .process-timeline-line{
  transform:scaleX(1);
}
.process-timeline-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
  position:relative;
  z-index:2;
}
.process-stage-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:transform, opacity;
}
.process-stages-section.is-visible .process-stage-col.stage-item-1{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:0.15s;
}
.process-stages-section.is-visible .process-stage-col.stage-item-2{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:0.45s;
}
.process-stages-section.is-visible .process-stage-col.stage-item-3{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:0.75s;
}
.process-stages-section.is-visible .process-stage-col.stage-item-4{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:1.05s;
}
.process-stages-section.is-visible .process-stage-col.stage-item-5{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:1.35s;
}

.stage-badge-pill{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--canopy-dark);
  background:var(--white);
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  transition:all .2s ease;
}
.process-stage-col:hover .stage-badge-pill{
  background:var(--canopy);
  color:var(--white);
  border-color:var(--canopy);
}
.stage-image-node{
  width:104px;
  height:104px;
  border-radius:50%;
  background:var(--white);
  border:3px solid var(--white);
  box-shadow:0 6px 20px rgba(44,95,52,.12), 0 0 0 1px var(--line);
  overflow:hidden;
  margin-bottom:16px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative;
  z-index:2;
}
.stage-image-node img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.process-stage-col:hover .stage-image-node{
  transform:scale(1.08) translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 10px 25px rgba(235,186,82,.35), 0 0 0 2px var(--gold);
}
.process-stage-col:hover .stage-image-node img{
  transform:scale(1.12);
}
.stage-title{
  font-family:var(--sans);
  font-size:.96rem;
  font-weight:700;
  color:var(--canopy-dark);
  margin:0 0 6px;
  line-height:1.3;
  transition:color .2s ease;
}
.process-stage-col:hover .stage-title{
  color:var(--canopy);
}
.stage-desc{
  font-size:.8rem;
  color:var(--ink-soft);
  line-height:1.45;
  margin:0;
  max-width:24ch;
}
.process-carousel-nav{
  display:none;
}

@media (max-width:1024px) and (min-width:769px){
  .process-timeline-line{
    display:none;
  }
  .process-timeline-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:30px 20px;
  }
}
@media (max-width:768px){
  .process-timeline-wrap{
    padding:24px 0 20px;
    margin-top:20px;
    overflow:hidden;
    position:relative;
  }
  .process-timeline-line{
    display:none !important;
  }
  .process-timeline-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:0 24px;
    gap:0;
    position:relative;
    z-index:2;
  }
  .process-timeline-grid::-webkit-scrollbar{
    display:none;
  }
  .process-stage-col{
    flex:0 0 150px;
    width:150px;
    scroll-snap-align:center;
    opacity:1 !important;
    transform:none !important;
    position:relative;
    z-index:2;
    padding:0 8px;
    box-sizing:border-box;
  }
  /* Continuous Connecting Dotted Line across every stage */
  .process-stage-col::before{
    content:"";
    position:absolute;
    top:72px;
    left:50%;
    width:100%;
    height:2px;
    border-top:2px dashed var(--gold);
    z-index:1;
    pointer-events:none;
  }
  .process-stage-col:last-child::before{
    display:none;
  }
  .stage-badge-pill{
    font-size:.65rem;
    padding:3px 8px;
    margin-bottom:10px;
    position:relative;
    z-index:2;
  }
  .stage-image-node{
    width:84px;
    height:84px;
    border-width:2.5px;
    margin-bottom:12px;
    box-shadow:0 4px 14px rgba(44,95,52,.14);
    position:relative;
    z-index:2;
    background:#ffffff;
  }
  .stage-title{
    font-size:.84rem;
    line-height:1.24;
    margin:0;
    position:relative;
    z-index:2;
  }
  .process-carousel-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:16px;
  }
  .process-carousel-nav .testi-nav-btn{
    width:38px;
    height:38px;
  }
  .process-carousel-nav .testi-nav-btn svg{
    width:18px;
    height:18px;
  }
}

.process-story-section .wrap{
  position:relative;
}
.process-story-section .wrap::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:rgba(235,186,82,.30);
  transform:translateX(-50%);
  z-index:0;
}
.process-story-section .wrap::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:2px;
  height:var(--timeline-progress, 0%);
  background:linear-gradient(to bottom, var(--sage), var(--canopy), var(--clay));
  border-radius:0 0 3px 3px;
  transform:translateX(-50%);
  transition:height .18s linear;
  z-index:0;
}
.process-card-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 56px minmax(0, 1fr);
  gap:28px;
  align-items:center;
  padding:50px 0;
  /* border-bottom:1px solid var(--line); */
  position:relative;
  z-index:1;
}
.process-card-row > div:nth-child(2),
.process-card-row > div:nth-child(3),
.process-stage-marker-icon{
  opacity:1;
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
.process-card-row > div:nth-child(2){
  transform:translateX(0);
}
.process-card-row > div:nth-child(3){
  transform:translateX(0);
}
.process-stage-marker-icon{
  transform:scale(1);
}
.process-story-section.is-visible .process-card-row > div:nth-child(2),
.process-story-section.is-visible .process-card-row > div:nth-child(3),
.process-story-section.is-visible .process-stage-marker-icon{
  opacity:1;
  transform:none;
}
.process-story-section.is-visible .process-card-row:nth-child(2) > div:nth-child(2),
.process-story-section.is-visible .process-card-row:nth-child(2) > div:nth-child(3),
.process-story-section.is-visible .process-card-row:nth-child(2) .process-stage-marker-icon{
  transition-delay:.12s;
}
.process-story-section.is-visible .process-card-row:nth-child(3) > div:nth-child(2),
.process-story-section.is-visible .process-card-row:nth-child(3) > div:nth-child(3),
.process-story-section.is-visible .process-card-row:nth-child(3) .process-stage-marker-icon{
  transition-delay:.24s;
}
.process-story-section.is-visible .process-card-row:nth-child(4) > div:nth-child(2),
.process-story-section.is-visible .process-card-row:nth-child(4) > div:nth-child(3),
.process-story-section.is-visible .process-card-row:nth-child(4) .process-stage-marker-icon{
  transition-delay:.36s;
}
.process-story-section.is-visible .process-card-row:nth-child(5) > div:nth-child(2),
.process-story-section.is-visible .process-card-row:nth-child(5) > div:nth-child(3),
.process-story-section.is-visible .process-card-row:nth-child(5) .process-stage-marker-icon{
  transition-delay:.48s;
}
.process-story-section.is-visible .process-card-row:nth-child(6) > div:nth-child(2),
.process-story-section.is-visible .process-card-row:nth-child(6) > div:nth-child(3),
.process-story-section.is-visible .process-card-row:nth-child(6) .process-stage-marker-icon{
  transition-delay:.60s;
}
.process-stage-marker-icon:hover{
  border-color:var(--canopy);
  box-shadow:0 0 0 5px var(--husk), 0 0 0 8px rgba(235,186,82,.16), 0 5px 16px rgba(44,95,52,.18);
}
@media (prefers-reduced-motion:reduce){
  .process-story-section .wrap::after,
  .process-card-row > div:nth-child(2),
  .process-card-row > div:nth-child(3),
  .process-stage-marker-icon{
    transition:none;
    opacity:1;
    transform:none;
  }
}
.process-card-row:first-child{
  padding-top:0;
}
.process-card-row:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.process-card-row.reverse{
  direction:ltr;
}
.process-card-row.reverse > *{
  direction:ltr;
}
.process-card-row.reverse > div:nth-child(2){
  grid-column:3;
}
.process-card-row.reverse > div:nth-child(3){
  grid-column:1;
}
.process-stage-marker{
  position:relative;
  grid-column:2;
  grid-row:1;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
}
.process-card-row > div:nth-child(2){
  grid-column:1;
  grid-row:1;
}
.process-card-row > div:nth-child(3){
  grid-column:3;
  grid-row:1;
}
.process-stage-marker-icon{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid var(--gold);
  border-radius:50%;
  background:var(--husk);
  color:var(--gold-dark);
  box-shadow:0 0 0 5px var(--husk), 0 3px 12px rgba(44,95,52,.12);
}
.process-stage-marker-icon svg{
  width:21px;
  height:21px;
}
.process-media-box{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(44,95,52,.10);
  background:var(--canopy-tint);
}
.process-media-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.process-media-box:hover img{
  transform:scale(1.04);
}
.process-badge-tag{
  position:absolute;
  bottom:14px;
  left:14px;
  background:rgba(25,59,33,.88);
  backdrop-filter:blur(4px);
  color:#ffffff;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  padding:6px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.15);
  text-transform:uppercase;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.process-badge-tag svg{
  width:13px;
  height:13px;
  flex-shrink:0;
}
.process-meta-list{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:16px 0 20px;
}
.process-meta-pill{
  font-family:var(--mono);
  font-size:.72rem;
  background:var(--canopy-tint);
  color:var(--canopy-dark);
  padding:5px 12px;
  border-radius:2px;
  border:1px solid var(--line);
}
.process-lead{
  font-size:1.02rem;
  color:var(--ink);
  line-height:1.6;
  margin-bottom:18px;
  font-weight:500;
}
.process-points-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.process-points-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.92rem;
  line-height:1.45;
  color:var(--ink-soft);
}
.process-points-list li svg{
  width:16px;
  height:16px;
  stroke:var(--canopy);
  stroke-width:2.2;
  fill:none;
  flex-shrink:0;
  margin-top:2px;
}

@media (max-width:880px){
  .process-story-section .wrap::before{
    left:21px;
  }
  .process-story-section .wrap::after{
    left:21px;
  }
  .process-card-row, .process-card-row.reverse{
    grid-template-columns:42px minmax(0, 1fr);
    direction:ltr;
    gap:18px;
    padding:36px 0;
  }
  .process-card-row > .process-stage-marker{
    grid-column:1;
    grid-row:1 / span 2;
    min-height:100%;
  }
  .process-card-row > div:nth-child(2),
  .process-card-row > div:nth-child(3){
    grid-column:2;
  }
  .process-card-row.reverse > div:nth-child(2),
  .process-card-row.reverse > div:nth-child(3){
    grid-column:2;
  }
  .process-stage-marker-icon{
    width:34px;
    height:34px;
  }
  .process-stage-marker-icon svg{
    width:17px;
    height:17px;
  }
}

/* ---------- quality commit cards ---------- */
.quality-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:20px 18px;
  display:flex;
  align-items:center;
  gap:16px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.quality-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(44,95,52,.08);
}
.process-final-cta{
  padding:86px 0 92px;
  background:#faf6ec;
  text-align:center;
  border-top:1px solid var(--line);
}
.process-final-cta .eyebrow{
  margin-bottom:14px;
}
.process-final-cta h2{
  max-width:720px;
  margin:0 auto 24px;
  line-height:1.2;
}
.process-final-cta-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.process-final-cta-button svg{
  width:15px;
  height:15px;
}
@media(max-width:600px){
  .process-final-cta{
    padding:64px 0 70px;
  }
  .process-final-cta-break{
    display:none;
  }
}
.quality-card-icon{
  width:44px;
  height:44px;
  border-radius:4px;
  background:var(--canopy-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid var(--line);
}
.quality-card-icon svg{
  width:22px;
  height:22px;
  stroke:var(--canopy);
  fill:none;
}
.quality-card h3{
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  color:var(--canopy-dark);
  margin:0;
  line-height:1.35;
}

/* ---------- about page modern layout ---------- */
.about-stat-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin:28px 0;
}
.about-stat-box{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:18px 16px;
  text-align:center;
}
.about-stat-box .num{
  font-family:var(--serif);
  font-size:1.8rem;
  font-weight:600;
  color:var(--canopy);
  display:block;
  line-height:1;
  margin-bottom:6px;
}
.about-stat-box .lbl{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.05em;
}
@media (max-width:640px){
  .about-stat-strip{
    grid-template-columns:1fr;
  }
}

.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.compare-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:34px 30px;
  position:relative;
  transition:transform .2s ease;
}
.compare-card.after-card{
  border-color:var(--canopy);
  background:linear-gradient(180deg, #fff 0%, var(--canopy-tint) 100%);
  box-shadow:0 12px 28px rgba(44,95,52,.08);
}
.compare-card .badge-indicator,
.badge-indicator{
  display:inline-block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:2px;
  margin-bottom:14px;
  font-weight:600;
  align-self:flex-start;
}
.badge-before{
  background:#f1ece5;
  color:var(--ink-soft);
}
.badge-after{
  background:var(--canopy);
  color:var(--white);
}
.compare-list{
  list-style:none;
  padding:0;
  margin:20px 0 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.compare-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  color:var(--ink);
  line-height:1.45;
}
.compare-list li .icon-cross{
  color:#b74b4b;
  font-weight:700;
}
.compare-list li .icon-check{
  color:var(--canopy);
  font-weight:700;
}
@media (max-width:768px){
  .compare-grid{
    grid-template-columns:1fr;
  }
}

.vision-mission-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.vm-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:40px 36px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 8px 24px rgba(44,95,52,.04);
  transition:transform .2s ease;
}
.vm-card:hover{
  transform:translateY(-2px);
}
.vm-card-dark{
  background:var(--canopy-dark);
  color:var(--husk);
  border-color:rgba(255,255,255,.1);
}
.vm-card-dark h3{
  color:var(--white);
}
.vm-card-dark p{
  color:#cfe0cd;
}
.vm-card-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}
.vm-card-icon{
  width:48px;
  height:48px;
  border-radius:4px;
  background:var(--canopy-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid var(--line);
}
.vm-card-icon svg{
  width:24px;
  height:24px;
  stroke:var(--canopy);
  fill:none;
}
.vm-card-dark .vm-card-icon{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15);
}
.vm-card-dark .vm-card-icon svg{
  stroke:var(--gold);
}
.vm-pill-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:2px;
  margin-top:24px;
  border:1px solid var(--line);
  background:var(--husk);
  color:var(--canopy-dark);
  font-weight:600;
  align-self:flex-start;
}
.vm-card-dark .vm-pill-tag{
  background:rgba(235,186,82,.14);
  border-color:rgba(235,186,82,.3);
  color:var(--gold);
}
@media (max-width:768px){
  .vision-mission-grid{
    grid-template-columns:1fr;
  }
}

/* ---------- Organic Founder Showcase Layout (Matching Reference) ---------- */
.founder-showcase-wrap{
  max-width:1120px;
  margin:0 auto;
}
.founder-showcase-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  gap:0;
}
/* Subtle center dividing vertical line with delicate central sprout icon */
.founder-showcase-grid::before{
  content:"";
  position:absolute;
  left:50%;
  top:20px;
  bottom:20px;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(217,205,176,.8) 15%, rgba(217,205,176,.8) 85%, transparent);
  transform:translateX(-50%);
  pointer-events:none;
}
.founder-item-col{
  padding:0 36px;
  display:flex;
  flex-direction:column;
  position:relative;
}
.founder-item-col:first-child{
  padding-left:12px;
  padding-right:48px;
}
.founder-item-col:last-child{
  padding-left:48px;
  padding-right:12px;
}
.founder-center-sprout{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%, -50%);
  width:44px;
  height:44px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  box-shadow:0 3px 12px rgba(44,95,52,.12);
}
.founder-sprout-img{
  width:30px;
  height:30px;
  object-fit:contain;
  display:block;
}

/* Organic curved blob background for images */
.founder-blob-outer{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
  position:relative;
}
.founder-blob-bg{
  width:320px;
  height:auto;
  max-width:100%;
  overflow:visible;
  background:transparent;
}
.founder-blob-bg.founder-blob-alt{
  border-radius:0;
}
.founder-item-col:hover .founder-blob-bg{
  transform:scale(1.02);
}
.founder-blob-img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  display:block;
  transition:transform .4s ease;
}
.founder-item-col:hover .founder-blob-img{
  transform:scale(1.03);
}

/* Name & Role Header */
.founder-info-header{
  text-align:center;
  margin-bottom:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.founder-display-name{
  font-family:var(--serif);
  font-size:1.55rem;
  font-weight:700;
  color:var(--canopy-dark);
  margin:0 0 6px;
  line-height:1.2;
}
.founder-display-role{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--ink-soft);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:12px;
  display:block;
}
.founder-role-divider{
  width:44px;
  height:2.5px;
  background:var(--gold);
  border-radius:2px;
}

/* Message Block */
.founder-message-group{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.founder-msg-label{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--canopy);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 4px;
}
.founder-message-group p{
  font-size:.86rem;
  color:var(--ink-soft);
  line-height:1.65;
  margin:0;
}

@media (max-width:850px){
  .founder-showcase-grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .founder-showcase-grid::before,
  .founder-center-sprout{
    display:none;
  }
  .founder-item-col,
  .founder-item-col:first-child,
  .founder-item-col:last-child{
    padding:0 12px;
  }
  .founder-blob-bg{
    max-width:300px;
  }
  .founder-display-name{
    font-size:1.6rem;
  }
}

.quote-highlight-box{
  background:var(--canopy-tint);
  color:var(--husk);
  border-radius:4px;
  padding:36px 32px;
  text-align:center;
  margin-top:44px;
  border:1px solid rgba(255,255,255,.1);
}
.quote-highlight-box p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.25rem;
  color:var(--canopy);
  margin:0 0 12px;
  line-height:1.5;
}
.quote-highlight-box span{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--gold);
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media (max-width:768px){
  .founder-cards-grid{
    gap:24px;
  }
  .founder-card-body{
    padding:24px 20px 20px;
  }
  .founder-message-title{
    font-size:1.2rem;
  }
}

/* ---------- nutritional shift modern comparison UI ---------- */
.compare-grid-visual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:stretch;
}
.compare-card-box{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:all .3s ease;
}
.compare-card-box.active-card{
  border-color:var(--canopy);
  box-shadow:0 16px 36px rgba(44,95,52,.12);
  transform:translateY(-4px);
}
.compare-card-img{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--canopy-tint);
}
.compare-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.compare-header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  gap:12px;
  flex-wrap:wrap;
}
.compare-header-row .badge-indicator{
  margin-bottom:0;
}
.compare-sub-label{
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--ink-soft);
  background:var(--husk);
  padding:5px 12px;
  border-radius:2px;
  border:1px solid var(--line);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.compare-sub-green{
  color:var(--canopy-dark);
  background:var(--canopy-tint);
  border-color:rgba(44,95,52,.22);
}
.compare-card-content{
  padding:28px 24px;
  flex-grow:1;
  display:flex;
  flex-direction:column;
}
@media (max-width:768px){
  .compare-grid-visual{
    grid-template-columns:1fr;
  }
  .compare-card-box.active-card{
    transform:none;
  }
}

/* ---------- REDESIGNED nutritional shift — badge comparison ---------- */
.nutri-compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
  position:relative;
}
.nutri-shift-section{
  position:relative;
  overflow:hidden;
}
.nutri-shift-section > .wrap{
  position:relative;
  z-index:1;
}
.nutri-shift-elements{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.16;
  pointer-events:none;
}

/* --- shared card base --- */
.nutri-card{
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  position:relative;
}
.nutri-card:hover{
  transform:translateY(-6px);
}

/* --- LIGHT card (vegetables) --- */
.nutri-card-light{
  background:#fffdf8;
  border:1px solid #e8ddc6;
  box-shadow:0 4px 20px rgba(200,180,140,.10);
}
.nutri-card-light:hover{
  box-shadow:0 12px 32px rgba(200,180,140,.16);
}
.nutri-card-light .nutri-card-title{
  color:#5a6b4f;
  font-size:1.35rem;
}
.nutri-card-light .nutri-card-desc{
  color:#556448;
}

/* --- DARK card (microgreens) — premium look --- */
.nutri-card-dark{
  background:linear-gradient(165deg, #0d2614 0%, #163d22 40%, #1a4a28 100%);
  border:1px solid rgba(82,190,100,.25);
  box-shadow:0 8px 32px rgba(22,61,34,.30), 0 0 0 1px rgba(82,190,100,.08);
}
.nutri-card-dark:hover{
  box-shadow:0 20px 50px rgba(22,61,34,.40), 0 0 40px rgba(82,190,100,.12);
}
.nutri-card-dark .nutri-card-title{
  color:#ffffff;
  font-size:1.45rem;
}
.nutri-card-dark .nutri-card-desc{
  color:#a8cfb0;
}

/* subtle ambient glow behind the dark card */
.nutri-card-glow{
  position:absolute;
  top:-40px;
  right:-40px;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(82,190,100,.15) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}

/* --- image wrapper --- */
.nutri-card-img-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
}
.nutri-card-light .nutri-card-img-wrap{
  background:#f0ece3;
}
.nutri-card-dark .nutri-card-img-wrap{
  background:#0d2614;
}
.nutri-card-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.nutri-card:hover .nutri-card-img-wrap img{
  transform:scale(1.06);
}

/* --- card body --- */
.nutri-card-body{
  padding:28px 26px 30px;
  flex-grow:1;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}

/* --- label row --- */
.nutri-card-label-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.nutri-label{
  display:inline-block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:20px;
}
.nutri-label-light{
  background:#f0ece3;
  color:#8a8068;
  border:1px solid #e0d6c0;
}
.nutri-label-dark{
  background:rgba(82,190,100,.15);
  color:#7ee89a;
  border:1px solid rgba(82,190,100,.3);
}

/* star badge for microgreens */
.nutri-star-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fbbf24;
  background:rgba(251,191,36,.12);
  border:1px solid rgba(251,191,36,.3);
  padding:5px 12px;
  border-radius:20px;
  animation:pulseGold 2.5s ease-in-out infinite;
}
@keyframes pulseGold{
  0%,100%{ box-shadow:0 0 0 0 rgba(251,191,36,.15); }
  50%{ box-shadow:0 0 12px 4px rgba(251,191,36,.2); }
}

/* --- card title / desc --- */
.nutri-card-title{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.2;
  margin:0 0 10px;
}
.nutri-card-desc{
  font-size:.88rem;
  line-height:1.55;
  margin:0 0 20px;
}

/* --- badges wrap --- */
.nutri-badges-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}

/* --- individual badges --- */
.nutri-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  padding:10px 16px;
  border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:default;
}
.nutri-badge:hover{
  transform:translateY(-2px);
}
.nutri-badge-icon{
  font-size:1rem;
  flex-shrink:0;
}
.nutri-badge-stat{
  font-size:1.15rem;
  font-weight:900;
  color:#fbbf24;
  letter-spacing:-.02em;
  flex-shrink:0;
}

/* light badges (vegetables) */
.nutri-badge-light{
  background:#f7f3ea;
  color:#7a7060;
  border:1px solid #e8ddc6;
}
.nutri-badge-light:hover{
  box-shadow:0 4px 12px rgba(200,180,140,.15);
}

/* dark badges (microgreens) */
.nutri-badge-dark{
  background:rgba(82,190,100,.1);
  color:#c5e8cd;
  border:1px solid rgba(82,190,100,.22);
}
.nutri-badge-dark:hover{
  box-shadow:0 4px 16px rgba(82,190,100,.2);
  background:rgba(82,190,100,.16);
}

/* highlight badge — the 40x one */
.nutri-badge-highlight{
  background:rgba(251,191,36,.1);
  border-color:rgba(251,191,36,.3);
  color:#fde68a;
  font-weight:700;
  position:relative;
  overflow:hidden;
}
.nutri-badge-highlight::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(251,191,36,.12), transparent);
  animation:shimmerBadge 3s ease-in-out infinite;
}
@keyframes shimmerBadge{
  0%{ left:-100%; }
  100%{ left:200%; }
}

/* --- responsive --- */
@media (max-width:900px){
  .nutri-shift-elements{
    inset:50% auto auto 50%;
    width:220%;
    height:auto;
    max-width:none;
    object-fit:contain;
    transform:translate(-50%, -50%);
    opacity:.2;
  }
  .nutri-compare-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .nutri-card:hover{
    transform:none;
  }
}
@media (max-width:480px){
  .nutri-card-body{
    padding:22px 18px 24px;
  }
  .nutri-badge{
    font-size:.78rem;
    padding:8px 12px;
  }
  .nutri-card-title{
    font-size:1.2rem !important;
  }
}

/* ---------- unified purpose showcase clean layout ---------- */
.purpose-showcase{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:0 10px 30px rgba(44,95,52,.06);
  overflow:hidden;
}
.purpose-showcase-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.purpose-col{
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--white);
}
.purpose-col:first-child{
  border-right:1px solid var(--line);
}
.purpose-header-block{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:20px;
}
.purpose-icon-box{
  width:56px;
  height:56px;
  border-radius:4px;
  background:var(--canopy-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid var(--line);
}
.purpose-icon-box svg{
  width:28px;
  height:28px;
  stroke:var(--canopy);
  fill:none;
}
.purpose-title-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.purpose-header-tag{
  font-family:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gold-dark);
  line-height:1;
}
.purpose-title-group h3{
  margin:0;
  line-height:1.25;
}
.purpose-col p{
  color:var(--ink-soft);
  line-height:1.6;
}
.purpose-badges-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
@media (max-width:820px){
  .purpose-showcase-grid{
    grid-template-columns:1fr;
  }
  .purpose-col:first-child{
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .purpose-col{
    padding:36px 24px;
  }
}

/* ---------- open non-card pillar layout ---------- */
.pillars-open-list{
  display:flex;
  flex-direction:column;
}
.pillar-open-row{
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.pillar-open-row:first-child{
  padding-top:0;
}
.pillar-open-row:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.pillar-open-num{
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--gold-dark);
  font-weight:700;
  letter-spacing:.08em;
  background:var(--white);
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:2px;
  flex-shrink:0;
  margin-top:2px;
}
.pillar-open-row h3{
  font-size:1.25rem;
  color:var(--canopy-dark);
  margin:0 0 6px;
  line-height:1.3;
}
.pillar-open-row p{
  font-size:.9rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0;
}
@media (max-width:768px){
  .pillar-open-row{
    gap:16px;
    padding:20px 0;
  }
}

/* ---------- why choose us arc showcase ---------- */
.why-arc-section{
  position:relative;
  background:linear-gradient(rgba(20,48,27,.90), rgba(20,48,27,.90)), url('../assets/images/breadcrumb.webp') center/cover no-repeat;
  color:var(--husk);
  padding:90px 0 70px;
  overflow:hidden;
}
.why-arc-section .eyebrow{
  color:var(--gold);
}
.why-arc-section h2{
  color:var(--white);
}
.why-arc-section p{
  color:#cfe0cd;
}
.why-arc-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
}
.why-arc-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
  position:relative;
  z-index:4;
  margin-top:20px;
}
.why-arc-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1), transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:transform, opacity;
}
.why-arc-node.node-1{ margin-top:120px; }
.why-arc-node.node-2{ margin-top:50px; }
.why-arc-node.node-3{ margin-top:0px; }
.why-arc-node.node-4{ margin-top:50px; }
.why-arc-node.node-5{ margin-top:120px; }

/* Staggered triggers with smoother pacing */
.why-arc-section.is-visible .why-arc-node.node-1{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:0.15s;
}
.why-arc-section.is-visible .why-arc-node.node-2{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:0.42s;
}
.why-arc-section.is-visible .why-arc-node.node-3{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:0.70s;
}
.why-arc-section.is-visible .why-arc-node.node-4{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:0.98s;
}
.why-arc-section.is-visible .why-arc-node.node-5{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:1.26s;
}

.why-arc-section.is-visible .why-arc-node:hover{
  transform:translateY(-6px) scale(1.03);
}

.arc-badge-wrap{
  position:relative;
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}
.arc-badge{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--gold);
  color:var(--husk);
  box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.2);
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
  transition:transform .3s ease, box-shadow .3s ease;
}
.why-arc-node:hover .arc-badge{
  transform:scale(1.1);
  box-shadow:0 8px 24px rgba(235,186,82,.4), 0 0 0 4px rgba(255,255,255,.35);
}
.arc-rays{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:spinRays 25s linear infinite;
  pointer-events:none;
}
.arc-node-title{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  color:var(--white);
  line-height:1.35;
  max-width:18ch;
  transition:color .2s ease;
}
.why-arc-node:hover .arc-node-title{
  color:var(--gold);
}

.why-arc-centerpiece{
  margin:-60px auto 0;
  max-width:540px;
  position:relative;
  z-index:3;
  text-align:center;
  opacity:1;
  transform:scale(1) translateY(0);
  transition:opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:transform, opacity;
}
.why-arc-section.is-visible .why-arc-centerpiece{
  opacity:1;
  transform:scale(1) translateY(0);
  transition-delay:1.50s;
}
.why-arc-centerpiece img{
  width:100%;
  height:auto;
  max-height:280px;
  object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(44,95,52,.18));
  transition:transform .4s ease;
}
.why-arc-centerpiece:hover img{
  transform:scale(1.03);
}

@media (max-width:980px){
  .why-arc-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .why-arc-node.node-1,
  .why-arc-node.node-2,
  .why-arc-node.node-3,
  .why-arc-node.node-4,
  .why-arc-node.node-5{
    margin-top:0;
  }
  .why-arc-centerpiece{
    margin:30px auto 0;
    max-width:400px;
  }
}
@media (max-width:768px){
  .why-arc-section{
    padding:60px 0 50px;
  }
  .why-arc-wrap{
    padding:0 16px;
  }
  .why-arc-section h2{
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
    font-size:1.65rem;
    line-height:1.25;
  }
}
@media (max-width:600px){
  .why-arc-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
  .why-arc-node.node-5{
    grid-column:span 2;
  }
  .why-arc-section h2{
    font-size:1.45rem;
  }
  .why-arc-section p{
    font-size:.88rem;
  }
}

/* ---------- modern detailed product cards ---------- */
.product-grid-modern{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}
.product-card-modern{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
}
.product-card-modern:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(44,95,52,.12);
  border-color:var(--canopy);
}
.product-media-box{
  position:relative;
  width:100%;
  height:210px;
  background:var(--canopy-tint);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.product-media-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.product-card-modern:hover .product-media-box img{
  transform:scale(1.06);
}
/* ============================================================
   LIVING HARVEST BADGES & ANIMATIONS (ON PRODUCT IMAGE)
   ============================================================ */
.product-badge-top-left,
.detail-stage-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
  overflow: hidden;
}

.detail-stage-pill {
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  font-size: 0.78rem;
}

/* Hover lift on image card */
.product-card-modern:hover .product-badge-top-left {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}

/* Subtle Shimmer Sheen Sweep */
.product-badge-top-left::after,
.detail-stage-pill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

/* 1. GROWING STAGE BADGE (ACTIVE LIVING STATE WITH BREATHING GLOW) */
.stage-badge.growing,
.stage-badge.sowing {
  background: rgba(220, 247, 218, 0.95);
  color: #14532d;
  border: 1px solid rgba(34, 197, 94, 0.4);
  font-weight: 700;
}

.product-badge-top-left.growing,
.product-badge-top-left.sowing,
.detail-stage-pill.growing,
.detail-stage-pill.sowing {
  animation: growingZoomInOut 2s ease-in-out infinite;
  transform-origin: top left;
}

.product-badge-top-left.growing::after,
.detail-stage-pill.growing::after {
  animation: badgeSheenSweep 3.8s ease-in-out infinite;
}

/* 2. READY TO HARVEST STAGE BADGE */
.stage-badge.ready,
.stage-badge.ready_to_harvest {
  background: rgba(254, 243, 199, 0.95);
  color: #854d0e;
  border: 1px solid rgba(217, 119, 6, 0.4);
  font-weight: 700;
}

.product-badge-top-left.ready,
.product-badge-top-left.ready_to_harvest,
.detail-stage-pill.ready,
.detail-stage-pill.ready_to_harvest {
  animation: readyZoomInOut 2.4s ease-in-out infinite;
  transform-origin: top left;
}

.product-badge-top-left.ready::after,
.product-badge-top-left.ready_to_harvest::after,
.detail-stage-pill.ready::after,
.detail-stage-pill.ready_to_harvest::after {
  animation: badgeSheenSweep 4.2s ease-in-out infinite 1.2s;
}

/* 3. GERMINATION & HARVESTED */
.stage-badge.germination,
.stage-badge.germinating {
  background: rgba(232, 240, 254, 0.95);
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, 0.35);
}

.product-badge-top-left.germination,
.product-badge-top-left.germinating,
.detail-stage-pill.germination,
.detail-stage-pill.germinating {
  animation: blueZoomInOut 2.6s ease-in-out infinite;
  transform-origin: top left;
}

.stage-badge.harvested {
  background: rgba(220, 252, 231, 0.95);
  color: #15803d;
  border: 1px solid rgba(21, 128, 61, 0.35);
}

/* 4. REQUEST THIS MICROGREEN STAGE BADGE */
.stage-badge.request-microgreen {
  background: rgba(243, 232, 255, 0.95);
  color: #6b21a8;
  border: 1px solid rgba(147, 51, 234, 0.35);
  font-weight: 700;
}

.product-badge-top-left.request-microgreen,
.detail-stage-pill.request-microgreen {
  animation: purpleZoomInOut 2.6s ease-in-out infinite;
  transform-origin: top left;
}

.product-badge-top-left.request-microgreen::after,
.detail-stage-pill.request-microgreen::after {
  animation: badgeSheenSweep 4.0s ease-in-out infinite 0.8s;
}

/* 5. COMING SOON STAGE BADGE */
.stage-badge.coming-soon {
  background: rgba(224, 242, 254, 0.95);
  color: #0e7490;
  border: 1px solid rgba(6, 182, 212, 0.35);
  font-weight: 700;
}

.product-badge-top-left.coming-soon,
.detail-stage-pill.coming-soon {
  animation: tealZoomInOut 2.8s ease-in-out infinite;
  transform-origin: top left;
}

.product-badge-top-left.coming-soon::after,
.detail-stage-pill.coming-soon::after {
  animation: badgeSheenSweep 4.4s ease-in-out infinite 1.0s;
}

/* Admin status badges for new statuses */
.admin-status-badge.badge-request-microgreen {
  background: rgba(243, 232, 255, 0.95);
  color: #6b21a8;
  border: 1px solid rgba(147, 51, 234, 0.3);
}
.admin-status-badge.badge-coming-soon {
  background: rgba(224, 242, 254, 0.95);
  color: #0e7490;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

/* Keyframe Animations */
@keyframes growingZoomInOut {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.22);
  }
  50% {
    transform: scale(1.09);
    box-shadow: 0 5px 18px rgba(22, 163, 74, 0.45);
  }
}

@keyframes readyZoomInOut {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.22);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 5px 18px rgba(217, 119, 6, 0.42);
  }
}

@keyframes blueZoomInOut {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 5px 18px rgba(37, 99, 235, 0.42);
  }
}

@keyframes purpleZoomInOut {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.22);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 5px 18px rgba(147, 51, 234, 0.40);
  }
}

@keyframes tealZoomInOut {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.22);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 5px 18px rgba(6, 182, 212, 0.40);
  }
}

@keyframes badgeSheenSweep {
  0%, 65% {
    left: -120%;
  }
  100% {
    left: 200%;
  }
}
.product-body-modern{
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
  justify-content:space-between;
}
.product-title-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  margin-bottom:8px;
}
.product-title-row h3{
  font-family:var(--serif);
  font-size:1.3rem;
  color:var(--canopy-dark);
  margin:0;
  line-height:1.2;
}
.product-flavor-tag{
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--gold-dark);
  background:#fdf6e6;
  border:1px solid #fae7be;
  padding:3px 8px;
  border-radius:2px;
  white-space:nowrap;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.product-desc{
  font-size:.86rem;
  color:var(--ink-soft);
  line-height:1.45;
  margin:0 0 14px;
}
.nutrient-badges-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:16px;
}
.nutrient-chip{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  color:var(--canopy-dark);
  background:var(--canopy-tint);
  border:1px solid rgba(44,95,52,.14);
  padding:3px 8px;
  border-radius:3px;
  white-space:nowrap;
}
.product-foot-modern{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:14px;
  border-top:1px dashed var(--line);
  gap:10px;
}
.product-price-single{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:600;
  color:var(--canopy-dark);
  line-height:1;
  white-space:nowrap;
}
.product-price-single .price-qty-unit{
  font-size:.78em;
  font-weight:500;
  color:var(--ink-soft);
  margin-left:1px;
}
.btn-card-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 16px;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  color:var(--canopy-dark);
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:3px;
  transition:all .2s ease;
  white-space:nowrap;
}
.product-card-modern:hover .btn-card-action{
  background:var(--canopy);
  color:var(--white);
  border-color:var(--canopy);
}
@media (max-width:1100px){
  .product-grid-modern{
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
}
@media (max-width:768px){
  .product-grid-modern{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
  .product-card-modern{
    min-width:0;
  }
  .product-media-box{
    height:150px;
  }
  .product-body-modern{
    padding:14px 12px;
  }
  .product-title-row{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin-bottom:6px;
  }
  .product-title-row h3{
    font-size:1.05rem;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .product-flavor-tag{
    font-size:.62rem;
    padding:2px 6px;
  }
  .product-desc{
    font-size:.78rem;
    line-height:1.35;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .nutrient-badges-wrap{
    gap:4px;
    margin-bottom:12px;
  }
  .nutrient-chip{
    font-size:.62rem;
    padding:2px 6px;
  }
  .product-foot-modern{
    padding-top:10px;
    gap:6px;
    flex-wrap:wrap;
  }
  .product-price-single{
    font-size:1.18rem;
  }
  .btn-card-action{
    padding:6px 10px;
    font-size:.75rem;
  }
  .product-badge-top-left{
    top:8px;
    left:8px;
    font-size:.65rem;
    padding:3px 9px;
  }
}
@media (max-width:480px){
  .product-grid-modern{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
  .product-media-box{
    height:130px;
  }
  .product-body-modern{
    padding:12px 10px;
  }
  .product-title-row h3{
    font-size:.95rem;
  }
  .product-desc{
    font-size:.75rem;
    margin-bottom:8px;
  }
  .nutrient-badges-wrap{
    gap:3px;
    margin-bottom:10px;
  }
  .nutrient-chip{
    font-size:.58rem;
    padding:2px 5px;
  }
  .product-foot-modern{
    padding-top:8px;
    gap:4px;
  }
  .product-price-single{
    font-size:1.05rem;
  }
  .btn-card-action{
    padding:5px 8px;
    font-size:.7rem;
  }
  .product-badge-top-left{
    top:6px;
    left:6px;
    font-size:.58rem;
    padding:2px 7px;
  }
}

/* ---------- Health & Nutritional Density (Brand Theme Background Cards) ---------- */
.density-section{
  padding:75px 0 65px;
  background:var(--white);
}
.density-head-split{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:48px;
  align-items:flex-end;
  margin-bottom:48px;
}
.density-head-left{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.density-head-left h2{
  font-size:1.8rem;
  line-height:1.2;
  color:var(--canopy-dark);
  margin:0;
}
.density-head-right{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.density-head-right p{
  font-size:1.02rem;
  color:var(--ink-soft);
  line-height:1.65;
  margin:0;
}
.density-stagger-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  align-items:start;
}
.density-bg-card{
  position:relative;
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:14px;
  min-height:340px;
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(44,95,52,.04);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.density-bg-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 32px rgba(44,95,52,.1);
  border-color:var(--canopy);
}
.density-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
  z-index:1;
}
.density-bg-card:hover .density-bg-img{
  transform:scale(1.05);
}
.density-bg-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgb(247 244 238 / 40%) 55%, rgb(247 244 238 / 97%) 100%);
  z-index:2;
}
.density-card-mid-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:-8px;
}
.density-card-mid-wrap .density-bg-card{
  width:100%;
}
.density-theme-btn{
  margin-bottom:24px;
}
.density-stat-info{
  position:relative;
  z-index:3;
}
.density-stat-num{
  font-family:var(--serif);
  font-size:2.6rem;
  font-weight:600;
  color:var(--canopy-dark);
  line-height:1;
  display:block;
  margin-bottom:4px;
}
.density-stat-num .density-unit{
  font-size:1.6rem;
  color:var(--gold-dark);
  font-style:italic;
  font-family:var(--serif);
  margin-left:2px;
}
.density-stat-label{
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:600;
  color:var(--canopy-dark);
  margin:0;
  letter-spacing:.01em;
}
@media (max-width:980px){
  .density-section{
    padding:48px 0 40px;
  }
  .density-head-split{
    grid-template-columns:1fr;
    gap:16px;
    margin-bottom:28px;
  }
  .density-stagger-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .density-card-mid-wrap{
    margin-top:0;
    display:contents;
  }
  .density-theme-btn{
    order:10;
    margin-top:8px;
    margin-bottom:0;
    align-self:stretch;
    justify-content:center;
  }
  .density-bg-card{
    min-height:270px;
    padding:18px 20px;
    border-radius:12px;
  }
  .density-stat-num{
    font-size:2.2rem;
    margin-bottom:2px;
  }
  .density-stat-num .density-unit{
    font-size:1.35rem;
  }
  .density-stat-label{
    font-size:.86rem;
  }
}
@media (max-width:640px){
  .density-section{
    padding:38px 0 32px;
  }
  .density-head-split{
    gap:12px;
    margin-bottom:20px;
  }
  .density-stagger-grid{
    gap:12px;
  }
  .density-bg-card{
    min-height:130px;
    padding:15px 18px;
    border-radius:10px;
  }
  .density-stat-num{
    font-size:1.85rem;
    margin-bottom:2px;
  }
  .density-stat-num .density-unit{
    font-size:1.15rem;
  }
  .density-stat-label{
    font-size:.82rem;
  }
}

/* ---------- How to Eat Collage Layout ---------- */
.eat-collage-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  grid-template-rows:220px 220px;
  gap:20px;
  margin-top:36px;
}
.eat-collage-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(44,95,52,.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:24px 22px;
  background:var(--canopy-dark);
  text-decoration:none;
}
.eat-card-large{
  grid-row:span 2;
  padding:28px 26px;
}
.eat-collage-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index:1;
}
.eat-collage-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(18, 42, 24, 0.25) 0%, rgba(18, 42, 24, 0.86) 65%, rgba(14, 32, 18, 0.96) 100%);
  z-index:2;
  transition:background .3s ease;
}
.eat-collage-card:hover .eat-collage-img{
  transform:scale(1.06);
}
.eat-collage-card:hover .eat-collage-overlay{
  background:linear-gradient(180deg, rgba(18, 42, 24, 0.15) 0%, rgba(18, 42, 24, 0.80) 60%, rgba(14, 32, 18, 0.94) 100%);
}
.eat-tag{
  position:relative;
  z-index:3;
  align-self:flex-start;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--gold);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  padding:4px 10px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.15);
}
.eat-card-content{
  position:relative;
  z-index:3;
}
.eat-card-title{
  font-family:var(--serif);
  font-size:1.35rem;
  color:var(--white);
  margin:0 0 6px;
  line-height:1.2;
}
.eat-card-large .eat-card-title{
  font-size:1.65rem;
}
.eat-card-desc{
  font-size:.84rem;
  color:#cfe0cd;
  line-height:1.45;
  margin:0;
}
@media (max-width:1024px){
  .eat-collage-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .eat-card-large{
    grid-row:auto;
    grid-column:span 2;
    min-height:250px;
  }
  .eat-collage-card{
    min-height:210px;
  }
}
@media (max-width:640px){
  .eat-collage-grid{
    grid-template-columns:1fr;
  }
  .eat-card-large{
    grid-column:auto;
  }
}

/* ---------- Why Choose Us - Panoramic Showcase with Animated Labels ---------- */
.why-choose-banner{
  position:relative;
  min-height:500px;
  padding:90px 0 85px;
  background:linear-gradient(rgba(14, 34, 19, 0.42), rgba(12, 28, 16, 0.52)), url('../assets/images/hero-microgreens.webp') center/cover no-repeat;
  color:var(--husk);
  overflow:hidden;
}
.why-choose-shell{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:56px;
  align-items:center;
}
.why-choose-left .eyebrow{
  color:var(--gold);
  margin-bottom:14px;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.why-choose-left h2{
  font-family:var(--serif);
  font-size:1.8rem;
  line-height:1.15;
  color:var(--white);
  margin:0 0 16px;
  letter-spacing:-.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.why-choose-left p{
  font-size:1.05rem;
  color:#f0f8ef;
  line-height:1.65;
  margin:0 0 28px;
  max-width:50ch;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.why-choose-labels-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-content:center;
}
.why-pill-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255, 255, 255, 0.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255, 255, 255, 0.22);
  color:var(--white);
  padding:12px 22px;
  border-radius:30px;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  opacity:0;
  transform:translateY(24px) scale(0.95);
  transition:opacity .75s cubic-bezier(0.22, 1, 0.36, 1), transform .75s cubic-bezier(0.22, 1, 0.36, 1), background .25s ease, border-color .25s ease;
  will-change:transform, opacity;
}
.why-pill-label:hover{
  background:rgba(255, 255, 255, 0.16);
  border-color:var(--gold);
  transform:translateY(-2px);
}
.why-choose-banner.is-visible .why-pill-label:nth-child(1){ opacity:1; transform:translateY(0) scale(1); transition-delay:0.10s; }
.why-choose-banner.is-visible .why-pill-label:nth-child(2){ opacity:1; transform:translateY(0) scale(1); transition-delay:0.25s; }
.why-choose-banner.is-visible .why-pill-label:nth-child(3){ opacity:1; transform:translateY(0) scale(1); transition-delay:0.40s; }
.why-choose-banner.is-visible .why-pill-label:nth-child(4){ opacity:1; transform:translateY(0) scale(1); transition-delay:0.55s; }
.why-choose-banner.is-visible .why-pill-label:nth-child(5){ opacity:1; transform:translateY(0) scale(1); transition-delay:0.70s; }
.why-choose-banner.is-visible .why-pill-label:nth-child(6){ opacity:1; transform:translateY(0) scale(1); transition-delay:0.85s; }

@media (max-width:980px){
  .why-choose-shell{
    grid-template-columns:1fr;
    gap:36px;
  }
}

/* ---------- Panoramic CTA Banner (Screenshot Layout) ---------- */
.home-cta-section{
  padding:70px 0 80px;
  background:var(--white);
}
.ref-cta-banner{
  position:relative;
  min-height:280px;
  border-radius:28px;
  padding:64px 56px;
  background:linear-gradient(90deg, rgba(30, 70, 38, 0.90) 0%, rgba(38, 86, 48, 0.82) 48%, rgba(28, 65, 36, 0.88) 100%), url('../assets/images/hero-microgreens.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  box-shadow:0 20px 48px rgba(28, 68, 36, 0.18);
  overflow:hidden;
}
.ref-cta-left{
  display:flex;
  align-items:center;
  gap:26px;
}
.ref-cta-stamp-badge{
  width:78px;
  height:78px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.18));
  transition:transform .3s ease;
}
.ref-cta-banner:hover .ref-cta-stamp-badge{
  transform:scale(1.05);
}
.ref-cta-stamp-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ref-cta-stamp-icon{
  position:relative;
  z-index:2;
  width:34px;
  height:34px;
  stroke:var(--canopy-dark);
  fill:none;
}
.ref-cta-content{
  color:var(--white);
}
.ref-cta-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:8px;
}
.ref-cta-title{
  font-family:var(--sans);
  font-size:1.8rem;
  font-weight:700;
  line-height:1.22;
  color:var(--white);
  margin:0;
  letter-spacing:-.02em;
}
.ref-cta-banner .btn{
  white-space:nowrap;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 36px;
  font-size:1.02rem;
}
@media (max-width:980px){
  .ref-cta-banner{
    flex-direction:column;
    align-items:flex-start;
    padding:34px 28px;
    gap:24px;
  }
  .ref-cta-banner .btn{
    width:100%;
    justify-content:center;
  }
}
@media (max-width:640px){
  .home-cta-section{
    padding:40px 0 50px;
  }
  .ref-cta-banner{
    padding:32px 20px 28px;
    border-radius:20px;
    text-align:center;
    align-items:center;
    gap:22px;
  }
  .ref-cta-left{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
    width:100%;
  }
  .ref-cta-stamp-badge{
    width:68px;
    height:68px;
  }
  .ref-cta-stamp-icon{
    width:28px;
    height:28px;
  }
  .ref-cta-eyebrow{
    justify-content:center;
    font-size:.82rem;
    margin-bottom:6px;
  }
  .ref-cta-title{
    font-size:1.45rem;
    line-height:1.26;
  }
  .ref-cta-banner .btn{
    padding:13px 24px;
    font-size:.95rem;
    border-radius:12px;
  }
}

/* ---------- About Page Alternative Clean CTA (No Image, Alternative Warm Background) ---------- */
.about-cta-section{
  padding:50px 0 80px;
  background:var(--white);
}
.about-clean-card{
  background:linear-gradient(135deg, #fffdf8 0%, #f7efe1 100%);
  border:1.5px solid var(--line);
  border-left:5px solid var(--gold);
  border-radius:16px;
  padding:48px 52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  box-shadow:0 12px 36px rgba(44,95,52,.06);
  position:relative;
  overflow:hidden;
}
.about-clean-card::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(198,138,44,.12) 0%, rgba(198,138,44,0) 70%);
  pointer-events:none;
}
.about-clean-left{
  max-width:680px;
}
.about-clean-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.82rem;
  font-weight:700;
  color:var(--gold-dark);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.about-clean-title{
  font-family:var(--serif);
  font-size:1.9rem;
  font-weight:700;
  color:var(--canopy-dark);
  line-height:1.2;
  margin:0 0 10px;
}
.about-clean-desc{
  font-size:1rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0;
}
.about-clean-card .btn{
  flex-shrink:0;
  padding:15px 36px;
  font-size:1rem;
  box-shadow:0 4px 14px rgba(44,95,52,.15);
}
@media (max-width:850px){
  .about-clean-card{
    flex-direction:column;
    align-items:flex-start;
    padding:32px 24px;
    gap:22px;
  }
  .about-clean-card .btn{
    width:100%;
    justify-content:center;
  }
}
@media (max-width:640px){
  .about-cta-section{
    padding:30px 0 50px;
  }
  .about-clean-title{
    font-size:1.5rem;
  }
  .about-clean-desc{
    font-size:.92rem;
  }
}
/* ---------- Testimonials (Brand Theme Reference Layout) ---------- */
.testimonials-section{
  padding:85px 0 80px;
  background:var(--white);
}
.testi-ref-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr 1.2fr;
  gap:48px;
  align-items:center;
}
.testi-ref-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.testi-ref-left .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:12px;
}
.testi-ref-left h2{
  font-family:var(--serif);
  font-size:1.8rem;
  line-height:1.2;
  color:var(--canopy-dark);
  margin:0 0 16px;
  letter-spacing:-.02em;
}
.testi-ref-left p{
  font-size:1.02rem;
  color:var(--ink-soft);
  line-height:1.65;
  margin:0 0 30px;
  max-width:44ch;
}
.testi-google-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.testi-google-icon{
  width:38px;
  height:38px;
  flex-shrink:0;
}
.testi-google-score{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:600;
  color:var(--gold-dark);
  line-height:1;
  display:block;
  margin-bottom:2px;
}
.testi-google-label{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.06em;
  margin:0;
}

/* Center Image Card with Stepped Top-Left Notch */
.testi-center-wrap{
  position:relative;
  width:100%;
  max-width:320px;
  margin:0 auto;
}
.testi-quote-notch{
  position:absolute;
  top:-12px;
  left:-12px;
  width:64px;
  height:64px;
  background:var(--white);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  box-shadow:0 6px 18px rgba(44,95,52,.08);
  border:1px solid var(--line);
}
.testi-quote-notch svg{
  width:34px;
  height:34px;
  fill:var(--canopy);
}
.testi-center-card{
  position:relative;
  width:100%;
  height:380px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(44,95,52,.1);
  background:var(--husk);
  border:1px solid var(--line);
}
.testi-center-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Right Testimonial Quote & Carousel */
.testi-ref-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.testi-slides-container{
  position:relative;
}
.testi-slide{
  display:none;
  opacity:0;
  transform:translateX(16px);
  transition:opacity .35s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.testi-slide.active{
  display:block;
  opacity:1;
  transform:translateX(0);
}
.testi-ref-stars{
  color:var(--gold);
  font-size:1.3rem;
  letter-spacing:3px;
  margin-bottom:16px;
}
.testi-ref-quote{
  font-family:var(--serif);
  font-size:clamp(1.2rem, 2vw, 1.45rem);
  font-weight:500;
  font-style:italic;
  line-height:1.48;
  color:var(--canopy-dark);
  margin:0 0 24px;
}
.testi-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:6px;
}
.testi-ref-author{
  display:flex;
  align-items:center;
  gap:14px;
}
.testi-ref-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:2px solid var(--canopy-tint);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.testi-ref-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.testi-ref-meta h4{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  color:var(--canopy-dark);
  margin:0 0 2px;
}
.testi-ref-meta p{
  font-family:var(--sans);
  font-size:.82rem;
  color:var(--muted);
  margin:0;
}
.testi-nav-arrows{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.testi-nav-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--white);
  border:1.5px solid rgba(44,95,52,.4);
  color:var(--canopy);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .25s cubic-bezier(0.16, 1, 0.3, 1);
  padding:0;
  outline:none;
}
.testi-nav-btn:hover{
  background:var(--canopy);
  border-color:var(--canopy);
  color:var(--white);
  box-shadow:0 4px 12px rgba(44,95,52,.15);
}
.testi-nav-btn svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:980px){
  .testi-ref-grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .testi-center-wrap{
    max-width:100%;
  }
  .testi-center-card{
    height:300px;
  }
}

/* ---------- WhatsApp Floating Button ---------- */
.whatsapp-float-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  background-color: #25D366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  z-index: 9999;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.whatsapp-float-btn:hover {
  background-color: #20ba5a;
  color: #ffffff;
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
}

.whatsapp-float-btn::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0.8;
  animation: wa-pulse 2.2s infinite ease-out;
  pointer-events: none;
}

@keyframes wa-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  background: var(--canopy-dark, #193b21);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.25s ease;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.whatsapp-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  border-width: 5px 0 5px 6px;
  border-style: solid;
  border-color: transparent transparent transparent var(--canopy-dark, #193b21);
}

.whatsapp-float-btn:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .whatsapp-float-btn {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }
  .whatsapp-float-btn svg {
    width: 26px;
    height: 26px;
  }
  .whatsapp-tooltip {
    display: none;
  }
}

/* ---------- product detail enhanced layout ---------- */
.product-detail-hero{
  padding:40px 0 60px;
  position:relative;
  overflow:hidden;
}
.product-detail-hero > .wrap{
  position:relative;
  z-index:2;
}
.product-detail-leaf{
  position:absolute;
  z-index:1;
  width:86px;
  opacity:.14;
  pointer-events:none;
  filter:blur(1px);
  transform-origin:50% 100%;
  animation:productLeafDance 7s ease-in-out infinite alternate;
}
.product-detail-leaf-1{
  top:10%;
  left:4%;
  transform:rotate(0deg);
}
.product-detail-leaf-2{
  top:22%;
  right:6%;
  width:108px;
  opacity:.1;
  transform:rotate(0deg);
  animation-delay:1.2s;
}
.product-detail-leaf-3{
  top:58%;
  left:8%;
  width:64px;
  transform:rotate(0deg);
  animation-delay:2s;
}
.product-detail-leaf-4{
  bottom:12%;
  right:4%;
  width:96px;
  opacity:.12;
  transform:rotate(0deg);
  animation-delay:.6s;
}
.product-detail-leaf-5{
  bottom:6%;
  left:38%;
  width:52px;
  opacity:.1;
  transform:rotate(0deg);
  animation-delay:2.6s;
}
.product-detail-leaf-6{
  top:42%;
  left:30%;
  width:44px;
  opacity:.09;
  animation-delay:1.8s;
}
.product-detail-leaf-7{
  top:72%;
  right:25%;
  width:56px;
  opacity:.1;
  animation-delay:3.2s;
}
.product-detail-leaf-8{
  bottom:28%;
  left:52%;
  width:40px;
  opacity:.09;
  animation-delay:4s;
}
@keyframes productLeafDance{
  0%{transform:translate3d(0,0,0) rotate(-6deg);}
  50%{transform:translate3d(5px,-12px,0) rotate(5deg);}
  100%{transform:translate3d(-4px,-20px,0) rotate(-3deg);}
}
@media(max-width:768px){
  .product-detail-leaf{opacity:.11;}
  .product-detail-leaf-2{right:1%;width:72px;}
  .product-detail-leaf-4{right:0;width:68px;}
  .product-detail-leaf-1{
    left:-14px;
    width:64px;
  }
  .product-detail-leaf-3{
    left:2%;
    width:48px;
  }
  .product-detail-leaf-5{
    left:auto;
    right:18%;
    width:42px;
  }
  .product-detail-leaf-6{
    top:40%;
    left:12%;
    width:34px;
  }
  .product-detail-leaf-7{
    top:68%;
    right:14%;
    width:42px;
  }
  .product-detail-leaf-8{
    bottom:24%;
    left:48%;
    width:32px;
  }
}
.detail-photo-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(44,95,52,.06);
}
.detail-photo-wrap{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:var(--canopy-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.detail-photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- HARVESTING WINDOW BAR (below product image) ---------- */
.harvest-window-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #fdfefc;
  border-radius: 16px;
  margin-top: 16px;
  border: 1px solid #bceab7;
  box-shadow: 0 10px 25px rgba(188, 234, 183, 0.2);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: detailHighlightBlink 2.5s ease-in-out infinite;
}
.harvest-window-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(188, 234, 183, 0.35);
}

.harvest-card-icon-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}
.harvest-card-icon-bg {
  width: 48px;
  height: 48px;
  background: #eaf6d9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.harvest-card-icon-inner {
  width: 32px;
  height: 32px;
  background: #196534;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.harvest-card-content {
  flex: 1;
  min-width: 0;
  z-index: 2;
}
.harvest-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.harvest-card-header h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: #1a4f2c;
  font-weight: 700;
  line-height: 1.2;
}

.harvest-days-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e6f6df;
  color: #14532d;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #bbf7d0;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.1);
}
.harvest-days-pill svg {
  color: #166534;
}

.harvest-card-content p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: #6e8473;
  line-height: 1.45;
}

.detail-float-leaf {
  position: absolute;
  z-index: 1;
  object-fit: contain;
  pointer-events: none;
}
.detail-float-leaf.leaf-left {
  bottom: -10px;
  left: -18px;
  transform: rotate(-15deg);
  width: 50px;
  height: 50px;
}
.detail-float-leaf.leaf-right {
  top: -12px;
  right: -10px;
  transform: rotate(25deg);
  width: 54px;
  height: 54px;
}

@keyframes detailHighlightBlink {
  0%, 100% {
    border-color: #bceab7;
    box-shadow: 0 8px 20px rgba(188, 234, 183, 0.2);
    background-color: #fdfefc;
  }
  50% {
    border-color: #65a30d;
    box-shadow: 0 12px 30px rgba(101, 163, 13, 0.25);
    background-color: #f7fdf7;
  }
}

@media (max-width: 768px) {
  .harvest-window-card {
    gap: 12px;
    padding: 14px 16px;
  }
  .harvest-window-icon {
    width: 34px;
    height: 34px;
  }
  .harvest-window-icon svg {
    width: 18px;
    height: 18px;
  }
  .harvest-window-content h4 {
    font-size: 0.82rem;
  }
  .harvest-window-content p {
    font-size: 0.74rem;
  }
}

/* ---------- FRESHNESS BANNER (Products Page) ---------- */
/* ---------- FRESHNESS BANNER (Products Page) ---------- */
.freshness-banner {
  display: flex;
  align-items: center;
  background: #fdfefc;
  border-radius: 16px;
  padding: 14px 24px;
  gap: 36px;
  margin-top: 36px;
  border: 1px solid #bceab7;
  box-shadow: 0 12px 30px rgba(188, 234, 183, 0.2);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: highlightBlink 2.5s ease-in-out infinite;
}
.freshness-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(188, 234, 183, 0.3);
}

.fresh-banner-icon-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}
.fresh-banner-icon-bg {
  width: 56px;
  height: 56px;
  background: #eaf6d9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.fresh-banner-icon-inner {
  width: 36px;
  height: 36px;
  background: #196534;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.banner-float-leaf {
  position: absolute;
  z-index: 1;
}
.leaf-left {
  bottom: -15px;
  left: -25px;
  transform: rotate(-15deg);
  width: 90px; height: 90px;
  object-fit: contain;
}

.fresh-banner-text {
  flex: 1;
  text-align: left;
}
.fresh-banner-text h4 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: #1a4f2c;
  font-weight: 700;
  line-height: 1.2;
}
.fresh-banner-text p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: #6e8473;
  line-height: 1.4;
}

.fresh-banner-divider {
  width: 1px;
  height: 46px;
  background: #cde6c8;
  flex-shrink: 0;
}

.fresh-banner-pill {
  display: flex;
  align-items: center;
  background: #e6f6df;
  padding: 8px 14px;
  border-radius: 20px;
  gap: 10px;
  flex-shrink: 0;
}
.pill-icon {
  color: #1a4f2c;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d2f0c7;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.pill-content {
  display: flex;
  flex-direction: column;
}
.pill-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  color: #3b6b4a;
  line-height: 1;
  margin-bottom: 2px;
}
.pill-value {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a4f2c;
  line-height: 1;
}

.fresh-banner-aside {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 10px;
  height: 100%;
}
.fresh-aside-text-wrap {
  position: relative;
}
.fresh-aside-text {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  line-height: 1.1;
  color: #2d5f34;
  transform: rotate(-5deg);
  text-align: right;
  margin-right: 60px;
  margin-top: 0px;
}
.aside-swish {
  position: absolute;
  bottom: -10px;
  right: 60px;
  width: 70px;
  height: 12px;
  transform: rotate(-5deg);
}

.leaf-right-top {
  top: -20px;
  right: -10px;
  width: 75px; height: 75px;
  transform: rotate(35deg);
  object-fit: contain;
}
.leaf-right-bottom {
  bottom: -15px;
  right: -5px;
  width: 100px; height: 100px;
  transform: rotate(-10deg);
  object-fit: contain;
}

@media (max-width: 992px) {
  .freshness-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
  }
  .fresh-banner-divider {
    width: 100%;
    height: 1px;
  }
  .fresh-banner-aside {
    align-self: flex-end;
  }
}

.highlight-days {
  display: inline-block;
  background: linear-gradient(to right, #dcfce7, #bbf7d0);
  color: #14532d;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 8px;
  border: 1px solid rgba(22, 163, 74, 0.2);
  margin: 0 4px;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.1);
  transform: translateY(-1px);
}

@keyframes sunlightSweep {
  0% { left: -100%; }
  25%, 100% { left: 200%; }
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes highlightBlink {
  0%, 100% {
    border-color: #bceab7;
    box-shadow: 0 10px 25px rgba(188, 234, 183, 0.2);
    background-color: #fdfefc;
  }
  50% {
    border-color: #65a30d;
    box-shadow: 0 12px 35px rgba(101, 163, 13, 0.25);
    background-color: #f7fdf7;
  }
}

.section-trust-highlight{
  padding:36px 0;
  background:var(--husk-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-feature-bar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(44,95,52,.05);
  overflow:hidden;
}
.trust-feature-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 22px;
  border-right:1px solid var(--line);
  transition:background .2s ease, transform .2s ease;
  background:var(--white);
}
.trust-feature-item:last-child{
  border-right:none;
}
.trust-feature-item:hover{
  background:var(--canopy-tint);
}
.trust-feature-badge-wrap{
  flex-shrink:0;
}
.trust-fssai-mark{
  background:var(--canopy-dark);
  color:var(--gold);
  font-family:Arial, sans-serif;
  font-weight:900;
  font-size:1.1rem;
  letter-spacing:.05em;
  padding:6px 12px;
  border-radius:6px;
  text-transform:lowercase;
  font-style:italic;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.trust-icon-circle{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--canopy-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid rgba(44,95,52,.16);
  transition:transform .2s ease, background .2s ease;
}
.trust-feature-item:hover .trust-icon-circle{
  transform:scale(1.08);
  background:var(--white);
}
.trust-icon-circle svg{
  width:20px;
  height:20px;
  stroke:var(--canopy);
  fill:none;
}
.trust-feature-content{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.trust-feature-code{
  font-family:var(--mono);
  font-size:.84rem;
  font-weight:700;
  color:var(--canopy-dark);
  letter-spacing:.02em;
}
.trust-feature-title{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  color:var(--canopy-dark);
  margin:0;
  line-height:1.2;
}
.trust-feature-sub{
  font-size:.78rem;
  color:var(--ink-soft);
  line-height:1.35;
  margin:0;
}

@media (max-width:1024px){
  .trust-feature-bar{
    grid-template-columns:repeat(2, 1fr);
  }
  .trust-feature-item:nth-child(2){
    border-right:none;
  }
  .trust-feature-item:nth-child(1), .trust-feature-item:nth-child(2){
    border-bottom:1px solid var(--line);
  }
}
@media (max-width:640px){
  .trust-feature-bar{
    grid-template-columns:1fr;
  }
  .trust-feature-item{
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .trust-feature-item:last-child{
    border-bottom:none;
  }
}
.detail-info-pane{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.detail-header-top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-bottom:10px;
}
.detail-flavor-badge{
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  padding:4px 10px;
  border-radius:4px;
  background:#fdf6e6;
  color:var(--gold-dark);
  border:1px solid #fae7be;
}
.detail-benefits-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:16px 0 20px;
  padding:0;
  list-style:none;
}
.detail-benefit-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.88rem;
  color:var(--ink);
  line-height:1.35;
}
.detail-benefit-item svg{
  width:16px;
  height:16px;
  stroke:var(--canopy);
  fill:none;
  flex-shrink:0;
}
/* ---------- Minimal Interactive Harvest Stock & Quantity Slider ---------- */
.harvest-slider-card.minimal{
  border:1.5px solid rgba(44,95,52,.14);
  border-radius:16px;
  padding:18px 22px;
  margin:0px 0 24px;
  box-shadow:0 4px 18px rgba(44,95,52,.05);
}

.slider-minimal-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  gap:12px;
}
.slider-stock-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(44,95,52,.08);
  border:1px solid rgba(44,95,52,.18);
  padding:7px 18px;
  border-radius:24px;
  font-size:.86rem;
  color:var(--canopy-dark);
  font-weight:700;
}
.stock-pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2e7d32;
  box-shadow:0 0 0 0 rgba(46,125,50,.5);
  animation:stockPulse 1.8s infinite;
  flex-shrink:0;
}
@keyframes stockPulse{
  0%{transform:scale(0.95); box-shadow:0 0 0 0 rgba(46,125,50,.7);}
  70%{transform:scale(1); box-shadow:0 0 0 5px rgba(46,125,50,0);}
  100%{transform:scale(0.95); box-shadow:0 0 0 0 rgba(46,125,50,0);}
}
.stock-main-txt{
  color:var(--canopy-dark);
  padding:0 2px;
}

.slider-selection-pill{
  display:inline-flex;
  align-items:center;
  background:linear-gradient(135deg, var(--canopy-dark) 0%, var(--canopy) 100%);
  border-radius:12px;
  padding:6px 18px 7px;
  color:var(--white);
  box-shadow:0 4px 14px rgba(25,59,33,.22);
  gap:14px;
}
.selection-qty-block,
.selection-price-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.15;
  padding:0 4px;
}
.sel-micro-lbl{
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(255,255,255,.75);
  text-transform:uppercase;
  margin-bottom:2px;
  padding:0 4px;
}
.sel-qty-num{
  font-family:var(--serif);
  font-size:1.18rem;
  font-weight:700;
  color:var(--white);
}
.sel-qty-num strong{
  font-weight:800;
}
.selection-split-line{
  width:1px;
  height:24px;
  background:rgba(255,255,255,.25);
}
.sel-price-num{
  font-family:var(--serif);
  font-size:1.24rem;
  font-weight:800;
  color:var(--gold);
}
.sel-price-num strong{
  font-weight:800;
}

/* Range Slider Control */
.slider-control-wrap.minimal{
  display:flex;
  align-items:center;
  gap:14px;
}
.slider-step-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#ffffff;
  border:1.5px solid rgba(44,95,52,.18);
  color:var(--canopy-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  flex-shrink:0;
  padding:0;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.slider-step-btn:hover{
  background:var(--canopy);
  color:#ffffff;
  border-color:var(--canopy);
  transform:scale(1.08);
}
.range-input-container{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.harvest-range-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(44,95,52,.16);
  outline:none;
  cursor:pointer;
  margin:4px 0 2px;
}
/* Slider Thumb Webkit */
.harvest-range-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--gold);
  border:3px solid var(--canopy-dark);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.harvest-range-slider::-webkit-slider-thumb:hover{
  transform:scale(1.18);
}
/* Slider Thumb Mozilla */
.harvest-range-slider::-moz-range-thumb{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--gold);
  border:3px solid var(--canopy-dark);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.harvest-range-slider::-moz-range-thumb:hover{
  transform:scale(1.18);
}
.slider-range-labels{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  color:var(--muted);
  padding:0 2px;
}
.btn-order-full{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.02em;
  border-radius:6px;
  transition:transform .2s ease, box-shadow .2s ease;
  text-align:center;
}
.btn-order-full:hover{
  transform:translateY(-2px);
}

@media (max-width: 768px) {
  .product-detail-hero {
    padding: 24px 0 40px;
  }
  .detail-photo-card {
    border-radius: 16px;
    margin: 0 auto;
    max-width: 100%;
  }
  .detail-photo-wrap {
    aspect-ratio: 4/3;
    border-radius: 16px;
    border-bottom: none;
  }
  .detail-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .detail-stage-pill {
    top: 12px;
    left: 12px;
    font-size: .72rem;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
  }
  .slider-minimal-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .slider-stock-tag {
    width: 100%;
    justify-content: center;
    padding: 9px 14px;
    font-size: .84rem;
    box-sizing: border-box;
  }
  .slider-selection-pill {
    width: 100%;
    justify-content: space-around;
    padding: 8px 16px;
    border-radius: 12px;
    box-sizing: border-box;
  }
  .selection-qty-block, .selection-price-block {
    flex: 1;
    text-align: center;
  }
  .sel-micro-lbl {
    font-size: .60rem;
  }
  .sel-qty-num, .sel-price-num {
    font-size: 1.12rem;
  }
}

@media (max-width: 480px) {
  .detail-photo-wrap {
    aspect-ratio: 4/3;
  }
  .slider-minimal-top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .slider-stock-tag {
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
    font-size: 16px;
    gap: 8px;
  }
  .stock-pulse {
    width: 7px;
    height: 7px;
  }
  .slider-selection-pill {
    width: 100%;
    justify-content: space-around;
    padding: 7px 12px;
    border-radius: 10px;
  }
  .sel-micro-lbl {
    font-size: .56rem;
  }
  .sel-qty-num, .sel-price-num {
    font-size: 1.05rem;
  }
}

/* ---------- nutrition matrix ---------- */
.nutrition-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-top:28px;
}
.nutrition-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:24px 20px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nutrition-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(44,95,52,.08);
}
.nutrition-card-stat{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:700;
  color:var(--canopy);
  margin-bottom:6px;
}
.nutrition-card-title{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  color:var(--canopy-dark);
  margin-bottom:6px;
}
.nutrition-card-desc{
  font-size:.8rem;
  color:var(--ink-soft);
  line-height:1.45;
  margin:0;
}

/* ---------- culinary usage grid with images ---------- */
.culinary-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
  margin-top:28px;
}
.culinary-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.culinary-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(44,95,52,.08);
}
.culinary-media{
  width:100%;
  height:140px;
  overflow:hidden;
  background:var(--canopy-tint);
  border-bottom:1px solid var(--line);
}
.culinary-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.culinary-card:hover .culinary-media img{
  transform:scale(1.06);
}
.culinary-body{
  padding:20px 18px;
  flex-grow:1;
}
.culinary-body h3{
  font-size:1.1rem;
  color:var(--canopy-dark);
  margin:0 0 6px;
  line-height:1.3;
}
.culinary-body p{
  font-size:.85rem;
  color:var(--ink-soft);
  line-height:1.5;
  margin:0;
}

@media (max-width:980px){
  .nutrition-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .culinary-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
  }
}
@media (max-width:600px){
  .nutrition-grid{
    grid-template-columns:1fr;
  }
  .culinary-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
  .culinary-card{
    border-radius:10px;
  }
  .culinary-media{
    height:110px;
  }
  .culinary-body{
    padding:12px 10px 14px;
  }
  .culinary-body h3{
    font-size:.92rem;
    margin:0 0 4px;
    line-height:1.25;
  }
  .culinary-body p{
    font-size:.76rem;
    line-height:1.4;
  }
}
@media (max-width:400px){
  .culinary-grid{
    gap:8px;
  }
  .culinary-media{
    height:95px;
  }
  .culinary-body{
    padding:10px 8px 12px;
  }
  .culinary-body h3{
    font-size:.86rem;
  }
  .culinary-body p{
    font-size:.72rem;
    line-height:1.35;
  }
}

/* ---------- 2-column split FAQ layout ---------- */
.faq-split-wrap{
  gap:48px;
  align-items:flex-start;
}
.faq-left-pane{
  position:sticky;
  top:90px;
}
.faq-support-box{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:22px;
  box-shadow:0 6px 18px rgba(44,95,52,.04);
}
.faq-support-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--canopy-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:1px solid var(--line);
}
.faq-support-icon svg{
  width:20px;
  height:20px;
  stroke:var(--canopy);
  fill:none;
}
.faq-support-box h4{
  font-size:.95rem;
  color:var(--canopy-dark);
  margin:0 0 4px;
  font-family:var(--sans);
  font-weight:600;
}
.faq-support-box p{
  font-size:.82rem;
  color:var(--ink-soft);
  margin:0 0 10px;
  line-height:1.45;
}
.faq-wa-link{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--canopy);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:color .15s ease, transform .15s ease;
}
.faq-wa-link:hover{
  color:var(--gold-dark);
  transform:translateX(3px);
}
.faq-card-item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  margin-bottom:14px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-card-item:hover{
  border-color:var(--canopy);
}
.faq-card-item.open{
  border-color:var(--canopy);
  box-shadow:0 8px 24px rgba(44,95,52,.06);
}
.faq-card-q{
  width:100%;
  background:none;
  border:0;
  text-align:left;
  padding:20px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--canopy-dark);
  cursor:pointer;
  gap:12px;
}
.faq-q-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.faq-num-badge{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:700;
  color:var(--gold-dark);
  background:var(--husk);
  border:1px solid var(--line);
  padding:3px 8px;
  border-radius:2px;
  flex-shrink:0;
}
.faq-card-q::after{
  content:"+";
  font-family:var(--mono);
  font-size:1.3rem;
  color:var(--gold-dark);
  transition:transform .25s ease;
  flex-shrink:0;
}
.faq-card-item.open .faq-card-q::after{
  transform:rotate(45deg);
  color:var(--canopy);
}
.faq-card-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.faq-card-item.open .faq-card-a{
  max-height:300px;
}
.faq-card-a p{
  padding:0 22px 20px;
  margin:0;
  font-size:.88rem;
  color:var(--ink-soft);
  line-height:1.55;
}
@media (max-width:820px){
  .faq-split-wrap{
    grid-template-columns:1fr;
    gap:32px;
  }
  .faq-left-pane{
    position:static;
  }
  .faq-card-a p{
    padding-left:22px;
  }
}

/* ---------- auth (login / signup) modern card ---------- */
.auth-section{
  padding:40px 0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--husk);
}
.auth-shell{
  max-width:480px;
  margin:0 auto;
}
.auth-card-modern{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:36px 32px;
  box-shadow:0 12px 36px rgba(44,95,52,.07);
}
.auth-brand-head{
  text-align:center;
  margin-bottom:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.auth-brand-head img{
  height:36px;
  margin:0 auto 14px;
  display:block;
}
.auth-brand-head h2{
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--canopy-dark);
  margin:0 0 6px;
}
.auth-brand-head p{
  font-size:.86rem;
  color:var(--ink-soft);
  margin:0;
  line-height:1.45;
}
.auth-tabs-modern{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--husk);
  padding:4px;
  border-radius:4px;
  border:1px solid var(--line);
  margin-bottom:24px;
}
.auth-tab-btn{
  background:none;
  border:0;
  padding:9px 16px;
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  border-radius:3px;
  transition:all .2s ease;
  text-align:center;
}
.auth-tab-btn.active{
  background:var(--white);
  color:var(--canopy-dark);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.auth-form-field{
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.auth-form-field label{
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:700;
  color:var(--canopy-dark);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.auth-form-field input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--ink);
  background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.auth-form-field input:focus{
  border-color:var(--canopy);
  outline:none;
  box-shadow:0 0 0 3px rgba(44,95,52,.12);
}
.auth-options-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
  font-size:.82rem;
}
.auth-remember{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  cursor:pointer;
}
.auth-remember input{
  accent-color:var(--canopy);
}
.auth-forgot-link{
  color:var(--canopy);
  font-weight:600;
  text-decoration:none;
}
.auth-forgot-link:hover{
  text-decoration:underline;
}
.auth-terms-note{
  text-align:center;
  font-size:.78rem;
  color:var(--ink-soft);
  margin-top:20px;
  line-height:1.45;
}
.auth-terms-note a{
  color:var(--canopy);
  font-weight:600;
}
.auth-preview-badge{
  text-align:center;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-soft);
  margin-top:20px;
  background:var(--husk);
  padding:8px 14px;
  border-radius:4px;
  border:1px dashed var(--line);
}

/* ---------- ADMIN DASHBOARD & OVERVIEW STYLING ---------- */
.admin-dash-wrapper{
  padding:28px 0 60px;
  background:var(--husk);
  min-height:90vh;
}
.admin-dash-wrapper .wrap{
  max-width:1440px;
  width:100%;
  padding:0 24px;
}
.admin-dash-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:20px;
  flex-wrap:wrap;
  gap:16px;
}
.admin-top-badge{
  display:inline-flex;
  align-items:center;
  background:rgba(44,95,52,.1);
  color:var(--canopy-dark);
  font-size:.76rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:4px 12px;
  border-radius:999px;
  margin-bottom:8px;
}
.admin-main-title{
  font-family:var(--serif);
  font-size:1.85rem;
  color:var(--canopy-dark);
  margin:0 0 6px;
  line-height:1.2;
}
.admin-subtitle{
  font-size:.86rem;
  color:var(--ink-soft);
  margin:0;
  max-width:680px;
}
.admin-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.admin-store-btn{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  color:var(--ink);
  background:var(--white);
  text-decoration:none;
  transition:all .2s ease;
}
.admin-store-btn:hover{
  border-color:var(--canopy);
  color:var(--canopy-dark);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.admin-logout-btn{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border:1px solid rgba(211,47,47,.25);
  border-radius:6px;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  color:#c62828;
  text-decoration:none;
  transition:all .2s ease;
  background:#fff8f8;
}
.admin-logout-btn:hover{
  background:#ffebee;
  border-color:#d32f2f;
}

.admin-dash-shell{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  display:flex;
  box-shadow:0 8px 30px rgba(0,0,0,.05);
  width:100%;
  min-width:0;
  overflow:hidden;
}
.admin-dash-side{
  width:230px;
  flex-shrink:0;
  background:var(--canopy-dark);
  padding:24px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.admin-dash-side-sticky-wrap{
  position:sticky;
  top:24px;
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 120px);
  justify-content:space-between;
}
.admin-dash-side::-webkit-scrollbar{
  width:4px;
}
.admin-dash-side::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.2);
  border-radius:4px;
}
.admin-side-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 8px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:16px;
}
.admin-avatar-pill{
  width:38px;
  height:38px;
  background:var(--gold);
  color:var(--white);
  font-family:var(--serif);
  font-weight:700;
  font-size:.92rem;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.admin-brand-info strong{
  display:block;
  color:var(--white);
  font-size:.88rem;
  line-height:1.2;
}
.admin-brand-info span{
  display:block;
  color:rgba(255,255,255,.6);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.admin-side-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex-grow:1;
}
.admin-side-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border-radius:8px;
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:500;
  color:rgba(255,255,255,.8);
  text-decoration:none;
  transition:all .2s ease;
}
.admin-side-link > div,
.admin-side-link span:not(.admin-side-badge):not(.admin-side-pill){
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-grow:1;
}
.admin-side-link svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  flex-shrink:0;
  margin-right:10px;
}
.admin-side-link:hover{
  color:var(--white);
  background:rgba(255,255,255,.08);
}
.admin-side-link.active{
  background:var(--gold);
  color:var(--white);
  font-weight:600;
}
.admin-side-link.active svg{
  stroke:var(--white);
}
.admin-side-pill{
  background:rgba(255,255,255,.2);
  color:var(--white);
  font-size:.68rem;
  font-weight:700;
  padding:2px 7px;
  border-radius:999px;
  text-transform:uppercase;
}
.admin-side-badge{
  background:rgba(255,255,255,.15);
  color:var(--white);
  font-size:.72rem;
  font-weight:600;
  padding:2px 8px;
  border-radius:999px;
}

.admin-side-footer{
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:20px;
}
.admin-profile-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
}
.admin-user-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--canopy);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.76rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,.2);
}
.admin-user-text strong{
  display:block;
  color:var(--white);
  font-size:.8rem;
}
.admin-user-text span{
  display:block;
  color:rgba(255,255,255,.6);
  font-size:.68rem;
}

/* MAIN CONTENT */
.admin-dash-main{
  flex-grow:1;
  min-width:0;
  width:100%;
  padding:26px 28px 40px;
  background:var(--white);
}

/* KPI CARDS */
.admin-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-bottom:24px;
}
.admin-kpi-grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.admin-kpi-card{
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.admin-kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.admin-kpi-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.admin-kpi-title{
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-soft);
}
.admin-kpi-trend.positive{
  background:rgba(44,95,52,.12);
  color:var(--canopy-dark);
  font-size:.72rem;
  font-weight:700;
  padding:2px 7px;
  border-radius:4px;
}
.admin-kpi-badge{
  font-size:.7rem;
  font-weight:700;
  padding:2px 7px;
  border-radius:4px;
}
.admin-kpi-badge.warning{background:#fef3c7; color:#92400e;}
.admin-kpi-badge.success{background:#dcfce7; color:#166534;}
.admin-kpi-badge.primary{background:#e0f2fe; color:#075985;}
.admin-kpi-value{
  font-family:var(--serif);
  font-size:1.85rem;
  font-weight:700;
  color:var(--canopy-dark);
  line-height:1.1;
}
.admin-kpi-meta{
  font-size:.76rem;
  color:var(--ink-soft);
}

/* BATCH PIPELINE HERO */
.admin-batch-hero{
  background:linear-gradient(135deg, #16361e 0%, #204d2b 100%);
  color:var(--white);
  border-radius:12px;
  padding:22px 24px;
  margin-bottom:28px;
  box-shadow:0 4px 18px rgba(22,54,30,.15);
}
.admin-batch-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:20px;
}
.admin-batch-tag{
  display:inline-block;
  background:rgba(255,255,255,.15);
  color:#a4d6ab;
  font-size:.74rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:6px;
}
.admin-batch-info h3{
  font-family:var(--serif);
  font-size:1.35rem;
  color:var(--white);
  margin:0 0 4px;
}
.admin-batch-info p{
  font-size:.84rem;
  color:rgba(255,255,255,.8);
  margin:0;
  max-width:620px;
}

.admin-pipeline-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  background:rgba(0,0,0,.15);
  padding:14px 16px;
  border-radius:8px;
}
.pipeline-step{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.65;
  min-width:0;
}
.pipeline-step.completed,
.pipeline-step.active{
  opacity:1;
}
.step-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
  font-weight:700;
  flex-shrink:0;
}
.pipeline-step.completed .step-icon{background:#22c55e; color:var(--white);}
.pipeline-step.active .step-icon{background:var(--gold); color:var(--white); box-shadow:0 0 0 3px rgba(199,144,58,.35);}
.pipeline-step.pending .step-icon{background:rgba(255,255,255,.2); color:var(--white);}
.step-label{min-width:0;}
.step-label strong{display:block; font-size:.82rem; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.step-label span{display:block; font-size:.7rem; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* TWO COLUMN GRID */
.admin-overview-columns{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 350px;
  gap:24px;
  width:100%;
  align-items:start;
}
.admin-col-orders{
  min-width:0;
  width:100%;
}
.admin-col-sidebar{
  min-width:0;
  width:100%;
}

/* ADMIN CARD STYLED & PIE CHART SECTION */
.admin-card-styled {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.02);
}
.admin-card-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--canopy);
  margin-bottom: 4px;
}
.admin-chart-total-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--husk);
  border: 1px solid var(--line);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.admin-chart-total-pill .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.admin-pie-chart-container {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  padding-top: 14px;
}
.admin-pie-visual-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.admin-pie-svg-box {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-donut-svg {
  width: 220px;
  height: 220px;
  transform: rotate(-90deg);
  overflow: visible;
}
.donut-segment {
  transition: stroke-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
}
.donut-segment:hover,
.donut-segment.is-active {
  stroke-width: 33px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.16));
}
.admin-donut-center-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 0 16px;
}
.donut-center-num {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--canopy-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.donut-center-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--canopy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.donut-center-sub {
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-top: 1px;
}
.admin-pie-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 8px;
  opacity: 0.85;
}
.admin-pie-legend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-pie-legend-item {
  background: var(--husk);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.admin-pie-legend-item:hover,
.admin-pie-legend-item.is-active {
  background: var(--white);
  border-color: var(--canopy);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}
.pie-legend-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.pie-legend-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.pie-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 3px;
}
.pie-variety-name {
  display: block;
  font-size: 0.86rem;
  color: var(--canopy-dark);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pie-variety-tag {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 1px;
}
.pie-legend-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.pie-trays-num {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--canopy-dark);
}
.pie-pct-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
}
.pie-item-progress-track {
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.pie-item-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s ease;
}

@media (max-width: 960px) {
  .admin-pie-chart-container {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .admin-pie-legend-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

.admin-card-header-flex{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:14px;
}
.admin-section-heading{
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--canopy-dark);
  margin:0 0 2px;
}
.admin-section-sub{
  font-size:.8rem;
  color:var(--ink-soft);
  margin:0;
}
.admin-filter-btn{
  background:var(--husk);
  border:1px solid var(--line);
  padding:4px 12px;
  border-radius:6px;
  font-size:.76rem;
  font-weight:600;
  color:var(--canopy-dark);
}

/* STYLED ADMIN TABLE */
.admin-table-wrapper{
  border:1px solid var(--line);
  border-radius:10px;
  overflow-x:auto;
  width:100%;
  -webkit-overflow-scrolling:touch;
}
.admin-table-styled{
  width:100%;
  border-collapse:collapse;
  font-size:.82rem;
  white-space:nowrap;
}
.admin-table-styled thead tr{
  background:var(--husk-deep);
}
.admin-table-styled thead th{
  padding:11px 14px;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--canopy-dark);
  text-align:left;
  border-bottom:1px solid var(--line);
}
.admin-table-styled tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.admin-table-styled tbody tr:last-child td{border-bottom:none;}
.order-id-tag{
  font-family:var(--mono);
  font-weight:700;
  color:var(--canopy);
  background:rgba(44,95,52,.08);
  padding:2px 6px;
  border-radius:4px;
  font-size:.76rem;
}
.admin-cust-cell strong{display:block; color:var(--ink); font-size:.82rem;}
.admin-cust-cell span{display:block; color:var(--ink-soft); font-size:.72rem;}
.order-items-text{
  display:block;
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--ink);
  font-size:.8rem;
}
.order-slot-text{
  font-size:.78rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.order-amount-cell strong{display:block; font-family:var(--serif); color:var(--canopy-dark); font-size:.9rem;}
.order-amount-cell .payment-type{display:block; font-size:.68rem; color:var(--ink-soft);}

.admin-status-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:4px;
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap;
}
.admin-status-badge.badge-sowing      {background:#fef9c3; color:#854d0e;}
.admin-status-badge.badge-germinating {background:#d1fae5; color:#065f46;}
.admin-status-badge.badge-growing     {background:#e0f2fe; color:#0369a1;}
.admin-status-badge.badge-ready       {background:#fce7f3; color:#9d174d;}
.admin-status-badge.badge-harvested   {background:#dcfce7; color:#15803d;}
.admin-status-badge.badge-harvest     {background:#fef3c7; color:#b45309;}
.admin-status-badge.badge-delivered   {background:#dcfce7; color:#15803d;}
.admin-status-badge.badge-neutral     {background:#f1f5f9; color:#475569;}

/* TABLE ACTION BUTTONS */
.tbl-action{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 11px;
  border-radius:6px;
  font-size:.75rem;
  font-weight:600;
  text-decoration:none;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity .15s ease, transform .1s ease;
  line-height:1;
}
.tbl-action:hover{opacity:.82; transform:translateY(-1px);}
.tbl-action svg{flex-shrink:0;}
.tbl-action-edit  {background:#e8f5e9; color:#2e7d32;}
.tbl-action-view  {background:#e3f2fd; color:#1565c0;}
.tbl-action-delete{background:#fde8e8; color:#b91c1c;}

/* RIGHT SIDE CARDS */
.admin-side-card{
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
  width:100%;
}
.admin-side-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.admin-side-card-head h3{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--canopy-dark);
  margin:0;
}
.badge-sub{
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  background:var(--white);
  padding:2px 8px;
  border-radius:4px;
  color:var(--canopy);
  border:1px solid var(--line);
}

.admin-variety-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-variety-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.variety-info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.variety-info-row strong{font-size:.82rem; color:var(--ink);}
.variety-tag{display:inline-block; font-size:.68rem; color:var(--canopy); margin-left:4px;}
.variety-count{font-size:.76rem; font-weight:700; color:var(--canopy-dark);}
.variety-progress-bar{
  width:100%;
  height:5px;
  background:rgba(0,0,0,.06);
  border-radius:999px;
  overflow:hidden;
}
.variety-progress-fill{
  height:100%;
  background:var(--gold);
  border-radius:999px;
}

/* USER ROSTER */
.admin-user-roster{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-roster-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
}
.roster-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--canopy-tint);
  color:var(--canopy-dark);
  font-size:.72rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.roster-details{
  flex-grow:1;
  min-width:0;
}
.roster-details strong{display:block; font-size:.8rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.roster-details span{display:block; font-size:.68rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.badge-verified-mini{
  font-size:.66rem;
  font-weight:700;
  color:#15803d;
  background:#dcfce7;
  padding:2px 6px;
  border-radius:4px;
}
.badge-unverified-mini{
  font-size:.66rem;
  font-weight:700;
  color:#b45309;
  background:#fef3c7;
  padding:2px 6px;
  border-radius:4px;
}

@media (max-width:1200px){
  .admin-overview-columns{
    grid-template-columns:1fr;
  }
}
@media (max-width:920px){
  .admin-dash-shell{
    flex-direction:column;
  }
  .admin-dash-side{
    width:100%;
  }
  .admin-side-nav{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .admin-kpi-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .admin-pipeline-steps{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width:580px){
  .admin-kpi-grid{
    grid-template-columns:1fr;
  }
  .admin-pipeline-steps{
    grid-template-columns:1fr;
  }
}

/* ==========================================================================
   ADMIN DASHBOARD SHOWCASE MODALS (ORDER DETAILS & CUSTOMER PROFILE)
   ========================================================================== */
.admin-table-clickable-row{
  cursor:pointer;
  transition:background .15s ease;
}
.admin-table-clickable-row:hover{
  background:rgba(44,95,52,.05) !important;
}
.admin-view-btn{
  background:none;
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:6px;
  font-size:.76rem;
  font-weight:700;
  color:var(--canopy);
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.admin-view-btn:hover{
  background:var(--canopy);
  color:var(--white);
  border-color:var(--canopy);
}

.admin-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(14,31,17,.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.admin-modal-backdrop.active{
  opacity:1;
  visibility:visible;
}
.admin-modal-card{
  background:var(--white);
  width:100%;
  max-width:740px;
  max-height:90vh;
  border-radius:18px;
  border:1.5px solid var(--line);
  box-shadow:0 24px 60px rgba(14,31,17,.4);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:translateY(24px) scale(.97);
  transition:transform .28s cubic-bezier(.16, 1, .3, 1);
}
.admin-modal-backdrop.active .admin-modal-card{
  transform:translateY(0) scale(1);
}
.admin-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  background:var(--husk);
  border-bottom:1.5px solid var(--line);
  flex-shrink:0;
}
.modal-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}
.modal-order-tag{
  font-family:monospace;
  font-size:.84rem;
  font-weight:700;
  color:var(--canopy-dark);
  background:rgba(44,95,52,.12);
  padding:3px 8px;
  border-radius:5px;
}
.admin-modal-header h2{
  margin:0;
  font-size:1.15rem;
  color:var(--canopy-dark);
  font-weight:700;
}
.admin-modal-close{
  background:var(--white);
  border:1.5px solid var(--line);
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:.9rem;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
}
.admin-modal-close:hover{
  background:#fee2e2;
  color:#dc2626;
  border-color:#fca5a5;
  transform:scale(1.05);
}
.admin-modal-body{
  padding:24px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.modal-stats-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:12px;
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
}
.modal-strip-tile{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.strip-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  font-weight:700;
}
.modal-strip-tile strong{
  font-size:.88rem;
  color:var(--ink);
}
.modal-info-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}
.modal-info-box{
  background:#fdfdfc;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
}
.modal-info-box h4{
  margin:0 0 12px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:700;
}
.modal-cust-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.modal-cust-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--canopy);
  color:var(--white);
  font-weight:700;
  font-size:.95rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.modal-cust-row strong{
  display:block;
  font-size:.9rem;
  color:var(--ink);
}
.modal-cust-row span{
  display:block;
  font-size:.76rem;
  color:var(--ink-soft);
}
.modal-cust-actions{
  display:flex;
  gap:8px;
  margin-top:14px;
}
.btn-modal-action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:6px;
  font-size:.76rem;
  font-weight:700;
  text-decoration:none;
  transition:all .2s ease;
}
.btn-modal-action.whatsapp{
  background:#25d366;
  color:#fff;
}
.btn-modal-action.whatsapp:hover{
  background:#1ebc57;
}
.btn-modal-action.call{
  background:var(--husk);
  color:var(--canopy-dark);
  border:1px solid var(--line);
}
.btn-modal-action.call:hover{
  background:var(--line);
}
.modal-address-text{
  font-size:.82rem;
  color:var(--ink-soft);
  line-height:1.5;
  margin:0 0 8px;
}
.modal-route-tag{
  display:inline-block;
  font-size:.72rem;
  color:var(--canopy-dark);
  background:rgba(44,95,52,.08);
  padding:4px 8px;
  border-radius:4px;
  font-weight:600;
}
.modal-items-section h4{
  margin:0 0 10px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:700;
}
.modal-items-table{
  width:100%;
  border-collapse:collapse;
  font-size:.82rem;
}
.modal-items-table th{
  background:var(--husk);
  padding:8px 12px;
  text-align:left;
  font-size:.72rem;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.modal-items-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.modal-items-table td strong{
  display:block;
  font-size:.84rem;
  color:var(--ink);
}
.modal-items-table td span{
  display:block;
  font-size:.72rem;
  color:var(--ink-soft);
}
.modal-total-row td{
  font-size:.92rem;
  font-weight:800;
  color:var(--canopy-dark);
  border-top:2px solid var(--line);
  background:var(--husk);
}
.modal-harvest-tracker h4{
  margin:0 0 10px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:700;
}
.modal-step-progression{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.m-step{
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  text-align:center;
}
.m-step span{
  display:inline-flex;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e2e8f0;
  color:#64748b;
  font-size:.72rem;
  font-weight:700;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
}
.m-step p{
  margin:0;
  font-size:.72rem;
  font-weight:600;
  color:var(--ink-soft);
}
.m-step.done{
  border-color:#86efac;
  background:#f0fdf4;
}
.m-step.done span{
  background:#22c55e;
  color:#fff;
}
.m-step.current{
  border-color:var(--gold);
  background:#fefce8;
}
.m-step.current span{
  background:var(--gold);
  color:#fff;
}
.admin-modal-footer{
  padding:16px 24px;
  background:var(--husk);
  border-top:1.5px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}

/* Customer Modal Details */
.modal-cust-header-pill{
  display:flex;
  align-items:center;
  gap:12px;
}
.m-cust-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--gold);
  color:var(--canopy-dark);
  font-weight:800;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.m-cust-sub{
  font-size:.78rem;
  color:var(--ink-soft);
  display:block;
}
.cmodal-field-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cmodal-field{
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
  border-bottom:1px dashed var(--line);
  padding-bottom:5px;
}
.cmodal-field .c-label{
  color:var(--muted);
  font-weight:600;
}

@media (max-width:680px){
  .modal-info-grid{
    grid-template-columns:1fr;
  }
  .modal-step-progression{
    grid-template-columns:repeat(2, 1fr);
  }
  .modal-stats-strip{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* ==========================================================================
   ADMIN DEDICATED PAGES: ORDERS & CUSTOMERS TABLES & DETAIL LAYOUTS
   ========================================================================== */
.admin-orders-stats-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.admin-filter-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:30px;
  text-decoration:none;
  color:var(--ink);
  font-size:.82rem;
  font-weight:600;
  transition:all .2s ease;
}
.admin-filter-pill strong{
  background:var(--husk);
  padding:2px 8px;
  border-radius:12px;
  font-size:.76rem;
  color:var(--canopy-dark);
}
.admin-filter-pill:hover,
.admin-filter-pill.active{
  background:var(--canopy);
  color:var(--white);
  border-color:var(--canopy);
}
.admin-filter-pill.active strong{
  background:rgba(255,255,255,.2);
  color:var(--white);
}

.admin-page-card{
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:22px;
  box-shadow:0 4px 20px rgba(44,95,52,.04);
}
.admin-toolbar-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.admin-search-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-grow:1;
  max-width:540px;
}
.admin-search-wrap{
  position:relative;
  flex-grow:1;
  display:flex;
  align-items:center;
}
.admin-search-wrap .search-icon{
  position:absolute;
  left:12px;
  color:var(--muted);
  pointer-events:none;
}
.admin-search-input{
  width:100%;
  padding:9px 36px 9px 36px;
  border:1.5px solid var(--line);
  border-radius:8px;
  font-size:.84rem;
  background:var(--husk);
  color:var(--ink);
  outline:none;
  transition:all .2s ease;
}
.admin-search-input:focus{
  background:var(--white);
  border-color:var(--canopy);
  box-shadow:0 0 0 3px rgba(44,95,52,.1);
}
.admin-search-clear{
  position:absolute;
  right:10px;
  color:var(--muted);
  text-decoration:none;
  font-size:.85rem;
  font-weight:bold;
  padding:2px 6px;
}
.admin-search-btn{
  padding:8px 16px;
  font-size:.82rem;
  white-space:nowrap;
}
.admin-records-count{
  font-size:.8rem;
  color:var(--muted);
  font-weight:600;
}
.admin-table-responsive{
  width:100%;
  overflow-x:auto;
}
.admin-data-table{
  width:100%;
  border-collapse:collapse;
  text-align:left;
}
.admin-data-table th{
  background:var(--husk);
  padding:12px 14px;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  border-bottom:1.5px solid var(--line);
  font-weight:700;
  white-space:nowrap;
}
.admin-data-table td{
  padding:14px;
  border-bottom:1px solid var(--line);
  font-size:.84rem;
  vertical-align:middle;
}
.admin-table-row-hover{
  cursor:pointer;
  transition:background .15s ease;
}
.admin-table-row-hover:hover{
  background:rgba(44,95,52,.04);
}
.table-subtext{
  display:block;
  font-size:.74rem;
  color:var(--ink-soft);
  margin-top:2px;
}
.table-items-desc{
  display:block;
  font-size:.82rem;
  color:var(--ink);
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Detail Pages Layout */
.admin-breadcrumb-bar{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.84rem;
  color:var(--muted);
  margin-bottom:6px;
}
.admin-breadcrumb-bar a{
  color:var(--canopy);
  text-decoration:none;
  font-weight:600;
}
.admin-breadcrumb-bar a:hover{
  text-decoration:underline;
}
.admin-breadcrumb-bar .current{
  color:var(--ink);
  font-weight:700;
}
.admin-detail-layout{
  display:grid;
  grid-template-columns:350px 1fr;
  gap:20px;
  align-items:start;
}
.admin-detail-side-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.admin-detail-main-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.card-head-compact{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
  margin-bottom:12px;
}
.card-head-compact h3{
  margin:0;
  font-size:.95rem;
  color:var(--canopy-dark);
  font-weight:700;
}
.card-action-link{
  font-size:.78rem;
  color:var(--canopy);
  font-weight:700;
  text-decoration:none;
}
.card-action-link:hover{
  text-decoration:underline;
}

@media (max-width:1040px){
  .admin-detail-layout{
    grid-template-columns:1fr;
  }
}

.cust-profile-hero-card{
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:16px;
  padding:24px 26px;
  box-shadow:0 4px 20px rgba(44,95,52,.04);
  margin-top:14px;
}
.cust-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.cust-hero-avatar-wrap{
  display:flex;
  align-items:center;
  gap:16px;
}
.cust-hero-avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold) 0%, #b37e2c 100%);
  color:var(--white);
  font-size:1.15rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(199,144,58,.25);
  flex-shrink:0;
}
.cust-hero-ident{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.cust-hero-title-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.cust-hero-title-row h2{
  margin:0;
  font-size:1.25rem;
  font-weight:700;
  color:var(--canopy-dark);
}
.cust-hero-email{
  font-size:.84rem;
  color:var(--ink-soft);
}
.cust-hero-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.btn-hero-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  border-radius:8px;
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
  transition:all .2s ease;
}
.btn-hero-action.whatsapp{
  background:#25d366;
  color:#fff;
  box-shadow:0 4px 12px rgba(37,211,102,.25);
}
.btn-hero-action.whatsapp:hover{
  background:#1ebc57;
  transform:translateY(-1px);
}
.btn-hero-action.call{
  background:var(--husk);
  color:var(--canopy-dark);
  border:1.5px solid var(--line);
}
.btn-hero-action.call:hover{
  background:var(--line);
  color:var(--canopy-dark);
}
.cust-hero-details-strip{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
  padding-top:18px;
}
.cust-strip-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cust-strip-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:700;
}
.cust-strip-val{
  font-size:.92rem;
  color:var(--ink);
  font-weight:700;
}
.cust-strip-val.gold-accent{
  color:var(--canopy-dark);
  font-size:1.15rem;
}
@media (max-width:960px){
  .cust-hero-details-strip{
    grid-template-columns:repeat(3, 1fr);
  }
}
@media (max-width:600px){
  .cust-hero-details-strip{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* ==========================================================================
   CUSTOMER AUTHENTICATION (LOGIN & REGISTER - DISTINCT PREMIUM UI)
   ========================================================================== */
.cust-auth-section{
  padding:70px 0 90px;
  background:linear-gradient(180deg, var(--husk) 0%, #ede6d8 100%);
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:center;
}
.cust-auth-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  margin:0 auto;
  background:var(--white);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(44,95,52,.12);
  border:1px solid rgba(44,95,52,.12);
}

/* Left Showcase Panel */
.cust-auth-showcase{
  position:relative;
  background: url('../assets/images/Join the Green Movement.webp') center/cover no-repeat;
  color:var(--white);
  padding:54px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.cust-auth-badge{
  display:inline-block;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);
  color:var(--gold);
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  padding:6px 16px;
  border-radius:20px;
  margin-bottom:20px;
  align-self:flex-start;
}
.cust-auth-showcase h2{
  font-family:var(--serif);
  font-size:clamp(1.9rem, 3vw, 2.5rem);
  line-height:1.2;
  color:var(--white);
  margin:0 0 14px;
}
.cust-auth-showcase p{
  font-size:.98rem;
  line-height:1.65;
  color:#dbeadb;
  margin:0 0 32px;
}
.cust-auth-perks{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-bottom:36px;
}
.cust-perk-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.cust-perk-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(235,186,82,.22);
  color:var(--gold);
  font-size:.85rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
.cust-perk-text{
  display:flex;
  flex-direction:column;
}
.cust-perk-text strong{
  font-size:.95rem;
  color:var(--white);
  font-weight:700;
  margin-bottom:2px;
}
.cust-perk-text span{
  font-size:.82rem;
  color:#c4dec1;
  line-height:1.4;
}
.cust-auth-social-proof{
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
}
.cust-proof-stars{
  color:var(--gold);
  font-size:1.1rem;
  letter-spacing:2px;
  margin-bottom:4px;
}
.cust-auth-social-proof p{
  font-size:.85rem;
  color:#d4e6d2;
  margin:0;
}
.cust-auth-social-proof strong{
  color:var(--white);
}

/* Right Form Panel */
.cust-auth-form-card{
  padding:50px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--white);
}
.cust-auth-tabs{
  display:flex;
  background:var(--husk);
  padding:4px;
  border-radius:12px;
  margin-bottom:28px;
  border:1px solid var(--line);
}
.cust-tab-btn{
  flex:1;
  text-align:center;
  padding:10px 14px;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:700;
  color:var(--muted);
  border-radius:9px;
  text-decoration:none;
  transition:all .2s ease;
}
.cust-tab-btn.active{
  background:var(--canopy);
  color:var(--white);
  box-shadow:0 4px 12px rgba(44,95,52,.2);
}
.cust-form-header{
  margin-bottom:24px;
}
.cust-form-header h3{
  font-family:var(--serif);
  font-size:1.75rem;
  color:var(--canopy-dark);
  margin:0 0 6px;
}
.cust-form-header p{
  font-size:.88rem;
  color:var(--ink-soft);
  margin:0;
}
.cust-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cust-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.cust-input-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cust-input-group label{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  color:var(--canopy-dark);
}
.cust-label-split{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cust-forgot-link{
  font-family:var(--sans);
  font-size:.8rem;
  color:var(--canopy);
  text-decoration:none;
  font-weight:600;
  transition:color .2s;
}
.cust-forgot-link:hover{
  color:var(--canopy-dark);
  text-decoration:underline;
}
.cust-input-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}
.cust-input-icon{
  position:absolute;
  left:14px;
  width:18px;
  height:18px;
  color:var(--muted);
  pointer-events:none;
}
.cust-input-wrapper input,
.cust-input-wrapper select{
  width:100%;
  padding:12px 46px 12px 42px;
  border:1px solid var(--line);
  border-radius:8px;
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--ink);
  background:var(--white);
  transition:all .2s ease;
  box-sizing:border-box;
}
.cust-input-wrapper select{
  appearance:auto;
  cursor:pointer;
}
.cust-input-wrapper input:focus,
.cust-input-wrapper select:focus{
  outline:none;
  border-color:var(--canopy);
  box-shadow:0 0 0 3px rgba(44,95,52,.12);
}
.cust-input-wrapper input.is-invalid,
.cust-input-wrapper select.is-invalid{
  border-color:#e53e3e !important;
  background:#fffafa;
}
.cust-input-wrapper input.is-invalid:focus{
  box-shadow:0 0 0 3px rgba(229,62,62,.15);
}
.cust-field-error{
  display:block;
  color:#e53e3e;
  font-size:.78rem;
  margin-top:5px;
  font-weight:500;
  line-height:1.3;
}
.cust-pw-toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  outline:none;
  color:var(--muted);
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  line-height:0;
  z-index:4;
  overflow:visible;
}
.cust-pw-toggle svg{
  width:20px;
  height:20px;
  display:block;
  pointer-events:none;
  flex-shrink:0;
  overflow:visible;
}
.cust-pw-toggle:hover{
  color:var(--canopy);
}
.cust-remember-row{
  display:flex;
  align-items:center;
  margin:2px 0;
}
.cust-checkbox-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-size:.82rem;
  color:var(--ink-soft);
  cursor:pointer;
}
.cust-checkbox-label input[type="checkbox"]{
  accent-color:var(--canopy);
  width:16px;
  height:16px;
  cursor:pointer;
}
.cust-submit-btn{
  margin-top:8px;
  padding:14px;
  font-size:.96rem;
  font-weight:700;
  border-radius:8px;
}
.cust-divider{
  position:relative;
  text-align:center;
  margin:10px 0;
}
.cust-divider::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:var(--line);
}
.cust-divider span{
  position:relative;
  background:var(--white);
  padding:0 12px;
  font-family:var(--sans);
  font-size:.78rem;
  color:var(--muted);
}
.cust-whatsapp-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:12px;
  background:#25D366;
  color:var(--white);
  border-radius:8px;
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:700;
  text-decoration:none;
  transition:all .2s ease;
  box-shadow:0 4px 12px rgba(37,211,102,.2);
}
.cust-whatsapp-btn:hover{
  background:#20ba5a;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(37,211,102,.3);
  color:var(--white);
}
.cust-google-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:12px 18px;
  background:var(--white);
  border:1.5px solid var(--line);
  color:var(--canopy-dark);
  border-radius:8px;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
  transition:all .25s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.cust-google-btn:hover{
  background:#fafafa;
  border-color:rgba(44,95,52,.35);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transform:translateY(-1px);
  color:var(--canopy-dark);
}
.cust-google-icon{
  width:20px;
  height:20px;
  flex-shrink:0;
}
.cust-switch-link{
  text-align:center;
  font-family:var(--sans);
  font-size:.85rem;
  color:var(--ink-soft);
  margin-top:6px;
}
.cust-switch-link a{
  color:var(--canopy);
  font-weight:700;
  text-decoration:none;
}
.cust-switch-link a:hover{
  text-decoration:underline;
}

@media (max-width:960px){
  .cust-auth-container{
    grid-template-columns:1fr;
    max-width:540px;
  }
  .cust-auth-form-card{
    order:1;
    padding:38px 28px;
  }
  .cust-auth-showcase{
    order:2;
    padding:38px 28px;
    border-top:1px solid rgba(44,95,52,.12);
  }
}
@media (max-width:580px){
  .cust-form-row{
    grid-template-columns:1fr;
  }
  .cust-auth-section{
    padding:28px 0 54px;
  }
  .cust-auth-form-card{
    padding:30px 20px;
  }
  .cust-auth-showcase{
    padding:32px 20px;
  }
  .cust-auth-showcase h2{
    font-size:1.65rem;
  }
}

/* ==========================================================================
   CUSTOMER DASHBOARD (MODERN HARVEST CLUB UI)
   ========================================================================== */
.cust-dash-page{
  background:linear-gradient(180deg, var(--husk) 0%, #efeae0 100%);
  padding:44px 0 80px;
  min-height:calc(100vh - 120px);
}

/* Header Banner */
.cust-dash-banner{
  background:linear-gradient(135deg, var(--canopy-dark) 0%, var(--canopy) 100%);
  border-radius:22px;
  padding:34px 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--white);
  box-shadow:0 14px 40px rgba(25,59,33,.18);
  margin-bottom:32px;
  gap:24px;
}
.cust-dash-user-wrap{
  display:flex;
  align-items:center;
  gap:20px;
}
.cust-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--gold);
  color:var(--canopy-dark);
  font-family:var(--serif);
  font-size:1.45rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid rgba(255,255,255,.3);
  flex-shrink:0;
}
.cust-user-badge{
  display:inline-block;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  color:var(--gold);
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:700;
  padding:4px 12px;
  border-radius:20px;
  margin-bottom:6px;
}
.cust-user-info h1{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 2.5vw, 1.85rem);
  color:var(--white);
  margin:0;
  line-height:1.2;
}
.cust-user-meta{
  font-size:.85rem;
  color:#d0e6cf;
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.dot-sep{
  opacity:.6;
}
.cust-dash-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.cust-dash-support-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  color:var(--white);
  padding:12px 18px;
  border-radius:8px;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:700;
  text-decoration:none;
  transition:all .2s ease;
}
.cust-dash-support-btn:hover{
  background:rgba(255,255,255,.22);
  color:var(--white);
}

/* Dashboard Layout Grid (Sidebar + Content) */
.cust-dash-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:28px;
  align-items:start;
}

/* Sidebar Tabs */
.cust-dash-nav{
  background:var(--white);
  border-radius:18px;
  padding:16px;
  box-shadow:0 6px 24px rgba(44,95,52,.06);
  border:1px solid rgba(44,95,52,.1);
  display:flex;
  flex-direction:column;
  gap:6px;
  position:sticky;
  top:100px;
}
.cust-nav-tab{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:all .2s ease;
}
.cust-nav-tab:hover{
  background:var(--husk);
  color:var(--canopy);
}
.cust-nav-tab.active{
  background:var(--canopy);
  color:var(--white);
  box-shadow:0 4px 14px rgba(44,95,52,.2);
}
.cust-nav-badge{
  margin-left:auto;
  background:var(--gold);
  color:var(--canopy-dark);
  font-size:.72rem;
  font-weight:800;
  padding:2px 8px;
  border-radius:12px;
}
.cust-nav-divider{
  height:1px;
  background:var(--line);
  margin:10px 4px;
}
.cust-nav-logout{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  color:#c0392b;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
  border-radius:8px;
  transition:background .2s;
}
.cust-nav-logout:hover{
  background:#fdedec;
}

/* Content Panels */
.cust-dash-content{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.cust-tab-panel{
  display:none;
}
.cust-tab-panel.active{
  display:flex;
  flex-direction:column;
  gap:24px;
  animation:panelFade .25s ease;
}
@keyframes panelFade{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}

/* Live Batch Card */
.cust-live-batch-card{
  background:var(--white);
  border-radius:20px;
  padding:28px 32px;
  border:1.5px solid rgba(44,95,52,.15);
  box-shadow:0 8px 30px rgba(44,95,52,.07);
}
.cust-batch-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:26px;
}
.cust-batch-tag{
  display:inline-block;
  background:rgba(44,95,52,.1);
  color:var(--canopy);
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:700;
  padding:4px 12px;
  border-radius:14px;
  margin-bottom:8px;
}
.cust-batch-header h3{
  font-family:var(--serif);
  font-size:1.45rem;
  color:var(--canopy-dark);
  margin:0 0 6px;
}
.cust-batch-header p{
  font-size:.88rem;
  color:var(--ink-soft);
  margin:0;
  max-width:560px;
  line-height:1.5;
}
.cust-batch-eta{
  text-align:right;
  background:var(--husk);
  padding:10px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  flex-shrink:0;
}
.eta-label{
  display:block;
  font-size:.72rem;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:700;
}
.eta-time{
  font-size:.95rem;
  color:var(--canopy-dark);
  font-weight:800;
}

/* 4-Step Tracker */
.cust-batch-tracker{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  position:relative;
  margin:28px 0 24px;
  gap:12px;
}
.cust-batch-tracker::before{
  content:"";
  position:absolute;
  top:18px;
  left:12%;
  right:12%;
  height:3px;
  background:var(--line);
  z-index:1;
}
.tracker-step{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.step-dot{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--husk);
  border:2px solid var(--line);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.88rem;
  font-weight:800;
  margin-bottom:8px;
}
.tracker-step.completed .step-dot{
  background:var(--canopy);
  border-color:var(--canopy);
  color:var(--white);
}
.tracker-step.active .step-dot{
  background:var(--gold);
  border-color:var(--canopy);
  color:var(--canopy-dark);
  box-shadow:0 0 0 5px rgba(235,186,82,.28);
}
.step-text strong{
  display:block;
  font-size:.82rem;
  color:var(--canopy-dark);
  margin-bottom:2px;
}
.step-text span{
  display:block;
  font-size:.74rem;
  color:var(--muted);
}
.cust-batch-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.85rem;
  color:var(--ink-soft);
  gap:16px;
}
.batch-track-btn{
  color:var(--canopy);
  font-weight:700;
  text-decoration:none;
  font-size:.85rem;
}
.batch-track-btn:hover{
  text-decoration:underline;
}

/* Impact Metrics */
.cust-impact-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.cust-impact-card{
  background:var(--white);
  border-radius:16px;
  padding:20px;
  border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(44,95,52,.04);
  text-align:center;
}
.impact-icon{
  font-size:1.6rem;
  margin-bottom:6px;
}
.impact-val{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--canopy-dark);
  font-weight:800;
  margin-bottom:2px;
}
.impact-lbl{
  font-size:.75rem;
  color:var(--muted);
  line-height:1.35;
}

/* Card Box Container */
.cust-card-box{
  background:var(--white);
  border-radius:18px;
  padding:26px 28px;
  border:1px solid var(--line);
  box-shadow:0 4px 20px rgba(44,95,52,.04);
}
.cust-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:20px;
}
.cust-card-head h3{
  font-family:var(--serif);
  font-size:1.3rem;
  color:var(--canopy-dark);
  margin:0;
}
.cust-card-subtitle{
  font-size:.82rem;
  color:var(--muted);
  margin:4px 0 0;
}
.cust-link-btn{
  background:none;
  border:none;
  color:var(--canopy);
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.cust-link-btn:hover{
  text-decoration:underline;
}

/* Tables */
.cust-table-responsive{
  overflow-x:auto;
}
.cust-table{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
  text-align:left;
}
.cust-table th{
  background:var(--husk);
  padding:12px 14px;
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:700;
  color:var(--canopy-dark);
  text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:1px solid var(--line);
}
.cust-table td{
  padding:14px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.status-badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:12px;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:0.01em;
  white-space:nowrap;
}
.status-sowing{
  background:#fef9c3;
  color:#854d0e;
}
.status-germinating{
  background:#d1fae5;
  color:#065f46;
}
.status-growing{
  background:#e0f2fe;
  color:#0369a1;
}
.status-ready,
.status-ready_to_harvest{
  background:#fce7f3;
  color:#9d174d;
}
.status-harvested,
.status-delivered{
  background:#dcfce7;
  color:#15803d;
}
.status-confirmed{
  background:#fef3c7;
  color:#b45309;
}
.status-cancelled{
  background:#fee2e2;
  color:#b91c1c;
}
.table-action-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--canopy-dark);
  font-weight:700;
  font-size:.78rem;
  text-decoration:none;
  transition:all .2s;
}
.table-action-btn svg{
  flex-shrink:0;
}
.table-action-btn:hover{
  background:var(--canopy);
  color:var(--white);
  border-color:var(--canopy);
}
.cust-cell-label{
  display:none;
}
.cust-prod-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cust-prod-name{
  color:var(--ink);
  font-weight:700;
}
.cust-prod-qty{
  font-size:12px;
  color:var(--muted);
}
.cust-addr-pin{
  display:inline-block;
  vertical-align:-1px;
  margin-right:3px;
  color:var(--muted);
}
.cust-verify-alert{
  background:#fff8e1;
  border:1px solid #ffe082;
  border-left:4px solid #f59e0b;
  border-radius:10px;
  padding:16px 20px;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.cust-verify-content{
  display:flex;
  align-items:center;
  gap:12px;
}
.cust-verify-icon{
  font-size:22px;
  flex-shrink:0;
}
.cust-verify-content strong{
  color:#92400e;
  font-size:14px;
  display:block;
  margin-bottom:2px;
}
.cust-verify-content span{
  color:#b45309;
  font-size:13px;
  line-height:1.4;
}
.cust-verify-form{
  margin:0;
  flex-shrink:0;
}
.cust-receipt-link{
  color:var(--canopy);
  font-weight:700;
  font-size:.8rem;
  text-decoration:none;
}
.cust-receipt-link:hover{
  text-decoration:underline;
}

/* Quick Reorder Grid */
.cust-quick-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.cust-quick-item{
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .2s;
}
.cust-quick-item:hover{
  transform:translateY(-3px);
}
.cust-quick-item img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:10px;
}
.quick-info h4{
  font-size:.88rem;
  color:var(--canopy-dark);
  margin:0 0 4px;
}
.quick-price{
  display:block;
  font-size:.78rem;
  color:var(--muted);
  font-weight:600;
  margin-bottom:10px;
}

/* Subscription Card */
.cust-sub-item-card{
  background:var(--husk);
  border:1.5px solid rgba(44,95,52,.15);
  border-radius:16px;
  padding:22px 24px;
}
.sub-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:18px;
}
.sub-title-wrap h4{
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--canopy-dark);
  margin:6px 0 2px;
}
.sub-meta{
  font-size:.82rem;
  color:var(--muted);
  margin:0;
}
.sub-price{
  font-size:1.35rem;
  font-weight:800;
  color:var(--canopy-dark);
}
.sub-freq{
  font-size:.82rem;
  color:var(--muted);
}
.sub-details-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  padding:16px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
  font-size:.85rem;
}
.detail-lbl{
  display:block;
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:4px;
}
.sub-variety-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chip{
  background:var(--white);
  padding:3px 8px;
  border-radius:6px;
  font-size:.78rem;
  font-weight:600;
  border:1px solid var(--line);
}
.sub-actions-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.cust-sub-wa-btn{
  margin-left:auto;
  color:var(--canopy);
  font-weight:700;
  font-size:.84rem;
  text-decoration:none;
}
.cust-sub-wa-btn:hover{
  text-decoration:underline;
}

/* Address Cards */
.cust-address-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.cust-address-card{
  background:var(--husk);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:20px;
}
.cust-address-card.default{
  border-color:var(--canopy);
  background:var(--white);
  box-shadow:0 4px 16px rgba(44,95,52,.06);
}
.address-tag-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.address-type-badge{
  font-size:.8rem;
  font-weight:700;
  color:var(--canopy-dark);
}
.default-badge{
  background:var(--canopy);
  color:var(--white);
  font-size:.68rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:10px;
}
.cust-address-card h4{
  font-size:.95rem;
  color:var(--canopy-dark);
  margin:0 0 6px;
}
.address-lines{
  font-size:.84rem;
  color:var(--ink-soft);
  line-height:1.5;
  margin:0 0 8px;
}
.address-phone{
  font-size:.82rem;
  color:var(--muted);
  margin:0 0 14px;
}
.address-actions{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
}
.addr-action-btn{
  background:none;
  border:none;
  color:var(--canopy);
  font-weight:700;
  cursor:pointer;
  padding:0;
}
.addr-action-btn:hover{
  text-decoration:underline;
}

/* Profile Form */
.cust-profile-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cust-profile-actions{
  margin-top:8px;
}
.tab-text-short,
.cust-badge-short,
.cust-mobile-logout-wrap{
  display:none;
}
.tab-text-full{
  display:inline;
}
.cust-badge-full{
  display:inline-block;
}

/* Responsive Customer Dashboard */
@media (max-width:992px){
  .cust-dash-layout{
    grid-template-columns:1fr;
    gap:20px;
  }
  /* Show all 3 tabs in a single row */
  .cust-dash-nav{
    position:-webkit-sticky;
    position:sticky;
    top:74px;
    z-index:20;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
    padding:6px;
    width:100%;
    box-sizing:border-box;
    overflow:hidden;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(44,95,52,.12);
    border-radius:14px;
    box-shadow:0 4px 18px rgba(44,95,52,.08);
  }
  .cust-dash-nav::-webkit-scrollbar{
    display:none;
  }
  .cust-nav-tab{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:9px 6px;
    font-size:.82rem;
    font-weight:700;
    border-radius:10px;
    text-align:center;
    white-space:nowrap;
    box-sizing:border-box;
    min-height:40px;
  }
  .cust-nav-tab svg{
    width:16px;
    height:16px;
    flex-shrink:0;
  }
  .tab-text-full{
    display:none;
  }
  .tab-text-short{
    display:inline;
  }
  .cust-badge-full{
    display:none;
  }
  .cust-badge-short{
    display:inline-block;
    padding:2px 6px;
    font-size:.68rem;
    margin-left:2px;
  }
  .cust-nav-divider,
  .cust-nav-logout{
    display:none;
  }
  .cust-mobile-logout-wrap{
    display:block;
    margin-top:22px;
  }
  .cust-mobile-logout-divider{
    height:1px;
    background:var(--line);
    margin-bottom:18px;
  }
  .cust-mobile-logout-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:44px;
    padding:10px 16px;
    background:#fdedec;
    border:1px solid #fadbd8;
    border-radius:10px;
    color:#c0392b;
    font-family:var(--sans);
    font-size:.88rem;
    font-weight:700;
    cursor:pointer;
    transition:all .2s ease;
    box-sizing:border-box;
  }
  .cust-mobile-logout-btn:hover{
    background:#f5b7b1;
    color:#922b21;
  }
}

@media (max-width:380px){
  .cust-dash-nav{
    gap:4px;
    padding:4px;
  }
  .cust-nav-tab{
    gap:4px;
    padding:8px 4px;
    font-size:.76rem;
  }
  .cust-nav-tab svg{
    width:14px;
    height:14px;
  }
}

@media (max-width:768px){
  /* Spacing */
  .cust-dash-page{
    padding:20px 0 60px;
  }
  .cust-dash-page > .wrap{
    padding:0 16px;
  }

  /* Welcome Banner */
  .cust-dash-banner{
    flex-direction:column;
    align-items:stretch;
    padding:22px 18px;
    border-radius:16px;
    margin-bottom:18px;
    gap:16px;
  }
  .cust-dash-user-wrap{
    gap:14px;
    align-items:center;
    width:100%;
  }
  .cust-avatar{
    width:50px;
    height:50px;
    font-size:1.18rem;
    border-width:2.5px;
  }
  .cust-user-info h1{
    font-size:1.35rem;
    line-height:1.25;
    word-break:break-word;
  }
  .cust-dash-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
  }
  .cust-dash-actions .btn,
  .cust-dash-actions .cust-dash-support-btn{
    width:100%;
    justify-content:center;
    text-align:center;
    padding:10px 14px;
    font-size:.85rem;
    min-height:42px;
    box-sizing:border-box;
  }

  /* Card Box Container */
  .cust-card-box{
    padding:20px 16px;
    border-radius:16px;
  }
  .cust-card-head{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-bottom:18px;
  }
  .cust-card-head h3{
    font-size:1.25rem;
  }
  .cust-card-head .btn{
    width:100%;
    justify-content:center;
    text-align:center;
    min-height:40px;
    padding:10px 14px;
    box-sizing:border-box;
  }

  /* Alert Banner */
  .cust-verify-alert{
    flex-direction:column;
    align-items:stretch;
    padding:14px 16px;
    gap:12px;
  }
  .cust-verify-form{
    width:100%;
  }
  .cust-verify-form .btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  /* Orders Table -> Mobile Order Cards Transformation */
  .cust-table-responsive{
    overflow-x:visible;
  }
  .cust-table{
    display:block;
    width:100%;
    border-collapse:separate;
  }
  .cust-table thead{
    display:none;
  }
  .cust-table tbody{
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
  }
  .cust-order-row{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "order status"
      "product product"
      "date total"
      "address address"
      "action action";
    gap:10px 14px;
    background:var(--white);
    border:1.5px solid rgba(44,95,52,.14);
    border-radius:14px;
    padding:16px;
    box-shadow:0 4px 16px rgba(44,95,52,.05);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .cust-order-row td{
    padding:0 !important;
    border:none !important;
  }
  .cust-td-order{
    grid-area:order;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .cust-td-order .cust-cell-label{
    display:none;
  }
  .cust-td-order .cust-order-num{
    font-size:1.05rem;
    font-weight:800;
    color:var(--canopy-dark);
    letter-spacing:.02em;
  }
  .cust-td-status{
    grid-area:status;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
  .cust-td-status .cust-cell-label{
    display:none;
  }
  .cust-td-product{
    grid-area:product;
    padding:8px 0 !important;
    border-top:1px dashed var(--line) !important;
    border-bottom:1px dashed var(--line) !important;
  }
  .cust-td-product .cust-cell-label{
    display:none;
  }
  .cust-prod-meta{
    gap:3px;
  }
  .cust-prod-name{
    font-size:.98rem;
    color:var(--ink);
    font-weight:700;
  }
  .cust-prod-qty{
    font-size:.82rem;
    color:var(--muted);
    font-weight:600;
  }
  .cust-td-date{
    grid-area:date;
    display:flex;
    align-items:baseline;
    gap:5px;
    font-size:.84rem;
    color:var(--ink-soft);
  }
  .cust-td-date .cust-cell-label{
    display:inline;
    font-size:.76rem;
    color:var(--muted);
    font-weight:600;
    text-transform:uppercase;
  }
  .cust-td-total{
    grid-area:total;
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:5px;
  }
  .cust-td-total .cust-cell-label{
    display:inline;
    font-size:.76rem;
    color:var(--muted);
    font-weight:600;
    text-transform:uppercase;
  }
  .cust-td-total .cust-price-val{
    font-size:1.08rem;
    color:var(--canopy-dark);
    font-weight:800;
  }
  .cust-td-address{
    grid-area:address;
    max-width:100%;
    background:var(--husk);
    padding:10px 12px !important;
    border-radius:8px;
    font-size:.83rem;
    color:var(--ink-soft);
    line-height:1.45;
  }
  .cust-td-address .cust-cell-label{
    display:block;
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:2px;
  }
  .cust-td-address .cust-addr-text{
    word-break:break-word;
  }
  .cust-td-action{
    grid-area:action;
    padding-top:4px !important;
  }
  .cust-td-action .table-action-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:42px;
    padding:10px 16px;
    font-size:.88rem;
    border-radius:8px;
    gap:8px;
    background:#e8f5e9;
    color:#1b5e20;
    border:1px solid #c8e6c9;
    font-weight:700;
    text-decoration:none;
    box-sizing:border-box;
  }
  .cust-td-action .table-action-btn:hover{
    background:#d4edda;
    color:#155724;
  }

  /* Empty State */
  .cust-table tbody tr.cust-empty-row{
    display:block;
    border:1.5px dashed var(--line);
    border-radius:14px;
    background:var(--white);
    padding:24px 16px;
  }
  .cust-table tbody tr.cust-empty-row td{
    display:block;
    padding:0 !important;
    border:none !important;
  }

  /* Forms on Mobile */
  .cust-form-row{
    grid-template-columns:1fr;
    gap:14px;
  }
  .cust-input-wrapper input,
  .cust-input-wrapper select{
    font-size:16px; /* Prevents auto-zoom on iOS */
    padding:13px 44px 13px 40px;
    min-height:48px;
    border-radius:10px;
  }
  .cust-input-icon{
    left:13px;
    width:18px;
    height:18px;
  }
  .cust-pw-toggle{
    min-width:44px;
    min-height:44px;
    right:2px;
  }
  .cust-profile-actions{
    margin-top:14px;
  }
  .cust-profile-actions button{
    width:100%;
    min-height:48px;
    font-size:.95rem;
    justify-content:center;
    border-radius:10px;
  }
  .cust-pw-tips{
    padding:14px 16px;
    border-radius:10px;
    margin:8px 0 16px;
  }
}

@media (max-width:460px){
  .cust-dash-banner{
    padding:16px 14px;
  }
  .cust-dash-actions{
    grid-template-columns:1fr;
    gap:8px;
  }
  .cust-avatar{
    width:44px;
    height:44px;
    font-size:1.05rem;
  }
  .cust-user-info h1{
    font-size:1.18rem;
  }
  .cust-card-box{
    padding:16px 12px;
  }
  .cust-order-row{
    padding:14px 12px;
  }
}

/* Navbar Account Icon Button */
.nav-account-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--husk);
  color:var(--canopy);
  border:1.5px solid var(--line);
  transition:all .2s ease;
  text-decoration:none;
  flex-shrink:0;
}
.nav-account-btn:hover,
.nav-account-btn.active{
  background:var(--canopy);
  color:var(--white);
  border-color:var(--canopy);
  box-shadow:0 4px 12px rgba(44,95,52,.2);
}
.nav-mobile-account a{
  color:var(--canopy) !important;
  font-weight:700 !important;
}

/* Password Tips Box */
.cust-pw-tips{
  background:var(--husk);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 20px;
  margin:4px 0 10px;
}
.cust-pw-tips .tip-title{
  display:block;
  font-size:.82rem;
  font-weight:700;
  color:var(--canopy-dark);
  margin-bottom:6px;
}
.cust-pw-tips ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cust-pw-tips li{
  font-size:.78rem;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:6px;
}
.cust-pw-tips li::before{
  content:"✓";
  color:var(--canopy);
  font-weight:800;
}

/* ==========================================================================
   ORDER NOW POPUP MODAL (Fresh Microgreens Harvest Reservation)
   ========================================================================== */
.order-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15, 33, 20, 0.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .25s ease;
}
.order-modal-backdrop.active{
  display:flex;
  opacity:1;
}
.order-modal-dialog{
  position:relative;
  width:100%;
  max-width:960px;
  max-height:92vh;
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 25px 60px rgba(10, 30, 15, 0.35), 0 0 0 1px rgba(255,255,255,0.2);
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  transform:translateY(24px) scale(0.96);
  transition:transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.order-modal-dialog::-webkit-scrollbar{
  width:5px;
}
.order-modal-dialog::-webkit-scrollbar-track{
  background:rgba(0,0,0,0.02);
}
.order-modal-dialog::-webkit-scrollbar-thumb{
  background:rgba(44,95,52,0.25);
  border-radius:10px;
}
.order-modal-dialog::-webkit-scrollbar-thumb:hover{
  background:rgba(44,95,52,0.5);
}
.order-modal-backdrop.active .order-modal-dialog{
  transform:translateY(0) scale(1);
}
.order-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#ffffff;
  border:1px solid var(--line);
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:20;
  transition:all .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.order-modal-close:hover{
  background:var(--canopy-dark);
  color:#ffffff;
  border-color:var(--canopy-dark);
  transform:rotate(90deg);
}
.order-modal-body{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  min-height:0;
}

/* Left Column: Product Showcase */
.order-modal-showcase{
  background:linear-gradient(165deg, #f5f8f3 0%, #eaf1e7 100%);
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
  border-right:1px solid rgba(44,95,52,.12);
}
.modal-product-img-wrap{
  position:relative;
  width:100%;
  height:270px;
  border-radius:12px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(44,95,52,.12);
  box-shadow:0 6px 18px rgba(44,95,52,.06);
}
.modal-product-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.modal-product-badge{
  position:absolute;
  bottom:8px;
  left:8px;
  font-family:var(--mono);
  font-size:.65rem;
  font-weight:700;
  color:#ffffff;
  background:rgba(25,59,33,.92);
  backdrop-filter:blur(4px);
  padding:3px 8px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.2);
}
.modal-product-meta h3{
  font-family:var(--serif);
  font-size:1.22rem;
  color:var(--canopy-dark);
  margin:0 0 2px;
}
.modal-product-meta .modal-product-tagline{
  font-size:.76rem;
  color:var(--ink-soft);
  line-height:1.35;
  margin:0;
}
.modal-perks-list{
  list-style:none;
  padding:0;
  margin:4px 0 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.modal-perks-list li{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.73rem;
  color:var(--canopy-dark);
  font-weight:600;
}
.modal-perks-list li svg{
  color:var(--canopy);
  flex-shrink:0;
}

/* Right Column: Order Form */
.order-modal-form-wrap{
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.order-modal-header h2{
  font-family:var(--serif);
  font-size:1.22rem;
  color:var(--canopy-dark);
  margin:0;
  line-height:1.2;
}
.order-modal-header p{
  font-size:.74rem;
  color:var(--ink-soft);
  margin:2px 0 0;
}
.order-modal-form{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.order-modal-form .cust-input-group label{
  display:block;
  font-size:.74rem;
  font-weight:400;
  color:var(--ink);
  margin-bottom:2px;
}
.order-modal-form .cust-input-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}
.order-modal-form .cust-input-icon{
  position:absolute;
  left:10px;
  width:15px;
  height:15px;
  color:var(--ink-soft);
  pointer-events:none;
  flex-shrink:0;
}
.order-modal-form .cust-input-wrapper input{
  width:100%;
  padding:5px 10px 5px 32px;
  border:1.5px solid var(--line);
  border-radius:6px;
  font-size:.82rem;
  height:34px;
  color:var(--ink);
  background:transparent;
  transition:all .2s ease;
  outline:none;
  font-family:var(--sans);
}
.order-modal-form .cust-input-wrapper input:focus{
  background:transparent;
  border-color:var(--canopy);
  box-shadow:0 0 0 2px rgba(44,95,52,.12);
}
.order-modal-form .cust-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.modal-qty-group{
  margin-top:-1px;
  margin-bottom:0;
}
.modal-qty-slider-card{
  background:transparent;
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:4px 8px;
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:0;
}
.modal-qty-slider-card .slider-minimal-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.modal-qty-slider-card .slider-stock-tag{
  font-size:.72rem;
  padding:2px 8px;
}
.modal-qty-slider-card .slider-selection-pill{
  background:linear-gradient(135deg, var(--canopy-dark) 0%, var(--canopy) 100%);
  border-radius:6px;
  padding:3px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 2px 6px rgba(25,59,33,.18);
}
.modal-qty-slider-card .selection-qty-block,
.modal-qty-slider-card .selection-price-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.1;
  padding:0 2px;
}
.modal-qty-slider-card .sel-micro-lbl{
  font-family:var(--mono);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.05em;
  color:rgba(255,255,255,.85);
  text-transform:uppercase;
  margin-bottom:1px;
  padding:0;
}
.modal-qty-slider-card .sel-qty-num{
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:800;
  color:#ffffff;
}
.modal-qty-slider-card .selection-split-line{
  width:1px;
  height:16px;
  background:rgba(255,255,255,.3);
}
.modal-qty-slider-card .sel-price-num{
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:800;
  color:var(--gold);
}
.modal-qty-slider-card .slider-control-wrap.minimal{
  gap:6px;
}
.modal-qty-slider-card .slider-step-btn{
  width:24px;
  height:24px;
}
.modal-qty-slider-card .harvest-range-slider{
  margin:1px 0 0;
  height:5px;
}
.modal-qty-slider-card .slider-range-labels{
  font-size:.62rem;
  padding:0;
}
.modal-submit-btn{
  margin-top:4px;
  padding:8px 16px;
  font-size:.88rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  border:none;
  border-radius:6px;
  width:100%;
  height:38px;
}

@media (max-width:768px){
  .order-modal-dialog{
    max-height:94vh;
    margin:8px;
    overflow-y:auto;
  }
  .order-modal-body{
    grid-template-columns:1fr;
    max-height:none;
    overflow-y:visible;
  }
  .order-modal-showcase{
    padding:16px 16px 12px;
    border-right:none;
    border-bottom:1px solid var(--line);
    gap:10px;
  }
  .order-modal-showcase .modal-product-img-wrap{
    height:110px;
  }
  .modal-perks-list{
    display:none;
  }
  .order-modal-form-wrap{
    padding:16px 16px 20px;
    gap:10px;
  }
  .order-modal-form .cust-form-row{
    grid-template-columns:1fr;
  }
}

/* ==========================================================================
   PRODUCT DETAIL CMS ADMIN STYLES
   ========================================================================== */
.cms-product-select-bar{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 20px;
  margin-bottom:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.cms-select-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  color:var(--ink-soft);
}
.cms-select-label strong{
  color:var(--canopy-dark);
  font-size:1.05rem;
  font-family:var(--serif);
}
.cms-select-dropdown{
  padding:8px 14px;
  border:1.5px solid var(--line);
  border-radius:6px;
  font-size:.86rem;
  font-family:var(--sans);
  font-weight:600;
  color:var(--canopy-dark);
  background:var(--husk);
  cursor:pointer;
  outline:none;
}
.cms-select-dropdown:focus{
  border-color:var(--canopy);
}

.cms-section-card{
  padding:24px;
}
.cms-card-header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}
.cms-header-badge{
  width:36px;
  height:36px;
  border-radius:8px;
  background:rgba(44,95,52,.1);
  color:var(--canopy);
  font-weight:700;
  font-size:.92rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.cms-card-header h3{
  margin:0 0 4px;
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--canopy-dark);
}
.cms-card-header p{
  margin:0;
  font-size:.84rem;
  color:var(--ink-soft);
}

.cms-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.cms-grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}
.cms-grid-4{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:16px;
}

/* ==========================================================================
   UNIFIED CMS INPUT & TEXTAREA STYLES (MATCH ALL FIELDS)
   ========================================================================== */
.cms-form-stack .cust-input-group label{
  display:block;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}

.cms-form-stack .cust-input-wrapper{
  width:100%;
  display:block;
  position:relative;
}

.cms-form-stack .cust-input-wrapper input,
.cms-form-stack .cust-input-wrapper select,
.cms-form-stack .cust-input-wrapper textarea{
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--line);
  border-radius:8px;
  font-family:var(--sans);
  font-size:.88rem;
  color:var(--ink);
  background:var(--white);
  transition:all .2s ease;
  box-sizing:border-box;
  outline:none;
  line-height:1.5;
}

.cms-form-stack .cust-input-wrapper textarea{
  resize:vertical;
  min-height:75px;
}

.cms-form-stack .cust-input-wrapper input:focus,
.cms-form-stack .cust-input-wrapper select:focus,
.cms-form-stack .cust-input-wrapper textarea:focus{
  background:#ffffff;
  border-color:var(--canopy);
  box-shadow:0 0 0 3px rgba(44,95,52,.12);
}

.cms-form-stack .cust-input-wrapper input::placeholder,
.cms-form-stack .cust-input-wrapper textarea::placeholder{
  color:var(--muted);
  font-size:.84rem;
}

.cms-label-with-badge{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.cms-pill-guide{
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  background:rgba(199,144,58,.15);
  color:#9e6a18;
  padding:2px 8px;
  border-radius:999px;
  letter-spacing:.04em;
}
.cms-field-hint{
  display:block;
  margin-top:6px;
  font-size:.76rem;
  color:var(--ink-soft);
  line-height:1.4;
}

.cms-sub-box{
  background:#fbfaf8;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
}
.cms-sub-box-title{
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--canopy);
  margin-bottom:12px;
}

.cms-loop-container{
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
  background:#ffffff;
}
.cms-loop-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:12px;
  border-bottom:1px dashed var(--line);
  margin-bottom:14px;
}
.btn-cms-add{
  background:var(--canopy);
  color:var(--white);
  border:none;
  padding:6px 14px;
  border-radius:6px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.btn-cms-add::before{
  content:'+';
  font-size:1rem;
  font-weight:700;
  line-height:1;
}
.btn-cms-add:hover{
  background:var(--canopy-dark);
}

.cms-card-items-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cms-card-loop-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:#faf8f5;
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  position:relative;
  transition:border-color .2s ease;
}
.cms-card-loop-item:hover{
  border-color:rgba(44,95,52,.3);
}
.cms-loop-item-num{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--canopy-dark);
  color:var(--white);
  font-size:.75rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:4px;
}
.cms-loop-item-fields{
  flex-grow:1;
}
.cms-remove-btn{
  background:transparent;
  border:none;
  color:#c62828;
  cursor:pointer;
  padding:6px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}
.cms-remove-btn:hover{
  background:#ffebee;
}

.cms-checkbox-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
  margin-top:8px;
}
.cms-check-tile{
  display:flex;
  align-items:center;
  gap:10px;
  background:#faf8f5;
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
  cursor:pointer;
  transition:all .2s ease;
}
.cms-check-tile:hover{
  border-color:var(--canopy);
  background:#ffffff;
}
.cms-check-tile input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--canopy);
  cursor:pointer;
}
.cms-check-info strong{
  display:block;
  font-size:.85rem;
  color:var(--ink);
}
.cms-check-info span{
  display:block;
  font-size:.75rem;
  color:var(--ink-soft);
}

.cms-footer-bar{
  margin-top:28px;
  padding:16px 24px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}

@media(max-width:768px){
  .cms-product-select-bar{
    flex-direction:column;
    align-items:stretch;
  }
  .cms-grid-2,
  .cms-grid-3{
    grid-template-columns:1fr;
  }
  .cms-card-loop-item{
    flex-direction:column;
  }
  .cms-remove-btn{
    align-self:flex-end;
  }
}

/* Products Directory Cell Styles */
.admin-prod-cell{
  display:flex;
  align-items:center;
  gap:12px;
}
.admin-prod-thumb{
  width:44px;
  height:44px;
  border-radius:8px;
  object-fit:cover;
  background:#f4efe6;
  border:1px solid var(--line);
  flex-shrink:0;
}
.admin-prod-cell strong{
  display:block;
  font-family:var(--sans);
  font-size:.9rem;
  color:var(--canopy-dark);
}
.admin-prod-flavor{
  display:block;
  font-size:.76rem;
  color:var(--ink-soft);
  margin-top:2px;
}

/* ==========================================================================
   CMS FILE UPLOAD COMPONENT STYLES
   ========================================================================== */
.cms-file-upload-box{
  display:flex;
  align-items:center;
  gap:10px;
  background:#ffffff;
  border:1.5px dashed var(--line);
  border-radius:8px;
  padding:6px 12px;
  position:relative;
  transition:all .2s ease;
  min-height:42px;
  box-sizing:border-box;
  cursor:pointer;
  width:100%;
}
.cms-file-upload-box:hover{
  border-color:var(--canopy);
  background:#fbfdfa;
  box-shadow:0 2px 8px rgba(44,95,52,.08);
}
.cms-file-upload-box:focus-within{
  border-color:var(--canopy);
  border-style:solid;
  box-shadow:0 0 0 3px rgba(44,95,52,.12);
}
.cms-file-upload-box input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
  z-index:5;
}
.cms-thumb-mini{
  width:30px;
  height:30px;
  border-radius:6px;
  object-fit:cover;
  border:1px solid var(--line);
  flex-shrink:0;
  background:#f7f5f0;
}
.cms-upload-icon-placeholder{
  width:30px;
  height:30px;
  border-radius:6px;
  background:#f4efe6;
  color:var(--canopy);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.cms-upload-txt{
  font-size:.8rem;
  color:var(--ink-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex-grow:1;
  font-family:var(--sans);
}
.cms-upload-btn-fake{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  font-size:.74rem;
  font-weight:600;
  background:#f4efe6;
  color:var(--canopy-dark);
  border-radius:6px;
  border:1px solid rgba(44,95,52,.15);
  flex-shrink:0;
  transition:all .2s ease;
  pointer-events:none;
}
.cms-file-upload-box:hover .cms-upload-btn-fake{
  background:var(--canopy);
  color:#ffffff;
  border-color:var(--canopy);
}

.cms-card-items-stack{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:768px){
  .cms-card-items-stack{
    grid-template-columns:1fr;
  }
}

/* ==========================================================================
   ORDER CONFIRMED POPUP (Redirecting to WhatsApp)
   ========================================================================== */
.order-confirm-popup-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10, 25, 15, 0.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .3s ease;
}
.order-confirm-popup-backdrop.active{
  display:flex;
  opacity:1;
}
.order-confirm-popup-box{
  position:relative;
  width:100%;
  max-width:540px;
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(217, 205, 176, 0.4);
  padding:40px 36px 36px;
  text-align:center;
  transform:translateY(20px) scale(0.95);
  transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow:hidden;
}
.order-confirm-popup-backdrop.active .order-confirm-popup-box{
  transform:translateY(0) scale(1);
}
.confirm-popup-icon-wrap{
  width:72px;
  height:72px;
  background:#eaf8ed;
  border:2px solid #bbf7d0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  font-size:36px;
  box-shadow:0 8px 24px rgba(34, 197, 94, 0.2);
  animation:bouncePop .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes bouncePop{
  0%{ transform:scale(0.3); opacity:0; }
  60%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); }
}
.confirm-popup-title{
  font-family:var(--serif);
  font-size:2rem;
  color:#193b21;
  margin:0 0 8px 0;
  line-height:1.2;
}
.confirm-popup-sub{
  font-size:1.02rem;
  color:#4a5568;
  margin:0 0 20px 0;
  line-height:1.5;
}
.confirm-order-badge-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#f4ebd0;
  color:#854d0e;
  border:1px solid #e0ce9f;
  padding:6px 16px;
  border-radius:30px;
  font-family:var(--mono);
  font-size:0.92rem;
  font-weight:700;
  margin-bottom:24px;
}
.confirm-step-highlight{
  background:#f8faf6;
  border:1.5px solid #d9e6d5;
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:24px;
  text-align:left;
}
.step-highlight-title{
  margin:0 0 8px 0;
  font-size:1rem;
  color:#15803d;
  line-height:1.4;
}
.step-highlight-title strong#waCountdownSeconds{
  font-size:1.2rem;
  background:#dcfce7;
  padding:2px 8px;
  border-radius:6px;
  border:1px solid #86efac;
  color:#166534;
}
.step-highlight-desc{
  margin:0;
  font-size:0.9rem;
  color:#4b5563;
  line-height:1.45;
}
.confirm-progress-bar-wrap{
  width:100%;
  height:6px;
  background:#e5e7eb;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:24px;
}
.confirm-progress-bar-fill{
  width:100%;
  height:100%;
  background:linear-gradient(90deg, #25D366, #128C7E);
  transition:width 1s linear;
}
.confirm-popup-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.btn-wa-direct{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:14px 24px;
  background:#25D366;
  color:#ffffff !important;
  font-family:var(--sans);
  font-size:1.05rem;
  font-weight:700;
  border-radius:12px;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(37, 211, 102, 0.35);
  transition:all .2s ease;
  border:none;
  cursor:pointer;
}
.btn-wa-direct:hover{
  background:#20ba59;
  transform:translateY(-1px);
  box-shadow:0 8px 25px rgba(37, 211, 102, 0.45);
}
.confirm-redirect-status{
  font-family:var(--mono);
  font-size:0.82rem;
  color:#6b7280;
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
}
.confirm-popup-close-btn{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f3f4f6;
  border:none;
  font-size:22px;
  line-height:1;
  color:#6b7280;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
  z-index:2;
}
.confirm-popup-close-btn:hover{
  background:#e5e7eb;
  color:#111827;
  transform:scale(1.08);
}
.btn-return-product{
  background:transparent;
  border:none;
  color:#4b5563;
  font-family:var(--sans);
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  padding:4px 10px;
  text-decoration:underline;
  transition:color .2s ease;
}
.btn-return-product:hover{
  color:#15803d;
}















/* ============================================================
   HERO SPLIT LAYOUT (TEXT LEFT, IMAGE CARDS RIGHT)
   ============================================================ */
.hero-video-banner{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;}
.hero-bg-overlay{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1;}
.hero-bg-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,59,33,.85) 0%,rgba(25,59,33,.55) 50%,rgba(25,59,33,.2) 100%);}
.hero-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:80px 0;}
.hero-left-content{color:#fff;}
.hero-eyebrow-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(44,95,52,.7);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);padding:8px 18px;border-radius:30px;font-size:.82rem;font-weight:600;color:#c68a2c;margin-bottom:28px;letter-spacing:.02em;}
.hero-eyebrow-pill svg{stroke:#c68a2c;}
.hero-title-split{font-family:var(--serif);font-size:2.75rem;font-weight:500;line-height:1.08;color:#fff;margin:0 0 24px;letter-spacing:-.02em;}
.hero-title-split em{color:#c68a2c;font-style:normal;text-decoration:underline;text-decoration-color:rgba(198,138,44,.4);text-underline-offset:6px;}
.hero-lede-split{font-size:1.05rem;color:rgba(255,255,255,.8);line-height:1.6;margin:0 0 32px;max-width:500px;}
.hero-cta-btn{display:inline-flex;align-items:center;gap:10px;background:#c68a2c;color:#fff;border-radius:30px;padding:14px 28px;font-weight:700;font-size:.95rem;border:none;transition:all .3s ease;}
.hero-cta-btn:hover{background:#a06f1f;transform:translateY(-2px);box-shadow:0 8px 20px rgba(198,138,44,.4);}
.hero-cta-icon{width:32px;height:32px;background:rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;}
.hero-cta-btn:hover .hero-cta-icon{background:var(--gold);transform:rotate(45deg);}
.hero-cta-icon svg{width:14px;height:14px;stroke:#fff;}
.hero-right-cards{display:flex;flex-direction:column;align-items:flex-end;gap:24px;justify-content:center;padding-right:20px;}
.hero-badge-card{display:flex;align-items:center;background:rgba(20,40,25,.75);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;overflow:hidden;padding:12px;gap:16px;width:310px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .4s ease,background .4s ease;}
.hero-card-1{transform:translateX(-40px);}.hero-card-2{transform:translateX(0);}.hero-card-3{transform:translateX(-60px);}
.hero-badge-card:hover{background:rgba(20,40,25,.9);}
.hero-card-1:hover{transform:translateX(-40px) translateY(-5px) scale(1.03);}.hero-card-2:hover{transform:translateX(0) translateY(-5px) scale(1.03);}.hero-card-3:hover{transform:translateX(-60px) translateY(-5px) scale(1.03);}
.hero-badge-card img{width:70px;height:70px;object-fit:cover;border-radius:12px;}
.hero-badge-text{flex:1;text-align:left;}
.hero-badge-text h4{color:#fff;margin:0 0 4px;font-size:.95rem;font-weight:700;}
.hero-badge-text p{color:rgba(255,255,255,.75);margin:0;font-size:.8rem;line-height:1.4;}
@media(max-width:992px){.hero-split-grid{grid-template-columns:1fr;gap:40px;text-align:center;}.hero-title-split{font-size:2.8rem;}.hero-lede-split{max-width:100%;margin:0 auto 28px;}.hero-right-cards{align-items:center;padding-right:0;flex-direction:row;flex-wrap:wrap;}.hero-badge-card{width:310px;}.hero-card-1,.hero-card-2,.hero-card-3{transform:none;}.hero-card-1:hover,.hero-card-2:hover,.hero-card-3:hover{transform:translateY(-5px) scale(1.03);}}
@media(max-width:600px){.hero-title-split{font-size:2.2rem;}.hero-right-cards{flex-direction:column;}.hero-badge-card{width:100%;max-width:310px;}}

/* ============================================================
   PHILOSOPHY SECTION
   ============================================================ */
.philosophy-section{padding:100px 0;position:relative;overflow:hidden;background:#ffffff;}
.phil-head-split{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:48px;
  align-items:flex-end;
  margin-bottom:48px;
}
.phil-head-left{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.phil-head-left h2{
  font-size:1.8rem;
  line-height:1.2;
  color:var(--canopy-dark);
  margin:0;
}
.phil-head-right{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.phil-head-right p{
  font-size:1.02rem;
  color:var(--ink-soft);
  line-height:1.65;
  margin:0;
}
.float-leaf{position:absolute;z-index:1;opacity:.15;filter:blur(2px);pointer-events:none;}
.leaf-1{top:15%;left:5%;width:60px;transform:rotate(45deg);animation:floatLeaf 6s ease-in-out infinite;}
.leaf-2{top:10%;right:10%;width:80px;transform:rotate(-30deg);opacity:.1;filter:blur(4px);animation:floatLeaf 8s ease-in-out infinite alternate;}
.leaf-3{top:50%;left:2%;width:50px;transform:rotate(110deg);animation:floatLeaf 7s ease-in-out infinite alternate;}
.leaf-4{bottom:20%;right:5%;width:90px;transform:rotate(-60deg);opacity:.2;animation:floatLeaf 9s ease-in-out infinite alternate;}
.leaf-5{bottom:5%;left:30%;width:40px;transform:rotate(15deg);filter:blur(1px);animation:floatLeaf 5s ease-in-out infinite alternate;}
@keyframes floatLeaf{0%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-20px) rotate(10deg);}100%{transform:translateY(0) rotate(0deg);}}
.phil-grid{display:grid;grid-template-columns:1fr 480px 1fr;gap:30px;align-items:center;}
.phil-grid-minimal{grid-template-columns:1fr 500px 1fr;gap:50px;}
.phil-center{position:relative;z-index:5;}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.phil-center img{width:100%;height:auto;display:block;animation:spinSlow 35s linear infinite;transition:transform 0.3s;}
.phil-center img:hover{animation-play-state:paused;}
.phil-col{display:flex;flex-direction:column;gap:40px;}
.phil-grid-minimal .phil-col{justify-content:center;}
.phil-item{position:relative;z-index:2;}
.phil-num-wrap{position:relative;display:inline-flex;margin-bottom:12px;}
.phil-num{width:44px;height:44px;border-radius:50%;background:var(--canopy);color:var(--white);font-family:var(--serif);font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.15);}
.phil-num::before{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border:2px solid var(--gold);border-radius:50%;z-index:-1;opacity:0.6;}
.phil-line{position:absolute;top:50%;width:140px;height:1px;border-top:1.5px dashed rgba(44,95,52,.4);z-index:-1;display:flex;align-items:center;}

/* MINIMAL GRID SYMMETRY */
.phil-grid-minimal .left-col { align-items: flex-end; text-align: right; }
.phil-grid-minimal .phil-line { width: 120px; border-top: 2px dashed rgba(44,95,52,.3); }
.left-col .phil-line{left:100%;justify-content:flex-end;}
.right-col .phil-line{right:100%;justify-content:flex-start;}

.phil-dot{width:6px;height:6px;background:var(--canopy);border-radius:50%;position:relative;top:-1px;}
.left-col .phil-dot{margin-right:-3px;}
.right-col .phil-dot{margin-left:-3px;}
.phil-item h4{font-size:1.1rem;color:var(--canopy-dark);margin:0 0 6px;font-weight:700;}
.phil-item p{font-size:.88rem;color:var(--ink-soft);margin:0;line-height:1.5;}
.phil-btn{background:#d4df3d;color:#1e3d23;border-radius:30px;font-weight:700;padding:12px 28px;display:inline-flex;align-items:center;border:none;transition:all .3s ease;}
.phil-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(212,223,61,.4);color:#1e3d23;}
@media(max-width:1024px){.phil-grid{grid-template-columns:1fr 380px 1fr;gap:20px;}.phil-line{width:60px;}.phil-head-split{gap:30px;}}
@media(max-width:768px){.philosophy-section{padding:50px 0;}.phil-head-split{grid-template-columns:1fr;gap:12px;margin-bottom:28px;}.phil-grid{grid-template-columns:1fr;text-align:center;}.phil-center{order:-1;max-width:400px;margin:0 auto 30px;}.phil-col{gap:30px;}.phil-item{display:flex;flex-direction:column;align-items:center;}.phil-line{display:none;}.phil-grid-minimal .left-col{align-items:center;text-align:center;}}

/* ============================================================
   GLOBAL SCROLL REVEAL
   ============================================================ */
.farm-moments-section{
  position:relative;
  overflow:hidden;
  padding:86px 0 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(127,158,93,.14), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(214,224,191,.45), transparent 28%),
    var(--husk);
}
.farm-moments-section::before{
  display:none;
}
.farm-moments-section::after{
  display:none;
}
.farm-moments-leaf{
  position:absolute;
  width:100px;
  opacity:.22;
  pointer-events:none;
  z-index:0;
  animation:farmMomentLeafFloat 7s ease-in-out infinite alternate;
}
.farm-moments-leaf-left{left:-18px;bottom:14%;transform:rotate(-28deg);}
.farm-moments-leaf-right{right:-18px;top:8%;width:120px;transform:rotate(38deg);animation-delay:1.5s;}
.farm-moments-section .wrap{position:relative;z-index:1;}
.farm-moments-heading{text-align:left;max-width:none;margin:0 0 46px;}
.farm-moments-heading .eyebrow{margin-bottom:10px;}
.farm-moments-heading h2 span{color:inherit;}
.farm-moments-heading .farm-moments-follow{
  margin:0;
}
.farm-moments-carousel{position:relative;}
.farm-moments-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;min-width:0;width:100%;}
.farm-moment-card{position:relative;aspect-ratio:9/15;min-height:280px;overflow:hidden;border-radius:12px;background:var(--canopy-dark);box-shadow:0 12px 24px rgba(25,59,33,.13);isolation:isolate;}
.farm-moment-card video{width:100%;height:100%;object-fit:cover;display:block;}
.farm-moment-card::after{content:"";position:absolute;inset:35% 0 0;z-index:1;background:linear-gradient(to bottom,transparent,rgba(8,22,13,.82));pointer-events:none;}
.farm-moment-overlay{position:absolute;left:14px;right:12px;bottom:14px;color:#fff;z-index:2;}
.farm-moment-play{display:flex;align-items:center;gap:5px;font-size:.78rem;margin-bottom:8px;}
.farm-moment-play svg{width:14px;height:14px;fill:currentColor;stroke:none;}
.farm-moment-overlay strong{display:block;font-size:.94rem;line-height:1.2;font-weight:600;}
.farm-moments-follow{display:flex;width:max-content;margin:28px auto 20px;padding:12px 24px;border-radius:0px;background:linear-gradient(100deg,#f06b37,#d92f86,#9a3bb2);color:#fff;font-weight:700;font-size:.9rem;box-shadow:0 8px 18px rgba(202,49,115,.2);transition:transform .2s ease;}
.farm-moments-follow:hover{color:#fff;transform:translateY(-2px);}
.farm-moments-follow span{font-size:1.25rem;line-height:.8;margin-left:10px;}
.farm-moments-topics{display:flex;justify-content:center;gap:0;color:var(--ink-soft);font-size:.78rem;margin-top:28px;padding:22px 0;background:rgba(220,233,204,.56);border-top:1px solid rgba(92,138,106,.18);}
.farm-moments-topics span{padding:0 22px;border-right:1px solid rgba(44,95,52,.2);}
.farm-moments-topics span:last-child{border-right:0;}
@keyframes farmMomentLeafFloat{from{margin-top:0;}to{margin-top:-14px;}}
@media(max-width:900px){
  .farm-moments-track{grid-template-columns:repeat(3,minmax(0,1fr));}
  .farm-moments-topics{flex-wrap:wrap;row-gap:12px;}
  .farm-moments-topics span{padding:0 12px;}
}
@media(max-width:600px){
  .farm-moments-section{padding:62px 0 0;}
  .farm-moments-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .farm-moments-leaf{width:64px;}
  .farm-moments-leaf-right{width:76px;}
}
.global-reveal{opacity:1;transform:translateY(0);transition:opacity 1.2s cubic-bezier(0.16,1,0.3,1),transform 1.2s cubic-bezier(0.16,1,0.3,1);transition-delay:var(--delay, 0s);}
.global-reveal.is-visible{opacity:1;transform:translateY(0);}

/* ============================================================
   GRAND LAUNCH SPECTACULAR POPUP (LIGHT THEME & ANIMATIONS)
   ============================================================ */
body.launch-modal-active{
  overflow:hidden !important;
}

.grand-launch-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s cubic-bezier(.16,1,.3,1), visibility .4s ease;
  perspective:1000px;
}
.grand-launch-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Glass Backdrop */
.grand-launch-backdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(30, 60, 40, 0.45) 0%, rgba(10, 25, 15, 0.7) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:opacity .4s ease;
}

/* Confetti Canvas */
.grand-launch-confetti{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:1000000;
  pointer-events:none;
}

/* Rotating Golden Sunburst Aura */
.grand-sunburst-aura{
  position:absolute;
  top:50%;
  left:50%;
  width:850px;
  height:850px;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(198, 138, 44, 0.07) 0deg 12deg, transparent 12deg 24deg);
  pointer-events:none;
  z-index:1;
  animation:sunburstSpin 35s linear infinite;
  transform:translate(-50%, -50%);
}
@keyframes sunburstSpin{
  from{transform:translate(-50%, -50%) rotate(0deg);}
  to{transform:translate(-50%, -50%) rotate(360deg);}
}

/* Modal Dialog Card (Spectacular Spring Entrance) */
.grand-launch-dialog.grand-launch-spectacular{
  position:relative;
  z-index:2;
  width:100%;
  max-width:780px;
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  background:#ffffff;
  border-radius:28px;
  border:2px solid rgba(198, 138, 44, 0.35);
  box-shadow:0 30px 90px rgba(18, 45, 25, 0.28), 0 0 40px rgba(198, 138, 44, 0.20), 0 4px 20px rgba(0, 0, 0, 0.05);
  color:var(--ink);
  transform:scale(0.85) translateY(30px);
  opacity:0;
  transition:transform .45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .35s ease;
}
.grand-launch-dialog.grand-launch-spectacular::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
.grand-launch-overlay.is-open .grand-launch-dialog.grand-launch-spectacular{
  transform:scale(1) translateY(0);
  opacity:1;
}

/* Floating Celebration Sparkles */
.launch-float-sparkle{
  position:absolute;
  z-index:12;
  font-size:1.4rem;
  pointer-events:none;
  filter:drop-shadow(0 2px 8px rgba(198, 138, 44, 0.4));
  animation:floatSparkle 4s ease-in-out infinite;
}
.sparkle-1{ top:18px; left:20px; animation-delay:0s; }
.sparkle-2{ top:18px; right:64px; animation-delay:1s; font-size:1.5rem; }
.sparkle-3{ bottom:22px; left:24px; animation-delay:2s; }
.sparkle-4{ bottom:22px; right:32px; animation-delay:1.5s; }

@keyframes floatSparkle{
  0%, 100%{ transform:translateY(0) scale(1) rotate(0deg); }
  50%{ transform:translateY(-10px) scale(1.15) rotate(12deg); }
}

/* Close Button */
.grand-launch-close.light{
  position:absolute;
  top:18px;
  right:18px;
  z-index:20;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(240, 245, 238, 0.95);
  border:1.5px solid rgba(44, 95, 52, 0.16);
  color:var(--canopy-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .25s ease;
  box-shadow:0 3px 10px rgba(0, 0, 0, 0.08);
}
.grand-launch-close.light:hover{
  background:var(--canopy);
  color:#ffffff;
  transform:rotate(90deg) scale(1.08);
  border-color:var(--canopy);
}

/* Two-Column Grid */
.grand-launch-inner{
  display:grid;
  grid-template-columns:300px 1fr;
  align-items:stretch;
  overflow:hidden;
}

/* Left Showcase (Arched Window & Seal) */
.grand-launch-visual-side{
  background:linear-gradient(170deg, #edf5eb 0%, #dbebd8 100%);
  padding:24px 18px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  border-right:1px solid rgba(44, 95, 52, 0.1);
}

.grand-visual-arch{
  position:relative;
  width:190px;
  height:245px;
  border-radius:95px 95px 18px 18px;
  overflow:hidden;
  border:3px solid #ffffff;
  box-shadow:0 16px 36px rgba(25, 59, 33, 0.16), 0 0 20px rgba(198, 138, 44, 0.15);
  animation:grandArchFloat 5s ease-in-out infinite;
  background:#fff;
}
@keyframes grandArchFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.grand-visual-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.grand-visual-arch:hover .grand-visual-img{
  transform:scale(1.06);
}
.grand-visual-glare{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%);
  pointer-events:none;
}

/* Rotating Embossed Seal */
.grand-official-seal{
  position:absolute;
  bottom:14px;
  right:12px;
  width:70px;
  height:70px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid var(--gold);
  box-shadow:0 8px 24px rgba(160, 111, 31, 0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:8;
}
.seal-spin-svg{
  width:100%;
  height:100%;
  animation:spinSeal 16s linear infinite;
}
@keyframes spinSeal{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
.seal-center-badge{
  position:absolute;
  font-size:1.15rem;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

/* Right Editorial Content */
.grand-launch-copy-side{
  padding:24px 28px 18px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#ffffff;
}

/* Celebration Ribbon Badge */
.grand-ribbon-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 14px;
  border-radius:30px;
  background:linear-gradient(90deg, #fff5db 0%, #fae6b8 100%);
  border:1.5px solid rgba(198, 138, 44, 0.6);
  color:var(--gold-dark);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
  width:fit-content;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(198, 138, 44, 0.18);
}
.ribbon-sparkle{
  font-size:.85rem;
}
.ribbon-shimmer{
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
  animation:sweepShimmer 3s infinite;
}
@keyframes sweepShimmer{
  0%{ left:-100%; }
  50%, 100%{ left:200%; }
}

/* Heading */
.grand-launch-heading{
  font-size:1.95rem;
  line-height:1.14;
  color:var(--canopy-dark);
  margin:0 0 10px;
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-0.015em;
}
.grand-launch-heading em{
  font-style:italic;
  color:var(--canopy);
  position:relative;
}
.grand-launch-heading em::after{
  content:"";
  position:absolute;
  bottom:-2px;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, var(--gold), transparent);
  border-radius:2px;
}

/* Lead */
.grand-launch-lead{
  font-size:.9rem;
  line-height:1.52;
  color:var(--ink-soft);
  margin:0 0 14px;
}

/* Pills Row */
.grand-pills-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:18px;
}
.grand-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f6faf5;
  border:1.2px solid rgba(44, 95, 52, 0.16);
  color:var(--canopy-dark);
  font-size:.74rem;
  font-weight:700;
  padding:5px 11px;
  border-radius:24px;
  transition:all .2s ease;
}
.grand-pill:hover{
  background:#e8f4e6;
  border-color:var(--canopy);
  transform:translateY(-1px);
}
.pill-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--canopy);
}

/* CTA Buttons */
.grand-cta-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.btn-grand-celebrate{
  position:relative;
  background:linear-gradient(135deg, var(--canopy) 0%, #1e4b27 100%);
  color:#ffffff;
  font-weight:700;
  font-size:.90rem;
  padding:12px 22px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 6px 20px rgba(44, 95, 52, 0.30);
  transition:all .25s ease;
  text-decoration:none;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.2);
}
.btn-grand-celebrate:hover{
  background:linear-gradient(135deg, #204b27 0%, #17371d 100%);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(44, 95, 52, 0.42);
  color:#ffffff;
}
.btn-celebrate-shimmer{
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  animation:sweepShimmer 3.5s infinite 1s;
}

.btn-grand-wa{
  background:#f4fbf6;
  color:#156a31;
  border:1.5px solid rgba(37, 211, 102, 0.45);
  font-weight:700;
  font-size:.85rem;
  padding:10px 18px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all .22s ease;
  text-decoration:none;
}
.btn-grand-wa:hover{
  background:#e5f8ec;
  border-color:#25d366;
  transform:translateY(-1px);
  color:#0f5225;
}

/* Dismiss Link */
.btn-dismiss-text{
  background:none;
  border:none;
  color:var(--ink-soft);
  font-size:.78rem;
  cursor:pointer;
  padding:4px 8px;
  margin-top:8px;
  text-align:center;
  transition:color .2s ease;
  display:block;
  width:100%;
}
.btn-dismiss-text:hover{
  color:var(--canopy);
  text-decoration:underline;
}
.btn-dismiss-text:hover{
  color:var(--canopy);
  text-decoration:underline;
}

/* Floating Reopen Chip (Light & Celebratory) */
.grand-launch-floating-chip.light-chip{
  position:fixed;
  bottom:26px;
  left:26px;
  z-index:99998;
  background:#ffffff;
  color:var(--canopy-dark);
  border:1.5px solid rgba(198, 138, 44, 0.55);
  border-radius:30px;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 10px 28px rgba(25, 59, 33, 0.16), 0 2px 8px rgba(198, 138, 44, 0.12);
  cursor:pointer;
  transition:all .28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.grand-launch-floating-chip.light-chip:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 34px rgba(25, 59, 33, 0.22);
  border-color:var(--gold);
}
.floating-chip-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#2eb85c;
  box-shadow:0 0 0 3px rgba(46, 184, 92, 0.3);
  animation:chipDotPulse 2s infinite;
}
@keyframes chipDotPulse{
  0%{ box-shadow:0 0 0 0 rgba(46, 184, 92, 0.6); }
  70%{ box-shadow:0 0 0 9px rgba(46, 184, 92, 0); }
  100%{ box-shadow:0 0 0 0 rgba(46, 184, 92, 0); }
}
.grand-launch-floating-chip.light-chip .floating-chip-text{
  font-size:.84rem;
  font-family:var(--sans);
  color:var(--canopy-dark);
}
.grand-launch-floating-chip.light-chip .floating-chip-text strong{
  color:var(--canopy);
}

/* Responsive Mobile Optimizations - 100% Scroll-Free & Seamless */
@media(max-width:768px){
  .grand-launch-overlay{
    padding:12px;
  }
  .grand-launch-dialog.grand-launch-spectacular{
    border-radius:22px;
    max-width:440px;
    max-height:calc(100dvh - 24px);
    overflow:hidden; /* Prevents ugly scrollbars on mobile */
  }
  .grand-launch-inner{
    grid-template-columns:1fr;
  }
  .grand-launch-visual-side{
    padding:16px 14px 10px;
    border-right:none;
    border-bottom:1px solid rgba(44, 95, 52, 0.08);
    background:linear-gradient(170deg, #edf5eb 0%, #e2efe0 100%);
  }
  .grand-visual-arch{
    width:115px;
    height:130px;
    border-radius:58px 58px 14px 14px;
    border-width:2px;
    box-shadow:0 8px 20px rgba(25, 59, 33, 0.12);
  }
  .grand-official-seal{
    width:52px;
    height:52px;
    bottom:6px;
    right:calc(50% - 74px);
    border-width:1.5px;
  }
  .seal-center-badge{
    font-size:.9rem;
  }
  .grand-launch-close.light{
    top:10px;
    right:10px;
    width:32px;
    height:32px;
    z-index:25;
  }
  .launch-float-sparkle{
    display:none; /* cleaner on small screens */
  }
  .grand-launch-copy-side{
    padding:14px 16px 16px;
    text-align:center;
    align-items:center;
  }
  .grand-ribbon-badge{
    margin-bottom:8px;
    font-size:.62rem;
    padding:3px 10px;
  }
  .grand-launch-heading{
    font-size:1.35rem;
    line-height:1.2;
    margin-bottom:6px;
  }
  .grand-launch-lead{
    font-size:.80rem;
    line-height:1.4;
    margin-bottom:12px;
  }
  .grand-pills-row{
    justify-content:center;
    gap:5px;
    margin-bottom:14px;
  }
  .grand-pill{
    font-size:.68rem;
    padding:4px 9px;
  }
  .grand-cta-group{
    width:100%;
    gap:7px;
  }
  .btn-grand-celebrate{
    width:100%;
    padding:10px 16px;
    font-size:.84rem;
  }
  .btn-grand-wa{
    width:100%;
    padding:9px 14px;
    font-size:.80rem;
  }
  .btn-dismiss-text{
    margin-top:8px;
    font-size:.74rem;
  }
}

@media(max-width:380px){
  .grand-launch-overlay{
    padding:8px;
  }
  .grand-launch-dialog.grand-launch-spectacular{
    border-radius:18px;
    max-height:calc(100dvh - 16px);
  }
  .grand-launch-visual-side{
    padding:12px 10px 8px;
  }
  .grand-visual-arch{
    width:95px;
    height:105px;
    border-radius:48px 48px 12px 12px;
  }
  .grand-official-seal{
    width:44px;
    height:44px;
    bottom:4px;
    right:calc(50% - 62px);
  }
  .seal-center-badge{
    font-size:.78rem;
  }
  .grand-launch-copy-side{
    padding:10px 12px 14px;
  }
  .grand-launch-heading{
    font-size:1.2rem;
  }
  .grand-launch-lead{
    font-size:.75rem;
    line-height:1.35;
    margin-bottom:10px;
  }
  .grand-pills-row{
    margin-bottom:10px;
  }
  .grand-pill{
    font-size:.64rem;
    padding:3px 7px;
  }
  .btn-grand-celebrate{
    padding:9px 12px;
    font-size:.80rem;
  }
  .btn-grand-wa{
    padding:8px 12px;
    font-size:.76rem;
  }
}

@media(max-height:550px) and (orientation:landscape){
  .grand-launch-dialog.grand-launch-spectacular{
    max-height:calc(100dvh - 16px);
    overflow-y:auto;
  }
  .grand-launch-inner{
    grid-template-columns:160px 1fr;
  }
  .grand-visual-arch{
    width:100px;
    height:120px;
    border-radius:50px 50px 12px 12px;
  }
  .grand-official-seal{
    display:none;
  }
  .grand-launch-copy-side{
    padding:12px 16px;
    text-align:left;
    align-items:flex-start;
  }
  .grand-pills-row{
    justify-content:flex-start;
    margin-bottom:10px;
  }
}