@charset "UTF-8";
/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
.product-variants {
    display: flex;
	gap: 30px; /* Ajusta el espaciado entre los elementos */
}
.jsproduct-variants {
    display: flex;
	gap:30px; /* Ajusta el espaciado entre los elementos */
}

@media (max-width: 768px) {
    .product-variants {
        flex-direction: column; /* Cambia a columna en pantallas mÃ¡s pequeÃ±as */
		   gap: 0px; /* Mantiene el espaciado tambiÃ©n en columnas */
    }
}
@media (max-width: 768px) {
    .jsproduct-variants {
        flex-direction: column; /* Cambia a columna en pantallas mÃ¡s pequeÃ±as */
		   gap: 0px; /* Mantiene el espaciado tambiÃ©n en columnas */
    }
}
/* SUBMENÚ EN VARIAS COLUMNAS (hasta 4) + RESPONSIVE */
.top-menu .sub-menu {
  /* Máx. 4 columnas, con ancho ideal por columna.
     El navegador reducirá automáticamente a 3/2/1 según el espacio. */
  columns: 4 220px;           /* = column-count:4 + column-width:220px */
  column-gap: 2rem;

  /* Ancho adaptable al viewport */
  inline-size: min(95vw, 900px); /* evita desbordes en pantallas pequeñas */

  padding: 1rem;
  background: #fff;
  border-radius: 6px;
}

/* Que cada item se mantenga íntegro en su columna */
.top-menu .sub-menu li {
  list-style: none;
  break-inside: avoid;
  -webkit-column-break-inside: avoid; /* Safari */
}

/* Enlaces: saltos de línea limpios para nombres largos */
.top-menu .sub-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: #333;

  /* 🔑 Permite que “la palabra que no quepa” baje a la línea siguiente */
  white-space: normal;
  overflow-wrap: anywhere;   /* preferible */
  word-break: break-word;    /* fallback */
  hyphens: auto;             /* guiones automáticos si <html lang="es"> */

  line-height: 1.25;
  border-radius: 4px;
  transition: background 0.2s;
}
.top-menu .sub-menu a:hover { background: #f5f5f5; }

/* Ajustes finos por si quieres forzar escalones */
@media (max-width: 992px) {
  .top-menu .sub-menu { columns: 3 200px; column-gap: 1.5rem; }
}
@media (max-width: 768px) {
  .top-menu .sub-menu { columns: 2 180px; column-gap: 1.25rem; }
}
@media (max-width: 576px) {
  .top-menu .sub-menu { column-count: 1; } /* columna única en móvil */
  .top-menu .sub-menu a { padding: 0.75rem 1rem; font-size: 1rem; }
}