:root{
  --wp-header-h:70px;
  --race-black:#0d1117;--slate:#3A4250;--cyan:#29B5E8;--orange:#E85D20;--red:#CC1F1F;
  --void-0:#0a0e13;--void-1:#10151c;--void-2:#161c24;--void-rule:rgba(255,255,255,0.08);--void-text:#c8d8e4;--void-muted:#5a7080;
  --paper:#F7F5F1;--paper-2:#EFECE5;--paper-3:#E5E1D8;--paper-card:#FFFFFF;
  --ink:#0d1117;--ink-2:#2A2F38;--ink-3:#5A6068;--ink-4:#8B8F97;
  --rule:rgba(13,17,23,0.10);--rule-2:rgba(13,17,23,0.18);
  --accent:var(--cyan);--accent-soft:rgba(41,181,232,0.12);--accent-glow:rgba(41,181,232,0.35);--preview-glow:rgba(41,181,232,0.45);
  --fd:'Barlow Condensed',sans-serif;--fb:'Nunito Sans',sans-serif;--fm:'Share Tech Mono',monospace;
  --cfg-header-h:56px;--mobile-viewer-h:42vh;
}
body.model-atomic{--accent:var(--cyan);--accent-soft:rgba(41,181,232,0.12);--accent-glow:rgba(41,181,232,0.35);--preview-glow:rgba(41,181,232,0.45);}
body.model-enduro{--accent:var(--orange);--accent-soft:rgba(232,93,32,0.12);--accent-glow:rgba(232,93,32,0.35);--preview-glow:rgba(232,93,32,0.47);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--void-0);color:var(--ink);font-family:var(--fb);font-weight:400;font-size:14px;line-height:1.55;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4);}

/* v5.7.1.14 — Hand-rolled MilSpec toast system */
.hmr-toast-stack{
  position:fixed;
  top:calc(var(--wp-header-h,0px) + 20px);
  right:20px;
  z-index:99999;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
  max-width:360px;
}
.hmr-toast{
  position:relative;
  pointer-events:auto;
  background:#0a0f14;
  border:1px solid var(--accent);
  border-left:4px solid var(--accent);
  padding:14px 20px 18px 18px;
  font-family:var(--fb);
  color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,0.5),0 0 0 1px rgba(41,181,232,0.15);
  overflow:hidden;
  animation:hmrToastIn 0.35s cubic-bezier(0.22,1,0.36,1) both;
  max-width:340px;
  min-width:260px;
}
body.model-enduro .hmr-toast{border-color:var(--orange);border-left-color:var(--orange);box-shadow:0 8px 28px rgba(0,0,0,0.5),0 0 0 1px rgba(232,93,32,0.15);}
.hmr-toast::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,0.015) 0,rgba(255,255,255,0.015) 1px,transparent 1px,transparent 3px);
  pointer-events:none;
}
.hmr-toast-corner{position:absolute;width:12px;height:12px;pointer-events:none;}
.hmr-toast-corner.tl{top:4px;left:4px;border-top:1px solid var(--accent);border-left:1px solid var(--accent);}
.hmr-toast-corner.br{bottom:6px;right:6px;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent);}
body.model-enduro .hmr-toast-corner.tl{border-top-color:var(--orange);border-left-color:var(--orange);}
body.model-enduro .hmr-toast-corner.br{border-bottom-color:var(--orange);border-right-color:var(--orange);}
.hmr-toast-meta{display:none;}
.hmr-toast-title{
  font-family:var(--fd);
  font-weight:800;font-size:17px;letter-spacing:0.04em;
  text-transform:uppercase;line-height:1.1;margin-bottom:4px;
}
.hmr-toast-body{
  font-family:var(--fbody,'Open Sans',sans-serif);
  font-size:12px;line-height:1.4;color:rgba(255,255,255,0.82);
}
.hmr-toast-timer{
  position:absolute;bottom:0;left:0;height:2px;width:100%;
  background:var(--accent);transform-origin:left;
  animation:hmrToastTimer linear both;
}
body.model-enduro .hmr-toast-timer{background:var(--orange);}
.hmr-toast.hmr-toast-leaving{animation:hmrToastOut 0.3s cubic-bezier(0.55,0,0.68,0) both;}
.hmr-toast[data-variant="easter"]{border-left-color:var(--orange);}
.hmr-toast[data-variant="easter"] .hmr-toast-meta{color:var(--orange);}
.hmr-toast[data-variant="easter"] .hmr-toast-title{background:linear-gradient(90deg,#fff 0%,var(--orange) 50%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hmrToastShine 2.8s ease-in-out infinite;}
@keyframes hmrToastIn{0%{transform:translateX(30px);opacity:0;}100%{transform:translateX(0);opacity:1;}}
@keyframes hmrToastOut{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(30px);opacity:0;}}
@keyframes hmrToastTimer{0%{transform:scaleX(1);}100%{transform:scaleX(0);}}
@keyframes hmrToastShine{0%,100%{background-position:200% 0;}50%{background-position:0% 0;}}

@media(max-width:640px){
  .hmr-toast-stack{left:12px;right:12px;max-width:none;top:calc(var(--wp-header-h,0px) + 12px);}
  .hmr-toast{max-width:none;min-width:0;padding:12px 16px 14px 14px;}
  .hmr-toast-title{font-size:15px;}
  .hmr-toast-body{font-size:11px;}
  @keyframes hmrToastIn{0%{transform:translateY(-20px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
  @keyframes hmrToastOut{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-20px);opacity:0;}}
}

/* v5.7.1.5 — Preview pane never scrolls. Only the config panel does. */
.cfg-viewer,.cfg-viewer *{overscroll-behavior:contain;}
.boat-canvas,.svg-wrap{overflow:hidden !important;}

/* v5.7.1.5 — Emphasised scrollbar on the config panel only. Wider, coloured,
   visible at rest so users know the panel scrolls. */
.cfg-panel-scroll{scrollbar-width:thin;scrollbar-color:var(--accent) var(--paper-2);}
.cfg-panel-scroll::-webkit-scrollbar{width:10px;}
.cfg-panel-scroll::-webkit-scrollbar-track{background:var(--paper-2);border-left:1px solid var(--rule);}
.cfg-panel-scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px;border:2px solid var(--paper-2);min-height:40px;}
.cfg-panel-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent);filter:brightness(1.1);}
.build-summary-inline{display:flex;flex-direction:column;gap:14px;}
.bs-hero{position:relative;background:linear-gradient(180deg,var(--void-1) 0%,#060a0f 100%);border:1px solid var(--void-rule);border-radius:4px;padding:18px;overflow:hidden;}
.bs-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 90%);pointer-events:none;}
.bs-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative;z-index:1;}
.bs-badge img{height:38px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));}
.bs-hero-meta{text-align:right;}
.bs-model-name{font-family:var(--fd);font-weight:800;font-size:18px;letter-spacing:0.06em;text-transform:uppercase;color:#fff;line-height:1;}
.bs-model-sub{font-family:var(--fm);font-size:9px;letter-spacing:0.2em;color:var(--accent);text-transform:uppercase;margin-top:3px;}
.bs-preview-wrap{position:relative;z-index:1;aspect-ratio:16/10;background:rgba(0,0,0,0.2);border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.bs-preview-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;}
.bs-preview-loading{font-family:var(--fm);font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:0.12em;}
.bs-section{background:var(--paper-card);border:1px solid var(--rule);border-radius:3px;padding:12px 14px;}
.bs-section-lbl{font-family:var(--fm);font-size:9px;letter-spacing:0.2em;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.bs-section-lbl::before{content:"";width:4px;height:4px;background:var(--accent);border-radius:50%;}
.bs-spec-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--rule);font-family:var(--fm);font-size:11px;gap:10px;}
.bs-spec-row:last-child{border-bottom:none;}
.bs-spec-label{color:var(--ink-3);letter-spacing:0.06em;text-transform:uppercase;flex-shrink:0;font-weight:600;}
.bs-spec-val{color:var(--ink);font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:0.03em;text-transform:uppercase;text-align:right;}
.bs-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.bs-color-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;}
.bs-color-swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,0.2);flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3);}
.bs-color-txt{min-width:0;flex:1;}
.bs-color-name{font-family:var(--fd);font-weight:700;font-size:10px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-color-val{font-family:var(--fm);font-size:8px;color:var(--ink-4);letter-spacing:0.06em;text-transform:uppercase;margin-top:1px;}
.bs-list{display:flex;flex-direction:column;gap:4px;}
.bs-list-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-family:var(--fm);font-size:10px;letter-spacing:0.04em;color:var(--ink-2);text-transform:uppercase;font-weight:600;}
.bs-check{width:14px;height:14px;border-radius:50%;background:var(--accent);color:var(--void-0);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:900;}
.bs-none{font-family:var(--fm);font-size:10px;color:var(--ink-4);font-style:italic;padding:4px 0;}
.form-intro{font-family:var(--fb);font-size:12px;color:var(--ink-2);line-height:1.55;margin:0 0 18px;letter-spacing:0.01em;}
.form-group{background:var(--paper-card);border:1px solid var(--rule);border-radius:4px;padding:16px;margin-bottom:14px;}
.form-group-label{font-family:var(--fm);font-size:10px;letter-spacing:0.22em;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.form-group-label::before{content:"";width:3px;height:12px;background:var(--accent);border-radius:1px;}
.form-row{margin-bottom:12px;}
.form-row:last-child{margin-bottom:0;}
.form-row-icon{position:relative;}
.form-input-wrap{position:relative;}
.form-input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-4);pointer-events:none;z-index:2;transition:color 0.2s;}
.form-row-icon .cfg-input{padding-left:38px;}
.form-row-icon .cfg-input:focus ~ .form-input-icon,
.form-input-wrap:focus-within .form-input-icon{color:var(--accent);}
.cfg-label .req{color:var(--red);margin-left:2px;font-weight:700;}
.cfg-label .optional{font-family:var(--fm);font-size:9px;color:var(--ink-4);letter-spacing:0.1em;text-transform:uppercase;font-weight:500;margin-left:4px;}
.foam-color-pill{display:inline-block;padding:2px 6px;margin-left:6px;font-family:var(--fm);font-size:8px;letter-spacing:0.12em;font-weight:700;text-transform:uppercase;background:#111111;color:#fff;border:1px solid rgba(255,255,255,0.15);border-radius:2px;vertical-align:middle;}
.build-actions{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);}
/* build-actions: no sticky — full-width stacked below form */
.build-actions-label{font-family:var(--fm);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:10px;}
.build-actions-grid{display:flex;flex-direction:column;gap:8px;}
.build-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;width:100%;font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;background:transparent;border:1.5px solid var(--rule-2);color:var(--ink-2);border-radius:3px;cursor:pointer;transition:all 0.2s;-webkit-tap-highlight-color:transparent;}
.build-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.build-btn svg{flex-shrink:0;}

/* v6.0.9 — share button CSS removed (.build-btn-share, .build-social-*) */
.top-stripe{height:2px;background:linear-gradient(90deg,var(--orange),var(--cyan) 55%,transparent);}
#content-wrap,#primary,#content,#single-blocks,.single-page-article,.single-page-content,.single-page-article > .single-page-content,.wpb_raw_code,.wpb_raw_html,.wpb_content_element,.wpb_raw_code > .wpb_wrapper{background:var(--void-0) !important;}
#content-wrap,#primary,#content,#single-blocks,.single-page-article,.single-page-content,.single-page-article > .single-page-content{padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;}
.wpb_raw_code,.wpb_raw_html,.wpb_content_element{padding:0 !important;margin:0 !important;}
/* v5.8.0 — Total theme translate3d trap: any ancestor transform breaks fixed/sticky AND
   can leak overflow on descendants. Nuke transforms on the typical WPBakery wrappers. */
