/* drako_autobuild.css - Pagine auto-build PC (Budget / FPS).
   Stile coerente col configuratore/negozio. Chiaro + scuro. Blu #1c63ab. */

.drako-ab {
  --ab-blue: #1c63ab;
  --ab-blue-d: #164e88;
  --ab-bg: #f4f6f9;
  --ab-card: #ffffff;
  --ab-border: #e3e8ef;
  --ab-text: #1a2330;
  /* #5f6774 e non #6b7683: su fondo chiaro il vecchio valore dava contrasto 4,09
     contro il minimo 4,5 di AA (misurato su un'etichetta di questa colonna).
     Stesso grigio gia' usato per lo stesso motivo nel configuratore in scheda
     prodotto. Il tema scuro ha il suo valore (#8891a0) e non e' toccato. */
  --ab-muted: #5f6774;
  --ab-ok: #1f8a4c;
  --ab-warn: #c0392b;
  --ab-wait: #b26a00;
  /* Token aggiunti per il tema scuro. Prima queste tinte erano scritte a mano
     dentro le singole regole (#fff sulla miniatura, #eef4fb su ogni hover,
     #f7f9fc sulle alternative, ombre rgba(20,40,70,...)): in chiaro andavano
     bene, in scuro erano macchie chiare in mezzo alle card e ombre invisibili.
     Passando dai token il tema scuro si ottiene ridefinendoli una volta sola. */
  --ab-surface: #f7f9fc;   /* fondo degli inserti dentro una card (miniature, alternative) */
  --ab-hover: #eef4fb;     /* fondo al passaggio del mouse sugli elementi neutri */
  --ab-border-hi: #cdd8e6; /* bordo evidenziato (hover di card e righe) */
  --ab-dot: #dfe5ec;       /* pallino di stato spento nel riepilogo */
  --ab-shadow: rgba(20, 40, 70, .07);
  --ab-shadow-hi: rgba(20, 40, 70, .12);
  --ab-ok-bg: #e5f5ec;
  --ab-wait-bg: #fdf0dd;
  /* Aspetto dei CAMPI dell'hero. Serve un token perche' "Gioco" e "Risoluzione"
     sono <input>/<select> veri (e il tema scuro del negozio li colora da solo),
     mentre il campo FPS/budget e' un <div> contenitore che quelle regole non
     toccano: senza allineare i due si vedevano due grigi diversi affiancati. */
  --ab-field-bg: #ffffff;
  --ab-field-bd: transparent;
  display: block;
  color: var(--ab-text);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px 56px;
  box-sizing: border-box;
}
.drako-ab *, .drako-ab *::before, .drako-ab *::after { box-sizing: border-box; }
.drako-ab [hidden] { display: none !important; }
/* niente frecce spinner sui campi numerici */
.drako-ab input[type=number]::-webkit-inner-spin-button,
.drako-ab input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.drako-ab input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ---- HERO / INPUT --------------------------------------------------------- */
.drako-ab-hero {
  margin: 18px 0 26px;
  padding: 34px 28px;
  border-radius: 18px;
  color: #fff;
  background: radial-gradient(1200px 300px at 15% -20%, #2f7fd0 0%, transparent 60%), linear-gradient(135deg, #1c63ab 0%, #103a67 100%);
  box-shadow: 0 14px 34px rgba(16, 58, 103, .28);
}
.drako-ab-hero-inner { max-width: 760px; }
.drako-ab-kicker {
  display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .16); padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
.drako-ab-h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; font-weight: 800; }
.drako-ab-sub { margin: 0 0 20px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.drako-ab-sub strong { color: #fff; }

.drako-ab-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.drako-ab-field { display: flex; flex-direction: column; gap: 6px; }
.drako-ab-field label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .9); }
/* Il campo numerico e' un CONTENITORE (simbolo + input + unita') e deve
   presentarsi come UN campo solo, alto quanto i vicini "Gioco" e "Risoluzione".
   Con il bordo a 2px e il padding a 12px veniva 58px contro i 46 degli altri
   due: nella barra dell'hero risultava piu' alto e disallineato. */
.drako-ab-euro {
  display: flex; align-items: center; background: var(--ab-field-bg); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--ab-field-bd); box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.drako-ab-euro:focus-within { border-color: #9ec3ec; }
.drako-ab-cur { padding: 0 6px 0 14px; color: var(--ab-muted); font-weight: 700; font-size: 18px; }
.drako-ab-euro input {
  border: 0; outline: 0; font-size: 22px; font-weight: 800; color: var(--ab-text);
  width: 150px; padding: 10px 14px 10px 2px; background: transparent;
}
.drako-ab-select {
  border: 0; outline: 0; border-radius: 12px; background: #fff; color: var(--ab-text);
  font-size: 16px; font-weight: 700; padding: 13px 14px; min-width: 210px; max-width: 100%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12); cursor: pointer;
}
.drako-ab-unit { padding: 0 14px 0 4px !important; font-size: 14px; }
/* combobox gioco (scrivibile + filtro) */
.drako-ab-combo { position: relative; }
.drako-ab-combo-input { width: 260px; }
/* I tre campi della pagina FPS sono dimensionati sul CONTENUTO, non sul minimo
   generale di 210px: "1440p (2K)" e "144 FPS" lasciavano meta' casella vuota e
   la riga sembrava sproporzionata rispetto a quello che contiene. */
.drako-ab-bar-fps .drako-ab-combo-input { width: 200px; min-width: 0; }
.drako-ab-bar-fps #ab-res { width: 145px; min-width: 0; }
/* Stessa specificita' della regola qui sopra (che colpisce anche questa combo,
   avendo entrambe le classi): vince perche' viene dopo. */
.drako-ab-bar-fps .drako-ab-combo-fps { width: 108px; min-width: 0; }
.drako-ab-combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 60;
  list-style: none; margin: 0; padding: 6px; max-height: 300px; overflow-y: auto;
  background: #fff; border: 1px solid var(--ab-border); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}
