/* ============================================================
   EVORA — THE SHOWROOM
   360-degree rooms, one per category, built from CSS 3D planes.
   The camera stands in the centre and the room turns around it.

   Sizes here are the UNSCALED originals. js/showroom.js emits a small
   stylesheet that overrides every size-bearing value with the same scale
   factor it uses for the geometry, so the type shrinks with the room. If
   that script never runs these values still give a sane page.

   Transform origins: every plane is placed from its own CENTRE
   (left/top 50% plus negative margins), so nothing here may set
   transform-origin — the geometry in showroom.js depends on the default.
   ============================================================ */

.sr-body { overflow: hidden; background: #05100D; }
body.sr-locked { overflow: hidden; }

.sr {
  position: fixed; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, #16362F 0%, #0C2019 48%, #050E0B 100%);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.4s ease;
}
.sr.is-dragging { cursor: grabbing; }
.sr.is-fading { opacity: 0; }

.sr-stage {
  position: absolute; inset: 0;
  perspective: 1450px;          /* overridden, scaled, from JS */
  perspective-origin: 50% 50%;
}

.sr-world {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Every plane hides its own back, so the panels behind the camera drop out
   instead of rendering inside-out through the view. */
.sr-face {
  position: absolute; top: 50%; left: 50%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* ---------------- surfaces ---------------- */

.sr-panel {
  background:
    /* recessed joinery seams down each panel */
    linear-gradient(90deg,
      rgba(0,0,0,0.34) 0 2px,
      rgba(243,199,125,0.06) 2px 4px,
      rgba(0,0,0,0) 4px calc(100% - 4px),
      rgba(243,199,125,0.06) calc(100% - 4px) calc(100% - 2px),
      rgba(0,0,0,0.34) calc(100% - 2px) 100%),
    linear-gradient(180deg, #1B4038 0%, #326256 32%, #2B5449 70%, #16332A 100%);
}
/* picture rail and skirting — the detail that reads as fitted joinery */
.sr-panel::before,
.sr-panel::after {
  content: ""; position: absolute; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, rgba(243,199,125,0) 0%, rgba(243,199,125,0.55) 14%, rgba(243,199,125,0.55) 86%, rgba(243,199,125,0) 100%);
}
.sr-panel::before { top: 15%; }
.sr-panel::after  { bottom: 12%; box-shadow: 0 8px 34px rgba(243,199,125,0.18); }

/* The Custom Projects room is a different place: walnut and brass, not
   forest and gold. Older, quieter, and deliberately harder to see into. */
.sr.is-custom { background: radial-gradient(120% 90% at 50% 45%, #241610 0%, #150C08 52%, #070403 100%); }
.sr-panel--wood {
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.5) 0 3px,
      rgba(198,150,74,0.07) 3px 5px,
      rgba(0,0,0,0) 5px calc(100% - 5px),
      rgba(198,150,74,0.07) calc(100% - 5px) calc(100% - 3px),
      rgba(0,0,0,0.5) calc(100% - 3px) 100%),
    repeating-linear-gradient(92deg,
      rgba(255,255,255,0.014) 0 6px,
      rgba(0,0,0,0.05) 6px 13px),
    linear-gradient(180deg, #2A1A12 0%, #4A2E1E 34%, #3B2417 72%, #1A0F0A 100%);
}
.sr-panel--wood::before,
.sr-panel--wood::after {
  background: linear-gradient(90deg, rgba(198,150,74,0) 0%, rgba(198,150,74,0.6) 14%, rgba(198,150,74,0.6) 86%, rgba(198,150,74,0) 100%);
}

.sr-floor {
  background:
    radial-gradient(closest-side, rgba(255,236,200,0.10), rgba(0,0,0,0.5) 78%),
    repeating-radial-gradient(closest-side,
      rgba(255,255,255,0.02) 0 5%,
      rgba(0,0,0,0.10) 5% 10%),
    linear-gradient(135deg, #253A32 0%, #335044 50%, #253A32 100%);
}
.is-custom .sr-floor {
  background:
    radial-gradient(closest-side, rgba(198,150,74,0.10), rgba(0,0,0,0.62) 78%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.015) 0 22px,
      rgba(0,0,0,0.09) 22px 44px),
    linear-gradient(135deg, #2A1A12 0%, #3E2718 50%, #2A1A12 100%);
}

.sr-ceil {
  background:
    radial-gradient(closest-side, rgba(243,199,125,0.10), rgba(0,0,0,0.86) 72%),
    linear-gradient(135deg, #06120F 0%, #0D211B 50%, #06120F 100%);
}
.is-custom .sr-ceil {
  background:
    radial-gradient(closest-side, rgba(198,150,74,0.08), rgba(0,0,0,0.9) 70%),
    linear-gradient(135deg, #0B0705 0%, #1A100A 50%, #0B0705 100%);
}

/* Evora, inlaid in the floor. Branding you stand on, rather than a logo
   pasted over the view. */
.sr-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: 46px; letter-spacing: 22px;
  color: rgba(243,199,125,0.30);
  white-space: nowrap; pointer-events: none;
}
.is-custom .sr-mark { color: rgba(198,150,74,0.26); }

/* ---------------- the light ----------------
   A lamp on the ceiling and its pool on the floor, one pair per panel.
   This is the CSS stand-in for the gobo textures a WebGL build would
   project, and it is what stops the room reading as flat colour. */
.sr-lamp, .sr-pool, .sr-wash { position: absolute; pointer-events: none; border-radius: 50%; }
.sr-lamp {
  /* Soft stops rather than filter: blur(). There are two of these per wall,
     and every blur is its own render surface — twenty of them was a
     measurable share of the frame for an effect a gradient already gives. */
  background: radial-gradient(closest-side,
    rgba(255,244,222,0.9) 0%, rgba(255,240,210,0.55) 24%,
    rgba(243,199,125,0.28) 46%, rgba(243,199,125,0.08) 66%, rgba(243,199,125,0) 84%);
}
.sr-pool {
  background: radial-gradient(closest-side,
    rgba(255,232,190,0.38) 0%, rgba(255,232,190,0.22) 26%,
    rgba(243,199,125,0.10) 52%, rgba(243,199,125,0.03) 70%, rgba(243,199,125,0) 86%);
}
/* the soft bloom a picture light throws behind a frame — without it the
   frames float on flat paint and read as pasted on */
.sr-wash {
  background: radial-gradient(closest-side, rgba(255,236,200,0.24), rgba(243,199,125,0.06) 50%, rgba(243,199,125,0) 80%);
}
.is-custom .sr-lamp { background: radial-gradient(closest-side, rgba(255,226,170,0.8), rgba(198,150,74,0.34) 40%, rgba(198,150,74,0) 76%); }
.is-custom .sr-pool { background: radial-gradient(closest-side, rgba(226,186,126,0.3), rgba(198,150,74,0.1) 48%, rgba(198,150,74,0) 78%); }
.is-custom .sr-wash { background: radial-gradient(closest-side, rgba(226,186,126,0.2), rgba(198,150,74,0.06) 50%, rgba(198,150,74,0) 80%); }

/* ---------------- what hangs on the walls ---------------- */

/* Everything mounted on a wall is lifted a hair off it.
   A child with no transform is COPLANAR with its panel, and coplanar
   surfaces in a preserve-3d context z-fight: the room title simply stopped
   painting — present in the DOM, correct size, correct colour, on screen,
   and invisible, with the wall's own background winning the depth test.
   A couple of pixels of translateZ ends it for good. */
.sr-plaque {
  position: absolute; left: 7%; right: 7%; top: 21%;
  color: var(--cream); text-align: center; pointer-events: none;
  transform: translateZ(2px);
}
/* the contact wall has to fit a heading, a paragraph and a button, so it
   starts higher and holds a tighter column than a room title does */
.sr-plaque--contact { top: 13%; left: 11%; right: 11%; }
.sr-plaque .k {
  display: block; font-family: var(--sans);
  font-size: 24px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); opacity: 0.85; margin-bottom: 16px;
}
.sr-plaque .t {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 108px; line-height: 1.04; letter-spacing: -0.01em;
  text-shadow: 0 6px 40px rgba(0,0,0,0.6);
}
.sr-plaque .d {
  font-family: var(--sans); font-size: 26px; line-height: 1.5;
  color: rgba(247,243,236,0.62); margin: 20px auto 0; max-width: 88%;
}
.is-custom .sr-plaque .k { color: #C6964A; }
.is-custom .sr-plaque .t { color: #F0E2CC; }

/* ---------------- category columns ----------------
   Each wall is one sub-category, scrolling vertically like a reel, so a
   whole category can be browsed without leaving the room and no wall is
   ever static. */
.sr-col {
  position: absolute; overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateZ(2px);          /* off the wall — see .sr-plaque */
}
.sr-col__head {
  flex: none;
  font-family: var(--sans); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); text-align: center;
  padding-bottom: 0.5em; margin-bottom: 0.6em;
  border-bottom: 2px solid rgba(243,199,125,0.4);
  display: flex; align-items: baseline; justify-content: center; gap: 0.7em;
}
.sr-col__head i { font-style: normal; opacity: 0.6; font-size: 0.7em; }

/* The window clips the reel. Tiles are absolutely positioned inside it and
   each animates from below the window to above it on a stagger; when one
   finishes a pass, JS hands it the next product and it comes round again.
   See the note in showroom.js — a duplicated scrolling strip is the obvious
   approach and it is the one that broke rasterization twice. */
/* flex:1 rather than a top offset — the header's height depends on a
   font-size set from the room geometry, so it cannot be guessed in em. */
.sr-col__win { position: relative; flex: 1; min-height: 0; overflow: hidden; }
@keyframes sr-reel {
  from { transform: translateY(var(--from)); }
  to   { transform: translateY(var(--to)); }
}
/* stop the reel while someone is reaching for something on it */
.sr-col:hover .sr-row { animation-play-state: paused; }

/* NO transform-style on a tile, and it must stay that way.
   A tile contains only 2D children (the box, the photo, the caption), so
   preserve-3d bought nothing — but each one opened a nested 3D rendering
   context, and past about six of them Chrome abandons 3D rendering and
   flattens the WHOLE room into a single texture, which it then transforms as
   one unit. The symptom is bizarre and gives no console error: one product
   photo blown up to fill the screen, blurred, ignoring any style you change,
   while the DOM still reports correct positions and hit-testing still works.
   One tile looked perfect; eight broke everything.
   The hover lift below still works, because an element's own transform is
   resolved in its PARENT's 3D context — and the panel has preserve-3d.
   transform-style only ever governs an element's children. */
/* The animated unit is a ROW. A wide wall carries several tiles abreast so
   the column fills it, instead of one narrow strip stranded in the middle. */
.sr-row {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: stretch; justify-content: center;
  animation: sr-reel linear infinite;
}
.sr-tile { position: relative; flex: none; cursor: pointer; }
/* The hover lift cannot use transform — the reel animation owns that. A
   brightening frame does the same job without fighting the keyframes. */
.sr-tile__box { transition: box-shadow 0.35s ease, border-color 0.35s ease; }
.sr-tile__box {
  position: absolute; inset: 0;
  background: linear-gradient(170deg, #F7F3EC 0%, #E6DCCB 100%);
  border: 2px solid rgba(243,199,125,0.55);
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 0 7px rgba(10,22,18,0.45);
  overflow: hidden;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.sr-tile__media { position: absolute; inset: 0; }
.sr-tile__box img, .sr-tile__box video {
  width: 100%; height: 100%;
  object-fit: contain; padding: 6%;
  /* NO filter here, at rest or on hover.
     The tiles used to carry filter: saturate/contrast/brightness and drop it
     to `none` on hover. A filter creates a render surface, so hovering
     created and destroyed one inside the preserve-3d context on every
     pointer move — the compositor re-evaluated the whole scene each time and
     the entire room flickered. There were also ~18 of these surfaces alive
     at once, for a tint nobody could see. */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The label sits on the piece, not under it. Hung below, a caption ended up
   closer to the NEXT tile in the reel than to its own and read as that
   tile's heading. */
.sr-tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6em 0.8em 0.7em; text-align: center; pointer-events: none;
  background: linear-gradient(to top, rgba(10,22,18,0.9) 0%, rgba(10,22,18,0.72) 45%, rgba(10,22,18,0) 100%);
}
.sr-tile__cap b {
  display: block; font-family: var(--serif); font-weight: 500;
  color: var(--cream); line-height: 1.2;
}
.sr-tile__cap span { display: block; margin-top: 0.25em; font-family: var(--sans); letter-spacing: 0.08em; color: var(--gold); }

.sr-tile:hover .sr-tile__box {
  border-color: rgba(243,199,125,0.95);
  box-shadow: 0 14px 34px rgba(0,0,0,0.6), 0 0 0 7px rgba(10,22,18,0.45), 0 0 22px rgba(243,199,125,0.35);
}
.sr-tile:hover .sr-tile__box img, .sr-tile:hover .sr-tile__box video { transform: scale(1.03); }

/* the whole-category route, on the wall as well as in the HUD */
.sr-wallcta {
  position: absolute; left: 50%; top: 70%; white-space: nowrap;
  transform: translateX(-50%) translateZ(4px);   /* off the wall */
  font-family: var(--sans); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--forest); background: var(--gold);
  padding: 0.8em 1.6em; border-radius: 999px;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.3s ease, transform 0.3s ease;
}
.sr-wallcta:hover { background: var(--cream); transform: translateX(-50%) translateZ(4px) scale(1.04); }

/* an empty case-study slot, so the Custom Projects room reads correctly
   before the photography arrives and it is obvious what is still missing */
.sr-tile--slot { cursor: default; }
.sr-slot {
  background: repeating-linear-gradient(45deg,
    rgba(198,150,74,0.05) 0 14px, rgba(198,150,74,0.11) 14px 28px);
  border: 2px dashed rgba(198,150,74,0.5) !important;
  box-shadow: none !important;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.sr-slot__label {
  font-family: var(--serif); font-size: 26px; color: rgba(240,226,204,0.8);
}
.sr-slot__hint {
  font-family: var(--sans); font-size: 20px; margin-top: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(198,150,74,0.85);
}

/* a way out of the room, inside the room */
.sr-doorway {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: 12%; text-align: center; cursor: pointer;
  background: radial-gradient(120% 100% at 50% 100%, rgba(243,199,125,0.32), rgba(243,199,125,0.05) 55%, rgba(0,0,0,0.9) 100%);
  border: 2px solid rgba(243,199,125,0.4);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 24% 24% 0 0;
  box-shadow: 0 0 110px rgba(243,199,125,0.24), inset 0 0 70px rgba(0,0,0,0.6);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.sr-doorway:hover { border-color: rgba(243,199,125,0.85); box-shadow: 0 0 150px rgba(243,199,125,0.42), inset 0 0 70px rgba(0,0,0,0.5); }
.sr-doorway .k {
  font-family: var(--sans); font-size: 22px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
.sr-doorway .t { font-family: var(--serif); font-size: 62px; color: var(--cream); line-height: 1.1; }
.sr-doorway--flat {
  border-radius: 999px; border-bottom: 2px solid rgba(198,150,74,0.5);
  padding-bottom: 0; justify-content: center;
  background: rgba(198,150,74,0.14);
  box-shadow: none;
}
.is-custom .sr-doorway {
  border-color: rgba(198,150,74,0.5);
  background: radial-gradient(120% 100% at 50% 100%, rgba(198,150,74,0.3), rgba(198,150,74,0.04) 55%, rgba(0,0,0,0.92) 100%);
  box-shadow: 0 0 110px rgba(198,150,74,0.2), inset 0 0 70px rgba(0,0,0,0.66);
}
.is-custom .sr-doorway .k { color: #C6964A; }
.is-custom .sr-doorway .t { color: #F0E2CC; }

/* ---------------- filmic overlays ----------------
   Grain, vignette and a slow bloom. Same job as the noise plate and gobo a
   WebGL build would ship: break up the clean digital edges so the room
   reads as photographed rather than drawn. */

.sr-grain {
  position: absolute; inset: -70px; z-index: 6; pointer-events: none;
  /* No mix-blend-mode. Blending forces the compositor to read the whole
     backdrop back every frame, and this layer is full-screen and animating —
     it was the single largest constant cost in the room. Plain alpha noise
     at low opacity reads almost the same. */
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: sr-grain 0.7s steps(4) infinite;
}
@keyframes sr-grain {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-22px, 12px, 0); }
  50%  { transform: translate3d(16px, -18px, 0); }
  75%  { transform: translate3d(-12px, -8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.sr-vig {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(135% 110% at 50% 48%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.36) 80%, rgba(0,0,0,0.72) 100%);
}
.sr-bloom {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(46% 40% at 50% 46%, rgba(243,199,125,0.12), rgba(243,199,125,0) 70%);
  animation: sr-breathe 13s ease-in-out infinite;
}
.is-custom .sr-bloom { background: radial-gradient(46% 40% at 50% 46%, rgba(198,150,74,0.12), rgba(198,150,74,0) 70%); }
/* opacity only — scaling a full-screen gradient forces it to re-rasterize
   on every frame of the loop */
@keyframes sr-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ============================================================
   THE GATE
   A pair of doors that actually open. It is also what buys the sound:
   browsers will not start audio without a user gesture, and the click
   that opens the gate is that gesture.
   ============================================================ */

.sr-gate {
  position: fixed; inset: 0; z-index: 40;
  background: radial-gradient(110% 90% at 50% 46%, #16362F 0%, #081713 58%, #030907 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--pad);
  transition: opacity 1.1s ease, visibility 1.1s;
}
.sr-gate.is-out { opacity: 0; visibility: hidden; }

.sr-gate__sound {
  position: absolute; top: 5vh; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(243,199,125,0.75);
}

/* the arch the doors sit in */
.sr-gate__arch {
  position: relative;
  width: min(560px, 84vw); height: min(74vh, 660px);
  perspective: 1600px;
  border-radius: 50% 50% 6px 6px / 30% 30% 0 0;
  /* what is behind the doors: warm light, waiting */
  background: radial-gradient(120% 90% at 50% 78%, #F3C77D 0%, #B98B45 30%, #3B2A16 70%, #0B1A14 100%);
  box-shadow: 0 0 160px rgba(243,199,125,0.22), inset 0 0 90px rgba(0,0,0,0.5);
}
/* brass surround */
.sr-gate__arch::before {
  content: ""; position: absolute; inset: -10px;
  border: 2px solid rgba(243,199,125,0.55);
  border-radius: 50% 50% 8px 8px / 30% 30% 0 0;
  pointer-events: none;
}

.sr-gate__leaf {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    /* jaali lattice — the pierced screen you find on an Indian door */
    repeating-linear-gradient(45deg,
      rgba(243,199,125,0.16) 0 1px, rgba(0,0,0,0) 1px 26px),
    repeating-linear-gradient(-45deg,
      rgba(243,199,125,0.16) 0 1px, rgba(0,0,0,0) 1px 26px),
    linear-gradient(180deg, #1E4239 0%, #16362F 55%, #0D231D 100%);
  border: 1px solid rgba(243,199,125,0.42);
  transition: transform 1.5s cubic-bezier(0.6, 0, 0.2, 1), box-shadow 1.5s ease;
  backface-visibility: hidden;
}
.sr-gate__leaf--l {
  left: 0; transform-origin: left center;
  border-radius: 50% 0 0 4px / 30% 0 0 0;
  box-shadow: inset -22px 0 44px rgba(0,0,0,0.55);
}
.sr-gate__leaf--r {
  right: 0; transform-origin: right center;
  border-radius: 0 50% 4px 0 / 0 30% 0 0;
  box-shadow: inset 22px 0 44px rgba(0,0,0,0.55);
}
/* The handles sit low, below the signage. At door-centre they landed in the
   middle of the paragraph, and on a phone — where the copy fills the arch —
   they read as marks struck through the text. */
.sr-gate__leaf::after {
  content: ""; position: absolute; top: 82%;
  width: 11px; height: 54px; border-radius: 999px;
  background: linear-gradient(180deg, #F3C77D, #9A7233);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  opacity: 0.9;
}
.sr-gate__leaf--l::after { right: 16px; }
.sr-gate__leaf--r::after { left: 16px; }

.sr-gate.is-opening .sr-gate__leaf--l { transform: rotateY(-108deg); box-shadow: none; }
.sr-gate.is-opening .sr-gate__leaf--r { transform: rotateY(108deg); box-shadow: none; }

/* the signage, laid over the closed doors */
.sr-gate__copy {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 6% 9%;
  transition: opacity 0.55s ease;
}
.sr-gate.is-opening .sr-gate__copy { opacity: 0; }
.sr-gate__logo {
  font-family: var(--serif); font-size: 1rem; letter-spacing: 0.42em;
  color: var(--gold); margin-bottom: 1.6rem;
}
.sr-gate__copy h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.8rem, 4.4vw, 3rem); line-height: 1.08;
  color: var(--cream);
}
.sr-gate__copy h1 em { font-style: italic; color: var(--gold); }
.sr-gate__copy p {
  margin-top: 1rem; max-width: 30ch;
  color: rgba(247,243,236,0.62); font-size: 0.86rem; line-height: 1.65;
}
.sr-gate__enter {
  margin-top: 2rem;
  font-family: var(--sans); font-size: 0.7rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--forest); background: var(--gold);
  padding: 1.05rem 2.6rem; border-radius: 999px;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
  animation: sr-pulse 3s ease-in-out infinite;
}
.sr-gate__enter:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 44px rgba(243,199,125,0.4); }
@keyframes sr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243,199,125,0.35); }
  50%      { box-shadow: 0 0 0 18px rgba(243,199,125,0); }
}
.sr-gate__skip {
  position: absolute; bottom: 5vh; left: 0; right: 0; text-align: center;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(247,243,236,0.42);
  transition: opacity 0.55s ease;
}
.sr-gate__skip span { border-bottom: 1px solid rgba(247,243,236,0.24); padding-bottom: 3px; }
.sr-gate__skip:hover { color: var(--cream); }
.sr-gate.is-opening .sr-gate__skip { opacity: 0; }

/* ============================================================
   HUD
   ============================================================ */

.sr-topbar {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  padding: 18px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none; opacity: 0;
  transition: opacity 0.9s ease 0.4s;
}
.sr-topbar.is-in { opacity: 1; }
.sr-topbar > * { pointer-events: auto; }
.sr-topbar__logo { font-family: var(--serif); letter-spacing: 0.34em; color: var(--gold); font-size: 0.9rem; }

/* The shared sound toggle and cart icon take their colour from the nav.
   There is no nav here, so without this they inherit --ink and disappear
   into a dark room — which is exactly how they first shipped. */
.sr-topbar .nav__right { color: rgba(247,243,236,0.82); display: flex; align-items: center; gap: 10px; }
.sr-topbar .nav__cart { position: relative; display: flex; }

.sr-exit {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(247,243,236,0.6); border: 1px solid rgba(247,243,236,0.22);
  padding: 0.55rem 1.2rem; border-radius: 999px; transition: all 0.3s ease;
  white-space: nowrap;
}
.sr-exit:hover { color: var(--forest); background: var(--cream); border-color: var(--cream); }

.sr-hint {
  position: fixed; z-index: 19; left: 50%; bottom: 128px; transform: translateX(-50%);
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(247,243,236,0.45); text-align: center; pointer-events: none;
  transition: opacity 0.8s ease; white-space: nowrap;
}
.sr-hint.is-gone { opacity: 0; }

.sr-hud {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: stretch;
  pointer-events: none; opacity: 0;
  transition: opacity 0.9s ease 0.4s;
}
.sr-hud.is-in { opacity: 1; }
.sr-hud > * { pointer-events: auto; }

.sr-rail {
  display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
  padding: 0 var(--pad) 12px;
}
.sr-rail button {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(247,243,236,0.52);
  padding: 0.5rem 0.85rem; border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.sr-rail button:hover { color: var(--cream); background: rgba(247,243,236,0.08); }
.sr-rail button.is-here { color: var(--forest); background: var(--gold); border-color: var(--gold); }

/* The whole-category route out, bold across the bottom so it is never
   something you have to go looking for. */
.sr-all {
  display: block; text-align: center;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(0.78rem, 1.9vw, 0.95rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest); background: var(--gold);
  padding: 1.05rem 1rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.sr-all:hover { background: var(--cream); }
.is-custom-hud .sr-all { background: #C6964A; color: #1A0F0A; }

/* ============================================================
   PRODUCT VIEW
   Left: the piece and its add to cart. Right: more from the same
   category. Bottom: the whole category as a list.
   ============================================================ */

.sr-view {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(6, 16, 13, 0.93);
  /* no backdrop-filter: the panel is 93% opaque, so the blur behind it was
     invisible and cost a full backdrop snapshot of the 3D room to produce */
  color: var(--cream);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1), visibility 0.45s;
}
.sr-view.is-open { opacity: 1; visibility: visible; transform: none; }

.sr-view__close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(247,243,236,0.25); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
.sr-view__close:hover { background: var(--cream); color: var(--forest); }

/* Stacked (phone) it is BLOCK flow, not a one-column grid.
   As a grid, the two sections became auto rows inside a flex child of fixed
   height and the row sizing clamped them: the "more in this collection" rail
   resolved to 54px with its whole list clipped, even with align-content:start.
   Block children just take their natural height and the container scrolls,
   which also keeps the bold browse bar pinned underneath. The two-column
   desktop layout is where a grid earns its place, so it starts at 900px. */
.sr-view__inner {
  flex: 1; min-height: 0;
  display: block;
  overflow-y: auto;
}
@media (min-width: 900px) {
  .sr-view__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
    overflow: hidden;
  }
  .sr-view__inner--case { grid-template-columns: 1fr; }
}

.sr-view__main {
  display: grid; gap: clamp(20px, 3vw, 40px);
  padding: clamp(52px, 5vw, 64px) clamp(20px, 4vw, 56px) clamp(24px, 3vw, 40px);
  align-content: start;
}
@media (min-width: 900px) {
  .sr-view__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; overflow-y: auto; }
}

.sr-view__img {
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: #F1EADE;
}
.sr-view__img img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }

.sr-view__txt .k {
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}
.sr-view__txt h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--cream); margin: 0.5rem 0 0.6rem;
}
.sr-view__txt .price { font-family: var(--serif); font-size: 1.35rem; color: var(--gold); }
.sr-view__txt .desc {
  font-size: 0.92rem; line-height: 1.7; color: rgba(247,243,236,0.7); margin: 1.1rem 0;
}
.sr-view__txt ul { margin: 0 0 1.6rem; }
.sr-view__txt ul li {
  font-size: 0.85rem; color: rgba(247,243,236,0.72);
  padding: 0.45rem 0 0.45rem 1.1rem; position: relative;
  border-bottom: 1px solid rgba(247,243,236,0.08);
}
.sr-view__txt ul li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 0.7rem; }

.sr-view__cta { display: grid; gap: 10px; }
.sr-view__cta button, .sr-view__cta a {
  display: block; text-align: center; padding: 1rem;
  border-radius: 999px; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: all 0.25s ease;
}
.sr-view__add { background: var(--gold); color: var(--forest); font-weight: 600; }
.sr-view__add:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(243,199,125,0.32); }
.sr-view__full { border: 1px solid rgba(247,243,236,0.3); color: var(--cream); }
.sr-view__full:hover { background: var(--cream); color: var(--forest); }

/* right rail — more from the same category */
.sr-view__more {
  border-top: 1px solid rgba(247,243,236,0.12);
  padding: clamp(22px, 3vw, 34px) clamp(20px, 4vw, 34px) clamp(30px, 4vw, 40px);
  min-height: 0;
}
@media (min-width: 900px) {
  .sr-view__more {
    border-top: none; border-left: 1px solid rgba(247,243,236,0.12);
    overflow-y: auto;
  }
}
.sr-view__more > b {
  display: block; font-family: var(--sans); font-weight: 600;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.sr-view__list { display: grid; gap: 8px; }

.sr-mini {
  display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: center;
  padding: 8px; border-radius: 10px; text-align: left;
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.sr-mini:hover { background: rgba(247,243,236,0.07); border-color: rgba(243,199,125,0.35); transform: translateX(3px); }
.sr-mini__img {
  display: block; aspect-ratio: 4 / 3; border-radius: 6px;
  background: #F1EADE; overflow: hidden;
}
.sr-mini__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.sr-mini__txt b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 0.9rem; color: var(--cream); line-height: 1.25;
}
.sr-mini__txt span { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--gold); }

/* bottom, bold, always there */
.sr-view__all {
  display: block; text-align: center; flex: none;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(0.8rem, 2vw, 1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest); background: var(--gold);
  padding: 1.15rem 1rem;
  transition: background 0.3s ease;
}
.sr-view__all:hover { background: var(--cream); }

/* ---------------- small screens ---------------- */
@media (max-width: 860px) {
  .sr-hint { bottom: 116px; font-size: 0.58rem; letter-spacing: 0.14em; }
  .sr-rail { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sr-rail::-webkit-scrollbar { display: none; }
  .sr-exit { display: none; }
  .sr-gate__arch { height: min(64vh, 560px); }
}

@media (prefers-reduced-motion: reduce) {
  .sr-grain, .sr-bloom, .sr-gate__enter { animation: none; }
  .sr-gate__leaf { transition: none; }
}

/* ============================================================
   VIVAAH — "The Colours of the Night"
   Taken from the Vivaah catalogue, not invented. The cover is a blood-red
   block against ivory embossed damask; page 3 names the eight colours and
   says plainly they were "chosen for meaning, not beauty" — night green,
   magenta, ivory, sona gold, blood red, violet, sindoor, henna.

   So the room is an ivory hall with a raised floral relief, blood-red and
   gold joinery, and the seven ceremonies' own colours on the columns. An
   earlier pass painted it a flat light red; that was my invention and wrong.
   ============================================================ */
.sr.is-viv { background: radial-gradient(120% 90% at 50% 45%, #FBF3E4 0%, #EFDFC4 50%, #C9A87C 100%); }

/* The damask. Layered radial gradients standing in for the embossed floral
   relief on the catalogue's paper — highlight above, shadow below, so it
   reads as raised rather than printed. */
.sr.is-viv .sr-panel {
  background:
    linear-gradient(90deg,
      rgba(140,9,2,0.22) 0 2px,
      rgba(217,164,49,0.35) 2px 5px,
      rgba(0,0,0,0) 5px calc(100% - 5px),
      rgba(217,164,49,0.35) calc(100% - 5px) calc(100% - 2px),
      rgba(140,9,2,0.22) calc(100% - 2px) 100%),
    radial-gradient(ellipse 42% 22% at 26% 16%, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 42% 22% at 26% 20%, rgba(176,142,96,0.30), rgba(176,142,96,0) 60%),
    radial-gradient(ellipse 34% 18% at 74% 42%, rgba(255,255,255,0.8), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 34% 18% at 74% 46%, rgba(176,142,96,0.26), rgba(176,142,96,0) 60%),
    radial-gradient(ellipse 40% 20% at 32% 72%, rgba(255,255,255,0.8), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 40% 20% at 32% 76%, rgba(176,142,96,0.26), rgba(176,142,96,0) 60%),
    linear-gradient(180deg, #FDF6EA 0%, #FAECD7 34%, #F3E1C6 72%, #E6CFA9 100%);
}
/* gold zari rails — the catalogue's "gold zari thread must catch the light" */
.sr.is-viv .sr-panel::before,
.sr.is-viv .sr-panel::after {
  height: 3px;
  background: linear-gradient(90deg,
    rgba(217,164,49,0) 0%, #D9A431 12%, #F0D48A 50%, #D9A431 88%, rgba(217,164,49,0) 100%);
}
.sr.is-viv .sr-panel::after { box-shadow: 0 6px 26px rgba(140,9,2,0.16); }

.sr.is-viv .sr-floor {
  background:
    radial-gradient(closest-side, rgba(250,236,215,0.9), rgba(201,168,124,0.7) 82%),
    repeating-conic-gradient(from 0deg,
      rgba(140,9,2,0.05) 0deg 9deg, rgba(255,255,255,0.16) 9deg 18deg),
    linear-gradient(135deg, #E9D6B6 0%, #FAECD7 50%, #E9D6B6 100%);
}
.sr.is-viv .sr-ceil {
  background:
    radial-gradient(closest-side, rgba(253,246,234,0.95), rgba(233,214,182,0.9) 76%),
    linear-gradient(135deg, #F5E7CE 0%, #FDF6EA 50%, #F5E7CE 100%);
}
.sr.is-viv .sr-lamp { background: radial-gradient(closest-side, rgba(255,255,255,1), rgba(217,164,49,0.30) 42%, rgba(217,164,49,0) 76%); }
.sr.is-viv .sr-pool { background: radial-gradient(closest-side, rgba(255,250,240,0.8), rgba(217,164,49,0.12) 48%, rgba(217,164,49,0) 78%); }
.sr.is-viv .sr-mark { color: rgba(140,9,2,0.30); }

/* blood red on ivory, exactly as the catalogue cover sets it */
.sr.is-viv .sr-plaque .k { color: #8C0902; opacity: 1; }
.sr.is-viv .sr-plaque .t { color: #8C0902; text-shadow: 0 3px 22px rgba(255,255,255,0.9); }
.sr.is-viv .sr-plaque .d { color: rgba(88,26,12,0.82); }

/* Each column takes one of the seven ceremony colours, in the catalogue's
   own order — Roka violet, Sangeet green, Mehndi magenta, Haldi gold,
   Baraat sindoor, Shaadi blood, Reception taar sona. */
/* a tile may set its own --viv (the seven ceremonies do); these are the
   per-column fallbacks for everything else */
.sr.is-viv .sr-col:nth-of-type(7n+1) { --viv: #4E1A81; }
.sr.is-viv .sr-col:nth-of-type(7n+2) { --viv: #083B32; }
.sr.is-viv .sr-col:nth-of-type(7n+3) { --viv: #A10668; }
.sr.is-viv .sr-col:nth-of-type(7n+4) { --viv: #D9A431; }
.sr.is-viv .sr-col:nth-of-type(7n+5) { --viv: #BF152C; }
.sr.is-viv .sr-col:nth-of-type(7n+6) { --viv: #8C0902; }
.sr.is-viv .sr-col:nth-of-type(7n+7) { --viv: #7C3918; }

.sr.is-viv .sr-col__head {
  color: var(--viv, #8C0902);
  border-bottom-color: rgba(217,164,49,0.75);
}
.sr.is-viv .sr-col__head i { color: rgba(88,26,12,0.55); }

.sr.is-viv .sr-tile__box {
  background: #FFFCF5;
  border-color: var(--viv, #8C0902);
  box-shadow:
    0 18px 44px rgba(90,50,20,0.30),
    0 0 0 6px rgba(250,236,215,0.95),
    0 0 0 8px rgba(217,164,49,0.55);
}
.sr.is-viv .sr-tile:hover .sr-tile__box {
  box-shadow:
    0 26px 62px rgba(90,50,20,0.38),
    0 0 0 6px rgba(250,236,215,0.95),
    0 0 0 8px #D9A431,
    0 0 48px rgba(217,164,49,0.45);
}
.sr.is-viv .sr-tile__cap {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--viv, #8C0902) 94%, black) 0%,
    color-mix(in srgb, var(--viv, #8C0902) 78%, transparent) 45%,
    transparent 100%);
}
.sr.is-viv .sr-tile__cap b { color: #FAECD7; }
.sr.is-viv .sr-tile__cap span { color: #EFD9A6; }

.sr.is-viv .sr-wallcta { background: #8C0902; color: #FAECD7; box-shadow: 0 0 0 2px rgba(217,164,49,0.7); }
.sr.is-viv .sr-wallcta:hover { background: #BF152C; }

.sr.is-viv .sr-doorway {
  border-color: rgba(217,164,49,0.8);
  background: radial-gradient(120% 100% at 50% 100%, rgba(140,9,2,0.9), rgba(140,9,2,0.5) 55%, rgba(250,236,215,0.3) 100%);
  box-shadow: 0 0 90px rgba(140,9,2,0.3), inset 0 0 60px rgba(0,0,0,0.35);
}
.sr.is-viv .sr-doorway .k { color: #EFD9A6; }
.sr.is-viv .sr-doorway .t { color: #FAECD7; }

/* the concept cards for the Seven Sacred Gifts */
.sr.is-viv .sr-tile__box.is-concept {
  background: linear-gradient(158deg,
    var(--viv, #8C0902) 0%,
    color-mix(in srgb, var(--viv, #8C0902) 72%, black) 100%);
  border-color: #D9A431;
}
.sr.is-viv .sr-concept i { color: #EFD9A6; }
.sr.is-viv .sr-concept b { color: #FAECD7; }
.sr.is-viv .sr-concept::after { color: #D9A431; }

.sr.is-viv .sr-vig { background: radial-gradient(135% 110% at 50% 48%, rgba(0,0,0,0) 52%, rgba(120,80,40,0.16) 82%, rgba(90,55,25,0.34) 100%); }
.sr.is-viv .sr-bloom { background: radial-gradient(46% 40% at 50% 46%, rgba(255,244,224,0.5), rgba(255,244,224,0) 70%); }
.sr.is-viv .sr-grain { opacity: 0.16; }

/* HUD, on an ivory room */
.is-viv-hud .sr-all { background: #8C0902; color: #FAECD7; }
.is-viv-hud .sr-all:hover { background: #BF152C; }
.is-viv-hud .sr-rail button.is-here { background: #8C0902; color: #FAECD7; border-color: #8C0902; }
.is-viv-hud .sr-topbar__logo { color: #8C0902; }
.is-viv-hud .sr-topbar .nav__right { color: #6B2410; }
.is-viv-hud .sr-exit { color: #6B2410; border-color: rgba(107,36,16,0.35); }
.is-viv-hud .sr-exit:hover { background: #8C0902; border-color: #8C0902; color: #FAECD7; }
.is-viv-hud .sr-rail button { color: rgba(107,36,16,0.75); }
.is-viv-hud .sr-rail button:hover { color: #8C0902; background: rgba(255,255,255,0.6); }
.is-viv-hud .sr-hint { color: rgba(107,36,16,0.65); }

/* ============================================================
   THE HAND
   A hand that follows the pointer, opens, grabs when you drag and points
   when you are over something you can pick up. It is what makes the room
   feel handled rather than clicked. Pointer devices only — on a touch
   screen your actual hand is already there.
   ============================================================ */
.sr.has-hand, .sr.has-hand * { cursor: none !important; }
.sr-hand {
  position: fixed; left: 0; top: 0; z-index: 25;
  width: 46px; height: 46px; margin: -13px 0 0 -15px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.25s ease;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.55));
}
.sr-hand.is-on { opacity: 1; }
.sr-hand svg { width: 100%; height: 100%; display: block; transition: transform 0.16s cubic-bezier(0.22,1,0.36,1); }
.sr-hand .open, .sr-hand .grab, .sr-hand .point { transition: opacity 0.13s ease; }
.sr-hand .grab, .sr-hand .point { opacity: 0; }
/* one state visible at a time */
.sr-hand.is-grab .open { opacity: 0; }
.sr-hand.is-grab .grab { opacity: 1; }
.sr-hand.is-grab svg { transform: scale(0.88); }
.sr-hand.is-point:not(.is-grab) .open { opacity: 0; }
.sr-hand.is-point:not(.is-grab) .point { opacity: 1; }
.sr-hand.is-point:not(.is-grab) svg { transform: scale(1.06) rotate(-6deg); }
@media (hover: none) { .sr-hand { display: none; } }

/* the sound control belongs only to the World Series room */
.sound-toggle { display: none !important; }
body.is-world .sound-toggle { display: inline-flex !important; }

/* ============================================================
   CONCEPT TILES
   The nine World Series boxes and the seven Vivaah ceremonies are
   hand-authored collection pieces with no photography. Requiring an image
   emptied both rooms; instead they get a designed typographic card, which
   suits a "country in a box" better than a stock photo would anyway.
   Replace with real photography when it exists — nothing else changes.
   ============================================================ */
.sr-tile__box.is-concept {
  background: linear-gradient(158deg, #2F5F50 0%, #23493D 55%, #17352C 100%);
  border-color: rgba(243,199,125,0.85);
  display: flex; align-items: center; justify-content: center;
}
.sr-concept {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6em; text-align: center; padding: 8%; width: 100%; height: 100%;
}
.sr-concept i {
  font-style: normal; font-family: var(--sans);
  font-size: 0.42em; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold);
}
.sr-concept b {
  font-family: var(--serif); font-weight: 500; font-size: 0.92em;
  line-height: 1.18; color: var(--cream);
}
.sr-concept::after {
  content: "✦"; color: var(--gold); font-size: 0.5em; opacity: 0.8;
}
.sr-tile__box.is-concept { font-size: 46px; }
.is-viv .sr-tile__box.is-concept {
  background: linear-gradient(158deg, #BF152C 0%, #A11226 55%, #7A1226 100%);
  border-color: rgba(255,255,255,0.8);
}
.is-viv .sr-concept i { color: #FBD9DD; }
.is-viv .sr-concept b { color: #FFFFFF; }
.is-viv .sr-concept::after { color: #FBD9DD; }

.sr-view__img .sr-concept--big {
  background: linear-gradient(158deg, #23493D 0%, #16362F 55%, #0E241E 100%);
  font-size: 40px; border-radius: 12px;
}
.sr-mini__img .sr-concept {
  background: linear-gradient(158deg, #23493D, #0E241E); font-size: 10px;
}

/* ============================================================
   HUD on a light room
   Vivaah's room is pale, and the HUD was drawn for a dark one — the rail,
   the hint and the logo all but disappeared against it.
   ============================================================ */
.is-viv-hud .sr-topbar__logo { color: #8E1F32; }
.is-viv-hud .sr-topbar .nav__right { color: #7A1226; }
.is-viv-hud .sr-exit { color: #7A1226; border-color: rgba(122,18,38,0.35); }
.is-viv-hud .sr-exit:hover { background: #BF152C; border-color: #BF152C; color: #FFF6F6; }
.is-viv-hud .sr-rail button { color: rgba(122,18,38,0.72); }
.is-viv-hud .sr-rail button:hover { color: #7A1226; background: rgba(255,255,255,0.6); }
.is-viv-hud .sr-hint { color: rgba(122,18,38,0.6); }

/* WhatsApp, in the product view. Its own green on purpose — the recognition
   is what makes it a shortcut rather than another button. */
.sr-view__wa { background: #25D366; color: #08301A; font-weight: 600; }
.sr-view__wa:hover { background: #1EBE5A; }