/* =========================================
   SPECIAL PAGES
   Categories / Best Sellers / Offers
========================================= */

.brando-simple-page {
    min-height: 650px;
    padding: 42px 0 65px;
    background: #f7f7f7;
}


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

.brando-page-heading {
    margin-bottom: 28px;
    text-align: right;
}

.brando-page-heading span {
    display: block;
    margin-bottom: 6px;

    color: var(--brando-orange);

    font-size: 12px;
    font-weight: 700;
}

.brando-page-heading h1 {
    margin: 0;

    color: #111;

    font-size: 32px;
    font-weight: 800;
}


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

.brando-simple-page .woocommerce {
    width: 100%;
}

.brando-simple-page ul.products {
    margin: 0 !important;
    padding: 0 !important;

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

    gap: 18px;
}


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

.brando-simple-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;

    position: relative;

    background: #fff;

    border: 1px solid #e7e7e7;
    border-radius: 10px;

    overflow: hidden;

    transition: .2s ease;
}

.brando-simple-page ul.products li.product:hover {
    transform: translateY(-4px);

    box-shadow: 0 10px 28px rgba(0, 0, 0, .07);

    border-color: #ddd;
}


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

.brando-simple-page ul.products li.product img {
    width: 100% !important;
    height: 210px !important;

    margin: 0 0 12px !important;

    object-fit: contain;

    background: #fafafa;

    border-radius: 8px;
}


/* =========================================
   PRODUCT TITLE
========================================= */

.brando-simple-page
ul.products
li.product
.woocommerce-loop-product__title {

    min-height: 42px;

    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #111;

    font-size: 14px !important;
    font-weight: 700;

    line-height: 1.5;
}

.brando-simple-page
ul.products
li.product
a:hover
.woocommerce-loop-product__title {

    color: var(--brando-orange);
}


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

.brando-simple-page ul.products li.product .price {
    min-height: 24px;

    margin-bottom: 10px !important;

    display: block;

    color: #111 !important;

    font-size: 15px !important;
    font-weight: 800;
}

.brando-simple-page ul.products li.product .price del {
    color: #999 !important;

    font-size: 11px;
}

.brando-simple-page ul.products li.product .price ins {
    color: var(--brando-orange) !important;

    text-decoration: none;
}


/* =========================================
   BUTTON
========================================= */

.brando-simple-page ul.products li.product .button {
    width: 100%;
    min-height: 40px;

    margin: 0 !important;
    padding: 0 12px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    background: #050505 !important;
    color: #fff !important;

    border: 0 !important;
    border-radius: 5px !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    transition: .2s ease;
}

.brando-simple-page ul.products li.product .button:hover {
    background: var(--brando-orange) !important;
}


/* =========================================
   SALE BADGE
========================================= */

.brando-simple-page ul.products li.product .onsale {
    min-width: auto !important;
    min-height: auto !important;

    top: 18px !important;
    right: 18px !important;
    left: auto !important;

    margin: 0 !important;
    padding: 5px 9px !important;

    background: var(--brando-orange) !important;
    color: #fff !important;

    border-radius: 4px !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;
}


/* =========================================
   CATEGORY CARDS
========================================= */

.brando-simple-page
ul.products
li.product-category {

    padding: 12px !important;

    background: #fff;

    border: 1px solid #e7e7e7;
    border-radius: 10px;

    text-align: center;
}

.brando-simple-page
ul.products
li.product-category img {

    width: 100% !important;
    height: 220px !important;

    margin-bottom: 12px !important;

    object-fit: contain;

    background: #fafafa;
}

.brando-simple-page
ul.products
li.product-category
.woocommerce-loop-category__title {

    margin: 0 !important;
    padding: 8px 5px !important;

    color: #111;

    font-size: 15px !important;
    font-weight: 800;
}

.brando-simple-page
ul.products
li.product-category
.woocommerce-loop-category__title
.count {

    display: block;

    margin-top: 4px;

    background: transparent;

    color: #999;

    font-size: 10px;
}


/* =========================================
   EMPTY RESULT
========================================= */

.brando-simple-page .woocommerce-info {
    padding: 20px !important;

    background: #fff;

    border: 1px solid #e7e7e7 !important;
    border-top: 3px solid var(--brando-orange) !important;
    border-radius: 8px;

    color: #555;
}

