/* =============================================================================
   worn by you — brand.css
   Loaded after Bootstrap 5.3's CSS on every page. Bootstrap supplies the grid,
   utilities, offcanvas, modal and collapse *behaviour* only — every visual trace
   of it (radius, shadow, blue, spacing, type) is overridden below (§14). Nothing
   in here should ever be undone by a later <style> block; if a page needs a one-
   off, it gets a class here, not an inline style.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Instrument+Sans:wght@300;400;500&family=Sacramento&display=swap');

/* ---- Design tokens (§3) --------------------------------------------------- */
:root {
  --bone:     #F4F3F1; /* page background */
  --paper:    #FBFAF9; /* raised sections, cards */
  --sand:     #E4E0DA; /* hairline borders, dividers */
  --ink:      #171614; /* headings, body, footer background */
  --graphite: #6B6E70; /* secondary text — the logo grey */
  --gold:     #B08D2E; /* THE accent: underlines, rules, hovers — never small body text */
  --gold-lt:  #D9A94A; /* decorative, or on dark backgrounds only */
  --sage:     #2E4A34; /* trust/eco moments, sparingly */

  --font-mono:   "Space Mono", ui-monospace, "Courier New", monospace;
  --font-sans:   "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Sacramento", cursive;

  --section-pad-mobile: 80px;
  --section-pad-desktop: 128px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Bootstrap variable overrides (§14) ----------------------------------- */
:root {
  --bs-body-bg: var(--bone);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-weight: 300;
  --bs-body-line-height: 1.65;
  --bs-primary: var(--gold);
  --bs-primary-rgb: 176, 141, 46;
  --bs-secondary-color: var(--graphite);
  --bs-border-color: var(--sand);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
  --bs-link-color: var(--ink);
  --bs-link-hover-color: var(--ink);
  --bs-link-decoration: none;
  --bs-focus-ring-color: rgba(176, 141, 46, .4);
}

/* Zero border-radius, sitewide, no exceptions — this single change sheds more
   of the Bootstrap look than anything else (§14). */
*, *::before, *::after { border-radius: 0 !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bone);
  color: var(--ink);
}

img, video { max-width: 100%; height: auto; display: block; }

/* The native `hidden` attribute has the same specificity as a single class, so
   Bootstrap utilities like .d-flex — deliberately !important, to reliably win
   against component CSS — beat a plain `hidden` on the same element and the
   "hidden" thing stays visible. Toggling `hidden` from JS/PHP (checkout's
   summary rows, the cart drawer's empty/footer states) must always actually
   hide the element, so this needs to be both !important and later in the
   cascade than Bootstrap's own rules — which, loaded first in <head>, it is. */
[hidden] { display: none !important; }

/* Visible focus rings everywhere (§13) — Bootstrap's default is fine, this just
   makes sure removing box-shadow elsewhere didn't take it out too. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 2000;
  background: var(--ink);
  color: var(--bone);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip-link:focus { top: 8px; }

/* ---- Typography ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.display-hero { font-size: clamp(2.5rem, 8.5vw, 5.75rem); }
.display-1 { font-size: clamp(2.25rem, 6vw, 4rem); }
.display-2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.display-3 { font-size: clamp(1.4rem, 2.6vw, 1.875rem); }

/* Space Mono: every small label — nav, eyebrows, buttons, prices, captions,
   table headers, form labels (§3). This is the face that carries the brand's
   personality, so it is never allowed to be "just a label": always uppercase,
   always tracked out. */
.mono, .eyebrow, .price, .caption, .label,
th, label, .btn, .nav-link, .form-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-weight: 400;
}

.eyebrow {
  display: block;
  color: var(--gold);
  margin-bottom: 1em;
}

.caption { color: var(--graphite); letter-spacing: 0.14em; }

small, .small { color: var(--graphite); }

