/* ====================================================================
   My-account — app shell layout
   Figma 423:11 (desktop), 540:237 (mobile).

   Shape:
     ┌────────────────────────────────────────────────────────────┐
     │ Top nav (65px)                                             │
     ├──────────┬─────────────────────────────────────────────────┤
     │          │                                                 │
     │  Rail    │  Content (welcome, metrics, license,            │
     │ (260px)  │  activated sites — rendered by the dashboard-*  │
     │          │  custom blocks via woocommerce_account_dashboard│
     │  ...     │  hooks)                                         │
     │          │                                                 │
     │ Need     │                                                 │
     │ help?    │                                                 │
     └──────────┴─────────────────────────────────────────────────┘
   ==================================================================== */

/* Page chrome ----------------------------------------------------- */
body.is-account-page { background: var(--color-surface-subtle); }
body.is-account-page main.gtmkit-account-shell { padding: 0; }

/* Slim top nav (parts/header-app.html) --------------------------- */
.gtmkit-app-topnav {
  min-height: 65px;
  align-items: center;
}
.gtmkit-app-topnav .wp-block-site-logo img {
  height: 40px;
  width: auto;
}

/* User chip on the right of the top nav (rendered by gtmkit/user-chip) */
.gtmkit-app-topnav__user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background var(--motion-default) ease-out;
}
.gtmkit-app-topnav__user-chip:hover { background: var(--color-surface-subtle); }
.gtmkit-app-topnav__avatar {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gtmkit-app-topnav__user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.gtmkit-app-topnav__caret {
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.gtmkit-app-topnav__signin {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-brand);
  text-decoration: none;
}

/* Dual chrome: parts/header-app.html emits a desktop and a mobile top nav;
   CSS flips which one renders (Figma 423:2 vs 540:238). !important defeats
   WP's .is-layout-flex display rule, which has equal specificity. */
.gtmkit-app-topnav--mobile { display: none !important; }
@media (max-width: 720px) {
  .gtmkit-app-topnav--desktop { display: none !important; }
  .gtmkit-app-topnav--mobile {
    display: flex !important;
    position: relative; /* anchors the account-nav drawer (top: 100%) */
    min-height: 64px;
  }
  /* Mobile shows just the avatar from the user chip — no name, no caret. */
  .gtmkit-app-topnav--mobile .gtmkit-app-topnav__user-name,
  .gtmkit-app-topnav--mobile .gtmkit-app-topnav__caret { display: none; }
  .gtmkit-app-topnav--mobile .gtmkit-app-topnav__user-chip { padding: 4px; }
  .gtmkit-app-topnav__right { gap: 4px; }
}

/* Section Tabs strip (Figma 540:251) — rendered by gtmkit/account-tabs,
   mobile only. Horizontal scroll, hidden scrollbar, brand-blue bottom
   border on the aria-current tab. */
.gtmkit-account-tabs { display: none; }
@media (max-width: 720px) {
  .gtmkit-account-tabs {
    display: block;
    background: var(--color-surface-background);
    border-bottom: 1px solid var(--color-border-default);
  }
  .gtmkit-account-tabs__list {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0 12px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .gtmkit-account-tabs__list::-webkit-scrollbar { display: none; }
  .gtmkit-account-tabs__item { margin: 0; flex-shrink: 0; list-style: none; }
  .gtmkit-account-tabs__item a {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .gtmkit-account-tabs__item a[aria-current="page"] {
    color: var(--color-text-brand);
    font-weight: 600;
    border-bottom-color: var(--color-brand-primary);
  }
}

/* Grid: rail + content -------------------------------------------- */
/* WC's [woocommerce_my_account] shortcode renders nav + content as
   sibling divs inside .woocommerce. We turn that into a CSS grid with
   a rail on the left and a content column on the right. The grid is
   capped at 1280px and centered so the my-account surface matches
   the rest of the site's content width — the page bg (surface-subtle
   via body.is-account-page) still spans full viewport. */
/* Defeat WP's constrained-layout 768px cap on the post-content wrapper
   that holds the [woocommerce_my_account] shortcode. wp:post-content
   doesn't honour an align attribute the way wp:group does, so its
   parent main applies the default contentSize (768) to it. Lift the
   cap so our 1280px grid below can actually reach 1280. */
.woocommerce-account .entry-content.wp-block-post-content,
.woocommerce-account .wp-block-post-content {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  /* Single flexible row so both columns fill the grid's min-height when the
     content is short (rail border reaches the footer); it still grows with
     tall content because a 1fr row's minimum is min-content. */
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 0;
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px;
  box-sizing: border-box;
  min-height: calc(100vh - 65px);
}
.woocommerce-account .woocommerce > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  /* WC's legacy MyAccount CSS sets float:left on nav and float:right
     on content; force them back into grid flow. */
  float: none !important;
  width: auto !important;
}

/* Sidebar rail (Figma 423:22) ------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  grid-column: 1;
  /* Span every row track so the rail (and its right border) fills the full
     grid height even when the content column is short — otherwise the grid's
     min-height leaves a leftover row track below the rail and the border
     stops short of the footer. */
  grid-row: 1 / -1;
  /* The rail itself is full-height (for the border); the nav list inside it is
     what sticks. Override blocks.css's `position:sticky;top:80px` on this
     selector so the leftover `top` doesn't offset the full-height rail. */
  position: static;
  background: var(--color-surface-background);
  border-right: 1px solid var(--color-border-default);
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
/* Keep the nav list pinned below the sticky header while the content scrolls.
   It sticks within the full-height rail; the "Need help?" aside stays at the
   bottom. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: sticky;
  top: 88px;
}
/* `.admin-bar` and `.woocommerce-account` are both on <body>, so they must be
   concatenated (no descendant combinator) to match. Clears the 32px admin bar
   on top of the 88px header offset. */
.admin-bar.woocommerce-account .woocommerce-MyAccount-navigation ul { top: 120px; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: block;
}
.woocommerce-account .woocommerce-MyAccount-navigation li::before,
.woocommerce-account .woocommerce-MyAccount-navigation li::after {
  display: none !important;
  content: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--motion-default) ease-out, color var(--motion-default) ease-out;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
  font-weight: 500;
}

/* Rail icons — Figma 423:22. Each item gets a 20×20 leading icon
   via a ::before pseudo with an inline SVG background-image. Brand
   colour on the active item, secondary on the rest. Feather-style. */
.woocommerce-account .woocommerce-MyAccount-navigation a::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  /* Filter recolour: tint the black SVG to the current text colour
     using a mask-image with the same data URI. Browsers without
     mask-image fall back to no tint (icons stay dark — acceptable). */
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  /* Mask-image tint trick. */
}
.woocommerce-account .woocommerce-MyAccount-navigation a::before {
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 20px;
          mask-size: 20px;
}
.gtmkit-rail-item--dashboard a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/></svg>");
}
.gtmkit-rail-item--subscriptions a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>");
}
.gtmkit-rail-item--licenses-sites a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4'/></svg>");
}
.gtmkit-rail-item--downloads a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}
.gtmkit-rail-item--orders a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><polyline points='10 9 9 9 8 9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><polyline points='10 9 9 9 8 9'/></svg>");
}
.gtmkit-rail-item--edit-account a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}
/* Feather "life-buoy" — support / get help. */
.gtmkit-rail-item--support a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='4'/><line x1='4.93' y1='4.93' x2='9.17' y2='9.17'/><line x1='14.83' y1='14.83' x2='19.07' y2='19.07'/><line x1='14.83' y1='9.17' x2='19.07' y2='4.93'/><line x1='4.93' y1='19.07' x2='9.17' y2='14.83'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='4'/><line x1='4.93' y1='4.93' x2='9.17' y2='9.17'/><line x1='14.83' y1='14.83' x2='19.07' y2='19.07'/><line x1='14.83' y1='9.17' x2='19.07' y2='4.93'/><line x1='4.93' y1='19.07' x2='9.17' y2='14.83'/></svg>");
}
/* Feather "log-out" — door bracket on the left, arrow pointing out
   to the right. */
