:root {
    --bg-sfumatura: linear-gradient(135deg, #fdfbf7 0%, #e6d5c3 100%);
    --vetro-bg: rgba(255, 255, 255, 0.45);
    --vetro-bordo: rgba(255, 255, 255, 0.6);
    --testo-primario: #5c4a3d;
    --oro-badge: #d4af37;
    --ombra-leggera: 0 8px 32px rgba(92, 74, 61, 0.08);
}

/* Reset Base - Mobile First */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    /* Salva-vita per font enormi: impedisce alle parole di sfondare lo schermo */
    overflow-wrap: break-word;
}

/* --- Icone Material Outline --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Nascondiamo globalmente la barra di scorrimento per evitare micro scatti */
html, body {
    scrollbar-width: none; /* Nasconde la barra di scorrimento su Firefox */
    -ms-overflow-style: none; /* IE e Edge */
    background-color: #e6d5c3; /* Fix per coprire lo sfarfallio bianco allo scroll (Samsung/iOS) */
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none; /* Nasconde la barra di scorrimento su Chrome, Safari e Opera */
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300; /* Testo sottile ed elegante */
    color: var(--testo-primario);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 7.5rem; /* Evita che la dock copra il footer, aumentato per Samsung */
}

/* --- Sfondo Ottimizzato per GPU --- */
body::before {
    content: '';
    position: fixed;
    top: -5vh;
    left: 0;
    width: 100%;
    height: 110vh; /* Leggermente più alto per coprire il rimbalzo elastico sui telefoni */
    background: var(--bg-sfumatura);
    z-index: -1; /* Bloccato sullo strato più profondo, non ricalcolato allo scroll */
}

/* --- Sfumature di Scorrimento (Maschere) --- */
.scroll-mask-top, .scroll-mask-bottom {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 500; /* Sopra le candele, ma sotto alla dock e i modali */
    pointer-events: none; /* Permette ai clic di passare attraverso la sfumatura */
}

.scroll-mask-top {
    top: 0;
    height: 20px; /* Sfumatura ridotta per non appesantire */
    background: linear-gradient(to bottom, rgba(253, 251, 247, 0.85) 0%, rgba(253, 251, 247, 0) 100%);
}

.scroll-mask-bottom {
    bottom: 0;
    height: 60px; /* Ridotta significativamente per alleggerire la visuale */
    background: linear-gradient(to top, rgba(230, 213, 195, 0.9) 0%, rgba(230, 213, 195, 0) 100%);
}

/* Classi di utilità generiche */
.glass-panel {
    background: var(--vetro-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--vetro-bordo);
    border-radius: 1.5rem;
    box-shadow: var(--ombra-leggera);
}

.btn {
    background-color: var(--testo-primario);
    color: #fff;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 50px;
    font-weight: 500;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s, transform 0.1s;
}

.btn:active {
    transform: scale(0.96);
}

.btn-secondary {
    background-color: transparent;
    color: var(--testo-primario);
    border: 1px solid var(--testo-primario);
}

.btn-secondary:active {
    background-color: rgba(92, 74, 61, 0.1);
}

/* --- Animazioni --- */
@keyframes slideFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Layout Principale */
.header {
    padding: 2rem 1rem 1.5rem;
    text-align: center;
    width: 100%;
}

.logo {
    max-height: 110px;
    width: auto;
}

.main-container {
    width: 100%;
    max-width: 1200px;
    padding: 0 1rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1; /* Spinge il footer in fondo alla pagina se ci sono pochi elementi */
}

/* Sezione Vantaggi */
.vantaggi-section {
    padding: 1.5rem 1rem;
    text-align: center;
    width: 100%;
}

.vantaggi-section h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.vantaggi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.vantaggio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(92, 74, 61, 0.05);
    border-radius: 1rem;
    animation: slideFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vantaggio-card .material-symbols-outlined {
    font-size: 1.8rem;
    opacity: 0.8;
}

.vantaggio-card p {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Sezione Catalogo */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Partiamo con 2 colonne su Mobile */
    gap: 1rem;
}

.candle-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: slideFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.image-container {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--oro-badge);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 50px; /* Più arrotondato */
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Un po' di aria tra le lettere per maggiore eleganza */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Forza il centro verticale perfetto */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* Variante del badge per la finestra modale (sovrascrive il posizionamento assoluto) */
.badge-modal {
    position: relative;
    top: auto;
    right: auto;
    display: inline-flex;
    margin-bottom: 0.5rem;
}

