/* =========================================
   YARA ROSE - RAED 2 FINAL CLEAN BASE
========================================= */

:root {
    --yr-primary: #904EA5;
    --yr-dark: #351A3D;
    --yr-mid: #7B4A8E;
    --yr-soft: #F3EAF6;
    --yr-page: #FCFAFD;
    --yr-white: #FFFFFF;
    --yr-border: #E8DCEF;
}


/* =========================================
   GENERAL
========================================= */

/* خلفية الموقع */
body {
    background-color: var(--yr-page);
}

/* العناوين الرئيسية */
h1,
h2,
h3 {
    color: var(--yr-dark);
}


/* =========================================
   PRODUCT CARDS
========================================= */

.s-product-card-price {
    color: var(--yr-primary) !important;
}

.s-product-card-entry {
    background: var(--yr-white) !important;
    border-color: var(--yr-border) !important;
    border-radius: 16px;
}


/* =========================================
   MAIN MENU
========================================= */

.main-menu a,
.main-nav-container a {
    color: var(--yr-dark) !important;
}

.main-menu a:hover,
.main-nav-container a:hover {
    color: var(--yr-primary) !important;
}


/* =========================================
   ORIGINAL SALLA FOOTER
   الفوتر الأساسي القديم فقط
========================================= */

.store-footer,
.store-footer__inner {
    background: linear-gradient(
        135deg,
        #25132D 0%,
        #351A3D 55%,
        #4A2855 100%
    ) !important;

    color: #FFFFFF !important;
}


/* عناوين الفوتر */
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4 {
    color: #FFFFFF !important;
}


/* نصوص وروابط الفوتر */
.store-footer p,
.store-footer span,
.store-footer li,
.store-footer a {
    color: #FFFFFF !important;
}


/* وضوح الروابط */
.store-footer a {
    opacity: 0.95;
    text-decoration: none;
}

.store-footer a:hover {
    color: #E8C7EF !important;
}


/* أيقونات الفوتر */
.store-footer svg,
.store-footer i {
    color: #FFFFFF !important;
    fill: currentColor !important;
}


/* =========================================
   FOOTER CONTACT ICONS
   هاتف - بريد - واتساب
========================================= */

.store-footer a[href^="tel:"],
.store-footer a[href^="mailto:"],
.store-footer a[href*="wa.me"],
.store-footer a[href*="whatsapp"] {

    font-size: 0 !important;

    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;

    padding: 0 !important;
    margin: 0 5px !important;

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

    border: 1px solid rgba(255, 255, 255, 0.60) !important;
    border-radius: 50% !important;

    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
    color: #FFFFFF !important;

    text-decoration: none !important;
}


/* إزالة أي إطار داخلي إضافي */
.store-footer a[href^="tel:"] > *,
.store-footer a[href^="mailto:"] > *,
.store-footer a[href*="wa.me"] > *,
.store-footer a[href*="whatsapp"] > * {

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* حجم الأيقونات */
.store-footer a[href^="tel:"] svg,
.store-footer a[href^="tel:"] i,
.store-footer a[href^="mailto:"] svg,
.store-footer a[href^="mailto:"] i,
.store-footer a[href*="wa.me"] svg,
.store-footer a[href*="wa.me"] i,
.store-footer a[href*="whatsapp"] svg,
.store-footer a[href*="whatsapp"] i {

    width: 21px !important;
    height: 21px !important;
    font-size: 21px !important;

    color: #FFFFFF !important;
    fill: currentColor !important;
}


/* تأثير المرور */
.store-footer a[href^="tel:"]:hover,
.store-footer a[href^="mailto:"]:hover,
.store-footer a[href*="wa.me"]:hover,
.store-footer a[href*="whatsapp"]:hover {

    background: var(--yr-primary) !important;
    border-color: var(--yr-primary) !important;
}
/* =========================================
   YARA ROSE - MOBILE FIX
   إصلاح الانحراف + عرض منتجين بالجوال
========================================= */

@media (max-width: 767px) {

    /* منع أي عنصر من توسيع الصفحة أفقياً */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* حماية العناصر العامة من تجاوز عرض الشاشة */
    img,
    video,
    iframe,
    svg {
        max-width: 100% !important;
    }

    .container,
    .container-fluid {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* =====================================
       PRODUCT GRID - 2 PRODUCTS PER ROW
    ===================================== */

    .s-products-list-wrapper,
    .s-products-list-vertical-cards,
    .products-grid,
    .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* حجم بطاقة المنتج */
    .s-product-card-entry {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden;
    }

    /* تصغير مساحة صورة المنتج */
    .s-product-card-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .s-product-card-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* تصغير النص حتى يناسب عمودين */
    .s-product-card-content-title,
    .s-product-card-title {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .s-product-card-price {
        font-size: 14px !important;
    }

    /* تقليل الحشو داخل البطاقة */
    .s-product-card-content {
        padding: 10px !important;
    }


    /* =====================================
       SLIDERS
       منع السلايدر من توسيع الصفحة
    ===================================== */

    s-products-slider,
    .swiper,
    .swiper-wrapper {
        max-width: 100% !important;
    }

    .swiper {
        overflow: hidden !important;
    }
 
    }
/* YARA ROSE - WhatsApp Floating Button */

.yara-whatsapp-icon {
    position: fixed;
    right: 18px;
    bottom: 22px;

    width: 54px;
    height: 54px;

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

    background: #904EA5;
    border: 2px solid #F0E7E1;
    border-radius: 50%;

    box-shadow: 0 6px 20px rgba(53, 26, 61, 0.25);

    z-index: 9999;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.yara-whatsapp-icon img {
    width: 30px;
    height: 30px;
    display: block;
}

.yara-whatsapp-icon:hover {
    background: #351A3D;
    transform: translateY(-3px);
    box-shadow: 0 9px 24px rgba(53, 26, 61, 0.32);
}

@media (max-width: 767px) {
    .yara-whatsapp-icon {
        width: 50px;
        height: 50px;
        right: 14px;
        bottom: 18px;
    }

    .yara-whatsapp-icon img {
        width: 27px;
        height: 27px;
    }
}
/* إخفاء زر واتساب التطبيق القديم فقط */
.whatsapp-icon:not(.yara-whatsapp-icon),
.whatsapp-float:not(.yara-whatsapp-icon),
.wa-float:not(.yara-whatsapp-icon),
.floating-whatsapp:not(.yara-whatsapp-icon) {
    display: none !important;