/* Shared header and navigation. Header rows use Bootstrap containers plus Flexbox. */
.srebro-utility {
  background: var(--srebro-color-graphite); color: var(--srebro-color-utility-text); font-size: 13px; letter-spacing: .02em;
  .container { display: flex; min-height: 36px; align-items: center; justify-content: space-between; }
  .srebro-utility__note { color: var(--srebro-color-utility-note); }
  .srebro-utility__links { display: flex; align-items: center; gap: var(--srebro-space-5); }
  .srebro-utility__links a { margin-left: 0; }
  a { color: var(--srebro-color-utility-link); &:hover { color: var(--srebro-color-white); } }
  i { margin-right: 7px; }
}
.srebro-header {
  background: var(--srebro-color-white); border-bottom: 1px solid var(--srebro-color-line);
  .srebro-header__inner {
    display: flex; min-height: 0; align-items: center; justify-content: space-between; gap: var(--srebro-space-5);
    padding-top: var(--srebro-space-3); padding-bottom: var(--srebro-space-3);
    &:before, &:after { display: none !important; }
  }
  .srebro-brand { flex: 0 0 216px; min-width: 0; }
  .srebro-logo { display: block; width: 100%; max-width: 216px; flex: 0 0 216px; img { display: block; width: 100%; height: auto; } }
  .srebro-brand__tagline { display: block; margin-top: var(--srebro-space-1); color: var(--srebro-color-steel); font-size: var(--srebro-text-sm); line-height: 1.3; }
  .srebro-header__tools { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: var(--srebro-space-5); }
  .srebro-search { display: flex; flex: 1 1 auto; min-width: 120px; justify-content: flex-start; #search { width: 100%; max-width: none; } }
  .input-group { display: flex; border-bottom: 1px solid var(--srebro-color-search-line); }
  .input-group .form-control { height: 44px; padding: 8px 4px; border: 0; box-shadow: none; font-size: var(--srebro-text-base); }
  .input-group-btn { width: 46px; .btn { width: 46px; height: 44px; border: 0; background: none; color: var(--srebro-color-graphite); font-size: 17px; } }
  .srebro-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
  .srebro-action { position: relative; display: inline-flex; width: var(--srebro-header-icon-size); height: var(--srebro-header-icon-size); align-items: center; justify-content: center; color: var(--srebro-color-graphite); font-size: 19px; &:hover, &:focus { color: var(--srebro-color-steel); text-decoration: none; } }
  .srebro-icon { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .srebro-action__count { position: absolute; top: 1px; right: 0; display: flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 4px; border-radius: var(--srebro-radius-pill); background: var(--srebro-color-steel); color: var(--srebro-color-white); font-family: var(--srebro-font-body); font-size: var(--srebro-text-xs); font-weight: 700; line-height: 1; }
  .srebro-action--cart #cart { width: var(--srebro-header-icon-size); }
  .srebro-action--cart #cart > .btn { position: relative; display: flex; width: var(--srebro-header-icon-size); height: var(--srebro-header-icon-size); align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--srebro-color-graphite); box-shadow: none; font-size: 19px; &:hover, &:focus { color: var(--srebro-color-steel); } }
  .srebro-action--cart #cart-total { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
  .srebro-action--cart #cart > .btn .srebro-action__count { top: 1px; right: 0; }
  .srebro-header-client {
    position: relative; flex: 0 0 auto;
    summary { display: flex; min-height: 44px; align-items: center; gap: 7px; cursor: pointer; list-style: none; color: var(--srebro-color-graphite); font-size: var(--srebro-text-md); &::-webkit-details-marker { display: none; } &::after { content: '⌄'; color: var(--srebro-color-muted); font-size: 16px; } }
  }
  .srebro-header-client[open] summary { color: var(--srebro-color-steel); }
  .srebro-header-client__menu {
    position: absolute; z-index: var(--srebro-z-popover); top: calc(100% + 1px); right: 0; display: flex; width: 260px; flex-direction: column;
    padding: var(--srebro-space-2); border: 1px solid var(--srebro-color-line); border-radius: var(--srebro-radius-card); background: var(--srebro-color-white); box-shadow: var(--srebro-shadow-popover);
    a { padding: 10px 12px; border-radius: var(--srebro-radius-control); color: var(--srebro-color-ink); font-size: var(--srebro-text-md); &:hover, &:focus-visible { background: var(--srebro-color-porcelain); color: var(--srebro-color-graphite); } }
  }
}
.srebro-nav {
  background: var(--srebro-color-white); border-bottom: 1px solid var(--srebro-color-line);
  .srebro-nav__inner { display: flex; min-height: 48px; align-items: center; gap: 20px; &:before, &:after { display: none !important; } }
}
#menu.navbar {
  flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0; border: 0; border-radius: 0; background: none;
  .container { display: block; text-align: center; }
  .navbar-header { display: none; }
  .navbar-collapse { padding: 0; border: 0; box-shadow: none; }
  .navbar-nav { display: flex; float: none; align-items: center; gap: clamp(18px, 2.4vw, 38px); margin: 0; }
  .navbar-nav > li { display: block; float: none; margin: 0; }
  .navbar-nav > li > a { padding: 14px 0; color: var(--srebro-color-graphite); font-size: var(--srebro-text-md); letter-spacing: .01em; &:hover { background: none; color: var(--srebro-color-steel); } }
  .dropdown-menu { border: 1px solid var(--srebro-color-line); border-radius: var(--srebro-radius-card); box-shadow: var(--srebro-shadow-menu); a { padding: 9px 20px; } }
}
@media (max-width: 991px) {
  .srebro-header { .srebro-brand { flex-basis: 180px; } .srebro-header__inner { gap: var(--srebro-space-4); } .srebro-header__tools { gap: var(--srebro-space-3); } }
  #menu.navbar .navbar-nav { gap: clamp(12px, 1.8vw, 22px); }
}
@media (max-width: 767px) {
  .srebro-utility { .container { justify-content: center; } .srebro-utility__note { display: none; } .srebro-utility__links { justify-content: center; } .srebro-utility__links a { margin: 0 9px; } }
  .srebro-header {
    .srebro-header__inner { align-items: center; flex-wrap: wrap; gap: var(--srebro-space-2) var(--srebro-space-3); padding-top: var(--srebro-space-3); padding-bottom: var(--srebro-space-3); }
    .srebro-brand { flex: 1 1 auto; }
    .srebro-logo { width: 150px; max-width: 100%; flex: 0 1 150px; }
    .srebro-brand__tagline { margin-top: 2px; font-size: var(--srebro-text-xs); }
    .srebro-header__tools { display: contents; }
    .srebro-actions { order: 2; gap: 2px; }
    .srebro-action, .srebro-action--cart #cart > .btn { width: 42px; height: 42px; }
    .srebro-search { order: 3; flex: 0 0 100%; width: 100%; min-width: 0; padding-top: 0; justify-content: stretch; }
    .srebro-search #search { width: 100%; max-width: none; }
    .srebro-header-client summary { min-height: 42px; }
    .srebro-header-client__menu { right: 0; left: auto; }
  }
  .srebro-nav { .srebro-nav__inner { position: relative; justify-content: space-between; gap: var(--srebro-space-3); } }
  #menu.navbar {
    flex: 1 1 auto; width: auto; min-width: 0;
    .container { text-align: left; }
    .navbar-header { display: flex; min-height: 48px; width: 100%; align-items: center; float: none; }
    .navbar-toggle { order: 0; float: none; margin: 0 8px 0 0; padding: 8px 10px; border-color: var(--srebro-color-line); .fa { display: none; } &::after { content: '☰'; display: block; color: var(--srebro-color-graphite); font-size: 17px; line-height: 18px; } }
    #category { order: 1; display: inline-block !important; padding: 0; color: var(--srebro-color-graphite); font-size: var(--srebro-text-md); }
    .navbar-collapse { position: absolute; z-index: var(--srebro-z-dropdown); top: 100%; right: 0; left: 0; padding: 4px 14px 10px; border-top: 1px solid var(--srebro-color-line); border-radius: 0 0 var(--srebro-radius-card) var(--srebro-radius-card); background: var(--srebro-color-white); box-shadow: var(--srebro-shadow-menu); }
    .navbar-nav { display: block; margin: 0; > li { display: block; margin: 0; > a { padding: 11px 4px; } } }
  }
}
@media (max-width: 420px) {
  .srebro-utility__links { font-size: var(--srebro-text-sm); a span { display: none; } }
  .srebro-header {
    .srebro-header__inner { column-gap: var(--srebro-space-2); }
    .srebro-logo { width: 138px; flex-basis: 138px; }
    .srebro-brand__tagline { font-size: 10px; }
    .srebro-actions { gap: 0; }
    .srebro-action, .srebro-action--cart #cart > .btn { width: 38px; height: 40px; }
    .srebro-action { font-size: 17px; }
    .srebro-action__count { top: 0; right: -1px; min-width: 16px; height: 16px; font-size: 10px; }
  }
}
@media (prefers-reduced-motion: reduce) { .srebro-header *, .srebro-header *::before, .srebro-header *::after { transition-duration: .01ms !important; } }