.cs-promo-section{
    width:100%;
    background:#fff;
    direction:rtl;
    overflow:hidden;
}
.cs-promo-inner{
    width:min(1480px,calc(100% - 64px));
    margin:0 auto;
    padding:22px 0 30px;
}
.cs-promo-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.cs-promo-card{
    position:relative;
    min-height:260px;
    border-radius:20px;
    overflow:hidden;
    background:var(--cs-promo-bg);
    color:var(--cs-promo-text);
    display:flex;
    align-items:stretch;
    box-shadow:0 6px 22px rgba(6,42,77,.06);
}
.cs-promo-card::after{
    content:"";
    position:absolute;
    inset:auto -90px -120px auto;
    width:300px;
    height:300px;
    border:1px solid color-mix(in srgb,var(--cs-promo-accent) 45%,transparent);
    border-radius:50%;
    pointer-events:none;
}
.cs-promo-copy{
    position:relative;
    z-index:2;
    width:56%;
    padding:34px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}
.cs-promo-eyebrow{
    color:var(--cs-promo-accent);
    font-size:13px;
    font-weight:700;
    margin-bottom:8px;
}
.cs-promo-title{
    margin:0 0 20px;
    color:var(--cs-promo-text);
    font-size:28px;
    line-height:1.55;
    font-weight:800;
}
.cs-promo-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 17px;
    border-radius:9px;
    background:var(--cs-promo-accent);
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}
.cs-promo-media{
    position:relative;
    z-index:1;
    flex:1;
    min-width:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:12px 18px 0;
}
.cs-promo-media img{
    width:100%;
    height:100%;
    max-height:250px;
    object-fit:contain;
    object-position:center bottom;
    display:block;
}
@media(max-width:1024px){
    .cs-promo-inner{width:calc(100% - 32px)}
    .cs-promo-title{font-size:23px}
}
@media(max-width:767px){
    .cs-promo-inner{
        width:calc(100% - 24px);
        padding:16px 0 22px;
    }
    .cs-promo-grid{
        grid-template-columns:1fr;
        gap:12px;
    }
    .cs-promo-card{
        min-height:190px;
    }
    .cs-promo-copy{
        width:58%;
        padding:22px 18px;
    }
    .cs-promo-eyebrow{font-size:11px}
    .cs-promo-title{
        font-size:19px;
        margin-bottom:14px;
    }
    .cs-promo-button{
        min-height:34px;
        padding:0 13px;
        font-size:11px;
    }
    .cs-promo-media{
        padding:8px 8px 0;
    }
    .cs-promo-media img{
        max-height:180px;
    }
}


/* v1.4.1 — concept visual matching + standard typography */
.cs-promo-section,
.cs-promo-section *{
    font-family:var(--chakad-font-family,"IRANYekanX","IRANYekan",Tahoma,sans-serif);
}
.cs-promo-eyebrow,
.cs-promo-title,
.cs-promo-button{
    font-family:inherit!important;
}

.cs-promo-card{
    isolation:isolate;
}

.cs-promo-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 84% 50%, color-mix(in srgb,var(--cs-promo-accent) 17%,transparent) 0 2px, transparent 3px),
        linear-gradient(135deg, transparent 62%, color-mix(in srgb,var(--cs-promo-accent) 18%,transparent));
    pointer-events:none;
    z-index:0;
}

.cs-promo-copy{
    width:46%!important;
    padding:30px 26px!important;
}

.cs-promo-media.cs-promo-collage{
    position:relative!important;
    width:54%!important;
    flex:0 0 54%!important;
    min-width:0!important;
    height:auto!important;
    padding:10px 14px 8px!important;
    overflow:hidden;
}

.cs-promo-collage .cs-promo-product{
    position:absolute;
    object-fit:contain!important;
    filter:drop-shadow(0 10px 15px rgba(3,31,58,.16));
}

.cs-promo-count-1 .cs-promo-product-1{
    width:82%;
    height:88%;
    right:8%;
    bottom:4%;
}

.cs-promo-count-2 .cs-promo-product-1{
    width:62%;
    height:82%;
    right:0;
    bottom:3%;
}
.cs-promo-count-2 .cs-promo-product-2{
    width:50%;
    height:68%;
    left:0;
    bottom:6%;
}

.cs-promo-count-3 .cs-promo-product-1{
    width:58%;
    height:84%;
    right:0;
    bottom:2%;
    z-index:3;
}
.cs-promo-count-3 .cs-promo-product-2{
    width:43%;
    height:65%;
    left:2%;
    bottom:5%;
    z-index:2;
}
.cs-promo-count-3 .cs-promo-product-3{
    width:34%;
    height:50%;
    left:23%;
    top:9%;
    z-index:1;
    opacity:.94;
}

