/* ═══════════════════════════════════════════════════════════════════════════
   EAM — SKIN (25 Sep 2026)
   The look from the client's page designs, laid over every page: oxblood
   header and footer carrying the gold pattern, a bone ground carrying the same
   pattern, Cormorant for titles and mono for everything spoken in plain text.
   Loaded LAST on the store pages and on index.html, so it wins on order.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --eam-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --eam-pattern: url('../assets/img/eam-pattern.webp?v=2026-09-30W');
  --eam-grey: #D9D9D9;
}

/* ── ground ─────────────────────────────────────────────────────────────── */

body.store {
  font-family: var(--eam-font-proof);
  font-size: 15px; line-height: 1.7;
  color: var(--eam-oxblood);
  background:
    var(--eam-pattern) center / cover no-repeat fixed,
    var(--eam-pattern) center / cover no-repeat fixed,
    var(--eam-bone);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
/* #shopbar (js/shop.js) is always position:fixed, unlike the old .eam-bar it
   replaced here, which was position:sticky and so needed no offset of its
   own — without this the fixed bar sat on top of the page rather than
   above it. Matches the bar's height below. */
body.store .store-main { flex: 1; width: 100%; margin-top: 52px; }
body.store h1, body.store h2, body.store h3 { font-family: var(--eam-font-display); font-weight: 400; }

/* ── header (store pages) ───────────────────────────────────────────────── */

.eam-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  height: 64px; padding: 0 clamp(18px, 3vw, 40px);
  background: var(--eam-pattern) center top / cover no-repeat, var(--eam-oxblood);
  color: var(--eam-bone);
  border-radius: 0 0 18px 18px;
  font-family: var(--eam-ui); font-size: 15px;
}
.eb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  color: inherit; text-decoration: none; opacity: .95;
  transition: opacity .3s ease;
}
.eb-btn:hover, .eb-btn:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.eb-btn svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.eb-right { margin-left: auto; }
.eb-btn .bag-n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--eam-aurum); color: var(--eam-oxblood);
  font-size: 11px; font-weight: 500; line-height: 1;
}
.eb-btn .bag-n.is-zero { display: none; }

.eam-bar--cream {
  background: var(--eam-pattern) center top / cover no-repeat, var(--eam-bone);
  color: var(--eam-oxblood);
}

/* ── header (index: the shop's own bar) ─────────────────────────────────── */

#shopbar { font-family: var(--eam-ui); transition: background-color .4s ease, border-radius .4s ease; 
  height: 52px; padding-top: 0; padding-bottom: 0; }
/* Over the film (not yet is-solid): the Figma bar is exactly 52px, an oxblood
   wash that starts dense at the top edge and thins out to the bar's own bottom
   edge, carrying the lattice pattern. Previously the wash ran 170% of the bar
   and faded to nothing, which read as a grey-blue smear over the photo. */
#shopbar:not(.is-solid)::before {
  height: 100%;
  /* Figma fill: linear, #4A1620 at 100% opacity -> #B0344C at 0% opacity. */
  background: linear-gradient(180deg, #4A1620 0%, rgb(176 52 76 / 0) 100%);
}
#shopbar .sb-btn { font-family: var(--eam-ui); font-size: 15px; letter-spacing: 0; text-transform: none; opacity: .95; }
/* Figma "Desktop - 1" nav: Inter 400 15px / line-height 100%, #F7F4EF; icons
   drawn at their own sizes (menu 18x12, search 14, account 19, bag 15x16),
   6-7px from their label, 15-16px between items, 43px side inset at 1440. */
#shopbar { gap: 15px; padding-left: clamp(14px, 3vw, 44px); padding-right: clamp(14px, 3vw, 44px); }
#shopbar .sb-btn { gap: 7px; line-height: 1; font-weight: 400; color: var(--eam-bone); }
#shopbar .sb-btn svg {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: butt; stroke-linejoin: round; flex: none;
}
#shopbar .sb-btn svg.ic-menu { width: 18px; height: 12px; stroke-width: 1.3; }
#shopbar .sb-btn svg.ic-search { width: 14px; height: 14px; stroke-linecap: round; stroke-width: 1.7; }
#shopbar .sb-btn svg.ic-account { width: 19px; height: 19px; stroke-width: 1.3; }
#shopbar .sb-btn svg.ic-bag { width: 14px; height: 16px; stroke: none; }
#shopbar .sb-btn svg.ic-bag .ic-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#shopbar .sb-btn svg.ic-bag .ic-fill { fill: currentColor; stroke: none; }
#shopbar .bag-count { border: 0; background: var(--eam-aurum); color: var(--eam-oxblood); }
/* The solid, patterned bar from the designs: past the film on index.html,
   and always on store.html and its siblings (no film behind them). Sizes
   and the aurum hairline along the bottom edge are measured off the Figma
   frames, not guessed. */
#shopbar.is-solid,
body.store #shopbar {
  background: var(--eam-oxblood);
  border-radius: 0 0 13px 13px; height: 52px; padding-top: 0; padding-bottom: 0;
  border-bottom: 1.5px solid var(--eam-aurum);
}
#shopbar.is-solid::before,
body.store #shopbar::before { display: none; }

/* The centre mark: the gold monogram, on every page. */
.sb-monogram {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.sb-monogram img { display: block; width: 45px; height: auto; }
/* Over the film the centre mark is the ETHOS AURUM / MAISON wordmark with the
   "Store Now" link under it (Figma node 13-28); once the bar goes solid
   (scroll, or any store page) it collapses to the gold monogram. */
.sb-monogram img.sb-mark-word { display: block; height: 26px; width: auto; }
.sb-storenow {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  font-family: var(--eam-font-display); font-size: 11px; letter-spacing: .04em;
  color: var(--eam-bone); text-decoration: none; opacity: .9;
  border-top: 1px solid rgb(244 236 224 / .7); padding-top: 1px; line-height: 1.1;
}
#shopbar:not(.is-solid) .sb-mark-icon,
#shopbar.is-solid .sb-mark-word,
body.store #shopbar .sb-mark-word,
#shopbar.is-solid .sb-storenow,
body.store #shopbar .sb-storenow { display: none; }
#shopbar:not(.is-solid) .sb-monogram { top: 40%; }
body.store #shopbar .sb-mark-icon { display: block; }
/* The monogram is now the bar's first <a>, which steals the
   ".sb-right:first-of-type { margin-left: auto }" push from Account. */
#shopbar .sb-storenow + .sb-right { margin-left: auto; }

/* ── footer (store pages) ───────────────────────────────────────────────── */

.store-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 3vw, 40px);
  background: var(--eam-pattern) center / cover no-repeat, var(--eam-oxblood);
  color: var(--eam-bone); text-align: left;
  border-radius: 22px 22px 0 0;
}
.store-foot img { width: clamp(160px, 14vw, 220px); height: auto; opacity: .9; }
.sf-legal { font-family: var(--eam-font-display); font-size: 13px; letter-spacing: .01em; line-height: 1.8; opacity: .6; }
.sf-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ── buttons ────────────────────────────────────────────────────────────── */

body.store .btn {
  font-family: var(--eam-font-proof); font-size: 15px; letter-spacing: .02em;
  padding: 20px 56px; border-radius: 16px 16px 0 0; min-width: 260px;
}
body.store .btn.primary { background: var(--eam-oxblood); color: var(--eam-bone); border-color: var(--eam-oxblood); }
body.store .btn.block { min-width: 0; }

/* ── empty states, headings ─────────────────────────────────────────────── */

.store-empty h1, .co-empty h1 { font-size: clamp(38px, 4.4vw, 64px); margin: 0 0 18px; color: var(--eam-oxblood); }
.store-empty p, .co-empty p { font-size: clamp(15px, 1.3vw, 19px); opacity: 1; margin: 0 0 40px; }
.room-head .k, .shop-head .proof, .shop-count, .crumb {
  font-family: var(--eam-font-proof); text-transform: none; letter-spacing: 0; font-size: 15px; opacity: 1; color: inherit;
}
.crumb a { color: inherit; }
.room-head h1 { font-size: clamp(40px, 4.6vw, 68px); color: var(--eam-oxblood); }
.room-head p { opacity: 1; font-size: 15px; }

/* ── cards: plain grey plates, mono caption, serif name ─────────────────── */

/* Was flat grey (#D9D9D9), which sat as a solid block over the patterned
   ground behind it. Transparent + a hairline border lets the pattern read
   straight through, on bone or store pages; the dark vault rooms below
   keep their own grey (there's nothing behind them worth revealing). */
