/* ==========================================================================
   Forestgreen · Cabecera y menú
   Todo cuelga de .fg-header. La estructura y los datos siguen saliendo de los
   módulos (custombanners, ps_searchbar, ps_customersignin, blockcart,
   ets_megamenu y blockreassurance); aquí solo se adapta su presentación.
   ========================================================================== */

.fg-header {
  --fgh-green-600: #4a7d56;
  --fgh-green-700: #3a6b45;
  --fgh-green-800: #2c5135;
  --fgh-green-900: #1f3a26;
  --fgh-tint: #f3f7f4;
  --fgh-tint-2: #e6efe9;
  --fgh-ink: #2a322c;
  --fgh-ink-soft: #6b756e;
  --fgh-ink-invert: #d8e2db;
  --fgh-line: #dde4df;
  --fgh-white: #fdfefd;
  --fgh-wrap: 1760px;
  --fgh-gutter: 40px;

  position: relative;
  z-index: 100;
  background: var(--fgh-white);
  color: var(--fgh-ink);
}

.fg-header *,
.fg-header *::before,
.fg-header *::after { box-sizing: border-box; }

.fg-header :focus-visible {
  outline: 2px solid var(--fgh-green-600);
  outline-offset: 2px;
}

.fg-header__wrap {
  max-width: var(--fgh-wrap);
  margin: 0 auto;
  padding: 0 var(--fgh-gutter);
  width: 100%;
}

/* --------------------------------------------------------------------------
   1. Barra superior (custombanners en displayNav1)
   -------------------------------------------------------------------------- */

.fg-header .fg-header__topbar {
  background: var(--fgh-green-900);
  color: var(--fgh-ink-invert);
  font-size: 13.5px;
  border: 0;
  margin: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
}

.fg-header .fg-header__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  min-height: 42px;
}

/* custombanners imprime un .cb-wrapper por grupo de bloques */
.fg-header .fg-header__topbar .cb-wrapper {
  display: flex;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
}

.fg-header .fg-header__topbar .cb-item,
.fg-header .fg-header__topbar .cb-item-content {
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  background: none;
  border: 0;
}

.fg-header .fg-header__topbar .cb-item-content > a,
.fg-header .fg-header__topbar .custom-html { display: flex; align-items: center; gap: 8px; }

.fg-header .fg-header__topbar p { margin: 0; }

.fg-header .fg-header__topbar,
.fg-header .fg-header__topbar a,
.fg-header .fg-header__topbar p,
.fg-header .fg-header__topbar span,
.fg-header .fg-header__topbar li a {
  color: var(--fgh-ink-invert);
  font-size: 13.5px;
  line-height: 1.3;
}

.fg-header .fg-header__topbar a:hover { color: var(--fgh-white); }

.fg-header .fg-header__topbar img,
.fg-header .fg-header__topbar .cb-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(.85);
}

.fg-header .fg-header__topbar .mini-nav ul {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fg-header .fg-header__topbar .mini-nav li { margin: 0; }

/* --------------------------------------------------------------------------
   2. Fila principal: logo, buscador y acciones
   -------------------------------------------------------------------------- */

.fg-header .fg-header__main {
  background: var(--fgh-white);
  padding: 0;
  margin: 0;
}

.fg-header .fg-header__main-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 90px;
}

.fg-header .fg-header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.fg-header .fg-header__logo img,
.fg-header .fg-header__logo .logo {
  display: block;
  width: auto;
  max-width: 160px;
  height: auto;
  max-height: 66px;
  margin: 0;
}

.fg-header .fg-header__burger {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fgh-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.fg-header .fg-header__burger-bars,
.fg-header .fg-header__burger-bars::before,
.fg-header .fg-header__burger-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
}

.fg-header .fg-header__burger-bars::before,
.fg-header .fg-header__burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.fg-header .fg-header__burger-bars::before { top: -7px; }
.fg-header .fg-header__burger-bars::after { top: 7px; }

/* Buscador: se reutiliza el widget de ps_searchbar */
.fg-header .fg-header__search { flex: 1 1 auto; min-width: 0; }

.fg-header .fg-header__search #search_widget,
.fg-header .fg-header__search .search-widgets {
  width: 100%;
  max-width: none;
  margin: 0;
  float: none;
  padding: 0;
}

.fg-header .fg-header__search form {
  position: relative;
  display: block;
  margin: 0;
}

.fg-header .fg-header__search input[type="text"],
.fg-header .fg-header__search input.ui-autocomplete-input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 46px;
  border: 1px solid var(--fgh-line);
  border-radius: 0;
  background: var(--fgh-tint);
  color: var(--fgh-ink);
  font-size: 14.5px;
  box-shadow: none;
}

.fg-header .fg-header__search input::placeholder { color: var(--fgh-ink-soft); }

.fg-header .fg-header__search input:focus {
  background: var(--fgh-white);
  border-color: var(--fgh-green-600);
}

.fg-header .fg-header__search .material-icons.search {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fgh-ink-soft);
  font-size: 20px;
  pointer-events: none;
}

.fg-header .fg-header__search .material-icons.clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fgh-ink-soft);
  font-size: 18px;
  cursor: pointer;
}

/* Acciones de la derecha */
.fg-header .fg-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.fg-header .fg-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px;
  background: var(--fgh-green-700);
  border: 1px solid var(--fgh-green-700);
  border-radius: 0;
  color: var(--fgh-white);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}

.fg-header .fg-header__cta:hover,
.fg-header .fg-header__cta:focus {
  background: var(--fgh-green-800);
  border-color: var(--fgh-green-800);
  color: var(--fgh-white);
  text-decoration: none;
}

/* Utilidades: Ayuda, Cuenta y Carrito comparten forma */
.fg-header .fg-header__util,
.fg-header .fg-header__nav2 .user-info > a,
.fg-header .fg-header__nav2 .cart-contain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fgh-ink);
  font-size: 11.5px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.fg-header .fg-header__util:hover,
.fg-header .fg-header__nav2 .user-info > a:hover,
.fg-header .fg-header__nav2 .cart-contain:hover {
  color: var(--fgh-green-800);
  text-decoration: none;
}

.fg-header .fg-header__util-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.fg-header .fg-header__nav2 {
  display: flex;
  align-items: center;
  gap: 22px;
}

.fg-header .fg-header__nav2 #_desktop_user_info,
.fg-header .fg-header__nav2 #_desktop_cart_wrapper,
.fg-header .fg-header__nav2 .user-info,
.fg-header .fg-header__nav2 #_desktop_cart { margin: 0; padding: 0; float: none; }

