/*
 * SWC My Account — Premium Layout CSS
 * Place at: yourtheme/woocommerce/myaccount/my-account.css
 * Enqueued via: functions.php snippet (see functions-snippet.php)
 *
 * Design system: V10/V12/V4 (Barlow Condensed + ember/fire palette)
 * Breakpoints:
 *   < 680px   — mobile (chip rail)
 *   680–980px — tablet (stacked, wider sidebar)
 *   ≥ 980px   — desktop (two-column sidebar + content)
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --swc-void:       #07080b;
  --swc-bg:         #0a0b0f;
  --swc-surface:    #101218;
  --swc-surface-2:  #14171f;
  --swc-surface-3:  #1b1e28;
  --swc-border:     rgba(255,255,255,.07);
  --swc-border-hi:  rgba(255,255,255,.13);

  --swc-text:    #eceef4;
  --swc-muted:   rgba(236,238,244,.52);
  --swc-whisper: rgba(236,238,244,.28);

  --swc-ember:      #ff4500;
  --swc-fire:       #ff7d2a;
  --swc-flame:      #ffae5c;
  --swc-glow:       rgba(255,69,0,.28);
  --swc-glow-heavy: rgba(255,69,0,.45);
  --swc-gold:       #fbbf24;
  --swc-green:      #22c55e;

  --swc-font-display: 'Barlow Condensed', 'Arial Black', sans-serif;
  --swc-font-body:    'Barlow', system-ui, sans-serif;

  --swc-ease:       cubic-bezier(.4,0,.2,1);
  --swc-tr-base:    transform .22s var(--swc-ease),
                    background-color .22s var(--swc-ease),
                    border-color .22s var(--swc-ease),
                    color .22s var(--swc-ease),
                    box-shadow .22s var(--swc-ease),
                    opacity .22s var(--swc-ease);

  --swc-sidebar-w: 260px;
  --swc-gap:       clamp(16px,2.5vw,28px);
  --swc-pad:       clamp(1rem,3vw,2rem);
  /*
   * --swc-header-h: height of the site header above the account page.
   * The sticky chip nav on mobile uses this as its top offset.
   * Override this in your theme's CSS if your header is taller/shorter.
   * Default: 0 (chip bar sticks to very top — safe for most themes).
   */
  --swc-header-h: 0px;
}

/* ============================================================
   PAGE SHELL
   ============================================================ */
.swc-ma-page {
  background: var(--swc-bg);
  color: var(--swc-text);
  font-family: var(--swc-font-body);
  min-height: 60vh;
  padding: var(--swc-pad) var(--swc-pad) clamp(40px,5vw,80px);
  -webkit-font-smoothing: antialiased;
}

/* WooCommerce wraps the template in .woocommerce — normalise it */
.woocommerce .swc-ma-page,
.woocommerce-page .swc-ma-page {
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================================
   GREETING STRIP
   ============================================================ */
.swc-ma-greeting {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px,2vw,20px) clamp(16px,2.5vw,24px);
  margin-bottom: var(--swc-gap);
  border-radius: 18px;
  background: var(--swc-surface);
  border: 1px solid var(--swc-border);
  flex-wrap: wrap;
}

.swc-ma-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--swc-ember), var(--swc-fire));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--swc-font-display);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px var(--swc-glow);
  flex-shrink: 0;
  will-change: transform;
}

.swc-ma-greeting-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.swc-ma-greeting-name {
  font-family: var(--swc-font-display);
  font-size: clamp(1rem,2vw,1.25rem);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--swc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swc-ma-greeting-email {
  font-size: .78rem;
  color: var(--swc-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swc-ma-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.35);
  color: var(--swc-gold);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.swc-ma-upgrade-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--swc-ember), var(--swc-fire));
  color: #fff;
  font-family: var(--swc-font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px var(--swc-glow);
  transition: var(--swc-tr-base);
}

.swc-ma-upgrade-chip:hover {
  box-shadow: 0 8px 22px var(--swc-glow-heavy);
  transform: translateY(-1px);
  color: #fff;
}

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */
.swc-ma-layout {
  display: grid;
  grid-template-columns: var(--swc-sidebar-w) 1fr;
  gap: var(--swc-gap);
  align-items: start;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.swc-ma-sidebar {
  position: sticky;
  top: clamp(70px,8vw,90px);  /* below site header */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--swc-border) transparent;
}

.swc-ma-sidebar::-webkit-scrollbar {
  width: 4px;
}
.swc-ma-sidebar::-webkit-scrollbar-track { background: transparent; }
.swc-ma-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 4px;
}

/* WC navigation wrapper */
.swc-ma-sidebar .woocommerce-MyAccount-navigation {
  background: transparent;
  padding: 0;
}

/* ============================================================
   NAV — SIDEBAR DESKTOP LIST
   ============================================================ */
.swc-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--swc-surface);
  border: 1px solid var(--swc-border);
  border-radius: 18px;
  overflow: hidden;
}

.swc-nav-list li {
  margin: 0;
  padding: 0;
}

/* Separator before logout */
.swc-nav-logout-li {
  border-top: 1px solid var(--swc-border) !important;
  margin-top: 4px;
}

.swc-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--swc-muted);
  font-family: var(--swc-font-body);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  border-left: 3px solid transparent;
  transition: var(--swc-tr-base);
  position: relative;
}

.swc-nav-item:hover {
  background: rgba(255,255,255,.04);
  color: var(--swc-text);
  text-decoration: none;
}

/* Active state — ember left border + background */
.swc-nav-item--active,
.swc-nav-item[aria-current="page"] {
  color: var(--swc-flame);
  border-left-color: var(--swc-ember);
  background: rgba(255,69,0,.07);
  font-weight: 700;
}