.piece-card-plate, .pcard-plate { background: transparent; border: 2px solid var(--eam-aurum); }
.piece-card:hover .piece-card-plate { border-color: var(--eam-aurum); }
.piece-card-mark, .pcard-initial { display: none; }
.piece-card-house, .pcard-house {
  font-family: var(--eam-font-proof); font-size: 14px; letter-spacing: 0;
  text-transform: none; opacity: 1;
}
.piece-card-name, .pcard-name { font-family: var(--eam-font-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; margin: 6px 0 8px; }
.piece-card-price, .pcard-price {
  font-family: var(--eam-font-proof); font-size: 15px; letter-spacing: 0; opacity: 1;
}
.piece-card-mode, .pcard-mode { font-size: 14px; letter-spacing: 0; text-transform: none; opacity: 1; }

/* ── The Edit (index) ───────────────────────────────────────────────────── */

#shop {
  background: var(--eam-pattern) 0 0 / 1000px auto repeat, var(--eam-pattern) 0 0 / 1000px auto repeat, var(--eam-bone);
  color: var(--eam-oxblood);
  /* the same 1.5px aurum hairline the footer ends on, where the film hands over to the shop */
  border-top: 1.5px solid var(--eam-aurum);
}
.shop-head h2 { font-size: clamp(34px, 3.4vw, 48px); font-weight: 400; }
.shop-head .rule { display: none; }
.pgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(24px, 4vw, 64px); }
.pcard-body { padding-top: 22px; }
#shop .shop-mode { display: none; }
.enter-cue { display: none; }

/* ── bag drawer ─────────────────────────────────────────────────────────── */

.scrim {
  background: var(--eam-pattern) center / cover no-repeat, var(--eam-oxblood);
  backdrop-filter: none;
}
.drawer {
  background: var(--eam-pattern) center / cover no-repeat, var(--eam-pattern) center / cover no-repeat, var(--eam-bone);
  color: var(--eam-oxblood);
  border-radius: 24px 0 0 24px;
  border: 1.5px solid var(--eam-aurum); border-right: 0;
  font-family: var(--eam-font-proof);
}
.drawer-head { border-bottom: 0; padding-top: 36px; flex-wrap: wrap; row-gap: 26px; }
.drawer-head .panel-mark { order: 0; flex: 1; }
.drawer-head .icon-btn { order: 1; }
.drawer-head h2 { order: 2; flex-basis: 100%; }
.drawer-head h2 { font-size: clamp(32px, 3vw, 44px); letter-spacing: 0; font-weight: 400; }
.drawer-empty { font-size: 15px; opacity: 1; display: grid; place-items: center; height: 100%; padding: 0; }
.drawer-foot { border-top: 0; }
.drawer-foot .btn {
  border-radius: 0; background: transparent; color: var(--eam-oxblood);
  border: 1px solid var(--eam-oxblood); min-width: 0; padding: 18px 20px; font-size: 14px; text-transform: none;
}
.drawer-foot .btn::after { display: none; }
.drawer-foot .btn:hover { background: var(--eam-oxblood); color: var(--eam-bone); }
.drawer-note { opacity: 1; font-size: 14px; }
.subtotal .proof { text-transform: none; letter-spacing: 0; font-size: 14px; }
.subtotal b { font-family: var(--eam-font-proof); font-size: 14px; }

/* ── the piece page: oxblood, cream type ────────────────────────────────── */

body.store.is-dark {
  color: var(--eam-bone);
  background:
    var(--eam-pattern) center / cover no-repeat fixed,
    var(--eam-oxblood);
}
.is-dark .crumb, .is-dark .crumb a, .is-dark .pdp-house { color: var(--eam-bone); }
.is-dark .pdp-name { color: var(--eam-bone); font-size: clamp(44px, 5vw, 76px); }
.is-dark .pdp-frame, .is-dark .pdp-thumb { background: var(--eam-grey); border: 0; }
.is-dark .pdp-frame img.is-mark, .is-dark .pdp-thumb img.is-mark { display: none; }
.is-dark .pdp-facts dt { font-family: var(--eam-font-display); font-size: 17px; opacity: .85; }
.is-dark .pdp-facts dd { font-family: var(--eam-font-proof); font-size: 15px; }
.is-dark .hair { background: var(--eam-aurum); }
.is-dark .btn { border-color: var(--eam-bone); color: var(--eam-bone); }
.is-dark .btn::after { background: var(--eam-bone); }
.is-dark .btn:hover { color: var(--eam-oxblood); }
.is-dark .btn.primary { background: var(--eam-bone); color: var(--eam-oxblood); border-color: var(--eam-bone); }
.is-dark .btn.primary::after { background: var(--eam-alabaster, #EFE9DE); }
.is-dark .btn.primary:hover { color: var(--eam-oxblood); }
.is-dark .piece-card-plate { background: var(--eam-grey); }

/* ── the big footer (index) ─────────────────────────────────────────────── */

/* Sits directly behind #house's rounded top corners, bone against body's
   espresso, so the two corner triangles the curve cuts away read as a
   continuation of #shop just above rather than a dark notch. Same height as
   the radius and pulled back up by its own height (negative margin), so it
   takes no space of its own — #house simply paints over the middle of it. */
#house-backdrop {
  position: relative; z-index: 1;
  height: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(-56px, -4vw, -28px);
  background: var(--eam-bone);
}

#house {
  position: relative; z-index: 2;
  background: var(--eam-pattern) center / cover no-repeat, var(--eam-oxblood);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  padding-top: clamp(60px, 8vh, 110px);
}
#house .maison-col .proof {
  font-family: var(--eam-font-display); font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--eam-aurum);
}
#house .maison-grid h3 { font-family: var(--eam-font-display); font-size: clamp(30px, 3vw, 42px); font-weight: 400; }
#house p, #house li { font-family: var(--eam-font-proof); font-size: 14px; opacity: 1; }
.signup { margin: 30px auto 0; }
.signup input { font-family: var(--eam-font-display); font-size: 15px; border-right: 0; }
.signup button { font-family: var(--eam-font-display); font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.signup-note { text-align: center; font-family: var(--eam-font-proof); }
/* Redesigned 29 Sep 2026 — was five bare outline icons floating on the
   footer with no frame; now a circle each, filling gold on hover/focus, in
   the same vocabulary as the room-door tag and the Return-to-the-Maison
   pill elsewhere on the page. */
.maison-social { display: flex; gap: 12px; margin-top: 26px; }
.maison-social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgb(from var(--eam-bone) r g b / .35);
  color: var(--eam-bone);
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
.maison-social svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.maison-social a:hover, .maison-social a:focus-visible {
  background: var(--eam-aurum); border-color: var(--eam-aurum); color: var(--eam-oxblood);
  transform: translateY(-3px);
}
.maison-social a:hover svg, .maison-social a:focus-visible svg { transform: scale(1.1); }
.maison-links-row {
  max-width: 1280px; margin: clamp(40px, 6vh, 70px) auto 0;
  display: flex; justify-content: center; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap;
  font-family: var(--eam-font-display); font-size: 17px;
}
.maison-links-row a { color: var(--eam-bone); text-decoration: none; }
.maison-links-row a:hover { text-decoration: underline; text-underline-offset: 4px; }
#house .maison-foot { border-top: 1px solid rgba(247,244,239,.45); justify-content: center; text-align: center; }
#house .maison-foot img { margin-right: auto; }
#house .maison-foot .proof {
  font-family: var(--eam-font-display); font-size: 17px; letter-spacing: 0; text-transform: none; opacity: .95;
}
#house .maison-foot .proof a { border: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ── refinements after first pass ───────────────────────────────────────── */
.piece-card-plate img.piece-card-mark, .pcard-plate img.is-mark { display: none; }
.piece-card-note { display: none; }
body.store:not(.is-dark) .crumb { display: none; }
.is-dark .crumb { opacity: .8; }
body.store.is-dark .btn.primary { background: var(--eam-bone); color: var(--eam-oxblood); border-color: var(--eam-bone); }
body.store.is-dark .btn.primary:hover { color: var(--eam-oxblood); }

.pcard-plate.is-blank { background: transparent; border: 2px solid var(--eam-aurum); }
.bag-count.is-zero { display: none; }
.scrim { z-index: 950; }
.drawer { z-index: 960; }

/* ── the gold wordmark heading every side panel (menu, bag, room) ─────── */
.panel-mark {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1;
  font-family: var(--eam-font-display); text-transform: uppercase; color: var(--eam-aurum);
}
.panel-mark .pm-name { font-size: 22px; font-weight: 400; letter-spacing: .04em; }
.panel-mark .pm-sub { font-size: 8px; font-weight: 500; letter-spacing: .5em; margin-top: 5px; padding-left: 2.6em; }

