/* =====================================================
                    HOW IT WORKS
              PREMIUM GOLD / BLACK THEME
===================================================== */

.how-it-works{

    position:relative;

    padding:110px 0;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(212,160,23,.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(169,104,0,.045),
            transparent 30%
        ),
        #FFFFFF;

    overflow:hidden;

}


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

.section-heading{

    position:relative;

    z-index:3;

    max-width:700px;

    margin:auto;

    text-align:center;

}


/* =====================================================
                    SECTION TAG
===================================================== */

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 20px;

    border-radius:50px;

    background:
        rgba(212,160,23,.09);

    border:
        1px solid
        rgba(212,160,23,.20);

    color:#A96800;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

    text-transform:uppercase;

}


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

.section-heading h2{

    font-family:'Poppins',sans-serif;

    font-size:42px;

    font-weight:800;

    line-height:1.2;

    color:#17130D;

    margin-bottom:18px;

}


.section-heading h2 span{

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A,
            #D89B00
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

}


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

.section-heading p{

    color:#6F6A61;

    font-size:17px;

    line-height:1.8;

    margin-bottom:0;

}


/* =====================================================
                    STEPS ROW
===================================================== */

.how-it-works .row{

    position:relative;

}


/* =====================================================
                    CONNECTING LINE
===================================================== */

.how-it-works .row::before{

    content:"";

    position:absolute;

    top:82px;

    left:12%;

    width:76%;

    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #A96800 15%,
            #D89B00 35%,
            #FFD76A 50%,
            #D89B00 65%,
            #A96800 85%,
            transparent 100%
        );

    border-radius:50px;

    opacity:.55;

    z-index:0;

}


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

.step-card{

    position:relative;

    z-index:2;

    height:100%;

    padding:45px 30px;

    text-align:center;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid
        rgba(23,19,13,.08);

    border-radius:24px;

    box-shadow:
        0 15px 40px
        rgba(23,19,13,.06);

    overflow:hidden;

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

}


/* Top gold accent */

.step-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            #A96800,
            #D89B00,
            #FFD76A,
            #D89B00,
            #A96800
        );

    transform:
        scaleX(.25);

    transition:
        transform .4s ease;

}


/* Decorative glow */

.step-card::after{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,160,23,.08),
            transparent 70%
        );

    top:-75px;

    right:-75px;

    pointer-events:none;

}


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

.step-card:hover{

    transform:
        translateY(-12px);

    border-color:
        rgba(212,160,23,.28);

    box-shadow:
        0 28px 65px
        rgba(23,19,13,.11);

}


.step-card:hover::before{

    transform:
        scaleX(1);

}


/* =====================================================
                    STEP NUMBER
===================================================== */

.step-number{

    position:absolute;

    top:15px;

    right:20px;

    font-family:'Poppins',sans-serif;

    font-size:55px;

    font-weight:800;

    line-height:1;

    color:
        rgba(212,160,23,.09);

    pointer-events:none;

}


/* =====================================================
                    STEP ICON
===================================================== */

.step-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A,
            #D89B00
        );

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 28px;

    color:#17130D;

    font-size:32px;

    position:relative;

    box-shadow:
        0 15px 35px
        rgba(212,160,23,.22);

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

}


/* Outer ring */

.step-icon::before{

    content:"";

    position:absolute;

    width:112px;

    height:112px;

    border-radius:50%;

    border:
        2px dashed
        rgba(212,160,23,.28);

    transition:
        transform .4s ease,
        border-color .4s ease;

}


/* Inner subtle glow */

.step-icon::after{

    content:"";

    position:absolute;

    width:74px;

    height:74px;

    border-radius:50%;

    background:
        rgba(255,255,255,.10);

    pointer-events:none;

}


/* =====================================================
                    ICON HOVER
===================================================== */

.step-card:hover .step-icon{

    transform:
        rotate(-8deg)
        scale(1.08);

    box-shadow:
        0 18px 40px
        rgba(212,160,23,.32);

}


.step-card:hover .step-icon::before{

    transform:
        rotate(20deg)
        scale(1.04);

    border-color:
        rgba(212,160,23,.45);

}


/* =====================================================
                    STEP TITLE
===================================================== */

.step-card h4{

    position:relative;

    z-index:2;

    font-family:'Poppins',sans-serif;

    font-size:22px;

    font-weight:700;

    color:#17130D;

    margin-bottom:15px;

}


/* =====================================================
                    STEP DESCRIPTION
===================================================== */

.step-card p{

    position:relative;

    z-index:2;

    color:#6F6A61;

    font-size:15px;

    line-height:1.8;

    margin-bottom:0;

}


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

@media(max-width:991px){

    .how-it-works{

        padding:90px 0;

    }


    .how-it-works .row::before{

        display:none;

    }


    .section-heading h2{

        font-size:38px;

    }


    .step-card{

        padding:40px 25px;

    }

}


@media(max-width:767px){

    .how-it-works{

        padding:75px 0;

    }


    .section-heading{

        padding:0 20px;

    }


    .section-heading h2{

        font-size:34px;

    }


    .section-heading p{

        font-size:16px;

    }


    .step-card{

        padding:35px 25px;

        border-radius:20px;

    }


    .step-icon{

        width:82px;

        height:82px;

        font-size:29px;

    }


    .step-icon::before{

        width:104px;

        height:104px;

    }

}


@media(max-width:576px){

    .how-it-works{

        padding:65px 0;

    }


    .section-heading h2{

        font-size:30px;

    }


    .step-number{

        font-size:48px;

    }

}
/* =====================================================
                    CATEGORIES
              PREMIUM GOLD / BLACK THEME
===================================================== */

.categories-section{
    position:relative;
    padding:110px 0;
    background:#FFFFFF;
    overflow:hidden;
}

.categories-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(212,160,23,.055), transparent 70%);
    top:-210px;
    left:-180px;
    pointer-events:none;
}

.categories-section::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(169,104,0,.045), transparent 70%);
    right:-180px;
    bottom:-190px;
    pointer-events:none;
}

.categories-section .section-heading,
.categories-section .category-grid{
    position:relative;
    z-index:2;
}

.categories-section .section-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 20px;
    margin-bottom:20px;
    border-radius:50px;
    background:rgba(212,160,23,.09);
    border:1px solid rgba(212,160,23,.20);
    color:#A96800;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.categories-section .section-title{
    margin:0 0 18px;
    font-family:'Poppins',sans-serif;
    font-size:42px;
    font-weight:800;
    line-height:1.2;
    color:#17130D;
}

.categories-section .section-title span{
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A,#D89B00);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.categories-section .section-description{
    margin:0;
    color:#6F6A61;
    font-size:17px;
    line-height:1.8;
}

.category-grid{
    margin-top:45px;
}

.category-grid > div{
    display:flex;
}

.category-card{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    background:#FFFFFF;
    border:1px solid rgba(23,19,13,.08);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(23,19,13,.07);
    text-decoration:none;
    transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.category-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    z-index:4;
    background:linear-gradient(90deg,#A96800,#D89B00,#FFD76A,#D89B00,#A96800);
    transform:scaleX(.25);
    transform-origin:center;
    transition:transform .4s ease;
}

.category-card:hover{
    transform:translateY(-10px);
    border-color:rgba(212,160,23,.28);
    box-shadow:0 28px 65px rgba(23,19,13,.12);
}

.category-card:hover::before{ transform:scaleX(1); }

.category-image{
    position:relative;
    height:250px;
    flex-shrink:0;
    overflow:hidden;
    background:#F4F1EA;
}

.category-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .6s ease;
}

.category-card:hover .category-image img{ transform:scale(1.07); }

.category-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#F8F6F1,#EEE9DE);
    color:#A96800;
    font-size:42px;
}

.category-overlay{
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:8px;
    padding:20px;
    background:linear-gradient(to top,rgba(23,19,13,.65),rgba(23,19,13,0));
    color:#FFFFFF;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:600;
    opacity:0;
    transition:opacity .35s ease;
}

.category-card:hover .category-overlay{ opacity:1; }

.category-overlay i{ transition:transform .3s ease; }
.category-card:hover .category-overlay i{ transform:translateX(4px); }

.category-content{
    flex:1;
    padding:23px 24px 25px;
}

.category-content h3{
    margin:0 0 8px;
    color:#17130D;
    font-family:'Poppins',sans-serif;
    font-size:19px;
    font-weight:700;
    line-height:1.4;
}

.category-content p{
    min-height:43px;
    margin:0 0 14px;
    color:#6F6A61;
    font-size:13px;
    line-height:1.7;
}

.category-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#A96800;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:700;
}

.category-link i{ transition:transform .3s ease; }
.category-card:hover .category-link i{ transform:translateX(4px); }

.categories-empty{
    position:relative;
    z-index:2;
    max-width:550px;
    margin:45px auto 0;
    padding:55px 30px;
    text-align:center;
    background:#FFFFFF;
    border:1px solid rgba(23,19,13,.08);
    border-radius:24px;
    box-shadow:0 15px 45px rgba(23,19,13,.07);
}

.categories-empty-icon{
    width:75px;
    height:75px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(212,160,23,.10);
    color:#A96800;
    font-size:28px;
}

.categories-empty h3{
    margin-bottom:10px;
    color:#17130D;
    font-family:'Poppins',sans-serif;
    font-size:23px;
    font-weight:700;
}

.categories-empty p{
    margin:0;
    color:#6F6A61;
    font-size:14px;
}

@media(max-width:991.98px){
    .categories-section{ padding:90px 0; }
    .categories-section .section-title{ font-size:38px; }
    .category-image{ height:240px; }
}

@media(max-width:767.98px){
    .categories-section{ padding:75px 0; }
    .categories-section .section-heading{ padding:0 20px; }
    .categories-section .section-title{ font-size:34px; }
    .categories-section .section-description{ font-size:16px; }
    .category-card{ border-radius:20px; }
    .category-image{ height:270px; }
}

@media(max-width:576px){
    .categories-section{ padding:65px 0; }
    .categories-section .section-title{ font-size:30px; }
    .category-image{ height:250px; }
    .category-content{ padding:21px 20px 23px; }
}

/* =====================================================
                    FEATURED PRODUCTS
              PREMIUM GOLD / BLACK THEME
===================================================== */

.featured-products-section{
    position:relative;
    padding:110px 0;
    background:radial-gradient(circle at 8% 15%,rgba(212,160,23,.055),transparent 28%),radial-gradient(circle at 92% 85%,rgba(169,104,0,.045),transparent 30%),#F8F6F1;
    overflow:hidden;
}

.featured-products-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(212,160,23,.07),transparent 70%);
    top:-200px;
    left:-180px;
    pointer-events:none;
}

.featured-products-section::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(169,104,0,.05),transparent 70%);
    right:-180px;
    bottom:-200px;
    pointer-events:none;
}

.featured-products-section .section-heading,
.featured-products-section .row,
.featured-products-footer,
.featured-products-empty{
    position:relative;
    z-index:2;
}

.featured-products-section .section-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 20px;
    margin-bottom:20px;
    border-radius:50px;
    background:rgba(212,160,23,.09);
    border:1px solid rgba(212,160,23,.20);
    color:#A96800;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.featured-products-section .section-title{
    margin:0 0 18px;
    font-family:'Poppins',sans-serif;
    font-size:42px;
    font-weight:800;
    line-height:1.2;
    color:#17130D;
}

.featured-products-section .section-title span{
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A,#D89B00);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.featured-products-section .section-description{
    margin:0;
    color:#6F6A61;
    font-size:17px;
    line-height:1.8;
}

.featured-products-section .row{ align-items:stretch; margin-top:45px; }
.featured-products-section .row > div{ display:flex; }

.featured-products-section .product-card{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    background:#FFFFFF;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(23,19,13,.08);
    box-shadow:0 15px 45px rgba(23,19,13,.07);
    transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}

.featured-products-section .product-card:hover{
    transform:translateY(-10px);
    border-color:rgba(212,160,23,.28);
    box-shadow:0 28px 65px rgba(23,19,13,.12);
}

.featured-products-section .product-image{
    position:relative;
    width:100%;
    height:300px;
    flex-shrink:0;
    overflow:hidden;
    background:#F4F1EA;
}

.featured-products-section .product-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .6s ease;
}

.featured-products-section .product-card:hover .product-image img{ transform:scale(1.06); }

.featured-products-section .product-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#F8F6F1,#EEE9DE);
    color:#A96800;
    font-size:45px;
}

.featured-products-section .product-badge{
    position:absolute;
    top:16px;
    left:16px;
    z-index:5;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 14px;
    border-radius:50px;
    font-family:'Poppins',sans-serif;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.featured-products-section .sale-badge{
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A);
    color:#17130D;
    box-shadow:0 7px 18px rgba(212,160,23,.22);
}

.featured-products-section .stock-badge{
    left:auto;
    right:16px;
    background:rgba(23,19,13,.85);
    color:#FFFFFF;
}

.featured-products-section .product-overlay{
    position:absolute;
    inset:0;
    z-index:4;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:20px;
    background:linear-gradient(to top,rgba(23,19,13,.65),rgba(23,19,13,0));
    opacity:0;
    transition:opacity .35s ease;
}

.featured-products-section .product-card:hover .product-overlay{ opacity:1; }

.featured-products-section .product-view-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 20px;
    border-radius:12px;
    background:#FFFFFF;
    color:#17130D !important;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:600;
    text-decoration:none !important;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
    transition:transform .3s ease,background .3s ease,color .3s ease;
}

.featured-products-section .product-view-btn:hover{
    transform:translateY(-3px);
    background:#D89B00;
    color:#17130D !important;
}

.featured-products-section .product-content{
    position:relative;
    display:flex;
    flex-direction:column;
    flex:1;
    padding:25px 24px 27px;
}

.featured-products-section .product-category{
    display:block;
    height:18px;
    margin-bottom:8px;
    overflow:hidden;
    color:#A96800;
    font-family:'Poppins',sans-serif;
    font-size:11px;
    font-weight:700;
    line-height:18px;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.featured-products-section .product-title{
    min-height:54px;
    margin:0 0 9px;
    font-family:'Poppins',sans-serif;
    font-size:19px;
    font-weight:700;
    line-height:1.4;
}

.featured-products-section .product-title a{
    color:#17130D;
    text-decoration:none;
    transition:color .3s ease;
}

.featured-products-section .product-title a:hover{ color:#A96800; }

.featured-products-section .product-description{
    min-height:45px;
    margin:0 0 15px;
    color:#6F6A61;
    font-size:13px;
    line-height:1.7;
}

.featured-products-section .product-price{
    min-height:30px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

.featured-products-section .regular-price,
.featured-products-section .sale-price{
    color:#A96800;
    font-family:'Poppins',sans-serif;
    font-size:19px;
    font-weight:700;
}

.featured-products-section .old-price{ color:#999; font-size:14px; text-decoration:line-through; }

.featured-products-section .product-shop-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    height:54px;
    margin-top:auto;
    padding:12px 18px;
    border-radius:13px;
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A,#D89B00);
    color:#17130D !important;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:700;
    text-decoration:none !important;
    box-shadow:0 8px 22px rgba(212,160,23,.15);
    transition:transform .3s ease,box-shadow .3s ease;
}

.featured-products-section .product-shop-btn:hover{
    transform:translateY(-3px);
    color:#17130D !important;
    box-shadow:0 14px 30px rgba(212,160,23,.28);
}

.featured-products-section .product-unavailable{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:54px;
    border-radius:13px;
    background:#F1EFEB;
    color:#777;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:600;
}

.featured-products-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:45px;
}

.featured-products-view-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 28px;
    border-radius:14px;
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A,#D89B00);
    color:#17130D !important;
    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:700;
    line-height:1;
    text-decoration:none !important;
    box-shadow:0 10px 28px rgba(169,104,0,.18);
    transition:transform .3s ease,box-shadow .3s ease;
}

.featured-products-view-all:hover{
    color:#17130D !important;
    text-decoration:none !important;
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(169,104,0,.28);
}

.featured-products-view-all i{ transition:transform .3s ease; }
.featured-products-view-all:hover i{ transform:translateX(4px); }

.featured-products-empty{
    max-width:550px;
    margin:45px auto 0;
    padding:55px 30px;
    text-align:center;
    background:#FFFFFF;
    border:1px solid rgba(23,19,13,.08);
    border-radius:24px;
    box-shadow:0 15px 45px rgba(23,19,13,.07);
}

.featured-products-empty-icon{
    width:75px;
    height:75px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(212,160,23,.10);
    color:#A96800;
    font-size:28px;
}

.featured-products-empty h3{
    margin-bottom:10px;
    font-family:'Poppins',sans-serif;
    font-size:23px;
    font-weight:700;
    color:#17130D;
}

.featured-products-empty p{ margin-bottom:22px; color:#6F6A61; font-size:14px; }

@media(max-width:991.98px){
    .featured-products-section{ padding:90px 0; }
    .featured-products-section .section-title{ font-size:38px; }
    .featured-products-section .product-image{ height:280px; }
}

@media(max-width:767.98px){
    .featured-products-section{ padding:75px 0; }
    .featured-products-section .section-heading{ padding:0 20px; }
    .featured-products-section .section-title{ font-size:34px; }
    .featured-products-section .section-description{ font-size:16px; }
    .featured-products-section .product-image{ height:300px; }
    .featured-products-section .product-card{ border-radius:20px; }
    .featured-products-section .product-title{ min-height:auto; font-size:18px; }
    .featured-products-section .product-description{ min-height:auto; }
}

@media(max-width:576px){
    .featured-products-section{ padding:65px 0; }
    .featured-products-section .section-title{ font-size:30px; }
    .featured-products-section .product-image{ height:280px; }
    .featured-products-section .product-content{ padding:22px 20px 24px; }
    .featured-products-section .regular-price,
    .featured-products-section .sale-price{ font-size:18px; }
}
/* =====================================================
                    ACTIVE OFFERS
              PREMIUM GOLD / BLACK THEME
===================================================== */

.active-offers-section{
    position:relative;
    padding:110px 0;
    background:radial-gradient(circle at 8% 15%,rgba(212,160,23,.055),transparent 28%),radial-gradient(circle at 92% 85%,rgba(169,104,0,.045),transparent 30%),#F8F6F1;
    overflow:hidden;
}

.active-offers-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(212,160,23,.07),transparent 70%);
    top:-200px;
    left:-180px;
    pointer-events:none;
}