/* El tema oculta la etiqueta en escritorio; aquí sí se quiere */
.fg-header .fg-header__nav2 .user-info > a span.hidden-sm-down,
.fg-header .fg-header__nav2 .user-info > a span.d-none {
  display: block !important;
  font-size: 11.5px;
}

.fg-header .fg-header__nav2 .material-icons { font-size: 21px; }

.fg-header .fg-header__nav2 .cart-products-count {
  position: absolute;
  top: -6px;
  right: 6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--fgh-green-700);
  color: var(--fgh-white);
  font-size: 10.5px;
  line-height: 17px;
  text-align: center;
}

/* Añade la etiqueta "Carrito" bajo el icono sin tocar el módulo */
.fg-header .fg-header__nav2 .cart-contain::after {
  content: attr(data-fg-label);
  font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   3. Desplegable de Ayuda
   -------------------------------------------------------------------------- */

.fg-header .fg-header__help { position: relative; }

.fg-header .fg-header__help-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: 280px;
  padding: 18px 20px;
  background: var(--fgh-white);
  border: 1px solid var(--fgh-line);
  box-shadow: 0 18px 40px -22px rgba(31, 58, 38, .45);
  text-align: left;
}

.fg-header .fg-header__help-panel[hidden] { display: none; }

.fg-header .fg-header__help-title {
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fgh-green-700);
}

.fg-header .fg-header__help-panel > :first-child,
.fg-header .fg-header__help-panel .fg-header__help-title:first-child { margin-top: 0; }

.fg-header .fg-header__help-link,
.fg-header .fg-header__help-panel .cb-item a,
.fg-header .fg-header__help-panel li a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--fgh-ink);
  text-decoration: none;
}

.fg-header .fg-header__help-link:hover,
.fg-header .fg-header__help-panel li a:hover {
  color: var(--fgh-green-800);
  text-decoration: none;
}

.fg-header .fg-header__help-panel ul { margin: 0; padding: 0; list-style: none; }

.fg-header .fg-header__help-panel .block-title,
.fg-header .fg-header__help-panel .h3 {
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fgh-green-700);
}

/* --------------------------------------------------------------------------
   4. Barra de menú (Mega Menu PRO)
   -------------------------------------------------------------------------- */

.fg-header .fg-header__menu {
  background: var(--fgh-white);
  border-top: 1px solid var(--fgh-line);
  border-bottom: 1px solid var(--fgh-line);
}

.fg-header .fg-header__menu #main_menu_contener { padding-left: var(--fgh-gutter); padding-right: var(--fgh-gutter); }

.fg-header .ets_mm_megamenu,
.fg-header .ets_mm_megamenu_content,
.fg-header .ets_mm_megamenu .container {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.fg-header .ets_mm_megamenu ul.mm_menus_ul {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 49px;
}

.fg-header .ets_mm_megamenu ul.mm_menus_ul > li {
  float: none;
  margin: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: stretch;
}

.fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 49px;
  padding: 0 18px;
  border: 0;
  background: none;
  color: var(--fgh-ink);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.fg-header .ets_mm_megamenu ul.mm_menus_ul > li:first-child > a { padding-left: 0; }

.fg-header .ets_mm_megamenu ul.mm_menus_ul > li:hover > a,
.fg-header .ets_mm_megamenu ul.mm_menus_ul > li.active > a {
  color: var(--fgh-green-800);
  background: none;
  box-shadow: inset 0 -2px 0 var(--fgh-green-700);
}

/* Paneles desplegables a ancho completo */
.fg-header .ets_mm_megamenu .mm_columns_ul {
  border: 0;
  border-top: 1px solid var(--fgh-line);
  box-shadow: 0 24px 44px -30px rgba(31, 58, 38, .45);
  background: var(--fgh-white);
  padding: 30px var(--fgh-gutter) 34px;
}

.fg-header .ets_mm_megamenu .mm_columns_ul > li { border: 0; }

.fg-header .ets_mm_megamenu .ets_mm_block_title,
.fg-header .ets_mm_megamenu .mm_block_type_category > .ets_mm_block_title {
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--fgh-line);
  color: var(--fgh-green-800);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.fg-header .ets_mm_megamenu .ets_mm_block ul { margin: 0; padding: 0; list-style: none; }

.fg-header .ets_mm_megamenu .ets_mm_block ul li > a {
  display: block;
  padding: 5px 0 5px 16px;
  position: relative;
  color: var(--fgh-ink);
  font-size: 14px;
  text-transform: none;
  text-decoration: none;
}

.fg-header .ets_mm_megamenu .ets_mm_block ul li > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--fgh-green-600);
}

.fg-header .ets_mm_megamenu .ets_mm_block ul li > a:hover {
  color: var(--fgh-green-800);
  text-decoration: none;
}

/* Segundo nivel: la categoría padre en negrita con guion */
.fg-header .ets_mm_megamenu .ets_mm_block > ul > li > a {
  font-weight: 600;
  padding-left: 14px;
}

.fg-header .ets_mm_megamenu .ets_mm_block > ul > li > a::before {
  border: 0;
  width: 8px;
  height: 1px;
  background: var(--fgh-green-600);
  top: 15px;
}

.fg-header .ets_mm_megamenu .ets_mm_block > ul > li ul { margin: 2px 0 10px 14px; }

.fg-header .ets_mm_megamenu .ets_mm_block > ul > li ul > li > a { font-weight: 400; }

/* --------------------------------------------------------------------------
   5. Barra de confianza (blockreassurance en displayNavFullWidth)
   -------------------------------------------------------------------------- */

.fg-header .fg-header__trust:empty { display: none; }

.fg-header .fg-header__trust {
  background: var(--fgh-tint-2);
  color: var(--fgh-ink);
  font-size: 13.5px;
}

.fg-header .fg-header__trust #block-reassurance,
.fg-header .fg-header__trust .blockreassurance_product {
  max-width: var(--fgh-wrap);
  margin: 0 auto;
  padding: 0 var(--fgh-gutter);
  display: block;
  border: 0;
}

.fg-header .fg-header__trust #block-reassurance ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 45px;
}

.fg-header .fg-header__trust #block-reassurance li {
  margin: 0;
  padding: 0 26px;
  border-left: 1px solid rgba(44, 81, 53, .18);
  display: flex;
  align-items: center;
}

.fg-header .fg-header__trust #block-reassurance li:first-child { border-left: 0; }

.fg-header .fg-header__trust .block-reassurance-item,
.fg-header .fg-header__trust .fg-header__trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  margin: 0;
}

.fg-header .fg-header__trust img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex: 0 0 auto;
}

