/* ============================================
   DIXI'S KITCHEN — tokens
   Palette (Kandyan mural inspired):
   --cream   #F7EFDD  aged plaster ground
   --maroon  #7A1F1A  temple maroon-red
   --ochre   #C6721A  gilt ochre-orange
   --ink     #221A13  mural outline black
   --gold    #D4A537  mustard gilt
   --green   #2E5B45  foliage accent (used sparingly)
   ============================================ */

:root{
  --cream: #F7EFDD;
  --cream-deep: #EFE4CB;
  --paper: #FFFDF8;
  --maroon: #7A1F1A;
  --maroon-deep: #591310;
  --ochre: #C6721A;
  --ink: #221A13;
  --ink-soft: #4a3a2c;
  --ink-faint: #6b5a48;
  --gold: #D4A537;
  --green: #2E5B45;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-native: "Noto Sans Sinhala", "Noto Sans Tamil", var(--font-body);

  --container: 1180px;
  --radius: 4px;
  --radius-lg: 6px;

  --section-y: 100px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--maroon-deep);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h4{ font-size: 0.85rem; }

p{ margin: 0 0 1.05em; }
p:last-child{ margin-bottom: 0; }

::selection{ background: var(--gold); color: var(--maroon-deep); }

:focus-visible{
  outline: 2.5px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:-100px; left:16px; z-index:900;
  background: var(--maroon); color: var(--cream);
  padding:12px 18px; border-radius: var(--radius);
  font-weight:600;
}
.skip-link:focus{ top:16px; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.wrap.wide{ max-width: 1280px; }

/* subtle paper grain overlay */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 999;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-sub{
  max-width: 560px; color: var(--ink-soft); font-size: 1.02rem; margin: -6px auto 48px;
}
.section-sub.light{ color: rgba(247,239,221,0.72); }

/* ===== eyebrow / labels ===== */
.eyebrow{
  display: inline-flex; align-items:center; gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 14px;
}
.eyebrow.light{ color: var(--gold); }
.eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ochre);
  box-shadow: 0 0 0 3px rgba(198,114,26,0.18);
  flex-shrink:0;
}
.eyebrow.light .eyebrow-dot{ background: var(--gold); box-shadow: 0 0 0 3px rgba(212,165,55,0.22); }
.eyebrow-wrap{ margin-bottom: 18px; }

.lede{
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--maroon);
  line-height: 1.45;
}

/* vine divider */
.vine-divider{
  color: var(--maroon);
  opacity: 0.55;
  line-height:0;
  transform: translateY(1px);
}
.vine-divider svg{ width:100%; height: 24px; display:block; }
.vine-divider.dark{ color: var(--gold); opacity:0.65; }
.vine-divider.small{ opacity:0.4; margin-bottom: 18px; }

/* ===== buttons ===== */
.btn{
  display: inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: var(--maroon);
  color: var(--cream);
  box-shadow: 0 6px 16px rgba(122,31,26,0.28);
}
.btn-primary:hover{ background: var(--maroon-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(122,31,26,0.34); }

.btn-ghost{
  border-color: var(--maroon);
  color: var(--maroon);
  background: transparent;
}
.btn-ghost:hover{ background: var(--maroon); color: var(--cream); transform: translateY(-2px); }

.btn-ghost-dark{
  border-color: rgba(247,239,221,0.55);
  color: var(--cream);
}
.btn-ghost-dark:hover{ background: rgba(247,239,221,0.12); border-color: var(--cream); transform: translateY(-2px); }

.btn-small{
  padding: 9px 16px;
  font-size: 0.82rem;
  background: var(--ochre);
  color: var(--cream);
}
.btn-small:hover{ background: var(--maroon); transform: translateY(-2px); }

.btn-block{ width:100%; }

.link-btn{
  background:none; border:0; padding:6px 0;
  color: var(--ink-faint);
  font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor:pointer;
}
.link-btn:hover{ color: var(--maroon); }

/* ===== header ===== */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(247,239,221,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(122,31,26,0.12);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
  gap: 20px;
}
.logo{ display:flex; align-items:center; }
.logo-img{ height: 50px; width: auto; display: block; }
.logo-text{
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--maroon-deep);
}
.logo-text em{ font-style: italic; color: var(--ochre); }
.logo-text.light{ color: var(--cream); font-size: 1.5rem; }
.logo-text.light em{ color: var(--gold); }

