:root{
  --green-100:#EFF3E6; --green-200:#E3EAD5; --green-600:#557C2F; --green-700:#46682A;
  --green-800:#2D4B23; --green-900:#1E3A1B;
  --bg-base:#FCFCFA; --ink-600:#5B615A;
  --focus-ring:#557C2F;
  --grad-hero-title:linear-gradient(180deg,#7A9C45 0%,#5B8433 45%,#3A5E26 100%);
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
}

html{ scroll-behavior:smooth; }
body{ font-family:'IBM Plex Sans Thai','Prompt',system-ui,sans-serif; }
h1,h2,h3,.font-display{ font-family:'Kanit','Anuphan','IBM Plex Sans Thai',sans-serif; }
::selection{ background:var(--green-200); color:var(--green-900); }
.tnum{ font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; }
/* [hidden] must beat Tailwind display utilities (e.g. the grid-laid cart badge) */
[hidden]{ display:none !important; }

/* Visible focus on every interactive element (DESIGN.md §12) */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:2px;
}

/* ── Nav link: underline is driven by aria-current, so the active
      state is never carried by color alone (DESIGN.md §12) ────── */
.nav-link{
  position:relative; padding:.5rem 0; font-size:15px; font-weight:500;
  color:#2B3329; transition:color .12s ease;
}
.nav-link::after{
  content:''; position:absolute; inset-inline:0; bottom:-2px; height:2px;
  border-radius:999px; background:var(--green-600);
  opacity:0; transition:opacity .12s ease;
}
.nav-link:hover{ color:var(--green-700); }
.nav-link[aria-current="page"]{ color:var(--green-700); }
.nav-link[aria-current="page"]::after{ opacity:1; }

/* ── Mobile tab bar: weight AND opacity both shift on active ─── */
.tab-link{ color:rgba(255,255,255,.6); }
.tab-link[aria-current="page"]{ color:#fff; }
.tab-link[aria-current="page"] span{ font-weight:600; }

/* ── Hero ─────────────────────────────────────────────── */
.hero-title{
  background:var(--grad-hero-title);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* text-shadow:0 2px 14px rgba(252,252,250,.6);*/
}
.hero__layer{ position:absolute; max-width:none; will-change:transform; }
.hero__bg{ inset:-4%; width:108%; height:108%; object-fit:cover; object-position:50% 55%; }
.hero__obj{ right:-14%; bottom:0; height:60%; width:auto; max-width:none; }
.hero__fg{ left:-4%; bottom:-3%; width:112%; height:auto; }
.hero__wash{
  background:
    radial-gradient(58% 62% at 34% 44%, rgba(252,252,250,.95) 0%, rgba(252,252,250,.78) 40%,
                    rgba(252,252,250,.22) 68%, rgba(252,252,250,0) 84%),
    linear-gradient(180deg, rgba(252,252,250,.92) 0%, rgba(252,252,250,0) 20%);
}
@media (min-width:1024px){
  .hero__obj{ right:-2%; height:104%; }
  .hero__wash{
    background:
      radial-gradient(46% 68% at 30% 46%, rgba(252,252,250,.94) 0%, rgba(252,252,250,.74) 42%,
                      rgba(252,252,250,.20) 70%, rgba(252,252,250,0) 86%),
      linear-gradient(180deg, rgba(252,252,250,.9) 0%, rgba(252,252,250,0) 16%);
  }
}

/* ── Organic curved edge on the "ทำไมต้องเลือกเรา" photo panel (DESIGN.md §9) ── */
.curve-left{ border-radius:64px 0 0 64px / 50% 0 0 50%; }

/* ── Soft cut-out for the vegetable-basket photo ───────── */
.veggie-bleed{
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.35) 82%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.35) 82%,transparent 100%);
}

/* ── Newsletter: dark card on mobile, sage panel on desktop.
      Message colours flip with it so both stay AA. ──────────── */
.nl-msg.is-error{ color:#FFC9BE; }   /* 6.6:1 on green-800 */
.nl-msg.is-ok{    color:#E3EAD5; }   /* 7.9:1 on green-800 */
@media (min-width:1024px){
  .nl-msg.is-error{ color:#C0432F; }
  .nl-msg.is-ok{    color:#46682A; }
}
@media (max-width:1023px){
  #newsletter-panel :focus-visible{ outline-color:#fff; }
  #newsletter-panel .leaf-glyph path:first-child{ fill:#CBDCB2; }
  #newsletter-panel .leaf-glyph path:last-child{ stroke:#2D4B23; }
}

/* ── Scroll reveal ────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(16px);
  transition:opacity .42s var(--ease-out-soft), transform .42s var(--ease-out-soft); }
.reveal.is-in{ opacity:1; transform:none; }

/* ── Chip strip ───────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* ── Off-canvas drawer (mobile nav + cart) ───────────────── */
.drawer{ transform:translateX(100%); transition:transform .32s var(--ease-out-soft); }
.drawer.is-open{ transform:none; }
.drawer-backdrop{ opacity:0; pointer-events:none; transition:opacity .32s ease; }
.drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }

/* ── Toast ────────────────────────────────────────────── */
.toast{ opacity:0; transform:translate(-50%,12px); pointer-events:none;
  transition:opacity .24s ease, transform .24s var(--ease-out-soft); }
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ── Cart item qty stepper ───────────────────────────────── */
.cart-qty-btn{ transition:background-color .12s ease; }

/* ── Checkout: selectable payment-method card ────────────── */
.pay-option__card{ transition:border-color .12s ease, background-color .12s ease; }
.pay-option input:checked + .pay-option__card{
  border-color:var(--green-600); background:var(--green-100);
}
.pay-option input:focus-visible + .pay-option__card{
  outline:3px solid var(--focus-ring); outline-offset:2px;
}
.pay-option__check{ opacity:0; transition:opacity .12s ease; }
.pay-option input:checked + .pay-option__card .pay-option__check{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__layer{ transform:none !important; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}