/* ==========================================================================
   StickErnie — configurator layout (proof of concept)
   Traced from Stickernie-layout.png @ 1448 × 1086.
   Every offset below is a measured pixel value from that comp.
   ========================================================================== */

:root{
  /* ---- palette (sampled from the comp) ---- */
  --page:        #FDF1D1;
  --card:        #FAF7F1;
  --panel:       #FDFCF7;
  --white:       #FFFFFF;

  --ink:         #1B1A15;
  --ink-soft:    #4A4740;

  --yellow:      #FDBD02;
  --yellow-deep: #F2AF00;
  --gold-edge:   #FCBC2A;

  --teal:        #016F74;
  --teal-badge:  #0E7C82;

  --sel-fill:    #FDF6E0;
  --tint:        #FDF4D9;
  --tint-edge:   #EFD292;

  --line:        #E4E0D6;
  --line-strong: #D8D3C7;

  /* Board gutters are now symmetric (14px each side). The middle column
     absorbs the difference: 604 -> 588. */
  --board-pad-left: 14px;

  /* Condensed display face for the heavy uppercase headings. */
  --f-display: "Roboto Condensed", "Lato", sans-serif;

  /* ---- type scale (derived from measured string widths) ---- */
  --f-h1:        28px;
  --f-lede:      16.5px;
  --f-trust:     15px;
  --f-panel-h:   20px;
  --f-label:     13px;
  --f-body:      13px;
}

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

/* The UA rule for [hidden] is display:none at the lowest possible specificity,
   so any class that sets display beats it. .tile and .card-opt are both
   display:flex, which silently defeated every hidden attribute in the panel. */
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; }

/* Reserve the scrollbar gutter permanently. Without this, locking the body
   for a modal removes the scrollbar, the page gets ~15px wider, and centred
   content slides ~7px right. Browsers without scrollbar-gutter fall back to
   the JS compensation in configurator.js. */
html{ scrollbar-gutter:stable; }

body{
  background:var(--page);
  font-family:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }

/* --------------------------------------------------------------------------
   Fixed design canvas.
   The comp is a 1448px composition, so the page is built at exactly that
   width and scaled to fit narrower viewports by assets/js/fit.js. Replace
   this with real breakpoints when we do the responsive pass.
   -------------------------------------------------------------------------- */
.viewport{ width:100%; overflow:hidden; }

