/* Slide-in cart/wishlist drawer (cart-drawer.mjs). Loaded on the landing,
   category, and product pages — dark and paper themes both — so it carries
   its own palette instead of leaning on either page's variables. */

.cart-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 240;
}
.cart-drawer-root[hidden] { display: none; }

.cart-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 8, 11, .58);
  opacity: 0;
  transition: opacity .28s ease;
}

.cart-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 94vw);
  display: flex;
  flex-direction: column;
  color: #111015;
  background: #f1eee7;
  border-left: 3px solid #111015;
  transform: translateX(103%);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.cart-drawer-root.is-open .cart-drawer { transform: translateX(0); }
.cart-drawer-root.is-open .cart-drawer-overlay { opacity: 1; }

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 3px solid #111015;
}
.cart-drawer-head strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  text-transform: uppercase;
}
.cart-drawer-head button {
  width: 44px;
  height: 44px;
  border: 2px solid #111015;
  background: var(--brand-tint-deep, #ddd8f1);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.cart-drawer-lines {
  flex: 1;
  overflow-y: auto;
  padding: 6px 18px 18px;
}
.cart-drawer-group {
  margin: 18px 0 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: uppercase;
}
.cart-drawer-group small {
  display: block;
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #6e6871;
}
.cart-drawer-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed #b9b2a6;
}
.cart-drawer-line-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.cart-drawer-line-copy strong {
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-drawer-line-copy small { color: #55505c; font-size: .68rem; }
.cart-drawer-stepper {
  display: inline-flex;
  align-items: center;
  border: 2px solid #111015;
  background: #fff;
}
.cart-drawer-stepper button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}
.cart-drawer-stepper span {
  min-width: 26px;
  text-align: center;
  font-weight: 900;
}
.cart-drawer-remove {
  width: 44px;
  height: 44px;
  /*
   * Deliberately further from the stepper than the row's own 10px gap. This
   * is the only destructive control in the drawer and it sits immediately
   * right of "+", so the miss it invites is the expensive one.
   */
  margin-left: 8px;
  border: 2px solid #111015;
  background: #f3d9d7;
  font-weight: 900;
  cursor: pointer;
}

.cart-drawer-empty {
  padding: 26px 18px;
  text-align: center;
}
.cart-drawer-empty strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  text-transform: uppercase;
}
.cart-drawer-empty p { margin: 0; color: #55505c; }

.cart-drawer-foot {
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 3px solid #111015;
  background: #fff;
}
.cart-drawer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cart-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 2px solid #111015;
  background: var(--brand-tint-deep, #ddd8f1);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #111015;
  text-decoration: none;
}
/* --brand-deep, not the lighter #877ebc this used to be: white on that
   measured 3.99:1 on an 11.8px bold label, the same shortfall the primary
   button had before it moved down the same hue. */
.cart-drawer-cta.is-primary { background: var(--brand-deep); color: #fff; }
.cart-drawer-cta.is-disabled { opacity: .38; cursor: not-allowed; }
.cart-drawer-full {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: #55505c;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.cart-drawer-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-drawer-overlay { transition: none; }
}