/* =========================
   BRAND COLORS
========================= */

:root {
    --main-color: #055FB0;
    --main-hover: #0A6FD1;
    --light-bg: #EAF4FF;
    --light-border: #CFE4FF;
    --dark-text: #1f2e3b;
}

/* =========================
   NAVBAR
========================= */

.zpcontainer {
    position: relative !important;
    width: 100% !important;
    background: #ffffff !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #eee !important;
    direction: rtl !important;
}

.zpcontainer ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.zpcontainer ul li {
    background: var(--light-bg) !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transition: .3s ease !important;
}

.zpcontainer ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    color: var(--dark-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.zpcontainer ul li:hover {
    background: var(--main-hover) !important;
    transform: translateY(-2px) !important;
}

.zpcontainer ul li:hover a {
    color: #fff !important;
}

.zpcontainer img {
    height: 58px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* =========================
   HEADING
========================= */

.heading1 {
    font-size: 68px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: var(--dark-text) !important;
    text-align: right !important;
}

.heading1 span {
    color: var(--main-color) !important;
}

/* =========================
   PRODUCTS SECTION
   class: products-sec
========================= */

.products-sec {
    direction: rtl !important;
    padding: 30px 0 !important;
}

.products-sec .row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
}

/* الكارد */
.products-sec .product-item,
.products-sec .zpproduct,
.products-sec .theme-product-list-item,
.products-sec .product-card,
.products-sec .zpproduct-container,
.products-sec .card,
.products-sec .row > div {
    background: #fff !important;
    border: 1px solid #e5eef9 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    padding: 18px !important;
    text-align: center !important;
    transition: .35s ease !important;
}

/* Hover */
.products-sec .product-item:hover,
.products-sec .zpproduct:hover,
.products-sec .theme-product-list-item:hover,
.products-sec .product-card:hover,
.products-sec .zpproduct-container:hover,
.products-sec .card:hover,
.products-sec .row > div:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 18px 40px rgba(5, 95, 176, .16) !important;
    border-color: var(--main-color) !important;
}

/* الصورة */
.products-sec img {
    width: 100% !important;
    height: 240px !important;
    object-fit: contain !important;
    border-radius: 18px !important;
    margin-bottom: 18px !important;
    transition: .4s ease !important;
}

.products-sec .row > div:hover img {
    transform: scale(1.05) !important;
}

/* إخفاء الوصف */
.products-sec p,
.products-sec .description,
.products-sec .desc,
.products-sec .product-desc,
.products-sec .product-description,
.products-sec .zp-product-description,
.products-sec .short-description,
.products-sec [class*="desc"],
.products-sec [class*="description"] {
    display: none !important;
}

/* اسم المنتج فقط */
.products-sec h2,
.products-sec h3,
.products-sec h4,
.products-sec .product-title,
.products-sec .product-name,
.products-sec .zp-product-name,
.products-sec .zpproduct-name,
.products-sec a[href*="/products/"] {
    display: block !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: var(--dark-text) !important;
    line-height: 1.6 !important;
    text-align: center !important;
    text-decoration: none !important;
    margin: 12px 0 8px !important;
}

/* السعر فقط */
.products-sec .price,
.products-sec .product-price,
.products-sec .zp-product-price,
.products-sec .zpproduct-price,
.products-sec strong,
.products-sec [class*="price"] {
    display: block !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    color: var(--main-color) !important;
    text-align: center !important;
    margin-top: 10px !important;
}

/* إخفاء السعر القديم */
.products-sec del,
.products-sec s,
.products-sec .old-price,
.products-sec .compare-price,
.products-sec .sale-price {
    display: none !important;
}

/* إخفاء الأزرار */
.products-sec button,
.products-sec .btn,
.products-sec .button,
.products-sec input[type="submit"] {
    display: none !important;
}



/* FIX zcs_nowrap_mobile */

