/* SKLOPOSUD overrides loaded after OCTemplates styles. Keep product image wells light. */
html.light-theme {
    color-scheme: light;
}

html.dark-theme {
    color-scheme: dark;
    --sklp-dark-page: #0C141B;
    --sklp-dark-surface-1: #121C24;
    --sklp-dark-surface-2: #18242E;
    --sklp-dark-surface-3: #202E39;
    --sklp-dark-border: #2B3A46;
    --sklp-dark-border-control: #5D7180;
    --sklp-dark-text: #F4F7FA;
    --sklp-dark-text-secondary: #B6C0C8;
    --sklp-dark-text-muted: #87939E;
    --sklp-dark-link: #61B9FF;
    --sklp-dark-primary: #2F72B8;
    --sklp-dark-success: #5BD66B;
    --sklp-dark-warning: #FFC857;
    --sklp-dark-danger: #FF5C65;
    --sklp-brand-pink: #F5A3B7;
    --sklp-dark-primary-hover: #25639F;
    --sklp-dark-primary-active: #1D527F;
}

/* Native dark mode changes --ds-white-color, so conversion labels need an explicit white. */
html.dark-theme .button.button-primary:not(.button-success):not(.button-danger) {
    background-color: var(--sklp-dark-primary);
    border-color: var(--sklp-dark-primary);
    color: #FFFFFF;
}

html.dark-theme .button.button-primary:not(.button-success):not(.button-danger) svg path {
    fill: currentColor;
}

html.dark-theme .button.button-primary:not(.button-success):not(.button-danger) svg g rect {
    stroke: currentColor;
}

html.dark-theme .button.button-primary:not(.button-success):not(.button-danger):hover:not([disabled]),
html.dark-theme .button.button-primary:not(.button-success):not(.button-danger):focus-visible:not([disabled]) {
    background-color: var(--sklp-dark-primary-hover);
    border-color: var(--sklp-dark-primary-hover);
    color: #FFFFFF;
}

html.dark-theme .button.button-primary:not(.button-success):not(.button-danger):active:not([disabled]) {
    background-color: var(--sklp-dark-primary-active);
    border-color: var(--sklp-dark-primary-active);
    color: #FFFFFF;
}

html.dark-theme .button.button-primary:not(.button-success):not(.button-danger):focus-visible,
html.dark-theme .button.button-outline-primary:focus-visible {
    outline: 2px solid var(--sklp-dark-link);
    outline-offset: 2px;
}

html.dark-theme .button.button-primary:not(.button-success):not(.button-danger):disabled,
html.dark-theme .button.button-primary:not(.button-success):not(.button-danger)[disabled] {
    background-color: var(--sklp-dark-primary);
    border-color: var(--sklp-dark-primary);
    color: #FFFFFF;
    opacity: .6;
}

html.dark-theme .button.button-outline-primary {
    color: var(--sklp-dark-link);
    border-color: var(--sklp-dark-link);
}

html.dark-theme .button.button-outline-primary svg path {
    fill: currentColor;
}

html.dark-theme .button.button-outline-primary:hover:not([disabled]),
html.dark-theme .button.button-outline-primary:focus-visible:not([disabled]) {
    background-color: var(--sklp-dark-primary-active);
    border-color: var(--sklp-dark-link);
    color: #FFFFFF;
}

html.dark-theme .button.button-outline-primary:active:not([disabled]) {
    background-color: var(--sklp-dark-primary);
    color: #FFFFFF;
}

html.dark-theme .button.button-outline-primary:disabled,
html.dark-theme .button.button-outline-primary[disabled] {
    color: var(--sklp-dark-text-secondary);
    border-color: var(--sklp-dark-border-control);
    opacity: .6;
}

html.dark-theme .blue-link,
html.dark-theme .ds-product-found-cheaper {
    color: var(--sklp-dark-link);
}

html.dark-theme .blue-link:hover,
html.dark-theme .blue-link:focus-visible,
html.dark-theme .ds-product-found-cheaper:hover,
html.dark-theme .ds-product-found-cheaper:focus-visible {
    color: var(--sklp-dark-text);
    text-decoration: underline;
}

html.dark-theme .blue-link svg path {
    fill: currentColor;
}

