/* ============================================================
   Boosh Mark — main stylesheet.
   Ported faithfully from the Version C design handoff.

   The :root block below holds every design token (colors, etc.)
   from the handoff README — change a color once here and it
   changes everywhere.
   ============================================================ */

/* ------------------------------------------------------------
   FONTS — served from our own site, not Google's.

   These used to load from fonts.googleapis.com, which cost us a
   round trip to somebody else's server BEFORE the browser was
   allowed to draw anything at all. That was the pause you saw on
   first load. Now the files sit in assets/fonts/ and arrive with
   this stylesheet.

   It also means a visitor's browser no longer quietly reports
   their IP address to Google on every page view — which keeps
   the Privacy page honest about who sees what.

   Newsreader is a VARIABLE font: one file covers every weight
   from 300 to 500, which is why there's a range below rather
   than three separate files. Space Mono isn't, so 400 and 700
   are genuinely separate.

   The unicode-range lines are Google's own. They let the browser
   skip the "latin-ext" files unless a page actually uses an
   accented character, so most visitors download only the latin
   ones (~291 KB rather than ~508 KB).

   font-display: swap means text shows immediately in Georgia and
   redraws when the real font lands — never an invisible page.

   Both fonts are open source under the SIL Open Font License,
   which expressly permits hosting them like this.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/space-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/space-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:            #f6f1e6;   /* page background (cream) */
  --ink:           #2c2519;   /* primary text, dark buttons, dark bands */
  --ink-deep:      #1c1b17;   /* sign mockup card, dark thumbnails */
  --terracotta:    #c47a4f;   /* eyebrow labels, selection highlight, secondary CTA */
  --rust:          #9a5b3b;   /* links, prices, italic emphasis, active states */
  --rust-hover:    #7a4127;
  --muted:         #6e6350;   /* secondary paragraph text */
  --taupe:         #8a7d67;   /* tertiary labels, latin names */
  --taupe-light:   #b0a48c;   /* fine print, placeholders, disabled */
  --taupe-caption: #a89a80;   /* photo placeholder captions */
  --panel:         #efe7d6;   /* manifesto band, order summary, review cards bg */
  --card:          #fdfbf5;   /* input backgrounds, review + option cards */
  --card-selected: #efe1d3;   /* selected variation/amount option */
  --border:        #e2d9c6;   /* section dividers, card borders */
  --border-input:  #d8ceba;
  --border-subtle: #cfc4b0;   /* summary hairlines, in-cart stepper */
  --ph-base:       #ece3d1;   /* photo placeholder background */
  --ph-stripe:     #e4dac6;   /* photo placeholder diagonal stripe */
  --sign-ink:      #f4f1ea;   /* engraved text on the dark sign card */
  --error:         #b3452f;
  --serif: 'Newsreader', Georgia, serif;
  --mono:  'Space Mono', monospace;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body { color: var(--ink); font-family: var(--serif); min-height: 100vh; overflow-x: clip; }
a { color: var(--rust); text-decoration: none; }
a:hover { color: var(--rust-hover); }
/* Links sitting inside a sentence are underlined. Everywhere else on the
   site a link is obvious from where it sits — in running prose, rust text
   on its own is easy to read straight past, and colour alone isn't a cue
   everyone can see. */
.body-copy a, .faq-a a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--rust-underline, rgba(176, 92, 55, 0.4)); }
.body-copy a:hover, .faq-a a:hover { text-decoration-color: currentColor; }
::selection { background: var(--terracotta); color: var(--bg); }
input, textarea, button, select { font-family: inherit; }
textarea::placeholder, input::placeholder { color: var(--taupe-light); }
img { max-width: 100%; display: block; }
/* The hidden attribute must always win, even over display:flex rules. */
[hidden] { display: none !important; }

/* Every view fades in on load, like the prototype's page transitions. */
@keyframes bkFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fade-in { animation: bkFade 0.5s ease both; }

/* ---------- Space Mono label styles ---------- */
/* Eyebrow/kicker: the small terracotta label above headings. */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta); }
/* Meta: taupe labels — nav-adjacent info, form labels, step numbers. */
.meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
/* Fine print: lightest, smallest. */
.fine { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-light); }
.mono-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); cursor: pointer; }
.mono-link:hover { color: var(--rust-hover); }
/* The category name on a "View more" link. Hidden by default and revealed
   at 768px: the narrow layout is the one that can't spare the words, so it
   gets the shorter link rather than needing a rule to take it away. */
