/*======================================
  GOOGLE FONT
======================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');


/*======================================
  VARIABLES
======================================*/

:root{

    --primary:#C8A56A;
    --primary-dark:#A67C3D;

    --secondary:#1F1F1F;

    --bg:#F8F3EC;
    --white:#ffffff;

    --text:#222222;
    --text-light:#777777;

    --border:#E8D7BC;

    --footer:#111111;

    --success:#2ecc71;
    --danger:#e74c3c;

    --radius:8px;

    --transition:.35s ease;

    --shadow:0 8px 25px rgba(0,0,0,.08);


        --gold: #C8A56A;
        --gold-dark: #A67C3D;
        --black: #111111;
        --cream: #F8F3EC;
        --light-cream: #FCFAF7;
        --white: #ffffff;
        --border: #E8E0D4;
        --muted: #777777;
    }


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

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

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

ul{

    list-style:none;

    margin:0;

    padding:0;

}

button{

    border:none;

    outline:none;

}

input{

    outline:none;

}

/* section{

    padding: 0px !important;

} */

.container{

    max-width:1320px;

}



/*======================================
  TYPOGRAPHY
======================================*/

h1,h2,h3,h4,h5,h6{

    font-family:'Cormorant Garamond',serif;

    color:var(--secondary);

    font-weight:700;

    margin-bottom:15px;

}

h1{

    font-size:56px;

}

h2{

    font-size:42px;

}

h3{

    font-size:34px;

}

h4{

    font-size:28px;

}

p{

    color:var(--text-light);

    margin-bottom:15px;

}



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

.btn-primary-custom{

    background:var(--primary);

    color:#fff;

    padding:13px 35px;

    border-radius:50px;

    transition:.3s;

    display:inline-block;

    font-weight:600;

}

.btn-primary-custom:hover{

    background:var(--primary-dark);

    color:#fff;

    transform:translateY(-3px);

}



.btn-outline-custom{

    border:2px solid var(--primary);

    color:var(--primary);

    padding:12px 35px;

    border-radius:50px;

    transition:.3s;

    display:inline-block;

}

.btn-outline-custom:hover{

    background:var(--primary);

    color:#fff;

}



/*======================================
  SECTION TITLE
======================================*/

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    color:var(--primary);

    font-size:15px;

    letter-spacing:3px;

    text-transform:uppercase;

    display:block;

    margin-bottom:10px;

}

.section-title h2{

    font-size:44px;

}

.section-title p{

    width:650px;

    max-width:100%;

    margin:auto;

}



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

.card{

    border:none;

    border-radius:15px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

}



/*======================================
  SCROLLBAR
======================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}



/*======================================
  SCROLL TOP
======================================*/

#scrollTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

    box-shadow:var(--shadow);

}

#scrollTop.show{

    opacity:1;

    visibility:visible;

}

#scrollTop:hover{

    background:var(--primary-dark);

}
/*======================================
TOP BAR
======================================*/

.top-bar{

    background:var(--bg);

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

    font-size:14px;

    padding:10px 0;

}

.top-bar span{

    color:var(--text-light);

}

.top-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

}

.top-right select{

    width:auto;

    border:none;

    background:transparent;

    font-size:14px;

    color:var(--text);

    cursor:pointer;

}

.top-right select:focus{

    box-shadow:none;

}



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

#header {
    position: relative;
    width: 100%;
    z-index: 999;
    background: #fff;
}

.main-header{

    background:#fff;

    padding:20px 0;

}

.logo{

    font-size:30px;

    font-family:'Cormorant Garamond',serif;

    font-weight:700;

    color:var(--secondary);

}

.logo:hover{

    color:var(--primary);

}



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

.search-box{

    display:flex;

    justify-content: center !important;

    align-items:center;

    width:100%;

    height:55px;

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

    border-radius:50px;

    overflow:hidden;

    background:#fff;

}

.search-box input{

    flex:1;

    border:none;

    padding:0 25px;

    font-size:15px;

    background:transparent;

}

.search-box button{

    width:70px;

    height:55px;

    background:var(--secondary);

    color:#fff;

    transition:.3s;

}

.search-box button:hover{

    background:var(--primary);

}



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

.header-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
}

.header-icons > a,
.header-icons .dropdown > a {
    position: relative;
    font-size: 23px;
    color: var(--secondary);
    transition: .3s;
}

.header-icons > a:hover,
.header-icons .dropdown > a:hover {
    color: var(--primary);
}


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

.cart-count {
    position: absolute;

    top: -10px;
    right: -12px;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: var(--primary);
    color: #fff;

    font-size: 11px;

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


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

.navbar-menu {
    background: var(--cream);
    width: 100%;

    position: relative;
    z-index: 9999;
}

.navbar-menu.navbar-fixed {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);

    animation: navbarSlideDown 0.4s ease forwards;
}

@keyframes navbarSlideDown {

    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }

}


/*======================================*
* NAVBAR INNER
*======================================*/

.navbar-menu .row {
    min-height: 75px;
    align-items: center;
}


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

.navbar-menu .logo {
    text-decoration: none;
}

.navbar-menu .store-logo {
    max-height: 55px;
    width: auto;
    object-fit: contain;
}


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

.navbar-menu .navbar-links {
    display: flex;

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

    gap: 30px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.navbar-menu .navbar-links li {
    position: relative;
    list-style: none;
}

.navbar-menu .navbar-links li a {
    display: block;

    position: relative;

    color: #000;

    text-decoration: none;

    padding: 27px 0;

    font-weight: 500;

    transition: .3s;
}

.navbar-menu .navbar-links li a:hover {
    color: var(--primary);
}


/* Underline */

.navbar-menu .navbar-links li a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 18px;

    width: 0;
    height: 2px;

    background: var(--primary);

    transition: .3s;
}