.candle-card h2 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    flex-grow: 1; /* Allinea i pulsanti in basso se i titoli hanno righe diverse */
}

/* --- Sezione Instagram --- */
.instagram-section {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border: none;
    box-shadow: 0 10px 30px rgba(204, 35, 102, 0.3); /* Ombra a tema */
}

.instagram-section h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
}

.ig-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    width: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ig-btn:active {
    background: rgba(255, 255, 255, 0.3);
}

.ig-svg-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ig-handle {
    font-size: 0.95rem;
    opacity: 0.9;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.footer {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* --- Link Privacy e Note --- */
.privacy-link {
    color: var(--testo-primario);
    text-decoration: underline;
    opacity: 0.8;
    cursor: pointer;
    font-weight: 500;
    display: inline-block;
    margin-top: 0.5rem;
}

/* --- Finestra Privacy (Modal Vetro Centrata) --- */
.privacy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2500;
    display: flex;
    align-items: center; /* Sempre centrato come avviso */
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.privacy-overlay.active {
    opacity: 1;
    visibility: visible;
}

.privacy-modal {
    width: 100%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.8); /* Vetro più bianco per leggerezza testo */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--vetro-bordo);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    transform: scale(0.9) translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.privacy-overlay.active .privacy-modal {
    transform: scale(1) translateZ(0);
}

.privacy-content-scroll {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 1.5rem;
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.6;
}

.privacy-content-scroll::-webkit-scrollbar {
    display: none;
}

.privacy-content-scroll h3 {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

.privacy-content-scroll h4 {
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.privacy-content-scroll p {
    margin-bottom: 1rem;
}

/* --- Stili specifici Finestra WhatsApp --- */
.wa-modal {
    text-align: center;
    justify-content: center;
    padding: 2.5rem 2rem;
}

.wa-icon {
    font-size: 3rem;
    color: #25D366;
    margin-bottom: 1rem;
}

.wa-title {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.wa-desc {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
    line-height: 1.5;
}

.wa-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
}

/* --- Navigazione / Dock Fluttuante --- */
.mobile-dock {
    position: fixed;
    bottom: 4rem; /* Rialzata per evitare il tasto freccia in su di Samsung Browser */
    left: 50%;
    transform: translateX(-50%);
    width: max-content; /* La dock abbraccia solo i 3 pulsanti e diventa più corta */
    max-width: calc(100% - 1rem); /* Sicurezza per schermi di telefoni molto stretti */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem; /* Spazio fisso e ridotto tra i pulsanti */
    padding: 0.4rem 0.5rem; /* Ridotto leggermente per far spazio alla pillola */
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 50px; /* Trasforma la dock in una grande pillola arrotondata */
}

.dock-item {
    display: flex;
    flex-direction: row; /* Posiziona icona e testo in orizzontale */
    align-items: center;
    text-decoration: none;
    color: var(--testo-primario);
    opacity: 0.6;
    transition: all 0.3s ease;
    gap: 0.4rem; /* Spazio orizzontale tra icona e testo */
    padding: 0.6rem 0.8rem; /* Bilancia gli spazi interni del bottone */
    border-radius: 50px; /* Base per la forma a pillola */
}

.dock-item.active {
    opacity: 1;
    background-color: #846d5c; /* Marroncino più morbido e meno intenso */
    color: #ffffff; /* Testo e icona bianchi per contrasto */
}

/* Stile Icone HD (Stroke) */
.dock-item .icon-svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dock-item .icon-whatsapp,
.icon-whatsapp {
    fill: currentColor;
    stroke: none;
}

.dock-item span:not(.icon-svg, .dock-badge) {
    font-size: 0.85rem; /* Testo più grande e leggibile */
    font-weight: 500;
    white-space: nowrap; /* Mantiene la forma della pillola */
}

/* --- Badge Numerico Lista --- */
.dock-badge {
    background-color: var(--testo-primario); /* Colore marrone */
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 0;
    width: 0;
    height: 1.2rem;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex; /* Forziamo l'allineamento a prescindere dal JS */
    align-items: center; /* Centra il numero verticalmente */
    justify-content: center; /* Centra il numero orizzontalmente */
    line-height: 1; /* Forza il centro verticale perfetto */
    opacity: 0;
    transform: scale(0);
    margin-left: 0;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

.dock-badge.show {
    opacity: 1;
    transform: scale(1);
    width: 1.2rem;
    min-width: 1.2rem;
    margin-left: 0.4rem; /* Spazio dal testo solo quando visibile */
}

/* --- Finestra Modale Prodotto --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: flex-end; /* Allinea in basso come un Bottom Sheet */
    justify-content: center;
    padding: 0; /* Rimuove il padding per farla aderire al fondo */
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
    transform: translateZ(0); /* Ottimizzazione hardware GPU */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 100%;
    max-width: 600px; /* Più largo per adattarsi bene anche ai tablet */
    background: var(--bg-sfumatura);
    position: relative;
    padding: 0; /* Rimuove il padding per farla aderire al fondo */
    border-radius: 1.5rem 1.5rem 0 0; 
    overflow: hidden; /* Blocca lo scroll del pannello, lo gestisce il modal-body */
    transform: translateY(100%);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.1, 1, 0.3, 1); /* Curva più reattiva e morbida */
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15); /* Ombra proiettata verso l'alto */
    max-height: calc(100vh - 3rem); /* Fallback per vecchi browser */
    max-height: calc(100dvh - 3rem); /* Protegge la "X" calcolando sempre lo spazio reale, aggirando le barre URL */
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .modal-content {
    transform: translateY(0); /* Lo riporta nella posizione visibile */
}

#modal-body {
    flex: 1; /* Il blocco si adatta all'altezza gestita dal contenitore padre */
    overflow-y: auto;
    scrollbar-width: none; /* Nasconde la barra di scorrimento su Firefox */
    -ms-overflow-style: none; /* IE e Edge */
}

#modal-body::-webkit-scrollbar {
    display: none; /* Nasconde la barra di scorrimento su Chrome, Safari e Opera */
}

