.pbly .site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--pbly-color-action-primary);
  color: var(--pbly-color-action-on-primary);
  transition: transform 0.3s;
}

/* Scrolling down slides the header up until only its last row shows; js/main.js measures the distance. */
.pbly .site-header[data-compact="true"] { transform: translateY(calc(-1 * var(--site-header-offset))); }

.pbly .site-header :focus-visible { outline-color: var(--pbly-color-palette-white); }
.pbly .site-header .site-nav__submenu :focus-visible { outline-color: var(--pbly-color-action-primary); }

.pbly .site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo search actions"
    "nav nav nav";
  align-items: center;
  column-gap: var(--pbly-space-15);
  row-gap: var(--pbly-space-7);
  padding-block: var(--pbly-space-4);
}

.pbly .site-header__logo { grid-area: logo; }

/* Search field */
.pbly .site-search {
  position: relative;
  grid-area: search;
}

.pbly .site-search__input {
  width: 100%;
  height: 3.4375rem;
  padding: 0 var(--pbly-space-4) 0 var(--pbly-space-12);
  border: 0;
  border-radius: var(--pbly-radius-lg);
  background: var(--pbly-color-surface-raised);
  color: var(--pbly-color-text-primary);
  font-size: var(--pbly-text-body-lg-font-size);
  letter-spacing: var(--pbly-text-body-lg-letter-spacing);
}

.pbly .site-search__input::placeholder {
  color: var(--pbly-color-palette-grey-light);
  opacity: 1;
}

.pbly .site-search__icon {
  position: absolute;
  top: 50%;
  left: var(--pbly-space-4);
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

.pbly .site-search__lens { position: absolute; top: 0; right: 0; }
.pbly .site-search__handle { position: absolute; bottom: 0; left: 0; }

/* Account and cart */
.pbly .site-header__actions {
  display: flex;
  grid-area: actions;
  align-items: center;
  gap: var(--pbly-space-5);
}

.pbly .site-header__account {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
}

.pbly .site-header__cart {
  display: flex;
  align-items: center;
  gap: var(--pbly-space-2);
  padding: var(--pbly-space-1);
  font-weight: var(--pbly-font-weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.pbly .site-header__menu-button {
  display: none;
  grid-area: menu;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
}

/* Three bars that turn into a cross while the menu is open. */
.pbly .site-header__menu-bars,
.pbly .site-header__menu-bars::before,
.pbly .site-header__menu-bars::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: var(--pbly-radius-full);
  background: currentColor;
  transition: transform 0.2s, background-color 0.2s;
}

.pbly .site-header__menu-bars { position: relative; }

.pbly .site-header__menu-bars::before,
.pbly .site-header__menu-bars::after {
  position: absolute;
  left: 0;
  content: "";
}

.pbly .site-header__menu-bars::before { top: -0.5rem; }
.pbly .site-header__menu-bars::after { top: 0.5rem; }
.pbly .site-header__menu-button[aria-expanded="true"] .site-header__menu-bars { background: transparent; }
.pbly .site-header__menu-button[aria-expanded="true"] .site-header__menu-bars::before { transform: translateY(0.5rem) rotate(45deg); }
.pbly .site-header__menu-button[aria-expanded="true"] .site-header__menu-bars::after { transform: translateY(-0.5rem) rotate(-45deg); }

/* Category navigation */
.pbly .site-nav { grid-area: nav; }

.pbly .site-nav__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pbly-space-2);
}

.pbly .site-nav__item {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
}

.pbly .site-nav__link {
  display: flex;
  align-items: center;
  gap: var(--pbly-space-2);
  font-weight: var(--pbly-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.pbly .site-nav__link:hover { color: var(--pbly-color-palette-mint-light); }

.pbly .site-nav__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
}

.pbly .site-nav__toggle {
  display: flex;
  align-items: center;
  height: 1.5rem;
  padding-left: var(--pbly-space-1-5);
}

.pbly .site-nav__toggle img { transition: transform 0.2s; }
.pbly .site-nav__toggle[aria-expanded="true"] img { transform: rotate(180deg); }

.pbly .site-nav__submenu {
  position: absolute;
  top: calc(100% + var(--pbly-space-2));
  left: calc(-1 * var(--pbly-space-6));
  z-index: 20;
  display: none;
  min-width: 15.5rem;
  padding: var(--pbly-space-6) var(--pbly-space-8);
  border-radius: var(--pbly-radius-lg);
  background: var(--pbly-color-surface-raised);
  box-shadow: var(--pbly-shadow-lg);
  color: var(--pbly-color-text-primary);
}

/* Keeps the pointer inside the item while it crosses the gap above the dropdown. */
.pbly .site-nav__submenu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--pbly-space-2);
  content: "";
}

