/* The Salon header scrolls away normally. Only its compact row returns. */
html[data-design="salon"] {
  --bb-salon-row-height: 54px;
  scroll-padding-top: calc(var(--bb-salon-row-height) + 14px);
}

html[data-design="salon"] .hdr {
  position: relative;
  top: auto;
}

.bb-salon-header-slot {
  overflow-anchor: none;
}

html[data-design="salon"] .hdr[data-salon-header]:not([data-salon-header="full"]) {
  position: fixed;
  inset: var(--bb-salon-admin-offset, 0px) 0 auto;
}

html[data-design="salon"] .hdr[data-salon-header]:not([data-salon-header="full"]) :is(.nav, .logo__tag, .m-visit) {
  display: none;
}

html[data-design="salon"] .hdr[data-salon-header]:not([data-salon-header="full"]) .hdr__row {
  min-height: var(--bb-salon-row-height);
}

html[data-design="salon"] .hdr[data-salon-header]:not([data-salon-header="full"]) [data-drawer-open] {
  display: inline-flex !important;
}

.bb-salon-menu-label {
  display: none;
}

@media (min-width: 900px) {
  html[data-design="salon"] .hdr[data-salon-header]:not([data-salon-header="full"]) [data-drawer-open] {
    width: auto;
    gap: 8px;
    padding-inline: 10px;
    border-radius: var(--r);
    font-size: 13px;
  }

  html[data-design="salon"] .hdr[data-salon-header]:not([data-salon-header="full"]) .bb-salon-menu-label {
    display: inline;
  }
}

html[data-design="salon"] .hdr[data-salon-header="hidden"] {
  transform: translateY(calc(-100% - var(--bb-salon-admin-offset, 0px)));
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-design="salon"] .hdr[data-salon-header="compact"]:not(:focus-within) {
    animation: bb-salon-header-return 160ms ease-out;
  }

  @keyframes bb-salon-header-return {
    from { transform: translateY(calc(-100% - var(--bb-salon-admin-offset, 0px))); }
    to { transform: translateY(0); }
  }
}

@media (min-width: 601px) {
  .admin-bar {
    --bb-salon-admin-offset: 46px;
  }
}

@media (min-width: 783px) {
  .admin-bar {
    --bb-salon-admin-offset: 32px;
  }
}

html[data-design="salon"] .bb-subcats-stick {
  position: static;
}

html[data-design="salon"] .filters {
  position: relative;
  top: auto;
}

html[data-design="salon"] .filters .fdrop__panel {
  position: absolute;
  inset: 100% auto auto 0;
  margin-top: 8px;
}

.bb-salon-filter-options:not([hidden]) {
  display: contents;
}

.bb-salon-sort-label {
  display: none;
}

@media (max-width: 899px) {
  html[data-design="salon"] .hdr .hdr__row {
    grid-template-columns: 92px minmax(0, 1fr) 90px;
    gap: 4px;
  }

  html[data-design="salon"] .hdr .logo__name {
    font-size: clamp(12px, 3.6vw, 17px);
    letter-spacing: .09em;
  }

  html[data-design="salon"] .hdr .cur {
    position: absolute;
    left: 0;
  }

  html[data-design="salon"] .cur__panel {
    width: min(320px, calc(100vw - 2 * var(--gut)));
  }

  html[data-design="salon"] .filters__row[data-salon-mobile-filters] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  [data-salon-mobile-filters] .bb-salon-filter-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-content: space-between;
    min-height: 44px;
  }

  [data-salon-mobile-filters] .bb-salon-filter-toggle[aria-expanded="true"] .i {
    transform: rotate(180deg);
  }

  [data-salon-mobile-filters] .sort {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    display: block;
  }

  [data-salon-mobile-filters] .bb-salon-sort-label {
    display: flex;
    justify-content: space-between;
    min-height: 44px;
  }

  [data-salon-mobile-filters] .sort select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  [data-salon-mobile-filters] .sort:focus-within .bb-salon-sort-label {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  [data-salon-mobile-filters] .filters__count {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  [data-salon-mobile-filters] .bb-salon-filter-options:not([hidden]) {
    display: grid;
    grid-column: 1 / -1;
    gap: 8px;
  }

  [data-salon-mobile-filters] .bb-salon-filter-options summary {
    display: flex;
    justify-content: space-between;
    min-height: 44px;
  }

  [data-salon-mobile-filters] .bb-salon-filter-options > a {
    justify-self: start;
  }

  html[data-design="salon"] .filters .fdrop__panel {
    position: static;
    width: auto;
    max-height: min(50svh, 320px);
    box-shadow: none;
  }
}

@media (max-width: 389px) {
  html[data-design="salon"] .filters .fcolors {
    grid-template-columns: minmax(0, 1fr);
  }
}