/* ============================================================
   NUOVO LOOK — livello di identità visiva
   templates/nectar/css/custom.css

   Helix Ultimate carica questo file per ultimo, dopo template.css
   e dopo i preset: quello che c'è qui vince sempre.

   Contiene solo ciò che il pannello di Helix non riesce a
   raggiungere. Colori di base e tipografia vanno comunque
   impostati anche nel pannello (vedi LEGGIMI-identita.md),
   perché da lì Helix ricompila lo SCSS e copre i punti
   dove il colore è cotto dentro le regole.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ------------------------------------------------------------
   1. Token
   ------------------------------------------------------------ */
:root {
    /* Palette Nuovo Look */
    --nl-ink:        #0c2f36;   /* testo principale, titoli */
    --nl-ink-soft:   #4a6f76;   /* testo secondario */
    --nl-teal:       #74c5c5;   /* accento primario */
    --nl-cyan:       #2fb3d6;   /* accento del brand: ottimo su fondo scuro o su aree ampie */
    --nl-cyan-testo: #1e7f99;   /* stessa tinta scurita: 4,61 di contrasto su bianco.
                                   Il ciano del brand su bianco sta a 2,46, sotto la
                                   soglia di leggibilita' per testo piccolo. */
    --nl-mist:       #eef7f8;   /* fondo chiaro */
    --nl-line:       #cfe7e9;   /* bordi e separatori */
    --nl-white:      #ffffff;

    --nl-font: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Ritmo verticale */
    --nl-space-xs: .5rem;
    --nl-space-sm: 1rem;
    --nl-space-md: 1.75rem;
    --nl-space-lg: 3rem;
    --nl-space-xl: 5rem;

    /* Sovrascrive i token del tema Nectar (palette biologico/verde) */
    --link-color: var(--nl-cyan);
    --link-hover-color: var(--nl-ink);
    --text-color: var(--nl-ink);
    --secondary-link-color: var(--nl-mist);
    --secondary-primary-color: var(--nl-teal);
    --bg-color2: var(--nl-white);   /* il tema lo usa come sfondo di #sp-main-body: NON metterci lo scuro */
}

/* ------------------------------------------------------------
   2. Tipografia
   ------------------------------------------------------------ */
body {
    font-family: var(--nl-font);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--nl-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.sppb-addon-title,
.easystore-product-title {
    font-family: var(--nl-font);
    font-weight: 400;
    line-height: 1.22;
    color: var(--nl-ink);
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; font-weight: 500; }
h6 {
    font-size: .85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--nl-ink-soft);
}

p { margin-bottom: var(--nl-space-sm); }

a {
    color: var(--nl-cyan);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover, a:focus { color: var(--nl-ink); }

strong, b { font-weight: 500; }

/* Focus visibile e coerente su tutto il sito */
:focus-visible {
    outline: 2px solid var(--nl-teal);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   2b. Sfondo pagina

   Il preset di Nectar tinge il corpo pagina di verde scuro: con
   testo inchiostro sopra, titolo e FAQ sparivano. Qui si riporta
   il fondo chiaro, lasciando lo scuro al solo footer.
   ------------------------------------------------------------ */
body,
body.site,
.body-innerwrapper,
#sp-main-body,
.sp-page-builder .page-content,
.sp-page-builder .page-content > section,
.view-category #sp-main-body,
.view-category #sp-position-1 {
    background-color: var(--nl-white);
}

#sp-footer,
#sp-bottom {
    background-color: var(--nl-ink);
    color: var(--nl-mist);
}

#sp-footer a,
#sp-bottom a { color: var(--nl-teal); }
#sp-footer a:hover,
#sp-bottom a:hover { color: var(--nl-white); }

/* ------------------------------------------------------------
   3. Bottoni
   ------------------------------------------------------------ */
.btn,
.sppb-btn,
.easystore-btn,
button.easystore-add-to-cart {
    font-family: var(--nl-font);
    font-weight: 500;
    letter-spacing: .01em;
    border-radius: 4px;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn.btn-primary,
.sppb-btn-primary,
.btn.btn-primary.easystore-btn-add-to-cart {
    background-color: var(--nl-ink);
    border-color: var(--nl-ink);
    color: var(--nl-white);
}

.btn.btn-primary:hover,
.sppb-btn-primary:hover,
.btn.btn-primary.easystore-btn-add-to-cart:hover {
    background-color: var(--nl-cyan);
    border-color: var(--nl-cyan);
    color: var(--nl-white);
}

.easystore-btn-add-to-cart .easystore-btn-text,
.easystore-btn-add-to-cart .easystore-btn-icon { color: inherit; }

/* Selettore quantita: nel demo era verde chiarissimo su bianco */
.easystore-quantity-container { max-width: 150px; }

.easystore-quantity-selector {
    max-width: 150px;              /* prima occupava tutti i 315px della colonna */
    border: 1px solid var(--nl-ink) !important;
    border-radius: 4px;
    background-color: var(--nl-white) !important;
    padding: 0 .35rem;
}

.easystore-quantity-selector input {
    color: var(--nl-ink) !important;   /* era #f5f9e9, invisibile su bianco */
    background: transparent !important;
    border: none !important;
    font-family: var(--nl-font);
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    text-align: center;
}

.easystore-quantity-selector-btn {
    color: var(--nl-ink) !important;   /* erano verde chiaro #b2d99a */
    border: none !important;
    background: transparent !important;
    font-size: 1.25rem !important;
    line-height: 1;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color .15s ease, color .15s ease;
}

.easystore-quantity-selector-btn:hover {
    color: var(--nl-white) !important;
    background-color: var(--nl-ink) !important;
}

.easystore-block-label {
    font-family: var(--nl-font);
    font-size: .9rem;
    color: var(--nl-ink-soft);
}

/* ------------------------------------------------------------
   4. Scheda prodotto — normalizzazione di base
   Il lavoro fine sul layout arriva dopo, qui si tolgono solo
   le incoerenze di font e dimensione ereditate dai demo.
   ------------------------------------------------------------ */
.easystore-product-single {
    font-family: var(--nl-font);
}

.easystore-product-title {
    font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
    font-weight: 400;
    margin-bottom: var(--nl-space-xs);
}

.easystore-product-price-block,
.easystore-price-current {
    font-family: var(--nl-font);
    font-weight: 500;
    color: var(--nl-ink);
}

.easystore-price-current { font-size: 1.6rem; }

.easystore-product-single .easystore-product-description,
.easystore-product-single .easystore-product-description p,
.easystore-product-single .easystore-product-description li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--nl-ink-soft);
}

