/* 
   Nebu Timber - Premium "Complete Coffee Brown" Theme Overrides 
   Implements specific "Coffee Shop Elegance" design system.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700;800&display=swap');

:root {
    /* Primary Coffee Spectrum */
    --espresso: #3C2415;
    --dark-roast: #4A2E1B;
    --medium-roast: #6F4E37;
    --light-roast: #8B6B4D;
    --coffee-cream: #B89B7A;
    --latte: #D4B996;
    --steamed-milk: #F0E6D6;
    --coffee-foam: #FFF8F0;

    /* Accents */
    --caramel: #D4A056;
    --cinnamon: #C17A3D;
    --chocolate: #7B3F00;

    /* Interactive States */
    --hover-glow: rgba(212, 169, 86, 0.2);
    --active-press: rgba(60, 36, 21, 0.9);

    /* Typography */
    --text-dark: #2C1810;
    --text-medium: #5C4033;
    --text-light: #F8F4EC;

    /* Functional mappings (Backward compatibility & Flatsome hooks) */
    --primary-color: var(--medium-roast);
    --secondary-color: var(--caramel);
    --highlight-color: var(--cinnamon);
}

/* ---------------------------------------------------------
   GLOBAL TYPOGRAPHY & RESET
--------------------------------------------------------- */
body {
    color: var(--text-medium) !important;
    background-color: #4a3c31 !important;
    background-image: none !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    line-height: 1.7;
}

#main {
    background: linear-gradient(180deg,
            var(--steamed-milk) 0%,
            var(--coffee-foam) 100%) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.product-title {
    font-family: 'Playfair Display', serif !important;
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    position: relative;
}

h1 {
    font-size: 3.5rem;
    background: linear-gradient(135deg,
            var(--text-dark) 0%,
            var(--medium-roast) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    /* Override flatsome colors to allow gradient text if supported */
}

/* Fallback for transparent text if needed, or specific Flatsome H1s might need overrides */
.section-title-main {
    color: var(--espresso) !important;
    -webkit-text-fill-color: var(--espresso) !important;
}

h2 {
    font-size: 2.5rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--caramel), var(--cinnamon));
    border-radius: 2px;
}

a {
    color: var(--cinnamon);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--chocolate);
}

/* ---------------------------------------------------------
   HEADER & NAVIGATION ("Premium Coffee Bar Style")
   Mapped to Flatsome: #header, .header-wrapper
--------------------------------------------------------- */
#header,
.header-wrapper,
.header-main {
    background: linear-gradient(135deg, var(--espresso) 0%, var(--dark-roast) 100%) !important;
    border-bottom: 3px solid var(--caramel) !important;
    box-shadow: 0 6px 25px rgba(60, 36, 21, 0.3) !important;
    position: relative;
    /* overflow: hidden; - Removed to prevent cutting off dropdowns if any */
}

/* Top accent line */
#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            var(--caramel),
            var(--cinnamon),
            var(--caramel),
            transparent);
    z-index: 20;
}

/* Nav Container */
.header-nav {
    /* Adapting user's .main-nav style to Flatsome's structure */
    /* We apply some of these styles to the nav wrapper if possible, or just the links */
    /* Flatsome doesn't usually have a floating nav box, so we style the bar itself or links */
}

/* Nav Links */
.header-nav li a,
.nav>li>a {
    color: var(--coffee-cream) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.75rem 1.0rem !important;
    /* Adjusted layout */
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    /* overflow: hidden; - Be careful with text clipping */
    text-shadow: none !important;
}

.header-nav li a:hover,
.nav>li>a:hover {
    color: var(--steamed-milk) !important;
    background: rgba(255, 255, 255, 0.05);
    /* Subtle glowing background instead of radial for simplicity/robustness */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(193, 122, 61, 0.4);
}

.header-nav li.active a,
.nav>li.active>a {
    background: linear-gradient(135deg, var(--medium-roast), var(--light-roast));
    color: var(--text-light) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(193, 122, 61, 0.3);
}

/* Sticky Header Override */
.stuck .header-main {
    background: linear-gradient(135deg, var(--espresso) 0%, var(--dark-roast) 100%) !important;
}

