/* Font del sito: Fraunces per titoli e logo, Inter per i testi (con ripiego sui font di sistema) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================
   NICORA – stile condiviso (home, crea il tuo cesto, carrello)
   Da caricare DOPO style.css
   ========================================================== */
:root {
    --ink: #14152B;
    --navy: #1D30D6;
    --gold: #1D30D6;
    --gold-soft: #AEB8FF;
    --cream: #faf7f2;
    --sand: #EEF0FB;
    --line: #DDDDE8;
    --muted: #4A4C63;
    --red: #a33324;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --shadow-sm: 0 2px 12px rgba(20,21,43, .06);
    --shadow-md: 0 22px 48px rgba(20,21,43, .12);
    --pad: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input { font-family: inherit; }

.n-wrap { max-width: 1480px; margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Barra superiore ---------- */
.n-topbar {
    background: var(--ink);
    color: #f1e8d8;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 13px 16px;
}
.n-topbar b { color: var(--gold-soft); font-weight: 800; }

/* ---------- Header ---------- */
.n-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.n-header-top {
    max-width: 1480px;
    margin: 0 auto;
    padding: 26px var(--pad) 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
}
.n-logo {
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 400;
    letter-spacing: .36em;
    padding-left: .36em;
    line-height: 1;
    color: var(--ink);
}
.n-header-left { display: flex; align-items: center; }
.n-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.n-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 0 22px;
    height: 54px;
    transition: border-color .25s, background .25s;
}
.n-search:focus-within { border-color: var(--navy); background: #fff; }
.n-search input {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    font-size: 17px;
    color: var(--ink);
}
.n-search svg { flex: none; width: 22px; height: 22px; color: var(--muted); }

.n-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    transition: background .25s;
}
.n-icon-btn:hover { background: var(--sand); }
.n-icon-btn svg { width: 28px; height: 28px; }

.n-icon-btn svg, .n-search svg, .n-back svg, .n-nav svg, .n-value svg, .n-cat svg, .n-back svg {
    fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.n-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    font-size: 16px;
    font-weight: 700;
    color: var(--muted);
    transition: color .2s;
}
.n-back:hover { color: var(--ink); }
.n-back svg { width: 22px; height: 22px; stroke-width: 2.2; }

.n-nav {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    justify-content: center;
    gap: 56px;
}
.n-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 4px 18px;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .2s;
}
.n-nav a svg { width: 22px; height: 22px; stroke-width: 1.8; }
.n-nav a:hover, .n-nav a.active { color: var(--ink); }
.n-nav a.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--gold);
    border-radius: 3px 3px 0 0;
}

/* ---------- Bottoni ---------- */
.n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 14px 34px;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: .03em;
    transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.n-btn:active { transform: scale(.98); }
