.account-body .page-content { padding: 0; min-height: 100svh; }
.account-body .account-page { width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; }
.account-grid {
  display: grid;
  grid-template-areas: "header" "sidebar" "content" "footer";
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.account-grid > *, .account-content, .account-section, .settings-grid > *, .overview-grid > *, .recent-grid > * { min-width: 0; }

/* ── Top bar (identity + hamburger) ──────────────────────────── */
.account-topbar {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-height);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.account-body .account-sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-4); border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: var(--color-surface); }
.account-content { grid-area: content; width: 100%; max-width: var(--container-max); margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-12); }

/* ── Identity button (inside topbar) ─────────────────────────── */
.account-body .account-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: var(--control-min-height);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font: inherit;
  transition: background var(--transition), border-color var(--transition);
}
.account-body .account-identity:hover { background: var(--color-surface-alt); }

/* Identity — user details (name + email) */
.account-identity .user-details {
  display: none;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  text-align: left;
}

/* ── Section heading ─────────────────────────────────────────── */
.account-body .section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--space-4); margin: 0 0 var(--space-6); }
.account-body .section-heading h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-welcome); line-height: 1.25; }
.account-body .section-heading p { max-width: 65ch; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ── Summary / overview / settings grids ─────────────────────── */
.summary-grid, .overview-grid, .recent-grid, .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-card:first-child { grid-column: 1 / -1; }
.account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.account-actions .btn { flex: 1 1 auto; }
.account-body .card-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }

/* ── Footer inside account ───────────────────────────────────── */
.account-body .footer {
  grid-area: footer;
  padding: var(--space-6) var(--space-4);
  margin-top: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.account-body .footer::before { display: none; }

/* Footer wordmark (text logo matching the sidebar) */
.footer-wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  line-height: 1;
}
.footer-wordmark-main { color: var(--color-text); }
.footer-wordmark-accent { color: var(--color-primary); }

/* Footer grid — account override for tighter layout */
.account-body .footer-grid.footer-grid-updated {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.account-body .footer-heading {
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}
.account-body .footer-links a {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.account-body .footer-links a:hover {
  color: var(--color-primary);
}
.account-body .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Identity dropdown (mobile menu) ─────────────────────────── */
.account-identity-wrap { position: relative; margin-left: auto; }

.identity-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 50;
  min-width: 220px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.identity-dropdown[hidden] { display: none; }

.identity-dropdown-header {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.identity-dropdown-header .user-name { font-weight: 600; font-size: var(--font-size-sm); }
.identity-dropdown-header .user-email {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.identity-dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-min-height);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.identity-dropdown-link:hover { color: var(--color-text); background: var(--color-surface-alt); }
.identity-dropdown-logout:hover { color: var(--color-danger); background: var(--color-danger-soft); }

/* ── 768px+ ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .account-body .account-identity { padding: var(--space-2) var(--space-3); }
  .account-identity .user-details { display: flex; }
  .account-topbar { padding-inline: var(--space-8); }
  .account-content { padding: var(--space-8); }
  .account-body .footer { padding: var(--space-8); }
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-card:first-child { grid-column: auto; }
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-actions .btn { flex: 0 1 auto; }
  /* At 768px+ the dropdown is still useful but the header shows details inline */
  .identity-dropdown-header { display: none; }
}

/* ── 1100px+ (desktop sidebar layout) ────────────────────────── */
@media (min-width: 1100px) {
  .account-grid {
    grid-template-areas:
      "sidebar header"
      "sidebar content"
      "sidebar footer";
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
  }
  .account-body .account-sidebar {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow-y: auto;
    padding: var(--space-8) var(--space-4);
    border-bottom: 0;
    border-right: 1px solid var(--color-border);
  }
  .account-body .account-menu-toggle { display: none; }
  .account-body .sidebar-bottom { margin-top: auto; }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-body .footer-bottom { flex-direction: row; }
}

/* ── Mobile footer bottom stacking ───────────────────────────── */
@media (max-width: 767px) {
  .account-body .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Checkout (unchanged)
   ============================================================ */
.checkout-body .checkout-topbar { background:var(--color-surface); border-bottom:1px solid var(--color-border); }
.checkout-topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); max-width:var(--checkout-max); margin:auto; padding:var(--space-4); }
.checkout-body .checkout-page { min-height:100svh; padding:var(--space-8) 0 calc(var(--checkout-mobile-reserve) + env(safe-area-inset-bottom, 0px)); background:var(--color-bg); }
.checkout-body .checkout-container { max-width:var(--checkout-max); padding:0 var(--space-4); }
.checkout-body .checkout-page-header { margin-bottom:var(--space-8); }
.checkout-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); align-items:start; }
.checkout-main { display:flex; flex-direction:column; gap:var(--space-6); min-width:0; }
.checkout-summary { min-width:0; }
.checkout-summary--desktop { display:none; }
.checkout-summary--mobile { display:block; }
.checkout-form { display:flex; flex-direction:column; gap:var(--space-6); min-width:0; }
.checkout-actions { display:none; }
.checkout-sticky-bar { position:fixed; inset:auto 0 0; z-index:40; padding:var(--space-4); padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); background:var(--color-surface); border-top:1px solid var(--color-border); }
.checkout-sticky-bar-inner { display:flex; align-items:center; gap:var(--space-4); max-width:var(--checkout-max); margin:auto; }
.checkout-sticky-bar .checkout-pay-btn { flex:1; width:auto; min-width:0; margin-left:auto; }
@media (min-width:768px) {
  .checkout-body .checkout-container, .checkout-topbar-inner { padding-inline:var(--space-8); }
  .checkout-body .checkout-page { padding-top:var(--space-12); }
}
@media (min-width:1100px) {
  .checkout-layout { grid-template-columns:minmax(0,1fr) var(--checkout-summary-width); gap:var(--space-8); }
  .checkout-summary--desktop { display:block; position:sticky; top:var(--space-8); }
  .checkout-summary--mobile, .checkout-body .checkout-sticky-bar { display:none; }
  .checkout-actions { display:block; }
  .checkout-body .checkout-page { padding-bottom:var(--space-12); }
}

