/* ==========================================================================
   Weatherby Configurator — Frontend Styles
   Matches production WPC configurator visual design
   ========================================================================== */

/* ── RESET & BASE ─────────────────────────────────────────────────────────── */
#wby-configurator,
#wby-configurator * { box-sizing: border-box; }

#wby-configurator {
  font-family: 'Hind', sans-serif;
  color: #333;
  width: 100%;
}

.wby-loading, .wby-error {
  padding: 3rem; text-align: center; color: #888; font-size: 1rem;
}
.wby-error { color: #c00; }

/* ── MAIN LAYOUT ─────────────────────────────────────────────────────────── */
.wby-cfg-wrap {
  width: 100%;
  background: transparent;
  /* Fills viewport height minus page header/nav — adjust offset as needed */
  height: calc(100vh - 160px);
  min-height: 550px;
}

.wby-cfg-body {
  display: flex;
  height: 100%;
  gap: 0;
}

/* ── STAGE (left column) ─────────────────────────────────────────────────── */
.wby-stage {
  flex: 1;
  background: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.wby-stage-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wby-stage-canvas {
  position: relative;
  width: 1900px;
  height: 1300px;
  flex-shrink: 0;
  transform-origin: top left;
}

.wby-stage-layer {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.wby-stage-hidden  { opacity: 0; transition: opacity 0.25s ease; }
.wby-stage-visible { opacity: 1; transition: opacity 0.25s ease; }

/* ── PANEL (right column) ────────────────────────────────────────────────── */
.wby-cfg-panel {
  width: 420px;
  flex-shrink: 0;
  padding: 0;
  /* Dark warm panel — makes gold pop */
  background: #1e1c1a;
  color: #e8e4de;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  /* Single scrollbar on panel only */
  scrollbar-width: thin;
  scrollbar-color: #444 #1e1c1a;
}

.wby-cfg-panel::-webkit-scrollbar { width: 4px; }
.wby-cfg-panel::-webkit-scrollbar-track { background: #1e1c1a; }
.wby-cfg-panel::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

/* Panel inner padding */
.wby-cfg-panel > * { padding-left: 1.25rem; padding-right: 1.25rem; }
.wby-cfg-sections { padding-left: 0; padding-right: 0; }

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.wby-cfg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(200,168,75,0.3);
  margin-bottom: 0;
  gap: 1rem;
}

.wby-cfg-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aaa;
  flex: 1;
}

.wby-cfg-price {
  text-align: right;
  flex-shrink: 0;
}

.wby-cfg-price-label {
  display: block;
  font-size: 0.6rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.1rem;
}

#wby-price-total {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #c8a84b;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ── SECTIONS ────────────────────────────────────────────────────────────── */
.wby-cfg-sections {
  counter-reset: section-counter;
}

.wby-section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  counter-increment: section-counter;
}

.wby-section-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.85rem 1rem;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s;
  position: relative;
  user-select: none;
}

.wby-section-header:hover { background: rgba(255,255,255,0.04); }

/* Numbered counter */
.wby-section-header::before {
  content: counter(section-counter, decimal-leading-zero);
  font-size: 0.62rem;
  font-weight: 700;
  color: #c8a84b;
  letter-spacing: 0.05em;
  min-width: 18px;
  flex-shrink: 0;
}

.wby-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #e8e4de;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: visible;
  min-width: 0;
}

.wby-section-summary {
  font-size: 0.65rem;
  color: #c8a84b;
  font-weight: 600;
  flex: 1 1 auto;
  text-align: right;
  min-width: 0;
  max-width: 60%;
  /* Wrap to at most two lines instead of truncating at 180px, so
     contour / length / colour all show. */
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.wby-section-arrow {
  color: #555;
  font-size: 0.6rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.wby-section-arrow.open { transform: rotate(180deg); }

/* Section body */
.wby-section-body {
  display: none;
  padding: 0.75rem 1.25rem 1rem 1.25rem;
  background: rgba(0,0,0,0.15);
}
.wby-section-body.open { display: block; }

/* ── ACCORDIONS (contour sub-groups) ─────────────────────────────────────── */
.wby-accordion {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  margin-bottom: 0.35rem;
}
.wby-accordion.hidden-tile { display: none; }

.wby-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #bbb;
  border-radius: 2px;
  user-select: none;
  transition: background 0.15s;
}
.wby-accordion-header:hover { background: rgba(255,255,255,0.08); }

.wby-accordion-body {
  display: none;
  padding: 0.6rem 0.75rem;
}
.wby-accordion-body.open { display: block; }
.wby-group-blurb {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.6);
    padding: 10px 14px 12px;
    margin: 0 0 4px;
    border-left: 2px solid rgba(200,168,75,0.5);
    background: rgba(255,255,255,0.03);
}

