css
/* =========================================================
   KARINKASHI DESIGNS
   PREMIUM E-COMMERCE WEBSITE
   CLEAN MASTER STYLE.CSS
========================================================= */


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    width:100%;
    overflow-x:hidden;
}

body{
    font-family:'Poppins',sans-serif;
    background:#faf8f5;
    color:#222;
    line-height:1.6;
    overflow-x:hidden;
    width:100%;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

button{
    cursor:pointer;
}

:root{
    --gold:#C9A227;
    --gold-dark:#9D7437;
    --brown:#8B5E3C;
    --brown-dark:#6D4C41;
    --dark:#1F1F1F;
    --light:#FFFFFF;
    --grey:#666;
    --bg:#FAF8F5;
    --cream:#FAF7F2;
}

.container{
    width:90%;
    max-width:1300px;
    margin:0 auto;
}

/* =========================================================
   ANNOUNCEMENT BAR
========================================================= */

.announcement-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: 32px !important;

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

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

    overflow: hidden !important;

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

    z-index: 1000000 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ANNOUNCEMENT TRACK
========================================================= */

.announcement-track {
    display: flex !important;
    align-items: center !important;

    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;

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

    white-space: nowrap !important;
    flex-shrink: 0 !important;

    animation: announcementScroll 22s linear infinite !important;
}


/* =========================================================
   ANNOUNCEMENT ITEMS
========================================================= */

.announcement-track > span {
    display: inline-flex !important;
    align-items: center !important;

    width: max-content !important;
    max-width: none !important;

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

    color: #fff !important;

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

    letter-spacing: 1.2px !important;
    line-height: 32px !important;

    white-space: nowrap !important;

    flex: 0 0 auto !important;
}


/* =========================================================
   COUPON MESSAGE
========================================================= */

.announcement-track .coupon-announcement {
    display: inline-block !important;

    width: max-content !important;
    max-width: none !important;

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

    white-space: nowrap !important;

    flex: 0 0 auto !important;
}


/* =========================================================
   SHIPPING VALUE
========================================================= */

.announcement-track .shipping-threshold {
    display: inline-block !important;

    width: max-content !important;
    max-width: none !important;

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

    white-space: nowrap !important;

    flex: 0 0 auto !important;
}


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

.announcement-track i {
    margin-right: 6px !important;
    flex-shrink: 0 !important;
}


/* =========================================================
   ANNOUNCEMENT SCROLL
========================================================= */

@keyframes announcementScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}
/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

    .announcement-bar {
        height: 30px !important;
    }

    .announcement-track > span {
        margin: 0 20px !important;
        font-size: 9px !important;
        letter-spacing: 0.9px !important;
        line-height: 30px !important;
    }

}
/* =========================================================
   NAVBAR — FINAL CLEAN VERSION
========================================================= */

.navbar{
    position:fixed;
    top:32px;
    left:0;

    width:100%;
    height:90px;

    background:#fff;

    display:flex;
    align-items:center;

    z-index:99999;

    box-shadow:none;
border-bottom:none;
}

.nav-container{
    width:90%;
    max-width:1300px;
    height:100%;

    margin:0 auto;

    display:grid;

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

    align-items:center;
}


/* LOGO */

.nav-container .logo{
    grid-column:1;

    justify-self:start;

    display:block;

    color:#222;

    font-size:22px;
    font-weight:600;

    line-height:1;

    white-space:nowrap;

    visibility:visible;
    opacity:1;
}



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

.nav-container nav{
    grid-column:2;

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

    width:100%;
    min-width:0;
}

.nav-container .nav-links{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;

    gap:38px;

    margin:0;
    padding:0;

    white-space:nowrap;

    /* Prevent navigation from shifting */
    width:max-content;
}

.nav-container .nav-links li{
    position:relative;

    display:block;
    flex-shrink:0;

    width:max-content;
}

.nav-container .nav-links a{
    display:block;

    color:#222;

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

    white-space:nowrap;

    transition:color .3s ease;
}

.nav-container .nav-links a:hover,
.nav-container .nav-links a.active{
    color:var(--gold);
}


/* NAV UNDERLINE */

.nav-container .nav-links li::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:var(--gold);

    transition:width .3s ease;
}

.nav-container .nav-links li:hover::after,
.nav-container .nav-links li:has(a.active)::after{
    width:100%;
}



/* RIGHT NAV ICONS */

.nav-container .nav-icons{
    grid-column:3;

    justify-self:end;

    display:flex;

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

    gap:22px;
}

.nav-container .nav-icons > i{
    display:block;

    color:#222;

    font-size:19px;

    cursor:pointer;

    transition:.3s ease;
}

.nav-container .nav-icons > i:hover{
    color:var(--gold);
}


/* CART */

.nav-container .cart-icon{
    position:relative;

    width:30px;
    height:30px;

    display:flex;

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

    color:#222;

    flex-shrink:0;
}

.nav-container .cart-icon i{
    display:block;

    color:#222;

    font-size:20px;

    transition:.3s ease;
}

.nav-container .cart-icon:hover i{
    color:var(--gold);
}


/* CART COUNT */

.nav-container .cart-count{
    position:absolute;

    top:-8px;
    right:-10px;

    width:20px;
    height:20px;

    display:flex;

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

    background:var(--gold);

    color:#fff;

    border-radius:50%;

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

    line-height:1;
}


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

.hero{
    position:relative;

    min-height:75vh;

    margin-top:90px;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
        rgba(20,20,20,.20),
        rgba(20,20,20,.20)
    ),
    url("images/Banner.jpg") center center/cover no-repeat;

    overflow:hidden;
}

.hero-content{
    width:90%;
    max-width:1300px;

    margin:0 auto;
}

.hero-text{
    max-width:550px;

    color:#fff;

    animation:fadeUp .8s ease;
}

.hero-subtitle{
    display:inline-block;

    margin-bottom:18px;

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

    color:#E8D7B3;

    font-size:14px;
}

.hero h1,
.hero-text h1{
    font-size:58px;

    line-height:1.1;

    max-width:520px;

    font-weight:700;

    color:#fff;

    margin-bottom:20px;
}

.hero p,
.hero-text p{
    font-size:19px;

    line-height:1.8;

    color:#F2F2F2;

    margin-bottom:40px;

    max-width:500px;
}


/* HERO BUTTONS */

.hero-buttons{
    display:flex;

    gap:15px;

    flex-wrap:wrap;
}

.btn{
    display:inline-flex;

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

    padding:18px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.35s ease;
}

.btn-gold{
    background:#B88A44;
    color:#fff;
}

.btn-gold:hover{
    background:#9D7437;

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,0,0,.25);
}

.btn-outline {
    border: 2px solid #c9a227;

    color: #fff;

    padding: 14px 35px;

    border-radius: 50px;

    transition: .3s;
}

.btn-outline:hover {
    background: #c9a227;
    color: #fff;
}


/* HERO ANIMATION */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* =========================================================
   HERO SLIDER
========================================================= */

.hero-slider {
    position: relative;
    margin-top: 90px;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    border: none;
}

.slide{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    opacity:0;

    transform:scale(1);

    transition:
        opacity .8s ease-in-out,
        transform 5s ease;
}

.slide.active{
    opacity:1;
    z-index:1;
    transform:scale(1);
}
.hero-overlay{
    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

    z-index:1;
}

.hero-slider .hero-content{
    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    align-items:center;
}


/* SLIDER BUTTONS */

.slider-btn{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.45);

    color:#fff;

    font-size:30px;

    font-weight:bold;

    z-index:10;

    display:flex;

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

    transition:.3s;
}

.slider-btn:hover{
    background:var(--gold);
}

.prev{
    left:20px;
}

.next{
    right:20px;
}


/* SLIDER DOTS */

.slider-dots{
    position:absolute;

    left:50%;
    bottom:30px;

    transform:translateX(-50%);

    display:flex;

    gap:10px;

    z-index:10;
}

.dot{
    width:12px;
    height:12px;

    border-radius:50%;

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

    cursor:pointer;
}

.dot.active{
    background:var(--gold);
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

section{
    padding:100px 0;
}

.section-title{
    text-align:center;

    margin-bottom:60px;
}

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

    font-weight:700;

    color:var(--dark);

    margin-bottom:15px;
}

.section-title p{
    max-width:700px;

    margin:auto;

    color:var(--grey);

    font-size:18px;

    line-height:1.8;
}


/* =========================================================
   COLLECTIONS
========================================================= */

.collections{
    background:#faf7f2;

    padding:90px 0;
}

.collection-grid{
    display:grid;

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

    gap:35px;
}

.collection-card{
    position:relative;

    height:430px;

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(0,0,0,.10);

    transition:.45s ease;

    background:#f8f4ef;
}

.collection-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s ease;
}

.collection-card::before{
    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.72),
        rgba(0,0,0,.12),
        transparent
    );

    z-index:1;
}

.collection-card:hover{
    transform:translateY(-12px);

    box-shadow:0 25px 55px rgba(0,0,0,.18);
}

.collection-card:hover img{
    transform:scale(1.08);
}

.collection-content{
    position:absolute;

    left:30px;
    right:30px;
    bottom:30px;

    z-index:2;
}

.collection-content h3{
    color:#fff;

    font-size:30px;

    margin-bottom:15px;

    font-weight:600;
}

.collection-content a{
    display:inline-block;

    background:#B88A44;

    color:#fff;

    padding:12px 24px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;
}

.collection-content a:hover{
    background:#9d7437;
}


/* =========================================================
   BEST SELLERS
========================================================= */

.best-sellers{
    background:#faf8f5;

    text-align:center;
}

.best-sellers .section-title{
    margin-bottom:30px;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-us{
    background:#fff;

    text-align:center;
}

.why-grid{
    display:grid;

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

    gap:35px;

    margin-top:50px;
}

.why-card{
    background:#faf8f5;

    padding:40px;

    border-radius:18px;

    text-align:center;

    transition:.35s;
}

.why-card:hover{
    transform:translateY(-8px);

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

.why-card i{
    font-size:48px;

    color:var(--gold);

    margin-bottom:20px;
}

.why-card h3{
    font-size:24px;

    margin-bottom:15px;
}

.why-card p{
    color:var(--grey);

    line-height:1.8;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.newsletter{
    padding:100px 20px;

    background:#faf8f4;

    text-align:center;
}

.newsletter h2{
    font-size:52px;

    margin-bottom:20px;
}

.newsletter p{
    font-size:20px;

    color:#666;

    max-width:700px;

    margin:0 auto 45px;

    line-height:1.8;
}

.newsletter-form{
    display:flex;

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

    gap:15px;

    flex-wrap:wrap;
}

.newsletter-form input{
    width:420px;

    max-width:90%;

    padding:18px 22px;

    border:1px solid #ddd;

    border-radius:50px;

    font-size:17px;

    outline:none;
}

.newsletter-form button{
    background:#c79a2b;

    color:#fff;

    border:none;

    padding:18px 40px;

    border-radius:50px;

    font-size:17px;

    transition:.3s;
}

.newsletter-form button:hover{
    background:#111;
}


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

.footer{
    background:#111;

    color:#fff;

    padding:70px 0 20px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:40px;
    align-items:start;
}
/* =========================================================
   FOOTER SOCIAL BRAND ICONS
========================================================= */

.footer-social{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:22px;
}

.footer-social a{
    font-size:25px;
    text-decoration:none;
    transition:transform .3s ease, opacity .3s ease;
}

.footer-social a:nth-child(1){
    color:#E4405F;
}

.footer-social a:nth-child(2){
    color:#25D366;
}

.footer-social a:nth-child(3){
    color:#1877F2;
}

.footer-social a:nth-child(4){
    color:#0A66C2;
}

.footer-social a:hover{
    transform:translateY(-3px);
    opacity:.8;
}
.footer h3{
    font-size:30px;

    margin-bottom:20px;
}

.footer h4{
    margin-bottom:20px;

    font-size:22px;
}

.footer p{
    color:#ccc;

    line-height:1.8;
}

.footer ul{
    list-style:none;

    padding:0;
}

.footer ul li{
    margin-bottom:12px;
}

.footer ul li a{
    color:#ccc;

    transition:.3s;
}

.footer ul li a:hover{
    color:#c79a2b;
}

.copyright{
    border-top:1px solid #333;

    margin-top:50px;

    padding-top:25px;

    text-align:center;

    color:#999;
}


/* =========================================================
   WHATSAPP FLOAT
========================================================= */

.whatsapp-float{
    position:fixed;

    bottom:30px;
    right:30px;

    width:65px;
    height:65px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;

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

    font-size:34px;

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

    z-index:9999;

    transition:.3s;
}

.whatsapp-float:hover{
    transform:scale(1.1);

    background:#1ebe5d;
}


/* =========================================================
   SHOP PAGE BANNER
========================================================= */

.page-banner{
    margin-top:90px;
    padding:15px 20px 25px;

    background:#dfe8f0;

    text-align:center;

    border-radius:0 0 28px 28px;

    border-bottom:1px solid rgba(201,162,39,0.35);

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

    position:relative;
    overflow:hidden;
}

/* subtle premium gold highlight */
.page-banner::after{
    content:"";

    position:absolute;

    left:8%;
    right:8%;
    bottom:0;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(201,162,39,0.7),
        transparent
    );
}


/* ===== SHOP BANNER CONTENT ===== */

.page-banner-content{
    position:relative;
    z-index:2;
}


/* ===== SHOP BANNER HEADING ===== */

.page-banner h1{
    font-size:48px;

    color:var(--dark);

    margin-bottom:15px;

    letter-spacing:0.5px;
}


/* ===== SHOP BANNER TEXT ===== */

.page-banner p{
    max-width:700px;

    margin:0 auto;

    color:var(--grey);

    font-size:18px;

    line-height:1.8;
}

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

.shop-section{
    padding:40px 0 80px;
}
.shop-top{
    display:flex;

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

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:30px;
}

.shop-top input,
.shop-top select{
    flex:1;

    min-width:250px;

    padding:14px 18px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:16px;

    outline:none;

    background:#fff;
}

.shop-top select{
    flex:0 0 220px;
}

.category-buttons{
    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:25px;
}

.category-buttons button{
    padding:12px 24px;

    border:none;

    border-radius:30px;

    background:#eee;

    font-size:15px;

    transition:.3s;
}

.category-buttons button:hover,
.category-buttons button.active{
    background:var(--gold);

    color:#fff;
}


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

.products-grid{
    display:grid;

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

    gap:30px;
}


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

.product-card{
    position:relative;

    display:flex;

    flex-direction:column;

    background:#fff;

    border:2px solid #e5e5e5;

    border-radius:18px;

    overflow:hidden;

    transition:.35s ease;

    cursor:pointer;
}

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

    border-color:#6d4c41;

    box-shadow:0 18px 45px rgba(0,0,0,.15);
}

.product-image{
    position:relative;

    overflow:hidden;
}

.product-image img{
    width:100%;
    height:320px;

    object-fit:contain;

    transition:.5s ease;
}

.product-card:hover .product-image img{
    transform:scale(1.08);
}

.product-card > img{
    width:100%;
    height:220px;

    object-fit:cover;
}

.product-card h3{
    padding:18px;

    margin:0;
}

.product-card input{
    display:none;
}

.product-card:has(input:checked){
    border:3px solid #6d4c41;

    box-shadow:0 15px 35px rgba(109,76,65,.25);
}


/* BADGE */

.product-badge{
    position:absolute;

    top:15px;
    left:15px;

    background:var(--gold);

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

    z-index:10;
}


/* PRODUCT OVERLAY */



/* PRODUCT INFO */

.product-info{
    padding:25px;

    text-align:center;

    flex:1;
}

.product-info h3{
    font-size:20px;

    margin-bottom:10px;

    color:#222;
}


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

.product-price{
    display:flex;

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

    gap:8px;

    flex-wrap:wrap;

    margin-top:8px;
}

.price{
    color:#000;

    font-size:18px;

    font-weight:700;
}

.old-price{
    text-decoration:line-through;

    color:#999;

    font-size:14px;
}

.discount{
    display:inline-block;

    background: #7A1F3D !important;

   color: #ffffff !important;

    padding:2px 8px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;
}


/* =========================================================
   PRODUCT BUTTONS
========================================================= */

.product-buttons{
    display:flex;

    gap:15px;

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

    flex-wrap:wrap;
}

.cart-btn,
.whatsapp-btn{
    display:inline-flex;

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

    gap:8px;

    padding:10px 18px;

    border-radius:30px;

    color:#fff;

    font-weight:600;

    transition:.3s;
}

.cart-btn{
    background:#8b5e3c;
}

.cart-btn:hover{
    transform:translateY(-3px) scale(1.05);

    background:#6d4c41;
}

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

.whatsapp-btn:hover{
    transform:translateY(-3px) scale(1.05);

    background:#1da851;
}


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

.wishlist-btn{
    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:#fff;

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

    display:flex;

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

    transition:.3s;
}

.wishlist-btn i{
    font-size:24px;

    color:#555;
}

.wishlist-btn.active i{
    color:#e63946;
}

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

    background:#d4af37;

    color:#fff;
}


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

.product-details{
    padding:80px 0;
    background:#faf8f5;
}

/* =========================================================
   PRODUCT WRAPPER
========================================================= */

.product-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}



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

.product-left{
    position:relative;

    background:#fff;

    border-radius:20px;

    padding:30px;

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

    text-align:center;
}


/* MAIN PRODUCT IMAGE */

#mainImage{
    width:100%;
    height:540px;

    object-fit:contain;

    display:block;

    margin:0 auto;
}


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

.prev-img,
.next-img{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:#fff;

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

    cursor:pointer;

    font-size:20px;

    z-index:2;

    transition:.3s;
}

.prev-img{
    left:15px;
}

.next-img{
    right:15px;
}

.prev-img:hover,
.next-img:hover{
    background:#b88a44;
    color:#fff;
}


/* =========================================================
   PRODUCT THUMBNAILS
========================================================= */

.product-thumbnails{
    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:20px;

    flex-wrap:wrap;
}

.product-thumbnail{
    width:80px;
    height:80px;

    padding:0;

    background:#fff;

    border:2px solid transparent;

    border-radius:12px;

    overflow:hidden;

    cursor:pointer;

    transition:.3s;
}

.product-thumbnail img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.product-thumbnail:hover{
    border-color:#b88a44;
}

.product-thumbnail.active{
    border-color:#b88a44;
}


/* =========================================================
   PRODUCT RIGHT
========================================================= */

.product-right{
    padding-top:0;
}


/* PRODUCT NAME */

.product-title{
    margin:0 0 12px;

    font-size:38px;

    line-height:1.2;

    font-weight:600;
}


/* RATING */

.rating{
    margin-bottom:20px;

    font-size:15px;
}


/* PRICE */

.product-price{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;
}

.price{
    font-size:28px;

    font-weight:600;
}

.old-price{
    font-size:18px;

    text-decoration:line-through;

    opacity:.6;
}

.discount{
    font-size:14px;

    font-weight:600;

    color:#b88a44;
}


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

@media(max-width:768px){
  
    .product-details{
        padding:40px 20px;
    }

    .product-wrapper{
        grid-template-columns:1fr;

        gap:35px;
    }

    .product-left{
        padding:20px;
    }

    #mainImage{
        height:400px;
    }

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

}
/* ================= ANNOUNCEMENT BAR — MOBILE ================= */

@media (max-width: 850px) {

    .announcement-bar{
        height:30px;
    }

    .announcement-track span{
        margin:0 20px;
        font-size:9px;
        letter-spacing:0.9px;
        line-height:30px;
    }

    .navbar{
        top:30px;
    }

}
/* ================= SIZE ================= */

.size-selection {
    margin: 25px 0;
}

.size-selection h3 {
    margin-bottom: 15px;
    font-size: 20px;
}

.size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.size-option {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 16px;
}

.size-option input {
    cursor: pointer;
}

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