/* Sacramento — the three reminder phrases, an occasional pull-quote, and the
   scrolling band. Nowhere else (§3): it is monoline to match the laser-engraved
   type on the actual rings, and using it for anything else would spend that
   resemblance on something that doesn't need it. */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

/* ---- Buttons (§14) ---------------------------------------------------------
   Ink fill, bone text; inverts to outline on hover. Uppercase Space Mono, 11px,
   0.14em tracking (looser mono block above is 0.22em — buttons get their own,
   slightly tighter, per §14), ~16px/32px padding. No Bootstrap blue, ever. */
.btn {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 400;
  padding: 16px 32px;
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:focus { box-shadow: none; }

.btn-ink, .btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}
.btn-ink:hover, .btn-ink:focus-visible,
.btn-primary:hover, .btn-primary:focus-visible {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline-ink {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline-ink:hover, .btn-outline-ink:focus-visible {
  background: var(--ink);
  color: var(--bone);
}

.btn-bone {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}
.btn-bone:hover, .btn-bone:focus-visible {
  background: transparent;
  color: var(--bone);
  border-color: var(--bone);
}

.btn-sm { padding: 12px 24px; font-size: 10px; }
.btn-lg { padding: 18px 40px; font-size: 12px; }
.btn:disabled, .btn.disabled { opacity: .4; cursor: not-allowed; }

/* ---- Forms ------------------------------------------------------------------
   Storefront inputs are borderless with a single 1px bottom rule that turns
   gold on focus (§14). Scoped to .field so admin — which wants boxed inputs —
   is untouched when admin.css lands. */
.form-control, .form-select {
  border-radius: 0;
  box-shadow: none;
}
.form-control:focus, .form-select:focus {
  box-shadow: none;
  border-color: var(--gold);
}

.field { margin-bottom: 20px; }
.field label, .field .form-label {
  display: block;
  margin-bottom: 8px;
  color: var(--graphite);
}
.field .form-control, .field .form-select {
  border: none;
  border-bottom: 1px solid var(--sand);
  border-radius: 0;
  background: transparent;
  padding: 10px 2px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
}
.field .form-control:focus, .field .form-select:focus {
  border-bottom-color: var(--gold);
  outline: none;
}
.field .form-control::placeholder { color: var(--graphite); opacity: .7; }

.form-check-input { border-radius: 0; border-color: var(--sand); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-input:focus { box-shadow: none; border-color: var(--gold); }

/* ---- Links: gold underline sweeps in, ink sweeps out (§14) ------------------ */
.link-sweep {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  padding-bottom: 3px;
}
.link-sweep::before, .link-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
}
.link-sweep::before {
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform .4s var(--ease);
}
.link-sweep::after {
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .4s var(--ease);
}
.link-sweep:hover::before, .link-sweep:focus-visible::before { transform-origin: right; transform: scaleX(0); }
.link-sweep:hover::after, .link-sweep:focus-visible::after { transform-origin: left; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .link-sweep::before, .link-sweep::after { transition: none; }
}

/* ---- Cards: flat, no radius, no shadow (§14) -------------------------------- */
.card, .card-flat {
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 0;
  box-shadow: none;
}
.card-flat { padding: 24px; }

/* ---- Badges (feature/material claims, §8.5) --------------------------------- */
.badge-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 32px 16px;
}
.badge-feature img { width: 64px; height: auto; }
.badge-feature .badge-feature-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; }
.badge-feature p:not(.badge-feature-title) { color: var(--graphite); font-size: 14px; max-width: 22ch; }

/* Bootstrap's own .badge component — restyled, never left with a bg-* colour
   (§14: "no .badge bg-* colours"). */
.badge {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  font-weight: 400;
  padding: 5px 10px;
  border-radius: 0;
}
.badge.badge-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

