/* إزالة المسافة العلوية من أول قسم (Section) فقط داخل المحتوى الرئيسي */
#main-content > section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}














/* --- إعدادات احترافية --- */
:root {
    /* منحنى حركة زمبركي مطاطي يعطي شعوراً بالفخامة */
    --pro-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* منحنى حركة ناعم جداً للتفاعلات البسيطة */
    --pro-ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
    /* لون افتراضي (سيأخذ لون الثيم الخاص بك تلقائياً) */
    --active-pulse-color: rgba(255, 77, 92, 0.4); /* لون أحمر شفاف */
}

/* --- 1. تحسين الزر النشط (النابض بذكاء) --- */
/* نستهدف الزر الذي يحتوي على كلاس الزر الأساسي في سلة */
.tab-trigger.s-button-primary,
.tab-trigger.is-active { /* إضافة is-active لضمان التوافق مع مختلف ثيمات سلة */
    position: relative;
    z-index: 1;
    transition: all 0.3s var(--pro-ease-smooth) !important;
    /* تأثير تنفس خفيف جداً للظل يعطي إيحاء بالنبض */
    box-shadow: 0 0 0 0 var(--active-pulse-color);
    animation: subtleBreathe 2s infinite var(--pro-ease-smooth);
}

@keyframes subtleBreathe {
    0% { box-shadow: 0 0 0 0 var(--active-pulse-color); }
    50% { box-shadow: 0 0 8px 2px var(--active-pulse-color); }
    100% { box-shadow: 0 0 0 0 var(--active-pulse-color); }
}


/* --- 2. حركة دخول حاوية المنتجات (الاحترافية) --- */
.pro-tab-animate-in {
    /* نقطة البداية: شفافية 0، ومزاحة للأسفل قليلاً، ومصغرة قليلاً */
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    
    /* تحسين الأداء: نخبر المتصفح أن هذه العناصر ستتحرك */
    will-change: transform, opacity;
    
    /* تطبيق الحركة الزمبركية */
    /* المدة 0.6 ثانية للحصول على التأثير المطاطي */
    animation: elasticUp 0.6s var(--pro-ease-elastic) forwards;
    
    /* خدعة لضمان عدم ظهور وميض */
    backface-visibility: hidden;
}

@keyframes elasticUp {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* --- 3. تفاعلية كروت المنتجات (Hover Effect) --- */
/* نستهدف كروت المنتجات داخل التبويبات فقط */
/* ملاحظة: قد تحتاج تعديل '.product-entry' حسب اسم كلاس كارت المنتج في قالبك */
.tabs-wrapper .product-entry, 
.tabs-wrapper .s-product-card-entry { 
    transition: transform 0.3s var(--pro-ease-smooth), box-shadow 0.3s var(--pro-ease-smooth);
    will-change: transform, box-shadow;
}

/* عند مرور الماوس */
.tabs-wrapper .product-entry:hover,
.tabs-wrapper .s-product-card-entry:hover {
    /* رفع الكارت للأعلى قليلاً */
    transform: translateY(-10px);
    /* إضافة ظل ناعم جداً يعطي عمقاً */
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15) !important;
}


















