/* =========================================================
   BSR SPIT FINDER - stylesheet
   Logic: "Spit roast selection guide quiz.docx" + the BSR spit
   reference sheet + Neto item specifics.
   Generated file - change the source data, not this.
   ========================================================= */

#sq-app{
  /* ---- brand tokens ---- */
  --color-orange:#F29801;
  --color-orange-hi:#FFB233;
  --color-orange-deep:#C87C00;
  --color-black:#231F20;
  --color-char:#171414;
  --color-moss:#6B8E23;
  --color-olive:#4F6F52;
  --color-paper:#FFFFFF;
  --color-ash:#F4F2EF;
  --color-line:#E2DFDA;
  --color-muted:#5C5854;

  /* on-dark equivalents */
  --on-dark:#FFFFFF;
  --on-dark-muted:rgba(255,255,255,.66);
  --on-dark-line:rgba(255,255,255,.18);

  /* Links are brand orange. On the charcoal panels that is ~7.5:1 and passes AA.
     On white it is ~2.1:1 and does NOT - which is why body links are underlined
     and set in --color-orange-deep. Swap to var(--color-orange) if you want the
     exact logo orange on white and accept the contrast. */
  --color-link:var(--color-orange-deep);

  /* Zuume Rough Bold is NOT loaded - no licensed webfont confirmed. Falls back
     to Arial Black. Add an @font-face here if you have the files. */
  --font-display:"Zuume Rough","Arial Black",Arial,Helvetica,sans-serif;
  --font-heading:"Arial Black",Arial,Helvetica,sans-serif;
  --font-body:Arial,Helvetica,sans-serif;

  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --tap:56px;

  box-sizing:border-box; display:block; max-width:860px; margin:0 auto;
  /* Longhand on purpose. If any ONE declaration is invalid in a given
     browser, only that declaration is dropped - a shorthand would take
     the side gutters down with it. That is exactly what happened when
     env() was used inside the padding shorthand. */
  padding-top:28px;
  padding-bottom:48px;
  padding-left:20px;
  padding-right:20px;
  font-family:var(--font-body);
  color:var(--color-black); line-height:1.55; -webkit-text-size-adjust:100%;
  /* long SKUs and product names must never push the layout sideways */
  overflow-wrap:break-word; word-wrap:break-word;
}
#sq-app *,#sq-app *::before,#sq-app *::after{box-sizing:inherit;}
#sq-app a{color:var(--color-link);}

/* ---------------- intro ---------------- */
/* These insets are a safety net. If a theme rule ever overrides the
   padding on #sq-app, the content still keeps clear of the edge. */
.sq-intro,.sq-browse{padding-left:4px; padding-right:4px;}
.sq-intro{margin:0 0 20px;}
.sq-kicker{
  display:inline-block; margin:0 0 12px; padding:5px 12px 4px;
  font-family:var(--font-heading); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-black);
  background:var(--color-orange); border-radius:99px;
}
.sq-h1{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.75rem,7vw,2.75rem); line-height:1.05;
  letter-spacing:-.02em; margin:0 0 12px; color:var(--color-black);
}
.sq-lede{margin:0; font-size:1.0625rem; max-width:54ch; color:var(--color-muted);}

