/* ==================================================
   SALE PRODUCT CARDS — PREMIUM
   --------------------------------------------------
   Sale page only.
   Does NOT modify normal .product-card styles.
================================================== */


/* --------------------------------------------------
   SALE PRODUCTS GRID
-------------------------------------------------- */

.sale-products-grid {

    display: grid;

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

    gap: 24px;

    width: 100%;

    align-items: stretch;

}


/* --------------------------------------------------
   SALE PRODUCT CARD
-------------------------------------------------- */

.sale-product-card {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    min-width: 0;

    height: 100%;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e7ebef;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 4px 14px rgba(0,0,0,.06);

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

}


/* --------------------------------------------------
   CARD HOVER
-------------------------------------------------- */

.sale-product-card:hover {

    transform: translateY(-5px);

    border-color: #d8e0e8;

    box-shadow:
        0 12px 28px rgba(0,0,0,.11);

}


/* ==========================================
   SALE DISCOUNT — PREMIUM FLAT DESIGN
========================================== */

.current-sale .sale-product-card .discount-badge {

    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 5;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: auto;
    height: 24px;

    padding: 0 9px;

    box-sizing: border-box;

    background: #e53935;

    color: #ffffff;

    border: none;

    border-radius: 5px;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .2px;

    box-shadow: none;

}


/* --------------------------------------------------
   PRODUCT IMAGE AREA
-------------------------------------------------- */

.sale-product-image {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 220px;

    padding: 18px;

    box-sizing: border-box;

    background: #ffffff;

    overflow: hidden;

}


/* --------------------------------------------------
   PRODUCT IMAGE
-------------------------------------------------- */

.sale-product-image img {

    display: block;

    width: 100%;

    height: 100%;

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    transition:
        transform .35s ease;

}


/* --------------------------------------------------
   IMAGE HOVER
-------------------------------------------------- */

.sale-product-card:hover
.sale-product-image img {

    transform: scale(1.05);

}


/* --------------------------------------------------
   SALE PRODUCT INFORMATION
-------------------------------------------------- */

.sale-product-info {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 17px 18px 18px;

    box-sizing: border-box;

}


/* --------------------------------------------------
   PRODUCT NAME
-------------------------------------------------- */

