/* =========================================================
   PET NUTRITION PRO STARTER THEME
   starter.css

   Base: Storefront + WooCommerce

   Contiene:
   - design foundation
   - layout globale Storefront
   - header desktop / tablet
   - navigazione e ricerca
   - mini-cart
   - pulsanti PNP e WooCommerce
   - Home Starter Kit
   - responsive generale
   - Storefront Handheld Navigation

   NON contiene:
   - Demo Store Notice
   - Agency Opportunity
   - Final Plugin CTA
   - styling Nutrition Form (nutrition-form.css)
   - styling Resulting Diet (resulting-diet.css)

   Versione Starter Kit: 1.0.0
   ========================================================= */

/* =========================================================
   1. VARIABILI
   ========================================================= */

:root {
    --pnp-green: #315f35;
    --pnp-green-dark: #1f4426;
    --pnp-green-light: #eaf1e6;

    --pnp-cream: #faf8f3;
    --pnp-beige: #f3eee4;
    --pnp-warm: #f4dfc9;

    --pnp-text: #1e2820;
    --pnp-muted: #667066;

    --pnp-border: #e7e2d9;

    --pnp-radius: 16px;
    --pnp-radius-small: 10px;

    --pnp-shadow:
        0 8px 30px rgba(26,50,29,.08);
}


/* =========================================================
   2. BASE
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    background: #ffffff;

    color: var(--pnp-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--pnp-text);

    line-height: 1.15;
}

a {
    color: var(--pnp-green);
}

a:hover {
    color: var(--pnp-green-dark);
}


/* =========================================================
   3. TITOLI PAGINE / BREADCRUMB
   ========================================================= */

.home .entry-header {
    display: none !important;
}

