/* ============================================================================
   تفاحة للأسمدة — Stylesheet
   ----------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Tokens & Reset
   02. Typography & Helpers
   03. Buttons
   04. Section shells, dividers & reveal animations
   05. Preloader
   06. Scroll progress bar
   07. Navbar + mobile menu
   08. Hero
   09. About / Mission & Vision
   10. Stats counters
   11. Products (toolbar, grid, cards)
   12. Product modal
   13. Order drawer + FAB + toasts
   14. Why choose us
   15. Delivery & export (Jordan map)
   16. How to order (timeline)
   17. FAQ accordion
   18. Contact + map frame + CTA band
   19. Footer
   20. Floating WhatsApp + back-to-top
   21. Scrollbar, focus, print & reduced motion
   ========================================================================== */

/* ══════════════════════ 01. TOKENS & RESET ══════════════════════ */
:root{
  /* Brand — derived from the logo */
  --apple-red:        #E3141B;
  --apple-red-dark:   #A80E14;
  --leaf-green:       #3A9A24;
  --leaf-green-dark:  #1E6B14;
  --leaf-green-light: #8BC34A;
  --soil-brown:       #6B3A1F;
  --cream:            #FAF8F3;
  --ink:              #1B2A17;
  --gold:             #C9A54C;

  /* Derived surfaces */
  --cream-2:   #F2EFE6;
  --white:     #FFFFFF;
  --ink-60:    rgba(27, 42, 23, .66);
  --ink-45:    rgba(27, 42, 23, .48);
  --line:      rgba(27, 42, 23, .10);
  --line-gold: rgba(201, 165, 76, .45);

  /* Elevation */
  --sh-sm: 0 2px 8px rgba(27, 42, 23, .06);
  --sh-md: 0 10px 30px rgba(27, 42, 23, .09);
  --sh-lg: 0 24px 60px rgba(27, 42, 23, .14);
  --sh-green: 0 18px 44px rgba(30, 107, 20, .22);
  --sh-red: 0 14px 34px rgba(227, 20, 27, .28);

  /* Type */
  --f-head: "El Messiri", "Almarai", "Tajawal", system-ui, sans-serif;
  --f-body: "Tajawal", "Cairo", system-ui, -apple-system, sans-serif;

  /* Fluid type scale — deliberately restrained; headings read as confident
     rather than shouty, and body copy stays the dominant voice on the page */
  --fs-h1:   clamp(2rem, 1.42rem + 2.7vw, 3.5rem);
  --fs-h2:   clamp(1.35rem, 1.08rem + 1.3vw, 2.1rem);
  --fs-h3:   clamp(1rem, .95rem + .28vw, 1.16rem);
  --fs-body: clamp(.95rem, .92rem + .16vw, 1.04rem);
  --fs-sm:   clamp(.82rem, .8rem + .1vw, .9rem);

  /* Spacing */
  --sp-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gap:        clamp(1rem, .6rem + 1.4vw, 1.75rem);
  --radius:     20px;
  --radius-lg:  28px;
  --radius-sm:  12px;

  /* Layout */
  --wrap: 1240px;
  --nav-h: 76px;

  /* Easing */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body{
  margin: 0;
  /* prevents any accidental sideways scroll on every breakpoint */
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.85;           /* generous Arabic line-height */
  letter-spacing: 0;            /* never letter-space Arabic */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-locked{ overflow: hidden; }

img, svg, iframe, canvas{ display: block; max-width: 100%; }
img{ height: auto; }

/* `hidden` must win over the component display rules below (modal, drawer,
   product cards, empty states all use the attribute as their on/off switch) */
[hidden]{ display: none !important; }

a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ background: none; border: 0; cursor: pointer; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4{ margin: 0; font-family: var(--f-head); line-height: 1.4; font-weight: 700; }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

.container{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, .6rem + 2vw, 2.5rem);
}

/* ══════════════════════ 02. TYPOGRAPHY & HELPERS ══════════════════════ */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link{
  position: fixed;
  inset-block-start: .5rem;
  inset-inline-start: -999px;
  z-index: 2000;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  background: var(--leaf-green-dark);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus-visible{ inset-inline-start: .75rem; }

/* Section heading block */
.s-head{
  max-width: 62ch;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
  text-align: center;
}
.s-head--start{ margin-inline: 0; text-align: start; }

.s-kicker{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-block-end: .9rem;
  padding: .35rem 1rem;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: rgba(201, 165, 76, .08);
  color: var(--leaf-green-dark);
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.s-kicker::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--apple-red);
}

.s-title{
  font-size: var(--fs-h2);
  color: var(--leaf-green-dark);
  text-wrap: balance;
}
/* The underline is painted as a background on the text itself rather than an
   absolutely-positioned pseudo-element: an inline box's containing block is
   unreliable, and this version also follows the text across a line break. */
.s-title em{
  font-style: normal;
  color: var(--apple-red);
  padding-block-end: .1em;
  background-image: linear-gradient(90deg, var(--apple-red), var(--gold));
  background-size: 100% .13em;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

.s-sub{
  margin-block-start: .85rem;
  color: var(--ink-60);
  font-size: var(--fs-body);
}

/* light variant for dark sections */
.s-head--light .s-title{ color: #fff; }
.s-head--light .s-title em{
  color: var(--leaf-green-light);
  background-image: linear-gradient(90deg, var(--leaf-green-light), var(--gold));
}
.s-head--light .s-kicker{
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .10);
  color: #fff;
}
.s-head--light .s-sub{ color: rgba(255, 255, 255, .80); }

/* ══════════════════════ 03. BUTTONS ══════════════════════ */
.btn{
  --btn-bg: var(--leaf-green);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.btn svg{ width: 1.15em; height: 1.15em; flex: none; }

/* soft sheen that sweeps on hover */
.btn::after{
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .6s var(--ease-out);
  z-index: -1;
}
.btn:hover::after{ inset-inline-start: 115%; }

.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px) scale(.99); }

.btn--lg{ padding: 1rem 2rem; font-size: calc(var(--fs-sm) + .07rem); }
.btn--block{ width: 100%; }
.btn--pill{ padding-inline: 1.5rem; }

.btn--red{
  --btn-bg: var(--apple-red);
  background-image: linear-gradient(135deg, var(--apple-red), var(--apple-red-dark));
  box-shadow: var(--sh-red);
}
.btn--red:hover{ box-shadow: 0 20px 44px rgba(227, 20, 27, .36); }

.btn--green{
  background-image: linear-gradient(135deg, var(--leaf-green), var(--leaf-green-dark));
  box-shadow: var(--sh-green);
}
.btn--green:hover{ box-shadow: 0 22px 48px rgba(30, 107, 20, .3); }

.btn--ghost{
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  backdrop-filter: blur(6px);
  box-shadow: none;
}
.btn--ghost:hover{ background: #fff; border-color: #fff; color: var(--leaf-green-dark); }

.btn--outline{
  background: transparent;
  border-color: var(--leaf-green);
  color: var(--leaf-green-dark);
  box-shadow: none;
}
.btn--outline:hover{ background: var(--leaf-green); color: #fff; }

.btn--text{
  padding: .5rem .9rem;
  background: none;
  color: var(--ink-60);
  font-weight: 600;
  box-shadow: none;
}
.btn--text:hover{ color: var(--apple-red); transform: none; }
.btn--text::after{ display: none; }

/* ══════ 04. SECTION SHELLS, DIVIDERS & REVEALS ══════ */
.section{
  position: relative;
  padding-block: var(--sp-section);
}

.divider{
  position: absolute;
  inset-inline: -1px;              /* hides sub-pixel seams */
  width: calc(100% + 2px);
  height: clamp(54px, 7vw, 120px);
  pointer-events: none;
}
.divider--down{ inset-block-end: -1px; }
.divider--up{ inset-block-start: -1px; }

/* ---------------------------------------------------------------------------
   Scroll reveal — IntersectionObserver toggles .is-in
   Variants are picked per section so the page reads as a sequence of different
   entrances rather than one effect repeated fourteen times.
   --------------------------------------------------------------------------- */
[data-reveal]{
  opacity: 0;
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out),
              filter .8s var(--ease-out), clip-path .9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="up"]        { transform: translateY(32px); }
[data-reveal="down"]      { transform: translateY(-26px); }
[data-reveal="side-start"]{ transform: translateX(-34px); }  /* RTL: from the right */
[data-reveal="side-end"]  { transform: translateX(34px); }
[data-reveal="scale"]     { transform: scale(.94); }
[data-reveal="rise"]      { transform: translateY(56px) scale(.965); }
[data-reveal="flip"]      { transform: perspective(900px) rotateX(-16deg) translateY(30px); transform-origin: 50% 100%; }
[data-reveal="clip"]      { transform: translateY(22px); clip-path: inset(0 0 100% 0 round var(--radius-lg)); }
[data-reveal="blur"]      { transform: translateY(22px); filter: blur(9px); }

/* heading whose words animate individually — the element itself stays put */
[data-reveal="words"]{ opacity: 1; transform: none; }

[data-reveal].is-in{
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;      /* release the compositor layer once it has landed */
}
/* scoped to the clip variant only — a clip-path on every revealed element
   would crop its own box-shadow */
[data-reveal="clip"].is-in{ clip-path: inset(0 0 0 0 round var(--radius-lg)); }

/* RTL direction fix for horizontal reveals */
[dir="rtl"] [data-reveal="side-start"]:not(.is-in){ transform: translateX(34px); }
[dir="rtl"] [data-reveal="side-end"]:not(.is-in){ transform: translateX(-34px); }

/* --- word-by-word heading reveal --------------------------------------------
   JS wraps each whitespace-separated word of a heading in .rv-w. Splitting on
   spaces is safe for Arabic: letters only join inside a word, never across
   one, so shaping and ligatures are untouched.                                */
.rv-w{
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em) rotate(1.5deg);
  transition: opacity .55s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--w, 0) * 55ms);
}
.is-in .rv-w{ opacity: 1; transform: none; }

