/* Storefront only. Light values preserve the existing CSS. */
:root {
    --store-surface: #ffffff;
    --store-page: #f8fafc;
    --store-raised: #f1f5f9;
    --store-ink: #172033;
    --store-muted: #55647b;
    --store-line: #dce4ee;
    --store-accent: #00a3ff;
    --store-focus: #0085d1;
}

html[data-store-theme="dark"] {
    color-scheme: dark;
    --store-surface: #202b3c;
    --store-page: #111a28;
    --store-raised: #2b394d;
    --store-ink: #edf3fc;
    --store-muted: #b9c8db;
    --store-line: #45556b;
    --store-accent: #62c6ff;
    --store-focus: #81d3ff;
    --ring: rgba(209, 224, 245, .22);
    --ring-strong: rgba(209, 224, 245, .42);
    --fallback-b1: var(--store-surface);
    --fallback-b2: var(--store-raised);
    --fallback-b3: #394960;
    --fallback-bc: var(--store-ink);
    --rs-ink: var(--store-ink);
    --rs-ink-2: var(--store-muted);
    --white: var(--store-surface);
    --light: var(--store-raised);
    --dark: var(--store-ink);
    --gray-100: #2b394d;
    --gray-200: #394960;
    --gray-300: #45556b;
    --gray-400: #9badc4;
    --gray-500: #b9c8db;
    --gray-600: #cbd7e6;
    --gray-700: #dce5f1;
    --gray-800: #edf3fc;
    --gray-900: #f7faff;
}

.site-header .rs-theme-toggle {
    position: relative;
    flex: 0 0 40px;
    overflow: hidden;
    color: var(--store-ink);
    background: var(--store-surface);
    border-color: var(--store-line);
}

.site-header .rs-theme-toggle svg {
    position: absolute;
    transition: opacity .22s ease, transform .3s ease;
}

.site-header .rs-theme-toggle__moon,
html[data-store-theme="dark"] .site-header .rs-theme-toggle__sun {
    opacity: 0;
    transform: translateY(8px) rotate(-28deg) scale(.7);
}

html[data-store-theme="dark"] .site-header .rs-theme-toggle__moon {
    opacity: 1;
    transform: none;
}

.site-header .rs-theme-toggle:focus-visible {
    outline: 3px solid var(--store-focus);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .site-header .rs-theme-toggle { flex-basis: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .rs-theme-toggle svg { transition: none; }
}

html[data-store-theme="dark"] body,
html[data-store-theme="dark"] body.bg-base-100,
html[data-store-theme="dark"] #page {
    background-color: var(--store-page);
    color: var(--store-ink);
}

html[data-store-theme="dark"] .site-header,
html[data-store-theme="dark"] .nav-rail,
html[data-store-theme="dark"] footer,
html[data-store-theme="dark"] .site-footer {
    background-color: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] :is(.bg-base-100, .bg-white, .bg-white\/90, .bg-white\/80) {
    background-color: var(--store-surface);
}

html[data-store-theme="dark"] :is(.bg-base-200, .bg-gray-50, .bg-slate-50, .bg-slate-100) {
    background-color: var(--store-raised);
}

html[data-store-theme="dark"] :is(.text-base-content, .text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800, .text-slate-700) {
    color: var(--store-ink);
}

html[data-store-theme="dark"] :is(.text-gray-700, .text-gray-600, .text-gray-500, .text-slate-600, .text-slate-500, .text-slate-400) {
    color: var(--store-muted);
}

html[data-store-theme="dark"] :is(.border, .border-b, .border-t, .border-gray-100, .border-gray-200, .border-slate-200, .divide-y > *) {
    border-color: var(--store-line);
}

html[data-store-theme="dark"] :is(.search.modern, .circle-btn, .pill, .icon-btn,
    .js-avatar-menu, .js-lang-menu, .mega-panel, .mm-header, .mega-aside, .mega-pane,
    .rs-sec, .rs-select, .rs-filters, .p-card, .p-body, .p-actions,
    .pd-summary, .pd-section, .pd-tabs, .price-card, .pd-variants, .qv-card,
    .profile-card, .tabs-container, .order-card, .ticket-card, .wallet-card,
    .addr-card, .modal-dialog, .rs-card, .rs-form,
    .cart-line, #js-cart-totals, .pay-body, .addr-card-body) {
    background-color: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] :is(.p-thumb, .p-thumb .noimg, .p-thumbs,
    .pd-thumb, .qv-related-row, .rs-filters-collapsed, .orders-table thead,
    .tab-btn, .wallet-summary-grid, .cart-line-qty, .mm-header) {
    background-color: var(--store-raised);
    color: var(--store-ink);
}

html[data-store-theme="dark"] :is(.site-header, .nav-rail, #page, footer, .site-footer, #qvRoot)
    :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    background-color: var(--store-surface);
    border-color: var(--store-line);
    color: var(--store-ink);
}

html[data-store-theme="dark"] :is(input, textarea)::placeholder {
    color: var(--store-muted);
    opacity: 1;
}

html[data-store-theme="dark"] :is(.search.modern input, .search.modern input:focus) {
    background: transparent;
}

html[data-store-theme="dark"] :is(.search.modern, .rs-contact-input,
    .rs-contact-textarea, .control .field, .wallet-input, .wallet-select,
    .form-group input, .form-group select, .form-group textarea) {
    border-color: var(--store-line);
    color: var(--store-ink);
}

