/* Add custom CSS styles below */ 
.s-product-card-price {
    color: #000;
}
.dark .dark\:text-gray-300 {
    color: #000000;
}
.dark {
    color: #000000;
}
.dark .total-price {
    --tw-text-opacity: 1;
    color: #000000;
}
.dark .s-product-card-entry .s-product-card-price, .dark .s-product-card-entry .s-product-card-starting-price {
    --tw-text-opacity: 1;
    color: #000000;
}
.dark .product__description p {
    --tw-text-opacity: 1;
    color: #000000;
}
.dark .accordion {
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: #000000;
}
.dark .s-product-options-wrapper b {
    --tw-text-opacity: 1;
    color: #000000;
}
.dark .s-button-outline {
    border-style: none;
    background-color: var(--store-darkmode-secondary-bg);
    --tw-text-opacity: 1;
    color: #000000;
}
.dark .product-single .m-share_warpper > div {
    --tw-border-opacity: 1;
    border-color: rgba(209, 213, 219, var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: #000000;
}
.dark .product-form .form-label {
    --tw-text-opacity: 1;
    color: #000000;
}
.dark .dark\:bg-gray-900\/25 {
    background-color: rgb(255 255 255 / 25%);
}
.dark .dark\:text-gray-400 {
    --tw-text-opacity: 1;
    color: #000000;
}
.dark .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    color: #ffffff;
}
.dark .s-slider-block__title {
    --tw-text-opacity: 1;
    color: #000000;
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: #000000;
}
b, strong {
    --tw-text-opacity: 1;
    color: #000000;
}
.inline-block{
    --tw-text-opacity: 1;
    color: #000000;
}
.cart .s-quantity-input-input:is(.dark *){
    --tw-text-opacity: 1;
    color: #000000;
}
.product-single .s-quantity-input-input:is(.dark *){
    --tw-text-opacity: 1;
    color: #000000;
}
.iti--separate-dial-code .iti__selected-dial-code:is(.dark *) {
    --tw-text-opacity: 1;
    color: #2b2d34;
}
iti__flag-container{
    Font-color: #000000;
}
body [multiple]:is(.dark *), body [type=email]:is(.dark *), body [type=number]:is(.dark *), body [type=tel]:is(.dark *), body [type=text]:is(.dark *), body select:is(.dark *), body textarea:is(.dark *) {
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    background-color: #0000000d;
    border-color: rgb(55 65 81 / var(--tw-border-opacity));
    color: rgb(0 0 0);
}
.s-login-modal-title {
    --tw-text-opacity: 1;
    color: rgba(17, 24, 39, 1);
}

.s-product-card-wishlist-btn {
    display: none !important;
}

.product-cart {
    text-align: center;
}

.thumbnail-images img {
    width: 50px; /* حجم الصور الصغيرة */
    margin: 5px;
    cursor: pointer;
    opacity: 0.6;
}

.thumbnail-images img:hover {
    opacity: 1; /* زيادة تباين الصورة عند التمرير فوقها */
}

/* --- 1. Base Styles --- */
.product-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 40px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.product-card {
    width: 300px;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}

/* --- 2. Image Carousel Area (The container must be relative for absolute children) --- */
.card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4.2; /* Tall fashion aspect ratio */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #f4f4f4; /* Placeholder background */
}

/* Stack all images on top of each other */
.product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
}

/* The visible image gets this class */
.product-img.active {
    opacity: 1;
    z-index: 2;
}

/* --- 3. Navigation Arrows (< >) --- */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7); /* Slight background for visibility */
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 18px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Hidden until hover */
    transition: opacity 0.2s, background 0.2s;
    z-index: 10; /* Above images */
}

/* Show arrows when hovering over the CARD */
.product-card:hover .nav-arrow {
    opacity: 1;
}

.nav-arrow:hover {
    background: #fff;
}

.nav-arrow.left { left: 10px; }
.nav-arrow.right { right: 10px; }

/* --- 4. Badges & Text (Optional, based on your original request) --- */
.badge-label {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 14px;
    color: #000;
    z-index: 5;
}

.card-details {
    text-align: center;
}

.product-title {
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
}

.price-wrapper {
    font-size: 16px;
}

.old-price {
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}