.home .storefront-breadcrumb {
    display: none !important;

    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

body:has(#petForm) .entry-header,
body:has(#petForm) .storefront-breadcrumb {
    display: none !important;
}

body:has(#petForm) .site-main {
    padding-top: 0 !important;
}


/* =========================================================
   4. STOREFRONT - LARGHEZZA
   ========================================================= */

.col-full {
    max-width: 1380px;

    padding-left: 32px;
    padding-right: 32px;
}

/* =========================================================
   5. HEADER
   ========================================================= */

.secondary-navigation {
    display: none !important;
}


/* ---------------------------------------------------------
   HEADER BASE
   --------------------------------------------------------- */

.site-header {
    margin-bottom: 0 !important;

    background:
        rgba(255,255,255,.98);

    border-bottom:
        1px solid var(--pnp-border);

    box-shadow:
        0 2px 14px
        rgba(20,40,24,.035);
}

.site-header .col-full {
    max-width: 1380px;
}


/* ---------------------------------------------------------
   BRANDING
   --------------------------------------------------------- */

.site-branding,
.site-search,
.site-header-cart {
    margin-bottom: 0;
}

.site-branding img {
    width: auto;

    max-height: 58px;
}


/* ---------------------------------------------------------
   PRIMARY NAVIGATION
   --------------------------------------------------------- */

.storefront-primary-navigation {
    background: #ffffff;

    border: 0;
}

.main-navigation {
    padding: 0;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
    padding:
        14px
        12px;

    color: var(--pnp-text);

    font-size: 15px;
    font-weight: 600;

    transition:
        color .2s ease,
        background .2s ease;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover,
.main-navigation ul.menu li.current-menu-item > a,
.main-navigation ul.nav-menu li.current-menu-item > a {
    color: var(--pnp-green);
}


/* ---------------------------------------------------------
   SEARCH
   --------------------------------------------------------- */

.site-search .widget_product_search,
.site-search .widget_product_search form {
    margin: 0;
}

.site-search .widget_product_search input[type="search"] {
    min-height: 42px;

    padding-left: 42px;

    background: #faf9f6;

    border:
        1px solid var(--pnp-border);

    border-radius: 30px;

    box-shadow: none;

    font-size: 14px;
}


/* ---------------------------------------------------------
   CART
   --------------------------------------------------------- */

.site-header-cart .cart-contents {
    color: var(--pnp-text);
}

.site-header-cart .cart-contents:hover {
    color: var(--pnp-green);
}


/* =========================================================
   HEADER DESKTOP
   > 1050px

   UNA SOLA FASCIA:
   LOGO | MENU + CTA | SEARCH | CART

   Il logo attuale ha uno spazio dedicato di circa 230px.
   Quando preparerai il logo definitivo potremo modificare
   soltanto questa misura.
   ========================================================= */
@media (min-width: 1051px) {

    .site-header {
        position: relative !important;

        min-height: 96px !important;

        padding: 0 !important;

        background:
            rgba(255,255,255,.98) !important;

        border-bottom:
            1px solid var(--pnp-border) !important;

        box-shadow:
            0 2px 14px
            rgba(20,40,24,.035) !important;
    }


    .site-header > .col-full,
    .storefront-primary-navigation,
    .storefront-primary-navigation > .col-full {
        display: contents !important;
    }


    .site-header .site-branding,
    .site-header .main-navigation,
    .site-header .site-search,
    .site-header .site-header-cart {
        position: absolute !important;

        top: 50% !important;

        transform:
            translateY(-50%) !important;

        margin: 0 !important;

        float: none !important;
    }


    /* =====================================================
       LOGO
       ===================================================== */

    .site-header .site-branding {
        left:
            max(
                32px,
                calc((100vw - 1380px) / 2 + 32px)
            ) !important;

        width:
            220px !important;

        max-width:
            220px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;
    }


    .site-header .site-branding a {
        display:
            inline-flex !important;

        align-items:
            center !important;
    }


    .site-header .site-branding img,
    .site-header .custom-logo {
        display:
            block !important;

        width:
            auto !important;

        max-width:
            210px !important;

        max-height:
            72px !important;

        margin:
            0 !important;

        object-fit:
            contain !important;
    }


    /* =====================================================
       MENU
       ===================================================== */

    .site-header .main-navigation {
        left:
            max(
                278px,
                calc((100vw - 1380px) / 2 + 278px)
            ) !important;

        width:
            auto !important;

        max-width:
            560px !important;

        display:
            flex !important;

        align-items:
            center !important;
    }


    .main-navigation .menu-toggle,
    .main-navigation .handheld-navigation {
        display:
            none !important;
    }


    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        display:
            flex !important;

        align-items:
            center !important;

        flex-wrap:
            nowrap !important;

        gap:
            2px !important;

        width:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;

        list-style:
            none !important;
    }


    .main-navigation ul.menu > li,
    .main-navigation ul.nav-menu > li {
        float:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        white-space:
            nowrap !important;
    }


    .main-navigation ul.menu > li > a,
    .main-navigation ul.nav-menu > li > a {
        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        min-height:
            44px !important;

        margin:
            0 !important;

        padding:
            10px
            10px !important;

        color:
            var(--pnp-text) !important;

        background:
            transparent !important;

        border-radius:
            8px !important;

        font-size:
            14px !important;

        font-weight:
            600 !important;

        line-height:
            1.1 !important;

        text-decoration:
            none !important;
    }


    .main-navigation ul.menu > li > a:hover,
    .main-navigation ul.nav-menu > li > a:hover,
    .main-navigation ul.menu li.current-menu-item > a,
    .main-navigation ul.nav-menu li.current-menu-item > a {
        color:
            var(--pnp-green) !important;

        background:
            rgba(234,241,230,.55) !important;
    }


    /* =====================================================
       CTA MENU
       ===================================================== */

    .main-navigation ul.menu > li.pnp-menu-cta,
    .main-navigation ul.nav-menu > li.pnp-menu-cta {
        margin-left:
            8px !important;
    }


    .main-navigation ul.menu > li.pnp-menu-cta > a,
    .main-navigation ul.nav-menu > li.pnp-menu-cta > a {
        min-height:
            46px !important;

        margin:
            0 !important;

        padding:
            10px
            17px !important;

        background:
            var(--pnp-green) !important;

        color:
            #ffffff !important;

        border:
            1px solid
            var(--pnp-green) !important;

        border-radius:
            9px !important;

        box-shadow:
            0 7px 16px
            rgba(49,95,53,.10);

        font-size:
            14px !important;

        font-weight:
            700 !important;

        line-height:
            1.1 !important;
    }


    .main-navigation ul.menu > li.pnp-menu-cta > a:hover,
    .main-navigation ul.nav-menu > li.pnp-menu-cta > a:hover {
        background:
            var(--pnp-green-dark) !important;

        border-color:
            var(--pnp-green-dark) !important;

        color:
            #ffffff !important;
    }


    /* =====================================================
       SEARCH
       ===================================================== */

    .site-header .site-search {
        right:
            max(
                225px,
                calc((100vw - 1380px) / 2 + 225px)
            ) !important;

        width:
            295px !important;

        min-width:
            250px !important;

        max-width:
            295px !important;
    }


    .site-header .site-search .widget_product_search,
    .site-header .site-search form {
        width:
            100% !important;

        margin:
            0 !important;
    }


    .site-header
    .site-search
    .widget_product_search
    input[type="search"] {
        box-sizing:
            border-box !important;

        display:
            block !important;

        width:
            100% !important;

        min-height:
            44px !important;

        margin:
            0 !important;

        padding:
            10px
            18px
            10px
            42px !important;

        background:
            #faf9f6 !important;

        color:
            var(--pnp-text) !important;

        border:
            1px solid
            var(--pnp-border) !important;

        border-radius:
            999px !important;

        box-shadow:
            none !important;

        font-size:
            14px !important;

        line-height:
            1.2 !important;
    }


    /* =====================================================
       CART
       ===================================================== */

    .site-header .site-header-cart {
        right:
            max(
                32px,
                calc((100vw - 1380px) / 2 + 32px)
            ) !important;

        width:
            180px !important;

        min-width:
            180px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            flex-end !important;
    }


    .site-header-cart .cart-contents {
        box-sizing:
            border-box !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            flex-end !important;

        gap:
            10px !important;

        width:
            100% !important;

        min-height:
            44px !important;

        margin:
            0 !important;

        padding:
            8px
            0 !important;

        color:
            var(--pnp-text) !important;

        background:
            transparent !important;

        font-size:
            14px !important;

        line-height:
            1.1 !important;

        text-decoration:
            none !important;
    }


    .site-header-cart .cart-contents:hover {
        color:
            var(--pnp-green) !important;
    }


    /* B2.6.3 - Spaziatura importo, quantita e icona. */
    .site-header-cart .cart-contents .count {
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .site-header-cart .cart-contents::after {
        float: none !important;
        position: static !important;
        flex: 0 0 auto !important;
        margin-left: 4px !important;
    }

    .site-header-cart
    .widget_shopping_cart {
        top:
            calc(100% + 8px) !important;
    }

}


/* =========================================================
   6. RESET HOME STOREFRONT
   ========================================================= */

.home .site-content {
    margin: 0 !important;
    padding: 0 !important;
}

.home .site-content > .col-full {
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

.home .content-area,
.home .site-main,
.home article.hentry,
.home .entry-content {
    width: 100% !important;

    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Ripulisce residui prodotti dall'editor classico */

.home .entry-content > p:empty,
.home .entry-content > p:has(br:only-child),
.home .entry-content > br {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   7. PULSANTI PNP
   ========================================================= */

/*
 * IMPORTANTE:
 *
 * I pulsanti contengono SOLO testo.
 * Nessuno span interno.
 * Nessuna freccia.
 * Nessun posizionamento assoluto.
 *
 * Un'unica regola controlla la centratura.
 */

.pnp-hero-button {
    box-sizing: border-box;

    width: auto !important;
    min-width: 0 !important;

    height: 56px;
    min-height: 56px;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0;

    /*
     * 6px sotto spostano otticamente
     * il testo di circa 3px verso l'alto.
     */
    padding:
        0
        20px
        6px !important;

    border-radius: 10px;

    text-decoration: none !important;
    text-align: center !important;

    font-size: 16px;
    font-weight: 700;

    line-height: 1 !important;

    white-space: nowrap;

    vertical-align: middle;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* PRIMARIO */

.pnp-hero-button--primary {
    background:
        var(--pnp-green);

    color:
        #ffffff !important;

    border:
        1px solid var(--pnp-green);

    box-shadow:
        0 8px 22px
        rgba(49,95,53,.18);
}

.pnp-hero-button--primary:hover {
    background:
        var(--pnp-green-dark);

    color:
        #ffffff !important;

    border-color:
        var(--pnp-green-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 26px
        rgba(49,95,53,.22);
}


/* SECONDARIO */

.pnp-hero-button--secondary {
    background:
        rgba(255,255,255,.88);

    color:
        var(--pnp-green-dark) !important;

    border:
        1px solid
        rgba(49,95,53,.48);

    box-shadow: none;
}

.pnp-hero-button--secondary:hover {
    background: #ffffff;

    color:
        var(--pnp-green-dark) !important;

    border-color:
        var(--pnp-green);

    transform:
        translateY(-2px);
}


/* ACCENT - CTA ARANCIONE */

.pnp-hero-button--accent {
    background: #f1b57b;

    color:
        #173b20 !important;

    border:
        1px solid #f1b57b;

    box-shadow:
        0 8px 22px
        rgba(49,95,53,.10);
}

.pnp-hero-button--accent:hover {
    background: #f7c696;

    color:
        #173b20 !important;

    border-color: #f7c696;

    transform:
        translateY(-2px);
}


/* =========================================================
   8. PULSANTI WOOCOMMERCE
   ========================================================= */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget a.button,
.site-header-cart .widget_shopping_cart a.button {
    box-sizing: border-box;

    min-height: 44px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0
        20px;

    background:
        var(--pnp-green);

    color: #ffffff;

    border:
        1px solid var(--pnp-green);

    border-radius: 9px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;

    text-align: center;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover {
    background:
        var(--pnp-green-dark);

    color: #ffffff;

    border-color:
        var(--pnp-green-dark);
}


/* =========================================================
   9. HERO
   ========================================================= */

.pnp-home-hero {
    margin: 0 !important;
    padding: 0;

    background:
        linear-gradient(
            90deg,
            #faf7ef 0%,
            #fffdf8 50%,
            #ffffff 100%
        );

    overflow: hidden;
}

.pnp-home-hero__content {
    max-width: 1380px;

    min-height: 540px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.08fr);

    align-items: center;

    gap: 38px;
}


/* HERO COPY */

.pnp-home-hero__copy {
    padding:
        54px
        26px
        54px
        32px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.pnp-home-hero__eyebrow {
    margin-bottom: 14px;

    color:
        var(--pnp-green);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}

.pnp-home-hero h1 {
    max-width: 600px;

    margin:
        0
        0
        20px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            42px,
            4vw,
            68px
        );

    line-height: .99;

    font-weight: 700;

    letter-spacing: -.035em;
}

.pnp-home-hero__lead {
    max-width: 570px;

    margin:
        0
        0
        28px;

    color: #566057;

    font-size: 18px;

    line-height: 1.55;
}


/* HERO ACTIONS */

.pnp-home-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 30px;
}

/* HERO BENEFITS */

.pnp-home-hero__benefits {
    display: flex;

    flex-wrap: wrap;

    gap:
        12px
        24px;

    color: #404941;

    font-size: 14px;
    font-weight: 600;
}

.pnp-home-hero__benefits div {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    line-height: 1.2;
}

.pnp-home-hero__benefits span {
    flex:
        0 0
        25px;

    width: 25px;
    height: 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background:
        var(--pnp-green-light);

    color:
        var(--pnp-green);

    border-radius: 50%;

    font-weight: 800;

    line-height: 1;

    /* Optical alignment with the text baseline */
    transform: translateY(7px);
}


/* HERO IMAGE */

.pnp-home-hero__visual {
    position: relative;

    min-height: 540px;

    overflow: hidden;
}

.pnp-home-hero__visual > img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;

    display: block;
}


/* HERO PET CARD */

.pnp-home-hero__pet-card {
    position: absolute;

    top: 44px;
    right: 28px;

    width: 350px;

    padding: 30px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid
        rgba(255,255,255,.75);

    border-radius: 22px;

    box-shadow:
        0 16px 42px
        rgba(25,44,29,.13);

    backdrop-filter:
        blur(8px);
}

.pnp-home-hero__pet-card strong {
    display: block;

    margin-bottom: 9px;

    color:
        var(--pnp-text);

    font-size: 25px;
    font-weight: 700;

    line-height: 1.16;
}

.pnp-home-hero__pet-card span {
    display: block;

    margin-bottom: 9px;

    color:
        var(--pnp-muted);

    font-size: 18px;

    line-height: 1.36;
}

.pnp-home-hero__pet-card small {
    display: block;

    color:
        var(--pnp-green);

    font-size: 16px;
    font-weight: 700;

    line-height: 1.28;
}


/* =========================================================
   10. CONTENITORI E TITOLI
   ========================================================= */

.pnp-home-inner {
    max-width: 1380px;

    margin: 0 auto;

    padding-left: 32px;
    padding-right: 32px;
}

.pnp-home-section {
    padding:
        58px
        0;
}

.pnp-section-heading {
    max-width: 760px;

    margin:
        0
        auto
        34px;

    text-align: center;
}

.pnp-section-eyebrow {
    margin-bottom: 10px;

    color:
        var(--pnp-green);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.pnp-section-heading h2,
.pnp-personalized-cta h2 {
    margin:
        0
        0
        14px;

    color:
        var(--pnp-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            32px,
            3vw,
            46px
        );

    line-height: 1.08;

    letter-spacing: -.025em;
}

.pnp-section-heading p {
    margin: 0;

    color:
        var(--pnp-muted);

    font-size: 17px;

    line-height: 1.6;
}


/* =========================================================
   11. HOW IT WORKS
   ========================================================= */

.pnp-how {
    padding:
        62px
        0;

    background: #ffffff;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.pnp-how-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;

    align-items: stretch;
}


/*
 * WordPress / wpautop può introdurre P, BR
 * o altri elementi vuoti fra le card.
 *
 * Non devono diventare celle della grid.
 */

.pnp-how-grid > *:not(.pnp-how-card) {
    display: none !important;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.pnp-how-card {
    position: relative;

    min-width: 0;
    min-height: 190px;

    display: grid;

    grid-template-columns:
        112px
        minmax(0, 1fr);

    align-items: center;

    gap: 22px;

    margin: 0 !important;

    padding:
        26px;

    background:
        #ffffff;

    border:
        1px solid
        var(--pnp-border);

    border-radius: 18px;

    box-shadow:
        0 7px 24px
        rgba(30,55,32,.055);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.pnp-how-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(49,95,53,.22);

    box-shadow:
        0 15px 34px
        rgba(30,55,32,.10);
}


/* ---------------------------------------------------------
   NUMERO + ICONA
   --------------------------------------------------------- */

.pnp-how-card__top {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 112px;
}


/* NUMERO */

.pnp-how-number {
    position: absolute;

    top: -6px;
    left: -6px;

    z-index: 2;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;

    background:
        var(--pnp-green-light);

    color:
        var(--pnp-green);

    border:
        1px solid
        rgba(49,95,53,.08);

    border-radius: 50%;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .03em;
}


/* ---------------------------------------------------------
   ICONA
   --------------------------------------------------------- */

.pnp-how-icon {
    width: 88px;
    height: 88px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #edf4e9 0%,
            #f7faf5 100%
        );

    color:
        var(--pnp-green);

    border-radius: 50%;

    box-shadow:
        inset 0 0 0 1px
        rgba(49,95,53,.06);
}

.pnp-how-icon svg {
    width: 45px;
    height: 45px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 2.4;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------------------------------------------------------
   TESTO
   --------------------------------------------------------- */

.pnp-how-card__content {
    min-width: 0;
}

.pnp-how-card h3 {
    margin:
        0
        0
        9px;

    color:
        var(--pnp-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    line-height: 1.15;
}

.pnp-how-card p {
    margin: 0;

    color:
        var(--pnp-muted);

    font-size: 15px;

    line-height: 1.55;
}


/* ---------------------------------------------------------
   STEP 1 - VERDE
   --------------------------------------------------------- */

.pnp-how-card:nth-of-type(1) .pnp-how-icon {
    background:
        linear-gradient(
            145deg,
            #edf4e9 0%,
            #f7faf5 100%
        );

    color:
        var(--pnp-green);
}

.pnp-how-card:nth-of-type(1) .pnp-how-number {
    background:
        var(--pnp-green-light);

    color:
        var(--pnp-green);
}


/* ---------------------------------------------------------
   STEP 2 - ARANCIO
   --------------------------------------------------------- */

.pnp-how-card:nth-of-type(2) .pnp-how-icon {
    background:
        linear-gradient(
            145deg,
            #faf0e5 0%,
            #fff9f2 100%
        );

    color:
        #b86c3a;
}

.pnp-how-card:nth-of-type(2) .pnp-how-number {
    background:
        #f8eadc;

    color:
        #a95d2f;
}


/* ---------------------------------------------------------
   STEP 3 - AZZURRO
   --------------------------------------------------------- */

.pnp-how-card:nth-of-type(3) .pnp-how-icon {
    background:
        linear-gradient(
            145deg,
            #e9f2f5 0%,
            #f7fbfc 100%
        );

    color:
        #46768b;
}

.pnp-how-card:nth-of-type(3) .pnp-how-number {
    background:
        #e5f0f4;

    color:
        #3e7187;
}


/* =========================================================
   12. SHOP BY FOOD TYPE
   ========================================================= */

.pnp-food-types {
    padding:
        58px
        0;

    background:
        var(--pnp-cream);
}

.pnp-food-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 24px;

    align-items: start;
}

.pnp-food-grid > p,
.pnp-food-grid > br,
.pnp-food-grid > *:empty,
.pnp-food-item:empty,
.pnp-food-item:not(:has(.pnp-food-card)) {
    display: none !important;
}

.pnp-food-item {
    min-width: 0;
}

.pnp-food-card {
    display: block;

    width: 100%;

    overflow: hidden;

    background: transparent;

    border-radius: 20px;

    text-decoration: none !important;

    box-shadow:
        0 8px 28px
        rgba(30,50,32,.09);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.pnp-food-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 16px 38px
        rgba(30,50,32,.16);
}

.pnp-food-card img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    border-radius: 20px;
}


/* =========================================================
   14. POPULAR PRODUCTS
   ========================================================= */

.pnp-popular-products {
    padding:
        64px
        0
        70px;

    background:
        var(--pnp-cream);
}


/* ---------------------------------------------------------
   GRID PRODOTTI
   --------------------------------------------------------- */

.pnp-products-shortcode {
    margin-top: 14px;
}

.pnp-products-shortcode ul.products {
    display: grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 24px;

    margin: 0 !important;
    padding: 0 !important;
}

.pnp-products-shortcode ul.products::before,
.pnp-products-shortcode ul.products::after {
    display: none !important;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.pnp-products-shortcode ul.products li.product {
    box-sizing: border-box;

    width: auto !important;
    min-width: 0;

    float: none !important;

    display: flex;
    flex-direction: column;

    margin: 0 !important;

    padding:
        12px
        12px
        18px;

    background:
        #ffffff;

    border:
        1px solid
        var(--pnp-border);

    border-radius: 20px;

    box-shadow:
        0 8px 26px
        rgba(30, 50, 32, .07);

    overflow: hidden;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.pnp-products-shortcode ul.products li.product:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(49, 95, 53, .22);

    box-shadow:
        0 16px 38px
        rgba(30, 50, 32, .12);
}


/* ---------------------------------------------------------
   LINK PRINCIPALE PRODOTTO
   --------------------------------------------------------- */

.pnp-products-shortcode
ul.products
li.product
.woocommerce-LoopProduct-link {
    display: flex;

    flex-direction: column;

    flex: 1;

    width: 100%;

    text-decoration: none !important;
}


/* ---------------------------------------------------------
   IMMAGINE
   --------------------------------------------------------- */

.pnp-products-shortcode
ul.products
li.product
img {
    box-sizing: border-box;

    width: 100% !important;
    height: auto !important;

    aspect-ratio:
        1 / 1;

    object-fit: cover;

    object-position: center;

    display: block;

    margin:
        0
        0
        18px !important;

    padding: 0;

    background:
        #f7f5ef;

    border:
        0;

    border-radius: 16px;

    box-shadow:
        inset 0 0 0 1px
        rgba(231,226,217,.90);
}


/* ---------------------------------------------------------
   TITOLO PRODOTTO
   --------------------------------------------------------- */

.pnp-products-shortcode
ul.products
li.product
.woocommerce-loop-product__title {
    min-height: 46px;

    display: flex;

    align-items: flex-start;
    justify-content: center;

    margin:
        0
        6px
        8px;

    padding: 0;

    color:
        var(--pnp-text);

    font-size: 16px;

    font-weight: 700;

    line-height: 1.3;

    text-align: center;
}


/* ---------------------------------------------------------
   PREZZO
   --------------------------------------------------------- */

.pnp-products-shortcode
ul.products
li.product
.price {
    display: block;

    margin:
        0
        0
        15px;

    color:
        var(--pnp-green-dark);

    font-size: 17px;

    font-weight: 800;

    line-height: 1.2;

    text-align: center;
}


/* ---------------------------------------------------------
   ADD TO CART
   --------------------------------------------------------- */

.pnp-products-shortcode
ul.products
li.product
.button {
    min-width: 138px;
    min-height: 46px;

    align-self: center;

    margin:
        auto
        auto
        0 !important;

    padding:
        0
        22px !important;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 700;
}


/* ---------------------------------------------------------
   VIEW ALL PRODUCTS
   --------------------------------------------------------- */

.pnp-section-actions {
    margin-top: 34px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.pnp-section-actions .pnp-hero-button {
    width: 230px;
    min-width: 230px;
}


/* =========================================================
   STOREFRONT FOOTER OUTER RESET
   Mantiene neutro il contenitore esterno Storefront.
   Il contenuto del footer resta gestito da PNP Demo - Footer Style.
   ========================================================= */

.site-footer {
    padding: 0 !important;
    background: #f6f2e9;
    border-top: 0 !important;
}


/* =========================================================
   PERSONALIZED NUTRITION CTA
   ========================================================= */

.pnp-personalized-cta {
    padding: 28px 0 34px;
    background: #f6f4ee;
}

.pnp-personalized-cta .pnp-home-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.pnp-personalized-cta__box {
    min-height: 390px;

    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(520px, 1.25fr);
    align-items: stretch;
    gap: 0;
    background: linear-gradient(135deg, #21592b 0%, #2f6d35 100%);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.pnp-personalized-cta__content {
    padding: 46px 42px 46px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
}

.pnp-personalized-cta__content .pnp-section-eyebrow {
    color: #ffffff;
    opacity: 0.95;
    margin-bottom: 14px;
}

.pnp-personalized-cta__content h2 {
    margin: 0 0 18px;
    font-size: clamp(2.3rem, 4vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #ffffff;
    max-width: 520px;
}

.pnp-personalized-cta__content p {
    margin: 0 0 28px;
    font-size: 1.14rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.95);
    max-width: 520px;
}

.pnp-personalized-cta__content .pnp-hero-button {
    align-self: flex-start;
    min-width: 250px;
}

.pnp-personalized-cta__visual {
    position: relative;
    min-height: 0;
    height: auto;
    align-self: stretch;

    margin: 16px 16px 16px 0;

    overflow: hidden;
    border-radius: 16px;
    display: block;
    padding: 0;
}

.pnp-personalized-cta__visual img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: cover;
    object-position: center center;
    border-radius: 16px;
}

.pnp-personalized-cta__benefits {
    position: absolute;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
    width: min(320px, 38%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pnp-personalized-cta__benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    background: rgba(255, 248, 239, 0.93);
    border: 1px solid rgba(212, 192, 162, 0.55);
    border-radius: 18px;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.pnp-personalized-cta__benefit-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e9f1e6;
    color: #2f6d35;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 1px;
}

.pnp-personalized-cta__benefit strong {
    display: block;
    margin: 0 0 8px;
    font-size: 1.18rem;
    line-height: 1.3;
    color: #223126;
    font-weight: 700;
}

.pnp-personalized-cta__benefit small {
    display: block;
    font-size: 1rem;
    line-height: 1.55;
    color: #546257;
}

/* ---------- laptop ---------- */
@media (max-width: 1180px) {
    .pnp-personalized-cta__box {
        grid-template-columns: 1fr 1.05fr;
    }

    .pnp-personalized-cta__content {
        padding: 40px 34px;
    }

    .pnp-personalized-cta__visual {
        padding: 0;
    }

    .pnp-personalized-cta__benefits {
        right: 24px;
        width: min(300px, 40%);
        gap: 12px;
    }

    .pnp-personalized-cta__benefit {
        padding: 13px 14px;
    }
}

/* ---------- tablet ---------- */
@media (max-width: 991px) {
    .pnp-personalized-cta {
        padding: 24px 0 30px;
    }

    .pnp-personalized-cta__box {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pnp-personalized-cta__content {
        padding: 36px 28px 28px;
    }

    .pnp-personalized-cta__content h2,
    .pnp-personalized-cta__content p {
        max-width: none;
    }

    .pnp-personalized-cta__visual {
        padding: 0 28px 28px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .pnp-personalized-cta__benefits {
        position: static;
        transform: none;
        width: 100%;
        order: 1;
    }

    .pnp-personalized-cta__visual img {
        order: 2;
        min-height: 340px;
        border-radius: 22px;
    }
}

/* ---------- mobile ---------- */


/* =========================================================
   PERSONALIZED CTA - BENEFIT DESKTOP REFINEMENT
   ========================================================= */

@media (min-width: 992px) {

    .pnp-personalized-cta__benefits {
        right: 28px;
        top: 50%;

        transform: translateY(-50%);

        width: 300px;

        gap: 12px;
    }

    .pnp-personalized-cta__benefit {
        width: 100%;
        max-width: 300px;

        gap: 10px;

        padding:
            14px
            15px;

        border-radius: 16px;
    }

    .pnp-personalized-cta__benefit-icon {
        flex: 0 0 25px;

        width: 25px;
        height: 25px;

        margin-top: 1px;

        font-size: 0.86rem;
    }

    .pnp-personalized-cta__benefit strong {
        margin:
            0
            0
            5px;

        font-size: 1.05rem;

        line-height: 1.25;
    }

    .pnp-personalized-cta__benefit small {
        font-size: 0.93rem;

        line-height: 1.4;
    }

}

/* =========================================================
   17. MOBILE
   ========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       HOW IT WORKS
       ===================================================== */

    .pnp-how-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .pnp-how-card {
        min-height: 0;

        grid-template-columns:
            52px
            minmax(0, 1fr);

        gap: 8px;

        padding:
            18px
            10px;
    }

    .pnp-how-card__top {
        width: 52px;
    }

    .pnp-how-icon {
        width: 52px;
        height: 52px;
    }

    .pnp-how-icon svg {
        width: 28px;
        height: 28px;
    }

    .pnp-how-number {
        width: 30px;
        height: 30px;

        top: -4px;
        left: -4px;

        font-size: 10px;
    }

    .pnp-how-card h3 {
        margin-bottom: 6px;

        font-size: 19px;

        line-height: 1.12;

        text-wrap: balance;
    }

    .pnp-how-card p {
        max-width: none;

        font-size: 13.5px;

        line-height: 1.4;

        text-wrap: pretty;
    }

    /* =====================================================
       POPULAR PRODUCTS
       ===================================================== */

    .pnp-popular-products {
        padding:
            44px
            0
            48px;
    }

    .pnp-products-shortcode ul.products {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .pnp-products-shortcode
    ul.products
    li.product {
        max-width: 420px;

        width: 100% !important;

        margin:
            0
            auto !important;

        padding:
            12px
            12px
            18px;
    }

    .pnp-products-shortcode
    ul.products
    li.product
    img {
        width: 100% !important;

        margin-bottom:
            16px !important;

        border-radius: 15px;
    }

    .pnp-products-shortcode
    ul.products
    li.product
    .woocommerce-loop-product__title {
        min-height: 0;

        margin-bottom: 8px;

        font-size: 17px;

        line-height: 1.3;
    }

    .pnp-products-shortcode
    ul.products
    li.product
    .price {
        margin-bottom: 14px;

        font-size: 17px;
    }

    .pnp-products-shortcode
    ul.products
    li.product
    .button {
        min-width: 150px;

        min-height: 46px;
    }

    .pnp-section-actions {
        margin-top: 28px;
    }

    .pnp-section-actions .pnp-hero-button {
        width: 100%;

        max-width: 300px;

        min-width: 0;
    }


    .col-full {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* HEADER */

    .site-header {
        margin-bottom: 0 !important;

        padding-top: 10px;
        padding-bottom: 10px;
    }


    /* HOME */

    .pnp-home-inner {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* HERO */

    .pnp-home-hero__content {
        display: flex;

        flex-direction: column;

        min-height: 0;

        gap: 0;
    }

    .pnp-home-hero__copy {
        padding:
            34px
            20px
            26px;
    }

    .pnp-home-hero h1 {
        font-size:
            clamp(
                40px,
                12vw,
                54px
            );

        line-height: 1;
    }

    .pnp-home-hero__lead {
        max-width: none !important;

        margin-bottom: 24px;

        font-size: 16px !important;

        line-height: 1.55 !important;
    }


    /* HERO BUTTONS */

    .pnp-home-hero__actions {
        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-bottom: 28px;
    }

.pnp-home-hero__actions .pnp-hero-button {
    width: 100% !important;
    min-width: 0 !important;

    height: 58px;
    min-height: 58px;

    white-space: normal;

    padding:
        0
        24px
        6px !important;

    font-size: 17px;

    line-height: 1 !important;
}


    /* BENEFITS */

    .pnp-home-hero__benefits {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .pnp-home-hero__benefits div {
        align-items: center;
    }

    .pnp-home-hero__benefits span {
        transform: translateY(6px);
    }


    /* HERO IMAGE */

    .pnp-home-hero__visual {
        min-height: 0;

        padding:
            0
            20px
            30px;

        overflow: visible;
    }

    .pnp-home-hero__visual > img {
        position: static;

        width: 100%;
        height: auto;

        aspect-ratio:
            4 / 3;

        object-fit: cover;

        object-position:
            center center;

        border-radius:
            18px
            18px
            0
            0;
    }


    /* HERO PET CARD */

    .pnp-home-hero__pet-card {
        position: static;

        width: auto;

        margin: 0;

        padding:
            24px
            22px;

        background:
            #ffffff;

        border-radius:
            0
            0
            18px
            18px;

        box-shadow:
            0 10px 28px
            rgba(25,44,29,.10);
    }

    .pnp-home-hero__pet-card strong {
        margin-bottom: 7px;

        font-size: 23px;

        line-height: 1.16;
    }

    .pnp-home-hero__pet-card span {
        margin-bottom: 7px;

        font-size: 16px;

        line-height: 1.36;
    }

    .pnp-home-hero__pet-card small {
        font-size: 15px;

        line-height: 1.25;
    }


    /* SECTION TITLES */

    .pnp-section-heading {
        margin-bottom: 28px;

        text-align: center;
    }

    .pnp-section-heading p {
        font-size: 16px;
    }


    /* SECTION SPACING */

    .pnp-home-section,
    .pnp-how,
    .pnp-food-types,
    .pnp-personalized-cta,
    .pnp-popular-products {
        padding-top: 42px;
        padding-bottom: 42px;
    }


    /* FOOD TYPES */

    .pnp-food-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .pnp-food-item {
        margin: 0 !important;
        padding: 0 !important;
    }

    .pnp-food-card {
        min-height: 0 !important;

        margin: 0 !important;
    }

    .pnp-food-card img {
        width: 100%;
        height: auto;
    }

    .pnp-food-grid > *:not(.pnp-food-item),
    .pnp-food-item:not(:has(img)) {
        display: none !important;
    }

.pnp-personalized-cta .pnp-home-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pnp-personalized-cta__box {
        min-height: 0;

        border-radius: 24px;
    }

    .pnp-personalized-cta__content {
        padding: 28px 10px 22px;
    }

    .pnp-personalized-cta__content .pnp-section-eyebrow {
        margin-bottom: 12px;
    }

    .pnp-personalized-cta__content h2 {
        font-size: 2.15rem;
        line-height: 1.05;
        margin-bottom: 14px;
    }

    .pnp-personalized-cta__content p {
        max-width: none;

        font-size: 0.92rem;
        line-height: 1.48;
        letter-spacing: -0.005em;

        margin-bottom: 22px;

        text-wrap: wrap;
    }

    .pnp-personalized-cta__content .pnp-hero-button {
        width: 100%;
        min-width: 0;

        justify-content: center;

        font-size: 17px;
    }

    .pnp-personalized-cta__visual {
        margin: 0 16px 16px;

        padding: 0 20px 20px;

        gap: 14px;

        overflow: hidden;
        border-radius: 16px;
    }

    .pnp-personalized-cta__benefit {
        width: 100%;
        max-width: 340px;

        display: flex;
        align-items: flex-start;

        gap: 14px;

        padding: 13px 14px;

        background: rgba(255, 248, 239, 0.96);

        border: 1px solid rgba(212, 192, 162, 0.58);
        border-radius: 16px;

        backdrop-filter: blur(6px);

        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }

    .pnp-personalized-cta__benefit strong {
        margin-bottom: 3px;

        font-size: 0.95rem;

        line-height: 1.18;
    }

    .pnp-personalized-cta__benefit small {
        font-size: 0.86rem;

        line-height: 1.34;
    }

    .pnp-personalized-cta__visual img {
        position: static;

        min-height: 250px;

        aspect-ratio: 4 / 3;

        border-radius: 18px;
    }
}

/* =========================================================
   HEADER TABLET
   768px - 1050px

   RIGA 1:
   LOGO                               SEARCH

   RIGA 2:
   MENU + CTA                         CART
   ========================================================= */

@media (min-width: 768px) and (max-width: 1050px) {


    /* =====================================================
       HEADER
       ===================================================== */

    .site-header {
        position: relative !important;

        min-height: 156px !important;

        margin-bottom: 0 !important;

        padding: 0 !important;

        background:
            rgba(255,255,255,.98) !important;

        border-bottom:
            1px solid var(--pnp-border) !important;

        box-shadow:
            0 2px 14px
            rgba(20,40,24,.035) !important;
    }


    /*
     * Neutralizziamo i wrapper Storefront.
     */

    .site-header > .col-full,
    .storefront-primary-navigation,
    .storefront-primary-navigation > .col-full {
        display: contents !important;
    }


    /* =====================================================
       LOGO
       ===================================================== */

    .site-header .site-branding {
        position: absolute !important;

        top: 18px !important;

        left:
            max(
                28px,
                calc((100vw - 900px) / 2 + 28px)
            ) !important;

        width: 240px !important;
        max-width: 240px !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;
    }


    .site-header .site-branding a {
        display: inline-flex !important;

        align-items: center !important;
    }


    .site-header .site-branding img,
    .site-header .custom-logo {
        display: block !important;

        width: auto !important;

        max-width: 230px !important;
        max-height: 68px !important;

        margin: 0 !important;

        object-fit: contain !important;
    }


    /* =====================================================
       SEARCH
       ===================================================== */

    .site-header .site-search {
        position: absolute !important;

        top: 26px !important;

        right:
            max(
                28px,
                calc((100vw - 900px) / 2 + 28px)
            ) !important;

        width: 280px !important;
        max-width: 280px !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
    }


    .site-header .site-search .widget_product_search,
    .site-header .site-search form {
        width: 100% !important;

        margin: 0 !important;
    }


    .site-header
    .site-search
    .widget_product_search
    input[type="search"] {
        box-sizing: border-box !important;

        display: block !important;

        width: 100% !important;

        min-height: 44px !important;

        margin: 0 !important;

        padding:
            10px
            16px
            10px
            40px !important;

        background:
            #faf9f6 !important;

        color:
            var(--pnp-text) !important;

        border:
            1px solid
            var(--pnp-border) !important;

        border-radius:
            999px !important;

        box-shadow:
            none !important;

        font-size:
            13px !important;

        line-height:
            1.2 !important;
    }


    /* =====================================================
       MENU
       ===================================================== */

    .site-header .main-navigation {
        position: absolute !important;

        left:
            max(
                28px,
                calc((100vw - 900px) / 2 + 28px)
            ) !important;

        bottom: 14px !important;

        width: auto !important;
        max-width: 620px !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;
        clear: none !important;

        display: flex !important;

        align-items: center !important;
    }


    .main-navigation .menu-toggle,
    .main-navigation .handheld-navigation {
        display: none !important;
    }


    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        display: flex !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

        gap: 2px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    .main-navigation ul.menu > li,
    .main-navigation ul.nav-menu > li {
        float: none !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }


    .main-navigation ul.menu > li > a,
    .main-navigation ul.nav-menu > li > a {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-height: 42px !important;

        margin: 0 !important;

        padding:
            9px
            9px !important;

        color:
            var(--pnp-text) !important;

        background:
            transparent !important;

        border-radius:
            8px !important;

        font-size:
            13px !important;

        font-weight:
            600 !important;

        line-height:
            1.1 !important;

        text-decoration:
            none !important;
    }


    .main-navigation ul.menu > li > a:hover,
    .main-navigation ul.nav-menu > li > a:hover,
    .main-navigation ul.menu li.current-menu-item > a,
    .main-navigation ul.nav-menu li.current-menu-item > a {
        color:
            var(--pnp-green) !important;

        background:
            rgba(234,241,230,.55) !important;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .main-navigation ul.menu > li:last-child,
    .main-navigation ul.nav-menu > li:last-child {
        margin-left: 8px !important;
    }


    .main-navigation ul.menu > li:last-child > a,
    .main-navigation ul.nav-menu > li:last-child > a {
        min-height: 44px !important;

        margin: 0 !important;

        padding:
            9px
            15px !important;

        background:
            var(--pnp-green) !important;

        color:
            #ffffff !important;

        border:
            1px solid
            var(--pnp-green) !important;

        border-radius:
            9px !important;

        box-shadow:
            0 6px 14px
            rgba(49,95,53,.10) !important;

        font-size:
            13px !important;

        font-weight:
            700 !important;

        line-height:
            1.1 !important;

        white-space:
            nowrap !important;
    }


    .main-navigation ul.menu > li:last-child > a:hover,
    .main-navigation ul.nav-menu > li:last-child > a:hover {
        background:
            var(--pnp-green-dark) !important;

        border-color:
            var(--pnp-green-dark) !important;

        color:
            #ffffff !important;
    }


    /* =====================================================
       CART
       ===================================================== */

    .site-header .site-header-cart {
        position: absolute !important;

        right:
            max(
                28px,
                calc((100vw - 900px) / 2 + 28px)
            ) !important;

        bottom: 14px !important;

        width: 145px !important;
        min-width: 145px !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;
    }


    .site-header-cart .cart-contents {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 4px !important;

        width: 100% !important;

        min-height: 42px !important;

        margin: 0 !important;

        padding:
            7px
            0 !important;

        color:
            var(--pnp-text) !important;

        background:
            transparent !important;

        font-size:
            13px !important;

        line-height:
            1.1 !important;

        text-decoration:
            none !important;
    }


    .site-header-cart .cart-contents:hover {
        color:
            var(--pnp-green) !important;
    }

/* =====================================================
       1. CONTENITORE GENERALE
       ===================================================== */

    .pnp-home-inner {
        padding-left: 28px;
        padding-right: 28px;
    }


    /* =====================================================
       2. HERO TABLET
       ===================================================== */

    .pnp-home-hero__content {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 0 !important;

        min-height: 0 !important;

        max-width: 900px;

        margin-left: auto;
        margin-right: auto;
    }


    .pnp-home-hero__copy {
        padding:
            42px
            38px
            28px !important;
    }


    .pnp-home-hero h1 {
        max-width: 650px;

        margin-bottom: 20px;

        font-size: clamp(
            46px,
            7vw,
            60px
        );

        line-height: 1;
    }


    .pnp-home-hero__lead {
        max-width: 620px;

        margin-bottom: 24px;

        font-size: 17px;

        line-height: 1.55;
    }


    /* -----------------------------------------------------
       HERO BUTTONS
       ----------------------------------------------------- */

    .pnp-home-hero__actions {
        display: flex !important;

        flex-direction: row !important;

        flex-wrap: wrap;

        align-items: center;
        justify-content: flex-start;

        gap: 14px;

        max-width: none !important;

        margin-bottom: 24px;
    }


    .pnp-home-hero__actions .pnp-hero-button {
        width: 210px !important;
        min-width: 210px !important;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    /* -----------------------------------------------------
       HERO BENEFITS
       ----------------------------------------------------- */

    .pnp-home-hero__benefits {
        display: flex !important;

        flex-wrap: wrap;

        align-items: center;

        gap:
            12px
            24px;

        font-size: 13px;
    }


    .pnp-home-hero__benefits span {
        width: 23px;
        height: 23px;

        flex: 0 0 23px;

        transform: translateY(6px);
    }


    /* -----------------------------------------------------
       HERO IMAGE
       ----------------------------------------------------- */

    .pnp-home-hero__visual {
        position: relative !important;

        width: auto;

        height: 400px !important;
        min-height: 400px !important;

        margin:
            0
            38px
            38px;

        overflow: hidden;

        border-radius: 20px;
    }


    .pnp-home-hero__visual > img {
        position: absolute !important;

        inset: 0;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover;

        object-position: center center;

        border-radius: 20px;
    }


    .pnp-home-hero__pet-card {
        position: absolute !important;

        top: 28px !important;
        right: 28px !important;

        width: 280px !important;

        padding: 24px !important;

        border-radius: 18px;
    }


    .pnp-home-hero__pet-card strong {
        margin-bottom: 7px;

        font-size: 22px;

        line-height: 1.16;
    }


    .pnp-home-hero__pet-card span {
        margin-bottom: 7px;

        font-size: 16px;

        line-height: 1.34;
    }


    .pnp-home-hero__pet-card small {
        font-size: 15px;

        line-height: 1.25;
    }


    /* =====================================================
       3. HOW IT WORKS TABLET
       ===================================================== */

    .pnp-how-grid {
        grid-template-columns: 1fr !important;

        gap: 18px;

        max-width: 720px;

        margin-left: auto;
        margin-right: auto;
    }


    .pnp-how-card {
        min-height: 0;

        grid-template-columns:
            110px
            minmax(0, 1fr);

        gap: 24px;

        padding:
            24px
            26px;
    }


    .pnp-how-card__top {
        width: 110px;
    }


    .pnp-how-icon {
        width: 82px;
        height: 82px;
    }


    .pnp-how-icon svg {
        width: 41px;
        height: 41px;
    }


    .pnp-how-number {
        width: 32px;
        height: 32px;

        top: -4px;
        left: 0;
    }


    .pnp-how-card h3 {
        font-size: 23px;
    }


    .pnp-how-card p {
        font-size: 16px;

        line-height: 1.5;
    }


    /* =====================================================
       4. FOOD TYPES TABLET
       ===================================================== */

    .pnp-food-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap: 16px;
    }


    /* =====================================================
       5. PERSONALIZED CTA TABLET
       ===================================================== */

    .pnp-personalized-cta {
        padding:
            42px
            0;
    }


    .pnp-personalized-cta__box {
        display: block !important;

        min-height: 0 !important;

        border-radius: 24px;

        overflow: hidden;
    }


    .pnp-personalized-cta__content {
        padding:
            38px
            38px
            30px !important;
    }


    .pnp-personalized-cta__content h2 {
        max-width: 650px;

        margin-bottom: 16px;

        font-size: 38px;

        line-height: 1.08;
    }


    .pnp-personalized-cta__content p {
        max-width: 620px;

        margin-bottom: 22px;

        font-size: 17px;

        line-height: 1.6;
    }


    .pnp-personalized-cta__content .pnp-hero-button {
        width: 220px !important;
        min-width: 220px !important;
    }


    .pnp-personalized-cta__visual {
        position: relative !important;

        display: block !important;

        width: auto !important;

        height: 500px !important;
        min-height: 500px !important;

        margin:
            0
            24px
            24px !important;

        padding: 0 !important;

        overflow: hidden !important;

        border-radius: 22px !important;
    }


    .pnp-personalized-cta__visual > img {
        position: absolute !important;

        inset: 0;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;

        object-fit: cover !important;

        object-position: center center !important;

        border-radius: 22px !important;
    }


    .pnp-personalized-cta__benefits {
        position: absolute !important;

        top: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
        left: auto !important;

        transform: none !important;

        width: 280px !important;
        max-width: 280px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: space-between !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 5;
    }


    .pnp-personalized-cta__benefit {
        position: relative !important;

        box-sizing: border-box !important;

        display: grid !important;

        grid-template-columns:
            26px
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap: 10px !important;
        row-gap: 4px !important;

        align-items: start !important;

        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            14px
            14px
            12px !important;

        background:
            rgba(
                247,
                243,
                235,
                .97
            ) !important;

        border-radius: 15px !important;

        overflow: hidden !important;

        box-shadow:
            0 7px 20px
            rgba(0, 0, 0, .07);
    }


    .pnp-personalized-cta__benefit-icon {
        position: static !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 26px !important;
        height: 26px !important;

        min-width: 26px !important;
        min-height: 26px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: start !important;
    }


    .pnp-personalized-cta__benefit > div {
        display: contents !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .pnp-personalized-cta__benefit strong {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            2px
            0
            0 !important;

        font-size: 14px !important;

        font-weight: 700 !important;

        line-height: 1.18 !important;

        text-align: left !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: normal !important;

        align-self: start !important;
    }


    .pnp-personalized-cta__benefit small {
        grid-column: 2 !important;
        grid-row: 2 !important;

        display: block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 11.5px !important;

        line-height: 1.28 !important;

        text-align: left !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: normal !important;

        align-self: start !important;
    }


    /* =====================================================
       6. POPULAR PRODUCTS TABLET
       ===================================================== */

    .pnp-products-shortcode ul.products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 20px;
    }


    .pnp-products-shortcode
    ul.products
    li.product {
        padding:
            12px
            12px
            18px;
    }


    .pnp-products-shortcode
    ul.products
    li.product
    .woocommerce-loop-product__title {
        min-height: 44px;

        font-size: 16px;
    }


    .pnp-products-shortcode
    ul.products
    li.product
    .price {
        font-size: 16px;
    }
}

/* =========================================================
   TABLET REFINEMENT
   768px - 1050px
   IMPORTANTE: mantenere questo blocco ALLA FINE del CSS
   ========================================================= */


/* =========================================================
   STOREFRONT HANDHELD NAVIGATION
   Estratto dallo snippet validato Mobile Menu Style FINAL
   ========================================================= */

/* =========================================================
   PET NUTRITION PRO DEMO
   MOBILE MENU STYLE

   Storefront Handheld Navigation
   ========================================================= */


/* =========================================================
   MOBILE
   max 767px
   ========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       1. HEADER MOBILE
       ===================================================== */

    .site-header {

        background:
            #ffffff !important;

        border-bottom:
            1px solid #e7e2d9 !important;
    }


    /* =====================================================
       2. PULSANTE MENU
       ===================================================== */

    .main-navigation .menu-toggle {

        position:
            relative !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        min-width:
            118px !important;

        min-height:
            50px !important;

        padding:
            10px 18px !important;

        color:
            #1e2820 !important;

        background:
            #ffffff !important;

        border:
            1px solid #315f35 !important;

        border-radius:
            8px !important;

        box-shadow:
            none !important;

        font-size:
            16px !important;

        font-weight:
            700 !important;

        line-height:
            1 !important;

        text-align:
            center !important;

        white-space:
            nowrap !important;
    }


    /* =====================================================
       3. ICONA HAMBURGER
       Evita sovrapposizioni con il testo
       ===================================================== */

    .main-navigation .menu-toggle::before {

        position:
            static !important;

        display:
            inline-block !important;

        margin:
            0 9px 0 0 !important;

        transform:
            none !important;

        vertical-align:
            middle !important;
    }


    /* =====================================================
       4. PULSANTE MENU APERTO
       ===================================================== */

    .main-navigation.toggled .menu-toggle {

        color:
            #ffffff !important;

        background:
            #315f35 !important;

        border-color:
            #315f35 !important;
    }


    /* =====================================================
       5. MENU CHIUSO
       Nessuna barra residua sotto l'header
       ===================================================== */

    .handheld-navigation {

        margin:
            0 !important;

        padding:
            0 !important;

        max-height:
            0 !important;

        overflow:
            hidden !important;

        background:
            transparent !important;

        border:
            0 !important;
    }


    /* =====================================================
       6. MENU APERTO
       ===================================================== */

    .main-navigation.toggled .handheld-navigation {

        box-sizing:
            border-box !important;

        width:
            100% !important;

        max-height:
            none !important;

        overflow:
            visible !important;

        margin-top:
            14px !important;

        padding:
            8px 0 14px !important;

        background:
            #ffffff !important;

        border-top:
            1px solid #e7e2d9 !important;
    }


    /* =====================================================
       7. RESET LISTA MENU
       ===================================================== */

    .handheld-navigation ul,
    .handheld-navigation ul.menu {

        margin:
            0 !important;

        padding:
            0 !important;

        list-style:
            none !important;
    }


    /* =====================================================
       8. SINGOLA VOCE
       ===================================================== */

    .handheld-navigation ul.menu > li {

        margin:
            0 !important;

        padding:
            0 !important;

        border-bottom:
            1px solid #f0ece5 !important;
    }

    .handheld-navigation ul.menu > li:last-child {

        border-bottom:
            0 !important;
    }


    /* =====================================================
       9. LINK MENU
       ===================================================== */

    .handheld-navigation ul.menu > li > a {

        display:
            flex !important;

        align-items:
            center !important;

        min-height:
            52px !important;

        padding:
            12px 18px !important;

        color:
            #1e2820 !important;

        background:
            transparent !important;

        font-size:
            17px !important;

        font-weight:
            600 !important;

        line-height:
            1.25 !important;

        text-decoration:
            none !important;
    }


    /* =====================================================
       10. HOVER / TAP
       ===================================================== */

    .handheld-navigation ul.menu > li > a:hover,
    .handheld-navigation ul.menu > li > a:focus {

        color:
            #1f4426 !important;

        background:
            #f6f8f4 !important;
    }


    /* =====================================================
       11. VOCE CORRENTE
       ===================================================== */

    .handheld-navigation
    ul.menu
    > li.current-menu-item
    > a,

    .handheld-navigation
    ul.menu
    > li.current_page_item
    > a {

        color:
            #315f35 !important;

        background:
            #f4f8f2 !important;

        font-weight:
            700 !important;
    }


    /* =====================================================
       12. CTA
       FIND MY PET'S FOOD
       ===================================================== */

    .handheld-navigation ul.menu > li.pnp-menu-cta > a,
    .handheld-navigation ul.nav-menu > li.pnp-menu-cta > a {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            calc(100% - 36px) !important;

        min-height:
            50px !important;

        margin:
            16px 18px 4px !important;

        padding:
            12px 18px !important;

        color:
            #ffffff !important;

        background:
            #315f35 !important;

        border:
            1px solid #315f35 !important;

        border-radius:
            9px !important;

        box-shadow:
            0 8px 18px
            rgba(49, 95, 53, .12) !important;

        font-size:
            16px !important;

        font-weight:
            700 !important;

        text-align:
            center !important;
    }


    /* =====================================================
       13. CTA HOVER
       ===================================================== */

    .handheld-navigation ul.menu > li.pnp-menu-cta > a:hover,
    .handheld-navigation ul.nav-menu > li.pnp-menu-cta > a:hover,

    .handheld-navigation ul.menu > li.pnp-menu-cta > a:focus,
    .handheld-navigation ul.nav-menu > li.pnp-menu-cta > a:focus {

        color:
            #ffffff !important;

        background:
            #1f4426 !important;

        border-color:
            #1f4426 !important;
    }


    /* =====================================================
       14. EVENTUALI SUBMENU
       ===================================================== */

    .handheld-navigation ul.sub-menu {

        margin:
            0 !important;

        padding:
            0 0 8px 16px !important;

        background:
            #faf8f3 !important;
    }

    .handheld-navigation ul.sub-menu li a {

        display:
            block !important;

        padding:
            10px 18px !important;

        color:
            #667066 !important;

        font-size:
            15px !important;

        font-weight:
            500 !important;
    }


    /* =====================================================
       15. EVITA SPAZI ESAGERATI
       ===================================================== */

    .main-navigation.toggled
    .handheld-navigation {

        margin-bottom:
            0 !important;
    }

}