body{
margin:0;
font-family:Arial;
background:#f4f4f4;
}

/* TOP BAR */
.topbar{
display:flex;
justify-content:space-between;
align-items:center;
background:linear-gradient(90deg,#ff4d00,#ff9900);
padding:10px;
color:white;
position:sticky;
top:0;
}

.brand{
display:flex;
align-items:center;
gap:10px;
}

.logo{
width:80px;
height:auto;
}

.menu-btn{
font-size:22px;
background:none;
border:none;
color:white;
cursor:pointer;
}

/* NAVIGATION BAR */

.nav-bar{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:20px;
    background:#f7f7f7;
    padding:15px;
}

.nav-bar a{
    text-decoration:none;
    color:#222;
    font-weight:bold;
}

.highlight-btn{
    background:linear-gradient(90deg,#ff4d00,#ffb300);
    color:white !important;
    padding:10px 20px;
    border-radius:30px;
}

.phone{
    color:#0044ff;
    font-weight:bold;
}

/* Floating Buttons */

.floating-btn{
    position:fixed;
    right:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:white;
    font-size:28px;
    box-shadow:0 4px 10px rgba(0,0,0,.25);
    z-index:9999;
    transition:.3s;
}

.floating-btn:hover{
    transform:scale(1.1);
}

/* Cart */

.cart-btn{
    bottom:180px;
    background:#ff6600;
}

/* WhatsApp */

.whatsapp-btn{
    bottom:100px;
    background:#25D366;
}

/* Instagram */

.instagram-btn{
    bottom:20px;
    background:linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
    );
}
/* SIDEBAR */
.sidebar{
position:fixed;
left:-250px;
top:0;
width:200px;
height:100%;
background:#111;
color:white;
padding:10px;
transition:0.3s;
z-index:999;
}

.sidebar a{
display:block;
color:white;
padding:10px;
text-decoration:none;
}

.sidebar.open{
left:0;
}

.bill-box{
    text-align:center;
    background:#f5f5f5;
    padding:20px;
    margin:20px;
    border-radius:10px;
}


/* AMAZON STYLE BANNER */

.offer-image{
    width:100%;
    background:white;
}

.offer-image img{
    width:100%;
    display:block;
    height:auto;
}

/*Moving Banner*/

.banner{
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    background:#fff8e1;
    padding:10px 0;
}

.banner span{
    display:inline-block;
    padding-left:100%;
    animation:scrollText 12s linear infinite;
    font-size:18px;
    font-weight:bold;
    color:#ff6600;
}

@keyframes scrollText{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-100%);
    }
}

/* CATEGORY */
.categories{
display:flex;
gap:10px;
justify-content:center;
padding:10px;
}

.categories button{
padding:6px 10px;
background:orange;
border:none;
cursor:pointer;
}