.sale-product-info h3 {

    margin: 0 0 12px;

    min-height: 45px;

    color: var(--primary-blue);

    font-size: 16px;

    font-weight: 700;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


/* --------------------------------------------------
   PRICE AREA
-------------------------------------------------- */

.sale-price {

    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-bottom: 6px;

}


/* --------------------------------------------------
   OLD PRICE
-------------------------------------------------- */

.sale-price .old-price {

    color: #8a929b;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.3;

    text-decoration: line-through;

}


/* --------------------------------------------------
   SALE PRICE
-------------------------------------------------- */

.sale-price .new-price {

    color: var(--sale-color);

    font-size: 22px;

    font-weight: 800;

    line-height: 1.2;

}


/* --------------------------------------------------
   SAVING
-------------------------------------------------- */

.sale-saving {

    display: inline-flex;

    align-items: center;

    width: max-content;

    max-width: 100%;

    margin-top: 4px;

    margin-bottom: 14px;

    padding: 5px 9px;

    box-sizing: border-box;

    background: #f1f8f3;

    color: #237a45;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 700;

}


/* --------------------------------------------------
   VIEW PRODUCT BUTTON
-------------------------------------------------- */

.sale-product-info .btn {

    width: 100%;

    margin-top: auto;

    padding: 11px 14px;

    box-sizing: border-box;

    text-align: center;

    text-decoration: none;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 700;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


/* --------------------------------------------------
   BUTTON HOVER
-------------------------------------------------- */

.sale-product-info .btn:hover {

    transform: translateY(-1px);

}


/* --------------------------------------------------
   EMPTY SALE STATE
-------------------------------------------------- */

.sale-empty-state {

    grid-column: 1 / -1;

    width: 100%;

    padding: 50px 25px;

    box-sizing: border-box;

    text-align: center;

    background: #f8fafc;

    border: 1px dashed #d7dee6;

    border-radius: 12px;

}


.sale-empty-state h3 {

    margin: 0 0 8px;

    color: var(--primary-blue);

    font-size: 20px;

}


.sale-empty-state p {

    margin: 0;

    color: #707984;

    font-size: 14px;

}


/* ==================================================
   SALE PRODUCTS — LARGE TABLET
================================================== */

@media (max-width: 1100px) {

    .sale-products-grid {

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

        gap: 20px;

    }

    .sale-product-image {

        height: 205px;

    }

}


/* ==================================================
   SALE PRODUCTS — TABLET / MOBILE
   --------------------------------------------------
   Desktop layout remains untouched.
================================================== */

@media (max-width: 768px) {


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

    .sale-products-grid {

        display: grid;

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

        gap: 14px;

        width: 100%;

        margin-top: 30px;

        align-items: stretch;

    }


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

    .sale-product-card {

        width: 100%;

        min-width: 0;

        height: auto;

        min-height: 0;

        border-radius: 14px;

        overflow: hidden;

    }


    /* ==================================================
       DISCOUNT BADGE
    ================================================== */

    .sale-product-card .discount-badge {

        top: 10px;

        left: 10px;

        right: auto;

        min-width: 42px;

        height: 25px;

        padding: 0 7px;

        border-radius: 5px;

        font-size: 9px;

        font-weight: 800;

        letter-spacing: 0;

    }


    /* ==================================================
       PRODUCT IMAGE
    ================================================== */

    .sale-product-image {

        width: 100%;

        height: 165px;

        padding: 12px;

        box-sizing: border-box;

    }


    .sale-product-image img {

        width: 100%;

        height: 100%;

        object-fit: contain;

    }


    /* ==================================================
       PRODUCT INFORMATION
    ================================================== */

    .sale-product-info {

        display: flex;

        flex-direction: column;

        flex: 1;

        min-width: 0;

        padding: 13px 10px 14px;

        box-sizing: border-box;

    }


    /* ==================================================
       PRODUCT NAME
    ================================================== */

    .sale-product-info h3 {

        width: 100%;

        height: 42px;

        min-height: 42px;

        margin: 0 0 9px;

        overflow: hidden;

        color: var(--primary-blue);

        font-size: 12px;

        font-weight: 700;

        line-height: 1.45;

        text-align: center;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

    }


    /* ==================================================
       PRICE
    ================================================== */

    .sale-price {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 2px;

        margin-bottom: 6px;

    }


    .sale-price .old-price {

        font-size: 10px;

        line-height: 1.2;

    }


    .sale-price .new-price {

        font-size: 20px;

        line-height: 1.2;

    }


    /* ==================================================
       SAVING
    ================================================== */

    .sale-saving {

        align-self: center;

        margin-top: 2px;

        margin-bottom: 12px;

        padding: 4px 7px;

        font-size: 9px;

        line-height: 1.2;

    }


    /* ==================================================
       VIEW PRODUCT
    ================================================== */

    .sale-product-info .btn {

        width: 100%;

        min-height: 34px;

        margin-top: auto;

        padding: 8px 6px;

        box-sizing: border-box;

        border-radius: 6px;

        font-size: 11px;

        line-height: 1.2;


        text-align: center;

    }

}


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

@media (max-width: 480px) {

    .sale-products-grid {

        gap: 12px;

    }


    .sale-product-image {

        height: 150px;

        padding: 10px;

    }


    .sale-product-info {

        padding:
            12px 8px 13px;

    }


    .sale-product-info h3 {

        font-size: 11px;

        height: 40px;

        min-height: 40px;

    }


    .sale-price .old-price {

        font-size: 9px;

    }


    .sale-price .new-price {

        font-size: 18px;

    }


    .sale-saving {

        font-size: 8px;

        padding: 4px 6px;

    }


    .sale-product-info .btn {

        min-height: 32px;

        padding: 7px 5px;

        font-size: 10px;

    }


    .sale-product-card .discount-badge {

        top: 8px;

        left: 8px;

        min-width: 39px;

        height: 23px;

        font-size: 8px;

    }

}

/* ==================================================
   SALE PRODUCTS — SMALL MOBILE
================================================== */

@media (max-width: 500px) {

    .sale-products-grid {

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

        gap: 10px;

    }

    .sale-product-image {

        height: 150px;

        padding: 10px;

    }

    .sale-product-info {

        padding: 11px 10px;

    }

    .sale-product-info h3 {

        font-size: 12px;

        line-height: 1.35;

        min-height: 33px;

        margin-bottom: 7px;

    }

    .sale-price {

        gap: 2px;

        margin-bottom: 4px;

    }

    .sale-price .old-price {

        font-size: 9px;

    }

    .sale-price .new-price {

        font-size: 17px;

    }

    .sale-saving {

        margin-top: 3px;

        margin-bottom: 9px;

        padding: 3px 5px;

        font-size: 9px;

    }

    .sale-product-info .btn {

        padding: 8px 7px;

        font-size: 10px;

        border-radius: 6px;

    }

    .sale-product-card .discount-badge {

        top: 7px;

        right: 7px;

        min-width: 42px;

        height: 23px;

        font-size: 9px;

    }

}


/* ==================================================
   SALE PRODUCTS — VERY SMALL PHONES
================================================== */

@media (max-width: 360px) {

    .sale-products-grid {

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

        gap: 8px;

    }

    .sale-product-image {

        height: 135px;

        padding: 8px;

    }

    .sale-product-info {

        padding: 9px 8px;

    }

    .sale-product-info h3 {

        font-size: 11px;

        min-height: 30px;

    }

    .sale-price .new-price {

        font-size: 16px;

    }

    .sale-saving {

        font-size: 8px;

    }

    .sale-product-info .btn {

        font-size: 9px;

        padding: 7px 5px;

    }

}
/* ==================================================
   SALE PAGE — FINAL PREMIUM LAYOUT
   ================================================== */

/* ------------------------------------------
   SALE SECTION SPACING
------------------------------------------ */

.current-sale {
    padding: 42px 25px 85px;
    background: #ffffff;
}

/* Give the heading area breathing room */
.current-sale .section-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}


/* ------------------------------------------
   PREMIUM "UP TO 50% OFF" BADGE
------------------------------------------ */

.current-sale .sale-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: relative;

    padding: 9px 24px;

    margin-bottom: 20px;

    background: linear-gradient(
        135deg,
        #b71c1c,
        #e53935,
        #b71c1c
    );

    color: #ffffff;

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 50px;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    box-shadow:
        0 6px 18px rgba(211,47,47,.25),
        inset 0 1px 0 rgba(255,255,255,.25);

    text-shadow:
        0 1px 2px rgba(0,0,0,.18);

    overflow: hidden;
}

