:root {
    /* --- NEW PREMIUM COFFEE PALETTE --- */
    --coffee-primary: #6F4E37;        /* Primary: Rich Coffee Brown */
    --coffee-secondary: #CBB68C;       /* Secondary: Soft Beige-Gold */
    --coffee-accent: #E0C097;          /* Accent: Warm Cream */
    --coffee-light: #FAF8F5;          /* Background: Light Ivory */
    --coffee-dark: #2B1B0E;           /* Text Main: Deep Espresso - (NO CHANGE) */
    --coffee-gold: #B6894A;           /* Link Hover/Highlight: Elegant Gold */
    --coffee-white: #FFFFFF;          /* Pure White - (NO CHANGE) */
    --coffee-gray: #FAF8F5;           /* Light Gray - Aliasing to Background for Consistency */
    --coffee-text: #2B1B0E;           /* Text Main: Deep Espresso - (NO CHANGE) */
    --coffee-text-light: #6F4E37;    /* Medium Brown - Using Primary for softer secondary text - (NO CHANGE) */
    --coffee-button-hover: #5C3E2D;   /* Button Hover: Darker Primary */
    /* Updated Gradients to Match New Tones */
    --coffee-gradient-1: linear-gradient(135deg, var(--coffee-primary), #7c5c44); /* Primary to slightly lighter Primary */
    --coffee-gradient-2: linear-gradient(135deg, var(--coffee-secondary), var(--coffee-accent)); /* Secondary to Accent */
    --coffee-gradient-3: linear-gradient(135deg, var(--coffee-accent), var(--coffee-light)); /* Accent to Background */
    --coffee-gradient-dark: linear-gradient(135deg, var(--coffee-dark), var(--coffee-primary)); /* Dark Espresso to Primary */
}

/* Body and Typography */
body {
    background: var(--coffee-light) !important; /* Updated to Light Ivory */
    color: var(--coffee-text-light) !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6 {
 /* Deep Espresso - (NO CHANGE) */
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

h1 {
 
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

h2 {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

h3 {
    font-size: 2rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

p {
 /* Medium Brown - (NO CHANGE) */
    line-height: 1.7 !important;
    margin-bottom: 1.5rem !important;
    font-size: 1rem !important;
}

a {
/* Deep Espresso for main links - (NO CHANGE) */
    font-weight: 500 !important;
    transition: all 0.3s ease-in-out !important;
}

a:hover {
    color: var(--coffee-gold) !important; /* Link Hover/Highlight - (NO CHANGE) */
}

/* Header Styles - Updated with New Gradient and Tones */
.header_wrap:not([class*="bg_"]):not([class*="bg-"]) {
    background: var(--coffee-gradient-3) !important; /* Accent to Background */
    box-shadow: 0 2px 20px rgba(111, 78, 55, 0.15) !important; /* Using Primary's tone for shadow */
}

.middle-header {
    padding: 0 0 !important;
    background: var(--coffee-gradient-2) !important; /* Secondary to Accent */
    border-bottom: 1px solid rgba(111, 78, 55, 0.2) !important; /* Primary tone for subtle border */
}

.top-header {
    border-bottom: 1px solid rgba(111, 78, 55, 0.2) !important; /* Primary tone for subtle border */
    background: var(--coffee-gradient-1) !important; /* Primary to slightly lighter Primary */
    padding: 12px 0 !important;
}

.navbar .navbar-nav > li > .nav-link {
    font-weight: 600 !important;
    padding:  14px 10px !important;
    font-size: 15px !important;

    transition: all 0.3s ease-in-out !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
}

.navbar .navbar-nav > li > a.active,
.navbar .navbar-nav > li:hover > a {
    color: #764ba2 !important;
    background-color: #667eea30 !important;/* Lighter Primary for subtle hover BACKGROUND */
    border-radius: 8px !important;
}

/* Button Styles */
.btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em !important;
    padding: 14px 40px !important;
    transition: all 0.3s ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-fill-out {
    background-color: transparent !important;
    border: 2px solid #077ea5 !important;; /* Primary border */
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease-in-out !important;
}
.owl-carousel img{
        border-radius: 12px !important;
}
.btn-fill-out:hover {
    border-color: var(--coffee-button-hover) !important; /* Darker hover border */
    box-shadow: 0 8px 25px rgba(92, 62, 45, 0.3) !important; /* Using button hover tone for shadow */
    background: var(--coffee-button-hover) !important; /* Solid hover background for elegance */
}

/* Categories Button - Updated Gradient */
.categories_btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; /* Solid Primary for strong action */
    border: 2px solid linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
  padding: 14px 15px!important;/* Primary border */
    color: var(--coffee-white) !important; /* (NO CHANGE) */
    font-weight: 600 !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 15px rgba(111, 78, 55, 0.2) !important; /* Primary tone for shadow */
}



/* Categories Box - Updated Gradient */
.categories_box a {
    background: var(--coffee-accent) !important; /* Warm Cream background */
    border-radius: 12px !important;
    transition: all 0.3s ease-in-out !important;
    border: 1px solid rgba(111, 78, 55, 0.2) !important; /* Subtle border using Primary tone */
    box-shadow: 0 4px 15px rgba(111, 78, 55, 0.1) !important; /* Subtle shadow using Primary tone */
}

.categories_box a:hover {

    box-shadow: 0 8px 25px rgba(111, 78, 55, 0.2) !important; /* Primary tone for deeper shadow */
    background: var(--coffee-secondary) !important; /* Soft Beige-Gold on hover */
}

/* Product Styles - Updated Colors */
.product,
.product_wrap {
    background-color: var(--coffee-white) !important; /* Pure White background */
    box-shadow: 0 4px 20px rgba(43, 27, 14, 0.05) !important; /* Subtle shadow from Dark Espresso */
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(111, 78, 55, 0.2) !important; /* Subtle border using Primary tone */
    transition: all 0.5s ease-in-out !important;
}

.product:hover,
.product_wrap:hover {
    box-shadow: 0 12px 35px rgba(111, 78, 55, 0.2) !important; /* Primary tone for deeper shadow */
    border-color: var(--coffee-primary) !important; /* Primary border on hover */
}

/* Icon Box Styles - Updated Gradient */
.icon_box_style2 .icon {
    background: var(--coffee-accent) !important; /* Warm Cream */
    box-shadow: 0 4px 15px rgba(111, 78, 55, 0.1) !important; /* Primary tone for subtle shadow */
    border: 2px solid var(--coffee-secondary) !important; /* Border with Secondary color */
    transition: all 0.3s ease-in-out !important;
}

.icon_box_style2 .icon i {
    color: var(--coffee-primary) !important; /* (NO CHANGE) */
}

/* Shopping Info - Updated Gradient */
.shopping_info {
    border-top: 1px solid rgba(111, 78, 55, 0.2) !important; /* Subtle border using Primary tone */
    border-bottom: 1px solid rgba(111, 78, 55, 0.2) !important; /* Subtle border using Primary tone */
    background: var(--coffee-accent) !important; /* Simple Warm Cream for elegance */
}

/* Footer Styles - Beautiful Gradient */
.footer_dark {
    background: var(--coffee-gradient-dark) !important;
}

.footer_top {
    background: #1F1B2E !important;
}

.footer_dark a:hover,
.footer_dark .widget_links li a:hover,
.widget_links li a:hover {
    color: var(--coffee-gold) !important; /* (NO CHANGE) */
}

/* Banner Content */
.banner_content h2 {
    color: var(--coffee-text) !important; /* (NO CHANGE) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
    font-weight: 700 !important;
}

/* Background Classes - Updated Gradient */
.bg_dark {
    background: var(--coffee-gradient-dark) !important;
}

/* Price and Rating Colors - Updated */
.price {
    color: var(--coffee-primary) !important; /* (NO CHANGE) */
}

.product_rate,
.rating:before {
    color: var(--coffee-gold) !important; /* Using highlight color for gold rating stars - (NO CHANGE) */
}

/* Form Controls - Updated Colors */
.form-control {
    border: 1px solid rgba(111, 78, 55, 0.3) !important; /* Primary tone for border */
    border-radius: 35px !important;
    transition: all 0.3s ease-in-out !important;
}

.form-control:focus {
    border-color: var(--coffee-gold) !important; /* Gold focus border */
    box-shadow: 0 0 0 0.2rem rgba(182, 137, 74, 0.25) !important; /* Gold focus shadow */
}

/* Cart and Wishlist Count - Updated */
.cart_count,
.wishlist_count {
    background-color: var(--coffee-primary) !important; /* Primary background for badges */
}

/* Navigation Dropdown - Updated */
.navbar-nav .dropdown-menu {
    background-color: var(--coffee-white) !important; /* Pure White background */
    border: 1px solid rgba(111, 78, 55, 0.2) !important; /* Subtle border using Primary tone */
    box-shadow: 0 8px 25px rgba(43, 27, 14, 0.08) !important; /* Subtle shadow using Dark Espresso tone */
    border-radius: 8px !important;
}

/* Search Button - Updated */
.search_btn:hover {
    color: var(--coffee-gold) !important; /* (NO CHANGE) */
}

/* Contact Phone - Updated */
.contact_phone i {
    color: var(--coffee-primary) !important; /* (NO CHANGE) */
}

/* Newsletter Form - Updated Gradient */
.newsletter_form2 input {
    border: 1px solid rgba(111, 78, 55, 0.3) !important; /* Primary tone for border */
    border-radius: 8px !important;
}

.newsletter_form2 button {
    background: var(--coffee-primary) !important; /* Primary background */
    border: none !important;
    border-radius: 8px !important;
    color: var(--coffee-white) !important; /* (NO CHANGE) */
    transition: all 0.3s ease-in-out !important;
}

.newsletter_form2 button:hover {
    box-shadow: 0 8px 25px rgba(92, 62, 45, 0.3) !important; /* Darker hover tone for shadow */
    background: var(--coffee-button-hover) !important; /* Darker hover background */
}

/* Pagination - Updated */
.pagination_style1 .page-item.active .page-link,
.pagination_style1 .page-item .page-link:hover {
    background-color: var(--coffee-primary) !important; /* Primary background */
    border-color: var(--coffee-primary) !important; /* Primary border */
    color: var(--coffee-white) !important; /* (NO CHANGE) */
}

/* Tags - Updated Gradient */
.tags a {
    background: var(--coffee-accent) !important; /* Warm Cream tag background */
    color: var(--coffee-text) !important; /* (NO CHANGE) */
    border-radius: 6px !important;
    transition: all 0.3s ease-in-out !important;
}

.tags a:hover {
    background: var(--coffee-primary) !important; /* Primary background on hover */
    color: var(--coffee-white) !important; /* (NO CHANGE) */
}

/* Custom Checkbox - Updated */
.custome-checkbox input[type=checkbox]:checked + .form-check-label:before {
    background-color: var(--coffee-primary) !important; /* Primary background for checked state */
    border-color: var(--coffee-primary) !important; /* Primary border for checked state */
}

/* Owl Carousel - Updated */
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #7a05f0 !important; /* Primary color for active/hover dots */
}

.owl-theme .owl-dots .owl-dot span {
    border: 1px solid #7a05f0  !important; /* Primary color for dot border */
}

/* Slick Slider - Updated */
.slick-next:hover,
.slick-prev:hover {
    background-color: var(--coffee-primary) !important; /* Primary color for hover background */
}

/* Social Icons - Updated */
.social_icons li a:hover {
    color: var(--coffee-gold) !important; /* (NO CHANGE) */
}

/* Alert Container - Updated */
#alert-container .alert.alert-success {
    border-left: 5px solid var(--coffee-primary) !important; /* Primary color for key border */
    color: var(--coffee-text) !important; /* (NO CHANGE) */
}

/* Scroll Up Button - Updated */
.scrollup {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; /* Primary background */
    border-radius: 8px !important;
    transition: all 0.3s ease-in-out !important;
}

.scrollup:hover {
    background: linear-gradient(135deg, #667eea5d 0%, #764ba242 100%) !important; /* Darker hover background */
}
@media (max-width: 991px){
    .btn-wishlist{
        
    transform: translateY(10px) !important;
    }
 .attr-nav .btn-wishlist:hover {
                color: #667eea !important;
            }
.categories_btn {
padding: 19px 15px !important;
}
.btn-shopping-cart{
        transform: translateY(7px) !important;
}

}
/* Responsive Design Enhancements */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    .banner_content h2 {
        font-size: 2.5rem !important;
    }
    
    .categories_btn {
padding: 20px 20px !important;
    
    }
    
    .btn {
        padding: 12px 30px !important;
    }
}


@media (max-width: 576px) {
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
    }
    
    .banner_content h2 {
        font-size: 2rem !important;
    }
    
    .btn {
        padding: 10px 25px !important;
        font-size: 0.9rem !important;
    }
}

/* Animation Enhancements */
@keyframes coffeeFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product,
.product_wrap,
.categories_box a,
.icon_box {
    animation: coffeeFadeIn 0.6s ease-out !important;
}

/* Loading States */
.button-loading {
    border: 1px solid var(--coffee-primary) !important; /* Primary color for border */
    color: transparent !important;
}

.button-loading:before {
    border-color: var(--coffee-primary) !important; /* Primary color for spinner */
    border-bottom-color: transparent !important;
}

/* Focus States for Accessibility */
.btn:focus,
.categories_btn:focus,
.form-control:focus {
    outline: 2px solid var(--coffee-gold) !important; /* Gold for focus outline */
    outline-offset: 2px !important;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --coffee-brown: #000000;
        --coffee-text: #000000;
        --coffee-text-light: #333333;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}