/* ============================================
   A&B WATCHES — SISTEMA DE DISEÑO COMPARTIDO
   ============================================
   Este archivo centraliza los colores, tipografía y reglas base
   que usa toda la web. Cambiar un valor aquí lo actualiza en
   todas las páginas que lo enlacen.

   Los estilos propios de cada página (el hero de la home, el
   manifiesto de The Vault, etc.) siguen viviendo en el <style>
   de cada página y tienen prioridad sobre este archivo, así que
   añadir este enlace es seguro: no rompe nada de lo que ya existe.
   ============================================ */

:root {
  /* Colores base */
  --ab-bg: #0a0907;
  --ab-card: #0d0c0a;
  --ab-vault-bg: #060504;
  --ab-vault-bg-alt: #040403;

  /* Texto */
  --ab-text: #f0ede8;
  --ab-text-soft: rgba(240, 237, 232, 0.55);
  --ab-text-softer: rgba(240, 237, 232, 0.35);

  /* Dorado de marca */
  --ab-gold: #8b6f4e;
  --ab-gold-light: #c4a882;

  /* Única sección clara (newsletter) */
  --ab-light-bg: #f0ede8;
  --ab-light-text: #1a1510;

  /* Línea divisoria sutil */
  --ab-line: rgba(255, 255, 255, 0.08);

  /* Contenedor estándar */
  --ab-max-width: 1200px;
}

/* ============================================
   BASE
   ============================================ */
html, body {
  background: var(--ab-bg);
  color: var(--ab-text);
}

/* ============================================
   TIPOGRAFÍA — reglas mínimas para evitar pixelado
   ============================================
   Cualquier etiqueta en mayúsculas con letter-spacing amplio
   (categorías, eyebrows, botones) debe usar como mínimo estos
   valores. Por debajo de 10px el texto se ve pixelado. */
.ab-label,
.ab-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

.ab-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}

.ab-btn-primary {
  background: var(--ab-text);
  color: var(--ab-bg);
  padding: 15px 32px;
  border: none;
}
.ab-btn-primary:hover {
  background: var(--ab-gold-light);
  color: var(--ab-bg);
}

.ab-btn-outline {
  background: none;
  border: 1px solid rgba(196, 168, 130, 0.3);
  color: var(--ab-gold-light);
  padding: 13px 34px;
}
.ab-btn-outline:hover {
  background: rgba(196, 168, 130, 0.06);
}

/* ============================================
   CONTENEDOR — ancho máximo estándar de la marca
   ============================================ */
.ab-container {
  max-width: var(--ab-max-width);
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 900px) {
  .ab-container { padding: 0 24px; }
}
@media (max-width: 480px) {
  .ab-container { padding: 0 16px; }
}

/* ============================================
   GRID DE PRODUCTOS — 3 columnas siempre, también en móvil
   ============================================ */
.ab-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ab-line);
  max-width: var(--ab-max-width);
  margin: 0 auto;
}