/* ==========================================================================
   Nivelya Jewelry — the whole design system.
   One stylesheet, content-hashed on build, cached immutably across pages.
   No webfonts, no imports, no external requests.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root{
  /* Ink and ground. Gold sampled from the logo artwork. */
  --ink:#241d17;
  --ink-soft:#6d6058;
  --ink-faint:#9c8f85;
  --cream:#faf6f0;
  --cream-hi:#fffdfa;
  --cream-lo:#f0e8dc;
  --gold:#a8803f;        /* decorative use */
  --gold-deep:#8a6a2e;   /* small text: 4.6:1 on --cream */
  --error:#a4442f;
  --ok:var(--gold-deep);
  --line:rgba(36,29,23,.16);
  --line-soft:rgba(36,29,23,.08);

  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Spacing scale. Section rhythm is --sp-7 / --sp-8. */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2.25rem; --sp-7:3.5rem; --sp-8:5rem;

  --radius:2px;
  /* Radius is proportional to the panel, not a single number. 16px reads as a
     soft corner on a grid tile and as a pill on an 80px bag thumbnail, so the
     small media panels get their own step. */
  --radius-md:10px;   /* small media: the bag thumbnail */
  --radius-lg:16px;   /* soft corners, for media panels */
  --measure:38rem;        /* comfortable reading width for lede copy */
  --measure-wide:72ch;    /* legal and long-form pages */
  /* Full-bleed layout: containers fill the viewport and are held off the edge
     by padding alone. Individual text blocks still cap their own line length --
     a 200-character line is unreadable at any screen size. */
  --page-max:none;
  --pad-x:clamp(1.25rem,4vw,4.5rem);

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* --- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Reserve the scrollbar track whether or not there is one to show.
     The bag renders from localStorage, so an empty bag is a short page and a
     full one is a long page -- without this the whole layout jumps sideways by
     the width of the scrollbar the moment the first item is added, and again
     when the last one is removed. The same shift happens navigating between any
     long page and any short one.
     Costs nothing on platforms with overlay scrollbars (macOS, iOS), which have
     no track to reserve and never had the problem. */
  scrollbar-gutter:stable;
}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  color:var(--ink);
  background:var(--cream);
  background-image:radial-gradient(110% 80% at 50% -10%,var(--cream-hi) 0%,var(--cream) 48%,var(--cream-lo) 100%);
  background-attachment:fixed;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}

/* --- typography --------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.22;
  margin:0;
}
h1{font-size:clamp(1.9rem,6vw,3rem)}
h2{font-size:clamp(1.45rem,4.4vw,2.15rem)}
h3{font-size:clamp(1.15rem,3vw,1.4rem)}
p{margin:0}
a{color:inherit}

/* Small uppercase label — the secondary brand voice. */
.eyebrow{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.28em;
  text-indent:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
}

/* --- layout ------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--pad-x)}
/* Caps only the very widest displays so a line of text never runs away. */
@media (min-width:120rem){.wrap{max-width:120rem}}
.wrap--narrow{max-width:none}
main{flex:1 0 auto}
.section{padding-block:var(--sp-7)}
.section + .section{padding-block-start:0}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.stack--tight{gap:var(--sp-2)}
.stack--loose{gap:var(--sp-6)}
.center{text-align:center;align-items:center}
.lede{max-width:var(--measure)}
.lede p{color:var(--ink-soft);line-height:1.65}

/* --- header ------------------------------------------------------------- */
.site-header{
  border-bottom:1px solid var(--line-soft);
  padding-block:var(--sp-4);
}
.site-header .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3) var(--sp-5);
}
.site-header__logo{flex:none}
.site-header__logo img{width:clamp(168px,38vw,240px)}
.site-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--sp-2) var(--sp-5);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.site-nav a{
  text-decoration:none;
  color:var(--ink-soft);
  padding-block:var(--sp-1);
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--gold)}

/* Tap targets, WCAG 2.2 SC 2.5.8 (24x24 minimum).
   These labels set in .7rem uppercase render about 19px tall, which is under
   the minimum and unpleasant on a phone regardless. The hit area is grown with
   a pseudo-element rather than with padding on purpose: padding would push the
   border-bottom -- the hover rule and the gold current-page indicator -- away
   from the text and change the design. This leaves the visual box exactly where
   it was and only enlarges what a thumb can hit.
   Inline links inside a sentence are exempt from 2.5.8 and are left alone.

   -4px and not more: these lists have an 8px row gap and the breadcrumb an 8px
   column gap, so 4px of growth on each side makes neighbouring hit areas meet
   exactly. A larger inset would overlap them, and a tap in the overlap would
   land on whichever link happens to paint last. */
.site-nav a,
.footer-nav a,
.breadcrumb a{position:relative}
.site-nav a::after,
.footer-nav a::after,
.breadcrumb a::after{content:"";position:absolute;inset:-4px}

/* Below 48rem the nav wraps under a centered logo; above, it sits alongside. */
@media (min-width:48rem){
  .site-header .wrap{justify-content:space-between}
  .site-nav{justify-content:flex-end}
}