.active-offers-section::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(169,104,0,.05),transparent 70%);
    right:-180px;
    bottom:-200px;
    pointer-events:none;
}

.active-offers-section .section-heading,
.active-offers-section .row,
.active-offers-footer,
.active-offers-empty{ position:relative; z-index:2; }

.active-offers-section .section-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 20px;
    margin-bottom:20px;
    border-radius:50px;
    background:rgba(212,160,23,.09);
    border:1px solid rgba(212,160,23,.20);
    color:#A96800;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.active-offers-section .section-title{
    margin:0 0 18px;
    font-family:'Poppins',sans-serif;
    font-size:42px;
    font-weight:800;
    line-height:1.2;
    color:#17130D;
}

.active-offers-section .section-title span{
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A,#D89B00);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.active-offers-section .section-description{
    margin:0;
    color:#6F6A61;
    font-size:17px;
    line-height:1.8;
}

.active-offers-section .row{ align-items:stretch; margin-top:45px; }
.active-offers-section .row > div{ display:flex; }

.active-offer-card{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    background:#FFFFFF;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(23,19,13,.08);
    box-shadow:0 15px 45px rgba(23,19,13,.07);
    transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}

.active-offer-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    z-index:5;
    background:linear-gradient(90deg,#A96800,#D89B00,#FFD76A,#D89B00,#A96800);
    transform:scaleX(.25);
    transform-origin:center;
    transition:transform .4s ease;
}

.active-offer-card:hover{
    transform:translateY(-10px);
    border-color:rgba(212,160,23,.28);
    box-shadow:0 28px 65px rgba(23,19,13,.12);
}

.active-offer-card:hover::before{ transform:scaleX(1); }

.active-offer-top{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:28px 26px 10px;
}

.active-offer-icon{
    width:58px;
    height:58px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A);
    color:#17130D;
    font-size:23px;
    box-shadow:0 10px 25px rgba(169,104,0,.18);
}

.active-offer-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 13px;
    border-radius:50px;
    background:rgba(212,160,23,.10);
    border:1px solid rgba(212,160,23,.20);
    color:#A96800;
    font-family:'Poppins',sans-serif;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.active-offer-content{
    position:relative;
    flex:1;
    padding:18px 26px 25px;
}

.active-offer-title{
    margin:0 0 12px;
    color:#17130D;
    font-family:'Poppins',sans-serif;
    font-size:22px;
    font-weight:700;
    line-height:1.35;
}

.active-offer-description{
    min-height:48px;
    margin:0 0 20px;
    color:#6F6A61;
    font-size:14px;
    line-height:1.75;
}

.active-offer-rule{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:18px;
    padding:15px;
    border-radius:15px;
    background:#F8F6F1;
    border:1px solid rgba(216,155,0,.10);
}

.active-offer-rule-icon{
    width:42px;
    height:42px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(212,160,23,.13);
    color:#A96800;
    font-size:17px;
}

.active-offer-rule-label{
    display:block;
    margin-bottom:2px;
    color:#8A847A;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.active-offer-rule strong{
    display:block;
    color:#17130D;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:700;
}

.active-offer-info{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-bottom:20px;
    color:#6F6A61;
    font-size:12px;
    line-height:1.6;
}

.active-offer-info i{ flex-shrink:0; margin-top:3px; color:#A96800; }

.active-offer-gifts{ margin-top:5px; }

.active-offer-gifts-title{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:12px;
    color:#17130D;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:700;
}

.active-offer-gifts-title i{ color:#D89B00; }

.active-offer-gift-list{ display:flex; flex-direction:column; gap:10px; }

.active-offer-gift{
    display:flex;
    align-items:center;
    gap:11px;
    padding:9px;
    border-radius:13px;
    background:#FFFFFF;
    border:1px solid #EEE9DE;
}

.active-offer-gift-image{
    width:48px;
    height:48px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:10px;
    background:#F4F1EA;
    color:#A96800;
    font-size:18px;
}

.active-offer-gift-image img{ width:100%; height:100%; display:block; object-fit:cover; }

.active-offer-gift-details{ min-width:0; }

.active-offer-gift-details span{
    display:block;
    overflow:hidden;
    color:#17130D;
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.active-offer-gift-details small{ display:block; margin-top:3px; color:#8A847A; font-size:11px; }

.active-offer-footer{ padding:0 26px 26px; margin-top:auto; }

.active-offer-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    height:52px;
    padding:12px 18px;
    border-radius:13px;
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A,#D89B00);
    color:#17130D !important;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:700;
    text-decoration:none !important;
    box-shadow:0 8px 22px rgba(212,160,23,.15);
    transition:transform .3s ease,box-shadow .3s ease;
}

.active-offer-btn:hover{
    transform:translateY(-3px);
    color:#17130D !important;
    text-decoration:none !important;
    box-shadow:0 14px 30px rgba(212,160,23,.28);
}

.active-offer-btn i,
.active-offers-view-all i{ transition:transform .3s ease; }
.active-offer-btn:hover i,
.active-offers-view-all:hover i{ transform:translateX(4px); }

.active-offers-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:45px;
}

.active-offers-view-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 28px;
    border-radius:14px;
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A,#D89B00);
    color:#17130D !important;
    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:700;
    line-height:1;
    text-decoration:none !important;
    box-shadow:0 10px 28px rgba(169,104,0,.18);
    transition:transform .3s ease,box-shadow .3s ease;
}

.active-offers-view-all:hover{
    color:#17130D !important;
    text-decoration:none !important;
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(169,104,0,.28);
}

.active-offers-empty{
    max-width:550px;
    margin:45px auto 0;
    padding:55px 30px;
    text-align:center;
    background:#FFFFFF;
    border:1px solid rgba(23,19,13,.08);
    border-radius:24px;
    box-shadow:0 15px 45px rgba(23,19,13,.07);
}

.active-offers-empty-icon{
    width:75px;
    height:75px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(212,160,23,.10);
    color:#A96800;
    font-size:28px;
}

.active-offers-empty h3{
    margin-bottom:10px;
    color:#17130D;
    font-family:'Poppins',sans-serif;
    font-size:23px;
    font-weight:700;
}

.active-offers-empty p{ margin-bottom:22px; color:#6F6A61; font-size:14px; line-height:1.7; }

.active-offers-empty-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 22px;
    border-radius:13px;
    background:linear-gradient(135deg,#A96800,#D89B00,#FFD76A);
    color:#17130D !important;
    font-size:13px;
    font-weight:700;
    text-decoration:none !important;
}

@media(max-width:991.98px){
    .active-offers-section{ padding:90px 0; }
    .active-offers-section .section-title{ font-size:38px; }
}

@media(max-width:767.98px){
    .active-offers-section{ padding:75px 0; }
    .active-offers-section .section-heading{ padding:0 20px; }
    .active-offers-section .section-title{ font-size:34px; }
    .active-offers-section .section-description{ font-size:16px; }
    .active-offer-card{ border-radius:20px; }
    .active-offer-top{ padding:24px 22px 8px; }
    .active-offer-content{ padding:16px 22px 22px; }
    .active-offer-footer{ padding:0 22px 22px; }
    .active-offer-title{ font-size:21px; }
}

@media(max-width:576px){
    .active-offers-section{ padding:65px 0; }
    .active-offers-section .section-title{ font-size:30px; }
    .active-offer-icon{ width:52px; height:52px; border-radius:15px; font-size:21px; }
    .active-offer-badge{ padding:6px 10px; font-size:9px; }
    .active-offer-title{ font-size:20px; }
    .active-offer-description{ min-height:auto; }
    .active-offers-footer{ margin-top:35px; }
}
/*==================================
Why Choose STAIRS
==================================*/

.why-choose{

    background:#FFFFFF;

    padding:100px 0;

}


/*==================================
Winner Rule
==================================*/

.winner-rule{

    max-width:900px;

    margin:40px auto 20px;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #F5C75A,
            #D89B00,
            #A96800
        );

    color:#17130D;

    padding:18px 30px;

    border-radius:50px;

    text-align:center;

    font-size:17px;

    font-weight:600;

    box-shadow:
        0 12px 30px
        rgba(216,155,0,.18);

}


/*==================================
Feature Cards
==================================*/

.feature-card{

    background:#FFFFFF;

    border-radius:22px;

    padding:35px;

    text-align:center;

    height:100%;

    border:1px solid #EEE9DE;

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

    box-shadow:
        0 12px 35px
        rgba(23,19,13,.06);

    position:relative;

    overflow:hidden;

}


/* Subtle gold glow */

.feature-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:
        rgba(216,155,0,.06);

    top:-90px;

    right:-90px;

    transition:.4s;

}


/* Hover */

.feature-card:hover{

    transform:translateY(-10px);

    border-color:
        rgba(216,155,0,.30);

    box-shadow:
        0 20px 50px
        rgba(216,155,0,.13);

}


.feature-card:hover::before{

    transform:scale(1.25);

}


/*==================================
Feature Icon
==================================*/

.feature-icon{

    width:80px;

    height:80px;

    margin:
        auto auto 25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A
        );

    color:#17130D;

    font-size:30px;

    box-shadow:
        0 12px 30px
        rgba(216,155,0,.22);

    position:relative;

    z-index:1;

    transition:.4s;

}


.feature-card:hover .feature-icon{

    transform:
        translateY(-3px)
        scale(1.08);

    box-shadow:
        0 16px 35px
        rgba(216,155,0,.30);

}


/*==================================
Feature Heading
==================================*/

.feature-card h4{

    font-size:22px;

    font-weight:700;

    margin-bottom:15px;

    color:#17130D;

}


/*==================================
Feature Description
==================================*/

.feature-card p{

    color:#6F6A61;

    line-height:1.8;

}


/*==================================
Statistics
==================================*/

.statistics-section{

    background:
        #F7F5F0;

    padding:100px 0;

}


/*==================================
Statistics Cards
==================================*/

.stats-card{

    background:#FFFFFF;

    border-radius:22px;

    padding:40px 25px;

    text-align:center;

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

    box-shadow:
        0 15px 40px
        rgba(23,19,13,.06);

    border:
        1px solid #EEE9DE;

    height:100%;

}


/* Hover */

.stats-card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 60px
        rgba(216,155,0,.13);

    border-color:
        rgba(216,155,0,.28);

}


/*==================================
Statistics Icon
==================================*/

.stats-icon{

    width:80px;

    height:80px;

    margin:
        auto auto 25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A
        );

    color:#17130D;

    font-size:30px;

    box-shadow:
        0 12px 30px
        rgba(216,155,0,.20);

    transition:.4s;

}


.stats-card:hover .stats-icon{

    transform:
        rotate(-6deg)
        scale(1.08);

    box-shadow:
        0 16px 35px
        rgba(216,155,0,.28);

}


/*==================================
Statistics Number
==================================*/

.stats-card h3{

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;

    color:#B87900;

}


/*==================================
Statistics Description
==================================*/

.stats-card p{

    font-size:17px;

    color:#6F6A61;

    margin:0;

}


/*==================================
Responsive
==================================*/

@media(max-width:768px){

    .why-choose{

        padding:75px 0;

    }

    .statistics-section{

        padding:75px 0;

    }

    .winner-rule{

        border-radius:20px;

        font-size:15px;

        padding:15px 20px;

    }

    .feature-card{

        padding:30px 25px;

    }

    .stats-card{

        padding:35px 20px;

    }

    .stats-card h3{

        font-size:36px;

    }

}
/*==================================
                FAQ
==================================*/

.faq-section{

    background:#F7F5F0;

    padding:100px 0;

}


/*==================================
        FAQ ACCORDION ITEM
==================================*/

.faq-section .accordion-item{

    border:1px solid #EEE9DE;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:20px;

    background:#FFFFFF;

    box-shadow:
        0 10px 35px
        rgba(23,19,13,.05);

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

}


/* Hover */

.faq-section .accordion-item:hover{

    transform:translateY(-3px);

    border-color:
        rgba(216,155,0,.25);

    box-shadow:
        0 15px 40px
        rgba(216,155,0,.09);

}


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

.faq-section .accordion-button{

    position:relative;

    background:#FFFFFF;

    color:#17130D;

    font-family:'Inter',sans-serif;

    font-weight:600;

    font-size:17px;

    padding:22px 25px;

    box-shadow:none;

    transition:
        background .3s ease,
        color .3s ease;

}


/*==================================
        FAQ BUTTON ICON
==================================*/

.faq-section .accordion-button::after{

    background-size:18px;

    transition:
        transform .3s ease;

}


/*==================================
        OPEN FAQ
==================================*/

.faq-section .accordion-button:not(.collapsed){

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #F5C75A
        );

    color:#17130D;

    box-shadow:none;

}


/* Gold accordion arrow */

.faq-section
.accordion-button:not(.collapsed)::after{

    filter:
        brightness(0);

}


/*==================================
        FOCUS
==================================*/

.faq-section .accordion-button:focus{

    box-shadow:
        0 0 0 3px
        rgba(216,155,0,.12);

    border-color:
        rgba(216,155,0,.25);

}


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

.faq-section .accordion-body{

    background:#FFFFFF;

    font-size:15px;

    color:#6F6A61;

    line-height:1.8;

    padding:25px;

    border-top:
        1px solid #F0EBE2;

}


/*==================================
        FAQ BODY STRONG
==================================*/

.faq-section .accordion-body strong{

    color:#17130D;

}


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

@media(max-width:768px){

    .faq-section{

        padding:75px 0;

    }

    .faq-section .accordion-button{

        font-size:15px;

        padding:18px 20px;

    }

    .faq-section .accordion-body{

        font-size:14px;

        padding:20px;

    }

}
/*==================================
                CTA
==================================*/

.cta-section{

    padding:0;

    background:#F7F5F0;

}


/*==================================
                CTA BOX
==================================*/

.cta-box{

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(245,199,90,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(216,155,0,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #17130D 0%,
            #211B12 50%,
            #0F0D09 100%
        );

    color:#FFFFFF;

    padding:55px 60px;

    border-radius:30px;

    border:1px solid
        rgba(216,155,0,.22);

    box-shadow:
        0 20px 60px
        rgba(23,19,13,.18);

}


/*==================================
        DECORATIVE GOLD CIRCLE
==================================*/

.cta-box::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    top:-190px;

    right:-100px;

    background:
        radial-gradient(
            circle,
            rgba(255,215,106,.16),
            transparent 70%
        );

    pointer-events:none;

}