/* =========================================
   FIX WOO GRID ALIGNMENT
========================================= */

.brando-simple-page .woocommerce {
    width: 100% !important;
}

.brando-simple-page ul.products {
    width: 100% !important;

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

    gap: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: rtl;

    justify-content: stretch !important;
    align-items: stretch !important;
}


/* WooCommerce clearfix was occupying grid cells */

.brando-simple-page ul.products::before,
.brando-simple-page ul.products::after {
    content: none !important;
    display: none !important;
}


/* Product card */

.brando-simple-page ul.products li.product {
    width: 100% !important;

    float: none !important;

    clear: none !important;

    margin: 0 !important;

    justify-self: stretch !important;
}


/* First product starts from right */

.brando-simple-page ul.products li.product:first-child {
    grid-column-start: 1;
}

/* =========================================
   CENTER SINGLE PRODUCT
========================================= */

ul.products:has(> li.product:only-child) {
    grid-template-columns: minmax(280px, 380px) !important;
    justify-content: center !important;
}

ul.products > li.product:only-child {
    width: 100% !important;
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================
   SALE BADGE + WISHLIST POSITION
========================================= */

.woocommerce ul.products li.product {
    position: relative;
}

/* عرض - أعلى الشمال */

.woocommerce ul.products li.product .onsale {
    position: absolute !important;

    top: 14px !important;
    left: 14px !important;
    right: auto !important;

    min-width: auto !important;
    min-height: auto !important;

    margin: 0 !important;
    padding: 5px 10px !important;

    border-radius: 5px !important;

    background: var(--brando-orange) !important;
    color: #fff !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    z-index: 8;
}

/* Favourite - أعلى اليمين */

.woocommerce ul.products li.product .shop-product-wishlist {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;
    left: auto !important;

    z-index: 10;
}

/* =================================
   OFFERS PAGE
================================= */


.brando-offers-page{
    background:#f7f7f7;
}



/* =================================
   OFFERS HERO
================================= */


.brando-offers-hero{

    height:460px;

    position:relative;

    overflow:hidden;

    background-image:url('../images/offers-hero-kitchen.png');

    background-size:cover;

    background-position:center;

}



/* Dark overlay */

.brando-offers-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.55) 35%,
        rgba(0,0,0,.15) 70%,
        rgba(0,0,0,0) 100%
    );

}



.offers-hero-inner{

    height:100%;

    display:flex;

    align-items:center;

    position:relative;

    z-index:2;

}



/* TEXT */


.offers-hero-content{

    width:45%;

    direction:rtl;

    text-align:left;
       margin-right:auto;

    margin-left:0;

}



.offers-hero-content span{

    display:inline-block;

    margin-bottom:12px;

    color:#ff6900;

    font-size:16px;

    font-weight:700;

}



.offers-hero-content h1{

    margin:15px 0;

    color:#fff;

    font-size:52px;

    line-height:1.25;

    font-weight:800;

}



.offers-hero-content h1 strong{

    color:#ff6900;

}



.offers-hero-content p{

    margin:0;

    max-width:420px;

    color:#fff;

    font-size:18px;

    line-height:1.8;

}



.offers-hero-content a{

    margin-top:28px;

    padding:14px 38px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#ff6900;

    color:#fff;

    border-radius:10px;

    font-size:16px;

    font-weight:700;

    transition:.3s ease;

}



.offers-hero-content a:hover{

    background:#fff;

    color:#111;

}



/* Hide old image section */

.offers-hero-image{

    display:none;

}



/* Mobile */


@media(max-width:992px){


    .brando-offers-hero{

        height:520px;

    }


    .offers-hero-content{

        width:100%;

        text-align:center;

    }


    .offers-hero-content p{

        margin:auto;

    }


}


@media(max-width:576px){


    .brando-offers-hero{

        height:480px;

    }


    .offers-hero-content h1{

        font-size:36px;

    }


}



/* =================================
   PRODUCTS SECTION
================================= */


.offers-products-section{

    padding:70px 0;

}



.offers-products-section .brando-page-heading{

    margin-bottom:35px;

}



/*.offers-products-section ul.products{*/

/*    width:100% !important;*/

/*    display:grid !important;*/

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

