/* ============================================================
   BiBi Bijoux — foglio di stile
   Palette: viola pastello, eleganza e pulizia
   ============================================================ */

/* Variabili di colore: si cambiano qui e si aggiorna tutto */
:root {
    --viola-bg:        #ece4f6;   /* sfondo pagina: viola pastello */
    --bianco:          #ffffff;   /* barra menu e superfici */
    --viola-chiaro:    #f6f1fb;   /* sfondo delle sezioni */
    --viola:           #a48bc9;   /* accento medio */
    --viola-scuro:     #5f4690;   /* titoli e testi importanti */
    --testo:           #4a3f5c;   /* testo principale */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
    font-weight: 300;
    background: var(--viola-bg);
    color: var(--testo);
    line-height: 1.7;
}

/* I titoli e il logo usano un carattere serif elegante */
h1, h2, h3, .logo {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
}

/* ---------- Barra dei menu: bianca ---------- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 2.5rem;
    background: var(--bianco);
    box-shadow: 0 2px 14px rgba(95, 70, 144, .10);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-wrap: wrap;
    gap: .5rem;
}

.logo {
    font-size: 1.5rem;
    color: var(--viola-scuro);
    text-decoration: none;
    letter-spacing: .5px;
}

.navbar nav {
    display: flex;
    gap: 1.8rem;
    flex-wrap: wrap;
}

.navbar nav a {
    text-decoration: none;
    color: var(--viola-scuro);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: .3rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color .3s, opacity .3s;
}

.navbar nav a:hover {
    border-bottom-color: var(--viola);
    opacity: .8;
}

/* ---------- Sezione principale ---------- */
.hero {
    text-align: center;
    padding: 5.5rem 2rem 5rem;
    background: linear-gradient(180deg, var(--viola-bg) 0%, var(--bianco) 100%);
}

.eyebrow {
    font-size: .75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--viola-scuro);
    opacity: .7;
    margin-bottom: 1.4rem;
}

.hero h1 {
    font-size: 3rem;
    color: var(--viola-scuro);
    margin-bottom: 1.4rem;
}

.hero p:not(.eyebrow) {
    max-width: 540px;
    margin: 0 auto 2.4rem;
    font-size: 1.05rem;
}

.btn {
    display: inline-block;
    border: 1px solid var(--viola-scuro);
    color: var(--viola-scuro);
    padding: .95rem 2.8rem;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    transition: transform .2s ease, box-shadow .2s ease, background .3s, color .3s;
}

.btn:hover {
    background: var(--viola-scuro);
    color: var(--bianco);
    transform: translateY(-2px);
}

.btn-mail {
    background: linear-gradient(135deg, #9a6fc9 0%, #6c4d97 100%);
    border-color: transparent;
    color: var(--bianco);
    box-shadow: 0 12px 24px rgba(108, 77, 151, .22);
}

.btn-mail:hover {
    background: linear-gradient(135deg, #8d64be 0%, #5f427f 100%);
    color: var(--bianco);
}

.btn-secondary {
    border-color: rgba(95, 70, 144, .45);
    background: transparent;
}

.btn-secondary:hover {
    background: var(--viola-chiaro);
    color: var(--viola-scuro);
}

/* ---------- Chi siamo ---------- */
.about {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--viola-chiaro);
}

.about h2 {
    font-size: 2rem;
    color: var(--viola-scuro);
    margin-bottom: 1.3rem;
}

.about p {
    max-width: 600px;
    margin: 0 auto;
}

/* ---------- Intestazione delle pagine interne ---------- */
.pagina-intro {
    text-align: center;
    padding: 4rem 2rem 1rem;
}

.pagina-intro h1 {
    font-size: 2.6rem;
    color: var(--viola-scuro);
    margin-bottom: .8rem;
}

.pagina-intro p:not(.eyebrow) {
    max-width: 520px;
    margin: 0 auto;
}

/* ---------- Griglia dei prodotti ---------- */
.prodotti {
    padding: 3rem 2rem 4rem;
}

.griglia-prodotti {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.prodotto-card {
    background: var(--bianco);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(95, 70, 144, .12);
    transition: transform .3s, box-shadow .3s;
}

.prodotto-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(95, 70, 144, .20);
}

/* Riquadro che ospita la foto del prodotto */
.prodotto-immagine {
    background: linear-gradient(150deg, var(--viola-chiaro), var(--viola-bg));
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--viola-scuro);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.2rem;
    letter-spacing: .5px;
}

