/* ===========================================================================
   Merry & Found
   ---------------------------------------------------------------------------
   v5.0 FIGMA REBRAND, implemented 2026-09-28 from the 12 approved design,
   foundation, component, accessibility and page-template frames. This file
   now uses the Playfair Display + Lato type system, Warm Ivory/Linen page
   surfaces, Primary Plum/Deep Ink actions and typography, and the approved
   brass/rose/sage seasonal accents. The current Figma file and this source
   are the canonical visual implementation when older brand notes disagree.

   The existing three-card rendering system, native disclosure navigation,
   generated-page architecture and affiliate-link micro-interactions remain
   intact. Shared tokens and components carry the new brand across the
   Homepage, Editorial Guide, Product-led Guide, Guides Gateway, Standard
   Page and Legal/Long-copy templates.

   What did NOT change: the space scale's underlying rhythm (still an
   8-multiple-family scale, just re-numbered against Figma's own values),
   the WCAG-first posture (every new color pairing below is contrast-checked
   in its own comment), and the accessibility mechanisms - native
   <details>/<summary>, semantic buttons, :focus-visible, prefers-reduced-
   motion, forced-colors - all of which are preserved from v3.0 untouched.

   Contents
     1.  Tokens
     2.  Reset and base
     3.  Typography
     4.  Layout
     5.  Wordmark
     6.  Buttons and CTAs
     7.  Badges
     8.  Masthead
     8b. Merchandising shortcut bar
     9.  Hero / Gift Finder intro
     10. Gift Finder (dropdown fields)
     11. Product cards (grid / carousel / list)
     11b.Section layouts (LAYOUTS mapping)
     11c.Carousel controls
     12. Editorial sections (about / how-we-pick / privacy / guides)
     13. Footer
     14. Motion and forced colours
     15. Hub tiles, nav dropdown, misc holdovers still in use
     16. 2026 Figma rebrand and page-template layer
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   Contrast ratios noted below are computed against the surface each colour
   actually sits on (WCAG 2.2 AA: 4.5:1 body text, 3:1 large text/UI).
   --------------------------------------------------------------------------- */
:root {
  /* Brand - v4, from Figma */
  --violet: #815d86;
  --violet-dark: #2d223e;
  --button-hover: #6f4d74;
  --violet-subtle: rgba(179, 158, 193, 0.24);
  --violet-subtle-line: rgba(144, 131, 167, 0.45);
  /* SURGICAL CORRECTION (2026-08-25): the merchandising strip (Section 8b)
     never actually applied this - .merch-bar had no background rule at
     all. Library/design.md Section 6 / BRAND-CONTEXT.md Section 7 both
     name it as one of the confirmed v4 anchors, from Figma node 5:51. */
  --merch-bg: #815d86;

  /* Retained from v3.0 for the two things Figma's extraction never covered
     (the wordmark's ampersand accent and an evergreen "brand" button
     variant used nowhere in the Figma file but still called from
     css rules below for the on-dark footer). Not part of the new primary
     palette; both are being reviewed for removal once BRAND-CONTEXT.md is
     updated. */
  --evergreen: #4b5b4c;
  --evergreen-dark: #364238;

  /* Neutral / surfaces, from Figma */
  --white: #ffffff;
  --surface-muted: #f5f3ee;
  --surface-linen: #fbf8f4;
  --soft-lavender: #b39ec1;
  --muted-mauve: #9083a7;
  --warm-brass: #c7a56a;
  --light-brass: #d1b07b;
  --dusty-rose: #d8b7bf;
  --terracotta: #b87860;
  --sage: #7e9773;
  --soft-sage: #97a78c;
  --soft-moss: #aab89b;
  --slate-100: #e7e3e8;
  --border: #e7e3e8;
  --divider: #e7e3e8;
  --footer-bg: #2d223e;
  --hairline: #e7e3e8;

  /* Ink, from Figma */
  --ink: #2d223e;
  --ink-muted: #625b68;
                                     computed with the real relative-luminance formula during this
                                     pass's accessibility QA, 2026-08-25. The original #94a3b8 (2.56:1)
                                     would have failed AA the moment a slot ever got a real review
                                     count - it is real informational text (a number a low-vision
                                     reader needs), not decoration exempt from the contrast rule. */
  --ink-onDark: #ffffff;
  --ink-onDark-soft: #b39ec1;

  /* Type. Figma uses Inter only, at Regular/Medium/Semibold/Bold. --serif
     now resolves to the same stack so nothing sitewide still renders in a
     serif face without every individual rule needing an edit. */
  --sans: 'Lato', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Scale. Figma gave fixed desktop values (no responsive frames existed to
     derive mobile sizes from), so the two headline roles get a fluid clamp
     anchored at the Figma value as the ceiling; everything else Figma
     specified is a fixed size used as-is at every width, matching how the
     Figma file itself defines it. */
  --t-hero-q: clamp(1.75rem, 1.35rem + 2vw, 2.125rem);   /* 28 - 34: hero/Finder question heading */
  --t-section: clamp(1.375rem, 1.1rem + 1.3vw, 1.75rem); /* 22 - 28: Section Heading (Standard Page etc.) */
  --t-sub: 1.5rem;
  --t-feature: 1.125rem;    /* 18: grid/list card title */
  --t-feature-sm: 0.9375rem; /* 15: carousel card title; nav item; CTA button; dropdown field text */
  --t-body-lg: 1rem;        /* 16: intro/lede copy */
  --t-body: 0.9375rem;
  --t-caption: 0.8125rem;   /* 13: footer link/copyright/disclosure body */
  --t-small: 0.75rem;       /* 12: label/eyebrow, rating number, review count */
  --t-stamp: 0.6875rem;     /* 11: fine print */

  /* Space. Figma's own recurring unit is 24px, inside an 8-multiple family
     (8/12/16/18/24/32/40/48/64/72/80/96/100) - renumbered onto the existing
     --s-N scale so every consumer keeps working, values updated to match. */
  --s-1: 0.25rem;   /*  4 */
  --s-2: 0.5rem;    /*  8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-4-5: 1.125rem;/* 18 */
  --s-5: 1.5rem;    /* 24 - was 20, now matches Figma's dominant unit */
  --s-6: 2rem;      /* 32 - was 24 */
  --s-7: 2.5rem;    /* 40 - was 32 */
  --s-8: 3rem;      /* 48 - was 40 */
  --s-9: 4rem;      /* 64 - was 48 */
  --s-10: 4.5rem;   /* 72 */
  --s-11: 5rem;     /* 80 */
  --s-12: 6rem;     /* 96 */

  /* Radius. Buttons/controls stay 12px (matches Figma's CTA button exactly);
     cards move to 24px; inputs/images use 6-10px per Figma. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-control: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-card: 12px;

  /* Elevation. --shadow-card uses the value from the actual generated
     implementation code (0/4/5/0.1), not the 10px-blur named effect style
     metadata also present in the file - the two disagreed (see the
     extraction notes) and the generated code is what a browser will
     actually paint, so it is treated as authoritative here. */
  --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.1);
  --shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.09);
  --shadow-micro: 0 1px 4px rgba(16, 24, 40, 0.04);

  /* Layout */
  --w-main: 75rem;      /* 1200 */
  --w-wide: 80rem;      /* 1280 */
  --w-answer: 45rem;    /* 720 */
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --sect-y: clamp(2.5rem, 1.4rem + 4vw, 4rem);

  --focus: var(--warm-brass);
}

/* ---------------------------------------------------------------------------
   2. RESET AND BASE
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato/lato-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato/lato-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato/lato-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/lato/lato-latin-900-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/playfair-display/playfair-display-latin-500-800-normal.woff2') format('woff2');
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* SURGICAL PAGE-SURFACE + SPACING FIX (2026-08-25): the main content
   canvas below the merchandising strip is #F5F5F9 (--surface-muted, an
   existing Figma-extracted token - see Section 1's TOKENS block), not
   white. Header (.masthead) and the merch strip (.merch-bar) each carry
   their own explicit background already and are unaffected by this;
   the footer keeps its own --footer-bg. This does NOT make "the body
   white" - it is the opposite correction, away from an all-white canvas. */
body {
  margin: 0;
  background-color: var(--surface-muted);
  background-image:
    linear-gradient(rgba(245, 243, 238, 0.8), rgba(245, 243, 238, 0.8)),
    url('/images/brand/rebrand/bg-tile-parchment-texture.webp');
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  background-size: auto, 940.5px 940.5px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body-lg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; }

a { color: var(--violet); }
a:hover { color: var(--violet-dark); }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.foot :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--violet);
  color: var(--ink-onDark);
  font-weight: 650;
  text-decoration: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.skip-link:focus { top: 0; color: var(--ink-onDark); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 700; text-wrap: balance; }