/* ---- Alerts — restyled, no .alert-info blue (§14) --------------------------- */
.alert {
  border-radius: 0;
  border: 1px solid var(--sand);
  background: var(--paper);
  color: var(--ink);
}
.alert-success { border-color: var(--sage); }
.alert-danger { border-color: #a33; color: #a33; background: #fdf2f2; }

/* ---- Sections & rules -------------------------------------------------------- */
.section { padding-block: var(--section-pad-mobile); }
@media (min-width: 992px) {
  .section { padding-block: var(--section-pad-desktop); }
}
.section-tight { padding-block: calc(var(--section-pad-mobile) / 2); }
@media (min-width: 992px) {
  .section-tight { padding-block: calc(var(--section-pad-desktop) / 2); }
}

hr, .hr {
  border: none;
  border-top: 1px solid var(--sand);
  opacity: 1;
  margin: 0;
}

.bg-ink { background: var(--ink); color: var(--bone); }
.bg-paper { background: var(--paper); }
.bg-bone { background: var(--bone); }
.text-graphite { color: var(--graphite); }
.text-gold { color: var(--gold); }
.text-sage { color: var(--sage); }

/* ---- Motion vocabulary (§14) — reused everywhere, nothing bespoke ----------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-up.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

.img-hover-zoom { overflow: hidden; display: block; }
.img-hover-zoom img { transition: transform 1.2s var(--ease); }
.img-hover-zoom:hover img, .img-hover-zoom:focus-within img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .img-hover-zoom img { transition: none; }
  .img-hover-zoom:hover img { transform: none; }
}

/* Cross-fade pair used by "Shop by Reminder" and featured product cards (§8.3/4):
   two stacked images, the second fades in on hover (desktop) or a .is-active
   class (mobile, toggled by site.js on scroll-into-view). */
.img-crossfade { position: relative; overflow: hidden; display: block; }
.img-crossfade picture, .img-crossfade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-crossfade picture:last-child {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.img-crossfade:hover picture:last-child,
.img-crossfade.is-active picture:last-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .img-crossfade picture:last-child { transition: none; }
}

/* =============================================================================
   Global chrome
   ========================================================================== */

.announcement-bar {
  background: var(--ink);
  color: var(--bone);
  text-align: center;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.announcement-bar a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 3px; }

:root { --header-h: 92px; }

/*
 * The header is ALWAYS position: sticky, in both is-transparent and is-solid —
 * it never switches layout mode. Earlier this used position:absolute for the
 * transparent state, which detached it from the document entirely and made it
 * overlap the announcement bar above it (position:absolute with no positioned
 * ancestor anchors to the initial containing block, i.e. the very top of the
 * page, ignoring whatever the announcement bar's actual height is). Switching
 * to position:sticky mid-scroll would also have caused a layout jump the
 * instant it started reserving flow space it hadn't been reserving a moment
 * before. Instead: the header keeps a fixed, guaranteed height (--header-h,
 * via .header-inner's min-height below) and always reserves that space in flow
 * right after the announcement bar; the hero/banner section that follows it
 * pulls itself up by exactly that height (see .hero-slider/.page-banner) so it
 * renders behind the header instead of below it. Only background-color/
 * border-color transition — no position, no jump, ever.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.site-header.no-transition { transition: none; }

.site-header.is-transparent {
  background: transparent;
  border-bottom: 1px solid transparent;
}
/* Soft dark scrim behind a transparent header, or the logo/nav vanish against a
   pale part of the hero photo (§8). */
.site-header.is-transparent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0));
  z-index: -1;
  pointer-events: none;
}
.site-header.is-transparent { color: var(--bone); }
.site-header.is-transparent .nav-link,
.site-header.is-transparent .link-sweep { color: var(--bone); }

.site-header.is-solid {
  background: var(--bone);
  border-bottom: 1px solid var(--sand);
  color: var(--ink);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
  padding: 0 clamp(16px, 4vw, 48px);
  max-width: 1600px;
  margin-inline: auto;
  box-sizing: border-box;
}