/* --- footer ------------------------------------------------------------- */
.site-footer{
  margin-top:var(--sp-8);
  border-top:1px solid var(--line-soft);
  padding-block:var(--sp-6);
  font-size:.78rem;
  color:var(--ink-soft);
}
.site-footer .wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);text-align:center}
.footer-nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--sp-2) var(--sp-5);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}
.footer-nav a{text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.footer-nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.site-footer address{font-style:normal;line-height:1.7;font-size:.74rem;color:var(--ink-faint)}
.site-footer__legal{font-size:.72rem;color:var(--ink-faint)}

/* --- buttons ------------------------------------------------------------ */
/* The brand CTA: borderless, uppercase, letterspaced gold. */
.btn{
  display:inline-block;
  border:0;background:none;cursor:pointer;
  padding:var(--sp-2) 0;
  font:inherit;font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);
  text-decoration:none;
  transition:color .2s,opacity .2s,background-color .2s,border-color .2s;
}
.btn:hover{color:var(--ink)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:default}
.btn:disabled:hover{color:var(--gold-deep)}

/* Bordered variant, for primary actions that need weight. */
.btn--outline{
  padding:var(--sp-3) var(--sp-5);
  border:1px solid var(--gold);
  border-radius:var(--radius);
}
.btn--outline:hover{background:var(--gold);color:var(--cream-hi)}

/* --- forms -------------------------------------------------------------- */
.form{width:min(430px,100%);display:flex;flex-direction:column;gap:var(--sp-3)}
.form--wide{width:100%;max-width:none}
.field{
  display:flex;gap:var(--sp-3);align-items:flex-end;
  border-bottom:1px solid var(--line);
  padding-bottom:var(--sp-2);
  transition:border-color .2s;
}
.field:focus-within{border-color:var(--gold)}
.field input,.field textarea,.field select{
  flex:1;min-width:0;
  border:0;background:none;
  padding:var(--sp-2) 2px;
  font:inherit;font-size:1rem;color:var(--ink);
}
.field textarea{resize:vertical;min-height:6rem;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none}
.field__label{
  display:block;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:var(--sp-1);
}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* Live region for form feedback. min-height stops the layout jumping. */
.status{min-height:1.2em;margin:0;font-size:.86rem;line-height:1.4;color:var(--ink-soft)}
.status[data-state=ok]{color:var(--ok)}
.status[data-state=error]{color:var(--error)}

/* --- prose (legal and long-form pages) ---------------------------------- */
.prose{max-width:var(--measure-wide)}
.prose h2{margin-block:var(--sp-6) var(--sp-3);font-size:clamp(1.25rem,3.4vw,1.6rem)}
.prose h3{margin-block:var(--sp-5) var(--sp-2)}
.prose p,.prose ul,.prose ol{margin-block:var(--sp-3);color:var(--ink-soft)}
.prose ul,.prose ol{padding-inline-start:1.35rem}
.prose li{margin-block:var(--sp-1)}
.prose a{color:var(--gold-deep)}
.prose strong{color:var(--ink);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin-block:var(--sp-4);font-size:.9rem}
.prose th,.prose td{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line-soft)}
.prose th{font-weight:500;color:var(--ink);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.prose td{color:var(--ink-soft)}
.prose__updated{font-size:.74rem;color:var(--ink-faint);letter-spacing:.06em}

/* Wide content must scroll inside itself, never the page. */
.scroll-x{overflow-x:auto}

/* --- motion ------------------------------------------------------------- */
/* Fade in up, on load, in CSS alone.
   This replaced a scroll-triggered version built on IntersectionObserver. The
   observer fires its first callback in the same frame the initial state is
   applied, so anything already on screen jumped straight to its end state with
   no transition at all — the animation only ever showed below the fold. A plain
   keyframe always runs, needs no script, and cannot leave the page blank if
   something fails to load. */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}
/* The reduced-motion variant. What that preference is protecting against is
   movement, not a change in opacity, so the fade stays and only the travel is
   dropped. Turning the animation off entirely -- which is what this did before
   -- means anyone with animations disabled at the OS level sees no entrance at
   all, which is a large share of Windows machines. */
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

.reveal,
.hero__inner,
.promises li,
.section-head,
.card,
.block,
.closing__story,
.closing__signup,
.arch,
.cta-band,
.lead-band,
.doc__rail,
.doc__aside,
.contact-col,
.product__media,
.product__info,
.product__description,
.checkout__step,
.pane__aside,
.filters,
.map{
  animation:fadeInUp .8s var(--ease) both;
}

/* Siblings arrive in sequence rather than as a slab. Capped at six so a long
   grid does not end on a two-second wait. */
.promises li:nth-child(2),.card:nth-child(2),.block:nth-child(2),.contact-col:nth-child(2),.checkout__step:nth-child(2){animation-delay:.08s}
.promises li:nth-child(3),.card:nth-child(3),.block:nth-child(3),.contact-col:nth-child(3),.checkout__step:nth-child(3){animation-delay:.16s}
.card:nth-child(4),.block:nth-child(4),.checkout__step:nth-child(4){animation-delay:.24s}
.card:nth-child(5),.block:nth-child(5),.checkout__step:nth-child(5){animation-delay:.32s}
.card:nth-child(6),.block:nth-child(6){animation-delay:.4s}

/* A grid item is the animated thing, but the card is wrapped on the shop page,
   so the wrapper carries the delay instead. */