/* ═══ THE ROOM PANEL — products, from the designs ═══════════════════════ */
.room-panel {
  width: clamp(380px, 36vw, 640px);
  background: var(--eam-pattern) center / cover no-repeat, var(--eam-pattern) center / cover no-repeat, var(--eam-bone);
  color: var(--eam-oxblood);
  border-radius: 24px 0 0 24px;
  border: 1.5px solid var(--eam-aurum); border-right: 0;
  box-shadow: none;
  display: flex; flex-direction: column;
  padding: clamp(96px, 15vh, 180px) clamp(28px, 3.4vw, 64px) 40px;
  font-family: var(--eam-font-proof);
}
.room-panel-head { margin-bottom: 18px; padding-bottom: 20px; border-bottom: 1px solid rgb(from var(--eam-aurum) r g b / .5); }
.room-panel-head .panel-mark { margin-bottom: 26px; }
.room-panel-head i { display: none; }
.room-panel-head h2 { font-size: clamp(32px, 2.8vw, 46px); letter-spacing: 0; line-height: 1.05; }
.room-panel-head p { opacity: 1; font-size: 15px; max-width: none; margin-top: 22px; }
.room-panel-list { flex: 0 0 auto; }
.room-row { grid-template-columns: clamp(68px, 6vw, 88px) 1fr; padding: 13px 0; border-top: 0; }
.room-row-plate { background: transparent; border: 1.5px solid var(--eam-aurum); }
.room-row-mark { display: none; }
.room-row-house { font-size: 12px; letter-spacing: 0; text-transform: none; opacity: 1; }
.room-row-name { font-size: clamp(18px, 1.6vw, 24px); margin: 4px 0 3px; }
.room-row-price { font-family: var(--eam-font-proof); font-size: 13px; opacity: 1; }
.room-row-mode { font-size: 12px; letter-spacing: 0; text-transform: none; opacity: .8; margin-top: 2px; }
.room-panel-more {
  margin-top: auto; padding-top: 28px; border-top: 0;
  display: inline-flex; align-items: center; gap: 18px;
  font-size: 15px; letter-spacing: .04em; opacity: 1;
}
.room-arrow { width: 40px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; }
.room-panel-empty { font-size: 15px; opacity: 1; }

/* ═══ THE SIDE MENU — a third of the page, the rest stays in view ══════ */
#menu-panel {
  inset: 0 auto 0 0; width: clamp(340px, 33vw, 560px);
  background: var(--eam-pattern) center / cover no-repeat, var(--eam-pattern) center / cover no-repeat, var(--eam-bone);
  color: var(--eam-oxblood);
  border-radius: 0 24px 24px 0;
  border: 1.5px solid var(--eam-aurum); border-left: 0;
  box-shadow: 0 0 0 200vmax rgb(74 22 32 / .55);
  font-family: var(--eam-font-body);
}
#menu-panel .panel-head { position: static; background: transparent; border-bottom: 0; padding: 34px clamp(24px, 4.2vw, 64px) 0; }
#menu-panel .panel-close { color: var(--eam-oxblood); }
#menu-panel .panel-body { padding: clamp(36px, 8vh, 96px) clamp(24px, 4.2vw, 64px) 60px; }
#menu-panel .menu-lead { border-bottom: 1px solid rgb(from var(--eam-aurum) r g b / .5); padding-bottom: 24px; margin-bottom: 36px; }
#menu-panel .menu-lead-name { font-size: clamp(34px, 3vw, 46px); font-weight: 400; }
#menu-panel .menu-lead-n { font-family: var(--eam-font-body); font-size: 15px; letter-spacing: 0; text-transform: none; opacity: 1; margin-top: 10px; }
#menu-panel .menu-block { margin-bottom: 44px; }
#menu-panel .menu-block h3 {
  font-family: var(--eam-font-display); font-size: clamp(28px, 2.4vw, 36px); opacity: 1;
  margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid rgb(from var(--eam-aurum) r g b / .5);
  text-transform: none; letter-spacing: 0;
}
#menu-panel .menu-block li + li { border-top: 0; }
#menu-panel .menu-block a { font-size: 17px; padding: 13px 0; opacity: 1; }
#menu-panel .menu-strong { font-family: var(--eam-font-body); font-size: 17px !important; }
#menu-panel .menu-n { font-size: 14px; letter-spacing: 0; opacity: 1; }
#menu-panel .menu-quiet a { font-size: 17px; opacity: 1; }
.room-row-plate img.room-row-mark { display: none; }
.room-panel { z-index: 940; }

/* ── account: order timeline ───────────────────────────────────────────── */
.acct-order--rich{display:block}
.acct-order--rich .ord-top{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
.ord-items{margin:10px 0 0;opacity:.75;font-size:14px}
.ord-track{margin:6px 0 0;font-size:13px}
.ord-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ord-step{opacity:.4;position:relative;padding-left:16px}
.ord-step::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;border:1px solid currentColor}
.ord-step.is-done{opacity:.75}.ord-step.is-done::before{background:currentColor}
.ord-step.is-now{opacity:1;font-weight:600;color:#4A1620}.ord-step.is-now::before{background:#4A1620;border-color:#4A1620}

/* credit link: no underline */
.sf-legal a[href*="soldev"], .proof a[href*="soldev"], a[href*="soldev.tech"] { text-decoration: none !important; border-bottom: 0 !important; }

/* scrolling inside a side panel never chains to the page underneath */
.room-panel, .drawer-body, .panel, #menu-panel { overscroll-behavior: contain; }

/* ── the cursor: a clothes hanger ─────────────────────────────────────────
   Fine pointers only (a mouse or trackpad — touch screens have no cursor).
   White body, gold (aurum) outline, with a thin white halo so it reads on
   both the dark film and the bone pages. Over anything clickable the outline
   deepens and it tips. */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%224.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 13.2V10.6a2.9 2.9 0 1 0-2.9-2.9%22/%3E%3Cpath d=%22M16 13.2 4.2 21.4a1.7 1.7 0 0 0 1 3.1h21.6a1.7 1.7 0 0 0 1-3.1Z%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%23B79A5C%22 stroke-width=%222.1%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 13.2V10.6a2.9 2.9 0 1 0-2.9-2.9%22/%3E%3Cpath d=%22M16 13.2 4.2 21.4a1.7 1.7 0 0 0 1 3.1h21.6a1.7 1.7 0 0 0 1-3.1Z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 14 4, auto; }
  a, button, [role="button"], summary, label[for], select, .portal, .door, .room-row, input[type="submit"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg transform=%22rotate%28-12 16 16%29%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%224.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 13.2V10.6a2.9 2.9 0 1 0-2.9-2.9%22/%3E%3Cpath d=%22M16 13.2 4.2 21.4a1.7 1.7 0 0 0 1 3.1h21.6a1.7 1.7 0 0 0 1-3.1Z%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%238f7038%22 stroke-width=%222.1%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 13.2V10.6a2.9 2.9 0 1 0-2.9-2.9%22/%3E%3Cpath d=%22M16 13.2 4.2 21.4a1.7 1.7 0 0 0 1 3.1h21.6a1.7 1.7 0 0 0 1-3.1Z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 14 4, pointer !important;
  }
  input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="tel"], textarea { cursor: text !important; }
}

/* ═══ FOOTER — Figma "The House" frame (1440 × ~400) ═════════════════════
   Measured off the frame: labels Cormorant 14 gold; heading Cormorant 24;
   running text Source Serif 4 ~11.5px, 1.3 leading, .1em tracking; columns
   start at x=43 / 561 / 1076; the form and its note are centred on the
   page; links row centred; wordmark left with the hairline running from
   beside it to x=1240 and the credit (gold) right-aligned beneath it. */
#house { padding-top: 22px; padding-bottom: 51px; padding-left: 40px; padding-right: 40px; }
#house .maison-grid { max-width: none; gap: 0; }
#house .maison-col .proof { font-size: 15px; margin-bottom: 0; line-height: 1.2; }
#house .maison-grid h3 { font-size: 24px; line-height: 1.15; margin: 10.7px 0 0; }
#house .maison-grid p, #house .maison-col li {
  font-family: var(--eam-font-body); font-size: 12px; line-height: 15px; font-weight: 400;
  letter-spacing: .1em; opacity: 1; max-width: 336px; margin: 22px 0 0; color: #fff; text-align: justify;
}
#house .maison-col:nth-child(2) p:first-of-type { margin-top: 47.9px; }
#house .maison-col:nth-child(2) .proof { display: block; margin-top: 4.6px; }
#house .maison-col ul { gap: 0; margin-top: 52.5px; }
#house .maison-col li { margin: 0; max-width: none; text-align: left; }
#house .maison-col:nth-child(n+2) p { max-width: 325px; }
#house .maison-col li::before { content: "\2022\00a0"; }
#house .maison-col:nth-child(1) h3 + p { margin-top: 14.2px; }