h1 {
  font-size: var(--t-section);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
h1 + .sect__intro { margin-top: 18px; }
h2 {
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.25;
}
h3 {
  font-size: var(--t-feature);
  font-weight: 600;
  line-height: 1.3;
}

p { margin: 0 0 var(--s-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  margin: 0 0 var(--s-3);
  font-size: var(--t-stamp);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}
.eyebrow--accent { color: var(--violet); opacity: 1; }

.sect__intro,
.hero__lede {
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.72;
  max-width: 62ch;
}

.fineprint {
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.72;
}

/* One visible, page-level affiliate disclosure replaces the repeated
   per-card labels. It is deliberately plain inline editorial copy: no box,
   badge, divider, tooltip, or interaction is required to read it. */
.affiliate-disclosure {
  display: block;
  max-width: none;
  margin: var(--s-2) 0 0;
  color: #9083a7;
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 14px;
}

/* FINAL RELATED-LINK CONSISTENCY PASS (2026-08-29): the one shared
   pattern for a related-links group, wherever it appears (Hard to Buy
   For, every gift guide's closing links - automation/build-site.js's
   relatedLine()). Deliberately its own class, not `.fineprint` reused -
   `.fineprint` is reserved for disclaimers/caveats (see /how-we-pick/'s
   methodology paragraph), and conflating the two made "related links"
   read as two different components depending on which page you were on.
   Full content width, no box, no border, no heading - a single small,
   muted line; its <a> children pick up the sitewide default link color
   (Section 3, `a { color: var(--violet) }`) same as any other link. */
.related-links {
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.72;
  margin-top: var(--s-6);
}
.related-gift-ideas { margin-top: 56px; }
.related-gift-ideas .related-links { margin-top: var(--s-3); }

/* ---------------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-main);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--w-wide); }
.narrow { max-width: var(--w-answer); }

/* NAV DROPDOWN + COMPONENT WRAPPER CORRECTION (2026-08-25): Figma's white
   surfaces (the 12-card grid, the carousel, the Standard Page list) are a
   bounded, centered component CARD sitting on the #F5F5F9 page canvas -
   not a full-bleed section background. The previous pass gave
   .sect--picks/.sect--carousel/.sect--collection a background: white
   directly on the full-width <section>, which is exactly the "full-width
   white section" the owner flagged as wrong; those three rules go back to
   canvas-colour below, and this class - applied to one wrapper element per
   section (see automation/build-site.js's buildHome()/standardPageBody())
   - carries the white card instead.

   Figma Dev Mode MCP was unavailable while building this (flagged in the
   completion report), so nothing below is an invented number - all four
   declarations reuse tokens already documented elsewhere in this file:
     - the visible canvas margin on either side of the card, and the
       card's own edge-to-content inset, both reuse --gutter (the same
       responsive inset .wrap already applies sitewide), spent twice here
       - once as this element's own margin, once as its padding - instead
       of .wrap's single padding-only inset;
     - --w-main caps the card at the same 1200px width every other
       section's content already reads at;
     - --sect-y (the site's existing section-rhythm token) is the card's
       vertical padding;
     - --r-card is the one card-radius token already documented in this
       file (Section 5), reused rather than a second, invented radius.
   Replace these four declarations with Figma's real node values (width,
   margin, padding, radius) once Dev Mode MCP is reachable - this is a
   disclosed stand-in, not a final visual decision. */
.component-surface {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--w-main);
  margin-inline: auto;
  padding: var(--sect-y) var(--gutter);
  background: var(--white);
  border-radius: var(--r-card);
}

.sect { padding-block: var(--sect-y); }

/* SURGICAL PAGE-SURFACE + SPACING FIX (2026-08-25): exactly 80px between
   the bottom of the merchandising strip and the start of the next main
   content region, on the Homepage (data-page-type "home") and every
   Standard Page (data-page-type "collection" - see automation/lib/
   layout.js's page() / automation/build-site.js's pageType values). One
   rule, on #main itself (the region right after the strip in the DOM -
   automation/lib/nav.js's renderHeader() ends with .merch-bar, then
   layout.js opens <main id="main">), using the existing 80px spacing
   token (--s-11) - not layered on top of .merch-bar's or .finder's/
   .sect--collection's own internal padding, which are untouched.
   HOLISTIC SHELL PASS (2026-08-28): 'guide' and 'finder' added. Both used
   to get this same 80px gap for free from breadcrumbs__wrap's own
   padding-top (Section 14, below) since they always carried a visible
   breadcrumb; now that layout.js only draws that row for pageType
   'info', guide/finder pages would otherwise land flush under the
   merch-bar with no gap at all, while home/collection keep this 80px -
   a real visible seam between page types the previous pass's audit
   would have caught by inspecting a rendered guide or finder page
   instead of only the shared renderer. Listing them here restores the
   same 80px everywhere a shopper doesn't see a breadcrumb row.
   HOLISTIC SHELL PASS, PART 2 (2026-08-28): 'info' added. layout.js no
   longer renders a visible breadcrumb row for ANY page type, so the
   reason 'info' was excluded above (it still had breadcrumbs__wrap's
   own padding-top) is gone - without this, About/How We Pick/Affiliate
   Disclosure/Privacy would now land flush under the merch-bar while
   every other page type keeps 80px. One shell, one spacing rule, no
   page-type exceptions left. */
body[data-page-type="home"] #main,
body[data-page-type="collection"] #main,
body[data-page-type="guide"] #main,
body[data-page-type="finder"] #main,
body[data-page-type="info"] #main {
  margin-top: var(--s-11);
}
/* FINAL SPACING + HERO LABEL CLEANUP (2026-08-25): exactly 100px between
   the bottom of the LAST main-content component and the top of the
   footer, requested as a precise pixel value (not a Figma token lookup -
   the nearest existing spacing token, --s-12, is 96px, which would not
   be "exactly 100px"), so it's written literally here rather than
   rounded to the nearest token. #main and <footer> are always direct
   siblings (automation/lib/layout.js's page()) on every page this site
   generates, so this one unconditional rule already covers all of them -
   homepage, every Standard Page (recipient/budget/seasonal/Hard to Buy
   For/Deals), the Finder, Gift Guides, and the info pages alike - unlike
   the margin-top rule just above, which only applies to two page types
   because what precedes #main differs by page. #main has no background
   of its own (see body{}, above), so the #F5F5F9 page canvas already
   shows straight through this margin with no extra rule needed to
   "preserve" it, and .foot (Section 13, below) has no margin-top of its
   own to collapse against, so this alone produces exactly 100px. */
#main { margin-bottom: 100px; }
/* h1/h2/h3 reset to margin:0 in Section 3 (Typography); every .sect heading
   needs its own space before whatever follows it (an intro paragraph, a
   tile grid, the carousel track). Fixed here once rather than per-section,
   since it applies uniformly - found while wiring the new carousel section
   in, but not specific to it. */
.sect h2 { margin-bottom: var(--s-4); }

/* NAV DROPDOWN + COMPONENT WRAPPER CORRECTION (2026-08-25): the previous
   pass made this section itself the white component surface, which paints
   the full-width <section> white edge to edge - the "full-width white
   section" bug. The white card has moved one level down to
   .component-surface (Section 4, above), wrapping the heading + grid
   inside this section instead; this section itself goes back to being
   transparent so the #F5F5F9 page canvas shows on all sides of that card.
   padding-block: 0 overrides the generic .sect rule above because the
   card's own padding (inside .component-surface) does that job now - the
   80px gap from the merchandising strip is still #main's margin-top
   (Section 4), untouched, and the 64px gap down to the carousel module is
   still .sect--carousel's own margin-top below, untouched. */
.sect--picks {
  padding-block: 0;
  color: var(--ink);
}

/* "The Ones We'd Buy First" carousel - new in v4. NAV DROPDOWN + COMPONENT
   WRAPPER CORRECTION (2026-08-25): same correction as .sect--picks above -
   the white card is now .component-surface, wrapping the carousel's own
   heading/track/controls one level down, and this section itself is
   transparent again so #F5F5F9 canvas shows around that card too.
   padding-block: 0 overrides the generic .sect rule for the same reason
   as .sect--picks (the card supplies its own padding now); margin-top
   still reuses --sect-y unchanged, so the verified 64px canvas gap
   between the picks card and this one is preserved exactly. */
.sect--carousel {
  padding-block: 0;
  margin-top: var(--sect-y);
}

/* NAV DROPDOWN + COMPONENT WRAPPER CORRECTION (2026-08-25): the Standard
   Page content container (H1/intro + the up-to-10 list cards -
   automation/build-site.js's standardPageBody(), shared by every
   recipient/budget/Hard to Buy For/Deals/Halloween page) had its white
   background on this full-width <section> directly, same full-width-
   white-section issue as .sect--picks/.sect--carousel above. The white
   card is now .component-surface, wrapping H1/intro/cards one level down
   inside standardPageBody(); this section goes back to transparent so
   #F5F5F9 shows around that card, and padding-block: 0 hands the vertical
   spacing job to the card's own padding instead of double-padding it. */
.sect--collection { padding-block: 0; }

/* INTRO CLEANUP PASS (2026-08-28): Standard Page intros (design.md
   Section 12) should extend across the available Standard Page width
   instead of being capped to the shared 62ch .sect__intro/.hero__lede
   measure. That shared rule is untouched (still governs the homepage
   hero lede and every teaser section's intro) - .sect--collection is the
   class unique to standardPageBody()'s wrapper (automation/
   build-site.js) and reaches no other section. */
.sect--collection .sect__intro { max-width: none; }

/* About is editorial copy inside the standard white surface, not a product
   list. Keep its prose aligned to the full content width and restore a clear
   section break instead of letting the second H2 touch the prior paragraph. */
.about-section p { max-width: none; }
.about-section + .about-section { margin-top: 32px; }

/* ---------------------------------------------------------------------------
   4b. GIFT GUIDES GATEWAY (Figma node 57:1380)
   --------------------------------------------------------------------------- */