.quantity-box {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.quantity-box button {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.quantity-box input {
    width: 55px;
    height: 40px;
    text-align: center;
}

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

.purchase-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.purchase-buttons button,
.whatsapp-btn {
    padding: 13px 22px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    font-size: 15px;
}

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

@media (max-width: 768px) {


    .product-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
    .product-left {
        min-height: auto;
    }

    #mainImage {
    width: auto;
    max-width: 380px;
    height: 380px;
    object-fit: contain;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}
    .product-title {
        font-size: 32px;
    }

    .product-details {
        padding: 40px 0;
    }

}


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

.product-content h2{
    font-size:40px;

    margin-bottom:20px;
}

.product-title{
    font-size:42px;

    margin-bottom:15px;
}

.product-short-description{
    color:#666;

    line-height:1.8;

    margin-bottom:35px;
}

.product-description{
    font-size:18px;

    line-height:1.8;

    margin-bottom:25px;

    color:#555;
}

.rating{
    color:#f4a825;

    font-size:18px;

    margin-bottom:15px;
}


/* PRODUCT PRICE DETAILS */

.price-section{
    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;
}

.current-price{
    font-size:34px;

    font-weight:700;

    color:#111;
}

.product-price-large{
    font-size:34px;

    color:#b88a44;

    font-weight:bold;
}


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

.product-actions{
    display:flex;

    gap:20px;

    align-items:center;

    margin:35px 0;

    flex-wrap:wrap;
}

.quantity-box{
    display:flex;

    align-items:center;

    border:1px solid #ddd;

    border-radius:10px;

    overflow:hidden;
}

.quantity-box button{
    width:45px;
    height:45px;

    border:none;

    background:#f3f3f3;

    font-size:18px;
}

.quantity-box input{
    width:55px;

    height:45px;

    border:none;

    text-align:center;

    font-size:16px;

    background:#fff;
}


/* =========================================================
   PURCHASE BUTTONS
========================================================= */

.purchase-buttons{
    display:flex;

    gap:15px;

    margin-top:25px;

    flex-wrap:wrap;
}

.purchase-buttons button,
.purchase-buttons a{
    padding:15px 28px;

    border:none;

    border-radius:10px;

    font-size:16px;
}

.cart-btn-large{
    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 30px;

    background:#111;

    color:#fff;

    border-radius:50px;

    transition:.3s;
}

.cart-btn-large:hover{
    background:#b88a44;
}

.buy-btn{
    background:#c58a2d;

    color:#fff;
}

.buy-now-btn{
    display:inline-block;

    padding:16px 35px;

    background:#25D366;

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.3s;
}

.buy-now-btn:hover{
    transform:translateY(-3px);
}


/* =========================================================
   PRODUCT META
========================================================= */

.product-meta{
    margin:30px 0;

    padding:25px;

    background:#fff;

    border-radius:15px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.meta-item{
    display:flex;

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

    padding:12px 0;

    border-bottom:1px solid #eee;
}

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

.meta-item strong{
    color:#222;
}

.meta-item span{
    color:#666;
}

.in-stock{
    color:#0b8f43 !important;

    font-weight:600;
}

.stock{
    color:green;

    font-weight:bold;

    margin-top:20px;
}


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

.product-description-box{
    margin-top:40px;

    padding:30px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.product-description-box h3{
    margin-bottom:15px;

    font-size:24px;

    color:#222;
}

.product-description-box p{
    color:#666;

    line-height:1.9;

    margin-bottom:30px;
}

.feature-list{
    list-style:none;

    padding:0;

    margin:25px 0;
}

.feature-list li{
    padding:10px 0;

    color:#555;

    border-bottom:1px solid #f1f1f1;
}

.feature-list li:last-child{
    border-bottom:none;
}


/* =========================================================
   CART PAGE
========================================================= */

.cart-page{
    padding-top:140px;

    padding-bottom:80px;

    min-height:100vh;
}

.cart-wrapper{
    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    margin-top:40px;
}

.cart-card{
    display:flex;

    align-items:center;

    gap:20px;

    background:#fff;

    padding:20px;

    border-radius:15px;

    margin-bottom:20px;

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

.cart-card img{
    width:140px;
    height:140px;

    object-fit:cover;

    border-radius:10px;
}

.cart-card h3{
    margin-bottom:10px;
}

.cart-summary{
    background:#fff;

    padding:25px;

    border-radius:15px;

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

    height:fit-content;

    position:sticky;

    top:120px;
}

.summary-row{
    display:flex;

    justify-content:space-between;

    margin:18px 0;
}

.total-row{
    font-size:24px;

    font-weight:bold;
}

.checkout-btn{
    display:block;

    width:100%;

    text-align:center;

    background:#25D366;

    color:#fff;

    padding:15px;

    border-radius:10px;

    margin-top:25px;

    font-weight:600;
}

.checkout-btn:hover{
    background:#1ebe5d;
}


/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    top:25px;

    right:-400px;

    background:#222;

    color:#fff;

    padding:15px 25px;

    border-radius:12px;

    font-size:16px;

    font-weight:500;

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

    transition:.4s ease;

    z-index:99999;
}

.toast.show{
    right:25px;
}


/* =========================================================
   CART ANIMATION
========================================================= */

.cart-bounce{
    animation:cartBounce .5s ease;
}

@keyframes cartBounce{
    0%{
        transform:scale(1);
    }

    30%{
        transform:scale(1.35);
    }

    60%{
        transform:scale(.9);
    }

    100%{
        transform:scale(1);
    }
}


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

.checkout-page{
    background:#f8f5ef;

    padding:140px 5% 60px;

    min-height:100vh;
}

.checkout-container{
    display:flex;

    justify-content:space-between;

    gap:40px;

    max-width:1200px;

    margin:40px auto;

    align-items:flex-start;
}

.checkout-left{
    flex:2;

    background:#fff;

    padding:30px;

    border-radius:12px;

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

.checkout-right{
    flex:1;

    background:#fff;

    padding:30px;

    border-radius:12px;

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

    position:sticky;

    top:120px;
}

.checkout-left h2,
.checkout-right h2{
    margin-bottom:20px;

    color:#7a5c3e;
}

.checkout-left input,
.checkout-left textarea{
    width:100%;

    padding:14px;

    margin-bottom:18px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:15px;
}

.checkout-right input[type="text"]{
    width:100%;

    padding:14px;

    border:1px solid #ddd;

    border-radius:8px;

    margin-top:20px;
}

.coupon-btn{
    width:100%;

    margin-top:15px;

    padding:14px;

    border:none;

    background:#b8894f;

    color:#fff;

    border-radius:8px;

    font-size:16px;
}

.place-order-btn{
    width:100%;

    margin-top:30px;

    padding:16px;

    border:none;

    background:#111;

    color:#fff;

    font-size:18px;

    border-radius:8px;

    transition:.3s;
}

.place-order-btn:hover{
    background:#b8894f;
}

.checkout-right label{
    display:block;

    margin-top:15px;

    cursor:pointer;
}

.checkout-item{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin:20px 0;

    padding-bottom:15px;

    border-bottom:1px solid #eee;
}

.checkout-item img{
    width:70px;
    height:70px;

    object-fit:cover;

    border-radius:8px;
}

.checkout-item h4{
    margin:0;

    font-size:16px;
}

.checkout-item p{
    margin-top:5px;

    color:#777;

    font-size:14px;
}


/* =========================================================
   CUSTOM DESIGN — STEPS
========================================================= */

.custom-steps{
    padding:60px 0;
}

.custom-steps .container{
    display:grid;

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

    gap:25px;
}

.step{
    background:#fff;

    text-align:center;

    padding:35px 20px;

    border-radius:18px;

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

    transition:.35s;
}

.step:hover{
    transform:translateY(-8px);
}

.step span{
    width:55px;
    height:55px;

    display:flex;

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

    margin:0 auto 15px;

    border-radius:50%;

    background:#6d4c41;

    color:#fff;

    font-size:1.2rem;
}


/* =========================================================
   CUSTOM FORM
========================================================= */

.custom-form{
    padding:70px 0 100px;
}

.custom-form .container{
    max-width:900px;
}

.upload-box{
    border:3px dashed #c8b39b;

    border-radius:20px;

    padding:70px 30px;

    background:#fff;

    text-align:center;

    cursor:pointer;

    transition:.35s;
}

.upload-box:hover{
    border-color:#6d4c41;

    transform:translateY(-4px);
}

.upload-box input{
    display:none;
}

.upload-box i{
    font-size:3rem;

    color:#6d4c41;

    margin-bottom:15px;
}

.upload-box h3{
    margin-bottom:10px;
}

.preview-box{
    margin-top:30px;

    text-align:center;
}

.preview-box img{
    max-width:300px;

    display:none;

    margin:auto;

    border-radius:15px;

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


/* =========================================================
   CUSTOM PRODUCT SELECTION
========================================================= */

.product-selection{
    margin-top:50px;
}

.product-selection h2{
    text-align:center;

    margin-bottom:30px;
}

.product-grid{
    display:grid;

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

    gap:20px;
}

.product-grid label{
    border:2px solid #ddd;

    padding:25px;

    border-radius:15px;

    cursor:pointer;

    transition:.3s;

    text-align:center;

    font-weight:600;

    background:#fff;
}

.product-grid label:hover{
    border-color:#6d4c41;

    transform:translateY(-5px);
}

.product-grid input{
    margin-bottom:12px;
}


/* =========================================================
   CUSTOM FORM GROUP
========================================================= */

.form-group{
    margin-top:35px;
}

.form-group label{
    display:block;

    margin-bottom:10px;

    font-weight:600;
}

.form-group input,
.form-group textarea{
    width:100%;

    padding:15px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:1rem;

    outline:none;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:#c9a227;
}


/* SUBMIT */

.submit-design{
    margin-top:40px;

    width:100%;

    padding:18px;

    border:none;

    background:#6d4c41;

    color:#fff;

    font-size:1rem;

    border-radius:15px;

    transition:.3s;
}

.submit-design:hover{
    background:#4e342e;

    transform:translateY(-3px);
}


/* =========================================================
   CUSTOM PREMIUM HERO
========================================================= */

.premium-tag{
    display:inline-block;

    padding:12px 26px;

    background:linear-gradient(
        90deg,
        #c89b3c,
        #d8b45a
    );

    color:#fff;

    border-radius:50px;

    font-size:.9rem;

    letter-spacing:1px;

    font-weight:600;

    margin-bottom:25px;
}

.hero-stats{
    display:flex;

    gap:45px;
}

.hero-stats h3{
    font-size:2rem;

    color:#c89b3c;
}

.hero-right img{
    width:100%;

    border-radius:24px;

    box-shadow:0 30px 70px rgba(0,0,0,.18);
}


/* =========================================================
   DESIGN PRODUCTS
========================================================= */

.design-products{
    padding:90px 0;

    background:#fff;
}

.design-products h2{
    text-align:center;

    font-size:2.7rem;

    margin-bottom:15px;
}

.design-products > p{
    text-align:center;

    margin-bottom:45px;

    color:#666;
}

.design-grid{
    display:grid;

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

    gap:30px;
}

.design-card{
    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.4s;

    cursor:pointer;
}

.design-card:hover{
    transform:translateY(-10px);
}

.design-card img{
    width:100%;

    height:320px;

    object-fit:cover;
}

.design-card h3{
    padding:22px;

    text-align:center;
}


/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero{
    min-height:85vh;

    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    ),
    url("images/about-banner.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

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

    text-align:center;

    color:#fff;

    padding:120px 20px;

    margin-top:90px;
}

.about-hero-content{
    max-width:850px;
}

.about-subtitle{
    display:inline-block;

    color:#d4af37;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:20px;
}

.about-hero h1{
    font-size:58px;

    line-height:1.2;

    margin-bottom:25px;
}

.about-hero p{
    font-size:19px;

    line-height:1.9;

    max-width:750px;

    margin:0 auto 40px;
}

.about-buttons{
    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}


/* =========================================================
   OUR STORY — DESKTOP ORIGINAL ALIGNMENT
========================================================= */

@media (min-width:769px){

    .story-grid{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:60px !important;
        align-items:center !important;
    }

    .story-image{
        position:relative !important;
        width:100% !important;
        height:520px !important;
        overflow:hidden !important;
        border-radius:18px !important;
    }

    .story-image img{
    width:100% !important;
    height:460% !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
}

    .founder-badge{
    position:absolute !important;
    left:20px !important;
    right:auto !important;
    bottom:20px !important;
    z-index:5 !important;

    text-align:left !important;

    border-top:1px solid #c9a227 !important;
    padding-top:8px !important;
    width:max-content !important;
}
}

/* =========================================================
   MISSION & VISION
========================================================= */

.mission-vision{
    padding:110px 0;

    background:#fdf9f5;
}

.mission-vision-heading{
    max-width:760px;

    margin:0 auto 65px;

    text-align:center;
}

.mission-vision-heading h2{
    font-size:42px;

    line-height:1.2;

    margin-bottom:20px;

    color:#222;
}

.mission-vision-heading p{
    font-size:16px;

    line-height:1.8;

    color:#666;

    max-width:680px;

    margin:auto;
}

.mission-vision-grid{
    display:grid;

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

    gap:30px;
}

.purpose-card{
    position:relative;

    padding:50px 45px;

    background:#fff;

    border-radius:24px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 20px 50px rgba(0,0,0,.06);

    transition:.3s;

    overflow:hidden;
}

.purpose-card:hover{
    transform:translateY(-8px);

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

.purpose-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#c9a227;
}

.purpose-icon{
    width:62px;
    height:62px;

    display:flex;

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

    border-radius:50%;

    background:#f7f0e6;

    color:#b18a1d;

    font-size:24px;

    margin-bottom:28px;
}

.purpose-label{
    display:block;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    color:#b18a1d;

    margin-bottom:12px;
}

.purpose-card h3{
    font-size:29px;

    line-height:1.3;

    color:#222;

    margin-bottom:22px;
}

.purpose-card p{
    font-size:15px;

    line-height:1.85;

    color:#666;

    margin-bottom:16px;
}


/* =========================================================
   BRAND VALUES
========================================================= */

.brand-values{
    padding:110px 0;

    background:#fff;
}

.brand-values-heading{
    max-width:720px;

    margin:0 auto 60px;

    text-align:center;
}

.brand-values-heading h2{
    font-size:42px;

    line-height:1.2;

    color:#222;

    margin:15px 0 20px;
}

.brand-values-heading p{
    font-size:16px;

    line-height:1.8;

    color:#666;
}

.values-grid{
    display:grid;

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

    gap:24px;
}

.value-card{
    padding:38px 28px;

    background:#fdf9f5;

    border-radius:22px;

    text-align:center;

    border:1px solid rgba(0,0,0,.05);

    transition:.3s;
}

.value-card:hover{
    transform:translateY(-7px);

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

.value-icon{
    width:60px;
    height:60px;

    margin:0 auto 22px;

    display:flex;

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

    border-radius:50%;

    background:#fff;

    color:#b18a1d;

    font-size:23px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.value-card h3{
    font-size:21px;

    color:#222;

    margin-bottom:14px;
}

.value-card p{
    font-size:14px;

    line-height:1.75;

    color:#666;
}


/* =========================================================
   TABLET — 1100px
========================================================= */

@media(max-width:1100px){

    .nav-container{
        width:94%;
    }

    .nav-container .nav-links{
        gap:25px;
    }

    .nav-container .nav-links a{
        font-size:15px;
    }

    .nav-container .nav-icons{
        gap:16px;
    }

    .products-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .values-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


/* =========================================================
   TABLET — 992px
========================================================= */

@media(max-width:992px){

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .collection-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .why-grid{
        grid-template-columns:1fr 1fr;
    }

    .products-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .product-details-container{
        grid-template-columns:1fr;
    }

    .product-gallery{
        position:static;
    }

    .story-grid{
        grid-template-columns:1fr;
    }

    .story-content{
        text-align:center;
    }

    .founder-card{
        text-align:left;
    }

    .checkout-container{
        flex-direction:column;
    }

    .checkout-left,
    .checkout-right{
        width:100%;
    }

    .checkout-right{
        position:relative;

        top:0;
    }

    .cart-wrapper{
        grid-template-columns:1fr;
    }

    .cart-summary{
        position:relative;

        top:0;
    }

    .custom-steps .container{
        grid-template-columns:repeat(2,1fr);
    }

    .design-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mission-vision-grid{
        grid-template-columns:1fr;
    }
}




    /* HERO */

    .hero{
        margin-top:70px;

        min-height:570px;
    }

    .hero-slider{
        margin-top:70px;

        height:570px;
    }

    

    .hero-content{
        width:100%;

        padding:20px 40px;
    }

    .hero-text{
        max-width:320px;
    }

    .hero-text h1,
    .hero h1{
        font-size:32px;

        line-height:1.15;

        margin-bottom:15px;
    }

    .hero-text p,
    .hero p{
        font-size:14px;

        line-height:1.6;

        max-width:280px;

        margin-bottom:20px;
    }

    .hero-subtitle{
        font-size:11px;

        letter-spacing:2px;

        margin-bottom:12px;
    }

    .hero-buttons{
        gap:10px;
    }

    .hero-buttons .btn{
        padding:12px 20px;

        font-size:13px;
    }

    .slider-btn{
        width:38px;
        height:38px;

        font-size:20px;
    }

    .prev{
        left:10px;
    }

    .next{
        right:10px;
    }


    /* SECTIONS */

    section{
        padding:60px 0;
    }

    .section-title{
        margin-bottom:35px;
    }

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

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


    /* COLLECTIONS */

    .collections{
        padding:60px 0;
    }

    .collection-grid{
        grid-template-columns:1fr;

        gap:25px;
    }

    .collection-card{
        height:430px;
    }

    .collection-content h3{
        font-size:25px;
    }


    /* WHY US */

    .why-grid{
        grid-template-columns:1fr;

        gap:20px;
    }


    /* NEWSLETTER */

    .newsletter{
        padding:70px 20px;
    }

    .newsletter h2{
        font-size:36px;
    }

    .newsletter p{
        font-size:16px;
    }

    .newsletter-form{
        flex-direction:column;
    }

    .newsletter-form input{
        width:100%;

        max-width:100%;
    }

    .newsletter-form button{
        width:100%;
    }


    /* FOOTER */

    .footer{
        padding:60px 0 20px;
    }

    .footer-grid{
        grid-template-columns:1fr;

        text-align:center;

        gap:35px;
    }

    .footer h3{
        font-size:26px;
    }


    /* PAGE BANNER */

    .page-banner{
        margin-top:70px;

        padding:60px 20px;
    }

    .page-banner h1{
        font-size:36px;
    }

    .page-banner p{
        font-size:15px;
    }


    /* SHOP */

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

    .shop-top{
        flex-direction:column;

        align-items:stretch;
    }

    .shop-top input,
    .shop-top select{
        width:100%;

        min-width:0;

        flex:auto;
    }

    .category-buttons{
        gap:10px;
    }

    .category-buttons button{
        padding:10px 18px;

        font-size:14px;
    }

    .products-grid{
        grid-template-columns:1fr;

        gap:25px;
    }

    .product-image {
    position: relative;
}

.product-image > a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.product-image img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    cursor: pointer;
}


    /* PRODUCT DETAILS */

    .product-details{
        padding:60px 0;
    }

    .main-image{
        height:430px;
    }

    .product-content h2,
    .product-title{
        font-size:32px;
    }

    .product-short-description,
    .product-description{
        font-size:15px;
    }

    .thumbnail-images{
        gap:8px;

        overflow-x:auto;
    }

    .thumbnail-images img{
        width:70px;
        height:70px;

        flex-shrink:0;
    }

    .product-actions{
        gap:12px;
    }

    .purchase-buttons{
        flex-direction:column;

        align-items:stretch;
    }

    .purchase-buttons button,
    .purchase-buttons a{
        width:100%;

        text-align:center;
    }


    /* CART */

    .cart-page{
        padding-top:100px;

        padding-bottom:60px;
    }

    .cart-wrapper{
        margin-top:25px;
    }

    .cart-card{
        flex-direction:column;

        align-items:flex-start;
    }

    .cart-card img{
        width:100%;

        height:220px;
    }


    /* CHECKOUT */

    .checkout-page{
        padding:100px 15px 50px;
    }

    .checkout-container{
        margin:20px auto;
    }

    .checkout-left,
    .checkout-right{
        padding:20px;
    }


    /* CUSTOM */

    .custom-steps{
        padding:50px 0;
    }

    .custom-steps .container{
        grid-template-columns:1fr;
    }

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

    .design-grid{
        grid-template-columns:1fr;
    }

    .design-products{
        padding:60px 0;
    }

    .design-products h2{
        font-size:32px;
    }


    /* ABOUT */

    .about-hero{
        margin-top:70px;

        min-height:650px;

        padding:100px 20px;
    }

    .about-hero h1{
        font-size:38px;
    }

    .about-hero p{
        font-size:15px;
    }

    .story-image img{
        height:500px;
    }

    .story-content h2{
        font-size:32px;
    }

    .story-content p{
        font-size:15px;
    }

    .founder-badge{
        left:15px;

        bottom:15px;

        padding:14px 20px;
    }

    .founder-badge h3{
        font-size:19px;
    }


    /* MISSION / VISION */

    .mission-vision{
        padding:70px 0;
    }

    .mission-vision-heading{
        margin-bottom:40px;
    }

    .mission-vision-heading h2{
        font-size:31px;
    }

    .mission-vision-heading p{
        font-size:15px;
    }

    .purpose-card{
        padding:38px 28px;
    }

    .purpose-card h3{
        font-size:25px;
    }


    /* BRAND VALUES */

    .brand-values{
        padding:70px 0;
    }

    .brand-values-heading h2{
        font-size:31px;
    }

    .brand-values-heading p{
        font-size:15px;
    }

    .values-grid{
        grid-template-columns:1fr;
    }


    /* WHATSAPP */

    .whatsapp-float{
        width:58px;
        height:58px;

        font-size:30px;

        bottom:20px;
        right:20px;
    }
}


/* =========================================================
   SMALL MOBILE — 480px
========================================================= */

@media(max-width:480px){

    .navbar{
        height:65px;

        padding:0 6px;
    }

    .nav-container{
        gap:4px;
    }

    .nav-container .logo{
        font-size:10px;
    }

    .nav-container .nav-links{
        gap:5px;
    }

    .nav-container .nav-links a{
        font-size:8px;
    }

    .nav-container .nav-icons{
        gap:5px;
    }

    .nav-container .nav-icons > i{
        font-size:12px;
    }

    .nav-container .cart-icon{
        width:22px;
        height:22px;
    }

    .nav-container .cart-icon i{
        font-size:13px;
    }

    .nav-container .cart-count{
        width:14px;
        height:14px;

        top:-6px;
        right:-7px;

        font-size:7px;
    }


    /* HERO */

    .hero{
        margin-top:65px;

        min-height:570px;
    }

    .hero-slider{
        margin-top:65px;

        height:570px;
    }

    .slide{
        height:570px;
    }

    .hero-content{
        padding:20px 35px;
    }

    .hero-text h1,
    .hero h1{
        font-size:28px;
    }

    .hero-text p,
    .hero p{
        font-size:13px;
    }

    .slider-btn{
        width:34px;
        height:34px;

        font-size:17px;
    }


    /* COLLECTION */

    .collection-card{
        height:380px;
    }


    /* PRODUCTS */

    .product-image img{
        height:270px;
    }


    /* PRODUCT DETAILS */

    .main-image{
        height:350px;
    }

    .product-content h2,
    .product-title{
        font-size:28px;
    }


    /* CART */

    .cart-card img{
        height:190px;
    }


    /* ABOUT */

    .about-hero{
        margin-top:65px;
    }
}



/* =========================================================
   FINAL SAFETY
========================================================= */

.hero,
.hero-slider,
section,
.navbar,
.footer{
    max-width:100%;
}

.container{
    max-width:1300px;
}
/* =========================================================
   FINAL FIX — ABOUT + CUSTOM DESIGN PAGE ALIGNMENT
   DO NOT MODIFY NAVBAR
========================================================= */


/* =========================================================
   GLOBAL PAGE CONTAINER ALIGNMENT
========================================================= */

.about-hero-content,
.our-story > .container,
.mission-vision > .container,
.brand-values > .container,

.custom-steps > .container,
.custom-form > .container,
.design-products > .container,

.custom-hero > .container {
    width:90%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
}


/* =========================================================
   ABOUT PAGE
========================================================= */

.about-hero{
    width:100%;
    margin-top:90px;
    padding-left:0;
    padding-right:0;
}

.about-hero-content{
    text-align:center;
}

.our-story{
    width:100%;
}

.story-grid{
    width:100%;
    max-width:1300px;
    margin:0 auto;
}

.mission-vision{
    width:100%;
}

.mission-vision-heading{
    margin-left:auto;
    margin-right:auto;
}

.mission-vision-grid{
    width:100%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
}

.brand-values{
    width:100%;
}

.brand-values-heading{
    margin-left:auto;
    margin-right:auto;
}

.values-grid{
    width:100%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
}


/* =========================================================
   CUSTOM DESIGN PAGE
========================================================= */

.custom-steps{
    width:100%;
}

.custom-steps .container{
    width:90%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
}

.custom-form{
    width:100%;
}

.custom-form .container{
    width:90%;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

.design-products{
    width:100%;
}

.design-products > .container{
    width:90%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
}

.design-grid{
    width:100%;
}


/* =========================================================
   CUSTOM HERO
========================================================= */

.custom-hero,
.custom-premium-hero{
    width:100%;
}

.custom-hero .container,
.custom-premium-hero .container{
    width:90%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
}


/* =========================================================
   MOBILE — ABOUT
========================================================= */

@media(max-width:768px){

    .about-hero{
        margin-top:70px;
        padding-left:20px;
        padding-right:20px;
    }

    .about-hero-content{
        width:100%;
        max-width:100%;
    }

    .our-story > .container,
    .mission-vision > .container,
    .brand-values > .container,

    .custom-steps > .container,
    .custom-form > .container,
    .design-products > .container,

    .custom-hero > .container,
    .custom-premium-hero > .container{
        width:90%;
    }

    .story-grid{
        width:100%;
    }

    .mission-vision-grid,
    .values-grid,
    .design-grid{
        width:100%;
    }
}


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

@media(max-width:480px){

    .about-hero{
        margin-top:65px;
        padding-left:15px;
        padding-right:15px;
    }

    .our-story > .container,
    .mission-vision > .container,
    .brand-values > .container,

    .custom-steps > .container,
    .custom-form > .container,
    .design-products > .container,

    .custom-hero > .container,
    .custom-premium-hero > .container{
        width:92%;
    }
}


/* =========================================
FORCE LOGO IMAGE ON ALL PAGES
========================================= */

.navbar .logo {
    display: flex;
    align-items: center;
    width: 240px;
}

.logo img {
    width: 175px;
    height:65px;
    max-height: none;
    object-fit: contain;
    display: block;
}
/* =========================================
   REMOVE THIN LINE BETWEEN HEADER & BANNER
========================================= */

.navbar {
    box-shadow: none !important;
    border: none !important;
    border-bottom: none !important;
}

.hero-slider,
.hero,
.about-hero,
/* =========================
        SHOP PAGE BANNER
========================= */

.page-banner {
    width: 100%;
    min-height: 300px;

    background: #faf8f5;

    border-top: none !important;
    border-bottom: none !important;

    position: relative;
    overflow: hidden;
}

.page-banner-content {
    width: 100%;
    max-width: 1400px;
    min-height: 240px;

    margin: 0 auto;
    padding: 20px 60px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.page-banner-text {
    width: 45%;
}

.page-banner-text h1 {
    font-size: 46px;
    margin-bottom: 15px;
}

.page-banner-text p {
    max-width: 500px;
    font-size: 16px;
    line-height: 1.7;
}

.page-banner-image {
    width: 55%;
    height: 270px;

    overflow: hidden;
    border-radius: 8px;
}

.page-banner-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}
/* =========================
   SHOP BANNER AUTO ANIMATION
========================= */

.page-banner-image {
    overflow: hidden;
    border-radius: 8px;
    animation: shopImageFloat 4s ease-in-out infinite;
}

.page-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: shopImageZoom 6s ease-in-out infinite alternate;
}

@keyframes shopImageFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes shopImageZoom {

    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.06);
    }
}
/* =========================================
   FINAL HEADER / BANNER GAP FIX
========================================= */

.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 90px !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hero-slider {
    margin-top: 90px !important;
    border: 0 !important;
    outline: 0 !important;
}

.hero-slider::before,
.hero-slider::after {
    display: none !important;
}

.hero {
    margin-top: 90px !important;
    border: 0 !important;
    outline: 0 !important;
}

.about-hero,
.page-banner {
    border: 0 !important;
    outline: 0 !important;
}

/* =========================================
   FOOTER SOCIAL ICONS — FINAL
========================================= */

.social-links {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.social-links .social-icon {
    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #222;
    color: #fff;

    text-decoration: none;

    font-size: 20px;

    transition: all 0.3s ease;
}

.social-links .social-icon i {
    display: block;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

.social-links .social-icon:hover {
    background: #c9a227;
    color: #fff;
    transform: translateY(-3px);
}

.social-links .social-icon:hover i {
    color: #fff;
}
/* =========================================================
   FINAL FIX — HOME & ABOUT HERO BUTTONS VISIBLE
   DO NOT MODIFY NAVBAR / CONTACT PAGE
========================================================= */

/* HOME PAGE HERO SLIDER */
.hero-slider {
    margin-top: 90px !important;
    height: calc(100vh - 90px) !important;
    min-height: 600px;
    max-height: 760px;
    overflow: hidden;
}

/* HOME SLIDES */
.hero-slider .slide {
    height: 100% !important;
}

/* HOME HERO CONTENT */
.hero-slider .hero-content {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Keep text + buttons inside visible hero */
.hero-slider .hero-text {
    max-width: 550px;
    padding-bottom: 20px;
}

/* HOME BUTTONS */
.hero-slider .hero-buttons {
    margin-top: 10px;
}

/* ABOUT PAGE HERO */
.about-hero {
    margin-top: 90px !important;

    min-height: calc(100vh - 90px) !important;
    height: auto;

    padding: 70px 20px !important;

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

    overflow: hidden;

    background-image: url("images/about-banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
}

/* ABOUT CONTENT */
.about-hero-content {
    width: 90%;
    max-width: 850px;
}

/* ABOUT HEADING */
.about-hero h1 {
    margin-bottom: 18px;
}

/* ABOUT TEXT */
.about-hero p {
    margin-bottom: 25px;
}

/* ABOUT BUTTONS */
.about-buttons {
    margin-top: 10px;
}


/* =========================================================
   LAPTOP / SMALL DESKTOP
========================================================= */

@media (max-height: 800px) and (min-width: 769px) {

    .hero-slider {
        height: calc(100vh - 90px) !important;
        min-height: 540px;
        max-height: 680px;
    }

    .hero-slider .hero-text {
        transform: translateY(-10px);
    }

    .hero-text h1,
    .hero h1 {
        font-size: 48px;
        margin-bottom: 15px;
    }

    .hero-text p,
    .hero p {
        font-size: 17px;
        margin-bottom: 25px;
    }

    .about-hero {
        min-height: calc(100vh - 90px) !important;
        padding: 60px 20px !important;
    }

    .about-hero h1 {
        font-size: 50px;
        margin-bottom: 15px;
    }

    .about-hero p {
        font-size: 17px;
        margin-bottom: 22px;
    }
}


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

@media (max-width: 768px) {

    /* ================= MOBILE HERO BANNERS ================= */

    .hero-slider .slide:nth-child(1) {
        background-image: url('../images/Hero-mobile-1.png') !important;
    }

    .hero-slider .slide:nth-child(2) {
        background-image: url('../images/Hero-mobile-2.png') !important;
    }

    .hero-slider .slide:nth-child(3) {
        background-image: url('../images/Hero-mobile-3.jpg') !important;
    }

    .hero-slider .slide:nth-child(4) {
        background-image: url('../images/Hero-mobile-4.png') !important;
    }

    .hero-slider .slide {
        background-size: cover;
        background-position: center center;
    }

    /* HOME */
    .hero-slider {
        margin-top: 70px !important;
        height: calc(100vh - 70px) !important;
        min-height: 560px;
        max-height: 700px;
    }

    .hero-slider .slide {
        height: 100% !important;
    }

    .hero-slider .hero-content {
        height: 100%;
        align-items: center;
    }

    .hero-slider .hero-text {
        padding-bottom: 30px;
    }

    /* ABOUT */
    .about-hero {
        margin-top: 70px !important;

        min-height: calc(100vh - 70px) !important;

        padding: 60px 20px !important;
    }

    .about-hero h1 {
        font-size: 38px;
    }

    .about-hero p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 22px;
    }

    .about-buttons {
        gap: 12px;
    }
}


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

@media (max-width: 480px) {

    .hero-slider {
        margin-top: 65px !important;
        height: calc(100vh - 65px) !important;
        min-height: 540px;
    }

    .hero-slider .hero-text {
        padding-bottom: 20px;
    }

    .about-hero {
        margin-top: 65px !important;

        min-height: calc(100vh - 65px) !important;

        padding: 50px 15px !important;
    }

    .about-hero h1 {
        font-size: 32px;
    }

    .about-hero p {
        font-size: 14px;
    }
}
/* =========================
   GLOBAL NAVBAR ALIGNMENT
========================= */

.navbar {
    width: 100%;
}

.navbar .nav-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}
html {
    overflow-y: scroll;
}
@media (max-width: 768px) {

    .page-banner {
        min-height: 300px;
        padding: 50px 20px;
    }

    .page-banner h1 {
        font-size: 32px;
    }

    .page-banner p {
        font-size: 14px;
    }
}
@media (max-width: 768px) {

    .page-banner-content {
        min-height: auto;
        padding: 40px 20px;

        flex-direction: column;
        gap: 30px;

        text-align: center;
    }

    .page-banner-text {
        width: 100%;
    }

    .page-banner-text h1 {
        font-size: 36px;
    }

    .page-banner-text p {
        font-size: 14px;
        margin: 0 auto;
    }

    .page-banner-image {
        width: 100%;
        height: 280px;
    }
}
.about-hero {
    position: relative;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}

.about-hero-content {
    position: relative;
    z-index: 1;
}
/* =========================================================
   FINAL NAVBAR POSITION FIX
   KEEP NAVIGATION PERFECTLY CENTERED
========================================================= */

.navbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;

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

    background:#fff !important;

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

    border:none !important;
    box-shadow:none !important;

    z-index:99999 !important;
}

.navbar .nav-container{
    width:90% !important;
    max-width:1300px !important;
    height:90px !important;

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

    display:grid !important;

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

    align-items:center !important;
}


/* =========================================================
   LOGO — LEFT
========================================================= */

.navbar .logo{
    grid-column:1 !important;

    justify-self:start !important;

    width:auto !important;

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

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

.navbar .logo img{
    width:185px !important;
    height:auto !important;

    max-height:75px !important;

    object-fit:contain !important;

    display:block !important;
}


/* =========================================================
   CENTER NAVIGATION
========================================================= */

.navbar .main-nav,
.navbar nav{
    grid-column:2 !important;

    display:flex !important;

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

    width:max-content !important;

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

.navbar .nav-links{
    display:flex !important;

    flex-direction:row !important;

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

    gap:32px !important;

    width:max-content !important;

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

    white-space:nowrap !important;
}

.navbar .nav-links li{
    display:block !important;

    position:relative !important;

    width:max-content !important;

    flex-shrink:0 !important;

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

.navbar .nav-links a{
    display:block !important;

    width:max-content !important;
    min-width:max-content !important;

    white-space:nowrap !important;

    color:#222 !important;

    font-size:16px !important;
    font-weight:500 !important;
    line-height:1 !important;

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

    transform:none !important;
}

.navbar .nav-links a:hover,
.navbar .nav-links a.active{
    color:var(--gold) !important;
}


/* =========================================================
   NAV UNDERLINE
   GOLD LINE FOR NORMAL ACTIVE PAGES ONLY
========================================================= */

.navbar .nav-links li::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:var(--gold);

    transition:width .3s ease;
}

/* Hover — normal navigation items */
.navbar .nav-links li:hover::after{
    width:100%;
}

/* Active page — EXCEPT Custom Design */
.navbar .nav-links li:not(.custom-design-item):has(a.active)::after{
    width:100%;
}

/* Custom Design NEVER gets the gold line */
.navbar .nav-links li.custom-design-item::after{
    width:0 !important;
}

/* =========================================================
   RIGHT ICONS
========================================================= */

.navbar .nav-icons{
    grid-column:3 !important;

    justify-self:end !important;

    display:flex !important;

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

    gap:22px !important;

    width:max-content !important;

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

.navbar .nav-icons > i{
    display:block !important;

    color:#222 !important;

    font-size:19px !important;

    flex-shrink:0 !important;
}


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

.navbar .cart-icon{
    position:relative !important;

    width:30px !important;
    height:30px !important;

    display:flex !important;

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

    flex-shrink:0 !important;
}

.navbar .cart-count{
    position:absolute !important;

    top:-8px !important;
    right:-10px !important;

    width:20px !important;
    height:20px !important;

    display:flex !important;

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

    background:var(--gold) !important;

    color:#fff !important;

    border-radius:50% !important;

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


/* =========================================================
   MOBILE — NAVBAR
========================================================= */

@media(max-width:768px){

    .navbar{
        position:relative !important;
        width:100% !important;
        height:65px !important;
        padding:0 8px !important;
        margin:0 !important;
        box-sizing:border-box;
        z-index:1000;
    }


    .navbar .nav-container{
        width:100% !important;
        height:65px !important;

        display:grid !important;

        /* MENU | LOGO | ICONS */
        grid-template-columns:auto 1fr auto !important;

        align-items:center !important;

        gap:8px !important;

        padding:0 !important;

        box-sizing:border-box;
    }


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

    .navbar .mobile-menu-btn{
        grid-column:1 !important;

        display:flex !important;

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

        width:34px !important;
        height:34px !important;

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

        background:none !important;
        border:none !important;

        font-size:20px !important;

        cursor:pointer;

        z-index:1100 !important;

        color:#222 !important;
    }


    .navbar .mobile-menu-btn i{
        display:block !important;
    }


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

    .navbar .logo{
        grid-column:2 !important;

        justify-self:center !important;

        display:flex !important;

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

        flex-shrink:0;
    }


    .navbar .logo img{
        display:block;

        width:100px !important;

        height:auto;

        max-height:50px !important;
    }


    /* ================= HIDE DESKTOP NAV ================= */

    .navbar .main-nav,
    .navbar nav{
        display:none !important;
    }


    /* ================= RIGHT ICONS ================= */

    .navbar .nav-icons{
        grid-column:3 !important;

        display:flex !important;

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

        gap:9px !important;

        min-width:0;
    }

    .navbar .nav-icons > *{
        flex-shrink:0;
    }


    /* WISHLIST */

    .navbar .header-icon-btn{
        width:28px;
        height:28px;

        display:flex;

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

        flex-shrink:0;
    }


    /* CART */

    .navbar .cart-icon{
        position:relative;

        width:28px;
        height:28px;

        display:flex;

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

        flex-shrink:0;
    }

    .navbar .cart-icon i{
        font-size:16px;
    }


    /* CART COUNT */

    .navbar .cart-count{
        width:16px;
        height:16px;

        top:-6px;
        right:-6px;

        font-size:8px;
    }


    /* HERO STARTS BELOW NAVBAR */

    .hero-slider{
        margin-top:0 !important;
    }

}


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

@media(max-width:480px){

    .navbar{
        height:65px !important;
        padding:0 6px !important;
    }


    .navbar .nav-container{
        height:65px !important;

        gap:4px !important;
    }


    .navbar .mobile-menu-btn{
        width:32px !important;
        height:32px !important;

        font-size:19px !important;
    }


    .navbar .logo img{
        width:95px !important;

        max-height:48px !important;
    }


    .navbar .nav-icons{
        gap:5px !important;
    }


    .navbar .header-icon-btn{
        width:25px;
        height:25px;
    }


    .navbar .cart-icon{
        width:25px;
        height:25px;
    }


    .navbar .cart-icon i{
        font-size:14px;
    }

}/* ==================================================
   FINAL LOGO SIZE OVERRIDE
================================================== */

.navbar .nav-container .logo {
    width: 220px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.navbar .nav-container .logo img {
    width: 260px !important;
    height: 80px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
}
/* =========================================================
   CART WHATSAPP BUTTON
========================================================= */

.cart-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
}

.cart-action-buttons .checkout-btn,
.cart-action-buttons .whatsapp-order-btn {
    width: 100%;
    min-height: 70px;
    box-sizing: border-box;

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

    gap: 8px;

    border-radius: 14px;

    text-decoration: none;

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

    cursor: pointer;

    transition: all 0.25s ease;
}

.cart-action-buttons .whatsapp-order-btn {
    background: #25D366;
    color: #ffffff;
}

.cart-action-buttons .whatsapp-order-btn:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
}

.cart-action-buttons .whatsapp-order-btn i {
    font-size: 24px;
}
/* =========================================================
   CHECKOUT BUTTON
========================================================= */

.cart-action-buttons .checkout-btn {
    background: #111111;
    color: #ffffff;
}

.cart-action-buttons .checkout-btn:hover {
    background: #333333;
    transform: translateY(-2px);
}

.cart-action-buttons .checkout-btn i {
    font-size: 20px;
}
/* =========================================================
   CHECKOUT PAGE - CLEAN PREMIUM DESIGN
========================================================= */

.checkout-page {
    padding: 60px 20px 90px;
    background: #f8f6f2;
}

.checkout-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
    gap: 32px;

    align-items: start;
}

/* =========================================================
   LEFT - CHECKOUT FORM
========================================================= */

.checkout-left {
    width: 100%;
    box-sizing: border-box;

    background: #ffffff;

    padding: 40px;

    border-radius: 22px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
}

.checkout-left h2,
.checkout-right h2 {
    margin: 0 0 24px;

    color: #8b6239;

    font-size: 1.75rem;
    font-weight: 700;
}

.checkout-left h2:not(:first-child) {
    margin-top: 38px;
}

/* =========================================================
   FORM LAYOUT
========================================================= */

#checkoutForm {
    width: 100%;
    box-sizing: border-box;

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

    column-gap: 20px;
    row-gap: 16px;
}

/* Full width fields */

#fullName,
#email,
#landmark,
#notes,
.payment-method,
.place-order-btn,
#checkoutForm h2 {
    grid-column: 1 / -1;
}

/* =========================================================
   INPUTS
========================================================= */

#checkoutForm input[type="text"],
#checkoutForm input[type="tel"],
#checkoutForm input[type="email"],
#checkoutForm textarea {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

    padding: 14px 16px;

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

    background: #ffffff;

    color: #333333;

    font-family: inherit;
    font-size: 16px;

    outline: none;

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

#checkoutForm input[type="text"]:focus,
#checkoutForm input[type="tel"]:focus,
#checkoutForm input[type="email"]:focus,
#checkoutForm textarea:focus {
    border-color: #a87842;

    box-shadow: 0 0 0 3px rgba(168, 120, 66, 0.10);

    background: #fff;
}

#checkoutForm input::placeholder,
#checkoutForm textarea::placeholder {
    color: #777777;
}

#checkoutForm textarea {
    min-height: 110px;

    resize: vertical;
}

/* =========================================================
   PAYMENT METHOD
========================================================= */

.payment-method {
    box-sizing: border-box;

    margin-top: 8px;
    padding: 22px;

    background: #faf8f5;

    border: 1px solid #ebe4dc;
    border-radius: 14px;
}

.payment-method h2 {
    margin: 0 0 16px;

    font-size: 1.3rem;
}

.payment-method label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 12px 0;

    color: #333333;

    font-size: 15px;

    cursor: pointer;
}

.payment-method input[type="radio"] {
    width: 17px;
    height: 17px;

    margin: 0;

    accent-color: #8b6239;
}

/* =========================================================
   PLACE ORDER BUTTON
========================================================= */

.place-order-btn {
    width: 100%;
    box-sizing: border-box;

    margin-top: 8px;

    padding: 16px 24px;

    border: none;
    border-radius: 12px;

    background: #8b6239;
    color: #ffffff;

    font-family: inherit;
    font-size: 18px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.place-order-btn:hover {
    background: #6f4d2d;

    transform: translateY(-2px);
}

/* =========================================================
   RIGHT - ORDER SUMMARY
========================================================= */

.checkout-right {
    width: 100%;
    box-sizing: border-box;

    padding: 30px;

    background: #ffffff;

    border-radius: 22px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);

    position: sticky;
    top: 30px;
}

.checkout-right h2 {
    margin-bottom: 22px;
}

#checkoutItems {
    margin-bottom: 20px;
}