.vm-name { display: none; }
@media (min-width: 768px) { .vm-name { display: inline; } }
/* The repeat at the foot of each overview section. */
.view-more-end { margin-top: 36px; text-align: center; }

/* ---------- Headings ---------- */
h1, h2, h3 { font-weight: 300; }
.h-hero    { font-size: clamp(46px, 7vw, 112px); line-height: 0.96; letter-spacing: -0.02em; }
.h-page    { font-size: clamp(40px, 5vw, 80px);  line-height: 1.0;  letter-spacing: -0.02em; }
.h-section { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; }
.h-band    { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.h-mid     { font-size: clamp(32px, 4vw, 54px);  line-height: 1.04; }
.h-cta     { font-size: clamp(36px, 4.6vw, 68px); line-height: 1.06; }
.italic-rust { font-style: italic; color: var(--rust); }
.lead  { font-size: 21px; line-height: 1.6; color: var(--muted); }
.body-copy { font-size: 19px; line-height: 1.6; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 16px 36px; background: var(--ink); color: var(--bg);
}
.btn:hover { color: var(--bg); opacity: 0.92; }
.btn-terra { background: var(--terracotta); color: var(--ink); }
.btn-terra:hover { color: var(--ink); }
.btn-outline { background: none; border: 1px solid var(--ink); color: var(--ink); }
.btn-outline:hover { color: var(--ink); background: rgba(44, 37, 25, 0.05); opacity: 1; }
.btn-block { display: block; width: 100%; }

/* ---------- Layout wrappers ---------- */
.wrap      { max-width: 1360px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.wrap-1000 { max-width: 1000px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.wrap-1020 { max-width: 1020px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.wrap-760  { max-width: 760px;  margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.band-top    { border-top: 1px solid var(--border); }
.band-bottom { border-bottom: 1px solid var(--border); }
.band-panel  { background: var(--panel); }
.band-dark   { background: var(--ink); color: var(--bg); }

/* Two-column editorial band: image one side, text the other. */
.split { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; }
.split > .split-media { position: relative; min-height: 460px; }
.split > .divider-right { border-right: 1px solid var(--border); }
.split-copy { padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; }

/* ---------- Sticky top nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px; background: rgba(246, 241, 230, 0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-nav .wordmark { font-size: 24px; font-weight: 500; letter-spacing: 0.01em; font-style: italic; color: var(--ink); }
.site-nav .nav-links {
  display: flex; align-items: center; gap: 30px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.site-nav .nav-links a { color: var(--muted); }
.site-nav .nav-links a:hover { color: var(--ink); }
.site-nav .nav-links a.nav-cart { color: var(--rust); }

/* ---------- Marketing ticker ----------
   The scrolling band under the menu on the home page, The Story and Field
   Notes. Same two colours as .band-dark, and the .statement font treatment
   at a smaller size. The track holds the message list twice and slides
   exactly half its width, so the loop has no visible seam. */
.ticker {
  display: block; overflow: hidden;
  background: var(--ink); color: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(14px, 1.15vw, 17px); line-height: 1.4;
}
/* a:hover would otherwise repaint the whole band rust. */
.ticker:hover { color: var(--bg); }
.ticker-track { display: flex; width: max-content; animation: ticker-scroll 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }  /* so a line can be read */
.ticker-run { display: flex; }
.ticker-item { white-space: nowrap; }
.ticker-item::after { content: '·'; color: var(--taupe); margin: 0 2.2em; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Motion turned off in the OS: hold still and let the visitor scroll the
   band by hand instead. The duplicate run would only be dead weight. */
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker-track { animation: none; }
  .ticker-track > [aria-hidden="true"] { display: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border); padding: 52px 48px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  max-width: 1360px; margin: 0 auto;
}
/* Footer navigation — four columns of links above the wordmark: the plant
   categories, the sign types, the shop, and Boosh Mark itself. Drops to two
   columns on a tablet and one on a phone, where four would be unreadable. */
.footer-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px;
  width: 100%; padding-bottom: 40px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--taupe); margin-bottom: 3px; }
.footer-col a { font-size: 15px; color: var(--muted); }
.footer-col a:hover { color: var(--rust); }
.footer-base { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; width: 100%; padding-top: 28px; border-top: 1px solid var(--border); }
@media (max-width: 980px) {
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .footer-nav { grid-template-columns: 1fr; gap: 26px; }
}
.site-footer .wordmark { font-style: italic; font-size: 22px; }

/* ---------- Photo placeholders ----------
   Striped beige boxes standing in for photography, each with a
   caption naming the intended shot. Swap for real <img> later. */
.ph {
  position: relative; background: var(--ph-base); border: 1px solid var(--border);
  background-image: repeating-linear-gradient(135deg, var(--ph-stripe) 0 2px, transparent 2px 22px);
}
.ph-16-8 { aspect-ratio: 16 / 8; } .ph-16-7 { aspect-ratio: 16 / 7; }
.ph-4-3  { aspect-ratio: 4 / 3; }  .ph-3-4  { aspect-ratio: 3 / 4; }
.ph-4-5  { aspect-ratio: 4 / 5; }  .ph-1-1  { aspect-ratio: 1 / 1; }
.ph-tight  { background-image: repeating-linear-gradient(135deg, var(--ph-stripe) 0 2px, transparent 2px 16px); }
.ph-tiny   { background-image: repeating-linear-gradient(135deg, var(--ph-stripe) 0 2px, transparent 2px 12px); }
.ph-loose  { background-image: repeating-linear-gradient(135deg, var(--ph-stripe) 0 2px, transparent 2px 24px); }
.ph-looser { background-image: repeating-linear-gradient(135deg, var(--ph-stripe) 0 2px, transparent 2px 26px); }
.ph-caption {
  position: absolute; top: 18px; left: 18px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--taupe-caption); text-transform: uppercase;
}
.ph-caption-sm { top: 12px; left: 12px; font-size: 8px; letter-spacing: 0.14em; }
/* A real photograph fills exactly the box its placeholder occupied, so
   adding photos never shifts the layout. */
.ph.has-photo, .card-img.has-photo { background-image: none; }
/* The photo is layered in behind, so captions and overlays (like the sign
   mockup on the home hero) keep sitting on top of it. Every photo box has
   its own height from aspect-ratio or min-height, so this is safe. */
.ph > img, .card-img > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- Product card (collection, home preview, related) ---------- */
.product-card { cursor: pointer; display: block; color: inherit; }
.product-card:hover { color: inherit; }
.product-card .card-img {
  aspect-ratio: 3 / 4; position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--ph-base); border: 1px solid var(--border);
  background-image: repeating-linear-gradient(135deg, var(--ph-stripe) 0 2px, transparent 2px 20px);
  transition: transform 0.3s;
  /* Cards hold a miniature sign; keep a little breathing room around it and
     clip anything unusually long rather than letting it break the grid. */
  padding: 6% 2%; overflow: hidden;
}
.product-card .card-sign { width: 100%; }
.product-card:hover .card-img { transform: translateY(-6px); }
.product-card .card-latin { font-style: italic; font-size: 22px; color: var(--taupe-caption); padding: 0 16px; text-align: center; }
.product-card .card-row { padding: 18px 2px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.product-card .card-name { font-size: 24px; }
.product-card .card-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--taupe); text-transform: uppercase; margin-top: 5px; }
/* Which of the five sign types this card is showing, sitting on the same line
   as the tag: "SPRING VEGETABLE · HOW TO GROW". Inherits the tag's size, font
   and capitals; rust rather than taupe so the eye lands on the part that
   varies. The dot is taupe so it separates without shouting, and is skipped
   when there's no tag to separate from. */