/* ---------------------------------------------------------
   BUTTONS ("Hyper-Styled Coffee Brown")
   Mapped to Flatsome: .button, button, input[type="submit"]
--------------------------------------------------------- */
button,
.button,
input[type="submit"],
button[type="submit"] {
    background: linear-gradient(145deg, var(--medium-roast), var(--dark-roast)) !important;
    color: var(--steamed-milk) !important;
    border: 2px solid var(--caramel) !important;
    border-radius: 10px !important;
    padding: 0.8rem 2rem !important;
    /* Adjusted slightly for Flatsome sizing compatibility */
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 6px 15px rgba(111, 78, 55, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    text-shadow: none !important;
}

/* Coffee Bean Texture Effect (Pseudo-elements need relative parent) */
button::before,
.button::before,
input[type="submit"]::before {
    /* Note: pseudo-elements might not work on input[type=submit] in all browsers, 
     but works for button tags and .button spans */
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%,
            rgba(212, 160, 86, 0.1) 2%,
            transparent 2.5%),
        radial-gradient(circle at 70% 70%,
            rgba(212, 160, 86, 0.1) 1.5%,
            transparent 2%);
    background-size: 20px 20px;
    opacity: 0.3;
    /* animation: bean-float 20s infinite linear; - Disabled to prevent perf issues on old devices, can enable if desired */
    pointer-events: none;
}

/* Hover Effects */
button:hover,
.button:hover,
input[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(193, 122, 61, 0.5),
        0 0 30px rgba(212, 169, 86, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(145deg, var(--light-roast), var(--medium-roast)) !important;
    color: var(--coffee-foam) !important;
}

/* Primary / Alert Buttons */
.button.primary,
.button.alert,
.checkout-button {
    background: linear-gradient(145deg, var(--caramel), var(--cinnamon)) !important;
    border-color: var(--coffee-cream) !important;
    text-shadow: 0 1px 2px rgba(60, 36, 21, 0.3) !important;
    color: var(--espresso) !important;
    /* Dark text on bright caramel for contrast */
}

.button.primary:hover {
    color: var(--text-light) !important;
}

/* Secondary / Outline (if used) */
.button.secondary,
.button.is-outline {
    background: transparent !important;
    color: var(--medium-roast) !important;
    border: 3px solid var(--medium-roast) !important;
    box-shadow: none !important;
}

.button.secondary:hover,
.button.is-outline:hover {
    background: linear-gradient(145deg, var(--medium-roast), var(--light-roast)) !important;
    color: var(--text-light) !important;
}

/* ---------------------------------------------------------
   FOOTER ("Rich Coffee Grounds")
   Mapped to Flatsome: #footer, .footer-widgets
--------------------------------------------------------- */
#footer {
    background: linear-gradient(to bottom, var(--espresso), var(--text-dark)) !important;
    color: var(--coffee-cream) !important;
    /* padding: 4rem 2rem 2rem; - Flatsome handles padding, we override colors */
    position: relative;
    border-top: 3px solid var(--caramel) !important;
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer .widget-title {
    color: var(--steamed-milk) !important;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
    border-bottom: none !important;
    /* Replacing old border with pseudo */
}

#footer h1::after,
#footer h2::after,
#footer h3::after,
#footer h4::after,
#footer .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(to right, var(--caramel), transparent);
}

#footer a,
.footer-links a {
    color: var(--latte) !important;
    display: block;
    /* padding: 0.5rem 0; */
    transition: all 0.3s ease;
    border-left: 2px solid transparent;
    padding-left: 1rem;
}

#footer a:hover {
    color: var(--caramel) !important;
    border-left-color: var(--caramel);
    transform: translateX(5px);
}

.copyright-footer,
.absolute-footer {
    background-color: var(--text-dark) !important;
    color: var(--coffee-cream) !important;
    border-top: 1px solid rgba(212, 169, 86, 0.2) !important;
}

/* ---------------------------------------------------------
   CARDS & PRODUCT BOXES ("Coffee Bean Cards")
   Mapped to Flatsome: .product-small, .box-text
--------------------------------------------------------- */
.product-small,
.box-text,
.coffee-card {
    background: linear-gradient(145deg, var(--steamed-milk), var(--coffee-foam)) !important;
    border: 1px solid rgba(139, 107, 77, 0.2) !important;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.product-small::before,
.box-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--caramel),
            var(--cinnamon),
            var(--caramel));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.product-small:hover,
