:root{
  --green-900:#2D5016;
  --green-700:#4A7C3B;
  --earth-600:#C9955C;
  --earth-500:#D4A574;
  --gold-500:#F4C430;
  --gold-600:#DAA520;
  --bg-0:#FFFEF2;
  --bg-1:#FAF9F6;
  --text-900:#1A1A1A;
  --text-700:#2C3E50;
  --muted:#617081;
  --success:#27AE60;
  --warning:#E67E22;
  --error:#E74C3C;

  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 8px 24px rgba(17,24,39,.10);
  --shadow-lg:0 18px 50px rgba(17,24,39,.16);
  --shadow-xl:0 28px 80px rgba(17,24,39,.20);
  --shadow-glow:0 0 0 6px rgba(244,196,48,.12),0 0 24px rgba(244,196,48,.35);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:24px;

  --t-fast:150ms ease;
  --t-base:300ms ease;
  --t-slow:520ms cubic-bezier(.2,.8,.2,1);

  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(74,124,59,.20), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(244,196,48,.16), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color:var(--text-900);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.center{text-align:center}
.h2{font-family:"Playfair Display", serif; font-weight:700; font-size:40px; letter-spacing:-.02em; margin:0 0 8px}
.h2--tight{margin-bottom:6px}
.h3{font-family:"Playfair Display", serif; font-weight:700; font-size:28px; margin:0 0 10px}
.sectionHead{padding:56px 0 18px}
.skip-link{
  position:absolute; left:-999px; top:10px;
  background:#fff; color:#000; padding:10px 14px; border-radius:10px;
}
.skip-link:focus{left:10px; z-index:9999; box-shadow:var(--shadow-lg)}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(45,80,22,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.65), var(--shadow-sm);
  font-weight:600;
  color:var(--green-900);
}
.pill--soft{
  color:var(--text-700);
  background:rgba(255,255,255,.55);
}

.btn{
  height:46px;
  padding:0 16px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.01em;
  transition:transform var(--t-base), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base), color var(--t-base);
  cursor:pointer;
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:linear-gradient(135deg, var(--green-900), var(--green-700));
  color:#fff;
  box-shadow:0 10px 26px rgba(45,80,22,.22);
}
.btn--primary:hover{box-shadow:0 14px 34px rgba(45,80,22,.28)}
.btn--glow:hover{box-shadow:0 14px 34px rgba(45,80,22,.24), var(--shadow-glow)}
.btn--secondary{
  background:linear-gradient(135deg, rgba(212,165,116,.32), rgba(244,196,48,.20));
  border-color:rgba(201,149,92,.28);
  color:var(--text-900);
  box-shadow:var(--shadow-sm);
}
.btn--secondary:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn--ghost{
  background:rgba(255,255,255,.55);
  border-color:rgba(44,62,80,.12);
  color:var(--text-900);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}
.linkBtn{
  background:transparent;
  border:0;
  padding:0;
  font-weight:700;
  color:var(--green-900);
  cursor:pointer;
}
.linkBtn:hover{text-decoration:underline}

.iconBtn{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
  box-shadow:var(--shadow-sm);
}
.iconBtn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); background:rgba(255,255,255,.72)}
.iconBtn svg{width:20px; height:20px}

