/* ─── GENERALI ────────────────────────────────────────────── */
:root {
    --primary:    #0f0f1a;
    --primary-2:  #1a1f2e;
    --accent:     #c08b8b;
    --blue:       #3498db;
    --light-bg:   #f4f6f9;
    --nav-height: 66px;
}

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background-color: var(--light-bg);
    color: #1a1a2e;
}

/* ═══════════════════════════════════════════════════════════
   HEADER — Stile Subito.it
   ═══════════════════════════════════════════════════════════ */

/* ─── TOPBAR ──────────────────────────────────────────────── */
/* ─── Marquee announcement bar ─── */
.sbt-marquee {
    background: #1a1a2e;
    color: #fff;
    overflow: hidden;
    position: relative;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.sbt-marquee::before,
.sbt-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.sbt-marquee::before { left: 0; background: linear-gradient(90deg, #1a1a2e, transparent); }
.sbt-marquee::after  { right: 0; background: linear-gradient(-90deg, #1a1a2e, transparent); }
.sbt-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
    animation: sbtMarquee 38s linear infinite;
    will-change: transform;
}
.sbt-marquee:hover .sbt-marquee-track { animation-play-state: paused; }
.sbt-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .3px;
    color: #fff;
}
.sbt-marquee-emoji { font-size: 1rem; line-height: 1; }
.sbt-marquee-dot {
    color: #c08b8b;
    font-size: .55rem;
    opacity: .8;
}
@keyframes sbtMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (max-width: 576px) {
    .sbt-marquee { padding: 7px 0; }
    .sbt-marquee-item { font-size: .74rem; }
    .sbt-marquee-track { animation-duration: 28s; }
}

.sbt-topbar { background:#fff; border-bottom:1px solid #e8eaed; padding:8px 0; }
.sbt-topbar-inner { display:flex; justify-content:flex-end; }
.sbt-topbar-links { display:flex; align-items:center; flex-wrap:wrap; }
.sbt-topbar-links a { color:#555; text-decoration:none; font-size:.78rem; font-weight:500; padding:2px 10px; transition:color .15s; }
.sbt-topbar-links a:hover { color:#c08b8b; }
.sbt-pipe { color:#d0d0d0; font-size:.75rem; }

/* ─── MAIN HEADER ─────────────────────────────────────────── */
.sbt-header { background:#fff; border-bottom:1px solid #e8eaed; padding:14px 0; position:sticky; top:0; z-index:1030; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.sbt-header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sbt-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.sbt-logo-icon { width:40px; height:40px; background:linear-gradient(135deg,#c08b8b,#8b4a62); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem; }
.sbt-logo span { font-size:1.5rem; font-weight:800; color:#1a1a2e; letter-spacing:-.5px; }
.sbt-header-actions { display:flex; align-items:center; gap:8px; }
.sbt-btn-ghost { background:none; border:none; color:#333; font-size:.9rem; font-weight:600; padding:9px 16px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .15s; white-space:nowrap; text-decoration:none; }
.sbt-btn-ghost:hover { background:#f4f6f9; color:#1a1a2e; }
.sbt-btn-outline { background:none; border:2px solid #1a1a2e; color:#1a1a2e; font-size:.9rem; font-weight:700; padding:8px 18px; border-radius:8px; cursor:pointer; transition:background .15s,color .15s; white-space:nowrap; }
.sbt-btn-outline:hover { background:#1a1a2e; color:#fff; }
.sbt-btn-cart { position:relative; display:flex; align-items:center; gap:7px; background:#c08b8b; color:#fff; font-size:.9rem; font-weight:700; padding:9px 18px; border-radius:8px; text-decoration:none; transition:background .15s,transform .15s; white-space:nowrap; border:none; cursor:pointer; }
.sbt-btn-cart:hover { background:#8b4a62; color:#fff; transform:translateY(-1px); }
.sbt-cart-badge { background:#fff; color:#c08b8b; font-size:.65rem; font-weight:800; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.sbt-avatar { width:32px; height:32px; background:linear-gradient(135deg,#c08b8b,#8b4a62); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.sbt-avatar-lg { width:44px; height:44px; background:linear-gradient(135deg,#c08b8b,#8b4a62); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; flex-shrink:0; }
.sbt-user-dropdown { min-width:260px; border:1px solid #e8eaed; border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.12); padding:8px; margin-top:8px !important; }
.sbt-dropdown-user { display:flex; align-items:center; gap:12px; padding:8px 12px 14px; }
.sbt-user-dropdown .dropdown-item { border-radius:8px; padding:9px 12px; font-size:.88rem; color:#333; transition:background .15s; }
.sbt-user-dropdown .dropdown-item:hover { background:#f4f6f9; }
.sbt-user-dropdown .dropdown-item.text-danger:hover { background:#fff5f5; }
.sbt-admin-link { font-weight:600 !important; color:#fff !important; background:linear-gradient(135deg,#c98a9a,#9a6b78) !important; }
.sbt-admin-link:hover { background:linear-gradient(135deg,#bd7d8e,#86596a) !important; color:#fff !important; }
.sbt-admin-link i { color:#fff !important; }

/* ─── SEARCH SECTION ──────────────────────────────────────── */
.sbt-search-section { background:#fff; border-bottom:2px solid #e8eaed; padding:18px 0; }
.sbt-search-bar { display:flex; align-items:stretch; background:#fff; border:2px solid #d0d4db; border-radius:14px; transition:border-color .2s,box-shadow .2s; position:relative; }
.sbt-search-bar .sbt-search-btn { border-radius: 0 11px 11px 0; }
.sbt-search-bar .sbt-search-field:first-child { border-radius: 12px 0 0 12px; }
.sbt-search-bar:focus-within { border-color:#c08b8b; box-shadow:0 0 0 4px rgba(192,139,139,.1); }
.sbt-search-field { display:flex; flex-direction:column; justify-content:center; padding:10px 18px; flex:1; min-width:0; position:relative; }
.sbt-search-main { flex:2; } .sbt-search-cat { flex:1.5; } .sbt-search-sort { flex:1.2; }
.sbt-search-label { font-size:.7rem; font-weight:700; color:#333; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; display:block; }
.sbt-search-input-wrap { position:relative; display:flex; align-items:center; }
.sbt-search-ico { position:absolute; left:0; color:#aaa; font-size:.9rem; pointer-events:none; }
.sbt-search-input { border:none; outline:none; font-size:.92rem; color:#1a1a2e; background:transparent; padding:2px 0 2px 22px; width:100%; }
.sbt-search-input::placeholder { color:#bbb; }
.sbt-search-select { display: none; } /* sostituito da .cdd */

/* ─── CUSTOM DROPDOWN ────────────────────────────────────── */
.cdd { position: relative; width: 100%; }
.cdd-trigger {
    width: 100%;
    background: transparent;
    border: none;
    padding: 4px 6px 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #1a1a2e;
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    transition: color .15s;
}
.cdd-trigger > i:first-child { color: #aaa; font-size: .92rem; }
.cdd-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdd-caret {
    color: #aaa;
    font-size: .75rem;
    transition: transform .25s;
    flex-shrink: 0;
}
.cdd.open .cdd-caret { transform: rotate(180deg); color: #c08b8b; }
.cdd-trigger:hover { color: #c08b8b; }
.cdd-trigger:hover > i:first-child { color: #c08b8b; }

.cdd-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: -10px;
    right: -10px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.16);
    padding: 6px;
    min-width: 240px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-8px) scale(.96);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    border: 1px solid #f0f0f0;
    max-height: 320px;
    overflow-y: auto;
}
.cdd-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 26px;
    width: 14px; height: 14px;
    background: white;
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    transform: rotate(45deg);
}
.cdd.open .cdd-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cdd-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: .88rem;
    color: #333;
    transition: background .15s, color .15s;
    user-select: none;
}
.cdd-option > i:first-child { color: #aaa; font-size: .9rem; }
.cdd-option:hover {
    background: #fdf5f3;
    color: #c08b8b;
}
.cdd-option:hover > i:first-child { color: #c08b8b; }
.cdd-option.selected {
    background: #fdf5f3;
    color: #c08b8b;
    font-weight: 600;
}
.cdd-option.selected > i:first-child { color: #c08b8b; }
.cdd-check {
    margin-left: auto;
    color: #c08b8b;
    font-size: 1rem;
}
.cdd-menu::-webkit-scrollbar { width: 6px; }
.cdd-menu::-webkit-scrollbar-thumb { background: #e0e3e8; border-radius: 3px; }
.sbt-search-divider { width:1px; background:#e0e3e8; margin:10px 0; flex-shrink:0; }
.sbt-search-btn { background:#c08b8b; border:none; color:#fff; width:60px; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; border-radius:0 11px 11px 0; }
.sbt-search-btn:hover { background:#8b4a62; }

/* ─── OFFCANVAS & FLASH ───────────────────────────────────── */
.offcanvas-nav-link {
    display:flex; align-items:center; gap:12px;
    padding:12px 10px; color:#3a2f3a; text-decoration:none;
    border-bottom:1px solid #f5ecec;
    font-size:.94rem; font-weight:500;
    transition:color .2s, background .2s, padding-left .2s;
    width:100%; background:none;
    border-left:none; border-right:none; border-top:none;
    cursor:pointer; border-radius: 8px;
}
.offcanvas-nav-link i {
    color: #c08b8b; /* rose poudré */
    font-size: 1.05rem;
    width: 22px;
    transition: transform .25s;
}
.offcanvas-nav-link:hover {
    color:#a85a72; /* mauve scuro */
    background: linear-gradient(90deg, #fdf5f3 0%, transparent 100%);
    padding-left: 14px;
}
.offcanvas-nav-link:hover i {
    transform: scale(1.15);
    color: #a85a72;
}

/* Sezioni del drawer */
.oc-nav hr {
    margin: 14px 4px;
    border: 0;
    border-top: 1px dashed #ead9d9;
    opacity: .8;
}
.oc-section-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #b08a8a;
    padding: 4px 10px 8px;
    margin-top: 4px;
}

/* Social footer drawer */
.oc-social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 6px;
    padding: 18px 0 4px;
    border-top: 1px solid #f5ecec;
}
.oc-social a {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #fdf5f3 0%, #f5e6e0 100%);
    color: #a85a72;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform .25s, background .25s, color .25s;
    border: 1px solid #f0dada;
}
.oc-social a:hover {
    background: linear-gradient(135deg, #c08b8b 0%, #a85a72 100%);
    color: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 8px 16px rgba(168,90,114,.25);
}
.flash-message { position:fixed; top:88px; right:20px; left:auto; z-index:9998; padding:14px 16px; border-radius:12px; font-size:.9rem; font-weight:500; line-height:1.45; display:flex; align-items:flex-start; gap:10px; box-shadow:0 12px 32px rgba(0,0,0,.18); animation:slideInRight .3s ease; max-width:400px; }
.flash-message > i { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
@media (max-width: 576px) {
    .flash-message { top: 70px; right: 12px; left: 12px; max-width: none; font-size: .82rem; padding: 10px 14px; }
}
.flash-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.flash-danger  { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.flash-close   { background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer; margin-left:auto; padding:0 2px; opacity:.55; flex-shrink:0; align-self:flex-start; }
.flash-close:hover { opacity:1; }
@keyframes slideInRight { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
.navbar-brand { font-size:1.4rem; letter-spacing:.5px; }

/* ─── MODAL AUTH — Custom (no Bootstrap dep) ──────────────── */
.auth-overlay {
    position: fixed; inset: 0;
    z-index: 100000;
    background: rgba(15,15,26,.6);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .25s ease;
}
.auth-overlay.open {
    display: flex;
    opacity: 1;
}
.auth-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.18);
    border: none; border-radius: 50%;
    color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.auth-modal-close:hover { background: rgba(255,255,255,.3); transform: rotate(90deg); }

.auth-modal {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 28px 64px rgba(0,0,0,.22);
    background: white;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    overflow-y: auto;
    animation: authModalIn .35s cubic-bezier(.4,0,.2,1);
}
@keyframes authModalIn {
    from { opacity: 0; transform: scale(.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Header colorato con logo */
.auth-modal-header {
    background: linear-gradient(135deg, #c08b8b, #8b4a62);
    padding: 32px 28px 28px;
    text-align: center;
    position: relative;
}
.auth-modal-logo {
    width: 52px; height: 52px;
    background: rgba(255,255,255,.18);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    font-size: 1.6rem;
    color: white;
}
.auth-modal-title {
    color: white;
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 4px;
    letter-spacing: -.3px;
}
.auth-modal-subtitle { color: rgba(255,255,255,.75); font-size: .82rem; margin: 0; }

/* Tab switcher */
.auth-tabs {
    display: flex;
    background: #f8f8f8;
    border-bottom: 1px solid #ececec;
}
.auth-tab {
    flex: 1; padding: 14px;
    border: none; background: transparent;
    font-size: .88rem; font-weight: 600; color: #999;
    cursor: pointer; border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.auth-tab:hover { color: #555; }
.auth-tab.active { color: #c08b8b; border-bottom-color: #c08b8b; background: #fff; }

.auth-modal-body { padding: 24px 28px 28px; }
.auth-section-title { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin-bottom: 18px; }
.auth-label { font-size: .8rem; font-weight: 600; color: #555; margin-bottom: 5px; display: block; }

.auth-input-wrap {
    position: relative;
    display: flex; align-items: center;
}
.auth-input-wrap > i:first-child {
    position: absolute; left: 13px;
    color: #ccc; font-size: .9rem; pointer-events: none;
    transition: color .2s;
}
.auth-input-wrap:focus-within > i:first-child { color: #c08b8b; }

.auth-input {
    width: 100%;
    padding: 12px 40px 12px 38px;
    border: 1.5px solid #e0e3e8;
    border-radius: 10px;
    font-size: .9rem;
    background: #fafbfc;
    color: #1a1a2e;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-input:focus {
    border-color: #c08b8b;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(192,139,139,.1);
}
.auth-input::placeholder { color: #c0c4cc; }

.auth-toggle-pass {
    position: absolute; right: 12px;
    background: none; border: none;
    color: #ccc; cursor: pointer; padding: 0;
    font-size: .9rem; transition: color .2s;
}
.auth-toggle-pass:hover { color: #c08b8b; }

/* Submit button */
.auth-submit-btn {
    width: 100%; padding: 13px;
    background: #c08b8b;
    color: white; border: none; border-radius: 10px;
    font-size: .95rem; font-weight: 700; cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 14px rgba(192,139,139,.35);
}
.auth-submit-btn:hover   { background: #8b4a62; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,139,139,.45); }
.auth-submit-btn:disabled { background: #e0a09a; transform: none; box-shadow: none; cursor: not-allowed; }

/* Divider */
.auth-divider {
    text-align: center; margin: 20px 0 16px;
    position: relative; color: #ccc; font-size: .78rem;
}
.auth-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: #ececec;
}
.auth-divider span { background: #fff; padding: 0 12px; position: relative; }

/* Links */
.auth-link-small { color: #c08b8b; font-size: .8rem; text-decoration: none; font-weight: 500; }
.auth-link-small:hover { text-decoration: underline; }
.auth-link-btn {
    background: none; border: none; padding: 0;
    color: #c08b8b; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.auth-link-btn:hover { text-decoration: underline; }

/* Password strength */
#pass-strength { margin-top: 6px; }

/* ─── SEARCH AUTOCOMPLETE ─────────────────────────────────── */
.search-ac-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: -18px;
    right: -18px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,.16);
    border: 1px solid #f0f0f0;
    z-index: 9999;
    overflow: hidden;
    max-height: 480px;
    overflow-y: auto;
}
.sac-intento {
    padding: 8px 16px;
    font-size: .75rem;
    font-weight: 700;
    color: #c08b8b;
    background: #fff8f7;
    border-bottom: 1px solid #fce;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.sac-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #1a1a2e;
    transition: background .15s;
    border-bottom: 1px solid #f8f8f8;
}
.sac-item:hover { background: #fafafa; }
.sac-img {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
}
.sac-info { flex: 1; min-width: 0; }
.sac-nome { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sac-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.sac-stelle { color: #f39c12; font-size: .72rem; letter-spacing: 1px; }
.sac-prezzo { font-size: .82rem; font-weight: 700; color: #c08b8b; }
.sac-arrow { color: #ccc; font-size: .85rem; flex-shrink: 0; }
.sac-item:hover .sac-arrow { color: #c08b8b; }
.sac-suggest { font-size: .88rem; font-weight: 500; color: #555; }
.sac-sep {
    padding: 8px 16px 4px;
    font-size: .72rem; font-weight: 700;
    color: #999; text-transform: uppercase; letter-spacing: .5px;
    border-top: 1px solid #f0f0f0;
}
.sac-footer {
    display: block;
    padding: 12px 16px;
    font-size: .82rem;
    color: #c08b8b;
    text-decoration: none;
    background: #fff8f7;
    border-top: 1px solid #fce;
    transition: background .15s;
}
.sac-footer:hover { background: #fef0ee; color: #8b4a62; }

/* ─── HERO ────────────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, var(--primary) 0%, #34495e 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
}

/* ─── HERO SECTION ────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, #0f0f1a 0%, #1e1e2e 60%, #2c1a1a 100%);
    border-radius: 20px;
    padding: 60px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
}
.hero-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(192,139,139,.15) 0%, transparent 60%);
    pointer-events: none;
}
.hero-content { flex: 1; max-width: 540px; position: relative; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(192,139,139,.2); color: #e8c5c5;
    border: 1px solid rgba(192,139,139,.3);
    border-radius: 20px; padding: 5px 14px;
    font-size: .78rem; font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: .3px;
}
.hero-title {
    font-size: 2.6rem; font-weight: 900;
    color: #fff; line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -.5px;
}
.hero-accent { color: #c08b8b; }
.hero-sub { color: rgba(255,255,255,.6); font-size: .95rem; line-height: 1.6; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-btn-primary {
    background: #c08b8b; color: white;
    padding: 13px 24px; border-radius: 10px;
    text-decoration: none; font-weight: 700; font-size: .95rem;
    display: flex; align-items: center; gap: 8px;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 16px rgba(192,139,139,.4);
}
.hero-btn-primary:hover { background: #8b4a62; color: white; transform: translateY(-2px); }
.hero-btn-ghost {
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
    padding: 13px 20px; border-radius: 10px;
    text-decoration: none; font-weight: 600; font-size: .9rem;
    display: flex; align-items: center; gap: 8px;
    transition: background .2s; border: 1px solid rgba(255,255,255,.15);
}
.hero-btn-ghost:hover { background: rgba(255,255,255,.18); color: white; }
.hero-stats { display: flex; align-items: center; gap: 20px; }
.hero-stat { text-align: center; }
.hero-stat strong { display: block; color: #fff; font-size: 1.3rem; font-weight: 800; }
.hero-stat span { color: rgba(255,255,255,.5); font-size: .75rem; }
.hero-stat-sep { width: 1px; height: 30px; background: rgba(255,255,255,.15); }

/* Hero visual */
.hero-visual { display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.hero-product-stack { position: relative; width: 280px; height: 300px; }
.hero-product-card {
    position: absolute;
    width: 150px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
    transition: transform .3s;
}
.hero-product-card:nth-child(1) { top: 0; left: 0; transform: rotate(-8deg); z-index: 3; }
.hero-product-card:nth-child(2) { top: 30px; left: 65px; z-index: 4; transform: rotate(2deg); }
.hero-product-card:nth-child(3) { top: 10px; right: 0; transform: rotate(10deg); z-index: 2; }
.hero-product-card:hover { transform: rotate(0deg) scale(1.05) !important; z-index: 10 !important; }
.hero-product-card img { width: 150px; height: 120px; object-fit: cover; }
.hero-product-label { padding: 8px 10px; }
.hero-product-label span { font-size: .72rem; color: #555; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-product-label strong { font-size: .82rem; color: #c08b8b; }

/* ─── TRUST BAR ───────────────────────────────────────────── */
.trust-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    margin-bottom: 24px;
}
.trust-item {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border-right: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
    transition: background .3s ease;
    cursor: default;
}
.trust-item:last-child { border-right: none; }
.trust-item:hover { background: linear-gradient(135deg, #fdf5f3 0%, #fff 100%); }

/* Cerchio gradient soft dietro icona */
.trust-item > i {
    position: relative;
    font-size: 1.5rem;
    color: #c08b8b;
    flex-shrink: 0;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fdf5f3 0%, #fae0dc 100%);
    border-radius: 14px;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    box-shadow: inset 0 0 0 1px rgba(192,139,139,.08);
}
.trust-item:hover > i {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 8px 18px rgba(192,139,139,.22), inset 0 0 0 1px rgba(192,139,139,.18);
}

.trust-item strong { display: block; font-size: .88rem; font-weight: 700; color: #1a1a2e; transition: color .2s; }
.trust-item:hover strong { color: #c08b8b; }
.trust-item span   { font-size: .76rem; color: #888; }

/* Shine sweep on hover */
.trust-item::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(192,139,139,.06), transparent);
    transform: skewX(-22deg);
    transition: left .6s ease;
    pointer-events: none;
}
.trust-item:hover::before { left: 130%; }

/* ─── Animazioni continue per ogni icona ─── */
/* 1° icona — Camion: avanti/indietro come in viaggio */
.trust-item:nth-child(1) > i {
    animation: tbTruck 3.6s ease-in-out infinite;
}
@keyframes tbTruck {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    50%      { transform: translateX(4px); }
    75%      { transform: translateX(-2px); }
}

/* 2° icona — Scudo: pulse di sicurezza */
.trust-item:nth-child(2) > i {
    animation: tbShield 2.4s ease-in-out infinite;
}
@keyframes tbShield {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(192,139,139,.08), 0 0 0 0 rgba(192,139,139,.25); }
    50%      { box-shadow: inset 0 0 0 1px rgba(192,139,139,.18), 0 0 0 8px rgba(192,139,139,0); }
}

/* 3° icona — Reso: rotazione lenta continua */
.trust-item:nth-child(3) > i::before {
    display: inline-block;
    animation: tbRotate 6s linear infinite;
    transform-origin: center;
}
@keyframes tbRotate {
    from { transform: rotate(0); }
    to   { transform: rotate(-360deg); }
}

/* 4° icona — Cuffia: oscillazione "ascolto" */
.trust-item:nth-child(4) > i {
    animation: tbHeadset 2.8s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes tbHeadset {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-8deg); }
    40%      { transform: rotate(6deg); }
    60%      { transform: rotate(-4deg); }
    80%      { transform: rotate(2deg); }
}

/* Pausa animazioni quando l'utente preferisce ridurre il movimento */
@media (prefers-reduced-motion: reduce) {
    .trust-item > i, .trust-item:nth-child(3) > i::before { animation: none !important; }
}

/* ─── SMART FILTERS ───────────────────────────────────────── */
.smart-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-pill {
    padding: 8px 18px; border: none;
    background: white; color: #555;
    border-radius: 20px; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: all .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border: 1.5px solid transparent;
}
.sf-pill:hover { border-color: #c08b8b; color: #c08b8b; }
.sf-pill.active { background: #c08b8b; color: white; border-color: #c08b8b; box-shadow: 0 4px 12px rgba(192,139,139,.3); }

/* ─── SECTION HEADER ──────────────────────────────────────── */
.section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}
.section-title-new {
    font-size: 1.5rem; font-weight: 800; color: #1a1a2e;
    margin: 0; letter-spacing: -.3px;
}
.section-link {
    color: #c08b8b; text-decoration: none; font-size: .88rem;
    font-weight: 600; display: flex; align-items: center; gap: 4px;
    transition: gap .2s;
}
.section-link:hover { gap: 8px; color: #8b4a62; }

/* ─── INSTAGRAM GRID ──────────────────────────────────────── */
.insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 992px) { .insta-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px) { .insta-grid { grid-template-columns: repeat(2,1fr); gap: 12px; } }
@media (max-width: 400px) { .insta-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } }
/* Se la griglia ha 1 solo prodotto → larghezza piena centrata */
.insta-grid:has(> .insta-card:only-child) {
    grid-template-columns: 1fr;
}
.insta-grid:has(> .insta-card:only-child) > .insta-card {
    max-width: 360px;
    margin: 0 auto;
}

.insta-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: transform .25s, box-shadow .25s;
    border: 1px solid #f0f0f0;
}
.insta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* Immagine card */
.insta-img-wrap {
    position: relative; overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f8f8f8;
}
.insta-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.insta-card:hover .insta-img { transform: scale(1.06); }

/* Badge */
.insta-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 3px 10px; border-radius: 20px;
    font-size: .72rem; font-weight: 800;
    letter-spacing: .3px;
}
.insta-badge-sale { background: #c08b8b; color: white; }
.insta-badge-top  { background: #f39c12; color: white; }

/* Scarcity */
.insta-scarcity {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(0deg, rgba(192,139,139,.9), transparent);
    color: white; font-size: .72rem; font-weight: 700;
    padding: 16px 10px 8px;
    text-align: center;
}

/* Overlay azioni */
.insta-overlay {
    position: absolute; top: 10px; right: 10px;
    display: flex; flex-direction: column; gap: 6px;
    opacity: 0; transform: translateX(10px);
    transition: opacity .25s, transform .25s;
}
.insta-card:hover .insta-overlay { opacity: 1; transform: translateX(0); }
.insta-action-btn {
    width: 36px; height: 36px;
    background: white; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15);
    color: #333; font-size: .9rem; text-decoration: none;
    transition: background .2s, color .2s, transform .2s;
}
.insta-action-btn:hover { background: #c08b8b; color: white; transform: scale(1.1); }

/* Info card */
.insta-info { padding: 14px; }
.insta-nome {
    display: block; font-size: .88rem; font-weight: 700; color: #1a1a2e;
    text-decoration: none; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.insta-nome:hover { color: #c08b8b; }
.insta-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.insta-stelle { color: #f39c12; font-size: .75rem; letter-spacing: 1px; }
.insta-rec    { color: #aaa; font-size: .72rem; }
.insta-prezzo-row { display: flex; align-items: center; justify-content: space-between; }
.insta-prezzo     { font-size: 1.05rem; font-weight: 800; color: #c08b8b; }
.insta-prezzo-old { font-size: .78rem; color: #bbb; text-decoration: line-through; margin-left: 6px; }
.insta-cart-btn {
    width: 34px; height: 34px;
    background: #c08b8b; color: white; border: none; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .9rem;
    transition: background .2s, transform .15s;
    flex-shrink: 0;
}
.insta-cart-btn:hover { background: #8b4a62; transform: scale(1.08); }

/* ─── PROMO BANNER ────────────────────────────────────────── */
.promo-banner {
    background: linear-gradient(135deg, #1a1a2e, #2c1a1a);
    border-radius: 20px;
    padding: 36px 40px;
    display: flex; align-items: center; justify-content: space-between;
    overflow: hidden; position: relative;
}
.promo-banner::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 80%, rgba(192,139,139,.2), transparent 60%);
    pointer-events: none;
}
.promo-left { position: relative; }
.promo-tag {
    display: inline-block;
    background: rgba(192,139,139,.25); color: #e8c5c5;
    border-radius: 20px; padding: 4px 12px;
    font-size: .75rem; font-weight: 700; margin-bottom: 10px;
}
.promo-banner h3 { color: white; font-size: 1.5rem; font-weight: 800; margin-bottom: 16px; line-height: 1.3; }
.promo-banner strong { color: #e8c5c5; }
.promo-btn {
    display: inline-flex; align-items: center;
    background: #c08b8b; color: white;
    padding: 10px 20px; border-radius: 8px;
    text-decoration: none; font-weight: 700; font-size: .88rem;
    transition: background .2s;
}
.promo-btn:hover { background: #8b4a62; color: white; }
.promo-right { color: rgba(255,255,255,.08); position: relative; }

@media (max-width: 576px) {
    .trust-bar { grid-template-columns: repeat(2,1fr); }
    .hero-title { font-size: 1.8rem; }
    .hero-section { padding: 36px 24px; }
}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT 2-STEP
   ═══════════════════════════════════════════════════════════ */
.ck-progress {
    display: flex; align-items: center;
    background: white; border-radius: 14px;
    padding: 18px 24px; margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.ck-step { display: flex; align-items: center; gap: 10px; opacity: .5; transition: opacity .3s; }
.ck-step.active, .ck-step.done { opacity: 1; }
.ck-step-num {
    width: 32px; height: 32px;
    background: #f4f6f9; color: #aaa;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .9rem;
    transition: background .3s, color .3s;
}
.ck-step.active .ck-step-num { background: #c08b8b; color: white; }
.ck-step.done .ck-step-num { background: #27ae60; color: white; }
.ck-step-label { font-size: .85rem; font-weight: 600; color: #555; }
.ck-step-line { flex: 1; height: 2px; background: #f0f0f0; margin: 0 12px; }

.ck-card {
    background: white; border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    overflow: hidden;
}
.ck-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid #f0f0f0;
}
.ck-card-header i { font-size: 1.25rem; color: #c08b8b; }
.ck-card-header h5 { margin: 0; font-size: 1rem; font-weight: 800; }
.ck-card-body { padding: 22px; }

.ck-login-link {
    margin-left: auto;
    background: none; border: none;
    color: #555; font-size: .82rem;
    text-decoration: none; cursor: pointer;
}
.ck-login-link strong { color: #c08b8b; }
.ck-login-link:hover strong { text-decoration: underline; }

.ck-label { font-size: .78rem; font-weight: 700; color: #555; margin-bottom: 5px; display: block; }
.ck-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e0e3e8;
    border-radius: 10px;
    font-size: .9rem;
    background: #fafbfc;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.ck-input:focus {
    border-color: #c08b8b;
    background: white;
    box-shadow: 0 0 0 4px rgba(192,139,139,.08);
}
.ck-input-error { border-color: #c08b8b !important; background: #fdf5f3 !important; }

.ck-delivery-est {
    display: flex; align-items: center; gap: 12px;
    background: #f0f9ff;
    border: 1px solid #cfe7fd;
    border-radius: 10px;
    padding: 12px 16px;
    color: #0c4a6e;
}
.ck-delivery-est i { font-size: 1.4rem; color: #0284c7; flex-shrink: 0; }
.ck-delivery-est strong { font-size: .85rem; }
.ck-delivery-est span { display: block; font-size: .82rem; opacity: .85; text-transform: capitalize; }

/* Pulsanti checkout */
.ck-btn-next {
    background: #c08b8b; color: white;
    border: none; border-radius: 12px;
    padding: 13px 28px;
    font-size: .95rem; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 14px rgba(192,139,139,.35);
}
.ck-btn-next:hover { background: #8b4a62; transform: translateY(-1px); }

.ck-btn-back {
    background: white; color: #555;
    border: 1.5px solid #e0e3e8; border-radius: 12px;
    padding: 12px 22px;
    font-size: .9rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .2s, color .2s;
}
.ck-btn-back:hover { background: #f4f6f9; color: #1a1a2e; }

.ck-btn-pay {
    background: #1a1a2e; color: white;
    border: none; border-radius: 12px;
    padding: 14px 32px;
    font-size: 1rem; font-weight: 800;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background .2s, transform .15s;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.ck-btn-pay:hover { background: #0f0f1a; transform: translateY(-1px); }
.ck-btn-pay:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Payment cards */
.ck-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 576px) { .ck-payment-grid { grid-template-columns: 1fr; } }

.ck-payment-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    background: white;
    border: 2px solid #e0e3e8;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .15s;
    position: relative;
}
.ck-payment-card input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.ck-payment-card:hover { border-color: #c0c4cc; background: #fafbfc; }
.ck-payment-card.selected {
    border-color: #c08b8b;
    background: #fff8f7;
    box-shadow: 0 0 0 4px rgba(192,139,139,.08);
}
.ck-pay-content { display: flex; align-items: center; gap: 12px; }
.ck-pay-content i { font-size: 1.8rem; }
.ck-pay-content strong { display: block; font-size: .92rem; color: #1a1a2e; }
.ck-pay-content small { color: #888; font-size: .75rem; }
.ck-pay-check {
    color: #c08b8b; font-size: 1.4rem;
    opacity: 0;
    transition: opacity .15s;
}
.ck-payment-card.selected .ck-pay-check { opacity: 1; }

.ck-pay-detail {
    margin-top: 16px;
    padding: 14px 18px;
    background: #f0f9ff;
    border: 1px solid #cfe7fd;
    border-radius: 10px;
    font-size: .85rem; color: #0c4a6e;
}
.ck-pay-detail h6 { font-weight: 700; margin-bottom: 8px; color: #0c4a6e; }
.ck-iban-box code {
    background: white; padding: 2px 8px;
    border-radius: 4px; font-family: 'Courier New', monospace;
    font-weight: 700; color: #0284c7; font-size: .92rem;
}

/* Riepilogo sticky */
.ck-summary {
    position: sticky; top: 90px;
    background: white; border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    padding: 22px;
}
.ck-summary-title { font-size: 1rem; font-weight: 800; margin-bottom: 16px; color: #1a1a2e; }

.ck-items { display: flex; flex-direction: column; gap: 12px; max-height: 240px; overflow-y: auto; margin-bottom: 14px; padding-right: 4px; }
.ck-items::-webkit-scrollbar { width: 4px; }
.ck-items::-webkit-scrollbar-thumb { background: #e0e3e8; border-radius: 2px; }

.ck-item { display: flex; align-items: center; gap: 10px; }
.ck-item img {
    width: 54px; height: 54px;
    object-fit: cover; border-radius: 8px;
    background: #f8f8f8; border: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.ck-item-info { flex: 1; min-width: 0; }
.ck-item-name {
    font-size: .85rem; font-weight: 600; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-item-meta { font-size: .72rem; color: #888; }
.ck-item-variante { font-size: .74rem; color: #c08b8b; font-weight: 600; margin: 1px 0; }
.ck-item-price { font-size: .9rem; font-weight: 700; color: #1a1a2e; }

.ck-coupon { margin: 16px 0; }
.ck-coupon .ck-input { flex: 1; }

.ck-totals { display: flex; flex-direction: column; gap: 6px; }
.ck-total-row {
    display: flex; justify-content: space-between;
    font-size: .9rem; color: #555;
}
.ck-grand-total {
    font-size: 1.2rem; font-weight: 800; color: #1a1a2e;
    padding-top: 10px; margin-top: 4px;
    border-top: 1px solid #f0f0f0;
}

.ck-trust { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px dashed #e0e3e8; margin-top: 16px; }
.ck-trust-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .78rem;
}
.ck-trust-item i { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.ck-trust-item strong { display: block; color: #1a1a2e; font-size: .82rem; }
.ck-trust-item small { color: #888; }

.ck-help {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: #555;
}
.ck-help i { color: #25D366; font-size: 1.1rem; }
.ck-help a { color: #c08b8b; font-weight: 600; text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   SCHEDA PRODOTTO
   ═══════════════════════════════════════════════════════════ */
.product-gallery { position: relative; }
.gallery-main {
    background: #f8f8f8;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    position: relative;
    border: 1px solid #f0f0f0;
    user-select: none;
}

/* Track + slides */
.gallery-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .35s cubic-bezier(.25,.8,.25,1);
    will-change: transform;
}
.gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}
.gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.gallery-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    -webkit-user-drag: none;
    background: #f8f8f8;
    display: block;
}

@media (max-width: 768px) {
    /* Galleria perfettamente centrata e larghezza piena */
    .product-gallery {
        max-width: 100%;
        margin: 0 auto;
    }
    .gallery-main {
        aspect-ratio: 1/1;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 14px;
    }
    /* Nasconde counter "1/4" su mobile (i dots bastano) */
    .gallery-counter { display: none !important; }
    /* Thumbs: start-aligned per permettere lo scroll a sinistra,
       ma con margin auto centrale quando entrano tutte. */
    .gallery-thumbs {
        justify-content: flex-start;
        padding: 8px 6px;
    }
    /* Quando le miniature ci stanno tutte (no scroll necessario), le centriamo
       senza rompere lo scroll: si usa margin auto sulle estremità. */
    .gallery-thumbs > .gallery-thumb:first-child { margin-left: auto; }
    .gallery-thumbs > .gallery-thumb:last-child  { margin-right: auto; }
}

/* ─── PRODUCT SHARE INLINE (sotto trust strip) ───────────── */
.product-share-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 4px 4px;
    margin-top: 8px;
}
.product-share-inline .ps-label {
    font-size: .7rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    flex-shrink: 0;
}
.product-share-inline .ps-divider {
    flex: 1;
    height: 1px;
    background: #ececec;
}
.product-share-inline .ps-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f4f6f9;
    color: #666;
    border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background .15s, color .15s, transform .15s, border-color .15s;
    flex-shrink: 0;
}
.product-share-inline .ps-btn:hover {
    transform: translateY(-2px);
    background: white;
}
.product-share-inline .ps-btn:nth-child(3):hover { color: #1877f2; border-color: #1877f2; } /* FB */
.product-share-inline .ps-btn:nth-child(4):hover { color: #25D366; border-color: #25D366; } /* WA */
.product-share-inline .ps-btn:nth-child(5):hover { color: #0088cc; border-color: #0088cc; } /* TG */
@media (max-width: 576px) {
    .product-share-inline { padding: 14px 0 2px; }
    .product-share-inline .ps-label { font-size: .65rem; }
}

/* Frecce navigazione */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    background: white;
    border: none; border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    color: #1a1a2e;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .2s, transform .2s;
    z-index: 5;
}
.gallery-main:hover .gallery-nav { opacity: .9; }
.gallery-nav:hover { background: #c08b8b; color: white; opacity: 1; transform: translateY(-50%) scale(1.08); }
.gallery-nav-prev { left: 12px; }
.gallery-nav-next { right: 12px; }

/* Dots */
.gallery-dots {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 6px;
    z-index: 4;
}
.gallery-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: 1.5px solid rgba(0,0,0,.1);
    cursor: pointer;
    padding: 0;
    transition: width .25s, background .25s;
}
.gallery-dot.active {
    width: 24px;
    background: #c08b8b;
    border-color: #c08b8b;
    border-radius: 4px;
}

/* Contatore + zoom */
.gallery-counter {
    display: none !important; /* nascosto: dava fastidio sul badge sconto */
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(0,0,0,.55);
    color: white;
    border-radius: 14px;
    padding: 4px 12px;
    font-size: .72rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
    z-index: 4;
}
.gallery-zoom-btn {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,.55);
    border: none; border-radius: 50%;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    z-index: 4;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .15s;
}
.gallery-zoom-btn:hover { background: #c08b8b; transform: scale(1.08); }

/* Thumbnails */
.gallery-thumbs {
    display: flex; gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 8px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
.gallery-thumb { scroll-snap-align: start; }
.gallery-thumbs::-webkit-scrollbar { height: 4px; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: #e0e3e8; border-radius: 2px; }
.gallery-thumb {
    flex-shrink: 0;
    width: 70px; height: 70px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: #f8f8f8;
    cursor: pointer;
    padding: 0;
    transition: border-color .15s, transform .15s;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-thumb.active {
    border-color: #c08b8b;
    box-shadow: 0 4px 12px rgba(192,139,139,.25);
}

/* ─── LIGHTBOX ──────────────────────────────────────────── */
.gallery-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 99999;
    display: flex !important;
    align-items: center; justify-content: center;
    padding: 60px 20px;
    animation: lbFadeIn .25s;
}
.gallery-lightbox[style*="display:none"], .gallery-lightbox[style*="display: none"] { display: none !important; }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }

#lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lb-close {
    position: absolute;
    top: 20px; right: 24px;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.15);
    border: none; border-radius: 50%;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    transition: background .15s, transform .15s;
    line-height: 1;
}
.lb-close:hover { background: #c08b8b; transform: scale(1.08); }
.lb-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px;
    background: rgba(255,255,255,.12);
    border: none; border-radius: 50%;
    color: white; font-size: 1.4rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.lb-nav:hover { background: #c08b8b; transform: translateY(-50%) scale(1.08); }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-counter {
    position: absolute;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,.12);
    color: white;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .gallery-nav { display: none; } /* solo swipe su mobile */
    .gallery-thumb { width: 56px; height: 56px; }
    .lb-nav { width: 42px; height: 42px; font-size: 1.1rem; }
    .lb-prev { left: 8px; } .lb-next { right: 8px; }
}
.gallery-badge-sale {
    position: absolute; top: 16px; left: 16px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #ff6b9d 0%, #c0286b 100%);
    color: #fff; text-align: center; line-height: 1;
    box-shadow: 0 6px 18px rgba(192, 40, 107, .45);
    transform: rotate(-8deg);
    animation: gbsPulse 2.2s ease-in-out infinite;
}
.gallery-badge-sale .gbs-perc {
    font-size: 1.2rem; font-weight: 900; letter-spacing: -.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.gallery-badge-sale .gbs-label {
    font-size: .52rem; font-weight: 800; letter-spacing: 1.8px;
    margin-top: 2px; opacity: .95;
}
@keyframes gbsPulse {
    0%, 100% { transform: rotate(-8deg) scale(1); }
    50%      { transform: rotate(-8deg) scale(1.07); }
}
.gallery-scarcity {
    position: absolute; bottom: 16px; left: 16px; right: 16px;
    background: rgba(0,0,0,.8); color: white;
    padding: 8px 14px; border-radius: 10px;
    font-size: .82rem; font-weight: 600;
    text-align: center;
    backdrop-filter: blur(8px);
}

.product-share { display: flex; align-items: center; gap: 6px; }
.share-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; color: white;
    transition: transform .15s;
}
.share-btn:hover { transform: scale(1.1) translateY(-2px); color: white; }
.share-fb { background: #1877f2; }
.share-wa { background: #25D366; }
.share-tg { background: #0088cc; }

.product-title {
    font-size: 1.75rem; font-weight: 800;
    color: #1a1a2e; line-height: 1.2;
    letter-spacing: -.3px; margin-bottom: 4px;
}

.product-meta-bar {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.product-rating-badge {
    display: flex; align-items: center; gap: 6px;
    background: #fff8eb; border: 1px solid #fce4b8;
    padding: 4px 10px; border-radius: 8px; font-size: .85rem;
}
.product-rating-badge .product-stelle { color: #f39c12; letter-spacing: 1px; }
.product-rating-badge span { font-weight: 700; }

.product-live-badge {
    display: flex; align-items: center; gap: 6px;
    background: #ffedeb; color: #8b4a62;
    padding: 4px 10px; border-radius: 8px;
    font-size: .8rem; font-weight: 600;
}
.live-dot {
    width: 8px; height: 8px; background: #c08b8b;
    border-radius: 50%; animation: livePulse 1.5s infinite;
}
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ═══════════════════════════════════════════════════════════
   🎉 CART EXPLOSION — Animazione "Aggiunto al carrello"
   ═══════════════════════════════════════════════════════════ */
.cart-fx-overlay {
    position: fixed; inset: 0;
    z-index: 999999;
    background: rgba(15, 15, 26, 0);
    backdrop-filter: blur(0px);
    display: flex;
    align-items: center; justify-content: center;
    opacity: 0;
    transition: background .25s, backdrop-filter .25s, opacity .2s;
    pointer-events: none;
}
.cart-fx-overlay.show {
    background: rgba(15, 15, 26, .55);
    backdrop-filter: blur(8px);
    opacity: 1;
    pointer-events: auto;
}
.cart-fx-overlay.hide {
    opacity: 0;
    background: rgba(15, 15, 26, 0);
    backdrop-filter: blur(0px);
}

/* Burst container */
.cfx-burst {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center;
    pointer-events: none;
}

/* Rings espansivi */
.cfx-ring {
    position: absolute;
    top: 60px; left: 50%;
    width: 120px; height: 120px;
    margin-left: -60px; margin-top: -60px;
    border: 3px solid;
    border-radius: 50%;
    opacity: 0;
    transform: scale(.1);
    pointer-events: none;
}
.cart-fx-overlay.show .cfx-ring-1 {
    border-color: #fff;
    animation: cfxRing 1s cubic-bezier(.25,.46,.45,.94) forwards;
}
.cart-fx-overlay.show .cfx-ring-2 {
    border-color: rgba(255,255,255,.5);
    animation: cfxRing 1s cubic-bezier(.25,.46,.45,.94) .12s forwards;
}
.cart-fx-overlay.show .cfx-ring-3 {
    border-color: rgba(255,255,255,.3);
    animation: cfxRing 1s cubic-bezier(.25,.46,.45,.94) .24s forwards;
}
@keyframes cfxRing {
    0%   { opacity: 1; transform: scale(.1); border-width: 4px; }
    60%  { opacity: .6; }
    100% { opacity: 0; transform: scale(2.4); border-width: 1px; }
}

/* Particelle colorate che esplodono */
.cfx-particles {
    position: absolute;
    top: 60px; left: 50%;
    width: 0; height: 0;
    pointer-events: none;
}
.cfx-particle {
    position: absolute;
    top: 0; left: 0;
    width: var(--size); height: var(--size);
    margin-left: calc(var(--size) * -.5);
    margin-top:  calc(var(--size) * -.5);
    background: var(--color);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 12px var(--color);
}
.cart-fx-overlay.show .cfx-particle {
    animation: cfxParticle 1.1s cubic-bezier(.16,.84,.44,1) var(--delay) forwards;
}
@keyframes cfxParticle {
    0% {
        opacity: 1;
        transform: rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle))) scale(1);
    }
    70% { opacity: 1; }
    100% {
        opacity: 0;
        transform: rotate(var(--angle)) translateX(var(--dist)) rotate(calc(-1 * var(--angle))) scale(.3);
    }
}

/* Check icon centrale */
.cfx-check-wrap {
    position: relative;
    width: 120px; height: 120px;
    display: flex; align-items: center; justify-content: center;
}
.cfx-check {
    width: 100%; height: 100%;
    color: #28c76f;
    filter: drop-shadow(0 8px 24px rgba(40,199,111,.6));
    transform: scale(0);
    opacity: 0;
}
.cart-fx-overlay.show .cfx-check {
    animation: cfxCheckPop .55s cubic-bezier(.34,1.56,.64,1) .15s forwards;
}
@keyframes cfxCheckPop {
    0%   { transform: scale(0)   rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(8deg);  opacity: 1; }
    100% { transform: scale(1)   rotate(0deg);  opacity: 1; }
}
.cfx-check-circle {
    stroke-dasharray: 290;
    stroke-dashoffset: 290;
}
.cart-fx-overlay.show .cfx-check-circle {
    animation: cfxDraw .5s ease-out .25s forwards;
}
.cfx-check-path {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
}
.cart-fx-overlay.show .cfx-check-path {
    animation: cfxDraw .35s ease-out .55s forwards;
}
@keyframes cfxDraw { to { stroke-dashoffset: 0; } }

/* Sparkles brillanti attorno al check */
.cfx-sparkles {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    pointer-events: none;
}
.cfx-sparkle {
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 14px;
    margin-left: -2px; margin-top: -7px;
    background: linear-gradient(180deg, #fff 0%, #ffe066 50%, #fff 100%);
    border-radius: 2px;
    opacity: 0;
    box-shadow: 0 0 8px #ffe066, 0 0 16px rgba(255,224,102,.6);
}
.cart-fx-overlay.show .cfx-sparkle {
    animation: cfxSparkle .9s ease-out var(--delay) forwards;
}
@keyframes cfxSparkle {
    0% {
        opacity: 0;
        transform: rotate(var(--angle)) translateY(0) scale(.3);
    }
    20% { opacity: 1; }
    100% {
        opacity: 0;
        transform: rotate(var(--angle)) translateY(calc(-1 * var(--dist))) scale(.6);
    }
}

/* Titolo + sottotitolo */
.cfx-title {
    margin-top: 12px;
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
    letter-spacing: -.4px;
    opacity: 0;
    transform: translateY(12px);
}
.cfx-sub {
    margin-top: 4px;
    font-size: .88rem;
    color: rgba(255,255,255,.7);
    opacity: 0;
    transform: translateY(12px);
}
.cart-fx-overlay.show .cfx-title {
    animation: cfxText .5s ease-out .5s forwards;
}
.cart-fx-overlay.show .cfx-sub {
    animation: cfxText .5s ease-out .6s forwards;
}
@keyframes cfxText {
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile: dimensioni ridotte */
@media (max-width: 576px) {
    .cfx-check-wrap { width: 96px; height: 96px; }
    .cfx-title { font-size: 1.3rem; }
    .cfx-sub { font-size: .82rem; padding: 0 24px; text-align: center; }
}

/* ─── PRICE BLOCK · in linea col resto del sito ──────────── */
.product-price-block {
    position: relative;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 18px 22px 16px;
    margin: 16px 0 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    font-family: 'Inter', system-ui, sans-serif;
}

/* Decorazioni angoli — non più usate, mantengo nascoste */
.ppb-corner { display: none; }

/* Label */
.ppb-label {
    font-size: .68rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}

/* Riga prezzo principale */
.ppb-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* Prezzo grande nero */
.product-price {
    font-size: 2.4rem;
    font-weight: 800;
    color: #1a1a2e;
    letter-spacing: -.6px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Badge -X% in rosso accent del sito (con shimmer) */
.ppb-discount-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #c08b8b 0%, #8b4a62 100%);
    color: white;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow:
        0 6px 14px rgba(192,139,139,.32),
        0 0 0 1px rgba(255,255,255,.15) inset;
    overflow: hidden;
    animation: ppbPulse 2.4s ease-in-out infinite;
}
.ppb-discount-badge::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-22deg);
    animation: ppbShine 3.2s ease-in-out infinite;
}
@keyframes ppbShine {
    0%, 60% { left: -120%; }
    80%, 100% { left: 130%; }
}
@keyframes ppbPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* Riga prezzo precedente + risparmi */
.ppb-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #ececec;
    flex-wrap: wrap;
}
.ppb-old-text {
    font-size: .82rem;
    color: #999;
    letter-spacing: .2px;
}
.product-price-old {
    color: #999;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(192,139,139,.5);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ppb-dot {
    color: #ccc;
    font-size: .9rem;
    line-height: 1;
}

/* Risparmi badge — dark soft, coerente col brand */
.product-save-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a1a2e;
    color: #fff;
    border: none;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 4px 10px rgba(26,26,46,.18);
    transition: transform .2s;
}
.product-save-badge:hover { transform: translateY(-1px); }
.product-save-badge::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    background: #c08b8b;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(192,139,139,.22);
    position: relative;
}
.product-save-badge::after {
    content: '';
    position: absolute;
    margin-left: -23px;
    margin-top: 3px;
    width: 6px; height: 6px;
    border-left: 1.6px solid #fff;
    border-bottom: 1.6px solid #fff;
    transform: rotate(-45deg);
    pointer-events: none;
}

/* Mobile */
@media (max-width: 576px) {
    .product-price-block { padding: 16px 18px 14px; }
    .product-price { font-size: 2.1rem; }
    .ppb-label { letter-spacing: 1px; font-size: .62rem; }
    .ppb-discount-badge { font-size: .85rem; padding: 5px 10px; }
}

/* Countdown */
.product-countdown {
    background: linear-gradient(135deg, #fdf5f3, #fae0dc);
    border: 1px solid #f0d8d4;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.countdown-label { font-weight: 700; color: #8b4a62; font-size: .88rem; }
.countdown-timer { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ct-unit {
    background: #1a1a2e; color: white;
    border-radius: 6px;
    padding: 4px 10px;
    text-align: center; min-width: 44px;
}
.ct-unit span { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1; }
.ct-unit small { font-size: .55rem; opacity: .65; }
.ct-sep { color: #1a1a2e; font-weight: 800; font-size: 1.2rem; }

.product-desc { color: #555; line-height: 1.65; font-size: .92rem; margin-bottom: 20px; }

/* Stock bar */
.product-stock-bar { margin-bottom: 20px; }
.stock-progress {
    height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;
}
.stock-fill {
    height: 100%;
    background: linear-gradient(90deg, #c08b8b, #f39c12);
    border-radius: 4px;
    transition: width .4s;
}

/* Add to cart section */
.product-add-section {
    display: flex; align-items: stretch; gap: 10px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.product-qty-wrap {
    display: flex; align-items: center;
    border: 2px solid #e0e3e8;
    border-radius: 12px;
    overflow: hidden;
}
.qty-btn {
    background: white; border: none;
    width: 40px; height: 48px;
    font-size: 1.3rem; font-weight: 700;
    cursor: pointer; color: #1a1a2e;
    transition: background .15s;
}
.qty-btn:hover { background: #f4f6f9; }
.qty-input {
    width: 50px; height: 48px;
    border: none; text-align: center;
    font-size: 1rem; font-weight: 700;
    outline: none;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-cart-btn {
    flex: 1; min-width: 200px;
    background: #c08b8b; color: white;
    border: none; border-radius: 12px;
    padding: 13px 24px;
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 16px rgba(192,139,139,.35);
}
.product-cart-btn:hover { background: #8b4a62; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,139,139,.45); }

.product-wish-btn {
    width: 48px; height: 48px;
    background: white; border: 2px solid #e0e3e8;
    border-radius: 12px;
    cursor: pointer; font-size: 1.1rem;
    color: #555;
    transition: border-color .2s, color .2s, background .2s;
}
.product-wish-btn:hover { border-color: #c08b8b; color: #c08b8b; background: #fff8f7; }

.product-buy-now {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #1a1a2e; color: white;
    padding: 12px 24px; border-radius: 12px;
    text-decoration: none; font-weight: 700;
    margin-bottom: 14px;
    transition: background .2s;
}
.product-buy-now:hover { background: #2c3e50; color: white; }

/* Trust strip */
.product-trust-strip {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
    background: #f8f9fa; border-radius: 12px;
    padding: 14px; margin: 20px 0;
}
.pt-item {
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; color: #555;
}
.pt-item i { font-size: 1.05rem; }
.pt-item span { font-weight: 600; }

@media (max-width: 768px) {
    .product-trust-strip { grid-template-columns: repeat(2,1fr); }
    .product-price { font-size: 1.7rem; }
    .product-title { font-size: 1.4rem; }
}

/* Details box */
/* ─── DESCRIZIONE COMPLETA — Card moderna ──────────────────── */
.product-details-box {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.03);
    transition: box-shadow .2s;
}
.product-details-box:hover { box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.product-details-box summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 22px;
    font-weight: 700; font-size: .95rem;
    color: #1a1a2e;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    transition: background .15s;
    user-select: none;
}
.product-details-box summary::-webkit-details-marker { display: none; }
.product-details-box summary::marker { display: none; }
.product-details-box summary:hover { background: #fafbfc; }
.pdc-summary-left { display: flex; align-items: center; gap: 10px; }
.pdc-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #fdf5f3, #fae0dc);
    color: #c08b8b;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pdc-chevron {
    color: #999;
    transition: transform .25s cubic-bezier(.4,0,.2,1), color .2s;
    flex-shrink: 0;
}
.product-details-box[open] .pdc-chevron {
    transform: rotate(180deg);
    color: #c08b8b;
}

.pdc-content {
    padding: 8px 26px 26px;
    border-top: 1px solid #f5f5f5;
    color: #4a4a55;
    line-height: 1.7;
    font-size: .93rem;
}
.pdc-content p {
    margin: 12px 0 0;
    color: #4a4a55;
}
.pdc-content p:first-child {
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.65;
    color: #2a2a35;
    font-weight: 400;
}

/* Header sezione */
.pdc-content .pdc-h {
    font-size: .72rem;
    font-weight: 700;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ececec;
    position: relative;
}
.pdc-content .pdc-h::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 32px; height: 2px;
    background: #1a1a2e;
}
.pdc-content > :first-child.pdc-h { margin-top: 18px; }

/* Tabelle dentro la descrizione (es. guida taglie) */
.pdc-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 4px;
    font-size: .9rem;
}
.pdc-content table td,
.pdc-content table th {
    padding: 7px 10px;
    border: 1px solid #ececec;
    text-align: center;
    color: #4a4a55;
}
.pdc-content table tr:first-child td,
.pdc-content table th {
    background: #faf7f2;
    font-weight: 700;
    color: #1a1a2e;
}
.pdc-content table tr:nth-child(even) td { background: #fcfbf9; }
@media (max-width: 559px) {
    .pdc-content table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Spec table (Key | Value) — stile elegante boutique */
.pdc-spec {
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
    border-top: 1px solid #f0f0f0;
}
.pdc-spec dt, .pdc-spec dd {
    margin: 0;
    padding: 11px 16px 11px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .87rem;
    line-height: 1.5;
}
.pdc-spec dt {
    color: #6b6b75;
    font-weight: 500;
    grid-column: 1 / 2;
    position: relative;
    padding-left: 0;
}
.pdc-spec dd {
    color: #1a1a2e;
    font-weight: 600;
    grid-column: 2 / 3;
    text-align: right;
    padding-right: 16px;
}
/* Su mobile: 1 colonna con label sopra */
@media (max-width: 576px) {
    .pdc-spec { grid-template-columns: 1fr; }
    .pdc-spec dt { grid-column: 1; padding-bottom: 2px; border-bottom: none; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }
    .pdc-spec dd { grid-column: 1; text-align: left; padding-top: 0; padding-left: 0; }
}

/* Bullet list */
.pdc-bullets {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}
.pdc-bullets li {
    position: relative;
    padding: 4px 0 4px 20px;
    color: #4a4a55;
    font-size: .9rem;
}
.pdc-bullets li::before {
    content: '';
    position: absolute;
    left: 0; top: 12px;
    width: 6px; height: 6px;
    background: #1a1a2e;
    border-radius: 50%;
}

/* Compat — vecchio stile lista (in caso restino prodotti vecchi) */
.pdc-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.pdc-list li { background: #f8fbf8; border: 1px solid #e6f3e6; border-radius: 10px; padding: 10px 14px 10px 36px; position: relative; font-size: .85rem; }
.pdc-list li::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #10b981; border-radius: 50%; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 11px; background-position: center; background-repeat: no-repeat; }
.pdc-key { font-weight: 700; color: #1a1a2e; }
.pdc-val { color: #555; }
@media (max-width: 576px) { .pdc-list { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   RECENSIONI
   ═══════════════════════════════════════════════════════════ */
.reviews-summary {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 24px;
    text-align: center;
}
.rs-score { font-size: 3rem; font-weight: 900; color: #1a1a2e; line-height: 1; }
.rs-stelle { color: #f39c12; font-size: 1.2rem; letter-spacing: 3px; margin: 6px 0; }
.rs-total { color: #888; font-size: .82rem; }
.rs-bars { text-align: left; }
.rs-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: .8rem; }
.rs-bar-label { color: #555; font-weight: 600; width: 22px; }
.rs-bar-track { flex: 1; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.rs-bar-fill { height: 100%; background: #f39c12; border-radius: 3px; transition: width .4s; }
.rs-bar-n { color: #888; width: 22px; text-align: right; font-size: .75rem; }
.rs-empty { padding: 16px 8px; }
.rs-empty-icon { font-size: 2.2rem; color: #e1e4ea; line-height: 1; margin-bottom: 8px; }
.rs-empty-title { font-weight: 700; color: #1a1a2e; font-size: .95rem; margin-bottom: 4px; }
.rs-empty-sub { color: #888; font-size: .8rem; line-height: 1.4; }

.reviews-list { display: flex; flex-direction: column; gap: 16px; }
.review-card {
    background: white; border: 1px solid #f0f0f0;
    border-radius: 14px; padding: 18px 20px;
    transition: box-shadow .15s;
}
.review-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.review-avatar {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #c08b8b, #8b4a62);
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.review-name { font-weight: 700; color: #1a1a2e; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }
.review-verified {
    font-size: .7rem; font-weight: 600; color: #27ae60;
    background: #eafaf1; padding: 2px 8px; border-radius: 10px;
}
.review-stelle { color: #f39c12; font-size: .85rem; letter-spacing: 1px; margin-top: 2px; }
.review-date { white-space: nowrap; }
.review-title { font-weight: 700; color: #1a1a2e; margin: 6px 0 4px; font-size: .95rem; }
.review-text { color: #555; line-height: 1.6; margin: 0; font-size: .9rem; }

.review-form-wrap {
    background: #fafbfc; border: 1px solid #f0f0f0;
    border-radius: 14px; padding: 24px;
}
.star-selector {
    display: flex; gap: 2px; justify-content: center;
    height: 38px; align-items: center;
}
.star-opt {
    font-size: 1.6rem; color: #ddd;
    cursor: pointer; transition: color .15s;
}

/* ─── REVIEW LOGIN GATE ──────────────────────────────────── */
.review-login-gate {
    text-align: center;
    padding: 36px 28px;
    background: linear-gradient(135deg, #fdf5f3, #fae0dc);
    border: 2px dashed #f0d8d4;
    border-radius: 14px;
}
.rlg-icon {
    width: 56px; height: 56px;
    background: white;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #c08b8b;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(192,139,139,.15);
}
.review-login-gate h6 { font-weight: 800; color: #1a1a2e; margin-bottom: 6px; }

/* ─── VARIANTI PRODOTTO ──────────────────────────────────── */
.product-varianti {
    background: #fafbfc;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 16px 0 20px;
    transition: box-shadow .25s, border-color .25s, background .25s;
}

/* ─── Animazioni quando manca selezione ──────────────────── */
@keyframes variantShake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-8px); }
    30%      { transform: translateX(7px); }
    45%      { transform: translateX(-6px); }
    60%      { transform: translateX(5px); }
    75%      { transform: translateX(-3px); }
    90%      { transform: translateX(2px); }
}
@keyframes variantGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,139,139,0); border-color: #f0f0f0; background: #fafbfc; }
    30%      { box-shadow: 0 0 0 8px rgba(192,139,139,.18); border-color: #c08b8b; background: #fdf5f3; }
    100%     { box-shadow: 0 0 0 0 rgba(192,139,139,0); border-color: #f0f0f0; background: #fafbfc; }
}
.variante-group.variante-shake {
    animation:
        variantShake .55s cubic-bezier(.36,.07,.19,.97) both,
        variantGlow 1.4s ease-out;
}

@keyframes variantPulse {
    0%, 100% { transform: scale(1); color: #c08b8b; }
    50%      { transform: scale(1.15); color: #d4a5a5; text-shadow: 0 0 14px rgba(192,139,139,.6); }
}
.variante-selected.variante-pulse {
    animation: variantPulse .6s ease-in-out 2;
    display: inline-block;
}

/* ─── Toast variante (sopra il gruppo, con freccettina) ─────── */
.variant-toast {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translate(-50%, 6px) scale(.92);
    background: linear-gradient(135deg, #ffffff 0%, #fdf5f3 100%);
    color: #1a1a2e;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1.5px solid #c08b8b;
    box-shadow:
        0 14px 30px rgba(192,139,139,.22),
        0 4px 12px rgba(0,0,0,.06),
        0 0 0 4px rgba(192,139,139,.06);
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .9rem;
    font-weight: 600;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
    max-width: calc(100% - 8px);
}
.variant-toast.show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}
.variant-toast .vt-emoji {
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(192,139,139,.25));
}
.variant-toast .vt-text { color: #1a1a2e; }
.variant-toast strong {
    color: #c08b8b;
    font-weight: 800;
}
/* Freccettina che punta verso il gruppo varianti */
.variant-toast .vt-arrow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 16px; height: 16px;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, #fdf5f3, #fdf5f3);
    border-right: 1.5px solid #c08b8b;
    border-bottom: 1.5px solid #c08b8b;
    border-bottom-right-radius: 3px;
}
@media (max-width: 576px) {
    .variant-toast { font-size: .82rem; padding: 10px 14px; gap: 7px; }
    .variant-toast .vt-emoji { font-size: 1.05rem; }
}
.variante-group { position: relative; overflow: visible; }
.variante-group + .variante-group { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #e0e3e8; }
.variante-label {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; color: #1a1a2e;
    margin-bottom: 10px;
}
.variante-label strong { color: #1a1a2e; font-weight: 700; }
.variante-selected { color: #c08b8b; font-weight: 700; margin-left: auto; font-size: .85rem; }

.variante-options { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.variante-label { justify-content: center; text-align: center; }
.variante-label .variante-selected { margin-left: 8px; }
.var-opt {
    background: white;
    border: 2px solid #e0e3e8;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: .85rem; font-weight: 600;
    cursor: pointer;
    color: #1a1a2e;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
    display: inline-flex; align-items: center; gap: 6px;
    position: relative;
    min-width: 44px;
    justify-content: center;
}
.var-opt:hover:not(.disabled) {
    border-color: #c08b8b;
    color: #c08b8b;
    transform: translateY(-1px);
}
.var-opt.selected {
    background: #c08b8b !important;
    border-color: #c08b8b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(192,139,139,.3);
    transform: translateY(-2px);
}
.var-opt.selected .var-name { color: #ffffff !important; font-weight: 700; }
.var-opt.selected::after {
    content: '✓';
    position: absolute;
    top: -4px; right: -4px;
    width: 16px; height: 16px;
    background: white;
    color: #c08b8b;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.var-opt.selected .var-color-dot { box-shadow: 0 0 0 2px white; }
.var-opt.disabled {
    background: #f4f6f9;
    color: #ccc;
    cursor: not-allowed;
    border-color: #ececec;
}
.var-opt small { font-size: .72rem; opacity: .8; font-weight: 500; }
.var-color-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.08);
    display: inline-block;
    flex-shrink: 0;
}
.var-cross {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1.5px; background: #ccc;
    transform: rotate(-15deg);
    pointer-events: none;
}

/* Varianti colore — più grandi, solo dot visibile */
.var-colore { padding: 5px; min-width: 38px; min-height: 38px; }
.var-colore .var-color-dot { width: 26px; height: 26px; }
.var-colore .var-name { display: none; }
.var-colore.selected .var-name { display: inline; margin-left: 4px; font-size: .78rem; }
.var-colore.selected { padding: 5px 12px 5px 5px; }

/* ─── FAQ + CONTATTI ASSISTENZA ──────────────────────────── */
.assistenza-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #2c1a1a 100%);
    border-radius: 20px;
    padding: 50px 40px;
    color: white;
    position: relative;
    overflow: hidden;
}
@media (max-width: 768px) {
    .assistenza-hero { padding: 22px 18px; border-radius: 14px; margin-bottom: 18px !important; }
    .assistenza-hero h1 { font-size: 1.3rem !important; line-height: 1.2; }
    .assistenza-hero p { font-size: .82rem; }
    .ah-badge { font-size: .68rem !important; padding: 3px 11px !important; margin-bottom: 8px !important; }
}
.assistenza-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80%, rgba(192,139,139,.2), transparent 60%);
}
.ah-content { position: relative; z-index: 1; }
.ah-badge {
    display: inline-block;
    background: rgba(192,139,139,.2);
    border: 1px solid rgba(192,139,139,.35);
    color: #e8c5c5;
    padding: 4px 14px; border-radius: 20px;
    font-size: .75rem; font-weight: 700; margin-bottom: 12px;
}
.assistenza-hero h1 { font-size: 2rem; font-weight: 900; margin: 0 0 6px; }
.assistenza-hero p { color: rgba(255,255,255,.6); margin: 0; }

.contact-card {
    display: block;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 28px 24px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    height: 100%;
}
.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    color: inherit;
}
.cc-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    color: white;
    margin-bottom: 14px;
}
.contact-wa .cc-icon { background: #25D366; }
.contact-wa:hover { border-color: #25D366; }
.contact-email .cc-icon { background: linear-gradient(135deg, #3498db, #2980b9); }
.contact-email:hover { border-color: #3498db; }
.contact-faq .cc-icon { background: linear-gradient(135deg, #c08b8b, #8b4a62); }
.contact-faq:hover { border-color: #c08b8b; }
.contact-card h5 { font-weight: 800; margin-bottom: 6px; }
.contact-card p { color: #777; font-size: .88rem; margin-bottom: 10px; }
.cc-cta { color: #c08b8b; font-weight: 700; font-size: .85rem; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.faq-item:hover { border-color: #e0e3e8; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 24px;
    font-weight: 700; color: #1a1a2e;
    font-size: .95rem;
    display: flex; align-items: center; justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-arrow { transition: transform .25s; color: #aaa; }
.faq-item[open] .faq-arrow { transform: rotate(180deg); color: #c08b8b; }
.faq-answer {
    padding: 0 24px 18px;
    color: #555; line-height: 1.65; font-size: .88rem;
    border-top: 1px solid #f8f8f8;
    padding-top: 14px;
}

/* ─── ADMIN SETTINGS SELECT ──────────────────────────────── */
.setting-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e74c3c' stroke-width='2' d='M3 6l5 5 5-5'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    cursor: pointer;
    border-radius: 10px !important;
    border: 1.5px solid #e0e3e8 !important;
    transition: border-color .15s, box-shadow .15s;
    appearance: none; -webkit-appearance: none;
    padding-right: 36px !important;
    font-weight: 500;
}
.setting-select:hover { border-color: #c0c4cc !important; }
.setting-select:focus {
    border-color: #c08b8b !important;
    box-shadow: 0 0 0 4px rgba(192,139,139,.08) !important;
    outline: none;
}

/* ═══════════════════════════════════════════════════════════
   HERO SLIDESHOW
   ═══════════════════════════════════════════════════════════ */
/* ─── HERO VIDEO · stile Madame Juliette · full-screen autoplay ─── */
.hero-video {
    position: relative;
    width: 100%;
    margin: 0 0 40px;
    height: calc(100vh - 80px); /* sotto l'header */
    min-height: 560px;
    max-height: 900px;
    overflow: hidden;
    background: #0f0f1a;
}
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    /* fade-in dolce al primo frame */
    animation: hvFadeIn 1.4s ease-out both;
}
@keyframes hvFadeIn {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
}

.hero-video-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,.15) 0%,
            rgba(0,0,0,.05) 35%,
            rgba(0,0,0,.05) 65%,
            rgba(0,0,0,.35) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-video-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    color: #fff;
    animation: hvContentIn 1.4s cubic-bezier(.22,1,.36,1) .4s both;
}
@keyframes hvContentIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-video-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 5.2rem);
    line-height: 1.05;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

.hero-video-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(.78rem, 1.1vw, .92rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.95);
    margin: 0 0 36px;
    font-weight: 500;
    text-shadow: 0 1px 10px rgba(0,0,0,.3);
}

.hero-video-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: #fff;
    border: 1.5px solid #fff;
    padding: 16px 34px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s, color .3s, transform .25s, gap .3s;
}
.hero-video-cta:hover {
    background: #fff;
    color: #0f0f1a;
    transform: translateY(-2px);
    gap: 18px;
}
.hero-video-cta svg { transition: transform .3s; }
.hero-video-cta:hover svg { transform: translateX(4px); }

/* Scroll hint in basso */
.hero-video-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 24px;
    height: 38px;
    border: 1.5px solid rgba(255,255,255,.6);
    border-radius: 99px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}
.hero-video-scroll span {
    display: block;
    width: 2px;
    height: 8px;
    background: #fff;
    border-radius: 2px;
    animation: hvScrollDot 1.6s ease-in-out infinite;
}
@keyframes hvScrollDot {
    0%   { transform: translateY(0);   opacity: 1; }
    70%  { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(14px); opacity: 0; }
}

@media (max-width: 768px) {
    .hero-video { height: calc(100vh - 64px); min-height: 480px; }
    .hero-video-title { font-size: clamp(2rem, 9vw, 3.2rem); letter-spacing: .04em; }
    .hero-video-sub { font-size: .72rem; letter-spacing: 3px; margin-bottom: 28px; }
    .hero-video-cta { padding: 14px 26px; font-size: .72rem; }
    .hero-video-scroll { bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-bg { animation: none; }
    .hero-video-content { animation: none; }
    .hero-video-scroll span { animation: none; }
}

/* ─── HERO SLIDESHOW · editorial fullbleed stile Madame Juliette ─── */
.hero-slideshow {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    /* breakout edge-to-edge dal .container del main */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -1rem;
    margin-bottom: 40px;
    background: #0f0f1a;
    aspect-ratio: 16/9;
    min-height: 540px;
    max-height: 78vh;
}
.hs-track { position: relative; width: 100%; height: 100%; }
.hs-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.hs-slide.active { opacity: 1; pointer-events: auto; }

/* Sfondo: immagine prodotto a tutta pagina + slow zoom su slide attiva */
.hs-bg {
    display: block;
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    filter: none;
    transform: scale(1.04);
    transition: transform 8s ease-out;
}
.hs-slide.active .hs-bg {
    transform: scale(1.12);
}

/* Overlay scuro per leggibilità testo (più forte in basso) */
.hs-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,.12) 0%,
            rgba(0,0,0,.18) 40%,
            rgba(0,0,0,.55) 80%,
            rgba(0,0,0,.7) 100%);
    pointer-events: none;
}

/* Container — testo centrato in basso */
.hs-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding: 0 24px 90px;
    text-align: center;
    z-index: 2;
}

/* Nascondi colonna visiva separata: l'immagine è il background */
.hs-visual { display: none; }

/* TESTO editorial — bianco su foto */
.hs-content {
    color: #fff;
    max-width: 720px;
    animation: hsContentIn 1s cubic-bezier(.22,1,.36,1) .25s both;
}
@keyframes hsContentIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hs-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    opacity: .92;
}

.hs-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(2.2rem, 5.6vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
    margin: 0 0 18px;
    letter-spacing: -1.4px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hs-divider {
    width: 56px;
    height: 1.5px;
    background: rgba(255,255,255,.85);
    margin: 0 auto 22px;
    transform-origin: center;
    animation: hsDividerIn .9s cubic-bezier(.22,1,.36,1) .7s both;
}
@keyframes hsDividerIn {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

.hs-desc {
    color: rgba(255,255,255,.88);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 auto 28px;
    font-weight: 400;
    max-width: 560px;
    text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

.hs-price-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 28px;
}
.hs-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.4px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.hs-price-old {
    font-size: 1rem;
    color: rgba(255,255,255,.6);
    text-decoration: line-through;
    text-decoration-color: rgba(192,139,139,.85);
    text-decoration-thickness: 1.5px;
}
.hs-price-tag {
    display: inline-flex;
    background: #c08b8b;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 4px;
    letter-spacing: .6px;
}

.hs-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hs-btn-primary, .hs-btn-cart {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px;
    font-weight: 700; font-size: .8rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    border-radius: 0;
    transition: transform .25s, background .25s, color .25s, border-color .25s;
    border: none;
}
.hs-btn-primary {
    background: #fff;
    color: #0f0f1a;
}
.hs-btn-primary svg { transition: transform .3s; }
.hs-btn-primary:hover {
    background: #c08b8b;
    color: #fff;
    transform: translateY(-2px);
}
.hs-btn-primary:hover svg { transform: translateX(4px); }

.hs-btn-cart {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.85);
}
.hs-btn-cart:hover {
    background: #fff;
    color: #0f0f1a;
    border-color: #fff;
    transform: translateY(-2px);
}

/* Frecce navigazione */
.hs-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .25s, border-color .25s, transform .2s;
    z-index: 3;
    opacity: .85;
}
.hs-nav:hover {
    background: #fff;
    color: #0f0f1a;
    border-color: #fff;
    transform: translateY(-50%) scale(1.06);
    opacity: 1;
}
.hs-prev { left: 28px; }
.hs-next { right: 28px; }

/* Dots minimal centrati */
.hs-dots {
    position: absolute;
    bottom: 36px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
    z-index: 3;
}
.hs-dot {
    width: 8px; height: 8px;
    background: rgba(255,255,255,.4);
    border: none; border-radius: 50%;
    cursor: pointer;
    transition: background .25s, width .3s, border-radius .3s;
    padding: 0;
}
.hs-dot.active { background: #fff; width: 28px; border-radius: 99px; }

/* Progress bar in cima */
.hs-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,.12);
    z-index: 2;
}
.hs-progress-bar { height: 100%; background: #fff; width: 0; }

@media (max-width: 992px) {
    .hero-slideshow { aspect-ratio: 4/5; min-height: 540px; }
    .hs-container { padding: 0 24px 70px; }
    .hs-title { font-size: clamp(1.8rem, 7vw, 3rem); letter-spacing: -.8px; }
    .hs-desc { font-size: .9rem; }
    .hs-eyebrow { font-size: .68rem; letter-spacing: 2.6px; margin-bottom: 14px; }
    .hs-dots { bottom: 22px; }
}
@media (max-width: 768px) {
    .hero-slideshow { aspect-ratio: 3/4; min-height: 520px; border-radius: 0; }
    .hs-nav { display: none; }
    .hs-container { padding: 0 20px 60px; }
    .hs-actions { flex-direction: column; width: 100%; max-width: 260px; }
    .hs-btn-primary, .hs-btn-cart { width: 100%; justify-content: center; padding: 14px 22px; }
}

/* ═══════════════════════════════════════════════════════════
   CATEGORIE GRID
   ═══════════════════════════════════════════════════════════ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 992px) { .cat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-card {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transition: transform .3s, box-shadow .3s;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.cat-card-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.cat-card:hover .cat-card-bg { transform: scale(1.1); }
.cat-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(15,15,26,.92) 100%);
}
.cat-card-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 22px;
    color: white;
    display: flex; align-items: flex-end; justify-content: space-between;
}
.cat-card-content h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -.3px; }
.cat-card-content p  { font-size: .8rem; color: rgba(255,255,255,.7); margin: 0; }
.cat-card-arrow {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    transition: background .25s, transform .25s;
}
.cat-card:hover .cat-card-arrow { background: #c08b8b; border-color: #c08b8b; transform: rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   MEGA PROMO BANNER (3 box)
   ═══════════════════════════════════════════════════════════ */
.mega-promo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 992px) { .mega-promo { grid-template-columns: 1fr; } }

.mp-box {
    position: relative;
    border-radius: 20px;
    padding: 28px 28px 24px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    color: white;
}
.mp-box:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.15); }
.mp-shipping { background: linear-gradient(135deg, #1a1a2e 0%, #c08b8b 130%); }
.mp-pay      { background: linear-gradient(135deg, #0c3b5e 0%, #1abc9c 130%); }
.mp-return   { background: linear-gradient(135deg, #4a1a4f 0%, #f39c12 130%); }

.mp-icon-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 14px;
    color: white;
    margin-bottom: 18px;
    backdrop-filter: blur(8px);
}
.mp-tag {
    display: inline-block;
    background: rgba(255,255,255,.2);
    color: white;
    padding: 3px 10px; border-radius: 12px;
    font-size: .7rem; font-weight: 800;
    letter-spacing: .5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.mp-content h3 {
    font-size: 1.25rem; font-weight: 900;
    line-height: 1.2; margin: 0 0 10px;
    letter-spacing: -.3px;
}
.mp-highlight {
    color: #ffd166;
    font-size: 1.05em;
    text-shadow: 0 2px 8px rgba(255,209,102,.4);
}
.mp-content p {
    color: rgba(255,255,255,.8);
    font-size: .85rem;
    line-height: 1.5;
    margin: 0 0 14px;
}
.mp-btn {
    display: inline-flex; align-items: center;
    background: white; color: #1a1a2e;
    padding: 9px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700; font-size: .85rem;
    transition: background .2s, transform .15s;
}
.mp-btn:hover { background: #ffd166; color: #1a1a2e; transform: translateX(4px); }
.mp-pay-logos {
    display: flex; gap: 8px;
    font-size: 1.4rem;
    background: rgba(255,255,255,.1);
    padding: 8px 12px; border-radius: 10px;
    width: max-content;
}
.mp-deco {
    position: absolute;
    right: -10px; bottom: -20px;
    font-size: 9rem;
    opacity: .08;
    pointer-events: none;
    transform: rotate(-15deg);
}

/* ═══════════════════════════════════════════════════════════
   ADMIN DASHBOARD MODERNA
   ═══════════════════════════════════════════════════════════ */
.dash-live-dot {
    width: 10px; height: 10px;
    background: #27ae60; border-radius: 50%;
    display: inline-block;
    animation: dashPulse 1.5s ease-in-out infinite;
}
@keyframes dashPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(39,174,96,.5); }
    50%     { box-shadow: 0 0 0 6px rgba(39,174,96,0); }
}

/* KPI Grid */
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
@media (max-width: 1400px) { .dash-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.dash-kpi {
    background: white;
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    border: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.dash-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); color: inherit; }
.dash-kpi::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--kpi-color);
}
.dash-kpi-blue   { --kpi-color: linear-gradient(90deg, #3498db, #2980b9); }
.dash-kpi-green  { --kpi-color: linear-gradient(90deg, #27ae60, #16a085); }
.dash-kpi-orange { --kpi-color: linear-gradient(90deg, #f39c12, #e67e22); }
.dash-kpi-purple { --kpi-color: linear-gradient(90deg, #9b59b6, #8e44ad); }
.dash-kpi-teal   { --kpi-color: linear-gradient(90deg, #1abc9c, #16a085); }
.dash-kpi-pink   { --kpi-color: linear-gradient(90deg, #e91e63, #ad1457); }

.dash-kpi-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 12px;
}
.dash-kpi-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    color: white;
    background: var(--kpi-color);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.dash-kpi-trend {
    font-size: .7rem; font-weight: 800;
    padding: 3px 10px; border-radius: 12px;
}
.trend-up   { background: #d4edda; color: #155724; }
.trend-down { background: #f8d7da; color: #721c24; }

.dash-kpi-val {
    font-size: 1.7rem;
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.1;
    letter-spacing: -.5px;
}
.dash-kpi-label {
    font-size: .82rem;
    color: #666;
    font-weight: 600;
    margin-top: 4px; margin-bottom: 6px;
}

/* Cards */
.dash-card {
    background: white;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    height: 100%;
}
.dash-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid #f0f0f0;
}
.dash-card-head h6 {
    margin: 0; font-weight: 800; font-size: .95rem;
    display: flex; align-items: center; gap: 8px;
}
.dash-card-body { padding: 22px; min-height: 200px; }

/* Toggle ordini/incasso */
.dash-toggle {
    display: inline-flex;
    background: #f4f6f9;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.dash-toggle button {
    background: transparent; border: none;
    padding: 6px 14px; border-radius: 8px;
    font-size: .8rem; font-weight: 700; color: #777;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.dash-toggle button.active { background: white; color: #c08b8b; box-shadow: 0 2px 6px rgba(0,0,0,.08); }

/* Top prodotti */
.top-prod-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid #f5f5f5;
    transition: background .15s;
}
.top-prod-row:last-child { border-bottom: none; }
.top-prod-row:hover { background: #fafbfc; }
.top-prod-rank {
    font-size: 1.5rem;
    width: 30px; text-align: center;
    flex-shrink: 0;
}
.top-prod-row img {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
}
.top-prod-info { flex: 1; min-width: 0; }
.top-prod-name {
    font-weight: 700; color: #1a1a2e; font-size: .9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Bootstrap badge purple (mancante) */
.bg-purple { background: #9b59b6 !important; color: white; }

/* ═══════════════════════════════════════════════════════════
   ADMIN — GALLERIA + VARIANTI
   ═══════════════════════════════════════════════════════════ */

/* Dropzone */
.gal-dropzone {
    border: 2px dashed #c0c4cc;
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    background: #fafbfc;
    transition: border-color .2s, background .2s;
    cursor: default;
}
.gal-dropzone.drag-over,
.gal-dropzone:hover {
    border-color: #c08b8b;
    background: #fdf5f3;
}
.gal-dropzone .bi-cloud-upload { color: #c0c4cc; transition: color .2s; }
.gal-dropzone.drag-over .bi-cloud-upload,
.gal-dropzone:hover .bi-cloud-upload { color: #c08b8b; }

/* Grid immagini */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.gal-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f8f8f8;
    border: 2px solid transparent;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.gal-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-item-main { border-color: #c08b8b; }

.gal-badge {
    position: absolute;
    top: 6px; left: 6px;
    background: #c08b8b;
    color: white;
    font-size: .65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: .3px;
}

.gal-actions {
    position: absolute;
    top: 6px; right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}
.gal-item:hover .gal-actions { opacity: 1; }
.gal-btn-star, .gal-btn-del {
    width: 28px; height: 28px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.7);
    color: white;
    font-size: .8rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    backdrop-filter: blur(8px);
}
.gal-btn-star:hover { background: #f39c12; }
.gal-btn-del:hover  { background: #c08b8b; }

/* Tabella varianti */
.var-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: #555; }
.var-table .form-control-sm,
.var-table .form-select-sm { font-size: .82rem; }
.var-table tr[data-id] { transition: background .15s; }
.var-table tr[data-id]:hover { background: #fafbfc; }
.var-add-form {
    background: #fafbfc;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 14px;
}
.var-table .form-control-color {
    min-width: 38px; min-height: 30px; padding: 2px; border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════
   ANIMAZIONI SCROLL (AOS-like leggero)
   ═══════════════════════════════════════════════════════════ */
.fx-fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.fx-fade-up.fx-visible { opacity: 1; transform: translateY(0); }

.fx-fade-in {
    opacity: 0;
    transition: opacity .8s ease;
}
.fx-fade-in.fx-visible { opacity: 1; }

.fx-zoom-in {
    opacity: 0;
    transform: scale(.94);
    transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.fx-zoom-in.fx-visible { opacity: 1; transform: scale(1); }

.fx-delay-1 { transition-delay: .08s; }
.fx-delay-2 { transition-delay: .16s; }
.fx-delay-3 { transition-delay: .24s; }
.fx-delay-4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    .fx-fade-up, .fx-fade-in, .fx-zoom-in { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   TRACKING ORDINE
   ═══════════════════════════════════════════════════════════ */
.track-search-card {
    background: white; border-radius: 16px;
    padding: 48px 36px; max-width: 600px; margin: 40px auto;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.track-search-icon {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #c08b8b, #8b4a62);
    color: white; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; margin: 0 auto;
    box-shadow: 0 8px 24px rgba(192,139,139,.3);
}

.track-header-card {
    background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
    color: white; border-radius: 16px;
    padding: 24px 30px;
}
.track-header-card h3 { color: white; }
.track-header-card .text-muted { color: rgba(255,255,255,.5) !important; }
.track-status-badge {
    background: rgba(192,139,139,.2); color: #e8c5c5;
    border: 1px solid rgba(192,139,139,.4);
    padding: 6px 16px; border-radius: 20px;
    font-weight: 700; font-size: .85rem;
    text-transform: uppercase; letter-spacing: .5px;
}

.track-timeline-card {
    background: white; border-radius: 16px;
    padding: 28px 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.track-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.track-timeline::before {
    content: ''; position: absolute;
    top: 24px; left: 24px; right: 24px;
    height: 3px; background: #f0f0f0;
    z-index: 0;
}
.track-step {
    flex: 1; text-align: center;
    position: relative; z-index: 1;
}
.track-step-circle {
    width: 50px; height: 50px;
    background: white;
    border: 3px solid #f0f0f0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #ccc;
    margin: 0 auto 10px;
    transition: all .3s;
}
.track-step.completed .track-step-circle {
    background: #27ae60; border-color: #27ae60; color: white;
}
.track-step.active .track-step-circle {
    background: #c08b8b; border-color: #c08b8b; color: white;
    box-shadow: 0 0 0 6px rgba(192,139,139,.2);
    animation: trackPulse 2s infinite;
}
@keyframes trackPulse {
    0%,100% { box-shadow: 0 0 0 6px rgba(192,139,139,.2); }
    50%    { box-shadow: 0 0 0 12px rgba(192,139,139,.1); }
}
.track-step-info strong { display: block; font-size: .82rem; color: #1a1a2e; }
.track-step.completed .track-step-info strong { color: #27ae60; }
.track-step.active .track-step-info strong { color: #c08b8b; }
.track-step-info small { color: #888; font-size: .7rem; }

.track-code-box {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}

@media (max-width: 768px) {
    .track-timeline { flex-direction: column; gap: 16px; }
    .track-timeline::before { display: none; }
    .track-step { display: flex; align-items: center; gap: 16px; text-align: left; }
    .track-step-circle { margin: 0; flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════
   AREA PERSONALE
   ═══════════════════════════════════════════════════════════ */
.ap-sidebar {
    background: white; border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    position: sticky; top: 90px;
}
.ap-user-card {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 16px; border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}
.ap-avatar {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, #c08b8b, #8b4a62);
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.ap-nav { display: flex; flex-direction: column; gap: 2px; }
.ap-nav a, .ap-nav-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    color: #555; text-decoration: none;
    font-size: .9rem; font-weight: 500;
    border-radius: 8px;
    transition: background .15s, color .15s;
    border: none; background: transparent; cursor: pointer;
    width: 100%; text-align: left;
}
.ap-nav a:hover, .ap-nav-btn:hover { background: #f4f6f9; color: #1a1a2e; }
.ap-nav a.active {
    background: #fdf5f3; color: #c08b8b; font-weight: 700;
}
.ap-nav a i, .ap-nav-btn i { font-size: 1rem; }
.ap-badge {
    margin-left: auto;
    background: #c08b8b; color: white;
    font-size: .7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 10px;
}

.ap-card {
    background: white; border-radius: 14px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.ap-orders { display: flex; flex-direction: column; gap: 12px; }
.ap-order {
    border: 1px solid #f0f0f0; border-radius: 12px;
    padding: 18px 20px;
    transition: box-shadow .15s, border-color .15s;
}
.ap-order:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); border-color: #e0e3e8; }
.ap-order-header {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr auto;
    gap: 16px; align-items: center;
}
.ap-order-header small { display: block; color: #888; font-size: .7rem; text-transform: uppercase; letter-spacing: .3px; }

@media (max-width: 768px) {
    .ap-order-header { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   SEARCH FULL-SCREEN MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Quando la search ha focus → diventa full screen */
    body.search-focused {
        overflow: hidden;
    }
    body.search-focused .sbt-search-section {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 99998;
        background: white;
        padding: 12px 14px;
        box-shadow: 0 4px 20px rgba(0,0,0,.1);
        height: 100vh;
        overflow-y: auto;
    }
    body.search-focused .sbt-search-bar {
        border-radius: 10px;
    }
    /* Pulsante chiudi rimosso (su richiesta): si esce con Esc o tap fuori */
    .search-mobile-close { display: none !important; }
    /* Backdrop scuro per chiudere */
    body.search-focused::before {
        content: '';
        position: fixed; inset: 0;
        background: rgba(0,0,0,.3);
        z-index: 99997;
        backdrop-filter: blur(4px);
    }
    /* Autocomplete dropdown full-width */
    body.search-focused #search-dropdown {
        position: static !important;
        margin-top: 12px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        box-shadow: none !important;
        border: none !important;
    }
    body.search-focused #search-dropdown::before { display: none; }
}

@media (max-width: 768px) {
    /* ─── FIX LARGHEZZA + CENTRATURA mobile ──────────────── */
    .container { padding-left: 12px !important; padding-right: 12px !important; }
    .row.g-5 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
    .row { margin-left: 0 !important; margin-right: 0 !important; }
    .col-md-5, .col-md-7 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%;
        max-width: 100%;
    }
    .product-gallery, .product-title-mobile, .product-varianti,
    .product-stock-bar, .product-trust-strip, .product-share-inline,
    .product-details-box, .reviews-section, .reco-bundle, .reco-upgrade-card,
    .product-price-block, .product-meta-bar, .product-desc {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
    /* Card prodotto Instagram più larghe */
    .insta-grid { gap: 10px; }

    /* Titolo mobile prodotto */
    .product-title-mobile {
        background: white;
        border-radius: 12px;
        padding: 16px 18px 14px;
        margin-bottom: 14px;
        box-shadow: 0 2px 8px rgba(0,0,0,.04);
    }

    /* Nascondi la product-meta-bar desktop su mobile (è già nel titolo mobile) */
    .col-md-7 > .product-meta-bar { display: none; }

    /* Riorganizza colonna destra: varianti PRIMA della descrizione breve, sticky-cart e altri */
    .col-md-7.product-sticky-col {
        display: flex;
        flex-direction: column;
    }
    .col-md-7 .product-price-block   { order: 1; }
    .col-md-7 .product-countdown     { order: 2; }
    .col-md-7 .product-stock-bar     { order: 3; }
    .col-md-7 .product-varianti      { order: 4; }
    .col-md-7 .product-desc          { order: 5; }
    .col-md-7 .product-add-section,
    .col-md-7 .product-buy-now       { order: 6; }
    .col-md-7 .product-trust-strip   { order: 7; }
    .col-md-7 .product-share-inline  { order: 8; }
    .col-md-7 .product-details-box   { order: 9; }
    .product-title-m {
        font-size: 1.25rem;
        font-weight: 800;
        color: #1a1a2e;
        line-height: 1.25;
        margin: 0 0 6px;
        letter-spacing: -.3px;
    }
    .product-meta-m {
        display: flex; align-items: center; gap: 6px;
        flex-wrap: wrap;
        font-size: .78rem;
        color: #555;
        margin-top: 6px;
    }
    .product-stelle-m { color: #f39c12; letter-spacing: 1px; font-size: .85rem; }
    .ptm-rating { font-weight: 700; color: #1a1a2e; }
    .ptm-rec { color: #888; }
    .ptm-divider {
        width: 3px; height: 3px;
        background: #ccc; border-radius: 50%;
        margin: 0 2px;
    }
    .ptm-live {
        display: inline-flex; align-items: center; gap: 5px;
        font-size: .75rem;
        color: #8b4a62;
        font-weight: 600;
        background: #fdf5f3;
        padding: 2px 9px;
        border-radius: 10px;
    }
    .ptm-live-dot {
        width: 6px; height: 6px;
        background: #c08b8b;
        border-radius: 50%;
        animation: ptmLivePulse 1.5s infinite;
    }
    @keyframes ptmLivePulse {
        0%, 100% { opacity: 1; }
        50%      { opacity: .3; }
    }

    /* Nascondi il titolo desktop su mobile (è in colonna dx) */
    .col-md-7 > .d-flex:first-of-type,
    .col-md-7 > .product-title { display: none; }

    /* Sticky add-to-cart bar in basso (sopra la bottom-nav) */
    .product-add-section {
        position: fixed;
        bottom: 68px; /* sopra .mobile-bottom-nav alta 68px */
        left: 0; right: 0;
        background: white; padding: 10px 14px;
        box-shadow: 0 -6px 24px rgba(0,0,0,.12);
        z-index: 1015;
        margin: 0;
        border-top: 1px solid #f0f0f0;
        display: flex; align-items: stretch; gap: 8px;
    }
    body { padding-bottom: 148px; } /* 68 nav + 80 sticky cart */
    .product-cart-btn { font-size: .92rem; padding: 12px 14px; flex: 1; }
    .product-qty-wrap { width: auto; flex-shrink: 0; }
    .qty-btn { width: 36px; height: 44px; }
    .qty-input { width: 42px; height: 44px; }
    .product-wish-btn { display: none; } /* è nel topbar */

    /* WhatsApp widget si solleva sopra sticky cart (vedi whatsapp_widget.php per override completo) */
    .wa-widget { bottom: 170px !important; }

    /* Hero ridotto */
    .hero-section { padding: 32px 20px; flex-direction: column; }
    .hero-title { font-size: 1.6rem; }
    .hero-sub { font-size: .85rem; }

    /* Trust bar 2 cols */
    .trust-bar { grid-template-columns: repeat(2, 1fr); }
    .trust-item { padding: 14px 16px; }

    /* Promo banner */
    .promo-banner { padding: 24px 20px; flex-direction: column; gap: 12px; align-items: flex-start; }
    .promo-banner h3 { font-size: 1.2rem; }

    /* Search bar */
    .sbt-search-section { padding: 12px 0; }
    .sbt-search-field { padding: 8px 12px; }
    .sbt-search-label { font-size: .65rem; }
    .sbt-search-input { font-size: .85rem; }
    .sbt-search-btn { width: 50px; }

    /* Header */
    .sbt-header { padding: 10px 0; }
    .sbt-logo span { font-size: 1.2rem; }
    .sbt-logo-icon { width: 34px; height: 34px; font-size: 1rem; }

    /* Modal centrato anche su mobile */
    .auth-overlay { padding: 16px; align-items: center !important; }
    .auth-modal { border-radius: 20px; min-height: auto; max-width: 100%; width: 100%; max-height: calc(100vh - 32px); }

    /* WhatsApp widget più piccolo */
    .wa-widget { bottom: 76px; right: 16px; }
    body.has-sticky-cart .wa-widget { bottom: 90px; }

    /* Checkout step su mobile */
    .ck-progress { padding: 12px 16px; }
    .ck-step-label { font-size: .75rem; }
    .ck-card-header { padding: 14px 18px; }
    .ck-card-body { padding: 18px; }

    /* Card prodotti spaziatura */
    .insta-grid { gap: 12px; }
    .insta-info { padding: 10px; }
    .insta-nome { font-size: .82rem; }
    .insta-prezzo { font-size: .95rem; }
}

@media (max-width: 480px) {
    .container { padding-left: 12px; padding-right: 12px; }
    .insta-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ap-sidebar { position: static; }
    .ck-progress { font-size: .8rem; }
    .ck-step-num { width: 26px; height: 26px; font-size: .75rem; }
    .ck-step-line { margin: 0 8px; }
}

/* ═══════════════════════════════════════════════════════════
   CART SAVED BADGE
   ═══════════════════════════════════════════════════════════ */
.cart-saved-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #eafaf1, #d4edda);
    border: 1px solid #b6e0c1;
    border-radius: 12px;
    padding: 12px 16px;
}
.cart-saved-badge > i {
    font-size: 1.5rem;
    color: #27ae60;
    flex-shrink: 0;
}
.cart-saved-badge strong { display: block; color: #1d6f47; font-size: .88rem; }
.cart-saved-badge small { color: #2d8055; font-size: .75rem; }

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB MODERNO
   ═══════════════════════════════════════════════════════════ */
.bc-nav {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    background: white;
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    border: 1px solid #f0f0f0;
    font-size: .82rem;
    max-width: 100%;
}
.bc-link {
    color: #666;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-weight: 500;
}
.bc-link:hover { background: #fdf5f3; color: #c08b8b; }
.bc-link i { font-size: .85rem; }
.bc-sep {
    color: #ccc;
    font-size: .7rem;
    margin: 0 2px;
}
.bc-current {
    color: #1a1a2e;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 576px) {
    .bc-nav { font-size: .75rem; padding: 6px 10px; }
    .bc-current { max-width: 150px; }
}

/* ═══════════════════════════════════════════════════════════
   PAGINA PRODOTTI — Banner + Filtri Sidebar
   ═══════════════════════════════════════════════════════════ */
.page-header-banner {
    background: linear-gradient(135deg, #0f0f1a 0%, #1e1e2e 50%, #2c1a1a 100%);
    border-radius: 20px;
    padding: 36px 40px;
    display: flex; align-items: center; justify-content: space-between;
    overflow: hidden; position: relative;
    color: white;
}
.page-header-banner::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 90% 50%, rgba(192,139,139,.18), transparent 60%);
    pointer-events: none;
}
.phb-content { position: relative; z-index: 1; flex: 1; }
.phb-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(192,139,139,.2);
    color: #e8c5c5;
    border: 1px solid rgba(192,139,139,.3);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .75rem; font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: .3px;
}
.phb-title {
    font-size: 2rem; font-weight: 900;
    color: white; margin-bottom: 6px;
    letter-spacing: -.5px; line-height: 1.2;
}
.phb-accent { color: #e8c5c5; }
.phb-sub { color: rgba(255,255,255,.6); font-size: .9rem; margin: 0; }
.phb-decoration {
    font-size: 7rem;
    color: rgba(192,139,139,.15);
    line-height: 1;
    position: relative; z-index: 1;
}

/* Toolbar catalogo */
.catalog-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
    background: white;
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.catalog-count { font-size: .9rem; color: #555; }
.catalog-count strong { color: #1a1a2e; font-size: 1rem; }
.catalog-sort { display: flex; align-items: center; gap: 10px; }
.catalog-sort label { font-size: .82rem; color: #777; font-weight: 600; margin: 0; }
.catalog-sort-select {
    appearance: none; -webkit-appearance: none;
    background: #f4f6f9;
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 8px 32px 8px 14px;
    font-size: .85rem; font-weight: 600;
    color: #1a1a2e; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231a1a2e' stroke-width='2' d='M3 6l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
    transition: background .2s, border-color .2s;
}
.catalog-sort-select:hover, .catalog-sort-select:focus {
    background-color: white; border-color: #c08b8b; outline: none;
}

/* Sidebar filtri */
.filters-sidebar { position: sticky; top: 100px; }
.filters-mobile-toggle {
    width: 100%; padding: 12px 16px;
    background: white; border: 1px solid #e0e3e8; border-radius: 12px;
    font-weight: 700; font-size: .9rem;
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; color: #1a1a2e;
    margin-bottom: 12px;
}
.filters-mobile-toggle .bi-chevron-down { margin-left: auto; transition: transform .2s; }
.filters-mobile-toggle.active .bi-chevron-down { transform: rotate(180deg); }
.filters-body {
    background: white;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.filter-reset {
    display: inline-flex; align-items: center; gap: 5px;
    color: #c08b8b; font-size: .8rem; font-weight: 600;
    text-decoration: none;
    margin-bottom: 14px;
    transition: color .15s;
}
.filter-reset:hover { color: #8b4a62; }

.filter-group { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed #e0e3e8; }
.filter-group:last-of-type { border-bottom: none; }
.filter-title {
    font-size: .78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px;
    color: #1a1a2e; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.filter-title i { color: #c08b8b; }

.filter-list { display: flex; flex-direction: column; gap: 6px; }
.filter-radio, .filter-check {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    cursor: pointer; font-size: .88rem; color: #555;
    transition: background .15s;
    margin: 0;
}
.filter-radio:hover, .filter-check:hover { background: #fdf5f3; color: #c08b8b; }
.filter-radio input, .filter-check input { accent-color: #c08b8b; flex-shrink: 0; }
.filter-radio small {
    margin-left: auto; color: #aaa; font-size: .72rem;
    background: #f4f6f9; padding: 1px 8px; border-radius: 10px;
}

.filter-price-range {
    display: flex; align-items: center; gap: 8px;
}
.filter-price-range .ck-input { font-size: .82rem; padding: 8px 10px; }
.filter-price-range span { color: #ccc; }
.filter-price-quick {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.fpq {
    background: #f4f6f9; border: none;
    padding: 4px 10px; border-radius: 14px;
    font-size: .72rem; font-weight: 600;
    color: #555; cursor: pointer;
    transition: background .15s, color .15s;
}
.fpq:hover { background: #fdf5f3; color: #c08b8b; }

/* Empty state */
.empty-state {
    background: white;
    border-radius: 14px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.empty-state i { font-size: 4rem; color: #ddd; }
.empty-state h3 { font-weight: 800; color: #1a1a2e; margin-top: 16px; }
.empty-state p { color: #888; }
.empty-state .ck-btn-next { display: inline-flex; }

@media (max-width: 992px) {
    .filters-body { display: none; }
    .filters-body.open { display: block; }
    .filters-sidebar { position: static; }
    .page-header-banner { padding: 24px 24px; }
    .phb-title { font-size: 1.4rem; }
    .phb-decoration { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   RACCOMANDAZIONI AVANZATE
   ═══════════════════════════════════════════════════════════ */
.reco-bundle {
    background: linear-gradient(135deg, #fff9f7, #fff0eb);
    border: 1px solid #f0d8d4;
    border-radius: 16px;
    padding: 24px;
    margin: 24px 0;
}
.reco-bundle-title {
    font-size: 1.1rem; font-weight: 800; color: #1a1a2e;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.reco-bundle-title i { color: #c08b8b; }
.reco-bundle-grid {
    display: flex; align-items: stretch; gap: 14px;
    flex-wrap: wrap;
}
.reco-bundle-item {
    background: white; border-radius: 12px;
    padding: 12px;
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 0;
    min-width: 0;          /* CRITICO: permette al figlio ellipsis di funzionare in un flex item */
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}
.reco-bundle-item img {
    width: 56px; height: 56px;
    object-fit: cover; border-radius: 8px;
    background: #f8f8f8;
    flex-shrink: 0;
}
.reco-bundle-info {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.reco-bundle-name {
    display: block;
    font-size: .85rem; font-weight: 600; color: #1a1a2e;
    line-height: 1.3;
    text-decoration: none;
    /* Multiline ellipsis: max 2 righe, poi … */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.reco-bundle-price { font-size: .9rem; font-weight: 700; color: #c08b8b; }
.reco-plus {
    font-size: 1.5rem; color: #8b4a62; font-weight: 700;
    flex-shrink: 0;
}
.reco-bundle-footer {
    margin-top: 16px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
}
.reco-bundle-total {
    font-size: .9rem; color: #555;
}
.reco-bundle-total strong { color: #1a1a2e; font-size: 1.05rem; }
.reco-saving { color: #27ae60; font-weight: 700; font-size: .85rem; margin-left: 6px; }

.reco-upgrade-card {
    background: linear-gradient(135deg, #1a1a2e, #2c1a1a);
    color: white; border-radius: 14px;
    padding: 20px; margin: 16px 0;
    display: flex; align-items: center; gap: 16px;
}
.reco-upgrade-card img { width: 70px; height: 70px; object-fit: cover; border-radius: 10px; }
.reco-upgrade-card .reco-up-info { flex: 1; }
.reco-upgrade-card small { color: #e8c5c5; font-weight: 700; font-size: .7rem; letter-spacing: .5px; }
.reco-upgrade-card strong { display: block; color: white; font-size: 1rem; margin: 2px 0; }
.reco-upgrade-card .reco-up-price { color: rgba(255,255,255,.7); font-size: .85rem; }
.reco-upgrade-card .reco-up-btn {
    background: #c08b8b; color: white;
    padding: 8px 16px; border-radius: 8px;
    text-decoration: none; font-weight: 700; font-size: .85rem;
    transition: background .2s;
    white-space: nowrap;
}
.reco-upgrade-card .reco-up-btn:hover { background: #8b4a62; color: white; }


.hero h1 {
    font-size: 2.8rem;
    font-weight: 700;
}

/* ─── CARD PRODOTTO ───────────────────────────────────────── */
.card-prodotto {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card-prodotto:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.card-prodotto .card-img-top {
    height: 220px;
    object-fit: cover;
    background: #f0f2f5;
}

.card-prodotto .badge-sconto {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent);
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 20px;
}

.prezzo {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
}

.prezzo-originale {
    text-decoration: line-through;
    color: #999;
    font-size: 0.95rem;
}

/* ─── CARRELLO ────────────────────────────────────────────── */
.carrello-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.qty-input {
    width: 70px;
    text-align: center;
}

/* ─── CHECKOUT ────────────────────────────────────────────── */
.metodo-pagamento {
    cursor: pointer;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.2s, background 0.2s;
}

.metodo-pagamento:hover,
.metodo-pagamento.selezionato {
    border-color: var(--primary);
    background: #f0f4f8;
}

.metodo-pagamento .logo-pagamento {
    font-size: 2rem;
}

/* ─── ORDINE CONFERMATO ───────────────────────────────────── */
.icona-successo {
    font-size: 5rem;
    color: #27ae60;
}

/* ─── ADMIN ───────────────────────────────────────────────── */
.sidebar-admin {
    background: var(--primary);
    min-height: 100vh;
    color: white;
}

.sidebar-admin a {
    color: rgba(255,255,255,0.8);
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 8px;
    margin: 2px 8px;
    transition: background 0.2s;
}

.sidebar-admin a:hover,
.sidebar-admin a.active {
    background: rgba(255,255,255,0.15);
    color: white;
}

/* ─── BADGE STATO ─────────────────────────────────────────── */
.badge-nuovo       { background: #3498db; }
.badge-confermato  { background: #9b59b6; }
.badge-lavorazione { background: #f39c12; }
.badge-spedito     { background: #27ae60; }
.badge-consegnato  { background: #2ecc71; }
.badge-annullato   { background: #c08b8b; }

/* ─── FOOTER CORPORATE ────────────────────────────────────── */

/* Fascia superiore */
.footer-top {
    background: #1e2330;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Brand */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}
.footer-brand i { font-size: 1.4rem; color: #3498db; }

.footer-desc {
    color: rgba(255,255,255,.5);
    font-size: .875rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* Trust pills */
.footer-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.footer-trust-pills span {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: .78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .2s, border-color .2s, transform .15s;
}
.footer-trust-pills span:hover { transform: translateY(-1px); }
.footer-trust-pills .ftp-green  { color: #4ade80; border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08); }
.footer-trust-pills .ftp-green:hover  { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.5); }
.footer-trust-pills .ftp-blue   { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.08); }
.footer-trust-pills .ftp-blue:hover   { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.5); }
.footer-trust-pills .ftp-orange { color: #fbbf24; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.08); }
.footer-trust-pills .ftp-orange:hover { background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.5); }
.footer-trust-pills svg { flex-shrink: 0; }

/* Intestazioni colonne */
.footer-heading {
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3498db;
    display: inline-block;
}

/* Link footer */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: .875rem;
    transition: color .2s, padding-left .2s;
    display: inline-block;
}
.footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}

/* Bottone cookie come link */
.footer-cookie-btn {
    background: none;
    border: none;
    padding: 0;
    color: rgba(255,255,255,.55);
    font-size: .875rem;
    cursor: pointer;
    transition: color .2s;
    display: inline-block;
}
.footer-cookie-btn:hover { color: #fff; }

/* Card pagamenti */
.footer-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-payment-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.8);
    font-size: .82rem;
    font-weight: 500;
    transition: background .2s, border-color .2s;
}
.footer-payment-card:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
}
.footer-payment-card i { font-size: 1.1rem; }

/* Corrieri */
.footer-corrieri {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-corrieri span {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 6px 14px;
    color: rgba(255,255,255,.5);
    font-size: .78rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Social icons */
.footer-social { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-social a {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.6);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    font-size: 1rem;
    transition: background .2s, color .2s, border-color .2s;
}
.footer-social a:hover {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

/* Fascia legale (D.Lgs. 70/2003 — visibilità dati impresa) */
.footer-legal {
    background: #11141a;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.04);
}
.footer-legal-text {
    color: rgba(255,255,255,.45);
    font-size: .76rem;
    line-height: 1.5;
    display: block;
}
.footer-legal-text strong { color: rgba(255,255,255,.7); font-weight: 700; }
.footer-legal-text a { color: rgba(255,255,255,.55); text-decoration: none; }
.footer-legal-text a:hover { color: rgba(255,255,255,.85); text-decoration: underline; }

/* Fascia inferiore */
.footer-bottom {
    background: #141820;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 16px 0;
}
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: rgba(255,255,255,.35);
    font-size: .8rem;
}
.footer-bottom-inner strong { color: rgba(255,255,255,.55); }

.footer-bottom-links {
    display: flex;
    gap: 20px;
}
.footer-bottom-links a {
    color: rgba(255,255,255,.35);
    text-decoration: none;
    transition: color .2s;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,.8); }

/* ─── UTILITY ─────────────────────────────────────────────── */
.btn-primary-custom {
    background: var(--primary);
    border: none;
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-primary-custom:hover {
    background: #1a252f;
    color: white;
}

.loading-spinner {
    display: none;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER SECTION
   ═══════════════════════════════════════════════════════════ */
.newsletter-section {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1f2e 50%, #1a0f2e 100%);
    border-radius: 20px;
    padding: 52px 48px;
    margin: 40px 0 24px;
    position: relative;
    overflow: hidden;
}
.newsletter-section::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(115,103,240,.2) 0%, transparent 70%);
    pointer-events: none;
}
.newsletter-inner {
    display: flex; align-items: center; gap: 48px;
    position: relative;
}
@media (max-width: 768px) { .newsletter-inner { flex-direction: column; gap: 24px; } }
.newsletter-text { flex: 1; }
.newsletter-title {
    color: white; font-size: 1.7rem; font-weight: 800;
    margin-bottom: 10px; letter-spacing: -.3px;
    line-height: 1.2;
}
.newsletter-sub { color: rgba(255,255,255,.6); font-size: .9rem; margin-bottom: 14px; }
.newsletter-perks {
    display: flex; flex-wrap: wrap; gap: 10px 20px;
}
.newsletter-perks span { color: rgba(255,255,255,.75); font-size: .82rem; display: flex; align-items: center; gap: 5px; }

.newsletter-form { flex: 0 0 360px; max-width: 360px; }
@media (max-width: 768px) { .newsletter-form { flex: 1 1 100%; max-width: 100%; } }
.newsletter-input-wrap {
    display: flex;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.newsletter-input {
    flex: 1; border: none; outline: none;
    padding: 14px 16px; font-size: .9rem;
    background: transparent;
}
.newsletter-btn {
    background: #c08b8b; color: white;
    border: none; padding: 14px 18px;
    font-weight: 700; font-size: .88rem;
    cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
    transition: background .2s;
}
.newsletter-btn:hover { background: #8b4a62; }
.newsletter-msg { font-size: .85rem; margin-top: 10px; color: rgba(255,255,255,.8); }
.newsletter-privacy { color: rgba(255,255,255,.35); font-size: .75rem; margin-top: 8px; }
.newsletter-privacy a { color: rgba(255,255,255,.55); }

/* ═══════════════════════════════════════════════════════════
   PAGINA CONFERMA ORDINE
   ═══════════════════════════════════════════════════════════ */
.conferma-wrap { max-width: 960px; margin: 0 auto; }

.conferma-hero {
    border-radius: 20px;
    padding: 48px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
}
.conferma-hero-success { background: linear-gradient(135deg, #0f2e1a, #0d3320); }
.conferma-hero-warning { background: linear-gradient(135deg, #2e1e06, #3d2600); }

.conferma-hero-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
}
.conferma-hero-success .conferma-hero-icon { background: rgba(40,199,111,.2); color: #28c76f; }
.conferma-hero-warning .conferma-hero-icon { background: rgba(255,159,67,.2); color: #ff9f43; }

.conferma-titolo { color: white; font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; }
.conferma-sub { color: rgba(255,255,255,.7); font-size: .95rem; margin-bottom: 18px; }
.conferma-sub strong { color: white; }

.conferma-numero-badge {
    display: inline-block;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.9);
    padding: 6px 20px;
    border-radius: 20px;
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.conferma-card {
    background: white;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
    border: 1px solid #f0f0f0;
}
.conferma-card-warning {
    border-color: #fce4b8;
    background: #fffbf3;
}
.conferma-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #1a1a2e;
}
.conferma-card-body { padding: 20px; }

.conferma-bonifico-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 576px) { .conferma-bonifico-grid { grid-template-columns: 1fr; } }
.conferma-lbl { display: block; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.conferma-iban { font-size: 13px; font-weight: 700; color: #1a1a2e; letter-spacing: .5px; }

.conferma-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #f8f8f8;
    gap: 12px;
}
.conferma-item:last-child { border-bottom: none; }
.conferma-item-nome { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.conferma-item-meta { font-size: 12px; color: #888; margin-top: 2px; }
.conferma-item-prezzo { font-size: 14px; font-weight: 700; white-space: nowrap; }

.conferma-totali { padding: 14px 20px; background: #fafbfc; border-top: 1px solid #f0f0f0; }
.conferma-totale-row {
    display: flex; justify-content: space-between;
    font-size: 13px; color: #555; padding: 4px 0;
}
.conferma-grand-total {
    font-size: 16px; font-weight: 800; color: #1a1a2e;
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid #e0e3e8;
}

.conferma-address { font-size: 13px; color: #555; line-height: 1.7; margin-bottom: 12px; }
.conferma-delivery-est {
    display: flex; align-items: center; gap: 8px;
    background: #f0f9ff; border: 1px solid #cfe7fd;
    border-radius: 8px; padding: 10px 14px;
    font-size: 12px; color: #0c4a6e;
}

/* Next steps */
.conferma-steps { display: flex; flex-direction: column; gap: 0; }
.conferma-step {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}
.conferma-step:last-child { border-bottom: none; }
.cs-dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f4f6f9;
    border: 2px solid #e0e3e8;
    color: #ccc;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
    transition: all .2s;
}
.cs-dot-success { background: #eafaf1; border-color: #28c76f; color: #28c76f; }
.cs-dot-warning { background: #fff1e3; border-color: #ff9f43; color: #ff9f43; }
.conferma-step.done .cs-dot { background: #eafaf1; border-color: #28c76f; color: #28c76f; }
.cs-title { font-size: 13px; font-weight: 600; color: #1a1a2e; margin-bottom: 2px; }
.cs-sub   { font-size: 12px; color: #888; }

.conferma-actions { display: flex; flex-direction: column; gap: 10px; }
.conferma-btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #c08b8b; color: white;
    padding: 13px; border-radius: 12px;
    text-decoration: none; font-weight: 700;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 14px rgba(192,139,139,.3);
}
.conferma-btn-primary:hover { background: #8b4a62; color: white; transform: translateY(-1px); }
.conferma-btn-secondary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: white; color: #555;
    padding: 12px; border-radius: 12px;
    text-decoration: none; font-weight: 600;
    border: 1.5px solid #e0e3e8;
    transition: background .15s, color .15s;
}
.conferma-btn-secondary:hover { background: #f4f6f9; color: #1a1a2e; }

@media (max-width: 576px) {
    .conferma-hero { padding: 32px 20px; }
    .conferma-titolo { font-size: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   MODAL CONFERMA UNIVERSALE
   ═══════════════════════════════════════════════════════════ */
.mc-icon-circle {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(192,139,139,.1);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    color: #c08b8b;
    font-size: 2rem;
    transition: color .2s, background .2s;
}
#modal-conferma .modal-content {
    border-radius: 20px !important;
}
#modal-conferma #mc-btn-cancel {
    background: #f4f6f9;
    color: #555;
    border: none;
}
#modal-conferma #mc-btn-cancel:hover { background: #e0e3e8; color: #1a1a2e; }

/* ═══════════════════════════════════════════════════════════
   HEADER SCROLL COMPATTO
   ═══════════════════════════════════════════════════════════ */
.sbt-header { transition: padding .25s, box-shadow .25s; }
.sbt-header.sbt-scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.sbt-header.sbt-scrolled .sbt-logo-icon { width: 32px; height: 32px; font-size: .95rem; }
.sbt-header.sbt-scrolled .sbt-logo span { font-size: 1.25rem; }

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════ */
#back-to-top {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 44px; height: 44px;
    background: #1a1a2e;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 990;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s, transform .25s, background .15s;
}
#back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#back-to-top:hover { background: #c08b8b; transform: translateY(-2px); }
@media (max-width: 768px) {
    #back-to-top { bottom: 72px; right: 12px; width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 68px;
    background: #fff;
    border-top: 1px solid #e8eaed;
    display: flex;
    z-index: 1020;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mbn-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: #777;
    font-size: .72rem;
    font-weight: 600;
    position: relative;
    transition: color .15s;
    padding: 8px 4px;
}
.mbn-item i { font-size: 1.5rem; line-height: 1; transition: transform .2s; }
.mbn-item:hover { color: #c08b8b; }
.mbn-item.active { color: #c08b8b; }
.mbn-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 30px; height: 3px;
    background: #c08b8b;
    border-radius: 0 0 3px 3px;
}
.mbn-item.active i { transform: translateY(-2px); }
.mbn-badge {
    position: absolute;
    top: 6px; right: calc(50% - 22px);
    min-width: 18px; height: 18px;
    background: #c08b8b; color: white;
    border-radius: 9px;
    font-size: .65rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
    border: 2px solid white;
}

/* ─── FIX OVERFLOW MOBILE ────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { max-width: 100%; }
img, video, iframe, svg { max-width: 100%; height: auto; }

@media (max-width: 768px) {
    body { padding-bottom: 76px; }
    .container { padding-left: 14px; padding-right: 14px; }
    /* Sposta widget WhatsApp sopra la nav mobile */
    .wa-widget { bottom: 86px !important; }
    /* Riduzioni font mobile */
    .hs-title { font-size: 1.5rem; }
    .hs-desc { font-size: .85rem; line-height: 1.45; }
    .hs-price { font-size: 1.7rem; }
    .hs-actions { flex-direction: column; }
    .hs-actions > * { width: 100%; justify-content: center; }
    /* Mega promo full width su mobile */
    .mp-box { padding: 22px 20px; }
    .mp-content h3 { font-size: 1.1rem; }
    /* Categorie 2 colonne fisso */
    .cat-card-content h3 { font-size: 1rem; }
    /* Slideshow dots più visibili */
    .hs-dots { bottom: 14px; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 480px) {
    .hero-slideshow { aspect-ratio: 3/4; min-height: 480px; }
    .hs-container { padding: 22px 18px; gap: 16px; }
    .hs-visual { width: 160px; height: 160px; }
    .hs-title { font-size: 1.25rem; }
    .hs-price { font-size: 1.5rem; }
    .product-price { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════════
   PAGINAZIONE PRODOTTI
   ═══════════════════════════════════════════════════════════ */
.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cpag-btn {
    min-width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: white; color: #555;
    border: 1.5px solid #e0e3e8;
    border-radius: 10px;
    font-size: .88rem; font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    padding: 0 12px;
}
.cpag-btn:hover { background: #fdf5f3; border-color: #c08b8b; color: #c08b8b; }
.cpag-btn.active { background: #c08b8b; border-color: #c08b8b; color: white; }
.cpag-dots { color: #aaa; font-size: .9rem; padding: 0 4px; line-height: 40px; }

/* ═══════════════════════════════════════════════════════════
   TOAST PERSONALIZZATI
   ═══════════════════════════════════════════════════════════ */
.toast-success { background: #1a2e1a; color: #a3e6a3; }
.toast-success .btn-close { filter: invert(1) brightness(.7); }
.toast-danger  { background: #2e1a1a; color: #f5a0a0; }
.toast-danger  .btn-close { filter: invert(1) brightness(.7); }
.toast-warning { background: #2e2a1a; color: #f5dfa0; }
.toast-warning .btn-close { filter: invert(1) brightness(.7); }
.toast-info    { background: #1a242e; color: #a0c8f5; }
.toast-info    .btn-close { filter: invert(1) brightness(.7); }

/* ═══════════════════════════════════════════════════════════
   ADD-TO-CART SUCCESS FLASH
   ═══════════════════════════════════════════════════════════ */
.btn-success-flash {
    background: #27ae60 !important;
    border-color: #27ae60 !important;
    color: white !important;
    transform: scale(1.04);
    transition: background .2s, transform .2s;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN SIDEBAR RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .admin-wrap { flex-direction: column !important; }
    .sidebar-admin {
        width: 100% !important;
        min-height: auto !important;
        display: flex !important;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 4px;
        padding: 10px !important;
    }
    .sidebar-admin a { padding: 8px 10px; font-size: .78rem; flex: 0 0 auto; }
    .sidebar-admin > div.border-bottom { display: none; }
    .sidebar-admin > div.text-center { width: 100%; padding: 8px !important; }
    .sidebar-admin .mt-auto { margin-top: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════
   QUICK-VIEW MODAL
   ═══════════════════════════════════════════════════════════ */
.qv-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,15,26,.65);
    backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.qv-backdrop.open { opacity: 1; pointer-events: auto; }

.qv-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.94);
    width: min(900px, 95vw);
    max-height: 90vh;
    background: white;
    border-radius: 20px;
    z-index: 10001;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
    opacity: 0;
    transition: opacity .25s, transform .25s;
    display: none;
    flex-direction: column;
}
.qv-modal.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
body.qv-open { overflow: hidden; }

.qv-close {
    position: absolute; top: 16px; right: 16px;
    z-index: 2;
    width: 36px; height: 36px;
    background: rgba(0,0,0,.06); border: none; border-radius: 50%;
    font-size: 1.4rem; color: #555;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 1;
    transition: background .15s, color .15s;
}
.qv-close:hover { background: #c08b8b; color: white; }

.qv-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-y: auto;
}
@media (max-width: 640px) { .qv-body { grid-template-columns: 1fr; } }

/* Galleria sinistra */
.qv-gallery { padding: 24px 16px 24px 24px; }
.qv-img-main {
    position: relative;
    background: #f8f8f8;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1;
    margin-bottom: 10px;
}
.qv-img-main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .2s;
}
.qv-badge-sconto {
    position: absolute; top: 12px; left: 12px;
    background: #c08b8b; color: white;
    padding: 4px 12px; border-radius: 20px;
    font-size: .78rem; font-weight: 800;
}
.qv-thumbs {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.qv-thumb {
    width: 60px; height: 60px;
    object-fit: cover; border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.qv-thumb:hover { transform: translateY(-2px); }
.qv-thumb.active { border-color: #c08b8b; }

/* Info destra */
.qv-info {
    padding: 32px 24px 24px 16px;
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto;
}
.qv-rating { font-size: .9rem; }
.qv-nome { font-size: 1.3rem; font-weight: 800; color: #1a1a2e; margin: 0; line-height: 1.25; }
.qv-prezzi { display: flex; align-items: baseline; gap: 10px; }
.qv-prezzo { font-size: 1.8rem; font-weight: 900; color: #c08b8b; }
.qv-prezzo-old { font-size: 1rem; color: #bbb; text-decoration: line-through; }
.qv-desc { font-size: .88rem; color: #666; line-height: 1.65; margin: 0; }
.qv-stock-ok  { font-size: .82rem; font-weight: 700; color: #27ae60; }
.qv-stock-low { font-size: .82rem; font-weight: 700; color: #e67e22; }
.qv-stock-out { font-size: .82rem; font-weight: 700; color: #c08b8b; }

.qv-qty-row {
    display: flex; gap: 10px; align-items: stretch;
}
.qv-qty {
    display: flex; align-items: center;
    border: 2px solid #e0e3e8; border-radius: 10px; overflow: hidden;
}
.qv-qty button {
    background: white; border: none;
    width: 40px; height: 46px;
    font-size: 1.2rem; font-weight: 700;
    cursor: pointer; color: #1a1a2e;
    transition: background .15s;
}
.qv-qty button:hover { background: #f4f6f9; }
.qv-qty input {
    width: 48px; border: none; text-align: center;
    font-size: 1rem; font-weight: 700; outline: none;
    -moz-appearance: textfield;
}
.qv-qty input::-webkit-outer-spin-button,
.qv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.qv-btn-cart {
    flex: 1;
    background: #c08b8b; color: white;
    border: none; border-radius: 10px;
    padding: 13px 20px;
    font-size: .95rem; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 16px rgba(192,139,139,.3);
}
.qv-btn-cart:hover { background: #8b4a62; transform: translateY(-1px); }
.qv-btn-cart:disabled { background: #aaa; transform: none; box-shadow: none; }

.qv-link-full {
    display: flex; align-items: center; gap: 6px;
    color: #c08b8b; font-size: .85rem; font-weight: 600;
    text-decoration: none;
    margin-top: auto;
}
.qv-link-full:hover { text-decoration: underline; color: #8b4a62; }

/* Skeleton loader */
.qv-loading { padding: 24px; }
.qv-skeleton { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.skel-img { background: #f0f0f0; border-radius: 14px; aspect-ratio: 1; }
.skel-info { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.skel-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 6px; height: 14px;
}
.skel-w40 { width: 40%; } .skel-w60 { width: 60%; } .skel-w80 { width: 80%; } .skel-w90 { width: 90%; } .skel-w100 { width: 100%; }
.skel-h20 { height: 20px; } .skel-h28 { height: 28px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ═══════════════════════════════════════════════════════════
   MINI-CART FLYOUT
   ═══════════════════════════════════════════════════════════ */
.mc-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,15,26,.5);
    backdrop-filter: blur(3px);
    z-index: 9900;
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
}
.mc-backdrop.open { opacity: 1; pointer-events: auto; }

.mc-flyout {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(400px, 100vw);
    background: white;
    z-index: 9901;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 40px rgba(0,0,0,.15);
}
.mc-flyout.open { transform: translateX(0); }
body.mc-open { overflow: hidden; }

.mc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.mc-title {
    margin: 0; font-size: 1rem; font-weight: 800; color: #1a1a2e;
    display: flex; align-items: center; gap: 8px;
}
.mc-count-badge {
    background: #c08b8b; color: white;
    font-size: .7rem; font-weight: 800;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px;
}
.mc-close {
    background: #f4f6f9; border: none; border-radius: 50%;
    width: 32px; height: 32px;
    font-size: 1.2rem; color: #555;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, color .15s;
}
.mc-close:hover { background: #c08b8b; color: white; }

/* Shipping bar */
.mc-shipping-bar {
    padding: 10px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.mc-sb-text { font-size: .78rem; color: #555; margin-bottom: 6px; }
.mc-sb-text strong { color: #1a1a2e; }
.mc-sb-track { height: 4px; background: #e0e3e8; border-radius: 2px; overflow: hidden; }
.mc-sb-fill { height: 100%; background: #c08b8b; border-radius: 2px; transition: width .5s ease; }

/* Items */
.mc-items { flex: 1; overflow-y: auto; padding: 12px 0; }
.mc-items::-webkit-scrollbar { width: 4px; }
.mc-items::-webkit-scrollbar-thumb { background: #e0e3e8; border-radius: 2px; }

.mc-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 10px; color: #888; font-size: .9rem; padding: 40px;
    text-align: center;
}
.mc-empty-link { color: #c08b8b; font-weight: 600; text-decoration: none; font-size: .85rem; }
.mc-empty-link:hover { text-decoration: underline; }

.mc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f8f8f8;
    transition: background .15s;
}
.mc-item:hover { background: #fafafa; }
.mc-item-img {
    width: 56px; height: 56px;
    object-fit: cover; border-radius: 8px;
    background: #f8f8f8; border: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.mc-item-info { flex: 1; min-width: 0; }
.mc-item-nome {
    font-size: .85rem; font-weight: 600; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 3px;
}
.mc-item-var {
    display: inline-block;
    font-size: .72rem; font-weight: 600; color: #c08b8b;
    background: #f7eded; border-radius: 5px;
    padding: 1px 7px; margin-bottom: 3px;
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-item-meta { font-size: .75rem; color: #888; }
.mc-item-del {
    width: 28px; height: 28px;
    background: none; border: 1px solid #e0e3e8; border-radius: 6px;
    color: #aaa; cursor: pointer; font-size: .75rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.mc-item-del:hover { background: #fff5f5; border-color: #c08b8b; color: #c08b8b; }

/* Footer */
.mc-footer {
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
    flex-shrink: 0;
}
.mc-totals { margin-bottom: 14px; }
.mc-tot-row {
    display: flex; justify-content: space-between;
    font-size: .88rem; color: #555; padding: 3px 0;
}
.mc-grand {
    font-size: 1.05rem; font-weight: 800; color: #1a1a2e;
    padding-top: 8px; margin-top: 6px;
    border-top: 1px solid #e0e3e8;
}
.mc-btn-checkout {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #c08b8b; color: white;
    padding: 13px; border-radius: 12px; margin-bottom: 8px;
    text-decoration: none; font-weight: 700; font-size: .95rem;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 14px rgba(192,139,139,.3);
}
.mc-btn-checkout:hover { background: #8b4a62; color: white; transform: translateY(-1px); }
.mc-btn-cart {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: white; color: #555;
    padding: 10px; border-radius: 10px;
    text-decoration: none; font-size: .85rem; font-weight: 600;
    border: 1.5px solid #e0e3e8;
    transition: background .15s, color .15s;
}
.mc-btn-cart:hover { background: #f4f6f9; color: #1a1a2e; }

/* ═══════════════════════════════════════════════════════════
   ADMIN — BULK ACTIONS BAR
   ═══════════════════════════════════════════════════════════ */
.bulk-bar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #1a1a2e;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    animation: bulkSlideDown .2s ease;
}
@keyframes bulkSlideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.bulk-count { color: white; font-size: .85rem; font-weight: 700; margin-right: 4px; }
.bulk-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 8px; border: none;
    font-size: .8rem; font-weight: 700; cursor: pointer;
    transition: background .15s, transform .1s;
}
.bulk-btn:active { transform: scale(.97); }
.bulk-btn-primary  { background: #7367f0; color: white; }
.bulk-btn-primary:hover  { background: #5e50ee; }
.bulk-btn-secondary { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.bulk-btn-secondary:hover { background: rgba(255,255,255,.2); }
.bulk-btn-danger   { background: #ea5455; color: white; }
.bulk-btn-danger:hover   { background: #d63031; }
.bulk-btn-ghost    { background: none; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.15); margin-left: auto; }
.bulk-btn-ghost:hover    { color: white; border-color: rgba(255,255,255,.4); }
.row-selected td   { background: rgba(115,103,240,.05) !important; }

/* ═══════════════════════════════════════════════════════════
   STICKY PRODUCT SIDEBAR (pagina prodotto desktop)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .product-sticky-col {
        position: sticky;
        top: 90px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY GRID V2 (homepage)
   ═══════════════════════════════════════════════════════════ */
.cat-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.cat-card-v2 {
    background: white;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    display: flex; flex-direction: column;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
    border: 1px solid #f0f0f0;
}
.cat-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
}

/* Background colorato con gradient + pattern + icon */
.cat-card-bg {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

/* Foto opzionale: copre il gradient */
.cat-card-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 2;
    transition: transform .5s, opacity .3s;
}
.cat-card-v2:hover .cat-card-photo { transform: scale(1.08); }

/* Pattern decorativo (cerchi sovrapposti) */
.cat-card-pattern {
    position: absolute; inset: 0;
    z-index: 1;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.15) 0%, transparent 25%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,.1) 0%, transparent 35%),
        radial-gradient(circle at 60% 90%, rgba(255,255,255,.12) 0%, transparent 30%);
}

/* Icona grande al centro */
.cat-card-icon {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.95);
    font-size: 3.4rem;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.2));
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.cat-card-v2:hover .cat-card-icon { transform: scale(1.15) rotate(-5deg); }

/* Body inferiore */
.cat-card-body-v2 {
    padding: 14px 16px;
    background: white;
}
.cat-card-name-v2 {
    font-size: .95rem; font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 4px;
    letter-spacing: -.2px;
}
.cat-card-count-v2 {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .78rem; color: #999;
    font-weight: 600;
}
.cat-card-count-v2 i {
    color: #c08b8b;
    transition: transform .25s;
}
.cat-card-v2:hover .cat-card-count-v2 i { transform: translateX(4px); }

/* ─── MOBILE: slider orizzontale invece di griglia ─────── */
@media (max-width: 768px) {
    .cat-grid-v2 {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 4px 4px 14px 4px;
        scroll-padding-left: 4px;
        scroll-behavior: smooth;
        /* Fondamentale: senza min-width o esplicita larghezza il flex potrebbe non scrollare */
        width: 100%;
        max-width: 100%;
    }
    .cat-grid-v2::-webkit-scrollbar { display: none; height: 0; width: 0; }

    .cat-card-v2 {
        flex: 0 0 150px;
        width: 150px;
        min-width: 150px;
        max-width: 150px;
        scroll-snap-align: start;
    }
    .cat-card-v2:hover { transform: none; }  /* disabilita lift su touch */

    .cat-card-icon { font-size: 2.4rem; }
    .cat-card-name-v2 { font-size: .82rem; }
    .cat-card-count-v2 { font-size: .72rem; }
    .cat-card-body-v2 { padding: 10px 12px; }

    /* Indicatore visivo "swipe per scorrere" — fade gradient sul lato destro */
    .cat-grid-wrapper { position: relative; }
    .cat-grid-wrapper::after {
        content: '';
        position: absolute;
        top: 0; bottom: 14px; right: 0;
        width: 28px;
        background: linear-gradient(90deg, transparent, var(--light-bg, #f4f6f9));
        pointer-events: none;
        z-index: 2;
    }
}

/* Su schermi molto piccoli, card un filo più strette per vederne 2.5 */
@media (max-width: 380px) {
    .cat-card-v2 { flex: 0 0 135px; width: 135px; min-width: 135px; max-width: 135px; }
}

/* ─── LEGACY (mantenuto per compatibilità) ───────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.cat-card { background: white; border-radius: 16px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; border: 1px solid #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.cat-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.cat-card-body { padding: 12px 14px; }
.cat-card-name { font-size: .9rem; font-weight: 700; color: #1a1a2e; margin-bottom: 2px; }
.cat-card-count { font-size: .75rem; color: #888; }

/* ═══════════════════════════════════════════════════════════
   COUNTER ANIMATO (per statistiche hero)
   ═══════════════════════════════════════════════════════════ */
[data-count] { display: inline-block; }

/* ═══════════════════════════════════════════════════════════
   ADMIN SKELETON LOADER (dashboard)
   ═══════════════════════════════════════════════════════════ */
.ad-skel {
    background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg-hover) 50%, var(--bg-soft) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--r-md);
}
.ad-kpi .ad-skel-val { height: 28px; width: 70%; margin-bottom: 8px; }
.ad-kpi .ad-skel-lbl { height: 12px; width: 50%; }

/* ═══════════════════════════════════════════════════════════
   AREA PERSONALE V2 (ap2-*)
   ═══════════════════════════════════════════════════════════ */
.ap2-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    margin: 20px 0;
}
@media (max-width: 992px) { .ap2-layout { grid-template-columns: 1fr; } }

/* ── SIDEBAR ────────────────────────────────────────────── */
.ap2-sidebar { display: flex; flex-direction: column; gap: 18px; }

.ap2-profile-card {
    background: linear-gradient(135deg, #1a1a2e, #2c1a3e);
    color: white;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(26,26,46,.15);
}
.ap2-avatar-big {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, #c08b8b, #8b4a62);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    color: white;
    font-size: 1.8rem; font-weight: 800;
    box-shadow: 0 4px 14px rgba(192,139,139,.35);
}
.ap2-profile-name { color: white; font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.ap2-profile-email { color: rgba(255,255,255,.55); font-size: .78rem; margin-bottom: 16px; word-break: break-all; }

.ap2-stats {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.ap2-stat { flex: 1; }
.ap2-stat strong { display: block; color: white; font-size: 1rem; font-weight: 800; }
.ap2-stat span   { color: rgba(255,255,255,.5); font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; }
.ap2-stat-sep { width: 1px; height: 28px; background: rgba(255,255,255,.1); }

.ap2-nav {
    background: white;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    display: flex; flex-direction: column; gap: 3px;
}
.ap2-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    color: #555; text-decoration: none;
    font-size: .9rem; font-weight: 500;
    border-radius: 10px;
    transition: background .15s, color .15s;
    border: none; background: transparent; cursor: pointer;
    width: 100%; text-align: left;
}
.ap2-nav-item:hover { background: #f4f6f9; color: #1a1a2e; }
.ap2-nav-item.active {
    background: linear-gradient(90deg, #fdf5f3, #fff);
    color: #c08b8b; font-weight: 700;
    box-shadow: inset 3px 0 0 #c08b8b;
}
.ap2-nav-item svg { flex-shrink: 0; opacity: .85; }
.ap2-badge {
    margin-left: auto;
    background: #c08b8b; color: white;
    font-size: .68rem; font-weight: 800;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px;
}
.ap2-nav-sep { height: 1px; background: #f0f0f0; margin: 6px 0; }
.ap2-logout { color: #c08b8b; }
.ap2-logout:hover { background: #fff5f5; color: #8b4a62; }

/* ── CONTENT ────────────────────────────────────────────── */
.ap2-content { min-width: 0; }

.ap2-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: .88rem; font-weight: 600;
    animation: ap2AlertIn .3s ease;
}
@keyframes ap2AlertIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.ap2-alert-success { background: #eafaf1; color: #27ae60; border: 1px solid #c3e6cb; }

.ap2-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    border: 1px solid #f0f0f0;
}
.ap2-card-head { padding: 20px 24px; border-bottom: 1px solid #f0f0f0; }
.ap2-card-head h5 { font-weight: 800; font-size: 1.1rem; margin: 0; color: #1a1a2e; }
.ap2-card-sub    { font-size: .8rem; color: #888; margin: 4px 0 0; }
.ap2-card-body   { padding: 24px; }

/* Forms */
.ap2-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 576px) { .ap2-form-grid { grid-template-columns: 1fr; } }
.ap2-span-2 { grid-column: span 2; }
@media (max-width: 576px) { .ap2-span-2 { grid-column: span 1; } }
.ap2-span-half { grid-column: span 1; }

.ap2-form-field { display: flex; flex-direction: column; gap: 6px; }
.ap2-form-field label {
    font-size: .78rem; font-weight: 700; color: #555;
}
.ap2-input {
    padding: 11px 14px;
    border: 1.5px solid #e0e3e8;
    border-radius: 10px;
    font-size: .9rem;
    background: #fafbfc;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: inherit;
}
.ap2-input:focus {
    border-color: #c08b8b;
    background: white;
    box-shadow: 0 0 0 4px rgba(192,139,139,.08);
}

.ap2-form-actions {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
    display: flex; justify-content: flex-end; gap: 10px;
}
.ap2-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: #1a1a2e; color: white;
    border: none; border-radius: 10px;
    padding: 11px 22px;
    font-size: .88rem; font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
    text-decoration: none;
}
.ap2-btn-primary:hover { background: #2c3e50; color: white; transform: translateY(-1px); }
.ap2-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.ap2-pass-strength { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }

/* Empty state */
.ap2-empty {
    text-align: center; padding: 56px 24px;
}
.ap2-empty svg { margin-bottom: 14px; color: #ccc; }
.ap2-empty h6 { font-weight: 700; color: #555; margin-bottom: 6px; font-size: 1rem; }
.ap2-empty p  { color: #888; font-size: .88rem; margin-bottom: 18px; }

/* ═══════════════════════════════════════════════════════════
   ORDERS LIST — redesign con thumbnail, stripe colore stato, hover
   ═══════════════════════════════════════════════════════════ */
.ap2-orders-list { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }

@keyframes ap2OrderIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ap2StatoPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stato-color) 45%, transparent); }
    50%      { box-shadow: 0 0 0 5px transparent; }
}
@keyframes ap2ThumbShine {
    0%   { transform: translateX(-120%) skewX(-18deg); }
    100% { transform: translateX(220%) skewX(-18deg); }
}

.ap2-order-card {
    position: relative;
    border: 1px solid #ececef;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    animation: ap2OrderIn .45s cubic-bezier(.2,.7,.2,1) both;
}
.ap2-order-card:nth-child(2) { animation-delay: .06s; }
.ap2-order-card:nth-child(3) { animation-delay: .12s; }
.ap2-order-card:nth-child(4) { animation-delay: .18s; }
.ap2-order-card:nth-child(5) { animation-delay: .24s; }

.ap2-order-card:hover {
    border-color: color-mix(in srgb, var(--stato-color, #c08b8b) 40%, #e6e6ea);
    box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--stato-color, #c08b8b) 22%, rgba(20,20,40,.10));
    transform: translateY(-2px);
}

/* Striscia colorata sinistra che indica lo stato */
.ap2-order-stato-stripe {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--stato-color, #c08b8b) 0%,
        color-mix(in srgb, var(--stato-color, #c08b8b) 60%, white) 100%);
}

.ap2-order-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.1fr 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px 22px 18px 26px;
    background: linear-gradient(180deg, #fbfbfd 0%, #f7f7fa 100%);
    border-bottom: 1px solid #f0f0f3;
}
@media (max-width: 768px) {
    .ap2-order-top { grid-template-columns: 1fr 1fr; row-gap: 14px; padding-left: 22px; }
    .ap2-order-top > :last-child { grid-column: span 2; }
}
.ap2-order-label { display: block; font-size: .68rem; color: #999; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; font-weight: 700; }
.ap2-mono { font-family: 'JetBrains Mono', monospace; font-size: .82rem; color: #1a1a2e; font-weight: 700; letter-spacing: .2px; }

.ap2-order-meta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .85rem; color: #5a5a6a;
}
.ap2-order-meta svg { color: var(--stato-color, #c08b8b); opacity: .85; }

.ap2-stato-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: color-mix(in srgb, var(--stato-color) 14%, white);
    color: color-mix(in srgb, var(--stato-color) 80%, #2a1a1a);
    padding: 5px 13px 5px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--stato-color) 25%, white);
    font-size: .75rem; font-weight: 700;
    letter-spacing: .2px;
}
.ap2-stato-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--stato-color);
    animation: ap2StatoPulse 2.2s ease-in-out infinite;
}

.ap2-order-total {
    font-weight: 800;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #c08b8b 0%, #8b5e5e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ap2-btn-track {
    display: inline-flex; align-items: center; gap: 6px;
    background: white;
    color: #444;
    border: 1.5px solid #e0e3e8;
    padding: 8px 15px;
    border-radius: 10px;
    text-decoration: none;
    font-size: .78rem; font-weight: 600;
    transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.ap2-btn-track:hover {
    background: #1a1a2e; color: white; border-color: #1a1a2e;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px rgba(26,26,46,.35);
}
.ap2-btn-track:hover svg { transform: rotate(-12deg); }
.ap2-btn-track svg { transition: transform .25s; }

/* ─── Items con thumbnail ─────────────────────── */
.ap2-order-items {
    padding: 8px 22px 14px 26px;
    background: white;
    display: flex; flex-direction: column; gap: 2px;
}
.ap2-order-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center; gap: 14px;
    padding: 10px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background .2s, transform .2s;
}
.ap2-order-item:hover {
    background: #faf6f5;
    transform: translateX(3px);
}
.ap2-order-item:hover .ap2-order-item-thumb::after { animation: ap2ThumbShine .9s ease forwards; }
.ap2-order-item:hover .ap2-order-item-nome { color: #c08b8b; }

.ap2-order-item-thumb {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5eeed 0%, #ede4e2 100%);
    border: 1px solid #f0e6e4;
    flex-shrink: 0;
}
.ap2-order-item-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.ap2-order-item:hover .ap2-order-item-thumb img { transform: scale(1.08); }
.ap2-order-item-thumb::after {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
}

.ap2-order-item-info {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
}
.ap2-order-item-nome {
    color: #1a1a2e;
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .2s;
}
.ap2-order-item-var {
    display: inline-block;
    align-self: flex-start;
    color: #c08b8b;
    background: #f7eded;
    border-radius: 6px;
    padding: 1px 8px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2px;
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap2-order-item-qty {
    color: #8a8a98;
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .2px;
}
.ap2-order-item-price {
    font-weight: 800;
    font-size: .95rem;
    color: #1a1a2e;
    min-width: 80px; text-align: right;
}

.ap2-order-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px;
    padding: 8px 12px;
    font-size: .8rem;
    color: #8b5e5e;
    background: #faf3f2;
    border-radius: 8px;
    font-weight: 600;
    align-self: flex-start;
}
.ap2-order-more svg { opacity: .8; }

/* ═══════════════════════════════════════════════════════════
   CARRELLO V2
   ═══════════════════════════════════════════════════════════ */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 992px) { .cart-layout { grid-template-columns: 1fr; } }

/* ── BARRA SPEDIZIONE GRATUITA ──────────────────────────── */
.cart-free-bar {
    background: linear-gradient(135deg, #fff5e6, #ffe9c8);
    border: 1px solid #fce4b8;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.cart-free-bar.cart-free-ok {
    background: linear-gradient(135deg, #eafaf1, #d4edda);
    border-color: #b6e0c1;
    display: flex; align-items: center; gap: 10px;
    color: #1d6f47;
    font-size: .9rem;
}
.cart-free-ok i { font-size: 1.2rem; color: #27ae60; }
.cfb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #92400e; font-size: .88rem; }
.cfb-head i { font-size: 1.2rem; }
.cfb-head strong { color: #1a1a2e; }
.cfb-track { height: 6px; background: rgba(255,255,255,.6); border-radius: 3px; overflow: hidden; }
.cfb-fill {
    height: 100%;
    background: linear-gradient(90deg, #f39c12, #e67e22);
    border-radius: 3px;
    transition: width .8s ease;
}

/* ── ITEMS HEAD ─────────────────────────────────────────── */
.cart-items-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.cart-items-title {
    font-size: 1.4rem; font-weight: 800; color: #1a1a2e;
    display: flex; align-items: center; gap: 10px;
    margin: 0;
}
.cart-count-pill {
    background: #c08b8b; color: white;
    font-size: .78rem; font-weight: 800;
    padding: 3px 12px;
    border-radius: 14px;
}
.cart-continue-link {
    color: #555;
    text-decoration: none;
    font-size: .85rem; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    transition: color .15s;
}
.cart-continue-link:hover { color: #c08b8b; }

/* ── ITEMS LIST ─────────────────────────────────────────── */
.cart-items-list {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    overflow: hidden;
}
.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f5f5f5;
    transition: background .15s;
}
.cart-item:hover { background: #fafbfc; }
.cart-item:last-child { border-bottom: none; }
@media (max-width: 576px) {
    .cart-item { grid-template-columns: 80px 1fr; }
    .cart-item-subtotal { grid-column: 2; text-align: left; }
}

.cart-item-img-wrap {
    width: 100px; height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f8f8;
    border: 1px solid #f0f0f0;
}
.cart-item-img { width: 100%; height: 100%; object-fit: cover; }

.cart-item-info { min-width: 0; }
.cart-item-nome {
    font-size: .98rem; font-weight: 700; color: #1a1a2e;
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-item-price-unit { font-size: .78rem; color: #888; margin-bottom: 10px; }

.cart-item-controls {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
}
.cart-qty {
    display: flex; align-items: center;
    border: 1.5px solid #e0e3e8;
    border-radius: 10px;
    overflow: hidden;
    background: white;
}
.cart-qty-btn {
    background: transparent; border: none;
    width: 36px; height: 38px;
    font-size: 1.1rem; font-weight: 700; color: #1a1a2e;
    cursor: pointer;
    transition: background .15s;
}
.cart-qty-btn:hover { background: #fdf5f3; color: #c08b8b; }
.cart-qty-input {
    width: 42px; height: 38px; border: none;
    text-align: center; font-size: .92rem; font-weight: 700;
    outline: none; background: transparent;
    -moz-appearance: textfield;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item-del {
    background: transparent; border: none;
    color: #aaa; cursor: pointer;
    font-size: .82rem; font-weight: 600;
    display: flex; align-items: center; gap: 5px;
    padding: 6px 10px; border-radius: 8px;
    transition: background .15s, color .15s;
}
.cart-item-del:hover { background: #fff5f5; color: #c08b8b; }

.cart-item-subtotal {
    font-size: 1.1rem; font-weight: 800;
    color: #1a1a2e;
    text-align: right;
    min-width: 90px;
}

/* ── SUMMARY ────────────────────────────────────────────── */
.cart-summary-col {
    position: sticky;
    top: 90px;
}
@media (max-width: 992px) { .cart-summary-col { position: static; } }

.cart-summary {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    border: 1px solid #f0f0f0;
}

.cart-saved-badge {
    display: flex; align-items: flex-start; gap: 12px;
    background: linear-gradient(135deg, #eafaf1, #d4edda);
    border: 1px solid #b6e0c1;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.cart-saved-badge i { font-size: 1.4rem; flex-shrink: 0; }
.cart-saved-badge strong { display: block; color: #1d6f47; font-size: .85rem; }
.cart-saved-badge small  { color: #2d8055; font-size: .75rem; }

/* Mini badge salvato (versione compatta) */
.cart-saved-mini {
    display: flex; align-items: center; gap: 8px;
    background: #f5fbf6;
    border-left: 3px solid #27ae60;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: .76rem;
    color: #1d6f47;
    margin-bottom: 18px;
    font-weight: 600;
}
.cart-saved-mini i { color: #27ae60; font-size: 1rem; }

/* Consegna stimata nel summary con animazione camion */
.cart-delivery-est {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #cfe7fd;
    border-radius: 12px;
    padding: 14px 16px 12px;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
}

/* Track animato del camion */
.cde-truck-anim {
    position: relative;
    height: 38px;
    margin-bottom: 6px;
    overflow: hidden;
}

/* Strada con linee tratteggiate animate */
.cde-road {
    position: absolute;
    bottom: 2px; left: 0; right: 0;
    height: 2px;
    background-image: linear-gradient(90deg, #0284c7 50%, transparent 50%);
    background-size: 16px 2px;
    background-repeat: repeat-x;
    animation: cdeRoadScroll 1.2s linear infinite;
    opacity: .6;
}
@keyframes cdeRoadScroll {
    from { background-position-x: 0; }
    to   { background-position-x: -16px; }
}

/* Pin di destinazione fisso a destra */
.cde-pin {
    position: absolute;
    right: 6px; bottom: 4px;
    color: #ea5455;
    animation: cdePinBob 1.4s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(234,84,85,.3));
}
@keyframes cdePinBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* Camion che attraversa */
.cde-truck {
    position: absolute;
    bottom: 2px; left: 0;
    color: #0284c7;
    animation: cdeTruckMove 6s ease-in-out infinite;
}
@keyframes cdeTruckMove {
    0%   { transform: translateX(-40px); }
    85%  { transform: translateX(calc(100% - 40px)); }
    90%  { transform: translateX(calc(100% - 40px)); }
    100% { transform: translateX(calc(100% - 40px)); opacity: 0; }
}

/* Fumetti */
.cde-smoke {
    position: absolute;
    width: 5px; height: 5px;
    background: rgba(150,150,160,.4);
    border-radius: 50%;
    top: 4px; left: -4px;
    opacity: 0;
}
.cde-smoke-1 { animation: cdeSmoke 1.2s ease-out infinite; }
.cde-smoke-2 { animation: cdeSmoke 1.2s ease-out .4s infinite; }
.cde-smoke-3 { animation: cdeSmoke 1.2s ease-out .8s infinite; }
@keyframes cdeSmoke {
    0%   { opacity: .6; transform: translate(0,0) scale(.4); }
    100% { opacity: 0;  transform: translate(-14px,-10px) scale(1.4); }
}

.cde-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding-top: 8px;
    border-top: 1px dashed rgba(2,132,199,.2);
}
.cde-label { font-size: .68rem; color: #0c4a6e; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.cde-date  { font-size: .88rem; color: #1a1a2e; font-weight: 700; margin-top: 1px; }

/* Vecchio .cde-icon non più usato (compat) */
.cde-icon { display: none; }

/* ─── PILLOLE VARIANTI NEL CARRELLO ──────────────────────── */
.cart-item-varianti {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 6px;
}
.cart-var-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fdf5f3;
    color: #8b4a62;
    border: 1px solid #f0d8d4;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2px;
}

/* CTA bottone checkout — con totale dentro */
.cart-checkout-btn {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 12px;
}
.cart-checkout-label { display: flex; align-items: center; gap: 8px; }
.cart-checkout-total {
    background: rgba(255,255,255,.18);
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: .95rem;
}

/* IVA note */
.cart-iva-note { display: block; font-size: .72rem; color: #aaa; margin-top: 6px; text-align: right; }

/* Coupon chip rimovibile */
.coupon-applied {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: linear-gradient(135deg, #eafaf1, #d4edda);
    border: 1px solid #b6e0c1;
    color: #1d6f47;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .82rem;
    animation: ap2AlertIn .25s ease;
}
.coupon-applied i { color: #27ae60; margin-right: 4px; }
.coupon-applied strong { font-family: monospace; letter-spacing: .5px; }
.coupon-applied button {
    background: rgba(0,0,0,.06); color: #1d6f47;
    border: none; border-radius: 50%;
    width: 22px; height: 22px;
    font-size: 1rem; line-height: 1;
    cursor: pointer; padding: 0;
    transition: background .15s, color .15s;
}
.coupon-applied button:hover { background: #c08b8b; color: white; }

/* Link nome prodotto */
.cart-item-nome-link { text-decoration: none; color: inherit; }
.cart-item-nome-link:hover .cart-item-nome { color: #c08b8b; }
.cart-item-img-wrap:hover .cart-item-img { transform: scale(1.05); }
.cart-item-img { transition: transform .3s ease; }
.cart-item-price-unit span { color: #aaa; font-size: .72rem; }

/* Flash animazione subtotale (qty change) */
.cart-flash {
    animation: cartFlash .6s ease;
    color: #27ae60 !important;
}
@keyframes cartFlash {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Row updating (disabled durante AJAX) */
.cart-row-updating { opacity: .55; pointer-events: none; transition: opacity .2s; }

/* Cart count pill v2 (più compatta) */
.cart-count-pill {
    background: #f4f6f9;
    color: #555;
    font-size: .72rem; font-weight: 700;
    padding: 4px 12px;
    border-radius: 14px;
    margin-left: 6px;
}

/* Link su immagine suggerito */
.cart-suggest-img-link { display: block; }
.cart-suggest-img-link img { transition: transform .3s; }
.cart-suggest-img-link:hover img { transform: scale(1.06); }

/* ─── STICKY MOBILE CTA ─────────────────────────────────── */
.cart-mobile-cta {
    position: fixed;
    bottom: 60px; /* sopra la bottom nav mobile */
    left: 0; right: 0;
    background: white;
    border-top: 1px solid #e0e3e8;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    padding: 12px 16px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 1010;
}
@media (max-width: 991px) {
    .cart-mobile-cta { display: flex; }
    body { padding-bottom: 130px; }
}
.cmc-info { display: flex; flex-direction: column; }
.cmc-label { font-size: .7rem; color: #888; text-transform: uppercase; letter-spacing: .3px; }
.cmc-total { font-size: 1.2rem; color: #1a1a2e; font-weight: 800; }
.cmc-btn {
    display: flex; align-items: center; gap: 6px;
    background: #c08b8b; color: white;
    padding: 12px 22px; border-radius: 10px;
    text-decoration: none; font-weight: 700; font-size: .9rem;
    box-shadow: 0 4px 14px rgba(192,139,139,.35);
    transition: background .2s;
}
.cmc-btn:hover { background: #8b4a62; color: white; }

.cart-summary-title {
    font-size: 1.05rem; font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 16px;
}

.cart-coupon { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed #e0e3e8; }
.cart-coupon-wrap { display: flex; gap: 8px; }
.cart-coupon-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #e0e3e8;
    border-radius: 10px;
    font-size: .85rem;
    background: #fafbfc;
    outline: none;
    transition: border-color .2s, background .2s;
    font-family: monospace; letter-spacing: 1px;
}
.cart-coupon-input:focus { border-color: #1a1a2e; background: white; }
.cart-coupon-btn {
    background: #1a1a2e; color: white;
    border: none; border-radius: 10px;
    padding: 10px 18px;
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.cart-coupon-btn:hover { background: #0f0f1a; }
.cart-coupon-msg { font-size: .78rem; margin-top: 8px; }

.cart-totals { margin-bottom: 18px; }
.cart-total-row {
    display: flex; justify-content: space-between;
    font-size: .9rem; color: #555;
    padding: 5px 0;
}
.cart-grand-total {
    font-size: 1.35rem; font-weight: 800; color: #1a1a2e;
    margin-top: 10px; padding-top: 12px;
    border-top: 2px solid #1a1a2e;
}
.cart-free-label { color: #27ae60; font-weight: 700; }

.cart-checkout-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    background: #c08b8b; color: white;
    padding: 15px; border-radius: 12px;
    text-decoration: none; font-weight: 800; font-size: 1rem;
    transition: background .2s, transform .15s;
    box-shadow: 0 6px 20px rgba(192,139,139,.35);
    margin-bottom: 14px;
}
.cart-checkout-btn:hover { background: #8b4a62; color: white; transform: translateY(-1px); }

.cart-pay-methods { font-size: .75rem; color: #888; margin-bottom: 14px; }
.cart-pay-methods > span { display: block; margin-bottom: 6px; }
.cart-pay-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.cpay {
    display: inline-flex; align-items: center; gap: 4px;
    background: #f4f6f9;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: .72rem; font-weight: 600;
    color: #555;
}

.cart-trust {
    border-top: 1px dashed #e0e3e8;
    padding-top: 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.cart-trust-item {
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; color: #555;
}

/* ── SUGGERITI ──────────────────────────────────────────── */
.cart-suggest-title {
    font-size: 1rem; font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 6px;
}
.cart-suggest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.cart-suggest-item {
    display: flex; align-items: center; gap: 12px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 10px 12px;
    transition: border-color .15s, transform .15s;
}
.cart-suggest-item:hover { border-color: #e0e3e8; transform: translateY(-2px); }
.cart-suggest-item img {
    width: 50px; height: 50px;
    object-fit: cover; border-radius: 8px;
    background: #f8f8f8;
}
.cart-suggest-info { flex: 1; min-width: 0; }
.cart-suggest-nome {
    font-size: .8rem; font-weight: 600; color: #1a1a2e;
    text-decoration: none;
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 2px;
}
.cart-suggest-nome:hover { color: #c08b8b; }
.cart-suggest-price { font-size: .85rem; font-weight: 700; color: #c08b8b; }
.cart-suggest-old { font-size: .72rem; color: #aaa; text-decoration: line-through; margin-left: 4px; }
.cart-suggest-add {
    width: 32px; height: 32px;
    background: #1a1a2e; color: white;
    border: none; border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.cart-suggest-add:hover { background: #c08b8b; transform: scale(1.08); }

/* Empty state carrello */
.cart-empty-state {
    background: white;
    border-radius: 20px;
    padding: 64px 32px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.ces-icon {
    width: 120px; height: 120px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #fdf5f3, #ffe9e3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #c08b8b; font-size: 3.5rem;
}
.ces-title { font-size: 1.6rem; font-weight: 800; color: #1a1a2e; margin-bottom: 8px; }
.ces-sub { color: #888; font-size: .95rem; margin-bottom: 24px; }
.ces-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #c08b8b; color: white;
    padding: 14px 28px; border-radius: 12px;
    text-decoration: none; font-weight: 700; font-size: .95rem;
    box-shadow: 0 4px 16px rgba(192,139,139,.35);
    transition: background .2s, transform .15s;
}
.ces-btn:hover { background: #8b4a62; color: white; transform: translateY(-1px); }
.ces-suggest { margin-top: 48px; padding-top: 32px; border-top: 1px solid #f0f0f0; text-align: left; }
.ces-suggest-title { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; }

/* ═══════════════════════════════════════════════════════════
   PAGINA 404 BRANDIZZATA
   ═══════════════════════════════════════════════════════════ */
.err-section {
    position: relative;
    padding: 40px 20px 60px;
    text-align: center;
    overflow: hidden;
}
.err-bg-shapes {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
}
.err-shape {
    position: absolute;
    border-radius: 50%;
    opacity: .08;
    filter: blur(40px);
}
.err-shape-1 { width: 280px; height: 280px; background: #c08b8b; top: -60px; left: 10%; animation: shapeFloat 6s ease-in-out infinite; }
.err-shape-2 { width: 220px; height: 220px; background: #3498db; top: 30%; right: 15%; animation: shapeFloat 8s ease-in-out infinite reverse; }
.err-shape-3 { width: 180px; height: 180px; background: #f39c12; bottom: 10%; left: 30%; animation: shapeFloat 10s ease-in-out infinite; }
@keyframes shapeFloat {
    0%,100% { transform: translate(0,0); }
    50%     { transform: translate(20px,-20px); }
}

.err-content { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }

.err-code {
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 8px;
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1;
    letter-spacing: -8px;
}
.err-zero {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: clamp(80px, 16vw, 140px);
    height: clamp(80px, 16vw, 140px);
    background: linear-gradient(135deg, #c08b8b, #8b4a62);
    color: white;
    border-radius: 50%;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    box-shadow: 0 12px 40px rgba(192,139,139,.35);
    animation: errPulse 2s infinite ease-in-out;
}
@keyframes errPulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.05); }
}

.err-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    color: #1a1a2e;
    margin: 24px 0 12px;
    letter-spacing: -.4px;
}
.err-sub {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 28px;
}

.err-search {
    display: flex;
    max-width: 460px;
    margin: 0 auto 24px;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.err-search-input {
    flex: 1; border: none; outline: none;
    padding: 16px 20px; font-size: .95rem;
    background: transparent;
}
.err-search-btn {
    background: #1a1a2e; color: white;
    border: none; padding: 0 22px;
    font-size: .9rem; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background .15s;
}
.err-search-btn:hover { background: #c08b8b; }

.err-actions {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
    margin-bottom: 32px;
}
.err-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 12px;
    text-decoration: none; font-weight: 700; font-size: .9rem;
    transition: background .2s, transform .15s, color .15s;
}
.err-btn-primary { background: #c08b8b; color: white; box-shadow: 0 4px 16px rgba(192,139,139,.3); }
.err-btn-primary:hover { background: #8b4a62; color: white; transform: translateY(-1px); }
.err-btn-ghost { background: white; color: #1a1a2e; border: 1.5px solid #e0e3e8; }
.err-btn-ghost:hover { border-color: #1a1a2e; color: #1a1a2e; }

.err-links {
    display: flex; gap: 18px;
    justify-content: center; flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px dashed #e0e3e8;
    font-size: .82rem;
}
.err-links a {
    color: #888; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    transition: color .15s;
}
.err-links a:hover { color: #c08b8b; }

/* Popular section */
.err-popular {
    max-width: 800px;
    margin: 48px auto 0;
    text-align: left;
}
.err-popular-title {
    font-size: 1rem; font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 16px;
    text-align: center;
}
.err-popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.err-pop-card {
    display: flex; align-items: center; gap: 12px;
    background: white;
    border-radius: 12px;
    padding: 12px;
    text-decoration: none;
    border: 1px solid #f0f0f0;
    transition: transform .15s, box-shadow .15s;
}
.err-pop-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.err-pop-card img {
    width: 56px; height: 56px;
    object-fit: cover; border-radius: 8px;
    background: #f8f8f8;
}
.err-pop-info { flex: 1; min-width: 0; }
.err-pop-nome {
    font-size: .85rem; font-weight: 600; color: #1a1a2e;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.err-pop-prezzo { font-size: .9rem; font-weight: 800; color: #c08b8b; margin-top: 2px; }

/* ── REGISTRAZIONE WIZARD MULTI-STEP ─────────────────────────── */
.rw-progress {
    margin-bottom: 20px;
}
.rw-progress::before {
    content: '';
    display: block;
    height: 6px;
    background: #f1f1f5;
    border-radius: 99px;
    position: relative;
    overflow: hidden;
}
.rw-progress-bar {
    height: 6px;
    background: linear-gradient(90deg, #c08b8b 0%, #8b4a62 100%);
    border-radius: 99px;
    width: 33.33%;
    margin-top: -6px;
    transition: width .4s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 6px rgba(192,139,139,.3);
    position: relative;
}
.rw-progress-text {
    margin-top: 8px;
    font-size: .82rem;
    color: #7a7a8c;
    text-align: center;
}
.rw-progress-text strong { color: #1a1a2e; font-weight: 700; }

.rw-step {
    display: none;
    animation: rwFadeIn .35s ease;
}
.rw-step.active { display: block; }
@keyframes rwFadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.rw-step-hint {
    font-size: .92rem;
    color: #5a5a6e;
    margin-bottom: 14px;
    font-weight: 500;
}
.rw-step-help {
    display: block;
    margin-top: 6px;
    font-size: .78rem;
    color: #8a8a9c;
}

.rw-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}
.rw-btn-back {
    background: #f5f5f9;
    color: #4a4a5e;
    border: 1px solid #e5e5ec;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rw-btn-back:hover { background: #ececf3; }
.rw-btn-next, .rw-btn-finish { flex: 1; }
.rw-btn-next {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Shake input wrap on validation error */
.rw-shake { animation: rwShake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes rwShake {
    10%, 90%   { transform: translateX(-2px); }
    20%, 80%   { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60%   { transform: translateX(5px); }
}

/* ═══════════════════════════════════════════════════════════
   MAIN NAV + MEGAMENU CATEGORIE
   ═══════════════════════════════════════════════════════════ */
.sbt-main-nav {
    display: flex; align-items: center; gap: 6px;
    margin-left: 24px;
}
.sbt-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #1a1a2e; text-decoration: none;
    font-weight: 600; font-size: .92rem;
    padding: 10px 14px; border-radius: 10px;
    background: transparent; border: 0;
    transition: background .15s, color .15s, transform .15s;
    cursor: pointer;
}
.sbt-nav-link:hover,
.sbt-nav-link:focus { background: #f4f6f9; color: #7367f0; }
.sbt-nav-link.dropdown-toggle::after { margin-left: 2px; }

.sbt-cat-dropdown .dropdown-menu.sbt-megamenu {
    min-width: 560px; max-width: 720px;
    padding: 18px;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.10);
    margin-top: 6px;
}
.sbt-megamenu-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.sbt-megamenu-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 8px;
    color: #1a1a2e; text-decoration: none;
    font-size: .9rem;
    transition: background .15s, color .15s, transform .15s;
}
.sbt-megamenu-item:hover {
    background: linear-gradient(135deg, rgba(115,103,240,.08), rgba(115,103,240,.02));
    color: #5e50ee;
    transform: translateX(3px);
}
.sbt-megamenu-name { font-weight: 600; }
.sbt-megamenu-count {
    background: #f0f0f7; color: #7367f0;
    padding: 2px 8px; border-radius: 11px;
    font-size: .72rem; font-weight: 700;
}
.sbt-megamenu-footer {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
}
.sbt-megamenu-all {
    color: #7367f0; text-decoration: none; font-weight: 700;
    font-size: .88rem;
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap .15s;
}
.sbt-megamenu-all:hover { gap: 10px; color: #5e50ee; }

/* Mobile: nascondiamo il nav principale, le categorie restano nell'offcanvas */
@media (max-width: 991px) {
    .sbt-main-nav { display: none !important; }
}
@media (max-width: 1100px) {
    .sbt-cat-dropdown .dropdown-menu.sbt-megamenu { min-width: 460px; }
    .sbt-megamenu-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   ANIMAZIONI VANTAGGI (mega-promo) + GLOBALI LEGGERE
   ═══════════════════════════════════════════════════════════ */
.mega-promo .mp-box {
    transition: transform .35s cubic-bezier(.2,.7,.2,1),
                box-shadow .35s ease,
                border-color .35s ease;
    will-change: transform;
    overflow: hidden;
    position: relative;
}
.mega-promo .mp-box::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .6s ease;
    pointer-events: none;
}
.mega-promo .mp-box:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.mega-promo .mp-box:hover::before { transform: translateX(100%); }

.mega-promo .mp-icon-wrap {
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.mega-promo .mp-box:hover .mp-icon-wrap {
    transform: scale(1.12) rotate(-6deg);
}

.mega-promo .mp-deco {
    transition: transform .5s ease, opacity .3s ease;
    opacity: .18;
    font-size: 7rem;
    right: -12px; bottom: -12px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.mega-promo .mp-box > *:not(.mp-deco) {
    position: relative;
    z-index: 2;
}
.mega-promo .mp-box:hover .mp-deco {
    transform: scale(1.08) rotate(4deg);
    opacity: .26;
}

@keyframes floatY {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-4px); }
}
.mega-promo .mp-deco { animation: floatY 4s ease-in-out infinite; }

.mp-btn {
    position: relative; overflow: hidden;
    transition: transform .15s ease, box-shadow .25s ease, letter-spacing .25s ease;
}
.mp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    letter-spacing: .3px;
}

/* Pay-logos: pulse staggered */
@keyframes payPulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.18); }
}
.mp-pay-logos span { display: inline-block; animation: payPulse 2.4s ease-in-out infinite; }
.mp-pay-logos span:nth-child(2) { animation-delay: .25s; }
.mp-pay-logos span:nth-child(3) { animation-delay: .5s; }
.mp-pay-logos span:nth-child(4) { animation-delay: .75s; }

/* Reveal generale (le classi .fx-fade-up / .fx-zoom-in esistono già: rinforziamo con curva morbida) */
.fx-fade-up, .fx-zoom-in {
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}

/* Link e card: micro-interazioni globali */
.card, .product-card, .cat-card-v2 {
    transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover, .product-card:hover { transform: translateY(-3px); }

/* Bottoni primari: micro-bounce al focus */
.btn-primary:focus-visible, .btn-dark:focus-visible {
    animation: focusBounce .35s ease;
}
@keyframes focusBounce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Riduci animazioni se l'utente preferisce così */
@media (prefers-reduced-motion: reduce) {
    .mega-promo .mp-deco,
    .mp-pay-logos span { animation: none; }
    .mega-promo .mp-box:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   HERO EDITORIALE (stile madame juliette)
   ═══════════════════════════════════════════════════════════ */
.hero-mj {
    background: var(--mj-bg, #faf7f2);
    margin: 24px 0 40px;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
}
.hero-mj::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(circle at 12% 18%, rgba(0,0,0,.04), transparent 60%),
      radial-gradient(circle at 90% 90%, rgba(115,103,240,.07), transparent 70%);
    pointer-events: none;
}
.hero-mj-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 64px 56px;
    position: relative;
    z-index: 1;
}
.hero-mj-eyebrow {
    font-size: .75rem; letter-spacing: 4px; font-weight: 700;
    color: #7367f0;
    text-transform: uppercase;
    margin-bottom: 22px;
    animation: mjFadeUp .8s ease both;
}
.hero-mj-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 5.2vw, 4.2rem);
    line-height: 1.02;
    color: #1a1a2e;
    margin: 0 0 22px;
    letter-spacing: -.5px;
    animation: mjFadeUp .9s ease .1s both;
}
.hero-mj-sub {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #4a4a5e;
    max-width: 480px;
    margin: 0 0 32px;
    animation: mjFadeUp 1s ease .2s both;
}
.hero-mj-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: #1a1a2e; color: #fff;
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 700; font-size: .98rem;
    text-decoration: none;
    transition: background .25s, transform .25s, box-shadow .25s, gap .25s;
    box-shadow: 0 8px 24px rgba(26,26,46,.18);
    animation: mjFadeUp 1.1s ease .3s both;
}
.hero-mj-cta:hover {
    background: #7367f0; color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(115,103,240,.30);
    gap: 14px;
}
.hero-mj-trust {
    display: flex; flex-wrap: wrap; gap: 18px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(0,0,0,.08);
    font-size: .85rem; color: #6c6c7e;
    animation: mjFadeUp 1.2s ease .4s both;
}
.hero-mj-trust span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

.hero-mj-visual {
    position: relative;
    aspect-ratio: 4/5;
    max-height: 540px;
    border-radius: 18px;
    overflow: hidden;
    animation: mjZoomIn 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.hero-mj-visual img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 8s ease;
}
.hero-mj-visual:hover img { transform: scale(1.06); }
.hero-mj-visual-frame {
    position: absolute; inset: 18px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 10px;
    pointer-events: none;
}

@keyframes mjFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes mjZoomIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
    .hero-mj { border-radius: 16px; margin: 16px 0 28px; }
    .hero-mj-inner { grid-template-columns: 1fr; padding: 36px 24px; gap: 28px; }
    .hero-mj-visual { aspect-ratio: 16/12; max-height: 320px; }
    .hero-mj-trust { gap: 10px 14px; font-size: .8rem; }
}

/* ════════════════════════════════════════════════════════════
   🌸 PALETTE FEMMINILE · GRADIENTI CALMI
   Override finali sui bottoni primari e accenti
   ════════════════════════════════════════════════════════════ */
:root {
    --rose-light:  #e8c5c5;
    --rose:        #d4a5a5;
    --rose-mid:    #c08b8b;
    --mauve:       #a85a72;
    --mauve-deep:  #8b4a62;
    --plum:        #5e3a4f;
    --champagne:   #f5e6d3;
    --cream:       #faf6f0;
    --blush-bg:    #fdf5f3;
    --gradient-rose:       linear-gradient(135deg, #d4a5a5 0%, #a85a72 100%);
    --gradient-rose-deep:  linear-gradient(135deg, #c08b8b 0%, #8b4a62 100%);
    --gradient-blush:      linear-gradient(135deg, #fdf5f3 0%, #f5e6e0 100%);
    --gradient-mauve-dark: linear-gradient(135deg, #5e3a4f 0%, #8b4a62 100%);
}

/* Pulsanti primari CTA: gradiente rose → mauve */
.product-cart-btn,
.btn-aggiungi-carrello:not(.hs-btn-cart):not(.hero-video-cta),
.product-buy-now,
.hero-mj-cta,
.checkout-btn,
.btn-primary {
    background: var(--gradient-rose) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(168,90,114,.25) !important;
    transition: background .3s, transform .25s, box-shadow .3s !important;
}
.product-cart-btn:hover,
.btn-aggiungi-carrello:not(.hs-btn-cart):not(.hero-video-cta):hover,
.product-buy-now:hover,
.hero-mj-cta:hover,
.checkout-btn:hover,
.btn-primary:hover {
    background: var(--gradient-rose-deep) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(139,74,98,.35) !important;
}

/* CTA hero video — outline su sfondo video resta bianca */

/* Eyebrow / accenti / link rose */
.hs-eyebrow,
.resi-hero-eyebrow,
.hero-mj-eyebrow,
.ppb-label {
    color: var(--mauve) !important;
}

/* Badge sconto principale ora rose-mauve */
.ppb-discount-badge,
.product-card .discount-badge,
.badge-discount {
    background: var(--gradient-rose) !important;
    box-shadow: 0 6px 14px rgba(168,90,114,.32),
                0 0 0 1px rgba(255,255,255,.15) inset !important;
}

/* Bordi soft rosa sulle card hover */
.product-card:hover,
.feed-card:hover {
    border-color: var(--rose) !important;
}

/* Trust strip icone — sfondo blush */
.trust-item > i {
    background: var(--gradient-blush) !important;
    color: var(--mauve) !important;
    box-shadow: inset 0 0 0 1px rgba(212,165,165,.2) !important;
}
.trust-item:hover > i {
    box-shadow: 0 8px 18px rgba(168,90,114,.22), inset 0 0 0 1px rgba(168,90,114,.18) !important;
}
.trust-item:hover {
    background: var(--gradient-blush) !important;
}
.trust-item:hover strong { color: var(--mauve) !important; }
.trust-item::before { background: linear-gradient(90deg, transparent, rgba(168,90,114,.06), transparent) !important; }

/* Marquee announcement bar — nero pieno, scorrimento più veloce */
.sbt-marquee {
    background: #000 !important;
}
.sbt-marquee::before { background: linear-gradient(90deg, #000, transparent) !important; }
.sbt-marquee::after  { background: linear-gradient(-90deg, #000, transparent) !important; }
.sbt-marquee-dot { color: var(--rose-light) !important; }
.sbt-marquee-track { animation-duration: 18s !important; }
@media (max-width: 576px) {
    .sbt-marquee-track { animation-duration: 5s !important; }
}

/* Bordi input focus rose */
input:focus, textarea:focus, select:focus,
.form-control:focus, .auth-input:focus {
    border-color: var(--rose-mid) !important;
    box-shadow: 0 0 0 3px rgba(192,139,139,.15) !important;
}

/* Sostituisco i badge bg-danger di Bootstrap col rose */
.badge.bg-danger {
    background: var(--gradient-rose) !important;
}

/* Scrollbar rose (webkit) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--rose) 0%, var(--mauve) 100%) !important;
}

/* WhatsApp bubble — mantengo verde (riconoscibile) ma soften bordi */

/* Trust bar in fondo: spaziatura più ariosa, separazione visiva dal contenuto */
.trust-bar-bottom {
    margin-top: 48px;
    margin-bottom: 24px;
}

/* ════════════════════════════════════════════════════════════
   🎀 FASHION POLISH — pensato per moda donna
   ════════════════════════════════════════════════════════════ */

/* Typography editoriale — serif per i titoli delle sezioni */
.section-title-new,
h2.section-title-new {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important;
    letter-spacing: -.5px !important;
    color: #2a2530 !important;
    margin-bottom: 4px !important;
}
.section-header { margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid #f0e6e3; }

/* Card prodotto: ombra morbida rosa, hover liftato editoriale */
.product-card, .insta-card, .feed-card {
    border-radius: 14px !important;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s !important;
}
.product-card:hover, .insta-card:hover, .feed-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 24px 50px -15px rgba(168,90,114,.18) !important;
}

/* Etichetta "novità" / "trend" / "sale" sulle card */
.product-card::before, .insta-card::before {
    border-radius: 14px;
}

/* Prezzi con tabular nums per allineamento perfetto */
.product-price, .ppb-price, .hs-price, .hero-video-cta {
    font-variant-numeric: tabular-nums;
}

/* Marquee dot — usa un trattino al posto del pallino, più refined */
.sbt-marquee-dot {
    font-size: .9rem !important;
    line-height: 1 !important;
    margin: 0 4px !important;
}

/* Trust bar in fondo: bg ancora più morbido */
.trust-bar-bottom {
    background: linear-gradient(135deg, #ffffff 0%, #fdf9f8 100%) !important;
    box-shadow: 0 1px 0 #f0e6e3 inset, 0 -1px 0 #f0e6e3 inset !important;
}

/* Bottoni "outline" stile editorial */
.btn-outline-dark, .sbt-btn-outline {
    border: 1.5px solid #2a2530 !important;
    color: #2a2530 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    font-size: .8rem !important;
    padding: 12px 22px !important;
    transition: all .25s !important;
}
.btn-outline-dark:hover, .sbt-btn-outline:hover {
    background: #2a2530 !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Tab della scheda prodotto (descrizione, recensioni) */
.product-tab-btn { letter-spacing: 1.5px !important; text-transform: uppercase !important; font-size: .78rem !important; font-weight: 700 !important; }

/* Card categorie con immagine: bordo rotondo + zoom soft su hover */
.cat-card { border-radius: 14px !important; }
.cat-card-content h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: -.3px !important;
}

/* Newsletter: input + bottone più refined */
.newsletter input, .newsletter button { border-radius: 0 !important; }

/* Wishlist heart hover rosa */
.product-wish-btn:hover { background: linear-gradient(135deg, #fdf5f3, #f5e6e0) !important; }
.product-wish-btn.active i { color: #a85a72 !important; }

/* Rimuovo l'X nativa del browser su <input type="search"> */
.sbt-search-input::-webkit-search-cancel-button,
.sbt-search-input::-webkit-search-decoration,
.sbt-search-input::-webkit-search-results-button,
.sbt-search-input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
.sbt-search-input::-ms-clear,
.sbt-search-input::-ms-reveal { display: none; width: 0; height: 0; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
input[type="search"]::-ms-clear { display: none; }

/* Logo con sottotitolo brand */
.sbt-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.sbt-logo-name {
    font-size: 1.05rem; font-weight: 800;
    color: #2a2530; letter-spacing: -.3px;
}
.sbt-logo-sub {
    font-size: .4rem; font-weight: 500;
    color: #a78a9a; letter-spacing: .15px;
    text-transform: none;
    margin-top: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-style: italic;
    line-height: 1;
}
@media (max-width: 576px) {
    .sbt-logo-name { font-size: .95rem; }
    .sbt-logo-sub { font-size: .36rem; }
}

/* ─── Filtri smart: scroll orizzontale, niente più wrap a 2 righe ─── */
.smart-filters-section {
    margin-top: 10px;
    margin-bottom: 10px;
}
.smart-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    /* Padding interno generoso così la prima pillola non tocca il bordo */
    padding: 6px 16px 14px;
    margin: 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
/* Pseudo-elementi per dare "respiro" ai lati durante lo scroll */
.smart-filters::before,
.smart-filters::after {
    content: '';
    flex-shrink: 0;
    width: 4px;
}
.smart-filters::-webkit-scrollbar { display: none; }
.smart-filters .sf-pill {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
}

/* Video hero attaccato alla sezione successiva — niente stacco bianco */
.hero-video { margin-bottom: 0 !important; display: block !important; vertical-align: bottom; }
.hero-video-bg { display: block; }

/* Su mobile elimino lo stacco extra del py-4 del main */
@media (max-width: 768px) {
    body > main:nth-of-type(2) { padding-top: 0 !important; }
    .smart-filters-section { margin-top: 12px; }
}

/* ════════════════════════════════════════════════════════════
   FIX MODAL CONFERMA — perfettamente centrato su mobile/desktop
   ════════════════════════════════════════════════════════════ */
#modal-conferma {
    z-index: 100050 !important;
    padding-right: 0 !important;
}
#modal-conferma.show {
    display: block !important;
    background: rgba(15, 15, 26, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#modal-conferma .modal-dialog {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100% - 2rem) !important;
    margin: 1rem auto !important;
    max-width: 380px !important;
    width: calc(100% - 32px) !important;
    transform: none !important;
}
@keyframes mcSlideUp {
    from { opacity: 0; transform: scale(.92) translateY(16px); }
    to   { opacity: 1; transform: none; }
}
#modal-conferma .modal-content {
    width: 100% !important;
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 28px 64px rgba(0,0,0,.32) !important;
    background: #fff !important;
    animation: mcSlideUp .28s cubic-bezier(.22,1,.36,1);
}

/* Bottoni del modal con palette brand rose */
#modal-conferma .modal-footer { padding-top: 8px !important; }
#modal-conferma #mc-btn-cancel {
    background: #f5f5f9 !important;
    color: #2a2530 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    transition: all .2s !important;
}
#modal-conferma #mc-btn-cancel:hover {
    background: #e6e6ec !important;
    transform: translateY(-1px);
}
#modal-conferma #mc-btn-ok {
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    box-shadow: 0 6px 14px rgba(239,68,68,.28) !important;
    transition: all .2s !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
}
#modal-conferma #mc-btn-ok:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(239,68,68,.4) !important;
}

/* Cerchio icona ben visibile */
.mc-icon-circle {
    width: 64px; height: 64px;
    margin: 0 auto;
    background: linear-gradient(135deg, #fff5f3 0%, #fae0dc 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 8px 18px rgba(192,139,139,.18);
}

/* Backdrop di Bootstrap nascosto (lo facciamo noi sul #modal-conferma stesso) */
.modal-backdrop { display: none !important; }
body.modal-open { overflow: hidden !important; padding-right: 0 !important; }
.modal-backdrop { display: none !important; }

/* ════════════════════════════════════════════════════════════
   Mobile: nascondi search-section grande, search nel drawer
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sbt-search-section { display: none !important; }
}

/* Search inline nel drawer mobile */
.oc-search {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(135deg, #fdf5f3 0%, #fff 100%);
    border: 1.5px solid #ead9d9;
    border-radius: 12px;
    padding: 4px 6px 4px 14px;
    margin-bottom: 18px;
    transition: border-color .2s, box-shadow .2s;
}
.oc-search:focus-within {
    border-color: #c08b8b;
    box-shadow: 0 0 0 4px rgba(192,139,139,.12);
}
.oc-search > i.bi-search {
    color: #c08b8b;
    font-size: 1.05rem;
    margin-right: 8px;
}
.oc-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 10px 4px !important;
    font-size: .95rem !important;
    color: #2a2530 !important;
    outline: none !important;
}
.oc-search-input::placeholder { color: #b8a8a8; }
.oc-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.oc-search-go {
    background: linear-gradient(135deg, #c08b8b, #a85a72);
    color: #fff;
    border: none;
    width: 34px; height: 34px;
    border-radius: 8px;
    font-size: 1.1rem; font-weight: 800;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 10px rgba(168,90,114,.22);
}
.oc-search-go:hover {
    background: linear-gradient(135deg, #a85a72, #8b4a62);
    transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════
   HERO VIDEO: typewriter + letter-stagger reveal
   ════════════════════════════════════════════════════════════ */
.hero-video-title {
    overflow: visible;
    line-height: 1.05;
    /* Nasconde il fallback testuale (era già nel data-text) */
}
.hvt-letters { display: inline-block; }
.hvt-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(40%) scaleY(.86);
    transform-origin: 50% 100%;
    animation: hvtLetterIn .8s cubic-bezier(.22,1,.36,1) forwards;
    will-change: transform, opacity;
}
.hvt-letter.hvt-space {
    /* spazi: gestiscono il loro padding senza animare */
    width: .4em;
    opacity: 1;
    animation: none;
    transform: none;
}
@keyframes hvtLetterIn {
    0%   { opacity: 0; transform: translateY(80%) scaleY(.82); filter: blur(8px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); filter: blur(0); }
}

/* Sottotitolo typewriter */
.hero-video-sub {
    opacity: 0;
    transition: opacity .3s;
    display: inline-flex;
    align-items: center;
}
.hvs-typed {
    white-space: pre;
    overflow: hidden;
}
.hvs-cursor {
    display: inline-block;
    margin-left: 2px;
    font-weight: 300;
    color: rgba(255,255,255,.85);
    animation: hvsCursorBlink 1s steps(1) infinite;
    transform: translateY(-2px);
}
.hvs-cursor.hvs-cursor-done {
    animation: hvsCursorOut 1.6s ease-out forwards;
}
@keyframes hvsCursorBlink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}
@keyframes hvsCursorOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Riduzione motion: niente animazioni se l'utente le ha disattivate */
@media (prefers-reduced-motion: reduce) {
    .hvt-letter { animation: none; opacity: 1; transform: none; }
    .hero-video-sub { opacity: 1; }
    .hvs-cursor { animation: none; opacity: 0; }
    .hvs-typed::before { content: attr(data-text); }
}

/* ════════════════════════════════════════════════════════════
   CART ADD: button morph + linear progress
   (rimpiazza la vecchia animazione esplosione)
   ════════════════════════════════════════════════════════════ */
.cart-fx-overlay { display: none !important; }

.btn-aggiungi-carrello,
.product-cart-btn {
    position: relative;
    overflow: hidden;
    transition: background .3s, color .3s, box-shadow .3s, transform .15s;
}
.btn-cart-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(16,185,129,.32) !important;
    cursor: pointer !important;
    animation: bcsPulse .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bcsPulse {
    0%   { transform: scale(.96); }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.btn-cart-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px);
}
.btn-cart-success .bcs-content {
    display: inline-flex; align-items: center; gap: 8px;
    position: relative; z-index: 2;
}
.btn-cart-success .bcs-check {
    animation: bcsCheckIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bcsCheckIn {
    0%   { transform: scale(0) rotate(-90deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.btn-cart-success .bcs-label {
    font-weight: 700; letter-spacing: .2px;
    animation: bcsLabelIn .4s ease both .1s;
}
@keyframes bcsLabelIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.btn-cart-success .bcs-arrow {
    animation: bcsArrowSlide 1.4s ease-in-out infinite;
}
@keyframes bcsArrowSlide {
    0%, 100% { transform: translateX(0); opacity: .85; }
    50%      { transform: translateX(4px); opacity: 1; }
}

/* Progress bar in basso che si riempie in 3.5s e poi torna indietro */
.btn-cart-success .bcs-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.2);
    overflow: hidden;
    z-index: 1;
}
.btn-cart-success .bcs-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,1));
    border-radius: 0 99px 99px 0;
    animation: bcsProgress 3.5s linear forwards;
}
@keyframes bcsProgress {
    0%   { width: 0; }
    100% { width: 100%; }
}

/* Variante mini per bottoni piccoli (card prodotto griglia) */
.product-card .btn-cart-success .bcs-arrow,
.insta-card  .btn-cart-success .bcs-arrow { display: none; }

/* Recensioni: foto cliente */
.review-foto-wrap { margin-top: 10px; }
.review-foto {
    width: 100px; height: 100px; object-fit: cover;
    border-radius: 8px; border: 1px solid #eee;
    transition: transform .25s ease;
}
.review-foto:hover { transform: scale(1.05); border-color: #c08b8b; }

/* Fix bottoni wizard: hidden attribute deve sovrascrivere display:flex del wrapper */
.rw-nav button[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   SWITCH stile iOS (verde quando attivi)
   ═══════════════════════════════════════════════════════════ */
.form-switch .form-check-input,
input.form-check-input[type="checkbox"][role="switch"] {
    width: 44px !important;
    height: 26px !important;
    background-color: #e9e9eb !important;
    border: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.08) !important;
    transition: background-color .25s ease, background-position .25s cubic-bezier(.2,.7,.4,1) !important;
    cursor: pointer;
}
.form-switch .form-check-input:checked,
input.form-check-input[type="checkbox"][role="switch"]:checked {
    background-color: #34c759 !important;
    border-color: #34c759 !important;
    background-position: right center !important;
    box-shadow: 0 4px 10px rgba(52,199,89,.32) !important;
}
.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(52,199,89,.2), 0 2px 4px rgba(0,0,0,.08) !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE FIXES — viewport ≤ 420px (smartphone)
   ═══════════════════════════════════════════════════════════ */

/* Stop horizontal overflow su TUTTI i viewport (anche desktop in restringimento) */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 420px) {
    /* Container a tutta larghezza con padding minimo */
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ─── HEADER LOGO: nome + sottotitolo non escono più ─── */
    .sbt-header-inner { gap: 8px; }
    .sbt-logo { gap: 8px; min-width: 0; flex: 1 1 auto; }
    .sbt-logo-text { min-width: 0; flex: 1 1 auto; overflow: hidden; }
    .sbt-logo-name {
        font-size: .82rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .sbt-logo-sub {
        font-size: .55rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: .3px;
    }
    .sbt-logo img { height: 30px !important; }

    /* ─── HERO VIDEO: titolo non va più a capo a metà parola ─── */
    .hero-video-content { padding: 0 14px; }
    .hero-video-title {
        font-size: clamp(1.4rem, 7.5vw, 2.2rem) !important;
        letter-spacing: .02em !important;
        line-height: 1.1;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    .hero-video-sub {
        font-size: .62rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 22px;
    }
    .hero-video-cta {
        padding: 12px 22px;
        font-size: .68rem;
        letter-spacing: 1.5px;
    }

    /* ─── MARQUEE: testo più piccolo ─── */
    .sbt-marquee-item { font-size: .72rem; }
}

/* Schermi ancora più stretti (es. iPhone SE, Galaxy fold chiuso) */
@media (max-width: 360px) {
    .sbt-logo-name { font-size: .75rem !important; }
    .sbt-logo-sub { font-size: .5rem !important; }
    .sbt-logo img { height: 26px !important; }
    .hero-video-title { font-size: 1.6rem !important; letter-spacing: 0 !important; }
}


/* ─── Klarna On-Site Messaging (badge "Paga in 3 rate") ─── */
.klarna-osm-wrap {
    display: block;
    min-height: 32px;
}
.klarna-osm-wrap klarna-placement {
    display: block;
    width: 100%;
}

/* ════════════════════════════════════════════════════════════
   MOBILE FIX: titolo hero-video su una sola riga
   ════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .hero-video-title {
        white-space: nowrap !important;
        font-size: clamp(1.3rem, 7.5vw, 2.4rem) !important;
        letter-spacing: 0 !important;
        padding: 0 8px;
    }
}
@media (max-width: 400px) {
    .hero-video-title {
        font-size: clamp(1.1rem, 7vw, 1.8rem) !important;
    }
    .hero-video-sub {
        font-size: .68rem !important;
        letter-spacing: 2.4px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   ANIMAZIONE "Consegna stimata" — slide-in + pulse camion
   ════════════════════════════════════════════════════════════ */
.ck-eta, .checkout-eta, .ck-delivery-box,
[class*="consegna"][class*="stimata"] {
    animation: ckEtaSlide .6s cubic-bezier(.22,1,.36,1) both;
    position: relative;
    overflow: hidden;
}
@keyframes ckEtaSlide {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ck-eta::before, .checkout-eta::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(33,150,243,.15), transparent);
    animation: ckEtaShine 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ckEtaShine {
    0%, 50%   { left: -100%; }
    70%, 100% { left: 120%; }
}
.ck-eta svg, .checkout-eta svg {
    animation: ckTruckPulse 2.4s ease-in-out infinite;
    transform-origin: center;
}
@keyframes ckTruckPulse {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    50%      { transform: translateX(3px) scale(1.05); }
    75%      { transform: translateX(-1px); }
}

/* ════════════════════════════════════════════════════════════
   🎨 TRUST BAR: colori diversi per ogni icona + anim più trendy
   ════════════════════════════════════════════════════════════ */
/* Bus: BLU che vibra + linee di velocità */
.trust-item:nth-child(1) > i {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 8px 18px rgba(29,78,216,.18) !important;
    animation: tbBusZoom 3.2s ease-in-out infinite !important;
}
@keyframes tbBusZoom {
    0%, 100% { transform: translateX(0) scale(1); }
    20%      { transform: translateX(-2px) scale(.96); }
    50%      { transform: translateX(4px) scale(1.05) rotate(-2deg); }
    80%      { transform: translateX(-1px) scale(1); }
}

/* Pagamenti: VERDE che pulsa "sicuro" */
.trust-item:nth-child(2) > i {
    background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%) !important;
    color: #047857 !important;
    box-shadow: 0 8px 18px rgba(4,120,87,.2) !important;
    animation: tbShieldPulse 2.2s ease-in-out infinite !important;
}
@keyframes tbShieldPulse {
    0%, 100% { box-shadow: 0 8px 18px rgba(4,120,87,.2), 0 0 0 0 rgba(16,185,129,.6); }
    50%      { box-shadow: 0 8px 18px rgba(4,120,87,.28), 0 0 0 10px rgba(16,185,129,0); transform: scale(1.04); }
}

/* Reso: ARANCIO/AMBRA che ruota */
.trust-item:nth-child(3) > i {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%) !important;
    color: #b45309 !important;
    box-shadow: 0 8px 18px rgba(180,83,9,.22) !important;
}
.trust-item:nth-child(3) > i::before {
    animation: tbReturnSpin 5s linear infinite !important;
}
@keyframes tbReturnSpin {
    from { transform: rotate(0); }
    to   { transform: rotate(-360deg); }
}

/* Cuffia: VIOLA/MAUVE che oscilla */
.trust-item:nth-child(4) > i {
    background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 100%) !important;
    color: #6d28d9 !important;
    box-shadow: 0 8px 18px rgba(109,40,217,.22) !important;
    animation: tbHeadsetSway 2.6s ease-in-out infinite !important;
}
@keyframes tbHeadsetSway {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-10deg); }
    50%      { transform: rotate(8deg) scale(1.05); }
    75%      { transform: rotate(-5deg); }
}

/* Sweep luminoso laterale che attraversa ogni card al hover */
.trust-item { position: relative; overflow: hidden; }
.trust-item::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    transform: skewX(-22deg);
    transition: left .8s ease;
    pointer-events: none;
}
.trust-item:hover::after { left: 130%; }
.trust-item:hover { transform: translateY(-3px); transition: transform .25s; }

/* Hover: il testo "fast colorato" prende il colore della rispettiva icona */
.trust-item:nth-child(1):hover strong { color: #1d4ed8 !important; }
.trust-item:nth-child(2):hover strong { color: #047857 !important; }
.trust-item:nth-child(3):hover strong { color: #b45309 !important; }
.trust-item:nth-child(4):hover strong { color: #6d28d9 !important; }

/* ════════════════════════════════════════════════════════════
   🎯 INDIRIZZI CARD: bottoni Modifica/Elimina più grandi + colorati
   ════════════════════════════════════════════════════════════ */
.ind-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
}

/* Bottone "Imposta predefinito" ora in piena larghezza con gradient amber */
.ind-btn-default {
    flex: 1 0 100%;
    background: linear-gradient(135deg, #fef3c7, #fbbf24) !important;
    color: #92400e !important;
    border: none !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 14px rgba(251,191,36,.3) !important;
    margin-bottom: 4px;
    transition: all .2s !important;
}
.ind-btn-default:hover {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(251,191,36,.4) !important;
}

/* MODIFICA — bottone blu vivace, grande */
.ind-btn-edit {
    flex: 1;
    background: linear-gradient(135deg, #dbeafe, #93c5fd) !important;
    color: #1d4ed8 !important;
    border: none !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(29,78,216,.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    letter-spacing: .2px !important;
    transition: all .2s !important;
    min-height: 44px;
}
.ind-btn-edit::before {
    content: '✏️';
    font-size: 16px;
}
.ind-btn-edit:hover {
    background: linear-gradient(135deg, #2196f3, #1d4ed8) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(29,78,216,.36) !important;
}

/* ELIMINA — bottone rosso pieno con icona grande */
.ind-btn-del {
    width: 48px !important;
    min-height: 44px;
    background: linear-gradient(135deg, #fecaca, #f87171) !important;
    color: #b91c1c !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(239,68,68,.22) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .2s !important;
    flex-shrink: 0;
}
.ind-btn-del::before {
    content: '🗑';
    font-size: 18px;
}
.ind-btn-del > * { display: none; }
.ind-btn-del:hover {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 22px rgba(239,68,68,.4) !important;
}

/* Badge "Predefinito" più tondo + sparkly */
.ind-badge-default {
    background: linear-gradient(135deg, #fef3c7, #f59e0b) !important;
    color: #92400e !important;
    box-shadow: 0 6px 14px rgba(245,158,11,.3) !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    animation: indDefShine 2.4s ease-in-out infinite;
}
@keyframes indDefShine {
    0%, 100% { box-shadow: 0 6px 14px rgba(245,158,11,.3); }
    50%      { box-shadow: 0 8px 22px rgba(245,158,11,.5); transform: scale(1.04); }
}

/* ════════════════════════════════════════════════════════════
   🚚 Consegna stimata: card più colorata + animata
   ════════════════════════════════════════════════════════════ */
.ck-eta, .checkout-eta {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border: 1px solid #93c5fd !important;
    border-left: 4px solid #2563eb !important;
}
.ck-eta svg, .checkout-eta svg {
    color: #1d4ed8 !important;
    width: 22px !important;
    height: 22px !important;
}
.ck-eta strong, .checkout-eta strong {
    color: #1e3a8a !important;
}

/* Badge Klarna nel footer - stile ufficiale */
.footer-payment-klarna {
    background: #FFA8CD !important;
    border-color: #FFA8CD !important;
    padding: 8px 14px !important;
    min-width: 70px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    transition: all .25s !important;
}
.footer-payment-klarna:hover {
    background: #ff80b8 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255,168,205,.4);
}
.footer-payment-klarna img {
    /* Lo SVG contiene già il badge rosa ufficiale + wordmark scuro: niente filtro,
       altrimenti brightness(0) anneriva l'intero logo (anche lo sfondo) = blocco nero. */
    height: 20px;
    width: auto;
    display: block;
}

/* CHECKOUT SIDEBAR PREMIUM */

/* Title sezione */
.ck-summary-title {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 16px !important;
    display: flex; align-items: center; gap: 8px;
}
.ck-summary-title::before {
    content: '🛍';
    font-size: 1.1rem;
    display: inline-block;
    animation: ckBagBounce 2s ease-in-out infinite;
}
@keyframes ckBagBounce {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-2px) rotate(-4deg); }
}

/* Item prodotto card */
.ck-item {
    display: flex !important;
    gap: 12px !important;
    padding: 10px !important;
    border-radius: 10px;
    background: #fafafb;
    margin-bottom: 8px;
    transition: background .2s, transform .2s;
}
.ck-item:hover {
    background: #fdf5f3;
    transform: translateX(2px);
}
.ck-item img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    flex-shrink: 0;
}
.ck-item-name {
    font-weight: 700 !important;
    font-size: .88rem !important;
    color: #1a1a2e !important;
    line-height: 1.3;
}
.ck-item-meta {
    font-size: .75rem !important;
    color: #888 !important;
    margin-top: 3px;
}
.ck-item-price {
    font-weight: 800 !important;
    color: #1a1a2e !important;
    white-space: nowrap;
    font-size: .92rem;
}

/* Coupon input + apply */
.ck-coupon { margin: 14px 0 !important; }
.ck-coupon .ck-input {
    flex: 1;
    border: 1.5px solid #ead9d9 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: .88rem !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.ck-coupon .ck-input:focus {
    border-color: #c08b8b !important;
    box-shadow: 0 0 0 4px rgba(192,139,139,.12) !important;
    outline: none !important;
}
.ck-coupon .btn-dark {
    background: linear-gradient(135deg, #1a1a2e, #2a2530) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    letter-spacing: .3px !important;
    cursor: pointer;
    transition: all .2s !important;
    box-shadow: 0 4px 12px rgba(26,26,46,.2);
}
.ck-coupon .btn-dark:hover {
    background: linear-gradient(135deg, #c08b8b, #a85a72) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(168,90,114,.32) !important;
}

/* Punti fedeltà card animata */
.ck-fedelta {
    position: relative;
    background: linear-gradient(135deg, #fff8e7 0%, #ffd97a 100%) !important;
    border: 1px solid #fde68a;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(251,191,36,.18);
}
.ck-fed-star {
    flex-shrink: 0;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.7);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(245,158,11,.25);
    animation: ckFedStar 2.5s ease-in-out infinite;
}
.ck-fed-star span {
    font-size: 1.4rem;
    display: inline-block;
    animation: ckFedSpin 4s ease-in-out infinite;
}
@keyframes ckFedStar {
    0%, 100% { box-shadow: 0 4px 10px rgba(245,158,11,.25), 0 0 0 0 rgba(245,158,11,.5); }
    50%      { box-shadow: 0 4px 10px rgba(245,158,11,.32), 0 0 0 10px rgba(245,158,11,0); }
}
@keyframes ckFedSpin {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-10deg) scale(1.05); }
    50%      { transform: rotate(0); }
    75%      { transform: rotate(10deg) scale(1.05); }
}
.ck-fed-text { flex: 1; font-size: .87rem; color: #4a3210; }
.ck-fed-text strong { color: #2a2530; font-weight: 800; font-size: .92rem; }
.ck-fed-count {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff !important;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 800;
    margin: 0 2px;
    animation: ckFedCountPulse 1.6s ease-in-out infinite;
}
@keyframes ckFedCountPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
.ck-fed-sub {
    font-size: .73rem;
    color: #6b4a17;
    margin-top: 3px;
}
.ck-fed-shine {
    position: absolute;
    top: 0; left: -50%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-22deg);
    animation: ckFedShine 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ckFedShine {
    0%, 60% { left: -50%; }
    80%, 100% { left: 150%; }
}

/* Totali */
.ck-totals { padding: 4px 0; }
.ck-total-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: .9rem;
    color: #444;
}
.ck-total-row > span:last-child { font-weight: 700; color: #1a1a2e; }
.ck-grand-total {
    margin-top: 10px;
    padding-top: 12px !important;
    border-top: 2px solid #1a1a2e;
    font-size: 1.15rem !important;
}
.ck-grand-total > span:first-child {
    font-weight: 800 !important;
    color: #1a1a2e !important;
    font-size: 1.15rem;
}
.ck-grand-total > span:last-child {
    font-weight: 900 !important;
    color: #1a1a2e !important;
    font-size: 1.3rem !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #a85a72 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ckTotalPop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ckTotalPop {
    0%   { transform: scale(.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Trust badges */
.ck-trust {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed #ead9d9;
}
.ck-trust-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fafbfc;
    transition: background .25s, transform .25s;
    cursor: default;
}
.ck-trust-item:hover {
    background: #fff5f3;
    transform: translateX(3px);
}
.ck-trust-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.ck-trust-item strong {
    display: block;
    font-size: .85rem;
    color: #1a1a2e !important;
    font-weight: 800 !important;
    line-height: 1.3;
}
.ck-trust-item small {
    font-size: .72rem;
    color: #888;
    line-height: 1.3;
    display: block;
}

.ck-trust-pay .ck-trust-icon {
    background: linear-gradient(135deg, #d1fae5, #6ee7b7);
    color: #047857;
    box-shadow: 0 6px 14px rgba(4,120,87,.18);
    animation: ckTrustPayAmbient 4s ease-in-out infinite;
}
@keyframes ckTrustPayAmbient {
    0%, 100% { box-shadow: 0 6px 14px rgba(4,120,87,.18), 0 0 0 0 rgba(16,185,129,.4); }
    50%      { box-shadow: 0 6px 14px rgba(4,120,87,.25), 0 0 0 8px rgba(16,185,129,0); }
}

.ck-trust-ship .ck-trust-icon {
    background: linear-gradient(135deg, #dbeafe, #93c5fd);
    color: #1d4ed8;
    box-shadow: 0 6px 14px rgba(29,78,216,.18);
    animation: ckTrustShipAmbient 3s ease-in-out infinite;
}
@keyframes ckTrustShipAmbient {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    50%      { transform: translateX(3px) scale(1.03); }
    75%      { transform: translateX(-1px); }
}

.ck-trust-return .ck-trust-icon {
    background: linear-gradient(135deg, #fef3c7, #fbbf24);
    color: #b45309;
    box-shadow: 0 6px 14px rgba(180,83,9,.18);
}
.ck-trust-return .ck-trust-icon svg {
    animation: ckTrustReturnAmbient 8s linear infinite;
}
@keyframes ckTrustReturnAmbient {
    from { transform: rotate(0); }
    to   { transform: rotate(-360deg); }
}

/* Help WhatsApp */
.ck-help {
    margin-top: 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fdf5f3, #fff);
    border: 1px solid #f0e6e3;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    color: #5e3a4f;
}
.ck-help i {
    color: #a85a72;
    font-size: 1.1rem;
    animation: ckHelpBounce 2.2s ease-in-out infinite;
}
@keyframes ckHelpBounce {
    0%, 100% { transform: scale(1) rotate(0); }
    25%      { transform: scale(1.08) rotate(-8deg); }
    75%      { transform: scale(1.08) rotate(8deg); }
}
.ck-help a {
    color: #a85a72 !important;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1.5px dotted #c08b8b;
    transition: color .2s;
}
.ck-help a:hover { color: #5e3a4f !important; border-bottom-style: solid; }

/* ════════════════════════════════════════════════════════════
   FIX CHECKOUT: stepper centrato + rimozione emoji 🛍 + ETA animata
   ════════════════════════════════════════════════════════════ */

/* 1. Tolgo l'emoji 🛍 davanti a "Il tuo ordine" che pixelava */
.ck-summary-title::before {
    content: '' !important;
    display: none !important;
}

/* 2. Stepper checkout: allineato col contenuto e centrato verticalmente */
.ck-progress {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
    padding: 20px 28px !important;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    margin: 0 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.ck-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ck-step-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f0e6e3;
    color: #a78a9a;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all .3s;
    flex-shrink: 0;
}
.ck-step.active .ck-step-num {
    background: linear-gradient(135deg, #c08b8b, #a85a72);
    color: #fff;
    box-shadow: 0 6px 14px rgba(168,90,114,.32);
    transform: scale(1.05);
}
.ck-step.done .ck-step-num {
    background: #10b981;
    color: #fff;
}
.ck-step-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #a78a9a;
    white-space: nowrap;
}
.ck-step.active .ck-step-label,
.ck-step.done .ck-step-label { color: #1a1a2e; }
.ck-step-line {
    flex: 1;
    min-width: 30px;
    max-width: 160px;
    height: 2px;
    background: #f0e6e3;
    margin: 0 14px;
    border-radius: 99px;
    align-self: center;
}

@media (max-width: 640px) {
    .ck-progress { padding: 14px 12px !important; }
    .ck-step-label { display: none; }
    .ck-step-line { margin: 0 8px; }
}

/* 3. Consegna stimata: animazione corriere su strada */
.ck-eta-fancy {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 14px 18px !important;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border: 1px solid #93c5fd !important;
    border-left: 4px solid #2563eb !important;
    border-radius: 12px !important;
    overflow: hidden;
    position: relative;
}
.ck-eta-road {
    position: relative;
    width: 90px;
    height: 32px;
    flex-shrink: 0;
    overflow: hidden;
}
.ck-eta-road::before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0; right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        #1e40af 0,
        #1e40af 6px,
        transparent 6px,
        transparent 12px
    );
    animation: ckEtaRoad 1.8s linear infinite;
}
@keyframes ckEtaRoad {
    from { background-position: 0 0; }
    to   { background-position: -24px 0; }
}
.ck-eta-truck {
    position: absolute;
    left: 0; bottom: 6px;
    color: #1d4ed8;
    animation: ckEtaTruckMove 4s ease-in-out infinite;
    transform-origin: center;
}
@keyframes ckEtaTruckMove {
    0%   { left: 0; transform: translateY(0); }
    45%  { left: 50%; transform: translateY(-1px); }
    55%  { left: 50%; transform: translateY(0); }
    100% { left: 0; transform: translateY(0); }
}
.ck-eta-pin {
    position: absolute;
    right: 0; top: 0;
    font-size: 14px;
    animation: ckEtaPinBob 1.6s ease-in-out infinite;
}
@keyframes ckEtaPinBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.ck-eta-smoke {
    position: absolute;
    bottom: 12px;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    animation: ckEtaSmoke 1.6s ease-out infinite;
}
.ck-eta-smoke-1 { left: 0; animation-delay: 0s; }
.ck-eta-smoke-2 { left: 4px; animation-delay: .4s; }
.ck-eta-smoke-3 { left: 8px; animation-delay: .8s; }
@keyframes ckEtaSmoke {
    0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
    40%  { opacity: .6; transform: translate(-8px, -10px) scale(1); }
    100% { opacity: 0; transform: translate(-18px, -22px) scale(1.4); }
}

.ck-eta-info {
    flex: 1;
    line-height: 1.4;
}
.ck-eta-info strong {
    display: block;
    color: #1e3a8a !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    margin-bottom: 2px;
}
.ck-eta-info span {
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
}
/* Countdown "Ordina entro …" — pill arancione di urgenza */
.ck-eta-countdown {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 3px 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    color: #c2410c !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: none;
}
.ck-eta-countdown i { color: #ea580c; font-size: 12px !important; }
.ck-eta-countdown strong {
    display: inline !important;
    color: #9a3412 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   PREMIUM UI POLISH — header · footer · pagamento
   Micro-interazioni e coerenza, nessuna modifica strutturale.
   ════════════════════════════════════════════════════════════ */

/* ── Header sticky "glassy" + ombra più morbida ── */
.sbt-header {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 28px -14px rgba(26, 26, 46, .22);
}
.sbt-nav-link:hover { transform: translateY(-1px); }

/* ── Checkout: card metodo pagamento — lift + icona a "chip" ── */
.ck-payment-card {
    transition: border-color .2s, background .2s, transform .18s, box-shadow .2s;
}
.ck-payment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -12px rgba(26, 26, 46, .20);
}
.ck-pay-content i {
    width: 46px; height: 46px; flex: 0 0 46px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    background: #f6f0f0;
    border-radius: 13px;
    transition: background .2s, transform .2s;
}
.ck-payment-card:hover .ck-pay-content i,
.ck-payment-card.selected .ck-pay-content i {
    background: #f1e2e2;
    transform: scale(1.05);
}
.ck-pay-check { font-size: 1.5rem; }

/* ── Footer: chip pagamento uniformi e interattivi ── */
.footer-payment-card {
    min-height: 42px;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.footer-payment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35);
}
.footer-payment-klarna {
    min-height: 42px;
    padding: 8px 16px !important;
}
.footer-payment-klarna img { height: 18px; }
.footer-corrieri span { transition: color .2s, transform .2s; }
.footer-corrieri span:hover { transform: translateY(-1px); color: #fff; }

/* ── Mobile: bottone carrello header = icon-button quadrato ── */
/* Sotto lg il testo "Carrello" è nascosto: senza questo, il padding largo
   lasciava un rettangolo rosa sproporzionato. */
@media (max-width: 991.98px) {
    .sbt-btn-cart {
        width: 42px; height: 42px;
        padding: 0; gap: 0;
        justify-content: center;
        border-radius: 12px;
    }
    .sbt-btn-cart .bi-bag { font-size: 1.15rem; }
    .sbt-btn-cart .sbt-cart-badge {
        position: absolute; top: -5px; right: -5px;
        border: 2px solid #fff;
    }
}

/* ── Mobile stretto: CTA "Aggiungi al carrello" sempre leggibile ── */
@media (max-width: 480px) {
    .product-add-section { gap: 7px; }
    .product-cart-btn { font-size: .85rem; padding: 12px 8px; gap: 6px; min-width: 0; }
    .product-qty-wrap .qty-btn { width: 33px; }
    .product-qty-wrap .qty-input { width: 38px; }
}

/* ── Mobile pagina prodotto: il widget WhatsApp non deve coprire la
   barra acquisto fissa in basso → lo alzo sopra di essa. ── */
@media (max-width: 991.98px) {
    body:has(.product-add-section) .wa-widget { bottom: 146px !important; }
}

/* ── Countdown "Ordina entro …" nel carrello (coerente col checkout) ── */
.cde-countdown {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 3px 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    color: #c2410c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}
.cde-countdown i { color: #ea580c; font-size: 12px; }
.cde-countdown strong {
    color: #9a3412;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   RESTYLING PRODOTTO + RECENSIONI (boutique, più colore)
   ════════════════════════════════════════════════════════════ */

/* ── Entrata morbida delle card prodotto ── */
@keyframes prodFadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
.product-price-block,
.product-varianti,
.product-details-box,
.reviews-summary,
.review-form-wrap { animation: prodFadeUp .5s cubic-bezier(.22,.61,.36,1) both; }

/* ── Sfondo descrizione: tinta boutique + accento laterale ── */
.product-details-box {
    position: relative;
    border-color: #efe0dd;
    background: linear-gradient(180deg, #fffdfc 0%, #fdf6f4 100%);
}
.product-details-box::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #c08b8b, #8b4a62);
    z-index: 1;
}
.product-details-box summary:hover { background: #fdf1ee; }
.product-details-box .pdc-content {
    background: linear-gradient(180deg, #fdf8f6 0%, #ffffff 60%);
    border-top-color: #f3e3df;
}
.pdc-content .pdc-h { color: #8b4a62; border-bottom-color: #f0ddd8; }
.pdc-content .pdc-h::after { background: linear-gradient(90deg,#c08b8b,#8b4a62); }
/* tabella guida taglie coerente col tema */
.pdc-content table tr:first-child td,
.pdc-content table th { background: #f7e9e6; color:#8b4a62; border-color:#f0ddd8; }
.pdc-content table td { border-color:#f2e6e3; }
.pdc-content table tr:nth-child(even) td { background:#fdf8f6; }

/* ── Descrizione breve: leggero pannello ── */
.product-desc {
    background: linear-gradient(135deg, #fdf8f6, #ffffff);
    border: 1px solid #f3e6e2;
    border-left: 3px solid #c08b8b;
    border-radius: 10px;
    padding: 14px 16px;
}

/* ════════ RECENSIONI ════════ */
.reviews-section .section-title-new { color:#1a1a2e; }

/* Riepilogo colorato */
.reviews-summary {
    background: linear-gradient(160deg, #ffffff 0%, #fdf4f1 100%);
    border: 1px solid #f0e0dd;
    box-shadow: 0 8px 24px rgba(154,107,120,.09);
}
.rs-score {
    background: linear-gradient(135deg, #c08b8b, #8b4a62);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.rs-stelle { color: #f5b301; text-shadow: 0 1px 6px rgba(245,179,1,.25); }
.rs-bar-fill { background: linear-gradient(90deg, #f5b301, #f39c12); }
.rs-empty-icon {
    display: inline-block;
    background: linear-gradient(135deg, #f3c9c9, #d99aa6);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-size: 2.6rem;
    animation: rsStarFloat 3s ease-in-out infinite;
}
@keyframes rsStarFloat {
    0%,100% { transform: translateY(0) rotate(0); }
    50%     { transform: translateY(-6px) rotate(-8deg); }
}

/* Card recensione con accento al hover */
.review-card {
    border-color: #f1e6e3;
    border-left: 3px solid transparent;
    transition: box-shadow .18s, border-left-color .18s, transform .18s;
}
.review-card:hover {
    box-shadow: 0 8px 22px rgba(154,107,120,.12);
    border-left-color: #c08b8b;
    transform: translateY(-2px);
}
.review-stelle { color: #f5b301; text-shadow: 0 1px 4px rgba(245,179,1,.22); }

/* Form recensione: pannello gradiente + campi a tema */
.review-form-wrap {
    background: linear-gradient(135deg, #fdf6f4 0%, #faeeea 100%);
    border: 1px solid #f0e0dd;
    box-shadow: 0 8px 26px rgba(154,107,120,.08);
    position: relative;
    overflow: hidden;
}
.review-form-wrap::before {
    content: '';
    position: absolute; top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(192,139,139,.18), transparent 70%);
    pointer-events: none;
}
.review-form-wrap h5 { color: #8b4a62; position: relative; }
.review-form-wrap h5::before {
    content: '✍️'; margin-right: 8px;
}
.review-form-wrap .form-control {
    border: 1.5px solid #ecdcd9;
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.review-form-wrap .form-control:focus {
    border-color: #c08b8b;
    box-shadow: 0 0 0 .2rem rgba(192,139,139,.18);
}
.review-form-wrap .btn-dark {
    background: linear-gradient(135deg, #c08b8b, #8b4a62);
    border: none;
    box-shadow: 0 6px 16px rgba(139,74,98,.28);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.review-form-wrap .btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(139,74,98,.36);
    filter: brightness(1.05);
}

/* Star selector: più grande, animato, con bagliore */
.star-selector { gap: 5px; height: auto; padding: 3px 0; }
.star-opt {
    font-size: 1.95rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(243,156,18,.28));
    transition: transform .12s ease;
    transform-origin: center;
}
.star-opt:hover { transform: scale(1.25) translateY(-1px); }

/* Comparsa nuova recensione (inserita via AJAX, niente reload) */
@keyframes fadeInRec {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}