.guide-gateway__surface {
  width: calc(100% - 2 * var(--gutter));
  max-width: 69.375rem;
  margin-inline: auto;
  padding: 40px;
  background: #fbf8f4;
  border-radius: var(--r-lg);
}
.guide-gateway__header h1 {
  font-size: 1.75rem;
  line-height: 32px;
}
.guide-gateway__intro {
  max-width: none;
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 26px;
}
.guide-gateway-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 499px));
  gap: 24px;
  width: 100%;
  max-width: 1022px;
  margin: 40px auto 0;
  color: var(--ink);
  text-decoration: none;
}
.guide-gateway-feature:hover { color: var(--ink); }
.guide-gateway-feature__image,
.guide-gateway-card__image {
  display: block;
  width: 100%;
  max-width: 499px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-control);
}
.guide-gateway-feature__details {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  width: 100%;
  max-width: 499px;
  aspect-ratio: 1;
  padding: 32px;
  background: #efe2e5;
  border-radius: var(--r-control);
}
.guide-gateway-feature__title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 32px;
}
.guide-gateway-feature__description {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 26px;
}
.guide-gateway-feature__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #9083a7;
}
.guide-gateway-feature__avatar {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.guide-gateway-feature__byline {
  color: #815d86;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  line-height: 24px;
}
.guide-gateway-card__byline {
  margin-top: 12px;
  color: #9083a7;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}
.guide-gateway__catalog { margin-top: 80px; }
.guide-gateway__catalog-header { text-align: center; }
.guide-gateway__catalog-header h2 {
  margin: 0;
  font-size: 1.625rem;
  line-height: 32px;
}
.guide-gateway__catalog-header p {
  max-width: none;
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 24px;
}
.guide-gateway-filter {
  display: grid;
  grid-template-columns: repeat(8, 104px);
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 1022px;
  margin: 32px auto 0;
  overflow-x: auto;
  padding: 0 4px 4px;
  scrollbar-width: thin;
}
.guide-gateway-filter__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 104px;
  height: 96px;
  padding: 18px;
  background: var(--white);
  border: 1px solid #e8e3e8;
  border-radius: var(--r-control);
  color: #8f82a6;
  cursor: pointer;
  font: 500 0.9375rem/20px var(--sans);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.guide-gateway-filter__icon {
  display: block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--guide-filter-icon) center / contain no-repeat;
  mask: var(--guide-filter-icon) center / contain no-repeat;
}
.guide-gateway-filter__icon--everyone { --guide-filter-icon: url('/images/icons/gift-guide-filters/everyone.svg'); width: 30px; height: 24px; }
.guide-gateway-filter__icon--him { --guide-filter-icon: url('/images/icons/gift-guide-filters/him.svg'); width: 24px; height: 24px; }
.guide-gateway-filter__icon--her { --guide-filter-icon: url('/images/icons/gift-guide-filters/her.svg'); width: 24px; height: 24px; }
.guide-gateway-filter__icon--kids { --guide-filter-icon: url('/images/icons/gift-guide-filters/kids.svg'); width: 24px; height: 36px; }
.guide-gateway-filter__icon--teens { --guide-filter-icon: url('/images/icons/gift-guide-filters/teens.svg'); width: 24px; height: 29px; }
.guide-gateway-filter__icon--coworker { --guide-filter-icon: url('/images/icons/gift-guide-filters/coworker.svg'); width: 27px; height: 24px; }
.guide-gateway-filter__icon--holiday { --guide-filter-icon: url('/images/icons/gift-guide-filters/holiday.svg'); width: 24px; height: 24px; }
.guide-gateway-filter__icon--budget { --guide-filter-icon: url('/images/icons/gift-guide-filters/budget.svg'); width: 31px; height: 24px; }
.guide-gateway-filter__button:hover,
.guide-gateway-filter__button[aria-pressed="true"] {
  background: #efe2e5;
  border-color: #815d86;
  color: #815d86;
}
.guide-gateway-filter__button:active {
  background: #d9b8bf;
  border-color: #815d86;
  color: #815d86;
}
.guide-gateway-filter__button:focus-visible {
  outline: 3px solid rgba(129, 93, 134, 0.34);
  outline-offset: 3px;
}
.guide-gateway__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  max-width: 1022px;
  margin: 40px auto 0;
}
.guide-gateway-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 24px 24px 32px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: var(--ink);
  text-decoration: none;
}
.guide-gateway-card:hover { color: var(--ink); }
.guide-gateway-card__title {
  margin-top: 14px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 24px;
}
.guide-gateway-card[hidden],
.guide-gateway__empty[hidden],
.guide-gateway__more[hidden] { display: none !important; }
.guide-gateway__empty {
  max-width: none;
  margin: 40px 0 0;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  text-align: center;
}
.guide-gateway__more {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
.guide-gateway__more-button {
  padding: 12px 24px;
  background: #815d86;
  border: 1px solid #815d86;
  border-radius: 8px;
  color: var(--white);
  cursor: pointer;
  font: 500 0.9375rem/18px var(--sans);
}
.guide-gateway__more-button:hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
  color: var(--white);
}

@media (max-width: 69rem) {
  .guide-gateway-filter { justify-content: start; }
}
@media (max-width: 59.9375rem) {
  .guide-gateway__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.9375rem) {
  .guide-gateway__surface { padding: 32px 24px; }
  .guide-gateway-feature {
    grid-template-columns: minmax(0, 499px);
    justify-content: center;
  }
  .guide-gateway-feature__details {
    min-height: 240px;
    padding: 24px;
  }
}
@media (max-width: 39.9375rem) {
  .guide-gateway__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   5. WORDMARK
   --------------------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark--lg {
  margin: 0 0 var(--s-4);
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
  line-height: 1.05;
}
/* Header/footer logo image (Section 4 brand pass). .wordmark keeps its
   font/color properties for the alt-text fallback if the image fails to
   load. 26px is a provisional height pending confirmation against the
   Figma-authoritative spec once Dev Mode access is available. */
.wordmark__logo { display: block; height: 26px; width: auto; }

/* ---------------------------------------------------------------------------
   6. BUTTONS AND CTAS
   12px radius. Minimum 44px touch target.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-family: var(--sans);
  font-size: var(--t-feature-sm);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn--primary {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
  color: var(--white);
}

.btn--brand {
  background: var(--evergreen);
  border-color: var(--evergreen);
  color: var(--ink-onDark);
}
.btn--brand:hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
  color: var(--white);
}

.btn--quiet {
  background: var(--white);
  border-color: var(--border);
  color: var(--ink);
}
.btn--quiet:hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
  color: var(--white);
}

/* The affiliate CTA, matching Figma's card CTA button exactly. */
.btn--amazon {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--white);
  width: 100%;
  gap: 8px;
}
.btn--amazon:hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
  color: var(--white);
}
/* SURGICAL CORRECTION (2026-08-25): an unbound/dev slot's CTA is now a
   real <button disabled> (automation/lib/render.js's cta() / scripts/
   gift-finder.js's renderCta()), not plain text - this keeps its exact
   button geometry while making the non-live state unmistakable, matching
   the same muted-opacity treatment .hcarousel__arrow[disabled] already
   uses elsewhere on this page. */
.btn--amazon[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn--amazon[disabled]:hover {
  background: var(--violet);
  border-color: var(--violet);
}

.cta { margin: var(--s-5) 0 0; max-width: none; }

.cta--pending {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--border);
  max-width: none;
}
.cta__pending {
  display: block;
  font-size: var(--t-stamp);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   7. BADGES
   --------------------------------------------------------------------------- */
.stamp {
  display: inline-block;
  margin: 0;
  padding: 0.375rem 0.5rem;
  background: var(--violet);
  border-radius: var(--r-sm);
  color: var(--ink-onDark);
  font-family: var(--sans);
  font-size: var(--t-stamp);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: none;
}

/* ---------------------------------------------------------------------------
   8. MASTHEAD
   Figma "Global Navigation" (node 15:8592). Absolute-positioned in the
   source file; reimplemented here as real flex/flow so it can be
   responsive, keeping the source's spacing values (48px between the nav
   group and the CTA, 10px between nav pills, 16px/12px pill padding).

   Two flagged Figma inconsistencies, resolved rather than reproduced:
   only 3 of 5 nav items had a chevron in the source (Gifts For / By Budget
   / Occasions) - since Occasions has no destination yet (see nav.js) it is
   omitted here entirely for this release, and the chevron is applied
   consistently to every item that actually opens a disclosure (today, only
   "By Budget").

   MOBILE HEADER: unchanged mechanism from v3.0 - a native <button> toggles
   the same <nav> used at desktop width into a full-width disclosed row
   below 768px, no horizontal scrolling, no JS-only nav. See nav.js.
   --------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--hairline);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 3.5rem;
  padding-block: var(--s-2);
}
.masthead__nav {
  display: flex;
  align-items: center;
  gap: 48px;
}
.masthead__nav ul {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.masthead__nav a,
.masthead__nav .nav-drop > summary,
.masthead__nav .nav-disabled {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: var(--t-feature-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.masthead__nav a:hover,
.masthead__nav .nav-drop:hover > summary,
.masthead__nav .nav-drop[open] > summary { background: var(--surface-muted); }
.masthead__nav a[aria-current="page"] { background: var(--surface-muted); font-weight: 600; }
/* MVP BUILD LOCK (2026-08-25): "Occasions" is back in Figma's primary nav
   order but has no real destination page this pass (see nav.js) - same
   non-link, no-fabricated-URL treatment as .merch-pill--disabled, applied
   to a nav item instead of a merch pill. */
.masthead__nav .nav-disabled { opacity: 0.5; cursor: default; }

.masthead__cta {
  flex: none;
}
.masthead__cta .btn { padding: 12px 24px; }

.masthead__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
}
.masthead__toggle:hover { color: var(--violet); }
.masthead__toggle-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  transition: transform 160ms ease, opacity 160ms ease;
}
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bar--1 { transform: translateY(6px) rotate(45deg); }
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bar--2 { opacity: 0; }
.masthead__toggle[aria-expanded="true"] .masthead__toggle-bar--3 { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 47.9375rem) {
  .masthead__inner { flex-wrap: wrap; gap: 0; }
  .masthead__toggle { display: inline-flex; }
  html:not(.js) .masthead__toggle { display: none; }

  .masthead__nav { flex: 0 0 100%; order: 3; gap: 0; }
  html.js .masthead__nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease;
  }
  html.js .masthead__nav.is-open { max-height: 32rem; overflow-y: auto; }

  .masthead__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--s-2);
    border-top: 1px solid var(--hairline);
  }
  .masthead__nav > ul > li { width: 100%; }
  .masthead__nav a,
  .masthead__nav .nav-drop > summary {
    display: flex;
    border-radius: 0;
    padding: var(--s-3) var(--s-1);
    font-size: var(--t-body-lg);
    min-height: 2.75rem;
  }
  .masthead__cta { order: 2; }
}

/* ---------------------------------------------------------------------------
   8b. MERCHANDISING SHORTCUT BAR
   Figma node 5:51. New in v4 - did not exist in v3.0. Data-driven from
   data/merchandising.js. All six of Figma's example positions are always
   present at Figma's real size/order (LAYOUT CORRECTION, 2026-08-25 - a
   prior pass omitted the two without a real destination page instead of
   disabling them); see that file for which two are currently disabled and
   why, and .merch-pill--disabled below for the non-link visual treatment.
   Two visual variants: default (white/bordered) and featured (dark, for a
   seasonal callout), exactly as extracted from Figma; no third variant
   invented.
   --------------------------------------------------------------------------- */
