/* * Swiftech Store — theme system (light/dark). * * The heavy lifting is done by token redefinition: * - FleetCart tokens: :root[data-theme=dark] in partials/variables.blade.php * - Bootstrap 5.3: data-bs-theme=dark (compiled palette) + harmonized vars * - swiftech-*.css: each file carries its own [data-theme=dark] block * This file holds what tokens cannot reach in the UNREBUILDABLE compiled * bundles: hardcoded hex residue, the --color-white re-pins (that token now * means "surface", so text-on-red must be pinned back to #fff), image-well * pins (catalog photos have baked white backgrounds), and the two theme * toggle controls. Linked LAST in ; every dark rule is gated behind * [data-theme=dark], so light mode is untouched by construction. */ /*======================= Theme toggle controls =======================*/ .sw-theme-btn { padding: 0; font-size: 22px; color: var(--color-black, #191919); background: none; border: 0; cursor: pointer; } .sw-theme-btn .sw-theme-btn__sun { display: none; } [data-theme="dark"] .sw-theme-btn .sw-theme-btn__sun { display: inline-block; } [data-theme="dark"] .sw-theme-btn .sw-theme-btn__moon { display: none; } .sw-theme-btn:focus-visible { outline: 2px solid var(--color-primary, #f51e46); outline-offset: 3px; } /*======================= Mobile drawer: More tab =======================*/ /* Layout fixes for BOTH themes (this file loads after the compiled CSS, so equal-specificity overrides win on order; higher chains where the compiled rule is stronger). */ /* The compiled tiles are a fixed 126px tall — content-sized instead, with a shared minimum so the cards stay visually even. */ .sidebar-more-menu-items li { height: auto; min-height: 118px; } .sidebar-more-menu-items li a { padding: 16px 12px; } /* One column once tiles get too narrow for their content. */ @media (max-width: 350px) { .sidebar-more-menu-items li { width: 100%; } } /* Appearance card: heading row, then the two-option selector. Full-width deliberately: a half-width tile tops out at ~35px per option label (drawer caps at 317px), which can never hold icon + text at readable sizes — verified with font metrics. Other tiles keep flowing 2-up. */ .sidebar-more-menu-items li.sw-appearance { display: flex; flex-direction: column; justify-content: center; gap: 12px; width: 100%; min-height: 0; padding: 16px; min-width: 0; } .sw-appearance__title { font-size: 15px; font-weight: 600; line-height: 1.3; color: #0e1e3e; } [data-theme="dark"] .sw-appearance__title { color: #dde3ea; } .sw-appearance__options { display: flex; gap: 8px; } .sw-appearance__opt { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 10px; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--color-gray, #6e6e6e); background: none; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } [data-theme="dark"] .sw-appearance__opt { border-color: #2a303a; } .sw-appearance__opt i { font-size: 17px; } /* Active state is pure CSS off html[data-theme] — always in sync with the real theme, no separate mobile state. */ html:not([data-theme="dark"]) .sw-appearance__opt[data-sw-theme-choice="light"], html[data-theme="dark"] .sw-appearance__opt[data-sw-theme-choice="dark"] { color: var(--color-primary, #f51e46); font-weight: 600; border-color: var(--color-primary, #f51e46); background: var(--color-primary-alpha-10, rgba(245, 30, 70, 0.1)); } .sw-appearance__opt:focus-visible { outline: 2px solid var(--color-primary, #f51e46); outline-offset: 2px; } /* Drawer shell: never wider than the viewport minus room for the close button that sits outside its edge (317px fixed overflowed 320px phones). */ .sidebar-menu-wrap { width: min(317px, calc(100vw - 64px)); } /* Close button: 44px touch target, fully clear of the drawer edge and the tab bar, inside the top safe area. */ .sidebar-menu-wrap .sidebar-menu-close { width: 44px; height: 44px; top: calc(16px + env(safe-area-inset-top, 0px)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); } .ltr .sidebar-menu-wrap .sidebar-menu-close { right: -56px; } .rtl .sidebar-menu-wrap .sidebar-menu-close { left: -56px; } /* Tab bar: fluid width (compiled fixed it at 285px — wider than a narrowed drawer) and taller touch targets. The compiled tab-content is an absolute overlay pinned at top:62px, so the header gets a DETERMINISTIC height and the overlay is re-pinned to match — content-driven height would slide the tab bar underneath it. */ .sidebar-menu-wrap .sidebar-menu-curve-background { height: 76px; padding-top: 16px; padding-bottom: 16px; } .sidebar-menu-wrap > .tab-content { top: 76px; } .ltr .sidebar-menu-wrap .sidebar-menu-tab, .rtl .sidebar-menu-wrap .sidebar-menu-tab { width: auto; margin: 0 15px; } .sidebar-menu-wrap .sidebar-menu-tab .nav-item .nav-link { padding: 13px 10px; line-height: 14px; } /*======================= Page ground =======================*/ /* Layered dark: the page ground sits below the surface token so cards, drawers and dropdowns (--color-white = #181c23) read as elevated. */ [data-theme="dark"] body { background-color: #12151b; } [data-theme="dark"] .wrapper { background: #12151b; } /*======================= Re-pins: text/icons on colored fills =======================*/ /* --color-white now means "surface"; everything that used it as white foreground on red/colored/dark fills gets pinned back to literal #fff. */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-default:hover, [data-theme="dark"] .btn-default:focus, [data-theme="dark"] .btn-default:active, [data-theme="dark"] .alert, [data-theme="dark"] .alert .close > i, [data-theme="dark"] .pagination .page-item.active .page-link, [data-theme="dark"] .product-badge .badge.badge, [data-theme="dark"] .address-card-wrap .address-card .badge, [data-theme="dark"] .step-tabs .step-tab.active, [data-theme="dark"] .step-tabs .step-tab.active .bg-text, [data-theme="dark"] .order-summary-top .cart-item .product-image .qty-count, [data-theme="dark"] .account-sidebar li a .count, [data-theme="dark"] .header-column-right .icon-wrap > .count, [data-theme="dark"] .bottom-navigation-wrap .bottom-navigation-items li a .count, [data-theme="dark"] .category-nav .category-nav-inner, [data-theme="dark"] .sidebar-menu-tab .nav-link.active, [data-theme="dark"] .sidebar-menu-tab .nav-item.active .nav-link, [data-theme="dark"] .sidebar-menu-header > h4, [data-theme="dark"] .subscribe .subscribe-text .title, [data-theme="dark"] .subscribe .subscribe-text .sub-title, [data-theme="dark"] .gallery-view-icon, [data-theme="dark"] .toastify, [data-theme="dark"] .toast-close, [data-theme="dark"] .list-view-product-card .product-card-countdown .countdown-amount { color: #fff; } [data-theme="dark"] .primary-menu.swiper .swiper-button-prev:after, [data-theme="dark"] .primary-menu.swiper .swiper-button-next:after, [data-theme="dark"] .home-section-inner .home-slider-wrap .swiper-button-prev:after, [data-theme="dark"] .home-section-inner .home-slider-wrap .swiper-button-next:after, [data-theme="dark"] .features .swiper-button-prev:after, [data-theme="dark"] .features .swiper-button-next:after, [data-theme="dark"] .top-brands .swiper-button-prev:after, [data-theme="dark"] .top-brands .swiper-button-next:after, [data-theme="dark"] .product-gallery-preview .swiper-button-prev:after, [data-theme="dark"] .product-gallery-preview .swiper-button-next:after, [data-theme="dark"] .product-gallery-thumbnail .swiper-button-prev:after, [data-theme="dark"] .product-gallery-thumbnail .swiper-button-next:after { color: #fff; } [data-theme="dark"] .btn-default.btn-loading:hover:after, [data-theme="dark"] .btn-default.btn-loading:focus:after { border-color: #fff; border-bottom-color: transparent; } [data-theme="dark"] .header-search .header-search-lg .btn-search > svg path { stroke: #fff; } [data-theme="dark"] .product-card .product-card-actions .btn svg path { stroke: #fff; } [data-theme="dark"] .product-card .product-card-actions .btn.btn-compare.added svg path { stroke: #fff !important; } [data-theme="dark"] .product-card .btn-add-to-cart:hover > svg path, [data-theme="dark"] .product-card .btn-add-to-cart:focus > svg path, [data-theme="dark"] .product-card .btn-add-to-cart:active > svg path { stroke: #fff !important; } [data-theme="dark"] .list-view-product-card .btn-add-to-cart > svg path, [data-theme="dark"] .list-view-product-card .product-card-actions .btn-compare svg path, [data-theme="dark"] .list-view-product-card .product-card-actions .btn-wishlist svg path { stroke: #fff !important; } /* List-view action chips used background:var(--color-black) — after the flip that is near-white with white icons. Pin the fixed dark chip the grid cards already use. */ [data-theme="dark"] .list-view-product-card .product-card-actions .btn-compare, [data-theme="dark"] .list-view-product-card .product-card-actions .btn-wishlist { background: #1b1339; border-color: #1b1339; } /*======================= Header & navigation residue =======================*/ /* Dark artwork logo: white plate, same convention as the footer. */ [data-theme="dark"] .header-logo { background: #fff; border-radius: 10px; padding: 6px 14px; } [data-theme="dark"] .sidebar-menu-icon svg path { fill: #e6e9ee; } [data-theme="dark"] .skeleton, [data-theme="dark"] .skeleton-animation { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .search-suggestions .list-item.active { background: rgba(255, 255, 255, 0.06); } /* Floating panels: shadows vanish on dark — give them real borders. */ [data-theme="dark"] .custom-dropdown .dropdown-menu, [data-theme="dark"] .mega-menu .dropdown > .sub-menu, [data-theme="dark"] .mega-menu > .fluid-menu > .fluid-menu-wrap { border: 1px solid rgba(255, 255, 255, 0.12); } [data-theme="dark"] .ltr .primary-menu:before { background: linear-gradient(90deg, rgba(24, 28, 35, 0) 0, #181c23); } [data-theme="dark"] .rtl .primary-menu:before { background: linear-gradient(-90deg, rgba(24, 28, 35, 0) 0, #181c23); } /* Drawer: the curved header artwork is a pure-white PNG — replace with a flat dark cap. */ [data-theme="dark"] .sidebar-menu-wrap .sidebar-menu-curve-background { background-image: none; background-color: #181c23; } [data-theme="dark"] .sidebar-menu-close > i { color: #e6e9ee; } [data-theme="dark"] .sidebar-more-menu-items li { border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .sidebar-more-menu-items li a span { color: #dde3ea; } /* Localization sheet (hardcoded light palette). */ [data-theme="dark"] .localization { background: #181c23; } [data-theme="dark"] .localization-header { border-bottom-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .localization-header h3 { color: #e7ecf2; } [data-theme="dark"] .localization-cross-icon { background: #2a313c; } [data-theme="dark"] .localization-cross-icon svg path { stroke: #e6e9ee; } [data-theme="dark"] .localization-form .form-group select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23aeb4ba' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Legacy black-PNG select arrow (billing/shipping partials). */ [data-theme="dark"] .ltr .arrow-black, [data-theme="dark"] .rtl .arrow-black { background-image: url("../build/assets/arrow-white-CfI_y3Kw-v4.7.11.png"); } /* Mini-cart / number pickers / misc #e2e8f0 borders. */ [data-theme="dark"] .sidebar-cart-middle, [data-theme="dark"] .sidebar-cart-item, [data-theme="dark"] .sidebar-cart-item .product-image, [data-theme="dark"] .sidebar-cart-item .number-picker .btn-number, [data-theme="dark"] .sidebar-cart-item .number-picker .input-quantity, [data-theme="dark"] .sidebar-cart-bottom .btn-clear-cart, [data-theme="dark"] .sidebar-cart-bottom .btn-view-cart, [data-theme="dark"] .number-picker .btn-number, [data-theme="dark"] .number-picker .input-quantity, [data-theme="dark"] .product-filter-wrap .product-filter-header, [data-theme="dark"] .my-wishlist-table .product-image, [data-theme="dark"] .my-reviews-table .product-image, [data-theme="dark"] .bottom-navigation-wrap { border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .bottom-navigation-wrap .bottom-navigation-items li a .svg-stroke-color path { stroke: #cfd6df; } [data-theme="dark"] .header-wrap-inner.sticky { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /*======================= Cards / sections residue =======================*/ [data-theme="dark"] .product-card .btn-add-to-cart.disabled, [data-theme="dark"] .product-card .btn-add-to-cart[disabled], [data-theme="dark"] .list-view-product-card .btn-add-to-cart[disabled=disabled], [data-theme="dark"] .product-details-info .btn-add-to-cart:disabled { background: #262a31; border-color: #262a31; color: #4a5058; } [data-theme="dark"] .product-card .btn-add-to-cart.disabled svg path, [data-theme="dark"] .product-card .btn-add-to-cart[disabled] svg path, [data-theme="dark"] .list-view-product-card .btn-add-to-cart[disabled=disabled] > svg path { stroke: #4a5058 !important; } [data-theme="dark"] .product-card-skeleton { border-color: #262b31; } [data-theme="dark"] .product-card-skeleton .product-skeleton-img, [data-theme="dark"] .product-card-skeleton .product-skeleton-title, [data-theme="dark"] .product-card-skeleton .product-skeleton-rating-item, [data-theme="dark"] .product-card-skeleton .product-skeleton-rating-content, [data-theme="dark"] .product-card-skeleton .product-skeleton-price, [data-theme="dark"] .product-card-skeleton .product-skeleton-add-to-cart { background: #20242a; } [data-theme="dark"] .cart-table .product-image.skeleton { border-color: #262b31; } /* AJAX veil over listings while filtering. */ [data-theme="dark"] .loading:before { background: rgba(18, 21, 27, 0.72); } /* Mobile-only hairlines (color only — the rules live in max-width media). */ @media (max-width: 767px) { [data-theme="dark"] .landscape-tab-products-wrap .tab-products-header .tab-products-header-overflow .tabs, [data-theme="dark"] .landscape-tab-products-wrap .tab-products-header hr, [data-theme="dark"] .grid-products-wrap .tab-products-header .tabs, [data-theme="dark"] .grid-products-wrap .tab-products-header hr, [data-theme="dark"] .product-details-tab .product-details-tab-overflow hr { border-bottom-color: #272d36; } } /* Cookie bar decline button (hardcoded light pair). */ [data-theme="dark"] .cookie-bar-action .btn-decline { background: #20242b; border-color: #2a2f36; } /* Hero captions render over admin-uploaded photos: pin their light-mode colors so the artwork keeps its designed contrast in both themes. */ [data-theme="dark"] .home-slider .slide-content .caption-1 { color: #191919; } [data-theme="dark"] .home-slider .slide-content .caption-2 { color: #6e6e6e; } /*======================= Image wells: keep photos on light plates =======================*/ /* Catalog photos are white-background JPEGs — deliberate light wells. */ [data-theme="dark"] .product-gallery-preview .gallery-preview-item, [data-theme="dark"] .drift-zoom-pane, [data-theme="dark"] .order-summary-top .cart-item .product-image, [data-theme="dark"] .my-wishlist-table .product-image, [data-theme="dark"] .my-reviews-table .product-image, [data-theme="dark"] .cart-table .product-image:not(.skeleton), [data-theme="dark"] .compare-table .product-image, [data-theme="dark"] .sidebar-cart-item .product-image { background: #f5f6f8; } /*======================= Listing / PDP residue =======================*/ /* PDP read-more fade must fade to the page, not to white. */ [data-theme="dark"] .ltr .product-details-tab .description .content:after, [data-theme="dark"] .rtl .product-details-tab .description .content:after { background: linear-gradient(180deg, rgba(18, 21, 27, 0) 0, #12151b); } /* Status badge pastels (order status, stock chips). */ [data-theme="dark"] .badge-success { background: rgba(0, 188, 67, 0.14); } [data-theme="dark"] .badge-danger { background: rgba(251, 44, 54, 0.16); } [data-theme="dark"] .badge-info { background: rgba(0, 104, 225, 0.18); } [data-theme="dark"] .badge-warning { background: rgba(255, 177, 54, 0.16); } /* Global scrollbar thumb + compare-table thumb. */ [data-theme="dark"] ::-webkit-scrollbar-thumb, [data-theme="dark"] ::-webkit-scrollbar-thumb:vertical { background: #4a5058; } [data-theme="dark"] .compare-wrap .table-responsive::-webkit-scrollbar-thumb { background: #3f444b; } /*======================= Forms =======================*/ /* Chrome autofill: keep dark inputs dark. */ [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] input:-webkit-autofill:hover, [data-theme="dark"] input:-webkit-autofill:focus, [data-theme="dark"] textarea:-webkit-autofill, [data-theme="dark"] select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #181c23 inset !important; -webkit-text-fill-color: #e8ebef !important; caret-color: #e8ebef; } /* Inline-styled phone country-code chips (checkout + profile blades). */ [data-theme="dark"] .checkout-phone-cc, [data-theme="dark"] .profile-phone-cc { color: #aeb6c1; background: #1f242c; border-color: #2a303a; } [data-theme="dark"] .optional-label, [data-theme="dark"] .profile-phone-hint { color: #98a2ae; } /* Address form section-title hairline (hardcoded on my-addresses). */ [data-theme="dark"] .my-addresses .add-new-address-form .section-title { border-bottom-color: #272d36; } /*======================= Third-party =======================*/ /* Toastify: charcoal chip works in both themes; the vendor gradient must lose (it outranks FleetCart's own override). */ [data-theme="dark"] .ltr .toastify, [data-theme="dark"] .rtl .toastify { background: rgba(52, 58, 64, 0.97); } /* Flatpickr (date/time product options): compiled light skin. */ [data-theme="dark"] .flatpickr-calendar { background: #1c212a; box-shadow: 1px 0 0 #2a303a, -1px 0 0 #2a303a, 0 1px 0 #2a303a, 0 -1px 0 #2a303a, 0 3px 13px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .flatpickr-calendar.arrowTop:before, [data-theme="dark"] .flatpickr-calendar.arrowTop:after { border-bottom-color: #1c212a; } [data-theme="dark"] .flatpickr-calendar.arrowBottom:before, [data-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-top-color: #1c212a; } [data-theme="dark"] .flatpickr-calendar.hasTime .flatpickr-time { border-top-color: #2a303a; } [data-theme="dark"] .flatpickr-months .flatpickr-month, [data-theme="dark"] .flatpickr-months .flatpickr-prev-month, [data-theme="dark"] .flatpickr-months .flatpickr-next-month, [data-theme="dark"] .flatpickr-current-month input.cur-year { color: #e8ebef; fill: #e8ebef; } [data-theme="dark"] span.flatpickr-weekday { color: #98a0ab; } [data-theme="dark"] .flatpickr-day { color: #d6dbe2; } [data-theme="dark"] .flatpickr-day:hover, [data-theme="dark"] .flatpickr-day.inRange { background: #262c37; border-color: #262c37; box-shadow: none; } [data-theme="dark"] .flatpickr-day.today { border-color: #98a0ab; } [data-theme="dark"] .flatpickr-day.selected, [data-theme="dark"] .flatpickr-day.startRange, [data-theme="dark"] .flatpickr-day.endRange { background: var(--color-primary, #f51e46); border-color: var(--color-primary, #f51e46); color: #fff; } [data-theme="dark"] .flatpickr-day.flatpickr-disabled, [data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay { color: rgba(214, 219, 226, 0.28); } [data-theme="dark"] .flatpickr-time input { color: #e8ebef; } /* glightbox slide descriptions (only when used). */ [data-theme="dark"] .glightbox-clean .gslide-description { background: #181c23; } [data-theme="dark"] .glightbox-clean .gslide-title { color: #e8ebef; } /*====================================================================== VERIFICATION FIXES — findings from the adversarial coverage/contrast audit. Same gating rules as everything above. ======================================================================*/ /* Drawer active tab: full compiled chain (0,5,0) so the pin actually wins. */ [data-theme="dark"] .sidebar-menu-wrap .sidebar-menu-tab .nav-item .nav-link.active { color: #fff; } /* Wishlisted heart fill on card hover (compiled uses fill + !important). */ [data-theme="dark"] .product-card:hover .product-card-actions .btn.btn-wishlist.added svg path { fill: #fff !important; } /* List view: button label/icon whites + added/hover chip states. */ [data-theme="dark"] .list-view-product-card .btn-add-to-cart, [data-theme="dark"] .list-view-product-card .btn-add-to-cart > i { color: #fff; } [data-theme="dark"] .list-view-product-card:hover .product-card-actions .btn-compare.added svg path, [data-theme="dark"] .list-view-product-card:hover .product-card-actions .btn-wishlist.added svg path { stroke: #fff !important; } [data-theme="dark"] .list-view-product-card:hover .product-card-actions .btn-wishlist.added svg path { fill: #fff !important; } [data-theme="dark"] .list-view-product-card .product-card-actions .btn-compare:hover, [data-theme="dark"] .list-view-product-card .product-card-actions .btn-wishlist:hover, [data-theme="dark"] .list-view-product-card .product-card-actions .btn-compare.added, [data-theme="dark"] .list-view-product-card .product-card-actions .btn-wishlist.added { background: var(--color-primary, #f51e46); border-color: var(--color-primary, #f51e46); } /* Localization close disc: full compiled chains. */ [data-theme="dark"] .localization .localization-header .localization-cross-icon { background: #2a313c; } [data-theme="dark"] .localization .localization-header .localization-cross-icon svg path { stroke: #e6e9ee; } /* Mini-cart qty stepper: full compiled chains for the borders. */ [data-theme="dark"] .sidebar-cart-item .product-info .number-picker .input-group-quantity .btn-number, [data-theme="dark"] .sidebar-cart-item .product-info .number-picker .input-group-quantity .input-quantity { border-color: rgba(255, 255, 255, 0.12); } /* Brand logos: many are dark/black artwork on transparency or white JPEGs — deliberate light plates, same convention as product image wells. */ [data-theme="dark"] .top-brands .top-brand-item > img { background: #f5f6f8; border-radius: 10px; padding: 6px; } [data-theme="dark"] .all-brands .brand-image { background: #f5f6f8; } /* Edge-fade slabs must match the PAGE ground, not the surface token. */ [data-theme="dark"] .top-brands:before, [data-theme="dark"] .top-brands:after { background: #12151b; } /* Default-address notch overhangs the page ground. */ [data-theme="dark"] .address-card-wrap .address-card .address-card-selected-icon { background: #12151b; } /* Touch spinner state (compiled :active variant). */ [data-theme="dark"] .btn-default.btn-loading:active:after { border-color: #fff; border-bottom-color: transparent; } /* Blog widgets (dormant today; safe insurance). */ [data-theme="dark"] .blog-post-search button svg path { stroke: #fff; } [data-theme="dark"] .blog-categories-item .count { color: #fff; } /* Flatpickr time-input hovers (dormant unless a time option is added). */ [data-theme="dark"] .flatpickr-time input:hover, [data-theme="dark"] .flatpickr-time input:focus { background: #262c37; } /* Contrast fixes (computed WCAG failures): status badge text on tints. */ [data-theme="dark"] .badge-info { color: #6badff; } [data-theme="dark"] .badge-danger { color: #ff6b81; } /* Card/row price red as small text: brand red stays on fills/buttons and large prices; small-text prices use a lightened brand red for AA. */ [data-theme="dark"] .product-card .product-price, [data-theme="dark"] .vertical-product-card .product-info .product-price, [data-theme="dark"] .sw-fsx__row-price, [data-theme="dark"] .sw-fsx__row-price .special-price { color: #ff4d6e; } /* Disabled add-to-cart: WCAG-exempt but keep it legible. */ [data-theme="dark"] .product-card .btn-add-to-cart.disabled, [data-theme="dark"] .product-card .btn-add-to-cart[disabled], [data-theme="dark"] .list-view-product-card .btn-add-to-cart[disabled=disabled], [data-theme="dark"] .product-details-info .btn-add-to-cart:disabled { color: #6a717b; } /* Mobile: breathing room between the theme button and the globe. */ @media (max-width: 991px) { .header-column-right .header-column-right-item.header-theme { margin-inline-end: 12px; } } /*====================================================================== RE-VERIFICATION FIXES — span-level price declarations beat inheritance; full chains + state re-asserts where the batch above tied. ======================================================================*/ /* Grid-card prices: compiled rules color the SPANS directly. */ [data-theme="dark"] .product-card .product-price .special-price { color: #ff6b81; } [data-theme="dark"] .product-card .product-price .previous-price { color: #ff4d6e; } [data-theme="dark"] .product-card .product-price .special-price + .previous-price { color: var(--color-gray, #a6adb8); } /* Vertical-card discounted price (legacy partial; dormant but correct). */ [data-theme="dark"] .vertical-products .vertical-products-slider .vertical-product-card .product-info .special-price { color: #ff6b81; } /* Blog category count: the compiled chain is four classes deep. */ [data-theme="dark"] .blog-categories .blog-categories-list .blog-categories-item .count { color: #fff; } /* State re-asserts: the full-chain pins above tie the compiled hover/focus rules and, loading last, suppressed them — restore the red feedback. */ [data-theme="dark"] .localization .localization-header .localization-cross-icon:hover { background: var(--color-primary-alpha-12, rgba(245, 30, 70, 0.12)); } [data-theme="dark"] .localization .localization-header .localization-cross-icon:hover svg path { stroke: var(--color-primary, #f51e46); } [data-theme="dark"] .sidebar-cart-item .product-info .number-picker .input-group-quantity .btn-number:hover { border-color: var(--color-primary, #f51e46); } [data-theme="dark"] .sidebar-cart-item .product-info .number-picker .input-group-quantity .input-quantity:focus { border-color: var(--color-primary, #f51e46); }