/* ===============================
   Estilos generales del header
=================================*/
body {
  padding: 0;
  margin: 0;
  background-color: red;
}

.custom-header {
  font-family: sans-serif;
  position: relative;
  z-index: 100;
}

.header-top {
  background: #101547;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 15px;
  font-family: 'Instrument Sans', sans-serif !important;
  margin: 0;
}
.header-top p {
  margin: 0 !important;
  padding: 10px;
  font-family: 'Instrument Sans', sans-serif !important;
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
  padding: 10px 100px;
  gap: 20px;
}

.logo { flex-shrink: 0; max-width: 150px; }
.custom-header .logo img { height: auto; max-width: 100%; }
.ast-site-header-cart { margin-left: auto; flex-shrink: 0; }

/* -------------------------------
   Buscador
---------------------------------*/
.search-bar { flex: 1; margin: 0 20px; display: flex; width: auto; max-width: 100%; }
.search-bar .yith-ajaxsearchform {
  width: 100% !important;
  max-width: 100% !important;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.search-bar input,
.search-bar input[type="text"] { flex: 1; padding: 8px; border: 0; }
.search-bar button { background: white; border: none; padding: 8px; }
.search-bar input:focus, .search-bar button:focus { outline: none; box-shadow: none; }

/* -------------------------------
   Menú principal y megamenú
---------------------------------*/
nav.main-nav { padding: 0 100px; }
.main-nav { background: #fff; border-top: 1px solid #ccc; position: relative; z-index: 200; }
.main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.main-nav li { position: static; }
.main-nav > ul > li > a {
  display: block;
  padding: 15px 20px 15px 0;
  text-decoration: none;
  color: #000;
  transition: color .3s ease, border-bottom .3s ease;
}
.main-nav > ul > li > a:hover {
  color:#11113E;
  border-bottom:1px solid #11113E;
  font-weight:600;
}

/* Mega menú: única definición (evitar duplicados) */
.main-nav .dropdown {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  background:#fff;
  z-index:9999;
  padding:20px 100px;
  box-sizing:border-box;
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:40px;
}
.main-nav li.has-dropdown:hover .dropdown { display:flex; }

/* Columna izquierda separador */
.por-tipo-de-uso { border-right: 1px solid #11113e; }

/* “Todas las categorías” */
.main-nav .todas-categorias-dropdown {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  background:#fff;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
  z-index:9999;
  padding:10px 95px;
  flex-direction:column;
  border-top:1px solid #11113e;
}
.main-nav .has-dropdown:hover .todas-categorias-dropdown { display:block; }
.main-nav .todas-categorias-dropdown ul {
  padding:0;
  margin:0;
  list-style:none;
  gap:10px;
  display:flex;
  flex-wrap:wrap;
}
.main-nav .todas-categorias-dropdown ul li {
  padding:8px 16px;
  background:#f1f1f1;
  border-radius:20px;
  cursor:pointer;
  font-size:14px;
  transition:all .2s ease;
  border:1px solid transparent;
  text-align:center;
  white-space:nowrap;
}
.main-nav .todas-categorias-dropdown ul li:hover {
  background:#11113e;
  color:#fff !important;
}

/* -------------------------------
   Filtros paso a paso (cascada)
---------------------------------*/
.filtro-pasos-wrap { display:flex; gap:40px; align-items:flex-start; }
.filtro-pasos h4 { margin:0 0 10px; font-weight:600; }
.paso-container { display:none; flex-direction:column; gap:8px; opacity:0; transition:opacity .25s ease; }
.paso-container.shown { display:flex; opacity:1; }
.paso-container.disabled { pointer-events:none; opacity:.25; }

.opcion {
  padding:8px 16px;
  background:#f1f1f1;
  border-radius:20px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
  text-align:center;
  white-space:nowrap;
}
.opcion:hover { background: #11113e; color: #fff; }
.opcion.selected { background:#101547; color:#fff; border:1px solid #101547; }

.column.filtro-pasos.tiene-contenido { border-right: 1px solid #11113e; }
.column.filtro-pasos { min-height: 100%; }

/* -------------------------------
   Responsive
---------------------------------*/
.column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 20px;
}

/* Hover para los enlaces de tipo de uso */
.por-tipo-de-uso a {
  display: inline-block;
  padding: 8px 16px;
  background: #f1f1f1;
  border-radius: 20px;
  text-decoration: none;
  color: #000;
  transition: all 0.2s ease;
  border: 1px solid transparent;
 
  text-transform: lowercase;
}
.por-tipo-de-uso h4{
	margin: 0px 0px 10px;
}

.por-tipo-de-uso a::first-letter { text-transform: capitalize; }
.por-tipo-de-uso a:hover {
  background: #101547;
  color: #fff;
  border-color: #101547;
}

.main-nav .todas-categorias-dropdown ul li:hover a { color: #fff !important; }

/* Eliminar borde a la última columna visible */
.filtro-pasos:last-of-type { border-right: none; }
.column.filtro-pasos:empty { border-right: none; }

/* Botón contacto */
.btn-contacto-header {
  background-color: #001970;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 500;
  margin: 0 10px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.btn-contacto-header:hover { background-color: #0033a0; color:white; }

/* Icono flecha */
.has-dropdown > a i {
  margin-left: 6px;
  font-size: 0.7em;
  vertical-align: middle;
}

/* Quitar tarjetas de pago debajo de producto */
fieldset.ast-single-product-payments.ast-inherit-color-version { display: none; }

/* -------------------------------
   Mobile
---------------------------------*/
@media (max-width: 991px) {
  .header-main { padding: 10px 20px; flex-wrap: wrap; }
  nav.main-nav { padding: 0 20px; }
  .main-nav .dropdown { flex-direction: column; padding: 20px; gap: 20px; }
  .filtro-pasos-wrap { flex-direction: column; gap: 16px; }
}

/* ===== MOBILE MENU (solo mobile) ===== */
@media (max-width: 991px){
  /* Ocultar nav de escritorio en mobile */
  .main-nav { display: none; }

  /* Mostrar botón hamburguesa */
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:40px; border:0; border-radius:6px;
    background:#101547; color:#fff; cursor:pointer; margin-left:8px;
  }

  /* Overlay */
  .nav-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    opacity:0; visibility:hidden; transition:.25s; z-index: 9998;
  }
  body.nav-open .nav-overlay{ opacity:1; visibility:visible; }

  /* Panel lateral */
  .mobile-nav{
    position:fixed; top:0; left:0; bottom:0;
    width:min(86%, 360px); background:#fff; transform:translateX(-100%);
    transition:transform .25s ease; z-index: 9999; overflow:auto;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  body.nav-open .mobile-nav{ transform:translateX(0); box-shadow: 12px 0 24px rgba(0,0,0,.15); }

  .mobile-nav .nav-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:2;
  }
  .mobile-nav .menu-close{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border:0; background:#f2f2f2; border-radius:8px;
  }

  .mobile-search{ padding: 12px 16px; border-bottom:1px solid #f1f1f1; }

  .mobile-menu{ list-style:none; padding:0; margin:0; }
  .mobile-menu > li > a,
  .mobile-menu > li > button.parent{
    display:block; width:100%; text-align:left; padding:14px 16px;
    border:0; background:none; color:#111; border-bottom:1px solid #f1f1f1;
    font: inherit; cursor:pointer;
  }
  .mobile-menu > li > a{ cursor:pointer; }

  .mobile-menu .has-sub > .parent .fa-chevron-down{ transition: transform .2s; }
  .mobile-menu .has-sub.open > .parent .fa-chevron-down{ transform: rotate(180deg); }

  .mobile-menu .sub{
    display:none; padding: 12px 16px; border-bottom:1px solid #f1f1f1;
    /* chips */
  }
  .mobile-menu .has-sub.open > .sub{ display:block; }

  /* Estilo de chips/enlaces dentro de submenús */
  .mobile-menu .sub a{
    display:inline-block; margin:0 8px 8px 0; padding:8px 12px;
    background:#f1f1f1; border-radius:20px; text-decoration:none; color:#111; border:1px solid transparent;
  }
  .mobile-menu .sub a:hover{ background:#101547; color:#fff; border-color:#101547; }
}

/* Desktop: no mostrar botón ni mobile nav */
@media (min-width: 992px){
  .menu-toggle, .nav-overlay, .mobile-nav{ display: none !important; }
}


/* ===== Header mobile: logo | buscador | menú ===== */
@media (max-width: 991px){

  /* ocultamos Contacto y carrito (ya tenés alternativas en mobile) */
  .contact-link,
  .custom-cart-icon{
    display: none !important;
  }

  /* header en una sola fila */
  .header-main{
    display: grid;
    grid-template-columns: 30% 40% 20%; /* logo | search | menu */
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
  }

  /* logo compacto */
  .logo{ margin: 0; max-width: 120px; }
  .logo img{ max-height: 36px; height: auto; width: auto; }

  /* buscador ocupa todo el medio */
  .search-bar{
    margin: 0;
    width: 100%;
  }
  .search-bar .yith-ajaxsearchform{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* botón menú (hamburguesa) a la derecha */
  .menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: #101547;
    color: #fff;
  }
}