/* ==========================================================================
   IRONBEASTS - Cart drawer

   Loaded on every page, because it has to be reachable from every page. Kept
   small for that reason: it is the only stylesheet besides the header's that
   every visitor downloads whether or not they ever use it.

   The overlay behind it, and opening and closing, belong to header.css and
   header.js -- this is only the panel.
   ========================================================================== */

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(26rem, 100vw);
  background: var(--bg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t), visibility var(--t);
}

.cart-drawer.is-open {
  transform: none;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer {
    transition: visibility var(--t);
  }
}

/* ---- Head ---------------------------------------------------------------- */
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.cart-drawer__title {
  margin: 0;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-6);
}

.cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  margin-right: calc(var(--sp-3) * -1);
  color: var(--text-muted);
  transition: color var(--t);
}

.cart-drawer__close svg {
  width: 20px;
  height: 20px;
}

.cart-drawer__close:hover {
  color: var(--heading);
}

/* ---- Body ---------------------------------------------------------------- */
/* The lines scroll; the subtotal and the button below them do not. */
.cart-drawer__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* While the add is in flight. The drawer is about to open over it, so this is
   only so the button does not look idle in the meantime. */
.product-page form.cart.is-adding {
  opacity: .6;
  pointer-events: none;
  transition: opacity var(--t);
}

.cart-drawer.is-busy .cart-drawer__body {
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--t);
}

.cart-drawer__loading,
.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
}

.cart-drawer__empty-title {
  margin: 0;
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-16);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
  color: var(--heading);
}

.cart-drawer__empty-text {
  margin: 0;
  font-size: var(--fs-14);
}

/* ---- Lines --------------------------------------------------------------- */
/* The only part that scrolls. The totals, the coupon field and both buttons
   below stay where they are, however long the list gets -- scrolling to reach
   Checkout is the one thing a drawer exists to avoid. */
.cart-drawer__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-drawer__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

/* Fixed, so the list does not reflow as the images arrive. */
.cart-drawer__media {
  flex: none;
  width: 60px;
  aspect-ratio: 5 / 6;
  background: var(--surface-2);
}

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

.cart-drawer__body-text {
  flex: 1;
  min-width: 0;
}

.cart-drawer__name {
  display: block;
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-13);
  letter-spacing: var(--ls-1);
  text-transform: uppercase;
  color: var(--heading);
}

/* The chosen variation, one per line -- WooCommerce prints alternating dt and
   dd, so a two-column grid pairs them up. */
.cart-drawer__body-text .variation {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 0 var(--sp-2);
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-11);
  color: var(--text-muted);
}

.cart-drawer__body-text .variation dt,
.cart-drawer__body-text .variation dd {
  margin: 0;
  font-weight: 400;
}

.cart-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.cart-drawer__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
}

.cart-drawer__qty input {
  width: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-field);
  color: var(--text);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart-drawer__qty input::-webkit-outer-spin-button,
.cart-drawer__qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.cart-drawer__qty .quantity__step {
  width: 1.6rem;
  height: 2rem;
  font-size: var(--fs-14);
}

/* Stated here as well as on the cart page, because cart.css is loaded on that
   page only and the drawer is on every other one. */
.cart-drawer__qty .quantity__step:disabled {
  visibility: hidden;
}

.cart-drawer__line {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}

.cart-drawer__remove {
  flex: none;
  padding: 0;
  color: var(--text-muted);
  transition: color var(--t);
}

.cart-drawer__remove svg {
  width: 16px;
  height: 16px;
}

.cart-drawer__remove:hover {
  color: var(--accent);
}

/* ---- Foot ---------------------------------------------------------------- */
.cart-drawer__foot {
  flex-shrink: 0;
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.cart-drawer__coupon {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.cart-drawer__coupon input {
  flex: 1;
  min-width: 0;
  min-height: var(--control-h);
  padding-inline: var(--sp-3);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--fs-field);
  color: var(--text);
}

.cart-drawer__coupon .btn {
  min-height: var(--control-h);
  padding-inline: var(--sp-4);
  font-size: var(--fs-12);
}

.cart-drawer__applied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.cart-drawer__applied .woocommerce-remove-coupon {
  margin-left: var(--sp-2);
  padding: 0;
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: underline;
  transition: color var(--t);
}

.cart-drawer__applied .woocommerce-remove-coupon:hover {
  color: var(--accent);
}

.cart-drawer__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-16);
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}

/* Says what the subtotal is not, so nobody reads it as the final figure. */
.cart-drawer__note {
  margin: var(--sp-1) 0 var(--sp-4);
  font-size: var(--fs-11);
  line-height: var(--lh-heading);
  color: var(--text-muted);
}

.cart-drawer__checkout {
  display: flex;
  width: 100%;
  min-height: var(--control-h);
}

.cart-drawer__view {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
  text-decoration: underline;
  transition: color var(--t);
}

.cart-drawer__view:hover {
  color: var(--heading);
}