/* ============================================================
   STAY PAGE — rooms showcase, finder, floor plans, FAQ
   Tokens inherited from styles.css. This sheet owns the new
   build-out; the page's hero / intro / amenities / around /
   reserve styles stay inline in stay.html.
   ============================================================ */

/* shared monospace placeholder — used for room shots not yet
   photographed. Subtle diagonal weave + a labelled chip. */
.ph {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, var(--c-bone) 0, var(--c-bone) 11px, #e7e1d5 11px, #e7e1d5 22px);
  display: flex; align-items: center; justify-content: center;
}
.ph__tag {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(14,22,32,0.5);
  background: var(--c-pearl); padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 1px 0 rgba(14,22,32,0.06);
}
.ph__tag::before { content: "□"; font-size: 11px; color: var(--c-slate); }

/* ---------------------------------------------------------------- *
   ROOM FINDER — "which room is right for you"
 * ---------------------------------------------------------------- */
.finder { background: var(--c-bone); padding: clamp(72px, 9vw, 128px) clamp(40px, 8vw, 132px); }
.finder__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 5vw, 92px); align-items: start; }
.finder__intro .eyebrow { margin-bottom: 20px; }
.finder__h {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--c-charcoal); margin: 0 0 20px; max-width: 13ch;
}
.finder__h .it { font-style: italic; }
.finder__note { color: rgba(14,22,32,0.6); font-size: 14.5px; line-height: 1.7; margin: 0; max-width: 38ch; }

.finder__form { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.finder__q-lab {
  font-family: var(--f-body); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-slate);
  display: block; margin-bottom: 14px;
}
.finder__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.finder__chip {
  font-family: var(--f-body); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--c-charcoal);
  background: transparent; border: 1px solid rgba(14,22,32,0.2);
  padding: 13px 20px; cursor: pointer;
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.finder__chip:hover { border-color: var(--c-charcoal); }
.finder__chip[aria-pressed="true"] { background: var(--c-aegean); border-color: var(--c-aegean); color: var(--c-snow); }