.vc_row:has(.cfg-body),.vc_column_container:has(.cfg-body),.vc_col-sm-12:has(.cfg-body),.wpb_wrapper:has(.cfg-body),.wpb_column:has(.cfg-body){padding:0 !important;margin:0 !important;transform:none !important;will-change:auto !important;}
#hmr-footer,#site-footer,.site-footer,.footer-widget-area,#footer-callout{display:none !important;}
.cfg-body a,.cfg-body a:hover,.cfg-body a:focus,.incl-item,.incl-item *,.incl-name{text-decoration:none !important;}
.cfg-header{position:fixed;top:var(--wp-header-h,0px);left:0;right:0;z-index:100000;display:flex;align-items:center;height:var(--cfg-header-h);padding:0 22px;background:var(--void-0);color:#fff;border-bottom:1px solid var(--void-rule);gap:20px;}
.cfg-body{position:fixed;top:calc(var(--wp-header-h,0px) + var(--cfg-header-h));left:0;right:0;bottom:0;background:var(--void-0);overflow:hidden;z-index:50;}
html:has(.cfg-body),body:has(.cfg-body){overflow:hidden;height:100vh;}
.top-stripe-fixed{position:fixed;top:var(--wp-header-h,0px);left:0;right:0;height:2px;background:linear-gradient(90deg,var(--orange),var(--cyan) 55%,transparent);z-index:100001;pointer-events:none;}
.cfg-header-brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.cfg-header-brand .logo-text{font-family:var(--fd);font-weight:700;font-size:20px;letter-spacing:0.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.cfg-header-brand .logo-text .br{color:var(--accent);font-family:var(--fm);font-size:14px;font-weight:400;}
.cfg-header-brand .logo-sub{font-family:var(--fm);font-size:10px;letter-spacing:0.2em;color:rgba(255,255,255,0.45);text-transform:uppercase;padding-left:14px;border-left:1px solid var(--void-rule);}
/* v5.7.1.22 — mobile-only status slot in cfg-header (hidden by default, shown on mobile) */
.cfg-header-mobile-status{display:none;}
/* v5.7.1.27 — mobile-only section pin (hidden by default, shown on mobile) */
.panel-section-pin{display:none;}
.cfg-header-views{display:flex;align-items:stretch;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;margin:0 12px;}
.cfg-header-views::-webkit-scrollbar{height:0;}
.angle-tab{padding:0 18px;height:var(--cfg-header-h);display:flex;align-items:center;gap:6px;font-family:var(--fm);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.55);cursor:pointer;border-bottom:2px solid transparent;transition:color 0.2s,border-color 0.2s;white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.angle-tab:hover{color:#fff;}
.angle-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.angle-tab.tab-extras{color:rgba(232,93,32,0.6);}
.angle-tab.tab-extras.active{color:var(--orange);border-bottom-color:var(--orange);}
.angle-tab sup{font-size:7px;vertical-align:super;line-height:0;}
.angle-tab sub{font-size:7px;vertical-align:sub;line-height:0;}
.cfg-header-actions{display:flex;gap:8px;flex-shrink:0;align-items:center;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow);animation:pulse 2s infinite;margin-right:4px;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.live-label{font-family:var(--fm);font-size:10px;letter-spacing:0.14em;color:rgba(255,255,255,0.55);text-transform:uppercase;margin-right:10px;}
.hbtn{padding:7px 16px;font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;border:none;transition:all 0.2s;border-radius:2px;}
.hbtn-ghost{background:transparent;color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.18);}
.hbtn-ghost:hover{color:#fff;border-color:rgba(255,255,255,0.4);}
.cfg-layout{display:grid;grid-template-columns:1fr 460px;height:100%;width:100%;}
.cfg-body .cfg-layout,.cfg-body > .cfg-layout,body .cfg-body .cfg-layout{margin-top:0 !important;margin:0 !important;height:100% !important;}
.cfg-viewer{background:linear-gradient(180deg,var(--void-1) 0%,#060a0f 100%);display:flex;flex-direction:column;border-right:1px solid var(--rule);min-height:0;overflow:hidden;position:relative;}
.cfg-viewer::before{content:"";position:absolute;inset:0;background-image:radial-gradient(ellipse at 50% 45%,var(--accent-soft) 0%,transparent 55%),linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:auto,56px 56px,56px 56px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);pointer-events:none;}
.cfg-viewer::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,0.01) 3px,rgba(255,255,255,0.01) 4px);pointer-events:none;}
.boat-canvas{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:20px 60px 90px 60px;min-height:0;overflow:hidden;}
.svg-wrap{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center;isolation:isolate;}
.svg-wrap svg{width:auto;height:auto;max-width:100%;max-height:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.45)) drop-shadow(0 0 20px var(--preview-glow)) drop-shadow(0 0 44px var(--preview-glow));transition:opacity 0.32s ease,filter 0.45s ease;}
.svg-wrap svg.fading{opacity:0;}
/* v5.9.6 — new SVGs mount at opacity 0 (.svg-fresh), switchView removes the class next frame to trigger fade-in */
.svg-wrap svg.svg-fresh{opacity:0;}
.svg-placeholder{width:auto;max-width:80%;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:1px solid var(--void-rule);background:rgba(255,255,255,0.02);padding:24px;}
.svg-placeholder p{font-family:var(--fm);font-size:10px;color:var(--void-muted);letter-spacing:0.15em;text-align:center;text-transform:uppercase;}
.svg-placeholder .err-path{font-size:9px;color:var(--orange);word-break:break-all;max-width:100%;}
.loading-ring{width:36px;height:36px;border:2px solid rgba(41,181,232,0.2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;}

/* ─────────────────────────────────────────────────────────────────────────
   v5.9.7 — MilSpec intro: wireframe globe + racing laurels + crossed flags
   Displayed in the boat canvas until the user selects a model.
   All strokes/fills use currentColor so palette follows active model class.
   ───────────────────────────────────────────────────────────────────────── */
.milspec-intro{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:24px;width:100%;max-width:360px;
  color:var(--cyan);  /* neutral cyan when model-none */
  opacity:0;animation:milspecFadeIn 0.6s ease 0.2s forwards;
}
body.model-atomic .milspec-intro{color:var(--cyan);}
body.model-enduro .milspec-intro{color:var(--orange);}

/* v6.0.0 — MilSpec crest image: scales from 300px desktop → 150px mobile.
   v6.0.4 — Replaced PNG + scrolling-map hack with native animated WebP (GIF fallback).
   The globe rotation is baked into the image — 6 frames, 1.8s loop.
   No CSS animation needed. Compositor-safe. */
.milspec-crest-pic,
.milspec-crest-img{
  display:block;
  width:100%;
  max-width:300px;
  aspect-ratio:1/1;
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 0 18px rgba(41,181,232,0.45)) drop-shadow(0 0 42px rgba(41,181,232,0.25));
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
.milspec-crest-pic{
  line-height:0; /* no inline-block gap beneath */
}
body.model-atomic .milspec-crest-img{
  filter:drop-shadow(0 0 18px rgba(41,181,232,0.5)) drop-shadow(0 0 42px rgba(41,181,232,0.28));
}
body.model-enduro .milspec-crest-img{
  filter:drop-shadow(0 0 18px rgba(232,93,32,0.5)) drop-shadow(0 0 42px rgba(232,93,32,0.28));
}

/* v6.0.3 — Enquiry success screen (replaces wizard panel after successful submission) */
.enquiry-success{padding:40px 28px;max-width:520px;margin:0 auto;text-align:center;}
.es-pre{font-family:var(--fm);font-size:10px;letter-spacing:0.38em;color:var(--orange);text-transform:uppercase;margin-bottom:12px;padding:6px 14px;border:1px solid var(--orange);display:inline-block;border-radius:2px;}
.es-title{font-family:var(--fd);font-weight:900;font-size:32px;letter-spacing:0.04em;text-transform:uppercase;margin:18px 0 12px 0;color:var(--ink);line-height:1.05;}
.es-msg{font-family:var(--fb);font-size:15px;line-height:1.55;color:var(--ink-2);margin:0 0 28px 0;}
.es-code-block{background:var(--void-0);padding:22px 20px;margin:0 auto 24px auto;max-width:360px;border:1px solid var(--void-rule);}
.es-code-label{font-family:var(--fm);font-size:9px;letter-spacing:0.3em;color:var(--void-muted);text-transform:uppercase;margin-bottom:10px;}
.es-code{font-family:var(--fm);font-size:30px;letter-spacing:0.18em;color:var(--cyan);font-weight:700;text-shadow:0 0 12px rgba(41,181,232,0.45);}
.es-replay{background:var(--paper-2);padding:18px 20px;margin-bottom:24px;border:1px solid var(--rule);}
.es-replay-label{font-family:var(--fm);font-size:10px;letter-spacing:0.18em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px;}
.es-replay-link{display:block;font-family:var(--fm);font-size:12px;color:var(--ink);background:#fff;padding:10px 12px;border:1px solid var(--rule-2);margin-bottom:10px;word-break:break-all;text-decoration:none;}
.es-replay-link:hover{border-color:var(--orange);color:var(--orange);}
.es-copy-btn{background:var(--ink);color:#fff;border:none;padding:10px 20px;font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;border-radius:2px;}
.es-copy-btn:hover{background:var(--orange);}
.es-autoreply-note{font-size:13px;color:var(--ink-3);font-style:italic;margin:0;}

.milspec-intro-pre{
  font-family:var(--fm);font-size:9px;letter-spacing:0.38em;
  color:currentColor;opacity:0.55;text-transform:uppercase;
  padding:4px 12px;border:1px solid currentColor;border-radius:2px;
  margin-top:4px;
}
.milspec-intro-copy{
  font-family:var(--fd);font-weight:900;
  font-size:34px;
  letter-spacing:0.04em;
  color:#fff;text-transform:uppercase;line-height:1.05;text-align:center;
  text-shadow:0 0 12px currentColor;
  white-space:nowrap;
}
.milspec-dots{display:inline-block;margin-left:2px;}
.milspec-dots span{
  display:inline-block;opacity:0.3;
  animation:milspecDot 1.4s infinite;
}
.milspec-dots span:nth-child(2){animation-delay:0.2s;}
.milspec-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes milspecDot{0%,60%,100%{opacity:0.3;}30%{opacity:1;}}
.milspec-intro-sub{
  font-family:var(--fm);font-size:9px;letter-spacing:0.22em;
  color:var(--void-muted);text-transform:uppercase;opacity:0.75;
  margin-top:-4px;
}
@keyframes milspecFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* Intro removed from DOM on model select (loadView wipes svgWrap.innerHTML). */
@keyframes spin{to{transform:rotate(360deg);}}
.bracket{position:absolute;width:26px;height:26px;pointer-events:none;z-index:3;}
.bracket.tl{top:8px;left:20px;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent);opacity:0.55;}
.bracket.tr{top:8px;right:20px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);opacity:0.55;}
.bracket.bl{bottom:92px;left:20px;border-bottom:1.5px solid var(--accent);border-left:1.5px solid var(--accent);opacity:0.55;}
.bracket.br{bottom:92px;right:20px;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent);opacity:0.55;}
.scan-line{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-glow),transparent);animation:scan 4s linear infinite;pointer-events:none;z-index:3;}
@keyframes scan{0%{top:10%;}100%{top:90%;}}
.illustrative-note{position:absolute;bottom:88px;right:16px;font-family:var(--fm);font-size:9px;color:rgba(255,255,255,0.25);letter-spacing:0.08em;font-style:italic;z-index:4;pointer-events:none;}
.viewer-coord{position:absolute;top:12px;left:60px;font-family:var(--fm);font-size:10px;color:rgba(255,255,255,0.35);letter-spacing:0.12em;z-index:4;pointer-events:none;}
.view-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:72px;background:rgba(10,14,19,0.55);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.6);font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-tap-highlight-color:transparent;}
.view-arrow:hover{background:var(--accent-soft);border-color:var(--accent);color:#fff;}
.view-arrow-prev{left:0;border-left:none;}
.view-arrow-next{right:0;border-right:none;}
.model-strip{position:absolute !important;left:0;right:0;bottom:0;background:rgba(10,14,19,0.88);border-top:1px solid var(--void-rule);padding:14px 28px;display:flex !important;align-items:center;gap:24px;z-index:10;pointer-events:auto;box-sizing:border-box;}
/* v5.9.7 — Hide model-strip + view chrome while MilSpec intro is showing */
body.model-none .model-strip,
body.model-none .view-arrow,
body.model-none .viewer-coord,
body.model-none .illustrative-note,
body.model-none .build-icon-column{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important;}
.ms-badge img{height:42px;width:auto;}
.ms-main{display:flex;flex-direction:column;gap:2px;}
.ms-name{font-family:var(--fd);font-weight:800;font-size:20px;letter-spacing:0.06em;text-transform:uppercase;color:#fff;line-height:1;}
.ms-class{font-family:var(--fm);font-size:10px;letter-spacing:0.14em;color:var(--accent);text-transform:uppercase;font-weight:400;}
.ms-right{margin-left:auto;display:flex;gap:24px;}
.ms-stat{display:flex;flex-direction:column;gap:2px;}
.ms-stat-lbl{font-family:var(--fm);font-size:9px;letter-spacing:0.16em;color:rgba(255,255,255,0.4);text-transform:uppercase;}
.ms-stat-val{font-family:var(--fd);font-weight:700;font-size:18px;color:#fff;letter-spacing:0.04em;}
.ms-stat-val.highlight{color:var(--accent);}
.mobile-progress-strip{display:none;}
.cfg-panel{background:var(--paper);display:flex;flex-direction:column;overflow:hidden;min-height:0;position:relative;}
.cfg-panel-scroll{flex:1;overflow-y:auto;overflow-x:visible;-webkit-overflow-scrolling:touch;}
.model-opt,.component-item,.extra-item,.incl-item,.comp-info,.extra-info,.incl-info,.model-info{overflow:visible !important;}
.panel-section{padding:22px 28px;border-bottom:1px solid var(--rule);}
.panel-section:last-child{border-bottom:none;}
.panel-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;position:relative;}
/* v6.4.1 — shipping step info (i) trigger sits between title and step-tag */
.shipping-step-info{margin-left:auto;margin-right:8px;flex-shrink:0;}
.panel-section-title{font-family:var(--fd);font-weight:700;font-size:20px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);line-height:1;}
/* v6.3.8 — Static intro paragraph under a section title. Use when a step
   has meaningful context the user needs to see up front (e.g. Shipping &
   Trailer). Replaces click-to-open tooltips crammed into the title element,
   which rendered inline on mobile (see v6.3.8 shipping step fix). */
.panel-section-intro{
  font-family:var(--fb);
  font-size:13px;
  line-height:1.55;
  color:var(--ink-3);
  margin:-6px 0 18px;
  letter-spacing:0.005em;
}
.step-tag{font-family:var(--fm);font-size:10px;letter-spacing:0.18em;color:var(--ink-4);font-weight:400;text-transform:uppercase;display:flex;align-items:center;gap:6px;}
.step-tag::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent-glow);}
.model-selector{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;}
.model-opt{padding:18px 16px;background:var(--void-0);border:1.5px solid var(--void-rule);border-radius:4px;cursor:pointer;transition:all 0.2s;text-align:center;position:relative;-webkit-tap-highlight-color:transparent;overflow:visible;}
.model-opt::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,0.04) 0%,transparent 60%);pointer-events:none;border-radius:4px;}
.model-opt:hover{border-color:rgba(255,255,255,0.2);box-shadow:0 6px 20px rgba(0,0,0,0.3);}
.model-opt.active{border-color:var(--accent);box-shadow:0 8px 28px rgba(0,0,0,0.4),inset 0 0 0 1px var(--accent),0 0 24px var(--accent-soft);}
.model-opt img{height:38px;width:auto;margin:0 auto 12px;position:relative;z-index:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4));}
.model-opt-name{font-family:var(--fd);font-weight:700;font-size:18px;letter-spacing:0.04em;text-transform:uppercase;color:#fff;display:block;line-height:1;margin-bottom:4px;position:relative;z-index:1;}
.model-opt-class{font-family:var(--fm);font-size:10px;letter-spacing:0.1em;color:rgba(255,255,255,0.55);display:block;text-transform:uppercase;position:relative;z-index:1;}
.model-opt.active .model-opt-class{color:var(--accent);font-weight:600;}
.model-info{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;cursor:pointer;z-index:5;-webkit-tap-highlight-color:transparent;}
.model-info-icon{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:11px;font-style:italic;color:rgba(255,255,255,0.7);transition:all 0.2s;user-select:none;line-height:1;pointer-events:none;}
.model-info:hover .model-info-icon,.model-info.active .model-info-icon{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
.model-tooltip{position:absolute;top:calc(100% + 10px);min-width:220px;max-width:260px;background:var(--void-0);border:1px solid var(--accent);border-radius:3px;padding:12px 14px;opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.2s;z-index:9999;box-shadow:0 8px 28px rgba(0,0,0,0.5);pointer-events:none;text-align:left;transform:translateX(var(--hmr-tip-nudge,0));}
.model-opt:first-child .model-tooltip{left:0;right:auto;}
.model-opt:last-child .model-tooltip{right:0;left:auto;}
.model-tooltip::before{content:"";position:absolute;top:-14px;right:-10px;left:-10px;height:18px;background:transparent;}
.model-info.active .model-tooltip{opacity:1;visibility:visible;pointer-events:auto;}
/* v6.0.6 — Lift the whole model card stacking context when its tooltip is active
   so the tooltip beats wizard-pip scan bar + any other panel chrome underneath. */
.model-opt:has(.model-info.active){z-index:9998;position:relative;}
.model-tooltip-title{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px;}
.model-tooltip-text{font-family:var(--fb);font-size:13px;color:rgba(255,255,255,0.9);line-height:1.55;display:block;}
.hand-selector{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.hand-opt{
  padding:12px 14px;background:var(--paper-card);border:1px solid var(--rule);
  border-radius:3px;cursor:pointer;transition:all 0.2s;
  font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink-2);-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;gap:10px;
}
.hand-opt::before{
  content:'';width:22px;height:22px;flex-shrink:0;
  border-radius:3px;background:rgba(255,255,255,0.06);
  border:1.5px solid var(--rule-2);transition:all 0.2s;
  clip-path:none;
}
.hand-opt.active::before{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11l4 4 8-8' stroke='%230d1117' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size:contain;
}
.hand-opt:hover{border-color:var(--ink-4);}
.hand-opt.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.component-list{display:flex;flex-direction:column;gap:6px;}
.component-item{background:var(--paper-card);border:1px solid var(--rule);border-radius:4px;overflow:visible;transition:all 0.2s;}
.component-item:hover{border-color:var(--rule-2);}
.component-item.selected{border-color:var(--accent);}
.component-item.open{border-color:var(--accent);box-shadow:0 8px 28px rgba(13,17,23,0.08);}
.component-header{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;transition:background 0.15s;-webkit-tap-highlight-color:transparent;user-select:none;}
.component-header:hover{background:var(--paper-2);}
.comp-num{font-family:var(--fm);font-size:10px;color:var(--ink-4);width:16px;flex-shrink:0;letter-spacing:0.04em;margin-right:2px;}
.comp-name{font-family:var(--fd);font-weight:600;font-size:15px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink);flex:1;line-height:1.2;}
.comp-info{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.comp-info-icon{width:18px;height:18px;border-radius:50%;border:1px solid var(--rule-2);background:var(--paper-2);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:11px;font-style:italic;color:var(--ink-3);transition:all 0.2s;user-select:none;line-height:1;pointer-events:none;}
.comp-info:hover .comp-info-icon,.comp-info.active .comp-info-icon{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
.comp-swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--rule-2);flex-shrink:0;transition:all 0.2s;background:var(--paper-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3);}
.component-item.selected .comp-swatch{border-color:var(--accent);}
.comp-chevron{width:8px;height:8px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);transition:transform 0.25s;flex-shrink:0;}
.component-item.open .comp-chevron{transform:rotate(-135deg);border-color:var(--accent);}
.color-picker{max-height:0;overflow:hidden;padding:0 14px;background:var(--paper-2);transition:max-height 0.3s ease,padding 0.3s ease,border-top-width 0.1s ease,opacity 0.3s ease;opacity:0;border-top:0 solid var(--rule);}
.component-item.open .color-picker{max-height:320px;padding:14px 16px;opacity:1;border-top-width:1px;}
.restricted-label{font-family:var(--fm);font-size:10px;letter-spacing:0.12em;color:var(--orange);padding:6px 10px;border:1px solid rgba(232,93,32,0.25);background:rgba(232,93,32,0.06);border-radius:2px;display:flex;align-items:center;gap:6px;width:100%;margin-bottom:12px;text-transform:uppercase;font-weight:600;}
.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;}
.color-option{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.color-option.disabled{opacity:0.25;pointer-events:none;cursor:not-allowed;}
.color-dot{width:32px;height:32px;border-radius:50%;border:2px solid rgba(13,17,23,0.12);transition:all 0.15s;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2);}
.color-option:hover .color-dot{border-color:rgba(13,17,23,0.4);transform:scale(1.08);}
.color-option.selected .color-dot{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),inset 0 0 0 1px rgba(255,255,255,0.2);}
.color-option.selected .color-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;border:2px solid rgba(255,255,255,0.7);}
.color-name{font-family:var(--fm);font-size:8px;letter-spacing:0.08em;text-transform:uppercase;text-align:center;line-height:1.25;font-weight:600;color:var(--ink-2);}
.color-option.selected .color-name{color:var(--accent);}
.foam-toggle-wrap{margin-top:10px;padding:14px 16px;background:rgba(232,93,32,0.05);border:1px solid rgba(232,93,32,0.18);border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.foam-toggle-label{font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink);}
.foam-toggle-sub{font-family:var(--fm);font-size:10px;color:var(--ink-4);letter-spacing:0.06em;margin-top:3px;}
.foam-toggle-color{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-family:var(--fm);font-size:10px;color:var(--orange);letter-spacing:0.1em;font-weight:600;}
.foam-toggle-color::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;background:#111111;border:1px solid rgba(13,17,23,0.2);}
.toggle-switch{position:relative;width:48px;height:26px;flex-shrink:0;cursor:pointer;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-track{position:absolute;inset:0;background:var(--paper-3);border-radius:13px;transition:background 0.2s;}
.toggle-switch input:checked + .toggle-track{background:var(--orange);}
.toggle-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform 0.2s;box-shadow:0 2px 4px rgba(0,0,0,0.15);}
.toggle-switch input:checked ~ .toggle-knob{transform:translateX(22px);}
.panel-section.inclusions-section{background:var(--paper-2);border-left:3px solid var(--accent);}
.inclusions-list{display:flex;flex-direction:column;gap:4px;}
.incl-item{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--paper-card);border:1px solid var(--rule);border-radius:3px;text-decoration:none;transition:all 0.2s;color:var(--ink);-webkit-tap-highlight-color:transparent;position:relative;}
.incl-item:hover{border-color:var(--rule-2);box-shadow:0 2px 10px rgba(13,17,23,0.04);}
.incl-check{width:22px;height:22px;border-radius:3px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--void-0);font-weight:700;font-size:13px;box-shadow:0 0 0 2px var(--accent-soft);}
.incl-check::after{content:"";width:9px;height:9px;background:var(--void-0);clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);}
.incl-qty{font-family:var(--fm);font-size:11px;color:var(--accent);letter-spacing:0.08em;font-weight:700;min-width:22px;flex-shrink:0;}
.incl-name{font-family:var(--fd);font-weight:600;font-size:14px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink);flex:1;line-height:1.25;text-decoration:none;}
.incl-info{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.incl-info-icon{width:18px;height:18px;border-radius:50%;border:1px solid var(--rule-2);background:#fff;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:11px;font-style:italic;color:var(--ink-3);transition:all 0.2s;user-select:none;line-height:1;pointer-events:none;}
.incl-info:hover .incl-info-icon,.incl-info.active .incl-info-icon{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
.incl-tooltip{position:absolute;bottom:calc(100% + 10px);right:0;min-width:260px;max-width:280px;background:var(--void-0);border:1px solid var(--accent);border-radius:3px;padding:12px 14px;opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.2s;z-index:9999;box-shadow:0 8px 28px rgba(0,0,0,0.4);pointer-events:none;transform:translateX(var(--hmr-tip-nudge,0));}
.incl-tooltip::before{content:"";position:absolute;top:-14px;right:-10px;left:-10px;height:18px;background:transparent;}
.incl-info.active .incl-tooltip{opacity:1;visibility:visible;pointer-events:auto;}
/* v6.3.2 — Unified tooltip label styling. Matches .model-tooltip-title so
   every tooltip across the configurator uses the same visual title treatment.
   Previous: 9px mono small cyan. New: 13px Barlow Condensed bold cyan. */
.incl-tooltip-label,
.comp-tooltip-label,
.extra-tooltip-label{
  font-family:var(--fd);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  margin-bottom:6px;
}

/* v6.7.13 — HEADER-LEVEL TOOLTIP FIX (nuclear rewrite after 3 broken attempts).
   PROBLEM: .incl-tooltip is position:absolute relative to .incl-info (22px wide).
   That tiny anchor gave no CSS reference for the panel edges, so every attempt
   to centre or left-align the tooltip relative to the (i) icon either
   overflowed the panel (into the viewer) or the viewport (off-screen on mobile).
   FIX: break out of the .incl-info positioning context by making the parent
   .panel-section-header the positioned ancestor (via position:relative), then
   position the tooltip from the header's RIGHT edge. This guarantees the
   tooltip's right edge aligns with the panel's right edge, never overflowing
   into the viewer, regardless of where the (i) icon sits horizontally within
   the header row. Runtime _hmrClampTooltip continues to handle any remaining
   left-edge viewport overflow via the --hmr-tip-nudge CSS variable.
   v6.7.14 — Flip direction: open DOWNWARD from the header. The panel-section-
   header sits at the top of the panel scroll area so opening upward clipped
   against the scroll container edge. Plenty of room below, where the item
   list renders. Uses the existing .tip-flipped arrow treatment from line 611. */
.panel-section-header{
  position:relative;
}
.panel-section-header .incl-info{
  position:static;
}
.panel-section-header .incl-tooltip{
  right:14px;
  left:auto;
  bottom:auto;
  top:calc(100% + 10px);
  min-width:0;
  max-width:min(320px, calc(100% - 28px));
  z-index:100060;
}
.panel-section-header .incl-tooltip::before{
  left:-10px;
  right:-10px;
  top:-14px;
  bottom:auto;
}
.panel-section-header:has(.incl-info.active){
  z-index:100050;
}

/* v6.2.3 — Shipping section header tooltip. Replaces the legacy
   "View shipping details" deep-link to /custom-options-detailed/#shipping.
   Reuses .incl-info / .incl-tooltip so the existing initInfoTooltips()
   delegation catches it for hover + click + pin behavior. Custom classes
   below only adjust placement (inline in section title) and width (360px
   to fit 4 sub-bullets comfortably). */
.shipping-header-info{display:inline-flex;margin-left:8px;vertical-align:middle;position:relative;top:-1px;}
.shipping-tooltip{min-width:340px;max-width:360px;padding:14px 16px;right:auto;left:0;}
.shipping-tooltip::before{left:-10px;right:-10px;}
.shipping-tooltip .tip-copy{font-size:14px;line-height:1.55;}
.shipping-tooltip-list{list-style:none;margin:10px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px;}
.shipping-tooltip-list li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:rgba(255,255,255,0.035);border-left:2px solid var(--accent);border-radius:2px;}
.shipping-tooltip-list li strong{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:0.02em;color:#fff;line-height:1.25;}
.shipping-tooltip-list li span{font-family:var(--fd);font-weight:400;font-size:11px;line-height:1.4;color:rgba(255,255,255,0.72);letter-spacing:0.01em;}
.shipping-tooltip-foot{margin-top:4px !important;font-size:10px !important;color:rgba(255,255,255,0.55) !important;font-style:italic;letter-spacing:0.02em;}

/* On narrow panel widths (mobile), anchor the tooltip to the right so it
   doesn't overflow off-screen. Desktop keeps left-aligned for natural flow. */
@media(max-width:900px){
  .shipping-tooltip{left:auto;right:0;min-width:min(340px,calc(100vw - 40px));max-width:min(360px,calc(100vw - 40px));}
  .shipping-tooltip::before{left:auto;right:-10px;}
}

/* v6.1.0 — Accessories step reuses the inclusions layout but with
   selectable check boxes (filled when selected, hollow when not).
   No navigation chevron — click toggles selection in place.
   v6.1.2 — Name leads, "Accessory" tag trails as a compact type indicator. */
.incl-accessory .incl-check{
  background:transparent;
  border:1.5px solid var(--rule-2);
  box-shadow:none;
  transition:all 0.2s;
}
.incl-accessory .incl-check::after{
  opacity:0;
  transition:opacity 0.15s;
}
.incl-accessory .incl-name{flex:1;}
.incl-accessory .incl-qty{
  flex:0 0 auto;
  min-width:0;
  margin-left:auto;
  margin-right:8px;
  font-size:10px;
  color:var(--ink-4);
  text-transform:capitalize;
  letter-spacing:0.1em;
}
.incl-accessory:hover .incl-check{border-color:var(--accent);}
.incl-accessory.selected{border-color:var(--accent);background:var(--accent-soft);}
.incl-accessory.selected .incl-check{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.incl-accessory.selected .incl-check::after{opacity:1;}
.incl-accessory.selected .incl-qty{color:var(--accent);}
/* Override .incl-clickable chevron — accessories don't navigate, they toggle */
.incl-accessory.incl-clickable::after{display:none;}
.incl-accessory.incl-clickable:hover{transform:none;box-shadow:0 2px 10px var(--accent-soft);}
.extras-groups{display:flex;flex-direction:column;gap:8px;}
.extras-group{background:var(--paper-card);border:1px solid var(--rule);border-radius:4px;overflow:hidden;transition:all 0.2s;}
.extras-group:hover{border-color:var(--rule-2);}
.extras-group.open{border-color:var(--accent);box-shadow:0 4px 16px rgba(13,17,23,0.06);}
.extras-group-header{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background 0.15s;-webkit-tap-highlight-color:transparent;user-select:none;}
.extras-group-header:hover{background:var(--paper-2);}
.eg-icon{width:32px;height:32px;border-radius:3px;background:var(--paper-2);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s;}
.extras-group.open .eg-icon{background:var(--accent-soft);border-color:var(--accent);}
.eg-icon svg{width:16px;height:16px;stroke:var(--ink-3);stroke-width:1.5;fill:none;}
.extras-group.open .eg-icon svg{stroke:var(--accent);}
.eg-title-wrap{flex:1;min-width:0;}
.eg-title{font-family:var(--fd);font-weight:700;font-size:16px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);line-height:1.15;}
.eg-count{font-family:var(--fm);font-size:10px;color:var(--ink-4);letter-spacing:0.1em;margin-top:2px;}
.eg-count .selected-count{color:var(--accent);font-weight:600;}
.eg-chevron{width:10px;height:10px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);transition:transform 0.25s;flex-shrink:0;}
.extras-group.open .eg-chevron{transform:rotate(-135deg);border-color:var(--accent);}
.extras-group-body{max-height:0;overflow:hidden;padding:0 16px;background:var(--paper-2);transition:max-height 0.35s ease,padding 0.35s ease,border-top-width 0.1s ease,opacity 0.35s ease;opacity:0;border-top:0 solid var(--rule);}
.extras-group.open .extras-group-body{max-height:600px;padding:14px 16px;opacity:1;border-top-width:1px;overflow:visible;}
.extra-item{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--paper-card);border:1px solid var(--rule);border-left:3px solid var(--rule);border-radius:3px;cursor:pointer;transition:all 0.15s;margin-bottom:5px;-webkit-tap-highlight-color:transparent;}
.extra-item:last-child{margin-bottom:0;}
.extra-item:hover{background:#fff;border-left-color:var(--accent);transform:translateX(2px);}
.extra-item.selected{border-color:var(--orange);border-left-color:var(--orange);background:rgba(232,93,32,0.05);}
.extra-item.warn{border-left-color:rgba(204,31,31,0.3);}
.extra-item.warn.selected{border-color:var(--red);border-left-color:var(--red);background:rgba(204,31,31,0.06);}
.extra-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.extra-dot{width:18px;height:18px;border:1.5px solid var(--rule-2);background:#fff;flex-shrink:0;transition:all 0.15s;position:relative;border-radius:3px;}
.extra-item:hover .extra-dot{border-color:var(--accent);}
.extra-item.selected .extra-dot{background:var(--orange);border-color:var(--orange);}
.extra-item.selected .extra-dot::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.extra-item.warn.selected .extra-dot{background:var(--red);border-color:var(--red);}
.extra-body{flex:1;min-width:0;}
.extra-name{font-family:var(--fd);font-weight:600;font-size:14px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink);line-height:1.2;}
.extra-item:hover .extra-name{color:var(--accent);}
.extra-item.selected .extra-name{color:var(--ink);font-weight:700;}
.extra-sub{font-family:var(--fm);font-size:10px;color:var(--ink-4);letter-spacing:0.04em;margin-top:3px;text-transform:uppercase;}
.extra-warn-text{font-family:var(--fm);font-size:9px;color:var(--red);letter-spacing:0.06em;margin-top:4px;line-height:1.4;display:block;}
.extra-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.extra-tag{font-family:var(--fm);font-size:9px;letter-spacing:0.14em;color:var(--orange);text-transform:uppercase;padding:3px 6px;background:rgba(232,93,32,0.1);border-radius:2px;font-weight:600;opacity:0;transition:opacity 0.15s;}
.extra-item.selected .extra-tag{opacity:1;}
.extra-item.warn.selected .extra-tag{color:var(--red);background:rgba(204,31,31,0.1);}
/* v5.7.1.7 — Locked-Standard state: row is ON (selected) but not interactive.
   Used for Foot Straps Extra + Fuel Tank Loops on Enduro (they're Standard there). */
.extra-item.locked-standard{cursor:default;opacity:0.85;background:repeating-linear-gradient(45deg,var(--paper-card) 0 8px,var(--paper-2) 8px 9px);}
.extra-item.locked-standard:hover{transform:none;background:repeating-linear-gradient(45deg,var(--paper-card) 0 8px,var(--paper-2) 8px 9px);}
.extra-item.locked-standard .extra-dot{background:var(--ink-3);border-color:var(--ink-3);}
.extra-item.locked-standard .extra-dot::after{border-color:#fff;}
.extra-item.locked-standard .extra-name{color:var(--ink-2);}
.extra-item.locked-standard .extra-name::after{content:" \\1F512";font-size:10px;opacity:0.5;margin-left:4px;}
.extra-item.locked-standard .extra-tag{color:var(--ink-3);border-color:var(--ink-3);background:var(--paper-2);font-weight:700;}
.extra-info{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.extra-info-icon{width:18px;height:18px;border-radius:50%;border:1px solid var(--rule-2);background:var(--paper-2);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:11px;font-style:italic;color:var(--ink-3);transition:all 0.2s;user-select:none;line-height:1;pointer-events:none;}
.extra-info:hover .extra-info-icon,.extra-info.active .extra-info-icon{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
.comp-tooltip,.extra-tooltip{position:absolute;bottom:calc(100% + 10px);right:0;min-width:260px;max-width:280px;background:var(--void-0);border:1px solid var(--accent);border-radius:3px;padding:12px 14px;opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.2s;z-index:9999;box-shadow:0 8px 28px rgba(0,0,0,0.4);pointer-events:none;transform:translateX(var(--hmr-tip-nudge,0));}
/* v6.4.0 — flip tooltip below trigger when it bleeds above viewport */
.comp-tooltip.tip-flipped,.extra-tooltip.tip-flipped,.incl-tooltip.tip-flipped,.model-tooltip.tip-flipped{bottom:auto;top:calc(100% + 10px);}
.comp-tooltip.tip-flipped::after,.extra-tooltip.tip-flipped::after,.incl-tooltip.tip-flipped::after,.model-tooltip.tip-flipped::after{top:-6px;bottom:auto;border-width:0 6px 6px;border-color:transparent transparent var(--accent);}
.comp-tooltip::before,.extra-tooltip::before{content:"";position:absolute;top:-14px;right:-10px;left:-10px;height:18px;background:transparent;}
.comp-info.active .comp-tooltip,.extra-info.active .extra-tooltip{opacity:1;visibility:visible;pointer-events:auto;}
/* v5.7.1.5 — when an info tooltip is active, lift the whole row above siblings so it doesn't tuck behind.
   v6.0.6 — FIX: bumped row stacking context from 500 → 9998. The scan-bar animation on
   .wizard-pip.active::after creates its own stacking context via animation + position,
   and was catching tooltips behind it. Also occasionally the Build Summary preview
   would sit above. z-index:9998 on the row + z-index:9999 on the tooltip inside it
   ensures tooltips always win against any sibling panel chrome. */
.component-item:has(.comp-info.active),.extra-item:has(.extra-info.active),.incl-item:has(.incl-info.active){z-index:9998;position:relative;}
.component-item:has(.comp-info.active) .comp-tooltip,.extra-item:has(.extra-info.active) .extra-tooltip,.incl-item:has(.incl-info.active) .incl-tooltip{z-index:9999;}

/* v6.0.6 — Tooltips were occasionally rendering behind the boat preview image
   and the wizard progress pips. The tooltips sit inside .cfg-panel which has
   its own stacking context (position:relative sibling to .cfg-viewer). No
   matter how high the tooltip z-index goes inside the panel, the panel's
   context can't jump above the viewer's context unless the panel ITSELF is
   lifted. Use :has() to raise .cfg-panel when any tooltip is active.
   Also bump tooltip z-index to 100050 so it beats the wizard-progress bar
   inside the panel (which sits above the scroll area). */
.cfg-panel:has(.comp-info.active),
.cfg-panel:has(.extra-info.active),
.cfg-panel:has(.incl-info.active),
.cfg-panel:has(.model-info.active){z-index:1000;}
.comp-info.active .comp-tooltip,
.extra-info.active .extra-tooltip,
.incl-info.active .incl-tooltip,
.model-info.active .model-tooltip{z-index:100050 !important;}
/* v6.3.2 — .comp-tooltip-label + .extra-tooltip-label unified with
   .incl-tooltip-label further up the stylesheet. Duplicate rule removed. */
/* v5.9.5 — inline tooltip description (replaces View Details link) */
.tip-copy{font-family:var(--fd);font-size:13px;font-weight:400;line-height:1.5;color:rgba(255,255,255,0.92);letter-spacing:0.01em;margin:0;padding-top:2px;}
.shipping-wrap{display:flex;flex-direction:column;gap:8px;}
.shipping-select-wrap{position:relative;}
.shipping-select{width:100%;appearance:none;-webkit-appearance:none;background:#fff;border:1px solid var(--rule);padding:13px 40px 13px 16px;font-family:var(--fd);font-size:14px;font-weight:600;color:var(--ink);letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;outline:none;transition:border-color 0.2s,box-shadow 0.2s;border-radius:3px;}
.shipping-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.shipping-select option{background:#fff;color:var(--ink);padding:8px;}
.shipping-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink-3);pointer-events:none;}
.cfg-label{font-family:var(--fm);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:6px;font-weight:600;}
.cfg-input,.cfg-textarea{width:100%;background:#fff;border:1px solid var(--rule);padding:12px 14px;font-family:var(--fb);font-size:14px;color:var(--ink);outline:none;transition:all 0.2s;border-radius:3px;}
.cfg-input:focus,.cfg-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.cfg-input::placeholder,.cfg-textarea::placeholder{color:var(--ink-4);}
.cfg-textarea{height:80px;resize:vertical;}

/* v6.0.7 — Step 8 (Your Details) styling: darker, more prominent than the rest
   of the wizard so the final submission page reads as important/finalised. */
.panel-section[data-step="9"] .form-intro{color:var(--ink);font-size:14px;font-weight:500;line-height:1.6;}
.panel-section[data-step="9"] .form-group{background:var(--paper-card);border:1.5px solid var(--rule-2);padding:20px;}
.panel-section[data-step="9"] .form-group-label{font-size:11px;color:var(--ink);font-weight:800;letter-spacing:0.24em;}
.panel-section[data-step="9"] .cfg-label{color:var(--ink-2);font-size:11px;font-weight:700;letter-spacing:0.16em;}
.panel-section[data-step="9"] .cfg-input,
.panel-section[data-step="9"] .cfg-textarea{
  background:#fff;
  border:1.5px solid var(--ink-3);
  color:var(--ink);
  font-size:15px;
  font-weight:500;
  padding:14px 16px;
}
.panel-section[data-step="9"] .form-row-icon .cfg-input{padding-left:42px;}
.panel-section[data-step="9"] .cfg-input:hover,
.panel-section[data-step="9"] .cfg-textarea:hover{border-color:var(--ink-2);}
.panel-section[data-step="9"] .cfg-input:focus,
.panel-section[data-step="9"] .cfg-textarea:focus{border-color:var(--accent);border-width:1.5px;box-shadow:0 0 0 3px var(--accent-soft);}
.panel-section[data-step="9"] .cfg-input::placeholder,
.panel-section[data-step="9"] .cfg-textarea::placeholder{color:var(--ink-3);font-weight:400;}
.panel-section[data-step="9"] .form-input-icon{color:var(--ink-3);}
.panel-section[data-step="9"] .cfg-label .req{color:var(--red);font-size:12px;}
.form-row{margin-bottom:14px;}
.cfg-progress{padding:14px 22px;background:var(--paper-2);border-top:1px solid var(--rule);display:flex;align-items:center;gap:14px;flex-shrink:0;}
.cfg-progress-label{font-family:var(--fm);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap;flex-shrink:0;font-weight:600;}
.cfg-progress-track{flex:1;height:5px;background:var(--paper-3);border-radius:3px;overflow:hidden;}
.cfg-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent));border-radius:3px;transition:width 0.4s ease;width:0%;position:relative;}
.cfg-progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);animation:scanBar 1.8s infinite;}
@keyframes scanBar{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.cfg-progress-count{font-family:var(--fm);font-size:13px;font-weight:700;color:var(--accent);letter-spacing:0.06em;white-space:nowrap;flex-shrink:0;}
.cfg-cta{padding:14px 22px;display:flex;flex-wrap:wrap;gap:8px;background:var(--paper);border-top:1px solid var(--rule);flex-shrink:0;align-items:center;}
.btn-sm{padding:11px 16px;font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;border:none;text-align:center;transition:all 0.2s;border-radius:3px;-webkit-tap-highlight-color:transparent;}
.btn-submit-sm{background:var(--accent);color:var(--void-0);flex:1;min-width:0;font-weight:700;}
.btn-submit-sm:hover{filter:brightness(1.08);box-shadow:0 6px 22px var(--accent-glow);transform:translateY(-1px);}
.btn-outline-sm{background:transparent;color:var(--ink-2);border:1.5px solid var(--rule-2);}
.btn-outline-sm:hover{color:var(--ink);border-color:var(--ink-3);}
/* v6.0.9 — .btn-share-sm removed with the share button */
.extras-view{width:100%;height:100%;display:flex;flex-direction:column;padding:14px 18px;gap:8px;overflow:hidden;box-sizing:border-box;}
/* v5.9.1 — removed old .ev-tile / .ev-header / .ev-title / .ev-subtitle / .ev-body rules.
   Those were from the pre-v5.9.1 extras design. New compact dashboard lives below in the
   v5.9.1 EXTRAS LOADOUT DASHBOARD section. Legacy .ev-body still referenced elsewhere;
   kept as a no-op placeholder so any stale references don't break. */
.ev-body{display:grid;flex:1;min-height:0;overflow:hidden;align-content:start;}
.modal-overlay{position:fixed;inset:0;z-index:100010;background:rgba(10,14,19,0.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;animation:fadeIn 0.25s;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--paper);border-radius:6px;width:100%;max-width:720px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,0.5);animation:cardIn 0.35s cubic-bezier(.2,.8,.2,1);}
@keyframes cardIn{from{transform:translateY(20px);opacity:0;}to{transform:none;opacity:1;}}
.modal-bar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:var(--void-0);color:#fff;position:relative;}
.modal-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}
.modal-title{font-family:var(--fd);font-weight:800;font-size:22px;letter-spacing:0.06em;text-transform:uppercase;}
.modal-close{width:32px;height:32px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;border-radius:3px;-webkit-tap-highlight-color:transparent;}
.modal-close:hover{background:rgba(255,255,255,0.15);}
.modal-body{flex:1;overflow-y:auto;padding:22px 24px;}
.modal-footer{padding:14px 24px;border-top:1px solid var(--rule);display:flex;gap:8px;background:var(--paper-2);}
.summary-preview{width:100%;border:1px solid var(--rule);margin-bottom:18px;display:block;background:var(--void-0);border-radius:4px;animation:hmrSummaryFadeIn 0.4s ease;}
.summary-loading{height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid var(--rule);margin-bottom:18px;background:var(--void-0);border-radius:4px;}
.summary-loading-text{font-family:var(--fm);font-size:10px;letter-spacing:0.2em;color:var(--void-muted);text-transform:uppercase;}
/* v5.9.6 — inline Build Summary boat preview (wizard step 7). Always shows Front 3/4. */
.summary-preview-wrap{width:100%;margin-bottom:18px;position:relative;min-height:180px;}
.summary-preview-loading{width:100%;height:180px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);background:var(--void-0);border-radius:4px;}
@keyframes hmrSummaryFadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.summary-model-row{display:flex;align-items:center;gap:18px;padding:14px;background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;margin-bottom:18px;}
.summary-model-row img{height:36px;}
.summary-model-name{font-family:var(--fd);font-weight:800;font-size:20px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);line-height:1;}
.summary-model-sub{font-family:var(--fm);font-size:10px;color:var(--ink-4);letter-spacing:0.1em;margin-top:3px;}
.summary-section-lbl{font-family:var(--fm);font-size:10px;color:var(--accent);letter-spacing:0.18em;text-transform:uppercase;margin:16px 0 10px;font-weight:600;}
.summary-colors{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.summary-crow{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--paper-card);border:1px solid var(--rule);border-radius:3px;}
.summary-cswatch{width:22px;height:22px;border-radius:50%;border:1px solid var(--rule-2);flex-shrink:0;}
.summary-clabel{font-family:var(--fd);font-weight:600;font-size:14px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink);line-height:1.2;}
.summary-cval{font-family:var(--fm);font-size:10px;color:var(--ink-4);letter-spacing:0.04em;margin-top:2px;}
.summary-extras{display:flex;flex-direction:column;gap:4px;}
.summary-erow{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--paper-card);border:1px solid var(--rule);border-radius:3px;font-family:var(--fd);font-weight:600;font-size:13px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink);}
.summary-echeck{color:var(--orange);font-size:12px;}
.summary-note{margin-top:16px;padding:12px 14px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:3px;font-family:var(--fm);font-size:10px;color:var(--ink-2);letter-spacing:0.04em;line-height:1.7;}
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--void-0);color:#fff;border-left:3px solid var(--accent);padding:12px 24px;font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;opacity:0;transition:opacity 0.3s,transform 0.3s;pointer-events:none;z-index:200000;box-shadow:0 8px 32px rgba(0,0,0,0.5);border-radius:3px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.cfg-panel.wizard-mode .panel-section{display:none !important;}
.cfg-panel.wizard-mode .panel-section.step-active{display:block !important;animation:stepFadeIn 0.3s ease;}
@keyframes stepFadeIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}
.cfg-panel.wizard-mode .cfg-progress,.cfg-panel.wizard-mode .cfg-cta{display:none;}
.cfg-panel.wizard-mode .cfg-panel-scroll{padding-bottom:20px;}
.cfg-panel.wizard-mode .wizard-progress{display:flex !important;padding:14px 20px;background:var(--paper-2);border-bottom:1px solid var(--rule);gap:5px;flex-shrink:0;}
.wizard-pip{flex:1;height:4px;background:var(--paper-3);border-radius:2px;position:relative;overflow:hidden;transition:background 0.3s;}
.wizard-pip.done{background:var(--accent);opacity:0.55;}
.wizard-pip.active{background:var(--accent);}
.wizard-pip.active::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent);animation:scanBar 1.8s infinite;}
.cfg-panel.wizard-mode .wizard-step-label{display:flex !important;align-items:center;justify-content:space-between;padding:10px 24px 12px;background:var(--paper-2);border-bottom:1px solid var(--rule);flex-shrink:0;}
.wizard-step-label .wsl-num{font-family:var(--fm);font-size:10px;color:var(--ink-4);letter-spacing:0.18em;text-transform:uppercase;font-weight:600;}
.wizard-step-label .wsl-num .n{color:var(--accent);}
.wizard-step-label .wsl-pct{font-family:var(--fm);font-size:11px;color:var(--accent);font-weight:700;letter-spacing:0.08em;}
.cfg-panel.wizard-mode .wizard-nav{display:flex !important;gap:10px;padding:14px 20px;background:var(--paper);border-top:1px solid var(--rule);flex-shrink:0;}
body.extras-active .cfg-panel.wizard-mode .wizard-nav,.cfg-panel.wizard-mode .wizard-nav{display:flex !important;}
.wizard-nav-btn{padding:14px 20px;font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;border:none;cursor:pointer;border-radius:3px;transition:all 0.2s;-webkit-tap-highlight-color:transparent;}
.wnav-back{background:#fff;color:var(--ink);border:1.5px solid var(--ink-3);font-weight:700;min-width:100px;}
.wnav-back:hover:not(:disabled){border-color:var(--ink);color:var(--ink);background:var(--paper-2);}
.wnav-back:disabled{opacity:0.3;cursor:not-allowed;}
.wnav-next{background:var(--orange);color:#fff;font-weight:800;flex:1;box-shadow:0 4px 14px rgba(232,93,32,0.35);}
.wnav-next:hover{filter:brightness(1.08);}
.wnav-submit{background:var(--orange);color:#fff;font-weight:800;flex:1;box-shadow:0 4px 14px rgba(232,93,32,0.35);}

/* v5.9.9 — Gate: Next button is "locked" on Step 1 (no model selected) and
   on Step 5 (no motor/trailer picked). Remains clickable so the onclick handler
   fires _wizardShakeAndWarn() / _wizardExtrasShakeAndWarn() for rejection feedback.
   v6.1.8 — Switched from background:var(--void-rule) (near-invisible on light paper
   backgrounds, causing the button to 'disappear') to a 50% opacity on the base
   orange styling. Button stays visible, reads as 'locked', rejects clicks with
   toast + shake as before. */
.wnav-next.wnav-locked,.wnav-next.wnav-locked:hover{
  opacity:0.5;
  cursor:not-allowed;
  filter:none;
  box-shadow:0 2px 6px rgba(232,93,32,0.15);
}
/* Shake animation applied on rejected click — restart via class-remove/add */
.wnav-next.wnav-shake{animation:wnavShake 0.55s cubic-bezier(.36,.07,.19,.97);}
@keyframes wnavShake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-5px);}
  40%,60%{transform:translateX(5px);}
}
/* Pulse the model cards to draw attention when the user tries to skip */
.model-opt.model-opt-pulse{animation:modelOptPulse 1.1s ease-out;}
@keyframes modelOptPulse{
  0%{box-shadow:0 0 0 0 rgba(41,181,232,0.6);}
  60%{box-shadow:0 0 0 14px rgba(41,181,232,0);}
  100%{box-shadow:0 0 0 0 rgba(41,181,232,0);}
}

