/* ============================================================
   PRODUCTS — pieces, rooms, detail pages
   ------------------------------------------------------------
   Deliberately NOT a grid of small equal cards. Pieces are
   presented large, with the photograph doing the work and the
   type sitting quietly beneath it.
   ============================================================ */

/* ============================================================
   A PIECE (catalogue tile)
   ============================================================ */
.piece {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.piece__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--curve-soft) var(--curve-soft) var(--curve-soft) 3.4rem;
  background: var(--obsidian-lift);
  aspect-ratio: 4 / 5;
}
.piece__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}
.piece:hover .piece__media img { transform: scale(1.045); }

/* Second photograph fades in on hover — a second look, not a gimmick. */
.piece__media .alt-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.piece:hover .alt-shot, .piece:focus-within .alt-shot { opacity: 1; }

/* Hairline that traces the curve on hover */
.piece__media::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  border-radius: inherit;
  transition: border-color 0.5s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.piece:hover .piece__media::after { border-color: var(--gold-whisper); }

/* Top-left flags (one of a kind, sold) */
.piece__flags {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: calc(100% - 4.5rem);
}
.piece__flags .badge {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(200, 154, 60, 0.4);
}

/* Save (heart) sits top-right, always reachable */
.piece__save {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(5, 5, 5, 0.6);
  border: 1px solid rgba(200, 154, 60, 0.28);
  color: var(--ink-light);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.3s var(--ease);
}
.piece__save:hover, .piece__save:focus-visible {
  background: var(--gold); color: var(--obsidian); border-color: var(--gold);
}
.piece__save svg { width: 17px; height: 17px; }
.piece__save[aria-pressed='true'] { color: var(--gold); }
.piece__save[aria-pressed='true'] svg { fill: currentColor; }

.piece__body { display: flex; flex-direction: column; gap: 0.3rem; }
.piece__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.piece__name {
  font-family: var(--font-house);
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--fg);
  line-height: 1.25;
}
.piece:hover .piece__name { color: var(--gold); }
.piece__line {
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--fg-soft);
  line-height: 1.35;
}
.piece__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  font-size: var(--t-xs);
  color: var(--fg-soft);
  margin-top: 0.15rem;
}

/* Stretched link so the whole tile is clickable but the save
   button stays independently focusable. */
.piece__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.piece__save, .piece__flags { pointer-events: auto; }

/* Sold pieces read quieter, but stay legible. */
.piece--sold .piece__media img { filter: grayscale(0.55) brightness(0.82); }

/* ---- Editorial variant: alternating offset, used in rooms ---- */
.piece--editorial { gap: 1.1rem; }
.piece--editorial .piece__media { aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  .pieces-editorial .piece--editorial:nth-child(even) { margin-top: clamp(2rem, 5vw, 5rem); }
}

/* ============================================================
   THE THREE WORLDS (homepage room doorways)
   ------------------------------------------------------------
   Arched openings, not category cards.
   ============================================================ */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: clamp(1rem, 0.6rem + 1.6vw, 2.4rem);
}

.door {
  position: relative;
  display: block;
  text-align: center;
  isolation: isolate;
}
.door__arch {
  position: relative;
  overflow: hidden;
  border-radius: var(--curve-arch);
  aspect-ratio: 3 / 4.2;
  background: var(--obsidian-lift);
  border: 1px solid var(--gold-whisper);
}
.door__arch img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter 0.8s var(--ease);
}
.door:hover .door__arch img { transform: scale(1.07); }

/* Warm wash so the doorway reads as lit from within */
/* Dark enough at the foot to carry the words, clear enough above
   that her photography is actually seen. */
.door__arch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(5, 5, 5, 0.96) 0%,
              rgba(5, 5, 5, 0.88) 20%,
              rgba(5, 5, 5, 0.42) 42%,
              rgba(5, 5, 5, 0.06) 66%,
              transparent 100%);
  transition: opacity 0.7s var(--ease);
}
.door:hover .door__arch::after { opacity: 0.86; }

.door__words {
  position: absolute;
  inset: auto 1rem 1.6rem;
  z-index: 2;
  color: var(--ink-light);
}
.door__num {
  font-family: var(--font-house);
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}
.door__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.door__sub {
  display: block;
  font-size: var(--t-sm);
  color: var(--ink-light-soft);
  margin-bottom: 0.9rem;
}
/* The availability line sits directly under the room description. */
.door__count {
  display: block;
  font-size: 0.76rem;
  color: var(--gold-champagne);
  margin: -0.6rem 0 0.9rem;
}
.door__enter {
  font-family: var(--font-house);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.door__enter svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); }
