/* 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; }
.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:var(--cream);
}
.home-visual {
  position:relative;
  inline-size:min(100cqw,calc(100cqh * 2048 / 683));
  aspect-ratio:2048 / 683;
  max-block-size:100%;
}
.home-picture { display:block; inline-size:100%; block-size:100%; }
.home-scene { display:block; inline-size:100%; block-size:100%; min-block-size:0; object-fit:contain; }
.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,2.6cqw,2.8rem)/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,1cqw,.95rem); 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:9/5) {
  .home-visual { inline-size:min(100cqw,calc(100cqh * 1672 / 941)); aspect-ratio:1672 / 941; }
}
@media(max-aspect-ratio:4/5) {
  .home-visual { inline-size:min(100cqw,calc(100cqh * 2 / 3)); aspect-ratio:2 / 3; }
  .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; }