/* ---------------------------------------------------------------------
 *  PALETTE — ereditata dal tema (2026-07-30)
 *
 *  Prima questi due blocchi contenevano i colori scritti a mano, ricopiati
 *  identici in tutti e quattro i tool: cambiare il colore dei pulsanti
 *  significava ricordarsi di modificare quattro file diversi, e gli
 *  strumenti erano gli unici pezzi del sito che non seguivano il tema.
 *
 *  Ora ogni colore si legge cosi':   var(--rig-X, valore-di-riserva)
 *   - il tema definisce le --rig-* in assets/rig-ui.css e i tool le ereditano,
 *     quindi cambiando tema cambiano anche gli strumenti;
 *   - se il tema non fosse attivo, var() ripiega sul valore di riserva, che e'
 *     esattamente il colore usato fino a ieri: il tool resta leggibile invece
 *     di diventare bianco su bianco.
 *
 *  Il blocco [data-theme="dark"] serve solo a quel caso di riserva: il tema
 *  del tool viene sincronizzato con quello del sito da syncThemeFromSite(),
 *  quindi quando il tema c'e' le --rig-* portano gia' i colori giusti.
 * ------------------------------------------------------------------ */
#pcbuilder-root,
    #pcbuilder-root[data-theme="light"] {
      --color-bg: var(--rig-bg, #f7f6f2);
      --color-surface: var(--rig-surface, #ffffff);
      --color-surface-hover: var(--rig-surface-hover, #f3efe7);
      --color-border: var(--rig-border, #e2ddd1);
      --color-divider: var(--rig-divider, #f4f0e7);
      --color-text: var(--rig-text, #17181b);
      --color-text-muted: var(--rig-text-muted, #706c62);
      --color-primary: var(--rig-primary, #b97f56);
      --color-primary-hover: var(--rig-primary-hover, #9f6843);
      --color-success: var(--rig-success, #7f8e62);
      --color-success-hover: var(--rig-success-hover, #6f7b56);
      --color-warning: var(--rig-warning, #c08a2e);
      --color-warning-hover: var(--rig-warning-hover, #a8761f);
      --color-danger: var(--rig-danger, #bb6d5b);
      --color-danger-hover: var(--rig-danger-hover, #a75b49);
      --radius-md: 0.375rem;
      --radius-lg: 0.5rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-6: 1.5rem;
      --font-body: Inter, sans-serif;
    }
#pcbuilder-root[data-theme="dark"] {
      --color-bg: var(--rig-bg, #17181b);
      --color-surface: var(--rig-surface, #2f3138);
      --color-surface-hover: var(--rig-surface-hover, #444750);
      --color-border: var(--rig-border, #555249);
      --color-divider: var(--rig-divider, #26282e);
      --color-text: var(--rig-text, #f1e2cb);
      --color-text-muted: var(--rig-text-muted, #b8bc9f);
      --color-primary: var(--rig-primary, #cc9870);
      --color-primary-hover: var(--rig-primary-hover, #ddc48c);
      --color-success: var(--rig-success, #b8c394);
      --color-success-hover: var(--rig-success-hover, #c7d2a3);
      --color-warning: var(--rig-warning, #dbb568);
      --color-warning-hover: var(--rig-warning-hover, #e6c886);
      --color-danger: var(--rig-danger, #d48e72);
      --color-danger-hover: var(--rig-danger-hover, #e2a487);
    }
#pcbuilder-root *,
    #pcbuilder-root *::before,
    #pcbuilder-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
#pcbuilder-root {
      font-family: var(--font-body);
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.5;
      padding: var(--space-4);
    }
#pcbuilder-root button { cursor: pointer; border: none; font: inherit; background: none; transition: 0.15s; }
#pcbuilder-root a { text-decoration: none; color: inherit; }
#pcbuilder-root .container { max-width: 1024px; margin: 0 auto; }
#pcbuilder-root header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: var(--space-6); padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }
#pcbuilder-root h1 { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
#pcbuilder-root .theme-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; background: var(--color-surface);
      border: 1px solid var(--color-border); border-radius: var(--radius-md);
      color: var(--color-text-muted); font-size: 0.95rem;
    }
#pcbuilder-root .theme-toggle:hover { background: var(--color-surface-hover); color: var(--color-text); }
#pcbuilder-root .theme-toggle:active { transform: scale(0.93); }
#pcbuilder-root .progress-indicator {
      display: flex; align-items: center; gap: var(--space-3);
      margin-bottom: var(--space-4); font-size: 0.82rem; font-weight: 600;
      color: var(--color-text-muted); white-space: nowrap;
    }
#pcbuilder-root .progress-track {
      flex: 1; height: 6px; background: var(--color-divider);
      border-radius: 999px; overflow: hidden;
    }
#pcbuilder-root .progress-fill {
      height: 100%; width: 0%; background: var(--color-primary);
      border-radius: 999px; transition: width 0.2s;
    }
#pcbuilder-root .build-list {
      background: var(--color-surface); border: 1px solid var(--color-border);
      border-radius: var(--radius-lg); overflow: hidden;
    }
#pcbuilder-root .group-divider {
      padding: var(--space-2) var(--space-4);
      background: var(--color-divider);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
      font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
      color: var(--color-text-muted);
    }
#pcbuilder-root .list-header {
      display: grid; grid-template-columns: 160px 1fr 110px 60px;
      gap: var(--space-4); padding: var(--space-3) var(--space-4);
      background: var(--color-divider); font-weight: 600; font-size: 0.75rem;
      color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em;
    }
#pcbuilder-root .list-row {
      display: grid; grid-template-columns: 160px 1fr 110px 60px;
      gap: var(--space-4); padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border); align-items: center; transition: background 0.15s;
    }
#pcbuilder-root .list-row:last-child { border-bottom: none; }
#pcbuilder-root .list-row:hover { background: var(--color-surface-hover); }
#pcbuilder-root .row-category {
      font-weight: 600; font-size: 0.85rem; color: var(--color-text-muted);
      display: flex; align-items: center; gap: 0.45rem;
    }
#pcbuilder-root .row-category i { font-size: 0.8rem; opacity: 0.75; }
#pcbuilder-root .row-item-name { font-weight: 500; font-size: 0.92rem; }
#pcbuilder-root .row-price { font-weight: 700; font-size: 0.92rem; }
#pcbuilder-root .row-actions { display: flex; gap: 0.3rem; justify-content: flex-end; align-items: center; }
#pcbuilder-root .product-link {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px dotted transparent;
      transition: color 0.15s, border-color 0.15s;
    }
#pcbuilder-root .product-link:hover {
      color: var(--color-primary);
      border-bottom-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    }
#pcbuilder-root .product-name-plain {
      color: inherit;
      opacity: 0.96;
    }
#pcbuilder-root .btn-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; border-radius: var(--radius-md); font-size: 0.85rem;
      transition: background 0.15s, color 0.15s, transform 0.1s;
    }
#pcbuilder-root .btn-icon:active { transform: scale(0.88); }
#pcbuilder-root .btn-icon-primary { color: var(--color-primary); background: transparent; }
#pcbuilder-root .btn-icon-primary:hover {
      color: var(--color-primary-hover);
      background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    }
#pcbuilder-root .btn-icon-danger { color: var(--color-danger); background: transparent; }
#pcbuilder-root .btn-icon-danger:hover {
      color: var(--color-danger-hover);
      background: color-mix(in srgb, var(--color-danger) 10%, transparent);
    }
#pcbuilder-root .btn-ghost {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-weight: 600; font-size: 0.88rem; color: var(--color-text-muted);
      padding: 0 0.75rem; height: 40px; border-radius: var(--radius-md);
    }
#pcbuilder-root .btn-ghost:hover { color: var(--color-text); background: var(--color-surface-hover); }
#pcbuilder-root .btn-cta {
      display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.5rem;
      border-radius: var(--radius-md); font-weight: 600; font-size: 0.92rem;
      transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    }
#pcbuilder-root .btn-cta:active { transform: scale(0.97); }
#pcbuilder-root .btn-cta-primary {
      background: transparent; color: var(--color-primary);
      border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
    }
#pcbuilder-root .btn-cta-primary:hover {
      color: var(--color-primary-hover);
      background: color-mix(in srgb, var(--color-primary) 8%, transparent);
      border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    }
/* I due pulsanti della schermata Procedi stanno al centro del riquadro, non
   incollati a sinistra. */
#pcbuilder-root .checkout-actions {
      display: flex; gap: 0.75rem; flex-wrap: wrap;
      align-items: center; justify-content: center;
    }
/* "Condividi questa lista": pieno, non trasparente. Con lo sfondo scuro la
   variante primary si confondeva con il riquadro. */
#pcbuilder-root .btn-cta-share {
      background: var(--color-primary); color: var(--color-bg);
      border: 1px solid var(--color-primary);
    }
#pcbuilder-root .btn-cta-share:hover {
      background: var(--color-primary-hover, var(--color-primary));
      border-color: var(--color-primary-hover, var(--color-primary));
      color: var(--color-bg);
    }
#pcbuilder-root .btn-cta-success { background: var(--color-success); color: var(--color-bg); }
#pcbuilder-root .btn-cta-success:hover { background: var(--color-success-hover); }
#pcbuilder-root .total-footer {
      display: flex; justify-content: flex-end; align-items: center; gap: var(--space-6);
      padding: var(--space-4); background: var(--color-surface);
      border: 1px solid var(--color-border); border-top: none;
      border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
    }
#pcbuilder-root .total-label { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); }
#pcbuilder-root .total-amount { font-size: 1.4rem; font-weight: 700; }
#pcbuilder-root .action-footer { display: flex; justify-content: flex-end; padding-top: var(--space-4); }
#pcbuilder-root .picker-header,
    #pcbuilder-root .checkout-header {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4);
    }
#pcbuilder-root .picker-header h2,
    #pcbuilder-root .checkout-header h2 { font-size: 1.1rem; font-weight: 700; }
/* Casella di ricerca del picker: sta a sinistra dell'ordinamento per prezzo,
   nella stessa barra. Con molti prodotti scorrere la lista non basta piu'. */
#pcbuilder-root .picker-tools {
      display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end;
    }
#pcbuilder-root .picker-search-box {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: var(--color-surface); border: 1px solid var(--color-border);
      border-radius: var(--radius-md, 8px); padding: 0.35rem 0.6rem;
      color: var(--color-text-muted); transition: border-color .15s ease;
    }
