/* ═══════════════════════════════════════════════════════════════════════════
   ETHOS AURUM MAISON — SIZES, COLOURS, STOCK, CONSENT       (TEE8 MVP, 9 Oct 2026)
   Loaded last, after eam-skin.css. House rules kept: oxblood ink on bone,
   Geist Mono for proof (sizes are proof, like hallmarks and prices), the
   arched top corners of the house buttons echoed on the size chips, aurum
   only as a hairline. Motion: transform/opacity only, ease-out, <=200ms,
   hover gated to fine pointers, nothing moves under reduced motion.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --eam-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --vp-ink: var(--eam-oxblood);
  --vp-line: rgb(var(--eam-oxblood-rgb) / .26);
  --vp-muted: rgb(var(--eam-oxblood-rgb) / .38);
}

/* ── shared ───────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 12px 18px;
  background: var(--eam-oxblood); color: var(--eam-bone); font-family: var(--eam-font-proof); font-size: 13px;
  border-radius: 0 0 10px 10px; transition: transform 160ms var(--eam-ease-out);
}
.skip-link:focus { transform: translateY(60px); outline: 2px solid var(--eam-aurum); outline-offset: 2px; }

/* ── the title: house above the name, both inside the one h1 ─────────── */
.pdp-title { margin: 0 0 22px; font-weight: 400; }
body.piece-page .pdp-title .pdp-house {
  display: block; margin: 0 0 10px; font-family: var(--eam-font-proof); font-size: 11px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase; color: var(--vp-ink); opacity: .7;
}
body.piece-page .pdp-title .pdp-name { display: block; margin: 0; }

/* ── the buy block ────────────────────────────────────────────────────── */
.pdp-buy { margin: 14px 0 6px; max-width: 460px; }

.vp { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; position: relative; }
.vp-legend {
  display: flex; align-items: baseline; gap: 10px; padding: 0; margin: 0 0 12px; width: 100%;
  font-family: var(--eam-font-proof); font-size: 11px; letter-spacing: var(--eam-track-proof);
  text-transform: uppercase; color: var(--vp-ink);
}
.vp-label { opacity: .62; }
.vp-sys { opacity: .62; letter-spacing: .06em; }
.vp-value {
  font-family: var(--eam-font-body); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--vp-ink);
}
.vp-value.is-pending { opacity: .55; font-style: italic; }