/* ---------------- charcoal shell ---------------- */
.sq-shell{
  background:var(--color-black);
  max-width:100%;
  background-image:radial-gradient(120% 90% at 50% 0%, #2E2829 0%, var(--color-black) 46%, var(--color-char) 100%);
  color:var(--on-dark);
  border-radius:var(--r-lg);
  padding:24px 20px 28px;
  min-height:540px; display:flex; flex-direction:column;
}
.sq-meter{margin-bottom:26px;}
.sq-step{
  margin:0 0 10px; font-family:var(--font-heading);
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-dark-muted);
}
.sq-step b{color:var(--color-orange); font-weight:inherit;}
.sq-track{height:3px; background:var(--on-dark-line); border-radius:99px; overflow:hidden;}
.sq-ember{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,#7A3D06 0%,var(--color-orange) 70%,var(--color-orange-hi) 100%);
  transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.sq-screen{flex:1 1 auto; display:flex; flex-direction:column;}
.sq-screen[hidden]{display:none;}

/* ---------------- question ---------------- */
.sq-q{
  font-family:var(--font-heading); font-weight:900;
  font-size:clamp(1.375rem,5.2vw,1.875rem); line-height:1.15;
  letter-spacing:-.015em; margin:0 0 8px; color:var(--on-dark);
}
.sq-q:focus{outline:none;}
.sq-help{margin:0 0 22px; font-size:.9375rem; color:var(--on-dark-muted); max-width:52ch;}
.sq-help[hidden]{display:none;}

.sq-options{display:grid; gap:10px;}
.sq-opt{
  position:relative; display:flex; align-items:center; gap:14px;
  width:100%; min-height:var(--tap); padding:15px 16px 15px 18px;
  text-align:left; font-family:var(--font-body); font-size:1rem; line-height:1.35;
  color:var(--on-dark); background:rgba(255,255,255,.045);
  border:1px solid var(--on-dark-line); border-radius:var(--r-md);
  cursor:pointer; overflow:hidden;
  transition:background-color .16s ease, border-color .16s ease, transform .12s ease;
}
/* the ember bar that lights up on the left edge */
.sq-opt::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--color-orange); transform:scaleY(0); transform-origin:center;
  transition:transform .18s ease;
}
.sq-opt:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.34);}
.sq-opt:hover::before{transform:scaleY(1);}
.sq-opt:active{transform:translateY(1px);}
.sq-opt:focus-visible{outline:3px solid var(--color-orange); outline-offset:2px;}
.sq-opt:focus-visible::before{transform:scaleY(1);}
.sq-opt-text{flex:1 1 auto;}
.sq-opt-note{display:block; font-size:.8125rem; color:var(--on-dark-muted); margin-top:3px;}

