/* Header layout only. Colours, type, fields, buttons, radii and icon sizes are
   owned by storefront/ui.css and icons.css; logo sizing by header-logo.css. No styles in this module target page content. */
.sf-header.sf-ui { --sfui-header-top-height: 36px; --sfui-header-main-padding: var(--sfui-space-12); --sfui-header-nav-padding: var(--sfui-space-6); position: relative; z-index: 200; padding-block: 0; border-bottom: var(--sfui-border-width) solid var(--sfui-border); }
.sf-header :where(button) { color: inherit; cursor: pointer; }
.sf-header :where(a,button) { -webkit-tap-highlight-color: transparent; }
.sf-topbar { border-bottom: var(--sfui-border-width) solid var(--sfui-border); }
.sf-topbar-inner { min-height: var(--sfui-header-top-height); display: flex; align-items: center; justify-content: space-between; gap: var(--sfui-space-24); }
.sf-topbar-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sfui-space-20); font-size: var(--sfui-size-caption); font-weight: var(--sfui-weight-medium); }
.sf-topbar-nav a { padding-block: var(--sfui-space-8); color: var(--sfui-muted); }
.sf-topbar-nav a:hover { color: var(--sfui-text); }
.sf-topbar-actions { display: flex; align-items: center; gap: var(--sfui-space-12); margin-inline-start: auto; }
.sf-mainbar-inner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--sfui-space-12); padding-block: var(--sfui-header-main-padding); }
.sf-brand-logo { justify-self: start; }
.sf-search-wrap { display: flex; align-items: center; gap: var(--sfui-space-12); min-width: 0; }
.sf-search-form { position: relative; flex: 1 1 220px; min-width: 0; }
.sf-search-form .sf-search-input { width: 100%; min-width: 0; padding-inline: 0; }
.sf-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sf-search-button,.sf-search-clear { display: grid; place-items: center; flex: 0 0 var(--sfui-button-height); align-self: stretch; padding: 0; border: 0; background: transparent; border-radius: var(--sfui-button-radius); }
.sf-search-wrap > .sfui-button { flex: 0 0 auto; padding-inline: var(--sfui-space-16); white-space: nowrap; }
.sf-auth { min-width: 0; }
.sf-rax-mobile-guest-auth { display: flex; gap: var(--sfui-space-12); }
.sf-rax-mobile-guest-auth__button { padding-inline: var(--sfui-space-16); white-space: nowrap; }
.sf-categories-trigger--mobile,.sf-reference-mobile-cart { display: none; }
.sf-categorybar { border-top: var(--sfui-border-width) solid var(--sfui-border); }
.sf-categorybar-inner { display: flex; align-items: center; gap: var(--sfui-space-24); padding-block: var(--sfui-header-nav-padding); }
.sf-categories-trigger { flex: 0 0 auto; }
.sf-category-nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: var(--sfui-space-12); min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.sf-category-nav > a { flex: 0 0 auto; }
.sf-categorybar .sfui-nav-link { padding-inline: 0; white-space: nowrap; }
.sf-category-item[aria-current] { color: var(--sfui-accent-text); }

/* Search suggestions share the same surface and shape as common cards. */
.sf-search-suggestions { display: none; position: absolute; top: calc(100% + var(--sfui-space-8)); left: 0; width: max(100%,360px); max-width: calc(100vw - var(--sfui-shell-gutter) * 2); z-index: 40; padding: var(--sfui-space-16); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-radius); background: var(--sfui-surface); max-height: min(65dvh,520px); overflow-y: auto; overscroll-behavior: contain; }
.sf-search-suggestions[aria-hidden="false"] { display: block; }
.sf-live-search-panel,.sf-live-search-section { display: grid; gap: var(--sfui-space-12); }
.sf-live-search-panel { gap: var(--sfui-space-20); }
.sf-live-search-heading { display: flex; justify-content: space-between; gap: var(--sfui-space-8); font-size: var(--sfui-size-label); font-weight: var(--sfui-weight-bold); }
.sf-live-search-heading button { border: 0; background: transparent; color: var(--sfui-accent-text); font: inherit; }
.sf-live-search-chips { display: flex; flex-wrap: wrap; gap: var(--sfui-space-8); }
.sf-live-search-chip { padding: var(--sfui-space-8) var(--sfui-space-12); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-button-radius); background: var(--sfui-control); font-size: var(--sfui-size-label); }
.sf-live-search-results { display: grid; gap: var(--sfui-space-8); }
.sf-live-search-result { display: flex; justify-content: space-between; align-items: center; gap: var(--sfui-space-12); width: 100%; padding: var(--sfui-space-12); text-align: left; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-control-radius); background: var(--sfui-control); }
.sf-live-search-result:hover,.sf-live-search-chip:hover { border-color: var(--sfui-focus-border); background: var(--sfui-soft); }
.sf-live-search-result__copy { display: grid; gap: var(--sfui-space-4); overflow-wrap: anywhere; font-size: var(--sfui-size-copy); }
.sf-live-search-result__copy small,.sf-live-search-empty,.sf-live-search-loading { color: var(--sfui-muted); font-size: var(--sfui-size-label); }
.sf-live-search-query-title { overflow-wrap: anywhere; font-weight: var(--sfui-weight-bold); }