/* =========================================================
   SUMMARY ROWS
========================================================= */

.checkout-right .summary-row {
    display: flex;

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

    gap: 20px;

    padding: 10px 0;

    font-size: 16px;
}

.checkout-right .total-row {
    margin-top: 8px;

    padding-top: 18px;

    border-top: 1px solid #e3ded7;

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

/* =========================================================
   COUPON
========================================================= */

.checkout-right > input[type="text"] {
    width: 100%;
    box-sizing: border-box;

    margin-top: 18px;

    padding: 13px 15px;

    border: 1px solid #ddd8d1;
    border-radius: 9px;

    background: #ffffff;

    font-family: inherit;
    font-size: 15px;

    outline: none;
}

.checkout-right > input[type="text"]:focus {
    border-color: #a87842;
}

.coupon-btn {
    width: 100%;
    box-sizing: border-box;

    margin-top: 10px;

    padding: 13px;

    border: 1px solid #8b6239;
    border-radius: 9px;

    background: transparent;
    color: #8b6239;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.coupon-btn:hover {
    background: #8b6239;
    color: #ffffff;
}

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

@media (max-width: 900px) {

    .checkout-container {
        grid-template-columns: 1fr;
    }

    .checkout-right {
        position: static;
    }
}

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

@media (max-width: 600px) {

    .checkout-page {
        padding: 35px 15px 60px;
    }

    .checkout-left {
        padding: 26px 20px;
        border-radius: 17px;
    }

    .checkout-right {
        padding: 25px 20px;
        border-radius: 17px;
    }

    #checkoutForm {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    #fullName,
    #mobile,
    #email,
    #house,
    #street,
    #landmark,
    #city,
    #state,
    #pincode,
    #notes,
    .payment-method,
    .place-order-btn {
        grid-column: 1;
    }

    .checkout-left h2,
    .checkout-right h2 {
        font-size: 1.5rem;
    }

    #checkoutForm input[type="text"],
    #checkoutForm input[type="tel"],
    #checkoutForm input[type="email"],
    #checkoutForm textarea {
        font-size: 15px;
        padding: 13px 14px;
    }
}
/* ================= ACTIVE OFFER STRIP ================= */

.active-offer-strip {
    width: 100%;
    background: #f5efe5;
    border-top: 1px solid #dfcfb5;
    border-bottom: 1px solid #dfcfb5;
}

.offer-strip-inner {
    max-width: 1200px;
    min-height: 82px;
    margin: 0 auto;
    padding: 15px 25px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.offer-strip-label {
    color: #a57932;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
}

.offer-strip-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.offer-strip-main h2 {
    margin: 0;
    color: #222222;
    font-size: 22px;
    font-weight: 600;
    white-space: nowrap;
}

.offer-strip-discount {
    display: inline-block;
    padding: 7px 14px;
    background: #c89b4a;
    color: #ffffff;
    border-radius: 4px;

    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.offer-strip-info {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #666666;
    font-size: 12px;
}

.offer-strip-separator {
    color: #c89b4a;
}

.offer-strip-button {
    display: inline-block;

    padding: 10px 20px;

    background: #222222;
    color: #ffffff;

    border-radius: 4px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;

    white-space: nowrap;

    transition: 0.2s ease;
}

.offer-strip-button:hover {
    background: #c89b4a;
}


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

@media (max-width: 768px) {

    .offer-strip-inner {
        min-height: auto;
        padding: 18px 15px;

        flex-wrap: wrap;
        gap: 10px 15px;
    }

    .offer-strip-label {
        width: 100%;
        text-align: center;
    }

    .offer-strip-main {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .offer-strip-main h2 {
        font-size: 19px;
    }

    .offer-strip-discount {
        font-size: 13px;
        padding: 6px 10px;
    }

    .offer-strip-info {
        width: 100%;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }

    .offer-strip-button {
        margin-top: 3px;
    }

}
/* ================= OFFER POPUP ================= */

.offer-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
}


/* ================= BACKDROP ================= */

.offer-popup-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* ================= POPUP BOX ================= */

.offer-popup-box {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(650px, 90%);
    height: min(650px, 78vh);

    min-height: 500px;

    overflow: hidden;

    border-radius: 18px;

    background: #111;

    border: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 10px 30px rgba(0, 0, 0, 0.25);

    text-align: center;

    animation: offerPopupOpen 0.4s ease;
}


@keyframes offerPopupOpen {

    from {
        opacity: 0;
        transform: translate(-50%, -47%) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

}


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

#popupOfferBannerImage,
.offer-popup-background {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    margin: 0;

    border-radius: 0;

    z-index: 1;

    filter:
        brightness(0.72)
        saturate(0.88)
        blur(1px);

    transform: scale(1.025);

}


/* ================= PREMIUM IMAGE OVERLAY ================= */

.offer-popup-image-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:

        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.30) 0%,
            rgba(0, 0, 0, 0.18) 25%,
            rgba(0, 0, 0, 0.38) 55%,
            rgba(0, 0, 0, 0.82) 100%
        );

    pointer-events: none;

}


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

.offer-popup-close {

    position: absolute;

    top: 16px;
    right: 16px;

    width: 38px;
    height: 38px;

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

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.38);

    color: #fff;

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

    line-height: 1;

    cursor: pointer;

    z-index: 10;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

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


.offer-popup-close:hover {

    background: rgba(0, 0, 0, 0.65);

    border-color: rgba(255, 255, 255, 0.7);

    transform: rotate(90deg);

}


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

.offer-popup-content {

    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 100%;

    max-width: 520px;

    padding:
        35px 35px 40px;

    box-sizing: border-box;

    z-index: 5;

    color: #fff;

}


/* ================= LABEL ================= */

.offer-popup-label {

    display: block;

    margin-bottom: 12px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

}


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

.offer-popup-content h2 {

    margin: 0 0 16px;

    color: #fff;

    font-size: 40px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: 0.3px;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, 0.45);

}


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