.fg-header .fg-header__trust .h6,
.fg-header .fg-header__trust .block-title,
.fg-header .fg-header__trust span,
.fg-header .fg-header__trust p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--fgh-ink);
  text-transform: none;
  letter-spacing: 0;
}

.fg-header .fg-header__trust .block-title { font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1399px) {
  .fg-header { --fgh-gutter: 24px; }
  .fg-header .fg-header__actions { gap: 16px; }
  .fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a { padding: 0 13px; font-size: 13px; }
}

@media (max-width: 1199px) {
  .fg-header .fg-header__cta span { display: none; }
  .fg-header .fg-header__cta { padding: 0 14px; }
  .fg-header .fg-header__trust #block-reassurance li { padding: 0 16px; }
  .fg-header .fg-header__trust .h6,
  .fg-header .fg-header__trust span,
  .fg-header .fg-header__trust p { font-size: 12.5px; }
}

@media (max-width: 991px) {
  .fg-header { --fgh-gutter: 16px; }

  .fg-header .fg-header__burger { display: flex; }

  .fg-header .fg-header__main-inner {
    min-height: 68px;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .fg-header .fg-header__logo { order: 1; flex: 1 1 auto; }
  .fg-header .fg-header__logo img { max-height: 46px; }
  .fg-header .fg-header__actions { order: 2; gap: 12px; }
  .fg-header .fg-header__search { order: 3; flex: 1 1 100%; }

  .fg-header .fg-header__cta { display: none; }
  .fg-header .fg-header__help { display: none; }

  .fg-header .fg-header__trust { display: none; }
}

@media (max-width: 575px) {
  .fg-header .fg-header__topbar-inner { justify-content: center; gap: 8px 18px; }
  .fg-header .fg-header__topbar .mini-nav ul { gap: 16px; }
  .fg-header .fg-header__nav2 { gap: 10px; }
  .fg-header .fg-header__nav2 .fg-header__util,
  .fg-header .fg-header__nav2 .user-info > a,
  .fg-header .fg-header__nav2 .cart-contain { min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .fg-header *,
  .fg-header *::before,
  .fg-header *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   7. Cajón del menú en móvil
   La barra de menú se convierte en un panel desplegable; Mega Menu PRO sigue
   siendo quien imprime los enlaces.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .fg-header .fg-header__menu {
    display: none;
    border-top: 1px solid var(--fgh-line);
  }

  .fg-header.fg-header--menu-open .fg-header__menu {
    display: block;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .fg-header .fg-header__menu #main_menu_contener { padding: 0; }

  .fg-header .ets_mm_megamenu ul.mm_menus_ul {
    display: block;
    min-height: 0;
  }

  .fg-header .ets_mm_megamenu ul.mm_menus_ul > li { display: block; }

  .fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a {
    height: auto;
    padding: 14px var(--fgh-gutter);
    border-bottom: 1px solid var(--fgh-line);
    justify-content: space-between;
  }

  .fg-header .ets_mm_megamenu ul.mm_menus_ul > li:first-child > a { padding-left: var(--fgh-gutter); }

  .fg-header .ets_mm_megamenu .mm_columns_ul {
    position: static !important;
    width: auto !important;
    padding: 10px var(--fgh-gutter) 18px;
    box-shadow: none;
    border-top: 0;
  }

  .fg-header .ets_mm_megamenu .mm_columns_ul > li {
    width: 100% !important;
    float: none !important;
  }

  body.fg-menu-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   8. Correcciones sobre el CSS heredado del tema
   -------------------------------------------------------------------------- */

/* El tema convierte el buscador en una capa fija que se despliega al pulsar la
   lupa. Aquí vuelve a ser un campo en línea, siempre visible, como en la
   referencia. El widget y su autocompletado siguen siendo los de ps_searchbar. */
.fg-header .fg-header__search #search_widget input[type="text"],
.fg-header .fg-header__search #search_widget input.ui-autocomplete-input,
.fg-header .fg-header__search .search-widgets input[type="text"] {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* el tema lo subia a z-index 10000 para la capa desplegable; en linea eso
     tapaba el icono de la lupa */
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  height: 48px;
  margin: 0;
  box-shadow: none;
}

.fg-header .fg-header__search #search_widget,
.fg-header .fg-header__search #search_widget form {
  height: 48px;
  overflow: visible;
}

/* El desplegable del autocompletado se ancla al campo */
.fg-header .fg-header__search .ui-autocomplete {
  max-width: 100%;
  z-index: 120;
}

/* displayNav1 envuelve todo en un solo div; hay que repartir dentro de él */
.fg-header .fg-header__topbar-inner > .cb,
.fg-header .fg-header__topbar-inner > div {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 26px;
  flex-wrap: wrap;
  min-width: 0;
}

/* El tema pinta los iconos del buscador con `#header #search_widget form i`
   (SVG de fondo, `text-indent` negativo y `position: inherit !important`), lo
   que los dejaba en el flujo y empujaba el campo a una segunda linea sobre la
   barra del menu. En esta cabecera se ocultan esos iconos y la lupa se dibuja
   desde el propio contenedor, que si es nuestro, sin depender de reglas del
   tema. El widget, el formulario y el autocompletado siguen siendo los de
   ps_searchbar. */
#header .fg-header__search #search_widget form {
  position: relative;
  display: block;
  width: 100%;
}

#header .fg-header__search #search_widget form i {
  display: none !important;
}

.fg-header .fg-header__search { position: relative; }

.fg-header .fg-header__search::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background-image: url("../images/Icon - Search.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 2;
}

/* En la referencia el buscador ocupa todo el hueco entre el logo y las
   acciones (1096 px de 1760), no un ancho fijo. */
.fg-header .fg-header__search {
  flex: 1 1 auto;
  max-width: none;
  margin-right: 0;
}

/* Apariencia del campo por encima de las reglas con id del tema */
#header .fg-header__search #search_widget input[type="text"],
#header .fg-header__search #search_widget input.ui-autocomplete-input {
  padding: 0 18px 0 46px;
  border: 1px solid var(--fgh-line);
  border-radius: 0;
  background: var(--fgh-tint);
  color: var(--fgh-ink);
  font-size: 14.5px;
}

#header .fg-header__search #search_widget input[type="text"]:focus {
  background: var(--fgh-white);
  border-color: var(--fgh-green-600);
  outline: none;
}

/* --------------------------------------------------------------------------
   9. Barra de menu: mayusculas y grupo derecho
   -------------------------------------------------------------------------- */

/* El titulo va dentro de un span propio del modulo, que no hereda el
   text-transform del enlace. Sin esta regla las entradas nuevas se veian en
   minusculas junto a las antiguas, que estan escritas en mayusculas en la
   base de datos. */
.fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a .mm_menu_content_title {
  text-transform: uppercase;
}

/* SOBRE NOSOTROS y BLOG se separan a la derecha, como en la referencia.
   La clase la pone el propio menu (campo "clase personalizada" de
   SOBRE NOSOTROS), asi que el dia que cambie el orden basta con moverla. */
.fg-header .ets_mm_megamenu ul.mm_menus_ul > li.fg-menu-right {
  margin-left: auto;
}

.fg-header .ets_mm_megamenu ul.mm_menus_ul > li.fg-menu-right > a {
  padding-left: 22px;
  border-left: 1px solid var(--fgh-line);
}

/* --------------------------------------------------------------------------
   10. Cajon movil: se usa el del propio Mega Menu PRO
   El modulo ya trae un cajon lateral fijo de 280 px con su boton
   .ybc-menu-toggle. La cabecera no lo duplica: oculta ese boton, deja el
   contenedor del menu en su sitio para que el cajon pueda desplegarse, y
   nuestro boton de hamburguesa acciona el del modulo desde fg-header.js.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .fg-header .fg-header__menu {
    display: block;
    border-top: 0;
  }

  .fg-header .fg-header__menu .ybc-menu-toggle,
  .fg-header .fg-header__menu .ybc-menu-btn {
    display: none !important;
  }

  .fg-header .fg-header__menu .ets_mm_megamenu,
  .fg-header .fg-header__menu #main_menu_contener {
    min-height: 0;
    padding: 0;
  }

  /* El cajon del modulo se pinta sobre el resto de la pagina */
  .fg-header .ets_mm_megamenu ul.mm_menus_ul.active {
    visibility: visible;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   11. Barra de confianza: maquetacion real de displayBlock.tpl
   Esta version de blockreassurance no usa lista, sino la rejilla de Bootstrap
   (.container-blockreassurance > .blockreassurance > .row > .col-*), con el
   icono, el titulo y la descripcion en tres divs apilados. Aqui se convierten
   en una sola linea, como en la referencia. El contenido sigue siendo el del
   modulo: no se toca ni se duplica.
   -------------------------------------------------------------------------- */

.fg-header .fg-header__trust .container-blockreassurance {
  max-width: var(--fgh-wrap);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--fgh-gutter);
}

.fg-header .fg-header__trust .blockreassurance { margin: 0; }

.fg-header .fg-header__trust .blockreassurance .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
}

/* Cuatro garantias a lo ancho. El texto del modulo es mas largo que el de la
   referencia, asi que la descripcion baja a una segunda linea bajo el titulo
   en lugar de recortarse: "Envio gratuito" sin su condicion seria enganoso. */
.fg-header .fg-header__trust .blockreassurance [class*="col-"] {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 25%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  padding: 9px 20px;
  margin: 0;
  text-align: left;
  border-left: 1px solid rgba(44, 81, 53, .18);
}

.fg-header .fg-header__trust .blockreassurance .row > [class*="col-"]:first-child {
  border-left: 0;
}

.fg-header .fg-header__trust .block-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fg-header .fg-header__trust .block-icon img,
.fg-header .fg-header__trust .block-icon svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  display: block;
  object-fit: contain;
}

/* El modulo escribe el color del titulo en un style inline */
.fg-header .fg-header__trust .block-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fgh-ink) !important;
}

 /* La descripcion es un <p> sin clase dentro de la columna */
.fg-header .fg-header__trust .blockreassurance [class*="col-"] > p {
  flex: 1 1 100%;
  min-width: 0;
  padding-left: 26px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--fgh-ink-soft) !important;
}

/* Los textos del modulo son mas largos que los de la referencia y en pantallas
   medianas no caben en una sola linea. Por debajo de 1600 px se deja solo el
   titulo de cada garantia; la frase completa sigue estando en la ficha de
   producto, que es donde el modulo la muestra de serie. */
@media (max-width: 1199px) {
  .fg-header .fg-header__trust .blockreassurance [class*="col-"] { padding: 9px 14px; }
  .fg-header .fg-header__trust .block-title { font-size: 12px; }
  .fg-header .fg-header__trust .blockreassurance [class*="col-"] > p { font-size: 11.5px; }
}

@media (max-width: 991px) {
  .fg-header .fg-header__trust { display: none; }
}

/* ==========================================================================
   12. Ajuste a las medidas reales de la referencia
   Todos los valores de esta seccion estan medidos sobre
   https://forestgreen-pdp-atc.netlify.app/ a 1920 px:
     barra superior  42 px, fondo #1f3a26, texto #d8e2db 13,5 px/300
     fila principal  90 px, fondo #fdfefd, contenedor 1760 + 40 de margen
     barra de menu   49 px, entradas 13,5 px/400, interletraje 0,5, 15/16 px
     barra de garantias 45 px, fondo #e6efe9, texto 13 px #2c5135
   ========================================================================== */

/* ---------- 12.1 Barra superior ---------- */

.fg-header .fg-header__topbar {
  background: var(--fgh-green-900);
  color: #d8e2db;
  font-size: 13.5px;
  font-weight: 300;
}

.fg-header .fg-header__topbar-inner {
  min-height: 42px;
  display: flex;
  align-items: center;
}

/* displayNav1 lo pinta custombanners en dos envoltorios. Con display:contents
   sus items pasan a ser hijos directos del flex y se pueden recolocar como en
   la referencia: telefono y navegacion a la izquierda, horario a la derecha.
   No se toca el contenido de los banners, solo su posicion. */
.fg-header .fg-header__topbar-inner > .cb,
.fg-header .fg-header__topbar-inner > div {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 24px;
  flex-wrap: nowrap;
  min-width: 0;
}

.fg-header .fg-header__topbar .cb-wrapper { display: contents; }

.fg-header .fg-header__topbar .custom-info-wrapper .cb-item:first-child { order: 1; }
.fg-header .fg-header__topbar .custom-nav-wrapper .cb-item { order: 2; }
.fg-header .fg-header__topbar .custom-info-wrapper .cb-item:nth-child(2) {
  order: 3;
  margin-left: auto;
}