.box-text:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(111, 78, 55, 0.2),
        0 5px 15px rgba(212, 169, 86, 0.1) !important;
    border-color: rgba(212, 169, 86, 0.4) !important;
}

.product-small:hover::before,
.box-text:hover::before {
    opacity: 1;
}

.product-title,
.box-text h5 {
    color: var(--dark-roast) !important;
    font-weight: 700;
}

.price {
    color: var(--cinnamon) !important;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

/* ---------------------------------------------------------
   FORMS
--------------------------------------------------------- */
input[type="text"],
input[type="email"],
textarea,
select {
    background-color: var(--coffee-foam) !important;
    border: 2px solid var(--latte) !important;
    color: var(--text-dark) !important;
    border-radius: 8px !important;
}

input:focus,
textarea:focus {
    border-color: var(--cinnamon) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(193, 122, 61, 0.2) !important;
}

/* ---------------------------------------------------------
   MESSAGING & ALERTS
--------------------------------------------------------- */
/* "Enhanced Message" style mapped to common message boxes */
.message-box,
.woocommerce-message,
.success {
    background: linear-gradient(145deg,
            rgba(240, 230, 214, 0.95),
            rgba(255, 248, 240, 0.95)) !important;
    border-left: 4px solid var(--caramel) !important;
    border-top: none !important;
    /* Remove flatsome default */
    color: var(--text-dark) !important;
    border-radius: 0 12px 12px 0;
    box-shadow: 5px 5px 15px rgba(184, 155, 122, 0.1);
}

/* ---------------------------------------------------------
   GREEN REMOVAL & FLATSOME OVERRIDES (Updated for Coffee Theme)
   Aggressively target original site's green elements.
--------------------------------------------------------- */

/* Header Top */
.header-top {
    background-color: var(--dark-roast) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Icons */
.header-top .icon,
.header-top i,
.icon-box-img,
.feature-icon,
.icon {
    color: var(--caramel) !important;
}

/* Feature Sections / Banners */
.has-background-green,
.bg-color-primary,
.primary-color,
.bg-primary,
.button.primary,
.header-top,
.absolute-footer,
.widget-title,
/* Footer Specific Overrides */
.footer-widgets,
.footer-primary,
.footer-secondary,
.section-footer,
#footer .row,
#footer .section,
div[style*="#bddba1"],
div[style*="green"],
div[style*="background-color: #"],
/* Aggressive catch for inline hexes */
.is-primary,
.section-primary,
.banner-inner,
.header-newsletter,
.header-mobile,
.header-mobile-nav,
#header-mobile,
/* Catch-all for colored backgrounds */
.section[style*="background-color"],
.row[style*="background-color"] {
    /* Smart override: If it was green, it's now Espresso */
    background-color: var(--espresso) !important;
    background-image: none !important;
}

/* Specific Green Hex/RGB Overrides found in HTML */
div[style*="#3c593b"],
div[style*="3c593b"],
/* Catch partial match */
div[style*="rgb(60, 89, 59)"],
.col-inner[style*="#3c593b"],
#row-384353392 .col-inner {
    background-color: var(--espresso) !important;
}

/* Ensure text in these forced-dark sections is readable */
.footer-widgets,
.footer-widgets p,
.footer-widgets li,
.footer-widgets span,
.footer-widgets h1,
.footer-widgets h2,
.footer-widgets h3,
.footer-widgets h4,
.footer-widgets h5,
.footer-widgets h6 {
    color: var(--coffee-foam) !important;
}

/* WhatsApp / Floating Buttons (often green) */
.wa-chat,
.whatsapp-button,
.joinchat,
.ht-ctc-chat {
    display: none !important;
}

/* Specific styling for badges/highlights */
.badge-inner,
.badge-container {
    background-color: var(--cinnamon) !important;
    color: white !important;
}

/* Hide legacy sidebar/menu elements that appear incorrectly at bottom */
#side-menu-1,
.side-menu-lite {
    display: none !important;
}

/* Hide Header Extras (User Request: Brochure & Socials) */
.header-button-1,
.header-social-icons {
    display: none !important;
}

/* NUCLEAR OPTION: Hide all known floating widget containers */
.wa-chat,
.whatsapp-button,
.joinchat,
.ht-ctc-chat,
.prdct-flt-mb,
.wpp-btn-mobile,
.btn-float,
#myBtn,
.scroll-to-top,
.back-to-top,
.floating-icons,
.social-floating,
.sticky-footer-bar,
.store-notice,
.demo_store,
#toast-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Ensure body has ZERO padding at bottom */
body,
html {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 100% !important;
}

#wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Mobile Overrides */
@media (max-width: 768px) {
    :root {
        font-size: 14px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    button,
    .button {
        padding: 0.875rem 1.75rem !important;
        width: 100%;
        max-width: 300px;
        margin: 10px auto;
        display: block;
    }

    .header-nav {
        padding: 0.75rem;
        background-color: var(--dark-roast) !important;
    }

    .header-nav li a {
        padding: 0.5rem 1rem !important;
        margin: 0.25rem;
        font-size: 0.9rem;
    }

    .product-small {
        margin: 1rem 0.5rem;
        padding: 1.5rem;
    }
}

/* --- Fix Icons (Squares) & Footer Clean Up (User Request) --- */

/* 1. Footer Socials: Remove all except Facebook */
.footer-primary .social-icons .instagram,
.footer-primary .social-icons .twitter,
.footer-primary .social-icons .youtube,
.social-icons.follow-icons .instagram,
.social-icons.follow-icons .twitter,
.social-icons.follow-icons .youtube,
.social-icons.follow-icons .pinterest,
.social-icons.follow-icons .snapchat,
.social-icons.follow-icons .linkedin {
    display: none !important;
}

/* 2. Fix Broken 'Square' Icons by forcing FontAwesome */
/* Facebook Icon */
.icon-facebook:before,
.fa-facebook:before {
    font-family: "FontAwesome" !important;
    content: "\f09a" !important;
    /* fa-facebook */
}

/* Fix Search Icon (Magnifying Glass) */
.icon-search:before,
.icon-search {
    font-family: "FontAwesome" !important;
    content: "\f002" !important;
    /* fa-search */
}

/* Fix Right Arrow Icon */
.icon-angle-right:before,
.icon-angle-right {
    font-family: "FontAwesome" !important;
    content: "\f105" !important;
    /* fa-angle-right */
}

/* Dropdown Arrow (V shape) */
.icon-angle-down:before,
.icon-angle-down,
.nav-dropdown-toggle:after {
    font-family: "FontAwesome" !important;
    content: "\f107" !important;
    /* fa-angle-down */
    border: none !important;
    /* Undo any square border artifacts */
}

/* Ensure icons are visible and colored correctly in new theme */
.social-icons a.facebook i,
.icon-angle-down {
    color: var(--caramel) !important;
}

.social-icons a.facebook:hover i {
    color: var(--steamed-milk) !important;
}

/* =========================================
   DUAL HERO SECTION STYLES
   ========================================= */

/* Primary Hero Slideshow */
.primary-hero {
    position: relative;
    height: 85vh;
    min-height: 600px;
    overflow: hidden;
    background-color: var(--dark-roast);
    /* Fallback */
}

.slideshow-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    visibility: hidden;
    /* Hide completely when not active */
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Slide Text Overlay */
.slide-content {
    position: absolute;
    bottom: 20%;
    left: 10%;
    right: 10%;
    color: #ffffff;
    text-align: center;
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    /* Simple dark overlay for contrast */
    padding: 2.5rem;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Subtle white border */
    max-width: 900px;
    margin: 0 auto;
    /* Center horizontally */
}


.slide-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: #ffffff !important;
    text-shadow: none;
    line-height: 1.2;
}

.slide-content p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: #ffffff !important;
    text-shadow: none;
}