.finder__result {
  margin-top: 6px; padding: 26px 28px; background: var(--c-pearl);
  border: 1px solid rgba(14,22,32,0.1);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.finder__result.is-on { opacity: 1; transform: none; }
.finder__result-lab { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(14,22,32,0.45); display: block; margin-bottom: 8px; }
.finder__result-name { font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.04; color: var(--c-charcoal); }
.finder__result-name .it { font-style: italic; }
.finder__result-cta { flex: none; color: var(--c-olive); }
@media (max-width: 860px) {
  .finder__inner { grid-template-columns: 1fr; gap: 32px; }
  .finder__result { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------------------------------------------------------------- *
   ROOMS SHOWCASE — shared DOM, three switchable layouts
 * ---------------------------------------------------------------- */
.showcase { background: var(--c-pearl); padding: clamp(80px, 9vw, 140px) clamp(40px, 8vw, 132px) clamp(48px, 6vw, 96px); }
.showcase__head {
  max-width: 1320px; margin: 0 auto clamp(36px, 4vw, 56px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.showcase__head-l { max-width: 32ch; }

.showcase__h {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -0.012em;
  color: var(--c-charcoal); margin: 16px 0 0;
}
.showcase__h .it { font-style: italic; }

.showcase__list { max-width: 1320px; margin: 0 auto; }

/* ---- the room block (shared markup) ---- */
.rm { position: relative; }
.rm__media { position: relative; }
.rm__photo { position: relative; overflow: hidden; background: var(--c-bone); aspect-ratio: 4 / 5; }
.rm__photo .img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1700ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) { .rm__photo:hover .img { transform: scale(1.08); } }
.rm__num { position: absolute; top: 18px; left: 18px; z-index: 2; font-family: var(--f-display); font-style: italic; font-size: 14px; color: rgba(255,255,255,0.9); text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
.rm__tag-view { position: absolute; top: 18px; right: 18px; z-index: 2; font-family: var(--f-body); font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-snow); background: rgba(14,22,32,0.42); padding: 6px 10px; backdrop-filter: blur(2px); }

.rm__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.rm__thumb { position: relative; overflow: hidden; background: var(--c-bone); aspect-ratio: 3 / 2; }
.rm__thumb .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1200ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) { .rm__thumb:hover .img { transform: scale(1.06); } }

.rm__eyebrow { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-olive); display: block; margin-bottom: 16px; }
.rm__name { font-family: var(--f-display); font-weight: 300; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -0.012em; color: var(--c-charcoal); margin: 0 0 14px; }
.rm__name .it { font-style: italic; }
.rm__mood { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: rgba(14,22,32,0.66); margin: 0 0 24px; max-width: 30ch; }

.rm__specs { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(14,22,32,0.14); }
.rm__specs li { flex: 1 1 33%; min-width: 110px; padding: 16px 0; border-bottom: 1px solid rgba(14,22,32,0.1); }
.rm__specs .k { font-family: var(--f-body); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(14,22,32,0.42); display: block; margin-bottom: 7px; }
.rm__specs .v { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 20px; color: var(--c-charcoal); }

.rm__inc-lab { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-slate); display: block; margin-bottom: 12px; }
.rm__inc { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rm__inc li { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: rgba(14,22,32,0.58); border: 1px solid rgba(14,22,32,0.16); padding: 7px 12px; }

.rm__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.rm__price { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 28px; color: var(--c-aegean); }
.rm__price .from { font-family: var(--f-body); font-style: normal; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(14,22,32,0.42); font-weight: 500; margin-right: 8px; }
.rm__price .per { font-family: var(--f-body); font-style: normal; font-size: 10px; letter-spacing: 0.06em; color: rgba(14,22,32,0.42); margin-left: 4px; }
.rm__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rm__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px;
  font-family: var(--f-body); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--c-charcoal); color: var(--c-snow); text-decoration: none;
  transition: background-color 240ms var(--ease-out);
}
.rm__btn:hover { background: var(--c-aegean); }
.rm__btn--ghost { background: transparent; color: var(--c-charcoal); border: 1px solid rgba(14,22,32,0.22); }
.rm__btn--ghost:hover { background: transparent; border-color: var(--c-charcoal); }
.rm__btn .ar { font-family: var(--f-display); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; }

/* ---- floor plan schematic ---- */
.rm__plan { margin: 0 0 28px; }
.rm__plan-lab { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-slate); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rm__plan-lab::after { content: ""; flex: 1; height: 1px; background: rgba(14,22,32,0.14); }
.plan {
  display: grid; gap: 6px; max-width: 360px;
  aspect-ratio: 16 / 9;
  padding: 10px; border: 1px solid rgba(14,22,32,0.22); background: var(--c-bone);
}
.plan__cell {
  border: 1px solid rgba(14,22,32,0.28);
  display: flex; align-items: flex-end; padding: 8px;
  font-family: ui-monospace, Menlo, monospace; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(14,22,32,0.55); background: rgba(255,255,255,0.4);
}
.plan__cell--soft { background: transparent; border-style: dashed; color: rgba(14,22,32,0.4); align-items: center; justify-content: center; }
.plan__cell--water { background: rgba(43,111,219,0.07); border-color: rgba(31,98,168,0.3); color: rgba(31,98,168,0.7); }

