/* ============================================================
   SUJA — The Suja Ecosystem (.suja-eco-*)
   Layered sticky-stack tabbed showcase.
   - A persistent product tab row (.suja-eco-products-tabs-row)
     sticks below the fixed site header.
   - Each panel is position:sticky; panels stack and the next
     one rises and overlaps the previous (deck-of-cards effect).
   - Each panel's body is a 4-up card grid (image on top, body
     below, hover-reveal "Know more" link).
   - Active tab is driven by scroll position (ecosystem-scroll.js).
   Scoped to .suja-eco. Width aligns to the site 1366px grid.
   ============================================================ */

.suja-eco{
  --eco-teal:#0891b2;
  --eco-teal-dark:#075985;
  --eco-ink:#0c1e35;
  --eco-navy:#1a2e4a;
  --eco-text:#475569;
  --eco-muted:#64748b;
  --eco-border:#e2e8f0;
  --eco-bg:#f6f8fb;
  --eco-accent:#ff6b35;
  --eco-header:80px;   /* fixed site header height — refined by JS */
  --eco-tab-h:96px;    /* sticky tab-row height — refined by JS    */
  --eco-peek:12px;     /* visible strip of each covered panel      */
  font-family:'DM Sans', sans-serif;
  width:100%;
  padding:60px 0 0;
}
.suja-eco *{ box-sizing:border-box; }
.suja-eco-inner{ width:100%; }

/* Elementor wrapper safety — keep overflow visible so sticky works */
.suja-ecosystem-section,
.suja-ecosystem-section > .elementor-container,
.suja-ecosystem-section .elementor-column,
.suja-ecosystem-section .elementor-column-wrap,
.suja-ecosystem-section .elementor-widget-wrap,
.suja-ecosystem-section .elementor-widget-html,
.suja-ecosystem-section .elementor-widget-html > .elementor-widget-container{
  overflow:visible;
}
.suja-ecosystem-section .elementor-widget-html > .elementor-widget-container{ margin:0; }

/* ---- Section head — aligned to global typography scale ---- */
.suja-eco-head{ text-align:center; max-width:760px; margin:0 auto var(--block-gap, 40px); }
.suja-eco-eyebrow{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--eco-teal); margin:0 0 14px;
}
.suja-eco-heading{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:var(--font-h2, clamp(28px,3.4vw,48px));
  font-weight:700; line-height:var(--lh-h2, 1.15);
  letter-spacing:var(--ls-h2, -0.02em);
  color:var(--eco-ink); margin:0 0 14px;
}
.suja-eco-sub{
  font-size:var(--font-body-lg, clamp(16px,1.25vw,18px));
  line-height:var(--lh-body, 1.7);
  color:var(--eco-text); margin:0;
}

/* ============ PERSISTENT TAB ROW ============
   "OUR PRODUCTS" label sits above; each tab is a standalone
   big-box button (no shared pill bar). */
