/* ============================================================
   APEXA JEWELS — Navy Blue, Gold & White Premium Theme
   CSS Override Stylesheet (loaded after app.css)
   Palette: #182841 (Dark Navy) | #b69e5e (Gold) | #FFFFFF (White)
   ============================================================ */

/* -----------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ----------------------------------------------- */
:root {
    /* ── Backgrounds (Brand Logo Navy: #0c1f30) ── */
    /* --bg-primary:   #050a14; */
    --bg-primary:   #0c1f30;
    --bg-secondary: #12283d;
    --bg-card:      #18314a;
    --bg-elevated:  #1e3a57;
    --bg-input:     #244364;

    /* ── Gold Accent Palette (Brand Logo Gold: #D4Af37) ── */
    /* --gold-primary:  #c5a059; */
    --gold-primary:  #D4Af37;
    --gold-light:    #E6C65A;
    --gold-bright:   #FFD766;
    --gold-muted:    #A88F2A;
    --gold-glow:     rgba(212, 175, 55, 0.25);
    /* --gold-gradient: linear-gradient(135deg, #8e7037 0%, #c5a059 50%, #f2d48a 100%); */
    --gold-gradient: linear-gradient(135deg, #A88F2A 0%, #D4AF37 50%, #FFD766 100%);
    /* --gold-gradient-hover: linear-gradient(135deg, #f2d48a 0%, #c5a059 50%, #8e7037 100%); */
    --gold-gradient-hover: linear-gradient(135deg, #FFD766 0%, #D4AF37 50%, #A88F2A 100%);

    /* ── White Complementary Accent ── */
    --white:         #FFFFFF;
    --white-subtle:  rgba(255, 255, 255, 0.06);
    --white-medium:  rgba(255, 255, 255, 0.12);
    --white-border:  rgba(255, 255, 255, 0.10);

    /* ── Text — White-based for crisp readability on navy ── */
    --text-primary:   #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.78);
    --text-muted:     rgba(255, 255, 255, 0.45);
    --text-on-gold:   #182841;   /* Brand navy on gold backgrounds */

    /* ── Borders — White-transparency based ── */
    --border-subtle:     rgba(255, 255, 255, 0.08);
    --border-medium:     rgba(255, 255, 255, 0.15);
    /* --border-gold:       rgba(197, 160, 89, 0.35); */
    --border-gold:       rgba(212, 175, 55, 0.35);
    /* --border-gold-solid: #c5a059; */
    --border-gold-solid: #D4Af37;

    /* ── Shadows ── */
    --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.45);
    /* --shadow-gold:  0 4px 20px rgba(197, 160, 89, 0.20); */
    --shadow-gold:  0 4px 20px rgba(212, 175, 55, 0.20);
    /* --shadow-hover: 0 8px 40px rgba(197, 160, 89, 0.30); */
    --shadow-hover: 0 8px 40px rgba(212, 175, 55, 0.30);
    --shadow-white: 0 4px 20px rgba(255, 255, 255, 0.05);

    /* ── Typography ── */
    --font-heading: 'Playfair Display', 'Cormorant Garamond', serif;
    --font-body:    'Inter', 'Lato', sans-serif;

    /* ── Transitions ── */
    --transition-fast:   0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow:   0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* -----------------------------------------------
   2. GLOBAL BASE STYLES
   ----------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body.home {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

html {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* Selection */
::selection {
    background: var(--gold-primary);
    color: var(--text-on-gold);
}

::-moz-selection {
    background: var(--gold-primary);
    color: var(--text-on-gold);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--gold-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-primary);
}

/* Links */
a {
    color: var(--text-secondary) !important;
    transition: color var(--transition-fast) !important;
}

a:hover {
    color: var(--gold-primary) !important;
    text-decoration: none !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--text-primary) !important;
}

p {
    color: var(--text-secondary) !important;
}

/* -----------------------------------------------
   3. HEADER — Desktop
   ----------------------------------------------- */
#site-header,
.site-header,
.header-v3 {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* .header-desktop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background-color: var(--bg-primary) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

@media (min-width: 992px) {
    #page {
        padding-top: 150px !important;
    }
} */

.header-desktop .header-top {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 10px 0 !important;
}

.header-desktop .header-top .section-padding {
    padding: 0 !important;
}

/* Logo area */
/* .site-logo img {
    filter: brightness(1.1);
    transition: filter var(--transition-fast);
} */

/* .site-logo img:hover {
    filter: brightness(1.3);
} */

/* Search bar */
.header-desktop .search {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-medium) !important;
    border-radius: 30px !important; /* Pill shaped for premium feel */
    background: rgba(255, 255, 255, 0.03) !important;
    overflow: hidden;
    transition: all var(--transition-smooth) !important;
    max-width: 320px;
    margin-top: 5px;
    border: 1px solid rgba(201, 168, 76, 0.2) !important;
}

.header-desktop .search:focus-within {
    border-color: var(--gold-primary) !important;
    background: var(--white-subtle) !important;
    box-shadow: 0 0 15px var(--gold-glow) !important;
}

.header-desktop .searchTerm {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    padding: 10px 16px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    letter-spacing: 0.5px;
}

.header-desktop .searchTerm::placeholder {
    color: var(--text-muted) !important;
    font-style: italic;
}

.header-desktop .searchButton {
    background: transparent !important;
    border: none !important;
    color: var(--gold-primary) !important;
    padding: 10px 18px !important;
    cursor: pointer;
    transition: all var(--transition-fast) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-desktop .searchButton:hover {
    color: var(--gold-bright) !important;
    transform: scale(1.1);
}

/* Fix for any potential row overflow */
.row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.section-container {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Search results dropdown */
.searchres {
    background: var(--bg-card) !important;
    /* border: 1px solid var(--border-medium) !important; */
    box-shadow: var(--shadow-card) !important;
}

.searchres li {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.searchres li:hover {
    background: var(--bg-elevated) !important;
}

.searchres li a {
    color: var(--text-secondary) !important;
}

.searchres li a:hover {
    color: var(--gold-primary) !important;
}

/* Header icons (user, wishlist) */
.header-page-link{
    right: 30px;
    position: absolute;
}

.header-page-link .icon a,
.header-page-link .wishlist-box a {
    color: var(--text-primary) !important;
    transition: color var(--transition-fast) !important;
}

.header-page-link .icon a:hover,
.header-page-link .wishlist-box a:hover {
    color: var(--gold-primary) !important;
}

.header-page-link .icon a i,
.header-page-link .wishlist-box a i {
    color: var(--text-primary) !important;
    font-size: 22px;
}

.header-page-link .icon a:hover i,
.header-page-link .wishlist-box a:hover i {
    color: var(--gold-primary) !important;
}

.count-wishlist {
    background: var(--gold-primary) !important;
    color: var(--text-on-gold) !important;
    font-weight: 700 !important;
    font-size: 10px !important;
}

/* -----------------------------------------------
   4. NAVIGATION — Main Menu
   ----------------------------------------------- */
.header-middle {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 0 !important;
}

.header-middle.color-white {
    background-color: var(--bg-secondary) !important;
}

#menu-main-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
}

#menu-main-menu .menu-item > a {
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    padding: 14px 12px !important;
    position: relative !important;
    transition: color var(--transition-fast) !important;
    white-space: nowrap !important;
}

#menu-main-menu .menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--gold-primary);
    transition: width var(--transition-smooth);
}

#menu-main-menu .menu-item > a:hover {
    color: var(--gold-primary) !important;
}