.easystore-product-single .easystore-product-description ul {
    padding-left: 1.15rem;
    margin-bottom: var(--nl-space-sm);
}

.easystore-metadata-item,
.easystore-list-key,
.easystore-list-value {
    font-family: var(--nl-font);
    font-size: .95rem;
}

.easystore-list-key { color: var(--nl-ink-soft); }
.easystore-list-value { color: var(--nl-ink); font-weight: 500; }

/* ------------------------------------------------------------
   5. FAQ di scheda (override layouts/com_easystore/specification.php)

   Il blocco ha un fondo chiaro suo: la sezione della scheda
   prodotto nei layout demo ha sfondo scuro, e testo scuro su
   fondo scuro sparisce. Con una superficie propria le FAQ
   restano leggibili qualunque cosa ci sia dietro.
   ------------------------------------------------------------ */
.nl-faq {
    margin: var(--nl-space-lg) 0 var(--nl-space-md);
    background: var(--nl-white);
    border: 1px solid var(--nl-line);
    border-radius: 8px;
    padding: var(--nl-space-md);
}

.nl-faq__title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--nl-ink);
    margin: 0 0 var(--nl-space-sm);
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--nl-teal);
}

.nl-faq__item { border-bottom: 1px solid var(--nl-line); }
.nl-faq__item:first-of-type { border-top: 1px solid var(--nl-line); }
.nl-faq__item:last-of-type { border-bottom: none; }

.nl-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nl-space-sm);
    padding: .95rem .25rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--nl-font);
    font-size: 1rem;
    font-weight: 500;
    color: var(--nl-ink);
    transition: color .15s ease;
}

.nl-faq__question::-webkit-details-marker { display: none; }
.nl-faq__question::marker { content: ''; }
.nl-faq__question:hover { color: var(--nl-cyan); }

.nl-faq__chevron {
    flex: 0 0 auto;
    color: var(--nl-teal);
    transition: transform .2s ease;
}

.nl-faq__item[open] .nl-faq__chevron { transform: rotate(180deg); }
.nl-faq__item[open] .nl-faq__question { color: var(--nl-cyan); }

.nl-faq__answer {
    padding: 0 .25rem 1.15rem;
    font-size: .97rem;
    line-height: 1.7;
    color: var(--nl-ink-soft);
}

/* ------------------------------------------------------------
   6. Catalogo
   ------------------------------------------------------------ */
/* Catalogo — misurato sulla pagina resa, non dedotto dal sorgente.
   La scheda e .sppb-div-addon.product-info; il titolo un H6 con dentro un <a>.
   Le proporzioni ricalcano il blocco prodotti della home; dove la home
   usa il verde del demo qui va il celeste del brand. */

/* L header e position:fixed (68px di altezza a partire da 30px dal bordo):
   senza questo spazio i filtri di categoria finiscono sotto la barra menu.
   Vale solo per le viste negozio: nella home l eroe passa sotto apposta. */
.view-products #sp-main-body,
.view-product #sp-main-body,
.view-category #sp-main-body {
    padding-top: 130px;
    padding-bottom: var(--nl-space-xl);
}

.easystore-product-filter {
    margin-bottom: var(--nl-space-md);
}

.easystore-filter-list-item,
.easystore-product-filter a {
    font-family: var(--nl-font);
    font-size: .9rem;
    color: var(--nl-ink);
}

.easystore-filter-list-item.active,
.easystore-product-filter a:hover {
    color: var(--nl-cyan);
}

.product-info { padding-top: .85rem; }

.easystore-product-category,
.easystore-product-category a {
    font-size: .88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.28px;
    color: var(--nl-cyan-testo) !important;
}

.easystore-product-category a:hover { color: var(--nl-ink); }