/* La foto vera e propria: riempie il riquadro senza deformarsi */
.prodotto-immagine img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prodotto-info {
    padding: 1.4rem 1.4rem 1.6rem;
    text-align: center;
}

.prodotto-info h2 {
    font-size: 1.3rem;
    color: var(--viola-scuro);
    margin-bottom: .4rem;
}

.prodotto-descrizione {
    font-size: .9rem;
    margin-bottom: .8rem;
}

.prodotto-azioni {
    display: flex;
    justify-content: center;
    margin-top: .8rem;
}

.prodotto-azioni .btn {
    padding: .8rem 1.5rem;
    letter-spacing: 1.5px;
}

.vuoto {
    text-align: center;
    padding: 3rem;
    color: var(--viola-scuro);
    opacity: .7;
}

.prodotto-immagine-link {
    display: block;
    text-decoration: none;
    color: inherit;
}


/* ---------- Pagina di dettaglio di un prodotto ---------- */
.dettaglio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 4.5rem 2rem;
}

/* Riquadro grande per la foto, con lo stesso stile delle card */
.dettaglio-immagine {
    background: linear-gradient(150deg, var(--viola-chiaro), var(--viola-bg));
    border-radius: 14px;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--viola-scuro);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.4rem;
    letter-spacing: .5px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(95, 70, 144, .12);
    /* Serve alla lente: le permette di posizionarsi dentro questo riquadro */
    position: relative;
    /* Il mirino suggerisce che si può ingrandire */
    cursor: zoom-in;
    /* Doppio clic per ingrandire: evito che il clic selezioni il testo attorno */
    user-select: none;
}

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

/* ---------- Lente d'ingrandimento che segue il puntatore ---------- */
.lente {
    position: absolute;
    border-radius: 50%;
    /* Ritaglia la foto ingrandita a forma di cerchio */
    overflow: hidden;
    /* La lente non deve intercettare i clic: passano al contenuto sotto */
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    /* Bordo bianco + ombra: sembra una vera lente appoggiata sopra */
    box-shadow: 0 0 0 3px var(--bianco), 0 10px 26px rgba(95, 70, 144, .35);
    z-index: 5;
}

/* La lente compare quando il mouse entra nella foto */
.lente.attiva {
    opacity: 1;
}