.door:hover .door__enter svg { transform: translateX(5px); }

/* A room that has no products yet says so honestly: dashed edge,
   and the mark of the House where a photograph would be. */
.door--waiting .door__arch {
  border-style: dashed;
  background:
    radial-gradient(80% 60% at 50% 34%, rgba(200, 154, 60, 0.13), transparent 70%),
    var(--obsidian-lift);
}
.door__mark {
  position: absolute;
  inset: 0 0 34% 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  opacity: 0.5;
}
.door__mark svg { width: 46%; max-width: 150px; }
.door--waiting:hover .door__mark { opacity: 0.72; }

/* ---- The Scent Room plate, used where no fragrance photo exists ---- */
.scent-plate {
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--gold-whisper);
  border-radius: var(--curve-arch);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.4rem;
  color: var(--gold);
  background:
    radial-gradient(70% 50% at 50% 40%, rgba(200, 154, 60, 0.11), transparent 70%),
    var(--obsidian-lift);
}
.scent-plate svg { width: 52%; max-width: 210px; opacity: 0.75; }

/* ============================================================
   FEATURED CREATION (large editorial)
   ============================================================ */
.feature {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}
.feature__media {
  position: relative;
  border-radius: 50% 50% var(--curve-soft) var(--curve-soft) / 22% 22% var(--curve-soft) var(--curve-soft);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--gold-whisper);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__body > * + * { margin-top: 1.1rem; }
.feature__specs {
  display: grid;
  gap: 0.55rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--edge);
}
.feature__specs div {
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr;
  gap: 1rem;
  font-size: var(--t-sm);
}
.feature__specs dt {
  font-family: var(--font-house);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.15rem;
}
.feature__specs dd { color: var(--fg-soft); margin: 0; }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.detail {
  display: grid;
  gap: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
/* Grid and flex items default to min-content width, so a horizontally
   scrolling child (the thumbnail strip) would otherwise push the whole
   column wider than the screen. This is what keeps the page from
   scrolling sideways on a phone. */
.detail > *, .gallery { min-width: 0; }
@media (min-width: 960px) {
  .detail { grid-template-columns: 1.15fr 1fr; }
  .detail__buy { position: sticky; top: 6.5rem; }
}

/* ---- Gallery ---- */
.gallery__main {
  position: relative;
  border-radius: var(--curve-soft) var(--curve-soft) var(--curve-soft) 4rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--obsidian-lift);
  border: 1px solid var(--edge);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}
.gallery__thumbs button {
  flex: none;
  width: 74px; height: 88px;
  border-radius: 0.7rem;
  overflow: hidden;
  border: 1px solid var(--edge);
  opacity: 0.6;
  transition: all 0.3s var(--ease);
}
.gallery__thumbs button:hover { opacity: 1; }
.gallery__thumbs button[aria-current='true'] {
  opacity: 1;
  border-color: var(--gold);
}
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Buy column ---- */
.detail__buy > * + * { margin-top: 1.1rem; }
.detail__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  justify-content: space-between;
}
.detail__price { font-size: var(--t-lg); }

.spec-list { display: grid; gap: 0.5rem; }
.spec-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--fg-soft);
  line-height: 1.5;
}
.spec-list li::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 0.6em;
}

/* Key/value rows for dimensions, sizing, packaging */
.facts { display: grid; gap: 0; }
.facts__row {
  display: grid;
  grid-template-columns: minmax(96px, 34%) 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--edge);
  font-size: var(--t-sm);
}
.facts__row dt {
  font-family: var(--font-house);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.2rem;
}
.lit-day .facts__row dt, .lit-dawn .facts__row dt { color: var(--gold-burnished); }
.facts__row dd { margin: 0; color: var(--fg); }

/* Small actions under the buy button */
.detail__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  padding-top: 0.6rem;
}
.detail__acts button,
.detail__acts a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-sm);
  color: var(--fg-soft);
  min-height: 44px;
  transition: color 0.3s var(--ease);
}
.detail__acts button:hover, .detail__acts button:focus-visible,
.detail__acts a:hover, .detail__acts a:focus-visible { color: var(--gold); }
.detail__acts svg { width: 16px; height: 16px; }

