/* Masons SalesGuide — coverflow filter deck.
 *
 * The look of the deck built by deck.js. It is the RetailLab design system's
 * coverflow drawer (reference/SalesGuideDeck.jsx) restated as a stylesheet: the
 * component carried these numbers as inline styles, and they are reproduced here
 * to the pixel because the coverflow only reads correctly at them. Only the
 * per-card 3D transforms and the stage height stay inline in deck.js, because
 * they are computed per frame.
 *
 * Fonts: Source Code Pro (headings/data) and Montserrat (body) — whatever the
 * page already loads; salesguide.css brings them in.
 *
 * --dk-bar is published for guide-launcher.js, which lifts the floating "Find my
 * TV" pill clear of the docked deck on a phone. It is the deck's collapsed
 * height, so the two cannot drift apart.
 */
:root { --dk-bar: 54px; }

/* ---------------------------------------------------------- shell ---- */
.sg-deck {
  position: sticky;
  bottom: 0;
  padding: 22px 28px 0;                 /* flush on the viewport floor — no bottom gap */
  pointer-events: none;
  z-index: 9998;
  --sg-mono: 'Source Code Pro', ui-monospace, monospace;
  --sg-sans: Montserrat, -apple-system, BlinkMacSystemFont, sans-serif;
}
.sg-deck, .sg-deck * { box-sizing: border-box; }

/* The drawer rises OUT OF the bottom edge: rounded top corners only, no bottom
 * border, shadow thrown upward. It is not a floating tablet. 760px is close to
 * the floor — the cover stack has to terminate inside the panel. */
.sg-deck__panel {
  position: relative;
  width: min(760px, calc(100% - 120px));
  margin: 0 auto;
  pointer-events: auto;
  background: #fbfaf7;
  border-top: 1px solid rgba(24, 30, 42, .12);
  border-left: 1px solid rgba(24, 30, 42, .12);
  border-right: 1px solid rgba(24, 30, 42, .12);
  border-bottom: none;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 46px rgba(24, 30, 42, .18), 0 -2px 8px rgba(24, 30, 42, .06);
}