.main-nav{ display:flex; align-items:center; gap: 34px; }
.main-nav a{
  font-size: 0.92rem; font-weight: 500; color: var(--ink);
  position: relative; padding: 4px 0;
}
.main-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--ochre); transition: right .3s ease;
}
.main-nav a:not(.nav-cta):hover::after,
.main-nav a.is-current::after{ right:0; }
.main-nav a.is-current{ color: var(--maroon); }
.nav-cta{
  background: var(--maroon); color: var(--cream) !important;
  padding: 10px 20px !important; border-radius: var(--radius);
  line-height: 1.4;
  transition: background .25s ease, transform .25s ease;
}
.nav-cta:hover{ background: var(--maroon-deep); transform: translateY(-1px); }

.nav-toggle{
  display:none; flex-direction: column; justify-content:center; gap:5px;
  width: 40px; height: 40px; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ width: 24px; height: 2px; background: var(--maroon-deep); transition: all .3s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===== hero ===== */
.hero{
  position: relative;
  padding: 76px 0 0;
  background:
    radial-gradient(ellipse at 85% 8%, rgba(212,165,55,0.16), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(122,31,26,0.08), transparent 50%),
    var(--cream);
  overflow: hidden;
}
.hero-border-top{
  position:absolute; top:0; left:0; right:0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--maroon) 0 24px, var(--gold) 24px 48px, var(--ochre) 48px 72px);
}
.hero-inner{
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); align-items:center;
  gap: 40px; padding-top: 56px; padding-bottom: 70px;
}
.hero-copy{ min-width:0; }
.hero h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 0.35em;
}
.hero h1 .ink{
  font-style: italic;
  color: var(--ochre);
  position: relative;
}
.hero-sub{
  font-size: 1.08rem; color: var(--ink-soft); max-width: 480px; margin-bottom: 32px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 46px; }
.hero-stats{
  display:flex; gap: 40px; flex-wrap: wrap;
  border-top: 1px solid rgba(122,31,26,0.16);
  padding-top: 24px;
  margin: 0;
}
.hero-stats dt{
  display:block; font-family: var(--font-display); font-size: 1.6rem; color: var(--maroon); font-weight: 600;
}
.hero-stats dd{ margin: 4px 0 0; font-size: 0.82rem; color: var(--ink-faint); letter-spacing:0.02em; }

/* --- hero visual: real spice photograph, framed --- */
.hero-visual{ position:relative; display:flex; justify-content:center; min-width:0; }
.hero-photo-frame{
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 4/5;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.hero-photo{
  width:100%; height:100%; object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(34,26,19,0.45);
  border: 7px solid #fff;
  position: relative; z-index: 2;
  background: var(--cream-deep);
}
.hero-photo-ring{
  position:absolute;
  top: 22px; left: -22px;
  width: 100%; height:100%;
  border: 2px solid var(--ochre);
  border-radius: 6px;
  opacity: 0.55;
  z-index: 1;
}
.hero-photo-ring::before{
  content:"";
  position:absolute; inset: 14px;
  border: 1px dashed var(--gold);
  border-radius: 4px;
  opacity: 0.6;
}
.hero-photo-tag{
  position:absolute; bottom: -22px; right: -18px; z-index: 3;
  background: var(--maroon);
  color: var(--cream);
  padding: 14px 20px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  box-shadow: 0 14px 26px rgba(122,31,26,0.4);
  display:flex; align-items:center; gap:10px;
}
.tag-line{
  width: 7px; height:7px; border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,165,55,0.3);
  flex-shrink:0;
}