.gtmkit-rail-item--customer-logout a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
}

/* "Need help?" card pinned at the bottom of the rail (Figma 423:42).
   Injected server-side by the woocommerce_account_navigation hook
   in inc/account-dashboard.php. */
.gtmkit-rail-spacer { flex: 1 1 auto; min-height: 16px; }
.gtmkit-rail-help {
  background: var(--color-surface-subtle);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gtmkit-rail-help strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.gtmkit-rail-help span {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-secondary);
}

/* Content column -------------------------------------------------- */
/* Figma 423:45 — 48px padding + 32px gap between sections.
   No card border on the content wrapper itself; individual sections
   inside (metric cards, license card, sites card) own their borders. */
.woocommerce-account .woocommerce-MyAccount-content {
  grid-column: 2;
  grid-row: 1;
  background: transparent;
  border: 0;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content > * + * {
  margin-block-start: 0 !important;
}

/* Default headings/text/links inside the content column ---------- */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: Inter, sans-serif;
  color: var(--color-text-primary);
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 30px; font-weight: 600; line-height: 38px; letter-spacing: -0.5px; }
.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 18px; font-weight: 600; line-height: 26px; }
.woocommerce-account .woocommerce-MyAccount-content p {
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-secondary);
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: var(--color-text-brand);
}

/* Tablet/mobile: collapse the rail to a horizontal pill list ------ */
@media (max-width: 1024px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-default);
    padding: 16px 20px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .gtmkit-rail-spacer,
  .gtmkit-rail-help { display: none; }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 32px 24px; }
}
/* Mobile (Figma 540:237): the Section Tabs strip replaces the rail entirely;
   content goes full-width, metric cards stack single column. */
@media (max-width: 720px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { display: none; }
  .woocommerce-account .woocommerce { padding: 0; }
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    box-sizing: border-box;
    padding: 24px 16px;
    gap: 20px;
  }
  .woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 24px; line-height: 32px; }
  .gtmkit-dash-metrics { grid-template-columns: 1fr; }
}