#menu-main-menu .menu-item > a:hover::after {
    width: 60%;
}

/* Sub-menu / Dropdown */
#menu-main-menu .sub-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-medium) !important;
    border-top: 2px solid var(--gold-primary) !important;
    box-shadow: var(--shadow-card) !important;
    min-width: 220px !important;
}

#menu-main-menu .sub-menu li a {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: all var(--transition-fast) !important;
}

#menu-main-menu .sub-menu li a:hover {
    color: var(--gold-primary) !important;
    background: var(--bg-elevated) !important;
    padding-left: 25px !important;
}

#menu-main-menu .sub-menu li:last-child a {
    border-bottom: none !important;
}

/* -----------------------------------------------
   5. HEADER — Mobile
   ----------------------------------------------- */
.header-mobile {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.header-mobile .navbar-toggle {
    border-color: var(--gold-primary) !important;
}

.header-mobile .navbar-toggle::before,
.header-mobile .navbar-toggle::after,
.header-mobile .navbar-toggle span {
    background-color: var(--gold-primary) !important;
}

.header-mobile .cart-icon {
    color: var(--text-primary) !important;
}

.header-mobile .cart-icon:hover {
    color: var(--gold-primary) !important;
}

.header-mobile .cart-icon i {
    color: var(--text-primary) !important;
}

.header-mobile .cart-count {
    background: var(--gold-primary) !important;
    color: var(--text-on-gold) !important;
    font-weight: 700 !important;
}

.header-mobile-fixed {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.header-mobile-fixed .searchTerm {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
}

.header-mobile-fixed .searchTerm::placeholder {
    color: var(--text-muted) !important;
}

.header-mobile-fixed .searchButton {
    background: var(--gold-primary) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
}

/* Mobile menu (mmenu) */
.mm-menu {
    background: var(--bg-primary) !important;
}

.mm-listview > li > a {
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    letter-spacing: 1.5px !important;
}

.mm-menu .mm-listview>li .mm-next:after {
    border-color: var(--text-primary) !important;   
}

.mm-listview > li > a:hover {
    color: var(--gold-primary) !important;
}

.mm-navbar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-medium) !important;
}

.mm-navbar a {
    color: var(--gold-primary) !important;
}

/* -----------------------------------------------
   6. VIDEO / HERO SECTION
   ----------------------------------------------- */
.block-video .video-container {
    position: relative;
}

.block-video .video-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--bg-primary), transparent);
    pointer-events: none;
}

.mobile-video-secion {
    margin-bottom: 0 !important;
}