.navbar-menu .navbar-links li a:hover::after {
    width: 100%;
}


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

.navbar-cart {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.navbar-cart .cart-link {
    position: relative;

    display: inline-flex;

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

    color: #fff;

    font-size: 23px;

    text-decoration: none;

    transition: .3s;
}

.navbar-cart .cart-link:hover {
    color: var(--primary);
}


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

.cart-dropdown {

    width: 340px;

    border: none;

    border-radius: 12px;

    padding: 20px;

    box-shadow: var(--shadow);

    margin-top: 18px;
}

.cart-item {

    display: flex;

    gap: 15px;

    margin-bottom: 18px;

    align-items: center;
}

.cart-item:last-child {
    margin-bottom: 0;
}

.cart-item img {

    width: 70px;
    height: 70px;

    border-radius: 10px;

    object-fit: cover;

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

.cart-item h6 {

    font-size: 15px;

    margin-bottom: 5px;
}

.cart-item small {
    color: var(--text-light);
}


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

.mobile-toggle {

    border: none;

    background: none;

    font-size: 28px;

    color: var(--secondary);
}

.mobile-toggle:hover {
    color: var(--primary);
}


/*======================================*
* OFFCANVAS
*======================================*/

.offcanvas {
    width: 300px;
}

.offcanvas-header {

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

    padding: 20px;
}

.offcanvas-body {
    padding: 25px;
}

.mobile-nav {
    margin-top: 25px;
}

.mobile-nav li {
    border-bottom: 1px solid #eee;
}

.mobile-nav a {

    display: block;

    padding: 15px 0;

    color: var(--secondary);

    font-weight: 500;

    transition: .3s;
}

.mobile-nav a:hover {

    color: var(--primary);

    padding-left: 10px;
}


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

@media (max-width: 991px) {

    .top-bar {
        display: none;
    }

    /*
    Desktop navbar is hidden.
    Mobile navigation uses offcanvas.
    */

    /* .navbar-menu {
        display: none;
    } */

    .logo {
        font-size: 34px;
    }

    .header-icons {
        gap: 18px;
    }

}


@media (max-width: 767px) {

    .main-header {
        padding: 15px 0;
    }

    .logo {
        font-size: 30px;
    }

    .header-icons > a,
    .header-icons .dropdown > a {
        font-size: 20px;
    }

    .cart-dropdown {
        width: 300px;
    }

}


@media (max-width: 576px) {

    .cart-dropdown {
        width: 280px;
    }

    .header-icons {
        gap: 15px;
    }

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

.footer{

    background:var(--footer);

    color:#d8d8d8;

    padding:80px 0 0;

    position:relative;

}

.footer-widget{

    margin-bottom:40px;

}

.footer-logo{

    font-size:42px;

    color:#fff;

    font-weight:700;

    margin-bottom:25px;

    font-family:'Cormorant Garamond',serif;

}

.footer-text{

    color:#bdbdbd;

    line-height:1.9;

    margin-bottom:25px;

}



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

.footer-title{

    color:#fff;

    font-size:24px;

    margin-bottom:25px;

    position:relative;

    padding-bottom:12px;

}

.footer-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:2px;

    background:var(--primary);

}



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

.footer-widget ul{

    padding:0;

    margin:0;

}

.footer-widget ul li{

    margin-bottom:15px;

}

.footer-widget ul li a{

    color:#c8c8c8;

    transition:.35s;

    display:inline-block;

}

.footer-widget ul li a:hover{

    color:var(--primary);

    padding-left:8px;

}



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

.social-icons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.social-icons a{

    width:45px;

    height:45px;

    border-radius:8px;

    background:#1b1b1b;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:18px;

    transition:.35s;

}

.social-icons a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-5px);

}



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

.contact-list{

    padding:0;

    margin:0;

}

.contact-list li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:22px;

}

.contact-list i{

    width:42px;

    height:42px;

    background:#1b1b1b;

    color:var(--primary);

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    font-size:16px;

}

.contact-list span{

    color:#d0d0d0;

    line-height:1.8;

}



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

.app-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.app-btn{

    display:flex;

    align-items:center;

    gap:10px;

    background:#1b1b1b;

    color:#fff;

    padding:12px 22px;

    border-radius:8px;

    transition:.35s;

    font-weight:500;

}

.app-btn i{

    font-size:22px;

}

.app-btn:hover{

    background:var(--primary);

    color:#fff;

}



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

.footer-bottom{

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

    margin-top:60px;

    padding:25px 0;

}

.footer-bottom p{

    margin:0;

    color:#b5b5b5;

}

.footer-bottom strong{

    color:#fff;

}



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

.payment-icons{

    display:flex;

    justify-content:center;

    gap:18px;

}

.payment-icons i{

    color:#d5d5d5;

    font-size:30px;

    transition:.35s;

}

.payment-icons i:hover{

    color:var(--primary);

}



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

.footer-links{

    display:flex;

    justify-content:flex-end;

    gap:20px;

}

.footer-links a{

    color:#cfcfcf;

    transition:.35s;

}

.footer-links a:hover{

    color:var(--primary);

}



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

@media(max-width:991px){

    .footer{

        text-align:center;

    }

    .footer-title::after{

        left:50%;

        transform:translateX(-50%);

    }

    .social-icons{

        justify-content:center;

    }

    .contact-list li{

        justify-content:center;

        text-align:left;

    }

    .app-buttons{

        justify-content:center;

    }

    .footer-links{

        justify-content:center;

        margin-top:15px;

    }

}