/*    gap:25px !important;*/

/*    margin:0 !important;*/

/*    padding:0 !important;*/

/*}*/



/* =================================
   OFFERS PRODUCT CARDS
================================= */


/*.brando-offers-page ul.products li.product{*/

/*    background:#fff;*/

/*    border:1px solid #e8e8e8;*/

/*    border-radius:14px;*/

/*    padding:14px !important;*/

/*    overflow:hidden;*/

/*    transition:.3s ease;*/

/*}*/



/*.brando-offers-page ul.products li.product:hover{*/

/*    transform:translateY(-6px);*/

/*    box-shadow:0 15px 35px rgba(0,0,0,.08);*/

/*}*/



/*.brando-offers-page ul.products li.product img{*/

/*    width:100% !important;*/

/*    height:260px !important;*/

/*    object-fit:contain;*/

/*    background:#fafafa;*/

/*    border-radius:10px;*/

/*    margin-bottom:15px !important;*/

/*}*/



/*.brando-offers-page*/
/*.woocommerce-loop-product__title{*/

/*    min-height:45px;*/

/*    margin:0 0 10px !important;*/

/*    font-size:15px !important;*/

/*    font-weight:800 !important;*/

/*    color:#111;*/

/*}*/



/*.brando-offers-page ul.products li.product .price{*/

/*    margin-bottom:15px !important;*/

/*    font-size:17px !important;*/

/*    font-weight:800;*/

/*}*/



/*.brando-offers-page ul.products li.product .price del{*/

/*    color:#999 !important;*/

/*    font-size:12px;*/

/*}*/



/*.brando-offers-page ul.products li.product .price ins{*/

/*    color:#ff6900 !important;*/

/*    text-decoration:none;*/

/*}*/



/*.brando-offers-page ul.products li.product .button{*/

/*    width:100%;*/

/*    height:45px;*/

/*    display:flex !important;*/

/*    align-items:center;*/

/*    justify-content:center;*/

/*    background:#050505 !important;*/

/*    color:#fff !important;*/

/*    border-radius:8px !important;*/

/*    font-size:13px !important;*/

/*    font-weight:700;*/

/*}*/



/*.brando-offers-page ul.products li.product .button:hover{*/

/*    background:#ff6900 !important;*/

/*}*/



/* SALE LABEL */


/*.brando-offers-page ul.products li.product .onsale{*/

/*    top:15px !important;*/

/*    left:15px !important;*/

/*    right:auto !important;*/

/*    background:#ff6900 !important;*/

/*    color:#fff !important;*/

/*    border-radius:6px !important;*/

/*    padding:6px 12px !important;*/

/*    font-size:11px !important;*/

/*}*/



/* =================================
   RESPONSIVE
================================= */


@media(max-width:992px){


    .offers-hero-inner{

        flex-direction:column;

    }


    .brando-offers-hero{

        height:auto;

        padding:50px 0;

    }


    .offers-hero-content,
    .offers-hero-image{

        width:100%;

    }


    .offers-hero-content{

        text-align:center;

        margin-bottom:30px;

    }


    .offers-hero-content p{

        margin:auto;

    }


    .offers-products-section ul.products{

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

    }


}



@media(max-width:576px){


    .offers-products-section ul.products{

        grid-template-columns:1fr !important;

    }


    .offers-hero-content h1{

        font-size:34px;

    }


}


/* =========================================================
   FINAL OFFERS PRODUCT BUTTON
   Match the main Shop product-card button exactly
========================================================= */

.brando-offers-page .offers-products-section ul.products li.product .button,
.brando-offers-page .woocommerce ul.products li.product .button {
    width: 100% !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 9px 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #050505 !important;
    color: #fff !important;

    border: 0 !important;
    border-radius: 5px !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    box-sizing: border-box !important;

    transition: background-color .2s ease, color .2s ease !important;
}

/* Hover = brand orange */
.brando-offers-page .offers-products-section ul.products li.product .button:hover,
.brando-offers-page .woocommerce ul.products li.product .button:hover {
    background: var(--brando-orange) !important;
    color: #fff !important;
}