/* --- gentle depth parallax on decorative visuals --------------------------- */
[data-float]{
  transform: translate3d(0, var(--fy, 0px), 0);
  will-change: transform;
}

/* Generic card */
.card{
  position: relative;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: box-shadow .45s var(--ease-out), border-color .45s var(--ease);
}

/* ══════════════════════ 05. PRELOADER ══════════════════════ */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;
  background: var(--cream);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.is-done{ opacity: 0; visibility: hidden; }

.preloader__mark{ width: clamp(110px, 26vw, 164px); }
.preloader__word{
  margin: 0;
  color: var(--leaf-green-dark);
  font-family: var(--f-head);
  font-size: clamp(1.1rem, .95rem + 1vw, 1.5rem);
  font-weight: 700;
  opacity: 0;
  animation: pl-word .7s .55s var(--ease-out) forwards;
}
.preloader__bar{
  display: block;
  width: 150px; height: 3px;
  border-radius: 999px;
  background: rgba(27, 42, 23, .10);
  overflow: hidden;
}
.preloader__bar i{
  display: block;
  width: 40%; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--leaf-green), var(--apple-red));
  animation: pl-bar 1.25s var(--ease) infinite;
}
@keyframes pl-word{ to{ opacity: 1; transform: none; } }
@keyframes pl-bar{
  0%  { transform: translateX(260%); }
  100%{ transform: translateX(-100%); }
}

/* --- Shared inline logo mark (preloader, fallbacks) --- */
.logo-mark{ width: 100%; height: auto; overflow: visible; }
.logo-mark .lm-ring{ fill: none; stroke: var(--leaf-green); stroke-width: 5.5; }
.logo-mark .lm-soil{ fill: none; stroke: var(--soil-brown); stroke-width: 6; stroke-linecap: round; }
.logo-mark .lm-apple{ fill: var(--apple-red); }
.logo-mark .lm-stem{ stroke: var(--soil-brown); stroke-width: 4; stroke-linecap: round; fill: none; }
.logo-mark .lm-leaf--a{ fill: var(--leaf-green); }
.logo-mark .lm-leaf--b{ fill: var(--leaf-green-dark); }

/* animated variant used in the preloader */
.logo-mark--draw .lm-ring{
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  transform-origin: 60px 60px;
  transform: rotate(-90deg);
  animation: lm-draw 1.1s .05s var(--ease-out) forwards;
}
.logo-mark--draw .lm-soil{
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: lm-draw-soil .7s .5s var(--ease-out) forwards;
}
.logo-mark--draw .lm-apple{
  transform-origin: 60px 64px;
  transform: scale(0);
  animation: lm-pop .75s .3s var(--ease-back) forwards;
}
.logo-mark--draw .lm-stem{ opacity: 0; animation: lm-fade .4s .8s linear forwards; }
.logo-mark--draw .lm-leaf{
  opacity: 0;
  transform-origin: 60px 38px;
}
.logo-mark--draw .lm-leaf--a{ animation: lm-leaf-a .6s .72s var(--ease-back) forwards; }
.logo-mark--draw .lm-leaf--b{ animation: lm-leaf-b .6s .84s var(--ease-back) forwards; }

@keyframes lm-draw     { to{ stroke-dashoffset: 0; } }
@keyframes lm-draw-soil{ to{ stroke-dashoffset: 0; } }
@keyframes lm-pop      { 0%{ transform: scale(0); } 100%{ transform: scale(1); } }
@keyframes lm-fade     { to{ opacity: 1; } }
@keyframes lm-leaf-a   { 0%{ opacity: 0; transform: rotate(-55deg) scale(.5); } 100%{ opacity: 1; transform: none; } }
@keyframes lm-leaf-b   { 0%{ opacity: 0; transform: rotate(50deg)  scale(.5); } 100%{ opacity: 1; transform: none; } }

/* ══════════════════════ 06. SCROLL PROGRESS ══════════════════════ */
.scroll-progress{
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1200;
  height: 3px;
  pointer-events: none;
}
.scroll-progress span{
  display: block;
  width: 100%; height: 100%;
  transform: scaleX(0);
  transform-origin: right center;      /* RTL: grows leftwards */
  background: linear-gradient(90deg, var(--leaf-green), var(--leaf-green-light), var(--apple-red));
}
[dir="ltr"] .scroll-progress span{ transform-origin: left center; }

/* ══════════════════════ 07. NAVBAR ══════════════════════ */
.nav{
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1100;
  transition: box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-block-end: 1px solid transparent;
}
.nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--nav-h);
}

/* The frosted glass lives on a ::before layer, not on .nav itself: a
   backdrop-filter on .nav would become the containing block of the fixed
   mobile menu inside it and squash the menu into the 76px bar. */
.nav::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(250, 248, 243, .78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.nav.is-stuck::before{ opacity: 1; }
.nav.is-stuck{
  border-block-end-color: var(--line);
  box-shadow: 0 6px 24px rgba(27, 42, 23, .08);
}

/* brand */
.nav__brand{
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: none;
}
.nav__brand .logo-img,
.nav__brand .logo-mark{
  width: clamp(42px, 10vw, 54px);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(27, 42, 23, .18));
  transition: transform .5s var(--ease-back);
}
.nav__brand:hover .logo-img,
.nav__brand:hover .logo-mark{ transform: rotate(-6deg) scale(1.06); }

.nav__brand-text{ display: flex; flex-direction: column; line-height: 1.3; }
.nav__brand-text strong{
  font-family: var(--f-head);
  font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
  font-weight: 700;
  color: #fff;
  transition: color .4s var(--ease);
}
.nav__brand-text small{
  font-size: .72rem;
  color: rgba(255, 255, 255, .78);
  transition: color .4s var(--ease);
}
.nav.is-stuck .nav__brand-text strong{ color: var(--leaf-green-dark); }
.nav.is-stuck .nav__brand-text small{ color: var(--ink-45); }

/* links */
.nav__links{ display: flex; align-items: center; gap: clamp(.2rem, .6vw, .9rem); }
.nav__link{
  position: relative;
  padding: .5rem .55rem;
  color: rgba(255, 255, 255, .88);
  font-family: var(--f-head);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.nav__link::after{
  content: "";
  position: absolute;
  inset-inline: .5rem;
  inset-block-end: .18rem;
  height: 2px;
  border-radius: 999px;
  background: var(--apple-red);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s var(--ease-out);
}
[dir="ltr"] .nav__link::after{ transform-origin: left center; }
.nav__link:hover::after,
.nav__link.is-active::after{ transform: scaleX(1); }
.nav__link:hover{ color: #fff; }
.nav__link.is-active{ color: #fff; }

.nav.is-stuck .nav__link{ color: var(--ink-60); }
.nav.is-stuck .nav__link:hover,
.nav.is-stuck .nav__link.is-active{ color: var(--leaf-green-dark); }

.nav__actions{ display: flex; align-items: center; gap: .6rem; flex: none; }
.nav__cta-mobile{ display: none; }

/* burger */
.burger{
  display: none;
  position: relative;
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(8px);
}
.burger span{
  position: absolute;
  inset-inline: 11px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .4s var(--ease-out), opacity .25s var(--ease), background-color .4s var(--ease);
}
.burger span:nth-child(1){ inset-block-start: 16px; }
.burger span:nth-child(2){ inset-block-start: 22px; }
.burger span:nth-child(3){ inset-block-start: 28px; }

.nav.is-stuck .burger{ border-color: var(--line); background: rgba(27, 42, 23, .05); }
.nav.is-stuck .burger span{ background: var(--leaf-green-dark); }

.burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity: 0; transform: scaleX(.3); }
.burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ══════════════════════ 08. HERO ══════════════════════ */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + 2.5rem) clamp(7rem, 12vh, 10rem);
  background:
    radial-gradient(1200px 620px at 85% 12%, rgba(139, 195, 74, .22), transparent 60%),
    radial-gradient(900px 540px at 10% 90%, rgba(107, 58, 31, .28), transparent 62%),
    linear-gradient(160deg, var(--leaf-green-dark) 0%, #27801b 48%, var(--leaf-green) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero__canvas{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

.hero__fields{
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: clamp(180px, 34vh, 340px);
  z-index: 0;
  pointer-events: none;
}
.field-layer{
  position: absolute;
  inset-inline: -2%;
  inset-block-end: 0;
  width: 104%;
  height: 100%;
  will-change: transform;
}

.hero__inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}

.hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-block-end: 1.1rem;
  padding: .45rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.hero__eyebrow svg{ width: 1.1em; height: 1.1em; color: var(--leaf-green-light); }

.hero__title{
  margin-block-end: .35rem;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .28);
}

.hero__tagline{
  min-height: 2.1em;
  margin-block-end: 1rem;
  color: var(--leaf-green-light);
  font-family: var(--f-head);
  font-size: clamp(1rem, .88rem + .72vw, 1.4rem);
  font-weight: 600;
}
.type__caret{
  display: inline-block;
  width: 3px;
  height: 1.05em;
  margin-inline-start: .18rem;
  border-radius: 2px;
  background: var(--apple-red);
  vertical-align: -.16em;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity: 0; } }

.hero__text{
  max-width: 48ch;
  margin-block-end: 1.8rem;
  color: rgba(255, 255, 255, .86);
  font-size: var(--fs-body);
}