@media(max-width:767px){

    .footer{

        padding-top:60px;

    }

    .footer-logo{

        font-size:34px;

    }

    .footer-title{

        font-size:22px;

    }

    .payment-icons{

        margin:15px 0;

    }

}

@media(max-width:576px){

    .app-btn{

        width:100%;

        justify-content:center;

    }

    .payment-icons{

        flex-wrap:wrap;

    }

    .footer-links{

        flex-wrap:wrap;

        gap:12px;

    }

}

/* Sticky Header */

#header.sticky{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#fff;

    animation:slideDown .4s;

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

    z-index:9999;

}

@keyframes slideDown{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}

/* Active Menu */

.navbar-menu a.active{

    color:var(--primary);

}

.navbar-menu a.active::after{

    width:100%;

}

/* Search Focus */

.search-box.focused{

    border-color:var(--primary);

    box-shadow:0 0 15px rgba(200,165,106,.25);

}

.hero-section{

    background:#F8F3EC;
    margin-top: 50px;
    overflow:hidden;

}

.hero-title{

    font-size:64px;

    font-weight:700;

    line-height:1.1;

}

.hero-text{

    color:#666;

    font-size:18px;

}

.hero-badge{

    background:#111;

    color:#fff;

    padding:8px 20px;

    border-radius:30px;

}

.hero-image{

    max-height:650px;

    object-fit:contain;

}

.floating-card{

    position:absolute;

    right:25px;

    bottom:200px;

    width:220px;

    background:#fff;

    padding:20px;

    border-radius:15px;

}

.floating-card img{

    width:100%;

}

.category-large{

    background:#F3ECE6;

    border-radius:20px;

    min-height:420px;

    display:flex;

    align-items:center;

    padding:60px;

    background-image:url('/storage/app/public/banner.jpg');

    background-size:cover;

    background-position:center;

}

.category-card{

    position:relative;

    border-radius:20px;

    overflow:hidden;

    height:200px;

}

.category-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.category-card:hover img{

    transform:scale(1.08);

}

.category-overlay{

    position:absolute;

    inset:0;

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

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:20px;

}

.category-overlay h5{

    color:#fff;

}
.min-vh-100 {
    min-height: 65vh !important;
}
@media(max-width:991px){

.hero-title{

font-size:42px;

}

.hero-image{

margin-top:40px;

}

.floating-card{

display:none;

}

.category-large{

min-height:300px;

padding:40px;

}

}

@media(max-width:576px){

.hero-title{

font-size:34px;

}

.hero-text{

font-size:16px;

}

}
/*=====================================
FEATURED PRODUCTS
=====================================*/

.featured-products{

    background:#fff;

}

.section-subtitle{

    display:inline-block;

    color:var(--primary);

    letter-spacing:3px;

    font-size:14px;

    margin-bottom:10px;

    font-weight:600;

}

.product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

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

    position:relative;

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.product-image{

    position:relative;

    overflow:hidden;

    background:#fafafa;

}

.product-image img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.4s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.discount-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#d62828;

    color:#fff;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.product-icons{

    position:absolute;

    right:15px;

    top:15px;

    display:flex;

    flex-direction:column;

    gap:10px;

    opacity:0;

    transition:.3s;

}

.product-card:hover .product-icons{

    opacity:1;

}

.product-icons a{

    width:42px;

    height:42px;

    background:#fff;

    color:#111;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

}

.product-icons a:hover{

    background:var(--primary);

    color:#fff;

}

.product-body{

    padding:25px;

}

.product-body h5{

    font-size:20px;

    margin:10px 0;

}

.product-body h5 a{

    color:#111;

}

.product-body h5 a:hover{

    color:var(--primary);

}

.rating{

    color:#ffb703;

    margin-bottom:15px;

}

.rating span{

    color:#777;

    margin-left:8px;

}

.price{

    display:flex;

    align-items:center;

    gap:12px;

}

.sale-price{

    color:var(--primary);

    font-size:24px;

    font-weight:700;

}

.old-price{

    color:#999;

    text-decoration:line-through;

}

.product-card .btn{

    background:#111;

    border:none;

    transition:.3s;

}

.product-card .btn:hover{

    background:var(--primary);

}

@media(max-width:768px){

.product-image img{

height:230px;

}

.product-body{

padding:20px;

}

}

/*=============================
TRENDING
=============================*/

.trending-products{

padding:80px 0;

}

.trend-box{

background:#fff;

padding:30px;

border-radius:20px;

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

height:100%;

}

.trend-title{

font-size:24px;

margin-bottom:25px;

font-weight:700;

}

.trend-item{

display:flex;

align-items:center;

margin-bottom:25px;

}

.trend-item:last-child{

margin-bottom:0;

}

.trend-item img{

width:90px;

height:90px;

object-fit:cover;

border-radius:15px;

margin-right:18px;

background:#fafafa;

}

.trend-item h6{

margin-bottom:8px;

font-weight:600;

}

.trend-item a{

color:#111;

text-decoration:none;

}

.trend-item a:hover{

color:var(--primary);

}

/*=============================
FLASH SALE
=============================*/

.flash-sale{

padding:100px 0;

background:#f8f5ef;

text-align:center;

}

.flash-badge{

display:inline-block;

background:#111;

color:#fff;

padding:10px 25px;

border-radius:50px;

letter-spacing:2px;

font-size:13px;

margin-bottom:25px;

}

.flash-sale h2{

font-size:52px;

font-weight:700;

margin-bottom:20px;

}

.flash-sale p{

font-size:18px;

color:#666;

}

.countdown{

display:flex;

justify-content:center;

gap:20px;

margin-top:45px;

flex-wrap:wrap;

}

