/* Dark mode of the public site: hand-made touches on top of the generated dark-theme.css.
   Text is white-ish, greens that carry text or icons are a bright green (the brand green is too dark to read on dark). */
:root[data-theme="dark"] {
    --ink: #f1f6f2;
    --ink-2: #d3dfd6;
    --accent-ink: #8de56e;
    --green-bright: #7be05a;
    --pc-green: #7be05a;
}
/* product cards: the grey lines (car, warranty, delivery) and the price read clearly */
:root[data-theme="dark"] .pc-car span,
:root[data-theme="dark"] .pc-info span { color: #e4ece6; }
:root[data-theme="dark"] .pc-car i,
:root[data-theme="dark"] .pc-pnc > i { color: #cdd9d0; }
:root[data-theme="dark"] .pc-info i,
:root[data-theme="dark"] .pc-info .pc-truck,
:root[data-theme="dark"] .pc-price b,
:root[data-theme="dark"] .pc-price b .num { color: var(--green-bright); }
:root[data-theme="dark"] .pc-info .is-low,
:root[data-theme="dark"] .pc-info .is-low i,
:root[data-theme="dark"] .pc-info .is-out,
:root[data-theme="dark"] .pc-info .is-out i { color: #ff8a7e; }

/* the About page keeps its colours in variables: white-ish ink and a soft panel in dark */
:root[data-theme="dark"] .ab3 { --ab3-ink: var(--ink); --ab3-mute: var(--ink-2); --ab3-soft: var(--surface-2); --ab3-gold: #e0b45e; }
:root[data-theme="dark"] .ab3-btn.is-light { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .ab3-btn.is-outline:hover { color: #0d1510; }
/* links, "Notify me" and other green text: bright */
:root[data-theme="dark"] a.am-link,
:root[data-theme="dark"] .am-legal a,
:root[data-theme="dark"] .ck-bar a,
:root[data-theme="dark"] .pc-btn.is-ghost { color: var(--green-bright); }
:root[data-theme="dark"] .pc-btn.is-ghost { background: transparent; border-color: var(--green-bright); }
:root[data-theme="dark"] .hsec-h h2,
:root[data-theme="dark"] .hsec-h h2 em { color: var(--green-bright); }
:root[data-theme="dark"] .hsec .sub,
:root[data-theme="dark"] .hsec-h .sub { color: var(--ink-2); }
:root[data-theme="dark"] #suggested .hsec-h h2,
:root[data-theme="dark"] #featured .hsec-h h2,
:root[data-theme="dark"] #limited .hsec-h h2,
:root[data-theme="dark"] .hsec-h h2 { color: var(--green-bright); }
/* pay-later and card logos are drawn for a white background */
:root[data-theme="dark"] .pc-bnpl img { padding: 2px 5px; border-radius: 5px; background: #fff; }

/* Pictures. Most product / category photos are JPGs with a white backdrop baked in: on a dark box that backdrop shows as a
   white square, and "multiply" on a dark box turns the photo black. So in dark mode every photo box keeps one soft light
   plate (the same in every section) and the photo is multiplied into it: no white square, no dark veil, no grey dimming. */
:root[data-theme="dark"] { --img-plate: #eef2ee; --img-plate-on: #dcefd6; }
:root[data-theme="dark"] .trio-pic,
:root[data-theme="dark"] .trio-tile .trio-pic,
:root[data-theme="dark"] .trio-tile.t1 .trio-pic,
:root[data-theme="dark"] .trio-tile.t2 .trio-pic,
:root[data-theme="dark"] .trio-tile.t3 .trio-pic,
:root[data-theme="dark"] .trio-tile.t4 .trio-pic,
:root[data-theme="dark"] .trio-deal-pic,
:root[data-theme="dark"] .sv-pic:not(.is-own),
:root[data-theme="dark"] .ccat-ic,
:root[data-theme="dark"] .ccats .ccat-ic,
:root[data-theme="dark"] .ab3-cats a span,
:root[data-theme="dark"] .cat-ic:not(.all),
:root[data-theme="dark"] .ct-ic.ct-photo,
:root[data-theme="dark"] .pimg,
:root[data-theme="dark"] .pcard-n .pimg,
:root[data-theme="dark"] .pcard-c .pimg,
:root[data-theme="dark"] .cp-img,
:root[data-theme="dark"] .cart-img,
:root[data-theme="dark"] .ss-img,
:root[data-theme="dark"] .co-img,
:root[data-theme="dark"] .ord-img,
:root[data-theme="dark"] .wc-img,
:root[data-theme="dark"] .qv-stage {
    background: var(--img-plate);
}
:root[data-theme="dark"] .ccats .ccat[aria-current="page"] .ccat-ic { background: var(--img-plate-on); }
:root[data-theme="dark"] .trio-pic img,
:root[data-theme="dark"] .trio-deal-pic img,
:root[data-theme="dark"] .sv-pic:not(.is-own) img,
:root[data-theme="dark"] .ccat-ic img,
:root[data-theme="dark"] .ccats .ccat-ic img,
:root[data-theme="dark"] .ab3-cats a span img,
:root[data-theme="dark"] .cat-ic img,
:root[data-theme="dark"] .ct-ic.ct-photo img,
:root[data-theme="dark"] .pimg img,
:root[data-theme="dark"] .pimg .pimg-slide,
:root[data-theme="dark"] .pcard-n .pimg .pimg-slide,
:root[data-theme="dark"] .cp-img img,
:root[data-theme="dark"] .cart-img img,
:root[data-theme="dark"] .ss-img img,
:root[data-theme="dark"] .co-img img,
:root[data-theme="dark"] .ord-img img,
:root[data-theme="dark"] .wc-img img,
:root[data-theme="dark"] .qv-stage img {
    background: transparent;
    mix-blend-mode: multiply;
}
/* the text banners keep their light-mode colours too, so their picture melts in the same way */
:root[data-theme="dark"] .trio-banner.is-text.is-warm { background: linear-gradient(135deg, #fff1df, #fcd9b0); }
:root[data-theme="dark"] .trio-banner.is-text.is-cool { background: linear-gradient(135deg, #e3f0fb, #c9dff3); }
:root[data-theme="dark"] .trio-banner.is-text b { color: #13241b; }
:root[data-theme="dark"] .trio-banner.is-text small { color: #3d4a42; }
:root[data-theme="dark"] .trio-banner.is-text img { mix-blend-mode: multiply; }
/* logos never get a box behind them */
:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] .blogo,
:root[data-theme="dark"] .tc-l img,
:root[data-theme="dark"] .pc-logo,
:root[data-theme="dark"] .mycar-logo,
:root[data-theme="dark"] .pd3-seller-logo,
:root[data-theme="dark"] .maker-logo,
:root[data-theme="dark"] .gf-logo,
:root[data-theme="dark"] .ft-about img,
:root[data-theme="dark"] .sf-about img {
    background: transparent;
}
/* Bootstrap's .text-success (used on section titles) is a green that is too dark for the dark page */
:root[data-theme="dark"] .text-success { color: var(--green-bright) !important; }

:root[data-theme="dark"] .ab3-hist { background: var(--surface-2); }
:root[data-theme="dark"] .ab3-hist-item, :root[data-theme="dark"] .ab3-hist-content, :root[data-theme="dark"] .ab3-hist-line button.is-on { background: var(--surface); }
:root[data-theme="dark"] .ab3-hist-head h2, :root[data-theme="dark"] .ab3-hist-content h3, :root[data-theme="dark"] .ab3-hist-line button { color: var(--ink); }
:root[data-theme="dark"] .ab3-hist-line button.is-on { color: var(--accent); }
:root[data-theme="dark"] .ab3-hist-line button::before { background: var(--ink); }
:root[data-theme="dark"] .ab3-hist-line button.is-on::before { background: var(--accent); }
:root[data-theme="dark"] .ab3-hist-tag { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .property-arrow { color: var(--ink); }
:root[data-theme="dark"] .property-slide .property-arrow { background: transparent; }
:root[data-theme="dark"] .property-img::after { background: rgba(0,0,0,.35); }
:root[data-theme="dark"] .mzaCarousel-dot { background: rgba(255,255,255,.25); }
:root[data-theme="dark"] .mzaCarousel-progress { background: rgba(255,255,255,.1); }

:root[data-theme="dark"] .hero-slim .hero-in::before { background: #12251a; }
:root[data-theme="dark"] .hero-slim .finder { background: var(--surface); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .hero-slim .field > span { color: var(--ink); }
:root[data-theme="dark"] .finder-head h2 { color: var(--ink); }
:root[data-theme="dark"] .finder-head p { color: var(--ink-2); }
:root[data-theme="dark"] .hero-slim .bdd-btn { background: var(--bg); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .hero-slim .bdd-btn:disabled { background: transparent; color: var(--ink-2); }

:root[data-theme="dark"] .tx .form-switch .form-check-input:not(:checked),
:root[data-theme="dark"] .tx .form-check-input[role="switch"]:not(:checked) { background: #3b4a40 !important; }