.merch-bar {
  background: var(--merch-bg);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.merch-bar__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px; /* keeps focus rings from clipping under the scrollbar */
}
.merch-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--ink);
  font-size: var(--t-body-lg);
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  text-decoration: none;
}
.merch-pill:hover { border-color: var(--violet); color: var(--ink); }
.merch-pill--featured {
  background: var(--ink);
  border-color: var(--ink);
  color: #d9cdff;
}
.merch-pill--featured:hover,
.merch-pill--featured:focus-visible { border-color: var(--violet); color: #FFFFFF; }
.merch-pill__icon { width: 24px; height: 24px; flex: none; }
/* LAYOUT CORRECTION (2026-08-25): non-link state for a merchandising
   position that has no real destination page yet (data/merchandising.js).
   Kept in the layout at Figma's real size/position rather than omitted,
   per the owner's instruction not to alter the approved six-position bar
   just because a page is not ready, and not to fabricate a URL for it. */
.merch-pill--disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .merch-bar__scroll { flex-wrap: wrap; overflow-x: visible; }
}

/* ---------------------------------------------------------------------------
   9. HERO / GIFT FINDER INTRO
   Figma composition merges what v3.0 kept as two separate blocks (a
   marketing hero, then the Finder) into one: the Finder's own question
   heading IS the hero, and it IS the page's real <h1> on both the homepage
   and /find-gifts/ (owner correction, 2026-08-25 - an earlier pass in this
   same rewrite had put a second, oversized copy of the wordmark above it as
   the h1 instead; that section no longer exists in the markup, so .hero/
   .hero__inner/.hero__brand below are currently unused - kept rather than
   deleted in case a non-heading brand moment is wanted here later).
   --------------------------------------------------------------------------- */
.hero { padding-block: var(--s-8) 0; }
.hero__inner { display: grid; gap: var(--s-4); }
.hero__brand { margin: 0 0 var(--s-6); }

/* ---------------------------------------------------------------------------
   10. GIFT FINDER
   Figma "Find a Gift Filter" (15:6243) + hero question block (7:467).
   Custom listbox-style dropdowns (native <select> cannot reproduce the
   checkmark-highlight option styling), built with a button
   [aria-haspopup="listbox"] + [role="listbox"] pattern. Matching/relaxation
   logic in scripts/gift-finder.js is unchanged; only this presentation
   layer and its wiring changed.
   --------------------------------------------------------------------------- */
/* SURGICAL PAGE-SURFACE + SPACING FIX (2026-08-25): the Finder/hero sits
   directly on the #F5F5F9 page canvas - Figma shows no separate white
   card wrapping it. Its own dropdown/button controls already carry their
   own white backgrounds (.dd__btn, .dd__panel below), so removing this
   section-level background doesn't affect them. Vertical position is now
   set by #main's margin-top (Section 4, LAYOUT) instead; this rule's own
   padding-block is otherwise unchanged. */
.finder { padding-block: 0 var(--sect-y); }
.finder__panel { max-width: 47.5rem; margin-inline: auto; text-align: center; }
/* LAYOUT CORRECTION (2026-08-25): at desktop widths the panel widens to
   the section's real Figma content width (node 15:6452 = 1110px =
   69.375rem), not the narrower 760px reading-column width used below this
   breakpoint - see .finder__row below for why the extra room is needed. */
@media (min-width: 60rem) {
  .finder__panel { max-width: 69.375rem; }
}
.finder__head { margin-bottom: var(--s-6); }
/* h1 on both pages that use this panel (homepage and /find-gifts/) as of
   2026-08-25 - kept the h2 selector too since nothing else in the codebase
   still renders this heading as an h2, but it costs nothing to leave and
   protects against a future page reusing this panel with a lower heading
   level. */
.finder__head h1,
.finder__head h2 {
  font-size: var(--t-hero-q);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.finder__intro {
  color: var(--ink);
  opacity: 0.72;
  font-size: var(--t-body-lg);
  line-height: 1.4;
  max-width: 40rem;
  margin-inline: auto;
}

.finder__form { display: flex; flex-direction: column; align-items: center; gap: var(--s-7); }

/* MVP BUILD LOCK (2026-08-25): wraps the three <fieldset class="q">
   questions (finder.js) - a fourth, optional "Interests" field lived here
   in a prior pass; it is removed per the owner's lock ("Do not add
   Interests"), which also removes the reason .q__optional and a flex-basis
   split ever existed. Mobile/tablet default is Figma's own vertical stack
   - full width, one per row. See the min-width:60rem override below for
   the horizontal desktop row Figma's real "Find a Gift Filter" (node
   15:6243) composition actually uses. */
.finder__row { display: flex; flex-direction: column; gap: var(--s-6); width: 100%; }

.q { padding-top: 0; width: 100%; }
.q__legend { display: none; } /* the dropdown button itself carries the visible label */

.q__options { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-6); }

@media (min-width: 60rem) {
  .finder__row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-7); /* 40px - Figma's real gap between the three fields */
    flex-wrap: nowrap;
  }
  /* Real widths pulled from node 7:1502 this pass: Who 230px, Budget
     181px, Use (the `problem` question) 249px - flex-basis below, with a
     little flex-grow so real (longer/shorter) option text can still
     expand a field without breaking the row. Three fields only now - see
     the comment above .finder__row. */
  .finder__row .q { width: auto; flex: 1 1 14.375rem; min-width: 0; }
  #q-budget { flex-basis: 11.3125rem; }
  #q-problem { flex-basis: 15.5625rem; }
}

/* Dropdown field (closed state), Figma: 40px tall, 12/8 padding, 1px
   #DEDEE5 border, 6px radius, white bg, Inter Medium 14px. */
.dd {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 17.25rem; /* 276px - a bit above the widest Figma example (249px) for longer labels */
}
.dd__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: 2.75rem; /* 44px touch target; Figma's own 40px is under the minimum */
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
.dd__btn:hover { border-color: var(--violet); }
.dd[data-open="true"] .dd__btn { border-color: var(--violet); }
.dd__icon { flex: none; width: 16px; height: 16px; transition: transform 140ms ease; }
.dd[data-open="true"] .dd__icon { transform: rotate(180deg); }

/* Options panel (open state), Figma: 6px gap below the field, 1px
   slate/100 border, 6px radius, drop-shadow(0 4px 6px rgba(0,0,0,.09)). */
.dd__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 20rem;
  overflow-y: auto;
  margin: 0;
  padding: 5px;
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-dropdown);
}
.dd[data-open="false"] .dd__panel { display: none; }
.dd__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 32px;
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.dd__option:hover,
.dd__option[data-active="true"] { background: rgba(113, 50, 245, 0.06); }
.dd__option[aria-selected="true"] {
  padding-left: 8px;
  background: var(--surface-muted);
}
.dd__option-check {
  flex: none;
  width: 16px;
  height: 16px;
  visibility: hidden;
}
.dd__option[aria-selected="true"] .dd__option-check { visibility: visible; }

.finder__controls { margin: 0; max-width: none; }
.finder__controls .btn { margin-top: var(--s-2); }

.finder__results:empty { display: none; }
.finder__results {
  margin-top: var(--s-10);
  padding-top: var(--s-7);
  border-top: 1px solid var(--border);
  text-align: left;
}
.results__head { margin-bottom: var(--s-6); }
.results__heading {
  margin-bottom: var(--s-3);
  font-size: var(--t-section);
  font-weight: 600;
  line-height: 1.2;
}
.results__count { font-size: var(--t-caption); color: var(--ink); opacity: 0.65; }
.results__relaxed {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--violet-subtle);
  border: 1px solid var(--violet-subtle-line);
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-caption);
  line-height: 1.45;
  max-width: 62ch;
}
.results__more { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); max-width: none; }

/* Standalone product Gift Finder (Figma 449:20293). This is deliberately
   separate from the Gift Guides hub filter: these controls refine product
   records and are wired to scripts/gift-finder.js. */
.gift-finder-page {
  width: calc(100% - 2 * var(--gutter));
  max-width: 69.375rem;
  margin-inline: auto;
}
.gift-finder-page__surface {
  padding: 40px;
  background: var(--surface-linen);
  border-radius: var(--r-lg);
}
.gift-finder-page__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px 32px;
  background: #faf7f5;
  border-radius: 10px;
}
.gift-finder-page__heading {
  width: 100%;
  text-align: center;
}
.gift-finder-page__heading h1 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2rem;
}
.gift-finder-page__heading > p:not(.affiliate-disclosure) {
  max-width: none;
  margin: 0;
  color: #625b68;
  font-size: 1rem;
  line-height: 1.5rem;
}
.gift-finder-page__heading .affiliate-disclosure {
  margin: 6px 0 0;
  color: var(--muted-mauve);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 400;
  line-height: 0.875rem;
  text-align: center;
}
.product-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.product-filter__group {
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
}
.product-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-inline: auto;
}
.product-filter__row--recipients { max-width: 800px; }
.product-filter__row--budget { max-width: 452px; }
.product-filter__row--type { max-width: 684px; }
.product-filter__option {
  display: inline-flex;
  flex: 0 0 104px;
  width: 104px;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  background: var(--white);
  border: 1px solid #e8e3e8;
  border-radius: 10px;
  color: #8f82a6;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.product-filter__row--recipients .product-filter__option {
  height: 96px;
  flex-direction: column;
}
.product-filter__option:hover,
.product-filter__option[aria-pressed="true"] {
  background: #efe2e5;
  border-color: var(--violet);
  color: var(--violet);
}
.product-filter__option:active {
  background: #d9b8bf;
  border-color: var(--violet);
  color: var(--violet);
}
.product-filter__option:focus-visible {
  outline: 3px solid rgba(129, 93, 134, 0.34);
  outline-offset: 3px;
}
.product-filter__icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.product-filter__icon--everyone {
  width: 30px;
  -webkit-mask-image: url('/images/icons/gift-guide-filters/everyone.svg');
  mask-image: url('/images/icons/gift-guide-filters/everyone.svg');
}
.product-filter__icon--him {
  -webkit-mask-image: url('/images/icons/gift-guide-filters/him.svg');
  mask-image: url('/images/icons/gift-guide-filters/him.svg');
}
.product-filter__icon--her {
  -webkit-mask-image: url('/images/icons/gift-guide-filters/her.svg');
  mask-image: url('/images/icons/gift-guide-filters/her.svg');
}
.product-filter__icon--kids {
  width: 19px;
  height: 29px;
  -webkit-mask-image: url('/images/icons/gift-guide-filters/kids.svg');
  mask-image: url('/images/icons/gift-guide-filters/kids.svg');
}
.product-filter__icon--teens {
  height: 29px;
  -webkit-mask-image: url('/images/icons/gift-guide-filters/teens.svg');
  mask-image: url('/images/icons/gift-guide-filters/teens.svg');
}
.product-filter__icon--friend {
  width: 22px;
  -webkit-mask-image: url('/images/icons/gift-guide-filters/friend.svg');
  mask-image: url('/images/icons/gift-guide-filters/friend.svg');
}
.product-filter__icon--coworker {
  height: 21px;
  -webkit-mask-image: url('/images/icons/gift-guide-filters/coworker.svg');
  mask-image: url('/images/icons/gift-guide-filters/coworker.svg');
}
.gift-finder-page__results {
  margin-top: 16px;
  padding-top: 40px;
  border-top-color: var(--divider);
}
.gift-finder-page__results .layout--grid {
  margin-top: 0;
  column-gap: 24px;
  row-gap: 80px;
}
.gift-finder-page__results .results__more {
  justify-content: center;
  margin: 56px 0 0;
}
.gift-finder-page__results .results__relaxed {
  margin: 0 0 24px;
}

