/*
 * Styles for the parts of this storefront Magento has no markup for.
 *
 * Everything the theme already covers is left to the theme: the header
 * actions, the buy box and the product grid all emit Magento's own class names
 * so pnp.css styles them, and duplicating those rules here would mean two
 * places to change and one of them forgotten. What is left is the three things
 * that exist only in this app -- the search type-ahead, the slide-out basket,
 * and the validation messages on the buy box.
 *
 * The custom properties come from pnp.css, which loads first.
 */

/* ===== 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;
}

.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;
  z-index: 1000;
}

.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);
}

.drawer__options div {
  display: flex;
  gap: 5px;
}

.drawer__options dt {
  font-weight: 600;
}

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

.drawer__options dd {
  margin: 0;
}

.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 {
  display: block;
  width: 100%;
  text-align: center;
}

.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);
}

/* ===== Buy box validation =========================================== */

/*
 * The message sits under the control it is about, and the control is marked
 * as well -- a red sentence alone leaves a shopper scrolling a page of eight
 * dropdowns looking for which one it means.
 */
.field.-invalid > .control select,
.field.-invalid > .control input,
.swatch-attribute.-invalid .swatch-attribute-options {
  border-color: var(--red-600, #c43d3d);
  box-shadow: 0 0 0 3px var(--red-50, #fbeaea);
}

.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red-600, #c43d3d);
}

.field-error::before {
  content: '!';
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--red-600, #c43d3d);
  color: var(--white, #fff);
  font-size: 11px;
  font-weight: 700;
}

.buybox__errors {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--red-600, #c43d3d);
  border-left-width: 4px;
  border-radius: var(--r-sm, 6px);
  background: var(--red-50, #fbeaea);
  color: var(--ink-900, #0c1721);
  font-size: 13.5px;
}

.buybox__errors p {
  margin: 0 0 6px;
  font-weight: 700;
}

.buybox__errors ul {
  margin: 0;
  padding-left: 18px;
}

.buybox__errors button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--navy-800, #163b62);
  text-decoration: underline;
  cursor: pointer;
}

.buybox__note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-600, #4f6173);
}

.buybox__note.-error {
  color: var(--red-600, #c43d3d);
  font-weight: 600;
}

/* A single column once there is no room for two. */
@media (max-width: 720px) {
  .suggest__cols {
    grid-template-columns: 1fr;
  }

  .suggest__side {
    border-right: 0;
    border-bottom: 1px solid var(--border, #e1e6ec);
  }
}

/* ===== Pages and articles in the search results ===================== */

.pagehits {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #e1e6ec);
}

.pagehits__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-900, #0f2c4a);
}

.pagehits__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.pagehits__item {
  max-width: 68ch;
}

.pagehits__link {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-800, #163b62);
  text-decoration: none;
}

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

.pagehits__kind {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: var(--r-pill, 999px);
  background: var(--ink-100, #eef2f6);
  color: var(--ink-600, #4f6173);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.pagehits__excerpt {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-600, #4f6173);
}

/* ===== Swatch values no remaining variant can reach ================== */

/*
 * Drawn, not removed. A palette that shrank as choices were made would move
 * under the cursor and hide the fact that a combination exists at all -- the
 * shopper needs to see that the colour is there and that this pack size does
 * not come in it.
 */
.mageworx-swatch-option.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(1);
}

/*
 * Greyed and drained of colour, with no slash across it. The usual diagonal
 * would be unreadable here: these swatches are two-tone photographs split
 * corner to corner, so a line drawn corner to corner reads as part of the
 * picture rather than as a mark against it.
 */