/*
 * NO.EM STORE — base sitewide (GRAF-05): font ospitati in locale, palette, topbar.
 * Nessuna chiamata a Google Fonts: file woff2 nel tema child, subset latin
 * (copre l'italiano accentato). Licenze: SIL Open Font License 1.1.
 *
 * Lato è già il font scelto nelle opzioni Flatsome (testi, titoli, menu)
 * ma non veniva caricato perché Kirki è bloccato da noem-flatsome-frontend-fonts.php.
 */

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lato-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lato-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/playfair-display-var.woff2') format('woff2');
}

@font-face {
    font-family: 'Great Vibes';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/great-vibes-400.woff2') format('woff2');
}

/* Palette ufficiale NO.EM STORE */
:root {
    --noem-blue: #2369A7;
    --noem-blue-dark: #12528C;
    --noem-sky: #EAF4FC;
    --noem-white: #FFFFFF;
    --noem-champagne: #D7AE78;
    --noem-champagne-light: #F5EBDD;
    --noem-pearl: #F2F3F5;
    --noem-text: #292D32;
    --noem-text-2: #6B7178;
    --noem-grad-blue: linear-gradient(135deg, #2b8be0 0%, #2369A7 45%, #0d3f8f 100%);
    --noem-grad-gold: linear-gradient(135deg, #f3dfbf 0%, #D7AE78 50%, #b8844a 100%);
    --noem-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --noem-script: 'Great Vibes', 'Brush Script MT', cursive;
    --noem-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Topbar: 4 punti di fiducia (contenuto in Flatsome > Header > Top Bar > HTML) */
.header-top { background: linear-gradient(90deg, #12528C 0%, #2369A7 50%, #12528C 100%); }

.noem-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.4vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
    font: 400 12.5px/1 var(--noem-sans);
    color: #fff;
    letter-spacing: .2px;
    text-transform: none;
}

.noem-topbar li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}

.noem-topbar li + li::before {
    content: "";
    width: 1px;
    height: 14px;
    margin-right: clamp(12px, 2.4vw, 40px);
    background: rgba(255, 255, 255, .35);
}

.noem-topbar svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--noem-champagne);
}

@media (max-width: 849px) {
    .noem-topbar li:not(:first-child) { display: none; }
    .noem-topbar { font-size: 12px; }
}

/* ======================= FOOTER (blocco UX "Footer NO.EM") ======================= */
.noem-footer { background-image: linear-gradient(135deg, #12528C 0%, #0d3f8f 100%); }
.noem-footer .col { padding-bottom: 18px; }
.noem-footer p,
.noem-footer li { color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.55; }
.noem-footer h4 {
    margin: 4px 0 14px;
    font: 700 13px/1.2 var(--noem-sans);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--noem-champagne);
}
.noem-footer ul { margin: 0; list-style: none; }
.noem-footer li { margin: 0 0 7px; padding: 0; }
.noem-footer ul li { margin-left: 0 !important; }
.noem-footer a { color: #fff; opacity: .9; }
.noem-footer a:hover { color: var(--noem-champagne); opacity: 1; }
.noem-footer .img { margin-bottom: 14px; }
.absolute-footer { background: #0b356f !important; color: rgba(255, 255, 255, .75); }
.absolute-footer a, .absolute-footer strong { color: #fff; }
@media (max-width: 549px) {
    .noem-footer .img { margin-left: auto; margin-right: auto; }
}

/* ======================= Spedizione gratuita: avviso carrello ======================= */
.noem-freeship {
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid rgba(215, 174, 120, .55);
    border-radius: 10px;
    background: var(--noem-champagne-light, #F5EBDD);
    color: var(--noem-text, #292D32);
}
.noem-freeship p { margin: 0 0 8px; font-size: 14.5px; }
.noem-freeship strong { color: var(--noem-blue-dark, #12528C); }
.noem-freeship-bar { display: block; height: 6px; border-radius: 99px; background: rgba(18, 82, 140, .12); overflow: hidden; }
.noem-freeship-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2b8be0, #12528C); }
.noem-freeship.is-done .noem-freeship-bar > span { background: linear-gradient(90deg, #D7AE78, #b8844a); }

/* ======================= HEADER COMUNE (anteprime approvate 15/10/2026) ======================= */

/* Desktop: barra di ricerca ampia tra menu e icone */
@media (min-width: 850px) {
    #header .header-search-form { margin-right: 18px; }
    #header .header-search-form-wrapper { width: clamp(220px, 21vw, 420px); }
    #header .header-search-form .searchform .search-field {
        height: 44px;
        padding: 0 18px;
        border: 1px solid #E3E8EE;
        border-radius: 999px 0 0 999px;
        background: var(--noem-pearl, #F2F3F5);
        box-shadow: none;
        font: 400 14px var(--noem-sans);
    }
    #header .header-search-form .searchform .ux-search-submit {
        height: 44px;
        min-height: 0;
        margin: 0;
        padding: 0 16px;
        border-radius: 0 999px 999px 0;
        background: var(--noem-blue-dark, #12528C);
    }
    #header .header-search-form .searchform .search-field:focus {
        border-color: var(--noem-blue, #2369A7);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(35, 105, 167, .12);
    }
}

/* Smartphone e tablet piccoli: header sempre visibile; il logo parte grande (86 px)
   e si riduce scorrendo fino a 54 px (sempre leggibile). --noem-k va da 0 a 1 (noem-header.js). */
@media (max-width: 849px) {
    html { --noem-k: 0; }
    html body #header {
        position: sticky;
        top: 0;
        z-index: 1000;
        height: auto !important;               /* annulla l'altezza fissata dallo sticky di Flatsome */
    }
    html body #header .header-wrapper.stuck,
    html body #header .header-wrapper.noem-stuck {
        position: relative !important;         /* niente "salto" dello sticky Flatsome/home */
        top: auto !important;
        animation: none !important;
    }
    html body #header .header-wrapper {
        box-shadow: 0 4px 18px rgba(18, 82, 140, calc(.03 + .09 * var(--noem-k)));
    }
    html body #header .header-top {
        min-height: 0;
        height: calc(32px * (1 - var(--noem-k)));
        overflow: hidden;
    }
    html body #header .header-top > .flex-row { height: 32px; }
    html body #header .header-main {
        height: calc(96px - 32px * var(--noem-k)) !important;
        min-height: 0 !important;
    }
    html body #header #logo {
        width: auto !important;
        max-width: none !important;
    }
    html body #header #logo img.header_logo {
        width: calc(86px - 32px * var(--noem-k)) !important;
        height: calc(86px - 32px * var(--noem-k)) !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain;
        filter: drop-shadow(0 3px 8px rgba(18, 82, 140, .16));
    }
}

/* Desktop: contenitore ampio e menu come nella home, su tutte le pagine */
@media (min-width: 850px) {
    #header .header-top .container,
    #header .header-main .container {
        max-width: 1440px;
        padding-left: clamp(16px, 2.4vw, 36px);
        padding-right: clamp(16px, 2.4vw, 36px);
    }
    #header .header-nav-main > li > a {
        font: 700 13px/1 var(--noem-sans);
        letter-spacing: .6px;
        color: var(--noem-blue-dark, #12528C);
        white-space: nowrap;
    }
    #header .header-nav-main > li > a:hover,
    #header .header-nav-main > li.active > a { color: var(--noem-blue, #2369A7); }

    /* pagine interne: logo grande a inizio pagina (sborda un poco sull'intestazione), compatto con l'header fisso */
    html body:not(.home) { --noem-ilogo: clamp(116px, 8.6vw, 138px); }
    html body:not(.home) #header .header-main { height: 92px; min-height: 0; position: relative; z-index: 12; }
    html body:not(.home) #header .header-top { position: relative; z-index: 11; }
    html body:not(.home) #header .header-wrapper:not(.stuck) #logo { position: relative; align-self: stretch; width: var(--noem-ilogo) !important; max-width: none !important; margin-right: 22px; }
    html body:not(.home) #header .header-wrapper:not(.stuck) #logo a { position: absolute; top: -12px; left: 0; width: var(--noem-ilogo); height: var(--noem-ilogo); display: block; }
    html body:not(.home) #header .header-wrapper:not(.stuck) #logo img.header_logo {
        width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
        object-fit: contain; filter: drop-shadow(0 6px 14px rgba(18, 82, 140, .2));
    }
    html body:not(.home) .noem-page-head-in { padding-top: calc(var(--noem-ilogo) - 92px + 4px); }
    html body:not(.home) #header .header-wrapper.stuck .header-main { height: 70px; }
    html body:not(.home) #header .header-wrapper.stuck #logo { width: 58px !important; }
    html body:not(.home) #header .header-wrapper.stuck #logo img.header_logo { width: 58px !important; height: 58px !important; max-height: none !important; }
}

/* Topbar su tablet orizzontale/laptop piccoli: 3 punti, così non viene tagliata */
@media (min-width: 850px) and (max-width: 1199px) {
    .noem-topbar li:nth-child(4) { display: none; }
    .noem-topbar { gap: clamp(10px, 1.6vw, 24px); }
}