/**
 * Snippet 01 — Sistema de Tabs

 *
 * PROPÓSITO:
 * Controla la visibilidad y el estilo de los tabs de producto.
 * Los tabs permiten al usuario navegar entre categorías de producto.
 *
 * DEPENDENCIAS: 00-variables.css
 * AFECTA: .tab-content, .tab-link, .product-tabs
 * HOOKS JS: La clase .active es añadida/removida por JavaScript del tema.
 *           No modificar sin coordinar con functions.php o el JS correspondiente.
 */

/* Estado base — oculto por defecto */
.tab-content {
  display: none;
  padding: var(--spacing-md);
  background: var(--asset-bg-pattern);
  background-blend-mode: multiply;
  background-size: cover;
  border-radius: var(--radius-sm);
}

/* Estado activo — activado por JS al hacer click en tab */
.tab-content.active {
  display: block;
}

/* Tags de producto dentro del tab-link */
span.product_tags,
span.discount-percentage {
  position: absolute;
  font-size: 11px;
  top: 6px;
  border: 1px solid var(--color-white);
  right: 6px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-weight: 400;
}

span.discount-percentage {
  background: var(--color-tag-sale-red);
  left: auto;
  right: -5px;
}