/* Header / Nav */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
}
.nav{
  padding:14px 0;
  transition:background var(--t-base), box-shadow var(--t-base), backdrop-filter var(--t-base);
  background:rgba(255,255,255,.08);
}
.nav.is-solid{
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 40px rgba(17,24,39,.10);
  backdrop-filter:blur(14px);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand__mark{
  width:44px; height:44px;
  display:grid; place-items:center;
  color:var(--green-900);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(244,196,48,.22), rgba(74,124,59,.12));
  border:1px solid rgba(45,80,22,.12);
  box-shadow:var(--shadow-sm);
}
.brand__mark svg{width:22px; height:22px}
.brand__name{
  font-family:"Playfair Display", serif;
  font-weight:700;
  letter-spacing:-.02em;
  font-size:18px;
  line-height:1.1;
}
.brand__tag{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.nav__links{display:flex; align-items:center; gap:20px}
.nav__link{
  position:relative;
  font-weight:700;
  color:rgba(26,26,26,.90);
  padding:10px 4px;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:4px;
  height:2px;
  width:0;
  background:linear-gradient(90deg, var(--gold-500), var(--green-700));
  border-radius:999px;
  transition:width var(--t-slow);
}
.nav__link:hover::after,.nav__link.is-active::after{width:100%}
.nav__actions{display:flex; align-items:center; gap:10px}
.badge{
  position:absolute;
  right:-6px; top:-6px;
  min-width:22px; height:22px;
  display:grid; place-items:center;
  padding:0 6px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color:#1a1a1a;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 18px rgba(244,196,48,.30);
  transform-origin:center;
}
.cartBtn{position:relative}
.badge.is-bounce{animation:badgeBounce 520ms cubic-bezier(.2,.8,.2,1)}

.nav__toggle{display:none}
.nav__toggleLines{
  width:20px; height:2px; background:var(--text-900); border-radius:999px; position:relative;
}
.nav__toggleLines::before,.nav__toggleLines::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text-900); border-radius:999px;
}
.nav__toggleLines::before{top:-6px}
.nav__toggleLines::after{top:6px}

/* Search */
.search{position:relative}
.search__panel{
  position:absolute;
  top:52px;
  right:0;
  width:min(520px, calc(100vw - 40px));
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border:1px solid rgba(44,62,80,.12);
  box-shadow:var(--shadow-xl);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity var(--t-base), transform var(--t-base);
}
.search.is-open .search__panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.search__field{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 10px 12px;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  background:linear-gradient(180deg, rgba(250,249,246,.96), rgba(255,255,255,.92));
  box-shadow:var(--shadow-sm);
}
.search__field input{border:0; outline:none; background:transparent; width:100%}
.search__results{margin-top:10px; max-height:320px; overflow:auto}
.searchItem{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px;
  border-radius:14px;
  cursor:pointer;
  transition:background var(--t-fast), transform var(--t-fast);
}
.searchItem:hover{background:rgba(45,80,22,.06); transform:translateY(-1px)}
.searchItem__title{font-weight:800}
.searchItem__meta{font-size:12px; color:var(--muted)}
.searchItem__price{font-weight:900; color:var(--green-900)}
.highlight{background:rgba(244,196,48,.32); border-radius:6px; padding:0 4px}