.suja-eco-tabs-wrap{
  position:sticky; top:var(--eco-header); z-index:30;
  background:var(--eco-bg);
  padding:16px 0 18px;
}
.suja-eco-products-tabs-row{
  display:flex; gap:12px;
  background:transparent; border:none; padding:0; border-radius:0; box-shadow:none;
}
.suja-eco-tab{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; gap:13px;
  padding:16px 18px;
  border:1px solid var(--eco-border);
  background:#ffffff;
  border-radius:14px;
  cursor:pointer; text-align:left;
  font-family:inherit;
  box-shadow:0 4px 14px -8px rgba(12,30,53,0.10);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.suja-eco-tab:hover{
  border-color:var(--eco-teal);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -14px rgba(12,30,53,0.18);
}
.suja-eco-tab-icon{
  width:44px; height:44px; border-radius:11px;
  background:#eef3f7; color:var(--eco-muted);
  display:grid; place-items:center; font-size:17px; flex-shrink:0;
  transition:background .18s ease, color .18s ease;
}
.suja-eco-tab-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.suja-eco-tab-name{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:16px; font-weight:600; color:var(--eco-ink);
  letter-spacing:-0.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .18s ease;
}
.suja-eco-tab-sublabel{
  font-size:12px; font-weight:500; color:var(--eco-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .18s ease;
}
.suja-eco-tab.is-active{
  background:var(--eco-navy);
  border-color:var(--eco-navy);
  box-shadow:0 18px 36px -14px rgba(8,145,178,0.30);
}
.suja-eco-tab.is-active .suja-eco-tab-icon{ background:#22d3ee; color:var(--eco-navy); }
.suja-eco-tab.is-active .suja-eco-tab-name{ color:#ffffff; }
.suja-eco-tab.is-active .suja-eco-tab-sublabel{ color:rgba(255,255,255,0.75); }

/* ============ STACKED STICKY PANELS ============ */
.suja-eco-stack{
  padding-top:4px;
  padding-bottom:clamp(120px,22vh,260px);
}
.suja-eco-panel{
  position:sticky;
  top:calc(var(--eco-header) + var(--eco-tab-h) + var(--i,0) * var(--eco-peek));
  z-index:calc(var(--i,0) + 1);
  min-height:calc(100vh - var(--eco-header) - var(--eco-tab-h));
  background:#ffffff;
  border:1px solid var(--eco-border);
  border-radius:20px;
  box-shadow:0 -4px 16px -4px #080d2914;
  padding:30px 32px;
  display:flex; flex-direction:column; justify-content:flex-start;
  /* Stepped-width deck — see ecosystem-scroll.js, which writes
     --depth on every panel each scroll frame. Active panel has
     depth 0 (full width); each panel behind shrinks 3%. */
  width:100%;
  margin-left:auto; margin-right:auto;
  transition:width .35s cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 768px){
  .suja-eco-panel{ width:calc(100% - var(--depth, 0) * 3%); }
}

/* Per-panel accent — drives the card-media gradient and chip colour */
.suja-eco-panel[data-panel="t1"]{ --card-accent:#0891b2; --card-soft:#e6f6fa; --card-soft-2:#bfe5ed; }
.suja-eco-panel[data-panel="t2"]{ --card-accent:#e11d8f; --card-soft:#fde7f2; --card-soft-2:#fbcfe3; }
.suja-eco-panel[data-panel="t3"]{ --card-accent:#ff6b35; --card-soft:#ffece2; --card-soft-2:#ffd4be; }
.suja-eco-panel[data-panel="t4"]{ --card-accent:#059669; --card-soft:#e6f5ef; --card-soft-2:#c4e9d8; }
.suja-eco-panel[data-panel="t5"]{ --card-accent:#4f46e5; --card-soft:#ecebfd; --card-soft-2:#d5d2fa; }

/* ---- Panel head ---- */
.suja-eco-panel-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:28px; margin-bottom:22px;
}
.suja-eco-panel-eyebrow{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--eco-teal); margin:0 0 10px;
}
.suja-eco-panel-title{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:var(--font-h3, clamp(22px,2.2vw,32px));
  font-weight:700; line-height:var(--lh-h3, 1.25);
  letter-spacing:var(--ls-h3, -0.012em);
  color:var(--eco-ink); margin:0 0 10px;
}
.suja-eco-panel-desc{
  font-size:var(--size-body, clamp(15px,1vw,17px));
  line-height:var(--lh-body, 1.7);
  color:var(--eco-text); margin:0; max-width:640px;
}
.suja-eco-cta-wrap{
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0;
}
.suja-eco-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:10px;
  background:var(--eco-accent); color:#ffffff;
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:13.5px;
  text-decoration:none; white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.suja-eco-cta:hover{ background:#e85a22; transform:translateY(-1px); color:#fff; }

/* ---- Panel content (sub-tabs + cards stack vertically) ---- */
.suja-eco-panel-content{ display:block; min-width:0; }

/* ---- Sub-tabs ---- */
.suja-eco-subtabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.suja-eco-subtab{
  display:inline-flex; align-items:center;
  padding:7px 15px; border-radius:999px; cursor:pointer;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:12.5px; font-weight:600; color:var(--eco-muted);
  background:#f1f5f9; border:1px solid transparent;
  transition:all .18s ease; user-select:none;
}
.suja-eco-subtab:hover{ color:var(--eco-ink); }

/* ============ CARD CAROUSEL (4-visible desktop + arrows) ============
   .suja-eco-cards-wrap is the positioning context for prev/next
   arrows; .suja-eco-cards is the horizontally-scrolling rail.
   ecosystem-scroll.js shows the arrows only when the rail overflows. */
.suja-eco-cards-wrap{
  display:none;
  position:relative;
}
.suja-eco-cards-wrap--solo{ display:block; }

.suja-eco-cards{
  display:flex; flex-wrap:nowrap;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:2px 0 6px;
}
.suja-eco-cards::-webkit-scrollbar{ display:none; }

.suja-eco-card{
  flex:0 0 calc((100% - 3 * 18px) / 4);
  scroll-snap-align:start;
  background:#ffffff;
  border:1px solid var(--eco-border);
  border-radius:14px;
  overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Arrow buttons — hero-swiper style, sit just outside the rail */
.suja-eco-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#ffffff; border:1px solid var(--eco-border);
  box-shadow:0 12px 26px -8px rgba(12,30,53,0.22);
  color:var(--eco-ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, opacity .2s ease;
}
.suja-eco-arrow:hover{ background:var(--eco-teal); border-color:var(--eco-teal); color:#ffffff; }
.suja-eco-arrow:active{ transform:translateY(-50%) scale(.94); }
.suja-eco-arrow--prev{ left:-18px; }
.suja-eco-arrow--next{ right:-18px; }
.suja-eco-arrow[disabled]{ opacity:.32; cursor:default; pointer-events:none; }
.suja-eco-arrow[hidden]{ display:none; }
.suja-eco-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 40px -18px rgba(12,30,53,0.20);
  border-color:#cbd5e1;
}

/* Card media — top image box. Taller now (5:4) so the card feels
   more visual, Razorpay-style. Acts as the positioning context for
   the hover-reveal overlay (.suja-eco-card-overlay) which holds
   the "Know more" CTA on top of the image instead of below it. */
.suja-eco-card-media{
  aspect-ratio: 5 / 4;
  position:relative;
  background:linear-gradient(135deg,
    var(--card-soft, #e6f6fa) 0%,
    var(--card-soft-2, #bfe5ed) 100%);
  display:grid; place-items:center;
  color:var(--card-accent, var(--eco-teal));
  overflow:hidden;
}
.suja-eco-card-media::before{
  content:''; position:absolute; top:-28%; left:-18%;
  width:80%; height:80%;
  background:radial-gradient(circle, rgba(255,255,255,0.55), transparent 62%);
  pointer-events:none;
}
.suja-eco-card-media::after{
  content:''; position:absolute; bottom:-32%; right:-22%;
  width:70%; height:70%;
  background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  pointer-events:none;
}
.suja-eco-card-media > i,
.suja-eco-card-media > svg{
  position:relative; z-index:1;
  font-size:52px; line-height:1; opacity:0.95;
  transition:transform .35s ease;
}
.suja-eco-card-media > img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
}
.suja-eco-card:hover .suja-eco-card-media > i,
.suja-eco-card:hover .suja-eco-card-media > svg{ transform:scale(1.06); }
.suja-eco-card-media > img{ transition:transform .55s ease; }
.suja-eco-card:hover .suja-eco-card-media > img{ transform:scale(1.07); }

/* Badge — sits on the media area, top-right */
.suja-eco-card-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:9.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,0.92);
  color:var(--card-accent, var(--eco-teal));
  box-shadow:0 4px 10px -4px rgba(12,30,53,0.18);
}
.suja-eco-card-badge--accent{
  background:var(--eco-accent); color:#ffffff;
}

/* Card body — tight to content; no reserved blank space for a CTA */
.suja-eco-card-body{
  padding:16px 16px 18px;
  display:flex; flex-direction:column; gap:6px;
}
.suja-eco-card-title{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:17px; font-weight:600;
  letter-spacing:-0.005em;
  color:var(--eco-ink); margin:0; line-height:1.35;
}
.suja-eco-card-desc{
  font-family:'DM Sans', sans-serif;
  font-size:14.5px; line-height:1.6; color:var(--eco-text);
  margin:0;
}

/* "Know more" reveal — sits inside .suja-eco-card-media as an
   overlay. Hidden until hover; on hover the image darkens at the
   bottom and the CTA fades + slides up like a pill on the image. */
.suja-eco-card-overlay{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:16px;
  background:linear-gradient(to top,
    rgba(12,30,53,0.62) 0%,
    rgba(12,30,53,0.18) 45%,
    transparent 75%);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.suja-eco-card:hover .suja-eco-card-overlay,
.suja-eco-card:focus-within .suja-eco-card-overlay{
  opacity:1; pointer-events:auto;
}

.suja-eco-card-more{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:9px;
  background:#ffffff; color:var(--eco-teal);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:13.5px; font-weight:600; text-decoration:none;
  box-shadow:0 8px 20px -6px rgba(0,0,0,0.32);
  transform:translateY(8px);
  transition:transform .35s ease, background-color .2s ease, color .2s ease;
}
.suja-eco-card-more span{ display:inline-block; transition:transform .2s ease; }
.suja-eco-card:hover .suja-eco-card-more,
.suja-eco-card:focus-within .suja-eco-card-more{ transform:translateY(0); }
.suja-eco-card-more:hover{ background:var(--eco-teal); color:#ffffff; }
.suja-eco-card-more:hover span{ transform:translateX(3px); }

/* Touch devices — no hover. Keep the CTA visible with a softer
   gradient so the image stays readable. */
@media (hover: none){
  .suja-eco-card-overlay{
    opacity:1; pointer-events:auto;
    background:linear-gradient(to top, rgba(12,30,53,0.55) 0%, transparent 55%);
  }
  .suja-eco-card-more{ transform:translateY(0); }
}

/* ============ SUB-TAB SWITCHING (CSS-only, a / b / c) ============ */
.suja-eco input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.suja-eco-sub-a:checked ~ .suja-eco-subtabs label[data-sub="a"],
.suja-eco-sub-b:checked ~ .suja-eco-subtabs label[data-sub="b"],
.suja-eco-sub-c:checked ~ .suja-eco-subtabs label[data-sub="c"]{
  color:var(--eco-teal); background:rgba(8,145,178,0.10);
  border-color:rgba(8,145,178,0.22);
}
.suja-eco-sub-a:checked ~ .suja-eco-cards-wrap[data-sub="a"],
.suja-eco-sub-b:checked ~ .suja-eco-cards-wrap[data-sub="b"],
.suja-eco-sub-c:checked ~ .suja-eco-cards-wrap[data-sub="c"]{
  display:block;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px){
  .suja-eco-tab-sublabel{ display:none; }
  .suja-eco-tab{ padding:13px 14px; gap:11px; }
  .suja-eco-tab-icon{ width:40px; height:40px; }
}
@media (max-width: 1100px){
  /* Tablet — 2 cards visible at once */
  .suja-eco-card{ flex:0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 991px){
  .suja-eco{ --eco-peek:8px; }
  .suja-eco-panel-head{ flex-direction:column; gap:14px; }
  .suja-eco-cta-wrap{ align-items:flex-start; flex-direction:row; gap:16px; }
  /* Pull the arrows inside the rail on narrower viewports */
  .suja-eco-arrow--prev{ left:6px; }
  .suja-eco-arrow--next{ right:6px; }
}
/* Mobile — no sticky stacking; clean vertical stack */
@media (max-width: 767px){
  .suja-eco{ padding:48px 0 0; }
  .suja-eco-panel{
    position:static;
    min-height:0;
    margin-bottom:18px;
    padding:24px 20px;
    box-shadow:0 18px 40px -22px rgba(12,30,53,0.20);
  }
  .suja-eco-stack{ padding-bottom:8px; }
  .suja-eco-products-tabs-row{
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .suja-eco-products-tabs-row::-webkit-scrollbar{ display:none; }
  .suja-eco-tab{ flex:0 0 auto; }
  .suja-eco-tab-sublabel{ display:block; }
}
@media (max-width: 620px){
  /* Mobile — 1 card visible at a time */
  .suja-eco-card{ flex:0 0 100%; }
  .suja-eco-tab-sublabel{ display:none; }
  .suja-eco-arrow{ width:38px; height:38px; }
}