.easystore-product-title a {
    color: var(--nl-ink) !important;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.easystore-product-title a:hover { color: var(--nl-cyan); }

.easystore-product-price,
.easystore-product-price-block,
.easystore-price-current {
    color: var(--nl-ink);
    font-size: 1.12rem;
    font-weight: 500;
}

.easystore-product-image img { object-fit: contain; }

/* Pulsante a pillola come nella home */
.product-info .btn.btn-primary.easystore-btn-add-to-cart,
.easystore-product-content .btn.btn-primary.easystore-btn-add-to-cart {
    border-radius: 52px;
    padding: .55rem 1.35rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: -.4px;
    text-transform: none;
}

/* ------------------------------------------------------------
   6b. Contrasto — testo chiaro rimasto dal demo a fondo scuro

   Questi colori li impone SP Page Builder con CSS inline e
   selettore #sppb-addon-<id>: per specificita' batte qualunque
   regola di questo file, quindi qui serve !important.
   Misurati con un controllo di contrasto sulla pagina resa:
   erano tutti sotto 1,1 su fondo bianco (soglia minima 4,5).
   ------------------------------------------------------------ */

.easystore-filter-item-name,
.easystore-filter-list-item .easystore-filter-item-name,
.easystore-product-filter li span {
    color: var(--nl-ink) !important;
}

.easystore-filter-list-item:hover .easystore-filter-item-name,
.easystore-filter-list-item.active .easystore-filter-item-name {
    color: var(--nl-cyan-testo) !important;
}

/* Testo del pulsante: l addon lo lascia quasi bianco e rende
   trasparente il fondo, quindi spariva del tutto */
.easystore-btn-add-to-cart {
    background-color: var(--nl-ink) !important;
    border-color: var(--nl-ink) !important;
}

.easystore-btn-add-to-cart:hover {
    background-color: var(--nl-cyan) !important;
    border-color: var(--nl-cyan) !important;
}

.easystore-btn-add-to-cart .easystore-btn-text,
.easystore-btn-add-to-cart .easystore-btn-icon,
.easystore-btn-add-to-cart .easystore-btn-icon svg {
    color: var(--nl-white) !important;
    fill: currentColor;
}

/* Paginazione */
.sppb-pagination-wrapper .page-link {
    color: var(--nl-ink) !important;
    background-color: transparent !important;
    border: none;
}

.sppb-pagination-wrapper .page-link:hover {
    color: var(--nl-cyan-testo) !important;
}

/* Pagina corrente: pastiglia piena. Il ciano su bianco sta a 2,46
   di contrasto, sotto la soglia: come testo semplice non basta. */
.sppb-pagination-wrapper .page-item.active .page-link {
    color: var(--nl-white) !important;
    background-color: var(--nl-ink) !important;
    border-radius: 50%;
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sppb-pagination-wrapper .page-item.disabled .page-link {
    color: var(--nl-line) !important;
}

/* Immagine prodotto: leggero avvicinamento al passaggio del mouse.
   Vale su catalogo, categoria e home: stesso comportamento ovunque. */
.easystore-product-image { overflow: hidden; }

.easystore-product-image img {
    transition: transform .35s ease;
}

.product-info:hover .easystore-product-image img,
.easystore-product-image:hover img {
    transform: scale(1.04);
}


/* ------------------------------------------------------------
   7. Menu principale e sottolivelli

   I sottomenu del demo hanno padding irregolare, voci che vanno
   a capo e il colore della voce attiva ancora sul blu di default
   di Helix. Qui si uniforma tutto.
   ------------------------------------------------------------ */
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    font-family: var(--nl-font);
    font-weight: 400;
    font-size: .97rem;
    letter-spacing: .01em;
    color: var(--nl-ink);
}

#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.current-item > a {
    color: var(--nl-cyan);
}

/* Pannelli a tendina: stessa superficie a ogni livello */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: var(--nl-white);
    border: 1px solid var(--nl-line);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(12, 47, 54, .10);
    padding: .5rem 0;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-family: var(--nl-font);
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--nl-ink);
    padding: .6rem 1.15rem;
    white-space: nowrap;      /* niente voci spezzate su due righe */
    transition: background-color .15s ease, color .15s ease;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.current-item > a {
    background: var(--nl-mist);
    color: var(--nl-cyan);
}

/* Terzo livello: allineato al secondo, non staccato */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-sub .sp-dropdown-inner {
    margin-top: -.5rem;
}

/* La freccia del sottolivello segue il colore della voce */
.sp-megamenu-parent .sp-dropdown li.sp-has-child > a:after {
    color: currentColor;
    opacity: .6;
}

/* ------------------------------------------------------------
   8. Header e footer
   ------------------------------------------------------------ */
#sp-footer,
#sp-bottom {
    font-family: var(--nl-font);
    font-size: .93rem;
}

.nl-foot-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nl-foot-list li { margin-bottom: .6rem; }

.nl-foot-list a,
.nl-foot-contact a {
    color: var(--nl-mist);
    transition: color .15s ease;
}

.nl-foot-list a:hover,
.nl-foot-contact a:hover { color: var(--nl-teal); }

.nl-foot-contact p { margin-bottom: .85rem; line-height: 1.6; }
.nl-foot-contact strong { color: var(--nl-white); font-weight: 500; }


/* ------------------------------------------------------------
   10. Home page
   ------------------------------------------------------------ */

/* Hero della home: foto di sfondo con velatura, per leggere il testo */
#section-id-nl-hero-home {
    position: relative;
    background-size: cover;
    background-position: 50% 42%;
    display: flex;
    align-items: center;
}

/* la foto va mostrata intera: la sezione prende le proporzioni dell'immagine */
@media (min-width: 992px) {
    #section-id-nl-hero-home {
        aspect-ratio: 16 / 9;                    /* le proporzioni della foto */
        background-size: 100% 100% !important;
        background-position: 50% 50% !important;
        padding-top: 90px !important;
        padding-bottom: 0 !important;
    }
    #section-id-nl-hero-home > .sppb-row-container { width: 100%; }
}

@media (max-width: 991.98px) {
    #section-id-nl-hero-home {
        padding-top: 120px !important;
        padding-bottom: 90px !important;
    }
}

#section-id-nl-hero-home::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,47,54,.70) 0%, rgba(12,47,54,.52) 55%, rgba(12,47,54,.66) 100%);
    pointer-events: none;
}

#section-id-nl-hero-home > * { position: relative; z-index: 1; }

/* Hero su fondo scuro: il testo deve staccare */
.nl-hero-title .sppb-addon-title,
.nl-hero-title h1 { color: var(--nl-white) !important; }

