:root {
  --bg: #05060a;
  --bg-panel: #0d0f16;
  --bg-panel-soft: #141721;
  --grid-bg: #05060a;
  --text-main: #f5f6fb;
  --text-muted: #8f93a8;
  --accent-soft: #2a6bff;
  --accent-strong: #4db8ff;
  --border-soft: #262a3a;
  --line-grid: #101320;
  --px-owned: #96a2ff;
  --px-active: #ffd166;
  --px-hover-outline: #ffffff;
  --shadow-soft: 0 0 40px rgba(0, 0, 0, 0.6);
  --radius-panel: 18px;
  --radius-chip: 999px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: radial-gradient(circle at 20% 0%, #11131f 0%, #05060a 42%, #020309 100%);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
}

/* Header */

.site-header {
  padding: 16px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.site-title-main {
  color: var(--accent-soft);
}

.site-title-year {
  color: var(--accent-strong);
}

.site-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Layout */

.layout {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 8px 16px 16px;
  min-height: 0; /* allow children to shrink */
}

/* Grid area */

.grid-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#grid-canvas {
  display: block;
  background: var(--grid-bg);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  max-width: 100%;
  max-height: 100%;
}

/* Overlay text while loading */

.grid-loading {
  position: absolute;
  inset: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

/* Side panel */

.side-panel {
  /* __WWH_SIDEPANEL_CLIP_V1__ */
  overflow: hidden !important; /* __WWH_SIDEPANEL_CLIP_V1__ Presence full-bleed needs clipping */
  width: 320px;
  max-width: 40vw;
  background: linear-gradient(145deg, var(--bg-panel-soft), var(--bg-panel));
  border-radius: var(--radius-panel);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;}

.panel-section {
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.02);}

.panel-section:first-of-type {
  border-top: none;}

.panel-heading {
  margin: 0 0 4px;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.panel-muted {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.panel-kv {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  margin-top: 4px;
}

.panel-k {
  color: var(--text-muted);
}

.panel-v {
  color: var(--text-main);
}

/* Hover info */

.hover-details.hidden {
  display: none;
}

.hover-details {
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hover-label {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hover-value {
  margin-bottom: 6px;
}

.hover-url a {
  color: var(--accent-strong);
  text-decoration: none;
  word-break: break-all;
}

.hover-url a:hover {
  text-decoration: underline;
}

.hover-text {
  max-height: 5.5em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hover-coords,
.hover-size {
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

/* Footer */

.site-footer {
  padding: 8px 16px 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  justify-content: center;
  gap: 6px;
}

.footer-sep {
  opacity: 0.8;
}

/* Misc */

.noscript-warning {
  position: absolute;
  inset: 12px;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 0.85rem;
}

/* Responsive tweaks */

@media (max-width: 900px) {
  .layout {
    flex-direction: column;
  }

  .side-panel {
    width: 100%;
    max-width: none;
    order: -1;
  }

  .grid-wrapper {
    height: 60vh;
  }
}


/* SPECTRUM_NEON_START */
/* We Were Here — Spectrum Neon (viby but readable) */

:root{
  --sn-yellow:#FFD84D;
  --sn-orange:#FF9F43;
  --sn-red:#FF4D6D;
  --sn-pink:#FF5FD2;
  --sn-cyan:#3FFFC0;
  --sn-blue:#3FA9F5;

  --sn-glow-soft: 0 0 8px;
  --sn-glow-mid:  0 0 16px;
  --sn-glow-strong:0 0 28px;
}

/* Panels */
.panel, .card, .glass, .presence, #presence, #sidebar, .sidebar{
  background: linear-gradient(160deg, rgba(20,30,60,.85), rgba(8,12,30,.92)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.6) !important;}

/* Headings */
h1,h2,h3,.title,.section-title{
  color:#fff !important;
  text-shadow: var(--sn-glow-soft) var(--sn-cyan), var(--sn-glow-soft) var(--sn-blue) !important;
}

/* Primary buttons */
.btn, button.btn, .btn-primary, #sel-intent-confirm, #sel-reserve-btn, #pay-submit{
  color:#fff !important;
  background: linear-gradient(135deg, var(--sn-yellow), var(--sn-orange), var(--sn-red), var(--sn-pink), var(--sn-cyan)) !important;
  background-size: 300% 300% !important;
  border: none !important;
  box-shadow: var(--sn-glow-mid) rgba(255,159,67,.6) !important;
}

.btn:hover, button.btn:hover, .btn-primary:hover, #sel-intent-confirm:hover, #sel-reserve-btn:hover, #pay-submit:hover{
  box-shadow: var(--sn-glow-strong) rgba(255,159,67,.85) !important;
  transform: translateY(-1px);
}

/* Arrow controls */
.arrow-btn, .move-btn, .dpad button, .dpad .btn{
  background: rgba(20,30,60,.9) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
  box-shadow: var(--sn-glow-soft) var(--sn-blue) !important;
}
.arrow-btn:active, .move-btn:active, .dpad button:active{
  box-shadow: var(--sn-glow-mid) var(--sn-blue), var(--sn-glow-mid) var(--sn-cyan) !important;
}

/* Price highlight */
#sel-price, .price, .price-value{
  color: var(--sn-yellow) !important;
  text-shadow: var(--sn-glow-soft) var(--sn-orange), var(--sn-glow-soft) var(--sn-yellow) !important;
  font-weight: 800 !important;
}

/* Selection rectangle (if it’s DOM-based) */
.selection-rect, .intent-ghost{
  background: rgba(63,255,192,.18) !important;
  border: 1px dashed var(--sn-cyan) !important;
  box-shadow: var(--sn-glow-mid) var(--sn-cyan), inset 0 0 12px rgba(63,255,192,.35) !important;
}

/* Inputs readable */
input, select, textarea{
  color:#fff !important;
  background: rgba(10,20,40,.65) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(63,169,245,.7) !important;
  box-shadow: var(--sn-glow-mid) rgba(63,169,245,.55) !important;
}

/* SPECTRUM_NEON_END */


/* === PANEL LAYOUT RESET (authoritative) === */
.side-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  height: calc(100vh - 120px) !important;
  max-height: calc(100vh - 120px) !important;}

.side-panel .panel-scroll {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding: 18px;
  min-height: 0;}


/* === PANEL STACK FIX (authoritative) === */
.side-panel{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  overflow:hidden !important;
  height: calc(100vh - 120px) !important;
  max-height: calc(100vh - 120px) !important;}

.side-panel > .panel-scroll{
  border-radius: inherit !important; /* __WWH_PANELSCROLL_RADIUS_V1__ */
  overflow: hidden !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:18px !important;
  overflow-y:auto !important;
  padding:18px !important;
  min-height:0 !important;}

/* The real killer: something inside is flex-growing or auto-margined, creating the giant void. Nuke it. */
.side-panel > .panel-scroll > *{
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;}

/* Kill “push down” tricks */
.side-panel > .panel-scroll > *[style*="margin-top:auto"],
.side-panel > .panel-scroll > *[style*="margin-top: auto"]{
  margin-top: 0 !important;}

/* Normalize heading default margins (they add dead air) */
.side-panel h1,
.side-panel h2,
.side-panel h3,
.side-panel p{
  margin: 0 !important;}

/* If any legacy spacer exists, it must not grow */
.side-panel .spacer,
.side-panel .grow,
.side-panel .fill{
  flex: 0 0 auto !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;}

/* === WWH PANEL OVERRIDE: NO SPACE-BETWEEN (authoritative) === */
aside.side-panel,
.side-panel{
  justify-content: flex-start !important;
  align-content: flex-start !important;}

.side-panel > .panel-scroll{
  justify-content: flex-start !important;
  align-content: flex-start !important;}

.side-panel > .panel-scroll > *{
  margin-top: 0 !important;}
/* __DEBUG_FINGERPRINT_MAIN__ 1766760232 */

/* ============================================================
   MOVE CONTROLS — RESTORED CLASSIC LAYOUT (CSS-ONLY)
   Safe append · No JS · No DOM changes
   ============================================================ */

.move-controls {
  display: grid !important;
  grid-template-columns: 44px 44px 44px;
  grid-template-rows: 44px 44px 44px;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 12px auto 8px;
}

/* Direction placement */
.move-controls button[data-move="up"] {
  grid-column: 2;
  grid-row: 1;
}

.move-controls button[data-move="left"] {
  grid-column: 1;
  grid-row: 2;
}

.move-controls button[data-move="right"] {
  grid-column: 3;
  grid-row: 2;
}

.move-controls button[data-move="down"] {
  grid-column: 2;
  grid-row: 3;
}

/* Button feel (keep current gold color) */
.move-controls button {
  width: 44px;
  height: 44px;
  border-radius: 10px;

  font-size: 18px;
  font-weight: 600;

  background: var(--accent-gold);
  color: #0b0b0b;

  border: 1px solid rgba(255, 200, 90, 0.65);
  box-shadow:
    0 0 0 1px rgba(255, 200, 90, 0.35) inset,
    0 4px 10px rgba(0, 0, 0, 0.45);

  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.move-controls button:active {
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(255, 200, 90, 0.45) inset,
    0 2px 6px rgba(0, 0, 0, 0.55);
}


/* ============================================================

/* ============================================================
   __WWH_PANEL_SCROLL_STICKY_PRESENCE_V1__
   Fix: Presence title should NOT scroll away / scrollbar shouldn't sit "over" title.
   Strategy:
   - Keep .panel-scroll as the scroller
   - Make its first .panel-section (Presence) sticky
   - Hide scrollbar chrome (but preserve scrolling)
   - Tighten padding/gaps on short viewports
   ============================================================ */

.side-panel > .panel-scroll{
  /* Keep scroll but remove scrollbar chrome */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* IE/Edge legacy */
}
.side-panel > .panel-scroll::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

/* The Presence header is the FIRST .panel-section in index.html */
.side-panel > .panel-scroll > .panel-section:first-child{
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: sticky;
  top: 0;
  z-index: 20;

  border-radius: 16px !important;
  overflow: hidden;

  /* Make it feel anchored, not part of scrolling content */
  margin: 0 !important;
  /* cancel panel-scroll padding so header spans full width */
  padding: 10px 4px 10px !important;
  /* Solid-ish backing so text doesn't "float" on scroll */
  background:
    linear-gradient(180deg, rgba(6,10,16,.92), rgba(6,10,16,.70));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border-bottom: 1px solid rgba(79,214,255,.12);
}

/* Ensure the title block itself never creates weird overflow */
.side-panel > .panel-scroll > .panel-section:first-child h2{
  margin: 0 !important;
  text-align: center !important;
  padding: 0 12px !important;
  width: 100% !important;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Short viewport: reclaim vertical space so actions (buy) are reachable */
@media (max-height: 760px){
  .side-panel{
    height: calc(100vh - 96px) !important;
    max-height: calc(100vh - 96px) !important;
  }

  .side-panel > .panel-scroll{
    gap: 12px !important;
    padding: 12px !important;
  }

  .side-panel > .panel-scroll > .panel-section:first-child{
  overflow: hidden !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 4px !important;
    }
}

/* Ultra-short viewport */
@media (max-height: 640px){
  .side-panel{
    height: calc(100vh - 84px) !important;
    max-height: calc(100vh - 84px) !important;
  }
}

/* ============================================================
   __WWH_PANEL_STICKY_BUY_CTA_V3__
   Fix: Sticky BUY CTA only when viewport is short.
   - On tall screens, no sticky (prevents overlap during resize/reflow).
   - On short viewports, sticky only for the three CTA IDs.
   ============================================================ */

@media (max-height: 760px){

  /* Create bottom space ONLY inside the selection UI container (BUY tab). */
  #selection-info[data-wwh-tab="buy"]{
    padding-bottom: 64px !important;
  }

  /* Sticky ONLY the known CTA buttons, ONLY in BUY tab. */
  #selection-info[data-wwh-tab="buy"] #sel-reserve-btn,
  #selection-info[data-wwh-tab="buy"] #sel-intent-confirm,
  #selection-info[data-wwh-tab="buy"] #pay-reopen{
    position: sticky;
    bottom: 8px;
    z-index: 30;

    width: 100%;
    display: block;

    box-shadow: 0 18px 60px rgba(0,0,0,.35);

    /* floating plate so it doesn’t visually collide with the block above */
    background: linear-gradient(180deg, rgba(6,10,16,.35), rgba(6,10,16,.75));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
  }

  /* Keep a little separation so “PIXELS/PRICE” never feels glued to the CTA */
  #selection-info[data-wwh-tab="buy"] #sel-price{
    margin-bottom: 10px !important;
  }
}


/* ============================================================
   __WWH_FIX_STICKY_PRESENCE_GAP_V1__
   Fix: sticky Presence + flex gap creates phantom vertical space.
   Strategy:
   - Remove flex gap
   - Reintroduce spacing via margins between REAL sections only
   ============================================================ */

/* Kill global flex gap (causes ghost space with sticky) */
.side-panel > .panel-scroll{
  gap: 0 !important;
}

/* Controlled spacing between sections */
.side-panel > .panel-scroll > .panel-section + .panel-section{
  margin-top: 14px;
}

/* Tighter spacing immediately after sticky Presence */
.side-panel > .panel-scroll > .panel-section:first-child + .panel-section{
  margin-top: 8px;
}

/* Optional polish: tighten selection block top */
#selection-info{
  padding-top: 2px;
}


