/* =========================================================
   NOMUD Cleaning Solutions — Design System
   Premium B2B/B2C coffee-equipment cleaning brand
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Brand */
  --green:        #2f9e35;      /* NOMUD leaf green */
  --green-600:    #2a8c30;
  --green-700:    #1f6f26;
  --green-soft:   #eaf4e8;
  --green-tint:   #f3f8f1;

  --ink:          #15181a;      /* near-black charcoal */
  --charcoal:     #232826;
  --charcoal-2:   #2e3531;
  --steel:        #5b6560;      /* muted grey-green */
  --silver:       #c7cdc9;

  --water:        #239fd6;      /* "liquid" blue accent, used sparingly */

  --bg:           #ffffff;
  --bg-soft:      #f5f7f4;
  --bg-mist:      #eef2ee;
  --line:         #e4e8e3;
  --line-2:       #d6dbd5;

  --white:        #ffffff;
  --muted:        #5e6b64;      /* body grey */
  --muted-2:      #8a958f;

  /* Type */
  --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radius / shadow */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(20,30,24,.06);
  --shadow:    0 14px 40px rgba(20,40,28,.10);
  --shadow-lg: 0 30px 70px rgba(16,40,26,.16);

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --header-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:800; color:var(--ink); }
p{ margin:0; }
ul{ margin:0; }

/* ---------- Utilities ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section--soft{ background:var(--bg-soft); }
.section--mist{ background:var(--bg-mist); }
.section--dark{ background:var(--ink); color:#e9efe9; }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-700);
}
.section--dark .eyebrow{ color:#7fd17f; }
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }

.h-xl{ font-size:clamp(34px,5vw,58px); }
.h-lg{ font-size:clamp(28px,3.6vw,42px); }
.h-md{ font-size:clamp(22px,2.6vw,30px); }
.lead{ font-size:clamp(17px,1.4vw,20px); color:var(--muted); }
.section--dark .lead{ color:#b9c6bd; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:48ch; }

.section-head{ max-width:720px; margin:0 auto 56px; text-align:center; }
.section-head .eyebrow{ margin-bottom:18px; }
.section-head p{ margin-top:18px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:15.5px;
  padding:15px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:transform .15s var(--ease), background .2s, box-shadow .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--green); color:#fff; box-shadow:0 10px 24px rgba(47,158,53,.28); }
.btn--primary:hover{ background:var(--green-600); box-shadow:0 14px 30px rgba(47,158,53,.34); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--charcoal-2); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); background:#fff; }
.section--dark .btn--primary{ background:#fff; color:var(--ink); box-shadow:0 14px 34px rgba(0,0,0,.28); }
.section--dark .btn--primary:hover{ background:#eef2ee; box-shadow:0 18px 40px rgba(0,0,0,.34); }
.section--dark .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.section--dark .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.video-hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.56); background:rgba(13,16,15,.20); }
.video-hero .btn--ghost:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.10); }
.btn--lg{ padding:18px 32px; font-size:16.5px; }
.btn--block{ width:100%; }
.btn svg{ width:18px; height:18px; }

.pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--green-soft); color:var(--green-700);
  font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.04em;
  padding:7px 13px; border-radius:var(--r-pill);
}
.pill--neutral{ background:var(--bg-mist); color:var(--steel); }

/* ---------- Logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:0; line-height:1; }
.logo__word{ font-family:var(--font-display); font-weight:800; font-size:25px; letter-spacing:-.01em; color:var(--ink); }
.logo__word b{ color:var(--green); font-weight:800; }
.logo__sub{ display:block; font-size:7.5px; letter-spacing:.42em; font-weight:700; color:var(--steel); margin-top:3px; }
.section--dark .logo__word, .site-footer .logo__word{ color:#fff; }
.logo--stack{ flex-direction:column; align-items:flex-start; gap:0; }

/* =========================================================
   Header
   ========================================================= */