.n-btn-primary { background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(29,48,214, .22); }
.n-btn-primary:hover { background: var(--ink); }
.n-btn-light { background: #fff; color: var(--ink); }
.n-btn-light:hover { background: var(--gold-soft); }
.n-btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.n-btn-outline:hover { background: var(--ink); color: #fff; }
.n-btn-block { width: 100%; min-height: 62px; font-size: 18px; }
.n-btn[disabled] { opacity: .6; cursor: default; }

/* ---------- Sezioni ---------- */
.n-section { padding: 104px 0 0; }
.n-eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}
.n-title {
    font-family: var(--serif);
    font-size: 50px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.015em;
    margin: 0;
}
.n-title-md { font-size: 38px; }
.n-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.n-lead { color: var(--muted); font-size: 18.5px; max-width: 600px; margin: 14px 0 0; }

/* ---------- Hero (home) ---------- */
.n-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    border-bottom: 4px solid var(--gold);
    /* Ordine: 1) tua foto /img/hero.jpg, 2-4) immagini di riserva, 5) sfondo scuro.
       Se un'immagine non carica, il browser passa semplicemente alla successiva. */
    background:
        linear-gradient(90deg, rgba(20,21,43, .88) 0%, rgba(20,21,43, .6) 50%, rgba(20,21,43, .22) 100%),
        url('/img/hero.jpg') center / cover no-repeat,
        url('https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?auto=format&fit=crop&w=1800&q=80') center / cover no-repeat,
        url('https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=1800&q=80') center / cover no-repeat,
        url('https://images.unsplash.com/photo-1541592106381-b31e9677c0e5?auto=format&fit=crop&w=1800&q=80') center / cover no-repeat,
        linear-gradient(135deg, #14152B 0%, #1D30D6 100%);
}
.n-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 130px var(--pad) 120px; }
.n-hero .n-eyebrow { color: var(--gold-soft); font-size: 15px; }
.n-hero h1 {
    font-family: var(--serif);
    font-size: 74px;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    max-width: 900px;
}
.n-hero p { font-size: 22px; line-height: 1.55; max-width: 640px; margin: 0 0 40px; color: #E3E5F2; }
.n-hero .n-btn { min-height: 64px; padding: 16px 42px; font-size: 18px; }

/* ---------- Striscia valori ---------- */
.n-values { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-bottom: 1px solid var(--line); }
.n-value { display: flex; align-items: center; gap: 20px; padding: 34px var(--pad); border-right: 1px solid var(--line); }
.n-value:last-child { border-right: 0; }
.n-value svg { flex: none; width: 40px; height: 40px; color: var(--gold); stroke-width: 1.5; }
.n-value strong { display: block; font-size: 18px; }
.n-value span { font-size: 16px; color: var(--muted); }

/* ---------- Categorie ---------- */
.n-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.n-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    padding: 30px 26px;
    border-radius: 24px;
    border: 1.5px solid var(--line);
    background: #fff;
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.n-cat::before {
    content: "";
    position: absolute;
    right: -46px; top: -46px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: var(--tint, var(--sand));
    transition: transform .6s var(--ease);
}
.n-cat:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--navy); }
.n-cat:hover::before { transform: scale(1.5); }
.n-cat svg { position: relative; width: 44px; height: 44px; stroke-width: 1.5; }
.n-cat span { position: relative; font-family: var(--serif); font-size: 23px; line-height: 1.22; }
.n-cat:nth-child(1) { --tint: #f3e6c4; }
.n-cat:nth-child(2) { --tint: #E3E7F8; }
.n-cat:nth-child(3) { --tint: #f4dcd5; }
.n-cat:nth-child(4) { --tint: #f1ead2; }
.n-cat:nth-child(5) { --tint: #e8dbe3; }
.n-cat:nth-child(6) { --tint: #e2ead3; }

/* ---------- Card prodotto ---------- */
.n-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 34px; }
.n-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.n-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: #cdc2ae; }
.n-card-img { aspect-ratio: 4 / 3; background: var(--sand); overflow: hidden; }
.n-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.n-card:hover .n-card-img img { transform: scale(1.05); }
.n-card-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.n-card-cat { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.n-card-title { font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.25; margin: 0 0 10px; }
.n-card-desc {
    font-size: 16.5px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.n-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.n-price { font-size: 28px; font-weight: 800; letter-spacing: -.01em; }

.n-skeleton { border-radius: 24px; height: 440px; background: linear-gradient(100deg, #E9EBF6 30%, #f8f3ea 50%, #E9EBF6 70%); background-size: 300% 100%; animation: n-shimmer 1.4s infinite; }
@keyframes n-shimmer { to { background-position: -150% 0; } }
.n-empty { grid-column: 1 / -1; text-align: center; padding: 64px 20px; color: var(--muted); font-size: 18px; }

/* ---------- Banner cesto (home) ---------- */
.n-cta {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 56px;
    margin-top: 110px;
    padding: 80px 84px;
    border-radius: 32px;
    color: #fff;
    background: linear-gradient(135deg, #14152B 0%, #1D30D6 100%);
    position: relative;
    overflow: hidden;
}
.n-cta::after {
    content: "";
    position: absolute;
    right: -130px; bottom: -170px;
    width: 460px; height: 460px;
    border-radius: 50%;
    border: 1px solid rgba(174,184,255, .35);
    box-shadow: 0 0 0 64px rgba(174,184,255, .05);
}
.n-cta .n-eyebrow { color: var(--gold-soft); }
.n-cta h2 { font-family: var(--serif); font-size: 48px; font-weight: 400; line-height: 1.12; margin: 0 0 18px; }
.n-cta p { margin: 0 0 34px; color: #D3D6E8; font-size: 19px; max-width: 520px; }
.n-cta .n-btn { min-height: 60px; }
.n-cta-steps { position: relative; z-index: 1; display: grid; gap: 18px; }
.n-cta-step { display: flex; gap: 20px; align-items: center; padding: 22px 26px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; background: rgba(255, 255, 255, .06); }
.n-cta-step b { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--ink); font-size: 18px; }
.n-cta-step span { font-size: 18px; }

.n-page-end { height: 110px; }

/* ---------- Hero compatto (cesto, carrello) ---------- */
.n-hero-sm {
    background: linear-gradient(135deg, #14152B 0%, #1D30D6 100%);
    color: #fff;
    padding: 80px 0 68px;
    border-bottom: 4px solid var(--gold);
}
.n-hero-sm .n-eyebrow { color: var(--gold-soft); }
.n-hero-sm h1 { font-family: var(--serif); font-size: 58px; font-weight: 400; line-height: 1.1; margin: 0 0 16px; letter-spacing: -.015em; }
.n-hero-sm p { font-size: 21px; color: #D3D6E8; max-width: 720px; margin: 0; }
.n-steps { display: flex; gap: 44px; margin-top: 40px; flex-wrap: wrap; }
.n-step { display: flex; align-items: center; gap: 14px; font-size: 17.5px; color: #E3E5F2; }
.n-step b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gold-soft); color: var(--gold-soft); font-size: 15px; }

/* ---------- Layout con riepilogo (cesto + carrello) ---------- */
.n-builder { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: start; padding-top: 72px; padding-bottom: 110px; }

.n-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 72px; }
.n-preset {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: 36px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 24px;
    transition: border-color .3s, box-shadow .4s var(--ease), transform .4s var(--ease);
}
.n-preset:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.n-preset h4 { font-family: var(--serif); font-size: 27px; font-weight: 400; margin: 0 0 10px; line-height: 1.2; }
.n-preset p { margin: 0; font-size: 17px; color: var(--muted); }
.n-preset .n-btn { align-self: flex-start; }

.n-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.n-chip {
    min-height: 48px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--muted);
    border-radius: 999px;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 700;
    transition: all .2s;
}
.n-chip:hover { border-color: var(--ink); color: var(--ink); }
.n-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.n-builder .n-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }
.n-builder .n-card-title { font-size: 22px; min-height: 2.5em; }
.n-card.in-box { border-color: var(--navy); box-shadow: 0 0 0 1.5px var(--navy); }

.n-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 5px;
    font-size: 16.5px;
    font-weight: 700;
}
.n-stepper button {
    width: 46px; height: 46px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    transition: background .2s, color .2s;
}
.n-stepper button:hover { background: var(--navy); color: #fff; }

/* ---------- Riepilogo laterale ---------- */
.n-summary {
    position: sticky;
    top: 190px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 28px;
    padding: 38px;
    box-shadow: var(--shadow-sm);
}
.n-summary h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; margin: 0 0 24px; }
.n-ship { margin-bottom: 26px; }
.n-ship-text { font-size: 16.5px; color: var(--muted); margin-bottom: 12px; }
.n-ship-text b { color: var(--ink); }
.n-ship-bar { height: 10px; border-radius: 10px; background: var(--sand); overflow: hidden; }
.n-ship-bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 10px; transition: width .5s var(--ease); }

.n-lines { max-height: 400px; overflow-y: auto; margin: 0 -8px 20px; padding: 0 8px; }
.n-lines-empty { font-size: 17px; color: var(--muted); padding: 24px 0 32px; text-align: center; }
.n-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid #E9EBF6; }
.n-line:last-child { border-bottom: 0; }
.n-line img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--sand); }
.n-line-name { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.n-line-meta { font-size: 15px; color: var(--muted); }
.n-line-price { font-size: 17px; font-weight: 800; text-align: right; }
.n-line-del { border: 0; background: none; padding: 6px 0; font-size: 14.5px; font-weight: 600; color: var(--red); text-decoration: underline; }

.n-total { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0 26px; border-top: 1.5px solid var(--line); }
.n-total span { font-size: 18px; color: var(--muted); }
.n-total strong { font-size: 34px; letter-spacing: -.015em; }
.n-row { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 18px; color: var(--muted); }
.n-row strong { color: var(--ink); }

/* ---------- Carrello ---------- */
.n-cart-item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 28px;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 24px;
    padding: 26px;
    margin-bottom: 22px;
    transition: border-color .3s, box-shadow .3s;
}
.n-cart-item:hover { border-color: var(--navy); box-shadow: 0 12px 30px rgba(29,48,214, .08); }
.n-cart-item > img { width: 120px; height: 120px; border-radius: 18px; object-fit: cover; background: var(--sand); }
.n-cart-name { font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0 0 6px; }
.n-cart-unit { font-size: 16.5px; color: var(--muted); margin: 0 0 16px; }
.n-cart-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.n-cart-line-total { font-size: 26px; font-weight: 800; }
.n-cart-item .n-stepper { display: inline-flex; gap: 18px; }

.n-box { background: #fff; border: 1.5px solid var(--line); border-radius: 24px; padding: 30px 34px; margin-bottom: 28px; box-shadow: var(--shadow-sm); }
.n-box .n-ship { margin: 0; }
.n-box .n-ship-text { font-size: 18px; font-weight: 600; color: var(--ink); }
.n-cart-empty { background: #fff; border: 1.5px solid var(--line); border-radius: 24px; padding: 72px 32px; text-align: center; }
.n-cart-empty p { font-size: 21px; color: var(--muted); margin: 0 0 28px; }

.n-form-title { font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 30px 0 16px; }
.n-input {
    width: 100%;
    height: 60px;
    padding: 0 22px;
    margin-bottom: 14px;
    border-radius: 16px;
    border: 1.5px solid var(--line);
    background: #fdfcfa;
    font-size: 17px;
    color: var(--ink);
    outline: none;
    transition: border-color .2s, background .2s;
}
.n-input:focus { border-color: var(--navy); background: #fff; }

/* ---------- Barra mobile (cesto) ---------- */
.n-mobilebar { display: none; }

/* ---------- Notifica ---------- */
.n-toast {
    position: fixed;
    left: 50%;
    bottom: 36px;
    transform: translate(-50%, 24px);
    max-width: calc(100vw - 32px);
    background: var(--ink);
    color: #fff;
    padding: 18px 30px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .4s var(--ease);
    z-index: 120;
}
.n-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1280px) {
    :root { --pad: 40px; }
    .n-cats { grid-template-columns: repeat(3, 1fr); }
    .n-builder { grid-template-columns: 1fr; gap: 40px; }
    .n-summary { position: static; }
    .n-hero h1 { font-size: 62px; }
    .n-cta { padding: 64px 56px; }
}

@media (max-width: 900px) {
    :root { --pad: 22px; }
    body { font-size: 17px; }

    .n-topbar { font-size: 12.5px; letter-spacing: .1em; padding: 11px 12px; }

    /* Header: logo + icone sopra, ricerca sotto, navbar a 3 schede grandi */
    .n-header-top {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "menu logo icons" "search search search";
        padding: 14px var(--pad) 12px;
        gap: 12px;
    }
    .n-header-left { grid-area: menu; }
    .n-logo { grid-area: logo; justify-self: center; font-size: 27px; letter-spacing: .24em; padding-left: .24em; }
    .n-header-right { display: contents; }
    .n-icons { grid-area: icons; }
    .n-search { grid-area: search; max-width: none; width: 100%; height: 52px; }
    .n-header-right .n-search { max-width: none; margin: 0; }
    .n-icon-btn { width: 50px; height: 50px; }

    .n-nav {
        padding: 0;
        gap: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--line);
    }
    .n-nav a {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 12px 4px 13px;
        text-align: center;
        font-size: 12.5px;
        letter-spacing: .08em;
        line-height: 1.2;
        min-height: 72px;
    }
    .n-nav a svg { width: 26px; height: 26px; }
    .n-nav a + a { border-left: 1px solid var(--line); }

    .n-section { padding-top: 72px; }
    .n-title { font-size: 36px; }
    .n-title-md { font-size: 30px; }
    .n-section-head { margin-bottom: 30px; flex-direction: column; align-items: flex-start; }

    .n-hero-inner { padding: 64px var(--pad) 60px; }
    .n-hero h1 { font-size: 42px; }
    .n-hero p { font-size: 19px; margin-bottom: 30px; }
    .n-hero .n-btn { width: 100%; }

    .n-values { grid-template-columns: 1fr; }
    .n-value { padding: 22px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
    .n-value:last-child { border-bottom: 0; }

    .n-cats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .n-cat { min-height: 180px; padding: 22px 18px; border-radius: 20px; }
    .n-cat svg { width: 38px; height: 38px; }
    .n-cat span { font-size: 19px; }

    .n-grid { grid-template-columns: 1fr; gap: 24px; }
    .n-card-body { padding: 22px; }
    .n-card-title { font-size: 23px; }
    .n-card .n-btn { min-height: 52px; padding: 12px 28px; }

    .n-cta { grid-template-columns: 1fr; gap: 36px; padding: 44px 26px; margin-top: 80px; border-radius: 26px; }
    .n-cta h2 { font-size: 34px; }
    .n-cta p { font-size: 18px; }
    .n-cta .n-btn { width: 100%; }

    .n-hero-sm { padding: 52px 0 46px; }
    .n-hero-sm h1 { font-size: 38px; }
    .n-hero-sm p { font-size: 18px; }
    .n-steps { gap: 14px 28px; margin-top: 28px; }
    .n-step { font-size: 16px; }

    .n-builder { padding-top: 44px; padding-bottom: 130px; }
    .n-presets { grid-template-columns: 1fr; gap: 16px; margin-bottom: 52px; }
    .n-preset { padding: 26px; }
    .n-preset .n-btn { width: 100%; }
    .n-chips { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 2px var(--pad) 6px; scrollbar-width: none; }
    .n-chips::-webkit-scrollbar { display: none; }
    .n-chip { flex: none; }

    .n-builder .n-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .n-builder .n-card { border-radius: 20px; }
    .n-builder .n-card-body { padding: 16px 16px 18px; }
    .n-builder .n-card-title { font-size: 18px; min-height: 0; }
    .n-builder .n-card-cat { font-size: 11.5px; letter-spacing: .1em; }
    .n-builder .n-price { font-size: 23px; }
    .n-builder .n-card .n-btn { width: 100%; padding: 12px 10px; }
    .n-builder .n-stepper { font-size: 14px; }
    .n-builder .n-stepper button { width: 42px; height: 42px; }
    .n-builder .n-stepper span { white-space: nowrap; }

    .n-summary { padding: 28px 22px; border-radius: 24px; scroll-margin-top: 150px; }
    .n-summary h3 { font-size: 27px; }
    .n-total strong { font-size: 30px; }
    .n-lines { max-height: none; }

    /* Cart */
    .n-cart-item { grid-template-columns: 92px 1fr; gap: 16px 18px; padding: 20px; border-radius: 22px; align-items: start; }
    .n-cart-item > img { width: 92px; height: 92px; border-radius: 16px; }
    .n-cart-name { font-size: 21px; }
    .n-cart-unit { margin-bottom: 0; font-size: 15.5px; }
    .n-cart-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #E9EBF6; }
    .n-cart-item .n-stepper { order: 1; }
    .n-cart-item .n-cart-side-right { order: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .n-box { padding: 22px; border-radius: 22px; }
    .n-box .n-ship-text { font-size: 17px; }
    .n-input { height: 58px; font-size: 16px; }
    .n-cart-empty { padding: 48px 22px; }

    /* Barra fissa in basso nella pagina cesto */
    .n-mobilebar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .98);
        border-top: 1px solid var(--line);
        box-shadow: 0 -10px 30px rgba(20,21,43, .1);
    }
    .n-mobilebar small { display: block; font-size: 13px; color: var(--muted); line-height: 1.2; }
    .n-mobilebar strong { font-size: 24px; line-height: 1.2; }
    .n-mobilebar .n-btn { min-height: 54px; padding: 12px 26px; }

    .n-toast { bottom: 100px; font-size: 16px; padding: 16px 22px; }
}

@media (max-width: 380px) {
    .n-logo { font-size: 23px; letter-spacing: .2em; padding-left: .2em; }
    .n-nav a { font-size: 11.5px; }
    .n-hero h1 { font-size: 36px; }
}

/* ==========================================================
   MYSTERY BOX + riuso delle schede "specialità"
   ========================================================== */
.n-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    background: rgba(20,21,43, .88);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
}
.n-badge-gold { left: auto; right: 18px; background: var(--gold-soft); color: var(--ink); }
.n-card-img { position: relative; }

.n-cat small { position: relative; display: block; margin-top: 8px; font-family: var(--sans); font-size: 15.5px; line-height: 1.4; color: var(--muted); }
.n-cats.n-cats-4 { grid-template-columns: repeat(4, 1fr); }
.n-cat.n-cat-static { cursor: default; }

.n-mystery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 36px; }
.n-mystery-grid .n-card-title { font-size: 28px; }

.n-inner-label { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.n-inner-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 10px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 16.5px;
    transition: border-color .2s, background .2s;
}
.n-inner-item:hover { border-color: var(--navy); background: #fff; }
.n-inner-item a { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--navy); }
.n-inner-item a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.n-inner-item strong { white-space: nowrap; }
.n-inner-more { font-size: 15.5px; color: var(--muted); margin: 4px 0 0; }

.n-mfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 24px 28px;
    background: var(--cream);
    border-top: 1.5px solid var(--line);
}
.n-mfoot small { display: block; font-size: 15px; color: var(--muted); }
.n-mfoot small b { color: var(--ink); }
.n-save { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 800; color: #2f6b3a; }

@media (max-width: 1280px) {
    .n-cats.n-cats-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .n-mystery-grid { grid-template-columns: 1fr; gap: 24px; }
    .n-mystery-grid .n-card-title { font-size: 25px; }
    .n-cat small { font-size: 14.5px; }
    .n-mfoot { padding: 20px 22px; }
    .n-mfoot .n-btn { width: 100%; }
    .n-badge { top: 14px; left: 14px; font-size: 11.5px; padding: 7px 14px; }
    .n-badge-gold { left: auto; right: 14px; }
}

/* ==========================================================
   HEADER: menu a sinistra, logo al centro, ricerca/profilo/carrello a destra
   ========================================================== */
.n-header-right { gap: 14px; }
.n-header-right .n-search { flex: 1 1 auto; min-width: 0; max-width: 340px; margin: 0; }
.n-icons { display: flex; align-items: center; gap: 6px; }
.n-menu-btn svg { stroke-width: 2; }

/* Pannello menu */
.n-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(20,21,43, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.n-drawer {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 210;
    width: min(420px, 88vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .4s var(--ease);
    box-shadow: 0 0 60px rgba(0, 0, 0, .25);
    overflow-y: auto;
}
body.n-menu-open .n-drawer-overlay { opacity: 1; pointer-events: auto; }
body.n-menu-open .n-drawer { transform: none; }
body.n-menu-open { overflow: hidden; }

.n-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.n-drawer-head .n-logo { font-size: 26px; }
.n-drawer-links { padding: 14px 14px 20px; }
.n-drawer-links a {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 68px;
    padding: 0 18px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    transition: background .2s;
}
.n-drawer-links a:hover, .n-drawer-links a.active { background: var(--sand); }
.n-drawer-links a svg { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.n-drawer-note { margin-top: auto; padding: 24px 28px 30px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--muted); }
.n-drawer-note b { color: var(--ink); }

/* ==========================================================
   MYSTERY BOX nel layout "cesto"
   ========================================================== */
.n-cats.n-cats-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 64px; }
.n-cats-2 .n-cat { min-height: 190px; }
.n-builder .n-mystery-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; }
.n-builder .n-mystery-grid .n-card-title { font-size: 25px; min-height: 0; }
.n-card.is-picked { border-color: var(--navy); box-shadow: 0 0 0 1.5px var(--navy); }
.n-card.is-picked .n-badge-gold { display: block; }
.n-badge-gold { display: none; }
.n-mfoot-v { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; padding: 24px 28px 28px; background: var(--cream); border-top: 1.5px solid var(--line); }
.n-mfoot-v .n-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.n-mfoot-v small { display: block; font-size: 15px; color: var(--muted); }
.n-mfoot-v small b { color: var(--ink); }
.n-pick-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 4px; font-size: 16.5px; }
.n-pick-line span { color: var(--muted); }

@media (max-width: 900px) {
    .n-cats.n-cats-2 { margin-bottom: 48px; }
    .n-cats-2 .n-cat { min-height: 170px; }
    .n-builder .n-mystery-grid { grid-template-columns: 1fr; gap: 20px; }
    .n-drawer-links a { min-height: 64px; }
}

/* ==========================================================
   HERO HOME: testo + immagini dei prodotti
   ========================================================== */
[hidden] { display: none !important; }
.n-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.n-hero-art { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 500px; }
.n-hero-art .t {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: var(--sand);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}
.n-hero-art .t img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.n-hero-art .t:hover img { transform: scale(1.05); }
.n-hero-art[data-n="3"] .t:first-child { grid-row: span 2; }
.n-hero-art[data-n="2"] { grid-template-rows: 1fr; }
.n-hero-art[data-n="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }

@media (min-width: 901px) {
    .n-hero-grid { padding-top: 96px; padding-bottom: 96px; }
    .n-hero-grid h1 { font-size: clamp(44px, 4.6vw, 66px); }
}
@media (max-width: 900px) {
    .n-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .n-hero-art { height: 190px; gap: 10px; grid-template-columns: none !important; grid-template-rows: 1fr !important; grid-auto-flow: column; grid-auto-columns: 1fr; }
    .n-hero-art .t { border-radius: 18px; }
    .n-hero-art[data-n="3"] .t:first-child { grid-row: auto; }
}

/* ==========================================================
   POPUP "AGGIUNTO AL CARRELLO"
   ========================================================== */
.n-pop-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20,21,43, .55);
    opacity: 0;
    transition: opacity .3s;
}
.n-pop-overlay.show { opacity: 1; }
.n-pop {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 28px;
    padding: 36px 34px 32px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    transform: translateY(24px) scale(.97);
    transition: transform .4s var(--ease);
}
.n-pop-overlay.show .n-pop { transform: none; }
.n-pop-x { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; }
.n-pop-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.n-pop-title { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-size: 28px; margin-bottom: 24px; padding-right: 40px; }
.n-pop-check { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #2f6b3a; color: #fff; font-size: 18px; font-family: var(--sans); }
.n-pop-item { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; padding: 16px; background: var(--cream); border: 1.5px solid var(--line); border-radius: 18px; }
.n-pop-item img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; background: var(--sand); }
.n-pop-item .n-line-name { font-size: 18px; margin-bottom: 4px; }
.n-pop-price { font-size: 22px; font-weight: 800; }
.n-pop-ship { margin-top: 22px; }
.n-pop-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 17px; color: var(--muted); }
.n-pop-row strong { font-size: 24px; color: var(--ink); }
.n-pop-ship p { margin: 12px 0 0; font-size: 16.5px; color: var(--muted); }
.n-pop-ship p b { color: var(--ink); }
.n-pop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.n-pop-actions .n-btn { padding: 14px 18px; font-size: 16px; text-align: center; }

