/* ================================
   ✔ تقليل المسافات بين الأقسام
================================ */
.s-block--fixed-banner .py-10,
section.container.mx-auto > .py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.s-products-list-wrapper {
    margin-top: 1rem !important;
}

.s-products-list-vertical-cards {
    gap: 0.75rem !important;
}

/* ================================
   ✔ حل مشكلة التحريك الأفقي
================================ */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ================================
   ✔ إصلاح الحاويات
================================ */
.container, 
.container-fluid {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ================================
   ✔ إصلاح الصفوف والأعمدة
================================ */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

.col, 
[class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100% !important;
}

/* ================================
   ✔ إصلاح عناصر سلة
================================ */
.s-block, 
.s-slider-container, 
.s-products-block {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ================================
   ✔ معالجة الصور
================================ */
img {
    max-width: 100% !important;
    height: auto !important;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================
   ✔ إصلاح العناصر المطلقة
================================ */
.position-absolute, 
.absolute {
    max-width: none !important;
}

/* ================================
   ✔ إصلاح الجداول
================================ */
table {
    width: 100% !important;
    table-layout: fixed !important;
}

/* ================================
   ✔ عناصر Flex
================================ */
.d-flex, 
.flex {
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

/* ================================
   ✔ النصوص الطويلة
================================ */
.text-nowrap {
    white-space: normal !important;
}

/* ================================
   ✔ الفيديو في قسم yasmeen-video
================================ */
.yasmeen-video video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ================================
   ✔ إخفاء كود الخصم بالكامل (محسّن)
================================ */
/* إخفاء جميع عناصر الكوبون - الطريقة الأقوى */
.btn--coupon,
button.btn--coupon,
.btn-coupon,
a.btn--coupon,
[class*="coupon"],
[class*="promo"],
[class*="discount-code"],
[id*="coupon"],
[id*="promo"],
#checkout-coupon,
.coupon-wrapper,
.form--coupon,
.checkout-coupon,
.cart-discount,
.coupon-section,
.promo-code,
.discount-code,
.cart-summary--bottom .coupon-wrapper,
.btn-apply-coupon,
.apply-coupon-btn,
input[name="coupon"],
input[name="promo_code"],
input[placeholder*="كود"],
input[placeholder*="خصم"],
input[placeholder*="كوبون"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* إخفاء أي عنصر يحتوي على كلمات الكوبون */
div:has(> button.btn--coupon),
div:has(> .btn--coupon),
section:has(> .coupon-wrapper),
form:has(> input[name="coupon"]) {
    display: none !important;
    visibility: hidden !important;
}

/* استهداف عناصر Vue الديناميكية */
[data-component*="coupon"],
[data-component*="promo"],
[v-if*="coupon"],
[v-show*="coupon"] {
    display: none !important;
    visibility: hidden !important;
}

/* إخفاء بالنص العربي */
button:contains("كوبون"),
button:contains("خصم"),
a:contains("كوبون"),
a:contains("خصم"),
span:contains("كوبون"),
span:contains("خصم") {
    display: none !important;
    visibility: hidden !important;
}

/* ================================
   ✔ استعلامات الوسائط - موبايل
================================ */
@media (max-width: 640px) {
    .yasmeen-video {
        height: 60vh !important;
        background-color: transparent !important;
    }

    .yasmeen-video video {
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
        height: 100% !important;
        background-color: transparent !important;
    }

    .yasmeen-video > div {
        background-color: transparent !important;
    }
}

/* ================================
   ✔ استعلامات الوسائط - تابلت
================================ */
@media (min-width: 641px) and (max-width: 1024px) {
    .yasmeen-video video {
        object-fit: cover;
        object-position: center center;
    }
}

/* ================================
   ✔ إصلاح خاص بالموبايل
================================ */
@media screen and (max-width: 768px) {
    body {
        width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    .container, 
    .container-fluid, 
    main, 
    section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .s-slider-container, 
    .slider, 
    .carousel {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* ================================
   ✔ دعم سفاري iOS
================================ */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch !important;
        overflow-x: hidden !important;
    }

    .container, 
    .row, 
    .col {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }s-product-card-image{
background: white !important;
height: 8rem !important;
}
.s-product-card-image > a{
background: white !important;
height: 8rem !important;
}
.s-product-card-content > .s-product-card-content-main{
	height: 2.5rem !important;
}
.s-product-card-image > a > img{
object-fit: contain !important;
background: white !important;
background-size: contain !important;
aspect-ratio: 12/14 !important;
}