/**
 * Snippet 03 — Atributos de variación y selector de cantidad

 *
 * PROPÓSITO:
 * Estilos para el selector de peso (variaciones WooCommerce)
 * y los controles de cantidad (+/-).
 *
 * DEPENDENCIAS: 00-variables.css
 * AFECTA: .attribute-group, .attribute-peso, .quantity-selector,
 *         .quantity-input, .quantity-increase, .quantity-decrease
 *
 * RESTRICCIÓN FUNCIONAL CRÍTICA:
 * Los radios de variación (.attribute-group input[type="radio"]) están
 * ocultos visualmente pero funcionalmente activos.
 * Los labels actúan como controles visuales de selección de variación.
 * NO eliminar los inputs radio — WooCommerce los requiere para
 * enviar la variación seleccionada al carrito.
 *
 * El orden CSS (order: 1..8) de los labels de peso define
 * la secuencia visual sin alterar el orden en el DOM.
 * Cambiar estos valores puede desordenar las opciones visibles.
 */

/* Grupo de atributos — estructura base */

.attribute-group input[type='radio'] {
  /* Oculto visualmente — funcionalmente necesario para WooCommerce */
  margin-right: var(--spacing-xs);
}

/* Grupo variedad */
.attribute-variedad {
  margin-top: var(--spacing-sm);
}

.variedad-label {
  color: var(--color-text-default);
  font-size: 16px;
}

/* -------------------------------------------------------
 * Selector de PESO — tarjetas estilo card (nuevo diseño)
 * ------------------------------------------------------- */

.sj-label {
  margin-block-end: 0px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  grid-column: 1 / -1;
  color: var(--color-white);
  margin: 0 0 10px 0;
  font-family: var(--font-secondary);
  text-align: left;
}

.sj-peso-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  /* quitar el display:flex del selector genérico */
}

/* Radio oculto — no eliminar, WooCommerce lo necesita */
.sj-peso-cards input[type='radio'] {
  display: none;
}

/* Card base */
.sj-peso-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 64px;
  padding: var(--spacing-sm);
  cursor: pointer;
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid var(--color-border-card);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
  user-select: none;
  /* reset herencia de .attribute-group label */
  font-size: inherit;
}

/* El contenido debe quedar por encima del pseudo-elemento */
.sj-peso-card > * {
  position: relative;
  z-index: 1;
}

/* Background sólido oscuro dentro del borde degradado */
.sj-peso-card.active {
  background: transparent;
  border-color: var(--color-primary) !important;
  box-shadow: inset 0px 1px 15px -6px var(--color-primary);
}

/* Peso (texto grande) */
.sj-peso-card__weight {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  font-family: var(--font-primary);
}

/* Precio por gramo */
.sj-peso-card__ppg {
  font-size: 14px;
  color: var(--color-white);
  font-family: var(--font-secondary);
  line-height: 1;
}

/* Badge genérico */
.sj-peso-badge {
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-family: var(--font-secondary);
  text-transform: uppercase;
  z-index: 2;
  line-height: 1.3;
}

/* Badge Recomendado — borde degradado, fondo oscuro */
.sj-peso-badge--recommended {
  color: var(--color-white);
  background-color: var(--color-secondary);
  box-shadow: inset 0px 1px 15px -6px var(--color-primary);
  border: 1px solid var(--color-primary);
  /* Trick: box-shadow como borde degradado */
}

/* Badge Mejor €/g — verde oscuro */
.sj-peso-badge--best {
  color: var(--color-white);
  background-color: var(--color-secondary);
  box-shadow: inset 0px 1px 15px -6px var(--color-primary);
  border: 1px solid var(--color-primary);
  /* Trick: box-shadow como borde degradado */
}

/* Out of stock */
.sj-peso-card.out-of-stock {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 767px) {
  .sj-peso-card {
    min-width: 68px;
    padding: 12px 12px 20px;
  }

  .sj-peso-card__weight {
    font-size: 18px;
  }

  .sj-peso-card__ppg {
    font-size: 11px;
  }
}

@media (max-width: 479px) {
  .sj-peso-card {
    min-width: 60px;
    padding: 10px 10px 18px;
  }

  .sj-peso-card__weight {
    font-size: 16px;
  }
}