/*==================================
        SECOND DECORATION
==================================*/

.cta-box::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    bottom:-150px;

    left:-80px;

    border:
        1px solid
        rgba(245,199,90,.12);

    box-shadow:
        0 0 0 30px rgba(216,155,0,.025),
        0 0 0 60px rgba(216,155,0,.018);

    pointer-events:none;

}


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

.cta-box > *{

    position:relative;

    z-index:2;

}


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

.cta-box h2{

    font-size:42px;

    font-weight:700;

    margin:20px 0;

    color:#FFFFFF;

    line-height:1.2;

}


/* Gold emphasis if span is used */

.cta-box h2 span{

    color:#FFD76A;

}


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

.cta-box p{

    font-size:17px;

    color:#D6D1C7;

    opacity:.95;

    max-width:650px;

    line-height:1.8;

}


/*==================================
                CTA TAG
==================================*/

.cta-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:
        rgba(216,155,0,.10);

    border:
        1px solid
        rgba(245,199,90,.25);

    color:#FFD76A;

    padding:10px 20px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

}


/*==================================
                CTA BUTTONS
==================================*/

.cta-buttons{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}


/*==================================
        PRIMARY CTA BUTTON
==================================*/

.cta-box .btn-primary-custom{

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A,
            #D89B00
        );

    color:#17130D;

    border:none;

    box-shadow:
        0 10px 30px
        rgba(216,155,0,.20);

}


/* Hover */

.cta-box .btn-primary-custom:hover{

    color:#11100E;

    transform:
        translateY(-4px);

    box-shadow:
        0 16px 38px
        rgba(216,155,0,.32);

}


/*==================================
        SECONDARY CTA BUTTON
==================================*/

.cta-box .btn-secondary-custom{

    background:
        transparent;

    color:#FFD76A;

    border:
        1px solid
        rgba(245,199,90,.35);

}


/* Hover */

.cta-box .btn-secondary-custom:hover{

    background:
        rgba(216,155,0,.10);

    color:#FFFFFF;

    border-color:#FFD76A;

    transform:
        translateY(-3px);

}


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

@media(max-width:768px){

    .cta-section{

        padding:0;

    }

    .cta-box{

        padding:40px 30px;

        text-align:center;

        border-radius:24px;

    }

    .cta-box h2{

        font-size:30px;

    }

    .cta-box p{

        font-size:15px;

        margin-left:auto;

        margin-right:auto;

    }

    .cta-buttons{

        width:100%;

    }

}/*==================================================
                STAIRS FOOTER
        PREMIUM GOLD / BLACK THEME
==================================================*/

.footer{

    position:relative;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(216,155,0,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(255,215,106,.06),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #17130D 0%,
            #100E0A 50%,
            #0B0A08 100%
        );

    color:#fff;

    padding:80px 0 0;

    width:100% !important;

    margin-top:100px;

    border-top:
        1px solid
        rgba(216,155,0,.20);

    overflow:hidden;

}


/*==================================================
            DECORATIVE GOLD LINE
==================================================*/

.footer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #A96800 20%,
            #FFD76A 50%,
            #A96800 80%,
            transparent 100%
        );

    opacity:.65;

}


/*==================================================
                FOOTER LOGO
==================================================*/

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

    text-decoration:none;

}


/* Logo */

.footer-logo img{

    width:65px;

    height:65px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,200,65,.35)
        )
        drop-shadow(
            0 5px 12px
            rgba(0,0,0,.35)
        );

    transition:.35s ease;

}


/* Logo hover */

.footer-logo:hover img{

    transform:scale(1.06);

    filter:
        drop-shadow(
            0 0 14px
            rgba(255,200,65,.55)
        )
        drop-shadow(
            0 6px 15px
            rgba(0,0,0,.4)
        );

}


/*==================================================
                LOGO NAME
==================================================*/

.footer-logo span{

    font-family:'Poppins',sans-serif;

    font-size:38px;

    font-weight:800;

    letter-spacing:1px;

    color:#FFD76A;

    text-shadow:
        0 0 18px
        rgba(245,199,90,.10);

}


/*==================================================
                FOOTER ABOUT
==================================================*/

.footer-about{

    line-height:1.9;

    color:#CFC8BA;

    margin-bottom:30px;

    max-width:430px;

}


/*==================================================
                FOOTER HEADINGS
==================================================*/

.footer h5{

    color:#FFD76A;

    margin-bottom:25px;

    font-weight:700;

    font-family:'Poppins',sans-serif;

    font-size:18px;

}


/*==================================================
                FOOTER LIST
==================================================*/

.footer ul{

    list-style:none;

    padding:0;

    margin:0;

}


.footer ul li{

    margin-bottom:14px;

}


/*==================================================
                FOOTER LINKS
==================================================*/

.footer ul li a{

    color:#D6D1C7;

    text-decoration:none;

    transition:.3s ease;

    display:inline-block;

}


.footer ul li a:hover{

    color:#FFD76A;

    padding-left:6px;

}


/*==================================================
                CONTACT
==================================================*/

.footer-contact li{

    display:flex;

    gap:12px;

    align-items:flex-start;

    color:#D6D1C7;

}


.footer-contact i{

    color:#D89B00;

    margin-top:4px;

}


/*==================================================
                SOCIAL ICONS
==================================================*/

.footer-social{

    display:flex;

    gap:12px;

}


.footer-social a{

    width:45px;

    height:45px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        rgba(216,155,0,.08);

    border:
        1px solid
        rgba(245,199,90,.20);

    color:#FFD76A;

    transition:.35s ease;

    text-decoration:none;

}


.footer-social a:hover{

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A
        );

    color:#17130D;

    border-color:transparent;

    transform:
        translateY(-5px);

    box-shadow:
        0 10px 25px
        rgba(216,155,0,.22);

}


/*==================================================
                FOOTER BOTTOM
==================================================*/

.footer-bottom{

    border-top:
        1px solid
        rgba(255,255,255,.08);

    margin-top:60px;

    padding:25px 0;

    color:#AFA89C;

}


/*==================================================
            FOOTER BOTTOM LINKS
==================================================*/

.footer-bottom a{

    color:#CFC8BA;

    text-decoration:none;

    margin:0 8px;

    transition:.3s ease;

}


.footer-bottom a:hover{

    color:#FFD76A;

}


/*==================================================
                GOLD ACCENT
==================================================*/

.footer-bottom strong{

    color:#FFD76A;

}


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

@media(max-width:991px){

    .footer{

        text-align:center;

    }


    .footer-logo{

        justify-content:center;

    }


    .footer-about{

        margin-left:auto;

        margin-right:auto;

    }


    .footer-social{

        justify-content:center;

    }


    .footer-contact li{

        justify-content:center;

    }

}


@media(max-width:576px){

    .footer{

        padding-top:60px;

    }


    .footer-logo img{

        width:55px;

        height:55px;

    }


    .footer-logo span{

        font-size:32px;

    }


    .footer-bottom{

        margin-top:40px;

        padding:20px 15px;

    }

}
/*==================================
SHOP
==================================*/

.page-header{

    padding:150px 0 80px;

    background:#F7F5F0;

}


/*==================================
SHOP SECTION
==================================*/

.shop-section{

    padding:100px 0;

    background:#F7F5F0;

}


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

.product-card{

    background:#FFFFFF;

    border-radius:22px;

    overflow:hidden;

    height:100%;

    box-shadow:
        0 12px 40px rgba(23,19,13,.07);

    border:1px solid rgba(216,155,0,.08);

    transition:.35s;

}


.product-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 60px rgba(169,104,0,.14);

    border-color:
        rgba(216,155,0,.22);

}


/*==================================
FEATURED BADGE
==================================*/

.featured-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A,
            #D89B00
        );

    color:#17130D;

    padding:7px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    box-shadow:
        0 6px 18px rgba(169,104,0,.18);

}


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

.product-body h5{

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

    color:#17130D;

}


.product-body p{

    color:#6F6A61;

    margin-bottom:20px;

    min-height:72px;

}


/*==================================
PRODUCT STOCK
==================================*/

.product-stock{

    margin-bottom:20px;

}


.in-stock{

    color:#16803A;

    font-weight:600;

}


.out-stock{

    color:#C62828;

    font-weight:600;

}


.product-body .btn-primary-custom{

    width:100%;

}


/*=========================================
        INNER PAGE HEADER
=========================================*/

.inner-page-header{

    position:relative;

    padding:170px 0 110px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #17130D 0%,
            #241C0E 45%,
            #0F0E0C 100%
        );

    color:#fff;

}


/* Gold ambient glow */

.inner-page-header::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:
        rgba(216,155,0,.12);

    top:-120px;

    right:-120px;

    filter:blur(20px);

}


/* Secondary gold glow */

.inner-page-header::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:
        rgba(255,215,106,.08);

    bottom:-120px;

    left:-80px;

    filter:blur(15px);

}


.inner-page-content{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:750px;

    margin:auto;

}


/*==================================
PAGE TAG
==================================*/

.page-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:
        rgba(216,155,0,.14);

    border:
        1px solid rgba(255,215,106,.20);

    color:#FFD76A;

    padding:10px 22px;

    border-radius:50px;

    margin-bottom:25px;

    font-weight:600;

}


.inner-page-content h1{

    font-size:56px;

    font-weight:700;

    margin-bottom:20px;

    color:#FFFFFF;

}


.inner-page-content p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

    color:#E5DED2;

}


/*==================================
RESPONSIVE INNER HEADER
==================================*/

@media(max-width:991px){

    .inner-page-header{

        padding:150px 0 90px;

    }

    .inner-page-content h1{

        font-size:42px;

    }

}


@media(max-width:576px){

    .inner-page-content h1{

        font-size:34px;

    }

    .inner-page-content p{

        font-size:16px;

    }

}


/*=================================
PRODUCT DETAILS
=================================*/

.product-details-section{

    padding:140px 0 100px;

    background:#F7F5F0;

}


.product-image-card{

    background:#FFFFFF;

    border-radius:24px;

    overflow:hidden;

    border:
        1px solid rgba(216,155,0,.08);

    box-shadow:
        0 15px 45px rgba(23,19,13,.07);

}


.product-image-card img{

    width:100%;

    transition:.45s;

}


.product-image-card:hover img{

    transform:scale(1.08);

}


.product-info{

    padding-left:25px;

}


.product-breadcrumb{

    margin-bottom:25px;

}


.product-breadcrumb a{

    color:#6F6A61;

    text-decoration:none;

    transition:.3s;

}


.product-breadcrumb a:hover{

    color:var(--primary);

}


.product-breadcrumb span{

    margin:0 10px;

    color:#A96800;

}


/*==================================
PRODUCT STOCK
==================================*/

.product-stock{

    margin-bottom:25px;

    font-size:18px;

}


/*==================================
PRODUCT DESCRIPTION
==================================*/

.product-description{

    line-height:1.9;

    color:#6F6A61;

    margin-bottom:35px;

}


/*==================================
QUANTITY
==================================*/

.quantity-box{

    margin-bottom:35px;

}


.quantity-selector{

    display:inline-flex;

    align-items:center;

    border:
        2px solid #E5DED2;

    border-radius:50px;

    overflow:hidden;

    background:#FFFFFF;

}


.quantity-selector button{

    width:50px;

    height:50px;

    border:none;

    background:#FFFFFF;

    color:#17130D;

    font-size:22px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}


.quantity-selector button:hover{

    background:#FFF4D6;

    color:var(--gold-dark);

}


.quantity-selector input{

    width:70px;

    text-align:center;

    border:none;

    background:#FFFFFF;

    color:#17130D;

    font-size:20px;

    font-weight:700;

}


.quantity-selector input:focus{

    outline:none;

}


/*==================================
ADD CART BUTTON
==================================*/

.add-cart-btn{

    width:100%;

    height:60px;

    font-size:18px;

}


/*==================================================
                SHOP PRODUCTS
==================================================*/

.shop-products{

    padding:100px 0;

    background:#F7F5F0;

}


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

.product-card{

    background:#FFFFFF;

    border-radius:22px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

    box-shadow:
        0 15px 45px rgba(23,19,13,.07);

    border:
        1px solid rgba(216,155,0,.08);

    transition:.35s;

}


.product-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 60px rgba(169,104,0,.13);

    border-color:
        rgba(216,155,0,.20);

}


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

.product-image{

    height:260px;

    overflow:hidden;

    background:#F3F0E9;

    position:relative;

}


.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}


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

    transform:scale(1.08);

}


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

.product-body{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;

}


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

.product-title{

    font-size:26px;

    font-weight:700;

    line-height:1.35;

    min-height:72px;

    margin-bottom:18px;

    color:#17130D;

}


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

.product-price{

    font-size:24px;

    font-weight:700;

    color:var(--gold-dark);

    white-space:nowrap;

    min-height:40px;

    margin-bottom:25px;

}


/*==================================
PRODUCT FOOTER
==================================*/

.product-footer{

    margin-top:auto;

}


.product-footer .btn-secondary-custom{

    width:100%;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

}


/*==================================
PRODUCT BUTTON OVERRIDE
==================================*/

.product-footer .btn-secondary-custom{

    background:#FFFFFF;

    color:var(--gold-dark);

    border:
        2px solid #D89B00;

    transition:.35s;

}


.product-footer .btn-secondary-custom:hover{

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A,
            #D89B00
        );

    color:#17130D;

    border-color:transparent;

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(169,104,0,.20);

}


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

@media(max-width:768px){

    .page-header{

        padding:120px 0 60px;

    }

    .shop-section,
    .shop-products{

        padding:70px 0;

    }

    .product-info{

        padding-left:0;

        margin-top:35px;

    }

    .product-details-section{

        padding:110px 0 70px;

    }

    .product-title{

        font-size:22px;

    }

    .product-image{

        height:230px;

    }

}


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

@media(max-width:576px){

    .product-body{

        padding:22px;

    }

    .product-title{

        font-size:21px;

        min-height:auto;

    }

    .product-price{

        font-size:22px;

    }

}

/*==================================
WINNERS
==================================*/

.winners-section{

    padding:100px 0;

    background:#F7F5F0;

}


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

.winner-card{

    background:#FFFFFF;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 20px 50px rgba(23,19,13,.08);

    border:
        1px solid rgba(216,155,0,.08);

    transition:.35s;

    height:100%;

}


.winner-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 65px rgba(169,104,0,.15);

    border-color:
        rgba(216,155,0,.20);

}


/*==================================
WINNER IMAGE
==================================*/

.winner-image{

    position:relative;

    height:260px;

    overflow:hidden;

    background:#F3F0E9;

}


.winner-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}


.winner-card:hover .winner-image img{

    transform:scale(1.06);

}


/*==================================
WINNER BADGE
==================================*/

.winner-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A,
            #D89B00
        );

    color:#17130D;

    padding:8px 18px;

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    box-shadow:
        0 7px 20px rgba(169,104,0,.20);

}


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

.winner-body{

    padding:30px;

    text-align:center;

}


.winner-body h4{

    font-size:26px;

    font-weight:700;

    margin-bottom:10px;

    color:#17130D;

}


.winner-body h6{

    color:#A96800;

    font-size:18px;

    margin-bottom:15px;

    font-weight:700;

}


.winner-body p{

    color:#6F6A61;

    margin-bottom:20px;

    line-height:1.7;

}


.winner-date{

    font-size:15px;

    color:#8B8478;

}


/*==================================
CONTACT
==================================*/

.contact-section{

    padding:100px 0;

    background:#FFFFFF;

}


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

.contact-card{

    background:#FFFFFF;

    border-radius:24px;

    padding:50px;

    box-shadow:
        0 20px 50px rgba(23,19,13,.08);

    border:
        1px solid rgba(216,155,0,.08);

}


/*==================================
CONTACT ITEM
==================================*/

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:35px;

}


/*==================================
CONTACT ICON
==================================*/

.contact-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A
        );

    color:#17130D;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    flex-shrink:0;

    box-shadow:
        0 10px 25px rgba(169,104,0,.18);

    transition:.35s;

}