.grid > *:nth-child(2) .card{animation-delay:.08s}
.grid > *:nth-child(3) .card{animation-delay:.16s}
.grid > *:nth-child(4) .card{animation-delay:.24s}
.grid > *:nth-child(5) .card{animation-delay:.32s}
.grid > *:nth-child(6) .card{animation-delay:.4s}

@media (prefers-reduced-motion:reduce){
  .reveal,.hero__inner,.promises li,.section-head,.card,.block,.closing__story,
  .closing__signup,.arch,.cta-band,.lead-band,.doc__rail,.doc__aside,
  .contact-col,.product__media,.product__info,.product__description,
  .checkout__step,.pane__aside,.filters,.map{
    /* Keeps the duration, delay and fill from the rule above; swaps only the
       keyframes, so the element fades in without travelling. */
    animation-name:fadeIn;
  }
  /* Decorative motion has no informational value; that does stop. */
  .arch__sparkle--sm,.arch__sparkle--br{animation:none}
}

/* --- utilities ---------------------------------------------------------- */
/* Visually hidden: real labels for screen readers, and the honeypot wrapper. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile:empty{display:none}

/* --- full-height centered pages (coming soon, 404) ---------------------- */
.hero-page{
  flex:1 0 auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:var(--sp-6);
  padding:var(--sp-7) var(--pad-x) var(--sp-6);
  text-align:center;
}
.hero-page__logo{width:clamp(165px,40vw,235px);aspect-ratio:500/340}
.hero-page--sm .hero-page__logo{width:clamp(140px,34vw,190px)}

/* --- breadcrumb --------------------------------------------------------- */
/* The breadcrumb sits between the header and <main>, emitted by the layout for
   every page but the homepage. Living outside <main> is what makes it possible
   to add it in one place instead of in fourteen page modules -- the cost is
   that it cannot lean on the first section's padding, so it carries its own,
   and the section below it gives some back.

   The two values below reproduce exactly what the product page had when it
   carried its own breadcrumb inside the first section: sp-7 above, sp-5 below.
   Every other page now gets that same rhythm. */
.breadcrumb-bar{padding-block-start:var(--sp-7)}
.breadcrumb-bar + main > .section:first-child{padding-block-start:var(--sp-5)}
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.breadcrumb a{text-decoration:none;border-bottom:1px solid transparent}
.breadcrumb a:hover{color:var(--ink);border-bottom-color:var(--line)}

/* --- collection filters ------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-6)}
.filter{
  border:0;background:none;cursor:pointer;
  padding:var(--sp-1) 0;
  font:inherit;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.filter:hover{color:var(--ink)}
.filter.is-active{color:var(--ink);border-bottom-color:var(--gold)}

/* --- product grid ------------------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr));
  gap:var(--sp-7) var(--sp-5);
}
.card{display:flex;flex-direction:column;gap:var(--sp-3);text-decoration:none;color:inherit}
.card__media{
  /* overflow:hidden is what makes the radius stick -- the image scales up on
     hover and would otherwise paint over the rounded corners. */
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--cream-lo);
  aspect-ratio:4/5;   /* reserved before the image lands -- no layout shift */
}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.03)}
.card__body{display:flex;flex-direction:column;gap:var(--sp-1)}
.card__name{font-size:1.05rem}
.card__tagline{font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.card__price{font-size:.86rem;color:var(--ink);display:flex;gap:var(--sp-2);align-items:baseline}
.card__price s{color:var(--ink-faint)}
/* The homepage selection is a fixed column count, not the shop's auto-fill, so
   the six pieces land as whole rows: two, three, then all six in one line once
   there is room for a card to stay legible at a sixth of the width. */
.grid--featured{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--sp-4)}
@media (min-width:48rem){.grid--featured{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:80rem){.grid--featured{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-6) var(--sp-4)}}
/* At a sixth of the width the tagline crowds the name; the name and price carry it. */
@media (min-width:80rem){
  .grid--featured .card__tagline{display:none}
  .grid--featured .card__name{font-size:.98rem}
}

.shop-note{
  margin-top:var(--sp-7);text-align:center;
  font-size:.78rem;color:var(--ink-faint);
}
.shop-note a{color:var(--gold-deep)}