/* Remove spacing between video and next section */
section.section.mobile-video-secion {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Fix all section spacing and backgrounds */
section.section {
    background-color: var(--bg-primary) !important;
}

.section-padding {
    background-color: transparent !important;
}

.section.section-padding {
    background-color: var(--bg-primary) !important;
}

/* Reduce top/bottom margin on sections */
.m-b-70 {
    margin-bottom: 30px !important;
}

.m-b-0 {
    margin-bottom: 0 !important;
}

.p-t-70 {
    padding-top: 50px !important;
}

.p-b-50 {
    padding-bottom: 30px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

/* More aggressive background overrides to kill gray zones */
[class*="bg-img-"], 
[class*="background-img"],
.section-padding,
/* .section-container, */
/* .block-widget-wrap, */
/* .block-content, */
.site-main,
.main-content,
#content,
#primary {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
}

.bg-img-2, .bg-img-3, .bg-img-5 {
    background-color: var(--bg-secondary) !important;
}

/* Slider section */
.block-sliders {
    position: relative;
}

.slick-dots li button {
    background: var(--text-muted) !important;
    border: none !important;
}

.slick-dots li.slick-active button {
    background: var(--gold-primary) !important;
}

.slick-prev,
.slick-next {
    background: rgba(10, 10, 10, 0.7) !important;
    border: 1px solid var(--border-gold) !important;
    color: var(--gold-primary) !important;
    transition: all var(--transition-fast) !important;
}

.slick-prev:hover,
.slick-next:hover {
    background: var(--gold-primary) !important;
    color: var(--text-on-gold) !important;
    border-color: var(--gold-primary) !important;
}

/* Slick navigation arrows */
.slick-arrow::before,
.slick-arrow::after {
    color: var(--gold-primary) !important;
}

.slick-arrow:hover::before,
.slick-arrow:hover::after {
    color: var(--gold-primary) !important;
}

/* -----------------------------------------------
   7. BRAND SLIDER SECTION
   ----------------------------------------------- */
.block-image.slider {
    background: transparent !important;
    padding: 20px 0 !important;
}

.block-image .item-image {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 4px !important;
    padding: 12px !important;
    margin: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--transition-smooth) !important;
}

.block-image .item-image:hover {
    border-color: var(--border-gold) !important;
    box-shadow: var(--shadow-gold) !important;
}

/* -----------------------------------------------
   7. BRAND LOGOS SECTION
   ----------------------------------------------- */
.block-image .item-image img {
    filter: invert(1) grayscale(1) brightness(1.2) contrast(1.1) !important;
    transition: all var(--transition-smooth) !important;
    max-height: 130px !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 2px !important;
    mix-blend-mode: screen !important; /* Helps with remaining white edges */
}

.block-image .item-image:hover img {
    filter: invert(1) grayscale(0) brightness(1.5) contrast(1.2) !important;
    transform: scale(1.05) !important;
}

/* -----------------------------------------------
   8. CATEGORY SECTION — "Shop By Category"
   ----------------------------------------------- */
.background-img.bg-img-2 {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    position: relative;
}

.background-img.bg-img-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(201, 168, 76, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(201, 168, 76, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* Section titles — "Shop By Category" heading */
.block-title h2,
.block-title .headingtitle {
    font-family: var(--font-heading) !important;
    color: var(--gold-primary) !important;
    font-weight: 400 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    position: relative;
    display: inline-block;
}

.block-title .sub-title {
    color: var(--text-secondary) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    margin-top: 10px !important;
}

/* Category card items */
.item-product-cat-content {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.item-product-cat-content .item-image img {
    transition: transform var(--transition-slow), filter var(--transition-slow) !important;
}

.item-product-cat-content:hover .item-image img {
    transform: scale(1.08);
    filter: brightness(0.75);
}

.product-cat-content-info {
    background: linear-gradient(to top, rgba(10, 10, 10, 0.85), transparent) !important;
}

.product-cat-content-info .item-title a {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    transition: color var(--transition-fast) !important;
}

.product-cat-content-info .item-title a:hover {
    color: var(--gold-primary) !important;
}

/* -----------------------------------------------
   9. ABOUT / INTRO SECTION (on home)
   ----------------------------------------------- */
.block-intro {
    background: transparent !important;
}

.block-intro .intro-wrap {
    color: var(--text-secondary) !important;
}

.block-intro .intro-wrap h2,
.block-intro .intro-wrap h3 {
    color: var(--gold-primary) !important;
    font-family: var(--font-heading) !important;
}

.block-intro .intro-wrap p {
    color: var(--text-secondary) !important;
    line-height: 1.8 !important;
}

/* Button — "About Us" */
.button.button-primary,
a.button.button-primary {
    background: var(--gold-gradient) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 14px 36px !important;
    border-radius: 0 !important;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-smooth) !important;
}

.button.button-primary:hover,
a.button.button-primary:hover {
    background: var(--gold-gradient-hover) !important;
    box-shadow: var(--shadow-gold) !important;
    transform: translateY(-1px);
    color: var(--text-on-gold) !important;
}

/* -----------------------------------------------
   10. PRODUCT SECTION — Product Cards
   ----------------------------------------------- */
.background-img.bg-img-3 {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
}

/* Product card wrapper */
.products-list .product-wapper,
.products-list .product-wrapper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 2px !important;
    overflow: hidden;
    transition: all var(--transition-smooth) !important;
    margin-bottom: 20px !important;
}

.products-list .product-wapper:hover,
.products-list .product-wrapper:hover {
    border-color: var(--border-gold) !important;
    box-shadow: var(--shadow-gold) !important;
    transform: translateY(-4px);
}

/* Product image */
.products-list .product-image,
.products-list .products-thumb {
    position: relative !important;
    overflow: hidden;
    background: var(--bg-elevated) !important;
}

.products-list .product-image img {
    transition: transform var(--transition-slow) !important;
}

.products-list .product-wapper:hover .product-image img,
.products-list .product-wrapper:hover .product-image img {
    transform: scale(1.05);
}

/* Product image overlay on hover */
.products-list .product-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(10, 10, 10, 0.3));
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
}

