/* Raceworx Bike Explorer — Graphic View (0.2.21-alpha)
   0.2.21 — BE-CHIP-STACK:
     - Category chips are rounded PARALLELOGRAMS cut on a lean, with the wording skewed
       back upright inside them. Thin modern type, semi-transparent glass that picks up
       the colour of the photograph behind it, hairline edges — gold 1st tier, red 2nd.
     - Chips are drawn as a STACK from one placed origin per tier, capped at five
       categories and four subcategories; resting on one moves the gold to it and
       leaves every other brick exactly where it is.
     - Product name rows get more air again and a wider odd/even wash.
   0.2.19 — BE-CHIP-REFINE + BE-ZONE-ORIGIN-CUE + BE-PRODUCT-LIST-RHYTHM:
     - Category chips: smaller/finer glass system; 1st tier gold hairline, 2nd tier red
       hairline; soft fill + faint hover lift (not heavy 3D Classic View chrome).
     - Active focus + open chips: breathing zone glow + hair-thin curved filament toward
       the chip cluster (no box border, no zone caption labels).
     - Product name list: more vertical rhythm, clearer odd/even wash + text brightness.
   0.2.18 — docs remediating (DESCRIPTION names-only wording). UI unchanged from 0.2.17.
   0.2.17 — live remediating on top of 0.2.16 populate:
     - Product lines are the NAME only (no short description / SKU under the name).
     - Smaller type, forced onto one line (nowrap + ellipsis) so long names do not wrap.
     - Category header (.rwx-be-po-title) is high-contrast gold — site h2 rules had made
       it nearly invisible on the dark overlay.
     - Empty-stage reset hint default is 500ms (was 1100); timer only arms on bare picture.
     - About Stack opener matches the filled product window (no "empty overlay" claim).
   0.2.16:
     - BE-PRODUCT-POPULATE: the big product window lists real products at last. Above the
       gold line, the part of the bike and how many products are in it. Below it, three
       columns of plain text lines shaded in two alternating greys, with light
       high-contrast lettering. No pictures, no prices, nothing to click, and — the
       awkward one — no scrolling: --rwx-be-po-scale is turned down a notch at a time by
       fitProductLines() in explorer.js until the whole list fits the window, which is why
       every size in here is expressed against that one variable rather than in fixed px.
     - BE-EMPTY-CLICK-RESET: .rwx-be-emptyhint is a small line that follows the cursor
       while the shopper has stopped on bare picture. It is deliberately not a button and
       has no permanent place on the stage; it takes no pointer events at all, so it can
       never swallow the click it is advertising.
   0.2.14:
     - BE-PRODUCT-CLOSE-STICKY / BE-PRODUCT-EXIT-ICONS: the product window has two ways
       out, both PURPOSE ICONS rather than words. The return arrow goes back to the tabs
       that led there and they are HELD open, with a brighter gold edge, because the
       pointer is up on the icons and the ordinary close-delay would otherwise sweep the
       nest away. The bicycle is the full reset.
     - BE-GV-DISPLAY-NAMES and BE-TIER2-HOVER-GRACE are wording and timing, so there is
       nothing for this stylesheet to do about either: a chip is a chip whichever of the
       two names it is showing.
   0.2.13 — BE-PRODUCT-OVERLAY: the product step is one big see-through tile in the middle
     of the stage (about 80% of it), not a narrow list down the side. The bike stays
     visible behind it. It was an empty shell from 0.2.13 to 0.2.15 and is filled from
     0.2.16. Price is in the header from 0.2.22; the selection overlay cart is 0.2.32.
   0.2.11:
     - Category tiles wear the SAME chrome as the Classic View button: 2px gold border,
       dark glossy gradient, 3D inset/drop shadows, pill radius. One visual language for
       everything on the stage the shopper can click.
     - Stage extremes: Fit B fills the window width, so the only picture ever lost is a
       strip off the top and bottom. The backend Focus Area Matrix draws those window
       edges on the preview and clamps tile placement to them; the front nudges anything
       older back just inside the edge (see keepInsideFrame in explorer.js).
   0.2.10:
     - Category labels are ALL CAPS (text-transform), so EShop's mixed casing never shows.
     - Focus-area hover fades the bike picture to low light. Brightness/opacity only —
       there is deliberately NO transform, scale or zoom on the bike, so the picture keeps
       its exact size and box and the hotspot percentages still line up.
     - Category tiles are absolutely placed inside the bicycle picture box at the
       percentages saved in the backend Focus Area Matrix.
   Stage Contract v2:
     - Graphic View replaces the whole browser window. There is no site header, menu,
       cart or footer to line up against, so no template selectors are listed here.
     - Stage art is only ever an <img>. Nothing in this file sets background-image, so
       an image can never be painted twice (the 0.1.x double-paste class of bug).
     - Fit B: stage plates fill #rwx-be-root WIDTH (100%); height follows natural aspect
       (no stretch). Shorter than the viewport → letterbox top/bottom on the dark stage.
       Taller → clip top/bottom (overflow); fix the artwork later, never CSS-distort.
     - Classic View chrome sits above stage art (z-index).
     - Category chrome: main categories only; .rwx-be-subcats reveals on main hover.
   0.2.12 — second-tier chips were placed from the backend rather than floated, and
   second-tier chips are placed from the backend rather than floated in a strip.
   0.2.21 — chips are BRICKS: one fixed size per tier, piled with their faces touching,
   the second tier branching off the right face of the chosen brick. Their left/top is a
   TOP-LEFT CORNER, not a middle, and there is no per-chip anchor any more. Every brick
   figure arrives as a custom property from CategoryPlacement.php — nothing in this file
   decides how big a brick is. */

:root {
  --rwx-be-fg: #f5f5f5;
  --rwx-be-muted: #9ca3af;
  --rwx-be-line: rgba(255, 255, 255, 0.14);
  --rwx-be-panel: rgba(18, 18, 20, 0.92);
  --rwx-be-gold: #c9a227;
  --inv-needs-input-bg: #1a1d24;
  --inv-needs-input-fg: #f5f8fc;
  --inv-needs-input-border: #3d4450;
}

body.rwx-be-open {
  overflow: hidden !important;
}

/* 100% site replacement: every top-level site node goes, ours stays.
   Classic escape stays visible on Classic checkout (body is not rwx-be-open). */
body.rwx-be-open > *:not(#rwx-be-root) {
  display: none !important;
}

#rwx-be-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  background: #000;
  color: var(--rwx-be-fg);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rwx-be-fold-ms: 560ms;
  --rwx-be-lean: 14deg;
}

body.rwx-be-open #rwx-be-root {
  display: block;
}

.rwx-be-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #ffffff;
}

/* ---- Screen dim (BE-HOVER-DIM): dim the SCREEN, not the image filter.
   ONE opacity (--rwx-be-dim-a) for letterbox and picture:
   - letterbox: white canvas/port × same rgba veil (display-place.css ::before)
   - picture: bikebox ::after with the same rgba
   Flat #1c1c1c letterbox is forbidden — photo did not start at that weight.
   Bricks stay above the bikebox veil. No transform / scale / zoom. */
.rwx-be-stage.is-bike-dimmed {
  background: #ffffff;
}

.rwx-be-stage.is-bike-dimmed .rwx-be-bikebox::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--rwx-be-dim-a, 0.62));
}

.rwx-be-stage.is-bike-dimmed .rwx-be-art-bg {
  opacity: calc(1 - var(--rwx-be-dim-a, 0.62));
}

/* ---- Stage art: the only place pictures are painted ---- */

.rwx-be-art {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Decorative wallpaper (modes 1/2 plate). Fit B: width fill, natural height, no stretch. */
.rwx-be-art-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 100%;
  height: auto;
  z-index: 1;
}

