/* ==========================================================================
   THEME VISIBILITY LAYER  (loaded last on every storefront page)
   Colour / contrast only. No layout, spacing, sizing or typography metrics
   are changed - this layer only makes the existing design readable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CANONICAL THEME TOKENS
   `--white` is pinned so no runtime/admin value can repaint light surfaces
   (cards, inputs, banners) dark while their text stays light.
   -------------------------------------------------------------------------- */
html {
    --white: #ffffff !important;
    --bg-page: #ffffff;
    --bg-light: #f8fafc;
    --bg-muted: #f1f5f9;
    --premium-bg: #f8fafc;
    --premium-border: #e2e8f0;
    --text-strong: #0f172a;
    --text-body: #1e293b;
    --text-muted: #475569;
    --text-subtle: #64748b;
    --accent-text: #c2410c;
    --accent-text-hover: #9a3412;
    --positive-text: #047857;
    --caution-text: #b45309;
    --danger-text: #b91c1c;
    --info-text: #1d4ed8;
    --gray: #475569;

    /* Tokens referenced by existing stylesheets but never defined, which left
       the scrollbar, page loader, leadership icon and skeletons unstyled. */
    --light-gray: #f1f5f9;
    --gray-dark: #334155;
    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: linear-gradient(135deg, #f57539 0%, #ea580c 50%, #f57539 100%);
    --scrollbar-thumb-shadow: 0 2px 10px rgba(245, 117, 57, 0.35);
    --loader-cycle: 1.2s;
    --skeleton-bg: #f1f5f9;
}

/* --------------------------------------------------------------------------
   2. NEUTRAL TEXT UTILITIES  (WCAG AA on white / #f8fafc)
   -------------------------------------------------------------------------- */
.text-muted,
.text-secondary,
.p-muted,
.sub-title,
.subtext,
.muted,
.field-hint,
.form-hint,
.help-text {
    color: #475569 !important;
}

.text-gray,
.text-gray-500 {
    color: #475569 !important;
}

.text-gray-400,
.text-gray-300 {
    color: #64748b !important;
}

/* --------------------------------------------------------------------------
   3. ACCENT / STATUS TEXT COLOURS
   Brand orange stays for fills, borders and large display type; small text and
   icons move to the darker step of the same hue so they stay readable.
   -------------------------------------------------------------------------- */
.text-orange,
.section-kicker,
.catalog-hero__title-accent,
.badge-orange,
.badge-primary,
.portal-badge,
.use-link,
.use-card .use-link,
.trust-badge-icon,
.use-header .section-kicker,
.features-section .feature-kicker,
.ecom-brand-badge,
.feat-icon,
.btn-detail-add,
.dedication-icon-wrap,
.leadership-icon,
.pdp-rec-eyebrow {
    color: var(--accent-text) !important;
}

.sticky-buy-price,
.ecom-current-price,
.p-price-box,
.product-price {
    color: #ea580c !important;
}

.pdp-stock-pill,
.rev-badge-verified,
.ecom-certified-tag,
.pdp-pincode-result,
.sticky-buy-stock,
.in-stock {
    color: var(--positive-text) !important;
}

.pdp-safety-list li::before {
    color: var(--positive-text) !important;
}

.rev-stars,
.rev-stars-item {
    color: var(--caution-text) !important;
}

/* White text on saturated fills needs a 5:1+ fill */
.ecom-stars-badge {
    background: var(--caution-text) !important;
    color: #ffffff !important;
}

.pm-badge-green {
    background: var(--positive-text) !important;
    color: #ffffff !important;
}

.pm-badge-blue {
    background: var(--info-text) !important;
    color: #ffffff !important;
}

.cart-count,
.badge-count {
    background: #ea580c !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. PRODUCT DETAIL - "OVERVIEW & FEATURES" HUB
   -------------------------------------------------------------------------- */
.pdp-tabs-nav {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}

.pdp-tab-btn {
    color: #475569 !important;
}

.pdp-tab-btn:hover {
    color: #0f172a !important;
}

.pdp-tab-btn.active {
    color: var(--accent-text) !important;
}

.pdp-tab-pane,
.pdp-tab-inner {
    color: var(--text-body);
}

.pdp-desc-text,
.pdp-feat-card p,
.ship-card p,
.ecom-trust-chip span {
    color: var(--text-muted) !important;
}

.pdp-feat-card,
.ship-card {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.pdp-feat-card h4,
.ship-card h4,
.pdp-pane-title,
.trust-item h4 {
    color: var(--text-strong) !important;
}

.trust-item p {
    color: var(--text-muted) !important;
}

.spec-table .value {
    color: var(--text-strong) !important;
}

.spec-table .label {
    color: var(--text-muted) !important;
}

.pdp-tabs-content {
    background: #ffffff;
}

/* Reviews / trust meta text */
.bar-lbl,
.bar-val,
.rev-date,
.rev-sub,
.ecom-old-price,
.ecom-mrp-block,
.rev-item p,
.catalog-hero__lede,
.ecom-sku-pill {
    color: var(--text-muted) !important;
}

.ecom-review-link {
    color: #0369a1 !important;
}

/* --------------------------------------------------------------------------
   5. CATALOG, CART, CHECKOUT, ORDERS, PROFILE
   -------------------------------------------------------------------------- */
.page-btn,
.page-num {
    color: #475569 !important;
}

.page-num.active,
.page-btn.active {
    background: var(--accent-text) !important;
    border-color: var(--accent-text) !important;
    color: #ffffff !important;
}

.page-num:hover,
.page-btn:hover {
    background: #fff7ed !important;
    border-color: var(--accent-text) !important;
    color: var(--accent-text) !important;
}

.filter-bar,
.products-search-bar,
.catalog-sort-row,
.catalog-filter-panel {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: var(--text-body) !important;
}

.products-search-bar svg,
.catalog-sort-row svg {
    color: var(--text-subtle) !important;
}

.premium-empty-state h2,
.premium-empty-state p,
.empty-orders-title,
.empty-orders-desc,
.cart-empty-state h3,
.cart-empty-state p {
    color: var(--text-muted) !important;
}

.summary-row,
.summary-item-row,
.summary-row .lbl {
    color: var(--text-muted) !important;
}

.summary-row .val,
.summary-total-row .val {
    color: var(--text-strong) !important;
}

.summary-total-row {
    border-top-color: #e2e8f0 !important;
}

.coupon-msg,
.modal-error-box {
    color: var(--danger-text) !important;
}

.order-timeline-card,
.order-summary-card,
.history-list li {
    background: #ffffff;
    border-color: #e2e8f0;
    color: var(--text-body);
}

/* Checkout: the fallback (no preset match) must stay light and readable so an
   unknown/renamed admin preset can never mix dark cards into the light page. */
.payment-method-card {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: var(--text-body) !important;
}

.payment-method-card strong {
    color: var(--text-strong) !important;
}

.payment-method-card p {
    color: var(--text-muted) !important;
}

.payment-method-card.active {
    background: #fff7ed !important;
    border-color: var(--accent-text) !important;
}

.payment-method-card:hover {
    background: #ffffff !important;
    border-color: var(--accent-text) !important;
}

.bank-instructions-panel {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

.trust-badge-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: var(--text-body) !important;
}

.checkout-step-num {
    background: #0f172a !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   6. FORM CONTROLS
   -------------------------------------------------------------------------- */
input::placeholder,
textarea::placeholder,
select:invalid::placeholder {
    color: #64748b !important;
    opacity: 1;
}

select option,
select optgroup {
    background: #ffffff;
    color: #0f172a;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
    -webkit-text-fill-color: #0f172a !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    caret-color: #0f172a !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent-text);
}

::placeholder {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   7. STATE + AFFORDANCE COLOURS
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.pdp-tab-btn:focus-visible {
    outline: 2px solid #f57539 !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

button:disabled,
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
[disabled],
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.2);
}

::selection {
    background: #fde3d4;
    color: #7c2d12;
}

hr {
    border-color: #e2e8f0;
}

/* Scrollbar chrome: keep the industrial orange thumb, drop the dark border
   that the light theme left behind. */
html {
    scrollbar-color: #ea580c #f1f5f9;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-left: 1px solid #e2e8f0;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #f57539 0%, #ea580c 50%, #f57539 100%);
    border: 2px solid #f1f5f9;
}

.skeleton,
.skeleton-line {
    background: #f1f5f9;
}

/* --------------------------------------------------------------------------
   8. DARK SURFACE GUARDS
   Explicit colours so text on the dark chrome can never inherit a light token.
   -------------------------------------------------------------------------- */
.top-bar,
.submenu:not(.mega-menu),
.site-footer,
.footer-bottom {
    color: #e2e8f0;
}

.top-bar a,
.site-footer a,
.footer-bottom a {
    color: #cbd5e1;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer .footer-title,
.footer-heading,
.footer-heading h3,
.footer-heading h4 {
    color: #ffffff !important;
}

.footer-heading .bar {
    background: #f57539 !important;
}

.site-footer p,
.site-footer .footer-text,
.footer-contact-item {
    color: #cbd5e1;
}

/* --------------------------------------------------------------------------
   9. MOBILE DRAWER HEADER
   The drawer panel is light, so its header bar must be light too - otherwise
   the dark title colour renders on the old dark bar and disappears.
   -------------------------------------------------------------------------- */
.mobile-head {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.mobile-head-title {
    color: #0f172a !important;
}

.mobile-head-sub,
.mobile-head-label {
    color: #475569 !important;
    background: transparent;
}

.mobile-close {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

.mobile-close span {
    background: #334155 !important;
}

/* --------------------------------------------------------------------------
   10. DARK SECTION TEXT REPAIR
   The global light-theme rules force dark heading/body colours with
   !important, which erased the light text these dark banners need.
   -------------------------------------------------------------------------- */
.page-hero,
.page-hero-content,
.catalog-hero,
.cta-section,
.cta-content,
.dedication-section,
.dedication-header,
.pdp-volume-pricing,
.pdp-tier-grid {
    color: #e2e8f0;
}

.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero .page-hero-content h1,
.catalog-hero__title,
.cta-content h2,
.dedication-header h2,
.dedication-card h3 {
    color: #ffffff !important;
}

.page-hero p,
.page-hero-content p,
.catalog-hero__lede,
.cta-content p,
.dedication-header p,
.dedication-card p,
.pdp-volume-head {
    color: #cbd5e1 !important;
}

/* Volume-pricing panel is dark, but its tier cards are white - keep each
   block's text on the matching surface. */
.tier-pill {
    color: #0f172a;
}

.tier-pill h4,
.tier-pill strong,
.tier-price {
    color: #0f172a !important;
}

.tier-qty {
    color: #475569 !important;
}

.catalog-hero__title-accent,
.cta-content .orange,
.dedication-section .dedication-header .kicker,
.dedication-section .dedication-icon-wrap {
    color: #fb923c !important;
}

.dedication-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dedication-card p {
    color: #cbd5e1 !important;
}

.features-section .feature-kicker {
    color: var(--accent-text) !important;
}

.ecom-dot-sep {
    color: var(--text-subtle) !important;
}

/* --------------------------------------------------------------------------
   11. DESKTOP DROPDOWN NAVIGATION
   The light-theme rule `.nav-links a { color:#0f172a !important }` also hit the
   dark dropdown panels, so every menu entry rendered black on navy.
   -------------------------------------------------------------------------- */
.submenu a,
.submenu-item > a,
.submenu .menu-list a,
.nested-submenu a,
.mega-menu-link,
.mega-menu-link .menu-title {
    color: #e2e8f0 !important;
}

.submenu a:hover,
.submenu-item:hover > a,
.submenu-item.has-sub > a:hover,
.nested-submenu a:hover,
.mega-menu-link:hover,
.mega-menu-link:hover .menu-title {
    color: #fb923c !important;
}

.submenu-divider {
    background: rgba(255, 255, 255, 0.12) !important;
}

.submenu-badge,
.mega-menu-link .menu-badge {
    background: rgba(245, 117, 57, 0.16) !important;
    color: #fdba74 !important;
}

.mega-menu-heading {
    color: #fb923c !important;
}

.mega-menu-footer,
.mega-menu-footer a {
    color: #94a3b8 !important;
}

/* --------------------------------------------------------------------------
   12. AUTH SPLIT PANEL
   `.auth-side` is a dark gradient panel; its headings and copy lost to the
   global dark heading colour and vanished.
   -------------------------------------------------------------------------- */
.auth-split-card .auth-side,
.auth-side-content,
.auth-side-logo,
.auth-side-features {
    color: #e2e8f0 !important;
}

.auth-side-content h1,
.auth-side-content h2,
.auth-side-content h3,
.auth-side-content h4,
.auth-side-content strong {
    color: #ffffff !important;
}

.auth-side-content p,
.auth-side-content span,
.auth-side-content li,
.auth-side-features,
.auth-side-features > div {
    color: #cbd5e1 !important;
}

.auth-form a,
.auth-card a,
.auth-side-features a {
    color: var(--accent-text) !important;
}

.auth-form a:hover,
.auth-card a:hover {
    color: var(--accent-text-hover) !important;
}

/* --------------------------------------------------------------------------
   13. REMAINING SMALL-TEXT / ICON CONTRAST
   -------------------------------------------------------------------------- */
.summary-row .value,
.summary-item-row .value {
    color: var(--positive-text) !important;
}

.field-industrial span,
.field-hint,
.checkout-form-col span,
.pd-field-hint {
    color: #64748b !important;
}

.cat-arrow,
.lead-text,
.leadership-info span,
.content-page a,
.p-muted a {
    color: var(--accent-text) !important;
}

/* Accent text on the dark banners needs the lighter step of the same hue. */
.page-hero .badge,
.cta-section .badge,
.dedication-section .badge,
.page-hero .badge-dot,
.cta-section .badge-dot {
    color: #fdba74 !important;
}

.kicker,
.eyebrow,
.section-eyebrow,
.cat-kicker {
    color: var(--accent-text) !important;
}

.checkout-submit-btn {
    background: #c2410c !important;
}

.checkout-submit-btn:hover {
    background: #9a3412 !important;
}

.checkout-submit-btn .btn-label-content,
.checkout-submit-btn .btn-status-overlay,
.checkout-submit-btn .spinner-industrial {
    color: #ffffff !important;
}