@media (max-width:768px){

    .zcs_nowrap_mobile{
        display:flex !important;
        flex-direction:column !important;
        gap:16px !important;
        width:100% !important;
    }

    .zcs_nowrap_mobile > *{
        width:100% !important;
        max-width:100% !important;
        min-width:100% !important;
    }

    .zcs_nowrap_mobile .column{
        padding:0 !important;
    }

    .zcs_nowrap_mobile .column-inner{
        width:100% !important;
    }

    .zcs_nowrap_mobile h1,
    .zcs_nowrap_mobile h2,
    .zcs_nowrap_mobile h3,
    .zcs_nowrap_mobile h4,
    .zcs_nowrap_mobile p{
        text-align:center !important;
        word-break:break-word !important;
    }

    .zcs_nowrap_mobile img,
    .zcs_nowrap_mobile svg{
        max-width:100% !important;
        height:auto !important;
        display:block !important;
        margin:auto !important;
    }
}
/* =========================
   IMAGE CARDS
========================= */

.imag_1,
.imag_2,
.imag_3,
.imag_4,
.imag_5,
.imag_6,
.imag_7,
.imag_8,
.imag_9,
.imag_10,
.imag_11 {
    height: 340px !important;
    background: #fff !important;
    border: 1px solid #e5eef9 !important;
    border-radius: 22px !important;
    padding: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: .35s ease !important;
}

.imag_1 img,
.imag_2 img,
.imag_3 img,
.imag_4 img,
.imag_5 img,
.imag_6 img,
.imag_7 img,
.imag_8 img,
.imag_9 img,
.imag_10 img,
.imag_11 img {
    width: 100% !important;
    height: 230px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 16px !important;
    opacity: 1 !important;
    filter: none !important;
    position: static !important;
    transition: .35s ease !important;
}

/* إلغاء أي طبقة سوداء */
.imag_1::before,
.imag_2::before,
.imag_3::before,
.imag_4::before,
.imag_5::before,
.imag_6::before,
.imag_7::before,
.imag_8::before,
.imag_9::before,
.imag_10::before,
.imag_11::before,
.imag_1::after,
.imag_2::after,
.imag_3::after,
.imag_4::after,
.imag_5::after,
.imag_6::after,
.imag_7::after,
.imag_8::after,
.imag_9::after,
.imag_10::after,
.imag_11::after {
    display: none !important;
    content: none !important;
}

/* اسم المنتج */
.imag_1 h1, .imag_1 h2, .imag_1 h3, .imag_1 p,
.imag_2 h1, .imag_2 h2, .imag_2 h3, .imag_2 p,
.imag_3 h1, .imag_3 h2, .imag_3 h3, .imag_3 p,
.imag_4 h1, .imag_4 h2, .imag_4 h3, .imag_4 p,
.imag_5 h1, .imag_5 h2, .imag_5 h3, .imag_5 p,
.imag_6 h1, .imag_6 h2, .imag_6 h3, .imag_6 p,
.imag_7 h1, .imag_7 h2, .imag_7 h3, .imag_7 p,
.imag_8 h1, .imag_8 h2, .imag_8 h3, .imag_8 p,
.imag_9 h1, .imag_9 h2, .imag_9 h3, .imag_9 p,
.imag_10 h1, .imag_10 h2, .imag_10 h3, .imag_10 p,
.imag_11 h1, .imag_11 h2, .imag_11 h3, .imag_11 p {
    position: static !important;
    color: var(--dark-text) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    text-shadow: none !important;
}

/* Hover للكروت */
.imag_1:hover,
.imag_2:hover,
.imag_3:hover,
.imag_4:hover,
.imag_5:hover,
.imag_6:hover,
.imag_7:hover,
.imag_8:hover,
.imag_9:hover,
.imag_10:hover,
.imag_11:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 18px 40px rgba(5, 95, 176, .16) !important;
    border-color: var(--main-color) !important;
}

.imag_1:hover img,
.imag_2:hover img,
.imag_3:hover img,
.imag_4:hover img,
.imag_5:hover img,
.imag_6:hover img,
.imag_7:hover img,
.imag_8:hover img,
.imag_9:hover img,
.imag_10:hover img,
.imag_11:hover img {
    transform: scale(1.04) !important;
}

/* =========================
   FEATURE CARDS
========================= */

