/* Add custom CSS styles below */ 
/* =========================================================
   PRODUCT CARDS 
   ========================================================= */


/* ---------------------------------------------------------
   1. product images
   --------------------------------------------------------- */

.product-card .product-card__image .main-image {
    object-fit: contain !important;
    object-position: center !important;
}



/* ---------------------------------------------------------
   3. Promotion badge 
   --------------------------------------------------------- */

.product-card .product-card__promotion {
    position: absolute !important;

    top: 10px !important;
    right: 10px !important;
    left: auto !important;

    width: fit-content !important;
    max-width: max-content !important;

    display: inline-block !important;

    padding: 6px 12px !important;

    background-color: #111c3d !important;

    color: #fff !important;

    border-radius: 6px !important;

    white-space: nowrap !important;

    z-index: 10 !important;
}

@media (min-width:768px) {
    .product-card .product-card__promotion {
        top: 40px !important;
    }
    
}
@media (max-width:767px) {
    .product-card .product-card__promotion {
        bottom: unset !important;
    }
    
}
/* ---------------------------------------------------------
   4. Remove extra row in card content
   --------------------------------------------------------- */

.product-card.hover_style_4
.product-card__content
> .product-card__content-wrapper
> .product-card__buttons {
    display: none !important;
}


/* ---------------------------------------------------------
   5. Remove extra normal-cart button
   --------------------------------------------------------- */

.product-card .product-card__normal-cart {
    display: none !important;
}


/* ---------------------------------------------------------
   6. Product content — centered
   --------------------------------------------------------- */

.product-card .product-card__content {
    text-align: center !important;
}

.product-card .product-card__content-wrapper {
    text-align: center !important;
}

.product-card .product-card__title {
    text-align: center !important;
}

.product-card .product-card__title a {
    text-align: center !important;
}


/* ---------------------------------------------------------
   7. Subtitle
   --------------------------------------------------------- */

.product-card .product-card__subtitle {
    text-align: center !important;
}


/* ---------------------------------------------------------
   8. Price row
   --------------------------------------------------------- */

.product-card .product-card__price {
    justify-content: center !important;
    text-align: center !important;
}

.product-card .price_is_on_sale {
    justify-content: center !important;
}


/* ---------------------------------------------------------
   9. Discount percentage positioning
   --------------------------------------------------------- */

.product-card .product-card__discount {
    display: block !important;
    text-align: center !important;
}


/* ---------------------------------------------------------
   10. Enhanced mini-cart container
   --------------------------------------------------------- */

.product-card .product-card__enhanced-mini-cart {
    width: 100% !important;
}


/* Hide Arkaan inner "إضافة للسلة + icon" layout */
.product-card
.product-card__enhanced-mini-cart
.product-card__enhanced-mini-cart__btn--inner {
    display: none !important;
}


/* ---------------------------------------------------------
   11. Turn our enhanced button into  "اشترِ الآن"
   --------------------------------------------------------- */

.product-card
.product-card__enhanced-mini-cart
button.s-button-element {
    background: #0a1a35 !important;
    color: #fff !important;

    border: none !important;
    border-radius: 0 !important;

    font-weight: 500 !important;

    min-height: 40px !important;

    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative !important;
    overflow: hidden !important;

    transition:
        background 0.45s ease,
        transform 0.25s ease,
        box-shadow 0.35s ease !important;
}


/* generated button content */
.product-card
.product-card__enhanced-mini-cart
button.s-button-element .s-button-text {
    font-size: 0 !important;
}


/* Arabic */
html[lang="ar"]
.product-card
.product-card__enhanced-mini-cart
button.s-button-element .s-button-text::after {
    content: "اشترِ الآن";
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
}


/* English */
html[lang="en"]
.product-card
.product-card__enhanced-mini-cart
button.s-button-element .s-button-text::after {
    content: "Buy Now";
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   12.  button shimmer
   --------------------------------------------------------- */

.product-card
.product-card__enhanced-mini-cart
button.s-button-element::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%
    );

    transform: skewX(-25deg);

    transition: 0.6s;

    pointer-events: none;
}


/* ---------------------------------------------------------
   13.  hover
   --------------------------------------------------------- */

.product-card
.product-card__enhanced-mini-cart
button.s-button-element:hover {
    background: linear-gradient(
        135deg,
        #0a1a35 0%,
        #1c2f55 30%,
        #d4af37 100%
    ) !important;

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}


.product-card
.product-card__enhanced-mini-cart
button.s-button-element:hover::before {
    left: 130%;
}