/* ======================================================================
   FILE: /public_html/templates/shaper_helixultimate/css/configurator.css
   AvaMoment · Configurator Base (v20250906-1 + avm canonical v20251004-05)
   Target: Desay/Novastar Configurators
   ====================================================================== */


/* ======================================================================
   0) LEGACY-STYLE HELPERS (scoped; final)
   ====================================================================== */
.desay-config-root .config-toolbar .price-range{
  margin-left:auto;           /* pin right */
  font-size:14px;
  font-weight:400;
  opacity:.9;
  cursor:default;
}
.desay-config-root .config-toolbar .price-range.cad{ color:#ff6600; }
.desay-config-root .variant-block .priceNumber.cad{ color:#ff6600; }
/* Do not define global .pitches or .icon-btn here. */


/* ======================================================================
   1) OUTER WRAP
   ====================================================================== */
.desay-config-root .fam500-wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;  /* left form + 2 columns of cards */
  gap:28px;
  padding:12px;
  border-radius:10px;
  background:#fff;
  -webkit-backdrop-filter:saturate(1.05) blur(1.5px);
  backdrop-filter:saturate(1.05) blur(1.5px);
  align-items:start;                    /* top-align all columns */
  isolation:isolate;
}


/* ======================================================================
   2) LEFT GRID (inputs/info)
   ====================================================================== */
.desay-config-root .fam500-left{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.desay-config-root .fam500-row{ grid-column:1 / -1; display:contents; }
.desay-config-root .span2{ grid-column:span 2; }

.desay-config-root .box{ display:flex; flex-direction:column; }
.desay-config-root .box label{
  font-size:12px;
  color:#777;
  margin-bottom:6px;
}

/* unified input height for all fields (editable & readonly) */
.desay-config-root .inp{
  box-sizing:border-box;
  width:100%;
  height:48px;
  padding:12px 16px;
  border:1px solid #e9ecef;
  border-radius:8px;
  background:#fff;
  font:inherit;
  line-height:1;
}
.desay-config-root .inp[readonly]{ background:#fafafa; }

/* panels row (500×1000 / 500×750 / 500×500 / custom) */
.desay-config-root .panels{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.desay-config-root .panels .inp[readonly]{ background:#fff; }

/* generic 4-up rows */
.desay-config-root .four{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

/* toolbar line (currency toggle row) */
.desay-config-root .config-toolbar{
  grid-column:1 / -1;
  margin:2px 0 0;
}


/* ======================================================================
   3) PITCH LINKS
   ====================================================================== */
.desay-config-root .pitches{
  grid-column:1 / -1;
  margin:4px 0 8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

/* baseline link */
.desay-config-root .pitches .pitch-link{
  position:relative;
  background:transparent;
  border:0;
  padding:0 2px 12px;          /* space for the icon underline */
  cursor:pointer;
  font:inherit;
  font-weight:400;
  letter-spacing:.01em;
  text-decoration:none;
}
.desay-config-root .pitches .sep{
  opacity:.45;
  margin:0 2px;
  user-select:none;
  pointer-events:none;
}

/* FA schlix "underline" (centered under active link) */
.desay-config-root .pitches .pitch-link i.fab.fa-schlix{
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%) translateY(4px);
  font-size:12px;
  line-height:1;
  opacity:0;
  color:currentColor;          /* inherit link color */
  pointer-events:none;
  transition:opacity .16s ease, transform .18s ease;
}

/* active state */
.desay-config-root .pitches .pitch-link.active .txt{ color:#3366FF; }
.desay-config-root .pitches .pitch-link.active i.fab.fa-schlix{
  color:#3366FF;
  opacity:.95;
  transform:translateX(-50%) translateY(0);
}

/* hover hint */
.desay-config-root .pitches .pitch-link:hover i.fab.fa-schlix{
  color:#3366FF;
  opacity:.7;
}

/* keyboard focus */
.desay-config-root .pitches .pitch-link:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
  border-radius:6px;
}


/* ======================================================================
   4) VARIANT CARDS
   ====================================================================== */
.desay-config-root .variant-results{ align-self:start; }
.desay-config-root .variant-results .variant-block{
  position:relative; /* for the select-chip */
  background:#fff;
  border-radius:10px;
  padding:18px;
  margin-bottom:18px;
  color:#222;
  /* drop shadow + subtle inner stroke for crisp edges */
  box-shadow:0 10px 28px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.07) inset;
}
.desay-config-root .variant-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:1rem;
  font-weight:400;
  letter-spacing:.01em;
  margin-bottom:6px;
  color:#111;
}
.desay-config-root .variant-divider{
  border:0;
  border-top:1px solid #e9ecef;
  border-top-color:rgba(0,0,0,.08);     /* slightly crisper divider */
  margin:10px 0 12px;
}
.desay-config-root .variant-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:6px 0;
  color:#333;
  font-size:.95em;
  line-height:1.25;
}
.desay-config-root .variant-line.total{ font-weight:600; }

/* CAD price color — works for both .priceNumber and .value spans */
.desay-config-root .priceNumber.cad,
.desay-config-root .variant-results .value.cad { color:#ff6600; }
#specifications .priceNumber.cad { color:#ff6600; }


/* ======================================================================
   5) VARIANT SELECT CHIP
   ====================================================================== */
.desay-config-root .variant-block .select-chip{
  position:absolute;
  top:10px; right:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  border-radius:999px;
  cursor:pointer;
  background:#f5f5f7;
  border:1px solid #e5e7eb;
  user-select:none;
}
.desay-config-root .variant-block .select-chip input[type="checkbox"]{
  position:absolute; opacity:0; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.desay-config-root .variant-block.selected{
  outline:2px solid rgba(51,102,255,.65);
  outline-offset:2px;
}
.desay-config-root .variant-block.selected .select-chip{
  background:#e6eeff;
  border-color:#bcd0ff;
}
.desay-config-root .variant-block .select-chip .box{
  width:14px;
  height:14px;
  border:1px solid #9aa3af;
  border-radius:3px;
  display:inline-block;
}
.desay-config-root .variant-block.selected .select-chip .box{
  background:#3366ff;
  border-color:#3366ff;
  box-shadow:inset 0 0 0 2px #fff;
}


/* ======================================================================
   6) TOOLBAR
   ====================================================================== */
.desay-config-root .config-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.desay-config-root .config-toolbar .tool{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 4px;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
}
.desay-config-root .config-toolbar .tool::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background:#3366FF;
  transform:scaleX(0);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.desay-config-root .config-toolbar .tool:hover::after,
.desay-config-root .config-toolbar .tool.active::after{
  transform:scaleX(1);
  opacity:1;
}
.desay-config-root .config-toolbar .separator{ opacity:.65; margin:0 2px; }
.desay-config-root .config-toolbar .tool:hover .tool-ico{ transform:translateY(-1px); }

/* Currency toggle (scoped to configurator toolbar) */
.desay-config-root .config-toolbar .toggleCurrency{
  background:transparent;
  border:0;
  padding:0 3px;
  margin:0;
  font:inherit;
  line-height:1;
  color:inherit;
  cursor:pointer;
}
.desay-config-root .config-toolbar .toggleCurrency .usd-part,
.desay-config-root .config-toolbar .toggleCurrency .cad-part{
  font-size:14px;
  text-decoration:none !important;
}
.desay-config-root .config-toolbar .toggleCurrency .usd-part{ color:#3366FF; }
.desay-config-root .config-toolbar .toggleCurrency .cad-part{ color:#ff6600; }
.desay-config-root .config-toolbar .toggleCurrency .fa-right-left{
  color:#3366FF;
  font-size:9px;
  padding:0 3px;
  vertical-align:middle;
}
/* never underline or outline on interaction */
.desay-config-root .config-toolbar .toggleCurrency .usd-part:hover,
.desay-config-root .config-toolbar .toggleCurrency .cad-part:hover,
.desay-config-root .config-toolbar .toggleCurrency .usd-part.active,
.desay-config-root .config-toolbar .toggleCurrency .cad-part.active,
.desay-config-root .config-toolbar .toggleCurrency:focus,
.desay-config-root .config-toolbar .toggleCurrency:focus-visible{
  text-decoration:none !important;
  outline:none;
}

/* Toolbar utility buttons (print/email) */
.desay-config-root .config-toolbar .tool-btn{
  background:transparent;
  border:0;
  padding:0 3px;
  margin:0;
  font:inherit;
  line-height:1;
  color:inherit;
  cursor:pointer;
}
.desay-config-root .config-toolbar .tool-btn .tool-ico{
  color:#3366FF;
  padding:0 3px;
  vertical-align:middle;
  transition:transform .12s ease, color .12s ease;
}
.desay-config-root .config-toolbar .tool-btn:hover,
.desay-config-root .config-toolbar .tool-btn:focus{
  color:#ff6600;
  outline:none;
}
.desay-config-root .config-toolbar .tool-btn:hover .tool-ico,
.desay-config-root .config-toolbar .tool-btn:focus .tool-ico{
  color:#ff6600;
  transform:translateY(-1px);
}

/* Focus-visible cue for keyboard users (scoped) */
.desay-config-root .config-toolbar .tool-btn:focus-visible,
.desay-config-root .config-toolbar #printQuoteBtn:focus-visible,
.desay-config-root .config-toolbar #emailQuoteBtn:focus-visible{
  outline:2px solid rgba(51,102,255,.65);
  outline-offset:2px;
  border-radius:6px;
}

/* Small helper icon preceding price range */
.desay-config-root .config-toolbar .hint-ico{
  color:#3366FF;
  padding:0 3px;
  font-size:12px;
  vertical-align:middle;
  transition:color .12s ease;
}
.desay-config-root .config-toolbar .hint-ico:hover{ color:#ff6600; }

/* ==== TOOLBAR BUTTON RESET (override theme/UA) ==== */
.desay-config-root .config-toolbar button.tool-btn,
.desay-config-root .config-toolbar #printQuoteBtn,
.desay-config-root .config-toolbar #emailQuoteBtn{
  display:inline-flex;
  align-items:center;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 3px;
  margin:0;
  font:inherit;
  line-height:1;
  color:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  outline:none;
}
.desay-config-root .config-toolbar button.tool-btn:focus,
.desay-config-root .config-toolbar button.tool-btn:focus-visible{
  outline:none;
}


/* ======================================================================
   7) RESPONSIVE & INPUT HINTS
   ====================================================================== */
@media (max-width:1080px){
  .desay-config-root .fam500-wrap{ grid-template-columns:1fr; }
}

/* input attention hints */
.desay-config-root .inp::placeholder{ color:#ff6600; opacity:.95; }
.desay-config-root .inp:placeholder-shown{ border-color:#ff6600; }

/* animation: empty field pulse */
@keyframes hintPulse{
  0%   { box-shadow:0 0 0 0 rgba(255,102,0,.35); }
  70%  { box-shadow:0 0 0 10px rgba(255,102,0,0); }
  100% { box-shadow:0 0 0 0 rgba(255,102,0,0); }
}
.desay-config-root .inp:placeholder-shown:not(:focus){
  animation:hintPulse 1.2s ease-in-out 2;
}

/* totals emphasis */
.desay-config-root .variant-line.total .value{ font-weight:600; }



/* ======================================================================
   8) QUOTE SHEET (screen + print)
   File: /public_html/templates/shaper_helixultimate/css/configurator.css
   ====================================================================== */

/* --- Screen styles (unchanged) --- */
#quoteSheetRoot{ display:none; }
#quoteSheetRoot .sheet{ background:#fff; color:#111; padding:18px 20px; }
#quoteSheetRoot .h1{ font-size:20px; font-weight:700; margin:0 0 8px; }
#quoteSheetRoot .meta{ font-size:12px; opacity:.9; margin-bottom:12px; }
#quoteSheetRoot .grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
#quoteSheetRoot .cell{
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-size:12px;
  background:#fff;
}
#quoteSheetRoot .label{ opacity:.65; display:block; font-size:11px; margin-bottom:2px; }
#quoteSheetRoot .qtable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:12px;
  font-size:12px;
}
#quoteSheetRoot .qtable th,
#quoteSheetRoot .qtable td{
  border:1px solid #e5e7eb;
  padding:8px 10px;
  vertical-align:top;
}
#quoteSheetRoot .qtable th{ text-align:left; background:#f7f7f9; }
#quoteSheetRoot .qtable td.money{ text-align:right; font-weight:700; white-space:nowrap; }

/* --- Print isolation (keep) --- */
@media print{
  @page{ margin:12mm; }
  body.print-mode > *:not(#quoteSheetRoot){ display:none !important; }
  body.print-mode #quoteSheetRoot{
    display:block !important;
    position:fixed; inset:0;
    background:#fff;
    z-index:999999;
  }
  body.print-mode *{ visibility:hidden !important; }
  body.print-mode #quoteSheetRoot,
  body.print-mode #quoteSheetRoot *{ visibility:visible !important; }
}

/* --- Print visual overrides (stable grid; white headers; zebra rows) --- */
@media print{
  html, body{
    -webkit-print-color-adjust:exact;
            print-color-adjust:exact;
    color:#111 !important;
    background:#fff !important;
  }

  /* Cards / summary blocks */
  body.print-mode #quoteSheetRoot .cell{
    background:#fff !important;
    border:1px solid #d9dde3 !important;
    border-radius:3mm !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    page-break-inside:avoid !important;
    padding:3mm 4mm !important;
  }
  body.print-mode #quoteSheetRoot .label{
    margin:0 0 1.5mm 0 !important;
    font:700 10pt Arial, Helvetica, sans-serif !important;
    color:#111 !important;
    opacity:1 !important;
  }
  /* keep values on one line to avoid ragged pairings */
  body.print-mode #quoteSheetRoot .cell *{ white-space:nowrap !important; }

  /* Table: collapse grid, fixed layout, white headers */
  body.print-mode #quoteSheetRoot .qtable{
    width:100% !important;
    border-collapse:collapse !important;
    border-spacing:0 !important;
    table-layout:fixed !important;
    margin-top:6mm !important;
  }
  body.print-mode #quoteSheetRoot .qtable thead th{
    background:#fff !important;              /* remove tint for paper */
    font:700 10pt Arial, Helvetica, sans-serif !important;
    color:#111 !important;
    padding:3.2mm 4mm !important;
    border:1px solid #d9dde3 !important;
    text-align:left !important;
    white-space:nowrap !important;
  }
  body.print-mode #quoteSheetRoot .qtable tbody td{
    font:400 10pt Arial, Helvetica, sans-serif !important;
    padding:3mm 4mm !important;
    border:1px solid #e5e7eb !important;
    white-space:nowrap !important;
    vertical-align:middle !important;
  }
  /* Zebra on body rows only (very light) */
  body.print-mode #quoteSheetRoot .qtable tbody tr:nth-child(odd) td{
    background:#fbfbfd !important;
  }

  /* Currency column: align left for consistency with email */
  body.print-mode #quoteSheetRoot .qtable td.money{
    text-align:left !important;
    font-weight:700 !important;
  }

  /* Show destination URL on paper */
  body.print-mode #quoteSheetRoot a[href^="http"]:after{
    content:" (" attr(href) ")" !important;
    font:9pt Arial, Helvetica, sans-serif !important;
    color:#666 !important;
  }

  /* Page-break hygiene */
  body.print-mode #quoteSheetRoot .grid,
  body.print-mode #quoteSheetRoot .qtable thead{ page-break-after:avoid !important; }
  body.print-mode #quoteSheetRoot .qtable tr{ page-break-inside:avoid !important; }
}


