/**
 * Price Override Styles
 * Migrated from inline CSS in functions.php for better maintainability
 * 
 * @package Fayodel
 * @since 1.1.8
 */

/* ============================================
   PRICE COLORS - FORCE RED
   ============================================ */
.price,
.price *,
.product-price,
.product-price *,
.woocommerce-Price-amount,
.woocommerce-Price-amount *,
span.woocommerce-Price-amount,
span.woocommerce-Price-amount *,
.amount,
span.amount,
bdi,
.price bdi,
.product-price bdi,
.woocommerce-Price-currencySymbol,
.woocommerce .price,
.woocommerce .price *,
.woocommerce .product-price,
.woocommerce .product-price *,
.woocommerce-page .price,
.woocommerce-page .price *,
ul.products .price,
ul.products .price *,
ul.products .product-price,
ul.products .product-price *,
li.product .price,
li.product .price *,
.product-card .price,
.product-card .price *,
.product-card .product-price,
.product-card .product-price *,
.cart-summary-row strong .woocommerce-Price-amount,
.cart-summary-row strong bdi,
.cart-summary-total strong .woocommerce-Price-amount,
.cart-summary-total strong bdi {
    color: var(--color-price, #e63946) !important;
}

/* Strikethrough/Original prices - GREY */
.price del,
.price del *,
.product-price del,
.product-price del *,
del .woocommerce-Price-amount,
del .woocommerce-Price-amount *,
del bdi,
.woocommerce del,
.woocommerce del * {
    color: var(--color-text-light, #999) !important;
    text-decoration: line-through !important;
    font-weight: normal !important;
    opacity: 0.7 !important;
}

/* Sale prices inside ins - RED */
.price ins,
.price ins *,
.product-price ins,
.product-price ins *,
ins .woocommerce-Price-amount,
ins .woocommerce-Price-amount *,
ins bdi,
.woocommerce ins,
.woocommerce ins * {
    color: var(--color-price, #e63946) !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

/* ============================================
   PRODUCT TITLE LINK - BLACK COLOR
   ============================================ */
.product-title a,
.product-card .product-title a,
h3.product-title a,
.product-card h3.product-title a,
.woocommerce .product-title a,
.woocommerce-page .product-title a,
ul.products .product-title a,
li.product .product-title a,
.products-grid .product-title a,
.featured-products .product-title a,
.woocommerce-loop-product__title a,
h2.woocommerce-loop-product__title a {
    color: var(--color-dark, #000000) !important;
    text-decoration: none !important;
}

.product-title a:hover,
.product-card .product-title a:hover,
h3.product-title a:hover,
.woocommerce .product-title a:hover,
ul.products .product-title a:hover,
li.product .product-title a:hover {
    color: var(--color-primary, #0099ff) !important;
}

/* ============================================
   CHECKOUT BUTTON - WHITE TEXT
   ============================================ */
.checkout-button,
.checkout-button *,
.checkout-button span,
.checkout-button .woocommerce-Price-amount,
.checkout-button .woocommerce-Price-amount *,
.checkout-button bdi,
.checkout-button .amount,
a.checkout-button,
a.checkout-button *,
a.checkout-button span,
a.checkout-button bdi,
a.checkout-button .woocommerce-Price-amount,
.cart-summary-checkout a,
.cart-summary-checkout a *,
.cart-summary-checkout a span,
.cart-summary-checkout a bdi,
.cart-summary-checkout .checkout-button,
.cart-summary-checkout .checkout-button *,
.wc-proceed-to-checkout a,
.wc-proceed-to-checkout a *,
.btn-primary,
.btn-primary *,
.btn-primary span,
.btn-primary bdi,
.btn-primary .woocommerce-Price-amount,
.button-primary,
.button-primary * {
    color: #ffffff !important;
}

/* ============================================
   FEATURED PRODUCTS - HOMEPAGE
   ============================================ */

/* Grid Layout - Force 4 columns */
.featured-products-wrapper,
.featured-products-wrapper .woocommerce,
.featured-products-wrapper>.woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.featured-products-wrapper ul.products,
.featured-products-wrapper .woocommerce ul.products,
.featured-products-wrapper .products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Product Card Container */
.featured-products-wrapper ul.products li.product,
.featured-products-wrapper .woocommerce ul.products li.product,
.featured-products-wrapper li.product {
    background: #ffffff !important;
    border-radius: var(--radius-lg, 12px) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    height: auto !important;
}

.featured-products-wrapper ul.products li.product:hover,
.featured-products-wrapper li.product:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-6px) !important;
}

/* Product Image - FULL WIDTH SQUARE - SHARP */
.featured-products-wrapper ul.products li.product a img,
.featured-products-wrapper ul.products li.product img,
.featured-products-wrapper li.product a img,
.featured-products-wrapper li.product img,
.featured-products-wrapper .attachment-woocommerce_thumbnail,
.featured-products-wrapper .wp-post-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    /* Sharp image rendering */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    -ms-interpolation-mode: nearest-neighbor !important;
    /* Remove any blur or filter effects */
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transition: transform 0.3s ease !important;
}

/* Product Image Link */
.featured-products-wrapper ul.products li.product>a,
.featured-products-wrapper li.product>a {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Product Title */
.featured-products-wrapper ul.products li.product .woocommerce-loop-product__title,
.featured-products-wrapper ul.products li.product h2,
.featured-products-wrapper li.product .woocommerce-loop-product__title,
.featured-products-wrapper li.product h2.woocommerce-loop-product__title {
    font-family: var(--font-heading, 'Outfit', 'Inter', sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--color-dark, #1a1a2e) !important;
    margin: 15px 15px 8px 15px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* Product Price */
.featured-products-wrapper ul.products li.product .price,
.featured-products-wrapper li.product .price,
.featured-products-wrapper .price {
    margin: 0 15px 15px 15px !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--color-price, #e63946) !important;
    text-align: left !important;
}

/* Add to Cart Button */
.featured-products-wrapper ul.products li.product .button,
.featured-products-wrapper ul.products li.product a.add_to_cart_button,
.featured-products-wrapper ul.products li.product a.button,
.featured-products-wrapper li.product .button,
.featured-products-wrapper li.product a.add_to_cart_button {
    display: block !important;
    width: calc(100% - 30px) !important;
    margin: auto 15px 15px 15px !important;
    padding: 12px 20px !important;
    background: var(--color-primary, #0099FF) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-md, 8px) !important;
    font-family: var(--font-primary, 'Inter', sans-serif) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.featured-products-wrapper ul.products li.product .button:hover,
.featured-products-wrapper li.product .button:hover,
.featured-products-wrapper li.product a.add_to_cart_button:hover {
    background: var(--color-primary-dark, #0077CC) !important;
    transform: translateY(-2px) !important;
}

/* Sale Badge */
.featured-products-wrapper ul.products li.product .onsale,
.featured-products-wrapper li.product .onsale,
.featured-products-wrapper span.onsale {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    background: var(--color-error, #e63946) !important;
    color: #ffffff !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    z-index: 10 !important;
    min-width: auto !important;
    min-height: auto !important;
    line-height: 1.2 !important;
}

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

/* Tablet */
@media (max-width: 1024px) {

    .featured-products-wrapper ul.products,
    .featured-products-wrapper .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

/* Small Tablet */
@media (max-width: 768px) {

    .featured-products-wrapper ul.products,
    .featured-products-wrapper .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* Mobile */
@media (max-width: 575px) {

    .featured-products-wrapper ul.products,
    .featured-products-wrapper .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}