html[data-store-theme="dark"] :is(.rs-head p, .addr-text, .cart-line-variant,
    .p-meta, .pd-meta, .order-top small, .delivery-item__meta,
    .rs-contact-label, .form-group label, .sum-row, .wallet-card small) {
    color: var(--store-muted);
}

html[data-store-theme="dark"] :is(.btnx-outline, .btn-ghost, .btn-secondary,
    .qv-close, .rs-view-btn, .cart-line-del, .delivery-code button,
    .delivery-success__refresh) {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .toast-item:not(.success):not(.error):not(.info) {
    background: var(--store-raised);
    color: var(--store-ink);
}

html[data-store-theme="dark"] #cmpBar,
html[data-store-theme="dark"] :is(.delivery-success__hero, .delivery-success__notice,
    .delivery-item, .delivery-success__bank, .delivery-success__bank article,
    .delivery-success__number strong, .delivery-item code, .delivery-success__bank code) {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .delivery-success,
html[data-store-theme="dark"] .delivery-success p,
html[data-store-theme="dark"] .delivery-success__steps,
html[data-store-theme="dark"] .delivery-success__links a {
    color: var(--store-ink);
}

html[data-store-theme="dark"] :is(.rs-auth-wrap, .profile-page, .orders-page,
    .addr-page, .tickets-page, .wallet-page, .profile-container, .rs-contact-page) {
    background-color: var(--store-page);
    color: var(--store-ink);
}

html[data-store-theme="dark"] :is(.rs-form, .rs-card, .form-control-floating,
    .rs-contact-info-card, .side-nav, .order-details, .modal-content,
    .delivery-success__links a) {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] :is(button, a, input, textarea, select):focus-visible {
    outline: 2px solid var(--store-focus);
    outline-offset: 2px;
}

/* Payment card pages use their own layout and their own existing tokens. */
html[data-store-theme="dark"]:has(.rs-payment-page) {
    --rs-bg: var(--store-page);
    --rs-card: var(--store-surface);
    --rs-panel: var(--store-raised);
    --rs-text: var(--store-ink);
    --rs-muted: var(--store-muted);
    --rs-border: var(--store-line);
    --rs-border-strong: var(--store-line);
    --rs-primary: var(--store-ink);
    --rs-primary-2: var(--store-ink);
}

html[data-store-theme="dark"] body:has(.rs-payment-page) {
    background: var(--store-page);
    color: var(--store-ink);
}

html[data-store-theme="dark"] :is(.rs-shell, .rs-form-side, .rs-summary-side,
    .rs-company-logo-wrap, .rs-input, .rs-select) {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .rs-payment-page :is(.rs-section-title, .rs-field label,
    .rs-company-name, .rs-payment-title, .rs-input-icon) {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .rs-payment-page :is(.rs-company-legal,
    .rs-payment-subtitle, .rs-field .rs-input::placeholder) {
    color: var(--store-muted);
}

/* Home: story strip and its product preview. */
html[data-store-theme="dark"] .brand-strip .brand-arrow,
html[data-store-theme="dark"] #storyModal,
html[data-store-theme="dark"] #storyModal :is(.img-wrap, .s-mainimg, .s-close, .btn:not(.btn-primary):not(.btn-ghost)) {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .brand-strip .brand-fade.left {
    background: linear-gradient(to right, var(--store-page), transparent);
}

html[data-store-theme="dark"] .brand-strip .brand-fade.right {
    background: linear-gradient(to left, var(--store-page), transparent);
}

html[data-store-theme="dark"] #storyModal :is(.js-name, .s-price .new),
html[data-store-theme="dark"] #storyModal .s-close:hover {
    color: var(--store-ink);
}

html[data-store-theme="dark"] #storyModal :is(.js-brand, .s-desc, .s-price .old) {
    color: var(--store-muted);
}

html[data-store-theme="dark"] #storyModal :is(.s-close, .btn:not(.btn-primary):not(.btn-ghost)):hover {
    background: var(--store-raised);
}

html[data-store-theme="dark"] #storyModal .s-skel {
    background: linear-gradient(90deg, var(--store-raised), var(--store-line), var(--store-raised));
    background-size: 200% 100%;
}

/* Home: special category tabs and the 'see all' tile. */
html[data-store-theme="dark"] .rs-special-cats__tabs {
    background: var(--store-surface);
    border-color: var(--store-line);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
}