.nav-toggle {
  justify-self: start;
  background: none;
  border: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  padding: 11px;
  margin: -11px;
}
@media (min-width: 992px) { .nav-toggle { display: none; } }

.nav-primary {
  display: none;
  justify-self: start;
  gap: 32px;
}
@media (min-width: 992px) { .nav-primary { display: flex; } }
.nav-primary .nav-link { padding: 0; color: inherit; }

.site-header .logo { justify-self: center; grid-column: 2; line-height: 0; }
.site-header .logo img { width: 150px; height: auto; }
@media (min-width: 992px) { .site-header .logo img { width: 180px; } }
.site-header.is-solid .logo-bone,
.site-header.is-transparent .logo-ink { display: none; }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
}
.header-actions .link-sweep { color: inherit; }

.bag-toggle {
  position: relative;
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 11px;
  margin: -11px;
}
.bag-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bag-count:empty, .bag-count[data-cart-count="0"] { display: none; }

/* Mobile nav drawer — Bootstrap Offcanvas, restyled full-screen and on-brand. */
.nav-drawer {
  width: 100% !important;
  max-width: 100%;
  background: var(--bone);
  color: var(--ink);
}
.nav-drawer .offcanvas-header {
  padding: 18px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--sand);
}
.btn-close-drawer {
  background: none;
  border: none;
  color: var(--ink);
  font-size: 22px;
  padding: 11px;
  margin: -11px;
}
.nav-drawer-list { list-style: none; margin: 0; padding: 24px clamp(16px, 4vw, 48px); }
.nav-drawer-list li { border-bottom: 1px solid var(--sand); }
.nav-drawer-list a {
  display: block;
  padding: 20px 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.5rem, 6vw, 2rem);
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}

/* Scrolling script band — the site's signature element, used exactly twice
   (home page, and here above the footer). One continuous line: the content is
   repeated 4x in the track and translated -50%, so the loop never shows a seam. */
.script-band {
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
  overflow: hidden;
  padding: 24px 0;
  background: var(--bone);
}
.script-band-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  white-space: nowrap;
  animation: script-scroll 32s linear infinite;
}
.script-band-track .script { font-size: clamp(1.75rem, 4vw, 3rem); color: var(--ink); }
.script-band-track .script::after { content: "\2014"; margin-left: 3rem; color: var(--sand); }
.script-band:hover .script-band-track { animation-play-state: paused; }
@keyframes script-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .script-band-track { animation: none; }
}

/* ---- Footer ------------------------------------------------------------------ */
.site-footer {
  background: var(--ink);
  color: var(--bone);
}
.site-footer a { color: var(--bone); }
.site-footer .container-fluid { max-width: 1600px; padding-inline: clamp(16px, 4vw, 48px); }

.footer-newsletter { padding-block: var(--section-pad-mobile); border-bottom: 1px solid rgba(244,243,241,.15); }
@media (min-width: 992px) { .footer-newsletter { padding-block: calc(var(--section-pad-desktop) * .6); } }
.footer-newsletter h2 { color: var(--bone); max-width: 24ch; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; max-width: 640px; }
.newsletter-form .field { flex: 1 1 200px; margin-bottom: 0; }
.newsletter-form .field .form-control { border-bottom-color: rgba(244,243,241,.3); color: var(--bone); }
.newsletter-form .field .form-control::placeholder { color: rgba(244,243,241,.6); }
.newsletter-form .field .form-control:focus { border-bottom-color: var(--gold); }

.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
  padding-block: var(--section-pad-mobile);
}
@media (min-width: 768px) {
  .footer-columns { grid-template-columns: repeat(4, 1fr); }
}
.footer-columns .label { color: var(--gold-lt); margin-bottom: 16px; display: block; }
.footer-columns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-columns a { text-decoration: none; opacity: .85; font-weight: 300; }
.footer-columns a:hover { opacity: 1; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
  border-top: 1px solid rgba(244,243,241,.15);
  font-size: 13px;
  color: rgba(244,243,241,.7);
}
.footer-bottom .instagram-link { text-decoration: none; color: var(--bone); }
.payment-icons { display: flex; gap: 12px; font-size: 22px; color: rgba(244,243,241,.6); }