.products-list .product-wapper:hover .product-image::after,
.products-list .product-wrapper:hover .product-image::after {
    opacity: 1;
}

/* Product info (name, price) */
.products-list .product-info,
.products-list .product-content {
    padding: 16px !important;
    background: var(--bg-card) !important;
}

.products-list .product-title a,
.products-list .product-name a,
.products-list .product-info .product-title a {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    font-weight: 400 !important;
    transition: color var(--transition-fast) !important;
}

.products-list .product-title a:hover,
.products-list .product-name a:hover {
    color: var(--gold-primary) !important;
}

/* Product price */
.products-list .price,
.products-list .product-price {
    color: var(--gold-primary) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
}

.products-list .price ins,
.products-list .price span {
    color: var(--gold-primary) !important;
}

.products-list .price .fa-rupee {
    color: var(--gold-primary) !important;
}

/* Product action buttons (wishlist, quick view) */
.products-list .product-button {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    left: auto !important; /* Ensure it stays on the right */
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all var(--transition-smooth) !important;
    z-index: 10 !important;
    width: auto !important;
    bottom: auto !important; /* Reset potential inherited bottom positioning */
}

.products-list .product-wapper:hover .product-button,
.products-list .product-wrapper:hover .product-button {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0);
}

.products-list .btn-wishlist,
.products-list .product-quickview {
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--white-subtle) !important;
    border: 1px solid var(--border-gold) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
    transition: all var(--transition-fast) !important;
    cursor: pointer;
    overflow: hidden;
}

.products-list .btn-wishlist:hover,
.products-list .product-quickview:hover {
    background: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
    transform: scale(1.1);
}

.products-list .product-btn,
.products-list .quickview-button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important; /* Hide text "Add to Wishlist" and "Quick View" */
    color: transparent !important;
}

/* Icons for Wishlist */
.products-list .product-btn::before {
    content: "\f08a"; /* Heart Outlined */
    font-family: "FontAwesome" !important;
    font-size: 16px !important;
    color: var(--gold-primary) !important;
    visibility: visible !important;
}

.products-list .wishlistactive::before {
    content: "\f004" !important; /* Heart Solid */
    color: #ff4d4d !important; /* Red for active wishlist */
}

/* Icons for Quick View */
.products-list .quickview-button i {
    display: none !important; /* Hide existing icon if any */
}

.products-list .quickview-button::before {
    content: "\f06e"; /* Eye icon */
    font-family: "FontAwesome" !important;
    font-size: 16px !important;
    color: var(--gold-primary) !important;
    visibility: visible !important;
}

.products-list .btn-wishlist:hover .product-btn::before,
.products-list .product-quickview:hover .quickview-button::before {
    color: var(--text-on-gold) !important;
}