.countdown div{

width:110px;

height:110px;

background:#fff;

border-radius:18px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

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

}

.countdown span{

font-size:38px;

font-weight:700;

color:#111;

}

.countdown small{

text-transform:uppercase;

color:#999;

}

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

@media(max-width:768px){

.flash-sale{

padding:70px 0;

}

.flash-sale h2{

font-size:34px;

}

.countdown div{

width:80px;

height:80px;

}

.countdown span{

font-size:28px;

}

}

/*========================
BRANDS
========================*/

.brands{

border-top:1px solid #eee;

border-bottom:1px solid #eee;

}

.brand-logo{

max-width:120px;

opacity:.6;

transition:.3s;

}

.brand-logo:hover{

opacity:1;

transform:scale(1.08);

}

/*========================
TESTIMONIAL
========================*/

.testimonials{

background:#faf8f4;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:18px;

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

height:100%;

transition:.3s;

}

.testimonial-card:hover{

transform:translateY(-6px);

}

.stars{

color:#f6b400;

font-size:18px;

margin-bottom:15px;

}

.customer{

display:flex;

align-items:center;

margin-top:25px;

}

.customer img{

width:60px;

height:60px;

border-radius:50%;

margin-right:15px;

}

/*========================
INSTAGRAM
========================*/

.insta-box{

position:relative;

overflow:hidden;

border-radius:15px;

}

.insta-box img{

height:220px;

object-fit:cover;

transition:.4s;

}

.insta-box:hover img{

transform:scale(1.1);

}

.overlay{

position:absolute;

inset:0;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.3s;

}

.overlay i{

font-size:40px;

color:#fff;

}

.insta-box:hover .overlay{

opacity:1;

}

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

.newsletter{

padding:90px 0;

background:#111;

color:#fff;

}

.newsletter span{

letter-spacing:2px;

color:#C8A56A;

}

.newsletter h2{

color:#fff;

margin:20px 0;

}

.newsletter p{

color:#ddd;

}

.newsletter-form{

display:flex;

margin-top:35px;

max-width:700px;

margin-inline:auto;

}

.newsletter-form input{

flex:1;

height:60px;

border:none;

padding:0 25px;

border-radius:50px 0 0 50px;

}

.newsletter-form button{

width:180px;

background:#C8A56A;

border:none;

color:#fff;

border-radius:0 50px 50px 0;

}

.newsletter-form button:hover{

background:#A67C3D;

}

@media(max-width:768px){

.newsletter-form{

flex-direction:column;

gap:15px;

}

.newsletter-form input,

.newsletter-form button{

width:100%;

border-radius:50px;

}

}

/*==================================================
PRODUCT SECTION
==================================================*/

:root{
    --primary:#C8A56A;
    --primary-dark:#A67C3D;
    --black:#111111;
    --cream:#F8F3EC;
    --white:#ffffff;
    --gray:#777;
    --border:#eee8df;
}

.featured-products{

    padding:80px 0;

    background:var(--cream);

}

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

.product-card{

    position:relative;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.4s;

    height:100%;

}

.product-card:hover{

    transform:translateY(-10px);

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

    border-color:var(--primary);

}

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

.product-image-wrapper{

    position:relative;

    overflow:hidden;

    background:#fafafa;

}

.product-img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.6s;

}

.product-card:hover .product-img{

    transform:scale(1.08);

}

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

.sale-badge{

    position:absolute;

    left:15px;

    top:15px;

    background:var(--primary);

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    z-index:5;

    letter-spacing:1px;

}

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

.wishlist-btn{

    position:absolute;

    right:15px;

    top:15px;

    width:42px;

    height:42px;

    border:none;

    background:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:10;

    transition:.3s;

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

}

.wishlist-btn i{

    color:#222;

}

.wishlist-btn:hover{

    background:var(--primary);

}

.wishlist-btn:hover i{

    color:#fff;

}

.wishlist-btn.active{

    background:#d63031;

}

.wishlist-btn.active i{

    color:#fff;

}

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

.product-actions{

    position:absolute;

    right:15px;

    top:70px;

    display:flex;

    flex-direction:column;

    gap:12px;

    opacity:0;

    transform:translateX(20px);

    transition:.35s;

}

.product-card:hover .product-actions{

    opacity:1;

    transform:translateX(0);

}

.action-btn{

    width:42px;

    height:42px;

    background:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#111;

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

    transition:.3s;

}

.action-btn:hover{

    background:var(--primary);

    color:#fff;

}

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

.product-body{

    padding:25px;

    text-align:center;

}

.product-category{

    color:#888;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:12px;

    display:block;

    margin-bottom:10px;

}

.product-body h5{

    margin-bottom:12px;

    font-size:20px;

    font-weight:600;

    min-height:52px;

}

.product-body h5 a{

    color:#111;

    text-decoration:none;

    transition:.3s;

}

.product-body h5 a:hover{

    color:var(--primary);

}

/*==================================================
RATING
==================================================*/

.rating{

    margin-bottom:15px;

}

.rating i{

    color:#FDBA12;

    font-size:14px;

}

.rating span{

    color:#777;

    margin-left:8px;

}

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

.price-area{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

}

.price{

    color:var(--primary);

    font-size:24px;

    font-weight:700;

}

.old-price{

    color:#999;

    text-decoration:line-through;

    font-size:15px;

}

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

.add-cart-btn{

    width:100%;

    background:#111;

    color:#fff;

    border-radius:50px;

    padding:12px;

    transition:.35s;

    font-weight:600;

}

.add-cart-btn:hover{

    background:var(--primary);

    color:#fff;

}

/*==================================================
SECTION TITLE
==================================================*/

.section-title{

    margin-bottom:60px;

}