/* ============================================================================
   v5.7.1.1 — INCLUDED STANDARD: clickable rows
   ============================================================================ */
.incl-clickable{cursor:pointer;position:relative;transition:all 0.2s,border-color 0.2s,box-shadow 0.2s,transform 0.15s;}
.incl-clickable::after{content:"";position:absolute;top:50%;right:44px;transform:translateY(-50%);width:14px;height:14px;border-top:1.5px solid var(--ink-4);border-right:1.5px solid var(--ink-4);transform-origin:center;transform:translateY(-50%) rotate(45deg);opacity:0.35;transition:all 0.2s;pointer-events:none;}
.incl-clickable:hover{border-color:var(--accent);box-shadow:0 4px 14px var(--accent-soft);transform:translateX(2px);}
.incl-clickable:hover::after{border-color:var(--accent);opacity:0.9;right:40px;}
.incl-clickable:active{transform:translateX(1px) scale(0.995);}

/* v6.3.2 — No chevrons on any wizard row. These rows toggle / select,
   they do not navigate. Forces display:none regardless of any earlier
   rule that might paint one. */
.incl-item.incl-clickable::after,
.incl-item.incl-clickable:hover::after{
  display:none !important;
  content:none !important;
}
.incl-item.incl-clickable:hover{
  transform:none !important;
}

