/* ============================================================
   The Cozy Cookie Co — shared styles (landing + tasting box)
   ============================================================ */
:root{
  --bg-cream:#F6EEE5;
  --bg-beige:#ECE4DA;
  --bg-offwhite:#F6F3EC;
  --ink:#36302A;
  --ink-soft:#6b6157;
  --overlay:rgba(54,48,42,.42);
  --btn-bg:#36302A;
  --btn-text:#F6EEE5;
  --font-display:"Shrikhand", Georgia, serif;
  --font-body:"Young Serif", Georgia, serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg-cream);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:1.04}

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

/* ---------- Button ---------- */
.btn{
  display:inline-block;
  background:var(--btn-bg);
  color:var(--btn-text);
  font-family:var(--font-body);
  font-size:1.05rem;
  text-decoration:none;
  padding:18px 40px;
  border-radius:999px;
  transition:transform .15s ease, background .2s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);background:#241f1a}
.btn.big{font-size:1.18rem;padding:22px 52px}
.btn.light{background:var(--bg-cream);color:var(--ink)}
.btn.light:hover{background:#fff}
.price-note{display:block;margin-top:14px;font-size:.92rem;color:var(--ink-soft)}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,238,229,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(54,48,42,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.15rem;letter-spacing:-.01em;text-decoration:none}
.brand img{width:40px;height:40px;object-fit:contain}
.nav .btn{padding:11px 24px;font-size:.95rem}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:82vh;
  display:flex;align-items:center;
  background:linear-gradient(var(--overlay),var(--overlay)), url("images/hero-cookies.webp") center/cover no-repeat;
  color:var(--bg-cream);
  text-align:center;
}
.hero .wrap{padding-top:80px;padding-bottom:80px}
.eyebrow{
  font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;
  font-family:var(--font-body);
  color:var(--bg-cream);opacity:.9;margin-bottom:22px;
}
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem);color:var(--bg-cream);margin:0 auto;max-width:14ch}
.hero p.lead{
  max-width:34rem;margin:26px auto 34px;font-size:clamp(1.05rem,2vw,1.28rem);
  color:var(--bg-cream);opacity:.96;
}
.hero .price-note{color:rgba(246,238,229,.85)}

/* ---------- Section scaffolding ---------- */
section{padding:96px 0}
.beige{background:var(--bg-beige)}
.cream{background:var(--bg-cream)}
.kicker{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.2em;font-size:.82rem;color:var(--ink-soft);margin-bottom:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h2{font-size:clamp(2rem,4.2vw,3.1rem);margin-bottom:22px}
.split p{margin-bottom:16px;max-width:34rem}
.split .media img{border-radius:14px;width:100%;object-fit:cover}
.media.cutout{display:flex;justify-content:center}
.media.cutout img{max-height:420px;width:auto;border-radius:0}

/* ---------- The box / value ---------- */
.box-section{text-align:center}
.box-section h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:14px}
.box-section .sub{max-width:40rem;margin:0 auto 46px;color:var(--ink-soft);font-size:1.1rem}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:left;margin-bottom:50px}
.feature{background:var(--bg-offwhite);border-radius:16px;padding:34px 30px;border:1px solid rgba(54,48,42,.07)}
.feature .num{font-family:var(--font-display);font-size:1.5rem;color:var(--ink);opacity:.35;margin-bottom:12px}
.feature h3{font-size:1.35rem;margin-bottom:10px;letter-spacing:0}
.feature p{color:var(--ink-soft);font-size:1rem}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:54px;counter-reset:step}
.step{text-align:center}
.step .circle{
  width:66px;height:66px;border-radius:50%;
  background:var(--ink);color:var(--bg-cream);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.5rem;margin:0 auto 20px;
}
.step h3{font-size:1.3rem;margin-bottom:8px;letter-spacing:0}
.step p{color:var(--ink-soft);font-size:1rem;max-width:22rem;margin:0 auto}
.center-head{text-align:center;margin-bottom:6px}
.center-head h2{font-size:clamp(2.2rem,4.6vw,3.4rem)}

/* ---------- Final CTA ---------- */
.cta-band{background:var(--ink);color:var(--bg-cream);text-align:center}
.cta-band h2{font-size:clamp(2.3rem,5vw,3.8rem);color:var(--bg-cream);margin-bottom:20px;max-width:18ch;margin-left:auto;margin-right:auto}
.cta-band p{max-width:32rem;margin:0 auto 36px;opacity:.9;font-size:1.15rem}
.cta-band .price-note{color:rgba(246,238,229,.7)}