/* --- product page ------------------------------------------------------- */
.product{display:grid;gap:var(--sp-6)}
@media (min-width:60rem){
  .product{grid-template-columns:minmax(0,1.15fr) minmax(22rem,.85fr);gap:var(--sp-8);align-items:start}
  .product__info{position:sticky;top:var(--sp-5)}
}
@media (min-width:100rem){
  .product{grid-template-columns:minmax(0,1.3fr) minmax(24rem,.7fr)}
  .product__media{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .product__media > picture:first-child{grid-column:1 / -1}
}
.product__media{display:flex;flex-direction:column;gap:var(--sp-3)}
.product__media img{width:100%;border-radius:var(--radius);background:var(--cream-lo)}
.product__info{display:flex;flex-direction:column;gap:var(--sp-3)}
.product__tagline{color:var(--ink-soft);font-size:1.02rem}
.product__price{font-size:1.15rem;display:flex;gap:var(--sp-3);align-items:baseline}
.product__price s{color:var(--ink-faint);font-size:.9rem}
.product__form{display:flex;flex-direction:column;gap:var(--sp-5);margin-top:var(--sp-3)}
.option{border:0;padding:0;margin:0}
.hint{margin:var(--sp-2) 0 0;font-size:.76rem;line-height:1.5;color:var(--ink-faint)}
.hint a{color:var(--gold-deep)}
.hint--warn{color:var(--ink-soft)}
.counter{float:right;font-variant-numeric:tabular-nums}

/* metal swatches: real radio inputs, visually replaced -- keyboard and screen
   readers keep working, which matters more than usual for wedding bands. */
.swatches{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.swatch{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;font-size:.82rem;color:var(--ink-soft)}
.swatch input{position:absolute;opacity:0;width:1px;height:1px}
.swatch__dot{
  width:20px;height:20px;border-radius:50%;
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .2s;
}
.swatch input:checked ~ .swatch__dot{box-shadow:0 0 0 1px var(--cream),0 0 0 3px var(--gold)}
.swatch input:checked ~ .swatch__label{color:var(--ink)}
.swatch input:focus-visible ~ .swatch__dot{outline:1px solid var(--gold);outline-offset:3px}

/* birthstone picker: one row per stone, each with a dot the client script fills
   with that month's colour. The dot is decorative -- the month and the stone
   name are both in the <option> text, so nothing is conveyed by colour alone. */
.stones{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3)}
.stone__pick{display:flex;align-items:center;gap:var(--sp-3)}
.stone__pick .field{flex:1;min-width:0}
.stone__dot{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--cream-lo);box-shadow:0 0 0 1px var(--line);
  transition:background .2s;
}

.product__total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:var(--sp-3);border-top:1px solid var(--line-soft);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.product__total strong{font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}

.specs{margin:var(--sp-6) 0 0;display:flex;flex-direction:column;gap:var(--sp-3);font-size:.84rem}
/* Stacked by default, side by side once there is room. At 320px the two-column
   form gave the label 8rem and the value 140px — the label column wider than
   the answer, and "ships in 3–7 business days" wrapping to three lines beside
   the word "Made". */
.specs > div{display:grid;gap:var(--sp-1);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line-soft)}
@media (min-width:26rem){
  .specs > div{grid-template-columns:8rem 1fr;gap:var(--sp-3)}
}
.specs dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.specs dd{margin:0;color:var(--ink-soft)}
.specs a{color:var(--gold-deep)}
.product__description{margin-top:var(--sp-8);margin-inline:auto}

/* --- home ---------------------------------------------------------------- */
/* Hero: the image and the text share one grid cell, so the copy sits over the
   photograph without absolute positioning and the taller of the two still sets
   the height. */
.hero{padding-block:0}
.hero--image{
  display:grid;
  position:relative;
  isolation:isolate;
  min-height:clamp(26rem,72svh,40rem);
}

/* The band under the banner carries its own internal padding and a top border,
   so the section adds nothing on top -- otherwise hero padding, hero margin and
   section padding stack into a large empty gap. */
.hero--image + .section{padding-block-start:0}
.hero--image > *{grid-area:1 / 1}

.hero__media{width:100%;height:100%;overflow:hidden;background:var(--cream-lo)}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}

/* The scrim.
   The left of this photograph measures at 0.16 mean relative luminance with
   79% of pixels in the two darkest bands — dark text over it reaches only
   2.7:1, and light text fails against the bright satin. A cream wash fixes
   both: at 0.6 opacity or more it puts ink text above 7:1 over ANY pixel
   underneath, so contrast no longer depends on what the photograph is doing.
   The gradient is clear of the necklace and the hand, which stay fully visible. */
.hero--image::after{
  content:"";
  grid-area:1 / 1;
  z-index:1;
  background:linear-gradient(96deg,
    rgba(250,246,240,.95) 0%,
    rgba(250,246,240,.88) 30%,
    rgba(250,246,240,.62) 46%,
    rgba(250,246,240,.18) 60%,
    rgba(250,246,240,0) 72%);
}
/* Below 48rem the text spans most of the width, so a left-to-right wash would
   leave the end of every line unprotected. Wash the whole frame instead — the
   photograph is heavily cropped at that size anyway. */
@media (max-width:47.99rem){
  .hero--image::after{
    background:linear-gradient(180deg,
      rgba(250,246,240,.93) 0%,
      rgba(250,246,240,.88) 62%,
      rgba(250,246,240,.72) 100%);
  }
}

.hero__content{z-index:2;display:flex;align-items:center}
.hero__content .wrap{width:100%}
.hero__inner{
  display:flex;flex-direction:column;
  align-items:flex-start;text-align:left;
  gap:var(--sp-5);
  max-width:34rem;
  padding-block:var(--sp-7);
}
.hero__headline{max-width:16ch;font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.12}
.hero__lede{color:var(--ink-soft);line-height:1.65}

/* Fallback when no banner exists: the old centred, type-led hero. */
.hero:not(.hero--image) .hero__inner{align-items:center;text-align:center;max-width:none;margin-inline:auto}