/* ============================================================
   __WWH_BUY_PANEL_2COL_SHORTHEIGHT_V1__
   Goal: Never hide content in BUY panel on short viewports.
   - Widen panel inward on short-height desktop
   - Split BUY panel into 2 columns:
     Left: Choose size + Move
     Right: Summary + Confirm (+ rest)
   - Disable sticky CTA in this mode to avoid overlap
   ============================================================ */

@media (min-width: 1100px) and (max-height: 760px){

  /* Make panel wider (inward) so 2 columns are usable */
  .side-panel{
    width: 520px !important;
    max-width: 520px !important;
  }

  /* Two-column layout inside BUY panel only */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #panel-buy{
    display: block !important; /* legacy panel-buy grid disabled */
    grid-template-columns: 1fr 1.15fr !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    align-items: start !important;
  }

  /* Left column */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #choose-size-section,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-nudge{
    grid-column: 1 !important;
  }

  /* Right column */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-empty,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-details{
    grid-column: 2 !important;
  }

  /* Remove “stacking” margins that were tuned for single column */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-empty{ margin-top: 0 !important; }
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-details{ margin-top: 0 !important; }

  /* Disable sticky CTA in 2-col mode (prevents overlap/hidden sections) */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"]{
    padding-bottom: 0 !important;
  }
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-reserve-btn,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-intent-confirm,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #pay-reopen{
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
  }
}