/* colour swatches — real radio buttons underneath */
.vp-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-swatch { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; border-radius: 50%; }
.vp-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vp-swatch .vp-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vp-dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--sw, #ccc);
  box-shadow: inset 0 0 0 1px rgb(var(--eam-espresso-rgb) / .18), 0 0 0 3px var(--eam-bone), 0 0 0 4px transparent;
  transition: box-shadow 160ms ease, transform 160ms var(--eam-ease-out);
}
.vp-swatch input:checked + .vp-dot { box-shadow: inset 0 0 0 1px rgb(var(--eam-espresso-rgb) / .18), 0 0 0 3px var(--eam-bone), 0 0 0 4.5px var(--vp-ink); }
.vp-swatch input:focus-visible + .vp-dot { box-shadow: inset 0 0 0 1px rgb(var(--eam-espresso-rgb) / .18), 0 0 0 3px var(--eam-bone), 0 0 0 5px var(--eam-aurum); }
.vp-swatch:active .vp-dot { transform: scale(0.94); }
.vp-swatch.is-out .vp-dot {
  background: linear-gradient(135deg, transparent calc(50% - .75px), rgb(var(--eam-bone-rgb) / .95) calc(50% - .75px),
              rgb(var(--eam-bone-rgb) / .95) calc(50% + .75px), transparent calc(50% + .75px)), var(--sw, #ccc);
  opacity: .5;
}
@media (hover: hover) and (pointer: fine) {
  .vp-swatch:hover input:not(:checked) + .vp-dot { box-shadow: inset 0 0 0 1px rgb(var(--eam-espresso-rgb) / .18), 0 0 0 3px var(--eam-bone), 0 0 0 4px var(--vp-line); }
}

/* size chips */
.vp-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.vp-chip { position: relative; display: block; cursor: pointer; }
.vp-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vp-chip > span:first-of-type {
  display: grid; place-items: center; min-height: 46px; padding: 0 6px;
  font-family: var(--eam-font-proof); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--vp-ink);
  border: 1px solid var(--vp-line); border-radius: 10px 10px 0 0; background: rgb(var(--eam-bone-rgb) / .6);
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms var(--eam-ease-out);
}
.vp-chip input:checked + span { background: var(--vp-ink); border-color: var(--vp-ink); color: var(--eam-bone); }
.vp-chip input:focus-visible + span { outline: 2px solid var(--eam-aurum); outline-offset: 2px; }
.vp-chip:active input:not(:disabled) + span { transform: scale(0.96); }
.vp-chip.is-out { cursor: not-allowed; }
.vp-chip.is-out input { cursor: not-allowed; }
.vp-chip.is-out > span:first-of-type {
  color: var(--vp-muted); border-color: rgb(var(--eam-oxblood-rgb) / .14); background:
    linear-gradient(to top right, transparent calc(50% - .5px), rgb(var(--eam-oxblood-rgb) / .22) calc(50% - .5px),
    rgb(var(--eam-oxblood-rgb) / .22) calc(50% + .5px), transparent calc(50% + .5px)), transparent;
}
@media (hover: hover) and (pointer: fine) {
  .vp-chip:not(.is-out):hover input:not(:checked) + span { border-color: var(--vp-ink); }
}

.vp-guide {
  margin-left: auto; padding: 4px 0; border: 0; background: none; cursor: pointer; text-transform: none;
  font-family: var(--eam-font-proof); font-size: 11px; letter-spacing: .06em; color: var(--vp-ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--vp-line);
}
.vp-guide:focus-visible { outline: 2px solid var(--eam-aurum); outline-offset: 3px; }

/* "Choose a size first" — one short nudge, so the eye finds the sizes */
@keyframes vp-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.vp-size.is-nudged .vp-sizes { animation: vp-nudge 240ms var(--eam-ease-out) 1; }

.pdp-stock {
  margin: 2px 0 14px; font-family: var(--eam-font-proof); font-size: 12px; letter-spacing: .04em; color: var(--vp-ink);
  display: flex; align-items: center; gap: 8px;
}
.pdp-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2F6B4F; flex: none; }
.pdp-stock.is-out::before { background: var(--vp-muted); }
.pdp-stock.is-pending::before { background: transparent; box-shadow: inset 0 0 0 1px var(--vp-line); }
.pdp-error { margin: 10px 0 0; font-family: var(--eam-font-body); font-size: 14px; color: var(--eam-bordeaux); }
.pdp-error::before { content: "— "; }

body.store .pdp-add { width: 100%; min-width: 0; max-width: 460px; transition: transform 160ms var(--eam-ease-out), opacity 160ms ease; }
body.store .pdp-add:active:not(:disabled) { transform: scale(0.98); }
body.store .pdp-add:disabled { opacity: .45; cursor: not-allowed; }
.pdp-ask {
  display: inline-block; margin-top: 14px; font-family: var(--eam-font-body); font-size: 14px; color: var(--vp-ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--vp-line);
}
.pdp-shotnote:not([hidden]) {
  display: block; margin-top: 10px; font-family: var(--eam-font-body); font-size: 12px; letter-spacing: 0;
  text-transform: none; opacity: .7; color: var(--vp-ink);
}

body.piece-page .pdp-facts > div { height: auto; min-height: 41px; padding: 8px 0; }
body.piece-page .pdp-facts dd a { color: inherit; text-underline-offset: 3px; }