/* ======================================================================
   9) LETTERBOX CONTROL (Helix sections)
   ====================================================================== */
.sppb-section .desay-config-root#configurator,
.sppb-row-container .desay-config-root#configurator,
.sppb-row .desay-config-root#configurator,
.sppb-container .desay-config-root#configurator {
  margin-top: -32px !important;   /* adjust if your section padding differs */
  margin-bottom: -32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ======================================================================
   10) TEXT DECORATION
   ====================================================================== */
.desay-config-root .pitches .pitch-link.active {
  xtext-decoration: underline;
  xtext-underline-offset: .25em;
}
.desay-config-root .pitches .sep { margin: 0 .5rem; opacity: .5; }
.desay-config-root .pitches .pitch-link:first-child .fa-ban { color: #2166f3; }













/* ======================================================================
   12) AVM CANONICAL: VARIANT CARD UI (avm-*)
   ====================================================================== */

/* default RT tint token */
.desay-config-root{ --avm-card-bg: rgba(255,102,0,.025); }

/* card shell (force over legacy .variant-block bg:#fff) */
.desay-config-root .variant-results .variant-block.avm-card,
.desay-config-root .avm-card{
  position: relative;
  background: var(--avm-card-bg) !important;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  color: #222;
  box-shadow: 0 10px 28px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.07) inset;
}