/* =============================================================================
   Page components — Milestone 3 (storefront, read-only)
   ========================================================================== */

/* ---- Page banner (Shop/Our Story/Journal/Contact) --------------------------- */
.page-banner {
  position: relative;
  height: 38svh;
  min-height: 280px;
  overflow: hidden;
  background: var(--ink);
  /* Pulls the banner up by exactly the header's reserved height, so it renders
     behind the (transparent, sticky) header instead of below it — see the note
     above .site-header. Only used on pages that pass $heroTransparent = true. */
  margin-top: calc(-1 * var(--header-h));
}
.page-banner picture, .page-banner img { width: 100%; height: 100%; object-fit: cover; }
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.42));
}
.page-banner-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 6vw, 80px);
  color: var(--bone);
}
.page-banner-content .eyebrow { color: var(--gold-lt); }
.page-banner-content h1 { color: var(--bone); }

/* ---- Hero slider (home) ------------------------------------------------------ */
.hero-slider {
  position: relative;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: var(--ink);
  margin-top: calc(-1 * var(--header-h)); /* see .page-banner and the note above .site-header */
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease);
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide picture, .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide.is-active img { animation-name: hero-kenburns; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active img { animation: none; }
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.48));
}
.hero-slide-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 6vw, 80px);
  max-width: 760px;
  color: var(--bone);
}
.hero-slide-content .eyebrow { color: var(--gold-lt); }
.hero-slide-content h1 { color: var(--bone); margin-bottom: 20px; }
.hero-slide-content p { color: rgba(244,243,241,.88); max-width: 46ch; margin-bottom: 28px; font-size: 1.05rem; }

.hero-controls {
  position: absolute;
  left: clamp(20px, 6vw, 80px);
  right: clamp(20px, 6vw, 80px);
  bottom: 32px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hero-ticks { display: flex; gap: 12px; }
.hero-tick { width: 44px; height: 44px; padding: 0; background: none; border: none; display: flex; align-items: center; cursor: pointer; }
.hero-tick-track { width: 100%; height: 2px; background: rgba(244,243,241,.35); position: relative; overflow: hidden; }
.hero-tick-fill { position: absolute; inset: 0; width: 0%; background: var(--gold-lt); }
.hero-tick-fill.is-filling { animation-name: hero-tick-fill; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes hero-tick-fill { from { width: 0%; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .hero-tick-fill.is-filling { animation: none; width: 100%; }
}
.hero-arrows { display: none; }
@media (min-width: 768px) {
  .hero-arrows { display: flex; gap: 8px; }
  .hero-prev, .hero-next {
    width: 44px; height: 44px;
    background: none; border: 1px solid rgba(244,243,241,.4);
    color: var(--bone);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .hero-prev:hover, .hero-next:hover { border-color: var(--bone); }
}

/* ---- Shop by Reminder rows ---------------------------------------------------- */
.reminder-row { display: flex; flex-direction: column; }
@media (min-width: 992px) {
  .reminder-row { flex-direction: row; align-items: center; gap: 64px; }
  .reminder-row.is-reverse { flex-direction: row-reverse; }
}
.reminder-row-image { flex: 1 1 50%; }
.reminder-row-image .img-crossfade { aspect-ratio: 4 / 5; }
.reminder-row-content { flex: 1 1 50%; padding-top: 32px; }
@media (min-width: 992px) { .reminder-row-content { padding-top: 0; padding-inline: 16px; } }
.reminder-row-content .script { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: 16px; }
.reminder-row-content .lead-text { color: var(--graphite); max-width: 42ch; margin-bottom: 24px; }
.reminder-row + .reminder-row { margin-top: var(--section-pad-mobile); }
@media (min-width: 992px) { .reminder-row + .reminder-row { margin-top: calc(var(--section-pad-desktop) * .5); } }

/* ---- Feature badges strip ----------------------------------------------------- */
.badges-strip { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--sand); }
@media (min-width: 768px) { .badges-strip { grid-template-columns: repeat(3, 1fr); } }
.badges-strip .badge-feature { border-bottom: 1px solid var(--sand); }
@media (min-width: 768px) {
  .badges-strip .badge-feature { border-bottom: none; border-right: 1px solid var(--sand); }
  .badges-strip .badge-feature:last-child { border-right: none; }
}

/* ---- Looping video section ----------------------------------------------------- */
.video-section { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 992px) { .video-section { grid-template-columns: 1fr 1fr; gap: 64px; } }
.video-section video, .video-section .video-poster { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand); }

/* ---- Reviews rail --------------------------------------------------------------- */
.reviews-rail-wrap { position: relative; }
.reviews-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.reviews-rail::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 82%; scroll-snap-align: start; padding: 24px; }
@media (min-width: 576px) { .review-card { flex-basis: 340px; } }
.review-card .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 12px; display: block; }
.review-card .review-author { margin-top: 16px; }
.rail-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--bone);
  border: 1px solid var(--sand);
  z-index: 2;
}
@media (min-width: 992px) {
  .rail-arrow { display: flex; }
  .rail-arrow.is-prev { left: -22px; }
  .rail-arrow.is-next { right: -22px; }
}