.nl-hero-text,
.nl-hero-text p,
.nl-hero-text .sppb-addon-text-block,
.nl-hero-text .sppb-addon-content {
    color: var(--nl-mist) !important;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Bottoni della home: la classe finisce sul bottone stesso, non sul wrapper */
.sppb-btn.nl-btn {
    border: 1px solid transparent !important;
    text-transform: none !important;
    font-family: var(--nl-font);
    font-weight: 400;
    letter-spacing: .02em;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.sppb-btn.nl-btn-ghost { border-color: var(--nl-line) !important; }
.sppb-btn.nl-btn-ghost:hover { border-color: var(--nl-cyan) !important; }

/* Paragrafi introduttivi: non devono correre da un bordo all'altro */
.nl-narrow p,
.nl-narrow .sppb-addon-text-block {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Le quattro schede servizio: altezza uniforme e stacco leggero */
.sppb-section .nl-tile { height: 100%; }


/* ------------------------------------------------------------
   11. Pagine di contenuto
   ------------------------------------------------------------ */

/* Immagini editoriali: angoli morbidi e nessuno straripamento */
.nl-img img {
    border-radius: 10px;
    width: 100%;
    height: auto;
    display: block;
}

/* Galleria: tutte le foto con la stessa proporzione */
.nl-img.nl-gallery img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Etichette Prima / Dopo nella pagina dei risultati */
.nl-etichetta .sppb-addon-title {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 400;
}

/* Colonna di testo affiancata a una foto: allineata al centro */
.sppb-section .sppb-column.sppb-align-items-center { justify-content: center; }



/* Fascia informativa sotto la hero */
.nl-fascia-wrap .sppb-addon-content { text-align: center; }

.nl-fascia {
    margin: 0;
    font-size: 17px;
    color: var(--nl-ink);
}

.nl-fascia strong { color: var(--nl-cyan-testo); font-weight: 500; }
.nl-fascia span { color: var(--nl-line); padding: 0 .4em; }

@media (max-width: 575.98px) {
    .nl-fascia span { display: block; height: 0; overflow: hidden; }
}

/* ------------------------------------------------------------
   12. Elementi decorativi — forme naturali disegnate per il sito
   ------------------------------------------------------------
   Quattro segni in templates/nectar/images/, disegnati col metodo
   del template Nectar: nessuno stroke, il contorno e' una sagoma piena
   a spessore variabile, con i trattini morbidi come texture interna.
   Le forme sono in
   foglia, goccia che cade nell'acqua, ramoscello, germoglio.
   Ogni zona del sito ne usa due diversi, cosi' il richiamo non e'
   sempre lo stesso. Sotto i 992px spariscono: rubano spazio.
   ------------------------------------------------------------ */

#section-id-nl-testata,
#section-id-nl-servizi,
#section-id-nl-gift,
#section-id-nl-chiusura,
.view-products #sp-main-body,
.view-product #sp-main-body {
    position: relative;
    overflow: hidden;
}

#section-id-nl-testata::before,  #section-id-nl-testata::after,
#section-id-nl-servizi::before,  #section-id-nl-servizi::after,
#section-id-nl-gift::before,     #section-id-nl-gift::after,
#section-id-nl-chiusura::before, #section-id-nl-chiusura::after,
.view-products #sp-main-body::before, .view-products #sp-main-body::after,
.view-product #sp-main-body::before,  .view-product #sp-main-body::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

/* testata delle pagine di contenuto: germoglio e foglia */
#section-id-nl-testata::before {
    background-image: url("../images/nl-deco-germoglio.svg");
    width: 132px; height: 132px; top: 26px; left: 26px;
    opacity: 0.78; transform: rotate(-10deg);
}
#section-id-nl-testata::after {
    background-image: url("../images/nl-deco-foglia.svg");
    width: 158px; height: 158px; right: 24px; bottom: -26px;
    opacity: 0.68; transform: rotate(168deg);
}

/* "Cosa facciamo": foglia e ramoscello */
#section-id-nl-servizi::before {
    background-image: url("../images/nl-deco-foglia.svg");
    width: 126px; height: 126px; top: 18px; left: 30px;
    opacity: 0.73; transform: rotate(-16deg);
}
#section-id-nl-servizi::after {
    background-image: url("../images/nl-deco-ramo.svg");
    width: 170px; height: 170px; right: 22px; bottom: -34px;
    opacity: 0.68; transform: rotate(8deg);
}

/* gift card: la goccia e il ramoscello */
#section-id-nl-gift::before {
    background-image: url("../images/nl-deco-goccia.svg");
    width: 128px; height: 128px; top: 20px; right: 34px;
    opacity: 0.73;
}
#section-id-nl-gift::after {
    background-image: url("../images/nl-deco-ramo.svg");
    width: 178px; height: 178px; left: 18px; bottom: -52px;
    opacity: 0.63; transform: rotate(-12deg);
}

/* chiusura pagina: foglia e germoglio */
#section-id-nl-chiusura::before {
    background-image: url("../images/nl-deco-foglia.svg");
    width: 116px; height: 116px; top: 16px; left: 28px;
    opacity: 0.63; transform: rotate(14deg);
}
#section-id-nl-chiusura::after {
    background-image: url("../images/nl-deco-germoglio.svg");
    width: 176px; height: 176px; right: 14px; bottom: -58px;
    opacity: 0.60; transform: rotate(6deg);
}

/* elenco prodotti: ramoscello in alto, foglia in basso */
.view-products #sp-main-body::before {
    background-image: url("../images/nl-deco-ramo.svg");
    width: 150px; height: 150px; top: 96px; right: 18px;
    opacity: 0.58; transform: rotate(-6deg);
}
.view-products #sp-main-body::after {
    background-image: url("../images/nl-deco-foglia.svg");
    width: 150px; height: 150px; left: 12px; bottom: 16px;
    opacity: 0.48; transform: rotate(196deg);
}

