/* ==========================================================================
   Moonflower & Sage, theme component styles.
   Adapted from the static prototype styles.css (the visual ground truth).
   Spec: BRAND.md (tokens: section 11, voice: section 3)
   Soul: ART-DIRECTION.md (Light / Space / Pace govern every decision)

   Division of labor in the theme:
   - theme.json owns the tokens (as --wp--preset--* custom properties),
     the body background/text/typography, headings, links, and buttons.
   - This file owns the components: announcement strip, nav veil, hero,
     panels, cards, bands, forms, drawer, footer, dividers, reveals.
   - The prototype's custom properties are kept below as ALIASES onto the
     WordPress presets, so pattern HTML copied from the prototype keeps
     working unchanged.

   Contrast discipline (non-negotiable):
   - Body text is always --ink on cream/linen/paper, or cream on ink (footer).
   - --sage and --gold are DECORATIVE ONLY: botanical strokes, hairlines,
     fine dividers. Anything textual that wants sage uses --dark-sage,
     including eyebrow labels.
   - Gold never fills a large area. It is jewelry: 1px rules, small marks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token aliases. Every color that has a theme.json preset points at it;
      one palette edit in theme.json reaches every component and pattern.
      Only derived helpers keep literal values, sourced from --wp--custom--*.
   -------------------------------------------------------------------------- */
:root {
  --cream: var(--wp--preset--color--cream);
  --linen: var(--wp--preset--color--linen);
  --paper: var(--wp--preset--color--paper);
  --blush: var(--wp--preset--color--blush);
  --rose: var(--wp--preset--color--rose);
  --sage: var(--wp--preset--color--sage);
  --dark-sage: var(--wp--preset--color--dark-sage);
  --gold: var(--wp--preset--color--gold);
  --lavender: var(--wp--preset--color--lavender);
  --peach: var(--wp--preset--color--peach);
  --ink: var(--wp--preset--color--ink);
  --pale-ink: var(--wp--preset--color--pale-ink);
  --wax: var(--wp--custom--color--wax);   /* sanctioned derived tint: the drawn wax line
                                             inside the inline candle SVGs (.wax-line) */
  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);

  /* helpers derived from the tokens */
  --dark-sage-deep: var(--wp--custom--color--dark-sage-hover); /* encoded hover pair */
  --hairline: var(--wp--custom--color--hairline);              /* gold at whisper strength */
  --cream-veil: var(--wp--custom--color--cream-veil);          /* cream over imagery/reveals */
  --header-h: var(--wp--custom--header-height);

  /* motion: slow breathing, never snappy */
  --ease: var(--wp--custom--motion--ease);
  --ease-soft: var(--wp--custom--motion--ease-soft);
  --dur: var(--wp--custom--motion--duration);        /* buttons, hovers, small responses */
  --dur-slow: var(--wp--custom--motion--duration-slow); /* reveals, arrivals */
}

/* --------------------------------------------------------------------------
   2. WordPress glue. Scopes that keep this file from fighting theme.json
      and keep the template-part chrome behaving like the prototype's
      direct body children (the sticky nav needs a full-height ancestor).
   -------------------------------------------------------------------------- */
.wp-block-template-part { display: contents; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* The announcement strip is a Group holding one Paragraph in WP. */
.announce p { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }

/* In WP the cart control is a link to /cart/, not a JS button. */
a.cart-button { text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Base. Body background, text color, family, size, and line-height come
      from theme.json styles; nothing here re-declares them.
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* display:block matches the prototype ground truth: it lets margin-inline
   auto center the card and panel art, and it removes the inline baseline
   gap beneath every inline SVG still life. Do not drop it. */
img, svg { max-width: 100%; height: auto; display: block; }

/* Metric-matched Georgia fallbacks (WORDPRESS-LAYOUT.md section 3).
   The brand faces are self-hosted and swap in; until they do, Georgia
   renders size-adjusted to each face's real metrics so the hero never
   reflows at swap. Values computed from the bundled woff2 files against
   Georgia with frequency-weighted advance widths; regenerate only if the
   font files change. theme.json inserts these families into both stacks. */
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Georgia");
  size-adjust: 88.37%;
  ascent-override: 104.56%;
  descent-override: 32.48%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "EB Garamond Fallback";
  src: local("Georgia");
  size-adjust: 85.88%;
  ascent-override: 117.26%;
  descent-override: 34.7%;
  line-gap-override: 0%;
}

/* Skip link, from the prototype: invisible until focused, then a quiet
   cream chip above the announcement strip. Targets #main on every template. */
.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--cream);
  color: var(--dark-sage);
  padding: .75em 1.5em;
  border: 1px solid var(--hairline);
  text-decoration: none;
  font-size: .85rem;
  letter-spacing: .12em;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