#house .signup { max-width: 235px; margin: 32px 0 0 42px; height: 39px; }
#house .signup input {
  font-size: 12px; padding: 0 16px; border-radius: 15px 0 0 0; text-align: center;
  border-color: var(--eam-bone); color: var(--eam-bone);
}
#house .signup input::placeholder { color: var(--eam-bone); opacity: 1; }
#house .signup button {
  width: 86px; padding: 0; font-size: 14px; letter-spacing: .02em; border-radius: 0 15px 0 0;
}
#house .maison-grid p.signup-note {
  font-family: var(--eam-font-body); font-size: 10px; letter-spacing: 0; opacity: 1; color: #fff;
  width: 235px; max-width: none; margin: 16.7px 0 0 42px; text-align: center; white-space: nowrap;
}

#house .maison-social { gap: 27px; margin-top: 36px; align-items: center; }
#house .maison-social a {
  width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--eam-bone);
}
#house .maison-social svg { width: 24px; height: 24px; stroke-width: 1.6; }
#house .maison-social a[aria-label="Email"] svg { width: 30px; height: 30px; }
#house .maison-social a[aria-label="Facebook"] circle,
#house .maison-social a[aria-label="LinkedIn"] rect { fill: currentColor; }
#house .maison-social a[aria-label="Facebook"] path,
#house .maison-social a[aria-label="LinkedIn"] path { stroke: var(--eam-oxblood); }
#house .maison-social a:hover, #house .maison-social a:focus-visible {
  background: none; border-color: transparent; color: var(--eam-aurum); transform: translateY(-2px);
}

#house .maison-links-row {
  max-width: none; margin: 30px 0 0; gap: 40px; font-size: 15px; line-height: 1;
}
#house .maison-foot {
  max-width: none; margin: 9.3px 0 0; padding: 0; border-top: 0;
  display: flex; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 43px;
}
#house .maison-foot img { width: 160px; margin: 0; opacity: 1; flex: none; }
/* The figures in the credit line ("2026", the RC number) use Google's Cormorant
   Garamond (the same family as the rest of the line, loaded from Google Fonts)
   with lining figures switched on: the frame's credit line is 439px wide, which
   only works out with lining digits; the default old-style ones are ~4px short. */
/* 30 Sep 2026: the credit-line numbers (© 2026, RC 9606536) are set in the designer's
   Source Serif Pro Regular (assets/fonts/source-serif-pro-400.woff2), not Cormorant. */
.fnum { font-family: 'Source Serif Pro', Georgia, serif; font-weight: 400; font-variant-numeric: lining-nums; }
#house .maison-foot .proof {
  flex: 1; margin: 12px calc(10.9vw) 0 0; padding-top: 26px; text-align: right;
  border-top: 1px solid var(--eam-bone);
  font-family: var(--eam-font-display); font-weight: 400; font-size: 15px; line-height: 1; color: var(--eam-aurum); opacity: 1;
}
@media (min-width: 901px) {
  #house .maison-grid { grid-template-columns: 520fr 515fr 325fr; }
}
@media (max-width: 900px) {
  /* No mobile frames in the Figma file — the desktop frame, restacked: one
     column, the same type scale, form and icons unchanged in size. */
  #house { padding: 34px 24px 36px; }
  #house .maison-col + .maison-col { margin-top: 34px; }
  #house .maison-grid p, #house .maison-col:nth-child(n+2) p { max-width: none; margin-top: 14px; }
  #house .maison-col:nth-child(2) p:first-of-type, #house .maison-col:nth-child(1) h3 + p { margin-top: 14px; }
  #house .maison-grid h3 { margin-top: 10px; }
  #house .maison-col ul { margin-top: 14px; }
  #house .signup { margin: 22px 0 0; max-width: 320px; width: 100%; }
  #house .maison-grid p.signup-note { margin: 14px 0 0; width: 100%; max-width: 320px; white-space: normal; }
  #house .maison-social { margin-top: 26px; gap: 24px; }
  #house .maison-links-row { justify-content: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 38px; font-size: 15px; }
  #house .maison-foot { flex-direction: column; align-items: center; gap: 0; margin-top: 34px; }
  #house .maison-foot img { width: 150px; }
  #house .maison-foot .proof {
    margin: 22px 0 0; width: 100%; text-align: center; padding-top: 22px; font-size: 14px; line-height: 1.3;
  }
}

@media (max-width: 480px) {
  #shopbar { gap: 12px; }
  .sb-monogram img.sb-mark-word { height: 21px; }
  .sb-storenow { font-size: 10px; bottom: 5px; }
  #shopbar .sb-btn svg.ic-account { width: 20px; height: 20px; }
}

/* ═══ THE PIECE — Figma "Loulou" frame (1440 wide) ═══════════════════════
   Measured off the prototype: photo 236 wide at x=127, detail column at
   x=394; title Cormorant 48; category / description / price Source Serif 14
   semibold in oxblood; lead time Cormorant 14; House/Condition/Delivery rows
   41px apart, label Cormorant 14 / value Source Serif 14; the rest of the
   room is five 194 × 237 plates, 20px apart, captioned Cormorant 14 + a 10px
   category line, with no heading, price or heart. Footer is one 60px bar. */
body.piece-page .store-main {
  max-width: none; margin: 0; padding: 68px 60px 70px clamp(18px, 8.8vw, 127px);
}
body.piece-page .pdp, body.piece-page .pdp-more { max-width: 1050px; }
body.piece-page .pdp { grid-template-columns: 236px minmax(0, 1fr); gap: 31px; }
body.piece-page .pdp-thumbs { grid-template-columns: repeat(auto-fill, 74px); gap: 7px; margin-top: 8px; }
body.piece-page .pdp-thumb { aspect-ratio: 74 / 89; }
body.piece-page .pdp-frame { aspect-ratio: 236 / 290; }

body.piece-page .pdp-house { display: none; }
body.piece-page .pdp-name { font-size: 50px; line-height: 1; margin: 0 0 22px; color: var(--eam-oxblood); }
body.piece-page .pdp-cat.proof,
body.piece-page .pdp-note,
body.piece-page .pdp-price {
  font-family: var(--eam-font-body); font-size: 15px; font-weight: 400; letter-spacing: 0;
  text-transform: none; line-height: 1.35; opacity: 1; color: var(--eam-oxblood); max-width: none;
}
/* The price is Cormorant with lining figures in the frame (₦5,500,000), not
   the running serif; the lead-time line under it is Cormorant with the
   old-style figures ("2–4"). Widths of all four were checked against the
   prototype at 600%. */
body.piece-page .pdp-price {
  font-family: var(--eam-font-display); font-weight: 500; font-variant-numeric: lining-nums;
}
body.piece-page .pdp-cat.proof { margin: 0 0 12px; }
body.piece-page .pdp-note { margin: 0 0 12px; }
body.piece-page .pdp-price { margin: 0 0 10px; }
body.piece-page .pdp-price .approx { font-weight: 400; font-size: 12px; opacity: .6; }
body.piece-page .pdp-lead.proof {
  font-family: var(--eam-font-display); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
  opacity: 1; margin: 0 0 40px;
}
body.piece-page .pdp-cta-note { font-family: var(--eam-font-body); font-size: 12px; opacity: .6; }

body.piece-page .pdp-facts > div { grid-template-columns: 88px 1fr; gap: 0; padding: 0; height: 41px; align-items: center; border-top: 0; }
body.piece-page .pdp-facts dt {
  font-family: var(--eam-font-display); font-size: 15px; letter-spacing: 0; text-transform: none; opacity: 1; padding: 0;
}
body.piece-page .pdp-facts dd { font-family: var(--eam-font-body); font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--eam-oxblood); }

body.piece-page .pdp-more { margin-top: 64px; }
body.piece-page .pdp-more-head { display: none; }
body.piece-page .pdp-more-grid { grid-template-columns: repeat(auto-fill, 194px); gap: 22px 20px; }
body.piece-page .pdp-more-grid .piece-card-plate { aspect-ratio: 194 / 237; }
/* Figma shows one row of five. */
body.piece-page .pdp-more-grid .piece-card:nth-child(n+6) { display: none; }
body.piece-page .pdp-more-grid .fav-toggle,
body.piece-page .pdp-more-grid .piece-card-house,
body.piece-page .pdp-more-grid .piece-card-price { display: none; }
body.piece-page .pdp-more-grid .piece-card-body { padding-top: 8px; }
body.piece-page .pdp-more-grid .piece-card-name {
  font-family: var(--eam-font-display); font-size: 14px; font-weight: 400; margin: 0; line-height: 1.15; color: var(--eam-oxblood);
}

