/* _global.css
   Estilos globales y reset básico.
*/
body {
    margin: 0;
    /* Cambiado de un color fijo a una variable de la paleta de Boston */
    background-color: var(--color-fondo-alternativo); /* Usamos el beige para un fondo suave */
}

#page {
    /* Cambiado de una variable específica 'oggi-blanco' a 'boston-blanco' */
    background-color: var(--boston-blanco);
}

a:focus, button:focus, input:focus, textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Barra de navegación principal */
/* Aquí había una repetición con la sección de "Fondo barra de navegación principal" más abajo.
   Mantendremos solo la última y la adaptaremos con los colores de Boston. */

/*/Emojis en el menú footer de mobile/*/
@media (max-width: 768px) {
  .storefront-handheld-footer-bar ul.columns-3 li:nth-child(1) a::before {
    content: "👤" !important; /* Usuario */
    font-family: unset !important;
  }

  .storefront-handheld-footer-bar ul.columns-3 li:nth-child(2) a::before {
    content: "🔍" !important; /* Búsqueda */
    font-family: unset !important;
  }

  .storefront-handheld-footer-bar ul.columns-3 li:nth-child(3) a::before {
    content: "🛒" !important; /* Carrito */
    font-family: unset !important;
  }
}

/* Fondo barra de navegación principal */
/* Se unificaron las dos reglas de `header#masthead .storefront-primary-navigation` */
header#masthead .storefront-primary-navigation {
  /* Cambiado de 'oggi-azul-marino' a 'boston-gris-carbon' o 'boston-marron-oscuro' para el café */
  background-color: var(--boston-gris-carbon) !important; /* Un color oscuro para la navegación principal */
}

/* Fondo y texto de submenús y menú principal */
header#masthead .storefront-primary-navigation ul.menu,
header#masthead .storefront-primary-navigation ul.menu ul.sub-menu {
  /* Cambiado de 'oggi-azul-marino' a 'boston-gris-carbon' o 'boston-marron-oscuro' */
  background-color: var(--boston-gris-carbon) !important;
}

/* Texto blanco y bold en todos los links */
header#masthead .storefront-primary-navigation ul.menu > li > a,
header#masthead .storefront-primary-navigation ul.menu ul.sub-menu li a {
  /* Cambiado de 'oggi-blanco' a 'boston-blanco' */
  color: var(--boston-blanco) !important;
  font-weight: bold;
}

/* Hover verde, fondo sigue azul */
header#masthead .storefront-primary-navigation ul.menu > li > a:hover,
header#masthead .storefront-primary-navigation ul.menu ul.sub-menu li a:hover {
  /* Cambiado de 'oggi-verde' a 'boston-ocre' (o 'boston-rojo') para el hover */
  color: var(--boston-ocre) !important; /* Ocre para un toque cálido al hacer hover */
  /* El fondo sigue siendo el color de la navegación principal */
  background-color: var(--boston-gris-carbon) !important;
  text-decoration: none;
}