@media (max-width: 47.9375rem) {
  .gift-finder-page__surface { padding: 24px; }
  .gift-finder-page__intro { padding: 40px 20px; }
  .gift-finder-page__results .layout--grid { row-gap: 32px; }
}
@media (max-width: 31.9375rem) {
  .gift-finder-page__surface { padding: 16px; }
  .gift-finder-page__intro { padding: 32px 16px; }
  .gift-finder-page__heading > p:not(.affiliate-disclosure) br { display: none; }
}

.notice {
  padding: var(--s-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--t-caption);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   11. PRODUCT CARDS
   Figma's three-card system (grid 15:5664, carousel 14:4422, list 15:5299).
   One base .vcard, three orientation modifiers. Every content region that
   Figma shows using placeholder/fabricated Amazon data (rating, review
   count, price) is conditional here and simply does not render when the
   bound slot's data does not supply it - see the guard classes below and
   automation/lib/render.js's card().
   --------------------------------------------------------------------------- */
.vcard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 24px 24px 32px;
  color: var(--ink);
  height: 100%;
}

.vcard__head { display: flex; gap: 14px; }
.vcard__image {
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-muted);
}
.vcard__image img { width: 100%; height: 100%; object-fit: cover; }
/* SURGICAL CORRECTION (2026-08-25): honest "no photo yet" placeholder that
   fills the same .vcard__image box every real size rule below already
   targets - see automation/lib/render.js's imageBlock() / scripts/
   gift-finder.js's renderImagePlaceholder(). Never a real product photo. */
.vcard__image--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink-muted);
  font-size: var(--t-small);
  font-weight: 500;
  text-align: center;
  padding: var(--s-2);
}
.vcard__image--placeholder svg { width: 28px; height: 28px; opacity: 0.6; flex: none; }
.vcard__stamp { margin-bottom: 8px; }

.vcard__title-col { min-width: 0; flex: 1; }
.vcard__title {
  margin: 0 0 8px;
  font-size: var(--t-feature);
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vcard__rating { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* PRODUCT CARD TRUST CLEANUP (2026-08-27): the non-production skeleton
   this rule pair styled (.vcard__rating--pending / .vcard__rating-
   skeleton) is no longer rendered - see automation/lib/render.js's
   ratingRow() / scripts/gift-finder.js's renderRating(), which now
   render nothing at all until a slot has a real rating. Removed as dead
   CSS along with the markup. .vcard__rating itself (below) is kept: it
   still styles the real-rating branch of both functions, unchanged. */
.vcard__rating-num {
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink);
}
.vcard__stars { display: flex; gap: 2px; }
.vcard__stars svg { width: 12px; height: 11px; fill: var(--ink); }
.vcard__review-count { font-size: var(--t-small); font-weight: 500; text-transform: uppercase; color: var(--ink-muted); }

.vcard__reasons { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.vcard__reason dt {
  margin: 0 0 6px;
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--violet);
}
.vcard__reason dd { margin: 0; font-size: var(--t-body); line-height: 20px; color: var(--ink); max-width: 66ch; }
/* SURGICAL FIDELITY PASS (2026-08-25): rendering-safety line-clamps, not
   an editorial rewrite - see automation/lib/render.js's reasonsBlock()
   for the vcard__reason--bestfor / --why modifier classes this targets,
   and the SURGICAL FIDELITY PASS completion report for the separate,
   unchanged, editorial-copy-length audit these are meant to backstop. */
.vcard__reason--bestfor dd {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vcard__reason--why dd {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vcard__skip {
  margin-top: 12px;
  font-size: var(--t-caption);
  color: var(--ink);
  opacity: 0.72;
}
.vcard__skip summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.vcard__skip summary::-webkit-details-marker { display: none; }
.vcard__skip summary::before { content: "Skip it if \25BE"; }
.vcard__skip[open] summary::before { content: "Skip it if \25B4"; }
.vcard__skip p { margin-top: 6px; }

.vcard__cta { margin-top: 24px; }

/* Grid variant - Figma 15:5664. Image inline-left (104x104) of the header
   row only; content stacks below. */
.vcard--grid .vcard__image { width: 104px; height: 104px; }
.vcard--grid .vcard__body { margin-top: 24px; }
/* SURGICAL CORRECTION (2026-08-25): equal card heights (design.md Section
   10) need the CTA itself anchored at a consistent baseline within each
   row, not just the outer .vcard height (already equal via CSS Grid's
   default item stretch + .vcard's own height:100%) - otherwise a card
   with shorter reasoning text leaves its CTA floating above where a
   longer card's CTA sits. Matches the anchoring .vcard--list's CTA
   already had. */
.vcard--grid .vcard__cta { margin-top: auto; padding-top: 24px; }

/* Gift Finder result card (Figma 449:20444). Same shared content model as
   the other vcards, with this page's full-width square image and both
   editorial reason rows. */
.vcard--finder .vcard__head { flex-direction: column; gap: 0; }
.vcard--finder .vcard__image { width: 100%; aspect-ratio: 1 / 1; }
.vcard--finder .vcard__title-col { margin-top: 20px; }
.vcard--finder .vcard__title { margin: 0; font-size: 1.125rem; line-height: 1.625rem; }
.vcard--finder .vcard__reasons { margin-top: 16px; gap: 18px; }
.vcard--finder .vcard__cta { margin-top: auto; padding-top: 32px; }
.vcard--finder .btn--amazon { width: auto; }

/* Carousel variant - Figma 14:4422. Square fluid image full width, stacked
   above text; a divider under the header block; no "Best for" region (per
   Figma - see render.js); shorter CTA copy pattern ("On <merchant>"). */
.vcard--carousel { padding: 24px 24px 32px; }
.vcard--carousel .vcard__head { flex-direction: column; }
.vcard--carousel .vcard__image { width: 100%; aspect-ratio: 1 / 1; }
.vcard--carousel .vcard__title-col {
  margin-top: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.vcard--carousel .vcard__title { font-size: var(--t-feature-sm); -webkit-line-clamp: 3; }
.vcard--carousel .vcard__rating { margin-top: 6px; }
.vcard--carousel .vcard__reasons { margin-top: 16px; gap: 16px; }
/* Same CTA-anchoring correction as the grid variant above, so cards
   visible together in the carousel row line up the same way. */
.vcard--carousel .vcard__cta { margin-top: auto; padding-top: 24px; }

/* Homepage value card: the same approved stacked content treatment as the
   product carousel card, used inside a fixed grid with no carousel behavior. */
.vcard--home { padding: 24px 24px 32px; }
.vcard--home .vcard__head { flex-direction: column; }
.vcard--home .vcard__image { width: 100%; aspect-ratio: 1 / 1; }
.vcard--home .vcard__title-col {
  margin-top: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.vcard--home .vcard__title { font-size: 1.125rem; line-height: 26px; -webkit-line-clamp: 3; }
.vcard--home .vcard__rating { margin-top: 6px; }
.vcard--home .vcard__reasons { margin-top: 16px; gap: 16px; }
.vcard--home .vcard__cta { margin-top: auto; padding-top: 24px; }

/* List variant - Figma Value Card 388:13922. Full-height
   horizontal split: fixed square image left, one flexible text column
   right holding every block. Title has no clamp (Figma's own code omits
   truncation on this variant), so a long title grows the card instead of
   clipping. */
.vcard--list { flex-direction: row; align-items: stretch; gap: 32px; padding: 24px; }
.vcard--list .vcard__head { flex: none; }
.vcard--list .vcard__image { width: 304px; height: 304px; }
/* SURGICAL FIDELITY PASS (2026-08-25): title-col now lives INSIDE
   .vcard__body (see automation/lib/render.js's card()), not grouped with
   the image in .vcard__head - List Component 12:2952 puts everything
   except the image in one flowing right-hand column: title, rating, a
   divider, then Best For / Why We Picked It, then the CTA. The previous
   markup split title+rating into .vcard__head (paired with the image)
   while reasons+CTA lived in a separate .vcard__body sibling; with this
   row's default `align-items: stretch`, those two independently-sized
   flex children forced each other to match heights, leaving a tall empty
   gap under a short title/rating block and pushing the CTA to the bottom
   of an oversized right column - the flagged defect. The divider that
   used to sit as a border-bottom on .vcard__body itself (after the CTA,
   not before Best For - also wrong) is replaced below by a border-bottom
   on .vcard__title-col, now the first child of .vcard__body, matching
   the same title-divider pattern .vcard--carousel already uses. */
.vcard--list .vcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.vcard--list .vcard__body .vcard__title-col {
  flex: none;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.vcard--list .vcard__title { margin: 0; }
.vcard--list .vcard__reasons { flex: 1; justify-content: flex-start; margin-top: 16px; }
.vcard--list .vcard__reason,
.vcard--list .vcard__reason dd {
  width: 100%;
  max-width: none;
}
.vcard--list .vcard__cta {
  margin-top: auto;
  padding-top: 0;
}
/* LIST VIEW CTA WIDTH FIX (2026-08-25): .btn--amazon (Section 6, above) is
   shared by all three card variants and sets width: 100% - correct for
   grid/carousel, where Figma shows the CTA spanning the card. The list
   variant's own Figma node (15:5299 / List Component 12:2952) shows the
   button hugging its own label instead, left-aligned under the content -
   the stretch to the full content-column width here was a bug, not a
   variant difference. Scoped to .vcard--list only, so grid/carousel keep
   the shared rule exactly as-is; width: auto (not a new sizing keyword)
   simply removes the override, letting .btn's own display: inline-flex
   (Section 6) size the button to its content the way every other .btn
   already does. Nothing else in the .vcard--list cascade forces a
   stretch - .vcard__body's flex/align-items only reaches its direct
   children (title-col, reasons, this .vcard__cta div), never the button
   three levels down inside it. */
.vcard--list .btn--amazon { width: auto; }
.vcard--list .cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}
@media (max-width: 39.9375rem) {
  .vcard--list { flex-direction: column; }
  .vcard--list .vcard__image { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* ---------------------------------------------------------------------------
   11b. SECTION LAYOUTS
   The six named entry points automation/lib/render.js exports (feature,
   list, compact, row, grid, plain) now all resolve to one of the three
   card variants above, arranged responsively. See render.js LAYOUTS.
   --------------------------------------------------------------------------- */
.layout { margin-top: var(--s-6); }

.layout__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .layout__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .layout__grid { grid-template-columns: repeat(3, 1fr); } }

.layout--grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .layout--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .layout--grid { grid-template-columns: repeat(3, 1fr); } }

/* compact: denser auto-fill grid, same grid card. */
.layout--compact {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* list / row / plain: vertical stack of list-variant cards. */
.layout--list,
.layout--rows,
.layout--plain { display: flex; flex-direction: column; gap: var(--s-4); }
.listItem { display: block; }
.listItem__num { display: none; } /* the list card's own left-aligned image already anchors scan order */

/* ---------------------------------------------------------------------------
   11c. CAROUSEL CONTROLS
   Figma's homepage/Standard-Page "Ones We'd Buy First" carousel (13:4028).
   New in v4 - no equivalent existed in v3.0. Scroll-snap based, so it
   degrades to a plain horizontally-scrollable row with no JS at all.
   --------------------------------------------------------------------------- */
.hcarousel { position: relative; }
.hcarousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-2);
  scrollbar-width: thin;
}
.hcarousel__track > * {
  /* Upper bound corrected 2026-08-25 to Figma's real carousel card width -
     node 15:6528 "Value Card" in the homepage carousel instance measures
     237.5px (14.844rem), not the 248px placeholder value used before. At
     the 1110px section width this yields Figma's real "four cards
     visible" (4 x 237.5 + 3 x 24px gaps = 1022px, matching node
     15:6526's own content width exactly). */
  flex: 0 0 clamp(13rem, 40vw, 14.844rem);
  align-self: stretch;
  height: auto;
  scroll-snap-align: start;
}
.hcarousel__track .guide-gateway-card__byline {
  margin-top: auto;
  padding-top: 12px;
}
.hcarousel__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.hcarousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
}
.hcarousel__arrow:hover { border-color: var(--violet); color: var(--violet); }
.hcarousel__arrow[disabled] { opacity: 0.35; cursor: default; }
.hcarousel__dots { display: flex; align-items: center; gap: 8px; }
.hcarousel__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--border); padding: 0; border: 0; cursor: pointer; }
.hcarousel__dot[aria-current="true"] { background: var(--violet); }
html.js .hcarousel__nav { display: flex; }

/* ---------------------------------------------------------------------------
   12. EDITORIAL SECTIONS (about / how-we-pick / privacy / guides)
   Unchanged structure from v3.0; recoloured/retyped onto the v4 tokens.
   --------------------------------------------------------------------------- */
.disclosure-inline {
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--t-caption);
  line-height: 1.45;
  max-width: 64ch;
}

