/* Luma Pro dark theme. GENERATED by mkdark.py (+ dark-manual.css) - do not edit by hand. Active only when (set by the head script / the toggle). */ html[data-theme=dark]{color-scheme:dark;--bg:#0B0F19;--surf:#131A2A;--surf2:#1B2438;--txt:#E5E7EB;--blk:#F8FAFC;--mut:#9AA4B5;--brd:#273046;--gl:rgba(59,130,246,.15);--gll:rgba(59,130,246,.28);--gt:#60A5FA;--nvy:#060913;--wht:#131A2A} /* ---- from product.html#0 ---- */ html[data-theme=dark] body{background:var(--bg);color:var(--txt)} html[data-theme=dark] .topbar{background:var(--nvy);color:rgba(255,255,255,.6)} html[data-theme=dark] .topbar a{color:inherit} html[data-theme=dark] .topbar a:hover{color:#fff} html[data-theme=dark] .tb-sep{background:rgba(255,255,255,.12)} html[data-theme=dark] .tb-cta{background:var(--g);color:#fff!important} html[data-theme=dark] .tb-cta:hover{background:var(--gd)!important} html[data-theme=dark] .lang{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)} html[data-theme=dark] .lb{color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)} html[data-theme=dark] header{background:var(--surf);border-bottom:1px solid var(--brd)} html[data-theme=dark] .logo-box{background:var(--g)} html[data-theme=dark] .logo-box svg{stroke:#fff;fill:none} html[data-theme=dark] .logo-n{color:var(--blk)} html[data-theme=dark] .logo-s{color:var(--gt)} html[data-theme=dark] .srch{border:1.5px solid var(--brd);background:var(--bg)} html[data-theme=dark] .srch:focus-within{border-color:var(--g);background:var(--surf)} html[data-theme=dark] .srch input{border:none;background:transparent;color:var(--txt);outline:none} html[data-theme=dark] .srch input::placeholder{color:var(--mut)} html[data-theme=dark] .srch-sel{border:none;border-left:1.5px solid var(--brd);background:transparent;color:var(--mut);outline:none} html[data-theme=dark] .srch-btn{background:var(--g);border:none} html[data-theme=dark] .srch-btn:hover{background:var(--gd)} html[data-theme=dark] .srch-btn svg{stroke:#fff;fill:none} html[data-theme=dark] .hdb{border:none;background:transparent} html[data-theme=dark] .hdb:hover{background:var(--bg)} html[data-theme=dark] .hdb svg{stroke:var(--txt);fill:none} html[data-theme=dark] .bdg{background:#EF4444;color:#fff;border:2px solid #fff} html[data-theme=dark] nav{background:var(--surf);border-bottom:1px solid var(--brd)} html[data-theme=dark] .nav-item{color:var(--mut);border:none;background:none;border-bottom:2px solid transparent} html[data-theme=dark] .nav-item:hover,html[data-theme=dark] .nav-item.on{color:var(--gt);border-bottom-color:var(--g)} html[data-theme=dark] .nav-item svg.ni{stroke:currentColor;fill:none} html[data-theme=dark] .nav-arr{stroke:currentColor;fill:none} html[data-theme=dark] .drop{background:var(--surf);border:1px solid var(--brd)} html[data-theme=dark] .drop-col h4{color:var(--mut);border-bottom:1px solid var(--brd)} html[data-theme=dark] .drop-col a{color:var(--txt)} html[data-theme=dark] .drop-col a:hover{color:var(--gt)} html[data-theme=dark] .drop-col a.bold{color:var(--blk)} html[data-theme=dark] .drop-col a.bold:hover{color:var(--gt)} html[data-theme=dark] .drop-sep{background:var(--brd)} html[data-theme=dark] .trust{background:var(--surf);border-bottom:1px solid var(--brd)} html[data-theme=dark] .trust-item{color:var(--txt)} html[data-theme=dark] .trust-item svg{stroke:var(--gt);fill:none} html[data-theme=dark] .trust-sep{background:var(--brd)} html[data-theme=dark] .bc{color:var(--mut)} html[data-theme=dark] .bc a{color:inherit} html[data-theme=dark] .bc a:hover{color:var(--gt)} html[data-theme=dark] .bc-sep{color:var(--brd)} html[data-theme=dark] .bc-cur{color:var(--txt)} html[data-theme=dark] .sec-t{color:var(--blk)} html[data-theme=dark] .sec-t em{color:var(--gt)} html[data-theme=dark] .sec-link{color:var(--gt)} html[data-theme=dark] .sec-link svg{stroke:currentColor;fill:none} html[data-theme=dark] .sb-box{background:var(--surf);border:1px solid var(--brd)} html[data-theme=dark] .sb-hd{color:var(--blk);border-bottom:1px solid var(--brd)} html[data-theme=dark] .sb-hd svg{stroke:var(--mut);fill:none} html[data-theme=dark] .sb-cats a{color:var(--txt);border-bottom:1px solid var(--brd)} html[data-theme=dark] .sb-cats a:last-child{border-bottom:none} html[data-theme=dark] .sb-cats a:hover{background:var(--gl);color:var(--gt)} html[data-theme=dark] .sb-cats a.on{background:var(--gl);color:var(--gt);border-left:3px solid var(--g)} html[data-theme=dark] .sb-cats a span{color:var(--mut);background:var(--bg)} html[data-theme=dark] .sb-brand{color:var(--txt)} html[data-theme=dark] .sb-brand:hover{color:var(--gt)} html[data-theme=dark] .sb-price label{color:var(--mut)} html[data-theme=dark] .sb-price-inp{border:1.5px solid var(--brd);color:var(--txt);outline:none} html[data-theme=dark] .sb-price-inp:focus{border-color:var(--g)} html[data-theme=dark] .sb-apply{background:var(--g);color:#fff;border:none} html[data-theme=dark] .sb-apply:hover{background:var(--gd)} html[data-theme=dark] .sb-promo{background:linear-gradient(135deg,var(--nvy),#0A1440)} html[data-theme=dark] .sb-promo::before{background:radial-gradient(circle,rgba(37,99,235,.35),transparent 70%)} html[data-theme=dark] .sb-promo h4{color:#fff} html[data-theme=dark] .sb-promo p{color:rgba(255,255,255,.6)} html[data-theme=dark] .sb-promo a{background:var(--g);color:#fff} html[data-theme=dark] .sb-promo a:hover{background:var(--gd)} html[data-theme=dark] .sort-bar{background:var(--surf);border:1px solid var(--brd)} html[data-theme=dark] .sort-bar-l{color:var(--mut)} html[data-theme=dark] .sort-bar-l strong{color:var(--txt)} html[data-theme=dark] .sort-sel{border:1.5px solid var(--brd);color:var(--txt);outline:none;background:var(--surf)} html[data-theme=dark] .sort-sel:focus{border-color:var(--g)} html[data-theme=dark] .vbtn{border:1.5px solid var(--brd);background:var(--surf)} html[data-theme=dark] .vbtn:hover,html[data-theme=dark] .vbtn.on{border-color:var(--g);background:var(--gl)} html[data-theme=dark] .vbtn svg{stroke:var(--mut);fill:none} html[data-theme=dark] .vbtn.on svg{stroke:var(--gt)} html[data-theme=dark] .pcard{background:var(--surf);border:1.5px solid var(--brd)} html[data-theme=dark] .pcard:hover{border-color:var(--g)} html[data-theme=dark] .pcard-img{background:var(--bg);border-bottom:1px solid var(--brd)} html[data-theme=dark] .pc-overlay{background:rgba(37,99,235,.07)} html[data-theme=dark] .pc-overlay svg{stroke:var(--gt);fill:none} html[data-theme=dark] .badge-orig{background:#FEF3C7;color:#92400E} html[data-theme=dark] .badge-comp{background:#D1FAE5;color:#065F46} html[data-theme=dark] .badge-sale{background:#FEE2E2;color:#991B1B} html[data-theme=dark] .badge-new{background:#EDE9FE;color:#5B21B6} html[data-theme=dark] .badge-hot{background:#FFF7ED;color:#C2410C} html[data-theme=dark] .pcard-brand{color:var(--mut)} html[data-theme=dark] .pcard-name{color:var(--blk)} html[data-theme=dark] .spec-tag{background:var(--bg);color:var(--mut);border:1px solid var(--brd)} html[data-theme=dark] .spec-tag.hi{background:var(--gl);color:#93C5FD;border-color:rgba(96,165,250,.35)} html[data-theme=dark] .spec-tag svg{stroke:currentColor;fill:none} html[data-theme=dark] .pcard-compat{color:var(--mut)} html[data-theme=dark] .pcard-compat span{color:var(--gt)} html[data-theme=dark] .pcard-stock{color:#4ADE80} html[data-theme=dark] .pcard-stock::before{background:#16A34A} html[data-theme=dark] .pcard-stock.out{color:#F87171} html[data-theme=dark] .pcard-stock.out::before{background:#DC2626} html[data-theme=dark] .pcard-price{color:var(--gt)} html[data-theme=dark] .pcard-price span{color:var(--mut)} html[data-theme=dark] .pcard-old{color:var(--mut)} html[data-theme=dark] .pcard-cart{background:var(--g);color:#fff;border:none} html[data-theme=dark] .pcard-cart:hover{background:var(--gd)} html[data-theme=dark] .pcard-wish{border:1.5px solid var(--brd);background:var(--surf)} html[data-theme=dark] .pcard-wish:hover{border-color:var(--g)} html[data-theme=dark] .pcard-wish svg{stroke:var(--mut);fill:none} html[data-theme=dark] .pg-btn{border:1.5px solid var(--brd);background:var(--surf);color:var(--txt)} html[data-theme=dark] .pg-btn:hover{border-color:var(--g);color:var(--gt)} html[data-theme=dark] .pg-btn.on{background:var(--g);border-color:var(--g);color:#fff} html[data-theme=dark] .pg-btn.arr{color:var(--mut)} html[data-theme=dark] .pg-btn.arr:hover{color:var(--gt)} html[data-theme=dark] .pg-btn svg{stroke:currentColor;fill:none} html[data-theme=dark] .s1{background:linear-gradient(130deg,#080C1A 0%,#0F1840 55%,#132260 100%)} html[data-theme=dark] .s2{background:linear-gradient(130deg,#0A0A0A 0%,#111827 55%,#1a2535 100%)} html[data-theme=dark] .s3{background:linear-gradient(130deg,#080C1A 0%,#0D1638 55%,#111F55 100%)} html[data-theme=dark] .chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.85)} html[data-theme=dark] .slide h1{color:#fff} html[data-theme=dark] .slide h1 em{color:#60A5FA} html[data-theme=dark] .slide p{color:rgba(255,255,255,.65)} html[data-theme=dark] .s-cta{background:var(--g);color:#fff;border:none} html[data-theme=dark] .s-cta:hover{background:var(--gd)} html[data-theme=dark] .s-cta svg{stroke:#fff;fill:none} html[data-theme=dark] .s-out{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2)} html[data-theme=dark] .s-out:hover{background:rgba(255,255,255,.18);color:#fff} html[data-theme=dark] .harr{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)} html[data-theme=dark] .harr:hover{background:rgba(255,255,255,.25)} html[data-theme=dark] .harr svg{stroke:#fff;fill:none} html[data-theme=dark] .hdot{background:rgba(255,255,255,.3);border:none} html[data-theme=dark] .hdot.on{background:#fff} html[data-theme=dark] .cat-tile{background:var(--surf);border:1.5px solid var(--brd)} html[data-theme=dark] .cat-tile:hover{border-color:var(--g)} html[data-theme=dark] .ct-icon{background:var(--gl)} html[data-theme=dark] .cat-tile:hover .ct-icon{background:var(--gll)} html[data-theme=dark] .ct-icon svg{stroke:var(--gt);fill:none} html[data-theme=dark] .ct-txt h4{color:var(--blk)} html[data-theme=dark] .ct-txt p{color:var(--mut)} html[data-theme=dark] .brands-strip{background:var(--surf);border:1px solid var(--brd)} html[data-theme=dark] .bcard{background:var(--bg);border:1.5px solid var(--brd)} html[data-theme=dark] .bcard:hover{border-color:var(--g);background:var(--surf)} html[data-theme=dark] .bcard-name{color:var(--mut)} html[data-theme=dark] .pkg{border:1.5px solid var(--brd);background:var(--surf)} html[data-theme=dark] .pkg::before{background:linear-gradient(90deg,var(--g),#60A5FA)} html[data-theme=dark] .pkg:hover{border-color:var(--g)} html[data-theme=dark] .pkg.hot{background:var(--g);border-color:var(--g);color:#fff} html[data-theme=dark] .pkg.hot::before{background:rgba(255,255,255,.2)} html[data-theme=dark] .pkg-lbl{background:var(--gl);color:var(--gt)} html[data-theme=dark] .pkg.hot .pkg-lbl{background:rgba(255,255,255,.2);color:#fff} html[data-theme=dark] .pkg-price{color:var(--gt)} html[data-theme=dark] .pkg-price small{color:var(--mut)} html[data-theme=dark] .pkg.hot .pkg-price{color:#fff} html[data-theme=dark] .pkg.hot .pkg-price small{color:rgba(255,255,255,.65)} html[data-theme=dark] .pkg-price-req{color:var(--mut)} html[data-theme=dark] .pkg-ds{color:var(--mut)} html[data-theme=dark] .pkg.hot .pkg-ds{color:rgba(255,255,255,.7)} html[data-theme=dark] .pkg-feats li{color:var(--txt)} html[data-theme=dark] .pkg.hot .pkg-feats li{color:rgba(255,255,255,.88)} html[data-theme=dark] .chk{background:var(--gl)} html[data-theme=dark] .pkg.hot .chk{background:rgba(255,255,255,.2)} html[data-theme=dark] .chk svg{stroke:var(--gt);fill:none} html[data-theme=dark] .pkg.hot .chk svg{stroke:#fff} html[data-theme=dark] .pkg-btn{border:1.5px solid var(--brd);background:var(--surf);color:var(--txt)} html[data-theme=dark] .pkg-btn:hover{border-color:var(--g);color:var(--gt)} html[data-theme=dark] .pkg.hot .pkg-btn{background:#fff;border-color:#fff;color:var(--g)} html[data-theme=dark] .pop-tag{background:var(--surf);color:var(--gt)} html[data-theme=dark] .stats{background:var(--nvy)} html[data-theme=dark] .stat{border-right:1px solid rgba(255,255,255,.08)} html[data-theme=dark] .stat:last-child{border-right:none} html[data-theme=dark] .stat-n{color:#fff} html[data-theme=dark] .stat-n em{color:#60A5FA} html[data-theme=dark] .stat-l{color:rgba(255,255,255,.4)} html[data-theme=dark] .cta-band{background:linear-gradient(130deg,#080C1A,#0D1640)} html[data-theme=dark] .cta-band h2{color:#fff} html[data-theme=dark] .cta-band h2 em{color:#60A5FA} html[data-theme=dark] .cta-band p{color:rgba(255,255,255,.6)} html[data-theme=dark] .btn-g{background:var(--g);color:#fff;border:none} html[data-theme=dark] .btn-g:hover{background:var(--gd)} html[data-theme=dark] .btn-g svg,html[data-theme=dark] .btn-o svg{stroke:currentColor;fill:none} html[data-theme=dark] .btn-o{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.25)} html[data-theme=dark] .btn-o:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)} html[data-theme=dark] .pg-hero{background:linear-gradient(130deg,#080C1A 0%,#0F1840 60%,#132260 100%)} html[data-theme=dark] .pg-hero-glow{background:radial-gradient(circle,rgba(37,99,235,.25) 0%,transparent 65%)} html[data-theme=dark] .pg-hero h1{color:#fff} html[data-theme=dark] .pg-hero h1 em{color:#60A5FA} html[data-theme=dark] .pg-hero p{color:rgba(255,255,255,.6)} html[data-theme=dark] .pg-srch input{border:none;outline:none} html[data-theme=dark] .pg-srch button{background:var(--g);color:#fff;border:none} html[data-theme=dark] .pg-srch button:hover{background:var(--gd)} html[data-theme=dark] footer{background:var(--nvy);color:rgba(255,255,255,.5)} html[data-theme=dark] .ft-lb{background:var(--g)} html[data-theme=dark] .ft-lb svg{stroke:#fff;fill:none} html[data-theme=dark] .ft-ln{color:#fff} html[data-theme=dark] .ft-desc{color:rgba(255,255,255,.4)} html[data-theme=dark] .ft-contact a{color:rgba(255,255,255,.55)} html[data-theme=dark] .ft-contact a:hover{color:#fff} html[data-theme=dark] .ft-contact svg{stroke:currentColor;fill:none} html[data-theme=dark] .ft-col h5{color:rgba(255,255,255,.3)} html[data-theme=dark] .ft-col a{color:rgba(255,255,255,.5)} html[data-theme=dark] .ft-col a:hover{color:#fff} html[data-theme=dark] .ft-bottom{border-top:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.25)} html[data-theme=dark] .contact-form{background:var(--surf);border:1px solid var(--brd)} html[data-theme=dark] .contact-form h2{color:var(--blk)} html[data-theme=dark] .form-group label{color:var(--txt)} html[data-theme=dark] .form-group input,html[data-theme=dark] .form-group textarea,html[data-theme=dark] .form-group select{border:1.5px solid var(--brd);color:var(--txt);outline:none} html[data-theme=dark] .form-group input:focus,html[data-theme=dark] .form-group textarea:focus,html[data-theme=dark] .form-group select:focus{border-color:var(--g)} html[data-theme=dark] .form-submit{background:var(--g);color:#fff;border:none} html[data-theme=dark] .form-submit:hover{background:var(--gd)} html[data-theme=dark] .info-card{background:var(--surf);border:1px solid var(--brd)} html[data-theme=dark] .info-card h3{color:var(--blk)} html[data-theme=dark] .info-row{color:var(--txt)} html[data-theme=dark] .info-row svg{stroke:var(--gt);fill:none} html[data-theme=dark] .info-row a{color:var(--gt)} html[data-theme=dark] .about-hero{background:linear-gradient(130deg,#080C1A,#0F1840)} html[data-theme=dark] .about-hero::before{background:radial-gradient(circle,rgba(37,99,235,.2),transparent 65%)} html[data-theme=dark] .about-hero h1{color:#fff} html[data-theme=dark] .about-hero h1 em{color:#60A5FA} html[data-theme=dark] .about-hero p{color:rgba(255,255,255,.65)} html[data-theme=dark] .val-card{background:var(--surf);border:1px solid var(--brd)} html[data-theme=dark] .val-icon{background:var(--gl)} html[data-theme=dark] .val-icon svg{stroke:var(--gt);fill:none} html[data-theme=dark] .val-card h3{color:var(--blk)} html[data-theme=dark] .val-card p{color:var(--mut)} html[data-theme=dark] .step{background:var(--surf);border:1px solid var(--brd)} html[data-theme=dark] .step-num{background:var(--g);color:#fff} html[data-theme=dark] .step h3{color:var(--blk)} html[data-theme=dark] .step p{color:var(--mut)} html[data-theme=dark] .text-muted{color:var(--mut)} html[data-theme=dark] .section-wrap{background:var(--surf);border:1px solid var(--brd)} html[data-theme=dark] .auth-tab.on{color:var(--gt)!important;border-bottom-color:#2563EB!important} html[data-theme=dark] .auth-tab:hover{background:var(--gl)!important} html[data-theme=dark] #user-menu{background:var(--surf);border:1.5px solid var(--brd)} html[data-theme=dark] #user-menu a,html[data-theme=dark] #user-menu button{color:#CBD2DD;background:none;border:none} html[data-theme=dark] #user-menu a:hover,html[data-theme=dark] #user-menu button:hover{background:var(--gl);color:var(--gt)} html[data-theme=dark] .lb.on{background:#2563EB;border-color:#2563EB;color:#fff} html[data-theme=dark] .lb:hover{background:rgba(255,255,255,.18);color:#fff} /* ---- from index.html#0 ---- */ html[data-theme=dark] .slide h1,html[data-theme=dark] .slide h2{color:#fff} html[data-theme=dark] .slide h1 em,html[data-theme=dark] .slide h2 em{color:#60A5FA} html[data-theme=dark] .pkg-nm{color:var(--blk)} html[data-theme=dark] .pkg-ds{color:#A9B3C2} html[data-theme=dark] .pkg-btn{border:1.5px solid var(--brd);background:var(--surf);color:var(--blk)} html[data-theme=dark] .pkg-btn:hover{border-color:var(--g);color:var(--gt);background:var(--gl)} html[data-theme=dark] .pkg.hot{background:linear-gradient(150deg,#2563EB,#1D4ED8);border-color:#1D4ED8} html[data-theme=dark] .pkg.hot .pkg-lbl{background:rgba(255,255,255,.22);color:#fff} html[data-theme=dark] .pkg.hot .pkg-nm{color:#fff} html[data-theme=dark] .pkg.hot .pkg-price small{color:rgba(255,255,255,.85)} html[data-theme=dark] .pkg.hot .pkg-ds{color:rgba(255,255,255,.92)} html[data-theme=dark] .pkg.hot .pkg-btn{background:#fff;border-color:#fff;color:#1D4ED8} html[data-theme=dark] .pkg.hot .pkg-btn:hover{background:#F0F5FF;color:#1D4ED8} /* ---- from toners.html#0 ---- */ html[data-theme=dark] .pcard-img{background:var(--surf);border-bottom:1px solid var(--brd)} /* ---- from toners.html#1 ---- */ html[data-theme=dark] .sr-only{border:0} html[data-theme=dark] .pcard-img::after{background:rgba(37,99,235,.06)} html[data-theme=dark] .pcard-noimg{color:#808B9E} html[data-theme=dark] .pcard-noimg svg{stroke:#475569;fill:none} html[data-theme=dark] .pcard-name a{color:inherit} html[data-theme=dark] .pcard-name a:hover{color:var(--gt)} html[data-theme=dark] .pcard-name a:focus-visible{outline:2px solid var(--g);outline-offset:2px} html[data-theme=dark] .pcard-price.is-req{color:#808B9E} html[data-theme=dark] .pcard-wish.is-wished{border-color:rgba(248,113,113,.5);background:rgba(239,68,68,.15)} html[data-theme=dark] .pcard-wish.is-wished svg{fill:#F87171;stroke:#F87171} html[data-theme=dark] .f-btn{border:1.5px solid var(--g);background:var(--gl);color:var(--gt)} html[data-theme=dark] .f-btn svg,html[data-theme=dark] .f-fab svg{stroke:currentColor;fill:none} html[data-theme=dark] .f-badge{background:var(--g);color:#fff} html[data-theme=dark] .vbtn[aria-pressed="true"]{border-color:var(--g);background:var(--gl)} html[data-theme=dark] .vbtn[aria-pressed="true"] svg{stroke:var(--gt)} html[data-theme=dark] .f-chip{background:var(--surf);border:1.5px solid var(--gll);color:var(--gt)} html[data-theme=dark] .f-chip:hover{border-color:var(--g)} html[data-theme=dark] .f-chip i{background:var(--gl)} html[data-theme=dark] .f-clear{background:none;border:none;color:var(--mut)} html[data-theme=dark] .f-clear:hover{color:var(--gt)} html[data-theme=dark] .sb-brand .cnt{color:var(--mut);background:var(--bg)} html[data-theme=dark] .sb-brand.is-empty:hover{color:var(--txt)} html[data-theme=dark] .sb-sep{background:var(--brd)} html[data-theme=dark] .sb-note{color:var(--mut)} html[data-theme=dark] .lst-empty{background:var(--surf);border:1.5px dashed var(--brd)} html[data-theme=dark] .lst-empty-ic{background:var(--gl)} html[data-theme=dark] .lst-empty-ic svg{stroke:var(--gt);fill:none} html[data-theme=dark] .lst-empty h3{color:var(--blk)} html[data-theme=dark] .lst-empty p{color:var(--mut)} html[data-theme=dark] .btn-soft{border:1.5px solid var(--brd);background:var(--surf);color:var(--txt)} html[data-theme=dark] .btn-soft:hover{border-color:var(--g);color:var(--gt)} html[data-theme=dark] .btn-prim{border:none;background:var(--g);color:#fff} html[data-theme=dark] .btn-prim:hover{background:var(--gd)} html[data-theme=dark] .pg-gap{color:var(--mut)} html[data-theme=dark] .prod-grid.is-list .pcard-img{border-bottom:none;border-right:1px solid var(--brd)} @media (hover:none){ html[data-theme=dark] .pcard:hover{border-color:var(--brd)} } @media (max-width:900px){ html[data-theme=dark] .page-2col>.sidebar{background:var(--bg)} html[data-theme=dark] .f-head{background:var(--bg);border-bottom:1px solid var(--brd);color:var(--blk)} html[data-theme=dark] .f-x{border:none;background:var(--surf);color:var(--mut)} html[data-theme=dark] .f-foot{background:var(--bg);border-top:1px solid var(--brd)} html[data-theme=dark] .f-reset{border:1.5px solid var(--brd);background:var(--surf);color:var(--txt)} html[data-theme=dark] .f-apply{border:none;background:var(--g);color:#fff} html[data-theme=dark] .f-backdrop{background:rgba(8,12,26,.5)} html[data-theme=dark] .f-fab{border:none;background:var(--blk);color:#fff} html[data-theme=dark] .f-fab .f-badge{background:var(--surf);color:var(--blk)} } /* ---- from toners.html#2 ---- */ /* ---- from printers.html#0 ---- */ /* ---- from 404.html#1 ---- */ html[data-theme=dark] .nf-code{color:var(--gt)} html[data-theme=dark] .nf-title{color:var(--blk)} html[data-theme=dark] .nf-text{color:#A9B3C2} html[data-theme=dark] .nf-search input{border:1.5px solid var(--brd);background:var(--surf)} html[data-theme=dark] .nf-search input:focus{outline:none;border-color:#2563EB} html[data-theme=dark] .nf-search button{background:#2563EB;color:#fff;border:none} html[data-theme=dark] .nf-links a{background:var(--surf);border:1.5px solid var(--brd);color:var(--blk)} html[data-theme=dark] .nf-links a:hover{border-color:#2563EB;color:var(--gt)} html[data-theme=dark] .nf-call{color:#A9B3C2} html[data-theme=dark] .nf-call a{color:var(--gt)} /* ---- from about.html#0 ---- */ /* ---- from brother-toneri.html#1 ---- */ /* ---- from brother-hl-1110-12-dr1000-1010-1020-1030-1035-1040-1050-1060-1070-1075.html#2 ---- */ html[data-theme=dark] .pdp{color:var(--txt,var(--txt))} html[data-theme=dark] .pdp-crumbs{color:var(--mut)} html[data-theme=dark] .pdp-crumbs a{color:var(--mut)} html[data-theme=dark] .pdp-crumbs a:hover{color:var(--gt)} html[data-theme=dark] .pdp-crumbs b{color:var(--blk)} html[data-theme=dark] .pdp-card{background:var(--wht,var(--surf));border:1.5px solid var(--brd,var(--brd))} html[data-theme=dark] .pdp-media{background:var(--surf);border:1.5px solid var(--brd,var(--brd))} html[data-theme=dark] .pdp-brand{color:var(--mut,var(--mut))} html[data-theme=dark] .pdp-h1{color:var(--blk,var(--blk))} html[data-theme=dark] .pdp-pill{background:var(--lp-soft);border:1px solid var(--brd,var(--brd));color:var(--lp-tx2)} html[data-theme=dark] .pdp-pill.blue{background:var(--lp-blue-bg);border-color:var(--lp-blue-bd);color:var(--lp-blue-tx)} html[data-theme=dark] .pdp-pill.ok{background:var(--lp-ok-bg);border-color:var(--lp-ok-bd);color:var(--lp-ok-tx)} html[data-theme=dark] .pdp-price{color:var(--lp-price)} html[data-theme=dark] .pdp-price.is-req{color:var(--mut,var(--mut))} html[data-theme=dark] .pdp-vat{color:var(--mut,var(--mut))} html[data-theme=dark] .pdp-qty{border:1.5px solid var(--lp-line2);background:var(--wht,var(--surf));color:var(--blk,var(--blk))} html[data-theme=dark] .pdp-qty button{border:0;background:transparent;color:inherit} html[data-theme=dark] .pdp-qty span{color:var(--blk,var(--blk))} html[data-theme=dark] .pdp-buy{background:#2563EB;color:#fff;border:0} html[data-theme=dark] .pdp-buy:hover{background:#1D4ED8} html[data-theme=dark] .pdp-wish{border:1.5px solid var(--lp-line2);background:var(--wht,var(--surf))} html[data-theme=dark] .pdp-wish.is-wished svg{fill:#F87171;stroke:#F87171} html[data-theme=dark] .pdp-stock{color:var(--lp-ok-tx)} html[data-theme=dark] .pdp-onl{color:var(--mut,var(--mut))} html[data-theme=dark] .pdp-onl svg{color:var(--lp-ph)} html[data-theme=dark] .pdp-secs{border-top:1.5px solid var(--brd,var(--brd))} html[data-theme=dark] .pdp-sec-h{color:var(--blk,var(--blk))} html[data-theme=dark] .js-tabs .pdp-tabs{border-top:1.5px solid var(--brd,var(--brd))} html[data-theme=dark] .js-tabs .pdp-secs{border-top:0} html[data-theme=dark] .pdp-tab{border:0;border-bottom:3px solid transparent;background:transparent;color:var(--mut,var(--mut))} html[data-theme=dark] .pdp-tab.on{border-bottom-color:var(--g,#2563EB);color:var(--blk,var(--blk))} html[data-theme=dark] .pdp-desc{color:var(--lp-tx2)} html[data-theme=dark] .pdp-lat{color:var(--lp-ph)} html[data-theme=dark] .pdp-spec td{border-bottom:1px solid var(--brd,var(--brd));color:var(--blk,var(--blk))} html[data-theme=dark] .pdp-spec td:first-child{color:var(--mut,var(--mut))} html[data-theme=dark] .pdp-pfilter{border:1.5px solid var(--lp-line2);background:var(--wht,var(--surf));color:var(--txt,var(--txt))} html[data-theme=dark] .pdp-pfilter:focus{outline:none;border-color:rgba(96,165,250,.55);box-shadow:0 0 0 3px rgba(96,165,250,.35)} html[data-theme=dark] .pdp-pnone{color:var(--mut,var(--mut))} html[data-theme=dark] .pdp-pl{color:var(--mut,var(--mut))} html[data-theme=dark] .pdp-pt a,html[data-theme=dark] .pdp-chip{background:var(--lp-blue-bg);border:1px solid var(--lp-blue-bd);color:var(--lp-blue-tx)} html[data-theme=dark] .pdp-pt a:hover,html[data-theme=dark] .pdp-chip:hover{border-color:#2563EB} html[data-theme=dark] .pdp-chip.plain{background:var(--lp-soft);border-color:var(--brd,var(--brd));color:var(--lp-tx2)} html[data-theme=dark] .pdp-more{border:1px dashed #9CA3AF;background:transparent;color:var(--lp-tx2)} html[data-theme=dark] .pdp-more:hover{border-color:#2563EB;color:var(--gt)} html[data-theme=dark] .pdp-ph{color:var(--blk,var(--txt))} html[data-theme=dark] .pdp-ph b{background:var(--lp-soft);color:var(--mut,#A9B3C2)} html[data-theme=dark] .pdp-muted{color:#808B9E} html[data-theme=dark] .pdp-sec{border-top:1px solid var(--brd)} html[data-theme=dark] .pdp-h2{color:var(--blk)} html[data-theme=dark] .pdp-rel{background:var(--surf);border:1.5px solid var(--brd);color:inherit} html[data-theme=dark] .pdp-rel:hover{border-color:rgba(96,165,250,.55)} html[data-theme=dark] .pdp-rel-brand{color:var(--mut)} html[data-theme=dark] .pdp-rel-name{color:var(--blk)} html[data-theme=dark] .pdp-rel-price{color:var(--gt)} @media (max-width:700px){ html[data-theme=dark] .js-tabs .pdp-secs{border-top:1.5px solid var(--brd,var(--brd))} html[data-theme=dark] .pdp-acc{border:0;border-bottom:1.5px solid var(--brd,var(--brd));background:transparent;color:var(--blk,var(--blk))} } /* ---- from mobile.css ---- */ @media (max-width:900px){ html[data-theme=dark] .mnav-btn .mnav-ic i{background:var(--txt)} html[data-theme=dark] .mnav-bg{background:rgba(8,12,26,.5)} html[data-theme=dark] .mnav{background:var(--surf)} html[data-theme=dark] .mnav-top{border-bottom:1px solid var(--brd)} html[data-theme=dark] .mnav-x{border:none;background:var(--bg);color:var(--mut)} html[data-theme=dark] .mnav-link,html[data-theme=dark] .mnav-sub>summary{color:var(--blk);border-bottom:1px solid #1E2639} html[data-theme=dark] .mnav-sub>summary::after{border-right:2px solid var(--mut);border-bottom:2px solid var(--mut)} html[data-theme=dark] .mnav-link.on,html[data-theme=dark] .mnav-sub.on>summary{color:var(--gt)} html[data-theme=dark] .mnav-link.on{background:var(--gl)} html[data-theme=dark] .mnav-sub[open]>summary{background:var(--bg);border-bottom-color:transparent} html[data-theme=dark] .mnav-panel{background:var(--bg);border-bottom:1px solid #1E2639} html[data-theme=dark] .mnav-all{background:var(--surf);border:1.5px solid var(--gll);color:var(--gt)} html[data-theme=dark] .mnav-h{color:var(--mut)} html[data-theme=dark] .mnav-panel a:not(.mnav-all){color:var(--txt);border-bottom:1px solid #1E2639} html[data-theme=dark] .mnav-panel a:not(.mnav-all):last-child{border-bottom:none} html[data-theme=dark] .mnav-foot{border-top:1px solid var(--brd);background:var(--surf)} html[data-theme=dark] .mnav-call{background:var(--g);color:#fff} html[data-theme=dark] .mnav-call svg,html[data-theme=dark] .mnav-mail svg{stroke:currentColor;fill:none} html[data-theme=dark] .mnav-mail{color:var(--txt)} html[data-theme=dark] .mnav-lang{background:var(--bg);border:1px solid var(--brd)} html[data-theme=dark] .mnav-lang button{border:none;background:transparent;color:var(--mut)} html[data-theme=dark] .mnav-lang button.on{background:var(--g);color:#fff} html[data-theme=dark] .mnav-addr{color:var(--mut)} html[data-theme=dark] .mnav-theme{border:1.5px solid var(--brd);background:transparent;color:var(--txt)} html[data-theme=dark] .mnav-theme svg{stroke:currentColor;fill:none} html[data-theme=dark] .mf-btn{border:1.5px solid var(--g);background:var(--gl);color:var(--gt)} html[data-theme=dark] .mf-btn svg{stroke:currentColor;fill:none} html[data-theme=dark] .page-2col>.sidebar.mf-drawer{background:var(--bg)} html[data-theme=dark] .mf-head{background:var(--bg);border-bottom:1px solid var(--brd);color:var(--blk)} html[data-theme=dark] .mf-x{border:none;background:var(--surf);color:var(--mut)} html[data-theme=dark] .mf-foot{background:var(--bg);border-top:1px solid var(--brd)} html[data-theme=dark] .mf-apply{border:none;background:var(--g);color:#fff} html[data-theme=dark] .mf-bg{background:rgba(8,12,26,.5)} } html[data-theme=dark] .lpd-ov{background:rgba(0,0,0,.45)} html[data-theme=dark] .lpd{background:var(--surf)} html[data-theme=dark] .lpd-hd{border-bottom:1px solid #1E2639} html[data-theme=dark] .lpd-hd h2{color:var(--blk)} html[data-theme=dark] .lpd-close{border:none;background:var(--bg);color:var(--mut)} html[data-theme=dark] .lpd-row{border-bottom:1px solid #1E2639} html[data-theme=dark] .lpd-name{color:var(--txt)} html[data-theme=dark] .lpd-name:hover{color:var(--gt)} html[data-theme=dark] .lpd-x{border:none;background:none;color:#F87171} html[data-theme=dark] .lpd-empty{color:var(--mut)} html[data-theme=dark] .lpd-empty strong{color:#CBD2DD} html[data-theme=dark] .lpd-ft{border-top:1px solid #1E2639} html[data-theme=dark] .lpd-btn{background:#2563EB;color:#fff} /* ---- from toners.css ---- */ /* ---- manual overrides ---- */ /* ========================================================================================== Hand-written part of the dark theme (appended to dark.css by mkdark.py). Everything here is scoped to html[data-theme=dark]. ========================================================================================== */ /* ---- form fields: dark fields everywhere (specificity 0, so every class rule above still wins) ---- */ :where(html[data-theme=dark]) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]), select, textarea) { background-color: var(--surf2); color: var(--txt); border-color: var(--brd); } :where(html[data-theme=dark]) ::placeholder { color: #7F8A9E; opacity: 1; } :where(html[data-theme=dark]) option { background: var(--surf); color: var(--txt); } /* ---- elements with inline style="" (cart drawer, login window, printers page ...) ---- Inline styles beat normal CSS, so these need !important. Both spellings are listed because a browser rewrites "background:#fff" as "background: rgb(255, 255, 255)" once JS touches the element. */ html[data-theme=dark] [style*="background:#fff" i], html[data-theme=dark] [style*="background: rgb(255, 255, 255)" i] { background: var(--surf) !important; } html[data-theme=dark] [style*="background:#F5F6F8" i], html[data-theme=dark] [style*="background: rgb(245, 246, 248)" i] { background: var(--bg) !important; } html[data-theme=dark] [style*="background:#F3F4F6" i] { background: var(--surf2) !important; } html[data-theme=dark] [style*="background:#E5E7EB" i] { background: var(--brd) !important; } html[data-theme=dark] [style*="background:#EFF6FF" i] { background: var(--gl) !important; } html[data-theme=dark] [style*="background:#DBEAFE" i]:not(.pdp-badge) { background: var(--gll) !important; } html[data-theme=dark] [style*="background:#F0FDF4" i] { background: rgba(34,197,94,.12) !important; } html[data-theme=dark] [style*="color:#0A0A0A" i] { color: var(--blk) !important; } html[data-theme=dark] [style*="color:#111827" i], html[data-theme=dark] [style*="color:#111;" i] { color: var(--txt) !important; } html[data-theme=dark] [style*="color:#374151" i] { color: #CBD2DD !important; } html[data-theme=dark] [style*="color:#4B5563" i] { color: #A9B3C2 !important; } html[data-theme=dark] [style*="color:#6B7280" i] { color: var(--mut) !important; } html[data-theme=dark] [style*="color:#9CA3AF" i] { color: #808B9E !important; } html[data-theme=dark] [style*="color:#2563EB" i] { color: var(--gt) !important; } html[data-theme=dark] [style*="color:#1E40AF" i]:not(.pdp-badge) { color: #93C5FD !important; } html[data-theme=dark] [style*="color:#166534" i]:not(.pdp-badge) { color: #86EFAC !important; } html[data-theme=dark] [style*="color:#92400E" i]:not(.pdp-badge) { color: #FCD34D !important; } html[data-theme=dark] [style*="color:#EF4444" i] { color: #F87171 !important; } html[data-theme=dark] [style*="#E5E7EB" i]:not([style*="background:#E5E7EB" i]) { border-color: var(--brd) !important; } html[data-theme=dark] [style*="solid #F3F4F6" i] { border-color: #1E2639 !important; } html[data-theme=dark] [style*="solid #BBF7D0" i] { border-color: rgba(74,222,128,.3) !important; } /* .pdp-badge sits on top of the (light) product photo, so it keeps its pastel colours */ /* elements JS touches (display / transform), addressed by id so they never depend on the attribute text */ html[data-theme=dark] #cart-drawer { background: var(--surf) !important; box-shadow: -8px 0 40px rgba(0,0,0,.5) !important; } html[data-theme=dark] #cart-drawer h2 { color: var(--blk) !important; } html[data-theme=dark] #auth-modal > div { background: var(--surf) !important; box-shadow: 0 24px 80px rgba(0,0,0,.6) !important; } html[data-theme=dark] #user-menu { background: var(--surf) !important; border-color: var(--brd) !important; } html[data-theme=dark] #user-menu hr { border-top-color: #1E2639 !important; } /* ---- small corrections to the generated rules ---- */ html[data-theme=dark] .f-fab { background: var(--g); color: #fff; } html[data-theme=dark] .f-fab .f-badge { background: #fff; color: var(--g); } html[data-theme=dark] footer { border-top: 1px solid var(--brd); } html[data-theme=dark] .topbar { border-bottom: 1px solid rgba(255,255,255,.04); } html[data-theme=dark] .pcard:hover { box-shadow: 0 8px 28px rgba(0,0,0,.45); } html[data-theme=dark] .pkg:hover { box-shadow: 0 10px 30px rgba(0,0,0,.45); } html[data-theme=dark] .cat-tile:hover { box-shadow: 0 4px 16px rgba(0,0,0,.4); } html[data-theme=dark] header { box-shadow: 0 1px 16px rgba(0,0,0,.45); } /* product photos: white studio shots would glow on a dark page - a faint dark veil tones them down. (A CSS filter on the would turn the photo into its own layer and paint it OVER the badge - that was a bug. The veil is a ::before layer that comes first in the box, so badges, hearts and links stay in front of it.) */ html[data-theme=dark] .pcard-img::before, html[data-theme=dark] .pdp-media::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.07); pointer-events: none; } html[data-theme=dark] .pdp-rel-img img { filter: brightness(.93); } /* ---- the theme toggle itself (the button is created by shared.js) ---- */ .theme-tg svg { transition: transform .35s; } .theme-tg:active svg { transform: rotate(25deg) scale(.9); } html[data-theme=dark] .mnav-theme { border-color: var(--brd); } /* brand logo tiles: the logos are drawn in their own brand colours (several are dark blue), so the tiles stay light */ html[data-theme=dark] .bcard { background: #E9EDF5; border-color: #E9EDF5; } html[data-theme=dark] .bcard:hover { background: #fff; border-color: var(--g); } html[data-theme=dark] .bcard-name { color: #4B5563; } /* inline style="color:var(--g)" (blue links inside product cards) must use the lighter blue on dark */ html[data-theme=dark] [style*="color:var(--g)" i] { color: var(--gt) !important; } /* a little more contrast for the small grey texts on the near-black bars (same texts as in the light theme, just a bit brighter) */ html[data-theme=dark] .topbar > .tb-l > span, html[data-theme=dark] .topbar .tb-l span { color: rgba(255,255,255,.58) !important; } html[data-theme=dark] .stat-l { color: rgba(255,255,255,.58); } html[data-theme=dark] .ft-desc { color: rgba(255,255,255,.58); } html[data-theme=dark] .ft-col h5 { color: rgba(255,255,255,.5); } html[data-theme=dark] .ft-bottom { color: rgba(255,255,255,.5); } html[data-theme=dark] .ft-col a, html[data-theme=dark] .ft-contact a { color: rgba(255,255,255,.62); } html[data-theme=dark] .ft-col a:hover, html[data-theme=dark] .ft-contact a:hover { color: #fff; } html[data-theme=dark] .bc-sep { color: var(--mut); } /* ---- product page card (generate.py PDP_CSS): extra colour variables get dark values ---- */ html[data-theme=dark] .pdp{--lp-soft:var(--surf2);--lp-line2:#3A4560;--lp-blue-bg:var(--gl);--lp-blue-bd:var(--gll);--lp-blue-tx:#93C5FD;--lp-ok-bg:rgba(34,197,94,.12);--lp-ok-bd:rgba(34,197,94,.3);--lp-ok-tx:#86EFAC;--lp-price:#60A5FA;--lp-tx2:#CBD2DD;--lp-ph:#7F8A9E} html[data-theme=dark] .pdp-pill.ok svg{stroke:#86EFAC} /* wishlist drawer */ html[data-theme=dark] .lpd{background:var(--surf);box-shadow:-8px 0 40px rgba(0,0,0,.5)} html[data-theme=dark] .lpd-hd,html[data-theme=dark] .lpd-row,html[data-theme=dark] .lpd-ft{border-color:var(--brd)} html[data-theme=dark] .lpd-hd h2,html[data-theme=dark] .lpd-name{color:var(--blk)} html[data-theme=dark] .lpd-close{background:var(--surf2);color:var(--mut)} html[data-theme=dark] .lpd-empty{color:var(--mut)} html[data-theme=dark] .lpd-empty strong{color:var(--txt)} /* contact / order form */ html[data-theme=dark] .lp-order{background:rgba(37,99,235,.12);border-color:rgba(96,165,250,.35)} html[data-theme=dark] .lp-order h3{color:#93C5FD} html[data-theme=dark] .lp-order li{color:var(--txt);border-color:rgba(96,165,250,.25)} html[data-theme=dark] .lp-order .lp-tot{color:#60A5FA} html[data-theme=dark] .lp-order .lp-ship-note{color:var(--mut)} html[data-theme=dark] .lp-choice label{border-color:var(--brd);color:var(--txt)} html[data-theme=dark] .lp-form-msg.err{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#FCA5A5} html[data-theme=dark] .lp-form-msg.err a{color:#93C5FD} html[data-theme=dark] .lp-note{color:var(--mut)} html[data-theme=dark] .lp-done p{color:var(--txt)} html[data-theme=dark] .lp-done h2{color:var(--blk)}