/* ===== story ===== */
.story{ padding: var(--section-y) 0; background: var(--cream); }
.story-inner{
  display:grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: 64px; align-items:center;
}
.story-image{ position:relative; min-width:0; }
.story-frame{
  border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 24px 50px -20px rgba(34,26,19,0.35);
  border: 6px solid #fff;
  outline: 1px solid rgba(122,31,26,0.15);
  background: var(--cream-deep);
}
.story-frame img{ width:100%; height: 420px; object-fit: cover; }
.story-badge{
  position:absolute; bottom:-24px; left: -24px;
  background: var(--maroon); color: var(--cream);
  width: 118px; height:118px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow: 0 14px 26px rgba(122,31,26,0.4);
  font-size: 0.68rem; font-weight:600; text-align:center; line-height:1.3;
  animation: spin-slow 26s linear infinite;
}
.story-badge svg{ color: var(--gold); animation: spin-back 26s linear infinite; }
.story-badge span{ animation: spin-back 26s linear infinite; }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }
@keyframes spin-back{ to{ transform: rotate(-360deg); } }

.story-copy{ min-width:0; }
.story-copy h2{ font-size: clamp(1.8rem, 3vw, 2.5rem); max-width: 480px; }
.story-copy p{ color: var(--ink-soft); max-width: 560px; margin-bottom: 1.1em; }
.story-signoff{ display:flex; flex-direction:column; gap:2px; margin-top: 28px; padding-top:22px; border-top:1px solid rgba(122,31,26,0.14); }
.signature{
  font-family: var(--font-display); font-style: italic; font-size: 2rem; color: var(--maroon);
}
.signoff-role{ font-size: 0.82rem; color: var(--ink-faint); letter-spacing:0.03em; }

/* ===== family ===== */
.family{ background: var(--cream); padding-bottom: var(--section-y); }
.family h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 48px; }
.family-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
}
.person{ margin:0; }
.portrait{
  position:relative;
  aspect-ratio:1/1;
  max-width: 210px;
  border-radius:50%;
  overflow:hidden;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), transparent 60%), var(--cream-deep);
  border: 4px solid #fff;
  box-shadow: 0 16px 30px -18px rgba(34,26,19,0.35);
  margin-bottom: 20px;
}
.portrait img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.portrait::after{
  content: attr(data-initial);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-style: italic;
  color: var(--ochre);
  opacity:.55;
  z-index:0;
}
.portrait.no-img img{ display:none; }
.person h3{ font-family: var(--font-display); font-size: 1.15rem; color: var(--maroon-deep); margin-bottom: 2px; }
.person .role{ font-size: 0.82rem; color: var(--ochre); font-weight:600; margin-bottom: .7em; }
.person figcaption p:last-child{ color: var(--ink-soft); font-size: 0.92rem; max-width: 34ch; }

/* ===== why us / sourcing ===== */
.why{ padding: 90px 0 100px; background: var(--cream-deep); }
.why-head{ max-width: 640px; margin-bottom: 48px; }
.why-head .section-sub,
.spices-head .section-sub,
.prices-head .section-sub,
.process-head .section-sub,
.wholesale-copy .section-sub{ margin-left:0; margin-right:0; }
.why h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: .5em; }
.why-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.why-card{
  background: var(--cream);
  border: 1px solid rgba(122,31,26,0.12);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px -16px rgba(34,26,19,0.28);
  border-color: rgba(198,114,26,0.4);
}
.why-icon{ width: 48px; height:48px; color: var(--ochre); margin-bottom: 18px; }
.why-icon svg{ width:100%; height:100%; }
.why-card h3{ font-family: var(--font-display); font-size: 1.15rem; color: var(--maroon-deep); margin-bottom: 8px; }
.why-card p{ font-size: 0.92rem; color: var(--ink-soft); margin:0; }

