/**
 * SBMCover — light theme (warm cream + orange, Casekaro-style reference)
 * Loaded after sbmcover-theme.css; dark mode is unchanged.
 */

html[data-theme="light"] {
    color-scheme: light;

    --sbm-cream: #fcf5e5;
    --sbm-cream-deep: #f5ead0;
    --sbm-cream-band: #f7efd8;
    --sbm-card: #fffefb;
    --sbm-topbar-bg: #1a1512;
    --sbm-topbar-text: #e8c896;

    --sbm-orange-start: #f5a623;
    --sbm-orange-end: #ff9900;
    --sbm-orange-hover-start: #ffb340;
    --sbm-orange-hover-end: #ffad33;
    --primary: 245 166 35;
    --primary-light: 255 153 0;
    --primary-slate: 252 245 229;

    --sbm-surface: var(--sbm-cream);
    --sbm-surface-elevated: #ffffff;
    --sbm-surface-card: var(--sbm-card);
    --sbm-text: #14110e;
    --sbm-muted: #5c5348;
    --sbm-border: rgb(245 166 35 / 0.22);
    --sbm-cta-border: rgb(245 166 35 / 0.38);
    --sbm-cta-border-strong: rgb(255 153 0 / 0.55);
}

/* ---- Page shell ---- */
html[data-theme="light"] body,
html[data-theme="light"] #app {
    background-color: var(--sbm-cream) !important;
    color: var(--sbm-text);
}

html[data-theme="light"] img[alt="logo"] {
    filter: none;
}

html[data-theme="light"] .bg-primary-slate {
    background-color: var(--sbm-cream-band) !important;
}

html[data-theme="light"] .bg-gray-50,
html[data-theme="light"] .bg-slate-50 {
    background-color: var(--sbm-cream-band) !important;
}

html[data-theme="light"] .bg-gray-100,
html[data-theme="light"] .bg-slate-100 {
    background-color: var(--sbm-cream-deep) !important;
}

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

html[data-theme="light"] .shadow-card.bg-white,
html[data-theme="light"] .rounded-2xl.shadow-card.bg-white,
html[data-theme="light"] .rounded-2xl.shadow-xs.bg-white,
html[data-theme="light"] .rounded-xl.border.border-gray-100.bg-white {
    background-color: var(--sbm-card) !important;
    border-color: var(--sbm-border) !important;
    box-shadow: 0 4px 18px rgb(20 17 14 / 0.06);
}

/* ---- Top trust bar (dark strip on light storefront) ---- */
html[data-theme="light"] .sbm-trust-bar {
    background: var(--sbm-topbar-bg) !important;
    color: var(--sbm-topbar-text) !important;
    border-bottom: 1px solid rgb(245 166 35 / 0.28) !important;
}

html[data-theme="light"] .sbm-trust-bar a,
html[data-theme="light"] .sbm-trust-bar span,
html[data-theme="light"] .sbm-trust-bar-link {
    color: var(--sbm-topbar-text) !important;
}

html[data-theme="light"] .sbm-trust-bar-link:hover {
    color: #fff4dc !important;
}

/* ---- Header ---- */
html[data-theme="light"] .sbm-site-header,
html[data-theme="light"] .sbm-site-header.bg-white,
html[data-theme="light"] header.bg-white {
    background-color: #ffffff !important;
    border-color: rgb(245 166 35 / 0.12) !important;
    box-shadow: 0 1px 0 rgb(245 166 35 / 0.08);
}

html[data-theme="light"] .sbm-header-bottom {
    border-color: rgb(245 166 35 / 0.14) !important;
}

html[data-theme="light"] .header-nav-menu,
html[data-theme="light"] .sbm-nav-link,
html[data-theme="light"] .text-heading {
    color: var(--sbm-text) !important;
}

html[data-theme="light"] .header-nav-menu.router-link-active,
html[data-theme="light"] .sbm-nav-link.router-link-active {
    color: rgb(var(--primary)) !important;
}

html[data-theme="light"] .sbm-nav-drop {
    background: #ffffff !important;
    border: 1px solid var(--sbm-border);
    box-shadow: 0 16px 40px rgb(20 17 14 / 0.12);
}

html[data-theme="light"] .sbm-nav-drop a {
    color: var(--sbm-text) !important;
}

html[data-theme="light"] .sbm-nav-drop a:hover {
    background: rgb(245 166 35 / 0.1) !important;
    color: var(--sbm-text) !important;
}

html[data-theme="light"] header .rounded-3xl.bg-gray-100,
html[data-theme="light"] .sbm-header-search--home {
    background: #f3ead3 !important;
    border: 1px solid rgb(245 166 35 / 0.18) !important;
}

html[data-theme="light"] header .rounded-3xl:focus-within {
    background: #ffffff !important;
    border-color: rgb(var(--primary)) !important;
}

/* ---- Home sections ---- */
html[data-theme="light"] .sbm-shop-by-brand {
    background: linear-gradient(180deg, var(--sbm-cream) 0%, var(--sbm-cream-band) 100%) !important;
}