/* Signed-in actions and direct account link. */
.sf-userbar { position: relative; display: flex; align-items: center; gap: var(--sfui-space-8); }
.sf-userbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sfui-space-8); min-width: 0; margin-inline-start: auto; }
.sf-userbar__load { flex: 0 0 auto; width: auto; padding-inline: var(--sfui-space-12); }
.sf-login-toast { position: absolute; top: calc(100% + var(--sfui-space-12)); right: 0; z-index: 55; width: 260px; padding: var(--sfui-space-16); border: var(--sfui-border-width) solid var(--sfui-focus-border); border-radius: var(--sfui-radius); background: var(--sfui-surface); }

/* One modal layout; visuals belong to sfui-card/choice/category-card/search-form.
   Only the two middle columns scroll. Header and quick links stay in the grid. */
html.sf-megamenu-open { overflow: hidden; overscroll-behavior: none; }
body.sf-megamenu-open { position: fixed; top: var(--sf-menu-scroll-top); left: var(--sf-menu-scroll-left); width: var(--sf-menu-page-width); overflow: hidden; }
.sf-megamenu { display: none; position: fixed; z-index: 30; inset-inline: 0; top: var(--sf-menu-top); height: var(--sf-menu-height); }
.sf-header.is-megamenu-open .sf-megamenu { display: block; }
.sf-megamenu > .sfui-shell { position: relative; z-index: 1; height: 100%; padding-block: var(--sfui-space-8); }
.sf-megamenu-backdrop { position: fixed; inset: 0; border: 0; background: var(--sfui-dialog-backdrop); width: 100%; height: 100%; }
.sf-megamenu-panel { --sfui-card-padding: var(--sfui-space-12); position: relative; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: var(--sfui-space-12); height: min(576px,100%); overflow: hidden; }
.sf-megamenu-top { position: absolute; top: var(--sfui-card-padding); right: var(--sfui-card-padding); display: flex; align-items: center; }
.sf-megamenu-logo { display: none; }
.sf-megamenu-layout { display: grid; grid-template-columns: minmax(248px,26%) minmax(0,1fr); gap: var(--sfui-space-16); min-height: 0; }
.sf-megamenu-sidebar { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: var(--sfui-space-12); min-width: 0; min-height: 0; padding-right: var(--sfui-space-12); border-right: var(--sfui-border-width) solid var(--sfui-border); }
.sf-megamenu-sidebar-title { display: flex; align-items: center; min-height: var(--sfui-button-height); }
.sf-megamenu-groups { display: flex; flex-direction: column; gap: var(--sfui-space-8); min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--sfui-space-4); }
.sf-megamenu-section { flex: 0 0 auto; width: 100%; cursor: pointer; }
.sf-megamenu-all { justify-content: space-between; }
.sf-megamenu-main { display: grid; grid-template-rows: auto minmax(0,1fr); gap: var(--sfui-space-12); min-width: 0; min-height: 0; }
.sf-megamenu-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(160px,40%); align-items: center; gap: var(--sfui-space-12); padding-right: calc(var(--sfui-icon-button-size) + var(--sfui-space-12)); }
.sf-megamenu-heading > .sfui-search-form { grid-column: 2; grid-row: 1; }
.sf-megamenu-summary { grid-column: 1; grid-row: 1; min-width: 0; }
.sf-megamenu-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: max-content; align-content: start; gap: var(--sfui-space-18); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--sfui-space-4); }
.sf-megamenu-empty { grid-column: 1 / -1; padding: var(--sfui-space-12); }
.sf-megamenu-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sfui-space-12); padding-top: var(--sfui-space-12); border-top: var(--sfui-border-width) solid var(--sfui-border); }

