/* =====================================================
   SWARN PRODUCTS - GLOBAL STYLESHEET
   File: /assets/styles.css
===================================================== */

/* ================= GOOGLE FONT FALLBACK ================= */
/* body {
    font-family: 'Inter', sans-serif;
    background: #0C0C0A;
    color: #F5F0E8;
    overflow-x: hidden;
} */
body {

    font-family: 'Inter', sans-serif;

    background: var(--bg);

    color: var(--text);

    overflow-x: hidden;

    transition:
        background .35s ease,
        color .35s ease;

}

/* =====================================================
   THEME VARIABLES
=====================================================*/

:root {

    --saffron: #B71C1C;
    --saffron-dark: #B04412;

    --green: #2E7A2E;
    --green-dark: #1D5C1D;

    --bg: #0C0C0A;
    --bg-soft: #121210;

    --card: #1A1A16;

    --text: #F5F0E8;

    --muted: #A9A39A;

    --border: rgba(255, 255, 255, .08);

    --shadow: rgba(0, 0, 0, .45);

}

html[data-theme="light"] {

    --bg: #F8F6F2;

    --bg-soft: #FFFFFF;

    --card: #FFFFFF;

    --text: #111111;

    --muted: #666666;

    --border: rgba(0, 0, 0, .10);

    --shadow: rgba(0, 0, 0, .08);

}

/* ================= ROOT COLORS ================= */
/* :root {
    --saffron: #B71C1C;
    --saffron-dark: #B04412;
    --green: #2E7A2E;
    --green-dark: #1D5C1D;
    --ink: #0C0C0A;
    --ink-soft: #121210;
    --card: #1A1A16;
    --cream: #F5F0E8;
    --white: #ffffff;
    --muted: #A9A39A;
    --border: rgba(255, 255, 255, 0.08);
} */

/* ================= RESET ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

button {
    border: none;
    outline: none;
    cursor: pointer;
}

/* ================= CUSTOM SCROLLBAR ================= */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: var(--saffron);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--saffron-dark);
}