.pdp-story { margin: 34px 0 0; max-width: 60ch; }
.pdp-story h2 {
  margin: 0 0 12px; font-family: var(--eam-font-proof); font-weight: 400; font-size: 11px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase; color: var(--vp-ink); opacity: .7;
}
.pdp-story p { margin: 0 0 12px; font-family: var(--eam-font-body); font-size: 15px; line-height: 1.6; color: var(--vp-ink); }
.pdp-affiliation { margin: 26px 0 0; max-width: 60ch; font-family: var(--eam-font-body); font-size: 12px; line-height: 1.5; color: var(--vp-ink); opacity: .6; }

/* ── size guide ───────────────────────────────────────────────────────── */
.vp-guide-dialog {
  width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto;
  padding: 28px 28px 30px; border: 0; border-top: 1.5px solid var(--eam-aurum);
  border-radius: 22px 22px 0 0; background: var(--eam-bone); color: var(--vp-ink);
  font-family: var(--eam-font-body);
}
.vp-guide-dialog::backdrop { background: rgb(var(--eam-espresso-rgb) / .55); }
.vp-guide-dialog[open] { animation: sg-in 200ms var(--eam-ease-out); }
@keyframes sg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.vp-guide-dialog h2 { margin: 0 0 10px; font-family: var(--eam-font-display); font-weight: 400; font-size: 34px; }
.vp-guide-dialog p { font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.sg-close-row { position: absolute; right: 14px; top: 10px; margin: 0; }
.sg-close-row .icon-btn { width: 44px; height: 44px; font-size: 26px; background: none; border: 0; color: var(--vp-ink); cursor: pointer; }
.sg-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-family: var(--eam-font-proof); font-size: 13px; font-variant-numeric: tabular-nums; }
.sg-table caption { caption-side: bottom; text-align: left; padding-top: 10px; font-family: var(--eam-font-body); font-size: 11.5px; opacity: .7; }
.sg-table th { text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .65; padding: 0 8px 8px 0; border-bottom: 1px solid var(--vp-line); }
.sg-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid rgb(var(--eam-oxblood-rgb) / .1); }
.vp-guide-dialog .btn { width: 100%; min-width: 0; text-align: center; display: block; }

/* ── cards: colours, sizes, sold out ──────────────────────────────────── */
.piece-card-swatches { display: flex; align-items: center; gap: 0; margin: 6px 0 2px; }
.piece-card-swatches i {
  width: 11px; height: 11px; border-radius: 50%; background: var(--sw); margin-right: -2px;
  box-shadow: 0 0 0 1.5px var(--eam-bone), inset 0 0 0 1px rgb(var(--eam-espresso-rgb) / .2);
}
.piece-card-swatches em { margin-left: 8px; font-style: normal; font-family: var(--eam-font-proof); font-size: 10px; opacity: .7; }
.piece-card-sizes { display: block; margin: 4px 0 2px; font-family: var(--eam-font-proof); font-size: 10.5px; letter-spacing: .04em; opacity: .7; }
.piece-card-plate { position: relative; }
.piece-card-badge {
  position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 9px 4px;
  font-family: var(--eam-font-proof); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--eam-bone); color: var(--vp-ink); border-radius: 8px 8px 0 0;
}
.piece-card.is-soldout .piece-card-plate img { opacity: .55; filter: grayscale(.35); }
.piece-card.is-soldout .piece-card-price { text-decoration: line-through; text-decoration-color: rgb(var(--eam-oxblood-rgb) / .45); }

/* ── listing intro ────────────────────────────────────────────────────── */
body.store .room-head .room-intro { max-width: 62ch; letter-spacing: 0; text-transform: none; margin: 10px 0 6px; font-family: var(--eam-font-body); font-size: 15px; line-height: 1.6; color: var(--vp-ink); }