/* One slim line that never wraps down to ~1100px, with the aurum hairline along
   the very bottom edge (as under the nav). */
body.store .store-foot {
  flex-wrap: nowrap; padding: 0 32px; min-height: 52px; gap: 20px;
  border-radius: 13px 13px 0 0; border-top: 0; border-bottom: 1.5px solid var(--eam-aurum);
}
body.store .store-foot img { width: 112px; opacity: 1; flex: none; }
body.store .store-foot .sf-legal {
  font-size: 14px; white-space: nowrap; line-height: 1; opacity: 1; color: var(--eam-aurum); text-align: right;
}
body.store .store-foot .sf-legal a { text-decoration: none; color: var(--eam-bone); font-family: inherit; font-size: inherit; opacity: 1; transition: color .3s ease; }
body.store .store-foot .sf-legal a:hover, body.store .store-foot .sf-legal a:focus-visible { color: var(--eam-aurum); }
@media (max-width: 900px) {
  body.piece-page .store-main { padding: 24px 22px 60px; }
  body.piece-page .pdp { grid-template-columns: 1fr; gap: 24px; }
  body.piece-page .pdp-name { font-size: 40px; }
  body.store .store-foot { flex-wrap: wrap; padding: 24px 22px; justify-content: center; text-align: center; }
  /* the desktop one-liner is nowrap; on a phone that made the whole page 523px
     wide, pushing Account/Bag off the bar and letting the page pan sideways */
  body.store .store-foot .sf-legal { text-align: center; line-height: 1.7; white-space: normal; max-width: 100%; }
}

/* ═══ SEARCH — Figma "Desktop - 7" ══════════════════════════════════════
   The panel is the patterned oxblood page with a bone bar across the top
   (the same 52px bar as the site's, rounded underneath and edged in aurum):
   magnifier + "Search the house" on the left, the gold monogram at the
   centre. Below it a single row — magnifier, then the field, a hairline
   under it from x=94 to x=1054. The hits list under that. */
#search-panel { background: var(--eam-pattern) center / cover no-repeat, var(--eam-oxblood); }
#search-panel .panel-head {
  position: relative; height: 52px; padding: 0 43px; border-bottom: 1.5px solid var(--eam-aurum);
  background: var(--eam-pattern) center top / cover no-repeat, var(--eam-bone);
  color: var(--eam-oxblood); border-radius: 0 0 13px 13px;
}
#search-panel .sp-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--eam-font-body); font-size: 14px; font-weight: 500; line-height: 1; color: var(--eam-oxblood);
}
#search-panel .sp-ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#search-panel .sp-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 45px; height: auto; }
#search-panel .panel-close { color: var(--eam-oxblood); font-size: 24px; opacity: .8; }

#search-panel .search-field {
  position: relative; padding: 0; margin: 80px 43px 0 clamp(70px, 6.5vw, 94px); max-width: 960px;
}
#search-panel .sf-ico {
  position: absolute; left: -22px; top: 6.6px; width: 12px; height: 12px;
  fill: none; stroke: rgb(var(--eam-bone-rgb) / .65); stroke-width: 1.7; stroke-linecap: round;
}
#search-panel #search-input {
  font-family: var(--eam-font-body); font-size: 14px; font-weight: 400; line-height: 18px;
  padding: 0 0 22px; color: var(--eam-bone);
  border-bottom: 1px solid rgb(var(--eam-bone-rgb) / .4);
}
#search-panel #search-input::placeholder { color: rgb(var(--eam-bone-rgb) / .6); }
#search-panel #search-input:focus { border-bottom-color: var(--eam-aurum); }
#search-panel .search-results { padding: 14px 43px 90px clamp(70px, 6.5vw, 94px); max-width: calc(960px + clamp(70px, 6.5vw, 94px) + 43px); }
#search-panel .search-row { padding: 14px 0; border-bottom: 1px solid rgb(var(--eam-bone-rgb) / .18); }
#search-panel .sr-house { font-family: var(--eam-font-display); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--eam-aurum); opacity: 1; min-width: 14ch; }
#search-panel .sr-name { font-family: var(--eam-font-body); font-size: 14px; }
#search-panel .sr-right { font-family: var(--eam-font-display); font-size: 15px; letter-spacing: 0; opacity: .8; }
#search-panel .search-empty { font-family: var(--eam-font-body); font-size: 14px; }
@media (max-width: 700px) {
  #search-panel .panel-head { padding: 0 20px; }
  #search-panel .search-field { margin: 56px 20px 0 44px; }
  #search-panel .search-results { padding: 14px 20px 80px 44px; }
}

/* ═══ MENU — Figma "Desktop - 10" ════════════════════════════════════════
   Patterned bone side panel, ~522 wide, rounded on the right. Gold wordmark
   at the top; "The Store" (Cormorant 30) with a one-line subtitle; then the
   blocks "Shop by Room." / "Cannot find it?" / "The house" — Cormorant 25
   headings over a hairline, rows in Source Serif 15 on a 39px pitch. No
   counts beside the rooms. */
#menu-panel .menu-brand {
  display: block; width: 160px; height: 32px; background: var(--eam-aurum);
  -webkit-mask: url('../assets/img/eam-wordmark-locked.svg') left center / contain no-repeat;
          mask: url('../assets/img/eam-wordmark-locked.svg') left center / contain no-repeat;
}
#menu-panel .menu-lead-name { font-size: 30px; line-height: 30px; }
#menu-panel .menu-lead-n { font-size: 15px; line-height: 20px; margin-top: -2px; }
#menu-panel .menu-lead { padding-bottom: 17px; margin-bottom: 26.5px; }
#menu-panel .menu-block { margin-bottom: 29px; }
#menu-panel .menu-block h3 { font-size: 25px; line-height: 30px; margin: 0; padding-bottom: 7px; }
#menu-panel .menu-block ul { margin-top: 12px; }
#menu-panel .menu-block a,
#menu-panel .menu-quiet a,
#menu-panel .menu-strong { font-size: 15px !important; height: 39px; padding: 0; align-items: center; }
#menu-panel .menu-n { display: none; }
@media (min-width: 701px) {
  #menu-panel {
    width: clamp(340px, 36.25vw, 580px); border-radius: 0 21px 21px 0;
  }
  #menu-panel .panel-head { padding: 51px 51px 0 94px; position: relative; }
  #menu-panel .panel-close { position: absolute; top: 22px; right: 22px; }
  #menu-panel .panel-body { padding: 63px 51px 40px 94px; }
}

/* ═══ SCROLLBAR — aurum ══════════════════════════════════════════════════
   A slim gold thumb on a bone-toned track, inset so it floats; a deeper gold
   under the pointer. Firefox gets the same colours (it can't round or inset). */
/* Chrome/Safari style it through the pseudo-elements below (setting
   scrollbar-color there would switch those off), so the standard properties
   are only for browsers without them — Firefox. */
@supports not selector(::-webkit-scrollbar) {
  html, body, .panel, .drawer-body, #menu-panel, .room-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--eam-aurum) rgb(238 232 225);
  }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgb(238 232 225 / .55); }