/* ============================================================================
   v5.9.1 — EXTRAS LOADOUT DASHBOARD (SVG preview pane)
   Compact tactical icon grid. Four groups + shipping. Icons first, tiny labels.
   Rendered by buildExtrasViewEl() on the SVG preview pane (not the right panel).
   ============================================================================ */

/* Compact header — one line, title + counter */
.ev-header-compact{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0 0 8px;border-bottom:1px solid rgba(255,255,255,0.12);
  flex-shrink:0;
}
.ev-title-compact{
  font-family:var(--fd);font-weight:800;font-size:14px;letter-spacing:0.18em;
  text-transform:uppercase;color:#fff;line-height:1;
}
.ev-total-compact{
  font-family:var(--fm);font-size:10px;color:rgba(255,255,255,0.55);
  letter-spacing:0.08em;line-height:1;
}
.ev-total-compact .val{
  font-family:var(--fd);font-weight:800;font-size:14px;color:var(--accent);
  letter-spacing:0.02em;
}
body.model-enduro .ev-total-compact .val{color:var(--orange);}

/* Master grid: 2 columns x 2 rows for the four equipment groups.
   On wider displays (1400+) we go 4 columns in one row.
   v5.9.3 — NO SCROLL: everything fits in preview area, no overflow-y:auto. */
.ev-body.ev-chips{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:min-content;
  gap:10px 14px;
  flex:1;min-height:0;
  overflow:hidden;
  padding:6px 4px 2px;
  align-content:start;
}

@media(min-width:1400px){
  .ev-body.ev-chips{grid-template-columns:repeat(4,1fr);grid-template-rows:min-content;}
  .ev-ship-block{grid-column:1 / -1;}
}
@media(max-width:1200px) and (min-width:901px){
  .ev-body.ev-chips{grid-template-columns:1fr;}
}

/* Each group (block): label on top, icon grid below */
.ev-group-block{
  display:flex;flex-direction:column;gap:6px;
  min-width:0;min-height:0;
}
.ev-group-label{
  font-family:var(--fm);font-size:9px;letter-spacing:0.22em;
  text-transform:uppercase;color:rgba(255,255,255,0.5);font-weight:700;
  padding:0 0 2px;display:flex;align-items:center;gap:10px;line-height:1;
}
.ev-group-label::after{
  content:"";flex:1;height:1px;background:rgba(255,255,255,0.08);
}

/* Inner icon grid: auto-fill 60px square chips */
.ev-chip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(60px,1fr));
  grid-auto-rows:60px;
  gap:5px;
  justify-content:start;
  min-height:0;min-width:0;
}

/* The chip itself: square tile, icon centred, tiny label below */
.ev-chip{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:8px 4px 6px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:3px;
  opacity:0.58;
  transition:all 0.22s ease;
  min-width:0;box-sizing:border-box;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:1 / 1;
}
.ev-chip:hover{transform:translateY(-1px);opacity:0.85;border-color:rgba(255,255,255,0.22);}
.ev-chip:active{transform:translateY(0);}
.ev-chip.active{
  opacity:1;
  border-color:var(--accent);
  background:rgba(41,181,232,0.1);
  box-shadow:inset 0 0 0 1px var(--accent),0 3px 10px rgba(41,181,232,0.22);
}
body.model-enduro .ev-chip.active{
  background:rgba(232,93,32,0.1);
  border-color:var(--orange);
  box-shadow:inset 0 0 0 1px var(--orange),0 3px 10px rgba(232,93,32,0.22);
}
.ev-chip.ev-warn.active{
  border-color:var(--red);background:rgba(204,31,31,0.09);
  box-shadow:inset 0 0 0 1px var(--red),0 3px 10px rgba(204,31,31,0.22);
}
.ev-chip.ev-motor.active{
  border-color:var(--orange);background:rgba(232,93,32,0.09);
  box-shadow:inset 0 0 0 1px var(--orange),0 3px 10px rgba(232,93,32,0.22);
}

/* Lamp indicator: tiny dot top-right */
.ev-chip-lamp{
  position:absolute;top:4px;right:4px;
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  transition:all 0.22s;
}
.ev-chip.active .ev-chip-lamp{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 6px var(--accent-glow),inset 0 0 2px #fff;
}
body.model-enduro .ev-chip.active .ev-chip-lamp{
  background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 6px rgba(232,93,32,0.6),inset 0 0 2px #fff;
}
.ev-chip.ev-warn.active .ev-chip-lamp{
  background:var(--red);border-color:var(--red);
  box-shadow:0 0 6px rgba(204,31,31,0.6),inset 0 0 2px #fff;
}
.ev-chip.ev-motor.active .ev-chip-lamp{
  background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 6px rgba(232,93,32,0.6),inset 0 0 2px #fff;
}