/* PRODUCT GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:10px;
padding:10px;
}

/* PRODUCT CARD */
.card{
background:white;
padding:10px;
border-radius:10px;
text-align:center;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

button{
background:#ff4d00;
color:white;
border:none;
padding:5px 8px;
margin:3px;
cursor:pointer;
}

/*CART RIGHT */

.cart-link{
    text-decoration:none;
    color:white;
    font-weight:bold;
}

.contact-section{
    background:#f5f5f5;
    padding:50px 20px;
    text-align:center;
}

.contact-section h2{
    font-size:40px;
    margin-bottom:20px;
}

.contact-cards{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
    margin-top:30px;
}

.contact-card{
    width:300px;
    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

/* FOOTER */
footer{
background:#222;
color:white;
text-align:center;
padding:20px;
margin-top:20px;
}

/* Toast Message */

.toast{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%) translateY(-20px);

    width:auto;
    max-width:calc(100vw - 32px);

    box-sizing:border-box;

    background:#28a745;
    color:white;

    padding:12px 18px;

    border-radius:10px;

    font-weight:bold;

    text-align:center;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .3s ease,
        transform .3s ease;

    z-index:999999;
}

.toast.show{
    opacity:1;
    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);
}
.toast.show{
    opacity:1;
    visibility:visible;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(90deg,#ff4d00,#ff9900);
    padding:10px 20px;
    gap:15px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
}

.brand h2{
    color:white;
    font-size:22px;
    margin:0;
}

.logo{
    width:70px;
}

.header-search{
    flex:2;
    position:relative;
}

.header-search input{
    width:80%;
    height:42px;
    border:none;
    border-radius:25px;
    padding:0 45px 0 20px;
}

.header-search i{
    position:absolute;
    right:15px;
    top:12px;
    color:#666;
}

.right{
    display:flex;
    align-items:center;
    gap:15px;
}

.right a{
    color:white;
    font-size:22px;
    text-decoration:none;
}

.location-section{
    background:#fff;
    padding:50px 20px;
}

.location-section h2{
    text-align:center;
    color:#ff4d00;
    margin-bottom:30px;
}

.location-wrapper{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    justify-content:center;
}

.location-card{
    flex:1;
    min-width:300px;
    background:#f8f8f8;
    padding:25px;
    border-radius:15px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.location-card h3{
    color:#ff6600;
}

.map-card{
    flex:1;
    min-width:350px;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.cart-container{
    width:95%;
    margin:20px auto;
    background:#f5f5f5;
    border-radius:10px;
    padding:20px;
}

.cart-header{
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr 1fr 0.8fr;
    background:#ddd;
    padding:15px;
    font-weight:bold;
    border-radius:8px;
}

.cart-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:20px 15px;
    border-bottom:1px solid #ddd;
    background:#fff;
}

.cart-product{
    display:flex;
    align-items:center;
    gap:15px;
}

.cart-product img{
    width:70px;
    height:70px;
    object-fit:contain;
}

.cart-img-box{
    display:flex;
    align-items:center;
    gap:15px;
    flex:1;
}

.cart-img{
    width:70px;
    height:70px;
    max-width:70px;
    max-height:70px;
    object-fit:contain;
    flex-shrink:0;
}

.cart-info{
    flex:1;
}
.qty-box{
    display:flex;
    align-items:center;
    gap:10px;
}

.qty-btn{
    width:35px;
    height:35px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    color:#fff;
    font-size:18px;
}

.minus-btn{
    background:#ff3b3b;
}

.plus-btn{
    background:#ff9800;
}

.remove-btn{
    color:red;
    cursor:pointer;
    font-size:20px;
}

.cart-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:25px;
}

.continue-shopping{
    color:#333;
    text-decoration:none;
}

.cart-summary{
    text-align:right;
}

.checkout-btn{
    background:linear-gradient(90deg,#ff5722,#ff9800);
    color:#fff;
    border:none;
    padding:12px 30px;
    border-radius:6px;
    cursor:pointer;
    font-size:18px;
}

@media(max-width:768px){

    .cart-header{
        display:none;
    }

    .cart-row{
        grid-template-columns:1fr;
        gap:10px;
        text-align:center;
    }

    .cart-footer{
        flex-direction:column;
        gap:20px;
    }

    .cart-product{
        justify-content:center;
    }
}

/* ===========================
CHECKOUT PAGE STYLES
=========================== */

.page-title{
text-align:center;
font-size:36px;
font-weight:700;
color:#ff6600;
margin:30px 0;
}

.login-banner{
max-width:1200px;
margin:20px auto;
background:#fff8f0;
border-left:5px solid #ff6600;
padding:25px;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.login-banner h3{
margin-top:0;
color:#ff6600;
}

.login-buttons{
margin-top:15px;
}

.login-btn,
.register-btn{
display:inline-block;
padding:12px 24px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
}

.login-btn{
background:#ff6600;
color:#fff;
}

.register-btn{
background:#333;
color:#fff;
}

.checkout-container{
    max-width:1400px;
    margin:30px auto;
    display:grid;
    grid-template-columns:40% 60%;
    gap:30px;
    padding:0 20px 30px;
}

.billing-section,
.summary-section{
background:#fff;
border-radius:12px;
padding:30px;
box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.billing-section h2,
.summary-section h2{
margin-top:0;
margin-bottom:25px;
color:#222;
}

.billing-section input,
.billing-section textarea{
width:100%;
padding:14px;
margin-bottom:15px;
border:1px solid #dcdcdc;
border-radius:8px;
font-size:15px;
box-sizing:border-box;
transition:.3s;
}

.billing-section input:focus,
.billing-section textarea:focus{
outline:none;
border-color:#ff6600;
box-shadow:0 0 0 3px rgba(255,102,0,.15);
}

.billing-section textarea{
min-height:90px;
resize:vertical;
}

#payBtn{
width:100%;
padding:16px;
border:none;
border-radius:8px;
background:linear-gradient(90deg,#ff5722,#ff9800);
color:#fff;
font-size:18px;
font-weight:bold;
cursor:pointer;
transition:.3s;
}

#payBtn:hover{
transform:translateY(-2px);
}

#summaryItems{
margin-bottom:20px;
}

.summary-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
border-bottom:1px solid #eee;
}

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

.total-box{
margin-top:20px;
font-size:24px;
font-weight:bold;
text-align:right;
color:#ff6600;
}

.summary-section hr{
border:none;
border-top:1px solid #eee;
margin:20px 0;
}

@media(max-width:768px){

.checkout-container{
    grid-template-columns:1fr;
    padding:0 15px 20px;
}

.summary-section{
    order:-1;
}

.billing-section,
.summary-section{
    padding:20px;
}

.page-title{
    font-size:28px;
}

.login-btn,
.register-btn{
    display:block;
    text-align:center;
    margin-bottom:10px;
}

}

/* Order Summary Product Images */

.summary-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
}