.swc-nav-item--active:hover,
.swc-nav-item[aria-current="page"]:hover {
  background: rgba(255,69,0,.10);
  color: var(--swc-flame);
}

/* Logout — red tint */
.swc-nav-item--logout {
  color: rgba(248,113,113,.7);
}
.swc-nav-item--logout:hover {
  color: #f87171;
  background: rgba(239,68,68,.06);
}

.swc-nav-item-icon {
  font-size: 1.05rem;
  width: 1.3rem;
  text-align: center;
  flex-shrink: 0;
  opacity: .85;
}

.swc-nav-item-label {
  flex: 1;
}

.swc-nav-item-arrow {
  font-size: 1.1rem;
  opacity: .5;
  margin-left: auto;
  flex-shrink: 0;
}

/* ============================================================
   NAV — MOBILE CHIP RAIL
   (hidden on desktop, shown on mobile via responsive rules)
   ============================================================ */
.swc-nav-chips {
  display: none;     /* shown only on mobile — see responsive */
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 2px 10px;
  margin-bottom: 14px;
}
.swc-nav-chips::-webkit-scrollbar { display: none; }

.swc-nav-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--swc-muted);
  font-size: .8rem;
  font-weight: 700;
  background: var(--swc-surface);
  border: 1px solid var(--swc-border);
  transition: var(--swc-tr-base);
  white-space: nowrap;
  font-family: var(--swc-font-body);
}

.swc-nav-chip:hover {
  background: var(--swc-surface-2);
  border-color: var(--swc-border-hi);
  color: var(--swc-text);
  text-decoration: none;
}

.swc-nav-chip--active {
  background: rgba(255,69,0,.12);
  border-color: rgba(255,69,0,.45);
  color: var(--swc-flame);
  font-weight: 700;
}

.swc-nav-chip--logout {
  color: rgba(248,113,113,.7);
  border-color: rgba(239,68,68,.2);
}
.swc-nav-chip--logout:hover { color: #f87171; }

.swc-nav-chip-icon {
  font-size: .9rem;
  opacity: .85;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.swc-ma-content {
  background: var(--swc-surface);
  border: 1px solid var(--swc-border);
  border-radius: 18px;
  padding: clamp(20px,3vw,32px);
  min-width: 0;  /* prevent grid blowout */
}

/* WooCommerce default paragraph / heading resets inside content */
.swc-ma-content h2 {
  color: var(--swc-text);
  font-family: var(--swc-font-display);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.swc-ma-content p {
  color: var(--swc-muted);
}

.swc-ma-content a {
  color: var(--swc-fire);
  transition: color .18s var(--swc-ease);
}
.swc-ma-content a:hover { color: var(--swc-flame); }

/* WC tables inside My Account */
.swc-ma-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  color: var(--swc-text);
}

.swc-ma-content table.shop_table th {
  background: rgba(255,255,255,.04);
  color: var(--swc-muted);
  font-family: var(--swc-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--swc-border);
  text-align: left;
}

.swc-ma-content table.shop_table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--swc-border);
  font-size: .9rem;
  vertical-align: middle;
}

.swc-ma-content table.shop_table tr:last-child td {
  border-bottom: none;
}

.swc-ma-content table.shop_table tr:hover td {
  background: rgba(255,255,255,.02);
}

/* WC notices inside content */
.swc-ma-content .woocommerce-message,
.swc-ma-content .woocommerce-info,
.swc-ma-content .woocommerce-error {
  border-radius: 10px;
  border-top: none;
  padding: 12px 16px;
  margin-bottom: 1.2rem;
  font-size: .88rem;
}

.swc-ma-content .woocommerce-message {
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.25);
  color: #bbf7d0;
}

.swc-ma-content .woocommerce-info {
  background: rgba(96,165,250,.08);
  border: 1px solid rgba(96,165,250,.25);
  color: #bfdbfe;
}

.swc-ma-content .woocommerce-error {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  color: #fecaca;
}

/* WC buttons inside content */
.swc-ma-content .button,
.swc-ma-content .woocommerce-button,
.swc-ma-content button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--swc-ember), var(--swc-fire));
  color: #fff;
  font-family: var(--swc-font-display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 20px var(--swc-glow);
  transition: var(--swc-tr-base);
}

.swc-ma-content .button:hover,
.swc-ma-content .woocommerce-button:hover,
.swc-ma-content button[type="submit"]:hover {
  box-shadow: 0 10px 28px var(--swc-glow-heavy);
  transform: translateY(-1px);
  color: #fff;
}

/* WC form inputs inside content */
.swc-ma-content input[type="text"],
.swc-ma-content input[type="email"],
.swc-ma-content input[type="tel"],
.swc-ma-content input[type="password"],
.swc-ma-content input[type="number"],
.swc-ma-content select,
.swc-ma-content textarea {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--swc-border-hi);
  border-radius: 10px;
  color: var(--swc-text);
  padding: 10px 14px;
  font-family: var(--swc-font-body);
  font-size: .9rem;
  width: 100%;
  transition: border-color .2s var(--swc-ease), box-shadow .2s var(--swc-ease);
}

.swc-ma-content input:focus,
.swc-ma-content select:focus,
.swc-ma-content textarea:focus {
  outline: none;
  border-color: rgba(255,69,0,.5);
  box-shadow: 0 0 0 3px rgba(255,69,0,.12);
}