/* scheda prodotto: goccia in alto, germoglio in basso */
.view-product #sp-main-body::before {
    background-image: url("../images/nl-deco-goccia.svg");
    width: 140px; height: 140px; top: 104px; right: 22px;
    opacity: 0.58;
}
.view-product #sp-main-body::after {
    background-image: url("../images/nl-deco-germoglio.svg");
    width: 156px; height: 156px; left: 16px; bottom: 24px;
    opacity: 0.53; transform: rotate(8deg);
}

/* il contenuto sta sempre sopra la decorazione */
#section-id-nl-testata > *,
#section-id-nl-servizi > *,
#section-id-nl-gift > *,
#section-id-nl-chiusura > *,
.view-products #sp-main-body > *,
.view-product #sp-main-body > * { position: relative; z-index: 1; }

@media (max-width: 991.98px) {
    #section-id-nl-testata::before,  #section-id-nl-testata::after,
    #section-id-nl-servizi::before,  #section-id-nl-servizi::after,
    #section-id-nl-gift::before,     #section-id-nl-gift::after,
    #section-id-nl-chiusura::before, #section-id-nl-chiusura::after,
    .view-products #sp-main-body::before, .view-products #sp-main-body::after,
    .view-product #sp-main-body::before,  .view-product #sp-main-body::after { display: none; }
}

/* Cornice attorno alle foto editoriali delle pagine di contenuto */
.nl-img.nl-cornice { position: relative; }

.nl-img.nl-cornice::before,
.nl-img.nl-cornice::after {
    content: "";
    position: absolute;
    width: 66px; height: 66px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

.nl-img.nl-cornice::before {
    background-image: url("../images/nl-deco-foglia.svg");
    top: -28px; left: -26px; transform: rotate(-28deg);
    opacity: 0.93;
}

.nl-img.nl-cornice::after {
    background-image: url("../images/nl-deco-germoglio.svg");
    bottom: -26px; right: -24px; transform: rotate(10deg);
    opacity: 0.88;
}

@media (max-width: 767.98px) {
    .nl-img.nl-cornice::before, .nl-img.nl-cornice::after { display: none; }
}

/* ------------------------------------------------------------
   13. Stacco fra la fine dei contenuti e il footer
   ------------------------------------------------------------ */

#sp-footer {
    border-top: 1px solid rgba(116, 197, 197, .28);
    margin-top: 0;
}

/* una fascia chiara chiude sempre la pagina, così il bianco non
   sfuma nel bianco prima del footer scuro */
#sp-main-body > .row:last-child { margin-bottom: 0; }

.nl-chiusura-pagina {
    background: linear-gradient(180deg, var(--nl-white) 0%, var(--nl-mist) 100%);
}


/* ------------------------------------------------------------
   14. Banner cookie
   ------------------------------------------------------------ */

.nl-cookie {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 9999;
}

.nl-cookie[hidden] { display: none; }

.nl-cookie__box {
    max-width: 760px;
    margin: 0 auto;
    background: var(--nl-white);
    border: 1px solid var(--nl-line);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(12, 47, 54, .18);
    padding: 20px 22px;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.nl-cookie__testo {
    flex: 1 1 340px;
    margin: 0;
    font-family: var(--nl-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--nl-ink-soft);
}

.nl-cookie__testo a {
    color: var(--nl-cyan-testo);
    text-decoration: underline;
}

.nl-cookie__azioni {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.nl-cookie__btn {
    font-family: var(--nl-font);
    font-size: 15px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--nl-line);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.nl-cookie__btn--no {
    background: var(--nl-white);
    color: var(--nl-cyan-testo);
}

.nl-cookie__btn--no:hover { border-color: var(--nl-cyan); }

.nl-cookie__btn--si {
    background: var(--nl-cyan);
    color: var(--nl-white);
    border-color: var(--nl-cyan);
}

.nl-cookie__btn--si:hover { background: var(--nl-ink); border-color: var(--nl-ink); }

/* Quando il banner viene riaperto dal footer, ricorda la scelta in corso */
.nl-cookie__stato {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--nl-cyan-testo);
}

/* Link permanente nel footer: e' il modo per tornare sulle preferenze
   quando il banner e' stato chiuso. Lo aggiunge nl-cookie.js. */
.nl-cookie-preferenze {
    margin-top: 14px;
    text-align: center;
    font-family: var(--nl-font);
    font-size: 14px;
}

.nl-cookie-preferenze a {
    color: #9fdde7;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nl-cookie-preferenze a:hover { color: #eaf6f8; }

@media (max-width: 575.98px) {
    .nl-cookie__azioni { width: 100%; }
    .nl-cookie__btn { flex: 1 1 auto; }
}


/* ------------------------------------------------------------
   15. Correzioni del 25/09 (contrasti, titoli, carrello, cassa)
   ------------------------------------------------------------ */

/* Titoli: il template stringe le lettere fino a -2.56px, troppo */
h1, h2, h3, h4, h5, h6,
.sppb-addon-title,
.article-header h1,
#sp-component h1, #sp-component h2, #sp-component h3 {
    letter-spacing: -1px !important;
}

h4, h5, h6, .nl-etichetta .sppb-addon-title { letter-spacing: -.2px !important; }

/* Il verde del demo compariva nell'header della cassa e delle pagine
   articolo, e sullo sfondo delle categorie: regole di template.css */
.com-content.view-article #sp-header.header-nectar .container,
.com-easystore.view-checkout #sp-header.header-nectar .container,
.com-content.view-article #sp-header.header-sticky,
.com-easystore.view-checkout #sp-header,
.com-easystore.view-checkout #sp-header.header-sticky {
    background-color: var(--nl-white) !important;
}