.offer-popup-discount {

    display: inline-block;

    padding: 9px 22px;

    margin: 0 0 16px;

    background: rgba(255, 255, 255, 0.94);

    color: #171717;

    border-radius: 5px;

    font-size: 21px;

    font-weight: 700;

    letter-spacing: 0.5px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.20);

}


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

.offer-popup-content p {

    margin: 0 auto 12px;

    max-width: 450px;

    color: rgba(255, 255, 255, 0.90);

    font-size: 15px;

    line-height: 1.6;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.45);

}


/* ================= DATES ================= */

.offer-popup-dates {

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 11px;

    letter-spacing: 0.3px;

}


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

.offer-popup-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 145px;

    padding: 13px 28px;

    background: #fff;

    color: #171717;

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 5px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);

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


.offer-popup-button:hover {

    background: #171717;

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35);

}



/* ================= ADMIN OFFER OPTIONS ================= */

.offer-apply-options {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 10px;

}


.offer-apply-options label {

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 500;

}


#categorySelection,
#productSelection {

    margin-left: 28px;

    margin-top: 8px;

}
.offer-apply-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.offer-apply-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

#categorySelection,
#productSelection {
    margin-left: 28px;
    margin-top: 8px;
}
/* ================= EXPLORE COLLECTIONS ================= */

.explore-collections {
    padding: 70px 0;
    background: #faf9f7;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: 35px auto 0;
}

.collection-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.collection-card:hover {
    transform: translateY(-5px);
}

.collection-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: #f8f5f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    padding: 0;
    display: block;
}
.collection-content {
    padding: 18px;
    text-align: center;
}

.collection-content h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.collection-content span {
    font-size: 14px;
}
/* =====================================================
   REFUND CONTACT
===================================================== */

.refund-contact {

    margin-top: 25px;

    padding: 16px 18px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    border-radius: 10px;

    background: #f8f5ef;

    border: 1px solid #eee;

}

.refund-contact i {

    margin-top: 3px;

    color: #8b5e3c;

    font-size: 16px;

}

.refund-contact p {

    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.6;

}

.refund-contact a {

    color: #8b5e3c;

    font-weight: 600;

    text-decoration: none;

}

.refund-contact a:hover {

    text-decoration: underline;

}

/* MOBILE */

@media (max-width: 768px) {

    .collections-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .collection-image {
        height: 160px;
    }

}
/* =========================================================
   PRODUCT PAGE - FINAL IMAGE SIZE FIX
========================================================= */


.product-details .product-left {
    position: relative;
    width: 100%;
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.product-details .product-left #mainImage {
    display: block !important;
    width: 380px !important;
    height: 380px !important;
    max-width: 380px !important;
    max-height: 380px !important;
    object-fit: contain !important;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

.product-details .product-right {
    width: 100%;
}
.product-image {
    position: relative;
}

.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.product-image-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.product-image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.product-image .wishlist-btn {
    position: absolute;
    z-index: 5;
}
/* CART PRODUCT IMAGE */

.cart-card > img {
    width: 120px;
    height: 140px;
    object-fit: contain;
    object-position: center;
    display: block;
}
/* =========================================================
   PREMIUM PRODUCT DETAILS
   ========================================================= */

.product-details {
    padding: 90px 0;
    background: #faf9f6;
}

.product-details .container {
    width: 90%;
    max-width: 1350px;
    margin: auto;
}

.product-details .product-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 70px;
    align-items: start;
}

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

.product-details .product-left {
    position: relative;
    min-height: 600px;

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

    background: #fff;
    border-radius: 28px;

    padding: 35px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.08);

    border: 1px solid #eee7dc;

    overflow: hidden;
}

.product-details .product-left img {
    width: 100%;
    height: 530px;

    object-fit: contain;
    object-position: center;

    display: block;

    transition: transform .4s ease;
}

.product-details .product-left:hover img {
    transform: scale(1.02);
}

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

.product-details .prev-img,
.product-details .next-img {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border: 1px solid #e3d7c7;

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

    color: #8f6338;

    font-size: 22px;

    cursor: pointer;

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

    z-index: 3;

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

    transition: .3s ease;
}

.product-details .prev-img {
    left: 18px;
}

.product-details .next-img {
    right: 18px;
}

.product-details .prev-img:hover,
.product-details .next-img:hover {
    background: #b88a44;
    color: #fff;
    border-color: #b88a44;
    transform: translateY(-50%) scale(1.05);
}

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

.product-details .product-right {
    padding: 15px 5px;
}

.product-details .product-title {
    font-size: 48px;
    line-height: 1.15;

    color: #222;

    margin: 0 0 18px;

    font-weight: 700;

    letter-spacing: -.5px;
}

/* =========================================================
   RATING
   ========================================================= */

.product-details .rating {
    color: #d39a20;

    font-size: 17px;

    margin-bottom: 28px;
}

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

.product-details .product-price {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 38px;
}

.product-details .product-price .price {
    font-size: 36px;
    font-weight: 700;

    color: #171717;
}

.product-details .product-price .old-price {
    font-size: 20px;

    color: #999;

    text-decoration: line-through;
}

.product-details .product-price .discount {
    background: #e94343;
    color: #fff;

    padding: 10px 16px;

    border-radius: 30px;

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

/* =========================================================
   SIZE SELECTION
   ========================================================= */

.product-details .size-selection {
    margin-bottom: 30px;
}

.product-details .size-selection h3 {
    font-size: 20px;

    margin-bottom: 18px;

    color: #222;
}

.product-details .size-options {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.product-details .size-option {
    position: relative;

    cursor: pointer;
}

.product-details .size-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-details .size-option span {
    display: block;

    padding: 13px 20px;

    border: 1px solid #d8d0c6;

    border-radius: 10px;

    background: #fff;

    color: #333;

    font-size: 15px;

    transition: .25s ease;
}

.product-details .size-option:hover span {
    border-color: #b88a44;
}

.product-details .size-option input:checked + span {
    background: #b88a44;

    color: #fff;

    border-color: #b88a44;

    box-shadow: 0 6px 18px rgba(184,138,68,.22);
}

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

.product-details .product-description {
    color: #666;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 25px;
}

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

.product-details .feature-list {
    list-style: none;

    padding: 0;

    margin: 20px 0 28px;
}

.product-details .feature-list li {
    padding: 8px 0;

    color: #555;

    border-bottom: 1px solid #eee;
}

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

.product-details .stock {
    color: #138a42;

    font-weight: 700;

    font-size: 16px;

    margin: 20px 0;
}

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

.product-details .quantity-box {
    display: inline-flex;

    align-items: center;

    border: 1px solid #ddd;

    border-radius: 12px;

    overflow: hidden;

    background: #fff;

    margin-bottom: 25px;
}

.product-details .quantity-box button {
    width: 48px;
    height: 48px;

    border: none;

    background: #f5f3ef;

    color: #333;

    font-size: 20px;

    cursor: pointer;

    transition: .25s ease;
}

.product-details .quantity-box button:hover {
    background: #e9dfd0;
}

.product-details .quantity-box input {
    width: 58px;
    height: 48px;

    border: none;

    text-align: center;

    font-size: 16px;

    outline: none;

    background: #fff;
}

/* =========================================================
   PURCHASE BUTTONS
   ========================================================= */

.product-details .purchase-buttons {
    display: grid;

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

    gap: 12px;

    margin-top: 10px;
}

.product-details .purchase-buttons button {
    min-height: 56px;

    border: none;

    border-radius: 12px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s ease;
}

/* Add to Cart */

.product-details .purchase-buttons .cart-btn {
    background: #8f6039;

    color: #fff;
}

.product-details .purchase-buttons .cart-btn:hover {
    background: #704827;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(112,72,39,.2);
}

/* Buy Now */

.product-details .purchase-buttons .buy-btn {
    background: #c9912d;

    color: #fff;
}

.product-details .purchase-buttons .buy-btn:hover {
    background: #a9781f;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(201,145,45,.2);
}

/* WhatsApp */

.product-details .purchase-buttons .whatsapp-btn {
    background: #25d366;

    color: #fff;
}

.product-details .purchase-buttons .whatsapp-btn:hover {
    background: #1eae54;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(37,211,102,.2);
}

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

@media (max-width: 900px) {

    .product-details {
        padding: 60px 0;
    }

    .product-details .product-wrapper {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .product-details .product-left {
        min-height: 450px;

        padding: 25px;
    }

    .product-details .product-left img {
        height: 400px;
    }

    .product-details .product-title {
        font-size: 36px;
    }

    .product-details .purchase-buttons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .product-details {
        padding: 40px 0;
    }

    .product-details .product-left {
        min-height: 350px;

        padding: 18px;

        border-radius: 20px;
    }

    .product-details .product-left img {
        height: 320px;
    }

    .product-details .product-title {
        font-size: 30px;
    }

    .product-details .product-price .price {
        font-size: 30px;
    }

    .product-details .size-options {
        gap: 8px;
    }

    .product-details .size-option span {
        padding: 11px 14px;
    }

}
/* =========================================================
   PRODUCT DETAILS - FINAL SPACING REFINEMENT
   ========================================================= */

.product-details {
    padding-top: 120px;
    padding-bottom: 70px;
}

.product-details .product-wrapper {
    align-items: center;
}

.product-details .product-left {
    min-height: 540px;
    height: 540px;
}

.product-details .product-left img {
    height: 470px;
}

.product-details .product-right {
    padding-top: 0;
}

.product-details .product-title {
    margin-top: 0;
}
/* =========================================================
   KARINKASHI PREMIUM PRODUCT DETAILS - CLEAN VERSION
   ========================================================= */

.product-details {
    padding: 65px 0;
    background: #faf9f6;
}

.product-details .container {
    width: 90%;
    max-width: 1250px;
    margin: auto;
}

.product-details .product-wrapper {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 60px;
    align-items: center;
}

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

.product-details .product-left {
    position: relative;

    width: 100%;
    height: 500px;
    min-height: 0;

    padding: 25px;

    background: #fff;

    border: 1px solid #eee4d8;
    border-radius: 24px;

    box-shadow: 0 12px 35px rgba(0,0,0,.07);

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

    overflow: hidden;
}

.product-details .product-left img {
    width: 100%;
    height: 450px;

    object-fit: contain;
    object-position: center;

    display: block;
}

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

.product-details .prev-img,
.product-details .next-img {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 44px;
    height: 44px;

    border-radius: 50%;

    border: 1px solid #e2d5c4;

    background: #fff;

    color: #986637;

    font-size: 22px;

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

    cursor: pointer;

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

    transition: .25s ease;

    z-index: 5;
}

.product-details .prev-img {
    left: 18px;
}

.product-details .next-img {
    right: 18px;
}

.product-details .prev-img:hover,
.product-details .next-img:hover {
    background: #986637;
    color: #fff;
}

/* =========================
   RIGHT SIDE
   ========================= */

.product-details .product-right {
    padding: 0;
}

.product-details .product-title {
    font-size: 44px;

    line-height: 1.15;

    margin: 0 0 15px;

    color: #222;

    font-weight: 700;
}

/* =========================
   RATING
   ========================= */

.product-details .rating {
    margin-bottom: 25px;

    font-size: 17px;

    color: #d39a20;
}

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

.product-details .product-price {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 30px;
}

.product-details .product-price .price {
    font-size: 34px;

    font-weight: 700;

    color: #171717;
}

.product-details .product-price .old-price {
    font-size: 19px;

    color: #999;

    text-decoration: line-through;
}

.product-details .product-price .discount {
    padding: 9px 15px;

    border-radius: 25px;

    background: #e94343;

    color: #fff;

    font-size: 14px;

    font-weight: 700;
}

/* =========================
   SIZE
   ========================= */

.product-details .size-selection {
    margin-bottom: 25px;
}

.product-details .size-selection h3 {
    font-size: 20px;

    margin-bottom: 14px;
}

.product-details .size-options {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.product-details .size-option span {
    display: block;

    padding: 13px 20px;

    background: #fff;

    border: 1px solid #d8d0c6;

    border-radius: 10px;

    transition: .25s ease;
}

.product-details .size-option:hover span {
    border-color: #b88a44;
}

.product-details .size-option input:checked + span {
    background: #b88a44;

    color: #fff;

    border-color: #b88a44;

    box-shadow: 0 5px 15px rgba(184,138,68,.2);
}

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

.product-details .product-description {
    margin-bottom: 20px;

    color: #555;

    font-size: 16px;

    line-height: 1.7;
}

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

.product-details .stock {
    margin: 15px 0;

    color: #098a3b;

    font-weight: 700;
}

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

.product-details .quantity-box {
    display: inline-flex;

    align-items: center;

    margin-bottom: 22px;

    overflow: hidden;

    border: 1px solid #ddd;

    border-radius: 10px;

    background: #fff;
}

.product-details .quantity-box button {
    width: 45px;
    height: 45px;

    border: none;

    background: #f5f2ed;

    font-size: 19px;

    cursor: pointer;
}

.product-details .quantity-box input {
    width: 55px;
    height: 45px;

    border: none;

    outline: none;

    text-align: center;

    font-size: 16px;
}

/* =========================
   PURCHASE BUTTONS
   ========================= */

.product-details .purchase-buttons {
    display: grid;

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

    gap: 12px;

    margin-top: 0;
}

.product-details .purchase-buttons button {
    min-height: 54px;

    border: none;

    border-radius: 11px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s ease;
}

.product-details .purchase-buttons button:hover {
    transform: translateY(-2px);
}

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

@media (max-width: 900px) {

    .product-details {
        padding: 45px 0;
    }

    .product-details .product-wrapper {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .product-details .product-left {
        height: 450px;
    }

    .product-details .product-left img {
        height: 400px;
    }

    .product-details .product-title {
        font-size: 36px;
    }
}

@media (max-width: 600px) {

    .product-details {
        padding: 30px 0;
    }

    .product-details .container {
        width: 94%;
    }

    .product-details .product-left {
        height: 360px;

        padding: 15px;
    }

    .product-details .product-left img {
        height: 325px;
    }

    .product-details .product-title {
        font-size: 30px;
    }

    .product-details .purchase-buttons {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   KARINKASHI PRODUCT GALLERY - FINAL
   ========================================================= */

/* Main product image area */
.product-details .product-left {
    position: relative;
    width: 100%;
    height: 560px;
    min-height: 0;

    padding: 25px;
    box-sizing: border-box;

    background: #fff;
    border: 1px solid #eee4d8;
    border-radius: 24px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);

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

    overflow: hidden;
}

/* Main image */
.product-details .product-left #mainImage {
    width: 100% !important;
    height: 450px !important;

    max-width: 100% !important;
    max-height: 450px !important;

    object-fit: contain !important;
    object-position: center;

    display: block;

    border-radius: 16px;

    transition: transform 0.3s ease;
}

/* Main image hover */
.product-details .product-left:hover #mainImage {
    transform: scale(1.02);
}


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

.product-details .prev-img,
.product-details .next-img {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 44px;
    height: 44px;

    border-radius: 50%;

    border: 1px solid #e2d5c4;

    background: rgba(255, 255, 255, 0.95);

    color: #986637;

    font-size: 22px;

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

    cursor: pointer;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

    transition: all 0.25s ease;

    z-index: 10;
}

.product-details .prev-img {
    left: 18px;
}

.product-details .next-img {
    right: 18px;
}

.product-details .prev-img:hover,
.product-details .next-img:hover {
    background: #986637;
    color: #fff;
    border-color: #986637;

    transform: translateY(-50%) scale(1.05);
}


/* =========================================================
   PRODUCT THUMBNAILS
   ========================================================= */

.product-details .product-thumbnails {
    position: absolute;

    left: 50%;
    bottom: 15px;

    transform: translateX(-50%);

    width: calc(100% - 40px);

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

    gap: 10px;

    z-index: 10;

    overflow-x: auto;

    padding: 5px;

    box-sizing: border-box;

    scrollbar-width: none;
}

.product-details .product-thumbnails::-webkit-scrollbar {
    display: none;
}


/* Individual thumbnail */
.product-details .product-thumbnail {
    flex: 0 0 auto;

    width: 64px;
    height: 64px;

    padding: 4px;

    border: 1px solid #ddd3c6;

    border-radius: 10px;

    background: #fff;

    cursor: pointer;

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

    transition: all 0.25s ease;

    box-sizing: border-box;
}

/* Thumbnail image */
.product-details .product-thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 6px;

    display: block;
}


/* Thumbnail hover */
.product-details .product-thumbnail:hover {
    border-color: #b88a44;

    transform: translateY(-2px);
}


/* Active thumbnail */
.product-details .product-thumbnail.active {
    border: 2px solid #b88a44;

    box-shadow: 0 4px 12px rgba(184, 138, 68, 0.22);

    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    .product-details .product-left {
        height: 500px;

        padding: 20px;
    }

    .product-details .product-left #mainImage {
        height: 390px !important;
        max-height: 390px !important;
    }

    .product-details .product-thumbnails {
        bottom: 12px;

        width: calc(100% - 30px);

        gap: 8px;
    }

    .product-details .product-thumbnail {
        width: 58px;
        height: 58px;
    }

}


@media (max-width: 600px) {

    .product-details .product-left {
        height: 400px;

        padding: 15px;

        border-radius: 20px;
    }

    .product-details .product-left #mainImage {
        height: 300px !important;
        max-height: 300px !important;
    }

    .product-details .prev-img,
    .product-details .next-img {
        width: 38px;
        height: 38px;

        font-size: 18px;
    }

    .product-details .prev-img {
        left: 8px;
    }

    .product-details .next-img {
        right: 8px;
    }

    .product-details .product-thumbnails {
        bottom: 10px;

        width: calc(100% - 20px);

        justify-content: flex-start;

        gap: 7px;
    }

    .product-details .product-thumbnail {
        width: 52px;
        height: 52px;

        border-radius: 8px;
    }

}
/* ================= MEANING BEHIND KARINKASHI ================= */

.karinkashi-meaning-section {
    padding: 55px 20px;
    background: #fffaf4;
    text-align: center;
    margin: 0 !important;
}

.karinkashi-meaning-section .container {
    max-width: 900px;
    margin: 0 auto;
}

.meaning-subtitle {
    display: inline-block;
    margin-bottom: 25px;
    color: #B76E3B;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.meaning-content {
    max-width: 850px;
    margin: 0 auto;
}

.meaning-content p {
    margin: 0 auto 18px;
    font-size: 16px;
    line-height: 1.7;
    color: #444;
}

.meaning-content p:last-child {
    margin-bottom: 0;
}

.meaning-content strong {
    font-weight: 700;
}
.shipping-message {
    margin: 8px 0 15px;
    font-size: 14px;
    line-height: 1.5;
}
/* =========================================================
   FINAL NAVBAR — PREVENT ACTIVE PAGE SHIFT
========================================================= */

.navbar .nav-links{
    position:relative !important;
    flex-shrink:0 !important;
}

.navbar .nav-links li{
    position:relative !important;
    flex-shrink:0 !important;
}

.navbar .nav-links li::after{
    pointer-events:none !important;
}

.navbar .nav-links a,
.navbar .nav-links a:hover,
.navbar .nav-links a.active{
    transform:none !important;
    letter-spacing:normal !important;
}
/* =========================================================
   KEEP PAGE WIDTH STABLE — PREVENT NAVBAR SHIFT
========================================================= */

html{
    scrollbar-gutter: stable;
}
/* =========================================================
   FINAL NAVBAR — FIXED LINK POSITIONS
========================================================= */

.navbar .nav-links{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:32px !important;
}

.navbar .nav-links li{
    position:relative !important;
    flex:0 0 auto !important;
}

.navbar .nav-links a{
    display:block !important;
    font-size:16px !important;
    font-weight:500 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    transform:none !important;
}
/* =========================================================
   MEANING BEHIND KARINKASHI
========================================================= */

.karinkashi-meaning-section {
    padding: 90px 0;
}

.meaning-layout {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    align-items: center;
    gap: 80px;
}

.meaning-text {
    max-width: 700px;
}

.meaning-subtitle {
    display: inline-block;
    margin-bottom: 30px;
}

.meaning-content p {
    margin-bottom: 20px;
    line-height: 1.8;
}


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

.meaning-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.meaning-logo img {
    width: 240px;
    max-width: 100%;
    height: auto;
    display: block;

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}


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

@media (max-width: 768px) {
       /* ================= MOBILE HERO BANNERS ================= */

    .hero-slider .hero-slide-1 {
    background-image: url('../images/Hero-mobile-1.png') !important;
}

.hero-slider .hero-slide-2 {
    background-image: url('../images/Hero-mobile-2.png') !important;
}

.hero-slider .hero-slide-3 {
    background-image: url('../images/Hero-mobile-3.jpg') !important;
}

.hero-slider .hero-slide-4 {
    background-image: url('../images/Hero-mobile-4.png') !important;
}
    .hero-slider .slide {
        background-size: cover;
        background-position: center center;
    }

    .karinkashi-meaning-section {
        padding: 60px 0;
    }

    .meaning-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .meaning-text {
        max-width: 100%;
    }

    .meaning-logo img {
        width: 190px;
    }

}
/* ================= LOGO ================= */

.meaning-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.meaning-logo img {
    width: 310px;
    max-width: 100%;
    height: auto;
    display: block;

    animation: karinkashiLogoFloat 4s ease-in-out infinite;
}


/* ================= AUTOMATIC LOGO EFFECT ================= */

@keyframes karinkashiLogoFloat {

    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(180, 140, 60, 0));
    }

    50% {
        transform: scale(1.06);
        filter: drop-shadow(0 8px 22px rgba(180, 140, 60, 0.28));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(180, 140, 60, 0));
    }

}
/* ================= NAVBAR VERTICAL ALIGNMENT ================= */

.nav-container {
    transform: translateY(15px);
}
.announcement-track i{
    margin-right:6px;
    font-size:12px;
}
.announcement-track .fa-truck{
    color:#c9a227;
    transform:scaleX(-1);
}

.announcement-track .fa-ticket{
    color:#c9a227;
}

.announcement-track i{
    margin-right:6px;
    font-size:12px;
}
/* =========================================================
   ANNOUNCEMENT BAR — FIXED FONT & TEXT WIDTH
========================================================= */

.announcement-bar,
.announcement-track,
.announcement-track > span,
.announcement-track .coupon-announcement,
.announcement-track .shipping-threshold {
    font-family: 'Poppins', sans-serif !important;
}

.announcement-track > span {
    flex: 0 0 auto !important;
}

.announcement-track .coupon-announcement {
    flex: 0 0 auto !important;
    display: inline-block !important;
    white-space: nowrap !important;
}
/* =========================================================
   CHECKOUT NAVBAR + LOGO
========================================================= */

.navbar .logo {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    text-decoration: none;
}

.navbar .logo img {
    width: 175px !important;
    height: 65px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
}

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

.checkout-page {
    padding-top: 0 !important;
}

.checkout-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.checkout-right {
    margin-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
}
/* =========================================================
   CHECKOUT PAGE — NAVBAR SAFE SPACING
   Prevent checkout content from going underneath navbar
========================================================= */

.checkout-page {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;

    /* announcement bar + navbar */
    padding-top: 145px;
    padding-bottom: 60px;
}

/* Keep checkout content below the navigation */
.checkout-container {
    position: relative;
    z-index: 1;
}


/* =========================================================
   CHECKOUT — DESKTOP
========================================================= */

@media (min-width: 769px) {

    .checkout-page {
        padding-top: 150px;
    }

}


/* =========================================================
   CHECKOUT — MOBILE
========================================================= */