.product-card .card-sign-type { color: var(--rust); }
.product-card .card-sign-type::before { content: '·'; color: var(--taupe); margin: 0 0.45em; }
.product-card .card-sign-type[data-no-dot]::before { content: none; }
.product-card .card-price { font-family: var(--mono); font-size: 13px; color: var(--rust); flex: none; }
.product-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.related-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.related-grid .card-latin { font-size: 19px; }
.related-grid .card-name  { font-size: 21px; }
.related-grid .card-row   { padding-top: 16px; }

/* ---------- Sign mockup ----------
   The engraved-sign visual.

   EVERY dimension below is in `em`, so the whole sign scales from the one
   font-size set on `.sign`. That's what makes the small version on the shop
   cards a true miniature — same shape and the same line breaks as the big
   one on the product page, just smaller.

   --s is the size dial: 1 = full size, 0.92 on the product page. The old
   `calc(Npx * var(--s))` numbers are preserved here as their em equivalents
   (divide by 12.5, the base line size). */
.sign {
  width: 100%;
  font-size: calc(12.5px * var(--s, 1));
  filter: drop-shadow(0 40px 60px rgba(44, 37, 25, 0.45));
  --s: 1;
}
.sign-card {
  background: var(--ink-deep); color: var(--sign-ink); font-family: var(--serif);
  border-radius: 0.8em;               /* was 10px */
  padding: 2.08em 2.4em 2.72em;       /* was 26px 30px 34px */
  position: relative;
}
.sign-title { font-size: 2.4em; font-weight: 500; color: #ffffff; line-height: 1; }   /* was 30px */
.sign-latin { font-style: italic; font-size: 1.2em; margin-top: 0.5em; }           /* was 15px / 2px / 0.1333em*/
.sign-rule  { height: 1px; background: rgba(255, 255, 255, 0.45); margin: 1.12em 0; } /* was 14px */
/* A custom sign with the divider switched off keeps the rule's breathing
   room — only the line goes, so the words don't crowd the subtitle. */
.sign-rule.is-blank { background: none; }
.sign-heading { font-style: italic; font-size: 1.04em; margin: 1.0769em 0 0.4615em; } /* was 13px / 14px / 6px */
.sign-heading:first-of-type { margin-top: 0; }
.sign-line { font-size: 1em; line-height: 1.5; margin-bottom: 0.24em; overflow-wrap: break-word; }
/* A blank line in the plant data becomes a paragraph gap on the sign. */
.sign-space { height: 0.8em; }        /* was 10px */
.sign-stake {
  /* A triangle drawn with borders: the left+right borders set its width,
     the top border its length. 8.64em each side = 17.28em wide overall,
     and 15.68em long — 108px x 196px at full size, matching the real
     sign's proportions. */
  width: 0; height: 0;
  border-left: 8.64em solid transparent;
  border-right: 8.64em solid transparent;
  border-top: 15.68em solid var(--ink-deep);
  margin-left: 50%; transform: translateX(-50%); margin-top: -1px;
}

/* The miniature sign on a shop card. The font-size is a fixed fraction of
   the card's own width, so the card sign is a scaled copy at any card size
   — no breakpoints needed.

   The product page ratio is 11.5px ÷ 440px = 2.614%. We use slightly less
   here (2.45%) because letter widths don't scale perfectly linearly: at
   8–9px, rounding accumulates across a long line and a recipe that fits
   comfortably at full size can tip onto a second row. The few percent of
   extra width keeps every line break identical to the real sign.

   If you ever add a much longer recipe line and see it wrap on a card,
   lower this number a touch. */
.card-sign { container-type: inline-size; }
.card-sign .sign { font-size: 2.45cqw; filter: drop-shadow(0 2.5em 4em rgba(44, 37, 25, 0.4)); }

/* ---------- Gift card visual (home promo, gift page, emails page) ---------- */
.gift-visual {
  width: 100%; max-width: 440px; aspect-ratio: 1.6 / 1;
  background: linear-gradient(135deg, #2c2519, #403422); color: var(--bg);
  border-radius: 14px; padding: 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 24px 60px -24px rgba(44, 37, 25, 0.5);
  position: relative; overflow: hidden; text-align: left;
}
.gift-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(196, 122, 79, 0.10) 0 2px, transparent 2px 22px);
}
.gift-visual > * { position: relative; }
.gift-visual .gift-head { display: flex; justify-content: space-between; align-items: baseline; }
.gift-visual .gift-brand { font-style: italic; font-size: 26px; }
.gift-visual .gift-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); }
.gift-visual .gift-caption { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-light); }
.gift-visual .gift-amount { font-weight: 300; font-size: 52px; line-height: 1; margin-top: 4px; }
.gift-visual .gift-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.gift-visual .gift-code { font-family: var(--mono); font-size: 15px; letter-spacing: 0.12em; margin-top: 4px; }

