/*
 * Archivo principal de estilos del tema hijo Warehouse.
 * Importa primero los estilos del tema padre y luego aplica sobreescrituras.
 */

@import url("/themes/warehouse/assets/css/theme.css");

:root {
  /* Variables de ejemplo para reutilizar colores personalizados */
  --warehouse-child-accent: #1f4d7a;
  --warehouse-child-accent-light: #e8f1fa;
}

/* Banner superior personalizado */
#wc-top-banner {
  position: relative;
  display: none;
  width: 100%;
  overflow: hidden;
  background: var(--warehouse-child-accent);
  color: #ffffff;
  font-size: 0.875rem;
  z-index: 20;
}

#wc-top-banner.wc-top-banner--visible {
  display: block;
}

#wc-top-banner .wc-top-banner__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
}

#wc-top-banner .wc-top-banner__messages {
  flex: 1 1 auto;
  display: flex;
  gap: 2rem;
  white-space: nowrap;
}

#wc-top-banner .wc-top-banner__message {
  animation: wc-top-banner-scroll 18s linear infinite;
}

#wc-top-banner .wc-top-banner__close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
}

@keyframes wc-top-banner-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Ejemplo inicial para checkout; ajusta o reemplaza según tus necesidades */
body#checkout #content .checkout-step {
  background-color: inherit;
}