/* Hero */
.hero{
  position:relative;
  min-height:calc(100vh - 86px);
  display:flex;
  align-items:stretch;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 30% 20%, rgba(244,196,48,.18), transparent 60%),
    radial-gradient(900px 520px at 78% 30%, rgba(74,124,59,.22), transparent 62%),
    linear-gradient(180deg, rgba(250,249,246,.40), rgba(255,255,255,.12));
}
.hero__bg::before{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:var(--hero-image, url("https://images.unsplash.com/photo-1604908177522-43220a8b3f19?auto=format&fit=crop&w=2000&q=70"));
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.02);
  transform:scale(1.04);
}
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,254,242,.92), rgba(255,254,242,.70) 35%, rgba(255,254,242,.22) 65%, rgba(255,254,242,.10)),
    radial-gradient(800px 420px at 20% 35%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(900px 420px at 70% 20%, rgba(244,196,48,.08), transparent 55%);
  backdrop-filter:blur(2px);
}
.hero__inner{
  position:relative;
  z-index:1;
  padding:86px 0 48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
}
.hero__content{max-width:620px}
.hero__kicker{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.hero__headlineTop{
  font-family:Poppins, Inter, system-ui;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(44,62,80,.82);
  margin-bottom:10px;
}
.hero__title{
  font-family:"Playfair Display", serif;
  font-size:54px;
  letter-spacing:-.03em;
  line-height:1.02;
  margin:0 0 12px;
}
.hero__subtitle{
  font-size:16px;
  line-height:1.7;
  color:rgba(44,62,80,.92);
  margin:0 0 22px;
  max-width:54ch;
}
.hero__cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.hero__meta{
  display:flex;
  gap:18px;
  margin-top:26px;
  flex-wrap:wrap;
}
.metaItem{
  background:rgba(255,255,255,.68);
  border:1px solid rgba(44,62,80,.12);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:var(--shadow-sm);
  min-width:160px;
}
.metaItem__value{font-weight:900; color:var(--green-900); font-size:16px}
.metaItem__label{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.hero__controls{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  margin-top:auto;
}
.heroNav{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.60);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
  display:grid;
  place-items:center;
  font-size:26px;
}
.heroNav:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); background:rgba(255,255,255,.78)}
.heroDots{display:flex; gap:10px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.55); border:1px solid rgba(44,62,80,.12); box-shadow:var(--shadow-sm)}
.heroDot{
  width:9px; height:9px;
  border-radius:999px;
  background:rgba(44,62,80,.30);
  border:0;
  cursor:pointer;
  transition:transform var(--t-base), background var(--t-base), width var(--t-base);
}
.heroDot[aria-selected="true"]{background:linear-gradient(135deg, var(--gold-500), var(--green-700)); width:26px}
.heroDot:hover{transform:scale(1.2)}

/* Trust */
.trust{padding:20px 0 6px}
.trust__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.trustCard{
  display:flex; gap:12px; align-items:center;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.62);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.trustCard:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(74,124,59,.18)}
.trustCard__icon{
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(74,124,59,.20), rgba(244,196,48,.20));
  color:var(--green-900);
  font-weight:900;
}
.trustCard__title{font-weight:900}
.trustCard__sub{color:var(--muted); font-size:12px; margin-top:2px}

/* Categories */
.categories{padding:10px 0 10px}
.catGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  padding-bottom:18px;
}
.catCard{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  min-height:164px;
  border:1px solid rgba(44,62,80,.12);
  box-shadow:var(--shadow-md);
  cursor:pointer;
  transform:translateZ(0);
  transition:transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-slow);
}
.catCard:hover{transform:translateY(-4px); box-shadow:var(--shadow-xl); border-color:rgba(244,196,48,.28)}
.catCard__img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transition:transform var(--t-slow), filter var(--t-slow);
  filter:saturate(1.1) contrast(1.05);
}
.catCard:hover .catCard__img{transform:scale(1.06)}
.catCard__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(26,26,26,.62), rgba(26,26,26,.22) 55%, rgba(26,26,26,.08)),
    radial-gradient(500px 280px at 20% 35%, rgba(244,196,48,.16), transparent 60%);
}
.catCard__content{
  position:relative;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:164px;
  color:#fff;
}
.catCard__title{font-weight:900; font-size:18px; letter-spacing:.01em}
.catCard__cta{margin-top:8px; font-weight:800; color:rgba(255,255,255,.92); opacity:.0; transform:translateY(6px); transition:opacity var(--t-base), transform var(--t-base)}
.catCard:hover .catCard__cta{opacity:1; transform:translateY(0)}

