.gsp-header { background: var(--gsp-black); color: var(--gsp-white); }
.gsp-header a {
  color: var(--gsp-white);
}

.gsp-header a:hover {
  color: var(--gsp-red);
}
.gsp-header-top {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.gsp-header-accent { height: 3px; background: var(--gsp-red); }

/* Logo sizing */
.gsp-header-left .logo img { height: 28px; }

/* Normalize logo display */
.gsp-header .logo {
  display: inline-block;
  line-height: 0;
}

.gsp-header-left .logo img.large {
  max-height: 40px;
  max-width: 280px;
  height: auto;
  width: auto;
}

.gsp-header .logo img.small {
  display: none; /* hide unless needed */
}
/* Search container flex behavior */
.gsp-header-center {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0; /* allows flex children to shrink */
}

/* Search form layout */
.gsp-header-center .form-search {
  display: flex;
  flex: 1;
  gap: 8px;
  width: 100%;
}

.gsp-header-center .form-search .input-box {
	flex: 1;
	min-width: 0;
}

/* Search input responsiveness */
.gsp-header-center .form-search input[type="text"],
.gsp-header-center .form-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid var(--gsp-gray-300);
}

/* Actual input (RWD uses #search) */
.gsp-header-center .form-search .input-box input#search {
  width: 100%;     /* override fixed widths in styles.css */
  max-width: none; /* neutralize legacy caps */
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--gsp-gray-300);
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}
/* Override legacy #search width from styles.css */
.gsp-header-center .form-search .input-box input#search.input-text {
  width: 100%;
  max-width: none !important;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}
/* Search button */
.gsp-header-center .form-search button {
  white-space: nowrap;
  padding: 10px 14px;
  font-weight: 600;
  background: var(--gsp-red);
  color: var(--gsp-white);
  border: none;
  border-radius: 6px;
}

.gsp-header-center .form-search button:hover {
  background: #C40812;
}

/* Neutralize legacy input-text width only inside header */
.gsp-header .input-text { width: 100%; max-width: none; }

/* Account/cart links */
.gsp-header-right { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.gsp-cart-link .gsp-cart-anchor { position: relative; padding-right: 22px; }
.gsp-cart-link .gsp-cart-anchor .badge { position: absolute; right: 0; top: -6px; }

.gsp-toplinks {
  position: relative;
}

.gsp-toplinks-toggle {
  background: none;
  border: none;
  color: var(--gsp-white);
  font-weight: 600;
  cursor: pointer;
}

.gsp-toplinks-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--gsp-black);
  border: 1px solid var(--gsp-gray-300);
  border-radius: 6px;
  padding: 10px;
  display: none;
  z-index: 1000;
}

.gsp-toplinks-menu a {
  display: block;
  color: var(--gsp-white);
  padding: 6px 10px;
  text-decoration: none;
}

.gsp-toplinks-menu a:hover {
  background: var(--gsp-red);
}

.gsp-toplinks.open .gsp-toplinks-menu {
  display: block;
}

/* Navigation */
.gsp-nav { display: flex; align-items: center; }
.gsp-nav .nav-primary > li > a {
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 600;
}
.gsp-nav .nav-primary > li > a:hover { background: var(--gsp-gray-100); }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .gsp-header-top { grid-template-columns: 1fr 1.6fr 1fr; }
}
@media (max-width: 768px) {
  .gsp-header-top { grid-template-columns: 1fr; gap: 12px; }
  .gsp-header-center form { width: 100%; }
  .gsp-header-right { justify-content: flex-start; }
  .gsp-header .logo img.large { display: none; }
  .gsp-header .logo img.small {
    display: block;
    height: 28px;
  }
  .gsp-header-center .form-search {
    flex-direction: column;
  }

  .gsp-header-center .form-search input[type="text"],
  .gsp-header-center .form-search input[type="search"],
  .gsp-header-center .form-search button {
    width: 100%;
  }

}