.section-title span{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

}

.section-title h2{

    font-size:42px;

    margin-top:10px;

    color:#111;

    font-weight:700;

}

.section-title p{

    color:#777;

}

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

@media(max-width:1200px){

.product-img{

height:300px;

}

}

@media(max-width:992px){

.product-img{

height:280px;

}

.product-body{

padding:20px;

}

.product-body h5{

font-size:18px;

}

}

@media(max-width:768px){

.product-img{

height:240px;

}

.product-actions{

opacity:1;

transform:none;

right:10px;

top:60px;

}

.product-actions .action-btn{

width:38px;

height:38px;

}

.section-title h2{

font-size:32px;

}

}

@media(max-width:576px){

.product-img{

height:220px;

}

.product-body{

padding:18px;

}

.product-body h5{

font-size:17px;

min-height:auto;

}

.price{

font-size:20px;

}

.add-cart-btn{

padding:10px;

font-size:14px;

}

}

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

/* :root{
    --primary:#C8A56A;
    --primary-dark:#A67C3D;
    --black:#111111;
    --cream:#F8F3EC;
    --white:#ffffff;
    --gray:#777777;
    --border:#E8E2D8;
} */

.product-details{
    background:var(--cream);
    padding:90px 0;
}

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

.gallery-wrapper{
    background:#fff;
    padding:20px;
    border-radius:20px;
    border:1px solid var(--border);
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.main-image{
    position:relative;
    overflow:hidden;
    border-radius:15px;
}

.main-image img{
    width:100%;
    height:560px;
    object-fit:cover;
    transition:.5s;
}

.main-image:hover img{
    transform:scale(1.05);
}

.discount-badge{
    position:absolute;
    top:20px;
    left:20px;
    background:var(--primary);
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
}

.thumbnail-wrapper{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    justify-content:center;
}

.thumbnail-image{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    border:2px solid transparent;
    transition:.3s;
}

.thumbnail-image:hover{
    border-color:var(--primary);
    transform:translateY(-3px);
}

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

.product-content{
    background:#fff;
    padding:40px;
    border-radius:20px;
    border:1px solid var(--border);
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.product-category{
    display:inline-block;
    color:var(--primary);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:12px;
    font-weight:600;
}

.product-content h1{
    font-size:42px;
    color:var(--black);
    font-weight:700;
    margin-bottom:18px;
    line-height:1.3;
}

.description{
    color:#666;
    line-height:1.9;
    margin:30px 0;
}

/*=========================================
RATING
=========================================*/

.rating-area{
    display:flex;
    align-items:center;
    gap:5px;
    margin-bottom:25px;
}

.rating-area i{
    color:#FDBA12;
}

.rating-area span{
    margin-left:12px;
    color:#777;
}

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

.price-area{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:25px;
}

.current-price{
    color:var(--primary);
    font-size:38px;
    font-weight:700;
}

.old-price{
    color:#999;
    text-decoration:line-through;
    font-size:20px;
}

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

.quantity-box{
    margin:35px 0;
}

.quantity-box label{
    display:block;
    margin-bottom:12px;
    font-weight:600;
}

.qty-control{
    display:flex;
    width:170px;
    border:1px solid var(--border);
    border-radius:50px;
    overflow:hidden;
}

.qty-btn{
    width:50px;
    border:none;
    background:#f7f7f7;
    font-size:22px;
    transition:.3s;
}

.qty-btn:hover{
    background:var(--primary);
    color:#fff;
}

.qty-control input{
    width:70px;
    text-align:center;
    border:none;
    outline:none;
    font-size:18px;
    font-weight:600;
}

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

.product-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.cart-btn{
    background:var(--black);
    color:#fff;
    padding:14px 35px;
    border-radius:50px;
    border:none;
    transition:.35s;
    font-weight:600;
}

.cart-btn:hover{
    background:var(--primary);
    color:#fff;
}

.wishlist-detail{
    background:#fff;
    border:2px solid var(--primary);
    color:var(--primary);
    padding:14px 35px;
    border-radius:50px;
    transition:.35s;
    font-weight:600;
}

.wishlist-detail:hover{
    background:var(--primary);
    color:#fff;
}

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

.product-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    border-top:1px solid var(--border);
    padding-top:30px;
}

.product-features div{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:500;
}

.product-features i{
    color:var(--primary);
    font-size:22px;
}

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

@media(max-width:992px){

.product-content{
    margin-top:20px;
}

.main-image img{
    height:450px;
}

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

.current-price{
    font-size:32px;
}

}

@media(max-width:768px){

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

.main-image img{
    height:340px;
}

.thumbnail-image{
    width:70px;
    height:70px;
}

.product-content{
    padding:25px;
}

.product-content h1{
    font-size:28px;
}

.current-price{
    font-size:28px;
}

.product-buttons{
    flex-direction:column;
}

.cart-btn,
.wishlist-detail{
    width:100%;
}

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

}

@media(max-width:576px){

.main-image img{
    height:280px;
}

.thumbnail-image{
    width:60px;
    height:60px;
}

.product-content{
    padding:20px;
}

.product-content h1{
    font-size:24px;
}

.current-price{
    font-size:24px;
}

.old-price{
    font-size:16px;
}

.qty-control{
    width:150px;
}

}

.custom-toast{

position:fixed;

right:25px;

bottom:25px;

background:#111;

color:#fff;

padding:15px 25px;

border-radius:50px;

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

opacity:0;

transform:translateY(40px);

transition:.4s;

z-index:99999;

font-weight:600;

}

.custom-toast.show{

opacity:1;

transform:translateY(0);

}

.custom-toast i{

color:#C8A56A;

}

.thumbnail-image.active{

border:2px solid #C8A56A;

box-shadow:0 8px 20px rgba(200,165,106,.3);

}
.wishlist-detail.active{

background:#C8A56A;

color:#fff;

border-color:#C8A56A;

}

.shop-filter-sidebar {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 25px;
        position: sticky;
        top: 110px;
    }

    .filter-title {
        color: var(--black);
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .filter-heading {
        color: var(--black);
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .filter-section {
        padding-bottom: 22px;
        margin-bottom: 22px;
        border-bottom: 1px solid var(--border);
    }

    .filter-section:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .category-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        margin-bottom: 3px;
        border-radius: 8px;
        color: var(--muted);
        text-decoration: none;
        font-size: 14px;
        transition: .25s ease;
    }

    .category-link:hover,
    .category-link.active {
        background: rgba(200, 165, 106, .12);
        color: var(--gold-dark);
    }

    .category-count {
        font-size: 11px;
        color: #999;
    }

    .filter-check {
        margin-bottom: 10px;
    }

    .filter-check label {
        color: var(--muted);
        font-size: 14px;
        cursor: pointer;
    }

    .filter-check .form-check-input {
        border-color: #d8c9b5;
        cursor: pointer;
    }

    .filter-check .form-check-input:checked {
        background-color: var(--gold);
        border-color: var(--gold);
    }

    .price-input {
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 13px;
        padding: 9px 10px;
    }

    .price-input:focus {
        border-color: var(--gold);
        box-shadow: none;
    }

    .filter-btn {
        width: 100%;
        background: var(--black);
        color: #fff;
        border: 0;
        border-radius: 50px;
        padding: 11px 15px;
        font-size: 13px;
        font-weight: 600;
        transition: .3s ease;
    }

    .filter-btn:hover {
        background: var(--gold);
        color: #fff;
    }

    .clear-filter {
        display: block;
        text-align: center;
        margin-top: 10px;
        color: var(--muted);
        text-decoration: none;
        font-size: 13px;
    }

    .clear-filter:hover {
        color: var(--gold-dark);
    }

    /* Mobile Filter Button */

    .mobile-filter-btn {
        background: var(--black);
        color: #fff;
        border: none;
        border-radius: 50px;
        padding: 11px 20px;
        font-size: 14px;
        font-weight: 600;
    }

    .mobile-filter-btn:hover {
        background: var(--gold);
        color: #fff;
    }

    /* Mobile Offcanvas */

    .filter-offcanvas {
        width: 320px !important;
        background: var(--cream);
    }

    .offcanvas-header {
        border-bottom: 1px solid var(--border);
    }

    .offcanvas-title {
        font-weight: 700;
        color: var(--black);
    }

    @media (max-width: 991px) {
        .shop-filter-sidebar {
            display: none;
        }
    }

    
.velorix-cart {

    background: #FFF9F3;

    min-height: 100vh;

    color: #2E2724;

}


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

.cart-header {

    max-width: 650px;

    margin: auto;

}


.cart-label {

    color: #C59A62;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

}


.cart-header h1 {

    font-family: 'Playfair Display', serif;

    font-size: clamp(36px, 5vw, 52px);

    font-weight: 700;

    margin: 8px 0;

}


.cart-header p {

    color: #81756D;

    font-size: 14px;

}


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

.cart-box {

    background: #fff;

    border: 1px solid #EBD8C3;

    border-radius: 18px;

    overflow: hidden;

}


.cart-box-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 24px;

    border-bottom: 1px solid #F0E4D6;

}


.cart-box-header h5 {

    margin: 0;

    font-weight: 700;

}


.cart-box-header small {

    color: #8C8077;

}


.continue-shopping {

    color: #C59A62;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

}


.continue-shopping:hover {

    color: #2E2724;

}


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

.cart-product {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 22px 24px;

    border-bottom: 1px solid #F2E8DD;

}


.cart-product-image {

    width: 105px;

    height: 105px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 12px;

    background: #FFF9F3;

}


.cart-product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.cart-product-info {

    flex: 1;

    min-width: 150px;

}


.cart-product-info h5 {

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 5px;

    color: #2E2724;

}


.product-category {

    color: #96887E;

    font-size: 12px;

    margin-bottom: 8px;

}


.product-price {

    color: #C59A62;

    font-size: 15px;

    font-weight: 700;

}


.mobile-subtotal {

    display: none;

}


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

.cart-quantity {

    text-align: center;

}


.cart-quantity label {

    display: block;

    color: #8D8077;

    font-size: 11px;

    margin-bottom: 5px;

}


.quantity-control {

    display: flex;

    align-items: center;

    border: 1px solid #EBD8C3;

    border-radius: 30px;

    overflow: hidden;

    background: #FFF9F3;

}


.quantity-control input {

    width: 55px;

    border: none;

    outline: none;

    background: transparent;

    text-align: center;

    padding: 8px 2px;

    color: #2E2724;

}


.quantity-control input::-webkit-inner-spin-button,
.quantity-control input::-webkit-outer-spin-button {

    opacity: 1;

}


.quantity-control button {

    border: none;

    background: #2E2724;

    color: #fff;

    width: 35px;

    height: 35px;

}


.quantity-control button:hover {

    background: #C59A62;

}


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

.cart-subtotal {

    width: 110px;

}


.cart-subtotal small {

    display: block;

    color: #9A8C82;

    font-size: 11px;

}


.cart-subtotal strong {

    color: #2E2724;

    font-size: 14px;

}


/* ==========================
   REMOVE
========================== */

.cart-remove a {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #B77B6C;

    background: #FFF3F0;

    text-decoration: none;

    transition: .25s;

}


.cart-remove a:hover {

    background: #B77B6C;

    color: #fff;

}


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

.cart-footer {

    padding: 18px 24px;

    text-align: right;

}


.clear-cart {

    color: #B77B6C;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

}


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

.summary-box {

    background: #fff;

    border: 1px solid #EBD8C3;

    border-radius: 18px;

    padding: 25px;

}


.summary-box h4 {

    font-family: 'Playfair Display', serif;

    font-size: 24px;

    margin-bottom: 25px;

}


.summary-row {

    display: flex;

    justify-content: space-between;

    margin-bottom: 14px;

    font-size: 14px;

    color: #71655D;

}


.summary-row strong {

    color: #2E2724;

}


.discount-row {

    color: #60805C;

}


.discount-row strong {

    color: #60805C;

}


.summary-divider {

    height: 1px;

    background: #EBD8C3;

    margin: 20px 0;

}


.summary-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 22px;

}