/* Account balance and personal offer stay next to the identity control. */
.account-topbar { flex-wrap: wrap; }
.account-topbar-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--space-2); flex:1; min-width:0; }
.account-topbar-actions .account-identity-wrap { margin-left:0; min-width:0; max-width:100%; }
.account-topbar-actions .account-identity { max-width:100%; }
@media (min-width:768px) {
  .account-topbar-actions { gap:var(--space-4); }
  .account-topbar-actions .account-identity-wrap { max-width:var(--topbar-identity-max); }
}
.guide-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.guide-hero { max-width: var(--guide-search-width); margin-inline: auto; padding-block: var(--space-16) var(--space-10); text-align: center; }
.guide-search { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: var(--guide-search-width); margin-inline: auto; }
.guide-search-field, .guide-filter { min-width: 0; }
.guide-search-control { display: flex; align-items: center; gap: var(--space-3); }
.guide-section { margin-block: var(--space-16); }
.guide-section-heading { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); text-align: center; }
.guide-category-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.guide-card-meta, .guide-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.guide-card-meta { justify-content: space-between; margin-top: auto; }
.guide-article-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-8); padding-bottom: var(--space-12); }
.guide-article-layout > * { min-width: 0; }
.guide-article { width: 100%; max-width: var(--guide-reading-width); }
.guide-support { display: grid; gap: var(--space-6); max-width: var(--container-max); margin: var(--space-12) auto var(--space-6); padding: var(--space-8) var(--space-4); }
.guide-support p { max-width: var(--guide-reading-width); }
.guide-languages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-6); }
@media (min-width: 768px) {
  .guide-search { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }
  .guide-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-support { padding: var(--space-8); }
}
@media (min-width: 1100px) {
  .guide-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-article-layout { grid-template-columns: var(--guide-aside-width) minmax(0, 1fr); gap: var(--space-12); }
  .guide-aside { position: sticky; top: var(--guide-sticky-offset); max-height: calc(100svh - var(--guide-sticky-offset)); overflow-y: auto; }
  .guide-support { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}