html.dark-theme .light-text:not(.green-text):not(.red-text):not(.required),
html.dark-theme .secondary-text:not(.green-text):not(.red-text):not(.required) {
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme .ds-breadcrumb-item:last-child {
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme .oct-official-representative {
    background-color: var(--sklp-dark-surface-2);
    border: 1px solid var(--sklp-dark-border);
}

html.dark-theme .oct-official-representative .official-rep-text {
    color: var(--sklp-dark-text);
}

/* Override the light panel styles supplied by the rendered representative content. */
html.dark-theme .oct-official-representative .official-rep-text > div {
    background-color: var(--sklp-dark-surface-2) !important;
    border-color: var(--sklp-dark-border) !important;
    color: var(--sklp-dark-text);
}

html.dark-theme .oct-official-representative .official-rep-logo-link {
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 4px;
    flex: 0 0 auto;
}

html.dark-theme .ds-product-tabs-item {
    background-color: var(--sklp-dark-surface-2) !important;
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme .ds-product-tabs-item:hover,
html.dark-theme .ds-product-tabs-item:focus-visible {
    color: var(--sklp-dark-text);
    border-color: var(--sklp-dark-link);
}

html.dark-theme .ds-product-tabs-item.active {
    background-color: var(--sklp-dark-surface-3) !important;
    color: var(--sklp-dark-text);
    border-color: var(--sklp-dark-link);
}

html.dark-theme .ds-product-tabs-item.active::after {
    background-color: var(--sklp-dark-link);
}

html.dark-theme .ds-mobile-bottom-nav-item:not(.ds-mobile-bottom-nav-item-catalog) {
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme .ds-mobile-bottom-nav-item:not(.ds-mobile-bottom-nav-item-catalog) .ds-mobile-bottom-nav-item-icon {
    background-color: var(--sklp-dark-text-secondary);
}

html.dark-theme .ds-mobile-bottom-nav-item-catalog {
    color: var(--sklp-dark-link);
}

html.dark-theme .ds-mobile-bottom-nav-item-catalog .ds-mobile-bottom-nav-item-icon {
    background-color: var(--sklp-dark-link);
}

/* Phase 2.2 — category surface hierarchy */
html.dark-theme #product-category .ds-category-sort.content-block {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border);
    box-shadow: none;
}

html.dark-theme #product-category .ds-category-sort-select,
html.dark-theme #product-category .ds-category-limit-select {
    background-color: var(--sklp-dark-surface-3);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text);
}

html.dark-theme #product-category .ds-category-appearance {
    background-color: var(--sklp-dark-surface-3);
    border-color: var(--sklp-dark-border);
}

html.dark-theme #product-category .ds-category-appearance-btn {
    color: var(--sklp-dark-text-secondary);
    border-color: var(--sklp-dark-border-control);
}

html.dark-theme #product-category .ds-category-appearance-btn svg path {
    fill: currentColor;
}

html.dark-theme #product-category .ds-category-appearance-btn:hover,
html.dark-theme #product-category .ds-category-appearance-btn:focus-visible {
    background-color: var(--sklp-dark-surface-2);
    color: var(--sklp-dark-link);
    border-color: var(--sklp-dark-link);
}

html.dark-theme #product-category .ds-category-appearance-btn.active {
    background-color: var(--sklp-dark-primary-active);
    color: #FFFFFF;
}

html.dark-theme #product-category .ds-column .content-block {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
}

html.dark-theme #product-category .ds-category-products .product-grid > .content-block {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
    box-shadow: none;
}

html.dark-theme #product-category .ds-category-products .product-grid > .content-block:hover {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border-control);
}

/* The rail overlays the image; product image wells keep their existing light backgrounds. */
html.dark-theme #product-category .ds-category-products .ds-module-img-box {
    background-color: #FFFFFF;
}

html.dark-theme #product-category .ds-category-products .ds-module-buttons {
    background: rgba(12, 20, 27, .88);
    border: 1px solid var(--sklp-dark-border);
}

html.dark-theme #product-category .ds-category-products .ds-module-button svg path {
    fill: var(--sklp-dark-text);
}

html.dark-theme #product-category .ds-category-products .ds-module-button:hover svg path,
html.dark-theme #product-category .ds-category-products .ds-module-button:focus-visible svg path {
    fill: var(--sklp-dark-link);
}

html.dark-theme #product-category .ds-category-sort-select:focus-visible,
html.dark-theme #product-category .ds-category-limit-select:focus-visible,
html.dark-theme #product-category .ds-category-appearance-btn:focus-visible,
html.dark-theme #product-category .ds-category-products .ds-module-button:focus-visible {
    outline: 2px solid var(--sklp-dark-link);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .ds-product-tabs #oct-tabs {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .ds-product-tabs #oct-tabs::-webkit-scrollbar {
        display: none;
    }

    .ds-product-tabs #oct-tabs .ds-product-tabs-item {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .ds-product-fixed-btns {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    body.sklp-product-buybar-visible .ds-mobile-bottom-nav {
        transform: translateY(100%);
        visibility: hidden;
        pointer-events: none;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .ds-product-fixed-btns,
    body.sklp-product-buybar-visible .ds-mobile-bottom-nav {
        transition: none;
    }
}

