:root{--trebol-green:#24af0f;--trebol-green-dark:#1a8f0c;--trebol-header-border:#e5e7eb;--trebol-menu-bg:#e5e5e5;--trebol-text:#2d3340;--trebol-text-muted:#6b7280;--trebol-header-max:1500px}
header>.container,header .sticky-desktop-wrapper .header-top>.container,#header .container{max-width:var(--trebol-header-max)!important;width:100%!important;padding-left:20px;padding-right:20px}
#desktop-header{border-bottom:none!important;box-shadow:none!important}
#trebol-topbar.trebol-topbar{background:var(--trebol-green);color:#fff;font-family:nunito,sans-serif;font-size:13px;width:100%}
.trebol-topbar__container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;max-width:var(--trebol-header-max);margin:0 auto;padding:8px 20px;box-sizing:border-box}
.trebol-topbar__left,.trebol-topbar__right{display:flex;align-items:center;flex-wrap:nowrap;gap:14px}
.trebol-topbar__left{flex:1 1 auto;min-width:0}
.trebol-topbar__right{flex:0 0 auto;justify-content:flex-end}
.trebol-topbar__phone,.trebol-topbar__link{color:#fff!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.trebol-topbar__phone:hover,.trebol-topbar__link:hover{color:#fff!important;opacity:.92}
.trebol-topbar__shipping{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.trebol-topbar__link--plus{padding-left:14px;border-left:1px solid rgba(255,255,255,.35);font-size:12px}
#top-links-bar-wrapper.trebol-topbar-hooks,#header .header-nav{display:none!important}
.trebol-header-main{background:#fff;border-bottom:none;padding:14px 0}
.trebol-header-main__container{max-width:var(--trebol-header-max)}
.trebol-header-main__row{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%}
.trebol-header-main__logo{flex:0 0 auto;min-width:160px}
#desktop_logo img,#desktop_logo .logo{max-height:68px;width:auto;height:auto}
.trebol-header-main__search{flex:1 1 420px;min-width:200px;max-width:680px;margin:0 auto}
.trebol-header-main__search .search-widget,.trebol-header-main__search #search_widget,.trebol-header-main__search form{width:100%;margin:0}
.trebol-header-main__search .input-group,.trebol-search-widget__group{display:flex;width:100%;border:1px solid #d1d5db;border-radius:999px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.trebol-header-main__search .form-search-control,.trebol-search-widget__input{border:none!important;height:46px!important;padding:0 22px!important;font-size:15px!important;flex:1;min-width:0;box-shadow:none!important}
.trebol-header-main__search .search-btn,.trebol-search-widget__btn{width:46px!important;min-width:46px!important;height:46px!important;border:none!important;border-radius:50%!important;margin:4px 4px 4px 0!important;background:var(--trebol-green)!important;color:#fff!important;display:flex!important;align-items:center;justify-content:center}
.trebol-header-main__actions{flex:0 0 auto;display:flex;align-items:center}
.trebol-header-main__actions>.row,.trebol-header-actions{display:flex!important;align-items:center!important;gap:18px!important;margin:0!important;flex-wrap:nowrap!important}
.trebol-header-main .header-btn{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;margin:0!important;padding:2px 6px!important;min-width:58px;background:transparent!important;border:none!important}
.trebol-header-main .header-btn .icon,.trebol-header-main .header-btn>i.fa{font-size:24px!important;color:#5c4d7a!important}
.trebol-header-main .header-btn .title{font-size:11px!important;font-weight:600!important;color:var(--trebol-text-muted)!important}
.trebol-header-action--account #header-user-btn{display:flex;flex-direction:row}
.trebol-header-action--account .header-user-btn:not(:first-of-type),.trebol-header-action--account .header-user-btn[href*=create_account]{display:none!important}
.trebol-header-action--account .header-user-btn .title{font-size:0!important}
.trebol-header-action--account .header-user-btn .title::after{content:"Cuenta";font-size:11px!important}
.enviosgratis{display:none!important}
.trebol-megamenu-bar{display:block!important;width:100%;background:var(--trebol-menu-bg);/* Force grey inside ETS megamenu */border-bottom:none;position:relative;z-index:100}
.trebol-megamenu-bar .ets_mm_megamenu,
.trebol-megamenu-bar .ets_mm_megamenu_content,
.trebol-megamenu-bar .ets_mm_megamenu_content_content{background:var(--trebol-menu-bg)!important;}
.trebol-megamenu-bar .ets_mm_megamenu{width:100%}
.trebol-megamenu-bar .ets_mm_megamenu_content>.container{max-width:var(--trebol-header-max);width:100%;padding:0 20px}
.trebol-megamenu-bar .ets_mm_megamenu_content_content{display:flex;align-items:stretch;min-height:48px}
@media (min-width:992px){
.trebol-megamenu-bar .ybc-menu-toggle{display:none!important}
.trebol-megamenu-bar .mm_menus_ul{display:flex!important;flex-wrap:nowrap;align-items:stretch;width:100%;margin:0;padding:0;list-style:none}
.trebol-megamenu-bar .mm_menus_ul>li.close_menu{display:none!important}
.trebol-megamenu-bar .mm_menus_li{display:flex;align-items:center}
.trebol-megamenu-bar .mm_menus_li>a.ets_mm_url{display:flex;align-items:center;height:48px;padding:0 18px;font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none}
#desktop-header{display:block!important}
#mobile-header{display:none!important}
}
.nuevo-h1{background:#fff;border-bottom:1px solid var(--trebol-header-border)}
.nuevo-h1 h1{font-size:12px!important;color:#6b7280!important;font-weight:500!important;text-align:center;margin:0;padding:6px 12px}
#header.sticky .trebol-topbar{display:none}
@media (max-width:991px){#trebol-topbar,.trebol-header-main,.trebol-megamenu-bar{display:none!important}}
@media (max-width:1199px){.trebol-topbar__link--plus{display:none}#desktop_logo img,#desktop_logo .logo{max-height:56px}.trebol-header-main__row{gap:16px}}

/* --- Buscador: solo icono lupa (anula custom.css "Buscar") --- */
.trebol-header-main #search_widget form button.search-btn i,
.trebol-header-main .trebol-search-widget__btn i {
  font-family: FontAwesome !important;
  font-size: 17px !important;
  font-weight: normal !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}
.trebol-header-main #search_widget form button.search-btn i:before,
.trebol-header-main .trebol-search-widget__btn i:before {
  content: "\f002" !important;
  font-family: FontAwesome !important;
  font-weight: normal !important;
}
.trebol-header-main #search_widget form button.search-btn .btn-text,
.trebol-header-main #search_widget form button.search-btn span:not(.sr-only):not(.fa) {
  display: none !important;
}

/* --- Barra menú: borde verde 2px --- */
.trebol-megamenu-bar {
  border-bottom: 2px solid var(--trebol-green) !important;
  background: var(--trebol-menu-bg) !important;
}

/* Enlaces horizontales: fondo gris (excepto Categorías y Promociones) */
@media (min-width: 992px) {
  .trebol-megamenu-bar .mm_menus_ul > li.mm_menus_li:not(.mm_menus_li_tab):not(.promocionesMenu) > a.ets_mm_url {
    background: #eceff3 !important;
    color: var(--trebol-text) !important;
    margin: 0 1px;
  }
  .trebol-megamenu-bar .mm_menus_ul > li.mm_menus_li:not(.mm_menus_li_tab):not(.promocionesMenu) > a.ets_mm_url:hover {
    background: #dfe3e8 !important;
    color: var(--trebol-green) !important;
  }

  /* Categorías (menú vertical / primera pestaña): verde */
  .trebol-megamenu-bar .mm_menus_ul > li.mm_menus_li.mm_menus_li_tab > a.ets_mm_url {
    background: var(--trebol-green) !important;
    color: #fff !important;
    margin: 0;
    min-width: 140px;
    justify-content: center;
  }
  .trebol-megamenu-bar .mm_menus_ul > li.mm_menus_li.mm_menus_li_tab > a.ets_mm_url:hover {
    background: var(--trebol-green-dark) !important;
    color: #fff !important;
  }
  .trebol-megamenu-bar .mm_menus_ul > li.mm_menus_li.mm_menus_li_tab > a.ets_mm_url i {
    color: #fff !important;
  }

  /* Promociones: rojo + icono fuego */
  .trebol-megamenu-bar .mm_menus_li.promocionesMenu > a.ets_mm_url {
    background: #e30613 !important;
    color: #fff !important;
    gap: 8px;
  }
  .trebol-megamenu-bar .mm_menus_li.promocionesMenu > a.ets_mm_url:hover {
    background: #c40510 !important;
    color: #fff !important;
  }
  .trebol-megamenu-bar .mm_menus_li.promocionesMenu > a.ets_mm_url .mm_menu_content_title::before {
    content: "\f06d";
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 8px;
    font-size: 15px;
    display: inline-block;
  }
}

/* --- Fix lupa: que quede dentro del pill --- */
.trebol-header-main__search .input-group,
.trebol-search-widget__group {
  padding-right: 4px !important;
  box-sizing: border-box;
}

.trebol-header-main #search_widget form button.search-btn,
.trebol-header-main__search .search-btn,
.trebol-search-widget__btn {
  margin: 0 !important;
  border-radius: 999px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden;
}

.trebol-header-main #search_widget form button.search-btn i,
.trebol-header-main__search .search-btn i,
.trebol-search-widget__btn i {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  width: auto !important;
}

/* --- Tipografias menu/header (Nunito) --- */
#trebol-topbar,
#trebol-topbar * ,
.trebol-header-main,
.trebol-header-main * ,
.trebol-megamenu-bar,
.trebol-megamenu-bar * {
  font-family: 'Nunito', nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

.trebol-megamenu-bar .mm_menus_li > a.ets_mm_url,
.trebol-megamenu-bar .mm_menu_content_title {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.trebol-header-main__search .form-search-control {
  font-weight: 500 !important;
}

/* --- Fix iconos FontAwesome (barras, lupa, etc.) --- */
#trebol-topbar i.fa,
#trebol-topbar i.fas,
#trebol-topbar i.fab,
.trebol-header-main i.fa,
.trebol-header-main i.fas,
.trebol-header-main i.fab,
.trebol-megamenu-bar i.fa,
.trebol-megamenu-bar i.fas,
.trebol-megamenu-bar i.fab {
  font-family: FontAwesome !important;
  font-style: normal;
  font-weight: normal;
}