#pcbuilder-root .picker-search-box:focus-within { border-color: var(--color-primary); }
#pcbuilder-root .picker-search-box input {
      border: 0; outline: 0; background: transparent; color: var(--color-text);
      font: inherit; font-size: 0.88rem; width: 12rem; min-width: 8rem; padding: 0;
    }
#pcbuilder-root .picker-search-box input::placeholder { color: var(--color-text-muted); }
/* La X nativa di input[type=search] su WebKit e' invisibile sui temi scuri */
#pcbuilder-root .picker-search-box input::-webkit-search-cancel-button {
      -webkit-appearance: none; appearance: none;
      width: 0.7rem; height: 0.7rem; cursor: pointer;
      background: var(--color-text-muted);
      -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%);
      mask: radial-gradient(circle, transparent 55%, #000 56%);
    }

#pcbuilder-root .picker-table {
      width: 100%; border-collapse: collapse; background: var(--color-surface);
      border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
    }
#pcbuilder-root .picker-table th {
      background: var(--color-divider); padding: var(--space-3) var(--space-4); text-align: left;
      font-weight: 600; font-size: 0.75rem; color: var(--color-text-muted);
      text-transform: uppercase; letter-spacing: 0.06em;
    }
#pcbuilder-root .picker-table td {
      padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle;
    }