/* The icon: 30x30 stroke-only, uses currentColor */
.ev-chip-icon{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.7);transition:color 0.22s;flex-shrink:0;
}
.ev-chip-icon svg{
  width:100%;height:100%;
  stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.ev-chip.active .ev-chip-icon svg{
  filter:drop-shadow(0 0 4px rgba(138,154,176,0.7));
}
.ev-chip.active .ev-chip-icon{color:#8a9ab0;}
body.model-enduro .ev-chip.active .ev-chip-icon{color:#8a9ab0;}
.ev-chip.ev-warn.active .ev-chip-icon{color:var(--red);}
.ev-chip.ev-motor.active .ev-chip-icon{color:#8a9ab0;}

/* Tiny label: one line only, uppercase, 8px. Tooltip (title attr) has full name. */
.ev-chip-label{
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
  text-align:center;
  line-height:1.1;
  font-weight:600;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ev-chip.active .ev-chip-label{color:#fff;font-weight:700;}

/* Row-flash animation when a chip tap targets a config row */
@keyframes hmrRowFlash{
  0%{background:rgba(41,181,232,0.35);box-shadow:0 0 0 2px var(--accent);}
  100%{background:transparent;box-shadow:none;}
}
body.model-atomic .extra-item.row-flash,body.model-atomic .component-item.row-flash{animation:hmrRowFlash 1.2s ease-out;}
body.model-enduro .extra-item.row-flash,body.model-enduro .component-item.row-flash{animation:hmrRowFlash 1.2s ease-out;animation-name:hmrRowFlashEnduro;}
@keyframes hmrRowFlashEnduro{
  0%{background:rgba(232,93,32,0.35);box-shadow:0 0 0 2px var(--orange);}
  100%{background:transparent;box-shadow:none;}
}

/* Ship bar: horizontal pill. Sits inside its own group block. */
.ev-ship-block{min-width:0;}
.ev-ship-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:3px;
  opacity:0.65;
  transition:all 0.25s ease;
  cursor:pointer;
  min-height:0;flex-shrink:0;
}
.ev-ship-bar:hover{opacity:0.95;border-color:rgba(255,255,255,0.22);}
.ev-ship-bar.active{
  opacity:1;
  border-color:var(--accent);
  background:rgba(41,181,232,0.1);
  box-shadow:inset 0 0 0 1px var(--accent),0 3px 10px rgba(41,181,232,0.22);
}
body.model-enduro .ev-ship-bar.active{
  background:rgba(232,93,32,0.1);
  border-color:var(--orange);
  box-shadow:inset 0 0 0 1px var(--orange),0 3px 10px rgba(232,93,32,0.22);
}
.ev-ship-bar-icon{
  width:26px;height:26px;flex-shrink:0;
  color:rgba(255,255,255,0.7);
  display:flex;align-items:center;justify-content:center;
}
.ev-ship-bar-icon svg{
  width:100%;height:100%;
  stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.ev-ship-bar.active .ev-ship-bar-icon{color:#8a9ab0;}
body.model-enduro .ev-ship-bar.active .ev-ship-bar-icon{color:#8a9ab0;}
.ev-ship-bar-label{
  font-family:var(--fm);font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:rgba(255,255,255,0.85);
  line-height:1.2;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ev-ship-bar.active .ev-ship-bar-label{color:#fff;font-weight:700;}
.ev-ship-bar .ev-chip-lamp{position:static;flex-shrink:0;}

@media(max-width:900px){
  :root{--cfg-header-h:54px;}
  html,body{height:100%;overflow:hidden;}

  /* v6.0.4 — Mobile MilSpec crest: 150px instead of 300px. Also tighten the
     intro block so it fits in the shorter mobile viewer panel.
     v6.0.6 — intro-copy font-size bumped for better presence
     v6.0.7 — Widen intro container to fit the single-line headline; drop
     font-size override (clamp in the base rule handles responsive scaling). */
  .milspec-crest-pic,
  .milspec-crest-img{max-width:150px;}
  .milspec-intro{gap:12px;padding:16px;max-width:360px;}
  .milspec-intro-copy{font-size:24px;letter-spacing:0.03em;} /* v6.0.7 — shorter 'Select Your Model' fits comfortably */
  .milspec-intro-pre{font-size:8px;letter-spacing:0.32em;}
  .milspec-intro-sub{font-size:8px;letter-spacing:0.18em;}

  .cfg-header{position:fixed;top:var(--wp-header-h,0px);left:0;right:0;padding:0 12px;gap:8px;z-index:99999;}
  .cfg-header-brand{display:none;} /* v5.7.1.24 — drop RACING BOAT logo on mobile, cfg-header-mobile-status takes over */
  .cfg-header-brand .logo-sub{display:none;}
  .cfg-header-brand .logo-text{font-size:15px;}
  .cfg-header-views,.cfg-header-actions .live-label{display:none;}
  .cfg-header-actions .hbtn{padding:5px 12px;font-size:10px;}
  .cfg-body{
    top:calc(var(--wp-header-h,0px) + var(--cfg-header-h) + 2px);
    height:calc(100vh - var(--wp-header-h,0px) - var(--cfg-header-h) - 2px);
    height:calc(100dvh - var(--wp-header-h,0px) - var(--cfg-header-h) - 2px);
    bottom:auto;
  }
  /* v5.8.0 — STRUCTURAL REWRITE: mobile cfg-layout is now a flex-column.
     viewer (flex-shrink:0, 28vh) + panel (flex:1). No fixed positioning.
     Everything flows from .cfg-body which is already fixed at top:wp+cfg-header, bottom:0.
     When iOS URL bar shows/hides or WP admin bar toggles, the whole column shifts together. */
  .cfg-layout{
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
    overflow:hidden;
  }

  /* v5.8.6 — VIEWER SIZE: single authoritative rule.
     v5.9.3 — dropped from 32vh → 26vh so the config panel has more room for
     colour chip grids / extras chips to fit without scrolling. */
  .cfg-viewer{
    position:relative !important;
    left:0 !important;right:auto !important;top:0 !important;bottom:auto !important;
    width:100%;
    flex-shrink:0;flex-grow:0;
    flex-basis:26vh !important;
    height:26vh !important;
    min-height:26vh !important;
    max-height:26vh !important;
    margin:0 !important;
    transform:none !important;
    border-right:none;border-bottom:2px solid var(--accent);
    z-index:auto;
    box-shadow:0 6px 24px rgba(0,0,0,0.5);
    overflow:hidden !important;
    display:flex;flex-direction:column;
  }

  .mobile-angle-tabs{display:flex;overflow-x:auto;background:rgba(10,14,19,0.85);border-bottom:1px solid var(--void-rule);scrollbar-width:none;flex-shrink:0;}
  .mobile-angle-tabs::-webkit-scrollbar{height:0;}
  .mobile-angle-tabs .angle-tab{height:30px;padding:0 12px;font-size:9px;}
  .mobile-angle-tabs .angle-tab.tab-extras{display:none;}
  #angleTabs .angle-tab.tab-extras{display:none;}

  /* v5.7.1.21 — boat-canvas flexes to fill remaining space inside viewer stack */
  .boat-canvas{
    flex:1;
    position:relative;
    padding:6px 20px;
    min-height:0;
    display:flex;align-items:center !important;justify-content:center !important;
    overflow:hidden !important;
    /* v5.8.7 — removed contain:layout paint. It was interfering with flex centering on
       some mobile browsers, causing the boat SVG to bottom-anchor instead of centering. */
  }
  .boat-canvas > *,.svg-wrap,.svg-wrap > svg{
    max-width:100%;max-height:100%;
  }

  /* v5.8.7 — svg-wrap MUST be full viewer height AND a flex container that centers
     the SVG. Any inherited align-items from a parent must be overridden here. */
  .svg-wrap{
    width:100%;
    height:100%;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:0;
  }

  /* v5.8.8 — Mobile SVG: HEIGHT-constrained. Previous v5.8.7 used max-width:100% which
     caused the SVG to render wider than its container's height allowed, bleeding out
     the bottom. Now explicitly height:100% + width:auto makes height the limiting
     dimension. SVG scales to viewer height, width auto-adjusts to preserve aspect ratio
     (1.5:1 on 1200x800 viewBox). max-width:100% as safety net for landscape. */
  .svg-wrap svg{
    display:block;
    height:100% !important;
    width:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 auto !important;
    filter:none !important;
  }

  /* v5.9.7 — Mobile boat glow: radial gradient behind the SVG instead of drop-shadow.
     Drop-shadow clips against mobile viewer bounds (the SVG fills height:100%), which
     stripped the glow entirely. A ::before pseudo-element on .boat-canvas gives us a
     proper ambient halo that respects --preview-glow (cyan on atomic, orange on enduro).
     Only appears once a model is picked (no glow on .milspec-intro). */
  .boat-canvas{position:relative;}
  body.model-atomic .boat-canvas::before,
  body.model-enduro .boat-canvas::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 65% 55% at 50% 55%, var(--preview-glow) 0%, transparent 65%);
    opacity:0.7;
  }
  /* v6.0.2 — Exclude .view-arrow so it keeps its position:absolute. Also exclude
     .viewer-coord and .illustrative-note for the same reason (they need absolute
     positioning even on mobile when shown). */
  .boat-canvas > *:not(.view-arrow):not(.viewer-coord):not(.illustrative-note){position:relative;z-index:1;}

  .bracket,.scan-line,.viewer-coord{display:none;}
  /* v6.0.2 — Mobile view arrows: explicitly restate position:absolute to beat any
     ancestor overrides, and center vertically with left/right:0. The 38% nudge
     accommodates the progress strip at the bottom taking ~12% of viewer height. */
  .view-arrow{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:32px;height:48px;font-size:22px;
    z-index:10;
  }
  .view-arrow-prev{left:4px !important;}
  .view-arrow-next{right:4px !important;}
  .illustrative-note{font-size:7px;bottom:40px;right:8px;}

  /* ══ V6.0.0 FIX — beat the base rule's display:flex !important ══ */
  .model-strip{display:none !important;}

  /* v5.7.1.24 — Mobile status slot: takes left (brand is hidden on mobile). 
     Header layout: [badge + name + count] ............ [RESET] */
  .cfg-header-mobile-status{
    display:flex;align-items:center;gap:10px;
    flex:1;min-width:0;
  }
  .cfg-header-mobile-status img{height:24px;width:auto;flex-shrink:0;}
  .chms-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1;min-width:0;overflow:hidden;}
  .chms-name{font-family:var(--fd);font-weight:800;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .chms-count{font-family:var(--fm);font-size:9px;color:var(--accent);font-weight:700;letter-spacing:0.08em;white-space:nowrap;}
  body.model-enduro .chms-count{color:var(--orange);}
  .chms-lbl{color:var(--void-muted);font-weight:600;margin-left:4px;}

  /* v5.7.1.24 — Shrink live-dot/label, Reset button stays compact */
  .cfg-header-actions{gap:8px;flex-shrink:0;}
  .cfg-header-actions .live-dot,.cfg-header-actions .live-label{display:none;} /* drop LIVE indicator on mobile */
  .cfg-header-actions .hbtn{padding:6px 10px;font-size:10px;}

  /* v5.8.0 — Progress strip retired: badge + count moved up to cfg-header on mobile */
  .mobile-progress-strip{display:none !important;}

  /* v5.7.1.38 — panel is now a flex-child (flex:1) not fixed-positioned. Takes all space
     remaining after viewer + its own flex-shrink:0 siblings. */
  .cfg-panel{
    position:relative;
    left:auto;right:auto;top:auto;bottom:auto;
    width:100%;height:auto;
    flex:1;min-height:0;
    display:flex;flex-direction:column;
    background:var(--paper);
    border-top:none;
    z-index:auto;overflow:hidden;
  }
  .cfg-panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;min-height:0;padding-bottom:8px;}

  .cfg-panel.wizard-mode .panel-section{display:none !important;}
  .cfg-panel.wizard-mode .panel-section.step-active{display:block !important;animation:stepFadeIn 0.3s ease;}

  .wizard-progress{display:flex;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--rule);gap:5px;flex-shrink:0;}
  .wizard-pip{flex:1;height:4px;background:var(--paper-3);border-radius:2px;position:relative;overflow:hidden;transition:background 0.3s;}
  .wizard-pip.done{background:var(--accent);opacity:0.55;}
  .wizard-pip.active{background:var(--accent);}
  .wizard-pip.active::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent);animation:scanBar 1.8s infinite;}
  .cfg-panel.wizard-mode .wizard-step-label{display:none !important;}
  .wizard-step-label .wsl-num{font-family:var(--fm);font-size:10px;color:var(--ink-4);letter-spacing:0.18em;text-transform:uppercase;font-weight:600;}
  .wizard-step-label .wsl-num .n{color:var(--accent);}
  .wizard-step-label .wsl-pct{font-family:var(--fm);font-size:11px;color:var(--accent);font-weight:700;letter-spacing:0.08em;}

  .panel-section{padding:18px;}
  /* v5.7.1.27 — sticky removed; section header is mirrored by JS into a pinned element above the scroll (see #sectionPin in panel). */
  .panel-section-header{padding:0 0 10px;margin-bottom:12px;}
  .panel-section-title{font-size:18px;}
  /* v5.7.1.27 — pinned section title slot: sits above scroll, always visible, never scrolls away */
  .panel-section-pin{display:flex !important;align-items:baseline;justify-content:space-between;padding:10px 18px;background:var(--paper);border-bottom:1px solid var(--rule);flex-shrink:0;gap:12px;}
  .panel-section-pin .psp-title{font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:0.04em;text-transform:uppercase;color:#0d1117 !important;}
  .panel-section-pin .psp-step{font-family:var(--fm);font-size:10px;letter-spacing:0.12em;color:var(--accent);font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:6px;white-space:nowrap;background:transparent;}
  .panel-section-pin .psp-step::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);}
  body.model-enduro .panel-section-pin .psp-step{color:var(--orange);}
  body.model-enduro .panel-section-pin .psp-step::before{background:var(--orange);}
  /* Hide the original in-panel section header on mobile — pin is the replacement */
  .panel-section.step-active .panel-section-header{display:none;}
  .color-grid{grid-template-columns:repeat(5,1fr);gap:8px;}
  .color-dot{width:32px;height:32px;}
  .color-name{font-size:7px;}
  .comp-name{font-size:14px;}
  .eg-title{font-size:15px;}
  .extra-name{font-size:13px;}
  .comp-tooltip,.extra-tooltip{bottom:auto;top:calc(100% + 10px);right:0;min-width:200px;}
  /* v5.9.3 — MOBILE EXTRAS: NO SCROLL. Everything must fit in the ~180px (26vh) 
     preview area. Collapse group labels + compact header to save vertical.
     Chips are tiny 40x40 squares packed into a dense auto-fill grid. 
     Motor/trailer/warn colour cues via .ev-motor/.ev-warn classes still apply. */
  .extras-view{padding:6px 8px;gap:0;}
  .ev-header-compact{padding-bottom:4px;}
  .ev-title-compact{font-size:10px;letter-spacing:0.12em;}
  .ev-total-compact{font-size:8px;}
  .ev-total-compact .val{font-size:10px;}
  /* Flatten: the body becomes one grid, group blocks collapse to chip containers */
  .ev-body.ev-chips{
    display:flex !important;
    flex-wrap:wrap !important;
    flex-direction:row !important;
    grid-template-columns:none !important;
    gap:4px !important;
    padding:0 !important;
    overflow:hidden !important;
    align-content:flex-start;
  }
  .ev-group-block{
    display:contents; /* group block disappears; its children (label+grid) promote to parent flex */
  }
  .ev-group-label{display:none !important;} /* no labels on mobile, save vertical */
  .ev-chip-grid{
    display:contents !important; /* chips promote directly into parent flex */
  }
  .ev-chip{
    width:40px !important;
    height:40px !important;
    min-height:0 !important;
    padding:3px 2px !important;
    gap:1px !important;
    aspect-ratio:auto !important;
    flex-shrink:0;
  }
  .ev-chip-icon{width:20px;height:20px;}
  .ev-chip-label{display:none !important;} /* no label on mobile chips; rely on tooltip/title */
  .ev-chip-lamp{width:4px;height:4px;top:2px;right:2px;}
  /* Shipping block: full-width pill at bottom */
  .ev-ship-block{display:block !important;width:100%;margin-top:4px;}
  .ev-ship-bar{padding:6px 10px;gap:6px;}
  .ev-ship-bar-icon{width:18px;height:18px;}
  .ev-ship-bar-label{font-size:8px;letter-spacing:0.06em;}
  .shipping-select{font-size:13px;padding:14px 40px 14px 14px;}

  .wizard-nav{display:flex;gap:8px;padding:10px 14px;background:var(--paper);border-top:1px solid var(--rule);flex-shrink:0;}
  .wizard-nav-btn{padding:12px 16px;font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;border:none;cursor:pointer;border-radius:3px;transition:all 0.2s;-webkit-tap-highlight-color:transparent;}
  /* ══ V6.0.0 — crisp Back and bold Next for mobile ══ */
  .wnav-back{background:#fff;color:var(--ink);border:1.5px solid var(--ink-3);font-weight:700;min-width:80px;}
  .wnav-back:hover:not(:disabled){border-color:var(--ink);color:var(--ink);background:var(--paper-2);}
  .wnav-back:disabled{opacity:0.3;cursor:not-allowed;}
  .wnav-next{background:var(--orange);color:#fff;font-weight:800;flex:1;box-shadow:0 4px 14px rgba(232,93,32,0.35);}
  .wnav-next:hover{filter:brightness(1.08);}
  .wnav-submit{background:var(--orange);color:#fff;font-weight:800;flex:1;box-shadow:0 4px 14px rgba(232,93,32,0.35);}

  .cfg-panel.wizard-mode .cfg-progress,.cfg-panel.wizard-mode .cfg-cta{display:none;}
  .model-opt{padding:14px 12px;}
  .model-opt img{height:32px;margin-bottom:8px;}
  .model-opt-name{font-size:15px;}
  .model-opt-class{font-size:9px;}
  .model-info{top:4px;right:4px;width:20px;height:20px;}
  .model-info-icon{width:16px;height:16px;font-size:10px;}
  .model-tooltip{position:fixed;top:auto !important;bottom:80px;left:10px !important;right:10px;transform:none !important;min-width:0;max-width:none;width:calc(100% - 20px);}
  /* v5.8.6 — viewer-hidden: collapses the viewer to zero height.
     Higher specificity (html body) to beat the new 32vh !important on .cfg-viewer base. */
  html body.viewer-hidden .cfg-viewer{
    flex-basis:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    opacity:0;pointer-events:none;
    overflow:hidden !important;
    border-bottom-width:0;
  }
  html body.extras-active .cfg-viewer,html body.extras-active .mobile-progress-strip{
    flex-basis:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    opacity:0;pointer-events:none;
    overflow:hidden !important;
    border-bottom-width:0;
  }
  /* v5.7.1.38 — smooth animation on flex-basis change */
  .cfg-viewer{transition:flex-basis 0.35s cubic-bezier(0.22,1,0.36,1),height 0.35s cubic-bezier(0.22,1,0.36,1),opacity 0.3s ease,border-bottom-width 0.2s;}

  /* v5.7.1.11 — Mobile Extras dashboard: icon-only HUD. Tap chip → scroll config panel to row. */
  .extras-view{padding:10px 12px;gap:6px;}
  .ev-body.ev-chips{grid-template-columns:1fr;gap:6px;}
  .ev-group-block{gap:3px;}
  .ev-chip-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));grid-auto-rows:minmax(46px,1fr);gap:4px;justify-content:start;}
  .ev-chip{min-height:46px;padding:6px 4px;gap:0;max-width:72px;}
  .ev-chip-icon{width:24px;height:24px;}
  .ev-chip-label{display:none;} /* labels hidden on mobile — icon + lamp communicate state */
  .ev-chip-lamp{width:5px;height:5px;top:4px;right:4px;}
  .ev-group-label{font-size:10px;letter-spacing:0.16em;padding-bottom:0;}
  .ev-ship-bar{padding:6px 10px;}
  .ev-ship-bar-label{font-size:10px;}
  .ev-title{font-size:18px;}
  .ev-subtitle{font-size:8px;}
  .ev-total{font-size:8px;}
  .ev-total .val{font-size:18px;}

  /* v5.7.1.1 — Incl clickable rows on mobile */
  /* v5.9.2 — incl-clickable chevron: push left on mobile so it doesn't overlap 
     the (i) info icon. Info icon is ~22px wide at right:14px padding = ~36px 
     total from right. Chevron must clear that + gap. */
  .incl-clickable::after{right:52px;width:10px;height:10px;}
  .incl-clickable:hover::after{right:48px;}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  /* v5.8.6 — KILLED the flex-row 2-col landscape layout. Was buggy and overlapping
     with viewer-hidden toggle. Mobile landscape now uses the same single-column
     stack as portrait. User can tap the eye icon to hide preview for more config
     real-estate in landscape. */
  html,body{overflow:hidden;}
  /* Landscape-specific: shrink viewer further so config has more breathing room.
     v5.9.3 — 40vh → 32vh to match the 20% shrink applied to portrait. */
  .cfg-viewer{
    flex-basis:32vh !important;
    height:32vh !important;
    min-height:32vh !important;
    max-height:32vh !important;
  }
}
@media(max-width:480px){.summary-colors{grid-template-columns:1fr;}}
.mobile-angle-tabs{display:none;}
@media print{*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}}

/* ═════════════════════════════════════════════════════════════════════════
   v6.0.6 — Rotate-to-portrait prompt for mobile/tablet landscape.
   Hidden by default. Revealed via media query (max-width:1024px AND landscape).
   Dismissable via body.hmr-rotate-dismissed class (session-scoped).
   ═════════════════════════════════════════════════════════════════════════ */
.hmr-rotate-prompt{
  display:none;
  position:fixed;inset:0;z-index:200001;
  background:var(--void-0);
  color:#fff;
  align-items:center;justify-content:center;
  padding:24px;
  animation:hmrRotateFadeIn 0.35s ease;
}
/* Tactical grid backdrop */
.hmr-rotate-prompt::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(41,181,232,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(41,181,232,0.06) 1px,transparent 1px);
  background-size:40px 40px;
}
.hmr-rotate-inner{
  position:relative;z-index:1;
  max-width:420px;
  text-align:center;
  color:var(--cyan);
}
.hmr-rotate-pre{
  font-family:var(--fm);font-size:10px;letter-spacing:0.38em;
  color:var(--orange);text-transform:uppercase;
  padding:5px 14px;border:1px solid var(--orange);
  display:inline-block;margin-bottom:24px;border-radius:2px;
}
.hmr-rotate-icon{
  display:flex;align-items:center;justify-content:center;
  width:130px;height:130px;margin:0 auto 18px auto;
  color:var(--cyan);
  filter:drop-shadow(0 0 12px rgba(41,181,232,0.4));
}
/* Phone rotates from landscape (-90deg) back to portrait (0deg) on repeat */
.hmr-rotate-phone{
  transform-origin:60px 83px;
  animation:hmrRotateSpin 2.4s cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes hmrRotateSpin{
  0%,15%{transform:rotate(-90deg);}
  55%,100%{transform:rotate(0deg);}
}
.hmr-rotate-arrow-path,.hmr-rotate-arrow-tip{
  animation:hmrRotateArrowPulse 2.4s ease-in-out infinite;
}
@keyframes hmrRotateArrowPulse{
  0%,15%{opacity:0.35;}
  30%,55%{opacity:1;}
  100%{opacity:0.35;}
}
.hmr-rotate-title{
  font-family:var(--fd);font-weight:900;font-size:28px;letter-spacing:0.04em;
  color:#fff;text-transform:uppercase;line-height:1.1;
  margin:0 0 14px 0;
  text-shadow:0 0 12px rgba(41,181,232,0.45);
}
.hmr-rotate-msg{
  font-family:var(--fb);font-size:14px;line-height:1.55;
  color:rgba(255,255,255,0.78);
  margin:0 auto 26px auto;max-width:340px;
}
.hmr-rotate-dismiss{
  background:transparent;color:var(--cyan);
  border:1px solid var(--cyan);
  padding:12px 24px;
  font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:0.18em;
  text-transform:uppercase;cursor:pointer;border-radius:2px;
  transition:all 0.2s;
  -webkit-tap-highlight-color:transparent;
}
.hmr-rotate-dismiss:hover,.hmr-rotate-dismiss:active{
  background:var(--cyan);color:var(--void-0);
}
.hmr-rotate-sub{
  font-family:var(--fm);font-size:9px;letter-spacing:0.22em;
  color:var(--void-muted);text-transform:uppercase;opacity:0.75;
  margin-top:28px;
}
@keyframes hmrRotateFadeIn{from{opacity:0;}to{opacity:1;}}

/* REVEAL: mobile AND small-tablet landscape only. Triggers when viewport
   is landscape AND width ≤1024 AND height ≤600 (combined guard so desktop
   browsers resized narrow don't trigger it). Dismissed users get
   body.hmr-rotate-dismissed which keeps it hidden for the rest of the session. */
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px){
  body:not(.hmr-rotate-dismissed) .hmr-rotate-prompt{display:flex;}
}

/* v5.7.1.37 — Combined topbar row: transparent background, vertical dividers between
   sections. Pips flex:1 on left | cycle icon | expand icon. Default state = preview OPEN
   (boat visible, caret points UP = "collapse me"). Collapsed state = preview gone,
   caret swapped for eye icon (= "bring preview back"). */
.viewer-size-ctrls{display:none;}
/* v5.9.4 — Default-hide the slashed-eye icon. Use .vsc-btn context to beat
   any generic svg display rules. Visible only when body.viewer-hidden. */
.vsc-btn .vsc-icon-eye-off{display:none;}
@media(max-width:900px){
  .cfg-panel-topbar{
    display:flex;align-items:center;gap:0;
    padding:5px 0;
    /* v5.9.2 — was background:transparent, which showed the dark cfg-body through
       as a black stripe between viewer and pips. Use panel background. */
    background:var(--paper-2) !important;
    flex-shrink:0;
    border-bottom:1px solid var(--rule);
  }
  .cfg-panel-topbar .wizard-progress{
    flex:1;
    padding:0 12px !important;
    background:transparent !important;
    border-bottom:none !important;
    border-right:1px solid var(--rule);
    gap:4px;
  }
  .viewer-size-ctrls{
    display:flex !important;gap:0;flex-shrink:0;
  }
  .vsc-btn{
    width:40px;height:28px;padding:0;
    display:flex;align-items:center;justify-content:center;
    background:transparent;
    border:none;
    color:var(--ink-4,#6a7380);
    cursor:pointer;
    transition:color 0.15s,transform 0.2s;
    -webkit-tap-highlight-color:transparent;
  }
  /* Vertical divider between the two buttons */
  #vscExpand{border-left:1px solid var(--rule);}
  .vsc-btn:hover,.vsc-btn:active{color:var(--accent);}
  body.model-enduro .vsc-btn:hover,body.model-enduro .vsc-btn:active{color:var(--orange);}
  .vsc-btn svg{width:18px;height:18px;}
  /* v5.9.4 — Eye open + eye off (slashed) icon swap. Specificity fixed: use 
     .vsc-btn context to beat the generic .vsc-btn svg sizing rule above.
     Default (preview open): vsc-icon-eye-open visible = "tap to hide".
     Collapsed (body.viewer-hidden): vsc-icon-eye-off visible = "tap to show". */
  .vsc-btn .vsc-icon-eye-open{display:none;}
  .vsc-btn .vsc-icon-eye-off{display:block;}
  body.viewer-hidden .vsc-btn .vsc-icon-eye-open{display:block;}
  body.viewer-hidden .vsc-btn .vsc-icon-eye-off{display:none;}
}

/* v5.7.1.36 — FancyBox inline content styling — TRUE FULLSCREEN.
   Zero padding, boat fills everything, pinch-zoom via touch-action:pinch-zoom.
   Kill FancyBox's own .fancybox-content padding via specific override. */
.hmr-lightbox-body{
  position:relative;
  display:flex;
  width:100vw;height:100vh;
  background:var(--void-0,#0a0f14);
  color:#fff;
  box-sizing:border-box;
  overflow:hidden;
}
.hmr-lbx-svg{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  width:100%;
  overflow:hidden;
  touch-action:pinch-zoom; /* enable native pinch-to-zoom on the boat */
}
.hmr-lbx-svg svg{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,0.5));
  transition:transform 0.2s ease;
}
.hmr-lbx-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:72px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--cyan);
  color:#fff;
  font-size:30px;font-family:var(--fm,monospace);line-height:1;
  cursor:pointer;border-radius:3px;
  transition:background 0.15s;
  -webkit-tap-highlight-color:transparent;
  z-index:2;
}
body.model-enduro .hmr-lbx-arrow{border-color:var(--orange);}
.hmr-lbx-arrow:hover{background:rgba(255,255,255,0.14);}
.hmr-lbx-arrow-prev{left:12px;}
.hmr-lbx-arrow-next{right:12px;}
.hmr-lbx-coord{
  position:absolute;
  bottom:16px;left:50%;transform:translateX(-50%);
  font-family:var(--fm,monospace);
  font-size:11px;letter-spacing:0.2em;
  color:var(--cyan);text-transform:uppercase;font-weight:700;
  background:rgba(10,14,19,0.7);
  padding:6px 14px;border-radius:2px;
  z-index:2;
}
body.model-enduro .hmr-lbx-coord{color:var(--orange);}

