/* ============================================
   CUSTOM WOOCOMMERCE - GRIGLIA PRODOTTI
   4 prodotti per riga, perfettamente allineati
   ============================================ */

/* --- GRIGLIA: 4 prodotti per riga --- */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

/* --- CARD PRODOTTO: flex column per allineare tutto --- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* --- IMMAGINE: altezza fissa uguale per tutti --- */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    display: block !important;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 12px;
}

/* --- CATEGORIA prodotto --- */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product span.ast-woo-product-tag,
.woocommerce-page ul.products li.product .posted_in {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin-bottom: 6px;
    min-height: 20px;
}

/* --- TITOLO prodotto: altezza minima fissa --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce-page ul.products li.product h2 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    min-height: 56px !important;
    margin-bottom: 8px !important;
    flex-grow: 0;
}

/* --- PREZZO: altezza minima fissa --- */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    font-size: 15px !important;
    font-weight: 600;
    color: #333;
    min-height: 32px !important;
    display: flex;
    align-items: center;
    margin-bottom: 12px !important;
}

/* --- SPACER: spinge il pulsante sempre in fondo --- */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart {
    margin-top: auto !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* --- BADGE "In vendita" / "In saldo" --- */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
    top: 12px;
    left: 12px;
    right: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet: 2 prodotti per riga */
@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile: 2 prodotti per riga */
@media (max-width: 600px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .woocommerce ul.products li.product a img,
    .woocommerce-page ul.products li.product a img {
        height: 140px !important;
    }

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        padding: 10px !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce-page ul.products li.product h2 {
        font-size: 13px !important;
        min-height: 40px !important;
    }
}

/* ============================================
   MOBILE HEADER - Icone carrello, ricerca, indietro
   ============================================ */

@media (max-width: 921px) {

    /* Nascondi la voce "Carrello" nel menu mobile (sostituita dall'icona) */
    #ast-mobile-header #ast-hf-menu-1-mobile li a[href*="/cart/"],
    #ast-mobile-header .menu-item a[href*="cart"] {
        display: none !important;
    }
    #ast-mobile-header #ast-hf-menu-1-mobile li:has(a[href*="/cart/"]) {
        display: none !important;
    }

    /* Assicura che la barra header mobile abbia position relative per absolute dei figli */
    #ast-mobile-header .main-header-bar-wrap,
    #ast-mobile-header .ast-primary-header-bar {
        position: relative !important;
    }

    /* Contenitore icone sinistra (freccia indietro) */
    .custom-mobile-icons {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        z-index: 100;
    }

    /* Contenitore icone destra (componente ricerca + carrello) */
    .custom-mobile-icons-right {
        position: absolute;
        right: 55px; /* lascia spazio all'hamburger */
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 0;
        z-index: 100;
    }

    /* ---- BARRA RICERCA MOBILE FULL-WIDTH ---- */

    /* La barra di ricerca: fissata in cima, full-width */
    #custom-mobile-search-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        background: #fff !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
        z-index: 999999 !important;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
    }

    #custom-mobile-search-form {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        gap: 4px;
        padding: 14px 12px 18px !important;
        box-sizing: border-box !important;
        position: relative !important;
        border: none !important;
        background: #fff !important;
        border-radius: 0 !important;
        line-height: normal !important;
        margin: 0 !important;
    }

    #custom-mobile-search-input {
        flex: 1 !important;
        height: 40px !important;
        font-size: 17px !important;
        border: none !important;
        border-bottom: 2px solid #046bd2 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 4px 8px !important;
        background: transparent !important;
        color: #333 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #custom-mobile-search-submit {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 8px !important;
        cursor: pointer;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #custom-mobile-search-close {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 8px !important;
        cursor: pointer;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Live search results dentro la barra mobile */
    #custom-mobile-search-form .ast-live-search-results {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #fff !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
        border-top: 1px solid #eee !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        z-index: 1000000 !important;
        padding: 8px 0 !important;
    }

    #custom-mobile-search-form .ast-live-search-results .ast-search-item {
        display: block !important;
        padding: 10px 16px !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    #custom-mobile-search-form .ast-live-search-results .ast-search-item:hover,
    #custom-mobile-search-form .ast-live-search-results .ast-search-item:active {
        background: #f5f5f5 !important;
    }

    #custom-mobile-search-form .ast-live-search-results .ast-search--posttype-heading {
        display: block !important;
        padding: 8px 16px 4px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: #999 !important;
        letter-spacing: 0.5px !important;
    }

    #custom-mobile-search-form .ast-live-search-results .ast-search--no-results-heading {
        display: block !important;
        padding: 12px 16px !important;
        color: #888 !important;
        font-size: 14px !important;
    }

    /* Icona lente trigger */
    .custom-mobile-search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        cursor: pointer;
    }
    .custom-mobile-search-btn svg { display: block; }

    /* Freccia indietro mobile */
    .custom-back-btn-mobile {
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #444;
        text-decoration: none !important;
        padding: 6px;
        transition: color 0.2s ease;
    }
    .custom-back-btn-mobile:hover { color: #000; }
    .custom-back-btn-mobile svg { display: block; }

    /* Icona carrello mobile */
    .custom-mobile-cart-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #046bd2;
        text-decoration: none !important;
        padding: 8px;
        position: relative;
        transition: color 0.2s ease;
    }
    .custom-mobile-cart-btn:hover { color: #045cb4; }
    .custom-mobile-cart-btn svg { display: block; }

    /* Badge numero articoli carrello */
    .custom-mobile-cart-count {
        position: absolute;
        top: 2px;
        right: 2px;
        background: #046bd2;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        min-width: 15px;
        height: 15px;
        border-radius: 99px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0 2px;
    }

    /* Icona Account/Utente mobile */
    .custom-mobile-account-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #046bd2;
        text-decoration: none !important;
        padding: 8px;
        transition: color 0.2s ease;
    }
    .custom-mobile-account-btn:hover { color: #045cb4; }
    .custom-mobile-account-btn svg { display: block; }
}

