/* Giulia Di Lorenzo: componenti. Tutto passa dai token di tokens.css. */
.gdl{font-family:var(--font-sans);color:var(--ink)}

/* ---------- Logo ---------- */
.gdl-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.gdl-logo__mark{width:44px;height:24px;border-radius:var(--radius-pill);background:var(--arancio);position:relative;flex:none}
.gdl-logo__mark::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--crema)}
.gdl-logo__name{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1}
.gdl-logo--lg .gdl-logo__mark{width:88px;height:48px}
.gdl-logo--lg .gdl-logo__mark::after{right:6px;top:6px;width:36px;height:36px}
.gdl-logo--lg .gdl-logo__name{font-size:40px}
.gdl-logo--stack{flex-direction:column;align-items:flex-start;gap:12px}
.gdl-monogram{width:56px;height:56px;border-radius:var(--radius-lg);background:var(--bosco);display:grid;place-items:center}
.gdl-monogram span{width:36px;height:20px;border-radius:var(--radius-pill);background:var(--arancio);position:relative}
.gdl-monogram span::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--crema)}

/* ---------- Button ---------- */
.gdl-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--radius-pill);border:2px solid transparent;font:700 15px/1 var(--font-sans);cursor:pointer;text-decoration:none;transition:transform .15s}
.gdl-btn:hover{transform:translateY(-1px)}
.gdl-btn:focus-visible{outline:3px solid var(--arancio);outline-offset:3px}
.gdl-btn--primary{background:var(--ink);color:var(--paper)}
.gdl-btn--accent{background:var(--arancio);color:var(--on-accent)}
.gdl-btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.gdl-btn--sm{padding:8px 14px;font-size:13px}

/* ---------- Toggle ---------- */
.gdl-toggle{display:inline-flex;align-items:center;gap:10px;font:500 14px/1.2 var(--font-sans);color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
.gdl-toggle__track{width:44px;height:24px;border-radius:var(--radius-pill);background:var(--toggle-off);position:relative;flex:none;transition:background .2s}
.gdl-toggle__track::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--photo-frame);transition:left .2s}
.gdl-toggle[aria-checked="true"] .gdl-toggle__track{background:var(--arancio)}
.gdl-toggle[aria-checked="true"] .gdl-toggle__track::after{left:23px}
.gdl-toggle:focus-visible .gdl-toggle__track{outline:3px solid var(--ink);outline-offset:2px}

/* ---------- UI card ---------- */
.gdl-card{background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink)}
.gdl-card--soft{background:var(--lilla);color:var(--on-light);box-shadow:none}
.gdl-stack{display:grid;gap:var(--space-2)}
.gdl-stack>.gdl-card:nth-child(2){margin-left:24px}
.gdl-slider{display:flex;align-items:center;gap:10px;flex:1}
.gdl-slider__bar{flex:1;height:8px;border-radius:var(--radius-pill);background:var(--toggle-off);position:relative;min-width:60px}
.gdl-slider__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--radius-pill);background:var(--arancio)}

/* ---------- Label ---------- */
.gdl-label{display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.02em;line-height:14px;padding:5px 10px;border-radius:var(--radius-pill);background:var(--ink);color:var(--paper)}
.gdl-label--yellow{background:var(--giallo);color:var(--on-light)}
.gdl-label--outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}

/* ---------- Highlight ---------- */
.gdl-mark{background:var(--arancio);color:var(--on-accent);padding:0 .14em;border-radius:8px;display:inline-block;transform:rotate(-2deg)}

/* ---------- Notification ---------- */
.gdl-notif{background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:12px 14px;display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.35;color:var(--ink);max-width:340px}
.gdl-notif__av{width:32px;height:32px;border-radius:50%;background:var(--arancio);color:var(--on-accent);display:grid;place-items:center;font:800 14px var(--font-display);flex:none}
.gdl-notif__time{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);margin-left:6px}

/* ---------- Price sticker ---------- */
.gdl-sticker{width:72px;height:72px;border-radius:50%;background:var(--giallo);color:var(--on-light);display:grid;place-items:center;text-align:center;font:700 15px/1.1 var(--font-sans);transform:rotate(12deg)}
.gdl-sticker--accent{background:var(--arancio);color:var(--on-accent)}

/* ---------- Polaroid + tape ---------- */
.gdl-polaroid{position:relative;display:inline-block;width:180px;padding:10px 10px 36px;background:var(--photo-frame);box-shadow:var(--shadow-paper);transform:rotate(4deg)}
.gdl-polaroid img,.gdl-polaroid__ph{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--giallo)}
.gdl-polaroid__cap{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:12px;color:var(--on-light)}
.gdl-tape{position:absolute;width:76px;height:22px;background:var(--tape);top:-10px;left:50%;transform:translateX(-50%) rotate(-12deg)}

/* ---------- Speech bubble ---------- */
.gdl-bubble{position:relative;background:var(--paper);color:var(--ink);border-radius:var(--radius-lg);padding:18px;font:800 24px/1.05 var(--font-display);letter-spacing:-.01em;transform:rotate(-3deg);max-width:320px}
.gdl-bubble::after{content:"";position:absolute;left:30px;bottom:-16px;width:28px;height:28px;background:var(--paper);clip-path:polygon(0 0,100% 0,10% 100%)}

/* ---------- Acronym post (glossario) ---------- */
.gdl-acronym{position:relative;overflow:hidden;aspect-ratio:1/1;width:100%;max-width:360px;border-radius:var(--radius-lg);background:var(--bosco);color:var(--crema)}
.gdl-acronym__big{position:absolute;left:16px;top:14px;font:900 140px/.8 var(--font-acronym);letter-spacing:-.02em;color:var(--arancio)}
.gdl-acronym__body{position:absolute;inset:auto 20px 20px 20px;display:grid;gap:10px;justify-items:start}
.gdl-acronym__body p{margin:0;font:500 17px/1.3 var(--font-sans);max-width:22ch}
.gdl-acronym--lilla{background:var(--lilla);color:var(--on-light)}
.gdl-acronym--lilla .gdl-acronym__big{color:var(--photo-frame)}

/* ---------- Product cover ---------- */
.gdl-cover{position:relative;overflow:hidden;aspect-ratio:4/5;width:100%;max-width:300px;border-radius:var(--radius-lg);background:var(--arancio);color:var(--on-accent)}
.gdl-cover__num{position:absolute;right:-6px;top:-12px;font:900 170px/.8 var(--font-acronym);color:rgba(251,241,230,.35)}
.gdl-cover__in{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.gdl-cover__title{margin:0;font:800 30px/.95 var(--font-display);letter-spacing:-.02em}
.gdl-cover__rows{display:grid;gap:6px}
.gdl-cover__rows .gdl-card{padding:8px 12px;font-size:13px;background:var(--photo-frame);color:var(--on-light);box-shadow:none}
.gdl-cover .gdl-sticker{position:absolute;right:16px;bottom:128px}

@media (prefers-reduced-motion:reduce){.gdl-btn,.gdl-toggle__track,.gdl-toggle__track::after{transition:none}}