.summary-total span {

    font-size: 15px;

    font-weight: 600;

}


.summary-total strong {

    color: #C59A62;

    font-size: 22px;

}


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

.checkout-btn {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #2E2724;

    color: #fff;

    padding: 14px 18px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: .3s;

}


.checkout-btn:hover {

    background: #C59A62;

    color: #fff;

    transform: translateY(-2px);

}


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

.secure-payment {

    display: flex;

    align-items: center;

    gap: 12px;

    background: #FFF9F3;

    border: 1px solid #EBD8C3;

    border-radius: 12px;

    padding: 13px;

    margin-top: 18px;

}


.secure-payment > i {

    color: #C59A62;

    font-size: 19px;

}


.secure-payment strong {

    display: block;

    font-size: 12px;

}


.secure-payment small {

    color: #91847B;

    font-size: 11px;

}


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

.coupon-box {

    background: #fff;

    border: 1px solid #EBD8C3;

    border-radius: 18px;

    padding: 22px;

    margin-top: 18px;

}


.coupon-box h5 {

    font-size: 16px;

    font-weight: 700;

}


.coupon-box h5 i {

    color: #C59A62;

    margin-right: 5px;

}


.coupon-box p {

    color: #8C8077;

    font-size: 12px;

}


.coupon-input {

    display: flex;

    border: 1px solid #EBD8C3;

    border-radius: 30px;

    overflow: hidden;

}


