/* ===== SkladMarket dark theme (html[data-theme="dark"]) — built by gen-dark.php =====
   First: overrides generated from stylesheet.css + mobile.css (light colors hardcoded there);
   then the hand-written part: variables, graphite sections, Bootstrap. */
html[data-theme="dark"] #header-main {
    background: var(--graphite-grad);
}
html[data-theme="dark"] #header-main::after {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .catalog-pill:hover {
    background: var(--surface);
}
html[data-theme="dark"] .icon-badge {
    background: var(--surface);
}
html[data-theme="dark"] .login-pill:hover {
    background: var(--surface);
}
html[data-theme="dark"] .search-pill-btn {
    background: var(--surface);
}
html[data-theme="dark"] .search-pill-btn:hover {
    background: var(--surface);
}
html[data-theme="dark"] .cart-pill:hover,
html[data-theme="dark"] #cart.open .cart-pill {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .cart-qty {
    background: var(--surface);
}
html[data-theme="dark"] .site-sidebar {
    background: var(--surface);
}
html[data-theme="dark"] .site-sidebar-header {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .site-sidebar-pill.active i {
    background: var(--surface);
}
html[data-theme="dark"] .sidebar-promo-dots span.active {
    background: var(--surface);
}
html[data-theme="dark"] .cart-sidebar {
    background: var(--surface);
}
html[data-theme="dark"] .cart-sidebar-header {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .cart-item-remove:hover {
    background: var(--surface);
}
html[data-theme="dark"] .ms-sidebar {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .ms-sidebar-pill.active > i:first-child {
    background: var(--surface);
}
html[data-theme="dark"] .ms-btn-primary {
    background: var(--surface);
}
html[data-theme="dark"] .ms-btn-primary:hover {
    background: var(--surface);
}
html[data-theme="dark"] .ms-progress-bar {
    background: var(--surface);
}
html[data-theme="dark"] .catalog-acc.open .catalog-acc-count {
    background: var(--surface);
}
html[data-theme="dark"] .special-toolbar {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .special-toolbar-compare:hover {
    background: var(--surface);
}
html[data-theme="dark"] footer {
    background: var(--surface);
}
html[data-theme="dark"] footer::before {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .alert-success {
    background: var(--surface);
}
html[data-theme="dark"] .alert-warning {
    background: var(--surface);
}
html[data-theme="dark"] .alert-danger {
    background: var(--surface);
}
html[data-theme="dark"] .product-thumb .button-group {
    background: var(--surface);
}
html[data-theme="dark"] .pt-action {
    background: var(--surface) !important;
}
html[data-theme="dark"] .pt-bf-spin {
    border-top-color: var(--border);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--surface);
}
html[data-theme="dark"] .panel-heading {
    background: var(--surface);
}
html[data-theme="dark"] .acc-hub-toolbar {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .acc-page-toolbar {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .acc-page-link.active {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .toast-count {
    background: var(--surface);
}
html[data-theme="dark"] .toast-progress {
    background: var(--surface);
}
html[data-theme="dark"] .catalog-pill.active {
    background: var(--surface);
}
html[data-theme="dark"] .cmm-mobile-header {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .cmm-banner-btn:hover {
    background: var(--surface);
}
html[data-theme="dark"] .cmm-banner-dots span.active {
    background: var(--surface);
}
html[data-theme="dark"] .hero-arrow {
    background: var(--surface);
}
html[data-theme="dark"] .hero-arrow:hover {
    background: var(--surface);
}
html[data-theme="dark"] .hero-dot.active {
    background: var(--surface);
}
html[data-theme="dark"] .cat-side-count {
    color: var(--text-secondary);
}
html[data-theme="dark"] .pps-arrow {
    background: var(--surface);
}
html[data-theme="dark"] .pps-arrow:hover {
    background: var(--surface);
}
html[data-theme="dark"] .pps-action-btn {
    background: var(--surface);
}
html[data-theme="dark"] .pps-thumb {
    background: var(--surface);
}
html[data-theme="dark"] .pps-thumb:hover {
    border-color: var(--border);
}
html[data-theme="dark"] .pps-thumb.active {
    border-color: var(--border);
}
html[data-theme="dark"] .ps-stock.is-in {
    background: var(--surface);
}
html[data-theme="dark"] .ps-stock.is-out {
    background: var(--surface);
}
html[data-theme="dark"] .pvar-sim-img {
    background: var(--surface);
}
html[data-theme="dark"] .prs-head {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .prs-tab.active {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .prv-count {
    background: var(--surface);
}
html[data-theme="dark"] .prv-avatar {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .rvp-head {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .rvp-sub .rpill.on {
    background: var(--surface);
}
html[data-theme="dark"] .rvp-head .rvp-write {
    background: var(--surface);
}
html[data-theme="dark"] .rv-modal-head {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .product-toolbar {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .catalog-section-icon {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .pps-timer.is-off {
    background: var(--surface);
    color: var(--text-secondary);
}
html[data-theme="dark"] .pc-timer.is-off {
    background: var(--surface);
    color: var(--text-secondary);
}
html[data-theme="dark"] .hb-card:hover .hb-img,
html[data-theme="dark"] .hb-card:active .hb-img {
    border-color: var(--border);
    background: var(--surface);
}
html[data-theme="dark"] .ntf-head {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .product-thumb .image.pt-img-wait {
    background: var(--surface);
}
html[data-theme="dark"] .cart-item-del:hover,
html[data-theme="dark"] .cart-item-del:active {
    background: var(--surface);
}
html[data-theme="dark"] .product-short-info {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .product-short-info .rpill.on {
    background: var(--surface);
}
html[data-theme="dark"] .pp-brand:hover,
html[data-theme="dark"] .pp-brand:focus {
    border-color: var(--border);
}
html[data-theme="dark"] .pp-brand-logo {
    background: var(--surface);
}
html[data-theme="dark"] .product-short-info .pvar.open .pvar-head,
html[data-theme="dark"] .product-short-info .pvar-head:hover {
    border-color: var(--border);
}
html[data-theme="dark"] .product-short-info .pvar-count {
    background: var(--surface);
}
html[data-theme="dark"] .product-short-info .pvar-pill.active {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .product-short-info .pinst-plan.active {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .product-short-info .pinst-term.active {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .product-short-info .product-cart-btn {
    background: var(--surface);
}
html[data-theme="dark"] .auth-modal-tabs {
    background: var(--surface) !important;
}
html[data-theme="dark"] .auth-form-group label {
    color: var(--text);
}
html[data-theme="dark"] .auth-input > .fa {
    color: var(--text-secondary);
}
html[data-theme="dark"] .auth-input .auth-form-control {
    border: 1.5px solid var(--border) !important;
    background: var(--surface) !important;
}
html[data-theme="dark"] .auth-input .auth-form-control::placeholder {
    color: var(--text-secondary);
}
html[data-theme="dark"] .auth-input .auth-form-control:focus {
    background: var(--surface) !important;
}
html[data-theme="dark"] .auth-eye {
    color: var(--text-secondary);
}
html[data-theme="dark"] .auth-eye:hover,
html[data-theme="dark"] .auth-eye:active {
    background: var(--surface);
}
@media (prefers-reduced-motion: no-preference) {
html[data-theme="dark"] .product-thumb .image.pt-img-wait::after {
    background: var(--surface);
}
}
@media (max-width: 767px) {
html[data-theme="dark"] .cs-sec-head {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .acc-hero {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .acc-sections-title {
    background: var(--graphite-grad);
}
html[data-theme="dark"] .acc-sec-logout .acc-sec-icon {
    background: var(--surface);
}
html[data-theme="dark"] .acc-sec-logout {
    background: rgba(217, 48, 37, 0.12);
}
html[data-theme="dark"] .m-tabbar {
    background: var(--surface);
}
html[data-theme="dark"] .m-user.open .m-user-btn {
    background: var(--surface);
}
}

/* ===== Hand-written dark theme: variables, graphite sections, Bootstrap parts =====
   Accent sections (header, toolbars, banners) turn graphite; the accent itself becomes
   a lighter blue that reads on graphite and on the dark cards. */
html[data-theme="dark"] {
    color-scheme: dark;
    --accent: #4D9CFF;
    --accent-dark: #2F80EA;
    --accent-hover: #6AADFF;
    --accent-light: rgba(77, 156, 255, 0.16);
    --info: #4D9CFF;
    --bg: #111418;
    --surface: #1A1E24;
    --surface-2: #22272E;
    --text: #E8EBF0;
    --text-secondary: #A3ACBA;
    --text-light: #7D8796;
    --border: #2C323B;
    --border-dark: #3A414B;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
    --graphite: #262B32;
    --graphite-grad: linear-gradient(135deg, #2A3038 0%, #1F2329 100%);
}
html[data-theme="dark"] body { background-color: var(--bg); color: var(--text); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text); }
html[data-theme="dark"] hr { border-color: var(--border); }

/* the blue hero / menu banner turns graphite (the colored ones stay) */
html[data-theme="dark"] [style*="#005CBE"], html[data-theme="dark"] [style*="#005cbe"],
html[data-theme="dark"] [style*="var(--accent), var(--accent-dark)"] { background: var(--graphite-grad) !important; }

/* product photos are shot on white: a soft light tile keeps them clean on dark cards */
html[data-theme="dark"] .product-thumb .image,
html[data-theme="dark"] .cart-item-img, html[data-theme="dark"] .cart-item-image,
html[data-theme="dark"] .cmm-product-img, html[data-theme="dark"] .hb-img,
html[data-theme="dark"] .ms-item-img, html[data-theme="dark"] .qv-gallery-main,
html[data-theme="dark"] #product-product .thumbnails .thumbnail { background: #FFFFFF !important; }
html[data-theme="dark"] .product-thumb .image { border-radius: 12px; margin: 6px 6px 0; }
html[data-theme="dark"] .product-thumb .image.pt-img-wait { background: #2A3038 !important; }
html[data-theme="dark"] .pc-noimage { background: #EEF1F5 !important; color: #6B7584 !important; }

/* Bootstrap 3 pieces (bootstrap.css is not scanned by the generator) */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select, html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"] {
    background-color: var(--surface-2); color: var(--text); border-color: var(--border-dark);
}
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder { color: var(--text-light); }
html[data-theme="dark"] .form-control[disabled], html[data-theme="dark"] .form-control[readonly] { background-color: var(--surface); }
html[data-theme="dark"] .input-group-addon { background: var(--surface-2); border-color: var(--border-dark); color: var(--text-secondary); }
html[data-theme="dark"] .btn-default { background: var(--surface-2); color: var(--text); border-color: var(--border-dark); }
html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus { background: var(--border-dark); color: var(--text); }
html[data-theme="dark"] .panel, html[data-theme="dark"] .well, html[data-theme="dark"] .thumbnail,
html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .popover, html[data-theme="dark"] .breadcrumb {
    background-color: var(--surface); border-color: var(--border); color: var(--text);
}
html[data-theme="dark"] .panel-default > .panel-heading, html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { background-color: var(--surface-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .dropdown-menu > li > a { color: var(--text); }
html[data-theme="dark"] .dropdown-menu > li > a:hover { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td, html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > td, html[data-theme="dark"] .table-bordered > tbody > tr > td { border-color: var(--border); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd), html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--surface-2); }
html[data-theme="dark"] .nav-tabs { border-color: var(--border); }
html[data-theme="dark"] .nav-tabs > li > a:hover { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .nav-tabs > li.active > a, html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus { background: var(--surface); color: var(--text); border-color: var(--border); border-bottom-color: transparent; }
html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background: var(--surface); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .close { color: var(--text); text-shadow: none; }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .help-block { color: var(--text-secondary); }
html[data-theme="dark"] .alert-success { background: rgba(76, 175, 80, 0.14); color: #7DD884; }
html[data-theme="dark"] .alert-warning { background: rgba(255, 152, 0, 0.14); color: #FFB547; }
html[data-theme="dark"] .alert-danger { background: rgba(255, 107, 0, 0.14); color: #FF9A52; }
html[data-theme="dark"] .alert-info { background: var(--accent-light); color: var(--accent); }
html[data-theme="dark"] .tooltip-inner { background: #000; }

/* status pills keep their meaning but sit on dark */
html[data-theme="dark"] .pc-stock-in { background: rgba(76, 175, 80, 0.16); color: #7DD884; }
html[data-theme="dark"] .pc-stock-order { background: rgba(255, 152, 0, 0.16); color: #FFB547; }
html[data-theme="dark"] .pc-stock-out { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }

/* overlays: a touch darker so sheets stand apart */
html[data-theme="dark"] .qv-overlay, html[data-theme="dark"] .cart-sidebar-overlay,
html[data-theme="dark"] .catalog-mega-overlay, html[data-theme="dark"] .auth-modal-overlay { background: rgba(0, 0, 0, 0.62); }

/* ===== Theme switch: round icon button in the header ===== */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle .fa { transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.theme-toggle .fa-sun-o { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 120%) rotate(-90deg); opacity: 0; }
html[data-theme="dark"] .theme-toggle .fa-moon-o { transform: translateY(-120%) rotate(90deg); opacity: 0; }
html[data-theme="dark"] .theme-toggle .fa-sun-o { transform: translate(-50%, -50%) rotate(0); opacity: 1; color: #FFC94D; }
/* switching repaints the whole page at once: no per-element colour fades while it happens */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* ===== Dark polish: deeper blue-tinted graphite, a calmer accent that holds white text,
   soft photo tiles, glowing hover outlines, dark shimmer while photos load ===== */
html[data-theme="dark"] {
    --accent: #3B86F0;
    --accent-dark: #2A6ED6;
    --accent-hover: #5A9CF5;
    --accent-light: rgba(59, 134, 240, 0.15);
    --bg: #0E1116;
    --surface: #171B21;
    --surface-2: #1F242C;
    --border: #262C35;
    --border-dark: #353C47;
    --graphite-grad: linear-gradient(135deg, #1C2331 0%, #141820 100%);
    scrollbar-color: #39414D transparent;
}
html[data-theme="dark"] ::selection { background: rgba(59, 134, 240, 0.35); color: #fff; }

/* header + bottom tab bar: blue-tinted graphite with a hairline edge */
html[data-theme="dark"] #header-main, html[data-theme="dark"] header#header, html[data-theme="dark"] .site-header {
    background: var(--graphite-grad) !important; border-bottom: 1px solid #252D3A;
}
html[data-theme="dark"] .m-tabbar { background: rgba(20, 24, 30, 0.97) !important; border-top: 1px solid #252D3A !important; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45) !important; }
html[data-theme="dark"] .m-tab { color: #8E98A8; }

/* the accent bento tiles: a deep blue gradient instead of the bright flat blue */
html[data-theme="dark"] .home-topnav-pill:nth-child(1) { background: linear-gradient(145deg, #2F75E0 0%, #1B4B9C 100%) !important; box-shadow: 0 12px 28px -14px rgba(47, 117, 224, 0.7); }
html[data-theme="dark"] .home-topnav-pill:nth-child(3) { background: linear-gradient(135deg, #2A6ED6 0%, #1D4F9E 100%) !important; }
html[data-theme="dark"] .home-topnav-pill:nth-child(2) { background: var(--surface) !important; border: 1px solid var(--border) !important; }

/* product cards: surface tone, soft photo tile, accent glow on hover */
html[data-theme="dark"] .product-thumb { background: var(--surface); border-color: var(--border) !important; }
html[data-theme="dark"] .product-thumb:hover { box-shadow: 0 0 0 1px var(--accent), 0 14px 30px -16px rgba(59, 134, 240, 0.55) !important; }
html[data-theme="dark"] .product-thumb .image { background: #FFFFFF !important; }   /* photos are shot on pure white */
html[data-theme="dark"] .product-thumb .image.pt-img-wait {
    background: linear-gradient(100deg, #1F242C 30%, #2A313B 50%, #1F242C 70%) !important;
    background-size: 220% 100% !important; animation: dkShimmer 1.3s linear infinite;
}
@keyframes dkShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
html[data-theme="dark"].perf-lite .product-thumb .image.pt-img-wait { animation: none; }

/* cards, sheets and menus float a little above the page */
html[data-theme="dark"] .catalog-mega, html[data-theme="dark"] .cart-sidebar, html[data-theme="dark"] .auth-modal,
html[data-theme="dark"] .m-user-menu, html[data-theme="dark"] .ntf-panel, html[data-theme="dark"] .qv-dialog {
    background: var(--surface) !important; border: 1px solid #262C35; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8) !important;
}
html[data-theme="dark"] .m-user-menu::before { background: var(--surface); border-color: #262C35; }
html[data-theme="dark"] .m-user-item.is-main, html[data-theme="dark"] .m-user-item:hover { background: rgba(59, 134, 240, 0.12); }

/* section toolbars / cards on the page */
html[data-theme="dark"] .catalog-section-toolbar, html[data-theme="dark"] .hs-toolbar, html[data-theme="dark"] .hw-card,
html[data-theme="dark"] .sps-toolbar, html[data-theme="dark"] .pcc-toolbar, html[data-theme="dark"] .pcc-build,
html[data-theme="dark"] .footer-contacts-track, html[data-theme="dark"] .footer-brand-row .footer-social {
    background: var(--surface) !important; border-color: var(--border) !important;
}
html[data-theme="dark"] .hb-img { box-shadow: 0 0 0 2px var(--accent), 0 8px 20px -10px rgba(0, 0, 0, 0.7); }

/* text: headings a touch brighter, secondary text calmer */
html[data-theme="dark"] .product-thumb h4 a, html[data-theme="dark"] .hcc-name, html[data-theme="dark"] .hs-title b { color: #EEF1F5; }
html[data-theme="dark"] .price-old, html[data-theme="dark"] .pp-price-old { color: #7D8796 !important; }

/* one-page checkout section headers (checkout.twig) */
html[data-theme="dark"] .op-sec-head { background: var(--graphite-grad); }

/* phones: floating header / rounded tab bar (mobile.css) keep their shape in the dark theme */
@media (max-width: 767px) {
    html[data-theme="dark"] #header-main { border-bottom: none; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.7); }
}

/* toasts = notification cards (stylesheet.css): the old dark overrides were for the blue bar */
html[data-theme="dark"] .toast { background: var(--surface); border-color: #252D3A; }
html[data-theme="dark"] .toast-count { background: var(--accent); color: #fff; }
html[data-theme="dark"] .toast-progress { background: var(--accent); }
html[data-theme="dark"] .toast-error .toast-progress { background: var(--danger); }

/* checkout step 4: paid / waiting badges on graphite */
html[data-theme="dark"] .cs-paid { background: rgba(46, 158, 87, 0.18); color: #7fd89c; }
html[data-theme="dark"] .cs-paid.is-wait { background: rgba(245, 180, 0, 0.16); color: #f5c95a; }