/* ── SUB-LABELS ──────────────────────────────────────────────────────────── */
.wby-sub-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0.75rem 0 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wby-sub-label.hidden-tile { display: none; }

/* ── OPTIONS GRID ────────────────────────────────────────────────────────── */
.wby-options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.25rem 0;
}

/* 2-column grid when tiles have icons (color swatches) */
.wby-options-grid.has-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.wby-options-grid.has-icons .wby-option-tile {
  min-width: 0;
  padding: 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Square swatch — fixed size, always square regardless of image */
.wby-options-grid.has-icons .wby-tile-icon {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
  margin: 0 auto 0.35rem;
  display: block;
  flex-shrink: 0;
}

.wby-options-grid.has-icons .wby-tile-label {
  font-size: 0.65rem;
  line-height: 1.3;
  color: #bbb;
  word-break: break-word;
  white-space: normal;
  text-align: center;
  width: 100%;
}

.wby-options-grid.has-icons .wby-tile-price {
  font-size: 0.6rem;
  color: #c8a84b;
  margin-top: 0.15rem;
}

.wby-options-grid.has-icons .wby-option-tile.selected .wby-tile-label {
  color: #c8a84b;
}

.wby-options-grid.has-icons .wby-option-tile.selected::after {
  top: 2px;
  right: 3px;
  font-size: 0.5rem;
}

/* ── OPTION TILES ────────────────────────────────────────────────────────── */
.wby-option-tile {
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  text-align: center;
  min-width: 80px;
  transition: border-color 0.12s, background 0.12s;
  background: rgba(255,255,255,0.04);
  position: relative;
}

/* In 2-column grid, tiles fill their cell */
.wby-options-grid.has-icons .wby-option-tile {
  min-width: 0;
  width: 100%;
}

.wby-option-tile:hover {
  border-color: rgba(200,168,75,0.6);
  background: rgba(200,168,75,0.08);
}

.wby-option-tile.selected {
  border-color: #c8a84b;
  background: rgba(200,168,75,0.15);
}

/* Checkmark on selected tile */
.wby-option-tile.selected::after {
  content: '✓';
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 0.55rem;
  color: #c8a84b;
  font-weight: 700;
}

.wby-option-tile.hidden-tile { display: none; }

.wby-tile-icon {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.3rem;
  border-radius: 2px;
}

.wby-tile-label {
  font-size: 0.67rem;
  line-height: 1.3;
  color: #ccc;
  font-weight: 500;
}

.wby-option-tile.selected .wby-tile-label { color: #c8a84b; font-weight: 600; }

.wby-tile-price {
  font-size: 0.6rem;
  color: #c8a84b;
  margin-top: 0.15rem;
  font-weight: 700;
}

/* ── HAND SELECTION (Left/Right) — slightly wider tiles ──────────────────── */
.wby-section[data-uid*="sec-2"] .wby-options-grid,
.wby-section[data-uid*="sec-54"] .wby-options-grid {
  flex-direction: column;
  max-width: 300px;
}

/* ── INITIALS ────────────────────────────────────────────────────────────── */
.wby-initials-wrap {
  padding: 0.85rem 1rem;
  background: #fdf9ee;
  border: 1px solid #e8d88a;
  border-radius: 3px;
  margin: 0.75rem 0;
}
.wby-initials-wrap label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  color: #888;
}
.wby-initials-wrap input {
  width: 90px;
  padding: 0.45rem 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.25em;
  text-align: center;
  border: 1.5px solid #c8a84b;
  border-radius: 3px;
  text-transform: uppercase;
  font-family: inherit;
}

/* ── VALIDATION MESSAGES ─────────────────────────────────────────────────── */
.wby-validation-messages { margin: 0.5rem 1.25rem; }

.wby-validation-msg {
  color: rgba(200,168,75,0.8);
  font-size: 0.7rem;
  padding: 0.15rem 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ── ACTIONS BAR ─────────────────────────────────────────────────────────── */
.wby-cfg-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem 1.25rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.wby-btn-reset {
  padding: 0.6rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #777;
  font-family: inherit;
  transition: all 0.15s;
}
.wby-btn-reset:hover { border-color: #777; color: #aaa; }

.wby-btn-complete {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 2px;
  background: #c8a84b;
  color: #1a1a1a;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: inherit;
  transition: background 0.15s;
}
.wby-btn-complete:hover:not(:disabled) { background: #d4b55a; }
.wby-btn-complete:disabled {
  background: rgba(200,168,75,0.25);
  cursor: not-allowed;
  color: rgba(200,168,75,0.4);
}

/* ── LEAD TIME NOTICE ────────────────────────────────────────────────────── */
.wby-lead-time {
  font-size: 0.62rem;
  color: rgba(200,168,75,0.7);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.5rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .wby-cfg-panel { width: 380px; }
}

@media (max-width: 1024px) {
  .wby-cfg-panel { width: 340px; }
}

@media (max-width: 768px) {
  .wby-cfg-wrap {
    height: auto;
    max-height: none;
  }
  .wby-cfg-body { flex-direction: column; }
  .wby-stage {
    height: 260px;
    min-height: 260px;
    border-right: none;
  }
  .wby-stage-viewport { height: 260px; min-height: 260px; }
  .wby-cfg-panel {
    width: 100%;
    height: auto;
    overflow-y: visible;
  }
  .wby-options-grid { gap: 0.35rem; }
  .wby-option-tile { min-width: 65px; padding: 0.4rem 0.5rem; }
  .wby-tile-icon { width: 38px; height: 38px; }
  .wby-tile-label { font-size: 0.62rem; }
}

@media (max-width: 480px) {
  .wby-stage { height: 200px; min-height: 200px; }
  .wby-stage-viewport { height: 200px; min-height: 200px; }
  .wby-option-tile { min-width: 56px; }
  .wby-cfg-header { flex-direction: column; gap: 0.15rem; align-items: flex-start; }
  #wby-price-total { font-size: 1.25rem; }
}


/* ── HAND SELECTION ──────────────────────────────────────────────────────── */
.wby-hand-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0;
  max-width: 100%;
}

.wby-hand-grid .wby-option-tile {
  width: 100%;
  padding: 0.65rem 1rem;
  min-width: 0;
  text-align: center;
}

.wby-hand-grid .wby-option-tile .wby-tile-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #bbb;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wby-hand-grid .wby-option-tile.selected .wby-tile-label {
  color: #c8a84b;
}

/* Hide Default Receiver option tile in hand section */
.wby-hand-grid .wby-option-tile[id*="Default"],
.wby-option-tile[data-uid]:has(.wby-tile-label:empty) {
  display: none;
}
/* ─────────────────────────────────────────────────────────────
 * ZONE SYSTEM (P1 — stage rebuild)
 * Structured page zones replace the old "one big canvas" model.
 * See stage-rebuild-plan.md for full documentation.
 * ───────────────────────────────────────────────────────────── */

.wby-stage-container {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    min-height: 900px;
}

.wby-zone {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.wby-zone img {
    max-width: 100%;
    height: auto;
    display: block;
}

.wby-zone-text {
    font-size: 11px;
    letter-spacing: 2px;
    color: #666;
    margin-top: 8px;
    text-align: center;
}

.wby-zone-hidden {
    display: none;
}

/* Zone positions -- canvas region = full container width minus the
   sidebar's fixed 420px. Using calc()/percentages (not fixed px) so
   this stays correct as the browser window is resized. Tuned live
   against staging26.weatherby.com/mark-v-custom on 2026-07-09;
   expect further passes once checked at more window sizes. */
.wby-zone-cerakote_swatches {
    top: 4%;
    left: calc(50% - 210px);
    max-width: 26%;
    z-index: 2;
}

.wby-zone-scope_reticle {
    top: 15%;
    left: 3%;
    width: 15%;
    z-index: 2;
}

.wby-zone-muzzle_brake {
    top: 15%;
    right: 460px;
    width: 12%;
    z-index: 2;
}

.wby-zone-floorplate_callout {
    top: 45%;
    right: 460px;
    width: 10%;
    z-index: 2;
}

.wby-zone-selected_upgrades {
    bottom: 15%;
    left: calc(50% - 210px);
    max-width: 22%;
    z-index: 2;
}

.wby-zone-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.wby-zone-upgrade-icon {
    max-width: 60px;
    height: auto;
}

.wby-zone-daka_case {
    bottom: 5%;
    left: 3%;
    max-width: 16%;
    z-index: 2;
}

/* Base underlay: fills exactly the canvas region (container width
   minus the fixed 420px sidebar), sits behind everything else */
.wby-zone-base_underlay {
    top: 0;
    left: 0;
    width: calc(100% - 420px);
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Main widget (canvas + sidebar) fills the FULL stage-container width
   so the sidebar's internal flex layout naturally pins it to the
   container's true right edge instead of leaving a margin gap. */
#wby-configurator {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 100%;
}

/* Hide-on-selection zones fade once the customer has picked a real piece */
.wby-stage-container.wby-has-selection .wby-zone-hide-on-selection {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Mobile — collapse grid, stack vertically */
@media (max-width: 767px) {
    .wby-stage-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: "single";
        min-height: auto;
    }
    /* On mobile the mobile configurator handles rendering entirely,
       zones hide via the mobile CSS already in place */
    .wby-zone { display: none; }
}

/* ==========================================================================
   STAGE / ZONE STACKING + CANVAS POSITIONING FIX  (2026-07-09)
   Supersedes earlier rules in this file by cascade order.
   ========================================================================== */

/* #wby-configurator wraps BOTH the canvas and the sidebar and spans the
   full container. Giving it z-index:3 made it cover every zone. */
#wby-configurator {
    z-index: auto;
}

/* The stage (canvas + ghost + rifle layers) is one stacking context that
   sits BELOW the zones. The ghost now lives inside the canvas, so the
   canvas necessarily spans the full stage area. */
#wby-stage {
    position: relative;
    z-index: 1;
    pointer-events: none;
    background: transparent;
}

#wby-stage-viewport {
    background: transparent;
    pointer-events: none;
}