.coupon-input input {

    flex: 1;

    border: none;

    outline: none;

    padding: 11px 15px;

    min-width: 0;

    font-size: 13px;

}


.coupon-input button {

    border: none;

    background: #C59A62;

    color: #fff;

    padding: 0 18px;

    font-size: 13px;

    font-weight: 600;

}


.coupon-input button:hover {

    background: #2E2724;

}


.coupon-success {

    margin-top: 12px;

    padding: 10px 12px;

    background: #F1F7EE;

    border-radius: 8px;

    color: #5C7858;

    font-size: 12px;

}


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

.empty-cart {

    max-width: 650px;

    margin: 30px auto;

    background: #fff;

    border: 1px solid #EBD8C3;

    border-radius: 20px;

    padding: 60px 25px;

}


.empty-cart-icon {

    width: 85px;

    height: 85px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    background: #FFF9F3;

    border: 1px solid #EBD8C3;

    border-radius: 50%;

}


.empty-cart-icon i {

    color: #C59A62;

    font-size: 32px;

}


.empty-cart h2 {

    font-family: 'Playfair Display', serif;

    font-size: 30px;

}


.empty-cart p {

    color: #83766D;

    max-width: 500px;

    margin: 10px auto 25px;

    line-height: 1.7;

    font-size: 14px;

}


.shop-now-btn {

    display: inline-flex;

    align-items: center;

    background: #2E2724;

    color: #fff;

    padding: 13px 24px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: .3s;

}


.shop-now-btn:hover {

    background: #C59A62;

    color: #fff;

}


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

@media (max-width: 991px) {

    .cart-product {

        flex-wrap: wrap;

    }


    .cart-product-info {

        flex: 1;

    }


    .cart-subtotal {

        margin-left: 123px;

    }

}