/* ---------- Footer ---------- */
footer{background:var(--bg-cream);padding:56px 0;border-top:1px solid rgba(54,48,42,.1)}
.foot{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.foot img{width:120px;height:auto;opacity:.9}
.foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot .small{color:var(--ink-soft);font-size:.9rem}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  section{padding:66px 0}
  .split{grid-template-columns:1fr;gap:36px}
  .split .media{order:-1}
  .features{grid-template-columns:1fr;gap:20px}
  .steps{grid-template-columns:1fr;gap:44px}
  .nav .desktop-link{display:none}
  .hero{min-height:76vh}
}

/* ============================================================
   Tasting Box product page (tasting-box.html)
   ============================================================ */
.nav .back{font-family:var(--font-body);font-size:.95rem;color:var(--ink-soft);text-decoration:none}
.nav .back:hover{color:var(--ink)}

/* Product hero */
.product{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.product__media img{width:100%;border-radius:18px;object-fit:cover;box-shadow:0 18px 44px rgba(54,48,42,.14)}
.product__info h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:16px}
.product__info .lead{color:var(--ink-soft);font-size:1.12rem;max-width:33rem;margin-bottom:24px}
.price{font-family:var(--font-display);font-size:2.2rem;line-height:1;margin-bottom:24px}
.price small{font-family:var(--font-body);font-size:1rem;color:var(--ink-soft);margin-left:6px}
.hilite{list-style:none;display:grid;gap:11px;margin-bottom:30px}
.hilite li{padding-left:28px;position:relative;color:var(--ink-soft)}
.hilite li::before{content:"✦";position:absolute;left:0;top:0;color:var(--ink);opacity:.5}

/* What's in the box */
.box-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.cookie-card{background:var(--bg-offwhite);border:1px solid rgba(54,48,42,.08);border-radius:16px;padding:16px;text-align:center}
.cookie-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:11px;margin-bottom:13px;background:var(--bg-beige)}
.cookie-card h3{font-family:var(--font-body);font-size:1.06rem;letter-spacing:0;margin-bottom:3px}
.cookie-card .tag{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
.cookie-card--choice{border-style:dashed;border-color:rgba(54,48,42,.28)}
.cookie-card--choice img{opacity:.9}
.cookie-card--choice.empty img{opacity:.4}

/* Specs */
.specs{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 52px}
.spec{display:flex;justify-content:space-between;gap:20px;padding:16px 2px;border-bottom:1px solid rgba(54,48,42,.13)}
.spec dt{color:var(--ink-soft)}
.spec dd{text-align:right}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}

/* Order form / buy box */
.order-wrap{max-width:720px;margin:0 auto;background:var(--bg-offwhite);border:1px solid rgba(54,48,42,.1);border-radius:22px;padding:40px}
.order-wrap h2{font-size:clamp(1.9rem,4vw,2.6rem);text-align:center;margin-bottom:8px}
.order-wrap .sub{text-align:center;color:var(--ink-soft);margin-bottom:30px}
.form-legend{font-family:var(--font-body);font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft);margin:26px 0 12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-size:.9rem;color:var(--ink-soft)}
.field input,.field select{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--bg-cream);border:1px solid rgba(54,48,42,.22);
  border-radius:12px;padding:13px 14px;width:100%;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink)}
#card-container{background:var(--bg-cream);border:1px solid rgba(54,48,42,.22);border-radius:12px;padding:12px 14px;min-height:52px}
.pay-row{margin-top:26px}
.pay-row .btn{width:100%;border:none;cursor:pointer;font-family:var(--font-body)}
.pay-row .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;background:var(--btn-bg)}
.status{margin-top:14px;font-size:.95rem;min-height:1.2em;text-align:center;color:var(--ink-soft)}
.status.err{color:#8a2b1f}
.status.ok{color:#3f6b3a}
.trust{margin-top:16px;text-align:center;color:var(--ink-soft);font-size:.84rem}

/* Fulfillment selector */
.fulfillment{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.method{display:block;border:1px solid rgba(54,48,42,.22);border-radius:14px;padding:15px 18px;cursor:pointer;background:var(--bg-cream);transition:border-color .15s ease, box-shadow .15s ease}
.method:hover{border-color:var(--ink)}
.method:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.method input{margin-right:8px;accent-color:var(--ink)}
.method__title{font-size:1rem}
.method__sub{display:block;color:var(--ink-soft);font-size:.85rem;margin:5px 0 0 24px}
.fulfill-block{margin-top:16px}
.fulfill-block[hidden]{display:none}
.pickup-note{color:var(--ink-soft);font-size:.9rem;margin-top:8px}

@media(max-width:820px){
  .fulfillment{grid-template-columns:1fr}
  .product{grid-template-columns:1fr;gap:30px}
  .product__media{order:-1}
  .box-grid{grid-template-columns:1fr 1fr}
  .specs{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .order-wrap{padding:26px 20px}
}