/* Home gift-card promo: two columns that stack on small screens. */
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
@media (max-width: 980px) { .promo-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Breadcrumb ---------- */
.crumbs { padding-top: 20px; padding-bottom: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
.crumbs a { color: var(--taupe); }
.crumbs a:hover { color: var(--ink); }
.crumbs .here { color: var(--ink); }

/* ---------- Product page ---------- */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 16px; padding-bottom: 96px; align-items: start; }
.preview-sticky { position: sticky; top: 80px; }
.preview-stage {
  position: relative; border: 1px solid var(--border); background: var(--ph-base);
  background-image: repeating-linear-gradient(135deg, var(--ph-stripe) 0 2px, transparent 2px 26px);
  padding: 64px 48px; display: flex; align-items: center; justify-content: center; min-height: 520px;
}
/* 440px is set so the sign's proportions match the real 95–110 mm sign:
   at this width a long recipe line (e.g. Celery's Mirepoix) fits on one
   line with the same margin on the right as the left, the way it does on
   the physical sign. Height is left to the text, as in real life. */
.preview-stage .sign-holder { width: 100%; max-width: 440px; }
.preview-note { margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--muted); font-style: italic; }
.shots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.shot { position: relative; cursor: pointer; transition: opacity 0.2s; }
.shot:hover { opacity: 0.8; }
.shot.shot-primary { border-color: var(--rust); }
.shot .shot-label { position: absolute; bottom: 6px; left: 6px; font-family: var(--mono); font-size: 7px; letter-spacing: 0.1em; color: var(--taupe); text-transform: uppercase; }
.shot .shot-zoom  { position: absolute; top: 6px; right: 7px; font-family: var(--mono); font-size: 9px; color: var(--taupe); }
/* Over a real photo the tiny label becomes noise, and the zoom glyph
   needs to stay legible whatever the photo looks like. */
