/* =========================================================
   K87 Unified Product Cards
   Applies to home, shop, categories, tags, brands, and product loops.
   ========================================================= */

:root {
    --k87-card-border: #e7edf5;
    --k87-card-bg: #ffffff;
    --k87-card-title: #0f172a;
    --k87-card-price: #2563eb;
    --k87-card-sale: #dc2626;
    --k87-card-btn: #0055d4;
    --k87-card-btn-hover: #0043a9;
}

/* Remove underline artifacts from all product card links/text/buttons */
body .woocommerce ul.products li.product a,
body .woocommerce-page ul.products li.product a,
body ul.products li.product a,
body .s-product-card-entry a,
body li.wc-block-grid__product a,
body .woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product .added_to_cart,
body ul.products li.product .button,
body ul.products li.product .added_to_cart,
body .s-product-card-entry .button,
body li.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body .woocommerce ul.products li.product a:hover,
body .woocommerce-page ul.products li.product a:hover,
body ul.products li.product a:hover,
body .s-product-card-entry a:hover,
body li.wc-block-grid__product a:hover,
body .woocommerce ul.products li.product a:focus,
body .woocommerce-page ul.products li.product a:focus,
body ul.products li.product a:focus,
body .s-product-card-entry a:focus,
body li.wc-block-grid__product a:focus {
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* Grid layout for all product loops */
body .woocommerce ul.products,
body .woocommerce-page ul.products,
body ul.products,
body ul.wc-block-grid__products {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}

@media (max-width: 991px) {
    body .woocommerce ul.products,
    body .woocommerce-page ul.products,
    body ul.products,
    body ul.wc-block-grid__products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* Card shell */
body .woocommerce ul.products li.product,
body .woocommerce-page ul.products li.product,
body ul.products li.product,
body .s-product-card-entry,
body li.wc-block-grid__product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    border: 1px solid var(--k87-card-border) !important;
    border-radius: 16px !important;
    background: var(--k87-card-bg) !important;
    overflow: hidden !important;
}

/* Ensure product body stretches, so button stays at the very bottom */
body .woocommerce ul.products li.product .woocommerce-LoopProduct-link,
body ul.products li.product .woocommerce-LoopProduct-link,
body li.wc-block-grid__product .wc-block-grid__product-link {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-decoration: none !important;
    padding: 0 !important;
}

body .s-product-card-entry .s-product-card-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Image ratio: 3:2 (width:height) */
body .s-product-card-entry .s-product-card-image {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
}

body .s-product-card-entry .s-product-card-image > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

body .woocommerce ul.products li.product .woocommerce-LoopProduct-link > img,
body ul.products li.product .woocommerce-LoopProduct-link > img,
body .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
body ul.products li.product img.attachment-woocommerce_thumbnail,
body .s-product-card-entry .s-product-card-image img,
body li.wc-block-grid__product .wc-block-grid__product-image img {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

/* Keep text and price centered */
body .woocommerce ul.products li.product .woocommerce-loop-product__title,
body ul.products li.product .woocommerce-loop-product__title,
body .s-product-card-entry .s-product-card-content-title a,
body li.wc-block-grid__product .wc-block-grid__product-title {
    margin: 0 !important;
    padding: 8px 10px 0 !important;
    color: var(--k87-card-title) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-align: center !important;
    min-height: 2.9em !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
}

body .woocommerce ul.products li.product .price,
body ul.products li.product .price,
body .s-product-card-entry .price,
body li.wc-block-grid__product .wc-block-grid__product-price {
    margin: 0 !important;
    padding: 4px 10px 10px !important;
    color: var(--k87-card-price) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

body .s-product-card-entry .s-product-card-sale-price {
    display: flex !important;
    justify-content: center !important;
}

/* Sale price: red, including currency symbol image */
body .woocommerce ul.products li.product .price del + ins,
body .woocommerce ul.products li.product .price del + ins *,
body ul.products li.product .price del + ins,
body ul.products li.product .price del + ins *,
body .s-product-card-entry .price del + ins,
body .s-product-card-entry .price del + ins *,
body li.wc-block-grid__product .wc-block-grid__product-price del + ins,
body li.wc-block-grid__product .wc-block-grid__product-price del + ins * {
    color: var(--k87-card-sale) !important;
}

body .woocommerce ul.products li.product .price del + ins img[alt="SAR"],
body ul.products li.product .price del + ins img[alt="SAR"],
body .s-product-card-entry .price del + ins img[alt="SAR"],
body li.wc-block-grid__product .wc-block-grid__product-price del + ins img[alt="SAR"] {
    filter: brightness(0) saturate(100%) invert(20%) sepia(91%) saturate(4257%) hue-rotate(349deg) brightness(88%) contrast(96%);
}

/* Currency symbol image: force fixed size in all product prices */
body .woocommerce .price img[alt="SAR"],
body .woocommerce .price img.k87-currency-icon,
body .s-product-card-entry .price img[alt="SAR"],
body .s-product-card-entry .price img.k87-currency-icon,
body .wc-block-grid__product-price img[alt="SAR"],
body .wc-block-grid__product-price img.k87-currency-icon {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    max-height: 14px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-inline: 2px !important;
}

/* Remove extra background behind custom footer button */
body .s-product-card-entry .s-product-card-content-footer {
    background: transparent !important;
    margin-top: auto !important;
    padding: 0 !important;
}

/* Button fixed at bottom with bottom radius only */
body .woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product .added_to_cart,
body ul.products li.product .button,
body ul.products li.product .added_to_cart,
body .s-product-card-entry .s-product-card-content-footer .button,
body li.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link {
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    min-height: 38px !important;
    border: none !important;
    border-radius: 0 0 16px 16px !important;
    background: var(--k87-card-btn) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-sizing: border-box !important;
}

body .woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product .added_to_cart,
body ul.products li.product .button,
body ul.products li.product .added_to_cart,
body li.wc-block-grid__product .wc-block-grid__product-add-to-cart {
    margin-top: auto !important;
}

body .woocommerce ul.products li.product .button:hover,
body .woocommerce ul.products li.product .added_to_cart:hover,
body ul.products li.product .button:hover,
body ul.products li.product .added_to_cart:hover,
body .s-product-card-entry .s-product-card-content-footer .button:hover,
body li.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background: var(--k87-card-btn-hover) !important;
}

/* Related/upsells on single-product: always use the unified card look */
body.single-product .related.products,
body.single-product .upsells.products {
    width: 100% !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
}

/* Normalize different markup variants (Woo default / Astra / custom card wrapper) */
body.single-product .related.products ul.products > *,
body.single-product .upsells.products ul.products > * {
    min-width: 0 !important;
}

body.single-product .related.products ul.products > li.product,
body.single-product .upsells.products ul.products > li.product,
body.single-product .related.products ul.products > .s-product-card-entry,
body.single-product .upsells.products ul.products > .s-product-card-entry {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
}

body.single-product .related.products ul.products li.product > .s-product-card-entry,
body.single-product .upsells.products ul.products li.product > .s-product-card-entry {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

body.single-product .related.products ul.products li.product .s-product-card-content,
body.single-product .upsells.products ul.products li.product .s-product-card-content,
body.single-product .related.products ul.products li.product .astra-shop-summary-wrap,
body.single-product .upsells.products ul.products li.product .astra-shop-summary-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

body.single-product .related.products ul.products li.product .s-product-card-content-footer,
body.single-product .upsells.products ul.products li.product .s-product-card-content-footer,
body.single-product .related.products ul.products li.product .button,
body.single-product .upsells.products ul.products li.product .button,
body.single-product .related.products ul.products li.product .added_to_cart,
body.single-product .upsells.products ul.products li.product .added_to_cart {
    margin-top: auto !important;
}

@media (max-width: 991px) {
    body.single-product .related.products,
    body.single-product .upsells.products {
        padding-inline: 0 !important;
    }

    body.single-product .related.products ul.products,
    body.single-product .upsells.products ul.products {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 0;
        -webkit-overflow-scrolling: touch;
    }

    body.single-product .related.products ul.products::-webkit-scrollbar,
    body.single-product .upsells.products ul.products::-webkit-scrollbar {
        display: none;
    }

    body.single-product .related.products ul.products > *,
    body.single-product .upsells.products ul.products > * {
        flex: 0 0 calc((100% - 16px) / 2.5) !important;
        max-width: calc((100% - 16px) / 2.5) !important;
        scroll-snap-align: start;
    }
}

@media (min-width: 992px) {
    body.single-product .related.products ul.products,
    body.single-product .upsells.products ul.products {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.single-product .related.products ul.products > *,
    body.single-product .upsells.products ul.products > * {
        flex: initial !important;
        max-width: none !important;
    }

    body.single-product .related.products ul.products li.product,
    body.single-product .upsells.products ul.products li.product {
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    body.single-product .related.products ul.products li.product .woocommerce-LoopProduct-link > img,
    body.single-product .upsells.products ul.products li.product .woocommerce-LoopProduct-link > img,
    body.single-product .related.products ul.products li.product img.attachment-woocommerce_thumbnail,
    body.single-product .upsells.products ul.products li.product img.attachment-woocommerce_thumbnail,
    body.single-product .related.products ul.products .s-product-card-entry .s-product-card-image img,
    body.single-product .upsells.products ul.products .s-product-card-entry .s-product-card-image img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 3 / 2 !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* Hard lock currency icon size so product-image rules never affect it */
body.single-product .related.products .price img.k87-currency-icon,
body.single-product .upsells.products .price img.k87-currency-icon,
body.single-product .related.products .price img[alt="SAR"],
body.single-product .upsells.products .price img[alt="SAR"] {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    max-height: 14px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* Final global lock for SAR icon size in any price block */
body .woocommerce .price img.k87-currency-icon,
body .woocommerce .price img[alt="SAR"],
body .wc-block-grid__product-price img.k87-currency-icon,
body .wc-block-grid__product-price img[alt="SAR"],
body .ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-price img.k87-currency-icon,
body .ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-price img[alt="SAR"] {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    max-height: 14px !important;
    flex: 0 0 14px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Product-category grouped-by-subcategory layout */
body.tax-product_cat .k87-subcat-nav {
    margin: 8px 0 18px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    direction: rtl;
}

body.tax-product_cat .k87-subcat-chip {
    width: 116px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: #0f172a;
    text-decoration: none !important;
    transition: 0.2s ease;
}

body.tax-product_cat .k87-subcat-chip-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    border: 0;
    background: transparent !important;
    overflow: visible;
    box-shadow: none !important;
    transition: 0.2s ease;
}

body.tax-product_cat .k87-subcat-chip-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

body.tax-product_cat .k87-subcat-chip-label {
    width: 100%;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

body.tax-product_cat .k87-subcat-chip:hover {
    color: #1d4ed8;
}

body.tax-product_cat .k87-subcat-chip:hover .k87-subcat-chip-image-wrap {
    transform: none;
    box-shadow: none !important;
}

body.tax-product_cat .k87-subcat-chip:hover .k87-subcat-chip-label {
    color: #1d4ed8;
}

body.tax-product_cat .k87-subcat-products-section {
    margin: 0 0 18px;
}

body.tax-product_cat .k87-subcat-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

body.tax-product_cat .k87-subcat-section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
}

body.tax-product_cat .k87-subcat-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #dbe5ef;
    background: #ffffff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
    transition: 0.2s ease;
}

body.tax-product_cat .k87-subcat-view-all:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
}

body.tax-product_cat .k87-subcat-slider-shell {
    position: relative;
}

body.tax-product_cat .k87-subcat-products-swiper {
    overflow: hidden;
    padding: 2px;
}

body.tax-product_cat .k87-subcat-products-swiper .swiper-wrapper {
    align-items: stretch;
}

body.tax-product_cat .k87-subcat-products-swiper .swiper-slide {
    height: auto;
    display: flex;
}

body.tax-product_cat .k87-subcat-products-swiper .swiper-slide > * {
    width: 100%;
}

body.tax-product_cat .k87-subcat-products-swiper .s-product-card-entry {
    margin-bottom: 0 !important;
}

body.tax-product_cat .k87-subcat-products-section:not(.k87-swiper-ready) .k87-subcat-products-swiper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.tax-product_cat .k87-subcat-products-section:not(.k87-swiper-ready) .k87-subcat-products-swiper::-webkit-scrollbar {
    display: none;
}

body.tax-product_cat .k87-subcat-products-section:not(.k87-swiper-ready) .k87-subcat-products-swiper .swiper-wrapper {
    display: flex;
    gap: 12px;
}

body.tax-product_cat .k87-subcat-products-section:not(.k87-swiper-ready) .k87-subcat-products-swiper .swiper-slide {
    flex: 0 0 calc((100% - 20px) / 2.5);
}

@media (min-width: 992px) {
    body.tax-product_cat .k87-subcat-products-section:not(.k87-swiper-ready) .k87-subcat-products-swiper .swiper-slide {
        flex: 0 0 calc((100% - 84px) / 8);
    }
}

@media (max-width: 991px) {
    body.tax-product_cat .k87-subcat-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 10px;
    }

    body.tax-product_cat .k87-subcat-nav::-webkit-scrollbar {
        display: none;
    }

    body.tax-product_cat .k87-subcat-chip {
        width: 92px;
        min-width: 92px;
        gap: 6px;
    }

    body.tax-product_cat .k87-subcat-chip-image-wrap {
        border-radius: 0;
    }

    body.tax-product_cat .k87-subcat-chip-label {
        font-size: 12px;
        min-height: 2.6em;
    }

    body.tax-product_cat .k87-subcat-section-title {
        font-size: 17px;
    }

    body.tax-product_cat .k87-subcat-view-all {
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    body.tax-product_cat .k87-subcat-slider-shell {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    body.tax-product_cat .k87-subcat-products-swiper {
        padding: 0;
    }
}