html[data-store-theme="dark"] .rs-special-cats__tabs-indicator {
    background: var(--store-raised);
    border-color: var(--store-line);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

html[data-store-theme="dark"] .rs-special-cats__tab {
    color: var(--store-muted);
}

html[data-store-theme="dark"] .rs-special-cats__tab:is(:hover, :focus-visible, .is-active),
html[data-store-theme="dark"] .rs-special-cats__mobile-title {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .rs-special-cats__tab:hover::before {
    background: var(--store-raised);
}

html[data-store-theme="dark"] .rs-special-cats__more,
html[data-store-theme="dark"] .rs-special-cats__more:hover {
    background: var(--store-surface);
    color: var(--store-accent);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .rs-special-cats__skeleton {
    border-color: var(--store-line);
    background: linear-gradient(90deg, var(--store-surface), var(--store-raised), var(--store-surface));
    background-size: 200% 100%;
}

/* Home: trust badges. Keep the merchant's custom icon background color. */
html[data-store-theme="dark"] .info-badge-card {
    background: var(--store-surface);
    border-color: var(--store-line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

html[data-store-theme="dark"] .info-badge-card:hover {
    border-color: var(--store-accent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
}

html[data-store-theme="dark"] .info-badge-title {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .info-badge-subtitle {
    color: var(--store-muted);
}

/* Footer: newsletter form only. */
html[data-store-theme="dark"] #footerNewsletterForm .input,
html[data-store-theme="dark"] #footerNewsletterForm .input:focus {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #footerNewsletterForm .input::placeholder {
    color: var(--store-muted);
    opacity: 1;
}

html[data-store-theme="dark"] #footerNewsletterForm .rs-footer-newsletter-btn,
html[data-store-theme="dark"] #footerNewsletterForm .rs-footer-newsletter-btn:hover {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

/* Product card: keep the existing outlined View button, with dark-mode contrast. */
html[data-store-theme="dark"] .p-card .p-actions .btn.btn-ghost {
    color: var(--store-ink) !important;
    background: var(--store-raised) !important;
}

html[data-store-theme="dark"] .p-card .p-actions .btn.btn-ghost:hover {
    color: var(--store-ink) !important;
    background: var(--store-surface) !important;
    background-image: none !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

/* Quick View: secondary actions, options and quantity controls. */
html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-actions-main .btn.btn-ghost,
html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-actions-sub .btn.btn-ghost {
    color: var(--store-ink) !important;
    background: var(--store-raised) !important;
    border: 1px solid var(--store-line) !important;
    box-shadow: none;
}

html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-actions-main .btn.btn-ghost:hover,
html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-actions-sub .btn.btn-ghost:hover {
    color: var(--store-ink) !important;
    background: var(--store-surface) !important;
    background-image: none !important;
    border-color: var(--store-accent) !important;
}

html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-qty-control,
html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-variants .vopt,
html[data-store-theme="dark"] #qvRoot .qv-wrapper .qv-second-option-btn {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-qty-btn,
html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-qty-input {
    color: var(--store-ink);
}

html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-qty-btn:hover {
    background: var(--store-raised);
    color: var(--store-ink);
}

html[data-store-theme="dark"] #qvRoot .qv-wrapper .qv-second-option-btn.is-active,
html[data-store-theme="dark"] #qvRoot .qv-wrapper .pd-variants .vopt.is-active {
    border-color: var(--store-accent);
    box-shadow: 0 0 0 1px var(--store-accent);
}

html[data-store-theme="dark"] #qvRoot .qv-wrapper .qv-second-option-help {
    color: var(--store-muted);
}

html[data-store-theme="dark"] #qvRoot .qv-close {
    background: var(--store-raised);
    color: var(--store-ink);
    border: 1px solid var(--store-line);
}

html[data-store-theme="dark"] #qvRoot .qv-close:hover {
    background: var(--store-surface);
}

/* Listing filters: panel, controls and mobile actions in dark mode. */
html[data-store-theme="dark"] #fltPanel {
    background: var(--store-surface);
    color: var(--store-ink);
    border: 1px solid var(--store-line);
}

html[data-store-theme="dark"] #fltPanel .rs-sec {
    border-bottom-color: var(--store-line);
}

html[data-store-theme="dark"] #fltPanel .rs-sec-header,
html[data-store-theme="dark"] #fltPanel .rs-sec-header:hover,
html[data-store-theme="dark"] #fltPanel h2 {
    color: var(--store-ink);
}

html[data-store-theme="dark"] #fltPanel .rs-select-label,
html[data-store-theme="dark"] #fltPanel .rs-sec-body label.text-gray-600,
html[data-store-theme="dark"] #fltPanel #filtersForm .rs-sec-body label span.text-gray-700 {
    color: var(--store-ink);
}

html[data-store-theme="dark"] #fltPanel #filtersForm .rs-sec-body label span.text-gray-500,
html[data-store-theme="dark"] #fltPanel #filtersForm .text-gray-500 {
    color: var(--store-muted);
}

html[data-store-theme="dark"] #fltPanel #filtersForm input[type="number"] {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #fltPanel #filtersForm input[type="checkbox"] {
    background-color: var(--store-raised);
    border-color: var(--store-muted);
    color: #1677b3;
    accent-color: #1677b3;
}

html[data-store-theme="dark"] #fltPanel #filtersForm input[type="checkbox"]:checked {
    background-color: #1677b3;
    border-color: #1677b3;
}

html[data-store-theme="dark"] #fltPanel #filtersForm input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--store-focus);
    outline-offset: 2px;
}

html[data-store-theme="dark"] #fltPanel #filtersForm a[href],
html[data-store-theme="dark"] #fltToggleDesktop {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #fltPanel #filtersForm a[href]:hover,
html[data-store-theme="dark"] #fltToggleDesktop:hover {
    background: var(--store-page);
    color: var(--store-ink);
}

html[data-store-theme="dark"] #fltClose,
html[data-store-theme="dark"] #fltClose:hover {
    color: var(--store-ink);
}

@media (max-width: 767px) {
    html[data-store-theme="dark"] body.filters-open #fltAside .rs-filters-sticky-actions {
        background: linear-gradient(to top, var(--store-surface) 70%, var(--store-raised));
        border-top: 1px solid var(--store-line);
    }

    html[data-store-theme="dark"] #fltAside .rs-filters-sticky-actions button[type="button"]:last-child {
        background: var(--store-raised);
        color: var(--store-ink);
        border-color: var(--store-line);
    }

    html[data-store-theme="dark"] #fltAside .rs-filters-sticky-actions button[type="button"]:last-child:hover {
        background: var(--store-page);
    }
}

