/*
 * WatchShopper — Build a Watch (build.php, assets/build-a-watch.js)
 *
 * Everything is under .bw and prefixed bw-, so none of it reaches the rest of
 * the site and none of the site's .chip, .badge or .grid reaches in. Colours
 * come from the live theme's tokens (themes/src/raster.css), with the Raster
 * values as fallbacks.
 */
.bw {
  --bw-bg: var(--t-bg, #fff);
  --bw-bg2: var(--t-surface-2, #f2f2f2);
  --bw-fg: var(--t-fg, #0a0a0a);
  --bw-fg2: var(--t-fg-2, #262626);
  --bw-fill: var(--t-fill, #232529);
  --bw-muted: var(--t-muted, #6b6b6b);
  --bw-line: var(--t-line, #e3e3e3);
  --bw-accent: var(--t-accent, #0081e4);
  --bw-accent-2: #006dc2;
  --bw-grid: rgb(10 10 10 / .06);
  --bw-gut: var(--t-gutter, 24px);
  --bw-nav: var(--t-nav-h, 56px);
  color: var(--bw-fg);
}
.bw [hidden], .bw-dragghost[hidden] { display: none !important; }
/* No weight of its own (:where), so every button's class sets its size and colour */
:where(.bw) :where(button, select, input) { font: inherit; color: inherit; }
.bw :focus-visible { outline: 2px solid var(--bw-accent); outline-offset: 2px; }
.bw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Intro ── */
.bw-intro { padding: 10px 0 22px; }
.bw-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--bw-accent); }
/* The label, with the sound switch at the top right of the page */
.bw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bw-top .bw-eyebrow { margin: 0; }
.bw-snd { display: inline-flex; align-items: center; gap: 7px; flex: none; border: 1px solid var(--bw-line); background: var(--bw-bg); color: var(--bw-fg); font-size: 12.5px; font-weight: 700; padding: 6px 11px 6px 9px; cursor: pointer; white-space: nowrap; }
.bw-snd:hover { border-color: var(--bw-fg); }
.bw-snd svg { flex: none; }
.bw-snd[aria-pressed="false"] { color: var(--bw-muted); }
.bw-eyebrow a { color: inherit; text-decoration: none; }
.bw-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bw-intro h1 { margin: 0 0 14px; font-size: clamp(34px, 4.4vw, 104px); font-weight: 800; letter-spacing: -.045em; line-height: .92; text-wrap: pretty; }
.bw-lede { margin: 0 0 20px; font-size: clamp(16px, 1.05vw, 21px); color: var(--bw-fg2); }
.bw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bw-chip { display: inline-flex; align-items: center; border: 0; background: var(--bw-bg2); color: var(--bw-fg); padding: 9px 14px; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.bw-chip:hover { background: var(--bw-fill); color: #fff; }
.bw-chip.accent { background: var(--bw-accent); color: #fff; }
.bw-chip.accent:hover { background: var(--bw-accent-2); }
/* Surprise me and Start again: buttons with an icon */
.bw-ichip { gap: 8px; }
.bw-ichip svg { flex: none; }
.bw-chip.bw-outline { background: var(--bw-bg); box-shadow: inset 0 0 0 1px var(--bw-fg); }
.bw-chip.bw-outline:hover { background: var(--bw-fill); box-shadow: inset 0 0 0 1px var(--bw-fill); color: #fff; }

/* ── A build's own page: the strip the builder starts folded into ── */
.bw-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 4px 0 28px; }
.bw-sum-watch { flex: none; width: 96px; height: 96px;
  background-image: linear-gradient(var(--bw-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bw-grid) 1px, transparent 1px); background-size: 12px 12px; background-position: center; }
.bw-sum-watch svg { display: block; width: 100%; height: 100%; }
.bw-sum-body { flex: 1 1 260px; min-width: 0; display: grid; gap: 8px; }
.bw-sum-l { margin: 0; font-size: 13px; font-weight: 700; color: var(--bw-muted); }
.bw-sum-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-sum-chip { background: var(--bw-fill); color: #fff; padding: 5px 10px; font-size: 12.5px; font-weight: 600; }

/* ── Builder ── */
.bw-builder { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 36px; }
.bw-builder > * { min-width: 0; }
@media (min-width: 900px) { .bw-builder { grid-template-columns: clamp(360px, 34vw, 780px) minmax(0, 1fr); gap: clamp(32px, 3vw, 80px); align-items: start; } }
/* Phones: the watch stays in view under the site's sticky header while the parts scroll */
.bw-stage-col { position: sticky; top: var(--bw-nav); z-index: 20; background: var(--bw-bg); margin: 0 calc(-1 * var(--bw-gut)); padding: 8px var(--bw-gut); border-bottom: 1px solid var(--bw-line); }
/* Desktop: one screen tall under the header, the watch taking whatever the counter and chips leave.
   The theme scales the page up on big screens, so the height is divided back down by its zoom. */
@media (min-width: 900px) {
  .bw-stage-col { top: calc(var(--bw-nav) + 14px); margin: 0; padding: 0; border: 0; display: flex; flex-direction: column;
    height: calc((100vh - 28px) / var(--t-zoom, 1) - var(--bw-nav)); max-height: 1500px; }
}
.bw-counter { display: flex; align-items: baseline; gap: 10px; min-height: 40px; }
.bw-count-n { font-size: clamp(34px, 4.6vw, 104px); font-weight: 800; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.bw-count-l { font-size: 14px; font-weight: 700; line-height: 1.2; }
.bw-count-l em { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--bw-muted); }
.bw-cta { margin-left: auto; align-self: center; border: 0; background: var(--bw-accent); color: #fff; font-size: 13.5px; font-weight: 700; padding: 9px 12px; cursor: pointer; white-space: nowrap; }
.bw-cta:hover { background: var(--bw-accent-2); }

.bw-stage { position: relative; height: 34vh; min-height: 230px; margin-top: 6px; perspective: 1200px; touch-action: manipulation;
  background-image: linear-gradient(var(--bw-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bw-grid) 1px, transparent 1px);
  background-size: 20px 20px; background-position: center; outline: 2px dashed transparent; outline-offset: -2px; transition: outline-color .15s; }
@media (min-width: 900px) { .bw-stage { flex: 1 1 auto; height: auto; min-height: 380px; margin-top: 14px; } }
.bw-stage.drop-ok { outline-color: var(--bw-accent); }
.bw-tilt, .bw-flipper { width: 100%; height: 100%; transform-style: preserve-3d; }
.bw-tilt { transition: transform .3s ease-out; }
.bw-tilt.pop { animation: bw-pop .35s ease-out; }
@keyframes bw-pop { 40% { scale: 1.025; } }
.bw-flipper { position: relative; transition: transform .75s cubic-bezier(.3, .7, .2, 1); }
.bw-flipper.flipped { transform: rotateY(180deg); }
.bw-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bw-face svg { display: block; width: 100%; height: 100%; }
.bw-back { transform: rotateY(180deg); cursor: pointer; }
.bw-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bw-gleam { position: absolute; top: -10%; bottom: -10%; left: -60%; width: 50%; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 0, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 70%, transparent 100%); }
.bw-gleam.go { animation: bw-gleam 1.1s cubic-bezier(.4, 0, .2, 1); }
@keyframes bw-gleam { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(380%); } }
.bw-stamp { position: absolute; top: 10px; right: 6px; background: var(--bw-accent); color: #fff; font-size: 13px; font-weight: 800; padding: 6px 10px; opacity: 0; transform: rotate(-5deg) scale(.6); pointer-events: none; }
.bw-stamp.on { animation: bw-stamp .5s cubic-bezier(.2, .9, .3, 1.4) forwards; }
@keyframes bw-stamp { to { opacity: 1; transform: rotate(-5deg) scale(1); } }

.bw-pips { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.bw-pip { flex: 1; height: 4px; background: var(--bw-line); transition: background .2s; }
.bw-pip.on { background: var(--bw-accent); }
.bw-pips-t { margin-left: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bw-note { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--bw-accent); }
.bw-note:empty { display: none; }
.bw-bchips { display: none; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
@media (min-width: 900px) { .bw-bchips { display: flex; } }
.bw-bchip { display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--bw-fill); color: #fff; padding: 5px 8px 5px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bw-bchip i { font-style: normal; opacity: .55; }
.bw-bchip:hover i { opacity: 1; }


/* ── Parts tray ── */
.bw-tray { padding-top: 10px; }
@media (min-width: 900px) { .bw-tray { columns: 560px 2; column-gap: clamp(32px, 3vw, 72px); } .bw-group { break-inside: avoid; } }
.bw-group { border-top: 1px solid var(--bw-line); padding: 14px 0 18px; }
.bw-g-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.bw-g-num { font-size: 12px; font-weight: 700; color: var(--bw-muted); font-variant-numeric: tabular-nums; }
.bw-g-head h3 { margin: 0; font-size: clamp(19px, 1.25vw, 26px); font-weight: 800; letter-spacing: -.03em; }
.bw-g-opt { font-size: 12px; color: var(--bw-muted); }
.bw-g-sel { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--bw-accent); text-align: right; }
.bw-pieces { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--bw-gut)); padding: 2px var(--bw-gut) 4px; scroll-snap-type: x proximity; }
.bw-pieces::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .bw-pieces { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.bw-piece { position: relative; flex: 0 0 auto; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 4px 8px;
  background: var(--bw-bg); border: 1px solid var(--bw-line); color: var(--bw-fg); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; scroll-snap-align: start; transition: border-color .15s, opacity .2s, box-shadow .15s; }
@media (min-width: 900px) { .bw-piece { width: clamp(86px, 5.2vw, 124px); --art: clamp(50px, 3.1vw, 74px); } .bw-piece .bw-p-lab { font-size: clamp(12px, .72vw, 14px); } }
.bw-piece:not(:disabled):hover { border-color: var(--bw-fg); }
.bw-p-art { display: block; width: var(--art, 50px); height: var(--art, 50px); }
.bw-p-art svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.bw-p-lab { font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; }
.bw-p-lab small { display: block; font-size: 11px; font-weight: 500; color: var(--bw-muted); }
.bw-p-n { position: absolute; top: 3px; right: 5px; font-size: 10.5px; font-weight: 700; color: var(--bw-muted); font-variant-numeric: tabular-nums; }
.bw-piece.on { border-color: var(--bw-accent); box-shadow: inset 0 0 0 1px var(--bw-accent); }
.bw-piece.on .bw-p-n { color: var(--bw-accent); }
.bw-piece.on::before { content: "✓"; position: absolute; top: -1px; left: -1px; width: 17px; height: 17px; display: grid; place-items: center; background: var(--bw-accent); color: #fff; font-size: 11px; font-weight: 800; }
/* No watch has it with the rest of the build: shown, but it cannot be picked */
.bw-piece.zero { opacity: .36; }
.bw-piece:disabled { cursor: not-allowed; }
.bw-piece.lifted { opacity: .25; }
body.bw-dragging, body.bw-dragging .bw-piece { cursor: grabbing; user-select: none; }

.bw-pbox { margin-top: 16px; max-width: 760px; }
.bw-hist { display: flex; align-items: flex-end; gap: 2px; height: 52px; }
.bw-hist i { flex: 1; min-height: 0; background: #d9d9d9; transition: height .25s, background .2s; }
.bw-hist i.in { background: var(--bw-accent); }
.bw-dual { position: relative; height: 28px; }
.bw-track, .bw-fillr { position: absolute; top: 13px; height: 2px; }
.bw-track { left: 0; right: 0; background: var(--bw-line); }
.bw-fillr { background: var(--bw-fg); }
.bw-dual input { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; padding: 0; border: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.bw-dual input::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.bw-dual input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: #fff; border: 2px solid var(--bw-fg); cursor: grab; }
.bw-dual input::-moz-range-track { background: transparent; }
.bw-dual input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--bw-fg); cursor: grab; }
.bw-pread { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The same slider over the results, the whole width, when there are watches
   just outside the price range */
.bw-rprice { margin: 0 0 26px; }
.bw-rprice .bw-pbox { max-width: none; margin-top: 8px; }
.bw-rp-l { margin: 0; font-size: 13.5px; color: var(--bw-fg2); }
.bw-rp-l b { color: var(--bw-fg); font-weight: 800; }

/* ── Results ── */
/* Heading and tools share a row while there is room. In a narrow column the
   tools take a row of their own, Share at the left and Sort at the right, and
   the address line goes. */
.bw-results { container-type: inline-size; border-top: 1px solid var(--bw-line); padding: 26px 0 60px; scroll-margin-top: calc(var(--bw-nav) + 10px); }
.bw-r-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 24px; margin-bottom: 10px; }
.bw-r-head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 80px); font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.bw-r-tools { display: flex; align-items: center; gap: 8px; }
.bw-r-path { margin: 0 0 22px; font-size: 12.5px; color: var(--bw-muted); overflow-wrap: anywhere; }
@container (max-width: 760px) {
  .bw-r-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 20px; }
  .bw-r-tools { justify-content: space-between; }
  .bw-r-path { display: none; }
}
/* Share: blue, with a glint every few seconds while there are watches to show, until it is used */
.bw-chip.bw-share { position: relative; overflow: hidden; gap: 8px; padding-left: 12px; background: var(--bw-accent); color: #fff; }
.bw-chip.bw-share:hover { background: var(--bw-accent-2); }
.bw-share svg { flex: none; }
.bw-share::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55) 50%, rgba(255,255,255,0)); transform: translateX(-130%) skewX(-20deg); }
.bw-share.shine::after { animation: bw-shine 4.5s ease-in-out 1s infinite; }
@keyframes bw-shine { 0%, 78% { transform: translateX(-130%) skewX(-20deg); } 96%, 100% { transform: translateX(380%) skewX(-20deg); } }
.bw-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.bw-sort select { border: 1px solid var(--bw-fg); border-radius: 0; background: var(--bw-bg); padding: 7px 8px; font-size: 13.5px; font-weight: 600; }

/* When nothing matches: the swaps that would bring watches back */
.bw-sug-l { display: block; margin-bottom: 8px; color: var(--bw-fg); }
.bw-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-sug { border: 1px solid var(--bw-accent); background: var(--bw-bg); color: var(--bw-accent); padding: 6px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.bw-sug b { margin-left: 6px; color: var(--bw-fg); font-variant-numeric: tabular-nums; }
.bw-sug:hover { background: var(--bw-accent); color: #fff; }
.bw-sug:hover b { color: #fff; }
.bw-nomatch { border: 1px dashed #bdbdbd; padding: 22px 20px; margin-bottom: 8px; }
.bw-nomatch p { margin: 0 0 12px; color: var(--bw-fg2); }

/* Brands among the matches */
.bw-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 20px; }
.bw-b-l { flex: none; margin-right: 6px; font-size: 12px; font-weight: 700; color: var(--bw-muted); }
.bw-bf { flex: none; border: 1px solid var(--bw-line); background: var(--bw-bg); color: var(--bw-fg); padding: 3px 8px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer; }
.bw-bf b { margin-left: 5px; font-weight: 600; color: var(--bw-muted); font-variant-numeric: tabular-nums; }
.bw-bf:hover { border-color: var(--bw-fg); }
.bw-bf.on { background: var(--bw-fill); border-color: var(--bw-fill); color: #fff; }
.bw-bf.on b { color: #fff; opacity: .7; }
/* Phones: one row that scrolls sideways, like the parts */
@container (max-width: 560px) {
  .bw-brands { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--bw-gut)) 18px; padding: 0 var(--bw-gut); }
  .bw-brands::-webkit-scrollbar { display: none; }
}

/* The cards are the site's own (watchCardHtml()), with Remix under each */
#bwRBody { transition: opacity .15s; }
#bwRBody.bw-loading { opacity: .55; }
.bw-grid { margin-bottom: 0; }
.bw-card { display: flex; flex-direction: column; min-width: 0; animation: bw-cardin .35s ease-out both; }
.bw-card > .wcard { flex: 1; }
@keyframes bw-cardin { from { opacity: 0; transform: translateY(8px); } }
.bw-remix { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; width: 100%; border: 1px solid var(--bw-line); background: var(--bw-bg); color: var(--bw-fg); padding: 7px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bw-remix:hover { border-color: var(--bw-fg); }
/* One part different: what differs, across the top of the card, like the part chips under the watch */
.bw-diff { margin-bottom: 6px; background: var(--bw-fill); color: #fff; padding: 7px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.bw-more { margin-top: 22px; }
.bw-sec-t { margin: 44px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.bw-sec-s { margin: 0 0 16px; color: var(--bw-muted); font-size: 14px; }
.bw-locked { border: 1px dashed #bdbdbd; padding: 30px 20px; text-align: center; }
.bw-lk-n { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -.045em; }
.bw-locked p { max-width: 460px; margin: 8px auto 16px; color: var(--bw-fg2); }

/* About this build: the words a build's page carries for search, written from the stock */
.bw-about { border-top: 1px solid var(--bw-line); padding: 26px 0 50px; }
.bw-about h2 { margin: 0 0 14px; font-size: clamp(24px, 2.2vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.bw-about p { margin: 0 0 12px; color: var(--bw-fg2); }
.bw-about .bw-eyebrow { margin-bottom: 8px; color: var(--bw-accent); }
.bw-about h3 { margin: 28px 0 8px; font-size: 15px; font-weight: 800; letter-spacing: 0; }
.bw-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); column-gap: 28px; margin: 0; padding: 0; list-style: none; }
.bw-rel a { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--bw-line); color: var(--bw-fg); font-size: 14px; font-weight: 500; text-decoration: none; }
.bw-rel a:hover { color: var(--bw-accent); }
.bw-rel strong { font-weight: 800; }
.bw-rel b { margin-left: auto; font-weight: 600; color: var(--bw-muted); font-variant-numeric: tabular-nums; }

/* ── Floating bits ── */
.bw-dragghost, .bw-flyer { position: fixed; left: 0; top: 0; width: 72px; height: 72px; pointer-events: none; z-index: 2000; will-change: transform; }
.bw-dragghost { filter: drop-shadow(0 12px 16px rgba(0,0,0,.22)); }
.bw-dragghost svg, .bw-flyer svg { display: block; width: 100%; height: 100%; }
.bw-toast { position: fixed; left: 50%; bottom: 20px; z-index: 2100; max-width: calc(100% - 32px); background: var(--t-fill, #232529); color: #fff; padding: 10px 14px; font-size: 14px; font-weight: 600;
  opacity: 0; transform: translate(-50%, 20px); transition: opacity .2s, transform .2s; pointer-events: none; }
.bw-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* A short list before the watch is whole: a box that slides in from the left
   with the way to it, for anyone down among the parts. Outside .bw, as the
   toast is, so on the theme's own tokens. */
.bw-peek { position: fixed; left: var(--t-gutter, 24px); bottom: 20px; z-index: 2050; display: flex; align-items: stretch; max-width: calc(100% - 2 * var(--t-gutter, 24px));
  background: var(--t-fill, #232529); color: #fff; border-left: 4px solid var(--t-accent, #0081e4); box-shadow: 0 12px 32px rgb(0 0 0 / .2);
  transform: translateX(calc(-100% - 80px)); visibility: hidden; transition: transform .45s cubic-bezier(.2, .9, .3, 1.1), visibility 0s .45s; }
.bw-peek.on { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2, .9, .3, 1.1); }
.bw-peek button { font-family: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; }
.bw-peek-go { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px 12px 16px; text-align: left; }
.bw-peek-go b { font-size: 34px; font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.bw-peek-go > span:first-of-type { display: grid; gap: 2px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.bw-peek-go small { font-size: 12.5px; font-weight: 500; opacity: .7; }
.bw-peek-cta { display: inline-flex; align-items: center; gap: 6px; flex: none; background: var(--t-accent, #0081e4); padding: 9px 12px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.bw-peek-cta svg { flex: none; }
.bw-peek-go:hover .bw-peek-cta { background: #006dc2; }
.bw-peek-x { flex: none; padding: 0 12px; opacity: .6; }
.bw-peek-x:hover { opacity: 1; }
.bw-peek-x svg { display: block; }
.bw-peek button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (max-width: 560px) {
  .bw-peek { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .bw-peek-go { flex: 1; gap: 10px; padding: 10px 10px 10px 12px; }
  .bw-peek-go b { font-size: 28px; }
  .bw-peek-go small { font-size: 12px; }
  .bw-peek-cta { margin-left: auto; }
}

/* ── Inside the watch drawings ── */
.bw-wt { font-weight: 700; text-anchor: middle; }
.bw-wt2 { font-weight: 600; text-anchor: middle; opacity: .75; }
.bw-bz { fill: #f2f2f2; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.bw-dt { fill: #111; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.bw-phl { fill: #9a9a9a; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-anchor: middle; }
.bw-cap { fill: #8a8a8a; font-size: 10.5px; font-weight: 600; text-anchor: middle; }
.bw-tg1 { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-anchor: middle; }
.bw-tg2 { font-size: 14px; font-weight: 800; letter-spacing: -.02em; text-anchor: middle; }
.bw-eng { font-weight: 700; letter-spacing: .12em; }
.bw-ph { fill: #f6f6f6; stroke: #bdbdbd; stroke-width: 1.5; stroke-dasharray: 6 5; }
.bw-tgt { fill: none; stroke: transparent; stroke-width: 3; pointer-events: none; }
#bwFront[data-hot="case"] .bw-tgt-case, #bwFront[data-hot="dial"] .bw-tgt-dial, #bwFront[data-hot="strap"] .bw-tgt-strap,
#bwFront[data-hot="move"] .bw-tgt-move, #bwFront[data-hot="tag"] .bw-tgt-tag { stroke: var(--bw-accent); stroke-dasharray: 8 6; animation: bw-march .6s linear infinite; }
@keyframes bw-march { to { stroke-dashoffset: -14; } }
#bwFront.snap-case .bw-tgt-case, #bwFront.snap-dial .bw-tgt-dial, #bwFront.snap-strap .bw-tgt-strap,
#bwFront.snap-move .bw-tgt-move, #bwFront.snap-tag .bw-tgt-tag { animation: bw-snap .6s ease-out; }
@keyframes bw-snap { 0% { stroke: var(--bw-accent); stroke-width: 16px; stroke-opacity: .85; } 100% { stroke: var(--bw-accent); stroke-width: 2px; stroke-opacity: 0; } }
.bw-badge { cursor: pointer; }
.bw-tag { transform-box: view-box; }
.bw-tag.swing { animation: bw-swing 1s ease-out; }
@keyframes bw-swing { 20% { transform: rotate(9deg); } 45% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
.bw-mv-drop { transform-box: view-box; animation: bw-mvdrop .7s cubic-bezier(.2, .8, .25, 1.15) .3s both; }
@keyframes bw-mvdrop { from { transform: scale(1.6) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Phones: centred, and each button a full-width row of its own ── */
@media (max-width: 560px) {
  .bw-intro, .bw-r-head, .bw-r-path, .bw-rp-l, .bw-about > .bw-eyebrow, .bw-about h2, .bw-locked { text-align: center; }
  /* The sound switch shrinks to its speaker, top right, clear of the centred eyebrow */
  .bw-top { position: relative; justify-content: center; min-height: 34px; }
  .bw-snd { position: absolute; right: 0; top: 50%; transform: translateY(-50%); gap: 0; padding: 8px; font-size: 0; }
  .bw-tools, .bw-r-tools { flex-direction: column; align-items: stretch; }
  .bw-tools .bw-chip, .bw-r-tools .bw-chip, #bwEdit, #bwEarly, .bw-more { width: 100%; justify-content: center; }
  .bw-sort { justify-content: center; }
  .bw-sort select { flex: 1; }
  .bw-summary { flex-direction: column; text-align: center; }
  .bw-sum-body { flex: none; width: 100%; justify-items: center; }
  .bw-sum-chips, .bw-sugs { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-peek, .bw-peek.on { transition: none; }
  .bw *, .bw *::before, .bw *::after { animation: none !important; transition: none !important; }
}