/* ---- Our Story teaser (home) + gallery (our-story.php) ------------------------- */
.story-teaser { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 992px) { .story-teaser { flex-direction: row; align-items: center; gap: 64px; } }
.story-teaser-image, .story-teaser-content { flex: 1 1 50%; }
.story-teaser-image img, .story-teaser-image picture { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.story-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: var(--section-pad-mobile); }
@media (min-width: 992px) { .story-gallery { margin-top: var(--section-pad-desktop); } }
.story-gallery img, .story-gallery picture { width: 100%; height: 100%; object-fit: cover; }
.story-gallery .story-gallery-full { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.story-gallery .story-gallery-half { aspect-ratio: 3 / 4; }

/* ---- Instagram grid (home) ------------------------------------------------------ */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
@media (min-width: 768px) { .ig-grid { grid-template-columns: repeat(6, 1fr); } }
.ig-grid a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.ig-grid picture, .ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ig-grid a:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .ig-grid img { transition: none; } }

/* ---- Shop: filter bar, product grid, sizing explainer -------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sand);
  margin-bottom: 40px;
}
.filter-bar .field { margin-bottom: 0; min-width: 150px; }
.filter-bar .field .form-select { padding: 10px 2px; }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
.product-card { display: flex; flex-direction: column; padding: 0; }
.product-card-body { padding: 20px; }
.product-card-name { font-size: 1.4rem; display: block; margin-bottom: 4px; }

.sizing-explainer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  padding: 32px clamp(16px, 4vw, 48px);
  background: var(--paper);
  border: 1px solid var(--sand);
  margin-top: var(--section-pad-mobile);
}
@media (min-width: 992px) { .sizing-explainer { margin-top: var(--section-pad-desktop); } }

/* ---- Product page --------------------------------------------------------------- */
.pdp-layout { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 992px) { .pdp-layout { flex-direction: row; gap: 64px; align-items: flex-start; } }