/* ============================================================


/* --- __WWH_FORCE_SELECTION_DETAILS_CONTENTS_IN_2COL_V1__ ---
   Critical: ensure the wrapper does NOT become a spanning grid item.
   This makes #selection-summary and #selection-price-actions become real grid items
   and land on the RIGHT column as intended.
------------------------------------------------------------ */
@media (min-width: 901px){
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-details{
    display: block !important; /* was contents; breaks BUY columns */
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}
/* --- __WWH_FORCE_SELECTION_DETAILS_CONTENTS_IN_2COL_V1__ END --- */

   __WWH_BUY_PANEL_4SECTION_GRID_V2__  (CANONICAL)
   Goal: true 4-section layout in BUY 2col:
     Left:  Choose size + Move
     Right: Summary + Price/Actions
   Rules:
   - #selection-details remains the visibility toggle, but becomes layout-transparent (display: contents)
   - Kill legacy placements that treat #selection-details as a single spanning grid item
   - No duplicate competing grid definitions
   ============================================================ */

/* Keep the hide toggle authoritative */
#selection-info[data-wwh-tab="buy"] #selection-details.hidden{
  display: none !important;
}

/* Make selection-details layout-transparent in BUY so its inner sections become grid items */
/* Make the 2 new blocks look/behave like real sections (cards) */
#selection-info[data-wwh-tab="buy"] #selection-summary,
#selection-info[data-wwh-tab="buy"] #selection-price-actions{
  padding: 14px !important;
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
}

/* Make the empty hint also behave like a section card (you already gave it panel-section in JS) */
#selection-info[data-wwh-tab="buy"] #selection-empty{
  padding: 14px !important;
  margin-top: 0 !important;
  min-width: 0 !important;
}