/* Click / focus = stay orange */
.brando-offers-page .offers-products-section ul.products li.product .button:active,
.brando-offers-page .offers-products-section ul.products li.product .button:focus,
.brando-offers-page .offers-products-section ul.products li.product .button:focus-visible,
.brando-offers-page .offers-products-section ul.products li.product .button.added,
.brando-offers-page .woocommerce ul.products li.product .button:active,
.brando-offers-page .woocommerce ul.products li.product .button:focus,
.brando-offers-page .woocommerce ul.products li.product .button:focus-visible,
.brando-offers-page .woocommerce ul.products li.product .button.added {
    background: var(--brando-orange) !important;
    color: #fff !important;
    outline: none !important;
}

/* Keep the WooCommerce loading state on-brand too */
.brando-offers-page .offers-products-section ul.products li.product .button.loading,
.brando-offers-page .woocommerce ul.products li.product .button.loading {
    background: var(--brando-orange) !important;
    color: #fff !important;
    opacity: .92 !important;
}

/* Mobile: same proportions as the normal product cards */
@media (max-width: 768px) {
    .brando-offers-page .offers-products-section ul.products li.product .button,
    .brando-offers-page .woocommerce ul.products li.product .button {
        min-height: 36px !important;
        padding: 8px 10px !important;
        font-size: 10px !important;
    }
}


/* =========================================
   OFFERS HERO - FINAL DESKTOP FIX
   Image LEFT / Content RIGHT
========================================= */

@media (min-width: 993px) {

    /* Hero */
    .brando-offers-hero {
        position: relative !important;
        width: 100% !important;
        height: 460px !important;
        overflow: hidden !important;
        background-position: center center !important;
    }

    /* Dark gradient - darker on RIGHT */
    .brando-offers-hero::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;

        background:
            linear-gradient(
                to left,
                rgba(0,0,0,.82) 0%,
                rgba(0,0,0,.68) 25%,
                rgba(0,0,0,.35) 50%,
                rgba(0,0,0,.08) 75%,
                rgba(0,0,0,0) 100%
            ) !important;
    }

    /* Full-width inner */
    .offers-hero-inner {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        direction: rtl !important;
    }

    /* =====================================
       CONTENT
    ===================================== */

    .offers-hero-content {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: 46% !important;
        max-width: 720px !important;

        height: 100% !important;

        margin: 0 !important;

        padding:
            0 6vw 0 35px !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: center !important;

        direction: rtl !important;
        text-align: right !important;

        z-index: 5 !important;

        overflow: visible !important;
    }

    /* Label */
    .offers-hero-content span {
        display: block !important;

        margin: 0 0 10px 0 !important;

        color: #ff6900 !important;

        font-size: 16px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;

        text-align: right !important;
    }

    /* Main title */
    .offers-hero-content h1 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 14px 0 !important;
        padding: 0 !important;

        color: #fff !important;

        font-size: clamp(38px, 3.1vw, 52px) !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;

        white-space: normal !important;
        overflow-wrap: normal !important;

        text-align: right !important;
    }

    .offers-hero-content h1 strong {
        color: #ff6900 !important;
    }

    /* Description */
    .offers-hero-content p {
        width: 100% !important;
        max-width: 520px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #fff !important;

        font-size: 17px !important;
        line-height: 1.8 !important;

        text-align: right !important;
    }

    /* Button */
    .offers-hero-content a {
        width: auto !important;

        margin:
            26px 0 0 0 !important;

        padding:
            14px 38px !important;

        display: inline-flex !important;

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

        background: #ff6900 !important;
        color: #fff !important;

        border-radius: 10px !important;

        font-size: 16px !important;
        font-weight: 700 !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }

    .offers-hero-content a:hover {
        background: #fff !important;
        color: #111 !important;
    }
}

/* =========================================
   OFFERS HERO - MIRROR IMAGE
   Keep text normal / flip image horizontally
========================================= */

.brando-offers-hero {
    position: relative !important;
    overflow: hidden !important;

    /* Remove original background */
    background-image: none !important;
}

/* Flipped background image */
.brando-offers-hero::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background-image: url('../images/offers-hero-kitchen.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform: scaleX(-1) !important;

    z-index: 0 !important;
}

/* Gradient stays above image */
.brando-offers-hero::before {
    z-index: 1 !important;
}

/* Text stays above everything */
.offers-hero-inner {
    position: relative !important;
    z-index: 2 !important;
}