/* Coffee bean styled dots */
.slide-dots {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    z-index: 3;
}

.dot {
    width: 16px;
    height: 24px;
    border-radius: 50%;
    /* Smooth oval */
    background: var(--medium-roast);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--dark-roast);
}

.dot.active {
    background: var(--caramel);
    transform: scale(1.2);
    border-color: var(--coffee-foam);
}

/* Simulated Coffee bean crease */
.dot::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 6px;
    width: 2px;
    height: 14px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    transform: rotate(5deg);
}

/* Navigation arrows */
.slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(74, 46, 27, 0.6);
    /* Espresso transparent */
    color: var(--coffee-cream);
    border: 2px solid var(--caramel);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 8px;
    /* Visual center adjustment */
}

.slide-nav:hover {
    background: var(--caramel);
    color: var(--dark-roast);
    border-color: var(--coffee-foam);
    transform: translateY(-50%) scale(1.1);
}

.slide-nav.prev {
    left: 30px;
}

.slide-nav.next {
    right: 30px;
}

/* Secondary Hero Repositioning & Styling */
.secondary-hero {
    padding: 3rem 0;
    background: linear-gradient(to bottom, var(--dark-roast), var(--espresso));
    border-top: 4px solid var(--caramel);
    border-bottom: 4px solid var(--caramel);
}