/* ================= COMMON CONTAINER ================= */
.site-container {
    width: 100%;
    max-width: 1440px;
    margin: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Theming utility — replaces hard-coded #121210 section backgrounds */
.mbmsi-bg-soft {
    background: var(--bg-soft) !important;
}

@media (min-width: 980px) {
    .site-container {
        padding-left: 56px;
        padding-right: 56px;
    }
}

/* ================= HEADINGS ================= */
.display-font {
    font-family: Georgia, 'Times New Roman', serif;
}

.section-title {
    font-size: 2.6rem;
    line-height: 1.1;
    margin-bottom: 12px;
    color: var(--text);
}

.section-subtitle {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

/* ================= BUTTONS ================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    transition: all .3s ease;
}

.btn-saffron {
    background: var(--saffron);
    color: white;
}

.btn-saffron:hover {
    background: var(--saffron-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 44px rgba(212, 89, 26, .38);
}

.btn-green {
    background: var(--green);
    color: white;
}

.btn-green:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 44px rgba(46, 122, 46, .28);
}

.btn-outline {
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-outline:hover {
    border-color: var(--saffron);
    color: var(--saffron);
}

/* ================= MARQUEE ================= */
.marquee-container {
    background: var(--saffron);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    height: 42px;
    display: flex;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.marquee-content {
    display: inline-flex;
    gap: 30px;
    width: max-content;
    animation: marquee 24s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ================= HERO ANIMATION ================= */
.slide-content {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.hero-slide.active .slide-content {
    opacity: 1;
    transform: translateY(0);
}

/* ================= GENERAL REVEAL ================= */
.reveal {
    opacity: 0;
    transform: translateY(24px) scale(.99);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ================= DISCOUNT RIBBON BADGE ================= */
.discount-ribbon {
    position: absolute;
    top: 14px;
    right: -4px;
    left: auto;
    z-index: 10;
    background: #B71C1C;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 12px 5px 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* arrow points LEFT — right-side ribbon */
    clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
    box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.25);
}

.discount-ribbon::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: -5px;
    width: 4px;
    height: 5px;
    background: #8B3410;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ================= STOCK RIBBON BADGE (LEFT SIDE) ================= */
.stock-ribbon {
    position: absolute;
    top: 14px;
    left: -4px;
    z-index: 10;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 10px 5px 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* arrow points RIGHT — left-side ribbon */
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
}

.stock-ribbon::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 4px;
    height: 5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.stock-ribbon.in-stock {
    background: #2E7A2E;
}

.stock-ribbon.in-stock::before {
    background: #1D5C1D;
}

.stock-ribbon.sold-out {
    background: #DC2626;
}

.stock-ribbon.sold-out::before {
    background: #991B1B;
}

.product-card {
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: .3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 89, 26, .25);
}

.product-image {
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 12px;
    transition: transform .4s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.06);
}

.product-body {
    padding: 18px;
}

.price {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.old-price {
    font-size: 14px;
    color: var(--muted);
    text-decoration: line-through;
    margin-left: 6px;
}

/* ================= CATEGORY CARD ================= */
.category-card {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    color: white;
    padding: 24px;
    display: flex;
    align-items: flex-end;
}

.category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent 55%);
}

.category-card>* {
    position: relative;
    z-index: 2;
}

.category-card:hover {
    transform: scale(1.01);
}

/* ================= TRUST STRIP ================= */
.trust-strip {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media(min-width:980px) {
    .trust-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trust-box {
    background: var(--card);
    padding: 18px;
    transition: .3s ease;
}

.trust-box:hover {
    background: #20201b;
}

/* ================= NEWSLETTER ================= */
.newsletter {
    background: linear-gradient(110deg,
            var(--saffron) 0%,
            var(--saffron) 48%,
            var(--green) 52%,
            var(--green) 100%);
}

.newsletter input {
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .4);
    color: white;
}

.newsletter input::placeholder {
    color: rgba(255, 255, 255, .7);
}

/* ================= FOOTER ================= */
footer {
    background: #090909;
    color: var(--muted);
    position: relative;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right,
            var(--saffron) 0%,
            var(--saffron) 50%,
            var(--green) 50%,
            var(--green) 100%);
}

footer a {
    color: var(--muted);
}

footer a:hover {
    color: var(--saffron);
    padding-left: 5px;
}

/* ================= FLOATING WHATSAPP ================= */
.whatsapp-float {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    z-index: 999;
    box-shadow: 0 14px 34px rgba(37, 211, 102, .35);
    animation: pulseShadow 3s ease-in-out infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

@keyframes pulseShadow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
    }

    50% {
        box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
    }
}

/* ================= COLOR RADIO ================= */
.color-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.color-radio:checked {
    transform: scale(1.1);
    border: 1px solid white;
    box-shadow: 0 0 0 2px #111, 0 0 0 3px white;
}

/* ================= RESPONSIVE ================= */
@media(max-width:979px) {

    .section-title {
        font-size: 2rem;
    }

    .btn {
        width: 100%;
    }

    .mobile-stack {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hide-mobile {
        display: none !important;
    }
}

/* ================= DESKTOP ONLY ================= */
@media(min-width:980px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Hero Section Shards */
/* ================= HERO IMAGE CARDS FIXED FIT ================= */
/* ================= CLEAN IMAGE CARDS ================= */

.mbmsi-scene {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card */
.bag {
    position: absolute;
    overflow: hidden;
    border-radius: 24px;
    background: #ffffff;
    /* same clean card for all */
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
    transition: .4s ease;
    animation: floatBag 5s ease-in-out infinite;
}

/* Image */
.bag img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* fit image inside */
    object-position: center;
    display: block;
    padding: 18px;
    background: #ffffff;
}

/* LEFT */
.bag-back {
    width: 230px;
    height: 360px;
    left: 0;
    top: 85px;
    transform: rotate(-10deg);
    z-index: 1;
}

/* CENTER */
.bag-main {
    width: 290px;
    height: 430px;
    left: 35%;
    top: 20px;
    transform: translateX(-50%);
    z-index: 3;
}

/* RIGHT */
.bag-pack {
    width: 190px;
    height: 290px;
    right: 10px;
    top: 170px;
    transform: rotate(9deg);
    z-index: 2;
}

/* Hover */
.mbmsi-scene:hover .bag-back {
    transform: rotate(-12deg) translateY(-8px);
}

.mbmsi-scene:hover .bag-main {
    transform: translateX(-50%) translateY(-10px);
}

.mbmsi-scene:hover .bag-pack {
    transform: rotate(12deg) translateY(-8px);
}

@keyframes floatBag {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -8px;
    }
}

/* Mobile */
@media(max-width:768px) {

    .mbmsi-scene {
        min-height: 420px;
        margin-top: 30px;
    }

    .bag-back {
        width: 160px;
        height: 250px;
        top: 130px;
    }

    .bag-main {
        width: 210px;
        height: 320px;
        top: 40px;
    }

    .bag-pack {
        width: 130px;
        height: 210px;
        top: 210px;
        right: 0;
    }
}

/* Hero Section Shards */
/* Whatsapp */
.mbmsi-wa {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    z-index: 999;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(37, 211, 102, .45);
}

/* Whatsapp */
/* =====================================================
   LIGHT THEME — COMPLETE DESIGN SYSTEM
   All overrides scoped to [data-theme="light"].
   Dark theme variables above are untouched.
===================================================== */

html[data-theme="light"] {
    --bg: #F7F4EF;
    --bg-soft: #EEEAE3;
    --card: #FFFFFF;
    --text: #1A1612;
    --muted: #6B6560;
    --border: rgba(0, 0, 0, 0.09);
    --shadow: rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] body {
    background: var(--bg);
    color: var(--text);
}

html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #e8e4de;
}

/* --- HEADER --- */
html[data-theme="light"] header {
    background: rgba(247, 244, 239, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] header .text-white,
html[data-theme="light"] header a,
html[data-theme="light"] header button {
    color: #1A1612 !important;
}

html[data-theme="light"] header nav a {
    color: #4A4440 !important;
}

html[data-theme="light"] header nav a:hover {
    color: #B71C1C !important;
}

html[data-theme="light"] #mobileMenu>div:last-child {
    background: #ffffff !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.10) !important;
}

html[data-theme="light"] #mobileMenu nav a {
    color: #2A2420 !important;
}