@media(max-width:767px){
    .cs-promo-copy{
        width:52%!important;
        padding:18px 14px!important;
    }
    .cs-promo-media.cs-promo-collage{
        width:48%!important;
        flex-basis:48%!important;
        padding:6px 6px 4px!important;
    }
    .cs-promo-count-3 .cs-promo-product-1{
        width:62%;
        height:82%;
    }
    .cs-promo-count-3 .cs-promo-product-2{
        width:46%;
        height:62%;
    }
    .cs-promo-count-3 .cs-promo-product-3{
        width:36%;
        height:45%;
    }
}


/* 2.6.14 — approved photographic promo visuals */
.cs-promo-count-1 .cs-promo-product-1{
    width:100%!important;
    height:100%!important;
    right:0!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    object-fit:cover!important;
    object-position:center!important;
    filter:none!important;
    border-radius:0!important;
}
.cs-promo-media.cs-promo-count-1{
    padding:0!important;
}

/* 2.6.15 — make approved promo artwork visibly occupy the media half. */
.cs-promo-card .cs-promo-media.cs-promo-count-1{
    display:block!important;
    position:relative!important;
    width:54%!important;
    flex:0 0 54%!important;
    min-height:260px!important;
    padding:0!important;
    overflow:hidden!important;
}
.cs-promo-card .cs-promo-media.cs-promo-count-1 .cs-promo-product-1{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
}
@media(max-width:767px){
    .cs-promo-card .cs-promo-media.cs-promo-count-1{
        width:48%!important;
        flex-basis:48%!important;
        min-height:190px!important;
    }
}


/* 2.6.16 — seamless image/text transition for promo cards */
.cs-promo-card{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate;
}

/* Remove any hard divider/border between the media and copy zones. */
.cs-promo-media,
.cs-promo-content{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
}

/* Let the image visually continue beneath the copy edge. */
.cs-promo-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:0!important;
    overflow:hidden!important;
}
.cs-promo-media img,
.cs-promo-product-1{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
}

/* Live Elementor copy stays above the image. */
.cs-promo-content{
    position:relative!important;
    z-index:2!important;
    background:transparent!important;
}

/* Soft gradient bridge removes the visible vertical seam.
   RTL copy is on the right side, so the fade is placed there. */
.cs-promo-card::after{
    content:"";
    position:absolute;
    z-index:1;
    top:0;
    right:0;
    width:58%;
    height:100%;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.12) 15%,
        rgba(255,255,255,.72) 43%,
        rgba(255,255,255,.96) 68%,
        rgba(255,255,255,1) 100%
    );
}

/* Cooling card uses its navy tone instead of a white bridge. */
.cs-promo-card:nth-child(2)::after{
    background:linear-gradient(
        90deg,
        rgba(8,52,87,0) 0%,
        rgba(8,52,87,.12) 15%,
        rgba(8,52,87,.72) 43%,
        rgba(8,52,87,.96) 68%,
        rgb(8,52,87) 100%
    );
}

/* Small-appliance card uses warm cream. */
.cs-promo-card:nth-child(1)::after{
    background:linear-gradient(
        90deg,
        rgba(247,225,177,0) 0%,
        rgba(247,225,177,.12) 15%,
        rgba(247,225,177,.72) 43%,
        rgba(247,225,177,.96) 68%,
        rgb(247,225,177) 100%
    );
}

@media (max-width:767px){
    .cs-promo-card::after{
        width:100%;
        background:linear-gradient(
            180deg,
            rgba(255,255,255,0) 20%,
            rgba(255,255,255,.85) 58%,
            rgba(255,255,255,1) 100%
        );
    }
    .cs-promo-card:nth-child(2)::after{
        background:linear-gradient(
            180deg,
            rgba(8,52,87,0) 20%,
            rgba(8,52,87,.86) 58%,
            rgb(8,52,87) 100%
        );
    }
    .cs-promo-card:nth-child(1)::after{
        background:linear-gradient(
            180deg,
            rgba(247,225,177,0) 20%,
            rgba(247,225,177,.86) 58%,
            rgb(247,225,177) 100%
        );
    }
}


/* 2.6.17 — natural overlap blend: no hard vertical seam. */
.cs-promo-card{
    display:flex!important;
    align-items:stretch!important;
    background:var(--cs-promo-bg)!important;
}

/* Disable the old card-wide decorative overlays; they crossed the photo seam. */
.cs-promo-card::before,
.cs-promo-card::after{
    content:none!important;
    display:none!important;
}

