/*
 * Storefront theme tokens
 * Loaded after the legacy template stylesheet so shared components and
 * Bootstrap utilities inherit the selected theme without changing behavior.
 */
:root,
[data-theme="light"] {
    color-scheme: light;
    --theme-bg: #f6f7fb;
    --theme-surface: #ffffff;
    --theme-surface-raised: #ffffff;
    --theme-surface-muted: #f9fafc;
    --theme-text: #172033;
    --theme-text-strong: #111827;
    --theme-text-muted: #667085;
    --theme-text-subtle: #98a2b3;
    --theme-border: #e4e7ec;
    --theme-border-strong: #cfd5df;
    --theme-primary: #1f2b6c;
    --theme-primary-hover: #16205a;
    --theme-on-primary: #ffffff;
    --theme-accent: #3f5aa9;
    --theme-focus: rgba(63, 90, 169, .24);
    --theme-overlay: rgba(15, 23, 42, .48);
    --theme-shadow-sm: 0 1px 4px rgba(15, 23, 42, .08);
    --theme-shadow-md: 0 8px 24px rgba(15, 23, 42, .12);
    --theme-shadow-lg: 0 18px 46px rgba(15, 23, 42, .18);
    --theme-success-bg: #ecfdf3;
    --theme-success-text: #067647;
    --theme-warning-bg: #fffaeb;
    --theme-warning-text: #b54708;
    --theme-danger-bg: #fef3f2;
    --theme-danger-text: #b42318;
    --theme-info-bg: #eff8ff;
    --theme-info-text: #175cd3;
}

[data-theme="dark"] {
    color-scheme: dark;
    --theme-bg: #0f172a;
    --theme-surface: #172033;
    --theme-surface-raised: #1e293b;
    --theme-surface-muted: #202d43;
    --theme-text: #e5e7eb;
    --theme-text-strong: #f8fafc;
    --theme-text-muted: #aab6c8;
    --theme-text-subtle: #8290a5;
    --theme-border: #334155;
    --theme-border-strong: #475569;
    --theme-primary: #8ea3f0;
    --theme-primary-hover: #a9b8f5;
    --theme-on-primary: #0f172a;
    --theme-accent: #93a7ee;
    --theme-focus: rgba(147, 167, 238, .34);
    --theme-overlay: rgba(2, 6, 23, .68);
    --theme-shadow-sm: 0 1px 4px rgba(2, 6, 23, .34);
    --theme-shadow-md: 0 8px 24px rgba(2, 6, 23, .42);
    --theme-shadow-lg: 0 18px 46px rgba(2, 6, 23, .58);
    --theme-success-bg: #12352d;
    --theme-success-text: #6ee7b7;
    --theme-warning-bg: #3a2b13;
    --theme-warning-text: #f8c56b;
    --theme-danger-bg: #3b1d24;
    --theme-danger-text: #fda4af;
    --theme-info-bg: #172f4d;
    --theme-info-text: #93c5fd;
}

html,
body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

body,
.card,
.product-item,
.dropdown-menu,
.modal-content,
.offcanvas,
.form-control,
.custom-select,
.table,
.breadcrumb,
.pagination .page-link,
.alert,
.navbar-light,
.bg-light,
.bg-white {
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Bootstrap utility normalization */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .navbar-light,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .popover,
[data-theme="dark"] .toast,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .jumbotron,
[data-theme="dark"] .media {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text);
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-text {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .form-text {
    color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-right,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] hr,
[data-theme="dark"] .dropdown-divider {
    border-color: var(--theme-border) !important;
}

/* Surfaces, navigation, overlays and menus */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] #navbar-vertical,
[data-theme="dark"] #navbar-vertical .dropdown-menu,
[data-theme="dark"] .live-search-results,
[data-theme="dark"] .amz-dropdown-menu {
    background-color: var(--theme-surface-raised) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    box-shadow: var(--theme-shadow-md);
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] #navbar-vertical .nav-link,
[data-theme="dark"] #navbar-vertical .dropdown-item {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] #navbar-vertical .dropdown-item:hover,
[data-theme="dark"] #navbar-vertical .nav-link:hover,
[data-theme="dark"] .live-search-result-item:hover {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text-strong) !important;
}

[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item a,
[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.amz-bottom-nav-item):not(.amz-mobile-account-link) {
    color: var(--theme-accent);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--theme-text-subtle);
}

/* Form controls, selection and focus states */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] .amz-search-input,
[data-theme="dark"] .amz-newsletter-input,
[data-theme="dark"] .shop-search-input,
[data-theme="dark"] .shop-filter-select,
[data-theme="dark"] .shop-price-input {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border-strong) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .amz-search-input::placeholder,
[data-theme="dark"] .amz-newsletter-input::placeholder {
    color: var(--theme-text-subtle) !important;
    opacity: 1;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 .2rem var(--theme-focus) !important;
    outline: none;
}

