/* ═══════════════════════════════════════════════════════════════════════════
   EAM MAISON — COMMERCE STATES
   Loaded after maison.css. Ethos Aurum Maison · Phase 2a · TEE8

   Restraint over decoration. A sold piece is not shouted about with a red
   badge — it is simply no longer available, stated quietly. The house tone
   does not change because a transaction is involved.

   HARD GATE HELD: --eam-aurum is never used as text on a light ground.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── sold ─────────────────────────────────────────────────────────────── */

.btn.is-sold,
button.is-sold {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
  border-color: currentColor;
  background: transparent;
  color: var(--eam-ink, #4A1620);
  letter-spacing: .16em;
}

/* A sold piece keeps its plate but loses its saturation — present, but past. */
.piece.is-sold .piece-plate,
.product.is-sold img {
  filter: grayscale(1);
  opacity: .55;
}

/* ── checkout messaging ───────────────────────────────────────────────── */

.stub-note {
  font-family: var(--eam-font-proof, 'Geist Mono', monospace);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.8;
  text-transform: none;
  margin-top: 20px;
  min-height: 1em;
  opacity: .75;
  transition: opacity .3s ease;
}

.stub-note.is-working {
  opacity: 1;
  color: var(--eam-ink, #4A1620);
}

.stub-note.is-error {
  opacity: 1;
  color: var(--eam-bordeaux, #6E2436);
  padding-left: 12px;
  border-left: 2px solid var(--eam-bordeaux, #6E2436);
}

/* ── submit ───────────────────────────────────────────────────────────── */

#checkout-form [type="submit"][disabled] {
  opacity: .5;
  cursor: progress;
}

/* ── the reservation notice ───────────────────────────────────────────── */

.hold-notice {
  font-family: var(--eam-font-proof, 'Geist Mono', monospace);
  font-size: 10px;
  letter-spacing: var(--eam-track-proof, .18em);
  text-transform: uppercase;
  opacity: .5;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--eam-signature, #B79A5C);   /* hairline only */
}

/* ── trust row ────────────────────────────────────────────────────────── */

.pay-marks {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  font-family: var(--eam-font-proof, 'Geist Mono', monospace);
  font-size: 10px;
  letter-spacing: var(--eam-track-proof, .18em);
  text-transform: uppercase;
  opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
  .stub-note { transition: none; }
}

/* ── the room slider ──────────────────────────────────────────────────
   Added 29 Aug 2026. One presentation for all three rooms; it inherits
   `color` from the room ground ([data-layout] sets bone/espresso), so
   every hairline and label is drawn from currentColor and reads on the
   bone, alabaster and espresso grounds alike. Gold is never used as
   text here — the hard gate holds. */

.dept-slider {
  padding: 0 clamp(22px, 6vw, 90px) clamp(70px, 12vh, 140px);
}

.dept-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(22px, 4vh, 40px);
}
.dept-slider-head .proof { opacity: .55; }

.dept-slider-nav { display: flex; gap: 10px; flex-shrink: 0; }

.slider-arrow {
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--eam-font-body, Georgia, serif);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  opacity: .45;
  transition: opacity .3s ease, background-color .3s ease, color .3s ease;
}
.slider-arrow:hover { opacity: 1; }
.slider-arrow:focus-visible { outline: 1px solid var(--eam-signature, #B79A5C); outline-offset: 3px; }

/* The track is a single scroll row. Snap + hidden scrollbar so a drag or a
   swipe feels like the arrows, not like a scrollbox. */
.dept-slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 30vw, 336px);
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.dept-slider-track::-webkit-scrollbar { display: none; }

.piece-card {
  scroll-snap-align: start;
  display: block;
  color: inherit;
  text-decoration: none;
  outline-offset: 4px;
}
.piece-card:focus-visible { outline: 1px solid var(--eam-signature, #B79A5C); }

.piece-card-plate {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgb(var(--eam-alabaster-rgb) / .45);
  border: 1px solid rgb(from currentColor r g b / .14);
  transition: border-color .4s ease;
}
.piece-card:hover .piece-card-plate { border-color: rgb(from currentColor r g b / .4); }
.piece-card-plate img:not(.piece-card-mark) {
  transition: transform 1.4s cubic-bezier(.16,.84,.32,1);
}
.piece-card:hover .piece-card-plate img:not(.piece-card-mark) { transform: scale(1.03); }

.piece-card-view {
  display: block;
  margin-top: 12px;
  font-size: 9px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.piece-card:hover .piece-card-view,
.piece-card:focus-visible .piece-card-view { opacity: .6; transform: none; }

/* heart toggle — sits on the plate, over the image */
.fav-toggle {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  background: rgb(var(--eam-bone-rgb) / .82);
  color: rgb(from currentColor r g b / .55);
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
.fav-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fav-toggle:hover { color: var(--eam-bordeaux); transform: scale(1.08); }
.fav-toggle.is-on { color: var(--eam-bordeaux); }
.fav-toggle.is-on svg { fill: currentColor; stroke: currentColor; }
.fav-toggle:focus-visible { outline: 2px solid var(--eam-aurum); outline-offset: 2px; }
[data-layout="vault"] .fav-toggle { background: rgb(var(--eam-espresso-rgb) / .7); }

/* "view more" — link in the slider head + the trailing card */
.dept-slider-more {
  align-self: center;
  text-decoration: none;
  opacity: .55;
  border-bottom: 1px solid transparent;
  transition: opacity .3s ease, border-color .3s ease;
}
.dept-slider-more:hover { opacity: 1; border-bottom-color: currentColor; }

.piece-card--more {
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgb(from currentColor r g b / .3);
  min-height: 100%;
}
.piece-card--more .pcm-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px;
}
.piece-card--more .pcm-plus {
  font-family: var(--eam-font-display);
  font-size: 40px;
  line-height: 1;
  opacity: .5;
  margin-bottom: 6px;
}
.piece-card--more .proof { font-size: 10px; }
.piece-card--more .pcm-sub { font-size: 12px; opacity: .55; max-width: 18ch; }
.piece-card--more:hover { border-color: rgb(from currentColor r g b / .6); }

/* a hall with no pieces — deliberate, e.g. Hall II */
.dept-closed {
  max-width: 46ch;
  margin: clamp(30px, 6vh, 70px) 0 clamp(40px, 8vh, 90px);
}
.dept-closed .proof { display: block; opacity: .55; margin-bottom: 10px; }
.dept-closed p { margin: 0 0 22px; opacity: .8; }

/* ── the bar's shopping actions (index.html topbar) ──────────────────── */
.topbar-actions { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }
.topbar-act {
  display: inline-flex; align-items: center; gap: 8px;
  color: inherit; text-decoration: none;
  font-family: var(--eam-font-proof);
  font-size: 10px; letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
  opacity: .82;
  transition: opacity .3s ease;
}
.topbar-act:hover { opacity: 1; }
.topbar-act svg { width: 15px; height: 15px; display: block; }
.topbar-act .bag-count.is-zero { opacity: .55; }
.piece-card-plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* the monogram fallback, when no photograph is loaded */
.piece-card-plate img.piece-card-mark {
  width: 46%; height: auto;
  object-fit: contain;
  opacity: .4;
}
[data-layout="vault"] .piece-card-plate {
  background: rgb(var(--eam-espresso-rgb) / .5);
}

.piece-card-body { padding-top: 20px; }

.piece-card-house {
  display: block;
  font-size: 9px;
  opacity: .5;
  margin-bottom: 9px;
}

.piece-card-name {
  font-family: var(--eam-font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.2;
  margin: 0 0 8px;
}

.piece-card-note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  opacity: .68;
  max-width: 34ch;
}

.piece-card-price {
  display: block;
  font-family: var(--eam-font-display, Georgia, serif);
  font-size: 18px;
  margin-bottom: 10px;
}

.piece-card-mode {
  display: block;
  font-size: 9px;
  opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
  .dept-slider-track { scroll-behavior: auto; scroll-snap-type: none; }
  .slider-arrow { transition: none; }
}

@media (max-width: 760px) {
  .dept-slider-track { grid-auto-columns: 78vw; }
}