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

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

/* ============================================================
   SITE-WIDE TYPEFACE — Inter ExtraBold (800)
   The !important overrides the inline font-family / font-weight
   declarations (Inter, Playfair Display, Cormorant Garamond,
   varying weights) used throughout the pages so the whole site
   renders in Inter at weight 800.
   ============================================================ */
*, *::before, *::after {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
}

/* ============================================================
   FORTEX-INSPIRED DARK FOREST GREEN LUXURY THEME
   Primary: #111111 | Text: #0a0a0a | Cream: #ffffff
   ============================================================ */

:root {
    /* Core Palette — Fortex Forest Green */
    --forest:       #111111;
    --forest-dark:  #000000;
    --forest-mid:   #2a5244;
    --forest-light: #3a6b5a;
    --cream:        #ffffff;
    --cream-light:  #f5f0e8;

    /* Backgrounds */
    --bg-primary:   #ffffff;
    --bg-secondary: #f5f7f5;
    --bg-tertiary:  #ebf0ed;
    --bg-accent:    #e2ebe7;
    --bg-luxury:    #0a0a0a;

    /* Borders */
    --border-primary:   #e2e8e5;
    --border-secondary: #c8d8d2;
    --border-forest:    #111111;

    /* Text */
    --text-primary:   #0a0a0a;
    --text-secondary: #4a6560;
    --text-tertiary:  #7a9990;
    --text-forest:    #111111;
    --text-cream:     #ffffff;

    /* Accents */
    --accent-primary:       #111111;
    --accent-primary-hover: #000000;
    --accent-primary-light: #d4e8df;
    --accent-gold:          #c9a84c;
    --accent-gold-hover:    #a8893a;
    --accent-green:         #059669;
    --accent-green-hover:   #047857;
    --accent-red:           #dc2626;
    --accent-red-hover:     #b91c1c;

    /* Shadows */
    --shadow-light:  0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-medium: 0 4px 6px -1px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.07);
    --shadow-large:  0 10px 20px -3px rgba(0,0,0,0.18), 0 4px 8px -2px rgba(0,0,0,0.1);
    --shadow-forest: 0 0 20px rgba(29,60,52,0.25);
}

/* ── Base ── */
html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

/* ── Global Tailwind colour overrides ── */

/* Body background */
.bg-rose-50,
body.bg-rose-50 { background-color: var(--bg-secondary) !important; }
.bg-rose-100    { background-color: var(--bg-tertiary) !important; }
.bg-rose-200    { background-color: var(--bg-accent) !important; }
.bg-rose-500,
.bg-pink-500    { background-color: var(--forest) !important; }
.bg-rose-600,
.bg-pink-600    { background-color: var(--forest) !important; }
.bg-rose-700,
.bg-pink-700    { background-color: var(--forest-dark) !important; }
.bg-rose-800    { background-color: var(--forest-dark) !important; }
.bg-rose-900,
.bg-rose-950    { background-color: var(--forest-dark) !important; }

/* Rose/pink text */
.text-rose-200  { color: var(--cream) !important; }
.text-rose-300  { color: var(--cream-light) !important; }
.text-rose-500,
.text-pink-500  { color: var(--forest-mid) !important; }
.text-rose-600,
.text-pink-600  { color: var(--forest) !important; }
.text-rose-700,
.text-pink-700  { color: var(--forest) !important; }
.text-rose-800,
.text-pink-800  { color: var(--forest-dark) !important; }
.text-rose-900,
.text-pink-900  { color: var(--forest-dark) !important; }

/* Rose/pink borders */
.border-rose-50,
.border-rose-100 { border-color: var(--border-primary) !important; }
.border-rose-200 { border-color: var(--border-secondary) !important; }
.border-rose-300 { border-color: #a8c4bb !important; }
.border-rose-500,
.border-pink-500 { border-color: var(--forest-mid) !important; }
.border-rose-700 { border-color: var(--forest) !important; }

/* Rose gradient backgrounds → forest green */
.from-rose-50,  .via-rose-50,  .to-rose-50  { --tw-gradient-from: var(--bg-secondary) !important; --tw-gradient-to: var(--bg-secondary) !important; }
.from-rose-100, .via-rose-100, .to-rose-100  { --tw-gradient-from: var(--bg-tertiary) !important; --tw-gradient-to: var(--bg-tertiary) !important; }
.from-rose-700, .via-rose-700, .to-rose-700  { --tw-gradient-from: var(--forest) !important; --tw-gradient-to: var(--forest) !important; }
.from-rose-800, .via-rose-800, .to-rose-800  { --tw-gradient-from: var(--forest-dark) !important; --tw-gradient-to: var(--forest-dark) !important; }
.from-rose-900, .via-rose-900, .to-rose-900  { --tw-gradient-from: var(--forest-dark) !important; --tw-gradient-to: var(--forest-dark) !important; }
.from-pink-600, .via-pink-600, .to-pink-600  { --tw-gradient-from: var(--forest) !important; --tw-gradient-to: var(--forest) !important; }
.from-pink-50,  .via-pink-50,  .to-pink-50   { --tw-gradient-from: var(--bg-secondary) !important; --tw-gradient-to: var(--bg-secondary) !important; }

/* Hover colour overrides */
.hover\:bg-rose-50:hover  { background-color: var(--bg-secondary) !important; }
.hover\:bg-rose-100:hover { background-color: var(--bg-tertiary) !important; }
.hover\:text-rose-600:hover,
.hover\:text-rose-700:hover,
.hover\:text-rose-800:hover { color: var(--forest-mid) !important; }
.hover\:border-rose-200:hover { border-color: var(--border-secondary) !important; }
.hover\:shadow-rose-200\/50:hover { --tw-shadow-color: rgba(29,60,52,0.15) !important; }

/* Focus ring */
.focus\:ring-rose-500:focus { --tw-ring-color: rgba(29,60,52,0.35) !important; }

/* ── Navigation ── */
nav.sticky,
nav[class*="bg-white"] {
    background: var(--forest) !important;
    border-bottom-color: var(--forest-dark) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Logo text — remove rose gradient, use cream colour */
nav .bg-clip-text.text-transparent,
nav a.bg-clip-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--cream) !important;
    -webkit-text-fill-color: var(--cream) !important;
}

/* Nav tagline */
nav span[class*="text-rose"] {
    color: rgba(255,255,255,0.65) !important;
}

/* Nav links */
nav a[class*="text-gray-700"],
nav a[class*="text-rose"] {
    color: rgba(255,255,255,0.82) !important;
}
nav a[class*="text-gray-700"]:hover,
nav a[class*="text-rose"]:hover {
    color: #ffffff !important;
}

/* Nav underline accents */
nav a div[class*="bg-gradient"] {
    background: var(--cream) !important;
}

/* Nav cart / auth buttons */
nav a[class*="from-rose"],
nav a[class*="from-pink"] {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
}
nav a[class*="from-rose"]:hover,
nav a[class*="from-pink"]:hover {
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
}