/* Canonical 2-col layout (JS decides data-wwh-buy-layout="2col") */
@media (min-width: 901px){
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #panel-buy{
    display: block !important;
    /* LEGACY panel-buy grid controller DISABLED.
       Canonical BUY layout uses #buy-layout as the ONLY grid engine. */
grid-template-areas:
      "choose summary"
      "move   price" !important;
    column-gap: 14px !important;
    row-gap: 14px !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: start !important;
    grid-auto-rows: max-content !important;
  }

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #choose-size-section{
    grid-area: choose !important;
    margin-top: 0 !important;
    min-width: 0 !important;
  }

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-nudge{
    grid-area: move !important;
    margin-top: 0 !important;
    min-width: 0 !important;
  }

  /* When no selection exists, this shows at top-right */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-empty{
    grid-area: summary !important;
  }

  /* When selection exists, these show as the right column 2 cards */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-summary{
    grid-area: summary !important;
  }
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-price-actions{
    grid-area: price !important;
  }

  /* HARD OVERRIDES: neutralize all legacy rules that position #selection-details as a spanning grid item */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-details{
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Height squeeze: fall back to 1-column stack, still 4 distinct sections */
@media (min-width: 901px) and (max-height: 720px){
  #selection-info[data-wwh-tab="buy"] #panel-buy{ display:block !important; }

  #selection-info[data-wwh-tab="buy"] #choose-size-section{ grid-area: choose !important; }
  #selection-info[data-wwh-tab="buy"] #sel-nudge{ grid-area: move !important; }
  #selection-info[data-wwh-tab="buy"] #selection-empty{ grid-area: summary !important; }
  #selection-info[data-wwh-tab="buy"] #selection-summary{ grid-area: summary !important; }
  #selection-info[data-wwh-tab="buy"] #selection-price-actions{ grid-area: price !important; }

  /* keep layout-transparent wrapper */
  }

/* Extreme short heights: scroll only the price/actions card (never hide CTAs) */
@media (min-width: 901px) and (max-height: 620px){
  #selection-info[data-wwh-tab="buy"] #selection-price-actions{
    max-height: 42vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}



/* ============================================================
   __WWH_BUY_PANEL_2COL_AUTOFIT_V1__

   Goal:
   - Use JS-driven data-wwh-buy-layout to decide 1col vs 2col (real overflow fit).
   - Keep BOTH columns top-aligned.
   - LEFT: Choose size + Move
   - RIGHT: Summary + price + actions
   - Desktop only. Mobile has its own layout.
   ============================================================ */


h-buy-layout to decide 1col vs 2col (real overflow fit).
   - Keep BOTH columns top-aligned.
   - Left: Choose size + Summary
   - Right: Move + remaining actions
   - Desktop only. Mobile has its own layout.
   ============================================================ */

/* Force 1-col when JS says it fits (overrides any older 2-col @media rules). */
@media
 (min-width: 901px){

  /* __WWH_2COL_PRICE_CTA_VISUAL_GROUP_V1__ */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-price{
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-intent-confirm{
    margin-top: 12px !important;
  }
  /* __WWH_2COL_PRICE_CTA_VISUAL_GROUP_V1__ END */

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="1col"] #panel-buy{
    display: block !important;
  }
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="1col"] #choose-size-section,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="1col"] #sel-nudge,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="1col"] #selection-empty,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="1col"] #selection-details{
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Enable 2-col only when JS flags it. */
@media
 (min-width: 901px){

  /* __WWH_2COL_PRICE_CTA_VISUAL_GROUP_V1__ */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-price{
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-intent-confirm{
    margin-top: 12px !important;
  }
  /* __WWH_2COL_PRICE_CTA_VISUAL_GROUP_V1__ END */


  /* Slightly wider panel so 2 columns are readable, but bounded. */

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #panel-buy{
    display: block !important; /* legacy panel-buy grid disabled */
    grid-template-columns: 1fr 1.15fr !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: start !important;
    grid-auto-rows: max-content !important;
  }

  /* LEFT column: Choose size + Summary */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #choose-size-section{
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-details{
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }

/* RIGHT column: Move + empty hint (if shown) */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-nudge{
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-empty{
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }

/* __WWH_2COL_EMPTY_TOP_WHEN_NO_DETAILS_V1__ */
  /* If #selection-details is hidden, right column row 1 becomes empty.
     Pull the empty hint up so the right column starts at the top (no 'mid' start). */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"][data-wwh-has-details="0"] #selection-empty{
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }
  /* __WWH_2COL_EMPTY_TOP_WHEN_NO_DETAILS_V1__ END */

  /* Inside selection-details: 2-column split (summary left, actions right) */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-details{
    display: grid !important;
    grid-template-columns: 0.95fr 1.05fr !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: start !important;
  }

  /* LEFT: summary values */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-coords,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-size,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-pixels{
    grid-column: 1 !important;
  }

  /* RIGHT: price + journey CTAs + payment + danger */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-price,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-intent-confirm,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #selection-after-confirm,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-reserve-status,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-reserve-countdown,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #pay-reopen,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #pay-claim,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-reserve-btn,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-cancel{
    grid-column: 2 !important;
  }

  /* Keep right-side buttons full-width in their column */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-intent-confirm,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #pay-reopen,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-reserve-btn,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-cancel{
    width: 100% !important;
  }


  /* In 2-col, do NOT use sticky CTA plates (they can overlap columns). */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"]{
    padding-bottom: 0 !important;
  }
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-reserve-btn,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-intent-confirm,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #pay-reopen{
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
  }
}

/* __WWH_SIDE_PANEL_MOBILE_ONLY_HIDE_V1__
   The panel must NOT be hidden globally. Only hide it on mobile where the bottom-sheet is used.
*/
@media (max-width: 768px){
  aside.side-panel,
  .side-panel{
    display: none !important;
  }
}
/* __WWH_SIDE_PANEL_MOBILE_ONLY_HIDE_V1__ END */

/* =========================================================
   __WWH_PANEL_BUY_TOP_LOCK_V1__
   Fix: right column starting from middle
   Cause: grid stretched by flex parent (.panel-scroll)
   ========================================================= */
#selection-info[data-wwh-tab="buy"] #panel-buy{ display:block !important; }

/* =========================================================
   __WWH_PANEL_SCROLL_TOP_LOCK_V1__
   Root cause fix:
   .panel-scroll was centering its children vertically.
   Force BUY panel content to start from the top.
   ========================================================= */

#selection-info[data-wwh-tab="buy"]{
  align-self: flex-start !important;
}

#selection-info[data-wwh-tab="buy"] #panel-buy{ display:block !important; }

.side-panel > .panel-scroll{
  align-items: flex-start !important;
  justify-content: flex-start !important;
}