/* Quick view specific modal trigger link */
.products-list .quickModal {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* "View More" / Secondary button — White background with Gold accent */
.button.button-black,
a.button.button-black,
.button-slider.button-black {
    background: var(--white) !important;
    color: var(--gold-primary) !important;
    border: 1px solid var(--gold-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 12px 36px !important;
    border-radius: 0 !important;
    transition: all var(--transition-smooth) !important;
}

.button.button-black:hover,
a.button.button-black:hover,
.button-slider.button-black:hover {
    background: var(--gold-primary) !important;
    color: var(--white) !important;
    border-color: var(--gold-primary) !important;
    box-shadow: var(--shadow-gold) !important;
    transform: translateY(-1px);
}

/* Product category title */
.block-products .block-title h2 {
    color: var(--gold-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: 3px !important;
}

/* -----------------------------------------------
   11. STORE INFORMATION SECTION
   ----------------------------------------------- */
.background-img.bg-img-5 {
    background-color: var(--bg-primary) !important;
    position: relative;
}

.block-info {
    text-align: center;
}

.block-info .info-wrap {
    color: var(--text-secondary) !important;
}

.block-info .info-wrap .icon svg {
    fill: var(--gold-primary) !important;
    width: 60px !important;
    height: 60px !important;
}

.block-info .info-wrap .title {
    color: var(--gold-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}

.block-info .info-wrap ul li {
    color: var(--gold-primary) !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

/* -----------------------------------------------
   12. GALLERY SECTION — "From Each Corner"
   ----------------------------------------------- */
.block-posts .block-title h2 {
    color: var(--gold-primary) !important;
}

.block-posts .block-title p {
    color: var(--text-secondary) !important;
}

.post-grid .post-inner {
    overflow: hidden;
    border-radius: 2px;
    position: relative;
}

.post-grid .post-image img {
    transition: transform var(--transition-slow), filter var(--transition-slow) !important;
}

.post-grid:hover .post-image img {
    transform: scale(1.06);
    filter: brightness(0.85);
}

.post-grid .post-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.5), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-smooth);
}

.post-grid:hover .post-inner::after {
    opacity: 1;
}

/* -----------------------------------------------
   13. FOOTER
   ----------------------------------------------- */
#site-footer,
.site-footer {
    background-color: var(--bg-primary) !important;
    border-top: 1px solid var(--border-medium) !important;
}

.footer {
    background-color: var(--bg-primary) !important;
}

/* Footer logo section heading */
.footer h4 {
    color: var(--gold-primary) !important;
    font-family: var(--font-heading) !important;
}

/* Footer section titles */
.footer .block-title h2 {
    color: var(--gold-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    position: relative;
    padding-bottom: 12px !important;
}

.footer .block-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1px;
    background: var(--gold-primary);
}

/* Footer links */
.footer .block-content ul li a {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    transition: all var(--transition-fast) !important;
    position: relative;
    padding-left: 0 !important;
}

.footer .block-content ul li a:hover {
    color: var(--gold-primary) !important;
    padding-left: 6px !important;
}

.footer .block-content ul li {
    border-bottom: none !important;
    padding: 4px 0 !important;
}

/* Footer contact info */
.footer .block-content label {
    color: var(--text-muted) !important;
}

.footer .block-content i {
    color: var(--gold-primary) !important;
    margin-right: 6px;
}

/* Footer description */
.footer p {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}

/* Footer social icons */
.social-link li a,
.footer-social-icon {
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-medium) !important;
    background: transparent !important;
    transition: all var(--transition-fast) !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.social-link li a:hover,
.footer-social-icon:hover {
    color: var(--text-on-gold) !important;
    background: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
}

.social-link li a i {
    color: inherit !important;
}

/* Footer bottom bar */
.footer-bottom {
    background-color: var(--bg-primary) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.footer-bottom .copyright {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

.footer-bottom .copyright a {
    color: var(--gold-primary) !important;
    font-weight: 500 !important;
}

.footer-bottom .copyright a:hover {
    color: var(--gold-bright) !important;
}

/* -----------------------------------------------
   14. BACK TO TOP BUTTON
   ----------------------------------------------- */
.back-top {
    background: var(--gold-primary) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 2px !important;
    box-shadow: var(--shadow-gold) !important;
    transition: all var(--transition-fast) !important;
}

.back-top:hover {
    background: var(--gold-bright) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover) !important;
}

.back-top i {
    color: var(--text-on-gold) !important;
}

/* -----------------------------------------------
   15. QUICK VIEW MODAL
   ----------------------------------------------- */
.quickview-popup {
    background: rgba(0, 0, 0, 0.85) !important;
}

.quickview-container {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-medium) !important;
    box-shadow: var(--shadow-card) !important;
}

.quickview-close {
    color: var(--gold-primary) !important;
}

.quickview-close:hover {
    color: var(--gold-bright) !important;
}

.quickview-single-info {
    background: var(--bg-card) !important;
}

.quickview-single-info .product-title {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
}

.quickview-single-info .price ins {
    color: var(--gold-primary) !important;
}

.quickview-single-info .price .fa-rupee {
    color: var(--gold-primary) !important;
}

.quickview-single-info .description p {
    color: var(--text-secondary) !important;
}

.quickview-single-info .variations table td {
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
}

.quickview-single-info .variations .label {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}

/* -----------------------------------------------
   16. INQUIRY MODAL
   ----------------------------------------------- */
.modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 2px !important;
}

.modal-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-gold) !important;
}

.modal-title {
    color: var(--gold-primary) !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 1px !important;
}

.modal-header .close {
    color: var(--text-muted) !important;
    text-shadow: none !important;
}

.modal-header .close:hover {
    color: var(--gold-primary) !important;
}

.modal-body {
    background: var(--bg-card) !important;
}

.modal-body .form-control {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    border-radius: 2px !important;
    font-family: var(--font-body) !important;
    transition: border-color var(--transition-fast) !important;
}

.modal-body .form-control:focus {
    border-color: var(--gold-primary) !important;
    box-shadow: 0 0 0 1px var(--border-gold) !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

.modal-body .form-control::placeholder {
    color: var(--text-muted) !important;
}

.modal-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.modal-footer .button-primary {
    background: var(--gold-gradient) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
}

.modal-footer .button-primary:hover {
    background: var(--gold-gradient-hover) !important;
    box-shadow: var(--shadow-gold) !important;
}

.modal-footer .button-black,
.modal-footer .modal-close-btn {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-medium) !important;
}

.modal-footer .button-black:hover,
.modal-footer .modal-close-btn:hover {
    color: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
}

.modal-backdrop {
    background-color: #000 !important;
}

/* -----------------------------------------------
   17. BUTTONS — Generic
   ----------------------------------------------- */
.button,
button.button,
input[type="submit"].button {
    font-family: var(--font-body) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    transition: all var(--transition-smooth) !important;
}