.stage{
  position:relative;
  width:1448px;
  height:1108px;
  margin:0 auto;
  transform-origin:top center;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.hero-ernie{
  position:absolute;
  left:14px;  top:2px;
  height:274px; width:auto;
  z-index:6;
  pointer-events:none;
}

.logo{
  position:absolute;
  left:181px; top:11px;
  width:405px; height:auto;
}

.pitch{ position:absolute; left:604px; top:26px; width:350px; }

.pitch h1{
  margin:0;
  font-family:var(--f-display);
  font-size:var(--f-h1);
  font-weight:900;
  line-height:32px;
  letter-spacing:-.005em;
}

.pitch p{
  margin:12px 0 0;
  font-size:var(--f-lede);
  font-weight:400;
  line-height:27px;
  color:var(--ink);
}

/* ---- trust bar ---- */

.tb-icon{ position:absolute; }
.tb-icon--head { left:969px;  top:9px;  height:118px; }
.tb-icon--bolt { left:1163px; top:46px; height:70px;  }   /* 20% smaller */
.tb-icon--truck{ left:1298px; top:58px; width:83px;   }   /* 30% smaller */

/* the ernie head gets a slow idle wobble */
.tb-icon--head{
  transform-origin:52% 88%;
  animation:ernie-idle 4.4s ease-in-out infinite;
}
@keyframes ernie-idle{
  0%,100% { transform:rotate(-2.2deg) translateY(0); }
  35%     { transform:rotate(1.8deg)  translateY(-3px); }
  70%     { transform:rotate(-.6deg)  translateY(1px); }
}
@media (prefers-reduced-motion:reduce){
  .tb-icon--head{ animation:none; }
}

/* Truck gag: drives off the right edge, drops back in from the roof.
   The badge rides along so a lone checkmark isn't left hanging in mid-air.
   Triggered by assets/js/ernie.js, which adds .is-driving on hover. */
@keyframes truck-swoosh{
  0%   { transform:translate(0,0) rotate(0deg); }
  7%   { transform:translate(-16px,2px) rotate(-2.5deg); }   /* wind up */
  42%  { transform:translate(960px,0) rotate(2deg); opacity:1; }
  43%  { transform:translate(960px,0) rotate(2deg); opacity:0; }
  48%  { transform:translate(0,-460px) rotate(-7deg); opacity:0; }
  52%  { transform:translate(0,-460px) rotate(-7deg); opacity:1; }
  82%  { transform:translate(0,14px) rotate(3deg); }         /* landing squash */
  90%  { transform:translate(0,-8px) rotate(-1.5deg); }
  96%  { transform:translate(0,3px) rotate(.5deg); }
  100% { transform:translate(0,0) rotate(0deg); }
}
.tb-icon--truck.is-driving,
.tb-check--3.is-driving{
  animation:truck-swoosh 1.9s cubic-bezier(.55,.02,.35,1) both;
  z-index:8;
}

.tb-check{ position:absolute; top:96px; width:34px; height:34px; z-index:2; }
.tb-check--1{ left:1056px; }
.tb-check--2{ left:1192px; }
.tb-check--3{ left:1362px; }

.tb-rule{
  position:absolute;
  top:38px; width:2px; height:116px;
  background:var(--teal);
  opacity:.85;
}
.tb-rule--1{ left:1112px; }
.tb-rule--2{ left:1257px; }

.tb-label{
  position:absolute;
  top:126px;
  transform:translateX(-50%);
  font-size:var(--f-trust);
  font-weight:900;
  line-height:24px;
  white-space:nowrap;
}
.tb-label--1{ left:1023px; }
.tb-label--2{ left:1187px; }
.tb-label--3{ left:1339px; }

/* ---- decorative doodles ---- */

.star{ position:absolute; fill:var(--ink); }
.star--pitch   { left:925px;  top:121px; width:21px; height:21px; transform:rotate(-8deg); }
.star--topright{ left:1400px; top:47px;  width:28px; height:28px; transform:rotate(6deg); }
.star--heroleft{ left:30px;   top:232px; width:26px; height:26px; transform:rotate(-12deg); }

/* Single ink smudge, top-right of the board beside step 4. */
.smudge{
  position:absolute;
  left:1364px; top:178px;
  width:66px; height:auto;
  z-index:7;
  pointer-events:none;
}

/* ==========================================================================
   BOARD  (the big rounded card behind the three columns)
   ========================================================================== */

.board{
  position:absolute;
  left:46px; top:183px;
  width:1359px; height:869px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

/* ---- step bar ---- */

.steps{ margin:0; padding:0; list-style:none; }

.step{
  position:absolute; top:18px;
  display:flex; align-items:center;
}
.step--1{ left:211px; }
.step--2{ left:520px; }
.step--3{ left:826px; }
.step--4{ left:1102px; }

.step-num{
  flex:0 0 auto;
  width:45px; height:45px;
  border-radius:50%;
  background:var(--panel);
  border:2px solid #EDE6D4;
  box-shadow:1px 3px 4px rgba(27,26,21,.16);
  font-size:20px; font-weight:900;
  line-height:41px; text-align:center;
}
.step.is-active .step-num{
  background:var(--yellow);
  border-color:var(--yellow-deep);
  box-shadow:1px 3px 5px rgba(27,26,21,.30);
}

.step-txt{ margin-left:13px; padding-top:3px; }

.step-txt b{
  display:block;
  font-size:13.5px; font-weight:900;
  line-height:16px;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
.step-txt i{
  display:block;
  margin-top:8px;
  font-size:12px; font-style:normal; font-weight:400;
  line-height:16px;
  color:var(--ink-soft);
  white-space:nowrap;
}

.step-dash{
  position:absolute; top:43px;
  border-top:2px dashed #B8B2A2;
}
.step-dash--1{ left:422px;  width:78px; }
.step-dash--2{ left:734px;  width:78px; }
.step-dash--3{ left:1012px; width:76px; }

/* ==========================================================================
   PANELS — shared
   ========================================================================== */

.panel{
  position:absolute;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
}

/* ==========================================================================
   1 — OPTIONS
   ========================================================================== */

.panel--options{
  left:var(--board-pad-left);
  top:91px;
  width:393px; height:770px;
  padding:18px;
  overflow:visible;
}

.panel-title{
  margin:-3px 0 0;
  font-family:var(--f-display);
  font-size:var(--f-panel-h);
  font-weight:900;
  line-height:26px;
  letter-spacing:.012em;
  text-transform:uppercase;
  white-space:nowrap;
}
.panel-title-num{ margin-left:14px; margin-right:9px; font-size:22px; }

.field{ margin-top:17px; }
.field--size{ margin-top:18px; }
.field--qty { margin-top:18px; }

.field-label{
  display:block;
  margin-bottom:12px;
  font-size:var(--f-label);
  font-weight:900;
  line-height:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.grid{ display:grid; gap:12px; }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

/* ---- size tiles ---- */

.tile{
  position:relative;
  height:74px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:5px;
  background:var(--white);
  border:1.5px solid var(--line-strong);
  border-radius:10px;
  text-align:center;
}
.tile b{ font-size:19px; font-weight:900; line-height:22px; }
.tile i{ font-size:12px; font-style:normal; font-weight:400; line-height:14px; color:var(--ink-soft); }

.tile.is-selected{
  background:var(--sel-fill);
  border:2px solid var(--gold-edge);
}

/* the ribbon sits flush: no top rounding on the tile beneath it */
.tile--flagged{ border-radius:0 0 10px 10px; }

.tile-flag{
  position:absolute;
  left:-2px; right:-2px; top:-16px;
  height:16px;
  display:block;
  background:linear-gradient(180deg,#14868C 0%,#046A70 100%);
  border-radius:9px 9px 0 0;
  z-index:1;
  color:var(--sel-fill);
  font-size:12.5px; font-weight:700;
  line-height:16px;
  text-align:center;
  white-space:nowrap;
}

/* ---- quantity ---- */

.select{
  position:relative;
  height:44px;
  display:flex; align-items:center;
  padding:0 15px;
  background:var(--white);
  border:1.5px solid var(--line-strong);
  border-radius:10px;
}
.select-value{ font-size:15.5px; font-weight:400; }
.select-chevron{
  position:absolute; right:16px; top:50%;
  width:20px; height:12px; margin-top:-6px;
  color:var(--ink);
}

.save-note{
  display:flex; align-items:center;
  margin:11px 0 0;
  font-size:12.5px; line-height:18px;
  color:var(--ink);
}
.save-star{
  flex:0 0 auto;
  width:19px; height:19px; margin-right:7px;
  fill:var(--teal);
}

/* ---- material / finish / shape ---- */

.card-opt{
  position:relative;
  display:flex; align-items:center;
  height:63px;
  padding-left:16px; padding-right:8px;
  background:var(--white);
  border:1.5px solid var(--line-strong);
  border-radius:10px;
  text-align:left;
}
.card-opt.is-selected{
  background:var(--sel-fill);
  border:2px solid var(--gold-edge);
}

.grid--tall .card-opt{ height:71px; }

/* finish row is a touch shorter in the comp */
.field:nth-of-type(4) .card-opt{ height:61px; }

.card-opt-ico{
  display:block;
  flex:0 0 auto;
  width:28px; height:28px;
  margin-right:12px;
}

.card-opt-txt b{
  display:block;
  font-size:14px; font-weight:700; line-height:17px;
}
.card-opt-txt i{
  display:block;
  margin-top:2px;
  font-size:12px; font-style:normal; font-weight:400; line-height:15px;
  color:var(--ink-soft);
}

.card-opt-check{
  position:absolute; right:9px; top:50%;
  width:21px; height:21px; margin-top:-10px;
}
.card-opt-check svg{ display:block; width:100%; height:100%; }

.card-opt-spark{
  position:absolute; right:10px; top:11px;
  width:19px; height:19px;
  fill:var(--ink);
}
.card-opt-spark svg{ display:block; width:100%; height:100%; }

/* ---- helper character + bubble ---- */

.helper-ernie{
  position:absolute;
  left:18px; top:612px;
  width:140px; height:auto;
  z-index:3;
  pointer-events:none;
}

/* Drawn bubble. Fixed footprint — the artwork never stretches to the text;
   fit.js scales the text down instead (see --bubble-scale). */
.helper-bubble{
  position:absolute;
  left:135px; top:636px;
  width:184px; height:100px;
  background:url("../img/speechbubble.svg") no-repeat center;
  background-size:100% 100%;
  z-index:2;
}

.helper-bubble-body{
  position:absolute;
  left:38px; top:17px;
  width:132px;
  transform:scale(var(--bubble-scale,1));
  transform-origin:left top;
  transition:opacity .17s ease;
}
.helper-bubble-body.is-swapping{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .helper-bubble-body{ transition:none; }
}

.helper-bubble b{
  display:block;
  font-family:var(--f-display);
  font-size:17px; font-weight:900; line-height:19px;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.helper-bubble p{
  margin:6px 0 0;
  font-size:14px; font-weight:700; line-height:22px;
}

/* ==========================================================================
   2 — PREVIEW / UPLOAD
   ========================================================================== */

.panel--preview{
  left:423px; top:91px;
  width:588px; height:769px;
  padding:13px;
}

.preview-stage{ position:relative; height:453px; }

.diecut-note{
  position:absolute;
  left:22px; top:8px;
  font-family:"Caveat","Lato",cursive;
  font-size:29px; font-weight:600;
  line-height:32px;
  transform:rotate(-4deg);
}
.diecut-arrow{
  position:absolute;
  left:88px; top:44px;
  width:54px; height:54px;
}

/* Sticker artwork. Still static — this is the slot the live render drops into. */
.preview-art{ display:block; }

/* Sized by a box rather than a width, because the two demo files have
   different aspect ratios: fixing the width alone let the round one run 40px
   past the stage and over the buttons. All four offsets plus margin:auto
   centres whatever shape lands here. */
.preview-art--main{
  position:absolute;
  inset:0;
  width:auto; height:auto;
  max-width:470px; max-height:404px;
  margin:auto;
}

/* ---- buttons ---- */

.cta-row{
  display:flex; align-items:center;
  margin-top:16px;
  padding-left:37px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:14px;
  font-size:14px; font-weight:900;
  letter-spacing:.025em;
  text-transform:uppercase;
  white-space:nowrap;
  border-radius:10px;
}
.btn-ico{ width:24px; height:24px; }

.btn--ghost{
  width:194px; height:54px;
  background:var(--panel);
  border:2px solid var(--ink);
}
.btn--teal{
  width:228px; height:55px;
  background:var(--teal);
  color:#FFFDF6;
}

.cta-or{
  width:64px;
  font-size:15px; font-weight:700;
  text-align:center;
}

/* ---- file notes ---- */

.file-note{
  margin:20px 0 0 23px;
  font-size:var(--f-body);
  font-weight:400;
  line-height:18px;
}
.file-note + .file-note{ margin-top:8px; }

/* ---- help box ---- */

.help-box{
  position:relative;
  display:flex; align-items:center;
  width:383px; height:98px;
  margin-top:27px;
  padding-left:12px;
  background:var(--tint);
  border:1px solid var(--tint-edge);
  border-radius:12px;
}
.help-bulb{ flex:0 0 auto; width:34px; height:40px; margin-right:14px; }

.help-txt b{
  display:block;
  font-size:13px; font-weight:700; line-height:16px;
}
.help-txt p{
  margin:12px 0 0;
  font-size:12.5px; font-weight:400; line-height:16px;
}

/* ---- zoom ---- */

.zoom{
  position:absolute;
  right:13px; top:670px;
  display:flex; align-items:center;
  width:137px; height:48px;
  background:var(--white);
  border:1.5px solid var(--line-strong);
  border-radius:10px;
}
.zoom-btn{
  flex:0 0 auto;
  width:44px; height:100%;
  font-size:22px; font-weight:700;
  line-height:1;
}
.zoom-val{
  flex:1 1 auto;
  font-size:15px; font-weight:700;
  text-align:center;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  line-height:44px;
}

/* ==========================================================================
   3 — SUMMARY
   ========================================================================== */

.summary-col{
  position:absolute;
  left:1027px; top:91px;
  width:316px;
}

.panel--summary{
  position:relative;
  left:0; top:0;
  width:316px; height:663px;
  padding:8px 11px 22px;
}

.sum-card{
  width:290px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding-bottom:13px;
  overflow:hidden;
}

.sum-head{
  height:42px;
  background:var(--yellow);
  font-family:var(--f-display);
  font-size:16px; font-weight:900;
  line-height:42px;
  letter-spacing:.03em;
  text-align:center;
  text-transform:uppercase;
}

.preview-art-mini-wrap{
  display:flex; align-items:center; justify-content:center;
  margin:12px 13px 0;
  height:145px;
}
.preview-art--mini{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
}

/* ---- spec list ---- */

.spec{ margin:0; padding:11px 17px 0; }

.spec-row{
  display:flex; align-items:center; justify-content:space-between;
  height:29px;
}
.spec-row dt{ font-size:var(--f-body); font-weight:400; }
.spec-row dd{ margin:0; font-size:var(--f-body); font-weight:400; }

.sum-rule{
  margin:16px 15px 0;
  border-top:2px dashed #C9C4B6;
}

.price-row{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:9px 17px 0;
}
.price-label{
  font-size:15px; font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.price-value{ font-size:28px; font-weight:900; line-height:32px; }

/* ---- shipping ---- */

.ship-box{
  display:flex; align-items:center;
  height:63px;
  margin:19px 15px 0;
  padding-left:12px;
  background:var(--tint);
  border:1px solid var(--tint-edge);
  border-radius:10px;
}
.ship-ico{ flex:0 0 auto; width:40px; height:30px; margin-right:12px; }

.ship-txt b{
  display:block;
  font-size:13px; font-weight:900;
  line-height:16px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--teal);
}
.ship-txt span{
  display:block;
  margin-top:6px;
  font-size:11.5px; font-weight:400; line-height:14px;
}

/* ---- continue ---- */

.btn-continue{
  display:flex; align-items:center; justify-content:center;
  gap:26px;
  width:290px; height:58px;
  margin-top:16px;
  background:linear-gradient(180deg,#FDC30A 0%,#F5AF00 100%);
  border-radius:10px;
  font-family:var(--f-display);
  font-size:19px; font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.btn-continue-arrow{ width:30px; height:18px; }

/* ---- secure checkout ---- */

.secure{
  position:relative;
  display:flex; align-items:center;
  margin:29px 0 0;
  padding-left:47px;
}
.secure-lock{ flex:0 0 auto; width:32px; height:44px; margin-right:13px; }

.secure-txt b{
  display:block;
  font-size:13px; font-weight:900;
  line-height:16px;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.secure-txt span{
  display:block;
  margin-top:7px;
  font-size:12px; font-weight:400; line-height:15px;
}

.secure-doodle{
  position:absolute;
  left:233px; top:12px;
  width:54px; height:58px;
}

/* ==========================================================================
   CONFIGURATOR ADDITIONS
   Everything below is new behaviour, not part of the traced comp.
   ========================================================================== */

/* size tiles now carry mm labels, which are longer than 3" */
.tile b{ font-size:17px; }

.tile--more{
  border-style:dashed;
  color:var(--ink-soft);
}
.tile--more b{ font-size:22px; line-height:20px; }

/* "More" link floated to the end of a section label row */
.field-label{
  display:flex; align-items:baseline; justify-content:space-between;
}
.field-more{
  font-size:12px; font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--teal);
  text-decoration:none;
  border-bottom:1.5px solid currentColor;
}
.field-more:hover{ color:var(--ink); }

/* the quantity box is a real select now, styled to match the drawn one */
select.select-value{
  width:100%; height:100%;
  padding:0; margin:0;
  border:0; background:none;
  font:inherit; font-size:15.5px; color:inherit;
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
}
select.select-value:focus{ outline:none; }
.select:focus-within{ border-color:var(--gold-edge); }

/* a combination the factory cannot run */
.card-opt.is-disabled,
.opt-row.is-disabled{
  opacity:.4;
  cursor:not-allowed;
  filter:grayscale(1);
}

/* ---- modals ---- */

body.modal-open{ overflow:hidden; }

.modal{
  position:fixed; inset:0;
  z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }

.modal-scrim{
  position:absolute; inset:0;
  background:rgba(27,26,21,.45);
}

/* Drawn, not chrome: heavy ink outline and a hard offset shadow with no
   blur, so it reads as a sticker sitting on the page rather than a dialog. */
.modal-card{
  position:relative;
  width:100%; max-width:540px;
  max-height:86vh;
  display:flex; flex-direction:column;
  background:var(--sel-fill);
  border:4px solid var(--ink);
  border-radius:28px;
  box-shadow:9px 11px 0 rgba(27,26,21,.85);
  overflow:hidden;
}

.modal-head{
  padding:26px 56px 6px;
  text-align:center;
}
.modal-head h3{
  margin:0;
  font-family:var(--f-display);
  font-size:27px; font-weight:900;
  letter-spacing:.01em;
}
.modal-x{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
  border:3.5px solid var(--ink);
  border-radius:50%;
  font-size:24px; line-height:1;
}
.modal-x:hover{ background:var(--yellow); }

.modal-body{ padding:16px 26px 26px; overflow:auto; }

/* inside a drawn frame, the options are drawn too */
.modal .tile,
.opt-row{
  background:var(--panel);
  border:3px solid var(--ink);
  border-radius:16px;
}
.modal .tile.is-selected,
.opt-row.is-selected{
  background:var(--yellow);
  border:3px solid var(--ink);
}
.modal .tile{ height:86px; }

.size-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}

.custom-size{ margin-top:22px; }

.custom-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:10px;
}
.custom-row label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px;
}
.custom-row input{
  width:84px; height:44px;
  padding:0 10px;
  font:inherit; font-size:15px;
  background:var(--panel);
  border:3px solid var(--ink);
  border-radius:10px;
}
.btn--sm{
  height:44px; padding:0 18px;
  font-size:12.5px; gap:0;
  border:3px solid var(--ink);
}

.opt-list{ display:grid; gap:10px; }

.opt-row{
  display:flex; align-items:center;
  width:100%; height:62px;
  padding-left:16px; padding-right:12px;
  background:var(--white);
  border:1.5px solid var(--line-strong);
  border-radius:10px;
  text-align:left;
}
.opt-row.is-selected{
  background:var(--sel-fill);
  border:2px solid var(--gold-edge);
}

.modal-note{
  margin:18px 0 0;
  font-size:12.5px; line-height:18px;
  text-align:center;
  color:var(--ink-soft);
}


/* ---- speed picker, inside the summary card ---- */

.spec-row--pick dd{
  position:relative;
  display:flex; align-items:center;
  padding-right:16px;
}
.spec-select{
  appearance:none; -webkit-appearance:none;
  max-width:100%;
  padding:0; margin:0;
  border:0; background:none;
  font:inherit; font-size:var(--f-body); color:inherit;
  text-align:right;
  text-align-last:right;      /* Firefox needs this to right-align the closed state */
  cursor:pointer;
  border-bottom:1.5px dotted var(--line-strong);
}
.spec-select:focus{ outline:none; border-bottom-color:var(--gold-edge); }
.spec-chevron{
  position:absolute; right:0; top:50%;
  width:11px; height:7px; margin-top:-3px;
  color:var(--ink-soft);
  pointer-events:none;
}

/* ---- price: the unit leads, the total supports it ---- */

.price-stack{ text-align:right; }

.price-value small{
  margin-left:6px;
  font-size:13px; font-weight:700;
  color:var(--ink-soft);
}
.price-total{
  display:block;
  margin-top:2px;
  font-size:13px; font-weight:400;
  color:var(--ink-soft);
}

.price-total{ line-height:18px; }


/* ---- panel rows collapse to show an off-panel choice ---- */

.grid.is-single{ grid-template-columns:1fr; }

.tile--custom{ grid-column:span 3; }
.tile--custom b{ font-size:17px; }
.tile--custom i{ color:var(--ink-soft); }

/* the gold tick marks the choice, so it only belongs on the chosen card */
.card-opt-check{ display:none; }
.card-opt.is-selected .card-opt-check{ display:block; }

/* ---- star burst, from the Badger Buttons implementation ----
   One shared keyframe; JS hands each star its own flight vector through
   --dx / --dy, so twelve stars cost one animation rather than twelve. */

.confetti-star{
  position:fixed;
  z-index:200;                 /* above the modals at 100 */
  pointer-events:none;         /* a fast double-click must never hit a star */
  font-size:1.3rem;
  line-height:1;
  animation:fly .8s ease-out forwards;
}
@keyframes fly{
  0%   { transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
  100% { transform:translate(var(--dx),var(--dy)) scale(.3) rotate(340deg); opacity:0; }
}

/* ==========================================================================
   RESPONSIVE
   Everything above this line describes the 1448px comp and is untouched.
   Below 1280px the fixed canvas is abandoned and the page becomes an ordinary
   flow document — the wrappers that are display:contents here start behaving
   like real boxes.
   ========================================================================== */

/* On the comp these group nothing: the children keep their measured
   coordinates against .stage. */
.masthead, .brand, .trust, .trust-item, .trust-ico, .helper-row{ display:contents; }

.cartbar{ display:none; }

@media (max-width:1279px){

  /* ---- unwind the canvas ---- */
  /* clip rather than hidden: hidden would silently make this a scroll
     container on the y axis too. Belt to the min-width braces above, and it
     is also what lets Ernie hang off the left edge. */
  .viewport{ overflow-x:clip; height:auto !important; }
  .stage{
    position:static;
    width:auto; height:auto;
    max-width:760px;
    margin:0 auto;
    padding:14px 14px 104px;   /* room for the cart bar */
    transform:none !important;
  }

  /* ---- masthead ---- */
  .masthead{ display:block; }

  .brand{ display:flex; align-items:flex-end; gap:10px; min-width:0; }
  .hero-ernie{
    position:static;
    flex:0 0 auto;
    height:128px; width:auto;
    margin-left:-26px;         /* he hangs off the edge, as on the comp */
  }
  .logo{
    position:static;
    /* min-width:auto is the flex default, and for a replaced element that
       means its INTRINSIC width — 1275px of viewBox here. max-width cannot
       override it, so the logo pushed the document wider than the viewport
       and every card looked inset on the right. */
    flex:1 1 0;
    min-width:0;
    width:100%; max-width:100%; height:auto;
    margin-bottom:6px;
  }

  .pitch{ position:static; width:auto; margin-top:10px; }
  .pitch h1{ font-size:25px; line-height:29px; }
  .pitch p{ margin-top:7px; font-size:15px; line-height:22px; }
  .pitch p br{ display:none; }

  .trust{
    display:flex; align-items:flex-start;
    margin:16px 0 0; padding:0;
    list-style:none;
  }
  .trust-item{
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:0 6px;
    text-align:center;
  }
  .trust-item + .trust-item{ border-left:2px solid var(--teal); }

  .trust-ico{ position:relative; display:flex; align-items:flex-end; height:62px; }
  .tb-icon{ position:static; }
  .tb-icon--head { height:60px; }
  .tb-icon--bolt { height:52px; }
  .tb-icon--truck{ height:40px; width:auto; }
  .tb-check{
    position:absolute; top:auto; left:auto;
    right:-8px; bottom:-2px;
    width:22px; height:22px;
  }
  .tb-label{
    position:static; transform:none;
    font-size:13px; line-height:16px;
  }

  /* decoration that was pinned to comp coordinates */
  .tb-rule, .star, .smudge{ display:none; }

  /* ---- board ---- */
  .board{
    position:static;
    width:auto; height:auto;
    margin-top:16px;
    padding:14px;
    border-radius:20px;
  }

  .steps{ display:flex; flex-wrap:wrap; gap:14px 8px; margin-bottom:16px; }
  .step{ position:static; flex:1 1 44%; }
  .step-dash{ display:none; }

  .panel{ position:static; width:auto !important; height:auto !important; }
  .panel--options, .panel--preview{ left:auto; top:auto; padding:16px; }
  .panel + .panel{ margin-top:14px; }

  /* options: Ernie and his bubble drop into flow */
  .helper-row{
    display:flex; align-items:flex-end; gap:2px;
    margin-top:18px;
  }
  .helper-ernie{ position:static; flex:0 0 auto; width:120px; }
  .helper-bubble{ position:static; flex:0 0 auto; margin-bottom:14px; }

  /* preview */
  .preview-stage{ height:auto; text-align:center; }
  .diecut-note{ position:static; display:inline-block; margin:0 0 2px; }
  .diecut-arrow{ display:none; }
  .preview-art--main{
    position:static;
    width:100%; max-width:420px; height:auto;
    margin:0 auto;
  }

  .cta-row{
    flex-direction:column; align-items:stretch;
    gap:10px;
    padding-left:0; margin-top:18px;
  }
  .btn{ width:100% !important; height:54px; }
  .cta-or{ width:auto; }

  .file-note{ margin-left:0; }
  .help-box{ width:auto; }
  .zoom{ position:static; margin:14px 0 0 auto; }

  /* summary */
  .summary-col{ position:static; width:auto; margin-top:14px; }
  .panel--summary{ width:auto !important; height:auto !important; padding:12px; }
  .sum-card{ width:auto; }
  .preview-art-mini-wrap{ height:190px; }
  .btn-continue{ width:100%; }
  .secure{ padding-left:0; justify-content:center; margin-top:22px; }
  .secure-doodle{ display:none; }

  /* ---- the price follows you down the page ---- */
  .cartbar{
    position:fixed; left:0; right:0; bottom:0;
    z-index:90;
    display:flex; align-items:center; gap:12px;
    padding:9px 14px;
    padding-bottom:calc(9px + env(safe-area-inset-bottom));
    background:var(--panel);
    border-top:3px solid var(--ink);
  }
  .cartbar-price{ flex:1 1 auto; min-width:0; font-size:12px; line-height:1.3; }
  .cartbar-unit{ font-size:20px; font-weight:900; }
  .cartbar-total{ display:block; color:var(--ink-soft); }
  .cartbar .btn-continue{
    flex:0 0 auto;
    width:auto; height:50px;
    margin:0; padding:0 20px;
    font-size:16px; gap:12px;
  }
  .cartbar .btn-continue-arrow{ width:24px; height:15px; }
}

/* Two columns while there is room for them. */
@media (min-width:980px) and (max-width:1279px){
  .stage{ max-width:1000px; }
  .board{
    display:grid; grid-template-columns:1fr 1fr;
    gap:16px; align-items:start;
  }
  .steps{ grid-column:1 / -1; margin-bottom:0; }
  .panel + .panel{ margin-top:0; }
  .summary-col{ grid-column:1 / -1; margin-top:0; }
  .sum-card, .summary-col .btn-continue{ max-width:520px; margin-left:auto; margin-right:auto; }
}

/* Phones: the four steps are scene-setting, not navigation. Drop them. */
@media (max-width:759px){
  .steps{ display:none; }
  .trust-item{ padding:0 4px; }
  .tb-label{ font-size:11.5px; line-height:15px; }
  .tb-icon--head{ height:52px; }
  .tb-icon--bolt{ height:46px; }
  .tb-icon--truck{ height:34px; }
  .trust-ico{ height:54px; }
  .panel-title{ white-space:normal; }
}

/* Narrow phones: four size tiles across is too many. */
@media (max-width:419px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .tile--custom{ grid-column:span 2; }
  .helper-ernie{ width:96px; }
  .helper-bubble{ transform:scale(.86); transform-origin:left bottom; }
}

/* Small phones. Two option cards across needs ~280px of panel; below a 380px
   viewport there isn't that much, and "Holographic" starts colliding with its
   icon. One column instead — and the helper row has to shrink or it overflows
   the panel it sits in. */
@media (max-width:379px){
  .grid--2{ grid-template-columns:1fr; }
  .grid.is-single{ grid-template-columns:1fr; }
  .helper-ernie{ width:84px; }
  .helper-bubble{ transform:scale(.72); }
  .cartbar .btn-continue{ padding:0 14px; font-size:15px; gap:8px; }
  .cartbar-unit{ font-size:18px; }
}