/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* قسم السلايدر الرئيسي (#photos-4-slider) */
#photos-4-slider {
    height: 350px !important;
    min-height: auto !important;
}

/* ضبط الصور أو العناصر المرفوعة جوه السلايدر عشان تتناسب مع الطول الجديد وما تبوظش */
#photos-4-slider img, 
#photos-4-slider .swiper-slide,
#photos-4-slider .s-slider-image {
    height: 100% !important;
    max-height: 350px !important;
    object-fit: cover !important;
}

/* ضبط أزرار التنقل (الأسهم) والـ Pagination لتكون متناسقة مع الارتفاع الجديد */
#photos-4-slider .s-slider-block__title {
    margin-bottom: 10px !important;
}


/* قسم كروت العروض (#product-offers) */
#product-offers salla-count-down {
    display: none !important;
}

/* جعل الكارد نفسه حوافه دائرية 20px ومنع خروج أي محتوى بره */
#product-offers .one-product-card {
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* حركة خفيفة شيك للكارد بالكامل عند الـ Hover */
#product-offers .one-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}

/* ضبط إطار الصورة الأساسي لمنع خروج الصورة أثناء التكبير */
#product-offers .image-parent {
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0.75rem;
}

/* إلغاء الـ Rotate القديم من الصورة وجعل حوافها دائرية مع ضبط الحركة العكسية */
#product-offers .image-parent img {
    transform: rotate(0deg) !important;
    border-radius: 15px !important;
    transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out !important;
}

/* تأثير الـ Hover على الصورة (تكبير داخلي ناعم وبدون أي روتيشن مع إضاءة خفيفة) */
#product-offers .one-product-card:hover .image-parent img {
    transform: scale(1.1) rotate(0deg) !important;
    filter: brightness(0.95) !important;
}


/* قسم سلايدر الصفحة الثاني (#slider_bage) - تأثير تبديل الصور */
#slider_bage .s-product-card-entry,
#slider_bage .s-product-card-image-wrapper,
#slider_bage .s-product-card-image,
#slider_bage .inner-hover-image {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* تجهيز حاوية الصورة الأصلية للتبديل */
#slider_bage .s-product-card-image-wrapper {
    position: relative !important;
}

/* ضبط الصورة الثانية المخفية لتظهر بنعومة عند الـ Hover */
#slider_bage .inner-hover-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease-in-out !important;
    z-index: 2 !important;
}

/* عند مرور الماوس: إظهار الصورة الثانية فوراً */
#slider_bage .s-product-card-entry:hover .inner-hover-image {
    opacity: 1 !important;
}


/* قسم تخصيص سلايدر صفحة المنتجات (#slider_bage) */
#slider_bage .s-product-card-entry,
#slider_bage .s-product-card-image-wrapper,
#slider_bage .s-product-card-image {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* تأثير الـ Hover والارتفاع المرن على الكارد بالكامل */
#slider_bage .s-product-card-entry {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#slider_bage .s-product-card-entry:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

/* تأثير تفاعلي على الصورة الأصلية عند الـ Hover */
#slider_bage .s-product-card-image {
    transition: transform 0.4s ease, filter 0.4s ease !important;
}

#slider_bage .s-product-card-entry:hover .s-product-card-image {
    transform: scale(1.08) !important;
    filter: brightness(0.95) contrast(1.05) !important;
}


/* إصلاح قسم الكاتيجوري - سلة */
#categoryd {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 15px !important;
    align-items: start !important;
    overflow-x: hidden !important;
}

#categoryd .block_title {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

#categoryd > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

/* الصور مربعة مع border-radius 20px */
.image_cat {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.image_cat img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    transition: transform 0.3s ease !important;
    display: block !important;
}

#categoryd > a:hover .image_cat img {
    transform: scale(1.05) !important;
}

/* تابلت */
@media (max-width: 768px) {
    #categoryd {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* موبايل */
@media (max-width: 480px) {
    #categoryd {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}





/* تعديل السيكشن الرئيسي: تحديد العرض، التوسيط، وتقصير الارتفاع */
#side-image-banner {
    max-width: 1300px;
    margin-right: auto !important;
    margin-left: auto !important;
    height: auto !important;
    min-height: 280px !important;
    border-radius: 12px;
    overflow: hidden;
}

/* ضبط الأبعاد على الشاشات الكبيرة (Desktop) */
@media (min-width: 768px) {
    #side-image-banner {
        width: 1300px;
        height: 350px !important;
    }
}

/* تأكيد تنسيق الحاويات الداخلية لتتناسب مع الارتفاع الجديد */
#side-image-banner .container {
    max-width: 100% !important;
    height: 100% !important;
}

/* ضبط الصورة عشان ما تخرجش عن الارتفاع الجديد للسيكشن */
#side-image-banner img {
    max-height: 100% !important;
    object-fit: contain;
}


/* تحويل السيكشن إلى كونتينر وتقصير الارتفاع */
#side-image-banner-gif-10 {
    max-width: 1300px;
    margin-right: auto !important;
    margin-left: auto !important;
    height: auto !important;
    min-height: 500px;
    border-radius: 16px;
}

/* ضبط الأبعاد على الشاشات الكبيرة (Desktop) */
@media (min-width: 768px) {
    #side-image-banner-gif-10 {
        height: 450px !important;
        min-height: auto !important;
        width: 1300px;
    }
    
    /* إجبار حاوية الصورة وحاوية النص على الالتزام بارتفاع السيكشن الجديد */
    #side-image-banner-gif-10 .image-parent,
    #side-image-banner-gif-10 .content {
        height: 100% !important;
    }
}