/* Mobile sticky buy bar — QR traffic lands on product pages. */
.buy-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--gold-whisper);
  padding: 0.7rem clamp(0.8rem, 3vw, 1.4rem);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  display: none;
  align-items: center;
  gap: 1rem;
  transform: translateY(110%);
  transition: transform 0.45s var(--ease-spiral);
}
.buy-bar.is-up { transform: none; }
.buy-bar__info { flex: 1; min-width: 0; }
.buy-bar__name {
  font-family: var(--font-house);
  font-size: 0.78rem;
  color: var(--ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buy-bar__price { font-size: var(--t-sm); color: var(--gold); }
.buy-bar .btn { flex: none; }

@media (max-width: 959px) { .buy-bar { display: flex; } }

/* ============================================================
   THE SCENT JOURNEY (Opening / Heart / Embrace)
   ------------------------------------------------------------
   Her vocabulary, not "top / middle / base".
   ============================================================ */
.journey {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  counter-reset: stage;
}
.stage {
  position: relative;
  padding-top: 2.6rem;
}
.stage::before {
  counter-increment: stage;
  content: counter(stage, upper-roman);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-house);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}
/* A curved connector, drawn only between stages on wide screens */
.stage::after {
  content: '';
  position: absolute;
  top: 0.45rem; left: 2.6rem; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-whisper), transparent);
}
.stage__name {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.stage__note { color: var(--fg-soft); font-size: var(--t-sm); }

/* ============================================================
   SCENT CARDS
   ------------------------------------------------------------
   A fragrance with no photograph and no notes still has to look
   like something. These carry the mark and say plainly where the
   work has got to.
   ============================================================ */
.scent-card {
  border: 1px solid var(--edge);
  border-radius: var(--curve-soft) var(--curve-soft) var(--curve-soft) 4rem;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(200, 154, 60, 0.08), transparent 68%),
    var(--bg-lift, var(--obsidian-lift));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.scent-card__mark {
  width: 54px;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 1rem;
}
.scent-card__state {
  font-family: var(--font-house);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-champagne);
  padding: 0.32rem 0.85rem;
  border: 1px dashed var(--gold-whisper);
  border-radius: var(--curve-pill);
}
.lit-day .scent-card__state, .lit-dawn .scent-card__state { color: var(--gold-burnished); }

.scent-card__known {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.4;
  color: var(--fg);
}
.scent-card__known--quiet {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--fg-soft);
  line-height: 1.6;
}
.scent-card__journey { display: grid; gap: 0.7rem; width: 100%; }
.scent-card__journey > div {
  display: grid;
  grid-template-columns: minmax(72px, 88px) 1fr;
  gap: 0.9rem;
  font-size: var(--t-sm);
}
.scent-card__journey dt {
  font-family: var(--font-house);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.2rem;
}
.scent-card__journey dd { margin: 0; color: var(--fg-soft); }

.scent-card__noted {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.1rem;
  font-size: var(--t-sm);
  color: var(--gold-champagne);
  line-height: 1.55;
}
.scent-card__noted svg { width: 17px; height: 17px; flex: none; margin-top: 0.2em; }

/* ============================================================
   THE ARTISAN'S HAND (process strip)
   ============================================================ */
.hand-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1rem;
}
.hand-step .frame { margin-bottom: 0.8rem; }
.hand-step h3 {
  font-family: var(--font-house);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  color: var(--fg);
}
.hand-step p { font-size: var(--t-sm); color: var(--fg-soft); line-height: 1.55; }

/* ============================================================
   ROOM INTRO BANNER (interior room heads)
   ============================================================ */
.room-banner {
  position: relative;
  min-height: clamp(340px, 46vh, 540px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.room-banner img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Strong enough at the foot to carry a headline, breadcrumbs and a
   lead paragraph over busy photography, while the top stays open. */
.room-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
              rgba(5, 5, 5, 0.97) 0%,
              rgba(5, 5, 5, 0.92) 30%,
              rgba(5, 5, 5, 0.72) 55%,
              rgba(5, 5, 5, 0.4) 78%,
              rgba(5, 5, 5, 0.22) 100%);
}
/* The banner is always dark, whatever light the room below it keeps,
   so it carries its own type colours rather than inheriting them. */
.room-banner {
  --fg: var(--ink-light);
  --fg-soft: var(--ink-light-soft);
  --edge: var(--gold-whisper);
  color: var(--ink-light);
}
.room-banner .shell { padding-bottom: var(--space-lg); position: relative; }
.room-banner .crumbs a:hover { color: var(--gold-champagne); }