@media (max-width: 576px) {

    .velorix-cart {

        padding-top: 25px !important;

    }


    .cart-header h1 {

        font-size: 35px;

    }


    .cart-box-header {

        padding: 17px;

    }


    .continue-shopping {

        font-size: 11px;

    }


    .cart-product {

        padding: 18px 15px;

        gap: 12px;

        position: relative;

    }


    .cart-product-image {

        width: 80px;

        height: 80px;

    }


    .cart-product-info {

        min-width: calc(100% - 95px);

        padding-right: 30px;

    }


    .cart-product-info h5 {

        font-size: 14px;

    }


    .cart-quantity {

        margin-left: 92px;

        text-align: left;

    }


    .cart-subtotal {

        display: none;

    }


    .mobile-subtotal {

        display: block;

        color: #8A7D74;

        font-size: 11px;

        margin-top: 5px;

    }


    .mobile-subtotal strong {

        color: #2E2724;

    }


    .cart-remove {

        position: absolute;

        right: 15px;

        top: 18px;

    }


    .cart-footer {

        padding: 15px;

    }


    .summary-box,
    .coupon-box {

        padding: 20px;

    }

}


    .tracking-heading {
        text-align: center;
        margin-bottom: 45px;
    }

    .tracking-heading .subtitle {
        display: inline-block;
        color: var(--gold);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    .tracking-heading h1 {
        color: var(--black);
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .tracking-heading p {
        color: var(--muted);
        margin: 0;
    }

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

    .tracking-search {
        max-width: 750px;
        margin: 0 auto 45px;
        background: var(--white);
        padding: 10px;
        border-radius: 60px;
        border: 1px solid var(--border);
        box-shadow: 0 12px 35px rgba(0, 0, 0, .06);
    }

    .tracking-search form {
        display: flex;
        align-items: center;
    }

    .tracking-search .input-wrapper {
        flex: 1;
        position: relative;
    }

    .tracking-search .input-wrapper i {
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gold);
        font-size: 17px;
    }

    .tracking-search input {
        width: 100%;
        height: 55px;
        border: none;
        outline: none;
        padding: 0 20px 0 52px;
        border-radius: 50px;
        color: var(--black);
        background: transparent;
    }

    .tracking-search input::placeholder {
        color: #aaa;
    }

    .tracking-search button {
        height: 55px;
        padding: 0 30px;
        border: none;
        border-radius: 50px;
        background: var(--black);
        color: var(--white);
        font-weight: 600;
        transition: .3s ease;
    }

    .tracking-search button:hover {
        background: var(--gold);
        color: var(--white);
    }

    /* =========================================
       ERROR
    ========================================= */

    .tracking-error {
        max-width: 750px;
        margin: 0 auto 30px;
        padding: 18px 22px;
        background: #fff;
        border: 1px solid #ead5d5;
        border-left: 4px solid #c0392b;
        border-radius: 12px;
        color: #8b2d2d;
    }

    /* =========================================
       ORDER CARD
    ========================================= */

    .order-card {
        max-width: 950px;
        margin: 0 auto;
        background: var(--white);
        border-radius: 24px;
        border: 1px solid var(--border);
        overflow: hidden;
        box-shadow: 0 20px 55px rgba(0, 0, 0, .07);
    }

    /* =========================================
       ORDER HEADER
    ========================================= */

    .order-header {
        padding: 30px 35px;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    .order-label {
        color: var(--muted);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 6px;
    }

    .order-number {
        color: var(--black);
        font-size: 25px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .order-date {
        color: var(--muted);
        font-size: 14px;
        margin: 0;
    }

    /* =========================================
       STATUS BADGE
    ========================================= */

    .current-status {
        background: var(--gold);
        color: #fff;
        padding: 9px 18px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        letter-spacing: .4px;
    }

    /* =========================================
       TIMELINE
    ========================================= */

    .tracking-body {
        padding: 45px 50px;
    }

    .timeline {
        position: relative;
        max-width: 700px;
        margin: 0 auto;
    }

    .timeline::before {
        content: "";
        position: absolute;
        left: 20px;
        top: 20px;
        bottom: 20px;
        width: 2px;
        background: var(--border);
    }

    .timeline-item {
        position: relative;
        display: flex;
        gap: 22px;
        margin-bottom: 35px;
    }

    .timeline-item:last-child {
        margin-bottom: 0;
    }

    /* =========================================
       TIMELINE ICON
    ========================================= */

    .timeline-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 50%;
        background: var(--light-cream);
        border: 2px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #aaa;
        font-size: 14px;
        font-weight: 600;
        z-index: 2;
        transition: .3s ease;
    }

    .timeline-item.completed .timeline-icon {
        background: var(--gold);
        border-color: var(--gold);
        color: #fff;
        box-shadow: 0 5px 15px rgba(200, 165, 106, .25);
    }

    .timeline-item.completed::after {
        content: "";
        position: absolute;
        left: 20px;
        top: 42px;
        height: calc(100% + 35px);
        width: 2px;
        background: var(--gold);
        z-index: 1;
    }

    .timeline-item:last-child::after {
        display: none;
    }

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

    .timeline-content {
        padding-top: 2px;
    }

    .timeline-content h5 {
        color: var(--black);
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .timeline-content small {
        font-size: 13px;
    }

    .completed-text {
        color: var(--gold-dark);
        font-weight: 500;
    }

    .pending-text {
        color: #aaa;
    }

    /* =========================================
       TRACKING NUMBER
    ========================================= */

    .tracking-number {
        margin-top: 45px;
        padding: 22px 25px;
        background: var(--light-cream);
        border: 1px solid var(--border);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .tracking-number .label {
        color: var(--muted);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .tracking-number strong {
        color: var(--black);
        font-size: 17px;
        letter-spacing: 1px;
    }

    .tracking-icon {
        width: 45px;
        height: 45px;
        background: var(--gold);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

    @media (max-width: 768px) {

        .tracking-page {
            padding: 90px 15px 60px;
        }

        .tracking-heading h1 {
            font-size: 32px;
        }

        .tracking-search {
            border-radius: 20px;
            padding: 10px;
        }

        .tracking-search form {
            flex-direction: column;
            gap: 10px;
        }

        .tracking-search .input-wrapper {
            width: 100%;
        }

        .tracking-search button {
            width: 100%;
        }

        .order-header {
            padding: 25px;
            align-items: flex-start;
            flex-direction: column;
        }

        .tracking-body {
            padding: 35px 25px;
        }

        .timeline-item {
            gap: 15px;
        }

        .tracking-number {
            flex-direction: column;
            align-items: flex-start;
        }

        .tracking-icon {
            display: none;
        }
    }

    @media (max-width: 480px) {

        .tracking-heading h1 {
            font-size: 28px;
        }

        .order-number {
            font-size: 21px;
        }

        .current-status {
            font-size: 12px;
        }

        .tracking-body {
            padding: 30px 20px;
        }

        .timeline-content h5 {
            font-size: 15px;
        }
    }
     .tracking-page {
        background: var(--cream);
        min-height: 100vh;
        padding: 110px 0 80px;
    }

    .store-logo {
    width: 150px;
    height: 60px;
    /* width: auto; */
    object-fit: contain;
    display: block;
}