/* Mobile hamburger */
nav button[class*="text-gray"],
nav button[class*="text-rose"] {
    color: rgba(255,255,255,0.85) !important;
}
nav button:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Mobile menu panel */
nav div[id="mobileMenu"] {
    background: var(--forest) !important;
    border-top-color: rgba(255,255,255,0.15) !important;
}
nav div[id="mobileMenu"] a {
    color: rgba(255,255,255,0.82) !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
nav div[id="mobileMenu"] a:hover { color: #ffffff !important; }

/* Cart badge */
nav span[class*="from-rose"],
nav span[class*="bg-rose"] {
    background: var(--cream) !important;
    color: var(--forest-dark) !important;
}

/* ── Hero / Body sections ── */
section[class*="bg-rose"] {
    background-color: var(--bg-secondary) !important;
}

/* ── Product Cards ── */
.product-card {
    transition: all 0.3s ease;
    background: #ffffff;
    border-color: var(--border-primary) !important;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -5px rgba(0,0,0,0.2), 0 10px 12px -5px rgba(0,0,0,0.12) !important;
    border-color: var(--forest) !important;
}

/* Product image placeholder bg */
div[class*="from-rose-50"].relative,
div.relative[class*="from-rose"],
div[class*="from-rose-50"][class*="to-pink"] {
    background: var(--bg-tertiary) !important;
}

/* Price badge on product cards — Fortex */
div[class*="bg-white/95"][class*="rounded-full"],
.absolute.top-4.right-4[class*="bg-white"] {
    background: var(--forest) !important;
    border-color: var(--forest-dark) !important;
}
div[class*="bg-white/95"][class*="rounded-full"] span,
.absolute.top-4.right-4[class*="bg-white"] span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ── About / Stat cards ── */
div[class*="bg-white"][class*="rounded-xl"][class*="border-gold"] .text-rose-700 {
    color: var(--forest) !important;
}

/* ── Feature / Info cards ── */
.card {
    transition: all 0.3s ease;
    background: #ffffff;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 24px -5px rgba(0,0,0,0.2) !important;
}
.feature-card {
    transition: all 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--forest) !important;
}

/* ── Footer ── */
footer[class*="from-rose"],
footer[class*="bg-rose"] {
    background: var(--forest-dark) !important;
    border-top-color: rgba(201,168,76,0.2) !important;
}
footer p[class*="text-rose"],
footer span[class*="text-rose"],
footer li a[class*="text-rose"] {
    color: rgba(255,255,255,0.7) !important;
}
footer li a[class*="text-rose"]:hover {
    color: var(--cream) !important;
}

/* ── Form Inputs ── */
.input-light {
    background-color: #ffffff;
    border: 2px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}
.input-light:focus {
    outline: none;
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(29,60,52,0.12);
}
.input-light::placeholder { color: var(--text-tertiary); }

.input-dark {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 0.375rem;
}
.input-dark:focus {
    outline: none;
    border-color: var(--forest);
    box-shadow: 0 0 0 2px rgba(29,60,52,0.2);
}
.input-dark::placeholder { color: var(--text-tertiary); }

/* Inline search inputs with rose classes */
input[class*="bg-rose"],
input[class*="border-rose"] {
    background-color: #ffffff !important;
    border-color: var(--border-secondary) !important;
}
input[class*="focus:ring-rose"]:focus,
input[class*="focus:border-rose"]:focus {
    border-color: var(--forest) !important;
    box-shadow: 0 0 0 2px rgba(29,60,52,0.15) !important;
}

/* ── Buttons ── */
.btn-primary {
    background-color: var(--accent-primary);
    color: white;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
}
.btn-primary:hover {
    background-color: var(--accent-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-large);
}

.btn-gold {
    background-color: var(--accent-gold);
    color: var(--forest-dark);
    transition: all 0.3s ease;
    box-shadow: 0 0 16px rgba(201,168,76,0.3);
}
.btn-gold:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(201,168,76,0.45);
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    transition: background-color 0.3s ease;
}
.btn-secondary:hover { background-color: var(--border-secondary); }

/* ── Sidebar ── */
.sidebar { transition: transform 0.3s ease; }
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.active { transform: translateX(0); }
}

/* ── Status Badges ── */
.status-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.status-pending    { background-color: rgba(251,191,36,0.1);  color: #d97706; border: 1px solid rgba(251,191,36,0.3); }
.status-processing { background-color: rgba(29,60,52,0.1);    color: var(--forest); border: 1px solid rgba(29,60,52,0.3); }
.status-completed  { background-color: rgba(34,197,94,0.1);   color: var(--accent-green); border: 1px solid rgba(34,197,94,0.3); }
.status-cancelled  { background-color: rgba(239,68,68,0.1);   color: var(--accent-red); border: 1px solid rgba(239,68,68,0.3); }

/* ── Animations ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-secondary); }

/* ── Placeholder text ── */
.placeholder-rose-400::placeholder { color: var(--text-tertiary) !important; }
.placeholder-rose-500::placeholder { color: var(--text-secondary) !important; }

/* ── Opacity variants (Tailwind bg-rose-*/xx) ── */
[class*="bg-rose-"][class*="/"]  { background-color: var(--bg-tertiary) !important; }
[class*="border-rose-"][class*="/"] { border-color: var(--border-primary) !important; }

/* ── Rose submit / CTA buttons ── */
button[class*="from-rose"],
a[class*="from-rose-6"],
a[class*="from-rose-7"],
input[type="submit"][class*="from-rose"] {
    background: var(--forest) !important;
    border-color: var(--forest-dark) !important;
    color: #ffffff !important;
}
button[class*="from-rose"]:hover,
a[class*="from-rose-6"]:hover,
a[class*="from-rose-7"]:hover {
    background: var(--forest-dark) !important;
    color: #ffffff !important;
}

/* ── Stat/info divs with text-rose inside white cards ── */
.text-rose-700 { color: var(--forest) !important; }
.text-rose-600 { color: var(--forest) !important; }
.text-rose-500 { color: var(--forest-mid) !important; }
.text-rose-400 { color: var(--forest-light) !important; }

/* ── Select / textarea with rose background ── */
select[class*="bg-rose"],
textarea[class*="bg-rose"],
input[class*="bg-rose"] {
    background-color: #ffffff !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

/* ── Dashboard nav items ── */
button[class*="text-rose"],
button[class*="border-rose"] {
    color: var(--forest) !important;
    border-color: var(--forest) !important;
}

/* ── Gradient text in headings / cards ── */
h1.bg-clip-text, h2.bg-clip-text, h3.bg-clip-text,
h4.bg-clip-text, span.bg-clip-text, p.bg-clip-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--forest) !important;
    -webkit-text-fill-color: var(--forest) !important;
}

/* ============================================================
   THEME TOGGLE — dark (default) / light
   ============================================================ */

/* ── Body & page background ── */
html[data-theme="light"] body {
    background: #fafaf8 !important;
    color: #0a0a0a !important;
}

/* ── Override inline dark backgrounds ── */
html[data-theme="light"] [style*="background:#000000"],
html[data-theme="light"] [style*="background: #000000"] {
    background: #fafaf8 !important;
}
html[data-theme="light"] [style*="background:#0a0a0a"],
html[data-theme="light"] [style*="background: #0a0a0a"] {
    background: #f4f4f1 !important;
}
html[data-theme="light"] [style*="background:#111111"],
html[data-theme="light"] [style*="background: #111111"] {
    background: #efefec !important;
}
html[data-theme="light"] [style*="background:#040404"],
html[data-theme="light"] [style*="background: #040404"] {
    background: #ffffff !important;
}
html[data-theme="light"] [style*="background:#161616"],
html[data-theme="light"] [style*="background: #161616"] {
    background: #f4f4f1 !important;
}
html[data-theme="light"] [style*="background:#0d0d0d"],
html[data-theme="light"] [style*="background: #0d0d0d"] {
    background: #f8f8f5 !important;
}

/* ── Override inline white/light text ── */
html[data-theme="light"] [style*="color:#ffffff"],
html[data-theme="light"] [style*="color: #ffffff"],
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"] {
    color: #0a0a0a !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255"],
html[data-theme="light"] [style*="color: rgba(255,255,255"] {
    color: rgba(0,0,0,0.62) !important;
}

/* ── Dashboard structural elements ── */
html[data-theme="light"] .main-content {
    background: #f4f4f1 !important;
    color: #0a0a0a !important;
}
html[data-theme="light"] .sidebar {
    background: #ffffff !important;
    border-right-color: rgba(0,0,0,0.08) !important;
    color: #0a0a0a !important;
}

