/* Add custom CSS styles below */ 
body {
    background-color: #FBF3EA !important;
}
/* تغيير لون خلفية قسم الصور المربعة / الأقسام */
section[component-id="945580533"] {
    background-color: #FBF3EA !important;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
section[component-id="945580533"]::before {
    content: "الأقسام";
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #333333;
}
/* ضبط قسم البانر الثابت ليأخذ العرض الكامل مع ضبط الصور */
section[component-id="377565661"] .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

section[component-id="377565661"] img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* تحسين العرض والشكل على الشاشات الصغيرة والهواتف */
@media (max-width: 768px) {
    section[component-id="377565661"] {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
/* 1. تغيير خلفية الفوتر بالكامل وتدوير الزاوية العلوية اليسرى */
footer[data-testid="store-footer"],
.store-footer {
    background-color: #670206 !important;
    border-top-left-radius: 40px !important;
    overflow: hidden !important;
    color: #F6CEA7 !important;
}

/* 2. تغيير لون النصوص والعناوين والروابط إلى اللون البيج */
footer[data-testid="store-footer"] *,
footer[data-testid="store-footer"] a,
footer[data-testid="store-footer"] h1,
footer[data-testid="store-footer"] h2,
footer[data-testid="store-footer"] h3,
footer[data-testid="store-footer"] h4,
footer[data-testid="store-footer"] p,
footer[data-testid="store-footer"] span,
footer[data-testid="store-footer"] li {
    color: #F6CEA7 !important;
}

/* 3. تنسيق الشريط السفلي وحقوق النشر مع الخط الفاصل البيج */
footer[data-testid="store-footer"] .store-footer__inner,
footer[data-testid="store-footer"] > div:last-child {
    border-top: 2px solid #F6CEA7 !important;
    background-color: #670206 !important;
    margin-top: 20px !important;
    padding-top: 15px !important;
}

/* 4. تغيير لون الأيقونات (وسائل التواصل وخيارات الدفع) */
footer[data-testid="store-footer"] svg,
footer[data-testid="store-footer"] i {
    fill: #F6CEA7 !important;
    color: #F6CEA7 !important;
}

/* 5. تخصيص خلفية أيقونات التواصل الاجتماعي لتصبح باللون البيج والكتابة نبيذي */
footer[data-testid="store-footer"] .social-icon,
footer[data-testid="store-footer"] a[href*="facebook"],
footer[data-testid="store-footer"] a[href*="instagram"],
footer[data-testid="store-footer"] a[href*="twitter"],
footer[data-testid="store-footer"] a[href*="snapchat"],
footer[data-testid="store-footer"] a[href*="tiktok"] {
    background-color: #F6CEA7 !important;
    border-radius: 50% !important;
}

footer[data-testid="store-footer"] .social-icon svg,
footer[data-testid="store-footer"] a[href*="facebook"] svg,
footer[data-testid="store-footer"] a[href*="instagram"] svg,
footer[data-testid="store-footer"] a[href*="twitter"] svg {
    fill: #670206 !important;
    color: #670206 !important;
}
/* لون الخلفية الأساسي */
body {
    background-color: #FBF3EA !important;
}

/* الزخرفة على يمين الصفحة، ثابتة ورا المحتوى */
body::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url("ضع_رابط_الصورة_هنا");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100vh;
    mix-blend-mode: multiply; /* يخلّي الأبيض بتاع الصورة يذوب في لون الخلفية */
    pointer-events: none;
    z-index: -1;
}

/* تليفون: زخرفة أصغر */
@media (max-width: 768px) {
    body::before {
        background-size: auto 60vh;
    }
}

/* خلّي الهيكل شفاف عشان الخلفية تظهر */
#main-content,
main,
.app-inner {
    background: transparent !important;
}

/* الكروت بس تفضل بيضاء */
.custom-testimonial-card {
    background-color: #ffffff !important;
}
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("ضع_رابط_الصورة_هنا");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100vh;
    transform: scaleX(-1); /* قلب الصورة أفقيًا */
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: -1;
}
@media (max-width: 768px) {
    body::after { display: none; }
}
/* الحاوية: صف واحد، أعمدة قريبة من بعض */
footer[data-testid="store-footer"] .store-footer__inner > .container.grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    direction: rtl !important;
    gap: 50px !important;
}