/* =========================================================
   __WWH_PANEL_SCROLL_DESCENDANT_FIX_V1__
   Reason: In some DOM builds, .panel-scroll is NOT a direct child of .side-panel,
   so selectors using ">" don't match. This forces top-start layout regardless.
   ========================================================= */
.side-panel .panel-scroll{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  min-height: 0 !important;
}

.side-panel .panel-scroll > *{
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* __WWH_PANEL_SCROLL_DESCENDANT_FIX_V1__ END */






/* __WWH_BUY_RIGHTCOL_TOP_ALIGN_V1__ REMOVED: superseded by DOM-correct 2col mapping */

/* __WWH_BUY_RIGHTCOL_TOP_ALIGN_V1__ END */

/* __WWH_2COL_PRICE_CTA_SPACING_V1__ */
@media (min-width: 901px){
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-price{
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #sel-intent-confirm{
    margin-top: 12px !important;
  }
}
/* __WWH_2COL_PRICE_CTA_SPACING_V1__ END */


/* ============================================================
   __WWH_BUY_PANEL_WRAPPER_CANONICAL_V1__
   Canonical BUY layout using #buy-layout (two columns, 2+2 sections).
   Purpose:
   - LEFT column: Choose size + Move
   - RIGHT column: Summary + Actions (and the empty hint when no selection)
   - Both columns start at top, no cramming, no legacy grid fights
   Non-negotiable:
   - #panel-buy MUST NOT be a grid controller anymore (legacy blocks are ignored)
   - #selection-details MUST NOT use display:contents in BUY (breaks columns)
   ============================================================ */

#selection-details.hidden{ display:none !important; }

/* Desktop / wide */
@media (min-width: 901px){

  /* Kill ALL legacy grid layouts on #panel-buy in BUY mode */
  #selection-info[data-wwh-tab="buy"] #panel-buy{ display:block !important; }

  /* The ONLY grid controller */
  #selection-info[data-wwh-tab="buy"] #buy-layout{
    display:grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    column-gap: 14px !important;
    row-gap: 14px !important;
    align-items: start !important;
    align-content: start !important;
  }

  /* Columns: stack sections cleanly */
  #selection-info[data-wwh-tab="buy"] #buy-col-left,
  #selection-info[data-wwh-tab="buy"] #buy-col-right{
    display:flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }

  #selection-info[data-wwh-tab="buy"] #buy-col-left{ grid-column: 1 !important; }
  #selection-info[data-wwh-tab="buy"] #buy-col-right{ grid-column: 2 !important; }

  /* HARD STOP: legacy rules tried to make #selection-details layout-transparent */
  #selection-info[data-wwh-tab="buy"] #buy-col-right #selection-details{
    display:block !important;
    margin-top: 0 !important;
  }

  /* Right column top alignment + spacing normalization */
  #selection-info[data-wwh-tab="buy"] #buy-col-right #selection-empty{
    margin-top: 0 !important;
  }

  #selection-info[data-wwh-tab="buy"] #buy-col-right #selection-summary,
  #selection-info[data-wwh-tab="buy"] #buy-col-right #selection-price-actions{
    width: 100% !important;
    margin-top: 0 !important;
  }

  /* Make Summary label not float awkwardly as a “third section” */
  #selection-info[data-wwh-tab="buy"] #buy-col-right #selection-details > .hover-label{
    margin: 0 0 6px 0 !important;
    opacity: .85;
  }
}

/* Small screens: just stack (don’t interfere with mobile rules, but keep it sane if wrappers exist) */
@media (max-width: 900px){
  #selection-info[data-wwh-tab="buy"] #buy-layout{
    display:block !important;
  }
  #selection-info[data-wwh-tab="buy"] #buy-col-left,
  #selection-info[data-wwh-tab="buy"] #buy-col-right{
    display:block !important;
  }
  #selection-info[data-wwh-tab="buy"] #buy-col-right #selection-details{
    display:block !important;
  }
}

/* __WWH_BUY_PANEL_WRAPPER_CANONICAL_V1__ END */

/* __WWH_BUY_LAYOUT_WRAPPER_CANONICAL_V1__ */

/* __WWH_BUY_LAYOUT_WRAPPER_CANONICAL_V1__
   Goal:
   - Wrapper (#buy-layout) is the ONLY layout engine.
   - Two columns side-by-side, full-width, top-aligned.
   - No-selection and selection states occupy same visual template.
   - Reduce unused right-side space and give the grid more width.
*/
#selection-info[data-wwh-tab="buy"] #panel-buy{ display:block !important; }

#selection-info[data-wwh-tab="buy"] #buy-layout.wwh-buy-layout{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
  align-items: start !important;
  align-content: start !important;
}

#selection-info[data-wwh-tab="buy"] #buy-col-left,
#selection-info[data-wwh-tab="buy"] #buy-col-right{
  width: 100% !important;
  min-width: 0 !important; /* allows inner cards/inputs to shrink properly */
}

#selection-info[data-wwh-tab="buy"] #buy-col-left{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#selection-info[data-wwh-tab="buy"] #buy-col-right{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* If viewport is narrow, fall back to 1-column */
@media (max-width: 980px){
  #selection-info[data-wwh-tab="buy"] #buy-layout.wwh-buy-layout{
    grid-template-columns: 1fr !important;
  }
}

/* Give the grid more space by narrowing the side panel in buy 2-col mode */
@media (min-width: 901px){
  .side-panel.wwh-buy-2col{
    
    /* __WWH_BUY_2COL_WIDTH_CONTRACT_V3__ */
  /* BUY 2-col width contract (V3):
     - Must be wide enough for 2 columns (min ~800px) + gap.
     - JS sets --wwh-buy-panel-w when needed; CSS should honor it.
     - Keep within viewport. */
  width: clamp(820px, var(--wwh-buy-panel-w, 860px), 72vw) !important;
  max-width: 72vw !important;
  box-sizing: border-box !important;
/* __WWH_BUY_2COL_WIDTH_CONTRACT_V3__ */ /* END */

  }
}