/* CRITICAL: the canvas must NOT be flex-centered by the viewport.
   scaleStageCanvas() computes its own centering translate assuming the
   canvas origin is (0,0). The viewport's justify-content:center was adding
   a SECOND offset of (viewportWidth - 1900) / 2, which goes sharply
   negative once the viewport is narrower than the 1900px canvas -- the
   rifle slid off the left edge on resize. Absolute positioning makes
   scaleStageCanvas() the single source of truth. */
#wby-stage-canvas {
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    pointer-events: none;
}

/* Zones paint above the stage */
.wby-zone {
    z-index: 3;
}

/* Sidebar above everything, and must remain clickable since the stage
   wrappers above are pointer-events:none */
.wby-cfg-panel {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

/* Floorplate callout: cap at 300px tall, positioned higher */
.wby-zone-floorplate_callout {
    top: 32%;
    width: auto;
}
.wby-zone-floorplate_callout img {
    max-height: 300px;
    width: auto;
}

/* ==========================================================================
   ZONE POSITIONING v2 — matched to WP Configurator Pro reference (2026-07-09)
   Positions are fractions of the CANVAS REGION, not the container. The
   container includes the 420px sidebar, so a bare percentage resolves too
   far right. calc((100% - 420px) * f) anchors each zone to the canvas.
   ========================================================================== */

.wby-zone-cerakote_swatches {
    top: 4%;
    left: calc((100% - 420px) * 0.471);
    transform: translateX(-50%);
    width: calc((100% - 420px) * 0.39);
    max-width: none;
}

.wby-zone-muzzle_brake {
    top: 15%;
    left: calc((100% - 420px) * 0.78);
    right: auto;
    transform: translateX(-50%);
    width: calc((100% - 420px) * 0.145);
}

.wby-zone-floorplate_callout {
    top: 43%;
    left: calc((100% - 420px) * 0.804);
    right: auto;
    transform: translateX(-50%);
    width: auto;
}
/* Height tracks the stage height (.wby-cfg-wrap is calc(100vh - 160px)) */
.wby-zone-floorplate_callout img {
    max-height: calc((100vh - 160px) * 0.41);
    width: auto;
}

.wby-zone-scope_reticle {
    top: 15%;
    left: calc((100% - 420px) * 0.22);
    transform: translateX(-50%);
    width: calc((100% - 420px) * 0.16);
}

.wby-zone-selected_upgrades {
    bottom: 15%;
    left: calc((100% - 420px) * 0.471);
    transform: translateX(-50%);
    width: calc((100% - 420px) * 0.35);
    max-width: none;
}

/* ==========================================================================
   ZONE POSITIONING v3 — final alignment pass (2026-07-09)
   Brake + floorplate share a right edge anchored to the canvas region, so
   they stay locked to each other and to the sidebar at any window width.
   Floorplate height chosen so its caption baseline meets the Daka case's.
   ========================================================================== */

.wby-zone-cerakote_swatches {
    top: 4%;
    left: calc((100% - 420px) * 0.506);
    transform: translateX(-50%);
    width: calc((100% - 420px) * 0.39);
    max-width: none;
}

.wby-zone-muzzle_brake {
    top: 15%;
    left: auto;
    right: calc(420px + (100% - 420px) * 0.06);
    transform: none;
    width: calc((100% - 420px) * 0.145);
}

.wby-zone-floorplate_callout {
    top: 43%;
    left: auto;
    right: calc(420px + (100% - 420px) * 0.06);
    transform: none;
    width: auto;
}
.wby-zone-floorplate_callout img {
    max-height: calc((100vh - 160px) * 0.496);
    width: auto;
}

.wby-zone-scope_reticle {
    top: 15%;
    left: calc((100% - 420px) * 0.22);
    transform: translateX(-50%);
    width: calc((100% - 420px) * 0.16);
}

.wby-zone-selected_upgrades {
    bottom: 15%;
    left: calc((100% - 420px) * 0.506);
    transform: translateX(-50%);
    width: calc((100% - 420px) * 0.35);
    max-width: none;
}

/* Add Ons header — sits above the upgrade icon row. Text comes from
   wp_wby_cfg_zones.static_text for the selected_upgrades zone, so it is
   editable per-config without a code change. */
.wby-zone-header {
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666;
    text-align: center;
    margin-bottom: 14px;
}

/* ==========================================================================
   UPGRADE ZONE v3 (2026-07-09)
   Anchored by `top` (aligned with the Daka case) rather than `bottom`, so
   additional upgrade icons wrap into a SECOND ROW growing downward into
   empty space instead of pushing the header up into the rifle.
   Five icons at 150px + 26px gaps = 854px, comfortably one row in ~1020px.
   ========================================================================== */

.wby-zone-selected_upgrades {
    top: 68.9%;
    bottom: auto;
    left: calc((100% - 420px) * 0.506);
    transform: translateX(-50%);
    width: calc((100% - 420px) * 0.48);
    max-width: none;
}

.wby-zone-icons {
    flex-wrap: wrap;
    justify-content: center;
}

/* Current-layer focus: dim inactive sections while one is open */
.wby-cfg-sections.wby-has-open .wby-section-header { opacity: 0.35; transition: opacity .15s ease; }
.wby-cfg-sections.wby-has-open .wby-section-header.wby-section-active { opacity: 1; }
.wby-cfg-sections.wby-has-open .wby-section-header:hover { opacity: 0.75; }
.wby-cfg-sections.wby-has-open .wby-section-header:not(.wby-section-active) .wby-section-summary,
.wby-cfg-sections.wby-has-open .wby-section-header:not(.wby-section-active) .wby-section-arrow { filter: grayscale(1); }
.wby-section-header.wby-section-active { box-shadow: inset 3px 0 0 0 #c8a84b; }