/* =========================================================
   WAFRA PERFORMANCE — offers.css
   Static CSS extracted from Blade.
   ========================================================= */

/* ============================================================
   WAFRA — HOME OFFERS SECTION
   ============================================================ */

.wf-home-offers-section{

    position:relative;

    padding:
        68px 0 72px;

    overflow:hidden;

    background:
        #ffffff;
}


.wf-home-offers-shell{

    width:
        min(
            1380px,
            calc(100% - 72px)
        );

    margin:
        0 auto;
}


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

.wf-home-offers-head{

    display:flex;

    align-items:flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        30px;
}


.wf-home-offers-head__copy{

    max-width:
        620px;
}


.wf-home-offers-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:
        8px;

    margin-bottom:
        9px;

    color:
        #997654;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .05em;
}


.wf-home-offers-eyebrow__icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:
        27px;

    height:
        27px;

    border-radius:
        50%;

    background:
        #ececec;

    color:
        #1c1c1c;

    font-size:
        12px;

    font-weight:
        900;
}


.wf-home-offers-head h2{

    margin:
        0;

    color:
        #1c1c1c !important;

    font-size:
        clamp(
            29px,
            3vw,
            40px
        );

    font-weight:
        900;

    line-height:
        1.25;
}


.wf-home-offers-head p{

    margin:
        8px 0 0;

    color:
        #79847b;

    font-size:
        13px;

    line-height:
        1.8;
}


/* ALL OFFERS BUTTON */

.wf-home-offers-all{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:
        10px;

    min-height:
        43px;

    padding:
        0 16px;

    border:
        1px solid #ececec;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #1c1c1c !important;

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 5px 15px
        rgba(28,28,28,.05);

    transition:
        .2s ease;
}


.wf-home-offers-all:hover{

    border-color:
        #1c1c1c;

    background:
        #1c1c1c;

    color:
        #fff !important;
}


.wf-home-offers-all__arrow{

    font-size:
        17px;
}


/* ============================================================
   GRID
   ============================================================ */

.wf-home-offers-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(245px,300px)
        );

    justify-content:
        center;

    gap:
        18px;
}


/* ============================================================
   CARD
   ============================================================ */

.wf-home-offer-card{

    overflow:hidden;

    border:
        1px solid #ececec;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 7px 24px
        rgba(28,28,28,.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.wf-home-offer-card:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 36px
        rgba(28,28,28,.11);
}


/* IMAGE */

.wf-home-offer-card__media{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    aspect-ratio:
        1 / 1;

    padding:
        24px;

    overflow:hidden;

    background:
        #ffffff;
}


.wf-home-offer-card__media img{

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    transition:
        transform .4s ease;
}


.wf-home-offer-card:hover
.wf-home-offer-card__media img{

    transform:
        scale(1.035);
}


.wf-home-offer-card__badge{

    position:absolute;

    z-index:3;

    top:
        13px;

    inset-inline-start:
        13px;

    padding:
        6px 10px;

    border-radius:
        30px;

    background:
        #1c1c1c;

    color:
        #fff;

    font-size:
        9.5px;

    font-weight:
        900;

    box-shadow:
        0 6px 16px
        rgba(28,28,28,.18);
}


.wf-home-offer-card__placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    width:
        100%;

    height:
        100%;

    color:
        #d6d6d6;

    font-size:
        70px;

    font-weight:
        900;
}


/* BODY */

.wf-home-offer-card__body{

    padding:
        16px 16px 17px;

    border-top:
        1px solid #ffffff;
}


.wf-home-offer-card__meta{

    display:flex;

    flex-wrap:wrap;

    gap:
        7px;

    margin-bottom:
        10px;
}


.wf-home-offer-card__meta span{

    display:inline-flex;

    align-items:center;

    gap:
        5px;

    padding:
        5px 8px;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #617467;

    font-size:
        10px;

    font-weight:
        700;
}


.wf-home-offer-card__meta svg{

    width:
        14px;

    height:
        14px;
}


