/* ============================================================
   EasyCMM shared shell — persistent chrome across both pages
   Account (light body) + Store (dark body) share this exact
   nav, breadcrumb bridge, container metrics and transition.
   Include AFTER the page's own stylesheet on both files.
   ============================================================ */
:root{
  --ec-brand:#312252;            /* dominant brand purple — nav/chrome */
  --ec-brand-bar:#2a1d47;        /* breadcrumb sub-bar (deeper) */
  --ec-brand-line:rgba(255,255,255,.12);
  --ec-on-brand:#ffffff;
  --ec-on-brand-dim:#b9aed6;
  --ec-accent:#f6921e;           /* interactive accent orange */
  --ec-accent-hover:#fba53d;
  --ec-brand-orange:#c26529;     /* identity orange — logo "CMM" only */
  --ec-save:#34d399;
  --ec-container:1100px;         /* SHARED width — both pages match */
  --ec-pad-x:32px;               /* SHARED horizontal padding */
}

.ms{ font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr; }

/* shared container helper — apply to every content wrapper for perfect alignment */
.ec-container{ max-width:var(--ec-container); margin:0 auto; padding:0 var(--ec-pad-x); }

/* ---------- persistent top nav (always brand purple) ---------- */
.ec-nav{ background:var(--ec-brand); position:sticky; top:0; z-index:50; }
.ec-nav-in{ max-width:var(--ec-container); margin:0 auto; padding:0 var(--ec-pad-x);
  height:60px; display:flex; align-items:center; gap:22px; }
.ec-logo{ font-size:21px; font-weight:800; letter-spacing:-.3px; color:#fff; text-decoration:none; flex-shrink:0; }
.ec-logo span{ color:var(--ec-brand-orange); }   /* two-orange rule: "CMM" = identity */
/* Real logo image on a white chip — the wordmark is dark-on-transparent, so it
   needs a light backing on the purple nav (same treatment as the admin UI). */
.ec-logo:has(img){ display:inline-flex; align-items:center; background:#fff; border-radius:8px; padding:6px 11px; }
.ec-logo img{ height:24px; width:auto; display:block; }

.ec-tabs{ display:flex; gap:4px; }
.ec-tab{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
  color:var(--ec-on-brand-dim); text-decoration:none; padding:9px 14px; border-radius:9px; }
.ec-tab .ms{ font-size:19px; }
.ec-tab:hover{ color:#fff; background:rgba(255,255,255,.07); }
.ec-tab.active{ color:#fff; background:rgba(255,255,255,.12); }

.ec-spacer{ flex:1; }
.ec-nav-right{ display:flex; align-items:center; gap:10px; }

/* accent CTA (e.g. "Buy a product" on the account page) */
.ec-cta{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13px; font-weight:700;
  background:var(--ec-accent); color:#2a1500; border:none; border-radius:10px; padding:9px 15px; cursor:pointer; text-decoration:none; }
.ec-cta:hover{ background:var(--ec-accent-hover); }
.ec-cta .ms{ font-size:18px; }

/* mini-cart (state persistence in the store) */
.ec-cart{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.08);
  border:1px solid var(--ec-brand-line); color:#fff; cursor:pointer; }
.ec-cart:hover{ background:rgba(255,255,255,.14); }
.ec-cart .ms{ font-size:20px; }
.ec-cart-count{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  background:var(--ec-accent); color:#2a1500; font-size:11px; font-weight:800; border-radius:999px;
  display:flex; align-items:center; justify-content:center; }

/* profile dropdown (logged-in state, persists on both pages) */
.ec-profile{ position:relative; }
.ec-profile-btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,.06); border:1px solid var(--ec-brand-line); border-radius:10px;
  padding:6px 10px 6px 6px; color:#fff; }
.ec-profile-btn:hover{ background:rgba(255,255,255,.12); }
.ec-avatar{ width:30px; height:30px; border-radius:50%; background:var(--ec-accent); color:#2a1500;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.ec-profile-name{ font-size:13px; font-weight:600; color:#fff; max-width:170px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ec-profile-btn .ms{ font-size:18px; color:var(--ec-on-brand-dim); }
@media (max-width:640px){ .ec-profile-name{ display:none; } }
@media (max-width:640px){
  .ec-nav-in{ padding:0 16px; gap:12px; }
  .ec-logo{ font-size:18px; }
  .ec-tabs{ gap:2px; }
  .ec-tab{ font-size:0; padding:9px 11px; }      /* collapse to icon-only */
  .ec-tab .ms{ font-size:22px; }
  .ec-subbar-in{ padding:0 16px; }
  .ec-subbar-in .ctx{ display:none; }            /* drop marketplace tag on phone */
}

.ec-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:236px; background:#fff;
  border:1px solid rgba(40,30,70,.12); border-radius:12px; box-shadow:0 16px 40px rgba(20,12,40,.28);
  padding:6px; display:none; z-index:60; }
.ec-menu.open{ display:block; }
.ec-menu-head{ padding:10px 12px; }
.ec-menu-head .e{ font-size:13px; font-weight:700; color:#1f1733; }
.ec-menu-head .r{ font-size:11.5px; color:#8f8aa3; margin-top:1px; }
.ec-menu a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  font-size:13.5px; font-weight:600; color:#4b4563; text-decoration:none; }
.ec-menu a .ms{ font-size:18px; color:#7a6fae; }
.ec-menu a:hover{ background:#f4f2fb; color:var(--ec-brand); }
.ec-menu-sep{ height:1px; background:rgba(40,30,70,.10); margin:6px 4px; }

/* ---------- breadcrumb sub-bar = the "bridge" ---------- */
.ec-subbar{ background:var(--ec-brand-bar); border-top:1px solid var(--ec-brand-line);
  position:sticky; top:60px; z-index:49; }
.ec-subbar-in{ max-width:var(--ec-container); margin:0 auto; padding:0 var(--ec-pad-x);
  height:42px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ec-on-brand-dim); }
.ec-subbar-in .ms{ font-size:16px; }
.ec-subbar-in a{ color:var(--ec-on-brand-dim); text-decoration:none; }
.ec-subbar-in a:hover{ color:#fff; }
.ec-subbar-in .sep{ color:rgba(255,255,255,.3); }
.ec-subbar-in .cur{ color:#fff; font-weight:600; }
.ec-subbar-in .ctx{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }

/* ---------- fluid page-enter transition ---------- */
@keyframes ec-enter{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ec-page{ animation:ec-enter .28s ease both; }
@media (prefers-reduced-motion:reduce){ .ec-page{ animation:none; } }