.fg-header .fg-header__topbar .cb-item,
.fg-header .fg-header__topbar .cb-item-content,
.fg-header .fg-header__topbar .custom-html {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.fg-header .fg-header__topbar .custom-html p { margin: 0; }

.fg-header .fg-header__topbar a {
  color: #d8e2db;
  text-decoration: none;
  font-weight: 400;
}

.fg-header .fg-header__topbar a:hover { color: var(--fgh-white); }

.fg-header .fg-header__topbar .mini-nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 12.2 Fila principal ---------- */

.fg-header .fg-header__main { background: #fdfefd; border-bottom: 1px solid var(--fgh-line); }

.fg-header .fg-header__main-inner {
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.fg-header .fg-header__logo { flex: 0 0 auto; }
.fg-header .fg-header__logo img { height: 66px; width: auto; max-height: 66px; }

.fg-header .fg-header__actions { flex: 0 0 auto; gap: 8px; }

/* Boton de presupuesto: 42 px de alto, sin redondeo, icono de 18 px */
.fg-header .fg-header__cta {
  height: 42px;
  padding: 0 18px;
  gap: 8px;
  border-radius: 0;
  background: var(--fgh-green-700);
  color: #fdfefd;
  font-size: 13.5px;
  font-weight: 400;
}

.fg-header .fg-header__cta:hover { background: var(--fgh-green-800); }

/* ---------- 12.3 Utilidades: icono arriba, etiqueta debajo ---------- */

.fg-header .fg-header__nav2 { gap: 2px; }

.fg-header .fg-header__util,
.fg-header .fg-header__nav2 .user-info > a,
.fg-header .fg-header__nav2 .cart-contain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 55px;
  width: auto;
  min-width: 62px;
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--fgh-ink);
  text-decoration: none;
  white-space: nowrap;
}

.fg-header .fg-header__util-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
}

/* Los iconos de usuario y carrito los pinta custom.css como imagen de fondo de
   2,5 rem. Aqui se sustituyen por los trazos de la referencia, a 22 px. */
#header .fg-header .fg-header__nav2 .user-info > a > i,
#header .fg-header .fg-header__nav2 .cart-contain > i {
  width: 22px !important;
  height: 22px !important;
  background-size: 22px 22px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

#header .fg-header .fg-header__nav2 .user-info > a > i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a322c' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 016-6h4a6 6 0 016 6v1'/%3E%3C/svg%3E") !important;
}

#header .fg-header .fg-header__nav2 .cart-contain > i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a322c' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6h16l-1.5 9h-13L4 6M4 6L3.4 3H1M9 19a1 1 0 100 2 1 1 0 000-2zM16 19a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E") !important;
}

/* La etiqueta del carrito la escribe fg-header.js en data-fg-label */
.fg-header .fg-header__nav2 .cart-contain::after {
  content: attr(data-fg-label);
  font-size: 12px;
  line-height: 1.2;
}

.fg-header .fg-header__nav2 .user-info > a > span {
  display: block !important;
  font-size: 12px;
  line-height: 1.2;
}

/* El contador vuelve a la esquina del icono, como en la referencia */
.fg-header .fg-header__nav2 .cart-products-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--fgh-green-700);
  color: var(--fgh-white);
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fg-header .fg-header__nav2 .cart-contain { position: relative; }

/* ---------- 12.4 Barra de menu ---------- */

.fg-header .fg-header__menu { background: #fdfefd; border-bottom: 1px solid var(--fgh-line); }

.fg-header .ets_mm_megamenu ul.mm_menus_ul { min-height: 49px; }

.fg-header .ets_mm_megamenu ul.mm_menus_ul > li { position: relative; }

.fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a {
  height: 49px;
  padding: 0 16px;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: .5px;
}

.fg-header .ets_mm_megamenu ul.mm_menus_ul > li:first-child > a { padding-left: 0; }

/* Separadores de 1 px entre entradas, como en la referencia */
.fg-header .ets_mm_megamenu ul.mm_menus_ul > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 18px;
  margin-top: -9px;
  background: var(--fgh-line);
}

.fg-header .ets_mm_megamenu ul.mm_menus_ul > li.fg-menu-right > a {
  padding-left: 16px;
  border-left: 0;
}

/* Iconos de 18 px delante de cada entrada. Se dibujan desde la clase que lleva
   cada menu en su campo "clase personalizada" del back office, asi que cambiar
   un icono no obliga a tocar la plantilla. Trazos copiados de la referencia. */
.fg-header .ets_mm_megamenu ul.mm_menus_ul > li[class*="fg-ico-"] > a .mm_menu_content_title::before {
  content: "";
  display: inline-block;
  vertical-align: -4px;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.fg-header .fg-ico-productos > a .mm_menu_content_title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a6b45' stroke-width='1.6'%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5zM3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");
}

.fg-header .fg-ico-proyectos > a .mm_menu_content_title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a6b45' stroke-width='1.6'%3E%3Cpath d='M2 20h20M5 20V10l4-2 4 2M13 20V7l3-1.5L19 7v13M7 14h.01M16 11h.01'/%3E%3C/svg%3E");
}

.fg-header .fg-ico-instalaciones > a .mm_menu_content_title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a6b45' stroke-width='1.6'%3E%3Cpath d='M4 4h16v16H4zM4 9h16M9 9v11M4 14h5'/%3E%3C/svg%3E");
}

.fg-header .fg-ico-vendidos > a .mm_menu_content_title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a6b45' stroke-width='1.6'%3E%3Cpath d='M12 2l2.9 6.3 6.6.6-5 4.4 1.5 6.7L12 16.9 5.7 20.7 7.2 14 2.2 9.6l6.6-.6z'/%3E%3C/svg%3E");
}

.fg-header .fg-ico-ofertas > a .mm_menu_content_title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a6b45' stroke-width='1.6'%3E%3Cpath d='M3 11l8-8 9 1 1 9-8 8zM7.5 7.5h.01'/%3E%3C/svg%3E");
}

.fg-header .fg-ico-servicios > a .mm_menu_content_title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a6b45' stroke-width='1.6'%3E%3Cpath d='M14.7 6.3a4 4 0 01-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 015.4-5.4l-2.1 2.1'/%3E%3C/svg%3E");
}

.fg-header .fg-ico-sobre > a .mm_menu_content_title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a6b45' stroke-width='1.6'%3E%3Cpath d='M12 2l5 7h-2.5l4 6h-3l4 5H4.5l4-5h-3l4-6H7z'/%3E%3Cpath d='M12 20v2'/%3E%3C/svg%3E");
}

.fg-header .fg-ico-blog > a .mm_menu_content_title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a6b45' stroke-width='1.6'%3E%3Cpath d='M4 4h16v16H4zM7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E");
}

/* ---------- 12.5 Barra de garantias en una sola linea ---------- */

.fg-header .fg-header__trust {
  background: var(--fgh-tint-2);
  border-bottom: 1px solid var(--fgh-line);
  color: #2c5135;
}

.fg-header .fg-header__trust .container-blockreassurance {
  max-width: none;
  padding: 0 24px;
}