.drako-ab-combo-opt { padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--ab-text); font-weight: 600; font-size: 14px; white-space: nowrap; }
.drako-ab-combo-opt:hover,
.drako-ab-combo-opt.is-key { background: var(--ab-hover); color: var(--ab-blue); }
.drako-ab-combo-empty { padding: 10px 12px; color: var(--ab-muted); font-size: 14px; }
html[data-theme="dark"] .drako-ab-combo-list { background: #1a212b; }
html[data-theme="dark"] .drako-ab-combo-opt { color: #e7ecf2; }
html[data-theme="dark"] .drako-ab-combo-opt:hover,
html[data-theme="dark"] .drako-ab-combo-opt.is-key { background: #1f2937; }
.drako-ab-opt { font-weight: 400; opacity: .8; }
.drako-ab-bar-fps .drako-ab-euro input { width: 92px; }
.drako-ab-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.drako-ab-chip {
  cursor: pointer; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12);
  color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; transition: .15s;
}
.drako-ab-chip:hover { background: rgba(255, 255, 255, .24); }
.drako-ab-chip.is-active { background: #fff; color: var(--ab-blue); border-color: #fff; }
.drako-ab-go {
  cursor: pointer; border: 0; background: #ffd23f; color: #23303e; font-weight: 800; font-size: 16px;
  padding: 13px 24px; border-radius: 12px; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); transition: .15s;
  margin-left: auto;
}
.drako-ab-go:hover { transform: translateY(-1px); background: #ffdb63; }
.drako-ab-go:disabled { opacity: .6; cursor: default; transform: none; }
.drako-ab-hint { margin: 14px 0 0; font-size: 13px; color: rgba(255, 255, 255, .82); }

/* Avviso di limite sotto il campo budget: compare solo quando il valore digitato
   e' stato corretto. Tono INFORMATIVO, non di errore - il cliente non ha
   sbagliato, gli si sta dicendo dove arriva il catalogo. Posizionato assoluto
   per non allargare la barra e sfalsare l'allineamento degli altri campi. */
.drako-ab-limitmsg {
  position: absolute; top: 100%; left: 0; z-index: 3;
  margin: 6px 0 0; padding: 8px 12px;
  /* Il campo budget e' stretto: senza max-content il messaggio ne eredita la
     larghezza e si incolonna su otto righe. */
  width: max-content; max-width: min(520px, 78vw);
  font-size: 12.5px; line-height: 1.4; color: #fff;
  /* Opaco, non velato: sotto ci sono la riga di hint e i badge di fiducia, e in
     trasparenza i due testi si sovrapponevano illeggibili. */
  background: #0d2f52;
  border-left: 3px solid var(--ab-wait, #f5b301);
  border-radius: 0 6px 6px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.drako-ab-limitmsg[hidden] { display: none; }
.drako-ab-field { position: relative; }
@media (max-width: 760px) {
  /* Su mobile i campi sono impilati: in assoluto coprirebbe quello sotto. */
  .drako-ab-limitmsg { position: static; max-width: none; }
}

/* ---- RESULT LAYOUT -------------------------------------------------------- */
.drako-ab-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
/* Lo scrollIntoView dopo "Genera la build" portava il titolo del risultato sotto
   l'header fisso: stesso offset di 130px usato altrove nel negozio. */
.drako-ab-result { scroll-margin-top: 130px; }

/* 130px = la stessa convenzione usata nel resto del negozio per scavalcare
   l'header fisso (vedi scroll-margin-top in stylesheet.css). Con top:16px la
   card scivolava sotto la barra e il TOTALE restava nascosto proprio mentre si
   scorreva la lista dei componenti. */
.drako-ab-col-side { position: sticky; top: 142px; }

.drako-ab-loading {
  display: flex; align-items: center; gap: 12px; padding: 22px; color: var(--ab-muted);
  background: var(--ab-card); border: 1px solid var(--ab-border); border-radius: 14px; font-weight: 600;
}
.drako-ab-spinner {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid #d6dee8; border-top-color: var(--ab-blue);
  animation: ab-spin .8s linear infinite; flex: 0 0 auto;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }
.drako-ab-error {
  margin: 6px 0 14px; padding: 14px 16px; border-radius: 12px; font-weight: 600;
  background: #fdecea; color: #a3271b; border: 1px solid #f4c7c1;
}
.drako-ab-notes {
  margin-bottom: 14px; padding: 11px 14px; border-radius: 10px; font-size: 13px;
  background: #fff8e6; color: #7a5b00; border: 1px solid #f2e2b0;
}

/* ---- COMPONENT ITEMS ------------------------------------------------------ */
.drako-ab-list { display: flex; flex-direction: column; gap: 12px; }
.drako-ab-item {
  /* Colonna prezzo a larghezza MINIMA fissa: con 'auto' la incolonnava al bordo
     destro e ogni riga aveva il prezzo in un punto diverso a seconda di quanto
     era lungo il nome, con una fascia vuota larga e irregolare nel mezzo. */
  display: grid; grid-template-columns: 68px 1fr minmax(96px, auto); gap: 14px; align-items: center;
  background: var(--ab-card); border: 1px solid var(--ab-border); border-radius: 14px; padding: 12px 16px;
  transition: box-shadow .15s, border-color .15s;
}
.drako-ab-item:hover { box-shadow: 0 6px 18px var(--ab-shadow-hi); border-color: var(--ab-border-hi); }
/* La miniatura resta su fondo CHIARO anche in tema scuro: le foto prodotto sono
   PNG/JPG ritagliati su bianco, e metterle su un riquadro scuro le circonda di
   un alone. Il riquadro e' pero' leggermente spento e bordato, cosi' non e' piu'
   la macchia bianca abbagliante che era prima dentro le card scure. */
.drako-ab-thumb {
  width: 68px; height: 68px; object-fit: contain; border-radius: 8px;
  background: #fff; border: 1px solid var(--ab-border); padding: 3px;
}
.drako-ab-item-body { min-width: 0; }
.drako-ab-slotlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ab-blue); font-weight: 700; }
/* Nome su MASSIMO 2 righe: i nomi a catalogo arrivano a 90 caratteri (con code
   tipo '- 2 TB *Refurbished*') e mandavano a capo una riga su tre, cosi' le
   righe della lista avevano altezze diverse e l'elenco sembrava disallineato. */
.drako-ab-name {
  font-size: 15px; font-weight: 600; line-height: 1.3; margin: 2px 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.drako-ab-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drako-ab-brand { font-size: 12px; color: var(--ab-muted); }
.drako-ab-stock { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.drako-ab-stock.ok { background: var(--ab-ok-bg); color: var(--ab-ok); }
.drako-ab-stock.wait { background: var(--ab-wait-bg); color: var(--ab-wait); }
.drako-ab-price { font-size: 17px; font-weight: 800; white-space: nowrap; text-align: right; }

.drako-ab-altbtn {
  margin-top: 8px; cursor: pointer; background: transparent; border: 1px solid var(--ab-border);
  color: var(--ab-blue); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px;
}
.drako-ab-altbtn:hover { background: var(--ab-hover); border-color: var(--ab-border-hi); }
.drako-ab-alts { grid-column: 1 / -1; display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px 2px; }
.drako-ab-alt {
  cursor: pointer; flex: 0 0 auto; width: 150px; text-align: left; background: var(--ab-surface);
  border: 1px solid var(--ab-border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.drako-ab-alt:hover { border-color: var(--ab-blue); background: var(--ab-hover); }
.drako-ab-alt img { width: 100%; height: 60px; object-fit: contain; }
.drako-ab-alt-name { font-size: 11.5px; line-height: 1.25; height: 43px; overflow: hidden; }
.drako-ab-alt-price { font-size: 13px; font-weight: 800; color: var(--ab-blue); }
.drako-ab-noalt { color: var(--ab-muted); font-size: 13px; padding: 8px; }

/* ---- SUMMARY -------------------------------------------------------------- */
.drako-ab-summary {
  background: var(--ab-card); border: 1px solid var(--ab-border); border-radius: 16px; padding: 20px;
  box-shadow: 0 8px 22px var(--ab-shadow);
}
.drako-ab-fpsbox {
  text-align: center; background: linear-gradient(135deg, #1c63ab, #103a67); color: #fff;
  border-radius: 12px; padding: 14px; margin-bottom: 16px;
}
.drako-ab-fps-num { font-size: 34px; font-weight: 800; line-height: 1; }
.drako-ab-fps-num small { font-size: 14px; font-weight: 700; opacity: .85; }
.drako-ab-fps-sub { font-size: 12px; margin-top: 6px; opacity: .9; }
/* Riga "target": sta SOPRA il numero perche' e' la chiave di lettura, non una
   postilla. Colori dichiarati qui e non ereditati: dentro .drako-ab-fpsbox il
   testo e' bianco su blu in entrambi i temi. */
.drako-ab-fps-target { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; display: inline-block; padding: 2px 8px; border-radius: 999px; }
.drako-ab-fps-target.ok    { background: rgba(46, 204, 113, .22); color: #a8f0c6; }
.drako-ab-fps-target.short { background: rgba(231, 76, 60, .22);  color: #ffb9b1; }
.drako-ab-est { opacity: .8; }
.drako-ab-total-lbl { font-size: 13px; color: var(--ab-muted); }
.drako-ab-total { font-size: 30px; font-weight: 800; color: var(--ab-text); margin: 2px 0 14px; }
.drako-ab-facts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.drako-ab-fact { font-size: 13px; padding-left: 22px; position: relative; color: var(--ab-muted); }
.drako-ab-fact::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ab-dot); }
.drako-ab-fact.ok::before { background: var(--ab-ok); }
.drako-ab-fact.warn::before { background: var(--ab-warn); }
.drako-ab-fact.warn { color: var(--ab-warn); }

.drako-ab-cta-cart, .drako-ab-cta-cfg {
  display: block; width: 100%; cursor: pointer; border-radius: 12px; font-weight: 800; font-size: 15px;
  padding: 14px; border: 0; transition: .15s;
}
.drako-ab-cta-cart { background: var(--ab-blue); color: #fff; margin-bottom: 10px; }
.drako-ab-cta-cart:hover { background: var(--ab-blue-d); }
.drako-ab-cta-cart:disabled { opacity: .6; cursor: default; }
.drako-ab-cta-cfg { background: transparent; color: var(--ab-blue); border: 2px solid var(--ab-border); }
/* Il nome build ora sta SOTTO il riepilogo: il margine va sopra, non sotto. */
.drako-ab-cta-cfg:hover { border-color: var(--ab-blue); background: var(--ab-hover); }
.drako-ab-cta-shuffle {
  display: block; width: 100%; cursor: pointer; margin-top: 10px; background: transparent;
  border: 1px dashed var(--ab-border); color: var(--ab-muted); border-radius: 10px;
  font-size: 13px; font-weight: 700; padding: 10px; transition: .15s;
}
.drako-ab-cta-shuffle:hover { color: var(--ab-blue); border-color: var(--ab-blue); background: var(--ab-hover); }
.drako-ab-cta-shuffle:disabled { opacity: .55; cursor: default; }
.drako-ab-disclaim { font-size: 11.5px; color: var(--ab-muted); margin: 12px 0 0; line-height: 1.4; }

/* ---- RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 900px) {
  .drako-ab-grid { grid-template-columns: 1fr; }
  .drako-ab-col-side { position: static; }
  .drako-ab-go { margin-left: 0; }
  .drako-ab-h1 { font-size: 24px; }
}
@media (max-width: 520px) {
  .drako-ab-item { grid-template-columns: 52px 1fr; }
  .drako-ab-price { grid-column: 2; text-align: right; }
  .drako-ab-thumb { width: 52px; height: 52px; }
  .drako-ab-euro input { width: 120px; }
}

/* ---- DARK MODE ------------------------------------------------------------ */
html[data-theme="dark"] .drako-ab {
  --ab-bg: #1a1d24; --ab-card: #22262e; --ab-border: #2a2f38; --ab-text: #f0f2f5; --ab-muted: #8891a0;
  --ab-blue: #4a8db8; --ab-blue-d: #3a7099;
  /* Controparti scure dei token: superfici piu' SCURE della card (non piu'
     chiare, com'era prima con #f7f9fc), hover appena percettibile invece del
     lampo azzurro, ombre nere invece di rgba blu che su fondo scuro non si
     vedono. Verde e ambra dei badge di stock passano a fondo desaturato +
     testo chiaro: prima il testo restava #1f8a4c su fondo #14331f, cioe' verde
     scuro su verde scuro. */
  --ab-surface: #1b2029; --ab-hover: #1f2937; --ab-border-hi: #3d4653; --ab-dot: #39414d;
  --ab-shadow: rgba(0, 0, 0, .38); --ab-shadow-hi: rgba(0, 0, 0, .5);
  --ab-ok: #5fd08a; --ab-ok-bg: #16341f;
  --ab-wait: #e0ad5c; --ab-wait-bg: #33260f;
  --ab-warn: #ef8378;
  /* Stessi valori con cui il tema scuro del negozio dipinge input e select:
     cosi' il campo FPS (che e' un div) si affianca a "Gioco" e "Risoluzione"
     senza stonare. Prima era #151b24 mentre i vicini erano #1a1d24. */
  --ab-field-bg: #1a1d24;
  --ab-field-bd: #4a5060;
}
html[data-theme="dark"] .drako-ab-hero { background: radial-gradient(1200px 300px at 15% -20%, #294a68 0%, transparent 60%), linear-gradient(135deg, #21384e 0%, #141e29 100%); box-shadow: 0 16px 36px rgba(0,0,0,.45); }
html[data-theme="dark"] .drako-ab-fpsbox { background: linear-gradient(135deg, #294863, #172633); }
html[data-theme="dark"] .drako-ab-cta-band { background: linear-gradient(135deg, #21384e, #141e29); }
html[data-theme="dark"] .drako-ab-benefit-ic { background: #1a2530; }
html[data-theme="dark"] .drako-ab-tier-badge { background: #1a2530; }
html[data-theme="dark"] .drako-ab-euro input { color: #e7ecf2; }
html[data-theme="dark"] .drako-ab-select { background: #0f141b; color: #e7ecf2; }
/* .drako-ab-alt / gli hover di altbtn, cta-cfg, cta-shuffle e i badge di stock
   NON hanno piu' bisogno di una regola scura dedicata: leggono --ab-surface,
   --ab-hover e --ab-ok/--ab-wait ridefiniti qui sopra. */
html[data-theme="dark"] .drako-ab-notes { background: #2a2410; color: #e2c979; border-color: #4a3f1a; }
html[data-theme="dark"] .drako-ab-error { background: #3a1c19; color: #f0b3ab; border-color: #5c2a24; }

/* ==== REDESIGN LANDING: fiducia, quick-pick, sezioni contenuto (SEO/UX/conversione) ==== */
/* Coerenti col design system negozio: card bianche, accent #1c63ab, header con bordo sinistro, font ereditato. */

/* Chip di fiducia nell'hero (sotto la form) */
.drako-ab-trust { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 18px 0 0; align-items: center; }
.drako-ab-trust-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.drako-ab-trust-chip svg { width: 16px; height: 16px; flex: none; opacity: .95; }
.drako-ab-trust-chip b { color: #fff; font-weight: 800; }

/* Quick-pick giochi popolari (pagina FPS) */
.drako-ab-quick { margin: 16px 0 2px; }
.drako-ab-quick-lbl { display: block; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0 0 9px; }
.drako-ab-gamechips { display: flex; flex-wrap: wrap; gap: 8px; }
.drako-ab-gamechip { cursor: pointer; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; transition: .15s; }
.drako-ab-gamechip:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); }
.drako-ab-gamechip.is-active { background: #fff; color: var(--ab-blue); border-color: #fff; }

/* Sezione contenuto generica */
.drako-ab-sec { margin: 42px 0 0; }
.drako-ab-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 13px 18px; background: var(--ab-card); border: 1px solid var(--ab-border); border-left: 3px solid var(--ab-blue); border-radius: 8px; }
.drako-ab-sec-head h2 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.3px; color: var(--ab-text); }
.drako-ab-sec-head p { margin: 0; font-size: 13.5px; color: var(--ab-muted); }

/* Come funziona: 3 step */
.drako-ab-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.drako-ab-step { background: var(--ab-card); border: 1px solid var(--ab-border); border-radius: 12px; padding: 22px 20px; }
.drako-ab-step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ab-blue); color: #fff; font-weight: 800; font-size: 16px; margin: 0 0 13px; }
.drako-ab-step h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--ab-text); }
.drako-ab-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ab-muted); }

/* Perché: griglia benefici */
/* I benefici sono SEI: con l'auto-fit su schermo largo entravano su 4 colonne e
   restava una riga orfana di 2 schede spaiate a sinistra. Da tablet in su si
   forzano 3 colonne, cosi' escono due righe piene; sotto, l'auto-fit fa il resto. */
.drako-ab-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 16px; }
@media (min-width: 840px) { .drako-ab-benefits { grid-template-columns: repeat(3, 1fr); } }
.drako-ab-benefit { display: flex; gap: 14px; background: var(--ab-card); border: 1px solid var(--ab-border); border-radius: 12px; padding: 20px; }
.drako-ab-benefit-ic { flex: none; width: 42px; height: 42px; border-radius: 10px; background: #e8f0fa; color: var(--ab-blue); display: flex; align-items: center; justify-content: center; }
.drako-ab-benefit-ic svg { width: 22px; height: 22px; }
.drako-ab-benefit h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 700; color: var(--ab-text); }
.drako-ab-benefit p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ab-muted); }

/* Fasce / esempi */
.drako-ab-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.drako-ab-tier { display: flex; flex-direction: column; background: var(--ab-card); border: 1px solid var(--ab-border); border-radius: 12px; padding: 20px; }
.drako-ab-tier-badge { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ab-blue); background: #e8f0fa; padding: 4px 10px; border-radius: 999px; margin: 0 0 11px; }
.drako-ab-tier h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--ab-text); }
.drako-ab-tier p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--ab-muted); flex: 1 1 auto; }
.drako-ab-tier-go { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--ab-blue); text-decoration: none; border: 1px solid var(--ab-blue); border-radius: 6px; padding: 7px 14px; cursor: pointer; background: none; transition: .15s; }
.drako-ab-tier-go:hover { background: var(--ab-blue); color: #fff; }

/* FAQ (accordion) */
.drako-ab-faq { display: flex; flex-direction: column; gap: 10px; }
.drako-ab-faq details { background: var(--ab-card); border: 1px solid var(--ab-border); border-radius: 10px; overflow: hidden; }
.drako-ab-faq summary { cursor: pointer; list-style: none; padding: 16px 20px; font-size: 15px; font-weight: 600; color: var(--ab-text); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drako-ab-faq summary::-webkit-details-marker { display: none; }
.drako-ab-faq summary::after { content: '+'; font-size: 22px; font-weight: 400; line-height: 1; color: var(--ab-blue); flex: none; transition: transform .2s; }
.drako-ab-faq details[open] summary::after { transform: rotate(45deg); }
.drako-ab-faq details p { margin: 0; padding: 0 20px 18px; font-size: 14px; line-height: 1.6; color: var(--ab-muted); }

/* CTA finale (banner) */
.drako-ab-cta-band { margin: 42px 0 0; background: linear-gradient(135deg, var(--ab-blue), var(--ab-blue-d)); border-radius: 16px; padding: 30px 28px; text-align: center; color: #fff; }
.drako-ab-cta-band h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: #fff; }
.drako-ab-cta-band p { margin: 0 0 18px; font-size: 15px; color: rgba(255,255,255,.85); }
.drako-ab-cta-band button { cursor: pointer; border: 0; background: #ffd23f; color: #1a1a1a; font: inherit; font-size: 16px; font-weight: 800; padding: 13px 30px; border-radius: 10px; transition: .15s; }
.drako-ab-cta-band button:hover { background: #ffdc66; transform: translateY(-1px); }

/* Fix collisione: input nome build (era .drako-ab-name, come il nome componente) */

/* Dark mode sezioni: vedi override piu' in basso (#1a2530, allineati al negozio) */

/* ==== RIFINITURA landing: profondita', hover, textbox FPS, immagine gioco (dark + light) ==== */
.drako-ab-step, .drako-ab-benefit, .drako-ab-tier { box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.drako-ab-step:hover, .drako-ab-benefit:hover, .drako-ab-tier:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.12); border-color: var(--ab-blue); }
.drako-ab-benefit-ic { transition: background .16s, color .16s; }
.drako-ab-benefit:hover .drako-ab-benefit-ic { background: var(--ab-blue); color: #fff; }
.drako-ab-faq details { box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .16s, border-color .16s; }
.drako-ab-faq details:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.drako-ab-faq details[open] { border-color: var(--ab-blue); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.drako-ab-sec-head { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.drako-ab-step-num { box-shadow: 0 4px 12px rgba(28,99,171,.35); }

/* textbox FPS piu' pulita e bilanciata */
.drako-ab-bar-fps .drako-ab-euro input { width: 62px; font-size: 20px; text-align: right; padding: 12px 4px 12px 12px; }
.drako-ab-bar-fps .drako-ab-unit { color: var(--ab-muted); font-weight: 700; padding-right: 14px !important; }

/* immagine gioco nell'hero (pagina FPS) */
.drako-ab-hero-inner.has-art { display: flex; gap: 28px; align-items: center; max-width: none; }
.drako-ab-hero-main { flex: 1 1 auto; min-width: 0; }
.drako-ab-hero-inner.has-art .drako-ab-h1, .drako-ab-hero-inner.has-art .drako-ab-sub { max-width: 620px; }
.drako-ab-hero-inner.has-art .drako-ab-go { margin-left: 0; }
.drako-ab-hero-art { flex: none; width: 152px; }
.drako-ab-hero-art img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; box-shadow: 0 16px 38px rgba(0,0,0,.4); background: rgba(255,255,255,.06); }

/* dark: ombre coerenti (borde definisce, ombra piu' profonda) */
html[data-theme="dark"] .drako-ab-step, html[data-theme="dark"] .drako-ab-benefit, html[data-theme="dark"] .drako-ab-tier, html[data-theme="dark"] .drako-ab-faq details, html[data-theme="dark"] .drako-ab-sec-head { box-shadow: 0 1px 2px rgba(0,0,0,.35); }
html[data-theme="dark"] .drako-ab-step:hover, html[data-theme="dark"] .drako-ab-benefit:hover, html[data-theme="dark"] .drako-ab-tier:hover { box-shadow: 0 12px 26px rgba(0,0,0,.5); }
html[data-theme="dark"] .drako-ab-faq details:hover, html[data-theme="dark"] .drako-ab-faq details[open] { box-shadow: 0 6px 18px rgba(0,0,0,.5); }

/* responsive: su mobile la copertina gioco si nasconde, hero a colonna */
@media (max-width: 760px) {
  .drako-ab-hero-inner.has-art { display: block; }
  .drako-ab-hero-art { display: none; }
}

/* illustrazione PC hero budget + preset coerenti sul blu (dark + light) */
.drako-ab-hero-art-pc { width: 150px; display: flex; align-items: center; justify-content: center; }
.drako-ab-hero-art-pc svg { width: 132px; height: auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); }
.drako-ab-hero .drako-ab-presets .drako-ab-chip { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; transition: .15s; }
.drako-ab-hero .drako-ab-presets .drako-ab-chip:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); }
.drako-ab-hero .drako-ab-presets .drako-ab-chip.is-active { background: #fff; color: var(--ab-blue); border-color: #fff; }

/* HERO BUDGET: allineato a SINISTRA come la pagina FPS.
   Prima era centrato dentro una scatola da 720px che pero' restava incollata a
   sinistra dell'hero (~1150px): il contenuto risultava centrato rispetto alla
   scatola e non all'hero, cioe' 186px fuori asse - il disallineamento che si
   notava senza riuscire a spiegarlo. Si potevano centrare i margini, ma le due
   pagine restavano impaginate in modo diverso: si adotta l'allineamento a
   sinistra della pagina FPS, cosi' titolo, sottotitolo e riga del form partono
   dallo stesso bordo su entrambe. Il bottone resta attaccato al gruppo
   (`margin-left: 0`) invece di essere spinto a destra da `margin-left: auto`. */
.drako-ab-budget .drako-ab-go { margin-left: 0; }

/* ==========================================================================
   TEMA SCURO - RIPRESA DELLE TINTE (2026-07-27)
   ==========================================================================
   stylesheet.css ha un catch-all che pesca le classi per SOTTOSTRINGA
   (riga ~10732: [class*="-card"], [class*="-chip"], [class*="-slot"],
   [class*="-summary"], [class*="-box"] ...) e impone fondo/testo di sistema.
   Diversi nomi di questa pagina ci finiscono dentro per pura coincidenza
   lessicale - 'drako-ab-slotlabel' contiene '-slot', 'drako-ab-chip' contiene
   '-chip', 'drako-ab-summary' contiene '-summary' - e si portavano via i colori
   d'accento: le etichette di slot diventavano grigie come il testo normale, i
   badge di disponibilita' perdevano il verde, i preset nell'hero blu si
   spegnevano in pillole grigie e il bottone "Personalizza nel configuratore"
   restava bianco su trasparente, cioe' invisibile come bottone.
   Qui le tinte si riprendono, scritte sui token di questo file. Serve
   !important perche' parte del catch-all lo usa a sua volta.
   Vedi memoria: darkmode-global-class-substring-override. */

/* etichetta di slot: e' l'accento che guida la lettura della lista */
html[data-theme="dark"] .drako-ab .drako-ab-slotlabel { color: var(--ab-blue) !important; }

/* badge disponibilita': il colore E' l'informazione */
html[data-theme="dark"] .drako-ab .drako-ab-stock.ok   { background: var(--ab-ok-bg) !important;   color: var(--ab-ok) !important; }
html[data-theme="dark"] .drako-ab .drako-ab-stock.wait { background: var(--ab-wait-bg) !important; color: var(--ab-wait) !important; }

/* testi di servizio: grigio del tema, non quello del negozio */
html[data-theme="dark"] .drako-ab .drako-ab-brand,
html[data-theme="dark"] .drako-ab .drako-ab-total-lbl,
html[data-theme="dark"] .drako-ab .drako-ab-disclaim { color: var(--ab-muted) !important; }

/* bottone secondario: senza colore non si legge come bottone */
html[data-theme="dark"] .drako-ab .drako-ab-cta-cfg { color: var(--ab-blue) !important; border-color: var(--ab-border) !important; }
html[data-theme="dark"] .drako-ab .drako-ab-cta-cfg:hover { border-color: var(--ab-blue) !important; background: var(--ab-hover) !important; }
html[data-theme="dark"] .drako-ab .drako-ab-alt-price { color: var(--ab-blue) !important; }

/* card riepilogo e righe componente: fondo della pagina, non quello di sistema */
html[data-theme="dark"] .drako-ab .drako-ab-summary,
html[data-theme="dark"] .drako-ab .drako-ab-item { background: var(--ab-card) !important; border-color: var(--ab-border) !important; }
html[data-theme="dark"] .drako-ab .drako-ab-summary { color: var(--ab-text) !important; }

/* preset e chip gioco: stanno DENTRO l'hero blu, che resta blu in entrambi i
   temi - vanno quindi trattati come elementi su fondo scuro colorato, non come
   chip di sistema su fondo neutro. */
html[data-theme="dark"] .drako-ab-hero .drako-ab-presets .drako-ab-chip,
html[data-theme="dark"] .drako-ab-hero .drako-ab-gamechip {
  background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.28) !important; color: #fff !important;
}
html[data-theme="dark"] .drako-ab-hero .drako-ab-presets .drako-ab-chip:hover,
html[data-theme="dark"] .drako-ab-hero .drako-ab-gamechip:hover {
  background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.6) !important;
}
html[data-theme="dark"] .drako-ab-hero .drako-ab-presets .drako-ab-chip.is-active,
html[data-theme="dark"] .drako-ab-hero .drako-ab-gamechip.is-active {
  background: #fff !important; color: var(--ab-blue) !important; border-color: #fff !important;
}

/* --- ripresa 2: campo numerico, chip di fiducia, gerarchia sezioni ---------- */

/* MISURE del campo numerico, valide in ENTRAMBI i temi: le regole globali sugli
   input del negozio vincono per specificita' e rimettevano padding 12px/4px e
   font 20px, per cui il campo tornava 54px contro i 46 dei vicini. Qui l'altezza
   e' resa deterministica (22px x 1.15 + 10+10 di padding + 2 di bordo = 47). */
.drako-ab .drako-ab-euro input {
  font-size: 22px !important; line-height: 1.15 !important;
  padding: 10px 14px 10px 2px !important;
}

/* Il tema scuro del negozio colora OGNI input: dentro .drako-ab-euro dipingeva
   anche quello interno, con un fondo e un bordo suoi, e il campo si vedeva come
   una scatola dentro una scatola. L'input qui deve sparire dentro il
   contenitore: lo sfondo e il bordo li mette .drako-ab-euro. */
html[data-theme="dark"] .drako-ab .drako-ab-euro input {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  color: var(--ab-text) !important; box-shadow: none !important;
}

/* I chip di fiducia stanno sull'hero BLU e non hanno mai avuto un fondo: sono
   icona + testo. Il catch-all [class*="-chip"] di stylesheet.css ci vedeva un
   chip di sistema e gli metteva la pillola grigia da card (#22262e) in mezzo al
   gradiente blu. Vedi memoria darkmode-global-class-substring-override. */
html[data-theme="dark"] .drako-ab .drako-ab-trust-chip {
  background: transparent !important; border: 0 !important; color: rgba(255,255,255,.9) !important;
}
html[data-theme="dark"] .drako-ab .drako-ab-trust-chip b { color: #fff !important; }

/* Testata di sezione e schede sotto avevano lo STESSO grigio (--ab-card):
   "Come funziona" e i tre passaggi si leggevano come un unico blocco piatto.
   In chiaro la gerarchia la fa la pagina grigia sotto le card bianche; in scuro
   serve il contrario, cioe' una testata piu' profonda delle schede. */
html[data-theme="dark"] .drako-ab .drako-ab-sec-head { background: var(--ab-surface); }

/* `.drako-ab-steps` e' la GRIGLIA che contiene i tre passaggi, non una scheda:
   deve restare trasparente. Il catch-all `[class*="-step"]` pero' non distingue
   il contenitore dalle schede - "drako-ab-steps" contiene "-step" tanto quanto
   "drako-ab-step" - e gli dava lo stesso fondo delle card. Siccome combacia con
   quello delle schede il difetto si vedeva solo NEGLI SPAZI fra una scheda e
   l'altra, riempiti di grigio invece che di sfondo pagina: la fila sembrava un
   unico lastrone. Unico contenitore di layout colpito, verificato su tutti.
   Serve !important: fra i due :not() e i due attributi il catch-all pesa (0,4,0)
   e batte anche `html[data-theme="dark"] .drako-ab .drako-ab-steps` (0,3,1). */
html[data-theme="dark"] .drako-ab .drako-ab-steps { background: transparent !important; border: 0 !important; }

/* ---- MESSAGGIO SUL BUDGET (informazione, non avviso) ---------------------- */
/* Il riquadro note e' giallo e dice "Note:": va bene per i problemi tecnici,
   ma usarlo anche per il budget faceva sembrare un guasto una build riuscita.
   Questo riquadro e' invece discorsivo: pannello neutro, titolo, testo, e una
   pastiglia colorata a sinistra che cambia col caso (basso / sforato / avanza).
   Colori dai token, quindi vale in chiaro e in scuro senza regole doppie. */
.drako-ab-budgetmsg {
  display: flex; gap: 13px; align-items: flex-start;
  margin: 0 0 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--ab-card); border: 1px solid var(--ab-border);
  box-shadow: 0 2px 8px var(--ab-shadow);
}
.drako-ab-bm-ic { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--ab-blue); }
.drako-ab-budgetmsg.is-low  .drako-ab-bm-ic { background: var(--ab-wait); }
.drako-ab-budgetmsg.is-over .drako-ab-bm-ic { background: var(--ab-wait); }
.drako-ab-budgetmsg.is-high .drako-ab-bm-ic { background: var(--ab-ok); }
/* bordo sinistro nel colore del caso: si legge a colpo d'occhio senza urlare */
.drako-ab-budgetmsg.is-low, .drako-ab-budgetmsg.is-over { border-left: 3px solid var(--ab-wait); }
.drako-ab-budgetmsg.is-high { border-left: 3px solid var(--ab-ok); }
.drako-ab-bm-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drako-ab-bm-title { font-size: 14.5px; font-weight: 700; color: var(--ab-text); }
.drako-ab-bm-text { font-size: 13.5px; line-height: 1.5; color: var(--ab-muted); }

/* ==== BARRA BUDGET: stessa struttura della pagina FPS ====================== */
/* Prima: campo largo il doppio del necessario, quattro pillole grigie staccate
   che sembravano disattivate e altezze tutte diverse - la riga si leggeva come
   quattro forme scollegate. Ora i tre blocchi (campo / preset / bottone) hanno
   la stessa altezza e la stessa impaginazione dei campi "Gioco - Risoluzione -
   FPS desiderati", cosi' le due pagine si somigliano. */

/* i preset sono un campo etichettato come gli altri: l'etichetta non deve
   spostare la baseline del gruppo */
.drako-ab-budget .drako-ab-presets { gap: 0; flex-wrap: nowrap; }

/* campo importo: 4-5 cifre, non serve larghezza doppia */
.drako-ab-budget .drako-ab-euro input { width: 104px; }

/* CONTROLLO SEGMENTATO: un riquadro solo, divisori interni, angoli agli estremi */
.drako-ab-budget .drako-ab-hero .drako-ab-presets {
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .10);
  border-radius: 12px; overflow: hidden; height: 47px; align-items: stretch;
}
.drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip,
html[data-theme="dark"] .drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip {
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: #fff !important; padding: 0 17px; height: 100%; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; transition: background .15s;
}
/* divisore fra i segmenti (inset: non altera la larghezza del blocco) */
.drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip + .drako-ab-chip,
html[data-theme="dark"] .drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip + .drako-ab-chip {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22);
}
.drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip:hover,
html[data-theme="dark"] .drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip:hover {
  background: rgba(255, 255, 255, .18) !important;
}
.drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip.is-active,
html[data-theme="dark"] .drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip.is-active {
  background: #fff !important; color: var(--ab-blue) !important;
}

/* tre blocchi alla stessa altezza, allineati in basso */
.drako-ab-budget .drako-ab-bar { align-items: flex-end; gap: 12px; }
.drako-ab-budget .drako-ab-go { height: 47px; padding: 0 26px; margin-left: 0; }

/* Sotto i 720px il segmentato non ci sta su una riga: torna a pillole.
   Il selettore ripete html[data-theme="dark"] perche' la regola del segmentato
   qui sopra e' scritta anche in versione scura (piu' specifica): senza, in tema
   scuro il ripiego non scattava e le pillole restavano squadrate e attaccate. */
@media (max-width: 720px) {
  .drako-ab-budget .drako-ab-hero .drako-ab-presets,
  html[data-theme="dark"] .drako-ab-budget .drako-ab-hero .drako-ab-presets {
    height: auto; flex-wrap: wrap; border: 0; background: none; overflow: visible;
  }
  .drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip,
  html[data-theme="dark"] .drako-ab-budget .drako-ab-hero .drako-ab-presets .drako-ab-chip {
    border: 1px solid rgba(255,255,255,.28) !important; border-radius: 10px !important;
    background: rgba(255,255,255,.10) !important; height: 40px; box-shadow: none !important; margin: 0 6px 6px 0;
  }
}

/* ---- CARD FASCIA BUDGET: cliccabili per intero ---------------------------- */
/* Il prezzo era ripetuto due volte nella stessa card (titolo + "Genera con
   1.700 €" nel bottone): ora il bottone dice solo l'azione e sta a tutta
   larghezza, chiudendo la card invece di galleggiare a sinistra. Tutta la card
   e' cliccabile, come promette l'intestazione della sezione. */
.drako-ab-tier[data-budget] { cursor: pointer; }
.drako-ab-tier[data-budget]:focus-visible { outline: 2px solid var(--ab-blue); outline-offset: 2px; }
.drako-ab-tier .drako-ab-tier-go {
  align-self: stretch; width: 100%; text-align: center; padding: 10px 14px; font-size: 13.5px;
  /* il clic lo gestisce la card: il bottone e' solo il richiamo visivo */
  pointer-events: none;
}
/* l'hover della card accende anche il bottone, cosi' si capisce che e' un tutt'uno */
/* !important: il tema scuro del negozio azzera il fondo dei <button> con una
   regola !important, quindi senza questo il bottone non si riempie mai (ne'
   all'hover ne' in attesa) - verificato provando a forzarlo anche inline. */
.drako-ab-tier[data-budget]:hover .drako-ab-tier-go { background: var(--ab-blue) !important; color: #fff !important; }

/* ---- BENEFICI: icona SOPRA, come i passaggi -------------------------------- */
/* Era l'unico blocco della pagina con l'icona ACCANTO al testo: i titoli
   partivano 56px piu' a destra (779 contro 723) mentre testata di sezione,
   card fascia e passaggi allineano tutti allo stesso bordo. Scendendo lungo la
   pagina quella riga rompeva il ritmo verticale ed era il disallineamento che
   si notava. Impilando l'icona come fanno le schede "Come funziona", tutti i
   testi della pagina partono dallo stesso punto. */
.drako-ab-benefit { display: flex; flex-direction: column; gap: 0; }
.drako-ab-benefit-ic { margin: 0 0 13px; }

/* ---- CARD FASCIA IN ATTESA ------------------------------------------------ */
/* La generazione dura qualche secondo e il riquadro di caricamento sta in cima
   alla pagina: da qui non si vede. La card cliccata mostra quindi un proprio
   segnale - bottone pieno con rotellina - cosi' e' chiaro che sta lavorando e
   quale fascia si e' scelto. Le altre card si spengono, per non invitare a un
   secondo clic mentre la prima e' in corso. */
.drako-ab-tier.is-loading { border-color: var(--ab-blue); }
.drako-ab-tier.is-loading .drako-ab-tier-go {
  background: var(--ab-blue) !important; color: #fff !important; border-color: var(--ab-blue) !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.drako-ab-tier.is-loading .drako-ab-tier-go::before {
  content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: ab-spin .7s linear infinite;
}
/* mentre una card lavora, le altre restano visibili ma chiaramente inattive */
.drako-ab-tiers:has(.is-loading) .drako-ab-tier:not(.is-loading) { opacity: .55; pointer-events: none; }

/* Riepilogo VUOTO: niente riquadro grigio a vuoto. Vale anche fuori dal ciclo
   di caricamento (es. se il render fallisce a meta'), quindi sta nel CSS e non
   solo nel JS che nasconde la colonna. */
.drako-ab-summary:empty { display: none; }

/* ===========================================================================
   GENERATORI DENTRO LA SCHEDA PRODOTTO (.drako-abx)
   Stanno fra il breadcrumb e la foto. Tono da BARRA DI COMANDO, non da hero:
   l'hero blu delle vecchie landing qui competerebbe con la scheda prodotto,
   che e' il contenuto principale della pagina.
   =========================================================================== */
.drako-abx {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 20px 14px;
  margin: 0 0 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.drako-abx-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.drako-abx-title { margin: 0; font-size: 17px; font-weight: 700; color: #0f172a; }

/* Schede: controllo segmentato, come i preset della vecchia landing. */
.drako-abx-tabs { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.drako-abx-tab {
  appearance: none; border: 0; background: #f8fafc; cursor: pointer;
  padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: #475569;
  border-right: 1px solid #cbd5e1;
}
.drako-abx-tab:last-child { border-right: 0; }
.drako-abx-tab.is-on { background: #1c63ab; color: #fff; }

.drako-abx-panel { display: none; }
.drako-abx-panel.is-on { display: block; }

.drako-abx-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.drako-abx-lbl { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 5px; }

.drako-abx-slider-wrap { flex: 1 1 320px; min-width: 240px; }
.drako-abx-slider { width: 100%; accent-color: #1c63ab; cursor: pointer; }
.drako-abx-slider-scale {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: #94a3b8; margin-top: 2px;
}
/* Il valore e' il dato che il cliente guarda mentre trascina: grande e fermo,
   con larghezza minima perche' passando da 1.600 a 8.000 non ballino i campi. */
.drako-abx-val {
  font-size: 24px; font-weight: 700; color: #0f172a;
  min-width: 116px; text-align: right; line-height: 1.1; padding-bottom: 2px;
}

.drako-abx-field { flex: 0 1 auto; min-width: 150px; }
.drako-abx-select {
  width: 100%; padding: 8px 10px; font-size: 14px;
  border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #0f172a;
}

.drako-abx-go {
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 22px; border-radius: 8px;
  background: #f5b301; color: #1a1a1a;
  font-size: 15px; font-weight: 700; white-space: nowrap;
}
.drako-abx-go:disabled { background: #e2e8f0; color: #94a3b8; cursor: default; }
.drako-abx.is-busy { opacity: .75; }

.drako-abx-hint { margin: 10px 0 0; font-size: 12.5px; color: #64748b; }
.drako-abx-err {
  margin-top: 10px; padding: 8px 12px;
  background: #fef2f2; border-left: 3px solid #dc2626; border-radius: 0 6px 6px 0;
  font-size: 13px; color: #991b1b;
}
.drako-abx-err[hidden] { display: none; }

@media (max-width: 700px) {
  .drako-abx { padding: 14px; }
  .drako-abx-row { gap: 12px; }
  .drako-abx-val { text-align: left; min-width: 0; }
  .drako-abx-go { width: 100%; }
  .drako-abx-field { flex: 1 1 100%; }
}

/* Dark mode: la scheda prodotto ce l'ha, questa barra ci vive dentro. */
[data-theme="dark"] .drako-abx { background: var(--drako-bg-surface, #1b1f27); border-color: #333a45; }
[data-theme="dark"] .drako-abx-title,
[data-theme="dark"] .drako-abx-val { color: var(--drako-text, #e6e6e6); }
[data-theme="dark"] .drako-abx-tab { background: #232833; color: #b8c0cc; border-color: #333a45; }
[data-theme="dark"] .drako-abx-tabs { border-color: #333a45; }
[data-theme="dark"] .drako-abx-select { background: #232833; color: #e6e6e6; border-color: #3a424f; }

/* Le due spunte del generatore incorporato. Riga a se' sotto i pannelli: sono
   condizioni della build (valgono per budget e per gioco), non parametri di
   uno dei due generatori. */
.drako-abx-flags { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
.drako-abx-flag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: #334155; cursor: pointer; user-select: none;
}
.drako-abx-flag input { width: 16px; height: 16px; accent-color: #1c63ab; cursor: pointer; }
.drako-abx-flag-note { font-style: normal; color: #94a3b8; font-size: 12.5px; }
[data-theme="dark"] .drako-abx-flag { color: #c8d0da; }
[data-theme="dark"] .drako-abx-flag-note { color: #8891a0; }

/* ===========================================================================
   GENERATORE DENTRO LA SCHEDA PRODOTTO (.drako-ab-embed)
   Riusa l'hero blu delle vecchie landing, senza il gradiente: dentro la scheda
   prodotto il degrade' radiale competeva con la foto del PC accanto.
   =========================================================================== */
.drako-ab-embed { max-width: none; padding: 0; margin: 0 0 16px; }
.drako-ab-embed .drako-ab-hero {
  margin: 0;
  padding: 22px 26px 20px;
  border-radius: 12px;
  background: #1c63ab;          /* blu pieno, niente gradiente */
  box-shadow: 0 6px 18px rgba(16, 58, 103, .18);
}
.drako-ab-embed .drako-ab-hero-inner { max-width: none; }
.drako-ab-embed .drako-ab-h1 { font-size: 24px; margin-bottom: 4px; }
.drako-ab-embed .drako-ab-sub { font-size: 14px; margin-bottom: 14px; }
.drako-ab-embed .drako-ab-kicker { margin-bottom: 8px; }
.drako-ab-embed .drako-ab-hint { margin-top: 10px; }

/* Schede budget / gioco: controllo segmentato sul fondo blu. */
.drako-abx-tabs { display: inline-flex; border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.drako-abx-tab {
  appearance: none; border: 0; cursor: pointer;
  padding: 9px 20px; font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, .14); color: #fff;
  border-right: 1px solid rgba(255, 255, 255, .28);
}
.drako-abx-tab:last-child { border-right: 0; }
.drako-abx-tab:hover { background: rgba(255, 255, 255, .24); }
.drako-abx-tab.is-on { background: #fff; color: #1c63ab; }

.drako-abx-panel { display: none; }
.drako-abx-panel.is-on { display: block; }

/* Slider del budget: occupa la riga, il valore resta grande e fermo accanto. */
.drako-abx-slider-field { flex: 1 1 340px; min-width: 240px; }
.drako-abx-slider {
  width: 100%; margin: 6px 0 0; cursor: pointer;
  accent-color: #ffd23f;        /* stessa tinta del bottone: la maniglia si vede sul blu */
}
.drako-abx-slider-scale {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: rgba(255, 255, 255, .8); margin-top: 2px;
}
.drako-abx-val {
  font-size: 26px; font-weight: 800; color: #fff;
  min-width: 130px; text-align: right; line-height: 1.1; align-self: flex-end; padding-bottom: 4px;
}

/* Le due spunte: riga sotto i pannelli, valgono per entrambe le schede. */
.drako-abx-flags { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.drako-abx-flag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: rgba(255, 255, 255, .95); cursor: pointer; user-select: none;
}
.drako-abx-flag input { width: 16px; height: 16px; accent-color: #ffd23f; cursor: pointer; }
.drako-abx-flag-note { font-style: normal; color: rgba(255, 255, 255, .7); font-size: 12.5px; }

.drako-abx-err {
  margin-top: 12px; padding: 9px 13px;
  background: rgba(192, 57, 43, .92); border-radius: 8px;
  font-size: 13.5px; color: #fff;
}
.drako-abx-err[hidden] { display: none; }
.drako-ab-embed.is-busy { opacity: .85; pointer-events: none; }

@media (max-width: 760px) {
  .drako-ab-embed .drako-ab-hero { padding: 16px; }
  .drako-abx-val { text-align: left; min-width: 0; }
  .drako-ab-embed .drako-ab-go { margin-left: 0; width: 100%; }
  .drako-ab-embed .drako-ab-bar { gap: 12px; }
}

/* ---- Rifiniture generatore incorporato (2026-08-03, secondo giro) ---------- */

/* ALLINEAMENTO con la scheda prodotto sotto. Quella ha margin:-20px -20px 24px
   (si tira fuori dal padding del contenitore e SU di 20px): senza gli stessi
   margini laterali il riquadro blu risultava rientrato di 20px per lato, e il
   -20px in alto della card si mangiava lo spazio fra i due (misurato: -4px, si
   toccavano). Il margine sotto e' 40 = 20 recuperati + 20 di respiro vero. */
.drako-ab-embed { margin: 0 -20px 40px; }
@media (max-width: 900px) { .drako-ab-embed { margin: 0 0 24px; } }

/* Il bottone segue i campi invece di volare a destra: .drako-ab-go ha
   margin-left:auto, che nella barra stretta delle landing andava bene e qui, su
   1.440px, lasciava mezzo riquadro vuoto in mezzo. */
.drako-ab-embed .drako-ab-go { margin-left: 0; }
.drako-ab-embed .drako-ab-bar { align-items: flex-end; gap: 16px; }

/* Budget: lo slider non prende tutta la riga - a schermo largo diventava una
   corsa di un metro per 60 tacche. Larghezza fissa e valore accanto. */
.drako-abx-slider-field { flex: 0 1 420px; min-width: 260px; }
.drako-abx-val { min-width: 120px; text-align: left; }

/* Le due spunte: riquadro proprio, allineate ai campi e non appiccicate al
   bordo. Casella bianca con spunta blu invece dell'accent giallo, che sul fondo
   blu si leggeva come un avviso. */
.drako-abx-flags {
  align-items: center; gap: 20px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.drako-abx-flag { gap: 9px; font-weight: 600; }
.drako-abx-flag input {
  width: 18px; height: 18px; margin: 0;
  accent-color: #fff;
  border-radius: 4px;
}
.drako-abx-flag-note { font-weight: 400; }

/* Copertina del gioco dentro il campo + miniature nell'elenco di ricerca. */
.drako-abx-combo-img { display: flex; align-items: center; background: var(--ab-field-bg); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.drako-abx-combo-img .drako-ab-combo-input { box-shadow: none; border-radius: 0; }
.drako-abx-game-thumb { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; margin-left: 10px; flex: 0 0 auto; }
.drako-abx-combo-opt { display: flex; align-items: center; gap: 10px; }
.drako-abx-opt-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #223; }
.drako-abx-combo-list { max-height: 340px; }

/* Sezioni informative in fondo: stesso allineamento del personalizzatore.
   Ereditavano da .drako-ab il max-width 1180 + margin auto + padding laterale
   delle vecchie landing, quindi risultavano centrate e piu' strette di tutto il
   resto della scheda. Il -20px e' quello del personalizzatore sopra. */
.drako-ab-embed-info { max-width: none; padding: 0; margin: 0 -20px; }
@media (max-width: 900px) { .drako-ab-embed-info { margin: 0; } }

/* Copertina del gioco: 30px dentro un campo alto 46 si perdeva. Riquadro pieno
   a sinistra del testo, separato da un filo, cosi' si legge come parte del campo
   e non come un'icona qualsiasi. */
.drako-abx-game-thumb {
  width: 40px; height: 40px;
  margin: 3px 0 3px 3px;
  border-radius: 8px;
  border-right: 0;
}
.drako-abx-combo-img .drako-ab-combo-input { padding-left: 10px; }

/* La tendina dei giochi era TAGLIATA: il contenitore del campo aveva
   overflow:hidden (serviva ad arrotondare la copertina agli angoli) e l'elenco,
   che e' un figlio in posizione assoluta, veniva ritagliato dentro il campo.
   Gli angoli si arrotondano sui singoli elementi, non ritagliando il padre. */
.drako-abx-combo-img { overflow: visible; }
.drako-abx-combo-img .drako-ab-combo-input { border-radius: 0 12px 12px 0; }

/* INTERRUTTORI al posto delle caselle. La casella nativa resta nel markup (regge
   tastiera, focus e lettori di schermo) ma e' fuori vista: si disegna la levetta
   con due elementi, cosi' lo stato si legge da lontano senza cercare la spunta. */
.drako-abx-sw-input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.drako-abx-sw {
  position: relative; flex: 0 0 auto;
  width: 42px; height: 24px;
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  transition: background .18s;
}
.drako-abx-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .18s;
}
.drako-abx-sw-input:checked + .drako-abx-sw { background: #ffd23f; border-color: #ffd23f; }
.drako-abx-sw-input:checked + .drako-abx-sw::after { transform: translateX(18px); }
/* Il focus da tastiera si vede sulla levetta, non sulla casella nascosta. */
.drako-abx-sw-input:focus-visible + .drako-abx-sw { outline: 2px solid #fff; outline-offset: 2px; }
.drako-abx-sw-lbl { line-height: 1.3; }
@media (prefers-reduced-motion: reduce) {
  .drako-abx-sw, .drako-abx-sw::after { transition: none; }
}

/* ---- Slider e fondo: rifiniture (2026-08-03, terzo giro) ------------------- */

/* Lo slider era quello di sistema: barra sottile, maniglia piccola, e su fondo
   scuro quasi invisibile. Si disegnano traccia e maniglia a mano (servono i
   selettori di entrambi i motori, non esiste una forma unica). */
.drako-abx-slider {
  -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  outline: none;
}
.drako-abx-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: transparent; }
.drako-abx-slider::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .3); }
.drako-abx-slider::-moz-range-progress { height: 8px; border-radius: 999px; background: #ffd23f; }
.drako-abx-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -7px;
  background: #ffd23f; border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer;
}
.drako-abx-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  background: #ffd23f; border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer;
}
.drako-abx-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 2px; }

/* Il riquadro NON deve avere sfumature: richiesta esplicita, blu pieno. In tema
   scuro il fondo della scheda prodotto lo virava e la barra dei campi sembrava
   un secondo riquadro incassato. Blu pieno in entrambi i temi, e i campi si
   appoggiano direttamente sopra senza contenitore proprio. */
.drako-ab-embed .drako-ab-hero,
[data-theme="dark"] .drako-ab-embed .drako-ab-hero {
  background: #1c63ab !important;
  background-image: none !important;
}
.drako-ab-embed .drako-ab-bar,
[data-theme="dark"] .drako-ab-embed .drako-ab-bar { background: transparent !important; }

/* TEMA SCURO: il pannello del generatore si colorava di grigio-antracite dentro
   il riquadro blu. Non e' una regola nostra: il tema scuro del negozio ha
   selettori globali che pescano per SOTTOSTRINGA nel nome classe (-panel, -box,
   -card...) e .drako-abx-panel ci finisce dentro. Va riportato a trasparente
   esplicitamente, come si e' gia' dovuto fare altrove nel configuratore. */
.drako-abx-panel,
[data-theme="dark"] .drako-abx-panel,
html[data-theme="dark"] .drako-ab-embed .drako-abx-panel {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Stessa ragione per la riga delle spunte e per il contenitore dei campi. */
[data-theme="dark"] .drako-abx-flags,
[data-theme="dark"] .drako-ab-embed .drako-ab-field { background: transparent !important; }

/* Modulo GIOCO: copertina grande a sinistra, campi accanto. Sta DENTRO il
   riquadro blu, non fuori: e' l'illustrazione che avevano le vecchie landing.
   Il riquadro resta al suo posto anche senza scelta (l'immagine e' nascosta),
   cosi' i campi non saltano quando compare. */
.drako-abx-fps-wrap { display: flex; align-items: flex-start; gap: 18px; }
.drako-abx-cover {
  flex: 0 0 150px; width: 150px; height: 150px;
  border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  display: flex; align-items: center; justify-content: center;
}
.drako-abx-cover .drako-abx-game-thumb {
  width: 100%; height: 100%; object-fit: cover;
  margin: 0; border-radius: 0; display: block;
}
.drako-abx-cover .drako-abx-game-thumb[hidden] { display: none; }
/* I campi occupano il resto e vanno a capo col bottone, come nell'anteprima. */
.drako-abx-fps-wrap .drako-ab-bar { flex: 1 1 auto; min-width: 0; }
@media (max-width: 760px) {
  .drako-abx-fps-wrap { flex-direction: column; }
  .drako-abx-cover { flex: 0 0 auto; width: 110px; height: 110px; }
}

/* ---- Rifiniture generatore (2026-08-03, quarto giro) ---------------------- */

/* TEMA SCURO: il riquadro del generatore non resta blu. In chiaro il blu e'
   l'identita' del negozio, in scuro spiccava come una toppa dentro una pagina
   antracite. Stessa tinta delle superfici scure del configuratore. */
[data-theme="dark"] .drako-ab-embed .drako-ab-hero,
html[data-theme="dark"] .drako-ab-embed .drako-ab-hero {
  background: #222630 !important;
  border: 1px solid #333a45;
  box-shadow: none;
}
[data-theme="dark"] .drako-abx-tab { background: #2b313c; }
[data-theme="dark"] .drako-abx-tab.is-on { background: #fff; color: #1c63ab; }

/* COPERTINA piu' compatta e campi allineati al suo centro: a 150px la riga
   diventava alta il doppio dei campi e sotto restava un buco di blu, con il
   contenuto che sembrava spinto a destra. */
.drako-abx-cover { flex: 0 0 104px; width: 104px; height: 104px; }
.drako-abx-fps-wrap { align-items: center; gap: 16px; }
@media (max-width: 760px) { .drako-abx-cover { width: 88px; height: 88px; } }

/* SLIDER: riga su una linea sola e valore allineato al bottone. Il prezzo
   "ballava" perche' il campo dello slider porta l'etichetta e la scala sotto,
   quindi e' piu' alto degli altri elementi della riga. */
.drako-abx-slider-field { flex: 0 1 460px; }
.drako-ab-embed .drako-abx-panel[data-abx-panel="budget"] .drako-ab-bar { align-items: center; }
.drako-abx-val {
  align-self: center; padding-bottom: 0;
  min-width: 132px; text-align: right;
  font-variant-numeric: tabular-nums;   /* la cifra non cambia larghezza mentre si trascina */
}
.drako-ab-embed .drako-abx-panel[data-abx-panel="budget"] .drako-ab-go { align-self: center; }
/* Traccia piu' marcata: su fondo chiaro il bianco al 30% spariva. */
.drako-abx-slider { background: rgba(255, 255, 255, .38); }
[data-theme="dark"] .drako-abx-slider { background: rgba(255, 255, 255, .18); }

/* Barra del budget: parte PIENA fino alla maniglia. Il punto di taglio arriva da
   --abx-pct, che il JS aggiorna a ogni movimento (Chrome non ha un equivalente
   di ::-moz-range-progress). Il fallback a 0% vale solo nell'istante prima che
   il JS parta. */
.drako-abx-slider {
  background: linear-gradient(to right,
              #ffd23f 0 var(--abx-pct, 0%),
              rgba(255, 255, 255, .38) var(--abx-pct, 0%) 100%) !important;
}
[data-theme="dark"] .drako-abx-slider {
  background: linear-gradient(to right,
              #ffd23f 0 var(--abx-pct, 0%),
              rgba(255, 255, 255, .18) var(--abx-pct, 0%) 100%) !important;
}
/* Firefox disegna la sua traccia sopra il gradiente: la si rende trasparente
   e si tiene il suo ::-moz-range-progress, che fa lo stesso lavoro. */
.drako-abx-slider::-moz-range-track { background: transparent; }

/* COPERTINA 150px come nell'anteprima concordata, e bottone su una SECONDA riga
   sotto i campi. Il primo tentativo la teneva a 150 col bottone in linea: la
   riga restava alta quanto la copertina e sotto i campi si apriva un vuoto che
   faceva sembrare il contenuto spinto a destra. Il secondo la rimpiccioliva a
   104: spazio risolto ma non era piu' la copertina chiesta. Con il bottone che
   va a capo le due righe riempiono l'altezza della copertina e tornano entrambe
   le cose. */
.drako-abx-cover { flex: 0 0 150px; width: 150px; height: 150px; }
.drako-abx-fps-wrap { align-items: flex-start; gap: 18px; }
.drako-abx-fps-wrap .drako-ab-bar { flex-wrap: wrap; align-items: flex-end; row-gap: 14px; }
.drako-abx-fps-wrap .drako-ab-go { flex: 0 0 auto; margin-left: 0; }
/* Il bottone occupa una riga sua: si spinge a capo con un separatore elastico. */
.drako-abx-fps-wrap .drako-ab-bar::before { content: ""; order: 98; flex-basis: 100%; height: 0; }
.drako-abx-fps-wrap .drako-ab-go { order: 99; }
@media (max-width: 760px) {
  .drako-abx-cover { flex: 0 0 110px; width: 110px; height: 110px; }
}

/* COPERTINA a fianco di TUTTO il modulo gioco: campi, bottone, interruttori e
   nota stanno nella colonna di destra, la copertina li fiancheggia per intera
   altezza (align-items:stretch). Prima affiancava i soli campi e il resto le
   passava sotto. */
.drako-abx-side { display: flex; align-items: stretch; gap: 20px; }
.drako-abx-side-main { flex: 1 1 auto; min-width: 0; }
/* ALTEZZA FISSA, non piu' "quanto la colonna accanto": le copertine dei giochi
   sono verticali (285x380), quindi con l'altezza libera l'immagine allargata a
   250px si tirava dietro tutto il riquadro - da 268 a 346px - e in mezzo
   restava una fascia vuota. Il ritaglio lo fa object-fit:cover. */
.drako-abx-side .drako-abx-cover {
  flex: 0 0 250px; width: 250px; height: 280px;
  align-self: center;
  min-height: 0;
}
/* Dentro la colonna, gli elementi non hanno piu' il margine superiore che
   serviva quando erano a tutta larghezza. */
.drako-abx-side-main .drako-abx-flags { margin-top: 14px; }
.drako-abx-side-main .drako-ab-hint { margin-top: 10px; }
/* Il bottone torna in linea coi campi: la seconda riga serviva a riempire
   l'altezza della copertina, che ora si allunga da sola. */
.drako-abx-side .drako-ab-bar::before { content: none; }
.drako-abx-side .drako-ab-go { order: 0; }

/* Campo FPS scrivibile: stessa larghezza contenuta del vecchio combo. */
.drako-abx-combo-fpsfield .drako-ab-combo-input { width: 118px; min-width: 0; }

/* Larghezze dei tre campi TARATE SUL CONTENUTO, non tutte uguali: i titoli dei
   giochi sono lunghi ("Tom Clancy's Rainbow Six Siege") e venivano tagliati,
   mentre la risoluzione e' sempre una sigla di cinque caratteri e si portava
   dietro mezza casella vuota. */
.drako-abx-side #abx-game-input { width: 290px; min-width: 0; }
.drako-abx-side #abx-res { width: 100px; min-width: 0; }
.drako-abx-side #abx-fps-input { width: 100px; min-width: 0; }

@media (max-width: 760px) {
  .drako-abx-side { flex-direction: column; }
  .drako-abx-side .drako-abx-cover { flex: 0 0 auto; width: 120px; height: 120px; min-height: 0; align-self: flex-start; }
}

/* La copertina parte dall'alto del riquadro e affianca ANCHE titolo e
   sottotitolo: prima apriva sotto di loro, quindi restava un angolo vuoto in
   alto a sinistra e l'immagine si allungava sotto per compensare. Larghezza
   maggiore perche' ora ha piu' altezza da riempire. A 250px riempie anche il
   vuoto che restava a destra dei campi: e' l'unica immagine del riquadro.
   L'altezza e' bloccata sopra: vedi la nota su object-fit. */
.drako-abx-side .drako-abx-cover { flex: 0 0 250px; width: 250px; height: 280px; align-self: center; }
.drako-abx-side-main .drako-ab-kicker { margin-top: 0; }
/* La riga dei campi non deve piu' allargarsi per riempire l'altezza: ci pensa
   la colonna. Elementi allineati in basso, come nel resto della barra. */
.drako-abx-side-main .drako-ab-bar { align-items: flex-end; }
@media (max-width: 760px) {
  .drako-abx-side .drako-abx-cover { flex: 0 0 130px; width: 130px; height: 130px; }
}

/* ---- Icone stile negozio e respiro (2026-08-03) --------------------------- */

/* Le PNG lucide del negozio al posto delle linee SVG: niente cornice colorata
   attorno, l'icona ha gia' il suo volume. */
.drako-ab-benefit-ic img,
.drako-abx-step-ic {
  /* 44px: la misura della fascia di fiducia in fondo alla pagina. A 30 erano
     troppo piccole e il disegno non si leggeva. */
  width: 44px; height: 44px; object-fit: contain; display: block;
}
.drako-ab-benefit-ic {
  background: none !important; border: 0 !important;
  width: auto !important; height: auto !important;
  padding: 0 !important;
}
/* Icona del passo in alto a DESTRA, in equilibrio col numero a sinistra:
   affiancata al numero stringeva i due elementi in un angolo e sbilanciava
   la scheda. Solo i VANTAGGI vogliono l'icona a sinistra (vedi sotto). */
.drako-ab-step { position: relative; }
.drako-abx-step-ic { position: absolute; top: 18px; right: 18px; opacity: .9; }

/* Vantaggi: icona allineata a SINISTRA sopra il titolo. La casella e' rimasta
   `display:flex` da quando conteneva un SVG centrato, e in colonna si stirava
   a tutta larghezza centrando la PNG; basta ancorare il contenuto a inizio
   riga e non far crescere la casella oltre l'icona. */
.drako-ab-benefit-ic { justify-content: flex-start !important; align-self: flex-start; }

/* "Come funziona" APRE la pagina: stesso allineamento del resto e respiro
   sotto. Il margine di 42px in cima a .drako-ab-sec arrivava dalle vecchie
   landing, dove la sezione stava in mezzo ad altre; qui e' il primo elemento
   e lasciava 62px di vuoto sotto il fil di Arianna. */
.drako-ab-embed-steps { margin: 0 -20px 38px; }
.drako-ab-embed-steps .drako-ab-sec { margin-top: 0; }

/* Il pulsante non deve cambiare misura fra riposo e attesa, ma la larghezza
   NON si riserva da CSS: fissarla a 250px allargava il pannello e mandava la
   riga dei campi sotto la testata in modo PERMANENTE, cioe' peggio del salto
   che doveva risolvere. La blocca il JS al valore naturale, solo per la durata
   dell'attesa (vedi setBusy in drako_autobuild_embed.js), e l'etichetta di
   attesa e' corta apposta per starci dentro. */
.drako-ab-go.is-loading { overflow: hidden; white-space: nowrap; }
@media (max-width: 900px) { .drako-ab-embed-steps { margin: 0 0 28px; } }

/* DARK: la <section> stessa veniva dipinta come una scheda. E' la globale
   `[data-theme="dark"] [class*="-step"]` (stylesheet.css ~10763): "drako-ab-
   embed-steps" contiene "-step" tanto quanto una card. Risultato: contenitore
   e tre schede dello stesso #22262e, blocco piatto e riquadro di troppo.
   Nota: il fix gemello di riga ~557 e' un selettore DISCENDENTE
   (`.drako-ab .drako-ab-steps`) e qui non arriva, perche' la sezione E' essa
   stessa l'elemento `.drako-ab`. La globale pesa (0,4,0) - serve !important. */
html[data-theme="dark"] .drako-ab-embed-steps {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}

/* Testata del generatore. L'icona a fianco dell'occhiello e' stata TOLTA su
   richiesta: il titolo si regge da solo e l'icona rubava spazio in orizzontale
   proprio dove serviva al testo. */
.drako-abx-headrow { display: flex; align-items: flex-start; gap: 14px; }
.drako-abx-headtxt { min-width: 0; }

/* ATTESA: indicatore che gira dentro il pulsante. Il solo cambio di etichetta
   non bastava - fermo, non si distingue da un blocco. Il cerchio e' scuro
   perche' il pulsante e' giallo. */
.drako-ab-go.is-loading::before {
  content: ''; display: inline-block; width: 14px; height: 14px;
  margin-right: 9px; vertical-align: -2px;
  border: 2px solid rgba(28, 36, 48, .28); border-top-color: #1c2430;
  border-radius: 50%; animation: drakoAbSpin .7s linear infinite;
}
@keyframes drakoAbSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .drako-ab-go.is-loading::before { animation-duration: 2.4s; }
}

/* RESPIRO dentro il riquadro del generatore: era tutto compresso contro i
   bordi e fra una riga e l'altra. Valori ristretti il 04-08: con l'icona di
   testata il riquadro si leggeva comunque, e cosi' com'era restava troppo
   vuoto in verticale (~26px recuperati fra testata, spunte e nota). */
.drako-ab-embed .drako-ab-hero { padding: 18px 24px 16px; }
.drako-ab-embed .drako-ab-sub { margin-bottom: 14px; }
.drako-ab-embed .drako-ab-bar { gap: 18px; row-gap: 14px; }
.drako-ab-embed .drako-ab-hint { margin-top: 10px; }

/* BARRA: titolo a sinistra, comandi a destra, sulla STESSA riga.
   Storia delle prove, per non ripeterle: stirare i comandi fino al bordo dava
   un cursore da 1080px e una casella da 650px per scriverci il nome di un
   gioco; due colonne a misura fissa mandavano a capo i quattro comandi del
   modulo FPS; il contenuto centrato non e' piaciuto - e in effetti un modulo
   da compilare si legge peggio centrato, l'occhio perde il bordo sinistro su
   cui incolonnare le etichette.
   Qui non ci sono colonne: il gruppo dei comandi tiene la sua misura naturale
   (flex 0 0 auto, niente crescite), il testo occupa quello che resta fino a
   una misura leggibile, e lo spazio fra i due e' quello che li separa. Niente
   vuoto a destra perche' i comandi ci arrivano da soli.
   Sotto i 1080px si impila: affiancarli qui vorrebbe dire comprimerli. */
@media (min-width: 1080px) {
  .drako-ab-embed .drako-abx-center {
    display: flex; align-items: center; flex-wrap: wrap;
    column-gap: 40px; row-gap: 6px;
  }
  .drako-ab-embed .drako-abx-center > .drako-abx-headrow {
    flex: 0 1 auto; max-width: 560px; margin-bottom: 0;
  }
  /* Nel modulo FPS la copertina del gioco si prende gia' 200px sulla sinistra e
     i comandi sono quattro invece di tre: al testo restano ~400px, e con 560
     la riga non ci stava piu' e il contenitore andava a capo. Da notare che
     con flex-wrap l'andare a capo VIENE PRIMA del restringimento, quindi non
     bastava che l'elemento fosse comprimibile. */
  /* 360 e non 380: larghezza utile 1160 = testo + stacco + gruppo comandi, e i
     comandi non si stringono (misura minima per essere usabili). Con
     290/100/100 piu' il bottone sommano 765, quindi al testo restano 370
     scarsi: a 380 il gruppo andrebbe a capo lasciando un vuoto. */
  .drako-ab-embed .drako-abx-side-main.drako-abx-center > .drako-abx-headrow { max-width: 360px; }
  .drako-ab-embed .drako-abx-side-main.drako-abx-center { column-gap: 24px; }
  /* I comandi non crescono e non si stringono: restano della misura giusta
     per essere usati, ancorati al bordo destro. */
  .drako-ab-embed .drako-abx-center > .drako-abx-panel { flex: 0 0 auto; margin-left: auto; }
  /* La casella dei marchi torna su una riga sua a tutta larghezza: affiancata
     ai tre campi stringeva tutto e il titolo perdeva la sua colonna. */
  .drako-ab-embed .drako-abx-brands-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  /* Filetto e piede sotto, a tutta larghezza: fanno da base al riquadro. */
  .drako-ab-embed .drako-abx-center > .drako-abx-foot,
  .drako-ab-embed .drako-abx-center > .drako-abx-err { flex: 1 0 100%; }
}

/* Misura FISSA e comoda per il cursore: nel gruppo comandi a larghezza
   naturale, lasciato libero di crescere si allungava a tutta pagina, e
   lasciato alla larghezza di contenuto sarebbe stato un moncone di 130px con
   cui non si sceglie niente. 340px sono una corsa che si governa bene. */
.drako-ab-embed .drako-abx-slider-field { flex: 0 0 340px; }
/* Il campo del gioco NON cresce: i quattro comandi del modulo FPS sommano gia'
   751px e con flex-grow arrivava da solo a 650. */
.drako-ab-embed .drako-ab-bar-fps > .drako-ab-field:first-child { flex: 0 1 auto; }

/* PIEDE su una riga sola: spunte a sinistra, nota a destra. Prima erano due
   righe intere con meta' larghezza sprecata. Il filetto divisorio passa qui,
   era su .drako-abx-flags. */
.drako-abx-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 20px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.drako-abx-foot .drako-abx-flags { margin-top: 0; padding-top: 0; border-top: 0; }
.drako-abx-foot .drako-ab-hint { margin-top: 0; }

/* Interruttori: solo icona accanto alla levetta, NESSUN contenitore. La
   pastiglia col fondo traslucido chiudeva ogni spunta in un riquadro e
   appesantiva la riga.
   Niente desaturazione sull'interruttore spento: a 22px un'icona grigia si
   legge come immagine rotta, e acceso/spento lo dice gia' la levetta. */
/* Icone dei due interruttori: piu' piccole di quelle delle schede perche' qui
   stanno in linea con l'etichetta, ma non minuscole. */
.drako-abx-flag-ic { width: 34px; height: 34px; object-fit: contain; flex: none; }

/* I DUE INTERRUTTORI devono RISALTARE: sono le due decisioni che cambiano la
   build, e in mezzo a testo dello stesso peso passavano inosservati. Etichetta
   piu' grande e piena, e una pastiglia appena percettibile che li stacca dal
   fondo senza chiuderli in un riquadro (quello era gia' stato scartato). */
.drako-abx-foot .drako-abx-flags { gap: 12px; }
.drako-abx-flag {
  padding: 7px 16px 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  transition: background .16s ease;
}
.drako-abx-flag:hover { background: rgba(255, 255, 255, .13); }
.drako-abx-flag .drako-abx-sw-lbl { font-size: 14.5px; font-weight: 700; }
.drako-abx-flag .drako-abx-flag-note { font-weight: 400; font-size: 12.5px; }
/* Acceso, l'interruttore si vede da lontano: la pastiglia prende il giallo del
   marchio, cosi' si legge lo STATO prima ancora dell'etichetta. Il velo al 16%
   si perdeva sul fondo scuro: ora il giallo e' pieno e il testo diventa scuro,
   come sul bottone "Genera la build". Spento resta una pastiglia neutra, cosi'
   acceso e spento si distinguono da lontano. */
.drako-abx-flag:has(.drako-abx-sw-input:checked) {
  background: rgba(255, 210, 63, .18);
  box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .75);
}
/* Testo CHIARO: il fondo torna al velo giallo trasparente, non piu' pieno, e su
   quello il testo scuro non si leggerebbe. Scritto con specificita' alta perche'
   la regola generale del tema scuro lo smorzava a grigio. */
.drako-ab .drako-abx-flag:has(.drako-abx-sw-input:checked),
.drako-ab .drako-abx-flag:has(.drako-abx-sw-input:checked) .drako-abx-sw-lbl,
html[data-theme="dark"] .drako-ab .drako-abx-flag:has(.drako-abx-sw-input:checked),
html[data-theme="dark"] .drako-ab .drako-abx-flag:has(.drako-abx-sw-input:checked) .drako-abx-sw-lbl { color: #fff; }
.drako-abx-flag:has(.drako-abx-sw-input:checked):hover { background: rgba(255, 210, 63, .26); }
/* Spento: bordo visibile e pastiglia piu' marcata, altrimenti sembra solo
   testo appoggiato al fondo. */
.drako-abx-flag {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .10);
  padding: 9px 18px 9px 12px;
}
.drako-abx-flag .drako-abx-sw-lbl { font-size: 15px; font-weight: 800; }
.drako-abx-slider { margin-top: 10px; }
.drako-abx-slider-scale { margin-top: 6px; }

/* ---- RICERCA MARCHI nel generatore (2026-08-04) --------------------------
   Sta sotto il sottotitolo, nella colonna del testo, dove si legge come parte
   della domanda "che PC vuoi" invece che come un comando in fondo al riquadro.
   Il riquadro del generatore e' BLU nel tema chiaro e antracite nello scuro:
   i colori sono espressi in bianco trasparente, che regge su entrambi. */
/* FASCIA a tutta larghezza fra il testo e gli interruttori. NESSUN riquadro
   proprio: fondo, bordo e filo giallo la facevano sembrare un ritaglio incollato
   sopra il pannello. Sta in piedi come la riga degli interruttori qui sotto -
   un filo di separazione e basta - e a risaltare ci pensano il titolo e i
   controlli, non una cornice. */
.drako-abx-brands {
  /* Il contenitore del pannello e' un flex a righe: senza questo la fascia
     diventava una colonna larga mezzo riquadro invece di una riga intera. */
  flex:1 0 100%; width:100%; box-sizing:border-box;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:16px 0 0; padding:0;
}
/* Titolo in linea col campo: a riga intera sprecava un'altezza per tre parole. */
/* Niente MAIUSCOLE: ora e' una domanda ("Hai un brand preferito?") e tutto in
   maiuscolo suonava come un ordine. Stesso corpo e stesso peso delle etichette
   degli altri campi (Gioco, Risoluzione, FPS desiderati). */
.drako-abx-brands-lbl {
  font-size:13px; font-weight:600; color:rgba(255,255,255,.9); white-space:nowrap;
}
/* Avviso "non arriviamo agli FPS chiesti": riga a tutta larghezza sotto i
   comandi, giallo tenue perche' e' un'informazione, non un errore - la build
   e' valida, semplicemente rende meno di quanto chiesto. */
/* NOTA DI ESITO, NON AVVISO DI PERICOLO (17/08/2026)
   Era ambra con triangolo: la grammatica dell'errore su un esito che errore
   non e'. La build c'e', e' valida e si puo' comprare; il catalogo non arriva
   agli FPS chiesti, e questo si dice. Il giallo qui costava due volte: gridava
   su un fatto normale e, a forza di gridare, toglieva peso all'ambra vera -
   quella dell'incompatibilita', che invece blocca l'acquisto.
   Resta una nota neutra: stesso bianco del riquadro, appena staccata dal fondo. */
.drako-abx-fpswarn {
  flex: 1 0 100%; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 0; padding: 10px 14px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  border-radius: 10px;
  font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .88);
}
/* La "i" non e' un'illustrazione: prende il colore del testo e resta di un
   corpo solo, cosi' se un domani cambia l'inchiostro del riquadro la segue. */
.drako-abx-fpswarn .drako-abx-fpswarn-ic { flex: none; opacity: .8; }
.drako-abx-fpswarn-x {
  flex: none; margin-left: auto; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .75);
  font-size: 18px; line-height: 1;
}
.drako-abx-fpswarn-x:hover { background: rgba(255, 255, 255, .20); color: #fff; }

/* Nota di coda: spiega cosa succede scegliendo un marchio. Sparisce quando non
   c'e' spazio, e' un di piu'. */
.drako-abx-brands-hint {
  margin-left:auto; font-size:12px; color:rgba(255,255,255,.62); white-space:nowrap;
}
@media (max-width:900px) { .drako-abx-brands-hint { display:none; } }
.drako-abx-brand-field { position:relative; }
/* Casella come quella del GIOCO (.drako-ab-select / .drako-ab-combo-input):
   angoli a 12px invece della pastiglia, fondo e testo del tema, ombra leggera.
   La pastiglia trasparente si leggeva come un'etichetta, non come un campo in
   cui scrivere. */
.drako-abx-brand-input {
  width:240px; padding:11px 14px; border:1px solid var(--ab-field-bd); border-radius:12px;
  background:var(--ab-field-bg); color:var(--ab-text); font-size:15px; font-weight:700; outline:none;
  box-shadow:0 6px 16px rgba(0,0,0,.12); box-sizing:border-box;
  transition:border-color .15s;
}
.drako-abx-brand-input::placeholder { color:var(--ab-muted); font-weight:500; }
.drako-abx-brand-input:focus { border-color:#9ec3ec; }

/* Tendina: fondo scuro con logo del marchio a sinistra. Vale per entrambi i
   temi perche' galleggia sopra la pagina, non sul riquadro. */
.drako-abx-brand-list {
  /* Alta quanto lo schermo permette: con 320px si vedevano sette marchi su
     duecento e per arrivare a "Seasonic" bisognava scorrere alla cieca. */
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; width:320px; max-height:min(62vh, 480px);
  overflow:auto; margin:0; padding:6px; list-style:none;
  /* Chiara nel tema chiaro come la tendina dei giochi (.drako-ab-combo-list):
     era scura in entrambi i temi e in pagina chiara sembrava di un'altra
     applicazione. Lo scuro sta nell'override piu' avanti. */
  background:#fff; border:1px solid var(--ab-border); border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.drako-abx-brand-list[hidden] { display:none; }
/* Righe come quelle della tendina dei GIOCHI (.drako-ab-combo-opt): stessa
   spaziatura, stesso corpo del testo, miniatura quadrata a sinistra. Erano due
   linguaggi diversi nello stesso pannello. */
.drako-abx-brand-opt {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:8px; font-size:14px; font-weight:600;
  color:var(--ab-text); cursor:pointer; transition:background .12s;
}
/* Il colore va forzato ANCHE sullo span: il testo sta dentro un figlio. */
.drako-abx-brand-opt > span { color:inherit; }
/* Evidenziazione DISCRETA come nei giochi: il fondo giallo pieno urlava e
   costringeva a ribaltare il colore del testo a ogni passaggio del mouse. */
.drako-abx-brand-opt:hover { background:var(--ab-hover); color:var(--ab-blue); }
/* Riquadro del logo di misura FISSA e sempre bianco: i loghi hanno proporzioni
   diversissime e senza una gabbia comune la colonna sembrava sfilacciata. */
/* Miniatura QUADRATA come la copertina del gioco. Fondo bianco perche' i loghi
   dei marchi sono neri su trasparente, e object-fit:contain per non deformarli
   dentro il quadrato. A 34px i marchi con la scritta lunga (SilverStone
   Technology, Alseye Corporation) erano illeggibili: il logo e' l'unica cosa
   che si riconosce a colpo d'occhio scorrendo duecento voci. */
.drako-abx-brand-logo {
  width:46px; height:46px; flex:none; object-fit:contain;
  background:#fff; border-radius:7px; padding:4px; box-sizing:border-box;
}
.drako-abx-brand-logo.is-empty { visibility:hidden; }
/* Marchio senza logo: iniziale dentro la stessa gabbia, cosi' la colonna dei
   nomi resta allineata invece di avere buchi. */
.drako-abx-brand-logo.is-txt {
  display:flex; align-items:center; justify-content:center;
  color:#1c2430; font-size:20px; font-weight:800; letter-spacing:.5px;
}
.drako-abx-brand-empty { padding:8px 10px; font-size:13px; color:#8a94a6; }

/* Chip del marchio scelto, col suo logo. */
.drako-abx-chips { display:flex; gap:6px; flex-wrap:wrap; }
/* Chip = stessa pelle del campo di ricerca accanto (fondo e bordo del tema):
   il marchio scelto e' la casella "riempita", non un oggetto di un altro
   colore. Il bianco pieno spiccava troppo e il giallo di prima era un accento
   sprecato su un elemento che si sceglie e si toglie di continuo. */
.drako-abx-chip {
  display:inline-flex; align-items:center; gap:9px; padding:7px 9px;
  border-radius:12px; background:var(--ab-field-bg); color:var(--ab-text);
  font-size:14px; font-weight:700; border:1px solid var(--ab-field-bd);
}
/* Piastrella bianca sotto il logo: i file dei marchi sono quasi tutti inchiostro
   scuro, su un chip scuro sparirebbero. */
.drako-abx-chip-logo {
  width:36px; height:20px; object-fit:contain;
  background:#fff; border-radius:4px; padding:2px; box-sizing:content-box;
}
.drako-abx-chip-txt { padding-left:0; }
.drako-abx-chip-x {
  border:0; background:transparent; color:var(--ab-muted); width:18px; height:18px;
  border-radius:50%; cursor:pointer; font-size:16px; line-height:1; padding:0;
}
.drako-abx-chip-x:hover { background:rgba(127,140,160,.22); color:var(--ab-text); }

/* Il chip perdeva fondo giallo e testo scuro: la regola globale del tema scuro
   che pesca per SOTTOSTRINGA nel nome classe intercetta anche "drako-abx-chip"
   e pesa (0,2,0), piu' della classe singola. Si risale di specificita' invece
   di usare !important, e si copre anche il tema chiaro. */
/* NIENTE giallo: il chip e' un elemento scelto, non un avviso, e con la fascia
   che ha gia' l'accento giallo erano due gialli uno dentro l'altro. Bianco con
   testo scuro in tutti e due i temi: si stacca dal riquadro senza urlare, e il
   logo del marchio ci sta sopra senza bisogno di una piastrella che gli faccia
   da fondo (era quella a sembrare un rettangolo nero attorno all'ASUS). */
.drako-ab .drako-abx-chip,
html[data-theme="dark"] .drako-ab .drako-abx-chip {
  background: var(--ab-field-bg);
  color: var(--ab-text);
  border: 1px solid var(--ab-field-bd);
}
.drako-ab .drako-abx-chip .drako-abx-chip-txt,
html[data-theme="dark"] .drako-ab .drako-abx-chip .drako-abx-chip-txt { color: var(--ab-text); }
.drako-ab .drako-abx-chip .drako-abx-chip-x,
html[data-theme="dark"] .drako-ab .drako-abx-chip .drako-abx-chip-x {
  background: transparent; color: var(--ab-muted);
}
.drako-ab .drako-abx-chip .drako-abx-chip-x:hover,
html[data-theme="dark"] .drako-ab .drako-abx-chip .drako-abx-chip-x:hover {
  background: rgba(127, 140, 160, .22); color: var(--ab-text);
}
/* Stessa trappola sulla tendina e sulle sue voci. */
html[data-theme="dark"] .drako-ab .drako-abx-brand-list { background: #1a212b; }
html[data-theme="dark"] .drako-ab .drako-abx-brand-opt { background: transparent; color: #e7ecf2; }
/* Evidenziazione discreta come nella tendina dei giochi. Chiara nel tema
   chiaro, grigio-blu nello scuro: gli stessi due valori di .drako-ab-combo-opt. */
/* .is-key = voce puntata con le frecce: stesso aspetto del passaggio del mouse. */
.drako-ab .drako-abx-brand-opt:hover,
.drako-ab .drako-abx-brand-opt.is-key,
.drako-ab .drako-abx-brand-opt:hover > span,
.drako-ab .drako-abx-brand-opt.is-key > span { background: var(--ab-hover); color: var(--ab-blue); }
html[data-theme="dark"] .drako-ab .drako-abx-brand-opt:hover,
html[data-theme="dark"] .drako-ab .drako-abx-brand-opt.is-key,
html[data-theme="dark"] .drako-ab .drako-abx-brand-opt:hover > span,
html[data-theme="dark"] .drako-ab .drako-abx-brand-opt.is-key > span { background: #1f2937; color: #e7ecf2; }
html[data-theme="dark"] .drako-ab .drako-abx-brand-opt:hover .drako-abx-brand-logo,
html[data-theme="dark"] .drako-ab .drako-abx-brand-opt.is-key .drako-abx-brand-logo,
.drako-ab .drako-abx-brand-opt.is-key .drako-abx-brand-logo,
.drako-ab .drako-abx-brand-opt:hover .drako-abx-brand-logo { background: #fff; }
/* Anche il testo interno finiva nella rete della globale: "drako-abx-chip-txt"
   contiene "-chip" quanto il chip stesso, quindi prendeva il fondo scuro e
   diventava un rettangolo nero dentro la pastiglia gialla. Serviva azzerare lo
   SFONDO, non solo il colore. */
.drako-ab .drako-abx-chip > *,
html[data-theme="dark"] .drako-ab .drako-abx-chip > * { background: transparent; }
.drako-ab .drako-abx-chip .drako-abx-chip-logo,
html[data-theme="dark"] .drako-ab .drako-abx-chip .drako-abx-chip-logo { background: #fff; }

/* Voce FISSA nel configuratore (servizio di assemblaggio): resta selezionata e
   non si toglie. Si mostra come scelta, non come opzione da spuntare, quindi
   niente cursore a mano e niente reazione al passaggio del mouse. */
.drako-pcb2-opt.is-locked { cursor: default; }
.drako-pcb2-opt.is-locked:hover { transform: none; }

/* ==========================================================================
   GENERATORE: piede unificato e colonna a tutta altezza (2026-08-06)
   ========================================================================== */

/* MARCHI e INTERRUTTORI sulla stessa riga. I marchi erano una fascia a se' che
   finiva a meta' larghezza, e sotto ne cominciava un'altra con gli
   interruttori, anche lei a meta': due righe piene per due contenuti corti.
   Sono rifiniture facoltative della stessa richiesta, quindi condividono il
   piede - che e' gia' un flex con justify-content:space-between. */
.drako-abx-foot > .drako-abx-brands {
  flex: 0 1 auto; width: auto; margin: 0; min-width: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* I CHIP restano una riga loro, a tutta larghezza: accanto alla casella
   entrerebbero in due per volta. */
.drako-abx-foot > .drako-abx-chips { flex: 1 0 100%; width: 100%; margin: 0; }
.drako-abx-foot > .drako-abx-chips:empty { display: none; }
/* Le due parti si allineano sull'asse: hanno altezze diverse (52 contro 41) e
   allineate in alto i loro centri non cadevano sulla stessa linea. */
.drako-abx-foot { align-items: center; row-gap: 12px; }

/* Sotto i 1080px il riquadro e' impilato: li' il piede torna a due righe da
   solo, e va bene - affiancarli su schermo stretto vorrebbe dire comprimerli. */
@media (max-width: 1079px) {
  .drako-abx-foot > .drako-abx-brands { flex: 1 0 100%; }
}

/* COLONNA DEI CAMPI a tutta altezza, non centrata. La copertina del gioco e'
   alta 280px e il contenuto della colonna accanto ne occupa meno: distribuito
   di default, l'avanzo finiva dentro le righe e il blocco galleggiava con aria
   sopra e sotto. Con space-between la prima riga parte dal bordo alto della
   copertina e l'ultima chiude su quello basso: le due colonne cominciano e
   finiscono insieme, che e' un allineamento vero invece di un centramento. */
@media (min-width: 1080px) {
  .drako-ab-embed .drako-abx-side-main.drako-abx-center { align-content: space-between; }

  /* SCHEDA GIOCO: titolo su una riga sua, comandi sotto a tutta larghezza.
     Tre problemi con la stessa causa. Titolo e campi sulla stessa riga
     volevano dire: al campo del gioco restavano ~260px e "Shadow of the Tomb
     Raider: Definitive Edition" si troncava a meta'; e alla colonna restavano
     due sole righe (~150px) contro i 280 della copertina, cioe' 130px di
     vuoto in mezzo. Impilandoli il campo ha tutta la larghezza e la colonna
     arriva a ~235px, che e' quanto la copertina: il vuoto si chiude da solo.
     Vale solo qui: sul budget la riga ha cursore, cifra e pulsante ed e' gia'
     piena, e non c'e' copertina che detti un'altezza. */
  .drako-ab-embed .drako-abx-side-main.drako-abx-center > .drako-abx-headrow {
    flex: 1 0 100%; max-width: none;
  }
  .drako-ab-embed .drako-abx-side-main.drako-abx-center > .drako-abx-panel {
    flex: 1 0 100%; margin-left: 0;
  }
  /* STACCHI STRETTI e uniformi: l'avanzo va nei CAMPI, non fra un campo e
     l'altro. Con space-between i tre stacchi venivano ~48px l'uno e si
     leggevano come tre buchi in mezzo ai comandi. Ora sono 16 come ovunque, e
     i 90px che avanzavano sono andati a risoluzione e FPS, che a 130 erano
     larghi quanto la loro etichetta. */
  .drako-abx-side .drako-ab-bar-fps { justify-content: flex-start; }
  .drako-abx-side .drako-ab-bar-fps > .drako-ab-field:first-child {
    flex: 1 1 560px; max-width: 600px; min-width: 0;
  }
  .drako-abx-side #abx-game-input { width: 100%; min-width: 0; }
  .drako-abx-side #abx-res,
  .drako-abx-side #abx-fps-input { width: 175px; min-width: 0; }
  .drako-abx-side .drako-ab-bar-fps .drako-ab-go { margin-left: 0; }

  /* SCHEDA BUDGET: il cursore si prende il vuoto fra titolo e comandi.
     Erano 229px di niente in mezzo alla riga. Il cursore e' il comando
     principale di questa scheda e una corsa piu' lunga si governa meglio: da
     1.600 a "senza limite" con 340px ogni pixel valeva ~25 euro.
     Il tetto a 760 e' il limite oltre il quale ridiventa il cursore da
     1.080px gia' provato e scartato (vedi la nota sulla barra piu' su). */
  /* Niente margine automatico: il gruppo dei comandi si accosta al titolo
     invece di essere spinto contro il bordo destro. Misurato, quel
     margin-left:auto valeva 490px e lasciava al pannello 609px, dentro i quali
     il pulsante non ci stava e andava a capo sotto il cursore.
     Senza la spinta il pannello dispone di 1.099px: cursore, cifra e pulsante
     stanno in fila e la riga si chiude sul bordo destro da sola. */
  /* Il pannello torna a misura di contenuto e ancorato al bordo destro, ma
     ora quel contenuto comprende anche il pulsante: prima il gruppo era largo
     609px e il pulsante non ci stava, con 490px di margine automatico davanti.
     Adesso sono 995px e lo stacco dal titolo scende a ~144, che separa
     l'identita' dai comandi invece di essere un buco. */
  .drako-ab-embed .drako-abx-center > .drako-abx-panel[data-abx-panel="budget"] {
    flex: 0 0 auto; margin-left: auto; min-width: 0;
  }
  /* 650 e non 750: la corsa resta comoda ma il cursore non si allunga a
     coprire mezza riga.
     WIDTH e non solo flex-basis: il pannello e' un blocco dimensionato sul
     contenuto naturale, e in quel calcolo il flex-basis non entra - contava
     solo la larghezza intrinseca di etichetta e scala, cioe' ~296px. Il gruppo
     veniva 609 invece di 995 e il pulsante andava a capo sotto il cursore. Con
     una larghezza vera il conto torna e la riga resta una. */
  .drako-ab-embed .drako-abx-panel[data-abx-panel="budget"] .drako-abx-slider-field {
    flex: 0 0 650px; width: 650px; max-width: 650px;
  }
  /* Il pulsante non va a capo: e' l'ultimo elemento della riga, non un blocco. */
  .drako-ab-embed .drako-abx-panel[data-abx-panel="budget"] .drako-ab-go {
    flex: 0 0 auto;
  }
}

/* COPERTINA senza tagli. La scatola era 250x280 (rapporto 0,89) e le copertine
   sono 285x380 (0,75): object-fit:cover deve scartare quello che avanza, e
   avanzava la testa dell'immagine. A 195x260 il rapporto coincide e l'immagine
   entra intera. Se si ritocca una delle due misure, ricontrollare che
   larghezza/altezza resti 0,75.
   L'immagine va in assoluto per non gonfiare la scatola con la propria
   altezza naturale; align-self in alto perche' il suo bordo superiore parta
   dal titolo, come la colonna accanto. */
.drako-abx-side .drako-abx-cover {
  flex: 0 0 195px; width: 195px; height: 260px;
  align-self: flex-start; min-height: 0; position: relative;
}
.drako-abx-side .drako-abx-cover .drako-abx-game-thumb {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 760px) {
  /* Qui la colonna va in verticale: il flex-basis smette di valere come
     larghezza e vale come altezza, quindi misure esplicite (150/200 = 0,75). */
  .drako-abx-side .drako-abx-cover { flex: 0 0 auto; width: 150px; height: 200px; }
}

/* ============================================================================
   ALTEZZE STRETTE IN CIMA ALLA SCHEDA (17/08/2026)
   ============================================================================
   Misurato sulla scheda con una build a video, finestra 861: il totale della
   configurazione cadeva a 1.511 px dall'inizio pagina. Sopra al pannello
   c'erano 834 px, di cui 248 di "Come funziona" e 193 di generatore: due
   blocchi alti quanto mezza schermata prima ancora di vedere quanto costa.
   Qui si stringono ENTRAMBI senza toglierli e senza spostarli: restano dove
   servono - la spiegazione prima dei comandi, i comandi prima del risultato -
   ma smettono di occupare lo spazio di una sezione intera.
   Si tocca solo la versione DENTRO la scheda prodotto (.drako-ab-embed*): le
   stesse classi servono anche altrove e li' le misure larghe vanno bene.
   ============================================================================ */

/* --- "Come funziona": da 248 a ~145 px ------------------------------------ */
.drako-ab-embed-steps { margin: 0 -20px 18px; }
.drako-ab-embed-steps .drako-ab-sec-head { margin-bottom: 10px; padding: 9px 14px; }
.drako-ab-embed-steps .drako-ab-sec-head h2 { font-size: 18px; }
.drako-ab-embed-steps .drako-ab-sec-head p { font-size: 12.5px; }
.drako-ab-embed-steps .drako-ab-steps { gap: 12px; }
.drako-ab-embed-steps .drako-ab-step { padding: 13px 15px; }
/* Il numero del passo scende con l'altezza della scheda: a 34px restava il
   pezzo piu' alto del riquadro e imponeva lui la misura. */
.drako-ab-embed-steps .drako-ab-step-num { width: 26px; height: 26px; font-size: 14px; margin-bottom: 7px; }
.drako-ab-embed-steps .drako-ab-step h3 { font-size: 15px; margin-bottom: 3px; }
.drako-ab-embed-steps .drako-ab-step p { font-size: 13px; line-height: 1.45; }
.drako-ab-embed-steps .drako-abx-step-ic { width: 32px; height: 32px; top: 12px; right: 12px; }
@media (max-width: 900px) { .drako-ab-embed-steps { margin: 0 0 14px; } }

/* --- Generatore: da 193 a ~160 px ------------------------------------------
   Il riquadro blu resta riconoscibile (e' quello che i clienti hanno gia'
   visto), perde solo il respiro che aveva da pagina intera. */
.drako-ab-embed .drako-ab-hero { padding: 14px 22px 14px; }
.drako-ab-embed { margin: 0 0 12px; }
.drako-ab-embed .drako-ab-h1 { font-size: 20px; margin-bottom: 2px; }
.drako-ab-embed .drako-ab-sub { font-size: 13px; margin-bottom: 8px; }
.drako-ab-embed .drako-ab-kicker { margin-bottom: 5px; }
.drako-ab-embed .drako-ab-hint { margin-top: 6px; }