.cg-icon { width: var(--cg-icon); height: var(--cg-icon); flex: none; }
.cg-icon { object-fit: contain; }
svg.cg-icon { fill: none; stroke: currentColor; stroke-width: var(--cg-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.cg-icon--small { width: var(--cg-icon-small); height: var(--cg-icon-small); }
.cg-icon--large { width: var(--cg-icon-large); height: var(--cg-icon-large); }
/* PNG originales transparentes. Conserva la caja y el área táctil existentes.
 * La escala compensa márgenes transparentes del asset, sin cambiar su proporción. */
.cg-icon--image { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; background: transparent; }
.cg-icon--image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; background: transparent; border: 0; box-shadow: none; transform: scale(var(--cg-icon-asset-scale)) translateY(var(--cg-icon-asset-offset)); }
.cg-icon--cart { --cg-icon-asset-scale: 1.5; --cg-icon-asset-offset: -2.25%; }
.cg-icon--glasses { --cg-icon-asset-scale: 1.1; --cg-icon-asset-offset: -.4%; }

/* Tint only built-in transparent assets, never uploaded photographs. */
.cg-icon--tinted img { visibility: hidden; }
.cg-icon--tinted::after { content: ""; position: absolute; inset: 0; background: currentColor; mask: var(--cg-icon-mask) center / contain no-repeat; transform: scale(var(--cg-icon-asset-scale)) translateY(var(--cg-icon-asset-offset)); }

.cg-button {
  --cg-button-bg: var(--cg-pink);
  --cg-button-fg: var(--cg-white);
  --cg-button-border: var(--cg-forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cg-space-2);
  min-width: var(--cg-target);
  min-height: var(--cg-target);
  padding: var(--cg-space-3) var(--cg-space-5);
  border: var(--cg-border) solid var(--cg-button-border);
  border-radius: var(--cg-radius-pill);
  background: var(--cg-button-bg);
  color: var(--cg-button-fg);
  box-shadow: var(--cg-shadow-solid);
  font: var(--cg-weight-section) var(--cg-text-body)/var(--cg-line-heading) var(--cg-font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--cg-transition), box-shadow var(--cg-transition);
}
.cg-button--secondary { --cg-button-bg: var(--cg-cream); --cg-button-fg: var(--cg-pink); --cg-button-border: var(--cg-pink); }
.cg-button--tertiary { --cg-button-bg: transparent; --cg-button-fg: var(--cg-forest); --cg-button-border: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: var(--cg-space-1); }
.cg-button--icon { --cg-button-bg: var(--cg-cream); --cg-button-fg: var(--cg-pink); --cg-button-border: var(--cg-pink); padding: var(--cg-space-2); border-radius: var(--cg-radius-pill); }
.cg-button--try { --cg-button-bg: var(--cg-cream); --cg-button-fg: var(--cg-pink); --cg-button-border: var(--cg-pink); border-radius: var(--cg-radius-pill); }
.cg-button:focus-visible, .cg-product-card__link:focus-visible, .cg-swatch:focus-visible { outline: var(--cg-focus-width) solid var(--cg-sea); outline-offset: var(--cg-focus-offset); }
.cg-button:active:not(:disabled), .cg-button.is-interaction:not(:disabled) { transform: translateY(var(--cg-press-offset)); box-shadow: var(--cg-shadow-pressed); }
.cg-button--tertiary:active:not(:disabled), .cg-button--tertiary.is-interaction:not(:disabled) { box-shadow: none; background: var(--cg-butter); }
@media (hover: hover) and (pointer: fine) {
  .cg-button:hover:not(:disabled) { transform: translateY(var(--cg-press-offset)); box-shadow: var(--cg-shadow-pressed); }
  .cg-button--tertiary:hover:not(:disabled) { box-shadow: none; background: var(--cg-butter); }
}
.cg-button:disabled { --cg-button-bg: var(--cg-sand); --cg-button-fg: var(--cg-forest); --cg-button-border: var(--cg-forest); box-shadow: none; cursor: not-allowed; }
.cg-field { display: grid; gap: var(--cg-space-2); font-family: var(--cg-font-body); }
.cg-field__label { font-weight: var(--cg-weight-section); }
.cg-input {
  width: 100%; min-width: 0; min-height: var(--cg-target);
  padding: var(--cg-space-3) var(--cg-space-4);
  font: inherit; color: var(--cg-forest); background: var(--cg-white);
  border: var(--cg-border) solid var(--cg-forest); border-radius: var(--cg-radius-control);
}
.cg-input:not(:placeholder-shown) { background: var(--cg-cream); }
.cg-input:focus-visible { outline: var(--cg-focus-width) solid var(--cg-sea); outline-offset: var(--cg-focus-offset); }
.cg-input[aria-invalid="true"] { border-color: var(--cg-pink); background: var(--cg-pastel-pink); }
.cg-input[aria-invalid="true"]:focus-visible { outline-color: var(--cg-pink); }
.cg-input:disabled { background: var(--cg-sand); color: var(--cg-forest); cursor: not-allowed; }
.cg-field__help, .cg-field__error { margin: 0; font-size: var(--cg-text-caption); }
.cg-field__error { color: var(--cg-pink); font-weight: var(--cg-weight-section); }
.cg-badge { display: inline-flex; align-items: center; padding: var(--cg-space-2) var(--cg-space-3); border-radius: var(--cg-radius-pill); background: var(--cg-butter); color: var(--cg-forest); font: var(--cg-weight-caption) var(--cg-text-caption)/var(--cg-line-body) var(--cg-font-body); }
.cg-badge--pink { background: var(--cg-pastel-pink); }
.cg-badge--mint { background: var(--cg-mint); }
.cg-price { font: var(--cg-weight-section) var(--cg-text-body)/var(--cg-line-body) var(--cg-font-body); color: var(--cg-forest); }
.cg-price del { font-weight: var(--cg-weight-body); }
.cg-price ins { text-decoration: none; }
.cg-swatch { display: inline-flex; align-items: center; gap: var(--cg-space-2); padding: var(--cg-space-2) var(--cg-space-3); border: var(--cg-border) solid var(--cg-forest); border-radius: var(--cg-radius-pill); font-size: var(--cg-text-caption); }
.cg-swatch__color { width: var(--cg-space-4); height: var(--cg-space-4); border: var(--cg-border) solid var(--cg-forest); border-radius: var(--cg-radius-pill); background: var(--cg-swatch-color); }
.cg-divider { border: 0; border-top: var(--cg-border) solid var(--cg-sand); margin-block: var(--cg-space-5); }
@media (prefers-reduced-motion: reduce) { .cg-button { transition: none; } }

.cg-swatch--compact { padding: 0; border: 0; }
.cg-swatch--compact .cg-swatch__color { border: 0; }

/* Acciones de la referencia: mantienen su estado funcional, también disabled. */
.cg-button--try, .cg-button--try:disabled,
.cg-whatsapp .cg-button, .cg-whatsapp .cg-button:disabled {
  --cg-button-bg: var(--cg-pink);
  --cg-button-fg: var(--cg-white);
  --cg-button-border: var(--cg-forest);
  box-shadow: none;
}
.cg-button--try .cg-icon--glasses img { filter: brightness(0) invert(1); }