/*
 * Dark mode for the storefront.
 *
 * Activated by data-theme="dark" on <html>, which is set before the first paint
 * by the inline script in the layout head and toggled by dark-mode.js.
 *
 * The base theme hardcodes light colours (often with !important), so most rules
 * here have to override rather than simply supply a variable.
 */

[data-theme="dark"] {
    --dm-bg: #10141a;
    --dm-surface: #181d25;
    --dm-surface-2: #212833;
    --dm-surface-3: #2a323f;
    --dm-border: #2e3742;
    --dm-text: #e4e8ee;
    --dm-text-muted: #9aa5b4;
    --dm-shadow: rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------- base */

[data-theme="dark"] body {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6,
[data-theme="dark"] .product-title,
[data-theme="dark"] .product-title2,
[data-theme="dark"] a.product-title,
[data-theme="dark"] a.product-title2 {
    color: #f4f7fb !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-black,
[data-theme="dark"] .text-title,
[data-theme="dark"] .title-color {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-black-50,
[data-theme="dark"] small.text-muted {
    color: var(--dm-text-muted) !important;
}

[data-theme="dark"] hr,
[data-theme="dark"] .dropdown-divider {
    border-color: var(--dm-border);
}

/* ------------------------------------------------------ surfaces */

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-body,
[data-theme="dark"] .bg-section {
    background-color: var(--dm-surface) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .__card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .toast,
[data-theme="dark"] .popover,
[data-theme="dark"] .offcanvas {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

[data-theme="dark"] .__card {
    box-shadow: 0 0 2px var(--dm-shadow);
}

[data-theme="dark"] .__card .custom-file-label,
[data-theme="dark"] .__card .card-header,
[data-theme="dark"] .__card .form-control {
    border-color: var(--dm-border);
}

[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-lg {
    box-shadow: 0 2px 10px var(--dm-shadow) !important;
}

/* ------------------------------------------------------- borders */

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right,
[data-theme="dark"] .border-lighter,
[data-theme="dark"] .border-light {
    border-color: var(--dm-border) !important;
}

/* -------------------------------------------------------- navbar */

[data-theme="dark"] .navbar-sticky,
[data-theme="dark"] .navbar-sticky.bg-light,
[data-theme="dark"] .mobile-head,
[data-theme="dark"] .navbar-light,
[data-theme="dark"] .navbar-stuck-menu {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar-nav .nav-link,
[data-theme="dark"] .navbar-tool-text,
[data-theme="dark"] .navbar-tool-text small {
    color: var(--dm-text);
}

[data-theme="dark"] .navbar-tool-icon-box.bg-secondary {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text);
}

[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

[data-theme="dark"] .category-menu,
[data-theme="dark"] .category-menu li a,
[data-theme="dark"] .mega_menu,
[data-theme="dark"] .search-card,
[data-theme="dark"] .search-result-box {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

[data-theme="dark"] .category-menu li a:hover,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--dm-surface-3) !important;
    color: var(--dm-text);
}

[data-theme="dark"] .dropdown-item {
    color: var(--dm-text);
}

/* --------------------------------------------------------- forms */

[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .bootstrap-select .btn-light,
[data-theme="dark"] .bootstrap-select > .dropdown-toggle {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-theme="dark"] select,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .product-list-filter-input,
html[data-theme="dark"] .sorting-item select {
    color-scheme: dark;
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
}

html[data-theme="dark"] select option,
html[data-theme="dark"] .custom-select option,
html[data-theme="dark"] .product-list-filter-input option,
html[data-theme="dark"] .sorting-item select option {
    background-color: #212833 !important;
    color: #f4f7fb !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--dm-text-muted);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--dm-surface-3);
    color: var(--dm-text-muted);
}

[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .col-form-label {
    color: var(--dm-text);
}

/* -------------------------------------------------------- tables */

[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    color: var(--dm-text);
    border-color: var(--dm-border);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table .thead-light th,
[data-theme="dark"] .table:not(.table-dark) thead:not(.thead-dark) th {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--dm-surface-2);
    color: var(--dm-text);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--dm-surface-3);
    color: var(--dm-text);
}

/* ------------------------------------------------ theme specific */

[data-theme="dark"] .footer-slide-item {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

[data-theme="dark"] .footer-slide-item p,
[data-theme="dark"] .footer-slide-item .heading {
    color: var(--dm-text);
}

[data-theme="dark"] .footer-slide-item small,
[data-theme="dark"] .footer-slide-item .des {
    color: var(--dm-text-muted);
}

[data-theme="dark"] .others-store-card,
[data-theme="dark"] .__cart-total,
[data-theme="dark"] .checkout_details,
[data-theme="dark"] .product-single-hover,
[data-theme="dark"] .cookie-section {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

[data-theme="dark"] .cart_total {
    background: transparent !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .cart_information {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .cart_title,
[data-theme="dark"] .cart_value {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .cart_title.text-primary {
    color: var(--web-secondary, #f3cc74) !important;
}

html[data-theme="dark"] .__inline-56 .checkout_details {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 1200px) {
    html[data-theme="dark"] .__inline-56 .checkout_details {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

html[data-theme="dark"] .checkout-steps.steps-light {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

html[data-theme="dark"] #address-form.__card {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
}

html[data-theme="dark"] #address-form .card-body.p-0 {
    padding: 0 !important;
}

html[data-theme="dark"] #address-form .add-another-address {
    padding: 24px !important;
}

html[data-theme="dark"] #address-form .add-another-address .row {
    margin-left: 0;
    margin-right: 0;
}

[data-theme="dark"] .others-store-card .name-area .other-store-logo {
    border-color: var(--dm-surface);
}

[data-theme="dark"] .other-store-logo {
    background-color: var(--dm-surface-2);
}

[data-theme="dark"] .bg-section--2 {
    background-color: var(--dm-surface-2);
}

[data-theme="dark"] .input-group-overlay,
[data-theme="dark"] .search-form-mobile,
[data-theme="dark"] .cz-preview,
[data-theme="dark"] .cz-preview-item,
[data-theme="dark"] .product-details-shipping-details,
[data-theme="dark"] .product-description-tab,
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .tab-content {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text);
}

[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .nav-tabs .nav-link {
    border-color: var(--dm-border);
    color: var(--dm-text);
}

[data-theme="dark"] .__review-overview {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-theme="dark"] .product-details-content-tabs li .tab_link,
html[data-theme="dark"] .product-details-content-tabs li h2.nav-link.tab_link.__inline-27,
html[data-theme="dark"] .__review-overview h2.__inline-27 {
    color: var(--dm-text-muted) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .product-details-content-tabs li .tab_link.active,
html[data-theme="dark"] .product-details-content-tabs li h2.nav-link.tab_link.__inline-27.active,
html[data-theme="dark"] .__review-overview h2.__inline-27.active {
    color: var(--web-primary, #1c3120) !important;
    background-color: var(--web-secondary, #f3cc74) !important;
}

[data-theme="dark"] .details-text-justify,
[data-theme="dark"] .rich-editor-html-content,
[data-theme="dark"] .specification,
[data-theme="dark"] .__review-overview .tab-content,
[data-theme="dark"] .__review-overview .tab-pane {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .details-text-justify h1,
[data-theme="dark"] .details-text-justify h2,
[data-theme="dark"] .details-text-justify h3,
[data-theme="dark"] .details-text-justify h4,
[data-theme="dark"] .details-text-justify h5,
[data-theme="dark"] .details-text-justify h6,
[data-theme="dark"] .rich-editor-html-content h1,
[data-theme="dark"] .rich-editor-html-content h2,
[data-theme="dark"] .rich-editor-html-content h3,
[data-theme="dark"] .rich-editor-html-content h4,
[data-theme="dark"] .rich-editor-html-content h5,
[data-theme="dark"] .rich-editor-html-content h6 {
    color: #f4f7fb !important;
}

[data-theme="dark"] .details-text-justify p,
[data-theme="dark"] .details-text-justify li,
[data-theme="dark"] .details-text-justify span,
[data-theme="dark"] .details-text-justify div,
[data-theme="dark"] .details-text-justify strong,
[data-theme="dark"] .rich-editor-html-content p,
[data-theme="dark"] .rich-editor-html-content li,
[data-theme="dark"] .rich-editor-html-content span,
[data-theme="dark"] .rich-editor-html-content div,
[data-theme="dark"] .rich-editor-html-content strong {
    color: var(--dm-text) !important;
}

/* Home page product and promo blocks */
[data-theme="dark"] .__inline-62,
[data-theme="dark"] .deal_of_the_day,
[data-theme="dark"] .deal_of_the_day.bg--light,
[data-theme="dark"] .bg--light,
[data-theme="dark"] .recommended-product-card,
[data-theme="dark"] .flash_deal_product,
[data-theme="dark"] .shipping-policy-web,
[data-theme="dark"] .product-single,
[data-theme="dark"] .__cate-item,
[data-theme="dark"] .brand-card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .signup-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .search-page-header,
[data-theme="dark"] .sorting-item,
[data-theme="dark"] .cz-sidebar,
[data-theme="dark"] .cz-sidebar-header,
[data-theme="dark"] .cz-sidebar-body {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text);
}

/* Below 992px the filter drawer is forced white by an id rule, so match its weight */
[data-theme="dark"] #shop-sidebar {
    background-color: var(--dm-surface) !important;
}

/* Mini cart dropdown: the pale-blue header plus light heading text is unreadable */
[data-theme="dark"] .widget-cart-top {
    background: var(--web-secondary, #f3cc74) !important;
    color: var(--web-primary, #1c3120) !important;
}

[data-theme="dark"] .widget-cart-top h6,
[data-theme="dark"] .widget-cart-top span {
    color: var(--web-primary, #1c3120) !important;
}

[data-theme="dark"] .widget-cart-top svg path {
    fill: var(--web-primary, #1c3120) !important;
}

[data-theme="dark"] .cart-dropdown .widget-product-title > a,
[data-theme="dark"] .cart-dropdown p,
[data-theme="dark"] .cart-dropdown .font-size-sm,
[data-theme="dark"] .__card .__line-2 a,
[data-theme="dark"] .__cart-table .__line-2 a {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__quantity .cart-qty-btn,
[data-theme="dark"] .__quantity .cart-qty-btn i:not(.text-danger) {
    color: var(--web-secondary, #f3cc74) !important;
}

[data-theme="dark"] .qty_minus,
[data-theme="dark"] .qty_plus,
[data-theme="dark"] .qty_minus i:not(.text-danger),
[data-theme="dark"] .qty_plus i:not(.text-danger) {
    color: var(--web-secondary, #f3cc74) !important;
}

[data-theme="dark"] .cart-dropdown .btn-outline-secondary {
    color: var(--web-secondary, #f3cc74) !important;
    border-color: var(--web-secondary, #f3cc74) !important;
}

[data-theme="dark"] .cart-dropdown .btn-outline-secondary i,
[data-theme="dark"] .cart-dropdown .btn-outline-secondary .czi-arrow-right,
[data-theme="dark"] .cart-dropdown .btn-outline-secondary .czi-arrow-left {
    color: var(--web-secondary, #f3cc74) !important;
    background: transparent !important;
}

[data-theme="dark"] .cart-dropdown .widget-cart-item:not(:last-child) {
    border-bottom-color: var(--dm-border);
}

[data-theme="dark"] .simplebar-track {
    background-color: var(--dm-surface-2);
}

/* Product and banner imagery stays untouched, but flat white logos inside
   cards need a lift so they do not disappear against the dark surface. */
[data-theme="dark"] .navbar-brand > img,
[data-theme="dark"] .footer-web-logo a img {
    filter: brightness(1.08);
}

/* ---------------------------------------------- readable text bits */

[data-theme="dark"] .navbar-tool-text,
[data-theme="dark"] .navbar-tool-text *,
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .input-label,
[data-theme="dark"] .input-label-secondary,
[data-theme="dark"] .widget-title,
[data-theme="dark"] .cont,
[data-theme="dark"] .media-body,
[data-theme="dark"] .for-sorting,
[data-theme="dark"] .search-page-header,
[data-theme="dark"] .search-page-header * {
    color: var(--dm-text) !important;
}

/* Links that inherit the base theme's black rather than carrying their own colour */
[data-theme="dark"] h1 a,
[data-theme="dark"] h2 a,
[data-theme="dark"] h3 a,
[data-theme="dark"] h4 a,
[data-theme="dark"] h5 a,
[data-theme="dark"] h6 a,
[data-theme="dark"] .product-link,
[data-theme="dark"] .category-menu a,
[data-theme="dark"] .category-menu a span {
    color: var(--dm-text);
}

/* ------------------------------------------------- gold accents */

/*
 * The brand primary is a near-black green, so it disappears on dark surfaces.
 * The secondary is a warm gold that matches the logo and clears AAA contrast
 * here, so in dark mode it takes over everywhere the primary was used as text.
 */

/* Prices and accent numbers */
[data-theme="dark"] .text-accent,
[data-theme="dark"] .price,
[data-theme="dark"] .count-value,
[data-theme="dark"] .for-count-value,
/* Generic accent text */
[data-theme="dark"] .text-primary,
[data-theme="dark"] .web-text-primary,
[data-theme="dark"] .text--primary,
[data-theme="dark"] .text-base,
[data-theme="dark"] .color-bs-primary-force,
[data-theme="dark"] a.text-primary,
/* Active navigation */
[data-theme="dark"] .active-menu,
[data-theme="dark"] .mega-nav1,
[data-theme="dark"] .mega-nav1 .nav-link,
[data-theme="dark"] .order-details-nav.nav-menu > *.active,
[data-theme="dark"] .article-nav-wrapper ul li.active a,
[data-theme="dark"] .checkout-steps.steps-light .step-item.active.current,
/* Navbar icons */
[data-theme="dark"] .navbar-light .navbar-tool-icon-box,
/* Ratings and badges */
[data-theme="dark"] .product_review_rating,
[data-theme="dark"] span.badge-accent,
/* List links */
[data-theme="dark"] .list-group-flush .list-group-item li,
[data-theme="dark"] .list-group-flush .list-group-item li a {
    color: var(--web-secondary, #f3cc74) !important;
}

/* Hover states */
[data-theme="dark"] a:hover,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .category-menu li a:hover {
    color: var(--web-secondary, #f3cc74) !important;
}

[data-theme="dark"] .feature_header,
[data-theme="dark"] .__feature_header {
    background: transparent !important;
}

[data-theme="dark"] .feature_header span,
[data-theme="dark"] .__feature_header span {
    background-color: transparent !important;
    color: #f4f7fb !important;
}

[data-theme="dark"] .checkout-steps.steps-light .step-item {
    color: var(--dm-text-muted) !important;
}

/*
 * Categories sits as a white pill on the green bar in light mode. In dark mode
 * that pill was painted the same colour as the bar, so the label disappeared.
 * Gold fill with dark green type matches the other primary controls.
 */
[data-theme="dark"] .mega-nav,
[data-theme="dark"] .__mega-nav {
    background-color: var(--web-secondary, #f3cc74) !important;
    color: var(--web-primary, #1c3120) !important;
}

[data-theme="dark"] .mega-nav .nav-item .nav-link,
[data-theme="dark"] .mega-nav .nav-item .nav-link:hover,
[data-theme="dark"] .mega-nav .category-menu-toggle-btn,
[data-theme="dark"] .mega-nav .category-menu-toggle-btn:hover,
[data-theme="dark"] .mega-nav .category-menu-toggle-btn-text,
[data-theme="dark"] .mega-nav .category-menu-toggle-btn svg,
[data-theme="dark"] .mega-nav .dropdown-toggle::after {
    color: var(--web-primary, #1c3120) !important;
    border-top-color: var(--web-primary, #1c3120) !important;
}

/*
 * Section headings. Scoped to heading tags where the class is a generic one
 * like .text-black, so ordinary body text carrying that class stays neutral.
 */
[data-theme="dark"] .section-title,
[data-theme="dark"] .arrival-title,
[data-theme="dark"] .feature-product-title,
[data-theme="dark"] .categories-title,
[data-theme="dark"] .for-feature-title,
[data-theme="dark"] h1.text-black,
[data-theme="dark"] h2.text-black,
[data-theme="dark"] h3.text-black {
    color: var(--web-secondary, #f3cc74) !important;
}

/*
 * Primary buttons are filled with the same near-black green and so vanish
 * against a dark page. Gold fill with dark green text is the readable pairing.
 */
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .btn--primary:hover,
[data-theme="dark"] .btn--primary:focus,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .page-item.active .page-link,
[data-theme="dark"] .search_button,
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .checkout-steps.steps-light .step-item.active .step-count,
[data-theme="dark"] .checkout-steps.steps-light .step-item.active .step-progress,
[data-theme="dark"] .navbar-tool .navbar-tool-label,
[data-theme="dark"] .navbar-tool .navbar-tool-label span {
    background-color: var(--web-secondary, #f3cc74) !important;
    border-color: var(--web-secondary, #f3cc74) !important;
    color: var(--web-primary, #1c3120) !important;
}

[data-theme="dark"] .btn--primary i,
[data-theme="dark"] .btn-primary i,
[data-theme="dark"] .search_button i,
[data-theme="dark"] .page-item.active .page-link i {
    color: var(--web-primary, #1c3120) !important;
}

/*
 * .btn-secondary is already filled with the gold secondary, but the base theme
 * forces white label text on it, which is barely legible. Buy now is one.
 */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus,
[data-theme="dark"] .btn-secondary:not(:disabled):not(.disabled):active,
[data-theme="dark"] .btn-secondary:not(:disabled):not(.disabled).active,
[data-theme="dark"] .btn-secondary i,
[data-theme="dark"] .btn-secondary .text-white {
    color: var(--web-primary, #1c3120) !important;
}

/*
 * Order summary "See Payment Details" uses .bg--secondary (#e9f3ff).
 * On dark pages that pale fill + light inherited text is unreadable.
 * Keep label dark green on gold for default, hover, focus, and active.
 */
[data-theme="dark"] .btn.bg--secondary,
[data-theme="dark"] .btn.bg--secondary:hover,
[data-theme="dark"] .btn.bg--secondary:focus,
[data-theme="dark"] .btn.bg--secondary:active,
[data-theme="dark"] .btn.bg--secondary:not(:disabled):not(.disabled):active,
[data-theme="dark"] .btn.bg--secondary:not(:disabled):not(.disabled).active,
[data-theme="dark"] button.bg--secondary,
[data-theme="dark"] button.bg--secondary:hover,
[data-theme="dark"] button.bg--secondary:focus,
[data-theme="dark"] button.bg--secondary:active,
[data-theme="dark"] a.bg--secondary,
[data-theme="dark"] a.bg--secondary:hover,
[data-theme="dark"] a.bg--secondary:focus {
    background-color: var(--web-secondary, #f3cc74) !important;
    border-color: var(--web-secondary, #f3cc74) !important;
    color: var(--web-primary, #1c3120) !important;
    filter: none !important;
}

[data-theme="dark"] .btn.bg--secondary:hover,
[data-theme="dark"] .btn.bg--secondary:focus,
[data-theme="dark"] button.bg--secondary:hover,
[data-theme="dark"] button.bg--secondary:focus,
[data-theme="dark"] a.bg--secondary:hover,
[data-theme="dark"] a.bg--secondary:focus {
    background-color: #ffe08a !important;
    border-color: #ffe08a !important;
    color: var(--web-primary, #1c3120) !important;
}

/*
 * The base theme's hover swaps these icon buttons to a near-white circle, which
 * strands the gold icon on a pale background. Lift the dark surface instead.
 */
[data-theme="dark"] .navbar-tool-icon-box:hover,
[data-theme="dark"] .navbar-light .navbar-tool:hover .navbar-tool-icon-box,
[data-theme="dark"] .navbar-light .navbar-tool:hover .navbar-tool-icon-box.bg-secondary {
    background-color: var(--dm-surface-3) !important;
    color: var(--web-secondary, #f3cc74) !important;
}

/* The account icon is an inline SVG with the dark green baked into its fill attribute */
[data-theme="dark"] .navbar-tool-icon-box svg path {
    fill: var(--web-secondary, #f3cc74) !important;
}

/* The inner span otherwise paints a dark input surface over the gold button */
[data-theme="dark"] .search_button .input-group-text {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--web-primary, #1c3120) !important;
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-accent {
    background-color: transparent;
    border-color: var(--web-secondary, #f3cc74);
    color: var(--web-secondary, #f3cc74);
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus,
[data-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled):active,
[data-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled).active,
[data-theme="dark"] .btn-outline-accent:hover,
[data-theme="dark"] .btn-outline-accent:focus,
[data-theme="dark"] .btn-outline-accent:not(:disabled):not(.disabled):active,
[data-theme="dark"] .btn-outline-accent:not(:disabled):not(.disabled).active {
    background-color: var(--web-secondary, #f3cc74) !important;
    border-color: var(--web-secondary, #f3cc74) !important;
    color: var(--web-primary, #1c3120) !important;
}

/* Neutral outline buttons such as Expand cart keep a dark slate label otherwise */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--dm-text) !important;
    border-color: var(--dm-border);
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:focus {
    background-color: var(--dm-surface-3) !important;
    border-color: var(--dm-border);
    color: var(--dm-text) !important;
}

/* The slider dots follow the primary colour, which is invisible on a dark slide */
[data-theme="dark"] .owl-dots button {
    background-color: var(--web-secondary, #f3cc74);
}

/* ------------------------------------------------ account / profile */

[data-theme="dark"] .user-profile-container,
[data-theme="dark"] .__account-address {
    background-color: var(--dm-bg) !important;
}

[data-theme="dark"] .__account-address .font-nameA,
[data-theme="dark"] .__account-address .font-nameA span,
[data-theme="dark"] .__account-address .namHad,
[data-theme="dark"] .__customer-profile .font-nameA {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__account-address .font-nameA .fw-semibold,
[data-theme="dark"] .__account-address .font-nameA strong {
    color: #f4f7fb !important;
}

[data-theme="dark"] .__account-address .card-header,
[data-theme="dark"] .__account-address .bg-aliceblue {
    background-color: var(--dm-surface-2) !important;
    color: #f4f7fb !important;
}

[data-theme="dark"] .__account-address .card-header h6,
[data-theme="dark"] .__account-address .card-header span {
    color: #f4f7fb !important;
}

[data-theme="dark"] .__account-address label {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__customer-sidebar,
[data-theme="dark"] .user-profile-aside,
[data-theme="dark"] .__customer-profile .card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .__customer-sidebar .widget-title a {
    color: var(--dm-text-muted) !important;
    border-bottom-color: var(--dm-border) !important;
}

[data-theme="dark"] .__customer-sidebar .widget-title .active-menu,
[data-theme="dark"] .__customer-sidebar .widget-title a.active-menu {
    background-color: var(--dm-surface-3) !important;
    color: var(--web-secondary, #f3cc74) !important;
}

[data-theme="dark"] .__table .thead-light,
[data-theme="dark"] .__table-2 thead,
[data-theme="dark"] .__table thead td,
[data-theme="dark"] .__table thead th {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .spandHeadO {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__table,
[data-theme="dark"] .__table * {
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] .__customer-profile .form-control,
[data-theme="dark"] .password-toggle .form-control,
[data-theme="dark"] .password-toggle {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__customer-profile input:-webkit-autofill,
[data-theme="dark"] .__customer-profile input:-webkit-autofill:hover,
[data-theme="dark"] .__customer-profile input:-webkit-autofill:focus,
[data-theme="dark"] .password-toggle .form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--dm-text);
    caret-color: var(--dm-text);
    box-shadow: 0 0 0 1000px var(--dm-surface-2) inset !important;
    transition: background-color 9999s ease-out;
}

[data-theme="dark"] .password-toggle-btn .password-toggle-indicator {
    color: var(--dm-text-muted);
}

/*
 * Order details / summary. Several classes in style.css lock near-black
 * (#030303, #6a6a6a) onto prices, names and qty labels, which vanish on the
 * dark surface.
 */
[data-theme="dark"] .__inline-47 .amount,
[data-theme="dark"] .__inline-47 .font-name,
[data-theme="dark"] .__inline-47 .font-weight-bold,
[data-theme="dark"] .__inline-47 .font-semi-bold,
[data-theme="dark"] .__inline-47 .fs-15 {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__inline-47 .amount {
    color: var(--web-secondary, #f3cc74) !important;
}

[data-theme="dark"] .__inline-47 a:not(.btn):not(.dropdown-item) {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__inline-47 a:not(.btn):not(.dropdown-item):hover {
    color: var(--web-secondary, #f3cc74) !important;
}

[data-theme="dark"] .__inline-47 .product-qty,
[data-theme="dark"] .__inline-47 .product-qty span {
    color: var(--dm-text-muted) !important;
}

[data-theme="dark"] .__inline-47 .text-danger {
    color: #ff8a8a !important;
}

[data-theme="dark"] .__inline-47 .text-success {
    color: #7dcea0 !important;
}

[data-theme="dark"] .__inline-47 .for-discount-value {
    background-color: var(--web-secondary, #f3cc74) !important;
    color: var(--web-primary, #1c3120) !important;
}

[data-theme="dark"] .__inline-47 .payment,
[data-theme="dark"] .__inline-47 .card,
[data-theme="dark"] .__inline-47 .bg-white {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .bg-primary-light {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
}

html[data-theme="dark"] .bg-primary-light label,
html[data-theme="dark"] .bg-primary-light .text-capitalize {
    color: var(--dm-text) !important;
}

html[data-theme="dark"] .bg-primary-light .offline_payment_button,
html[data-theme="dark"] .bg-primary-light .btn-light {
    background-color: var(--dm-surface-3) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__inline-47 .border-lg,
[data-theme="dark"] .__inline-47 .border-sm,
[data-theme="dark"] .__inline-47 .border {
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] .__inline-47 .thead-light th {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__inline-47 .calculation-table td,
[data-theme="dark"] .__inline-47 .calculation-table span {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .__inline-47 .btn-square {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
}

[data-theme="dark"] .bg-sm-white {
    background-color: var(--dm-surface) !important;
}

.empty-review-state p {
    color: #5c6570;
    font-weight: 600;
}

[data-theme="dark"] .empty-review-state p {
    color: var(--dm-text-muted) !important;
}

[data-theme="dark"] .empty-review-state img {
    filter: invert(1) brightness(1.4) opacity(0.85);
}

[data-theme="dark"] .review-item-title {
    color: var(--dm-text) !important;
}

[data-theme="dark"] .bg-E9F3FF80,
[data-theme="dark"] .review-reply {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text);
}

[data-theme="dark"] .continue-shopping-link {
    color: var(--web-secondary, #f3cc74) !important;
}

html[data-theme="dark"] #buyNowModal .proceed-to-checkout-btn,
html[data-theme="dark"] .proceed-to-checkout-btn {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme="dark"] #buyNowModal .proceed-to-checkout-btn:hover,
html[data-theme="dark"] #buyNowModal .proceed-to-checkout-btn:focus,
html[data-theme="dark"] .proceed-to-checkout-btn:hover,
html[data-theme="dark"] .proceed-to-checkout-btn:focus {
    background-color: var(--web-secondary, #f3cc74) !important;
    border-color: var(--web-secondary, #f3cc74) !important;
    color: var(--web-primary, #1c3120) !important;
    box-shadow: 0 4px 14px rgba(243, 204, 116, 0.35);
}

html[data-theme="dark"] .modal-quick-view .product-title,
html[data-theme="dark"] .modal-quick-view .product-title a,
html[data-theme="dark"] .modal-quick-view .product-title2,
html[data-theme="dark"] .modal-quick-view .modal-title,
html[data-theme="dark"] .modal-quick-view .modal-title a,
html[data-theme="dark"] .modal-quick-view .product-title2 i,
html[data-theme="dark"] .modal-quick-view .czi-arrow-right,
html[data-theme="dark"] .modal-quick-view .czi-arrow-left {
    color: #f4f7fb !important;
}

html[data-theme="dark"] .modal-quick-view .close,
html[data-theme="dark"] .modal-quick-view .close-quick-view-modal,
html[data-theme="dark"] .modal-quick-view .close span {
    color: #f4f7fb !important;
    opacity: 1;
    text-shadow: none;
}

[data-theme="dark"] .continue-shopping-link:hover,
[data-theme="dark"] .continue-shopping-link:focus {
    color: #ffe08a !important;
}

/* Category / brand dropdown boxes only — keep dark nav as-is */
[data-theme="dark"] .navbar-stuck-menu .category-nav-scroll > .nav-item > .dropdown-menu,
[data-theme="dark"] .navbar-stuck-menu .category-level-menu,
[data-theme="dark"] .navbar-stuck-menu .category-sublevel-menu,
[data-theme="dark"] .navbar-stuck-menu .category-submenu > .dropdown-menu,
[data-theme="dark"] .navbar-stuck-menu .brand-level-menu {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 0.75rem 1.25rem var(--dm-shadow) !important;
}

[data-theme="dark"] .navbar-stuck-menu .category-level-menu .dropdown-item,
[data-theme="dark"] .navbar-stuck-menu .category-sublevel-menu .dropdown-item,
[data-theme="dark"] .navbar-stuck-menu .brand-level-menu .dropdown-item,
[data-theme="dark"] .navbar-stuck-menu .category-submenu-caret {
    color: var(--dm-text) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .navbar-stuck-menu .category-level-menu .dropdown-item:hover,
[data-theme="dark"] .navbar-stuck-menu .category-level-menu .dropdown-item:focus,
[data-theme="dark"] .navbar-stuck-menu .category-submenu:hover > .category-submenu-toggle,
[data-theme="dark"] .navbar-stuck-menu .category-submenu.show > .category-submenu-toggle,
[data-theme="dark"] .navbar-stuck-menu .category-sublevel-menu .dropdown-item:hover,
[data-theme="dark"] .navbar-stuck-menu .category-sublevel-menu .dropdown-item:focus,
[data-theme="dark"] .navbar-stuck-menu .brand-level-menu .dropdown-item:hover,
[data-theme="dark"] .navbar-stuck-menu .brand-level-menu .dropdown-item:focus {
    color: #fff !important;
    background-color: var(--dm-surface-3) !important;
}

[data-theme="dark"] .navbar-stuck-menu .brand-level-menu .__inline-17 {
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] .navbar-stuck-menu .brand-level-menu .count-value {
    color: var(--dm-text-muted) !important;
}

/* --------------------------------------------------- theme toggle */

.theme-toggle-icon-light {
    display: none;
}

[data-theme="dark"] .theme-toggle-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-toggle-icon-light {
    display: inline-block;
}

.theme-toggle {
    cursor: pointer;
}