a { text-decoration-thickness: 1px; text-underline-offset: .2em; }

:focus-visible {
  outline: 2px solid var(--dark-sage);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--blush); color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Type. Editorial, unhurried; the typography carries the luxury.
      Families/weights come from theme.json; the clamp curves here keep the
      prototype's exact scale on the front end.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  line-height: 1.18;
  letter-spacing: .01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.9rem, 7vw, 5.25rem); line-height: 1.08; }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.3rem; }

p { margin: 0 0 1.25em; }

.lede {
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 34em;
}

.muted { color: var(--pale-ink); }

/* Eyebrow labels: uppercase, tracked wide, editorial rhythm.
   Textual, so they take DARK sage, never the light sage token. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: var(--wp--custom--typography--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--dark-sage);
  margin: 0 0 1.5rem;
}

/* Soft italic voice for intention lines and asides */
.whisper {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--pale-ink);
}

.price {
  font-family: var(--font-body);
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--pale-ink);
}

/* --------------------------------------------------------------------------
   5. Gold as jewelry: hairline rules and botanical dividers
   -------------------------------------------------------------------------- */
.ms-rule-gold {
  border: 0;
  height: 1px;
  width: 4rem;
  background: var(--gold);
  margin: 2.25rem auto;
}
.ms-rule-gold--left { margin-left: 0; }
.ms-rule-gold--wide { width: 7rem; }

/* Botanical divider: two gold hairlines around a small inline sprig SVG.
   Usage: <div class="ms-divider" aria-hidden="true"><svg ...sprig...></svg></div> */
.ms-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto;
  max-width: 20rem;
}
.ms-divider::before,
.ms-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.ms-divider svg { width: 2rem; flex: none; }

/* --------------------------------------------------------------------------
   6. Layout rhythm. White space is the primary luxury signal.
   -------------------------------------------------------------------------- */
.container {
  width: min(72rem, 100% - clamp(2.5rem, 8vw, 6rem));
  margin-inline: auto;
}
.container--narrow { width: min(46rem, 100% - clamp(2.5rem, 8vw, 6rem)); }

.section { padding-block: clamp(5rem, 12vw, 9.5rem); }
.section--linen { background: var(--linen); }
.section--paper { background: var(--paper); }

/* The tender register: blush warmth for the gifting moment.
   Blush stays a wash, never a heavy fill. */
.section--gift {
  background: linear-gradient(180deg, rgba(232, 196, 196, .28), rgba(232, 196, 196, .12)), var(--cream);
}

.section-head { max-width: 42em; margin-bottom: clamp(3rem, 7vw, 5rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   7. The reveal system. Sections arrive like a slow breath.
      JS adds .is-visible once via IntersectionObserver (ms-site.js).
      Gated on .js so content is never hidden when scripts are off,
      and rendered visible immediately under prefers-reduced-motion.
      Kept EXACTLY as the prototype has it; this safety is load-bearing.
   -------------------------------------------------------------------------- */
.js .ms-reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-soft);
  will-change: opacity, transform;
}
.js .ms-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Optional fixed stagger steps (ms-site.js also staggers same-batch arrivals) */
.ms-delay-1 { transition-delay: .15s; }
.ms-delay-2 { transition-delay: .3s; }
.ms-delay-3 { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  .js .ms-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   8. Buttons. Calm, roomy, never loud. theme.json styles the core Button
      block; this class covers the prototype markup and pattern HTML, and
      keeps WooCommerce buttons on the same register via the shared class.
   -------------------------------------------------------------------------- */
.btn,
.wc-block-components-button,
.wp-element-button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: var(--wp--custom--typography--button-tracking);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1.15em 2.9em;
  background: var(--dark-sage);
  color: var(--cream);
  border: 1px solid var(--dark-sage);
  border-radius: 2px;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.btn:hover,
.wc-block-components-button:hover,
.wp-element-button:hover {
  background: var(--dark-sage-deep);
  border-color: var(--dark-sage-deep);
  color: var(--cream);
}

.btn--ghost { background: transparent; color: var(--dark-sage); }
.btn--ghost:hover { background: rgba(156, 175, 136, .12); color: var(--dark-sage-deep); }

.btn--small { padding: .85em 2em; font-size: .72rem; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--dark-sage); border-color: var(--dark-sage); }

