.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 site-wide tap-target floor -- `button, .btn, a.button, input, select,
   textarea { min-height: 44px }` in base.css / responsive.css, both of which
   ship in every page's head -- 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. */
.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));
}