/* Form submit buttons */
.button-login input[type="submit"],
.button-register input[type="submit"] {
    background: var(--gold-gradient) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    letter-spacing: 3px !important;
    /* padding: 14px 40px !important; */
    cursor: pointer;
    transition: all var(--transition-smooth) !important;
}

.button-login input[type="submit"]:hover,
.button-register input[type="submit"]:hover {
    background: var(--gold-gradient-hover) !important;
    box-shadow: var(--shadow-gold) !important;
}

/* -----------------------------------------------
   18. FORMS — Global Form Styling
   ----------------------------------------------- */
.form-control {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    border-radius: 2px !important;
    font-family: var(--font-body) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: border-color var(--transition-fast) !important;
}

.form-control:focus {
    border-color: var(--gold-primary) !important;
    box-shadow: 0 0 0 1px var(--border-gold) !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

select.form-control {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

select.form-control option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

textarea.form-control {
    resize: vertical;
}

/* Input text (used in login/register) */
.input-text {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    transition: border-color var(--transition-fast) !important;
}

.input-text:focus {
    border-color: var(--gold-primary) !important;
    box-shadow: 0 0 0 1px var(--border-gold) !important;
}

.input-text::placeholder {
    color: var(--text-muted) !important;
}

/* Validation errors */
label.error,
.error {
    color: #FF6B6B !important;
    font-size: 12px !important;
    font-family: var(--font-body) !important;
}

/* -----------------------------------------------
   19. PAGE TITLES (used on inner pages)
   ----------------------------------------------- */
.page-title,
#title.page-title {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 40px 0 !important;
}

.text-title-heading {
    color: var(--white) !important;   /* White heading for legibility on navy background */
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
}

/* Breadcrumbs */
.breadcrumbs a {
    color: var(--text-muted) !important;
}

.breadcrumbs a:hover {
    color: var(--gold-primary) !important;
}

.breadcrumbs span {
    color: var(--text-secondary) !important;
}

/* -----------------------------------------------
   20. CARDS
   ----------------------------------------------- */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.card:hover {
    border-color: var(--border-gold) !important;
}

.card-body {
    color: var(--text-secondary) !important;
}

.card h3 {
    color: var(--gold-primary) !important;
}

.card b {
    color: var(--text-primary) !important;
}

/* -----------------------------------------------
   21. ALERTS
   ----------------------------------------------- */
.alert-success {
    background: var(--gold-glow) !important;
    border-color: var(--gold-primary) !important;
    color: var(--gold-bright) !important;
}

.alert-danger {
    background: rgba(255, 107, 107, 0.10) !important;
    border-color: #FF6B6B !important;
    color: #FF6B6B !important;
}

/* -----------------------------------------------
   22. SWEETALERT OVERRIDES
   ----------------------------------------------- */
.swal2-popup {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-medium) !important;
}

.swal2-title {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
}

.swal2-content {
    color: var(--text-secondary) !important;
}

.swal2-confirm {
    background: var(--gold-gradient) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    border-radius: 2px !important;
}

.swal2-cancel {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: 2px !important;
}

/* -----------------------------------------------
   23. SECTION BACKGROUNDS & SPACING
   ----------------------------------------------- */
.section-padding {
    background: transparent !important;
}

.background-img {
    background-size: cover !important;
}

.background-13 {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
}

/* -----------------------------------------------
   24. MICRO-ANIMATIONS
   ----------------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes goldShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes subtlePulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Gold shimmer effect for section headings */
.block-title h2 {
    background-image: linear-gradient(
        90deg,
        var(--gold-primary) 0%,
        var(--gold-bright) 25%,
        var(--gold-primary) 50%,
        var(--gold-bright) 75%,
        var(--gold-primary) 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% auto !important;
    animation: goldShimmer 4s ease-in-out infinite !important;
}

/* Product cards fade in */
.products-list .product-wapper,
.products-list .product-wrapper {
    animation: fadeInUp 0.5s ease forwards;
}

/* Hover glow effect for product images */
.products-list .product-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
    z-index: 1;
    pointer-events: none;
}

.products-list .product-wapper:hover .product-image::before,
.products-list .product-wrapper:hover .product-image::before {
    border-color: var(--border-gold);
}

/* -----------------------------------------------
   25. PAGE WRAPPER
   ----------------------------------------------- */
.page-wrapper,
#page.page-wrapper {
    background-color: var(--bg-primary) !important;
}

.site-main,
#site-main {
    background-color: var(--bg-primary) !important;
}

.main-content,
#main-content {
    background-color: var(--bg-primary) !important;
}

.content-area,
#primary {
    background-color: var(--bg-primary) !important;
}

.site-content,
#content {
    background-color: var(--bg-primary) !important;
}

/* -----------------------------------------------
   26. TABLE STYLES (reusable)
   ----------------------------------------------- */
table {
    border-color: var(--border-subtle) !important;
}

