/* Hitt Kitchen — rustic farmhouse storefront */
:root {
  --cream: #f7efdd;
  --cream-2: #fbf6ea;
  --parchment: #f0e3c8;
  --ink: #3d2b1f;
  --ink-soft: #5c4636;
  --barn: #8c3b2e;
  --barn-dark: #6f2d23;
  --olive: #4a5d3a;
  --olive-dark: #3a4a2d;
  --gold: #c8902f;
  --shadow: 0 14px 34px rgba(61, 43, 31, 0.16);
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(200, 144, 47, 0.07), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(74, 93, 58, 0.07), transparent 40%);
  font-size: 18px;
  line-height: 1.55;
}

h1, h2, h3, .display {
  font-family: 'Playfair Display', Georgia, serif;
  margin: 0;
  letter-spacing: 0.2px;
}

a { color: var(--barn); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 239, 221, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(61, 43, 31, 0.12);
}
.topbar .wrap {
  display: flex; align-items: center; gap: 14px;
  padding-top: 12px; padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 48px; height: 48px; }
.brand b { font-family: 'Playfair Display', serif; font-size: 21px; line-height: 1; }
.brand span { display: block; font-size: 12px; letter-spacing: 3px; color: var(--barn); text-transform: uppercase; }
.spacer { flex: 1; }
.cart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--ink); background: var(--cream-2); color: var(--ink);
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600;
  transition: transform .12s ease, background .12s ease;
}
.cart-btn:hover { transform: translateY(-1px); background: #fff; }
.cart-count {
  background: var(--barn); color: #fff; border-radius: 999px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}

/* ---------- Hero ---------- */
.hero { padding: 70px 0 48px; text-align: center; }
.hero .seal { width: 172px; height: 172px; filter: drop-shadow(0 12px 26px rgba(61,43,31,.20)); }
.hero h1 { font-size: clamp(40px, 7vw, 68px); margin: 18px 0 6px; color: var(--ink); }
.hero .tag { font-size: clamp(19px, 2.5vw, 24px); color: var(--ink-soft); max-width: 620px; margin: 0 auto; }
.hero .pills { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pill {
  font-family: 'Playfair Display', serif; font-size: 13px; letter-spacing: 1px;
  background: var(--cream-2); border: 1px solid rgba(61,43,31,.18);
  padding: 7px 14px; border-radius: 999px; color: var(--olive-dark);
}
.cta {
  margin-top: 26px; display: inline-block; text-decoration: none;
  background: var(--barn); color: #fff; padding: 13px 30px; border-radius: 999px;
  font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600;
  box-shadow: var(--shadow); transition: transform .12s ease, background .12s ease;
}
.cta:hover { transform: translateY(-2px); background: var(--barn-dark); }

/* ---------- Section heading ---------- */
.section { padding: 30px 0 80px; }
.section-head { text-align: center; margin-bottom: 34px; }
.section-head .kicker { color: var(--barn); letter-spacing: 4px; font-size: 13px; text-transform: uppercase; }
.section-head h2 { font-size: clamp(30px, 4vw, 42px); margin-top: 6px; }
.rule { width: 64px; height: 3px; background: var(--gold); border: none; border-radius: 3px; margin: 12px auto 0; }

/* ---------- Product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 26px; }
.card {
  background: var(--cream-2); border: 1px solid rgba(61,43,31,.13);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .14s ease, box-shadow .14s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(61,43,31,.2); }
.card .label-art { background: var(--parchment); line-height: 0; }
.card .product-photo { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }
.card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card .type { color: var(--barn); letter-spacing: 2px; font-size: 12px; text-transform: uppercase; font-family: 'Playfair Display', serif; }
.card h3 { font-size: 23px; margin: 2px 0 6px; }
.card .blurb { font-size: 16px; color: var(--ink-soft); flex: 1; }
.card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.card .price { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--olive-dark); }
.add {
  border: 1.5px solid var(--olive); background: var(--olive); color: #fff;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 600;
  transition: transform .1s ease, background .1s ease;
}
.add:hover { background: var(--olive-dark); transform: translateY(-1px); }
.add.added { background: var(--gold); border-color: var(--gold); }

/* ---------- Nav links ---------- */
.nav-link {
  font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none; padding: 8px 6px; border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.nav-link:hover { color: var(--barn); border-color: var(--gold); }

/* ---------- Section sub ---------- */
.section-head .section-sub { color: var(--ink-soft); font-size: 18px; margin-top: 10px; }

/* ---------- Recipes ---------- */
.recipes { padding-top: 30px; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.recipe-card {
  background: var(--cream-2); border: 1px solid rgba(61,43,31,.13); border-radius: var(--radius);
  padding: 22px 22px 20px; box-shadow: var(--shadow); cursor: pointer;
  display: flex; flex-direction: column; text-align: left;
  transition: transform .14s ease, box-shadow .14s ease;
}
.recipe-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(61,43,31,.2); }
.recipe-card .r-kicker { color: var(--barn); letter-spacing: 2px; font-size: 12px; text-transform: uppercase; font-family: 'Playfair Display', serif; }
.recipe-card h3 { font-size: 24px; margin: 4px 0 8px; }
.recipe-card .r-intro { color: var(--ink-soft); font-size: 16px; flex: 1; }
.recipe-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.recipe-meta .chip {
  font-family: 'Playfair Display', serif; font-size: 12px; letter-spacing: .5px;
  background: var(--parchment); border: 1px solid rgba(61,43,31,.15);
  padding: 5px 11px; border-radius: 999px; color: var(--olive-dark);
}
.recipe-card .r-view { margin-top: 16px; color: var(--barn); font-family: 'Playfair Display', serif; font-weight: 600; font-size: 15px; }
.recipe-card .r-view::after { content: ' →'; }

/* ---------- Pager ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.pager:empty { display: none; }
.pager button {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(61,43,31,.2); background: var(--cream-2); color: var(--ink);
  font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.pager button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--gold); }
.pager button.active { background: var(--barn); border-color: var(--barn); color: #fff; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager .pager-arrow { font-size: 18px; }

/* ---------- Recipe modal ---------- */
.recipe-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(.98);
  width: min(640px, 92vw); max-height: 88vh; overflow-y: auto;
  background: var(--cream); border-radius: 18px; box-shadow: 0 30px 70px rgba(61,43,31,.4);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  padding: 34px 34px 30px;
}
.recipe-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.recipe-modal .close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink); }
.recipe-modal .r-kicker { color: var(--barn); letter-spacing: 3px; font-size: 12px; text-transform: uppercase; font-family: 'Playfair Display', serif; }
.recipe-modal h2 { font-size: clamp(26px, 4vw, 34px); margin: 4px 0 6px; }
.recipe-modal .r-intro { color: var(--ink-soft); font-size: 17px; margin-bottom: 6px; }
.recipe-modal .recipe-meta { margin-bottom: 22px; }
.recipe-modal h4 { font-family: 'Playfair Display', serif; font-size: 18px; margin: 22px 0 10px; color: var(--barn); border-bottom: 1px solid rgba(61,43,31,.14); padding-bottom: 6px; }
.recipe-modal ul, .recipe-modal ol { margin: 0; padding-left: 22px; }
.recipe-modal ul li { margin: 7px 0; }
.recipe-modal ol li { margin: 11px 0; padding-left: 4px; }
.recipe-modal .shop-this {
  margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--parchment); border-radius: 12px; padding: 14px 18px;
}
.recipe-modal .shop-this span { font-family: 'Playfair Display', serif; font-size: 16px; }
.recipe-modal .shop-this button {
  border: none; cursor: pointer; background: var(--olive); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 14px;
  transition: background .12s ease;
}
.recipe-modal .shop-this button:hover { background: var(--olive-dark); }