/* User Request: 'Wooden Brighter' Title Style */
.text-wooden-bright {
    background: linear-gradient(to right, #f3e5f5 0%, #d4a056 20%, #ffeb3b 50%, #d4a056 80%, #f3e5f5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #d4a056;
    /* Fallback */
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 130%;
    /* Make it pop */
    filter: drop-shadow(0 2px 0px rgba(60, 36, 21, 0.5));
    /* enhance visibility */
    background-size: 200% auto;
    animation: shine 5s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* Mobile Responsiveness for Slideshow */
@media (max-width: 768px) {
    .primary-hero {
        height: 70vh;
        min-height: 500px;
    }
}

/* Hide Search Icon Globally */
.header-search {
    display: none !important;
}

.slide-content {
    bottom: 15%;
    left: 5%;
    right: 5%;
    padding: 1.5rem;
    width: 90%;
}

.slide-content h1 {
    font-size: 2rem;
}

.slide-content p {
    font-size: 1rem;
}

.slide-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    padding-bottom: 5px;
}

.slide-nav.prev {
    left: 10px;
}

.slide-nav.next {
    right: 10px;
}
}

/* Fix Logo Distortion */
#logo img,
.header-logo,
.header-logo-dark {
    width: auto !important;
    height: auto !important;
    max-height: 100px !important;
    object-fit: contain;
}

/* ---------------------------------------------------------
   JS MISSING FALLBACKS (Dropdown Fixes)
   Forces menus to open even if Flatsome.js/Query is broken.
--------------------------------------------------------- */
/* Set default state for dropdowns - hidden but ready to animate */
.nav-dropdown.nav-dropdown-default,
.header-nav .sub-menu,
.header-nav .nav-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* CRITICAL: Prevents invisible dropdown from capturing hover */
    transition: opacity 0.15s ease 0.2s, visibility 0.15s ease 0.2s;
    /* 0.2s delay before hiding - allows cursor movement */
}



.header-nav .menu-item-has-children>a:hover+.sub-menu,
.header-nav .menu-item-has-children>.sub-menu:hover,
.header-nav .has-dropdown>a:hover+.nav-dropdown,
.header-nav .has-dropdown>.nav-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* Re-enable clicks when visible */
    top: 100%;
    margin-top: 0;
    z-index: 9999;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    /* Instant show */
}

/* Force hide dropdown on active/current pages unless actually hovering */
.header-nav .active.has-dropdown:not(:hover)>.nav-dropdown,
.header-nav .current-menu-ancestor.has-dropdown:not(:hover)>.nav-dropdown,
.header-nav .current_page_parent.has-dropdown:not(:hover)>.nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ---------------------------------------------------------
   DROPDOWN DESIGN (User Request: Brown Card, White Text)
   Overrides previous fallback styling.
