/* Nectar & Nosh - Market Red theme, split hero */
@font-face { font-family: 'Aleo'; src: url(../assets/fonts/Aleo-Light.woff2) format('woff2'), url(../assets/fonts/Aleo-Light.ttf) format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Aleo'; src: url(../assets/fonts/Aleo-Regular.woff2) format('woff2'), url(../assets/fonts/Aleo-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Aleo'; src: url(../assets/fonts/Aleo-SemiBold.woff2) format('woff2'), url(../assets/fonts/Aleo-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Aleo'; src: url(../assets/fonts/Aleo-Bold.woff2) format('woff2'), url(../assets/fonts/Aleo-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url(../assets/fonts/PlayfairDisplay-Black.woff2) format('woff2'), url(../assets/fonts/PlayfairDisplay-Black.ttf) format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --bg: #f7f0e8;
  --ink: #3c2320;
  --soft: #7a5148;
  --acc: #a82c22;
  --acc-deep: #7e2018;
  --acc-ink: #fff0ea;
  --card: #fffaf4;
  --line: #e6cfc0;
  /* ribbon green - deep enough to carry light text, warm enough for the cream */
  --ribbon: #4a7a4e;
  --ribbon-ink: #f4f9f1;
  --nav-h: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Any rule that sets `display` beats the browser's own [hidden] rule, so an
   element toggled with el.hidden keeps rendering - as an empty pill, an empty
   badge, a stray dot. This makes the attribute mean what it says. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 10px); }
/* the logo should return to the true top, not stop under the sticky header */
#top { scroll-margin-top: calc(-1 * (var(--nav-h) + 10px)); }
body {
  font-family: 'Aleo', Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acc); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }

/* ---------- announcement bar ---------- */
.announce {
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 13.5px;
  letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 16px; text-align: center;
}
.announce a { color: #ffd9c4; text-decoration: none; font-weight: 600; margin-left: 4px; white-space: nowrap; }
.announce a:hover { text-decoration: underline; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 clamp(16px, 4vw, 44px);
  background: var(--bg);
  transition: box-shadow .3s ease;
}
.nav.solid { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(60, 35, 32, .06); }
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink); font-weight: 700; font-size: 19px;
  letter-spacing: .01em; flex: none;
}
/* the badge is taller than the nav: the negative bottom margin keeps its
   layout box at nav height while the artwork hangs over the page below */
.brand img {
  width: 104px; height: 104px;
  margin-bottom: -40px; position: relative; z-index: 1;
  filter: drop-shadow(0 6px 16px rgba(60, 35, 32, .28));
}
.brand span {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 900;
  font-size: 21px; letter-spacing: 0;
}
.links { display: flex; gap: 26px; margin: 0 auto; }
.links a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px;
  letter-spacing: .04em; padding: 6px 2px; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.links a:hover { border-bottom-color: var(--acc); }
.links a[aria-current] { border-bottom-color: var(--acc); color: var(--acc); }
.nav-btn {
  flex: none;
  background: var(--acc); color: var(--acc-ink); text-decoration: none;
  font-weight: 600; font-size: 14px; letter-spacing: .04em;
  padding: 9px 22px; border-radius: 999px;
}
.nav-btn:hover { background: var(--acc-deep); }
.nav-cart {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: .04em;
  color: var(--ink); background: transparent; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 18px;
}
.nav-cart:hover { border-color: var(--acc); color: var(--acc); }
.cart-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px;
  background: var(--acc); color: var(--acc-ink); font-size: 12px; line-height: 1;
}

