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








/* ================================
   Product Card - Premium Motion
   ================================ */

/* الكارت نفسه */
.s-products-slider-card {
    transition: transform 0.28s cubic-bezier(.4,0,.2,1),
                box-shadow 0.28s cubic-bezier(.4,0,.2,1);
    
    will-change: transform;
    border-radius: 18px;
    overflow: hidden;
}

/* Hover للاب توب */
@media (hover: hover) {
    .s-products-slider-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    }
}

/* Click / Tap للموبايل */
.s-products-slider-card:active {
    transform: scale(0.97);
    transition: transform 0.12s ease;
}


/* ================================
   Image Ultra Smooth Zoom
   ================================ */

.s-product-card-image {
    overflow: hidden;
}

.s-product-card-image img {
    transition: transform 0.4s ease;
    will-change: transform;
}

/* zoom عند hover */
@media (hover: hover) {
    .s-products-slider-card:hover 
    .s-product-card-image img {
        transform: scale(1.08);
    }
}


/* ================================
   Improve Rendering Performance
   ================================ */

/* يخلي الحركة على GPU */
.s-products-slider-card,
.s-product-card-image img {
    transform: translateZ(0);
    backface-visibility: hidden;
}








/* =================================
   ULTRA Premium Tabs
   ================================= */

.tab-trigger {

    position: relative;
    border-radius: 14px;
    font-weight: 600;

    transition: transform .28s cubic-bezier(.34,1.56,.64,1),
                box-shadow .28s ease,
                background .25s;

    will-change: transform;
}


/* =========================
   ACTIVE = الملك 👑
========================= */

.tab-trigger.is-active {

    transform: scale(1.06);
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);

    animation: strongPulse 1.8s infinite;
}


/* نبضة أقوى بس راقية */
@keyframes strongPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(0,0,0,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }
}



/* =========================
   Hover = مغري جدا
========================= */

@media (hover:hover){

    .tab-trigger:hover{

        transform: translateY(-6px) scale(1.05);

        box-shadow: 
        0 14px 35px rgba(0,0,0,0.16);
    }

}



/* =========================
   Click للموبايل
========================= */

.tab-trigger:active{

    transform: scale(.92);
}



/* =========================
   Shine أقوى
========================= */

.tab-trigger::after{

    content:"";
    position:absolute;
    top:0;
    left:-150%;
    width:130%;
    height:100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transition:.75s;
}


@media (hover:hover){

    .tab-trigger:hover::after{
        left:120%;
    }

}









/* =========================================
   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;
}