/* =====================================================================
   Auth forms (legacy WC login / register / lost-password shortcodes)
   ===================================================================== */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-form-lost-password {
  max-width: 440px;
  margin: 64px auto;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.woocommerce-form-login h2,
.woocommerce-form-register h2,
.woocommerce-form-lost-password h2 {
  font-size: 26px;
  font-weight: 700;
}
.woocommerce-form-login p,
.woocommerce-form-register p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.woocommerce-form-login p label,
.woocommerce-form-register p label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.woocommerce-form-login input,
.woocommerce-form-register input {
  padding: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  font-size: 14px;
}
.woocommerce-form-login button,
.woocommerce-form-register button {
  background: var(--color-brand-primary);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 14px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

/* =====================================================================
   SHARED PRIMITIVES — used across all six account pages.
   ===================================================================== */

/* Page heading block (used on Subscriptions, Licenses & sites,
   Downloads, Invoices, Account settings — Figma 688:* common shape). */
.gtmkit-page-head { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; }
.gtmkit-page-head__title {
  font-family: Inter, sans-serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  letter-spacing: -0.5px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-page-head__sub {
  font-family: Inter, sans-serif !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

/* Generic surface card. */
.gtmkit-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 24px;
}

/* Status badges (Active, Open, Paid, Latest). All use the same dot
   + label + pill-bg pattern with different colour tokens. */
.gtmkit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.gtmkit-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
}
.gtmkit-badge--active,
.gtmkit-badge--paid,
.gtmkit-badge--latest {
  background: var(--color-state-success-subtle, #dcfce7);
  color: var(--color-state-success, #15803d);
}
.gtmkit-badge--open {
  background: var(--color-surface-muted);
  color: var(--color-text-tertiary);
}
.gtmkit-badge--credit {
  background: var(--color-state-warning-subtle, #fef3c7);
  color: var(--color-state-warning, #b45309);
}

/* =====================================================================
   DASHBOARD (Figma 423:11)
   ===================================================================== */

.gtmkit-dash-hero { display: flex; flex-direction: column; gap: 32px; }
.gtmkit-dash-hero__head { display: flex; flex-direction: column; gap: 8px; }
.gtmkit-dash-hero__title {
  font-family: Inter, sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
  letter-spacing: -0.6px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-dash-hero__sub {
  font-family: Inter, sans-serif !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

/* 3-up metric card grid */
.gtmkit-dash-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gtmkit-metric-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gtmkit-metric-card__eyebrow {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 !important;
}
.gtmkit-metric-card__value {
  font-family: Inter, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin: 0 !important;
}
.gtmkit-metric-card__meta {
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
  margin: 0 !important;
}
.gtmkit-metric-card__meta--positive { color: var(--color-state-success, #15803d); }
.gtmkit-metric-card__meta a { color: var(--color-text-brand); text-decoration: none; }

/* Dashboard licenses block container */
.gtmkit-dash-licenses { display: flex; flex-direction: column; gap: 24px; }

/* License key card — dark surface, monospace key, Copy button.
   Used on dashboard + on /licenses-sites/. */
.gtmkit-license-card {
  background: var(--color-surface-inverse, #0f172a);
  border-radius: 14px;
  padding: 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gtmkit-license-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gtmkit-license-card__eyebrow {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* !important: WC's `.woocommerce-account .woocommerce-MyAccount-content p`
     (0,3,1) forces text-secondary otherwise — same reason margin uses it. */
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.gtmkit-license-card__manage {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #93c5fd;
  text-decoration: none;
}
.gtmkit-license-card__manage:hover { color: #fff; }
/* Figma 727:167 KeyRow: key + Copy sit directly on the dark card with no
   inner box — the card's own padding provides the spacing. */
.gtmkit-license-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.gtmkit-license-card__key {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #fff;
  word-break: break-all;
}
.gtmkit-license-card__copy {
  background: #fff;
  color: var(--color-text-primary);
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--motion-default) ease-out;
}
.gtmkit-license-card__copy:hover { background: var(--color-surface-subtle); }
.gtmkit-license-card__copy.is-copied { background: var(--color-state-success); color: #fff; }

/* Licenses page Copy button — Figma 727:169 translucent-on-dark variant
   (rgba white fill + border, white label) instead of the solid-white default. */
.gtmkit-license-card__copy--light {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 6px;
}
.gtmkit-license-card__copy--light:hover { background: rgba(255, 255, 255, 0.18); }

/* Defeat blocks.css `.entry-content code { background: surface-muted }`
   inside the live dashboard-licenses block (which uses a different
   class — gtmkit-license-key-card vs the docs/blog .gtmkit-license-card).
   Without this override the key text renders light-on-light inside the
   dark card. Same fix for the activated-sites rows. */
.gtmkit-license-key-card__key code,
.entry-content .gtmkit-license-key-card__key code {
  background: transparent !important;
  color: #ebf0fa !important;
  padding: 0 !important;
}

/* The /licenses-sites/ + dashboard cards render the key as
   `code.gtmkit-license-card__key`. blocks.css `.entry-content code` paints it
   with a light surface-muted box, leaving white-on-light = unreadable. Force
   transparent + white so the key reads on the dark card (Figma 727:168). */
.gtmkit-license-card__key,
.entry-content code.gtmkit-license-card__key {
  background: transparent !important;
  padding: 0 !important;
  color: #fff !important;
}

/* Activated sites card */
.gtmkit-sites-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  overflow: hidden;
}
.gtmkit-sites-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  gap: 16px;
  border-bottom: 1px solid var(--color-border-default);
}
.gtmkit-sites-card__title {
  font-family: Inter, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: var(--color-text-primary) !important;
  margin: 0 0 4px !important;
}
.gtmkit-sites-card__meta {
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
.gtmkit-sites-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--motion-default) ease-out, border-color var(--motion-default) ease-out;
}
.gtmkit-sites-card__cta:hover { background: var(--color-surface-subtle); border-color: var(--color-border-brand); }
.gtmkit-sites-card__list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.gtmkit-sites-card__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border-default);
  gap: 16px;
  margin: 0 !important;
}
.gtmkit-sites-card__item:last-child { border-bottom: 0; }
.gtmkit-sites-card__item::before, .gtmkit-sites-card__item::after { content: none !important; display: none !important; }
.gtmkit-sites-card__domain {
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
  margin: 0 0 2px !important;
}
.gtmkit-sites-card__sub {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.gtmkit-sites-card__item-actions { display: flex; align-items: center; gap: 16px; }
.gtmkit-sites-card__deact {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.gtmkit-sites-card__deact:hover { color: var(--color-text-brand); }
.gtmkit-sites-card__empty {
  padding: 24px;
  color: var(--color-text-tertiary);
  font-size: 14px;
  text-align: center;
}

/* =====================================================================
   SUBSCRIPTIONS (Figma 688:13)
   ===================================================================== */

/* WC Subscriptions ships a generic "shop_table" for the subscriptions
   list. Replace its visual with a plan card per subscription. The
   table classes are .my_account_subscriptions / .subscriptions. */
.woocommerce-MyAccount-content .my_account_subscriptions {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default) !important;
  border-radius: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.woocommerce-MyAccount-content .my_account_subscriptions thead,
.woocommerce-MyAccount-content .my_account_subscriptions thead tr,
.woocommerce-MyAccount-content .my_account_subscriptions thead th {
  background: var(--color-surface-muted) !important;
}
.woocommerce-MyAccount-content .my_account_subscriptions th,
.woocommerce-MyAccount-content .my_account_subscriptions td {
  padding: 14px 20px !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-default) !important;
}
.woocommerce-MyAccount-content .my_account_subscriptions thead th {
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
}
.woocommerce-MyAccount-content .my_account_subscriptions tbody tr:last-child td { border-bottom: 0 !important; }
.woocommerce-MyAccount-content .my_account_subscriptions .button {
  background: var(--color-brand-primary) !important;
  color: var(--color-text-on-brand) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
.woocommerce-MyAccount-content .my_account_subscriptions .button.cancel,
.woocommerce-MyAccount-content .my_account_subscriptions .button--white {
  background: var(--color-surface-card) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-default) !important;
}

/* Single subscription view — Figma 688:13. The override template at
   gtmkit-wp-cf/templates/woocommerce/myaccount/subscription-details.php
   renders a `.gtmkit-sub-card` instead of the default 2-col table.
   The "Subscription totals" + line items table that WC Subscriptions
   renders below it is hidden — the card already shows price + count. */
.gtmkit-sub-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gtmkit-sub-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.gtmkit-sub-card__title-wrap { display: flex; flex-direction: column; gap: 4px; }
.gtmkit-sub-card__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gtmkit-sub-card__title {
  font-family: Inter, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  letter-spacing: -0.3px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-sub-card__meta {
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
.gtmkit-sub-card__price {
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.gtmkit-sub-card__price-period {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-left: 2px;
}
.gtmkit-sub-card__divider {
  height: 1px;
  border: 0;
  background: var(--color-border-default);
  margin: 0;
}
.gtmkit-sub-card__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 32px;
}
.gtmkit-sub-card__detail { display: flex; flex-direction: column; gap: 4px; }
.gtmkit-sub-card__detail-label {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 !important;
}
.gtmkit-sub-card__detail-value {
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0 !important;
}
.gtmkit-sub-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.gtmkit-sub-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background var(--motion-default) ease-out, border-color var(--motion-default) ease-out;
}
/* !important on bg/color because WP's :where(.wp-element-button)
   element style sits at the wp-element-button class which is
   sometimes added by WC's button render path. Same pattern we use
   on the cart Apply / Proceed buttons. */
.gtmkit-sub-card__btn--primary,
.gtmkit-sub-card.gtmkit-sub-card .gtmkit-sub-card__btn--primary.wp-element-button {
  background: var(--color-brand-primary) !important;
  color: var(--color-text-on-brand) !important;
  border-color: transparent !important;
}
.gtmkit-sub-card__btn--primary:hover { background: var(--color-brand-primary-hover) !important; }
.gtmkit-sub-card__btn--secondary,
.gtmkit-sub-card.gtmkit-sub-card .gtmkit-sub-card__btn--secondary.wp-element-button {
  background: var(--color-surface-card) !important;
  border: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}
.gtmkit-sub-card__btn--secondary:hover {
  background: var(--color-surface-subtle) !important;
  border-color: var(--color-border-brand) !important;
}
.gtmkit-sub-card__cancel-note {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0 !important;
}

/* Subscriptions list — one plan card per subscription, stacked
   (Figma 704:86). With a single subscription this renders one card,
   identical to the happy-path comp 688:13. */
.gtmkit-subscriptions-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Account-wide empty state (no subscriptions yet). */
.gtmkit-account-empty {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 40px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gtmkit-account-empty p {
  font-family: Inter, sans-serif;
  font-size: 15px;
  color: var(--color-text-secondary);
  margin: 0 !important;
}
.gtmkit-account-empty__cta {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand-primary) !important;
  text-decoration: none !important;
}

/* On the single subscription view page, hide everything WC ships
   below the active-plan card — Subscription totals table, Related
   orders heading + table, and the Customer details section. Figma
   688:13 is just the card + cancel note.
   The MyAccount-content children on this page are (after our card):
     <h2>Subscription totals</h2>
     <table.shop_table.order_details>
     <header>Related orders</header>
     <table.shop_table.my_account_orders>
     <section.woocommerce-customer-details>
     <div.clear>
   Hide all of those direct children that aren't our card / cancel
   note / notices wrapper. Scoped by the woocommerce-view-subscription
   body class so the /orders/ Invoices view keeps its styling. */
.woocommerce-view-subscription .woocommerce-MyAccount-content > h2,
.woocommerce-view-subscription .woocommerce-MyAccount-content > h3,
.woocommerce-view-subscription .woocommerce-MyAccount-content > header,
.woocommerce-view-subscription .woocommerce-MyAccount-content > table,
.woocommerce-view-subscription .woocommerce-MyAccount-content > section.woocommerce-customer-details,
.woocommerce-view-subscription .woocommerce-MyAccount-content > section.woocommerce-order-details,
.woocommerce-view-subscription .woocommerce-MyAccount-content > .related-orders,
.woocommerce-view-subscription .woocommerce-MyAccount-content > .clear {
  display: none !important;
}

/* =====================================================================
   DOWNLOADS (Figma 688:229)
   ===================================================================== */

/* Latest download card — wrap the first .download row in a styled
   container. WC's downloads template renders .woocommerce-MyAccount-
   downloads as either a table or a list of .download blocks. */
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads,
.woocommerce-MyAccount-content table.shop_table.order_details {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default) !important;
  border-radius: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads thead,
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads thead tr,
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads thead th {
  background: var(--color-surface-muted) !important;
}
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads th,
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads td {
  padding: 14px 20px !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-default) !important;
}
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads thead th {
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
}
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads tbody tr:last-child td { border-bottom: 0 !important; }
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads .button,
.woocommerce-MyAccount-content .woocommerce-MyAccount-downloads a.wp-element-button {
  background: var(--color-brand-primary) !important;
  color: var(--color-text-on-brand) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* =====================================================================
   DOWNLOADS (Figma 688:229) — latest card + version-history table.
   Rendered by render_downloads_endpoint() in account-dashboard.php.
   ===================================================================== */

.gtmkit-downloads { display: flex; flex-direction: column; gap: 24px; }

/* Latest card — file icon in a brand-subtle square, filename + Latest
   badge + meta row, primary blue Download button on the right. */
.gtmkit-download-latest {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 20px 24px;
}
.gtmkit-download-latest__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--color-surface-brand-subtle);
  color: var(--color-brand-primary);
}
.gtmkit-download-latest__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gtmkit-download-latest__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gtmkit-download-latest__filename {
  font-family: Inter, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-download-latest__meta {
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  color: var(--color-text-tertiary) !important;
  margin: 0 !important;
}
.gtmkit-download-latest__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--color-brand-primary);
  /* !important: WC's `.woocommerce-MyAccount-content a:not(.button)` (0,3,1)
     forces text-brand (dark blue) on this <a>, which vanishes on the blue
     button. Force the on-brand (white) label. */
  color: var(--color-text-on-brand) !important;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background var(--motion-default) ease-out;
}
.gtmkit-download-latest__btn:hover { background: var(--color-brand-primary-hover); }

/* Version history table — bordered card, grey thead strip, brand-blue
   per-row Download links. */
.gtmkit-downloads__history-title {
  font-family: Inter, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  margin: 8px 0 0 !important;
}
.gtmkit-downloads-table {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.gtmkit-downloads-table thead,
.gtmkit-downloads-table thead tr,
.gtmkit-downloads-table thead th {
  background: var(--color-surface-muted);
}
.gtmkit-downloads-table th,
.gtmkit-downloads-table td {
  padding: 14px 20px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: middle;
}
.gtmkit-downloads-table thead th {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.gtmkit-downloads-table tbody tr:last-child td { border-bottom: 0; }
.gtmkit-downloads-table__version { font-weight: 500; }
.gtmkit-downloads-table__notes { color: var(--color-text-secondary); }
.gtmkit-downloads-table__action { text-align: right; }
.gtmkit-downloads-table__action a {
  color: var(--color-text-brand);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.gtmkit-downloads-table__action a:hover { text-decoration: underline; }
.gtmkit-downloads__empty {
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin: 0;
}

@media (max-width: 768px) {
  .gtmkit-download-latest {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: "icon body" "btn btn";
    gap: 12px 16px;
  }
  .gtmkit-download-latest__icon { grid-area: icon; }
  .gtmkit-download-latest__body { grid-area: body; }
  .gtmkit-download-latest__btn { grid-area: btn; width: 100%; }
  .gtmkit-downloads-table th,
  .gtmkit-downloads-table td { padding: 12px 14px; font-size: 13px; }
}

/* =====================================================================
   INVOICES (Orders renamed, Figma 688:337)
   ===================================================================== */

.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .shop_table.my_account_orders {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default) !important;
  border-radius: 14px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.woocommerce-MyAccount-content .woocommerce-orders-table thead,
.woocommerce-MyAccount-content .woocommerce-orders-table thead tr,
.woocommerce-MyAccount-content .woocommerce-orders-table thead th {
  background: var(--color-surface-muted) !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content .woocommerce-orders-table td {
  padding: 14px 20px !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border-default) !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table thead th {
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:last-child td { border-bottom: 0 !important; }
.woocommerce-MyAccount-content .woocommerce-orders-table .button {
  background: var(--color-brand-primary) !important;
  color: var(--color-text-on-brand) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* The "Download PDF" row action reads as a secondary (outline) button so
   the primary "View" stays dominant. */
.woocommerce-MyAccount-content .woocommerce-orders-table .button.gtmkit-invoice-pdf {
  background: var(--color-surface-card) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-default) !important;
}
/* Multiple actions per row sit on one line with a small gap. */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* =====================================================================
   INVOICE DETAIL (view-order, Figma 738:128 / mobile 746:693)
   On-screen single-invoice view rendered by the view-order.php override.
   ===================================================================== */

.gtmkit-invoice-wrap { display: flex; flex-direction: column; gap: 24px; }

.gtmkit-invoice-head { display: flex; flex-direction: column; gap: 12px; }
.gtmkit-invoice-head__back {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary) !important;
  text-decoration: none !important;
  width: fit-content;
}
.gtmkit-invoice-head__back:hover { color: var(--color-text-brand) !important; }
.gtmkit-invoice-head__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gtmkit-invoice-head__title-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gtmkit-invoice-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gtmkit-invoice-head__title {
  font-family: Inter, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  letter-spacing: -0.4px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-invoice-head__download {
  display: inline-block;
  background: var(--color-brand-primary);
  /* !important: now an <a>, so WC's `.woocommerce-MyAccount-content
     a:not(.button)` (0,3,1) would otherwise paint the label brand-blue on the
     blue button. Force the on-brand text colour and kill the link underline. */
  color: var(--color-text-on-brand) !important;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
}
.gtmkit-invoice-head__download:hover { background: var(--color-brand-primary-hover); }
/* Secondary variant for the credit-note download(s) sitting next to the primary
   invoice button. Outline style so the two are visually distinct. */
.gtmkit-invoice-head__download--secondary {
  background: var(--color-surface-card);
  color: var(--color-text-brand) !important;
  border: 1px solid var(--color-border-default);
}
.gtmkit-invoice-head__download--secondary:hover { background: var(--color-surface-subtle); }

.gtmkit-invoice {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.gtmkit-invoice__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.gtmkit-invoice__party-label {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 8px !important;
}
.gtmkit-invoice__party-name {
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px !important;
}
.gtmkit-invoice__party-line {
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 !important;
}
.gtmkit-invoice__party-line address { font-style: normal; }

.gtmkit-invoice__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
}
.gtmkit-invoice__meta-item { display: flex; flex-direction: column; gap: 4px; }
.gtmkit-invoice__meta-label {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.gtmkit-invoice__meta-value {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.gtmkit-invoice__lines { width: 100%; border-collapse: collapse; }
.gtmkit-invoice__lines th {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-align: left;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--color-border-default);
}
.gtmkit-invoice__lines td {
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--color-text-primary);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-default);
}
.gtmkit-invoice__lines tbody tr:last-child td { border-bottom: 0; }
.gtmkit-invoice__col-qty,
.gtmkit-invoice__col-unit,
.gtmkit-invoice__col-amount { text-align: right; white-space: nowrap; }
.gtmkit-invoice__col-desc { width: 60%; }

.gtmkit-invoice__totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: auto;
  width: 100%;
  max-width: 320px;
}
.gtmkit-invoice__total-row {
  display: flex;
  justify-content: space-between;
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.gtmkit-invoice__total-row--grand {
  border-top: 1px solid var(--color-border-default);
  padding-top: 10px;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.gtmkit-invoice__paid-note {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0 !important;
}
/* Reverse-charge note on zero-rated EU B2B invoices. */
.gtmkit-invoice__vat-note {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 !important;
}

/* Credit note (kreditnota) — a separate document under the invoice, one per
   refund. Reuses the invoice card layout with a warning-toned accent so it
   reads as related-but-distinct from the invoice above it. */
.gtmkit-invoice--credit {
  border-top: 3px solid var(--color-state-warning, #b45309);
}
.gtmkit-invoice__credit-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gtmkit-invoice__credit-title {
  font-family: Inter, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.gtmkit-invoice__credit-ref {
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin: 0 !important;
}

@media (max-width: 768px) {
  .gtmkit-invoice { padding: 20px; }
  .gtmkit-invoice__parties { grid-template-columns: 1fr; gap: 20px; }
  .gtmkit-invoice-head__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .gtmkit-invoice-head__download { width: 100%; }
  .gtmkit-invoice__totals { max-width: none; }
  .gtmkit-invoice__lines thead { display: none; }
  .gtmkit-invoice__lines tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-default);
  }
  .gtmkit-invoice__lines td { padding: 0; border: 0; }
  .gtmkit-invoice__col-desc { grid-column: 1 / -1; font-weight: 600; }
  .gtmkit-invoice__col-qty::before { content: 'Qty: '; color: var(--color-text-tertiary); }
  .gtmkit-invoice__col-qty,
  .gtmkit-invoice__col-unit { text-align: left; }
}

/* =====================================================================
   ACCOUNT SETTINGS (edit-account, Figma 688:445)
   Four-card layout: Profile / Password / Billing details / Delete
   account danger zone. Rendered by the form-edit-account.php
   override in gtmkit-wp-cf/templates/woocommerce/myaccount/.
   ===================================================================== */

.gtmkit-account-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* The first form holds BOTH the Profile and Password cards (they
   share WC's save_account_details submit handler), so the
   container's flex gap between forms doesn't reach them. Stack the
   form itself as a flex column with the same gap so siblings inside
   it (Profile + Password) get separated like the other cards. */
.gtmkit-account-form {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gtmkit-account-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gtmkit-account-card__head { display: flex; flex-direction: column; gap: 4px; }
.gtmkit-account-card__title {
  font-family: Inter, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-account-card__sub {
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}
.gtmkit-account-card__body { display: flex; flex-direction: column; gap: 16px; }
.gtmkit-account-card__row { display: grid; gap: 16px; }
.gtmkit-account-card__row--2 { grid-template-columns: repeat(2, 1fr); }
.gtmkit-account-card__row--3 { grid-template-columns: repeat(3, 1fr); }
.gtmkit-account-card__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gtmkit-account-card__field label {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.gtmkit-account-card__field input,
.gtmkit-account-card__field select {
  padding: 10px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  width: 100%;
  box-sizing: border-box;
}
.gtmkit-account-card__field input:focus,
.gtmkit-account-card__field select:focus {
  outline: 2px solid var(--color-border-brand);
  outline-offset: -1px;
}
.gtmkit-account-card__field input::placeholder { color: var(--color-text-tertiary); }
.gtmkit-account-card__actions { display: flex; gap: 12px; margin-top: 4px; }

.gtmkit-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  transition: background var(--motion-default) ease-out, border-color var(--motion-default) ease-out;
}
.gtmkit-account-btn--primary,
.gtmkit-account-form .gtmkit-account-btn--primary.wp-element-button {
  background: var(--color-brand-primary) !important;
  color: var(--color-text-on-brand) !important;
  border-color: transparent !important;
}
.gtmkit-account-btn--primary:hover { background: var(--color-brand-primary-hover) !important; }
.gtmkit-account-btn--danger {
  background: var(--color-surface-card);
  color: var(--color-state-danger, #b91c1c);
  border-color: var(--color-state-danger, #b91c1c);
}
.gtmkit-account-btn--danger:hover {
  background: var(--color-state-danger, #b91c1c);
  color: #fff;
}

/* Danger-zone card uses a red top accent. */
.gtmkit-account-card--danger {
  border-color: var(--color-state-danger, #b91c1c);
}
.gtmkit-account-card__title--danger { color: var(--color-state-danger, #b91c1c) !important; }

/* Hide the WC Subs "Update billing address for renewals" checkbox WC
   Subs prints inside the EditAccount form — Figma 688:445 has no such
   field, and the Billing details card handles billing edits. */
.gtmkit-account-settings p.form-row label:has(input[name="update_address_on_renewal"]),
.gtmkit-account-settings #update_billing_address {
  display: none !important;
}
.gtmkit-account-settings p.form-row:has(#update_billing_address) {
  display: none !important;
}

@media (max-width: 1024px) {
  .gtmkit-account-card__row--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .gtmkit-account-card { padding: 22px; }
  .gtmkit-account-card__row--2,
  .gtmkit-account-card__row--3 { grid-template-columns: 1fr; }
}

/* =====================================================================
   LICENSES & SITES page (custom endpoint /my-account/licenses-sites/)
   Figma 688:121
   ===================================================================== */

.gtmkit-licenses-page { display: flex; flex-direction: column; gap: 24px; }

.gtmkit-licenses-table {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.gtmkit-licenses-table thead,
.gtmkit-licenses-table thead tr,
.gtmkit-licenses-table thead th {
  background: var(--color-surface-muted);
}
.gtmkit-licenses-table th,
.gtmkit-licenses-table td {
  padding: 14px 20px !important;
  font-family: Inter, sans-serif;
  font-size: 14px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--color-border-default);
}
.gtmkit-licenses-table thead th {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.gtmkit-licenses-table tbody tr:last-child td { border-bottom: 0; }
/* SITE column absorbs the slack so STATUS / ACTIVATED / ACTIONS shrink to
   their content and sit flush right. Because each licence group is a separate
   full-width table, this keeps those columns aligned across every group. */
.gtmkit-licenses-table__site { font-weight: 500; width: 100%; }
.gtmkit-licenses-table th:not(:first-child),
.gtmkit-licenses-table td:not(.gtmkit-licenses-table__site) { white-space: nowrap; }
.gtmkit-licenses-table__action { text-align: right; }
.gtmkit-licenses-table__action a {
  color: var(--color-text-brand);
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}
.gtmkit-licenses-table__action a:hover { color: var(--color-text-brand-hover, var(--color-text-brand)); text-decoration: underline; }
.gtmkit-licenses-page__note {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Per-subscription license group (Figma 727:114). With one subscription
   the group header is omitted and the page reads identically to the
   single-subscription comp 688:121. */
.gtmkit-license-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gtmkit-license-group__head { display: flex; flex-direction: column; gap: 4px; }
.gtmkit-license-group__title {
  font-family: Inter, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}
.gtmkit-license-group__sub-number {
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.gtmkit-license-group__meta {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 !important;
}

/* Deactivate control is a <button> styled to read as the brand link in
   the action column; the open-slot hint is muted, non-interactive. */
.gtmkit-licenses-table__deactivate {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-brand);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.gtmkit-licenses-table__deactivate:hover { text-decoration: underline; }
.gtmkit-licenses-table__deactivate[disabled] { opacity: 0.6; cursor: default; }

/* Per-row action cluster: Deactivate (brand) + Ban site (danger), adjacent
   inline text links separated by an 8px gap (Figma 727:114). */
.gtmkit-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* "Ban site" — danger-coloured sibling of Deactivate, same weight. */
.gtmkit-licenses-table__ban {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-danger, #ef4444);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.gtmkit-licenses-table__ban:hover { color: var(--color-danger-600, #dc2626); text-decoration: underline; }
.gtmkit-licenses-table__ban[disabled] { opacity: 0.6; cursor: default; }

/* Kebab (⋯) — hidden on desktop; revealed at the mobile breakpoint where the
   two inline actions collapse behind a per-row menu (handoff 731:651). */
.gtmkit-licenses-table__kebab {
  display: none;
  background: none;
  border: 0;
  padding: 0 4px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-secondary);
}

/* Banned sites sub-block (Figma 727:114) — soft red-tinted rows below the
   active table, per licence group. Hidden entirely via [hidden] when empty. */
.gtmkit-banned-sites {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gtmkit-banned-sites[hidden] { display: none; }
.gtmkit-banned-sites__heading {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 !important;
}
.gtmkit-banned-sites__list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gtmkit-banned-sites__row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fbf2f2;
  border: 1px solid #f1dada;
  border-radius: 8px;
  padding: 12px 16px;
}
.gtmkit-banned-sites__domain {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.gtmkit-banned-sites__meta {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: #8c4646;
  margin-left: auto;
}
.gtmkit-banned-sites__unban {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-brand);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.gtmkit-banned-sites__unban:hover { color: var(--color-text-brand-hover, var(--color-text-brand)); text-decoration: underline; }
.gtmkit-banned-sites__unban[disabled] { opacity: 0.6; cursor: default; }

/* Shown instead of the sites table when a subscription has no active
   activations yet. We don't pad the table with "available slot" rows. */
.gtmkit-licenses-empty-state {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 14px;
  padding: 24px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* License key still provisioning (brief window post-checkout, or the
   provider unreachable on this request). */
.gtmkit-license-card--provisioning .gtmkit-license-card__provisioning {
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--color-text-on-brand, #fff);
  opacity: 0.85;
  margin: 0 !important;
}

/* Light variant of the Copy button on the standalone licenses page —
   the dark license card sits over the surface-subtle page bg there
   and the inverse button stays the same. No override needed. */

/* =====================================================================
   Mobile breakpoints
   ===================================================================== */

@media (max-width: 1024px) {
  .gtmkit-dash-metrics { grid-template-columns: 1fr; }
  .gtmkit-sites-card__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gtmkit-sites-card__item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gtmkit-license-card__row { flex-direction: column; align-items: stretch; }
  .gtmkit-license-card__copy { align-self: flex-end; }
  .woocommerce-MyAccount-content .woocommerce-EditAccountForm .woocommerce-form-row--first,
  .woocommerce-MyAccount-content .woocommerce-EditAccountForm .woocommerce-form-row--last { width: 100%; }
}
@media (max-width: 768px) {
  .gtmkit-page-head__title,
  .gtmkit-dash-hero__title { font-size: 24px !important; line-height: 32px !important; }
  .gtmkit-licenses-table th,
  .gtmkit-licenses-table td { padding: 12px 14px !important; font-size: 13px !important; }
  .gtmkit-license-card,
  .gtmkit-sites-card__head,
  .gtmkit-sites-card__item { padding: 16px 18px !important; }

  /* On mobile the two inline row actions collapse behind a kebab (⋯) so the
     row stays readable. The kebab toggles a small popover holding both
     actions (Deactivate + Ban site). */
  .gtmkit-licenses-table__action { position: relative; }
  .gtmkit-licenses-table__kebab { display: inline-flex; }
  .gtmkit-row-actions {
    display: none;
    position: absolute;
    top: calc(100% - 4px);
    right: 8px;
    z-index: 20;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 140px;
    padding: 12px 14px;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  }
  .gtmkit-licenses-table__action.is-open .gtmkit-row-actions { display: flex; }

  /* Banned rows wrap so the domain gets its own line on narrow screens. */
  .gtmkit-banned-sites__row { flex-wrap: wrap; gap: 4px 12px; }
}

/* ------------------------------------------------------------------
 * Login card — logged-out /account/ (page-auth template). Figma 420:2.
 * The template part supplies the logo + 440px constrained column on the
 * subtle surface; these rules style the WooCommerce login form as the card.
 * ------------------------------------------------------------------ */
/* The dashboard shell above turns .woocommerce into a 1280px nav+content
   grid (.woocommerce-account .woocommerce). Those rules are keyed on
   .woocommerce-account, which is present when logged out too, so on the
   login page the single card would drop into the 260px rail column. Reset
   it to a centred 440px column for logged-out visitors. */
body:not(.logged-in).woocommerce-account .woocommerce {
  display: block !important;
  width: 100% !important;
  max-width: 440px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.gtmkit-login {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 40px;
  background: var(--color-surface-card, #fff);
  border: 1px solid var(--color-border-default, #e2e8f0);
  border-radius: var(--radius-lg, 14px);
  box-sizing: border-box;
}
/* Mobile: the page's 24px side padding + the card's 40px stack up and
   squeeze the inputs at 390px — tighten both. :has() keeps the main
   override off the logged-in account shell, which shares the body class. */
@media (max-width: 720px) {
  .is-account-page main:has(.gtmkit-login) { padding-left: 16px !important; padding-right: 16px !important; }
  .gtmkit-login { padding: 28px 20px; }
}

.gtmkit-login__head { display: flex; flex-direction: column; gap: 8px; }
.gtmkit-login__title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.4px;
  color: var(--color-text-primary, #0f172a);
}
.gtmkit-login__sub {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary, #334155);
}
/* Kill WooCommerce's form.login box (border + padding) so the card is the
   only frame. */
.gtmkit-login__form { display: flex; flex-direction: column; gap: 24px; margin: 0; border: 0 !important; padding: 0 !important; background: transparent !important; }
.gtmkit-login__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.gtmkit-login__label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gtmkit-login__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--color-text-primary, #0f172a); }
.gtmkit-login__forgot { font-size: 12px; color: var(--color-text-brand, #1d4ed8); text-decoration: none; }
.gtmkit-login__forgot:hover { text-decoration: underline; }
.gtmkit-login__input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  font-size: 14px;
  color: var(--color-text-primary, #0f172a);
  background: var(--color-surface-background, #fff);
  /* !important beats WC's default .input-text border (dark) so we keep the
     light token border from the design. */
  border: 1px solid var(--color-border-default, #e2e8f0) !important;
  border-radius: var(--radius-sm, 8px) !important;
}
.gtmkit-login__input::placeholder { color: var(--color-text-muted, #94a3b8); }
.gtmkit-login__input:focus {
  outline: none;
  border-color: var(--color-brand-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.gtmkit-login__remember { margin: 0; }
.gtmkit-login__remember label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--color-text-primary, #0f172a); cursor: pointer; }
.gtmkit-login__remember input { width: 16px; height: 16px; margin: 0; }
/* Scoped under .gtmkit-login so the brand background beats the theme.json
   global button style (:root :where(.wp-element-button), same specificity but
   later in source order). */
.gtmkit-login .gtmkit-login__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-on-brand, #fff);
  background: var(--color-brand-primary, #2563eb);
  border: 0;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: background var(--motion-default, 0.15s) ease-out;
}
.gtmkit-login .gtmkit-login__submit:hover { background: var(--color-brand-primary-hover, #1d4ed8); }
/* The Cloudflare plugin injects a <br> after the widget; with the 24px form
   gap it would add a stray ~19px, so drop it and let the gap control spacing. */
.gtmkit-login__form .cf-turnstile-br { display: none; }
/* "Back to sign in" link, centred below the lost-password card (Figma 420:68). */
.gtmkit-login__back { text-align: center; font-size: 14px; line-height: 24px; }
/* The card and this link are siblings inside .woocommerce, whose dashboard-grid
   rule zeroes children margins with !important — beat it with more specificity. */
.woocommerce-account .woocommerce > .gtmkit-login__back { margin: 32px 0 0 !important; }
.gtmkit-login__back a { color: var(--color-text-secondary, #334155); text-decoration: none; }
.gtmkit-login__back a:hover { text-decoration: underline; }