table td,
table th {
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

/* -----------------------------------------------
   27. EMPTY STATE
   ----------------------------------------------- */
.empty-category-text {
    color: var(--text-muted) !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 2px !important;
}

.empty-category-text span {
    color: var(--gold-primary) !important;
}

/* -----------------------------------------------
   28. CONTACT PAGE SPECIFICS
   ----------------------------------------------- */
.block-contact-info {
    text-align: center;
}

.block-contact-info svg {
    fill: var(--gold-primary) !important;
}

.block-contact-info .info-title h2 {
    color: var(--gold-primary) !important;
}

.block-contact-info .item-tilte h2 {
    color: var(--text-primary) !important;
}

.block-contact-info .item-content a {
    color: var(--text-secondary) !important;
}

.block-contact-info .item-content a:hover {
    color: var(--gold-primary) !important;
}

.block-contact-info .address-text {
    color: var(--text-secondary) !important;
}

/* Contact form section */
.block-contact-form {
    background: transparent !important;
}

.background-img.bg-img-7 {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
}

.contact-us-form label {
    color: var(--text-secondary) !important;
    font-family: var(--font-body) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

/* Map */
.block-contact-map iframe {
    border: 1px solid var(--border-medium) !important;
    border-radius: 4px !important;
    /* Removed high-contrast filter to simplify view per user request */
}

/* -----------------------------------------------
   29. LOGIN / REGISTER PAGE
   ----------------------------------------------- */
.page-login-register {
    background: transparent !important;
}

.box-form-login {
    background: var(--bg-card) !important;
    border: 1px solid var(--white-border) !important;
    padding: 30px !important;
    border-radius: 4px !important;
    box-shadow: var(--shadow-card) !important;
}

.box-form-login h2 {
    color: var(--white) !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 2px !important;
    border-bottom: 1px solid var(--white-border) !important;
    padding-bottom: 15px !important;
}

.box-form-login .lost-password a {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

.box-form-login .lost-password a:hover {
    color: var(--gold-primary) !important;
}

/* -----------------------------------------------
   30. MY ACCOUNT PAGE
   ----------------------------------------------- */
.my-account-wrap .my-account-navigation,
.my-account-wrap .nav {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
}

.my-account-wrap .nav-link {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.my-account-wrap .nav-link:hover,
.my-account-wrap .nav-link.active {
    color: var(--gold-primary) !important;
    background: var(--bg-elevated) !important;
}

.my-account-text-color {
    color: var(--text-secondary) !important;
}

.my-account-text-color h3 {
    color: var(--gold-primary) !important;
}

/* -----------------------------------------------
   31. WISHLIST TABLE
   ----------------------------------------------- */
.shop-wishlist table {
    border-color: var(--border-subtle) !important;
}

.wishlist-item {
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: background var(--transition-fast) !important;
}

.wishlist-item:hover {
    background: var(--bg-elevated) !important;
}

.wishlist-item-name a {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
}

.wishlist-item-name a:hover {
    color: var(--gold-primary) !important;
}

.wishlist-item-price span {
    color: var(--gold-primary) !important;
}

.rwishlist i {
    color: var(--text-muted) !important;
    transition: color var(--transition-fast) !important;
}

.rwishlist:hover i {
    color: #FF6B6B !important;
}

/* -----------------------------------------------
   32. CAREER PAGE
   ----------------------------------------------- */
.career {
    color: var(--gold-primary) !important;
    font-family: var(--font-heading) !important;
}

.career i {
    color: var(--gold-primary) !important;
    margin-right: 8px;
}

/* -----------------------------------------------
   33. ABOUT US PAGE
   ----------------------------------------------- */
.page-about-us .block-banners .banner-image img {
    transition: transform var(--transition-slow) !important;
}

.page-about-us .block-banners .banner-image:hover img {
    transform: scale(1.04);
}

.page-about-us .block-intro .intro-icon svg {
    fill: var(--gold-primary) !important;
}

/* -----------------------------------------------
   34. PRODUCT DETAIL PAGE
   ----------------------------------------------- */
.shop-details .product-info .title {
    color: var(--text-primary) !important;
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
}

.shop-details .price ins,
.shop-details .price-single .price ins span {
    color: var(--gold-primary) !important;
    font-weight: 600 !important;
}

.shop-details .price .fa-rupee {
    color: var(--gold-primary) !important;
}

.shop-details .description p {
    color: var(--text-secondary) !important;
    line-height: 1.8 !important;
}

.shop-details .variations table td {
    border-color: var(--border-subtle) !important;
    padding: 10px 0 !important;
}

.shop-details .variations .label {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
}

.shop-details .variations .attributes .sku {
    color: var(--text-secondary) !important;
}

/* Product buttons */
.shop-details .buttons .product-btn,
.shop-details .btn-quick-buy .product-btn {
    background: var(--gold-gradient) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    border-radius: 0 !important;
    transition: all var(--transition-smooth) !important;
    width: 100% !important;
    cursor: pointer;
}

.shop-details .buttons .product-btn:hover,
.shop-details .btn-quick-buy .product-btn:hover {
    background: var(--gold-gradient-hover) !important;
    box-shadow: var(--shadow-gold) !important;
}

.shop-details .productwishlist {
    background: transparent !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-secondary) !important;
    padding: 12px 24px !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

.shop-details .productwishlist:hover {
    border-color: var(--gold-primary) !important;
    color: var(--gold-primary) !important;
}

.shop-details .productwishlist.active {
    border-color: var(--gold-primary) !important;
    color: var(--gold-primary) !important;
}

/* Social share */
.social-share a {
    color: var(--text-muted) !important;
    transition: color var(--transition-fast) !important;
}

.social-share a:hover {
    color: var(--gold-primary) !important;
}

/* Product tabs */
.product-tabs {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.product-tabs .productdesc h2 {
    color: var(--gold-primary) !important;
}

.product-tabs p {
    color: var(--text-secondary) !important;
    line-height: 1.8 !important;
}

/* Thumbnail images */
.content-thumbnail-scroll {
    background: transparent !important;
}

.image-thumbnail .img-item {
    border: 1px solid var(--border-subtle) !important;
    transition: border-color var(--transition-fast) !important;
    margin-bottom: 4px !important;
    cursor: pointer;
}

.image-thumbnail .img-item:hover,
.image-thumbnail .img-item.slick-current {
    border-color: var(--gold-primary) !important;
}

/* Main product image */
.scroll-image.main-image {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Related products */
.product-related {
    background: var(--bg-primary) !important;
}

/* -----------------------------------------------
   35. PRODUCT LISTING / ALL PRODUCTS PAGE
   ----------------------------------------------- */
/* Sidebar filters */
.sidebar .block-product-filter .block-title h2,
.sidebar .block-product-cats .block-title h2 {
    color: var(--gold-primary) !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
}

.sidebar .block-product-filter,
.sidebar .block-product-cats {
    border-bottom: 1px solid var(--border-subtle) !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
}

.sidebar label {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
}

/* Sidebar category checkboxes */
.sidebar-widget-list-left input[type="checkbox"] {
    accent-color: var(--gold-primary);
}

.sidebar-widget-list-left a {
    color: var(--text-secondary) !important;
}

.sidebar-widget-list-left a:hover {
    color: var(--gold-primary) !important;
}

.sidebar-widget-list-left .count {
    color: var(--text-muted) !important;
}

.sidebar-widget-list-left .colorcode {
    border: 2px solid var(--border-medium) !important;
}

/* -----------------------------------------------
   36. BOOK AN APPOINTMENT PAGE
   ----------------------------------------------- */
.appointment-form {
    padding: 20px 0 !important;
}

.appointment-img {
    border: 1px solid var(--border-subtle) !important;
}

/* -----------------------------------------------
   37. POLICY PAGES
   ----------------------------------------------- */
.privacypolicy-section,
.termsandconditions-section,
.returnandcancellation-section {
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}

/* -----------------------------------------------
   38. MISC / UTILITY OVERRIDES
   ----------------------------------------------- */
/* Bootstrap btn overrides for dark theme */
.btn-outline-dark {
    color: var(--text-secondary) !important;
    border-color: var(--border-medium) !important;
}

.btn-outline-dark:hover {
    color: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
    background: transparent !important;
}

.btn-dark {
    background: var(--gold-gradient) !important;
    border: none !important;
    color: var(--text-on-gold) !important;
}

.btn-dark:hover {
    background: var(--gold-gradient-hover) !important;
    box-shadow: var(--shadow-gold) !important;
}

/* Margin bottom override for dark bg */
.margin-bottom {
    margin-bottom: 0 !important;
}

/* Metal color swatches */
.colors li a {
    border: 2px solid var(--border-medium) !important;
    transition: border-color var(--transition-fast) !important;
}

.colors li.active a,
.colors li:hover a {
    border-color: var(--gold-primary) !important;
}

/* Price filter input */
.price-filter-wrap input {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
}

/* Pagination */
.pagination a {
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-medium) !important;
    background: var(--bg-card) !important;
}

.pagination a:hover,
.pagination .active a {
    color: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
}

/* -----------------------------------------------
   39. LOADING / TRANSITION STATES
   ----------------------------------------------- */
.loading-overlay {
    /* background: rgba(5, 10, 20, 0.90) !important; */
    background: rgba(12, 31, 48, 0.90) !important;
}

/* -----------------------------------------------
   40. PRINT STYLES
   ----------------------------------------------- */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
}

/* -----------------------------------------------
   41. WHITE ACCENT UTILITIES
   Reusable helpers that leverage the white accent
   ----------------------------------------------- */

/* White-on-navy card border for sections / info cards */
.card,
.box-form-login,
.quickview-container,
.modal-content {
    border-color: var(--white-border) !important;
}

/* White text enforcement for key headings on navy */
.block-title .sub-title,
.footer p,
.breadcrumbs span {
    color: var(--text-secondary) !important; /* rgba white — readable but soft */
}

/* White CTA variant: white bg, gold text, gold border */
.btn-cta-white {
    background: var(--white) !important;
    color: var(--gold-primary) !important;
    border: 1px solid var(--gold-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 12px 36px !important;
    border-radius: 0 !important;
    transition: all var(--transition-smooth) !important;
    display: inline-block;
}

.btn-cta-white:hover {
    background: var(--gold-primary) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-gold) !important;
    transform: translateY(-1px);
}

/* Subtle white rule / divider */
.divider-white {
    border: none;
    border-top: 1px solid var(--white-border);
    margin: 24px 0;
}