/* Product toolbar + grid */
.products{padding:10px 0 46px}
.productToolbar{
  border-radius:22px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.64);
  box-shadow:var(--shadow-md);
  padding:16px;
}
.toolbarRow{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.toolbarRow--meta{justify-content:space-between; align-items:center; margin-top:10px}
.toolbarMeta{font-weight:800; color:rgba(26,26,26,.90)}

.field{display:flex; flex-direction:column; gap:6px; min-width:180px}
.field--grow{flex:1; min-width:220px}
.field__label{font-size:12px; color:var(--muted); font-weight:700}
.field select, .field input, .field textarea{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  padding:0 12px;
  background:rgba(250,249,246,.92);
  box-shadow:var(--shadow-sm);
  outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.field textarea{height:auto; padding:12px; min-height:88px; resize:vertical}
.field select:focus, .field input:focus, .field textarea:focus{
  border-color:rgba(244,196,48,.65);
  box-shadow:0 0 0 4px rgba(244,196,48,.18), var(--shadow-sm);
}
.field__withIcon{position:relative}
.field__icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:rgba(44,62,80,.55)}
.field__withIcon input{padding-left:38px}
.field__withBtn{display:flex; gap:10px}
.field__withBtn input{flex:1}

.productGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-top:18px;
}
.productGridShell{margin-top:18px}
.card{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.70);
  box-shadow:var(--shadow-md);
  transition:transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-slow);
  position:relative;
  transform:translateZ(0);
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-xl); border-color:rgba(244,196,48,.28)}
.card__top{position:relative}
.card__imgWrap{aspect-ratio:1/1; background:linear-gradient(135deg, rgba(212,165,116,.20), rgba(74,124,59,.14)); overflow:hidden}
.card__img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform var(--t-slow);
  filter:saturate(1.05) contrast(1.04);
}
.card:hover .card__img{transform:scale(1.08)}
.tagRow{position:absolute; left:12px; top:12px; right:12px; display:flex; justify-content:space-between; gap:10px; pointer-events:none}
.tag{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.01em;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow-sm);
}
.tag--discount{background:linear-gradient(135deg, var(--gold-500), var(--gold-600)); color:#1a1a1a}
.tag--soft{background:rgba(255,255,255,.82); color:var(--text-900)}
.wishBtn{
  pointer-events:auto;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.78);
  cursor:pointer;
  transition:transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.wishBtn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}
.wishBtn.is-on{background:linear-gradient(135deg, rgba(231,76,60,.20), rgba(244,196,48,.18))}
.wishBtn svg{width:18px; height:18px}

.socialProof{
  position:absolute;
  left:12px; bottom:12px;
  right:12px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(26,26,26,.52);
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:12px;
  letter-spacing:.01em;
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--t-base), transform var(--t-base);
}
.card:hover .socialProof{opacity:1; transform:translateY(0)}

.card__body{padding:14px 14px 16px}
.card__title{font-weight:900; letter-spacing:.01em; margin:0 0 6px}
.card__variant{font-size:12px; color:var(--muted); margin-bottom:10px}
.rating{display:flex; align-items:center; gap:10px; font-size:12px; color:rgba(44,62,80,.85); margin-bottom:10px}
.stars{color:var(--gold-600); letter-spacing:.04em}
.stock{display:flex; align-items:center; gap:8px; font-weight:800; font-size:12px; margin-bottom:10px}
.dot{width:8px; height:8px; border-radius:999px; background:var(--success)}
.dot--warn{background:var(--warning)}
.dot--err{background:var(--error)}
.prices{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
.priceNow{font-size:20px; font-weight:1000; font-family:Poppins, Inter, system-ui}
.priceMrp{font-size:12px; color:rgba(44,62,80,.60); text-decoration:line-through}
.save{font-size:12px; color:var(--success); font-weight:900}

.card__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.card__actions .btn{height:42px; border-radius:14px}
.card__actions .btn--secondary{border-color:rgba(45,80,22,.12)}
.card__actions .btn--ghost{grid-column:1 / span 2; height:40px}
.hoverBar{
  position:relative;
  margin:0 0 10px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--t-base), transform var(--t-base);
  pointer-events:none;
}
.card:hover .hoverBar{opacity:1; transform:translateY(0)}
.card:hover .hoverBar{pointer-events:auto}

