/* Cart and wishlist drawer.
   The panel reuses the header drawer's MuiDrawer-root / MuiBackdrop-root / MuiDrawer-paper rules
   in header.css for its visibility, backdrop and easing; everything here is either the change of
   side (that drawer opens from the left, this one from the right) or the drawer's own contents.
   This file therefore has to load after header.css, which _FoundationStyles.cshtml does. */

/* Held open by a class rather than an inline style, so that closing one of the header's own
   overlays cannot unlock the page while this drawer is still up. */
body.has-cart-drawer {
  overflow: hidden;
  padding-right: var(--cart-scrollbar-width, 0px);
}

.cart-drawer {
  z-index: 1300;
}

.cart-drawer .cart-drawer__paper {
  left: auto;
  right: 0;
  width: 100%;
  transform: translateX(100%);
}

.cart-drawer.is-open .cart-drawer__paper {
  transform: translateX(0);
}

@media (min-width: 900px) {
  .cart-drawer .cart-drawer__paper {
    width: 450px;
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------- header ---- */

.cart-drawer__header {
  position: relative;
  flex: 0 0 auto;
  padding: 20px 24px 8px;
}

.cart-drawer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* The two tabs are the narrow-screen way between the lists; from md up the drawer is titled
   instead and the icon that opened it decides the list. */
.cart-drawer__tabs {
  display: flex;
  width: 100%;
  margin-bottom: 8px;
}

.cart-drawer__tab {
  flex: 1 1 0;
  padding: 10px 12px;
  border: 0;
  background: #f5f5f5;
  color: #000000;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  cursor: pointer;
}

.cart-drawer__tab.is-active {
  background: #000000;
  color: #ffffff;
}

.cart-drawer__titlebar {
  display: none;
}

.cart-drawer__clear {
  align-self: flex-end;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #666666;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5rem;
  cursor: pointer;
}

.cart-drawer__clear:hover {
  color: #4d4d4d;
  text-decoration: underline;
}

.cart-drawer__clear[hidden] {
  display: none;
}

.cart-drawer__title {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.5rem;
}

@media (min-width: 900px) {
  .cart-drawer__tabs {
    display: none;
  }

  .cart-drawer__titlebar {
    display: flex;
    flex-direction: column;
  }
}

/* ----------------------------------------------------------------------------- items ---- */

.cart-drawer__list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 24px;
}

.cart-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0 10px;
  border-bottom: 0.5px solid #cccccc;
}

.cart-row__media-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}

.cart-row__media {
  display: block;
  width: 120px;
  aspect-ratio: 208.97 / 117.06;
  background: #f2f2f2;
}

.cart-row__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-row__remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: #666666;
  font: inherit;
  font-size: 0.625rem;
  line-height: 1.5rem;
  cursor: pointer;
}

.cart-row__remove:hover {
  color: #4d4d4d;
  text-decoration: underline;
}

.cart-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-row__meta {
  margin: 0;
  color: #9d9d9d;
  font-size: 0.75rem;
  line-height: 0.875rem;
}

.cart-row__name {
  color: #000000;
  font-size: 0.875rem;
  line-height: 1.125rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cart-row__prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.cart-row__previous {
  color: #aaaaaa;
  font-size: 0.875rem;
  line-height: 1.125rem;
  text-decoration: line-through;
}

.cart-row__price {
  color: #000000;
  font-size: 0.875rem;
  line-height: 1.125rem;
}

.cart-row__price--reduced {
  color: #ff0000;
}

.cart-row__discount {
  padding: 2px 8px;
  background: #e6dfd6;
  color: #000000;
  font-size: 0.75rem;
  line-height: 1;
}

.cart-row__stepper {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-top: 4px;
  border: 1px solid #dddddd;
  overflow: hidden;
}

.cart-row__step {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #000000;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.cart-row__step:hover:not(:disabled) {
  background: #f5f5f5;
}

.cart-row__step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cart-row__quantity {
  min-width: 32px;
  padding: 0 8px;
  text-align: center;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------- empty ---- */

.cart-drawer__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
}

.cart-drawer__empty[hidden] {
  display: none;
}

.cart-drawer__empty-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-bottom: 12px;
}

.cart-drawer__empty-icon[hidden] {
  display: none;
}

.cart-drawer__empty-description {
  margin: 0;
  font-size: 0.75rem;
  white-space: pre-line;
}

/* ---------------------------------------------------------------------------- footer ---- */

.cart-drawer__footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 18px 24px 24px;
  background: #ffffff;
}

.cart-drawer__divider {
  height: 0.5px;
  margin-bottom: 16px;
  background: #cccccc;
}

.cart-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cart-drawer__total-label {
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.cart-drawer__total-value {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.cart-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  background: #000000;
  color: #ffffff;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cart-drawer__cta:disabled {
  background: #d9d9d9;
  color: #8a8a8a;
  cursor: not-allowed;
}

.cart-drawer__cta:hover:not(:disabled) {
  background: #333333;
  color: #ffffff;
}

.cart-drawer__cta[hidden] {
  display: none;
}