/* Listing breadcrumb: current page label. */
html[data-store-theme="dark"] section.container > nav ol > li > span.bg-gray-100 {
    background-color: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

/* Listing filters: slim scrollbars for facet lists and the mobile drawer. */
#fltAside,
#fltPanel #filtersForm .overflow-y-auto {
    --rs-filter-scroll-thumb: #9aafc5;
    --rs-filter-scroll-thumb-hover: #6e8cae;
    scrollbar-width: thin;
    scrollbar-color: var(--rs-filter-scroll-thumb) transparent;
}

html[data-store-theme="dark"] #fltAside,
html[data-store-theme="dark"] #fltPanel #filtersForm .overflow-y-auto {
    --rs-filter-scroll-thumb: #708aa9;
    --rs-filter-scroll-thumb-hover: #98b4d3;
}

#fltAside::-webkit-scrollbar,
#fltPanel #filtersForm .overflow-y-auto::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#fltAside::-webkit-scrollbar-track,
#fltPanel #filtersForm .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}

#fltAside::-webkit-scrollbar-thumb,
#fltPanel #filtersForm .overflow-y-auto::-webkit-scrollbar-thumb {
    background: var(--rs-filter-scroll-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

#fltAside::-webkit-scrollbar-thumb:hover,
#fltPanel #filtersForm .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: var(--rs-filter-scroll-thumb-hover);
    background-clip: padding-box;
}

/* Product-card variant picker: align its dialog parts in dark mode. */
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__panel,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__head,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__body,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__footer {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .rs-variant-picker .rs-vp__head h2,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__label,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .text-sm {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .rs-variant-picker .rs-vp__head p,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__price-old,
html[data-store-theme="dark"] .rs-variant-picker .qv-second-option-help {
    color: var(--store-muted);
}

html[data-store-theme="dark"] .rs-variant-picker .rs-vp__price-now {
    color: var(--store-accent);
}

html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .pd-variants,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .qv-second-option-list {
    background: transparent;
}

html[data-store-theme="dark"] .rs-variant-picker .rs-vp__close,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .vopt,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .qv-second-option-btn {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .rs-variant-picker .rs-vp__close:hover,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .vopt:hover:not(:disabled),
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .qv-second-option-btn:hover:not(:disabled) {
    background: var(--store-page);
    border-color: var(--store-accent);
}

html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .vopt.is-active,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .qv-second-option-btn.is-active,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .vopt.is-active:hover,
html[data-store-theme="dark"] .rs-variant-picker .rs-vp__choices .qv-second-option-btn.is-active:hover {
    background: #2563eb;
    color: #fff;
    border-color: #60a5fa;
}

/* Quick cart overlay: dark surfaces and legible cloned cart content. */
html[data-store-theme="dark"] #quickcart-overlay .qv-dialog,
html[data-store-theme="dark"] #quickcart-overlay .qv-body {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #quickcart-overlay .qv-loading {
    background: linear-gradient(180deg, var(--store-surface), var(--store-raised));
}

html[data-store-theme="dark"] #quickcart-overlay .qv-spin {
    border-color: var(--store-line);
    border-top-color: var(--store-accent);
}

html[data-store-theme="dark"] #quickcart-overlay .qv-close,
html[data-store-theme="dark"] #quickcart-overlay .cart-line-del,
html[data-store-theme="dark"] #quickcart-overlay .cart-line-qty :is(.js-qty-dec, .js-qty-inc, .js-qty-input) {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #quickcart-overlay .qv-close:hover,
html[data-store-theme="dark"] #quickcart-overlay .cart-line-del:hover,
html[data-store-theme="dark"] #quickcart-overlay .cart-line-qty :is(.js-qty-dec, .js-qty-inc):hover {
    background: var(--store-page);
}

html[data-store-theme="dark"] #quickcart-overlay .js-line {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #quickcart-overlay .cart-line-qty {
    background: transparent;
}

html[data-store-theme="dark"] #quickcart-overlay .cart-line-info a,
html[data-store-theme="dark"] #quickcart-overlay .cart-line-sub,
html[data-store-theme="dark"] #quickcart-overlay .js-line-sub,
html[data-store-theme="dark"] #quickcart-overlay .cart-line-unit {
    color: var(--store-ink);
}

html[data-store-theme="dark"] #quickcart-overlay .cart-line-variant {
    color: var(--store-muted);
}

html[data-store-theme="dark"] #quickcart-overlay #qv-cart-totals {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}

html[data-store-theme="dark"] #quickcart-overlay #qv-coupon-input,
html[data-store-theme="dark"] #quickcart-overlay #qv-coupon-remove {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #quickcart-overlay #qv-coupon-input::placeholder {
    color: var(--store-muted);
    opacity: 1;
}

html[data-store-theme="dark"] #quickcart-overlay #qv-coupon-remove:hover {
    background: var(--store-page);
}

html[data-store-theme="dark"] #quickcart-overlay #qv-coupon-apply {
    background: #2563eb;
    border-color: #60a5fa;
    color: #fff;
}

html[data-store-theme="dark"] #quickcart-overlay #js-cart-alert {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #quickcart-overlay .qv-muted,
html[data-store-theme="dark"] #quickcart-overlay #qv-cart-totals .text-gray-500 {
    color: var(--store-muted);
}