/* ============================================================
   ROOM CONTROLS (filters + sort)
   ------------------------------------------------------------
   Restrained on purpose. Twelve one-of-a-kind pieces do not need
   a faceted search; they need two or three honest ways to narrow.
   ============================================================ */
.room-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--edge);
}
.room-controls__right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: none;
}
.room-controls select {
  min-height: 42px;
  padding: 0.45rem 2.4rem 0.45rem 1rem;
  border-radius: var(--curve-pill);
  border: 1px solid var(--edge);
  background-color: transparent;
  color: var(--fg);
  font-family: var(--font-house);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c89a3c' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 15px;
}
.room-controls select:focus { border-color: var(--gold); }

.room-count {
  font-family: var(--font-house);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
  padding-block: 1rem;
}

@media (max-width: 640px) {
  .room-controls { flex-direction: column; align-items: stretch; }
  .room-controls__right { justify-content: space-between; flex-wrap: wrap; }
  /* The filter pills and the sort row must wrap on a 320px phone,
     not push the page sideways. */
  .room-controls .pills, .room-controls__right > * { min-width: 0; max-width: 100%; }
  .room-controls select { max-width: 100%; }
}

/* ============================================================
   RESULTS (discovery, gift concierge)
   ============================================================ */
.result-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--t-sm);
  color: var(--fg-soft);
  margin-bottom: var(--space-md);
}
.result-note svg { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 0.2em; }

/* Why a piece was suggested — shown on every result. */
.why {
  font-size: var(--t-xs);
  color: var(--gold-champagne);
  font-style: italic;
  line-height: 1.45;
}
.lit-day .why, .lit-dawn .why { color: var(--gold-burnished); }

/* ---- Ring size chart (From the House → Sizing guide) ---- */
.size-chart-wrap { overflow-x: auto; }
.size-chart { width: 100%; max-width: 520px; border-collapse: collapse; font-size: var(--t-sm); }
.size-chart th, .size-chart td { padding: 0.65rem 0.9rem; text-align: left; border-bottom: 1px solid var(--edge); }
.size-chart thead th { font-family: var(--font-house); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); }
.size-chart tbody th { font-family: var(--font-house); font-weight: 400; color: var(--fg); }

/* The open sort list (2026-10-11): Windows draws it on white, so the
   page's light text vanished. Give it the page's own colours. */
.room-controls select option { background-color: var(--obsidian-lift, #0c0a09); color: var(--ink-light, #f4efe6); text-transform: none; }
.lit-day .room-controls select option,
.lit-dawn .room-controls select option { background-color: #fbf8f2; color: var(--ink, #1b1712); }

/* The Scent Room banner: the Malakhim bottle sits at the top left of its photograph,
   so the picture is held to the top rather than centred. */
.room-banner picture { position: absolute; inset: 0; z-index: -2; }
.room-banner--scent img { object-position: 62% 30%; }
/* The words sit on the dark left; the bottle on the right stays lit. */
.room-banner--scent::after {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.7) 38%, rgba(5, 5, 5, 0.15) 62%, rgba(5, 5, 5, 0.1) 100%),
    linear-gradient(to top, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0) 45%);
}
/* Product grids keep their columns even when only one or two pieces are shown
   (2026-10-11): a single piece was stretched across the whole page. */
[data-room-grid],
[data-gift-results],
[data-results],
[data-related] {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

/* ---- Shop filter line (2026-10-13): type tabs left, small menus right ---- */
.room-tabs { display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; }
.room-tabs button {
  background: none; border: 0; padding: 0.6rem 0; cursor: pointer;
  font-family: var(--font-house); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-soft); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.room-tabs button:hover, .room-tabs button:focus-visible { color: var(--fg); }
.room-tabs button[aria-pressed='true'] { color: var(--fg); border-bottom-color: var(--gold); }
.room-menu { display: inline-flex; margin: 0; }
.room-controls__right { flex-wrap: wrap; }

/* ---- Recently viewed: the shop's own cards, in the same columns as the grid above ---- */
.recent-head { margin-bottom: var(--space-md); }
.recent-head .display { margin-top: 0.5rem; }
[data-recent] { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

.room-controls [data-clear][hidden] { display: none; }   /* only once something is filtered */

/* "Keep this piece": a kept piece shows a gold, filled heart (2026-10-13). */
.detail__acts [data-save][aria-pressed='true'] { color: var(--gold); }
.detail__acts [data-save][aria-pressed='true'] svg { fill: currentColor; }
.detail__acts [data-save].just-saved svg { animation: heart-pulse 0.45s var(--ease-spiral); }