.contact-item:hover .contact-icon{

    transform:
        translateY(-4px)
        scale(1.05);

    box-shadow:
        0 14px 30px rgba(169,104,0,.25);

}


/*==================================
CONTACT TEXT
==================================*/

.contact-item h5{

    font-size:22px;

    margin-bottom:8px;

    color:#17130D;

}


.contact-item p{

    margin:0;

    color:#6F6A61;

    line-height:1.7;

}


/*==================================
SOCIAL LINKS
==================================*/

.social-links{

    margin-top:40px;

}


.social-links h3{

    margin-bottom:25px;

    color:#17130D;

}


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

.social-links a{

    width:55px;

    height:55px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#F7F5F0;

    border:
        1px solid rgba(216,155,0,.12);

    color:#A96800;

    font-size:22px;

    margin:0 10px;

    transition:.35s;

    text-decoration:none;

}


.social-links a:hover{

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A
        );

    color:#17130D;

    border-color:transparent;

    transform:translateY(-5px);

    box-shadow:
        0 12px 28px rgba(169,104,0,.22);

}


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

@media(max-width:768px){

    .winners-section,
    .contact-section{

        padding:70px 0;

    }

    .winner-body{

        padding:25px 20px;

    }

    .contact-card{

        padding:35px 25px;

    }

    .contact-item{

        gap:15px;

    }

    .contact-icon{

        width:55px;

        height:55px;

        font-size:20px;

    }

}


@media(max-width:576px){

    .winner-image{

        height:220px;

    }

    .winner-body h4{

        font-size:22px;

    }

    .social-links a{

        width:48px;

        height:48px;

        font-size:19px;

        margin:0 5px;

    }

}

/*====================================
        ABOUT SECTION
====================================*/

.about-section{

    padding:100px 0;

    background:#F7F5F0;

}


/*====================================
        ABOUT IMAGE
====================================*/

.about-image{

    border-radius:25px;

    overflow:hidden;

    background:#FFFFFF;

    border:1px solid rgba(216,155,0,.10);

    box-shadow:
        0 25px 60px rgba(23,19,13,.09);

    transition:.35s;

}


.about-image img{

    width:100%;

    display:block;

    transition:.4s;

}


.about-image:hover{

    box-shadow:
        0 30px 70px rgba(169,104,0,.16);

    border-color:
        rgba(216,155,0,.20);

}


.about-image:hover img{

    transform:scale(1.05);

}


/*====================================
        SECTION TAG
====================================*/

.section-tag{

    display:inline-block;

    background:#FFF4D6;

    color:#A96800;

    padding:10px 24px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:20px;

    border:
        1px solid rgba(216,155,0,.12);

}


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

.about-section h2{

    font-size:46px;

    font-weight:700;

    line-height:1.25;

    margin-bottom:25px;

    color:#17130D;

}


/* Gold highlight if span is used */

.about-section h2 span{

    color:#D89B00;

}


/*====================================
        ABOUT TEXT
====================================*/

.about-section p{

    color:#6F6A61;

    line-height:1.9;

    margin-bottom:20px;

}


/*====================================
        ABOUT FEATURES
====================================*/

.about-features{

    margin-top:35px;

}


.about-feature{

    display:flex;

    align-items:center;

    margin-bottom:18px;

}


/*====================================
        FEATURE ICON
====================================*/

.about-feature i{

    width:32px;

    height:32px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#17130D;

    background:
        linear-gradient(
            135deg,
            #D89B00,
            #FFD76A
        );

    margin-right:15px;

    font-size:14px;

    flex-shrink:0;

    box-shadow:
        0 5px 15px rgba(169,104,0,.15);

}


/*====================================
        FEATURE TEXT
====================================*/

.about-feature span{

    font-weight:500;

    color:#332D23;

}


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

@media(max-width:991px){

    .about-section{

        padding:80px 0;

    }

    .about-section h2{

        font-size:40px;

    }

}


@media(max-width:768px){

    .about-section{

        padding:70px 0;

    }

    .about-section h2{

        font-size:34px;

    }

    .about-image{

        margin-bottom:40px;

    }

}


@media(max-width:576px){

    .about-section h2{

        font-size:30px;

    }

    .about-section p{

        font-size:15px;

    }

}

/*====================================
        MISSION • VISION • VALUES
====================================*/

.mission-vision-section{

    padding:100px 0;

    background:#FFFFFF;

}


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

.section-heading{

    max-width:750px;

    margin:0 auto 60px;

}


.section-heading h2{

    font-size:48px;

    font-weight:700;

    margin:20px 0;

    color:#17130D;

}


/* Gold highlight */

.section-heading h2 span{

    color:#D89B00;

}


.section-heading p{

    color:#6F6A61;

    line-height:1.9;

}


/*====================================
        MISSION / VISION / VALUES CARD
====================================*/

.mv-card{

    background:#FFFFFF;

    border-radius:24px;

    padding:45px 35px;

    text-align:center;

    height:100%;

    border:
        1px solid rgba(216,155,0,.10);

    box-shadow:
        0 15px 45px rgba(23,19,13,.07);

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

    position:relative;

    overflow:hidden;

}


/* Subtle gold glow */

.mv-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:
        rgba(216,155,0,.045);

    top:-90px;

    right:-90px;

    transition:.4s;

}


.mv-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 65px rgba(169,104,0,.14);

    border-color:
        rgba(216,155,0,.25);

}


.mv-card:hover::before{

    transform:scale(1.3);

}


/*====================================
        MV ICON
====================================*/

.mv-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A
        );

    color:#17130D;

    font-size:34px;

    position:relative;

    z-index:1;

    box-shadow:
        0 15px 35px rgba(169,104,0,.20);

    transition:.4s;

}


.mv-card:hover .mv-icon{

    transform:
        translateY(-4px)
        scale(1.06);

    box-shadow:
        0 18px 40px rgba(169,104,0,.28);

}


/*====================================
        MV TITLE
====================================*/

.mv-card h3{

    font-size:30px;

    font-weight:700;

    margin-bottom:20px;

    color:#17130D;

}


/*====================================
        MV DESCRIPTION
====================================*/

.mv-card p{

    color:#6F6A61;

    line-height:1.9;

    margin:0;

}


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

@media(max-width:991px){

    .mission-vision-section{

        padding:80px 0;

    }

    .section-heading h2{

        font-size:42px;

    }

}


@media(max-width:768px){

    .mission-vision-section{

        padding:70px 0;

    }

    .section-heading{

        margin-bottom:45px;

    }

    .section-heading h2{

        font-size:36px;

    }

    .mv-card{

        padding:40px 28px;

    }

    .mv-card h3{

        font-size:27px;

    }

}


@media(max-width:576px){

    .section-heading h2{

        font-size:31px;

    }

    .section-heading p{

        font-size:15px;

    }

    .mv-card{

        padding:35px 22px;

    }

    .mv-icon{

        width:80px;

        height:80px;

        font-size:30px;

    }

}
/*==========================================================
                    QUIZ DETAILS
==========================================================*/

.quiz-details{

    margin-top:90px;

    padding-top:70px;

    padding-bottom:100px;

    background:#F7F5F0;

}


/*==========================================================
                    QUIZ TITLE
==========================================================*/

.quiz-title{

    font-size:60px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:20px;

    color:#17130D;

}


.quiz-title span{

    color:#D89B00;

}


/*==========================================================
                    QUIZ DESCRIPTION
==========================================================*/

.quiz-desc{

    font-size:20px;

    color:#6F6A61;

    margin-bottom:35px;

    max-width:650px;

    line-height:1.8;

}


/*==========================================================
                    INFORMATION BOX
==========================================================*/

.info-box{

    display:flex;

    align-items:center;

    gap:20px;

    background:#FFFFFF;

    border-radius:20px;

    padding:24px;

    border:
        1px solid rgba(216,155,0,.08);

    box-shadow:
        0 15px 40px rgba(23,19,13,.07);

    transition:.35s;

    height:100%;

}


.info-box:hover{

    transform:translateY(-6px);

    border-color:
        rgba(216,155,0,.20);

    box-shadow:
        0 22px 50px rgba(169,104,0,.12);

}


/*==========================================================
                    INFORMATION ICON
==========================================================*/

.info-box .icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A
        );

    color:#17130D;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    flex-shrink:0;

    box-shadow:
        0 10px 25px rgba(169,104,0,.18);

}


.info-box span{

    color:#6F6A61;

    display:block;

    margin-bottom:6px;

    font-size:14px;

    font-weight:500;

}


.info-box h5{

    margin:0;

    font-size:26px;

    font-weight:700;

    color:#17130D;

}


/*==========================================================
                    QUIZ SUMMARY
==========================================================*/

.quiz-summary{

    background:
        linear-gradient(
            135deg,
            #17130D 0%,
            #211B12 45%,
            #3A290F 100%
        );

    color:#FFFFFF;

    border-radius:28px;

    padding:45px;

    box-shadow:
        0 25px 60px rgba(23,19,13,.22);

    height:100%;

    position:relative;

    overflow:hidden;

    border:
        1px solid rgba(255,215,106,.15);

}


/* Subtle gold glow */

.quiz-summary::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:
        rgba(216,155,0,.10);

    top:-150px;

    right:-120px;

}


.quiz-summary::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
        rgba(255,215,106,.05);

    bottom:-120px;

    left:-100px;

}


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

.quiz-summary > *{

    position:relative;

    z-index:2;

}


.quiz-summary h3{

    color:#FFD76A;

    font-size:34px;

    font-weight:700;

    margin-bottom:30px;

}


/*==========================================================
                    SUMMARY LIST
==========================================================*/

.quiz-summary ul{

    list-style:none;

    padding:0;

    margin:0;

}


.quiz-summary li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:22px;

    font-size:18px;

    color:#E8E1D5;

    line-height:1.6;

}


.quiz-summary li i{

    color:#FFD76A;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}


/*==========================================================
                    SUMMARY BUTTONS
==========================================================*/

.quiz-summary .btn{

    border-radius:14px;

    font-weight:700;

    transition:.3s;

}


/* Primary action */

.quiz-summary .btn-primary{

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A
        );

    border:none;

    color:#17130D;

}


.quiz-summary .btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(216,155,0,.25);

}


/* Outline button */

.quiz-summary .btn-outline-primary{

    background:#FFFFFF;

    color:#A96800;

    border:none;

}


.quiz-summary .btn-outline-primary:hover{

    background:#FFF4D6;

    color:#A96800;

}


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

@media(max-width:991px){

    .quiz-details{

        margin-top:75px;

        padding-top:60px;

        padding-bottom:80px;

    }

    .quiz-title{

        font-size:48px;

    }

    .quiz-summary{

        margin-top:30px;

    }

}


@media(max-width:768px){

    .quiz-details{

        padding-top:45px;

        padding-bottom:70px;

    }

    .quiz-title{

        font-size:40px;

    }

    .quiz-desc{

        font-size:17px;

    }

    .info-box{

        padding:20px;

    }

    .info-box .icon{

        width:60px;

        height:60px;

        font-size:21px;

    }

    .info-box h5{

        font-size:22px;

    }

    .quiz-summary{

        padding:32px 25px;

        border-radius:22px;

    }

    .quiz-summary h3{

        font-size:29px;

    }

}


@media(max-width:576px){

    .quiz-title{

        font-size:34px;

    }

    .quiz-desc{

        font-size:16px;

    }

    .info-box{

        gap:14px;

    }

    .info-box .icon{

        width:54px;

        height:54px;

        border-radius:15px;

        font-size:19px;

    }

    .info-box h5{

        font-size:20px;

    }

    .quiz-summary{

        padding:28px 20px;

    }

    .quiz-summary li{

        font-size:16px;

    }

}

/*==========================================================
                        RULES
==========================================================*/

.rule-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#FFFFFF;

    padding:28px;

    border-radius:22px;

    height:100%;

    border:
        1px solid rgba(216,155,0,.08);

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

    box-shadow:
        0 10px 30px rgba(23,19,13,.06);

    position:relative;

    overflow:hidden;

}


/*========================================
        SUBTLE GOLD BACKGROUND
========================================*/

.rule-card::before{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    background:
        rgba(216,155,0,.045);

    top:-90px;

    right:-80px;

    transition:.4s;

}


/*========================================
        HOVER
========================================*/

.rule-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(169,104,0,.12);

    border-color:
        rgba(216,155,0,.20);

}


.rule-card:hover::before{

    transform:scale(1.25);

}


/*========================================
        RULE ICON
========================================*/

.rule-card i{

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:#17130D;

    background:
        linear-gradient(
            135deg,
            #A96800,
            #D89B00,
            #FFD76A
        );

    flex-shrink:0;

    position:relative;

    z-index:1;

    box-shadow:
        0 10px 25px rgba(169,104,0,.18);

    transition:.35s;

}


/* Icon hover */

.rule-card:hover i{

    transform:
        rotate(-5deg)
        scale(1.06);

    box-shadow:
        0 14px 30px rgba(169,104,0,.25);

}


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

.rule-card h5{

    margin-bottom:10px;

    font-weight:700;

    color:#17130D;

    position:relative;

    z-index:1;

}


.rule-card p{

    margin:0;

    color:#6F6A61;

    line-height:1.8;

    position:relative;

    z-index:1;

}


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

@media(max-width:576px){

    .rule-card{

        gap:15px;

        padding:22px;

        border-radius:18px;

    }

    .rule-card i{

        width:55px;

        height:55px;

        border-radius:15px;

        font-size:20px;

    }

}


/* =========================================================
   E-COMMERCE SECTION HEADING ALIASES
========================================================= */

.section-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 20px;
    border-radius:50px;
    background:rgba(212,160,23,.09);
    border:1px solid rgba(212,160,23,.20);
    color:#A96800;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:20px;
    text-transform:uppercase;
}

.section-title{
    font-family:'Poppins',sans-serif;
    font-weight:800;
    color:#17130D;
}

.section-description{
    color:#6F6A61;
    line-height:1.8;
}

/* =========================================================
   GLOBAL RESPONSIVE + CONSISTENCY
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Prevent sections from hiding behind fixed navbar */
section[id] {
    scroll-margin-top: 100px;
}

/* =========================================================
   CONTAINER
========================================================= */

@media (max-width: 1199.98px) {

    .hero-title {
        font-size: 52px;
    }

    .hero-right {
        height: 500px;
    }

    .main-logo {
        width: 440px;
    }

    .stairs {
        width: 440px;
        height: 440px;
    }

    .section-title h2,
    .section-heading h2 {
        font-size: 42px;
    }
}

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

@media (max-width: 991.98px) {

    /* Hero */

    .hero {
        min-height: auto;
        padding-top: 130px;
        padding-bottom: 80px;
    }

    .hero-title {
        font-size: 46px;
    }

    .hero-description {
        font-size: 17px;
    }

    .hero-buttons {
        flex-wrap: wrap;
    }

    .hero-right {
        height: auto;
        margin-top: 60px;
    }

    .stairs {
        width: 380px;
        height: 380px;
    }

    .main-logo {
        width: 380px;
    }

    /* Stats */

    .hero-stats {
        gap: 35px;
        margin-top: 50px;
    }

    .stat-item h2 {
        font-size: 34px;
    }

    /* Sections */

    .categories-section,
    .how-it-works,
    .featured-products-section,
    .active-offers-section,
    .why-choose,
    .statistics-section,
    .faq-section,
    .about-section,
    .mission-vision-section,
    .winners-section,
    .contact-section,
    .shop-section,
    .shop-products {
        padding: 80px 0;
    }

    /* Product details */

    .product-info {
        padding-left: 0;
        margin-top: 40px;
    }

    /* Quiz */

    .quiz-title {
        font-size: 46px;
    }

    /* Inner pages */

    .inner-page-content h1 {
        font-size: 46px;
    }

    .page-hero h1 {
        font-size: 46px;
    }
}

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