#pcbuilder-root .picker-table tr:last-child td { border-bottom: none; }
#pcbuilder-root .picker-table tr:hover td { background: var(--color-surface-hover); }
#pcbuilder-root .item-specs { font-size: 0.8rem; color: var(--color-text-muted); }
#pcbuilder-root .checkout-box {
      background: var(--color-surface); border: 1px solid var(--color-border);
      border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6);
    }
#pcbuilder-root .checkout-row {
      display: flex; justify-content: space-between; padding: var(--space-3) 0;
      border-bottom: 1px solid var(--color-divider); align-items: center;
    }
#pcbuilder-root .checkout-row:last-child { border-bottom: none; }
#pcbuilder-root .checkout-cat {
      color: var(--color-text-muted); font-size: 0.82rem; width: 160px; flex-shrink: 0;
      font-weight: 600; display: flex; align-items: center; gap: 0.4rem;
    }
#pcbuilder-root .checkout-name { flex-grow: 1; font-weight: 500; padding: 0 var(--space-3); font-size: 0.92rem; }
#pcbuilder-root .checkout-price { font-weight: 700; width: 100px; text-align: right; }
#pcbuilder-root .amazon-cart-box {
      background: var(--color-divider); padding: var(--space-6); border-radius: var(--radius-lg); text-align: center;
    }