.shot.has-photo .shot-label { display: none; }
.shot.has-photo .shot-zoom { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

.product-title { font-size: 56px; line-height: 1.0; letter-spacing: -0.02em; margin-top: 16px; font-weight: 300; }
.product-latin { font-style: italic; font-size: 20px; color: var(--taupe); margin-top: 6px; }
.price-row { margin-top: 16px; display: flex; align-items: baseline; gap: 14px; }
.price-row .price { font-size: 24px; color: var(--rust); }

/* The six "story" option cards. */
.variation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.variation-card {
  cursor: pointer; padding: 15px 17px;
  border: 1px solid var(--border-input); background: var(--card);
  transition: all 0.2s;
}
.variation-card .v-label { font-size: 18px; color: var(--ink); }
.variation-card .v-sub { font-size: 15px; color: var(--taupe); margin-top: 3px; font-style: italic; }
.variation-card.selected { border-color: var(--rust); background: var(--card-selected); }
.variation-card.selected .v-label { color: var(--rust); }

.custom-words textarea {
  width: 100%; min-height: 112px; background: var(--card);
  border: 1px solid var(--border-input); color: var(--ink);
  padding: 16px; font-family: var(--serif); font-size: 17px; line-height: 1.5; resize: vertical;
}
.custom-count { display: block; margin-top: 8px; text-align: right; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--taupe-light); }

/* Write-your-own sign editor (memorials, family garden signs). */
.custom-sign-form label { display: block; margin-bottom: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.custom-sign-form .opt { text-transform: none; letter-spacing: 0.04em; color: var(--taupe-light); }
.custom-sign-form input[type="text"],
.custom-sign-form input:not([type]),
.custom-sign-form textarea {
  display: block; width: 100%; margin-top: 8px;
  background: var(--card); border: 1px solid var(--border-input); color: var(--ink);
  padding: 14px 15px; font-family: var(--serif); font-size: 17px; line-height: 1.5;
  text-transform: none; letter-spacing: normal;
}
.custom-sign-form textarea { resize: vertical; }
.custom-sign-form label.checkbox { display: flex; align-items: center; gap: 9px; }
.custom-sign-form label.checkbox input { width: auto; margin: 0; }

/* Quantity stepper (product page — heavy border). */
.stepper { display: flex; align-items: center; border: 1px solid var(--ink); }
.stepper button { background: none; border: none; color: var(--ink); width: 46px; height: 52px; font-size: 20px; cursor: pointer; }
.stepper button:disabled { opacity: 0.3; cursor: default; }
.stepper .stepper-value { width: 42px; text-align: center; font-family: var(--mono); font-size: 14px; }
.buy-row { margin-top: 40px; display: flex; align-items: center; gap: 16px; }
.buy-row .btn { flex: 1; padding: 18px; }
.qty-note { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust); }

/* Volume-discount prompt ("add 1 more sign and save…"), used on the
   product page and the checkout page. */
.tier-nudge {
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--border-subtle); background: var(--panel);
  display: flex; gap: 14px; align-items: flex-start;
}
.tier-nudge .tn-mark { font-family: var(--mono); font-size: 18px; color: var(--rust); line-height: 1.2; flex: none; }
.tier-nudge .tn-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); }
.tier-nudge .tn-text { font-size: 16px; line-height: 1.5; margin-top: 6px; }
.tier-nudge .tn-link { display: inline-block; margin-top: 10px; }
.tier-nudge.unlocked { border-color: var(--rust); }
.tier-nudge.unlocked .tn-label { color: var(--rust); }

/* The "6+ $7.00 each · 8+ $6.50" line under a product price. */
.tier-line { margin-top: 10px; }