[data-theme="dark"] option,
[data-theme="dark"] optgroup {
    background-color: var(--theme-surface-raised);
    color: var(--theme-text);
}

/* Tables, pagination, accordion and common cards */
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] .table-light > td {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text-strong) !important;
}

[data-theme="dark"] .pagination .page-link {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link,
[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--theme-primary) !important;
    color: var(--theme-on-primary) !important;
    border-color: var(--theme-primary) !important;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text-subtle) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .accordion .card,
[data-theme="dark"] .accordion .card-header,
[data-theme="dark"] .accordion .card-body,
[data-theme="dark"] .tab-content,
[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .nav-tabs .nav-link {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

/* Live search and storefront-specific legacy surfaces */
[data-theme="dark"] .live-search-result-name,
[data-theme="dark"] .vendors-shop-name,
[data-theme="dark"] .vendors-owner-name,
[data-theme="dark"] .vendors-meta-list,
[data-theme="dark"] .home-vendor-name,
[data-theme="dark"] .home-vendor-meta,
[data-theme="dark"] .fs-section-title,
[data-theme="dark"] .fs-card-title,
[data-theme="dark"] .fs-card-meta {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .live-search-result-price,
[data-theme="dark"] .vendors-description,
[data-theme="dark"] .live-search-no-results,
[data-theme="dark"] .fs-card-meta,
[data-theme="dark"] .fs-empty-text {
    color: var(--theme-text-muted) !important;
}

[data-theme="dark"] .live-search-result-image,
[data-theme="dark"] .shop-empty-icon,
[data-theme="dark"] .fs-product-more,
[data-theme="dark"] .fs-product-thumb {
    background-color: var(--theme-surface-muted) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .live-search-results-footer,
[data-theme="dark"] .mobile-filter-header,
[data-theme="dark"] .shop-results-bar,
[data-theme="dark"] .shop-empty-state,
[data-theme="dark"] .shop-reset-btn,
[data-theme="dark"] .shop-mobile-filter-btn,
[data-theme="dark"] .attr-checkbox-label,
[data-theme="dark"] .vendors-card,
[data-theme="dark"] .home-vendor-card,
[data-theme="dark"] .fs-card,
[data-theme="dark"] .cart-table-wrap,
[data-theme="dark"] .cart-summary-card,
[data-theme="dark"] .cart-coupon-card,
[data-theme="dark"] .co-section-card {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    box-shadow: var(--theme-shadow-sm);
}

[data-theme="dark"] .live-search-results-footer,
[data-theme="dark"] .shop-filter-group,
[data-theme="dark"] .fs-card-footer {
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .shop-filter-overlay {
    background: var(--theme-overlay) !important;
}

[data-theme="dark"] .shop-toggle-slider {
    background: var(--theme-border-strong);
}

[data-theme="dark"] .shop-toggle-slider::after {
    background: var(--theme-text-strong);
}

/* Semantic feedback states */
[data-theme="dark"] .alert-success,
[data-theme="dark"] .badge-success { background-color: var(--theme-success-bg) !important; color: var(--theme-success-text) !important; border-color: rgba(110, 231, 183, .34) !important; }
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .badge-warning { background-color: var(--theme-warning-bg) !important; color: var(--theme-warning-text) !important; border-color: rgba(248, 197, 107, .34) !important; }
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .badge-danger { background-color: var(--theme-danger-bg) !important; color: var(--theme-danger-text) !important; border-color: rgba(253, 164, 175, .34) !important; }
[data-theme="dark"] .alert-info,
[data-theme="dark"] .badge-info { background-color: var(--theme-info-bg) !important; color: var(--theme-info-text) !important; border-color: rgba(147, 197, 253, .34) !important; }

/* Preserve readable text over intentionally dark branded header/footer surfaces. */
[data-theme="dark"] .amz-header,
[data-theme="dark"] .amz-header-bottom,
[data-theme="dark"] .amz-footer,
[data-theme="dark"] .amz-footer-bottom,
[data-theme="dark"] .fs-hero,
[data-theme="dark"] .shop-brand-hero,
[data-theme="dark"] .vendors-hero-box {
    color: #f8fafc;
}

[data-theme="dark"] .amz-newsletter-input {
    border-color: var(--theme-border-strong) !important;
}

/* Skeleton / shimmer loading states */
[data-theme="dark"] .skeleton-block,
[data-theme="dark"] .skeleton-card .skeleton-img,
[data-theme="dark"] .prod-image-wrap.img-is-loading,
[data-theme="dark"] .gallery-main-img-container.img-is-loading,
[data-theme="dark"] .cart-product-img-wrap.img-is-loading {
    background: #1d2433;
}
[data-theme="dark"] .skeleton-block::after,
[data-theme="dark"] .prod-image-wrap.img-is-loading::before,
[data-theme="dark"] .gallery-main-img-container.img-is-loading::before,
[data-theme="dark"] .cart-product-img-wrap.img-is-loading::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}