/* Quiet text link, finished with a gold hairline */
.text-link {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dark-sage);
  border-bottom: 1px solid var(--gold);
  padding-bottom: .35em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.text-link:hover { color: var(--dark-sage-deep); border-color: var(--dark-sage); }

/* --------------------------------------------------------------------------
   9. Announcement strip. Thin and quiet; one static line, never a ticker.
   -------------------------------------------------------------------------- */
.announce {
  background: var(--linen);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  padding: .6rem 1.5rem;
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dark-sage);
}

/* --------------------------------------------------------------------------
   10. Sticky nav. Transparent over the hero, cream once scrolled (.scrolled).
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.scrolled {
  background: var(--cream);
  border-bottom-color: var(--hairline);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand em { font-style: italic; color: var(--dark-sage); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: .4em 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--dark-sage); }
/* aria-current="page" marks the exact page; parent-section links on product
   and article pages carry aria-current="true". Both take the gold underline. */
.nav-links a[aria-current] {
  color: var(--dark-sage);
  border-bottom-color: var(--gold);
}

.nav-actions { display: flex; align-items: center; gap: 1.1rem; }

.cart-button {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  padding: .4em .2em;
  transition: color var(--dur) var(--ease);
}
.cart-button:hover { color: var(--dark-sage); }
.cart-count { font-size: .72rem; color: var(--dark-sage); min-width: 1em; }

/* Mobile disclosure nav */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  padding: .5rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: .5rem 0 1.25rem; }
.mobile-menu a {
  display: block;
  padding: .95rem clamp(1.25rem, 4vw, 3rem);
  font-size: .85rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.mobile-menu a:hover,
.mobile-menu a[aria-current] { color: var(--dark-sage); }

@media (max-width: 840px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 841px) {
  .mobile-menu { display: none !important; }
}

/* --------------------------------------------------------------------------
   11. Hero. Full-bleed, enormous restraint; sits beneath the transparent nav.
   -------------------------------------------------------------------------- */
.hero {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(4.5rem, 12vw, 9rem));
  padding-bottom: clamp(5rem, 12vw, 9rem);
  background: linear-gradient(180deg, var(--linen) 0%, var(--cream) 62%);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.hero-copy .lede { margin-block: 1.75rem 3rem; }
.hero-art { justify-self: center; width: min(21rem, 100%); }

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { width: min(13rem, 60%); order: -1; }
}

/* --------------------------------------------------------------------------
   12. Season / collection panels. Recognition: "this is for me."
   -------------------------------------------------------------------------- */
.season-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.season-panel {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border-color var(--dur) var(--ease), transform .6s var(--ease-soft);
}
.season-panel:hover { border-color: var(--sage); transform: translateY(-4px); }
.season-panel .season-art { width: 4.25rem; margin-bottom: 1.5rem; }
.season-panel h3 { margin-bottom: .2em; }
.season-tag {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--pale-ink);
  margin-bottom: 1.1rem;
}
.season-panel .whisper { margin: 0 0 1.75rem; }
.season-panel .text-link { margin-top: auto; }

@media (max-width: 760px) {
  .season-grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   13. Product cards. Beautiful objects, not SKUs.
       Scent notes + intention line reveal on hover AND focus-within;
       always visible on touch so nothing is hover-locked.
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
@media (max-width: 860px) {
  .product-grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

.product-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease), box-shadow .6s var(--ease-soft);
}
.product-card:hover,
.product-card:focus-within {
  border-color: var(--sage);
  box-shadow: 0 20px 44px -30px rgba(61, 50, 41, .35);
}

.card-media {
  position: relative;
  background: var(--linen);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  overflow: hidden;
}
.card-media svg { width: min(14rem, 92%); margin-inline: auto; }
.card-media img { margin-inline: auto; }