/* ---------- Story strip ---------- */
.story { background: var(--olive); color: var(--cream); padding: 56px 0; }
.story .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.story h2 { color: var(--cream); font-size: clamp(28px, 4vw, 40px); }
.story p { font-size: 18px; color: #e9e2cd; }
.story .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.story .fact { background: rgba(255,255,255,.08); border-radius: 12px; padding: 16px; text-align: center; }
.story .fact b { display: block; font-family: 'Playfair Display', serif; font-size: 28px; color: var(--gold); }
.story .fact span { font-size: 14px; letter-spacing: 1px; }

/* ---------- Footer ---------- */
footer { padding: 40px 0; text-align: center; color: var(--ink-soft); font-size: 15px; }
footer .small { font-size: 13px; opacity: .8; margin-top: 8px; }

/* ---------- Cart drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(61,43,31,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 50; }
.overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
  background: var(--cream); box-shadow: -10px 0 40px rgba(61,43,31,.3);
  transform: translateX(100%); transition: transform .24s ease; z-index: 60;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer header { padding: 20px 22px; border-bottom: 1px solid rgba(61,43,31,.14); display: flex; align-items: center; justify-content: space-between; }
.drawer header h3 { font-size: 24px; }
.drawer .close { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--ink); line-height: 1; }
.drawer .items { flex: 1; overflow-y: auto; padding: 10px 22px; }
.line { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px dashed rgba(61,43,31,.2); }
.line .emoji { font-size: 28px; width: 40px; text-align: center; }
.line .info { flex: 1; }
.line .info b { font-family: 'Playfair Display', serif; font-size: 17px; }
.line .info small { color: var(--ink-soft); }
.qty { display: flex; align-items: center; gap: 8px; }
.qty button { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--cream-2); cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink); }
.qty span { min-width: 18px; text-align: center; font-family: 'Playfair Display', serif; }
.drawer .empty { text-align: center; color: var(--ink-soft); padding: 50px 20px; }
.drawer footer { padding: 18px 22px; border-top: 1px solid rgba(61,43,31,.14); }
.fulfillment { display: flex; gap: 8px; margin-bottom: 12px; }
.fulfillment .fopt {
  flex: 1; cursor: pointer; padding: 11px 8px; border-radius: 12px;
  border: 1.5px solid rgba(61,43,31,.2); background: var(--cream-2); color: var(--ink-soft);
  font-family: 'Playfair Display', serif; font-size: 13.5px; font-weight: 600; line-height: 1.2;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.fulfillment .fopt:hover { border-color: var(--gold); }
.fulfillment .fopt.active { border-color: var(--olive); background: var(--olive); color: #fff; }
.pickup-note {
  background: var(--parchment); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
  font-size: 14px; color: var(--ink-soft); line-height: 1.4;
}
.pickup-note[hidden] { display: none; }
.totals { display: flex; justify-content: space-between; font-family: 'Playfair Display', serif; font-size: 20px; margin-bottom: 4px; }
.totals.muted { font-size: 14px; font-family: inherit; color: var(--ink-soft); }
.checkout {
  margin-top: 14px; width: 100%; border: none; cursor: pointer;
  background: var(--barn); color: #fff; padding: 14px; border-radius: 12px;
  font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600;
  transition: background .12s ease;
}
.checkout:hover { background: var(--barn-dark); }
.checkout:disabled { opacity: .5; cursor: not-allowed; }
.mode-note { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.test-card { font-family: monospace; background: var(--parchment); padding: 2px 6px; border-radius: 4px; }

/* ---------- Toast banner ---------- */
.banner {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-120%);
  background: var(--olive); color: #fff; padding: 12px 22px; border-radius: 999px;
  box-shadow: var(--shadow); z-index: 70; transition: transform .26s ease;
  font-family: 'Playfair Display', serif; font-size: 15px;
}
.banner.show { transform: translateX(-50%) translateY(0); }
.banner.warn { background: var(--barn); }

