/* ==========================================================================
   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; }

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

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:1086px;
  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:847px;
  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:748px;
  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:590px;
  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:614px;
  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;
}

.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:747px;
  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; }

.preview-art--main{
  position:absolute;
  left:48px; top:26px;
  width:470px; height: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:626px;
  padding:8px 11px 11px;
}

.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:170px;
}
.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:center; 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;
}