/* ── bag + checkout lines ─────────────────────────────────────────────── */
.line-variant, .co-line-variant { display: block; margin: 4px 0 0; font-family: var(--eam-font-proof); font-size: 11.5px; letter-spacing: .03em; color: var(--vp-ink); opacity: .85; }
.line-warn, .co-line-warn { display: block; margin: 6px 0 0; font-family: var(--eam-font-body); font-size: 12.5px; color: var(--eam-bordeaux); }
a.co-line-warn, .line-choose { color: var(--eam-bordeaux); text-decoration: underline; text-underline-offset: 3px; font-size: 12.5px; display: block; margin-top: 6px; }
.line h4 a { color: inherit; text-decoration: none; }
.line.is-problem, .co-line.is-problem { background: rgb(var(--eam-oxblood-rgb) / .04); }
.qty button:disabled, .co-qty button:disabled { opacity: .3; cursor: not-allowed; }
.drawer-notice { margin: 0 0 14px; padding: 10px 12px; font-size: 13px; background: rgb(var(--eam-oxblood-rgb) / .06); color: var(--vp-ink); }
.drawer-empty a { color: inherit; text-underline-offset: 3px; }
.co-terms { margin: 12px 0 0; font-size: 12.5px; opacity: .8; }
.co-terms a { color: inherit; }

/* ── footer: the independence line ────────────────────────────────────── */
body.store .store-foot { flex-wrap: wrap; row-gap: 6px; padding-top: 14px; padding-bottom: 14px; }
.sf-affiliation {
  order: 3; flex-basis: 100%; margin: 0; font-family: var(--eam-font-body); font-size: 11.5px; line-height: 1.5;
  color: var(--eam-bone); opacity: .6;
}

/* ── cookie notice ────────────────────────────────────────────────────── */
.consent {
  position: fixed; z-index: 900; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 28px)); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  padding: 14px 16px 14px 20px; background: var(--eam-espresso); color: var(--eam-bone);
  border-radius: 16px 16px 0 0; border-bottom: 1.5px solid var(--eam-aurum);
  font-family: var(--eam-font-body); font-size: 14px; line-height: 1.4;
  box-shadow: 0 18px 50px rgb(0 0 0 / .25);
  transition: opacity 200ms ease, transform 200ms var(--eam-ease-out);
}
@starting-style { .consent { opacity: 0; transform: translate(-50%, 10px); } }
.consent.is-leaving { opacity: 0; transform: translate(-50%, 10px); }
.consent p { margin: 0; }
.consent-actions { display: flex; align-items: center; gap: 8px; }
.consent-btn {
  min-height: 40px; padding: 0 16px; border: 1px solid rgb(var(--eam-bone-rgb) / .5); background: transparent; color: var(--eam-bone);
  font-family: var(--eam-font-proof); font-size: 12px; letter-spacing: .04em; cursor: pointer; border-radius: 10px 10px 0 0;
  transition: transform 140ms var(--eam-ease-out);
}
.consent-btn.is-primary { background: var(--eam-bone); color: var(--eam-oxblood); border-color: var(--eam-bone); }
.consent-btn:active { transform: scale(0.97); }
.consent a { color: var(--eam-bone); opacity: .75; font-size: 12.5px; text-underline-offset: 3px; margin-left: 4px; }

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .pdp-buy { max-width: none; }
  .vp-sizes { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  body.store .pdp-add { max-width: none; }
  .consent { padding: 14px; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-size.is-nudged .vp-sizes, .vp-guide-dialog[open] { animation: none; }
  .vp-dot, .vp-chip > span:first-of-type, .consent, body.store .pdp-add { transition-property: opacity, background-color, color, border-color, box-shadow; }
  .vp-swatch:active .vp-dot, .vp-chip:active input + span, body.store .pdp-add:active { transform: none; }
}

/* home footer: the independence line */
.maison-affiliation { margin: 0 0 10px; max-width: 70ch; font-family: var(--eam-font-body); font-size: 12px; line-height: 1.5; color: var(--eam-bone); opacity: .65; }
.signup-note a { color: inherit; text-underline-offset: 3px; }

/* A closing scrim lets clicks through at once, not after its 0.6s fade. */
.scrim:not(.is-open) { pointer-events: none; }