@media (max-width: 760px) {
  .story .wrap { grid-template-columns: 1fr; }
  .brand span { display: none; }
}

/* ---- Legal pages (terms.html, privacy.html) ------------------------------
   Long-form reading, so: narrower measure than the storefront, more leading,
   and the display face reserved for headings. Inherits every colour from the
   tokens at the top of this file so the pages stay part of the shop. */
.legal {
  padding: 48px 0 72px;
}
.legal .wrap {
  max-width: 68ch;
}
.legal h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--ink);
  text-wrap: balance;
}
.legal h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 40px 0 10px;
  color: var(--barn-dark);
  text-wrap: balance;
}
.legal-meta {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 28px;
  letter-spacing: 0.02em;
}
.legal-lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  margin: 0 0 8px;
}
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--barn); }
.legal a:hover, .legal a:focus-visible { color: var(--barn-dark); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--parchment);
  padding: 1px 6px;
  border-radius: 5px;
}
.legal-address {
  background: var(--cream-2);
  border: 1px solid var(--parchment);
  border-radius: var(--radius);
  padding: 14px 18px;
  line-height: 1.5;
}
.legal-back {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--parchment);
}

/* Keyboard focus must stay visible on the legal pages too. */
.legal a:focus-visible,
footer a:focus-visible,
.topbar a:focus-visible {
  outline: 2px solid var(--barn);
  outline-offset: 2px;
  border-radius: 3px;
}