.plan--deluxe  { grid-template-columns: 2fr 1fr; grid-template-areas: "bed bath" "bed terr"; }
.plan--premium { grid-template-columns: 2fr 1fr; grid-template-areas: "bed bath" "lounge terr"; }
.plan--luxury  { grid-template-columns: 2fr 1fr; grid-template-rows: 1.4fr 1fr; grid-template-areas: "bed bath" "terr terr"; }
.plan--family  { grid-template-columns: 1fr 1fr; grid-template-areas: "bedA bedB" "bath shared"; }
.plan--villa   { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "bedA bedB living" "garden garden living"; }
.p-bed   { grid-area: bed; }
.p-bedA  { grid-area: bedA; }
.p-bedB  { grid-area: bedB; }
.p-bath  { grid-area: bath; }
.p-terr  { grid-area: terr; }
.p-lounge{ grid-area: lounge; }
.p-shared{ grid-area: shared; }
.p-living{ grid-area: living; }
.p-garden{ grid-area: garden; }

/* =====================  VIEW : EDITORIAL  ===================== */
.showcase[data-view="editorial"] .showcase__list { display: block; }
.showcase[data-view="editorial"] .rm {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 88px);
  align-items: center; padding: clamp(56px, 7vw, 110px) 0; border-top: 1px solid rgba(14,22,32,0.12);
}
.showcase[data-view="editorial"] .rm:first-child { border-top: 0; padding-top: clamp(8px, 2vw, 24px); }
.showcase[data-view="editorial"] .rm:nth-child(even) .rm__media { order: 2; }
.showcase[data-view="editorial"] .rm__photo { aspect-ratio: 4 / 5; }

/* =====================  VIEW : CARDS  ===================== */
.showcase[data-view="cards"] .showcase__list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 44px);
}
.showcase[data-view="cards"] .rm { display: flex; flex-direction: column; }
.showcase[data-view="cards"] .rm__photo { aspect-ratio: 4 / 5; }
.showcase[data-view="cards"] .rm__thumbs,
.showcase[data-view="cards"] .rm__plan { display: none; }
.showcase[data-view="cards"] .rm__media { margin-bottom: 22px; }
.showcase[data-view="cards"] .rm__name { font-size: clamp(26px, 1.9vw, 32px); }
.showcase[data-view="cards"] .rm__mood { font-size: 17px; margin-bottom: 18px; }
.showcase[data-view="cards"] .rm__specs { margin-bottom: 18px; }
.showcase[data-view="cards"] .rm__specs li { flex-basis: 50%; padding: 12px 0; }
.showcase[data-view="cards"] .rm__specs .v { font-size: 17px; }
.showcase[data-view="cards"] .rm__inc { display: none; }
.showcase[data-view="cards"] .rm__inc-lab { display: none; }
.showcase[data-view="cards"] .rm__foot { margin-top: auto; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 18px; border-top: 1px solid rgba(14,22,32,0.12); }
.showcase[data-view="cards"] .rm__actions { width: 100%; }
.showcase[data-view="cards"] .rm__btn { flex: 1; justify-content: center; padding: 13px 14px; }
@media (max-width: 1080px) { .showcase[data-view="cards"] .showcase__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .showcase[data-view="cards"] .showcase__list { grid-template-columns: 1fr; } }

