/* Paleta amatelescopio. Variables CSS nativas (no Sass): el tema padre
   "classic" no distribuye sus fuentes .scss (solo el theme.css ya compilado),
   así que no hay variables Bootstrap en tiempo de compilacion con las que
   puedan chocar estos custom properties. */
:root {
  --navy-900: #070E1F;
  --navy-800: #0C1730;
  --navy-700: #132244;
  --navy-600: #1C305C;
  --gold-500: #D6A94B;
  --gold-400: #E7C374;
  --gold-100: #F6E9CC;
  --ink-100: #EDEFF5;
  --ink-300: #B7BEDB;
  --ink-500: #8891B8;
}

/* El tema padre añade #wrapper{padding-top:1.563rem} por defecto, dejando
   un hueco gris justo debajo del header. Lo quitamos aquí. */
#category #wrapper, 
#index #wrapper {
  padding-top: 0;
}

/* Layout general del sitio: contenedor mas ancho y gutters consistentes
   para header, footer y el resto de bloques que usan .container. */
.container {
  width: 100% !important;
  max-width: 1920px !important;
  margin-inline: auto !important;
  padding-inline: 3.5rem !important;
}

/* Hero banner (module ps_imageslider) - banner a pantalla completa del Home
   Todo va anclado a #carousel para ganar siempre a las reglas .carousel
   del theme padre (mismo peso de especificidad, pero con id ganamos seguro). */

#carousel.hero-banner {
  position: relative;
  left: 50%;
  right: auto;
  width: 100vw;
  margin-left: -50vw;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  background-color: #0b0f22;
  box-shadow: none;
  overflow: hidden;
}

#carousel.hero-banner .carousel-inner {
  height: auto;
  width: 100%;
}

#carousel.hero-banner .carousel-item {
  height: auto;
}

#carousel.hero-banner .hero-banner__figure {
  position: relative;
  display: block;
  width: 100%;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
}

#carousel.hero-banner .hero-banner__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
}

#carousel.hero-banner .hero-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 12, 26, 0.94) 0%,
    rgba(9, 12, 26, 0.8) 38%,
    rgba(9, 12, 26, 0.25) 68%,
    rgba(9, 12, 26, 0) 100%
  );
}

#carousel.hero-banner .hero-banner__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 2.5rem max(3.5rem, calc((100vw - 1920px) / 2 + 3.5rem));
  text-align: left;
  text-shadow: none;
}

#carousel.hero-banner .hero-banner__title {
  max-width: 560px;
  margin: 0 0 1rem;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  text-transform: none;
}

#carousel.hero-banner .hero-banner__subtitle {
  max-width: 460px;
  margin: 0 0 1.75rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.5;
}

#carousel.hero-banner .hero-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

#carousel.hero-banner .hero-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

#carousel.hero-banner .hero-banner__btn--primary {
  background-color: #5b5fe9;
  color: #fff;
  padding: 0.85rem 1.5rem;
  border-radius: 8px;
  transition: background-color 0.2s ease-in-out;
}

#carousel.hero-banner .hero-banner__btn--primary:hover,
#carousel.hero-banner .hero-banner__btn--primary:focus {
  background-color: #4548c9;
  color: #fff;
}

#carousel.hero-banner .hero-banner__btn--secondary {
  color: #fff;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

#carousel.hero-banner .hero-banner__btn--secondary:hover,
#carousel.hero-banner .hero-banner__btn--secondary:focus {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

#carousel.hero-banner .hero-banner__features {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#carousel.hero-banner .hero-banner__features li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

#carousel.hero-banner .hero-banner__features i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 20px;
}

#carousel.hero-banner .hero-banner__features span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  line-height: 1.3;
}

#carousel.hero-banner .carousel-indicators,
#carousel.hero-banner .direction {
  z-index: 3;
}

@media (max-width: 991.98px) {
  #carousel.hero-banner .hero-banner__figure {
    min-height: 480px;
  }
}

@media (max-width: 575.98px) {
  #carousel.hero-banner .hero-banner__figure {
    min-height: 420px;
  }

  #carousel.hero-banner .hero-banner__overlay {
    background: rgba(9, 12, 26, 0.82);
  }

  #carousel.hero-banner .hero-banner__title {
    max-width: 100%;
  }

  #carousel.hero-banner .hero-banner__subtitle {
    max-width: 100%;
  }

  #carousel.hero-banner .hero-banner__features {
    gap: 1.25rem;
  }
}

/* ==========================================================================
   Header + navegación (paleta navy/dorado)
   ========================================================================== */

/* Franja de confianza superior (header_topbar, nuevo bloque en header.tpl) */
.header-topbar {
  background-color: var(--navy-800);
  border-bottom: 1px solid var(--navy-700);
}

.header-topbar__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  font-size: 12px;
  color: var(--ink-500);
  overflow-x: auto;
  white-space: nowrap;
}

.header-topbar__list li {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.header-topbar__icon {
  font-size: 15px;
  color: var(--gold-400);
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .header-topbar__list {
    justify-content: flex-start;
    gap: 1.25rem;
  }
}

/* header_nav: contacto, login, idioma/moneda, carrito */
.header-nav {
  background-color: var(--navy-800);
  border-bottom: 1px solid var(--navy-700) !important;
  max-height: none !important;
}

.header-nav #contact-link a,
.header-nav .top-menu-link {
  color: var(--ink-300);
}

.header-nav #contact-link a:hover,
.header-nav .top-menu-link:hover {
  color: var(--gold-400);
}

/* Tienda de referidos, sin cuentas de cliente: se oculta el bloque
   de inicio de sesión (ps_customersignin) del header, desktop y mobile. */
#_desktop_user_info,
#_mobile_user_info {
  display: none !important;
}

.header-nav .blockcart {
  background-color: var(--navy-700);
  border: 1px solid var(--navy-600);
  border-radius: 6px;
  color: var(--ink-100);
}

.header-nav .blockcart a {
  color: var(--ink-100);
}

.header-nav .blockcart .cart-products-count {
  color: var(--gold-400);
  font-weight: 700;
}

/* header_top: logo + buscador (displayTop -> ps_mainmenu + ps_searchbar) */
.header-top {
  background-color: var(--navy-900);
  border-bottom: 1px solid var(--navy-700);
}

#search_widget.search-widgets {
  background-color: var(--navy-800);
  border: 1px solid var(--navy-600);
  border-radius: 6px;
}

#search_widget.search-widgets input[type="text"] {
  background: none;
  color: var(--ink-100);
}

#search_widget.search-widgets input[type="text"]::placeholder {
  color: var(--ink-500);
}

#search_widget.search-widgets .search {
  color: var(--gold-400);
}

/* menú principal (ps_mainmenu, dentro de displayTop) */
.header-top .top-menu > li > a {
  color: var(--ink-300);
}

.header-top .top-menu > li > a:hover,
.header-top .top-menu > li.active > a {
  color: var(--gold-400);
}

/* ==========================================================================
   Botón "Ver en Amazon" (módulo amaamazonlink, override de
   product-add-to-cart.tpl). Icono en SVG inline, sin depender de una
   librería de iconos de fuente completa.
   ========================================================================== */
.product-amazon-link__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.product-amazon-link__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}