.swc-ma-content label {
  color: var(--swc-muted);
  font-size: .82rem;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

/* WC fieldset */
.swc-ma-content fieldset {
  border: 1px solid var(--swc-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 1.2rem;
}

.swc-ma-content legend {
  color: var(--swc-text);
  font-family: var(--swc-font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 0 8px;
}

/* WC order status badges */
.swc-ma-content .woocommerce-order-status,
.swc-ma-content mark.order-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  color: var(--swc-muted);
  border: 1px solid var(--swc-border);
}

.swc-ma-content .wc-processing,
.swc-ma-content .status-processing { background: rgba(96,165,250,.12); color: #93c5fd; border-color: rgba(96,165,250,.3); }
.swc-ma-content .wc-completed,
.swc-ma-content .status-completed  { background: rgba(34,197,94,.12);  color: #86efac; border-color: rgba(34,197,94,.3);  }
.swc-ma-content .wc-cancelled,
.swc-ma-content .status-cancelled  { background: rgba(239,68,68,.1);   color: #fca5a5; border-color: rgba(239,68,68,.25); }
.swc-ma-content .wc-on-hold,
.swc-ma-content .status-on-hold    { background: rgba(245,158,11,.1);  color: #fcd34d; border-color: rgba(245,158,11,.3); }

/* Dashboard overview links */
.swc-ma-content .woocommerce-MyAccount-overview ul,
.swc-ma-content .woocommerce-MyAccount-dashboard ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   WOOCOMMERCE DEFAULT CLASS OVERRIDES
   (keeps compatibility while applying dark theme)
   ============================================================ */

/* Remove WC's default blue/light sidebar background */
.woocommerce-MyAccount-navigation {
  background: transparent !important;
  border: none !important;
  float: none !important;
  width: auto !important;
}

/* Remove WC's default content margin from sidebar float */
.woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Remove WC's default navigation ul bullets */
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.woocommerce-MyAccount-navigation ul li {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul li a {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ============================================================
   RESPONSIVE — TABLET (680–979px)
   ============================================================ */
@media (max-width: 979px) {
  :root {
    --swc-sidebar-w: 210px;
  }

  .swc-ma-content {
    padding: clamp(16px,2.5vw,24px);
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (< 680px)
   ============================================================
   Layout philosophy on mobile:
     1. Compact greeting strip (single row: avatar + name + chip)
     2. Sticky chip nav bar pinned below site header — always reachable
     3. Full-width content card scrolls underneath
     4. All interactive targets ≥ 44px (Apple/Google minimum)
     5. Tables scroll horizontally — no horizontal page overflow
     6. Safe-area-inset-bottom on page for iOS home bar
   ============================================================ */
@media (max-width: 679px) {

  /* ── Page shell ─────────────────────────────────────────── */
  .swc-ma-page {
    padding: 0 0 max(24px, env(safe-area-inset-bottom));
  }

  /* ── Greeting strip ─────────────────────────────────────── */
  .swc-ma-greeting {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    /* Flush to page edges, bottom border only */
    border-bottom: 1px solid var(--swc-border);
    background: var(--swc-void);
    flex-wrap: nowrap;
  }

  .swc-ma-avatar {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .swc-ma-greeting-text {
    flex: 1;
    min-width: 0;
    gap: 1px;
  }

  .swc-ma-greeting-name {
    font-size: .9rem;
  }

  /* Hide email on mobile — saves space, user knows their own email */
  .swc-ma-greeting-email {
    display: none;
  }

  .swc-ma-plan-chip,
  .swc-ma-upgrade-chip {
    flex-shrink: 0;
    font-size: .72rem;
    padding: 4px 10px;
    white-space: nowrap;
  }

  /* ── Layout: single-column grid (NOT flex — sticky needs grid) ─ */
  .swc-ma-layout {
    grid-template-columns: 1fr;  /* collapse to one column */
    gap: 0;
  }

  /* ── Sidebar: sticky tab bar ────────────────────────────────── */
  /*
   * position:sticky works reliably on grid children.
   * align-self:start is required — without it the grid item
   * stretches to full grid height and sticky never triggers.
   *
   * CRITICAL: the desktop rule sets overflow-y:auto and overflow-x:hidden
   * as separate properties. We must reset BOTH explicitly here —
   * overflow:visible alone does not reliably override split-axis rules
   * across all browsers, and any non-visible overflow on the sticky
   * element itself breaks the chip bar's edge masking.
   */
  .swc-ma-sidebar {
    position: sticky;
    top: var(--swc-header-h);
    align-self: start;
    z-index: 500;
    max-height: none;
    overflow-y: hidden;   /* explicit reset of desktop overflow-y: auto  */
    overflow-x: hidden;   /* explicit reset of desktop overflow-x: hidden */
    background: rgba(7,8,11,.97);
    border-bottom: 1px solid var(--swc-border);
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Hide the desktop list entirely */
  .swc-nav-list { display: none !important; }

  /* Show the chip rail */
  .swc-nav-chips {
    display: flex;
    margin-bottom: 0;           /* override base 14px margin — no gap under sticky bar */
    padding: 8px 16px 0;        /* bottom-0 so active bottom border is flush with bar edge */
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Fade edges to hint scroll */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .swc-nav-chips::-webkit-scrollbar { display: none; }

  /* ── Chips: app-tab-bar style ───────────────────────────── */
  .swc-nav-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 60px;
    min-height: 52px;           /* strong touch target */
    padding: 6px 10px 10px;     /* extra bottom for the active border */
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--swc-whisper);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    scroll-snap-align: start;
    text-decoration: none;
    transition: color .18s var(--swc-ease);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }

  .swc-nav-chip:hover {
    background: transparent;
    border-color: transparent;
    color: var(--swc-muted);
  }

  .swc-nav-chip-icon {
    font-size: 1.2rem;
    opacity: 1;
    line-height: 1;
  }

  .swc-nav-chip-label {
    line-height: 1;
  }

  /* Active chip: ember bottom border (like native iOS tab bar) */
  .swc-nav-chip--active {
    color: var(--swc-flame);
    border-bottom: 2px solid var(--swc-ember);
    background: transparent;
  }

  /* Logout chip: right-aligned, red tint */
  .swc-nav-chip--logout {
    margin-left: auto;
    color: rgba(248,113,113,.55);
    min-width: 44px;
  }
  .swc-nav-chip--logout .swc-nav-chip-label {
    display: none; /* icon-only for logout on mobile — saves space */
  }
  .swc-nav-chip--logout .swc-nav-chip-icon {
    font-size: 1.1rem;
  }

  /* ── Content area ───────────────────────────────────────── */
  .swc-ma-content {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    background: var(--swc-surface);
    padding: 20px 16px max(20px, env(safe-area-inset-bottom));
    min-height: 60vh;
    /* Ensure in-page anchor scrolls don't hide under sticky nav */
    scroll-margin-top: calc(var(--swc-header-h) + 60px);
  }

  /* ── Tables: stacked card layout ────────────────────────────
   *
   * WC puts data-title="Column Name" on every <td> in shop_table
   * and woocommerce-orders-table. We use that to show the label
   * inline before each cell value — one row becomes one card.
   * The <thead> is hidden entirely (column headers no longer make
   * sense once rows are stacked rather than columns).
   *
   * This covers: Orders, Downloads, Payment Methods, Addresses.
   * ──────────────────────────────────────────────────────────── */

  /* Hide column header row — not needed in card layout */
  .swc-ma-content table.shop_table thead,
  .swc-ma-content table.woocommerce-orders-table thead {
    display: none !important;
  }

  /* Reset table to block so rows stack as cards */
  .swc-ma-content table.shop_table,
  .swc-ma-content table.woocommerce-orders-table {
    display: block;
    width: 100%;
    white-space: normal;        /* allow text to wrap inside cells */
  }

  .swc-ma-content table.shop_table tbody,
  .swc-ma-content table.woocommerce-orders-table tbody {
    display: block;
  }

  /* Each row = one card */
  .swc-ma-content table.shop_table tr,
  .swc-ma-content table.woocommerce-orders-table tr {
    display: block;
    background: var(--swc-surface-2);
    border: 1px solid var(--swc-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .swc-ma-content table.shop_table tr:last-child,
  .swc-ma-content table.woocommerce-orders-table tr:last-child {
    margin-bottom: 0;
  }

  /* Each cell = one labelled row inside the card */
  .swc-ma-content table.shop_table td,
  .swc-ma-content table.woocommerce-orders-table td {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--swc-border);
    font-size: .88rem;
    white-space: normal;
  }

  .swc-ma-content table.shop_table td:last-child,
  .swc-ma-content table.woocommerce-orders-table td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .swc-ma-content table.shop_table td:first-child,
  .swc-ma-content table.woocommerce-orders-table td:first-child {
    padding-top: 0;
  }

  /* Inline label from data-title attribute */
  .swc-ma-content table.shop_table td[data-title]::before,
  .swc-ma-content table.woocommerce-orders-table td[data-title]::before {
    content: attr(data-title) ":";
    display: inline-block;
    flex-shrink: 0;
    min-width: 72px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--swc-muted);
  }

  /* Cells with no data-title (e.g. action buttons row) — full width */
  .swc-ma-content table.shop_table td:not([data-title]),
  .swc-ma-content table.woocommerce-orders-table td:not([data-title]) {
    justify-content: flex-end;
    border-bottom: none;
  }

  /* ── Buttons: full-width, strong touch targets ──────────── */
  .swc-ma-content .button,
  .swc-ma-content .woocommerce-button,
  .swc-ma-content button[type="submit"],
  .swc-ma-content input[type="submit"] {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
    justify-content: center;
  }

  /* Keep inline view/action buttons compact */
  .swc-ma-content td .button,
  .swc-ma-content td .woocommerce-button {
    width: auto;
    min-height: 36px;
    font-size: .78rem;
    padding: 7px 12px;
  }

  /* ── Form fields: proper touch targets ──────────────────── */
  .swc-ma-content input[type="text"],
  .swc-ma-content input[type="email"],
  .swc-ma-content input[type="tel"],
  .swc-ma-content input[type="password"],
  .swc-ma-content input[type="number"],
  .swc-ma-content select,
  .swc-ma-content textarea {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }

  /* ── Form layout: full width labels on mobile ───────────── */
  .swc-ma-content .woocommerce-address-fields .form-row,
  .swc-ma-content .woocommerce-EditAccountForm .form-row {
    width: 100% !important;
    float: none !important;
    margin: 0 0 14px !important;
    clear: both;
  }

  /* ── Notices ─────────────────────────────────────────────── */
  .swc-ma-content .woocommerce-message,
  .swc-ma-content .woocommerce-info,
  .swc-ma-content .woocommerce-error {
    font-size: .84rem;
    padding: 10px 14px;
  }

  /* ── WC PPV account tabs (inside content) ───────────────── */
  /* The PPV plugin renders .ppv-tabs — make those scroll on mobile too */
  .swc-ma-content .ppv-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .swc-ma-content .ppv-tabs::-webkit-scrollbar { display: none; }
  .swc-ma-content .ppv-tab {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
  }

  /* PPV video grid: 2 columns on mobile */
  .swc-ma-content .ppv-grid {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  /* PPV wallet grid: stack on mobile */
  .swc-ma-content .ppv-wallet-grid {
    grid-template-columns: 1fr;
  }

}

/* ── Extra small: 380px and below ────────────────────────── */
@media (max-width: 380px) {
  .swc-nav-chip {
    min-width: 52px;
    padding: 6px 7px 10px;
    font-size: .54rem;
  }
  .swc-nav-chip-icon {
    font-size: 1.1rem;
  }

  /* PPV video grid: single column on very small screens */
  .swc-ma-content .ppv-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PRINT RESETS
   ============================================================ */
@media print {
  .swc-ma-sidebar,
  .swc-nav-chips,
  .swc-ma-greeting,
  .swc-ma-upgrade-chip { display: none !important; }

  .swc-ma-layout { display: block; }
  .swc-ma-content {
    border: none; padding: 0;
    background: #fff; color: #000;
    border-radius: 0;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .swc-nav-item,
  .swc-nav-chip,
  .swc-ma-upgrade-chip,
  .swc-ma-content .button {
    transition: none !important;
  }
}


/* ============================================================
   STARTER PLAN CROSS-SELLS — MY ACCOUNT DASHBOARD
   ============================================================ */
.swc-ma-cross-sells {
  margin-top: clamp(24px,3vw,36px);
  padding-top: clamp(22px,3vw,32px);
  border-top: 1px solid var(--swc-border);
}

.swc-ma-cross-sells-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.swc-ma-cross-sells-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--swc-fire);
  font-family: var(--swc-font-display);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.swc-ma-cross-sells .swc-ma-cross-sells-head h2 {
  margin: 0;
  font-size: clamp(1.45rem,2.5vw,2rem);
  line-height: 1;
}

.swc-ma-cross-sells-head p {
  margin: 8px 0 0;
  max-width: 680px;
  font-size: .9rem;
}

.swc-ma-cross-sells-badge {
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid rgba(251,191,36,.28);
  border-radius: 999px;
  background: rgba(251,191,36,.08);
  color: var(--swc-gold);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.swc-ma-cross-sells-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.swc-ma-cross-sell-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(16px,2.2vw,22px);
  border: 1px solid var(--swc-border-hi);
  border-radius: 16px;
  background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

.swc-ma-cross-sell-card.is-featured {
  border-color: rgba(255,69,0,.55);
  background:
    radial-gradient(circle at 50% 0,rgba(255,69,0,.12),transparent 45%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow: 0 18px 38px rgba(255,69,0,.12);
}

.swc-ma-cross-sell-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 10px;
  color: var(--swc-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.swc-ma-cross-sell-topline strong {
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg,var(--swc-ember),var(--swc-fire));
  color: #fff;
  font-size: .62rem;
  letter-spacing: .06em;
}

.swc-ma-cross-sell-card h3 {
  margin: 0 0 6px;
  color: var(--swc-text);
  font-family: var(--swc-font-display);
  font-size: clamp(1.15rem,2vw,1.45rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.swc-ma-cross-sell-price {
  margin-bottom: 10px;
  color: var(--swc-fire);
  font-family: var(--swc-font-display);
  font-size: clamp(1.4rem,2.6vw,2rem);
  font-weight: 900;
  line-height: 1;
}

.swc-ma-cross-sell-price del {
  color: var(--swc-whisper);
  font-size: .65em;
  font-weight: 700;
}

.swc-ma-cross-sell-price ins {
  color: inherit;
  text-decoration: none;
}

.swc-ma-cross-sell-card > p {
  min-height: 42px;
  margin: 0 0 12px;
  color: var(--swc-muted);
  font-size: .84rem;
  line-height: 1.45;
}

.swc-ma-cross-sell-benefits {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.swc-ma-cross-sell-benefits li {
  position: relative;
  padding: 6px 0 6px 18px;
  border-bottom: 1px solid var(--swc-border);
  color: rgba(236,238,244,.75);
  font-size: .78rem;
}

.swc-ma-cross-sell-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--swc-green);
  font-weight: 900;
}

.swc-ma-cross-sell-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  border: 1px solid rgba(255,69,0,.55);
  border-radius: 10px;
  background: rgba(255,69,0,.08);
  color: #fff !important;
  font-family: var(--swc-font-display);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: var(--swc-tr-base);
}

.swc-ma-cross-sell-card.is-featured .swc-ma-cross-sell-button {
  border-color: transparent;
  background: linear-gradient(135deg,var(--swc-ember),var(--swc-fire));
  box-shadow: 0 8px 22px var(--swc-glow);
}

.swc-ma-cross-sell-button:hover {
  transform: translateY(-1px);
  border-color: var(--swc-fire);
  background: linear-gradient(135deg,var(--swc-ember),var(--swc-fire));
  box-shadow: 0 10px 28px var(--swc-glow-heavy);
}

.swc-ma-cross-sells-note {
  margin: 12px 0 0 !important;
  color: var(--swc-whisper) !important;
  font-size: .72rem !important;
  text-align: center;
}

@media (max-width: 760px) {
  .swc-ma-cross-sells-head {
    display: block;
  }

  .swc-ma-cross-sells-badge {
    display: inline-flex;
    margin-top: 12px;
  }

  .swc-ma-cross-sells-grid {
    grid-template-columns: 1fr;
  }

  .swc-ma-cross-sell-card > p {
    min-height: 0;
  }
}

@media (max-width: 679px) {
  .swc-ma-cross-sells {
    margin-top: 24px;
    padding-top: 22px;
  }
}


/* ============================================================
   NON-MEMBER 3-PLAN OFFER — COLLAPSIBLE + PERSISTENT
   v1.0.2: stronger callout / clearer click affordance
   ============================================================ */
.swc-ma-membership-offer {
  position: relative;
  margin: 0 0 clamp(24px,3vw,34px);
  padding: 0;
  border: 1px solid rgba(255,125,42,.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 0,rgba(255,69,0,.15),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,69,0,.03) inset;
  overflow: hidden;
}

.swc-ma-membership-offer:not([open])::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(255,125,42,.48),transparent);
}

.swc-ma-membership-offer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px,2.5vw,32px);
  min-height: 112px;
  padding: clamp(20px,2.4vw,28px);
  cursor: pointer;
  list-style: none !important;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color .2s var(--swc-ease),
    box-shadow .2s var(--swc-ease);
}

.swc-ma-membership-offer-summary::-webkit-details-marker { display: none !important; }
.swc-ma-membership-offer-summary::marker { content: '' !important; font-size: 0 !important; }
.swc-ma-membership-offer-summary::before { content: none !important; display: none !important; }

.swc-ma-membership-offer-summary:hover {
  background: rgba(255,69,0,.055);
}

.swc-ma-membership-offer-summary:hover .swc-ma-membership-offer-toggle {
  transform: translateY(-1px);
  background: linear-gradient(135deg,var(--swc-ember),var(--swc-fire));
  border-color: transparent;
  box-shadow: 0 9px 24px var(--swc-glow);
}

.swc-ma-membership-offer-summary:focus-visible {
  outline: 2px solid var(--swc-fire);
  outline-offset: -4px;
}

.swc-ma-membership-offer-summary-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 760px;
}

.swc-ma-membership-offer-summary .swc-ma-cross-sells-kicker {
  margin-bottom: 7px;
  color: var(--swc-fire);
  font-size: .76rem;
  letter-spacing: .14em;
}

.swc-ma-membership-offer-title {
  display: block;
  margin: 0;
  color: #fff;
  font-family: var(--swc-font-display);
  font-size: clamp(1.5rem,2.5vw,2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.swc-ma-membership-offer-copy {
  display: block;
  margin-top: 9px;
  max-width: 700px;
  color: rgba(236,238,244,.78);
  font-size: .9rem;
  line-height: 1.45;
}

.swc-ma-membership-offer-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.swc-ma-membership-offer-plan-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 999px;
  background: rgba(251,191,36,.08);
  color: var(--swc-gold);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.swc-ma-membership-offer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(255,125,42,.65);
  border-radius: 11px;
  background: rgba(255,69,0,.12);
  color: #fff;
  font-family: var(--swc-font-display);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition:
    transform .18s var(--swc-ease),
    background .18s var(--swc-ease),
    border-color .18s var(--swc-ease),
    box-shadow .18s var(--swc-ease);
}

.swc-ma-membership-offer-chevron {
  display: inline-block;
  font-size: 1.08rem;
  line-height: 1;
  color: var(--swc-flame);
  transition: transform .18s var(--swc-ease);
}

.swc-ma-membership-offer[open] .swc-ma-membership-offer-chevron {
  transform: rotate(180deg);
}

.swc-ma-membership-offer[open] .swc-ma-membership-offer-summary {
  border-bottom: 1px solid rgba(255,125,42,.2);
  background: rgba(255,69,0,.035);
}

.swc-ma-membership-offer[open] .swc-ma-membership-offer-toggle-label {
  font-size: 0;
}

.swc-ma-membership-offer[open] .swc-ma-membership-offer-toggle-label::before {
  content: 'Hide plans';
  font-size: .82rem;
}

.swc-ma-membership-offer-panel {
  padding: clamp(18px,2.2vw,24px);
  background: rgba(0,0,0,.08);
}

.swc-ma-membership-offer-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.swc-ma-membership-offer .swc-ma-cross-sell-card {
  min-height: 100%;
}

.swc-ma-membership-offer .swc-ma-cross-sell-card.is-featured {
  transform: translateY(-2px);
}

.swc-ma-membership-offer .swc-ma-cross-sells-note {
  margin-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .swc-ma-membership-offer-summary,
  .swc-ma-membership-offer-toggle,
  .swc-ma-membership-offer-chevron {
    transition: none !important;
  }
}

@media (max-width: 1050px) {
  .swc-ma-membership-offer-grid {
    grid-template-columns: 1fr;
  }

  .swc-ma-membership-offer .swc-ma-cross-sell-card.is-featured {
    transform: none;
  }
}

@media (max-width: 820px) {
  .swc-ma-membership-offer-summary {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
  }

  .swc-ma-membership-offer-action {
    width: 100%;
    justify-content: flex-start;
  }

  .swc-ma-membership-offer-toggle {
    margin-left: auto;
  }
}

@media (max-width: 679px) {
  .swc-ma-membership-offer {
    margin: 0 0 20px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .swc-ma-membership-offer-summary {
    padding: 18px 16px;
    gap: 14px;
  }

  .swc-ma-membership-offer-title {
    font-size: clamp(1.35rem,7vw,1.75rem);
  }

  .swc-ma-membership-offer-copy {
    display: block;
    margin-top: 7px;
    font-size: .82rem;
  }

  .swc-ma-membership-offer-action {
    gap: 8px;
  }

  .swc-ma-membership-offer-plan-count {
    min-height: 38px;
    padding: 7px 10px;
    font-size: .64rem;
  }

  .swc-ma-membership-offer-toggle {
    min-height: 42px;
    padding: 9px 12px;
    font-size: .72rem;
  }

  .swc-ma-membership-offer[open] .swc-ma-membership-offer-toggle-label::before {
    font-size: .72rem;
  }

  .swc-ma-membership-offer-panel {
    padding: 16px;
  }
}



/* ============================================================
   NON-MEMBER OFFER v1.0.4 — EXPLICIT SHOW/HIDE CONTROL
   ============================================================ */
.swc-ma-membership-offer {
  border-color: rgba(255,125,42,.42);
  box-shadow: 0 16px 34px rgba(0,0,0,.24), 0 0 0 1px rgba(255,69,0,.035);
}

.swc-ma-membership-offer:not([open]) .swc-ma-membership-offer-summary {
  background:
    radial-gradient(circle at 92% 30%,rgba(255,69,0,.12),transparent 32%),
    linear-gradient(180deg,rgba(255,125,42,.055),rgba(255,255,255,.018));
}

.swc-ma-membership-offer:not([open]) .swc-ma-membership-offer-summary:hover {
  background:
    radial-gradient(circle at 92% 30%,rgba(255,69,0,.18),transparent 34%),
    linear-gradient(180deg,rgba(255,125,42,.085),rgba(255,255,255,.026));
}

.swc-ma-membership-offer-summary {
  min-height: 104px;
  padding: 19px 20px;
}

.swc-ma-membership-offer-copy {
  max-width: 760px;
  color: rgba(236,238,244,.72);
  font-size: .88rem;
  line-height: 1.45;
}

.swc-ma-membership-offer-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

.swc-ma-membership-offer-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 999px;
  background: rgba(251,191,36,.085);
  color: var(--swc-gold);
  font-family: var(--swc-font-display);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.swc-ma-membership-offer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(255,125,42,.68);
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(255,69,0,.16),rgba(255,125,42,.10));
  color: #fff;
  box-shadow: 0 5px 16px rgba(255,69,0,.12);
  font-family: var(--swc-font-display);
  font-size: .78rem !important;
  font-weight: 900;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Native details state drives the label. */
.swc-ma-membership-offer-toggle-text::before {
  content: "Show access plans";
}

.swc-ma-membership-offer[open] .swc-ma-membership-offer-toggle-text::before {
  content: "Hide access plans";
}

/* Override older v1.0.x open-state text replacement. */
.swc-ma-membership-offer[open] .swc-ma-membership-offer-toggle {
  font-size: .78rem !important;
}

.swc-ma-membership-offer[open] .swc-ma-membership-offer-toggle::before {
  content: none !important;
}

.swc-ma-membership-offer-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--swc-fire);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  transform-origin: center;
}

.swc-ma-membership-offer[open] .swc-ma-membership-offer-chevron {
  transform: rotate(180deg);
}

.swc-ma-membership-offer[open] {
  border-color: rgba(255,69,0,.55);
}

.swc-ma-membership-offer[open] .swc-ma-membership-offer-summary {
  background: rgba(255,69,0,.035);
  border-bottom-color: rgba(255,125,42,.22);
}

@media (max-width: 679px) {
  .swc-ma-membership-offer-summary {
    min-height: 0;
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .swc-ma-membership-offer-copy {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
  }

  .swc-ma-membership-offer-action {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .swc-ma-membership-offer-count {
    display: inline-flex;
  }

  .swc-ma-membership-offer-toggle,
  .swc-ma-membership-offer[open] .swc-ma-membership-offer-toggle {
    flex: 1 1 auto;
    min-height: 44px;
    font-size: .76rem !important;
  }
}

@media (max-width: 430px) {
  .swc-ma-membership-offer-action {
    align-items: stretch;
  }

  .swc-ma-membership-offer-count {
    min-width: 74px;
  }

  .swc-ma-membership-offer-toggle {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swc-ma-membership-offer-chevron {
    transition: none !important;
  }
}

/* ============================================================
   SWC MY ACCOUNT v2 — MOBILE HUB / NO HIDDEN NAVIGATION
   ============================================================ */

/* The acquisition block is intentionally always visible now. */
.swc-ma-membership-offer--open {
  border-color: rgba(255,69,0,.55);
}
.swc-ma-membership-offer--open .swc-ma-membership-offer-summary {
  cursor: default;
  user-select: text;
  -webkit-user-select: text;
  border-bottom: 1px solid rgba(255,125,42,.22);
  background: rgba(255,69,0,.035);
}
.swc-ma-membership-offer--open .swc-ma-membership-offer-summary:hover {
  background: rgba(255,69,0,.035);
}

/* Mobile-only structures are dormant on desktop. */
.swc-ma-mobile-hub,
.swc-ma-mobile-backbar,
.swc-ma-mobile-related {
  display: none;
}

@media (max-width: 679px) {
  /* The old horizontal chip rail is retired. Nothing important lives off-screen. */
  .swc-ma-sidebar {
    display: none !important;
  }

  .swc-ma-layout {
    display: block;
  }

  .swc-ma-content {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 0;
    background: var(--swc-void);
  }

  /* Dashboard greeting becomes the app-like header from the prototype. */
  .swc-ma-page--dashboard .swc-ma-greeting {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr);
    gap: 0 12px;
    padding: 16px;
    margin: 0;
    background: #0b0c0f;
  }

  .swc-ma-page--dashboard .swc-ma-avatar {
    width: 44px;
    height: 44px;
    border-radius: 0;
    grid-row: 1;
    grid-column: 1;
  }

  .swc-ma-page--dashboard .swc-ma-greeting-text {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
  }

  .swc-ma-page--dashboard .swc-ma-greeting-name {
    font-size: 1.02rem;
  }

  .swc-ma-page--dashboard .swc-ma-greeting-email {
    display: block;
    margin-top: 2px;
    font-size: .69rem;
  }

  .swc-ma-page--dashboard .swc-ma-plan-chip,
  .swc-ma-page--dashboard .swc-ma-upgrade-chip {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    border-radius: 0;
    justify-content: center;
    font-size: .78rem;
    letter-spacing: .1em;
  }

  /* Endpoint pages put the task first; the greeting is redundant there. */
  .swc-ma-page--endpoint .swc-ma-greeting {
    display: none;
  }

  /* Plans: compact, fully visible, no disclosure click required. */
  .swc-ma-membership-offer {
    margin: 0;
    border-top: 0;
    border-bottom-color: var(--swc-border);
    box-shadow: none;
    background: #0b0c0f;
  }

  .swc-ma-membership-offer--open .swc-ma-membership-offer-summary {
    padding: 18px 16px 12px;
    border-bottom: 0;
    background: transparent;
  }

  .swc-ma-membership-offer-title {
    font-size: clamp(1.65rem,8vw,2.15rem);
  }

  .swc-ma-membership-offer-copy {
    max-width: 34rem;
    font-size: .83rem;
    color: rgba(236,238,244,.72);
  }

  .swc-ma-membership-offer-panel {
    padding: 0 16px 16px;
    background: transparent;
  }

  .swc-ma-membership-offer-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0;
    border: 1px solid var(--swc-border);
  }

  .swc-ma-membership-offer .swc-ma-cross-sell-card,
  .swc-ma-membership-offer .swc-ma-cross-sell-card.is-featured {
    min-height: 0;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--swc-border);
    border-radius: 0;
    background: rgba(255,255,255,.018);
    box-shadow: none;
    transform: none;
  }

  .swc-ma-membership-offer .swc-ma-cross-sell-card:last-child {
    border-bottom: 0;
  }

  .swc-ma-membership-offer .swc-ma-cross-sell-topline,
  .swc-ma-membership-offer .swc-ma-cross-sell-card p,
  .swc-ma-membership-offer .swc-ma-cross-sell-benefits,
  .swc-ma-membership-offer .swc-ma-cross-sell-button,
  .swc-ma-membership-offer .swc-ma-cross-sells-note {
    display: none !important;
  }

  .swc-ma-membership-offer .swc-ma-cross-sell-card h3 {
    display: inline-block;
    width: calc(100% - 90px);
    margin: 0;
    color: var(--swc-muted);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle;
  }

  .swc-ma-membership-offer .swc-ma-cross-sell-price {
    display: inline-flex;
    width: 86px;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    color: var(--swc-fire);
    font-size: 1.25rem;
    font-weight: 900;
    vertical-align: middle;
  }

  /* Make the whole plan row actionable without nesting links. */
  .swc-ma-membership-offer .swc-ma-cross-sell-card {
    position: relative;
  }
  .swc-ma-membership-offer .swc-ma-cross-sell-card .swc-ma-cross-sell-button {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block !important;
    opacity: 0;
    font-size: 0;
    margin: 0;
    padding: 0;
  }

  /* Keep standard account endpoint content readable with edge padding. */
  .swc-ma-page--endpoint .swc-ma-content > :not(.swc-ma-mobile-backbar):not(.swc-ma-mobile-related) {
    margin-left: 14px;
    margin-right: 14px;
  }
  .swc-ma-page--endpoint .swc-ma-content > .woocommerce-notices-wrapper {
    margin-top: 14px;
  }

  /* Sticky endpoint bar: one obvious route back to the complete hub. */
  .swc-ma-mobile-backbar {
    position: sticky;
    top: var(--swc-header-h);
    z-index: 550;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    min-height: 52px;
    margin: 0 0 16px !important;
    border-bottom: 1px solid var(--swc-border);
    background: rgba(10,11,15,.98);
  }

  .swc-ma-mobile-back,
  .swc-ma-mobile-backbar strong {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 14px;
    font-family: var(--swc-font-display);
    font-size: .88rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .swc-ma-mobile-back {
    border-right: 1px solid var(--swc-border);
    color: #fff !important;
    text-decoration: none;
  }

  .swc-ma-mobile-backbar strong {
    color: #fff;
  }

  /* Full account hub on dashboard — every destination visible in one scroll. */
  .swc-ma-mobile-hub,
  .swc-ma-mobile-related {
    display: block;
    margin: 18px 0 0;
    border-top: 1px solid var(--swc-border);
    background: #0b0c0f;
  }

  .swc-ma-mobile-hub-title {
    margin: 0 !important;
    padding: 13px 14px 10px;
    border-bottom: 1px solid var(--swc-border);
    color: #fff !important;
    font-family: var(--swc-font-display);
    font-size: 1rem !important;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  .swc-ma-mobile-group-label {
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--swc-border);
    color: rgba(236,238,244,.48);
    font-family: var(--swc-font-display);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .swc-ma-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .swc-ma-mobile-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 74px;
    padding: 12px 14px;
    border-right: 1px solid var(--swc-border);
    border-bottom: 1px solid var(--swc-border);
    color: #fff !important;
    text-decoration: none !important;
    background: transparent;
    -webkit-tap-highlight-color: rgba(255,69,0,.12);
  }

  .swc-ma-mobile-link:nth-child(2n) {
    border-right: 0;
  }

  .swc-ma-mobile-link:active,
  .swc-ma-mobile-link:focus-visible {
    background: rgba(255,69,0,.09);
  }

  .swc-ma-mobile-link strong {
    display: block;
    color: #fff;
    font-family: var(--swc-font-display);
    font-size: .91rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
  }

  .swc-ma-mobile-link span {
    display: block;
    margin-top: 5px;
    color: rgba(236,238,244,.52);
    font-size: .69rem;
    line-height: 1.25;
  }

  .swc-ma-mobile-link--logout strong {
    color: #ff8b76;
  }

  .swc-ma-mobile-related {
    margin: 22px -14px -1px !important;
  }

  /* Dashboard WC content gets breathing room but remains visually integrated. */
  .swc-ma-page--dashboard .swc-ma-content > :not(.swc-ma-membership-offer):not(.swc-ma-mobile-hub) {
    margin-left: 14px;
    margin-right: 14px;
  }
}