/* ===== spices/shop ===== */
.spices{ padding: var(--section-y) 0; background: var(--cream); }
.spices-head{ max-width: 620px; margin-bottom: 48px; }
.spices h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom:.4em; }
.spice-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 30px;
}
.spice-card{
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 12px 28px -18px rgba(34,26,19,0.3);
  border: 1px solid rgba(122,31,26,0.08);
  transition: transform .35s ease, box-shadow .35s ease;
  display:flex; flex-direction:column;
}
.spice-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 40px -18px rgba(34,26,19,0.38);
}
.spice-img{
  height: 210px;
  background-size: cover; background-position:center;
  background-color: var(--cream-deep);
  position: relative;
}
.spice-img::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(34,26,19,0.35));
}
.spice-body{ padding: 24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.spice-body h3{ font-family: var(--font-display); font-size: 1.2rem; color: var(--maroon-deep); margin-bottom: 2px; }

.native{
  font-family: var(--font-native);
  font-size: 0.85rem;
  line-height:1.5;
  color: var(--ink-faint);
  margin: 0;
}
.native + .native{ margin-bottom: .8em; }

.spice-body > p:not(.native){ font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 20px; }
.spice-foot{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-top:auto; flex-wrap:wrap; }
.price{ font-family: var(--font-display); font-weight:600; color: var(--maroon); font-size:1.05rem; }
.price small{ font-family: var(--font-body); font-weight:400; color: var(--ink-faint); font-size:0.72rem; }

/* blends & teas */
.blends{
  margin-top: 60px;
  background: var(--ink);
  background-image: radial-gradient(ellipse at 85% 0%, rgba(198,114,26,0.18), transparent 55%);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 42px;
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 46px; align-items:center;
}
.blends-copy{ min-width:0; }
.blends h3{ font-family: var(--font-display); color: var(--cream); font-size: clamp(1.4rem,2.2vw,1.8rem); margin-bottom:.5em; }
.blends p{ color: rgba(247,239,221,0.72); font-size:.98rem; margin-bottom: 1.6em; max-width: 46ch; }
.blends .btn-ghost{ color: var(--cream); border-color: rgba(247,239,221,0.55); }
.blends .btn-ghost:hover{ background: rgba(247,239,221,0.12); color: var(--cream); border-color: var(--cream); }

.blend-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 32px;
}
.blend-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(247,239,221,0.14);
  font-size: .94rem;
}
.blend-list em{ font-style:normal; font-size:.78rem; color: var(--gold); flex:none; }

/* ===== price list + order builder ===== */
.prices{ padding: var(--section-y) 0; background: var(--cream-deep); }
.prices-head{ max-width: 600px; margin-bottom: 44px; }
.prices h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom:.4em; }

.price-layout{
  display:grid; grid-template-columns: minmax(0,1fr) 330px; gap: 40px; align-items:start;
}

.price-table-wrap{
  background: var(--cream);
  border: 1px solid rgba(122,31,26,0.12);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.price-table{ width:100%; border-collapse:collapse; font-size:.96rem; }
.price-table thead th{
  text-align:left;
  font-family: var(--font-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--ink-faint);
  padding: 0 10px 12px;
  border-bottom: 1.5px solid rgba(122,31,26,0.22);
}
.price-table th[scope="row"]{
  text-align:left;
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight:600;
  color: var(--maroon-deep);
  padding: 14px 10px;
  vertical-align:top;
}
.price-table td{ padding:14px 10px; vertical-align:top; }
.price-table tbody tr{ border-bottom: 1px solid rgba(122,31,26,0.1); }
.price-table tbody tr:last-child{ border-bottom:0; }
.price-table tbody tr.group-start th[scope="row"]{ padding-top:16px; }

.price-table label{ display:block; cursor:pointer; }

.row-native{
  display:block;
  font-family: var(--font-native);
  font-size:.8rem; font-weight:400;
  color: var(--ink-faint);
  line-height:1.5;
}

.col-pick{ width:38px; padding-right:0 !important; }
.col-size{ width:88px; color: var(--ink-soft); }
.col-qty{ width:118px; }
.col-price{ width:104px; text-align:right; font-weight:600; white-space:nowrap; color: var(--maroon); }

.qty-stepper{
  display:inline-flex; align-items:center; gap:0;
  border: 1.5px solid rgba(122,31,26,0.25);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--paper);
}
.qty-stepper[hidden]{ display:none; }

.qty-btn{
  width:26px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background: var(--cream-deep);
  color: var(--maroon-deep);
  border:0;
  font-size:.95rem;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition: background-color .15s ease, color .15s ease;
}
.qty-btn:hover{ background: var(--ochre); color: var(--cream); }
.qty-btn:active{ background: var(--maroon); color: var(--cream); }

