/**
 * Universal Product Card Styling - Afriyah
 * Single source of truth for all product cards across Shop, Best Sellers, Related, Upsells, Search
 * Backup architecture: content-product.php used everywhere for consistency
 */

/* === UNIVERSAL CARD STRUCTURE === */
.af-product-card,
ul.products li.product .af-product-card,
#af-bestsellers-grid .af-product-card,
.woocommerce ul.products li.product .af-product-card,
.woocommerce .related.products ul.products li.product .af-product-card,
.woocommerce .upsells.products ul.products li.product .af-product-card {
    background: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: auto !important;
    border: 1px solid #eee !important;
}

.af-product-card:hover,
ul.products li.product:hover .af-product-card {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* === IMAGE CONTAINER - 1:1 Aspect === */
.af-product-image,
.af-product-card .af-product-image,
ul.products li.product .af-product-image {
    position: relative !important;
    padding-top: 100% !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
}

.af-product-image img,
.af-product-card .af-product-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* === INFO BLOCK === */
.af-product-info,
.af-product-card .af-product-info {
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.af-product-title,
.af-product-card .af-product-title,
.woocommerce-loop-product__title {
    margin: 0 0 8px !important;
    font-size: clamp(12px, 2.2vw, 16px) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.af-product-actions {
    margin-top: auto !important;
}

/* === QUICK ACTIONS - Fixed dimensions to prevent overlapping === */
.af-quick-actions,
#af-bestsellers-grid .af-quick-actions,
.af-product-card .af-quick-actions,
li.product .af-quick-actions {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fixed-size buttons - no overlap */
.af-quick-actions>*,
.af-quick-actions button,
.af-quick-actions a,
.af-quick-actions .af-quick-btn,
.af-quick-actions .af-quick-action-btn,
.af-quick-actions .yith-wcqv-button,
.af-quick-actions .yith-wcwl-add-to-wishlist,
.af-quick-actions .compare,
.af-quick-actions .af-compare-btn,
.af-quick-actions .af-wishlist-btn,
.af-quick-actions .af-whatsapp-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
}

/* === GRID LAYOUTS === */
#af-bestsellers-grid,
.af-products-grid.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    /* Explicitly define variables with numerical fallbacks to prevent CSS parser invalidation */
    grid-template-columns: repeat(var(--af-cols-desktop, 4), minmax(200px, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 40px !important;
}

#af-bestsellers-grid::before,
#af-bestsellers-grid::after,
.af-products-grid.products::before,
.af-products-grid.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
#af-bestsellers-grid li.product,
.af-products-grid li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

@media (max-width: 768px) {
    #af-bestsellers-grid,
    .af-products-grid.products,
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(var(--af-cols-mobile, 2), 1fr) !important;
        gap: 16px !important;
    }
}

/* Shop main column must shrink inside Bootstrap-style row (prevents grid clipping) */
.af-shop-main {
    min-width: 0 !important;
}

/* === Afriyah loop CTAs — green pill (single look everywhere ul.products uses content-product) === */
.woocommerce ul.products li.product .af-product-actions a.button,
.woocommerce ul.products li.product .af-product-actions button.button,
.woocommerce-page ul.products li.product .af-product-actions a.button,
.woocommerce-page ul.products li.product .af-product-actions button.button,
ul.products li.product .af-product-actions a.add_to_cart_button,
ul.products li.product .af-product-actions a.product_type_simple,
ul.products li.product .af-product-actions a.product_type_variable,
ul.products li.product .af-product-actions a.product_type_grouped,
ul.products li.product .af-product-actions a.product_type_external,
ul.products li.product .af-product-actions a.added_to_cart,
.single-product .related.products ul.products li.product .af-product-actions a.button,
.single-product .upsells.products ul.products li.product .af-product-actions a.button,
.woocommerce-cart .cross-sells ul.products li.product .af-product-actions a.button,
.woocommerce-cart .afriyah-cross-sells ul.products li.product .af-product-actions a.button,
.search .woocommerce ul.products li.product .af-product-actions a.button,
.tax-product_cat .woocommerce ul.products li.product .af-product-actions a.button,
.post-type-archive-product .woocommerce ul.products li.product .af-product-actions a.button,
.page-template-page-best-sellers-php .woocommerce ul.products li.product .af-product-actions a.button,
.woocommerce-checkout .afriyah-upsell-products-row ul.products li.product .af-product-actions a.button,
.page-template-page-sponsored-products-php .woocommerce ul.products li.product .af-product-actions a.button {
    background: #006400 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    padding: 12px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.woocommerce ul.products li.product .af-product-actions a.button:hover,
.woocommerce ul.products li.product .af-product-actions button.button:hover,
.woocommerce-page ul.products li.product .af-product-actions a.button:hover,
ul.products li.product .af-product-actions a.add_to_cart_button:hover,
.single-product .related.products ul.products li.product .af-product-actions a.button:hover,
.woocommerce-cart .cross-sells ul.products li.product .af-product-actions a.button:hover {
    background: #004d00 !important;
    color: #fff !important;
}

/* WooCommerce Blocks — product grid buttons */
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link,
.wc-block-grid .wc-block-grid__product .wp-block-button__link {
    background: #006400 !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    border: none !important;
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover {
    background: #004d00 !important;
    color: #fff !important;
}

/* Afriyah Enhancements — PDP “You May Also Like” cards (not using content-product) */
.afriyah-upsells .upsell-add-to-cart,
.afriyah-upsells button.upsell-add-to-cart {
    background: #006400 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    width: 100% !important;
    box-shadow: none !important;
}

.afriyah-upsells .upsell-add-to-cart:hover {
    background: #004d00 !important;
    color: #fff !important;
    transform: none !important;
}