.wf-home-offer-card__meta
.is-free-shipping{

    background:
        #ececec;

    color:
        #1c1c1c;
}


.wf-home-offer-card__title{

    display:block;

    min-height:
        43px;

    margin-bottom:
        13px;

    color:
        #1c1c1c !important;

    font-size:
        14px;

    font-weight:
        900;

    line-height:
        1.55;
}


.wf-home-offer-card__bottom{

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:
        12px;
}


/* PRICE */

.wf-home-offer-card__price{

    display:flex;

    flex-direction:column;

    gap:
        2px;
}


.wf-home-offer-card__price strong{

    color:
        #1c1c1c;

    font-size:
        15px;

    font-weight:
        900;
}


.wf-home-offer-card__price del{

    color:
        #a0aaa2;

    font-size:
        10px;
}


/* ACTION */

.wf-home-offer-card__action{

    display:inline-flex;

    align-items:center;

    gap:
        6px;

    color:
        #1c1c1c !important;

    font-size:
        11px;

    font-weight:
        800;
}


.wf-home-offer-card__action span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:
        21px;

    height:
        21px;

    border-radius:
        50%;

    background:
        #ececec;

    color:
        #1c1c1c;

    font-size:
        14px;

    transition:
        .2s ease;
}


.wf-home-offer-card__action:hover span{

    background:
        #1c1c1c;

    color:
        #fff;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:767px){

    .wf-home-offers-section{

        padding:
            46px 0 50px;
    }


    .wf-home-offers-shell{

        width:
            calc(100% - 30px);
    }


    .wf-home-offers-head{

        display:block;

        margin-bottom:
            22px;
    }


    .wf-home-offers-head h2{

        font-size:
            28px;
    }


    .wf-home-offers-all{

        margin-top:
            15px;
    }


    .wf-home-offers-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            10px;
    }


    .wf-home-offer-card{

        border-radius:
            12px;
    }


    .wf-home-offer-card__media{

        padding:
            12px;
    }


    .wf-home-offer-card__badge{

        top:
            8px;

        inset-inline-start:
            8px;

        padding:
            5px 7px;

        font-size:
            8px;
    }


    .wf-home-offer-card__body{

        padding:
            11px 10px 12px;
    }


    .wf-home-offer-card__meta{

        display:none;
    }


    .wf-home-offer-card__title{

        min-height:
            38px;

        margin-bottom:
            9px;

        font-size:
            11.5px;
    }


    .wf-home-offer-card__bottom{

        display:block;
    }


    .wf-home-offer-card__price strong{

        font-size:
            13px;
    }


    .wf-home-offer-card__action{

        margin-top:
            8px;

        font-size:
            10px;
    }

}


/* ============================================================
   WAFRA_OFFERS_LAYOUT_FINAL_V2
   Cleaner proportions / flat card / start aligned
   ============================================================ */


/* SECTION — REMOVE EXCESS EMPTY SPACE */

.wf-home-offers-section{

    padding:
        48px 0 52px !important;

    background:
        #ffffff !important;
}


/* CONTAINER */

.wf-home-offers-shell{

    width:
        min(
            1380px,
            calc(100% - 72px)
        ) !important;
}


/* HEADING */

.wf-home-offers-head{

    align-items:
        center !important;

    margin-bottom:
        24px !important;
}


.wf-home-offers-head h2{

    font-size:
        34px !important;
}


.wf-home-offers-head p{

    margin-top:
        6px !important;
}


/* ============================================================
   GRID
   One offer starts from section edge — not center
   ============================================================ */

.wf-home-offers-grid{

    display:grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0,280px)
        ) !important;

    justify-content:
        start !important;

    align-items:
        stretch !important;

    gap:
        18px !important;
}


/* RTL starts from the right */

[dir="rtl"]
.wf-home-offers-grid{

    direction:
        rtl;
}


/* ============================================================
   CARD — FLAT / CLEAN
   ============================================================ */