.summary-item img{
    width:50px;
    height:50px;
    object-fit:contain;
    border-radius:6px;
}

.summary-item .product-info{
    flex:1;
}

.summary-item .product-name{
    font-size:14px;
    font-weight:600;
}

.summary-item .product-price{
    font-size:14px;
    color:#666;
}

/* ==========================
ENQUIRY PAGE
========================== */

.enquiry-toolbar{
display:flex;
flex-wrap:wrap;
gap:15px;
padding:20px;
justify-content:center;
align-items:center;
background:#fff;
margin:20px;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.enquiry-toolbar input,
.enquiry-toolbar select{
padding:10px;
border:1px solid #ddd;
border-radius:6px;
min-width:180px;
}

.view-buttons{
display:flex;
gap:10px;
}

.view-buttons button{
padding:10px 15px;
background:#ff6600;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
}

.products-grid{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(250px,1fr));
gap:20px;
padding:20px;
}

.products-list{
display:flex;
flex-direction:column;
gap:20px;
padding:20px;
}

.products-list .product-card{
display:flex;
gap:20px;
align-items:center;
}

.products-list .product-card img{
width:140px;
height:140px;
object-fit:cover;
}

.product-card{
background:#fff;
padding:15px;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.product-card img{
width:100%;
height:220px;
object-fit:cover;
border-radius:8px;
}

.product-info{
padding-top:10px;
}

.product-info h3{
margin-bottom:10px;
}

.price{
font-size:20px;
font-weight:bold;
color:#ff6600;
margin-bottom:10px;
}

.enquiry-btn{
background:#ff6600;
color:#fff;
border:none;
padding:10px 15px;
border-radius:6px;
cursor:pointer;
}

@media(max-width:768px){

.products-list .product-card{
flex-direction:column;
}

.products-list .product-card img{
width:100%;
}

.enquiry-toolbar{
flex-direction:column;
}

}

.product-actions{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:15px;

}
.wishlist-btn{
    background:transparent !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;

    width:38px;
    height:38px;

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

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

    cursor:pointer;

    color:#b5b5b5;
    font-size:26px;

    transition:.25s ease;
}

.wishlist-btn i{
    pointer-events:none;
}

.wishlist-btn:hover{
    color:#ff6600;
    transform:scale(1.15);
}

.wishlist-btn.active{
    color:#ff6600;
}

.wishlist-btn:focus,
.wishlist-btn:active{
    background:transparent !important;
    outline:none;
}


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


#wishlistContainer{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    padding:20px;

}



.wishlist-card{

    background:white;
    padding:15px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,.15);

}



.wishlist-card img{

    width:100%;
    height:200px;
    object-fit:contain;
    border-radius:10px;

}



.wishlist-card h3{

    margin:10px 0;

}



.wishlist-qty{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin:15px;

}



.wishlist-qty button{

    width:35px;
    height:35px;
    border-radius:50%;
    font-size:20px;

}



.wishlist-add-btn{

    background:#ff6600;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;

}