html[data-theme="light"] #profileMenu {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] #profileMenu a {
    color: #2A2420 !important;
}

html[data-theme="light"] #profileMenu a:hover {
    background: #F7F4EF !important;
    color: #B71C1C !important;
}

html[data-theme="light"] #profileMenu .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] #profileMenu .text-\[\#c9c2b8\] {
    color: #6B6560 !important;
}

html[data-theme="light"] #searchBar select,
html[data-theme="light"] #searchBar input {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1A1612 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] #searchSuggestions {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
}

html[data-theme="light"] #themeToggle {
    background: rgba(255, 180, 0, 0.12) !important;
    border-color: rgba(255, 160, 0, 0.28) !important;
}

/* --- HERO SECTION --- */
html[data-theme="light"] .mbmsi-hero {
    background:
        radial-gradient(ellipse at 68% 20%, rgba(212, 89, 26, .13) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 80%, rgba(46, 122, 46, .10) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 200, 140, .07) 0%, transparent 70%),
        linear-gradient(160deg, #FDF8F2 0%, #F5F0E8 40%, #EFF5EF 100%) !important;
}

html[data-theme="light"] .mbmsi-eyebrow {
    color: #8A6A50 !important;
    opacity: 1 !important;
}

html[data-theme="light"] .mbmsi-h1 {
    color: #1A1210 !important;
}

html[data-theme="light"] .mbmsi-accent {
    color: #B71C1C !important;
}

html[data-theme="light"] .mbmsi-green {
    color: #2E7A2E !important;
}

html[data-theme="light"] .mbmsi-sub {
    color: #5A524C !important;
}

html[data-theme="light"] .bag {
    box-shadow: 0 24px 60px rgba(180, 100, 40, .14), 0 4px 12px rgba(0, 0, 0, .08) !important;
}

