/*
 * Productos Jumbo - visual refresh v2.
 * Consolidated final layer for header and catalog headings.
 * Replaces the experimental header CSS layers without touching the theme.
 */

:root {
  --jumbo-brand-red: #de0a2f;
  --jumbo-heading-color: #414042;
  --jumbo-reference-font-family: inherit;
  --jumbo-reference-font-weight: 700;
  --jumbo-reference-font-style: normal;
  --jumbo-reference-letter-spacing: normal;
  --jumbo-reference-text-transform: none;
  --jumbo-reference-line-height: 1.1;
}

/* ================================================================
   Header - preserve Salient layout, remove visual noise
   ================================================================ */
#header-outer[data-format="centered-menu-bottom-bar"],
#header-outer[data-format="centered-menu-bottom-bar"].transparent,
#header-outer[data-format="centered-menu-bottom-bar"].fixed-menu,
#header-outer[data-format="centered-menu-bottom-bar"].small-nav,
#header-outer[data-format="centered-menu-bottom-bar"].scrolled-down,
#header-outer[data-format="centered-menu-bottom-bar"] #top,
#header-outer[data-format="centered-menu-bottom-bar"] #top > .container,
#header-outer[data-format="centered-menu-bottom-bar"] #top .container,
#header-outer[data-format="centered-menu-bottom-bar"] #top .span_3,
#header-outer[data-format="centered-menu-bottom-bar"] #top .span_9,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav > ul,
#header-secondary-outer,
#header-secondary-outer > .container,
#header-secondary-outer nav,
#header-secondary-outer nav > ul {
  background-color: #fff !important;
  background-image: none !important;
  border: 0 !important;
}

#header-outer[data-format="centered-menu-bottom-bar"] {
  border: 0 !important;
  box-shadow: 0 5px 22px rgba(20, 20, 24, 0.035) !important;
}

#header-secondary-outer {
  border: 0 !important;
  box-shadow: none !important;
}

/* Native separator between Salient's logo and menu rows. */
#header-outer[data-format="centered-menu-bottom-bar"] #top .span_9::before,
#header-outer[data-format="centered-menu-bottom-bar"] #top .span_9::after,
#header-outer[data-format="centered-menu-bottom-bar"] #top .span_3::before,
#header-outer[data-format="centered-menu-bottom-bar"] #top .span_3::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Primary menu is marked at runtime after verifying its five real links. */
#header-outer .jumbo-primary-menu {
  background: #fff !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#header-outer .jumbo-primary-menu > li:not(.jumbo-primary-item),
#header-outer .jumbo-primary-menu .jumbo-runtime-separator {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#header-outer .jumbo-primary-menu > li.jumbo-primary-item,
#header-outer .jumbo-primary-menu > li.jumbo-primary-item > a,
#header-outer .jumbo-primary-menu > li.jumbo-primary-item > a > span:not(.sf-sub-indicator),
#header-outer .jumbo-primary-menu > li.jumbo-primary-item > a .menu-title-text {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Remove any pseudo-element used as a vertical menu separator. */
#header-outer .jumbo-primary-menu > li.jumbo-primary-item::before,
#header-outer .jumbo-primary-menu > li.jumbo-primary-item::after,
#header-outer .jumbo-primary-menu > li.jumbo-primary-item > a::before,
#header-outer .jumbo-primary-menu > li.jumbo-primary-item > a::after,
#header-outer .jumbo-primary-menu > li.jumbo-primary-item > a > span:not(.sf-sub-indicator)::before,
#header-outer .jumbo-primary-menu > li.jumbo-primary-item > a > span:not(.sf-sub-indicator)::after,
#header-outer .jumbo-primary-menu > li.jumbo-primary-item > a .menu-title-text::before,
#header-outer .jumbo-primary-menu > li.jumbo-primary-item > a .menu-title-text::after,
#header-outer .jumbo-disable-before::before,
#header-outer .jumbo-disable-after::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Top-level nav: white at rest, red text only on interaction. */
#header-outer[data-format="centered-menu-bottom-bar"] #top nav > ul > li > a,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav > ul > li > a:visited,
#header-secondary-outer nav > ul > li > a {
  color: var(--jumbo-heading-color) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: color 160ms ease !important;
}

#header-outer[data-format="centered-menu-bottom-bar"] #top nav > ul > li > a:hover,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav > ul > li > a:focus,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav > ul > li > a:focus-visible,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav > ul > li.current-menu-item > a,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav > ul > li.current-menu-ancestor > a,
#header-secondary-outer nav > ul > li > a:hover,
#header-secondary-outer nav > ul > li.current-menu-item > a {
  color: var(--jumbo-brand-red) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Dropdowns stay white; only text color changes on hover. */
#header-outer[data-format="centered-menu-bottom-bar"] #top nav .sub-menu,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav .sub-menu li,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav .sub-menu li > a {
  background-color: #fff !important;
  background-image: none !important;
  border-color: rgba(65, 64, 66, 0.08) !important;
  box-shadow: none !important;
}

#header-outer[data-format="centered-menu-bottom-bar"] #top nav .sub-menu li > a:hover,
#header-outer[data-format="centered-menu-bottom-bar"] #top nav .sub-menu li.current-menu-item > a {
  color: var(--jumbo-brand-red) !important;
  background-color: #fff !important;
}

/* Runtime spacer for the historically fixed header. */
#header-space.jumbo-header-space-managed,
#jumbo-fixed-header-spacer {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* ================================================================
   Heading typography - use the original Nuestros Productos title
   ================================================================ */
html.jumbo-heading-font-ready .jumbo-reference-title,
html.jumbo-heading-font-ready .jumbo-section-heading,
html.jumbo-heading-font-ready .titulo-productos,
html.jumbo-heading-font-ready .category-title,
html.jumbo-heading-font-ready .woocommerce-products-header__title.page-title {
  font-family: var(--jumbo-reference-font-family) !important;
  font-weight: var(--jumbo-reference-font-weight) !important;
  font-style: var(--jumbo-reference-font-style) !important;
  line-height: var(--jumbo-reference-line-height) !important;
  letter-spacing: var(--jumbo-reference-letter-spacing) !important;
  text-transform: var(--jumbo-reference-text-transform) !important;
  font-variant: normal !important;
  font-stretch: normal !important;
  text-shadow: none !important;
}

html.jumbo-heading-font-ready .titulo-productos,
html.jumbo-heading-font-ready .category-title,
html.jumbo-heading-font-ready .woocommerce-products-header__title.page-title {
  display: block !important;
  width: fit-content !important;
  max-width: min(100%, 1100px) !important;
  margin: 18px auto 24px !important;
  padding: 0 !important;
  color: var(--jumbo-brand-red) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

html.jumbo-heading-font-ready .titulo-productos::before,
html.jumbo-heading-font-ready .titulo-productos::after,
html.jumbo-heading-font-ready .category-title::before,
html.jumbo-heading-font-ready .category-title::after,
html.jumbo-heading-font-ready .woocommerce-products-header__title.page-title::before,
html.jumbo-heading-font-ready .woocommerce-products-header__title.page-title::after {
  display: none !important;
  content: none !important;
}

.titulo-productos-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.page-id-31553 .jumbo-reference-title {
  font-size: clamp(2.25rem, 4.2vw, 3.45rem) !important;
}

body.page-id-31553 .jumbo-section-heading {
  font-size: clamp(1.95rem, 3.2vw, 2.7rem) !important;
}

.jumbo-heading-font-probe {
  position: fixed !important;
  left: -100000px !important;
  top: -100000px !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
