/* =====================================================================
   Arwaan Rice — brand design system
   Colours sampled from the bag/logo: forest green, gold-bronze, cream.
   ===================================================================== */

:root{
  /* Greens */
  --green-900:#0e2a1a; --green-800:#143a26; --green-700:#1b4d32;
  --green:#1f5a37;     --green-600:#2a6b44; --green-500:#3a8159;
  /* Gold / bronze */
  --gold-800:#8a5f24; --gold-700:#9a6f2b; --gold:#b8863b;
  --gold-400:#c9a24e; --gold-200:#e7d3a1; --gold-100:#f1e4c4;
  /* Neutrals */
  --cream:#f4eedf; --cream-2:#ece3cf; --paper:#fbf9f3; --paper-2:#f7f2e7;
  --ink:#26271f; --ink-soft:#5c5b4e; --line:rgba(31,90,55,.14);
  --white:#ffffff;

  --radius:18px; --radius-sm:12px; --radius-lg:28px; --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(20,58,38,.08);
  --shadow:0 18px 50px -22px rgba(20,46,30,.45);
  --shadow-lg:0 40px 90px -30px rgba(14,42,26,.55);
  --shadow-gold:0 18px 50px -20px rgba(184,134,59,.5);

  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-head:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased; line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:600; line-height:1.08; margin:0; color:var(--green-800); letter-spacing:.2px}
p{margin:0 0 1rem}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px)}
.eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-700); display:inline-flex; align-items:center; gap:.55rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); border-radius:2px}
.section{padding:clamp(64px,9vw,120px) 0; position:relative}
.section-head{max-width:640px; margin:0 auto clamp(38px,5vw,64px); text-align:center}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.4rem); margin:.5rem 0 .8rem}
.section-head p{color:var(--ink-soft); font-size:1.05rem}
.text-gold{color:var(--gold-700)}
.text-green{color:var(--green)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--green); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.92rem 1.7rem; border-radius:var(--radius-pill); font-weight:700; font-size:.95rem;
  background:var(--bg); color:var(--fg); border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  box-shadow:var(--shadow-sm); letter-spacing:.01em; white-space:nowrap;
}
.btn:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.btn-primary{background:linear-gradient(135deg,var(--green-600),var(--green-800)); box-shadow:var(--shadow)}
.btn-gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-700)); color:#1c1405; box-shadow:var(--shadow-gold)}
.btn-ghost{background:transparent; color:var(--green-800); border-color:var(--line)}
.btn-ghost:hover{background:var(--paper); border-color:var(--green)}
.btn-lg{padding:1.05rem 2.1rem; font-size:1rem}
.btn-block{width:100%}

/* ---------- News ticker (flicker) ---------- */
.ticker{
  background:linear-gradient(90deg,var(--green-800),var(--green-700)); color:var(--gold-100);
  font-size:.85rem; overflow:hidden; position:relative; border-bottom:1px solid rgba(0,0,0,.15)
}
.ticker__label{
  position:absolute; left:0; top:0; bottom:0; z-index:2; display:flex; align-items:center; gap:.4rem;
  background:var(--gold); color:#241803; font-weight:800; padding:0 1rem; letter-spacing:.1em;
  text-transform:uppercase; font-size:.7rem;
}
.ticker__track{display:flex; gap:3rem; white-space:nowrap; padding:.5rem 0; animation:ticker 32s linear infinite; will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{display:inline-flex; align-items:center; gap:.6rem}
.ticker__item::before{content:"❖"; color:var(--gold-400); font-size:.7rem}
@keyframes ticker{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(244,238,223,.82);
  backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line);
  transition:box-shadow .3s, background .3s;
}
.site-header.scrolled{box-shadow:0 10px 30px -18px rgba(14,42,26,.4); background:rgba(247,242,231,.94)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.7rem}
.brand img{height:48px; width:auto}
.nav__links{display:flex; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0}
.nav__links a{padding:.55rem .9rem; border-radius:var(--radius-pill); font-weight:600; font-size:.93rem; color:var(--green-800); transition:background .2s,color .2s}
.nav__links a:hover{background:var(--paper); color:var(--green)}
.nav__cta{display:flex; align-items:center; gap:.6rem}
.nav__toggle{display:none; background:none; border:0; cursor:pointer; padding:.4rem; color:var(--green-800)}
.nav__toggle svg{width:28px; height:28px}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1100px 600px at 78% -10%, rgba(201,162,78,.22), transparent 60%),
  radial-gradient(900px 700px at 10% 110%, rgba(31,90,55,.14), transparent 55%),
  linear-gradient(180deg,var(--cream),var(--paper-2));
}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center;
  min-height:min(86vh,820px); padding:clamp(40px,6vw,90px) 0}