@media (max-width: 768px) {

    .checkout-page {
        padding-top: 135px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .checkout-container {
        width: 100%;
        max-width: 100%;
    }

}


/* =========================================================
   CHECKOUT — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .checkout-page {
        padding-top: 135px;
        padding-left: 10px;
        padding-right: 10px;
    }

}
/* =========================================================
   CHECKOUT — KEEP CONTENT BELOW FIXED NAVBAR
========================================================= */

.checkout-page {
    margin-top: 125px !important;
    position: relative;
    z-index: 1;
}
/* FINAL LOGO SIZE FIX */
.navbar .nav-container .logo {
    width: 260px !important;
    height: 80px !important;
    flex: 0 0 260px !important;
    display: flex !important;
    align-items: center !important;
}

.navbar .nav-container .logo img {
    width: 260px !important;
    height: 80px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
}
/* =========================================================
   HEADER SEARCH + WISHLIST ICONS
========================================================= */

.header-icon-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    color: #222;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.header-icon-btn:hover {
    color: var(--gold);
}

.header-icon-btn i {
    pointer-events: none;
}
/* =========================================================
   PRODUCT WISHLIST BUTTON — FINAL
========================================================= */

.product-image .wishlist-btn {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 20 !important;

    width: 45px !important;
    height: 45px !important;

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

    border: none !important;
    border-radius: 50% !important;

    background: #ffffff !important;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;

    cursor: pointer !important;
}

.product-image .wishlist-btn i {
    font-size: 20px !important;
    color: #555 !important;
}

.product-image .wishlist-btn:hover {
    transform: scale(1.08);
}

.product-image .wishlist-btn:hover i {
    color: #e63946 !important;
}
/* =========================================
   HEADER SEARCH — MAGNIFYING GLASS CURSOR
========================================= */

#headerSearch {
    cursor: zoom-in !important;
}
/* =========================================
   SEARCH INPUT — MAGNIFYING GLASS CURSOR
========================================= */

#searchInput {
    cursor: zoom-in !important;
}
/* PRODUCT SEARCH BOX — MAGNIFYING GLASS CURSOR */
.shop-top #searchInput {
    cursor: zoom-in !important;
}
/* ==========================
   WISHLIST REMOVE BUTTON
========================== */

.wishlist-actions {
    margin-top: 15px;
}

.wishlist-remove-btn {
    border: none;
    background: #111;
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s ease;
}

.wishlist-remove-btn i {
    margin-right: 6px;
}

.wishlist-remove-btn:hover {
    background: #d4af37;
    transform: translateY(-1px);
}
/* ==========================
   WISHLIST ACTION BUTTONS
========================== */

.wishlist-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.wishlist-cart-btn,
.wishlist-remove-btn {
    border: none;
    padding: 10px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s ease;
}

.wishlist-cart-btn {
    background: #111;
    color: #fff;
}

.wishlist-cart-btn:hover {
    background: #d4af37;
    transform: translateY(-1px);
}

.wishlist-remove-btn {
    background: #f1f1f1;
    color: #111;
}

.wishlist-remove-btn:hover {
    background: #d4af37;
    color: #fff;
    transform: translateY(-1px);
}

.wishlist-cart-btn i,
.wishlist-remove-btn i {
    margin-right: 5px;
}
/* =========================================================
   TRACK ORDER NOTICE
========================================================= */

.track-order-notice {
    margin: 25px auto 0;
    padding: 14px 18px;
    max-width: 700px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    background: #f8f8f8;
    color: #333;
    border-radius: 6px;
}

.track-order-notice strong {
    font-weight: 600;
}
/* =========================================================
   MOBILE NAVBAR — FIX OVERLAPPING
========================================================= */

@media(max-width:768px){

    .nav-container{
        width:100%;
        grid-template-columns:70px minmax(0,1fr) auto;
        gap:8px;
        padding:0 8px;
    }

    /* LOGO */
    .nav-container .logo{
        width:70px;
        min-width:70px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    .nav-container .logo img{
        width:70px;
        max-width:70px;
        height:auto;
        display:block;
    }

    /* NAVIGATION AREA */
    .nav-container nav{
        min-width:0;
        width:100%;
        overflow:hidden;
    }

    .nav-container .nav-links{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:10px;
        width:max-content;
        min-width:100%;
        white-space:nowrap;

        overflow-x:auto;
        overflow-y:hidden;

        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .nav-container .nav-links::-webkit-scrollbar{
        display:none;
    }

    .nav-container .nav-links a{
        font-size:10px;
        white-space:nowrap;
    }

    /* RIGHT ICONS */
    .nav-container .nav-icons{
        display:flex;
        align-items:center;
        gap:8px;
        flex-shrink:0;
    }

    .nav-container .nav-icons > i{
        font-size:15px;
    }

    .nav-container .header-icon-btn{
        flex-shrink:0;
    }

    .nav-container .cart-icon{
        width:25px;
        height:25px;
        flex-shrink:0;
    }

    .nav-container .cart-icon i{
        font-size:16px;
    }

    .nav-container .cart-count{
        width:17px;
        height:17px;
        top:-7px;
        right:-8px;
        font-size:8px;
    }

}
.payment-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.payment-disabled input {
    cursor: not-allowed;
}

.cod-notice {
    display: block;
    margin: 6px 0 0 24px;
    font-size: 13px;
    line-height: 1.5;
    color: #777;
    font-weight: normal;
}
/* =========================================================
   PRODUCT DETAILS — FINAL ALIGNMENT FIX
========================================================= */

.product-details{
    padding-top:140px !important;
    padding-bottom:80px;
}


.product-wrapper{
    display:grid !important;

    grid-template-columns:1fr 1fr !important;

    gap:60px !important;

    align-items:start !important;

    margin:0 !important;
}


/* LEFT IMAGE COLUMN */

.product-left{
    position:relative !important;

    top:auto !important;
    margin-top:0 !important;

    padding:30px !important;

    background:#fff;

    border-radius:20px;

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

    align-self:start !important;
}


/* RIGHT PRODUCT INFORMATION */

.product-right{
    position:relative !important;

    top:auto !important;
    margin-top:0 !important;

    padding-top:0 !important;

    align-self:start !important;
}


/* PRODUCT NAME */

.product-title{
    margin-top:0 !important;
    padding-top:0 !important;
}


/* MAIN IMAGE */

#mainImage{
    width:100%;
    height:540px;

    object-fit:contain;

    display:block;
}

/* =========================================================
   SHOP BANNER — RESTORE LIGHT BLUE
========================================================= */

.shop-page-banner{
    background-color:#d6e4ee !important;
}
/* =========================================================
   FINAL DESKTOP RESTORE — HIDE MOBILE ELEMENTS
========================================================= */

@media (min-width:769px){

    /* Hide mobile menu on desktop */
    .mobile-menu{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
    }

    /* Hide hamburger on desktop */
    .mobile-menu-btn{
        display:none !important;
    }

}
/* =========================================================
   DESKTOP — RESTORE HOME SECTIONS
========================================================= */

@media (min-width:769px){

    /* ================= BEST SELLERS ================= */

    .best-sellers .products-grid{
        display:grid !important;
        grid-template-columns:repeat(3,1fr) !important;
        gap:30px !important;
        width:100% !important;
    }

    .best-sellers .product-card{
        width:100% !important;
        box-sizing:border-box !important;
    }
   /* =========================================================
   DESKTOP — BEST SELLERS FINAL DESIGN
========================================================= */

@media (min-width:769px){

    .best-sellers .products-grid{
        display:grid !important;
        grid-template-columns:repeat(3,1fr) !important;
        gap:30px !important;
        width:100% !important;
    }

    .best-sellers .product-card{
        width:100% !important;
        box-sizing:border-box !important;
    }

    /* OVAL IMAGE */
    .best-sellers .product-image{
        width:100% !important;
        height:360px !important;
        position:relative !important;
        overflow:hidden !important;

        /* OVAL / SOFT ROUNDED SHAPE */
        border-radius:50% / 18% !important;
    }

    .best-sellers .product-image img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        display:block !important;
    }

    /* VIEW DETAILS */
    .best-sellers .product-overlay{
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        bottom:20px !important;
        z-index:10 !important;

        display:flex !important;
        justify-content:center !important;
    }

    /* SMALL BUTTON */
    .best-sellers .product-overlay .btn{
        padding:8px 18px !important;
        font-size:13px !important;
        min-width:auto !important;
        width:auto !important;
        border-radius:20px !important;
    }

    /* PRODUCT INFO */
    .best-sellers .product-info{
        width:100% !important;
        box-sizing:border-box !important;
        padding:15px !important;
    }

}
/* =========================================================
   DESKTOP — BEST SELLERS
   FINAL
========================================================= */

@media (min-width: 769px) {

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

    .best-sellers .products-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        width: 100% !important;
    }


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

    .best-sellers .product-card {
        width: 100% !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }


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

    .best-sellers .product-image {
        position: relative !important;
        width: 100% !important;

        /* desktop image size */
        height: 350px !important;

        overflow: hidden !important;

        /* same premium rounded shape */
        border-radius: 18px 18px 0 0 !important;

        background: #fff !important;
    }


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

    .best-sellers .product-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;

        display: block !important;

        border-radius: 0 !important;
    }


    /* ================= BEST SELLER BADGE ================= */

    .best-sellers .product-badge {
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;

        z-index: 5 !important;
    }


    /* ================= VIEW DETAILS OVERLAY ================= */

    .best-sellers .product-overlay {
        position: absolute !important;

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

        z-index: 10 !important;

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

        padding-bottom: 18px !important;
    }


    /* ================= SMALL VIEW DETAILS ================= */

    .best-sellers .product-overlay .btn {
        padding: 7px 16px !important;

        font-size: 12px !important;
        line-height: 1.2 !important;

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

        border-radius: 20px !important;
    }


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

    .best-sellers .product-info {
        width: 100% !important;
        box-sizing: border-box !important;

        padding: 15px 18px 18px !important;

        background: #fff !important;

        border-radius: 0 0 18px 18px !important;
    }


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

    .best-sellers .product-info h3 {
        margin: 6px 0 !important;
    }

}

    /* ================= WHY CHOOSE KARINKASHI ================= */

    .why-us .why-grid{
        display:grid !important;
        grid-template-columns:repeat(3,1fr) !important;
        gap:30px !important;
        width:100% !important;
    }

    .why-us .why-card{
        width:100% !important;
        box-sizing:border-box !important;
    }


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

    .footer .footer-grid{
        display:grid !important;
        grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr !important;
        gap:40px !important;
        width:90% !important;
        max-width:1300px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        box-sizing:border-box !important;
    }

}
/* =========================================================
   DESKTOP — RESTORE STAY CONNECTED / NEWSLETTER
========================================================= */