.pdp-gallery { flex: 1 1 58%; min-width: 0; }
.pdp-gallery-rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0;
  scrollbar-width: none;
}
.pdp-gallery-rail::-webkit-scrollbar { display: none; }
@media (min-width: 992px) {
  .pdp-gallery-rail { flex-direction: column; overflow: visible; scroll-snap-type: none; gap: 16px; }
}
.pdp-gallery-rail > * { flex: 0 0 100%; scroll-snap-align: start; }
.pdp-gallery-rail picture, .pdp-gallery-rail img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.pdp-detail { flex: 1 1 42%; min-width: 0; }
@media (min-width: 992px) { .pdp-detail { position: sticky; top: 100px; align-self: flex-start; } }
.pdp-breadcrumb { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); margin-bottom: 20px; }
.pdp-breadcrumb a { color: var(--graphite); }
.pdp-detail .script { font-size: clamp(2rem, 4vw, 2.75rem); display: block; margin: 8px 0 16px; }
.pdp-price { font-size: 14px; margin-bottom: 28px; }
.pdp-price s { color: var(--graphite); margin-left: 8px; }

.pdp-options { margin-bottom: 8px; }
.pdp-option-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pdp-option-label .size-guide-link { text-transform: none; letter-spacing: normal; font-family: var(--font-sans); font-size: 13px; }
.pdp-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.pdp-swatch {
  border: 1px solid var(--sand);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.pdp-swatch.is-selected { border-color: var(--ink); background: var(--ink); color: var(--bone); }
.pdp-swatch:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.pdp-size-error {
  display: none;
  color: #a33;
  font-size: 13px;
  margin: -12px 0 20px;
}
.pdp-size-error.is-visible { display: block; }
.pdp-add-note { display: none; margin-top: 16px; }
.pdp-add-note.is-visible { display: block; }

.pdp-accordion .accordion-item { border: none; border-top: 1px solid var(--sand); background: transparent; }
.pdp-accordion .accordion-item:last-child { border-bottom: 1px solid var(--sand); }
.pdp-accordion .accordion-button {
  background: transparent;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  padding: 18px 4px;
  box-shadow: none;
  color: var(--ink);
}
.pdp-accordion .accordion-button:focus { box-shadow: none; }
.pdp-accordion .accordion-button:not(.collapsed) { background: transparent; color: var(--ink); }
.pdp-accordion .accordion-body {
  padding: 0 4px 20px;
  color: var(--graphite);
  font-family: var(--font-sans);
  font-weight: 300;
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
}
.pdp-badges { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.pdp-badges img { width: 36px; height: auto; }
.pdp-badges .pdp-badge { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--graphite); }

.pdp-sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--bone);
  border-top: 1px solid var(--sand);
  padding: 12px clamp(16px, 4vw, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 900;
  transform: translateY(100%);
  transition: transform .3s var(--ease);
}
.pdp-sticky-bar.is-visible { transform: translateY(0); }
@media (min-width: 992px) { .pdp-sticky-bar { display: none; } }

/* ---- Journal ---------------------------------------------------------------------- */
.journal-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .journal-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.post-card-image { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 20px; display: block; }
.post-card-image img, .post-card-image picture { width: 100%; height: 100%; object-fit: cover; }
.post-card .eyebrow { margin-bottom: 8px; }
.post-meta { color: var(--graphite); font-size: 13px; margin-top: 8px; }

.post-body { max-width: 68ch; margin-inline: auto; }
.post-body p { margin-bottom: 1.4em; font-size: 1.05rem; }
.post-body h3 { margin: 1.6em 0 .6em; font-size: 1.4rem; }
.post-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--section-pad-mobile); }
@media (min-width: 992px) { .post-cover { margin-bottom: var(--section-pad-desktop); } }

/* ---- Contact ------------------------------------------------------------------------ */
.contact-layout { display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 992px) { .contact-layout { flex-direction: row; gap: 80px; } }
.contact-info, .contact-form-col { flex: 1 1 50%; min-width: 0; }
.contact-info .field-line { display: flex; gap: 12px; margin-bottom: 20px; }
.contact-info .field-line i { color: var(--gold); }

/* =============================================================================
   Cart — Milestone 4
   ========================================================================== */

