/* ----------------------------------------------------------------------------
   Asgard Scripts storefront — premium dark e-commerce design system.
   Scoped under .asg-store so the admin area (Bootstrap defaults) is untouched.
   Accent colours come from the admin theme settings (--asg-* in _Layout); the
   rest (surfaces, borders, shadows, gradients) is derived here via color-mix.
---------------------------------------------------------------------------- */

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }
html { position: relative; min-height: 100%; }

.btn:focus-visible, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--asg-primary, #5bb8e8) 45%, transparent);
}

/* ---- storefront scope ---- */
.asg-store {
  /* Premium "light sky-blue on charcoal" system (matches the Zen Studio reference): layered charcoal
     surfaces, soft light-blue accents (admin-themeable via --asg-primary/secondary), Inter, layered depth. */
  --asg-surface: #131A22;          /* primary card / panel surface */
  --asg-surface-2: #10161E;        /* recessed inset (media wells, fields) */
  --asg-surface-3: #1A222D;        /* elevated surface (popovers, hover) */
  --asg-border: rgba(148, 163, 184, 0.12);
  --asg-border-strong: rgba(148, 163, 184, 0.22);
  --asg-muted: #94A3B8;            /* secondary text */
  --asg-faint: #8C9AAE;            /* muted / tertiary text (lifted from #7D8DA3 to clear 4.5:1 on elevated surfaces) */
  --asg-btn-ink: #04141C;          /* dark ink for text on bright accent buttons */
  --asg-radius: 16px;
  --asg-radius-sm: 10px;
  --asg-radius-lg: 22px;
  --asg-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --asg-shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, 0.8);
  /* Hairline top-edge highlight that gives panels a subtle "lit from above" sheen. */
  --asg-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --asg-ring: 0 0 0 3px color-mix(in srgb, var(--asg-primary, #5bb8e8) 35%, transparent);

  min-height: 100vh;
  margin: 0;
  color: var(--asg-text, #f8fafc);
  background-color: var(--asg-bg, #0B0F14);
  background-image:
    radial-gradient(1200px 620px at 50% -340px, color-mix(in srgb, var(--asg-primary, #5bb8e8) 10%, transparent), transparent 66%),
    radial-gradient(900px 480px at 100% -80px, color-mix(in srgb, var(--asg-secondary, #3d9fd6) 7%, transparent), transparent 58%),
    radial-gradient(1000px 720px at 0% 10%, color-mix(in srgb, var(--asg-secondary, #3d9fd6) 4%, transparent), transparent 55%);
  background-repeat: no-repeat;
  font-family: var(--asg-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

.asg-store main { flex: 1 0 auto; min-width: 0; }
.asg-store a { color: var(--asg-link, var(--asg-primary, #5bb8e8)); text-decoration: none; }
/* A non-colour focus indicator for links (colour alone fails WCAG 1.4.1/2.4.7 on the dark theme). */
.asg-store a:focus-visible { outline: 2px solid var(--asg-primary, #5bb8e8); outline-offset: 2px; border-radius: 4px; }
/* Skip-to-content link: off-screen until focused, then pinned top-left above the header. */
.asg-skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 2000; padding: 0.6rem 1rem; border-radius: 8px; background: var(--asg-primary, #5bb8e8); color: var(--asg-btn-ink, #04141c); font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform 0.15s ease; }
.asg-skip-link:focus { transform: translateY(0); outline: none; box-shadow: var(--asg-ring); }
.asg-store a:hover { text-decoration: underline; }
.asg-store .container { max-width: 1160px; }
.asg-store .text-muted { color: var(--asg-muted) !important; }

/* Horizontal-overflow safety net: no page should ever show a horizontal scrollbar. Long unbreakable
   strings (titles, URLs, IDs) wrap, and media never exceeds its column. Code/pre keep their own scroll. */
.asg-store { overflow-wrap: break-word; }
.asg-store img, .asg-store svg, .asg-store video, .asg-store iframe { max-width: 100%; }
.asg-store pre, .asg-store code { overflow-wrap: normal; }

/* ---- top nav ---- */
/* The whole header (announcement bar + nav) is the sticky element, NOT the inner .asg-nav: a sticky element
   only stays pinned while its PARENT is in view, and <header> is a direct child of <body> (the scroll root),
   whereas .asg-nav's parent (<header>) is only as tall as itself — so making the nav sticky pinned it for
   ~0px and it scrolled away immediately. Sticking <header> keeps the bar anchored as the page scrolls. */
.asg-store .asg-header { position: sticky; top: 0; z-index: 1030; }
.asg-store .asg-nav {
  background-color: color-mix(in srgb, var(--asg-bg, #0B0F14) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--asg-border);
}
/* Brand sits hard at the left edge of the container (kill the default Bootstrap brand right-margin). */
.asg-store .asg-nav .navbar-brand { font-weight: 700; letter-spacing: -0.02em; color: var(--asg-text, #fff); font-size: 1.05rem; padding-top: 0; padding-bottom: 0; margin-right: 0.75rem; }
.asg-store .asg-brand { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.asg-store .asg-brand__mark {
  width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; color: #fff; overflow: hidden;
  background: linear-gradient(140deg, var(--asg-primary, #5bb8e8), var(--asg-secondary, #3d9fd6));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--asg-primary, #5bb8e8) 85%, transparent);
}
.asg-store .asg-brand__mark svg { width: 17px; height: 17px; }
/* When a logo image is configured, the mark frames it (no gradient bleed); keep it square + contained. */
.asg-store .asg-brand__mark--logo { background: none; box-shadow: none; border-radius: 0; width: auto; }
.asg-store .asg-brand__mark--logo img { height: 30px; width: auto; max-width: 130px; object-fit: contain; display: block; }
.asg-store .asg-brand__text { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Image-only brand: the logo IS the brand — draw it near full header height (wide banner logos read
   at this size; the header grows a little to fit). Slightly smaller on phones so it never crowds the bar. */
.asg-store .asg-brand--image img { height: 52px; width: auto; max-width: 320px; object-fit: contain; display: block; }
@media (max-width: 575.98px) {
  .asg-store .asg-brand--image img { height: 42px; max-width: 220px; }
}
/* Cramped phones: drop the wordmark so the logo/shield never wraps the bar — except in name-only mode,
   where the wordmark is all there is. */
@media (max-width: 359.98px) {
  .asg-store .asg-brand__text { display: none; }
  .asg-store .asg-brand--name .asg-brand__text { display: block; max-width: 45vw; }
}
.asg-store .asg-nav .navbar { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.asg-store .asg-nav .nav-link { color: var(--asg-muted); font-weight: 500; padding: 0.4rem 0.8rem; border-radius: 8px; }
.asg-store .asg-nav .nav-link:hover { color: var(--asg-text, #fff); background: rgba(255, 255, 255, 0.05); text-decoration: none; }
/* Apple-store-style centered link row: slim, small, evenly spaced. */
.asg-store .asg-nav__links { gap: 0.1rem; }
.asg-store .asg-nav__links .nav-link { font-size: 0.85rem; letter-spacing: 0.01em; padding: 0.4rem 0.9rem; }

/* ---- account chip + dropdown (header identity) ---- */
/* Space the cart button from the account chip / login button (they sat flush against each other). */
.asg-store .asg-nav__account { gap: 0.5rem; }
.asg-store .asg-acct-wrap { display: flex; align-items: center; gap: 0.35rem; }
.asg-store .asg-acct {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem; border-radius: 999px;
  border: 1px solid var(--asg-border-strong); background: rgba(255, 255, 255, 0.02);
  color: var(--asg-text, #fff); font-weight: 600; line-height: 1; max-width: 14rem; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.asg-store .asg-acct:hover, .asg-store .asg-acct[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); border-color: var(--asg-primary, #5bb8e8); text-decoration: none; color: var(--asg-text, #fff); }
.asg-store .asg-acct:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--asg-primary, #5bb8e8) 40%, transparent); }
.asg-store .asg-acct__avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none;
  background: linear-gradient(135deg, var(--asg-primary, #5bb8e8), var(--asg-secondary, #3d9fd6));
}
.asg-store .asg-acct__avatar--initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 700; }
.asg-store .asg-acct__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }

/* Larger rounded avatar for the account dashboard's Profile panel (mirrors the header chip's fallback). */
.asg-store .asg-profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid var(--asg-border-strong);
  background: linear-gradient(135deg, var(--asg-primary, #5bb8e8), var(--asg-secondary, #3d9fd6));
}
.asg-store .asg-profile-avatar--initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; font-weight: 700; }
.asg-store .asg-acct__caret { flex: none; color: var(--asg-muted); transition: transform 0.12s ease; }
.asg-store .asg-acct[aria-expanded="true"] .asg-acct__caret { transform: rotate(180deg); }

/* Account dropdown menu — themed to the dark glass surface. */
.asg-store .asg-acct-menu.dropdown-menu {
  margin-top: 0.5rem; min-width: 13rem; padding: 0.35rem;
  border: 1px solid var(--asg-border-strong); border-radius: var(--asg-radius-sm);
  background: var(--asg-surface-2); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}
.asg-store .asg-acct-menu .dropdown-item {
  border-radius: 8px; padding: 0.5rem 0.65rem; color: var(--asg-text, #fff); font-weight: 500; font-size: 0.9rem;
}
.asg-store .asg-acct-menu .dropdown-item:hover, .asg-store .asg-acct-menu .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.06); color: #fff;
}
.asg-store .asg-acct-menu .dropdown-divider { border-top-color: var(--asg-border); margin: 0.3rem 0.2rem; }
.asg-store .asg-acct-menu .asg-logout-form { margin: 0; }
.asg-store .asg-acct-menu .asg-logout-form .dropdown-item { width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; }

/* Mobile toggler: a crisp white hamburger that's visible on the dark bar. */
.asg-store .navbar-toggler { border-color: var(--asg-border-strong); padding: 0.35rem 0.55rem; }
.asg-store .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--asg-primary, #5bb8e8) 40%, transparent); }
.asg-store .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  transition: background-image 0.15s ease;
}
/* Hamburger morphs to an X while the menu is open. */
.asg-store .navbar-toggler[aria-expanded="true"] { border-color: var(--asg-primary, #5bb8e8); }
.asg-store .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-width='2' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e");
}

/* Collapsed mobile menu: a rounded glass panel with comfortable tap targets. */
@media (max-width: 767.98px) {
  /* The header stays pinned at the top while the page scrolls beneath it (.asg-header is position:sticky).
     Here we give the nav bar a SOLID background on a phone (the desktop bar is a translucent blur, which
     would let scrolling content bleed through behind the menu). The sticky header reserves its own height in
     flow, so there's no layout shift or hidden content on load. */
  .asg-store .asg-nav {
    background-color: var(--asg-bg, #0B0F14);
    z-index: 1045;
  }
  .asg-store .asg-nav__menu {
    margin-top: 0.6rem; padding: 0.5rem; border: 1px solid var(--asg-border);
    border-radius: var(--asg-radius-sm); background: var(--asg-surface-2);
    /* If the menu is taller than the space below the pinned bar, it scrolls internally instead of
       pushing the bar off-screen (the bar + announcement together are ~3.5rem). */
    max-height: calc(100vh - 4rem); overflow-y: auto; overscroll-behavior: contain;
  }
  .asg-store .asg-nav__menu .asg-nav__links .nav-item + .nav-item { border-top: 1px solid var(--asg-border); }
  .asg-store .asg-nav__links { gap: 0; }
  .asg-store .asg-nav__menu .nav-link { padding: 0.8rem 0.6rem; font-size: 1.05rem; }
  .asg-store .asg-nav__menu .nav-link:hover { background: rgba(255, 255, 255, 0.04); }
  .asg-store .asg-nav__account { margin-top: 0.4rem; padding-top: 0.5rem; border-top: 1px solid var(--asg-border); gap: 0.5rem; }
  .asg-store .asg-nav__account .btn { width: 100%; }

  /* Full-width account chip; the caret hugs the right so it reads like a tappable row. */
  .asg-store .asg-acct-wrap { flex-direction: column; align-items: stretch; gap: 0.5rem; width: 100%; }
  .asg-store .asg-acct { max-width: none; width: 100%; justify-content: flex-start; padding: 0.55rem 0.8rem; }
  .asg-store .asg-acct__caret { margin-left: auto; }
  .asg-store .asg-acct-menu.dropdown-menu { width: 100%; }
}

/* ---- announcement bar ---- */
.asg-store .asg-banner {
  text-align: center; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, var(--asg-primary, #5bb8e8), var(--asg-secondary, #3d9fd6));
}

/* ---- buttons ---- */
.asg-store .btn-asg, .asg-store .btn-asg-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; border-radius: 10px; padding: 0.6rem 1.25rem; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.asg-store .btn-asg {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--asg-button, #5bb8e8) 90%, #fff 10%), color-mix(in srgb, var(--asg-button, #5bb8e8) 88%, #000 12%));
  border: 1px solid color-mix(in srgb, var(--asg-button, #5bb8e8) 70%, #000);
  color: var(--asg-btn-ink, #04141c);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--asg-button, #5bb8e8) 60%, transparent), var(--asg-sheen);
  letter-spacing: -0.01em;
}
.asg-store .btn-asg:hover { transform: translateY(-1px); filter: brightness(1.05) saturate(1.04); color: var(--asg-btn-ink, #04141c); box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--asg-button, #5bb8e8) 68%, transparent), var(--asg-sheen); }
.asg-store .btn-asg:active { transform: translateY(0); filter: brightness(0.98); }
.asg-store .btn-asg-outline { background: color-mix(in srgb, #fff 3%, transparent); border: 1px solid var(--asg-border-strong); color: var(--asg-text, #fff); backdrop-filter: blur(6px); }
.asg-store .btn-asg-outline:hover { border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 60%, transparent); background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 10%, transparent); color: var(--asg-text, #fff); transform: translateY(-1px); }
.asg-store .btn-asg-outline:active { transform: translateY(0); }
/* Secondary button: a solid fill in the brand SECONDARY colour, for a second hero/CTA action that sits
   beside the primary button without competing with it. Same layout box as .btn-asg (shares the base rule). */
.asg-store .btn-asg-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; border-radius: 10px; padding: 0.6rem 1.25rem; cursor: pointer; letter-spacing: -0.01em;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--asg-secondary, #3d9fd6) 90%, #fff 10%), color-mix(in srgb, var(--asg-secondary, #3d9fd6) 88%, #000 12%));
  border: 1px solid color-mix(in srgb, var(--asg-secondary, #3d9fd6) 70%, #000);
  color: var(--asg-btn-ink, #04141c);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--asg-secondary, #3d9fd6) 60%, transparent), var(--asg-sheen);
}
.asg-store .btn-asg-secondary:hover { transform: translateY(-1px); filter: brightness(1.05) saturate(1.04); color: var(--asg-btn-ink, #04141c); box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--asg-secondary, #3d9fd6) 68%, transparent), var(--asg-sheen); }
.asg-store .btn-asg-secondary:active { transform: translateY(0); filter: brightness(0.98); }
.asg-store .btn-lg { padding: 0.85rem 1.7rem; font-size: 1.05rem; }
.asg-store .btn-block { width: 100%; }
/* Keyboard focus: the primary CTAs are custom classes (not Bootstrap .btn), so the dark theme left them with
   no visible focus ring. Give them an explicit one (WCAG 2.4.7). */
.asg-store .btn-asg:focus-visible, .asg-store .btn-asg-outline:focus-visible, .asg-store .btn-asg-secondary:focus-visible { outline: none; box-shadow: var(--asg-ring); }
.asg-store .btn-asg.btn-sm, .asg-store .btn-asg-outline.btn-sm, .asg-store .btn-asg-secondary.btn-sm { padding: 0.42rem 0.9rem; font-size: 0.85rem; border-radius: 8px; }

/* ----------------------------------------------------------------------------
   Bootstrap component theming (storefront). These elements appear on account,
   checkout, order-history, serial and content pages; without this they fall back
   to light Bootstrap defaults that look cheap on the dark canvas.
---------------------------------------------------------------------------- */

/* ---- form controls ---- */
.asg-store .form-control,
.asg-store .form-select {
  background: var(--asg-surface-2); border: 1px solid var(--asg-border-strong);
  color: var(--asg-text, #f8fafc); border-radius: var(--asg-radius-sm);
  padding: 0.6rem 0.85rem; font-size: 0.95rem;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.asg-store .form-control::placeholder { color: var(--asg-faint); }
.asg-store .form-control:focus,
.asg-store .form-select:focus {
  background: var(--asg-surface-2); color: var(--asg-text, #fff);
  border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 60%, var(--asg-border-strong));
  box-shadow: var(--asg-ring); outline: none;
}
.asg-store .form-label { font-weight: 600; color: var(--asg-text, #fff); margin-bottom: 0.35rem; }
.asg-store .form-select { color-scheme: dark; }
.asg-store textarea.form-control { min-height: 120px; }
.asg-store .input-group-text { background: var(--asg-surface-3); border-color: var(--asg-border-strong); color: var(--asg-muted); }
.asg-store .form-check-input { background-color: var(--asg-surface-2); border-color: var(--asg-border-strong); }
.asg-store .form-check-input:checked { background-color: var(--asg-primary, #5bb8e8); border-color: var(--asg-primary, #5bb8e8); }
.asg-store .form-check-input:focus { box-shadow: var(--asg-ring); border-color: var(--asg-primary, #5bb8e8); }
.asg-store input[type="radio"], .asg-store input[type="checkbox"] { accent-color: var(--asg-primary, #5bb8e8); }
.asg-store input[type="date"], .asg-store input[type="time"], .asg-store input[type="datetime-local"] { color-scheme: dark; }

/* ---- tables ---- */
.asg-store .table {
  --bs-table-bg: transparent; --bs-table-color: var(--asg-text, #f8fafc);
  --bs-table-striped-bg: color-mix(in srgb, #fff 3%, transparent); --bs-table-striped-color: var(--asg-text, #f8fafc);
  --bs-table-hover-bg: color-mix(in srgb, var(--asg-primary, #5bb8e8) 8%, transparent); --bs-table-hover-color: #fff;
  border-color: var(--asg-border); margin-bottom: 0; color: var(--asg-text, #f8fafc);
}
.asg-store .table > thead th {
  color: var(--asg-faint); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--asg-border-strong); padding: 0.6rem 0.75rem;
}
.asg-store .table > tbody td, .asg-store .table > tbody th { border-color: var(--asg-border); vertical-align: middle; padding: 0.7rem 0.75rem; }
.asg-store .table-responsive { border: 1px solid var(--asg-border); border-radius: var(--asg-radius-sm); overflow: hidden; }
.asg-store .table-responsive > .table { border-collapse: separate; }

/* ---- responsive "stack" tables (account: billing, subscriptions, licenses) ----
   A data table with many columns forces a horizontal scrollbar on a phone, which reads poorly for a customer
   checking their orders. Opt a table into `.asg-table-stack` and, below the small breakpoint, each row becomes
   a self-contained card and each cell a label/value line (the label comes from the cell's data-label). No
   horizontal scroll, everything tappable. Desktop is untouched. 720px matches the admin table-stacking
   breakpoint so wide account tables (Billing has 7 columns) don't side-scroll in the 576–720px band. */
@media (max-width: 720px) {
  .asg-store .asg-table-stack { border: 0; }
  /* Drop the responsive wrapper's border/scroll so the cards aren't boxed inside a scroller. */
  .asg-store .table-responsive:has(> .asg-table-stack) { border: 0; overflow: visible; }
  .asg-store .asg-table-stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .asg-store .asg-table-stack > tbody > tr {
    display: block; margin-bottom: 0.75rem; padding: 0.4rem 0.9rem;
    border: 1px solid var(--asg-border); border-radius: var(--asg-radius-sm); background: color-mix(in srgb, #fff 2%, transparent);
  }
  .asg-store .asg-table-stack > tbody > tr:last-child { margin-bottom: 0; }
  .asg-store .asg-table-stack > tbody > td,
  .asg-store .asg-table-stack > tbody > tr > td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.5rem 0; border: 0; border-bottom: 1px solid var(--asg-border); text-align: right;
  }
  .asg-store .asg-table-stack > tbody > tr > td:last-child { border-bottom: 0; }
  /* The header label for each value, pulled from data-label, sits on the left. */
  .asg-store .asg-table-stack > tbody > tr > td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--asg-faint);
  }
  /* A label-less / empty trailing actions cell (e.g. the receipt button) spans full width and right-aligns. */
  .asg-store .asg-table-stack > tbody > tr > td:not([data-label]) { justify-content: flex-end; }
  .asg-store .asg-table-stack > tbody > tr > td:not([data-label])::before { content: none; }
  /* Empty action cells collapse so they don't leave a stray divider line. */
  .asg-store .asg-table-stack > tbody > tr > td:empty { display: none; }
}

/* ---- inline code ---- */
.asg-store code {
  color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 78%, #fff);
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 12%, transparent);
  padding: 0.12rem 0.42rem; border-radius: 6px; font-size: 0.86em;
}

/* ---- status badges / pills ---- */
.asg-store .badge {
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.01em;
  padding: 0.34em 0.72em; border-radius: 999px; border: 1px solid transparent; vertical-align: middle;
}
.asg-store .badge.bg-success, .asg-store .badge.text-bg-success {
  background: color-mix(in srgb, #22C55E 17%, transparent) !important; color: #6ee7a0 !important;
  border-color: color-mix(in srgb, #22C55E 42%, transparent);
}
.asg-store .badge.bg-warning, .asg-store .badge.text-bg-warning {
  background: color-mix(in srgb, #F59E0B 17%, transparent) !important; color: #fcd34d !important;
  border-color: color-mix(in srgb, #F59E0B 42%, transparent);
}
.asg-store .badge.bg-danger, .asg-store .badge.text-bg-danger {
  background: color-mix(in srgb, #EF4444 17%, transparent) !important; color: #fca5a5 !important;
  border-color: color-mix(in srgb, #EF4444 42%, transparent);
}
.asg-store .badge.bg-primary, .asg-store .badge.text-bg-primary,
.asg-store .badge.bg-info, .asg-store .badge.text-bg-info {
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 16%, transparent) !important;
  color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 70%, #fff) !important;
  border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 42%, transparent);
}
.asg-store .badge.bg-secondary, .asg-store .badge.text-bg-secondary {
  background: color-mix(in srgb, var(--asg-muted) 18%, transparent) !important; color: var(--asg-muted) !important;
  border-color: var(--asg-border-strong);
}

/* ---- alerts ---- */
.asg-store .alert { border-radius: var(--asg-radius-sm); border: 1px solid var(--asg-border); padding: 0.85rem 1.1rem; }
.asg-store .alert-success { background: color-mix(in srgb, #22C55E 13%, var(--asg-surface)); border-color: color-mix(in srgb, #22C55E 38%, transparent); color: #bdf3d3; }
.asg-store .alert-danger { background: color-mix(in srgb, #EF4444 13%, var(--asg-surface)); border-color: color-mix(in srgb, #EF4444 38%, transparent); color: #ffd2cc; }
.asg-store .alert-warning { background: color-mix(in srgb, #F59E0B 13%, var(--asg-surface)); border-color: color-mix(in srgb, #F59E0B 38%, transparent); color: #fae3b0; }
.asg-store .alert-info { background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 13%, var(--asg-surface)); border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 38%, transparent); color: #cfe0ff; }

/* ---- breadcrumb ---- */
.asg-store .breadcrumb { margin-bottom: 0.5rem; }
.asg-store .breadcrumb-item, .asg-store .breadcrumb-item a { color: var(--asg-muted); text-decoration: none; }
.asg-store .breadcrumb-item a:hover { color: var(--asg-primary, #5bb8e8); }
.asg-store .breadcrumb-item.active { color: var(--asg-faint); }
.asg-store .breadcrumb-item + .breadcrumb-item::before { color: var(--asg-faint); }

/* ---- bootstrap buttons used on storefront ---- */
.asg-store .btn-outline-danger { color: #ff9a9a; border-color: color-mix(in srgb, #ef4444 50%, var(--asg-border-strong)); border-radius: 8px; }
.asg-store .btn-outline-danger:hover { color: #fff; background: color-mix(in srgb, #ef4444 30%, transparent); border-color: #ef4444; }
.asg-store .btn-outline-secondary { color: var(--asg-text, #fff); border-color: var(--asg-border-strong); border-radius: 8px; }
.asg-store .btn-outline-secondary:hover { color: #fff; background: color-mix(in srgb, #fff 8%, transparent); border-color: var(--asg-border-strong); }

/* ---- hero ---- */
.asg-store .hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); text-align: center; }
.asg-store .hero__inner { max-width: 50rem; margin: 0 auto; }
.asg-store .hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--asg-primary, #5bb8e8);
  border: 1px solid color-mix(in srgb, var(--asg-primary, #5bb8e8) 40%, transparent);
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 12%, transparent);
  padding: 0.35rem 0.8rem; border-radius: 999px; margin-bottom: 1.3rem;
}
.asg-store .hero__title {
  font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.03; letter-spacing: -0.035em; font-weight: 800; margin: 0 0 1.1rem;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--asg-text, #f8fafc) 66%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  overflow-wrap: break-word;   /* a long unbreakable title word wraps instead of overflowing on narrow screens */
}
.asg-store .hero__lead { font-size: clamp(1.02rem, 2vw, 1.22rem); color: var(--asg-muted); max-width: 44rem; margin: 0 auto 1.9rem; line-height: 1.6; }
.asg-store .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* ---- hero: split layouts (copy beside an image; flip = image on the left) ---- */
.asg-store .hero--split { text-align: left; }
.asg-store .hero__inner--split {
  max-width: 72rem; display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.asg-store .hero--split .hero__lead { margin-left: 0; margin-right: 0; }
.asg-store .hero--split .hero__actions { justify-content: flex-start; }
.asg-store .hero--split-flip .hero__copy { order: 2; }
.asg-store .hero--split-flip .hero__media { order: 1; }
.asg-store .hero__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--asg-radius); border: 1px solid var(--asg-border);
  box-shadow: var(--asg-shadow-sm), 0 24px 60px -30px color-mix(in srgb, var(--asg-primary, #5bb8e8) 55%, transparent);
}
@media (max-width: 767.98px) {
  .asg-store .hero__inner--split { grid-template-columns: 1fr; }
  .asg-store .hero--split { text-align: center; }
  .asg-store .hero--split .hero__actions { justify-content: center; }
  .asg-store .hero--split-flip .hero__copy { order: 1; }
  .asg-store .hero--split-flip .hero__media { order: 2; }
}
/* The theme editor's MOBILE canvas is a narrowed div inside a desktop window, where the @media rules
   above can't fire — mirror the phone presentation under the preview's mobile class so what the author
   sees in Mobile view is exactly what a phone renders: the split hero stacks and the title/accent center
   (there is no side-by-side "layout" on a phone). Declared after the desktop split rules so ties resolve
   this way. */
.pb-preview--mobile .hero__inner--split { grid-template-columns: 1fr; }
.pb-preview--mobile .hero--split { text-align: center; }
.pb-preview--mobile .hero--split .hero__actions { justify-content: center; }
.pb-preview--mobile .hero--split-flip .hero__copy { order: 1; }
.pb-preview--mobile .hero--split-flip .hero__media { order: 2; }
/* On a phone the hero/CTA-band actions go full-width and stack — a single column of big, thumb-friendly CTAs
   instead of two narrow side-by-side buttons. Reused by the CTA band and order-confirmation actions too. */
@media (max-width: 480px) {
  .asg-store .hero__actions { flex-direction: column; align-items: stretch; }
  .asg-store .hero__actions > .btn-asg,
  .asg-store .hero__actions > .btn-asg-outline,
  .asg-store .hero__actions > .btn-asg-secondary { width: 100%; }
}

/* ---- stat strip ---- */
.asg-store .stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--asg-border); border: 1px solid var(--asg-border); border-radius: var(--asg-radius); overflow: hidden; margin-top: 2.5rem;
  box-shadow: var(--asg-shadow-sm), var(--asg-sheen);
}
.asg-store .stat { background: var(--asg-surface); padding: 1.35rem 1rem; text-align: center; transition: background-color .15s ease; }
.asg-store .stat:hover { background: var(--asg-surface-3); }
.asg-store .stat__num {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--asg-primary, #5bb8e8) 55%, #fff));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.asg-store .stat__label { font-size: 0.85rem; color: var(--asg-muted); margin-top: 0.15rem; }

/* ---- section headers ---- */
.asg-store .section { padding: 2.5rem 0; }
.asg-store .section__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.asg-store .section__title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 750; letter-spacing: -0.02em; margin: 0; }
.asg-store .section__sub { color: var(--asg-muted); margin: 0.35rem 0 0; }

/* ---- feature / benefits cards ---- */
.asg-store .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.asg-store .feature-card {
  position: relative; background: var(--asg-surface); border: 1px solid var(--asg-border);
  border-radius: var(--asg-radius); padding: 1.6rem;
  box-shadow: var(--asg-shadow-sm), var(--asg-sheen);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
/* A faint gradient hairline along the top edge — the "guide site" panel sheen. */
.asg-store .feature-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--asg-radius) var(--asg-radius) 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--asg-primary, #5bb8e8) 60%, transparent), transparent);
  opacity: 0.5; transition: opacity 0.18s ease;
}
.asg-store .feature-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 45%, var(--asg-border));
  box-shadow: 0 20px 45px -24px color-mix(in srgb, var(--asg-primary, #5bb8e8) 80%, transparent);
}
.asg-store .feature-card:hover::before { opacity: 1; }
.asg-store .feature-card__icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
  color: var(--asg-primary, #5bb8e8);
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--asg-primary, #5bb8e8) 30%, transparent);
}
.asg-store .feature-card__icon svg { width: 22px; height: 22px; }
.asg-store .feature-card__title { font-size: 1.05rem; font-weight: 650; margin: 0 0 0.4rem; }
.asg-store .feature-card p { color: var(--asg-muted); margin: 0; font-size: 0.95rem; line-height: 1.55; }
/* Per-card subtitle: sits between the title and body, one size down from the body text. */
.asg-store .feature-card__sub { font-size: 0.85rem; margin: 0 0 0.4rem; opacity: 0.9; }
/* Card image: sits above the text by default; the --h variant turns the card horizontal (image left). */
.asg-store .feature-card__img {
  width: 48px; height: 48px; object-fit: contain; border-radius: 10px; margin-bottom: 0.9rem;
}
.asg-store .feature-card--h { display: flex; align-items: flex-start; gap: 1rem; }
.asg-store .feature-card--h .feature-card__img { margin-bottom: 0; flex: 0 0 auto; }
.asg-store .feature-card--h .feature-card__text { min-width: 0; }
/* Steps cards: the image is the card's visual, not an inline icon — it spans the full card width and
   fills the band between the floating number badge and the title. */
.asg-store .features--steps .feature-card__img {
  width: 100%; height: 120px; object-fit: contain; margin: 0.4rem 0 0.9rem; border-radius: var(--asg-radius-sm, 10px);
}
/* Card text alignment (block setting): centered/right cards also re-anchor the block image. */
/* Wide card image ("top" position): a 16:9 banner spanning the card between its top edge and the title. */
.asg-store .feature-card__img--wide { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- feature grid: "numbered steps" layout (how-it-works flows) ----
   A floating number badge overlaps each card's top edge and a chevron sits between cards; on phones the
   cards stack and the chevrons hide. Opt-in per block via the Feature grid's Layout setting. */
.asg-store .features--steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem; }
.asg-store .features--steps .feature-step {
  flex: 1 1 190px; min-width: 190px; text-align: center; padding-top: 2.1rem; margin-top: 1.2rem;
}
.asg-store .feature-step__num {
  position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%);
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; color: #0b1220;
  background: var(--asg-primary, #5bb8e8);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--asg-primary, #5bb8e8) 22%, transparent),
              0 6px 18px -6px color-mix(in srgb, var(--asg-primary, #5bb8e8) 80%, transparent);
}
.asg-store .feature-step__arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--asg-primary, #5bb8e8); font-size: 1.35rem; opacity: 0.7; flex: 0 0 auto;
  padding-top: 1.2rem; /* optically centered against the badge-offset cards */
}
@media (max-width: 767.98px) { .asg-store .feature-step__arrow { display: none; } }

/* Card text alignment (the block's "Card text alignment" setting). Declared AFTER the steps layout and
   with matching specificity so it also overrides the steps cards' centered default — picking "left"
   left-aligns a steps card too, which the plain modifier class could never do. Small (non-wide) images
   re-anchor with the text; wide banners span the card regardless. */
.asg-store .feature-card.feature-card--left { text-align: left; }
.asg-store .feature-card.feature-card--left .feature-card__img:not(.feature-card__img--wide) { margin-left: 0; margin-right: auto; }
.asg-store .feature-card.feature-card--center { text-align: center; }
.asg-store .feature-card.feature-card--center .feature-card__img:not(.feature-card__img--wide) { margin-inline: auto; }
.asg-store .feature-card.feature-card--center.feature-card--h { justify-content: center; }
.asg-store .feature-card.feature-card--right { text-align: right; }
.asg-store .feature-card.feature-card--right .feature-card__img:not(.feature-card__img--wide) { margin-left: auto; margin-right: 0; }

/* ---- trust / reassurance badges row ---- */
.asg-store .asg-trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;
  border: 1px solid var(--asg-border); border-radius: var(--asg-radius);
  background: var(--asg-surface); box-shadow: var(--asg-shadow-sm), var(--asg-sheen);
  padding: 1.4rem 1.2rem;
}
.asg-store .asg-trust__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; min-width: 0; }
.asg-store .asg-trust__value {
  font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--asg-text, #f8fafc);
  background: linear-gradient(180deg, var(--asg-primary, #5bb8e8), var(--asg-secondary, #3d9fd6));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.asg-store .asg-trust__label { font-size: 0.86rem; color: var(--asg-muted); line-height: 1.35; }

/* ---- image + text split ---- */
.asg-store .asg-mediatext {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
/* Image-on-the-right variant: swap the visual order (DOM keeps media first for a stable reading order). */
.asg-store .asg-mediatext--right .asg-mediatext__media { order: 2; }
.asg-store .asg-mediatext__media img {
  width: 100%; height: auto; display: block; border-radius: var(--asg-radius);
  border: 1px solid var(--asg-border); box-shadow: var(--asg-shadow-sm), var(--asg-sheen);
}
.asg-store .asg-mediatext__text { min-width: 0; }
.asg-store .asg-mediatext__eyebrow {
  display: inline-block; margin-bottom: 0.55rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--asg-primary, #5bb8e8);
}
.asg-store .asg-mediatext__title { margin: 0 0 0.7rem; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.asg-store .asg-mediatext__body { margin: 0; color: var(--asg-muted); font-size: 1rem; line-height: 1.65; }
.asg-store .asg-mediatext__text .hero__actions { justify-content: flex-start; margin-top: 1.2rem; }
@media (max-width: 760px) {
  .asg-store .asg-mediatext { grid-template-columns: 1fr; gap: 1.2rem; }
  /* Stacked: always show the image first regardless of the desktop side. */
  .asg-store .asg-mediatext--right .asg-mediatext__media { order: 0; }
}

/* ---- testimonials ---- */
.asg-store .testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.asg-store .testimonial {
  margin: 0; padding: 1.4rem 1.5rem; border: 1px solid var(--asg-border);
  border-radius: var(--asg-radius); background: var(--asg-surface);
  box-shadow: var(--asg-shadow-sm), var(--asg-sheen); display: flex; flex-direction: column; gap: 0.9rem;
}
.asg-store .testimonial__quote {
  margin: 0; color: var(--asg-text, #f8fafc); font-size: 1.02rem; line-height: 1.6; position: relative;
  /* Grow to fill the (grid-stretched, equal-height) card so every byline pins to the bottom edge —
     the author/role rows line up across the row no matter how long each quote is. */
  flex: 1 1 auto;
}
.asg-store .testimonial__quote::before {
  content: "\201C"; color: var(--asg-primary, #5bb8e8); font-size: 2.2rem; line-height: 0;
  font-weight: 800; margin-right: 0.15rem; vertical-align: -0.35rem;
}
.asg-store .testimonial__by { display: flex; flex-direction: column; gap: 0.1rem; }
.asg-store .testimonial__author { font-weight: 650; color: var(--asg-text, #f8fafc); font-size: 0.92rem; }
.asg-store .testimonial__role { color: var(--asg-muted); font-size: 0.82rem; }

/* ---- featured product (single-product spotlight block) ---- */
.asg-store .featured-product {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center; padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid var(--asg-border); border-radius: var(--asg-radius);
  background: var(--asg-surface); box-shadow: var(--asg-shadow-sm), var(--asg-sheen);
}
.asg-store .featured-product__media {
  position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--asg-radius) - 4px); overflow: hidden;
  background: var(--asg-surface-2); display: flex; align-items: center; justify-content: center;
}
.asg-store .featured-product__media img { width: 100%; height: 100%; object-fit: cover; }
.asg-store .featured-product__placeholder { font-size: 2.4rem; font-weight: 800; color: var(--asg-faint); }
.asg-store .featured-product__title { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 750; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.asg-store .featured-product__desc { color: var(--asg-muted); line-height: 1.6; margin: 0 0 1.1rem; }
.asg-store .featured-product__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.asg-store .featured-product__price { font-size: 1.25rem; font-weight: 750; color: var(--asg-text, #f8fafc); }
@media (max-width: 720px) {
  .asg-store .featured-product { grid-template-columns: 1fr; }
}

/* ---- FAQ block (expandable question list) ---- */
.asg-store .faq-item { border-bottom: 1px solid var(--asg-border); }
.asg-store .faq-item:last-child { border-bottom: 0; }
.asg-store .faq-item > summary {
  cursor: pointer; padding: 1rem 0.25rem; font-weight: 650; color: var(--asg-text, #f8fafc);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.asg-store .faq-item > summary::-webkit-details-marker { display: none; }
.asg-store .faq-item > summary::after {
  content: "+"; color: var(--asg-primary, #5bb8e8); font-size: 1.4rem; line-height: 1; flex: none; font-weight: 400;
}
.asg-store .faq-item[open] > summary::after { content: "\2212"; }
.asg-store .faq-item > .prose { padding: 0 0.25rem 1rem; color: var(--asg-muted); line-height: 1.6; }

/* ---- product grid / cards ---- */
.asg-store .card { background: var(--asg-surface); border: 1px solid var(--asg-border); border-radius: var(--asg-radius); color: var(--asg-text, #f8fafc); box-shadow: var(--asg-shadow-sm), var(--asg-sheen); }
.asg-store .product-card { overflow: hidden; transition: transform 0.18s cubic-bezier(0.2,0.7,0.2,1), border-color 0.18s ease, box-shadow 0.18s ease; }
.asg-store .product-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 45%, var(--asg-border-strong));
  box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--asg-primary, #5bb8e8) 75%, transparent), var(--asg-shadow);
}
.asg-store .product-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--asg-surface-2); position: relative; }
.asg-store .product-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* "Currently unavailable" — a light-red badge on the thumbnail (product not buyable). */
.asg-store .product-card__unavailable {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  color: #ffb4b4; background: color-mix(in srgb, #ef4444 22%, rgba(0,0,0,0.55));
  border: 1px solid color-mix(in srgb, #ef4444 45%, transparent); backdrop-filter: blur(2px);
}
/* The buy box's "Currently unavailable" notice (product page). */
.asg-store .buy-card__unavailable { color: #ff9d9d; font-weight: 700; font-size: 1.05rem; margin: 0.25rem 0 0.35rem; }
.asg-store .product-card__placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 800; letter-spacing: 0.04em; color: color-mix(in srgb, var(--asg-text, #fff) 32%, transparent);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--asg-primary, #5bb8e8) 32%, transparent), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--asg-secondary, #3d9fd6) 32%, transparent), transparent 55%),
    var(--asg-surface-2);
}
.asg-store .product-card__title { font-size: 1.1rem; font-weight: 650; margin: 0 0 0.3rem; }
.asg-store .product-card__title a { color: var(--asg-text, #fff); }
.asg-store .product-card__title a:hover { text-decoration: none; color: var(--asg-primary, #5bb8e8); }
.asg-store .product-card__price { font-weight: 800; font-size: 1.1rem; }
.asg-store .product-card__interval { color: var(--asg-muted); font-weight: 500; font-size: 0.85rem; }
/* Thin divider between the price row and the grouped compatibility section on the card. */
.asg-store .product-card__divider { height: 1px; background: var(--asg-border); margin: 0.85rem 0 0; }
/* Compatibility grouped into "Works on" (platforms) + "Inputs" (devices), each on its own labelled
   row with breathing room (mirrors the product page, just compact). Wraps cleanly on mobile. */
.asg-store .product-card__compat { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.7rem; }
.asg-store .product-card__compat-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.asg-store .product-card__compat-label {
  flex: none; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--asg-muted);
}
.asg-store .product-card__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.asg-store .product-card__badge {
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--asg-border-strong); background: color-mix(in srgb, #fff 3%, transparent);
  font-size: 0.72rem; font-weight: 600; color: var(--asg-muted);
}
.asg-store .product-card__badge svg { width: 13px; height: 13px; color: var(--asg-muted); flex: none; }
.asg-store .product-card__badge--input { border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 40%, var(--asg-border-strong)); }
.asg-store .product-card__badge--input svg { color: var(--asg-primary, #5bb8e8); }
.asg-store .product-card__badge--requires { border-color: color-mix(in srgb, #f1c40f 40%, var(--asg-border-strong)); color: var(--asg-text, #e8eef5); }

/* ---- category grid (/categories) ---- */
.asg-store .category-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem;
}
.asg-store .category-card {
  display: flex; flex-direction: column; overflow: hidden; color: var(--asg-text, #f8fafc);
  background: var(--asg-surface); border: 1px solid var(--asg-border); border-radius: var(--asg-radius);
  box-shadow: var(--asg-shadow-sm), var(--asg-sheen);
  transition: transform 0.18s cubic-bezier(0.2,0.7,0.2,1), border-color 0.18s ease, box-shadow 0.18s ease;
}
.asg-store .category-card:hover {
  transform: translateY(-4px); text-decoration: none;
  border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 45%, var(--asg-border-strong));
  box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--asg-primary, #5bb8e8) 75%, transparent), var(--asg-shadow);
}
.asg-store .category-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--asg-surface-2); }
.asg-store .category-card__media img { width: 100%; height: 100%; object-fit: cover; }
.asg-store .category-card__placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 800; color: color-mix(in srgb, var(--asg-text, #fff) 32%, transparent);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--asg-primary, #5bb8e8) 32%, transparent), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--asg-secondary, #3d9fd6) 32%, transparent), transparent 55%),
    var(--asg-surface-2);
}
.asg-store .category-card__body { padding: 0.9rem 1rem; }
.asg-store .category-card__name { font-size: 1.05rem; font-weight: 650; color: var(--asg-text, #fff); }
.asg-store .category-card__desc { color: var(--asg-muted); margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.5; }

/* ---- chips / badges / filters ---- */
.asg-store .asg-chip {
  display: inline-block; padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--asg-primary, #5bb8e8) 40%, transparent);
  color: var(--asg-primary, #5bb8e8); background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 12%, transparent);
}
.asg-store .asg-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* On a phone, many category pills would wrap into several tall rows and push the product grid far down the
   page. Switch to a single horizontally-scrollable row so the grid stays near the top. */
@media (max-width: 560px) {
  .asg-store .asg-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.3rem; scrollbar-width: thin; }
  .asg-store .asg-filters > * { flex: 0 0 auto; }
}
.asg-store .asg-filter {
  padding: 0.4rem 0.95rem; border-radius: 999px; font-weight: 500; font-size: 0.9rem;
  border: 1px solid var(--asg-border); color: var(--asg-muted); background: var(--asg-surface);
}
.asg-store .asg-filter:hover { color: var(--asg-text, #fff); border-color: var(--asg-border-strong); text-decoration: none; }
.asg-store .asg-filter.is-active { color: #fff; border-color: transparent; background: linear-gradient(90deg, var(--asg-primary, #5bb8e8), var(--asg-secondary, #3d9fd6)); }

/* ---- product detail ---- */
.asg-store .product-detail { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; }
@media (min-width: 860px) { .asg-store .product-detail { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.asg-store .product-detail__media { border: 1px solid var(--asg-border); border-radius: var(--asg-radius); overflow: hidden; background: var(--asg-surface-2); aspect-ratio: 16 / 10; }
.asg-store .product-detail__media img { width: 100%; height: 100%; object-fit: cover; }

/* Product gallery thumbnails (block-built product pages). */
.asg-store .product-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.asg-store .product-gallery__thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--asg-border); border-radius: var(--asg-radius-sm); }
/* Thumbnails are buttons that swap the main image (gallery.js). Reset the button chrome; mark the active one
   and give a keyboard focus ring in the brand colour. */
.asg-store .product-gallery__thumb { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; border-radius: var(--asg-radius-sm); transition: opacity 0.15s ease; }
.asg-store .product-gallery__thumb:hover { opacity: 0.85; }
.asg-store .product-gallery__thumb.is-active img { border-color: var(--asg-primary); box-shadow: 0 0 0 1px var(--asg-primary); }
.asg-store .product-gallery__thumb:focus-visible { outline: 2px solid var(--asg-primary); outline-offset: 2px; }

/* Specs / details table block. */
.asg-store .specs-table { width: 100%; border-collapse: collapse; }
.asg-store .specs-table th, .asg-store .specs-table td { text-align: left; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--asg-border); vertical-align: top; }
.asg-store .specs-table th { color: var(--asg-muted); font-weight: 600; width: 38%; }
.asg-store .specs-table tr:last-child th, .asg-store .specs-table tr:last-child td { border-bottom: 0; }

/* Columns block: a responsive grid container whose children are nested content blocks. Falls back to a
   single column on mobile; min-width:0 on the cells keeps long content from forcing horizontal overflow. */
.asg-store .asg-columns { display: grid; grid-template-columns: repeat(var(--asg-columns, 2), minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.asg-store .asg-columns__col { min-width: 0; }
/* The nested blocks already use .section padding; tighten it inside a column so the layout reads as one row. */
.asg-store .asg-columns__col > .section, .asg-store .asg-columns__col > div > .section { padding-top: 0; padding-bottom: 0; }
/* The Columns block ends where its content ends: since the inner blocks are tightened (above), the wrapper
   section's own 2.5rem bottom padding stacked with the NEXT section's top padding into an ~80px void under
   every Columns block. The footer region keeps the default rhythm — its columns are the footer's body. */
.asg-store .section:has(> .asg-columns) { padding-bottom: 0; }
.asg-store .asg-region--footer .section:has(> .asg-columns) { padding-bottom: 2.5rem; }
@media (max-width: 720px) { .asg-store .asg-columns { grid-template-columns: minmax(0, 1fr); } }
/* "Interleave" mobile mode (the Columns block's mobile=interleave setting): instead of stacking column 0 in
   full and then column 1 (the default, which buries a product's buy box under the whole description), the
   column wrappers collapse via display:contents so every child becomes a direct flex item of the container,
   then each item's inline `order` (set by the renderer) reflows them row-by-row across columns — e.g.
   gallery → buy box → details. Inert on desktop: the wrappers and `order` only take effect at this width. */
@media (max-width: 720px) {
  .asg-store .asg-columns--interleave { display: flex; flex-direction: column; }
  .asg-store .asg-columns--interleave .asg-columns__col { display: contents; }
  .asg-store .asg-columns--interleave .asg-columns__item { min-width: 0; }
}

/* Placeholder shown for dynamic product blocks in the admin live preview. */
.asg-store .pb-dynamic-placeholder { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--asg-border-strong); border-radius: var(--asg-radius); padding: 1.5rem; background: rgba(255,255,255,0.02); }
.asg-store .pb-dynamic-placeholder__label { font-weight: 700; }
.asg-store .pb-dynamic-placeholder__heading { color: var(--asg-text); }
.asg-store .pb-dynamic-placeholder__note { color: var(--asg-muted); font-size: 0.85rem; }
.asg-store .product-blocks { padding-top: 0.5rem; }

/* ---- Per-viewport layouts: a surface can ship a SEPARATE desktop and mobile block tree (theme editor). When
   it does, both trees render and this media query shows exactly one for the current screen width. A surface
   with no distinct mobile layout renders the desktop tree UNWRAPPED (always shown), so these rules only affect
   pages an author has actually customized for mobile. Breakpoint matches the storefront's main mobile cut. ---- */
.asg-store .asg-vp--mobile { display: none; }
@media (max-width: 767.98px) {
  .asg-store .asg-vp--desktop { display: none; }
  .asg-store .asg-vp--mobile { display: block; }
}
.asg-store .product-detail__title { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; margin: 0.4rem 0 0.6rem; }
.asg-store .price-block { display: flex; align-items: baseline; gap: 0.5rem; margin: 1rem 0; }
.asg-store .price-block__amount { font-size: 2rem; font-weight: 800; }
.asg-store .price-block__interval { color: var(--asg-muted); }
/* Subscription reassurance under the price — subtle, professional, never shouty. */
.asg-store .buy-card__renew { display: inline-flex; align-items: center; gap: 0.4rem; margin: -0.35rem 0 1rem;
  font-size: 0.82rem; color: var(--asg-muted); }
.asg-store .buy-card__renew svg { color: var(--asg-primary, #5bb8e8); flex: none; }
.asg-store .buy-card { background: var(--asg-surface); border: 1px solid var(--asg-border); border-radius: var(--asg-radius); padding: 1.6rem; box-shadow: var(--asg-shadow), var(--asg-sheen); position: sticky; top: 5rem; }
/* On a phone the buy box stacks into the single-column flow (right after the gallery), so it must NOT stick —
   a sticky panel would pin itself over the description as the reader scrolls. Drop sticky and ease the padding. */
@media (max-width: 720px) {
  .asg-store .buy-card { position: static; top: auto; padding: 1.25rem; }
}
.asg-store .coupon-field { margin: 0 0 1rem; }

/* Checkout-review pay actions (the Order summary block). The pay buttons read as full-width, stacked CTAs on
   a phone — prominent and easy to thumb — and reflow to a side-by-side row from the small breakpoint up. The
   "Back" link always spans its own full-width row beneath them. */
.asg-store .asg-pay-actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.asg-store .asg-pay-actions > .btn-asg, .asg-store .asg-pay-actions > .btn-asg-outline { width: 100%; }
.asg-store .asg-pay-actions__back { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .asg-store .asg-pay-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- Checkout digital-content withdrawal-waiver notice (EU/UK) ---- */
.asg-store .asg-consent {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin: 0 0 1rem; padding: 0.8rem 0.9rem; border-radius: 12px;
  background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.45);
  color: var(--asg-text); font-size: 0.9rem; line-height: 1.45;
}
.asg-store .asg-consent__icon { flex: 0 0 auto; color: #f59e0b; margin-top: 1px; }
.asg-store .asg-consent__body { display: flex; gap: 0.55rem; align-items: flex-start; margin: 0; cursor: default; }
.asg-store .asg-consent--gate .asg-consent__body { cursor: pointer; }
.asg-store .asg-consent__check { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: #f59e0b; }
.asg-store .asg-consent--gate { border-color: rgba(245, 158, 11, 0.7); background: rgba(245, 158, 11, 0.14); }

/* ---- Card block ---- */
.asg-store .asg-card {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  border: 1px solid var(--asg-border); border-radius: var(--asg-radius);
  background: var(--asg-surface, rgba(255,255,255,0.02));
}
.asg-store .asg-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.asg-store .asg-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem 1.15rem; }
.asg-store .asg-card__title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.asg-store .asg-card__text { margin: 0; color: var(--asg-text-muted, #9aa4b2); line-height: 1.5; }
.asg-store .asg-card__btn { align-self: flex-start; margin-top: 0.35rem; }

/* ---- Pricing panel ---- */
.asg-store .asg-pricing { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.asg-store .asg-plan {
  display: flex; flex-direction: column; gap: 0.7rem; padding: 1.4rem 1.3rem;
  border: 1px solid var(--asg-border); border-radius: var(--asg-radius);
  background: var(--asg-surface, rgba(255,255,255,0.02));
}
.asg-store .asg-plan--featured { border-color: var(--asg-primary, #2dd4bf); box-shadow: 0 0 0 1px var(--asg-primary, #2dd4bf) inset; }
/* Author-worded ribbon across a plan's top edge ("Most Popular", "Best Value", ...). */
.asg-store .asg-plan { position: relative; }
.asg-store .asg-plan__badge {
  position: absolute; top: 0; left: 0; right: 0;
  border-radius: var(--asg-radius) var(--asg-radius) 0 0;
  background: var(--asg-primary, #5bb8e8); color: #0b1220;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 0.3rem 0.6rem;
}
.asg-store .asg-plan:has(.asg-plan__badge) { padding-top: 2.6rem; }
.asg-store .asg-plan__name { font-weight: 700; font-size: 1.05rem; }
.asg-store .asg-plan__price { font-size: 2rem; font-weight: 800; line-height: 1; }
.asg-store .asg-plan__period { font-size: 0.9rem; font-weight: 500; color: var(--asg-text-muted, #9aa4b2); margin-left: 0.25rem; }
.asg-store .asg-plan__features { list-style: none; margin: 0.3rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.asg-store .asg-plan__features li { position: relative; padding-left: 1.4rem; color: var(--asg-text-muted, #9aa4b2); }
.asg-store .asg-plan__features li::before { content: "✓"; position: absolute; left: 0; color: var(--asg-primary, #2dd4bf); font-weight: 700; }
.asg-store .asg-plan__btn { margin-top: auto; }

/* ---- Purchase-option picker (clickable cards) ---- */
.asg-store .variant-options { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; display: grid; gap: 0.55rem; }
.asg-store .variant-options__legend {
  float: left; width: 100%; padding: 0; margin: 0 0 0.3rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--asg-muted);
}
.asg-store .variant-option {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.85rem 1rem; border: 1px solid var(--asg-border-strong); border-radius: var(--asg-radius-sm);
  background: color-mix(in srgb, #fff 2%, transparent); cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.asg-store .variant-option:hover { border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 45%, var(--asg-border-strong)); }
.asg-store .variant-option:focus-within { outline: none; box-shadow: var(--asg-ring); }
/* Selected state — driven by buy-card.js (.is-selected) with a :has() fallback for no-JS. */
.asg-store .variant-option.is-selected,
.asg-store .variant-option:has(.variant-option__radio:checked) {
  border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 70%, transparent);
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--asg-primary, #5bb8e8) 35%, transparent);
}
.asg-store .variant-option__radio { accent-color: var(--asg-primary, #5bb8e8); margin: 0; flex: 0 0 auto; }
.asg-store .variant-option__body { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.asg-store .variant-option__name { font-weight: 600; }
.asg-store .variant-option__trial { font-size: 0.78rem; color: var(--asg-muted); }
.asg-store .variant-option__price { color: var(--asg-text); font-weight: 700; white-space: nowrap; text-align: right; }

/* ---- Compatibility badges ("Works on" / "Input support") ---- */
.asg-store .compat { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--asg-border); display: grid; gap: 0.9rem; }
.asg-store .compat__group { display: grid; gap: 0.55rem; }
.asg-store .compat__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--asg-muted); }
.asg-store .compat__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.asg-store .compat-chip {
  display: inline-flex; align-items: center; gap: 0.42rem;
  padding: 0.4rem 0.7rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--asg-border-strong); background: color-mix(in srgb, #fff 3%, transparent);
  font-size: 0.82rem; font-weight: 600; color: var(--asg-text);
}
.asg-store .compat-chip svg { width: 15px; height: 15px; color: var(--asg-muted); flex: none; }
.asg-store .compat-chip--input { border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 45%, var(--asg-border-strong)); }
.asg-store .compat-chip--input svg { color: var(--asg-primary, #5bb8e8); }
.asg-store .compat-chip--req { border-color: color-mix(in srgb, #f1c40f 50%, var(--asg-border-strong)); }
.asg-store .compat-chip--req svg { color: #f1c40f; }

/* "What's Included" checklist in the buy box. The list comes from the product's sanitized
   <ul><li>…</li></ul> (WhatsIncludedHtml), so the check icon is applied to each <li> via CSS. */
.asg-store .feature-list { margin: 1.25rem 0 0; }
.asg-store .feature-list ul { list-style: none; padding: 0; margin: 0; }
.asg-store .feature-list li {
  position: relative; padding: 0.4rem 0 0.4rem 1.7rem; color: var(--asg-muted); line-height: 1.5;
}
.asg-store .feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55rem; width: 18px; height: 18px;
  background-color: var(--asg-primary, #5bb8e8);
  -webkit-mask: var(--asg-check-mask) center / contain no-repeat;
  mask: var(--asg-check-mask) center / contain no-repeat;
}
:root {
  --asg-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.asg-store .prose { line-height: 1.7; }
.asg-store .prose :is(h1, h2, h3) { letter-spacing: -0.01em; }
.asg-store .prose img { max-width: 100%; border-radius: var(--asg-radius-sm); }
/* Blockquotes ("> …" in the editor) render with the same light left bar the editor shows — without this
   they were indistinguishable from normal paragraphs on the live site. Matches the guide separator gray. */
.asg-store .prose blockquote,
.asg-store .asg-doc__content blockquote {
  border-left: 3px solid rgba(203, 213, 225, 0.55);
  margin: 0 0 1rem;
  padding: 0.2rem 0 0.2rem 1rem;
  color: var(--asg-muted);
}
.asg-store .prose blockquote p:last-child,
.asg-store .asg-doc__content blockquote p:last-child { margin-bottom: 0; }

/* ---- Per-product long-form content sections (Features / How it works / Requirements / Highlights) ----
   Each section is a self-contained panel: an icon header over a styled list, so the page reads as a set
   of scannable cards instead of a wall of bullets. The list HTML is the product's sanitized <ul><li>. */
.asg-store .product-details__intro { margin-bottom: 1.4rem; }
.asg-store .product-section { padding: 0; margin-top: 1.1rem; }
.asg-store .prod-panel {
  background: var(--asg-surface);
  border: 1px solid var(--asg-border);
  border-radius: var(--asg-radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--asg-shadow), var(--asg-sheen);
}
.asg-store .prod-panel__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.05rem; }
.asg-store .prod-panel__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  color: var(--asg-primary, #5bb8e8);
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--asg-primary, #5bb8e8) 30%, transparent);
}
.asg-store .prod-panel__icon svg { width: 20px; height: 20px; }
.asg-store .prod-panel__title { font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 750; letter-spacing: -0.02em; margin: 0; }

/* The list inside a panel: no native bullets — each item gets a check marker (overridden per section). */
.asg-store .prod-panel__body { margin: 0; }
.asg-store .prod-panel__body > :first-child { margin-top: 0; }
.asg-store .prod-panel__body > :last-child { margin-bottom: 0; }
.asg-store .prod-panel__body ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.asg-store .prod-panel__body li {
  position: relative; padding: 0.55rem 0.2rem 0.55rem 1.9rem; color: var(--asg-text); line-height: 1.55;
  border-top: 1px solid color-mix(in srgb, var(--asg-border) 60%, transparent);
}
.asg-store .prod-panel__body li:first-child { border-top: 0; }
.asg-store .prod-panel__body li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.72rem; width: 18px; height: 18px;
  background-color: var(--asg-primary, #5bb8e8);
  -webkit-mask: var(--asg-check-mask) center / contain no-repeat;
  mask: var(--asg-check-mask) center / contain no-repeat;
}

/* Features & Highlights read as a scannable two-column grid on wider screens (no row dividers there). */
@media (min-width: 600px) {
  .asg-store .prod-panel--features .prod-panel__body ul,
  .asg-store .prod-panel--highlights .prod-panel__body ul { grid-template-columns: 1fr 1fr; gap: 0.4rem 1.6rem; }
  .asg-store .prod-panel--features .prod-panel__body li,
  .asg-store .prod-panel--highlights .prod-panel__body li { border-top: 0; padding-top: 0.4rem; padding-bottom: 0.4rem; }
}

/* Features are title + description pairs (like FAQ): each a full-width row, title bold over a muted blurb. */
.asg-store .prod-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.asg-store .prod-features__item { padding: 0; }
.asg-store .prod-features__title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: var(--asg-text); margin: 0 0 0.25rem; }
.asg-store .prod-features__desc { margin: 0; color: var(--asg-muted); line-height: 1.6; }

/* Highlights use a star marker instead of a check, for a touch of distinction. */
.asg-store .prod-panel--highlights .prod-panel__body li::before { -webkit-mask: var(--asg-star-mask) center / contain no-repeat; mask: var(--asg-star-mask) center / contain no-repeat; }

/* Requirements: amber accent (mirrors the "Cronus Zen Required" chip) so prerequisites stand out. */
.asg-store .prod-panel--requirements .prod-panel__icon { color: #f1c40f; background: color-mix(in srgb, #f1c40f 12%, transparent); border-color: color-mix(in srgb, #f1c40f 32%, transparent); }
.asg-store .prod-panel--requirements .prod-panel__body li::before { background-color: #f1c40f; }

/* How it works: numbered steps — the check marker becomes a numbered chip via a CSS counter. */
.asg-store .prod-panel--how .prod-panel__body ul { counter-reset: asg-step; gap: 0.85rem; }
.asg-store .prod-panel--how .prod-panel__body li { padding-left: 2.7rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.asg-store .prod-panel--how .prod-panel__body li::before {
  counter-increment: asg-step; content: counter(asg-step);
  -webkit-mask: none; mask: none;
  left: 0; top: 0.35rem; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; color: #08131c;
  background-color: var(--asg-primary, #5bb8e8);
}

:root {
  --asg-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* ---- CTA band ---- */
.asg-store .cta-band {
  border: 1px solid color-mix(in srgb, var(--asg-primary, #5bb8e8) 30%, var(--asg-border));
  border-radius: var(--asg-radius); padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; margin: 1rem 0 0;
  background:
    radial-gradient(120% 160% at 50% 0%, color-mix(in srgb, var(--asg-primary, #5bb8e8) 16%, transparent), transparent 60%),
    var(--asg-surface);
}
.asg-store .cta-band h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.asg-store .cta-band p { color: var(--asg-muted); max-width: 38rem; margin: 0 auto 1.4rem; }

/* ---- footer ---- */
.asg-store .asg-footer {
  border-top: 1px solid var(--asg-border); margin-top: 4rem; padding: 3.25rem 0 2rem; color: var(--asg-muted);
  background-image: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--asg-primary, #5bb8e8) 8%, transparent), transparent 55%);
}
.asg-store .asg-footer h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--asg-text, #fff); margin-bottom: 0.9rem; }
.asg-store .asg-footer a { color: var(--asg-muted); }
.asg-store .asg-footer a:hover { color: var(--asg-text, #fff); }

/* Header + footer nav links: the colour brightens on hover/focus (no chevron). */
.asg-store .asg-nav__links .nav-link,
.asg-store .asg-link,
.asg-store .asg-footer__top ul a { transition: color .15s ease; }
.asg-store .asg-nav__links .nav-link:hover,
.asg-store .asg-nav__links .nav-link:focus-visible,
.asg-store .asg-link:hover,
.asg-store .asg-link:focus-visible,
.asg-store .asg-footer__top ul a:hover,
.asg-store .asg-footer__top ul a:focus-visible,
.asg-store .asg-region--footer .prose a:hover,
.asg-store .asg-region--footer .prose a:focus-visible { color: var(--asg-text, #fff); }
.asg-store .asg-footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 860px) { .asg-store .asg-footer__top { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
/* Extra specificity (.asg-footer ancestor) so this single-column rule wins over the later ≤600px fallback-
   footer 2-up rule despite coming earlier in source — on the smallest phones the footer collapses to 1 column. */
@media (max-width: 520px) { .asg-store .asg-footer .asg-footer__top { grid-template-columns: 1fr; } }
.asg-store .asg-footer__brand-row { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.asg-store .asg-footer__blurb { font-size: 0.92rem; line-height: 1.6; max-width: 22rem; margin: 0; }
.asg-store .asg-footer ul { list-style: none; padding: 0; margin: 0; }
.asg-store .asg-footer ul li { margin-bottom: 0.55rem; }

/* ---- Block-driven footer (the editable Theme → Footer region) ---- */
/* The footer is built from page blocks; tighten their storefront spacing and give footer-appropriate type so
   a columns + rich-text layout reads as a proper footer. */
.asg-store .asg-region--footer .section { padding: 0; }
.asg-store .asg-region--footer .section + .section { margin-top: 1.4rem; }
.asg-store .asg-region--footer .asg-columns { gap: clamp(1.5rem, 4vw, 3rem); }
.asg-store .asg-region--footer .prose { color: var(--asg-muted); font-size: 0.92rem; line-height: 1.7; }
.asg-store .asg-region--footer .prose strong { color: var(--asg-text); font-size: 1.02rem; }
.asg-store .asg-region--footer .prose ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.asg-store .asg-region--footer .prose li { margin: 0.4rem 0; }
.asg-store .asg-region--footer .prose a { position: relative; color: var(--asg-muted); text-decoration: none; transition: color .15s ease; }
/* INLINE links in footer paragraphs (e.g. a legal block's "Related policies: Terms · Refund · Contact" line)
   must still read as links — only the nav-column LIST links stay muted like navigation. */
.asg-store .asg-region--footer .prose p a {
  color: var(--asg-link, var(--asg-primary, #5bb8e8)); text-decoration: underline; text-underline-offset: 2px;
}
.asg-store .asg-region--footer .prose p a:hover { color: var(--asg-text, #fff); }
.asg-store .asg-region--footer hr { border: 0; border-top: 1px solid var(--asg-border); margin: 1.9rem 0 1.4rem; }
/* The trailing legal/disclaimer rich-text block reads smaller + dimmer. */
.asg-store .asg-region--footer .section:last-child .prose { font-size: 0.82rem; opacity: 0.72; max-width: none; }
.asg-store .asg-footer__pay { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--asg-border); }
.asg-store .asg-footer__pay-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--asg-muted); margin-right: 0.35rem; }
.asg-store .asg-pay {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--asg-text, #fff);
  padding: 0.3rem 0.55rem; border-radius: 7px; border: 1px solid var(--asg-border-strong);
  background: color-mix(in srgb, #fff 4%, transparent);
}
.asg-store .asg-footer__legal { font-size: 0.78rem; line-height: 1.6; color: color-mix(in srgb, var(--asg-text, #f8fafc) 48%, transparent); margin: 1.75rem 0 0; }
.asg-store .asg-footer__bottom { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--asg-border); font-size: 0.85rem; }

/* ----------------------------------------------------------------------------
   Footer — mobile layout (Discord-commerce style). On a phone we want: the brand
   block full-width at the top, then the link groups in a tidy 2-up grid (not one
   tall stack, not scrambled), then a divider + centred copyright. This is scoped
   to the footer region only — the global Columns mobile behaviour is untouched.
---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Block-driven footer (Theme → Footer): the region's columns container is normally collapsed to one
     column by the global Columns rule. Here we force it back to a 2-column grid so the author's link
     groups sit two-per-row, and make the FIRST child (the brand + tagline block) span the full width so
     it reads as a header above the link grid. */
  .asg-store .asg-region--footer .asg-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem; align-items: start;
  }
  .asg-store .asg-region--footer .asg-columns > .asg-columns__col:first-child { grid-column: 1 / -1; }
  /* Comfortable, tappable link rows that brighten on press; uppercase muted group heading above them. */
  .asg-store .asg-region--footer .prose li { margin: 0; }
  .asg-store .asg-region--footer .prose li a { display: block; padding: 0.5rem 0; min-height: 40px; }
  .asg-store .asg-region--footer .prose strong { display: block; margin-bottom: 0.35rem; text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.07em; color: var(--asg-faint); }
  /* The brand block keeps its name at full size (not treated as a group heading) + reads as a lead. */
  .asg-store .asg-region--footer .asg-columns__col:first-child .prose strong { text-transform: none; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--asg-text); }
  .asg-store .asg-region--footer .asg-columns__col:first-child .prose { font-size: 0.92rem; }
  /* The trailing legal/copyright block spans full width and centres at the very bottom. */
  .asg-store .asg-region--footer .section:last-child .prose { text-align: center; }

  /* Phones: the desktop's 4rem gap above the footer reads as a big empty band at the bottom of ordinary
     content pages — halve it (the section's own bottom padding still separates content from the footer). */
  .asg-store .asg-footer { margin-top: 1.5rem; padding-top: 2.25rem; }

  /* Built-in fallback footer (no footer blocks authored): same intent — brand full-width, links 2-up. */
  .asg-store .asg-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
  .asg-store .asg-footer__top > :first-child { grid-column: 1 / -1; }
  .asg-store .asg-footer ul li { margin-bottom: 0; }
  .asg-store .asg-footer ul li a { display: block; padding: 0.5rem 0; min-height: 40px; }
  .asg-store .asg-footer__bottom { justify-content: center; text-align: center; }
}

/* ---- cookie-consent notice (global component, pinned bottom; opt-in via theme) ---- */
.asg-store .asg-cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1040;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
  max-width: 1160px; margin: 0 auto; padding: 0.9rem 1.1rem;
  background: var(--asg-surface-3); border: 1px solid var(--asg-border-strong);
  border-radius: var(--asg-radius-sm); box-shadow: var(--asg-shadow), var(--asg-sheen);
}
.asg-store .asg-cookie__text { flex: 1 1 16rem; min-width: 0; margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--asg-muted); }
.asg-store .asg-cookie__link { margin-left: 0.35rem; color: var(--asg-primary, #5bb8e8); font-weight: 600; }
.asg-store .asg-cookie__accept { flex: 0 0 auto; }
@media (max-width: 520px) { .asg-store .asg-cookie__accept { width: 100%; } }

/* ---- generic surfaces used on simple pages ---- */
.asg-store .panel {
  position: relative; background: var(--asg-surface); border: 1px solid var(--asg-border);
  border-radius: var(--asg-radius); padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: var(--asg-shadow-sm), var(--asg-sheen);
  background-image: radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--asg-primary, #5bb8e8) 7%, transparent), transparent 45%);
}
.asg-store .empty-state {
  text-align: center; color: var(--asg-muted); padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border: 1px dashed var(--asg-border-strong); border-radius: var(--asg-radius);
  background: color-mix(in srgb, var(--asg-surface) 55%, transparent);
}
.asg-store .empty-state svg { width: 40px; height: 40px; color: var(--asg-faint); margin-bottom: 0.75rem; }
.asg-store .empty-state h3 { color: var(--asg-text, #fff); font-weight: 700; margin: 0 0 0.4rem; letter-spacing: -0.01em; }

/* ---- status emblem (success / error / confirmation pages) ---- */
.asg-store .status-emblem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 1.25rem;
  color: var(--asg-primary, #5bb8e8);
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--asg-primary, #5bb8e8) 35%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--asg-primary, #5bb8e8) 7%, transparent);
}
.asg-store .status-emblem svg { width: 34px; height: 34px; }
.asg-store .status-emblem--success { color: #34d399; background: color-mix(in srgb, #22C55E 15%, transparent); border-color: color-mix(in srgb, #22C55E 38%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, #22C55E 8%, transparent); }
.asg-store .status-emblem--danger { color: #f87171; background: color-mix(in srgb, #EF4444 15%, transparent); border-color: color-mix(in srgb, #EF4444 38%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, #EF4444 8%, transparent); }
.asg-store .status-emblem--warning { color: #fbbf24; background: color-mix(in srgb, #F59E0B 15%, transparent); border-color: color-mix(in srgb, #F59E0B 38%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, #F59E0B 8%, transparent); }
.asg-store .status-emblem__code { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }

/* ---- Rich-text content: callouts + embedded media (pages, product descriptions, guide) ---- */
/* Each variant class is self-sufficient (full box + colour + icon) so a single class works whether the
   markup is the legacy "<div class='callout callout-info'>" or the doc editor's "<p class='callout-info'>". */
/* The callout box is block-level (paragraph / heading / a list-in-callout's <ul>/<ol>) — NOT a list item. */
.asg-store .callout:not(li),
.asg-store .callout-info:not(li),
.asg-store .callout-success:not(li),
.asg-store .callout-warning:not(li),
.asg-store .callout-danger:not(li),
.asg-store .callout-tip:not(li),
.asg-store .callout-note:not(li) {
  position: relative;
  border: 1px solid var(--asg-border, rgba(148,163,184,0.25));
  border-left-width: 4px;
  border-radius: 10px;
  padding: 0.85rem 1.1rem 0.85rem 2.65rem;
  margin: 1rem 0;
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 8%, transparent);
}
.asg-store .callout:not(li) > :last-child { margin-bottom: 0; }
/* The leading icon (per variant) is a rounded-square colour tile in the left gutter: an accent-tinted fill
   holding the accent-coloured glyph — a clean little badge, one per callout (followers hide it). */
.asg-store .callout-info:not(li)::before,
.asg-store .callout-success:not(li)::before,
.asg-store .callout-warning:not(li)::before,
.asg-store .callout-danger:not(li)::before,
.asg-store .callout-tip:not(li)::before,
.asg-store .callout-note:not(li)::before {
  position: absolute;
  left: 0.8rem;
  top: 0.85rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 700;
}
.asg-store .callout-info:not(li) { border-left-color: #5bb8e8; background: color-mix(in srgb, #5bb8e8 12%, transparent); }
.asg-store .callout-info:not(li)::before { content: "ℹ"; color: #5bb8e8; background: color-mix(in srgb, #5bb8e8 20%, transparent); }
.asg-store .callout-success:not(li) { border-left-color: #22c55e; background: color-mix(in srgb, #22c55e 12%, transparent); }
.asg-store .callout-success:not(li)::before { content: "✓"; color: #22c55e; background: color-mix(in srgb, #22c55e 20%, transparent); }
.asg-store .callout-warning:not(li) { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.asg-store .callout-warning:not(li)::before { content: "⚠"; color: #f59e0b; background: color-mix(in srgb, #f59e0b 20%, transparent); }
.asg-store .callout-danger:not(li) { border-left-color: #ef4444; background: color-mix(in srgb, #ef4444 13%, transparent); }
.asg-store .callout-danger:not(li)::before { content: "⛔"; color: #ef4444; background: color-mix(in srgb, #ef4444 20%, transparent); }
.asg-store .callout-tip:not(li) { border-left-color: #a855f7; background: color-mix(in srgb, #a855f7 13%, transparent); }
.asg-store .callout-tip:not(li)::before { content: "💡"; color: #a855f7; background: color-mix(in srgb, #a855f7 20%, transparent); }
.asg-store .callout-note:not(li) { border-left-color: #94a3b8; background: color-mix(in srgb, #94a3b8 12%, transparent); }
.asg-store .callout-note:not(li)::before { content: "✎"; color: #cbd5e1; background: color-mix(in srgb, #94a3b8 24%, transparent); }
/* NOTE: the old `> strong:first-child { display:block; color:accent }` "title" rules were removed on purpose:
   `:first-child` ignores TEXT nodes, so a word bolded mid-sentence in a callout body jumped to its own line in
   the accent colour. The title look comes from the first-BLOCK colour rules below — don't re-add these. */
/* The FIRST block of a callout run is its title line — accent-coloured even without a bold run (mirrors editor). */
.asg-store .callout-info:not(li):not(.callout-info + .callout-info)          { color: #5bb8e8; }
.asg-store .callout-success:not(li):not(.callout-success + .callout-success) { color: #22c55e; }
.asg-store .callout-warning:not(li):not(.callout-warning + .callout-warning) { color: #f59e0b; }
.asg-store .callout-danger:not(li):not(.callout-danger + .callout-danger)    { color: #ef4444; }
.asg-store .callout-tip:not(li):not(.callout-tip + .callout-tip)             { color: #a855f7; }
.asg-store .callout-note:not(li):not(.callout-note + .callout-note)          { color: #94a3b8; }
/* Page-builder Callout block: colour its dedicated title to match the variant accent too. */
.asg-store .asg-callout--info .asg-callout__title    { color: #5bb8e8; }
.asg-store .asg-callout--success .asg-callout__title { color: #22c55e; }
.asg-store .asg-callout--warning .asg-callout__title { color: #f59e0b; }
.asg-store .asg-callout--danger .asg-callout__title  { color: #ef4444; }
.asg-store .asg-callout--tip .asg-callout__title     { color: #a855f7; }
.asg-store .asg-callout--note .asg-callout__title    { color: #94a3b8; }
.asg-store .asg-callout--important .asg-callout__title { color: #f59e0b; }
/* The first bold line is the author's OWN heading (no auto INFO/WARNING/TIP label is injected — the editor
   dropped it too, so editor + published render the same user-typed title). */
/* Multi-line body: consecutive same-type callouts render as ONE box — the first keeps the icon + rounded top,
   each follower drops its icon/top edge and reads as a body line. */
.asg-store .callout-info:not(li):has(+ .callout-info:not(li)), .asg-store .callout-success:not(li):has(+ .callout-success:not(li)),
.asg-store .callout-warning:not(li):has(+ .callout-warning:not(li)), .asg-store .callout-danger:not(li):has(+ .callout-danger:not(li)),
.asg-store .callout-tip:not(li):has(+ .callout-tip:not(li)), .asg-store .callout-note:not(li):has(+ .callout-note:not(li)) {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; margin-bottom: 0; padding-bottom: 0.25rem;
}
.asg-store .callout-info:not(li) + .callout-info:not(li), .asg-store .callout-success:not(li) + .callout-success:not(li),
.asg-store .callout-warning:not(li) + .callout-warning:not(li), .asg-store .callout-danger:not(li) + .callout-danger:not(li),
.asg-store .callout-tip:not(li) + .callout-tip:not(li), .asg-store .callout-note:not(li) + .callout-note:not(li) {
  margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0.15rem;
}
.asg-store .callout-info:not(li) + .callout-info:not(li)::before, .asg-store .callout-success:not(li) + .callout-success:not(li)::before,
.asg-store .callout-warning:not(li) + .callout-warning:not(li)::before, .asg-store .callout-danger:not(li) + .callout-danger:not(li)::before,
.asg-store .callout-tip:not(li) + .callout-tip:not(li)::before, .asg-store .callout-note:not(li) + .callout-note:not(li)::before { display: none; }
/* A table inside a callout box (the editor wraps it in a classed <div> on save): the box's padding gives
   it the same left gutter as text; the table fills the inner width (!important beats an inline width the
   column drag-resize may have stamped on the table). */
.asg-store [class*="callout-"]:not(li) > table { width: 100% !important; margin: 0.25rem 0; }
/* Symmetric breathing room: the table box's RIGHT inset matches the icon gutter on the left. */
.asg-store [class*="callout-"]:not(li):has(> table) { padding-right: 2.65rem; }
/* The empty sandwich-keeper line right after a table collapses to a thin box closer, so the bottom gap
   reads like the side gutters. It regains normal height the moment the author types into it. */
.asg-store [class*="callout-"]:not(li):has(> table) + [class*="callout-"]:not(li):has(> br:only-child) {
  line-height: 0; padding-top: 0; padding-bottom: 2.1rem;
}
/* A table CELL is never a callout — neutralize classes a pre-fix editor save may have stamped on cells
   (the editor heals them on the document's next open/save); render as a plain cell meanwhile. */
.asg-store :is(td, th)[class*="callout-"] {
  position: static !important; border: 1px solid var(--asg-border, rgba(148,163,184,0.25)) !important;
  border-radius: 0 !important; padding: 0.5rem 0.7rem !important; margin: 0 !important;
  background: transparent !important; color: inherit !important;
}
.asg-store :is(td, th)[class*="callout-"]::before { content: none !important; }

.asg-store .embed { position: relative; width: 100%; padding-top: 56.25%; margin: 1rem 0; border-radius: 10px; overflow: hidden; }
.asg-store .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.asg-store .prose img, .asg-store .page-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---- Themed scrollbars (storefront) ---- */
.asg-store { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--asg-text, #f8fafc) 24%, transparent) transparent; }
.asg-store::-webkit-scrollbar,
.asg-store ::-webkit-scrollbar { width: 11px; height: 11px; }
.asg-store::-webkit-scrollbar-track,
.asg-store ::-webkit-scrollbar-track { background: transparent; }
.asg-store::-webkit-scrollbar-thumb,
.asg-store ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--asg-text, #f8fafc) 20%, transparent);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.asg-store::-webkit-scrollbar-thumb:hover,
.asg-store ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 60%, var(--asg-text, #fff));
  background-clip: padding-box;
}
.asg-store::-webkit-scrollbar-corner,
.asg-store ::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================================
   Documentation / knowledge-base content blocks (Guide platform, reusable).
   Callouts, code, quote, accordion, steps, checklist, tabs, download. The base
   accent comes from --asg-primary; each callout variant overrides its hue via a
   per-variant --asg-cl token so the icon, border and tint stay in sync.
   ============================================================================ */

/* ---- Callout / admonition ---- */
.asg-store .asg-callout {
  --asg-cl: var(--asg-primary, #5bb8e8);
  position: relative; display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: var(--asg-radius-sm, 10px);
  border: 1px solid color-mix(in srgb, var(--asg-cl) 32%, var(--asg-border));
  border-left: 4px solid var(--asg-cl);
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--asg-cl) 14%, transparent), transparent 60%),
    var(--asg-surface);
}
.asg-store .asg-callout--info { --asg-cl: #5bb8e8; }
.asg-store .asg-callout--warning { --asg-cl: #f59e0b; }
.asg-store .asg-callout--success { --asg-cl: #22c55e; }
.asg-store .asg-callout--danger { --asg-cl: #ef4444; }
.asg-store .asg-callout--tip { --asg-cl: #2dd4bf; }
.asg-store .asg-callout--note { --asg-cl: var(--asg-muted, #94a3b8); }
.asg-store .asg-callout--important { --asg-cl: var(--asg-secondary, #a855f7); }
.asg-store .asg-callout__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; color: var(--asg-cl);
  background: color-mix(in srgb, var(--asg-cl) 16%, transparent);
}
.asg-store .asg-callout__icon svg { width: 18px; height: 18px; }
.asg-store .asg-callout__body { min-width: 0; flex: 1 1 auto; }
.asg-store .asg-callout__label {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--asg-cl); margin-bottom: 0.15rem;
}
.asg-store .asg-callout__title { font-weight: 700; color: var(--asg-text, #f8fafc); margin: 0 0 0.2rem; line-height: 1.3; }
.asg-store .asg-callout__text { margin: 0; color: var(--asg-muted); line-height: 1.6; }
.asg-store .asg-callout__dismiss {
  flex: none; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; margin: -0.2rem -0.3rem 0 0; cursor: pointer;
  border: 0; border-radius: 7px; background: transparent; color: var(--asg-muted);
}
.asg-store .asg-callout__dismiss:hover { color: var(--asg-text, #fff); background: color-mix(in srgb, #fff 8%, transparent); }
.asg-store .asg-callout__dismiss svg { width: 15px; height: 15px; }

/* ---- Code block (language label + copy button) ---- */
.asg-store .asg-code {
  border: 1px solid var(--asg-border); border-radius: var(--asg-radius-sm, 10px); overflow: hidden;
  background: var(--asg-surface-2, #10161e);
}
.asg-store .asg-code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.45rem 0.5rem 0.45rem 0.85rem; border-bottom: 1px solid var(--asg-border);
  background: color-mix(in srgb, #fff 3%, transparent);
}
.asg-store .asg-code__lang {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--asg-muted);
}
.asg-store .asg-code__copy {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
  padding: 0.28rem 0.6rem; border-radius: 7px; font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--asg-border-strong); background: rgba(255, 255, 255, 0.02); color: var(--asg-muted);
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.asg-store .asg-code__copy:hover { color: var(--asg-text, #fff); border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 55%, transparent); }
.asg-store .asg-code__copy.is-copied { color: #22c55e; border-color: color-mix(in srgb, #22c55e 55%, transparent); }
.asg-store .asg-code__copy svg { width: 14px; height: 14px; flex: none; }
.asg-store .asg-code__pre {
  margin: 0; padding: 1rem 1.1rem; overflow-x: auto; /* horizontal scroll stays inside the block, never the page */
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 0.86rem; line-height: 1.6; color: var(--asg-text, #f8fafc);
}
.asg-store .asg-code__pre code { white-space: pre; }

/* ---- Pull-quote ---- */
.asg-store .asg-quote {
  margin: 0; padding: 1.1rem 1.4rem; border-left: 4px solid var(--asg-primary, #5bb8e8);
  border-radius: var(--asg-radius-sm, 10px);
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 7%, var(--asg-surface));
}
.asg-store .asg-quote__text { margin: 0; font-size: 1.15rem; line-height: 1.6; font-weight: 500; color: var(--asg-text, #f8fafc); }
.asg-store .asg-quote__author { margin-top: 0.6rem; color: var(--asg-muted); font-size: 0.9rem; }
.asg-store .asg-quote__author::before { content: "\2014\00a0"; } /* em dash */

/* ---- Accordion (reuses .faq-item styling; just the wrapper) ---- */
.asg-store .asg-accordion { padding-top: 0.25rem; padding-bottom: 0.25rem; }

/* ---- Steps (numbered vertical list) ---- */
.asg-store .asg-steps { list-style: none; counter-reset: asg-step; margin: 0; padding: 0; }
.asg-store .asg-steps__item { position: relative; counter-increment: asg-step; padding: 0 0 1.4rem 3rem; }
.asg-store .asg-steps__item::before {
  content: counter(asg-step); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 700; font-size: 0.9rem; color: var(--asg-btn-ink, #04141c);
  background: linear-gradient(140deg, var(--asg-primary, #5bb8e8), var(--asg-secondary, #3d9fd6));
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--asg-primary, #5bb8e8) 80%, transparent);
}
/* Connector line down the left rail (not on the last step). */
.asg-store .asg-steps__item:not(:last-child)::after {
  content: ""; position: absolute; left: 1rem; top: 2.2rem; bottom: 0.2rem; width: 2px;
  background: var(--asg-border-strong); transform: translateX(-1px);
}
.asg-store .asg-steps__title { margin: 0.25rem 0 0.25rem; font-weight: 650; color: var(--asg-text, #f8fafc); }
.asg-store .asg-steps__text { margin: 0; color: var(--asg-muted); line-height: 1.6; }

/* ---- Checklist (read-only visual checks) ---- */
.asg-store .asg-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.asg-store .asg-checklist__item { display: flex; align-items: flex-start; gap: 0.7rem; }
.asg-store .asg-checklist__box {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--asg-btn-ink, #04141c);
  background: color-mix(in srgb, #22c55e 88%, transparent);
}
.asg-store .asg-checklist__box svg { width: 13px; height: 13px; }
.asg-store .asg-checklist__text { color: var(--asg-text, #f8fafc); line-height: 1.5; }

/* ---- Tabs (CSS-only radio tabs) ---- */
.asg-store .asg-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--asg-border); }
.asg-store .asg-tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.asg-store .asg-tabs__label {
  order: 1; cursor: pointer; padding: 0.6rem 0.95rem; margin-bottom: -1px;
  font-weight: 600; font-size: 0.92rem; color: var(--asg-muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.asg-store .asg-tabs__label:hover { color: var(--asg-text, #fff); }
.asg-store .asg-tabs__panel {
  order: 2; flex: 0 0 100%; width: 100%; display: none;
  padding: 1.1rem 0.25rem 0; color: var(--asg-muted); line-height: 1.6;
}
.asg-store .asg-tabs__panel p { margin: 0; }
/* A checked radio lights its label and reveals the matching panel (Nth radio → Nth panel). */
.asg-store .asg-tabs__radio:checked + .asg-tabs__label {
  color: var(--asg-text, #f8fafc); border-bottom-color: var(--asg-primary, #5bb8e8);
}
.asg-store .asg-tabs__radio:focus-visible + .asg-tabs__label { outline: 2px solid var(--asg-primary, #5bb8e8); outline-offset: 2px; border-radius: 6px; }
.asg-store .asg-tabs__radio:nth-of-type(1):checked ~ .asg-tabs__panel:nth-of-type(1),
.asg-store .asg-tabs__radio:nth-of-type(2):checked ~ .asg-tabs__panel:nth-of-type(2),
.asg-store .asg-tabs__radio:nth-of-type(3):checked ~ .asg-tabs__panel:nth-of-type(3),
.asg-store .asg-tabs__radio:nth-of-type(4):checked ~ .asg-tabs__panel:nth-of-type(4),
.asg-store .asg-tabs__radio:nth-of-type(5):checked ~ .asg-tabs__panel:nth-of-type(5),
.asg-store .asg-tabs__radio:nth-of-type(6):checked ~ .asg-tabs__panel:nth-of-type(6),
.asg-store .asg-tabs__radio:nth-of-type(7):checked ~ .asg-tabs__panel:nth-of-type(7),
.asg-store .asg-tabs__radio:nth-of-type(8):checked ~ .asg-tabs__panel:nth-of-type(8) { display: block; }

/* ---- Download link / button ---- */
.asg-store .asg-download {
  display: inline-flex; align-items: center; gap: 0.7rem; max-width: 100%;
  padding: 0.7rem 1.1rem; border-radius: var(--asg-radius-sm, 10px);
  border: 1px solid var(--asg-border-strong); background: var(--asg-surface);
  color: var(--asg-text, #f8fafc); font-weight: 600; box-shadow: var(--asg-shadow-sm), var(--asg-sheen);
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.asg-store .asg-download:hover { text-decoration: none; transform: translateY(-1px); border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 60%, transparent); color: var(--asg-text, #fff); }
.asg-store .asg-download__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; color: var(--asg-btn-ink, #04141c);
  background: linear-gradient(140deg, var(--asg-primary, #5bb8e8), var(--asg-secondary, #3d9fd6));
}
.asg-store .asg-download__icon svg { width: 18px; height: 18px; }
.asg-store .asg-download__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.asg-store .asg-download__size { color: var(--asg-muted); font-weight: 500; font-size: 0.85rem; padding-left: 0.2rem; }

/* ============================================================================
   Public Guide / documentation site (/guide). A Stripe/GitBook-style 3-pane
   docs shell built entirely on the .asg-store design tokens so it matches the
   storefront exactly. Layout: sticky left nav rail, centered content column,
   sticky right table-of-contents — the whole shell is capped and centered as
   ONE unit (never full-bleed: on a wide monitor a full-bleed grid pinned the
   nav to the far-left edge and the ToC to the far-right with a dead zone in
   between). Collapses to a single column + drawer nav on mobile, and never
   produces a horizontal scrollbar.
============================================================================ */
.asg-store .asg-doc {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 240px;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
  padding: 1.5rem 0 3.5rem;
  min-width: 0;
}
/* Guide pages get a docs-width chrome: every .container (header nav, docs shell, footer) widens from the
   1160px storefront cap to the same 1400px docs cap, so the brand sits over the sidebar and the account
   area over the ToC — the header and the docs grid read as one aligned frame. */
.asg-store:has(.asg-doc) { --asg-doc-max: 1400px; }
.asg-store:has(.asg-doc) .container { max-width: var(--asg-doc-max); }
/* Landing/overview pages have no right-hand "on this page" TOC — drop the reserved third column so the
   content uses the full width instead of leaving a ~240px gap on the right. */
@media (min-width: 1101px) {
  .asg-store .asg-doc--no-aside { grid-template-columns: 272px minmax(0, 1fr); }
}
@media (max-width: 1100px) { .asg-store .asg-doc { grid-template-columns: 248px minmax(0, 1fr); } }
@media (max-width: 880px) { .asg-store .asg-doc { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0.5rem; } }

/* ---- mobile drawer trigger (hidden on desktop) ---- */
.asg-store .asg-doc__navtoggle {
  display: none; align-items: center; gap: 0.55rem; width: 100%;
  margin-bottom: 1rem; padding: 0.7rem 0.95rem;
  border: 1px solid var(--asg-border-strong); border-radius: var(--asg-radius-sm);
  background: var(--asg-surface); color: var(--asg-text); font-weight: 600; font-size: 0.92rem;
  box-shadow: var(--asg-shadow-sm), var(--asg-sheen); cursor: pointer;
}
.asg-store .asg-doc__navtoggle svg { color: var(--asg-primary, #5bb8e8); flex: none; }
@media (max-width: 880px) { .asg-store .asg-doc__navtoggle { display: flex; } }

/* ---- left sidebar ---- */
/* The sidebar cell stretches the full column height and carries a hairline right rail, so the nav reads as
   an anchored pane (docs-site style) instead of a floating list; the INNER wrapper is the sticky scroller. */
.asg-store .asg-doc__sidebar { align-self: stretch; min-width: 0; border-right: 1px solid var(--asg-border); }
.asg-store .asg-doc__sidebar-inner {
  position: sticky; top: 78px;
  max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 0.85rem;
}
/* Brand at the top of the mobile drawer only — desktop's storefront header already carries it. */
.asg-store .asg-doc__brand { display: none; }
.asg-store .asg-doc__sidebar-inner::-webkit-scrollbar { width: 8px; }
.asg-store .asg-doc__sidebar-inner::-webkit-scrollbar-thumb { background: var(--asg-border-strong); border-radius: 8px; }

.asg-store .asg-doc__search-trigger {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; margin-bottom: 1rem;
  padding: 0.55rem 0.75rem; border: 1px solid var(--asg-border-strong); border-radius: var(--asg-radius-sm);
  background: var(--asg-surface-2); color: var(--asg-faint); font-size: 0.86rem; cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.asg-store .asg-doc__search-trigger:hover { border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 50%, var(--asg-border-strong)); color: var(--asg-muted); }
.asg-store .asg-doc__search-trigger svg { flex: none; }
.asg-store .asg-doc__search-trigger span { flex: 1 1 auto; text-align: left; }
.asg-store .asg-doc__kbd {
  display: inline-flex; align-items: center; gap: 0.2rem; flex: none;
  padding: 0.12rem 0.4rem; border: 1px solid var(--asg-border-strong); border-radius: 6px;
  background: color-mix(in srgb, #fff 4%, transparent); font-size: 0.7rem; font-weight: 600; color: var(--asg-muted);
}

/* ---- inline mobile search ----
   The desktop ⌘K command-palette button is the search affordance ≥881px; ≤880px we swap to a real, full-width
   inline input whose suggestions render directly beneath it (no modal). Exactly one is shown per breakpoint. */
.asg-store .asg-doc__search { display: none; }
@media (max-width: 880px) {
  .asg-store .asg-doc__search-trigger { display: none; }
  .asg-store .asg-doc__search { display: block; position: relative; margin-bottom: 1rem; }
}
.asg-store .asg-doc__search-field {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.6rem 0.75rem; border: 1px solid var(--asg-border-strong); border-radius: var(--asg-radius-sm);
  background: var(--asg-surface-2); color: var(--asg-muted);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.asg-store .asg-doc__search-field:focus-within {
  border-color: var(--asg-primary, #5bb8e8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--asg-primary, #5bb8e8) 22%, transparent);
}
.asg-store .asg-doc__search-field > svg { color: var(--asg-muted); flex: none; }
.asg-store .asg-doc__search-input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--asg-text); font-size: 16px; font-family: inherit; /* 16px stops iOS Safari focus-zoom */
}
.asg-store .asg-doc__search-input::placeholder { color: var(--asg-faint); }
.asg-store .asg-doc__search-input::-webkit-search-cancel-button { display: none; }
.asg-store .asg-doc__search-clear {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--asg-faint); cursor: pointer;
}
.asg-store .asg-doc__search-clear:hover { color: var(--asg-text); background: rgba(255,255,255,0.06); }

.asg-store .asg-doc__search-results {
  list-style: none; margin: 0.4rem 0 0; padding: 0.3rem; max-height: 60vh; overflow-y: auto;
  border: 1px solid var(--asg-border-strong); border-radius: var(--asg-radius-sm);
  background: var(--asg-surface-3); box-shadow: var(--asg-shadow-sm);
}
.asg-store .asg-doc__search-result {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.6rem;
  border-radius: var(--asg-radius-sm); cursor: pointer;
}
.asg-store .asg-doc__search-result.is-active { background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 14%, transparent); }
.asg-store .asg-doc__search-result-kind {
  flex: none; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--asg-faint);
  padding: 0.18rem 0.4rem; border: 1px solid var(--asg-border-strong); border-radius: 6px;
}
.asg-store .asg-doc__search-result.is-active .asg-doc__search-result-kind {
  color: var(--asg-primary, #5bb8e8); border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 45%, transparent);
}
.asg-store .asg-doc__search-result-text { min-width: 0; display: grid; gap: 0.1rem; }
.asg-store .asg-doc__search-result-title { font-weight: 600; color: var(--asg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asg-store .asg-doc__search-result-crumb { font-weight: 500; color: var(--asg-muted); }
.asg-store .asg-doc__search-result-snippet { font-size: 0.8rem; color: var(--asg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asg-store .asg-doc__search-empty { padding: 0.7rem 0.6rem; text-align: center; color: var(--asg-faint); font-size: 0.85rem; }

.asg-store .asg-doc__nav { font-size: 0.9rem; }
.asg-store .asg-doc__nav-empty { color: var(--asg-faint); font-size: 0.88rem; }
.asg-store .asg-doc__tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.asg-store .asg-doc__tree--nested { margin: 0.15rem 0 0.4rem; padding-left: 0.7rem; border-left: 1px solid var(--asg-border); }

.asg-store .asg-doc__link {
  display: block; padding: 0.34rem 0.6rem; border-radius: 8px; color: var(--asg-muted);
  line-height: 1.4; transition: color .12s ease, background-color .12s ease;
}
.asg-store .asg-doc__link:hover { color: var(--asg-text); background: rgba(255,255,255,0.04); text-decoration: none; }
.asg-store .asg-doc__link.is-current {
  color: var(--asg-text); font-weight: 600;
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--asg-primary, #5bb8e8);
}

/* role-locked nav items: shown (so the reader knows they exist) but dimmed, with a lock that leads
   to the access-required gate */
.asg-store .asg-doc__link--locked { display: flex; align-items: center; gap: 0.35rem; color: var(--asg-faint); }
.asg-store .asg-doc__link--locked .asg-doc__link-text { flex: 1 1 auto; min-width: 0; }
.asg-store .asg-doc__link--locked:hover { color: var(--asg-muted); }
.asg-store .asg-doc__lock { flex: none; opacity: 0.8; }

.asg-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* access-required gate (shown in the docs main column when an unauthorised viewer opens a locked item) */
.asg-store .asg-doc__gate {
  max-width: 560px; margin: 2rem auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}
.asg-store .asg-doc__gate-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 50%; color: var(--asg-primary, #5bb8e8);
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--asg-primary, #5bb8e8) 35%, transparent);
}
.asg-store .asg-doc__gate h1 { margin: 0; font-size: 1.5rem; }
.asg-store .asg-doc__gate p { margin: 0; color: var(--asg-muted); line-height: 1.6; }
.asg-store .asg-doc__gate-actions { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

/* collapsible category / subcategory groups (native <details>) */
.asg-store .asg-doc__group-summary {
  display: flex; align-items: center; gap: 0.25rem; list-style: none; cursor: pointer; border-radius: 8px;
}
.asg-store .asg-doc__group-summary::-webkit-details-marker { display: none; }
.asg-store .asg-doc__group-title {
  /* Sections sit a calm step above pages: same muted tone, a touch heavier, and their chevron marks
     them as expandable — so a subcategory no longer reads brighter than its parent category or its
     sibling pages. (Categories keep their own faint uppercase style via the higher-specificity rule
     below; it also wins over the hover brighten, so only sections light up on hover — like pages.) */
  flex: 1 1 auto; min-width: 0; padding: 0.36rem 0.4rem 0.36rem 0.6rem; border-radius: 8px;
  font-weight: 600; color: var(--asg-muted); letter-spacing: -0.01em;
  transition: color .12s ease, background-color .12s ease;
}
.asg-store .asg-doc__tree-branch.is-category > .asg-doc__group > .asg-doc__group-summary > .asg-doc__group-title {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--asg-faint); font-weight: 700;
}
/* Breathing room between top-level sections so they don't run together (e.g. "Getting started" / "Cronus Zen Troubleshooting"). */
.asg-store .asg-doc__tree:not(.asg-doc__tree--nested) > .asg-doc__tree-branch.is-category:not(:first-child) { margin-top: 0.7rem; }
.asg-store .asg-doc__group-title:hover { color: var(--asg-text); background: rgba(255,255,255,0.04); text-decoration: none; }
.asg-store .asg-doc__group-title.is-current { color: var(--asg-primary, #5bb8e8); }
.asg-store .asg-doc__group-chev {
  flex: none; display: inline-flex; padding: 0.3rem; color: var(--asg-faint);
  transition: transform .16s ease; cursor: pointer;
}
.asg-store .asg-doc__group[open] > .asg-doc__group-summary .asg-doc__group-chev { transform: rotate(90deg); }

/* ---- main column ---- */
.asg-store .asg-doc__main { min-width: 0; }
.asg-store .asg-doc__crumbs { margin-bottom: 1rem; font-size: 0.82rem; }
.asg-store .asg-doc__crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; align-items: center; }
.asg-store .asg-doc__crumbs li { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--asg-faint); }
.asg-store .asg-doc__crumbs li:not(:last-child)::after { content: "/"; color: var(--asg-border-strong); }
.asg-store .asg-doc__crumbs a { color: var(--asg-muted); }
.asg-store .asg-doc__crumbs a:hover { color: var(--asg-primary, #5bb8e8); }
.asg-store .asg-doc__crumbs [aria-current="page"] { color: var(--asg-text); }

/* landing hero (index) */
.asg-store .asg-doc__hero { padding: 1rem 0 2rem; border-bottom: 1px solid var(--asg-border); margin-bottom: 2rem; }
.asg-store .asg-doc__eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--asg-primary, #5bb8e8); margin-bottom: 0.6rem;
}
.asg-store .asg-doc__title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.6rem; }
.asg-store .asg-doc__lead { color: var(--asg-muted); font-size: 1.05rem; line-height: 1.6; max-width: 46ch; margin: 0 0 1.4rem; }
.asg-store .asg-doc__lead p { margin: 0 0 0.6rem; }
.asg-store .asg-doc__lead > :last-child { margin-bottom: 0; }
.asg-store .asg-doc__herosearch {
  display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%;
  padding: 0.65rem 0.95rem; border: 1px solid var(--asg-border-strong); border-radius: var(--asg-radius-sm);
  background: var(--asg-surface); color: var(--asg-muted); font-size: 0.92rem; cursor: pointer;
  box-shadow: var(--asg-shadow-sm), var(--asg-sheen); transition: border-color .14s ease;
}
.asg-store .asg-doc__herosearch:hover { border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 55%, transparent); }
.asg-store .asg-doc__herosearch svg { color: var(--asg-primary, #5bb8e8); flex: none; }

/* index: top-level section cards */
.asg-store .asg-doc__sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.asg-store .asg-doc__section-card {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.2rem;
  border: 1px solid var(--asg-border); border-radius: var(--asg-radius); background: var(--asg-surface);
  box-shadow: var(--asg-shadow-sm), var(--asg-sheen); color: var(--asg-text);
  transition: border-color .14s ease, transform .14s ease;
}
.asg-store .asg-doc__section-card:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 50%, var(--asg-border-strong)); }
.asg-store .asg-doc__section-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px;
  color: var(--asg-btn-ink, #04141c); background: linear-gradient(140deg, var(--asg-primary, #5bb8e8), var(--asg-secondary, #3d9fd6));
}
.asg-store .asg-doc__section-name { font-weight: 700; letter-spacing: -0.01em; }
.asg-store .asg-doc__section-count { font-size: 0.82rem; color: var(--asg-faint); }
.asg-store .asg-doc__empty { color: var(--asg-faint); padding: 2rem 0; }

/* article (page / landing body) */
.asg-store .asg-doc__article { max-width: 880px; }
.asg-store .asg-doc__article-head { margin-bottom: 1.75rem; }
.asg-store .asg-doc__article-title { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; margin: 0.3rem 0 0.6rem; line-height: 1.15; }
.asg-store .asg-doc__article-summary { color: var(--asg-muted); font-size: 1.08rem; line-height: 1.6; margin: 0; }
.asg-store .asg-doc__article-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--asg-border); }
.asg-store .asg-doc__meta-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--asg-faint); }
.asg-store .asg-doc__meta-item svg { color: var(--asg-muted); flex: none; }
.asg-store .asg-doc__meta-by { color: var(--asg-muted); }
.asg-store .asg-doc__meta-avatar { width: 18px; height: 18px; border-radius: 999px; object-fit: cover; flex: none; }
.asg-store .asg-doc__meta-avatar--fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 30%, transparent); color: var(--asg-text);
  font-size: 0.62rem; font-weight: 700;
}
.asg-store .asg-doc__meta-name { color: var(--asg-text); font-weight: 600; }

/* the rendered doc content uses .section / .prose / doc-block classes from the page renderer; tighten the
   default section padding so docs read as a continuous article rather than stacked marketing bands. */
.asg-store .asg-doc__content .section { padding: 0.5rem 0; }
.asg-store .asg-doc__content > .section:first-child { padding-top: 0; }
.asg-store .asg-doc__content .prose { line-height: 1.75; color: var(--asg-text); }
.asg-store .asg-doc__content .prose > :first-child { margin-top: 0; }
.asg-store .asg-doc__content :is(h2, h3) { scroll-margin-top: 90px; letter-spacing: -0.02em; }
.asg-store .asg-doc__content h2 { font-size: 1.45rem; font-weight: 750; margin: 2rem 0 0.8rem; }
.asg-store .asg-doc__content h3 { font-size: 1.18rem; font-weight: 700; margin: 1.6rem 0 0.6rem; }
/* h4–h6 continue the descending scale — without these the browser/Bootstrap defaults make h4 (1.5rem)
   LARGER than the styled h3, which is exactly backwards. The editor offers up to h4; h5/h6 are sized too
   so pasted markdown can't reintroduce the same inversion. */
.asg-store .asg-doc__content h4 { font-size: 1.02rem; font-weight: 700; margin: 1.3rem 0 0.5rem; letter-spacing: -0.01em; }
.asg-store .asg-doc__content h5 { font-size: 0.94rem; font-weight: 700; margin: 1.2rem 0 0.45rem; }
.asg-store .asg-doc__content h6 { font-size: 0.86rem; font-weight: 700; margin: 1.1rem 0 0.4rem; }
.asg-store .asg-doc__content-empty { color: var(--asg-faint); }
/* Reading comfort: body copy in a soft gray (full white is harsh over long docs). Headings + bold text
   stay bright white so structure still pops. */
.asg-store .asg-doc__content { color: #c3ccd9; }
.asg-store .asg-doc__content :is(h1, h2, h3, h4, h5, h6, strong, b, th) { color: var(--asg-text); }
/* …EXCEPT on a callout's TITLE line (the first block of a run, accent-coloured by the rules above):
   forcing its bold run to white was painting callout titles white on the doc pages. Only the title
   line inherits — bold inside callout BODY lines keeps the bright emphasis white. */
.asg-store .callout-info:not(li):not(.callout-info + .callout-info) :is(strong, b),
.asg-store .callout-success:not(li):not(.callout-success + .callout-success) :is(strong, b),
.asg-store .callout-warning:not(li):not(.callout-warning + .callout-warning) :is(strong, b),
.asg-store .callout-danger:not(li):not(.callout-danger + .callout-danger) :is(strong, b),
.asg-store .callout-tip:not(li):not(.callout-tip + .callout-tip) :is(strong, b),
.asg-store .callout-note:not(li):not(.callout-note + .callout-note) :is(strong, b) { color: inherit; }
/* Separators are a clearly visible LIGHT gray — the theme border token was near-invisible on the dark bg. */
.asg-store .asg-doc__content hr { border: 0; border-top: 1px solid rgba(203, 213, 225, 0.55); margin: 2rem 0; }

/* Author-editable tables (Quill table module). Rendered anywhere storefront content appears (guide pages +
   product body). Per-cell text-align / width / height ride along as inline styles from the editor. */
.asg-store table { border-collapse: collapse; margin: 1rem 0; max-width: 100%; }
.asg-store :is(td, th) { border: 1px solid var(--asg-border); padding: 0.5rem 0.7rem; vertical-align: top; }
.asg-store th { background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 10%, transparent); font-weight: 700; text-align: left; }
.asg-store table caption { color: var(--asg-muted); font-size: 0.9rem; padding: 0.3rem 0; caption-side: bottom; }

/* heading copy-link affordance */
.asg-store .asg-doc__heading { position: relative; }
.asg-store .asg-doc__heading-anchor {
  display: inline-flex; align-items: center; margin-left: 0.45rem; padding: 0.1rem; vertical-align: middle;
  color: var(--asg-faint); opacity: 0; border-radius: 6px; transition: opacity .12s ease, color .12s ease;
}
.asg-store .asg-doc__heading:hover .asg-doc__heading-anchor,
.asg-store .asg-doc__heading-anchor:focus-visible { opacity: 1; }
.asg-store .asg-doc__heading-anchor:hover { color: var(--asg-primary, #5bb8e8); text-decoration: none; }
.asg-store .asg-doc__heading-anchor.is-copied { color: #22c55e; opacity: 1; }

/* child grids on landing pages */
.asg-store .asg-doc__childgrid-head { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 2.25rem 0 1rem; }
.asg-store .asg-doc__childgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; }
.asg-store .asg-doc__childcard {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.2rem 0.6rem;
  align-items: center; padding: 0.95rem 1.1rem; border: 1px solid var(--asg-border); border-radius: var(--asg-radius-sm);
  background: var(--asg-surface); color: var(--asg-text); box-shadow: var(--asg-shadow-sm);
  transition: border-color .14s ease, transform .14s ease;
}
.asg-store .asg-doc__childcard:hover { text-decoration: none; transform: translateY(-1px); border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 50%, var(--asg-border-strong)); }
.asg-store .asg-doc__childcard-kind { grid-column: 1; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--asg-faint); }
.asg-store .asg-doc__childcard-title { grid-column: 1; font-weight: 650; letter-spacing: -0.01em; }
.asg-store .asg-doc__childcard-meta { grid-column: 1; font-size: 0.8rem; color: var(--asg-faint); }
.asg-store .asg-doc__childcard-arrow { grid-column: 2; grid-row: 1 / span 3; color: var(--asg-faint); display: inline-flex; }
.asg-store .asg-doc__childcard:hover .asg-doc__childcard-arrow { color: var(--asg-primary, #5bb8e8); }

/* prev/next pager */
.asg-store .asg-doc__pager { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--asg-border); }
.asg-store .asg-doc__pager-link {
  flex: 0 1 260px; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1.1rem; border: 1px solid var(--asg-border);
  border-radius: var(--asg-radius-sm); background: var(--asg-surface); color: var(--asg-text); min-width: 0;
  transition: border-color .14s ease;
}
@media (max-width: 560px) { .asg-store .asg-doc__pager-link { flex-basis: 100%; } }
.asg-store .asg-doc__pager-link:hover { text-decoration: none; border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 50%, var(--asg-border-strong)); }
/* Previous stays on the left; Next is pushed to the right — independent of whether the other exists. */
.asg-store .asg-doc__pager-link--next { margin-left: auto; text-align: right; align-items: flex-end; }
.asg-store .asg-doc__pager-dir { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--asg-faint); font-weight: 600; }
.asg-store .asg-doc__pager-title { font-weight: 650; color: var(--asg-primary, #5bb8e8); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ---- right column: table of contents ---- */
.asg-store .asg-doc__aside { position: sticky; top: 78px; align-self: start; min-width: 0; }
.asg-store .asg-doc__toc { font-size: 0.85rem; max-height: calc(100vh - 96px); overflow-y: auto; }
.asg-store .asg-doc__toc-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--asg-faint); margin: 0 0 0.7rem; }
.asg-store .asg-doc__toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; border-left: 1px solid var(--asg-border); }
.asg-store .asg-doc__toc-item--h3 { padding-left: 0.85rem; }
.asg-store .asg-doc__toc-link {
  display: block; padding: 0.3rem 0.75rem; margin-left: -1px; color: var(--asg-faint); line-height: 1.4;
  border-left: 2px solid transparent; transition: color .12s ease, border-color .12s ease;
}
.asg-store .asg-doc__toc-link:hover { color: var(--asg-text); text-decoration: none; }
.asg-store .asg-doc__toc-link.is-active { color: var(--asg-primary, #5bb8e8); border-left-color: var(--asg-primary, #5bb8e8); font-weight: 600; }
@media (max-width: 1100px) { .asg-store .asg-doc__aside { display: none; } }

/* ---- mobile drawer behaviour ---- */
.asg-store .asg-doc__scrim { display: none; }
@media (max-width: 880px) {
  .asg-store .asg-doc__sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1080; width: min(320px, 86vw);
    background: var(--asg-surface); border-right: 1px solid var(--asg-border-strong);
    transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--asg-shadow);
  }
  .asg-store .asg-doc__sidebar-inner { position: static; max-height: 100vh; padding: 1.6rem 1.1rem 1.5rem; }
  /* Site brand pinned at the top of the drawer, matching the storefront header. */
  .asg-store .asg-doc__brand {
    display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0;
    margin-bottom: 1.15rem; color: var(--asg-text);
  }
  .asg-store .asg-doc__brand:hover { text-decoration: none; }
  .asg-store .asg-doc__brand .asg-brand__text { display: block; font-weight: 700; color: var(--asg-text); }
  body.asg-doc-drawer-open .asg-doc__sidebar { transform: translateX(0); }
  .asg-store .asg-doc__scrim { display: block; position: fixed; inset: 0; z-index: 1070; background: rgba(0,0,0,0.55); }

  /* "Browse the guide" bar stays pinned just below the sticky storefront header so it's always reachable as
     the guide content scrolls under it. The header sits at top:0 (~43px tall on a phone); this anchors right
     beneath it with a solid background and a z-index above the content but below the open drawer (1080) and
     command palette (1100). The drawer itself is position:fixed, so it still overlays both pinned bars. */
  .asg-store .asg-doc__navtoggle {
    position: sticky; top: 44px; z-index: 1040; margin-bottom: 0.85rem;
    background: var(--asg-bg, #0B0F14);
  }
  /* The grid's own top padding + the pinned bar are enough breathing room; drop extra space so the toggle
     sits snugly under the header. */
  .asg-store .asg-doc { padding-top: 0.35rem; }

  /* Tighten the big void between the breadcrumb (or the toggle) and the page heading. The crumbs' bottom
     margin plus the hero's top padding stacked into an oversized gap on a phone — pull them together. */
  .asg-store .asg-doc__crumbs { margin-bottom: 0.4rem; }
  .asg-store .asg-doc__hero { padding-top: 0.25rem; margin-bottom: 1.4rem; }
  .asg-store .asg-doc__body > :first-child { margin-top: 0; }
}

/* ============================================================================
   Command palette (Ctrl+K / Cmd+K)
============================================================================ */
.asg-store .asg-cmdk { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-start; justify-content: center; padding: clamp(3rem, 12vh, 8rem) 1rem 1rem; }
.asg-store .asg-cmdk__backdrop { position: absolute; inset: 0; background: rgba(4, 8, 14, 0.72); backdrop-filter: blur(4px); }
.asg-store .asg-cmdk__panel {
  position: relative; width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column;
  border: 1px solid var(--asg-border-strong); border-radius: var(--asg-radius); background: var(--asg-surface-3);
  box-shadow: var(--asg-shadow); overflow: hidden;
}
.asg-store .asg-cmdk__searchrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--asg-border); }
.asg-store .asg-cmdk__searchrow > svg { color: var(--asg-muted); flex: none; }
.asg-store .asg-cmdk__input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--asg-text);
  font-size: 1.02rem; font-family: inherit;
}
.asg-store .asg-cmdk__input::placeholder { color: var(--asg-faint); }
.asg-store .asg-cmdk__close {
  flex: none; padding: 0.2rem 0.45rem; border: 1px solid var(--asg-border-strong); border-radius: 6px;
  background: color-mix(in srgb, #fff 4%, transparent); color: var(--asg-muted); font-size: 0.72rem; font-weight: 600; cursor: pointer;
}
.asg-store .asg-cmdk__results { list-style: none; margin: 0; padding: 0.4rem; overflow-y: auto; min-height: 0; }
.asg-store .asg-cmdk__result { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: var(--asg-radius-sm); cursor: pointer; }
.asg-store .asg-cmdk__result.is-active { background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 14%, transparent); }
.asg-store .asg-cmdk__result-kind {
  flex: none; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--asg-faint);
  padding: 0.2rem 0.45rem; border: 1px solid var(--asg-border-strong); border-radius: 6px;
}
.asg-store .asg-cmdk__result.is-active .asg-cmdk__result-kind { color: var(--asg-primary, #5bb8e8); border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 45%, transparent); }
.asg-store .asg-cmdk__result-text { min-width: 0; display: grid; gap: 0.1rem; }
.asg-store .asg-cmdk__result-title { font-weight: 600; color: var(--asg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "<Category> › " breadcrumb prefix on a result found via its category/section. */
.asg-store .asg-cmdk__result-crumb { font-weight: 500; color: var(--asg-muted); }
.asg-store .asg-cmdk__result-snippet { font-size: 0.82rem; color: var(--asg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asg-store .asg-cmdk__hint { padding: 1.25rem 1rem; text-align: center; color: var(--asg-faint); font-size: 0.88rem; }
body.asg-cmdk-open { overflow: hidden; }

/* ---- FAQ accordion (category + product pages) ---- */
.asg-store .asg-faq { margin-top: 1.75rem; }
.asg-store .asg-faq__title { font-size: 1.4rem; margin-bottom: 1rem; }
.asg-store .asg-faq__list { display: flex; flex-direction: column; gap: .6rem; }
.asg-store .asg-faq__item { border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .035); overflow: hidden; }
.asg-store .asg-faq__q { cursor: pointer; padding: 1rem 1.15rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
.asg-store .asg-faq__q::-webkit-details-marker { display: none; }
.asg-store .asg-faq__q:hover { background: rgba(255, 255, 255, .04); }
.asg-store .asg-faq__chevron { width: .58rem; height: .58rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; opacity: .65; flex: none; }
.asg-store .asg-faq__item[open] .asg-faq__chevron { transform: rotate(-135deg); }
.asg-store .asg-faq__a { padding: 0 1.15rem 1.05rem; color: var(--asg-muted); white-space: pre-line; line-height: 1.6; }
.asg-store .asg-category-desc { margin-bottom: 1.25rem; }