/* Add custom CSS styles below */ 

/* ------------------------------
   1) خلفية المتجر المتحركة
--------------------------------*/
body {
    position: relative;
    background: linear-gradient(120deg, #f8efe4, #ffffff);
    background-size: 300% 300%;
    animation: bgMove 8s ease-in-out infinite;
    overflow-x: hidden;
}

/* الظل الأسود المتحرك */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 70%);
    animation: shadowMove 7s ease-in-out infinite;
    pointer-events: none;
}

/* حركة الخلفية */
@keyframes bgMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* حركة الظل */
@keyframes shadowMove {
    0%   { transform: translateX(-30%); opacity: 0.15; }
    50%  { transform: translateX(30%);  opacity: 0.22; }
    100% { transform: translateX(-30%); opacity: 0.15; }
}

/* نسخة أقوى للجوال */
@media (max-width: 768px) {
    body::before {
        background: radial-gradient(circle, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 75%);
        animation-duration: 8s;
        opacity: 0.25;
    }
}

/* ------------------------------
   2) زر إضافة للسلة + تأثير اللمعة
--------------------------------*/
.s-product-card-content-footer button,
.s-product-card-content-footer .btn,
.s-product-card-content-footer .add-to-cart-btn {
    background: linear-gradient(135deg, #f3e6d3, #d8c1a5) !important;
    color: #000 !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s ease !important;
}

/* تأثير اللمعة */
.s-product-card-content-footer button::after,
.s-product-card-content-footer .btn::after,
.s-product-card-content-footer .add-to-cart-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    transform: skewX(-25deg);
    transition: 0.3s;
}

/* اللمعة عند الهوفر */
.s-product-card-content-footer button:hover::after,
.s-product-card-content-footer .btn:hover::after,
.s-product-card-content-footer .add-to-cart-btn:hover::after {
    left: 130%;
}

/* تكبير */
.s-product-card-content-footer button:hover,
.s-product-card-content-footer .btn:hover,
.s-product-card-content-footer .add-to-cart-btn:hover {
    transform: scale(1.05);
}

/* ------------------------------
   3) كرت المنتج
--------------------------------*/
.s-product-card-vertical {
    border: 1px solid #e0d6c8 !important;
    border-radius: 18px !important;
    background: #fff !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.35s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

/* تكبير عند الهوفر */
.s-product-card-vertical:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}

/* اللمعة */
.s-product-card-vertical::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: rgba(255,255,255,0.25);
    transform: skewX(-25deg);
    transition: 0.6s ease;
}

/* ------------------------------
   4) الناف بار بشكل قوس
--------------------------------*/
.shadow-default {
  background: linear-gradient(135deg, #BDA685, #F5EFE7);
  border-bottom-left-radius: 50% 30px;
  border-bottom-right-radius: 50% 30px;
  overflow: hidden;
  transition: .3s ease;
}

.shadow-default:hover {
    box-shadow: 0 12px 34px rgba(0,0,0,0.18) !important;
    transform: translateY(-2px);
}

/* ------------------------------
   5) تحسين الهيدر على الجوال
--------------------------------*/
@media (max-width: 992px) {
    .site-header,
    .header,
    .header-wrapper {
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    .site-header .header-logo img,
    .header .header-logo img {
        max-height: 40px !important;
    }

    .header-actions svg,
    .header-icons svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* استخدام الـ flex بشكل صحيح */
@supports (display: flex) {
    .header-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 18px !important;
    }

    .header-logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* ------------------------------
   6) مميزات المتجر
--------------------------------*/
.s-block--features__item {
    background: #fff;
    padding: 25px;
    border-radius: 14px;
    border-bottom: 4px solid transparent;
    transition: .3s ease;
}

.s-block--features__item:hover {
    border-bottom-color: #a29bfe;
    transform: translateY(-4px);
}

/* ------------------------------
   7) السلايدر Swiper
--------------------------------*/
.swiper-wrapper.s-slider-swiper-wrapper .swiper-slide {
    background: #ffffff;
    padding: 25px;
    border-radius: 18px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: .3s ease;
}

.swiper-wrapper.s-slider-swiper-wrapper .swiper-slide:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* ------------------------------
   8) الفوتر المتحرك
--------------------------------*/
.footer-is-light .store-footer,
.footer-is-light .store-footer .store-footer__inner {
    background: linear-gradient(135deg, #cdb89d, #e8ddd2, #ffffff);
    background-size: 500% 500%;
    animation: footerBeigeFlow 4s ease-in-out infinite;
    position: relative;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    overflow: hidden;
    text-align: center !important;
}

/* الظل المتحرك */
.footer-is-light .store-footer::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.22) 0%,
        rgba(0, 0, 0, 0.12) 40%,
        rgba(0, 0, 0, 0.0) 75%
    );
    animation: movingShadow 6s ease-in-out infinite alternate;
    pointer-events: none;
}

/* حركة التدرّج */
@keyframes footerBeigeFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* حركة الظل */
@keyframes movingShadow {
    0%   { transform: translate(0, 0); opacity: 0.25; }
    50%  { transform: translate(15%, 10%); opacity: 0.13; }
    100% { transform: translate(-10%, -15%); opacity: 0.06; }
}

/* ------------------------------
/* تصغير الحواف البيضاء حول البانر */
/* ------------------------------

 /* مسح الحواف البيضاء والكروية من كل طبقات السلايدر */
.s-slider-swiper-wrapper,
.s-slider-swiper-wrapper .swiper-wrapper,
.s-slider-swiper-wrapper .swiper-slide,
.swiper-wrapper,
.swiper-slide,
.slider .slide {
    padding: 0 !important;
    margin: 1 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}