html[data-theme="light"] .sbm-home-section {
    background-color: transparent;
}

html[data-theme="light"] .sbm-brand-card {
    background: #ffffff !important;
    border: 1px solid var(--sbm-border) !important;
    box-shadow: 0 2px 10px rgb(20 17 14 / 0.05);
}

html[data-theme="light"] .sbm-brand-card:hover {
    border-color: var(--sbm-cta-border-strong) !important;
    box-shadow: 0 10px 24px rgb(245 166 35 / 0.15);
}

html[data-theme="light"] .sbm-category-card {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--sbm-border);
    background: #ffffff;
    box-shadow: 0 4px 14px rgb(20 17 14 / 0.06);
}

html[data-theme="light"] .sbm-category-card-label {
    background: #ffffff;
    color: var(--sbm-text) !important;
}

html[data-theme="light"] .sbm-section-link,
html[data-theme="light"] .sbm-offers-nav {
    color: rgb(var(--primary)) !important;
}

/* ---- Product cards ---- */
html[data-theme="light"] .sbm-case-card {
    background: transparent;
}

html[data-theme="light"] .sbm-case-photo,
html[data-theme="light"] .sbm-case-photo-img {
    background: var(--sbm-card) !important;
    border-color: var(--sbm-cta-border) !important;
}

html[data-theme="light"] .sbm-case-title,
html[data-theme="light"] .sbm-case-rating,
html[data-theme="light"] .sbm-case-price {
    color: var(--sbm-text) !important;
}

html[data-theme="light"] .sbm-case-count,
html[data-theme="light"] .sbm-case-price del {
    color: var(--sbm-muted) !important;
}

html[data-theme="light"] .sbm-case-star {
    color: #f5a623;
}

/* Add to cart — orange pill, dark label (reference mockup) */
html[data-theme="light"] .sbm-case-atc {
    color: #14110e !important;
    font-weight: 600;
    box-shadow: 0 6px 16px rgb(245 166 35 / 0.35);
}

html[data-theme="light"] .sbm-case-atc i,
html[data-theme="light"] .sbm-case-atc span {
    color: #14110e !important;
}

html[data-theme="light"] .sbm-pdp-cart.sbm-case-atc,
html[data-theme="light"] .sbm-pdp-buy-now.sbm-case-atc {
    color: #ffffff !important;
}

html[data-theme="light"] .sbm-pdp-cart.sbm-case-atc span,
html[data-theme="light"] .sbm-pdp-buy-now.sbm-case-atc span {
    color: #ffffff !important;
}

/* ---- PDP & gallery ---- */
html[data-theme="light"] .gallery-swiper,
html[data-theme="light"] .gallery-swiper .swiper-slide,
html[data-theme="light"] .gallery-swiper img,
html[data-theme="light"] .thumb-swiper img {
    background: var(--sbm-card) !important;
}

html[data-theme="light"] .sbm-pdp-actions {
    background: transparent;
}

@media (max-width: 1023px) {
    html[data-theme="light"] .sbm-pdp-stage,
    html[data-theme="light"] .sbm-pdp-thumbs {
        background: var(--sbm-card);
    }

    html[data-theme="light"] .sbm-pdp-stage {
        border-bottom-color: rgb(245 166 35 / 0.15);
    }
}

html[data-theme="light"] .sbm-pdp-compare {
    background: var(--sbm-cream-band);
    border-color: var(--sbm-cta-border);
}

html[data-theme="light"] .sbm-pdp-compare-title,
html[data-theme="light"] .sbm-pdp-compare-head-icon {
    color: #92400e;
}

html[data-theme="light"] .sbm-pdp-compare-platform {
    background: #fffefb;
    border-color: rgb(245 166 35 / 0.15);
}

html[data-theme="light"] .sbm-pdp-compare-platform-btn {
    border-color: var(--sbm-orange-end);
    color: #9a3412;
}

html[data-theme="light"] .sbm-pdp-compare-platform-btn:hover {
    background: #fff7ed;
    border-color: #ea580c;
}