/* Bundle A — Product. Media wells stay white; informational panels stay dark. */
html.dark-theme #product-product #oct-tabs .ds-product-tabs-item.active,
html.dark-theme #product-product .ds-product-tabs-badge {
    color: var(--sklp-dark-text);
}

html.dark-theme #product-product :is(.ds-product-main-content, .ds-product-tab-content.content-block, .ds-product-advantages, .ds-product-block .content-block, .ds-module .content-block, .ds-module-col > .content-block) {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text);
    box-shadow: none;
}

html.dark-theme #product-product :is(.ds-product-main-attributes-item, .ds-product-attributes-item:nth-child(odd), .ds-product-reviews-rating-item, .ds-product-reviews-item-box, .ds-product-reviews-item-answer, .ds-product-tabs-badge, .ds-product-timer) {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border);
}

html.dark-theme #product-product :is(.ds-product-tab-content-title, .ds-product-advantages-item, .ds-product-reviews-top, .ds-product-reviews-item-header, .ds-product-main-attributes-item, .ds-product-images) {
    border-color: var(--sklp-dark-border);
}

html.dark-theme #product-product :is(.ds-product-description, .ds-product-attributes, .ds-product-faq, .ds-product-reviews, .ds-product-dop_tab) {
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme #product-product :is(.ds-product-tab-content-text, .ds-product-reviews-item-content, .ds-product-reviews-item-answer) a {
    color: var(--sklp-dark-link);
}

html.dark-theme #product-product .ds-product-description :is(table, th, td) {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme #product-product :is(.ds-product-images-slide, .ds-product-images-additional-item, .ds-module-img-box) {
    background-color: #FFFFFF;
}

html.dark-theme #product-product .ds-product-reviews-rating-item-line {
    background-color: var(--sklp-dark-surface-3);
}

html.dark-theme #product-product .ds-product-reviews-rating-item-line-value {
    background-color: var(--sklp-brand-pink);
}

html.dark-theme #product-product :is(.ds-product-fixed-btns, .ds-product-tabs) {
    background-color: var(--sklp-dark-page);
    border-color: var(--sklp-dark-border);
}

html.dark-theme #product-product #product :is(.form-control, .form-select, .input-group-text),
html.dark-theme #product-product .ds-product-fixed-btns .form-control {
    background-color: var(--sklp-dark-surface-3);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text);
}

html.dark-theme #product-product :is(.ds-product-wishlist, .ds-product-compare, .ds-product-wishlist-compare .button-light, .ds-module-quantity-btn) {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme #product-product :is(.ds-product-wishlist, .ds-product-compare, .ds-module-quantity-btn) svg path {
    fill: currentColor;
}

/* Header/Menu/Search — explicit utility controls keep the basket independent. */
html.dark-theme .ds-header,
html.dark-theme .ds-menu-maincategories-desktop-box,
html.dark-theme .ds-menu-catalog,
html.dark-theme #ds_sidebar_viewed,
html.dark-theme form#search.ds-header-search,
html.dark-theme :is(#ds_livesearch, #ds_livesearch_mobile) .ds-livesearch-inner {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
}

html.dark-theme .ds-header :is(.ds-header-user-button, .ds-header-phone-button) ~ .ds-dropdown,
html.dark-theme .ds-header :is(.ds-header-user-button, .ds-header-phone-button) ~ .ds-dropdown .ds-dropdown-inner,
html.dark-theme .ds-menu-catalog :is(.ds-menu-catalog-items, .ds-sidebar-header),
html.dark-theme #ds_sidebar_viewed :is(.ds-sidebar-header, .ds-sidebar-content),
html.dark-theme :is(#ds_livesearch, #ds_livesearch_mobile) {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme .ds-header :is(.ds-header-user-button, .ds-header-phone-button) ~ .ds-dropdown :is(.ds-dropdown-title, .ds-header-user-logged-name),
html.dark-theme .ds-menu-catalog :is(.ds-menu-maincategories-item-title, .ds-megamenu-children-title, .ds-sidebar-header),
html.dark-theme #ds_sidebar_viewed .ds-sidebar-header {
    color: var(--sklp-dark-text);
}

