/* LovelyHair — IconButton (ported from IconButton.jsx) */
.lh-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  transform: scale(1);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .lh-icon-button:hover { transform: scale(1.05); }
}

/* Shape */
.lh-icon-button--square { border-radius: var(--radius-sm); }
.lh-icon-button--circle { border-radius: var(--radius-circle); }

/* Size */
.lh-icon-button--sm { width: 30px; height: 30px; }
.lh-icon-button--md { width: 38px; height: 38px; }
.lh-icon-button--lg { width: 44px; height: 44px; }

/* Variants */
.lh-icon-button--solid { background: var(--color-action); color: #fff; }
.lh-icon-button--solid:hover { background: var(--color-action-hover); }

.lh-icon-button--amber { background: var(--color-primary); color: #fff; }
.lh-icon-button--amber:hover { background: var(--color-primary-hover); }

.lh-icon-button--glass {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-heading);
  border-color: var(--border-subtle);
  backdrop-filter: blur(4px);
}
.lh-icon-button--glass:hover { background: #fff; box-shadow: var(--shadow-sm); }

.lh-icon-button--outline {
  background: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-subtle);
}
.lh-icon-button--outline:hover { background: var(--surface-sunken); }

/* Active (e.g. liked wishlist) */
.lh-icon-button.is-active { color: var(--color-primary); }