.cart-drawer {
  width: 420px !important;
  max-width: 100%;
  background: var(--bone);
  color: var(--ink);
}
.cart-drawer .offcanvas-header { padding: 18px clamp(16px, 4vw, 32px); border-bottom: 1px solid var(--sand); }
.cart-drawer-body { padding: 0 clamp(16px, 4vw, 32px); }
.cart-empty { padding: 64px 0; text-align: center; }

.cart-items-list { list-style: none; margin: 0; padding: 20px 0; display: flex; flex-direction: column; gap: 20px; }
.cart-line-item { display: flex; gap: 16px; border-bottom: 1px solid var(--sand); padding-bottom: 20px; }
.cart-line-thumb { flex: 0 0 80px; width: 80px; height: 80px; overflow: hidden; background: var(--paper); }
.cart-line-thumb picture, .cart-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-name { font-size: 15px; }
.cart-line-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-line-remove { background: none; border: none; color: var(--graphite); font-size: 16px; padding: 4px; }
.cart-line-remove:hover { color: #a33; }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--sand); }
.qty-stepper button { width: 32px; height: 32px; background: none; border: none; font-size: 16px; line-height: 1; cursor: pointer; }
.qty-stepper button:hover { background: var(--paper); }
.qty-value { min-width: 32px; text-align: center; font-family: var(--font-mono); font-size: 12px; display: inline-block; }

.cart-drawer-footer { padding: 20px clamp(16px, 4vw, 32px) 24px; border-top: 1px solid var(--sand); }

/* Card "quick add" size row — cloned from the <template> in cart-drawer.php. */
.card-size-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-size-row-swatches { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.card-size-row-swatches button {
  border: 1px solid var(--sand);
  background: var(--paper);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.card-size-row-swatches button:hover { border-color: var(--ink); }
.card-size-row-swatches button:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.card-size-row-cancel { background: none; border: 1px solid var(--sand); width: 28px; height: 28px; flex: 0 0 28px; font-size: 15px; line-height: 1; cursor: pointer; }

/* Bag icon bump on add, and the fly-to-bag ghost image (§8). */
.bag-toggle.is-bumped { animation: bag-bump .4s var(--ease); }
@keyframes bag-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

.fly-to-bag-ghost {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  overflow: hidden;
}
.fly-to-bag-ghost img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================================
   Checkout & order confirmation — Milestone 4
   ========================================================================== */

.checkout-layout { display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 992px) { .checkout-layout { flex-direction: row; gap: 64px; align-items: flex-start; } }
.checkout-form-col { flex: 1 1 60%; min-width: 0; }
.checkout-summary-col { flex: 1 1 38%; min-width: 0; }
@media (min-width: 992px) { .checkout-summary-col { position: sticky; top: 116px; align-self: flex-start; } }

.checkout-block { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--sand); }
.checkout-block:last-of-type { border-bottom: none; }

.shipping-rate, .payment-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--sand);
  margin-bottom: 10px;
  cursor: pointer;
}
.shipping-rate:has(input:checked), .payment-method:has(input:checked) { border-color: var(--ink); }
.shipping-rate-info, .payment-method > span:last-child { flex: 1; }
.shipping-rate-name, .payment-method-name { font-size: 15px; }
.shipping-rate-price { font-size: 14px; }

.order-summary { padding: 28px; }
.order-summary-items { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.order-summary-item { display: flex; align-items: center; gap: 14px; }
.order-summary-thumb { position: relative; flex: 0 0 56px; width: 56px; height: 56px; background: var(--paper); }
.order-summary-thumb picture, .order-summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-summary-qty {
  position: absolute;
  top: -8px; right: -8px;
  width: 20px; height: 20px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.order-summary-item-body { flex: 1; min-width: 0; }

/* ---- Order confirmation ------------------------------------------------------ */
.confirmation-check { font-size: 40px; color: var(--sage); margin-bottom: 16px; }
.confirmation-address, .confirmation-payment { padding: 24px; background: var(--paper); border: 1px solid var(--sand); }