/* Reviews */
.review-summary { text-align: right; }
.review-stars { font-size: 22px; color: var(--rust); letter-spacing: 2px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { background: var(--card); border: 1px solid var(--border); padding: 30px; }
.review-card .r-stars { font-size: 16px; color: var(--rust); letter-spacing: 2px; }
.review-card .r-title { font-size: 20px; margin-top: 16px; line-height: 1.25; }
.review-card .r-body  { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.review-card .r-author { margin-top: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); }

/* Home page: customers' photos, scrolling sideways. Same section chrome as
   the reviews band above; only the grid becomes a scrolling row. Pure CSS —
   swipe on a phone, trackpad-scroll or drag the bar on a desktop. */
.photo-scroller {
  display: flex; gap: 24px; align-items: flex-start;   /* captions vary in length */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;              /* room for the scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}
.photo-scroller::-webkit-scrollbar { height: 6px; }
.photo-scroller::-webkit-scrollbar-track { background: transparent; }
.photo-scroller::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }
.photo-card { flex: 0 0 320px; scroll-snap-align: start; }
.photo-card .ph { aspect-ratio: 4 / 5; }
/* Your own wording, in the same small mono style as a review's author line.
   line-height gives captions that run to two lines room to breathe. */
.photo-card .p-caption {
  margin-top: 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; line-height: 1.6; text-transform: uppercase; color: var(--taupe);
}
@media (max-width: 560px) { .photo-card { flex-basis: 260px; } }

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.engrave-list { border: 1px solid var(--border-input); background: var(--card); }
.engrave-line { display: flex; justify-content: space-between; gap: 16px; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.engrave-line:last-child { border-bottom: none; }
.engrave-line .e-name { font-size: 18px; line-height: 1.15; }
.engrave-line .e-qty { color: var(--taupe-light); }
.engrave-line .e-story { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); margin-top: 4px; }
.engrave-line .e-words { margin-top: 8px; font-style: italic; font-size: 15px; line-height: 1.5; color: var(--ink); border-left: 2px solid var(--border-subtle); padding-left: 12px; }
/* ---- "Choose your sign type" panel (home) ----
   Five text-only cells on a dark band. Desktop: a grid, because the point
   is seeing the choice at a glance. Mobile: single-column rows, which reads
   as a list of options rather than five things to scroll past. */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(246, 241, 230, 0.14); border: 1px solid rgba(246, 241, 230, 0.14); }
.type-cell { display: block; background: var(--ink); padding: 26px 24px 28px; text-decoration: none; transition: background 0.18s ease; }
.type-cell:hover { background: #3a3226; }
.type-head { font-size: 21px; color: #f6f1e6; line-height: 1.15; }
.type-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); margin-top: 7px; }
.type-example { margin-top: 16px; font-style: italic; font-size: 14px; line-height: 1.5; color: #b0a48c; }

@media (max-width: 900px) {
  .type-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  /* Slim rows: heading and type on one line, the example beneath it. */
  .type-grid { grid-template-columns: 1fr; }
  .type-cell { padding: 18px 18px 20px; }
  .type-head { font-size: 18px; }
  .type-example { margin-top: 9px; font-size: 13px; }
}

.engrave-line .e-words .e-line + .e-line { margin-top: 3px; }
/* Small enough to sit under the wording without competing with it —
   this is a way back, not a call to action. */
.engrave-line .e-edit { display: inline-block; margin-top: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); border-bottom: 1px solid var(--border); text-decoration: none; }
.engrave-line .e-edit:hover { color: var(--rust); border-bottom-color: var(--rust); }
.engrave-line .e-price { font-family: var(--mono); font-size: 13px; color: var(--ink); flex: none; }

/* Shipping zone choice — same selected-state language as the gift-card
   amount chips and the product story cards. */
.zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zone-option {
  cursor: pointer; text-align: left; padding: 16px 18px;
  border: 1px solid var(--border-input); background: var(--card); color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  transition: all 0.2s;
}
.zone-option .z-label { font-family: var(--serif); font-size: 18px; }
.zone-option .z-price { font-family: var(--mono); font-size: 13px; color: var(--taupe); }
.zone-option.selected { border-color: var(--rust); background: var(--card-selected); }
.zone-option.selected .z-label,
.zone-option.selected .z-price { color: var(--rust); }
@media (max-width: 560px) { .zone-grid { grid-template-columns: 1fr; } }

.code-row { display: flex; gap: 10px; }
.code-row input {
  flex: 1; background: var(--card); border: 1px solid var(--border-input); color: var(--ink);
  padding: 14px 15px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em;
}
.code-row .btn-outline { padding: 0 24px; font-size: 10px; letter-spacing: 0.14em; }
.code-msg { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.code-msg.ok { color: var(--rust); }
.code-msg.err { color: var(--error); }

.stripe-callout { margin-top: 34px; padding: 22px 24px; border: 1px solid var(--border); background: var(--panel); display: flex; gap: 16px; align-items: flex-start; }
.stripe-callout .arrow { font-family: var(--mono); font-size: 22px; color: var(--rust); line-height: 1; }
.stripe-callout .c-title { font-size: 18px; line-height: 1.3; }
.stripe-callout p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 48ch; }

.summary-sticky { position: sticky; top: 90px; }
.reassure-box { background: var(--panel); border: 1px solid var(--border); padding: 26px 28px; margin-bottom: 20px; }
.reassure-box .quote { margin-top: 14px; font-size: 17px; line-height: 1.55; font-style: italic; color: var(--ink); }
.order-summary { background: var(--panel); border: 1px solid var(--border); padding: 32px; }
.summary-item { display: flex; gap: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.summary-item .thumb {
  width: 52px; height: 64px; flex: none; background: var(--ink-deep); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.1em; color: var(--taupe-caption); text-transform: uppercase;
}
.summary-item .s-name { font-size: 20px; line-height: 1.1; }
.summary-item .s-story { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); margin-top: 4px; }
.summary-item .s-price { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.summary-item .s-controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.stepper-sm { display: flex; align-items: center; border: 1px solid var(--border-subtle); }
.stepper-sm button { background: none; border: none; color: var(--ink); width: 28px; height: 30px; font-size: 15px; cursor: pointer; }
.stepper-sm button:disabled { opacity: 0.3; cursor: default; }
.stepper-sm .stepper-value { width: 26px; text-align: center; font-family: var(--mono); font-size: 12px; }
.remove-link { cursor: pointer; background: none; border: none; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-light); }
.summary-row { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); margin-bottom: 10px; }
.summary-row .num { font-family: var(--mono); }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.summary-total .t-label { font-size: 20px; }
.summary-total .t-value { font-size: 24px; color: var(--rust); font-family: var(--mono); }