.btn-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    color: var(--testo-primario);
}

.btn-icon:active {
    transform: scale(0.96);
}

.close-modal-top {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.modal-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Rende la foto un quadrato perfetto */
    object-fit: cover;
    border-radius: 1.5rem; /* Bordi più rotondi */
    margin-bottom: 1rem;
}

.modal-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.modal-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

/* --- Opzioni Prodotto (Varianti) --- */
.modal-body-content {
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.modal-options {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 1rem;
    align-items: center;
    width: 100%;
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    width: 100%;
}

.option-group label {
    font-size: 0.85rem;
    font-weight: 700;
}

/* --- Chips Opzioni (Glassy) --- */
.chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--vetro-bordo);
    background: var(--vetro-bg); /* Effetto vetro senza il blur pesante */
    box-shadow: var(--ombra-leggera);
}

.chip input {
    display: none; /* Nascondiamo il classico pallino del radio button */
}

/* Quando il chip è selezionato, si colora di marroncino */
.chip:has(input:checked) {
    background: var(--testo-primario);
    color: white;
    border-color: var(--testo-primario);
}

/* Icone delle fragranze personalizzate */
.chip .custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.chip .custom-icon svg {
    width: 100%;
    height: 100%;
}

.chip:has(input:checked) .custom-icon svg * {
    stroke: #ffffff !important; /* Forza l'icona bianca quando selezioni la pillola */
}

.chip .material-symbols-outlined {
    font-size: 1.1rem;
}

.color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
}

/* --- Textarea Note --- */
.glass-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid var(--vetro-bordo);
    border-radius: 1rem;
    padding: 0.8rem 1rem;
    color: var(--testo-primario);
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical; /* Permette all'utente di allungarla solo in altezza */
    outline: none;
    transition: all 0.2s ease;
}

.glass-textarea:focus {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--testo-primario);
}

.glass-textarea::placeholder {
    color: rgba(92, 74, 61, 0.5); /* Marroncino semitrasparente */
}

/* --- Contatore Quantità (Glassy) --- */
.quantity-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 130px;
    padding: 0.4rem;
    border-radius: 50px;
    background: var(--vetro-bg);
    border: 1px solid var(--vetro-bordo);
    box-shadow: var(--ombra-leggera);
}

.quantity-selector button {
    background: none;
    border: none;
    color: var(--testo-primario);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background 0.2s;
}

.quantity-selector button:active {
    background: rgba(0,0,0,0.1);
}

.quantity-selector input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 500;
    color: var(--testo-primario);
    font-size: 1rem;
    pointer-events: none;
    line-height: 1; /* Forza il centro verticale perfetto */
    padding: 0;
}

/* --- Nasconde le frecce del campo number per centrare il testo --- */
.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-selector input[type=number] {
    appearance: textfield; /* Standard moderno per risolvere l'avviso */
    -moz-appearance: textfield;
}