/* الأعمدة بعرض المحتوى */
footer[data-testid="store-footer"] .store-footer__inner > .container.grid > * {
    grid-column: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* عمود اللوجو + الوثيقة: نفكّه عشان كل عنصر يتحرك لوحده */
footer[data-testid="store-footer"] .store-footer__inner > .container.grid > *:nth-child(1) {
    display: contents !important;
}

/* 1. اللوجو: أقصى اليمين */
footer[data-testid="store-footer"] a[href="https://lilies-co.com/"].flex {
    order: 0 !important;
    display: block !important;
    width: 260px !important;
    height: 170px !important;
    margin: 0 !important;
    background: url('https://cdn.files.salla.network/theme/399552541/c96ee29b-f4ee-4548-b5db-b21371c2ae0a-original.webp') no-repeat right center / contain !important;
    transition: transform .2s ease;
}
footer[data-testid="store-footer"] a[href="https://lilies-co.com/"].flex:hover {
    transform: scale(1.04);
}

/* شيل كلمة Lilies&CO */
footer[data-testid="store-footer"] a[href="https://lilies-co.com/"].flex h3 {
    display: none !important;
}

/* 2. تواصل معنا */
footer[data-testid="store-footer"] .store-footer__inner > .container.grid > *:nth-child(3) {
    order: 1 !important;
}

/* 3. روابط مهمة */
footer[data-testid="store-footer"] .store-footer__inner > .container.grid > *:nth-child(2) {
    order: 2 !important;
}

/* 4. الوثيقة: أقصى الشمال */
footer[data-testid="store-footer"] .store-footer__inner > .container.grid > *:nth-child(1) > .hidden.lg\:block,
footer[data-testid="store-footer"] .store-footer__inner > .container.grid > *:nth-child(1) > .flex.gap-4 {
    order: 3 !important;
    flex: 0 0 auto !important;
}

/* موبايل وتابلت: كله تحت بعض والوثيقة في الآخر */
@media (max-width: 1023px) {
    footer[data-testid="store-footer"] .store-footer__inner > .container.grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
    }
    footer[data-testid="store-footer"] a[href="https://lilies-co.com/"].flex {
        width: 200px !important;
        height: 130px !important;
        background-position: center !important;
    }
}
#mainnav {
  background-color: #D5BCA4 !important;
}
/* تكبير اللوجو في الهيدر العلوي */
a[data-testid="store-header-logo"] img,
.navbar-brand img {
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* ضبط المساحة المحيطة باللوجو لضمان ظهور الارتفاع الجديد بشكل أنيق */
a[data-testid="store-header-logo"],
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    padding: 5px 0 !important;
}
.swiper-slide.bg-dark.relative {
    height: 43.333vw !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

.swiper-slide.bg-dark.relative > div.bg-cover.absolute {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.swiper-slide.bg-dark.relative {
    height: 43.333vw !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

.swiper-slide.bg-dark.relative > div.bg-cover.absolute {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
section:has(+ [data-testid="store-home-square-photos"]) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

[data-testid="store-home-square-photos"] {
    margin-top: 10px !important;
    padding-top: 0 !important;
}
/* إلغاء الهوامش الفاصلة للسكشن الأول (السلايدر) */
section[component-id="418567378"],
section[data-testid="store-home-slider"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* تحديد المسافة بـ 10px للسكشن التالي (البانر الثابت) */
section[component-id="377565661"],
section[data-testid="store-home-fixed-banner"] {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

/* في حال وجود عناصر داخلية محددة تسبب مسافة إضافية */
section[data-testid="store-home-slider"] + section {
    margin-top: 10px !important;
    padding-top: 0 !important;
}
/* شيل الفراغ فوق وتحت سكشن الـ HTML المخصص */
.s-block--bundle-html-content {
    margin: 0 !important;
    padding: 0 !important;
}

.s-block--bundle-html-content > *,
.s-block--bundle-html-content .container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 100% !important;
}

/* شيل أي فراغ بين الهيدر والمحتوى */
main#main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* شبكة الأقسام: تقريب الكروت وسنترتها في المنتصف */
.square-photos-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important; /* تقليل الفجوة بين الصور */
    max-width: 720px !important; /* العرض الكلي للشبكة لتقريبهم من بعض */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* الكارت: ارتفاع متناسق وخلفية شفافة */
.square-photos-grid .banner-entry.square-photos {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 380px !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* إجبار الصورة على الظهور بالكامل بدون أي قص */
.square-photos-grid .banner-entry.square-photos .lazy__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* شاشات الموبايل */
@media (max-width: 640px) {
    .square-photos-grid {
        gap: 8px !important;
        max-width: 100% !important;
    }
    .square-photos-grid .banner-entry.square-photos {
        height: 220px !important;
        border-radius: 12px !important;
    }
}
/* إجبار الصف الرئيسي في الفوتر على عكس اتجاه العناصر */
footer[data-testid="store-footer"] .store-footer__inner,
footer .store-footer__inner > div:first-child {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
}
/* شيل كل الخطوط في الفوتر */
footer[data-testid="store-footer"],
footer[data-testid="store-footer"] * {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* الخط المنقط والخطوط اللي بتيجي من hr أو border */
footer[data-testid="store-footer"] hr,
footer[data-testid="store-footer"] .store-footer__inner,
footer[data-testid="store-footer"] > div,
footer[data-testid="store-footer"] > div > div {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
}

/* لو الخطوط جاية من عناصر ::before و::after */
footer[data-testid="store-footer"] > div::before,
footer[data-testid="store-footer"] > div::after,
footer[data-testid="store-footer"]::before {
    border: 0 !important;
    background: none !important;
    background-image: none !important;
}