/* --- MARQUEE STRIP --- */
html[data-theme="light"] .mbmsi-marquee {
    background: linear-gradient(90deg, #B71C1C 0%, #C24B10 100%) !important;
    box-shadow: 0 2px 10px rgba(212, 89, 26, 0.25) !important;
}

/* --- TRUST STRIP --- */
html[data-theme="light"] .mbmsi-trust {
    background: linear-gradient(135deg, #F0EBE3 0%, #E8E3DB 100%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] .mbmsi-trust-item {
    background: #ffffff !important;
    color: #2A2420 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .mbmsi-trust-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-2px) !important;
}

html[data-theme="light"] .mbmsi-trust-item small {
    color: #8A8078 !important;
}

/* --- SECTION BACKGROUNDS --- */
html[data-theme="light"] .mbmsi-section {
    background: var(--bg) !important;
}

html[data-theme="light"] .mbmsi-bg-soft,
html[data-theme="light"] .mbmsi-section[style*="background:#121210"],
html[data-theme="light"] section[style*="background:#121210"] {
    background: #EDEAE4 !important;
}

/* --- SECTION TITLES --- */
html[data-theme="light"] .mbmsi-title,
html[data-theme="light"] section h2 {
    color: #1A1210 !important;
}

html[data-theme="light"] section h3 {
    color: #2A2420 !important;
}

html[data-theme="light"] .mbmsi-muted {
    color: #7A726A !important;
}

/* --- PRODUCT CARDS --- */
html[data-theme="light"] .product-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06) !important;
    transition: box-shadow .3s, transform .3s, border-color .3s !important;
}