@media (max-width: 1199.98px) and (min-width: 992px) {
  .sf-mainbar-inner { gap: var(--sfui-space-16); }
  .sf-search-wrap,.sf-rax-mobile-guest-auth { gap: var(--sfui-space-8); }
  .sf-search-wrap > .sfui-button,.sf-rax-mobile-guest-auth__button { padding-inline: var(--sfui-space-10); }
  .sf-search-wrap > .sfui-button > span { display: none; }
  .sf-userbar__load > span { display: none; }
  .sf-megamenu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
  .sf-header.sf-ui { --sfui-header-main-padding: var(--sfui-space-4); }
  .sf-topbar,.sf-categorybar,.sf-search-wrap { display: none; }
  .sf-mainbar-inner { grid-template-columns: var(--sfui-icon-button-size) minmax(0,1fr) var(--sfui-icon-button-size); gap: var(--sfui-space-8); }
  .sf-categories-trigger--mobile,.sf-reference-mobile-cart { display: inline-flex; }
  .sf-reference-mobile-cart { justify-self: end; }
  .sf-brand-logo { justify-self: center; }
  .sf-auth { grid-column: 1 / -1; }
  .sf-rax-mobile-guest-auth { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sfui-space-12); }
  .sf-userbar { justify-content: space-between; }
  .sf-userbar__icon--cart { display: none; }
  .sf-userbar__load { padding-inline: var(--sfui-space-10); }
  .sf-megamenu > .sfui-shell { width: 100%; padding-block: 0; }
  .sf-megamenu-panel { --sfui-card-padding: var(--sfui-space-8); grid-template-rows: auto minmax(0,1fr) auto; height: 100%; gap: var(--sfui-space-8); padding-top: calc(var(--sfui-card-padding) + env(safe-area-inset-top)); padding-bottom: calc(var(--sfui-card-padding) + env(safe-area-inset-bottom)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .sf-megamenu-top { position: static; display: grid; grid-template-columns: calc(var(--sfui-badge-medium) + var(--sfui-space-24) * 2 + var(--sfui-space-6)) minmax(0,1fr); min-height: calc(var(--sfui-button-height) + var(--sfui-space-12)); padding-right: var(--sfui-space-8); }
  .sf-megamenu-top > .sfui-icon-button { justify-self: center; }
  .sf-megamenu-logo { display: flex; justify-self: start; }
  .sf-megamenu-layout { grid-template-columns: calc(var(--sfui-badge-medium) + var(--sfui-space-24) * 2 + var(--sfui-space-6)) minmax(0,1fr); gap: 0; }
  .sf-megamenu-sidebar { grid-template-rows: minmax(0,1fr); padding-right: 0; }
  .sf-megamenu-sidebar-title,.sf-megamenu-all,.sf-megamenu-summary { display: none; }
  .sf-megamenu-groups { gap: var(--sfui-space-4); padding: var(--sfui-space-4); }
  .sf-megamenu-main { gap: var(--sfui-space-6); padding-inline: var(--sfui-space-8); }
  .sf-megamenu-heading { grid-template-columns: minmax(0,1fr); padding: 0; }
  .sf-megamenu-heading > .sfui-search-form { grid-column: 1; }
  .sf-megamenu-grid { grid-template-columns: minmax(0,1fr); gap: var(--sfui-space-6); }
  .sf-megamenu-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sfui-space-8); padding: var(--sfui-space-8) var(--sfui-space-8) 0; }
  .sf-search-suggestions { width: 100%; max-width: 100%; }
}
@media (max-width: 374px) {
  .sf-userbar,.sf-userbar__actions { gap: var(--sfui-space-4); }
  .sf-userbar__load > span { display: none; }
}