html.dark-theme .ds-header :is(.ds-header-user-button, .ds-header-phone-button) ~ .ds-dropdown .ds-dropdown-links a,
html.dark-theme .ds-menu-catalog .ds-menu-list-landings-link,
html.dark-theme :is(#ds_livesearch, #ds_livesearch_mobile) a {
    color: var(--sklp-dark-link);
}

html.dark-theme .ds-menu-catalog .ds-menu-catalog-item:hover,
html.dark-theme .ds-menu-catalog .ds-menu-catalog-item:focus-within {
    background-color: var(--sklp-dark-surface-3);
}

html.dark-theme .ds-header-user-logged,
html.dark-theme .ds-menu-catalog .ds-megamenu-children-title {
    border-color: var(--sklp-dark-border);
}

html.dark-theme :is(.ds-header-menu-button, .ds-header-user-button, .ds-header-phone-button, .ds-header-search-toggle-button, .ds-header-viewed-button, .ds-header-wishlist-button, .ds-header-compare-button, #ds-search-button, .ds-header-catalog-button) {
    color: var(--sklp-dark-link);
}

html.dark-theme :is(.ds-header-menu-button, .ds-header-user-button, .ds-header-phone-button, .ds-header-search-toggle-button) .button-icon {
    background-color: currentColor;
}

html.dark-theme :is(.ds-header-viewed-button, .ds-header-wishlist-button, .ds-header-compare-button, #ds-search-button, .ds-header-catalog-button) svg path {
    fill: currentColor;
}

html.dark-theme .ds-menu-catalog .ds-sidebar-close,
html.dark-theme #ds_sidebar_viewed .ds-sidebar-close {
    background-color: var(--sklp-dark-surface-3);
    color: var(--sklp-dark-text);
}

html.dark-theme form#search.ds-header-search #searchInput {
    background-color: var(--sklp-dark-surface-3) !important;
    border-color: var(--sklp-dark-border-control) !important;
    color: var(--sklp-dark-text);
}

html.dark-theme form#search.ds-header-search #searchInput::placeholder {
    color: var(--sklp-dark-text-secondary);
    opacity: 1;
}

/* Footer/Service — retain artwork and messenger brand colors. */
html.dark-theme .ds-footer,
html.dark-theme #oct-policy {
    background-color: var(--sklp-dark-surface-1);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme .ds-footer :is(.ds-footer-top, .ds-footer-bordered) {
    border-color: var(--sklp-dark-border);
}

html.dark-theme .ds-footer .ds-footer-item-title {
    color: var(--sklp-dark-text);
}

html.dark-theme .ds-footer :is(.ds-footer-links, .ds-footer-item, .ds-footer-socials) a,
html.dark-theme #oct-policy .oct-policy-copy a {
    color: var(--sklp-dark-link);
}

html.dark-theme .ds-footer form#footer-subscribe.ds-footer-subscribe-input a.agree {
    color: var(--sklp-dark-link);
}

html.dark-theme .ds-footer form#footer-subscribe.ds-footer-subscribe-input a.agree:is(:hover, :focus-visible) {
    color: var(--sklp-dark-text);
}

html.dark-theme .ds-fixed-contact-dropdown,
html.dark-theme #oct-policy .oct-policy-inner {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme :is(.ds-fixed-contact-item, #uptocall-mini),
html.dark-theme #oct-policy .oct-policy-copy {
    color: var(--sklp-dark-text);
}

html.dark-theme .ds-fixed-contact-item:hover {
    color: var(--sklp-dark-link);
}

html.dark-theme #ds_fixed_contact_button .ds-fixed-contact-icon,
html.dark-theme #back-top {
    background-color: var(--sklp-dark-primary);
    border-color: var(--sklp-dark-border-control);
    color: #FFFFFF;
}

html.dark-theme #back-top:hover,
html.dark-theme #back-top:focus-visible {
    background-color: var(--sklp-dark-primary-hover);
}

html.dark-theme #back-top svg path {
    fill: currentColor;
}

/* Secondary catalog — same hierarchy as Phase 2.2, without changing its rules. */
html.dark-theme :is(#product-search, #product-manufacturer, #product-special) .content-block {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
    box-shadow: none;
}

html.dark-theme :is(#product-search, #product-manufacturer, #product-special) .ds-category-sort.content-block {
    background-color: var(--sklp-dark-surface-2);
}