.view-category .body-wrapper { background-color: var(--nl-white) !important; }

/* Pulsanti primari: inchiostro con testo chiaro, come nelle schede prodotto */
.btn-primary,
#sp-component .btn-primary,
.easystore-cart-summary .btn-primary {
    background-color: var(--nl-ink) !important;
    border-color: var(--nl-ink) !important;
    color: var(--nl-white) !important;
}

.btn-primary:hover,
#sp-component .btn-primary:hover,
.easystore-cart-summary .btn-primary:hover {
    background-color: var(--nl-cyan) !important;
    border-color: var(--nl-cyan) !important;
    color: var(--nl-white) !important;
}

.easystore-cart-summary .btn-link {
    color: var(--nl-cyan-testo) !important;
    text-decoration: underline;
}

/* "Vai allo shop" della vetrina: stesso stile dei pulsanti prodotto, con freccia */
.nl-link-shop-wrap p { margin: 0; }

a.nl-link-shop {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    background: var(--nl-ink);
    color: var(--nl-white) !important;
    border: 1px solid var(--nl-ink);
    border-radius: 32px;
    padding: 10px 22px;
    font-family: var(--nl-font);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, gap .2s ease;
}

a.nl-link-shop::after {
    content: "";
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

a.nl-link-shop:hover {
    background: var(--nl-cyan);
    border-color: var(--nl-cyan);
    gap: .9em;
}

/* ------------------------------------------------------------
   16. Footer: fondo piu' profondo e testi davvero leggibili
   ------------------------------------------------------------ */

#sp-footer {
    background-color: #082027 !important;
    color: #ffffff;
}

#sp-footer,
#sp-footer p,
#sp-footer li,
#sp-footer span,
#sp-footer div {
    color: #eaf6f8 !important;
}

#sp-footer h1, #sp-footer h2, #sp-footer h3,
#sp-footer h4, #sp-footer .sppb-addon-title {
    color: #ffffff !important;
    font-weight: 500;
    letter-spacing: -.4px;
    margin-bottom: .9rem;
}

#sp-footer a {
    color: #9fdde7 !important;
    text-decoration: none;
}

#sp-footer a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

#sp-footer strong { color: #ffffff !important; }

.nl-foot-piva {
    color: #a9c6cc !important;
    font-size: 14px;
    margin-top: 1.2rem;
}

/* ------------------------------------------------------------
   17. Pagine di testo (termini, privacy): larghezza e corpo leggibili
   ------------------------------------------------------------ */

.com-content.view-article #sp-component .article-details,
.com-content.view-article #sp-component .item-page {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px 40px;
}

.com-content.view-article #sp-component .article-header h1 {
    font-family: var(--nl-font);
    font-weight: 500;
    color: var(--nl-ink);
    margin-bottom: 1.6rem;
}

/* i testi venivano dal vecchio sito con font-size scritto dentro i tag */
.com-content.view-article #sp-component .com-content-article__body span[style],
.com-content.view-article #sp-component .com-content-article__body p[style],
.com-content.view-article #sp-component .com-content-article__body font,
.com-content.view-article #sp-component [itemprop="articleBody"] span[style],
.com-content.view-article #sp-component [itemprop="articleBody"] p[style] {
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
}

.com-content.view-article #sp-component p,
.com-content.view-article #sp-component li {
    font-family: var(--nl-font);
    font-size: 17px;
    line-height: 1.75;
    color: var(--nl-ink-soft);
    margin-bottom: 1.1rem;
}

/* I titoli ereditavano il corpo enorme del tema "post del blog": accanto a un
   testo da 17px sembravano sproporzionati. Qui la scala e' esplicita. */
.com-content.view-article #sp-component .article-header h1 { font-size: 34px; line-height: 1.25; }

.com-content.view-article #sp-component h2 {
    font-family: var(--nl-font);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.3px;
    color: var(--nl-ink);
    margin-top: 2.4rem;
    margin-bottom: .7rem;
}

.com-content.view-article #sp-component h3 {
    font-family: var(--nl-font);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--nl-ink);
    margin-top: 1.8rem;
    margin-bottom: .5rem;
}

@media (max-width: 767.98px) {
    .com-content.view-article #sp-component .article-header h1 { font-size: 27px; }
    .com-content.view-article #sp-component h2 { font-size: 21px; }
    .com-content.view-article #sp-component h3 { font-size: 18px; }
}

.com-content.view-article #sp-component a { color: var(--nl-cyan-testo); }

/* Tabelle dentro le pagine di testo (l'elenco dei cookie) */
.com-content.view-article #sp-component table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 1.8rem;
    font-family: var(--nl-font);
    font-size: 15px;
    line-height: 1.6;
}

.com-content.view-article #sp-component table th {
    text-align: left;
    font-weight: 500;
    color: var(--nl-ink);
    background: rgba(126, 200, 216, .12);
    border-bottom: 1px solid rgba(126, 200, 216, .45);
    padding: 10px 12px;
}

.com-content.view-article #sp-component table td {
    color: var(--nl-ink-soft);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    padding: 10px 12px;
    vertical-align: top;
}

.com-content.view-article #sp-component table code {
    font-size: 13px;
    background: rgba(0, 0, 0, .04);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--nl-ink);
}

/* su schermo stretto la tabella scorre invece di sfondare la pagina */
@media (max-width: 767.98px) {
    .com-content.view-article #sp-component table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .com-content.view-article #sp-component table td { white-space: normal; min-width: 150px; }
}