.hero__content{max-width:560px; position:relative; z-index:3}
.hero__title{font-size:clamp(2.8rem,6.4vw,5.1rem); margin:1rem 0 1.1rem; color:var(--green-900)}
.hero__title .accent{color:var(--gold-700); font-style:italic}
.hero__sub{font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--ink-soft); max-width:480px; margin-bottom:1.8rem}
.hero__actions{display:flex; gap:.9rem; flex-wrap:wrap}
.hero__trust{display:flex; gap:1.6rem; margin-top:2.2rem; flex-wrap:wrap}
.hero__trust div{display:flex; flex-direction:column}
.hero__trust b{font-family:var(--font-head); font-size:1.7rem; color:var(--green-700); line-height:1}
.hero__trust span{font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.12em; margin-top:.25rem}

/* Hero visual / 3D stage */
.hero__stage{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; min-height:480px}
.stage-glow{position:absolute; inset:6% 8%; background:radial-gradient(closest-side,rgba(201,162,78,.4),transparent 72%); filter:blur(20px); z-index:1}
.stage-ring{position:absolute; width:min(78%,440px); aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(31,90,55,.25); z-index:1; animation:spin 60s linear infinite}
.stage-ring.two{width:min(94%,540px); border-color:rgba(184,134,59,.25); animation-duration:90s; animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
#hero3d{position:relative; z-index:3; width:100%; height:560px; cursor:grab}
#hero3d:active{cursor:grabbing}
.hero__fallback{position:relative; z-index:3; width:min(86%,400px); filter:drop-shadow(0 40px 45px rgba(20,46,30,.42)); animation:floaty 6s ease-in-out infinite}
.hero__fallback img{border-radius:18px}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-16px) rotate(1deg)}}
.stage-badge{position:absolute; z-index:5; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.7rem 1rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:700; color:var(--green-800)}
.stage-badge .dot{width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(184,134,59,.2)}
.stage-badge.b1{top:8%; left:-2%; animation:floaty 7s ease-in-out infinite}
.stage-badge.b2{bottom:12%; right:-3%; animation:floaty 8s ease-in-out .6s infinite}
.scroll-cue{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:4; color:var(--green-700); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.4rem; opacity:.8}
.scroll-cue span{width:1px; height:34px; background:linear-gradient(var(--green-700),transparent); animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4); opacity:.3} 50%{transform:scaleY(1); opacity:1}}

/* drifting rice grains */
.grains{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.grain{position:absolute; width:7px; height:18px; border-radius:50%; background:linear-gradient(180deg,#fff,#eaddbf);
  box-shadow:0 1px 2px rgba(0,0,0,.12); opacity:.55; animation:drift linear infinite}
@keyframes drift{0%{transform:translateY(-10vh) rotate(0)} 100%{transform:translateY(110vh) rotate(220deg)}}

/* ---------- Quality cards ---------- */
.quality-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
.qcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.5rem;
  text-align:center; transition:transform .4s var(--ease),box-shadow .4s var(--ease); position:relative; overflow:hidden}
.qcard::after{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--green),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.qcard:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.qcard:hover::after{transform:scaleX(1)}
.qcard__icon{width:64px; height:64px; margin:0 auto 1.1rem; border-radius:50%;
  background:radial-gradient(closest-side,var(--gold-100),var(--cream)); display:grid; place-items:center; color:var(--green-700); border:1px solid var(--line)}
.qcard__icon svg{width:32px; height:32px}
.qcard h3{font-size:1.4rem; margin-bottom:.4rem}
.qcard p{font-size:.9rem; color:var(--ink-soft); margin:0}

/* ---------- Feature / product band ---------- */
.feature{background:linear-gradient(180deg,var(--paper-2),var(--cream))}
.feature__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.feature__media{position:relative}
.feature__media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-lg)}
.price-chip{position:absolute; right:-12px; bottom:24px; background:var(--green-800); color:#fff; padding:1rem 1.3rem; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center}
.price-chip small{display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-200); margin-bottom:.2rem}
.price-chip b{font-family:var(--font-head); font-size:1.9rem}
.feature h2{font-size:clamp(2rem,4vw,3rem); margin-bottom:1rem}
.spec-list{list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:.7rem}
.spec-list li{display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-soft)}
.spec-list svg{width:22px; height:22px; color:var(--green); flex:none; margin-top:2px}
.variant-row{display:flex; gap:.6rem; flex-wrap:wrap; margin:1.4rem 0}
.variant-chip{border:1px solid var(--line); background:var(--paper); border-radius:var(--radius-pill); padding:.55rem 1.1rem; font-weight:700; color:var(--green-800); font-size:.9rem; display:inline-flex; gap:.5rem; align-items:center}
.variant-chip small{color:var(--gold-700); font-weight:700}