.wishlist-remove-btn{


    background:#d9534f;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;

}
/*brands section*/

.brands-section{
    padding:40px 0;
    background:#fff3d8;
    text-align:center;
}

.brands-section h2{
    color:#ff7b00;
    margin-bottom:25px;
    font-size:36px;
}

.brands-slider{
    overflow:hidden;
}

.brands-track{
    display:flex;
    width:max-content;
    animation:scrollBrands 25s linear infinite;
}

.brands-track img{
    width:170px;
    margin:0 40px;
}



/* ================= ENQUIRY AUTO BLINK SLIDER ================= */
.banner-carousel{
    width:100%;
    max-width:1300px;
    margin:40px auto;
    overflow:hidden;
}

.banner-track{
    display:flex;
    gap:20px;
    transition:transform .7s ease;
}

.banner-track a{
    flex:0 0 calc((100% - 40px)/3);
}

.banner-track img{
    width:100%;
    display:block;
    border-radius:15px;
}

/* ================================
   CATEGORY PILL BUTTONS
   ================================ */

.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 15px 0;
}

.category-buttons button {
    border: none;
    padding: 10px 18px;
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;

    transition: all 0.25s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Hover */
.category-buttons button:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.25);
}

/* Click */
.category-buttons button:active {
    transform: scale(0.95);
}

/* Category Colours */