@media (max-width: 820px){
  /* On touch devices / small screens, always show Quick View and never overlap actions */
  .hoverBar{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
}

/* Why */
.why{padding:14px 0 26px}
.whyGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  padding-bottom:18px;
}
.whyCard{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.64);
  box-shadow:var(--shadow-md);
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.whyCard:hover{transform:translateY(-3px); box-shadow:var(--shadow-xl); border-color:rgba(74,124,59,.18)}
.whyCard__icon{font-size:22px}
.whyCard__title{margin-top:10px; font-weight:1000}
.whyCard__text{color:var(--muted); margin-top:8px; line-height:1.7}

/* Testimonials */
.testimonials{padding:10px 0 46px}
.tCarousel{position:relative}
.tNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.66);
  box-shadow:var(--shadow-md);
  cursor:pointer;
  z-index:2;
}
.tNav--prev{left:-8px}
.tNav--next{right:-8px}
.tTrack{
  display:flex;
  gap:14px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding:8px 2px 14px;
}
.tCard{
  flex:0 0 min(420px, 86vw);
  scroll-snap-align:start;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.66);
  box-shadow:var(--shadow-md);
}
.tTop{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.avatar{
  width:44px; height:44px; border-radius:999px;
  background:linear-gradient(135deg, rgba(244,196,48,.22), rgba(74,124,59,.18));
  border:1px solid rgba(44,62,80,.12);
}
.tName{font-weight:1000}
.tLoc{font-size:12px; color:var(--muted)}
.verified{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:900; color:var(--green-900);
  margin-top:6px;
}
.tText{color:rgba(44,62,80,.92); line-height:1.7}

/* Instagram */
.instagram{padding:10px 0 46px}
.igGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.ig{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(44,62,80,.12);
  box-shadow:var(--shadow-md);
  position:relative;
  cursor:pointer;
  background:rgba(255,255,255,.60);
}
.ig img{width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; transition:transform var(--t-slow); filter:saturate(1.05) contrast(1.04)}
.ig:hover img{transform:scale(1.05)}
.ig__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:12px;
  background:linear-gradient(180deg, transparent, rgba(26,26,26,.62));
  opacity:0;
  transition:opacity var(--t-base);
  color:#fff;
  font-weight:900;
}
.ig:hover .ig__overlay{opacity:1}
.ig__meta{font-size:12px; opacity:.92}

/* Newsletter */
.newsletter{padding:10px 0 56px}
.newsletterCard{
  border-radius:26px;
  border:1px solid rgba(44,62,80,.12);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(244,196,48,.20), transparent 60%),
    radial-gradient(700px 340px at 90% 20%, rgba(74,124,59,.22), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(250,249,246,.66));
  box-shadow:var(--shadow-xl);
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.newsletterCard__form{display:flex; gap:10px; width:min(520px, 100%)}
.newsletterCard__form input{
  flex:1;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.78);
  padding:0 14px;
  box-shadow:var(--shadow-sm);
  outline:none;
}

/* Contact */
.contact{padding:10px 0 64px}
.contactGrid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  padding-bottom:10px;
}
.contactCard,.storyCard{
  border-radius:26px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.64);
  box-shadow:var(--shadow-xl);
  padding:22px;
}
.contactCard__title{font-weight:1000; font-size:18px; margin-bottom:10px}
.contactCard__line{color:rgba(44,62,80,.92); line-height:1.7}
.contactCard__cta{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.storyCard__badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(244,196,48,.26), rgba(74,124,59,.16));
  border:1px solid rgba(244,196,48,.30);
  font-weight:1000;
  color:var(--green-900);
  margin-bottom:12px;
}
.storyStats{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:16px}
.storyStat{
  border-radius:18px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(250,249,246,.90);
  box-shadow:var(--shadow-sm);
  padding:12px;
}
.storyStat__value{font-weight:1100; color:var(--green-900); font-size:18px}
.storyStat__label{color:var(--muted); font-size:12px; margin-top:4px}