.fg-header .fg-header__trust .blockreassurance .row {
  flex-wrap: wrap;
  justify-content: center;
  min-height: 44px;
  row-gap: 0;
}

.fg-header .fg-header__trust .blockreassurance [class*="col-"] {
  flex: 0 1 auto;
  max-width: none;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 9px;
  padding: 0 14px;
  min-height: 44px;
  border-left: 1px solid var(--fgh-line);
}

.fg-header .fg-header__trust .block-icon,
.fg-header .fg-header__trust .block-icon img,
.fg-header .fg-header__trust .block-icon svg {
  width: 17px;
  height: 17px;
  max-width: 17px;
  max-height: 17px;
}

.fg-header .fg-header__trust .block-title {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #2c5135 !important;
}

/* La descripcion vuelve a la misma linea que el titulo */
.fg-header .fg-header__trust .blockreassurance [class*="col-"] > p {
  flex: 0 1 auto;
  padding-left: 0;
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap;
  color: #2c5135 !important;
}

@media (max-width: 1499px) {
  .fg-header .fg-header__trust .blockreassurance [class*="col-"] { padding: 0 11px; }
  .fg-header .fg-header__trust .block-title,
  .fg-header .fg-header__trust .blockreassurance [class*="col-"] > p { font-size: 12px; }
}

/* ---------- 12.6 Correcciones finales sobre reglas con id del tema ---------- */

/* theme.css fija `#header .header-nav { background: var(--main-color); color:
   white; padding: 5px 0 }` y `#header .header-nav * { font-size: .88rem }`.
   La barra superior de la referencia es mas oscura, mas baja y con el texto en
   verde claro, asi que hay que ganar a esas dos reglas. */
#header .fg-header .fg-header__topbar {
  background: var(--fgh-green-900);
  color: #d8e2db;
  padding: 0;
}

#header .fg-header .fg-header__topbar,
#header .fg-header .fg-header__topbar * {
  font-size: 13.5px;
}

#header .fg-header .fg-header__topbar .fg-header__topbar-inner { min-height: 42px; }

#header .fg-header .fg-header__topbar a,
#header .fg-header .fg-header__topbar p,
#header .fg-header .fg-header__topbar span,
#header .fg-header .fg-header__topbar div { color: #d8e2db; }

#header .fg-header .fg-header__topbar a:hover { color: var(--fgh-white); }

/* La barra de menu mide 49 px en total, borde incluido */
.fg-header .ets_mm_megamenu ul.mm_menus_ul { min-height: 48px; }
.fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a { height: 48px; }

/* displayBlock.tpl abre una `.row` nueva cada cuatro bloques, asi que con
   cuatro garantias queda una fila sin columnas que sumaba 44 px de alto. No
   sirve `:empty` porque contiene espacios en blanco. */
.fg-header .fg-header__trust .blockreassurance .row:not(:has([class*="col-"])) {
  display: none;
}

/* El tema separa la fila principal de la barra superior con 20 px de margen,
   y blockreassurance añade 10 px de relleno superior. En la referencia las
   cuatro bandas van pegadas. */
/* Ese margen no lo pone el tema: viene del CSS personalizado que la tienda
   guarda en el modulo Custom Code, con !important
   (`#header .header-top { margin-top: 20px !important }`). Ese CSS tambien
   existe en produccion, asi que aqui se neutraliza en lugar de editarlo. */
#header .fg-header .fg-header__main { margin-top: 0 !important; }

.fg-header .fg-header__trust .blockreassurance { padding: 0; }

/* ==========================================================================
   13. Movil, despues de la seccion 12
   Las reglas de la seccion 12 tienen la misma especificidad que las del
   bloque responsive original y van despues, asi que lo pisaban. Aqui se
   vuelven a fijar los valores de movil, ya al final de la hoja.
   ========================================================================== */

@media (max-width: 991px) {
  .fg-header .fg-header__main-inner {
    min-height: 68px;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .fg-header .fg-header__logo img { height: 46px; max-height: 46px; }

  .fg-header .fg-header__search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }

  .fg-header .fg-header__actions { order: 2; gap: 8px; }

  .fg-header .fg-header__cta,
  .fg-header .fg-header__help,
  .fg-header .fg-header__trust { display: none; }

  /* La barra superior se centra y el horario deja de ir a la derecha */
  #header .fg-header .fg-header__topbar .fg-header__topbar-inner { min-height: 38px; }

  .fg-header .fg-header__topbar-inner > .cb,
  .fg-header .fg-header__topbar-inner > div {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
  }

  .fg-header .fg-header__topbar .custom-info-wrapper .cb-item:nth-child(2) {
    margin-left: 0;
  }
}

@media (max-width: 575px) {
  .fg-header .fg-header__util,
  .fg-header .fg-header__nav2 .user-info > a,
  .fg-header .fg-header__nav2 .cart-contain { min-width: 48px; padding: 6px 6px; }

  /* A partir de aqui el horario ocupa demasiado junto al telefono */
  .fg-header .fg-header__topbar .custom-info-wrapper .cb-item:nth-child(2) { display: none; }
}

/* ==========================================================================
   14. Tres correcciones medidas contra la referencia
   ========================================================================== */

/* 14.1 El menu se veia enorme porque Mega Menu PRO escribe el tamano de letra
   como estilo EN LINEA en cada enlace, a partir de su ajuste
   ETS_MM_HEADING_FONT_SIZE (18 px en esta tienda). Un estilo en linea gana a
   cualquier selector, asi que aqui hace falta !important. Ademas el modulo
   pone 0,7 rem de relleno lateral al titulo, que sumaba otros 25 px por
   entrada: con las dos cosas cada entrada medía 215 px en vez de 149. */
.fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a,
.fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a .mm_menu_content_title {
  font-size: 13.5px !important;
}

/* custom.css fija ese relleno con !important
   (`.mm_menu_content_title { padding: 0 .7rem !important }`), de ahi los
   25 px de mas por entrada. */
.fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a .mm_menu_content_title {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 14.2 El banner del horario trae un <br> dentro del parrafo, asi que ocupaba
   dos lineas (35 px) y el texto quedaba pegado arriba mientras el telefono si
   se centraba. Aqui se anula el salto sin tocar el contenido del banner. */
.fg-header .fg-header__topbar .custom-html br { display: none; }

.fg-header .fg-header__topbar .custom-html p {
  margin: 0;
  line-height: 1.3;
}

/* 14.3 Alineacion del menu con el resto de la cabecera.
   El contenedor del menu quedaba 40 px a la derecha del logo, y encima el
   modulo compensa su propio relleno con un margen negativo de -0,7 rem.
   Con esto la primera entrada empieza justo bajo el logo, en 120 px. */
/* El contenedor del menu es #main_menu_contener y el tema le pone
   max-width: 1680px con un selector de id, 80 px menos que el resto de la
   cabecera. Hay que repetir el id para ganarle. */
.fg-header .fg-header__menu #main_menu_contener {
  max-width: var(--fgh-wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fgh-gutter);
  padding-right: var(--fgh-gutter);
}

