/* Ruta: wp-content/themes/storefront-moldesintermextienda/assets/css/header.css
   Responsabilidad: Estilos del header custom sobre Storefront (requiere layout.css para variables). */

/* Topbar */
.smi-topbar{
  background: rgba(0,0,0,.15);
  color: var(--text-inv);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.smi-topbar__inner{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding: 8px 0;
}
.smi-topbar__item{
  font-size: 12px;
  opacity: .95;
  text-decoration:none;
}
.smi-topbar__item:hover{ text-decoration: underline; }

/* Header full width real */
.smi-has-custom-header .site-header{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0 !important;

  background: linear-gradient(180deg, var(--choco-800), var(--choco-700));
  color: var(--text-inv);
  border-bottom: 1px solid rgba(255,255,255,.08);

  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

/* Usa el gutter interno del sitio en el contenedor del header */
.smi-has-custom-header .site-header .col-full{
  width: min(1100px, calc(100vw - (var(--smi-gutter) * 2)));
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;

  /* Layout flex: 3 columnas alineadas verticalmente */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}

/* Logo (branding) - Columna 1 */
.smi-has-custom-header .site-header .site-branding {
  flex: 0 0 auto;
  margin: 0;
}

/* Buscador - Columna 2 (centrado, toma espacio restante) */
.smi-has-custom-header .site-header .site-search {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  max-width: 520px;
}

/* Carrito - Columna 3 */
.smi-has-custom-header .site-header .site-header-cart {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: center;
}

/* Branding */
.smi-branding{
  display:flex;
  align-items:center;
  gap:12px;
}
.smi-branding__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--text-inv);
}
.smi-branding__text{
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 26px;
  letter-spacing: .4px;
}

/* Si hay custom logo, controla tamaño */
.smi-branding .custom-logo{
  max-height: 48px;
  width: auto;
}

/* Search */
.smi-header-search{
  margin-left: auto;
}
.smi-header-search form{
  display:flex;
  gap:8px;
  align-items:center;
}
.smi-header-search input[type="search"]{
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.20);
  color: var(--text-inv);
  padding: 10px 10px;
  outline: none;
}
.smi-header-search input[type="search"]::placeholder{
  color: rgba(245,239,233,.75);
}
.smi-header-search button,
.smi-header-search input[type="submit"]{
  border-radius: 8px;
  background: var(--gold-500);
  color: #23160f;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
  border: 0;
  padding: 10px 12px;
}

/* Cart */
.smi-header-cart{
  margin-left: 14px;
}
.smi-header-cart__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--text-inv);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.16);
}
.smi-header-cart__count{
  font-weight: 900;
  font-size: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Nav (Storefront primary menu) */
.smi-has-custom-header .main-navigation{
  background: transparent;
}
.smi-nav__link{
  font-size: 13px;
  opacity: .92;
  color: #2a2a2a !important;
}
.smi-nav__link:hover{
  opacity: 1;
  text-decoration: underline;
  color: #1a1a1a !important;
}

/* Subheader */
.smi-subheader{
  background: #fff;
  border-bottom: 1px solid #eee;
}
.smi-subheader__inner{
  padding: 10px 0;
}
.smi-subheader__promo{
  margin:0;
  font-size: 12px;
  letter-spacing: .3px;
  color: #2a2a2a;
}

/* Responsive: en pantallas chicas, apila elementos */
@media (max-width: 980px){
  .smi-topbar__inner{
    flex-wrap: wrap;
    gap: 10px;
  }
  .smi-header-search{
    width: 100%;
    margin: 10px 0 0;
  }
  .smi-header-search form{
    width: 100%;
  }
  .smi-header-search input[type="search"]{
    width: 100%;
  }
}