html.dark-theme :is(#product-search, #product-manufacturer, #product-special) :is(.form-control, .form-select, .ds-category-appearance) {
    background-color: var(--sklp-dark-surface-3);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text);
}

html.dark-theme :is(#product-search, #product-manufacturer, #product-special) .ds-category-appearance-btn {
    color: var(--sklp-dark-text-secondary);
    border-color: var(--sklp-dark-border-control);
}

html.dark-theme :is(#product-search, #product-manufacturer, #product-special) .ds-category-appearance-btn svg path {
    fill: currentColor;
}

html.dark-theme :is(#product-search, #product-manufacturer, #product-special) .ds-category-appearance-btn:is(:hover, :focus-visible) {
    background-color: var(--sklp-dark-surface-2);
    color: var(--sklp-dark-link);
}

html.dark-theme :is(#product-search, #product-manufacturer, #product-special) .ds-category-appearance-btn.active {
    background-color: var(--sklp-dark-primary-active);
    color: #FFFFFF;
}

html.dark-theme :is(#product-search, #product-manufacturer, #product-special) .product-grid > .content-block:hover,
html.dark-theme #product-product .ds-module-col > .content-block:hover {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border-control);
}

html.dark-theme :is(#product-search, #product-manufacturer, #product-special) .ds-module-img-box,
html.dark-theme #product-manufacturer .ds-manufacturer-item img {
    background-color: #FFFFFF;
}

html.dark-theme :is(#product-product, #product-search, #product-manufacturer, #product-special) .ds-module-buttons {
    background: rgba(12, 20, 27, .88);
    border: 1px solid var(--sklp-dark-border);
}

html.dark-theme :is(#product-product, #product-search, #product-manufacturer, #product-special) .ds-module-button svg path {
    fill: var(--sklp-dark-text);
}

html.dark-theme :is(#product-product, #product-search, #product-manufacturer, #product-special) .ds-module-button:is(:hover, :focus-visible) svg path {
    fill: var(--sklp-dark-link);
}

html.dark-theme #product-manufacturer :is(.ds-manufacturer-item-block, .ds-manufacturer-links, .category-landing-links-item) {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border);
}

/* Compare/Wishlist/Account — page roots also contain empty-state panels. */
html.dark-theme :is(#account-wishlist, #account-login, #account-account, #account-forgotten) .ds-breadcrumb-item > a {
    color: var(--sklp-dark-link);
}

html.dark-theme :is(#account-wishlist, #account-login, #account-account, #account-forgotten) .ds-breadcrumb-item > a:is(:hover, :focus-visible) {
    color: var(--sklp-dark-text);
}

html.dark-theme :is(#account-login, #account-forgotten) span.required {
    color: var(--sklp-dark-danger);
}

html.dark-theme :is(#product-compare, #account-wishlist, #account-login, #account-account, #account-forgotten) .content-block {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
    box-shadow: none;
}

html.dark-theme #product-compare .ds-table-compare {
    --bs-table-bg: var(--sklp-dark-surface-1);
    --bs-table-color: var(--sklp-dark-text-secondary);
    --bs-table-border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
    border-color: var(--sklp-dark-border);
}

html.dark-theme #product-compare .ds-table-compare td {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme #product-compare .ds-table-compare-head td {
    background-color: var(--sklp-dark-surface-2);
    color: var(--sklp-dark-text);
}

html.dark-theme #product-compare .ds-table-compare-img img,
html.dark-theme #account-wishlist .ds-account-wishlist-img {
    background-color: #FFFFFF;
}

html.dark-theme #account-wishlist :is(.ds-account-wishlist, .ds-account-wishlist-info),
html.dark-theme :is(#account-login, #account-account, #account-forgotten) .with-border-bottom {
    border-color: var(--sklp-dark-border);
}

html.dark-theme :is(#account-login, #account-forgotten) .form-control {
    background-color: var(--sklp-dark-surface-3);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text);
}

html.dark-theme :is(#account-login, #account-account, #account-forgotten) a:not(.button),
html.dark-theme #account-wishlist .ds-account-wishlist-title,
html.dark-theme #product-compare .ds-table-product-name a {
    color: var(--sklp-dark-link);
}

html.dark-theme #loginModal .nav-link {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-link);
}

html.dark-theme #loginModal .nav-link.active {
    background-color: var(--sklp-dark-surface-3);
    color: var(--sklp-dark-text);
    border-color: var(--sklp-dark-link);
}