/* =====================  VIEW : LIST  ===================== */
.showcase[data-view="list"] .showcase__list { display: block; border-top: 1px solid rgba(14,22,32,0.14); }
.showcase[data-view="list"] .rm {
  display: grid; grid-template-columns: 200px 1fr auto; gap: clamp(24px, 3vw, 48px);
  align-items: center; padding: 26px 0; border-bottom: 1px solid rgba(14,22,32,0.12);
}
.showcase[data-view="list"] .rm__photo { aspect-ratio: 4 / 3; }
.showcase[data-view="list"] .rm__num { font-size: 12px; top: 12px; left: 12px; }
.showcase[data-view="list"] .rm__tag-view { display: none; }
.showcase[data-view="list"] .rm__thumbs,
.showcase[data-view="list"] .rm__plan,
.showcase[data-view="list"] .rm__inc,
.showcase[data-view="list"] .rm__inc-lab { display: none; }
.showcase[data-view="list"] .rm__eyebrow { margin-bottom: 10px; }
.showcase[data-view="list"] .rm__name { font-size: clamp(24px, 2vw, 30px); margin-bottom: 10px; }
.showcase[data-view="list"] .rm__mood { font-size: 16px; margin-bottom: 16px; max-width: 46ch; }
.showcase[data-view="list"] .rm__specs { display: flex; border: 0; margin: 0; gap: 8px 24px; }
.showcase[data-view="list"] .rm__specs li { flex: 0 0 auto; min-width: 0; padding: 0; border: 0; }
.showcase[data-view="list"] .rm__specs .v { font-size: 16px; }
.showcase[data-view="list"] .rm__foot { flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.showcase[data-view="list"] .rm__actions { justify-content: flex-end; }
@media (max-width: 860px) {
  .showcase[data-view="list"] .rm { grid-template-columns: 1fr; gap: 18px; }
  .showcase[data-view="list"] .rm__photo { aspect-ratio: 16 / 9; }
  .showcase[data-view="list"] .rm__foot { align-items: flex-start; text-align: left; }
  .showcase[data-view="list"] .rm__actions { justify-content: flex-start; }
}

/* editorial / generic responsive */
@media (max-width: 860px) {
  .showcase[data-view="editorial"] .rm { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; }
  .showcase[data-view="editorial"] .rm:nth-child(even) .rm__media { order: 0; }
}

/* ---------------------------------------------------------------- *
   FAQ
 * ---------------------------------------------------------------- */
.faq { background: var(--c-bone); padding: clamp(88px, 10vw, 150px) clamp(40px, 8vw, 132px); }
.faq__inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.faq__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(28px, 3vw, 44px); line-height: 1.06; letter-spacing: -0.01em; color: var(--c-charcoal); margin: 16px 0 0; max-width: 12ch; }
.faq__h .it { font-style: italic; }
.faq__list { border-top: 1px solid rgba(14,22,32,0.16); }
.faq__item { border-bottom: 1px solid rgba(14,22,32,0.14); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--f-display); font-weight: 300; font-size: clamp(19px, 1.7vw, 24px);
  color: var(--c-charcoal); letter-spacing: -0.005em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ic { flex: none; width: 16px; height: 16px; position: relative; }
.faq__item summary .ic::before, .faq__item summary .ic::after { content: ""; position: absolute; background: var(--c-slate); transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); }
.faq__item summary .ic::before { top: 7px; left: 0; width: 16px; height: 1.5px; }
.faq__item summary .ic::after { top: 0; left: 7px; width: 1.5px; height: 16px; }
.faq__item[open] summary .ic::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 36px 26px 0; color: rgba(14,22,32,0.7); font-size: 15px; line-height: 1.75; max-width: 60ch; }
.faq__a p { margin: 0; }
@media (max-width: 820px) { .faq__inner { grid-template-columns: 1fr; gap: 28px; } }

/* ---------------------------------------------------------------- *
   CARD → DETAIL + GALLERY OVERLAY
 * ---------------------------------------------------------------- */