.card-reveal {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--cream-veil);
  border-top: 1px solid var(--hairline);
  padding: 1.2rem 1.4rem 1.3rem;
  text-align: center;
  opacity: 0;
  transform: translateY(.7rem);
  transition: opacity .55s var(--ease-soft), transform .55s var(--ease-soft);
}
.product-card:hover .card-reveal,
.product-card:focus-within .card-reveal {
  opacity: 1;
  transform: translateY(0);
}
.card-reveal .notes {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dark-sage);
  margin: 0 0 .4rem;
}
.card-reveal .whisper { font-size: 1.1rem; margin: 0; }

@media (hover: none) {
  .card-reveal { position: static; opacity: 1; transform: none; }
}

.card-body {
  padding: 1.75rem 1.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  flex: 1;
}
.card-body h3 { margin: 0; }
.card-moment {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--pale-ink);
}

/* Whole card is clickable via the stretched title link;
   interactive children (Add to cart) sit above it. */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-body .btn,
.card-body .text-link { position: relative; z-index: 1; margin-top: auto; }
.card-body .price { margin-bottom: 1.1rem; }

/* Quiet footnote beneath a grid (e.g. the ritual card detail) */
.grid-footnote {
  text-align: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.grid-footnote .whisper { font-size: 1.15rem; }

/* --------------------------------------------------------------------------
   14. Bands. Journal + gifting (two-column editorial band).
   -------------------------------------------------------------------------- */
.band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}
.band--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.band-art { justify-self: center; width: min(21rem, 100%); }
.band-copy .whisper { display: block; margin-bottom: 1.5rem; }
.band-feature {
  border-top: 1px solid var(--hairline);
  margin-top: 2.25rem;
  padding-top: 1.75rem;
}
.band-feature h3 {
  font-size: 1.3rem;      /* keeps the former h4 scale; the tag is h3 for a sound outline */
  font-weight: 500;
  margin-bottom: .3em;
}
.band-feature p { margin-bottom: .75em; }
.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  margin-top: 2.25rem;
}

@media (max-width: 760px) {
  .band, .band--flip { grid-template-columns: 1fr; }
  .band-art { width: min(14rem, 70%); }
  .band--flip .band-art { order: -1; }
}

/* --------------------------------------------------------------------------
   15. Newsletter block. An invitation, never a capture.
   -------------------------------------------------------------------------- */
.newsletter { text-align: center; }
.newsletter .lede { margin-inline: auto; }

/* Background variant for the shared quiet-community pattern. The pattern
   ships on linen; a composite that needs the prototype's paper band (The
   Ritual index) wraps the wp:pattern reference in a Group carrying
   .ms-newsletter-paper instead of pasting a copy. */
.ms-newsletter-paper .newsletter.section--linen { background: var(--paper); }

.newsletter-form {
  display: flex;
  gap: 1.25rem;
  align-items: flex-end;
  justify-content: center;
  max-width: 30rem;
  margin: 3rem auto 0;
}
.newsletter-form .field { flex: 1; text-align: left; }
@media (max-width: 560px) {
  .newsletter-form { flex-direction: column; align-items: stretch; }
}
.form-note {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--dark-sage);
  min-height: 1.5em;
}

/* --------------------------------------------------------------------------
   16. Form fields. Roomy, calm, quiet underlines.
   -------------------------------------------------------------------------- */
.field label {
  display: block;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pale-ink);
  margin-bottom: .4rem;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pale-ink);
  border-radius: 0;
  padding: .6em .1em;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--pale-ink); opacity: .7; font-style: italic; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--dark-sage);
}

/* --------------------------------------------------------------------------
   17. Cart drawer. Slide-in stub (markup injected by ms-site.js only when a
       page carries [data-cart-open] or [data-add-to-cart] triggers; the
       WooCommerce cart and checkout pages never see it).
   -------------------------------------------------------------------------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(61, 50, 41, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  z-index: 90;
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(26rem, 100vw);
  background: var(--cream);
  border-left: 1px solid var(--blush);
  box-shadow: -30px 0 70px rgba(61, 50, 41, .14);
  transform: translateX(105%);
  transition: transform .55s var(--ease-soft);
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open { transform: none; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 1.75rem 1.3rem;
  border-bottom: 1px solid var(--hairline);
}
.drawer-head h2 { font-size: 1.6rem; margin: 0; }
.drawer-close {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--pale-ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: .25rem .5rem;
  transition: color var(--dur) var(--ease);
}
.drawer-close:hover { color: var(--ink); }

.drawer-body { flex: 1; overflow-y: auto; padding: 1.75rem; }

/* The considered empty state: a luxury signal, per the art direction */
.drawer-empty {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--pale-ink);
  margin: 0;
}
.drawer-empty .text-link { display: inline-block; margin-top: 1.25rem; font-style: normal; }