/* ------------------------------------------------ connector pill ---- */
.sg-deck__pillwrap {
  position: absolute;
  top: -21px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sg-deck__pill {
  display: flex;
  align-items: baseline;
  gap: 9px;
  background: #181e2a;
  border: 3px solid #f8f8f4;
  border-radius: 999px;
  padding: 9px 20px 9px 18px;
  box-shadow: 0 6px 18px rgba(24, 30, 42, .24);
  cursor: pointer;
  user-select: none;
  /* the lockup is one line at every width — at 390px it is 202px wide, over
   * half the drawer, and wraps to two lines without this */
  white-space: nowrap;
}
.sg-deck__pill-count { font: 700 19px/1 var(--sg-mono); color: #d6de24; transition: color 200ms; }
.sg-deck__pill-count.is-danger { color: #ff5c5c; }
.sg-deck__pill-of {
  font: 500 10.5px/1 var(--sg-mono);
  color: #8a9099;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sg-deck__pill-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  align-self: center;
  margin-left: 6px;
  border-radius: 50%;
  background: #d6de24;
  color: #181e2a;
  font: 700 18px/1 var(--sg-mono);
  padding-bottom: 2px;
  transition: transform 300ms;
  transform: rotate(180deg);            /* collapsed by default */
}
.sg-deck.is-open .sg-deck__pill-chev { transform: rotate(0deg); }
.sg-deck__pill-tick {
  width: 1px;
  height: 9px;
  background: linear-gradient(rgba(24, 30, 42, .35), rgba(24, 30, 42, 0));
}

/* ------------------------------------------------------- header ---- */
.sg-deck__header {
  position: relative;                   /* positioning context for the centred progress label */
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px 12px;
  transition: border-color 260ms;
  border-bottom: 1px solid rgba(24, 30, 42, .08);
}
.sg-deck:not(.is-open) .sg-deck__header { border-bottom-color: transparent; }
/* `.woocommerce img { height:auto }` (0,2,0) sits above the deck, which is a
 * child of the WooCommerce <body>, so the tag is added to the selector to clear
 * it — otherwise the lockup stretches to the header width. */
.sg-deck img.sg-deck__logo { height: 22px; width: auto; max-width: none; display: block; flex: none; }
/* Lifted out of the header's flex flow and centred on the panel, sitting in the
 * band between the connector pill (above) and the header's divider line (below)
 * rather than up tight against the pill — the cue read right after the shelf
 * count. 42px is the measured midpoint of that band. Logo (left) and Start over
 * (right) keep their places around it. */
.sg-deck__progress {
  position: absolute;
  left: 50%;
  top: 42px;
  transform: translate(-50%, -50%);
  font: 500 12px/1 var(--sg-mono);
  color: #4a5162;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.sg-deck__spacer { flex: 1; }
.sg-deck__startover {
  font: 500 11px/1 var(--sg-sans);
  color: #5a6072;
  background: #fff;
  border: 1px solid rgba(24, 30, 42, .16);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
  transition: opacity 220ms;
}

/* --------------------------------------------- dead-end rescue bar ---- *
 * In flow between header and stage, present only when nothing matches. */
.sg-deck__rescue {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px; background: #181e2a;
}
/* `display: flex` above is an AUTHOR rule, so it beats the user-agent's
 * `[hidden] { display: none }` no matter the specificity — without this the bar
 * sat under the header permanently, empty and black, whatever paintChrome set
 * `.hidden` to. The gate is in paintChrome (nothing matches AND something is
 * answered AND the drawer is open); this is what lets it take effect. */
.sg-deck__rescue[hidden] { display: none; }
.sg-deck__rescue-msg { font: 600 11.5px/1 var(--sg-mono); color: #fff; }
.sg-deck__rescue-btn {
  font: 700 10.5px/1 var(--sg-mono); letter-spacing: .04em; text-transform: uppercase;
  background: #d6de24; color: #181e2a; border: none; border-radius: 999px;
  padding: 8px 14px; cursor: pointer; white-space: nowrap;
}
/* hold the lime against the theme's blue button-repaint on hover/focus */
.sg-deck__rescue-btn:hover, .sg-deck__rescue-btn:focus { background: #d6de24; color: #181e2a; }

/* The themed page repaints every <button> blue/pink on hover and focus
 * (reset.css + the theme's inline sheet: `button:hover,button:focus`). The deck's
 * own buttons must stand out of that. `.sg-deck__x:hover` is (0,2,0) and beats
 * `button:hover` (0,1,1) on specificity, so this holds whatever the load order —
 * the same pinning the old console needed (see the assistant-design memory). */
.sg-deck button:hover, .sg-deck button:focus, .sg-deck button:focus-visible {
  text-decoration: none;
  box-shadow: none;
}
.sg-deck__startover:hover, .sg-deck__startover:focus {
  background: #f2f1ec; color: #5a6072; border-color: rgba(24, 30, 42, .28);
}
.sg-deck__navbtn:hover, .sg-deck__navbtn:focus { background: #f2f1ec; color: #181e2a; }
.sg-side-btn:hover, .sg-side-btn:focus {
  background: #f2f1ec; color: #5a6072; border-color: rgba(24, 30, 42, .28);
}

/* -------------------------------------------------------- stage ---- */
.sg-deck__stage {
  position: relative;
  height: 0;
  outline: none;
  overflow: hidden;
  perspective: 1250px;
  perspective-origin: 50% 42%;
  background: linear-gradient(#fbfaf7, #f1efe9);
  transition: height 420ms cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------- covers ---- */
.sg-cover {
  position: absolute;
  left: 50%;
  top: 20px;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.22, .61, .36, 1), opacity 400ms;
}
.sg-face {
  height: 100%;
  background: #fff;
  overflow: hidden;
  border-top: 3px solid rgba(24, 30, 42, .07);   /* answered marker (unset) */
}
.sg-face.is-answered { border-top-color: #cccc23; }
.sg-face.is-active {
  border-radius: 16px;
  border-left: 1px solid rgba(24, 30, 42, .14);
  border-right: 1px solid rgba(24, 30, 42, .14);
  border-bottom: 1px solid rgba(24, 30, 42, .14);
  padding: 14px 16px;
  box-shadow: 0 20px 44px rgba(24, 30, 42, .2);
}
.sg-face.is-side {
  border-radius: 12px;
  border-left: 1px solid rgba(24, 30, 42, .1);
  border-right: 1px solid rgba(24, 30, 42, .1);
  border-bottom: 1px solid rgba(24, 30, 42, .1);
  padding: 13px;
  box-shadow: 0 10px 22px rgba(24, 30, 42, .14);
}
/* answered side card: 4px lime down the OUTER edge (the strip still facing the
 * viewer at 60 deg), since the foreshortened top marker all but vanishes */
.sg-face.is-side.is-answered.is-right { border-right: 4px solid #cccc23; }
.sg-face.is-side.is-answered.is-left { border-left: 4px solid #cccc23; }
.sg-reflection {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 30px;
  border-radius: 0 0 14px 14px;
  pointer-events: none;
  background: linear-gradient(rgba(24, 30, 42, .13), rgba(24, 30, 42, 0));
}

/* side-card content — the neighbour tile's "artwork" ------------------------ *
 * A side card never renders the full question face (see sideFace() in deck.js);
 * it shows the question's name over its current answer. This treats that pair
 * as the tile's ART, the way a Cover Flow neighbour shows a faded album cover:
 * the name is set large and softly greyed — legible enough to recognise the
 * question, faint enough to read as recall rather than a live control — and it
 * WRAPS into the tile instead of truncating to an ellipsis. The whole cover is
 * already dimmed by distance (paintGeometry's opacity), so the colours here are
 * only lightly faded; over-fading on top of that would erase them.
 *
 * Anchored to whichever edge still faces the viewer at 60deg (is-right flips it
 * to the right), so the title sits in the visible sliver, not the foreshortened
 * half that turns away. */
.sg-side { display: flex; flex-direction: column; height: 100%; width: 120px; }
.sg-side.is-right { margin-left: auto; text-align: right; }
.sg-side__name {
  font: 700 17px/1.15 var(--sg-mono);
  color: rgba(24, 30, 42, .6);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sg-side__ans {
  font: 500 12px/1.3 var(--sg-mono);
  margin-top: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sg-side__ans.is-set { color: rgba(24, 30, 42, .55); }
.sg-side__ans.is-any { color: rgba(24, 30, 42, .32); }

/* active-card composition — a centred three-column header */
.sg-active { height: 100%; display: flex; flex-direction: column; }
.sg-active__head {
  display: grid;
  grid-template-columns: 52px 1fr 52px;   /* fixed gutters — the question shrinks, not them */
  align-items: center;
  gap: 8px;
}
.sg-active__gutter { display: flex; min-width: 0; }
.sg-active__gutter--l { justify-content: flex-start; }
.sg-active__gutter--r { justify-content: flex-end; }
.sg-active__q { font: 700 17px/1.15 var(--sg-mono); color: #181e2a; text-align: center; min-width: 0; }
/* one compact pill per gutter, so the longest question still centres between them */
.sg-side-btn {
  font: 600 8.5px/1 var(--sg-mono);
  letter-spacing: .03em;
  padding: 6px 7px;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(24, 30, 42, .16);
  color: #5a6072;
  white-space: nowrap;
}
.sg-side-btn.is-hidden { visibility: hidden; }
.sg-active__sub { font: 400 11.5px/1.4 var(--sg-sans); color: #5a6072; margin-top: 4px; text-align: center; }

/* --------------------------------------------- controls (shared) ---- */
.sg-ctrl { margin-top: 10px; flex: 1; min-height: 0; }

.sg-cell {
  position: relative;
  min-width: 0; min-height: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  padding: 7px 9px;
  background: #fff;
  border: 1px solid rgba(24, 30, 42, .13);
  transition: all 150ms cubic-bezier(.2, 0, 0, 1);
}
.sg-cell.is-on { border: 2px solid #181e2a; background: rgba(214, 222, 36, .22); }
.sg-cell.is-zero { opacity: .4; }
/* a zero option that clashFor can explain reads as a soft dead-end, not just dim,
 * and swaps its description for the plain-English reason */
.sg-cell.is-clash { opacity: .62; border: 1px solid rgba(255, 92, 92, .4); }
.sg-count {
  position: absolute; top: 6px; right: 7px;
  font: 700 10px/1 var(--sg-mono); color: #8a9099;
}
.sg-cell.is-on .sg-count { color: #181e2a; }
.sg-count.is-danger { color: #ff5c5c; }
.sg-desc.is-danger { color: #ff5c5c; }
.sg-well { flex: none; display: flex; align-items: flex-end; }
.sg-well--30 { height: 30px; }
.sg-well--20 { height: 20px; }
.sg-label {
  font: 700 11px/1.1 var(--sg-mono);
  color: #181e2a;
  margin-top: 7px;
  flex: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-desc { font: 400 8.5px/1.3 var(--sg-sans); color: #8a9099; margin-top: 3px; flex: none; overflow: hidden; }
.sg-desc.clamp1 { white-space: nowrap; text-overflow: ellipsis; }
.sg-desc.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* scale — 3x2 to-scale rectangles */
.sg-ctrl--scale { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; }
.sg-rect { display: block; border-radius: 3px; border: 1px solid; }
.sg-rect--none { width: 36px; height: 22px; border-style: dashed; }

/* cards — cols set inline; one or two rows */
.sg-ctrl--cards { display: grid; gap: 6px; }
.sg-ctrl--cards.is-tworow { grid-auto-rows: 1fr; }
.sg-ctrl--cards.is-onerow { grid-auto-rows: 80px; align-content: center; }
.sg-ctrl--cards .sg-cell { justify-content: flex-start; overflow-wrap: anywhere; }

/* glyphs */
.sg-glyph-grid { display: grid; gap: 1px; }
.sg-glyph-grid span { display: block; }
.sg-glyph-ports { display: flex; gap: 3px; height: 10px; align-items: flex-end; }
.sg-glyph-port {
  display: block; width: 12px; height: 6px; border-radius: 1px;
  border: 1px solid #c1c6cf; background: transparent;
}
.sg-glyph-port.is-on { border-color: #181e2a; background: #cccc23; }
.sg-glyph-unknown { display: block; width: 22px; height: 14px; border-radius: 3px; border: 1px dashed #c1c6cf; }
.sg-glyph-unknown.is-on { border-color: #181e2a; }

/* chips — brand */
.sg-ctrl--chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; overflow: hidden; }
.sg-chip2 {
  height: 32px; padding: 0 11px;
  display: flex; align-items: center; gap: 7px;
  border-radius: 999px; flex: none; white-space: nowrap; cursor: pointer;
  background: #fff; border: 1px solid rgba(24, 30, 42, .13);
  transition: all 150ms cubic-bezier(.2, 0, 0, 1);
}
.sg-chip2.is-on { border: 2px solid #181e2a; background: rgba(214, 222, 36, .22); }
.sg-chip2.is-zero { opacity: .4; }
.sg-chip2.is-clash { opacity: .62; border: 1px solid rgba(255, 92, 92, .4); }
.sg-chip2__t { font: 600 11.5px/1 var(--sg-mono); color: #181e2a; }
.sg-chip2__n { font: 600 9.5px/1 var(--sg-mono); color: #8a9099; }
.sg-chip2__n.is-on { color: #181e2a; }
.sg-chip2__n.is-danger { color: #ff5c5c; }

/* toggle — promotions */
.sg-ctrl--toggle { display: flex; flex-direction: column; justify-content: center; }
.sg-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 6px 0; }
.sg-switch2 {
  width: 44px; height: 24px; border-radius: 999px; flex: none;
  display: flex; align-items: center; padding: 3px;
  background: #dcdfe5; justify-content: flex-start; transition: background 160ms;
}
.sg-switch2.is-on { background: #cccc23; justify-content: flex-end; }
.sg-switch2__knob {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(24, 30, 42, .3);
}
.sg-toggle__text { display: flex; flex-direction: column; gap: 4px; }
.sg-toggle__label { font: 700 12.5px/1 var(--sg-mono); color: #181e2a; }
.sg-toggle__sub { font: 400 10.5px/1.3 var(--sg-sans); color: #8a9099; }

/* histogram — price */
.sg-ctrl--histo { display: flex; flex-direction: column; min-height: 0; justify-content: center; }
.sg-histo2 { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.sg-histo2__bar {
  flex: 1; border-radius: 2px 2px 0 0; background: #dcdfe5;
  transition: height 240ms, background 150ms;
}
.sg-histo2__bar.is-in { background: #cccc23; }
.sg-htrack { height: 3px; background: rgba(24, 30, 42, .1); margin-top: 7px; position: relative; border-radius: 2px; }
.sg-htrack__fill { position: absolute; top: 0; bottom: 0; background: #181e2a; border-radius: 2px; transition: all 240ms; }
.sg-hscale { display: flex; justify-content: space-between; margin-top: 5px; }
.sg-hscale span { font: 500 8.5px/1 var(--sg-mono); color: #a8adb6; }
.sg-hread { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; }
.sg-hread b { font: 700 14px/1 var(--sg-mono); color: #181e2a; }
.sg-hread span { font: 500 10.5px/1 var(--sg-sans); color: #8a9099; white-space: nowrap; margin-left: auto; }
.sg-hpills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.sg-hpill {
  height: 30px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; white-space: nowrap; min-width: 0; cursor: pointer;
  font: 600 11px/1 var(--sg-mono); color: #181e2a;
  background: #fff; border: 1px solid rgba(24, 30, 42, .13);
  transition: all 150ms cubic-bezier(.2, 0, 0, 1);
}
.sg-hpill.is-on { border: 2px solid #181e2a; background: rgba(214, 222, 36, .22); }

/* ----------------------------------------------------------- nav ---- */
.sg-deck__nav {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px; z-index: 80;
}
.sg-deck__navbtn {
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(24, 30, 42, .16); background: #fff; color: #181e2a;
  cursor: pointer; font: 600 12px/1 monospace;
}
.sg-deck__dots { display: flex; gap: 7px; align-items: center; }
.sg-dot { width: 7px; height: 7px; border-radius: 50%; cursor: pointer; background: rgba(24, 30, 42, .18); transition: all 200ms; }
.sg-dot.is-answered { background: #cccc23; }
.sg-dot.is-active { width: 10px; height: 10px; background: #181e2a; }

/* ============================================= the shelf behind ==== *
 * SalesGuide view REPLACES the standard filter sidebar: the guide asks the same
 * questions of the same store, so the classic panel is withheld outright and the
 * product grid takes the full width — a fourth product per row on desktop rather
 * than four wider cards. (At 1601px the grid goes 763px -> 1028px, so 3-up gives
 * (763-20)/3 = 248px a card and 4-up gives (1028-30)/4 = 249px: the cards keep
 * their size and the shopper simply sees one more.) It is withheld for good, not
 * only while the drawer is open — when you have the SalesGuide you do not also
 * need the classic panel. Classic is the DEFAULT view (clean URL): it keeps the
 * sidebar at 3-up and never loads deck.js. Both SalesGuide views (direct
 * ?view=salesguide and indirect ?view=lifestyle) share this shelf layout.
 *
 * The view is chosen BEFORE first paint by the inline #sg-view-signal script
 * (inject_filters.py plants it in <head>), which stamps html.sg-view-classic
 * UNLESS the URL asks for a SalesGuide view. Keying the layout on that class plus the
 * mirror's own stable Elementor ids (69c87dd sidebar, b30b994 grid column,
 * 20019e6 the row — the same ids inject_filters.py already pins) paints the
 * right columns immediately, with no sidebar flash on load in either view and no
 * dependence on when deck.js boots.
 *
 * The sidebar column already carries elementor-hidden-tablet/-mobile, so hiding
 * it is a desktop concern; the grid gets flex-grow so it absorbs the freed
 * width. The 4-up count is scoped >1024px because that is where Elementor shows
 * the sidebar at all — below it .elementor-grid-tablet-3 / -mobile-2 own the
 * count in their own media queries, and an unscoped 4-up would force four across
 * onto a phone. */

/* The rules themselves are NOT here. deck.css is injected near the foot of
 * <body>, after the shelf has already painted, so a hide-rule here would flash
 * the sidebar in on every load. They live instead in the #sg-view-critical
 * <style> that inject_filters.py plants in <head>, next to the #sg-view-signal
 * script that sets the class — the only place early enough to paint the right
 * columns from the first frame. Edit them there. Four rules, in short:
 *   html:not(.sg-view-classic) #69c87dd  -> display:none   (withhold sidebar)
 *   html:not(.sg-view-classic) #b30b994  -> flex-grow:1    (grid takes the width)
 *   html:not(.sg-view-classic) #20019e6  -> column-gap:0   (close the orphaned gap)
 *   + >1024px: #b30b994 .elementor-grid  -> 4 columns      (a 4th product per row) */

/* ========================================== the promotions pill ==== *
 * Promotions was a card in the deck and is now a toggle on the shelf's own
 * sort row, because it is a lens on the results rather than a specification to
 * weigh up. deck.js builds it and keeps it in step with the store.
 *
 * It wears the deck's selected-pill treatment — lime wash, Retail Black rule —
 * so it reads as part of the SalesGuide rather than as another theme control,
 * while sitting at the sort control's own height. */
/* On promotion and Sort by ride at the top of the page in every view, so the
 * two controls that act on the results are always to hand however far down the
 * shelf the shopper is. deck.js picks the element (stickControls) — it has to
 * be an ancestor tall enough to travel, not the row itself.
 *
 * The bar must be opaque: it passes over product cards, and the page behind it
 * is white. The hairline and the soft shadow under it are what stop it reading
 * as text floating loose over the grid.
 *
 * z-index sits above the shelf but well under the drawer (9998), which owns the
 * bottom of the screen. */
.sg-controls {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  box-shadow: 0 1px 0 rgba(24, 30, 42, .10), 0 4px 14px rgba(24, 30, 42, .07);
}

.sg-sortrow { align-items: center; gap: 10px; }

.sg-promopill {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid rgba(24, 30, 42, .18);
  font-family: 'Source Code Pro', ui-monospace, monospace;
  transition: background 150ms, border-color 150ms;
}
.sg-promopill__t { font: 600 11.5px/1 'Source Code Pro', ui-monospace, monospace; color: #181e2a; white-space: nowrap; }
.sg-promopill__n { font: 600 9.5px/1 'Source Code Pro', ui-monospace, monospace; color: #8a9099; }
.sg-promopill.is-on { background: rgba(214, 222, 36, .26); border: 2px solid #181e2a; }
.sg-promopill.is-on .sg-promopill__n { color: #181e2a; }

/* The theme repaints every <button> blue on hover and focus; this one is
 * outside .sg-deck, so it has to hold its own background in every state. The
 * class selectors are (0,2,0) against the theme's `button:hover` (0,1,1). */
.sg-promopill:hover, .sg-promopill:focus, .sg-promopill:focus-visible {
  background: #f2f1ec; color: #181e2a; box-shadow: none; text-decoration: none;
}
.sg-promopill.is-on:hover, .sg-promopill.is-on:focus, .sg-promopill.is-on:focus-visible {
  background: rgba(214, 222, 36, .34); border-color: #181e2a; box-shadow: none;
}

/* ---- Sort by: dressed as the promo pill's twin ---------------------------- *
 * The theme's Sort control is a jet-smart-filters <select> wearing the
 * Elementor page skin — blue hairline, 10px radius, Helvetica, a native OS
 * arrow. Beside the SalesGuide promo pill it read as a stray from another page
 * ("a dog show"). Re-dress it to the pill's language: the same 34px lozenge,
 * Retail-Black hairline and Source Code Pro type, with a drawn chevron in place
 * of the platform arrow. The two now read as one pair of result controls.
 *
 * The selector is (0,5,0) of stable structural classes, chosen to clear the
 * page CSS's per-widget rule (`…elementor-element-ec2f998 .jet-sorting-select`,
 * (0,4,0)) without leaning on that volatile scraped element id — and without
 * !important, which the frozen preview proved unnecessary once the specificity
 * is right. */
.sg-sortrow .elementor-widget-container .jet-smart-filters-sorting .jet-sorting .jet-sorting-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  box-sizing: border-box; height: 34px; max-width: none;
  padding: 0 34px 0 14px;
  border: 1px solid rgba(24, 30, 42, .18); border-radius: 999px;
  background-color: #fff;
  font: 600 11.5px/1 'Source Code Pro', ui-monospace, monospace;
  color: #181e2a; cursor: pointer; box-shadow: none;
}
/* The dropdown caret is drawn as a rotated-border chevron on the wrapper, NOT
 * as the select's own background-image: Elementor's lazyload sets
 * `background-image: none !important` on every container descendant (the trap
 * in the assistant-design memory), and it silently ate an SVG arrow set that
 * way — verified on the live deploy. Borders it does not touch. pointer-events
 * is off so the click still falls through to the select. The select already
 * reserves 34px of right padding for it. */
.sg-sortrow .jet-sorting.jet-sorting--flex-column { position: relative; }
.sg-sortrow .jet-sorting.jet-sorting--flex-column::after {
  content: ""; position: absolute; right: 15px; top: 50%; margin-top: -5px;
  width: 7px; height: 7px;
  border-right: 1.6px solid #181e2a; border-bottom: 1.6px solid #181e2a;
  transform: rotate(45deg); pointer-events: none;
}
.sg-sortrow .elementor-widget-container .jet-smart-filters-sorting .jet-sorting .jet-sorting-select:hover,
.sg-sortrow .elementor-widget-container .jet-smart-filters-sorting .jet-sorting .jet-sorting-select:focus {
  background-color: #f2f1ec; border-color: rgba(24, 30, 42, .18); color: #181e2a; box-shadow: none; outline: none;
}
.sg-sortrow .elementor-widget-container .jet-smart-filters-sorting .jet-sorting .jet-sorting-select:focus-visible {
  outline: 2px solid #181e2a; outline-offset: 2px;
}

/* Retire the mobile FILTER trigger (the theme's off-canvas toggle). The
 * "Find my TV" deck is the filter mechanism now, so a second blue "FILTER"
 * button sitting in the sort row was both redundant and the loudest thing in
 * the "dog show". Hidden by its Elementor id, the way this prototype pins the
 * banner and other scraped elements; on desktop it is already
 * elementor-hidden-desktop, so this only bites on phone/tablet. */
.elementor-element-2c25058 { display: none !important; }

/* With the FILTER trigger gone the sort row is the only thing on its line, but
 * it is still only ~173px wide inside the wrapped parent, while the pill and
 * the select together need ~234px. Give the row a line of its own so the two
 * sit side by side across the full width. Above 767px the row spans the content
 * width and no such help is needed. */
@media (max-width: 767px) {
  /* (0,3,1), to clear Elementor's own per-element container rule at (0,3,0) —
   * the same reach the sidebar collapse needs, and for the same reason */
  body .elementor-element.e-con.sg-sortrow {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

/* -------------------------------------------------------- tablet ---- *
 * 640–767px still gets the desktop rendering — 430px cards, five control kinds
 * — but the panel takes almost the whole width and lets the stage clip the side
 * cards, which is what Cover Flow does anyway. Below 640px it is not squeezed
 * at all; it is replaced (see the mobile block). */
@media (min-width: 640px) and (max-width: 767px) {
  :root { --dk-bar: 52px; }
  .sg-deck { padding: 20px 8px 0; }
  .sg-deck__panel { width: calc(100% - 8px); }
  .sg-deck__header { gap: 10px; padding: 12px 14px 10px; }
  .sg-deck__pill { padding: 8px 16px 8px 14px; gap: 7px; }
}

/* ========================================================= mobile ==== *
 * Below 640px the deck is REPLACED, not reflowed — deck.js mounts a different
 * rendering (reference/SalesGuideDeckMobile.jsx) and tags the root
 * .sg-deck--mobile. Everything here is scoped to that class rather than to a
 * media query, because the JS breakpoint is the one that decides; a media query
 * alone could style a rendering that isn't mounted.
 *
 * It must read as the SAME system: the deck, the 60deg drum, the connector
 * pill and the lime decided markers all survive, at phone scale. What goes is
 * the CONTENTS of the card — all five desktop control kinds collapse into one
 * horizontally-scrolling pill row.
 *
 * --dk-bar is the collapsed height (panel border + 26/9 header padding + the
 * 28px Start over button), so guide-launcher.js's floating pill clears it. */
@media (max-width: 639px) { :root { --dk-bar: 64px; } }

.sg-deck--mobile { padding: 20px 8px 0; }
.sg-deck--mobile .sg-deck__panel {
  width: calc(100% - 8px);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -9px 38px rgba(24, 30, 42, .17), 0 -2px 6px rgba(24, 30, 42, .05);
}

/* connector pill — the same lockup, one size down */
.sg-deck--mobile .sg-deck__pillwrap { top: -19px; }
.sg-deck--mobile .sg-deck__pill {
  gap: 7px; padding: 7px 14px 7px 13px;
  box-shadow: 0 5px 15px rgba(24, 30, 42, .24);
}
.sg-deck--mobile .sg-deck__pill-count { font-size: 17px; }
.sg-deck--mobile .sg-deck__pill-of { font-size: 8.5px; letter-spacing: .09em; }
.sg-deck--mobile .sg-deck__pill-chev {
  width: 20px; height: 20px; margin-left: 4px; font-size: 15px;
}
.sg-deck--mobile .sg-deck__pill-tick { height: 8px; }

/* header — no progress label (the dot rail carries progress); the 26px top
 * padding clears the pill's footprint, which is over half the drawer at 390px */
.sg-deck--mobile .sg-deck__header { gap: 10px; padding: 26px 14px 9px; }
.sg-deck--mobile img.sg-deck__logo { height: 16px; }
.sg-deck--mobile .sg-deck__startover { font-size: 10px; padding: 8px 12px; }

/* rescue bar — message left, button right, rather than the desktop's centred pair */
.sg-deck--mobile .sg-deck__rescue { justify-content: flex-start; gap: 10px; padding: 8px 14px; }
.sg-deck--mobile .sg-deck__rescue-msg { font-size: 10.5px; line-height: 1.2; flex: 1; }
.sg-deck--mobile .sg-deck__rescue-btn { font-size: 9.5px; padding: 8px 12px; }

/* stage — shallower perspective for the smaller drum, and pan-y so the page can
 * still be scrolled vertically with a finger down on the deck */
.sg-deck--mobile .sg-deck__stage {
  perspective: 900px;
  perspective-origin: 50% 44%;
  touch-action: pan-y;
}
/* the whole stack rides on one track, so a swipe moves the drum as a piece
 * instead of fighting the per-card coverflow transforms */
.sg-deck--mobile .sg-deck__track {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 300ms cubic-bezier(.22, .61, .36, 1);
}

/* covers */
.sg-deck--mobile .sg-cover { top: 14px; }
.sg-deck--mobile .sg-face.is-active {
  border-radius: 14px; padding: 12px 13px;
  box-shadow: 0 14px 30px rgba(24, 30, 42, .18);
}
.sg-deck--mobile .sg-face.is-side {
  border-radius: 10px; padding: 11px;
  box-shadow: 0 8px 16px rgba(24, 30, 42, .13);
}
.sg-deck--mobile .sg-reflection {
  left: 5px; right: 5px; height: 22px; border-radius: 0 0 12px 12px;
  background: linear-gradient(rgba(24, 30, 42, .12), rgba(24, 30, 42, 0));
  transition: top 380ms cubic-bezier(.22, .61, .36, 1);
}
.sg-deck--mobile .sg-face { transition: height 380ms cubic-bezier(.22, .61, .36, 1); }

/* side-card "artwork" — the same faded-title treatment, one size down for the
 * narrower phone slivers */
.sg-deck--mobile .sg-side { width: 78px; }
.sg-deck--mobile .sg-side__name { font-size: 12.5px; line-height: 1.15; -webkit-line-clamp: 3; }
.sg-deck--mobile .sg-side__ans { font-size: 10px; line-height: 1.25; margin-top: 7px; }

/* ---- active card: title, sub-line, (sparkline), pill row. That is all. ---- */
.sg-mcard { height: 100%; display: flex; flex-direction: column; }
/* no 52px/1fr/52px gutter grid here — the three header buttons are gone, so the
 * question runs the full width of the card */
.sg-mcard__q {
  font: 700 13px/1.25 var(--sg-mono);
  color: #181e2a;
  text-align: center;
  height: 32px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* the sub-line doubles as the clash-reason slot — a mobile pill has no
 * description to replace, so a dead pill's reason surfaces here in red */
.sg-mcard__sub {
  font: 400 9.5px/1.35 var(--sg-sans);
  color: #8a9099;
  text-align: center;
  height: 15px;
  flex: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 200ms;
}
.sg-mcard__sub.is-danger { color: #ff5c5c; }

/* price sparkline — all that survives of the desktop histogram */
.sg-mspark { display: flex; align-items: flex-end; gap: 2px; height: 26px; margin-top: 8px; flex: none; }
.sg-mspark__bar {
  flex: 1; border-radius: 2px 2px 0 0; background: #dcdfe5;
  transition: height 240ms, background 150ms;
}
.sg-mspark__bar.is-in { background: #cccc23; }

/* ---- the one control kind: a pill row that WRAPS ----
 * It used to scroll sideways and never wrap. That put two meanings on one axis
 * in the same 40px of thumb-space: a swipe over the pills was both "show me the
 * hidden options" and "next question", and the shopper lost — reaching for the
 * options turned the card instead. Wrapping hands the axis back, so a
 * horizontal swipe anywhere on the deck now means exactly one thing.
 *
 * Rows are capped at two by fitPills(), which collapses the remainder behind
 * "+N more" and expands the card in place when it is tapped — so the drawer
 * still stays short on the busy questions (Brand's 13) without hiding anything
 * behind a gesture. */
.sg-mpills {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 5px; row-gap: 6px;
  margin-top: 9px; flex: none;
  overflow: visible;
  padding-bottom: 2px;
}
/* Wrapping into a 226px column is tighter than a strip that ran off the edge,
 * so the pills give back a little padding and the gap between label and count.
 * This is what lets all six screen sizes show on the opening card instead of
 * two of them hiding behind "+2 more" — see fitPills. */
.sg-deck--mobile .sg-mpill { padding: 0 10px; gap: 5px; }
.sg-deck--mobile .sg-mslot { padding: 0 10px; }

/* the expander — reads as a control, not as another answer, so it is filled
 * rather than outlined and carries no count */
.sg-mmore {
  display: inline-flex; align-items: center; flex: none;
  height: 38px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  font: 600 9.5px/1 var(--sg-mono); color: #5a6072;
  background: #f2f1ec; border: 1px solid rgba(24, 30, 42, .14);
  white-space: nowrap;
}
.sg-mmore:hover, .sg-mmore:focus {
  background: #eceae3; color: #5a6072; border-color: rgba(24, 30, 42, .14);
}

.sg-mpill {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 38px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid rgba(24, 30, 42, .14);
  transition: background 150ms, border-color 150ms, opacity 150ms;
}
.sg-mpill.is-on { background: rgba(214, 222, 36, .26); border: 2px solid #181e2a; }
.sg-mpill.is-dead { opacity: .6; border-color: rgba(255, 92, 92, .35); }
.sg-mpill__t { font: 600 11.5px/1 var(--sg-mono); color: #181e2a; white-space: nowrap; }
.sg-mpill__n { font: 600 9px/1 var(--sg-mono); color: #a8adb6; }
.sg-mpill.is-on .sg-mpill__n { color: #181e2a; }
.sg-mpill.is-dead .sg-mpill__t { color: #a8adb6; }
.sg-mpill.is-dead .sg-mpill__n { color: #ff5c5c; }

/* one trailing slot: "skip →" until decided, "clear" after. Never both, and
 * empty on an auto-decided card — hidden by visibility so the row does not
 * reflow as the answer changes. */
.sg-mslot {
  display: inline-flex; align-items: center; flex: none;
  height: 38px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  font: 600 9.5px/1 var(--sg-mono); color: #5a6072;
  background: transparent; border: 1px dashed rgba(24, 30, 42, .22);
  white-space: nowrap;
}
.sg-mslot.is-hidden { visibility: hidden; }

/* The themed page repaints every <button> blue on hover and focus. These are
 * buttons, so — like every other control in the deck — they have to hold their
 * own background at (0,2,0), which beats the theme's `button:hover` (0,1,1). */
.sg-mpill:hover, .sg-mpill:focus { background: #fff; border-color: rgba(24, 30, 42, .14); }
.sg-mpill.is-on:hover, .sg-mpill.is-on:focus { background: rgba(214, 222, 36, .26); border-color: #181e2a; }
.sg-mpill.is-dead:hover, .sg-mpill.is-dead:focus { background: #fff; border-color: rgba(255, 92, 92, .35); }
.sg-mslot:hover, .sg-mslot:focus { background: transparent; color: #5a6072; border-color: rgba(24, 30, 42, .22); }

/* dot rail — no flanking arrows; swipe replaced them */
.sg-deck--mobile .sg-deck__nav { bottom: 9px; gap: 0; }
.sg-deck--mobile .sg-deck__dots { gap: 6px; }
.sg-deck--mobile .sg-dot { width: 6px; height: 6px; }
.sg-deck--mobile .sg-dot.is-active { width: 8px; height: 8px; }

/* ===================================================================== *
 *  Dark chassis — the deck's "presence" treatment (deck.js hangs the class)
 *
 *  The cream face becomes a frosted "screen" set inside a RetailLab-black
 *  bezel, so the whole thing reads as a remote/console clipped onto the page:
 *   - a 14px black bezel with the black connector pill as the top of the device;
 *   - a lime hairline (::before, drawn over the content so children can't bury
 *     it) framing the screen;
 *   - the screen lightly translucent + frosted, so the TV shelf is just visible
 *     through it and the drawer reads as part of the shelf rather than pasted
 *     over it. Only the SURFACE frosts — the dark frame, the lime edge and the
 *     cards (.sg-face, solid #fff) stay opaque and crisp. The panel carries the
 *     blur; the stage drops its own fill so the whole screen is one frosted
 *     pane. Degrades to a plain translucent tint if backdrop-filter is absent.
 * ===================================================================== */
.sg-deck--chassis .sg-deck__panel {
  border: 14px solid #181e2a;
  border-bottom: none;
  background: rgba(251, 250, 247, .80);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    0 -14px 48px rgba(24, 30, 42, .30),
    0 -3px 10px rgba(24, 30, 42, .12);
}
.sg-deck--chassis .sg-deck__stage { background: transparent; }
.sg-deck--chassis .sg-deck__panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  border: 1.5px solid #d6de24;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  pointer-events: none;
  z-index: 80;
}
@media (max-width: 639px) {
  .sg-deck--chassis .sg-deck__panel { border-width: 10px 10px 0; }
}

/* ============================================ distance proxy (Lifestyle) ==== *
 * The size card's Lifestyle control (deck.js distanceControl): a side-elevation
 * room — sofa on the floor, a landscape TV wall-mounted at eye level that grows
 * from its centre — then the metres reading and slider as the hero, then the
 * sweet-spot/count line. Maps sofa distance -> size bands. RetailLab palette. */
.sg-ctrl--dist { display: flex; flex-direction: column; gap: 6px; }
.sg-dist__room { width: 100%; }
.sg-dist__room svg { display: block; width: 100%; height: auto; }
.sg-ds-floor { stroke: #c4c9d2; stroke-width: 2; stroke-linecap: round; }
.sg-ds-wall  { stroke: #e0e3e8; stroke-width: 3; stroke-linecap: round; }
.sg-ds-sofa  { fill: #e7eaee; stroke: #b7bdc7; stroke-width: 1.5; }
.sg-ds-dim   { stroke: #b7bdc7; stroke-width: 1.5; stroke-dasharray: 5 4; }
.sg-ds-glow  { fill: rgba(214, 222, 36, .30); }
.sg-ds-tv    { fill: #181e2a; }                 /* the bezel */
.sg-ds-screen { fill: #cccc23; }                /* the lit screen */

/* hero: the metres reading, big and central, and the size it buys */
.sg-dist__hero {
  display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 2px;
}
.sg-dist__m  { font: 700 30px/1 "Source Code Pro", monospace; color: #181e2a; }
.sg-dist__sz { font: 600 14px "Source Code Pro", monospace; color: #5a6072; }

.sg-dist__foot {
  text-align: center; font: 500 12px "Source Code Pro", monospace; color: #5a6072;
}
.sg-dist__foot b { color: #181e2a; font-weight: 700; }
.sg-dist__n { color: #181e2a; font-weight: 700; }

.sg-dist__slider { display: flex; flex-direction: column; gap: 5px; }
.sg-dist__slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; margin: 6px 0 0;
  background: rgba(24, 30, 42, .16); border-radius: 999px; cursor: pointer;
}
.sg-dist__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #181e2a; border: 3px solid #d6de24; box-shadow: 0 1px 4px rgba(24,30,42,.3);
  cursor: pointer;
}
.sg-dist__slider input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #181e2a; border: 3px solid #d6de24; box-shadow: 0 1px 4px rgba(24,30,42,.3);
  cursor: pointer;
}
.sg-dist__scale {
  display: flex; justify-content: space-between;
  font: 500 9.5px "Source Code Pro", monospace; color: #a8adb6;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ==================================== choice / multi proxy cells (Lifestyle) ==== *
 * Lifestyle cards whose answers are lifestyle choices (streaming habit, what you
 * watch, what you plug in, how much quality matters), mapped behind the scenes to
 * the platform / resolution / hdmi / panel filters. No per-option count — a proxy
 * answer maps to a SET of store values. */
.sg-ctrl--proxy { display: grid; gap: 6px; grid-auto-rows: 1fr; align-content: start; }
.sg-pcell {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  gap: 2px; padding: 9px 12px; text-align: left;
  background: #fff; border: 1px solid rgba(24, 30, 42, .13); border-radius: 9px;
  cursor: pointer; transition: all 150ms cubic-bezier(.2, 0, 0, 1);
}
.sg-pcell.is-on { border: 2px solid #181e2a; background: rgba(214, 222, 36, .22); padding: 8px 11px; }
.sg-pcell__t { font: 700 12.5px "Source Code Pro", monospace; color: #181e2a; line-height: 1.15; }
.sg-pcell__d { font: 400 11px Montserrat, sans-serif; color: #5a6072; line-height: 1.2; }

/* ==================================================== budget proxy (Lifestyle) ==== *
 * A two-handle range over the price ladder — bracket a budget from both ends.
 * Two overlaid range inputs (indices), pointer-events only on the thumbs so each
 * handle is grabbable; a rail + a fill between the handles. */
.sg-ctrl--budget { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 6px; }
.sg-budget__big { font: 700 28px/1.1 "Source Code Pro", monospace; color: #181e2a; }
.sg-budget__read { font: 500 12px "Source Code Pro", monospace; color: #5a6072; }

.sg-budget__range { position: relative; width: 100%; height: 24px; margin-top: 10px; }
.sg-budget__rail, .sg-budget__fill { position: absolute; top: 10px; height: 5px; border-radius: 999px; }
.sg-budget__rail { left: 0; right: 0; background: rgba(24, 30, 42, .16); }
.sg-budget__fill { background: #181e2a; }
.sg-budget__range input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 24px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; pointer-events: none;
}
.sg-budget__range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: #181e2a; border: 3px solid #d6de24; box-shadow: 0 1px 4px rgba(24,30,42,.3);
  cursor: pointer;
}
.sg-budget__range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: #181e2a; border: 3px solid #d6de24; box-shadow: 0 1px 4px rgba(24,30,42,.3);
  cursor: pointer;
}
.sg-budget__range input[type="range"]::-moz-range-track { background: transparent; }
/* the max handle sits above so both stay grabbable when they meet */
.sg-budget__hi { z-index: 2; }
.sg-ctrl--budget .sg-dist__scale { width: 100%; }