/* Site-wide, page-agnostic rules — not header/nav chrome (that's the locked
   css/category-nav.css) and not any one theme's colors/fonts, so these live
   here and load on every page (index, every category, every product page). */

/* This site has no dark theme — every color is hand-picked per category
   theme against a light background. Without this, Chrome/Android's
   "auto dark theme for web contents" feature (on by default on many
   Android phones with system dark mode enabled) force-inverts any part of
   the page that hasn't painted its real background yet to black. Since a
   cross-document navigation briefly shows the incoming page before all of
   its CSS/images have loaded, that unpainted gap — usually invisible,
   since it's just the page's own light background underneath — renders as
   a black flash instead. Declaring color-scheme: light tells the browser
   this page is light-only and opts it out of that forced-dark inversion. */
:root {
  color-scheme: light;
}

/* Opts every page into the browser's native cross-document view
   transition: a same-origin navigation cross-fades the old/new page instead
   of a hard white-flash reload. Both the outgoing and incoming page need
   this rule for the transition to play, so it has to be sitewide, not
   per-theme. No-op in browsers that don't yet support it. */
@view-transition {
  navigation: auto;
}

/* The browser's default cross-fade blends the outgoing/incoming snapshots
   with mix-blend-mode: plus-lighter. Reverting to a normal blend keeps
   this a plain, predictable cross-fade instead. */
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

/* js/main.js renders the product-grid photo and title as real <a> links to
   that product's own page (see renderProducts() / initProductPage()) so
   clicking either opens it. These two resets are theme-agnostic — every
   theme's own .product-image / h3 rules already set the actual look. */
a.product-image { display: block; text-decoration: none; }

.product-title-link {
  color: inherit;
  text-decoration: none;
}
.product-title-link:hover {
  text-decoration: underline;
}

/* Optional pre-discount price (js/main.js renderProducts / sync-products.mjs
   productPageHTML) — struck through and de-emphasized next to the real
   price, on the grid card and the product's own page. Uses --ink-soft
   rather than each theme's accent color so it never competes with the
   actual price for attention. */
.price-original {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.85em;
  text-decoration: line-through;
}

@media (max-width: 600px) {
  /* The email/phone pair in the footer wraps awkwardly mid-line on a narrow
     phone screen — stack them instead, and drop the middle dot separator
     since it reads oddly once they're no longer on the same line. */
  .footer-contact {
    flex-direction: column;
    gap: 2px;
  }
  .footer-contact span[aria-hidden="true"] {
    display: none;
  }
}