/* __WWH_KILL_DUPLICATE_SUMMARY_V1__ */
#selection-info[data-wwh-tab="buy"] #selection-details + .panel-section{
  display:none !important;
}

/* __WWH_PANEL_SINGLE_TEMPLATE_CSS_V1__ */

/* BUY panel: single template. Never use display:contents here. */
#selection-info[data-wwh-tab="buy"] #selection-details{
  display: block !important;
}
#selection-info[data-wwh-tab="buy"] #selection-details.hidden{
  display: none !important;
}



/* __WWH_BUY_SUMMARY_LAYOUT_FIX_V1__ */
/* BUY panel: force summary to be vertically ordered and immune to 2-col grid */
#selection-info[data-wwh-tab="buy"] #selection-details {
  display: block;
}

#selection-info[data-wwh-tab="buy"] .wwh-buy-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#selection-info[data-wwh-tab="buy"] .wwh-buy-summary > .hover-label {
  margin-top: 8px;
}

#selection-info[data-wwh-tab="buy"] .wwh-buy-summary > .hover-value {
  margin-bottom: 2px;
}


/* __WWH_BUY_SELECTION_DETAILS_CONTAINER_V1__ */
/* BUY panel: selection-details must NOT inherit Inspect (.hover-details) grid behaviors.
   We keep hover-label/value typography but the container must be normal flow. */
#selection-info[data-wwh-tab="buy"] .wwh-selection-details {
  display: block;
}

#selection-info[data-wwh-tab="buy"] .wwh-selection-details .panel-section {
  display: block;
}


/* __WWH_BUY_2COL_NO_OVERFLOW_V1__ */
/* Fix: prevent BUY 2-col grid from overflowing panel (right column escaping).
   Root cause: grid items keep intrinsic min-width, forcing horizontal overflow.
   Solution: minmax(0,1fr) + min-width:0 on grid children. */
@media (min-width: 901px){
  #selection-info[data-wwh-tab="buy"] #buy-layout.wwh-buy-layout{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 12px !important; /* keep breathing room but avoid push-out */
  }

  #selection-info[data-wwh-tab="buy"] #buy-col-left,
  #selection-info[data-wwh-tab="buy"] #buy-col-right{
    min-width: 0 !important;  /* CRITICAL: allows grid items to shrink */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* __WWH_BUY_2COL_KILL_MINWIDTH_POISON_V1__ */
/* HARD STOP: legacy min-width rules (e.g., 340px !important) cause the right column to overflow outside the side-panel.
   In BUY 2-col we must allow BOTH columns to shrink within the panel. */
@media (min-width: 901px){
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-left,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden; /* prevents inner long strings from forcing width */
  }

  /* Also force the grid container to respect panel width */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-layout.wwh-buy-layout {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}


/* __WWH_BUY_2COL_RATIO_2X3X_AUTH_V1__ */
/* Authoritative 2-col grid sizing: left=2x, right=3x, with minimums for readability. */
@media (min-width: 901px){
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-layout.wwh-buy-layout{
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
    column-gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-left,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right{
    min-width: 0 !important;
  }
}
/* __WWH_BUY_2COL_RATIO_2X3X_AUTH_V1__ END */


/* __WWH_BUY_2COL_RATIO_WIDEN_V2__ */
/* BUY 2-col: tighter columns (less empty space in fields) + keep right-col card styling. */
@media (min-width: 901px){
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-layout.wwh-buy-layout{
    grid-template-columns: minmax(0, 2fr) minmax(0, 2.25fr) !important;
    column-gap: 12px !important;
  }

  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-left,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right{
    min-width: 0 !important;
  }

  /* Right column "card" feel */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right{
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: linear-gradient(180deg, rgba(12,16,24,0.55), rgba(8,10,16,0.35)) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset !important;
  }

  /* Left column: W/H inputs still comfortable */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #choose-size-section input.wwh-input{
    width: 92px !important;
  }
}
/* __WWH_BUY_2COL_RATIO_WIDEN_V2__ */ /* END */

/* __WWH_BUY_2COL_COLUMN_CARDS_V1__ */
/* Bring back the visual separation/border around each column in BUY 2-col mode. */
@media (min-width: 901px){
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-left,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right{
    background: rgba(10, 18, 28, 0.55) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }
}
 /* __WWH_BUY_2COL_COLUMN_CARDS_V1__ */ /* END */




/* __WWH_BUY_2COL_PANEL_WIDTH_AUTHORITATIVE_V1__ */
/* BUY 2-col: make side-panel width ACTUALLY apply in a flex row.
   Root issue: width alone can be ignored if the flex item is constrained by flex-basis/shrink rules elsewhere.
   Fix: set width + min-width + flex-basis + flex explicitly (all !important). */
@media (min-width: 901px){
  .layout > .side-panel.wwh-buy-2col,
  aside.side-panel.wwh-buy-2col,
  .side-panel.wwh-buy-2col{
    /* Must be wide enough for: minmax(320px) + minmax(460px) + gap + paddings */
    width: clamp(860px, var(--wwh-buy-panel-w, 920px), 78vw) !important;
    max-width: 78vw !important;
    min-width: 860px !important;

    /* Make flex respect the width (critical) */
    flex: 0 0 auto !important;
    flex-basis: clamp(860px, var(--wwh-buy-panel-w, 920px), 78vw) !important;
  }
}
/* __WWH_BUY_2COL_PANEL_WIDTH_AUTHORITATIVE_V1__ */ /* END */


