/* ── Cart Drawer Layout ────────────────────────────────────────────────────── */

/* Override default drawer padding and make it a flex column */
html.js .drawer--cart .drawer__content {
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.cart-drawer__body {
  color: #1d1d1d;
}
@media screen and (min-width: 750px) {
  html.js .drawer--cart .drawer__content {
    padding: 0;
  }
}

@media screen and (min-width: 990px) {
  html.js .drawer--cart .drawer__content {
    padding: 0;
  }
}
.cart-drawer__btn.cart-drawer__btn--shop {
}
/* ── Header ──────────────────────────────────────────────────────────────────  */

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 2.4rem var(--page-gutter);
  background-color: var(--primary-color);
  color: var(--primary-color-text);
}

.cart-drawer__title {
  font-family: var(--font-heading-family);
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.cart-drawer__title-count {
  font-size: 1.5rem;
  font-weight: 400;
  color: rgb(var(--color-foreground));
}

.cart-drawer__close {
  position: static;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.cart-drawer__close svg {
  width: 100%;
  height: auto;
  pointer-events: none;
}

.cart-drawer__close:hover {
  opacity: 0.6;
}

/* ── Body (scrollable) ───────────────────────────────────────────────────────  */

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Empty State ─────────────────────────────────────────────────────────────  */

.cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem var(--page-gutter);
  gap: 1.2rem;
}

.cart-drawer__empty-heading {
  font-family: var(--font-heading-family);
  font-size: 2.8rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.cart-drawer__empty-text {
  font-size: 1.4rem;
  margin: 0 0 1.6rem;
}

/* ── Cart Items ──────────────────────────────────────────────────────────────  */

.cart-drawer__items {
  list-style: none;
  padding: 2.4rem var(--page-gutter) 0;
  margin: 0;
  flex: 1;
}

.cart-drawer__item {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 1.6rem 0;
  border-bottom: 0.1rem solid rgba(21, 21, 21, var(--alpha-border));
  position: relative;
}

.cart-drawer__item:first-child {
  padding-top: 0;
}

.cart-drawer__item-image {
  flex-shrink: 0;
  display: block;
  width: 8rem;
  height: 8rem;
}

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

.cart-drawer__item-details {
  flex: 1;
  min-width: 0;
}

.cart-drawer__item-name {
  display: block;
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  margin-bottom: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-drawer__item-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.cart-drawer__item-qty {
  font-size: 1.3rem;
  color: rgb(var(--color-foreground));
}

.cart-drawer__item-price {
  font-size: 1.3rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
}

.cart-drawer__item-remove {
  position: absolute;
  top: 1.6rem;
  right: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.cart-drawer__item:first-child .cart-drawer__item-remove {
  top: 0;
}

.cart-drawer__item-remove:hover {
  opacity: 1;
}

/* ── Footer ──────────────────────────────────────────────────────────────────  */

.cart-drawer__footer {
  flex-shrink: 0;
  padding: 2rem var(--page-gutter) 3.2rem;
  border-top: 0.1rem solid rgba(var(--color-border), var(--alpha-border));
}

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
}

.cart-drawer__subtotal-label {
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cart-drawer__subtotal-value {
  font-family: var(--font-heading-family);
  font-size: 1.6rem;
  font-weight: 700;
}

.cart-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}