/* =====================================================================
   HB CENTER · estilos propios del tema (se cargan desde layout.tpl)
   ===================================================================== */

/* Acceso a la cuenta en el header: recuadro redondeado con borde rojo fino */
.hb-account-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid #e3000f;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s, box-shadow .2s;
}
.hb-account-box:hover {
  background: #fdeceb;
  box-shadow: 0 4px 12px rgba(227, 0, 15, .15);
}
.hb-account-box .hb-account-icon {
  width: 18px;
  height: 18px;
  fill: #e3000f !important;
}
.hb-account-box .hb-account-link {
  color: #1c1c1f !important;
  text-decoration: none !important;
  transition: color .2s;
}
.hb-account-box .hb-account-link:hover { color: #e3000f !important; }
.hb-account-box .hb-account-sep { color: #9a9aa3; font-weight: 400; }

/* En pantallas medianas el header es angosto: se oculta el ícono para que entre en una línea */
@media (min-width: 768px) and (max-width: 1199px) {
  .hb-account-box { padding: 7px 10px; gap: 4px; font-size: 12px; }
  .hb-account-box .hb-account-icon { display: none; }
  .utilities-container.mr-4:has(.hb-account-box) { margin-right: 10px !important; }
  /* el buscador cede un poco de ancho para que el recuadro y el carrito entren en la misma fila */
  .head-logo-row .col-md-6.col-utility { flex: 0 0 44%; max-width: 44%; }
}

/* Menú principal: los ítems ocupan todo el ancho de la barra roja,
   con la misma distancia entre ellos y contra los bordes */
.js-nav-desktop-list.nav-desktop-list {
  display: flex !important;
  justify-content: space-evenly !important;
  align-items: center;
  width: 100%;
}
.js-nav-desktop-list > .nav-item {
  flex: 0 0 auto;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.js-nav-desktop-list > .nav-desktop-list-arrow { display: none !important; }

/* En laptops chicas la letra baja un poco para que entren todos en una línea */
@media (min-width: 768px) and (max-width: 1199px) {
  .menu-and-banners-row .js-nav-desktop-list > .nav-item > a {
    font-size: 11px !important;
    letter-spacing: .02em !important;
  }
}

/* =========================================================
   Cajas blancas en lugar del color secundario rojo
   (carrito, modal de medios de pago, chips, selects)
   ========================================================= */
:root { --secondary-color: #ffffff !important; }

/* Carrito */
.cart-item {
  background: #fff !important;
  color: #1c1c1f !important;
  border: 1px solid #e4e4e8 !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  padding-right: 12px !important;
}
.cart-item .cart-item-name,
.cart-item .cart-item-name a { color: #1c1c1f !important; font-weight: 500; }
.cart-item .cart-item-image {
  border: 1px solid #eeeef1;
  border-radius: 8px;
  background: #fff;
}
.cart-item .cart-item-delete svg { fill: #8a8a92 !important; }
.cart-item .cart-item-delete:hover svg { fill: #e3000f !important; }
.cart-item .cart-item-spinner {
  border: 1px solid #d6d6dc !important;
  border-radius: 999px !important;
  background: #fff !important;
  overflow: hidden;
}
.cart-item .cart-item-spinner input {
  border: 0 !important;
  color: #1c1c1f !important;
  background: transparent !important;
}
.cart-item .form-quantity-icon svg { fill: #1c1c1f !important; }
.cart-item .js-cart-item-subtotal { color: #1c1c1f !important; }

/* Modal de medios de pago */
#installments-modal .modal-header {
  background: #fff !important;
  color: #1c1c1f !important;
  border-bottom: 1px solid #e4e4e8;
}
#installments-modal .modal-header svg { fill: #1c1c1f !important; }
#installments-modal .modal-body { background: #f5f5f7 !important; }
#installments-modal .h6 {
  color: #1c1c1f !important;
  font-size: 15px !important;
  margin-top: 8px;
}
#installments-modal .card {
  background: #fff !important;
  color: #1c1c1f !important;
  border: 1px solid #e4e4e8 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
#installments-modal .card * { color: inherit; }
#installments-modal .card .text-accent { color: #0a8a4a !important; }
#installments-modal .card img {
  border: 1px solid #e4e4e8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#installments-modal .modal-footer {
  background: #fff !important;
  border-top: 1px solid #e4e4e8;
}
#installments-modal .modal-footer .btn-link { color: #e3000f !important; }

/* Título de páginas como Carrito o Contacto: ahora el fondo es blanco, texto oscuro */
body .background-secondary.mb-4 .page-header h1 { color: #1c1c1f !important; font-size: 30px !important; }
body .background-secondary.mb-4 .breadcrumbs,
body .background-secondary.mb-4 .breadcrumbs a,
body .background-secondary.mb-4 .breadcrumbs .crumb,
body .background-secondary.mb-4 .breadcrumbs .separator { color: #6b6b73 !important; }