.hero__btns{ display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__chips{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: 1.9rem;
}
.hero__chips li{
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .95rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(0, 0, 0, .14);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .9);
}
.hero__chips li::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* hero visual */
.hero__visual{
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(260px, 42vw, 460px);
}
.hero__glow{
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 195, 74, .5), rgba(139, 195, 74, 0) 68%);
  filter: blur(18px);
  animation: glow-pulse 6s var(--ease) infinite;
}
.hero__ring{
  position: absolute;
  width: 86%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  animation: ring-spin 26s linear infinite;
}
.hero__ring::before{
  content: "";
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px var(--gold);
}
.hero__ring--2{
  width: 100%;
  border-style: dashed;
  border-color: rgba(201, 165, 76, .3);
  animation-duration: 40s;
  animation-direction: reverse;
}
.hero__logo-float{
  position: relative;
  width: 72%;
  animation: float-y 7s var(--ease) infinite;
}
.hero__logo-float .logo-img,
.hero__logo-float .logo-mark{
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .35));
}

/* --- Main hero visual: video slot ------------------------------------------
   Hidden until JS confirms assets/hero.mp4 actually decoded, so the logo stays
   on screen while the file is missing and there is no broken-media flash.
   `aspect-ratio` reserves the box up front — the swap causes no layout shift.
   For a rounded square instead of a circle, change border-radius to ~32px.    */
.hero__video{
  display: none;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: var(--leaf-green-dark);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .38);
}
.hero__logo-float.has-video .hero__video{ display: block; }
.hero__logo-float.has-video .hero__logo-img,
.hero__logo-float.has-video .logo-mark{ display: none; }
/* on the dark hero the fallback ring needs to be light */
.hero__logo-float .logo-mark .lm-ring{ stroke: #fff; }
.hero__logo-float .logo-mark .lm-soil{ stroke: #C98A5F; }

@keyframes glow-pulse{ 0%, 100%{ transform: scale(1); opacity: .85; } 50%{ transform: scale(1.1); opacity: 1; } }
@keyframes ring-spin { to{ transform: rotate(360deg); } }
@keyframes float-y   { 0%, 100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-20px) rotate(2deg); } }

/* scroll cue */
.scroll-cue{
  position: absolute;
  inset-block-end: clamp(4.5rem, 9vh, 7rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .45rem;
  color: rgba(255, 255, 255, .78);
  font-size: .78rem;
  font-family: var(--f-head);
  font-weight: 600;
  transition: color .3s var(--ease);
}
.scroll-cue:hover{ color: #fff; }
.scroll-cue__mouse{
  display: grid;
  place-items: start center;
  width: 26px; height: 42px;
  padding-block-start: 7px;
  border: 2px solid currentColor;
  border-radius: 14px;
}
.scroll-cue__mouse i{
  width: 3px; height: 8px;
  border-radius: 2px;
  background: currentColor;
  animation: cue 1.7s var(--ease) infinite;
}
@keyframes cue{
  0%  { transform: translateY(0);    opacity: 0; }
  30% { opacity: 1; }
  100%{ transform: translateY(14px); opacity: 0; }
}

/* ══════════════════════ 09. ABOUT / MISSION & VISION ══════════════════════ */
.about{ background: var(--cream); }

.mv-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gap);
}

.mv-card{
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.mv-card::before{
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--leaf-green-dark), var(--leaf-green), var(--leaf-green-light));
}
.mv-card::after{
  /* gold hairline that appears on hover */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
  transition: border-color .5s var(--ease);
}
.mv-card:hover{ box-shadow: var(--sh-lg); border-color: rgba(201, 165, 76, .3); }
.mv-card:hover::after{ border-color: var(--line-gold); }

.mv-card__icon{
  display: grid;
  place-items: center;
  width: 70px; height: 70px;
  margin-block-end: 1.2rem;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(58, 154, 36, .12), rgba(139, 195, 74, .2));
  color: var(--leaf-green-dark);
  transition: transform .5s var(--ease-back), background-color .4s var(--ease);
}
.mv-card__icon svg{ width: 38px; height: 38px; }
.mv-card:hover .mv-card__icon{ transform: translateY(-4px) scale(1.06); }

.mv-card__title{
  margin-block-end: .6rem;
  font-size: calc(var(--fs-h3) + .14rem);
  color: var(--leaf-green-dark);
}
.mv-card__text{ color: var(--ink-60); }

/* ══════════════════════ 10. STATS ══════════════════════ */
.stats{
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  background: linear-gradient(135deg, var(--leaf-green-dark), #27801b 55%, var(--leaf-green));
  color: #fff;
  overflow: hidden;
}
.stats::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(255, 255, 255, .10), transparent 65%),
    radial-gradient(500px 260px at 90% 100%, rgba(201, 165, 76, .18), transparent 65%);
  pointer-events: none;
}
.stats__grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  text-align: center;
}
.stat{
  padding: 1.1rem .6rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .45s var(--ease-out), background-color .4s var(--ease);
}
.stat:hover{ transform: translateY(-5px); background: rgba(255, 255, 255, .11); }
.stat__num{
  display: block;
  font-family: var(--f-head);
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.stat__label{
  display: block;
  margin-block-start: .35rem;
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ══════════════════════ 11. PRODUCTS ══════════════════════ */
.products{
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(139, 195, 74, .10), transparent 60%),
    var(--cream);
}

/* --- toolbar --- */
.p-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.25rem;
}

.p-tabs{
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  /* without these the 6 nowrap tabs impose their full content width as an
     automatic minimum size and push the page sideways on small screens */
  min-width: 0;
  max-width: 100%;
  gap: .25rem;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--sh-sm);
  overflow-x: auto;              /* only this container scrolls */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.p-tabs::-webkit-scrollbar{ display: none; }

.p-tabs__ink{
  position: absolute;
  inset-block: .35rem;
  /* physical `left` on purpose: JS sets it from offsetLeft, which is physical
     in both RTL and LTR, so the indicator lands correctly either way */
  left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--leaf-green), var(--leaf-green-dark));
  box-shadow: 0 6px 16px rgba(30, 107, 20, .28);
  transition: left .45s var(--ease-out), width .45s var(--ease-out);
  pointer-events: none;
}

.p-tab{
  position: relative;
  z-index: 1;
  flex: none;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  color: var(--ink-60);
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: color .35s var(--ease);
}
.p-tab:hover{ color: var(--leaf-green-dark); }
.p-tab.is-active{ color: #fff; }

.p-search{
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
  max-width: 340px;
}
.p-search svg{
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 19px; height: 19px;
  color: var(--ink-45);
  pointer-events: none;
}
.p-search input{
  width: 100%;
  padding: .85rem 2.9rem .85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.p-search input::placeholder{ color: var(--ink-45); }
.p-search input:focus{
  outline: none;
  border-color: var(--leaf-green);
  box-shadow: 0 0 0 4px rgba(58, 154, 36, .14);
}
.p-search input::-webkit-search-cancel-button{ cursor: pointer; }

.p-count{
  margin-block-end: 1.6rem;
  color: var(--ink-45);
  font-size: var(--fs-sm);
}

/* --- grid --- */
.p-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
  gap: var(--gap);
}

/* single-product layout: one wide feature card, image beside the details */
.p-grid--single{
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 768px){
  .p-grid--single .p-card{
    display: grid;
    grid-template-columns: 1fr 1.15fr;
  }
  .p-grid--single .p-card__media{ aspect-ratio: auto; min-height: 100%; }
  .p-grid--single .p-card__media img{ position: absolute; inset: 0; }
  .p-grid--single .p-card__body{ gap: .8rem; padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
  .p-grid--single .p-card__name{ font-size: var(--fs-h2, 1.9rem); }
  .p-grid--single .p-card__desc{ font-size: var(--fs-base, 1rem); }
  .p-grid--single .p-card__spec{ font-size: .9rem; }
  .p-grid--single .p-card__btns .btn{ padding: .8rem 1rem; font-size: .92rem; }
  .p-grid--single .p-card:hover{ transform: translateY(-4px); }
}

/* --- card --- */
.p-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
              border-color .4s var(--ease), opacity .35s var(--ease);
}
.p-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: rgba(58, 154, 36, .26);
}

/* shine sweep */
.p-card::after{
  content: "";
  position: absolute;
  inset-block: -40%;
  inset-inline-start: -70%;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: inset-inline-start .85s var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
.p-card:hover::after{ inset-inline-start: 125%; }

/* filtering animation state */
.p-card.is-out{ opacity: 0; transform: scale(.94); pointer-events: none; }

/* scroll entrance — each card stays hidden until it scrolls into view, then
   JS adds .is-shown (cards arriving together are staggered via --d).
   fill-mode `backwards` (not `forwards`) so the .is-out transition above
   is still free to drive opacity/transform afterwards. */
.js-cards .p-card:not(.is-shown){ opacity: 0; }
.p-card.is-shown{
  animation: card-in .8s var(--ease-out) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes card-in{
  from{ opacity: 0; transform: translateY(48px) scale(.94); }
  to  { opacity: 1; transform: none; }
}

.p-card__media{
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, var(--cream-2), #e8f0de);
  overflow: hidden;
}
.p-card__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.p-card:hover .p-card__media img{ transform: scale(1.09); }

.p-card__badge{
  position: absolute;
  inset-block-start: .85rem;
  inset-inline-start: .85rem;
  z-index: 2;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--apple-red), var(--apple-red-dark));
  color: #fff;
  font-family: var(--f-head);
  font-size: .74rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(227, 20, 27, .3);
}

.p-card__cat{
  position: absolute;
  inset-block-end: .85rem;
  inset-inline-end: .85rem;
  z-index: 2;
  padding: .26rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  color: var(--leaf-green-dark);
  font-size: .72rem;
  font-weight: 600;
}