.sq-nav{margin-top:auto; padding-top:24px;}
.sq-back{
  min-height:44px; padding:10px 20px; font-family:var(--font-body); font-size:.9375rem;
  color:var(--on-dark-muted); background:none;
  border:1px solid var(--on-dark-line); border-radius:99px; cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.sq-back:hover{color:var(--on-dark); border-color:rgba(255,255,255,.45);}
.sq-back:focus-visible{outline:3px solid var(--color-orange); outline-offset:2px;}

/* ---------------- result ---------------- */
/* ---------------- email step ---------------- */
/* Centred horizontally and vertically - it is a single focused ask, so it
   should sit in the middle of the card rather than hug the top left. */
#sq-escreen{justify-content:center; text-align:center;}
#sq-escreen .sq-q{max-width:22ch; margin-left:auto; margin-right:auto;}
#sq-escreen .sq-help{max-width:46ch; margin-left:auto; margin-right:auto;}
.sq-email{display:grid; gap:12px; max-width:420px; margin:0 auto; text-align:center;}
.sq-email-input{text-align:center;}
.sq-email-err{text-align:center;}
.sq-email-input{
  width:100%; min-height:var(--tap); padding:14px 16px;
  font-family:var(--font-body); font-size:1rem; color:var(--on-dark);
  background:rgba(255,255,255,.06); border:1px solid var(--on-dark-line);
  border-radius:var(--r-md);
}
.sq-email-input::placeholder{color:rgba(255,255,255,.4);}
.sq-email-input:focus{outline:3px solid var(--color-orange); outline-offset:2px; background:rgba(255,255,255,.1);}
.sq-email-input[aria-invalid="true"]{border-color:#E56A5A;}
.sq-email-err{margin:0; font-size:.875rem; color:#FF9C8C;}
.sq-email-err[hidden]{display:none;}
.sq-email-send{width:100%;}
.sq-email-send[disabled]{opacity:.6; pointer-events:none;}
.sq-skip{
  min-height:48px; padding:12px 20px;
  font-family:var(--font-body); font-size:.9375rem;
  color:var(--on-dark-muted); background:none;
  border:1px solid var(--on-dark-line); border-radius:99px; cursor:pointer;
}
.sq-skip:hover{color:var(--on-dark); border-color:rgba(255,255,255,.45);}
.sq-skip:focus-visible{outline:3px solid var(--color-orange); outline-offset:2px;}
.sq-email-fine{margin:2px 0 0; font-size:.75rem; color:var(--on-dark-muted);}

.sq-result-h{
  font-family:var(--font-heading); font-weight:900;
  font-size:1.375rem; letter-spacing:-.01em; margin:0 0 18px; color:var(--on-dark);
}
.sq-pick{
  background:var(--color-paper); color:var(--color-black);
  border-radius:var(--r-md); overflow:hidden; margin-bottom:12px;
}
.sq-pick.sq-alt{background:rgba(255,255,255,.06); color:var(--on-dark); border:1px solid var(--on-dark-line);}
.sq-pick-media{
  display:flex; align-items:flex-start; justify-content:center;
  background:var(--color-paper); aspect-ratio:4/3; padding:14px;
}
.sq-pick.sq-alt .sq-pick-media{background:rgba(255,255,255,.96); border-radius:var(--r-sm); margin:10px;}
.sq-pick-media img{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.sq-pick-body{padding:20px;}
.sq-badge{
  display:inline-block; margin:0 0 10px; padding:4px 10px 3px;
  font-family:var(--font-heading); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-black);
  background:var(--color-orange); border-radius:99px;
}
.sq-pick-name{font-family:var(--font-heading); font-weight:900; font-size:1.125rem; line-height:1.25; letter-spacing:-.01em; margin:0 0 4px;}
.sq-pick-name a{color:inherit; text-decoration:none;}
.sq-pick-name a:hover{text-decoration:underline; text-decoration-color:var(--color-orange); text-underline-offset:3px;}
.sq-sku{font-size:.6875rem; letter-spacing:.08em; color:var(--color-muted); margin:0 0 16px;}
.sq-pick.sq-alt .sq-sku{color:var(--on-dark-muted);}

.sq-specs{list-style:none; margin:0 0 18px; padding:0;}
.sq-specs li{
  display:flex; gap:12px; padding:8px 0; font-size:.875rem;
  border-top:1px solid var(--color-line);
}
.sq-pick.sq-alt .sq-specs li{border-top-color:var(--on-dark-line);}
.sq-specs li:first-child{border-top:none; padding-top:0;}
.sq-specs .k{flex:0 0 44%; color:var(--color-muted);}
.sq-pick.sq-alt .sq-specs .k{color:var(--on-dark-muted);}
.sq-specs .v{flex:1 1 auto; font-weight:bold;}

.sq-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); width:100%; padding:15px 26px;
  font-family:var(--font-heading); font-weight:900; font-size:.9375rem;
  letter-spacing:.01em; color:var(--color-black) !important;
  background:var(--color-orange); border-radius:99px; text-decoration:none;
  transition:background-color .16s ease;
}
.sq-cta:hover{background:var(--color-orange-hi); color:var(--color-black) !important;}
.sq-cta:focus-visible{outline:3px solid var(--color-orange-hi); outline-offset:3px;}
.sq-alt .sq-cta{
  background:none; color:var(--color-orange) !important;
  border:1px solid var(--on-dark-line);
}
.sq-alt .sq-cta:hover{background:rgba(242,152,1,.12); color:var(--color-orange) !important;}

/* ---- Pro Bundle upsell: an offer, not a footnote ---- */
.sq-bundle{
  margin:0; padding:16px 18px;
  background:#FFF4E2; border-top:1px solid rgba(242,152,1,.5);
}
.sq-bundle-h{
  margin:0 0 6px; font-family:var(--font-heading); font-weight:900;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-orange-deep);
}
.sq-bundle-copy{margin:0 0 14px; font-size:.875rem; color:var(--color-black);}
.sq-bundle-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:12px 22px;
  font-family:var(--font-heading); font-weight:900; font-size:.875rem;
  color:var(--color-black) !important; background:var(--color-paper);
  border:2px solid var(--color-orange); border-radius:99px;
  text-decoration:none; transition:background-color .16s ease;
}
.sq-bundle-cta:hover{background:var(--color-orange); color:var(--color-black) !important;}
.sq-bundle-cta:focus-visible{outline:3px solid var(--color-orange); outline-offset:3px;}
.sq-alt-h{
  font-family:var(--font-heading); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-dark-muted); margin:24px 0 12px;
}