/* Footer */
.footer{
  padding:48px 0 0;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(74,124,59,.18), transparent 60%),
    radial-gradient(900px 420px at 85% 20%, rgba(244,196,48,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(250,249,246,.55));
  border-top:1px solid rgba(44,62,80,.10);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:18px;
  padding-bottom:28px;
}
.footerBrand{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.footerBrand__mark{
  width:42px; height:42px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(244,196,48,.25), rgba(74,124,59,.18));
  border:1px solid rgba(44,62,80,.12);
  box-shadow:var(--shadow-sm);
}
.footerBrand__name{font-family:"Playfair Display", serif; font-weight:800}
.footerBrand__tag{font-size:12px; color:var(--muted)}
.footerTitle{font-weight:1000; margin-bottom:12px}
.footerLink{display:block; padding:8px 0; color:rgba(26,26,26,.86)}
.footerLink:hover{color:var(--green-900); text-decoration:underline}
.footerText{color:rgba(44,62,80,.88); line-height:1.7}
.social{display:flex; gap:10px; margin-top:12px}
.social__icon{
  width:40px; height:40px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(44,62,80,.12);
  box-shadow:var(--shadow-sm);
  font-weight:1000;
}
.social__icon:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}
.footerBottom{
  border-top:1px solid rgba(44,62,80,.10);
  padding:14px 0;
  color:rgba(44,62,80,.82);
}
.footerBottom__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footerPay{display:flex; gap:10px; align-items:center}
.payPill{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(44,62,80,.12);
  box-shadow:var(--shadow-sm);
  font-weight:900;
  font-size:12px;
}

/* Back to top */
.toTop{
  position:fixed;
  right:18px;
  bottom:18px;
  width:48px; height:48px;
  border-radius:16px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-lg);
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity var(--t-base), transform var(--t-base);
  z-index:60;
}
.toTop.is-on{opacity:1; transform:translateY(0); pointer-events:auto}

/* Drawer / overlay */
.drawerOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity var(--t-base);
  z-index:70;
}
.drawerOverlay.is-on{opacity:1}
.drawerOverlay.is-nav{
  background:rgba(0,0,0,.08);
  backdrop-filter:none;
}
.cartDrawer{
  position:fixed;
  top:0; right:0;
  width:min(420px, 92vw);
  height:100dvh;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-left:1px solid rgba(44,62,80,.12);
  box-shadow:-18px 0 70px rgba(17,24,39,.18);
  z-index:80;
  display:flex;
  flex-direction:column;
  transform:translateX(102%);
  transition:transform var(--t-slow);
}
.cartDrawer.is-on{transform:translateX(0)}
.cartDrawer__header{
  padding:18px 18px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(44,62,80,.10);
}
.cartDrawer__title{font-weight:1000; font-size:18px}
.cartDrawer__sub{font-size:12px; color:var(--muted); margin-top:4px}
.cartDrawer__body{padding:14px 18px; overflow:auto; flex:1}
.cartDrawer__footer{padding:14px 18px 18px; border-top:1px solid rgba(44,62,80,.10)}
.cartEmpty{text-align:center; padding:34px 10px}
.cartEmpty__title{font-weight:1000; font-size:16px}
.cartEmpty__sub{color:var(--muted); margin:8px 0 16px; line-height:1.6}
.cartItems{display:flex; flex-direction:column; gap:12px}
.cartItem{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(250,249,246,.88);
  box-shadow:var(--shadow-sm);
}
.cartThumb{
  width:64px; height:64px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(212,165,116,.20), rgba(74,124,59,.14));
  border:1px solid rgba(44,62,80,.10);
}
.cartThumb img{width:100%; height:100%; object-fit:cover}
.cartMain{display:flex; flex-direction:column; gap:8px}
.cartTop{display:flex; justify-content:space-between; gap:10px}
.cartName{font-weight:1000; line-height:1.25}
.cartVar{font-size:12px; color:var(--muted); margin-top:2px}
.cartPrice{font-weight:1000; color:var(--green-900)}
.qtyRow{display:flex; align-items:center; justify-content:space-between; gap:10px}
.qty{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.70);
}
.qty button{
  width:28px; height:28px;
  border-radius:10px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.82);
  cursor:pointer;
  font-weight:1000;
}
.qty span{min-width:18px; text-align:center; font-weight:1000}
.trash{
  width:36px; height:36px;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.74);
  cursor:pointer;
}
.trash:hover{background:rgba(231,76,60,.12); border-color:rgba(231,76,60,.22)}