.fg-header .fg-header__menu .ets_mm_megamenu_content_content {
  margin-left: 0;
  margin-right: 0;
}

/* El primer hijo del <ul> es un `.close_menu` oculto, asi que `:first-child`
   no acertaba con la primera entrada visible.
   Solo en escritorio: en movil el .close_menu SI se ve (es la cabecera del
   cajon) y quitarle el sangrado a la entrada siguiente dejaba PRODUCTOS unos
   pixeles a la izquierda del resto. */
@media (min-width: 992px) {
  .fg-header .ets_mm_megamenu ul.mm_menus_ul > li.close_menu + li > a {
    padding-left: 0;
  }
}

/* 14.4 Con los cinco textos ya alineados con la referencia, la barra puede ir
   al mismo tamano que ella: 13 px, separadores de 1 px por 16 px de alto y el
   grupo centrado dentro de los 1760 px. */
.fg-header .fg-header__trust .container-blockreassurance {
  max-width: var(--fgh-wrap);
  padding: 0 var(--fgh-gutter);
}

.fg-header .fg-header__trust .blockreassurance [class*="col-"] {
  padding: 0 16px;
  border-left: 0;
  position: relative;
}

.fg-header .fg-header__trust .blockreassurance .row > [class*="col-"] + [class*="col-"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background: var(--fgh-line);
}

.fg-header .fg-header__trust .block-title,
.fg-header .fg-header__trust .blockreassurance [class*="col-"] > p {
  font-size: 13px;
}

@media (max-width: 1499px) {
  .fg-header .fg-header__trust .blockreassurance [class*="col-"] { padding: 0 11px; }
  .fg-header .fg-header__trust .block-title,
  .fg-header .fg-header__trust .blockreassurance [class*="col-"] > p { font-size: 12px; }
}

/* 14.5 Con cinco garantias, displayBlock.tpl parte la lista en dos `.row`
   (abre una nueva cada cuatro bloques) y la quinta caia a un segundo renglon.
   Con display:contents las filas dejan de existir a efectos de maquetacion y
   las cinco columnas quedan en una sola linea, sin tocar la plantilla. */
.fg-header .fg-header__trust .blockreassurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.fg-header .fg-header__trust .blockreassurance .row { display: contents; }

.fg-header .fg-header__trust .blockreassurance [class*="col-"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background: var(--fgh-line);
}

.fg-header .fg-header__trust .blockreassurance .row:first-child > [class*="col-"]:first-child::before {
  display: none;
}

/* --------------------------------------------------------------------------
   15. Barra superior: fuera el enlace del Blog
   La referencia solo lleva telefono y Contacto arriba. El enlace sigue en el
   banner "Mini menu" de custombanners; aqui solo se deja de mostrar.
   -------------------------------------------------------------------------- */

.fg-header .fg-header__topbar .custom-html li:has(> a[href*="/blog"]) { display: none; }
.fg-header .fg-header__topbar .custom-html a[href*="/blog"] { display: none; }

/* --------------------------------------------------------------------------
   16. Barra de confianza propia (custombanners)
   blockreassurance 5.1.4 guarda un unico juego de bloques para todas las
   zonas: la tabla psreassurance no distingue por pagina, asi que la barra de
   la cabecera y el bloque de la ficha estaban obligados a decir lo mismo.
   Para separarlos, la barra de arriba pasa a salir de un banner de
   custombanners en displayNavFullWidth, y blockreassurance se queda solo con
   la ficha (Mostrar > Encabezado = Ninguno).
   Las medidas son las mismas que la barra anterior: alto 45, fondo tinte 2,
   separadores de 1 px, icono 18 px, titulo 12,5/600 y texto 12,5/400.
   -------------------------------------------------------------------------- */

.fg-header .fg-header__trust .fg-claims {
  max-width: var(--fgh-wrap);
  margin: 0 auto;
  padding: 0 var(--fgh-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  min-height: 45px;
}

.fg-header .fg-header__trust .fg-claims li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 22px;
  border-left: 1px solid rgba(44, 81, 53, .18);
  min-width: 0;
}

.fg-header .fg-header__trust .fg-claims li:first-child { border-left: 0; }

.fg-header .fg-header__trust .fg-claims svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--fgh-green-700);
}

.fg-header .fg-header__trust .fg-claims b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fgh-ink);
}

.fg-header .fg-header__trust .fg-claims span {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--fgh-ink-soft);
}

/* El envoltorio de custombanners no debe meter ni margenes ni rejilla */
.fg-header .fg-header__trust .cb,
.fg-header .fg-header__trust .cb-wrapper,
.fg-header .fg-header__trust .cb-item,
.fg-header .fg-header__trust .cb-item-content,
.fg-header .fg-header__trust .custom-html { display: contents; }

@media (max-width: 1399px) {
  .fg-header .fg-header__trust .fg-claims li { padding: 9px 16px; }
}

@media (max-width: 991px) {
  .fg-header .fg-header__trust .fg-claims li:nth-child(n+4) { display: none; }
}

/* ==========================================================================
   17. Móvil: correcciones medidas a 360/390/430 px  (08/09/2026)
   Todas las cifras vienen de medir la pagina real, no de estimar.
   ========================================================================== */