/* =========================================
   1. وضع الكمبيوتر (Solid White Luxury)
========================================= */
header.site-header {
    position: sticky !important;
    top: 0;
    z-index: 10000 !important;
    background: #ffffff !important;
    border-bottom: 2px solid #c5a059 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

header .inner {
    background: #ffffff !important;
    padding: 10px 0 !important;
}

/* =========================================
   2. وضع الموبايل (Silver Glass Effect)
========================================= */
@media (max-width: 768px) {
    header.site-header {
        /* تأثير الزجاج المعدني الفضي (تطابق مع صورتك) */
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(220, 220, 220, 0.4) 100%) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    header .inner { background: transparent !important; }
    .navbar-brand img { width: 45px !important; }

    .s-nav-drawer, [class*="drawer"], .s-nav-drawer-backdrop {
        z-index: 999999 !important; 
    }
}

/* =========================================
   3. حل مشكلة البحث (الستارة الطائرة - حل image_1e367d)
========================================= */
.s-search-results {
    position: absolute !important; 
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    z-index: 12000 !important; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
    border-radius: 0 0 15px 15px !important;
    max-height: 450px !important;
    overflow-y: auto !important;
}

/* =========================================
   4. تنظيف الأيقونات واللوجو (حل JPG)
========================================= */
.navbar-brand img {
    width: 55px !important;
    height: auto !important;
    mix-blend-mode: multiply !important;
}

/* إخفاء خلفية أيقونة الحساب البيضاء (image_6d93f1) */
header .inner .flex.items-center img:not(.navbar-brand img) {
     mix-blend-mode: multiply !important;
     background: transparent !important;
}

/* =========================================
   5. كرت المنتج (الرفع الانسيابي للموبايل)
========================================= */
.s-product-card-entry {
    background: #ffffff !important;
    border-radius: 15px !important; 
    border: 1px solid rgba(0, 0, 0, 0.05) !important; 
    /* توقيت انسيابي (0.3 ثانية) مع منحنى ناعم */
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04) !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

/* تأثير الرفع في الموبايل عند اللمس (Lift Up Animation) */
@media (max-width: 768px) {
    .s-product-card-entry:active {
        transform: translateY(-6px) !important; /* رفعة بسيطة وانسيابية */
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1) !important;
        border-color: #c5a059 !important;
        transition: all 0.2s ease-out !important; /* سرعة أكبر عند البدء باللمس */
    }
}

/* تأثير الـ Hover في الكمبيوتر */
@media (min-width: 992px) {
    .s-product-card-entry:hover {
        transform: translateY(-10px) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
        border-color: #c5a059 !important;
    }
}

/* باقي التنسيقات (Sale Badge, Button, Image Zoom) */
.s-product-card-image img { transition: transform 0.6s ease !important; object-fit: cover !important; }
.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.1) !important; }
.s-product-card-badge { background-color: #d63031 !important; color: #fff !important; border-radius: 50px !important; font-size: 11px !important; }
.s-product-card-content-sub button { background-color: #1a1a1a !important; color: #fff !important; border-radius: 50px !important; width: 95% !important; margin: 0 auto 10px auto !important; height: 42px !important; }








/* تكبير اللوجو بنسبة بسيطة (من 40px إلى 55px) */
.navbar-brand img {
    width: 55px !important; /* الحجم الجديد */
    height: auto !important;
    max-height: 55px !important;
    mix-blend-mode: multiply !important; /* الحفاظ على دمج الخلفية البيضاء مع الزجاج */
    object-fit: contain !important;
    vertical-align: middle !important;
}

/* موازنة المسافة حول اللوجو ليكون في منتصف البار تماماً */
.navbar-brand {
    margin-left: 15px !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
















/* =========================================
   CATEGORY BLOCK — PREMIUM STYLE
========================================= */

/* الكارت نفسه */
.s-block--categories .category-card,
.s-block--categories .s-category-card,
.s-block--categories a{

    position:relative;
    border-radius:18px;
    overflow:hidden;

    transition:
    transform .35s cubic-bezier(.22,.9,.32,1),
    box-shadow .35s ease;

    background:#fff;
}


/* Shadow فاخر */
.s-block--categories a{

    box-shadow:
    0 6px 18px rgba(0,0,0,.06);
}


/* Hover Desktop */
@media (hover:hover){

.s-block--categories a:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.12);
}

}


/* ضغطه الموبايل */
.s-block--categories a:active{

    transform:scale(.96);
}


/* =========================================
   IMAGE EFFECT
========================================= */

.s-block--categories img{

    transition:transform .6s ease;
}

@media (hover:hover){

.s-block--categories a:hover img{

    transform:scale(1.08);
}

}


/* =========================================
   TITLE — يخليه يبان غالي
========================================= */

.s-block--categories h3,
.s-block--categories .category-name{

    font-weight:600;
    letter-spacing:.3px;

    transition:.25s;
}

@media (hover:hover){

.s-block--categories a:hover h3{

    transform:translateY(-2px);
}

}


/* =========================================
   LUXURY GRADIENT OVERLAY
   (حركة مواقع الفاشون)
========================================= */

.s-block--categories a::after{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.18),
        transparent 60%
    );

    opacity:.0;
    transition:.35s;
}

@media (hover:hover){

.s-block--categories a:hover::after{

    opacity:1;
}

}


/* =========================================
   spacing يخلي الموقع يتنفس
========================================= */

.s-block--categories .container{

    padding-top:10px;
}