/* v5.7.1.36 — Kill FancyBox's default content padding so our boat truly fills screen */
.fancybox-slide--html .fancybox-content{padding:0 !important;background:transparent !important;}
.fancybox-slide--inline .fancybox-content{padding:0 !important;background:transparent !important;}
.fancybox-inner #hmrLightboxContent{width:100% !important;height:100% !important;margin:0 !important;}

@media(max-width:640px){
  .hmr-lbx-arrow{width:40px;height:60px;font-size:24px;}
  .hmr-lbx-arrow-prev{left:6px;}
  .hmr-lbx-arrow-next{right:6px;}
}

/* ============================================================================
   v6.1.6 — Compact accordion items (Add-Ons, Motor, Trailer)
   Item rendering swapped from .extra-item to .incl-item .incl-accessory.
   Warn variant retained for No Trailer; new compact warn styling below.
   ============================================================================ */
.extras-group-body .incl-accessory{margin:0 0 6px 0;}
.extras-group-body .incl-accessory:last-child{margin-bottom:0;}
.extras-group-body .incl-accessory .incl-name{font-size:13px;letter-spacing:0.04em;}
.extras-group-body .incl-accessory .incl-qty{font-size:9px;letter-spacing:0.1em;padding:3px 8px;background:var(--rule);color:var(--ink-3);border-radius:2px;text-transform:uppercase;font-weight:700;min-width:auto;}
.extras-group-body .incl-accessory.selected .incl-qty{background:var(--accent-soft);color:var(--accent);}

/* No Trailer warn variant — orange accent, matches the legacy .extra-item.warn behaviour */
.incl-accessory.warn{border-left:3px solid rgba(232,93,32,0.4);}
.incl-accessory.warn .incl-qty{background:rgba(232,93,32,0.12);color:var(--orange);}
.incl-accessory.warn.selected{border-color:var(--orange);border-left-color:var(--orange);background:rgba(232,93,32,0.06);}
.incl-accessory.warn.selected .incl-check{background:var(--orange);box-shadow:0 0 0 2px rgba(232,93,32,0.18);}
.incl-accessory.warn.selected .incl-qty{background:rgba(232,93,32,0.18);color:var(--orange);}

/* Foam pill keeps its inline rendering inside .incl-name */
.extras-group-body .incl-accessory .incl-name .foam-color-pill{font-size:7px;padding:1px 5px;margin-left:5px;}

/* v6.1.6 — Dashboard chips clickable (desktop only).
   Mobile keeps the existing chip-as-shortcut behaviour (tap → scroll to accordion row),
   so cursor/hover cues only fire above the 900px breakpoint. */
@media(min-width:901px){
  .ev-chip.ev-chip-clickable{cursor:pointer;transition:transform 0.15s ease,box-shadow 0.2s ease,border-color 0.2s ease;}
  .ev-chip.ev-chip-clickable:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(41,181,232,0.18);}
  .ev-chip.ev-chip-clickable:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
  .ev-chip.ev-chip-clickable.ev-warn:hover{box-shadow:0 4px 14px rgba(232,93,32,0.22);}
}

/* ============================================================================
   v6.3.0 — STEP RESTRUCTURE + BUILD SUMMARY MODAL
   --------------------------------------------------------------------------
   Motor moved to Step 2 (Pilot Setup) as big-square cards.
   Trailer moved to Step 7 (Shipping & Trailer) as big-square cards.
   Shipping dropdown → 2x2 big-square grid with per-option tooltips.
   Summary step removed; Build Summary modal replaces inline summary.
   ============================================================================ */

/* --- Step 02 : Pilot Setup sub-section labels (v6.3.2 — strengthened) ---
   Previous 10px mono treatment was too soft — bumped to 15px Barlow Condensed
   with an accent underline rule to match the hierarchy of surrounding step
   titles without competing with them. Same treatment reused for Step 07
   (.shipping-sub-label inherits these rules). */
.pilot-sub-label,
.shipping-sub-label{
  font-family:var(--fd);
  font-size:16px;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule-2);
  line-height:1;
}
.pilot-sub-label::before,
.shipping-sub-label::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
  flex-shrink:0;
  transform:translateY(-1px);
}
.pilot-sub-label--spaced,
.shipping-sub-label--spaced{
  margin-top:22px;
}

/* --- Motor selector (Step 02) — v6.4.0: restyled to match .hand-opt cards --- */
/* v6.5.9 — Motor rows match hand-opt sizing exactly */
.incl-list--motor .incl-item{
  padding:12px 14px;
  gap:10px;
}
.incl-list--motor .incl-name{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.incl-list--motor .incl-item.selected .incl-name{
  color:var(--accent);
}

/* v6.3.2 — .shipping-sub-label inherits styling from the unified rule above
   (shared with .pilot-sub-label). The trailer + shipping option containers
   below render as inclusions-style flat rows. */
.trailer-selector,
.shipping-options-grid{
  display:block;
}

/* ============================================================================
   BIG-SQUARE CARD — motor picker (Step 02) — v6.3.2 dark MilSpec treatment
   Rewritten from the v6.3.0 light-paper look to match .model-opt exactly:
   void-0 background, light typography, cyan accent + strong glow when active.
   ============================================================================ */
.big-square{
  position:relative;
  background:var(--void-0);
  border:1.5px solid var(--void-rule);
  border-radius:4px;
  padding:22px 16px 20px;
  cursor:pointer;
  transition:all 0.2s;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-height:150px;
  -webkit-tap-highlight-color:transparent;
  overflow:visible;
}
.big-square::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,0.04) 0%,transparent 60%);
  pointer-events:none;
  border-radius:4px;
}
.big-square:hover{
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.big-square.active{
  border-color:var(--accent);
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 0 0 4px var(--accent),
    0 8px 28px rgba(0,0,0,0.4),
    inset 0 0 0 1px var(--accent),
    0 0 32px var(--accent-soft);
}

.big-square--warn{
  border-color:rgba(204,31,31,0.3);
}
.big-square--warn:hover{
  border-color:var(--red);
}
.big-square--warn.active{
  border-color:var(--red);
  box-shadow:
    0 0 0 3px rgba(204,31,31,0.2),
    0 0 0 4px var(--red),
    0 8px 28px rgba(0,0,0,0.4),
    inset 0 0 0 1px var(--red),
    0 0 32px rgba(204,31,31,0.3);
}

.big-square-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.7);
  transition:color 0.2s;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.big-square-icon svg{width:100%;height:100%;display:block;}