@media (max-width: 991px) {

  /* Cuenta y carrito se quedaban pegados al logo con hasta 61 px de hueco
     muerto a su derecha: una regla posterior sin media query devuelve al logo
     flex: 0 0 auto y anula el flex: 1 1 auto de aqui. Se empuja el grupo. */
  .fg-header .fg-header__actions { margin-left: auto; }

  /* Con sesion iniciada, el nombre del cliente se colaba en la fila de iconos
     a 11,5 px y se solapaba 4 px con el logo y 14 px con el carrito. El tema
     lo oculta con .d-none pero una regla del propio tema lo devuelve a
     display:block !important. */
  .fg-header .fg-header__nav2 .user-info > a > span,
  .fg-header .fg-header__nav2 .user-info > a span.hidden-sm-down {
    display: none !important;
  }

  /* custom.css fija #header .logo { height: 65px } por debajo de 767 px, y
     gana por especificidad de ID. La cabecera se iba a 189 px de alto. */
  .fg-header .fg-header__logo img,
  .fg-header .fg-header__logo .logo {
    height: 46px !important;
    max-height: 46px !important;
  }

  /* SIN VELO. Se intento con un pseudoelemento de .fg-header a z-index 9990
     y el panel a 10000, y aun asi el velo se pintaba por encima del menu y lo
     dejaba ilegible (comprobado en video a 430 px). El panel del modulo no
     comparte contexto de apilamiento con la cabecera, asi que esta pelea de
     z-index no se puede ganar desde aqui.
     Se retira. El menu se cierra tocando fuera o con Escape desde
     fg-header.js, que era lo que de verdad faltaba. Si algun dia se quiere
     el velo, hay que crearlo como elemento real colgado de <body>. */

  /* El panel del modulo tiene que ser opaco: sin fondo propio se
     transparentaba sobre la pagina y los enlaces quedaban lavados. */
  .fg-header .ets_mm_megamenu ul.mm_menus_ul.active,
  .fg-header ul.mm_menus_ul.active {
    background: var(--fgh-white);
  }

  /* La X de cerrar tenia 15,6 x 15,6 px de zona pulsable */
  .fg-header .mm_menus_ul .close_menu .pull-right {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
  }

  .fg-header .mm_menus_ul .close_menu .mm_menus_back_icon { font-size: 22px; }

  /* Zonas pulsables por debajo del minimo de 44 px */
  .fg-header .fg-header__topbar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .fg-header .fg-header__nav2 .user-info > a,
  .fg-header .fg-header__nav2 .cart-contain { min-height: 44px; }

  .fg-header .mm_menus_li > span.arrow { width: 44px; height: 44px; }

  .fg-header .mm_columns_ul a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   18. Cabecera compacta al bajar
   fg-header.js pone .fg-header--compact cuando el usuario baja mas de 80 px.
   Se retiran la barra superior y la de garantias, que no aportan mientras se
   navega, y se deja logo, buscador y acciones.
   -------------------------------------------------------------------------- */

.fg-header .fg-header__topbar,
.fg-header .fg-header__trust {
  transition: max-height .25s ease, opacity .2s ease;
  /* Holgado a proposito: en movil la barra superior puede ir a dos lineas y
     con un maximo justo se cortaria. Solo tiene que ser mayor que el alto
     real para que la transicion funcione. */
  max-height: 140px;
  opacity: 1;
  overflow: hidden;
}

.fg-header.fg-header--compact .fg-header__topbar,
.fg-header.fg-header--compact .fg-header__trust {
  max-height: 0;
  opacity: 0;
  border-bottom-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fg-header .fg-header__topbar,
  .fg-header .fg-header__trust { transition: none; }
}

/* --------------------------------------------------------------------------
   19. Cajon del menu en movil: cabecera del panel
   La fila de cerrar quedaba como un bloque verde alto y vacio con una flecha
   suelta a la derecha. Se le devuelve el rotulo y se ajusta el alto.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .fg-header .mm_menus_ul .close_menu {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 16px;
    background: var(--fgh-green-900);
  }

  .fg-header .mm_menus_ul .close_menu .pull-left {
    display: block !important;
    color: var(--fgh-ink-invert);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
  }

  .fg-header .mm_menus_ul .close_menu .mm_menus_back_icon { color: var(--fgh-ink-invert); }
}

/* --------------------------------------------------------------------------
   20. Cajón del menú: alineado con la hamburguesa
   El panel es fixed y arranca en el borde superior, mientras que la
   hamburguesa vive en la fila principal, por debajo de la barra superior:
   el rotulo MENU quedaba unos 40 px mas alto que el boton que lo abre.
   Se retira la barra superior mientras el menu esta abierto y se iguala la
   cabecera del panel al alto de la fila principal, con lo que ambos quedan
   a la misma altura tanto arriba del todo como con la pagina desplazada.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .fg-header:has(.mm_menus_ul.active) .fg-header__topbar {
    max-height: 0;
    opacity: 0;
    border-bottom-width: 0;
  }

  .fg-header .mm_menus_ul .close_menu {
    min-height: 68px;
    padding-left: var(--fgh-gutter);
    padding-right: var(--fgh-gutter);
  }

  /* Y la primera entrada recupera el mismo sangrado que las demas */
  .fg-header .ets_mm_megamenu ul.mm_menus_ul > li > a {
    padding-left: var(--fgh-gutter);
  }
}

/* ==========================================================================
   21. La barra de confianza fuera de .fg-header  (15/09/2026)

   El banner de custombanners cuelga del hook displayNavFullWidth, y ese hook
   lo llama tambien la cabecera reducida del carrito y del proceso de compra
   (body#checkout), que no lleva la clase .fg-header. Alli las reglas de la
   seccion 16 no llegaban: la lista se quedaba en display:block y los SVG, que
   solo traen viewBox y ningun width/height, se estiraban al ancho completo
   del contenedor. Cinco iconos de 2.545 px daban una cabecera de 12.856 px
   que empujaba el carrito fuera de la pantalla y dejaba la pagina en blanco.

   Por eso el aspecto base de la barra va sin depender de .fg-header, con sus
   propias variables para que resuelvan en cualquier plantilla. La seccion 16
   se queda como afinado dentro de la cabecera normal.
   ========================================================================== */

.fg-claims {
  --fgc-green-700: #3a6b45;
  --fgc-ink: #2a322c;
  --fgc-ink-soft: #6b756e;

  max-width: 1760px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  min-height: 45px;
}

.fg-claims li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 22px;
  border-left: 1px solid rgba(44, 81, 53, .18);
  min-width: 0;
}

.fg-claims li::before { content: none; }
.fg-claims li:first-child { border-left: 0; }

/* La causa del desastre: sin medidas, un SVG con solo viewBox ocupa todo. */
.fg-claims svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--fgc-green-700);
}

.fg-claims b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fgc-ink);
}

.fg-claims span {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--fgc-ink-soft);
}

/* Fondo a todo lo ancho donde la barra no esta dentro de .fg-header__trust.
   Dentro de la cabecera este mismo contenedor es display:contents (seccion
   16), y un elemento asi no pinta fondo, de modo que la regla no molesta. */
.cb.displayNavFullWidth:has(.fg-claims) {
  background: #e6efe9;
  border-bottom: 1px solid #dde4df;
}

@media (max-width: 1399px) {
  .fg-claims li { padding: 9px 16px; }
}

/* Por debajo de 992 la cabecera normal esconde su barra de confianza
   (seccion 8). En el carrito se hace lo mismo, para que el movil no empiece
   la compra con cinco reclamos apilados. */
@media (max-width: 991px) {
  .cb.displayNavFullWidth:has(.fg-claims) { display: none; }
}