/* Live catalogue styles.
 *
 * app.css is shared with the static design build and is never edited, so the few
 * rules the WooCommerce templates need live here. Loaded only on WooCommerce and
 * search views (see inc/enqueue.php).
 */

/* Filter option rows are anchors here, not buttons, so the current division has
   to be marked explicitly. */
.overflow-hidden {
  overflow: hidden;
}

.fopt[aria-current="true"] {
  color: var(--teal);
  font-weight: 700;
}

.fopt[aria-current="true"] .cnt {
  color: var(--teal);
}

/* Product links inside a card title keep the card title colour on hover. */
.pcard-title a {
  color: inherit;
  text-decoration: none;
}

.pcard-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Single product: additional gallery images. */
.sg-gallery-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-top: 1px solid var(--line);
}

.sg-gallery-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-control);
}

/* The hero image panel needs the card radius honoured on the top corners only. */
.sg-product-hero {
  aspect-ratio: 4 / 3;
  background: var(--surface-container-low);
  overflow: hidden;
}

.sg-product-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* No photograph: a quiet placeholder rather than an empty grey box. */
.sg-product-empty {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  text-align: center;
}

.sg-product-empty .fallback-svg {
  display: grid;
  place-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.sg-product-empty svg {
  width: 100%;
  max-width: 160px;
  height: auto;
  color: var(--outline);
}

/* Admin report thumbnail. */
.sg-table img {
  max-width: 44px;
  height: auto;
  display: block;
  border-radius: 4px;
}