/* __WWH_LAYOUT_FLEX_FIX_BUY_2COL_V1__ */
/* Middle-ground layout: readable 2-col, reduced right gutter, no right-edge void. */
@media (min-width: 1100px){
  main.layout{
    display:flex !important;
    gap: 16px !important;
    align-items: stretch !important;

    /* Kill the perceived "unused" space on the far right (base .layout has 16px right padding). */
    padding-right: 8px !important;
    padding-left: 16px !important;
  }

  main.layout > .grid-wrapper{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* BUY 2-col: pin panel to the right edge and keep it tighter */
  main.layout > .side-panel.wwh-buy-2col{
    flex: 0 0 auto !important;
    margin-left: auto !important;

    /* slightly narrower than before */
    width: clamp(500px, 29vw, 610px) !important;
    max-width: 610px !important;

    box-sizing: border-box !important;
  }
}
/* __WWH_LAYOUT_FLEX_FIX_BUY_2COL_V1__ */ /* END */


/* __WWH_BUY_2COL_MIDGROUND_VOIDFIX_V1__ */
/* Goal:
   - No “dead void” to the right.
   - Panel slightly left so right edge never feels clipped.
   - Panel narrower + right column fields not absurdly wide.
   - MUST override earlier wide/min-width rules.
*/
@media (min-width: 1100px){

  /* Give the UI breathing room on the far right (prevents clipped-feel). */
  main.layout{
    padding-right: 16px !important;
  
    padding-right: 16px !important;
  }

  /* Authoritative panel sizing (wins against earlier wide clamps/min-width). */
  main.layout > aside.side-panel.wwh-buy-2col,
  main.layout > .side-panel.wwh-buy-2col,
  .layout > aside.side-panel.wwh-buy-2col,
  .layout > .side-panel.wwh-buy-2col,
  aside.side-panel.wwh-buy-2col,
  .side-panel.wwh-buy-2col{
    width: clamp(500px, 31vw, 630px) !important;
    max-width: 630px !important;
    min-width: 0 !important;           /* kills the old 860px min-width */
    box-sizing: border-box !important;
    flex: 0 1 auto !important;
    margin-right: 12px !important;     /* nudge left so right column never kisses viewport */
  }

  /* Right column: keep it “right-sized”. */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-layout.wwh-buy-layout{
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px) !important;
    column-gap: 22px !important;
    align-items: start !important;
  }


  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-left{ position: relative !important; z-index: 1 !important; }
  /* Restore missing border/box around the right column (visual separation). */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right{
    position: relative !important;
    z-index: 2 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.10)) !important;
    padding: 14px !important;
  }

  /* Cap input/button runway inside the right column. */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right input,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right textarea,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right .wwh-readonly,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right .wwh-input,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-right button{
    width: 100% !important;
    max-width: 320px !important;
  }
}

  /* __WWH_BUY_LEFTCOL_EQUAL_CARDHEIGHT_V1__ */
  /* Keep left column visually balanced: Move card should match Choose Size height. */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-left #choose-size-section,
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-left #sel-nudge{
    min-height: 168px !important;
  }

  /* __WWH_BUY_LEFTCOL_STRETCH_V1__ */
  /* Ensure both cards (Choose Size + Move) stretch to full column width. */
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-left{
    align-items: stretch !important;
  }
  #selection-info[data-wwh-tab="buy"][data-wwh-buy-layout="2col"] #buy-col-left #sel-nudge{
    width: 100% !important;
    box-sizing: border-box !important;
  }

/* __WWH_BUY_2COL_MIDGROUND_VOIDFIX_V1__ */ /* END */




/* __WWH_BUY2COL_MINWIDTH_OVERRIDE_V1__ */
/* Critical: earlier CSS forces .side-panel.wwh-buy-2col { min-width: 860px !important; }
   That makes every later “narrower panel” attempt look like “no change”.
   Override it here, at the end of the file, with equal-or-broader selectors + !important.
*/
@media (min-width: 901px){
  .layout > .side-panel.wwh-buy-2col,
  .layout > aside.side-panel.wwh-buy-2col,
  main.layout > .side-panel.wwh-buy-2col,
  main.layout > aside.side-panel.wwh-buy-2col,
  aside.side-panel.wwh-buy-2col,
  .side-panel.wwh-buy-2col{
    min-width: 0 !important;          /* kills the 860px clamp */
    flex: 0 0 auto !important;
    flex-basis: auto !important;

    /* sane midground width */
    width: clamp(520px, 32vw, 640px) !important;
    max-width: 640px !important;
  }
}
/* __WWH_BUY2COL_MINWIDTH_OVERRIDE_V1__ */ /* END */


/* ============================================================
   __WWH_BUY_TEXT_READABILITY_TUNE_V1__
   Improve legibility without increasing font-size (avoid noise).
   Scope: BUY UI only.
   ============================================================ */
#selection-info[data-wwh-tab="buy"] .hover-label{
  color: rgba(255,255,255,0.72) !important;
  letter-spacing: 0.10em !important;
}
#selection-info[data-wwh-tab="buy"] .panel-muted{
  color: rgba(255,255,255,0.62) !important;
  line-height: 1.35;
}
#selection-info[data-wwh-tab="buy"] .hover-value{
  color: rgba(255,255,255,0.92) !important;
}

/* ============================================================
   __WWH_MOVE_HELP_INFO_DETAILS_V1__
   Compact ⓘ help for Move section.
   ============================================================ */
#sel-nudge .wwh-help{
  margin-top: 12px !important;
}
#sel-nudge .wwh-help > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,18,28,0.55);
  color: rgba(255,255,255,0.80);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}
#sel-nudge .wwh-help > summary::-webkit-details-marker{ display:none; }
#sel-nudge .wwh-help[open] > summary{
  border-color: rgba(255,255,255,0.16);
  background: rgba(10,18,28,0.70);
}
#sel-nudge .wwh-help .wwh-help-body{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}


/* __WWH_INFO_DETAILS_UI_V1__ */
details.wwh-info{ margin-top: 6px !important; }
details.wwh-info > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.72);
  user-select: none;
}
details.wwh-info > summary::-webkit-details-marker{ display:none; }
details.wwh-info[open] > summary{
  border-color: rgba(255,200,90,0.55);
  color: rgba(255,200,90,0.95);
}
details.wwh-info .wwh-info-body{
  margin-top: 8px !important;
  line-height: 1.35 !important;
}


