/* 1. SOBREESCRITURA DE VARIABLES GLOBALES */
:root {
  --bs-primary: #faab0d !important;
  --bs-primary-rgb: 250, 171, 13 !important;
  --bs-secondary: #480900 !important;
  --bs-secondary-rgb: 72, 9, 0 !important;
  --bs-link-color: #ec1c24 !important;
  --bs-link-hover-color: #222222 !important;
}

/* 2. FORZAR LOS BOTONES PRINCIPALES (Añadir al carrito, ir a la caja, etc.) */
.btn-primary, 
button.btn-primary, 
a.btn-primary,
.page-my-account .links a:hover {
  background-color: #faab0d !important;
  border-color: #faab0d !important;
  color: #ffffff !important;
}

/* Color al pasar el ratón por encima (Efecto Hover) */
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
  background-color: #480900!important;
  border-color: #480900 !important;
  color: #ffffff !important;
}

/* 3. ELEMENTOS DE NAVEGACIÓN Y ENLACES (Menús y enlaces de texto) */
a {
  color: #faab0d;
}
a:hover {
  color: #222222;
}

/* 4. PRECIOS EN LAS FICHAS DE PRODUCTO */
.current-price .price, 
.product-price, 
.price-current {
  color: #ec1c24 !important;
}

/* 5. ICONOS CLAVE (Como el contador del carrito de compras) */
.header .cart-products-count, 
.badge-primary {
  background-color: #ec1c24 !important;
  color: #ffffff !important;
}

/* 1. MANTENER EL MENÚ Y CABECERA AL 100% */
#header, .header-nav, .header-top {
  width: 100% !important;
  max-width: 100% !important;
}

/* 2. EFECTO BOXED PARA TODO EL CUERPO (Fondo general gris o de contraste) */
body {
  background-color: #f4f4f4 !important; /* Elige el color del fondo exterior de la caja */
}

/* 3. CREAR LA CAJA ENVOLVENTE DEL CONTENIDO (Inicio, Productos, Carrito...) */
#wrapper, #main, main, #footer {
  max-width: 1200px !important;       /* El ancho máximo que tendrá tu caja corporativa */
  margin: 0 auto !important;          /* Centra la caja horizontalmente en pantallas grandes */
  background-color: #ffffff !important; /* El fondo de la caja interior (generalmente blanco) */
  box-shadow: 0 0 15px rgba(0,0,0,0.05) !important; /* Sombra sutil para dar efecto de relieve */
}

/* 4. AJUSTE DE RELLENO EN EL PIE DE PÁGINA (Para que el texto no toque los bordes de la caja) */
#footer {
  padding-left: 20px !important;
  padding-right: 20px !important;
}