/*
 * Chariclo & Cherryclo — shared styling for the CART drawer.
 *
 * Last of the four. As with the menu, wishlist, search and account drawers, only
 * Collection and Product differ from the homepage; this brings them into line.
 *
 * SAFETY: pinned to `#cart-drawer`, an id that exists ONLY on collection.html and
 * product.html. The homepage uses `#drawerCart` and the other pages `#drawer-cart`, so
 * nothing here can reach them. The other three drawers on these two pages are untouched
 * — each has its own pinned stylesheet.
 *
 * Sizes are in px: the homepage scales its root font size down on a phone while these
 * pages leave it at 16px, so the same rem value renders larger here. These are the
 * homepage's actual rendered values at that width.
 *
 * CSS only. To remove: delete the <link> from the page head.
 */

#cart-drawer {
  width: 420px;
  max-width: 85vw;
}

#cart-drawer .drawer-header { padding: 20px 20px 16px; }
#cart-drawer .drawer-body { padding: 20px; }
#cart-drawer .drawer-title { font-size: 19px; }
#cart-drawer .drawer-close { font-size: 20px; }
#cart-drawer .drawer-footer { padding: 20px; }

/* ── Item row ────────────────────────────────────────────────────────────── */

#cart-drawer .cart-item {
  padding: 18px 0;
  padding-bottom: 18px;
  margin-bottom: 0;
  gap: 16px;
}

/* The homepage uses a taller portrait thumbnail than the square one here. */
#cart-drawer .cart-item-image {
  width: 72px;
  height: 88px;
  font-size: 17px;
}

#cart-drawer .cart-item-name {
  font-size: 14px;
  margin-bottom: 4px;
}

#cart-drawer .cart-item-meta {
  font-size: 8.7px;
  letter-spacing: .1em;
  margin: 0 0 12px;
}

#cart-drawer .cart-item-qty { gap: 12px; }

#cart-drawer .qty-btn {
  width: 26px;
  height: 26px;
  font-size: 12.5px;
  border: 1px solid rgba(200, 169, 107, .3);
}

#cart-drawer .cart-item-qty span {
  font-size: 10.5px;
  font-weight: 500;
  min-width: 20px;
  text-align: center;
}

/* Lighter than the bold treatment these pages used. */
#cart-drawer .cart-item-price {
  font-size: 10.5px;
  font-weight: 500;
}

#cart-drawer .cart-item-remove { font-size: 13px; }

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

#cart-drawer .cart-subtotal-row { margin-bottom: 8px; }

#cart-drawer .cart-subtotal-label {
  font-size: 9px;
  letter-spacing: .15em;
}

#cart-drawer .cart-subtotal-price { font-size: 16px; }

#cart-drawer .cart-shipping-note {
  font-size: 12px;
  margin-bottom: 20px;
}

#cart-drawer .drawer-btn-primary {
  padding: 16px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
}

#cart-drawer .drawer-btn-secondary {
  padding: 14px;
  font-size: 8.7px;
  font-weight: 500;
  letter-spacing: .18em;
}