/* ---------- Gift cards page ---------- */
.gift-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.gift-form { border: 1px solid var(--border); padding: 48px; }
.amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.amount-chip {
  cursor: pointer; text-align: center; padding: 16px 0; font-size: 20px;
  border: 1px solid var(--border-input); background: var(--card); color: var(--ink);
}
.amount-chip.selected { border-color: var(--rust); background: var(--card-selected); color: var(--rust); }
.custom-amount { flex: 1; display: flex; align-items: center; border: 1px solid var(--border-input); background: var(--card); padding: 0 12px; }
.custom-amount .dollar { color: var(--rust); font-size: 16px; }
.custom-amount input { flex: 1; border: none; background: none; outline: none; padding: 11px 8px; font-family: var(--mono); font-size: 14px; color: var(--ink); min-width: 0; }
.gift-form .field { margin-top: 0; }
.gift-form .field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
.gift-form .field label .opt { color: var(--taupe-light); text-transform: none; }
.gift-form .field input, .gift-form .field textarea {
  width: 100%; margin-top: 8px; border: 1px solid var(--border-input); background: var(--card);
  outline: none; padding: 13px 14px; font-size: 16px; color: var(--ink);
}
.gift-form .field textarea { resize: vertical; }
.gift-error { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--error); }

/* ---------- Field Notes ---------- */
.featured-note { display: grid; grid-template-columns: 1.1fr 0.9fr; border: 1px solid var(--border); }
.featured-note .note-media { position: relative; min-height: 440px; border-right: 1px solid var(--border); }
.featured-note .note-copy { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.notes-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.note-cell { padding: 56px 40px; border-right: 1px solid var(--border); }
.note-cell:last-child { border-right: none; }
.note-cell h3 { font-size: 26px; line-height: 1.16; margin-top: 12px; }
.note-cell .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); }
.note-cell p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--muted); }