@media (min-width:769px){

    .newsletter{
        width:100% !important;
        box-sizing:border-box !important;
    }

    .newsletter > .container{
        width:90% !important;
        max-width:1300px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        text-align:center !important;
        box-sizing:border-box !important;
    }

    .newsletter-form{
        width:100% !important;
        max-width:600px !important;
        margin-left:auto !important;
        margin-right:auto !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
    }

    .newsletter-form input{
        flex:1 !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .newsletter-form button{
        flex-shrink:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

}
/* =========================================================
   DESKTOP SHOP — FINAL RESTORE
========================================================= */

@media (min-width:769px){

    /* SHOP CONTAINER */

    .shop-section > .container,
    .shop-page .container{
        width:90% !important;
        max-width:1300px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        box-sizing:border-box !important;
    }


    /* SEARCH + SORT */

    .shop-section .shop-top{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr 220px !important;
        gap:20px !important;
        align-items:center !important;
        box-sizing:border-box !important;
    }

    .shop-section .shop-top input{
        width:100% !important;
        min-width:0 !important;
        height:48px !important;
        box-sizing:border-box !important;
    }

    .shop-section .shop-top select{
        width:220px !important;
        height:48px !important;
        box-sizing:border-box !important;
    }


    /* CATEGORY BUTTONS */

    .shop-section .category-buttons{
        width:100% !important;
        display:flex !important;
        align-items:center !important;
        gap:12px !important;
        flex-wrap:wrap !important;
        box-sizing:border-box !important;
    }


    /* PRODUCT GRID */

    .shop-section .products-grid{
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(4,1fr) !important;
        gap:25px !important;
        align-items:start !important;
        box-sizing:border-box !important;
    }

    .shop-section .product-card{
        width:100% !important;
        box-sizing:border-box !important;
    }

}
/* =========================================================
   FINAL MOBILE RESTORE — ALL PAGES
========================================================= */

@media (max-width:768px){

    /* =========================
       MOBILE NAVBAR — ALL PAGES
    ========================= */

    .navbar{
        position:relative !important;
        width:100% !important;
        height:65px !important;
        min-height:65px !important;
        margin:0 !important;
        padding:0 !important;
        z-index:10000 !important;
    }

    .navbar .nav-container{
        position:relative !important;
        width:100% !important;
        height:65px !important;
        min-height:65px !important;
        margin:0 !important;
        padding:0 10px !important;
        display:flex !important;
        align-items:center !important;
        box-sizing:border-box !important;
    }

    /* Hide desktop navigation */
    .navbar .main-nav,
    .navbar nav.main-nav{
        display:none !important;
    }

    /* Logo — center */
    .navbar .logo{
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        transform:translate(-50%,-50%) !important;

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

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

        z-index:10001 !important;
    }

    .navbar .logo img{
        display:block !important;
        width:95px !important;
        height:auto !important;
        max-height:48px !important;
        object-fit:contain !important;
    }

    /* Menu — left */
    .navbar .mobile-menu-btn{
        display:flex !important;

        position:absolute !important;
        left:10px !important;
        top:50% !important;
        transform:translateY(-50%) !important;

        width:36px !important;
        height:36px !important;

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

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

        border:none !important;
        background:none !important;

        z-index:10002 !important;
    }

    /* Search / Wishlist / Cart — right */
    .navbar .nav-icons{
        position:absolute !important;
        right:10px !important;
        top:50% !important;
        transform:translateY(-50%) !important;

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

        gap:6px !important;

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

        z-index:10002 !important;
    }

    .navbar .header-icon-btn{
        width:27px !important;
        height:27px !important;

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

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

    .navbar .cart-icon{
        position:relative !important;

        width:27px !important;
        height:27px !important;

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

        margin:0 !important;
        overflow:visible !important;
    }


    /* =========================
       HOME HERO — KEEP BELOW NAV
    ========================= */

    .hero-slider{
        position:relative !important;
        top:auto !important;
        margin-top:0 !important;
        transform:none !important;
        z-index:1 !important;
    }

}


/* =========================================================
   SHOP PAGE — MOBILE BANNER ONLY
========================================================= */

@media (max-width:768px){

    .shop-page-banner{
        position:relative !important;
        width:100% !important;

        margin-top:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;

        padding:5px 0 20px !important;

        box-sizing:border-box !important;

        border-radius:0 0 18px 18px !important;
        overflow:hidden !important;

        background-color:#d6e4ee !important;
    }

    .shop-page-banner .page-banner-content{
        width:100% !important;
        max-width:none !important;

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

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

        box-sizing:border-box !important;
    }

    .shop-page-banner .page-banner-image{
        width:100% !important;
        height:180px !important;

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

        margin:0 !important;
    }

    .shop-page-banner .page-banner-image img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
        object-position:center center !important;

        display:block !important;
    }

}


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

@media(max-width:480px){

    .navbar .logo img{
        width:95px !important;
    }

    .navbar .mobile-menu-btn{
        left:8px !important;
    }

    .navbar .nav-icons{
        right:8px !important;
        gap:5px !important;
    }

    .navbar .header-icon-btn{
        width:25px !important;
        height:25px !important;
    }

    .navbar .cart-icon{
        width:25px !important;
        height:25px !important;
    }

}
/* =========================================================
   MOBILE MENU — HIDDEN UNTIL OPENED
========================================================= */

@media (max-width:768px){

    .mobile-menu{
        display:block !important;

        position:fixed !important;

        top:0 !important;
        left:-100% !important;
        right:auto !important;

        width:82% !important;
        max-width:340px !important;
        height:100vh !important;

        background:#fff !important;

        z-index:100000 !important;

        padding:25px !important;

        box-sizing:border-box !important;

        overflow-y:auto !important;

        visibility:hidden !important;
        opacity:0 !important;

        transition:
            left .3s ease,
            opacity .2s ease !important;
    }

    /* OPEN ONLY WHEN ACTIVE */

    .mobile-menu.active{
        left:0 !important;

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

}


/* =========================================================
   DESKTOP — MOBILE MENU ALWAYS HIDDEN
========================================================= */

@media (min-width:769px){

    .mobile-menu{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
    }

}
/* =========================================================
   MOBILE MENU — FINAL CLEAN OPEN STATE
========================================================= */

@media (max-width:768px){

    .mobile-menu{
        position:fixed !important;

        top:0 !important;
        left:-100% !important;
        right:auto !important;

        width:82% !important;
        max-width:340px !important;
        height:100vh !important;

        background:#fff !important;

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

        box-sizing:border-box !important;

        overflow-y:auto !important;

        z-index:100000 !important;

        visibility:hidden !important;
        opacity:0 !important;

        transition:
            left .3s ease,
            opacity .2s ease !important;
    }

    /* OPEN */

    .mobile-menu.active{
        left:0 !important;
        visibility:visible !important;
        opacity:1 !important;
    }


    /* MENU HEADER */

    .mobile-menu-header{
        width:100% !important;

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

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

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

    .mobile-menu-header span{
        display:block !important;

        margin:0 !important;

        font-size:20px !important;
        font-weight:600 !important;
    }

    .mobile-menu-header button{
        display:flex !important;

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

        width:38px !important;
        height:38px !important;

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

        border:none !important;
        background:none !important;

        font-size:22px !important;
        cursor:pointer !important;
    }


    /* MENU LINKS */

    .mobile-nav-links{
        width:100% !important;

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

        margin:20px 0 0 !important;
        padding:0 !important;
    }

    .mobile-nav-links a{
        display:block !important;

        width:100% !important;

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

        box-sizing:border-box !important;

        color:#222 !important;

        text-decoration:none !important;

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

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

    .mobile-nav-links a:hover{
        color:#b08a45 !important;
    }

}


/* =========================================================
   DESKTOP — KEEP MOBILE MENU HIDDEN
========================================================= */

@media (min-width:769px){

    .mobile-menu{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
    }

}
/* =========================================================
   MOBILE NAVBAR — MOVE ICONS SLIGHTLY LEFT
========================================================= */

@media (max-width:768px){

    .navbar .nav-icons{
        right:16px !important;
        gap:6px !important;
    }

    .navbar .cart-icon{
        margin-right:0 !important;
        overflow:visible !important;
    }

    .navbar .cart-count{
        right:-5px !important;
    }

}

@media (max-width:480px){

    .navbar .nav-icons{
        right:14px !important;
        gap:4px !important;
    }

}
/* =========================================================
   MOBILE — COLLECTION CARDS FINAL 80/20
========================================================= */

@media (max-width:768px){

    .explore-collections .collection-card{
        height:430px !important;

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

        overflow:hidden !important;
        position:relative !important;

        box-sizing:border-box !important;
    }

    /* IMAGE — EXACT 80% */

    .explore-collections .collection-image{
        position:relative !important;

        width:100% !important;
        height:344px !important;
        min-height:344px !important;

        flex:0 0 344px !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }

    .explore-collections .collection-image img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
        display:block !important;
    }

    /* TEXT — EXACT 20% */

    .explore-collections .collection-content{
        position:relative !important;
        inset:auto !important;

        width:100% !important;
        height:86px !important;
        min-height:86px !important;

        flex:0 0 86px !important;

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

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

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

        text-align:center !important;

        box-sizing:border-box !important;

        background:#f8f4ef !important;
    }

    .explore-collections .collection-content h3{
        margin:0 0 6px !important;
        text-align:center !important;
    }

    .explore-collections .collection-content span{
        display:block !important;
        text-align:center !important;
    }

}


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

@media(max-width:480px){

    .explore-collections .collection-card{
        height:400px !important;
    }

    .explore-collections .collection-image{
        height:320px !important;
        min-height:320px !important;
        flex:0 0 320px !important;
    }

    .explore-collections .collection-content{
        height:80px !important;
        min-height:80px !important;
        flex:0 0 80px !important;
    }

}
/* =========================================================
   MOBILE — COLLECTION TEXT AREA
========================================================= */

@media (max-width:768px){

    .explore-collections .collection-content{
        background:#555 !important;
    }

}
/* =========================================================
   MOBILE — STAY CONNECTED CENTER
========================================================= */

@media (max-width:768px){

    .newsletter{
        text-align:center !important;
    }

    .newsletter .container{
        width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;

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

        box-sizing:border-box !important;
    }

    .newsletter h2,
    .newsletter p{
        width:100% !important;
        text-align:center !important;
    }

    .newsletter-form{
        width:100% !important;
        max-width:500px !important;

        margin-left:auto !important;
        margin-right:auto !important;

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

    .newsletter-form input,
    .newsletter-form button{
        width:100% !important;
        box-sizing:border-box !important;
    }

}
/* =========================================================
   SHOP PAGE — MOBILE FINAL LAYOUT
========================================================= */

@media (max-width:768px){

    /* =========================
       SHOP SEARCH + SORT
    ========================= */

    .shop-section .shop-top{
        width:100% !important;

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

        gap:12px !important;

        padding:0 15px !important;

        box-sizing:border-box !important;
    }

    .shop-section .shop-top input{
        width:100% !important;
        max-width:none !important;

        height:45px !important;

        box-sizing:border-box !important;
    }

    .shop-section .shop-top select{
        width:100% !important;
        height:45px !important;

        box-sizing:border-box !important;
    }


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

    .shop-section .category-buttons{
        width:100% !important;

        display:flex !important;

        flex-direction:row !important;
        flex-wrap:nowrap !important;

        align-items:center !important;

        gap:8px !important;

        padding:0 15px !important;

        margin:0 !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        box-sizing:border-box !important;

        white-space:nowrap !important;

        scrollbar-width:none !important;
    }

    .shop-section .category-buttons::-webkit-scrollbar{
        display:none !important;
    }

    .shop-section .category-buttons button,
    .shop-section .category-buttons a{
        flex:0 0 auto !important;

        white-space:nowrap !important;

        font-size:12px !important;

        padding:8px 12px !important;

        box-sizing:border-box !important;
    }


    /* =========================
       PRODUCTS — 2 PER ROW
    ========================= */

    .shop-section .products-grid{
        width:100% !important;

        display:grid !important;

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

        gap:18px 12px !important;

        padding:0 12px !important;

        box-sizing:border-box !important;

        align-items:start !important;
    }

    .shop-section .product-card{
        width:100% !important;

        min-width:0 !important;

        box-sizing:border-box !important;
    }

    .shop-section .product-image{
        width:100% !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }

    .shop-section .product-image img{
        width:100% !important;

        height:auto !important;

        aspect-ratio:1 / 1 !important;

        object-fit:cover !important;

        display:block !important;
    }

}
/* =========================================================
   SHOP MOBILE — SEARCH / PRODUCT IMAGE FIX
========================================================= */

@media (max-width:768px){

    /* SORT BY */

    .shop-section .shop-top select{
        height:48px !important;
        min-height:48px !important;

        line-height:48px !important;

        padding-top:0 !important;
        padding-bottom:0 !important;

        font-size:14px !important;

        box-sizing:border-box !important;
    }


    /* PRODUCT IMAGE — COMPACT */

    .shop-section .product-image{
        width:100% !important;

        height:190px !important;

        overflow:hidden !important;

        border-radius:8px !important;

        box-sizing:border-box !important;
    }

    .shop-section .product-image img{
        width:100% !important;
        height:100% !important;

        aspect-ratio:auto !important;

        object-fit:cover !important;

        display:block !important;
    }

}


@media(max-width:480px){

    .shop-section .product-image{
        height:165px !important;
    }

}
/* =========================================================
   SHOP MOBILE — PRODUCT NAME BETTER WRAP + CENTER
========================================================= */

@media (max-width:768px){

    .shop-section .product-info{
        width:100% !important;
        padding:10px 2px 5px !important;

        box-sizing:border-box !important;

        text-align:center !important;
        overflow:hidden !important;
    }

    .shop-section .product-info h3{
        width:100% !important;

        margin:0 auto 6px !important;
        padding:0 !important;

        font-size:14px !important;
        line-height:1.3 !important;

        text-align:center !important;

        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:normal !important;

        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:3 !important;

        overflow:hidden !important;

        min-height:auto !important;
        max-height:55px !important;
    }

}

@media(max-width:480px){

    .shop-section .product-info h3{
        font-size:13px !important;
        line-height:1.3 !important;

        max-height:51px !important;
    }

}
/* =========================================================
   SHOP MOBILE — SHOW FULL PRODUCT IMAGE
========================================================= */

@media (max-width:768px){

    .shop-section .product-image{
        height:170px !important;
        background:#fff !important;

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

        overflow:hidden !important;
    }

    .shop-section .product-image img{
        width:100% !important;
        height:100% !important;

        object-fit:contain !important;
        object-position:center !important;

        display:block !important;
    }

}

@media(max-width:480px){

    .shop-section .product-image{
        height:145px !important;
    }

}
/* =========================================================
   SHOP MOBILE — GAP AFTER CATEGORIES
========================================================= */

@media (max-width:768px){

    .shop-section .products-grid{
        margin-top:20px !important;
    }

}

@media(max-width:480px){

    .shop-section .products-grid{
        margin-top:16px !important;
    }

}
/* =========================================================
   ABOUT PAGE — DESKTOP FOUNDER IMAGE RESTORE
========================================================= */

@media (min-width:769px){

    .story-image{
        display:block !important;
        position:relative !important;

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

        height:auto !important;

        margin:0 auto !important;

        overflow:visible !important;
    }

    .story-image img{
        display:block !important;

        width:100% !important;
        height:auto !important;

        max-width:100% !important;

        object-fit:contain !important;
        object-position:center !important;

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

}
/* =========================================================
   ABOUT PAGE — DESKTOP FOUNDER IMAGE + PREMIUM BADGE
========================================================= */

@media (min-width:769px){

    .story-image{
        position:relative !important;

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

        margin:0 auto !important;

        overflow:hidden !important;

        border-radius:18px !important;

        box-shadow:
            0 15px 40px rgba(0,0,0,0.12) !important;
    }

    .story-image img{
        display:block !important;

        width:100% !important;
        height:auto !important;

        max-width:100% !important;

        object-fit:contain !important;
        object-position:center !important;
    }


    /* =========================
       PREMIUM FOUNDER BADGE
    ========================= */

    .founder-badge{
        position:absolute !important;

        left:20px !important;
        right:20px !important;
        bottom:20px !important;

        z-index:10 !important;

        background:rgba(255,255,255,0.96) !important;

        padding:14px 20px !important;

        border-radius:14px !important;

        text-align:center !important;

        /* GOLD PREMIUM BORDER */

        border:1px solid rgba(201,162,39,0.55) !important;

        box-shadow:
            0 10px 30px rgba(0,0,0,0.16) !important;

        backdrop-filter:blur(8px) !important;

        box-sizing:border-box !important;
    }

    .founder-badge span{
        display:block !important;

        font-size:11px !important;

        color:#a27b25 !important;

        text-transform:uppercase !important;

        letter-spacing:1.8px !important;

        font-weight:600 !important;

        margin-bottom:5px !important;
    }

    .founder-badge h3{
        margin:0 !important;

        font-size:18px !important;

        line-height:1.3 !important;

        color:#222 !important;

        font-weight:600 !important;
    }

}
/* =========================================================
   ABOUT PAGE — DESKTOP WHAT WE BELIEVE RESTORE
========================================================= */

@media (min-width:769px){

    .brand-values{
        width:100% !important;
    }

    .brand-values > .container{
        width:90% !important;
        max-width:1300px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        box-sizing:border-box !important;
    }

    /* SECTION HEADING */

    .brand-values-heading{
        width:100% !important;
        max-width:900px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        text-align:center !important;
    }

    /* FOUR CARDS */

    .brand-values .values-grid{
        width:100% !important;

        display:grid !important;

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

        gap:25px !important;

        box-sizing:border-box !important;
    }

    .brand-values .value-card{
        width:100% !important;

        box-sizing:border-box !important;

        display:block !important;
    }

}
/* =========================================================
   TEST — SHOP MOBILE SQUARE PRODUCT CARDS
========================================================= */

@media (max-width:768px){

    .shop-section .product-card{
        width:100% !important;
        aspect-ratio:1 / 1 !important;

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

        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .shop-section .product-image{
        width:100% !important;
        height:70% !important;

        flex-shrink:0 !important;

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

        background:#fff !important;
        overflow:hidden !important;
    }

    .shop-section .product-image img{
        width:100% !important;
        height:100% !important;

        object-fit:contain !important;
        object-position:center !important;
    }

    .shop-section .product-info{
    width:100% !important;
    height:auto !important;

    flex:none !important;

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

    padding:10px 6px !important;
    box-sizing:border-box !important;

    text-align:center !important;
    overflow:hidden !important;
}
    .shop-section .product-info h3{
        width:100% !important;

        margin:0 !important;

        font-size:13px !important;
        line-height:1.25 !important;

        text-align:center !important;

        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;

        overflow:hidden !important;
    }

}

@media(max-width:480px){

    .shop-section .product-card{
        aspect-ratio:1 / 1 !important;
    }

    .shop-section .product-info h3{
        font-size:12px !important;
    }

}
/* =========================================================
   TEST — SQUARE CARD TEXT FIX
========================================================= */

@media (max-width:768px){

    .shop-section .product-card{
        aspect-ratio:1 / 1 !important;
    }

    .shop-section .product-image{
        height:62% !important;
        flex-shrink:0 !important;
    }

    .shop-section .product-info{
        height:38% !important;
        min-height:0 !important;

        padding:6px 5px !important;

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

        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .shop-section .product-info h3{
        margin:0 0 4px !important;

        width:100% !important;

        font-size:13px !important;
        line-height:1.25 !important;

        text-align:center !important;

        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;

        overflow:hidden !important;
    }

}

@media(max-width:480px){

    .shop-section .product-image{
        height:60% !important;
    }

    .shop-section .product-info{
        height:40% !important;
        padding:5px 4px !important;
    }

    .shop-section .product-info h3{
        font-size:12px !important;
    }

}
/* =========================================================
   SHOP MOBILE — SQUARE CARD COMPACT TEXT
========================================================= */

@media (max-width:768px){

    .shop-section .product-image{
        height:57% !important;
    }

    .shop-section .product-info{
        height:43% !important;
        padding:4px 3px !important;

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

        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    /* PRODUCT NAME */
    .shop-section .product-info h3{
        font-size:11px !important;
        line-height:1.2 !important;

        margin:0 0 3px !important;

        text-align:center !important;

        max-height:27px !important;

        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;

        overflow:hidden !important;
    }

    /* PRICE */
    .shop-section .product-info .price{
        font-size:11px !important;
        line-height:1.1 !important;
        margin:0 !important;
    }

    /* OLD PRICE */
    .shop-section .product-info .old-price{
        font-size:9px !important;
    }

    /* DISCOUNT */
    .shop-section .product-info .discount{
        font-size:8px !important;
        padding:2px 5px !important;
        line-height:1.1 !important;
    }

}

@media(max-width:480px){

    .shop-section .product-image{
        height:55% !important;
    }

    .shop-section .product-info{
        height:45% !important;
    }

    .shop-section .product-info h3{
        font-size:10px !important;
        max-height:24px !important;
    }

    .shop-section .product-info .price{
        font-size:10px !important;
    }

    .shop-section .product-info .old-price{
        font-size:8px !important;
    }

    .shop-section .product-info .discount{
        font-size:7px !important;
        padding:2px 4px !important;
    }

}
/* =========================================================
   SHOP MOBILE — EXTRA COMPACT PRODUCT TEXT
========================================================= */

@media (max-width:768px){

    .shop-section .product-info h3{
        font-size:10px !important;
        line-height:1.15 !important;
        max-height:24px !important;
        margin-bottom:2px !important;
    }

    .shop-section .product-info .price{
        font-size:10px !important;
        line-height:1 !important;
    }

    .shop-section .product-info .old-price{
        font-size:8px !important;
    }

    .shop-section .product-info .discount{
        font-size:7px !important;
        padding:2px 4px !important;
        line-height:1 !important;
    }

}

@media(max-width:480px){

    .shop-section .product-info h3{
        font-size:9px !important;
        max-height:22px !important;
    }

    .shop-section .product-info .price{
        font-size:9px !important;
    }

    .shop-section .product-info .old-price{
        font-size:7px !important;
    }

    .shop-section .product-info .discount{
        font-size:6px !important;
    }

}
/* =========================================================
   SHOP MOBILE — FINAL SMALL TEXT ADJUSTMENT
========================================================= */

@media (max-width:768px){

    .shop-section .product-info h3{
        font-size:9px !important;
        line-height:1.1 !important;
        max-height:20px !important;
        margin-bottom:2px !important;
    }

    .shop-section .product-info .price{
        font-size:9px !important;
    }

    .shop-section .product-info .old-price{
        font-size:7px !important;
    }

    .shop-section .product-info .discount{
        font-size:6px !important;
        padding:1px 4px !important;
    }

}

@media(max-width:480px){

    .shop-section .product-info h3{
        font-size:8px !important;
        max-height:18px !important;
    }

    .shop-section .product-info .price{
        font-size:8px !important;
    }

    .shop-section .product-info .old-price{
        font-size:6px !important;
    }

    .shop-section .product-info .discount{
        font-size:5px !important;
    }

}
/* =========================================================
   SHOP MOBILE — PRODUCT BADGES + WISHLIST
========================================================= */

@media (max-width:768px){

    /* PRODUCT CARD */
    .shop-section .product-card{
        position:relative !important;
        overflow:hidden !important;
    }

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

    .shop-section .product-image{
        position:relative !important;
    }

    /* =====================================================
       SMALL PRODUCT BADGE
       NEW / TRENDING / BEST SELLER
    ===================================================== */

    .shop-section .product-badge{
        position:absolute !important;

        top:7px !important;
        left:7px !important;

        z-index:10 !important;

        padding:3px 7px !important;

        border-radius:10px !important;

        font-size:7px !important;
        line-height:1.1 !important;

        font-weight:600 !important;

        letter-spacing:.5px !important;

        text-transform:uppercase !important;

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

        white-space:nowrap !important;
    }


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

    .shop-section .wishlist-btn{
        position:absolute !important;

        top:7px !important;
        right:7px !important;

        z-index:10 !important;

        width:25px !important;
        height:25px !important;

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

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

        border:none !important;
        border-radius:50% !important;

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

        box-shadow:0 2px 8px rgba(0,0,0,.12) !important;

        cursor:pointer !important;
    }

    .shop-section .wishlist-btn i{
        font-size:12px !important;

        line-height:1 !important;

        color:#555 !important;
    }

    /* ACTIVE WISHLIST */

    .shop-section .wishlist-btn.active i,
    .shop-section .wishlist-btn.active{
        color:#c0392b !important;
    }

}


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

@media(max-width:480px){

    .shop-section .product-badge{
        top:5px !important;
        left:5px !important;

        padding:2px 6px !important;

        font-size:6px !important;
    }

    .shop-section .wishlist-btn{
        top:5px !important;
        right:5px !important;

        width:23px !important;
        height:23px !important;
    }

    .shop-section .wishlist-btn i{
        font-size:11px !important;
    }

}
/* =========================================================
   SHOP MOBILE — PREMIUM BADGE + WISHLIST
========================================================= */

@media (max-width:768px){

    /* =========================
       PRODUCT BADGE
    ========================= */

    .shop-section .product-badge{
        top:8px !important;
        left:8px !important;

        padding:5px 9px !important;

        border-radius:12px !important;

        font-size:8px !important;
        line-height:1.1 !important;

        font-weight:600 !important;

        letter-spacing:.6px !important;
        text-transform:uppercase !important;

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

        box-shadow:0 2px 7px rgba(0,0,0,.15) !important;

        white-space:nowrap !important;
    }


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

    .shop-section .wishlist-btn{
        top:8px !important;
        right:8px !important;

        width:29px !important;
        height:29px !important;

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

        padding:0 !important;
        border:none !important;

        border-radius:50% !important;

        background:#fff !important;

        box-shadow:0 2px 8px rgba(0,0,0,.15) !important;

        cursor:pointer !important;
    }

    .shop-section .wishlist-btn i{
        font-size:14px !important;
        color:#b08a45 !important;
        line-height:1 !important;
    }

    /* ACTIVE HEART */

    .shop-section .wishlist-btn.active i{
        color:#b08a45 !important;
    }

}


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

@media(max-width:480px){

    .shop-section .product-badge{
        top:6px !important;
        left:6px !important;

        padding:4px 8px !important;

        font-size:7px !important;
    }

    .shop-section .wishlist-btn{
        top:6px !important;
        right:6px !important;

        width:27px !important;
        height:27px !important;
    }

    .shop-section .wishlist-btn i{
        font-size:13px !important;
    }

}
/* =========================================================
   PRODUCT DETAILS — MOBILE GALLERY
========================================================= */

@media (max-width: 768px) {

    /* MAIN GALLERY CONTAINER */

    .product-details .product-left {
        position: relative;

        width: 100%;
        height: auto;
        min-height: 0;

        padding: 0;

        display: block;

        background: #fff;

        overflow: visible;
    }


    /* MAIN IMAGE */

    .product-details .product-left #mainImage {

        display: block !important;

        width: 100% !important;
        height: auto !important;

        aspect-ratio: 1 / 1;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center;

        border-radius: 16px;

        box-sizing: border-box;
    }


    /* PREVIOUS / NEXT */

    .product-details .prev-img,
    .product-details .next-img {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        width: 40px;
        height: 40px;

        z-index: 20;

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


    .product-details .prev-img {
        left: 12px;
    }


    .product-details .next-img {
        right: 12px;
    }


    /* =========================================================
   PRODUCT DETAILS — MOBILE GALLERY FINAL ADJUSTMENT
========================================================= */

@media (max-width: 768px) {

    /* MAIN GALLERY BOX */

    .product-details .product-left {
        position: relative;

        width: 100%;

        height: auto;
        min-height: 0;

        padding: 12px;

        box-sizing: border-box;

        background: #fff;

        border-radius: 16px;

        overflow: hidden;
    }


    /* MAIN IMAGE */

    .product-details .product-left #mainImage {

        display: block !important;

        width: 100% !important;

        height: auto !important;

        aspect-ratio: 1 / 1;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain !important;

        object-position: center;

        border-radius: 12px;

        box-sizing: border-box;
    }


    /* PREVIOUS / NEXT */

    .product-details .prev-img,
    .product-details .next-img {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        width: 36px;
        height: 36px;

        z-index: 20;

        display: flex;

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


    .product-details .prev-img {
        left: 18px;
    }


    .product-details .next-img {
        right: 18px;
    }


 /* =========================================================
   PRODUCT DETAILS — MOBILE GALLERY
========================================================= */

@media (max-width: 768px) {

    .product-details .product-left {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;

        padding: 12px;

        box-sizing: border-box;

        background: #fff;
        border-radius: 16px;

        overflow: hidden;
    }


    /* MAIN IMAGE */

    .product-details .product-left #mainImage {

        display: block !important;

        width: 100% !important;

        height: auto !important;

        aspect-ratio: 1 / 0.92;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center;

        border-radius: 12px;

        box-sizing: border-box;
    }


    /* PREVIOUS / NEXT */

    .product-details .prev-img,
    .product-details .next-img {

        position: absolute;

        top: 43%;

        transform: translateY(-50%);

        width: 38px;
        height: 38px;

        z-index: 20;

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

    .product-details .prev-img {
        left: 18px;
    }

    .product-details .next-img {
        right: 18px;
    }


    /* =====================================================
       THUMBNAILS — FULLY INSIDE BOX
    ===================================================== */

@media (max-width: 768px) {

    .product-details .product-thumbnails {
        width: 100% !important;

        height: 64px !important;

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

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 8px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        box-sizing: border-box !important;

        scrollbar-width: none;
    }

    .product-details .product-thumbnails::-webkit-scrollbar {
        display: none;
    }

    .product-details .product-thumbnail {
        flex: 0 0 54px !important;

        width: 54px !important;
        height: 54px !important;

        min-width: 54px !important;
        max-width: 54px !important;

        padding: 2px !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }

    .product-details .product-thumbnail img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;

        display: block !important;
    }
}
/* =========================================================
   PRODUCT DETAILS — MOBILE GALLERY
   FINAL CLEAN VERSION
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       GALLERY BOX
    ===================================================== */

    .product-details .product-left {

        width: 100% !important;

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

        padding: 12px !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        position: relative !important;

        box-sizing: border-box !important;

        background: #fff !important;

        border-radius: 18px !important;

        overflow: hidden !important;
    }


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

    .product-details .product-left #mainImage {

        width: 100% !important;

        height: auto !important;

        aspect-ratio: 1 / 1 !important;

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

        display: block !important;

        flex-shrink: 0 !important;

        object-fit: contain !important;

        object-position: center !important;

        border-radius: 12px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       PREVIOUS / NEXT ARROWS
    ===================================================== */

    .product-details .product-left .prev-img,
    .product-details .product-left .next-img {

        position: absolute !important;

        top: calc(12px + 50%) !important;

        transform: translateY(-50%) !important;

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

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

        z-index: 20 !important;

        display: flex !important;

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

        border-radius: 50% !important;

        box-sizing: border-box !important;
    }


    .product-details .product-left .prev-img {

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


    .product-details .product-left .next-img {

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


    /* =====================================================
       THUMBNAIL AREA
       ALL 4 IMAGES STAY INSIDE THE BOX
    ===================================================== */

    .product-details .product-left .product-thumbnails {

        position: static !important;

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

        transform: none !important;

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

        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;

        margin: 12px 0 0 !important;

        padding: 4px 0 !important;

        display: grid !important;

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

        grid-template-rows: 1fr !important;

        gap: 6px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        flex-shrink: 0 !important;
    }


    /* =====================================================
       EACH THUMBNAIL
    ===================================================== */

    .product-details .product-left .product-thumbnail {

        position: static !important;

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

        transform: none !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: 100% !important;

        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;

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

        flex: none !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


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

    .product-details .product-left .product-thumbnail img {

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

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

        display: block !important;

        object-fit: contain !important;

        object-position: center !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       PRODUCT RIGHT SIDE
       Keep it below gallery on mobile
    ===================================================== */

    .product-details .product-right {

        width: 100% !important;

        padding: 25px 0 0 !important;

        box-sizing: border-box !important;
    }


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

    .product-details .product-title {

        font-size: 30px !important;

        line-height: 1.2 !important;

        margin-top: 0 !important;

        margin-bottom: 12px !important;
    }

}
/* =========================================================
   PRODUCT DETAILS — MOBILE RIGHT SIDE ONLY
========================================================= */

@media (max-width: 768px) {

    /* Keep product layout full width */
    .product-details .product-wrapper {
        display: block !important;
        width: 100% !important;
    }


    /* RIGHT INFORMATION */
    .product-details .product-right {
        width: 100% !important;
        max-width: 100% !important;

        padding: 25px 0 10px !important;

        box-sizing: border-box !important;
    }


    /* TITLE */
    .product-details .product-title {
        font-size: 28px !important;
        line-height: 1.2 !important;

        margin: 0 0 10px !important;
    }


    /* RATING */
    .product-details .rating {
        margin-bottom: 12px;
    }


    /* PRICE */
    .product-details .product-price {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        gap: 8px;

        margin-bottom: 18px;
    }


    /* DESCRIPTION */
    .product-details .product-description {
        line-height: 1.6;
        margin: 15px 0;
    }


    /* FEATURES */
    .product-details .feature-list {
        margin: 10px 0 15px;
        padding-left: 18px;
    }


    /* STOCK */
    .product-details .stock {
        margin: 12px 0;
    }


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

    .product-details .quantity-box {
        display: flex !important;

        align-items: center;

        width: fit-content;

        margin: 15px 0;
    }


    /* =====================================================
       THREE BUTTONS — ONE LINE
    ===================================================== */

    .product-details .purchase-buttons {

        width: 100% !important;

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        gap: 7px !important;

        box-sizing: border-box !important;
    }


    .product-details .purchase-buttons button {

        flex: 1 1 0 !important;

        width: 0 !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 11px 4px !important;

        height: 46px !important;

        font-size: 12px !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }

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

    .product-details {
        padding-top: 65px !important;
        padding-bottom: 50px !important;
    }

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

    .product-details .product-title {
        font-size: 27px !important;
        line-height: 1.2 !important;
        margin: 0 0 8px !important;
    }

    .product-details .rating {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }

    .product-details .product-price {
        margin-bottom: 16px !important;
    }

    .product-details .product-price .price {
        font-size: 24px !important;
        font-weight: 700 !important;
    }

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

    .product-details .size-options {
        display: grid !important;

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

        gap: 8px !important;

        width: 100% !important;
    }

    .product-details .size-option {
        width: 100% !important;
        margin: 0 !important;
    }

    .product-details .size-option span {
        width: 100% !important;

        display: flex !important;

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

        padding: 9px 5px !important;

        font-size: 12px !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }

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

    .product-details .size-selection .size-options {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .product-details .size-selection .size-option {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .product-details .size-selection .size-option span {
        display: flex !important;
        width: 100% !important;
        height: 42px !important;

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

        padding: 5px 3px !important;

        box-sizing: border-box !important;

        font-size: 12px !important;
        white-space: nowrap !important;
    }

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

    .product-details .size-options {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .product-details .size-option {
        width: 100% !important;
        margin: 0 !important;
    }

    .product-details .size-option:nth-child(4) {
        grid-column: 1 / 4 !important;
    }

    .product-details .size-option span {
        display: flex !important;
        width: 100% !important;
        height: 42px !important;

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

        padding: 5px 3px !important;
        box-sizing: border-box !important;

        font-size: 12px !important;
        white-space: nowrap !important;
    }

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

    .product-details .size-options {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .product-details .size-option:nth-child(4) {
        grid-column: 1 !important;
        width: 100% !important;
    }

    .product-details .size-option:nth-child(4) span {
        width: 100% !important;
        box-sizing: border-box !important;
    }

}
/* =========================================================
   PRODUCT DETAILS — MOBILE DESCRIPTION / FEATURES / STOCK
========================================================= */

@media (max-width: 768px) {

    /* DESCRIPTION */
    .product-details .product-description {
        width: 100% !important;

        margin: 14px 0 12px !important;

        font-size: 14px !important;

        line-height: 1.55 !important;

        color: #555 !important;

        box-sizing: border-box !important;
    }


    /* FEATURES */
    .product-details .feature-list {

        width: 100% !important;

        margin: 8px 0 14px !important;

        padding-left: 18px !important;

        box-sizing: border-box !important;
    }


    .product-details .feature-list li {

        font-size: 13px !important;

        line-height: 1.5 !important;

        margin-bottom: 4px !important;
    }


    /* STOCK */
    .product-details .stock {

        width: 100% !important;

        margin: 10px 0 12px !important;

        font-size: 14px !important;

        font-weight: 600 !important;
    }

}
/* =========================================================
   PRODUCT DETAILS — MOBILE QUANTITY + PURCHASE BUTTONS
========================================================= */

@media (max-width: 768px) {

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

    .product-details .quantity-box {

        display: flex !important;

        align-items: center !important;

        width: fit-content !important;

        height: 42px !important;

        margin: 12px 0 16px !important;

        border: 1px solid #ddd;

        border-radius: 8px;

        overflow: hidden;

        box-sizing: border-box;
    }


    .product-details .quantity-box button {

        width: 42px !important;

        height: 42px !important;

        padding: 0 !important;

        margin: 0 !important;

        border: none !important;

        background: #f5f2ed;

        font-size: 19px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;
    }


    .product-details .quantity-box input {

        width: 45px !important;

        height: 42px !important;

        padding: 0 !important;

        margin: 0 !important;

        border: none !important;

        text-align: center !important;

        font-size: 15px !important;

        outline: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       PURCHASE BUTTONS
    ===================================================== */

    .product-details .purchase-buttons {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        align-items: stretch !important;

        width: 100% !important;

        gap: 7px !important;

        margin-top: 12px !important;

        box-sizing: border-box !important;
    }


    .product-details .purchase-buttons button {

        flex: 1 1 0 !important;

        width: 0 !important;

        min-width: 0 !important;

        height: 46px !important;

        margin: 0 !important;

        padding: 8px 4px !important;

        border-radius: 8px !important;

        font-size: 12px !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 4px !important;

        box-sizing: border-box !important;
    }


    /* ADD TO CART */

    .product-details .cart-btn {
        background: #b8894f !important;
        color: #fff !important;
    }


    /* BUY NOW */

    .product-details .buy-btn {
        background: #111 !important;
        color: #fff !important;
    }


    /* WHATSAPP */

    .product-details .whatsapp-btn {
        background: #25D366 !important;
        color: #fff !important;
    }

}
/* =========================================================
   CART PAGE — MOBILE RESPONSIVENESS
========================================================= */

@media (max-width: 768px) {

    /* CART PAGE */

    .cart-page {
        padding: 80px 15px 50px !important;
        min-height: 100vh;
        box-sizing: border-box;
    }


 @media (max-width: 768px) {

    .cart-page .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .cart-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .cart-items {
        width: 100% !important;
    }

    .cart-card {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .cart-summary {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}


    /* HEADING */

    .cart-page h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }


    /* CART WRAPPER */

    .cart-wrapper {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 25px !important;

        margin-top: 20px !important;
    }


    /* CART ITEMS */

    .cart-items {
        width: 100% !important;
    }


    /* CART SUMMARY */

    .cart-summary {
        width: 100% !important;

        position: static !important;

        padding: 20px !important;

        box-sizing: border-box !important;

        border-radius: 12px !important;
    }


    .cart-summary h2 {
        font-size: 21px !important;
    }


    /* SUMMARY ROW */

    .summary-row {
        margin: 14px 0 !important;
    }


    .total-row {
        font-size: 21px !important;
    }

}
/* =========================================================
   CART — MOBILE PRODUCT CARD
========================================================= */

@media (max-width: 768px) {

    /* Cart product card */
    .cart-card {
        width: 100% !important;
        box-sizing: border-box !important;

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

        align-items: center !important;

        gap: 15px !important;

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

        border-radius: 12px !important;
    }


    /* Product image */
    .cart-card > img {
        width: 90px !important;
        height: 100px !important;

        object-fit: contain !important;
        object-position: center !important;

        border-radius: 8px !important;
    }


    /* Product information area */
    .cart-card h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;

        margin: 0 0 7px 0 !important;

        word-break: break-word !important;
    }


    .cart-card p {
        font-size: 14px !important;
        line-height: 1.4 !important;

        margin: 4px 0 !important;
    }


    /* Quantity controls if generated by cart.js */
    .cart-card button {
        font-size: 14px !important;
    }


    /* Prevent long product names from pushing the card */
    .cart-card > * {
        min-width: 0 !important;
    }

}
/* =========================================================
   CART — MOBILE ORDER SUMMARY
========================================================= */

@media (max-width: 768px) {

    .cart-summary {
        width: 100% !important;
        box-sizing: border-box !important;

        padding: 20px !important;

        border-radius: 12px !important;

        position: static !important;
    }


    .cart-summary h2 {
        font-size: 21px !important;
        margin-bottom: 18px !important;
    }


    /* Summary rows */

    .cart-summary .summary-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        margin: 14px 0 !important;

        font-size: 15px !important;
    }


    /* Total */

    .cart-summary .total-row {
        font-size: 21px !important;
        font-weight: 700 !important;

        margin-top: 18px !important;
    }


    /* Coupon area */

    .cart-summary .coupon-box {
        width: 100% !important;
        margin-top: 15px !important;
    }


    .cart-summary .coupon-input-row {
        display: flex !important;

        width: 100% !important;

        gap: 8px !important;
    }


    .cart-summary .coupon-input-row input {
        flex: 1 !important;

        min-width: 0 !important;

        padding: 12px !important;

        box-sizing: border-box !important;
    }


    .cart-summary .coupon-input-row button {
        flex: 0 0 auto !important;

        padding: 12px 16px !important;

        white-space: nowrap !important;
    }


    /* Shipping message */

    .cart-summary .shipping-message {
        font-size: 13px !important;
        line-height: 1.4 !important;

        margin: 8px 0 !important;
    }


    /* Action buttons */

    .cart-action-buttons {
        width: 100% !important;

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

        gap: 10px !important;

        margin-top: 20px !important;
    }


    .cart-action-buttons a {
        width: 100% !important;

        box-sizing: border-box !important;

        text-align: center !important;

        padding: 14px !important;

        border-radius: 9px !important;

        margin-top: 0 !important;
    }


    .checkout-btn,
    .whatsapp-order-btn {
        display: block !important;
    }

}
/* =========================================================
   CHECKOUT — MOBILE CUSTOMER FORM
========================================================= */

@media (max-width: 768px) {

    .checkout-page {
        padding-top: 5px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 50px !important;
    }

    .checkout-container {
        margin-top: 5px !important;
    }

}
    /* LEFT CUSTOMER FORM */

    .checkout-left {
        width: 100% !important;

        box-sizing: border-box !important;

        padding: 20px !important;

        border-radius: 12px !important;
    }


    /* SECTION HEADINGS */

    .checkout-left h2 {
        font-size: 21px !important;

        line-height: 1.3 !important;

        margin-bottom: 16px !important;
    }


    /* INPUTS */

    .checkout-left input,
    .checkout-left textarea {
        width: 100% !important;

        box-sizing: border-box !important;

        padding: 13px !important;

        margin-bottom: 14px !important;

        font-size: 15px !important;

        border-radius: 8px !important;
    }


    /* TEXTAREA */

    .checkout-left textarea {
        min-height: 100px !important;

        resize: vertical !important;
    }


    /* PAYMENT SECTION — basic mobile fit */

    .payment-method {
        width: 100% !important;

        box-sizing: border-box !important;

        margin-top: 10px !important;
    }


    .payment-method h2 {
        font-size: 21px !important;
    }


    .payment-method label {
        display: flex !important;

        align-items: flex-start !important;

        gap: 8px !important;

        line-height: 1.4 !important;

        margin: 12px 0 !important;
    }


    .payment-method input[type="radio"] {
        width: auto !important;

        margin-top: 4px !important;

        flex-shrink: 0 !important;
    }


    /* PLACE ORDER */

    .place-order-btn {
        width: 100% !important;

        box-sizing: border-box !important;

        padding: 14px !important;

        margin-top: 20px !important;

        font-size: 17px !important;

        border-radius: 8px !important;
    }

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

    .checkout-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;

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

        margin: 5px auto 0 !important;
    }

    /* Customer form first */
    .checkout-left {
        order: 1 !important;
    }

    /* Order summary after form */
    .checkout-right {
        order: 2 !important;
    }

}
/* =========================================================
   CHECKOUT — MOBILE ORDER SUMMARY
========================================================= */

@media (max-width: 768px) {

    .checkout-right {
        width: 100% !important;
        box-sizing: border-box !important;

        padding: 20px !important;

        position: static !important;

        border-radius: 12px !important;
    }

    .checkout-right h2 {
        font-size: 21px !important;
        margin-bottom: 18px !important;
    }

    .checkout-right .summary-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;

        width: 100% !important;

        margin: 14px 0 !important;

        font-size: 15px !important;
    }

    .checkout-right .total-row {
        font-size: 21px !important;
        font-weight: 700 !important;
    }

    .checkout-right .coupon-box {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .checkout-right .coupon-box input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .checkout-right .coupon-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }

}
/* =========================================================
   CHECKOUT — MOBILE FINAL ORDER
   DESKTOP COMPLETELY UNCHANGED
========================================================= */

@media (max-width: 768px) {

    .checkout-container {
        display: flex !important;
        flex-direction: column !important;
    }

    .checkout-left {
        display: contents !important;
    }

    #checkoutForm {
        display: contents !important;
    }

    /* CUSTOMER DETAILS */
    .customer-section {
        order: 1 !important;
    }

    /* SHIPPING ADDRESS */
    .shipping-section {
        order: 2 !important;
    }

    /* ORDER SUMMARY */
    .checkout-right {
        order: 3 !important;
        width: 100% !important;
    }

    /* PAYMENT METHOD */
    .payment-method {
        order: 4 !important;
        width: 100% !important;
    }

    /* PLACE ORDER */
    .place-order-btn {
        order: 5 !important;
        width: 100% !important;
    }

}
/* =========================================================
   CHECKOUT MOBILE MENU ICON
========================================================= */

.mobile-menu-btn {
    display: none !important;
}

@media (max-width: 768px) {

    .navbar .mobile-menu-btn {
        display: flex !important;

        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);

        width: 34px;
        height: 34px;

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

        padding: 0;
        margin: 0;

        background: transparent;
        border: none;

        color: #222;
        font-size: 21px;

        z-index: 100001;
    }

    .navbar .nav-container {
        position: relative;
    }

}
/* =========================================================
   CHECKOUT MOBILE MENU
========================================================= */

@media (max-width: 768px) {

    .navbar .nav-container {
        position: relative !important;
    }

    .navbar .mobile-menu-btn {
        display: flex !important;

        position: absolute !important;

        left: 15px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 40px !important;
        height: 40px !important;

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

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

        border: none !important;
        background: transparent !important;

        color: #222 !important;

        font-size: 24px !important;
        line-height: 1 !important;

        cursor: pointer !important;

        z-index: 999999 !important;

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

}
/* =========================================================
   CHECKOUT MOBILE MENU — OPEN
========================================================= */

@media (max-width: 768px) {

    .navbar .main-nav {
        display: none !important;
    }

    .navbar .main-nav.mobile-menu-open {
        display: block !important;

        position: absolute !important;
        top: 70px !important;
        left: 0 !important;

        width: 100% !important;

        background: #ffffff !important;

        padding: 15px 0 !important;

        z-index: 999999 !important;

        box-shadow: 0 5px 15px rgba(0,0,0,0.12);
    }

    .navbar .main-nav.mobile-menu-open .nav-links {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 0 !important;

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

    .navbar .main-nav.mobile-menu-open .nav-links li {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 0 !important;
    }

}



@media (max-width: 768px) {

    .checkout-navbar .nav-container {
        position: relative !important;
    }

    /* HIDE DESKTOP NAVIGATION ON MOBILE */
    .checkout-navbar .main-nav {
        display: none !important;
    }

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

    .checkout-navbar .checkout-menu-button {
        display: flex !important;

        position: absolute !important;

        left: 15px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 40px !important;
        height: 40px !important;

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

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

        font-size: 25px !important;
        line-height: 1 !important;

        color: #222 !important;

        cursor: pointer !important;

        z-index: 1000000 !important;
    }


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

   .checkout-navbar .checkout-mobile-menu {
    display: none;

        position: absolute !important;

        top: 70px !important;
        left: 0 !important;

        width: 100% !important;

        background: #ffffff !important;

        padding: 10px 0 !important;

        box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;

        z-index: 999999 !important;
    }


    /* =====================================================
       OPEN MENU
    ===================================================== */

    .checkout-navbar .checkout-menu-toggle:checked
    + .checkout-menu-button
    + .checkout-mobile-menu {
       display: block;
    }


    /* MENU LINKS */

    .checkout-navbar .checkout-mobile-menu a {
        display: block !important;

        width: 100% !important;

        padding: 14px 20px !important;

        text-align: center !important;

        text-decoration: none !important;

        color: #333 !important;

        font-size: 16px !important;
    }

    .checkout-navbar .checkout-mobile-menu a:hover {
        background: #f8f5ef !important;
    }

}
/* =========================================================
   CHECKOUT MOBILE MENU
   SAME SYSTEM AS OTHER PAGES
========================================================= */

@media (max-width: 768px) {

    /* MOBILE MENU BUTTON */

    .checkout-navbar .mobile-menu-btn {
        display: block !important;

        background: none;
        border: none;

        padding: 6px;
        margin: 0;

        font-size: 20px;

        cursor: pointer;

        z-index: 100001 !important;
    }


    /* HIDE DESKTOP NAV */

    .checkout-navbar .main-nav {
        display: none !important;
    }


    @media (max-width: 768px) {

    /* =====================================================
       CHECKOUT MOBILE MENU BUTTON
    ===================================================== */

    .checkout-navbar .mobile-menu-btn {
        display: block !important;

        position: relative !important;

        z-index: 9999999 !important;

        pointer-events: auto !important;

        background: none !important;
        border: none !important;

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

        font-size: 20px !important;

        cursor: pointer !important;
    }


    /* =====================================================
       CHECKOUT MOBILE MENU
    ===================================================== */

    .checkout-navbar .mobile-menu {
        display: block !important;

        position: fixed !important;

        top: 0 !important;
        left: -100% !important;

        width: 82% !important;
        max-width: 340px !important;
        height: 100vh !important;

        background: #fff !important;

        z-index: 100000 !important;

        padding: 25px !important;

        box-sizing: border-box !important;

        overflow-y: auto !important;

        visibility: hidden !important;
        opacity: 0 !important;

        transition:
            left .3s ease,
            opacity .2s ease !important;
    }


    /* =====================================================
       OPEN MENU
    ===================================================== */

    .checkout-navbar .mobile-menu.active {
        left: 0 !important;

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


    /* =====================================================
       MENU LINKS
    ===================================================== */

    .checkout-navbar .mobile-menu a {
        display: block !important;

        width: 100% !important;

        padding: 14px 0 !important;

        color: #333 !important;

        text-decoration: none !important;

        font-size: 16px !important;
    }


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

    .checkout-navbar .mobile-menu-close {
        display: block !important;

        background: none !important;
        border: none !important;

        font-size: 22px !important;

        cursor: pointer !important;

        margin-bottom: 20px !important;
    }

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

    .thankyou-page,
    .thankyou-card{
        position:relative;
        left:0;
        right:0;
        transform:none;
    }

}
/* =====================================================
   THANK YOU PAGE — MOBILE
===================================================== */

@media (max-width:600px){

    .thankyou-page{
        width:100vw !important;
        min-height:100vh !important;

        margin:0 !important;
        padding:20px 30px !important;

        box-sizing:border-box !important;

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

        overflow-x:hidden !important;
    }


    .thankyou-card{
        width:100% !important;
        max-width:none !important;

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

        box-sizing:border-box !important;

        border-radius:16px;
    }


    .thankyou-card h1{
        font-size:30px;
        line-height:1.2;
        margin-bottom:16px;
    }


    .thankyou-card p{
        font-size:15px;
        line-height:1.7;
        margin-bottom:20px;
    }


    .order-id-box{
        padding:15px 12px;
        margin:20px 0 25px;
        box-sizing:border-box;
    }


    .order-id{
        font-size:16px;
        line-height:1.4;
        overflow-wrap:anywhere;
        word-break:break-word;
    }


    .thankyou-actions{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:10px;
    }


    .thankyou-btn{
        width:100% !important;
        box-sizing:border-box !important;
        padding:13px 16px;
        font-size:16px;
    }

}
/* =========================================================
   CUSTOM DESIGN — MOBILE RESPONSIVE
========================================================= */

@media (max-width:600px){

    /* PAGE / SECTIONS */

    section{
        padding:55px 0;
    }

    .custom-container{
        width:100%;
        padding:0 16px;
        box-sizing:border-box;
    }


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

    .custom-hero{
        width:100%;
        padding:115px 0 45px !important;
        min-height:auto;
    }

    .hero-content{
        width:100%;
        max-width:none;
        padding:0 16px;
        box-sizing:border-box;

        display:flex !important;
        flex-direction:column;
        gap:35px;

        text-align:center;
    }

    .hero-left{
        width:100%;
        align-items:center;
    }

    .hero-badge{
        max-width:100%;
        padding:9px 15px;
        font-size:11px;
        line-height:1.4;
        margin-bottom:18px;
    }

    .hero-left h1{
        font-size:42px;
        line-height:1.12;
        margin-bottom:18px;
    }

    .hero-left p{
        font-size:15px;
        line-height:1.7;
        margin-bottom:25px;
    }

    .hero-buttons{
        width:100%;
        flex-direction:column;
        gap:12px;
        margin-bottom:25px;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        box-sizing:border-box;
        padding:13px 18px;
        font-size:15px;
        text-align:center;
    }

    .hero-trust{
        justify-content:center;
        gap:8px;
        font-size:12px;
    }

    .hero-right{
        width:100%;
        margin-top:5px;
    }

    .hero-product{
        width:100%;
        max-width:360px;
        border-radius:18px;
    }

    .hero-glow{
        width:280px;
        height:280px;
    }


    /* ================= WHY CUSTOM ================= */

    .why-layout{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .why-left{
        width:100%;
        text-align:center;
    }

    .why-left h2{
        font-size:28px;
    }

    .section-subtitle{
        font-size:15px;
        line-height:1.6;
        margin-bottom:25px;
    }

    .why-cards{
        margin-top:20px;
        gap:12px;
    }

    .why-card{
        padding:15px;
        gap:12px;
        text-align:left;
        align-items:flex-start;
    }

    .why-icon{
        width:48px;
        height:48px;
        font-size:23px;
    }

    .why-card h3{
        font-size:17px;
        margin-bottom:4px;
    }

    .why-card p{
        font-size:13px;
        line-height:1.5;
    }

    .why-right{
        width:100%;
        order:initial;
    }

    .why-right img{
        width:100%;
        max-height:none;
        border-radius:18px;
    }


    /* ================= HOW IT WORKS ================= */

    .how-it-works h2{
        font-size:28px;
        text-align:center;
    }

    .how-it-works .section-subtitle{
        text-align:center;
    }

    .steps{
        width:100%;
        margin-top:30px;
        gap:12px;
    }

    .step{
        width:100%;
        min-width:0;
        padding:22px 16px;
    }

    .step-icon{
        font-size:35px;
        margin-bottom:10px;
    }

    .step h3{
        font-size:18px;
    }

    .step p{
        font-size:14px;
    }

    .step-arrow{
        font-size:28px;
        transform:rotate(90deg);
    }


    /* ================= CHOOSE PRODUCT ================= */

    .choose-product h2{
        font-size:28px;
        text-align:center;
    }

    .choose-product .section-subtitle{
        text-align:center;
    }

    .product-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
        margin-top:30px;
    }

    .product-card{
        border-radius:15px;
    }

    .product-card img{
        width:100%;
        height:170px;
        object-fit:cover;
    }

    .product-card h3{
        padding:12px 6px;
        font-size:15px;
    }


    /* ================= CUSTOM FORM ================= */

    .contact-layout{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .contact-left{
        width:100%;
    }

    .contact-left h2{
        font-size:28px;
        text-align:center;
    }

    .contact-left .section-subtitle{
        text-align:center;
    }

    .karinkashi-list{
        margin-top:25px;
        gap:12px;
    }

    .karinkashi-item{
        padding:14px;
        gap:12px;
        align-items:flex-start;
    }

    .karinkashi-icon{
        width:45px;
        height:45px;
        font-size:22px;
        flex-shrink:0;
    }

    .karinkashi-item h3{
        font-size:17px;
    }

    .karinkashi-item p{
        font-size:13px;
        line-height:1.5;
    }


    /* FORM CARD */

    .contact-right{
        width:100%;
        padding:22px 16px;
        box-sizing:border-box;
        border-radius:18px;
    }

    .contact-right h2{
        font-size:27px;
        text-align:center;
    }

    .contact-right .section-subtitle{
        text-align:center;
    }

    .custom-form{
        display:flex;
        flex-direction:column;
        gap:16px;
        margin-top:25px;
    }

    .form-group{
        width:100%;
    }

    .form-group.full-width{
        width:100%;
    }

    .form-group input,
    .form-group textarea,
    .form-group select{
        width:100%;
        min-height:48px;
        padding:12px;
        font-size:14px;
        box-sizing:border-box;
    }

    .form-group textarea{
        min-height:110px;
    }

    .form-group label{
        font-size:14px;
        margin-bottom:6px;
    }

    .btn-center{
        width:100%;
        margin-top:10px;
    }

    .whatsapp-btn{
        width:100%;
        max-width:none;
        padding:14px 15px;
        font-size:16px;
        box-sizing:border-box;
    }


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

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
        text-align:center;
    }

}
/* =====================================================
   MOBILE ORDER SUCCESS POPUP
===================================================== */

.mobile-order-success-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);

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

    padding: 20px;

    z-index: 99999;
}

.mobile-order-success-popup {
    width: 100%;
    max-width: 360px;

    background: #ffffff;

    border-radius: 18px;

    padding: 30px 22px;

    text-align: center;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);

    animation: mobileSuccessPopup 0.25s ease;
}

.mobile-success-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: #d6a85f;

    color: #ffffff;

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

    font-size: 27px;
}

.mobile-order-success-popup h2 {
    margin: 0 0 12px;

    font-size: 22px;

    color: #222;

    line-height: 1.3;
}

.mobile-order-success-popup p {
    margin: 0 0 22px;

    font-size: 14px;

    line-height: 1.6;

    color: #666;
}

.mobile-order-success-popup button {
    width: 100%;

    border: none;

    border-radius: 8px;

    padding: 13px 20px;

    background: #d6a85f;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}

.mobile-order-success-popup button:active {
    transform: scale(0.98);
}

@keyframes mobileSuccessPopup {

    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


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

@media (max-width: 480px) {

    .mobile-order-success-overlay {
        padding: 16px;
    }

    .mobile-order-success-popup {
        max-width: 340px;
        padding: 27px 19px;
        border-radius: 16px;
    }

    .mobile-success-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
        margin-bottom: 15px;
    }

    .mobile-order-success-popup h2 {
        font-size: 20px;
    }

    .mobile-order-success-popup p {
        font-size: 13px;
    }

}
/* =====================================================
   CONTACT PAGE - MOBILE LOGO POSITION
===================================================== */

@media screen and (max-width: 768px){

    body:has(.contact-banner) .nav-container{
        position:relative !important;
    }

    body:has(.contact-banner) .nav-container > .logo{
        position:absolute !important;

        left:40% !important;
        top:50% !important;

        right:auto !important;
        bottom:auto !important;

        transform:translate(-50%, -50%) !important;

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

        z-index:20 !important;
    }

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

    .offer-popup{
        align-items:flex-start !important;
        padding-top:35px !important;
        padding-bottom:20px !important;
    }

    .offer-popup-box{
        width:calc(100% - 45px) !important;
        max-width:360px !important;
        max-height:82vh !important;
        border-radius:12px !important;
    }

    #popupOfferBannerImage{
        max-height:150px !important;
    }

    .offer-popup-content{
        padding:15px 15px 17px !important;
    }

    .offer-popup-label{
        font-size:9px !important;
        margin-bottom:5px !important;
    }

    #popupOfferTitle{
        font-size:20px !important;
        margin-bottom:8px !important;
    }

    #popupOfferDiscount{
        font-size:19px !important;
        padding:7px 13px !important;
        margin-bottom:9px !important;
    }

    #popupOfferDescription{
        font-size:13px !important;
        line-height:1.45 !important;
        margin-bottom:10px !important;
    }

    #popupOfferDates{
        font-size:11px !important;
        padding:8px 10px !important;
        margin:9px 0 12px !important;
    }

    #popupOfferButton{
        max-width:180px !important;
        padding:10px 15px !important;
        font-size:12px !important;
    }

    .offer-popup-close{
        width:30px !important;
        height:30px !important;
        top:6px !important;
        right:6px !important;
        font-size:22px !important;
    }

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

    .offer-popup-box{
        width:calc(100% - 75px) !important;
        max-width:330px !important;
    }

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

    .offer-popup-box{
        width: 78% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }

}
/* =====================================================
   CONTACT BANNER — FORCE WHITE TEXT ON DESKTOP
===================================================== */

@media (min-width: 769px){

    section.contact-banner
    .contact-banner-content
    .contact-banner-label{
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    section.contact-banner
    .contact-banner-content
    h1{
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    section.contact-banner
    .contact-banner-content
    p{
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

}
/* =====================================================
   CONTACT BANNER — FORCE WHITE TEXT
===================================================== */

section.contact-banner
.contact-banner-content
.contact-banner-label {
    color: white !important;
    -webkit-text-fill-color: white !important;
    text-shadow: none !important;
}

section.contact-banner
.contact-banner-content
h1 {
    color: white !important;
    -webkit-text-fill-color: white !important;
    text-shadow: none !important;
}

section.contact-banner
.contact-banner-content
p {
    color: white !important;
    -webkit-text-fill-color: white !important;
    text-shadow: none !important;
}
/* =====================================================
   OFFER POPUP CLOSE BUTTON
   DESKTOP = WHITE
   MOBILE = BLACK
===================================================== */

.offer-popup-close {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* MOBILE */

@media (max-width: 768px){

    .offer-popup-close {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }

}
/* =====================================================
   CUSTOM DESIGN HERO — MOBILE ORDER
===================================================== */

@media (max-width: 768px){

    .custom-hero .hero-content{
        display: flex;
        flex-direction: column;
    }

    /* Text first */
    .custom-hero .hero-left{
        display: contents;
    }

    /* Image after text/buttons */
    .custom-hero .hero-right{
        order: 2;
    }

}
/* =====================================================
   CUSTOM DESIGN HERO — MOVE CONTENT UP ON MOBILE
===================================================== */

@media (max-width: 768px){

    .custom-hero .hero-left{
        margin-top: -50px !important;
    }

}
/* =====================================================
   CUSTOM DESIGN HERO — REDUCE TOP EMPTY SPACE
===================================================== */

@media (max-width: 768px){

    .custom-hero .hero-left{
        transform: translateY(-65px) !important;
    }

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

    .hero-slider {
        margin-top: 90px;
        height: 620px;
        min-height: 620px;
    }

    .slide {
        height: 100%;
        background-size: cover;
        background-position: center center;
    }

}
/* =========================================================
   HOMEPAGE HERO SLIDER — MOBILE ONLY
   Desktop remains completely unchanged
========================================================= */

@media (max-width: 768px) {

    .hero-slider {
        margin-top: 90px;
        width: 100%;
        height: 70vw;
        min-height: 280px;
        max-height: 420px;
        overflow: hidden;
    }

    .slide {
        width: 100%;
        height: 100%;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .hero-slider .hero-content {
        width: 90%;
        height: 100%;

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

        text-align: center;
    }

    .hero-slider .hero-text {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }

    .hero-slider .hero-subtitle {
        font-size: 10px;
        letter-spacing: 1.5px;
        margin-bottom: 8px;
    }

    .hero-slider .hero-text h1 {
        font-size: 25px;
        line-height: 1.15;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .hero-slider .hero-text p {
        font-size: 12px;
        line-height: 1.45;
        max-width: 100%;
        margin: 0 auto 15px;
    }

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

    .hero-slider .btn {
        padding: 9px 16px;
        font-size: 11px;
    }

    .hero-slider .slider-btn {
        width: 32px;
        height: 32px;
        font-size: 17px;
    }

    .hero-slider .prev {
        left: 7px;
    }

    .hero-slider .next {
        right: 7px;
    }

    .hero-slider .slider-dots {
        bottom: 8px;
        gap: 6px;
    }

    .hero-slider .dot {
        width: 7px;
        height: 7px;
    }

}
/* =========================================================
   HOME PAGE — 4 BANNERS MOBILE
   DESKTOP UNTOUCHED
========================================================= */

@media (max-width: 768px) {

    .hero-slider {
        margin-top: 90px;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        position: relative;
    }

    .hero-slider .slide {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        transform: none !important;
    }

}
/* =========================================================
   HOME HERO — MOBILE BANNERS
   DESKTOP COMPLETELY UNTOUCHED
========================================================= */

@media (max-width: 768px) {

    .hero-slider {
        margin-top: 90px;
        width: 100%;
        height: 58vw;
        min-height: 250px;
        max-height: 430px;
        overflow: hidden;
    }

    .slide {
        width: 100%;
        height: 100%;

        background-size: cover;
        background-repeat: no-repeat;

        /* Slightly move image upward to reduce unwanted cropping */
        background-position: center center;
    }

    /* Keep all 4 banners visually consistent */
    .slide:nth-child(1) {
        background-position: center center;
    }

    .slide:nth-child(2) {
        background-position: center center;
    }

    .slide:nth-child(3) {
        background-position: center center;
    }

    .slide:nth-child(4) {
        background-position: center center;
    }

    /* HERO CONTENT */
    .hero-slider .hero-content {
        width: 92%;
        height: 100%;

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

        text-align: center;
    }

    .hero-slider .hero-text {
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
    }

    .hero-slider .hero-subtitle {
        font-size: 10px;
        letter-spacing: 1.8px;
        margin-bottom: 8px;
    }

    .hero-slider .hero-text h1 {
        font-size: clamp(22px, 6vw, 30px);
        line-height: 1.15;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .hero-slider .hero-text p {
        font-size: 12px;
        line-height: 1.45;
        max-width: 340px;
        margin: 0 auto 14px;
    }

    /* BUTTONS */
    .hero-slider .hero-buttons {
        justify-content: center;
        gap: 7px;
    }

    .hero-slider .btn {
        padding: 9px 15px;
        font-size: 11px;
    }

    /* SLIDER ARROWS */
    .hero-slider .slider-btn {
        width: 32px;
        height: 32px;
        font-size: 17px;
    }

    .hero-slider .prev {
        left: 6px;
    }

    .hero-slider .next {
        right: 6px;
    }

    /* DOTS */
    .hero-slider .slider-dots {
        bottom: 8px;
        gap: 5px;
    }

    .hero-slider .dot {
        width: 6px;
        height: 6px;
    }
}
@media (max-width: 768px) {
    .hero-slider {
        height: 52vw;
        min-height: 235px;
        max-height: 400px;
    }
}
/* =========================================================
   FINAL MOBILE HERO — MINOR CROPPING FIX
========================================================= */

@media (max-width: 768px) {

    .hero-slider {
        height: 51vw;
        min-height: 230px;
        max-height: 390px;
    }

    .slide {
        background-size: cover;
        background-position: center center;
    }

}
/* =========================================================
   BEST SELLERS — PREMIUM OVAL DESIGN
   ========================================================= */

.best-sellers .products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 35px !important;
}

/* CARD */
.best-sellers .product-card {
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* =========================================================
   OVAL FRAME
   ========================================================= */

.best-sellers .product-card .product-image {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 4 / 5 !important;

    min-height: 0 !important;
    max-height: none !important;

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

    background: #f7f3eb !important;

    border-radius: 50% / 42% !important;

    border: 1px solid rgba(0, 0, 0, 0.10) !important;

    padding: 25px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

/* =========================================================
   PRODUCT IMAGE — FORCE FULL IMAGE
   ========================================================= */

.best-sellers .product-card .product-image img {
    position: relative !important;

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

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

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;

    margin: 0 auto !important;

    transform: none !important;
}

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

.best-sellers .product-card .product-badge {
    position: absolute !important;

    top: 14px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    z-index: 10 !important;

    white-space: nowrap !important;
}

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

.best-sellers .product-card .product-info {
    width: 100% !important;

    height: auto !important;

    padding: 16px 5px 0 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}

.best-sellers .product-card .product-info h3 {
    margin: 7px 0 !important;
}

.best-sellers .product-card .product-info .rating {
    margin-bottom: 5px !important;
}

.best-sellers .product-card .product-info .price {
    margin-bottom: 0 !important;
}

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

.best-sellers .product-card:hover .product-image {
    transform: translateY(-5px) !important;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

.best-sellers .product-card:hover .product-image img {
    transform: scale(1.03) !important;
}

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

@media (max-width: 600px) {

    .best-sellers .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 28px 14px !important;
    }

    .best-sellers .product-card .product-image {
        width: 100% !important;

        aspect-ratio: 4 / 5 !important;

        padding: 13px !important;

        border-radius: 50% / 42% !important;
    }

    .best-sellers .product-card .product-info {
        padding-top: 11px !important;
    }

    .best-sellers .product-card .product-info h3 {
        font-size: 14px !important;

        line-height: 1.35 !important;
    }

    .best-sellers .product-card .product-info .price {
        font-size: 14px !important;
    }

    .best-sellers .product-card .product-badge {
        top: 8px !important;

        font-size: 9px !important;

        padding: 4px 8px !important;
    }
}
/* =========================================================
   PREMIUM BEST SELLERS ONLY
   FULL IMAGE + OVAL FRAME
   ========================================================= */

.best-sellers .product-card .product-image {
    position: relative;

    width: 100%;
    height: 380px;

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

    background: #f8f5ef;

    border-radius: 50% / 45%;

    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

    padding: 20px;

    box-sizing: border-box;
}

/* IMPORTANT:
   Override the global 300px + cover rule
*/

.best-sellers .product-card .product-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    display: block;

    cursor: pointer;
}

/* Keep badge above image */

.best-sellers .product-card .product-badge {
    z-index: 5;
}

/* Premium hover */

.best-sellers .product-card:hover .product-image {
    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12);

    transition: all 0.35s ease;
}

.best-sellers .product-card:hover .product-image img {
    transform: scale(1.03);

    transition: transform 0.35s ease;
}


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

@media (max-width: 600px) {

    .best-sellers .product-card .product-image {

        height: 250px;

        padding: 12px;

        border-radius: 50% / 45%;
    }

    .best-sellers .product-card .product-image img {

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

        object-fit: contain !important;
    }

}
/* =========================================================
   BEST SELLERS — MOBILE FINAL OVAL
   ========================================================= */

@media (max-width: 600px) {

    .best-sellers .product-card .product-image {

        position: relative !important;

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

        padding: 0 !important;

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

        background: #ffffff !important;

        border-radius: 50% / 45% !important;

        overflow: hidden !important;

        border: 1px solid rgba(0, 0, 0, 0.08) !important;

        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.08) !important;

        box-sizing: border-box !important;
    }


    /* FULL IMAGE */
    .best-sellers .product-card .product-image img {

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

        object-fit: contain !important;

        object-position: center !important;

        display: block !important;

        margin: 0 !important;

        transform: none !important;
    }


    /* VIEW DETAILS */
    .best-sellers .product-card .product-overlay {

        position: absolute !important;

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

        height: auto !important;

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

        opacity: 1 !important;

        background: transparent !important;

        z-index: 8 !important;
    }


    .best-sellers .product-card .product-overlay .btn {

        padding: 6px 13px !important;

        font-size: 11px !important;

        line-height: 1.2 !important;

        height: auto !important;

        min-height: 0 !important;

        border-radius: 20px !important;
    }

}
/* =========================================================
   BEST SELLERS — MOBILE REFINEMENT
   ========================================================= */

@media (max-width: 600px) {

    /* SAME OVAL SIZE FOR EVERY PRODUCT */
    .best-sellers .product-card .product-image {
        width: 100% !important;
        height: 235px !important;

        min-height: 235px !important;
        max-height: 235px !important;

        padding: 0 !important;

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

        background: #ffffff !important;

        border-radius: 50% / 45% !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    /* FULL IMAGE */
    .best-sellers .product-card .product-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;

        margin: 0 !important;
    }

    /* SMALL VIEW DETAILS BUTTON */
    .best-sellers .product-card .product-overlay {
        position: absolute !important;

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

        height: auto !important;

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

        opacity: 1 !important;

        background: transparent !important;

        z-index: 10 !important;
    }

    .best-sellers .product-card .product-overlay .btn {
        padding: 4px 10px !important;

        font-size: 9px !important;

        line-height: 1.2 !important;

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

        border-radius: 16px !important;
    }

    /* SMALLER PRODUCT TEXT */
    .best-sellers .product-card .product-info {
        padding-top: 9px !important;
    }

    .best-sellers .product-card .product-info .rating {
        font-size: 9px !important;
        margin-bottom: 3px !important;
    }

    .best-sellers .product-card .product-info h3 {
        font-size: 12px !important;

        line-height: 1.3 !important;

        margin: 3px 0 4px !important;
    }

    .best-sellers .product-card .product-info .price {
        font-size: 12px !important;
    }

    .best-sellers .product-card .product-info .old-price {
        font-size: 10px !important;
    }

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

    .best-sellers .product-card .product-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .best-sellers .product-card .product-image img {
        width: 90% !important;
        height: 90% !important;

        object-fit: contain !important;
        object-position: center center !important;

        margin: auto !important;
        display: block !important;
    }

}
/* =========================================================
   BEST SELLERS — PREMIUM OVAL
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 601px) {

    /* Best Seller grid */
    .best-sellers .products-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 35px !important;
    }

    /* Equal oval for every product */
    .best-sellers .product-card .product-image {
        position: relative !important;

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

        min-height: 390px !important;
        max-height: 390px !important;

        padding: 0 !important;

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

        background: #ffffff !important;

        border-radius: 50% / 45% !important;

        overflow: hidden !important;

        border: 1px solid rgba(0, 0, 0, 0.08) !important;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.08) !important;

        box-sizing: border-box !important;

        transition:
            transform 0.35s ease,
            box-shadow 0.35s ease !important;
    }

    /* FULL IMAGE — NO CROPPING */
    .best-sellers .product-card .product-image img {
        width: 90% !important;
        height: 90% !important;

        max-width: 90% !important;
        max-height: 90% !important;

        object-fit: contain !important;
        object-position: center center !important;

        display: block !important;

        margin: auto !important;

        transform: none !important;
    }

    /* Best Seller badge */
    .best-sellers .product-card .product-badge {
        position: absolute !important;

        top: 15px !important;
        left: 50% !important;

        transform: translateX(-50%) !important;

        z-index: 10 !important;

        white-space: nowrap !important;
    }

    /* View Details */
    .best-sellers .product-card .product-overlay {
        position: absolute !important;

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

        height: auto !important;

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

        opacity: 1 !important;

        background: transparent !important;

        z-index: 10 !important;
    }

    /* Smaller premium button */
    .best-sellers .product-card .product-overlay .btn {
        padding: 7px 16px !important;

        font-size: 11px !important;

        line-height: 1.2 !important;

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

        border-radius: 20px !important;
    }

    /* Product information */
    .best-sellers .product-card .product-info {
        padding-top: 15px !important;

        text-align: center !important;
    }

    .best-sellers .product-card .product-info .rating {
        font-size: 12px !important;

        margin-bottom: 5px !important;
    }

    .best-sellers .product-card .product-info h3 {
        font-size: 16px !important;

        line-height: 1.35 !important;

        margin: 4px 0 6px !important;
    }

    .best-sellers .product-card .product-info .price {
        font-size: 15px !important;
    }

    .best-sellers .product-card .product-info .old-price {
        font-size: 12px !important;
    }

    /* Premium hover */
    .best-sellers .product-card:hover .product-image {
        transform: translateY(-6px) !important;

        box-shadow:
            0 20px 42px rgba(0, 0, 0, 0.12) !important;
    }

    .best-sellers .product-card:hover .product-image img {
        transform: scale(1.03) !important;
    }

}
/* =========================================================
   JEWELLERY — OPENING SOON
========================================================= */

.jewellery-coming-soon {
    grid-column: 1 / -1;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

.coming-soon-icon {
    font-size: 48px;
    margin-bottom: 18px;
}

.jewellery-coming-soon h1 {
    margin: 0 0 8px;
    font-size: 34px;
}

.jewellery-coming-soon h2 {
    margin: 0 0 18px;
    font-size: 26px;
}

.jewellery-coming-soon p {
    margin: 5px 0;
    font-size: 18px;
}

.jewellery-coming-soon .coming-soon-subtext {
    max-width: 550px;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 600px) {

    .jewellery-coming-soon {
        min-height: 380px;
        padding: 50px 20px;
    }

    .jewellery-coming-soon h1 {
        font-size: 28px;
    }

    .jewellery-coming-soon h2 {
        font-size: 23px;
    }

    .jewellery-coming-soon p {
        font-size: 16px;
    }

}
/* =====================================================
   SHOP CATEGORY BUTTONS — MOBILE
===================================================== */

@media (max-width: 768px) {

    .shop-section .category-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        box-sizing: border-box !important;

        gap: 10px !important;

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

        overflow: visible !important;
    }

    .shop-section .category-buttons button {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;

        margin: 0 !important;

        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

}
/* =========================================================
   SHOP CATEGORY BUTTONS — MOBILE FINAL
   ========================================================= */

@media (max-width: 600px) {

    .category-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 4px !important;

        width: 100% !important;
        margin-bottom: 25px !important;
        padding: 3px 0 !important;

        overflow: hidden !important;
    }

    .category-buttons button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;

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

        font-size: 9px !important;
        line-height: 1 !important;

        border-radius: 18px !important;
    }
}
/* =========================================================
   SHOP PAGE BEST SELLERS — MOBILE OVAL FIX
   ========================================================= */

@media (max-width: 600px) {

    .best-sellers .product-card .product-image {
        width: 100% !important;
        height: 235px !important;
        min-height: 235px !important;
        max-height: 235px !important;

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

        padding: 0 !important;

        background: #ffffff !important;

        /* FORCE OVAL */
        border-radius: 50% / 45% !important;

        overflow: hidden !important;

        border: 1px solid rgba(0, 0, 0, 0.08) !important;

        box-sizing: border-box !important;

        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.08) !important;
    }

    .best-sellers .product-card .product-image img {
        width: 90% !important;
        height: 90% !important;

        max-width: 90% !important;
        max-height: 90% !important;

        object-fit: contain !important;
        object-position: center center !important;

        display: block !important;
        margin: auto !important;

        transform: none !important;
    }

}
/* =========================================================
   OFFER POPUP — MOBILE
========================================================= */

@media (max-width: 600px) {

    .offer-popup-box {
        position: absolute;

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

        height: 72vh;
        max-height: 620px;

        padding: 0;

        overflow: hidden;

        border-radius: 15px;

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


    /* =====================================================
       FULL POPUP BACKGROUND IMAGE
    ===================================================== */

    #popupOfferBannerImage {
    position: absolute !important;

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

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

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center !important;

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

    display: block !important;

    z-index: 0;
}

    /* =====================================================
       DARK OVERLAY
    ===================================================== */

    .offer-popup-box::after {
        content: "";

        position: absolute;

        inset: 0;

        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,0.15),
                rgba(0,0,0,0.60)
            );

        z-index: 1;

        pointer-events: none;
    }


    /* =====================================================
       CONTENT — CENTER
    ===================================================== */

    .offer-popup-content {
        position: relative;

        z-index: 2;

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

        margin: 0;

        padding: 25px 20px;

        text-align: center;

        color: #fff;
    }


    /* LABEL */

    .offer-popup-label {
        display: block;

        font-size: 9px;
        letter-spacing: 3px;

        margin-bottom: 10px;

        color: #fff;
    }


    /* TITLE */

    .offer-popup-content h2 {
        margin: 0 0 14px;

        font-size: 28px;
        line-height: 1.2;

        color: #fff;
    }


    /* DISCOUNT */

    .offer-popup-discount {
        display: inline-block;

        font-size: 19px;

        padding: 8px 18px;

        margin: 5px 0 14px;

        background: #c99a3d;

        color: #fff;

        border-radius: 6px;
    }


    /* DESCRIPTION */

    .offer-popup-content p {
        max-width: 300px;

        margin: 0 auto 12px;

        color: #fff;

        font-size: 12.5px;
        line-height: 1.5;
    }


    /* DATES */

    .offer-popup-dates {
        margin-bottom: 18px;

        color: rgba(255,255,255,0.85);

        font-size: 9.5px;
    }


    /* BUTTON */

    .offer-popup-button {
        min-width: 125px;

        padding: 11px 22px;

        background: #fff;

        color: #222;

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

        letter-spacing: 1.3px;

        border-radius: 4px;
    }


    .offer-popup-button:hover {
        background: #c89b4a;

        color: #fff;
    }


    /* CLOSE BUTTON */

    .offer-popup-close {
        top: 9px;
        right: 9px;

        width: 34px;
        height: 34px;

        z-index: 5;

        color: #fff;

        font-size: 23px;
    }

}


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

@media (max-width: 380px) {

    .offer-popup-box {
        width: 92%;
        height: 70vh;
        max-height: 560px;
    }


    .offer-popup-content {
        max-width: 320px;

        padding: 20px 16px;
    }


    .offer-popup-content h2 {
        font-size: 24px;
    }


    .offer-popup-discount {
        font-size: 17px;

        padding: 7px 15px;
    }


    .offer-popup-content p {
        font-size: 11.5px;
    }


    .offer-popup-dates {
        font-size: 9px;

        margin-bottom: 14px;
    }


    .offer-popup-button {
        min-width: 115px;

        padding: 10px 20px;
    }

}
/* FINAL SHOP BANNER VISIBILITY FIX */
.shop-page-banner{display:block !important;width:100% !important;min-height:300px !important;height:auto !important;overflow:hidden !important}
.shop-page-banner .page-banner-content{display:flex !important;width:100% !important;max-width:1400px !important;margin:0 auto !important;padding:20px 60px !important;align-items:center !important;justify-content:space-between !important;box-sizing:border-box !important}
.shop-page-banner .page-banner-image{display:block !important;width:55% !important;height:270px !important;overflow:hidden !important;visibility:visible !important;opacity:1 !important}
.shop-page-banner .page-banner-image img{display:block !important;width:100% !important;height:100% !important;object-fit:cover !important;visibility:visible !important;opacity:1 !important}
@media (max-width:768px){.shop-page-banner .page-banner-content{flex-direction:column !important;padding:10px 12px 20px !important}.shop-page-banner .page-banner-text{width:100% !important;text-align:center !important}.shop-page-banner .page-banner-image{width:100% !important;height:180px !important}}