.zcs_nowrap_mobile,
.zcs_nowrap_mobile .row {
    direction: rtl !important;
    width: 100% !important;
}

.zcs_nowrap_mobile .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 28px !important;
    align-items: stretch !important;
}

.zcs_nowrap_mobile .row > div {
    width: calc(50% - 14px) !important;
    max-width: calc(50% - 14px) !important;
    flex: 0 0 calc(50% - 14px) !important;
    box-sizing: border-box !important;
}

.zcs_nowrap_mobile .crad1,
.zcs_nowrap_mobile .crad2,
.zcs_nowrap_mobile .crad3,
.zcs_nowrap_mobile .crad4 {
    width: 100% !important;
    height: 100% !important;
    background: var(--light-bg) !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 18px !important;
    padding: 35px 32px !important;
    min-height: 250px !important;
    text-align: right !important;
    direction: rtl !important;
    box-sizing: border-box !important;
}

/* =========================
   WATER CATEGORIES
========================= */

.water-categories {
    direction: rtl !important;
    padding: 40px 0 !important;
}

.water-categories .row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}

.water-categories .row > div {
    background: var(--light-bg) !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 22px !important;
    padding: 20px !important;
    text-align: center !important;
}

.water-categories img {
    width: 100% !important;
    height: 230px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 15px !important;
}

.water-categories p,
.water-categories .description,
.water-categories [class*="description"],
.water-categories del,
.water-categories s,
.water-categories button,
.water-categories .btn {
    display: none !important;
}

/* =========================
   IMAGE GRID
========================= */
/* FIX HOVER TEXT ONLY */

.images .row > div{
    position: relative !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    height: 360px !important;
    background: #fff !important;
}

.images .row > div img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* اخفاء النص في الأول */
.images .row > div h1,
.images .row > div h2,
.images .row > div h3,
.images .row > div h4,
.images .row > div p{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -100% !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 22px 16px !important;
    color: #fff !important;
    background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.15)) !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    transition: .35s ease !important;
}

/* يظهر عند الهوفر */
.images .row > div:hover h1,
.images .row > div:hover h2,
.images .row > div:hover h3,
.images .row > div:hover h4,
.images .row > div:hover p{
    bottom: 0 !important;
}

/* منع Explore واللينكات العامة من التأثير */
.images .row > div a{
    position: static !important;
    background: none !important;
    color: #055FB0 !important;
    padding: 0 !important;
}

/* إلغاء أي طبقة سوداء عامة */
.images .row > div::before,
.images .row > div::after{
    display: none !important;
    content: none !important;
}

@media(max-width:768px){
    .images .row > div{
        height: 240px !important;
    }

    .images .row > div h1,
    .images .row > div h2,
    .images .row > div h3,
    .images .row > div h4,
    .images .row > div p{
        font-size: 14px !important;
        padding: 14px !important;
    }
}
.images .row > div h1,
.images .row > div h2,
.images .row > div h3,
.images .row > div h4,
.images .row > div p {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: .35s ease !important;
}

.images .row > div:hover h1,
.images .row > div:hover h2,
.images .row > div:hover h3,
.images .row > div:hover h4,
.images .row > div:hover p {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.images .row > div:hover {
    background: #EAF4FF !important;
    border-color: #055FB0 !important;
}
/* MOBILE FIX */

@media (max-width:768px){

    .images .row{
        display:grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap:14px !important;
    }

    .images .row > div{
        width:100% !important;
        height:240px !important;
        min-height:240px !important;
        padding:12px !important;
        overflow:hidden !important;
    }

    .images img{
        width:100% !important;
        height:140px !important;
        object-fit:contain !important;
        display:block !important;
        margin:auto !important;
    }

    .images h1,
    .images h2,
    .images h3,
    .images h4,
    .images p,
    .images span,
    .images a{

        writing-mode: horizontal-tb !important;
        transform:none !important;
        rotate:0deg !important;

        width:100% !important;
        display:block !important;

        text-align:center !important;
        font-size:13px !important;
        line-height:1.5 !important;

        white-space:normal !important;
        word-break:break-word !important;

        position:static !important;
        opacity:1 !important;
    }
}