.lente img {
    position: absolute;
    /* Annulla la larghezza/altezza del 100%: qui i valori li calcola il JavaScript */
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Sul telefono non c'è il mouse: la lente non serve */
@media (hover: none) {
    .lente {
        display: none;
    }

    .dettaglio-immagine {
        cursor: default;
    }
}

/* ---------- Ingrandimento a tutto schermo (doppio clic) ---------- */

/* Il pannello scuro che copre tutta la finestra */
.visore {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Sopra a tutto: il fumetto del cuore arriva a 20 */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    /* Velo scuro semitrasparente con leggero effetto sfocato */
    background: rgba(38, 24, 60, .9);
    backdrop-filter: blur(4px);
    /* Il cursore a lente "meno" fa capire che un clic chiude */
    cursor: zoom-out;
    /* Spento: invisibile e non cliccabile */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s;
}

/* Acceso */
.visore.aperto {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* La foto dentro il pannello: più grande possibile, mai deformata */
.visore-foto {
    /* Larghezza e altezza si adattano alla foto: il riquadro aderisce
       esattamente all'immagine (niente barre vuote e ombra corretta) */
    width: auto;
    height: auto;
    /* Ma non più larga del 94% della finestra... */
    max-width: 94vw;
    /* ...e non più alta del 92%: così riempie lo schermo senza bordi tagliati */
    max-height: 92vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
    /* Parte un po' più piccola e si assesta: dà l'idea di aprirsi */
    transform: scale(.94);
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}

.visore.aperto .visore-foto {
    transform: scale(1);
}

/* La crocetta di chiusura, in alto a destra */
.visore-chiudi {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: var(--bianco);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.visore-chiudi:hover,
.visore-chiudi:focus-visible {
    background: rgba(255, 255, 255, .28);
    transform: scale(1.08);
}

/* Il suggerimento in basso */
.visore-aiuto {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
}

/* Mentre il pannello è aperto la pagina sotto non deve scorrere */
body.corpo-bloccato {
    overflow: hidden;
}

/* Su schermi stretti tolgo il suggerimento (spazio prezioso) */
@media (max-width: 720px) {
    .visore {
        padding: 1.2rem;
    }

    .visore-aiuto {
        display: none;
    }
}

.dettaglio-info h1 {
    font-size: 2.5rem;
    color: var(--viola-scuro);
    margin-bottom: 1.1rem;
}

.dettaglio-descrizione {
    margin-bottom: 1.8rem;
    font-size: 1.02rem;
}

.dettaglio-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.dettaglio-azioni .btn {
    padding: .95rem 1.7rem;
    letter-spacing: 1.5px;
}

/* Su schermi stretti (telefono) tutto in una colonna */
@media (max-width: 720px) {
    .dettaglio {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.4rem;
    }

    .dettaglio-immagine {
        height: 300px;
    }
}

/* ---------- Cuore "mi piace" + contatore ---------- */

/* Il gruppo cuore + numero, da mettere di fianco al nome del prodotto */
.cuore-widget {
    /* Serve per posizionare il fumetto rispetto a questo gruppo */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: .6rem;
    /* "middle" lo tiene allineato al centro del testo del titolo */
    vertical-align: middle;
    /* Il nome usa Playfair Display: qui rimettiamo il carattere del testo */
    font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
}

/* Il bottone vero e proprio */
.cuore {
    border: none;
    background: none;
    padding: .2rem;
    cursor: pointer;
    color: var(--viola);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .25s ease, transform .2s ease;
}

.cuore svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    /* Bordo visibile + interno vuoto: il cuore "non ancora cliccato" */
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: fill .25s ease;
}

.cuore:hover {
    color: #d6336c;
}

.cuore:focus-visible {
    outline: 2px solid var(--viola-scuro);
    outline-offset: 3px;
    border-radius: 50%;
}

/* Dopo il clic il cuore si riempie di colore */
.cuore.attivo {
    color: #d6336c;
}

.cuore.attivo svg {
    fill: currentColor;
}

/* Il numero accanto al cuore */
.cuore-contatore {
    min-width: 1.5rem;
    text-align: center;
    color: var(--viola-scuro);
    font-variant-numeric: tabular-nums;   /* le cifre non "ballano" cambiando numero */
    display: inline-block;
}

/* ---------- Il fumetto che compare col mouse sopra ---------- */
.cuore-messaggio {
    position: absolute;
    /* Appare appena sotto il cuore */
    top: calc(100% + .5rem);
    left: 50%;
    transform: translate(-50%, -.4rem);
    width: max-content;
    max-width: 190px;
    padding: .45rem .7rem;
    border-radius: 9px;
    background: var(--viola-scuro);
    color: var(--bianco);
    font-size: .72rem;
    line-height: 1.35;
    letter-spacing: .2px;
    text-align: center;
    white-space: normal;   /* a differenza del resto, qui il testo può andare a capo */
    /* Nascondo il fumetto, ma lo lascio "pronto" per l'animazione */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;  /* non deve rubare il clic al cuore */
    z-index: 20;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

/* La freccetta in alto, come nei fumetti dei cartoni */
.cuore-messaggio::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--viola-scuro);
}

/* Compare passandoci sopra col mouse, o col tabulatore della tastiera */
.cuore-widget:hover .cuore-messaggio,
.cuore-widget:focus-within .cuore-messaggio {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ---------- Le animazioni del clic ---------- */

/* Il cuore fa un "pop": si allarga, scatta e torna a posto */
@keyframes cuore-pop {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.45) rotate(-10deg); }
    55%  { transform: scale(.88) rotate(6deg); }
    75%  { transform: scale(1.12) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.cuore.animato {
    animation: cuore-pop .6s cubic-bezier(.3, .9, .4, 1);
}

/* Il numero salta verso l'alto e ricade */
@keyframes contatore-salta {
    0%   { transform: translateY(0);    opacity: 1; }
    40%  { transform: translateY(-.7rem); opacity: .35; }
    100% { transform: translateY(0);    opacity: 1; }
}

.cuore-contatore.salta {
    animation: contatore-salta .5s ease;
}

/* Nella pagina di dettaglio il nome è grande: il cuore cresce un po' */
.dettaglio-info .cuore svg {
    width: 1.9rem;
    height: 1.9rem;
}

.dettaglio-info .cuore-widget {
    font-size: .95rem;
}

/* Sulle schermate senza mouse (telefono) il fumetto non serve:
   comparirebbe solo "a caso". Lo teniamo nascosto. */
@media (hover: none) {
    .cuore-messaggio {
        display: none;
    }
}

/* ---------- Piè di pagina ---------- */
.footer {
    text-align: center;
    padding: 2.4rem 2rem 2.8rem;
    color: var(--viola-scuro);
}

/* Il nome del marchio resta piccolo, maiuscolo e spaziato come prima */
.footer-marchio {
    font-size: .75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .75;
}

/* Riga dei contatti: icone + indirizzo, affiancati */
.footer-contatti {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.footer-contatto {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--viola-scuro);
    text-decoration: none;
    font-size: .85rem;
    letter-spacing: .3px;
    text-transform: none;
    opacity: .85;
    transition: opacity .3s, color .3s;
}

/* Le icone SVG si colorano col testo (currentColor) */
.footer-contatto svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.footer-contatto:hover {
    opacity: 1;
    color: var(--viola);
}

/* Su schermi stretti i contatti si impilano in colonna */
@media (max-width: 480px) {
    .footer-contatti {
        flex-direction: column;
        gap: .7rem;
    }
}

/* ---------- Pagina contatti ---------- */

/* Testata in alto: lo stesso stile chiaro ed elegante di tutto il sito */
.contatti-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 5.5rem 2rem 5rem;
    background: linear-gradient(180deg, var(--viola-bg) 0%, var(--viola-chiaro) 100%);
    color: var(--viola-scuro);
}

/* Due cerchi decorativi in trasparenza, fuori dal bordo */
.contatti-hero-decor {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.contatti-hero-decor--uno {
    width: 340px;
    height: 340px;
    border: 1px solid rgba(95, 70, 144, .14);
    top: -170px;
    right: -90px;
}

.contatti-hero-decor--due {
    width: 220px;
    height: 220px;
    border: 1px solid rgba(95, 70, 144, .12);
    bottom: -120px;
    left: -60px;
}

.contatti-eyebrow {
    margin-bottom: 1.8rem;
}

.contatti-hero h1 {
    font-size: 2.6rem;
    color: var(--viola-scuro);
    margin-bottom: 1.6rem;
    line-height: 1.5;
}

.contatti-hero-testo {
    max-width: 560px;
    margin: 0 auto;
    color: var(--testo);
    line-height: 2.3;
}

/* Le card scendono leggermente sopra la banda */
.contatti-sezione {
    max-width: 920px;
    margin: -2rem auto 0;
    padding: 0 2rem 5rem;
    position: relative;
}

.contatti {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2.5rem;
    flex-wrap: wrap;
}

/* Ogni recapito è una "card" cliccabile */
.contatto-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex: 1 1 280px;
    max-width: 420px;
    background: var(--bianco);
    border-radius: 16px;
    padding: 1.6rem 1.9rem;
    text-decoration: none;
    color: var(--viola-scuro);
    box-shadow: 0 12px 30px rgba(95, 70, 144, .18);
    transition: transform .3s, box-shadow .3s;
}

.contatto-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(95, 70, 144, .26);
}

/* Il cerchio chiaro che contiene l'icona (tono tenue, come nel resto del sito) */
.contatto-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--viola-chiaro), var(--viola-bg));
    color: var(--viola-scuro);
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(95, 70, 144, .12);
}

.contatto-testo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 2.1;
}

.contatto-etichetta {
    font-size: .68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .65;
    margin-bottom: .4rem;
}

/* L'indirizzo non va a capo in mezzo e resta piccolo ed elegante */
.contatto-valore {
    font-size: .95rem;
    font-weight: 400;
    overflow-wrap: anywhere;
}

/* Nota sotto le card */
.contatti-nota {
    text-align: center;
    max-width: 560px;
    margin: 3.5rem auto 0;
    padding: 0 2rem;
    font-size: .9rem;
    line-height: 2.3;
    opacity: .9;
}

@media (max-width: 720px) {
    .contatti-hero {
        padding: 3.5rem 1.6rem 3rem;
    }

    .contatti-hero h1 {
        font-size: 2rem;
    }

    .contatti-sezione {
        margin-top: -1rem;
    }
}