.big-square:hover .big-square-icon{color:rgba(255,255,255,0.9);}
.big-square.active .big-square-icon{color:var(--accent);}
.big-square--warn.active .big-square-icon{color:var(--red);}

.big-square-label{
  font-family:var(--fd);
  font-weight:700;
  font-size:16px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#fff;
  line-height:1.1;
  padding:0 4px;
  position:relative;
  z-index:1;
}
.big-square.active .big-square-label{color:#fff;}
.big-square--warn.active .big-square-label{color:#fff;}

.big-square-sub{
  font-family:var(--fm);
  font-size:10px;
  letter-spacing:0.08em;
  line-height:1.4;
  color:rgba(255,255,255,0.55);
  padding:0 4px;
  position:relative;
  z-index:1;
}
.big-square.active .big-square-sub{
  color:var(--accent);
  font-weight:600;
}

/* Active-state badge — a small "SELECTED" strip at the bottom of the card
   so the picked option is unmistakable. */
.big-square.active::after{
  content:"✓ SELECTED";
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--fd);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--void-0);
  background:var(--accent);
  border:1px solid var(--accent);
  padding:4px 12px;
  border-radius:2px;
  white-space:nowrap;
  z-index:2;
  box-shadow:0 2px 8px rgba(41,181,232,0.35);
}
.big-square--warn.active::after{
  content:"✓ SELECTED";
  color:#fff;
  background:var(--red);
  border-color:var(--red);
  box-shadow:0 2px 8px rgba(204,31,31,0.35);
}
/* Nudge the sub-label up a touch to leave room for the SELECTED pill */
.big-square.active .big-square-sub{
  margin-bottom:14px;
}

.big-square-warn-pill{
  display:inline-block;
  font-family:var(--fm);
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:2px 8px;
  border:1px solid rgba(204,31,31,0.4);
  color:var(--red);
  background:rgba(204,31,31,0.15);
  margin-top:2px;
  position:relative;
  z-index:1;
}

/* Info (i) trigger — top-right corner, matches .model-info */
.big-square-info{
  position:absolute;
  top:8px;
  right:8px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.big-square-info .model-info-icon{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Georgia,serif;
  font-size:11px;
  font-style:italic;
  color:rgba(255,255,255,0.7);
  transition:all 0.2s;
  line-height:1;
  pointer-events:none;
}
.big-square-info:hover .model-info-icon,
.big-square-info.active .model-info-icon{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent);
}

/* Tooltip anchor — matches the model-tooltip style */
.big-square-tooltip{
  min-width:240px;
  max-width:280px;
  top:calc(100% + 8px);
  right:-6px;
  left:auto;
}
.big-square-tooltip::before{
  left:-10px;
  right:-10px;
}
.big-square-info.active .big-square-tooltip{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
@media(max-width:620px){
  .big-square-tooltip{
    right:auto;
    left:-6px;
    min-width:min(260px,calc(100vw - 60px));
    max-width:min(280px,calc(100vw - 60px));
  }
}

/* ============================================================================
   v6.3.1 — INCLUSION-ROW variants for Trailer (Step 07) and Shipping (Step 07)
   Radio rows look the same as .incl-accessory.selected but carry a subtle
   'radio' marker class for potential future styling. Warn variant adds a
   red accent for "No Trailer".
   ============================================================================ */

/* v6.3.3 — Semantic marker classes for radio vs checkbox row behaviour.
   Intentionally empty — visual inherits from .incl-accessory. Do NOT name
   these .incl-radio / .incl-check since .incl-check is an existing class
   on the checkmark SPAN and would collide. */
.incl-mode-radio,
.incl-mode-check{
  /* visual inherits from .incl-accessory */
}

/* Warn variant — used by "No Trailer" row */
.incl-item.incl-warn{
  border-color:rgba(204,31,31,0.22);
}
.incl-item.incl-warn:hover{
  border-color:var(--red);
}
.incl-item.incl-warn.selected{
  border-color:var(--red);
  background:rgba(204,31,31,0.06);
}
.incl-item.incl-warn.selected .incl-check{
  background:var(--red);
  box-shadow:0 0 0 2px rgba(204,31,31,0.15);
  border-color:var(--red);
}

/* Inline warn pill (compact, sits before the .incl-qty tag) */
.incl-warn-pill{
  flex-shrink:0;
  font-family:var(--fm);
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:2px 8px;
  border:1px solid rgba(204,31,31,0.32);
  color:var(--red);
  background:rgba(204,31,31,0.06);
  border-radius:2px;
  line-height:1.2;
}

/* ============================================================================
   BUILD SUMMARY / BUTTON BAR — 2-column layout with primary button accent
   ============================================================================ */
.build-actions-grid--two{flex-direction:column;}
.build-btn--primary{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
}
.build-btn--primary:hover{
  background:var(--accent) !important;
  filter:brightness(1.08);
}
.build-btn--primary svg{color:#fff;}

/* ============================================================================
   BUILD SUMMARY MODAL (BSM)
   A5-portrait spec sheet with Print / Save PDF / Save Image action bar.
   ============================================================================ */

/* Backdrop — dims the page under the modal. */
.bsm-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10,14,19,0.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.25s ease,visibility 0.25s ease;
  z-index:100000;
}
.bsm-backdrop.open{opacity:1;visibility:visible;}

/* Modal shell — centered, fixed, max width A5 + action bar height. */
.bsm{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0.98);
  width:min(520px,calc(100vw - 40px));
  max-height:calc(100vh - 48px);
  background:var(--void-0);
  border:1px solid var(--accent);
  border-radius:4px;
  box-shadow:0 24px 80px rgba(0,0,0,0.6);
  z-index:100001;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.25s ease,visibility 0.25s ease,transform 0.25s ease;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.bsm.open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}

.bsm-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  max-height:calc(100vh - 48px);
}

/* Close button — top-right of the modal */
.bsm-close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:3;
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,0.15);
  background:transparent;
  color:#fff;
  font-family:var(--fd);
  font-size:20px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  border-radius:2px;
  transition:all 0.15s;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.bsm-close:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* Scroll container — holds the A5 sheet. Clipping for scroll shadow effect. */
.bsm-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  padding:24px 20px;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--void-0) 0%,var(--void-1) 100%);
}

/* The sheet — paper-look container on dark modal background. */
.bsm-sheet{
  background:var(--paper);
  color:var(--ink);
  width:100%;
  max-width:460px;
  margin:0 auto;
  padding:28px 28px 22px;
  border-radius:2px;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  font-family:var(--fb);
  font-size:12px;
  line-height:1.45;
}

.bsm-loading{
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#fff;
  font-family:var(--fm);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.bsm-loading .loading-ring{
  width:20px;
  height:20px;
  border:2px solid rgba(255,255,255,0.15);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:bsmSpin 0.8s linear infinite;
}
@keyframes bsmSpin{to{transform:rotate(360deg);}}

/* Sheet header */
.bsm-sheet-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule-2);
  margin-bottom:18px;
  gap:16px;
}
.bsm-sheet-brand{
  font-family:var(--fd);
  font-weight:800;
  font-size:16px;
  letter-spacing:0.12em;
  color:var(--ink);
  line-height:1;
  margin-bottom:4px;
}
.bsm-sheet-subbrand{
  font-family:var(--fm);
  font-size:9px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--accent);
}
.bsm-sheet-head-r{text-align:right;}
.bsm-sheet-meta-k{
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-4);
  margin-bottom:2px;
}
.bsm-sheet-meta-v{
  font-family:var(--fm);
  font-size:10px;
  letter-spacing:0.06em;
  color:var(--ink-2);
}

/* Sheet boat preview */
.bsm-sheet-preview{
  width:100%;
  aspect-ratio:16/9;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:18px;
}
.bsm-sheet-preview img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.bsm-sheet-preview--empty{
  color:var(--ink-4);
  font-family:var(--fm);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

/* Spec sections */
.bsm-sheet-sect{
  margin-bottom:14px;
}
.bsm-sheet-sect-title{
  font-family:var(--fd);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  padding-bottom:6px;
  margin-bottom:8px;
  border-bottom:1px dashed var(--rule-2);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.bsm-sheet-sect-count{
  font-family:var(--fm);
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--ink-3);
}
.bsm-sheet-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:4px 0;
  font-family:var(--fb);
  font-size:12px;
}
.bsm-sheet-row-label{
  font-family:var(--fm);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.bsm-sheet-row-val{
  font-family:var(--fd);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--ink);
  text-align:right;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.bsm-sheet-row--empty{
  font-family:var(--fm);
  font-size:10px;
  color:var(--ink-4);
  font-style:italic;
  justify-content:flex-start;
}
.bsm-sheet-swatch{
  display:inline-block;
  width:14px;
  height:14px;
  border:1px solid var(--rule-2);
  border-radius:2px;
  flex-shrink:0;
}
.bsm-sheet-inc-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  font-family:var(--fb);
  font-size:12px;
  color:var(--ink-2);
}
.bsm-sheet-inc-dot{
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
  flex-shrink:0;
}

/* Sheet footer */
.bsm-sheet-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:14px;
  margin-top:6px;
  border-top:1px solid var(--rule-2);
  font-family:var(--fm);
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-4);
}

/* Action bar at the foot of the modal */
.bsm-actions{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
  background:var(--void-1);
  border-top:1px solid rgba(255,255,255,0.08);
}
.bsm-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 10px;
  background:transparent;
  border:none;
  border-right:1px solid rgba(255,255,255,0.06);
  color:#fff;
  font-family:var(--fd);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.15s,color 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.bsm-action:last-child{border-right:none;}
.bsm-action:hover{
  background:var(--accent-soft);
  color:var(--accent);
}
.bsm-action:active{
  background:rgba(41,181,232,0.18);
}
.bsm-action svg{flex-shrink:0;}

/* Scroll-lock the page body while the modal is open */
body.bsm-open{overflow:hidden;}

/* Mobile tweaks — modal should breathe on small screens */
@media(max-width:560px){
  .bsm{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 24px);
  }
  .bsm-scroll{padding:16px 12px;}
  .bsm-sheet{padding:20px 18px 16px;}
  .bsm-action{padding:14px 6px;font-size:11px;}
  .bsm-action span{display:none;}
  .bsm-action svg{width:18px;height:18px;}
}

/* ============================================================================
   PRINT — A5 portrait spec sheet isolation (v6.7.27 — rewrite)
   v6.3.0 used `body > *:not(.bsm){display:none}` which assumed .bsm was a
   direct child of <body>. In WPBakery + Total theme contexts the modal is
   nested several wrappers deep, so that selector hid every body child
   INCLUDING the wrapper containing the modal — printing produced a
   black/blank page.
   v6.7.27 switches to a visibility-based reveal: hide everything via
   visibility:hidden (preserves layout, no collapsing), then re-reveal the
   modal and its descendants. Finally pin the modal to the page rect with
   position:fixed so it lays out cleanly across A5.
   ============================================================================ */