/* Small shine effect */
.current-sale .sale-badge::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform: skewX(-20deg);

    animation: saleBadgeShine 4s infinite;
}

@keyframes saleBadgeShine {

    0% {
        left: -120%;
    }

    35% {
        left: 140%;
    }

    100% {
        left: 140%;
    }

}


/* ------------------------------------------
   SALE TITLE
------------------------------------------ */

.current-sale .section-heading h2 {
    margin: 0 0 14px;

    font-size: clamp(34px, 4vw, 48px);

    font-weight: 800;

    color: #111827;

    letter-spacing: -1px;
}


/* ------------------------------------------
   SALE DESCRIPTION
------------------------------------------ */

.current-sale .section-heading p {
    margin: 0 auto;

    max-width: 720px;

    color: #667085;

    font-size: 16px;

    line-height: 1.8;
}


/* ------------------------------------------
   PRODUCT GRID
------------------------------------------ */

.current-sale .sale-products-grid {

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 300px));

    justify-content: center;

    gap: 26px;

    align-items: stretch;
}


/* ------------------------------------------
   PRODUCT CARD
------------------------------------------ */

.current-sale .sale-product-card {

    width: 100%;

    min-width: 0;

    border-radius: 16px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 5px 18px rgba(15,23,42,.07);

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


.current-sale .sale-product-card:hover {

    transform: translateY(-6px);

    border-color: #d6dce5;

    box-shadow:
        0 15px 35px rgba(15,23,42,.12);
}


/* ------------------------------------------
   PRODUCT IMAGE
------------------------------------------ */

.current-sale .sale-product-image {

    height: 220px;

    background: #ffffff;
}


/* ------------------------------------------
   DESKTOP PRODUCT INFORMATION
------------------------------------------ */

.current-sale .sale-product-info {

    padding: 18px 18px 20px;
}


/* ------------------------------------------
   TABLET
------------------------------------------ */

@media (max-width: 1100px) {

    .current-sale .sale-products-grid {

        grid-template-columns:
            repeat(3, minmax(0, 300px));

        gap: 22px;
    }

}


/* ------------------------------------------
   MOBILE / TABLET
------------------------------------------ */

@media (max-width: 768px) {

    .current-sale {

        padding:
            32px 16px 60px;
    }

    .current-sale .section-heading {

        margin-bottom: 40px;
    }

    .current-sale .sale-badge {

        padding: 8px 18px;

        font-size: 12px;

        letter-spacing: .9px;

        margin-bottom: 16px;
    }

    .current-sale .section-heading h2 {

        font-size: 34px;

        letter-spacing: -.5px;
    }

    .current-sale .section-heading p {

        font-size: 14px;
    }

    .current-sale .sale-products-grid {

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

        gap: 15px;

        max-width: 620px;
    }

}


/* ------------------------------------------
   SMALL MOBILE
------------------------------------------ */

@media (max-width: 500px) {

    .current-sale {

        padding:
            28px 12px 50px;
    }

    .current-sale .section-heading {

        margin-bottom: 32px;
    }

    .current-sale .sale-badge {

        padding: 7px 15px;

        font-size: 10px;

        letter-spacing: .7px;
    }

    .current-sale .section-heading h2 {

        font-size: 29px;
    }

    .current-sale .section-heading p {

        font-size: 13px;

        line-height: 1.6;
    }

    .current-sale .sale-products-grid {

        gap: 10px;
    }

}
/* ==================================================
   SALE PAGE — PREMIUM FINAL OVERRIDES
================================================== */

.current-sale {
    padding: 42px 25px 85px;
    background: #ffffff;
}


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

.current-sale .section-heading {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}


/* ==========================================
   UP TO 50% OFF — PREMIUM BADGE
========================================== */

.current-sale .sale-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 9px 24px;

    margin-bottom: 20px;

    background:
        linear-gradient(
            135deg,
            #b71c1c,
            #e53935,
            #b71c1c
        );

    color: #ffffff;

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 50px;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    box-shadow:
        0 6px 18px rgba(211,47,47,.25),
        inset 0 1px 0 rgba(255,255,255,.25);

    text-shadow:
        0 1px 2px rgba(0,0,0,.18);

}