/* Pagine legali: niente categoria, data e pulsanti social */
.com-content.view-article .article-info,
.com-content.view-article .article-can-edit,
.com-content.view-article .easy-social-share,
.com-content.view-article .article-social-share,
.com-content.view-article .sp-social-share,
.com-content.view-article .article-header + .d-flex {
    display: none !important;
}



/* ------------------------------------------------------------
   18. Footer: il pannello bianco che copriva il fondo scuro
   ------------------------------------------------------------ */

/* Nectar da' fondo bianco a ogni .sppb-section: dentro al footer
   copriva l'inchiostro e lasciava testo chiaro su bianco. */
#sp-footer .sppb-section,
#sp-footer .sppb-row-container,
#sp-footer .sppb-row,
#sp-footer .sppb-row-column,
#sp-footer .sppb-column,
#sp-footer .sp-module,
#sp-footer .sp-module-content,
#sp-footer .mod-sppagebuilder,
#sp-footer .page-content {
    background-color: transparent !important;
    background-image: none !important;
}


/* ------------------------------------------------------------
   19. Pagine articolo: via lo schema "post del blog" di Nectar
   ------------------------------------------------------------ */

/* Nectar disegna le pagine articolo (e la cassa) come un post del blog:
   header verde con logo e menu resi bianchi da un filtro, contenuto a
   tutta larghezza, titolo in 72px e in fondo un blocco verde di articoli
   correlati. Su termini e privacy non ha senso: si riporta tutto allo
   schema delle altre pagine. */

.com-content.view-article #sp-logo img,
.com-easystore.view-checkout #sp-logo img,
.com-content.view-article .logo-image,
.com-easystore.view-checkout .logo-image {
    filter: none !important;
}

.com-content.view-article #sp-header .sp-megamenu-parent > li > a,
.com-easystore.view-checkout #sp-header .sp-megamenu-parent > li > a {
    color: var(--nl-ink) !important;
}

.com-content.view-article #sp-header .sp-megamenu-parent > li.active > a,
.com-content.view-article #sp-header .sp-megamenu-parent > li > a:hover,
.com-easystore.view-checkout #sp-header .sp-megamenu-parent > li.active > a,
.com-easystore.view-checkout #sp-header .sp-megamenu-parent > li > a:hover {
    color: var(--nl-cyan) !important;
}

.com-content.view-article #sp-header .sp-module .easystore-cart-icon,
.com-easystore.view-checkout #sp-header .sp-module .easystore-cart-icon,
.com-content.view-article #sp-header .easystore-cart-icon,
.com-easystore.view-checkout #sp-header .easystore-cart-icon {
    color: var(--nl-ink) !important;
}

.com-content.view-article .burger-icon > span,
.com-easystore.view-checkout .burger-icon > span {
    background-color: var(--nl-ink) !important;
}

/* contenuto: torna dentro al contenitore normale */
.view-article #sp-main-body {
    padding: 130px 0 0 !important;
}

.view-article #sp-main-body .container,
body.view-article.remove-container .body-innerwrapper > #sp-main-body > .container {
    max-width: 1320px !important;
    padding: 0 15px !important;
}

/* titolo: stessa scala delle altre pagine */
.view-article .article-title-wrap {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 10px 15px 10px !important;
}

.view-article .article-title-wrap .article-header {
    margin-bottom: 1.2rem !important;
}

.view-article .article-title-wrap .article-header h1 {
    font-family: var(--nl-font) !important;
    font-size: 42px !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: -1px !important;
    color: var(--nl-ink) !important;
}

@media (max-width: 767.98px) {
    .view-article .article-title-wrap .article-header h1 {
        font-size: 30px !important;
    }
}

/* i decori e i correlati del blog non c'entrano con le pagine legali */
.view-article .article-title-wrap .article-content-wrap,
.view-article .articlebody-bottom,
.view-article .related-article-list-container,
.view-article .article-full-image {
    display: none !important;
}


/* ------------------------------------------------------------
   20. Menu a scomparsa (mobile)
   ------------------------------------------------------------ */

.offcanvas-menu { padding-right: 6px; }

.offcanvas-inner,
.offcanvas-menu .offcanvas-inner { padding: 20px 22px 30px; }

/* voci di menu: piu' grandi e con piu' aria fra una e l'altra */
.offcanvas-menu .menu > li > a,
.offcanvas-menu .menu > li > .sp-menu-item,
.offcanvas-menu .sp-module ul > li > a {
    font-family: var(--nl-font);
    font-size: 20px !important;
    line-height: 1.35;
    font-weight: 400;
    color: var(--nl-ink) !important;
    padding: 12px 0 !important;
}

.offcanvas-menu .menu > li.active > a,
.offcanvas-menu .menu > li > a:hover,
.offcanvas-menu .menu .active > a {
    color: var(--nl-cyan) !important;
}

/* sottovoci: un gradino sotto, ma leggibili */
.offcanvas-menu .menu li li > a {
    font-family: var(--nl-font);
    font-size: 17px !important;
    color: var(--nl-ink-soft) !important;
    padding: 9px 0 9px 14px !important;
}

.offcanvas-menu .menu li li > a:hover,
.offcanvas-menu .menu li li.active > a { color: var(--nl-cyan) !important; }

.offcanvas-menu .menu .offcanvas-menu-toggler,
.offcanvas-menu .menu .menu-toggler { color: var(--nl-ink-soft); }

/* recapiti: andavano a capo mai, e l'orario usciva dal pannello */
.offcanvas-menu .sp-contact-info,
.offcanvas-menu .sp-contact-info li {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.offcanvas-menu .sp-contact-info {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--nl-line);
    list-style: none;
    padding-left: 0;
}