html[data-store-theme="dark"] #quickcart-overlay .qv-hr,
html[data-store-theme="dark"] #quickcart-overlay #qv-cart-totals hr {
    background: var(--store-line);
    border-color: var(--store-line);
}

/* Checkout: bank transfer information in dark mode. */
html[data-store-theme="dark"] #js-bank-transfer-info {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #js-bank-transfer-info > .space-y-3 > .rounded-xl {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

/* Checkout address modal: Choices province, district and neighborhood. */
html[data-store-theme="dark"] #addr-modal .choices[data-type*="select-one"] .choices__inner,
html[data-store-theme="dark"] #addr-modal :is(#sel-province, #sel-district, #sel-neig) {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #addr-modal .choices.is-disabled .choices__inner,
html[data-store-theme="dark"] #addr-modal :is(#sel-province, #sel-district, #sel-neig):disabled {
    background: var(--store-surface);
    color: var(--store-muted);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #addr-modal .choices.is-focused .choices__inner,
html[data-store-theme="dark"] #addr-modal .choices.is-open .choices__inner {
    border-color: var(--store-focus);
}

html[data-store-theme="dark"] #addr-modal .choices[data-type*="select-one"]::after {
    border-color: var(--store-muted) transparent transparent;
}

html[data-store-theme="dark"] #addr-modal .choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent var(--store-muted);
}

html[data-store-theme="dark"] #addr-modal .choices__list--dropdown,
html[data-store-theme="dark"] #addr-modal .choices__list[aria-expanded],
html[data-store-theme="dark"] #addr-modal .choices__list--dropdown .choices__list,
html[data-store-theme="dark"] #addr-modal .choices__list[aria-expanded] .choices__list {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #addr-modal .choices__list--dropdown .choices__item,
html[data-store-theme="dark"] #addr-modal .choices__list[aria-expanded] .choices__item {
    background: var(--store-surface);
    color: var(--store-ink);
}

html[data-store-theme="dark"] #addr-modal .choices__list--dropdown .choices__item--selectable.is-highlighted,
html[data-store-theme="dark"] #addr-modal .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: var(--store-raised);
    color: var(--store-ink);
}

html[data-store-theme="dark"] #addr-modal .choices .choices__item--disabled,
html[data-store-theme="dark"] #addr-modal .choices__placeholder {
    color: var(--store-muted);
    opacity: 1;
}

html[data-store-theme="dark"] #addr-modal .choices[data-type*="select-one"] .choices__input,
html[data-store-theme="dark"] #addr-modal .choices.is-disabled .choices__input {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #addr-modal .choices__input::placeholder {
    color: var(--store-muted);
    opacity: 1;
}

html[data-store-theme="dark"] #addr-modal :is(#sel-province, #sel-district, #sel-neig) option {
    background: var(--store-surface);
    color: var(--store-ink);
}

/* Checkout address dialog stays above the storefront header. */
#addr-modal {
    z-index: 10000;
}

/* Account menu and the affected account page controls. */
html[data-store-theme="dark"] .site-header .js-avatar-menu a:hover,
html[data-store-theme="dark"] .site-header .js-avatar-menu a:focus-visible {
    background: var(--store-raised);
    color: var(--store-ink);
}

html[data-store-theme="dark"] .profile-page #formProfile input[type="checkbox"][name="EcommsOptIn"],
html[data-store-theme="dark"] #addrModal input[type="checkbox"]#IsActive {
    background-color: var(--store-raised);
    border: 1px solid var(--store-muted);
    accent-color: #2563eb;
    color: #fff;
}

html[data-store-theme="dark"] .profile-page #formProfile input[type="checkbox"][name="EcommsOptIn"]:checked,
html[data-store-theme="dark"] #addrModal input[type="checkbox"]#IsActive:checked {
    background-color: #2563eb;
    border-color: #60a5fa;
}