/* FAQ accordion (single-open, +/− indicator) */
.faq-list { border-top: 1px solid var(--border-input); }
.faq-item { border-bottom: 1px solid var(--border-input); padding: 26px 4px; cursor: pointer; }
.faq-q { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.faq-q .q-text { font-size: 22px; line-height: 1.3; }
.faq-q .q-sign { font-family: var(--mono); font-size: 20px; color: var(--rust); flex: none; }
.faq-a { margin-top: 16px; font-size: 18px; line-height: 1.68; color: var(--muted); max-width: 64ch; }
.faq-item:not(.open) .faq-a { display: none; }

/* ---------- Home: feature trio & belief trio ---------- */
.trio { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.trio-cell { padding: 56px 40px; border-right: 1px solid var(--border); }
.trio-cell:last-child { border-right: none; }
.trio-cell .trio-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.trio-cell p { margin-top: 14px; font-size: 20px; line-height: 1.45; font-weight: 300; }
.statement { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.4; font-weight: 300; }
.statement-sm { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.34; font-weight: 300; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(28, 23, 15, 0.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 48px;
  animation: bkFade 0.25s ease both;
}
.lightbox[hidden] { display: none; }
.lightbox-inner { position: relative; width: min(880px, 90vw); }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.lightbox-bar .lb-caption { color: var(--bg); font-style: italic; font-size: 19px; }
.lightbox-bar .lb-close {
  cursor: pointer; background: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--border); border: 1px solid var(--muted); padding: 9px 16px;
}

/* ---------- Admin (simple, reuses the same design language) ---------- */
.admin-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); }
.admin-table th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 16px; }
.admin-table tr:last-child td { border-bottom: none; }
.status-chip { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border-input); color: var(--taupe); }
.status-chip.paid    { color: var(--rust); border-color: var(--rust); }
.status-chip.shipped { color: var(--ink); border-color: var(--ink); }

/* Admin: which stories a plant offers, at a glance. */
.story-chip {
  display: inline-block; margin: 0 4px 4px 0; padding: 3px 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  border: 1px solid var(--border); color: var(--taupe-light);
  background: var(--card); border-radius: 3px; opacity: 0.45;
}
.story-chip.on { opacity: 1; color: var(--rust); border-color: var(--rust); }

/* Admin forms (the plant editor). */
.admin-form label { display: block; margin-bottom: 22px; font-size: 15px; }
.admin-form .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.admin-form input[type="text"],
.admin-form input:not([type]),
.admin-form input[type="number"],
.admin-form input[type="email"],
.admin-form select,
.admin-form textarea {
  display: block; width: 100%; margin-top: 7px;
  border: 1px solid var(--border-input); background: var(--card); color: var(--ink);
  padding: 12px 13px; font-size: 16px; font-family: var(--serif);
}
.admin-form textarea { line-height: 1.5; resize: vertical; }
.admin-form .hint {
  display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--taupe);
}
.admin-form .hint code {
  font-family: var(--mono); font-size: 11px; background: var(--panel); padding: 1px 5px;
}
.admin-form label.checkbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-form label.checkbox input { width: auto; margin: 0; }
.admin-form label.checkbox .hint { flex-basis: 100%; margin-top: 2px; }
.admin-form .admin-block { margin-bottom: 26px; }
.admin-errors {
  margin-top: 24px; padding: 16px 18px;
  border: 1px solid var(--error); background: var(--card); color: var(--error);
  font-size: 15px; line-height: 1.6;
}
@media (max-width: 760px) { .admin-form .admin-grid { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .wrap, .wrap-1000, .wrap-1020, .wrap-760 { padding-left: 24px; padding-right: 24px; }
  .site-nav { padding: 16px 24px; }
  .site-nav .nav-links { gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
  .site-footer { padding: 40px 24px; }
  .split { grid-template-columns: 1fr; }
  .split > .divider-right { border-right: none; border-bottom: 1px solid var(--border); }
  .split-copy { padding: 56px 24px; }
  .split > .split-media { min-height: 320px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
  .trio-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .trio-cell:last-child { border-bottom: none; }
  .product-layout { grid-template-columns: 1fr; gap: 40px; }
  .preview-sticky { position: static; }
  .preview-stage { min-height: 380px; padding: 40px 24px; }
  .product-title { font-size: 44px; }
  .checkout-layout { grid-template-columns: 1fr; }
  .summary-sticky { position: static; }
  .gift-layout { grid-template-columns: 1fr; gap: 40px; }
  .gift-form { padding: 28px 20px; }
  .featured-note { grid-template-columns: 1fr; }
  .featured-note .note-media { border-right: none; border-bottom: 1px solid var(--border); min-height: 280px; }
  .featured-note .note-copy { padding: 40px 24px; }
  .notes-grid { grid-template-columns: 1fr; }
  .note-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .note-cell:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); }
  .buy-row { flex-wrap: wrap; }
  .variation-grid { grid-template-columns: 1fr; }
}