--------------------------------------------------------- */
.nav-dropdown,
.sub-menu,
.nav-dropdown.nav-dropdown-default,
.header-nav .nav-dropdown {
    background-color: #4a3c31 !important;
    /* Hardcoded Dark Roast */
    border: 1px solid #c68e17 !important;
    /* Caramel Border */
    border-top: 3px solid #c68e17 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.nav-dropdown li,
.sub-menu li {
    background-color: #4a3c31 !important;
    /* Ensure list items match */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nav-dropdown li a,
.sub-menu li a {
    color: #ffffff !important;
    /* Pure White Text */
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 12px 20px !important;
    background: transparent !important;
}

/* HOVER STATE - NO RED */
.nav-dropdown li a:hover,
.sub-menu li a:hover,
.nav-dropdown li.active>a,
.sub-menu li.active>a {
    background-color: #c68e17 !important;
    /* Caramel Hover */
    color: #2b1d14 !important;
    /* Dark Espresso Text on Hover */
    padding-left: 25px !important;
    /* Slide animation */
}

/* ---------------------------------------------------------
   DROPDOWN VISIBILITY FIX (Safe Version)
   1. Allow overflow on header to show menus.
   2. Manually Clearfix to prevent header collapse.
--------------------------------------------------------- */

/* Allow dropdowns to spill out */
.header-main,
.header-inner,
.header-wrapper {
    overflow: visible !important;
}

/* RESTORE CLEARFIX (Prevent Header Disappearing) */
.header-main::after,
.header-inner::after,
.header-wrapper::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

/* ---------------------------------------------------------
   DROPDOWN DESIGN (User Request: Brown Card, White Text)
   Overrides previous fallback styling.
--------------------------------------------------------- */
.nav-dropdown {
    background-color: var(--dark-roast) !important;
    border: 1px solid var(--caramel) !important;
    border-top: 3px solid var(--caramel) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.nav-dropdown li a {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-weight: 500;
}

.nav-dropdown li a:hover {
    background-color: var(--caramel) !important;
    color: var(--espresso) !important;
    padding-left: 25px !important;
}





/* ---------------------------------------------------------
   HERO SLIDESHOW FIX: Visibility of Call-to-Action Buttons
--------------------------------------------------------- */
.primary-hero .slide-content .button {
    /* Enforce High Contrast */
    background: var(--caramel) !important;
    color: #ffffff !important;
    border: 2px solid var(--caramel) !important;

    /* Ensure text is standard and visible */
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    margin-top: 1rem !important;
}

.primary-hero .slide-content .button:hover {
    background: #ffffff !important;
    color: var(--espresso) !important;
    border-color: #ffffff !important;
    transform: translateY(-3px);
}

/* ---------------------------------------------------------
   SPINNER KILLER: Force hide the loading spinner in Hero 2
   Targeting ID #slider-1248190162 and #banner-1613733137
--------------------------------------------------------- */

/* Kill pseudo-element spinners on the slider wrapper */
#slider-1248190162::before,
#slider-1248190162::after,
#slider-1248190162 .flickity-viewport::before,
#slider-1248190162 .flickity-viewport::after,
#slider-1248190162 .spinner,
#slider-1248190162 .loading-spin,
#slider-1248190162 .is-loading::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
    /* Removes the element entirely */
    animation: none !important;
}

/* Kill pseudo-element spinners on the banner itself */
#banner-1613733137::before,
#banner-1613733137::after,
#banner-1613733137 .loading-spin,
#banner-1613733137 .is-loading::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
    animation: none !important;
}

/* ---------------------------------------------------------
   TESTIMONIAL SLIDESHOW CENTERING FIX
   Ensures the glassmorphic card is horizontally centered
--------------------------------------------------------- */
.testi-slideshow-container {
    max-width: 600px;
    margin: 0 auto !important;
    width: 100%;
}

.testi-slide {
    text-align: center;
}

/* ---------------------------------------------------------
   FIX: Product Grid Title Visibility (User Request: "Names change into Choko Brown")
   Forces product titles in the grid to be dark brown instead of white.
   Overriding potential link inheritance issues.
   --------------------------------------------------------- */
.product-title a,
.product-title a span,
.woocommerce-loop-product__title a,
.woocommerce-loop-product__title a span,
.name.product-title a,
.name.product-title a span,
.box-text .product-title a,
.box-text .product-title a span,
/* Add direct targeting for bare links */
.box-text a,
.box-text .name a {
    color: #4a3c31 !important;
    /* Choko Brown */
    text-shadow: none !important;
    text-decoration: none !important;
}

.product-title a:hover,
.product-title a:hover span,
.woocommerce-loop-product__title a:hover,
.woocommerce-loop-product__title a:hover span,
.name.product-title a:hover,
.name.product-title a:hover span,
.box-text .product-title a:hover,
.box-text .product-title a:hover span,
.box-text a:hover,
.box-text .name a:hover {
    color: #3C2415 !important;
    /* Darker Espresso on Hover */
    text-decoration: none !important;
    opacity: 1 !important;
}