/* the card photo is now the doorway into the room's full detail + gallery */
.rm__photo { cursor: pointer; }
.rm__open {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 30px 16px 14px;
  font-family: var(--f-body); font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-snow);
  background: linear-gradient(0deg, rgba(14,22,32,0.6), rgba(14,22,32,0));
  opacity: 0; transform: translateY(6px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  pointer-events: none;
}
.rm__photo:hover .rm__open { opacity: 1; transform: none; }
.rm__open .c { font-family: var(--f-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 16px; }
@media (hover: none) { .rm__open { opacity: 1; transform: none; } }

body.rmx-open { overflow: hidden; }
.rmx { position: fixed; inset: 0; z-index: 1200; display: none; }
.rmx.is-open { display: block; }
.rmx__scrim {
  position: absolute; inset: 0; background: rgba(10,16,24,0.66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 380ms var(--ease-out);
}
.rmx.is-open .rmx__scrim { opacity: 1; }
.rmx__panel {
  position: absolute; inset: clamp(14px, 3.5vw, 52px);
  background: var(--c-pearl); overflow: hidden;
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  box-shadow: 0 30px 90px rgba(0,0,0,0.42);
  opacity: 0; transform: translateY(16px) scale(0.99);
  transition: opacity 440ms var(--ease-out), transform 440ms var(--ease-out);
}
.rmx.is-open .rmx__panel { opacity: 1; transform: none; }
.rmx__close {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.92); color: var(--c-charcoal);
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background-color 220ms var(--ease-out);
}
.rmx__close:hover { background: #fff; }
.rmx__gallery { position: relative; background: var(--c-bone); overflow: hidden; }
.rmx__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 520ms var(--ease-in-out); }
.rmx__slide.is-active { opacity: 1; }
.rmx__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.85); color: var(--c-charcoal);
  font-family: var(--f-display); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 200ms var(--ease-out);
}
.rmx__nav:hover { background: #fff; }
.rmx__nav--prev { left: 16px; }
.rmx__nav--next { right: 16px; }
.rmx__count {
  position: absolute; bottom: 16px; left: 16px; z-index: 3;
  font-family: var(--f-body); font-size: 10px; letter-spacing: 0.16em; font-weight: 500;
  color: var(--c-snow); background: rgba(14,22,32,0.5); padding: 7px 12px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rmx__detail { padding: clamp(28px, 3vw, 52px); overflow-y: auto; }
.rmx__detail .rm__eyebrow { color: var(--c-olive); }
.rmx__detail .rm__name { margin-top: 8px; }
.rmx__detail .rm__plan { margin-top: 6px; }
@media (max-width: 860px) {
  .rmx__panel { inset: 0; grid-template-columns: 1fr; grid-template-rows: 42vh auto; overflow-y: auto; }
  .rmx__gallery { grid-row: 1; }
  .rmx__detail { grid-row: 2; overflow: visible; }
  .rmx__nav { width: 40px; height: 40px; font-size: 20px; }
}

/* ---------------------------------------------------------------- *
   MOBILE SWIPE CAROUSEL — rooms become a horizontal rail on phones
 * ---------------------------------------------------------------- */
.swipe-hint { display: none; }
@media (max-width: 680px) {
  .swipe-hint {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--f-body); font-size: 10px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase; color: rgba(14,22,32,0.4);
    margin: 0 0 18px;
  }
  .swipe-hint::after { content: ""; flex: 1; height: 1px; background: rgba(14,22,32,0.14); }
  .swipe-hint .ar { letter-spacing: 0; font-size: 13px; }

  .showcase[data-view="cards"] .showcase__list {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin-left: -24px; margin-right: -24px;
    padding: 2px 24px 16px;
    scrollbar-width: none;
  }
  .showcase[data-view="cards"] .showcase__list::-webkit-scrollbar { display: none; }
  .showcase[data-view="cards"] .rm { flex: 0 0 84%; scroll-snap-align: start; }
}

/* Standalone Page Overrides */
.sv-standalone-modal { padding: 40px; min-height: 100vh; background: rgba(10,16,24,0.02); display: flex; align-items: center; justify-content: center; }
@media(max-width:860px) { .sv-standalone-modal { padding: 0; } }
.sv-standalone-panel { position: relative; inset: auto; max-width: 1300px; width: 100%; min-height: 80vh; transform: none !important; opacity: 1 !important; border-radius: 8px; }
.sv-standalone-panel .rmx__gallery { grid-row: 1; min-height: 300px; }
.sv-standalone-panel .rmx__detail { grid-row: 2; height: auto; overflow: visible; }
@media(min-width:861px){ .sv-standalone-panel .rmx__gallery { grid-row: 1; grid-column: 1; } .sv-standalone-panel .rmx__detail { grid-row: 1; grid-column: 2; height: 100%; overflow-y: auto; } }