/* ==========================================
   SALE TITLE
========================================== */

.current-sale .section-heading h2 {

    margin: 0 0 14px;

    font-size: clamp(34px, 4vw, 48px);

    font-weight: 800;

    color: #111827;

    letter-spacing: -1px;

}


/* ==========================================
   SALE DESCRIPTION
========================================== */

.current-sale .section-heading p {

    margin: 0 auto;

    max-width: 720px;

    color: #667085;

    font-size: 16px;

    line-height: 1.8;

}


/* ==========================================
   CENTERED PRODUCT GRID
========================================== */

.current-sale .sale-products-grid {

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 300px));

    justify-content: center;

    gap: 26px;

    align-items: stretch;

}


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

.current-sale .sale-product-card {

    width: 100%;

    min-width: 0;

    border-radius: 16px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 5px 18px rgba(15,23,42,.07);

}


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

@media (max-width: 1100px) {

    .current-sale .sale-products-grid {

        grid-template-columns:
            repeat(3, minmax(0, 300px));

        gap: 22px;

    }

}


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

@media (max-width: 768px) {

    .current-sale {

        padding:
            32px 16px 60px;

    }

    .current-sale .section-heading {

        margin-bottom: 40px;

    }

    .current-sale .sale-badge {

        padding: 8px 18px;

        font-size: 12px;

        margin-bottom: 16px;

    }

    .current-sale .section-heading h2 {

        font-size: 34px;

    }

    .current-sale .section-heading p {

        font-size: 14px;

    }

    .current-sale .sale-products-grid {

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

        gap: 15px;

        max-width: 620px;

    }

}


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