.promises{
  list-style:none;margin:0;padding:var(--sp-6) 0;
  display:grid;gap:var(--sp-5);
  border-block:1px solid var(--line-soft);
  text-align:center;
}
@media (min-width:48rem){.promises{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}}
.promises li{display:flex;flex-direction:column;gap:var(--sp-2);font-size:.86rem;color:var(--ink-soft);line-height:1.55}
.promises strong{
  font-weight:500;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
}

.section-head{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  align-items:baseline;justify-content:space-between;
  margin-bottom:var(--sp-6);
}

.story{max-width:var(--measure);margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--sp-4)}
.story p{color:var(--ink-soft);line-height:1.7}

.signup{
  max-width:var(--measure);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);
  text-align:center;
  padding:var(--sp-7) var(--pad-x);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(255,253,250,.5);
}
.signup p{color:var(--ink-soft)}

/* --- bag badge in the header -------------------------------------------- */
.site-nav__bag{
  position:relative;display:inline-flex;align-items:center;gap:var(--sp-1);
  text-decoration:none;color:var(--ink-soft);
  padding-block:var(--sp-1);
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.site-nav__bag:hover{color:var(--ink)}
.bag-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.35em;height:1.35em;padding:0 .35em;
  border-radius:999px;background:var(--gold);color:var(--cream-hi);
  font-size:.62rem;letter-spacing:0;font-variant-numeric:tabular-nums;
}
.bag-count[hidden]{display:none}

/* --- bag page ------------------------------------------------------------ */
.bag{display:flex;flex-direction:column;gap:var(--sp-5)}
.bag-line{
  display:grid;grid-template-columns:5rem 1fr auto;gap:var(--sp-4);
  align-items:start;
  padding-bottom:var(--sp-5);border-bottom:1px solid var(--line-soft);
}
.bag-line__media{display:block;border-radius:var(--radius-md);overflow:hidden;background:var(--cream-lo);aspect-ratio:4/5}
.bag-line__media img{width:100%;height:100%;object-fit:cover}
.bag-line__body{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.bag-line__name{font-family:var(--serif);font-size:1.05rem;text-decoration:none}
.bag-line__meta{font-size:.82rem;color:var(--ink-soft);overflow-wrap:anywhere}
.bag-line__note{font-size:.74rem;color:var(--gold-deep)}
.bag-line__controls{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-2)}
.bag-line__controls select{
  border:1px solid var(--line);border-radius:var(--radius);background:none;
  padding:var(--sp-1) var(--sp-2);font:inherit;font-size:.82rem;color:var(--ink);
}
.bag-line__price{font-size:.92rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.link-btn{
  border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px;
}
.link-btn:hover{color:var(--error)}

.bag-summary{
  margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;
}
.bag-summary__row{
  display:flex;justify-content:space-between;width:100%;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.bag-summary__row strong{font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}
/* bag-page.js toggles [hidden] on the summary (empty bag) and the empty
   message (filled bag). The display:flex on .pane__aside/.bag-summary beat the
   UA [hidden] rule, so an empty bag still showed a $0.00 summary. */
.bag-summary[hidden],[data-bag-empty][hidden]{display:none}

/* --- checkout ------------------------------------------------------------ */
.checkout{display:flex;flex-direction:column;gap:var(--sp-7)}
.checkout__step{display:flex;flex-direction:column;gap:var(--sp-4)}
.checkout__step h2{font-size:clamp(1.15rem,3vw,1.4rem)}
.checkout__row{display:grid;gap:var(--sp-4)}
@media (min-width:34rem){.checkout__row{grid-template-columns:1fr 1fr}}

.ship-option{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft);cursor:pointer;
}
.ship-option input{accent-color:var(--gold);flex:none}
.ship-option__body{display:flex;flex-direction:column;flex:1;min-width:0}
.ship-option__label{font-size:.92rem}
.ship-option__days{font-size:.76rem;color:var(--ink-faint)}
.ship-option__price{font-size:.88rem;font-variant-numeric:tabular-nums}

.review{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.review li{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2);
  font-size:.88rem;color:var(--ink-soft);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line-soft);
}
.review li strong{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
.review__final{flex-basis:100%;font-size:.74rem;color:var(--gold-deep)}

.totals{margin:var(--sp-5) 0 0;display:flex;flex-direction:column;gap:var(--sp-2);font-size:.88rem}
.totals > div{display:flex;justify-content:space-between}
.totals dt{color:var(--ink-soft)}
.totals dd{margin:0;font-variant-numeric:tabular-nums}
.totals__grand{
  padding-top:var(--sp-3);margin-top:var(--sp-2);border-top:1px solid var(--line);
  font-size:1.05rem;
}
.totals__grand dt{color:var(--ink)}

.checkbox{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:.86rem;color:var(--ink-soft);cursor:pointer}
.checkbox input{accent-color:var(--gold);margin-top:.2em}

.payment-notice{
  padding:var(--sp-5);
  border:1px solid var(--gold);border-radius:var(--radius);
  background:rgba(168,128,63,.06);
  font-size:.9rem;line-height:1.65;color:var(--ink-soft);
}
.payment-notice strong{color:var(--ink)}

.checkout__actions{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}

/* --- order confirmation -------------------------------------------------- */
.order{display:flex;flex-direction:column;gap:var(--sp-5)}
.order__meta{margin:0;display:flex;flex-direction:column;gap:var(--sp-3);font-size:.88rem}
.order__meta > div{display:grid;grid-template-columns:9rem 1fr;gap:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line-soft)}
.order__meta dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.order__meta dd{margin:0;color:var(--ink-soft);overflow-wrap:anywhere}