@media (max-width: 767.98px) {

    /* Hero */

    .hero {
        padding-top: 110px;
        padding-bottom: 70px;
        text-align: center;
    }

    .hero-title {
        font-size: 38px;
    }

    .hero-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .hero-buttons {
        justify-content: center;
        gap: 12px;
    }

    .btn-primary-custom,
    .btn-secondary-custom {
        padding: 14px 25px;
    }

    .hero-stats {
        justify-content: center;
        gap: 25px;
        margin-top: 45px;
        flex-wrap: wrap;
    }

    .stat-item h2 {
        font-size: 30px;
    }

    .hero-right {
        margin-top: 40px;
    }

    .stairs {
        width: 300px;
        height: 300px;
    }

    .main-logo {
        width: 300px;
    }

    /* Floating cards */

    .floating-card {
        padding: 20px;
        border-radius: 16px;
    }

    .card-one {
        top: 20px;
        left: 0;
    }

    .card-two {
        top: 140px;
        right: 0;
    }

    .card-three {
        bottom: 20px;
        left: 30px;
    }

    /* Section headings */

    .section-title h2,
    .section-heading h2 {
        font-size: 34px;
    }

    .section-title p,
    .section-heading p {
        font-size: 16px;
    }

    /* Cards */

    .category-card,
    .step-card,
    .feature-card,
    .active-offer-card,
    .stats-card,
    .mv-card {
        padding: 30px 22px;
    }

    /* Quiz */

    .quiz-title {
        font-size: 38px;
    }

    .quiz-desc {
        font-size: 17px;
    }

    /* FAQ */

    .faq-section .accordion-button {
        font-size: 16px;
        padding: 18px;
    }

    /* CTA */

    .cta-box {
        border-radius: 22px;
        padding: 40px 25px;
    }

    .cta-box h2 {
        font-size: 30px;
    }

    /* Contact */

    .contact-card {
        padding: 30px 22px;
    }

    /* Legal */

    .legal-card {
        padding: 30px 22px;
    }

    /* Product */

    .product-image {
        height: 230px;
    }

    .product-title {
        font-size: 22px;
    }
}

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

@media (max-width: 575.98px) {

    .hero-title {
        font-size: 32px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-custom,
    .btn-secondary-custom {
        width: 100%;
    }

    .hero-stats {
        gap: 20px;
    }

    .stat-item {
        min-width: 90px;
    }

    .stat-item h2 {
        font-size: 26px;
    }

    .stairs,
    .main-logo {
        width: 260px;
    }

    .stairs {
        height: 260px;
    }

    .section-title h2,
    .section-heading h2 {
        font-size: 30px;
    }

    .section-title p,
    .section-heading p {
        font-size: 15px;
    }

    .category-card,
    .step-card,
    .feature-card,
    .active-offer-card,
    .stats-card,
    .mv-card {
        padding: 28px 20px;
    }

    .quiz-title {
        font-size: 32px;
    }

    .countdown {
        font-size: 20px;
    }

    .countdown strong {
        min-width: 48px;
        padding: 9px;
        font-size: 20px;
    }

    .page-hero {
        padding: 130px 0 60px;
    }

    .page-hero h1 {
        font-size: 34px;
    }

    .inner-page-header {
        padding: 130px 0 70px;
    }

    .inner-page-content h1 {
        font-size: 34px;
    }
}

/* =========================================================
   STAIRS PREMIUM SHOP
========================================================= */

.shop-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0 115px;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(212,160,23,.09),
            transparent 26%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(154,104,0,.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f9f7f2 0%,
            var(--bg) 100%
        );
}


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

.shop-section .section-title {
    position: relative;
    z-index: 2;

    max-width: 720px;

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

.shop-section .section-title > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;

    color: var(--gold-dark);

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

    letter-spacing: 4px;
    text-transform: uppercase;
}

.shop-section .section-title > span::before,
.shop-section .section-title > span::after {
    content: "";

    width: 32px;
    height: 1px;

    background: var(--primary);
}

.shop-section .section-title h2 {
    margin: 0 0 15px;

    font-family: "Poppins", sans-serif;

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

    font-weight: 800;

    color: var(--dark);
}

.shop-section .section-title h2::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin: 17px auto 0;

    border-radius: 10px;

    background: var(--gradient);
}

.shop-section .section-title p {
    max-width: 570px;

    margin: 18px auto 0;

    color: var(--gray);

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   CATEGORY NAVIGATION
========================================================= */

.shop-category-wrapper {
    position: relative;
    z-index: 5;

    margin: 50px auto 30px;

    padding: 7px;

    max-width: 100%;

    border: 1px solid var(--border);
    border-radius: 15px;

    background: rgba(255,255,255,.72);

    box-shadow:
        0 10px 35px rgba(23,23,23,.045);

    backdrop-filter: blur(12px);
}

.shop-category-nav {
    display: flex;
    align-items: center;

    gap: 6px;

    overflow-x: auto;

    scrollbar-width: none;
}

.shop-category-nav::-webkit-scrollbar {
    display: none;
}

.shop-category-link {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 48px;

    padding: 10px 18px;

    border-radius: 11px;

    color: var(--gray);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.shop-category-link:hover {
    color: var(--dark);

    background: rgba(212,160,23,.09);

    transform: translateY(-1px);
}

.shop-category-link.active {
    color: var(--dark);

    background: var(--gradient);

    box-shadow:
        0 7px 18px rgba(212,160,23,.22);
}

.shop-category-link i {
    font-size: 12px;
}

.shop-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 21px;
    height: 21px;

    padding: 0 6px;

    border-radius: 50px;

    background: rgba(23,23,23,.07);

    font-size: 10px;
}

.shop-category-link.active .shop-category-count {
    background: rgba(23,23,23,.14);
}


/* =========================================================
   SHOP TOOLBAR
========================================================= */

.shop-toolbar {
    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 25px;

    margin-bottom: 30px;
}

.shop-results-count {
    color: var(--gray);

    font-size: 13px;
}

.shop-results-count strong {
    color: var(--dark);

    font-weight: 800;
}


/* =========================================================
   SEARCH
========================================================= */

.shop-search {
    position: relative;

    width: 420px;
    max-width: 100%;

    justify-self: center;
}

.shop-search i {
    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-50%);

    color: #8d857a;

    font-size: 14px;

    z-index: 2;
}