@media (max-width: 500px) {

    .current-sale {

        padding:
            28px 12px 50px;

    }

    .current-sale .section-heading {

        margin-bottom: 32px;

    }

    .current-sale .sale-badge {

        padding: 7px 15px;

        font-size: 10px;

    }

    .current-sale .section-heading h2 {

        font-size: 29px;

    }

    .current-sale .section-heading p {

        font-size: 13px;

    }

    .current-sale .sale-products-grid {

        gap: 10px;

    }

}
@media (max-width: 768px) {

    .current-sale .sale-product-card .discount-badge {

        top: 8px;
        left: 8px;

        height: 21px;

        padding: 0 7px;

        border-radius: 4px;

        font-size: 9px;

    }

}
/* ==================================================
   HOME PAGE — LIMITED SALES / PROMOTION
================================================== */

.home-sale-section {

    width: 100%;

    margin: 45px auto;

    padding: 55px 30px 60px;

    background:
        linear-gradient(
            180deg,
            #fff8f8 0%,
            #ffffff 100%
        );

    border-top: 1px solid #f1dede;

    border-bottom: 1px solid #f1dede;

}


/* ------------------------------------------
   HEADER
------------------------------------------ */

.home-sale-header {

    max-width: 1320px;

    margin: 0 auto 35px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

}


.home-sale-heading {

    text-align: left;

}


.home-sale-badge {

    display: inline-flex;

    align-items: center;

    padding: 7px 14px;

    margin-bottom: 12px;

    background: #d32f2f;

    color: #ffffff;

    border-radius: 5px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.home-sale-heading h2 {

    margin: 0 0 8px;

    color: var(--primary-blue);

    font-size: 34px;

    font-weight: 800;

    letter-spacing: -.5px;

}


.home-sale-heading p {

    margin: 0;

    color: #6b7280;

    font-size: 14px;

}


/* ------------------------------------------
   VIEW ALL OFFERS
------------------------------------------ */

.home-sale-more {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    border: 1px solid var(--primary-blue);

    border-radius: 7px;

    color: var(--primary-blue);

    background: #ffffff;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}


.home-sale-more:hover {

    background: var(--primary-blue);

    color: #ffffff;

    transform: translateY(-1px);

}


/* ------------------------------------------
   PRODUCT GRID
------------------------------------------ */

.home-sale-grid {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    display: grid;

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

    gap: 22px;

}


/* ------------------------------------------
   PRODUCT CARD
------------------------------------------ */

.home-sale-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.055);

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

}


.home-sale-card:hover {

    transform: translateY(-5px);

    border-color: #d7dce2;

    box-shadow:
        0 14px 30px rgba(0,0,0,.10);

}


/* ------------------------------------------
   IMAGE
------------------------------------------ */

.home-sale-image {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 210px;

    padding: 16px;

    background: #f8fafc;

    overflow: hidden;

}


.home-sale-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition:
        transform .3s ease;

}


.home-sale-card:hover
.home-sale-image img {

    transform: scale(1.04);

}


/* ------------------------------------------
   DISCOUNT
------------------------------------------ */

.home-sale-discount {

    position: absolute;

    top: 10px;

    left: 10px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 23px;

    padding: 0 8px;

    background: #e53935;

    color: #ffffff;


    border-radius: 4px;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;

    box-shadow: none;

}


/* ------------------------------------------
   CONTENT
------------------------------------------ */

.home-sale-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 15px 16px 17px;

}