/* ---------- hero slider ---------- */
.hero-slider {
  position: relative;
  height: clamp(500px, 80svh, 840px);
  overflow: hidden;
  background: #2a1c18;
}
.hero-slider .slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slider .slide.is-active { opacity: 1; }
.hero-slider .slide img, .hero-slider .slide picture { width: 100%; height: 100%; display: block; }
.hero-slider .slide img { object-fit: cover; object-position: center 45%; }
.hero-ov {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: flex-end;
  background: linear-gradient(rgba(40,20,15,0) 34%, rgba(40,20,15,.30) 58%, rgba(40,20,15,.74));
  pointer-events: none;
}
.hero-ov-inner {
  width: 100%; max-width: 1160px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 44px) clamp(44px, 7vh, 84px);
  pointer-events: auto;
}
.hero-eyebrow {
  font-weight: 700; font-size: 13.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #ffe9d2; margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(40,20,15,.85), 0 2px 14px rgba(40,20,15,.6);
}
.hero-ov h1 {
  font-weight: 700; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.05;
  color: #fff6ee; text-wrap: balance; text-shadow: 0 2px 22px rgba(40,20,15,.55);
}
.hero-ctas { margin-top: 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-btn {
  display: inline-block; background: var(--acc); color: var(--acc-ink); text-decoration: none;
  font-weight: 600; font-size: 15.5px; letter-spacing: .04em;
  padding: 14px 32px; border-radius: 999px;
}
.hero-btn:hover { background: var(--acc-deep); }
.hero-link {
  font-weight: 600; font-size: 15.5px; color: #fff6ee; text-decoration: none;
  border-bottom: 2px solid #f0c9a8; padding-bottom: 2px; text-shadow: 0 1px 12px rgba(40,20,15,.5);
}
.hero-link:hover { color: #f0c9a8; }
.dots {
  position: absolute; z-index: 6; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px;
}
.dot {
  width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff6ee;
  background: transparent; cursor: pointer; padding: 0;
}
.dot.is-active { background: #fff6ee; }
.dot:focus-visible { outline: 2px solid #f0c9a8; outline-offset: 3px; }

/* entrance choreography */
.hero-ov-inner > * { opacity: 0; transform: translateY(18px); }
body.loaded .hero-ov-inner > * {
  animation: rise .9s cubic-bezier(.2, .65, .25, 1) forwards;
}
body.loaded .hero-ov-inner > *:nth-child(1) { animation-delay: .1s; }
body.loaded .hero-ov-inner > *:nth-child(2) { animation-delay: .22s; }
body.loaded .hero-ov-inner > *:nth-child(3) { animation-delay: .38s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-ov-inner > * { opacity: 1; transform: none; animation: none !important; }
  .hero-slider .slide { transition: none; }
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- shelf ---------- */
.block { max-width: 1100px; margin: 0 auto; padding: 108px 24px 0; }
.block:last-child { padding-bottom: 118px; }

.eyebrow {
  font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 14px;
}
.eyebrow.light { color: #ffd9c4; }
h2, .shelf h1 {
  font-weight: 700; font-size: clamp(32px, 4.8vw, 48px); line-height: 1.1;
  text-wrap: balance; margin-bottom: 30px;
}
.lede { font-size: 19.5px; line-height: 1.6; }
.copy p + p { margin-top: 16px; }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; }
.split.flip figure { order: 2; }
.split figure img { border-radius: 10px; border: 1px solid var(--line); }

.pricecard {
  margin-top: 26px; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--acc); border-radius: 8px; padding: 18px 24px;
}
.p-main { font-weight: 700; font-size: 32px; color: var(--acc); line-height: 1.2; }
.p-main span { font-weight: 400; font-size: 16px; color: var(--soft); }
.p-sub { font-weight: 600; font-size: 15.5px; margin-top: 4px; }
.p-fine { font-size: 13.5px; color: var(--soft); margin-top: 6px; }

/* chocolate dark band */
.choc-band { background: #2e1b12; color: #f6e8da; margin-top: 108px; }
.choc-band .choc-inner { padding-top: 84px; padding-bottom: 92px; }
.choc-band h2 { color: #fff3e6; }
.choc-band .copy p { color: #d9bda9; }
.choc-band .copy .lede { color: #f0dccb; }
.choc-band .split figure img { border-color: #4a3123; }
.choc-pull { font-weight: 700; font-size: 24px; color: #f0c9a8 !important; }
.choc-band .fine { font-size: 13.5px; color: #a98b76 !important; margin-top: 14px; }
.choc-band + .block { padding-top: 108px; }

/* misc */
.madeline { margin-top: 18px; font-weight: 600; color: var(--acc); }
.story-btn { margin-top: 22px; }
.signature { font-weight: 700; font-size: 19px; color: var(--acc); margin-top: 18px; }
.maker-grid { grid-template-columns: 1fr 1.35fr; }
.page-top .block:first-child { padding-top: 64px; }

/* pairing cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.card {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--acc);
  border-radius: 8px; padding: 26px 26px 24px; overflow: hidden;
}
.card-n {
  position: absolute; top: 12px; right: 20px;
  font-weight: 700; font-size: 44px; color: var(--line); line-height: 1;
}
.card h3 { font-weight: 700; font-size: 20px; margin-bottom: 10px; }
.card p { font-size: 15.5px; color: var(--soft); }
.wide img { border-radius: 10px; border: 1px solid var(--line); }
@media (min-width: 761px) {
  .pairings .wide img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 42%; }
}

/* flavor profile */
.section-padding { padding: 108px 24px 0; }
.container { max-width: 1100px; margin: 0 auto; }

.section-header { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.section-title { font-size: clamp(30px, 4.2vw, 42px); margin-bottom: 14px; }
.section-subtitle { font-size: 17px; color: var(--soft); }

.flavor-grid {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
}
.flavor-bars { display: grid; gap: 22px; }
.flavor-item { display: grid; gap: 8px; }
.flavor-label-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 15px; font-weight: 600; line-height: 1.35;
}
.flavor-note { color: var(--soft); font-weight: 400; font-size: 13.5px; text-align: right; }
.flavor-bar-bg { height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.flavor-bar-fill { height: 100%; background: linear-gradient(90deg, #d4813f, var(--acc)); border-radius: 10px; }

.quote-box {
  background: var(--bg); border-left: 4px solid var(--acc);
  border-radius: 8px; padding: 30px 32px;
}
.quote-text { font-size: 21px; font-style: italic; line-height: 1.5; color: var(--acc); margin-bottom: 16px; }
.quote-author {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soft);
}

/* gourmet pairings grid */
.pairings-band { background: rgba(255, 255, 255, .5); padding-bottom: 108px; }
.pairings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }

.pairing-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pairing-card:hover {
  transform: translateY(-5px); border-color: var(--acc);
  box-shadow: 0 8px 24px rgba(60, 35, 32, .12);
}
.pairing-img { width: 100%; height: 200px; object-fit: cover; }
.pairing-content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.pairing-title { font-weight: 700; font-size: 21px; color: var(--acc); margin-bottom: 8px; line-height: 1.25; }
.pairing-desc { font-size: 15px; color: var(--soft); line-height: 1.55; }

/* the reveal transform must not fight the hover lift */
.pairing-card.reveal { transition: opacity .8s ease, transform .8s ease; }
.pairing-card.reveal.in { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }

/* story */
.story-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.story-fig img { border-radius: 10px; border: 1px solid var(--line); }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 18px; }

/* shop panel */
.shop-panel {
  background: radial-gradient(120% 120% at 50% 0%, #c0392c 0%, var(--acc) 45%, var(--acc-deep) 100%);
  color: var(--acc-ink); border-radius: 14px;
  padding: 64px 48px; text-align: center;
}
.shop-panel h2 { color: #fff8f2; }
.shop-lead { max-width: 54ch; margin: 0 auto; color: #ffd9c9; }
.shop-actions { margin-top: 34px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; background: #fff8f2; color: var(--acc-deep); text-decoration: none;
  font-weight: 700; font-size: 15.5px; letter-spacing: .04em;
  padding: 14px 32px; border-radius: 999px;
}
.btn:hover { background: #ffe9dc; }
.btn.ghost { background: transparent; border: 1.5px solid #e58d77; color: #ffe4d6; font-weight: 600; }
.btn.ghost:hover { border-color: #fff; color: #fff; background: transparent; }
.btn:focus-visible { outline: 2px solid #fff8f2; outline-offset: 3px; }

/* shop product cards, sit on the red panel */
.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px; max-width: 760px; margin: 34px auto 0;
}
.shop-product {
  background: #fff8f2; color: var(--ink);
  border-radius: 12px; overflow: hidden; text-align: center;
  box-shadow: 0 10px 30px rgba(60, 35, 32, .22);
  display: flex; flex-direction: column;
}
.shop-product img { width: 100%; height: 230px; object-fit: cover; }
/* body grows so the buy buttons line up across cards of unequal copy */
.shop-product-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.shop-product h3 { font-weight: 700; font-size: 22px; line-height: 1.25; margin-bottom: 6px; }
.shop-price { font-weight: 700; font-size: 27px; color: var(--acc); line-height: 1.2; }
.shop-note { font-size: 14px; color: var(--soft); margin: 6px 0 20px; }

/* a special that names one product flies a ribbon across the top-left corner
   of its image. The card already clips to its own radius, so the band is cut
   cleanly at both card edges.
   Geometry: the band's centre sits on the box diagonal at ~(66,66), giving a
   visible span of about 185px - keep ribbon text shorter than that, which is
   what the promotion's `badge` field is for. */
.shop-product { position: relative; }
.shop-badges {
  position: absolute; top: 0; left: 0;
  width: 180px; height: 180px; overflow: hidden;
  pointer-events: none; z-index: 2;
}
.shop-badge {
  position: absolute; top: 51px; left: -59px; width: 250px;
  transform: rotate(-45deg);
  background: var(--ribbon); color: var(--ribbon-ink);
  font-weight: 700; font-size: 12px; letter-spacing: .03em; line-height: 1.3;
  text-align: center; white-space: nowrap; padding: 7px 0;
  box-shadow: 0 2px 10px rgba(60, 35, 32, .35);
}
/* a second ribbon would sit on top of the first, so only the first flies */
.shop-badge ~ .shop-badge { display: none; }

/* how many to add, chosen before adding - auto margin pins the pair to the
   card foot so buttons line up across cards of unequal copy */
.shop-product .shop-qty {
  margin-top: auto; padding-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.shop-product .shop-qty button {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: 17px; line-height: 1;
}
.shop-product .shop-qty button:hover { border-color: var(--acc); color: var(--acc); }
.shop-qty-n { min-width: 24px; text-align: center; font-weight: 700; font-size: 17px; }
.shop-product .shop-qty + .btn.buy { margin-top: 14px; }
/* auto top margin pins the button to the card foot, so buttons align across cards */
.btn.buy {
  margin-top: auto; background: var(--acc); color: #fff8f2; width: 100%; padding: 15px 28px;
}
.btn.buy:hover { background: var(--acc-deep); }
.btn.buy:focus-visible { outline-color: var(--acc-deep); }
.shop-secondary { margin-top: 30px; }

/* ---------- shop page ---------- */
.shop-intro { max-width: 60ch; margin-bottom: 30px; }
.shop-promos {
  display: inline-block; margin-bottom: 26px; padding: 10px 18px;
  background: var(--card); border: 1px dashed var(--acc);
  border-radius: 999px; color: var(--acc); font-weight: 600; font-size: 14.5px;
}
/* on the shop page the cards sit on cream, not on the red panel */
.shop-grid-page {
  max-width: none; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.shop-grid-page .shop-product {
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(60, 35, 32, .07);
}

/* ---------- cart drawer ---------- */
body.cart-open { overflow: hidden; }
.cart-drawer { position: fixed; inset: 0; z-index: 100; }
.cart-scrim { position: absolute; inset: 0; background: rgba(40, 20, 15, .5); }
.cart-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%); display: flex; flex-direction: column;
  background: var(--bg); box-shadow: -12px 0 40px rgba(60, 35, 32, .25);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--line); flex: none;
}
.cart-head h2 { font-size: 24px; margin: 0; }
.cart-close {
  font-size: 30px; line-height: 1; color: var(--soft);
  background: none; border: 0; cursor: pointer; padding: 0 4px;
}
.cart-close:hover { color: var(--acc); }
.cart-body { padding: 20px 24px 28px; overflow-y: auto; flex: 1; }
.cart-empty { color: var(--soft); }

.cart-rows { list-style: none; }
.cart-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-row-main { display: flex; justify-content: space-between; gap: 14px; font-weight: 600; }
.cart-row-total { white-space: nowrap; }
.qty { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qty button {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 16px; line-height: 1; font-family: inherit;
}
.qty button:hover { border-color: var(--acc); color: var(--acc); }
.qty-n { min-width: 20px; text-align: center; font-weight: 700; }
.qty .qty-remove {
  width: auto; height: auto; border: 0; background: none; padding: 0 0 0 6px;
  font-size: 13.5px; color: var(--soft); text-decoration: underline; border-radius: 0;
}
.qty .qty-remove:hover { color: var(--acc); }

.cart-fulfil { border: 0; margin: 22px 0 6px; }
.cart-fulfil legend { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.cart-fulfil label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); margin-bottom: 8px; font-size: 14px; line-height: 1.45;
}
.cart-fulfil label:has(:checked) { border-color: var(--acc); }
.cart-fulfil input { margin-top: 4px; accent-color: var(--acc); }

.cart-totals { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cart-line { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; padding: 5px 0; }
.cart-line-discount { color: var(--acc); }
.cart-line-total { font-weight: 700; font-size: 19px; padding-top: 10px; }
.cart-error {
  margin-top: 14px; padding: 11px 14px; border-radius: 8px;
  background: #fbe4e1; color: var(--acc-deep); font-size: 14.5px;
}
.cart-checkout { margin-top: 18px; }
.cart-checkout:disabled { opacity: .65; cursor: default; }
.cart-fine { margin-top: 12px; font-size: 13px; color: var(--soft); text-align: center; }

/* footer */
footer { margin-top: 118px; background: var(--card); border-top: 1px solid var(--line); }
.foot-grid {
  max-width: 1100px; margin: 0 auto; padding: 60px 24px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
}
.foot-brand img { width: 88px; height: 88px; margin-bottom: 16px; }
.foot-brand p { color: var(--soft); font-size: 15.5px; }
.foot-col h4 {
  font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 14px;
}
.foot-col a {
  display: block; color: var(--ink); text-decoration: none;
  font-size: 15.5px; padding: 4px 0;
}
.foot-col a:hover { color: var(--acc); }
.foot-legal {
  max-width: 1100px; margin: 0 auto; padding: 18px 24px 30px;
  border-top: 1px solid var(--line);
  color: var(--soft); font-size: 13px; text-align: center;
}

.foot-credit {
  max-width: 1100px; margin: 0 auto; padding: 18px 24px;
  border-top: 1px solid var(--line);
  color: var(--ink); font-size: 15.5px; text-align: center;
}
.foot-credit a { color: var(--acc); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.foot-credit a:hover { color: var(--acc-deep); }

/* ---------- responsive ---------- */
/* Narrow nav, in stages: the "The/Our" prefixes go first, then the wordmark,
   so the five section links always stay on screen. No hamburger, nothing hidden. */
@media (max-width: 860px) {
  .nav { gap: 18px; }
  .links .t { display: none; }
  .links {
    margin: 0 auto;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .links::-webkit-scrollbar { display: none; }
  .links a { padding: 10px 0; }
  /* weight carries the current page where the underline would float below the text */
  .links a[aria-current] { border-bottom-color: transparent; font-weight: 700; }
  .nav-btn { padding: 11px 20px; }
}
@media (max-width: 620px) {
  .nav { gap: 14px; padding: 0 14px; }
  .brand img { width: 76px; height: 76px; margin-bottom: -26px; }
  .brand span { display: none; }
  .links { gap: 16px; }
  .links a { font-size: 13.5px; letter-spacing: .02em; }
  .nav-btn { padding: 11px 15px; font-size: 13.5px; }
}
@media (max-width: 400px) {
  .nav { gap: 10px; }
  .brand img { width: 64px; height: 64px; margin-bottom: -20px; }
  .links { gap: 13px; }
  .links a { font-size: 13px; }
  .nav-btn { padding: 11px 13px; font-size: 13px; }
}
@media (max-width: 359px) {
  .nav { gap: 8px; padding: 0 10px; }
  .links { gap: 10px; }
  .links a { font-size: 12.5px; }
  .nav-btn { padding: 10px 11px; font-size: 12.5px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  /* width must be definite, or min-height drives the WIDTH through aspect-ratio:
     that pushed the document past the viewport on small phones and left half the
     screen blank in landscape */
  .hero-slider { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 88svh; min-height: 440px; }
  .hero-slider .slide img { object-position: center; }
  .hero-ov h1 { font-size: 30px; }
  .hero-eyebrow { font-size: 11.5px; margin-bottom: 8px; }
  .hero-ov-inner { padding-bottom: 54px; }
  .hero-ctas { margin-top: 14px; }
  .hero-btn { padding: 11px 24px; font-size: 14px; }
  .hero-link { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 26px; gap: 30px; }
  .hero-copy h1 { font-size: clamp(38px, 10.5vw, 48px); }
  .split, .split.flip { grid-template-columns: 1fr; gap: 28px; }
  .split.flip figure { order: 0; }
  .cards { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; gap: 28px; }
  .block { padding-top: 84px; }
  .section-padding { padding-top: 84px; }
  .section-header { margin-bottom: 32px; }
  .flavor-grid { grid-template-columns: 1fr; gap: 32px; padding: 28px 22px; }
  .flavor-label-row { flex-direction: column; gap: 2px; }
  .flavor-note { text-align: left; }
  .quote-box { padding: 24px 24px; }
  .quote-text { font-size: 19px; }
  .pairings-band { padding-bottom: 84px; }
  .pairings-grid { grid-template-columns: 1fr; gap: 22px; }
  .pairing-img { height: 180px; }
  .shop-panel { padding: 44px 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .announce { font-size: 12.5px; }
}

/* ---------- mobile nav ----------
   Five section links plus Follow and Cart stopped fitting on a phone: the old
   scrolling link row hid items with no affordance. Below 760px the links
   collapse into a panel, and Cart stays in the bar because it is the control
   people are there to use. This block sits last so it wins over the narrow
   tweaks above, which were written for the scrolling row. */
.nav-toggle { display: none; }
.nav-follow-m { display: none; }

@media (max-width: 760px) {
  .nav { gap: 12px; }
  .brand { margin-right: auto; }

  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    flex: none; width: 44px; height: 40px; padding: 0 10px; cursor: pointer;
    background: transparent; border: 1.5px solid var(--line); border-radius: 10px;
  }
  .nav-toggle span {
    display: block; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav.menu-open .nav-toggle { border-color: var(--acc); }
  .nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the standalone Follow button is replaced by the one inside the panel */
  .nav > .nav-btn { display: none; }

  .links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 6px 18px 18px; overflow: visible;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 34px rgba(60, 35, 32, .16);
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .nav.menu-open .links { display: flex; }
  .links a {
    font-size: 16.5px; letter-spacing: .02em; padding: 15px 2px;
    border-bottom: 1px solid var(--line);
  }
  /* the underline cue does not read in a stacked list, so colour carries it */
  .links a[aria-current] { border-bottom-color: var(--line); color: var(--acc); font-weight: 700; }
  .links .t { display: inline; }

  .nav-follow-m {
    display: block; margin-top: 16px; text-align: center; text-decoration: none;
    background: var(--acc); color: var(--acc-ink);
    font-weight: 600; font-size: 15px; letter-spacing: .04em;
    padding: 14px 22px; border-radius: 999px; border-bottom: 0;
  }
  .nav-cart { padding: 9px 15px; font-size: 13.5px; }
}

/* ---------- product pages ---------- */
.crumbs {
  max-width: 1100px; margin: 0 auto; padding: 18px 24px 0;
  font-size: 13.5px; color: var(--soft); letter-spacing: .02em;
}
.crumbs a { color: var(--soft); text-decoration: none; }
.crumbs a:hover { color: var(--acc); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }
.crumbs span[aria-hidden] { margin: 0 6px; color: var(--line); }

.product-page h1 { margin-bottom: 26px; }
/* one card beside its copy, rather than a grid of many */
.product-single { grid-template-columns: minmax(260px, 380px) 1fr; align-items: start; gap: 44px; }
.product-copy p + p { margin-top: 16px; }
.product-copy .hero-btn { margin-top: 24px; }

/* the card title is a link on the shop grid, plain text on its own page */
.shop-product h3 a { color: inherit; text-decoration: none; }
.shop-product h3 a:hover { color: var(--acc); text-decoration: underline; }

@media (max-width: 760px) {
  .product-single { grid-template-columns: 1fr; gap: 28px; }
  .crumbs { padding-top: 14px; font-size: 13px; }
}

/* ---------- long-form guide ---------- */
.guide { max-width: 68ch; }
.guide h2 { font-size: clamp(24px, 3vw, 30px); margin: 40px 0 14px; }
.guide p + p, .guide ul + p, .guide ol + p { margin-top: 16px; }
.guide ul, .guide ol { margin: 14px 0 0 22px; }
.guide li { margin-bottom: 10px; }
.guide li::marker { color: var(--acc); }

/* ---------- product gallery ---------- */
.product-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 8px; margin-top: 12px;
}
.product-thumb {
  padding: 0; border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); cursor: pointer; overflow: hidden; line-height: 0;
  transition: border-color .2s ease, transform .2s ease;
}
.product-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-thumb:hover { border-color: var(--acc); transform: translateY(-1px); }
.product-thumb.is-active { border-color: var(--acc); border-width: 2px; }
.product-thumb:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---------- details, delivery address and time in the cart ---------- */
.cart-details {
  margin: 14px 0 4px; padding: 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); display: grid; gap: 10px; min-width: 0;
}
.cart-details legend { font-weight: 700; font-size: 13.5px; padding: 0 4px; }
.cart-details label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.cart-details label em { font-style: normal; font-weight: 400; color: var(--soft); }
.cart-details input {
  font-family: inherit; font-size: 16px; padding: 10px 12px; min-width: 0; width: 100%;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink);
}
.cart-details input:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.cart-address-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }
.cart-details input[data-address="postal"] { text-transform: uppercase; letter-spacing: .04em; }
.cart-quote-go { justify-self: start; }
.cart-quote { font-size: 14px; font-weight: 600; color: var(--ink); }
.cart-details .cart-fine { margin: 0; }
@media (max-width: 420px) {
  .cart-address-row { grid-template-columns: 1fr 1fr; }
  .cart-address-row label:nth-child(2) { grid-column: 1 / -1; order: -1; }
}

/* ---------- shipping in the cart ---------- */
.cart-ship { margin: 14px 0 4px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.cart-ship-label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 7px; }
.cart-ship-row { display: flex; gap: 8px; }
.cart-ship-row input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 15px; letter-spacing: .06em;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink); text-transform: uppercase;
}
.cart-ship-row input:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.cart-ship-go {
  flex: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: 7px; border: 0; background: var(--acc); color: var(--acc-ink);
}
.cart-ship-go:hover { background: var(--acc-deep); }
.cart-ship-go:disabled { opacity: .6; cursor: default; }
.cart-ship-error { margin-top: 9px; font-size: 13.5px; color: var(--acc-deep); }

/* discount code: the same input row as the postal code */
.cart-code { margin: 18px 0 4px; }
.cart-code-applied {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px dashed var(--acc); border-radius: 7px; font-size: 14px;
}
.cart-code-applied .qty-remove {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 13.5px; color: var(--soft); text-decoration: underline;
}
.cart-code-applied .qty-remove:hover { color: var(--acc); }

.cart-ship-rates { margin-top: 12px; display: grid; gap: 7px; }
.cart-ship-rate {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); font-size: 14px;
}
.cart-ship-rate:has(:checked) { border-color: var(--acc); }
.cart-ship-rate input { accent-color: var(--acc); }
.cart-ship-rate-name { flex: 1; }
.cart-ship-rate-name em { font-style: normal; color: var(--soft); font-size: 13px; }
.cart-ship-rate-price { font-weight: 700; white-space: nowrap; }

/* ---------- shop closed ---------- */
.soon { max-width: 62ch; }
.soon h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.05; margin-bottom: 26px; }
.soon .lede { margin-bottom: 16px; }
.soon-actions { margin-top: 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.soon-actions .hero-link { color: var(--acc); border-bottom-color: var(--line); text-shadow: none; }
.soon-actions .hero-link:hover { color: var(--acc-deep); border-bottom-color: var(--acc); }
.soon-fine { margin-top: 40px; font-size: 15px; color: var(--soft); }

/* ---------- corporate gifting ---------- */
.corp-lede { max-width: 60ch; }
.corp-note { margin-top: 22px; font-size: 15px; color: var(--soft); max-width: 60ch; }

/* Three across at most. auto-fit would spread to four or more on a wide
   screen, which shrinks each card and leaves the photographs small. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
@media (max-width: 980px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 26px 24px; display: flex; flex-direction: column;
}
.tier-featured { border-color: var(--acc); box-shadow: 0 8px 26px rgba(60, 35, 32, .10); }
.tier-flag {
  display: inline-block; align-self: flex-start; margin-bottom: 10px;
  background: var(--acc); color: var(--acc-ink); border-radius: 999px;
  padding: 4px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.tier h3 { font-weight: 700; font-size: 23px; margin-bottom: 4px; }
.tier-price { font-weight: 700; font-size: 27px; color: var(--acc); line-height: 1.2; }
.tier-for { font-size: 14.5px; color: var(--soft); margin: 8px 0 16px; }
.tier ul { list-style: none; margin: 0; }
.tier li { font-size: 15px; padding: 7px 0 7px 20px; position: relative; border-top: 1px solid var(--line); }
.tier li::before { content: '\2014'; position: absolute; left: 0; color: var(--acc); }

.corp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 26px; }
.corp-item h3 { font-weight: 700; font-size: 19px; margin-bottom: 8px; color: var(--acc); }
.corp-item p { font-size: 15.5px; color: var(--soft); }

/* the quote form */
.quote-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(26px, 4vw, 44px); max-width: 820px;
}
.quote-panel h2 { margin-bottom: 8px; }
.quote-lead { color: var(--soft); max-width: 52ch; margin-bottom: 26px; }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.quote-form label { display: block; font-weight: 600; font-size: 14px; }
.quote-form input, .quote-form select, .quote-form textarea {
  display: block; width: 100%; margin-top: 6px; font-family: inherit; font-size: 15.5px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
.quote-form textarea { resize: vertical; }
.quote-form input:focus-visible, .quote-form select:focus-visible, .quote-form textarea:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 1px;
}
.qf-full { display: block; margin-bottom: 18px; }
.qf-optional { font-weight: 400; color: var(--soft); font-size: 13px; }
.qf-fieldset { border: 0; margin-bottom: 18px; }
.qf-fieldset legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.qf-radio {
  display: flex; align-items: center; gap: 9px; font-weight: 400; font-size: 15px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); margin-bottom: 8px; cursor: pointer;
}
.qf-radio:has(:checked) { border-color: var(--acc); }
.qf-radio input { width: auto; margin: 0; accent-color: var(--acc); }
/* visible to bots, not to people or screen readers */
.qf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qf-error { margin-bottom: 14px; padding: 11px 14px; border-radius: 8px; background: #fbe4e1; color: var(--acc-deep); font-size: 14.5px; }
.qf-submit { width: auto; min-width: 220px; margin-top: 0; }
.qf-fine { margin-top: 14px; font-size: 13.5px; color: var(--soft); }
.qf-done h3 { font-weight: 700; font-size: 24px; margin-bottom: 10px; color: var(--acc); }

@media (max-width: 620px) {
  .qf-row { grid-template-columns: 1fr; gap: 14px; }
  .qf-submit { width: 100%; }
}

/* Product photograph on a gift tier.
   The photographs are landscape, around 1.2:1, so a 4:3 panel holds them with
   barely any margin. contain keeps
   the whole box in frame - cropping a photograph of the thing being sold is
   not a trade worth making. The cream ground gives a tall or wide photo
   somewhere to sit without looking like a mistake. */
.tier-img {
  width: calc(100% + 48px); margin: -26px -24px 18px; max-width: none;
  aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--bg);
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--line);
}
/* A gift box's extra photographs, under its main one. */
.tier-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px; }
.tier-thumb {
  padding: 0; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); cursor: pointer; overflow: hidden; line-height: 0;
  transition: border-color .2s ease;
}
.tier-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tier-thumb:hover { border-color: var(--acc); }
.tier-thumb.is-active { border-color: var(--acc); border-width: 2px; }
.tier-thumb:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Keeps a box with no photograph the same height as its neighbours, so a row
   of cards still lines up. */
.tier-img-none {
  width: calc(100% + 48px); margin: -26px -24px 18px;
  aspect-ratio: 4 / 3; background: var(--bg);
  border-radius: 10px 10px 0 0; border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--soft); font-size: 13.5px; letter-spacing: .04em;
}

/* Turnstile sits above the submit button; it collapses to nothing until the
   widget loads, so the form does not jump when it does. */
.qf-turnstile { margin-bottom: 16px; min-height: 65px; }

/* ---------- product page: photo and what's inside on the left, buying on the right ---------- */
/* desktop: photo then what is inside down the left, everything to buy down the right.
   phone: photo, then the buying, then what is inside - the price and the date
   should not sit below a list of crackers. */
.pdp {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "media info" "inside info"; column-gap: 56px; align-items: start;
}
.pdp-media { grid-area: media; }
.pdp-info { grid-area: info; }
.pdp-inside { grid-area: inside; }
@media (max-width: 860px) {
  .pdp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "info" "inside"; }
  .pdp-info { margin-top: 26px; }
}
.product-page.block { padding-top: 26px; }

.pdp-img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.pdp-media .product-thumbs { margin-top: 12px; }

.pdp-inside { margin-top: 30px; }
.pdp-inside h2 { font-size: 22px; margin-bottom: 10px; text-wrap: initial; }
.pdp-inside ul { list-style: none; margin: 0; }
.pdp-inside li { font-size: 16px; padding: 9px 0 9px 22px; position: relative; border-top: 1px solid var(--line); }
.pdp-inside li:last-child { border-bottom: 1px solid var(--line); }
.pdp-inside li::before { content: '\2014'; position: absolute; left: 0; color: var(--acc); }

.pdp-sku { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: 10px; }
.pdp-sku span { letter-spacing: .06em; color: var(--ink); margin-left: 6px; }
.shelf .pdp-info h1 { font-size: clamp(34px, 4.2vw, 50px); line-height: 1.08; margin-bottom: 14px; }
.pdp-price { font-weight: 700; font-size: 32px; color: var(--acc); line-height: 1.2; margin-bottom: 16px; }

.pdp-desc { font-size: 17px; line-height: 1.65; }
.pdp-desc.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.pdp-more {
  margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 15px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px;
}
.pdp-more:hover { color: var(--acc); }
.pdp-note { margin-top: 14px; font-size: 14.5px; color: var(--soft); }

/* min-width: a fieldset is otherwise as wide as its widest option, which pushes a phone page sideways */
.pdp-gift { border: 0; border-top: 1px solid var(--line); margin: 26px 0 0; padding: 22px 0 0; min-width: 0; }
.pdp-gift legend { font-weight: 700; font-size: 18px; padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.pdp-field { display: block; margin-top: 14px; clear: both; }
.pdp-label { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.pdp-label em { font-style: normal; font-weight: 400; color: var(--soft); font-size: 13px; }
.pdp-field select, .pdp-field input, .pdp-field textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px;
}
.pdp-field textarea { resize: vertical; min-height: 96px; }
.pdp-field select:focus-visible, .pdp-field input:focus-visible, .pdp-field textarea:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 1px;
}
.pdp-card { margin-top: 16px; clear: both; }
.pdp-card summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--acc); }
.pdp-card[open] summary { margin-bottom: 4px; }
.pdp-hint { font-size: 13px; color: var(--soft); margin-top: 8px; }

.pdp-buy { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.pdp-buy .shop-qty { display: flex; align-items: center; gap: 12px; }
.pdp-buy .shop-qty button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: 18px; line-height: 1;
}
.pdp-buy .shop-qty button:hover { border-color: var(--acc); color: var(--acc); }
.pdp-buy .btn.buy { flex: 1; min-width: 200px; margin: 0; }
.pdp-error { margin-top: 10px; color: var(--acc); font-weight: 600; font-size: 14.5px; }
.pdp-fine { margin-top: 18px; font-size: 13.5px; color: var(--soft); }
.pdp-closed { margin-top: 22px; }
.pdp-bulk { margin-top: 14px; font-size: 14px; color: var(--soft); }
.pdp-bulk a, .pdp-error a { color: var(--acc); font-weight: 600; }
.pdp-more-copy { margin-top: 20px; }

/* ---------- gift box cards: the whole card opens the box's page ---------- */
.tier-link { color: inherit; text-decoration: none; transition: box-shadow .2s, border-color .2s, transform .2s; }
.tier-link:hover { border-color: var(--acc); box-shadow: 0 10px 28px rgba(60, 35, 32, .12); transform: translateY(-2px); }
.tier-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.tier-link .tier-for { margin-bottom: 18px; }
.tier-cta { margin-top: auto; font-weight: 700; font-size: 15px; color: var(--acc); }
.tier-link:hover .tier-cta { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- cart: a gift line's date and card ---------- */
.cart-date { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; font-size: 13.5px; }
.cart-date span { font-weight: 600; }
.cart-date > div { flex: 1; min-width: 0; }
.cart-date .datepick-btn { padding: 7px 10px; font-size: 14px; border-radius: 6px; }
.cart-date.is-missing .datepick-btn { border-color: var(--acc); }
.cart-date .datepick-pop { left: auto; right: 0; }

/* ---------- delivery date calendar (js/shop/date-picker.js) ---------- */
.datepick { position: relative; }
.datepick-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: inherit; font-size: 16px; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px;
}
.datepick-btn.is-empty { color: var(--soft); }
.datepick-btn svg { color: var(--acc); flex: none; }
.datepick-btn:hover, .datepick-btn[aria-expanded="true"] { border-color: var(--acc); }
.datepick-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.datepick.is-missing .datepick-btn { border-color: var(--acc); }
.datepick-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 300px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  box-shadow: 0 14px 34px rgba(60, 35, 32, .18);
}
.datepick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
.datepick-nav {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
}
.datepick-nav:disabled { opacity: .35; cursor: default; }
.datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.datepick-dow { font-size: 12px; font-weight: 600; color: var(--soft); padding: 4px 0; }
.datepick-day {
  aspect-ratio: 1; border: 0; border-radius: 50%; background: none; font-family: inherit; font-size: 14px;
  color: var(--ink); cursor: pointer; font-weight: 600;
}
.datepick-day:hover:not(:disabled) { background: var(--bg); box-shadow: inset 0 0 0 1px var(--acc); }
.datepick-day:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.datepick-day:disabled { color: var(--line); font-weight: 400; cursor: default; }
.datepick-day.is-chosen { background: var(--acc); color: #fff; }
.datepick-note { margin-top: 8px; font-size: 12.5px; color: var(--soft); }
.cart-card { font-size: 13px; color: var(--soft); margin: 4px 0 2px; overflow-wrap: anywhere; }
.shop-product-body > a.btn.buy { margin-top: auto; text-align: center; text-decoration: none; }

/* ---------- order received (thank-you page, on the cream background) ---------- */
.thanks { max-width: 680px; }
.thanks h1 { margin: 6px 0 18px; }
.thanks-lead { color: var(--ink); font-size: 18px; line-height: 1.6; max-width: 56ch; }
.thanks-lead + .thanks-lead { margin-top: 14px; }
.thanks-lead a { color: var(--acc); }
.thanks-credit {
  margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font-size: 16px; line-height: 1.55; max-width: 56ch;
}
.thanks-credit a { color: var(--acc); font-weight: 600; }
.thanks-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn.thanks-ghost { background: transparent; border: 1.5px solid var(--acc); color: var(--acc); }
.btn.thanks-ghost:hover { background: var(--acc); color: var(--acc-ink); }
.thanks-actions .btn:not(.thanks-ghost) { background: var(--acc); color: var(--acc-ink); }
.thanks-actions .btn:not(.thanks-ghost):hover { background: var(--acc-deep); }

/* ---------- find us in store (stockists) ---------- */
.find-body { max-width: 980px; }
.stockists { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .stockists { grid-template-columns: 1fr; } }
.stockist {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--acc); border-radius: 8px; padding: 18px 22px;
}
.stockist h3 { font-size: 21px; font-weight: 700; line-height: 1.25; }
.stockist-tag + h3 { padding-right: 64px; }
.stockist-logo { height: 88px; display: flex; align-items: center; }
.stockist-logo img { height: 88px; width: auto; max-width: 100%; object-fit: contain; }
.stockist-logo img.logo-wide { height: 44px; }
.stockist-logo + p { margin-top: 12px; }
.stockist p { margin-top: 4px; color: var(--soft); }
.stockist a { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 15px; }
.stockist-tag {
  position: absolute; top: 16px; right: 18px;
  background: var(--acc); color: var(--acc-ink); border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px;
}
.find-note { margin-top: 22px; color: var(--soft); }