/* =====================================================================
   VARIABLES
===================================================================== */
:root{
    --brand-fuchsia:#c4408d;
    --text-dark   :#333;
    --text-muted  :#555;
    --bg-light    :#f4f4f4;
    --line-tight  :1.4;
    --radius      :4px;
}

/* =====================================================================
   HERO
===================================================================== */
.quiz-hero{
    text-align:center;
    padding:0 1rem;
    max-width:700px;
    margin:0 auto 60px;
}
.quiz-hero h1{
    font-size:2.25rem;
    font-weight:600;
    line-height:1.1;
    color:var(--brand-fuchsia);
    margin-bottom:.6rem;
}
.quiz-hero .lead{
    font-size:1rem;
    font-weight:500;
    color:var(--text-dark);
    line-height:var(--line-tight);
    margin:0 auto 1rem;
    max-width:600px;
}
.quiz-hero .sub-hero{
    font-size:.95rem;
    font-style:italic;
    color:var(--text-muted);
    line-height:var(--line-tight);
    margin:0;
}
#startQuiz{ margin-top:32px; }

/* ― pillole intro ― */
.quiz-features{
    list-style:none;
    margin:0 auto 2rem;
    max-width:500px;
    display:flex; flex-wrap:wrap;
    gap:.6rem; justify-content:center;
    padding:0;
}
.quiz-features li{
    background:var(--bg-light);
    padding:.4rem .8rem;
    border-radius:20px;
    font-size:.95rem;
    color:var(--text-dark);
}
.quiz-hero .button{
    font-size:1rem;
    padding:.8rem 1.6rem;
}

/* =====================================================================
   QUIZ
===================================================================== */
.quiz-wrapper{
    max-width:650px;
    margin:32px auto;
    padding:0 1rem;
}
.slide h2{
    font-size:1.25rem;
    font-weight:500;
    margin-bottom:16px;
    color:var(--text-dark);
}
.slide .opt{
    display:flex; align-items:center;
    margin:8px 0;
}
.slide .opt input{
    width:16px; height:16px; margin-right:8px;
}

/* nav */
.quiz-nav{
    display:flex; justify-content:flex-end; gap:1rem;
    margin-top:1.5rem;
}
.quiz-nav button:disabled{ opacity:.5; cursor:default; }