.qty-input{
  width:34px; height:28px;
  border:0;
  border-left: 1px solid rgba(122,31,26,0.18);
  border-right: 1px solid rgba(122,31,26,0.18);
  text-align:center;
  font-family: var(--font-body);
  font-size:.88rem;
  font-weight:600;
  color: var(--ink);
  background:transparent;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-input:focus-visible{ outline: none; background: rgba(212,165,55,.16); }

.pick{
  appearance:none;
  width:20px; height:20px; margin:2px 0 0;
  border: 1.5px solid rgba(122,31,26,0.4);
  border-radius:3px;
  background: var(--paper);
  cursor:pointer;
  display:grid; place-content:center;
  transition: background-color .15s ease, border-color .15s ease;
}
.pick::after{
  content:"";
  width:10px; height:6px;
  border-left:2px solid var(--cream);
  border-bottom:2px solid var(--cream);
  transform: rotate(-45deg) scale(0);
  transition: transform .15s ease;
}
.pick:checked{ background: var(--maroon); border-color: var(--maroon); }
.pick:checked::after{ transform: rotate(-45deg) scale(1); }

.price-table tr.is-picked{ background: rgba(212,165,55,.14); }

.price-note{ margin-top:16px; font-size:.83rem; color: var(--ink-faint); }

/* order panel */
.order-panel{
  position:sticky; top:96px;
  background: var(--maroon);
  background-image: radial-gradient(circle at 85% 0%, rgba(212,165,55,0.18), transparent 55%);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding:26px 24px;
  box-shadow: 0 20px 40px -22px rgba(89,19,16,.55);
}
.order-panel h3{ font-family: var(--font-display); color: var(--cream); margin-bottom:1em; }

.order-lines{ list-style:none; margin:0 0 18px; padding:0; }
.order-lines li{
  display:flex; justify-content:space-between; gap:12px;
  padding: 9px 0;
  border-bottom:1px solid rgba(247,239,221,0.16);
  font-size:.9rem;
}
.order-lines li:last-child{ border-bottom:0; }
.order-lines .line-name{ color: var(--cream); }
.order-lines .line-name span{ display:block; color: rgba(247,239,221,0.6); font-size:.79rem; }
.order-lines .line-price{ color: var(--gold); font-weight:600; white-space:nowrap; }
.order-empty{ color: rgba(247,239,221,.68); font-size:.88rem !important; border-bottom:0 !important; }

.order-total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 0; margin-bottom:16px;
  border-top: 1.5px solid rgba(247,239,221,0.2);
  font-size:.9rem;
}
.order-total[hidden]{ display:none; }
.order-total strong{ font-family: var(--font-display); font-size:1.35rem; color: var(--gold); }

.order-panel .btn-primary{ margin-bottom:6px; background: var(--ink); box-shadow:none; }
.order-panel .btn-primary:hover{ background:#100c08; }
.order-panel .link-btn{ color: rgba(247,239,221,.7); display:block; }
.order-panel .link-btn[hidden]{ display:none; }
.order-panel .link-btn:hover{ color: var(--gold); }

.order-fine{ margin-top:14px; font-size:.79rem; color: rgba(247,239,221,.66); line-height:1.5; }

/* ===== process ===== */
.process{
  padding: var(--section-y) 0 110px;
  background: var(--ink);
  background-image: radial-gradient(ellipse at 80% 0%, rgba(198,114,26,0.14), transparent 55%);
  color: var(--cream);
}
.process-head{ max-width: 540px; margin-bottom: 60px; }
.process h2.light,
.light{ color: var(--cream); }
.process-head h2{ margin-bottom:.4em; }

.process-rail{
  position: relative;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.rail-line{
  position:absolute; top: 21px; left: 6%; right: 6%; height:1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px);
  opacity: 0.5;
}
.process-step{ position: relative; padding-top: 60px; }
.step-mark{
  position:absolute; top:0; left:0;
  font-family: var(--font-display); font-style: italic; font-weight:600;
  font-size: 1.5rem; color: var(--gold);
  background: var(--ink);
  padding-right: 14px;
}
.process-step h3{
  font-family: var(--font-display); color: var(--cream); font-size: 1.15rem; margin-bottom: 10px;
}
.process-step p{ color: rgba(247,239,221,0.68); font-size: 0.92rem; margin:0; }

/* ===== wholesale ===== */
.wholesale{ background: var(--cream); padding: var(--section-y) 0; }
.wholesale-inner{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items:center;
}
.wholesale-copy{ min-width:0; }
.wholesale-copy h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom:.5em; }
.wholesale-copy p{ color: var(--ink-soft); max-width: 50ch; }
.wholesale-copy .btn{ margin-top: 1.4em; }