.topbar{
  background:var(--ink); color:#cdd6cf;
  font-size:13px; letter-spacing:.01em;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.topbar a{ color:#cdd6cf; }
.topbar a:hover{ color:#fff; }
.topbar__list{ display:flex; gap:22px; align-items:center; }
.topbar strong{ color:#fff; font-weight:700; }

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:24px; }
.nav{ display:flex; align-items:center; gap:32px; }
.nav a{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--charcoal); position:relative; padding:6px 0; }
.nav a:hover{ color:var(--green-700); }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--green); transition:width .25s var(--ease); }
.nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.lang{ display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-pill); overflow:hidden; font-family:var(--font-display); font-weight:700; font-size:13px; }
.lang a{ padding:7px 13px; color:var(--muted); }
.lang a.is-active{ background:var(--green); color:#fff; }
.icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--ink); }
.icon-btn:hover{ border-color:var(--ink); }
.icon-btn svg{ width:20px; height:20px; }
.cart-count{
  position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px;
  background:var(--green); color:#fff; border-radius:var(--r-pill);
  font-family:var(--font-display); font-size:11px; font-weight:800; line-height:20px; text-align:center;
}
.menu-toggle{ display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:#fff; }

/* =========================================================
   Hero
   ========================================================= */
.hero{ position:relative; overflow:hidden; background:
   radial-gradient(120% 90% at 85% 0%, #eef4ec 0%, rgba(238,244,236,0) 55%),
   linear-gradient(180deg,#fbfdfb 0%, #f4f7f3 100%); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:72px 0 64px; }
.hero__kicker{ margin-bottom:22px; }
.hero h1{ font-size:clamp(34px,4.7vw,60px); line-height:1.04; }
.hero h1 .accent{ color:var(--green); }
.hero__text{ margin-top:22px; font-size:clamp(16.5px,1.3vw,19px); color:var(--muted); max-width:54ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__metrics{ display:flex; gap:14px; margin-top:44px; flex-wrap:wrap; }
.metric{ flex:1 1 0; min-width:150px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-sm); }
.metric__num{ font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--green-700); letter-spacing:-.02em; }
.metric__label{ font-size:13.5px; color:var(--muted); margin-top:4px; line-height:1.35; }

.hero__visual{ position:relative; display:flex; justify-content:center; align-items:center; min-height:480px; }
.hero__disc{ position:absolute; width:430px; height:430px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #ffffff 0%, #eef4ec 55%, #e2ebe0 100%);
  box-shadow:var(--shadow-lg); }
.hero__disc::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(47,158,53,.18); }
.hero__bottle{ position:relative; height:520px; filter:drop-shadow(0 34px 40px rgba(20,40,24,.28)); animation:floaty 6s var(--ease) infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
.hero__tag{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 15px 9px 11px; box-shadow:var(--shadow); display:flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
}
.hero__tag .dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(47,158,53,.18); }
.hero__tag--1{ top:60px; left:6%; }
.hero__tag--2{ bottom:96px; right:2%; }
.hero__tag--3{ bottom:24px; left:18%; }

/* =========================================================
   Problem
   ========================================================= */
.problem__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.problem__list{ display:grid; gap:14px; margin-top:30px; }
.problem-item{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-sm); }
.problem-item .x{ flex:none; width:32px; height:32px; border-radius:9px; background:#fdecec; color:#d6453f; display:grid; place-items:center; font-weight:800; }
.problem-item h4{ font-size:16px; margin-bottom:2px; }
.problem-item p{ font-size:14.5px; color:var(--muted); }
.problem__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink); aspect-ratio:4/5; box-shadow:var(--shadow-lg); }
.problem__media .stat{ position:absolute; left:22px; bottom:22px; right:22px; background:rgba(20,24,22,.62); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:18px; color:#fff; }
.problem__media .stat b{ font-family:var(--font-display); font-size:30px; color:#7fd17f; }

/* =========================================================
   Products
   ========================================================= */
.product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.product-card{
  position:relative; display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }
.product-card__media{ background:linear-gradient(180deg,#f6f9f5,#eef3ec); border-radius:var(--r); height:300px; display:flex; align-items:center; justify-content:center; padding:22px; overflow:visible; }
.product-card__media img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 16px 18px rgba(20,40,24,.18)); }
.product-card__badge{ position:absolute; top:22px; right:22px; }
.product-card h3{ font-size:23px; }
.product-card .role{ font-family:var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-700); margin-bottom:8px; }
.product-card p{ font-size:14.8px; color:var(--muted); margin:10px 0 18px; }
.product-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.price{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--ink); }
.price small{ font-size:13px; font-weight:600; color:var(--muted-2); }

/* =========================================================
   Benefits
   ========================================================= */
.benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.benefit{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; transition:transform .25s var(--ease), box-shadow .25s; }
.benefit:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.benefit__icon{ width:54px; height:54px; border-radius:14px; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; margin-bottom:20px; }
.benefit__icon svg{ width:26px; height:26px; }
.benefit h3{ font-size:18px; margin-bottom:9px; }
.benefit p{ font-size:14.5px; color:var(--muted); }

/* =========================================================
   How it works
   ========================================================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
.step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 26px 28px; }
.step__icon,.step__num{ color:#fff; background:var(--green); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; margin-bottom:18px; }
.step__icon svg{ width:21px; height:21px; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.step h3{ font-size:17.5px; margin-bottom:8px; }
.step p{ font-size:14.5px; color:var(--muted); }
.step:not(:last-child)::after{ content:""; position:absolute; top:54px; right:-14px; width:18px; height:2px; background:var(--line-2); }
.howto-banner{ margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--green-tint); border:1px solid var(--green-soft); border-radius:var(--r-lg); padding:22px 28px; }
.howto-banner p{ font-size:15px; color:var(--charcoal); }
.howto-banner b{ color:var(--green-700); }

/* =========================================================
   Comparison
   ========================================================= */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.compare__col{ padding:34px 34px 38px; }