/* progress */
.progress-wrap{
    position:relative; height:6px; background:#eee; border-radius:3px;
    margin-bottom:1.6rem;
}
.progress-bar{
    height:100%; width:0;
    background:var(--brand-fuchsia);
    border-radius:3px; transition:width .3s ease;
}
.progress-logo{
    position:absolute; top:50%; left:0; width:32px;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

/* =====================================================================
   RISULTATO
===================================================================== */
.quiz-result{ text-align:center; }
.page-title strong{ font-size:2.5rem; }
@media(max-width:768px){ .page-title strong{ font-size:2rem; } }

/* tema (sottotitolo fucsia) */
.stone-theme{
    font-size:clamp(1.4rem,4vw,2rem);
    font-weight:600;
    color:var(--brand-fuchsia);
    margin:.75rem 0 1.25rem;
    line-height:var(--line-tight);
}

/* carosello */
.result-swiper{
    margin:1.6rem auto; max-width:360px;
    border-radius:12px; overflow:hidden;
    position:relative;
}
.result-swiper .swiper-wrapper,
.result-swiper .swiper-slide{ width:100%!important; }

.result-swiper .text-slide{
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center;
    background:var(--bg-light);
    padding:2rem 1.25rem;
    gap:.75rem;
}
.result-swiper .text-slide h3{
    font-size:1.35rem; font-weight:600; margin:0; line-height:1.3;
    color:var(--text-dark);
}
.result-swiper .text-slide p{
    font-size:1rem; line-height:1.55; color:var(--text-muted);
    max-width:22ch; margin:0 auto;
}
@media(max-width:600px){
    .result-swiper .text-slide h3{ font-size:1.2rem; }
    .result-swiper .text-slide p { font-size:.95rem; }
}

/* --- CORREZIONE larghezza carosello dentro blocco storia --- */
.stone-story .result-swiper{
    width:100%;
    max-width:600px;         /* 360px era troppo stretto su desktop  */
    margin:0 auto;
}
.stone-story .swiper-slide{
    flex:0 0 100%!important;
    max-width:100%!important;
}

/* contatore Swiper */
.result-swiper .swiper-pagination{
    position:absolute; bottom:8px; right:12px;
    font-size:.9rem; font-weight:500;
    color:var(--brand-fuchsia); pointer-events:none;
}

/* caption */
.stone-caption{
    font-size:1.125rem; line-height:1.55;
    margin:1.75rem auto 2.5rem; max-width:640px;
    text-align:center; font-style:italic;
    color:var(--brand-fuchsia);
}

/* griglia prodotti */
.prod-grid{
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:24px; max-width:720px; margin:32px auto 64px;
}
.prod-card{
    width:calc(100%/3 - 16px); text-decoration:none; color:inherit;
}
.prod-card img{
    width:100%; max-height:220px;
    border-radius:var(--radius); margin-bottom:.5rem;
    border:2px solid transparent; transition:border-color .3s ease;
}
.prod-card:hover img{ border-color:var(--brand-fuchsia); }
.prod-card span{
    display:block; font-family:"Faculty Glyphic",sans-serif;
    font-size:1.25rem; line-height:1.75rem;
}
@media(max-width:767px){
    .quiz-hero h1{ font-size:1.75rem; }
    .quiz-nav{ flex-direction:column; }
    .prod-grid{ gap:16px; }
}

/* =====================================================================
   LOADER
===================================================================== */
.quiz-loader{
    position:fixed; inset:0;
    background:rgba(255,255,255,.85);
    display:none;                   /* nascosto di default */
    align-items:center; justify-content:center;
    z-index:9999;
}
.quiz-loader.show{ display:flex; }  /* visibile quando js aggiunge .show */

.quiz-loader .loader-inner{ text-align:center; }

.quiz-loader img{
    width:64px; animation:spin 1.2s linear infinite;
}
.loader-bar{
    display:block; width:160px; height:6px;
    margin:18px auto 0; background:#e0e0e0; border-radius:3px; overflow:hidden;
}
.loader-bar span{
    display:block; width:40%; height:100%;
    background:var(--brand-fuchsia); animation:fill 1.2s ease-in-out infinite;
}

/* animazioni (solo se l’utente non preferisce ridurre) */
@media(prefers-reduced-motion:no-preference){
    @keyframes spin{ to{ transform:rotate(360deg); } }
    @keyframes fill{
        0%  { transform:translateX(-100%); }
        50% { transform:translateX(0); }
        100%{ transform:translateX(100%); }
    }
}

/* ——— FIX definitivo all’allineamento delle slide testuali ——— */

/* 1. il carosello occupa il 100 % del wrapper ma non supera 600 px */
.stone-story .result-swiper{
    width:100%;
    max-width:600px;      /* puoi alzare/abbassare questa soglia se vuoi */
    margin:0 auto;        /* lo centra orizzontalmente */
}

/* 2. ogni slide è larga quanto il carosello e usa FlexBox al centro   */
.stone-story .swiper-slide.text-slide{
    width:100% !important;      /* niente 33 %, niente dimensioni ‘auto’ */
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2rem 1.5rem;
}

/* 3. titoli e paragrafi restano dentro la slide senza sbordare        */
.stone-story .swiper-slide.text-slide h3,
.stone-story .swiper-slide.text-slide p{
    max-width:22ch;             /* colonnina stretta e leggibile        */
    margin:0 0 .5rem;
}

/* opzionale: se vuoi che il titolo possa andare a capo senza tagli    */
.stone-story .swiper-slide.text-slide h3{
    white-space:normal;
}