::-webkit-scrollbar-thumb {
  background: var(--eam-aurum); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #9C8146; background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }
.panel::-webkit-scrollbar-track, #menu-panel::-webkit-scrollbar-track, .room-panel::-webkit-scrollbar-track { background: transparent; }

/* Menu panel: no scrollbar of its own. On a short window the 12px gold thumb
   sat on top of the panel's gold edge and read as a thick bar down the side;
   the panel still scrolls (wheel / touch / keys). */
#menu-panel { scrollbar-width: none; -ms-overflow-style: none; }
#menu-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* the other full-screen panels get a slimmer thumb and no track */
.panel:not(#menu-panel)::-webkit-scrollbar { width: 8px; }

/* Menu links: the row slides in a little and turns gold (a deeper aurum, so it
   still reads on the bone ground). */
#menu-panel .menu-block a,
#menu-panel .menu-lead-name {
  transition: color .3s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
}
#menu-panel .menu-block a:hover,
#menu-panel .menu-block a:focus-visible { color: #8F7038; transform: translateX(8px); }
#menu-panel .menu-lead:hover .menu-lead-name,
#menu-panel .menu-lead:focus-visible .menu-lead-name { color: #8F7038; transform: translateX(8px); }
#menu-panel .menu-lead:hover .menu-lead-n { color: #8F7038; }
#menu-panel .menu-lead-n { transition: color .3s ease; }
@media (prefers-reduced-motion: reduce) {
  #menu-panel .menu-block a:hover, #menu-panel .menu-lead:hover .menu-lead-name { transform: none; }
}

/* ═══ BAG DRAWER — Figma "Desktop - 6" ═══════════════════════════════════
   520 wide, rounded on the left; gold wordmark, "The Bag" in Cormorant 45,
   the empty message centred in the space between (Source Serif 15); the
   foot is Subtotal / $ in Source Serif 12, the duties note, and one outlined
   326 × 56 button centred, 29px off the bottom. Everything that was set in
   Geist Mono is the running serif now. */
#bag { width: min(clamp(340px, 36.1vw, 560px), 100vw); border-radius: 25px 0 0 25px; font-family: var(--eam-font-body); }
#bag .drawer-head { padding: 47px 48px 0 32px; row-gap: 38.5px; position: relative; }
#bag .drawer-head .panel-mark {
  display: block; flex: none; width: 160px; height: 32px; margin: 0; background: var(--eam-aurum);
  -webkit-mask: url('../assets/img/eam-wordmark-locked.svg') left center / contain no-repeat;
          mask: url('../assets/img/eam-wordmark-locked.svg') left center / contain no-repeat;
}
#bag .drawer-head .panel-mark > * { display: none; }
#bag .drawer-head .icon-btn { position: absolute; top: 22px; right: 22px; color: var(--eam-oxblood); opacity: .8; }
#bag .drawer-head h2 { font-size: 45px; line-height: 45px; margin: 0; }
#bag .drawer-body { padding: 0 48px 0 32px; }
#bag .drawer-empty { font-family: var(--eam-font-body); font-size: 15px; line-height: 1.3; text-align: center; max-width: 356px; margin: 0 auto; }
#bag .drawer-foot { padding: 0 48px 29px 32px; border-top: 0; }
#bag .subtotal { display: flex; align-items: center; justify-content: space-between; height: 24px; margin: 0; }
#bag .subtotal .proof, #bag .subtotal b {
  font-family: var(--eam-font-body); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 1;
}
#bag .drawer-note { font-family: var(--eam-font-body); font-size: 12px; line-height: 16px; margin: 16px 0 0; opacity: 1; }
#bag .drawer-foot .btn {
  display: flex; align-items: center; justify-content: center;
  width: min(326px, 100%); height: 56px; padding: 0; margin: 28px auto 0;
  border-radius: 18px; font-family: var(--eam-font-body); font-size: 12px; letter-spacing: 0;
}
@media (max-width: 480px) {
  #bag .drawer-head { padding: 34px 24px 0 22px; row-gap: 28px; }
  #bag .drawer-head h2 { font-size: 38px; line-height: 38px; }
  #bag .drawer-body { padding: 0 24px 0 22px; }
  #bag .drawer-foot { padding: 0 24px 22px 22px; }
}

/* ═══ EMPTY BAG PAGE — Figma "Desktop - 12" (checkout.html with nothing in it) ═
   Centred in the space between the bar and the footer: "The bag is empty."
   Cormorant 60, two lines of Source Serif 20 on a 27px lead, then one
   446 × 67 oxblood button in Cormorant caps. */
.co-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 290px); padding: 52px 0 30px;
}
.co-empty h1 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.05; margin: 0 0 12px; font-weight: 400; }
.co-empty p {
  font-family: var(--eam-font-body); font-size: clamp(15px, 1.4vw, 20px); line-height: 1.35;
  opacity: 1; max-width: 32em; margin: 0 0 43px;
}
body.store .co-empty .btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: min(446px, 100%); height: 67px; padding: 0; min-width: 0;
  font-family: var(--eam-font-display); font-size: clamp(16px, 1.4vw, 20px); font-weight: 500;
  letter-spacing: .02em; text-transform: uppercase;
}

/* the home page's big footer gets the same aurum hairline at its bottom edge */
#house { border-bottom: 1.5px solid var(--eam-aurum); }

/* The "Add to bag" button on the piece page: Cormorant capitals like the
   Figma buttons (Enter the Maison), instead of Geist Mono. */
body.piece-page .pdp-add {
  font-family: var(--eam-font-display); font-size: 16px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
}
/* Same shape as the Figma buttons (Enter the Maison) — top corners rounded, flat
   bottom edge, label centred — at a smaller size: 236 x 48, the width of the photo. */
body.piece-page .pdp-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: min(236px, 100%); height: 48px; min-width: 0; padding: 0;
  border-radius: 12px 12px 0 0;
}

/* ═══ PRIMARY BUTTON — Figma "Enter the Maison" ══════════════════════════
   Solid oxblood, top corners rounded, flat bottom edge; Source Serif capitals;
   (no corner ornaments). */
