/* ============================================================
   MODALE SCHEDA PRODOTTO (dettaglio)
   ============================================================ */
/* Rinominate da .custom-modal-backdrop/.custom-modal-content a
   .catalog-modal-backdrop/.catalog-modal-content: gli stessi nomi sono già
   usati da core.css (modale licenza del progetto Admin) con una strategia di
   visibilità diversa (display:flex sempre, elemento aggiunto/rimosso dal DOM
   solo quando serve, niente classe .is-open). Quando il catalogo viene
   imbarcato in index.html (ora a livello root) (vedi catalog/js/views/catalog-view.js), le due
   regole con lo stesso selettore convivono nella stessa pagina e quella
   caricata per ultima nel cascade vince — rompendo silenziosamente lo stato
   nascosto di default di QUESTA modale (rimaneva visibile, vuota, sopra il
   catalogo). Rinominare qui elimina la collisione alla radice, senza
   toccare core.css (che serve anche ad altro nel progetto Admin). Nessun
   impatto sullo standalone catalog-modular/index.html, aggiornato di
   conseguenza. */
.catalog-modal-backdrop {
    position: fixed; inset: 0; background: rgba(43,33,26,.45); backdrop-filter: blur(4px);
    z-index: 9999; display: none; align-items: center; justify-content: center; padding: 16px;
}
.catalog-modal-backdrop.is-open { display: flex; }
.catalog-modal-content {
    background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
    width: 100%; max-width: 820px; max-height: 90vh; box-shadow: var(--shadow-3);
    position: relative; display: flex; flex-direction: column; animation: modalShow .22s var(--ease);
}

.modal-close-x {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: flex;
    align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; cursor: pointer; color: var(--ink-soft); z-index: 2; transition: all .15s var(--ease);
}
.modal-close-x:hover { background: var(--surface-tint); color: var(--primary-700); }

.pd-scroll { overflow-y: auto; padding: 24px; }
.pd-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; }
@media (max-width: 640px) { .pd-layout { grid-template-columns: 1fr; } }

.pd-media {
    aspect-ratio: 1/1; background: var(--bg-sunk); border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border);
}
.pd-media img { width: 100%; height: 100%; object-fit: contain; }
.pd-media .ph-icon { font-size: 56px; color: var(--ink-faint); }
.pd-media model-viewer { --poster-color: transparent; background: transparent; }

/* Pulsante "Visualizza in AR": slottato dentro il model-viewer, stile coerente con .btn-secondary */
.pd-ar-btn {
    position: absolute; bottom: 12px; right: 12px; box-shadow: var(--shadow-2);
}

.pd-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pd-thumb {
    width: 52px; height: 52px; border-radius: 8px; border: 1px solid var(--border); overflow: hidden;
    cursor: pointer; background: var(--bg-sunk); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: var(--ink-faint);
}
.pd-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-100); color: var(--primary-700); }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumb .material-symbols-outlined { font-size: 22px; }

.pd-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; margin-bottom: 4px; }
.pd-title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.pd-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 14px; }

.pd-price-box {
    display: flex; align-items: baseline; gap: 10px; background: var(--primary-050);
    border: 1px solid var(--primary-100); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 14px;
}
.pd-price { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--primary-700); }
.pd-price-note { font-size: 12px; color: var(--ink-soft); font-weight: 600; }

.pd-details { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 14px; }
.pd-detail-row { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.pd-detail-row .material-symbols-outlined { font-size: 17px; color: var(--ink-faint); flex-shrink: 0; }
.pd-detail-label { color: var(--ink-faint); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; min-width: 92px; }
.pd-detail-value { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pd-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-tag { background: var(--neutral-bg); color: var(--neutral); font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px; }

.pd-footer { display: flex; gap: 10px; flex-wrap: wrap; }