/* ===== Site chrome ===================================================
   Styles for the header and the slide-out basket that pnp.css does not have:
   the search type-ahead and the drawer.

   Split out of storefront.css because Magento's cart, quote and account pages
   now print this app's header too, and need these rules -- but none of the
   page rules around them. Buy box validation styles .field-error, which is
   also the class Magento's own form validation uses, and would restyle the
   quote form. So Magento links this file and not that one.

   Loaded after pnp.css and before storefront.css here, which is the order these
   rules had inside storefront.css, so nothing about the cascade changes.
   ===================================================================== */

/* ===== Header search type-ahead ===================================== */

/*
 * The wrapper takes over the grid cell so the dropdown can be positioned
 * against it. pnp.css sets `.header .search { position: static }` -- it was
 * letting Amasty's panel span the whole header row -- so the form itself
 * cannot be the containing block.
 */
.header .search-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  justify-self: center;
}

.header .search-wrap .search {
  max-width: none;
}

/*
 * A search that has been asked but not yet answered.
 *
 * The catalogue query and the page query both have to come back before there
 * is anything to show, and on a first keystroke that is long enough for the
 * field to look broken. The spinner sits where the magnifier is, so the
 * button it replaces does not move.
 */
/*
 * Chrome draws its own clear button inside a type=search field, roughly where
 * a spinner at the right edge would go. Hiding it costs nothing -- the field
 * is cleared by selecting and deleting, as every other text field is -- and
 * leaves one thing in that corner instead of two overlapping.
 */
.search-wrap input[type='search']::-webkit-search-cancel-button,
.search-wrap input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-wrap .search-spinner {
  position: absolute;
  top: 50%;
  right: 52px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid var(--ink-300, #c9d1da);
  border-top-color: var(--navy-800, #163b62);
  border-radius: 50%;
  animation: search-spin 700ms linear infinite;
  pointer-events: none;
}

@keyframes search-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Without the animation the ring still reads as "something is happening". */
@media (prefers-reduced-motion: reduce) {
  .search-wrap .search-spinner {
    animation-duration: 2.5s;
  }
}

.suggest {
  position: absolute;
  top: calc(100% + 6px);
  /*
   * Wider than the input it hangs from. Two columns of results do not fit in
   * 560px, and the panel is centred on the field rather than pinned to one
   * edge so it stays inside the header at every width the desktop layout has.
   */
  left: 50%;
  transform: translateX(-50%);
  width: min(880px, calc(100vw - 48px));
  z-index: 200;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e1e6ec);
  border-radius: var(--r-md, 10px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 44, 74, 0.12));
  overflow: hidden auto;
  /* Never run the length of the page: scroll inside instead. */
  max-height: min(70vh, 560px);
}

/*
 * Where to look on the left, what to buy on the right. A single list mixing
 * four category names into six product names answers neither question.
 */
.suggest__cols {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
}

.suggest__cols.-one {
  grid-template-columns: 1fr;
}

