/* =========================================================
   NEETLY CARDS RESPONSIVE
   Questo file viene caricato per ultimo.
   Risolve:
   - 2 card reali in mobile
   - card fluide da 844px in giù
   - 10px margine destro e sinistro
   - 10px gap tra le card
   - nessun ritorno a 1 colonna sotto 480px
   ========================================================= */

:root {
    --neetly-card-mobile-margin: 10px;
    --neetly-card-mobile-gap: 10px;
}

/* =========================================================
   BASE GRIGLIA PRODOTTI
   ========================================================= */

html body .lmi-product-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;

    overflow: visible !important;
}

html body .lmi-product-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html body .lmi-product-card {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

html body .lmi-product-card *,
html body .lmi-product-card *::before,
html body .lmi-product-card *::after {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body .lmi-product-card__media {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html body .lmi-product-card__media img,
html body .lmi-product-card img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
}

html body .lmi-product-card__body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}

html body .lmi-product-card h3,
html body .lmi-product-card p,
html body .lmi-product-card a,
html body .lmi-store-name,
html body .lmi-price,
html body .lmi-card-actions {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    box-sizing: border-box !important;
}

/* =========================================================
   DESKTOP / TABLET
   ========================================================= */

@media (max-width: 1400px) {
    html body .lmi-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 1200px) {
    html body .lmi-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* =========================================================
   MOBILE: DA 844PX IN GIÙ
   Qui devono vedersi 2 card vere.
   Formula:
   pagina = 100%
   margine sinistro = 10px
   margine destro = 10px
   gap interno = 10px
   colonne = 2 fluide
   ========================================================= */

@media (max-width: 844px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html body.lm-is-global-shop .site-shell,
    html body.lm-is-global-shop .site-main,
    html body.lm-is-global-shop .main-inner,
    html body.post-type-archive-lmi_product .site-shell,
    html body.post-type-archive-lmi_product .site-main,
    html body.post-type-archive-lmi_product .main-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: var(--neetly-card-mobile-margin) !important;
        padding-right: var(--neetly-card-mobile-margin) !important;

        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    html body.lm-is-global-shop .content-card,
    html body.lm-is-global-shop .content-card--commerce,
    html body.lm-is-global-shop .entry-content,
    html body.post-type-archive-lmi_product .content-card,
    html body.post-type-archive-lmi_product .content-card--commerce,
    html body.post-type-archive-lmi_product .entry-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    html body .lmi-global-shop,
    html body .lmi-product-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body .lmi-product-grid {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--neetly-card-mobile-gap) !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        overflow: visible !important;
    }

    html body .lmi-product-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html body .lmi-product-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;
        overflow: hidden !important;

        transform: none !important;
    }

    html body .lmi-product-card:hover {
        transform: none !important;
    }

    html body .lmi-product-card__media {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body .lmi-product-card__media img,
    html body .lmi-product-card img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
    }

    html body .lmi-product-card__body {
        padding: 8px !important;
    }

    html body .lmi-product-card__body h3,
    html body .lmi-product-card h3 {
        margin-top: 0.2rem !important;
        margin-bottom: 0.35rem !important;

        font-size: clamp(0.74rem, 2.8vw, 1rem) !important;
        line-height: 1.16 !important;
    }

    html body .lmi-product-card p,
    html body .lmi-store-name {
        font-size: clamp(0.64rem, 2.45vw, 0.84rem) !important;
        line-height: 1.28 !important;
    }

    html body .lmi-price {
        font-size: clamp(0.84rem, 3.2vw, 1.08rem) !important;
        line-height: 1.15 !important;
    }

    html body .lmi-stock {
        font-size: clamp(0.62rem, 2.4vw, 0.78rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }

    html body .lmi-card-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-top: auto !important;
        padding-bottom: 0 !important;
    }

    html body .lmi-card-actions .lmi-button,
    html body .lmi-card-actions button,
    html body .lmi-card-actions a {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 34px !important;
        padding: 6px 5px !important;

        font-size: clamp(0.6rem, 2.45vw, 0.78rem) !important;
        line-height: 1.12 !important;

        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html body .lmi-store-link {
        grid-column: auto !important;
        font-size: clamp(0.6rem, 2.4vw, 0.78rem) !important;
        line-height: 1.15 !important;
    }
}

/* =========================================================
   SOTTO 480PX
   Annulla definitivamente la vecchia regola:
   .lmi-product-grid { grid-template-columns: 1fr !important; }
   ========================================================= */

@media (max-width: 480px) {
    html body .lmi-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html body.lm-is-global-shop .main-inner,
    html body.post-type-archive-lmi_product .main-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    html body .lmi-product-card__body {
        padding: 7px !important;
    }

    html body .lmi-product-card__media img,
    html body .lmi-product-card img {
        aspect-ratio: 4 / 3 !important;
    }
}

/* =========================================================
   456PX E SOTTO
   Sempre 2 card. Più compatte, ma mai 1 card.
   ========================================================= */

@media (max-width: 456px) {
    html body .lmi-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html body .lmi-product-card__body {
        padding: 6px !important;
    }

    html body .lmi-product-card__body h3,
    html body .lmi-product-card h3 {
        font-size: clamp(0.68rem, 3vw, 0.88rem) !important;
        line-height: 1.14 !important;
    }

    html body .lmi-product-card p,
    html body .lmi-store-name {
        font-size: clamp(0.6rem, 2.8vw, 0.76rem) !important;
        line-height: 1.24 !important;
    }

    html body .lmi-price {
        font-size: clamp(0.78rem, 3.4vw, 0.98rem) !important;
    }

    html body .lmi-card-actions .lmi-button,
    html body .lmi-card-actions button,
    html body .lmi-card-actions a {
        min-height: 32px !important;
        padding: 5px 4px !important;
        font-size: clamp(0.56rem, 2.75vw, 0.72rem) !important;
    }
}

/* =========================================================
   360PX E SOTTO
   Ancora 2 card, estrema compattezza.
   ========================================================= */

@media (max-width: 360px) {
    html body .lmi-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html body .lmi-product-card__body {
        padding: 5px !important;
    }

    html body .lmi-product-card__body h3,
    html body .lmi-product-card h3 {
        font-size: 0.64rem !important;
    }

    html body .lmi-product-card p,
    html body .lmi-store-name {
        font-size: 0.58rem !important;
    }

    html body .lmi-price {
        font-size: 0.76rem !important;
    }
}