/* Text area stays exactly where it was and uses the card's real background. */
.cs-promo-card .cs-promo-copy{
    position:relative!important;
    z-index:3!important;
    width:46%!important;
    flex:0 0 46%!important;
    background:var(--cs-promo-bg)!important;
    margin:0!important;
}

/* Photo overlaps under the copy by 52px, then fades naturally into its background. */
.cs-promo-card .cs-promo-media.cs-promo-collage,
.cs-promo-card .cs-promo-media.cs-promo-count-1{
    position:relative!important;
    inset:auto!important;
    z-index:2!important;
    display:block!important;
    width:58%!important;
    flex:0 0 58%!important;
    height:auto!important;
    min-height:260px!important;
    margin-right:-4%!important;
    padding:0!important;
    overflow:hidden!important;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 78%,rgba(0,0,0,.82) 86%,rgba(0,0,0,.35) 94%,transparent 100%);
    mask-image:linear-gradient(to right,#000 0%,#000 78%,rgba(0,0,0,.82) 86%,rgba(0,0,0,.35) 94%,transparent 100%);
}
.cs-promo-card .cs-promo-media img,
.cs-promo-card .cs-promo-media .cs-promo-product-1{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
    filter:none!important;
    opacity:1!important;
}

@media(max-width:767px){
    .cs-promo-card .cs-promo-copy{
        width:52%!important;
        flex-basis:52%!important;
    }
    .cs-promo-card .cs-promo-media.cs-promo-collage,
    .cs-promo-card .cs-promo-media.cs-promo-count-1{
        width:53%!important;
        flex-basis:53%!important;
        min-height:190px!important;
        margin-right:-5%!important;
        -webkit-mask-image:linear-gradient(to right,#000 0%,#000 72%,rgba(0,0,0,.75) 84%,transparent 100%);
        mask-image:linear-gradient(to right,#000 0%,#000 72%,rgba(0,0,0,.75) 84%,transparent 100%);
    }
}

/* 2.6.44 — mobile promo cards keep the approved desktop composition */
@media (max-width:767px){
    .cs-promo-inner{
        width:calc(100% - 20px)!important;
        padding:14px 0 22px!important;
    }
    .cs-promo-grid{
        grid-template-columns:1fr!important;
        gap:14px!important;
    }
    .cs-promo-card{
        display:flex!important;
        flex-direction:row!important;
        align-items:stretch!important;
        min-height:210px!important;
        height:210px!important;
        border-radius:16px!important;
        overflow:hidden!important;
        background:var(--cs-promo-bg)!important;
    }
    .cs-promo-card .cs-promo-copy{
        order:1!important;
        position:relative!important;
        z-index:3!important;
        width:47%!important;
        flex:0 0 47%!important;
        min-width:0!important;
        padding:20px 14px!important;
        margin:0!important;
        display:flex!important;
        flex-direction:column!important;
        justify-content:center!important;
        align-items:flex-start!important;
        background:var(--cs-promo-bg)!important;
    }
    .cs-promo-card .cs-promo-media.cs-promo-collage,
    .cs-promo-card .cs-promo-media.cs-promo-count-1{
        order:2!important;
        position:relative!important;
        inset:auto!important;
        z-index:2!important;
        display:block!important;
        width:58%!important;
        flex:0 0 58%!important;
        height:210px!important;
        min-height:210px!important;
        margin:0 -5% 0 0!important;
        padding:0!important;
        overflow:hidden!important;
        -webkit-mask-image:linear-gradient(to right,#000 0%,#000 76%,rgba(0,0,0,.78) 86%,rgba(0,0,0,.30) 94%,transparent 100%)!important;
        mask-image:linear-gradient(to right,#000 0%,#000 76%,rgba(0,0,0,.78) 86%,rgba(0,0,0,.30) 94%,transparent 100%)!important;
    }
    .cs-promo-card .cs-promo-media img,
    .cs-promo-card .cs-promo-media .cs-promo-product-1{
        position:absolute!important;
        inset:0!important;
        width:100%!important;
        height:100%!important;
        max-height:none!important;
        object-fit:cover!important;
        object-position:center!important;
        display:block!important;
    }
    .cs-promo-eyebrow{
        font-size:10px!important;
        line-height:1.7!important;
        margin-bottom:5px!important;
    }
    .cs-promo-title{
        font-size:17px!important;
        line-height:1.65!important;
        margin:0 0 12px!important;
    }
    .cs-promo-button{
        min-height:34px!important;
        padding:0 13px!important;
        border-radius:8px!important;
        font-size:10px!important;
        white-space:nowrap!important;
    }
}