body.store .btn.primary:not(.pdp-add):not(#bag-checkout),
body.store .pdp-add {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px 16px 0 0;
}
/* The site pattern on the button: it shows in the two bottom corners and fades
   toward the middle (four stacked layers, as the pattern itself is only a faint
   translucent gold). */
body.store .btn.primary:not(#bag-checkout)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--eam-pattern) center / cover no-repeat, var(--eam-pattern) center / cover no-repeat, var(--eam-pattern) center / cover no-repeat, var(--eam-pattern) center / cover no-repeat;
  -webkit-mask: radial-gradient(circle at 0 100%, #000 0, transparent 58%), radial-gradient(circle at 100% 100%, #000 0, transparent 58%);
          mask: radial-gradient(circle at 0 100%, #000 0, transparent 58%), radial-gradient(circle at 100% 100%, #000 0, transparent 58%);
}
/* the label sits in Source Serif capitals, as in the frame */
body.store .co-empty .btn, body.piece-page .pdp-add {
  font-family: var(--eam-font-body); font-weight: 400; letter-spacing: 0; text-transform: uppercase;
}
body.store .co-empty .btn { font-size: clamp(16px, 1.4vw, 20px); }
body.piece-page .pdp-add { font-size: 15px; letter-spacing: .02em; }

/* ═══ BAG COUNT — a gold seal on the bag icon ═══════════════════════════
   A round aurum badge pinned to the top-right of the bag glyph, ringed in the
   bar's own oxblood so it reads as cut out of the icon; the figure is
   Source Serif semibold. Pops when an item is added (.is-bumped). It replaces
   the square, unstyled box that store pages showed (they don't load maison.css). */
#shopbar #sb-bag { position: relative; }
#shopbar .bag-count {
  position: absolute; left: 11px; top: -2px;
  display: grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  border: 2px solid var(--eam-oxblood); border-radius: 999px;
  background: linear-gradient(145deg, #D4B877, var(--eam-aurum) 55%, #A38546);
  color: var(--eam-oxblood);
  font-family: var(--eam-font-body); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0;
  box-shadow: 0 1px 3px rgb(0 0 0 / .35);
  transform-origin: center; transition: transform .45s cubic-bezier(.16, .84, .32, 1);
}
#shopbar .bag-count.is-bumped { transform: scale(1.35); }
#shopbar .bag-count.is-zero { display: none; }

/* ═══ STORE / ROOM CARDS — Figma "Desktop - 2" (type scale checked at 1:1) ═══
   Heading Cormorant 25 with 9px Geist Mono label/count; plates 267 x 324, 78px
   apart, first one 71px from the edge; caption: house in Geist Mono 12, piece
   name Cormorant 25, availability and price Geist Mono 9. */
body.store:not(.piece-page) .store-main { max-width: none; margin: 0; padding-left: clamp(18px, 4.9vw, 71px); padding-right: clamp(18px, 4.9vw, 71px); }
body.store .room-head h1 { font-size: 25px; line-height: 1.15; font-weight: 400; }
body.store .room-head .k, body.store #room-count, body.store .room-head p {
  font-family: var(--eam-font-proof); font-size: 9px; letter-spacing: .04em; text-transform: none; opacity: 1; margin: 0;
}
body.store .room-grid { grid-template-columns: repeat(auto-fill, minmax(0, 267px)); gap: 44px 78px; }
body.store .room-grid .piece-card-plate { aspect-ratio: 267 / 324; }
body.store .piece-card-body { padding-top: 14px; }
body.store .piece-card-house { font-size: 12px; margin-bottom: 8px; }
body.store .piece-card-name { font-size: 25px; line-height: 1.15; margin: 0 0 8px; }
body.store .piece-card-price { font-family: var(--eam-font-proof); font-size: 9px; letter-spacing: .04em; margin-bottom: 0; }
body.store .piece-card-mode { font-size: 9px; letter-spacing: .04em; opacity: 1; margin: 0 0 6px; }

/* ═══ PHONE (≤600px) — customer pass, 30 Sep 2026 ═══════════════════════════
   Store pages were built to the 1440 Figma frames and only shrunk by accident.
   On a phone: content clears the fixed 52px bar, cards run two-up instead of a
   single 267px column with dead space beside it, the piece photo and CTA use
   the full width, filters sit two-across, and bar/heart tap targets reach ~44px. */
@media (max-width: 600px) {
  body.store:not(.piece-page) .store-main { padding-top: 83px; }   /* clears the 67px bar + 16px */
  body.piece-page .store-main { padding: 91px 27px 56px; }

  /* Figma mobile bar (402 frame): 67px tall, icons only — menu 18, search 11,
     account 24, bag 18 — centred on y≈29 (the bottom 9px is the rounded lip),
     the 45px mark in the middle. Hit areas stay 36px wide. */
  #shopbar, #shopbar.is-solid, body.store #shopbar {
    height: 67px; gap: 2px; padding: 0 20px 9px 17px; border-radius: 0 0 15px 15px;
  }
  #shopbar .sb-btn { min-height: 44px; min-width: 36px; justify-content: center; padding: 0; }
  #shopbar .sb-label, #shopbar #sb-bag .sb-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  #shopbar .sb-btn svg.ic-menu { width: 18px; height: 12px; }
  #shopbar .sb-btn svg.ic-search { width: 11px; height: 11px; }
  #shopbar .sb-btn svg.ic-account { width: 24px; height: 24px; }
  #shopbar .sb-btn svg.ic-bag { width: 16px; height: 18px; }
  #shopbar .sb-monogram { top: 11px; transform: translateX(-50%); }
  #shopbar .bag-count { left: 17px; top: 0; }
  /* Over the film — Figma "Desktop - 16" / "iPhone 17 - 1": the 67px bar is a
     linear wash #4A1620 -> #B0344C at 0%, contained in the bar (15px lip, no
     gold edge); the wordmark is 93x18 at y=15, a 39px 0.5px bone rule at
     y=35 and "Store Now" in Cormorant 7px under it. */
  #shopbar:not(.is-solid) { background: none; border-bottom: 0; }
  #shopbar:not(.is-solid)::before {
    display: block; height: 100%; border-radius: 0 0 15px 15px;
    background: linear-gradient(180deg, #4A1620 0%, rgb(176 52 76 / 0) 100%);
  }
  #shopbar:not(.is-solid) .sb-monogram { top: 15px; }
  #shopbar .sb-monogram img.sb-mark-word { height: 18px; width: auto; }
  #shopbar .sb-storenow {
    top: 35px; bottom: auto; width: 39px; text-align: center;
    font-size: 7px; line-height: 1; padding-top: 2px;
    border-top: .5px solid var(--eam-bone);
  }

  /* Room panel: half the screen, so the room itself stays in view beside it.
     At ~190px the rows stack plate-over-text and the type steps down. */
  .room-panel {
    width: 62vw; border-radius: 18px 0 0 18px;
    padding: 88px 14px 90px;
  }
  .room-panel-head { margin-bottom: 10px; padding-bottom: 12px; }
  .room-panel-head .panel-mark { margin-bottom: 14px; }
  .room-panel-head .panel-mark .pm-name { font-size: 14px; }
  .room-panel-head .panel-mark .pm-sub { font-size: 6px; }
  .room-panel-head h2 { font-size: 22px; }
  .room-panel-head p { font-size: 11px; line-height: 1.5; margin-top: 10px; }
  .room-row { grid-template-columns: 1fr; gap: 8px; padding: 10px 0; }
  .room-row-plate { width: 100%; }
  .room-row-name { font-size: 15px; }
  .room-row-house, .room-row-price, .room-row-mode { font-size: 10px; }
  .room-panel-more { font-size: 11px; gap: 8px; }
  .room-panel-empty { font-size: 11px; line-height: 1.6; }
  .back-to-hall {
    left: 10px; bottom: 18px; max-width: calc(38vw - 16px);
    padding: 5px 12px 5px 5px; gap: 8px; font-size: 8.5px; letter-spacing: .12em; line-height: 1.3;
  }

  /* Hall doors on a phone: no hover, so each archway shows a small standing
     "Showroom" tag at the foot of the opening (no glow — removed 1 Oct). */
  #hall-doors .portal { background: none; }
  #hall-doors .portal-cta {
    display: inline-flex; left: 50%; top: auto; bottom: 6px;
    transform: translateX(-50%) scale(.72); transform-origin: 50% 100%; opacity: 1;   /* 0.6 x 1.2 of the 7px tag */
    padding: 2px 5px; gap: 0; font-size: 7px; letter-spacing: .02em;
    box-shadow: 0 2px 6px rgb(20 10 6 / .35);
  }
  #hall-doors .portal-cta i { display: none; }

  /* "Available Now" on a phone — Figma iPhone 17 - 2 (402 frame): 27px sides;
     The Edit / count Geist Mono 9, heading Cormorant 25, ink #1E1E1E; two
     142x172 plates with a 2px aurum edge, one flush left and one flush right;
     house Geist Mono 12, name Cormorant 25, availability + price Geist Mono 9. */
  #shop { padding: 40px 27px 48px; color: #1E1E1E; }
  #shop .shop-head { margin-bottom: 41px; }
  #shop .shop-head .proof, #shop .shop-count {
    font-family: var(--eam-font-proof); font-size: 9px; letter-spacing: 0; text-transform: none;
    opacity: 1; color: #1E1E1E; margin: 0;
  }
  #shop .shop-head h2 { font-size: 25px; line-height: 1; margin: 7px 0 8px; color: #1E1E1E; }
  #shop .pgrid { grid-template-columns: 142px 142px; justify-content: space-between; gap: 10px 0; }
  #shop .piece-card-plate { aspect-ratio: 142 / 172; border-width: 2px; }
  #shop .piece-card-body { padding-top: 12px; }
  #shop .piece-card-house {
    font-family: var(--eam-font-proof); font-size: 12px; letter-spacing: 0; text-transform: none;
    opacity: 1; color: #1E1E1E; margin: 0;
  }
  #shop .piece-card-name { font-size: 25px; line-height: 1.1; margin: 0 0 8px; color: #1E1E1E; }
  #shop .shop-mode, #shop .piece-card-price {
    display: block; font-family: var(--eam-font-proof); font-size: 9px; letter-spacing: 0;
    text-transform: none; opacity: 1; color: #1E1E1E; margin: 0 0 6px;
  }
  #shop .piece-card .fav-toggle { width: 32px; height: 32px; }

  /* "Enter The Maison" — Figma Desktop - 16 / iPhone 17 - 1: a 7x13 bone arrow,
     then a small oxblood-glass pill, Source Serif 12, ~120px from the bottom. */
  .enter-cue {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%);
    z-index: 5; pointer-events: none; color: var(--eam-bone);
  }
  .enter-cue svg { width: 7px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
  .enter-cue span {
    font-family: 'Source Serif Pro', Georgia, serif; font-size: 12px; line-height: 1; white-space: nowrap;
    padding: 7px 14px; border-radius: 999px;
    background: rgb(74 22 32 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .arrival-scroll { display: none; }

  /* Store page: the stacked gaps above the grid were far too tall on a phone. */
  body.store .room-back { margin-bottom: 12px; }
  body.store .room-head { margin-bottom: 16px; }
  body.store .room-head h1 { margin-bottom: 6px; }
  body.store .room-filters { margin-bottom: 16px; padding-bottom: 12px; row-gap: 10px; }
  body.store .rf-clear { grid-column: 1 / -1; justify-self: start; min-height: 24px; margin-top: -2px; padding-top: 0; padding-bottom: 0; }

  body.store .room-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  body.store .rf-combo { min-width: 0; }
  body.store .rf-trigger { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.store .rf-trigger { width: 100%; }
  body.store .rf-clear { min-height: 44px; display: inline-flex; align-items: center; }

  body.store .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .piece-card .piece-card-view { display: none; }   /* hover-only label: empty 29px on touch */
  body.store .piece-card-name { font-size: 20px; }
  body.store .piece-card-house { font-size: 10px; margin-bottom: 4px; }
  body.store .piece-card .fav-toggle { width: 40px; height: 40px; }

  body.piece-page .pdp { gap: 20px; }
  /* THE PIECE — Figma Desktop - 21 (402 frame): 250x303 plate at x=27, three 82x98
     thumbs stacked beside it (5px apart), name Cormorant 50, text Source Serif 15,
     fact values 12, related cards two-up 142x172. */
  body.piece-page .pdp-gallery { max-width: none; position: static; display: grid; grid-template-columns: 250px 82px; column-gap: 19px; align-items: start; }
  body.piece-page .pdp-frame { width: 250px; aspect-ratio: 250 / 303; }
  body.piece-page .pdp-thumbs { grid-template-columns: 82px; gap: 5px; margin: 0; }
  body.piece-page .pdp-thumb { aspect-ratio: 82 / 98; }
  body.piece-page .pdp-shotnote { grid-column: 1 / -1; }
  body.piece-page .pdp-add { width: 100%; min-width: 0; justify-content: center; }
  body.piece-page .pdp-name { font-size: 50px; line-height: 1.02; margin-bottom: 10px; }
  body.piece-page .pdp-facts dd { font-size: 12px; }
  body.piece-page .pdp-facts > div { grid-template-columns: 92px 1fr; gap: 12px; }
  body.piece-page .pdp-more-grid { grid-template-columns: 142px 142px; justify-content: space-between; gap: 20px 0; }
  body.piece-page .pdp-more-grid .piece-card-plate { aspect-ratio: 142 / 172; }
  body.piece-page .pdp-more-grid .piece-card-name { font-size: 20px; }

  /* BAG DRAWER — Figma iPhone 17 - 4: 314px wide from the right, mark 30px in,
     "The Bag" Cormorant 30, 256x55 checkout. SIDE MENU — iPhone 17 - 6: 314px from
     the left, "The Store" Cormorant 30, links Source Serif 15. */
  #bag.drawer { width: 314px; }
  #bag .drawer-head, #bag .drawer-body, #bag .drawer-foot { padding-left: 30px; padding-right: 30px; }
  #bag #bag-title, #bag .drawer-head h2 { font-size: 30px; line-height: 1.2; }
  #bag .subtotal, #bag .drawer-note, #bag #bag-checkout { font-size: 12px; }
  #bag #bag-checkout { height: 55px; width: 256px; max-width: 100%; }
  #menu-panel { width: 314px; }
  #menu-panel .menu-lead-name { font-size: 30px; }
  #menu-panel .menu-lead-n { font-size: 12px; }

  /* INNER-PAGE FOOTER — Figma: one slim 67px oxblood bar, logo 91x17 at the left, the
     gold 12px credit line at the right. The Shipping / Returns / Contact links live
     in the side menu on a phone, so they drop out of the bar. */
  body.store .store-foot {
    flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center;
    min-height: 67px; padding: 10px 14px; gap: 12px; text-align: right; border-radius: 15px 15px 0 0;
  }
  body.store .store-foot img { width: 91px; flex: none; }
  body.store .store-foot .sf-legal { font-size: 12px; line-height: 1.35; white-space: normal; text-align: right; color: var(--eam-aurum); flex: 1; }
  body.store .store-foot .sf-legal .sf-links { display: none; }

  /* EMPTY BAG — Figma Desktop - 19: heading Cormorant 30, line Source Serif 15
     centred, a 286x69 oxblood "ENTER THE MAISON" (Source Serif 20, top corners 15). */
  .co-empty h1 { font-size: 30px; line-height: 1.2; margin: 0 0 14px; }
  .co-empty p { font-size: 15px; line-height: 1.4; margin: 0 auto 28px; max-width: 340px; }
  body.store .co-empty .btn.primary {
    display: flex; align-items: center; justify-content: center; width: 286px; max-width: 100%; height: 69px;
    margin: 0 auto; padding: 0; min-width: 0; border-radius: 15px 15px 0 0;
    font-family: 'Source Serif Pro', Georgia, serif; font-size: 20px; letter-spacing: 0; text-transform: uppercase;
  }

  /* HOME FOOTER — Figma Desktop - 22 (402 frame): 33px sides, headings Cormorant 15
     gold, body Source Serif 10 / 10% tracking justified, 235x39 + 85x39 sign-up,
     links Cormorant 12 in three columns, then logo left / gold 12px credit right. */
  #house { padding: 34px 33px 36px; }
  #house .maison-grid h3 { font-size: 15px; line-height: 1.2; margin-top: 6px; }
  #house .maison-col p, #house .maison-col li { font-size: 10px; letter-spacing: .1em; line-height: 1.55; text-align: justify; }
  #house .signup { max-width: 320px; }
  #house .signup input { flex: 0 0 235px; }
  #house .signup button { flex: 0 0 85px; }
  #house .maison-links-row {
    display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 14px 16px;
    margin-top: 30px; font-size: 12px; text-align: left;
  }
  #house .maison-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
  #house .maison-foot img { width: 120px; }
  #house .maison-foot .proof {
    flex: 1; margin: 0; padding-top: 0; border-top: 0; width: auto; text-align: right; font-size: 12px; line-height: 1.35;
  }

  /* SEARCH — Figma Desktop - 18: 67px bone bar (magnifier left, mark centred), then
     one row on the pattern: magnifier at x=27, "A House, A Piece…" Source Serif 15
     (50%), a 329px 0.5px bone hairline under it. */
  #search-panel .panel-head { height: 67px; padding: 0 27px; border-radius: 0 0 15px 15px; }
  #search-panel .sp-title { font-size: 0; gap: 0; }
  #search-panel .sp-ico { width: 16px; height: 16px; }
  #search-panel .search-field { margin: 77px 27px 0 27px; }
  #search-panel .sf-ico { left: 0; top: 3px; width: 13px; height: 13px; }
  #search-panel #search-input { font-size: 15px; line-height: 19px; padding: 0 0 8px 18px; border-bottom: .5px solid rgb(var(--eam-bone-rgb) / .5); }
  #search-panel #search-input::placeholder { color: rgb(var(--eam-bone-rgb) / .5); }
  #search-panel .search-results { padding: 14px 27px 80px 27px; }

  /* FAVORITES — Figma Desktop - 20: heading Cormorant 40, line Source Serif 15,
     two 142x172 plates flush left / right like "Available Now". */
  body.store:not(.piece-page) .store-main { padding-left: 27px; padding-right: 27px; }
  body.store .room-head .k + h1 { font-size: 40px; line-height: 1.2; }
  body.store .room-head .k ~ p { font-family: 'Source Serif Pro', Georgia, serif; font-size: 15px; opacity: 1; }
  body.store .room-grid { grid-template-columns: 142px 142px; justify-content: space-between; }
  body.store .room-grid .piece-card-plate { aspect-ratio: 142 / 172; }
  body.store .room-grid .piece-card-name { font-size: 25px; }

  /* panels: finger-sized close / quantity / remove / menu links */
  #bag .drawer-head .icon-btn, .panel .icon-btn { min-width: 44px; min-height: 44px; }
  #bag .qty button, .line .qty button { min-width: 36px; min-height: 36px; }
  .line .qty { display: flex; margin-top: 8px; }
  #bag .line-remove { padding: 12px 0; }
  #menu-panel a { display: block; padding-top: 10px; padding-bottom: 10px; }
}


/* ═══ PHONE LOADER — Figma "Desktop - 17" (402 x 874) ═══════════════════════
   Upright phones only. The opening frame of the entrance film sits behind an
   oxblood veil, with the lattice pattern standing in for the sky across the top
   27%; a 236px aurum monogram at ~43% height; below it a 40px gold rule either
   side of "The House is Opening 100%" in Cormorant, bone. */
@media (max-width: 600px) and (orientation: portrait) {
  #overture.overture--a {
    background: var(--eam-oxblood) url('../assets/frames-p/entrance/0001.webp') center bottom / 100% auto no-repeat;   /* whole frame, no crop */
  }
  #overture.overture--a::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 27.5%;
    /* the pattern asset is near-transparent by design, so stack it over a violet ground */
    background: var(--eam-pattern) center top / cover no-repeat, var(--eam-pattern) center top / cover no-repeat,
                var(--eam-pattern) center top / cover no-repeat, var(--eam-pattern) center top / cover no-repeat, #6B5A7E;
  }
  #overture.overture--a::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(74 22 32 / .08) 0 27.5%, rgb(74 22 32 / .70) 27.5% 100%);
  }
  #overture.overture--a .overture-mark {
    position: relative; z-index: 2; width: 236px; transform: translateY(-3vh);
  }
  #overture.overture--a .overture-pct {
    width: 100vw; margin: 51px 0 0 calc(50% - 50vw); padding: 0 8px;
    gap: 14px; font-size: 22px; letter-spacing: 0;
  }
  #overture.overture--a .overture-pct i { flex: 0 0 40px; min-width: 0; height: 1.5px; }
}

/* "Designed by TEE8" — the studio's name is a link; it keeps the gold of the line. */
.sf-legal a.tee8, #house .maison-foot .proof a.tee8, body.store .store-foot .sf-legal a.tee8 {
  color: inherit; text-decoration: none; border: 0; transition: opacity .3s ease;
}
.sf-legal a.tee8:hover, #house .maison-foot .proof a.tee8:hover, body.store .store-foot .sf-legal a.tee8:hover { color: inherit; opacity: .75; }
@media (max-width: 600px) { body.store .store-foot img { width: 120px; } }