/* --- full-bleed document layouts ----------------------------------------
   The page fills the viewport; the reading column does not. On wide screens a
   left rail carries the title and the prose sits beside it, so a policy page
   uses the whole width without producing 200-character lines. */
.doc{display:grid;gap:var(--sp-6)}
.doc__rail{display:flex;flex-direction:column;gap:var(--sp-3)}
.doc__rail h1{font-size:clamp(1.9rem,4.6vw,2.9rem)}
.doc .prose{max-width:var(--measure-wide)}
@media (min-width:64rem){
  .doc{grid-template-columns:minmax(14rem,19rem) minmax(0,1fr);gap:var(--sp-8);align-items:start}
  .doc__rail{position:sticky;top:var(--sp-6)}
}
/* Three columns once there is room: contents, policy, other policies. The
   middle column is held to the reading measure and the outer two take the rest,
   so the page fills the screen without stretching a line of legal prose. */
@media (min-width:82rem){
  .doc{
    grid-template-columns:minmax(14rem,19rem) minmax(0,var(--measure-wide)) minmax(13rem,19rem);
    justify-content:space-between;
  }
  .doc__aside{position:sticky;top:var(--sp-6)}
}

.doc__aside{display:flex;flex-direction:column;gap:var(--sp-6)}
.doc__card{
  display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-5);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(255,253,250,.6);
}
.doc__card-title{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.doc__card p{font-size:.86rem;line-height:1.65;color:var(--ink-soft)}

.toc__title{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:var(--sp-2);
}
.toc ol,.doc__others ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.toc{margin-top:var(--sp-4)}
@media (max-width:63.99rem){.toc{display:none}}
.toc a,.doc__others a{
  font-size:.84rem;line-height:1.5;color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.toc a:hover,.doc__others a:hover{color:var(--ink);border-bottom-color:var(--line)}
/* Anchor jumps must not hide the heading under nothing — give it breathing room. */
.prose h2[id]{scroll-margin-top:var(--sp-6)}

/* Two-pane pages: main work on the left, a sticky aside on the right. */
.pane{display:grid;gap:var(--sp-7)}
@media (min-width:64rem){
  .pane{grid-template-columns:minmax(0,1.5fr) minmax(20rem,.5fr);gap:var(--sp-8);align-items:start}
  .pane__aside{position:sticky;top:var(--sp-6)}
}
.pane__aside{
  display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-5);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(255,253,250,.6);
}

/* Forms stay at a usable width inside a full-bleed page. */
.checkout .field,.checkout .checkbox,.checkout .review,.checkout .totals{max-width:44rem}
.checkout__row{max-width:44rem}
/* --- contact: three columns ---------------------------------------------- */
/* The columns sat almost against the page lede. Separated with the same
   hairline the About blocks use, so the treatment is consistent. */
.contact-cols{
  display:grid;gap:var(--sp-7);
  margin-top:var(--sp-8);padding-top:var(--sp-6);
  border-top:1px solid var(--line-soft);
}
@media (min-width:52rem){.contact-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7) var(--sp-8)}}
@media (min-width:76rem){.contact-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8)}}

