/*
 * Chariclo & Cherryclo — shared styling for the MENU drawer only.
 *
 * Why this file exists: each page carried its own copy of these rules, and they had
 * drifted apart — type sizes, spacing and panel width all differed slightly between
 * the homepage and the rest. One definition here replaces fourteen.
 *
 * SAFETY: every selector is pinned to either `.mobile-menu` (which the cart, wishlist
 * and search drawers do not use) or `#mobile-menu-drawer` by id. Nothing here can
 * reach `.drawer` generally, so the other three drawers on Collection and Product are
 * untouched. This is deliberate — a previous attempt used `.drawer` and restyled all
 * four at once.
 *
 * No markup and no JavaScript is involved. Each page keeps its own open/close code.
 * To remove: delete the <link> line from the page's <head>.
 *
 * Two markup shapes are in use and both are covered:
 *   wrapped  <div class="mobile-menu-item"><a>…</a></div>   (homepage + 11 pages)
 *   bare     <a class="mobile-menu-item">…</a>              (collection, product)
 */

/* ── Group 1: pages using a dedicated .mobile-menu panel ─────────────────── */

/* NOTE: `display` is deliberately absent here. Each page reveals its own panel inside
   a mobile media query (`.mobile-menu { display: flex }`), and because this file loads
   last, declaring `display: none` here overrode that and left the menu invisible while
   the overlay still appeared. Panel visibility stays each page's own business. */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 320px;
  height: 100%;
  background: var(--ivory);
  z-index: 1051;
  flex-direction: column;
  transition: right .4s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -8px 0 60px rgba(45, 45, 45, .12);
  overflow-y: auto;
}

.mobile-menu.active { right: 0; }

.mobile-menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--charcoal-light);
  cursor: pointer;
  transition: color .2s, transform .2s;
  padding: 20px 20px 0 0;
}

.mobile-menu-close:hover {
  color: var(--terracotta);
  transform: rotate(90deg);
}

.mobile-menu-items {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 0;
}

/* ── The links, in both markup shapes ────────────────────────────────────── */

/* Wrapped shape: the div carries the divider, the anchor carries the type. */
.mobile-menu-items .mobile-menu-item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(200, 169, 107, .15);
}

/* Sizes are in px, not rem, on purpose. The homepage scales its root font size down on
   narrow screens (`font-size: clamp(14px, 2vw, 18px)`) while every other page leaves it
   at the browser default 16px — so an identical `.75rem` rule rendered 10.5px there and
   12px elsewhere. That was the size difference. Fixed px removes the dependency. */
.mobile-menu-items .mobile-menu-item a {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--charcoal-light);
  text-decoration: none;
  transition: color .3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-items .mobile-menu-item a:hover { color: var(--terracotta); }

.mobile-menu-items .mobile-menu-item a::after {
  content: '\2192';
  font-size: 12px;
  opacity: 0;
  transition: opacity .3s;
}

.mobile-menu-items .mobile-menu-item a:hover::after { opacity: 1; }

/* ── Group 2: Collection and Product, where the menu is a .drawer ────────── */
/* Pinned by id throughout, so search / account / wishlist / cart keep their own
   full-width treatment on these pages. */

#mobile-menu-drawer {
  max-width: 320px;
}

/* The homepage menu has no logo header — match it. */
#mobile-menu-drawer .drawer-header {
  padding: 0;
  border-bottom: none;
  justify-content: flex-end;
}

#mobile-menu-drawer .drawer-logo,
#mobile-menu-drawer .nav-logo-text,
#mobile-menu-drawer .nav-logo-img { display: none; }

#mobile-menu-drawer .drawer-close {
  font-size: 20px;
  color: var(--charcoal-light);
  padding: 20px 20px 0 0;
  transition: color .2s, transform .2s;
}

#mobile-menu-drawer .drawer-close:hover {
  color: var(--terracotta);
  transform: rotate(90deg);
}

/* The menu list supplies its own padding. */
#mobile-menu-drawer .drawer-body { padding: 0; }

/* Bare-anchor shape: the anchor is the item, so it carries divider and type both. */
#mobile-menu-drawer .mobile-menu-items .mobile-menu-item {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--charcoal-light);
  text-decoration: none;
  transition: color .3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(200, 169, 107, .15);
}

#mobile-menu-drawer .mobile-menu-items .mobile-menu-item:hover { color: var(--terracotta); }

#mobile-menu-drawer .mobile-menu-items .mobile-menu-item::after {
  content: '\2192';
  font-size: 12px;
  opacity: 0;
  transition: opacity .3s;
}

#mobile-menu-drawer .mobile-menu-items .mobile-menu-item:hover::after { opacity: 1; }