/* ---- Footer (dark block on light theme) ---- */
html[data-theme="light"] .sbm-site-footer {
    background: linear-gradient(165deg, #12100e 0%, #0a0908 100%) !important;
    color: #f5f0e8 !important;
}

html[data-theme="light"] .sbm-site-footer .text-heading,
html[data-theme="light"] .sbm-site-footer h4,
html[data-theme="light"] .sbm-site-footer .sbm-footer-link,
html[data-theme="light"] .sbm-site-footer a {
    color: #f5f0e8 !important;
}

html[data-theme="light"] .sbm-site-footer .text-heading\/80,
html[data-theme="light"] .sbm-site-footer .text-heading\/90,
html[data-theme="light"] .sbm-site-footer .text-heading\/70,
html[data-theme="light"] .sbm-site-footer .text-paragraph {
    color: rgb(245 240 232 / 0.78) !important;
}

html[data-theme="light"] .sbm-footer-social {
    background: rgb(245 166 35 / 0.15);
    border: 1px solid rgb(245 166 35 / 0.45);
    color: #ffd699;
}

html[data-theme="light"] .sbm-footer-social:hover {
    background: rgb(var(--primary));
    color: #14110e;
}

html[data-theme="light"] .sbm-pay-badge {
    background: rgb(255 255 255 / 0.12);
    color: #f5f0e8;
    border-color: rgb(255 255 255 / 0.2);
}

/* ---- Catalog / PLP filters ---- */
html[data-theme="light"] .sbm-catalog-page {
    background: transparent;
}

html[data-theme="light"] .sbm-filter-panel.sbm-filter-card {
    background: #ffffff !important;
    border-color: rgb(245 166 35 / 0.2) !important;
}

html[data-theme="light"] .sbm-filter-toggle span,
html[data-theme="light"] .sbm-filter-option span {
    color: var(--sbm-text) !important;
}

html[data-theme="light"] .sbm-filter-option:hover span,
html[data-theme="light"] .sbm-filter-toggle:hover span {
    color: rgb(var(--primary)) !important;
}

html[data-theme="light"] #filter-canvas,
html[data-theme="light"] #mobile-sidebar-canvas .bg-white,
html[data-theme="light"] .canvas-content.bg-white {
    background: transparent !important;
    color: var(--sbm-text);
}

html[data-theme="light"] .border-gray-100,
html[data-theme="light"] .border-gray-200,
html[data-theme="light"] .border-slate-100,
html[data-theme="light"] .border-slate-200 {
    border-color: rgb(245 166 35 / 0.14) !important;
}

html[data-theme="light"] .text-text,
html[data-theme="light"] .text-paragraph,
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-slate-600,
html[data-theme="light"] .text-gray-500,
html[data-theme="light"] .text-gray-600 {
    color: var(--sbm-muted) !important;
}

html[data-theme="light"] .text-primary,
html[data-theme="light"] .\!text-primary {
    color: rgb(var(--primary)) !important;
}

/* ---- Tabs / pills (Top Phone Cases filters) ---- */
html[data-theme="light"] .tab-btn,
html[data-theme="light"] .tab-action {
    border: 1px solid rgb(245 166 35 / 0.35);
    color: var(--sbm-text);
    background: #ffffff;
}

html[data-theme="light"] .tab-btn.active,
html[data-theme="light"] .tab-action.active {
    background: linear-gradient(135deg, var(--sbm-orange-start), var(--sbm-orange-end)) !important;
    color: #14110e !important;
    border-color: transparent !important;
}

/* ---- Cart, checkout, account ---- */
html[data-theme="light"] .checkout-component,
html[data-theme="light"] [class*="Checkout"] {
    background-color: var(--sbm-cream);
}

html[data-theme="light"] .db-card,
html[data-theme="light"] .modal-dialog {
    background: #ffffff !important;
    border: 1px solid var(--sbm-border);
    color: var(--sbm-text);
}

/* ---- Admin shell (light) ---- */
html[data-theme="light"] .db-header,
html[data-theme="light"] .db-sidebar,
html[data-theme="light"] .db-main {
    background-color: #ffffff !important;
}

html[data-theme="light"] .db-sidebar {
    border-color: rgb(245 166 35 / 0.12) !important;
}

html[data-theme="light"] .db-card,
html[data-theme="light"] .db-table,
html[data-theme="light"] .db-field-control {
    background-color: #ffffff !important;
    border-color: rgb(245 166 35 / 0.15) !important;
    color: var(--sbm-text);
}

html[data-theme="light"] .db-table-head {
    background: var(--sbm-cream-band) !important;
}

html[data-theme="light"] .dropdown-list.bg-white {
    background: #ffffff !important;
    border: 1px solid var(--sbm-border);
}

/* ---- Ratings (empty stars visible on cream cards) ---- */
html[data-theme="light"] .vue-star-rating-star polygon[fill="#FFFFFF"],
html[data-theme="light"] .vue-star-rating-star polygon[fill="#ffffff"],
html[data-theme="light"] .vue-star-rating-star polygon[fill="#FFF"],
html[data-theme="light"] .vue-star-rating-star polygon[fill="#fff"] {
    fill: #c4b8a8 !important;
}

html[data-theme="light"] .vue-star-rating-star stop[stop-color="#FFFFFF"],
html[data-theme="light"] .vue-star-rating-star stop[stop-color="#ffffff"] {
    stop-color: #c4b8a8;
}

/* ---- Swiper pagination ---- */
html[data-theme="light"] .swiper-pagination-bullet {
    background: rgb(20 17 14 / 0.2) !important;
}

html[data-theme="light"] .swiper-pagination-bullet-active {
    background: rgb(var(--primary)) !important;
}

/* ---- Hero (image-only slides sit on cream section) ---- */
html[data-theme="light"] .sbm-hero-section {
    background: var(--sbm-cream);
}

html[data-theme="light"] .sbm-hero-slide--split {
    background: #0f0e0c;
}