/* Dark-mode patches for the products storefront.
   theme.css already remaps this page's own --panel/--bg/--ink/--line/--brand
   variables, so anything styled through those follows automatically. What is
   left here is the set of places products.html writes a colour literally, which
   no variable swap can reach. Same shape and ordering as restring-theme.css. */

html[data-sk-theme="products"][data-theme="dark"] body {
  background: linear-gradient(160deg, #141a1b, #182021 70%, #24312f);
  background-attachment: fixed;
}

/* Panels and floating surfaces that hardcode #fff. */
html[data-sk-theme="products"][data-theme="dark"] :where(.card, .acct-pop, .pcard) {
  background: var(--sk-surface);
}

/* Fields and tappable tiles: a shade off the card so edges stay readable. */
html[data-sk-theme="products"][data-theme="dark"] :where(input, select, textarea, .verify, .btn.ghost, button.ghost, .tile, .pic-film button) {
  background-color: var(--sk-surface-soft);
  color: var(--sk-text);
}
html[data-sk-theme="products"][data-theme="dark"] :where(input:focus, select:focus, textarea:focus) {
  background-color: var(--sk-surface);
  border-color: var(--sk-focus);
}

/* Selected / hovered states, which all resolve to the same pale mint in light. */
html[data-sk-theme="products"][data-theme="dark"] :where(.acct-pop button:hover, .btn.ghost:hover, button.ghost:hover, .verify.ok, .tile:hover, .pic-nav:hover) {
  background: var(--sk-surface-selected);
  border-color: #71ada8;
}

/* Product imagery sits on its own light plate in the light theme. */
html[data-sk-theme="products"][data-theme="dark"] :where(.pcard .pthumb, .pic-stage, .pzframe) {
  background: var(--sk-surface-soft);
}
/* Photographs are shot on white; keep their plate light so they do not float
   on a dark square with a white fringe. */
html[data-sk-theme="products"][data-theme="dark"] :where(.pcard .pthumb img, .pic-stage img, .pic-film img) {
  background: #fff;
  color-scheme: light;
}

html[data-sk-theme="products"][data-theme="dark"] .pcard .pp { color: var(--sk-text-muted); }

/* Play Assist tile, mirroring the order form's treatment. */
html[data-sk-theme="products"][data-theme="dark"] .patile {
  background: var(--sk-success-surface);
  color: var(--sk-success);
  border-color: #6aa67d;
}
html[data-sk-theme="products"][data-theme="dark"] .patile.off { background: var(--sk-surface-soft); border-color: var(--line); }
html[data-sk-theme="products"][data-theme="dark"] .patile .pa-off { background: #384643; color: var(--sk-text-muted); }
html[data-sk-theme="products"][data-theme="dark"] :is(.patile .pa-link, .patile .pa-msg.ok, .verify.ok .verify-state) { color: var(--sk-success); }

html[data-sk-theme="products"][data-theme="dark"] :where(.required-mark, .patile .pa-msg.err, .err) { color: var(--sk-danger); }

/* The badge over a product photo stays a dark scrim, but the light theme's is
   tuned for a white plate and reads muddy on a dark one. */
html[data-sk-theme="products"][data-theme="dark"] .pic-count { background: rgba(0, 0, 0, .66); }

/* NO caret override here, for the same reason as admin-theme.css: this page's
   selects are native, so the browser draws the caret and a background-image
   would tile behind it. */