.pbly .site-nav__submenu--wide {
  grid-template-columns: repeat(2, max-content);
  column-gap: var(--pbly-space-12);
}

.pbly .site-nav__submenu--wide li:last-child { grid-column: 1; }

.pbly .site-nav__toggle[aria-expanded="true"] + .site-nav__submenu { display: grid; }

.pbly .site-nav__submenu a {
  display: block;
  padding-block: var(--pbly-space-1-5);
  font-weight: var(--pbly-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.pbly .site-nav__submenu a:hover { color: var(--pbly-color-action-hover); }
.pbly .site-nav__submenu .site-nav__all { color: var(--pbly-color-action-primary); }

@media (min-width: 80.0625rem) {
  .pbly .site-nav__item:hover > .site-nav__submenu { display: grid; }
  .pbly .site-nav__item:hover > .site-nav__toggle img { transform: rotate(180deg); }
}

/* Below 1280px the categories no longer fit on one line: the phone header with a menu button. */
@media (max-width: 80rem) {
  .pbly .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo logo actions"
      "menu search search";
    column-gap: var(--pbly-space-4);
    row-gap: var(--pbly-space-5);
    padding-block: var(--pbly-space-5) var(--pbly-space-4-5);
  }

  .pbly .site-header__actions { justify-self: end; }
  .pbly .site-header__menu-button { display: flex; }
  .pbly .site-search__input { height: 2.875rem; }

  .pbly .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    max-height: calc(100vh - 8.75rem);
    overflow-y: auto;
    border-radius: 0 0 var(--pbly-radius-lg) var(--pbly-radius-lg);
    background: var(--pbly-color-surface-raised);
    box-shadow: var(--pbly-shadow-lg);
    color: var(--pbly-color-text-primary);
  }

  .pbly .site-nav[data-open="true"] { display: block; }

  .pbly .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--pbly-space-2);
  }

  /* Rows start at the side margin, in line with the close button, as on faberpet.ro. */
  .pbly .site-nav__item {
    flex-wrap: wrap;
    padding-inline: var(--pbly-space-10);
  }

  .pbly .site-nav__link {
    gap: var(--pbly-space-4);
    padding-block: var(--pbly-space-4);
    font-size: var(--pbly-font-size-md);
    line-height: var(--pbly-font-line-height-body);
  }

  .pbly .site-nav__icon { width: 1.5rem; }

  .pbly .site-nav__link:hover { color: var(--pbly-color-action-hover); }

  /* The chevron is drawn white for the green bar; on the white menu it turns black. */
  .pbly .site-nav__toggle {
    height: 3.5rem;
    padding-inline: var(--pbly-space-1-5) var(--pbly-space-4);
  }

  .pbly .site-nav__toggle img { filter: brightness(0); }

  .pbly .site-nav__submenu,
  .pbly .site-nav__submenu--wide {
    position: static;
    flex-basis: 100%;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 0 0 var(--pbly-space-3) var(--pbly-space-10);
    border-radius: 0;
    box-shadow: none;
  }

  .pbly .site-nav__submenu::before { content: none; }
  .pbly .site-nav__submenu a { font-weight: var(--pbly-font-weight-regular); white-space: normal; }
  .pbly .site-nav__submenu .site-nav__all { font-weight: var(--pbly-font-weight-semibold); }
}

/* Phones, as on faberpet.ro: the logo row sits higher, with more room above the search field. */
@media (max-width: 47.9375rem) {
  .pbly .site-nav__item { padding-inline: var(--pbly-layout-wrapper-gutter); }

  .pbly .site-header__inner {
    row-gap: var(--pbly-space-6);
    padding-top: var(--pbly-space-4);
  }
}

/* Cart count: a red badge on the cart icon once the cart has products, as on faberpet.ro. */
.pbly .site-header__cart-icon {
  position: relative;
  display: flex;
}

.pbly .site-header__cart-count {
  position: absolute;
  top: calc(-1 * var(--pbly-space-1-5));
  right: calc(-1 * var(--pbly-space-1));
  display: grid;
  place-items: center;
  min-width: var(--pbly-space-4);
  height: var(--pbly-space-4);
  padding-inline: var(--pbly-space-1);
  border-radius: var(--pbly-radius-full);
  background: var(--pbly-color-palette-red-bright);
  color: var(--pbly-color-palette-white);
  font-size: var(--pbly-font-size-2xs);
  font-weight: var(--pbly-font-weight-bold);
}