/* Responsive/accessibility — scoped text, controls, pagination and keyboard states. */
html.dark-theme :is(#product-product, #product-search, #product-manufacturer, #product-special, #product-compare, #account-wishlist, #account-login, #account-account, #account-forgotten, #reviewModal, #faqModal, #subscribeModal, #loginModal) .dark-text:not(.green-text):not(.red-text):not(.required):not(.text-danger),
html.dark-theme :is(#product-product, #product-search, #product-manufacturer, #product-special) :is(.ds-module-title, .ds-price-new, .ds-page-title):not(.green-text):not(.red-text):not(.required):not(.text-danger),
html.dark-theme :is(#product-compare, #account-wishlist, #account-login, #account-account, #account-forgotten) :is(.ds-page-title, .content-block-title) {
    color: var(--sklp-dark-text);
}

html.dark-theme :is(#product-category, #product-product, #product-search, #product-manufacturer, #product-special, #product-compare, #account-wishlist, #account-login, #account-account, #account-forgotten) .pagination :is(a, span) {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-link);
}

html.dark-theme :is(#product-category, #product-product, #product-search, #product-manufacturer, #product-special, #product-compare, #account-wishlist, #account-login, #account-account, #account-forgotten) .pagination :is(.active, .disabled) :is(a, span) {
    background-color: var(--sklp-dark-surface-3);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme :is(#product-category, #product-product, #product-search, #product-manufacturer, #product-special, #account-wishlist) .pagination .active :is(a, span) {
    border-color: var(--sklp-dark-link);
    color: var(--sklp-dark-text);
}

html.dark-theme :is(#product-product #product, #product-search, #account-login, #account-forgotten, #reviewModal, #faqModal, #subscribeModal, #loginModal) .form-control::placeholder {
    color: var(--sklp-dark-text-secondary);
    opacity: 1;
}

html.dark-theme :is(#product-product, #product-search, #product-manufacturer, #product-special, #product-compare, #account-wishlist, #account-login, #account-account, #account-forgotten, #reviewModal, #faqModal, #subscribeModal, #loginModal) :is(.form-control, .form-select, .input-group-text):disabled {
    background-color: var(--sklp-dark-surface-2);
    color: var(--sklp-dark-text-secondary);
    opacity: .6;
}

html.dark-theme :is(#product-product, #product-search, #product-manufacturer, #product-special, #product-compare, #account-wishlist, #account-login, #account-account, #account-forgotten, #reviewModal, #faqModal, #subscribeModal, #loginModal) :is(a, button, input, select, textarea, [tabindex]):focus-visible,
html.dark-theme :is(.ds-header-catalog-button, .ds-header-menu-button, .ds-header-user-button, .ds-header-phone-button, .ds-header-search-toggle-button, .ds-header-viewed-button, .ds-header-wishlist-button, .ds-header-compare-button, #searchInput, #ds-search-button, #back-top, #oct-policy-btn, .ds-fixed-contact-item):focus-visible,
html.dark-theme .ds-menu-catalog :is(a, button, [tabindex]):focus-visible,
html.dark-theme .ds-footer :is(a, button):focus-visible {
    outline: 2px solid var(--sklp-dark-link);
    outline-offset: 2px;
}

html.dark-theme :is(#product-product, #product-search, #product-manufacturer, #product-special, #product-compare, #account-wishlist, #account-login, #account-account, #account-forgotten) a:not(.button):hover,
html.dark-theme .ds-menu-catalog a:hover,
html.dark-theme .ds-header :is(.ds-header-user-button, .ds-header-phone-button) ~ .ds-dropdown .ds-dropdown-links a:hover,
html.dark-theme .ds-footer a:not(.button):hover,
html.dark-theme #oct-policy .oct-policy-copy a:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    html.dark-theme #ds_livesearch_mobile,
    html.dark-theme form#search.ds-header-search {
        background-color: var(--sklp-dark-surface-1);
    }
}

/* Bundle B — Cart / Smart Checkout. Preserve media wells, controls and layout. */
html.dark-theme :is(#checkout-cart, .ds-checkout.oct-checkout) .ds-cart-column-text {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border);
}

html.dark-theme :is(#checkout-cart, .ds-checkout.oct-checkout) .ds-cart-column-item-title {
    background-color: var(--sklp-dark-surface-3);
    /* Keep the existing semantic left accent. */
    border-top-color: var(--sklp-dark-border);
    border-right-color: var(--sklp-dark-border);
    border-bottom-color: var(--sklp-dark-border);
}

html.dark-theme :is(#checkout-cart, .ds-checkout.oct-checkout) :is(.ds-cart-column-text, .ds-cart-column-item-title):not(.green-text):not(.red-text):not(.required):not(.text-danger) {
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme :is(#checkout-cart, .ds-checkout.oct-checkout) .ds-cart-column-item-title svg path {
    fill: currentColor;
}

html.dark-theme .ds-checkout.oct-checkout .alert.alert-info {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-link);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme .ds-checkout.oct-checkout .alert.alert-info a:not(.button):not(.btn):not(.green-text):not(.red-text):not(.required):not(.text-danger) {
    color: var(--sklp-dark-link);
}

html.dark-theme :is(#checkout-cart, .ds-checkout.oct-checkout) .ds-cart-item-price-one {
    background-color: var(--sklp-dark-surface-3);
    border-color: var(--sklp-dark-success);
    color: var(--sklp-dark-success);
}

/* Bootstrap background/text utilities use !important. */
html.dark-theme .ds-checkout.oct-checkout .bg-info-subtle.text-info-emphasis {
    background-color: var(--sklp-dark-surface-3) !important;
    border-color: var(--sklp-dark-link);
    color: var(--sklp-dark-link) !important;
}

html.dark-theme :is(#checkout-cart, .ds-checkout.oct-checkout) :is(.form-control, .form-select, textarea)::placeholder {
    color: var(--sklp-dark-text-muted);
    opacity: 1;
}

/* Match the existing global button focus outline. */
html.dark-theme :is(#checkout-cart, .ds-checkout.oct-checkout) :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--sklp-dark-link);
    outline-offset: 2px;
}

/* Bundle C — Registration hierarchy and catalog semantic bonus chips. */
html.dark-theme #account-register .content-block {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
    box-shadow: none;
}

html.dark-theme #account-register .with-border-bottom {
    border-color: var(--sklp-dark-border);
}

html.dark-theme #account-register :is(.form-control, .form-select, .input-group-text) {
    background-color: var(--sklp-dark-surface-3);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text);
}

html.dark-theme #account-register :is(.form-control, textarea)::placeholder {
    color: var(--sklp-dark-text-muted);
    opacity: 1;
}