@media print{
  @page{size:A5 portrait;margin:10mm;}

  /* Hide everything visually but keep DOM layout intact. */
  html, body{
    background:#fff !important;
    margin:0 !important;
    padding:0 !important;
  }
  body *{visibility:hidden !important;}

  /* Re-reveal the modal and everything inside it. */
  .bsm, .bsm *{visibility:visible !important;}

  /* Pin the modal to the page so it isn't trapped inside a hidden ancestor's
     box. position:fixed escapes any transformed-ancestor traps from Total. */
  .bsm{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    transform:none !important;
    opacity:1 !important;
    background:#fff !important;
    border:none !important;
    box-shadow:none !important;
    z-index:9999999 !important;
    overflow:visible !important;
  }

  /* Backdrop and modal chrome should not print. */
  .bsm-backdrop,
  .bsm-close,
  .bsm-actions{display:none !important;}

  /* Clean inner shells — strip scroll/clip, let the sheet flow naturally. */
  .bsm-inner{
    max-height:none !important;
    overflow:visible !important;
    background:#fff !important;
  }
  .bsm-scroll{
    padding:0 !important;
    background:#fff !important;
    overflow:visible !important;
    max-height:none !important;
  }

  /* The actual sheet: tighten typography for A5, force black ink. */
  .bsm-sheet{
    box-shadow:none !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
    color:#000 !important;
    font-size:10pt;
    line-height:1.4;
  }
  .bsm-sheet *{color:#000 !important;}
  .bsm-sheet-brand{color:#000 !important;}
  .bsm-sheet-sect-title{color:#000 !important;border-bottom:1px solid #333 !important;}
  .bsm-sheet-inc-dot{background:#000 !important;}
  .bsm-sheet-preview{border:1px solid #999 !important;background:#f5f5f5 !important;}
  .bsm-sheet-preview img{max-width:100% !important;height:auto !important;}
  .bsm-sheet-foot{border-top:1px solid #333 !important;color:#555 !important;}
  a, a:visited{color:#000 !important;text-decoration:none !important;}

  /* Belt-and-braces: if Total/WPBakery ever appends fixed-position elements
     (sticky CTAs, cookie banners, scroll-to-top buttons), keep them hidden. */
  .wp-admin-bar,
  #wpadminbar,
  .total-scroll-top,
  .header-wrap,
  .site-header,
  #site-navigation-wrap,
  .footer-wrap{display:none !important;}
}

/* When body.bsm-printing is active (set by JS during programmatic print
   calls), apply the same isolation in screen media too. This protects
   against print-preview UIs that don't always evaluate @media print
   correctly when triggered programmatically with very short timeouts. */
body.bsm-printing > *:not(script):not(style){visibility:hidden;}
body.bsm-printing .bsm,
body.bsm-printing .bsm *{visibility:visible;}

/* ============================================================================
   END v6.3.0
   ============================================================================ */

/* ============================================================================
   v6.3.2 — BUILD ICON COLUMN OVERLAY
   Right-side icon stack rendered inside .cfg-viewer. Shows selected motor,
   addons, trailer, accessories, shipping — icons only, no labels. Replaces
   the v6.0.0 __extras__ dashboard slide. Hidden on mobile (noise on small
   screens; user already has the wizard panel).
   ============================================================================ */
.build-icon-column{
  position:absolute;
  top:60px;
  left:52px;
  right:auto;
  z-index:4;
  pointer-events:none;
  max-height:calc(100% - 160px);
  overflow:visible;
  transition:opacity 0.25s;
}
.build-icon-column.bic-empty{
  opacity:0;
  pointer-events:none;
}
.bic-inner{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}
.bic-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  pointer-events:auto;
}
/* Single-item section renders as a single column rather than a 1x1 grid
   so the icon doesn't float awkwardly to the left */
.bic-section:has(> :only-child){
  grid-template-columns:1fr;
}
.bic-divider{
  width:30px;
  height:1px;
  background:rgba(255,255,255,0.08);
  align-self:flex-end;
  margin:1px 4px;
  pointer-events:none;
}
.bic-icon{
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,14,19,0.72);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:3px;
  color:rgba(138,154,176,0.25);
  box-shadow:none;
  opacity:0.6;
  transition:color 0.2s,border-color 0.2s,box-shadow 0.2s;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  cursor:help;
  position:relative;
  pointer-events:auto;
}
.bic-icon svg{
  width:14px;
  height:14px;
  display:block;
}

/* v6.3.3 — ACTIVE state (explicit class) — same as base but re-asserted here
   so specificity stays consistent with placeholder/negative variants */
.bic-icon--active{
  background:rgba(10,14,19,0.78);
  border-color:rgba(138,154,176,0.45);
  color:#8a9ab0;
  opacity:1;
  box-shadow:none;
}
.bic-icon--active:hover{
  border-color:rgba(138,154,176,0.65);
  color:#aabccc;
}

/* v6.3.3 — PLACEHOLDER state (unselected radio slot). Dim grey outline,
   no glow. Shows what's possible without competing visually with actives. */
.bic-icon--placeholder{
  background:rgba(10,14,19,0.4);
  border-color:rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.bic-icon--placeholder:hover{
  border-color:rgba(255,255,255,0.28);
  color:rgba(255,255,255,0.5);
  background:rgba(10,14,19,0.6);

}

/* v6.3.3 — NEGATIVE state (No Motor, No Trailer, airport/port shipping).
   Selected but visually dull slate — acknowledges the choice without
   shouting. */
.bic-icon--negative{
  background:rgba(10,14,19,0.72);
  border-color:rgba(138,155,170,0.55);
  color:rgba(200,216,228,0.75);
  box-shadow:
    0 2px 10px rgba(0,0,0,0.5),
    inset 0 0 10px rgba(90,112,128,0.2);
}
.bic-icon--negative:hover{
  border-color:rgba(200,216,228,0.85);
  color:rgba(200,216,228,0.95);
  background:rgba(10,14,19,0.85);

}

/* trailer-none gets the red treatment regardless of negative status
   because it explicitly warns (not recommended) */
.bic-icon[data-item="trailer-none"].bic-icon--negative{
  border-color:var(--red);
  color:var(--red);
  box-shadow:
    0 2px 10px rgba(0,0,0,0.5),
    inset 0 0 12px rgba(204,31,31,0.15),
    0 0 14px rgba(204,31,31,0.25);
}

/* v6.3.3 — Icon column tooltips. Desktop: hover shows label. Mobile: tap
   triggers a temporary .bic-tooltip-show class (auto-removed by JS after
   1s). Tooltip is a ::after pseudo-element reading data-tip. Positioned
   to the LEFT of the icon so it doesn't get clipped off the viewer's
   right edge. */
.bic-icon::after{
  content:attr(data-tip);
  position:absolute;
  left:calc(100% + 10px);
  right:auto;
  top:50%;
  transform:translateY(-50%);
  background:var(--void-0);
  color:#fff;
  font-family:var(--fd);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.04em;
  padding:6px 12px;
  border-radius:3px;
  border:1px solid rgba(138,154,176,0.4);
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.18s, visibility 0.18s;
  pointer-events:none;
  z-index:10;
  text-transform:uppercase;
}
.bic-icon:hover::after,
.bic-icon.bic-tooltip-show::after{
  opacity:1;
  visibility:visible;
}
/* Negative variant tooltip: cyan accent softened toward slate */
.bic-icon--negative::after{
  border-color:rgba(138,155,170,0.55);
}
.bic-icon[data-item="trailer-none"].bic-icon--negative::after{
  border-color:var(--red);
}

/* v6.3.4 — Removed bicFadeIn animation. Client spec: icons must stay put
   and only change their lit/unlit state on selection. No translate/fade
   on every render. Transitions on color/border/box-shadow (already on
   .bic-icon base rule) handle the visual state change smoothly. */
.bic-icon{animation:none;}

/* v6.3.4 — Hide entirely at and below the mobile-menu breakpoint. Total
   theme flips to hamburger at 959px. Keeping icon column aligned so it
   disappears at the same time the header compacts. Wizard panel already
   shows selected extras on mobile; the overlay would be redundant noise. */
@media(max-width:959px){
  .build-icon-column{display:none !important;}
}
/* ============================================================================
   END v6.3.2 build-icon-column
   ============================================================================ */

/* ============================================================================
   v6.3.2 — YOUR DETAILS form strengthening + checkered flag icon
   Client feedback v6.3.1: form felt too soft for the final submission step.
   Labels bumped to ink-2, inputs get thicker borders, group label + intro
   tighten up. Flag icon gets a right-margin on the submit button.
   ============================================================================ */

/* Label — was ink-4 soft grey, now ink-2 near-black with heavier weight */
.panel-section[data-step="8"] .cfg-label,
.panel-section[data-step="8"] .form-group-label{
  color:var(--ink);
  font-weight:700;
}
/* v6.7.15 — Restyle step 8 form field labels to match Barlow Condensed display
   typography used on panel-section-title (Motor Selection, Pilot Orientation,
   etc.). Previous: Share Tech Mono 11px with 0.16em tracking. New: Barlow
   Condensed 15px with 0.06em tracking — matches font family but sits below
   the 20px section titles in the hierarchy so the form reads as labeled inputs
   under a section heading, not as four stacked section headings. */
.panel-section[data-step="8"] .cfg-label{
  font-family:var(--fd);
  font-size:15px;
  letter-spacing:0.06em;
  margin-bottom:8px;
}

/* Intro copy — bump weight + contrast so it reads as a statement not a hint */
.panel-section[data-step="8"] .form-intro{
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  line-height:1.55;
  margin-bottom:22px;
}

/* Form groups — slightly firmer background + border so they read as cards */
.panel-section[data-step="8"] .form-group{
  background:var(--paper-card);
  border:1.5px solid var(--rule-2);
  box-shadow:0 1px 0 rgba(13,17,23,0.02);
  padding:18px;
}

/* Inputs — thicker border + slightly larger text so they feel committed to */
.panel-section[data-step="8"] .cfg-input,
.panel-section[data-step="8"] .cfg-textarea{
  border:1.5px solid var(--rule-2);
  font-size:15px;
  font-weight:500;
  padding:13px 15px 13px 40px;
  color:var(--ink);
}
.panel-section[data-step="8"] .form-row:not(.form-row-icon) .cfg-input,
.panel-section[data-step="8"] .cfg-textarea{
  padding-left:15px;
}
.panel-section[data-step="8"] .cfg-input:hover,
.panel-section[data-step="8"] .cfg-textarea:hover{
  border-color:var(--ink-4);
}
.panel-section[data-step="8"] .cfg-input:focus,
.panel-section[data-step="8"] .cfg-textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.panel-section[data-step="8"] .cfg-input::placeholder,
.panel-section[data-step="8"] .cfg-textarea::placeholder{
  color:var(--ink-4);
  font-weight:400;
}

/* Input icon — bump contrast so it matches the new label weight */
.panel-section[data-step="8"] .form-input-icon{
  color:var(--ink-3);
  opacity:0.9;
}
.panel-section[data-step="8"] .form-row-icon:focus-within .form-input-icon{
  color:var(--accent);
}

/* Required marker — make it louder */
.panel-section[data-step="8"] .cfg-label .req{
  color:var(--red);
  font-size:14px;
  font-weight:800;
  margin-left:3px;
}

/* Checkered flag icon — spacing inside Submit Enquiry buttons (wizard-nav
   button AND desktop CTA). */
.wnav-flag{
  flex-shrink:0;
  margin-left:8px;
  margin-right:0;
  vertical-align:middle;
  display:inline-block;
  order:2;
}
.wnav-next.wnav-submit .wnav-flag{
  color:#fff;
}
.btn-submit-sm .wnav-flag{
  color:inherit;
}

/* ============================================================================
   END v6.3.2 form strengthening
   ============================================================================ */

/* v6.5.4 — Dashboard icon column: fixed layout, never collapses or reflows.
   All sections always present; icons simply lit or dim. */
.build-icon-column{pointer-events:none;}
.bic-inner{pointer-events:auto;}
.bic-icon{transition:color 0.2s,border-color 0.2s,box-shadow 0.2s;transform:none !important;}

/* v6.5.4 — Mobile: collapse viewer when step 8 (Your Details) is active */
@media(max-width:900px){
  .cfg-panel.wizard-mode .panel-section[data-step="8"].step-active ~ * .cfg-viewer,
  body.wizard-step-8 .cfg-viewer{
    height:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    flex-shrink:0 !important;
  }
}

/* v6.5.9 — Step 8: hide standard wizard-nav, show inline full-width nav instead */
.step8-nav{display:none;}
body.wizard-step-8 .panel-section[data-step="8"] .step8-nav{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:8px;
  margin-top:12px;
}
.step8-nav-back{
  padding:16px;
  font-family:var(--fd);font-weight:700;font-size:13px;
  letter-spacing:0.1em;text-transform:uppercase;
  background:transparent;border:1.5px solid var(--rule-2);
  color:var(--ink-2);border-radius:3px;cursor:pointer;
  transition:all 0.2s;
}
.step8-nav-back:hover{border-color:var(--ink-3);color:var(--ink);}
.step8-nav-submit{
  padding:16px;
  font-family:var(--fd);font-weight:800;font-size:13px;
  letter-spacing:0.12em;text-transform:uppercase;
  background:var(--orange);border:none;color:#fff;
  border-radius:3px;cursor:pointer;
  box-shadow:0 4px 14px rgba(232,93,32,0.35);
  transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.step8-nav-submit:hover{filter:brightness(1.08);}

/* v6.5.9 — Step 8: hide default wizard-nav, show inline full-width Back+Submit */
.build-actions-nav{display:none;}
body.wizard-step-8 .build-actions-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.build-actions-nav .ban-back{
  padding:16px;font-family:var(--fd);font-weight:700;font-size:13px;
  letter-spacing:0.12em;text-transform:uppercase;
  background:var(--paper-card);border:1.5px solid var(--rule-2);
  color:var(--ink-2);border-radius:3px;cursor:pointer;transition:all 0.2s;
}
.build-actions-nav .ban-back:hover{border-color:var(--ink-4);color:var(--ink);}
.build-actions-nav .ban-submit{
  padding:16px;font-family:var(--fd);font-weight:700;font-size:13px;
  letter-spacing:0.12em;text-transform:uppercase;
  background:var(--orange);border:none;
  color:#fff;border-radius:3px;cursor:pointer;transition:all 0.2s;
  box-shadow:0 4px 14px rgba(232,93,32,0.35);
}
.build-actions-nav .ban-submit:hover{filter:brightness(1.08);}

/* v6.6.0 — Step 8 four-button action stack */
.step8-actions{display:none;}
.cfg-panel.wizard-mode .panel-section[data-step="8"].step-active ~ * .step8-actions,
.cfg-panel.wizard-mode .panel-section[data-step="8"] .step8-actions{
  display:flex;flex-direction:column;gap:8px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);
}
.s8-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 20px;
  font-family:var(--fd);font-weight:700;font-size:13px;
  letter-spacing:0.1em;text-transform:uppercase;
  border-radius:3px;cursor:pointer;border:1.5px solid var(--rule-2);
  transition:all 0.2s;-webkit-tap-highlight-color:transparent;
  background:transparent;color:var(--ink-2);
}
.s8-btn .btn-icon{flex-shrink:0;}
.s8-btn--ghost{color:var(--ink-3);border-color:var(--rule);}
.s8-btn--ghost:hover{border-color:var(--ink-3);color:var(--ink);}
.s8-btn--outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.s8-btn--submit{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:800;}
.s8-btn--submit:hover{filter:brightness(1.08);}
body.model-atomic .s8-btn--submit{background:var(--accent);border-color:var(--accent);}
body.model-atomic .s8-btn--submit:hover{filter:brightness(1.08);}
/* Hide the old duplicate nav rows on step 8 */
.cfg-panel.wizard-mode .panel-section[data-step="8"].step-active .build-actions-nav,
.cfg-panel.wizard-mode .panel-section[data-step="8"].step-active .step8-nav{display:none !important;}
/* Hide cfg-cta and wizard-nav on step 8 — buttons live inline */
body.wizard-step-8 .cfg-cta{display:none !important;}

/* v6.6.6 — Required field error state on wizard validation */
.req-label{
  font-family:var(--fm);font-size:9px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--red);
  margin-left:6px;font-weight:700;
  opacity:0;transition:opacity 0.2s;
  pointer-events:none;
}
.req-error .req-label{opacity:1;}
.req-error.pilot-sub-label::before,
.req-error.shipping-sub-label::before{
  background:var(--red);
  box-shadow:0 0 6px rgba(204,31,31,0.6);
}
.req-error .hand-opt,
.req-error ~ .hand-selector .hand-opt,
.req-error ~ * .incl-item{
  border-color:rgba(204,31,31,0.35);
}
@keyframes hmrReqPulse{
  0%,100%{border-color:rgba(204,31,31,0.35);}
  50%{border-color:var(--red);box-shadow:0 0 0 2px rgba(204,31,31,0.2);}
}
.req-error-pulse{animation:hmrReqPulse 0.7s ease 2;}

/* ============================================================================
   v6.7.19 — ACCESSORY LIGHTBOX
   Standalone image lightbox for accessory previews. Currently wired to the
   Boat Cover accessory; extend via ACCESSORY_LIGHTBOX_IMAGES in the JS.
   ============================================================================ */
.incl-lightbox{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border:1px solid var(--rule-2);border-radius:50%;
  background:#fff;color:var(--ink-3);transition:all 0.2s;
  margin-right:2px;
}
.incl-lightbox:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
.incl-lightbox svg{pointer-events:none;}

#hmrAccessoryLightbox{position:fixed;inset:0;z-index:9999998;display:flex;align-items:center;justify-content:center;}
#hmrAccessoryLightbox .halb-backdrop{position:absolute;inset:0;background:rgba(5,8,11,0.88);backdrop-filter:blur(6px);cursor:zoom-out;}
#hmrAccessoryLightbox .halb-frame{position:relative;max-width:min(92vw,1200px);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;}
#hmrAccessoryLightbox .halb-img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;border:1px solid rgba(41,181,232,0.4);box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 0 1px rgba(41,181,232,0.15);}
#hmrAccessoryLightbox .halb-caption{font-family:var(--fd,'Barlow Condensed',sans-serif);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#fff;font-size:13px;padding:4px 0;}
#hmrAccessoryLightbox .halb-close{
  position:absolute;top:-44px;right:-4px;width:36px;height:36px;
  background:var(--red,#CC1F1F);color:#fff;border:0;border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.15s ease,background 0.15s ease;
}
#hmrAccessoryLightbox .halb-close:hover{transform:scale(1.08);background:#E85D20;}
@media(max-width:600px){
  #hmrAccessoryLightbox .halb-close{top:-40px;right:0;width:32px;height:32px;font-size:20px;}
  #hmrAccessoryLightbox .halb-frame{max-width:94vw;}
}

/* ============================================================================
   v6.7.28 — TOOLTIP HARDENING (mobile)
   v6.7.28a — Refined after first test: tooltips were still being overlapped
   by panel chrome (item rows, section headers) because position:absolute kept
   them trapped in their tiny anchor's stacking context. Lifted to position:
   fixed bottom-sheet on mobile, matching the existing .model-tooltip pattern
   from line 1317. Also shrunk close button from 28→22px on mobile.
   ============================================================================ */

/* Close button — visible inside any pinned tooltip on touch. JS injects/removes
   the .cfg-tip-close element on toggleInfoTooltip pin/unpin. */
.cfg-tip-close{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--accent);
  background:var(--accent-soft);
  color:var(--accent);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1;
  font-weight:400;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:all 0.18s;
  z-index:2;
  -webkit-tap-highlight-color:transparent;
}
.cfg-tip-close:hover,
.cfg-tip-close:focus-visible{
  background:var(--accent);
  color:var(--void-0);
  outline:none;
}
/* Make room for the close button by adding right-padding to tooltip headers
   when the close button is present. Targets all four tooltip variants. */
.comp-tooltip:has(.cfg-tip-close) .comp-tooltip-label,
.extra-tooltip:has(.cfg-tip-close) .extra-tooltip-label,
.incl-tooltip:has(.cfg-tip-close) .incl-tooltip-label,
.model-tooltip:has(.cfg-tip-close) .model-tooltip-title{
  padding-right:30px;
}

/* Mobile: lift ALL tooltip types to a fixed-position bottom-sheet, matching
   the existing .model-tooltip pattern (line 1317). This escapes any panel
   scroll context, sticky section header, or item row that was visually
   overlapping the tooltip in the previous z-index-only approach. */
@media(max-width:900px){
  .comp-tooltip,
  .extra-tooltip,
  .incl-tooltip,
  .model-tooltip,
  .panel-section-header .incl-tooltip{
    position:fixed !important;
    top:auto !important;
    bottom:80px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    transform:none !important;
  }
  /* Cancel the runtime _hmrClampTooltip nudge on mobile — fixed bottom-sheet
     doesn't need horizontal repositioning. */
  .comp-tooltip,
  .extra-tooltip,
  .incl-tooltip,
  .model-tooltip{
    --hmr-tip-nudge:0 !important;
  }
  /* Hide the small arrow/notch (.tooltip::before) on mobile since the sheet
     no longer points at any particular (i) icon — it's a global overlay now. */
  .comp-tooltip::before,
  .extra-tooltip::before,
  .incl-tooltip::before,
  .model-tooltip::before{
    display:none !important;
  }
  /* Tap-anywhere-outside is the default close, plus the explicit × button.
     Adding a subtle scrim hint by deepening the tooltip background opacity
     so users see it clearly against the panel content behind it. */
  .comp-tooltip,
  .extra-tooltip,
  .incl-tooltip,
  .model-tooltip{
    box-shadow:0 12px 40px rgba(0,0,0,0.7) !important;
  }
}
/* ============================================================================
   END v6.7.28 TOOLTIP HARDENING
   ============================================================================ */

/* ============================================================================
   v6.7.29 — Mobile pin section-level (i) info slot
   The mobile pinned section header (panel-section-pin) now mirrors the
   section-level (i) tooltip from the desktop section header for parity.
   JS clones the original .incl-info into #pspInfoSlot whenever the active
   section has one (Standard Inclusions, Optional Extras, Accessories,
   Shipping & Trailer). The cloned tooltip uses the v6.7.28 fixed bottom-
   sheet positioning automatically since it shares the .incl-tooltip class.
   ============================================================================ */
@media(max-width:900px){
  .psp-info-slot{
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
    margin-left:auto;
  }
  .psp-info-slot:empty{
    display:none;
  }
  /* Pin layout: title flex-grows, info-slot pushes to the right via margin-
     left:auto, step-indicator sits at the right edge. */
  .panel-section-pin .psp-title{
    flex-grow:0;
    flex-shrink:1;
    min-width:0;
  }
  /* Cloned (i) inside the pin: keep it visually in line with title baseline. */
  .psp-info-slot .incl-info{
    position:relative;
    width:22px;
    height:22px;
    margin:0 8px 0 0;
  }
  .psp-info-slot .incl-info-icon{
    width:18px;
    height:18px;
    font-size:11px;
  }
}
/* ============================================================================
   END v6.7.29
   ============================================================================ */