/* title + divider */
.desay-config-root .avm-card__title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  

  
  font-size:1rem; font-weight:400; letter-spacing:.01em; margin-bottom:6px; color:#111;
}
.desay-config-root .avm-divider{ border:0; border-top:1px solid rgba(0,0,0,.08); margin:10px 0 12px; }

/* subgroup divider + total rule + overload hint */
.desay-config-root .avm-subhr{ border:0; border-top:1px solid #eceff3; margin:.35rem 0 !important; }
.desay-config-root .avm-divider-total{ border:0; border-top:1px dashed #e5e7eb; margin:.55rem 0 .25rem !important; }
.desay-config-root .avm-line--total{ font-weight:600; }
.desay-config-root .inp.over-budget{ color:#ff6600; border-color:#ff6600; }

/* ======================================================================
   13) AVM CANONICAL: TOOLBAR (compact)
   ====================================================================== */
.desay-config-root .avm-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 4px; padding:0; }
.desay-config-root .avm-toolbtn{ display:inline-flex; align-items:center; background:transparent; border:0; padding:0 2px; line-height:1; cursor:pointer; }
.desay-config-root .avm-toolbtn .ico{ font-size:14px; color:#3366FF; transition:transform .12s ease, color .12s ease; }
.desay-config-root .avm-toolbtn:hover .ico{ color:#ff6600; transform:translateY(-1px); }
.desay-config-root .avm-currency{ background:transparent; border:0; padding:0 2px; display:inline-flex; align-items:center; }
.desay-config-root .avm-currency__usd{ color:#3366FF; }
.desay-config-root .avm-currency__cad{ color:#ff6600; }
.desay-config-root .avm-currency__swap{ color:#3366FF; font-size:9px; padding:0 3px; }
.desay-config-root .avm-price-range{ margin-left:auto; font-size:13px; opacity:.9; }

/* ======================================================================
   14) AVM CANONICAL: CHASSIS PILLS (fit all)
   ====================================================================== */
.desay-config-root .avm-pills{
  display:flex; align-items:center; flex-wrap:wrap;
  column-gap:.16rem; row-gap:0; margin:4px 0 8px;
}
.desay-config-root .avm-pills .pitch-link{ margin:0 .16rem; padding:0; }
.desay-config-root .avm-pills .sep{ margin:0 .12rem; opacity:.55; }

/* ======================================================================
   15) AVM CANONICAL: LINES (uniform spacing — matches “sending”)
   ====================================================================== */

/* kill container gap */
.desay-config-root .avm-card .variant-body{ gap:0; }

/* row layout; remove legacy left indent */
.desay-config-root .variant-results .variant-line{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:0 !important; column-gap:0 !important;
  padding:.15rem .5rem; margin:2px 0 !important; padding-left:0 !important;
  grid-template-columns:none !important;
}
.desay-config-root .variant-results .variant-line .line-left{
  display:inline-flex !important; align-items:center; gap:.45rem !important; margin:0 !important;
}

/* hover affordance on names */
.desay-config-root .variant-results .variant-line .line-left .line-name{ cursor:pointer; transition:color .12s ease; }
.desay-config-root .variant-results .variant-line .line-left .line-name:hover{ color:#ff6600; }

/* quantity capsule ( + · − ) */
.desay-config-root .variant-results .variant-line .line-left .avm-qty{
  display:inline-flex; align-items:center; gap:8px;
  padding:3px 6px; border:1px solid #e5e7eb; border-radius:999px; background:#fff;
}
.desay-config-root .variant-results .variant-line .line-left .avm-qty .sep{ opacity:.55; }
.desay-config-root .variant-results .variant-line .line-left .avm-qty i{
  font-size:13px; line-height:1; cursor:pointer; transition:transform .12s ease, color .12s ease;
}
.desay-config-root .variant-results .variant-line .line-left .avm-qty i:hover{ color:#3366ff; transform:translateY(-1px); }

/* ======================================================================
   16) AVM CANONICAL: PRICES (typography)
   ====================================================================== */
.desay-config-root .avm-price .priceNumber{ font-variant-numeric:tabular-nums; }
.desay-config-root .avm-price .priceNumber.cad{ color:#ff6600; }

/* ======================================================================
   17) AVM CANONICAL: PREVIEW PANE (4:3)
   ====================================================================== */
.desay-config-root .avm-preview{
  grid-column:1 / -1;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  padding:8px;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.desay-config-root .avm-preview img{ max-width:100%; max-height:100%; display:block; object-fit:contain; }
.desay-config-root .avm-preview .hint{ font-size:13px; color:#888; }

/* ======================================================================
   18) AVM CANONICAL: MISC
   ====================================================================== */
.desay-config-root a{ text-decoration:none; }




















/* ======================================================================
   NovaStar H · UI parity with Desay (RT) — v2025-10-05-019
   Scope: .desay-config-root
   Changes:
     • Adopt Desay RT "pitches" styles (icon position, spacing, blue color)
     • Remove underline persistence on chassis pills
     • Restore blue color for toolbar hint (BoC/rate) icon
     • Keep compact variant lines and totals HR
     • Add subtitle styling under each variant card heading
     • Preview: no hint text; blank image on load
   ====================================================================== */

/* ---- Outer wrap (unchanged from Desay RT) ---- */
.desay-config-root .fam500-wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:28px;
  padding:12px;
  border-radius:10px;
  background:#fff;
  -webkit-backdrop-filter:saturate(1.05) blur(1.5px);
  backdrop-filter:saturate(1.05) blur(1.5px);
  align-items:start;
  isolation:isolate;
}

/* ---- Toolbar: price-range + hint icon color (BoC icon stays blue) ---- */
.desay-config-root .config-toolbar{ grid-column:1 / -1; margin:2px 0 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.desay-config-root .config-toolbar .price-range{ margin-left:auto; font-size:14px; font-weight:400; opacity:.9; cursor:default; }
.desay-config-root .config-toolbar .price-range.cad{ color:#ff6600; }
.desay-config-root .config-toolbar .tool-btn{ background:transparent; border:0; padding:0 3px; line-height:1; cursor:pointer; }
.desay-config-root .config-toolbar .tool-btn .tool-ico{ color:#3366FF; transition:transform .12s ease, color .12s ease; }
.desay-config-root .config-toolbar .tool-btn:hover .tool-ico{ color:#ff6600; transform:translateY(-1px); }
.desay-config-root .config-toolbar .toggleCurrency{ background:transparent; border:0; padding:0 3px; line-height:1; }
.desay-config-root .config-toolbar .toggleCurrency .usd-part{ color:#3366FF; text-decoration:none !important; }
.desay-config-root .config-toolbar .toggleCurrency .cad-part{ color:#ff6600; text-decoration:none !important; }
.desay-config-root .config-toolbar .fa-right-left{ color:#3366FF; font-size:9px; padding:0 3px; vertical-align:middle; }
/* map RT “hint-ico” to our class */
.desay-config-root .config-toolbar .avm-hint{ color:#3366FF; padding:0 3px; font-size:12px; vertical-align:middle; transition:color .12s ease; }
.desay-config-root .config-toolbar .avm-hint:hover{ color:#ff6600; }

/* ---- Chassis pills (identical behavior/spacing to Desay) ---- */
.desay-config-root .pitches{
  grid-column:1 / -1;
  margin:4px 0 8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
/* baseline link */
.desay-config-root .pitches .pitch-link{
  position:relative;
  background:transparent;
  border:0;
  padding:0 2px 12px;  /* reserve space for underline icon */
  cursor:pointer;
  font:inherit;
  font-weight:400;
  letter-spacing:.01em;
  text-decoration:none;         /* kill UA underline */
}
.desay-config-root .pitches .pitch-link .txt{ text-decoration:none; } /* belt-and-suspenders */
.desay-config-root .pitches .sep{
  opacity:.45;
  margin:0 2px;
  user-select:none;
  pointer-events:none;
}
/* FA schlix "underline" */
.desay-config-root .pitches .pitch-link i.fab.fa-schlix{
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%) translateY(4px);
  font-size:12px;
  line-height:1;
  opacity:0;
  color:currentColor;
  pointer-events:none;
  transition:opacity .16s ease, transform .18s ease;
}
/* active */
.desay-config-root .pitches .pitch-link.active .txt{ color:#3366FF; text-decoration:none; }
.desay-config-root .pitches .pitch-link.active i.fab.fa-schlix{
  color:#3366FF;
  opacity:.95;
  transform:translateX(-50%) translateY(0);
}
/* hover */
.desay-config-root .pitches .pitch-link:hover i.fab.fa-schlix{
  color:#3366FF;
  opacity:.7;
}
/* keyboard focus */
.desay-config-root .pitches .pitch-link:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
  border-radius:6px;
}

/* ---- Variant cards ---- */
.desay-config-root{ --avm-card-bg: rgba(255,102,0,.025); }
.desay-config-root .variant-results{ align-self:start; }
.desay-config-root .variant-results .variant-block.avm-card,
.desay-config-root .variant-results .variant-block{
  position:relative;
  background:var(--avm-card-bg) !important;
  border-radius:10px;
  padding:16px;
  margin-bottom:12px;
  color:#222;
  box-shadow:0 10px 28px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.07) inset;
}
.desay-config-root .variant-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  
  font-size:0.9rem; 
  font-weight:600; 
  
    xfont-size:1rem; 
  xfont-weight:400; 
  
  letter-spacing:.01em; margin-bottom:2px; color:#111;
}
/* subtitle beneath each card heading */
.desay-config-root .variant-subtitle{
  margin-top:0; margin-bottom:6px;
  
  xfont-size:12px; 
  xline-height:1.2; 
  
  font-size:0.8rem;
  font-weight:400;  
  line-height:1.2; 
  
  color:#6b7280;
  
  
  
}
.desay-config-root .variant-divider{ border:0; border-top:1px solid rgba(0,0,0,.08); margin:8px 0 10px; }

/* Lines: uniform/tight (same as sending) */
.desay-config-root .variant-line{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:0 !important; column-gap:0 !important;
  padding:.15rem .5rem; margin:2px 0 !important; padding-left:0 !important;
  grid-template-columns:none !important;
}
.desay-config-root .variant-line .line-left{ display:inline-flex !important; align-items:center; gap:.45rem !important; margin:0 !important; }
.desay-config-root .variant-line .line-left .line-name{ cursor:pointer; transition:color .12s ease; }
.desay-config-root .variant-line .line-left .line-name:hover{ color:#ff6600; }

/* quantity chip */
.desay-config-root .variant-line .avm-qty{
  display:inline-flex; align-items:center; gap:8px;
  padding:3px 6px; border:1px solid #e5e7eb; border-radius:999px; background:#fff;
}
.desay-config-root .variant-line .avm-qty .sep{ opacity:.55; }
.desay-config-root .variant-line .avm-qty i{ font-size:13px; line-height:1; transition:transform .12s ease, color .12s ease; }
.desay-config-root .variant-line .avm-qty i:hover{ color:#3366ff; transform:translateY(-1px); }

/* totals rule and emphasis */
.desay-config-root .avm-subhr{ border:0; border-top:1px solid #eceff3; margin:.35rem 0 !important; }
.desay-config-root .avm-divider-total{ border:0; border-top:1px dashed #e5e7eb; margin:.55rem 0 .25rem !important; }
.desay-config-root .variant-line.total,
.desay-config-root .avm-line--total{ font-weight:600; }

/* CAD color */
.desay-config-root .variant-block .priceNumber.cad{ color:#ff6600; }

/* ---- Left grid fields (unchanged) ---- */
.desay-config-root .box label{ font-size:12px; color:#777; margin-bottom:6px; }
.desay-config-root .inp{ box-sizing:border-box; width:100%; height:48px; padding:12px 16px; border:1px solid #e9ecef; border-radius:8px; background:#fff; font:inherit; line-height:1; }
.desay-config-root .inp[readonly]{ background:#fafafa; }
.desay-config-root .four{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

/* ---- Preview pane (blank on load; no caption) ---- */
.desay-config-root .avm-preview{
  grid-column:1 / -1;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  padding:8px;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.desay-config-root .avm-preview img{ max-width:100%; max-height:100%; display:block; object-fit:contain; }
/* no .hint text — intentionally omitted */