.subcategories-row {
    color: #253e0f;
}

.s-add-product-button-main > *,
.s-add-product-button-main:not(.w-full) > salla-button
{
    width: 100% !important;
}

.s-button-element{
border-radius: .75rem !important;
}

.s-quantity-input-container, .s-quantity-input-container > * {
    background: #ffffff !important;
}

.kayan-banners .flex.md\:flex-row.flex-col.md\:justify-between.md\:items-center.items-center.gap-4.lg\:mb-10.mb-5.justify-center.text-center {
    display: none;
}

.kayan-banners {
    padding-top: 15px;
    margin-bottom: 1rem;
}


.kayan-before-and-after .wrapper {
    height: 871px;
      border-radius: unset;

}

iframe#kayan-item-map {
        border-radius: unset;

}

.app-inner.flex.flex-col.min-h-full {
    overflow: hidden !important;
}



.kayan-gallery {
    padding: 60px 0;
}

.kayan-gallery .flex-1 {
    position: relative;
    flex: 1 !important;
    height: 400px;
    overflow: hidden;
    background: #000;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: default;
}

.kayan-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1); 
    transition: transform 0.6s ease, filter 0.6s ease !important;
}

/* تأثيرات الديسكتوب فقط */
@media (min-width: 1025px) {
    .kayan-gallery .lg\:flex:hover .flex-1:not(:hover) {
        filter: grayscale(0.6) opacity(0.6); 
        transform: scale(0.98); 
    }

    .kayan-gallery .flex-1:hover img {
        transform: scale(1.05); 
        filter: brightness(1.1); 
    }

    .kayan-gallery .flex-1::before {
        content: '';
        position: absolute;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
        );
        z-index: 2;
    }

    .kayan-gallery .flex-1:hover::before {
        left: 150%;
        transition: left 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    }
}

.kayan-gallery a, 
.kayan-gallery span {
    pointer-events: none !important;
}

@media (max-width: 1024px) {
    .kayan-gallery .lg\:flex {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        gap: 10px !important;
    }
    .kayan-gallery .flex-1 {
        height: 200px;
        flex: none !important;
    }
}