/* ── Homepage-specific cards ── */
html[data-theme="light"] ._hcard {
    background: #f0f0ed !important;
    color: #0a0a0a !important;
}
html[data-theme="light"] ._hcard:hover { background: #e9e9e6 !important; }
html[data-theme="light"] ._hcard-name  { color: #0a0a0a !important; }
html[data-theme="light"] ._hcard-cat   { color: rgba(0,0,0,0.38) !important; }
html[data-theme="light"] ._hcard-price { color: rgba(0,0,0,0.7) !important; }
html[data-theme="light"] ._hcard-body::after { background: rgba(0,0,0,0.05) !important; }

html[data-theme="light"] ._roller-card { background: #f4f2ee !important; }
html[data-theme="light"] ._roller-cap-label { color: rgba(0,0,0,0.38) !important; }
html[data-theme="light"] ._roller-cap-name  { color: #0a0a0a !important; }
html[data-theme="light"] ._roller-card._has-bg ._roller-cap-label { color: rgba(255,255,255,0.55) !important; }
html[data-theme="light"] ._roller-card._has-bg ._roller-cap-name  { color: #ffffff !important; }

/* ── Product cards ── */
html[data-theme="light"] .product-card {
    background: #ffffff !important;
    border-color: #e2e8e5 !important;
}

/* ── Scrollbar ── */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0ed !important; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14) !important; }

/* ── Dialog / toast ── */
html[data-theme="light"] #fortex-dialog-box {
    background: #ffffff !important;
    color: #0a0a0a !important;
    border-color: rgba(0,0,0,0.1) !important;
}
html[data-theme="light"] #fortex-dialog-msg { color: rgba(0,0,0,0.72) !important; }
html[data-theme="light"] .fortex-toast {
    background: #f4f4f1 !important;
    color: rgba(0,0,0,0.8) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* ============================================================
   DASHBOARD LIGHT MODE
   Reverses the dashboard's inline <style> Tailwind dark overrides.
   Higher specificity (attribute+class/ID) beats the inline <style>
   single-class !important rules.
   ============================================================ */

/* ── Structural backgrounds ── */
html[data-theme="light"] #sidebar {
    background: #ffffff !important;
    border-right-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .main-content {
    background: #f4f4f1 !important;
    color: #0a0a0a !important;
}
html[data-theme="light"] #collections_admin,
html[data-theme="light"] #discounts_admin,
html[data-theme="light"] #customizations_admin,
html[data-theme="light"] #careers_admin,
html[data-theme="light"] #partners_admin,
html[data-theme="light"] #about_admin,
html[data-theme="light"] #finance_admin,
html[data-theme="light"] #audit_log {
    background: #f4f4f1 !important;
}

/* ── Sidebar nav — text & icons ── */
html[data-theme="light"] #sidebar .text-white,
html[data-theme="light"] #sidebar .text-white\/80,
html[data-theme="light"] #sidebar .text-white\/70 { color: rgba(0,0,0,0.82) !important; }
html[data-theme="light"] #sidebar .text-white\/60,
html[data-theme="light"] #sidebar .text-white\/50 { color: rgba(0,0,0,0.48) !important; }
html[data-theme="light"] #sidebar .text-white\/40,
html[data-theme="light"] #sidebar .text-white\/30 { color: rgba(0,0,0,0.3) !important; }
html[data-theme="light"] #sidebar .text-\[\#ffffff\]\/50 { color: rgba(0,0,0,0.42) !important; }
html[data-theme="light"] #sidebar .text-\[\#ffffff\]\/70 { color: rgba(0,0,0,0.55) !important; }
/* Sidebar nav hover / active states */
html[data-theme="light"] .nav-item:hover  { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .nav-item.active { background: rgba(0,0,0,0.06) !important; border-left-color: rgba(0,0,0,0.65) !important; }
/* Sidebar collapse toggle icon */
html[data-theme="light"] #sidebar .text-white\/70 { color: rgba(0,0,0,0.55) !important; }
/* Role badges in sidebar */
html[data-theme="light"] #sidebar .bg-white\/15   { background: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] #sidebar .text-white\/80 { color: rgba(0,0,0,0.72) !important; }
html[data-theme="light"] #sidebar .bg-red-500\/20 { background: rgba(239,68,68,0.12) !important; }
html[data-theme="light"] #sidebar .text-red-200   { color: #b91c1c !important; }
html[data-theme="light"] #sidebar .bg-blue-500\/20 { background: rgba(59,130,246,0.12) !important; }
html[data-theme="light"] #sidebar .text-blue-200   { color: #1d4ed8 !important; }
/* Sidebar header borders */
html[data-theme="light"] #sidebar .border-b,
html[data-theme="light"] #sidebar [class*="border-b"],
html[data-theme="light"] #sidebar [class*="border-white"] { border-color: rgba(0,0,0,0.08) !important; }
/* hover:bg-white/10 on sidebar button */
html[data-theme="light"] #sidebar button:hover { background: rgba(0,0,0,0.06) !important; }

/* ── Tailwind light-utility reversals (from dashboard inline <style>) ── */

/* Backgrounds — put them back to natural light values */
html[data-theme="light"] .bg-white,
html[data-theme="light"] .bg-white\/95,
html[data-theme="light"] .bg-white\/90,
html[data-theme="light"] .bg-white\/80,
html[data-theme="light"] .bg-white\/70,
html[data-theme="light"] .bg-white\/60,
html[data-theme="light"] .bg-white\/50,
html[data-theme="light"] .bg-white\/40,
html[data-theme="light"] .bg-white\/30,
html[data-theme="light"] .bg-white\/20,
html[data-theme="light"] .bg-white\/15,
html[data-theme="light"] .bg-white\/10 { background-color: #ffffff !important; }

html[data-theme="light"] .bg-gray-50  { background-color: #f9fafb !important; }
html[data-theme="light"] .bg-gray-100 { background-color: #f3f4f6 !important; }
html[data-theme="light"] .bg-gray-200 { background-color: #e5e7eb !important; }
html[data-theme="light"] .bg-gray-900 { background-color: #111827 !important; }

html[data-theme="light"] .bg-\[\#f0ede6\],
html[data-theme="light"] .bg-\[\#f5f3ef\],
html[data-theme="light"] .bg-\[\#f8f5ef\],
html[data-theme="light"] .bg-\[\#faf9f7\],
html[data-theme="light"] .bg-\[\#fafafa\]       { background-color: #f8f7f4 !important; }
html[data-theme="light"] .bg-\[\#fafafa\]\/50,
html[data-theme="light"] .bg-\[\#fafafa\]\/90   { background-color: #f3f2ef !important; }
html[data-theme="light"] .hover\:bg-\[\#fafafa\]:hover,
html[data-theme="light"] .hover\:bg-gray-50:hover { background-color: #f3f4f6 !important; }

/* Row accents (used in table rows) */
html[data-theme="light"] .bg-\[\#111111\]\/3   { background-color: rgba(0,0,0,0.02) !important; }
html[data-theme="light"] .bg-\[\#111111\]\/5   { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-\[\#111111\]\/8   { background-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .bg-\[\#111111\]\/10  { background-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .bg-\[\#111111\]\/15  { background-color: rgba(0,0,0,0.10) !important; }
html[data-theme="light"] .hover\:bg-\[\#111111\]\/3:hover { background-color: rgba(0,0,0,0.03) !important; }
html[data-theme="light"] .hover\:bg-\[\#111111\]:hover    { background-color: rgba(0,0,0,0.05) !important; }

/* Text — put them back to natural dark values */
html[data-theme="light"] .text-gray-900,
html[data-theme="light"] .text-gray-950  { color: #111827 !important; }
html[data-theme="light"] .text-gray-800  { color: #1f2937 !important; }
html[data-theme="light"] .text-gray-700  { color: #374151 !important; }
html[data-theme="light"] .text-gray-600  { color: #4b5563 !important; }
html[data-theme="light"] .text-gray-500  { color: #6b7280 !important; }
html[data-theme="light"] .text-gray-400  { color: #9ca3af !important; }
html[data-theme="light"] .text-black     { color: #000000 !important; }

html[data-theme="light"] .text-\[\#111111\]    { color: #111111 !important; }
html[data-theme="light"] .text-\[\#111111\]\/90 { color: rgba(17,17,17,0.9) !important; }
html[data-theme="light"] .text-\[\#111111\]\/80 { color: rgba(17,17,17,0.8) !important; }
html[data-theme="light"] .text-\[\#111111\]\/70 { color: rgba(17,17,17,0.7) !important; }
html[data-theme="light"] .text-\[\#111111\]\/60 { color: rgba(17,17,17,0.6) !important; }
html[data-theme="light"] .text-\[\#111111\]\/50 { color: rgba(17,17,17,0.5) !important; }
html[data-theme="light"] .text-\[\#111111\]\/40 { color: rgba(17,17,17,0.4) !important; }
html[data-theme="light"] .text-\[\#111111\]\/30 { color: rgba(17,17,17,0.3) !important; }
html[data-theme="light"] .text-\[\#0a0a0a\]    { color: #0a0a0a !important; }
html[data-theme="light"] .text-\[\#4a6560\]    { color: #4a6560 !important; }
html[data-theme="light"] .text-\[\#6b7280\]    { color: #6b7280 !important; }

html[data-theme="light"] .hover\:text-\[\#111111\]:hover    { color: #111111 !important; }
html[data-theme="light"] .hover\:border-\[\#111111\]\/30:hover { border-color: rgba(17,17,17,0.3) !important; }

/* Borders */
html[data-theme="light"] .border-gray-100,
html[data-theme="light"] .border-gray-200  { border-color: #e5e7eb !important; }
html[data-theme="light"] .border-gray-300  { border-color: #d1d5db !important; }
html[data-theme="light"] .border-gray-400  { border-color: #9ca3af !important; }
html[data-theme="light"] .divide-gray-200 > * + * { border-color: #e5e7eb !important; }

html[data-theme="light"] .border-\[\#111111\]     { border-color: #111111 !important; }
html[data-theme="light"] .border-\[\#111111\]\/5  { border-color: rgba(17,17,17,0.05) !important; }
html[data-theme="light"] .border-\[\#111111\]\/8  { border-color: rgba(17,17,17,0.08) !important; }
html[data-theme="light"] .border-\[\#111111\]\/10 { border-color: rgba(17,17,17,0.10) !important; }
html[data-theme="light"] .border-\[\#111111\]\/12 { border-color: rgba(17,17,17,0.12) !important; }
html[data-theme="light"] .border-\[\#111111\]\/15 { border-color: rgba(17,17,17,0.15) !important; }
html[data-theme="light"] .border-\[\#111111\]\/20 { border-color: rgba(17,17,17,0.20) !important; }
html[data-theme="light"] .border-\[\#111111\]\/25 { border-color: rgba(17,17,17,0.25) !important; }
html[data-theme="light"] .border-\[\#111111\]\/30 { border-color: rgba(17,17,17,0.30) !important; }

/* Inputs */
html[data-theme="light"] input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
    border-color: rgba(0,0,0,0.15) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: rgba(0,0,0,0.35) !important; }

/* Tables */
html[data-theme="light"] thead { background-color: #f1f1ee !important; }
html[data-theme="light"] tr    { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] td,
html[data-theme="light"] th    { color: #111827 !important; }

/* Status badge colors — restore to natural light values */
html[data-theme="light"] .bg-yellow-100,
html[data-theme="light"] .bg-yellow-50   { background-color: #fef9c3 !important; }
html[data-theme="light"] .text-yellow-800,
html[data-theme="light"] .text-yellow-700,
html[data-theme="light"] .text-yellow-600 { color: #854d0e !important; }
html[data-theme="light"] .border-yellow-300,
html[data-theme="light"] .border-yellow-200  { border-color: #fde047 !important; }

html[data-theme="light"] .bg-green-100,
html[data-theme="light"] .bg-green-50   { background-color: #dcfce7 !important; }
html[data-theme="light"] .text-green-800,
html[data-theme="light"] .text-green-700,
html[data-theme="light"] .text-green-600 { color: #166534 !important; }
html[data-theme="light"] .border-green-300,
html[data-theme="light"] .border-green-200  { border-color: #86efac !important; }

html[data-theme="light"] .bg-blue-100,
html[data-theme="light"] .bg-blue-50    { background-color: #dbeafe !important; }
html[data-theme="light"] .text-blue-800,
html[data-theme="light"] .text-blue-700,
html[data-theme="light"] .text-blue-600 { color: #1e40af !important; }
html[data-theme="light"] .border-blue-300,
html[data-theme="light"] .border-blue-200   { border-color: #93c5fd !important; }

html[data-theme="light"] .bg-red-100,
html[data-theme="light"] .bg-red-50     { background-color: #fee2e2 !important; }
html[data-theme="light"] .text-red-800,
html[data-theme="light"] .text-red-700,
html[data-theme="light"] .text-red-600  { color: #991b1b !important; }
html[data-theme="light"] .border-red-300,
html[data-theme="light"] .border-red-200    { border-color: #fca5a5 !important; }

html[data-theme="light"] .bg-purple-100,
html[data-theme="light"] .bg-purple-50  { background-color: #f3e8ff !important; }
html[data-theme="light"] .text-purple-800,
html[data-theme="light"] .text-purple-700,
html[data-theme="light"] .text-purple-600 { color: #6b21a8 !important; }
html[data-theme="light"] .border-purple-300,
html[data-theme="light"] .border-purple-200 { border-color: #d8b4fe !important; }

html[data-theme="light"] .bg-orange-100,
html[data-theme="light"] .bg-orange-50  { background-color: #ffedd5 !important; }
html[data-theme="light"] .text-orange-800,
html[data-theme="light"] .text-orange-700,
html[data-theme="light"] .text-orange-600 { color: #9a3412 !important; }
html[data-theme="light"] .border-orange-300,
html[data-theme="light"] .border-orange-200 { border-color: #fdba74 !important; }

/* Pre / code blocks */
html[data-theme="light"] pre { background-color: #f3f4f6 !important; color: #374151 !important; }

/* Shadows */
html[data-theme="light"] .shadow-sm,
html[data-theme="light"] .shadow,
html[data-theme="light"] .shadow-lg,
html[data-theme="light"] .shadow-xl,
html[data-theme="light"] .shadow-2xl { box-shadow: 0 1px 12px rgba(0,0,0,0.08) !important; }

/* Card */
html[data-theme="light"] .card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Modal backdrop */
html[data-theme="light"] .fixed.inset-0.bg-black\/50,
html[data-theme="light"] .fixed.inset-0.bg-black\/60 { background-color: rgba(0,0,0,0.45) !important; }

/* Inline style attribute fixes — override common dark inline values left in dashboard HTML */
html[data-theme="light"] [style*="background:#ffffff"],
html[data-theme="light"] [style*="background: #ffffff"],
html[data-theme="light"] [style*="background-color:#ffffff"],
html[data-theme="light"] [style*="background-color: #ffffff"] { background-color: #ffffff !important; }

html[data-theme="light"] [style*="color:#374151"]   { color: #374151 !important; }
html[data-theme="light"] [style*="color:rgba(0,0,0,0.3"] { color: rgba(0,0,0,0.3) !important; }
html[data-theme="light"] [style*="color:rgba(0,0,0,0.4"] { color: rgba(0,0,0,0.4) !important; }
html[data-theme="light"] [style*="color:rgba(0,0,0,0.5"] { color: rgba(0,0,0,0.5) !important; }
html[data-theme="light"] [style*="color:rgba(0,0,0,0.6"] { color: rgba(0,0,0,0.6) !important; }
html[data-theme="light"] [style*="border-top:1px solid rgba(0,0,0"] { border-top-color: rgba(0,0,0,0.1) !important; }
html[data-theme="light"] [style*="border:1px solid rgba(0,0,0"]     { border-color: rgba(0,0,0,0.12) !important; }

/* ── SHOP PAGE – product cards & filter bar ─────────────────────────────── */
html[data-theme="light"] ._pcard                               { background: #ffffff !important; color: #0a0a0a !important; }
html[data-theme="light"] ._pcard:hover                         { background: #f5f5f2 !important; }
html[data-theme="light"] ._pcard-img                           { background: #f0f0ed !important; }
html[data-theme="light"] ._pcard:hover ._pcard-img             { background: #eaeae7 !important; }
html[data-theme="light"] ._pcard-name                          { color: #0a0a0a !important; }
html[data-theme="light"] ._pcard-cat                           { color: rgba(0,0,0,0.38) !important; }
html[data-theme="light"] ._pcard-desc                          { color: rgba(0,0,0,0.5) !important; }
html[data-theme="light"] ._pcard-price                         { color: rgba(0,0,0,0.75) !important; }
html[data-theme="light"] ._pcard-badge                         { color: rgba(0,0,0,0.35) !important; }
html[data-theme="light"] ._pcard-badge._featured               { color: rgba(0,0,0,0.7) !important; }
html[data-theme="light"] ._pcard:hover ._pcard-discover        { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] ._pcard-body                          { border-top-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] ._pcard-body::after                   { display: none !important; }
html[data-theme="light"] ._pcard-wishlist                      { color: rgba(0,0,0,0.25) !important; }
html[data-theme="light"] ._pcard-wishlist:hover,
html[data-theme="light"] ._pcard-wishlist._wishlisted          { color: #0a0a0a !important; }
/* filter buttons */
html[data-theme="light"] ._shop-filter-btn                     { color: rgba(0,0,0,0.5) !important; border-color: rgba(0,0,0,0.1) !important; }
html[data-theme="light"] ._shop-filter-btn:hover,
html[data-theme="light"] ._shop-filter-btn._active             { color: #000000 !important; }
html[data-theme="light"] ._shop-filter-btn._active::after      { background: #000000 !important; }
html[data-theme="light"] ._shop-filter-sort                    { border-color: rgba(0,0,0,0.1) !important; }
/* search */
html[data-theme="light"] ._shop-search                         { color: #0a0a0a !important; border-bottom-color: rgba(0,0,0,0.2) !important; }
html[data-theme="light"] ._shop-search::placeholder            { color: rgba(0,0,0,0.35) !important; }
html[data-theme="light"] ._shop-search:focus                   { border-bottom-color: rgba(0,0,0,0.6) !important; }
/* pending orders banner */
html[data-theme="light"] [style*="background:#1a0a00"]         { background: #fff8e1 !important; }

/* ── PARTNERS PAGE – partner cards ─────────────────────────────────────── */
html[data-theme="light"] .partner-card                         { background: #ffffff !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .partner-card:hover                   { box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .partner-img-wrap                     { background: #f0f0ed !important; }
html[data-theme="light"] .partner-overlay                      { background: rgba(0,0,0,0.25) !important; }
html[data-theme="light"] .partner-card:hover .partner-body     { border-top-color: #000000 !important; }
html[data-theme="light"] .partner-name                         { color: #111111 !important; }
html[data-theme="light"] .partner-desc                         { color: rgba(0,0,0,0.55) !important; }

/* ── CAREERS PAGE – sidebar, job buttons, form ──────────────────────────── */
html[data-theme="light"] .career-sidebar                       { background: #f8f8f5 !important; border-right: 1px solid rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .sidebar-header                       { border-bottom-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .job-btn:hover                        { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .job-btn + .job-btn                   { border-top-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .job-btn.active                       { background: rgba(0,0,0,0.05) !important; border-left-color: #000000 !important; }
html[data-theme="light"] .jb-label                             { color: rgba(0,0,0,0.4) !important; }
html[data-theme="light"] .job-btn.active .jb-label            { color: #000000 !important; }
html[data-theme="light"] .jb-title                             { color: rgba(0,0,0,0.75) !important; }
html[data-theme="light"] .job-btn.active .jb-title            { color: #000000 !important; }
html[data-theme="light"] .jb-short                             { color: rgba(0,0,0,0.45) !important; }
html[data-theme="light"] .job-btn.active .jb-short            { color: rgba(0,0,0,0.6) !important; }
html[data-theme="light"] .jb-arrow                             { color: rgba(0,0,0,0.2) !important; }
html[data-theme="light"] .job-btn.active .jb-arrow            { color: rgba(0,0,0,0.5) !important; }
html[data-theme="light"] .form-input                           { background: #ffffff !important; color: #0a0a0a !important; border-color: rgba(0,0,0,0.15) !important; }
html[data-theme="light"] .form-input:focus                     { border-color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] .form-input::placeholder              { color: rgba(0,0,0,0.3) !important; }
html[data-theme="light"] .form-input option                    { background: #ffffff !important; color: #0a0a0a !important; }
html[data-theme="light"] .form-label                           { color: rgba(0,0,0,0.55) !important; }
/* careers main content panel */
html[data-theme="light"] [style*="background:#000000;color:#ffffff;font-family:'Inter'"] { background: #f4f4f1 !important; }

/* ── ABOUT PAGE – faq, exec cards ───────────────────────────────────────── */
html[data-theme="light"] .faq-item                             { border-bottom-color: rgba(0,0,0,0.08) !important; }

/* ── GOLD TEXT suppression (all pages) ──────────────────────────────────── */
html[data-theme="light"] [style*="color:rgba(201,168,76"],
html[data-theme="light"] [style*="color: rgba(201,168,76"],
html[data-theme="light"] [style*="color:#c9a84c"],
html[data-theme="light"] [style*="color: #c9a84c"]             { color: rgba(0,0,0,0.5) !important; }
/* gold gradient divider lines (partners, careers, about hero) */
html[data-theme="light"] [style*="background:linear-gradient(90deg,#c9a84c"] { background: rgba(0,0,0,0.12) !important; }
/* gold Tailwind text utilities */
html[data-theme="light"] .text-\[\#c9a84c\]                   { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] .text-\[\#c9a84c\]\/80               { color: rgba(0,0,0,0.45) !important; }
html[data-theme="light"] .text-\[\#c9a84c\]\/60               { color: rgba(0,0,0,0.35) !important; }
/* gold gradient divider via utility (about page hero) */
html[data-theme="light"] .via-\[\#c9a84c\]\/60                { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.15) var(--tw-gradient-via-position,50%), var(--tw-gradient-to) !important; }
/* gold inline bg (careers submit button, job active bg) */
html[data-theme="light"] [style*="background:#c9a84c"]         { background: #111111 !important; color: #ffffff !important; }
html[data-theme="light"] [style*="background: #c9a84c"]        { background: #111111 !important; color: #ffffff !important; }
/* gold/warm blur blob (about hero decoration – make neutral) */
html[data-theme="light"] .bg-\[\#c9a84c\]                     { background-color: rgba(0,0,0,0.08) !important; }

/* ── COLLECTIONS – overrides for text-white inside cards ────────────────── */
html[data-theme="light"] .text-white                           { color: #111111 !important; }
html[data-theme="light"] .text-white\/90                       { color: rgba(17,17,17,0.9) !important; }
html[data-theme="light"] .text-white\/80                       { color: rgba(17,17,17,0.8) !important; }
html[data-theme="light"] .text-white\/70                       { color: rgba(17,17,17,0.7) !important; }
html[data-theme="light"] .text-white\/60                       { color: rgba(17,17,17,0.6) !important; }
html[data-theme="light"] .text-white\/50                       { color: rgba(17,17,17,0.5) !important; }
/* keep overlay text white on hover */
html[data-theme="light"] .partner-overlay-text                 { color: #ffffff !important; }
/* nav already handles its own text-white via _fn classes – no conflict */

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL INLINE-STYLE BORDER OVERRIDES  (white → dark)
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255"] { border-bottom-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255"]    { border-top-color:    rgba(0,0,0,0.08) !important; }
html[data-theme="light"] [style*="border-left:1px solid rgba(255,255,255"]   { border-left-color:   rgba(0,0,0,0.08) !important; }
html[data-theme="light"] [style*="border-right:1px solid rgba(255,255,255"]  { border-right-color:  rgba(0,0,0,0.08) !important; }
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255"]        { border-color:        rgba(0,0,0,0.12) !important; }
html[data-theme="light"] [style*="border:2px solid rgba(255,255,255"]        { border-color:        rgba(0,0,0,0.15) !important; }
html[data-theme="light"] [style*="border-left:2px solid rgba(255,255,255"]   { border-left-color:   rgba(0,0,0,0.12) !important; }
html[data-theme="light"] [style*="border-left:3px solid rgba(255,255,255"]   { border-left-color:   rgba(0,0,0,0.15) !important; }
/* height:1px divider lines using white rgba */
html[data-theme="light"] [style*="background:rgba(255,255,255,0.0"]  { background: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] [style*="background:rgba(255,255,255,0.1"]  { background: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] [style*="background:rgba(255,255,255,0.2"]  { background: rgba(0,0,0,0.12) !important; }
html[data-theme="light"] [style*="background:rgba(255,255,255,0.3"]  { background: rgba(0,0,0,0.16) !important; }
html[data-theme="light"] [style*="background:rgba(255,255,255,0.4"]  { background: rgba(0,0,0,0.22) !important; }
/* near-white overlays — keep light */
html[data-theme="light"] [style*="background:rgba(255,255,255,0.9"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.8"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.7"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.6"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.5"]  { background: rgba(255,255,255,0.95) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] footer,
html[data-theme="light"] ._footer-wrap         { background: #f4f4f1 !important; border-top-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] ._fl                  { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] ._fl:hover            { color: #000000 !important; }
html[data-theme="light"] ._fla                 { color: #000000 !important; }
html[data-theme="light"] ._fh                  { color: rgba(0,0,0,0.38) !important; }
/* Footer brand logo — only force dark logo to black; leave _logo-light (gold) untouched */
html[data-theme="light"] footer img._logo-dark { filter: brightness(0) !important; }
/* Footer h2 "FØRTEX" heading */
html[data-theme="light"] footer h2             { color: #111111 !important; }
/* Footer bottom border */
html[data-theme="light"] ._footer-bottom       { border-top-color: rgba(0,0,0,0.08) !important; }
/* Footer social icons */
html[data-theme="light"] footer a[style*="color:rgba(255,255,255,0.4)"] { color: rgba(0,0,0,0.4) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — index.php specific classes
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] ._stat-num            { color: #0a0a0a !important; }
/* scroll showcase dots */
html[data-theme="light"] ._ss-dot             { background: rgba(0,0,0,0.2) !important; }
/* marquee item bg */
html[data-theme="light"] ._idx-marquee span   { color: rgba(0,0,0,0.5) !important; }
/* hero scroll indicator line */
html[data-theme="light"] ._hcard-discover     { color: rgba(0,0,0,0) !important; }
html[data-theme="light"] ._hcard:hover ._hcard-discover { color: rgba(0,0,0,0.5) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   TAILWIND GRADIENT dark-from/to overrides (about hero, collections cards)
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .from-\[\#111111\] {
    --tw-gradient-from: #f4f4f1 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244,244,241,0)) !important;
}
html[data-theme="light"] .from-\[\#000000\] {
    --tw-gradient-from: #fafaf8 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250,250,248,0)) !important;
}
html[data-theme="light"] .via-\[\#1a1a1a\] {
    --tw-gradient-stops: var(--tw-gradient-from), #efefec var(--tw-gradient-via-position,50%), var(--tw-gradient-to, rgba(239,239,236,0)) !important;
}
html[data-theme="light"] .to-\[\#000000\]  { --tw-gradient-to: #fafaf8 !important; }
html[data-theme="light"] .to-\[\#111111\]  { --tw-gradient-to: #f4f4f1 !important; }
/* About hero absolute opacity-10 decoration — bg-[#c9a84c] blur blob already handled */
/* from-black/70 overlay on collection card images — make it light */
html[data-theme="light"] .from-black\/70   { --tw-gradient-from: rgba(255,255,255,0.55) !important; }
html[data-theme="light"] .from-black\/60   { --tw-gradient-from: rgba(0,0,0,0.35) !important; }
html[data-theme="light"] .from-black\/50   { --tw-gradient-from: rgba(0,0,0,0.25) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE
   ══════════════════════════════════════════════════════════════════════════ */
/* Pending amber banner (also used on cart.php) */
html[data-theme="light"] [style*="background:#92400e"]  { background: #fef3c7 !important; color: #92400e !important; }
/* Wishlist/variant buttons border overrides if not caught above */
html[data-theme="light"] .variant-btn,
html[data-theme="light"] .color-option,
html[data-theme="light"] .size-option                   { border-color: rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .variant-btn:hover,
html[data-theme="light"] .color-option:hover,
html[data-theme="light"] .size-option:hover             { border-color: rgba(0,0,0,0.35) !important; }
/* selected state — inline style sets border:#ffffff → override */
html[data-theme="light"] .variant-btn[style*="border-color:#ffffff"],
html[data-theme="light"] .color-option[style*="border-color:#ffffff"],
html[data-theme="light"] .size-option[style*="border-color:#ffffff"]  { border-color: #000000 !important; }
/* selected state (.selected class) — in dark mode the chip inverts to white;
   in light mode invert to dark instead, otherwise it blends into the page.
   Specificity (0,3,1) beats the generic [style*="background:#111111"] override (0,2,1). */
html[data-theme="light"] .variant-btn.selected,
html[data-theme="light"] .color-option.selected,
html[data-theme="light"] .size-option.selected {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .variant-btn.selected span,
html[data-theme="light"] .color-option.selected span { color: rgba(255,255,255,0.85) !important; }
/* thumb-btn selected: border:2px solid #111111 inline → ok already */
html[data-theme="light"] .thumb-btn[style*="border:2px solid #111111"] { border-color: #000000 !important; }
/* product image placeholder bg */
html[data-theme="light"] #noImgPlaceholder { background: #f0f0ed !important; }
/* product main image bg (background:#0a0a0a inline) — covered by inline override */
/* Add to Cart button: already white bg / black text — fine, keep hover gold suppressed */
html[data-theme="light"] button[onmouseover*="c9a84c"] {
    --hover-bg: #0a0a0a !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CART / CHECKOUT / ORDERS / WISHLIST  (all use Tailwind CDN + dark block)
   ══════════════════════════════════════════════════════════════════════════ */
/* Amber warning banner */
html[data-theme="light"] [style*="background:#92400e"] { background: #fef3c7 !important; color: #92400e !important; }
/* text-gold (Tailwind extend) */
html[data-theme="light"] .text-gold { color: #0a0a0a !important; }
/* bg-black/40 used for quantity input bg */
html[data-theme="light"] .bg-black\/40  { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-black\/20  { background: rgba(0,0,0,0.03) !important; }
html[data-theme="light"] .bg-black\/10  { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-black\/5   { background: rgba(0,0,0,0.03) !important; }
/* border-white/8, border-white/10, border-white/12, border-white/20 used on cart cards */
html[data-theme="light"] .border-white\/8,
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/12 { border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .border-white\/20  { border-color: rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .border-white\/40  { border-color: rgba(0,0,0,0.2) !important; }
/* hover:border-white/20, hover:border-white/12 */
html[data-theme="light"] .hover\:border-white\/12:hover { border-color: rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .hover\:border-white\/20:hover { border-color: rgba(0,0,0,0.15) !important; }
/* text-white/55, text-white/65, text-white/75, text-white/40 used in cart items */
html[data-theme="light"] .text-white\/75  { color: rgba(0,0,0,0.75) !important; }
html[data-theme="light"] .text-white\/65  { color: rgba(0,0,0,0.65) !important; }
html[data-theme="light"] .text-white\/55  { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] .text-white\/45  { color: rgba(0,0,0,0.45) !important; }
html[data-theme="light"] .text-white\/40  { color: rgba(0,0,0,0.4) !important; }
html[data-theme="light"] .text-white\/30  { color: rgba(0,0,0,0.3) !important; }
html[data-theme="light"] .text-white\/20  { color: rgba(0,0,0,0.2) !important; }
html[data-theme="light"] .text-white\/10  { color: rgba(0,0,0,0.1) !important; }
/* White text on Tailwind color backgrounds in cart (bg-[#111111]) — covered */
/* focus:border-white/40 */
html[data-theme="light"] .focus\:border-white\/40:focus { border-color: rgba(0,0,0,0.35) !important; }
/* bg-white/5, bg-white/10 used for variant tag pills */
html[data-theme="light"] .bg-white\/5  { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-white\/10 { background: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .bg-white\/15 { background: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .bg-white\/20 { background: rgba(0,0,0,0.10) !important; }
/* hover:bg-white/10 */
html[data-theme="light"] .hover\:bg-white\/10:hover { background: rgba(0,0,0,0.06) !important; }
/* hover:opacity-90 on checkout/cart submit buttons — fine */
/* CHECKOUT — Place Order & Pay button: solid color in light mode */
html[data-theme="light"] #placeOrderBtn {
    background-image: none !important;
    background-color: #ffffff !important;
    color: #111111 !important;
}
/* CHECKOUT — item card bg-[#141414] forced dark by inline style → override to light */
html[data-theme="light"] .bg-\[\#141414\] { background-color: #f0f0ed !important; }
/* DASHBOARD customer tab — order/download rows and Edit Profile card use bg-[#141414]/50 */
html[data-theme="light"] .bg-\[\#141414\]\/50 { background-color: transparent !important; }
html[data-theme="light"] .hover\:bg-\[\#141414\]:hover { background-color: rgba(0,0,0,0.04) !important; }
/* CHECKOUT — dark gradient icon boxes (from-[#111111] to-[#0a0a0a]) → light neutral */
html[data-theme="light"] .from-\[\#111111\].to-\[\#0a0a0a\]:not(.bg-clip-text) {
    background-image: none !important;
    background-color: #e0e0dd !important;
}
/* CHECKOUT — bg-clip-text gradient total price → plain dark text in light mode */
html[data-theme="light"] .bg-clip-text.from-\[\#111111\] {
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #111111 !important;
}
/* CHECKOUT — Fleeca payment card: from-green-50/to-emerald-50 keeps light green bg in dark mode
   (inline style only overrides .bg-green-50, not CSS gradient-stop variables) → override rendered gradient */
html[data-theme="dark"] .bg-gradient-to-r.from-green-50 {
    background-image: linear-gradient(to right, rgba(34,197,94,0.08), rgba(16,185,129,0.08)) !important;
}
html[data-theme="dark"] .border-green-300 {
    border-color: rgba(74,222,128,0.28) !important;
}

/* divide-gray-200 cells */
html[data-theme="light"] .divide-\[\#111111\]\/10 > * + * { border-color: rgba(0,0,0,0.08) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   SELECT CHARACTER PAGE
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] ._sc-sub                           { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] ._sc-group-label                   { color: rgba(0,0,0,0.35) !important; }
html[data-theme="light"] ._sc-group-label._new              { color: rgba(0,0,0,0.45) !important; }
html[data-theme="light"] ._sc-char-label                    { border-color: rgba(0,0,0,0.1) !important; }
html[data-theme="light"] ._sc-char-label:hover              { border-color: rgba(0,0,0,0.25) !important; }
html[data-theme="light"] ._sc-char-label._active-choice     { border-color: #000000 !important; background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] ._sc-char-dot                      { border-color: rgba(0,0,0,0.25) !important; }
html[data-theme="light"] ._sc-char-dot::after               { background: rgba(0,0,0,0.7) !important; }
html[data-theme="light"] ._sc-char-name                     { color: #111111 !important; }
html[data-theme="light"] ._sc-char-role                     { color: rgba(0,0,0,0.5) !important; }
html[data-theme="light"] ._sc-char-badge                    { color: rgba(0,0,0,0.4) !important; }
html[data-theme="light"] ._sc-char-badge._new               { color: rgba(0,0,0,0.45) !important; }
html[data-theme="light"] ._sc-btn                           { background: #111111 !important; color: #ffffff !important; }
html[data-theme="light"] ._sc-btn:hover                     { background: #000000 !important; }
html[data-theme="light"] ._sc-footer                        { color: rgba(0,0,0,0.4) !important; }
html[data-theme="light"] ._sc-footer a                      { color: rgba(0,0,0,0.45) !important; }
html[data-theme="light"] ._sc-footer a:hover                { color: #000000 !important; }
html[data-theme="light"] ._sc-divider                       { background: rgba(0,0,0,0.07) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   AUTH / REGISTER / VERIFY pages  (dark inline body + Tailwind)
   ══════════════════════════════════════════════════════════════════════════ */
/* body bg #111111 → covered by inline bg override already */
/* These pages use Tailwind CDN, so the Tailwind reversal above handles it */
/* Specific register/auth classes */
html[data-theme="light"] .peer:checked ~ .peer-checked\:bg-\[\#111111\] { background: #111111 !important; color: #ffffff !important; }
html[data-theme="light"] .peer:checked ~ .peer-checked\:border-\[\#111111\] { border-color: #111111 !important; }
html[data-theme="light"] .peer:checked ~ .peer-checked\:text-white { color: #ffffff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   CUSTOMIZE PAGE  (bespoke commission form)
   ══════════════════════════════════════════════════════════════════════════ */
/* This page has its own thorough dark override block, which our Tailwind reversals above mostly undo.
   Additional specifics: */
/* Progress step circles: active bg-[#111111] text-white → should stay dark/filled in light mode */
html[data-theme="light"] #reqFilterBar { background: #f4f4f1 !important; border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] #reqFilterBar button { color: rgba(0,0,0,0.5) !important; }
html[data-theme="light"] #reqFilterBar .bg-white { background: #ffffff !important; color: #111111 !important; }
/* Message bubble (admin) bg-[#f0ede6] → warm cream (already covered) */
/* Scrollbar inside customize modal */
html[data-theme="light"] .overflow-y-auto::-webkit-scrollbar-track { background: #f0f0ed !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PROFILE PAGE  (no own style block — pure Tailwind + inline styles)
   ══════════════════════════════════════════════════════════════════════════ */
/* All covered by Tailwind reversal and inline style overrides above */

/* ══════════════════════════════════════════════════════════════════════════
   HOVER JS INLINE  (onmouseover sets white-text / gold-bg via JS)
   ══════════════════════════════════════════════════════════════════════════ */
/* These can't be overridden with CSS since JS writes style directly.
   The toggle JS in nav.php fires on theme switch, but page inline JS
   handlers (onmouseover) will re-apply dark values on hover.
   Best-effort: override button hover states via CSS where possible. */

/* product page "Add to Cart" — on hover JS sets background:#c9a84c → suppress */
/* We can't override JS-set inline styles from CSS without !important on the element directly.
   Accepted limitation for now; primary resting state is correct. */

/* ══════════════════════════════════════════════════════════════════════════
   MISC INLINE BACKGROUND FIXES
   ══════════════════════════════════════════════════════════════════════════ */
/* #1a1a1a used in some sections */
html[data-theme="light"] [style*="background:#1a1a1a"],
html[data-theme="light"] [style*="background: #1a1a1a"]  { background: #ebebeb !important; }
/* #141414 */
html[data-theme="light"] [style*="background:#141414"],
html[data-theme="light"] [style*="background: #141414"]  { background: #f4f4f1 !important; }
/* rgba(17,17,17,...) panel bg */
html[data-theme="light"] [style*="background:rgba(17,17,17,0.4"],
html[data-theme="light"] [style*="background:rgba(17,17,17,0.5"]  { background: rgba(0,0,0,0.04) !important; }
/* linear-gradient from-black overlays (e.g. band-item-cap, collection card overlay) */
html[data-theme="light"] [style*="background:linear-gradient(to top,rgba(0,0,0,0.7"]  { background: linear-gradient(to top, rgba(0,0,0,0.55), transparent) !important; }
html[data-theme="light"] [style*="background:linear-gradient(to top,rgba(0,0,0,0.5"]  { background: linear-gradient(to top, rgba(0,0,0,0.4), transparent) !important; }
/* sticky filter bar bg #0a0a0a inline (shop page) → light */
html[data-theme="light"] [style*="background:#0a0a0a"][style*="position:sticky"] { background: #ffffff !important; }
/* pending orders banner #0d0d0d inline (index.php) */
html[data-theme="light"] [style*="background:#0d0d0d"] { background: #f8f8f5 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   INLINE COLOR FIXES — high-opacity white variants not caught by catch-all
   ══════════════════════════════════════════════════════════════════════════ */
/* #bbbbbb "dot" separator on product page — already dark, keep */
html[data-theme="light"] [style*="color:#bbbbbb"] { color: rgba(0,0,0,0.3) !important; }
/* rgba(200,255,200,...) = light green success text on product page — make dark in light mode */
html[data-theme="light"] [style*="color:rgba(200,255,200"] { color: rgba(0,100,50,0.9) !important; }
/* rgba(201,168,76,...) = gold eyebrow/accent — already handled above */

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT-MODE ACCENT COLOURS — buttons / CTAs
   ══════════════════════════════════════════════════════════════════════════ */
/* Any explicit bg-[#111111] Tailwind class used as a CTA button stays dark */
html[data-theme="light"] .bg-\[\#111111\].text-\[\#ffffff\],
html[data-theme="light"] .bg-\[\#111111\].text-white { background: #111111 !important; color: #ffffff !important; }
html[data-theme="light"] .hover\:bg-\[\#000000\]:hover { background: #000000 !important; color: #ffffff !important; }
/* bg-[#111111] used as step circle / badge bg — stay dark */
html[data-theme="light"] .bg-\[\#0a0a0a\] { background: #0a0a0a !important; }
/* ring/focus rings */
html[data-theme="light"] .ring-white\/20 { --tw-ring-color: rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .ring-white\/10 { --tw-ring-color: rgba(0,0,0,0.08) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   bg-[#111111] BROAD REVERSAL  (card containers, image wells, list items)
   Buttons with text-white keep dark bg via higher-specificity rule below.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .bg-\[\#111111\]  { background-color: #efefec !important; }
/* Product card / collection card image areas must stay dark — they contain images and gradient overlays */
html[data-theme="light"] .product-card .bg-\[\#111111\] { background-color: #111111 !important; }
/* CTA buttons / step circles that deliberately need dark bg */
html[data-theme="light"] .bg-\[\#111111\].text-white,
html[data-theme="light"] .bg-\[\#111111\].text-\[\#ffffff\],
html[data-theme="light"] .bg-\[\#111111\].font-semibold,
html[data-theme="light"] .bg-\[\#111111\].font-bold    { background-color: #111111 !important; }
/* hover:bg-[#111111] keeps dark for buttons */
html[data-theme="light"] .hover\:bg-\[\#111111\]:hover { background-color: #111111 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   REMAINING TAILWIND UTILITY REVERSALS
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .text-\[\#ffffff\]\/70 { color: rgba(17,17,17,0.7) !important; }
html[data-theme="light"] .text-\[\#ffffff\]\/50 { color: rgba(17,17,17,0.5) !important; }
html[data-theme="light"] .bg-black       { background-color: #fafaf8 !important; }
html[data-theme="light"] .bg-black\/70   { background-color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] .bg-black\/60   { background-color: rgba(0,0,0,0.45) !important; }
html[data-theme="light"] .bg-black\/50   { background-color: rgba(0,0,0,0.35) !important; }
html[data-theme="light"] .bg-black\/40   { background-color: rgba(0,0,0,0.28) !important; }
html[data-theme="light"] .bg-black\/30   { background-color: rgba(0,0,0,0.2) !important; }
html[data-theme="light"] .bg-black\/20   { background-color: rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .from-black {
    --tw-gradient-from: rgba(0,0,0,0.55) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM FOCUS STYLES
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .focus\:border-white\/40:focus  { border-color: rgba(0,0,0,0.35) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   SHADOW ADJUSTMENTS
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .shadow,
html[data-theme="light"] .shadow-sm      { box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important; }
html[data-theme="light"] .shadow-lg      { box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; }
html[data-theme="light"] .shadow-xl      { box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important; }
html[data-theme="light"] .shadow-2xl     { box-shadow: 0 16px 48px rgba(0,0,0,0.1) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   SCROLLBAR  (override earlier rule to ensure last-write wins)
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0ed !important; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   INLINE GRADIENT OVERLAYS — keep readable on light bg
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] [style*="background:linear-gradient(to top,rgba(0,0,0,0.6"] { background: linear-gradient(to top, rgba(0,0,0,0.4), transparent) !important; }
html[data-theme="light"] [style*="background:linear-gradient(to top,rgba(0,0,0,0.4"] { background: linear-gradient(to top, rgba(0,0,0,0.25), transparent) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   VERIFY.PHP — custom class overrides (no Tailwind, uses own <style> block)
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .hero                  { background: #f4f4f1 !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .form-band             { background: #efefec !important; border-bottom-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .hero-title            { color: #0a0a0a !important; }
html[data-theme="light"] .hero-sub              { color: rgba(0,0,0,0.48) !important; }
html[data-theme="light"] .code-input            { background: #ffffff !important; border-color: rgba(0,0,0,0.18) !important; color: #0a0a0a !important; }
html[data-theme="light"] .code-input::placeholder { color: rgba(0,0,0,0.3) !important; }
html[data-theme="light"] .content-area          { background: #fafaf8 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   REGISTER.PHP / AUTH.PHP — standalone pages with class-based dark styles
   ══════════════════════════════════════════════════════════════════════════ */
/* These pages use Tailwind so the existing Tailwind reversals handle most things.
   The body inline style is caught by [style*="background:#000000"] above. */

/* ══════════════════════════════════════════════════════════════════════════
   PROFILE.PHP — any remaining dark sections
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] [style*="background:#0a0a0a;font-family"] { background: #fafaf8 !important; color: #0a0a0a !important; }