@media (max-width: 900px) {
    .n-pop-overlay { align-items: flex-end; padding: 0; }
    .n-pop { max-width: none; border-radius: 28px 28px 0 0; padding: 30px 22px calc(26px + env(safe-area-inset-bottom)); transform: translateY(100%); }
    .n-pop-title { font-size: 25px; }
    .n-pop-actions { grid-template-columns: 1fr; }
    .n-pop-actions .n-btn:last-child { order: -1; }
}

/* ==========================================================
   BADGE NUMERO ARTICOLI NEL CARRELLO
   ========================================================== */
.n-cart-count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 2px solid #fff;
    background: var(--gold-soft);
    color: var(--ink);
    font-style: normal;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
}
.n-drawer-links .n-cart-count { position: static; margin-left: auto; border-color: transparent; }

/* ==========================================================
   CHECKOUT A PASSI (carrello)
   ========================================================== */
.n-stepcard {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 24px;
    padding: 32px 34px 34px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}
.n-stepcard.reveal { animation: n-reveal .5s var(--ease); }
@keyframes n-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.n-stepcard-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.n-stepcard-head h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; margin: 0; }
.n-stepcard-head .num {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    transition: background .3s;
}
.n-stepcard.done .num { background: #2f6b3a; font-size: 0; }
.n-stepcard.done .num::after { content: "✓"; font-size: 20px; }

.n-fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.n-fields .s6 { grid-column: span 6; }
.n-fields .s4 { grid-column: span 4; }
.n-fields .s3 { grid-column: span 3; }
.n-fields .s2 { grid-column: span 2; }
.n-fields .s1 { grid-column: span 1; }
.n-label { display: block; font-size: 14.5px; font-weight: 700; color: var(--muted); margin: 0 0 7px 4px; }
.n-fields .n-input { margin: 0; }
.n-input.err { border-color: var(--red); background: #fff8f7; }
.n-sub-title { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 10px 0 -2px; grid-column: span 6; }

/* Coupon */
.n-coupon { margin-top: 24px; padding-top: 22px; border-top: 1.5px dashed var(--line); }
.n-coupon-toggle { border: 0; background: none; padding: 6px 0; font-size: 17px; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.n-coupon-row { display: flex; gap: 12px; margin-top: 14px; }
.n-coupon-row .n-input { margin: 0; text-transform: uppercase; }
.n-coupon-row .n-btn { flex: none; min-height: 60px; }
.n-coupon-msg { margin: 10px 4px 0; font-size: 15.5px; color: var(--muted); }
.n-coupon-msg.bad { color: var(--red); }
.n-coupon-ok { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 10px 10px 18px; border-radius: 999px; background: #e9f3ea; color: #2f6b3a; font-weight: 700; font-size: 16px; }
.n-coupon-ok button { border: 0; background: #fff; color: #2f6b3a; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 700; }

/* Scelte (consegna / pagamento) */
.n-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.n-choices.col { grid-template-columns: 1fr; }
.n-choice {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    width: 100%;
    text-align: left;
    padding: 22px 24px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    color: var(--ink);
    font-size: 17px;
    transition: border-color .2s, box-shadow .2s, background .2s, transform .25s var(--ease);
}
.n-choice:hover { border-color: #b9ad97; transform: translateY(-2px); }
.n-choice.sel { border-color: var(--navy); background: #f6f8fb; box-shadow: 0 0 0 1.5px var(--navy); }
.n-choice svg { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.n-choice b { display: block; font-size: 18.5px; margin-bottom: 3px; }
.n-choice span { font-size: 15.5px; color: var(--muted); line-height: 1.4; }
.n-choice em { font-style: normal; font-weight: 800; font-size: 16px; white-space: nowrap; }
.n-choice.sel em { color: var(--navy); }
.n-choices:not(.col) .n-choice { grid-template-columns: auto 1fr; }
.n-choices:not(.col) .n-choice em { grid-column: 2; }

/* Punti Buon Gusto */
.n-points {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 22px;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, #EEF0FB 0%, #D9DEFB 100%);
    border: 1px solid #e8d49a;
}
.n-points .ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.n-points .ic svg { width: 26px; height: 26px; fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.n-points small { display: block; font-size: 14.5px; color: #1424A8; }
.n-points strong { font-size: 21px; color: var(--ink); }

/* Riepilogo */
.n-row.discount strong { color: #2f6b3a; }
.n-row .muted { color: var(--muted); font-weight: 500; }
.n-summary .n-btn-block[disabled] { background: #c9c2b5; box-shadow: none; opacity: 1; cursor: not-allowed; }

/* Ordine completato */
.n-success { max-width: 720px; margin: 0 auto; padding: 80px 0 110px; text-align: center; }
.n-success .ok { width: 92px; height: 92px; margin: 0 auto 28px; border-radius: 50%; display: grid; place-items: center; background: #e9f3ea; color: #2f6b3a; font-size: 46px; }
.n-success h2 { font-family: var(--serif); font-size: 44px; font-weight: 400; margin: 0 0 14px; }
.n-success p { font-size: 19px; color: var(--muted); margin: 0 0 12px; }
.n-success .num { display: inline-block; margin: 14px 0 26px; padding: 14px 28px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-weight: 800; font-size: 22px; letter-spacing: .08em; color: var(--ink); }
.n-success .n-points { text-align: left; max-width: 420px; margin: 0 auto 34px; }

@media (max-width: 900px) {
    .n-stepcard { padding: 24px 20px 26px; border-radius: 22px; }
    .n-stepcard-head h3 { font-size: 24px; }
    .n-fields { gap: 14px; }
    .n-fields .m6 { grid-column: span 6; }
    .n-fields .m3 { grid-column: span 3; }
    .n-choices { grid-template-columns: 1fr; }
    .n-choice { padding: 20px; gap: 14px; }
    .n-coupon-row { flex-direction: column; }
    .n-coupon-row .n-btn { width: 100%; }
    .n-success { padding: 56px 0 90px; }
    .n-success h2 { font-size: 34px; }
    .n-cart-count { top: 1px; right: -1px; }
}

/* ==========================================================
   RIFINITURE 2026 – font coerenti, home che invoglia all'acquisto, mobile
   (solo aggiunte: nessuna regola sopra è stata tolta)
   ========================================================== */

/* style.css imposta il font di sistema su OGNI elemento (*): qui torna a valere quello del sito */
*, *::before, *::after { font-family: inherit; }
body { font-family: var(--sans); font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4, .n-title, .n-logo { font-optical-sizing: auto; }
.n-title, .n-hero h1, .n-hero-sm h1, .n-cta h2, .n-card-title, .n-cart-name, .n-summary h3, .n-stepcard-head h3 { letter-spacing: -.01em; }
.n-price, .n-total strong, .n-cart-line-total { font-variant-numeric: tabular-nums; }

/* ---------- Hero home: secondo pulsante + garanzie ---------- */
.n-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.n-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.n-btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.n-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 16px; color: #E3E5F2; }
.n-hero-trust li { display: flex; align-items: center; gap: 10px; }
.n-hero-trust li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(174,184,255, .22); color: var(--gold-soft); font-size: 13px; font-weight: 800; }

/* ---------- Striscia valori a 4 ---------- */
.n-values.n-values-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Categorie cliccabili che filtrano ---------- */
.n-cat { cursor: pointer; }
.n-cat.is-active { border-color: var(--navy); box-shadow: 0 0 0 1.5px var(--navy); }

/* ---------- Griglia prodotti home ---------- */
.n-products-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.n-products-tools .n-chips { margin: 0; }
.n-products-count { font-size: 16px; color: var(--muted); white-space: nowrap; }
.n-card-points { display: inline-flex; align-items: center; gap: 6px; margin: -10px 0 18px; font-size: 14px; font-weight: 700; color: #8a6a1d; }
.n-card-points::before { content: "★"; color: var(--gold); }
.n-card .n-btn.is-added { background: #2f6b3a; box-shadow: none; }
.n-card-img { cursor: default; }

/* ---------- Riepilogo cesto / mystery: pulsante più evidente ---------- */
.n-summary .n-btn-block:not([disabled]) { box-shadow: 0 12px 26px rgba(29,48,214, .25); }

/* ==========================================================
   TABLET
   ========================================================== */
@media (max-width: 1280px) {
    .n-values.n-values-4 { grid-template-columns: repeat(2, 1fr); }
    .n-values.n-values-4 .n-value:nth-child(2) { border-right: 0; }
    .n-values.n-values-4 .n-value:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ==========================================================
   TELEFONO: tutto più compatto, così si vede cosa si compra
   ========================================================== */
@media (max-width: 900px) {
    body { font-size: 16px; }

    .n-section { padding-top: 56px; }
    .n-title { font-size: 31px; }
    .n-title-md { font-size: 26px; }
    .n-eyebrow { font-size: 12.5px; letter-spacing: .18em; margin-bottom: 10px; }
    .n-lead { font-size: 16px; }
    .n-btn { min-height: 50px; padding: 12px 26px; font-size: 15.5px; }
    .n-btn-block { min-height: 56px; font-size: 16.5px; }

    /* hero */
    .n-hero-inner { padding: 44px var(--pad) 40px; }
    .n-hero h1 { font-size: 36px; margin-bottom: 16px; }
    .n-hero p { font-size: 17px; margin-bottom: 24px; }
    .n-hero .n-btn { min-height: 54px; font-size: 16px; }
    .n-hero-actions { flex-direction: column; }
    .n-hero-trust { margin-top: 22px; gap: 8px 18px; font-size: 14px; }
    .n-hero-art { height: 150px; }

    /* valori 2x2 compatti */
    .n-values, .n-values.n-values-4 { grid-template-columns: 1fr 1fr; }
    .n-value { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px var(--pad); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .n-value:nth-child(2n) { border-right: 0; }
    .n-value:nth-last-child(-n+2) { border-bottom: 0; }
    .n-value svg { width: 28px; height: 28px; }
    .n-value strong { font-size: 15px; line-height: 1.3; }
    .n-value span { font-size: 13px; line-height: 1.35; }

    /* categorie più basse */
    .n-cats { gap: 10px; }
    .n-cat { min-height: 118px; padding: 16px 14px; border-radius: 18px; }
    .n-cat::before { width: 110px; height: 110px; right: -36px; top: -36px; }
    .n-cat svg { width: 30px; height: 30px; }
    .n-cat span { font-size: 16.5px; }
    .n-cat small { font-size: 13px; }

    /* prodotti in home: 2 per riga, si vede subito più scelta */
    .n-products-tools { margin-bottom: 18px; }
    .n-products-tools .n-chips { width: 100%; order: 2; }
    .n-section .n-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .n-section .n-card { border-radius: 18px; }
    .n-section .n-card-body { padding: 14px 14px 16px; }
    .n-section .n-card-cat { font-size: 11px; letter-spacing: .1em; margin-bottom: 6px; }
    .n-section .n-card-title { font-size: 17px; line-height: 1.25; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .n-section .n-card-desc { display: none; }
    .n-section .n-card-points { margin: 0 0 10px; font-size: 12.5px; }
    .n-section .n-card-foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .n-section .n-price { font-size: 21px; }
    .n-section .n-card .n-btn { width: 100%; min-height: 46px; padding: 10px; font-size: 15px; }
    .n-skeleton { height: 300px; }

    /* banner cesto */
    .n-cta { padding: 34px 20px; margin-top: 60px; gap: 26px; }
    .n-cta h2 { font-size: 28px; }
    .n-cta p { font-size: 16px; margin-bottom: 24px; }
    .n-cta-step { padding: 14px 16px; gap: 14px; }
    .n-cta-step b { width: 36px; height: 36px; font-size: 15px; }
    .n-cta-step span { font-size: 15.5px; }
    .n-page-end { height: 70px; }

    /* hero piccoli (cesto, mystery, carrello, profilo) */
    .n-hero-sm { padding: 36px 0 32px; }
    .n-hero-sm h1 { font-size: 31px; margin-bottom: 10px; }
    .n-hero-sm p { font-size: 15.5px; }
    .n-steps { gap: 10px 18px; margin-top: 20px; }
    .n-step { font-size: 14px; gap: 10px; }
    .n-step b { width: 30px; height: 30px; font-size: 13px; }

    /* cesto e mystery */
    .n-builder { padding-top: 32px; }
    .n-presets { margin-bottom: 40px; }
    .n-preset { padding: 20px; gap: 18px; border-radius: 20px; }
    .n-preset h4 { font-size: 22px; }
    .n-preset p { font-size: 15.5px; }
    .n-chip { min-height: 42px; padding: 8px 18px; font-size: 14.5px; }
    .n-cats.n-cats-2 { margin-bottom: 36px; }
    .n-cats-2 .n-cat { min-height: 130px; }
    .n-mystery-grid .n-card-title, .n-builder .n-mystery-grid .n-card-title { font-size: 22px; }
    .n-inner-item { padding: 11px 14px; font-size: 15px; }
    .n-mfoot-v { padding: 18px 18px 20px; }
    .n-summary { padding: 22px 18px; }
    .n-summary h3 { font-size: 24px; margin-bottom: 16px; }
    .n-line { grid-template-columns: 52px 1fr auto; gap: 12px; padding: 12px 0; }
    .n-line img { width: 52px; height: 52px; }
    .n-line-name { font-size: 15px; }
    .n-line-meta { font-size: 13.5px; }
    .n-line-price { font-size: 15.5px; }

    /* barra in basso: non copre il contenuto */
    .n-mobilebar { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    .n-mobilebar strong { font-size: 21px; }
    .n-mobilebar .n-btn { min-height: 48px; padding: 10px 20px; }

    /* carrello */
    .n-cart-name { font-size: 18px; }
    .n-cart-line-total { font-size: 21px; }
    .n-stepcard-head h3 { font-size: 22px; }
    .n-choice b { font-size: 16.5px; }
    .n-choice span { font-size: 14px; }
    .n-choice svg { width: 28px; height: 28px; }
    .n-success h2 { font-size: 30px; }
    .n-success p { font-size: 16.5px; }

    /* popup "aggiunto al carrello" */
    .n-pop-title { font-size: 22px; }
    .n-pop-item { grid-template-columns: 64px 1fr; padding: 12px; }
    .n-pop-item img { width: 64px; height: 64px; }
}

@media (max-width: 380px) {
    .n-section .n-grid { gap: 10px; }
    .n-section .n-card-body { padding: 12px; }
    .n-section .n-card-title { font-size: 15.5px; }
    .n-section .n-price { font-size: 19px; }
    .n-value { padding: 14px 16px; }
}

/* Composizione cesto: su schermi stretti la colonna non deve allargarsi oltre lo schermo */
@media (max-width: 1100px) {
    .n-builder { grid-template-columns: minmax(0, 1fr); }
    .n-builder > * { min-width: 0; }
}

/* ==========================================================
   STILE BOTTEGA – tutto il sito con il linguaggio di "Crea il tuo cesto" e del carrello:
   fondi chiari, schede bianche con ombre morbide, oro solo come dettaglio
   ========================================================== */
:root {
    --tile-shadow: 0 6px 20px rgba(20,21,43, .06);
    --tile-shadow-hover: 0 14px 30px rgba(20,21,43, .1);
}

/* Barra in alto: una riga discreta */
.n-topbar { padding: 9px 16px; font-size: 12px; font-weight: 600; letter-spacing: .2em; }

/* Header: color crema, più basso, niente icone nella navbar */
.n-header { background: rgba(250, 247, 242, .94); border-bottom-color: rgba(225, 217, 202, .8); }
.n-search { background: #fff; }
@media (min-width: 901px) {
    .n-header-top { padding: 12px var(--pad) 0; }
    .n-logo { font-size: 28px; }
    .n-search { height: 42px; padding: 0 18px; }
    .n-search svg { width: 18px; height: 18px; }
    .n-search input { font-size: 15px; }
    .n-icon-btn { width: 42px; height: 42px; }
    .n-icon-btn svg { width: 22px; height: 22px; }
    .n-nav { gap: 44px; }
    .n-nav a { padding: 8px 2px 11px; font-size: 12px; font-weight: 700; letter-spacing: .2em; }
    .n-nav a svg { display: none; }
    .n-nav a.active::after { left: 30%; right: 30%; height: 2px; }

    /* Bottoni meno pesanti */
    .n-btn { min-height: 50px; padding: 12px 30px; font-size: 15.5px; font-weight: 700; letter-spacing: .02em; }
    .n-btn-block { min-height: 58px; font-size: 16.5px; }
}
.n-btn-primary { box-shadow: 0 6px 16px rgba(29,48,214, .18); }

/* Testate di pagina chiare, come quella del cesto */
.n-hero-sm { padding: 54px 0 30px; background: linear-gradient(180deg, var(--sand) 0%, var(--cream) 100%); color: var(--ink); border-bottom: 0; }
.n-hero-sm .n-eyebrow { color: var(--gold); }
.n-hero-sm h1 { font-size: 46px; color: var(--ink); margin-bottom: 10px; }
.n-hero-sm p { font-size: 17.5px; color: var(--muted); max-width: 640px; }
.n-hero-sm ul { color: var(--muted); font-size: 15px; }
.n-hero-sm li::before { color: var(--gold); }
.n-hero-sm .n-step { color: var(--muted); }
.n-hero-sm .n-step b { border-color: var(--gold); color: var(--gold); }

/* Titoli di sezione più sobri */
.n-section { padding-top: 88px; }
.n-title { font-size: 42px; }
.n-title-md { font-size: 32px; }
.n-section-head { margin-bottom: 32px; }
.n-eyebrow { font-size: 12.5px; letter-spacing: .24em; }

/* Schede: niente bordo, ombra morbida (come le tessere del cesto) */
.n-card { border-color: transparent; border-radius: 22px; box-shadow: var(--tile-shadow); }
.n-card:hover { border-color: transparent; transform: translateY(-3px); box-shadow: var(--tile-shadow-hover); }
.n-chip { min-height: 42px; padding: 8px 20px; font-size: 14.5px; font-weight: 600; }

@media (max-width: 900px) {
    /* Header da telefono: una riga sottile + ricerca + schede di solo testo */
    .n-topbar { padding: 6px 12px; font-size: 10px; letter-spacing: .1em; }
    .n-header-top { padding: 6px 10px; gap: 6px 4px; }
    .n-logo { font-size: 22px; letter-spacing: .3em; padding-left: .3em; }
    .n-header .n-icon-btn { width: 40px; height: 40px; }
    .n-header .n-icon-btn svg { width: 22px; height: 22px; }
    .n-search { height: 40px; padding: 0 14px; gap: 8px; margin: 0 4px 2px; width: auto; }
    .n-header-right .n-search { margin: 0 4px 2px; }
    .n-search svg { width: 17px; height: 17px; }
    .n-search input { font-size: 16px; } /* 16px: iOS non zooma quando si tocca */
    .n-nav { display: flex; justify-content: safe center; gap: 18px; padding: 0 12px; border-top: 0; overflow-x: auto; scrollbar-width: none; }
    .n-nav::-webkit-scrollbar { display: none; }
    .n-nav a { flex: none; flex-direction: row; min-height: 0; padding: 4px 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
    .n-nav a + a { border-left: 0; }
    .n-nav a svg { display: none; }
    .n-nav a.active::after { height: 2px; left: 15%; right: 15%; }
    .n-cart-count { min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; top: 2px; right: 0; border-width: 1.5px; }

    .n-hero-sm { padding: 28px 0 14px; }
    .n-hero-sm h1 { font-size: 30px; }
    .n-hero-sm p { font-size: 15.5px; }
    .n-section { padding-top: 56px; }
    .n-title { font-size: 29px; }
    .n-title-md { font-size: 25px; }
    .n-section-head { margin-bottom: 22px; }
    .n-card { border-radius: 18px; }
}

/* ==========================================================
   TEMA "A" – blu elettrico, leggibile per tutti (50+)
   ========================================================== */
:root { --brand: #1D30D6; --brand-dark: #1424A8; --tint: #EEF0FB; --coral: #F0506E; }
html { font-size: 100%; }
body { font-size: 19px; line-height: 1.55; color: var(--ink); }
p, li { line-height: 1.6; }
.n-topbar { background: #14152B; color: #fff; font-size: 14px; letter-spacing: .04em; }
.n-logo { color: var(--brand) !important; font-weight: 600; letter-spacing: .3em; }
.n-footer .n-logo, .nf-logo { color: #fff !important; }
.n-icon-btn.n-lab { width: auto; min-width: 64px; height: 64px; border-radius: 14px; flex-direction: column; gap: 2px; padding: 4px 10px; }
.n-icon-btn.n-lab svg { width: 26px; height: 26px; }
.n-icon-btn.n-lab small { font-size: 13px; font-weight: 600; line-height: 1; color: var(--ink); }
.n-icon-btn { color: var(--ink); }
.n-icon-btn:hover { background: var(--tint); }
.n-nav a { font-size: 15px; font-weight: 700; color: var(--ink); }
.n-nav a.active { color: var(--brand); }
.n-nav a.active::after { background: var(--brand); }
.n-nav a:hover { color: var(--brand); }
.n-search { border-radius: 14px; height: 56px; }
.n-search input { font-size: 18px; }
.n-cart-count { background: var(--brand) !important; color: #fff !important; }
/* bottoni principali */
.n-btn, .n-btn-primary, .n-btn-outline, .n-cta, button.primary, .btn-primary, a.n-btn, .n-hero-cta, .n-add, .n-checkout, .nx-btn {
    min-height: 56px; font-size: 18px; border-radius: 14px; font-weight: 700;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 760px) {
    body { font-size: 18px; }
    .n-nav a { font-size: 14px; }
    .n-logo { letter-spacing: .22em; }
    .n-icon-btn.n-lab { min-width: 56px; height: 56px; }
    .n-icon-btn.n-lab small { font-size: 12px; }
}
.n-btn { border-radius: 14px; padding: 16px 32px; letter-spacing: .01em; }
.n-btn-primary, .n-btn.n-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(29,48,214,.25); }
.n-btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.n-btn-outline { border-color: var(--brand); color: var(--brand); background: transparent; }
.n-btn-outline:hover { background: var(--brand); color: #fff; }
.n-drawer { box-shadow: none; }
body.n-menu-open .n-drawer { box-shadow: 0 0 60px rgba(0,0,0,.25); }
@media (max-width: 760px) {
    .n-topbar { font-size: 12px; padding: 8px 12px; }
    .n-nav { justify-content: flex-start; gap: 20px; }
}

/* ===== Header stile A ===== */
.n-topbar { text-transform: none; letter-spacing: .01em; }
@media (min-width: 1081px) {
    .n-header { display: flex; flex-wrap: wrap; align-items: center; column-gap: 32px; padding: 16px var(--pad) 0; background: var(--cream); }
    .n-header-top, .n-header-right { display: contents; }
    .n-header-left { display: none; }
    .n-logo { order: 1; flex: 0 0 260px; padding-left: 0; font-size: 38px; }
    .n-header-right .n-search { order: 2; flex: 0 1 560px; max-width: 560px; margin: 0 auto; height: 58px; border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 0 22px; }
    .n-icons { order: 3; flex: 0 0 260px; display: flex; justify-content: flex-end; gap: 6px; }
    .n-nav { order: 4; flex: 0 0 100%; display: flex; justify-content: center; gap: 40px; margin: 10px 0 0; padding: 0; border: 0; }
    .n-nav a { flex-direction: row; padding: 10px 2px 14px; font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; }
    .n-nav a svg { display: none; }
    .n-nav a + a { border-left: 0; }
    .n-nav a.active::after { left: 0; right: 0; height: 3px; bottom: 0; border-radius: 3px; }
}
@media (max-width: 1080px) {
    .n-topbar { padding: 7px 12px; font-size: 13px; }
    .n-header { padding: 0; background: var(--cream); }
    .n-header-top { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "logo icons menu" "search search search"; align-items: center; gap: 8px 4px; padding: 10px 14px 10px 18px; }
    .n-header-right { display: contents; }
    .n-logo { grid-area: logo; justify-self: start; padding-left: 0; font-size: 26px; letter-spacing: .26em; }
    .n-icons { grid-area: icons; display: flex; gap: 0; }
    .n-header-left { grid-area: menu; display: block; }
    .n-header .n-icon-btn, .n-header .n-menu-btn { width: auto; min-width: 54px; height: 56px; border-radius: 14px; }
    .n-header .n-icon-btn svg { width: 25px; height: 25px; }
    .n-menu-btn { flex-direction: column; gap: 2px; }
    .n-menu-btn::after { content: "Menu"; font-size: 12px; font-weight: 600; line-height: 1; }
    .n-icon-btn.n-lab small { font-size: 12px; }
    .n-header-right .n-search { grid-area: search; width: 100%; max-width: none; height: 54px; margin: 0; padding: 0 18px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
    .n-search input { font-size: 17px; }
    .n-nav { display: flex; justify-content: flex-start; gap: 8px; padding: 2px 14px 12px; margin: 0; border: 0; overflow-x: auto; scrollbar-width: none; }
    .n-nav::-webkit-scrollbar { display: none; }
    .n-nav a { flex: none; flex-direction: row; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--ink); }
    .n-nav a + a { border-left: 1.5px solid var(--line); }
    .n-nav a svg { display: none; }
    .n-nav a.active { background: var(--brand); border-color: var(--brand); color: #fff; }
    .n-nav a.active::after { display: none; }
}
@media (max-width: 380px) {
    .n-logo { font-size: 22px; letter-spacing: .2em; }
    .n-header .n-icon-btn, .n-header .n-menu-btn { min-width: 48px; }
}

/* Box laterali che seguono lo scroll: mai più alti dello schermo, scorrono dentro */
@media (min-width: 901px) {
    .n-summary { top: 120px; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* Intestazioni di pagina coerenti con "Crea il tuo cesto" */
.n-hero-sm, .n-pagehead { padding: 54px 0 30px; color: var(--ink); background: linear-gradient(180deg, var(--tint) 0%, var(--cream) 100%); border-bottom: 0; }
.n-hero-sm .n-eyebrow, .n-pagehead .n-eyebrow { color: var(--brand); }
.n-hero-sm h1, .n-pagehead h1 { margin: 10px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1.1; color: var(--ink); }
.n-hero-sm p, .n-pagehead p { margin: 0; max-width: 680px; font-size: 19px; color: var(--muted); }
.n-hero-sm .n-step { color: var(--ink); }
.n-hero-sm .n-step b { border-color: var(--brand); color: var(--brand); }
@media (max-width: 900px) {
    .n-hero-sm, .n-pagehead { padding: 28px 0 14px; }
    .n-hero-sm h1, .n-pagehead h1 { font-size: 30px; }
    .n-hero-sm p, .n-pagehead p { font-size: 17px; }
}
/* Schede prodotto/box/ricetta nello stile delle tessere del cesto */
.mb-card, .rc-card { border: 2px solid transparent; border-radius: 22px; box-shadow: 0 6px 20px rgba(20,21,43,.06); }
.mb-card:hover, .rc-card:hover { border-color: transparent; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,21,43,.1); }
.n-chip.active, .n-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.n-search input:focus, .n-search input:focus-visible { outline: none; box-shadow: none; }
.n-search:focus-within { box-shadow: 0 0 0 4px rgba(29,48,214,.22); border-color: var(--brand) !important; }
@media (max-width: 1080px) {
    .n-icons .nx-wish-btn { display: none; }
}