/*
 * Chariclo & Cherryclo — shared styling for the SEARCH and ACCOUNT drawers.
 *
 * As with the menu and wishlist, only Collection and Product differ: the homepage and
 * the other eleven pages already share one look. This brings those two into line.
 *
 * SAFETY: pinned to `#search-drawer` and `#account-drawer` — ids that exist ONLY on
 * collection.html and product.html. The homepage and other pages use `#drawerSearch` /
 * `#drawer-search` and `#drawerAccount` / `#drawer-account`, so nothing here can reach
 * them. The cart, wishlist and menu drawers on these two pages are untouched.
 *
 * Sizes are in px because the homepage scales its root font size down on a phone while
 * these pages leave it at 16px — the same rem value renders larger here. The values are
 * what the homepage actually renders at that width.
 *
 * CSS only. To remove: delete the <link> from the page head.
 */

/* ── Panel and header, both drawers ──────────────────────────────────────── */

#search-drawer,
#account-drawer {
  width: 420px;
  max-width: 85vw;
}

#search-drawer .drawer-header,
#account-drawer .drawer-header { padding: 20px 20px 16px; }

#search-drawer .drawer-body,
#account-drawer .drawer-body { padding: 20px; }

#search-drawer .drawer-title,
#account-drawer .drawer-title { font-size: 19px; }

#search-drawer .drawer-close,
#account-drawer .drawer-close { font-size: 20px; }

/* ── Search drawer ───────────────────────────────────────────────────────── */

#search-drawer .drawer-input {
  padding: 14px 16px;
  font-size: 11.5px;
  letter-spacing: .04em;
  margin-bottom: 28px;
}

#search-drawer .trending-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--terracotta);
  margin-bottom: 14px;
}

#search-drawer .trending-tags { gap: 8px 6px; }

#search-drawer .trending-tag {
  padding: 7px 16px;
  font-size: 8.7px;
  letter-spacing: .1em;
}

/* ── Account drawer ──────────────────────────────────────────────────────── */

#account-drawer .drawer-input {
  padding: 14px 16px;
  font-size: 11.5px;
  margin-bottom: 12px;
}

#account-drawer .drawer-btn-primary,
#account-drawer .drawer-btn-secondary {
  padding: 13px;
  font-size: 9px;
  letter-spacing: .18em;
}

#account-drawer .drawer-divider {
  font-size: 12.5px;
  margin: 14px 0;
  opacity: .7;
}

#account-drawer .quick-links-label {
  font-size: 8px;
  letter-spacing: .3em;
  margin: 28px 0 14px;
}

/* Matches the homepage's account links: quieter type, thinner rows. */
#account-drawer .quick-link-item {
  padding: 13px 0;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(200, 169, 107, .15);
}

#account-drawer .quick-link-item:hover { color: var(--terracotta); }

#account-drawer #forgot-password-link { font-size: 9.5px; }