/**
 * Sauleda USA — cabecera de la ruta Productos (diseño).
 *
 * Enlazada SOLO en la ruta Productos (head.tpl, rama
 * $sauleda_products_route_match), por lo que todas las reglas son
 * exclusivas de esa página. Sin resets globales.
 *
 * Estructura: breadcrumb nativo re-estilizado arriba, luego eyebrow +
 * H1 único + dos párrafos. El offset superior del breadcrumb replica el
 * del antiguo banner .sauleda-category-banner--sin-imagen (45px) para
 * que la página no salte.
 *
 * Tipografía: Space Grotesk ya está self-hosted globalmente
 * (sauleda-base.css, @font-face + token --sauleda-font-family); no se
 * carga Google Fonts.
 */

/* ------------------------------------------------------------------
 * Breadcrumb nativo re-estilizado.
 * Mecanismo del padre (Bootstrap/Hummingbird): li + li::before con
 * content "/". Aquí solo se re-estila; nunca se añade un segundo
 * separador, el resultado es "Inicio / Productos" con una barra.
 * ------------------------------------------------------------------ */
body#category .breadcrumb__wrapper {
  max-width: 1280px;
  margin: 45px auto 0;
  padding: 0 5%;
  background-color: transparent;
}

body#category .breadcrumb__wrapper > .container {
  max-width: 100%;
  padding: 0;
}

body#category .breadcrumb__wrapper ol.breadcrumb {
  flex-wrap: wrap;
  gap: 8px;
  font-size: .72rem;
  letter-spacing: .04em;
  color: #8C8680;
  padding: 4px 0;
}

body#category .breadcrumb__wrapper ol.breadcrumb .breadcrumb-item {
  padding: 0;
  white-space: nowrap;
}

body#category .breadcrumb__wrapper ol.breadcrumb .breadcrumb-link {
  color: #8C8680;
  text-decoration: none;
  transition: color .15s ease;
}

body#category .breadcrumb__wrapper ol.breadcrumb .breadcrumb-link:hover,
body#category .breadcrumb__wrapper ol.breadcrumb .breadcrumb-link:focus-visible {
  color: #B82828;
}

/* Separador único entre items: se re-estila el ::before del padre con
 * el mismo espaciado que el gap (8px) para que quede balanceado. */
body#category .breadcrumb__wrapper ol.breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
}

body#category .breadcrumb__wrapper ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  content: "/";
  color: #8C8680;
  padding: 0 8px 0 0;
  margin: 0;
}

/* Item actual (último li, span sin enlace). */
body#category .breadcrumb__wrapper ol.breadcrumb .breadcrumb-item:last-child {
  color: #1A1A18;
  font-weight: 500;
}

/* ------------------------------------------------------------------
 * Cabecera: eyebrow + H1 único + dos párrafos.
 * ------------------------------------------------------------------ */
body#category .sauleda-products-hero {
  max-width: 1280px;
  margin: 26px auto 0;
  padding: 0;
  font-family: var(--sauleda-font-family, "Space Grotesk", system-ui, sans-serif);
}

body#category .sauleda-products-hero__row {
  display: block;
}

body#category .sauleda-products-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8C8680;
  margin-bottom: 14px;
}

body#category .sauleda-products-hero__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B82828;
}

body#category .sauleda-products-hero__title {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 700;
  color: #1A1A18;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0 0 10px;
  overflow-wrap: break-word;
}

body#category .sauleda-products-hero__lead {
  font-size: .92rem;
  color: #4A4540;
  max-width: 540px;
  line-height: 1.7;
  margin: 0;
}

body#category .sauleda-products-hero__seo {
  font-size: .92rem;
  color: #4A4540;
  max-width: 760px;
  line-height: 1.7;
  margin: 14px 0 0;
}

/* ------------------------------------------------------------------
 * Móvil: una sola columna (ya lo es), padding 5% (ya lo tiene) y el
 * clamp del H1 se adapta solo; se evita desborde en pantallas estrechas.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  body#category .breadcrumb__wrapper {
    margin-top: 53px;
  }

  body#category .sauleda-products-hero {
    margin-top: 20px;
  }

  body#category .sauleda-products-hero__lead,
  body#category .sauleda-products-hero__seo {
    max-width: 100%;
  }
}