/* ==========================================================================
   Commerce pages (shop, product, cart, checkout): the product image.

   Each plan has two tiles (inc/class-content-publish.php imports them, and
   inc/class-commerce.php prints both): one on a light surface for the dark
   theme, one on a dark surface for the light theme, so the tile always
   contrasts with the page (operator, 2026-10-06). The switch follows the
   same rules as tokens.css: data-theme on <html> wins, then the OS.
   Loaded where CachingOut_Assets::is_commerce() is true.
   ========================================================================== */

.co-product-image {
  display: block;
  overflow: hidden;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.co-product-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* The single product's summary text takes the theme's colours in both
   themes (WooCommerce's own grey is unreadable on the dark surface). */

.woocommerce div.product p.price,
.woocommerce div.product .product_meta {
  color: var(--text-primary);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-secondary);
}

/* WooCommerce keeps the gallery at opacity 0 until its own script has run,
   and Caching Out's Delay JS holds that script until the visitor interacts;
   one tile needs no gallery script, so it is shown at once. */

.woocommerce-product-gallery {
  opacity: 1 !important;
}

/* The switch. !important because WooCommerce's gallery rules
   (.woocommerce div.product div.images img) outrank a class selector. */

/* Light theme (default): the dark-surface tile. */

.co-product-image__for-dark {
  display: none !important;
}

/* Dark theme by the toggle: the light-surface tile. */

:root[data-theme="dark"] .co-product-image__for-light {
  display: none !important;
}

:root[data-theme="dark"] .co-product-image__for-dark {
  display: block !important;
}

/* Dark theme by the OS, unless the toggle says light. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .co-product-image__for-light {
    display: none !important;
  }
  :root:not([data-theme="light"]) .co-product-image__for-dark {
    display: block !important;
  }
}