.cart-items { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.cart-items li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.cart-item-name { font-family: var(--font-display); font-size: 1.2rem; }
.cart-item-qty { font-size: .85rem; color: var(--pale-ink); }
.cart-item-price { font-size: .95rem; letter-spacing: .05em; }
.cart-item-remove {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pale-ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.cart-item-remove:hover { color: var(--ink); } /* rose fails contrast on cream; ink stays calm and legible */

/* Free shipping, phrased as an invitation. Deliberately no progress bar. */
.ship-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--pale-ink);
  margin: 1.5rem 0 0;
}

.drawer-gift { margin-top: 2.25rem; }

.drawer-foot {
  border-top: 1px solid var(--hairline);
  padding: 1.4rem 1.75rem 1.75rem;
  background: var(--paper);
}
.cart-total-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 1.1rem;
}
.drawer-foot .btn { width: 100%; }
.drawer-note {
  margin: 1rem 0 0;
  font-size: .92rem;
  font-style: italic;
  color: var(--pale-ink);
  text-align: center;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   18. Footer. Warm ink, cream text; the end of an evening.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(4rem, 9vw, 7rem) 2.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
  border-bottom: 1px solid rgba(253, 248, 240, .15);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .brand { color: var(--cream); font-size: 1.5rem; }
.footer-brand .brand em { color: var(--blush); }
.footer-brand p {
  color: rgba(253, 248, 240, .75);
  font-size: 1rem;
  max-width: 22em;
  margin-top: 1.1rem;
}
.footer-brand svg { width: 3.25rem; margin-top: 1.5rem; }

.footer-col .footer-title {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1.2rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .65rem; }
.footer-col a {
  color: rgba(253, 248, 240, .85);
  text-decoration: none;
  font-size: 1rem;
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--blush); } /* gold is decorative only, never a text color */

/* Footer placeholders. Social handles and policy pages are not yet live.
   These are plain text on purpose; swap each <span> for an <a> as URLs arrive. */
.footer-col li span {
  color: rgba(253, 248, 240, .55);
  font-size: 1rem;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2.25rem;
  font-size: .85rem;
  color: rgba(253, 248, 240, .6);
}
.footer-base a { color: rgba(253, 248, 240, .75); }
.footer-base a:hover { color: var(--blush); } /* gold is decorative only, never a text color */

/* --------------------------------------------------------------------------
   19. Inline SVG illustration helpers (classes used by inline artwork)
   -------------------------------------------------------------------------- */
.candle-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 3.5px;
  fill: var(--dark-sage);
}
.candle-sublabel {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 8px;
  letter-spacing: 1px;
  fill: var(--pale-ink);
}
.journal-title {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 2.6px;
  fill: var(--dark-sage);
}
/* The drawn wax line inside the candle vessels, token-backed so a palette
   change reaches the inline SVGs too. */
.wax-line { stroke: var(--wax); }

/* --------------------------------------------------------------------------
   20. Motion preferences. Stillness for those who ask for it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============================================================
   WooCommerce responsiveness + page gutters on small screens
   (added 2026-07-07: the block product grid ships fixed columns
   and Woo templates lack the theme container padding on mobile)
   ============================================================ */
@media (max-width: 781px) {
  body.woocommerce main.wp-block-group,
  body.woocommerce-page main.wp-block-group,
  body.woocommerce main.site-main,
  body.woocommerce-page main.site-main {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    box-sizing: border-box;
  }
}
@media (max-width: 720px) {
  .wc-block-product-template.columns-3,
  .wc-block-product-template.columns-4,
  ul.products.columns-3,
  ul.products.columns-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.25rem 1.25rem !important;
  }
}
@media (max-width: 440px) {
  .wc-block-product-template.columns-3,
  .wc-block-product-template.columns-4,
  ul.products.columns-3,
  ul.products.columns-4 {
    grid-template-columns: 1fr !important;
    max-width: 24rem;
    margin-inline: auto;
  }
}