/* MASTER OVERRIDE - FINAL FIX FOR ALL ISSUES */

/* ══════════════════════════════════════════════════════════════════
   LAYOUT FOUNDATION
   Structure: [FIXED ticker 44px] → [normal-flow #page → header → slider]
   
   The ticker is position:fixed at top:0 (44px tall).
   The #page / .viewport / body need padding-top:44px so content
   starts BELOW the ticker. The header is inside #page in normal flow,
   so it appears naturally BELOW the ticker — then the slider below that.
   
   All other padding-top rules below are OVERRIDDEN by these at the top.
   ══════════════════════════════════════════════════════════════════ */

/* ── Desktop (≥992px): body offset = ticker height only ── */
@media (min-width: 992px) {
    html body {
        padding-top: 44px !important; /* = ticker height */
        margin-top: 0 !important;
    }
    html body.admin-bar {
        padding-top: 76px !important; /* 32px WP bar + 44px ticker */
    }
    /* #page and .viewport must NOT add extra offset */
    html body #page,
    html body .viewport,
    html body .site {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    /* Header inside #page — NOT fixed, in normal flow */
    html body #masthead,
    html body .site-header {
        position: relative !important;
        top: auto !important;
        z-index: 100 !important;
        width: 100% !important;
        background: #fff !important;
        margin-top: 12px !important; /* breathing room below ticker */
        border-top: 1px solid #f0e8d8 !important; /* subtle separator */
    }
    /* Inner header row — extra padding top */
    html body #masthead .header-line,
    html body .site-header .header-line,
    html body #masthead .header-spacing,
    html body .site-header .site-branding-wrap {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    /* Slider comes right after header in normal flow — no extra margin */
    html body .indian-festival-slider {
        margin-top: 0 !important;
    }
}

/* ── Tablet (769px–991px) ── */
@media (min-width: 769px) and (max-width: 991px) {
    html body {
        padding-top: 44px !important;
        margin-top: 0 !important;
    }
    html body.admin-bar {
        padding-top: 76px !important;
    }
    html body #page,
    html body .viewport {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════
   MOBILE LOGO SCROLL FIX — prevent horizontal overflow
   The .right-header icons overflow causing page-wide scroll
   ══════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Prevent ANY horizontal overflow on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    /* Site branding row — constrain width, no overflow */
    html body .site-branding-wrap,
    html body .site-branding,
    html body #masthead,
    html body .site-header {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Right header icons — shrink on mobile, no overflow */
    html body .right-header {
        flex-shrink: 0 !important;
        overflow: visible !important;
        max-width: 120px !important;
    }
    /* Mobile logo — shift 18px left to visually centre */
    html body .site-branding .custom-logo-link,
    html body .site-branding .header-logo,
    html body .site-branding .site-logo {
        margin-left: -12px !important;
    }
    /* Prevent site-main-wrap nav from causing overflow */
    html body .site-main-wrap,
    html body .site-wrap,
    html body #site-navigation {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Bootstrap navbar collapse — full width, no overflow */
    html body .navbar-collapse,
    html body #navbarSupportedContent {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    /* Mobile quick bar — full width, no overflow */
    html body .pms-mobile-quick-bar {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE CENTER ALIGNMENT FIX — All pages centered on mobile
   Fixes: product detail, signup, checkout, single product — too far left
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* ── Global page wrapper — centered, no overflow ── */
    html body #page,
    html body .site,
    html body #content,
    html body .site-content,
    html body .content-area,
    html body #primary {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        float: none !important;
    }

    /* ── Container — centered with safe padding ── */
    html body .container,
    html body .container-fluid,
    html body .woocommerce,
    html body .woocommerce-page,
    html body #woo-single-product,
    html body .site-main {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* ── Single product page ── */
    html body .single-product div.product,
    html body .woocommerce div.product,
    html body .product-page-wrap,
    html body .single-product .summary {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* ── Product images on single product ── */
    html body .single-product .woocommerce-product-gallery,
    html body .woocommerce-product-gallery {
        width: 100% !important;
        float: none !important;
        margin: 0 auto 20px auto !important;
    }

    /* ── Product summary ── */
    html body .single-product .summary.entry-summary {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    /* ── My Account / Register / Login page ── */
    html body .woocommerce-account .woocommerce,
    html body .woocommerce-page.woocommerce-account .woocommerce,
    html body .woocommerce-account .u-column1,
    html body .woocommerce-account .u-column2,
    html body .woocommerce .u-column1,
    html body .woocommerce .u-column2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 24px auto !important;
        float: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* ── Checkout page — full width centered ── */
    html body .woocommerce-checkout #customer_details,
    html body form.checkout .col-1,
    html body form.checkout .col-2,
    html body .woocommerce-checkout .col-1,
    html body .woocommerce-checkout .col-2 {
        width: 100% !important;
        float: none !important;
        margin: 0 auto 20px auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* ── Cart page ── */
    html body .woocommerce-cart .woocommerce,
    html body .woocommerce-cart table.cart,
    html body .woocommerce-cart .cart-collaterals {
        width: 100% !important;
        float: none !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* ── WooCommerce notices — centered ── */
    html body .woocommerce-message,
    html body .woocommerce-error,
    html body .woocommerce-info {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ── Shop page product grid ── */
    html body .woocommerce ul.products,
    html body .woocommerce-page ul.products {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* ── Breadcrumbs ── */
    html body .woocommerce-breadcrumb {
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    /* ── Remove any negative left margins causing overflow ── */
    html body .row,
    html body [class*="col-"] {
        margin-left: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ── Mobile (≤768px): ticker scrolls with page, no fixed offset ── */
@media (max-width: 768px) {
    html body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    html body.admin-bar {
        padding-top: 46px !important;
    }
    html body #page,
    html body .viewport {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    /* On mobile, ticker is NOT fixed — scrolls naturally */
    .top-messages-banner {
        position: relative !important;
        top: auto !important;
    }
}

/* ══════════════════════════════════════════════
   SMOOTH SCROLL — GPU accelerated, no jank
   ══════════════════════════════════════════════ */
html {
    scroll-behavior: smooth !important;
}
body {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: none !important;
}
.woocommerce ul.products li.product,
.product-card,
.slide,
.slider-container {
    contain: layout style !important;
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* 1. TOP BANNER - ABSOLUTE HIGHEST PRIORITY */
.top-messages-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px 0 30px !important;
    height: 44px !important;
    background: linear-gradient(90deg, #b8860b 0%, #D4AF37 40%, #f0cc55 60%, #D4AF37 80%, #b8860b 100%) !important;
    overflow: visible !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
    /* GPU accelerate fixed banner — prevents scroll jank */
    will-change: transform !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* When WP admin bar is showing (logged in), shift everything down by 32px */
body.admin-bar .top-messages-banner {
    top: 32px !important;
}

/* 2. MESSAGE CONTAINER - LEFT SIDE */
.rotating-messages-container {
    flex: 1 !important;
    text-align: center !important;
    position: relative !important;
    height: 44px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. MESSAGE ITEMS — strict one-at-a-time, NO overlap ever
   KEY: use max-height:0 + overflow:hidden on inactive items
   so even if visibility is overridden by other rules, items stay invisible */
.rotating-messages-container {
    position: relative !important;
    flex: 1 !important;
    height: 44px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

/* ALL items: collapsed & invisible by default */
.rotating-messages-container .message-item {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.5s ease !important;
    /* Crisp small text */
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    will-change: opacity !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ONLY the .active item is visible — maximum specificity */
html body .top-messages-banner .rotating-messages-container .message-item.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}
/* Ensure all OTHER items stay hidden even if parent rules set visibility:visible */
html body .top-messages-banner .rotating-messages-container .message-item:not(.active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ── Mobile: brighter text, wrap allowed ── */
@media (max-width: 768px) {
    .rotating-messages-container {
        height: auto !important;
        min-height: 44px !important;
        overflow: hidden !important;
    }
    .message-item {
        height: auto !important;
        min-height: 44px !important;
        white-space: normal !important;
        font-size: 11.5px !important;
        padding: 6px 10px !important;
        line-height: 1.4 !important;
        color: #0a0a0a !important;
        font-weight: 800 !important;
    }
    .top-messages-banner {
        height: auto !important;
        min-height: 44px !important;
        padding: 4px 10px !important;
    }
}

/* 4. USER PANEL - RIGHT SIDE IN BANNER - COMPACT, NO BOX, SHIFTED RIGHT */
/* Outer wrapper: completely transparent, no box */
.top-messages-banner .user-account-panel-wrapper {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: contents !important;
}

/* Inner panel: compact, no background, aligned right with 20px padding */
.top-messages-banner .user-account-panel {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    padding: 0 0 0 8px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 44px !important;
}

/* Panel items: compact */
.top-messages-banner .user-account-panel .panel-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 7px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Links: smaller font */
.top-messages-banner .user-account-panel .panel-link,
.top-messages-banner .user-account-panel a {
    display: inline-flex !important;
    color: #1a1a1a !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    align-items: center !important;
    gap: 3px !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-decoration: none !important;
    transform: none !important;
    transition: color 0.15s ease !important;
}

/* Icons: reduced ~30% (14px instead of 20px) */
.top-messages-banner .user-account-panel .panel-icon {
    display: inline-flex !important;
    font-size: 14px !important;
    filter: none !important;
}

/* Text spans */
.top-messages-banner .user-account-panel .panel-text,
.top-messages-banner .user-account-panel span {
    display: inline-flex !important;
    color: #1a1a1a !important;
    font-size: 11px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* TAGLINE BAR */
.site-tagline-bar {
    position: fixed !important;
    top: 44px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99997 !important;
    background: #0a0a0a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    padding: 5px 20px !important;
    height: 32px !important;
}

.site-tagline-bar .tagline-hashtags {
    font-size: 11px !important;
    color: #D4AF37 !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}

.site-tagline-bar .tagline-main {
    font-size: 12px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}

/* 5. THEME TOPBAR - style as black label bar */
.header-top {
    position: fixed !important;
    top: 44px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99997 !important;
    background: #111111 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-top .header-top-left,
.header-top .header-top-right {
    display: none !important;
}

.header-top .header-top-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 !important;
    max-width: 100% !important;
}

.header-top .header-top-center ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
}

.header-top .header-top-center ul li span {
    color: #ffffff !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

.header-top .header-top-center ul li span i {
    display: none !important;
}

/* 5b. HEADER BELOW TOPBAR */
.site-header,
#masthead {
    position: fixed !important;
    top: 76px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99998 !important;
    background: #ffffff !important;
}

/* 5a. Remove phantom spacer - was creating white gap */
.site-header::before,
#masthead::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
}

/* 5b. Header content - natural padding */
.site-header .header-main,
#masthead .header-main,
.header-six .header-main {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-top: 0 !important;
}

/* 5c. Reset header children margins */
.site-header .header-main > *,
#masthead .header-main > * {
    margin-top: 0 !important;
}

/* 5d. LOGO - No artificial transform */
.header-logo {
    transform: none !important;
    position: relative !important;
    display: block !important;
}

.site-branding,
.custom-logo-link {
    margin-top: 0 !important;
    position: relative !important;
    display: block !important;
}

/* 5e. Logo image — MAXIMUM SPECIFICITY — beats custom.css 240px rule */
/* custom.css sets .header_style .site-branding .site-logo img { max-width:240px }
   We must match or beat that specificity with !important on everything */
html body .header_style .site-branding .site-logo img,
html body .header_style .site-branding .header-logo a img,
html body .header_style .site-branding .custom-logo-link img,
html body .site-branding .custom-logo,
html body .site-branding .custom-logo-link img,
html body .header-logo a img,
html body .custom-logo-link img,
html body .site-logo img,
html body .header-logo img,
html body #masthead img.custom-logo,
html body #masthead .custom-logo-link img {
    display: block !important;
    max-width: 160px !important;
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin-top: 0 !important;
}

/* 5f. Hamburger and nav - no artificial push */
.head-hamburger-menu,
.search-icon,
.main-navigation {
    margin-top: 0 !important;
}

/* 5g. Fix header layout - target actual theme structure */
/* The theme uses .site-branding as the flex row container */
.site-header .site-branding,
#masthead .site-branding,
.site-header .header-spacing .site-branding {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 6px 0 !important;
}

/* Nav fills remaining space, left-aligned */
.site-header .main-navigation,
#masthead .main-navigation,
#site-navigation {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-grow: 1 !important;
}

/* Header spacing container - remove any extra padding */
.site-header .header-spacing,
#masthead .header-spacing,
.site-header .header-line,
#masthead .header-line {
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile: hamburger icon left, logo beside it */
@media (max-width: 991px) {
    .site-header .site-branding,
    #masthead .site-branding {
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    /* Mobile hamburger - left side */
    .site-header .head-hamburger-menu,
    #masthead .head-hamburger-menu {
        order: -1 !important;
        margin: 0 4px 0 0 !important;
    }

    .header-logo {
        order: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Right side actions on mobile */
    .site-header .right-header,
    #masthead .right-header {
        margin-left: auto !important;
        order: 1 !important;
    }
}

/* 6. BODY PADDING: 44px gold + 32px black + ~60px header = 136px */
body {
    padding-top: 136px !important;
}
/* Admin bar adds 32px */
body.admin-bar {
    padding-top: 168px !important;
}

/* 7. SLIDER BELOW HEADER */
.indian-festival-slider,
.css-slider {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 10px !important;
}

/* 8. PRODUCT GRID FORCE */
/* 8. CHAT WIDGET -- product grid rules consolidated into section 10 below */
.chat-widget-button {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 999998 !important;
    display: block !important;
    visibility: visible !important;
}

/* Chat window sizing */
.chat-widget-window,
.chat-window,
#chat-widget-window {
    width: 320px !important;
    height: 460px !important;
}

@media (max-width: 768px) {
    .chat-widget-window,
    .chat-window,
    #chat-widget-window {
        width: calc(100vw - 20px) !important;
        height: 70vh !important;
    }
}

/* Product image visibility at all breakpoints */
.thumbnail-wrap img,
.product-thumbnail-main,
.thumbnail-img img,
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* 9. MOBILE RESPONSIVE */
@media (max-width: 768px) {
    /* SHOW gold rotating messages banner on mobile — tips & offers visible */
    .top-messages-banner {
        display: flex !important;
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 4px 10px !important;
        z-index: 999 !important;
    }

    /* Without gold banner: black tagline goes to top:0 (or top:46px with admin bar) */
    .header-top,
    .site-tagline-bar {
        top: 0 !important;
        height: 32px !important;
    }

    /* Site header sits just below the tagline bar */
    .site-header,
    #masthead {
        top: 32px !important;
    }

    /* Admin bar adjustments for mobile (46px on mobile) */
    body.admin-bar .header-top,
    body.admin-bar .site-tagline-bar {
        top: 46px !important;
    }
    body.admin-bar .site-header,
    body.admin-bar #masthead {
        top: 78px !important;
    }
    body.admin-bar {
        padding-top: 138px !important;
    }

    /* Body padding: 32px tagline + ~60px header */
    body {
        padding-top: 92px !important;
    }

    /* Ensure #headerspacing doesn't slide away on mobile */
    #headerspacing,
    .header-sticky,
    #headerspacing.sticky {
        top: 0 !important;
        transform: none !important;
        transition: none !important;
    }

    /* User panel hidden on mobile */
    .user-account-panel-wrapper,
    .user-account-panel {
        display: none !important;
        visibility: hidden !important;
    }

    /* ISSUE 1: Remove ticker animation on mobile - prevent scroll freeze */
    .message-item {
        transition: none !important;
        will-change: auto !important;
        animation: none !important;
    }
    .top-messages-banner {
        will-change: auto !important;
        transform: none !important;
    }

    .navbar-hamburger ul.hamburger-nav li a,
    #site-navigation ul.nav-menu li a {
        padding: 10px 16px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .navbar-hamburger ul.hamburger-nav li ul,
    #site-navigation ul.nav-menu li ul.sub-menu {
        padding-left: 18px !important;
    }

    .navbar-hamburger ul.hamburger-nav li ul li a,
    #site-navigation ul.nav-menu li ul.sub-menu li a {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    .navbar-hamburger ul.hamburger-nav li a .mega-indicator,
    #site-navigation ul.nav-menu li a .mega-indicator {
        margin-left: 6px;
    }

    .navbar-hamburger ul.hamburger-nav li a .mega-indicator::after,
    #site-navigation ul.nav-menu li a .mega-indicator::after {
        font-size: 12px;
    }
    
    body {
        padding-top: 44px !important; /* desktop: just ticker height */
    }
    body.admin-bar {
        padding-top: 76px !important; /* desktop: WP bar (32px) + ticker (44px) */
    }

    .site-tagline-bar {
        height: 28px !important;
        gap: 15px !important;
    }

    .site-tagline-bar .tagline-hashtags {
        font-size: 10px !important;
    }

    .site-tagline-bar .tagline-main {
        font-size: 10px !important;
    }

    .site-header .header-main {
        padding: 6px 0 !important;
    }

    .site-header .header-logo {
        transform: none !important;
    }

    .site-header .custom-logo {
        max-height: 32px !important;
        width: auto !important;
    }

    /* ── Checkout page — fix jumbled fields + left overflow ── */
    html body .woocommerce-checkout,
    html body form.checkout,
    html body .woocommerce-billing-fields,
    html body .woocommerce-shipping-fields,
    html body #customer_details,
    html body .woocommerce-checkout #payment,
    html body .order_review-wrap,
    html body #order_review {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
        overflow-x: hidden !important;
    }
    /* Form rows — single column on mobile */
    html body .woocommerce-checkout .form-row,
    html body form.checkout .form-row,
    html body .woocommerce-billing-fields .form-row,
    html body .woocommerce form .form-row {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }
    /* Inputs full width */
    html body .woocommerce-checkout input[type=text],
    html body .woocommerce-checkout input[type=email],
    html body .woocommerce-checkout input[type=tel],
    html body .woocommerce-checkout input[type=password],
    html body .woocommerce-checkout select,
    html body .woocommerce-checkout textarea,
    html body form.checkout input,
    html body form.checkout select,
    html body form.checkout textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* prevents iOS zoom */
        padding: 12px !important;
        margin: 0 !important;
    }
    /* Checkout columns — stack vertically */
    html body .woocommerce-checkout .col-1,
    html body .woocommerce-checkout .col-2,
    html body .woocommerce-checkout #customer_details .col-1,
    html body .woocommerce-checkout #customer_details .col-2 {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box !important;
    }
    /* Order review table */
    html body .woocommerce-checkout .shop_table,
    html body #order_review .shop_table {
        width: 100% !important;
        overflow-x: auto !important;
    }
}

/* ── MOBILE LOGO — Compact header, right-sized logo ── */
@media (max-width: 991px) {

    /* Logo image: compact on mobile */
    .site-header .custom-logo,
    .custom-logo-link img,
    .site-branding img.custom-logo,
    #masthead img.custom-logo {
        max-height: 26px !important;
        height: 26px !important;
        width: auto !important;
        display: block !important;
    }

    /* custom-logo-link: no extra padding */
    .custom-logo-link,
    .site-branding .custom-logo-link {
        padding: 0 !important;
        margin: 0 auto !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* header: slim 42px height */
    .site-header,
    #masthead {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* site-branding row: 42px */
    .site-branding,
    .site-branding.d-flex {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 10px !important;
        align-items: center !important;
        overflow: visible !important;
    }
    
    /* logo-link: no padding */
    .custom-logo-link,
    .site-branding .custom-logo-link {
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hide the desktop hamburger-menu dropdown on mobile completely */
    .navbar-hamburger,
    .navbar-hamburger-main,
    .head-hamburger-menu {
        display: none !important;
    }

    /* Mobile Bootstrap toggler stays visible */
    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        padding: 8px !important;
        font-size: 18px !important;
        border: none !important;
        background: none !important;
        color: #333 !important;
        flex-shrink: 0 !important;
    }

    /* Search icon compact */
    .search-icon,
    .header-search {
        flex-shrink: 0 !important;
        padding: 8px !important;
    }

    /* Mobile: header not fixed — no body padding needed from track-bar */
    body {
        padding-top: 0 !important;
    }
    body.admin-bar {
        padding-top: 46px !important; /* just WP admin bar */
    }

    /* Site header at top:0 on mobile */
    .site-header,
    #masthead {
        top: 0 !important;
    }
    body.admin-bar .site-header,
    body.admin-bar #masthead {
        top: 46px !important;
    }
}

@media (max-width: 768px) {
   .chat-widget-button {
       bottom: 10px !important;
       right: 10px !important;
       font-size: 14px !important;
       padding: 10px 15px !important;
   }
}

/* 10. PRODUCT GRID HARD OVERRIDE (LAST) */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products,
.products-grid,
.ethnic-products-grid,
.products,
.wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 30px !important;
    grid-auto-flow: row !important;
    flex-wrap: initial !important;
    justify-content: stretch !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product,
.wc-block-grid__product {
    width: 25% !important;
    max-width: 25% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    flex: 0 0 25% !important;
    grid-column: auto !important;
}

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
ul.products li.product img,
.wc-block-grid__product img,
.product-thumbnail-main,
.thumbnail-img img,
.thumbnail-wrap img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    display: block;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    ul.products li.product,
    .wc-block-grid__product {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

/* Force columns inside common product blocks */
.home .woocommerce ul.products,
.home .products,
.home .wc-block-grid__products,
.home .products-grid,
.home .ethnic-products-grid,
.page .woocommerce ul.products,
.page .products,
.page .wc-block-grid__products {
    display: flex !important;
    flex-wrap: wrap !important;
}

.home .woocommerce ul.products li.product,
.home .products li.product,
.home .wc-block-grid__product,
.page .woocommerce ul.products li.product,
.page .products li.product,
.page .wc-block-grid__product {
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
}

@media (max-width: 768px) {
    .home .woocommerce ul.products li.product,
    .home .products li.product,
    .home .wc-block-grid__product,
    .page .woocommerce ul.products li.product,
    .page .products li.product,
    .page .wc-block-grid__product {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products,
    .products-grid,
    .ethnic-products-grid,
    .products,
    .wc-block-grid__products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    ul.products li.product,
    .wc-block-grid__product {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products,
    .products-grid,
    .ethnic-products-grid,
    .products,
    .wc-block-grid__products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 10. PRODUCT GRID FLEX FALLBACK */
body.list-view ul.products,
body.list-view .woocommerce ul.products,
body.list-view .woocommerce-page ul.products,
ul.products.list-view,
ul.products.list-view li.product {
    display: grid !important;
}

body.list-view ul.products,
body.list-view .woocommerce ul.products,
body.list-view .woocommerce-page ul.products,
ul.products.list-view {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 30px !important;
}

@media (max-width: 768px) {
    body.list-view ul.products,
    body.list-view .woocommerce ul.products,
    body.list-view .woocommerce-page ul.products,
    ul.products.list-view {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }
}

body.list-view ul.products li.product,
ul.products.list-view li.product,
.home ul.products li.product,
.home .products li.product,
.home .wc-block-grid__product {
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
}

@media (max-width: 768px) {
    body.list-view ul.products li.product,
    ul.products.list-view li.product,
    .home ul.products li.product,
    .home .products li.product,
    .home .wc-block-grid__product {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}

/* duplicate product grid flex block removed -- rules kept in section 10 above */

/* 10. FORCE VISIBILITY - NUCLEAR OPTION */
.user-account-panel *,
.user-account-panel-wrapper * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* 11. REMOVE ANY CONFLICTING POSITIONING */
.user-account-panel-wrapper[style*="position: fixed"] {
    position: static !important;
}

/* ── ADMIN BAR OFFSETS (logged-in users only) ─────────────────────────────
   WP admin bar = 32px on desktop, 46px on mobile < 782px
   All fixed elements need offsetting when admin bar is present.
   ─────────────────────────────────────────────────────────────────────── */
body.admin-bar .site-tagline-bar {
    top: 76px !important; /* 32 admin + 44 gold */
}
body.admin-bar .header-top {
    top: 76px !important; /* 32 admin + 44 gold */
}
body.admin-bar .site-header,
body.admin-bar #masthead {
    top: 108px !important; /* 32 admin + 44 gold + 32 black bar */
}

@media screen and (max-width: 782px) {
    /* Mobile admin bar = 46px */
    body.admin-bar .top-messages-banner {
        top: 46px !important;
    }
    body.admin-bar .site-tagline-bar {
        top: 90px !important; /* 46 + 44 */
    }
    body.admin-bar .header-top {
        top: 90px !important;
    }
    body.admin-bar .site-header,
    body.admin-bar #masthead {
        top: 122px !important; /* 46 + 44 + 32 */
    }
    body.admin-bar {
        padding-top: 185px !important; /* 46 + 44 + 32 + ~63 header */
    }
}

/* ── PREVENT SCROLL-HIDE: header always visible ───────────────────────────
   The theme JS sets #headerspacing style.top = "-150px" on scroll down.
   Override this with !important so header stays fixed and visible always.
   ─────────────────────────────────────────────────────────────────────── */
#headerspacing {
    top: 0 !important;
    position: relative !important;
}

.site-header,
#masthead {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Ensure nav never hides on scroll */
body.scrolled .main-navigation,
body.scrolled .primary-menu,
body.scrolled #site-navigation,
body.scrolled .head-hamburger-menu,
body.scrolled .header-logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── Sticky/scrolled state: logo stays properly sized ── */
html body.scrolled .header-logo img,
html body.scrolled .header-logo a img,
html body.scrolled .custom-logo,
html body.scrolled .custom-logo-link img,
html body.scrolled .header_style .site-branding .site-logo img,
html body .sticky .custom-logo,
html body .sticky .custom-logo-link img,
html body .sticky .header-logo img,
html body .sticky .header-logo a img,
html body .header-sticky.sticky .custom-logo,
html body .header-sticky.sticky .custom-logo-link img,
html body .header-sticky.sticky .header-logo img,
html body .header-sticky.sticky .header_style .site-branding .site-logo img {
    max-width: 130px !important;
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ============================================================
   SCROLL / STICKY OVERRIDES - Header always visible
   ============================================================ */

/* Theme adds .sticky class on scroll - override to keep everything visible */
.sticky .header-top,
.header-sticky.sticky .header-top,
#headerspacing.sticky .header-top {
    display: flex !important;
}

/* Ensure header-top stays at correct fixed position regardless of sticky class */
.sticky .site-header,
.sticky #masthead,
.header-sticky.sticky .site-header,
.header-sticky.sticky #masthead {
    position: fixed !important;
    top: 76px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

body.admin-bar .sticky .site-header,
body.admin-bar .sticky #masthead,
body.admin-bar .header-sticky.sticky .site-header,
body.admin-bar .header-sticky.sticky #masthead {
    top: 108px !important;
}

/* Ensure nav, logo, hamburger are always visible on scroll */
.sticky .main-navigation,
.sticky .head-hamburger-menu,
.sticky .header-logo,
.sticky #site-navigation,
.header-sticky.sticky .main-navigation,
.header-sticky.sticky .head-hamburger-menu,
.header-sticky.sticky .header-logo {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* #headerspacing should never move off screen */
#headerspacing {
    top: 0 !important;
    transform: none !important;
    transition: none !important;
}

/* =====================================================
   MOBILE LAYOUT FIXES — Compact, No Gaps
   ===================================================== */
@media (max-width: 768px) {

    /* Hide black tagline bar on mobile - saves 32px */
    .site-tagline-bar,
    .header-top {
        display: none !important;
    }

    /* Gold banner on mobile — SHOW it (tips + offers) */
    .top-messages-banner {
        display: flex !important;
        position: relative !important;
        top: auto !important;
        min-height: 44px !important;
        height: auto !important;
    }

    /* Very small screens: no fixed header, no extra padding */
    body {
        padding-top: 0 !important;
    }
    body.admin-bar {
        padding-top: 46px !important;
    }

    /* Site header sits at top:0 on mobile (no bars above) */
    .site-header,
    #masthead {
        top: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.admin-bar .site-header,
    body.admin-bar #masthead {
        top: 46px !important;
    }

    /* #headerspacing stays visible */
    #headerspacing {
        top: 0 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Remove all large section top/bottom padding on mobile */
    .new-arrivals-section,
    .customer-favorites-section,
    .why-choose-section,
    .featured-categories-wow,
    section[style*="padding: 80px"],
    section[style*="padding: 50px"],
    section[style*="padding: 40px"] {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* Section headers compact on mobile */
    .section-header h2,
    .feminine-heading {
        font-size: 1.3rem !important;
        margin-bottom: 4px !important;
    }

    /* Category grid - 2 columns on mobile */
    .categories-grid-wow {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .category-card .category-image {
        height: 180px !important;
    }
    .category-card .category-image h3 {
        font-size: 1.2rem !important;
    }

    /* Feature cards - 2 columns on mobile */
    .why-choose-section > .container > div[style*="grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Offer cards - full width stack on mobile */
    .special-offers-section .col-md-6 {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* Remove stray particle containers */
    .hologram-canvas,
    .holo-emoji,
    .starburst-particle,
    .holo-firework,
    .holo-birds,
    .holo-marriage-procession {
        display: none !important;
        visibility: hidden !important;
    }

    /* Announcement bar compact */
    .announcement-bar {
        font-size: 11px !important;
        padding: 6px 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* =====================================================
   MOBILE PRODUCT CARDS — Compact action buttons
   MOB ONLY - desktop unchanged
   ===================================================== */
@media (max-width: 991px) {

    /* Product thumbnail - ensure image fills properly */
    .product .thumbnail-wrap,
    .wc-block-grid__product .thumbnail-wrap,
    ul.products li.product .thumbnail-wrap {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Product image - proper height on mobile */
    .product .thumbnail-wrap img,
    .wc-block-grid__product img,
    ul.products li.product img {
        width: 100% !important;
        height: 160px !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Action button wrap - move BELOW image, not overlaid */
    .product .product-button-wrap,
    ul.products li.product .product-button-wrap {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        background: #fff !important;
        padding: 4px 0 !important;
        gap: 4px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        border-top: 1px solid #f0e8d0 !important;
        height: auto !important;
    }

    /* Each action button - compact 32x32 */
    .product .product-button-wrap .btn-hv a,
    .product .product-button-wrap .cart-wrap a,
    ul.products li.product .product-button-wrap .btn-hv a {
        height: 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8f5f0 !important;
        border-radius: 6px !important;
        border: 1px solid #e8dcc8 !important;
    }

    /* btn-hv block itself compact */
    .product .product-button-wrap .btn-hv {
        float: none !important;
        height: auto !important;
        width: auto !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* Quick view eye icon - hide on mobile (clutters UI) */
    .product .product-button-wrap .quickview.btn-hv,
    .product a.yith-wcqv-button,
    .product .button.yith-wcqv-button {
        display: none !important;
    }

    /* SVG icons size */
    .product .product-button-wrap svg,
    .product .product-button-wrap .btn-hv svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Remove dark overlay/backdrop on action area */
    .product .product-button-wrap::before,
    .product .product-button-wrap::after {
        display: none !important;
    }

    /* Hide the extra quick-view button below thumbnail */
    .product .thumbnail-wrap .quickview-wrap,
    .product .thumbnail-wrap .yith-wcqv-button-wrap {
        display: none !important;
    }

    /* Product title compact on mobile */
    ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product h2 {
        font-size: 12px !important;
        padding: 6px 8px 2px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Price compact on mobile */
    ul.products li.product .price {
        font-size: 12px !important;
        padding: 0 8px 6px !important;
        margin: 0 !important;
    }
}

/* ============================================
   SHOP PAGE - 4 col desktop, 2 col mobile
   The storegrid theme uses section.product (NOT li.product)
   with float-based layout. Width is set in responsive.css at min-width:992px.
   We override BOTH the float layout AND the width using higher specificity.
   ============================================ */

/* STEP 1: The products .row div inside .products - reset its Bootstrap flex */
.woocommerce-active .site-main .products .row,
.woocommerce-active .site-main .products.grid-view .row {
    display: contents !important; /* Make .row transparent to grid */
}

/* STEP 2: Force CSS grid on .products container */
.woocommerce-active .site-main .products.columns-4,
.woocommerce-active .site-main .products.grid-view.columns-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* STEP 3: Reset section.product - the actual product element used by storegrid */
@media (min-width: 992px) {
    .woocommerce-active .site-main .products.columns-4 section.product,
    .woocommerce-active .site-main .products.grid-view.columns-4 section.product {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* STEP 4: Mobile - 2 columns */
@media (max-width: 991px) {
    .woocommerce-active .site-main .products.columns-4,
    .woocommerce-active .site-main .products.grid-view.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .woocommerce-active .site-main .products.columns-4 section.product,
    .woocommerce-active .site-main .products.grid-view.columns-4 section.product {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
}

/* STEP 5: Fix sidebar layout on shop page */
.woocommerce-page .woocommerce {
    display: flex !important;
    gap: 24px !important;
    align-items: flex-start !important;
    width: 100% !important;
}
.woocommerce-page .content-area {
    flex: 1 !important;
    min-width: 0 !important;
}
.woocommerce-page .widget-area {
    width: 220px !important;
    flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   WHITE-ON-WHITE TEXT FIXES — Global contrast enforcement
   Ensures all text on light backgrounds is dark, and all text
   on dark/gold backgrounds is white. No invisible text anywhere.
   ═══════════════════════════════════════════════════════════════ */

/* ── Product titles & prices on white cards ── */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.product-title, .woocommerce-loop-product__title {
    color: #1a1a1a !important;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce .price .amount,
.price ins .amount {
    color: #D4AF37 !important;
}
.woocommerce ul.products li.product .price del .amount {
    color: #999 !important;
    opacity: 0.7;
}

/* ── Shop page: category names under category tiles ── */
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category h3,
.product-category .woocommerce-loop-category__title {
    color: #1a1a1a !important;
}

/* ── Single product page ── */
.product_title, h1.product_title {
    color: #1a1a1a !important;
}
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
    color: #444 !important;
}
.woocommerce-tabs .wc-tab p,
.woocommerce-tabs .panel p,
.woocommerce-tabs .panel li {
    color: #444 !important;
}

/* ── Cart & Checkout: labels dark on white ── */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th,
.woocommerce-checkout form .form-row label,
.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.shop_table td, .shop_table th {
    color: #1a1a1a !important;
}
.woocommerce-cart table.cart .product-name a,
.woocommerce-checkout .product-name {
    color: #1a1a1a !important;
}

/* ── Order confirmation / success page ── */
.woocommerce-order-received h2,
.woocommerce-order-received p,
.woocommerce-thankyou-order-details li,
.woocommerce-order-overview li,
.woocommerce-order-overview li strong {
    color: #1a1a1a !important;
}

/* ── My Account page ── */
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content td,
.woocommerce-MyAccount-content th,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content {
    color: #1a1a1a !important;
}
.woocommerce-MyAccount-navigation ul li a {
    color: #444 !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    color: #D4AF37 !important;
    font-weight: 700 !important;
}

/* ── Sidebar widgets on white background ── */
.widget-area .widget h2,
.widget-area .widget h3,
.widget-area .widget .widgettitle,
.widget-area .widget ul li a,
.widget-area .widget p {
    color: #1a1a1a !important;
}

/* ══════════════════════════════════════════════════════
   DESKTOP NAV — dark text on white/light header background
   The theme uses navbar-light which makes links #555
   We force #1a1a1a so they're clearly visible
   ══════════════════════════════════════════════════════ */
html body #site-navigation .nav-menu > li > a,
html body #site-navigation .navbar-nav > li > a,
html body .main-navigation .nav-menu li a,
html body .main-navigation .navbar-nav li a,
html body #primary-menu li a,
html body .main-navigation ul li a,
html body .site-header .main-navigation a,
html body #site-navigation ul li a {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    transition: color 0.2s ease !important;
}
html body #site-navigation .nav-menu > li > a:hover,
html body #site-navigation .navbar-nav > li > a:hover,
html body .main-navigation ul li a:hover,
html body #site-navigation ul li a:hover,
html body #primary-menu li a:hover {
    color: #D4AF37 !important;
}
/* Active/current menu item */
html body .main-navigation ul li.current-menu-item > a,
html body #site-navigation .nav-menu li.current-menu-item > a,
html body #primary-menu li.current-menu-item > a,
html body .main-navigation ul li.current_page_item > a {
    color: #D4AF37 !important;
    font-weight: 700 !important;
}
/* Dropdown submenu — white bg, dark text */
html body .main-navigation ul ul,
html body #site-navigation .nav-menu .sub-menu,
html body #primary-menu .sub-menu {
    background: #fff !important;
    border: 1px solid #f0e8d8 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}
html body .main-navigation ul ul li a,
html body #site-navigation .sub-menu li a,
html body #primary-menu .sub-menu li a {
    color: #1a1a1a !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid #f5f0e8 !important;
}
html body .main-navigation ul ul li a:hover,
html body #site-navigation .sub-menu li a:hover,
html body #primary-menu .sub-menu li a:hover {
    color: #D4AF37 !important;
    background: #fdf8ef !important;
}

/* ══════════════════════════════════════════════════════
   MOBILE HAMBURGER MENU — dark background, gold text
   Fixes the white-on-white slide-out panel
   ══════════════════════════════════════════════════════ */

/* Bootstrap collapse mobile menu panel */
html body #navbarSupportedContent,
html body .navbar-collapse,
html body .navbar-nav.d-lg-none,
html body #site-navigation .navbar-collapse {
    background: #0a0a0a !important;
    border-radius: 0 0 12px 12px !important;
    padding: 8px 0 16px !important;
    border-top: 2px solid #D4AF37 !important;
}
html body #navbarSupportedContent .nav-menu li a,
html body .navbar-collapse .nav-menu li a,
html body #navbarSupportedContent .navbar-nav li a,
html body .navbar-collapse .navbar-nav li a {
    color: #fff !important;
    padding: 12px 20px !important;
    display: block !important;
    border-bottom: 1px solid rgba(212,175,55,0.15) !important;
    font-weight: 600 !important;
}
html body #navbarSupportedContent .nav-menu li a:hover,
html body .navbar-collapse .navbar-nav li a:hover {
    color: #D4AF37 !important;
    background: rgba(212,175,55,0.08) !important;
}
/* Hamburger icon color — make it visible */
html body .navbar-toggler {
    border-color: #D4AF37 !important;
    color: #1a1a1a !important;
    padding: 6px 10px !important;
}
html body .navbar-toggler-icon,
html body .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23D4AF37' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
html body .navbar-toggler i.fa-bars,
html body .navbar-toggler .fas.fa-bars {
    color: #D4AF37 !important;
    font-size: 20px !important;
}

/* ── Hamburger slide-out sidebar panel (desktop left panel) ── */
html body .navbar-hamburger,
html body .navbar-hamburger-main,
html body .head-hamburger-menu .navbar-hamburger {
    background: #0a0a0a !important;
    border-right: 2px solid #D4AF37 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35) !important;
}
html body .navbar-hamburger .hamburger-nav li a,
html body .navbar-hamburger-main .hamburger-nav li a,
html body #hamburger-menu li a {
    color: #fff !important;
    padding: 13px 22px !important;
    display: block !important;
    border-bottom: 1px solid rgba(212,175,55,0.15) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}
html body .navbar-hamburger .hamburger-nav li a:hover,
html body #hamburger-menu li a:hover {
    color: #D4AF37 !important;
    background: rgba(212,175,55,0.08) !important;
    padding-left: 28px !important;
    transition: all 0.2s ease !important;
}
/* Close button */
html body .hamburger-close,
html body .hamburger-close-wrap {
    background: #D4AF37 !important;
    color: #0a0a0a !important;
    border-radius: 50% !important;
}
/* Track Order menu item — gold highlight */
html body #hamburger-menu li a[href*="track"],
html body .hamburger-nav li a[href*="track"],
html body .nav-menu li a[href*="track"],
html body #primary-menu li a[href*="track"] {
    color: #D4AF37 !important;
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — Complete dark theme overhaul
   Dark bg #0a0a0a, light text #d0d0d0, gold accents #D4AF37
   Covers: address, phone, email, quick links, policy links,
   track order, my account, all widget text — NOTHING invisible
   ══════════════════════════════════════════════════════════════ */

/* ── Footer container backgrounds ── */
html body #colophon,
html body .site-footer,
html body footer.site-footer,
html body footer.footer-style-2,
html body footer.footer-style-1,
html body .main-footer,
html body .footer-widget,
html body .widget-wrap,
html body .main-footer.footer-widget {
    background: #0a0a0a !important;
    background-color: #0a0a0a !important;
    border-top: 2px solid #D4AF37 !important;
}

/* ── Widget titles / headings ── */
html body .site-footer .widget-title,
html body .site-footer .widgettitle,
html body .footer-widget .widget-title,
html body .footer-widget .widgettitle,
html body .main-footer .widget-title,
html body .main-footer h2,
html body .main-footer h3,
html body .main-footer h4,
html body .site-footer h2,
html body .site-footer h3,
html body .site-footer h4 {
    color: #D4AF37 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(212,175,55,0.25) !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
}
/* Remove double underline pseudo element */
html body .site-footer .widget-title::before,
html body .site-footer .widget-title::after,
html body .footer-widget .widget-title::before,
html body .footer-widget .widget-title::after {
    display: none !important;
}

/* ── All paragraph text ── */
html body .site-footer p,
html body .footer-widget p,
html body .main-footer p,
html body .site-footer .textwidget p,
html body .site-footer address,
html body .footer-widget address {
    color: #b0b0b0 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

/* ── All list items & links ── */
html body .site-footer ul li,
html body .footer-widget ul li,
html body .main-footer ul li,
html body .site-footer ul li a,
html body .footer-widget ul li a,
html body .main-footer ul li a,
html body .site-footer a,
html body .footer-widget a,
html body .main-footer a {
    color: #b0b0b0 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
    line-height: 1.8 !important;
}
html body .site-footer ul li a:hover,
html body .footer-widget ul li a:hover,
html body .main-footer ul li a:hover,
html body .site-footer a:hover,
html body .footer-widget a:hover {
    color: #D4AF37 !important;
    padding-left: 4px !important;
}

/* ── List bullets — replace with gold arrow ── */
html body .site-footer ul,
html body .footer-widget ul,
html body .main-footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body .site-footer ul li::before,
html body .footer-widget ul li::before,
html body .main-footer ul li::before {
    content: '›' !important;
    color: #D4AF37 !important;
    margin-right: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* ── Track Order link — gold highlight ── */
html body .site-footer ul li a[href*="track"],
html body .footer-widget ul li a[href*="track"],
html body .main-footer ul li a[href*="track"] {
    color: #D4AF37 !important;
    font-weight: 700 !important;
}

/* ── Contact info (address, phone, email) ── */
html body .site-footer .contact-info,
html body .site-footer .contact-info li,
html body .site-footer .contact-info a,
html body .footer-widget .contact-info li,
html body .footer-widget .contact-info a {
    color: #b0b0b0 !important;
    font-size: 13px !important;
}
html body .site-footer .contact-info a:hover {
    color: #D4AF37 !important;
}

/* ── Footer bottom bar / copyright ── */
html body .footer-bottom,
html body .site-info,
html body .footer-bottom-wrap,
html body .footer-copyright,
html body #footer-bottom,
html body .site-footer .footer-bottom {
    background: #050505 !important;
    border-top: 1px solid rgba(212,175,55,0.2) !important;
    padding: 14px 0 !important;
}
html body .footer-bottom p,
html body .footer-bottom span,
html body .footer-bottom a,
html body .site-info p,
html body .site-info a,
html body .footer-copyright p,
html body .footer-copyright a {
    color: #666 !important;
    font-size: 12px !important;
}
html body .footer-bottom a:hover,
html body .site-info a:hover {
    color: #D4AF37 !important;
}

/* ── Social icons in footer ── */
html body .site-footer .social-icons a,
html body .footer-widget .social-icons a,
html body .site-footer .social-media a,
html body .footer-widget .social-media a {
    color: #888 !important;
    font-size: 16px !important;
    margin-right: 10px !important;
    transition: color 0.2s ease !important;
}
html body .site-footer .social-icons a:hover,
html body .footer-widget .social-icons a:hover {
    color: #D4AF37 !important;
}

/* ── Newsletter widget in footer ── */
html body .site-footer .newsletter-wrap input,
html body .footer-widget .news_letter input,
html body .site-footer input[type="email"] {
    background: #1a1a1a !important;
    border: 1px solid rgba(212,175,55,0.3) !important;
    color: #fff !important;
    border-radius: 6px 0 0 6px !important;
}
html body .site-footer input[type="email"]::placeholder {
    color: #666 !important;
}
html body .site-footer .newsletter-wrap button,
html body .footer-widget .news_letter button,
html body .site-footer .news_letter button {
    background: #D4AF37 !important;
    color: #0a0a0a !important;
    border: none !important;
    font-weight: 700 !important;
}

/* ── About text widget ── */
html body .site-footer .textwidget,
html body .footer-widget .textwidget {
    color: #b0b0b0 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

/* ── WooCommerce footer menu items ── */
html body .site-footer .nav-menu li a,
html body .footer-widget .nav-menu li a {
    color: #b0b0b0 !important;
}
html body .site-footer .nav-menu li a:hover {
    color: #D4AF37 !important;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT ACTION BUTTONS — Wishlist ♡ · Compare ⇄ · Quickview 👁
   The SVG icons use stroke="currentColor" so parent color = icon color
   Buttons are inside .wishlist.btn-hv / .compare.btn-hv / .quickview.btn-hv
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   PRODUCT ACTION BUTTONS — Exact HTML structure from live site:
   1. .yith-wcwl-add-to-wishlist → a.add_to_wishlist (SVG heart)
   2. .compare.btn-hv → .compare-button → a.compare.button (text)
   3. .quickview.btn-hv → a.yith-wcqv-button (text "Quick View")
   ══════════════════════════════════════════════════════════════════ */

/* ── Wishlist button ─────────────────────────────────────────── */
html body .woocommerce .product .yith-wcwl-add-to-wishlist,
html body .woocommerce .product .yith-wcwl-add-to-wishlist .yith-wcwl-add-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .woocommerce .product .yith-wcwl-add-to-wishlist a.add_to_wishlist,
html body .woocommerce .product .yith-wcwl-add-button a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: #fff !important;
    border: 1.5px solid #e0d5c5 !important;
    border-radius: 50% !important;
    color: #c0392b !important;        /* red heart */
    text-decoration: none !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html body .woocommerce .product .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover,
html body .woocommerce .product .yith-wcwl-add-button a:hover {
    background: #fff5f5 !important;
    border-color: #c0392b !important;
    color: #c0392b !important;
}
/* Wishlist SVG — red heart */
html body .woocommerce .product .yith-wcwl-add-to-wishlist svg,
html body .woocommerce .product .yith-wcwl-add-to-wishlist .yith-wcwl-icon-svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #c0392b !important;
    fill: none !important;
    stroke-width: 1.5 !important;
    display: block !important;
}
html body .woocommerce .product .yith-wcwl-add-to-wishlist a span {
    display: none !important; /* hide "Add to wishlist" text */
}

/* ── Compare button ──────────────────────────────────────────── */
html body .woocommerce .product .compare.btn-hv,
html body .woocommerce .product .compare-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .woocommerce .product .compare.btn-hv a.compare,
html body .woocommerce .product .compare-button a.compare {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: #fff !important;
    border: 1.5px solid #e0d5c5 !important;
    border-radius: 50% !important;
    color: transparent !important;    /* hide text */
    font-size: 0 !important;
    text-decoration: none !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}
/* Compare icon via ::before — ⇄ arrows */
html body .woocommerce .product .compare.btn-hv a.compare::before,
html body .woocommerce .product .compare-button a.compare::before {
    content: '⇄' !important;
    font-size: 16px !important;
    color: #1a6b8a !important;        /* blue compare */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-style: normal !important;
    font-family: sans-serif !important;
}
html body .woocommerce .product .compare.btn-hv a.compare:hover,
html body .woocommerce .product .compare-button a.compare:hover {
    background: #f0f8ff !important;
    border-color: #1a6b8a !important;
}
html body .woocommerce .product .compare.btn-hv a.compare:hover::before,
html body .woocommerce .product .compare-button a.compare:hover::before {
    color: #1a6b8a !important;
}

/* ── Quickview button ────────────────────────────────────────── */
html body .woocommerce .product .quickview.btn-hv a.yith-wcqv-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: #fff !important;
    border: 1.5px solid #e0d5c5 !important;
    border-radius: 50% !important;
    color: transparent !important;    /* hide "Quick View" text */
    font-size: 0 !important;
    text-decoration: none !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}
/* Quickview icon via ::before — 👁 eye */
html body .woocommerce .product .quickview.btn-hv a.yith-wcqv-button::before {
    content: '👁' !important;
    font-size: 14px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
html body .woocommerce .product .quickview.btn-hv a.yith-wcqv-button:hover {
    background: #fffbf0 !important;
    border-color: #D4AF37 !important;
}

/* ── Product button wrap — flex row, centered ── */
html body .woocommerce .product .product-button-hv {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

/* ══════════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE — wishlist + compare buttons
   ══════════════════════════════════════════════════════════════════ */
html body .single-product .yith-wcwl-add-to-wishlist a.add_to_wishlist,
html body .single-product .add_to_wishlist {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #c0392b !important;
    background: #fff5f5 !important;
    border: 1.5px solid #e0d5c5 !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html body .single-product .yith-wcwl-add-to-wishlist svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #c0392b !important;
    fill: none !important;
}
html body .single-product .yith-wcwl-add-to-wishlist a:hover {
    background: #ffe8e8 !important;
    border-color: #c0392b !important;
}
html body .single-product .wooscp-btn,
html body .single-product .compare-button a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1a6b8a !important;
    background: #f0f8ff !important;
    border: 1.5px solid #b8d4e0 !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Breadcrumbs ── */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
    color: #666 !important;
}

/* ── Review / comment text ── */
.comment-text p,
.woocommerce-Reviews .comment-text p,
.review-text {
    color: #444 !important;
}

/* ── Form inputs: placeholder and input text ── */
.woocommerce form input,
.woocommerce form textarea,
.woocommerce form select,
input[type="text"], input[type="email"],
input[type="tel"], input[type="password"],
textarea, select {
    color: #1a1a1a !important;
    background-color: #fff !important;
}
input::placeholder, textarea::placeholder {
    color: #aaa !important;
}

/* ── Notices / alerts ── */
.woocommerce-message,
.woocommerce-info {
    color: #1a1a1a !important;
    background: #f8f5f0 !important;
    border-top-color: #D4AF37 !important;
}
.woocommerce-error {
    color: #1a1a1a !important;
    background: #fff5f5 !important;
    border-top-color: #e53e3e !important;
}

/* ── Top banner text (stays white on dark bar) ── */
.top-messages-banner,
.top-messages-banner span,
.top-messages-banner a,
.site-tagline-bar,
.site-tagline-bar span {
    color: #fff !important;
}

/* ── User panel dropdown items ── */
.user-dropdown-menu a,
.user-account-panel .dropdown-menu a,
.header-user-panel .dropdown-item {
    color: #1a1a1a !important;
}
.user-dropdown-menu a:hover,
.user-account-panel .dropdown-menu a:hover {
    color: #D4AF37 !important;
    background: #f8f5f0 !important;
}

/* ══════════════════════════════════════════════════════════════
   SHOP PAGE — New Arrivals divider banner above product grid
   ══════════════════════════════════════════════════════════════ */
html body .woocommerce-shop .woocommerce-notices-wrapper + *,
html body .woocommerce-shop ul.products,
html body .shop-page-products {
    position: relative !important;
}
/* New Arrivals banner injected via ::before on the products grid */
html body .woocommerce-shop .woocommerce > ul.products::before,
html body .woocommerce-shop .woocommerce-page ul.products::before {
    content: '✦ New Arrivals ✦' !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: #0a0a0a !important;
    color: #D4AF37 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    padding: 10px 0 !important;
    margin-bottom: 24px !important;
    border-top: 2px solid #D4AF37 !important;
    border-bottom: 1px solid rgba(212,175,55,0.3) !important;
    border-radius: 0 !important;
}

/* ── Sale badge (red bg → white text ✓ already correct) ── */
.woocommerce span.onsale {
    color: #fff !important;
    background-color: #e53e3e !important;
}

/* ── Indian section headings on cream background ── */
.section-title,
.section-heading,
.featured-section h2,
.product-section-title {
    color: #1a1a1a !important;
}

/* ── Prevent any stray white-on-white combinations ── */
body .bg-white p, body .bg-white span, body .bg-white h1,
body .bg-white h2, body .bg-white h3, body .bg-white h4,
body .bg-white li, body .bg-white a:not(.btn):not(.button),
body [style*="background: white"] p,
body [style*="background:#fff"] p,
body [style*="background: #fff"] p {
    color: #1a1a1a !important;
}