.sq-share{margin:6px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.sq-copy{
  min-height:44px; padding:10px 18px; font-family:var(--font-body); font-size:.875rem;
  color:var(--color-orange); background:none; border:1px solid rgba(242,152,1,.45);
  border-radius:99px; cursor:pointer; transition:background-color .16s ease;
}
.sq-copy:hover{background:rgba(242,152,1,.12);}
.sq-copy:focus-visible{outline:3px solid var(--color-orange); outline-offset:2px;}
.sq-copied{font-size:.8125rem; color:var(--color-moss); font-weight:bold;}

.sq-actions{margin-top:28px; display:flex; flex-wrap:wrap; gap:16px; align-items:center;}
.sq-restart{
  min-height:44px; padding:10px 20px; font-family:var(--font-body); font-size:.9375rem;
  color:var(--on-dark-muted); background:none;
  border:1px solid var(--on-dark-line); border-radius:99px; cursor:pointer;
}
.sq-restart:hover{color:var(--on-dark); border-color:rgba(255,255,255,.45);}
.sq-restart:focus-visible{outline:3px solid var(--color-orange); outline-offset:2px;}
.sq-link{color:var(--color-orange) !important; font-size:.9375rem; text-decoration:none; border-bottom:1px solid rgba(242,152,1,.4);}
.sq-link:hover{border-bottom-color:var(--color-orange);}
.sq-fineprint{margin:22px 0 0; font-size:.8125rem; color:var(--on-dark-muted);}
.sq-fineprint a{color:var(--color-orange) !important;}

/* ---------------- browse ---------------- */
.sq-browse{margin-top:40px;}
.sq-browse-h{
  font-family:var(--font-heading); font-weight:900; font-size:1.125rem;
  letter-spacing:-.01em; margin:0 0 14px; color:var(--color-black);
}
.sq-browse-list{list-style:none; margin:0; padding:0;}
.sq-browse-list li{margin:0 0 8px;}
/* The whole row is the tap target, not just the words. Chevron sits right. */
.sq-browse-list a{
  position:relative; display:block;
  min-height:var(--tap);
  padding:14px 40px 14px 16px;
  background:var(--color-ash); border-radius:var(--r-md);
  text-decoration:none; color:var(--color-black);
  transition:background-color .16s ease;
}
.sq-browse-list a::after{
  content:""; position:absolute; right:18px; top:50%;
  width:8px; height:8px; margin-top:-4px;
  border-right:2px solid var(--color-orange);
  border-bottom:2px solid var(--color-orange);
  transform:rotate(-45deg);
}
.sq-browse-list a:hover{background:#EAE7E2;}
.sq-browse-list a:focus-visible{outline:3px solid var(--color-olive); outline-offset:2px;}
.sq-b-t{display:block; font-family:var(--font-heading); font-size:.9375rem; line-height:1.3;}
.sq-b-s{display:block; font-size:.8125rem; color:var(--color-muted); margin-top:3px;}

.sq-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ---------------- desktop ---------------- */
@media (min-width:720px){
  #sq-app{padding-top:48px; padding-bottom:64px; padding-left:28px; padding-right:28px;}
  .sq-intro,.sq-browse{padding-left:0; padding-right:0;}
  .sq-shell{padding:32px 32px 34px; min-height:580px;}
  .sq-options{grid-template-columns:1fr 1fr;}
  .sq-pick{display:grid; grid-template-columns:260px 1fr; align-items:start;}
  /* square and centred, sized to the image - no tall empty bands */
  .sq-pick-media{aspect-ratio:1/1; height:auto; min-height:0; align-self:start; padding:18px;}
  .sq-pick-body{padding:24px 26px;}
  /* full width of the card, under both columns */
  .sq-bundle{grid-column:1 / -1;}
  .sq-cta{width:auto;}
  .sq-browse-list{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .sq-browse-list li{margin:0;}
}

/* ================= MOTION =================
   Transform/opacity only, so it stays off the main thread and can't
   cause layout shift. Everything is 150-260ms - long enough to read
   as a transition, short enough not to slow anyone down.
   All of it switches off under prefers-reduced-motion. */

@keyframes sq-in-fwd{ from{opacity:0; transform:translate3d(14px,0,0);} to{opacity:1; transform:none;} }
@keyframes sq-in-back{ from{opacity:0; transform:translate3d(-14px,0,0);} to{opacity:1; transform:none;} }
@keyframes sq-rise{ from{opacity:0; transform:translate3d(0,10px,0);} to{opacity:1; transform:none;} }
@keyframes sq-pop{ from{opacity:0; transform:scale(.97);} to{opacity:1; transform:scale(1);} }
@keyframes sq-flare{ 0%{box-shadow:0 0 0 0 rgba(242,152,1,.5);} 100%{box-shadow:0 0 0 14px rgba(242,152,1,0);} }

/* question text and helper slide in from the direction of travel */
.sq-enter-f .sq-q,.sq-enter-f .sq-help{animation:sq-in-fwd .26s cubic-bezier(.2,.7,.3,1) both;}
.sq-enter-b .sq-q,.sq-enter-b .sq-help{animation:sq-in-back .26s cubic-bezier(.2,.7,.3,1) both;}
.sq-enter-f .sq-help,.sq-enter-b .sq-help{animation-delay:.04s;}

/* options rise in one after another - delay is set per option in JS */
.sq-opt{animation:sq-rise .24s cubic-bezier(.2,.7,.3,1) both;}

/* the option you just tapped confirms itself before the next question loads */
.sq-opt.sq-chosen{
  background:rgba(242,152,1,.16);
  border-color:var(--color-orange);
  animation:sq-flare .32s ease-out forwards;
}
.sq-opt.sq-chosen::before{transform:scaleY(1);}
/* the others step back so the choice reads clearly */
.sq-options.sq-locked .sq-opt:not(.sq-chosen){opacity:.35; transition:opacity .18s ease;}

/* result cards fade up in sequence - delay set in JS */
.sq-pick{animation:sq-pop .3s cubic-bezier(.2,.7,.3,1) both;}
.sq-result-h,.sq-alt-h{animation:sq-rise .28s cubic-bezier(.2,.7,.3,1) both;}

@media (prefers-reduced-motion:reduce){
  #sq-app *,#sq-app *::before,#sq-app *::after{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
  .sq-opt::before{transform:scaleY(1) !important;}
  .sq-options.sq-locked .sq-opt:not(.sq-chosen){opacity:1 !important;}
}
/* ---------------- stock states ---------------- */
.sq-badge-out{background:var(--color-ash); color:var(--color-muted); border:1px solid var(--color-line);}
.sq-pick.sq-alt .sq-badge-out{background:rgba(255,255,255,.1); color:var(--on-dark-muted); border-color:var(--on-dark-line);}
.sq-pick.sq-soldout .sq-pick-media{opacity:.55;}
.sq-pick.sq-soldout .sq-cta{background:none; color:var(--color-orange) !important; border:1px solid rgba(242,152,1,.5);}
.sq-pick.sq-soldout .sq-cta:hover{background:rgba(242,152,1,.12);}
.sq-notice{
  padding:16px 18px; margin:0 0 16px; font-size:.9375rem;
  background:rgba(242,152,1,.1); border-left:3px solid var(--color-orange);
  border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--on-dark);
}
.sq-notice p{margin:0;}
.sq-notice a{color:var(--color-orange) !important;}