/* ============================================
   FRECCIA INDIETRO - DENTRO L'HEADER
   ============================================ */

/* Posizione assoluta a sinistra dentro la barra header */
.main-header-bar {
    position: relative;
}

.custom-back-btn {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    text-decoration: none !important;
    transition: color 0.2s ease;
    z-index: 100;
    line-height: 1;
}

.custom-back-btn:hover {
    color: #000;
    text-decoration: none !important;
}

.custom-back-btn svg {
    flex-shrink: 0;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .custom-back-btn {
        left: 20px;
    }
}
@media (max-width: 600px) {
    .custom-back-btn span {
        display: none;
    }
    .custom-back-btn {
        left: 14px;
    }
}

/* ============================================
   ICONA ACCOUNT/UTENTE - HEADER DESKTOP
   ============================================ */

.custom-account-btn-desktop {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #046bd2;
    text-decoration: none !important;
    transition: color 0.2s ease;
    z-index: 100;
    line-height: 1;
}

.custom-account-btn-desktop:hover {
    color: #045cb4;
    text-decoration: none !important;
}

.custom-account-btn-desktop svg {
    flex-shrink: 0;
}

/* Previeni sovrapposizione: aggiungi padding-right all'header per fare spazio al bottone Account */
@media (min-width: 922px) and (max-width: 1450px) {
    .main-header-bar .ast-container,
    .main-header-bar .ast-row {
        padding-right: 140px !important;
    }
}

/* Nasconde l'icona account desktop su mobile (c'è quella mobile) */
@media (max-width: 921px) {
    .custom-account-btn-desktop {
        display: none !important;
    }
}

/* ============================================
   HOMEPAGE - CATEGORIE PRODOTTI (blocchi Gutenberg)
   ============================================ */

/* Immagine categoria: cursore pointer */
figure.wp-block-image img {
    cursor: pointer !important;
    transition: opacity 0.2s ease;
}
figure.wp-block-image img:hover {
    opacity: 0.88;
}

/* Testo categoria nella figcaption: blu scuro, grassetto, no sottolineatura */
figure.wp-block-image figcaption a,
figure.wp-block-image figcaption {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a3a5c !important;
    text-decoration: none !important;
}

figure.wp-block-image figcaption a:hover {
    color: #1a3a5c !important;
    text-decoration: none !important;
}

/* ============================================
   MY ACCOUNT - Area cliente
   ============================================ */

/* Fix emoji/immagini giganti nella navigazione laterale */
.woocommerce-MyAccount-navigation ul li a img,
.woocommerce-MyAccount-navigation ul li a svg {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* Navigazione laterale */
.woocommerce-MyAccount-navigation {
    max-width: 260px !important;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #eee !important;
}
.woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background 0.15s ease;
    line-height: 1.4 !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    background: #f6f7f7 !important;
    color: #046bd2 !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: #e8f0fe !important;
    color: #046bd2 !important;
    font-weight: 600 !important;
}

/* Contenuto area My Account */
.woocommerce-MyAccount-content {
    font-size: 14px !important;
}
.woocommerce-MyAccount-content h2 {
    font-size: 22px !important;
    margin-bottom: 16px !important;
}

/* Pagina "I miei Coupon" – contenere le immagini e formattare */
.woocommerce-MyAccount-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix emoji che si gonfiano: limita dimensioni emoji in tutto il my-account */
.woocommerce-account .woocommerce img.emoji,
.woocommerce-account .woocommerce .emoji,
.woocommerce-MyAccount-navigation img.emoji,
.woocommerce-MyAccount-content img.emoji {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: inline !important;
    vertical-align: text-bottom !important;
    margin: 0 4px 0 0 !important;
}