/* Bicycle / designer scene: the zone coordinate space. Fit B width-fill; box == picture. */
.rwx-be-art-bike {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

/* The picture box is also the SIZE CONTAINER the bricks are cut from (0.2.21 —
   BE-CHIP-STACK). Every brick figure is a share of this box's width, so one set of
   numbers in CategoryPlacement.php gives the same brick on the full-screen shop front and
   in the small admin preview, with no scaling arithmetic in either.
   inline-size, never size: this box takes its HEIGHT from the photograph inside it, and
   size containment would collapse it to nothing.

   0.2.23 (BE-FRONT-MATRIX-POSITION): the cqw figures below are FALLBACKS. A container
   unit is resolved against the nearest ANCESTOR size container, and this box is the one
   declaring the brick properties — so the browser skipped it and the figures fell back to
   the window, making every brick about 1.7x too big and by a different factor on each
   surface. Both surfaces now measure this box and write the same percentages as pixels
   (StackLayout.applyBrickPx), which is why a pile placed at the handlebars in the Matrix
   is a pile at the handlebars out here. */
/* Canvas + photo paint lives in shared/display-place.css (ONE sheet).
   Keep only the brick size-container here — not a second copy-stage. */
.rwx-be-bikebox {
  container-type: inline-size;
  container-name: rwxbe;
}

.rwx-be-hotspots {
  position: absolute;
  inset: 0;
}

.rwx-be-hotspot {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: crosshair;
  z-index: 2;
}

.rwx-be-hotspot[data-shape]:not([data-shape="rect"]) {
  background: transparent;
}

.rwx-be-version {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 6;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: rgba(245, 248, 252, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  user-select: none;
  /* 0.2.23: a second line says where the open pile starts, in the same sentence the
     Matrix prints, so the saved position can be checked by reading rather than by eye. */
  white-space: pre-line;
  text-align: right;
  max-width: 60vw;
}

/* ---- Explorer chrome (exit only — no site chrome is reproduced here) ----
   z-index MUST stay above .rwx-be-art (1) and stage plates so the bike image
   never covers Classic View. */ 

.rwx-be-chrome {
  position: absolute;
  top: 0.7rem;
  right: 18px;
  z-index: 100;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 0.2.33 — screen tracker. Sibling of stage/shield under #rwx-be-root, not inside
   .rwx-be-chrome (chrome is pointer-events none while qty is open). */
.rwx-be-hist {
  position: absolute;
  top: 0.7rem;
  left: auto;
  z-index: 100;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  box-sizing: border-box;
  height: 40px;
  width: max-content;
  padding: 0 0.28rem;
  border: 2px solid #c9a227;
  border-radius: 8px;
  transform: skewX(var(--rwx-be-lean, 14deg));
  background: linear-gradient(180deg, rgba(42, 51, 68, 0.86) 0%, rgba(11, 18, 32, 0.82) 52%, rgba(6, 8, 13, 0.86) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 -3px 6px rgba(0, 0, 0, 0.4) inset,
    0 8px 22px rgba(0, 0, 0, 0.45);
}

.rwx-be-hist-undo,
.rwx-be-hist-redo {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  transform: skewX(calc(var(--rwx-be-lean, 14deg) * -1));
  background: transparent;
  color: #f5c542;
  cursor: pointer;
}

.rwx-be-hist-undo:hover:not(:disabled),
.rwx-be-hist-redo:hover:not(:disabled) {
  filter: brightness(1.12);
}

.rwx-be-hist-undo:disabled,
.rwx-be-hist-redo:disabled {
  opacity: 0.35;
  cursor: default;
}

.rwx-be-hist-icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

/* 0.2.33 — How to use this site. Bottom left of Graphic, same brick family. */
.rwx-be-howto {
  position: absolute;
  left: 18px;
  bottom: 10px;
  top: auto;
  z-index: 221;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.rwx-be-howto-badge,
.rwx-be-howto-record,
.rwx-be-howto-stop,
.rwx-be-howto-skip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  width: max-content;
  padding: 0 16px;
  border: 2px solid #c9a227;
  border-radius: 8px;
  transform: skewX(var(--rwx-be-lean, 14deg));
  background: linear-gradient(180deg, rgba(42, 51, 68, 0.86) 0%, rgba(11, 18, 32, 0.82) 52%, rgba(6, 8, 13, 0.86) 100%);
  color: #f5f8fc;
  font-weight: 300;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 -3px 6px rgba(0, 0, 0, 0.4) inset,
    0 8px 22px rgba(0, 0, 0, 0.45);
}

.rwx-be-howto-badge:disabled {
  opacity: 0.55;
  cursor: default;
}

.rwx-be-howto-record,
.rwx-be-howto-stop,
.rwx-be-howto-skip {
  color: #f5c542;
}

.rwx-be-howto-ghost {
  position: absolute;
  z-index: 220;
  width: 18px;
  height: 22px;
  margin: -4px 0 0 -4px;
  pointer-events: none;
  border: 2px solid #c9a227;
  border-radius: 6px;
  transform: skewX(var(--rwx-be-lean, 14deg));
  background: linear-gradient(180deg, rgba(245, 197, 66, 0.92) 0%, rgba(201, 162, 39, 0.88) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 8px 18px rgba(0, 0, 0, 0.45);
}

.rwx-be-howto-veil {
  position: absolute;
  inset: 0;
  z-index: 210;
  pointer-events: auto;
  background: transparent;
}

.rwx-be-howto[hidden],
.rwx-be-howto-ghost[hidden],
.rwx-be-howto-veil[hidden],
.rwx-be-howto-record[hidden],
.rwx-be-howto-stop[hidden],
.rwx-be-howto-skip[hidden] {
  display: none !important;
}

.rwx-be-chrome-pill,
.rwx-be-who,
.rwx-be-eq-pill,
.rwx-be-reviews,
.rwx-be-classic {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  height: 40px;
  width: max-content;
  min-width: 0;
  flex: 0 0 auto;
  padding: 0 22px;
  overflow: hidden;
  border: 2px solid #c9a227;
  border-radius: 8px;
  transform: skewX(var(--rwx-be-lean, 14deg));
  transform-origin: center;
  background: linear-gradient(180deg, rgba(42, 51, 68, 0.86) 0%, rgba(11, 18, 32, 0.82) 52%, rgba(6, 8, 13, 0.86) 100%);
  color: #f5f8fc;
  font-weight: 300;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 -3px 6px rgba(0, 0, 0, 0.4) inset,
    0 8px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.rwx-be-who-card {
  --rwx-be-overlay-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rwx-be-overlay-weight: 300;
  --inv-needs-input-bg: #1a1d24;
  --inv-needs-input-fg: #f5f8fc;
  --inv-needs-input-border: #3d4450;
  font-family: var(--rwx-be-overlay-font);
  font-weight: var(--rwx-be-overlay-weight);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 38;
  transform: translate(-50%, -50%);
  width: min(28rem, calc(100% - 2rem));
  padding: 1.45rem 1.25rem 1.35rem;
  border: 1px solid #c9a227;
  border-radius: 14px;
  background: rgba(9, 12, 18, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 28px rgba(0, 0, 0, 0.55);
  color: #f5f8fc;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  pointer-events: auto;
}

.rwx-be-who-card[hidden] {
  display: none !important;
}

.rwx-be-who-heading {
  margin: 0;
  padding: 0.5rem 0.2rem;
  border: 0;
  background: none;
  color: #f5f8fc;
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.rwx-be-who-name {
  margin: 0;
  text-align: center;
  color: #f5f8fc;
  font-size: 1.05rem;
  font-weight: 300;
}

.rwx-be-who-field {
  display: block;
  margin: 0;
}

.rwx-be-who-user,
.rwx-be-who-pass {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 2.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  background: #1a1d24 !important;
  color: #f5f8fc !important;
  -webkit-text-fill-color: #f5f8fc !important;
  border: 1px solid #3d4450 !important;
  color-scheme: dark;
  caret-color: #f5f8fc;
  box-shadow: 0 0 0 1000px #1a1d24 inset !important;
  font: inherit;
  font-weight: 300;
  user-select: text;
  -webkit-user-select: text;
}

.rwx-be-who-user:hover,
.rwx-be-who-pass:hover,
.rwx-be-who-user:focus,
.rwx-be-who-pass:focus,
.rwx-be-who-user:autofill,
.rwx-be-who-pass:autofill,
.rwx-be-who-user:-webkit-autofill,
.rwx-be-who-pass:-webkit-autofill,
.rwx-be-who-user:-webkit-autofill:hover,
.rwx-be-who-pass:-webkit-autofill:hover,
.rwx-be-who-user:-webkit-autofill:focus,
.rwx-be-who-pass:-webkit-autofill:focus {
  background: #1a1d24 !important;
  color: #f5f8fc !important;
  -webkit-text-fill-color: #f5f8fc !important;
  caret-color: #f5f8fc;
  box-shadow: 0 0 0 1000px #1a1d24 inset !important;
}

.rwx-be-who-user::placeholder,
.rwx-be-who-pass::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.rwx-be-who-pass-wrap {
  position: relative;
  display: block;
}

.rwx-be-who-pass {
  padding-right: 2.55rem;
}

.rwx-be-who-eye {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5f8fc;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rwx-be-who-eye svg,
.rwx-be-who-eye-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.rwx-be-who-eye-slash {
  display: none;
}

.rwx-be-who-eye.is-shown .rwx-be-who-eye-slash {
  display: block;
}

.rwx-be-who-fail {
  margin: 0;
  color: #f5f8fc;
  font-size: 0.95rem;
  font-weight: 300;
}

.rwx-be-who-actions {
  display: flex;
  gap: 0.55rem;
}

.rwx-be-who-go,
.rwx-be-who-cancel {
  appearance: none;
  flex: 1 1 0;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(245, 248, 252, 0.14);
  color: #f5f8fc;
  font: inherit;
  font-weight: 300;
  cursor: pointer;
}

.rwx-be-welcome,
.rwx-be-eq-card,
.rwx-be-rv-card {
  --rwx-be-overlay-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rwx-be-overlay-weight: 300;
  --inv-needs-input-bg: #1a1d24;
  --inv-needs-input-fg: #f5f8fc;
  --inv-needs-input-border: #3d4450;
  font-family: var(--rwx-be-overlay-font);
  font-weight: var(--rwx-be-overlay-weight);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 180;
  transform: translate(-50%, -50%);
  width: min(34rem, calc(100% - 2rem));
  padding: 1.45rem 1.25rem 1.35rem;
  border: 1px solid #c9a227;
  border-radius: 14px;
  background: rgba(9, 12, 18, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 28px rgba(0, 0, 0, 0.55);
  color: #f5f8fc;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  pointer-events: auto;
}

.rwx-be-welcome[hidden],
.rwx-be-eq-card[hidden],
.rwx-be-rv-card[hidden] {
  display: none !important;
}

#rwx-be-root:has(.rwx-be-eq-card:not([hidden])) .rwx-be-hist,
#rwx-be-root:has(.rwx-be-rv-card:not([hidden])) .rwx-be-hist,
#rwx-be-root:has(.rwx-be-welcome:not([hidden])) .rwx-be-hist,
#rwx-be-root:has(.rwx-be-till-card:not([hidden])) .rwx-be-hist,
#rwx-be-root:has(.rwx-be-gate-card:not([hidden])) .rwx-be-hist,
#rwx-be-root:has(.rwx-be-eq-card:not([hidden])) .rwx-be-howto,
#rwx-be-root:has(.rwx-be-rv-card:not([hidden])) .rwx-be-howto,
#rwx-be-root:has(.rwx-be-welcome:not([hidden])) .rwx-be-howto,
#rwx-be-root:has(.rwx-be-gate-card:not([hidden])) .rwx-be-howto {
  display: none !important;
}

#rwx-be-root:has(.rwx-be-till-card:not([hidden])):not(.is-howto-rec) .rwx-be-howto {
  display: none !important;
}

.rwx-be-welcome-heading,
.rwx-be-eq-heading,
.rwx-be-rv-heading {
  margin: 0;
  padding: 0.5rem 0.2rem;
  border: 0;
  background: none;
  color: #f5f8fc;
  font-size: 1.28rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

.rwx-be-welcome-copy,
.rwx-be-eq-product,
.rwx-be-rv-product {
  margin: 0;
  text-align: center;
  color: #f5f8fc;
  font-size: 1.02rem;
  font-weight: 300;
}

.rwx-be-welcome-actions,
.rwx-be-eq-actions,
.rwx-be-rv-actions,
.rwx-be-rv-jobs,
.rwx-be-rv-scope {
  display: flex;
  gap: 0.55rem;
}

.rwx-be-rv-jobs[hidden],
.rwx-be-rv-scope[hidden],
.rwx-be-rv-search-wrap[hidden],
.rwx-be-rv-form[hidden],
.rwx-be-rv-list[hidden],
.rwx-be-rv-product[hidden],
.rwx-be-rv-status[hidden] {
  display: none !important;
}

.rwx-be-welcome-keep,
.rwx-be-welcome-abort,
.rwx-be-eq-send,
.rwx-be-eq-cancel,
.rwx-be-rv-send,
.rwx-be-rv-job,
.rwx-be-rv-kind,
.rwx-be-rv-hit {
  appearance: none;
  flex: 1 1 0;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(245, 248, 252, 0.14);
  color: #f5f8fc;
  font: inherit;
  font-weight: 300;
  cursor: pointer;
}

.rwx-be-eq-field {
  display: block;
  margin: 0;
}

.rwx-be-eq-field span {
  display: block;
  margin: 0 0 0.28rem;
  color: #f5f8fc;
}

.rwx-be-eq-name,
.rwx-be-eq-email,
.rwx-be-eq-company,
.rwx-be-eq-phone,
.rwx-be-eq-message {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  background: #1a1d24 !important;
  color: #f5f8fc !important;
  -webkit-text-fill-color: #f5f8fc !important;
  border: 1px solid #3d4450 !important;
  color-scheme: dark;
  caret-color: #f5f8fc;
  box-shadow: 0 0 0 1000px #1a1d24 inset !important;
  font: inherit;
  font-weight: 300;
}

.rwx-be-eq-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rwx-be-eq-fail,
.rwx-be-eq-ok {
  margin: 0;
  color: #f5f8fc;
  font-size: 0.95rem;
  font-weight: 300;
}

.rwx-be-rv-card {
  width: min(38rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow: auto;
}

.rwx-be-rv-card.is-fold-out {
  pointer-events: none;
  opacity: 0;
  filter: brightness(1.45);
  transition: transform 1.2s ease-in, opacity 1.2s ease-in, filter 1.2s ease-in;
}

.rwx-be-rv-thanks {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 14rem;
  pointer-events: none;
}

.rwx-be-rv-thanks[hidden] {
  display: none !important;
}

.rwx-be-rv-thanks-clip {
  display: block;
  width: 26rem;
  height: 13rem;
  max-width: calc(100% - 0.5rem);
}

.rwx-be-rv-hand,
.rwx-be-rv-spark {
  transform-box: fill-box;
  transform-origin: center;
}

.rwx-be-rv-spark {
  opacity: 0;
}

.rwx-be-rv-thanks.is-playing .rwx-be-rv-hand-l {
  animation: rwx-be-rv-handshake-l 2.4s ease-in-out 1 forwards;
}

.rwx-be-rv-thanks.is-playing .rwx-be-rv-hand-r {
  animation: rwx-be-rv-handshake-r 2.4s ease-in-out 1 forwards;
}

.rwx-be-rv-thanks.is-playing .rwx-be-rv-thanks-clip {
  animation: rwx-be-rv-handshake-fade 2.4s ease-in-out 1 forwards;
}

.rwx-be-rv-thanks.is-playing .rwx-be-rv-spark-1 { animation: rwx-be-rv-spark-1 2.4s ease-out 1 forwards; }
.rwx-be-rv-thanks.is-playing .rwx-be-rv-spark-2 { animation: rwx-be-rv-spark-2 2.4s ease-out 1 forwards; }
.rwx-be-rv-thanks.is-playing .rwx-be-rv-spark-3 { animation: rwx-be-rv-spark-3 2.4s ease-out 1 forwards; }
.rwx-be-rv-thanks.is-playing .rwx-be-rv-spark-4 { animation: rwx-be-rv-spark-4 2.4s ease-out 1 forwards; }
.rwx-be-rv-thanks.is-playing .rwx-be-rv-spark-5 { animation: rwx-be-rv-spark-5 2.4s ease-out 1 forwards; }
.rwx-be-rv-thanks.is-playing .rwx-be-rv-spark-6 { animation: rwx-be-rv-spark-6 2.4s ease-out 1 forwards; }
.rwx-be-rv-thanks.is-playing .rwx-be-rv-spark-7 { animation: rwx-be-rv-spark-7 2.4s ease-out 1 forwards; }
.rwx-be-rv-thanks.is-playing .rwx-be-rv-spark-8 { animation: rwx-be-rv-spark-8 2.4s ease-out 1 forwards; }

@keyframes rwx-be-rv-handshake-l {
  0% { transform: translateX(-18px); }
  22% { transform: translateX(0) rotate(0deg); }
  32% { transform: translateX(0) rotate(-7deg); }
  42% { transform: translateX(0) rotate(7deg); }
  52% { transform: translateX(0) rotate(-6deg); }
  60% { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes rwx-be-rv-handshake-r {
  0% { transform: translateX(18px); }
  22% { transform: translateX(0) rotate(0deg); }
  32% { transform: translateX(0) rotate(7deg); }
  42% { transform: translateX(0) rotate(-7deg); }
  52% { transform: translateX(0) rotate(6deg); }
  60% { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes rwx-be-rv-handshake-fade {
  0%, 68% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes rwx-be-rv-spark-1 {
  0%, 48% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  56% { opacity: 1; transform: translate(14px, -22px) scale(1.15); }
  100% { opacity: 0; transform: translate(26px, -38px) scale(0.2); }
}

@keyframes rwx-be-rv-spark-2 {
  0%, 48% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  56% { opacity: 1; transform: translate(-16px, -18px) scale(1.1); }
  100% { opacity: 0; transform: translate(-28px, -34px) scale(0.2); }
}

@keyframes rwx-be-rv-spark-3 {
  0%, 48% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  56% { opacity: 1; transform: translate(22px, 4px) scale(1.2); }
  100% { opacity: 0; transform: translate(36px, 8px) scale(0.2); }
}

@keyframes rwx-be-rv-spark-4 {
  0%, 48% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  56% { opacity: 1; transform: translate(-20px, 8px) scale(1.1); }
  100% { opacity: 0; transform: translate(-34px, 16px) scale(0.2); }
}

@keyframes rwx-be-rv-spark-5 {
  0%, 48% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  56% { opacity: 1; transform: translate(8px, 20px) scale(1.15); }
  100% { opacity: 0; transform: translate(14px, 34px) scale(0.2); }
}

@keyframes rwx-be-rv-spark-6 {
  0%, 48% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  56% { opacity: 1; transform: translate(-6px, 18px) scale(1.05); }
  100% { opacity: 0; transform: translate(-12px, 32px) scale(0.2); }
}

@keyframes rwx-be-rv-spark-7 {
  0%, 48% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  56% { opacity: 1; transform: translate(18px, 16px) scale(1.1); }
  100% { opacity: 0; transform: translate(30px, 28px) scale(0.2); }
}

@keyframes rwx-be-rv-spark-8 {
  0%, 48% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  56% { opacity: 1; transform: translate(-12px, -22px) scale(1.2); }
  100% { opacity: 0; transform: translate(-22px, -38px) scale(0.2); }
}

.rwx-be-rv-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  appearance: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(245, 248, 252, 0.16);
  color: #f5f8fc;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.rwx-be-rv-heading {
  padding-right: 2.4rem;
}

.rwx-be-rv-job.is-on,
.rwx-be-rv-kind.is-on {
  border-color: #c9a227;
}

.rwx-be-rv-field {
  display: block;
  margin: 0;
}

.rwx-be-rv-field span {
  display: block;
  margin: 0 0 0.28rem;
  color: #f5f8fc;
}

.rwx-be-rv-search,
.rwx-be-rv-name,
.rwx-be-rv-email,
.rwx-be-rv-text {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  background: #1a1d24 !important;
  color: #f5f8fc !important;
  -webkit-text-fill-color: #f5f8fc !important;
  border: 1px solid #3d4450 !important;
  color-scheme: dark;
  caret-color: #f5f8fc;
  box-shadow: 0 0 0 1000px #1a1d24 inset !important;
  font: inherit;
  font-weight: 300;
}

.rwx-be-rv-name.is-readonly,
.rwx-be-rv-email.is-readonly,
.rwx-be-rv-name[readonly],
.rwx-be-rv-email[readonly] {
  background: #f5f5f5 !important;
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  border-color: #c5ccd6 !important;
  color-scheme: light;
  caret-color: #0b1220;
  box-shadow: none !important;
}

.rwx-be-rv-search-wrap,
.rwx-be-rv-form,
.rwx-be-rv-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rwx-be-rv-stars,
.rwx-be-rv-row-stars {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}

.rwx-be-rv-star {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5c6570;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.rwx-be-rv-row-stars .rwx-be-rv-star {
  cursor: default;
  font-size: 1.15rem;
}

.rwx-be-rv-star.is-on {
  color: #f5c542;
}

.rwx-be-rv-list {
  max-height: min(16rem, 40vh);
  overflow: auto;
}

.rwx-be-rv-results {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 12rem;
  overflow: auto;
}

.rwx-be-rv-hit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.rwx-be-rv-hit-sku {
  opacity: 0.8;
  font-size: 0.9rem;
}

.rwx-be-rv-status,
.rwx-be-rv-empty,
.rwx-be-rv-row-meta,
.rwx-be-rv-row-product,
.rwx-be-rv-row-text {
  margin: 0;
  color: #f5f8fc;
  font-size: 0.95rem;
  font-weight: 300;
}

.rwx-be-rv-row {
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rwx-be-rv-row.is-pending {
  border-style: dashed;
  opacity: 0.86;
}

.rwx-be-chrome-rest {
  display: block;
  width: max-content;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  transform: skewX(calc(var(--rwx-be-lean, 14deg) * -1));
}

.rwx-be-chrome-marquee {
  display: none;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  transform: skewX(calc(var(--rwx-be-lean, 14deg) * -1));
}

.rwx-be-chrome-pill:hover .rwx-be-chrome-rest,
.rwx-be-chrome-pill:focus-visible .rwx-be-chrome-rest,
.rwx-be-who:hover .rwx-be-chrome-rest,
.rwx-be-who:focus-visible .rwx-be-chrome-rest,
.rwx-be-eq-pill:hover .rwx-be-chrome-rest,
.rwx-be-eq-pill:focus-visible .rwx-be-chrome-rest,
.rwx-be-reviews:hover .rwx-be-chrome-rest,
.rwx-be-reviews:focus-visible .rwx-be-chrome-rest,
.rwx-be-classic:hover .rwx-be-chrome-rest,
.rwx-be-classic:focus-visible .rwx-be-chrome-rest,
.rwx-be-do-flip:hover .rwx-be-chrome-rest,
.rwx-be-do-flip:focus-visible .rwx-be-chrome-rest,
.rwx-be-do-desc-btn:hover .rwx-be-chrome-rest,
.rwx-be-do-desc-btn:focus-visible .rwx-be-chrome-rest,
.rwx-be-do-enquire:hover .rwx-be-chrome-rest,
.rwx-be-do-enquire:focus-visible .rwx-be-chrome-rest,
.rwx-be-do-reviews:hover .rwx-be-chrome-rest,
.rwx-be-do-reviews:focus-visible .rwx-be-chrome-rest {
  display: none;
}

.rwx-be-chrome-pill:hover .rwx-be-chrome-marquee,
.rwx-be-chrome-pill:focus-visible .rwx-be-chrome-marquee,
.rwx-be-who:hover .rwx-be-chrome-marquee,
.rwx-be-who:focus-visible .rwx-be-chrome-marquee,
.rwx-be-eq-pill:hover .rwx-be-chrome-marquee,
.rwx-be-eq-pill:focus-visible .rwx-be-chrome-marquee,
.rwx-be-reviews:hover .rwx-be-chrome-marquee,
.rwx-be-reviews:focus-visible .rwx-be-chrome-marquee,
.rwx-be-classic:hover .rwx-be-chrome-marquee,
.rwx-be-classic:focus-visible .rwx-be-chrome-marquee,
.rwx-be-do-flip:hover .rwx-be-chrome-marquee,
.rwx-be-do-flip:focus-visible .rwx-be-chrome-marquee,
.rwx-be-do-desc-btn:hover .rwx-be-chrome-marquee,
.rwx-be-do-desc-btn:focus-visible .rwx-be-chrome-marquee,
.rwx-be-do-enquire:hover .rwx-be-chrome-marquee,
.rwx-be-do-enquire:focus-visible .rwx-be-chrome-marquee,
.rwx-be-do-reviews:hover .rwx-be-chrome-marquee,
.rwx-be-do-reviews:focus-visible .rwx-be-chrome-marquee {
  display: block;
}

.rwx-be-chrome-marquee-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: none;
}

.rwx-be-chrome-pill:hover .rwx-be-chrome-marquee-track,
.rwx-be-chrome-pill:focus-visible .rwx-be-chrome-marquee-track,
.rwx-be-who:hover .rwx-be-chrome-marquee-track,
.rwx-be-who:focus-visible .rwx-be-chrome-marquee-track,
.rwx-be-eq-pill:hover .rwx-be-chrome-marquee-track,
.rwx-be-eq-pill:focus-visible .rwx-be-chrome-marquee-track,
.rwx-be-reviews:hover .rwx-be-chrome-marquee-track,
.rwx-be-reviews:focus-visible .rwx-be-chrome-marquee-track,
.rwx-be-classic:hover .rwx-be-chrome-marquee-track,
.rwx-be-classic:focus-visible .rwx-be-chrome-marquee-track,
.rwx-be-do-flip:hover .rwx-be-chrome-marquee-track,
.rwx-be-do-flip:focus-visible .rwx-be-chrome-marquee-track,
.rwx-be-do-desc-btn:hover .rwx-be-chrome-marquee-track,
.rwx-be-do-desc-btn:focus-visible .rwx-be-chrome-marquee-track,
.rwx-be-do-enquire:hover .rwx-be-chrome-marquee-track,
.rwx-be-do-enquire:focus-visible .rwx-be-chrome-marquee-track,
.rwx-be-do-reviews:hover .rwx-be-chrome-marquee-track,
.rwx-be-do-reviews:focus-visible .rwx-be-chrome-marquee-track {
  animation: rwx-be-chrome-marquee 36s linear 700ms infinite;
}

.rwx-be-chrome-marquee-copy {
  flex: 0 0 auto;
  padding-right: 2.5em;
  white-space: nowrap;
  text-transform: none;
  color: #f5f8fc;
}

@keyframes rwx-be-chrome-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rwx-be-chrome-marquee-track {
    animation: none !important;
    transform: none;
  }
}

.rwx-be-chrome-pill:hover,
.rwx-be-who:hover,
.rwx-be-eq-pill:hover,
.rwx-be-reviews:hover,
.rwx-be-classic:hover {
  transform: skewX(var(--rwx-be-lean, 14deg)) translateY(-2px);
  filter: brightness(1.08);
}

.rwx-be-do-flip:hover,
.rwx-be-do-desc-btn:hover,
.rwx-be-do-enquire:hover,
.rwx-be-do-reviews:hover,
.rwx-be-do-cart:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.rwx-be-chrome-pill:active,
.rwx-be-who:active,
.rwx-be-eq-pill:active,
.rwx-be-reviews:active,
.rwx-be-classic:active {
  transform: skewX(var(--rwx-be-lean, 14deg));
  filter: brightness(0.98);
}

.rwx-be-do-flip:active,
.rwx-be-do-desc-btn:active,
.rwx-be-do-enquire:active,
.rwx-be-do-reviews:active,
.rwx-be-do-cart:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.rwx-be-classic:focus-visible {
  outline: 3px solid #f5c542;
  outline-offset: 3px;
}

/* ---- Layers ---- */

.rwx-be-layer {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96) translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
  filter: brightness(0.55);
}

.rwx-be-layer.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: brightness(1);
}

/* Category tiles live INSIDE the bicycle picture box, so each tile's saved x/y percentage
   means exactly what it meant on the admin preview. No flex strip, no fixed corner. */
.rwx-be-cats {
  position: absolute;
  inset: 0;
  z-index: 15;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.rwx-be-cats.is-open {
  opacity: 1;
}

/* Second-tier tiles (0.2.12 — BE-TIER2-PLACE). They share the bicycle picture box with
   the main tiles, so a subcategory tile dragged on the Focus Area Matrix is drawn on that
   same spot here. No flex strip, no guessing which side of the tile to open on. */
.rwx-be-subcats {
  position: absolute;
  inset: 0;
  z-index: 16;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.rwx-be-subcats.is-open {
  opacity: 1;
}

/* ---- Zone pointer (0.2.21 remediating — BE-ZONE-POINTER, replaces BE-ZONE-ORIGIN-CUE) --
   ONE hairline thread, and it is a continuation of a line that is already on the picture.

   Bricks that touch on a common lean put all their left faces on ONE straight slant. That
   edge is the strongest shape the pile makes, so it is what points at the zone: the thread
   leaves whichever end of it is nearer the zone and carries on to the middle of the zone.
   Nothing new is drawn over the bicycle — the shape that was there anyway is followed to
   its answer.

   What was here before — a breathing glow on the bike, a filament that re-aimed itself at
   whichever chip was live, and a whisper of that glow on the chip edges — is gone on
   Michael's call: it read as old, and a line that moves every time the pointer does reads
   as decoration rather than as an answer to "which part of the bike is this?".

   The thread does NOT retarget to a brick. */
.rwx-be-origin {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.rwx-be-origin.is-on {
  opacity: 1;
}

.rwx-be-origin-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Hairline, and it has to STAY hairline. The SVG is stretched over the picture with a
   non-uniform viewBox, so a stroke width in user units would be squashed one way and
   stretched the other; non-scaling-stroke pins it to one physical pixel line whatever
   shape the photograph is. */
.rwx-be-origin-thread path {
  fill: none;
  stroke: rgba(245, 197, 66, 0.62);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* The end of the thread: a small ring on the heart of the zone, so the line lands on
   something instead of stopping in mid-air. Thin, and no glow. */
.rwx-be-origin-heart {
  position: absolute;
  width: 0.85cqw;
  height: 0.85cqw;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(245, 197, 66, 0.7);
  border-radius: 50%;
  background: transparent;
}

/* ---- BRICKS (0.2.21 — BE-CHIP-STACK) ----------------------------------------------
   A chip is a BRICK: a rounded parallelogram on a lean, and every brick of a tier is the
   IDENTICAL size. That is the rule the whole shape depends on. Bricks of different widths
   cannot be piled with their faces touching, and bricks of different heights cannot have a
   sub-branch butted against their right face — so the size is a fixed figure from
   CategoryPlacement.php, arriving as a custom property, and a long name WRAPS onto a
   second line inside its brick rather than making that brick wider than its neighbours.

   left / top are the brick's TOP-LEFT CORNER. Not its middle, and there is no anchor to
   choose any more: a pile has one edge, worked out in StackLayout.js, and an anchor per
   chip was only ever a way of tidying up a scattering of loose chips.

   Fill, text colour and opacity come from CSS variables the Matrix colour panel
   writes (component params). Defaults are readable and still see-through. */
.rwx-be-cat {
  position: absolute;
  --rwx-be-lean: 14deg;
  box-sizing: border-box;
  width: var(--rwx-be-brick-w, 13.2cqw);
  height: var(--rwx-be-brick-h, 4cqw);
  padding: var(--rwx-be-brick-pad, 0.4cqw);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Lean only. Nothing in this stylesheet adds a lift, a scale or a second skew on
     hover: a brick that moved when it was pointed at would break the flush faces it is
     piled between, which is the one thing this shape cannot survive. */
  transform: skewX(var(--rwx-be-lean));
  transform-origin: top left;
  margin: 0;
  pointer-events: auto;
  border: 1px solid rgba(201, 162, 39, 0.85);
  background: var(--rwx-be-brick-fill-paint, rgba(220, 230, 240, 0.58));
  /* saturate() is the background pickup: whatever colour of the photograph shows through
     the glass comes through a little stronger, so a brick over a red frame reads warm and
     a brick over chrome reads cold. The blur is light — heavy blur is frosting, and
     Michael asked to still see the bike. */
  backdrop-filter: blur(2px) saturate(1.35);
  -webkit-backdrop-filter: blur(2px) saturate(1.35);
  color: var(--rwx-be-brick-text, #0b1220);
  /* Rounded parallelogram: soft corners on a leaning box, not a pill. */
  border-radius: var(--rwx-be-brick-radius, 0.6cqw);
  font-size: calc(0.68cqw * var(--rwx-be-brick-size, 100) / 100);
  font-weight: var(--rwx-be-brick-weight, 300);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  transition:
    box-shadow 0.18s ease,
    filter 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

/* The words stand upright inside the leaning brick, and they stay INSIDE it. Two lines are
   fine — that is how a long name is carried without the brick growing — and a third would
   be unreadable at this size, so it is clipped rather than allowed to burst the shape. */
.rwx-be-cat-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  width: 100%;
  transform: skewX(calc(var(--rwx-be-lean) * -1));
  letter-spacing: 0.08em;
  line-height: 1.16;
  white-space: normal;
  overflow-wrap: anywhere;
}

.rwx-be-cat.is-empty {
  color: var(--rwx-be-muted);
  border-color: rgba(201, 162, 39, 0.42);
  pointer-events: none;
}

/* 2nd tier: the same brick, full stop (0.2.21 remediating — §6u-ii).
   The height was always shared, because a shorter brick could not sit flush against the
   right face of the category brick it branched from. The WIDTH and the type size are now
   shared too: a narrower second tier read as a separate object hanging off the pile
   rather than the same pile turning a corner. The only thing that changes on a
   subcategory brick is the colour of its hairline.

   The w2 / font2 properties are kept so the shared PHP helper stays the one place either
   figure can be set — they now carry the first tier's figure, and the fallbacks here
   match it so a stylesheet loaded before the box is styled still cuts the same brick. */
.rwx-be-subcat {
  width: var(--rwx-be-brick-w2, 13.2cqw);
  border-color: rgba(196, 54, 54, 0.9);
  font-size: calc(0.68cqw * var(--rwx-be-brick-size2, var(--rwx-be-brick-size, 100)) / 100);
  font-weight: var(--rwx-be-brick-weight2, var(--rwx-be-brick-weight, 300));
  background: var(--rwx-be-brick-fill-paint2, var(--rwx-be-brick-fill-paint, rgba(220, 230, 240, 0.58)));
  color: var(--rwx-be-brick-text2, var(--rwx-be-brick-text, #0b1220));
}

/* ---- Which brick has the answer (0.2.21 remediating — BE-CHIP-ACTIVE) --------------
   Supersedes BE-CAT-HOVER-SOLO.

   Up to here, resting on one category made every other brick fall away. Michael's call on
   the diagram is that the pile stays WHOLE: a stack that empties itself as the pointer
   crosses it reads as a mess, and the shopper loses the shape they were just looking at.

   So nothing moves and nothing leaves. The answer is the gold or red hairline
   and a slight glow. Word size and boldness come from the colour panel.

     - first tier at rest      quiet gold hairline
     - first tier chosen       the strong gold edge
     - second tier at rest     quiet red hairline
     - second tier chosen      strong red edge and a slight glow

   Not one of these rules touches position, size or lean, which is the point: the brick
   under the pointer is the brick that was already there. */

.rwx-be-cat:not(.rwx-be-subcat) {
  border-color: rgba(201, 162, 39, 0.5);
}

/* Quieter still once one of them has the gold, so the chosen brick is the only loud
   thing in the pile — without any of the others going anywhere. */
.rwx-be-cats.has-active .rwx-be-cat:not(.is-active) {
  border-color: rgba(201, 162, 39, 0.3);
  color: var(--rwx-be-brick-text, #0b1220);
}

/* Sticky nest — 1st tier stays gold; 2nd tier stays red (subcats also carry .rwx-be-cat). */
.rwx-be-cat:not(.rwx-be-subcat).is-sticky-tab {
  border-color: #f5c542;
  box-shadow:
    0 0 0 1px rgba(245, 197, 66, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 4px 12px rgba(0, 0, 0, 0.26);
}

.rwx-be-subcat.is-sticky-tab {
  border-color: rgba(232, 88, 88, 0.95);
  box-shadow:
    0 0 0 1px rgba(232, 88, 88, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 4px 12px rgba(0, 0, 0, 0.26);
}

/* The gold moves here. Border WIDTH is left alone on purpose — the box is border-box, so
   a thicker edge would eat into the wording rather than the brick, and the faces have to
   stay flush with the bricks above and below whatever state they are in. */
.rwx-be-cat:not(.rwx-be-subcat):hover,
.rwx-be-cat:not(.rwx-be-subcat).is-active {
  border-color: #f5c542;
  color: #ffffff;
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(245, 197, 66, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 4px 14px rgba(0, 0, 0, 0.3);
}

/* 2nd tier stays red at rest, chosen, and sticky — never forced gold. */
.rwx-be-subcat {
  border-color: rgba(196, 54, 54, 0.6);
}

.rwx-be-subcats.has-active .rwx-be-subcat:not(.is-active) {
  border-color: rgba(196, 54, 54, 0.34);
  color: var(--rwx-be-brick-text2, var(--rwx-be-brick-text, #0b1220));
}

/* Chosen subcategory: a stronger red edge and a SLIGHT glow. Two tight rings rather than
   a soft bloom — the old cue's halo is what Michael called old, and a modern glow is a
   crisp edge with a little light on it, not a cloud. */
.rwx-be-subcat:hover,
.rwx-be-subcat.is-active {
  border-color: #ff6b6b;
  color: #ffffff;
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 107, 107, 0.5),
    0 0 10px rgba(232, 88, 88, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 4px 14px rgba(0, 0, 0, 0.3);
}

.rwx-be-cat:focus-visible {
  outline: 2px solid #f5c542;
  outline-offset: 2px;
}

/* ---- The product step (0.2.13 — BE-PRODUCT-OVERLAY) ----
   One big tile in the MIDDLE of the stage, about 80% of it, instead of the narrow list
   that used to sit down the right-hand side. It is deliberately see-through: the bike the
   shopper is building stays visible behind it, which is the whole reason for the stage.
   Two purpose icons in the corner are the way out (see BE-PRODUCT-EXIT-ICONS below).
   From 0.2.16 the names list fills this window. From 0.2.32 the selection overlay
   badge sits in the centre when a row fills the header. */

.rwx-be-productoverlay {
  --inv-needs-input-bg: #1a1d24;
  --inv-needs-input-fg: #f5f8fc;
  --inv-needs-input-border: #3d4450;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 80%;
  /* Close: turn, shrink, lighten, then gone — slow enough to watch (~1.2s).
     Open uses the shorter transition on .is-open so the panel still arrives promptly. */
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(-22deg) scale(0.18);
  opacity: 0;
  filter: brightness(1.45);
  transition: opacity 1.2s ease-in, transform 1.2s ease-in, filter 1.2s ease-in;
  display: flex;
  flex-direction: column;
  /* See-through, not a solid panel: this is what keeps the bike photo readable behind. */
  background: rgba(9, 12, 18, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 2px solid #c9a227;
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  z-index: 20;
}

.rwx-be-productoverlay.is-open {
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 1;
  filter: brightness(1);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.4s ease-out;
}

/* 0.2.32 overwrite — nothing on the product list or WOULD YOU LIKE badge may go
   system-blue from native selection. Overlay-wide; not only the name line. */
.rwx-be-productoverlay,
.rwx-be-productoverlay *,
.rwx-be-so-card,
.rwx-be-so-card *,
.rwx-be-vc-card,
.rwx-be-vc-card * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.rwx-be-productoverlay {
  -webkit-tap-highlight-color: transparent;
}

.rwx-be-productoverlay::selection,
.rwx-be-productoverlay *::selection,
.rwx-be-so-card::selection,
.rwx-be-so-card *::selection,
.rwx-be-vc-card::selection,
.rwx-be-vc-card *::selection {
  background: transparent;
  color: inherit;
}

.rwx-be-productoverlay::-moz-selection,
.rwx-be-productoverlay *::-moz-selection,
.rwx-be-so-card::-moz-selection,
.rwx-be-so-card *::-moz-selection,
.rwx-be-vc-card::-moz-selection,
.rwx-be-vc-card *::-moz-selection {
  background: transparent;
  color: inherit;
}

/* THE HEADER (0.2.31 — title + optional spare pills).
   Three columns: preview (photo + SKU + gold Price + gold Qty on Hand) on the left;
   EShop folder name then two equal gold hairline pills in the centre; bike + nest
   icons on the right. The names grid is everything below the line. No count chip
   on the title. Heading stays one line. */
.rwx-be-po-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 2.4fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 14px 20px;
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(201, 162, 39, 0.45);
}

/* 0.2.22 — BE-PRODUCT-CLICK-PREVIEW: image + SKU + price. 0.2.32 overwrite — Qty on
   Hand under Price, same gold, same size, same column gap. Lives IN the header
   (first thing in the band), not in a strip of its own below it. Rows stay names-only. */
.rwx-be-po-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
  min-width: 0;
}

.rwx-be-po-preview-media {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 10px;
  overflow: hidden;
}

.rwx-be-po-preview-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.rwx-be-po-preview-empty {
  padding: 8px;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(220, 228, 238, 0.72);
}

.rwx-be-po-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.rwx-be-po-preview-sku,
.rwx-be-po-preview-price,
.rwx-be-po-preview-qty {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(245, 197, 66, 0.98);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rwx-be-po-preview-sku:empty,
.rwx-be-po-preview-price:empty,
.rwx-be-po-preview-qty:empty {
  display: none;
}

.rwx-be-po-line.is-previewed {
  background: rgba(201, 162, 39, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.55);
}

.rwx-be-po-line[role="button"] {
  cursor: pointer;
}

.rwx-be-po-line[role="button"]:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Centre column: EShop folder name (you are here), then the go-to stack when
   that folder has spares. Count chip stays hidden. */
.rwx-be-po-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.rwx-be-po-title {
  margin: 0;
  width: 100%;
  font-size: calc(20px * var(--rwx-be-po-title-scale, 1));
  font-weight: 700;
  letter-spacing: calc(0.05em * var(--rwx-be-po-title-scale, 1));
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  /* Explicit colour: site templates often paint h2 dark, which made this name vanish
     against the dark overlay (0.2.17). Match the pills' high-contrast gold. */
  color: rgba(245, 197, 66, 0.98) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.rwx-be-po-count {
  display: none;
}

.rwx-be-po-tabs {
  position: relative;
  display: block;
  width: min(100%, 22rem);
  height: 2.55rem;
}

.rwx-be-po-tabs[hidden] {
  display: none;
}

.rwx-be-po-tab {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  width: 70%;
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid rgba(201, 162, 39, 0.88);
  border-radius: 999px;
  background: rgba(9, 12, 18, 0.72);
  color: rgba(245, 197, 66, 0.98);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}

/* Front = the other place (go-to). Back = you are here, half visible underneath.
   0.2.32 overwrite — lock-picture glass: frosted front over a gold (not orange) base.
   Stack, 50% tuck, dim back, click-front-to-go stay locked. */
.rwx-be-po-tab.is-back {
  left: 0;
  z-index: 1;
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(180deg, #f3d27a 0%, #c9a227 55%, #8a6418 100%);
  color: #1a1408;
  border-color: #c9a227;
}

.rwx-be-po-tab.is-front {
  left: 35%;
  z-index: 3;
  cursor: pointer;
  background: rgba(245, 248, 252, 0.16);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border-color: rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 8px 16px rgba(0, 0, 0, 0.35);
  color: rgba(245, 197, 66, 0.98);
}

.rwx-be-po-tab.is-front:hover,
.rwx-be-po-tab.is-front:focus-visible {
  border-color: #f5c542;
  border-top-color: #fff6c8;
}

.rwx-be-po-tab.is-front:hover,
.rwx-be-po-tab.is-front:focus-visible {
  transform: translateY(-1px);
}

.rwx-be-po-tab.is-front:focus-visible {
  outline: 2px solid #f5c542;
  outline-offset: 2px;
}

/* The two ways out, side by side (0.2.14 — BE-PRODUCT-EXIT-ICONS).

   Both are PURPOSE ICONS, not words: a return arrow for "back to the tabs I came through"
   and a bicycle for "start the bike again". Two similarly-worded text buttons made the
   shopper read before they could leave, which is the opposite of what an exit is for. The
   plain-English sentence lives on the hover, where it costs nothing.

   They are deliberately the SAME size and the SAME chrome, because they now behave the
   same way (rest on one, or click it). The default — back to the tabs — is the one nearest
   the corner and carries the solid gold edge; the full reset is the quieter of the two,
   because it is the bigger decision, not the busier button. */
.rwx-be-po-ways {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  justify-self: end;
}

.rwx-be-po-exit {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Square, so neither icon can read as "the bigger button". Comfortably past the 44px
     touch target, since the stage is also used on a laptop trackpad. */
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #f5f8fc;
  transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.rwx-be-po-exit .rwx-be-po-icon {
  width: 24px;
  height: 24px;
  display: block;
  /* One stroke style for both icons, following the button's own colour, so nothing has to
     be re-drawn if the chrome ever changes. Never filled — a filled bicycle at 24px is a
     blob. */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.rwx-be-po-exit:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.rwx-be-po-exit:focus-visible {
  outline: 3px solid #f5c542;
  outline-offset: 3px;
}

/* Default way out — back to the tabs. Full Classic View chrome, so the way out of the
   product window matches the way out of the stage. */
.rwx-be-po-nest {
  border: 2px solid #c9a227;
  background: linear-gradient(180deg, #2a3344 0%, #0b1220 52%, #06080d 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -3px 6px rgba(0, 0, 0, 0.45) inset,
    0 10px 28px rgba(0, 0, 0, 0.55);
}

/* The full reset, quieter. */
.rwx-be-po-home {
  border: 1px solid rgba(201, 162, 39, 0.55);
  background: rgba(11, 18, 32, 0.55);
  color: rgba(245, 248, 252, 0.9);
}

.rwx-be-po-home:hover {
  border-color: #f5c542;
}

/* Below the gold line. overflow is HIDDEN, never auto: the window is not allowed to
   scroll, so anything that does not fit has been shrunk or trimmed by fitProductLines()
   before it got here (0.2.16 — BE-PRODUCT-POPULATE). --rwx-be-po-scale is the notch that
   function turns down; every size below is measured against it. */
.rwx-be-po-body {
  --rwx-be-po-scale: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: calc(18px * var(--rwx-be-po-scale)) 22px;
}

/* One plain sentence — looking up the products, nothing here yet, or a failed read. */
.rwx-be-po-body.is-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.rwx-be-po-note {
  margin: 0;
  max-width: 46em;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 248, 252, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* THREE columns, no column headings — the shopper is reading names, not a table. The
   newspaper flow is what lets a long catalogue wrap into the same fixed-height window
   instead of running off the bottom of it. */
.rwx-be-po-list {
  column-count: 3;
  column-gap: calc(16px * var(--rwx-be-po-scale));
}

/* Successive products alternate two slightly transparent greys, so the eye can carry a
   name across as one row. Transparent on purpose: the bike is still the picture behind
   all of this.
   0.2.19 (BE-PRODUCT-LIST-RHYTHM): more vertical air between rows, clearer odd/even wash
   and a slight text-brightness step — still readable on the dark glass, never gold/red
   tier borders (those are for category chips only).
   0.2.21: the air and the wash are opened up again. Michael's read of 0.2.19 was that the
   rows were still a block of text rather than a list, so the gap between rows is now
   larger than the gap inside one and the two greys are far enough apart to be seen at a
   glance without turning the window into a striped table. */
.rwx-be-po-line {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin: 0 0 calc(11px * var(--rwx-be-po-scale));
  padding: calc(10px * var(--rwx-be-po-scale)) calc(11px * var(--rwx-be-po-scale));
  border-radius: 5px;
  border: 0;
  background: rgba(226, 232, 240, 0.04);
  line-height: 1.3;
  overflow: hidden;
}

.rwx-be-po-line:nth-child(even) {
  background: rgba(226, 232, 240, 0.185);
}

.rwx-be-po-line:last-child {
  margin-bottom: 0;
}

/* Name only (0.2.17). Much smaller than the first populate pass, and forced onto ONE
   line — long names like "BRAKE PADS - Mountain Bike Premium 4 Piston Pads Shimano" must
   not wrap onto two or three lines. Ellipsis if a name is still longer than the column. */
.rwx-be-po-name {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  display: block;
  font-size: calc(10px * var(--rwx-be-po-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 1px rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rwx-be-po-line:nth-child(odd) .rwx-be-po-name {
  color: #e8eef6;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 1px rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.65);
}

.rwx-be-po-line:nth-child(even) .rwx-be-po-name {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 1px rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.65);
}

/* Shown only when even the smallest readable type could not hold the whole category. */
.rwx-be-po-more {
  background: rgba(201, 162, 39, 0.18);
  font-size: calc(12px * var(--rwx-be-po-scale));
  font-style: italic;
  color: rgba(245, 197, 66, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* 0.2.32 — cart well (bottom-right). Drop target only; not the EShop cart page. */
.rwx-be-po-well {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  padding: 0.4rem;
  border-radius: 14px;
  border: 2px solid #c9a227;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 16px rgba(0, 0, 0, 0.28);
  opacity: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rwx-be-po-well .rwx-be-so-cart-icon {
  width: 3.2rem;
  height: 2.8rem;
  transform-origin: 50% 18%;
  transition: transform 0.18s ease;
}

.rwx-be-po-well.is-hot {
  border-color: #f5c542;
  transform: scale(1.22);
  animation: rwx-be-well-anticipate 0.7s ease-in-out infinite alternate;
}

.rwx-be-po-well.is-hot .rwx-be-so-cart-icon {
  transform: rotate(-14deg);
}

.rwx-be-po-well.is-swallow {
  animation: rwx-be-well-swallow 0.56s ease-out;
}

.rwx-be-po-well.is-confirm {
  animation: rwx-be-well-confirm 0.42s ease-out;
}

@keyframes rwx-be-well-anticipate {
  from {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 0 0 4px rgba(245, 197, 66, 0.4),
      0 10px 22px rgba(0, 0, 0, 0.35);
  }
  to {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 0 0 12px rgba(245, 197, 66, 0.62),
      0 12px 26px rgba(0, 0, 0, 0.4);
  }
}

@keyframes rwx-be-well-swallow {
  0% { transform: scale(1.22); }
  35% { transform: scale(1.32); }
  100% { transform: scale(1); }
}

@keyframes rwx-be-well-confirm {
  0% { transform: scale(1.2) rotate(-7deg); }
  28% { transform: scale(0.9) rotate(6deg); }
  55% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.rwx-be-po-line.is-dragging {
  opacity: 0.28;
}

.rwx-be-po-ghost {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  position: fixed;
  z-index: 40;
  pointer-events: none;
  max-width: 16rem;
  padding: 7px 14px;
  border: 1px solid #c9a227;
  border-radius: 8px;
  background: rgba(9, 12, 18, 0.94);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55);
  transform-origin: center center;
}

.rwx-be-po-ghost.is-grabbed {
  transform: translate(-50%, -50%) rotate(-8deg) scale(0.94);
}

.rwx-be-po-ghost.is-fold-in {
  transition:
    left var(--rwx-be-fold-ms, 560ms) cubic-bezier(0.22, 0.61, 0.36, 1),
    top var(--rwx-be-fold-ms, 560ms) cubic-bezier(0.22, 0.61, 0.36, 1),
    transform var(--rwx-be-fold-ms, 560ms) cubic-bezier(0.32, 0.04, 0.67, 0.37),
    opacity var(--rwx-be-fold-ms, 560ms) ease;
}

.rwx-be-po-ghost.is-fold-cancel {
  transition:
    left 0.32s ease,
    top 0.32s ease,
    opacity 0.32s ease,
    transform 0.32s ease;
}

/* 0.2.32 overwrite — BE-SELECTION-OVERLAY: glass purchase card.
   Opens only after the four-beat fly (grab / hover / suck-in / confirm).
   Qty starts at 1 when stock allows. KEEP SHOPPING / ABORT / DONE — no second cart, no Close.
   Dim eats clicks while the qty card is open so the folder cannot take hover. */
.rwx-be-so-dim {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: rgba(9, 12, 18, 0.08);
}

.rwx-be-productoverlay.is-selecting {
  pointer-events: none;
}

.rwx-be-productoverlay.is-selecting .rwx-be-so-dim {
  pointer-events: auto;
}

.rwx-be-productoverlay.is-selecting .rwx-be-po-head {
  position: relative;
  z-index: 11;
}

.rwx-be-productoverlay.is-selecting .rwx-be-po-line {
  position: relative;
  z-index: 9;
}

.rwx-be-so-shield {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: auto;
  cursor: default;
  background: rgba(9, 12, 18, 0.02);
}

#rwx-be-root.is-so-open .rwx-be-stage,
#rwx-be-root.is-so-open .rwx-be-chrome {
  pointer-events: none;
}

#rwx-be-root.is-vc-open .rwx-be-stage,
#rwx-be-root.is-vc-open .rwx-be-chrome {
  pointer-events: none;
}

.rwx-be-vc-shield {
  position: absolute;
  inset: 0;
  z-index: 33;
  pointer-events: auto;
  cursor: default;
  background: rgba(9, 12, 18, 0.08);
}

.rwx-be-vc-card[hidden],
.rwx-be-vc-shield[hidden] {
  display: none !important;
}

.rwx-be-so-card {
  --rwx-be-overlay-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rwx-be-overlay-weight: 300;
  --rwx-be-so-title-size: 1.65rem;
  --rwx-be-so-bar-min: 10mm;
  font-family: var(--rwx-be-overlay-font);
  font-weight: var(--rwx-be-overlay-weight);
  position: absolute;
  left: 50%;
  top: 50%;
  /* Above the folder overlay (z 20). Sibling of .rwx-be-stage under #rwx-be-root. */
  z-index: 36;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 5rem);
  height: auto;
  max-height: none;
  padding: 1.45rem 0.55rem 2.2rem;
  border: 1px solid #c9a227;
  border-radius: 14px;
  background: rgba(9, 12, 18, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 28px rgba(0, 0, 0, 0.55);
  color: #f5c542;
  text-align: left;
  pointer-events: auto;
  cursor: default;
  transform-origin: 50% 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.rwx-be-so-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2.15rem;
  width: max-content;
  max-width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: visible;
}

.rwx-be-so-cluster {
  display: flex;
  flex-direction: column;
  gap: 2.15rem;
  width: max-content;
  max-width: 100%;
  align-self: flex-start;
}

.rwx-be-so-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-height: 0;
  margin-bottom: 0;
}

.rwx-be-so-photo {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0.4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  min-width: 0;
  min-height: 0;
}

.rwx-be-so-photo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 17.6rem;
  object-fit: contain;
  object-position: left center;
}

.rwx-be-so-photo-empty {
  width: 40%;
  height: 40%;
  border-radius: 10px;
  background: rgba(245, 248, 252, 0.08);
}

.rwx-be-so-photo-img[hidden] + .rwx-be-so-photo-empty,
.rwx-be-so-photo-empty:not([hidden]) {
  display: block;
}

.rwx-be-so-photo-empty[hidden] {
  display: none;
}

.rwx-be-so-main {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.rwx-be-so-abort-wrap {
  position: relative;
  flex: 1 1 0;
  display: flex;
  min-width: 0;
}

.rwx-be-so-abort-wrap .rwx-be-so-abort {
  flex: 1 1 auto;
  width: 100%;
}

.rwx-be-so-abort-badge {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%);
  z-index: 4;
  width: min(18rem, 70vw);
  padding: 0.7rem 0.75rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(9, 12, 18, 0.92);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  color: #f5f8fc;
}

.rwx-be-so-abort-badge[hidden] {
  display: none;
}

.rwx-be-so-abort-msg {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.3;
}

.rwx-be-so-abort-yesno {
  display: flex;
  gap: 0.45rem;
}

.rwx-be-so-abort-yes,
.rwx-be-so-abort-no {
  appearance: none;
  flex: 1 1 0;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(245, 248, 252, 0.14);
  color: #f5f8fc;
  font: inherit;
  font-weight: 300;
  cursor: pointer;
}

.rwx-be-so-boxplay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 12, 18, 0.55);
  pointer-events: none;
}

.rwx-be-so-boxplay[hidden] {
  display: none;
}

.rwx-be-so-boxplay-clip {
  width: 42mm;
  height: 21mm;
}

.rwx-be-so-boxplay.is-playing .rwx-be-vc-job-lid {
  animation: rwx-be-vc-job-lid-close 0.9s ease-in-out 1 forwards;
}

/* Only scroll when the viewport is shorter than a compact qty card. */
@media (max-height: 36rem) {
  .rwx-be-so-card {
    overflow-y: auto;
  }
}

.rwx-be-so-card.is-fade-out {
  pointer-events: none;
  transition: opacity 0.42s ease;
}

.rwx-be-so-card.is-dragging {
  cursor: grabbing;
  transition: none;
}

.rwx-be-so-card.is-fold-out {
  pointer-events: none;
  opacity: 0;
  filter: brightness(1.45);
  transition: transform 1.2s ease-in, opacity 1.2s ease-in, filter 1.2s ease-in;
}

.rwx-be-so-card.is-grow-from-cart {
  pointer-events: none;
  transition:
    left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease-out;
}

.rwx-be-so-card.is-crumbling {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.rwx-be-so-shards {
  position: absolute;
  inset: 0;
  z-index: 42;
  pointer-events: none;
  overflow: visible;
}

.rwx-be-so-shard {
  position: absolute;
  display: block;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(245, 248, 252, 0.72) 0%, rgba(201, 162, 39, 0.28) 42%, rgba(9, 12, 18, 0.45) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 8px 16px rgba(0, 0, 0, 0.35);
  filter:
    drop-shadow(0 0 0.6px #e8c547)
    drop-shadow(0 0 1.2px rgba(201, 162, 39, 0.95));
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
  transition:
    transform 1.85s cubic-bezier(0.18, 0.72, 0.28, 1),
    opacity 1.85s ease-in;
  will-change: transform, opacity;
}

.rwx-be-so-shards.is-burst .rwx-be-so-shard {
  opacity: 0;
  transform: translate(var(--rwx-be-shard-x, 0), var(--rwx-be-shard-y, 24px)) rotate(var(--rwx-be-shard-r, 12deg));
}

.rwx-be-productoverlay.is-viewing .rwx-be-so-dim {
  pointer-events: auto;
}

.rwx-be-productoverlay.is-viewing .rwx-be-po-well {
  z-index: 13;
}

/* 0.2.32 — view-cart overlay: same glass family as WOULD YOU LIKE, readable size.
   0.2.33 — sibling of .rwx-be-stage under #rwx-be-root (not inside the folder). */
.rwx-be-vc-card {
  --rwx-be-overlay-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rwx-be-overlay-weight: 300;
  font-family: var(--rwx-be-overlay-font);
  font-weight: var(--rwx-be-overlay-weight);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 34;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  width: min(72rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: 1.55rem 1.6rem 1.5rem;
  border: 1px solid #c9a227;
  border-radius: 14px;
  background: rgba(9, 12, 18, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 28px rgba(0, 0, 0, 0.55);
  color: #f5c542;
  text-align: left;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  cursor: grab;
}

.rwx-be-vc-card.is-dragging {
  cursor: grabbing;
  transition: none;
}

.rwx-be-vc-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  appearance: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.55);
  background: rgba(245, 248, 252, 0.16);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  color: #f5f8fc;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.rwx-be-vc-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 90%;
  height: 90%;
  min-width: 20rem;
  min-height: 16rem;
  object-fit: contain;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

.rwx-be-vc-card.is-fold-out {
  pointer-events: none;
  opacity: 0;
  filter: brightness(1.45);
  transition: transform 1.2s ease-in, opacity 1.2s ease-in, filter 1.2s ease-in;
}

.rwx-be-vc-heading {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  padding: 0 3rem;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: #f5c542;
  font-size: 2.1rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  cursor: grab;
}

.rwx-be-vc-empty {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  color: #f5f8fc;
  font-size: 1.7rem;
  font-weight: 300;
  text-align: center;
}

.rwx-be-vc-list {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  max-height: min(84vh, calc(100% - 14rem));
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
}

.rwx-be-vc-line {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr) 11.6rem 14ch 3.2rem;
  gap: 0.75rem;
  align-items: center;
}

.rwx-be-vc-thumb {
  width: 5.2rem;
  height: 5.2rem;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rwx-be-vc-thumb:empty {
  visibility: hidden;
}

.rwx-be-vc-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.rwx-be-vc-info {
  min-width: 0;
}

.rwx-be-vc-name {
  color: #f5f8fc;
  font-size: 1.56rem;
  font-weight: 300;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rwx-be-vc-sku {
  color: #f5c542;
  font-size: 1.4rem;
  font-weight: 300;
  margin-top: 0.2rem;
}

.rwx-be-vc-stepper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  width: 11.6rem;
  min-width: 11.6rem;
}

.rwx-be-vc-minus,
.rwx-be-vc-plus,
.rwx-be-vc-remove {
  appearance: none;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.55);
  background: rgba(245, 248, 252, 0.16);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  color: #f5f8fc;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.rwx-be-vc-minus:disabled,
.rwx-be-vc-plus:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.rwx-be-vc-qty {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  width: 4.4rem;
  height: 3.2rem;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 300;
  background: transparent !important;
  color: #f5f8fc !important;
  -webkit-text-fill-color: #f5f8fc !important;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  color-scheme: dark;
  caret-color: #f5f8fc;
}

.rwx-be-vc-qty::selection {
  background: #3d4450;
  color: #f5f8fc;
}

.rwx-be-vc-qty::-moz-selection {
  background: #3d4450;
  color: #f5f8fc;
}

.rwx-be-vc-qty::-webkit-outer-spin-button,
.rwx-be-vc-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rwx-be-vc-price {
  position: relative;
  z-index: 1;
  width: 14ch;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: #f5f8fc;
  font-size: 1.56rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  padding: 0.45rem 0.4rem 0.45rem 0;
}

.rwx-be-vc-totals {
  position: relative;
  z-index: 1;
  margin: 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.rwx-be-vc-row {
  display: flex;
  gap: 1.6rem;
  color: #f5f8fc;
  font-size: 1.7rem;
  font-weight: 300;
}

.rwx-be-vc-row span:last-child {
  min-width: 5.5rem;
  text-align: right;
}

.rwx-be-vc-actions {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.85rem;
}

.rwx-be-vc-job {
  appearance: none;
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.28rem 0.55rem;
  min-height: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.55);
  background: rgba(245, 248, 252, 0.16);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  color: #f5f8fc;
  font-family: inherit;
  font-weight: 300;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.rwx-be-vc-job-go[hidden] {
  display: none !important;
}

.rwx-be-vc-job.is-playing {
  pointer-events: auto;
  cursor: pointer;
}

.rwx-be-vc-job:hover,
.rwx-be-vc-job:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid #f5c542;
  outline-offset: 3px;
}

.rwx-be-vc-job-clip {
  display: block;
  flex: 0 0 auto;
  width: 20mm;
  height: 10mm;
  max-width: none;
}

.rwx-be-vc-job-clip svg,
.rwx-be-vc-job-scene {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rwx-be-vc-job-caption {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-align: left;
  color: #f5f8fc;
  white-space: nowrap;
  line-height: 1.15;
}

.rwx-be-vc-job-shopper,
.rwx-be-vc-job-leg-a,
.rwx-be-vc-job-leg-b,
.rwx-be-vc-job-arm,
.rwx-be-vc-job-phone,
.rwx-be-vc-job-flash,
.rwx-be-vc-job-lid,
.rwx-be-vc-job-drop {
  transform-box: fill-box;
  transform-origin: center;
}

.rwx-be-vc-job-go.is-playing .rwx-be-vc-job-shopper {
  animation: rwx-be-vc-job-walk-go 4.5s ease-in-out 1 forwards;
}

.rwx-be-vc-job-keep.is-playing .rwx-be-vc-job-shopper {
  animation: rwx-be-vc-job-walk-keep 4.5s ease-in-out 1 forwards;
}

.rwx-be-vc-job-abort.is-playing .rwx-be-vc-job-shopper {
  animation: rwx-be-vc-job-walk-abort 4.5s ease-in-out 1 forwards;
}

.rwx-be-vc-job-abort.is-playing .rwx-be-vc-job-drop {
  animation: rwx-be-vc-job-drop-fade 4.5s ease-in-out 1 forwards;
}

.rwx-be-vc-job-done.is-playing .rwx-be-vc-job-lid {
  animation: rwx-be-vc-job-lid-close 4.5s ease-in-out 1 forwards;
}

.rwx-be-vc-job.is-playing .rwx-be-vc-job-leg-a {
  animation: rwx-be-vc-job-stride-a 0.45s ease-in-out 8;
}

.rwx-be-vc-job.is-playing .rwx-be-vc-job-leg-b {
  animation: rwx-be-vc-job-stride-b 0.45s ease-in-out 8;
}

.rwx-be-vc-job-go.is-playing .rwx-be-vc-job-arm,
.rwx-be-vc-job-go.is-playing .rwx-be-vc-job-phone {
  animation: rwx-be-vc-job-tap 4.5s ease-in-out 1 forwards;
}

.rwx-be-vc-job-go.is-playing .rwx-be-vc-job-flash {
  animation: rwx-be-vc-job-ring 4.5s ease-out 1 forwards;
}

@keyframes rwx-be-vc-job-walk-go {
  0% { transform: translateX(-16px); opacity: 1; }
  58% { transform: translateX(18px); opacity: 1; }
  82% { transform: translateX(18px); opacity: 1; }
  100% { transform: translateX(18px); opacity: 0.2; }
}

@keyframes rwx-be-vc-job-walk-keep {
  0% { transform: translateX(16px); opacity: 1; }
  100% { transform: translateX(-18px); opacity: 1; }
}

@keyframes rwx-be-vc-job-walk-abort {
  0% { transform: translateX(0); opacity: 1; }
  70% { transform: translateX(22px); opacity: 1; }
  100% { transform: translateX(28px); opacity: 0.2; }
}

@keyframes rwx-be-vc-job-drop-fade {
  0% { opacity: 1; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 0.15; transform: translateY(8px); }
}

@keyframes rwx-be-vc-job-lid-close {
  0% { transform: rotate(-28deg) translateY(-4px); transform-origin: 44px 22px; }
  55% { transform: rotate(0deg) translateY(0); transform-origin: 44px 22px; }
  100% { transform: rotate(0deg) translateY(0); transform-origin: 44px 22px; }
}

@keyframes rwx-be-vc-job-stride-a {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(16deg); }
}

@keyframes rwx-be-vc-job-stride-b {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-16deg); }
}

@keyframes rwx-be-vc-job-tap {
  0%, 52% { opacity: 0.35; transform: translateY(3px); }
  68% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(-2px); }
}

@keyframes rwx-be-vc-job-ring {
  0%, 60% { opacity: 0; transform: scale(0.35); }
  74% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .rwx-be-vc-job.is-playing .rwx-be-vc-job-shopper,
  .rwx-be-vc-job.is-playing .rwx-be-vc-job-leg-a,
  .rwx-be-vc-job.is-playing .rwx-be-vc-job-leg-b,
  .rwx-be-vc-job-go.is-playing .rwx-be-vc-job-arm,
  .rwx-be-vc-job-go.is-playing .rwx-be-vc-job-phone,
  .rwx-be-vc-job-go.is-playing .rwx-be-vc-job-flash,
  .rwx-be-vc-job-abort.is-playing .rwx-be-vc-job-drop,
  .rwx-be-vc-job-done.is-playing .rwx-be-vc-job-lid,
  .rwx-be-so-boxplay.is-playing .rwx-be-vc-job-lid,
  .rwx-be-rv-thanks.is-playing .rwx-be-rv-hand-l,
  .rwx-be-rv-thanks.is-playing .rwx-be-rv-hand-r,
  .rwx-be-rv-thanks.is-playing .rwx-be-rv-thanks-clip,
  .rwx-be-rv-thanks.is-playing .rwx-be-rv-spark {
    animation: none;
  }
}

.rwx-be-so-heading {
  margin: 0;
  padding: 0.62rem 0.9rem;
  /* Do not contribute intrinsic width — the cluster (photo + jobs) is the ruler. */
  width: 0;
  min-width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  min-height: var(--rwx-be-so-bar-min, 10mm);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 248, 252, 0.16);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  color: #f5f8fc;
  border: 0;
  border-radius: 10px;
  font-size: var(--rwx-be-so-title-size, 1.65rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: center;
  cursor: grab;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.rwx-be-so-heading:active {
  cursor: grabbing;
}

/* Thin outstanding breathe — gold letters only. No red, no box-shadow pill. */
@keyframes rwx-be-so-heading-pulse {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 0 0 rgba(245, 197, 66, 0);
  }
  50% {
    filter: brightness(1.35);
    text-shadow:
      0 0 8px rgba(245, 197, 66, 0.9),
      0 0 18px rgba(201, 162, 39, 0.55);
  }
}

.rwx-be-so-heading.is-pulse {
  animation: rwx-be-so-heading-pulse 1.3s ease-in-out infinite;
}

.rwx-be-so-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
}

.rwx-be-so-price,
.rwx-be-so-avail {
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 0;
  background: rgba(245, 248, 252, 0.16);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  color: #f5f8fc;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font-size: 1.22rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.rwx-be-so-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  gap: 0.65rem;
  margin: 0;
}

.rwx-be-so-minus,
.rwx-be-so-plus {
  appearance: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.55);
  background: rgba(245, 248, 252, 0.16);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  color: #f5f8fc;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 6px 12px rgba(0, 0, 0, 0.3);
}

.rwx-be-so-minus:hover,
.rwx-be-so-plus:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.rwx-be-so-minus:disabled,
.rwx-be-so-plus:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  filter: none;
  transform: none;
}

.rwx-be-so-qty:disabled,
.rwx-be-so-keep:disabled,
.rwx-be-so-done:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.rwx-be-so-qty {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  width: 4.4rem;
  height: 2.4rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 300;
  background: transparent !important;
  color: #f5f8fc !important;
  -webkit-text-fill-color: #f5f8fc !important;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  color-scheme: dark;
  caret-color: #f5f8fc;
}

.rwx-be-so-qty::selection {
  background: #3d4450;
  color: #f5f8fc;
}

.rwx-be-so-qty::-moz-selection {
  background: #3d4450;
  color: #f5f8fc;
}

.rwx-be-so-qty::-webkit-outer-spin-button,
.rwx-be-so-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rwx-be-so-qty::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.rwx-be-so-fire {
  margin: 0 0 0.65rem;
  min-height: 1.2em;
  color: #f5f8fc;
  font-size: 0.88rem;
  font-weight: 300;
}

/* Story-chip body lives in shared/story-chip.css (ONE sheet). Grow / vanish stay here. */
.rwx-be-so-storychip.is-in {
  animation: rwx-be-chip-in 400ms ease forwards;
}

.rwx-be-so-storychip.is-out {
  animation: rwx-be-chip-out 400ms ease forwards;
}

@keyframes rwx-be-chip-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes rwx-be-chip-out {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0); opacity: 0; }
}

.rwx-be-so-cart-icon {
  display: block;
  width: 3.1rem;
  height: 2.7rem;
}

.rwx-be-so-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  margin: 0;
}

.rwx-be-so-actions .rwx-be-vc-job {
  flex: 1 1 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.16rem 0.28rem;
}

.rwx-be-so-actions .rwx-be-vc-job-clip {
  width: 16mm;
  height: 10mm;
}

.rwx-be-so-actions .rwx-be-vc-job-caption {
  font-size: 1.05rem;
  text-align: left;
  white-space: nowrap;
}

/* Keep Shopping is the long caption — after the card hugs Done, only this pill overflowed. */
.rwx-be-so-actions .rwx-be-so-keep {
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.rwx-be-so-actions .rwx-be-so-keep .rwx-be-vc-job-clip {
  flex: 0 1 12mm;
  width: 12mm;
  min-width: 0;
  overflow: hidden;
}

.rwx-be-so-actions .rwx-be-so-keep .rwx-be-vc-job-clip svg,
.rwx-be-so-actions .rwx-be-so-keep .rwx-be-vc-job-scene {
  overflow: hidden;
}

.rwx-be-so-actions .rwx-be-so-keep .rwx-be-vc-job-caption {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
}

.rwx-be-so-keep:hover,
.rwx-be-so-keep:focus-visible,
.rwx-be-so-abort:hover,
.rwx-be-so-abort:focus-visible,
.rwx-be-so-done:hover,
.rwx-be-so-done:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid #f5c542;
  outline-offset: 3px;
}

.rwx-be-so-actions,
.rwx-be-so-actions *,
.rwx-be-so-stepper,
.rwx-be-so-stepper *,
.rwx-be-so-qty,
.rwx-be-so-minus,
.rwx-be-so-plus,
.rwx-be-so-job,
.rwx-be-so-abort-wrap,
.rwx-be-so-abort-wrap *,
.rwx-be-so-abort-badge,
.rwx-be-so-abort-badge *,
.rwx-be-so-ubw,
.rwx-be-so-ubw *,
.rwx-be-spend-strip,
.rwx-be-spend-strip *,
.rwx-be-spend-lure,
.rwx-be-spend-lure * {
  cursor: pointer !important;
}

.rwx-be-so-minus:disabled,
.rwx-be-so-plus:disabled,
.rwx-be-so-qty:disabled,
.rwx-be-so-keep:disabled,
.rwx-be-so-done:disabled,
.rwx-be-so-job:disabled,
.rwx-be-so-job:disabled * {
  cursor: not-allowed !important;
}

.rwx-be-so-job.is-playing,
.rwx-be-so-job.is-playing * {
  pointer-events: auto;
  cursor: pointer !important;
}


/* 0.2.32 — Details v3: full-width photo, 1-row thumbs, footer actions,
   white-glass facts (gold / black), magnifier, grow-from-cart, Abort crumble. */
.rwx-be-productoverlay.is-details .rwx-be-so-dim {
  pointer-events: auto;
}

.rwx-be-do-card {
  --rwx-be-overlay-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rwx-be-overlay-weight: 300;
  --rwx-be-do-fact-label: 9.5rem;
  --rwx-be-do-well-min-h: calc(1.05rem + 1.1rem + 2px);
  font-family: var(--rwx-be-overlay-font);
  font-weight: var(--rwx-be-overlay-weight);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 14;
  transform: translate(-50%, -50%);
  width: min(72rem, calc(100% - 1.5rem));
  height: min(72rem, calc(100% - 1.5rem));
  max-height: min(72rem, calc(100% - 1.5rem));
  padding: 1.35rem 1.25rem 1.05rem;
  border: 1px solid #c9a227;
  border-radius: 14px;
  background: rgba(9, 12, 18, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 28px rgba(0, 0, 0, 0.55);
  color: #f5f8fc;
  text-align: left;
  cursor: grab;
  transform-origin: 50% 50%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: hidden;
}

.rwx-be-do-card.is-dragging {
  cursor: grabbing;
  transition: none;
}

.rwx-be-do-card.is-fold-out {
  pointer-events: none;
  opacity: 0;
  filter: brightness(1.45);
  transition: transform 1.2s ease-in, opacity 1.2s ease-in, filter 1.2s ease-in;
}

.rwx-be-do-close,
.rwx-be-do-desc-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 999px;
  background: rgba(9, 12, 18, 0.45);
  color: #f5f8fc;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.rwx-be-do-head {
  margin: 0.15rem 2.5rem 0.35rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 0 0 auto;
}

.rwx-be-do-title-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: baseline;
  min-width: 0;
}

.rwx-be-do-title-row-product {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  position: relative;
}

.rwx-be-do-title-row-product.is-of {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1fr);
  position: relative;
}

.rwx-be-do-title-lead {
  display: contents;
}

.rwx-be-do-title-row-product .rwx-be-do-heading {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.rwx-be-do-of {
  position: absolute;
  left: 50%;
  right: 0;
  top: 0;
  transform: none;
  margin: 0;
  text-align: center;
  color: #f5c542;
  font-size: 1.32rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.rwx-be-do-of[hidden] {
  display: none !important;
}

.rwx-be-do-title-k {
  color: #f5c542;
  font-size: 1.32rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.rwx-be-do-title-v,
.rwx-be-do-cat,
.rwx-be-do-heading {
  margin: 0;
  color: #f5f8fc;
  font-size: 1.32rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rwx-be-do-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(14rem, 3fr);
  gap: 0.65rem 1.2rem;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  align-items: stretch;
}

@media (max-width: 720px) {
  .rwx-be-do-grid {
    grid-template-columns: 1fr;
  }
}

.rwx-be-do-left,
.rwx-be-do-right {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.rwx-be-do-right {
  height: 100%;
}

.rwx-be-do-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 12rem;
  max-height: none;
  cursor: zoom-in;
}

.rwx-be-do-img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.rwx-be-do-img-empty {
  color: rgba(245, 248, 252, 0.7);
  font-size: 0.95rem;
  text-align: center;
}

.rwx-be-do-mag {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid rgba(201, 162, 39, 0.75);
  border-radius: 999px;
  background: rgba(9, 12, 18, 0.55);
  color: #f5c542;
  cursor: zoom-in;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.rwx-be-do-mag.is-on {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.rwx-be-do-mag[hidden] {
  display: none !important;
}

.rwx-be-do-zoom {
  position: absolute;
  inset: 0.75rem;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border: 1px solid #c9a227;
  border-radius: 12px;
  background: rgba(9, 12, 18, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: zoom-out;
}

.rwx-be-do-zoom.is-in {
  opacity: 1;
  transform: scale(1);
}

.rwx-be-do-zoom[hidden] {
  display: none !important;
}

.rwx-be-do-zoom-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.rwx-be-do-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}

.rwx-be-do-thumbs[hidden] {
  display: none !important;
}

.rwx-be-do-thumb {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 10px;
  background: rgba(9, 12, 18, 0.35);
  cursor: pointer;
  overflow: hidden;
}

.rwx-be-do-thumb.is-on {
  border-color: #f5c542;
}

.rwx-be-do-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.rwx-be-do-features {
  margin: 0;
  padding: 0.65rem 0.75rem 0.65rem 1.35rem;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  color: #0b1220;
  font-size: 1.05rem;
  line-height: 1.45;
  max-height: 8.5rem;
  overflow: auto;
  flex: 0 1 auto;
}

.rwx-be-do-facts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rwx-be-do-fact {
  display: grid;
  grid-template-columns: var(--rwx-be-do-fact-label) minmax(0, 1fr);
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}

.rwx-be-do-fact-k,
.rwx-be-do-fact-v {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(201, 162, 39, 0.75);
  border-radius: 10px;
  background: #3a3d42;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 2px 8px rgba(0, 0, 0, 0.45);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 0;
  min-height: var(--rwx-be-do-well-min-h);
  box-sizing: border-box;
}

.rwx-be-do-fact-k {
  color: #f5c542;
  white-space: nowrap;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    1px 1px 0 rgba(0, 0, 0, 0.7);
}

.rwx-be-do-fact-v {
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 1px rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.7);
}

.rwx-be-do-fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rwx-be-do-field {
  display: grid;
  grid-template-columns: var(--rwx-be-do-fact-label) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}

.rwx-be-do-field-k,
.rwx-be-do-field-v {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(201, 162, 39, 0.65);
  border-radius: 10px;
  background: #3a3d42;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 2px 8px rgba(0, 0, 0, 0.45);
  font-size: 0.98rem;
  font-weight: 700;
  min-width: 0;
}

.rwx-be-do-field-k {
  color: #f5c542;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    1px 1px 0 rgba(0, 0, 0, 0.7);
}

.rwx-be-do-field-v {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 1px rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.7);
}

.rwx-be-do-status {
  margin: 0;
  color: rgba(245, 248, 252, 0.85);
  font-size: 0.95rem;
}

.rwx-be-do-actions {
  position: static;
  z-index: 4;
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.5rem;
}

.rwx-be-do-flip,
.rwx-be-do-desc-btn,
.rwx-be-do-enquire,
.rwx-be-do-reviews,
.rwx-be-do-cart {
  --rwx-be-lean: 0deg;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: auto;
  min-height: var(--rwx-be-do-well-min-h);
  padding: 0.55rem 0.7rem;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.75);
  border-radius: 10px;
  background: #3a3d42;
  color: #ffffff;
  font-weight: 300;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 2px 8px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.rwx-be-do-desc-btn[hidden] {
  display: none !important;
}

.rwx-be-do-cart:disabled {
  opacity: 0.55;
  cursor: wait;
}

.rwx-be-do-desc {
  position: absolute;
  inset: 0.65rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 2.4rem 1rem 1rem;
  border: 1px solid #c9a227;
  border-radius: 12px;
  background: rgba(9, 12, 18, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.rwx-be-do-desc-heading {
  margin: 0;
  color: #f5c542;
  font-size: 1.15rem;
  font-weight: 300;
}

.rwx-be-do-desc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #0b1220;
  font-size: 1.12rem;
  line-height: 1.55;
}

.rwx-be-do-desc-body p {
  margin: 0 0 0.85rem;
}

.rwx-be-do-desc-body a {
  color: #8a6a12;
}

.rwx-be-do-card,
.rwx-be-do-card * {
  -webkit-user-select: none;
  user-select: none;
}

.rwx-be-do-desc-body,
.rwx-be-do-desc-body * {
  -webkit-user-select: text;
  user-select: text;
}

/* ---- The quiet way out (0.2.16 — BE-EMPTY-CLICK-RESET) ----
   A line that follows the cursor while the shopper has stopped on bare picture, and
   nothing at all otherwise. pointer-events: none is load-bearing: the line is advertising
   a click on the picture underneath it, so it must never be the thing that gets clicked. */
.rwx-be-emptyhint {
  position: absolute;
  z-index: 25;
  max-width: 20em;
  padding: 7px 13px;
  border: 1px solid rgba(201, 162, 39, 0.6);
  border-radius: 999px;
  background: rgba(9, 12, 18, 0.72);
  color: rgba(245, 248, 252, 0.95);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.rwx-be-emptyhint.is-on {
  opacity: 1;
}

.rwx-be-toast {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--rwx-be-line);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.rwx-be-toast.is-on {
  opacity: 1;
}

.rwx-be-empty {
  color: var(--rwx-be-muted);
  padding: 18px;
  text-align: center;
  font-size: 13px;
}

/* ---- Launcher on the shop front (bottom-left, clear of the Talk chat) ---- */

.rwx-be-staging-launcher {
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  bottom: 22px !important;
  z-index: 1000100 !important;
  margin: 0;
  padding: 14px 22px;
  border: 2px solid #c9a227 !important;
  border-radius: 10px;
  background: #0b1f3a !important;
  color: #ffffff !important;
  font: 700 15px/1.2 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.rwx-be-staging-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  background: #123056 !important;
}

.rwx-be-staging-launcher:focus-visible {
  outline: 3px solid #f5c542;
  outline-offset: 3px;
}

.rwx-be-staging-launcher.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1023px), (orientation: portrait) {
  .rwx-be-staging-launcher {
    display: none !important;
  }
}

/* Matrix “What Graphic View will show” — same engine, not a second stage.
   Must never use #rwx-be-root / body.rwx-be-open (that hides the whole admin). */
.rwx-be-copy-root {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  overflow: hidden;
  background: #ffffff;
}

.rwx-be-copy-root .rwx-be-stage {
  position: absolute;
  inset: 0;
}

.rwx-be-copy-root .rwx-be-chrome,
.rwx-be-copy-root .rwx-be-productoverlay,
.rwx-be-copy-root .rwx-be-emptyhint,
.rwx-be-copy-root .rwx-be-so-card,
.rwx-be-copy-root .rwx-be-vc-card,
.rwx-be-copy-root .rwx-be-vc-shield,
.rwx-be-copy-root .rwx-be-hist {
  display: none !important;
}

/* 0.2.33 — Graphic till room. Bike wallpaper. Our checkout, not EShop UI. */
#rwx-be-root.is-till .rwx-be-hotspot,
#rwx-be-root.is-till .rwx-be-cat,
#rwx-be-root.is-till .rwx-be-productoverlay,
#rwx-be-root.is-till .rwx-be-spend-pill,
#rwx-be-root.is-till .rwx-be-eq-pill {
  pointer-events: none;
}

.rwx-be-till-card,
.rwx-be-gate-card {
  --rwx-be-overlay-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rwx-be-overlay-weight: 300;
  --inv-needs-input-bg: #1a1d24;
  --inv-needs-input-fg: #f5f8fc;
  --inv-needs-input-border: #3d4450;
  font-family: var(--rwx-be-overlay-font);
  font-weight: var(--rwx-be-overlay-weight);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #c9a227;
  border-radius: 14px;
  background: rgba(9, 12, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 28px rgba(0, 0, 0, 0.55);
  color: #f5f8fc;
  box-sizing: border-box;
  pointer-events: auto;
}

.rwx-be-till-card {
  z-index: 180;
  width: min(72rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: 1.4rem 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.rwx-be-till-card[hidden],
.rwx-be-gate-card[hidden] {
  display: none !important;
}

.rwx-be-till-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rwx-be-till-heading {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rwx-be-till-back,
.rwx-be-gate-go,
.rwx-be-gate-stay,
.rwx-be-classic-escape {
  min-height: 40px;
  padding: 0 1.1rem;
  border: 2px solid #c9a227;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(32, 28, 16, 0.92), rgba(12, 10, 8, 0.92));
  color: #f5f8fc;
  font: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.rwx-be-till-steps {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rwx-be-till-step {
  flex: 1;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
}

.rwx-be-till-step.is-now {
  border-color: #c9a227;
  color: #f5f8fc;
  background: rgba(201, 162, 39, 0.16);
}

.rwx-be-till-step.is-done {
  color: #e8d48a;
}

.rwx-be-till-note {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  color: #c5ccd6;
}

.rwx-be-till-host {
  flex: 1 1 auto;
  min-height: 12rem;
  overflow: auto;
  padding: 0.2rem 0.1rem 0.6rem;
}

.rwx-be-till-host .rwx-be-till-hide,
.rwx-be-till-dressed #login,
.rwx-be-till-dressed .breadcrumb,
.rwx-be-till-dressed .breadcrumbs,
.rwx-be-till-dressed .page-header,
.rwx-be-till-dressed .eshop-page-title,
.rwx-be-till-dressed .eshop-progress,
.rwx-be-till-dressed .checkout-progress,
.rwx-be-till-dressed aside {
  display: none !important;
}

.rwx-be-till-dressed table,
.rwx-be-till-dressed .table {
  width: 100%;
  border-collapse: collapse;
  background: transparent !important;
  color: #f5f8fc !important;
}

.rwx-be-till-dressed th,
.rwx-be-till-dressed td,
.rwx-be-till-dressed label,
.rwx-be-till-dressed legend,
.rwx-be-till-dressed p,
.rwx-be-till-dressed span,
.rwx-be-till-dressed div {
  color: #f5f8fc;
  background: transparent;
  font-weight: 300;
}

.rwx-be-till-field,
.rwx-be-till-dressed input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=image]),
.rwx-be-till-dressed select,
.rwx-be-till-dressed textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0.25rem 0 0.7rem;
  padding: 0.45rem 0.7rem;
  box-sizing: border-box;
  background: var(--inv-needs-input-bg) !important;
  color: var(--inv-needs-input-fg) !important;
  border: 1px solid var(--inv-needs-input-border) !important;
  border-radius: 8px;
  color-scheme: dark;
  caret-color: var(--inv-needs-input-fg);
  font: inherit;
  font-weight: 300;
}

.rwx-be-till-dressed input::placeholder,
.rwx-be-till-dressed textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.rwx-be-till-field:autofill,
.rwx-be-till-dressed input:autofill,
.rwx-be-till-field:-webkit-autofill,
.rwx-be-till-dressed input:-webkit-autofill,
.rwx-be-till-field:-webkit-autofill:hover,
.rwx-be-till-dressed input:-webkit-autofill:hover,
.rwx-be-till-field:-webkit-autofill:focus,
.rwx-be-till-dressed input:-webkit-autofill:focus {
  background: #1a1d24 !important;
  color: #f5f8fc !important;
  -webkit-text-fill-color: #f5f8fc !important;
  caret-color: #f5f8fc;
  box-shadow: 0 0 0 1000px #1a1d24 inset !important;
}

.rwx-be-till-dressed select option {
  background: var(--inv-needs-input-bg);
  color: var(--inv-needs-input-fg);
}

.rwx-be-till-dressed input[type=checkbox],
.rwx-be-till-dressed input[type=radio] {
  width: auto;
  min-height: 0;
  accent-color: #c9a227;
}

.rwx-be-till-go,
.rwx-be-till-dressed button[type=submit],
.rwx-be-till-dressed input[type=submit],
.rwx-be-till-dressed .btn-primary,
.rwx-be-till-dressed .eshop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 1.25rem;
  border: 2px solid #c9a227 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(32, 28, 16, 0.92), rgba(12, 10, 8, 0.92)) !important;
  color: #f5f8fc !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em;
  box-shadow: none !important;
  text-transform: none !important;
}

.rwx-be-gate-card {
  z-index: 200;
  width: min(34rem, calc(100% - 2rem));
  padding: 1.35rem 1.25rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.rwx-be-gate-heading {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rwx-be-gate-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #c5ccd6;
}

.rwx-be-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.rwx-be-classic-escape {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2147483001;
}

/* Classic checkout has no Graphic root. The lock card sits on the page. */
body > .rwx-be-gate-card {
  position: fixed;
  z-index: 2147483002;
}