/*
 * Chariclo & Cherryclo — shared styling for the WISHLIST drawer.
 *
 * Only Collection and Product needed this: they use their own markup and sizing for the
 * wishlist, while the homepage and the other eleven pages already share one look. This
 * brings those two into line with the homepage.
 *
 * SAFETY: every selector is pinned to `#wishlist-drawer`, an id that exists ONLY on
 * collection.html and product.html. The homepage and the other pages use
 * `#drawer-wishlist`, so nothing here can reach them. The cart, search, account and
 * menu drawers on these two pages are equally untouched.
 *
 * Sizes are in px, not rem. The homepage scales its root font size down on narrow
 * screens while these pages leave it at 16px, so an identical rem value renders larger
 * here. The px values below are what the homepage actually renders on a phone.
 *
 * CSS only — no markup, no JavaScript. To remove: delete the <link> from the page head.
 */

/* Panel: match the homepage's narrow drawer rather than filling the screen. */
#wishlist-drawer {
  width: 420px;
  max-width: 85vw;
}

#wishlist-drawer .drawer-header { padding: 20px 20px 16px; }
#wishlist-drawer .drawer-body { padding: 20px; }

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

#wishlist-drawer .wishlist-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(200, 169, 107, .15);
  position: relative;
}

#wishlist-drawer .wishlist-item-image {
  width: 72px;
  height: 88px;
  flex-shrink: 0;
}

#wishlist-drawer .wishlist-item-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--charcoal);
  margin-bottom: 0;
}

/* Muted and small, as on the homepage — it read as bold black here. */
#wishlist-drawer .wishlist-item-price {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--mocha);
  margin-top: 4px;
  margin-bottom: 12px;
}

/* These pages carry a size/colour line the homepage has no equivalent for; keep it,
   sized to sit quietly under the name. */
#wishlist-drawer .wishlist-item-meta {
  font-family: var(--font-body);
  font-size: 9.5px;
  color: var(--mocha);
  margin: 4px 0 0;
}

/* ── Add to cart ─────────────────────────────────────────────────────────── */

#wishlist-drawer .add-to-cart-btn {
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--charcoal);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color .25s;
}

#wishlist-drawer .add-to-cart-btn:hover { background: var(--terracotta); }

#wishlist-drawer .wishlist-remove {
  background: none;
  border: none;
  color: var(--charcoal-light);
  font-size: 13px;
  cursor: pointer;
  transition: color .25s;
}

#wishlist-drawer .wishlist-remove:hover { color: var(--terracotta); }