.qa { display: grid; gap: var(--s-3); margin-top: 56px; grid-template-columns: 1fr; }
.qa > h2 { margin: 0 0 var(--s-3); }
.qa__item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
}
.qa__item h3 { margin: 0; }
.qa__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-align: left;
}
.qa__icon {
  flex: none;
  color: var(--violet);
  font-size: 1.25rem;
  font-weight: 500;
}
.qa__answer p { padding: 0 var(--s-6) var(--s-5); color: var(--ink); max-width: 62ch; }

.trust-grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .trust-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-9); } }
@media (min-width: 56rem) { .trust-grid--single { grid-template-columns: minmax(0, 1fr); } }
.trust-grid__main h2 { margin-bottom: var(--s-5); }

.criteria { display: grid; gap: var(--s-3); margin: var(--s-6) 0; max-width: 68ch; }
.criteria li { position: relative; padding-left: var(--s-6); line-height: 1.5; }
.criteria li::before {
  content: "&";
  position: absolute;
  left: 0;
  top: -0.1em;
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-body-lg);
  color: var(--violet);
}

.trust-grid__side {
  align-self: start;
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.trust-grid__side h3 { margin-bottom: var(--s-3); }
.trust-grid__side p { font-size: var(--t-caption); line-height: 1.5; }

.brand-promise {
  margin-top: var(--s-6);
  font-size: var(--t-body-lg);
  font-style: italic;
  color: var(--violet);
}


.disclosure-strong {
  padding: var(--s-4);
  background: var(--violet-subtle);
  border: 1px solid var(--violet-subtle-line);
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-weight: 600;
}

.privacy-updated { font-size: var(--t-small); }
.privacy-content {
  max-width: var(--w-answer);
  margin-top: var(--s-9);
}
.sect--privacy h2 { margin: var(--s-8) 0 var(--s-4); }
.sect--privacy ul {
  max-width: 68ch;
  margin: 0 0 var(--s-5);
  padding-left: var(--s-6);
}
.sect--privacy li {
  list-style: disc;
  line-height: 1.6;
}
.sect--privacy li + li { margin-top: var(--s-2); }
.sect--privacy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}

/* HOLISTIC SITE LAYOUT CONSISTENCY PASS (2026-08-28): removed. This was
   the only Trust page (About/How We Pick/Affiliate Disclosure/Privacy)
   carrying a page-specific override of the shared .sect padding-block
   rhythm - it fixed Privacy's second section at a flat 64px bottom
   padding while its three siblings kept the responsive --sect-y clamp
   (40px-64px). No comment or commit history ties the flat value to a
   real content need; git blame shows it only being retuned between
   spacing tokens (--s-10 -> --s-9), consistent with a one-off page
   tweak rather than a deliberate exception. Removing it lets Privacy
   fall back to the same .sect rule About/How We Pick/Affiliate
   Disclosure already use unmodified, so all four Trust pages share
   identical bottom spacing at every viewport width - one shell, zero
   page-type exceptions, matching the standard this pass applied
   everywhere else in this file. */

/* FINAL SITEWIDE LAYOUT STANDARDIZATION (2026-08-29): max-width was
   var(--w-answer) (720px), a page-specific override narrower than
   every other page's content column. The live Figma Gift Guide Page
   Template (node 80:3219) renders this exact region - and the
   product cards inside it - at the same ~1110px content width the
   Standard Page Template uses (--w-main, 1200px, via .wrap already
   applied alongside this class in automation/build-site.js), not a
   narrower reading column. Rule removed so .wrap's own max-width
   governs instead of being overridden by a narrower one here. */
.guide__body p { line-height: 1.6; }
.guide--story .guide__story-header { padding-top: var(--s-8); }
.guide--story .guide__story-header h1 { margin-bottom: var(--s-2); }
.guide__updated { margin: 0; color: var(--ink-muted); font-size: var(--t-small); }
.guide__hero { height: min(50vw, 511px); margin: var(--s-7) 0 var(--s-6); overflow: hidden; border-radius: var(--r-lg); }
.guide__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide__byline {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
}
.guide__byline-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--violet);
  color: var(--white);
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
}
.guide__byline-avatar {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  min-height: 56px;
  max-height: 56px;
  border-radius: 50%;
  clip-path: circle(50%);
  object-fit: cover;
}
.guide__byline-copy { min-width: 0; }
.guide__byline p { margin: 0; }
.guide__byline-label {
  color: var(--violet);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
}
.guide__byline-bio {
  max-width: none;
  margin-top: var(--s-1) !important;
  color: var(--ink-muted);
  font-size: var(--t-small);
}
.guide--story .guide__byline + .affiliate-disclosure {
  margin: var(--s-2) 0 var(--s-7);
}
.guide--story .guide__story > p { max-width: none; }
.guide__story > p + p { margin-top: var(--s-4); }
.guide__products { margin-top: var(--s-8); }
.guide__product-section { padding-top: 1.5rem; }
.guide__product-section + .guide__product-section { margin-top: var(--s-9); }
.guide__product-section > h2 { margin-bottom: var(--s-5); }
.guide__product-section > .vstack { margin-top: 0; }
.guide__advice { margin-top: var(--s-8); }
.guide__advice > h2 { margin-bottom: var(--s-4); }
.guide__more {
  width: calc(100% - 2 * var(--gutter));
  max-width: 69.375rem;
  margin: 80px auto 0;
  padding: 40px 40px 48px;
  background: var(--surface-linen);
  border-radius: var(--r-lg);
}
.guide__more--related { margin-top: 80px; }
.guide__more .hcarousel > h2 { margin: 0 0 24px; }

/* Gift Guide Editorial Page Template (Figma node 263:498).
   This long-form article treatment is intentionally separate from the
   product-led .guide--story template above. */