.offcanvas-menu .sp-contact-info li {
    font-family: var(--nl-font);
    font-size: 15px !important;
    line-height: 1.55;
    color: var(--nl-ink-soft) !important;
    margin-bottom: 12px;
    display: flex;
    gap: .5em;
    align-items: flex-start;
}

.offcanvas-menu .sp-contact-info li a {
    color: var(--nl-cyan-testo) !important;
    font-size: 15px;
}

.offcanvas-menu .sp-contact-info li > span[class*="fa"] {
    flex: 0 0 auto;
    margin-top: .25em;
    color: var(--nl-cyan);
}


/* Le voci restano a 18px: il template le scrive con
   .offcanvas-menu .offcanvas-inner ul.menu>li>a. Uso lo stesso
   selettore, con "body" davanti, cosi' non ci sono dubbi. */
body .offcanvas-menu .offcanvas-inner ul.menu > li > a,
body .offcanvas-menu .offcanvas-inner ul.menu > li > .sp-menu-item {
    font-size: 20px !important;
    line-height: 1.35 !important;
    padding: 12px 0 !important;
    color: var(--nl-ink) !important;
}

body .offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
body .offcanvas-menu .offcanvas-inner ul.menu > li > a:hover {
    color: var(--nl-cyan) !important;
}

body .offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {
    font-size: 17px !important;
    line-height: 1.4 !important;
    padding: 8px 0 8px 14px !important;
    color: var(--nl-ink-soft) !important;
}

body .offcanvas-menu .offcanvas-inner .sp-contact-info,
body .offcanvas-menu .offcanvas-inner .sp-contact-info li {
    font-size: 15px !important;
    white-space: normal !important;
}

/* il logo in versione telefono */
.logo-image-phone,
#sp-header .logo-image-phone {
    height: 45px !important;
    width: auto !important;
}

@media (max-width: 991.98px) {
    #sp-header .logo-image,
    #sp-header .logo-image-phone { height: 45px !important; width: auto !important; }
}

/* ------------------------------------------------------------
   9. Rispetto delle preferenze di movimento
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ------------------------------------------------------------
   21. La seconda barra di scorrimento
   ------------------------------------------------------------
   Nectar mette `overflow-x: hidden` su .body-innerwrapper per tagliare gli
   sbordamenti laterali. Ma per specifica CSS, se un asse non e' `visible`,
   l'altro diventa `auto`: quel contenitore diventa quindi scorrevole in
   verticale e il browser disegna una seconda barra accanto a quella della
   pagina.

   `clip` taglia allo stesso modo in orizzontale ma NON trascina con se'
   l'asse verticale, che resta `visible`. E' l'unico valore che risolve il
   problema senza rinunciare al taglio laterale.
   ------------------------------------------------------------ */

.body-innerwrapper {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* browser che non conoscono `clip`: meglio una barra in piu' che il contenuto
   che sborda di lato, quindi per loro non cambiamo nulla */
@supports not (overflow-x: clip) {
    .body-innerwrapper { overflow-x: hidden !important; }
}

/* ------------------------------------------------------------
   22. Carrello vuoto: il pulsante che non si vedeva
   ------------------------------------------------------------
   L'override di Nectar usa `.easystore-empty-cart` con un pulsante
   `btn-outline-primary`. Il colore del testo arriva dalla variabile
   Bootstrap --bs-primary, che in questo tema e' chiarissima: risultato,
   testo quasi bianco su fondo bianco. Qui il pulsante prende i colori
   del sito, come gli altri.
   ------------------------------------------------------------ */

.easystore-empty-cart .btn.btn-outline-primary,
.easystore-cart-summary .btn.btn-link,
#sp-component .btn.btn-outline-primary {
    color: var(--nl-ink) !important;
    background-color: transparent !important;
    border: 1px solid var(--nl-line) !important;
    border-radius: 999px;
    padding: 11px 26px;
    font-weight: 600;
    text-decoration: none;
}

.easystore-empty-cart .btn.btn-outline-primary:hover,
.easystore-cart-summary .btn.btn-link:hover,
#sp-component .btn.btn-outline-primary:hover {
    color: var(--nl-white) !important;
    background-color: var(--nl-ink) !important;
    border-color: var(--nl-ink) !important;
}

.easystore-empty-cart { padding: 40px 0 60px; }

/* ------------------------------------------------------------
   23. Pagine ordine, profilo e pagamento: spazio sotto l'header
   ------------------------------------------------------------
   L'header di Nectar e' `position: fixed; top: 30px` con altezza 68px,
   quindi il suo bordo inferiore sta a 98px dal bordo della finestra: il
   contenuto deve scostarsi da solo, non c'e' nulla che lo spinga giu'.

   Il template lo fa per carrello e cassa (`padding: 140px 0 120px`) ma si
   dimentica le altre viste di EasyStore, che ricadono sul valore generico
   di 100px: due pixel di margine sull'header, cioe' niente. Da qui la
   scheda dell'ordine che finisce sotto la barra del menu.
   ------------------------------------------------------------ */

.com-easystore.view-order #sp-main-body,
.com-easystore.view-orders #sp-main-body,
.com-easystore.view-guest #sp-main-body,
.com-easystore.view-profile #sp-main-body,
.com-easystore.view-payment #sp-main-body {
    padding-top: 140px !important;
    padding-bottom: 120px !important;
}

@media (max-width: 767.98px) {
    .com-easystore.view-order #sp-main-body,
    .com-easystore.view-orders #sp-main-body,
    .com-easystore.view-guest #sp-main-body,
    .com-easystore.view-profile #sp-main-body,
    .com-easystore.view-payment #sp-main-body {
        padding-top: 120px !important;
        padding-bottom: 80px !important;
    }
}