/* ======================================================================
   NovaStar H · Configurator Styles (single file) — v2025-10-05-024
   Scope: .desay-config-root
   Notes:
     • Comments marked [FONT] and [SPACING] show your primary controls.
     • No underlines anywhere in NovaStar UI.
   ====================================================================== */


/* ======================================================================
   0) TOKENS — tweak here first
   ====================================================================== */
.desay-config-root{
  /* [FONT] main sizes */
  --h-title-size: 0.95rem;         /* card headings (NovaStar H · H20)     */
  --h-title-weight: 600;           /* 400..700                             */
  --h-subtitle-size: 0.80rem;      /* line below headings (“placeholder”)  */
  --h-subtitle-weight: 400;
  --h-line-font-size: 0.80em;      /* card line text (h_4×dvi output)      */

  /* [SPACING] global rhythm */
  --h-wrap-gap: 28px;              /* columns gap inside .fam500-wrap      */
  --h-left-gap: 12px;              /* gap between left-grid rows/boxes     */
  --h-card-pad: 16px;              /* inner padding for variant cards      */
  --h-card-margin: 12px;           /* spacing between cards                */
  --h-line-vpad: 0.01rem;          /* vertical padding per line            */
  --h-line-hpad: 0.50rem;          /* horizontal padding per line          */
  --h-preview-top-gap: 8px;        /* vertical space above preview pane    */

  /* colors */
  --h-blue: #3366FF;
  --h-orange: #ff6600;
  --h-card-bg: rgba(255,102,0,.025);
}


/* ======================================================================
   1) OUTER WRAP + LETTERBOX (Helix)
   ====================================================================== */
.desay-config-root .fam500-wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:var(--h-wrap-gap);                   /* [SPACING] columns gap */
  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;
}
/* remove Helix section letterboxing around the configurator */
.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;
  margin-bottom:-32px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}


/* ======================================================================
   2) LEFT GRID (inputs/info)
   ====================================================================== */
.desay-config-root .fam500-left{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--h-left-gap);                   /* [SPACING] left column rhythm */
}
.desay-config-root .fam500-row{ grid-column:1 / -1; display:contents; }
.desay-config-root .box{ display:flex; flex-direction:column; }
.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:var(--h-left-gap); }


/* ======================================================================
   3) TOOLBAR (currency, price, icons)
   ====================================================================== */
.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:var(--h-orange); }
.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:var(--h-blue); transition:transform .12s ease, color .12s ease; }
.desay-config-root .config-toolbar .tool-btn:hover .tool-ico{ color:var(--h-orange); 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:var(--h-blue); text-decoration:none !important; }
.desay-config-root .config-toolbar .toggleCurrency .cad-part{ color:var(--h-orange); text-decoration:none !important; }
.desay-config-root .config-toolbar .fa-right-left{ color:var(--h-blue); font-size:9px; padding:0 3px; vertical-align:middle; }
.desay-config-root .config-toolbar .avm-hint{ color:var(--h-blue); padding:0 3px; font-size:12px; vertical-align:middle; transition:color .12s ease; }
.desay-config-root .config-toolbar .avm-hint:hover{ color:var(--h-orange); }


/* ======================================================================
   4) CHASSIS PILLS (no underline; centered FA schlix)
   ====================================================================== */
.desay-config-root .pitches{
  grid-column:1 / -1; margin:4px 0 8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.desay-config-root .pitches .pitch-link{
  position:relative; background:transparent; border:0; padding:0 2px 12px;
  cursor:pointer; font:inherit; font-weight:400; letter-spacing:.01em; text-decoration:none;
}
.desay-config-root .pitches .pitch-link .txt{ text-decoration:none; }
.desay-config-root .pitches .sep{ opacity:.45; margin:0 2px; user-select:none; pointer-events:none; }
.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;
}
.desay-config-root .pitches .pitch-link.active .txt{ color:var(--h-blue); }
.desay-config-root .pitches .pitch-link.active i.fab.fa-schlix{ color:var(--h-blue); opacity:.95; transform:translateX(-50%) translateY(0); }
.desay-config-root .pitches .pitch-link:hover i.fab.fa-schlix{ color:var(--h-blue); opacity:.7; }
.desay-config-root .pitches .pitch-link:focus-visible{ outline:2px solid rgba(0,0,0,.25); outline-offset:2px; border-radius:6px; }


/* ======================================================================
   5) VARIANT CARDS (shell, headings, subtitle)
   ====================================================================== */
.desay-config-root .variant-results{ align-self:start; }
.desay-config-root .variant-results .variant-block{
  position:relative; background:var(--h-card-bg) !important; border-radius:10px;
  padding:var(--h-card-pad);                 /* [SPACING] card padding */
  margin-bottom:var(--h-card-margin);        /* [SPACING] space between cards */
  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:var(--h-title-size);             /* [FONT] card heading size   */
  font-weight:var(--h-title-weight);         /* [FONT] card heading weight */
  letter-spacing:.01em; margin-bottom:2px; color:#111;
}
.desay-config-root .variant-subtitle{
  margin:0 0 6px;
  font-size:var(--h-subtitle-size);          /* [FONT] subtitle size       */
  font-weight:var(--h-subtitle-weight);      /* [FONT] subtitle weight     */
  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; }


/* ======================================================================
   6) LINES (uniform/tight like sending)
   ====================================================================== */
.desay-config-root .variant-line{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:0 !important; column-gap:0 !important;
  padding:var(--h-line-vpad) var(--h-line-hpad);   /* [SPACING] line padding */
  margin:2px 0 !important; padding-left:0 !important;
  grid-template-columns:none !important;
  font-size:var(--h-line-font-size);                /* [FONT] line font size */
}
.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; text-decoration:none;    /* no underline */
}
.desay-config-root .variant-line .line-left .line-name:hover{ color:var(--h-orange); }

/* quantity capsule + icons */
.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; color:#222;
}
.desay-config-root .variant-line .avm-qty i:hover{ color:var(--h-blue); transform:translateY(-1px); }


/* ======================================================================
   7) TOTALS + SEPARATORS
   ====================================================================== */
.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{ font-weight:600; }
.desay-config-root .variant-block .priceNumber.cad{ color:var(--h-orange); }


/* ======================================================================
   8) PREVIEW PANE (blank on load)
   ====================================================================== */
.desay-config-root .avm-preview{
  grid-column:1 / -1;
  margin-top:var(--h-preview-top-gap);       /* [SPACING] space above image */
  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; }


/* ======================================================================
   9) NOVASTAR: NO UNDERLINES ANYWHERE
   ====================================================================== */
.desay-config-root .pitches .pitch-link,
.desay-config-root .pitches .pitch-link .txt,
.desay-config-root .pitches .pitch-link.active .txt,
.desay-config-root .variant-results a,
.desay-config-root a{ text-decoration:none !important; }