/* Change 0362 (owner 2026-10-10, Q10 = B) — VIP OFFER ONLY, on the client's side.
   An item an offer carries without the Showroom stands under the offer's chip and nowhere else (B3): its card
   wears a gold eyebrow in the place where a new lot's does, and its page says why the rest of the Showroom
   does not show it. Kept out of css/showroom.css, which the showroom app ports byte for byte.

   Change 0363 (owner 2026-10-10) — and it is presented as what it is: EXCLUSIVE. The card is framed in the
   room's gold with an "Exclusive" ribbon over its photo; the VIP Offer chip counts what it holds for the client
   alone; the unlensed room says, once, that something is set aside (the items themselves stay under the chip);
   the piece page's gold badge says what it means as its own tooltip.

   Change 0368 (2026-10-12) — and it reads right to left: every side below is logical, and the two that have no
   logical form (an inset box-shadow, a gradient's angle) carry a [dir="rtl"] twin. In Arabic the badge's tooltip had
   hung from the badge's LEFT edge while the badge sat at the page's right, and ran 52px off the page. */
.ps-lot__only { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--vip-gold, #A8853A); }
.ps-lot__only > svg, .ps-excl-gem { width: 11px; height: 11px; flex: none; }

/* ---- the card: a gold frame, a warm ground, a ribbon on the photo ---- */
.ps-lot[data-offer-only] {
  border-color: var(--vip-gold, #C2A05A);
  box-shadow: 0 0 0 1px var(--vip-gold, #C2A05A), 0 10px 24px -14px rgba(169, 131, 56, .75);
  background: linear-gradient(180deg, #FFFCF4 0%, var(--vip-card-bg, #fff) 55%);
}
.ps-lot[data-offer-only] .ps-lot__img { position: relative; }
.ps-lot__ribbon {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1; pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px; padding-block: 4px; padding-inline: 7px 9px; border-radius: 999px;
  background: var(--vip-gold, #C2A05A); color: #241C09; box-shadow: 0 2px 8px rgba(36, 28, 9, .28);
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.ps-lot__ribbon > svg { width: 12px; height: 12px; }

/* ---- the VIP Offer chip counts what it holds for this client alone ---- */
.ps-chip__excl {
  display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--vip-gold, #C2A05A); color: #241C09; font-size: 10.5px; font-weight: 800; line-height: 1.4;
}
.ps-chip__excl > svg { width: 10px; height: 10px; }

/* ---- the unlensed room says, once, that something waits under the offer ---- */
.ps-excl-teaser {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--vip-gold, #C2A05A); border-radius: 6px; background: #FBF3DE; color: var(--vip-nav-fg, #241C09);
  font: inherit; font-size: 13px; text-align: start; cursor: pointer;
}
.ps-excl-teaser[hidden] { display: none; }
.ps-excl-teaser > svg { width: 18px; height: 18px; flex: none; color: var(--vip-gold, #C2A05A); }
.ps-excl-teaser b { font-weight: 700; }
.ps-excl-teaser > span:not(.ps-excl-teaser__go) { flex: 1 1 0; min-width: 0; }   /* beside the gem at every width */
.ps-excl-teaser__go { margin-inline-start: auto; font-weight: 700; white-space: nowrap; color: #7A5C1E; }
.ps-excl-teaser:hover { background: #F6E7BF; }

/* ---- the piece page ---- */
.sp-excl-badge {
  position: relative; cursor: help;
  display: inline-flex; align-items: center; gap: 5px; padding-block: 3px; padding-inline: 8px 10px; border-radius: 999px;
  background: var(--vip-gold, #C2A05A); color: #241C09; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.sp-excl-badge > svg { width: 12px; height: 12px; }
.sp-excl-badge:focus-visible { outline: 2px solid #7A5C1E; outline-offset: 2px; }
/* The badge's tooltip: the portal's .req-tip card (css/pages/quotes.css) in the room's gold. It hangs below the
   badge from its inline START — the badge opens the row at the page's start edge (the left, the right under
   dir="rtl"), so a centred card would clip on a phone and a left-anchored one ran off an Arabic page (0368). */
.sp-excl-tip {
  position: absolute; inset-inline-start: 0; top: calc(100% + 8px); z-index: 40;
  width: max-content; max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px; border: 1px solid var(--vip-gold, #C2A05A); border-inline-start-width: 4px; border-radius: 6px;
  background: #FBF3DE; color: var(--color-text, #1F2937); box-shadow: 0 10px 24px -8px rgba(36, 28, 9, .35);
  font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: start; white-space: normal;
  opacity: 0; visibility: hidden; transition: opacity 120ms; pointer-events: none;
}
.sp-excl-tip strong { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #7A5C1E; }
/* Hover on a pointer; focus on a click or a tap (the badge carries tabindex), and a click elsewhere blurs it. */
.sp-excl-badge:hover .sp-excl-tip, .sp-excl-badge:focus .sp-excl-tip { opacity: 1; visibility: visible; }

/* ---- Change 0364: See them, and the way back ---- */
.ps-excl-teaser[aria-pressed="true"] { background: #F6E7BF; border-color: #A8853A; box-shadow: inset 3px 0 0 var(--vip-gold, #C2A05A); }
/* An inset box-shadow has no logical form: the gold edge stands at the inline start in Arabic too (0368). */
[dir="rtl"] .ps-excl-teaser[aria-pressed="true"] { box-shadow: inset -3px 0 0 var(--vip-gold, #C2A05A); }

/* ---- Sidebar: the row takes the gold down its edge, its photo the ribbon ---- */
.ps-row[data-offer-only] {
  background: linear-gradient(90deg, #FBF3DE 0%, var(--vip-card-bg, #fff) 70%);
  box-shadow: inset 3px 0 0 var(--vip-gold, #C2A05A);
}
/* Neither a gradient's angle nor an inset shadow is logical: the warm side and the gold edge follow the start (0368). */
[dir="rtl"] .ps-row[data-offer-only] {
  background: linear-gradient(270deg, #FBF3DE 0%, var(--vip-card-bg, #fff) 70%);
  box-shadow: inset -3px 0 0 var(--vip-gold, #C2A05A);
}
.ps-row[data-offer-only] .ps-row__img { position: relative; box-shadow: 0 0 0 1px var(--vip-gold, #C2A05A); }
.ps-row .ps-lot__ribbon { top: 7px; inset-inline-start: 7px; padding-block: 3px; padding-inline: 6px 7px; font-size: 9px; }

/* ---- Hero: the shelf See them lays out ---- */
[data-excl-shelf] .ps-shelf__head h2 { display: inline-flex; align-items: center; gap: 8px; color: #7A5C1E; }
[data-excl-shelf] .ps-shelf__head h2 > svg { width: 18px; height: 18px; color: var(--vip-gold, #C2A05A); }

@media (max-width: 560px) {
  .ps-excl-teaser { flex-wrap: wrap; }
  .ps-excl-teaser > span:not(.ps-excl-teaser__go) { flex-basis: calc(100% - 28px); }   /* the way wraps under it */
  .ps-excl-teaser__go { margin-inline-start: 28px; }
}