.contact-col{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.contact-col h2{font-size:clamp(1.1rem,2.4vw,1.35rem)}
.contact-col__second{margin-top:var(--sp-5)}
.contact-col p{color:var(--ink-soft);line-height:1.7;font-size:.94rem}
.contact-col a{color:var(--gold-deep)}
.contact-col .form{width:100%}
.contact-col__intro{color:var(--ink-faint)}
.contact-col__address{font-style:normal;line-height:1.7;font-size:.94rem;color:var(--ink-soft)}

.faq{margin:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.faq dt{font-weight:600;color:var(--ink);font-size:.94rem;margin-bottom:var(--sp-1)}
.faq dd{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.7}

/* Checkout is a two-pane form: steps on the left, the running order on the
   right. The whole <form> is the grid so a single submit covers both panes. */
.checkout-grid{display:grid;gap:var(--sp-7)}
@media (min-width:64rem){
  .checkout-grid{grid-template-columns:minmax(0,1.5fr) minmax(20rem,.5fr);gap:var(--sp-8);align-items:start}
  .checkout__review{position:sticky;top:var(--sp-6)}
}
.checkout__review{display:flex;flex-direction:column;gap:var(--sp-3)}
.checkout__review h2{font-size:1rem}

/* A few pages read better centred at a fixed measure even in a full-bleed
   shell — the order receipt is one of them. */
.wrap--reading{max-width:calc(var(--measure-wide) + var(--pad-x) * 2)}

/* On very wide displays the rail + reading column would sit hard left with a
   lot of dead space beside it. Centre the pair instead — the container still
   fills the viewport, but the content reads as deliberate rather than stranded. */
@media (min-width:100rem){
  /* Legal pages keep their own three-column rule above — this block used to
     re-centre them into two columns and silently undid it. */
  .pane{grid-template-columns:minmax(0,1fr) minmax(22rem,28rem)}
  .checkout-grid{grid-template-columns:minmax(0,1fr) minmax(22rem,28rem)}
}

/* --- home: closing pair --------------------------------------------------- */
/* Two short blocks stacked leave most of a wide screen empty, so they sit
   side by side once there is room for both to stay readable. */
.closing{display:grid;gap:var(--sp-7);margin-top:var(--sp-8)}
@media (min-width:56rem){
  .closing{grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}
}
.closing__story,.closing__signup{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
/* No measure cap on the story text — the grid column is the constraint, so the
   paragraph runs to the full width of its half instead of stopping short and
   leaving a ragged gap beside it. The signup sits in a padded card, which
   already gives it a shorter line. */
.closing__story p{color:var(--ink-soft);line-height:1.7}
.closing__signup p{color:var(--ink-soft);line-height:1.7;max-width:52ch}
.closing__signup{
  padding:var(--sp-6);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(255,253,250,.6);
  height:100%;
}
.closing__signup .form{width:100%}

/* --- full-width content pages (About) ------------------------------------ */
/* A wide band for the intro, then blocks across the full width. Each block
   keeps its own measure, so the page fills the screen without any single
   paragraph running long. */
.lead-band{
  display:flex;flex-direction:column;gap:var(--sp-3);
  padding-bottom:var(--sp-7);margin-bottom:var(--sp-7);
  border-bottom:1px solid var(--line-soft);
  max-width:44rem;
}
.lead-band h1{font-size:clamp(2rem,5.4vw,3.2rem);line-height:1.14}
.lead-band__lede{color:var(--ink-soft);font-size:1.05rem;line-height:1.65}
.lead-band p{color:var(--ink-soft);line-height:1.7}
.lead-band{max-width:46rem}

.blocks{display:grid;gap:var(--sp-7) var(--sp-8);margin-top:var(--sp-7);padding-top:var(--sp-7);border-top:1px solid var(--line-soft)}
@media (min-width:48rem){.blocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:88rem){.blocks{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-7) var(--sp-6)}}
.block{display:flex;flex-direction:column;gap:var(--sp-3)}
.block h2{font-size:clamp(1.1rem,2.4vw,1.35rem)}
.block p{color:var(--ink-soft);line-height:1.7;font-size:.94rem}
.block__list{margin:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.block__list dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:var(--sp-1)}
.block__list dd{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.65}

.cta-band{
  margin-top:var(--sp-8);padding-top:var(--sp-7);
  border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start;
}
.cta-band p{color:var(--ink-soft);max-width:48ch;line-height:1.7}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);align-items:center}

/* --- arch figure ---------------------------------------------------------- */
/* A photograph in the brand's arch, with an offset gold outline and sparkles
   breaking the edge. The arch is a border-radius rather than a clip-path so the
   outline can share the exact shape without duplicating a path. */
.arch{position:relative;margin:0;display:flex;flex-direction:column;gap:var(--sp-3);isolation:isolate}
.arch__frame{
  position:relative;z-index:1;
  overflow:hidden;
  border-radius:999px 999px var(--radius) var(--radius);
  background:var(--cream-lo);
  aspect-ratio:4/5;
}
.arch__frame picture,.arch__frame img{display:block;width:100%;height:100%}
.arch__frame img{object-fit:cover;object-position:50% 42%}

/* The outline sits behind and offset, so the photograph reads as placed on it
   rather than boxed by it. */
.arch__outline{
  position:absolute;z-index:0;
  inset:0;
  transform:translate(clamp(8px,1.6vw,18px),clamp(8px,1.6vw,18px));
  border:1px solid var(--gold);
  border-radius:999px 999px var(--radius) var(--radius);
  /* Matches the frame, minus the caption row underneath. */
  bottom:calc(1.6em + var(--sp-3));
}

.arch__sparkle{position:absolute;z-index:2;color:var(--gold);pointer-events:none}
.arch__sparkle--tl{top:-14px;left:-16px}
.arch__sparkle--br{right:-10px;bottom:calc(1.6em + var(--sp-3) + 6px)}
.arch__sparkle--sm{top:22%;right:-22px;opacity:.75}
.arch figcaption{
  position:relative;z-index:2;
  font-size:.74rem;letter-spacing:.1em;color:var(--ink-faint);text-align:center;
  line-height:1.6;
}
@media (prefers-reduced-motion:no-preference){
  .arch__sparkle--sm{animation:twinkle 4.5s ease-in-out infinite}
  .arch__sparkle--br{animation:twinkle 6s ease-in-out infinite .8s}
}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.08)}}

/* --- about: head row ------------------------------------------------------ */
.about-head{display:grid;gap:var(--sp-7);align-items:center}
@media (min-width:64rem){
  .about-head{grid-template-columns:minmax(0,1fr) minmax(17rem,26rem);gap:var(--sp-8)}
}
.about-head .lead-band{border:0;padding-bottom:0;margin-bottom:0}
.about-head__figure{width:min(26rem,100%);justify-self:center}