.shop-search input {
    width: 100%;

    height: 52px;

    padding: 0 18px 0 47px;

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

    border-radius: 14px;

    outline: none;

    background: rgba(255,255,255,.95);

    color: var(--dark);

    font-size: 13px;

    box-shadow:
        0 5px 20px rgba(23,23,23,.035);

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

.shop-search input::placeholder {
    color: #9b948a;
}

.shop-search input:focus {
    border-color: rgba(212,160,23,.65);

    box-shadow:
        0 0 0 4px rgba(212,160,23,.09),
        0 8px 25px rgba(23,23,23,.06);
}


/* =========================================================
   SORT
========================================================= */

.shop-sort {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    justify-self: end;
}

.shop-sort label {
    margin: 0;

    color: #81796f;

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


/* =========================================================
   CUSTOM SORT DROPDOWN
========================================================= */

.shop-sort-dropdown {
    position: relative;

    min-width: 265px;
}


/* Trigger */

.shop-sort-trigger {
    width: 100%;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 0 17px;

    border: 1px solid rgba(212,160,23,.48);

    border-radius: 14px;

    background: #fff;

    color: var(--dark);

    font-family: "Inter", sans-serif;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 20px rgba(23,23,23,.045);

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

.shop-sort-trigger:hover {
    border-color: var(--primary);

    box-shadow:
        0 8px 25px rgba(23,23,23,.08),
        0 0 0 4px rgba(212,160,23,.06);
}

.shop-sort-dropdown.open .shop-sort-trigger {
    border-color: var(--primary);

    box-shadow:
        0 0 0 4px rgba(212,160,23,.10),
        0 8px 25px rgba(23,23,23,.08);
}

.shop-sort-trigger-content {
    display: flex;
    align-items: center;

    gap: 10px;
}

.shop-sort-trigger-content > i {
    width: 25px;
    height: 25px;

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

    border-radius: 7px;

    background: rgba(212,160,23,.11);

    color: var(--gold-dark);

    font-size: 11px;
}

.shop-sort-arrow {
    color: var(--gold-dark);

    font-size: 13px;

    transition:
        transform .3s ease;
}

.shop-sort-dropdown.open .shop-sort-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   SORT MENU
========================================================= */

.shop-sort-menu {
    position: absolute;

    z-index: 100;

    top: calc(100% + 9px);
    left: 0;
    right: 0;

    padding: 7px;

    border: 1px solid rgba(228,222,210,.95);

    border-radius: 14px;

    background: rgba(255,255,255,.98);

    box-shadow:
        0 18px 45px rgba(23,23,23,.13),
        0 5px 15px rgba(23,23,23,.05);

    backdrop-filter: blur(15px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-8px)
        scale(.98);

    transform-origin: top center;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}

.shop-sort-dropdown.open .shop-sort-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* Options */

.shop-sort-option {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 11px 12px;

    border: 0;

    border-radius: 9px;

    background: transparent;

    color: var(--gray);

    font-family: "Inter", sans-serif;

    font-size: 12px;
    font-weight: 650;

    text-align: left;

    cursor: pointer;

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

.shop-sort-option-left {
    display: flex;
    align-items: center;

    gap: 11px;
}

.shop-sort-option-left i {
    width: 25px;
    height: 25px;

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

    border-radius: 7px;

    background: #f4f1eb;

    color: #776f65;

    font-size: 10px;

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

.shop-sort-option:hover {
    background: rgba(212,160,23,.09);

    color: var(--dark);

    transform: translateX(2px);
}

.shop-sort-option:hover .shop-sort-option-left i {
    background: rgba(212,160,23,.15);

    color: var(--gold-dark);
}


/* Selected option */

.shop-sort-option.selected {
    background:
        linear-gradient(
            135deg,
            rgba(212,160,23,.13),
            rgba(245,199,90,.08)
        );

    color: var(--gold-dark);
}

.shop-sort-option.selected .shop-sort-option-left i {
    background: var(--gradient);

    color: var(--dark);
}

.shop-sort-check {
    opacity: 0;

    color: var(--gold-dark);

    font-size: 11px;
}

.shop-sort-option.selected .shop-sort-check {
    opacity: 1;
}


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

.shop-section .product-card {
    position: relative;

    height: 100%;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: rgba(255,255,255,.96);

    border: 1px solid rgba(228,222,210,.9);

    border-radius: 22px;

    box-shadow:
        0 8px 25px rgba(23,23,23,.045);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease,
        border-color .4s ease;
}

.shop-section .product-card::before {
    content: "";

    position: absolute;
    z-index: 10;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background: var(--gradient);

    transition: width .5s ease;
}

.shop-section .product-card:hover::before {
    width: 100%;
}

.shop-section .product-card:hover {
    transform: translateY(-10px);

    border-color: rgba(212,160,23,.38);

    box-shadow:
        0 25px 55px rgba(23,23,23,.11),
        0 8px 25px rgba(212,160,23,.06);
}


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

.shop-section .product-image {
    position: relative;

    height: 300px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #ffffff,
            #f0ede6
        );
}

.shop-section .product-image img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .75s cubic-bezier(.2,.8,.2,1);
}

.shop-section .product-card:hover .product-image img {
    transform: scale(1.075);
}


/* =========================================================
   FEATURED BADGE
========================================================= */

.shop-section .featured-badge {
    position: absolute;
    z-index: 6;

    top: 17px;
    left: 17px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 9px 14px;

    border-radius: 50px;

    background: var(--dark);

    color: var(--gold-light);

    border: 1px solid rgba(245,199,90,.3);

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

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

    box-shadow:
        0 7px 20px rgba(0,0,0,.18);
}


/* =========================================================
   WISHLIST
========================================================= */

.shop-section .product-wishlist {
    position: absolute;
    z-index: 7;

    top: 16px;
    right: 16px;

    width: 44px;
    height: 44px;

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

    border: 1px solid rgba(228,222,210,.8);

    border-radius: 50%;

    background: rgba(255,255,255,.9);

    color: var(--dark);

    backdrop-filter: blur(10px);

    cursor: pointer;

    box-shadow:
        0 7px 20px rgba(0,0,0,.08);

    transition:
        all .35s ease;
}

.shop-section .product-wishlist:hover {
    background: var(--dark);

    color: var(--gold-light);

    border-color: var(--dark);

    transform: scale(1.08);
}


/* =========================================================
   OUT OF STOCK
========================================================= */

.shop-section .product-out-overlay {
    position: absolute;
    z-index: 5;

    inset: 0;

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

    background: rgba(23,23,23,.25);

    backdrop-filter: blur(3px);
}

.shop-section .product-out-overlay span {
    padding: 11px 19px;

    border-radius: 50px;

    background: rgba(23,23,23,.93);

    color: #fff;

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

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


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

.shop-section .product-body {
    position: relative;

    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 25px 23px 22px;
}

.shop-section .product-body::before {
    content: "";

    position: absolute;

    top: 0;
    left: 23px;

    width: 28px;
    height: 2px;

    background: var(--gradient);
}


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

.shop-section .product-title {
    margin: 0 0 9px;

    font-family: "Poppins", sans-serif;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 700;

    color: var(--dark);

    display: -webkit-box;
    -webkit-box-orient: vertical;

    overflow: hidden;

    transition: color .3s ease;
}

.shop-section .product-card:hover .product-title {
    color: var(--gold-dark);
}


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

.shop-section .product-description {
    min-height: 43px;

    margin: 0 0 17px;

    color: var(--gray);

    font-size: 13px;

    line-height: 1.7;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


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

.shop-section .product-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 10px;

    font-family: "Poppins", sans-serif;

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

    color: var(--gold-dark);
}

.shop-section .old-price {
    color: var(--muted);

    font-size: 13px;

    font-weight: 500;

    text-decoration: line-through;
}

.shop-section .sale-price {
    color: var(--gold-dark);
}


/* =========================================================
   STOCK
========================================================= */

.shop-section .product-stock {
    min-height: 25px;

    margin-bottom: 19px;
}

.shop-section .product-stock span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 5px 9px;

    border-radius: 50px;

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

.shop-section .in-stock {
    color: var(--success);

    background: rgba(25,135,84,.08);
}

.shop-section .low-stock {
    color: var(--gold-dark);

    background: rgba(212,160,23,.11);
}

.shop-section .out-stock {
    color: var(--danger);

    background: rgba(220,53,69,.08);
}


/* =========================================================
   ACTIONS
========================================================= */

.shop-section .product-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 9px;

    margin-top: auto;
}

.shop-section .product-details-btn,
.shop-section .add-to-cart-btn {
    min-height: 46px;

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

    gap: 7px;

    border-radius: 11px;

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

    text-decoration: none;
}

.shop-section .product-details-btn {
    padding: 10px 12px;

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

.shop-section .product-details-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(212,160,23,.18);
}

.shop-section .add-to-cart-btn {
    padding: 10px 12px;

    border: 1px solid var(--dark);

    background: var(--dark);

    color: #fff;

    cursor: pointer;

    transition:
        all .3s ease;
}

.shop-section .add-to-cart-btn:hover:not(:disabled) {
    background: var(--primary);

    border-color: var(--primary);

    color: var(--dark);

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(212,160,23,.25);
}

.shop-section .add-to-cart-btn:disabled {
    opacity: .5;

    cursor: not-allowed;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.shop-empty-state {
    max-width: 620px;

    margin: 30px auto;

    padding: 70px 30px;

    text-align: center;

    border: 1px dashed rgba(212,160,23,.35);

    border-radius: 24px;

    background: rgba(255,255,255,.65);
}

.empty-icon {
    width: 78px;
    height: 78px;

    margin: 0 auto 22px;

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

    border-radius: 50%;

    background: rgba(212,160,23,.1);

    color: var(--gold-dark);

    font-size: 25px;
}

.shop-empty-state h4 {
    margin-bottom: 9px;

    font-family: "Poppins", sans-serif;

    font-weight: 700;
}

.shop-empty-state p {
    margin: 0;

    color: var(--gray);

    font-size: 14px;
}


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

@media (max-width: 1199px) {

    .shop-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .shop-search {
        grid-column: 1 / -1;

        grid-row: 1;

        width: 420px;
    }

    .shop-results-count {
        grid-column: 1;

        grid-row: 2;
    }

    .shop-sort {
        grid-column: 2;

        grid-row: 2;
    }

}


@media (max-width: 991px) {

    .shop-section {
        padding: 85px 0 95px;
    }

    .shop-section .product-image {
        height: 275px;
    }

}


@media (max-width: 767px) {

    .shop-section {
        padding: 70px 0 80px;
    }

    .shop-category-wrapper {
        margin-top: 38px;
    }

    .shop-toolbar {
        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 15px;
    }

    .shop-search {
        order: 1;

        width: 100%;
    }

    .shop-results-count {
        order: 2;
    }

    .shop-sort {
        order: 3;

        width: 100%;

        justify-content: space-between;
    }

    .shop-sort-dropdown {
        flex: 1;

        min-width: 0;
    }

    .shop-section .product-image {
        height: 300px;
    }

}


@media (max-width: 575px) {

    .shop-section {
        padding: 60px 0 70px;
    }

    .shop-section .section-title h2 {
        font-size: 30px;
    }

    .shop-category-link {
        padding: 9px 14px;
    }

    .shop-sort {
        align-items: center;
    }

    .shop-sort label {
        flex: 0 0 auto;
    }

    .shop-sort-dropdown {
        min-width: 0;
    }

    .shop-sort-trigger {
        height: 50px;

        padding: 0 14px;

        font-size: 12px;
    }

    .shop-sort-menu {
        right: 0;
        left: auto;

        width: min(265px, 90vw);
    }

    .shop-section .product-image {
        height: 315px;
    }

    .shop-section .product-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   STAIRS CART PAGE
   Premium Black + Gold
   ========================================================= */

.cart-page {
    min-height: calc(100vh - 80px);
    padding: 145px 0 90px;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(212, 160, 23, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 20%,
            rgba(184, 134, 11, 0.055),
            transparent 30%
        ),
        var(--bg);
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.cart-page-header {
    text-align: center;
    margin-bottom: 55px;
}

.cart-page-header .section-tag {
    display: inline-flex;
    align-items: center;

    padding: 9px 18px;
    margin-bottom: 15px;

    border: 1px solid rgba(212, 160, 23, 0.25);
    border-radius: 50px;

    background: rgba(212, 160, 23, 0.10);

    color: var(--secondary);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.cart-page-header h1 {
    margin: 0 0 12px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.8px;

    color: var(--dark);
}

.cart-page-header p {
    max-width: 650px;

    margin: 0 auto;

    color: var(--gray);

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   CART ITEMS CARD
   ========================================================= */

.cart-items-card {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(228, 222, 210, 0.95);

    border-radius: 26px;

    box-shadow:
        0 18px 50px rgba(23, 23, 23, 0.07),
        0 3px 12px rgba(23, 23, 23, 0.03);
}


/* =========================================================
   CART HEADER
   ========================================================= */

.cart-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 28px 36px;

    border-bottom: 1px solid var(--border);

    background:
        linear-gradient(
            135deg,
            rgba(212, 160, 23, 0.055),
            rgba(255, 255, 255, 0.97)
        );
}

.cart-items-header h3 {
    margin: 0 0 5px;

    font-family: "Poppins", sans-serif;

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

    color: var(--dark);
}

.cart-items-header span {
    color: var(--muted);

    font-size: 14px;
    font-weight: 500;
}


/* =========================================================
   CONTINUE SHOPPING
   ========================================================= */

.continue-shopping {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: var(--secondary);

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;

    transition: all 0.25s ease;
}

.continue-shopping:hover {
    color: var(--gold-dark);
}

.continue-shopping i {
    transition: transform 0.25s ease;
}

.continue-shopping:hover i {
    transform: translateX(-5px);
}


/* =========================================================
   CART LIST
   ========================================================= */

.cart-items-list {
    width: 100%;

    padding: 8px 36px;
}


/* =========================================================
   CART ITEM
   ========================================================= */

.cart-item {
    position: relative;

    display: grid;

    /*
       LARGE DESKTOP

       Image | Product | Quantity | Subtotal | Delete
    */
    grid-template-columns:
        145px
        minmax(0, 1fr)
        145px
        155px
        48px;

    align-items: center;

    width: 100%;
    min-width: 0;

    gap: 22px;

    padding: 30px 0;

    border-bottom: 1px solid #eee9df;

    box-sizing: border-box;
}

.cart-item:last-child {
    border-bottom: none;
}


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

.cart-item-image {
    width: 145px;
    height: 145px;

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

    padding: 8px;

    flex-shrink: 0;

    overflow: hidden;

    border: 1px solid #ebe5da;

    border-radius: 20px;

    background: #f8f6f1;

    box-sizing: border-box;

    transition: all 0.3s ease;
}

.cart-item-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 14px;
}

.cart-item:hover .cart-item-image {
    border-color: rgba(212, 160, 23, 0.35);

    box-shadow:
        0 10px 25px rgba(23, 23, 23, 0.08);

    transform: translateY(-2px);
}


/* =========================================================
   PRODUCT INFO
   ========================================================= */

.cart-item-info {
    width: 100%;
    min-width: 0;

    overflow: hidden;
}

.cart-item-info h4 {
    margin: 0 0 8px;

    font-family: "Poppins", sans-serif;

    font-size: 20px;
    line-height: 1.35;

    font-weight: 800;

    color: var(--dark);

    overflow-wrap: anywhere;
}

.cart-item-description {
    max-width: 100%;

    margin: 0 0 12px;

    color: var(--gray);

    font-size: 14px;
    line-height: 1.65;

    overflow-wrap: anywhere;
}

.cart-item-price {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 9px;
}

.cart-sale-price {
    color: var(--secondary);

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

    white-space: nowrap;
}

.cart-original-price {
    color: #9c968c;

    font-size: 13px;
    font-weight: 500;

    text-decoration: line-through;

    white-space: nowrap;
}


/* =========================================================
   STOCK
   ========================================================= */

.cart-stock {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: var(--success);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}

.cart-stock i {
    font-size: 12px;
}

.cart-stock-out {
    color: var(--danger);
}


/* =========================================================
   QUANTITY
   ========================================================= */

.cart-item-quantity {
    width: 145px;
    min-width: 145px;
}

.quantity-label,
.subtotal-label {
    display: block;

    margin-bottom: 9px;

    color: #8d857a;

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

    letter-spacing: 1px;

    text-transform: uppercase;
}

.quantity-control {
    width: 145px;
    height: 48px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border: 1px solid #e4ded2;

    border-radius: 14px;

    background: #f7f5f0;

    box-sizing: border-box;
}

.cart-quantity-btn {
    width: 46px;
    height: 100%;

    flex: 0 0 46px;

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

    padding: 0;

    border: none;

    background: transparent;

    color: var(--dark);

    font-size: 13px;

    cursor: pointer;

    transition: all 0.2s ease;
}

.cart-quantity-btn:hover {
    background: var(--dark);

    color: var(--gold-light);
}

.cart-quantity-btn:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}

.cart-quantity-input {
    width: 53px;
    height: 100%;

    flex: 1 1 auto;

    padding: 0;

    border: none;

    border-left: 1px solid #e4ded2;
    border-right: 1px solid #e4ded2;

    outline: none;

    background: #fff;

    color: var(--dark);

    text-align: center;

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


/* =========================================================
   SUBTOTAL
   ========================================================= */

.cart-item-subtotal {
    width: 155px;
    min-width: 155px;
}

.cart-item-subtotal strong {
    display: block;

    color: var(--dark);

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

    white-space: nowrap;
}

.cart-item-subtotal .item-subtotal {
    color: var(--secondary);
}


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

.cart-remove-btn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    height: 48px !important;

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

    position: relative;

    flex-shrink: 0;

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

    visibility: visible !important;
    opacity: 1 !important;

    border: 1px solid rgba(220, 53, 69, 0.20) !important;

    border-radius: 14px !important;

    background: rgba(220, 53, 69, 0.055) !important;

    color: var(--danger) !important;

    font-size: 15px !important;

    line-height: 1 !important;

    cursor: pointer;

    z-index: 10;

    box-sizing: border-box;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.cart-remove-btn i {
    display: block !important;

    width: auto !important;
    height: auto !important;

    visibility: visible !important;
    opacity: 1 !important;

    color: inherit !important;

    font-size: 15px !important;

    line-height: 1 !important;
}

.cart-remove-btn:hover {
    background: var(--danger) !important;

    border-color: var(--danger) !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(220, 53, 69, 0.20);
}


/* =========================================================
   ORDER SUMMARY
   ========================================================= */

.cart-summary {
    position: sticky;

    top: 115px;

    width: 100%;

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(228, 222, 210, 0.95);

    border-radius: 26px;

    box-shadow:
        0 18px 50px rgba(23, 23, 23, 0.08),
        0 3px 12px rgba(23, 23, 23, 0.03);
}

.cart-summary-header {
    position: relative;

    padding: 28px 36px;

    background:
        linear-gradient(
            135deg,
            #151515,
            #202020 50%,
            #111111
        );
}

.cart-summary-header::after {
    content: "";

    position: absolute;

    left: 36px;
    bottom: 0;

    width: 65px;
    height: 4px;

    border-radius: 10px;

    background: var(--gradient);
}

.cart-summary-header h3 {
    margin: 0;

    font-family: "Poppins", sans-serif;

    color: #fff;

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

.cart-summary-body {
    padding: 30px 36px 34px;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}

.summary-row span {
    color: #766e64;

    font-size: 15px;
}

.summary-row strong {
    color: var(--dark);

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

    white-space: nowrap;
}

.summary-divider {
    height: 1px;

    margin: 25px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ded7ca,
            transparent
        );
}

.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 30px;
}

.summary-total span {
    color: var(--dark);

    font-family: "Poppins", sans-serif;

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

.summary-total strong {
    color: var(--secondary);

    font-family: "Poppins", sans-serif;

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

    white-space: nowrap;
}


/* =========================================================
   CHECKOUT
   ========================================================= */

.checkout-btn {
    width: 100%;
    min-height: 56px;

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

    border: none !important;

    border-radius: 15px !important;

    background: var(--gradient) !important;

    color: #171717 !important;

    font-family: "Poppins", sans-serif;

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

    box-shadow:
        0 10px 25px rgba(154, 104, 0, 0.18);

    transition: all 0.3s ease !important;
}

.checkout-btn:hover {
    color: #111 !important;

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(154, 104, 0, 0.28);
}


/* =========================================================
   SECURE CHECKOUT
   ========================================================= */

.secure-checkout {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 20px;

    color: #938b81;

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

.secure-checkout i {
    color: var(--success);

    font-size: 14px;
}


/* =========================================================
   EMPTY CART
   ========================================================= */

.empty-cart {
    max-width: 700px;

    margin: 0 auto;

    padding: 75px 35px;

    text-align: center;

    background: #fff;

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

    border-radius: 28px;

    box-shadow:
        0 18px 50px rgba(23, 23, 23, 0.07);
}

.empty-cart-icon {
    width: 95px;
    height: 95px;

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

    margin: 0 auto 25px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(212, 160, 23, 0.12),
            rgba(245, 199, 90, 0.05)
        );

    border: 1px solid rgba(212, 160, 23, 0.25);

    color: var(--secondary);

    font-size: 34px;
}

.empty-cart h2 {
    margin: 0 0 10px;

    font-family: "Poppins", sans-serif;

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

    color: var(--dark);
}

.empty-cart p {
    max-width: 430px;

    margin: 0 auto 28px;

    color: var(--gray);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   AJAX STATES
   ========================================================= */

.cart-item.cart-updating {
    opacity: 0.55;

    pointer-events: none;
}

.cart-item.cart-removing {
    opacity: 0.4;

    pointer-events: none;
}


/* =========================================================
   AJAX MESSAGE
   ========================================================= */

.cart-ajax-message {
    position: fixed;

    top: 105px;
    right: 25px;

    z-index: 999999;

    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 270px;

    padding: 14px 18px;

    background: #171717;

    color: #fff;

    border: 1px solid rgba(212, 160, 23, 0.35);

    border-radius: 14px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   1400px+
   ========================================================= */

@media (min-width: 1400px) {

    .cart-item {
        grid-template-columns:
            145px
            minmax(280px, 1fr)
            145px
            165px
            48px;

        gap: 22px;
    }

    .cart-item-subtotal {
        width: 165px;
        min-width: 165px;
    }
}


/* =========================================================
   LAPTOP
   1200px - 1399px

   THIS IS THE IMPORTANT FIX FOR YOUR LAPTOP
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .cart-items-list {
        padding-left: 28px;
        padding-right: 28px;
    }

    .cart-item {

        /*
         * Much more compact laptop grid
         *
         * 110 image
         * flexible product
         * 112 quantity
         * 125 subtotal
         * 42 delete
         */
        grid-template-columns:
            110px
            minmax(150px, 1fr)
            112px
            125px
            42px;

        gap: 12px;

        padding: 26px 0;
    }

    .cart-item-image {
        width: 110px;
        height: 110px;

        border-radius: 17px;
    }

    .cart-item-info h4 {
        font-size: 17px;
    }

    .cart-item-description {
        font-size: 12px;

        line-height: 1.5;

        margin-bottom: 9px;
    }

    .cart-sale-price {
        font-size: 16px;
    }

    .cart-original-price {
        font-size: 11px;
    }

    .cart-stock {
        font-size: 11px;
    }


    /* Quantity */

    .cart-item-quantity {
        width: 112px;
        min-width: 112px;
    }

    .quantity-label,
    .subtotal-label {
        font-size: 10px;

        letter-spacing: 0.7px;
    }

    .quantity-control {
        width: 112px;
        height: 44px;

        border-radius: 12px;
    }

    .cart-quantity-btn {
        width: 35px;

        flex-basis: 35px;
    }

    .cart-quantity-input {
        width: 42px;

        font-size: 14px;
    }


    /* Subtotal */

    .cart-item-subtotal {
        width: 125px;
        min-width: 125px;
    }

    .cart-item-subtotal strong {
        font-size: 15px;
    }


    /* Delete button */

    .cart-remove-btn {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;

        border-radius: 12px !important;
    }

    .cart-remove-btn i {
        font-size: 13px !important;
    }


    /* Header */

    .cart-items-header {
        padding-left: 28px;
        padding-right: 28px;
    }

    .cart-items-header h3 {
        font-size: 22px;
    }

    .continue-shopping {
        font-size: 14px;
    }


    /* Summary */

    .cart-summary-header {
        padding: 25px 28px;
    }

    .cart-summary-body {
        padding: 28px;
    }
}


/* =========================================================
   992px - 1199px
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .cart-items-list {
        padding-left: 24px;
        padding-right: 24px;
    }

    .cart-item {

        grid-template-columns:
            90px
            minmax(130px, 1fr)
            105px
            115px
            40px;

        gap: 10px;

        padding: 24px 0;
    }

    .cart-item-image {
        width: 90px;
        height: 90px;

        border-radius: 15px;
    }

    .cart-item-info h4 {
        font-size: 16px;
    }

    .cart-item-description {
        font-size: 11px;
    }

    .cart-sale-price {
        font-size: 15px;
    }

    .cart-stock {
        font-size: 10px;
    }

    .cart-item-quantity {
        width: 105px;
        min-width: 105px;
    }

    .quantity-control {
        width: 105px;
        height: 42px;
    }

    .cart-quantity-btn {
        width: 32px;
        flex-basis: 32px;
    }

    .cart-quantity-input {
        width: 40px;
    }

    .cart-item-subtotal {
        width: 115px;
        min-width: 115px;
    }

    .cart-item-subtotal strong {
        font-size: 14px;
    }

    .cart-remove-btn {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;

        border-radius: 11px !important;
    }

    .cart-remove-btn i {
        font-size: 12px !important;
    }

    .cart-items-header {
        padding: 24px;
    }
}


/* =========================================================
   BELOW 992px
   ========================================================= */

@media (max-width: 991.98px) {

    .cart-page {
        padding-top: 125px;
    }

    .cart-page-header {
        margin-bottom: 38px;
    }

    .cart-page-header h1 {
        font-size: 44px;
    }

    .cart-item {
        grid-template-columns:
            105px
            minmax(0, 1fr);

        gap: 18px;

        padding: 25px 0;
    }

    .cart-item-image {
        width: 105px;
        height: 105px;

        grid-row: span 2;
    }

    .cart-item-quantity {
        grid-column: 2;

        width: 130px;
        min-width: 130px;
    }

    .quantity-control {
        width: 130px;
    }

    .cart-item-subtotal {
        grid-column: 2;

        width: auto;
        min-width: 0;
    }

    .cart-remove-btn {
        position: absolute !important;

        top: 25px;
        right: 0;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
    }

    .cart-summary {
        position: relative;

        top: auto;

        margin-top: 15px;
    }
}


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

@media (max-width: 575.98px) {

    .cart-page {
        padding: 110px 0 60px;
    }

    .cart-page-header {
        margin-bottom: 30px;
    }

    .cart-page-header h1 {
        font-size: 36px;
    }

    .cart-page-header p {
        padding: 0 15px;

        font-size: 14px;
    }

    .cart-items-header {
        display: block;

        padding: 22px 20px;
    }

    .cart-items-header h3 {
        font-size: 21px;
    }

    .continue-shopping {
        margin-top: 14px;

        font-size: 13px;
    }

    .cart-items-list {
        padding: 0 20px;
    }

    .cart-item {
        grid-template-columns:
            85px
            minmax(0, 1fr);

        gap: 14px;

        padding: 22px 0;
    }

    .cart-item-image {
        width: 85px;
        height: 85px;
    }

    .cart-item-info {
        padding-right: 40px;
    }

    .cart-item-info h4 {
        font-size: 16px;
    }

    .cart-item-description {
        display: none;
    }

    .cart-sale-price {
        font-size: 16px;
    }

    .cart-stock {
        font-size: 11px;
    }

    .cart-item-quantity {
        width: 120px;
        min-width: 120px;
    }

    .quantity-control {
        width: 120px;
        height: 43px;
    }

    .cart-quantity-btn {
        width: 38px;
        flex-basis: 38px;
    }

    .cart-quantity-input {
        width: 44px;
    }

    .cart-item-subtotal {
        margin-top: 3px;
    }

    .cart-item-subtotal strong {
        font-size: 15px;
    }

    .cart-remove-btn {
        top: 22px;
        right: 0;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;

        border-radius: 11px !important;
    }

    .cart-remove-btn i {
        font-size: 13px !important;
    }

    .cart-summary-header {
        padding: 22px 20px;
    }

    .cart-summary-body {
        padding: 24px 20px 25px;
    }

    .summary-total span {
        font-size: 18px;
    }

    .summary-total strong {
        font-size: 19px;
    }

    .checkout-btn {
        min-height: 53px;

        font-size: 14px;
    }

    .empty-cart {
        padding: 55px 20px;
    }

    .empty-cart-icon {
        width: 80px;
        height: 80px;

        font-size: 28px;
    }

    .empty-cart h2 {
        font-size: 24px;
    }

    .cart-ajax-message {
        top: 90px;

        left: 15px;
        right: 15px;

        min-width: 0;
    }
}

/* =========================================================
   CHECKOUT PAGE
   ========================================================= */

.checkout-page {
    min-height: calc(100vh - 80px);

    padding: 145px 0 90px;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(212, 160, 23, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(184, 134, 11, 0.05),
            transparent 30%
        ),
        var(--bg);
}


/* =========================================================
   HEADER
   ========================================================= */

.checkout-page-header {
    text-align: center;

    margin-bottom: 50px;
}

.checkout-page-header .section-tag {
    display: inline-flex;
    align-items: center;

    padding: 9px 18px;

    margin-bottom: 15px;

    border: 1px solid rgba(212, 160, 23, 0.25);

    border-radius: 50px;

    background: rgba(212, 160, 23, 0.08);

    color: var(--secondary);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.checkout-page-header h1 {
    margin: 0 0 12px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(40px, 5vw, 60px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.5px;

    color: var(--dark);
}

.checkout-page-header p {
    margin: 0 auto;

    max-width: 650px;

    color: var(--gray);

    font-size: 17px;

    line-height: 1.7;
}


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

.checkout-card {
    overflow: hidden;

    margin-bottom: 22px;

    background: #fff;

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

    border-radius: 22px;

    box-shadow:
        0 15px 40px rgba(23, 23, 23, 0.055);
}


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

.checkout-card-header {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 24px 30px;

    border-bottom: 1px solid #eee9df;

    background:
        linear-gradient(
            135deg,
            rgba(212, 160, 23, 0.055),
            rgba(255, 255, 255, 0.98)
        );
}

.checkout-section-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 14px;

    background: #171717;

    color: var(--gold-light);

    font-size: 16px;
}

.checkout-card-header h3 {
    margin: 0 0 3px;

    font-family: "Poppins", sans-serif;

    font-size: 19px;

    font-weight: 800;

    color: var(--dark);
}

.checkout-card-header p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


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

.checkout-card-body {
    padding: 28px 30px;
}


/* =========================================================
   LABELS
   ========================================================= */

.checkout-label {
    display: block;

    margin-bottom: 8px;

    color: #554e46;

    font-size: 13px;

    font-weight: 700;
}

.checkout-label span {
    color: var(--danger);
}

.checkout-label small {
    color: var(--muted);

    font-weight: 500;
}


/* =========================================================
   INPUT
   ========================================================= */

.checkout-input-wrapper {
    position: relative;
}

.checkout-input-wrapper > i {
    position: absolute;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    color: #9b9287;

    font-size: 14px;

    pointer-events: none;

    transition: color 0.2s ease;
}

.checkout-input {
    width: 100%;
    height: 52px;

    padding: 0 16px 0 46px;

    border: 1px solid #ded8cd;

    border-radius: 13px;

    outline: none;

    background: #fcfbf8;

    color: var(--dark);

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.checkout-input::placeholder,
.checkout-textarea::placeholder {
    color: #aaa297;
}

.checkout-input:focus {
    border-color: var(--primary);

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(212, 160, 23, 0.09);
}

.checkout-input-wrapper:focus-within > i {
    color: var(--secondary);
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.checkout-textarea-wrapper {
    position: relative;
}

.checkout-textarea-wrapper > i {
    position: absolute;

    left: 17px;
    top: 19px;

    color: #9b9287;

    font-size: 14px;

    pointer-events: none;
}

.checkout-textarea {
    width: 100%;
    min-height: 120px;

    resize: vertical;

    padding: 15px 16px 15px 46px;

    border: 1px solid #ded8cd;

    border-radius: 13px;

    outline: none;

    background: #fcfbf8;

    color: var(--dark);

    font-size: 14px;

    line-height: 1.6;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.checkout-textarea:focus {
    border-color: var(--primary);

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(212, 160, 23, 0.09);
}


/* =========================================================
   PAYMENT OPTION
   ========================================================= */

.payment-option {
    position: relative;

    display: flex;
    align-items: center;

    gap: 14px;

    min-height: 76px;

    padding: 16px 18px;

    border: 1px solid #ded8cd;

    border-radius: 15px;

    background: #fcfbf8;

    cursor: pointer;

    transition: all 0.25s ease;
}

.payment-option:hover {
    border-color: rgba(212, 160, 23, 0.5);

    background: rgba(212, 160, 23, 0.035);
}

.payment-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.payment-radio {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border: 2px solid #cfc7ba;

    border-radius: 50%;

    position: relative;
}

.payment-option input:checked + .payment-radio {
    border-color: var(--secondary);
}

.payment-option input:checked + .payment-radio::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: var(--secondary);
}

.payment-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 12px;

    background: rgba(212, 160, 23, 0.10);

    color: var(--secondary);

    font-size: 16px;
}

.payment-content {
    flex: 1;
}

.payment-content strong {
    display: block;

    margin-bottom: 3px;

    color: var(--dark);

    font-size: 14px;

    font-weight: 800;
}

.payment-content small {
    color: var(--muted);

    font-size: 12px;
}

.payment-check {
    width: 27px;
    height: 27px;

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

    border-radius: 50%;

    background: #eee;

    color: transparent;

    font-size: 11px;
}

.payment-option input:checked
~ .payment-check {
    background: var(--secondary);

    color: #fff;
}


/* =========================================================
   SECURITY
   ========================================================= */

.checkout-security {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 18px 20px;

    border: 1px solid rgba(25, 135, 84, 0.15);

    border-radius: 16px;

    background: rgba(25, 135, 84, 0.045);
}

.checkout-security-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 12px;

    background: rgba(25, 135, 84, 0.10);

    color: var(--success);
}

.checkout-security strong {
    display: block;

    margin-bottom: 2px;

    color: var(--dark);

    font-size: 13px;
}

.checkout-security p {
    margin: 0;

    color: var(--gray);

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   ORDER SUMMARY
   ========================================================= */

.checkout-summary {
    position: sticky;

    top: 115px;

    overflow: hidden;

    background: #fff;

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

    border-radius: 24px;

    box-shadow:
        0 18px 50px rgba(23, 23, 23, 0.08);
}


/* =========================================================
   SUMMARY HEADER
   ========================================================= */

.checkout-summary-header {
    position: relative;

    padding: 25px 28px;

    background:
        linear-gradient(
            135deg,
            #141414,
            #202020 55%,
            #111
        );
}

.checkout-summary-header::after {
    content: "";

    position: absolute;

    left: 28px;
    bottom: 0;

    width: 65px;
    height: 4px;

    border-radius: 10px;

    background: var(--gradient);
}

.checkout-summary-header span {
    display: block;

    margin-bottom: 6px;

    color: var(--gold-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.checkout-summary-header h3 {
    margin: 0;

    color: #fff;

    font-family: "Poppins", sans-serif;

    font-size: 23px;

    font-weight: 800;
}


/* =========================================================
   SUMMARY PRODUCTS
   ========================================================= */

.checkout-summary-products {
    padding: 8px 28px 4px;
}

.checkout-product {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px 0;

    border-bottom: 1px solid #eee9df;
}

.checkout-product:last-child {
    border-bottom: none;
}

.checkout-product-image {
    position: relative;

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    padding: 4px;

    border: 1px solid #e6dfd4;

    border-radius: 12px;

    background: #f8f6f1;
}

.checkout-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 8px;
}

.checkout-product-quantity {
    position: absolute;

    top: -7px;
    right: -7px;

    min-width: 21px;
    height: 21px;

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

    padding: 0 5px;

    border: 2px solid #fff;

    border-radius: 50px;

    background: var(--dark);

    color: var(--gold-light);

    font-size: 10px;

    font-weight: 800;
}

.checkout-product-info {
    flex: 1;

    min-width: 0;
}

.checkout-product-info h4 {
    overflow: hidden;

    margin: 0 0 4px;

    color: var(--dark);

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.checkout-product-info span {
    color: var(--muted);

    font-size: 11px;
}

.checkout-product-price {
    color: var(--secondary);

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;
}


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

.checkout-summary-body {
    padding: 20px 28px 26px;
}

.checkout-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}

.checkout-summary-row span {
    color: #766e64;

    font-size: 13px;
}

.checkout-summary-row strong {
    color: var(--dark);

    font-size: 13px;

    font-weight: 800;

    white-space: nowrap;
}

.delivery-free {
    color: var(--success) !important;

    font-size: 11px !important;
}

.checkout-summary-divider {
    height: 1px;

    margin: 20px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ded7ca,
            transparent
        );
}

.checkout-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 24px;
}

.checkout-summary-total span {
    color: var(--dark);

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    font-weight: 800;
}

.checkout-summary-total strong {
    color: var(--secondary);

    font-family: "Poppins", sans-serif;

    font-size: 20px;

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================================
   PLACE ORDER
   ========================================================= */

.checkout-place-order {
    width: 100%;
    min-height: 55px;

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

    gap: 10px;

    border: none;

    border-radius: 14px;

    background: var(--gradient);

    color: #171717;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(154, 104, 0, 0.18);

    transition: all 0.3s ease;
}

.checkout-place-order:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(154, 104, 0, 0.28);
}

.checkout-place-order:disabled {
    opacity: 0.65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}

.checkout-place-order .fa-spinner {
    animation: checkoutSpin 0.8s linear infinite;
}

@keyframes checkoutSpin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   BOTTOM SECURITY
   ========================================================= */

.checkout-bottom-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 17px;

    color: #948c82;

    font-size: 11px;

    font-weight: 600;
}

.checkout-bottom-note i {
    color: var(--success);

    font-size: 13px;
}


/* =========================================================
   BACK TO CART
   ========================================================= */

.back-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 18px;

    color: var(--secondary);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: all 0.2s ease;
}

.back-to-cart:hover {
    color: var(--gold-dark);

    transform: translateX(-3px);
}


/* =========================================================
   EMPTY CHECKOUT
   ========================================================= */

.checkout-empty {
    max-width: 650px;

    margin: 0 auto;

    padding: 70px 30px;

    text-align: center;

    background: #fff;

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

    border-radius: 25px;

    box-shadow:
        0 18px 50px rgba(23, 23, 23, 0.07);
}

.checkout-empty-icon {
    width: 90px;
    height: 90px;

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

    margin: 0 auto 22px;

    border: 1px solid rgba(212, 160, 23, 0.25);

    border-radius: 50%;

    background: rgba(212, 160, 23, 0.08);

    color: var(--secondary);

    font-size: 30px;
}

.checkout-empty h2 {
    margin: 0 0 10px;

    font-family: "Poppins", sans-serif;

    font-size: 27px;

    font-weight: 800;

    color: var(--dark);
}

.checkout-empty p {
    max-width: 450px;

    margin: 0 auto 25px;

    color: var(--gray);

    font-size: 14px;

    line-height: 1.7;
}


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

@media (max-width: 991.98px) {

    .checkout-page {
        padding-top: 125px;
    }

    .checkout-summary {
        position: relative;

        top: auto;

        margin-top: 5px;
    }

}


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

@media (max-width: 575.98px) {

    .checkout-page {
        padding: 110px 0 60px;
    }

    .checkout-page-header {
        margin-bottom: 32px;
    }

    .checkout-page-header h1 {
        font-size: 38px;
    }

    .checkout-page-header p {
        padding: 0 15px;

        font-size: 14px;
    }

    .checkout-card {
        border-radius: 18px;
    }

    .checkout-card-header {
        padding: 20px;
    }

    .checkout-card-body {
        padding: 22px 20px;
    }

    .checkout-section-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

    .checkout-card-header h3 {
        font-size: 17px;
    }

    .checkout-card-header p {
        font-size: 11px;
    }

    .checkout-summary {
        border-radius: 20px;
    }

    .checkout-summary-header {
        padding: 22px 20px;
    }

    .checkout-summary-products {
        padding-left: 20px;
        padding-right: 20px;
    }

    .checkout-summary-body {
        padding: 20px;
    }

    .checkout-product-price {
        font-size: 11px;
    }

    .checkout-security {
        padding: 15px;
    }

}

/* =========================================================
   ORDER SUCCESS PAGE
   ========================================================= */

.order-success-page {

    min-height: calc(100vh - 80px);

    padding: 145px 0 90px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(212, 160, 23, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(184, 134, 11, 0.06),
            transparent 30%
        ),
        var(--bg);

}


/* =========================================================
   SUCCESS WRAPPER
   ========================================================= */

.order-success-wrapper {

    width: 100%;

    max-width: 820px;

    margin: 0 auto;

    text-align: center;

}


/* =========================================================
   SUCCESS ICON
   ========================================================= */

.order-success-icon {

    width: 108px;

    height: 108px;

    margin: 0 auto 25px;

    padding: 7px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(212, 160, 23, 0.12),
            rgba(212, 160, 23, 0.03)
        );

}


.success-icon-circle {

    width: 94px;

    height: 94px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #198754,
            #157347
        );

    color: #fff;

    font-size: 35px;

    box-shadow:
        0 12px 35px rgba(25, 135, 84, 0.20);

    animation: successPop 0.55s ease forwards;

}


@keyframes successPop {

    0% {

        transform: scale(0.65);

        opacity: 0;

    }

    70% {

        transform: scale(1.08);

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}


/* =========================================================
   SUCCESS TAG
   ========================================================= */

.success-tag {

    display: inline-flex;

    align-items: center;

    padding: 9px 18px;

    margin-bottom: 16px;

    border: 1px solid rgba(25, 135, 84, 0.20);

    border-radius: 50px;

    background: rgba(25, 135, 84, 0.07);

    color: var(--success);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.7px;

    text-transform: uppercase;

}


.order-success-wrapper h1 {

    margin: 0 0 14px;

    color: var(--dark);

    font-family: "Poppins", sans-serif;

    font-size: clamp(36px, 5vw, 54px);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -1.3px;

}


.order-success-wrapper h1 span {

    color: var(--secondary);

}


.success-message {

    max-width: 620px;

    margin: 0 auto 30px;

    color: var(--gray);

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   ORDER NUMBER
   ========================================================= */

.order-number-box {

    position: relative;

    max-width: 520px;

    min-height: 88px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin: 0 auto 28px;

    padding: 18px 65px 18px 25px;

    border: 1px solid rgba(212, 160, 23, 0.28);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(212, 160, 23, 0.08),
            rgba(255, 255, 255, 0.95)
        );

    box-shadow:
        0 12px 35px rgba(23, 23, 23, 0.05);

}


.order-number-label {

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}


.order-number-box strong {

    color: var(--dark);

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    font-weight: 800;

    letter-spacing: 0.5px;

}


.copy-order-btn {

    position: absolute;

    top: 50%;

    right: 18px;

    transform: translateY(-50%);

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(212, 160, 23, 0.35);

    border-radius: 12px;

    background: #fff;

    color: var(--secondary);

    cursor: pointer;

    transition: all 0.25s ease;

}


.copy-order-btn:hover {

    background: var(--dark);

    border-color: var(--dark);

    color: var(--gold-light);

    transform:
        translateY(-50%)
        translateY(-2px);

}


/* =========================================================
   ORDER DETAILS
   ========================================================= */

.order-details-card {

    display: grid;

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

    overflow: hidden;

    margin-bottom: 22px;

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

    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(23, 23, 23, 0.055);

}


.order-detail {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 22px 17px;

    text-align: left;

}


.order-detail + .order-detail {

    border-left: 1px solid #eee9df;

}


.order-detail-icon {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: rgba(212, 160, 23, 0.09);

    color: var(--secondary);

    font-size: 14px;

}


.order-detail span {

    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: 10px;

    font-weight: 600;

}


.order-detail strong {

    display: block;

    color: var(--dark);

    font-size: 12px;

    font-weight: 800;

    line-height: 1.35;

}


.order-detail .order-status {

    color: var(--secondary);

    text-transform: capitalize;

}


/* =========================================================
   DELIVERY NOTICE
   ========================================================= */

.delivery-notice {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 28px;

    padding: 20px 22px;

    border: 1px solid rgba(212, 160, 23, 0.18);

    border-radius: 17px;

    background:
        rgba(212, 160, 23, 0.045);

    text-align: left;

}


.delivery-notice-icon {

    width: 46px;

    height: 46px;

    flex: 0 0 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: var(--dark);

    color: var(--gold-light);

    font-size: 16px;

}


.delivery-notice strong {

    display: block;

    margin-bottom: 4px;

    color: var(--dark);

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 800;

}


.delivery-notice p {

    margin: 0;

    color: var(--gray);

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================================
   ACTIONS
   ========================================================= */

.success-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 35px;

}


.success-shop-btn {

    min-width: 205px;

    min-height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}


.success-home-btn {

    min-height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 23px;

    border: 1px solid #d8d1c6;

    border-radius: 12px;

    background: #fff;

    color: var(--dark);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: all 0.25s ease;

}


.success-home-btn:hover {

    border-color: var(--dark);

    background: var(--dark);

    color: #fff;

}


/* =========================================================
   BRAND
   ========================================================= */

.success-brand {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    color: #a39a8e;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.success-brand-line {

    width: 55px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d5cec2
        );

}


.success-brand-line:last-child {

    background:
        linear-gradient(
            90deg,
            #d5cec2,
            transparent
        );

}


/* =========================================================
   ORDER NOT FOUND
   ========================================================= */

.order-not-found {

    max-width: 620px;

    margin: 40px auto 0;

    padding: 65px 30px;

    text-align: center;

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

    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 18px 50px rgba(23, 23, 23, 0.07);

}


.not-found-icon {

    width: 85px;

    height: 85px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 22px;

    border-radius: 50%;

    background: rgba(212, 160, 23, 0.08);

    color: var(--secondary);

    font-size: 28px;

}


.order-not-found h1 {

    margin: 0 0 12px;

    color: var(--dark);

    font-family: "Poppins", sans-serif;

    font-size: 30px;

    font-weight: 800;

}


.order-not-found p {

    max-width: 450px;

    margin: 0 auto 25px;

    color: var(--gray);

    font-size: 14px;

    line-height: 1.7;

}


.not-found-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}


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

@media (max-width: 991.98px) {

    .order-success-page {

        padding-top: 125px;

    }


    .order-details-card {

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

    }


    .order-detail:nth-child(3) {

        border-left: none;

        border-top: 1px solid #eee9df;

    }


    .order-detail:nth-child(4) {

        border-top: 1px solid #eee9df;

    }

}


@media (max-width: 575.98px) {

    .order-success-page {

        padding: 110px 0 60px;

    }


    .order-success-icon {

        width: 90px;

        height: 90px;

    }


    .success-icon-circle {

        width: 76px;

        height: 76px;

        font-size: 27px;

    }


    .order-success-wrapper h1 {

        font-size: 34px;

    }


    .success-message {

        padding: 0 12px;

        font-size: 13px;

    }


    .order-number-box {

        margin-left: 10px;

        margin-right: 10px;

        padding-left: 15px;

        padding-right: 60px;

    }


    .order-number-box strong {

        font-size: 14px;

    }


    .order-details-card {

        grid-template-columns: 1fr;

        margin-left: 5px;

        margin-right: 5px;

    }


    .order-detail,

    .order-detail:nth-child(3),

    .order-detail:nth-child(4) {

        border-left: none;

        border-top: 1px solid #eee9df;

    }


    .order-detail:first-child {

        border-top: none;

    }


    .delivery-notice {

        align-items: flex-start;

        margin-left: 5px;

        margin-right: 5px;

        padding: 17px;

    }


    .success-actions {

        flex-direction: column;

        width: 100%;

    }


    .success-shop-btn,

    .success-home-btn {

        width: 100%;

    }


    .success-brand {

        font-size: 8px;

    }


    .success-brand-line {

        width: 30px;

    }


    .order-not-found {

        padding: 50px 22px;

    }


    .not-found-actions {

        flex-direction: column;

    }


    .not-found-actions .btn {

        width: 100%;

    }

}


/* =========================================================
   WISHLIST LOGIN MODAL
========================================================= */

#wishlistLoginModal {
    position: fixed;
    z-index: 99999;
    inset: 0;

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


#wishlistLoginModal.show {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   BACKDROP
========================================================= */

#wishlistLoginModal .wishlist-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(10, 9, 7, .72);

    backdrop-filter:
        blur(8px);
}


/* =========================================================
   MODAL
========================================================= */

#wishlistLoginModal .wishlist-login-modal {

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 470px;

    padding: 42px 38px 35px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8f6f1
        );

    border:
        1px solid
        rgba(212, 160, 23, .25);

    border-radius: 26px;

    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, .30);

    transform:
        translateY(20px)
        scale(.96);

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1);
}


