/* Star & Stone: the only stylesheet for every page and component. */
:root {
  --font-body:Arial,sans-serif;
  --font-heading:Georgia,serif;
  --cream:#faf5ee;
  --ink:#24201e;
  --rose:#a46e55;
  --line:#dacabd;
  --muted:#77695e;
  --gutter:clamp(.65rem,3vw,3rem);
  --space:clamp(.65rem,1.8vw,1.5rem);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:6rem; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); font-size:clamp(.875rem,.8rem + .2vw,1rem); }
body.bag-open { overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; font:inherit; }
a { color:inherit; text-decoration:none; }
button,a,input { max-inline-size:100%; }
button:focus-visible,a:focus-visible { outline:3px solid var(--rose); outline-offset:4px; }
img { display:block; max-inline-size:100%; }
h1,h2,h3,p { overflow-wrap:anywhere; }
.top { background:var(--ink); color:#f0dac7; text-align:center; padding:.65em var(--gutter); font-size:clamp(.55rem,.7vw,.65rem); letter-spacing:.15em; text-transform:uppercase; }
header { position:sticky; top:0; z-index:10; background:#faf5eef5; backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav { max-inline-size:88rem; margin:auto; padding:clamp(.8rem,1.4vw,1.2rem) var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--space); }
.nav > * { min-inline-size:0; }
.brand { font-family:var(--font-heading); font-size:clamp(.95rem,2vw,1.6rem); letter-spacing:.1em; white-space:nowrap; }
.brand small { display:block; font:clamp(.45rem,.65vw,.6rem) var(--font-body); letter-spacing:.22em; text-align:center; margin-top:.6em; }
.links { display:flex; gap:clamp(.65rem,2vw,1.8rem); font-size:clamp(.65rem,.9vw,.8rem); white-space:nowrap; }
.cart-open { flex-shrink:0; background:transparent; border:1px solid var(--line); padding:.8em 1em; font-size:clamp(.65rem,.9vw,.8rem); white-space:nowrap; }
.hero { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0,1.15fr); max-inline-size:100rem; margin:auto; background:#efe1d1; }
.hero-copy { padding:clamp(1.5rem,5vw,5.5rem) clamp(1rem,4vw,4rem); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-inline-size:0; }
.eyebrow { font-size:clamp(.55rem,.75vw,.65rem); text-transform:uppercase; letter-spacing:.2em; color:var(--rose); font-weight:bold; }
.hero h1 { font:normal clamp(2rem,4.5vw,4.75rem)/1.06 var(--font-heading); letter-spacing:-.035em; margin:.4em 0; }
.hero h1 em { font-weight:normal; color:var(--rose); }
.hero p { font-size:clamp(.8rem,1vw,.95rem); line-height:1.7; color:#6b5b50; max-inline-size:35ch; margin:0 0 1.5em; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:clamp(.5rem,1.5vw,1.8rem); padding:1.2em 1.5em; background:var(--ink); color:white; border:1px solid var(--ink); font-size:clamp(.6rem,.8vw,.75rem); letter-spacing:.1em; text-transform:uppercase; }
.btn:hover { background:#654839; border-color:#654839; }
.hero-art { position:relative; overflow:hidden; background:#dbc5af; min-inline-size:0; }
.hero-art img { position:absolute; inline-size:125%; max-inline-size:none; left:-12%; top:-2%; block-size:auto; }
.hero-art:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#efe1d133,transparent 30%); }
.hero-caption { position:absolute; z-index:1; bottom:var(--space); inset-inline:var(--space); border-top:1px solid #fff8; padding-top:1em; font:italic clamp(.7rem,1.2vw,1.1rem) var(--font-heading); letter-spacing:.05em; }
.intro { display:flex; justify-content:center; gap:clamp(1rem,6vw,6rem); padding:1.8em var(--gutter); border-bottom:1px solid var(--line); font-size:clamp(.5rem,.75vw,.65rem); letter-spacing:.15em; color:var(--muted); text-transform:uppercase; }
.intro span::before { content:'✧'; color:var(--rose); margin-right:.75em; }
.catalog { max-inline-size:82rem; margin:auto; padding:clamp(1.5rem,4vw,4.5rem) var(--gutter) 0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:var(--space); margin-bottom:var(--space); }
.section-heading > * { min-inline-size:0; }
.section-heading h2 { font:normal clamp(1.25rem,2.8vw,2.4rem) var(--font-heading); margin:.25em 0 0; }
.section-heading p { font-size:clamp(.65rem,.9vw,.8rem); color:var(--muted); margin-bottom:.4em; }
.section-heading .number { font:italic .5em var(--font-heading); color:var(--rose); margin-right:.8em; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:var(--space); }
.card { min-inline-size:0; display:flex; flex-direction:column; }
.product-art { aspect-ratio:1 / 1; background:#f0e4d7; display:grid; place-items:center; position:relative; overflow:hidden; border:1px solid #e8d8c9; container-type:size; }
.crop { inline-size:min(78%,calc(88cqh * var(--w) / var(--h))); aspect-ratio:var(--w) / var(--h); position:relative; overflow:hidden; }
.crop img { position:absolute; inline-size:calc(1030 / var(--w) * 100%); max-inline-size:none; left:0; top:0; transform:translate(calc(var(--x) / 1030 * -100%),calc(var(--y) / 1536 * -100%)); }
.product-art:after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 2rem .5rem #f0e4d76b; pointer-events:none; }
.card .type { font-size:clamp(.5rem,.65vw,.6rem); letter-spacing:.14em; color:var(--rose); text-transform:uppercase; margin:1.2em 0 .7em; }
.card h3 { font:normal clamp(.95rem,1.6vw,1.4rem)/1.2 var(--font-heading); margin:0 0 .5em; }
.detail { font-size:clamp(.65rem,.9vw,.8rem); color:var(--muted); }
.buy-row { margin-top:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:.7em 0; gap:clamp(.2rem,.5vw,.65rem); }
.price { font-size:clamp(.75rem,1.1vw,1rem); white-space:nowrap; }
.add { border:0; background:none; font-size:clamp(.6rem,.75vw,.7rem); text-transform:uppercase; letter-spacing:.025em; padding:.9em 0; white-space:nowrap; }
.add:hover { color:var(--rose); }
.add span { font-size:1.3em; margin-left:.3em; }
.bundle { max-inline-size:76rem; margin:clamp(1.5rem,5vw,5rem) var(--gutter); background:#e8d8c8; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; }
.bundle-art { aspect-ratio:1.5; display:grid; place-items:center; background:#eadccb; container-type:size; }
.bundle-art .crop { inline-size:85%; }
.bundle-image { inline-size:94%; block-size:94%; min-inline-size:0; min-block-size:0; object-fit:contain; object-position:center; }
.bundle-copy { padding:clamp(.8rem,3vw,3rem); min-inline-size:0; }
.bundle h2 { font:normal clamp(1.25rem,3vw,2.7rem)/1.1 var(--font-heading); margin:.5em 0; }
.bundle p { font-size:clamp(.7rem,.95vw,.85rem); line-height:1.6; color:var(--muted); max-inline-size:40ch; }
.bundle .btn { margin-top:.5em; }
.closing { text-align:center; padding:0 var(--gutter) clamp(1.5rem,4vw,4rem); }
.closing h2 { font:italic clamp(1.5rem,3vw,2.3rem) var(--font-heading); }
.closing p { font-size:clamp(.6rem,.8vw,.75rem); letter-spacing:.2em; color:var(--muted); }
footer { background:var(--cream); color:var(--muted); border-top:1px solid var(--line); padding:clamp(.75rem,2vw,1.25rem) var(--gutter); text-align:center; }
footer > * { min-inline-size:0; }
footer p { margin:0; font-size:clamp(.65rem,.8vw,.75rem); line-height:1.5; color:var(--muted); }
.preview { font-size:clamp(.5rem,.65vw,.65rem); letter-spacing:.08em; }
.overlay { position:fixed; inset:0; background:#0007; z-index:20; }
.drawer { position:fixed; inset-block:0; right:0; inline-size:min(100%,29rem); background:var(--cream); padding:clamp(.8rem,3vw,2rem); z-index:21; display:flex; flex-direction:column; box-shadow:-.6rem 0 4rem #0002; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:1em; gap:var(--space); }
.drawer h2 { font:normal clamp(1.4rem,3vw,1.9rem) var(--font-heading); margin:0; }
.close { border:0; background:none; font-size:1.8rem; padding:.15em; }
.cart-items { overflow:auto; flex:1; min-block-size:0; }
.cart-item { padding:1.4em 0; border-bottom:1px solid var(--line); }
.cart-item h3 { font:normal clamp(1rem,2vw,1.3rem) var(--font-heading); margin:0 0 .5em; }
.cart-item small { color:var(--muted); }
.quantity { display:flex; gap:clamp(.5rem,2vw,1rem); align-items:center; margin-top:1em; }
.quantity button { border:1px solid var(--line); background:transparent; min-inline-size:2.5em; min-block-size:2.5em; padding:.45em; }
.quantity .remove { border:0; font-size:.75em; margin-left:auto; text-decoration:underline; }
.total { display:flex; justify-content:space-between; padding-top:1em; font:1.4rem var(--font-heading); gap:var(--space); }
.drawer-note { font-size:.75rem; line-height:1.5; color:var(--muted); }
.empty { padding:2em 0; color:var(--muted); font:1.2rem var(--font-heading); }
.toast { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); background:var(--ink); color:white; padding:1em 1.5em; z-index:30; font-size:clamp(.75rem,1vw,.9rem); inline-size:max-content; max-inline-size:calc(100% - 1.5rem); overflow-wrap:anywhere; box-shadow:0 .3rem 1.2rem #0003; }
[hidden] { display:none!important; }
.checkout-page { margin-inline:auto; }
.checkout-page .account-form { max-inline-size:none; }
.checkout-page select { inline-size:100%; min-inline-size:0; padding:.8em; font:inherit; color:var(--ink); background:var(--cream); border:1px solid var(--line); }
.checkout-page .admin-actions { margin-block:var(--space); }
.drawer > .btn,.drawer > .button-secondary { margin-block-start:.5em; }
.admin-order-controls { display:flex; align-items:end; flex-wrap:wrap; gap:var(--space); margin-block:var(--space); }
.admin-order-controls label { display:grid; gap:.5em; flex:1 1 40%; min-inline-size:0; }
.admin-order-controls select { inline-size:100%; padding:.75em; font:inherit; border:1px solid var(--line); color:var(--ink); background:var(--cream); }
.admin-order-controls > span { color:var(--muted); font-size:.85em; }
.admin-order-alert { border-inline-start:.25em solid var(--rose); }
.status-label[data-state="attention"] { background:var(--ink); color:var(--cream); }
@media(min-width:80rem) { .bundle { margin-inline:auto; } }
@media(max-width:45rem) {
  .top,.links,.hero-art,.intro,.section-heading p,.closing,.preview { display:none; }
  .nav { padding-block:.8rem; }
  .hero { display:block; }
  .hero-copy { padding:1rem var(--gutter); }
  .hero .eyebrow,.hero p { display:none; }
  .hero h1 { font-size:clamp(1.5rem,5.5vw,2.4rem); margin:0 0 .6em; }
  .hero h1 br { display:none; }
  .hero h1 em::before { content:' '; }
  .hero .btn { padding:.8em 1.2em; }
  .catalog { padding-top:1.25rem; }
  .section-heading .eyebrow,.card .type { display:none; }
  .grid,.grid.three,.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.65rem,2.5vw,1rem); }
  .card h3 { margin-top:.55em; font-size:clamp(.9rem,3.3vw,1.2rem); }
  .product-art { aspect-ratio:1.15; }
  .bundle { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); margin-block:1.25rem; }
  .bundle-art { aspect-ratio:1; }
  .bundle-copy { padding:.75rem; }
  .bundle .eyebrow,.bundle p { display:none; }
  .bundle h2 { font-size:clamp(1rem,3.5vw,1.5rem); margin:0 0 .5em; }
  .bundle h2 br { display:none; }
  .bundle .btn { font-size:clamp(.55rem,2vw,.7rem); padding:.9em .7em; gap:.3em; }


}

/* Product artwork: all dimensions and positioning live here. */
.crop-product-9 {
  --x:48;
  --y:1284;
  --w:383;
  --h:120;
}


/* One shared visual feedback language for all buttons and navigation. */
:root { --feedback-success:var(--rose); --feedback-error:#8a342b; }
button, a { transition:background-color .16s,color .16s,box-shadow .16s,transform .16s; }
button:hover:not(:disabled), a.btn:hover, a.cart-open:hover { box-shadow:0 0 0 2px var(--line); }
button:active:not(:disabled), a:active { transform:translateY(1px); }
button[data-feedback="success"], a[data-feedback="success"] { box-shadow:0 0 0 2px var(--feedback-success); }
button[data-feedback="error"] { box-shadow:0 0 0 2px var(--feedback-error); }
button:disabled, button[aria-busy="true"] { opacity:.65; cursor:wait; }
.toast { border:1px solid var(--feedback-success); border-left:5px solid var(--feedback-success); }
.toast[data-state="error"] { border-color:var(--feedback-error); }
.toast[data-state="pending"] { border-color:var(--line); }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } button,a { transition:none; } }

/* Shared logo treatment: preserve the original artwork and its proportions. */
.brand { display:block; flex:0 1 27%; min-inline-size:0; white-space:normal; }
.brand-logo { display:block; inline-size:100%; block-size:auto; object-fit:contain; }
header .brand-logo { mix-blend-mode:multiply; }

@media(max-width:45rem) {
  .nav .brand { flex-basis:64%; }
  
}

/* Individual product art: one fluid, uncropped presentation for every card. */
.product-image {
  inline-size:100%;
  block-size:100%;
  min-inline-size:0;
  min-block-size:0;
  object-fit:contain;
  object-position:center;
  padding:clamp(.25rem,1vw,.75rem);
}

/* Bottle artwork shares one fluid height across categories. Three-item rows
   keep their wider cards without enlarging the bottles inside them. */
@media(min-width:45.001rem) {
  .catalog { container-type:inline-size; }
  #serumGrid .product-art,
  #groomGrid .product-art {
    aspect-ratio:auto;
    block-size:calc((100cqw - 3 * var(--space)) / 4);
  }
}

/* Wide cream cards retain bottle-scale artwork, with matching visible jar widths.
   The source PNGs have different transparent margins around the actual jars. */
#creamGrid .product-art { aspect-ratio:1.35; }
#creamGrid .product-image {
  inline-size:min(58%,72cqh);
  block-size:auto;
  padding:0;
  transform:translateY(-1.2%);
}
#creamGrid .product-image[src$="retinol-night-repair-face-cream.png"] {
  inline-size:min(62%,77cqh);
  transform:translateY(-1.7%);
}

/* Shared header actions, footer navigation, and supporting pages. */
button { color:inherit; }
.header-actions { display:flex; align-items:center; flex-shrink:0; gap:clamp(.5rem,1.5vw,1.25rem); }
.login-link { display:inline-flex; align-items:center; padding:.8em .2em; font-size:clamp(.7rem,.9vw,.85rem); white-space:nowrap; }
.login-link:hover,.footer-links a:hover { color:var(--rose); text-decoration:underline; text-underline-offset:.25em; }
@media(min-width:45.001rem) {
  .links,.cart-open { font-size:clamp(.78rem,1.08vw,.96rem); }
  .login-link { font-size:clamp(.84rem,1.08vw,1.02rem); }
  .cart-open { padding:.85em 1.1em; }
}
a[aria-current="page"] { color:var(--rose); text-decoration:underline; text-underline-offset:.25em; }
.footer-links { display:flex; justify-content:center; align-items:center; gap:clamp(.8rem,3vw,2rem); margin:0 0 .8em; font-size:clamp(.7rem,.9vw,.85rem); }
.footer-links a { white-space:nowrap; padding:.35em 0; }
.info-page { inline-size:100%; max-inline-size:60rem; margin:auto; padding:clamp(1.5rem,5vw,4rem) var(--gutter); min-block-size:55vh; }
.info-page h1 { margin:0 0 .65em; font:normal clamp(1.6rem,4vw,2.5rem)/1.15 var(--font-heading); }
.info-page p { max-inline-size:65ch; line-height:1.7; color:var(--muted); }
.info-page .btn { margin-top:1em; }
.info-page details { padding:1em 0; border-bottom:1px solid var(--line); }
.info-page summary { cursor:pointer; font-size:clamp(.9rem,1.3vw,1.1rem); line-height:1.5; }
.info-page summary:hover,.info-page details[open] summary { color:var(--rose); }
.info-page summary:focus-visible { outline:3px solid var(--rose); outline-offset:.3em; }
.account-page { max-inline-size:40rem; }
.account-eyebrow { font-size:clamp(.7rem,1.2vw,.8rem); text-transform:uppercase; letter-spacing:.12em; }
.account-form { display:grid; gap:clamp(.8rem,2vw,1.2rem); margin-block:clamp(1rem,3vw,1.8rem); }
.account-form label { display:grid; gap:.5em; font-size:clamp(.9rem,1.5vw,1rem); min-inline-size:0; }
.account-form input { inline-size:100%; min-inline-size:0; padding:.85em; border:1px solid var(--line); background:var(--cream); color:var(--ink); font:inherit; font-size:1rem; border-radius:0; }
.account-form input:focus-visible { outline:2px solid var(--rose); outline-offset:2px; }
.account-form .btn { margin:0; justify-self:stretch; }
.account-notice { padding:.8em 1em; border-inline-start:2px solid var(--rose); font-size:.85rem; }
.account-form .account-hint { margin:-.5em 0 0; font-size:.8rem; }
.account-form .account-error { margin:0; color:var(--ink); border:1px solid var(--rose); padding:.8em; }
.account-switch { padding-block:clamp(1rem,3vw,1.6rem); border-block-start:1px solid var(--line); }
.account-switch h2 { margin:0; font:normal clamp(1.15rem,2vw,1.4rem)/1.3 var(--font-heading); }
.account-switch .btn { display:flex; justify-content:center; }
.account-staff { font-size:.8rem; }
.contact-page { max-inline-size:44rem; }
.contact-page textarea { inline-size:100%; min-inline-size:0; resize:vertical; padding:.85em; border:1px solid var(--line); background:var(--cream); color:var(--ink); font:inherit; font-size:1rem; border-radius:0; }
.contact-page textarea:focus-visible { outline:2px solid var(--rose); outline-offset:2px; }
.contact-status { margin:0; padding:.85em 1em; border-inline-start:3px solid var(--feedback-success); }
.contact-status[data-state="error"] { border-color:var(--feedback-error); }
.contact-faq { display:inline-flex; padding:.75em 0; text-decoration:underline; text-underline-offset:.25em; }
@media(max-width:45rem) { .nav .brand { flex-basis:52%; } .header-actions { gap:.65rem; } }

#site-header { position:sticky; top:0; z-index:10; }

/* Homepage entry scene; the product catalog lives on collection.html. */
.home-main { inline-size:100%; }
.home-hero { position:relative; max-inline-size:110rem; margin-inline:auto; background:#8c6845; }
.home-scene { display:block; inline-size:100%; block-size:auto; }
.home-copy { position:absolute; inset-inline-start:3%; inset-block-end:16%; inline-size:29%; color:var(--cream); }
.home-copy h1 { font:normal clamp(1.4rem,3.1vw,3.4rem)/1.12 var(--font-heading); margin:0 0 .7em; text-shadow:0 2px 12px #0008; }
.home-copy h1 em { font-weight:normal; }
.home-copy .btn { inline-size:fit-content; max-inline-size:100%; background:var(--cream); color:var(--ink); border-color:var(--cream); gap:.65em; font-size:clamp(.6rem,.9vw,.9rem); }
.home-copy .btn:hover { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.collection-heading { max-inline-size:82rem; margin:auto; padding:clamp(1rem,3vw,2rem) var(--gutter) 0; }
.collection-heading h1 { font:normal clamp(1.6rem,3vw,2.5rem)/1.2 var(--font-heading); margin:0; }
@media(max-width:45rem) {
  .home-hero { background:var(--cream); }
  .home-copy { position:static; inline-size:100%; display:flex; align-items:center; justify-content:space-between; gap:.65rem; padding:1rem var(--gutter); color:var(--ink); }
  .home-copy h1 { font-size:clamp(1rem,4vw,1.5rem); margin:0; text-shadow:none; min-inline-size:0; }
  .home-copy .btn { flex-shrink:0; background:var(--ink); color:var(--cream); border-color:var(--ink); font-size:clamp(.55rem,2vw,.8rem); padding:1em .85em; }
}

/* Fit the complete homepage to the available browser viewport. The image stays
   uncropped; the shared header/footer and collection action keep natural heights. */
/* Homepage: header, complete proportional photograph, and footer share one viewport. */
body:has(.home-main) {
  block-size:100vh;
  block-size:100dvh;
  min-block-size:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
body:has(.home-main) .nav { padding-block:clamp(.3rem,1dvh,.7rem); }
body:has(.home-main) .brand-logo { max-block-size:10dvh; }
body:has(.home-main) .top { padding-block:.35em; }
.home-main { min-block-size:0; min-inline-size:0; display:flex; }
.home-hero {
  flex:1;
  inline-size:100%;
  min-inline-size:0;
  min-block-size:0;
  max-inline-size:none;
  margin:0;
  display:grid;
  place-items:center;
  container-type:size;
  background:#17120e;
}
.home-visual {
  position:relative;
  inline-size:min(100cqw,calc(100cqh * 1672 / 941));
  block-size:min(100cqh,calc(100cqw * 941 / 1672));
  max-block-size:100%;
  container-type:inline-size;
}
.home-picture { position:absolute; inset:0; display:block; inline-size:100%; block-size:100%; }
.home-scene { position:absolute; inset:0; display:block; inline-size:100%; block-size:100%; min-block-size:0; object-fit:contain; object-position:center; }
.home-copy {
  position:absolute;
  inset: auto 0 0;
  inline-size:100%;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(.5rem,2cqw,2rem);
  padding:clamp(.6rem,2cqw,2.5rem);
  padding-block-start:clamp(1.5rem,5cqh,4rem);
  color:var(--cream);
  background:linear-gradient(transparent,#10161499);
}
.home-copy h1 { font:normal clamp(1rem,4cqw,1.6rem)/1.1 var(--font-heading); margin:0; max-inline-size:46%; min-inline-size:0; text-shadow:0 2px 8px #000b; }
.home-copy .btn { max-inline-size:51%; min-inline-size:0; flex-shrink:1; background:var(--ink); color:var(--cream); border-color:var(--cream); padding:1em 1.15em; font-size:clamp(.6rem,2cqw,.85rem); text-align:center; }
.home-copy .btn:hover { background:var(--cream); color:var(--ink); border-color:var(--cream); }
body:has(.home-main) #site-footer { padding-block:clamp(.35rem,.9dvh,.7rem); }
body:has(.home-main) .footer-links { margin-bottom:.25em; }
body:has(.home-main) #site-footer p { margin:.25em 0; font-size:clamp(.65rem,1.5dvh,.8rem); }

@media(max-aspect-ratio:4/5) {
  .home-visual { inline-size:min(100cqw,calc(100cqh * 1086 / 1448)); block-size:min(100cqh,calc(100cqw * 1448 / 1086)); }
  .home-copy { padding:clamp(.65rem,3cqw,1rem); padding-block-start:2rem; }
  .home-copy h1 { font-size:clamp(1rem,4cqw,1.5rem); }
  .home-copy .btn { font-size:clamp(.55rem,1.9cqw,.8rem); padding:1em .7em; }
}
@media(max-height:30rem) and (orientation:landscape) {
  body:has(.home-main) .top { display:none; }
  body:has(.home-main) .brand-logo { max-block-size:13dvh; }
  body:has(.home-main) .nav { padding-block:.2rem; }
  body:has(.home-main) #site-footer { padding-block:.2rem; }
}

/* Admin portal: shared brand, forms, dialogs, and responsive management layouts. */
.admin-page { max-inline-size:88rem; margin:auto; padding:clamp(1rem,3vw,3rem) var(--gutter); }
.admin-heading,.admin-section-heading,.admin-session,.admin-toolbar,.admin-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--space); }
.admin-heading h1 { font:normal clamp(1.7rem,3vw,2.5rem) var(--font-heading); margin:.2em 0 .75em; }
.admin-heading .eyebrow { margin:0; }
.admin-session { justify-content:flex-end; font-size:.8rem; }
.admin-panel { border:1px solid var(--line); background:#fff8; padding:clamp(1rem,2vw,1.5rem); margin-block:var(--space); }
.admin-panel h2,.admin-panel h3,.admin-section h2 { font-family:var(--font-heading); font-weight:normal; }
.admin-panel p { color:var(--muted); font-size:.85rem; line-height:1.6; }
.admin-form { display:grid; gap:1rem; max-inline-size:42rem; }
.admin-form label,.admin-search { display:grid; gap:.45em; font-size:.85rem; color:var(--ink); min-inline-size:0; }
.admin-form input,.admin-form select,.admin-form textarea,.admin-search input { font:inherit; background:var(--cream); color:var(--ink); border:1px solid var(--line); border-radius:0; inline-size:100%; padding:.8em; min-inline-size:0; }
.admin-form textarea { resize:vertical; min-block-size:5em; }
.admin-form input:focus-visible,.admin-form select:focus-visible,.admin-form textarea:focus-visible,.admin-search input:focus-visible { outline:2px solid var(--rose); outline-offset:2px; }
.admin-form .btn { justify-self:start; }
.admin-form .check-label { display:flex; align-items:center; gap:.6em; }
.admin-form input[type="checkbox"] { inline-size:auto; }
.admin-form .field-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space); }
.button-secondary { background:transparent; border:1px solid var(--line); color:var(--ink); padding:.85em 1em; font-size:clamp(.7rem,.9vw,.85rem); }
.admin-notice { border-inline-start:.25rem solid var(--rose); background:#efe1d1; padding:.8em 1em; line-height:1.5; font-size:.8rem; }
.admin-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(.2rem,1vw,1rem); border-bottom:1px solid var(--line); margin-block:1.25rem; }
.admin-tab { flex:1 1 0; min-inline-size:0; border:0; border-bottom:2px solid transparent; padding:1em .4em; font-size:clamp(.7rem,1vw,.9rem); background:none; }
.admin-tab { text-align:center; text-decoration:none; color:var(--ink); }
.admin-tab[aria-current="page"] { border-color:var(--rose); color:var(--rose); }
.admin-section-description { color:var(--muted); font-size:clamp(.8rem,1.3vw,.9rem); line-height:1.6; }
.admin-toolbar { margin-block:1rem; align-items:end; }
.admin-search { flex:1; }
.admin-section-heading { margin-block:1.5rem 1rem; }
.admin-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.5rem,1vw,1rem); }
.admin-metric { border:1px solid var(--line); padding:clamp(.6rem,1.3vw,1.2rem); background:#fff8; }
.admin-metric strong { display:block; font:normal clamp(1.3rem,3vw,2rem) var(--font-heading); }
.admin-metric span { color:var(--muted); font-size:clamp(.6rem,.9vw,.8rem); }
.admin-actions { justify-content:flex-start; }
.admin-product-list { display:grid; gap:.6rem; }
.admin-record { border:1px solid var(--line); padding:clamp(.8rem,1.5vw,1.25rem); margin-bottom:.6rem; background:#fff6; }
.admin-record-header { display:flex; justify-content:space-between; align-items:start; gap:var(--space); }
.admin-record h3 { font:normal clamp(1rem,1.5vw,1.3rem) var(--font-heading); margin:0 0 .35em; }
.admin-record p { font-size:.8rem; color:var(--muted); line-height:1.5; margin:.35em 0; overflow-wrap:anywhere; }
.admin-record .admin-actions { margin-top:.75em; }
.admin-stock { font:normal clamp(1.1rem,2vw,1.5rem) var(--font-heading); white-space:nowrap; }
.status-label { display:inline-block; background:#efe1d1; padding:.3em .6em; font-size:.7rem; color:var(--ink); text-transform:capitalize; }
.form-error { color:var(--feedback-error); line-height:1.5; font-size:.85rem; }
.admin-empty { color:var(--muted); padding:2rem 0; line-height:1.6; }
#adminDialog { border:1px solid var(--line); background:var(--cream); color:var(--ink); padding:clamp(1rem,3vw,2rem); inline-size:min(94vw,48rem); max-block-size:90dvh; overflow:auto; }
#adminDialog::backdrop { background:#0008; }
#adminDialog h2 { margin-top:0; padding-inline-end:2rem; font:normal 1.7rem var(--font-heading); }
.dialog-dismiss { position:absolute; inset-inline-end:.6rem; inset-block-start:.5rem; }
.order-composer { display:grid; gap:.6rem; }
.order-compose-line { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.35fr) auto; gap:.5rem; align-items:end; }
.order-compose-line button { min-block-size:2.8em; }
.order-line-total { text-align:end; font-family:var(--font-heading); font-size:1.2rem; }
@media(max-width:45rem) {
  .admin-heading { align-items:start; }
  .admin-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 .4rem; }
  .admin-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-heading .eyebrow { font-size:.5rem; }
  .admin-session { font-size:.65rem; }
  .admin-actions { gap:.5rem; }
  .admin-actions .btn,.admin-actions .button-secondary { padding:.8em; }
}

/* Connected account forms share the site's form treatment. */
.account-form textarea,.account-form select { inline-size:100%; min-inline-size:0; font:inherit; padding:.8em; border:1px solid var(--line); background:var(--cream); color:var(--ink); }
.account-form textarea { resize:vertical; min-block-size:5em; }
.account-switch { display:flex; flex-wrap:wrap; gap:var(--space); align-items:center; }
.account-page .admin-record { margin-block:var(--space); }

/* Shared public offers: one compact offer at a time, including on phones. */
.store-offers { display:flex; align-items:center; gap:clamp(.4rem,1.4vw,1rem); padding:clamp(.4rem,1dvh,.65rem) var(--gutter); background:#eee0d3; border-block-end:1px solid var(--line); }
.offer-copy { flex:1; min-inline-size:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em .7em; font-size:clamp(.75rem,.7rem + .2vw,.9rem); line-height:1.3; }
.offer-copy strong { font-weight:600; }
.offer-copy span { color:var(--muted); }
.store-offers .button-secondary { padding:.55em .75em; flex-shrink:0; font-size:clamp(.7rem,.65rem + .2vw,.85rem); }
.offer-next { background:transparent; border:0; color:var(--ink); padding:.4em 0; font-size:clamp(.65rem,.6rem + .2vw,.8rem); flex-shrink:0; }

/* Visible administrator access shares the existing header controls and brand. */
.admin-login-link { color:var(--rose); }
@media(max-width:45rem) {
  .nav .brand { flex:1 1 34%; }
  .header-actions { gap:clamp(.35rem,1.5vw,.65rem); }
  .header-actions .login-link { font-size:clamp(.68rem,2.6vw,.82rem); }
  .header-actions .cart-open { padding:.7em .65em; font-size:clamp(.68rem,2.6vw,.82rem); }
}

.product-image-editor { display:grid; gap:.6rem; padding-block:.5rem; }
.product-image-editor p { margin:0; font-size:.8rem; color:var(--muted); }
.admin-image-preview { display:block; inline-size:min(100%,15rem); aspect-ratio:1; object-fit:contain; background:#eee5d8; border:1px solid var(--line); }
.product-image-editor .button-secondary { justify-self:start; }

/* Keep the site chrome full-width; fit the approved photograph within the remaining viewport. */
body:has(.home-main) { inline-size:100%; max-inline-size:none; margin:0; }
.home-hero { background:var(--cream); }
.home-scene { object-fit:contain; object-position:center center; transform-origin:65% 50%; }


/* Independent layers: fill the scenery, preserve the product display's proportions. */
.home-hero { overflow:hidden; isolation:isolate; background:url("assets/hero-background-layer.webp") center / 100% 100% no-repeat; }
.home-visual { position:absolute; inset:0; inline-size:100%; block-size:100%; max-block-size:none; }
.home-picture { position:absolute; inset:0; mask-image:none; }
.home-scene { object-fit:contain; object-position:65% center; }
.home-hero > .home-copy { z-index:1; }
@media(max-aspect-ratio:4/5) {
  .home-visual { inline-size:100%; block-size:100%; }
  .home-scene { object-fit:cover; object-position:center; }
}

/* Individual product pages (product.html). */
.product-art-link { display:block; }
.card h3 a:hover { color:var(--rose); }
.pdp { max-inline-size:82rem; margin:auto; padding:clamp(1rem,3vw,2.5rem) var(--gutter) clamp(2rem,5vw,4rem); }
.crumbs { font-size:clamp(.65rem,.9vw,.8rem); color:var(--muted); margin-block-end:var(--space); }
.crumbs a:hover { color:var(--rose); }
.pdp-main { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,4vw,4rem); align-items:start; }
.pdp-art { aspect-ratio:1 / 1; background:#f0e4d7; border:1px solid #e8d8c9; display:grid; place-items:center; overflow:hidden; }
.pdp-art img { inline-size:100%; block-size:100%; object-fit:cover; }
.pdp-info { min-inline-size:0; display:flex; flex-direction:column; align-items:flex-start; gap:.9em; }
.pdp-info .eyebrow { margin:0; }
.pdp-info h1 { font:normal clamp(1.6rem,3.4vw,3rem)/1.1 var(--font-heading); margin:0; }
.pdp-meta { margin:0; color:var(--muted); font-size:clamp(.75rem,1vw,.9rem); }
.pdp-price { margin:0; font:clamp(1.2rem,2vw,1.7rem) var(--font-heading); }
.pdp-copy p, p.pdp-copy { margin:0 0 1em; max-inline-size:60ch; line-height:1.7; color:#6b5b50; }
.pdp-section { margin-block-start:clamp(1.5rem,4vw,3.5rem); border-top:1px solid var(--line); padding-block-start:clamp(1rem,2vw,1.75rem); }
.pdp-section h2 { font:normal clamp(1.2rem,2.2vw,1.8rem) var(--font-heading); margin:0 0 .75em; }
.pdp-list { margin:0; padding-inline-start:1.2em; line-height:1.8; color:#6b5b50; }
.pdp-list a:hover { color:var(--rose); }
.pdp-video { aspect-ratio:16 / 9; max-inline-size:52rem; background:var(--ink); }
.pdp-video video, .pdp-video iframe { display:block; inline-size:100%; block-size:100%; border:0; }
.results { display:grid; gap:var(--space); }
.results figure { margin:0; }
.result-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.35rem,1vw,.75rem); max-inline-size:52rem; }
.result-pair img { display:block; inline-size:100%; aspect-ratio:4 / 5; object-fit:cover; background:#f0e4d7; }
.results figcaption { margin-block-start:.4em; font-size:clamp(.65rem,.9vw,.8rem); color:var(--muted); }
.pdp-note { font-size:clamp(.7rem,.9vw,.8rem); color:var(--muted); }
@media(max-width:45rem) { .pdp-main { grid-template-columns:minmax(0,1fr); } }

/* Product facts and sources. */
.pdp-facts { display:grid; grid-template-columns:auto 1fr; gap:.4em 1.1em; margin:.4em 0 0; padding-block-start:.9em; border-top:1px solid var(--line); font-size:clamp(.75rem,1vw,.9rem); max-inline-size:36rem; }
.pdp-facts dt { color:var(--muted); }
.pdp-facts dd { margin:0; }
.pdp-sources { margin:0; padding-inline-start:1.2em; font-size:clamp(.68rem,.85vw,.8rem); line-height:1.7; color:var(--muted); }
.pdp-sources a { text-decoration:underline; text-underline-offset:.2em; }

/* Payment instructions in customer orders. */
.pay-panel { margin-block-start:1em; padding:1em; background:#f0e4d7; border:1px solid var(--line); }
.pay-panel p { margin:0 0 .6em; line-height:1.6; }
.pay-panel .admin-actions { margin-block:.8em 0; }
.pay-note { margin-block-start:1em; color:var(--muted); line-height:1.6; }

/* Product photos are full scenes (bottle on a marble plinth), so cards show them edge to edge. */
.product-art:after { box-shadow:none; }
.product-image { object-fit:cover; padding:0; }
#serumGrid .product-art, #groomGrid .product-art, #creamGrid .product-art { aspect-ratio:1 / 1; block-size:auto; background:#1c1715; border-color:#2b221e; }
#creamGrid .product-image { inline-size:100%; block-size:100%; transform:none; }

/* The Travel Set photo is landscape, so show all of it. */
.pdp-art--wide { aspect-ratio:1400 / 906; }
.pdp-art--wide img { object-fit:contain; }

/* Homepage hero photo: one wide scene that fills the screen without distortion. */
.home-hero.nh { background:#120d0b; }
.home-hero.nh .home-visual { inset-block:0; inset-inline-start:50%; transform:translateX(-50%); inline-size:min(100cqw,calc(100cqh * 2000 / 852)); block-size:100%; }
.home-hero.nh .home-scene { object-fit:cover; object-position:center; }
@media (max-aspect-ratio:0.66) { .home-hero.nh .home-visual { inset-inline-start:0; transform:none; inline-size:100%; } }


/* Homepage sections (index.html). */
.hx-main { inline-size:100%; }
.hx-hero-wrap { background:#120d0b; }
.hx-hero { position:relative; inline-size:100%; max-inline-size:calc((100svh - 12.5rem) * 2000 / 852); min-inline-size:min(100%,36rem); margin-inline:auto; aspect-ratio:2000 / 852; overflow:hidden; isolation:isolate; background:#120d0b; }
.hx-visual, .hx-visual picture { position:absolute; inset:0; display:block; }
.hx-scene { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; object-position:center; transform:scale(1.08); transform-origin:50% 3%; }
.hx-hero-copy { position:absolute; inset-inline:3%; inset-block-end:5%; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; color:var(--cream); }
.hx-hero-copy h1 { margin:0; font:normal clamp(1.3rem,3.1vw,3.4rem)/1.12 var(--font-heading); text-shadow:0 2px 12px #000a; }
.hx-hero-copy h1 em { font-style:italic; }
.hx-hero-copy .btn { flex-shrink:0; background:var(--ink); color:var(--cream); border-color:var(--cream); font-size:clamp(.6rem,.9vw,.85rem); }
.hx-hero-copy .btn:hover { background:var(--cream); color:var(--ink); }
@media (max-aspect-ratio:4/5) {
  .hx-hero { aspect-ratio:720 / 1161; max-inline-size:100%; min-inline-size:0; }
  .hx-scene { transform:scale(1.1); transform-origin:50% 45%; }
  .hx-hero-copy { inset-inline:4%; inset-block-end:3%; }
  .hx-hero-copy h1 { font-size:clamp(1rem,5.2vw,1.6rem); }
  .hx-hero-copy .btn { padding:1em .9em; font-size:clamp(.5rem,2.2vw,.75rem); }
}
.hx-section { max-inline-size:88rem; margin-inline:auto; padding:clamp(2.5rem,6vw,5.5rem) var(--gutter); }
.hx-head { text-align:center; margin-block-end:clamp(1.25rem,3vw,2.5rem); }
.hx-head .eyebrow { margin:0 0 .8em; }
.hx-head h2, .hx-band h2 { margin:0; font:normal clamp(1.6rem,3.4vw,3rem)/1.12 var(--font-heading); }
.hx-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-block-end:clamp(1rem,2.5vw,2rem); }
.hx-tabs button { background:transparent; border:1px solid var(--line); color:var(--ink); padding:.7em 1.2em; font-size:clamp(.65rem,.85vw,.8rem); letter-spacing:.12em; text-transform:uppercase; }
.hx-tabs button[aria-pressed="true"] { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.hx-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(10.5rem,46%); gap:var(--space); overflow-x:auto; scroll-snap-type:x mandatory; padding-block-end:.5rem; }
.hx-rail > * { scroll-snap-align:start; }
.hx-rail .product-art { aspect-ratio:1 / 1; }
@media (min-width:60rem) { .hx-rail { grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-columns:auto; overflow:visible; } }
.hx-more { text-align:center; margin:clamp(1.25rem,3vw,2.5rem) 0 0; }
.hx-band { background:radial-gradient(ellipse at 50% 0%,#5a3a24 0%,transparent 60%),#1c1715; color:var(--cream); text-align:center; padding:clamp(3rem,8vw,7rem) var(--gutter); }
.hx-band-inner { max-inline-size:46rem; margin-inline:auto; }
.hx-band .eyebrow { color:#d9a67d; margin:0 0 1em; }
.hx-band p { line-height:1.7; color:#e8d9c8; margin:1.2em 0 1.6em; }
.hx-band .button-secondary { color:var(--cream); border-color:#8a6a55; }
.hx-band .button-secondary:hover { background:var(--cream); color:var(--ink); }
.hx-features { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space); }
.hx-features article { border-top:1px solid var(--ink); padding-block-start:1em; }
.hx-features span { font:italic clamp(.9rem,1.2vw,1.1rem) var(--font-heading); color:var(--rose); }
.hx-features h3 { margin:.6em 0 .5em; font:normal clamp(1.05rem,1.6vw,1.4rem) var(--font-heading); }
.hx-features p { margin:0; line-height:1.65; color:var(--muted); }
@media (max-width:50rem) { .hx-features { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hx-steps { display:grid; gap:var(--space); grid-template-columns:repeat(2,minmax(0,1fr)); }
.hx-step { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(.65rem,2vw,1.5rem); align-items:center; border:1px solid var(--line); background:#fffaf3; }
.hx-step-art { display:block; aspect-ratio:1 / 1; overflow:hidden; background:#1c1715; }
.hx-step-art img { inline-size:100%; block-size:100%; object-fit:cover; }
.hx-step-body { padding:clamp(.65rem,2vw,1.5rem) clamp(.65rem,2vw,1.5rem) clamp(.65rem,2vw,1.5rem) 0; min-inline-size:0; }
.hx-step-body .eyebrow { margin:0 0 .6em; }
.hx-step-body h3 { margin:0 0 .4em; font:normal clamp(1rem,1.6vw,1.45rem)/1.2 var(--font-heading); }
.hx-step-body p { margin:0 0 .5em; line-height:1.6; color:var(--muted); font-size:clamp(.75rem,.95vw,.9rem); }
.hx-when { font-size:clamp(.65rem,.85vw,.78rem); letter-spacing:.08em; text-transform:uppercase; }
.hx-buy { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-block-start:.8em; flex-wrap:wrap; }
.hx-buy .btn { padding:.9em 1.1em; font-size:clamp(.6rem,.8vw,.75rem); }
@media (max-width:55rem) { .hx-steps { grid-template-columns:minmax(0,1fr); } }
@media (max-width:30rem) { .hx-step { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } .hx-step-body p:not(.eyebrow):not(.hx-when) { display:none; } }
.hx-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space); max-inline-size:88rem; margin:0 auto; padding:0 var(--gutter) clamp(2.5rem,6vw,5.5rem); }
.hx-tile { position:relative; display:flex; align-items:flex-end; min-block-size:clamp(16rem,34vw,30rem); overflow:hidden; background:#1c1715; color:var(--cream); }
.hx-tile img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; opacity:.85; }
.hx-tile:after { content:''; position:absolute; inset:0; background:linear-gradient(to top,#000b 0%,transparent 60%); }
.hx-tile-science { background:radial-gradient(ellipse at 20% 0%,#6b4328 0%,transparent 65%),#1c1715; }
.hx-tile-copy { position:relative; z-index:1; display:flex; flex-direction:column; gap:.6em; padding:clamp(1rem,3vw,2.5rem); }
.hx-tile-copy .eyebrow { color:#d9a67d; }
.hx-tile-copy strong { font:normal clamp(1.3rem,2.6vw,2.4rem)/1.12 var(--font-heading); }
.hx-tile-copy > span:not(.eyebrow):not(.hx-link) { line-height:1.6; max-inline-size:30rem; color:#eadbca; }
.hx-link { text-transform:uppercase; letter-spacing:.14em; font-size:clamp(.6rem,.8vw,.75rem); border-bottom:1px solid currentColor; inline-size:fit-content; padding-block-end:.3em; }
@media (max-width:45rem) { .hx-tiles { grid-template-columns:minmax(0,1fr); } }
.hx-accordion { max-inline-size:50rem; margin-inline:auto; }
.hx-accordion details { border-top:1px solid var(--line); }
.hx-accordion details:last-child { border-bottom:1px solid var(--line); }
.hx-accordion summary { cursor:pointer; list-style:none; padding:1.1em 0; font:normal clamp(1rem,1.5vw,1.3rem) var(--font-heading); display:flex; justify-content:space-between; gap:1rem; }
.hx-accordion summary::-webkit-details-marker { display:none; }
.hx-accordion summary:after { content:'+'; color:var(--rose); }
.hx-accordion details[open] summary:after { content:'−'; }
.hx-accordion p { margin:0 0 1.2em; line-height:1.7; color:var(--muted); max-inline-size:44rem; }


/* Shared footer columns. */
.footer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space); max-inline-size:64rem; margin:0 auto 1.25rem; text-align:start; }
.footer-grid nav { display:flex; flex-direction:column; gap:.55em; font-size:clamp(.72rem,.9vw,.85rem); }
.footer-grid h2 { margin:0 0 .5em; font:normal .72rem var(--font-body); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }
.footer-grid a:hover { color:var(--rose); }
@media (max-width:30rem) { .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }


/* Build a kit (homepage) and kit savings in the bag. */
.hx-lead { margin:1em auto 0; max-inline-size:36rem; line-height:1.7; color:var(--muted); }
.hx-kit-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space); max-inline-size:60rem; margin:0 auto clamp(1rem,3vw,2rem); padding:0; list-style:none; counter-reset:kit; }
.hx-kit-steps li { counter-increment:kit; border-top:1px solid var(--ink); padding-block-start:1em; line-height:1.6; color:var(--muted); }
.hx-kit-steps li:before { content:counter(kit); display:block; font:italic clamp(1rem,1.4vw,1.2rem) var(--font-heading); color:var(--rose); margin-block-end:.3em; }
.hx-kit-steps strong { color:var(--ink); font-weight:normal; font-family:var(--font-heading); font-size:1.15em; }
@media (max-width:45rem) { .hx-kit-steps { grid-template-columns:minmax(0,1fr); } }
.hx-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.5rem,1.5vw,1rem); max-inline-size:44rem; margin:0 auto clamp(1.25rem,3vw,2rem); }
.hx-tier { border:1px solid var(--line); background:#fffaf3; text-align:center; padding:1em .5em; display:flex; flex-direction:column; gap:.2em; }
.hx-tier strong { font:normal clamp(1.2rem,2.4vw,1.9rem) var(--font-heading); }
.hx-tier span { font-size:clamp(.65rem,.85vw,.78rem); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hx-tier.is-active { background:var(--ink); border-color:var(--ink); }
.hx-tier.is-active strong, .hx-tier.is-active span { color:var(--cream); }
.hx-kit-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(10rem,1fr)); gap:var(--space); }
.hx-pick { display:flex; flex-direction:column; align-items:stretch; gap:.35em; padding:0 0 .8em; background:#fffaf3; border:1px solid var(--line); text-align:center; color:var(--ink); }
.hx-pick img { inline-size:100%; block-size:auto; aspect-ratio:1 / 1; object-fit:cover; background:#1c1715; }
.hx-pick-name { font:normal clamp(.85rem,1.1vw,1rem) var(--font-heading); padding-inline:.5em; margin-block-start:.4em; }
.hx-pick-meta { font-size:clamp(.65rem,.85vw,.78rem); color:var(--muted); padding-inline:.5em; }
.hx-pick-state { font-size:clamp(.6rem,.8vw,.72rem); letter-spacing:.14em; text-transform:uppercase; color:var(--rose); }
.hx-pick[aria-pressed="true"] { border-color:var(--ink); outline:2px solid var(--ink); }
.hx-pick[aria-pressed="true"] .hx-pick-state { color:var(--ink); }
.hx-pick:disabled { opacity:.55; cursor:not-allowed; }
.hx-kit-summary { text-align:center; margin:clamp(1rem,2.5vw,1.75rem) auto 0; max-inline-size:44rem; line-height:1.7; color:var(--muted); min-block-size:3.4em; }
.hx-kit-summary strong { color:var(--ink); font-weight:600; }
.hx-kit-actions { text-align:center; margin:1em 0 0; }
.hx-kit-actions .btn:disabled { opacity:.45; cursor:not-allowed; }
.hx-kit-fine { text-align:center; margin:1.5em auto 0; max-inline-size:44rem; font-size:clamp(.7rem,.85vw,.8rem); line-height:1.7; color:var(--muted); }
.hx-kit-fine a { text-decoration:underline; text-underline-offset:.2em; }
.kit-note { color:var(--ink); font-weight:600; }

/* Header: Build a Kit link, phone link row, and landing offset. */
.links .kit-link { color:var(--rose); border-bottom:1px solid currentColor; padding-block-end:.1em; }
.links a:hover { color:var(--rose); }
#kit { scroll-margin-block-start:6rem; }
@media(max-width:45rem) {
  .nav { flex-wrap:wrap; row-gap:.4rem; }
  .links { display:flex; order:3; flex-basis:100%; justify-content:center; gap:clamp(.7rem,3.5vw,1.4rem); font-size:clamp(.65rem,2.9vw,.8rem); overflow-x:auto; padding-block-end:.2rem; }
  #kit { scroll-margin-block-start:9rem; }
}

/* Checkout inside the bag drawer */
#bagView { display:flex; flex-direction:column; flex:1; min-block-size:0; }
#bagView > .btn,#bagView > .button-secondary { margin-block-start:.5em; }
#bagCheckout { flex:1; min-block-size:0; overflow:auto; padding-block-start:1rem; }
#bagCheckout h3 { font:normal 1.35rem var(--font-heading); margin:.9em 0 .4em; }
#bagCheckout .account-form { gap:.8rem; margin-block:.8rem; }
#bagCheckout #checkoutSummary { padding:.7rem .9rem; font-size:.9rem; }
#bagCheckout .contact-status { margin:.5em 0; }
#checkoutPayChoice { border:1px solid var(--line); padding:.8em; display:grid; gap:.6em; margin:0; }
#checkoutPayChoice legend { padding-inline:.4em; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
#checkoutPayChoice label { display:flex; gap:.6em; align-items:center; }
#checkoutPayChoice input { inline-size:auto; min-inline-size:0; }

/* Policy pages */
.policy h2 { margin:1.8em 0 .3em; font:normal clamp(1.15rem,2.2vw,1.5rem) var(--font-heading); }
.policy .updated { font-size:.85rem; margin-block-start:0; }
.policy ul { max-inline-size:65ch; line-height:1.7; color:var(--muted); padding-inline-start:1.2em; }
.policy li { margin-block:.5em; }
.policy a { color:var(--rose); text-decoration:underline; }
.fill { background:#fff1b8; color:#5a4300; padding:0 .25em; }