html[data-store-theme="dark"] .addr-page .address-card .edit-btn {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .addr-page .address-card .edit-btn:hover {
    background: var(--store-page);
    border-color: var(--store-focus);
}

html[data-store-theme="dark"] .tickets-page .page-header {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .wallet-page .provider-card,
html[data-store-theme="dark"] .wallet-page .provider-empty,
html[data-store-theme="dark"] .wallet-page .fee-preview {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .wallet-page .provider-card:hover {
    background: var(--store-page);
    border-color: var(--store-focus);
}

/* Brand directory: keep original logo colors legible on a muted canvas. */
html[data-store-theme="dark"] .brands-grid .brand-card {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .brands-grid .brand-card:hover {
    border-color: var(--store-focus);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

html[data-store-theme="dark"] .brands-grid .brand-card .brand-card__media {
    background: #c9d7e7;
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .brands-grid .brand-card .brand-card__name {
    background: var(--store-surface) !important;
    color: var(--store-ink) !important;
    border-color: var(--store-line) !important;
}

/* Brand cards: a denser grid and larger uncropped artwork in both themes. */
.brands-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.brands-grid .brand-card .brand-card__media {
    padding: 0;
    aspect-ratio: 1 / 1;
}

.brands-grid .brand-card {
    height: auto;
    aspect-ratio: auto;
    grid-template-rows: auto var(--name-h) !important;
}

@media (min-width: 640px) {
    .brands-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (min-width: 1024px) {
    .brands-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* Order history: expanded order contents and EPIN codes. */
html[data-store-theme="dark"] .orders-page .order-detail-grid {
    background: var(--store-page);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .orders-page .sec-title {
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .orders-page :is(.detail-line-item, .order-summary-box,
    .shipment-item, .addr-box, .ship-card) {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .orders-page .detail-line-item :is(.prod-title, .line-price),
html[data-store-theme="dark"] .orders-page .shipment-item .carrier {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .orders-page .detail-line-item .prod-sku,
html[data-store-theme="dark"] .orders-page .shipment-item .track,
html[data-store-theme="dark"] .orders-page .addr-loc {
    color: var(--store-muted);
}

html[data-store-theme="dark"] .orders-page .detail-line-item .qty-badge {
    background: var(--store-raised);
    color: var(--store-ink);
}

html[data-store-theme="dark"] .orders-page .order-summary-box .sum-row:not(.discount) {
    color: var(--store-muted);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .orders-page .order-summary-box .sum-row.total {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .orders-page :is(.epin-container, .epin-scroll-box,
    .epin-row, .epin-header) {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .orders-page .epin-header {
    background: var(--store-raised);
}

html[data-store-theme="dark"] .orders-page .epin-row .counter {
    color: var(--store-muted);
}

html[data-store-theme="dark"] .orders-page :is(.order-toggle, .epin-header .btn) {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .orders-page :is(.order-toggle, .epin-header .btn):hover {
    background: var(--store-page);
    border-color: var(--store-focus);
}

/* Product detail: dark theme colors for the existing layout and actions. */
html[data-store-theme="dark"] .pd-page {
    --pd-surface: var(--store-surface);
    --pd-border: var(--store-line);
    --pd-muted: var(--store-muted);
}

html[data-store-theme="dark"] .pd-page :is(.pd-gallery, .pd-summary, .pd-section) {
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .pd-page .pd-main {
    background: var(--store-raised);
}

html[data-store-theme="dark"] .pd-page :is(.pd-title, .pd-brand strong, .pd-price .now) {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .pd-page :is(.pd-brand, .pd-shortdesc, .pd-price .old, .pd-second-option-help, .pd-second-option-empty) {
    color: var(--store-muted);
}

html[data-store-theme="dark"] .pd-page :is(.pd-price, .pd-actions, .pd-spec) {
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .pd-page .pd-section .prose,
html[data-store-theme="dark"] .pd-page .pd-section .prose :is(h1, h2, h3, h4, strong, b) {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .pd-page :is(.pd-qty-control, .pd-variants .vopt, .pd-second-option-btn) {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .pd-page :is(.pd-qty-btn, .pd-qty-input, .pd-second-option-value) {
    color: var(--store-ink);
}

html[data-store-theme="dark"] #page .pd-page .pd-qty-control .pd-qty-input {
    background: transparent;
    border: 0;
}

html[data-store-theme="dark"] .pd-page .pd-qty-btn:hover,
html[data-store-theme="dark"] .pd-page :is(.pd-variants .vopt, .pd-second-option-btn):hover:not(:disabled) {
    background: var(--store-page);
    color: var(--store-ink);
}

html[data-store-theme="dark"] .pd-page :is(.pd-variants .vopt, .pd-second-option-btn).is-active {
    background: var(--store-page);
    color: var(--store-ink);
    border-color: var(--store-focus);
}

html[data-store-theme="dark"] .pd-page .pd-actions-sub .btn.btn-ghost {
    background: var(--store-raised) !important;
    color: var(--store-ink) !important;
    border-color: var(--store-line) !important;
}

html[data-store-theme="dark"] .pd-page .pd-actions-sub .btn.btn-ghost:hover {
    background: var(--store-page) !important;
    color: var(--store-ink) !important;
    border-color: var(--store-focus) !important;
}

/* Keep the product breadcrumb in one scrollable row on narrow screens. */
@media (max-width: 640px) {
    .pd-page > nav {
        max-width: 100%;
        margin-bottom: 12px !important;
    }

    .pd-page > nav > div {
        display: flex;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pd-page > nav ol {
        flex-wrap: nowrap;
        width: max-content;
        white-space: nowrap;
    }

    .pd-page > nav ol > li {
        flex: none;
    }
}

/* Add-to-cart confirmation injected by cart.quickview.js. */
html[data-store-theme="dark"] #cart-snackbar .cart-snack {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

html[data-store-theme="dark"] #cart-snackbar .cart-snack .title {
    color: var(--store-ink);
}

html[data-store-theme="dark"] #cart-snackbar .cart-snack .meta {
    color: var(--store-muted);
}

html[data-store-theme="dark"] #cart-snackbar .cart-snack .thumb {
    background: var(--store-raised);
}

html[data-store-theme="dark"] #cart-snackbar .cart-snack :is(.btn:not(.primary), .close) {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #cart-snackbar .cart-snack :is(.btn:not(.primary), .close):hover {
    background: var(--store-page);
    border-color: var(--store-focus);
}

/* Product review form and sign-in gate. */
html[data-store-theme="dark"] #pd-comments {
    --cb-border: var(--store-line);
    --cb-soft: var(--store-raised);
    --cb-grad: linear-gradient(135deg, #26364c, #303a52);
    --text: var(--store-ink);
    --muted: var(--store-muted);
    --star-empty: #8292aa;
}

html[data-store-theme="dark"] #pd-comments .cbox {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #pd-comments .cbox-locked {
    background: var(--store-raised);
}

html[data-store-theme="dark"] #pd-comments .cbox::before {
    mix-blend-mode: normal;
}

html[data-store-theme="dark"] #pd-comments .cbox-textarea {
    background: var(--store-page);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #pd-comments .cbox-locked-text .link {
    color: var(--store-accent);
}

/* Login and registration forms. */
html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .rs-card {
    background: var(--store-surface);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .rs-hero-inner {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .rs-hero {
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .rs-form {
    background: var(--store-surface);
    color: var(--store-ink);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) :is(.rs-head h1, .rs-logo, .rs-check) {
    color: var(--store-ink);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) :is(.rs-head p, .rs-alt, .hint) {
    color: var(--store-muted);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .control > .field,
html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .control input.field,
html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .control > .field:focus,
html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .control input.field:focus {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
    box-shadow: none;
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .control .icon,
html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .control .flabel {
    color: var(--store-muted);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .control .field:focus + .flabel,
html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .control .field:not(:placeholder-shown) + .flabel,
html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .phone-control:is(.is-focused, .is-filled) .flabel {
    background: var(--store-surface);
    color: var(--store-ink);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .control .field:focus {
    border-color: var(--store-focus);
    box-shadow: 0 0 0 3px rgba(98, 198, 255, .16);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .rs-link,
html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .rs-check a {
    color: var(--store-accent);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .pw-meter {
    background: var(--store-raised);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .iti__country-list {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .iti__country.iti__highlight,
html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .iti__selected-flag:hover {
    background: var(--store-raised);
}

html[data-store-theme="dark"] .rs-auth-wrap:has(#loginForm, #registerForm) .iti__dial-code {
    color: var(--store-muted);
}

/* Login and registration dialogs. */
html[data-store-theme="dark"] body:has(#loginForm, #registerForm) .rs-modal {
    background: var(--store-surface);
    color: var(--store-ink);
    border: 1px solid var(--store-line);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) .rs-modal header {
    border-color: var(--store-line);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) .rs-modal :is(h3, .close) {
    color: var(--store-ink);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) .rs-modal .close:hover {
    background: var(--store-raised);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google-modal__panel, .bt-facebook-modal__panel) {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google-modal__head, .bt-facebook-modal__head) {
    border-color: var(--store-line);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google-modal__head h2, .bt-facebook-modal__head h2,
    .bt-google-field > span, .bt-facebook-field > span,
    .bt-google-account strong, .bt-facebook-account strong) {
    color: var(--store-ink);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google-modal__text, .bt-facebook-modal__text,
    .bt-google-check, .bt-facebook-check, .bt-google-check--optional, .bt-facebook-check--optional,
    .bt-google-account span, .bt-facebook-account span) {
    color: var(--store-muted);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google-account, .bt-facebook-account,
    .bt-google-field input, .bt-facebook-field input,
    .bt-google-modal__close, .bt-facebook-modal__close,
    .bt-google-btn--ghost, .bt-facebook-btn--ghost) {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google-field input[readonly], .bt-facebook-field input[readonly]) {
    background: var(--store-surface);
    color: var(--store-muted);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google-modal__close, .bt-facebook-modal__close,
    .bt-google-btn--ghost, .bt-facebook-btn--ghost):hover {
    background: var(--store-page);
    color: var(--store-ink);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google__divider, .bt-facebook__divider) {
    color: var(--store-muted);
}

html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google__divider, .bt-facebook__divider)::before,
html[data-store-theme="dark"] body:has(#loginForm, #registerForm) :is(.bt-google__divider, .bt-facebook__divider)::after {
    background: var(--store-line);
}

/* Editor-authored public pages. */
html[data-store-theme="dark"] #site-page-content {
    color: var(--store-ink);
    --tw-prose-body: var(--store-ink);
    --tw-prose-headings: var(--store-ink);
    --tw-prose-lead: var(--store-muted);
    --tw-prose-links: var(--store-accent);
    --tw-prose-bold: var(--store-ink);
    --tw-prose-counters: var(--store-muted);
    --tw-prose-bullets: var(--store-muted);
    --tw-prose-hr: var(--store-line);
    --tw-prose-quotes: var(--store-ink);
    --tw-prose-quote-borders: var(--store-line);
    --tw-prose-captions: var(--store-muted);
    --tw-prose-code: var(--store-ink);
    --tw-prose-pre-code: var(--store-ink);
    --tw-prose-pre-bg: var(--store-surface);
    --tw-prose-th-borders: var(--store-line);
    --tw-prose-td-borders: var(--store-line);
}

/* Desktop and mobile category menu. */
html[data-store-theme="dark"] #megaPanel.mega-panel,
html[data-store-theme="dark"] #megaPanel .mega-content,
html[data-store-theme="dark"] #megaPanel .mega-grid,
html[data-store-theme="dark"] #megaPanel .mm-screen {
    background: var(--store-surface);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #megaPanel .mega-aside,
html[data-store-theme="dark"] #megaPanel .mm-header {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #megaPanel .mega-aside {
    border-right-color: transparent;
}

html[data-store-theme="dark"] #megaPanel .mega-item {
    color: var(--store-ink);
    border-color: transparent;
}

html[data-store-theme="dark"] #megaPanel .mega-pane :is(h2, h3, h4),
html[data-store-theme="dark"] #megaPanel .mega-pane a,
html[data-store-theme="dark"] #megaPanel .mm-link {
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #megaPanel .mega-pane :is(h2, h3, h4) {
    border-bottom-color: transparent;
}

html[data-store-theme="dark"] #megaPanel .mega-item:hover {
    background: var(--store-surface);
    color: var(--store-ink);
}

html[data-store-theme="dark"] #megaPanel .mega-item.is-active {
    background: var(--store-surface);
    color: var(--store-accent);
}

html[data-store-theme="dark"] #megaPanel .mega-pane a:hover,
html[data-store-theme="dark"] #megaPanel .mm-link:hover {
    background: var(--store-raised);
    color: var(--store-accent);
}

html[data-store-theme="dark"] #megaPanel :is(.mm-back, .mm-close, .mm-root-btn,
    .lvl3-link, .lvl4-link, .lvl5-link, .lvlx-link) {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #megaPanel .mm-pane-mobile .mega-col {
    background: var(--store-raised);
    color: var(--store-ink);
    border-color: var(--store-line);
}

html[data-store-theme="dark"] #megaPanel .mm-pane-mobile .mega-col h3 a {
    color: var(--store-ink);
}

html[data-store-theme="dark"] #megaPanel :is(.mm-back, .mm-close, .mm-root-btn,
    .lvl3-link, .lvl4-link, .lvl5-link, .lvlx-link):hover,
html[data-store-theme="dark"] #megaPanel .mm-pane-mobile .mega-col h3 a:active {
    background: var(--store-surface);
    color: var(--store-accent);
    border-color: var(--store-focus);
}

/* Home featured product cards match the listing card scale. */
.rs-home-featured__item {
    flex: 0 0 220px;
    width: 220px;
}

@media (min-width: 640px) and (max-width: 1023.98px) {
    .rs-home-featured__item {
        flex-basis: min(230px, calc((100vw - 64px) / 3));
        width: min(230px, calc((100vw - 64px) / 3));
    }
}

@media (max-width: 639.98px) {
    .rs-home-featured__item {
        flex-basis: min(220px, calc((100vw - 48px) / 2));
        width: min(220px, calc((100vw - 48px) / 2));
    }
}

.rs-home-featured__rail {
    cursor: grab;
}

.rs-home-featured__rail.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}

.rs-home-featured__rail.is-dragging * {
    user-select: none;
}

/* Shared home and product-listing card proportions. */
.rs-home-featured__item .p-card .p-thumb,
.rs-products:not(.rs-view-list) .p-card .p-thumb,
.rs-search-products .p-card .p-thumb {
    aspect-ratio: 4 / 5;
}

.rs-home-featured__item .p-card .p-thumb img,
.rs-products:not(.rs-view-list) .p-card .p-thumb img,
.rs-search-products .p-card .p-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rs-home-featured__item .p-card .p-body,
.rs-products:not(.rs-view-list) .p-card .p-body,
.rs-search-products .p-card .p-body {
    padding: .55rem .6rem .65rem !important;
    gap: .32rem;
}

.rs-home-featured__item .p-card .p-actions,
.rs-products:not(.rs-view-list) .p-card .p-actions,
.rs-search-products .p-card .p-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 95px), 1fr));
    gap: .4rem;
    margin-top: auto;
}

.rs-home-featured__item .p-card .p-actions .btn,
.rs-products:not(.rs-view-list) .p-card .p-actions .btn,
.rs-search-products .p-card .p-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: .4rem .35rem;
    font-size: .76rem;
    line-height: 1.15;
    white-space: normal;
}

@media (max-width: 767px) {
    .rs-home-featured__item .p-card .p-actions .btn,
    .rs-products:not(.rs-view-list) .p-card .p-actions .btn,
    .rs-search-products .p-card .p-actions .btn {
        min-height: 34px;
    }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
    #productsWrapper.rs-products:not(.rs-view-list) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    #productsWrapper.rs-products:not(.rs-view-list),
    #page .rs-search-products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Fill the listing width with cards close to the home featured card scale. */
@media (max-width: 639.98px) {
    #productsWrapper.rs-products:not(.rs-view-list),
    #page .rs-search-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 640px) {
    #productsWrapper.rs-products:not(.rs-view-list),
    #page .rs-search-products {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

/* Special-category products use the same card proportions as home and listings. */
.rs-special-cats__grid .p-card .p-thumb {
    aspect-ratio: 4 / 5;
}

.rs-special-cats__grid .p-card .p-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rs-special-cats__grid .p-card .p-body {
    padding: .55rem .6rem .65rem !important;
    gap: .32rem;
}

.rs-special-cats__grid .p-card .p-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 95px), 1fr));
    gap: .4rem;
    margin-top: auto;
}

.rs-special-cats__grid .p-card .p-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: .4rem .35rem;
    font-size: .76rem;
    line-height: 1.15;
    white-space: normal;
}

@media (min-width: 768px) {
    .rs-special-cats__grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .rs-special-cats__grid .p-card .p-actions .btn {
        min-height: 34px;
    }
}

@media (max-width: 639.98px) {
    .rs-special-cats__grid > * {
        flex: 0 0 min(220px, calc((100vw - 48px) / 2));
        width: min(220px, calc((100vw - 48px) / 2));
    }
}

@media (min-width: 640px) and (max-width: 767.98px) {
    .rs-special-cats__grid > * {
        flex: 0 0 min(230px, calc((100vw - 64px) / 3));
        width: min(230px, calc((100vw - 64px) / 3));
    }
}