#wishlistLoginModal.show
.wishlist-login-modal {

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   CLOSE
========================================================= */

#wishlistLoginModal .wishlist-modal-close {

    position: absolute;

    top: 16px;
    right: 16px;

    width: 38px;
    height: 38px;

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

    border: 1px solid
        rgba(23, 19, 13, .08);

    border-radius: 50%;

    background: #ffffff;

    color: #6f6a61;

    cursor: pointer;

    transition:
        all .25s ease;
}


#wishlistLoginModal .wishlist-modal-close:hover {

    background: #17130D;

    color: #FFD76A;

    transform: rotate(90deg);

}


/* =========================================================
   ICON
========================================================= */

#wishlistLoginModal .wishlist-modal-icon {

    width: 72px;
    height: 72px;

    margin: 0 auto 20px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #17130D,
            #A96800
        );

    color: #FFD76A;

    font-size: 28px;

    box-shadow:
        0 12px 30px
        rgba(169, 104, 0, .20);
}


/* =========================================================
   TAG
========================================================= */

#wishlistLoginModal .wishlist-modal-tag {

    display: inline-block;

    margin-bottom: 10px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #A96800;
}


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

#wishlistLoginModal h3 {

    margin: 0 0 12px;

    color: #17130D;

    font-family:
        Poppins,
        sans-serif;

    font-size: 25px;

    font-weight: 700;

}


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