.p-card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .55rem;
  padding: 1.25rem 1.3rem 1.4rem;
}
.p-card__name{
  font-size: var(--fs-h3);
  color: var(--leaf-green-dark);
  line-height: 1.45;
}
.p-card__desc{
  margin: 0;
  color: var(--ink-60);
  font-size: var(--fs-sm);
  line-height: 1.75;
}
.p-card__spec{
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  padding: .55rem .75rem;
  border-inline-start: 3px solid var(--leaf-green-light);
  border-radius: var(--radius-sm);
  background: rgba(139, 195, 74, .10);
  color: var(--leaf-green-dark);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.6;
}
.p-card__spec svg{ width: 16px; height: 16px; flex: none; margin-block-start: .25rem; }

.p-card__price{
  margin: 0;
  color: var(--soil-brown);
  font-size: .8rem;
  font-weight: 600;
}

.p-card__btns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-block-start: auto;
  padding-block-start: .9rem;
}
.p-card__btns .btn{ padding: .62rem .5rem; font-size: .82rem; }
.p-card__btns .btn--add{ grid-column: 1 / -1; }

.p-btn-detail{
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--leaf-green-dark);
  box-shadow: none;
}
.p-btn-detail:hover{ background: var(--leaf-green-dark); color: #fff; border-color: var(--leaf-green-dark); }

/* added state */
.p-card__btns .btn--add.is-added{
  background-image: linear-gradient(135deg, var(--leaf-green), var(--leaf-green-dark));
  box-shadow: var(--sh-green);
}

/* empty state */
.p-empty{
  display: grid;
  justify-items: center;
  gap: .6rem;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1rem;
  border: 1px dashed rgba(27, 42, 23, .18);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-align: center;
}
.p-empty svg{ width: 56px; height: 56px; color: var(--leaf-green-light); }
.p-empty h3{ color: var(--leaf-green-dark); font-size: var(--fs-h3); }
.p-empty p{ max-width: 42ch; color: var(--ink-60); font-size: var(--fs-sm); }
.p-empty .btn{ margin-block-start: .6rem; }

/* ══════════════════════ 12. PRODUCT MODAL ══════════════════════ */
.modal{
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 2vw, 2rem);
}
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(14, 30, 11, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.modal.is-open .modal__backdrop{ opacity: 1; }

.modal__box{
  position: relative;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  width: min(100%, 940px);
  max-height: min(90svh, 760px);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(42px) scale(.97);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.modal.is-open .modal__box{ opacity: 1; transform: none; }

.modal__x{
  position: absolute;
  inset-block-start: .85rem;
  inset-inline-end: .85rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease-back), background-color .3s var(--ease), color .3s var(--ease);
}
.modal__x svg{ width: 20px; height: 20px; }
.modal__x:hover{ transform: rotate(90deg); background: var(--apple-red); color: #fff; }

.modal__media{
  position: relative;
  background: linear-gradient(145deg, var(--cream-2), #e4efd9);
}
.modal__media img{ width: 100%; height: 100%; object-fit: cover; }
.modal__badge{
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  padding: .32rem .85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--apple-red), var(--apple-red-dark));
  color: #fff;
  font-family: var(--f-head);
  font-size: .76rem;
  font-weight: 700;
}
.modal__badge:empty{ display: none; }

.modal__content{
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal__title{
  padding-inline-end: 3rem;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem);
  color: var(--leaf-green-dark);
}
.modal__price{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  margin-block: .7rem 1.2rem;
  padding: .32rem .9rem;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: rgba(201, 165, 76, .1);
  color: var(--soil-brown);
  font-size: .82rem;
  font-weight: 600;
}

.spec{ margin: 0 0 1.4rem; }
.spec__row{
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: .5rem 1rem;
  padding-block: .72rem;
  border-block-end: 1px dashed var(--line);
}
.spec__row:last-child{ border-block-end: 0; }
.spec dt{
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  color: var(--leaf-green-dark);
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.spec dt svg{ width: 16px; height: 16px; flex: none; margin-block-start: .3rem; color: var(--leaf-green); }
.spec dd{
  margin: 0;
  color: var(--ink-60);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* stays reachable while the long spec list scrolls underneath it */
.modal__btns{
  position: sticky;
  inset-block-end: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-block-start: auto;
  padding-block: .7rem;
  background: linear-gradient(to top, var(--white) 72%, rgba(255, 255, 255, 0));
}
.modal__btns .btn{ flex: 1 1 160px; }

/* ══════════════════════ 13. ORDER DRAWER / FAB / TOASTS ══════════════════════ */
.order-fab{
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  /* physical sides on purpose: the order button sits bottom-left (the side the
     drawer slides in from) and WhatsApp bottom-right, in RTL and LTR alike */
  left: clamp(1rem, 3vw, 1.75rem);
  z-index: 1150;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--leaf-green-dark), var(--leaf-green));
  color: #fff;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .9rem;
  box-shadow: var(--sh-green);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.order-fab:hover{ transform: translateY(-4px); box-shadow: 0 24px 50px rgba(30, 107, 20, .34); }
.order-fab svg{ width: 22px; height: 22px; }

.order-fab__count{
  display: grid;
  place-items: center;
  min-width: 24px; height: 24px;
  padding-inline: .3rem;
  border-radius: 999px;
  background: var(--apple-red);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(227, 20, 27, .4);
}
.order-fab__count.is-bump{ animation: bump .6s var(--ease-back); }
@keyframes bump{
  0%  { transform: scale(1); }
  35% { transform: scale(1.5); }
  60% { transform: scale(.9); }
  100%{ transform: scale(1); }
}

/* drawer */
.drawer{ position: fixed; inset: 0; z-index: 1700; }
.drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(14, 30, 11, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.drawer.is-open .drawer__backdrop{ opacity: 1; }

.drawer__panel{
  position: absolute;
  inset-block: 0;
  /* slides in from the LEFT edge of the screen (per spec) */
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: var(--cream);
  box-shadow: 10px 0 60px rgba(14, 30, 11, .3);
  transform: translateX(-102%);
  transition: transform .55s var(--ease-out);
}
.drawer.is-open .drawer__panel{ transform: none; }

.drawer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, var(--leaf-green-dark), var(--leaf-green));
  color: #fff;
}
.drawer__head h2{ font-size: 1.05rem; }
.drawer__x{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  transition: transform .35s var(--ease-back), background-color .3s var(--ease);
}
.drawer__x svg{ width: 20px; height: 20px; }
.drawer__x:hover{ transform: rotate(90deg); background: var(--apple-red); }

.drawer__scroll{
  flex: 1;
  padding: 1.1rem 1.25rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* order items */
.o-items{ display: grid; gap: .7rem; }
.o-item{
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: .75rem;
  align-items: start;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--sh-sm);
  animation: slide-in .45s var(--ease-out) both;
}
@keyframes slide-in{ from{ opacity: 0; transform: translateY(10px); } }

.o-item__img{
  width: 58px; height: 58px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--cream-2);
}
.o-item__main{ min-width: 0; }
.o-item__name{
  margin: 0 0 .4rem;
  font-family: var(--f-head);
  font-size: .92rem;
  font-weight: 700;
  color: var(--leaf-green-dark);
  line-height: 1.5;
}
.o-item__ctrls{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.qty{
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  overflow: hidden;
}
.qty button{
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  color: var(--leaf-green-dark);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.qty button:hover{ background: var(--leaf-green); color: #fff; }
.qty input{
  width: 42px;
  padding: .2rem 0;
  border: 0;
  border-inline: 1px solid var(--line);
  background: var(--white);
  text-align: center;
  font-size: .88rem;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

.o-unit{
  padding: .32rem 1.8rem .32rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A17' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat left .5rem center / 14px;
  font-size: .8rem;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

.o-item__del{
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(227, 20, 27, .08);
  color: var(--apple-red);
  transition: background-color .3s var(--ease), transform .3s var(--ease-back);
}
.o-item__del svg{ width: 16px; height: 16px; }
.o-item__del:hover{ background: var(--apple-red); color: #fff; transform: scale(1.08); }

/* drawer empty state */
.o-empty{
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 2rem 1rem;
  text-align: center;
}
.o-empty svg{ width: 58px; height: 58px; color: var(--leaf-green-light); }
.o-empty h3{ color: var(--leaf-green-dark); font-size: 1.1rem; }
.o-empty p{ color: var(--ink-60); font-size: var(--fs-sm); max-width: 32ch; }
.o-empty .btn{ margin-block-start: .5rem; }

/* customer form */
.o-form{ margin-block-start: 1.5rem; }
.o-form__title{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-block-end: .9rem;
  color: var(--leaf-green-dark);
  font-size: 1.02rem;
}
.o-form__title::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.field{ margin-block-end: .9rem; }
.field label{
  display: block;
  margin-block-end: .35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.field label span{ color: var(--apple-red); }
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: .72rem .95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize: vertical; min-height: 84px; }
.field select{
  padding-inline-end: .95rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A17' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .9rem center;
  background-size: 16px;
  appearance: none;
  padding-inline-start: 2.4rem;
  cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--leaf-green);
  box-shadow: 0 0 0 4px rgba(58, 154, 36, .14);
}
.field.is-invalid input,
.field.is-invalid select{
  border-color: var(--apple-red);
  box-shadow: 0 0 0 4px rgba(227, 20, 27, .12);
}
.field__err{
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: .4rem 0 0;
  color: var(--apple-red);
  font-size: .8rem;
  font-weight: 600;
}
.field__err svg{ width: 15px; height: 15px; flex: none; }

/* drawer footer */
.drawer__foot{
  flex: none;
  padding: 1rem 1.25rem 1.25rem;
  border-block-start: 1px solid var(--line);
  background: var(--white);
}
.drawer__note{
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: 0 0 .8rem;
  color: var(--ink-45);
  font-size: .78rem;
  line-height: 1.65;
}
.drawer__note svg{ width: 15px; height: 15px; flex: none; margin-block-start: .3rem; }
.drawer__foot-btns{ display: grid; gap: .3rem; }

/* toasts */
.toasts{
  position: fixed;
  inset-block-end: clamp(5.5rem, 12vh, 7rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 1900;
  display: grid;
  gap: .5rem;
  width: min(92vw, 380px);
  pointer-events: none;
}
.toast{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--sh-lg);
  animation: toast-in .4s var(--ease-back) both;
}
.toast.is-out{ animation: toast-out .35s var(--ease) both; }
.toast svg{ width: 19px; height: 19px; flex: none; }
.toast--ok svg{ color: var(--leaf-green-light); }
.toast--warn svg{ color: #FFC14D; }
.toast--del svg{ color: #FF8A8E; }
@keyframes toast-in { from{ opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes toast-out{ to  { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* ══════════════════════ 14. WHY CHOOSE US ══════════════════════ */
.why{
  position: relative;
  padding-block: calc(var(--sp-section) + 2rem);
  background:
    radial-gradient(800px 420px at 12% 8%, rgba(139, 195, 74, .20), transparent 62%),
    radial-gradient(700px 400px at 88% 92%, rgba(107, 58, 31, .3), transparent 62%),
    linear-gradient(145deg, #15540f, var(--leaf-green-dark) 55%, #2b7f1d);
  color: #fff;
  overflow: hidden;
}

.why-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gap);
}

.why-card{
  position: relative;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .5s var(--ease-out), background-color .4s var(--ease),
              border-color .4s var(--ease), box-shadow .5s var(--ease-out);
}
.why-card::before{
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 140px; height: 140px;
  background: radial-gradient(circle at 100% 0%, rgba(201, 165, 76, .28), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.why-card:hover{
  transform: translateY(-8px);
  background: rgba(255, 255, 255, .12);
  border-color: var(--line-gold);
  box-shadow: 0 26px 56px rgba(0, 0, 0, .26);
}
.why-card:hover::before{ opacity: 1; }

.why-card__ic{
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-block-end: 1.05rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .10);
  color: var(--leaf-green-light);
  transition: transform .55s var(--ease-back), color .4s var(--ease), background-color .4s var(--ease);
}
.why-card__ic svg{ width: 34px; height: 34px; }
.why-card:hover .why-card__ic{
  transform: translateY(-4px) rotate(-6deg) scale(1.06);
  color: var(--gold);
  background: rgba(201, 165, 76, .14);
}

.why-card h3{
  margin-block-end: .5rem;
  font-size: var(--fs-h3);
  color: #fff;
}
.why-card p{
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* ══════════════════════ 15. DELIVERY & EXPORT ══════════════════════ */
.delivery{ background: var(--cream); overflow-x: clip; }
.delivery__inner{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.delivery__text p{ color: var(--ink-60); }
.delivery__text strong{ color: var(--leaf-green-dark); }

.d-list{
  display: grid;
  gap: .6rem;
  margin-block: 1.6rem 2rem;
}
.d-list li{
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.d-list svg{
  width: 22px; height: 22px;
  flex: none;
  padding: 3px;
  margin-block-start: .15rem;
  border-radius: 50%;
  background: rgba(58, 154, 36, .14);
  color: var(--leaf-green-dark);
}

.delivery__map{ position: relative; }
.jo-map{
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 50px rgba(30, 107, 20, .22));
}
.jo-video{
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 50px rgba(30, 107, 20, .22);
}
.jo-shape{ transition: filter .4s var(--ease); }

/* animated export routes */
.jo-routes path{
  stroke-dasharray: 7 9;
  animation: route-dash 2.4s linear infinite;
  opacity: .85;
}
.jo-routes path:nth-child(2){ animation-duration: 3s; }
.jo-routes path:nth-child(3){ animation-duration: 2.7s; }
.jo-routes path:nth-child(4){ animation-duration: 3.4s; }
@keyframes route-dash{ to{ stroke-dashoffset: -64; } }

/* governorate dots */
.jo-dot circle{ fill: var(--leaf-green-light); }
.jo-dot__pulse{
  fill: none;
  stroke: var(--leaf-green-light);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-pulse 2.6s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * .22s);
}
.jo-dot--cap circle{ fill: #fff; }
.jo-dot--cap .jo-dot__pulse{ stroke: #fff; }
@keyframes dot-pulse{
  0%  { transform: scale(1);   opacity: .9; }
  70% { transform: scale(3.6); opacity: 0; }
  100%{ transform: scale(3.6); opacity: 0; }
}

/* Ma'an base marker */
.jo-base circle{ fill: var(--apple-red); }
.jo-base__halo{
  fill: none !important;
  stroke: var(--apple-red);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: base-pulse 2.2s var(--ease-out) infinite;
}
@keyframes base-pulse{
  0%  { transform: scale(.6); opacity: 1; }
  100%{ transform: scale(2);  opacity: 0; }
}

/* `direction` is inherited from <html dir="rtl"> into the SVG, which flips the
   text anchor so the label runs back over the Ma'an marker. Forcing ltr here
   anchors it at x and lets it extend away from the dot; the Arabic glyphs
   themselves still shape right-to-left inside the run. */
.jo-label{
  direction: ltr;
  fill: var(--leaf-green-dark);
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--cream);
  stroke-width: 4;
  stroke-linejoin: round;
}
.jo-label--sm{ fill: var(--soil-brown); font-size: 13px; font-weight: 600; }

.map-note{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem 1rem;
  margin-block-start: 1rem;
  color: var(--ink-45);
  font-size: .8rem;
  font-weight: 600;
}
.map-note__key{
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  vertical-align: -.1em;
}
.map-note__key--green{ background: var(--leaf-green); }
.map-note__key--gold{ background: var(--gold); }

/* ══════════════════════ 16. HOW TO ORDER ══════════════════════ */
.how{
  background:
    radial-gradient(700px 400px at 85% 100%, rgba(139, 195, 74, .12), transparent 62%),
    var(--cream-2);
}

.steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, .6rem + 1.4vw, 2rem);
}
.steps__rail{
  position: absolute;
  inset-block-start: 25px;
  inset-inline: 11%;
  height: 3px;
  border-radius: 999px;
  background: rgba(27, 42, 23, .12);
  overflow: hidden;
}
.steps__rail i{
  display: block;
  width: 100%; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--leaf-green-dark), var(--leaf-green), var(--apple-red));
  transform: scaleX(0);
  transform-origin: right center;        /* RTL fill */
  transition: transform .35s linear;
}
[dir="ltr"] .steps__rail i{ transform-origin: left center; }

.step{ position: relative; text-align: center; }
.step__dot{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin: 0 auto 1.1rem;
  border: 3px solid var(--cream-2);
  border-radius: 50%;
  background: var(--white);
  color: var(--leaf-green-dark);
  font-family: var(--f-head);
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: var(--sh-sm);
  transition: background-color .5s var(--ease), color .5s var(--ease),
              transform .5s var(--ease-back), box-shadow .5s var(--ease);
}
.step.is-in .step__dot{
  background: linear-gradient(135deg, var(--leaf-green), var(--leaf-green-dark));
  color: #fff;
  transform: scale(1.06);
  box-shadow: var(--sh-green);
}
.step h3{
  margin-block-end: .45rem;
  font-size: var(--fs-h3);
  color: var(--leaf-green-dark);
}
.step p{
  margin: 0;
  color: var(--ink-60);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* Factory tour video */
.factory{ background: var(--cream); overflow-x: clip; }
.factory__inner{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.factory__text p{ color: var(--ink-60); margin-block-end: 2rem; }
.factory__text strong{ color: var(--leaf-green-dark); }
.factory__video{
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 368 / 656;
  margin-inline: auto;
  object-fit: cover;
  background: #111;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 50px rgba(30, 107, 20, .22);
}
@media (max-width: 1024px){
  .factory__inner{ grid-template-columns: 1fr; }
  .factory__text{ text-align: center; }
  .factory__media{ order: 1; }
}

/* ══════════════════════ 17. FAQ ══════════════════════ */
.faq{ background: var(--cream); }
.faq__inner{ max-width: 920px; }

.acc{ display: grid; gap: .75rem; }
.acc__item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.acc__item.is-open{ border-color: rgba(58, 154, 36, .3); box-shadow: var(--sh-md); }
.acc__item h3{ margin: 0; font-size: inherit; }

.acc__btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.3rem;
  text-align: start;
  font-family: var(--f-head);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--leaf-green-dark);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.acc__btn:hover{ background: rgba(139, 195, 74, .08); }

.acc__chev{
  width: 28px; height: 28px;
  flex: none;
  padding: 4px;
  border-radius: 50%;
  background: rgba(58, 154, 36, .1);
  color: var(--leaf-green-dark);
  transition: transform .45s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease);
}
.acc__item.is-open .acc__chev{
  transform: rotate(180deg);
  background: var(--apple-red);
  color: #fff;
}

.acc__panel{
  height: 0;
  overflow: hidden;
  transition: height .45s var(--ease-out);
}
.acc__body{
  padding: 0 1.3rem 1.25rem;
  color: var(--ink-60);
  font-size: var(--fs-sm);
  line-height: 1.9;
}
.acc__body a{ color: var(--leaf-green-dark); font-weight: 700; border-block-end: 1px solid var(--line-gold); }
.acc__body a:hover{ color: var(--apple-red); }
.acc__body em{
  color: var(--soil-brown);
  font-style: normal;
  font-weight: 700;
}

/* ══════════════════════ 17b. GALLERY CAROUSEL ══════════════════════ */
.gallery{ background: var(--cream-2); }

.gal{ position: relative; }

.gal__track{
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: .25rem 0 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}
.gal__track::-webkit-scrollbar{ display: none; }
.gal__track:focus-visible{ outline: 3px solid var(--leaf-green); outline-offset: 4px; }

.gal__slide{
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  scroll-snap-align: start;
}
.gal__slide figure{
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--sh-md);
  aspect-ratio: 4 / 5;
}
.gal__slide img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.gal__slide figure:hover img{ transform: scale(1.05); }
.gal__slide figcaption{
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 2.2rem 1.1rem .9rem;
  font-family: var(--f-head);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(27, 42, 23, .78), transparent);
}

.gal__arrow{
  position: absolute;
  inset-block-start: calc(50% - 1.5rem);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--leaf-green-dark);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.gal__arrow svg{ width: 22px; height: 22px; }
.gal__arrow:hover{ background: var(--leaf-green); color: #fff; }
.gal__arrow:focus-visible{ outline: 3px solid var(--leaf-green); outline-offset: 3px; }
.gal__arrow--prev{ inset-inline-start: -14px; }
.gal__arrow--next{ inset-inline-end: -14px; }

.gal__dots{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25rem;
  margin-block-start: .5rem;
}
.gal__dot{
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.gal__dot::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ink-45);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.gal__dot[aria-current="true"]::before{ width: 24px; background: var(--leaf-green); }
.gal__dot:focus-visible{ outline: 2px solid var(--leaf-green); border-radius: 6px; }

@media (max-width: 900px){
  .gal__slide{ flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 600px){
  .gal__slide{ flex-basis: 86%; scroll-snap-align: center; }
  .gal__arrow{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .gal__track{ scroll-behavior: auto; }
}

/* ══════════════════════ 18. CONTACT ══════════════════════ */
.contact{
  position: relative;
  padding-block: calc(var(--sp-section) + 2rem);
  background:
    radial-gradient(760px 420px at 85% 10%, rgba(139, 195, 74, .2), transparent 62%),
    radial-gradient(700px 400px at 10% 95%, rgba(107, 58, 31, .34), transparent 60%),
    linear-gradient(160deg, var(--leaf-green-dark), #13500d 60%, #1a6412);
  color: #fff;
  overflow: hidden;
}

.c-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
  margin-block-end: var(--gap);
}

.c-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform .5s var(--ease-out), background-color .4s var(--ease),
              border-color .4s var(--ease), box-shadow .5s var(--ease-out);
}
.c-card:hover{
  transform: translateY(-7px);
  background: rgba(255, 255, 255, .13);
  border-color: var(--line-gold);
  box-shadow: 0 26px 56px rgba(0, 0, 0, .26);
}
.c-card--static{ cursor: default; }
.c-card--static:hover{ transform: none; }

.c-card__ic{
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-block-end: .7rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  color: var(--leaf-green-light);
  transition: transform .5s var(--ease-back), color .4s var(--ease);
}
.c-card__ic svg{ width: 30px; height: 30px; }
.c-card:hover .c-card__ic{ transform: scale(1.08) rotate(-5deg); color: var(--gold); }

.c-card h3{ font-size: var(--fs-h3); color: #fff; }
.c-card__val{
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-family: var(--f-head);
  font-size: 1.05rem;
  font-weight: 600;
}
.c-card__go{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-block-start: .6rem;
  color: var(--leaf-green-light);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.c-card__go svg{ width: 17px; height: 17px; transition: transform .4s var(--ease-out); }
.c-card:hover .c-card__go svg{ transform: translateX(-5px); }
.c-card__go--muted{ color: rgba(255, 255, 255, .6); font-weight: 600; }

/* map frame */
.map-frame{
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
}
.map-frame__head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .9rem 1.2rem;
  border-block-end: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--f-head);
  font-size: var(--fs-sm);
}
.map-frame__head a{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--leaf-green-light);
  font-weight: 700;
  border-block-end: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.map-frame__head a:hover{ color: var(--gold); border-block-end-color: var(--gold); }
.map-frame iframe{
  width: 100%;
  height: clamp(260px, 42vw, 420px);
  border: 0;
  filter: saturate(.92) contrast(1.02);
}

/* CTA band */
.cta-band{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  margin-block-start: var(--gap);
  padding: clamp(1.5rem, 1rem + 1.8vw, 2.6rem);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(201, 165, 76, .16), rgba(255, 255, 255, .06));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cta-band h3{
  margin-block-end: .35rem;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.4rem);
  color: #fff;
}
.cta-band p{ margin: 0; color: rgba(255, 255, 255, .78); font-size: var(--fs-sm); max-width: 48ch; }
.cta-band__btns{ display: flex; flex-wrap: wrap; gap: .7rem; }

/* ══════════════════════ 19. FOOTER ══════════════════════ */
.footer{
  position: relative;
  padding-block-start: clamp(4rem, 3rem + 3vw, 6rem);
  background: #0F3B0A;
  color: rgba(255, 255, 255, .78);
}
.footer__fields{
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  width: calc(100% + 2px);
  height: clamp(40px, 5vw, 70px);
  pointer-events: none;
}

.footer__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(1.6rem, 1rem + 2vw, 3rem);
  padding-block-end: 2.5rem;
}

.footer__brand .logo-img,
.footer__brand .logo-mark{
  width: 68px;
  margin-block-end: .8rem;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35));
}
.footer__brand .logo-mark .lm-ring{ stroke: #fff; }
.footer__brand .logo-mark .lm-soil{ stroke: #C98A5F; }
.footer__brand strong{
  display: block;
  font-family: var(--f-head);
  font-size: 1.15rem;
  color: #fff;
}
.footer__brand span{
  display: block;
  margin-block-end: .8rem;
  color: var(--leaf-green-light);
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.footer__brand p{ font-size: var(--fs-sm); line-height: 1.9; max-width: 42ch; }

.footer__col h4{
  margin-block-end: 1rem;
  padding-block-end: .6rem;
  border-block-end: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-size: .95rem;
}
.footer__col ul{ display: grid; gap: .2rem; }
.footer__col a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* keeps the link rows at a comfortable ~44px touch height */
  min-height: 44px;
  padding-block: .25rem;
  font-size: var(--fs-sm);
  transition: color .3s var(--ease), transform .3s var(--ease-out);
}
.footer__col a:hover{ color: var(--leaf-green-light); transform: translateX(-4px); }

.footer__contact li{
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-height: 44px;
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.footer__contact svg{
  width: 18px; height: 18px;
  flex: none;
  margin-block-start: .35rem;
  color: var(--leaf-green-light);
}
.footer__contact a:hover{ transform: none; }

.footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-block: 1.3rem;
  border-block-start: 1px solid rgba(255, 255, 255, .1);
  font-size: .82rem;
}
.footer__bottom p{ margin: 0; }
.footer__made{ color: var(--gold); font-family: var(--f-head); font-weight: 600; }

/* ══════════════════════ 20. FLOATING BUTTONS ══════════════════════ */
.wa-fab{
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  z-index: 1150;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ECC71, #1EA055);
  color: #fff;
  box-shadow: 0 14px 34px rgba(30, 160, 85, .42);
  transition: transform .4s var(--ease-back), box-shadow .4s var(--ease);
}
.wa-fab svg{ width: 30px; height: 30px; }
.wa-fab:hover{ transform: scale(1.08); box-shadow: 0 18px 42px rgba(30, 160, 85, .5); }

.wa-fab__ring{
  position: absolute;
  inset: 0;
  border: 2px solid #2ECC71;
  border-radius: 50%;
  animation: wa-pulse 2.4s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes wa-pulse{
  0%  { transform: scale(1);   opacity: .8; }
  100%{ transform: scale(1.7); opacity: 0; }
}

.wa-fab__tip{
  position: absolute;
  right: calc(100% + .65rem);
  padding: .4rem .85rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out);
  pointer-events: none;
}
.wa-fab:hover .wa-fab__tip,
.wa-fab:focus-visible .wa-fab__tip{ opacity: 1; transform: none; }

/* back to top with progress ring */
.top-btn{
  position: fixed;
  inset-block-end: clamp(5.2rem, 3vw + 4.4rem, 6.2rem);
  right: clamp(1.25rem, 3vw + .25rem, 2rem);
  z-index: 1140;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--leaf-green-dark);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease-out),
              visibility .4s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.top-btn.is-vis{ opacity: 1; visibility: visible; transform: none; }
.top-btn:hover{ background: var(--leaf-green-dark); color: #fff; }

.top-btn__ring{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.top-btn__ring circle{
  fill: none;
  stroke-width: 3;
  stroke: rgba(27, 42, 23, .1);
}
.top-btn__ring #topRing{
  stroke: var(--apple-red);
  stroke-linecap: round;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
  transition: stroke-dashoffset .12s linear;
}
.top-btn__arrow{ width: 21px; height: 21px; }

/* ══════════════════════ 20b. BLOG ══════════════════════ */
/* -- listing page header -- */
.page-hero{
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem)) clamp(2rem, 1rem + 3vw, 3.5rem);
  background:
    radial-gradient(700px 360px at 85% 0%, rgba(139, 195, 74, .22), transparent 65%),
    radial-gradient(600px 320px at 5% 100%, rgba(201, 165, 76, .16), transparent 60%),
    var(--cream);
  text-align: center;
}
.page-hero .s-head{ margin-block-end: 0; }

.blog{ padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--sp-section); }

/* category tabs — same pill bar as products, but the active tab paints itself */
.b-tabs .p-tab.is-active{
  background: linear-gradient(135deg, var(--leaf-green), var(--leaf-green-dark));
  box-shadow: 0 6px 16px rgba(30, 107, 20, .28);
}
.b-count{ margin-block-end: 1.25rem; color: var(--ink-45); font-size: var(--fs-sm); }

/* -- post cards -- */
.b-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.b-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.b-card:hover{ transform: translateY(-6px); box-shadow: var(--sh-lg); }
.b-card[hidden]{ display: none; }
.b-card__media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-2);
}
.b-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.b-card:hover .b-card__media img{ transform: scale(1.06); }
.b-card__body{
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .65rem;
  padding: 1.3rem 1.4rem 1.5rem;
}
.b-card__title{
  margin: 0;
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  line-height: 1.55;
  color: var(--ink);
}
/* the whole card is clickable through the title link */
.b-card__title a{ color: inherit; text-decoration: none; }
.b-card__title a::after{ content: ""; position: absolute; inset: 0; z-index: 1; }
.b-card__title a:focus-visible{ outline: none; }
.b-card:has(.b-card__title a:focus-visible){ outline: 3px solid var(--leaf-green); outline-offset: 3px; }
.b-card__excerpt{ flex: 1; margin: 0; color: var(--ink-60); font-size: var(--fs-sm); line-height: 1.85; }
.b-card__more{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--apple-red);
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.b-card__more svg{ width: 16px; height: 16px; transition: translate .3s var(--ease); }
.b-card:hover .b-card__more svg{ translate: -4px 0; }

/* category chip + meta line (cards and article header) */
.b-chip{
  position: absolute;
  inset-block-start: .9rem;
  inset-inline-start: .9rem;
  z-index: 1;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--leaf-green-dark);
  font-family: var(--f-head);
  font-size: .78rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.b-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .9rem;
  margin: 0;
  color: var(--ink-45);
  font-size: .82rem;
}
.b-meta span{ display: inline-flex; align-items: center; gap: .3rem; }
.b-meta svg{ width: 15px; height: 15px; }

/* featured (latest) post */
.b-card--featured{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  margin-block-end: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.b-card--featured .b-card__media{ aspect-ratio: auto; min-height: 320px; }
.b-card--featured .b-card__body{ justify-content: center; gap: .9rem; padding: clamp(1.5rem, 1rem + 2vw, 2.8rem); }
.b-card--featured .b-card__title{ font-size: var(--fs-h2); line-height: 1.45; }
.b-card--featured .b-card__excerpt{ flex: none; font-size: var(--fs-body); }
.b-card__flag{
  align-self: flex-start;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: rgba(227, 20, 27, .1);
  color: var(--apple-red);
  font-family: var(--f-head);
  font-size: .78rem;
  font-weight: 700;
}

.b-empty{ padding: 3rem 1rem; color: var(--ink-60); text-align: center; }
.b-empty[hidden]{ display: none; }

/* -- article page -- */
.post-head{
  padding-block: calc(var(--nav-h) + clamp(2rem, 1.2rem + 3vw, 3.75rem)) clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background:
    radial-gradient(700px 340px at 85% 0%, rgba(139, 195, 74, .2), transparent 65%),
    var(--cream);
}
.post-head__inner{ max-width: 860px; }
.crumbs ol{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  color: var(--ink-45);
  font-size: .85rem;
}
.crumbs li + li::before{ content: "‹"; margin-inline-end: .4rem; }
.crumbs a{ color: var(--leaf-green-dark); text-decoration: none; }
.crumbs a:hover{ text-decoration: underline; }
.crumbs [aria-current]{ color: var(--ink-60); }

.post-head .b-chip{ position: static; display: inline-block; background: rgba(58, 154, 36, .12); }
.post-title{
  margin: .9rem 0 1rem;
  font-family: var(--f-head);
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.6rem);
  line-height: 1.4;
  color: var(--leaf-green-dark);
}
.post-lead{
  margin: 0 0 1.25rem;
  color: var(--ink-60);
  font-size: calc(var(--fs-body) + .1rem);
  line-height: 1.9;
}

.post-cover{ max-width: var(--wrap); margin: 0 auto; }
.post-cover img{
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-lg);
}