/* ---------- Rice showcase ---------- */
.rice{background:
  radial-gradient(700px 400px at 90% 10%,rgba(201,162,78,.18),transparent 60%),
  linear-gradient(180deg,var(--green-900),var(--green-800)); color:#f3ecdb}
.rice h2,.rice h3{color:#fff}
.rice .eyebrow{color:var(--gold-200)}
.rice__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.rice__media{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; aspect-ratio:4/3; background:#2a3a2c}
.rice__media img{width:100%; height:100%; object-fit:cover}
.rice p{color:rgba(243,236,219,.82)}
.rice__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.8rem}
.rice__stats div{background:rgba(255,255,255,.06); border:1px solid rgba(231,211,161,.2); border-radius:var(--radius); padding:1.1rem; text-align:center}
.rice__stats b{font-family:var(--font-head); font-size:1.8rem; color:var(--gold-200); display:block}
.rice__stats span{font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(243,236,219,.7)}
/* placeholder grain art when no rice photo uploaded */
.grain-art{position:absolute; inset:0; background:
  radial-gradient(circle at 30% 40%,rgba(255,255,255,.9),transparent 6%),
  radial-gradient(circle at 60% 65%,rgba(255,255,255,.85),transparent 5%),
  radial-gradient(circle at 75% 30%,rgba(255,255,255,.8),transparent 5%),
  radial-gradient(closest-side,#3c5a3f,#22381f)}
.grain-art::after{content:"Add a photo of the rice in admin"; position:absolute; inset:auto 0 14px; text-align:center; font-size:.72rem; color:rgba(255,255,255,.55); letter-spacing:.08em}

/* ---------- Nutrition table ---------- */
.nutri{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; margin-top:1rem}
.nutri div{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8rem 1rem; display:flex; justify-content:space-between; gap:.5rem}
.nutri b{color:var(--green-800)} .nutri span{color:var(--gold-700); font-weight:700}

/* ---------- Reviews ---------- */
.reviews{background:linear-gradient(180deg,var(--cream),var(--paper-2))}
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.review{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); position:relative}
.review .quote{position:absolute; top:-14px; left:22px; font-family:var(--font-head); font-size:4rem; color:var(--gold-200); line-height:1}
.review .rstars{color:var(--gold); letter-spacing:2px; margin-bottom:.7rem}
.review p{font-size:.98rem; color:var(--ink); margin-bottom:1.2rem}
.review .who{display:flex; align-items:center; gap:.7rem}
.review .ava{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--green-600),var(--green-800)); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--font-head)}
.review .who b{display:block; color:var(--green-800)} .review .who span{font-size:.82rem; color:var(--ink-soft)}
.rating-summary{display:inline-flex; align-items:center; gap:.7rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-pill); padding:.5rem 1.2rem; margin-top:1rem; box-shadow:var(--shadow-sm)}
.rating-summary .big{font-family:var(--font-head); font-size:1.5rem; color:var(--green-800)}
.rating-summary .rstars{color:var(--gold)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--green-700),var(--green-900)); color:#fff; border-radius:var(--radius-lg); padding:clamp(2.4rem,5vw,4rem); text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg)}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 80% 0,rgba(201,162,78,.3),transparent 60%)}
.cta-band > *{position:relative}
.cta-band h2{color:#fff; font-size:clamp(2rem,4vw,3rem); margin-bottom:.6rem}
.cta-band p{color:rgba(255,255,255,.85); max-width:520px; margin:0 auto 1.6rem}
.cta-band .pay-note{margin-top:1.2rem; font-size:.85rem; color:rgba(255,255,255,.7)}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900); color:rgba(243,236,219,.78); padding:clamp(48px,6vw,80px) 0 2rem; margin-top:0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem}
.site-footer h4{color:#fff; font-family:var(--font-body); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem}
.site-footer a{color:rgba(243,236,219,.78); transition:color .2s} .site-footer a:hover{color:var(--gold-200)}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem; font-size:.92rem}
.footer-brand img{height:62px; margin-bottom:1rem; filter:brightness(0) invert(1) sepia(.3)}
.footer-brand p{font-size:.92rem; max-width:280px}
.footer-contact li{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem}
.footer-contact svg{width:18px; height:18px; color:var(--gold-400); flex:none; margin-top:3px}
.social{display:flex; gap:.6rem; margin-top:1rem}
.social a{width:40px; height:40px; border-radius:50%; border:1px solid rgba(231,211,161,.25); display:grid; place-items:center}
.social a:hover{background:var(--gold); color:#1c1405; border-color:var(--gold)}
.social svg{width:18px; height:18px}
.footer-bottom{border-top:1px solid rgba(231,211,161,.15); margin-top:2.5rem; padding-top:1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.84rem; color:rgba(243,236,219,.6)}

/* ---------- WhatsApp popup ---------- */
.wa-fab{position:fixed; right:22px; bottom:22px; z-index:80}
.wa-btn{width:60px; height:60px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; box-shadow:0 14px 34px -8px rgba(37,211,102,.6); cursor:pointer; border:0; transition:transform .3s}
.wa-btn:hover{transform:scale(1.07)}
.wa-btn svg{width:32px; height:32px}
.wa-btn::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:wapulse 2.4s infinite}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)} 70%{box-shadow:0 0 0 18px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-card{position:absolute; right:0; bottom:74px; width:300px; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; transform:translateY(14px) scale(.96); opacity:0; pointer-events:none; transition:.3s var(--ease)}
.wa-fab.open .wa-card{transform:translateY(0) scale(1); opacity:1; pointer-events:auto}
.wa-card__top{background:#075e54; color:#fff; padding:1rem 1.1rem; display:flex; gap:.7rem; align-items:center}
.wa-card__top .ava{width:42px; height:42px; border-radius:50%; background:#25d366; display:grid; place-items:center}
.wa-card__top b{display:block} .wa-card__top span{font-size:.78rem; color:rgba(255,255,255,.8)}
.wa-card__body{padding:1.1rem; font-size:.9rem; color:var(--ink-soft)}
.wa-card__body .bubble{background:#fff; border:1px solid var(--line); border-radius:0 12px 12px 12px; padding:.7rem .9rem; margin-bottom:1rem}
.wa-card__body .btn{width:100%}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr; text-align:center}
  .hero__content{margin:0 auto}
  .hero__actions,.hero__trust{justify-content:center}
  .hero__stage{order:-1; min-height:380px}
  #hero3d{height:420px}
  .feature__grid,.rice__grid{grid-template-columns:1fr}
  .quality-grid{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav__links{position:fixed; inset:64px 0 auto 0; flex-direction:column; background:var(--paper); padding:1rem; gap:.2rem; box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .35s var(--ease); border-bottom:1px solid var(--line)}
  .nav__links.open{transform:none}
  .nav__links a{display:block; padding:.9rem}
  .nav__toggle{display:block}
  .nav__cta .btn-ghost{display:none}
}
@media (max-width:560px){
  .quality-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .rice__stats{grid-template-columns:1fr 1fr}
  .price-chip{right:8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* =====================================================================
   Product page + order flow + simple page layouts
   ===================================================================== */
.page-hero{background:linear-gradient(180deg,var(--paper-2),var(--cream)); padding:clamp(40px,6vw,72px) 0 0; position:relative}
.breadcrumb{font-size:.85rem; color:var(--ink-soft); margin-bottom:1rem; display:flex; gap:.5rem; align-items:center}
.breadcrumb a:hover{color:var(--green)}

.product__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; padding-bottom:clamp(48px,7vw,90px)}
.gallery{position:sticky; top:90px}
.gallery__main{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--paper); aspect-ratio:3/4}
.gallery__main img{width:100%; height:100%; object-fit:cover}
.gallery__thumbs{display:flex; gap:.7rem; margin-top:.9rem}
.gallery__thumbs button{border:2px solid transparent; border-radius:var(--radius-sm); overflow:hidden; padding:0; cursor:pointer; background:none; width:84px; height:84px; box-shadow:var(--shadow-sm)}
.gallery__thumbs button.active{border-color:var(--gold)}
.gallery__thumbs img{width:100%; height:100%; object-fit:cover}

.product__title{font-size:clamp(2.1rem,4.4vw,3.2rem); margin:.4rem 0 .6rem}
.product__price{display:flex; align-items:baseline; gap:.6rem; margin:.4rem 0 1rem}
.product__price .now{font-family:var(--font-head); font-size:2.4rem; color:var(--green-800)}
.product__price .unit{color:var(--ink-soft); font-size:.95rem}
.badge-row{display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 1.2rem}
.badge{display:inline-flex; align-items:center; gap:.4rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-pill); padding:.35rem .85rem; font-size:.8rem; font-weight:700; color:var(--green-800)}
.badge svg{width:15px;height:15px;color:var(--gold-700)}
.divider{height:1px; background:var(--line); margin:1.4rem 0}

.field{margin-bottom:1rem}
.field label{display:block; font-weight:700; font-size:.86rem; color:var(--green-800); margin-bottom:.4rem}
.field .req{color:#b3402e}
.input,.select,textarea.input{width:100%; padding:.8rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; background:var(--paper); color:var(--ink); transition:border .2s, box-shadow .2s}
.input:focus,.select:focus,textarea.input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(31,90,55,.12)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; background:var(--paper)}
.qty button{width:42px; height:44px; border:0; background:none; font-size:1.2rem; cursor:pointer; color:var(--green-800)}
.qty input{width:54px; text-align:center; border:0; background:none; font:inherit; font-weight:700}

.variant-picker{display:flex; gap:.7rem; flex-wrap:wrap; margin:.4rem 0 1rem}
.variant-opt{position:relative}
.variant-opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.variant-opt label{display:flex; flex-direction:column; gap:.1rem; border:1.5px solid var(--line); border-radius:var(--radius); padding:.7rem 1.1rem; cursor:pointer; background:var(--paper); transition:.2s; min-width:96px}
.variant-opt input:checked + label{border-color:var(--green); box-shadow:0 0 0 3px rgba(31,90,55,.12); background:#fff}
.variant-opt label b{color:var(--green-800)} .variant-opt label small{color:var(--gold-700); font-weight:700}
.variant-opt.soldout label{opacity:.45}

.pay-options{display:grid; gap:.7rem; margin:.4rem 0 1rem}
.pay-opt{border:1.5px solid var(--line); border-radius:var(--radius); padding:.9rem 1.1rem; cursor:pointer; display:flex; gap:.7rem; align-items:flex-start; background:var(--paper); transition:.2s}
.pay-opt input{margin-top:.25rem}
.pay-opt.sel{border-color:var(--green); box-shadow:0 0 0 3px rgba(31,90,55,.1)}
.pay-opt b{display:block; color:var(--green-800)} .pay-opt span{font-size:.86rem; color:var(--ink-soft)}
.bank-box{background:var(--paper-2); border:1px dashed var(--gold); border-radius:var(--radius-sm); padding:1rem 1.1rem; margin-top:.6rem; font-size:.9rem}
.bank-box h4{font-family:var(--font-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-700); margin-bottom:.5rem}
.bank-box .acc{display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; border-bottom:1px dashed var(--line)}
.bank-box .acc:last-child{border:0}

.order-summary{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; margin:1.2rem 0; box-shadow:var(--shadow-sm)}
.order-summary .row{display:flex; justify-content:space-between; padding:.35rem 0; color:var(--ink-soft)}
.order-summary .row.total{border-top:1px solid var(--line); margin-top:.4rem; padding-top:.7rem; font-size:1.2rem; color:var(--green-800); font-weight:800}
.order-summary .row.total b{font-family:var(--font-head)}

.order-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow)}
.alert{padding:.9rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.92rem}
.alert-error{background:#fcecea; border:1px solid #f1c5bd; color:#9a3526}
.alert-ok{background:#eaf3ec; border:1px solid #bcd9c4; color:#235c39}

.nutri-table{width:100%; border-collapse:collapse; margin-top:.6rem}
.nutri-table td{padding:.55rem .2rem; border-bottom:1px solid var(--line); font-size:.92rem}
.nutri-table td:last-child{text-align:right; font-weight:700; color:var(--green-800)}

/* simple content pages */
.prose{max-width:780px; margin:0 auto; font-size:1.04rem; color:var(--ink)}
.prose h2,.prose h3{margin:1.6rem 0 .6rem; color:var(--green-800)}
.prose h3{font-family:var(--font-body); font-weight:800; font-size:1.05rem}
.prose p{color:var(--ink-soft)}
.prose ul{color:var(--ink-soft); padding-left:1.2rem}

.thankyou{max-width:640px; margin:0 auto; text-align:center}
.thankyou .check{width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,var(--green-500),var(--green-800)); display:grid; place-items:center; margin:0 auto 1.4rem; color:#fff; box-shadow:var(--shadow)}
.thankyou .check svg{width:44px;height:44px}
.order-ref{display:inline-block; background:var(--paper); border:1px dashed var(--gold); border-radius:var(--radius-pill); padding:.5rem 1.4rem; font-weight:800; color:var(--green-800); letter-spacing:.05em; margin:.6rem 0 1.4rem}

@media (max-width:880px){
  .product__grid{grid-template-columns:1fr}
  .gallery{position:static}
  .field-row{grid-template-columns:1fr}
}