.suggest__side {
  border-right: 1px solid var(--border, #e1e6ec);
  background: var(--ink-50, #f6f8fb);
}

.suggest__main {
  min-width: 0;
}

.suggest__group + .suggest__group {
  border-top: 1px solid var(--border, #e1e6ec);
}

.suggest__none {
  margin: 0;
  padding: 18px 16px;
  font-size: 13px;
  color: var(--ink-500, #6b7a8c);
}

.suggest__kind {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-500, #6b7a8c);
}

.suggest__heading {
  margin: 0;
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500, #6b7a8c);
}

.suggest__cat,
.suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  color: var(--ink-800, #1a2632);
  text-decoration: none;
}

.suggest__cat.is-active,
.suggest__item.is-active {
  background: var(--ink-50, #f6f8fb);
}

.suggest__cat {
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
}

.suggest__count {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500, #6b7a8c);
}

.suggest__img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--ink-50, #f6f8fb);
  border-radius: var(--r-sm, 6px);
}

.suggest__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.suggest__name {
  font-size: 13px;
  line-height: 1.35;
  /* Two lines and then stop: these names run past a hundred characters. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggest__sku {
  font-size: 11px;
  color: var(--ink-500, #6b7a8c);
}

.suggest__price {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.suggest__all {
  display: block;
  padding: 11px 14px;
  border-top: 1px solid var(--border, #e1e6ec);
  background: var(--ink-50, #f6f8fb);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800, #163b62);
  text-align: center;
  text-decoration: none;
}

.suggest__all:hover {
  text-decoration: underline;
}

/* ===== The basket, slid out ========================================= */

.drawer {
  position: fixed;
  inset: 0;
  /* Above Magento's sticky .page-header (9000), which wraps this same header
     on cart, quote and account pages; at 1000 the panel slid out underneath
     it there and nowhere else. Below Magento's modal overlay (99997), so an
     alert Magento raises still sits on top. */
  z-index: 9500;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 23, 33, 0.45);
  animation: drawer-fade 160ms ease-out;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 44, 74, 0.12));
  animation: drawer-in 200ms ease-out;
}

.drawer__panel:focus {
  outline: none;
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}

@keyframes drawer-fade {
  from {
    opacity: 0;
  }
}

/* A slide from off-screen is motion for its own sake to anyone who has asked
   not to see it; the panel still has to appear. */
@media (prefers-reduced-motion: reduce) {
  .drawer__panel,
  .drawer__scrim {
    animation: none;
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border, #e1e6ec);
}

.drawer__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-900, #0f2c4a);
}

.drawer__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--orange-500, #e87722);
  color: var(--white, #fff);
  border-radius: var(--r-pill, 999px);
  font-size: 12px;
  font-weight: 700;
}

.drawer__close {
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  border-radius: var(--r-md, 10px);
  font-size: 26px;
  line-height: 1;
  color: var(--ink-600, #4f6173);
  cursor: pointer;
}

.drawer__close:hover {
  background: var(--ink-50, #f6f8fb);
}

.drawer__items {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer__item {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e1e6ec);
}

.drawer__img {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--ink-50, #f6f8fb);
  border-radius: var(--r-sm, 6px);
}

.drawer__detail {
  min-width: 0;
  flex: 1 1 auto;
}

.drawer__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900, #0c1721);
  text-decoration: none;
}

.drawer__name:hover {
  text-decoration: underline;
}

.drawer__options {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-600, #4f6173);
}

/* Label above value, not beside it.
   Both halves run long here -- "Frame Color / Sling Color" against "White
   Frame with Turquoise Sling" -- and side by side in a 380px panel each one
   wrapped onto two or three ragged lines, so a single option read as four.
   Stacked, the label is one line and the value is one line. */
.drawer__options div {
  display: block;
}

.drawer__options div + div {
  margin-top: 4px;
}

.drawer__options dt {
  font-weight: 600;
}

.drawer__options dt::after {
  content: ':';
}

.drawer__options dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* Round, because that is how the buy box draws them. */
.drawer__swatch {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border, #e1e6ec);
}

/* A colour swatch is a span the browser paints rather than an image it
   loads, so it needs the box an <img> gets for free. */
.drawer__swatch--color {
  display: inline-block;
}

.drawer__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 0;
  font-size: 13px;
}

.drawer__qty {
  color: var(--ink-600, #4f6173);
}

.drawer__price {
  font-weight: 700;
}

.drawer__remove {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--ink-500, #6b7a8c);
  text-decoration: underline;
  cursor: pointer;
}

.drawer__remove:hover {
  color: var(--red-600, #c43d3d);
}

.drawer__foot {
  flex: 0 0 auto;
  padding: 18px 20px;
  border-top: 1px solid var(--border, #e1e6ec);
  background: var(--white, #fff);
}

.drawer__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 12px;
  font-size: 15px;
}

.drawer__subtotal strong {
  font-size: 20px;
  color: var(--navy-900, #0f2c4a);
}

.drawer__cta {
  /* .btn centres its label with inline-flex; overriding display to block to
     get a full-width button threw that away and left the text sitting on the
     top of the 48px box. flex keeps both. */
  display: flex;
  width: 100%;
}

.drawer__view {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
  color: var(--ink-600, #4f6173);
}

.drawer__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-600, #4f6173);
}