#pcbuilder-root #view-build,
    #pcbuilder-root #view-picker,
    #pcbuilder-root #view-checkout { display: none; }
#pcbuilder-root [data-tooltip] { position: relative; }
#pcbuilder-root [data-tooltip]::after {
      content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%;
      transform: translate3d(-50%, 0, 0); backface-visibility: hidden;
      background: #1f2937; color: #f9fafb; font-size: 0.7rem; text-transform: none; font-family: var(--font-body);
      font-weight: 500; padding: 0.2rem 0.5rem; border-radius: 4px; white-space: nowrap;
      pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 100;
    }
#pcbuilder-root [data-tooltip]:hover::after { opacity: 1; }
@media (max-width: 768px) {
#pcbuilder-root { padding: 0.75rem; }
#pcbuilder-root .list-header { display: none; }
#pcbuilder-root .list-row {
        grid-template-columns: 1fr; gap: 0.25rem; position: relative;
        padding: var(--space-3) var(--space-4); padding-right: 5rem;
      }
#pcbuilder-root .row-price { position: absolute; right: var(--space-4); top: var(--space-3); }
#pcbuilder-root .row-actions { justify-content: flex-start; margin-top: 0.2rem; }
#pcbuilder-root .picker-table thead { display: none; }
#pcbuilder-root .picker-table,
    #pcbuilder-root .picker-table tbody,
    #pcbuilder-root .picker-table tr,
    #pcbuilder-root .picker-table td { display: block; width: 100%; }
#pcbuilder-root .picker-table tr {
        border: 1px solid var(--color-border); border-radius: var(--radius-lg);
        margin-bottom: 0.5rem; padding: var(--space-3) var(--space-4);
        display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
        gap: 0.2rem 0.5rem; align-items: center;
      }
#pcbuilder-root .picker-table tr:hover { background: var(--color-surface-hover); }
#pcbuilder-root .picker-table td:nth-child(1) { grid-column:1; grid-row:1; font-weight:600; }
#pcbuilder-root .picker-table td:nth-child(2) { grid-column:1; grid-row:2; }
#pcbuilder-root .picker-table td:nth-child(3) { grid-column:2; grid-row:1; text-align:right; font-weight:700; color:var(--color-primary); }
#pcbuilder-root .picker-table td:nth-child(4) { grid-column:2; grid-row:2; text-align:right; }
#pcbuilder-root .picker-table td { border-bottom: none; padding: 0; }
#pcbuilder-root .checkout-row { flex-direction: column; gap: 0.1rem; }
#pcbuilder-root .checkout-cat { width: auto; }
#pcbuilder-root .checkout-name { padding: 0; }
#pcbuilder-root .checkout-price { width: auto; text-align: left; }
#pcbuilder-root .btn-cta-success,
    #pcbuilder-root .btn-cta-share,
    #pcbuilder-root .action-footer .btn-cta { width: 100%; justify-content: center; }
}

/* ===== Modale di condivisione: overlay sovrapposto alla pagina, non più finestra separata ===== */
#pcbuilder-root .modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in srgb, #000 55%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
#pcbuilder-root .modal-overlay[hidden] { display: none; }
#pcbuilder-root .modal-box {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); width: 100%; max-width: 560px;
  max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
#pcbuilder-root .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4); border-bottom: 1px solid var(--color-divider);
}
#pcbuilder-root .modal-head h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
#pcbuilder-root .modal-body { padding: var(--space-4); overflow-y: auto; flex: 1; }
#pcbuilder-root .share-list {
  font-size: 0.9rem; line-height: 1.7; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); user-select: text;
}
#pcbuilder-root .share-list a { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-border); }
#pcbuilder-root .modal-actions {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  border-top: 1px solid var(--color-divider); flex-wrap: wrap;
}
#pcbuilder-root .modal-actions .btn-cta { flex: 1; justify-content: center; white-space: nowrap; }
@media (max-width: 640px) {
  #pcbuilder-root .modal-actions { flex-direction: column; }
  #pcbuilder-root .modal-box { max-height: 90vh; }
}
/* ===== Avviso stato catalogo (offline / dati non aggiornati) ===== */
#pcbuilder-root .status-notice[hidden] { display: none; }
#pcbuilder-root .status-notice {
  display: flex; align-items: center; gap: 0.6rem;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 500;
  border: 1px solid var(--color-border); background: var(--color-surface);
}
#pcbuilder-root .status-notice-warn {
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
}
#pcbuilder-root .status-notice-error {
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
}