.home-sale-content h3 {

    margin: 0 0 12px;

    min-height: 42px;

    color: var(--primary-blue);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


/* ------------------------------------------
   PRICES
------------------------------------------ */

.home-sale-prices {

    display: flex;

    align-items: baseline;

    gap: 8px;

    flex-wrap: wrap;

}


.home-sale-old-price {

    color: #9299a2;

    font-size: 11px;

    text-decoration: line-through;

}


.home-sale-new-price {

    color: var(--sale-color);

    font-size: 20px;

    font-weight: 800;

}


/* ------------------------------------------
   SAVING
------------------------------------------ */

.home-sale-saving {

    width: max-content;

    max-width: 100%;

    margin-top: 7px;

    padding: 4px 7px;

    background: #f0f8f3;

    color: #247443;

    border-radius: 4px;

    font-size: 10px;

    font-weight: 700;

}


/* ------------------------------------------
   VIEW PRODUCT
------------------------------------------ */

.home-sale-view {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin-top: 14px;

    padding: 9px 12px;

    border: 1px solid #d7dde4;

    border-radius: 6px;

    color: var(--primary-blue);

    font-size: 12px;

    font-weight: 700;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;

}


.home-sale-view:hover {

    background: var(--primary-blue);

    border-color: var(--primary-blue);

    color: #ffffff;

}


/* ------------------------------------------
   BOTTOM CTA
------------------------------------------ */

.home-sale-bottom {

    display: flex;

    justify-content: center;

    margin-top: 32px;

}


.home-sale-cta {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 25px;

    background: var(--sale-color);

    color: #ffffff;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 5px 15px rgba(211,47,47,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.home-sale-cta:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(211,47,47,.25);

}


/* ------------------------------------------
   TABLET
------------------------------------------ */

@media (max-width: 1000px) {

    .home-sale-grid {

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

        max-width: 650px;

    }

}


/* ------------------------------------------
   MOBILE
------------------------------------------ */

@media (max-width: 600px) {

    .home-sale-section {

        margin: 30px auto;

        padding:
            40px 15px 45px;

    }


    .home-sale-header {

        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 25px;

    }


    .home-sale-heading h2 {

        font-size: 28px;

    }


    .home-sale-heading p {

        font-size: 13px;

    }


    .home-sale-more {

        padding: 8px 14px;

        font-size: 12px;

    }


    .home-sale-grid {

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

        gap: 12px;

    }


    .home-sale-image {

        height: 145px;

        padding: 10px;

    }


    .home-sale-content {

        padding: 11px;

    }


    .home-sale-content h3 {

        font-size: 11px;

        min-height: 34px;

    }


    .home-sale-new-price {

        font-size: 17px;

    }


    .home-sale-old-price {

        font-size: 9px;

    }


    .home-sale-saving {

        font-size: 9px;

    }


    .home-sale-view {

        padding: 8px 6px;

        font-size: 10px;

    }

}


/* ------------------------------------------
   SMALL MOBILE
------------------------------------------ */

@media (max-width: 400px) {

    .home-sale-grid {

        gap: 9px;

    }


    .home-sale-image {

        height: 130px;

    }


    .home-sale-content h3 {

        font-size: 10px;

    }

}

/* ==================================================
   SALE PAGE — FORCE PURE WHITE CARD
================================================== */

.sale-products-grid .sale-product-card {
    background: #ffffff;
}

.sale-products-grid .sale-product-image {
    background: #ffffff;
}

.sale-products-grid .sale-product-image img {
    background: #ffffff;
}
/* ==================================================
   SALE PAGE — FINAL MOBILE FIX
   --------------------------------------------------
   Final override for mobile sale cards.
   Keeps desktop design unchanged.
================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------
       SALE GRID
    ------------------------------------------ */

    .current-sale .sale-products-grid {

        display: grid;

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

        gap: 14px;

        width: 100%;

        max-width: 620px;

        margin-left: auto;
        margin-right: auto;

    }


    /* ------------------------------------------
       SALE CARD
    ------------------------------------------ */

    .current-sale .sale-product-card {

        width: 100%;

        min-width: 0;

        height: auto;

        min-height: 0;

        box-sizing: border-box;

        border-radius: 14px;

        background: #ffffff;

        overflow: hidden;

    }


    /* ------------------------------------------
       DISCOUNT BADGE
       IMPORTANT:
       left only — never stretch
    ------------------------------------------ */

    .current-sale .sale-product-card .discount-badge {

        top: 9px;

        left: 9px;

        right: auto;

        width: auto;

        min-width: 42px;

        max-width: max-content;

        height: 24px;

        padding: 0 8px;

        box-sizing: border-box;

        background: #e53935;

        color: #ffffff;

        border: none;

        border-radius: 5px;

        font-size: 9px;

        font-weight: 800;

        line-height: 1;

        letter-spacing: 0;

        box-shadow: none;

        white-space: nowrap;

    }


    /* ------------------------------------------
       IMAGE AREA
    ------------------------------------------ */

    .current-sale .sale-product-image {

        width: 100%;

        height: 165px;

        padding: 12px;

        box-sizing: border-box;

        background: #ffffff;

    }


    .current-sale .sale-product-image img {

        width: 100%;

        height: 100%;

        max-width: 100%;

        max-height: 100%;

        object-fit: contain;

        background: #ffffff;

    }


    /* ------------------------------------------
       PRODUCT CONTENT
    ------------------------------------------ */

    .current-sale .sale-product-info {

        display: flex;

        flex-direction: column;

        flex: 1;

        width: 100%;

        min-width: 0;

        padding: 13px 10px 14px;

        box-sizing: border-box;

        background: #ffffff;

    }


    /* ------------------------------------------
       PRODUCT NAME
    ------------------------------------------ */

    .current-sale .sale-product-info h3 {

        width: 100%;

        height: 42px;

        min-height: 42px;

        margin: 0 0 9px;

        overflow: hidden;

        color: var(--primary-blue);

        font-size: 12px;

        font-weight: 700;

        line-height: 1.45;

        text-align: center;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

    }


    /* ------------------------------------------
       PRICE
    ------------------------------------------ */

    .current-sale .sale-price {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 2px;

        margin-bottom: 6px;

    }


    .current-sale .sale-price .old-price {

        font-size: 10px;

        line-height: 1.2;

    }


    .current-sale .sale-price .new-price {

        font-size: 20px;

        line-height: 1.2;

    }


    /* ------------------------------------------
       SAVING
    ------------------------------------------ */

    .current-sale .sale-saving {

        align-self: center;

        width: max-content;

        max-width: 100%;

        margin-top: 2px;

        margin-bottom: 12px;

        padding: 4px 7px;

        font-size: 9px;

        line-height: 1.2;

        box-sizing: border-box;

    }


    /* ------------------------------------------
       VIEW PRODUCT
    ------------------------------------------ */

    .current-sale .sale-product-info .btn {

        width: 100%;

        min-height: 34px;

        margin-top: auto;

        padding: 8px 6px;

        box-sizing: border-box;

        border-radius: 6px;

        font-size: 11px;

        line-height: 1.2;

        text-align: center;

    }

}


/* ==================================================
   VERY SMALL PHONES
================================================== */

@media (max-width: 480px) {

    .current-sale .sale-products-grid {

        gap: 10px;

    }


    .current-sale .sale-product-image {

        height: 150px;

        padding: 10px;

    }


    .current-sale .sale-product-info {

        padding: 12px 8px 13px;

    }


    .current-sale .sale-product-info h3 {

        height: 40px;

        min-height: 40px;

        font-size: 11px;

        line-height: 1.45;

    }


    .current-sale .sale-price .old-price {

        font-size: 9px;

    }


    .current-sale .sale-price .new-price {

        font-size: 18px;

    }


    .current-sale .sale-saving {

        font-size: 8px;

        padding: 4px 6px;

    }


    .current-sale .sale-product-info .btn {

        min-height: 32px;

        padding: 7px 5px;

        font-size: 10px;

    }


    /* IMPORTANT:
       Prevent discount badge from stretching */

    .current-sale .sale-product-card .discount-badge {

        top: 8px;

        left: 8px;

        right: auto;

        width: auto;

        min-width: 39px;

        max-width: max-content;

        height: 23px;

        padding: 0 7px;

        font-size: 8px;

    }

}