/* =====================================================================
   Verlo Beauty — confezioni make-up (stesso stile delle scatole Verlo)
   ===================================================================== */
/* Scala comune: le forme si adattano alle tre dimensioni */
.box3d-sm { --s: 1; }
.box3d-md { --s: 1.42; }
.box3d-lg { --s: 1.85; }
@media (max-width: 720px) { .box3d-lg { --s: 1.5; } }

/* Forme delle confezioni */
.box3d.shape-box     { --w: calc(118px * var(--s)); --h: calc(166px * var(--s)); --d: calc(44px * var(--s)); }  /* fondotinta, blush */
.box3d.shape-tall    { --w: calc(80px * var(--s));  --h: calc(188px * var(--s)); --d: calc(40px * var(--s)); }  /* rossetto, gloss, mascara */
.box3d.shape-palette { --w: calc(178px * var(--s)); --h: calc(124px * var(--s)); --d: calc(18px * var(--s)); }  /* palette ombretti */
.box3d.shape-kit     { --w: calc(170px * var(--s)); --h: calc(136px * var(--s)); --d: calc(62px * var(--s)); }  /* kit regalo */

/* Tipografia della confezione */
.box3d .face-front { padding: 12%; }
.box3d .face-brand { font-size: calc(var(--w) * .075); letter-spacing: .18em; }
.box3d .face-ver { font-size: calc(var(--w) * .19); letter-spacing: -.02em; line-height: 1.05; margin-top: 2px; }
.box3d .face-ed { font-size: calc(var(--w) * .085); }
.box3d.shape-tall .face-ver { font-size: calc(var(--w) * .2); }
.box3d.shape-tall .face-ed { font-size: calc(var(--w) * .1); line-height: 1.2; }
.box3d.shape-tall .face-tag { font-size: calc(var(--w) * .075); white-space: normal; line-height: 1.25; }
.box3d.shape-tall .face-icon { width: 34%; }
.box3d.shape-palette .face-brand, .box3d.shape-kit .face-brand { font-size: calc(var(--w) * .055); }
.box3d.shape-palette .face-ver, .box3d.shape-kit .face-ver { font-size: calc(var(--w) * .15); }
.box3d.shape-palette .face-ed, .box3d.shape-kit .face-ed { font-size: calc(var(--w) * .065); }
.box3d.shape-palette .face-tag, .box3d.shape-kit .face-tag { font-size: calc(var(--w) * .045); margin-top: 5%; }
.box3d.shape-palette .face-icon, .box3d.shape-kit .face-icon { width: 14%; }
.box3d .face-right span, .box3d .face-left span { font-size: calc(var(--d) * .3); }
.box3d.shape-palette .face-right span, .box3d.shape-palette .face-left span { font-size: calc(var(--d) * .42); letter-spacing: 0; }

/* Linea dorata come sulle confezioni di lusso */
.box3d .face-front::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 7%; height: 1px; background: linear-gradient(90deg, transparent, #f7d774, transparent); opacity: .85; }
.box3d .face-top { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff), color-mix(in srgb, var(--c) 88%, #fff)); }

/* Campione di colore della tonalità */
.face-swatch {
    position: absolute; top: 9%; right: 9%; z-index: 1;
    width: calc(var(--w) * .2); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 65%, #000));
    box-shadow: 0 0 0 calc(var(--w) * .015) rgba(255, 255, 255, .9), 0 4px 10px rgba(0, 0, 0, .3);
}
.box3d.shape-palette .face-swatch, .box3d.shape-kit .face-swatch { width: calc(var(--w) * .12); }

/* Selettore tonalità nella pagina prodotto */
.variant { grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; text-align: left; min-width: 0; padding: 8px 14px 8px 8px; }
.variant .swatch { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 65%, #000)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.variant b { font-size: .92rem; }
.variant small { font-size: .8rem; }
.variant-label b { color: var(--text); }

/* Guida alle tonalità */
.quiz { max-width: 760px; margin: 0 auto; }
.quiz-q { display: none; }
.quiz-q.active { display: block; animation: panelIn .5s var(--ease-out); }
html:not(.js) .quiz-q { display: block; margin-bottom: 24px; }
@keyframes panelIn { from { opacity: 0; translate: 20px 0; } }
.quiz-progress { height: 6px; border-radius: 6px; background: #eef1ef; overflow: hidden; margin-bottom: 22px; }
.quiz-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), #f7d774); transition: width .45s var(--ease-out); }
.quiz-q h3 { font-size: 1.35rem; margin-bottom: 16px; }
.quiz-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quiz-opt { display: grid; justify-items: center; gap: 10px; padding: 18px 14px; border: 2px solid var(--border); border-radius: 18px; background: #fff; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; text-align: center; transition: border-color .2s, transform .2s var(--ease-spring), box-shadow .2s; }
.quiz-opt:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 12px 26px -14px rgba(240, 177, 29, .6); }
.quiz-opt small { color: var(--muted); font-weight: 400; }
.quiz-dot { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6), 0 4px 10px rgba(0, 0, 0, .12); }
.quiz-result { display: none; text-align: center; }
.quiz-result.active { display: block; animation: panelIn .5s var(--ease-out); }
.quiz-result h3 { font-size: 1.6rem; }
.shade-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 24px; }
.shade-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; border: 1px solid var(--border); background: #fff; color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none !important; transition: border-color .2s, transform .2s; }
.shade-chip:hover { border-color: var(--primary); transform: translateY(-2px); }
.shade-chip i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tip { margin: 0; }
.tip-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff8e6; font-size: 1.5rem; margin-bottom: 12px; }
.tip h3 { font-size: 1.1rem; margin-bottom: 6px; }
.tip p { color: var(--muted); margin: 0; }
@media (max-width: 720px) {
    .quiz-opts, .tips-grid { grid-template-columns: 1fr; }
    .quiz-opt { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
    .quiz-opt .quiz-dot { grid-row: span 2; }
}

/* Home: 3 categorie e pastille delle tonalità */
.cat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cat-grid-3 .cat-card { min-height: 360px; }
.family-shades { display: flex; gap: 4px; flex-shrink: 0; }
.family-shades i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 1px 3px rgba(0, 0, 0, .2); }
@media (max-width: 1000px) { .cat-grid-3 { grid-template-columns: 1fr; } .cat-grid-3 .cat-card { min-height: 260px; } }

/* Nomi lunghi (es. "Fondotinta") restano interi sulla confezione */
.box3d.shape-box .face-ver { font-size: calc(var(--w) * .155); }
.box3d .face-ver { white-space: nowrap; overflow: hidden; text-overflow: clip; }