/* --- click-to-load map ---------------------------------------------------- */
.map{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--line-soft);
  background:var(--cream-lo);
  /* Safari has historically let an iframe paint past a rounded parent. Giving
     the container its own compositing layer makes the clip stick. */
  transform:translateZ(0);
}
.map__placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);padding:var(--sp-5);text-align:center;
  /* A faint grid so the box reads as a map before it is one. */
  background-image:
    linear-gradient(rgba(36,29,23,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,29,23,.05) 1px,transparent 1px);
  background-size:28px 28px;
}
.map__placeholder p{font-size:.8rem;line-height:1.6;color:var(--ink-faint);max-width:30ch}
.map__frame{width:100%;height:100%;border:0;display:block}

/* --- full-bleed CTA band with a photograph -------------------------------- */
.cta-photo--image{
  display:grid;
  position:relative;
  isolation:isolate;
  margin-top:var(--sp-8);
  min-height:clamp(20rem,38svh,26rem);
}
.cta-photo--image > *{grid-area:1 / 1}
.cta-photo__media{width:100%;height:100%;overflow:hidden;background:var(--cream-lo)}
.cta-photo__media picture{display:block;width:100%;height:100%}
.cta-photo__media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}

/* A far lighter scrim than the homepage hero needs. The text zone of this
   photograph measures 0.671 mean luminance, so ink text already clears 8.8:1
   over the bare image and the wash is mostly insurance against the crop
   shifting the jewelry leftwards on a narrow viewport.
   Tuned by measurement, not by eye: the heading clears easily either way, but
   --ink-soft body copy sat at 4.59:1 against a 4.5 minimum, which is too little
   margin for a photograph that may be recropped. These values put it at 4.83:1
   and still let the linen through. */
.cta-photo--image::after{
  content:"";grid-area:1 / 1;z-index:1;
  background:linear-gradient(96deg,
    rgba(250,246,240,.86) 0%,
    rgba(250,246,240,.72) 34%,
    rgba(250,246,240,.30) 54%,
    rgba(250,246,240,0) 72%);
}
@media (max-width:47.99rem){
  /* Cover crops to the centre here, which can bring the rings under the text. */
  .cta-photo--image::after{
    background:linear-gradient(180deg,rgba(250,246,240,.88) 0%,rgba(250,246,240,.80) 70%,rgba(250,246,240,.66) 100%);
  }
}
.cta-photo__content{z-index:2;display:flex;align-items:center}
.cta-photo__content .wrap{width:100%}
.cta-photo--image .cta-band{margin-top:0;padding-top:0;border-top:0;max-width:38rem}

/* A full-bleed photo band that ends the page should meet the footer, not float
   above it on the footer's top margin. Scoped with :has() so every other page,
   which ends in ordinary padded content, keeps its breathing room. Browsers
   without :has() simply keep the gap — the old behaviour, not a broken one. */
main:has(> .cta-photo--image:last-child) + .site-footer{margin-top:0}

/* Our own place card, sitting over the map. Google generates its equivalent
   from a Business Profile listing; this address has none, so the card is ours. */
.map-card{
  position:absolute;z-index:2;
  top:var(--sp-4);left:var(--sp-4);
  max-width:min(15rem,calc(100% - var(--sp-8)));
  padding:var(--sp-3) var(--sp-4);
  /* Never taller than the panel it sits in. */
  max-height:calc(100% - var(--sp-8));
  background:rgba(255,253,250,.96);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(36,29,23,.10);
}
.map-card__name{font-family:var(--serif);font-size:.98rem;color:var(--ink);line-height:1.3}
.map-card__links{
  margin-top:var(--sp-2);display:flex;flex-wrap:wrap;gap:var(--sp-3);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
}
.map-card__links a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(168,128,63,.35)}
.map-card__links a:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* Hidden until the map is behind it — over the placeholder it would just be a
   second copy of the address already printed above. */
.map:not(.is-loaded) .map-card{display:none}

/* --- back to top ---------------------------------------------------------- */
.scroll-top{
  position:fixed;z-index:20;
  right:clamp(1rem,3vw,2rem);
  bottom:clamp(1rem,3vw,2rem);
  display:grid;place-items:center;
  width:2.75rem;height:2.75rem;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,253,250,.92);
  color:var(--gold-deep);
  cursor:pointer;
  box-shadow:0 2px 12px rgba(36,29,23,.10);
  /* Hidden until scrolled. visibility keeps it out of the tab order while
     hidden, which opacity alone would not. */
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,transform .25s var(--ease),visibility .25s,color .2s,border-color .2s;
}
.scroll-top.is-visible{opacity:1;visibility:visible;transform:none}
.scroll-top:hover{color:var(--ink);border-color:var(--gold)}
@media (prefers-reduced-motion:reduce){.scroll-top{transition:opacity .01s,visibility .01s}}
/* On a phone the bag summary and checkout buttons live down here too. */
@media (max-width:30rem){.scroll-top{width:2.5rem;height:2.5rem}}

/* Utilities that replace former inline style="" attributes, so the CSP needs
   no 'unsafe-inline' for styles. !important keeps the old precedence: an inline
   style beat every stylesheet rule, and these must too. */
.u-mb-6{margin-bottom:var(--sp-6)!important}
.u-mt-1{margin-top:var(--sp-1)!important}
.u-mt-4{margin-top:var(--sp-4)!important}
.u-mt-6{margin-top:var(--sp-6)!important}
.u-lh-0{line-height:0!important}
.site-footer--bare{margin-top:0!important;border:0!important;padding-block:0!important}