html[data-theme="light"] .product-card:hover {
    box-shadow: 0 10px 32px rgba(212, 89, 26, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(212, 89, 26, 0.25) !important;
    transform: translateY(-5px) !important;
}

html[data-theme="light"] .product-image {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .product-card .price,
html[data-theme="light"] .price {
    color: #1A1210 !important;
}

html[data-theme="light"] .product-info h3,
html[data-theme="light"] .product-card h3 {
    color: #1A1210 !important;
}

html[data-theme="light"] .product-info .old,
html[data-theme="light"] .old-price {
    color: #A09890 !important;
}

html[data-theme="light"] .product-info [style*="color:#F5956A"] {
    color: #B71C1C !important;
}

html[data-theme="light"] .cart-btn {
    background: var(--saffron) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(212, 89, 26, 0.25) !important;
}

html[data-theme="light"] .cart-btn:hover {
    background: var(--saffron-dark) !important;
    box-shadow: 0 6px 20px rgba(212, 89, 26, 0.38) !important;
    transform: translateY(-1px) !important;
}

/* Category / products page cards */
html[data-theme="light"] .group.bg-\[\#161613\],
html[data-theme="light"] .group.bg-\[\#151513\] {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .group.bg-\[\#161613\]:hover,
html[data-theme="light"] .group.bg-\[\#151513\]:hover {
    box-shadow: 0 10px 32px rgba(212, 89, 26, 0.12) !important;
    border-color: rgba(212, 89, 26, 0.25) !important;
}

/* --- CATEGORY GRID CARDS (homepage) --- */
html[data-theme="light"] .cat-1 {
    background: linear-gradient(135deg, #FDE8D4, #F5C9A0) !important;
}

html[data-theme="light"] .cat-2 {
    background: linear-gradient(135deg, #D4EDD4, #A8D4A8) !important;
}

html[data-theme="light"] .cat-3 {
    background: linear-gradient(135deg, #FDE8D4, #EAC090) !important;
}

html[data-theme="light"] .cat-4 {
    background: linear-gradient(135deg, #D4EDD4, #90C490) !important;
}

html[data-theme="light"] .cat-card::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.10) 55%) !important;
}

/* --- PROMO BOXES --- */
html[data-theme="light"] .promo-1 {
    background: linear-gradient(135deg, #FDEBD8 0%, #F5C9A0 60%, #EDB080 100%) !important;
}

html[data-theme="light"] .promo-2 {
    background: linear-gradient(135deg, #D8EDD8 0%, #A8D4A8 60%, #88C488 100%) !important;
}

html[data-theme="light"] .promo-box h3 {
    color: #1A1210 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

html[data-theme="light"] .promo-box p {
    color: #3A3028 !important;
}

html[data-theme="light"] .promo-box [style*="#F5956A"] {
    color: #C04010 !important;
}

html[data-theme="light"] .promo-box [style*="#4CAF50"] {
    color: #1D5C1D !important;
}

/* --- FOOTER --- */
html[data-theme="light"] footer {
    background: linear-gradient(160deg, #2A1E14 0%, #1A1410 100%) !important;
    color: #C0B8AE !important;
}

html[data-theme="light"] footer h4 {
    color: #F5F0E8 !important;
}

html[data-theme="light"] footer a {
    color: #B0A898 !important;
}

html[data-theme="light"] footer a:hover {
    color: #B71C1C !important;
}

html[data-theme="light"] footer .text-white {
    color: #F5F0E8 !important;
}

html[data-theme="light"] footer p {
    color: #B0A898 !important;
}

html[data-theme="light"] footer span:not([class*="text-\[#B71C1C\]"]) {
    color: #B0A898 !important;
}

html[data-theme="light"] footer .text-\[\#a59f95\],
html[data-theme="light"] footer .text-\[\#8d877e\],
html[data-theme="light"] footer .text-\[\#bdb7ad\],
html[data-theme="light"] footer .text-\[\#c7c1b7\],
html[data-theme="light"] footer .text-\[\#c6c0b6\] {
    color: #908880 !important;
}

html[data-theme="light"] footer .border-white\/10,
html[data-theme="light"] footer [class*="border-white"] {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="light"] footer .w-10.h-10 {
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #B0A898 !important;
}

html[data-theme="light"] footer .w-10.h-10:hover {
    border-color: #B71C1C !important;
    color: #B71C1C !important;
    background: rgba(212, 89, 26, 0.10) !important;
}

/* --- BUTTONS — accent buttons untouched --- */
html[data-theme="light"] .mbmsi-btn-primary,
html[data-theme="light"] .btn-saffron {
    background: var(--saffron) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(212, 89, 26, 0.30) !important;
}

html[data-theme="light"] .mbmsi-btn-primary:hover,
html[data-theme="light"] .btn-saffron:hover {
    box-shadow: 0 6px 24px rgba(212, 89, 26, 0.42) !important;
    transform: translateY(-2px) !important;
}

html[data-theme="light"] .mbmsi-btn-secondary,
html[data-theme="light"] .btn-green {
    background: var(--green) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(46, 122, 46, 0.28) !important;
}

html[data-theme="light"] .mbmsi-btn-secondary:hover,
html[data-theme="light"] .btn-green:hover {
    box-shadow: 0 6px 24px rgba(46, 122, 46, 0.38) !important;
}

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

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #ABA39A !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: #B71C1C !important;
    box-shadow: 0 0 0 3px rgba(212, 89, 26, 0.12) !important;
    outline: none !important;
}

/* --- TRUST BOX (global component) --- */
html[data-theme="light"] .trust-box {
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .trust-box:hover {
    background: #FAF7F3 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
}

html[data-theme="light"] .trust-strip {
    background: linear-gradient(135deg, #F0EBE3 0%, #E8E3DB 100%) !important;
}

/* --- PRODUCT DETAIL PAGE --- */
html[data-theme="light"] .product-gallery-main {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] .thumb {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.09) !important;
}

html[data-theme="light"] .thumb.active,
html[data-theme="light"] .thumb:hover {
    border-color: #B71C1C !important;
    box-shadow: 0 0 0 2px rgba(212, 89, 26, 0.20) !important;
}

html[data-theme="light"] .bg-\[\#214921\] {
    background: #D8EDD8 !important;
}

html[data-theme="light"] .text-\[\#9ff19f\] {
    color: #1D5C1D !important;
}

html[data-theme="light"] .text-\[\#FFD36B\] {
    color: #C04010 !important;
}

/* --- Description & Specification text in light mode --- */
html[data-theme="light"] .text-\[\#c5beb4\] {
    color: #3A3028 !important;
}

/* Section dividers inside product detail */
html[data-theme="light"] .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.09) !important;
}

/* --- Grey body text across all content pages (light mode) --- */
/* Covers about-us, privacy-policy, return-policy, terms, contact */
html[data-theme="light"] .text-\[\#d6cec2\],
html[data-theme="light"] .text-\[\#c5beb4\],
html[data-theme="light"] .text-\[\#bfb7aa\],
html[data-theme="light"] .text-\[\#a9a196\],
html[data-theme="light"] .text-\[\#aaa294\],
html[data-theme="light"] .text-\[\#e8dfd3\],
html[data-theme="light"] .text-\[\#9f988e\],
html[data-theme="light"] .text-\[\#9e958a\],
html[data-theme="light"] .text-\[\#8f877c\],
html[data-theme="light"] .text-\[\#9a9186\] {
    color: #2A2420 !important;
}

/* Content blocks (about, policy pages) */
html[data-theme="light"] .about-content,
html[data-theme="light"] .policy-content {
    color: #2A2420 !important;
}

html[data-theme="light"] .about-content p,
html[data-theme="light"] .policy-content p,
html[data-theme="light"] .about-content li,
html[data-theme="light"] .policy-content li,
html[data-theme="light"] .about-content h2,
html[data-theme="light"] .about-content h3,
html[data-theme="light"] .policy-content h2,
html[data-theme="light"] .policy-content h3 {
    color: #1A1210 !important;
}

/* FAQ accordion text */
html[data-theme="light"] .px-6.pb-6.text-\[\#c5beb4\] {
    color: #2A2420 !important;
}

/* Trust strip cards on content pages */
html[data-theme="light"] .p-4.bg-\[\#1A1A16\] {
    background: #ffffff !important;
    color: #2A2420 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Contact form labels */
html[data-theme="light"] label.text-\[\#d6cec2\],
html[data-theme="light"] .block.text-sm.text-\[\#d6cec2\] {
    color: #2A2420 !important;
}

/* Section backgrounds on content pages */
html[data-theme="light"] .bg-\[\#0C0C0A\],
html[data-theme="light"] .bg-\[\#111111\] {
    background-color: var(--bg) !important;
}

html[data-theme="light"] .bg-\[\#0f0e0c\],
html[data-theme="light"] .bg-\[\#111110\] {
    background-color: var(--bg-soft) !important;
}

/* --- Dimension cards (product detail) --- */
html[data-theme="light"] .text-\[\#a09890\],
html[data-theme="light"] .text-\[\#6e6660\] {
    color: #7A6E68 !important;
}

/* Product Variations (product detail page) --- */
html[data-theme="light"] .variation-chip {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #1A1612 !important;
}

html[data-theme="light"] .variation-chip:hover {
    border-color: #B71C1C !important;
    color: #B71C1C !important;
}

html[data-theme="light"] .variation-chip.bg-\[\#B71C1C\] {
    background: #B71C1C !important;
    color: #ffffff !important;
}

html[data-theme="light"] .variation-swatch {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Variation chips on listing cards */
html[data-theme="light"] .text-\[\#b9b2a7\] {
    color: #5A524C !important;
}

html[data-theme="light"] span.border-white\/20 {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] a.block.bg-white {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] a.block.bg-white:hover {
    box-shadow: 0 8px 28px rgba(212, 89, 26, 0.12) !important;
    border-color: rgba(212, 89, 26, 0.22) !important;
}

/* --- GENERIC TAILWIND DARK CLASS OVERRIDES --- */
html[data-theme="light"] .bg-\[\#111\],
html[data-theme="light"] .bg-\[\#111111\],
html[data-theme="light"] .bg-\[\#151513\],
html[data-theme="light"] .bg-\[\#161613\],
html[data-theme="light"] .bg-\[\#121210\],
html[data-theme="light"] .bg-\[\#1A1A16\],
html[data-theme="light"] .bg-\[\#0C0C0A\] {
    background-color: #ffffff !important;
}

html[data-theme="light"] .text-\[\#d7d0c6\],
html[data-theme="light"] .text-\[\#c8c0b6\],
html[data-theme="light"] .text-\[\#c9c2b8\],
html[data-theme="light"] .text-\[\#bdb7ad\],
html[data-theme="light"] .text-\[\#a59f95\],
html[data-theme="light"] .text-\[\#b9b2a7\] {
    color: #5A524C !important;
}

html[data-theme="light"] .text-white {
    color: #1A1612 !important;
}

html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.09) !important;
}

html[data-theme="light"] .bg-slate-100 {
    background: #ffffff !important;
}

html[data-theme="light"] .text-slate-800 {
    color: #1A1612 !important;
}

html[data-theme="light"] .text-slate-500 {
    color: #7A726A !important;
}

/* =======================================
THEME TOGGLE
=======================================*/

.theme-toggle {

    position: fixed;

    top: 22px;

    right: 25px;

    z-index: 9999;

    width: 68px;

    height: 36px;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 999px;

    display: flex;

    align-items: center;

    padding: 3px;

    cursor: pointer;

    transition: .3s;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);

}

.theme-toggle:hover {

    transform: translateY(-2px);

}

.theme-toggle-circle {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: linear-gradient(135deg, #FFD54A, #FF9800);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    transition: .35s cubic-bezier(.4, 0, .2, 1);

}

html[data-theme="light"] .theme-toggle-circle {

    transform: translateX(32px);

    background: linear-gradient(135deg, #4FC3F7, #1976D2);

}

.theme-toggle svg {

    width: 14px;

    height: 14px;

    color: white;

}