.wf-home-offer-card{

    display:flex;

    flex-direction:column;

    width:
        100%;

    min-height:
        100%;

    overflow:hidden;

    border:
        1px solid #ececec !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


.wf-home-offer-card:hover{

    border-color:
        #d6d6d6 !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


/* ============================================================
   IMAGE — BETTER PROPORTION
   ============================================================ */

.wf-home-offer-card__media{

    aspect-ratio:
        1 / .88 !important;

    padding:
        20px !important;

    background:
        #ffffff !important;

    border-bottom:
        1px solid #ffffff;
}


.wf-home-offer-card__media img{

    object-fit:
        contain !important;

    transform:
        none !important;
}


.wf-home-offer-card:hover
.wf-home-offer-card__media img{

    transform:
        scale(1.02) !important;
}


/* BADGE */

.wf-home-offer-card__badge{

    top:
        11px !important;

    inset-inline-start:
        11px !important;

    box-shadow:
        none !important;
}


/* ============================================================
   BODY
   ============================================================ */

.wf-home-offer-card__body{

    display:flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        15px 15px 14px !important;

    border-top:
        0 !important;
}


/* META */

.wf-home-offer-card__meta{

    margin-bottom:
        9px !important;
}


/* TITLE */

.wf-home-offer-card__title{

    min-height:
        auto !important;

    margin-bottom:
        12px !important;

    color:
        #1c1c1c !important;

    font-size:
        14px !important;

    font-weight:
        900 !important;

    line-height:
        1.55 !important;
}


/* ============================================================
   BOTTOM — PRICE THEN CENTERED ACTION
   ============================================================ */

.wf-home-offer-card__bottom{

    display:flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-end !important;

    gap:
        0 !important;

    margin-top:
        auto !important;
}


/* PRICE */

.wf-home-offer-card__price{

    display:flex !important;

    flex-direction:
        row !important;

    align-items:
        baseline !important;

    justify-content:
        flex-start !important;

    gap:
        7px !important;

    min-height:
        25px;
}


.wf-home-offer-card__price strong{

    font-size:
        15px !important;

    line-height:
        1.4 !important;
}


.wf-home-offer-card__price del{

    font-size:
        10px !important;
}


/* ============================================================
   VIEW OFFER BUTTON
   CENTERED WITH BALANCED LEFT / RIGHT / BOTTOM SPACE
   ============================================================ */

.wf-home-offer-card__action{

    display:flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

    width:
        calc(100% - 20px) !important;

    min-height:
        38px !important;

    margin:
        13px auto 0 !important;

    padding:
        0 12px !important;

    border:
        1px solid #ececec !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    color:
        #1c1c1c !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    text-align:
        center !important;

    box-shadow:
        none !important;
}


.wf-home-offer-card__action span{

    width:
        20px !important;

    height:
        20px !important;

    background:
        #ececec !important;

    color:
        #1c1c1c !important;
}


.wf-home-offer-card__action:hover{

    border-color:
        #1c1c1c !important;

    background:
        #1c1c1c !important;

    color:
        #ffffff !important;
}


.wf-home-offer-card__action:hover span{

    background:
        rgba(255,255,255,.16) !important;

    color:
        #fff !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1100px){

    .wf-home-offers-grid{

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:767px){

    .wf-home-offers-section{

        padding:
            40px 0 44px !important;
    }


    .wf-home-offers-shell{

        width:
            calc(100% - 30px) !important;
    }


    .wf-home-offers-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:
            10px !important;
    }


    .wf-home-offer-card__media{

        aspect-ratio:
            1 / 1 !important;

        padding:
            11px !important;
    }


    .wf-home-offer-card__body{

        padding:
            10px !important;
    }


    .wf-home-offer-card__title{

        font-size:
            11.5px !important;
    }


    .wf-home-offer-card__price strong{

        font-size:
            12.5px !important;
    }


    .wf-home-offer-card__action{

        width:
            100% !important;

        min-height:
            34px !important;

        margin-top:
            10px !important;

        font-size:
            9.5px !important;
    }

}