#wishlistLoginModal p {

    max-width: 380px;

    margin:
        0 auto 25px;

    color: #6F6A61;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   ACTIONS
========================================================= */

#wishlistLoginModal .wishlist-modal-actions {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


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

#wishlistLoginModal .wishlist-login-btn {

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

    gap: 9px;

    width: 100%;

    padding: 14px 20px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #17130D,
            #A96800
        );

    color: #FFD76A;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:
        all .25s ease;

    box-shadow:
        0 10px 25px
        rgba(169, 104, 0, .18);
}


#wishlistLoginModal .wishlist-login-btn:hover {

    color: #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 32px
        rgba(169, 104, 0, .25);

}


/* =========================================================
   CONTINUE SHOPPING
========================================================= */

#wishlistLoginModal .wishlist-continue-btn {

    width: 100%;

    padding: 13px 20px;

    border:
        1px solid
        rgba(23, 19, 13, .12);

    border-radius: 12px;

    background: #ffffff;

    color: #17130D;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        all .25s ease;
}


#wishlistLoginModal .wishlist-continue-btn:hover {

    border-color: #A96800;

    color: #A96800;

    background: #fffaf0;

}


/* =========================================================
   REGISTER
========================================================= */

#wishlistLoginModal .wishlist-modal-register {

    margin-top: 20px;

    color: #6F6A61;

    font-size: 12px;

}


#wishlistLoginModal .wishlist-modal-register a {

    color: #A96800;

    font-weight: 700;

    text-decoration: none;

}


#wishlistLoginModal .wishlist-modal-register a:hover {

    text-decoration: underline;

}


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

@media (max-width: 575px) {

    #wishlistLoginModal {
        padding: 15px;
    }


    #wishlistLoginModal
    .wishlist-login-modal {

        padding:
            38px 22px 28px;

        border-radius: 22px;

    }


    #wishlistLoginModal
    .wishlist-modal-icon {

        width: 62px;
        height: 62px;

        font-size: 24px;

    }


    #wishlistLoginModal h3 {

        font-size: 21px;

    }


    #wishlistLoginModal p {

        font-size: 13px;

    }

}

/* =========================================================
   STAIRS PREMIUM LEGAL PAGES
   Privacy Policy / Terms & Conditions
========================================================= */

.page-hero {
    position: relative;
    overflow: hidden;

    padding: 155px 20px 75px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(212, 160, 23, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(212, 160, 23, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0b0b0b 0%,
            #15130f 55%,
            #080808 100%
        );

    color: #fff;

    border-bottom: 1px solid rgba(212, 160, 23, 0.25);
}

.page-hero::before {
    content: "";

    position: absolute;

    top: -120px;
    left: 50%;

    width: 500px;
    height: 500px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(212, 160, 23, 0.04);

    filter: blur(20px);

    pointer-events: none;
}

.page-hero .container {
    position: relative;
    z-index: 2;

    max-width: 850px;
}

.page-hero .page-badge {
    display: inline-flex;

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

    padding: 8px 18px;

    margin-bottom: 18px;

    border: 1px solid rgba(212, 160, 23, 0.45);

    border-radius: 50px;

    color: #d4a017;

    background: rgba(212, 160, 23, 0.07);

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

    letter-spacing: 3px;

    text-transform: uppercase;
}

.page-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 800;

    letter-spacing: -1.5px;

    line-height: 1.1;
}

.page-hero p {
    max-width: 720px;

    margin: 20px auto 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   LEGAL CONTENT AREA
========================================================= */

.legal-page {
    position: relative;

    padding: 80px 20px 110px !important;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(212, 160, 23, 0.05),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(212, 160, 23, 0.04),
            transparent 30%
        ),
        #f7f5f0;
}

.legal-page .container {
    max-width: 1050px;
}


/* =========================================================
   MAIN LEGAL CARD
========================================================= */

.legal-card {
    position: relative;

    max-width: 950px;

    margin: 0 auto;

    padding: 55px 65px;

    background: #ffffff;

    border: 1px solid rgba(20, 20, 20, 0.08);

    border-radius: 24px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.08),
        0 5px 20px rgba(0, 0, 0, 0.035);

    overflow: hidden;
}

.legal-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: linear-gradient(
        90deg,
        transparent,
        #d4a017,
        #f0c75e,
        #d4a017,
        transparent
    );
}


/* =========================================================
   LEGAL HEADINGS
========================================================= */

.legal-card h2 {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin: 0 0 18px;

    color: #151515;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.35;

    letter-spacing: -0.3px;
}

.legal-card h2::before {
    content: "";

    flex: 0 0 5px;

    width: 5px;

    height: 31px;

    margin-top: 2px;

    border-radius: 5px;

    background: linear-gradient(
        180deg,
        #d4a017,
        #a87800
    );
}


/* =========================================================
   LEGAL TEXT
========================================================= */

.legal-card p {
    max-width: 850px;

    margin: 0 0 18px;

    color: #626262;

    font-size: 16px;

    line-height: 1.9;
}

.legal-card p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LEGAL LISTS
========================================================= */

.legal-card ul {
    max-width: 850px;

    margin: 8px 0 28px;

    padding: 0;

    list-style: none;
}

.legal-card li {
    position: relative;

    margin-bottom: 12px;

    padding-left: 27px;

    color: #5d5d5d;

    font-size: 15.5px;

    line-height: 1.8;
}

.legal-card li::before {
    content: "";

    position: absolute;

    top: 10px;
    left: 4px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d4a017;

    box-shadow:
        0 0 0 4px rgba(212, 160, 23, 0.10);
}


/* =========================================================
   LEGAL SEPARATORS
========================================================= */

.legal-card hr {
    height: 1px;

    margin: 42px 0;

    border: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 160, 23, 0.28),
            rgba(0, 0, 0, 0.08),
            transparent
        );
}


/* =========================================================
   STRONG TEXT
========================================================= */

.legal-card strong {
    color: #171717;

    font-weight: 800;
}


/* =========================================================
   FIRST SECTION
========================================================= */

.legal-card > h2:first-child {
    margin-top: 0;
}


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

@media (max-width: 991.98px) {

    .page-hero {
        padding: 145px 20px 65px;
    }

    .legal-page {
        padding: 65px 18px 90px !important;
    }

    .legal-card {
        padding: 45px 42px;
    }

    .legal-card h2 {
        font-size: 23px;
    }

}


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

@media (max-width: 767.98px) {

    .page-hero {
        padding: 125px 18px 55px;
    }

    .page-hero .page-badge {
        padding: 7px 15px;

        margin-bottom: 15px;

        font-size: 10px;

        letter-spacing: 2.5px;
    }

    .page-hero h1 {
        font-size: 34px;

        letter-spacing: -0.8px;
    }

    .page-hero p {
        margin-top: 15px;

        font-size: 14px;

        line-height: 1.7;
    }


    .legal-page {
        padding: 45px 12px 70px !important;
    }

    .legal-page .container {
        padding: 0;
    }

    .legal-card {
        padding: 35px 22px;

        border-radius: 18px;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.07);
    }


    .legal-card h2 {
        gap: 12px;

        margin-bottom: 14px;

        font-size: 20px;

        line-height: 1.4;
    }

    .legal-card h2::before {
        flex-basis: 4px;

        width: 4px;

        height: 27px;
    }


    .legal-card p {
        font-size: 14.5px;

        line-height: 1.85;
    }


    .legal-card li {
        padding-left: 23px;

        font-size: 14px;

        line-height: 1.75;
    }

    .legal-card li::before {
        top: 9px;
        left: 3px;

        width: 6px;
        height: 6px;
    }


    .legal-card hr {
        margin: 32px 0;
    }

}


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

@media (max-width: 575.98px) {

    .page-hero {
        padding-top: 115px;
        padding-bottom: 48px;
    }

    .page-hero h1 {
        font-size: 30px;
    }

    .page-hero p {
        font-size: 13.5px;
    }

    .legal-page {
        padding: 35px 10px 55px !important;
    }

    .legal-card {
        padding: 28px 18px;

        border-radius: 16px;
    }

    .legal-card h2 {
        font-size: 18px;
    }

    .legal-card p {
        font-size: 14px;
    }

    .legal-card li {
        font-size: 13.5px;
    }

    .legal-card hr {
        margin: 28px 0;
    }

}