/* ضبط الصورة داخل الحاوية عشان متخرجش برا الأبعاد الجديدة */
#side-image-banner-gif-10 .image-parent img {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto;
}
// video-gif
/* Background */
#side-image-banner-gif-9 .content{
    background: #2B0FA8;
    position: relative;
    overflow: hidden;

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

/* Background Text */
#side-image-banner-gif-9 .content::before{
    content: "SOCKS\A NATION";
    white-space: pre;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    font-size: 220px;
    font-weight: 900;
    line-height: .8;
    letter-spacing: -8px;

    color: rgba(0,0,0,.28);

    z-index: 0;
    pointer-events: none;
}

/* Content */
#side-image-banner-gif-9 .containt_position{

    position:relative;
    z-index:2;

    width:90%;
    max-width:560px;

    margin:auto;

    text-align:right;

    color:#fff;

}
/* Title */
#side-image-banner-gif-9 .containt_position h2{
    font-size: 46px;
    font-weight: 800;
    margin-bottom: 20px;
}

/* Paragraph */
#side-image-banner-gif-9 .containt_position p{
    font-size: 20px;
    line-height: 2;
    margin-bottom: 25px;
}

/* List */
#side-image-banner-gif-9 .containt_position ul{
    font-size: 20px;
    line-height: 2.2;
}

#side-image-banner-gif-9 .containt_position li{
    margin-bottom: 12px;
}

#side-image-banner-gif-9 .containt_position strong{
    font-size: 21px;
    font-weight: 700;
}

/* Button */
#side-image-banner-gif-9 .btnCus{
    display: inline-flex;
    justify-content: center;
    align-items: center;

    margin-top: 35px;

    background: #7ED2DF;
    border-radius: 16px;

    padding: 16px 42px;

    color: #fff;
    font-size: 20px;
    font-weight: 700;

    transition: .3s;
}

#side-image-banner-gif-9 .btnCus:hover{
    background: #6BC9D3;


}

@media (max-width:992px){

    #side-image-banner-gif-9 .content::before{
        font-size:140px;
        letter-spacing:-4px;
    }

    #side-image-banner-gif-9 .containt_position{
        width:90%;
    }

    #side-image-banner-gif-9 .containt_position h2{
        font-size:36px;
    }

    #side-image-banner-gif-9 .containt_position p{
        font-size:18px;
    }

    #side-image-banner-gif-9 .containt_position ul{
        font-size:18px;
    }

    #side-image-banner-gif-9 .btnCus{
        font-size:18px;
        padding:14px 32px;
    }

}

@media (max-width:480px){

  #side-image-banner-gif-9 .containt_position{

    max-width:420px;
    min-height: 420px !important;


}
    #side-image-banner-gif-9 .content{
        padding:20px 12px;
    }

    #side-image-banner-gif-9 .content::before{
font-size:90px;
opacity:.4;    }

    #side-image-banner-gif-9 .containt_position h2{

    font-size:18px;

    margin-bottom:6px;    }

    #side-image-banner-gif-9 .containt_position p{
        font-size:12px;

    line-height:1;

    margin-bottom:6px;

    }

    #side-image-banner-gif-9 .containt_position ul{
        font-size:12px;
    }
#side-image-banner-gif-9 li{

    padding-right:10px;

    line-height:1.2;

}
  #side-image-banner-gif-9 .containt_position strong{
    font-size:12px;
    font-weight:700;
}
#side-image-banner-gif-9 .btnCus{
    display: inline-flex;
    justify-content: center;
    align-items: center;

    margin-top: 16px;

    background: #7ED2DF;
    border-radius: 16px;

    padding: 12px 22px;

    color: #fff;
    font-size: 18px;
    font-weight: 700;

    transition: .3s;
}
}
#side-image-banner-gif-9 .containt_position p {
    text-align: right !important;
    margin-bottom: 28px !important;
    line-height: 1.8 !important;
}

#side-image-banner-gif-9 .containt_position p:last-child {
    margin-bottom: 0 !important;
}
/* =========================================
   تقليل المسافات بين البانرات وأقسام المنتجات
   ========================================= */

/* البانرات اللي فيها margin:30px */
section.s-block--fixed-banner.wide-placeholder > div {
    margin: 8px !important;
}

/* إلغاء المسافة الإضافية الخاصة بالـ section */
section.s-block--fixed-banner.wide-placeholder {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================
   أقسام المنتجات
   ========================================= */

section.s-block.space {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* الـ py-14 هو أحد أكبر أسباب المسافة */
section.s-block.space .container.py-14 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


/* المسافة بين عنوان القسم والمنتجات */
section.s-block.space .block_title.mb-8 {
    margin-bottom: 8px !important;
}


/* =========================================
   إزالة الـ BR اللي بعد البانرات
   ========================================= */

section.s-block--fixed-banner.wide-placeholder + br {
    display: none !important;
}


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

@media (max-width: 768px) {

    section.s-block--fixed-banner.wide-placeholder > div {
        margin: 4px !important;
    }

    section.s-block.space .container.py-14 {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    section.s-block.space .block_title.mb-8 {
        margin-bottom: 5px !important;
    }

    section.s-block.space {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}