/* __WWH_DETAILS_UNIFY_UI_V1__ */
/* Make all ⓘ bubbles identical across BUY panel (Choose Size, Move, right column Tip). */
details.wwh-info,
details.wwh-help{
  margin-top: 8px !important;
  opacity: .82 !important;
}

details.wwh-info > summary,
details.wwh-help > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.72) !important;
  user-select: none;
}

details.wwh-info > summary::-webkit-details-marker,
details.wwh-help > summary::-webkit-details-marker{ display:none !important; }

details.wwh-info[open] > summary,
details.wwh-help[open] > summary{
  border-color: rgba(255,200,90,0.55) !important;
  color: rgba(255,200,90,0.95) !important;
}

/* Body text spacing + consistent line height */
details.wwh-info .wwh-info-body,
details.wwh-help .wwh-help-body{
  margin-top: 8px !important;
  line-height: 1.35 !important;
}



/* __WWH_INFO_ICON_BOTTOMLEFT_V1__ */
/* Make the three ⓘ icons sit bottom-left INSIDE their own cards (Choose Size / Move / Summary). */
#choose-size-section,
#sel-nudge,
#selection-summary{
  position: relative;
  padding-bottom: 34px !important; /* reserve space so the icon doesn't overlap content */
}

.wwh-info.wwh-info--bl{
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0 !important;
}


/* __WWH_INFO_ICON_SUMMARY_TOP_V1__ */
/* Summary card is short; bottom-left overlaps fields. Keep Choose/Move bottom-left, put Summary top-left. */
#selection-summary{
  padding-top: 34px !important;
  padding-bottom: 12px !important; /* override the earlier 34px bottom reservation */
}

.wwh-info.wwh-info--tl{
  position: absolute;
  left: 12px;
  top: 12px;
  margin: 0 !important;
}


/* __WWH_SUMMARY_LABEL_SPACING_V1__ */
/* Give the Summary title breathing room above the first field (match Move visual rhythm). */
#selection-details > .hover-label + #selection-summary{
  margin-top: 10px !important;
}


/* __WWH_REMOVE_SUMMARY_I_AND_FIX_MOVE_DETAILS_EXPAND_V1__ */

/* A) Remove redundant info icon from the Summary card area (right column) */
#selection-details details.wwh-info{
  display: none !important;
}

/* B) Move card: when ⓘ opens, it must expand DOWN and not overlap the arrows */
#sel-nudge{
  height: auto !important;
  overflow: visible !important;
  position: relative;
  padding-bottom: 36px; /* room for the ⓘ when closed */
}

/* Closed state: keep ⓘ pinned bottom-left (like before) */
#sel-nudge details.wwh-info,
#sel-nudge details.wwh-help{
  position: absolute;
  left: 12px;
  bottom: 12px;
}

/* Open state: switch to normal flow so it pushes content down */
#sel-nudge details.wwh-info[open],
#sel-nudge details.wwh-help[open]{
  position: static !important;
  margin-top: 12px !important;
}

/* Give the opened body a bit of breathing room */
#sel-nudge details.wwh-info[open] .wwh-info-body,
#sel-nudge details.wwh-help[open] .wwh-help-body{
  margin-top: 8px !important;
}


/* __WWH_CHOOSE_SIZE_SPACING_AND_SUMMARY_LABEL_V1__ */

/* Leave space between "Choose Size" label and the W/H inputs (like Summary card spacing). */
#choose-size-section > .hover-label{
  margin-bottom: 10px !important;
}

/* Give Summary label a touch of breathing room too (keeps alignment clean). */
#selection-details > .hover-label{
  margin-bottom: 10px !important;
}


/* __WWH_SUMMARY_LABEL_WEIGHT_AND_PRICE_BOX_V2__ */

/* Make the three card titles visually identical (size/weight/transform/spacing).
   BUY-only + high-specificity so nothing else wins. */
#selection-info[data-wwh-tab="buy"] #choose-size-section > .hover-label,
#selection-info[data-wwh-tab="buy"] #sel-nudge > .hover-label,
#selection-info[data-wwh-tab="buy"] #selection-details > .hover-label{
  font-size: 0.74rem !important;         /* match canonical .hover-label */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;     /* override BUY readability tune */
  line-height: 1.1 !important;
  margin-bottom: 10px !important;        /* consistent breathing room */
}

/* PRICE field: make it look like the other readonly boxes (border was “missing”).
   Keep the yellow price text styling from earlier rules; just give it the box. */
#selection-info[data-wwh-tab="buy"] #sel-price{
  display: block !important;
  background: rgba(10,20,40,.65) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25) !important;
  padding: 10px 12px !important;
}

/* ============================================================
   __WWH_TOPBAR_BRAND_SCALE_V1__
   Make top-left brand (title + subtitle) more prominent.
   Scoped to .wwh-topbar only. Responsive via clamp().
   ============================================================ */

.wwh-topbar .t1{
  /* Balanced brand: prominent but not louder than nav */
  font-size: clamp(18px, 1.25vw, 22px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.wwh-topbar .t2{
  /* Slightly larger for readability, still subordinate to title */
  font-size: clamp(12px, 0.9vw, 14px) !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
  color: rgba(255,255,255,0.72) !important;
}

/* Keep nav stable as brand grows */
.wwh-topbar{
  gap: 16px !important;
}
.wwh-topbar > div:first-child{
  min-width: 0 !important;
}
.wwh-topbar .wwh-nav{
  flex: 0 0 auto !important;
}

@media (max-width: 520px){
  /* Keep identity on small screens without stealing height */
  .wwh-topbar .t1{ font-size: 18px !important; }
  .wwh-topbar .t2{ font-size: 12px !important; }
}