/* --- Barra e Bottone Fluttuanti (Glassy) --- */
.sticky-bottom-bar, .floating-bottom-bar {
    width: 100%;
    padding: 0 1.5rem;
    z-index: 50;
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: center;
}

.sticky-bottom-bar {
    position: sticky;
    bottom: 4rem; /* Rialzata per pareggiare la dock bar in basso */
    margin-bottom: 4rem; /* Margine interno aumentato per permettere lo scorrimento del fondo sotto il pulsante */
}

.floating-bottom-bar {
    position: absolute;
    bottom: 4rem; /* Rialzata per pareggiare la dock bar in basso */
    left: 0;
}

.btn.btn-whatsapp {
    background: rgba(37, 211, 102, 0.9); /* Colore WhatsApp con leggero effetto vetro */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4); /* Ripristina il bordo corretto */
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-btn {
    background: var(--vetro-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--vetro-bordo);
    color: var(--testo-primario);
    box-shadow: 0 10px 30px rgba(92, 74, 61, 0.15); /* Bella ombra per l'effetto volo */
}

body.modal-open {
    overflow: hidden; /* Blocca lo scorrimento del sito quando la modale è aperta */
}

/* --- Finestra Lista / Carrello (Full Screen Drawer) --- */
.lista-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-sfumatura);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.1, 1, 0.3, 1);
}

.lista-overlay.active {
    transform: translateX(0);
}

.lista-header {
    display: flex;
    align-items: center;
    justify-content: center; /* Centriamo il titolo ora che la X è in basso */
    padding: 1.5rem;
    background: var(--vetro-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--vetro-bordo);
    z-index: 10;
}

.lista-header h2 {
    font-size: 1.3rem;
    font-weight: 600;
}

.lista-body {
    flex: 1;
    padding: 1.5rem 1rem 10.5rem 1rem; /* Spazio extra in basso per ospitare i pulsanti impilati verticalmente */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scrollbar-width: none;
}

.lista-body::-webkit-scrollbar {
    display: none;
}

.lista-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
    background: var(--vetro-bg);
    border: 1px solid var(--vetro-bordo);
    border-radius: 1.5rem;
    box-shadow: var(--ombra-leggera);
}

.lista-item-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 0.8rem;
}

.lista-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.lista-item-title {
    font-weight: 600;
    font-size: 1rem;
}

.lista-item-details {
    font-size: 0.75rem;
    opacity: 0.8;
    line-height: 1.4;
}