.wholesale-points{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap: 18px;
}
.wholesale-points li{
  background:#fff;
  border: 1px solid rgba(122,31,26,0.1);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: 0 12px 24px -18px rgba(34,26,19,.28);
}
.wholesale-points h3{ font-family: var(--font-display); font-size: 1.02rem; color: var(--maroon-deep); margin-bottom:.4em; }
.wholesale-points p{ font-size:.9rem; color: var(--ink-soft); margin:0; }

/* ===== reviews (kept for future use) ===== */
.reviews{ padding: var(--section-y) 0; background: var(--cream); }
.reviews h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 50px; }
.review-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.review-card{
  margin:0; background: var(--cream-deep);
  border-left: 3px solid var(--ochre);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.review-card:hover{ transform: translateY(-5px); box-shadow: 0 16px 30px -18px rgba(34,26,19,0.3); }
.review-card p{
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  color: var(--ink); margin: 0 0 18px; line-height: 1.5;
}
.review-card cite{ font-style:normal; font-size: 0.82rem; color: var(--maroon); font-weight:600; }

/* ===== order / contact ===== */
.order{
  padding: 110px 0;
  background: var(--maroon);
  background-image: radial-gradient(circle at 15% 20%, rgba(212,165,55,0.18), transparent 45%), radial-gradient(circle at 85% 80%, rgba(46,91,69,0.2), transparent 45%);
  position: relative;
}
.order-inner{ display:grid; gap: 54px; }
.order-lead{ text-align:center; max-width: 620px; margin: 0 auto; }
.order-lead h2{ color: var(--cream); font-size: clamp(2rem, 4vw, 2.8rem); }
.order .eyebrow{ justify-content:center; color: var(--gold); }
.order .eyebrow-dot{ background: var(--gold); box-shadow: 0 0 0 3px rgba(212,165,55,0.22); }
.order-sub{
  color: rgba(247,239,221,0.78); margin: 0 auto 36px; font-size: 1.02rem;
}
.order-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

.contact-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.contact-card{
  background: rgba(247,239,221,0.07);
  border: 1px solid rgba(247,239,221,0.16);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
}
.contact-card h3{ font-family: var(--font-display); color: var(--gold); font-size:1.02rem; margin-bottom:1em; }

.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(247,239,221,0.14);
  font-size:.93rem;
}
.contact-list li:last-child{ border-bottom:0; }
.contact-list span{ color: rgba(247,239,221,.62); font-size:.83rem; flex:none; }
.contact-list a{
  color: var(--cream);
  border-bottom: 1px solid transparent;
  text-align:right;
  word-break: break-word;
}
.contact-list a:hover{ border-bottom-color: var(--gold); color: var(--gold); }

.contact-card address{
  font-style:normal;
  color: rgba(247,239,221,.75);
  font-size:.95rem;
  line-height:1.7;
  margin-bottom: 1em;
}
.map-link{
  color: var(--gold);
  font-size:.89rem; font-weight:600;
  border-bottom: 1px solid rgba(212,165,55,.45);
  padding-bottom:2px;
}
.map-link:hover{ border-bottom-color: var(--gold); }

.delivery-list{ list-style:none; margin:0; padding:0; }
.delivery-list li{
  color: rgba(247,239,221,.75);
  font-size:.93rem; line-height:1.55;
  padding: 10px 0 10px 20px;
  position:relative;
}
.delivery-list li::before{
  content:""; position:absolute; left:0; top:18px;
  width:8px; height:8px; border-radius:50%;
  background: var(--gold);
}
.delivery-list strong{ color: var(--cream); }
.delivery-card .delivery-list{ margin-top:-6px; }

/* ===== footer ===== */
.site-footer{ background: var(--ink); color: rgba(247,239,221,0.75); padding-top: 64px; }
.footer-inner{
  display:grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(247,239,221,0.1);
}
.footer-brand p{ margin-top: 12px; font-size: 0.88rem; max-width: 280px; }

.socials{ display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; }
.socials a{
  display:inline-flex; align-items:center; gap:8px;
  color: rgba(247,239,221,.75);
  font-size:.89rem; font-weight:500;
}
.socials a:hover{ color: var(--gold); }