.cat-one {
    background: linear-gradient(135deg, #ff512f, #dd2476);
}

.cat-star {
    background: linear-gradient(135deg, #f7971e, #ffd200);
}

.cat-circle {
    background: linear-gradient(135deg, #4776e6, #8e54e9);
}

.cat-triangle {
    background: linear-gradient(135deg, #ff758c, #ff7eb3);
}

.cat-gangster {
    background: linear-gradient(135deg, #f12711, #f5af19);
}

.cat-forest {
    background: linear-gradient(135deg, #11998e, #38ef7d);
}

.cat-bomb {
    background: linear-gradient(135deg, #232526, #414345);
}

.cat-rainbow {
    background: linear-gradient(135deg, #396afc, #a044ff);
}

.cat-colour {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
}

.cat-sky {
    background: linear-gradient(135deg, #56ccf2, #2f80ed);
}

.cat-variety {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
}

.cat-sparkler {
    background: linear-gradient(135deg, #8360c3, #2ebf91);
}

.cat-continuous {
    background: linear-gradient(135deg, #f46b45, #eea849);
}

.cat-gift {
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
}


/* Mobile */
@media (max-width: 600px) {

    .category-buttons {
        gap: 8px;
        padding: 5px;
    }

    .category-buttons button {
        padding: 8px 13px;
        font-size: 12px;
    }
}

/*end*/

@keyframes scrollBrands{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

@media(max-width:900px){

#wishlistContainer{

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

}

}



@media(max-width:768px){

    #wishlistContainer{

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

        gap:12px;

        padding:12px;

    }

    .wishlist-card{

        padding:10px;

        min-width:0;

    }

    .wishlist-card img{

        height:130px;

        object-fit:contain;

    }

    .wishlist-card h3{

        font-size:14px;

        min-height:38px;

    }

    .wishlist-card button{

        font-size:12px;

        padding:8px 6px;

    }

}
/* MOBILE RESPONSIVE */
@media(max-width:768px){

.topbar h1{
font-size:14px;
}
.grid{
grid-template-columns:repeat(2,1fr);
}
}

/* =========================================================
   REQUESTED MOBILE / GLOBAL ADDITIONS
   Existing desktop styles remain above.
========================================================= */
.site-mobile-sidebar,.site-mobile-overlay,.site-mobile-bottom,.site-cart-widget,.site-warning-overlay{display:none}

@media (min-width:769px){
    .menu-btn{display:none !important}
    .site-mobile-sidebar,.site-mobile-overlay,.site-mobile-bottom{display:none !important}
.site-cart-widget{
    display:block;
    position:fixed;
    right:20px;
    top:100px;
    bottom:auto;
    z-index:9998;
    font-family:Arial,sans-serif;
}
    .site-cart-toggle{display:flex;align-items:center;gap:8px;border:0;border-radius:30px;background:#ff6600;color:#fff;padding:12px 16px;box-shadow:0 4px 12px rgba(0,0,0,.25);cursor:pointer;font-weight:700;font-size:14px}
    .site-cart-toggle i{font-size:18px}.site-cart-total-label{opacity:.9;font-weight:600}.site-cart-panel{display:none;background:#fff;color:#222;margin-top:8px;padding:12px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.2);min-width:170px}.site-cart-panel.show{display:block}.site-cart-panel div{display:flex;justify-content:space-between;gap:15px;padding:5px 0}.site-cart-panel a{display:block;text-align:center;margin-top:8px;background:#ff6600;color:#fff;text-decoration:none;padding:8px;border-radius:8px}
    /* Better desktop category cards, as requested */
    .categories{gap:14px;padding:16px 20px;max-width:1200px;margin:0 auto 10px}
    .categories button{min-width:150px;padding:11px 20px;border-radius:12px;background:linear-gradient(135deg,#fff7ed,#ffe7c7);border:1px solid #ffbf70;color:#ff4d00;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.08);font-size:15px}
    .categories button:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(255,102,0,.18)}
    .categories button:first-child{background:linear-gradient(90deg,#ff4d00,#ff9900);color:#fff;border-color:transparent}
}

@media (max-width:768px){
    body{padding-bottom:74px;overflow-x:hidden}
    .menu-btn{display:block !important;font-size:25px;background:none;border:none;color:white;cursor:pointer;flex-shrink:0}
    .topbar{flex-wrap:wrap;gap:6px;padding:8px 10px}
    .brand{min-width:0;flex:1;gap:6px}.logo{width:48px}.brand h2{font-size:17px;line-height:1.05;margin:0}
    .right{display:flex;align-items:center}.right .cart-link{display:none!important}
    .nav-bar{display:none!important}.categories{display:none!important}
    .floating-btn.cart-btn{display:none!important}
    .site-mobile-sidebar{display:block;position:fixed;top:0;left:-290px;width:280px;height:100vh;background:#fff;z-index:10002;box-shadow:5px 0 25px rgba(0,0,0,.3);overflow-y:auto;transition:left .3s ease}
    .site-mobile-sidebar.open{left:0}
    .site-mobile-title{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-sizing:border-box;background:linear-gradient(90deg,#ff4d00,#ff9900);color:#fff;font-size:21px;font-weight:700}
    .site-mobile-title button{background:transparent!important;color:#fff!important;border:0!important;font-size:22px;padding:5px!important;margin:0!important}
    .site-mobile-sidebar>a{display:flex;align-items:center;gap:13px;width:100%;padding:16px 18px;box-sizing:border-box;background:#fff;color:#222;text-decoration:none;border-bottom:1px solid #eee;font-size:16px;font-weight:600}
    .site-mobile-sidebar>a i{width:20px;text-align:center;color:#ff6600}
    .site-category-toggle{width:100%!important;height:55px;display:flex!important;align-items:center;justify-content:space-between;padding:0 18px!important;margin:0!important;border:0!important;border-bottom:1px solid #eee!important;border-radius:0!important;background:#fff!important;color:#222!important;font-size:16px!important;font-weight:600;text-align:left}
    .site-category-toggle span{display:flex;align-items:center;gap:13px}.site-category-toggle i{width:20px;color:#ff6600;text-align:center}.site-category-toggle b{font-size:25px;color:#ff6600}
    .site-category-submenu{display:none;background:#fff7ef}.site-category-submenu.show{display:block}.site-category-submenu a{display:block;padding:13px 18px 13px 48px;color:#333;text-decoration:none;font-size:14px;font-weight:600;border-bottom:1px solid #f1e5d9}
    .site-mobile-overlay{display:block!important;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:10000;opacity:0;visibility:hidden;transition:.25s}.site-mobile-overlay.show{opacity:1;visibility:visible}
    .site-mobile-bottom{display:flex!important;position:fixed;left:0;right:0;bottom:0;width:100%;height:68px;background:#fff;box-shadow:0 -3px 15px rgba(0,0,0,.18);z-index:9999}
    .site-mobile-bottom a{position:relative;flex:1;height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:#555;font-size:10px;font-weight:600}.site-mobile-bottom a i{font-size:20px}.site-bottom-cart b{position:absolute;top:7px;right:calc(50% - 22px);min-width:17px;height:17px;padding:0 3px;display:flex;align-items:center;justify-content:center;background:#ff4d00;color:#fff;border-radius:50%;font-size:10px}
    .site-cart-widget{display:block;position:fixed;right:12px;bottom:82px;z-index:9998}.site-cart-toggle{display:flex;align-items:center;gap:6px;border:0;border-radius:25px;background:#ff6600;color:#fff;padding:9px 12px;box-shadow:0 4px 12px rgba(0,0,0,.25);font-size:12px;font-weight:700}.site-cart-total-label{display:none}.site-cart-panel{display:none;background:#fff;color:#222;margin-bottom:7px;padding:10px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.2);min-width:155px}.site-cart-panel.show{display:block}.site-cart-panel div{display:flex;justify-content:space-between;padding:4px 0}.site-cart-panel a{display:block;text-align:center;margin-top:7px;background:#ff6600;color:#fff;text-decoration:none;padding:7px;border-radius:8px}
    .site-warning-card{width:calc(100% - 36px)!important;max-width:430px!important;padding:24px 20px!important}.site-warning-logo{width:100px!important}.site-warning-card h2{font-size:21px}.site-warning-card p{font-size:14px;line-height:1.55}
}

/* Warning modal */
.site-warning-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:20000;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}.site-warning-overlay.show{display:flex}.site-warning-card{width:min(520px,100%);background:#fff;border-radius:20px;padding:30px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}.site-warning-logo{width:130px;height:130px;object-fit:contain}.site-warning-icon{font-size:30px}.site-warning-card h2{margin:8px 0;color:#d83b00}.site-warning-card p{color:#333;line-height:1.65}.site-warning-card button{background:linear-gradient(90deg,#ff4d00,#ff9900);border:0;color:#fff;border-radius:25px;padding:11px 22px;font-weight:700;cursor:pointer}


/* Final cart widget: cart icon + live total only, fixed at bottom-left. */
.admin-login-link{display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:20px;padding:5px}
.site-cart-widget{display:block!important;position:fixed!important;left:18px!important;right:auto!important;bottom:22px!important;top:auto!important;z-index:9998!important;font-family:Arial,sans-serif}
.site-cart-toggle{display:flex!important;align-items:center!important;gap:9px!important;text-decoration:none!important;border:0!important;border-radius:999px!important;background:#ff6600!important;color:#fff!important;padding:12px 16px!important;box-shadow:0 5px 16px rgba(0,0,0,.28)!important;font-weight:800!important}
.site-cart-toggle i{font-size:20px!important}.site-cart-total-label,.site-cart-panel{display:none!important}
@media(max-width:768px){
  .site-cart-widget{left:12px!important;bottom:80px!important}
  .site-cart-toggle{padding:10px 13px!important;font-size:13px!important}
  .admin-login-link{font-size:18px}
  .cart-row{display:flex!important;flex-direction:row!important;align-items:center!important;text-align:left!important;gap:12px!important;padding:12px 8px!important}
  .cart-img-box{flex:0 0 110px!important;display:flex!important;flex-direction:column!important;gap:8px!important;align-items:center!important}
  .cart-img{width:78px!important;height:78px!important;max-width:78px!important;max-height:78px!important;object-fit:contain!important;display:block!important}
  .cart-info{min-width:0!important;flex:1!important}
  .cart-info h3{font-size:16px!important;margin:0 0 8px!important}
  .qty-box{gap:7px!important}
}

/* =========================================================
   FINAL MOBILE LAYOUT FIXES - requested without changing desktop
========================================================= */
.card img,.product-card img,.products-list .product-card img{object-fit:contain!important;background:#fff}

@media(max-width:768px){
  .topbar{position:sticky;top:0;z-index:10001;display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;padding:8px 10px!important}
  .menu-btn{grid-column:1;grid-row:1}
  .brand{grid-column:2;grid-row:1;min-width:0!important}
  .brand h2{font-size:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .right{grid-column:3;grid-row:1;gap:10px!important}
  .right a{display:inline-flex!important}
  .right .cart-link{display:none!important}
  .header-search{grid-column:1/-1;grid-row:2;width:100%!important;flex:none!important;margin:4px 0 1px}
  .header-search input{width:100%!important;height:40px;box-sizing:border-box}
  .header-search i{right:16px!important}
  .site-mobile-bottom a{font-size:9px!important}
  .site-mobile-bottom a i{font-size:18px!important}
  .site-mobile-bottom{height:68px!important}
  .site-mobile-bottom a{height:68px!important}
  .floating-btn.whatsapp-btn{right:14px!important;bottom:154px!important;width:52px!important;height:52px!important;font-size:25px!important;z-index:9997!important}
  .floating-btn.instagram-btn{right:14px!important;bottom:214px!important;width:52px!important;height:52px!important;font-size:25px!important;z-index:9997!important}
  .site-cart-widget{bottom:80px!important}
  .offer-image{margin-top:0}
}
/* =====================================================
   ENQUIRE NOW - MOBILE 3 PRODUCTS PER ROW
===================================================== */

@media (max-width: 768px) {

    #productContainer.products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    #productContainer.products-grid .product-card {
        padding: 7px !important;
        min-width: 0 !important;
    }

    #productContainer.products-grid .product-card img {
        width: 100% !important;
        height: 105px !important;
        object-fit: contain !important;
        background: #fff !important;
        border-radius: 6px !important;
    }

    #productContainer.products-grid .product-info {
        padding-top: 6px !important;
    }

    #productContainer.products-grid .product-info h3 {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin: 0 0 6px !important;
        min-height: 30px;
        overflow: hidden;
    }

    #productContainer.products-grid .price {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    #productContainer.products-grid .qty-box {
        justify-content: center !important;
        gap: 5px !important;
        margin: 5px 0 !important;
    }

    #productContainer.products-grid .qty-box button {
        width: 25px !important;
        height: 25px !important;
        padding: 0 !important;
        font-size: 16px !important;
    }

    #productContainer.products-grid .product-actions {
        margin-top: 7px !important;
        gap: 5px !important;
    }

    #productContainer.products-grid .btn-primary {
        font-size: 10px !important;
        padding: 7px 4px !important;
        flex: 1 !important;
        white-space: nowrap;
    }

    #productContainer.products-grid .wishlist-btn {
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0;
    }
}
/* Prevent mobile double-tap zoom */
html,
body {
    touch-action: manipulation;
}
/* Wishlist Stock Out */

.stock-out-badge{
    background:#d62828;
    color:white;
    font-weight:bold;
    padding:7px 10px;
    border-radius:8px;
    margin-bottom:10px;
    font-size:13px;
}

.stock-out-btn{
    background:#999 !important;
    cursor:not-allowed !important;
}

.wishlist-card button:disabled{
    opacity:.6;
    cursor:not-allowed;
}
/* Instagram Style Reels Loader */

.reels-loader{

    min-height:70vh;

    background:#000;

    display:flex;

    align-items:center;

    justify-content:center;

}


.reels-spinner{

    width:45px;

    height:45px;

    border:4px solid rgba(255,255,255,.25);

    border-top:4px solid #fff;

    border-radius:50%;

    animation:reelsSpin .8s linear infinite;

}


@keyframes reelsSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* =========================================================
   CART VALUE TOGGLE - GREEN ROUND STYLE
========================================================= */

.site-cart-toggle{
    background:#28a745 !important;
    color:#fff !important;
    border-radius:50px !important;
}

.site-cart-toggle:hover{
    background:#218838 !important;
}

/* =========================================================
   HOME PRODUCT GRID - 3 ITEMS PER ROW ON MOBILE
========================================================= */

@media (max-width:768px){

    #productList.grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
        padding:8px !important;
    }

    #productList.grid .card{
        padding:7px !important;
        min-width:0 !important;
    }

    #productList.grid .card img{
        width:100% !important;
        height:105px !important;
        object-fit:contain !important;
    }

    #productList.grid .card h3{
        font-size:12px !important;
        line-height:1.25 !important;
        min-height:30px;
        overflow:hidden;
        margin:6px 0;
    }

    #productList.grid .card p{
        font-size:13px !important;
    }

    #productList.grid .card > div{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:4px;
    }

    #productList.grid .card button{
        font-size:10px;
        padding:6px 5px;
    }

}

/* CART VALUE - GREEN CIRCLE */

.site-cart-toggle{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;

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

    background:#28a745 !important;
    color:#fff !important;
    border:0 !important;

    border-radius:50% !important;

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

    gap:2px !important;

    box-sizing:border-box !important;

    box-shadow:0 4px 12px rgba(0,0,0,.25) !important;

    text-decoration:none !important;
}

.site-cart-toggle i{
    font-size:18px !important;
    line-height:18px !important;
}

.site-cart-toggle strong{
    color:#fff !important;
    font-size:11px !important;
    line-height:13px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}


@media(max-width:768px){

    .site-cart-toggle{
        width:54px !important;
        height:54px !important;
        min-width:54px !important;
        min-height:54px !important;

        border-radius:50% !important;
    }

    .site-cart-toggle i{
        font-size:17px !important;
    }

    .site-cart-toggle strong{
        font-size:10px !important;
    }

}
/* =========================================================
   CHECKOUT ORDER SUMMARY - CLEAN UNIFORM ALIGNMENT
   CSS ONLY - DO NOT CHANGE EXISTING JAVASCRIPT
========================================================= */

#summaryItems {
    width: 100%;
    box-sizing: border-box;
}

#summaryItems .summary-item {
    width: 100% !important;
    min-height: 92px !important;
    height: 92px !important;

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

    column-gap: 18px !important;

    align-items: center !important;

    box-sizing: border-box !important;

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

    border-bottom: 1px solid #e5e5e5 !important;
}


/* IMAGE - SAME SIZE FOR EVERY PRODUCT */

#summaryItems .summary-item > img {
    width: 65px !important;
    height: 65px !important;

    object-fit: contain !important;

    display: block !important;

    margin: 0 auto !important;
}


/* PRODUCT DETAILS - SAME STARTING POINT */

#summaryItems .summary-item > div {
    min-width: 0 !important;
    width: 100% !important;

    height: 65px !important;

    display: grid !important;

    grid-template-rows: 22px 21px 21px !important;

    row-gap: 1px !important;

    align-content: center !important;

    box-sizing: border-box !important;
}


/* PRODUCT NAME */

#summaryItems .summary-item > div h4 {
    width: 100% !important;

    height: 22px !important;
    min-height: 22px !important;

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

    font-size: 15px !important;
    line-height: 22px !important;

    display: block !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/* PRICE ROW */

#summaryItems .summary-item > div p {
    width: 100% !important;

    height: 21px !important;
    min-height: 21px !important;

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

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

    line-height: 21px !important;
}


/* OLD PRICE */

#summaryItems .summary-item > div p span {
    margin-right: 8px !important;
    line-height: 21px !important;
}


/* CURRENT PRICE */

#summaryItems .summary-item > div p strong {
    line-height: 21px !important;
}


/* QUANTITY ROW */

#summaryItems .summary-item > div p:nth-of-type(2) {
    height: 21px !important;
    min-height: 21px !important;

    margin: 0 !important;

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

    line-height: 21px !important;
}


/* HIDE REDUNDANT DUPLICATE SUBTOTAL
   Existing JS prints the subtotal twice.
   This only hides the second copy visually. */

#summaryItems .summary-item > div > strong:last-child {
    display: none !important;
}


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

@media (max-width: 768px) {

    #summaryItems .summary-item {
        height: 88px !important;
        min-height: 88px !important;

        grid-template-columns: 68px minmax(0, 1fr) !important;

        column-gap: 12px !important;

        padding: 9px 0 !important;
    }


    #summaryItems .summary-item > img {
        width: 60px !important;
        height: 60px !important;
    }


    #summaryItems .summary-item > div {
        height: 60px !important;

        grid-template-rows: 20px 20px 20px !important;

        row-gap: 0 !important;
    }


    #summaryItems .summary-item > div h4 {
        height: 20px !important;
        min-height: 20px !important;

        font-size: 14px !important;
        line-height: 20px !important;
    }


    #summaryItems .summary-item > div p {
        height: 20px !important;
        min-height: 20px !important;

        font-size: 13px !important;
        line-height: 20px !important;
    }


    #summaryItems .summary-item > div p span,
    #summaryItems .summary-item > div p strong {
        line-height: 20px !important;
    }


    #summaryItems .summary-item > div p:nth-of-type(2) {
        height: 20px !important;
        min-height: 20px !important;

        line-height: 20px !important;
    }

}