.lista-item-delete {
    background: transparent;
    border: none;
    color: #d32f2f; /* Rosso morbido di allerta */
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.lista-item-delete:active {
    transform: scale(0.9);
}

.lista-empty {
    text-align: center;
    padding: 4rem 1rem;
    opacity: 0.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* --- Toast Notification (Avviso Annulla Eliminazione) --- */
.toast-notification {
    position: fixed;
    bottom: 8rem; /* Posizionato sospeso appena sopra la dock bar */
    left: 50%;
    transform: translate(-50%, 20px);
    background: rgba(92, 74, 61, 0.85); /* Sfondo marrone semi-trasparente */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* Bordino sottile e leggero */
    color: #ffffff;
    padding: 0.9rem 1.5rem;
    border-radius: 50px;
    width: max-content; /* Si adatta e stringe per matchare la dock */
    min-width: 320px; /* Mantiene la stessa proporzione della dock in basso */
    max-width: calc(100% - 2rem);
    overflow: hidden; /* Ritaglia la barra di scorrimento sui bordi tondi */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spazia il testo a sinistra e il bottone a destra */
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(92, 74, 61, 0.3);
    z-index: 4000; /* Sempre in primissimo piano */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.toast-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0); /* Scivola verso l'alto dolcemente */
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    width: 100%;
    transform-origin: left;
}

.toast-notification.show .toast-progress {
    animation: toastProgressAnim 5s linear forwards;
}

@keyframes toastProgressAnim {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

.toast-undo-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Paracadute per Telefoni Minuscoli (< 360px) --- */
@media (max-width: 360px) {
    .catalog-grid {
        grid-template-columns: 1fr; /* Passa a 1 colonna per non schiacciare testi e foto */
    }
    .vantaggi-grid {
        grid-template-columns: 1fr; /* Impila i vantaggi verticalmente */
    }

    /* Restringe la dock in modo sicuro senza bisogno di scorrimento orizzontale */
    .dock-item {
        padding: 0.5rem 0.5rem;
        gap: 0.2rem;
    }
    .dock-item span:not(.icon-svg, .dock-badge) {
        font-size: 0.75rem; /* Font ridotto di un pelo */
    }
    .dock-item .icon-svg {
        width: 18px;
        height: 18px;
    }
}

/* --- Media Queries per schermi più grandi (Tablet e Desktop) --- */
@media (min-width: 600px) {
    .vantaggi-grid { gap: 1rem; }
    .vantaggio-card { padding: 1.5rem 1rem; }
    .vantaggio-card p { font-size: 0.9rem; }
    
    .catalog-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .btn { width: auto; padding: 0.75rem 1.5rem; } /* Tasto dimensione automatica su PC */
    .logo { max-height: 130px; }
}

@media (min-width: 900px) {
    .catalog-grid { grid-template-columns: repeat(4, 1fr); }
    .header { padding: 3rem 1rem 2rem; }
    .vantaggi-section h2 { font-size: 1.3rem; }

    /* Cassetto Lista elegante su schermi PC */
    .lista-overlay {
        width: 420px;
        left: auto;
        right: 0;
        box-shadow: -15px 0 50px rgba(92, 74, 61, 0.15); /* Ombra morbida per staccarlo dallo sfondo */
        border-left: 1px solid var(--vetro-bordo);
        border-radius: 2rem 0 0 2rem; /* Arrotonda solo gli angoli a sinistra */
    }

    /* Modale Finestra (Popup) su Desktop */
    .modal-overlay {
        align-items: center; /* Centra la finestra verticalmente invece di allinearla in basso */
        padding: 2rem; /* Margine di sicurezza per non farla incollare ai bordi dello schermo */
    }

    /* Riduciamo l'intensità e l'ingombro delle maschere di scorrimento su schermi grandi */
    .scroll-mask-top { height: 15px; opacity: 0.4; }
    .scroll-mask-bottom { height: 30px; opacity: 0.4; }

    .modal-content {
        max-width: 1000px; /* Allargata ulteriormente per spalmare in orizzontale le opzioni */
        width: 100%;
        border-radius: 1.5rem; /* Arrotonda tutti e 4 gli angoli per chiudere la finestra */
        max-height: 90vh; /* Permettiamo alla finestra di diventare più alta per sfruttare i monitor PC */
        
        /* Annulla lo scorrimento dal basso e applica un morbido effetto "Pop-up" centrale */
        transform: scale(0.9);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
    }

    .modal-overlay.active .modal-content {
        transform: scale(1);
        opacity: 1;
    }

    /* --- Modifiche Layout a 2 Colonne --- */
    #modal-body {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Due colonne di pari larghezza */
        gap: 0 2.5rem;
        padding: 2.5rem;
        text-align: left; /* Allinea i testi a sinistra */
        align-items: start;
    }

    .modal-body-content {
        display: contents; /* Rimuove il contenitore intermedio, i figli diventano elementi della griglia */
    }

    .modal-img {
        grid-column: 1;
        grid-row: 1 / span 10; /* Occupa interamente la colonna sinistra */
        max-height: 80vh; /* Scalato in proporzione alla nuova altezza della finestra */
        aspect-ratio: auto; /* Rimuove il quadrato forzato per sfruttare l'altezza su PC */
        object-fit: cover;
        position: sticky;
        top: 0; /* Fissa l'immagine allo scroll della colonna destra */
        margin: 0;
    }

    /* Sposta tutti i testi e le opzioni nella colonna di destra */
    .badge-modal, .modal-title, .modal-desc, .modal-options, .sticky-bottom-bar {
        grid-column: 2;
    }

    .badge-modal { margin-bottom: 1rem; justify-self: start; }
    .modal-title { font-size: 2rem; margin-bottom: 0.5rem; }
    .modal-options, .option-group { align-items: flex-start; }
    .chips-container { justify-content: flex-start; }

    /* Barra del pulsante Aggiungi (Sospesa in centro a destra) */
    .sticky-bottom-bar {
        position: sticky;
        bottom: 1.5rem; /* Stacca il pulsante dal fondo per farlo galleggiare */
        padding: 1.5rem 0 0 0;
        margin-bottom: 0;
        justify-content: center; /* Centra il pulsante nella sua colonna */
        z-index: 10;
    }

    .close-modal-top {
        position: fixed; /* Bypassa il contenitore sticky grazie al transform sul modal-content */
        top: 1.5rem;
        right: 1.5rem;
    }
    
    .sticky-bottom-bar .btn-icon {
        display: none; /* Nascondiamo la freccia 'Indietro' su desktop perché c'è già la X in alto */
    }
}