.post-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 1.4rem + 2vw, 3.5rem) var(--sp-section);
}
.post-aside{
  position: sticky;
  inset-block-start: calc(var(--nav-h) + 1.25rem);
  display: grid;
  gap: 1.25rem;
}

/* table of contents */
.toc{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--sh-sm);
}
.toc summary{
  padding: 1rem 1.2rem;
  color: var(--leaf-green-dark);
  font-family: var(--f-head);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.toc summary::-webkit-details-marker{ display: none; }
.toc summary::after{ content: "▾"; float: inline-end; color: var(--ink-45); transition: rotate .3s var(--ease); }
.toc:not([open]) summary::after{ rotate: 90deg; }
.toc ol{
  margin: 0;
  padding: 0 1.2rem 1.1rem;
  list-style: none;
  counter-reset: toc;
}
.toc li{ counter-increment: toc; }
.toc a{
  display: flex;
  gap: .55rem;
  padding: .45rem .6rem;
  border-inline-start: 2px solid var(--line);
  color: var(--ink-60);
  font-size: .88rem;
  line-height: 1.6;
  text-decoration: none;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.toc a::before{ content: counter(toc) "."; color: var(--ink-45); }
.toc a:hover{ color: var(--leaf-green-dark); }
.toc a.is-active{
  border-color: var(--leaf-green);
  background: rgba(58, 154, 36, .07);
  color: var(--leaf-green-dark);
  font-weight: 600;
}

/* share */
.share{
  padding: 1rem 1.2rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.share h2{ margin: 0 0 .75rem; color: var(--ink); font-family: var(--f-head); font-size: .95rem; }
.share__row{ display: flex; flex-wrap: wrap; gap: .5rem; }
.share__btn{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  color: var(--leaf-green-dark);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.share__btn svg{ width: 19px; height: 19px; }
.share__btn:hover{ background: var(--leaf-green); color: #fff; transform: translateY(-2px); }
.share__btn:focus-visible{ outline: 3px solid var(--leaf-green); outline-offset: 2px; }

/* article typography */
.prose{
  max-width: 72ch;
  color: var(--ink);
  font-size: calc(var(--fs-body) + .06rem);
  line-height: 2;
}
.prose > * + *{ margin-block-start: 1.15em; }
.prose h2{
  margin-block-start: 2.2em;
  color: var(--leaf-green-dark);
  font-family: var(--f-head);
  font-size: var(--fs-h2);
  line-height: 1.45;
  scroll-margin-top: calc(var(--nav-h) + 1.25rem);
}
.prose h3{
  margin-block-start: 1.7em;
  color: var(--ink);
  font-family: var(--f-head);
  font-size: calc(var(--fs-h3) + .1rem);
}
.prose p{ margin-block-end: 0; }
.prose a{ color: var(--apple-red); font-weight: 600; text-underline-offset: 3px; }
.prose strong{ color: var(--leaf-green-dark); }
.prose ul, .prose ol{ padding-inline-start: 1.4rem; }
.prose li + li{ margin-block-start: .45em; }
.prose li::marker{ color: var(--leaf-green); font-weight: 700; }

.callout{
  padding: 1.1rem 1.3rem;
  border-inline-start: 4px solid var(--leaf-green);
  border-radius: var(--radius-sm);
  background: rgba(58, 154, 36, .07);
  font-size: .97em;
  line-height: 1.9;
}
.callout > strong:first-child{ display: block; margin-block-end: .25rem; font-family: var(--f-head); }
.callout--warn{ border-color: var(--apple-red); background: rgba(227, 20, 27, .06); }
.callout--warn > strong:first-child{ color: var(--apple-red-dark); }

.table-wrap{
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--sh-sm);
}
.table-wrap table{ width: 100%; min-width: 520px; border-collapse: collapse; font-size: .92em; line-height: 1.7; }
.table-wrap th, .table-wrap td{ padding: .8rem 1rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
.table-wrap th{ background: var(--leaf-green-dark); color: #fff; font-family: var(--f-head); font-weight: 600; white-space: nowrap; }
.table-wrap tr:last-child td{ border-block-end: 0; }
.table-wrap tbody tr:nth-child(even){ background: var(--cream); }

/* FAQ inside an article */
.post-faq{ display: grid; gap: .7rem; }
.post-faq details{
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.post-faq summary{
  padding: .95rem 1.2rem;
  font-family: var(--f-head);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.post-faq summary::-webkit-details-marker{ display: none; }
.post-faq summary::before{ content: "+"; display: inline-block; width: 1.3rem; color: var(--leaf-green); font-weight: 700; }
.post-faq details[open] summary::before{ content: "−"; }
.post-faq details p{ margin: 0; padding: 0 1.2rem 1.1rem; color: var(--ink-60); }

.post-note{ color: var(--ink-45); font-size: .85em; line-height: 1.8; }

/* order CTA inside the article */
.post-cta{
  display: grid;
  gap: .9rem;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(420px 220px at 90% 0%, rgba(139, 195, 74, .3), transparent 65%),
    linear-gradient(150deg, var(--leaf-green-dark), #13500d);
  color: rgba(255, 255, 255, .85);
  line-height: 1.85;
}
.prose .post-cta h2{ margin: 0; color: #fff; font-size: var(--fs-h3); }
.post-cta p{ margin: 0; }
.post-cta__btns{ display: flex; flex-wrap: wrap; gap: .6rem; }
.prose .post-cta a{ color: #fff; text-decoration: none; }

/* related posts */
.related{ padding-block: 0 var(--sp-section); }
.related .s-head{ margin-block-end: 1.75rem; }

/* homepage "from the blog" teaser */
.blog-teaser{ background: var(--cream-2); }
.blog-teaser__more{ margin-block-start: 2rem; text-align: center; }

@media (max-width: 1024px){
  .post-layout{ grid-template-columns: minmax(0, 1fr); }
  .post-aside{ position: static; order: -1; }
  .post-aside .share{ display: none; }      /* repeated after the article instead */
  .prose{ max-width: none; }
  .b-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px){
  .share--end{ display: none; }
}
@media (max-width: 768px){
  .b-card--featured{ grid-template-columns: 1fr; }
  .b-card--featured .b-card__media{ min-height: 0; aspect-ratio: 16 / 10; }
  .post-cover img{ aspect-ratio: 16 / 10; border-radius: var(--radius); }
}
@media (max-width: 600px){
  .b-grid{ grid-template-columns: 1fr; }
}

/* ══════════════════════ 21. SCROLLBAR, FOCUS, MOTION ══════════════════════ */
::selection{ background: var(--leaf-green); color: #fff; }

/* Custom scrollbar — brand colours */
html{ scrollbar-color: var(--leaf-green) var(--cream-2); scrollbar-width: thin; }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: var(--cream-2); }
::-webkit-scrollbar-thumb{
  border: 3px solid var(--cream-2);
  border-radius: 999px;
  background: linear-gradient(var(--leaf-green), var(--leaf-green-dark));
}
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(var(--apple-red), var(--apple-red-dark)); }

/* Visible, consistent focus ring everywhere */
:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero :focus-visible,
.why :focus-visible,
.contact :focus-visible,
.footer :focus-visible,
.drawer__head :focus-visible{ outline-color: #fff; }

/* ══════════════════════ RESPONSIVE ══════════════════════ */

/* ≥1440px — wider rhythm */
@media (min-width: 1440px){
  :root{ --wrap: 1320px; }
}

/* ≤1024px — tablets */
@media (max-width: 1024px){
  .hero__inner{ grid-template-columns: 1.2fr .8fr; }
  .hero__title{ font-size: clamp(2.4rem, 1.4rem + 4.6vw, 3.6rem); }
  .delivery__inner{ grid-template-columns: 1fr; }
  .delivery__map{ order: -1; max-width: 420px; margin-inline: auto; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .footer__brand{ grid-column: 1 / -1; }
  .modal__box{ grid-template-columns: 1fr; max-height: 92svh; }
  .modal__media{ aspect-ratio: 16 / 9; }
  .modal__media img{ aspect-ratio: 16 / 9; }
}

/* ≤900px — mobile nav kicks in */
@media (max-width: 900px){
  .burger{ display: block; }
  .nav__cta{ display: none; }
  .nav__cta-mobile{ display: inline-flex; margin-block-start: 1rem; }

  .nav__links{
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    padding: var(--nav-h) 1.5rem 2rem;
    background: linear-gradient(165deg, var(--leaf-green-dark), #1a5c10 60%, var(--leaf-green));
    clip-path: circle(0% at 100% 0%);
    transition: clip-path .7s var(--ease-out);
    pointer-events: none;
    overflow-y: auto;
  }
  .nav__links.is-open{ clip-path: circle(150% at 100% 0%); pointer-events: auto; }

  .nav__links .nav__link{
    padding: .75rem .5rem;
    color: #fff;
    font-size: 1.2rem;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s var(--ease);
  }
  .nav__links.is-open .nav__link{
    opacity: 1;
    transform: none;
    transition-delay: calc(.12s + var(--i, 0) * .06s);
  }
  .nav__links .nav__link::after{ inset-inline: .5rem; background: var(--leaf-green-light); }

  .nav__links .nav__cta-mobile{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s var(--ease-out) .55s, transform .5s var(--ease-out) .55s;
  }
  .nav__links.is-open .nav__cta-mobile{ opacity: 1; transform: none; }

  /* keep the mobile-menu burger legible over the green sheet */
  .nav.is-menu-open .burger{ border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); }
  .nav.is-menu-open .burger span{ background: #fff; }
  .nav.is-menu-open .nav__brand-text strong{ color: #fff; }
  .nav.is-menu-open .nav__brand-text small{ color: rgba(255, 255, 255, .78); }

  /* full-screen sheet: logo + close button stay on top of it, the frosted
     bar and its shadow step aside, and the floating buttons get out of the way */
  .nav__links{ height: 100vh; height: 100dvh; }
  /* white links on the green sheet, also after scrolling (beats .nav.is-stuck .nav__link) */
  .nav .nav__links .nav__link,
  .nav.is-stuck .nav__links .nav__link{ color: #fff; }
  .nav .nav__links .nav__link.is-active,
  .nav.is-stuck .nav__links .nav__link.is-active,
  .nav.is-stuck .nav__links .nav__link:hover{ color: var(--leaf-green-light); }
  .nav__brand, .nav__actions{ position: relative; z-index: 2; }
  .nav.is-menu-open::before{ opacity: 0; }
  .nav.is-menu-open{ border-block-end-color: transparent; box-shadow: none; }
  .nav.is-menu-open .logo-img,
  .nav.is-menu-open .logo-mark{ filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25)); }
  body.menu-open .wa-fab,
  body.menu-open .order-fab,
  body.menu-open .top-btn{ opacity: 0; visibility: hidden; pointer-events: none; }

  /* steps become a vertical timeline */
  .steps{ grid-template-columns: 1fr; gap: 1.6rem; }
  .steps__rail{
    inset-block: 25px 25px;
    inset-inline-start: 24px;
    inset-inline-end: auto;
    width: 3px;
    height: auto;
  }
  .steps__rail i{ transform-origin: top center; transform: scaleY(0); }
  .step{
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 0 1rem;
    text-align: start;
  }
  .step__dot{ grid-row: 1 / span 2; margin: 0; }
  .step h3{ align-self: center; }

  .cta-band{ flex-direction: column; align-items: flex-start; }
}

/* ≤768px — phones (landscape) & small tablets */
@media (max-width: 768px){
  :root{ --nav-h: 68px; }

  .hero{ min-height: auto; padding-block: calc(var(--nav-h) + 2rem) clamp(8rem, 20vh, 11rem); }
  .hero__inner{ grid-template-columns: 1fr; text-align: center; }
  .hero__text{ margin-inline: auto; }
  .hero__btns, .hero__chips{ justify-content: center; }
  .hero__visual{ order: -1; min-height: 0; width: min(76%, 300px); margin-inline: auto; }
  .hero__logo-float{ width: 76%; }
  .scroll-cue{ inset-block-end: clamp(3.5rem, 8vh, 5rem); }
  .scroll-cue__label{ display: none; }

  .p-toolbar{ flex-direction: column; align-items: stretch; }
  /* the toolbar is now a column, so `flex: 1 1 240px` would make the search
     box 240px TALL and strand its icon — size it by content instead */
  .p-search{ flex: none; max-width: none; }

  .s-head--start{ text-align: center; margin-inline: auto; }
  .delivery__text{ text-align: center; }
  .d-list li{ text-align: start; }

  .footer__grid{ grid-template-columns: 1fr; text-align: center; }
  .footer__brand p{ margin-inline: auto; }
  .footer__col h4{ display: inline-block; }
  .footer__contact li{ justify-content: center; }
  .footer__bottom{ justify-content: center; text-align: center; }

  .toasts{ inset-block-end: 6.5rem; }
  .order-fab__txt{ display: none; }
  .order-fab{ padding: .8rem; gap: .35rem; }
}

/* ≤480px — small phones down to 360px */
@media (max-width: 480px){
  :root{ --radius-lg: 22px; }

  .nav__brand-text small{ display: none; }

  .hero__chips{ gap: .4rem; }
  .hero__chips li{ font-size: .76rem; padding: .3rem .75rem; }

  .stats__grid{ grid-template-columns: 1fr 1fr; }

  .p-card__btns{ grid-template-columns: 1fr; }

  .spec__row{ grid-template-columns: 1fr; gap: .15rem; padding-block: .6rem; }

  .o-item{ grid-template-columns: 48px 1fr; }
  .o-item__img{ width: 48px; height: 48px; }
  .o-item__del{ grid-column: 2; justify-self: end; margin-block-start: -2.1rem; }

  .modal__btns .btn{ flex: 1 1 100%; }

  .top-btn{ inset-block-end: 4.9rem; width: 42px; height: 42px; }
  .top-btn__arrow{ width: 18px; height: 18px; }
  .wa-fab{ width: 52px; height: 52px; }
  .wa-fab svg{ width: 26px; height: 26px; }
}

/* ══════════════════════ REDUCED MOTION ══════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  /* scroll reveals (data-reveal, heading words, product cards) are exempt:
     they are brief, one-off entrances and the site owner wants them shown */
  *:not([data-reveal]):not(.rv-w):not(.p-card), *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-float]{ transform: none !important; }
  .preloader__word{ opacity: 1; }
  .logo-mark--draw .lm-ring,
  .logo-mark--draw .lm-soil{ stroke-dashoffset: 0; }
  .logo-mark--draw .lm-apple{ transform: none; }
  .logo-mark--draw .lm-stem,
  .logo-mark--draw .lm-leaf{ opacity: 1; }

  .hero__canvas{ display: none; }     /* heavy canvas animation off */
  .hero__logo-float,
  .hero__glow,
  .hero__ring{ animation: none; }
  .jo-dot__pulse,
  .jo-base__halo,
  .jo-routes path{ animation: none; }
  .wa-fab__ring{ display: none; }
  .scroll-cue__mouse i{ animation: none; }
  .type__caret{ animation: none; }
  .steps__rail i{ transform: none; }
}

/* ══════════════════════ PRINT ══════════════════════ */
@media print{
  .nav, .preloader, .scroll-progress, .wa-fab, .top-btn, .order-fab,
  .drawer, .modal, .toasts, .hero__canvas, .scroll-cue, .divider{ display: none !important; }
  body{ background: #fff; color: #000; }
  .hero, .why, .contact, .stats{ background: #fff !important; color: #000 !important; }
  .s-title, .s-head--light .s-title{ color: #000 !important; }
  [data-reveal]{ opacity: 1 !important; transform: none !important; }
}