html.dark-theme #account-register .alert.alert-info {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-link);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme #account-register .alert.alert-info a:not(.button):not(.btn):not(.green-text):not(.red-text):not(.required):not(.text-danger):not(.text-success) {
    color: var(--sklp-dark-link);
}

html.dark-theme #account-register :is(.ds-page-title, .content-block-title, .dark-text, .form-label, .form-check-label, label, legend):not(.required):not(.text-danger):not(.text-success):not(.red-text):not(.green-text) {
    color: var(--sklp-dark-text);
}

html.dark-theme #account-register span.required {
    color: var(--sklp-dark-danger);
}

html.dark-theme #account-register :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--sklp-dark-link);
    outline-offset: 2px;
}

/* Bootstrap background/text utilities use !important; keep chip geometry intact. */
html.dark-theme :is(#product-category, #product-search, #product-manufacturer, #product-special) .ds-module-item .bg-info-subtle.text-info-emphasis {
    background-color: var(--sklp-dark-surface-3) !important;
    color: var(--sklp-dark-link) !important;
}

/* Bundle D — explicit first-party OCT modal family. Preserve media wells, semantic colors and layout. */
html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) .modal-content {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) :is(.modal-header, .modal-title) {
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text);
}

html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) :is(.dark-text, .ds-page-title, .content-block-title, .ds-product-tab-content-title, .form-label, .form-check-label):not(.required):not(.red-text):not(.green-text):not(.text-danger):not(.text-success) {
    color: var(--sklp-dark-text);
}

html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) :is(a:not(.button):not(.btn):not(.ds-product-wishlist):not(.ds-product-compare):not(.ds-module-quantity-btn), .blue-link):not(.required):not(.red-text):not(.green-text):not(.text-danger):not(.text-success) {
    color: var(--sklp-dark-link);
}

html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--sklp-dark-link);
    outline-offset: 2px;
}

html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) :is(.form-control, .form-select, .input-group-text, textarea) {
    background-color: var(--sklp-dark-surface-3);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text);
}

/* OCT sets .dark-theme .form-control background with !important. Match only that conflict. */
html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) .form-control {
    background-color: var(--sklp-dark-surface-3) !important;
}

html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) .input-group-text svg path {
    fill: currentColor;
}