.editorial-guide {
  width: calc(100% - 2 * var(--gutter));
  max-width: 69.375rem;
  margin-inline: auto;
  padding-bottom: 100px;
}
.editorial-guide__surface,
.editorial-guide__more {
  padding: 40px;
  background: var(--white);
  border-radius: var(--r-lg);
}
.editorial-guide__hero {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  gap: 24px;
}
.editorial-guide__hero-image {
  display: block;
  width: 336px;
  height: 336px;
  object-fit: cover;
  border-radius: var(--r-control);
}
.editorial-guide__hero-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 336px;
}
.editorial-guide__updated {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 15px;
}
.editorial-guide__hero h1 {
  margin: 12px 0 0;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.2px;
}
.editorial-guide__intro {
  max-width: none;
  margin: 16px 0 0;
  font-size: var(--t-body);
  line-height: 24px;
}
.editorial-guide__hero-copy > .affiliate-disclosure { margin-top: 8px; }
.editorial-guide__author {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.editorial-guide__author > img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 999px;
}
.editorial-guide__author p { max-width: none; margin: 0; }
.editorial-guide__author-name {
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 18px;
}
.editorial-guide__author-description {
  margin-top: 4px !important;
  font-size: 12px;
  line-height: 18px;
}
.editorial-guide__sections { margin-top: 120px; }
.editorial-guide__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  align-items: start;
  gap: 40px;
}
.editorial-guide__section--image-left {
  grid-template-columns: 256px minmax(0, 1fr);
}
.editorial-guide__section--image-left .editorial-guide__section-copy { grid-column: 2; }
.editorial-guide__section--image-left .editorial-guide__section-image { grid-column: 1; grid-row: 1; }
.editorial-guide__section:not(:last-child) {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.editorial-guide__section-copy { min-width: 0; }
.editorial-guide__section h2 {
  margin: 0;
  font-size: var(--t-feature);
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
}
.editorial-guide__section p {
  max-width: none;
  margin: 16px 0 0;
  font-size: var(--t-body);
  line-height: 24px;
}
.editorial-guide__section-image {
  display: block;
  width: 256px;
  height: 256px;
  object-fit: cover;
  border-radius: var(--r-control);
}
.editorial-guide__more {
  margin-top: 80px;
  padding-bottom: 48px;
}
.editorial-guide__more .hcarousel > h2 {
  margin: 0 0 24px;
  font-size: 1.75rem;
  line-height: 30px;
}
.editorial-guide__more .hcarousel__track > * { flex-basis: 14.844rem; }
.editorial-guide__more .guide-gateway-card { height: auto; }
@media (max-width: 59.9375rem) {
  .editorial-guide__hero { grid-template-columns: 300px minmax(0, 1fr); }
  .editorial-guide__hero-image { width: 300px; height: 300px; }
  .editorial-guide__hero-copy { min-height: 300px; }
  .editorial-guide__section { grid-template-columns: minmax(0, 1fr) 220px; }
  .editorial-guide__section--image-left { grid-template-columns: 220px minmax(0, 1fr); }
  .editorial-guide__section-image { width: 220px; height: 220px; }
}
@media (max-width: 47.9375rem) {
  .editorial-guide { padding-bottom: 64px; }
  .editorial-guide__surface,
  .editorial-guide__more { padding: 32px 24px; }
  .editorial-guide__hero { grid-template-columns: 1fr; }
  .editorial-guide__hero-image { width: 100%; height: auto; aspect-ratio: 1; }
  .editorial-guide__hero-copy { min-height: 0; }
  .editorial-guide__author { margin-top: 32px; }
  .editorial-guide__sections { margin-top: 64px; }
  .editorial-guide__section,
  .editorial-guide__section--image-left { grid-template-columns: 1fr; gap: 24px; }
  .editorial-guide__section--image-left .editorial-guide__section-copy,
  .editorial-guide__section--image-left .editorial-guide__section-image {
    grid-column: auto;
    grid-row: auto;
  }
  .editorial-guide__section-image { width: 100%; height: auto; aspect-ratio: 1; }
  .editorial-guide__more { margin-top: 64px; padding-bottom: 40px; }
}
/* Gift Guide list component: its media column is materially wider than the
   standard shopping-list thumbnail, while the shared list card stays intact. */
.guide--story .vcard--list .vcard__image { width: 19rem; height: 19rem; aspect-ratio: 1 / 1; }
@media (max-width: 39.9375rem) {
  .guide--story .vcard--list .vcard__image { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}
.crosslinks { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--border); }

.deals-note {
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-caption);
  line-height: 1.5;
  max-width: 60ch;
}

/* ---------------------------------------------------------------------------
   13. FOOTER
   Figma "Footer" (15:6731). The source's `text-black` (#000) on the
   disclosure column vs. `#101114` on the tagline was a same-file
   inconsistency (see extraction notes) - normalized here to the one --ink
   token so the whole footer uses a single "ink" colour, not two.
   --------------------------------------------------------------------------- */
.foot {
  padding-block: var(--s-8);
  background: var(--footer-bg);
  color: var(--ink);
}
.foot__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
@media (min-width: 48rem) {
  .foot__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--s-9); }
}
.foot__brand { display: flex; flex-direction: column; gap: 4px; }
.foot__info { display: flex; align-items: flex-start; gap: var(--s-9); }
.foot__nav { display: flex; align-items: flex-start; gap: var(--s-9); }
.foot__nav ul { display: flex; flex-direction: column; gap: 12px; }
/* --violet on --footer-bg computes to 4.51:1 (WCAG relative-luminance
   formula, verified during this pass's accessibility QA) - technically
   over the 4.5:1 AA floor but with no real margin, which is too thin to
   ship for real navigation text at this caption size. --violet-dark
   (already defined as the one-step-deeper hover color elsewhere) gives
   6.19:1 here, so it is footer links' resting color instead; hover keeps
   the underline as its own distinct signal since violet-dark is already
   the darkest brand step in use. */
.foot__nav a { font-size: var(--t-caption); font-weight: 500; color: var(--violet-dark); text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; }
.foot__legal { display: flex; flex-direction: column; gap: 6px; max-width: 28rem; }
.foot__assoc { margin: 0; font-size: var(--t-feature-sm); font-weight: 600; }
.foot__note,
.foot__copy { font-size: var(--t-caption); line-height: 20px; color: var(--ink); }
.foot__note span { display: block; }
.foot__copy { margin: var(--s-3) 0 0; }
@media (max-width: 47.9375rem) {
  .foot__info { width: 100%; flex-direction: column; gap: var(--s-6); }
  .foot__nav { width: 100%; gap: var(--s-6); }
  .foot__nav ul { flex: 1; }
}

/* ---------------------------------------------------------------------------
   14. MOTION AND FORCED COLOURS
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .dd__option[aria-selected="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .btn { border-color: currentColor; }
  .vcard__image { border: 1px solid currentColor; }
  .vcard { border: 1px solid currentColor; }
}

/* ---------------------------------------------------------------------------
   15. HUB TILES, NAV DROPDOWN, MISC
   Unchanged structure from v3.0, recoloured onto v4 tokens. (Breadcrumb
   rules formerly here were removed - HOLISTIC SHELL PASS, PART 3, below.)
   --------------------------------------------------------------------------- */
.nav-drop { position: relative; }
.nav-drop > summary { list-style: none; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-drop > ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  gap: var(--s-1);
  min-width: 9rem;
  margin-top: var(--s-1);
  padding: var(--s-2);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.nav-drop > ul a {
  display: block;
  padding: var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.nav-drop > ul a:hover,
.nav-drop > ul a[aria-current="page"] { background: var(--surface-muted); }

@media (max-width: 47.9375rem) {
  .nav-drop > ul {
    position: static;
    margin-top: 0;
    padding-left: var(--s-4);
    border: 0;
    box-shadow: none;
  }
}

/* Figma breadcrumb component 347:9264. Interior pages use a single-line,
   horizontally scrollable trail at narrow widths, with the exact 12px Lato
   treatment, muted mauve ancestors and violet current-page state. The
   separator is an inline 8px SVG rather than a font glyph so its geometry is
   stable across platforms. */
.breadcrumbs__wrap { padding-top: var(--s-3); }
.breadcrumbs ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-1);
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-small);
  font-weight: 400;
  scrollbar-width: none;
}
.breadcrumbs ol::-webkit-scrollbar { display: none; }
.breadcrumbs li { display: flex; flex: none; align-items: center; gap: var(--s-1); color: var(--muted-mauve); white-space: nowrap; }
.breadcrumbs__separator { display: inline-flex; width: 8px; height: 8px; align-items: center; justify-content: center; color: var(--muted-mauve); transform: translateY(1px); }
.breadcrumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { color: var(--violet); border-bottom-color: var(--violet); }
.breadcrumbs [aria-current="page"] { color: var(--violet); font-weight: 400; }

