/* account-widget.css — the sign-in / account control (added 2026-09-29, S131)
 *
 * WHY THIS EXISTS
 * The account system (/account/login, register, profile, orders, addresses,
 * password reset) is complete and working, and had NO entry point anywhere on the
 * site. content/pages/home.html line 382 carried <a href="/account/login">Customer
 * Login</a> in its own footer; ContentInjector step 2 replaces every page's footer
 * with templates/partials/site-footer.html, and that canonical footer has zero
 * account references. The link was dropped by the standardisation that replaced it.
 * The cart survived the same change only because it was given a purpose-built
 * injected widget; nothing equivalent was ever done for the account.
 *
 * POSITIONING
 * Deliberately matched to #compac-cart-widget, which is a fixed 56px circular FAB
 * at bottom:24px right:24px (z-index 999). The cart therefore occupies x = 24..80
 * from the right edge, so this sits at right:92px — a 12px gap — and drops to
 * right:80px on the same breakpoint where the cart moves to right:16px. Getting this
 * wrong stacks two buttons on top of each other on every page of the site.
 *
 * ⚠ NO JAVASCRIPT. The signed-in menu is a native <details>/<summary>, so this file
 * plus markup is the whole feature — nothing to load, nothing to cache-bust, and it
 * works before any script runs. The menu opens UPWARD because the control is anchored
 * to the bottom of the viewport.
 */

#compac-account-widget {
  position: fixed;
  bottom: 24px;
  right: 92px;
  z-index: 999;
  font-family: var(--font-heading, 'Outfit', sans-serif);
}

/* Matches .cart-toggle so the two read as one control pair, in slate rather than
   blue: the cart is the primary action and should stay the only blue circle. */
#compac-account-widget .acct-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--slate-700, #2a3142);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(19, 23, 32, 0.30);
  transition: background 0.15s, transform 0.15s;
  text-decoration: none;
  list-style: none;
}

#compac-account-widget .acct-btn:hover {
  background: var(--slate-900, #131720);
  transform: translateY(-1px);
}

#compac-account-widget .acct-btn:focus-visible {
  outline: 3px solid var(--blue-400, #60a5fa);
  outline-offset: 2px;
}

/* Hide the default disclosure triangle in every engine */
#compac-account-widget summary::-webkit-details-marker { display: none; }
#compac-account-widget summary::marker { content: ''; }

#compac-account-widget .acct-menu { position: relative; }

#compac-account-widget .acct-drop {
  position: absolute;
  bottom: 68px;                 /* clears the 56px button + 12px */
  right: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--slate-200, #d4d9e3);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(19, 23, 32, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

#compac-account-widget .acct-drop a,
#compac-account-widget .acct-drop button {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-700, #2a3142);
  text-decoration: none;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}

#compac-account-widget .acct-drop a:hover,
#compac-account-widget .acct-drop button:hover {
  background: var(--slate-50, #f5f7fa);
  color: var(--blue-600, #2563eb);
}

#compac-account-widget .acct-who {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate-400, #8891a4);
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--slate-100, #ebeef3);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

#compac-account-widget .acct-logout { margin: 0; }

/* Same breakpoint the cart widget uses, so the pair moves together */
@media (max-width: 640px) {
  #compac-account-widget {
    bottom: 16px;
    right: 80px;
  }
}