.cartSummary{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.sumRow{display:flex; align-items:center; justify-content:space-between; color:rgba(44,62,80,.92)}
.sumRow--total{padding-top:10px; border-top:1px dashed rgba(44,62,80,.20); font-size:16px}
.couponHint{font-size:12px; margin-top:8px}
.cartActions{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.40);
  backdrop-filter:blur(8px);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t-base);
}
.modal.is-on{opacity:1; pointer-events:auto}
.modal__panel{
  position:relative;
  width:min(980px, 96vw);
  max-height:min(86vh, 860px);
  overflow:auto;
  border-radius:26px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border:1px solid rgba(44,62,80,.12);
  box-shadow:var(--shadow-xl);
  transform:translateY(10px);
  transition:transform var(--t-slow);
}
.modal.is-on .modal__panel{transform:translateY(0)}
.modal__panel--wide{width:min(1020px, 96vw)}
.modal__panel--xl{width:min(1140px, 96vw)}
.modal__panel--sm{width:min(540px, 96vw)}
.modal__close{
  position:sticky;
  top:12px;
  margin-left:auto;
  margin-right:12px;
  margin-top:12px;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.78);
  cursor:pointer;
  font-size:22px;
  font-weight:1000;
  z-index:3;
}

/* Quick view */
.qv{display:grid; grid-template-columns:1fr 1.1fr; gap:18px; padding:0 18px 18px}
.qvLeft{
  border-radius:22px;
  border:1px solid rgba(44,62,80,.12);
  background:linear-gradient(135deg, rgba(212,165,116,.18), rgba(74,124,59,.12));
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.qvMainImg{aspect-ratio:1/1; width:100%; object-fit:cover}
.thumbs{display:flex; gap:10px; padding:12px; border-top:1px solid rgba(44,62,80,.10); background:rgba(255,255,255,.55)}
.thumb{
  width:54px; height:54px;
  border-radius:16px;
  border:1px solid rgba(44,62,80,.12);
  overflow:hidden;
  cursor:pointer;
  background:#fff;
  opacity:.80;
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.thumb:hover{opacity:1; transform:translateY(-1px)}
.thumb.is-on{opacity:1; outline:3px solid rgba(244,196,48,.35)}
.thumb img{width:100%; height:100%; object-fit:cover}
.qvRight{padding-top:6px}
.qvTitle{font-weight:1100; font-size:22px; letter-spacing:-.01em; margin:0 0 6px}
.qvMeta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:8px 0 12px}
.qvDesc{color:rgba(44,62,80,.92); line-height:1.7; margin:0 0 14px}
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.60);
  font-weight:900;
  cursor:pointer;
}
.chip[aria-pressed="true"]{
  border-color:rgba(244,196,48,.55);
  box-shadow:0 0 0 4px rgba(244,196,48,.18);
}
.qvRow{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:12px 0}
.qtyLg{display:flex; align-items:center; gap:12px}
.qtyLg .qty{padding:10px 12px}
.tabs{margin-top:14px; border-top:1px solid rgba(44,62,80,.10); padding-top:12px}
.tabBtns{display:flex; gap:8px; flex-wrap:wrap}
.tabBtn{
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.60);
  border-radius:999px;
  padding:9px 12px;
  cursor:pointer;
  font-weight:900;
}
.tabBtn.is-on{border-color:rgba(74,124,59,.22); background:rgba(74,124,59,.10)}
.tabPanel{margin-top:10px; color:rgba(44,62,80,.92); line-height:1.7}
.share{display:flex; gap:10px; margin-top:12px}
.share a{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.65);
  display:grid; place-items:center;
  box-shadow:var(--shadow-sm);
  font-weight:1000;
}
.share a:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}