html.dark-theme :is(#reviewModal, #faqModal, #subscribeModal, #loginModal, #callbackModal, #foundCheaperModal, #priceTrackerModal, #quickViewModal, #cartModal, #productOptionModal, #octStockNotifier, #modal-agree, #quickOrderModal) :is(.form-control, textarea)::placeholder {
    color: var(--sklp-dark-text-muted);
    opacity: 1;
}

/* Found-cheaper / price-tracker explanatory copy and section boundaries. */
html.dark-theme :is(#foundCheaperModal, #priceTrackerModal) :is(.modal-body-product, .modal-body-buttons) {
    border-color: var(--sklp-dark-border);
}

html.dark-theme :is(#foundCheaperModal, #priceTrackerModal) :is(.secondary-text, .light-text, .pr-modal-text, .form-check-label):not(.required):not(.red-text):not(.green-text):not(.text-danger):not(.text-success) {
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme :is(#foundCheaperModal, #priceTrackerModal) .form-check-input:not(:checked):not(:indeterminate) {
    border-color: var(--sklp-dark-border-control);
}

/* Quick View informational surfaces; image wells and their descendants are excluded. */
html.dark-theme #quickViewModal .modal-body-quick-view {
    background-color: var(--sklp-dark-surface-2);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme #quickViewModal :is(.content-block, .ds-product-main-content, .ds-product-tab-content.content-block, .ds-product-description):not(.ds-product-images, .ds-product-images-main, .ds-product-images *, .ds-product-images-main *) {
    background-color: var(--sklp-dark-surface-1);
    border-color: var(--sklp-dark-border);
    color: var(--sklp-dark-text-secondary);
    box-shadow: none;
}

html.dark-theme #quickViewModal .ds-product-main-actions {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border);
}

html.dark-theme #quickViewModal :is(.ds-product-wishlist, .ds-product-compare, .ds-product-wishlist-compare .button-light, .ds-module-quantity-btn) {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme #quickViewModal :is(.ds-product-wishlist, .ds-product-compare, .ds-product-wishlist-compare .button-light, .ds-module-quantity-btn, .input-group-text) svg path {
    fill: currentColor;
}

/* Bundle E1 — Public account entry & recovery. Preserve content-block surfaces, focus and route semantics. */
html.dark-theme :is(#account-login, #account-register, #account-forgotten) {
    color: var(--sklp-dark-text-secondary);
}

html.dark-theme :is(#account-login, #account-register, #account-forgotten) :is(.ds-page-title, .content-block-title, .dark-text, .form-label, .form-check-label, label, legend):not(.required):not(.text-danger):not(.text-success):not(.red-text):not(.green-text) {
    color: var(--sklp-dark-text);
}

/* Keep each navigation item's existing link/active color; replace only the legacy white hover surface. */
html.dark-theme .ds-account .ds-account-column-nav-item:hover,
html.dark-theme .ds-account .ds-account-column-nav-item:focus-visible {
    background-color: var(--sklp-dark-surface-2);
    border-color: var(--sklp-dark-border);
}

html.dark-theme :is(#account-login, #account-register, #account-forgotten) :is(.form-control, .form-select, textarea, select) {
    background-color: var(--sklp-dark-surface-3);
    border-color: var(--sklp-dark-border-control);
    color: var(--sklp-dark-text);
}

/* OCT's .form-control background is !important; match only this scoped conflict. */
html.dark-theme :is(#account-login, #account-register, #account-forgotten) .form-control {
    background-color: var(--sklp-dark-surface-3) !important;
}

html.dark-theme :is(#account-login, #account-register, #account-forgotten) :is(.form-control, textarea)::placeholder {
    color: var(--sklp-dark-text-muted);
    opacity: 1;
}

/* Checked and indeterminate controls retain their existing semantic background and image. */
html.dark-theme :is(#account-login, #account-register, #account-forgotten) .form-check-input:not(:checked):not(:indeterminate) {
    background-color: var(--sklp-dark-surface-3) !important;
    border-color: var(--sklp-dark-border-control);
}

html.dark-theme :is(#account-login, #account-register, #account-forgotten) .button-show {
    color: var(--sklp-dark-text-secondary);
    border-color: var(--sklp-dark-border-control);
}

html.dark-theme :is(#account-login, #account-register, #account-forgotten) .button-show:hover,
html.dark-theme :is(#account-login, #account-register, #account-forgotten) .button-show:focus-visible {
    color: var(--sklp-dark-link);
    border-color: var(--sklp-dark-link);
}

html.dark-theme :is(#account-login, #account-register, #account-forgotten) .button-show :is(svg, svg path) {
    fill: currentColor;
}