/* ===== Prodotti esauriti ===== */
#pcbuilder-root .badge-soldout {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
  white-space: nowrap;
}
#pcbuilder-root .picker-table tr.row-soldout td:nth-child(1),
#pcbuilder-root .picker-table tr.row-soldout td:nth-child(2) { opacity: 0.55; }

/* ===== Tooltip immagine prodotto (solo desktop, come nel Notebook Finder) ===== */
#pcbuilder-root #pcb-image-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-width: 240px;
}
#pcbuilder-root #pcb-image-tooltip img {
  display: block;
  max-width: 220px;
  max-height: 180px;
  width: auto; height: auto;
  border-radius: var(--radius-md);
  background: #fff;
}
#pcbuilder-root #pcb-image-tooltip[hidden] { display: none; }
@media (hover: none) {
  #pcbuilder-root #pcb-image-tooltip { display: none !important; }
}

/* ===== Header del picker con pulsante ordinamento ===== */
@media (max-width: 768px) {
  #pcbuilder-root .picker-header { flex-wrap: wrap; gap: 0.5rem; }
  /* Su telefono la barra strumenti passa a piena larghezza e la casella si
     allarga: cercare con il pollice deve restare comodo. */
  #pcbuilder-root .picker-tools { width: 100%; justify-content: space-between; }
  #pcbuilder-root .picker-search-box { flex: 1 1 auto; }
  #pcbuilder-root .picker-search-box input { width: 100%; }
  #pcbuilder-root .picker-header h2 { order: 3; width: 100%; }
}


/* ---------- Filtri dinamici del picker ---------- */
/* L'attributo hidden va rispettato anche se la classe impone display:flex,
   altrimenti resta visibile un riquadro vuoto nelle categorie senza filtri */
#pcbuilder-root .picker-filters[hidden] { display: none; }
#pcbuilder-root .picker-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
#pcbuilder-root .filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
#pcbuilder-root .filter-group-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: 0.25rem;
  white-space: nowrap;
}
#pcbuilder-root .filter-chip {
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#pcbuilder-root .filter-chip:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}
#pcbuilder-root .filter-chip-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
#pcbuilder-root .filter-chip-active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

/* ---------- Logo Prime (solo picker) ---------- */
/* Identico al Notebook Finder: logo 'prime' + swoosh celeste a SINISTRA
   a DESTRA del prezzo, scalato sulla dimensione del testo. */
#pcbuilder-root .prime-logo {
  height: 1.15em; width: auto;
  margin-left: 0.4rem;
  vertical-align: -0.18em;
  fill: #00A8E1;
  flex-shrink: 0;
}
#pcbuilder-root .prime-logo .prime-word {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.4px;
  fill: #00A8E1;
}

/* ---------- Toggle Configura/Assemblati (in header, stile Phone Finder) ---------- */
#pcbuilder-root header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
#pcbuilder-root .pcb-section-toggle {
  display: inline-flex; align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
#pcbuilder-root .pcb-section-toggle-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0 0.9rem; height: 40px;
  font-weight: 600; font-size: 0.85rem;
  color: var(--color-text-muted); background: transparent;
  border: none; border-right: 1px solid var(--color-border);
  cursor: pointer; font-family: inherit;
}
#pcbuilder-root .pcb-section-toggle-btn:last-child { border-right: none; }
#pcbuilder-root .pcb-section-toggle-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
#pcbuilder-root .pcb-section-toggle-btn.active {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}

/* Nascondere davvero i due contenitori di sezione. Una regola display: batte
   l'attributo hidden del browser, quindi va scritto esplicitamente: senza
   questo, un domani basta una regola display: su questi id per far ricomparire
   la fascia vuota sopra agli Assemblati. */
#pcbuilder-root[hidden],
#mpfinder-root[hidden] { display: none !important; }