.tiles { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); margin-top: var(--s-6); }
@media (min-width: 34rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .tiles--six { grid-template-columns: repeat(6, 1fr); } }
.tile {
  display: block;
  padding: var(--s-5) var(--s-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.tile:hover { border-color: var(--violet); }
.tile__label { display: block; font-size: var(--t-feature); font-weight: 600; color: var(--ink); }
.tile__meta { display: block; margin-top: var(--s-1); font-size: var(--t-small); color: var(--ink); opacity: 0.65; }
.tile--guide { grid-column: 1 / -1; display: grid; gap: var(--s-2); }
@media (min-width: 48rem) { .tiles--guides { grid-template-columns: repeat(2, 1fr); } }
.tile--guide .tile__label { font-size: var(--t-sub); }
.tile--guide .tile__meta { font-size: var(--t-body-lg); color: var(--ink); opacity: 0.65; max-width: 42ch; }

.sect--shopby-person,
.sect--shopby-budget,
.sect--deals,
.sect--discover-hard,
.sect--guides-teaser,
.sect--pick-teaser { border-top: 1px solid var(--border); }
.sect--shopby-person,
.sect--deals,
.sect--guides-teaser { background: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
}

/* ---------------------------------------------------------------------------
   16. 2026 FIGMA REBRAND
   Shared implementation of the typography, colour, spacing, component,
   seasonal, accessibility and six page-template frames in the current
   Merry & Found Figma library.
   --------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--serif); color: var(--ink); }
h1 { font-size: 1.75rem; line-height: 2rem; font-weight: 600; }
h2 { font-size: 1.5rem; line-height: 1.75rem; font-weight: 600; }
h3 { font-size: 1.1875rem; line-height: 1.75rem; font-weight: 600; }

.masthead {
  min-height: 64px;
  background: var(--surface-linen);
  border-bottom: 0;
}
.masthead__inner { min-height: 64px; padding-block: 10px; }
.wordmark__logo { width: 170px; height: 28px; object-fit: contain; }
.masthead__nav a:hover,
.masthead__nav .nav-drop:hover > summary,
.masthead__nav .nav-drop[open] > summary,
.masthead__nav a[aria-current="page"] { background: rgba(179, 158, 193, 0.18); }
.masthead__cta .btn { border-radius: var(--r-md); }

.merch-bar {
  position: relative;
  padding-block: 12px;
  border: 0;
  overflow: hidden;
}
.merch-bar::before,
.foot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/brand/rebrand/botanical-pattern.png') top left / 275px 275px repeat;
  opacity: 0.12;
  pointer-events: none;
}
.merch-bar .wrap,
.foot__inner { position: relative; }
.merch-bar__scroll {
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 0;
}
.merch-pill {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  max-width: 180px;
  height: 72px;
  padding-inline: 20px;
  background: rgba(251, 248, 244, 0.96);
  border: 0;
  border-radius: var(--r-md);
  color: var(--violet);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
}
.merch-pill:hover { background: var(--white); color: var(--violet-dark); }
.merch-pill--featured {
  background: var(--evergreen);
  color: var(--white);
}
.merch-pill--featured:hover,
.merch-pill--featured:focus-visible { background: var(--evergreen-dark); border-color: transparent; color: var(--white); }

.component-surface,
.editorial-guide__surface,
.editorial-guide__more { background: var(--surface-linen); border-radius: var(--r-lg); }
.guide-gateway__surface { background: #fbf8f4; border-radius: var(--r-lg); }
.guide-gateway-feature__details { background: #efe2e5; }

.guide--story {
  width: calc(100% - 2 * var(--gutter));
  max-width: 69.375rem;
  margin-inline: auto;
  padding: 40px;
  background: var(--surface-linen);
  border-radius: var(--r-lg);
}
.guide--story > .wrap { max-width: none; padding-inline: 0; }
.guide--story .guide__story-header { padding-top: 0; }

.vcard,
.guide-gateway-card { border-radius: var(--r-lg); }
.vcard__title,
.guide-gateway-card__title,
.guide-gateway-feature__title { font-family: var(--serif); color: var(--ink); }
.vcard__title { font-size: 1.125rem; line-height: 1.625rem; font-weight: 500; }
.vcard--carousel .vcard__title { font-size: 1.125rem; line-height: 1.625rem; }
.vcard__reason dt { color: var(--violet); font-weight: 900; }
.vcard--carousel .vcard__title-col,
.vcard--list .vcard__body .vcard__title-col { border-color: var(--divider); }
.vcard__reason dd { font-size: 0.8125rem; line-height: 1.3125rem; }
.btn { border-radius: var(--r-md); font-weight: 500; }
.btn--quiet { background: var(--surface-linen); border-color: var(--violet); color: var(--violet); }
.guide-gateway__more-button { background: #815d86; border-color: #815d86; color: var(--white); }
.guide-gateway-filter__button { background: var(--white); border-color: #e8e3e8; color: #8f82a6; }
.guide-gateway-filter__button[aria-pressed="true"] { background: #efe2e5; border-color: #815d86; color: #815d86; }

.editorial-guide__hero h1,
.guide-gateway__header h1 { font-family: var(--serif); font-size: 1.75rem; line-height: 2rem; }
.editorial-guide__section h2 { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.75rem; }
.editorial-guide__author-name,
.guide__byline-label { font-family: var(--serif); font-weight: 700; }
.editorial-guide__section:not(:last-child),
.editorial-guide__author,
.guide__byline,
.crosslinks { border-color: var(--divider); }
.editorial-guide__surface { box-shadow: var(--shadow-card); }

.sect--privacy h1,
.sect--privacy h2 { font-family: var(--sans); }
.sect--privacy h2 { font-size: 1.375rem; line-height: 2rem; font-weight: 700; }
.privacy-content { max-width: none; }

/* Figma Long Copy / Legal Page Template (node 347:9080).
   How We Pick and Affiliate Disclosure share one full-width reading surface
   instead of borrowing the product-list component or splitting the title and
   body across unrelated wrappers. */
.sect--long-copy { padding-block: 0; }
.long-copy-surface {
  width: calc(100% - 2 * var(--gutter));
  max-width: 69.375rem;
  margin-inline: auto;
  padding: 40px;
  background: var(--white);
  border-radius: var(--r-lg);
}
.long-copy-content {
  max-width: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.625rem;
}
.long-copy-content h1 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2rem;
}
.long-copy-content h2 {
  margin: 32px 0 16px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 2rem;
}
.long-copy-content p {
  max-width: none;
  margin: 0 0 24px;
}
.long-copy-content p:last-child,
.long-copy-content section:last-child p:last-child { margin-bottom: 0; }
.long-copy-content ul,
.long-copy-content ol {
  margin: 0 0 24px;
  padding-left: 16px;
}
.long-copy-content li { line-height: 1.25rem; }
.long-copy-content li + li { margin-top: 12px; }
.long-copy-content a {
  color: var(--violet);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.foot {
  position: relative;
  overflow: hidden;
  padding-block: 56px;
  color: var(--white);
}
.foot__brand .wordmark__logo { width: 140px; height: 24px; }
.foot__promise,
.foot__note,
.foot__copy,
.foot__assoc { color: var(--white); }
.foot__nav a { color: var(--soft-lavender); }
.foot__nav a:hover { color: var(--white); }

/* Figma Homepage Template */
.home-rebrand { width: calc(100% - 2 * var(--gutter)); max-width: 69.375rem; margin-inline: auto; }
.home-brand-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: min(500px, calc((100vw - (2 * var(--gutter))) / 2));
  max-height: 500px;
  overflow: hidden;
  background: var(--violet);
  border-radius: var(--r-control);
}
.home-brand-hero__image { width: 100%; height: 100%; object-fit: cover; }
.home-brand-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  color: var(--surface-linen);
}
.home-brand-hero__eyebrow {
  margin: 0;
  color: var(--surface-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-brand-hero h1 { color: var(--surface-linen); font-size: 2.125rem; line-height: 2.625rem; }
.home-brand-hero p { max-width: none; }
.home-brand-hero__copy > p:last-child { font-size: 1rem; line-height: 1.625rem; }
.home-brand-hero__copy a { color: inherit; font-weight: 700; }

.home-editorial {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.home-editorial__main { display: flex; flex-direction: column; gap: 32px; }
.home-editorial__feature {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.home-editorial__feature-image { width: 304px; height: 304px; object-fit: cover; border-radius: var(--r-control); }
.home-editorial__feature-copy { display: flex; flex-direction: column; min-width: 0; padding-block: 16px; }
.home-editorial__feature-copy h2 { margin: 0 0 24px; }
.home-editorial__feature-copy p { font-size: 0.9375rem; line-height: 1.5rem; }
.home-editorial__feature-copy .btn { align-self: flex-start; margin-top: auto; }
.home-editorial__more {
  padding: 16px;
  background: var(--surface-linen);
  border-radius: var(--r-control);
}
.home-editorial__more-title { margin: 0 0 12px; font-weight: 700; }
.home-editorial__more-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-editorial__more-links a { font-size: 0.875rem; line-height: 1.25rem; }
.home-editorial__popular { padding: 24px; background: var(--soft-lavender); border-radius: var(--r-control); }
.home-editorial__popular h2 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(251,248,244,.55); color: var(--surface-linen); }
.home-popular-list { display: grid; gap: 16px; }
.home-popular-card { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; color: var(--surface-linen); font-size: 1rem; font-weight: 700; line-height: 1.375rem; }
.home-popular-card + .home-popular-card { padding-top: 16px; border-top: 1px solid rgba(251,248,244,.45); }
.home-popular-card img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-control); }
.home-popular-card:hover { color: var(--white); }
.home-rebrand + .sect--carousel { margin-top: 80px; }
.sect--carousel .component-surface { background: var(--surface-linen); }

.home-product-grid {
  margin-top: 80px;
  padding: 40px;
  background: var(--surface-linen);
  border-radius: var(--r-lg);
}
.home-product-grid__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
}
.home-product-grid__header h2 { margin: 0; }
.home-product-grid__header a { flex: none; font-size: 0.875rem; font-weight: 500; }
.home-product-grid > .affiliate-disclosure { margin: 10px 0 32px; }
.home-product-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}
.home-product-grid .vcard__reason--why dd {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

@media (max-width: 63.9375rem) {
  .masthead__nav { gap: 18px; }
  .masthead__nav a,
  .masthead__nav .nav-drop > summary { padding-inline: 10px; }
  .home-editorial { grid-template-columns: 1fr; }
  .home-editorial__popular { max-width: none; }
}
@media (max-width: 47.9375rem) {
  .wordmark__logo { width: 146px; height: auto; }
  .masthead__cta { display: none; }
  .merch-bar__scroll { justify-content: flex-start; }
  .merch-pill { flex: 0 0 146px; min-width: 146px; max-width: none; height: 60px; }
  .home-brand-hero { grid-template-columns: 1fr; height: auto; max-height: none; }
  .home-brand-hero__image { height: auto; aspect-ratio: 1; }
  .home-brand-hero__copy { padding: 32px 24px; }
  .home-brand-hero h1 { font-size: 1.75rem; line-height: 2.125rem; }
  .home-editorial__feature { grid-template-columns: 1fr; }
  .home-editorial__feature-image { width: 100%; height: auto; aspect-ratio: 1; }
  .home-editorial__feature-copy { padding: 0; }
  .home-editorial__feature-copy .btn { margin-top: 16px; }
  .home-editorial__more-links { grid-template-columns: 1fr; }
  .home-product-grid { padding: 32px 24px; }
  .home-product-grid__header { align-items: flex-start; }
  .home-product-grid__cards { grid-template-columns: 1fr; }
  .guide--story { padding: 32px 24px; }
  .guide__more { padding: 32px 24px 40px; }
  .long-copy-surface { padding: 32px 24px; }
}
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .home-product-grid__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}