.pbly .site-header__cart-count[hidden] { display: none; }

/*
 * JetSearch inside the search field (P2-03). The plugin prints its own form, field and results; the prototype designs
 * the field only, so the field below is the prototype's and the results dropdown is an owner-adjustable proposal
 * (docs/decisions/P2-06-filters-and-search.md: CSS only, the plugin's markup cannot be changed).
 */
.pbly .site-search .jet-ajax-search,
.pbly .site-search .jet-ajax-search__form,
.pbly .site-search .jet-ajax-search__fields-holder,
.pbly .site-search .jet-ajax-search__field-wrapper {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.pbly .site-search .jet-ajax-search__field[type="search"] {
  width: 100%;
  height: 3.4375rem;
  padding: 0 var(--pbly-space-4) 0 var(--pbly-space-12);
  border: 0;
  border-radius: var(--pbly-radius-lg);
  background: var(--pbly-color-surface-raised);
  box-shadow: none;
  color: var(--pbly-color-text-primary);
  font-size: var(--pbly-text-body-lg-font-size);
  letter-spacing: var(--pbly-text-body-lg-letter-spacing);
}

.pbly .site-search .jet-ajax-search__field[type="search"]::placeholder {
  color: var(--pbly-color-palette-grey-light);
  opacity: 1;
}

/* The plugin's own focus ring would stack on the header's; keep the header's. */
.pbly .site-search .jet-ajax-search__field[type="search"]:focus {
  border: 0;
  box-shadow: none;
}

/* Results: a white panel under the field, one row per product (photo, name, price), then a link to all results. */
.pbly .site-search .jet-ajax-search__results-area {
  position: absolute;
  top: calc(100% + var(--pbly-space-2));
  right: 0;
  left: 0;
  z-index: 40;
  max-height: calc(100dvh - 9rem);
  overflow-y: auto;
  border-radius: var(--pbly-radius-lg);
  background: var(--pbly-color-surface-raised);
  box-shadow: var(--pbly-shadow-lg);
  color: var(--pbly-color-text-primary);
}

/* The plugin's "N Results" header and its page arrows are English and not needed: the link below shows all results. */
.pbly .site-search .jet-ajax-search__results-header { display: none; }

.pbly .site-search .jet-ajax-search__results-list-inner { display: block; }

.pbly .site-search .jet-ajax-search__results-item + .jet-ajax-search__results-item {
  border-top: 1px solid var(--pbly-color-border-default);
}

.pbly .site-search .jet-ajax-search__item-link {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: center;
  column-gap: var(--pbly-space-4);
  padding: var(--pbly-space-3) var(--pbly-space-4);
  color: inherit;
  text-decoration: none;
}

.pbly .site-search .jet-ajax-search__item-link:hover { background: var(--pbly-color-palette-fog); }

.pbly .site-search .jet-ajax-search__item-thumbnail { width: 4rem; height: 4rem; }

.pbly .site-search .jet-ajax-search__item-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pbly .site-search .jet-ajax-search__item-title {
  font-weight: var(--pbly-font-weight-semibold);
  line-height: var(--pbly-font-line-height-body);
}

.pbly .site-search .jet-ajax-search__item-content { display: none; }

.pbly .site-search .jet-ajax-search__item-price {
  margin-top: var(--pbly-space-1);
  color: var(--pbly-color-action-primary);
  font-weight: var(--pbly-font-weight-bold);
}

.pbly .site-search__partners { font-weight: var(--pbly-font-weight-bold); }

.pbly .site-search .jet-ajax-search__results-footer {
  border-top: 1px solid var(--pbly-color-border-default);
}

.pbly .site-search .jet-ajax-search__full-results {
  display: block;
  width: 100%;
  padding: var(--pbly-space-4);
  border: 0;
  background: none;
  color: var(--pbly-color-action-primary);
  font: inherit;
  font-weight: var(--pbly-font-weight-semibold);
  text-align: center;
  cursor: pointer;
  transition: color 0.2s;
}

.pbly .site-search .jet-ajax-search__full-results:hover { color: var(--pbly-color-action-hover); }

.pbly .site-search .jet-ajax-search__message { padding: var(--pbly-space-4); }