.product-share {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.product-share-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-right: 4px;
}

/* The tap-target floor -- `button, .btn, a.button, input, select, textarea
   { min-height: 44px }` in responsive.css, under a coarse pointer since #5055,
   and base.css's copy for a narrow layout's buttons -- matches the copy-link
   <button> but NOT the three bare <a> share links beside it, and `min-height`
   beats `height`. So the row rendered three 32px circles and one 32x44 oval,
   and neither `height: 32px` nor `aspect-ratio: 1 / 1` below could win. An
   explicit min-height/min-width is the opt-out (a class selector out-specifies
   the floor's element selector, so this holds wherever the floor is declared).
   Explicit values rather than `min-height: 0` so the square survives if the
   floor is ever scoped away. */
/* Two selectors, not one: the <button> needed (0,1,1) to clear the `.sx
 * :where(button)` reset, and the three <a> were kept at (0,1,0) so `.sx a {
 * color: inherit }`, then (0,1,1), went on deciding their ink. The link reset
 * is `:where(.sx) a` (0,0,1) now, so they take `--text-secondary` from here as
 * the copy button beside them always did, and the row paints one ink. */
.product-share-button,
button.product-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.product-share-button:hover,
.product-share-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.product-share-button .fa-icon {
  width: 16px;
  height: 16px;
}

.product-share-button.is-copied {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-1, var(--surface));
}