/* Checkout */
.checkout{padding:0 18px 18px}
.coGrid{display:grid; grid-template-columns:1fr 1.2fr; gap:16px}
.panel{
  border-radius:24px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.66);
  box-shadow:var(--shadow-md);
  padding:16px;
}
.panelTitle{font-weight:1100; font-size:16px; margin:0 0 12px}
.orderList{display:flex; flex-direction:column; gap:12px}
.orderLine{display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center}
.orderLine img{width:52px; height:52px; border-radius:16px; object-fit:cover; border:1px solid rgba(44,62,80,.10)}
.orderLine__name{font-weight:1000}
.orderLine__meta{font-size:12px; color:var(--muted)}
.orderLine__price{font-weight:1000; color:var(--green-900)}
.trustBadges{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.trustBadge{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(74,124,59,.10);
  border:1px solid rgba(74,124,59,.18);
  color:var(--green-900);
  font-weight:1000;
  font-size:12px;
}
.formGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.formGrid .field{min-width:0}
.span2{grid-column:1 / -1}
.hint{font-size:12px; color:var(--muted); margin-top:6px}
.valid{border-color:rgba(39,174,96,.45)!important; box-shadow:0 0 0 4px rgba(39,174,96,.14), var(--shadow-sm)!important}
.invalid{border-color:rgba(231,76,60,.55)!important; box-shadow:0 0 0 4px rgba(231,76,60,.14), var(--shadow-sm)!important}
.errMsg{font-size:12px; color:var(--error); margin-top:6px; font-weight:800}
.payBox{
  display:flex; gap:12px; align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(74,124,59,.18);
  background:rgba(74,124,59,.08);
}
.payBox__title{font-weight:1100}
.payBox__sub{font-size:12px; color:rgba(44,62,80,.85); margin-top:2px}
.coActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.spinner{
  width:16px; height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  animation:spin 900ms linear infinite;
}

/* Success */
.success{padding:0 18px 18px}
.successIcon{
  width:56px; height:56px;
  border-radius:20px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(39,174,96,.18), rgba(244,196,48,.16));
  border:1px solid rgba(39,174,96,.20);
  color:var(--green-900);
  font-weight:1100;
  font-size:22px;
  box-shadow:var(--shadow-md);
}
.successTitle{font-weight:1100; font-size:18px; margin-top:12px}
.successSub{color:var(--muted); line-height:1.7; margin-top:8px}
.orderNo{
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(250,249,246,.90);
  padding:12px;
  font-weight:1100;
}

/* Toasts */
.toastHost{
  position:fixed;
  right:18px;
  top:18px;
  z-index:120;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.toast{
  width:min(360px, calc(100vw - 36px));
  border-radius:18px;
  border:1px solid rgba(44,62,80,.12);
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-xl);
  padding:12px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.toast__icon{
  width:34px; height:34px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(244,196,48,.20);
  border:1px solid rgba(244,196,48,.22);
}
.toast--ok .toast__icon{background:rgba(39,174,96,.16); border-color:rgba(39,174,96,.20)}
.toast--err .toast__icon{background:rgba(231,76,60,.12); border-color:rgba(231,76,60,.20)}
.toast__title{font-weight:1100}
.toast__msg{font-size:12px; color:rgba(44,62,80,.88); margin-top:2px; line-height:1.5}
.toast__close{
  margin-left:auto;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  opacity:.7;
}
.toast__close:hover{opacity:1}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes badgeBounce{
  0%{transform:scale(1)}
  35%{transform:scale(1.35)}
  70%{transform:scale(.96)}
  100%{transform:scale(1)}
}