.compare__col--good{ background:var(--ink); color:#e9efe9; }
.compare__col--good h3{ color:#fff; }
.compare__col--bad{ background:#fff; }
.compare__head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.compare__head h3{ font-size:20px; }
.compare__tag{ font-family:var(--font-display); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill); }
.compare__col--good .compare__tag{ background:var(--green); color:#fff; }
.compare__col--bad .compare__tag{ background:var(--bg-mist); color:var(--steel); }
.compare__row{ display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid rgba(255,255,255,.10); font-size:15px; }
.compare__col--bad .compare__row{ border-top-color:var(--line); color:var(--muted); }
.compare__row:first-of-type{ border-top:0; }
.ck{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.ck--y{ background:rgba(127,209,127,.18); color:#7fd17f; }
.ck--n{ background:#f1eeec; color:#b9a39a; }
.ck svg{ width:13px; height:13px; }

/* =========================================================
   Trust / logo slider
   ========================================================= */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:18px; width:max-content; animation:scroll 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
.trust-chip{
  display:flex; align-items:center; gap:12px; flex:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:14px 26px; box-shadow:var(--shadow-sm);
  font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--charcoal); white-space:nowrap;
}
.trust-chip .mark{ width:30px; height:30px; border-radius:8px; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; }
.trust-chip .mark svg{ width:17px; height:17px; }

/* =========================================================
   Testimonials
   ========================================================= */
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.quote .mark{ font-family:var(--font-display); font-size:54px; line-height:.4; color:var(--green); height:30px; }
.quote p{ font-size:16.5px; color:var(--charcoal); margin:8px 0 22px; flex:1; }
.quote__by{ display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:18px; }
.quote__av{ width:42px; height:42px; border-radius:50%; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; }
.quote__by b{ display:block; font-family:var(--font-display); font-size:14.5px; }
.quote__by span{ font-size:13px; color:var(--muted-2); }

/* =========================================================
   B2B
   ========================================================= */
.b2b{ position:relative; overflow:hidden; }
.b2b__grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.b2b__list{ display:grid; gap:14px; margin-top:26px; }
.b2b__list li{ display:flex; gap:12px; align-items:flex-start; list-style:none; font-size:15.5px; color:#cdd6cf; }
.b2b__list .ck{ background:rgba(127,209,127,.16); color:#7fd17f; }
.b2b__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.b2b__card{ background:linear-gradient(180deg,#1d2421,#171c1a); border:1px solid rgba(255,255,255,.10); border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow-lg); }
.b2b__stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.b2b-stat{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r); padding:20px; }
.b2b-stat b{ font-family:var(--font-display); font-size:30px; color:#fff; display:block; }
.b2b-stat span{ font-size:13px; color:#9fb0a4; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ max-width:820px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; background:none; border:0; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.faq-q .ico{ flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:.25s var(--ease); }
.faq-q .ico::before{ content:"+"; font-size:20px; color:var(--green-700); font-weight:600; }
.faq-item.open .faq-q .ico{ background:var(--green); border-color:var(--green); transform:rotate(45deg); }
.faq-item.open .faq-q .ico::before{ color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p{ padding:0 4px 24px; color:var(--muted); font-size:16px; max-width:68ch; }

/* =========================================================
   Final CTA
   ========================================================= */
.final-cta{ background:
   radial-gradient(120% 120% at 0% 0%, rgba(47,158,53,.16) 0%, transparent 50%),
   var(--ink); border-radius:0; }
.final-cta .inner{ text-align:center; max-width:760px; margin-inline:auto; }
.final-cta h2{ color:#fff; font-size:clamp(28px,3.8vw,46px); }
.final-cta p{ margin:20px auto 0; color:#b9c6bd; font-size:19px; max-width:56ch; }
.final-cta .hero__cta{ justify-content:center; }
.final-cta .btn--primary{ background:#fff; color:var(--ink); box-shadow:0 14px 34px rgba(0,0,0,.28); }
.final-cta .btn--primary:hover{ background:#eef2ee; box-shadow:0 18px 40px rgba(0,0,0,.34); }
.final-cta .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.38); }
.final-cta .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:#0e1211; color:#a9b6ad; padding:72px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08); }
.site-footer h4{ color:#fff; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px; font-family:var(--font-display); }
.site-footer a{ color:#a9b6ad; font-size:15px; display:inline-block; }
.site-footer a:hover{ color:#fff; }
.footer-links{ display:grid; gap:11px; }
.footer-about p{ font-size:15px; margin:18px 0 22px; max-width:38ch; }
.foot-contact{ display:grid; gap:12px; font-size:15px; }
.foot-contact a,.foot-contact span{ display:flex; gap:10px; align-items:flex-start; }
.foot-contact svg{ width:18px; height:18px; color:var(--green); flex:none; margin-top:2px; }
.social{ display:flex; gap:12px; margin-top:6px; }
.social a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; }
.social a:hover{ background:var(--green); border-color:var(--green); }
.social svg{ width:19px; height:19px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:24px 0 30px; font-size:13.5px; color:#7f8d84; }

/* =========================================================
   Cart drawer
   ========================================================= */
.scrim{ position:fixed; inset:0; background:rgba(12,18,15,.5); opacity:0; visibility:hidden; transition:.3s; z-index:80; }
.scrim.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:#fff; z-index:90;
  transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.drawer.open{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.drawer__head h3{ font-size:19px; }
.drawer__close{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); background:#fff; display:grid; place-items:center; }
.drawer__body{ flex:1; overflow:auto; padding:16px 24px; }
.cart-line{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-line__img{ background:var(--bg-soft); border-radius:10px; height:64px; display:flex; align-items:center; justify-content:center; padding:6px; overflow:hidden; }
.cart-line__img img{ max-height:100%; max-width:100%; height:auto; width:auto; object-fit:contain; }
.cart-line b{ font-family:var(--font-display); font-size:14.5px; display:block; }
.cart-line .qty{ display:inline-flex; align-items:center; gap:10px; margin-top:6px; border:1px solid var(--line-2); border-radius:var(--r-pill); padding:3px 6px; }
.cart-line .qty button{ width:24px; height:24px; border:0; background:none; font-size:16px; color:var(--charcoal); border-radius:50%; }
.cart-line .qty button:hover{ background:var(--bg-soft); }
.cart-line__price{ font-family:var(--font-display); font-weight:800; }
.cart-empty{ text-align:center; color:var(--muted); padding:50px 10px; }
.drawer__foot{ padding:20px 24px; border-top:1px solid var(--line); }
.drawer__total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; font-family:var(--font-display); }
.drawer__total b{ font-size:22px; }
.drawer__note{ font-size:12.5px; color:var(--muted-2); text-align:center; margin-top:12px; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:13px 22px; border-radius:var(--r-pill); font-family:var(--font-display); font-weight:600; font-size:14.5px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transition:.3s var(--ease); z-index:100; display:flex; gap:10px; align-items:center; }
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.toast svg{ width:18px; height:18px; color:#7fd17f; }

/* =========================================================
   Product page
   ========================================================= */
.breadcrumb{ font-size:13.5px; color:var(--muted-2); padding:22px 0 0; }
.breadcrumb a:hover{ color:var(--green-700); }
.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:34px 0 80px; align-items:start; }
.pdp__gallery{ position:sticky; top:96px; }
.pdp__main{ background:linear-gradient(180deg,#f6f9f5,#eef3ec); border-radius:var(--r-lg); height:520px; display:flex; align-items:center; justify-content:center; padding:30px; border:1px solid var(--line); overflow:hidden; }
.pdp__main img{ max-height:100%; max-width:100%; height:auto; width:auto; object-fit:contain; filter:drop-shadow(0 24px 28px rgba(20,40,24,.2)); }
.pdp__thumbs{ display:flex; gap:12px; margin-top:14px; }
.pdp__thumb{ width:84px; height:84px; border-radius:12px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; padding:8px; cursor:pointer; overflow:hidden; }
.pdp__thumb.active{ border-color:var(--green); box-shadow:0 0 0 2px rgba(47,158,53,.18); }
.pdp__thumb img{ max-height:100%; max-width:100%; height:auto; width:auto; object-fit:contain; }
.pdp__info h1{ font-size:clamp(28px,3.2vw,38px); margin:10px 0 14px; }
.pdp__rating{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.stars{ color:#f0b429; letter-spacing:2px; }
.pdp__price{ display:flex; align-items:baseline; gap:10px; margin:22px 0; }
.pdp__price .now{ font-family:var(--font-display); font-weight:800; font-size:34px; }
.pdp__price .vat{ font-size:13px; color:var(--muted-2); }
.pdp__desc{ color:var(--muted); font-size:16px; margin-bottom:24px; max-width:52ch; }
.pdp__meta{ display:grid; gap:8px; margin:24px 0; font-size:14px; }
.pdp__meta div{ display:flex; gap:8px; }
.pdp__meta b{ color:var(--charcoal); font-family:var(--font-display); min-width:90px; }
.pdp__buy{ display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; margin:26px 0; }
.qty-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:var(--r-pill); padding:4px; }
.qty-stepper button{ width:42px; height:42px; border:0; background:none; font-size:20px; border-radius:50%; color:var(--charcoal); }
.qty-stepper button:hover{ background:var(--bg-soft); }
.qty-stepper input{ width:42px; text-align:center; border:0; font-family:var(--font-display); font-weight:800; font-size:17px; background:none; }
.pdp__assure{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.assure{ display:flex; gap:10px; align-items:center; font-size:13px; color:var(--muted); }
.assure svg{ width:22px; height:22px; color:var(--green); flex:none; }

.tabs{ border-top:1px solid var(--line); }
.tabbar{ display:flex; gap:8px; flex-wrap:wrap; padding:28px 0 0; }
.tabbar button{ border:0; background:none; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--muted-2); padding:12px 18px; border-radius:var(--r-pill); }
.tabbar button.active{ background:var(--ink); color:#fff; }
.tabpane{ display:none; padding:30px 0 10px; }
.tabpane.active{ display:block; }
.tabpane h3{ font-size:22px; margin:8px 0 14px; }
.tabpane p{ color:var(--muted); margin-bottom:14px; max-width:74ch; }
.usage-steps{ display:grid; gap:14px; counter-reset:u; max-width:680px; }
.usage-steps li{ list-style:none; display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; }
.usage-steps li::before{ counter-increment:u; content:counter(u); flex:none; width:30px; height:30px; border-radius:50%; background:var(--green-soft); color:var(--green-700); font-family:var(--font-display); font-weight:800; display:grid; place-items:center; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table td{ padding:14px 4px; border-bottom:1px solid var(--line); font-size:15px; }
.spec-table td:first-child{ font-family:var(--font-display); font-weight:700; color:var(--charcoal); width:34%; }
.spec-table td:last-child{ color:var(--muted); }

/* =========================================================
   Design-system page helpers
   ========================================================= */
.swatch{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.swatch .chip{ height:96px; }
.swatch .meta{ padding:12px 14px; font-size:13px; }
.swatch .meta b{ font-family:var(--font-display); display:block; }
.swatch .meta code{ color:var(--muted); font-size:12px; }
.ds-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
.ds-block{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; margin-bottom:22px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .benefit-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step:not(:last-child)::after{ display:none; }
  .quote-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:880px){
  .section{ padding:68px 0; }
  .nav,.topbar{ display:none; }
  .menu-toggle{ display:grid; place-items:center; }
  .hero__grid{ grid-template-columns:1fr; gap:10px; padding:48px 0; }
  .hero__visual{ min-height:380px; order:-1; }
  .hero__bottle{ height:380px; }
  .hero__disc{ width:320px; height:320px; }
  .problem__grid,.product-grid,.compare,.b2b__grid,.pdp{ grid-template-columns:1fr; }
  .problem__grid{ gap:32px; }
  .b2b__grid{ gap:34px; }
  .compare{ gap:0; }
  .pdp__gallery{ position:static; }
  .pdp__main{ height:420px; }
  .product-card{ grid-template-columns:140px 1fr; padding:22px; }
  .product-card__media{ height:260px; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .benefit-grid,.steps,.footer-grid,.pdp__assure,.b2b__stats{ grid-template-columns:1fr; }
  .product-card{ grid-template-columns:1fr; text-align:left; }
  .product-card__media{ height:300px; }
  .hero__metrics{ gap:10px; }
  .metric{ min-width:calc(50% - 5px); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  .header-actions .lang{ display:none; }
}

/* =========================================================
   Video — hero banner, bands, frames
   ========================================================= */
.video-hero{ position:relative; min-height:84vh; display:flex; align-items:flex-end; overflow:hidden; background:#0d100f; }
.video-hero__bg, .video-hero__bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,16,15,.30) 0%, rgba(13,16,15,.10) 40%, rgba(13,16,15,.86) 100%),
             radial-gradient(120% 80% at 80% 10%, rgba(47,158,53,.18), transparent 55%); }
.video-hero__inner{ position:relative; z-index:2; padding:0 0 64px; color:#fff; max-width:760px; }
.video-hero__inner .eyebrow{ color:#7fd17f; }
.video-hero h1{ color:#fff; font-size:clamp(34px,5vw,62px); margin:18px 0 18px; }
.video-hero p{ color:#d7e0d8; font-size:clamp(17px,1.4vw,20px); max-width:54ch; }
.video-hero .hero__cta{ margin-top:30px; }
.play-badge{ position:absolute; z-index:2; right:var(--gutter); bottom:64px; display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2); padding:9px 15px; border-radius:var(--r-pill); backdrop-filter:blur(6px); }
.play-badge .dot{ width:8px; height:8px; border-radius:50%; background:#7fd17f; box-shadow:0 0 0 0 rgba(127,209,127,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(127,209,127,.6)} 100%{box-shadow:0 0 0 10px rgba(127,209,127,0)} }

.video-band{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.video-frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:#0d100f; aspect-ratio:4/5; }
.video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-frame--wide{ aspect-ratio:16/10; }
.video-frame__cap{ position:absolute; left:18px; bottom:18px; right:18px; z-index:2; color:#fff; display:flex; align-items:center; gap:10px;
  background:rgba(13,16,15,.5); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-pill); padding:9px 15px; font-family:var(--font-display); font-weight:700; font-size:13px; }
.video-frame__cap .dot{ width:8px;height:8px;border-radius:50%;background:#7fd17f; }
.video-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.video-trio .video-frame{ aspect-ratio:3/4; }

.lead-status{ margin:24px 0 0; border-radius:var(--r); padding:14px 18px; font-family:var(--font-display); font-weight:700; font-size:14px; }
.lead-status--success{ background:var(--green-tint); border:1px solid var(--green-soft); color:var(--green-700); }
.lead-status--error{ background:#fff1ed; border:1px solid #ffd5c8; color:#a33c24; }
.lead-modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .2s var(--ease), visibility .2s; }
.lead-modal.is-open{ opacity:1; visibility:visible; }
.lead-modal__backdrop{ position:absolute; inset:0; background:rgba(8,12,10,.66); backdrop-filter:blur(6px); }
.lead-modal__panel{ position:relative; width:min(680px,100%); max-height:min(86vh,760px); overflow:auto; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-lg); }
.lead-modal__panel h2{ margin:12px 0 10px; }
.lead-modal__close{ position:absolute; top:18px; right:18px; }
.lead-form{ margin-top:22px; display:grid; gap:16px; }
.lead-form .drawer__note{ margin:0; }
.lead-form__trap{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }

/* =========================================================
   Page hero (interior pages)
   ========================================================= */
.page-hero{ background:linear-gradient(180deg,#fbfdfb,#f4f7f3); border-bottom:1px solid var(--line); padding:54px 0 48px; }
.page-hero .breadcrumb{ padding:0 0 14px; }
.page-hero h1{ font-size:clamp(32px,4.4vw,52px); }
.page-hero p{ margin-top:16px; }
.page-hero--dark{ background:var(--ink); border-bottom:0; }
.page-hero--dark h1{ color:#fff; }
.page-hero--dark p{ color:#b9c6bd; }

/* =========================================================
   Shop page
   ========================================================= */
.shop-layout{ display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start; }
.shop-aside{ position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; }
.shop-aside h4{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin:0 0 14px; font-family:var(--font-display); }
.filter-list{ display:grid; gap:10px; margin-bottom:24px; }
.filter-list label{ display:flex; gap:10px; align-items:center; font-size:14.5px; color:var(--charcoal); cursor:pointer; }
.filter-list input{ accent-color:var(--green); width:16px; height:16px; }
.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.shop-toolbar .count{ color:var(--muted); font-size:14.5px; }
.select{ border:1px solid var(--line-2); border-radius:var(--r-pill); padding:9px 16px; font-family:var(--font-display); font-weight:600; font-size:14px; background:#fff; color:var(--ink); }
.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }
.pcard__media{ position:relative; background:linear-gradient(180deg,#f6f9f5,#eef3ec); height:260px; display:flex; align-items:center; justify-content:center; padding:22px; overflow:hidden; }
.pcard__media img{ max-height:100%; max-width:100%; height:auto; width:auto; object-fit:contain; filter:drop-shadow(0 16px 18px rgba(20,40,24,.16)); transition:transform .3s var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.05); }
.pcard__badge{ position:absolute; top:16px; left:16px; }
.pcard__body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.pcard .role{ font-family:var(--font-display); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-700); }
.pcard h3{ font-size:18px; margin:7px 0 8px; }
.pcard p{ font-size:13.8px; color:var(--muted); flex:1; margin-bottom:16px; }
.pcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pcard .price{ font-size:19px; }

.shop-hero{ background:linear-gradient(180deg,#fbfdfb 0%, #eef3ee 100%); border-bottom:1px solid var(--line); overflow:hidden; }
.shop-hero__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:44px; align-items:center; min-height:520px; padding:54px 0 28px; }
.shop-hero .breadcrumb{ margin-bottom:16px; }
.shop-hero h1{ font-size:clamp(34px,4.8vw,58px); }
.shop-hero p{ margin-top:18px; }
.shop-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.shop-hero__media{ position:relative; min-height:420px; display:flex; align-items:flex-end; justify-content:center; }
.shop-hero__media::before{ content:""; position:absolute; width:min(430px,86%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 38%, #fff 0%, #edf5ea 58%, #dfeade 100%); border:1px solid rgba(47,158,53,.14); box-shadow:var(--shadow-lg); }
.shop-hero__bottle{ position:relative; z-index:1; width:auto; object-fit:contain; filter:drop-shadow(0 28px 32px rgba(20,40,24,.24)); }
.shop-hero__bottle--main{ height:410px; transform:translateX(28px); }
.shop-hero__bottle--side{ height:330px; transform:translateX(-22px); opacity:.96; }
.shop-hero__badge{ position:absolute; z-index:2; left:8%; bottom:42px; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow); padding:10px 16px; color:var(--green-700); font-family:var(--font-display); font-weight:800; font-size:13px; }
.shop-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 0 38px; }
.shop-kpis div{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-sm); }
.shop-kpis b{ display:block; font-family:var(--font-display); font-size:23px; color:var(--green-700); line-height:1; }
.shop-kpis span{ display:block; margin-top:7px; color:var(--muted); font-size:13.5px; line-height:1.35; }
.nomud-shop{ background:linear-gradient(180deg,#fff 0%, #f6f8f5 100%); }
.shop-layout--nomud{ grid-template-columns:270px 1fr; gap:34px; }
.shop-aside--nomud{ border-radius:var(--r); padding:22px; box-shadow:var(--shadow-sm); }
.shop-aside__block{ padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.shop-checks{ display:grid; gap:10px; }
.shop-checks span{ position:relative; padding-left:24px; color:var(--charcoal); font-size:14.5px; }
.shop-checks span::before{ content:""; position:absolute; left:0; top:.48em; width:12px; height:12px; border-radius:50%; background:var(--green-soft); box-shadow:inset 0 0 0 4px #fff; border:1px solid var(--green); }
.shop-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.shop-tags span{ border:1px solid var(--line-2); border-radius:var(--r-pill); padding:7px 10px; color:var(--steel); font-family:var(--font-display); font-weight:700; font-size:12px; }
.shop-aside__note{ background:var(--ink); color:#dce5dd; border-radius:var(--r); padding:18px; }
.shop-aside__note b{ display:block; color:#fff; font-family:var(--font-display); font-size:17px; line-height:1.2; }
.shop-aside__note p{ color:#aebbb2; font-size:13.5px; margin:9px 0 16px; }
.shop-aside__note .btn{ color:#fff; border-color:rgba(255,255,255,.28); }
.shop-toolbar--nomud{ align-items:flex-end; }
.shop-toolbar--nomud h2{ margin-top:5px; }
.shop-toolbar__chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.shop-toolbar__chips span{ background:var(--green-tint); color:var(--green-700); border:1px solid var(--green-soft); border-radius:var(--r-pill); padding:8px 12px; font-family:var(--font-display); font-weight:800; font-size:12px; }
.shop-grid--nomud{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.shop-product-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; min-height:100%; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.shop-product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }
.shop-product-card__media{ position:relative; display:flex; align-items:center; justify-content:center; min-height:360px; padding:34px; background:linear-gradient(180deg,#f9fbf8,#edf4ea); overflow:visible; }
.shop-product-card__media::after{ content:""; position:absolute; left:26px; right:26px; bottom:22px; height:18px; border-radius:50%; background:rgba(24,40,28,.12); filter:blur(10px); }
.shop-product-card__media img{ position:relative; z-index:1; width:100%; height:300px; max-width:92%; object-fit:contain; filter:drop-shadow(0 22px 24px rgba(20,40,24,.18)); transition:transform .28s var(--ease); }
.shop-product-card:hover .shop-product-card__media img{ transform:scale(1.02) rotate(-1deg); }
.shop-product-card__media .pill{ position:absolute; z-index:2; top:18px; left:18px; }
.shop-product-card__body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.shop-product-card h3{ font-size:22px; margin:8px 0 10px; }
.shop-product-card p{ color:var(--muted); font-size:14.5px; margin-bottom:18px; flex:1; }
.shop-product-card__features{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.shop-product-card__features span{ background:var(--bg-mist); color:var(--steel); border-radius:var(--r-pill); padding:7px 10px; font-family:var(--font-display); font-weight:700; font-size:12px; }
.shop-product-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:18px; border-top:1px solid var(--line); }
.shop-product-card .price{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); }
.shop-product-card .btn{ flex:none; }
.shop-b2b-card{ grid-column:1/-1; display:grid; grid-template-columns:.78fr 1fr; background:var(--ink); border-radius:var(--r); overflow:hidden; min-height:290px; box-shadow:var(--shadow-lg); }
.shop-b2b-card__media{ position:relative; min-height:290px; overflow:hidden; background:#0d100f; }
.shop-b2b-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,16,15,.18), rgba(13,16,15,.72)); }
.shop-b2b-card__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-b2b-card__body{ padding:34px; display:flex; flex-direction:column; justify-content:center; }
.shop-b2b-card .role{ color:#7fd17f; }
.shop-b2b-card h3{ color:#fff; font-size:clamp(24px,3vw,34px); margin:10px 0 12px; }
.shop-b2b-card p{ color:#b8c5bd; max-width:58ch; margin-bottom:24px; }
.shop-b2b-card .btn{ align-self:flex-start; }

/* =========================================================
   Cart page
   ========================================================= */
.cart-grid{ display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:start; }
.cart-box{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:10px 26px; }
.cart-box .cart-line{ grid-template-columns:72px 1fr auto; }
.cart-line__rm{ border:0; background:none; color:var(--muted-2); font-size:12.5px; text-decoration:underline; padding:0; margin-left:6px; }
.cart-line__rm:hover{ color:#d6453f; }
.summary{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; position:sticky; top:96px; }
.summary h3{ font-size:19px; margin-bottom:18px; }
.summary__row{ display:flex; justify-content:space-between; padding:10px 0; font-size:15px; color:var(--muted); }
.summary__row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; color:var(--ink); font-family:var(--font-display); font-weight:800; font-size:20px; }
.summary .btn{ margin-top:18px; }
.trust-row{ display:flex; gap:14px; justify-content:center; margin-top:18px; color:var(--muted-2); font-size:12px; }
.trust-row span{ display:flex; gap:6px; align-items:center; }
.trust-row svg{ width:15px; height:15px; color:var(--green); }

/* =========================================================
   Checkout
   ========================================================= */
.checkout-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:44px; align-items:start; }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; margin-bottom:22px; }
.form-card h3{ font-size:18px; margin-bottom:6px; }
.form-card > p.muted{ margin-bottom:18px; font-size:14px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--charcoal); }
.field input, .field select, .field textarea{ border:1.5px solid var(--line-2); border-radius:var(--r-sm); padding:13px 15px; font-family:inherit; font-size:15px; color:var(--ink); background:#fff; transition:border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green); }
.field textarea{ resize:vertical; min-height:110px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.co-summary{ position:sticky; top:96px; }
.co-line{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--charcoal); }
.co-line:last-child{ border-bottom:0; }
.pay-note{ display:flex; gap:10px; align-items:flex-start; background:var(--green-tint); border:1px solid var(--green-soft); border-radius:var(--r); padding:14px 16px; font-size:13px; color:var(--charcoal); margin-top:6px; }
.pay-note svg{ width:18px; height:18px; color:var(--green-700); flex:none; margin-top:1px; }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.contact-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; }
.contact-list{ display:grid; gap:18px; margin-top:6px; }
.contact-list a, .contact-list span{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; color:var(--charcoal); }
.contact-list .ic{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; }
.contact-list .ic svg{ width:21px; height:21px; }
.contact-list b{ display:block; font-family:var(--font-display); font-size:13px; color:var(--muted-2); font-weight:700; margin-bottom:2px; }
.map-embed{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); height:280px; margin-top:24px; filter:grayscale(.2); }
.map-embed iframe{ width:100%; height:100%; border:0; }

/* IG strip */
.ig-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.ig-tile{ position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden; background:#0d100f; }
.ig-tile video, .ig-tile img{ width:100%; height:100%; object-fit:cover; }
.ig-tile .ig-ico{ position:absolute; top:8px; right:8px; color:#fff; opacity:.85; }
.ig-tile .ig-ico svg{ width:16px; height:16px; }
.ig-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.3)); opacity:0; transition:.25s; }
.ig-tile:hover::after{ opacity:1; }

/* About */
.about-lead{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; }
.value .num{ font-family:var(--font-display); font-weight:800; color:var(--green); font-size:14px; letter-spacing:.1em; }
.value h3{ font-size:18px; margin:10px 0 8px; }
.value p{ font-size:14.5px; color:var(--muted); }
.timeline{ max-width:760px; margin-inline:auto; display:grid; gap:0; }
.tl-item{ display:grid; grid-template-columns:120px 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--line); }
.tl-item .yr{ font-family:var(--font-display); font-weight:800; color:var(--green-700); font-size:17px; }
.tl-item h4{ font-size:17px; margin-bottom:5px; }
.tl-item p{ font-size:14.5px; color:var(--muted); }

@media (max-width:1024px){
  .shop-grid{ grid-template-columns:repeat(2,1fr); }
  .shop-hero__grid{ grid-template-columns:1fr; min-height:0; }
  .shop-hero__media{ min-height:360px; }
  .shop-hero__bottle--main{ height:350px; }
  .shop-hero__bottle--side{ height:280px; }
  .video-trio{ grid-template-columns:1fr; }
}
@media (max-width:880px){
  .video-band,.contact-grid,.checkout-grid,.cart-grid,.about-lead{ grid-template-columns:1fr; gap:30px; }
  .shop-layout{ grid-template-columns:1fr; }
  .shop-aside{ position:static; }
  .co-summary,.summary,.shop-aside{ position:static; }
  .ig-strip{ grid-template-columns:repeat(3,1fr); }
  .video-hero{ min-height:74vh; }
  .shop-kpis{ grid-template-columns:1fr; }
  .shop-b2b-card{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .shop-grid{ grid-template-columns:1fr; }
  .shop-grid--nomud{ grid-template-columns:1fr; }
  .shop-hero__grid{ padding-top:42px; }
  .shop-hero__media{ min-height:300px; }
  .shop-hero__bottle--main{ height:292px; transform:translateX(18px); }
  .shop-hero__bottle--side{ height:230px; transform:translateX(-20px); }
  .shop-product-card__media{ min-height:320px; padding:28px; }
  .shop-product-card__media img{ height:270px; max-width:88%; }
  .shop-product-card__foot{ align-items:flex-start; flex-direction:column; }
  .shop-product-card .btn{ width:100%; }
  .grid-2{ grid-template-columns:1fr; }
  .ig-strip{ grid-template-columns:repeat(2,1fr); }
  .tl-item{ grid-template-columns:64px 1fr; gap:14px; }
  .value-grid{ grid-template-columns:1fr; }
}

/* nav drawer (mobile) */
.mobile-nav{ position:fixed; inset:0 0 0 auto; width:min(320px,86vw); background:#fff; z-index:95; transform:translateX(100%); transition:transform .3s var(--ease); padding:24px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-lg); }
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{ font-family:var(--font-display); font-weight:700; font-size:19px; padding:14px 8px; border-bottom:1px solid var(--line); }
.mobile-nav .lang{ margin-top:14px; align-self:flex-start; }

/* =========================================================
   WordPress + WooCommerce integration (NOMUD)
   ========================================================= */
.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ .admin-bar .site-header{ top:46px; } }

/* wp_nav_menu inside .nav */
.nav ul{ display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0; }
.nav li{ position:relative; }
.nav .menu-item a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--green); transition:width .25s var(--ease); }
.nav .menu-item a:hover::after{ width:100%; }

/* Polylang language switcher → pill like the static .lang */
.language-switcher ul{ display:inline-flex; list-style:none; margin:0; padding:0; border:1px solid var(--line-2); border-radius:var(--r-pill); overflow:hidden; }
.language-switcher li a, .language-switcher li span{ display:block; padding:7px 13px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--muted); }
.language-switcher li.current-lang a, .language-switcher li .current{ background:var(--green); color:#fff; }

/* Generic WooCommerce shop grid — override WooCommerce's float/percent widths */
.woocommerce ul.products,
.woocommerce-page ul.products{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none !important; display:none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{ width:auto !important; float:none !important; clear:none !important; margin:0 !important;
  list-style:none; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; padding:24px; text-align:left;
  display:flex; flex-direction:column; transition:transform .25s var(--ease), box-shadow .25s; }
.woocommerce ul.products li.product:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.woocommerce ul.products li.product a img{ width:100%; height:280px; object-fit:contain; object-position:center; border-radius:var(--r); background:linear-gradient(180deg,#f6f9f5,#eef3ec); margin:0 0 16px; padding:22px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1.2; padding:0; margin:0 0 8px; color:var(--ink); }
.woocommerce ul.products li.product .price{ display:block; color:var(--ink); font-family:var(--font-display); font-weight:800; font-size:18px; margin:0 0 14px; }
.woocommerce ul.products li.product .price del{ color:var(--muted-2); font-weight:600; }
.woocommerce ul.products li.product .star-rating{ margin:0 0 8px; }
.woocommerce ul.products li.product .button{ margin-top:auto; align-self:flex-start; }

/* WooCommerce buttons → brand pill */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt{
  background:var(--green); color:#fff; border-radius:var(--r-pill); font-family:var(--font-display);
  font-weight:700; padding:13px 24px; border:0; transition:background .2s, box-shadow .2s; box-shadow:0 10px 24px rgba(47,158,53,.22);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{ background:var(--green-600); }
.woocommerce .button.added::after{ color:#fff; }

/* Single product */
.woocommerce div.product .product_title{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3vw,38px); }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--ink); font-family:var(--font-display); font-weight:800; font-size:30px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color:var(--green); }
.woocommerce span.onsale{ background:var(--green); border-radius:var(--r-pill); }
.woocommerce .star-rating span::before{ color:#f0b429; }
.woocommerce-message, .woocommerce-info{ border-top-color:var(--green); }
.woocommerce-message::before, .woocommerce-info::before{ color:var(--green); }

/* Cart / checkout tables */
.woocommerce table.shop_table{ border-radius:var(--r-lg); border-color:var(--line); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce form.checkout #order_review{ border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; }
.woocommerce .quantity input.qty{ border:1.5px solid var(--line-2); border-radius:var(--r-pill); }

/* Constrain Woo pages to the container width */
.woocommerce-page main#main > .woocommerce,
.woocommerce main#main{ max-width:var(--container); margin-inline:auto; padding:48px var(--gutter); }

@media (max-width:1024px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .woocommerce ul.products{ grid-template-columns:1fr; } }

/* Footer credit (GROW Agency) */
.footer-credit{ flex-basis:100%; text-align:center; color:#7f8d84; font-size:13px; padding-top:6px; }
.footer-credit a{ color:#a9b6ad; text-decoration:underline; }
.footer-credit a:hover{ color:#fff; }