.footer-col h4{
  font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px; font-weight:600;
}
.footer-col a{ display:block; font-size: 0.9rem; margin-bottom: 10px; transition: color .2s ease; }
.footer-col a:hover{ color: var(--cream); }
.footer-bottom{ padding: 0 28px 30px; max-width: var(--container); margin: 0 auto; }
.footer-bottom .vine-divider{ margin-bottom: 14px; }
.footer-bottom p{ font-size: 0.8rem; opacity:0.6; text-align:center; margin: 0; }

/* ===== scroll reveal ===== */
.reveal-up{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-up.in-view{ opacity: 1; transform: translateY(0); }
.delay-1{ transition-delay: 0.1s; }
.delay-2{ transition-delay: 0.2s; }
.delay-3{ transition-delay: 0.3s; }

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 1040px){
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .price-layout{ grid-template-columns: 1fr; }
  .order-panel{ position:static; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; padding-top: 40px; }
  .hero-visual{ order: -1; margin-bottom: 10px; }
  .story-inner{ grid-template-columns: 1fr; gap: 60px; }
  .story-image{ max-width: 480px; margin: 0 auto; }
  .family-grid{ grid-template-columns: repeat(2, 1fr); }
  .wholesale-inner{ grid-template-columns: 1fr; }
  .blends{ grid-template-columns: 1fr; }
  .spice-grid{ grid-template-columns: repeat(2, 1fr); }
  .review-grid{ grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .process-rail{ grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
  .rail-line{ display:none; }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .main-nav{
    position: fixed; top: 76px; left:0; width:100%; height: calc(100vh - 76px); height: calc(100dvh - 76px);
    background: var(--cream);
    flex-direction: column; align-items:flex-start; justify-content:flex-start;
    padding: 36px 28px; gap: 26px;
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 400;
    visibility: hidden;
    overflow-y: auto;
  }
  .main-nav.open{ visibility: visible; }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ font-size: 1.1rem; }
  .nav-cta{ width:100%; text-align:center; }
  .nav-toggle{ display:flex; }
  .logo-img{ height: 42px; }

  .hero{ padding-top: 0; }
  .hero-inner{ padding-top: 30px; padding-bottom: 50px; }
  .hero-stats{ gap: 26px; flex-wrap: wrap; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; }

  .why-grid{ grid-template-columns: 1fr; }
  .spice-grid{ grid-template-columns: 1fr; }
  .process-rail{ grid-template-columns: 1fr; }
  .family-grid{ grid-template-columns: 1fr; }
  .wholesale-points{ grid-template-columns: 1fr; }
  .blend-list{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; }
  .order-actions{ flex-direction:column; }
  .order-actions .btn{ width:100%; }
  .story-badge{ width: 96px; height:96px; left: 10px; bottom:-18px; font-size:0.6rem; }
  .hero-photo-frame{ width: min(360px, 84vw); margin: 0 auto 20px; }
  .hero-photo-ring{ top: 14px; left: -14px; }
  .hero-photo-tag{ bottom: -18px; right: -6px; padding: 10px 16px; font-size: 0.86rem; }

  .price-table{ font-size:.86rem; }
  .price-table-wrap{ padding:16px 10px; }
  .col-size{ width:46px; }
  .col-qty{ width:84px; }
  .col-price{ width:70px; }
  .price-table th[scope="row"]{ padding-inline:6px; }
  .price-table td{ padding-inline:6px; }
  .row-native{ font-size:.72rem; }
  .qty-btn{ width:20px; height:24px; font-size:.85rem; }
  .qty-input{ width:24px; height:24px; font-size:.76rem; }
  .spice-foot{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 420px){
  .wrap{ padding: 0 20px; }
  .hero h1{ font-size: 2.1rem; }
}

/* ===== print ===== */
@media print{
  .grain,.site-header,.hero-visual,.order-panel,.nav-toggle,.socials{ display:none !important; }
  body{ background:#fff; color:#000; }
  .process,.order,.site-footer,.blends{ background:#fff !important; color:#000 !important; }
  .reveal-up{ opacity:1 !important; transform:none !important; }
}