/* =========================================================================
   ACE CSS Framework
   --------------------------------------------------------------------------
   Single source for ACE styles that cannot live in Bricks UI native settings.
   See memory: project_ace_css_framework.md

   Editing rules:
   - 90% of styling lives in Bricks Settings UI (Global Classes, Variables,
     Theme Styles). DO NOT add rules here that can live in UI native controls.
   - Edit this file only when a rule needs: var() in font-family, pseudo
     selectors (:hover, :focus, :nth-child), color-mix(), display:contents
     on loop wrappers, or complex multi-selector queries.
   - All rules use BEM class names from Bricks Global Classes.
   - All tokens use Bricks Global Variables (--ace-*).
   ========================================================================= */


/* =========================================================================
   1. TOKENS  /  fallback :root vars (only if Bricks Global Variables miss any)
   ========================================================================= */
/* Tokens are defined in bricks_global_variables and emitted on :root by
   Bricks at runtime. Add fallback declarations here only if a variable
   needs to be available before Bricks emits its :root block. */


/* =========================================================================
   2. BASE  /  document defaults that Theme Styles can't reach
   ========================================================================= */
/* Theme Styles handles body + h1-h6 + button + link defaults. Keep this
   section minimal — only universal resets / overrides Bricks needs. */

code,
kbd,
pre,
samp {
  font-family: var(--ace-font-mono);
}

/* Mobile horizontal-overflow guard. The header's off-canvas mega-menu panels
   and the nav-nested mobile menu are laid out at desktop widths (visibility
   hidden / opacity 0) but still inflate document.scrollWidth, which lets every
   full-width section be dragged wider than the viewport → horizontal scroll and
   right-edge clipping. `overflow-x: clip` contains that without creating a
   scroll container, so it does NOT break position:sticky (header + sidebar). */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }
}


/* =========================================================================
   3. UTILITIES  /  reusable single-purpose classes (used via Bricks UI: Add Class)
   ========================================================================= */

/* Typography family utilities — needed because Bricks UI typography control
   wraps font-family values in quotes, breaking var() references. */
.ace-text-mono {
  font-family: var(--ace-font-mono);
}

.ace-text-display {
  font-family: var(--ace-font-display);
}

.ace-text-sans {
  font-family: var(--ace-font-sans);
}


/* =========================================================================
   4. COMPONENTS  /  styles for BEM components that need rules beyond UI native
   ========================================================================= */
/* Component-specific rules live here ONLY when they need pseudo selectors,
   loop helpers, or complex queries. Otherwise, configure the component's
   global class via Bricks UI. */
/* Rules below were migrated from bricks_global_classes._cssCustom on 2026-06-01.
   Native typography/spacing/border/background settings live on the global
   classes in Bricks UI (bricks_global_classes). This file holds only the
   rules that CAN'T live there: var() in font-family, color-mix(), pseudo
   selectors, descendant queries, !important overrides, custom @media. */


/* === 4.1 HEADER === */

/* Breadcrumbs are hidden on phones — they wrap to two cramped lines under the
   header and add little value on small screens. */
@media (max-width: 767px) {
  .ace-header__breadcrumb { display: none; }
}

/* ace-header__breadcrumb-inner — `root` rewritten to .ace-header__breadcrumb-inner */
.ace-header__breadcrumb-inner .brxe-breadcrumbs { display:flex; align-items:center; gap:4px; font-family: var(--ace-font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ace-slate-500); }
.ace-header__breadcrumb-inner .brxe-breadcrumbs a { color: var(--ace-slate-500); text-decoration:none; transition: color .12s ease; }
.ace-header__breadcrumb-inner .brxe-breadcrumbs a:hover { color: var(--ace-ink); }
.ace-header__breadcrumb-inner .brxe-breadcrumbs .separator,
.ace-header__breadcrumb-inner .brxe-breadcrumbs > span:not(:last-child):not(.current) { color: var(--ace-lime-2); font-family: var(--ace-font-sans); font-weight:600; font-size:11px; }
.ace-header__breadcrumb-inner .brxe-breadcrumbs > *:last-child:not(a) { color: var(--ace-ink); font-family: var(--ace-font-display); font-weight:600; font-size:11px; letter-spacing:0.03em; text-transform:none; }

/* Search is now a persistent field (see inc/header-search.php); the old
   click-to-expand toggle rules were removed with the search-icon button. */


/* === 4.2 BRAND ROOT === */

/* ace-brand */
.ace-brand { font-family: var(--ace-font-sans); }

/* ace-brand-sub */
.ace-brand-sub { font-family: var(--ace-font-sans); }


/* === 4.3 BRAND LAYOUT === */

/* ace-brand__card */
.ace-brand__card {
  background: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: var(--ace-r-lg);
  padding: 20px;
}

/* ace-brand__container */
.ace-brand__container {
  max-width: var(--ace-content-width);
  margin: 0 auto;
  padding: 0 var(--ace-content-pad);
}
@media (max-width: 768px) {
  .ace-brand__container { padding: 0 14px; }
  /* Safety net: nothing inside the review body should push the page wider than
     the viewport on mobile. Individual tables stack to cards below 560px, but
     this guards against any stray full-width child forcing a horizontal scroll. */
  .ace-brand__main,
  .ace-brand__content { max-width: 100%; overflow-x: clip; }
}

/* ace-brand__content */
.ace-brand__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* ace-brand__layout */
.ace-brand__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  column-gap: 36px;
  align-items: start;
}
@media (max-width: 1024px) {
  .ace-brand__layout { grid-template-columns: 1fr; }
}

/* ace-brand__main */
.ace-brand__main {
  background: var(--ace-paper);
  padding-block: 36px;
}
@media (max-width: 768px) {
  .ace-brand__main { padding-block: 24px; }
}

/* ace-brand__section */
.ace-brand__section {
  padding: 24px 0;
}
.ace-brand__section + .ace-brand__section {
  border-top: 1px solid var(--ace-rule);
}

/* ace-brand__section--paper2 */
.ace-brand__section--paper2 {
  background: var(--ace-paper-2);
  border-radius: var(--ace-r-lg);
  padding: 22px;
  border: 1px solid var(--ace-rule);
}

/* ace-brand__section--ruled */
.ace-brand__section--ruled {
  padding-block: 22px;
  border-top: 1px solid var(--ace-rule);
}

/* ace-brand__section-eyebrow */
.ace-brand__section-eyebrow,
.ace-brand__section-eyebrow.brxe-text-basic {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ace-muted);
  margin: 0;
}

/* ace-brand__section-head */
.ace-brand__section-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

/* ace-brand__section-lede */
.ace-brand__section-lede {
  font-family: var(--ace-font-sans);
  font-size: var(--ace-fs-small);
  line-height: 1.55;
  color: var(--ace-muted);
  white-space: nowrap;
  margin: 0;
}
/* On phones the lede must wrap — nowrap runs the description off the viewport. */
@media (max-width: 767px) {
  .ace-brand__section-lede { white-space: normal; }
}

/* ace-brand__section-title */
.ace-brand__section-title,
.ace-brand__section-title.brxe-heading {
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ace-ink);
  margin: 4px 0 6px 0;
}


/* === 4.4 BRAND HERO === */

/* ace-brand-sub__h1 */
.ace-brand-sub__h1 { font-family: var(--ace-font-display); }

/* ace-brand-sub__h1-hl — lime-highlighted bonus value inside the H1.
   Mockup wraps the bonus amount on its own line with a lime background pill. */
.ace-brand-sub__h1-hl {
  background: var(--ace-lime);
  color: var(--ace-lime-ink);
  padding: 0 10px;
  display: inline-block;
  border-radius: 6px;
  line-height: 1.05;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ace-brand__h1 */
.ace-brand__h1 {
  font-family: var(--ace-font-display);
  font-weight: 900;
  font-size: var(--ace-fs-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ace-paper);
  margin: 0;
}
/* Breathing room above the H1 on phones (badges sit directly above it).
   !important beats the Bricks global-class `margin:0` (.brxe-heading compound). */
@media (max-width: 767px) {
  .ace-brand__h1,
  .brxe-heading.ace-brand__h1 { margin-top: 20px !important; }
}

/* ace-brand__h1-accent */
.ace-brand__h1-accent {
  color: var(--ace-lime);
}

/* ace-brand__hero */
.ace-brand__hero {
  position: relative;
  overflow: hidden;
}
.ace-brand__hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ace-lime) 18%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ace-brand__hero > * {
  position: relative;
  z-index: 1;
}

/* ace-brand__hero-badges */
.ace-brand__hero-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ace-brand__hero-ctas */
.ace-brand__hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
/* Phones: stack the two hero CTAs full-width so they're easy tap targets and
   the long "Visit <brand>" label never truncates against the viewport edge.
   The wrap is a flex item of the hero, so it shrinks to content (~189px) —
   force it to 100% first, then stretch the buttons to fill it. */
@media (max-width: 640px) {
  .ace-brand__hero-ctas {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .ace-brand__hero-ctas > .ace-brand__btn--lg,
  .ace-brand__hero-ctas > .ace-brand__btn--lg-outline-dark {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ace-brand__hero-grid — minmax(0,…) so a long unbreakable bonus title can't
   blow the track wider than the viewport (was clipping on mobile). */
.ace-brand__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 24px;
  align-items: center;
}
@media (max-width: 1024px) {
  .ace-brand__hero-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Long tokens like "A$3,000" must wrap rather than overflow the hero. */
.ace-brand__h1,
.ace-brand__h1-accent,
.ace-brand__offer-headline--cream { overflow-wrap: anywhere; min-width: 0; }

/* ace-brand__hero-intro */
.ace-brand__hero-intro {
  margin-top: 18px;
  font-size: var(--ace-fs-body);
  line-height: 1.55;
  color: var(--ace-muted-2);
  max-width: 540px;
}

/* ace-brand__score-audit */
.ace-brand__score-audit {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  color: var(--ace-muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ace-brand__score-max */
.ace-brand__score-max {
  font-family: var(--ace-font-mono);
  font-size: 12px;
  color: var(--ace-muted-2);
  margin-left: 6px;
  display: inline-block;
  vertical-align: baseline;
}

/* ace-brand__score-num */
.ace-brand__score-num {
  font-family: var(--ace-font-display);
  font-weight: 900;
  font-size: var(--ace-fs-display);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ace-lime);
  display: inline-block;
}

/* ace-brand__score-row */
.ace-brand__score-row {
  margin-top: 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

/* ace-brand__score-sep */
.ace-brand__score-sep {
  width: 1px;
  height: 36px;
  background: var(--ace-ink-3);
  display: inline-block;
  align-self: center;
}

/* ace-brand__score-stars-wrap */
.ace-brand__score-stars-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ace-brand__tldr-badges */
.ace-brand__tldr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* ace-brand__tldr-grid */
.ace-brand__tldr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .ace-brand__tldr-grid { grid-template-columns: 1fr; }
}


/* === 4.5 BRAND BADGES === */

/* ace-brand__badge */
.ace-brand__badge {
  background: color-mix(in srgb, var(--ace-paper) 10%, transparent);
  color: var(--ace-paper);
  border: 1px solid color-mix(in srgb, var(--ace-paper) 14%, transparent);
  padding: 5px 10px;
  border-radius: 20px;
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
}

/* Hero badge background style (white|paper|black|lime) — SAME palette/design as
   the homepage/casino/bonus hero badges. Driven by data-variant on the looped
   ace-brand__badge (both the parent hero and the child sub-page hero). Attribute
   selector (0,1,1) beats the base class. Distinct from the semantic status
   modifiers (--ok/--warn/--bad/…) below, which stay as-is. */
.ace-brand__badge[data-variant="white"] {
  background: var(--ace-white);
  border: 1px solid var(--ace-rule-2);
  color: var(--ace-ink);
}
.ace-brand__badge[data-variant="paper"] {
  background: var(--ace-paper-2);
  border: 1px solid var(--ace-rule);
  color: var(--ace-ink);
}
.ace-brand__badge[data-variant="black"] {
  background: var(--ace-ink);
  border: 1px solid var(--ace-ink);
  color: var(--ace-lime);
}
.ace-brand__badge[data-variant="lime"] {
  background: var(--ace-lime);
  border: 1px solid var(--ace-lime);
  color: var(--ace-ink);
}

/* ace-brand__badge--bad */
.ace-brand__badge--bad {
  background: color-mix(in srgb, var(--ace-red) 12%, transparent);
  color: var(--ace-red);
  border: 1px solid color-mix(in srgb, var(--ace-red) 32%, transparent);
}

/* ace-brand__badge--danger */
.ace-brand__badge--danger {
  background: var(--ace-red);
  color: var(--ace-white);
  border: 1px solid var(--ace-red);
  font-weight: 700;
}

/* ace-brand__badge--fastpay */
.ace-brand__badge--fastpay {
  background: color-mix(in srgb, var(--ace-amber) 18%, transparent);
  color: var(--ace-amber);
  border: 1px solid color-mix(in srgb, var(--ace-amber) 40%, transparent);
}

/* ace-brand__badge--licence */
.ace-brand__badge--licence {
  background: color-mix(in srgb, var(--ace-info) 14%, transparent);
  color: var(--ace-info);
  border: 1px solid color-mix(in srgb, var(--ace-info) 36%, transparent);
}

/* ace-brand__badge--ok */
.ace-brand__badge--ok {
  background: color-mix(in srgb, var(--ace-green) 14%, transparent);
  color: var(--ace-green);
  border: 1px solid color-mix(in srgb, var(--ace-green) 36%, transparent);
}

/* ace-brand__badge--small */
.ace-brand__badge--small { font-family: var(--ace-font-mono); }

/* ace-brand__badge--warn */
.ace-brand__badge--warn {
  background: color-mix(in srgb, var(--ace-amber) 14%, transparent);
  color: var(--ace-amber);
  border: 1px solid color-mix(in srgb, var(--ace-amber) 36%, transparent);
}

/* Variant chips for child sub-page hero (data-variant attribute on badge).
   Hero is ink, so secondary chips are translucent outlines with light text —
   readable on dark, no off-palette colours (no blue). */
.ace-brand__badge[data-variant="editors"] {
  background: var(--ace-lime);
  color: var(--ace-lime-ink);
  border: 1px solid transparent;
}
.ace-brand__badge[data-variant="wager"] {
  background: color-mix(in srgb, var(--ace-amber) 22%, transparent);
  color: var(--ace-paper);
  border: 1px solid color-mix(in srgb, var(--ace-amber) 55%, transparent);
}
.ace-brand__badge[data-variant="licence"] {
  background: color-mix(in srgb, var(--ace-paper) 12%, transparent);
  color: var(--ace-paper);
  border: 1px solid color-mix(in srgb, var(--ace-paper) 32%, transparent);
}

/* Sub-page hero — wrap container. Despite the name it hosts the looped badges
   (which must flow horizontally) AND the H1 / intro / verdict box. It stays a
   wrapping flex row: the wide H1/intro/tldr each take their own line, while the
   collapsed badge iterations sit together on the first line.
   Per feedback_bricks_loop_display_contents each badge loop iteration is a
   .ace-brand__hero-badges wrapper that we collapse with display:contents so its
   <span> badge flows directly into this row.
   CRITICAL: only collapse the .ace-brand__hero-badges loop wrappers — NOT every
   .brxe-block child. Collapsing every block also collapsed the verdict box
   (.ace-brand-sub__tldr), dropping its cream box so the dark verdict text
   spilled onto the dark hero and became unreadable. */
.ace-brand-sub__hero-badges-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
/* Collapse each badge loop wrapper so the badge spans become the flex items of
   this row. Two-class selector beats the bare .ace-brand__hero-badges{display:flex}. */
.ace-brand-sub__hero-badges-wrap > .ace-brand__hero-badges,
.ace-brand-sub__hero-badges-wrap > [data-brx-loop-start].ace-brand__hero-badges {
  display: contents;
}
/* Force the non-badge children onto their own full-width lines within the row. */
.ace-brand-sub__hero-badges-wrap > .ace-brand__h1,
.ace-brand-sub__hero-badges-wrap > .ace-brand__hero-intro,
.ace-brand-sub__hero-badges-wrap > .ace-brand-sub__tldr {
  flex: 0 0 100%;
}
.ace-brand-sub__hero-badges-wrap > .brx-query-trail {
  display: none;
}


/* === 4.6 BRAND OFFER === */

/* ace-brand__offer */
.ace-brand__offer {
  background: var(--ace-paper-2);
  border: 1px solid var(--ace-amber);
  border-radius: var(--ace-r-lg);
  padding: 20px;
  position: relative;
}

/* ace-brand__offer--cream */
.ace-brand__offer--cream {
  background: linear-gradient(135deg, var(--ace-paper) 0%, var(--ace-paper-2) 100%);
  border: 1px solid var(--ace-amber);
  border-radius: 16px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px 0 color-mix(in srgb, var(--ace-ink) 12%, transparent);
}
.ace-brand__offer--cream::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ace-amber) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.ace-brand__offer--cream > * {
  position: relative;
  z-index: 1;
}

/* ace-brand__offer-brand */
.ace-brand__offer-brand {
  font-family: var(--ace-font-display);
  font-weight: 900;
  font-size: var(--ace-fs-h2);
  color: var(--ace-ink);
  letter-spacing: -0.02em;
}

/* ace-brand__offer-code */
.ace-brand__offer-code {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  color: var(--ace-muted);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ace-brand__offer-cta--cream */
.ace-brand__offer-cta--cream,
.ace-brand__offer-cta--cream.brxe-heading {
  display: block;
  background: var(--ace-lime);
  color: var(--ace-lime-ink) !important;
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-body);
  padding: 14px 20px;
  border-radius: 8px;
  text-decoration: none !important;
  text-align: center;
  width: 100%;
  transition: background 0.15s ease;
  line-height: 1.2;
  border: 0;
  cursor: pointer;
}
.ace-brand__offer-cta--cream:hover {
  background: var(--ace-lime-2);
  color: var(--ace-lime-ink) !important;
}
.ace-brand__offer-cta--cream a,
.ace-brand__offer-cta--cream > a,
.ace-brand__offer-cta--cream a:visited,
.ace-brand__offer-cta--cream a:hover,
.ace-brand__offer-cta--cream a:active {
  color: var(--ace-lime-ink) !important;
  text-decoration: none !important;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  display: block;
  background: transparent;
}

/* ace-brand__offer-eyebrow */
.ace-brand__offer-eyebrow { font-family: var(--ace-font-mono); }

/* ace-brand__offer-eyebrow--cream */
.ace-brand__offer-eyebrow--cream {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ace-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ace-brand__offer-grid */
.ace-brand__offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

/* ace-brand__offer-headline */
.ace-brand__offer-headline { font-family: var(--ace-font-display); }

/* ace-brand__offer-headline--cream */
.ace-brand__offer-headline--cream {
  font-family: var(--ace-font-display);
  font-weight: 900;
  font-size: var(--ace-fs-h1);
  color: var(--ace-ink);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}

/* ace-brand__offer-pill */
.ace-brand__offer-pill,
.ace-brand__offer-pill.brxe-block {
  background: color-mix(in srgb, var(--ace-white) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--ace-amber) 25%, transparent);
  padding: 8px 10px;
  border-radius: 7px;
}

/* ace-brand__offer-pill-label */
.ace-brand__offer-pill-label,
.ace-brand__offer-pill-label.brxe-text-basic {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  color: var(--ace-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  font-weight: 600;
}

/* ace-brand__offer-pill-value */
.ace-brand__offer-pill-value,
.ace-brand__offer-pill-value.brxe-text-basic {
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-h3);
  color: var(--ace-ink);
  margin: 2px 0 0 0;
  line-height: 1.1;
}

/* ace-brand__offer-sub */
.ace-brand__offer-sub {
  font-family: var(--ace-font-sans);
  font-size: var(--ace-fs-small);
  color: var(--ace-muted);
  margin: 0 0 14px 0;
}

/* ace-brand__offer-sub--cream */
.ace-brand__offer-sub--cream {
  font-size: var(--ace-fs-small);
  color: var(--ace-muted);
  margin-bottom: 16px;
}

/* ace-brand__offer-tag */
.ace-brand__offer-tag {
  background: var(--ace-ink);
  color: var(--ace-lime);
  padding: 5px 9px;
  border-radius: 5px;
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ace-brand__offer-tc */
.ace-brand__offer-tc {
  margin-top: 10px;
  font-size: var(--ace-fs-meta);
  color: color-mix(in srgb, var(--ace-ink) 60%, transparent);
  line-height: 1.5;
  text-align: center;
}

/* ace-brand__offer-top */
.ace-brand__offer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}


/* === 4.7 BRAND CTA / BUTTONS === */

/* ace-brand__btn--lg */
.ace-brand__btn--lg,
.ace-brand__btn--lg.brxe-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ace-lime);
  color: var(--ace-lime-ink) !important;
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-h3);
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--ace-r-sm);
  text-decoration: none !important;
  transition: background 0.15s ease;
  border: 0;
  cursor: pointer;
  line-height: 1.2;
}
.ace-brand__btn--lg:hover {
  background: var(--ace-lime-2);
  color: var(--ace-lime-ink) !important;
}
.ace-brand__btn--lg a,
.ace-brand__btn--lg > a,
.ace-brand__btn--lg a:visited,
.ace-brand__btn--lg a:hover,
.ace-brand__btn--lg a:active {
  color: var(--ace-lime-ink) !important;
  text-decoration: none !important;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  display: block;
  background: transparent;
}

/* ace-brand__btn--lg-outline-dark */
.ace-brand__btn--lg-outline-dark,
.ace-brand__btn--lg-outline-dark.brxe-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ace-paper) !important;
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: var(--ace-fs-h3);
  letter-spacing: 0.02em;
  padding: 11px 22px;
  border-radius: var(--ace-r-sm);
  text-decoration: none !important;
  border: 1.5px solid var(--ace-ink-3);
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  line-height: 1.2;
}
.ace-brand__btn--lg-outline-dark:hover {
  background: color-mix(in srgb, var(--ace-paper) 8%, transparent);
  border-color: var(--ace-paper);
  color: var(--ace-paper) !important;
}
.ace-brand__btn--lg-outline-dark a,
.ace-brand__btn--lg-outline-dark > a,
.ace-brand__btn--lg-outline-dark a:visited,
.ace-brand__btn--lg-outline-dark a:hover,
.ace-brand__btn--lg-outline-dark a:active {
  color: var(--ace-paper) !important;
  text-decoration: none !important;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  display: block;
  background: transparent;
}

/* ace-brand__cta */
.ace-brand__cta,
.ace-brand__cta.brxe-heading {
  background: var(--ace-lime);
  color: var(--ace-lime-ink) !important;
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-h3);
  letter-spacing: 0.02em;
  padding: 12px 18px;
  border-radius: var(--ace-r-sm);
  text-decoration: none !important;
  text-align: center;
  display: block;
  transition: background 0.15s ease;
  margin: 4px 0 0 0;
  line-height: 1.2;
  border: 0;
  cursor: pointer;
}
.ace-brand__cta:hover {
  background: var(--ace-lime-2);
  color: var(--ace-lime-ink) !important;
}
.ace-brand__cta a,
.ace-brand__cta > a,
.ace-brand__cta a:visited,
.ace-brand__cta a:hover,
.ace-brand__cta a:active {
  color: var(--ace-lime-ink) !important;
  text-decoration: none !important;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  display: block;
  background: transparent;
}

/* ace-brand__mobile-cta — sticky bottom bar auto-injected on casino_brand
   singles (see inc/brand-mobile-cta.php). Hidden entirely on desktop; on phones
   it's a rounded card floating just above the bottom edge with a dismiss X. It
   starts translated off-screen and JS slides it in after a short scroll. */
.ace-brand__mobile-cta { display: none; }

@media (max-width: 768px) {
  .ace-brand__mobile-cta {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 950;
    display: block;
    background: var(--ace-paper);
    border: 1px solid var(--ace-rule);
    border-radius: 16px;
    box-shadow: 0 12px 32px 0 color-mix(in srgb, var(--ace-ink) 22%, transparent);
    padding: 12px 12px 12px 14px;
    /* Slide-in / dismiss animation. */
    transform: translateY(calc(100% + 14px + env(safe-area-inset-bottom)));
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease;
    will-change: transform;
    /* Off-screen + non-interactive until JS reveals it, so it never blocks taps
       or shows a flash before the scroll trigger fires. */
    pointer-events: none;
  }
  .ace-brand__mobile-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .ace-brand__mobile-cta.is-dismissed {
    transform: translateY(calc(100% + 14px + env(safe-area-inset-bottom)));
    opacity: 0;
  }
}

/* ace-brand__mobile-cta-inner */
.ace-brand__mobile-cta-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}

/* ace-brand__mobile-cta-close — small X pinned to the leading edge. */
.ace-brand__mobile-cta-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ace-paper-2);
  color: var(--ace-ink-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ace-brand__mobile-cta-close:hover { background: var(--ace-rule); color: var(--ace-ink); }
.ace-brand__mobile-cta-close .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* ace-brand__mobile-cta-text */
.ace-brand__mobile-cta-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ace-brand__mobile-cta-text .ace-brand__mobile-cta-eyebrow {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ace-muted);
}
.ace-brand__mobile-cta-text .ace-brand__mobile-cta-head {
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-small);
  color: var(--ace-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* Allow up to two lines so the full bonus reads, then ellipsis. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ace-brand__mobile-cta-btn */
.ace-brand__mobile-cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ace-lime);
  color: var(--ace-lime-ink);
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: var(--ace-r-sm);
  text-decoration: none;
  transition: background 0.15s ease;
}
.ace-brand__mobile-cta-btn:hover {
  background: var(--ace-lime-2);
  color: var(--ace-lime-ink);
}
.ace-brand__mobile-cta-btn .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}

/* Respect reduced-motion: no slide, just fade. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .ace-brand__mobile-cta { transition: opacity 0.2s ease; transform: none; }
  .ace-brand__mobile-cta.is-visible { transform: none; }
  .ace-brand__mobile-cta.is-dismissed { transform: none; opacity: 0; }
}


/* === 4.8 BRAND PROS / CONS === */

/* ace-brand__proscons-grid */
.ace-brand__proscons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) {
  .ace-brand__proscons-grid { grid-template-columns: 1fr; }
}

/* ace-brand__proscons-head */
.ace-brand__proscons-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* ace-brand__proscons-icon */
.ace-brand__proscons-icon,
.ace-brand__proscons-icon.brxe-heading {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  margin: 0;
}

/* ace-brand__proscons-icon--bad */
.ace-brand__proscons-icon--bad {
  background: color-mix(in srgb, var(--ace-red) 13%, transparent);
  color: var(--ace-red);
}

/* ace-brand__proscons-icon--ok */
.ace-brand__proscons-icon--ok {
  background: color-mix(in srgb, var(--ace-green) 15%, transparent);
  color: var(--ace-green);
}

/* ace-brand__proscons-label */
.ace-brand__proscons-label { font-family: var(--ace-font-display); }


/* === 4.9 BRAND LIST === */

/* ace-brand__list */
.ace-brand__list,
.ace-brand__list.brxe-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ace-brand__list-item */
.ace-brand__list-item,
.ace-brand__list-item.brxe-text-basic {
  font-family: var(--ace-font-sans);
  font-size: var(--ace-fs-meta);
  line-height: 1.55;
  color: var(--ace-ink-2);
  padding: 0;
  margin: 10px 0 0;
  display: block;
}


/* === 4.10 BRAND FACTS === */

/* ace-brand__fact-label */
.ace-brand__fact-label,
.ace-brand__fact-label.brxe-text-basic {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ace-muted);
  margin: 0 0 4px 0;
}

/* ace-brand__fact-value */
.ace-brand__fact-value,
.ace-brand__fact-value.brxe-text-basic {
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: var(--ace-fs-h3);
  color: var(--ace-ink);
  line-height: 1.35;
  margin: 0;
}
.ace-brand__fact-value a {
  color: var(--ace-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ace-rule-2);
  transition: border-color 0.15s ease;
}
.ace-brand__fact-value a:hover {
  border-bottom-color: var(--ace-amber);
}

/* ace-brand__facts-grid — 8 facts, two rows of 4 on desktop, collapse gracefully */
.ace-brand__facts-grid,
.ace-brand__facts-grid.brxe-div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px;
  margin-top: 14px;
  width: 100%;
}
@media (max-width: 900px) {
  .ace-brand__facts-grid, .ace-brand__facts-grid.brxe-div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .ace-brand__facts-grid, .ace-brand__facts-grid.brxe-div { grid-template-columns: 1fr; gap: 12px; }
}


/* === 4.11 BRAND FAQ — Bricks native accordion widget ===
   Scoped under .ace-brand__faq-container so other accordions on the
   site stay on Bricks defaults. The widget emits .accordion-item,
   .accordion-title-wrapper (with aria-expanded), .accordion-title,
   .accordion-content-wrapper, plus a chevron <i> with .brx-icon-transform.
*/

/* Container card */
.ace-brand__faq-container {
  background: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: var(--ace-r-lg);
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Item row */
.ace-brand__faq-container .accordion-item {
  background: var(--ace-white);
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ace-brand__faq-container .accordion-item + .accordion-item {
  border-top: 1px solid var(--ace-rule);
}
/* Open state — paper-2 tint */
.ace-brand__faq-container .accordion-item:has(.accordion-title-wrapper[aria-expanded="true"]) {
  background: var(--ace-paper-2);
}

/* Question row */
.ace-brand__faq-container .accordion-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  padding: 16px 20px;
  margin: 0;
  background: transparent;
}
.ace-brand__faq-container .accordion-title {
  flex: 1;
  min-width: 0;
}
.ace-brand__faq-container .accordion-title .title,
.ace-brand__faq-container .accordion-title h5,
.ace-brand__faq-container .accordion-title h3 {
  font-family: var(--ace-font-display);
  font-weight: 700;
  /* Read-text question, not a section heading: smaller than the old faq-q (17->20)
     and never uppercase. The native accordion title renders as <h3>, which would
     otherwise inherit text-transform:uppercase from the h3 theme style. */
  font-size: var(--ace-fs-body);
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--ace-ink);
  margin: 0;
}

/* FAQ question titles use one fluid size (--ace-fs-faq-q) everywhere.
   home/cat/guide faq-q carry it at their seed source; ace-brand__faq-q is a
   DB-only class, so it's covered here. Scoped under the item + .brxe-text-basic
   so it beats the bare global class regardless of stylesheet/inline order. */
.ace-brand__faq-item .ace-brand__faq-q,
.ace-brand__faq-q.brxe-text-basic {
  font-size: var(--ace-fs-faq-q);
}

/* Chevron — hide Bricks' default ion-icon <i>, draw +/− via ::after */
.ace-brand__faq-container .accordion-title-wrapper > i,
.ace-brand__faq-container .accordion-title-wrapper > .brxe-icon {
  display: none;
}
.ace-brand__faq-container .accordion-title-wrapper::after {
  content: "+";
  font-family: var(--ace-font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  color: var(--ace-muted);
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.ace-brand__faq-container .accordion-title-wrapper[aria-expanded="true"]::after {
  content: "−";
  color: var(--ace-ink);
}

/* Answer body */
.ace-brand__faq-container .accordion-content-wrapper {
  padding: 0 20px 16px 20px;
  margin: 0;
  font-family: var(--ace-font-sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ace-ink-2);
}
.ace-brand__faq-container .accordion-content-wrapper p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 8px 0;
  max-width: 64ch;
}
.ace-brand__faq-container .accordion-content-wrapper p:last-child {
  margin-bottom: 0;
}


/* === 4.12 BRAND TABLE === */

/* ace-brand__delta--avg */
.ace-brand__delta--avg {
  color: var(--ace-muted);
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ace-brand__delta--faster */
.ace-brand__delta--faster {
  color: var(--ace-green);
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ace-brand__delta--slower */
.ace-brand__delta--slower {
  color: var(--ace-red);
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ace-brand__table */
.ace-brand__table,
.ace-brand__table.brxe-div {
  background: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: var(--ace-r-lg);
  overflow: hidden;
  font-family: var(--ace-font-sans);
  font-size: 13px;
}

/* ace-brand__table--bonus-cols */
.ace-brand__table--bonus-cols,
.ace-brand__table--bonus-cols.brxe-div,
.ace-brand__table-row.ace-brand__table--bonus-cols,
.ace-brand__table-row.brxe-div.ace-brand__table--bonus-cols {
  grid-template-columns: 130px minmax(0, 1fr) 80px 100px;
}
@media (max-width: 720px) {
  .ace-brand__table--bonus-cols, .ace-brand__table--bonus-cols.brxe-div,
  .ace-brand__table-row.ace-brand__table--bonus-cols,
  .ace-brand__table-row.brxe-div.ace-brand__table--bonus-cols {
    grid-template-columns: 100px minmax(0, 1fr) 60px 80px;
  }
}

/* ace-brand__table--pay-cols */
.ace-brand__table--pay-cols,
.ace-brand__table--pay-cols.brxe-div,
.ace-brand__table-row.ace-brand__table--pay-cols,
.ace-brand__table-row.brxe-div.ace-brand__table--pay-cols {
  grid-template-columns: 110px 80px 100px minmax(0, 1fr);
}
@media (max-width: 720px) {
  .ace-brand__table--pay-cols, .ace-brand__table--pay-cols.brxe-div,
  .ace-brand__table-row.ace-brand__table--pay-cols,
  .ace-brand__table-row.brxe-div.ace-brand__table--pay-cols {
    grid-template-columns: 90px 60px 80px minmax(0, 1fr);
    gap: 6px;
  }
}

/* --- Grid tables (deposit steps + payment methods): the 4-col px grid can't
   fit a phone, so below 560px each row collapses to a stacked card. The first
   cell is the card title; the other three become labelled rows via ::before,
   and the dark header is hidden. Column order is fixed by the template. --- */
@media (max-width: 560px) {
  .ace-brand__table-head.ace-brand__table--bonus-cols,
  .ace-brand__table-head.ace-brand__table--pay-cols { display: none; }

  .ace-brand__table-row.ace-brand__table--bonus-cols,
  .ace-brand__table-row.brxe-div.ace-brand__table--bonus-cols,
  .ace-brand__table-row.ace-brand__table--pay-cols,
  .ace-brand__table-row.brxe-div.ace-brand__table--pay-cols {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 14px 16px;
  }
  /* First cell = card title. */
  .ace-brand__table-row.ace-brand__table--bonus-cols > :first-child,
  .ace-brand__table-row.ace-brand__table--pay-cols > :first-child {
    font-family: var(--ace-font-display);
    font-weight: 800;
    font-size: var(--ace-fs-small);
    color: var(--ace-ink);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ace-rule);
  }
  /* Remaining cells become label · value rows (label via ::before inside cell). */
  .ace-brand__table-row.ace-brand__table--bonus-cols > :nth-child(n+2),
  .ace-brand__table-row.ace-brand__table--pay-cols > :nth-child(n+2) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
  }
  .ace-brand__table-row.ace-brand__table--bonus-cols > :nth-child(n+2)::before,
  .ace-brand__table-row.ace-brand__table--pay-cols > :nth-child(n+2)::before {
    flex: 0 0 auto;
    text-align: left;
    font-family: var(--ace-font-mono);
    font-size: var(--ace-fs-meta);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ace-muted);
  }
  /* Bonus table labels: Bonus / Match / Max. */
  .ace-brand__table-row.ace-brand__table--bonus-cols > :nth-child(2)::before { content: "Bonus"; }
  .ace-brand__table-row.ace-brand__table--bonus-cols > :nth-child(3)::before { content: "Match"; }
  .ace-brand__table-row.ace-brand__table--bonus-cols > :nth-child(4)::before { content: "Max"; }
  /* Pay table labels: Min / Speed / vs Average. */
  .ace-brand__table-row.ace-brand__table--pay-cols > :nth-child(2)::before { content: "Min"; }
  .ace-brand__table-row.ace-brand__table--pay-cols > :nth-child(3)::before { content: "Speed"; }
  .ace-brand__table-row.ace-brand__table--pay-cols > :nth-child(4)::before { content: "vs Average"; }
}

/* ace-brand__table-cell-mono */
.ace-brand__table-cell-mono {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 500;
  color: var(--ace-ink);
  letter-spacing: 0;
}

/* ace-brand__table-cell-step */
.ace-brand__table-cell-step {
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--ace-ink);
}

/* ace-brand__table-head */
.ace-brand__table-head,
.ace-brand__table-head.brxe-div {
  display: grid;
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ace-paper);
  padding: 11px 16px;
  background: var(--ace-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--ace-paper) 16%, transparent);
  gap: 10px;
}

/* ace-brand__table-row */
.ace-brand__table-row,
.ace-brand__table-row.brxe-div {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--ace-rule);
  background: var(--ace-white);
  font-family: var(--ace-font-sans);
  font-size: var(--ace-fs-small);
}
.ace-brand__table > .brxe-block:not(.brx-query-trail) {
  display: contents;
}
.ace-brand__table > [data-brx-loop-start] {
  display: contents;
}
.ace-brand__table .brx-query-trail {
  display: none;
}
/* Row hover */
.ace-brand__table-row:hover,
.ace-brand__table-row.brxe-div:hover {
  background: color-mix(in srgb, var(--ace-paper-2) 50%, transparent);
}
/* Remove top border on first row (when adjacent to head) */
.ace-brand__table-head + .brxe-block .ace-brand__table-row,
.ace-brand__table-head + .brxe-block + .brxe-block .ace-brand__table-row,
.ace-brand__table > .brxe-block:first-of-type .ace-brand__table-row,
.ace-brand__table > .ace-brand__table-row:first-of-type {
  /* keep border for visual separation */
}
@media (max-width: 720px) {
  .ace-brand__table-row, .ace-brand__table-row.brxe-div { gap: 6px; padding: 12px; }
}


/* === 4.13 BRAND HOW TO CLAIM === */

/* ace-brand__htc-desc */
.ace-brand__htc-desc,
.ace-brand__htc-desc.brxe-text-basic {
  font-family: var(--ace-font-sans);
  font-size: var(--ace-fs-small);
  line-height: 1.55;
  color: var(--ace-ink-2);
  margin: 0;
}

/* ace-brand__htc-grid — vertical list; loop is on the step card itself, so do
   NOT collapse the step with display:contents (that would kill the card box). */
.ace-brand__htc-grid,
.ace-brand__htc-grid.brxe-div,
.ace-brand__htc-grid.brxe-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ace-brand__htc-grid .brx-query-trail {
  display: none;
}
/* Each step is a 2-col card: [number] [content]. */
.ace-brand__htc-grid > .ace-brand__htc-step {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: center;
}

/* ace-brand__htc-num */
.ace-brand__htc-num,
.ace-brand__htc-num.brxe-heading {
  position: static !important;
  top: auto !important;
  right: auto !important;
  background: var(--ace-lime) !important;
  color: var(--ace-lime-ink) !important;
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: 14px !important;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  grid-row: span 2;
}

/* ace-brand__htc-step */
.ace-brand__htc-step,
.ace-brand__htc-step.brxe-block {
  background: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: var(--ace-r-md);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 2px;
  align-items: start;
  position: relative;
  width: 100%;
}
.ace-brand__htc-step .ace-brand__htc-num {
  grid-row: span 2;
  align-self: center;
  background: var(--ace-lime);
  color: var(--ace-lime-ink);
  font-family: var(--ace-font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
}
.ace-brand__htc-step .ace-brand__htc-title {
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: var(--ace-fs-body);
  color: var(--ace-ink);
  margin: 0;
  line-height: 1.3;
  max-width: none;
  padding-right: 0;
  grid-column: 2;
}
.ace-brand__htc-step .ace-brand__htc-desc {
  font-family: var(--ace-font-sans);
  font-size: var(--ace-fs-small);
  line-height: 1.55;
  color: var(--ace-ink-2);
  margin: 0;
  grid-column: 2;
}

/* ace-brand__htc-title */
.ace-brand__htc-title,
.ace-brand__htc-title.brxe-heading {
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: var(--ace-fs-small);
  color: var(--ace-ink);
  margin: 0 0 4px 0;
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: calc(100% - 50px);
}

/* Phones: stack the step contents in a single column — number badge in the
   top-left corner, then title and description starting from the card's left
   edge (the desktop 2-col grid pushed the text off to the right, wasting the
   whole left gutter). */
@media (max-width: 560px) {
  .ace-brand__htc-step,
  .ace-brand__htc-step.brxe-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
  }
  .ace-brand__htc-step .ace-brand__htc-num {
    grid-row: auto;
    align-self: flex-start;
    margin-bottom: 4px;
  }
  .ace-brand__htc-step .ace-brand__htc-title,
  .ace-brand__htc-step .ace-brand__htc-desc {
    grid-column: auto;
    width: 100%;
    max-width: 100%;
  }
}


/* === 4.14 BRAND COMPARE === */

/* ace-brand-sub__compare-cta */
%root%{text-decoration:none;text-align:center;line-height:1}
.ace-brand-sub__compare-cta { font-family: var(--ace-font-display); }

/* ace-brand-sub__compare-head */
@media (max-width: 767px){%root%{grid-template-columns:1fr 80px 110px !important}%root% > :nth-child(2),%root% > :nth-child(3){display:none}}
.ace-brand-sub__compare-head { font-family: var(--ace-font-mono); }

/* ace-brand-sub__compare-logo */
%root%{object-fit:contain;border-radius:6px}

/* ace-brand-sub__compare-row */
@media (max-width: 767px){%root%{grid-template-columns:1fr 80px 110px !important}%root% > :nth-child(2),%root% > :nth-child(3){display:none}}

/* ace-brand-sub__compare-score */
.ace-brand-sub__compare-score { font-family: var(--ace-font-display); }

/* ace-brand-sub__compare-table */
%root%{overflow:hidden}

/* ace-brand-sub__compare-wager */
.ace-brand-sub__compare-wager { font-family: var(--ace-font-mono); }

/* ace-brand__compare */
.ace-brand__compare,
.ace-brand__compare.brxe-block {
  background: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: var(--ace-r-lg);
  overflow: hidden;
  display: block;
  margin-top: 10px;
}
.ace-brand__compare > .brxe-block:not(.brx-query-trail) {
  display: contents;
}
.ace-brand__compare > [data-brx-loop-start] {
  display: contents;
}
.ace-brand__compare .brx-query-trail {
  display: none;
}

/* ace-brand__compare-bonus */
.ace-brand__compare-bonus,
.ace-brand__compare-bonus.brxe-text-basic {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 500;
  color: var(--ace-ink-2);
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}

/* ace-brand__compare-brand */
.ace-brand__compare-brand,
.ace-brand__compare-brand.brxe-text-basic {
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: var(--ace-fs-small);
  color: var(--ace-ink);
  letter-spacing: -0.01em;
  text-decoration: none;
  min-width: 0;
  margin: 0;
}
.ace-brand__compare-brand a {
  color: inherit !important;
  text-decoration: none;
  font-family: inherit;
  font-weight: inherit;
}

/* ace-brand__compare-cta */
.ace-brand__compare-cta,
.ace-brand__compare-cta.brxe-text-basic {
  background: var(--ace-lime);
  color: var(--ace-lime-ink) !important;
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--ace-r-sm);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background 0.15s ease;
  margin: 0;
}
.ace-brand__compare-cta:hover {
  background: var(--ace-lime-2);
}
.ace-brand__compare-cta a {
  color: inherit !important;
  text-decoration: none;
  font-family: inherit;
  font-weight: inherit;
}

/* ace-brand__compare-head — 5 cols: Casino / Score / Bonus / Payout / [CTA].
   Casino is narrowed and Welcome bonus widened so the bonus text (the column
   that actually carries the comparison) has room to breathe. */
.ace-brand__compare-head,
.ace-brand__compare-head.brxe-div {
  display: grid;
  grid-template-columns: 1.3fr 0.5fr 1.7fr 0.6fr 0.9fr;
  gap: 14px;
  padding: 12px 16px;
  background: var(--ace-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--ace-paper) 16%, transparent);
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ace-paper);
  width: 100%;
}
@media (max-width: 720px) {
  .ace-brand__compare-head, .ace-brand__compare-head.brxe-div { grid-template-columns: 1.2fr 0.5fr 1.6fr 0.6fr 0.9fr; gap: 8px; padding: 10px 12px; }
}

/* ace-brand__compare-row */
.ace-brand__compare-row,
.ace-brand__compare-row.brxe-div {
  display: grid;
  grid-template-columns: 1.3fr 0.5fr 1.7fr 0.6fr 0.9fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--ace-rule);
  background: var(--ace-white);
  font-family: var(--ace-font-sans);
  font-size: var(--ace-fs-small);
  width: 100%;
}
.ace-brand__compare-row[data-current="1"],
.ace-brand__compare-row.is-current {
  background: color-mix(in srgb, var(--ace-lime) 12%, transparent);
  border-left: 3px solid var(--ace-lime);
}
@media (max-width: 720px) {
  .ace-brand__compare-row, .ace-brand__compare-row.brxe-div { grid-template-columns: 1.2fr 0.5fr 1.6fr 0.6fr 0.9fr; gap: 8px; padding: 12px; }
}

/* Compare table — Casino cell (logo + name inline) */
.ace-brand__compare-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.ace-brand__compare-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 5px;
  flex-shrink: 0;
}

/* Compare table — Payout column */
.ace-brand__compare-payout {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-small);
  color: var(--ace-ink-2);
}

/* ace-brand__compare-score */
.ace-brand__compare-score,
.ace-brand__compare-score.brxe-text-basic {
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-body);
  color: var(--ace-ink);
  letter-spacing: -0.02em;
  margin: 0;
}

/* --- Compare / ranking table: stack rows into label/value cards on mobile.
   The dark 5-col header is dropped and each row becomes a self-labelling card
   (Score / Welcome bonus / Payout rendered as ::before eyebrows). Cell order is
   fixed by the template: 1 brand · 2 score · 3 bonus · 4 payout · 5 claim · 6 review. */
@media (max-width: 560px) {
  .ace-brand__compare-head,
  .ace-brand__compare-head.brxe-div { display: none; }

  /* Drop the shared table chrome and lay the container out as a flex column so
     the gap sits BETWEEN the cards. The rows are query-loop clones that all
     share one Bricks element ID, so an ID-scoped margin (emitted by Bricks)
     would beat a class margin — `gap` on the flex parent sidesteps that. The
     loop wrapper is display:contents, so the rows become the flex items. */
  .ace-brand__compare,
  .ace-brand__compare.brxe-block {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .ace-brand__compare-row,
  .ace-brand__compare-row.brxe-div {
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 10px;
    padding: 16px;
    /* Standalone card: own border + radius (margin handled by parent gap). */
    border: 1px solid var(--ace-rule);
    border-radius: var(--ace-r-md);
  }
  /* Keep the lime highlight on the current brand, now as a full outline. */
  .ace-brand__compare-row[data-current="1"],
  .ace-brand__compare-row.is-current {
    border-color: var(--ace-lime);
    border-left-width: 3px;
  }
  /* Brand name spans the full width as the card title. */
  .ace-brand__compare-row > .ace-brand__compare-brand {
    grid-column: 1 / -1;
    font-size: var(--ace-fs-body);
    font-weight: 800;
  }
  /* Score sits right under the title, small and inline. */
  .ace-brand__compare-row > .ace-brand__compare-score {
    grid-column: 1 / -1;
    font-size: var(--ace-fs-small);
  }
  .ace-brand__compare-row > .ace-brand__compare-score::before {
    content: "Score \00a0";
    font-family: var(--ace-font-mono);
    font-size: var(--ace-fs-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ace-muted);
  }
  /* Welcome bonus (cell 3) + payout (cell 4, unclassed) each get a mono eyebrow
     label. Payout is targeted by position since its cell carries no class. */
  .ace-brand__compare-row > .ace-brand__compare-bonus,
  .ace-brand__compare-row > :nth-child(4) {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--ace-font-sans);
    font-size: var(--ace-fs-small);
    color: var(--ace-ink-2);
  }
  .ace-brand__compare-row > .ace-brand__compare-bonus::before { content: "Welcome bonus"; }
  .ace-brand__compare-row > :nth-child(4)::before { content: "Payout"; }
  .ace-brand__compare-row > .ace-brand__compare-bonus::before,
  .ace-brand__compare-row > :nth-child(4)::before {
    font-family: var(--ace-font-mono);
    font-size: var(--ace-fs-meta);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ace-muted);
  }
  /* Claim goes full-width; the text "Review" link tucks under it, centred. */
  .ace-brand__compare-row > .ace-brand__compare-cta {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    padding: 12px;
    font-size: var(--ace-fs-small);
  }
  .ace-brand__compare-row > .ace-brand__compare-cta:last-child {
    background: transparent;
    color: var(--ace-muted) !important;
    padding: 4px 0 0;
    font-family: var(--ace-font-mono);
    font-size: var(--ace-fs-meta);
    letter-spacing: 0.1em;
  }
  .ace-brand__compare-row > .ace-brand__compare-cta:last-child a { color: var(--ace-muted) !important; }
}


/* === 4.15 BRAND BYLINE === */

/* ace-brand__byline */
.ace-brand__byline,
.ace-brand__byline.brxe-div {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--ace-paper) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ace-paper) 12%, transparent);
  border-radius: 12px;
}
@media (max-width: 640px) {
  .ace-brand__byline, .ace-brand__byline.brxe-div { gap: 14px; padding: 12px 14px; }
}

/* Light variant for child sub-page hero (which sits on --ace-paper, not ink). */
.ace-brand__byline--on-paper,
.ace-brand__byline--on-paper.brxe-div {
  background: var(--ace-white);
  border-color: var(--ace-rule);
}
.ace-brand__byline--on-paper .ace-brand__byline-name { color: var(--ace-ink); }
.ace-brand__byline--on-paper .ace-brand__byline-role { color: var(--ace-muted); }
.ace-brand__byline--on-paper .ace-brand__byline-verified > * { color: var(--ace-ink); }

/* ace-brand__byline-avatar */
.ace-brand__byline-avatar,
.ace-brand__byline-avatar.brxe-text-basic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ace-font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  margin: 0;
  line-height: 1;
}

/* ace-brand__byline-avatar--editor */
.ace-brand__byline-avatar--editor,
.ace-brand__byline-avatar--editor.brxe-text-basic {
  background: var(--ace-ink);
  color: var(--ace-paper);
}

/* ace-brand__byline-avatar--reviewer */
.ace-brand__byline-avatar--reviewer,
.ace-brand__byline-avatar--reviewer.brxe-text-basic {
  background: var(--ace-lime);
  color: var(--ace-lime-ink);
}

/* ace-brand__byline-meta */
.ace-brand__byline-meta,
.ace-brand__byline-meta.brxe-div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* ace-brand__byline-name */
.ace-brand__byline-name,
.ace-brand__byline-name.brxe-text-basic {
  font-family: var(--ace-font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ace-paper);
  margin: 0;
  line-height: 1.3;
}
/* When the name is a link to the author's team profile, keep the byline look
   (no default underline/blue) and only underline on hover. */
a.ace-brand__byline-name {
  text-decoration: none;
}
a.ace-brand__byline-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ace-brand__byline-person */
.ace-brand__byline-person,
.ace-brand__byline-person.brxe-div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
@media (max-width: 640px) {
  .ace-brand__byline-person, .ace-brand__byline-person.brxe-div { flex: 1 1 100%; }
}

/* ace-brand__byline-role */
.ace-brand__byline-role,
.ace-brand__byline-role.brxe-text-basic {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ace-muted-2);
  margin: 0;
  line-height: 1.2;
}

/* ace-brand__byline-verified */
.ace-brand__byline-verified,
.ace-brand__byline-verified.brxe-div {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  text-align: right;
}
@media (max-width: 640px) {
  .ace-brand__byline-verified, .ace-brand__byline-verified.brxe-div { margin-left: 0; align-items: flex-start; text-align: left; flex: 1 1 100%; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--ace-paper) 10%, transparent); }
}


/* === 4.16 BRAND TRUST STRIP === */

/* ace-brand__trust-chip */
.ace-brand__trust-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: #fff;
  border-radius: 5px;
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ace-ink);
  white-space: nowrap;
  /* Never let flexbox shrink a chip below its text — that's what clipped the
     labels ("BANK TRANSI", "BITCOI"…). */
  flex: 0 0 auto;
  margin: 0;
  line-height: 1;
}

/* ace-brand__trust-item */
.ace-brand__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ace-brand__trust-item + .ace-brand__trust-item {
  border-left: 1px solid color-mix(in srgb, var(--ace-ink) 12%, transparent);
  padding-left: 18px;
}
@media (max-width: 1100px) {
  .ace-brand__trust-item + .ace-brand__trust-item {
    border-left: 0;
    padding-left: 0;
  }
}
.ace-brand__trust-item__icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.ace-brand__trust-item__icon .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  color: var(--ace-ink);
}
.ace-brand__trust-item__icon--ssl .material-symbols-outlined { color: var(--ace-green); }
.ace-brand__trust-item__text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 1px;
}

/* ace-brand__trust-item--accepts
   Two columns: the "ACCEPTS" label and a pills block. The label is centred on
   the WHOLE pill block, and the pills wrap as a group inside .__pills, so a
   second-row pill (PAYID) lines up under the first-row one (BANK TRANSFER). */
.ace-brand__trust-item--accepts {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;   /* label centred vertically against the pill block */
  gap: 10px;
}
/* Keep the "ACCEPTS" label from being squeezed. */
.ace-brand__trust-item--accepts > .ace-brand__trust-item__label {
  flex: 0 0 auto;
}
/* The pills block: wraps as a group. */
.ace-brand__trust-item__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}
.ace-brand__trust-item__pills .ace-brand__trust-item__chips {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.ace-brand__trust-item--accepts > .brx-query-trail,
.ace-brand__trust-item__pills > .brx-query-trail { display: none; }

/* ace-brand__trust-item__badge */
.ace-brand__trust-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--ace-ink);
  border-radius: 50%;
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 700;
  color: var(--ace-ink);
  flex: 0 0 auto;
  margin: 0;
  background: transparent;
  line-height: 1;
}

/* ace-brand__trust-item__label */
.ace-brand__trust-item__label {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ace-muted);
  margin: 0;
  line-height: 1.1;
}

/* ace-brand__trust-item__value */
.ace-brand__trust-item__value {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ace-ink);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.ace-brand__trust-item__value--standalone { font-weight: 600; }

/* ace-brand__trust-strip */
.ace-brand__trust-strip {
  padding: 18px 0;
}
.ace-brand__trust-strip-inner {
  background: var(--ace-paper-2);
  border-radius: 14px;
  padding: 14px 24px;
}

/* ace-brand__trust-strip-inner */
.ace-brand__trust-strip-inner {
  /* local font-size for everything inside the strip; one knob drives all descendants */
  --trust-fs: 11px;
  display: flex;
  flex-direction: row;
  /* Wrap so the ACCEPTS item (with its many payment pills) drops to its own row
     rather than overflowing the rounded container. Everything stays centred on
     its row via align-items:center. */
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  font-family: var(--ace-font-mono);
  font-size: var(--trust-fs);
  line-height: 1.2;
  color: var(--ace-muted);
}
.ace-brand__trust-strip-inner .ace-brand__trust-chip,
.ace-brand__trust-strip-inner .ace-brand__trust-item__badge,
.ace-brand__trust-strip-inner .ace-brand__trust-item__label,
.ace-brand__trust-strip-inner .ace-brand__trust-item__value {
  font-size: var(--trust-fs);
}
@media (max-width: 1100px) {
  .ace-brand__trust-strip-inner {
    flex-wrap: wrap;
    gap: 12px 18px;
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .ace-brand__trust-strip-inner {
    padding: 14px 16px;
    gap: 10px 14px;
    justify-content: flex-start;
  }
  /* Let the "Accepts" payment chips wrap instead of pushing the row wide. */
  .ace-brand__trust-item--accepts { flex-wrap: wrap; }
}


/* === 4.17 BRAND SIDEBAR === */

/* ace-brand__sidebar */
.ace-brand__sidebar {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
@media (max-width: 1024px) {
  .ace-brand__sidebar {
    position: static;
    top: auto;
  }
}

/* ace-brand__sidebar-card */
.ace-brand__sidebar-card {
  background: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: var(--ace-r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ace-brand__sidebar-card .ace-brand__sidebar-eyebrow {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  color: var(--ace-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}

/* ace-brand__sidebar-eyebrow */
.ace-brand__sidebar-eyebrow { font-family: var(--ace-font-mono); }

/* ace-brand__sidebar-howto-list */
.ace-brand__sidebar-howto-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--ace-font-sans);
  font-size: var(--ace-fs-meta);
  line-height: 1.5;
  color: var(--ace-muted);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ace-brand__sidebar-howto-list > * {
  display: block;
  padding-left: 0;
  color: var(--ace-ink-2);
  font-size: var(--ace-fs-meta);
}
.ace-brand__sidebar-howto-list li {
  padding-left: 14px;
  position: relative;
}
.ace-brand__sidebar-howto-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ace-lime);
  transform: translateY(-50%);
}

/* ace-brand__sidebar-nav */
.ace-brand__sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ace-brand__sidebar-nav .ace-brand__sidebar-nav-item + .ace-brand__sidebar-nav-item {
  border-top: 1px solid color-mix(in srgb, var(--ace-rule) 60%, transparent);
}

/* ace-brand__sidebar-nav-item */
.ace-brand__sidebar-nav-item,
.ace-brand__sidebar-nav-item.brxe-heading {
  display: block;
  font-family: var(--ace-font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ace-muted) !important;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  text-decoration: none !important;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  font-weight: 500;
}
.ace-brand__sidebar-nav-item:hover {
  color: var(--ace-ink) !important;
  background: var(--ace-paper-2);
}
.ace-brand__sidebar-nav-item a,
.ace-brand__sidebar-nav-item > a,
.ace-brand__sidebar-nav-item a:visited,
.ace-brand__sidebar-nav-item a:hover {
  color: inherit !important;
  text-decoration: none !important;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  display: block;
}
.ace-brand__sidebar-nav-item.is-active,
.ace-brand__sidebar-nav-item[data-active="1"] {
  color: var(--ace-ink) !important;
  font-weight: 600;
  border-left-color: var(--ace-lime);
}

/* ace-toc — custom element root spans the full width of its container
   (the brand sidebar uses a narrow column; on wide hosts the card would
   otherwise shrink-wrap, so force it to fill the slot). */
.brxe-ace-toc.ace-toc {
  width: 100%;
}

/* ace-toc — builder-only empty hint for the ACE TOC element */
.ace-toc__empty {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  color: var(--ace-muted);
  padding: 10px 12px;
  border: 1px dashed var(--ace-rule);
  border-radius: 6px;
  margin: 0;
}


/* === 4.18 BRAND TYPOGRAPHY === */

/* ace-brand__eyebrow */
.ace-brand__eyebrow { font-family: var(--ace-font-mono); }

/* ace-brand__h2 */
.ace-brand__h2 { font-family: var(--ace-font-display); }

/* ace-brand__lede */
.ace-brand__lede {
  font-size: var(--ace-fs-body);
  line-height: 1.55;
  color: var(--ace-muted-2);
  max-width: 540px;
}

/* Score breakdown — overall sub label single-line */
.ace-brand__breakdown-overall-sub {
  white-space: nowrap;
}

/* Score breakdown — bar cell flex grow */
.ace-brand__breakdown-bar-cell {
  flex: 1;
  min-width: 0;
}

/* Loop wrapper unwrap helper (display:contents) */
.ace-loop-contents {
  display: contents;
}

/* Bonus code highlight.
   Lime ONLY on dark surfaces (sidebar welcome bonus card). On the
   light/cream hero offer card, lime is too low-contrast — use ink. */
.ace-brand__sidebar-code b,
.ace-brand__sidebar-code strong,
.ace-brand__card--ink .ace-brand__offer-code b,
.ace-brand__card--ink .ace-brand__offer-code strong {
  color: var(--ace-lime) !important;
  font-weight: 700;
}
.ace-brand__offer-code b,
.ace-brand__offer-code strong {
  color: var(--ace-ink);
  font-weight: 700;
}

/* Hero badge — alternate (outline) variant for secondary badge */
.ace-brand__badge--alt {
  background-color: transparent;
  color: var(--ace-lime);
  border: 1px solid var(--ace-lime);
}

/* Payments table — delta column color by value (faster / slower / avg) */
.ace-brand__pay-delta {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
}
.ace-brand__pay-delta--faster {
  color: var(--ace-green);
}
.ace-brand__pay-delta--slower {
  color: var(--ace-red);
}
.ace-brand__pay-delta--avg {
  color: var(--ace-muted);
}

/* Deep dives grid — 3 columns on desktop, collapses on smaller screens.
   The loop wrapper (.brxe-block) uses display:contents so each card lands
   directly in the grid (per Bricks loop layout pattern). */
.ace-brand__deepdive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 18px;
  row-gap: 14px;
}
.ace-brand__deepdive-grid > .brxe-block { display: contents; }
.ace-brand__deepdive-grid .brx-query-trail { display: none; }
@media (max-width: 960px) {
  .ace-brand__deepdive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ace-brand__deepdive-grid { grid-template-columns: 1fr; }
}

/* Deep dives card — icon + text column layout.
   The icon is a Material Symbols ligature inside a <span>; lock font-size,
   line-height and font-variation-settings so the glyph centers cleanly. */
.ace-brand__deepcard-icon,
.ace-brand__deepcard-icon.material-symbols-outlined {
  width: 32px;
  height: 32px;
  background: var(--ace-lime);
  color: var(--ace-lime-ink);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  flex-shrink: 0;
  text-align: center;
}
.ace-brand__deepcard-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}


/* === 4.19 BRAND SUBPAGE === */

/* ace-brand-sub__bottom-cta-btn */
.ace-brand-sub__bottom-cta-btn { text-decoration: none; line-height: 1; font-family: var(--ace-font-display); }

/* ace-brand-sub__bottom-cta-code */
.ace-brand-sub__bottom-cta-code { font-family: var(--ace-font-mono); }

/* ace-brand-sub__bottom-cta-grid — headline | button on desktop, stacked on
   mobile. (The prior `%root%` media rule was a Bricks editor placeholder that
   never resolves at runtime, so the grid stayed 2-col and the button overlapped
   the headline on phones.) */
@media (max-width: 767px) {
  /* !important + .brxe-block compound to beat the Bricks global-class rule that
     sets `1fr auto` (higher specificity than a bare class). */
  .ace-brand-sub__bottom-cta-grid,
  .brxe-block.ace-brand-sub__bottom-cta-grid {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
  }
  .ace-brand-sub__bottom-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
}

/* ace-brand-sub__bottom-cta-headline */
.ace-brand-sub__bottom-cta-headline { font-family: var(--ace-font-display); }

/* ace-brand-sub__calc-eyebrow */
.ace-brand-sub__calc-eyebrow { font-family: var(--ace-font-mono); }

/* ace-brand-sub__calc-grid */
@media (max-width: 991px){%root%{grid-template-columns:1fr !important}}

/* Calc card mobile safety: grids can shrink below content min-width and the big
   total wraps instead of overflowing the card. */
.ace-brand-sub__calc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ace-brand-sub__calc-mini { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ace-brand-sub__calc-total-value,
.ace-brand-sub__calc-mini-value { overflow-wrap: anywhere; min-width: 0; }

/* ace-brand-sub__calc-mini-label */
.ace-brand-sub__calc-mini-label { font-family: var(--ace-font-mono); }

/* ace-brand-sub__calc-mini-value */
.ace-brand-sub__calc-mini-value { font-family: var(--ace-font-display); }

/* ace-brand-sub__calc-title */
.ace-brand-sub__calc-title { font-family: var(--ace-font-display); }

/* ace-brand-sub__calc-total-label */
.ace-brand-sub__calc-total-label { font-family: var(--ace-font-mono); }

/* ace-brand-sub__calc-total-note */
.ace-brand-sub__calc-total-note { font-family: var(--ace-font-mono); }

/* ace-brand-sub__calc-total-value */
.ace-brand-sub__calc-total-value { font-family: var(--ace-font-display); }

/* ace-brand-sub__guide — single guide card (anchor) */
.ace-brand-sub__guide {
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ace-brand-sub__guide:hover {
  transform: translateY(-2px);
  box-shadow: var(--ace-shadow-md);
  border-color: var(--ace-rule-2);
}

/* ace-brand-sub__guide-icon — Material Symbols ligature inside guide card */
.ace-brand-sub__guide-icon.material-symbols-outlined {
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 22px;
  color: var(--ace-ink-2);
  background: var(--ace-paper-2);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ace-brand-sub__guide-meta — title + subtitle stack inside card */
.ace-brand-sub__guide-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* ace-brand-sub__guide-title — main label */
.ace-brand-sub__guide-title {
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: var(--ace-fs-small);
  line-height: 1.2;
  color: var(--ace-ink);
}

/* ace-brand-sub__guide-subtitle — secondary helper text */
.ace-brand-sub__guide-subtitle {
  font-family: var(--ace-font-sans);
  font-size: var(--ace-fs-eyebrow);
  line-height: 1.3;
  color: var(--ace-muted);
  margin-top: 2px;
}

/* ace-brand-sub__guide-topic — legacy eyebrow (kept for parent template parity) */
.ace-brand-sub__guide-topic { font-family: var(--ace-font-mono); }

/* ace-brand-sub__guides-grid — Bricks loop wrappers get display:contents so cards
   sit directly under the grid parent (per feedback_bricks_loop_display_contents). */
.ace-brand-sub__guides-grid > .brxe-block,
.ace-brand-sub__guides-grid > [data-brx-loop-start] {
  display: contents;
}
.ace-brand-sub__guides-grid > .brx-query-trail { display: none; }
@media (max-width: 991px){
  .ace-brand-sub__guides-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 478px){
  .ace-brand-sub__guides-grid { grid-template-columns: 1fr !important; }
}

/* ace-brand-sub__htc-tip-label */
.ace-brand-sub__htc-tip-label { font-family: var(--ace-font-mono); }

/* Hide the whole tip callout for steps that have no {acf_tip} value. */
.ace-brand-sub__htc-tip:has(.ace-brand-sub__htc-tip-text:empty) { display: none; }

/* ace-brand-sub__htc-phone — right-column decorative placeholder in step card */
.ace-brand-sub__htc-phone {
  background: linear-gradient(160deg, var(--ace-paper-2) 0%, var(--ace-rule-2) 100%);
  border-radius: 10px;
  aspect-ratio: 4 / 5;
  max-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 991px) {
  .ace-brand-sub__htc-phone { display: none; }
}

/* ace-brand-sub__htc-phone-frame — inner "phone screen" decoration */
.ace-brand-sub__htc-phone-frame {
  width: 70%;
  height: 90%;
  background: var(--ace-white);
  border-radius: 12px;
  border: 3px solid color-mix(in srgb, var(--ace-ink) 10%, transparent);
  position: relative;
}
.ace-brand-sub__htc-phone-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background: var(--ace-ink);
  border-radius: 9px 9px 0 0;
}
.ace-brand-sub__htc-phone-frame::after {
  content: '';
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  height: 14px;
  background: var(--ace-lime);
  border-radius: 3px;
}

/* ace-brand-sub__keys */
%root%{overflow:hidden}
/* Loop is on the keys-row itself, so the row carries data-brx-loop-start —
   do NOT display:contents it (that would drop the row's own grid). Just hide
   the query trail; rows are already direct children of the card. */
.ace-brand-sub__keys .brx-query-trail { display: none; }

/* ace-brand-sub__keys-icon — Material Symbols ligature rendering */
.ace-brand-sub__keys-icon.material-symbols-outlined {
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 20px;
  color: var(--ace-ink-2);
}

/* ace-brand-sub__keys-label */
.ace-brand-sub__keys-label { font-family: var(--ace-font-mono); }

/* ace-brand-sub__keys-row — rows are wrapped in display:contents loop blocks,
   so they aren't DOM-adjacent; divide every row except the first via the card. */
.ace-brand-sub__keys .ace-brand-sub__keys-row { border-top: 1px solid var(--ace-rule); }
.ace-brand-sub__keys > .brxe-block:first-of-type .ace-brand-sub__keys-row,
.ace-brand-sub__keys .ace-brand-sub__keys-row:first-child { border-top: 0; }

/* Phones: the icon | label | value grid is too tight on one line, so stack it —
   icon on top, then label, then value — like the step-by-step cards. !important
   beats the Bricks global-class `28px 1fr 1.5fr`. */
@media (max-width: 560px) {
  .ace-brand-sub__keys-row,
  .brxe-block.ace-brand-sub__keys-row {
    grid-template-columns: 1fr !important;
    align-items: start;
    row-gap: 4px;
  }
  .ace-brand-sub__keys-label { color: var(--ace-muted); }
  .ace-brand-sub__keys-value { font-weight: 600; }
}

/* ace-brand-sub__logo-img */
%root%{object-fit:contain;display:block}

/* ace-brand-sub__tldr-eyebrow */
.ace-brand-sub__tldr-eyebrow { font-family: var(--ace-font-mono); }


/* === 4.20 GAME REVIEW (single casino_games) ==============================
   Component CSS for the "ACE · Game review" template. Layout/spacing come
   from global classes (structured settings) seeded in bin — here we keep only
   rules Bricks UI can't express: the demo modal overlay, the iframe aspect
   box, per-symbol swatch colour via a CSS var, the paytable value grid, the
   dark casino strip, related-card hover, and the {ace_has_field:*} empty-hide
   toggles that let the TOC auto-omit empty sections.
   ===================================================================== */

/* --- Hero badges: dynamic term pills (game_categories/providers/themes).
   Bricks doesn't emit _gap on the loop parent, so set it here. White pill,
   ink text. The "Released …" meta sits at the far right. --- */
.ace-game__badges { gap: 8px; }
.ace-game__badges .ace-game__badge {
  background: var(--ace-white);
  color: var(--ace-ink);
}
.ace-game__released { margin-left: auto; }

/* --- Hero byline: lime avatar (initials) + name/role · separator · tested.
   gap not emitted on the flex parent, so set it here. --- */
.ace-game__byline { gap: 16px; }
/* avatar + name/role row: gap not emitted on the flex parent, so the avatar
   would sit flush against the text — space them here. */
.ace-game__byline-person { gap: 10px; }
.ace-game__byline-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ace-lime);
  color: var(--ace-lime-ink);
  font-family: var(--ace-font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.ace-game__byline-link { color: inherit; text-decoration: none; }
.ace-game__byline-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.ace-game__byline-sep {
  width: 1px;
  align-self: stretch;
  min-height: 30px;
  background: var(--ace-rule);
}

/* --- Hero demo card (dark ink panel) ---------------------------------- */
.ace-game__demo-card {
  background: var(--ace-ink);
  border: 1.5px solid var(--ace-ink);
  border-radius: var(--ace-r-lg);
  overflow: hidden;
  box-shadow: var(--ace-shadow-md);
}
.ace-game__demo-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Decorative gradient panel (mockup) shown behind the title when a game has
     no featured image; an <img> covers it when present. */
  background: linear-gradient(150deg, var(--ace-ink) 0%, var(--ace-info) 55%, var(--ace-ink) 100%);
  color: var(--ace-white);
  text-align: center;
  padding: 22px 18px;
  overflow: hidden;
}
/* Faint reel-line texture over the gradient. */
.ace-game__demo-thumb::before {
  content: "";
  position: absolute;
  inset: 16px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 20%);
  opacity: 0.5;
  pointer-events: none;
}
.ace-game__demo-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.ace-game__demo-title,
.ace-game__demo-sub,
.ace-game__demo-pills { position: relative; z-index: 2; }
.ace-game__demo-pills {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ace-game__demo-pill {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ace-lime);
  background: color-mix(in srgb, var(--ace-lime) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--ace-lime) 40%, transparent);
  border-radius: 20px;
  padding: 4px 10px;
}

/* --- Demo card CTAs: lime primary + ghost-on-dark secondary. The theme's
   .bricks-button rule uses triple :not() (high specificity) — match it so our
   overrides win, and give both buttons a consistent size. --- */
.ace-game__demo-card .ace-game__demo-btn,
.ace-game__demo-card .ace-game__real-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ace-font-display);
  padding: 13px 16px;
  border-radius: var(--ace-r-md);
  cursor: pointer;
}
.ace-game__demo-card .ace-game__demo-btn.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline) {
  font-weight: 800;
  background-color: var(--ace-lime);
  color: var(--ace-lime-ink);
  border: 0;
}
.ace-game__demo-card .ace-game__real-btn.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline) {
  font-weight: 700;
  background-color: color-mix(in srgb, var(--ace-white) 8%, transparent);
  color: var(--ace-white);
  border: 1.5px solid color-mix(in srgb, var(--ace-white) 22%, transparent);
}
.ace-game__demo-card .ace-game__real-btn:hover {
  background-color: color-mix(in srgb, var(--ace-white) 16%, transparent);
  color: var(--ace-white);
}

/* --- Rating stars under the demo card (Material Symbols) — ink filled,
   light-grey empty, matching the mockup. --- */
/* Both children of the star line (the stars span + the "4.3 · Tested by …"
   text) are text-basic <div>s that inherit body line-height 1.55, so their
   content centred at different optical heights and the stars read slightly
   high. Collapse both boxes to line-height:1 and centre them so the glyphs and
   the text sit on the same optical line. */
.ace-game__star-line { line-height: 1; }
.ace-game__star-line > * {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.ace-game__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--ace-ink);
}
.ace-game__stars .ace-game__star {
  font-size: 18px;
  line-height: 1;
  font-variation-settings: 'FILL' 1;
}
.ace-game__stars .ace-game__star--empty {
  color: var(--ace-rule-2);
  font-variation-settings: 'FILL' 1;
}

/* --- Loop-container gaps: Bricks drops _gap on flex parents whose direct
   children are a query loop, so restore each here (metrics, bonus rows, card
   chips, filter rows). --- */
.ace-game__metrics { gap: 10px; }
.ace-game__bonus-row { gap: 12px; }
.ace-game__related-chips { gap: 6px; }
.ace-game__filter-row { gap: 8px; }
.ace-game__metric {
  flex: 1;
  min-width: 0;
  background: var(--ace-white);
  border: 1.5px solid var(--ace-rule);
  border-radius: var(--ace-r-md);
  padding: 14px 18px;
}
.ace-game__metric--accent {
  background: var(--ace-lime);
  border-color: var(--ace-lime-2);
}
.ace-game__metric--accent .ace-game__metric-label,
.ace-game__metric--accent .ace-game__metric-value,
.ace-game__metric--accent .ace-game__metric-sub {
  color: var(--ace-lime-ink);
}

/* Phones/tablets: three flex:1 tiles jam into one row on the tablet band
   (479–767px) — Bricks only sets flex-wrap at ≤478px — so a long value like
   "Med–High" plus a two-line sub ("Infrequent, big swings") balloons one tile
   and misaligns the row. Force an even 3-column grid, tighten the padding, and
   scale the value down so each tile holds its content without wrapping oddly.
   The `.brxe-div` guard beats the Bricks global-class flex rule. */
@media (max-width: 767px) {
  .ace-game__metrics,
  .brxe-div.ace-game__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex-wrap: initial;
  }
  .ace-game__metric { padding: 12px 12px; }
  .ace-game__metric-value { font-size: 19px; }
}

/* Narrow phones: three columns leave each tile too tight for the sub text
   ("Infrequent, big swings", "Industry avg 94.50%"), so stack them into one
   column — full-width, comfortably readable, value back to full size. */
@media (max-width: 600px) {
  .ace-game__metrics,
  .brxe-div.ace-game__metrics {
    grid-template-columns: 1fr;
  }
  .ace-game__metric { padding: 12px 16px; }
  .ace-game__metric-value { font-size: 22px; }
}

/* Game-specs key/value table (§ sidebar card). Desktop is a 1fr 1fr split, but
   on phones that squeezes the value column so long values wrap awkwardly
   ("Pragmatic Play (Reel Kingdom)", "Yes — HTML5, all devices"). Give the label
   only the width it needs and hand the rest to the value. `.brxe-div` guard
   beats the Bricks global-class grid template. */
@media (max-width: 600px) {
  .ace-game__kv-row,
  .brxe-div.ace-game__kv-row {
    grid-template-columns: minmax(84px, 40%) 1fr;
    column-gap: 12px;
    align-items: start;
  }
}

/* Casino strip rows (dark card): desktop is [logo/name 140px | bonus 1fr |
   note auto | CTA auto]; Bricks collapses it to `1fr auto` at ≤478px, which
   drops the note onto its own line and crowds the CTA. On phones make it a
   clean two-row layout — brand + bonus copy stacked on the left, the CTA on
   the right spanning both rows — and let the note sit under the bonus. */
@media (max-width: 600px) {
  .ace-game__strip-grid,
  .brxe-div.ace-game__strip-grid {
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
  }
  /* Brand cell (logo + name, wrapped in a text-basic div) and bonus copy stack
     in the left column. The brand is the row's first direct child. */
  .ace-game__strip-grid > :first-child { grid-column: 1; }
  .ace-game__strip-bonus { grid-column: 1; }
  .ace-game__strip-note  { grid-column: 1; }
  /* CTA pinned right, vertically centred across the stacked left column. */
  .ace-game__strip-cta {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    white-space: nowrap;
  }
}

/* --- Casino strip (dark ink card) ------------------------------------- */
.ace-game__strip {
  background: var(--ace-ink);
  border-radius: var(--ace-r-lg);
  padding: 18px;
}
.ace-game__strip-row {
  background: color-mix(in srgb, var(--ace-white) 8%, var(--ace-ink));
  border: 1px solid color-mix(in srgb, var(--ace-white) 12%, var(--ace-ink));
  border-radius: var(--ace-r-md);
  padding: 10px 14px;
}
.ace-game__strip-logo img {
  max-height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
}
/* Logo + casino name cell (identifiable on the dark strip). */
.ace-game__strip-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ace-game__strip-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.ace-game__strip-brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.ace-game__strip-brand-name {
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: var(--ace-fs-small);
  letter-spacing: -0.01em;
  color: var(--ace-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Symbols & paytable grid ------------------------------------------
   Header row and every symbol row share ONE column template so the 5×/4×/3×
   values line up in fixed columns (like a real slot paytable):

       [ symbol 40px ] [ name 1fr ] [ 5× ] [ 4× ] [ 3× ]

   Special symbols (wild/scatter/money) show a behaviour note spanning the
   three value columns instead of numbers. --- */
.ace-game__symbol-head,
.ace-game__symbol-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 3.4em 3.4em 3.4em;
  align-items: center;
  column-gap: 12px;
}
/* Header: uppercase mono labels + a heavy rule under it (the mockup's black
   divider). The "Symbol" label sits over the symbol + name columns. */
.ace-game__symbol-head {
  padding: 4px 0 8px;
  border-bottom: 2px solid var(--ace-ink);
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ace-muted);
}
.ace-game__symbol-head .ace-game__symhead-label {
  grid-column: 1 / 3;   /* span the symbol + name columns */
}
.ace-game__symbol-head > div:not(.ace-game__symhead-label) { text-align: right; }

/* Rows: thin rule between, no rule above the first (header owns the top). */
.ace-game__symbol-row {
  padding: 10px 0;
  border-top: 1px solid var(--ace-rule);
}
.ace-game__symbol-row:first-of-type { border-top: 0; }

/* Symbol cell: real artwork when present, else a coloured swatch fallback. */
.ace-game__symbol-cell {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.ace-game__symbol-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}
/* Swatch fallback: colour from a per-row CSS var, short label centred. */
.ace-game__symbol-swatch {
  width: 40px;
  height: 40px;
  border-radius: var(--ace-r-sm);
  border: 1px solid var(--ace-rule);
  background: var(--ace-swatch, var(--ace-paper-2));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ace-game__symbol-abbr {
  font-family: var(--ace-font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* difference blend keeps the label legible on any swatch colour (dark or
     light), since these swatches are just placeholders until real artwork. */
  color: #fff;
  mix-blend-mode: difference;
  line-height: 1;
  padding: 0 3px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Name cell. */
.ace-game__symbol-name { min-width: 0; }

/* Values wrapper: transparent on desktop so its three cells fall into the grid
   columns (5×/4×/3×); on mobile it becomes a single flex line (see media query). */
.ace-game__symbol-vals { display: contents; }

/* Value cells: mono, right-aligned, in their fixed columns. */
.ace-game__symbol-val {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-small);
  color: var(--ace-ink);
  text-align: right;
  white-space: nowrap;
}
.ace-game__symbol-val b { font-weight: 700; }
.ace-game__x { color: var(--ace-muted); margin-left: 1px; }

/* Special-symbol note: spans the three value columns, right-aligned. */
.ace-game__symbol-special {
  grid-column: 3 / 6;
  text-align: right;
}

/* Narrow screens: the fixed 5-column grid can't hold "200× 20× 5×" beside a
   name without overflowing, so each row becomes a flex layout —
   [ swatch ] [ name + values, wrapping ] — with the swatch on the left and the
   name/values flowing in the remaining space. The three value cells wrap onto
   their own line under the name; the special note does the same. The header
   collapses to just "SYMBOL" (the ×-columns no longer align on the left column,
   so per-column labels would mislead). */
@media (max-width: 560px) {
  .ace-game__symbol-head {
    display: block;
  }
  .ace-game__symbol-head > div:not(.ace-game__symhead-label) { display: none; }
  .ace-game__symbol-head .ace-game__symhead-label { display: block; }

  /* Row = grid: [ swatch ] [ content ], swatch spanning both content rows.
     Content column holds the name (row 1) and the values/special (row 2). */
  .ace-game__symbol-row {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 4px;
    align-items: center;
  }
  .ace-game__symbol-cell    { grid-row: 1 / span 2; align-self: center; }
  .ace-game__symbol-name    { grid-column: 2; grid-row: 1; }
  /* Values wrapper: a real flex line here (not display:contents) so the three
     ×-cells sit side by side under the name, left-aligned. */
  .ace-game__symbol-vals {
    display: flex;
    gap: 14px;
    grid-column: 2;
    grid-row: 2;
  }
  .ace-game__symbol-val { text-align: left; }
  /* Special note drops under the name too, left-aligned. */
  .ace-game__symbol-special {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: var(--ace-fs-meta);
  }
}

/* --- "More like this" native Query Filter pills ------------------------
   filter-radio (data-mode=button) emits: ul.ace-game__filter-pills > li >
   label > input[radio] + span.brx-option-text.bricks-button. The clickable
   pill is that span (it carries .bricks-button, i.e. the theme's default
   button style — we override it to the ACE pill look). Bricks adds
   .brx-option-active to the currently-selected option. --- */
.ace-game__filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ace-game__filter-pills li { margin: 0; padding: 0; list-style: none; }
.ace-game__filter-pills label { display: inline-flex; margin: 0; cursor: pointer; }
.ace-game__filter-pills input[type="radio"] { display: none; }
/* The pill itself — neutralise .bricks-button (whose theme-style rule uses
   triple :not() for high specificity), apply the ACE pill look. We match that
   specificity with our own :not() guards so the override wins. */
.ace-game__filter-pills .brx-option-text,
.ace-game__filter-pills .brx-option-text.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline) {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--ace-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ace-ink-2);
  background-color: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: 16px;
  padding: 3px 9px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ace-game__filter-pills .brx-option-text:hover { border-color: var(--ace-ink); }
/* Selected pill → ink (match specificity so it beats the lime button rule). */
.ace-game__filter-pills .brx-option-active .brx-option-text.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline),
.ace-game__filter-pills .brx-option-text.brx-option-active.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline) {
  background-color: var(--ace-ink);
  border-color: var(--ace-ink);
  color: var(--ace-paper);
}

/* --- Mobile filter <select> (native Bricks filter-select) -------------
   Each filter row carries BOTH a native filter-radio (pills) and a native
   filter-select (<select>), bound to the same related loop. On phones the pill
   list grows tall, so we swap: pills hide < 600px and the native <select>
   shows. Bricks drives the AJAX for both — no custom JS. The select is a plain
   <select class="brxe-filter-select ace-game__filter-select">; give it the ACE
   control look and hide it on desktop. --- */
.ace-game__filter-select {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  font-family: var(--ace-font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ace-ink);
  background-color: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: 10px;
  padding: 8px 34px 8px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Caret drawn inline (no external asset — CSP-safe). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E0F12' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.ace-game__filter-select:focus-visible {
  outline: none;
  border-color: var(--ace-ink);
}

@media (max-width: 600px) {
  .ace-game__filter-pills { display: none; }
  .ace-game__filter-select { display: inline-block; }
  /* Label + select on one comfortable row. */
  .ace-game__filter-row {
    align-items: center;
    gap: 10px;
  }
}

/* --- Related grid card hover ------------------------------------------ */
.ace-game__related-card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ace-game__related-card:hover {
  border-color: var(--ace-ink);
  box-shadow: var(--ace-shadow-sm);
  transform: translateY(-2px);
}
.ace-game__related-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--ace-r-sm);
  overflow: hidden;
  margin-bottom: 4px;
  /* Gradient panel behind the overlaid title when there's no featured image. */
  background: linear-gradient(135deg, var(--ace-ink) 0%, var(--ace-info) 100%);
}
.ace-game__related-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Title overlaid on the gradient (mockup). Hidden when a featured image
   covers the panel (the img sits above it via z-index). */
.ace-game__related-thumb-title {
  position: relative;
  z-index: 0;
  padding: 0 8px;
  text-align: center;
  font-family: var(--ace-font-display);
  font-weight: 900;
  font-size: var(--ace-fs-meta);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--ace-white) 55%, transparent);
}
.ace-game__related-thumb img + .ace-game__related-thumb-title { display: none; }

/* --- Empty-hide toggles: DD prints "is-empty" into _cssClasses when the
   backing field is empty; the section (and thus its data-toc entry) collapses
   so the TOC auto-omits it. Never uses _conditions (loop-safe). ---------- */
.ace-game__section.is-empty,
.ace-game__block.is-empty { display: none !important; }

/* --- Demo iframe modal (only genuinely-custom interactive piece) ------- */
body.ace-game__demo-open { overflow: hidden; }
.ace-game__demo-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: color-mix(in srgb, var(--ace-ink) 82%, transparent);
}
.ace-game__demo-modal[hidden] { display: none; }
.ace-game__demo-dialog {
  width: min(960px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--ace-ink);
  border-radius: var(--ace-r-lg);
  overflow: hidden;
  box-shadow: var(--ace-shadow-md);
}
.ace-game__demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: var(--ace-white);
}
.ace-game__demo-title {
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: var(--ace-fs-body);
}
.ace-game__demo-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--ace-r-sm);
  cursor: pointer;
  color: var(--ace-white);
  background: color-mix(in srgb, var(--ace-white) 10%, transparent);
}
.ace-game__demo-close:hover {
  background: color-mix(in srgb, var(--ace-white) 20%, transparent);
}
.ace-game__demo-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.ace-game__demo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================================
   5. LAYOUT  /  layout primitives beyond UI native (loop layouts mostly)
   ========================================================================= */


/* =========================================================================
   6. LOOP HELPERS  /  unwrap Bricks loop wrappers for grid/flex layouts
   ========================================================================= */
/* When a Bricks query loop sits inside a grid/flex parent, the .brxe-block
   wrapper around each iteration breaks the layout. Use display: contents
   to make those wrappers transparent. */


/* =========================================================================
   7. PSEUDO  /  :hover, :focus, :nth-child, :first-of-type, :last-of-type
   ========================================================================= */


/* === Pros/cons per-item mark (+/−) — coloured prefix span inside list items === */
.ace-brand__list,
.ace-brand__list.brxe-block {
  gap: 12px;
}
.ace-brand__list-item .ace-mark--ok,
.ace-brand__list-item .ace-mark--bad {
  font-family: var(--ace-font-display);
  font-weight: 800;
  display: inline-block;
  margin-right: 6px;
  width: 14px;
  text-align: center;
}
.ace-brand__list-item .ace-mark--ok  { color: var(--ace-lime); }
.ace-brand__list-item .ace-mark--bad { color: var(--ace-red); }

/* Pros/cons items on mobile: hanging indent so wrapped lines sit under the
   TEXT, never under the +/− mark. Flex makes the mark a fixed first item held
   to the first line (align-items:flex-start) while the text — a bare node that
   becomes an anonymous flex item — wraps in its own column. */
@media (max-width: 560px) {
  .ace-brand__list-item,
  .ace-brand__list-item.brxe-text-basic {
    display: flex;
    align-items: flex-start;
    gap: 0;
  }
  .ace-brand__list-item .ace-mark--ok,
  .ace-brand__list-item .ace-mark--bad {
    flex: 0 0 auto;
    line-height: 1.55; /* match the text so the mark aligns with the first line */
  }
}

/* === Sidebar quick-links card — full-width divider under the eyebrow === */
.ace-brand__sidebar-card.ace-brand__sidebar-card--flush {
  padding: 0;
  overflow: hidden;
}
.ace-brand__sidebar-card.ace-brand__sidebar-card--flush > .ace-brand__sidebar-eyebrow {
  width: 100%;
  padding: 14px 16px 10px 16px;
  margin: 0;
  border-bottom: 1px solid var(--ace-rule);
}
.ace-brand__sidebar-card.ace-brand__sidebar-card--flush > .ace-brand__sidebar-nav {
  width: 100%;
  padding: 0;
}
/* Wrapper rendered by the {ace_toc} DD tag — must span full nav width
   so the per-item border-bottom reaches the card edges. */
.ace-brand__sidebar-nav-toc {
  width: 100%;
  display: block;
}
/* Each item draws its own full-width border-bottom; padding lives INSIDE
   the item so the border extends edge-to-edge across the card. The nav is a
   flex column, so stretch each item to the full card width — otherwise the
   border only spans the text and stops mid-card. */
.ace-brand__sidebar-card--flush .ace-brand__sidebar-nav .ace-brand__sidebar-nav-item {
  display: block;
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  padding: 10px 16px;
  border-top: 0;
  border-bottom: 1px solid var(--ace-rule);
  margin: 0;
}
/* Drop the trailing border on the visually-last item (last item of its
   parent — works whether items are direct children of .sidebar-nav or
   wrapped by a TOC renderer div). */
.ace-brand__sidebar-card--flush .ace-brand__sidebar-nav-item:last-child {
  border-bottom: 0;
}

/* === Sidebar "How we test" list — Material Symbols icon prefix === */
/* Rows are now an ACF `how_we_test` query loop: each `.brxe-block` row holds a
   check icon + label text-basic. The query trail is an empty flex child — hide it. */
.ace-brand__sidebar-howto-list li,
.ace-brand__sidebar-howto-list > *:not(.brx-query-trail) {
  padding-left: 0;
  display: flex;
  flex-direction: row; /* .brxe-block defaults to column — force row so icon + label sit inline */
  align-items: flex-start;
  gap: 8px;
}
.ace-brand__sidebar-howto-list > .brx-query-trail {
  display: none;
}
.ace-brand__sidebar-howto-list li::before {
  content: none;
}
.ace-brand__sidebar-howto-list .material-symbols-outlined {
  font-size: 18px;
  line-height: 1.4;
  color: var(--ace-lime-2);
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  flex-shrink: 0;
}


/* === Compare CTA — Review (outline) variant ============================== */
.ace-brand__compare-cta--review,
.ace-brand__compare-cta--review.brxe-text-basic {
  background: transparent;
  color: var(--ace-ink) !important;
  border: 1px solid var(--ace-rule);
}
.ace-brand__compare-cta--review:hover {
  background: var(--ace-paper-2);
  border-color: var(--ace-ink);
}

/* === Games & software section ============================================ */
.ace-brand__games-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.ace-brand__games-stat {
  background: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: var(--ace-r-md);
  padding: 14px;
}
.ace-brand__games-stat-num {
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-h2);
  letter-spacing: -0.02em;
  color: var(--ace-ink);
  display: block;
}
.ace-brand__games-stat-label {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  color: var(--ace-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
  display: block;
}
@media (max-width: 720px) {
  .ace-brand__games-stats { grid-template-columns: 1fr 1fr; }
}

/* === Compare alternatives — mini-card grid =============================== */
.ace-brand__alt-section {
  padding: 36px 0;
  margin-top: 24px;
}
.ace-brand__alt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}
/* Collapse the per-iteration loop block so each card is a direct grid child
   and stretches to the tallest row height (equal-height cards). */
.ace-brand__alt-grid > .brxe-block:not(.brx-query-trail) {
  display: contents;
}
.ace-brand__alt-grid > .brx-query-trail {
  display: none;
}
.ace-brand__alt-card,
.ace-brand__alt-card.brxe-block {
  background: var(--ace-white);
  border: 1px solid var(--ace-rule);
  border-radius: var(--ace-r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  position: relative;
}
.ace-brand__alt-card:hover {
  border-color: var(--ace-ink);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
/* Header row: logo on the left, score badge top-right */
.ace-brand__alt-card .ace-brand__alt-logo {
  width: 56px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.ace-brand__alt-score {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-h3);
  line-height: 1;
  color: var(--ace-ink);
  background: var(--ace-paper-2);
  padding: 6px 10px;
  border-radius: var(--ace-r-sm);
  border-bottom: 0;
}
.ace-brand__alt-name {
  font-family: var(--ace-font-display);
  font-weight: 700;
  font-size: var(--ace-fs-body);
  line-height: 1.25;
  color: var(--ace-ink);
  margin: 0;
}
.ace-brand__alt-headline {
  font-size: 12.5px;
  color: var(--ace-muted);
  line-height: 1.45;
  margin: 0;
  border-bottom: 0;
}
/* Meta row holds the CTA, pushed to the card bottom. The top rule spans the
   full inner width of the card (respecting the card's own 20px padding), so it
   stops at the padded edges — not the raw card edge. align-self:stretch makes
   the row take the card's full inner width so the border isn't content-short. */
.ace-brand__alt-meta {
  align-self: stretch;
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ace-rule);
}
.ace-brand__alt-cta,
.ace-brand__alt-cta.brxe-text-basic {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ace-ink);
  border-bottom: 0;
  padding: 0;
}
.ace-brand__alt-card:hover .ace-brand__alt-cta {
  color: var(--ace-lime-ink);
}
@media (max-width: 960px) {
  .ace-brand__alt-grid { grid-template-columns: 1fr 1fr; }
}
/* Phones: one full-width card per row with clear vertical spacing between
   cards. The grid lives inside .ace-brand__alt-section which is a row flexbox,
   so the grid (a flex item) shrinks to its content width (~257px) instead of
   filling the section — force it to 100% so the single column is full-width. */
@media (max-width: 640px) {
  .ace-brand__alt-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
  }
  .ace-brand__alt-card,
  .ace-brand__alt-card.brxe-block {
    width: 100%;
    margin: 0;
  }
}

/* =========================================================================
   8. RESPONSIVE  /  utility overrides at breakpoints
   ========================================================================= */
@media (max-width: 991px) {
  /* tablet portrait */
}

@media (max-width: 767px) {
  /* mobile landscape */
}

@media (max-width: 478px) {
  /* mobile portrait */
}

/* === Compare table — Claim vs Review CTA via CSS hide instead of conditions ===
   The row gets .is-current via {ace_is_current_brand} on _cssClasses.
   Hide each CTA based on whether the row has that marker. */
.ace-brand__compare-row:not(.is-current) .ace-brand__compare-cta--claim { display: none; }
.ace-brand__compare-row.is-current     .ace-brand__compare-cta--review { display: none; }

/* =========================================================================
   4.20  CASINO CATEGORY / LISTICLE  (template: ACE · Casino category, /au/casino/)
   Structured styling lives in the ace-cat__* global classes (Bricks UI).
   This block only holds what those can't express: pseudo-states, first-child
   border suppression, sticky sidebar, and material-symbol sizing.
   ========================================================================= */

/* Material Symbols used as inline icons in this template render at their box size */
.ace-cat__method-icon .material-symbols-outlined,
.ace-cat__niche-icon .material-symbols-outlined { font-size: 18px; line-height: 1; }

/* Hero badge background style (white|paper|black|lime) — SAME palette/design as
   the homepage hero badges (§4.11a). The `bg` select maps to a --bg-* modifier
   applied dynamically via {ace_listicle_row:badge_class}. Defined here (not as
   Bricks global classes) because Bricks only emits a global class's CSS when it
   is referenced literally — a dynamically-added class gets the name but not the
   rule. Double-class beats the base .ace-cat__badge (which ships lime). The
   base pill has no border of its own here, so each variant sets one. */
.ace-cat__badge.ace-cat__badge--bg-white {
	background-color: var(--ace-white);
	border: 1px solid var(--ace-rule-2);   /* darker grey so it reads on white/paper */
	color: var(--ace-ink);
}
.ace-cat__badge.ace-cat__badge--bg-paper {
	background-color: var(--ace-paper-2);
	border: 1px solid var(--ace-rule);
	color: var(--ace-ink);
}
.ace-cat__badge.ace-cat__badge--bg-black {
	background-color: var(--ace-ink);
	border: 1px solid var(--ace-ink);
	color: var(--ace-lime);
}
.ace-cat__badge.ace-cat__badge--bg-lime {
	background-color: var(--ace-lime);
	border: 1px solid var(--ace-lime);
	color: var(--ace-ink);
}

/* Hover affordances (interactive cards / chips / links) */
.ace-cat__niche:hover       { border-color: var(--ace-rule-2); box-shadow: var(--ace-shadow-sm); }
.ace-cat__method-link:hover { color: var(--ace-ink-2); }

/* "Jump to" nav: match the brand-review "On this page" sidebar nav exactly
   (.ace-brand__sidebar-card--flush). The jump card (.ace-cat__jump-card) gets a
   flush header + edge-to-edge item rows instead of the padded/indented default. */

/* Flush the card padding so header + rows reach the card edges.
   ace-cat__aside-card emits longhand padding-*; override each explicitly. */
.ace-cat__jump-card.ace-cat__aside-card {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  overflow: hidden;
}
.ace-cat__jump-card > .ace-cat__aside-eyebrow {
  width: 100%;
  padding: 14px 16px 10px 16px;
  margin: 0;
  border-bottom: 1px solid var(--ace-rule);
}
.ace-cat__jump-card > .ace-cat__jump-list {
  width: 100%;
  padding: 0;
  row-gap: 0;
  align-items: stretch;
}
/* Each item is a full-width row with an edge-to-edge bottom divider; padding
   lives INSIDE the item so the border spans the whole card. */
.ace-cat__jump-card .ace-cat__jump-item {
  display: block;
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  font-family: var(--ace-font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ace-muted) !important;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--ace-rule);
  margin: 0;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ace-cat__jump-card .ace-cat__jump-item:last-child { border-bottom: 0; }
.ace-cat__jump-item:hover {
  color: var(--ace-ink) !important;
  background: var(--ace-paper-2);
}

/* FAQ uses the shared native accordion (.ace-brand__faq-container) — no bespoke
   ace-cat FAQ CSS needed; it inherits the site-wide FAQ styling. */

/* Active "jump to" marker — accent the current section like the brand sidebar. */
.ace-cat__jump-item.is-current {
  color: var(--ace-ink) !important;
  font-weight: 600;
}

/* Sticky sidebar on desktop/tablet (matches brand-review sidebar behaviour) */
@media (min-width: 992px) {
  .ace-cat__aside { position: sticky; top: 88px; align-self: start; }
}

/* Ranking tabs (tabs-nested): pseudo-states Bricks structured settings can't emit.
   The chips ARE the tab titles; the active tab is .tab-title.brx-open. */
.ace-cat__tab-title { cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
.ace-cat__tab-title:hover { border-color: var(--ace-ink); }
.ace-cat__tab-title.brx-open {
  background-color: var(--ace-ink);
  border-color: var(--ace-ink);
}
.ace-cat__tab-title.brx-open .ace-cat__tab-title-txt { color: var(--ace-lime); }

/* Tab menu: allow horizontal scroll on small screens rather than wrapping tall. */
@media (max-width: 478px) {
  .ace-cat__tab-menu { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ace-cat__tab-menu > .tab-title { flex: 0 0 auto; }
}

/* =====================================================================
   GUIDE / HOW-TO TEMPLATE  (bricks_template "ACE · Informational guide")
   ---------------------------------------------------------------------
   Fixes for things Bricks won't emit from structured class settings:
   - flex `_gap` is dropped on display:flex classes (only grid-gap emits)
   - the sidebar TOC links are raw HTML from {ace_guide_toc}, so their
     global class CSS is never bundled — define it here.
   Layout/colour for everything else lives on the ace-guide__* global
   classes (Class Manager). ==================================================*/

/* --- flex gaps that Bricks silently drops --- */
.ace-guide__kicker-row { gap: 8px; }
.ace-guide__byline { gap: 14px; }
.ace-guide__byline-person { gap: 10px; }
.ace-guide__tldr-list { gap: 9px; }
.ace-guide__tldr-item { gap: 10px; }
.ace-guide__step-body { gap: 14px; }
.ace-guide__share-row { gap: 6px; }
/* Share buttons are real links; the copy-link one flashes a "Copied!" toast
   (label carried in data-ace-share-toast, set by inc/guide-share.js). */
.ace-guide__share-btn { position: relative; }
.ace-guide__share-btn[data-ace-share-toast]::after {
  content: attr(data-ace-share-toast);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ace-ink);
  color: var(--ace-paper);
  font-size: var(--ace-fs-meta);
  line-height: 1;
  padding: 5px 8px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 5;
}
.ace-guide__related-card { gap: 12px; }
.ace-guide__related-icon { gap: 0; }

/* --- sidebar TOC (raw-HTML links) — identical to the brand "On this page"
   flush card (.ace-brand__sidebar-card--flush): header with a bottom border,
   then full-width rows whose dividers reach the card edges. --- */
.ace-guide__sidebar-card { overflow: hidden; }
.ace-guide__sidebar-card > .ace-guide__sidebar-eyebrow {
  width: 100%;
  padding: 14px 16px 10px 16px;
  margin: 0;
  border-bottom: 1px solid var(--ace-rule);
}
.ace-guide__sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.ace-guide__sidebar-card .ace-guide__sidebar-nav-item {
  display: block;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--ace-rule);
  margin: 0;
  font-family: var(--ace-font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ace-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ace-guide__sidebar-card .ace-guide__sidebar-nav-item:last-child { border-bottom: 0; }
.ace-guide__sidebar-nav-item:hover,
.ace-guide__sidebar-nav-item.is-current {
  color: var(--ace-ink);
  font-weight: 600;
  background: var(--ace-paper-2);
}

/* --- byline: keep each labelled group stacked, not strung inline --- */
.ace-guide__byline > div { display: flex; flex-direction: column; }
.ace-guide__byline-person { flex-direction: row; align-items: center; }
.ace-guide__byline-role { margin-bottom: 1px; }

/* --- sticky sidebar offset below the fixed header on desktop --- */
@media (min-width: 992px) {
  .ace-guide__sidebar { top: 88px; align-self: start; }
}

/* --- responsive: single column, hide sidebar + step screenshots --- */
@media (max-width: 991px) {
  .ace-guide__layout { grid-template-columns: 1fr; }
  .ace-guide__sidebar { display: none; }
  .ace-guide__step { grid-template-columns: 1fr; }
  .ace-guide__step-shot { display: none; }
  .ace-guide__related-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   HOME — hero search bar (native Bricks `search` widget)
   .ace-home__search (global class) styles the widget _root: white pill with
   ink border, radius, shadow. The widget's internal <form>/<input>/<button>
   markup can't be reached from Bricks UI, so its layout + chrome live here:
   form is a flex row, the input grows to fill, the lime submit button sits
   flush at the end. Enter + click both submit GET ?s=… to /au/ natively. ===*/
.ace-home__search .bricks-search-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 6px;
  width: 100%;
  margin: 0;
}
.ace-home__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: auto;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 8px 4px 8px 12px;
  font-family: var(--ace-font-body, inherit);
  font-size: var(--ace-fs-body);
  color: var(--ace-ink);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.ace-home__search input[type="search"]::placeholder {
  color: var(--ace-muted);
  opacity: 1;
}
/* Drop the native WebKit clear/cancel "x" so the field reads clean */
.ace-home__search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.ace-home__search button[type="submit"] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 6px;
  padding: 10px 18px;
  border: 1.5px solid var(--ace-lime);
  border-radius: 10px;
  background: var(--ace-lime);
  color: var(--ace-lime-ink);
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-small);
  letter-spacing: -0.005em;
  cursor: pointer;
}
.ace-home__search button[type="submit"]:hover {
  background: var(--ace-lime-2, var(--ace-lime));
  border-color: var(--ace-lime-2, var(--ace-lime));
}

/* === 4.11a HOMEPAGE · HERO BADGE BACKGROUND ACCENT ===
   Hero badges loop from the homepage_hero_badges repeater; each row's `bg` select
   (white|black|lime) maps to a --bg-* modifier via {ace_home_row:badge_class}.
   Rules MUST be double-class (0,2,0) to beat the base .ace-home__badge: Bricks
   emits the base global-class CSS AFTER ace.css in source order, so a single-class
   override would lose the tie. Defined here (not as Bricks global classes) because
   a dynamically-added class never gets its global-class CSS emitted. */
.ace-home__badge.ace-home__badge--bg-white {
	background-color: var(--ace-white);
	border-color: var(--ace-rule-2);   /* darker grey so it reads on a white/paper bg */
	color: var(--ace-ink);
}
.ace-home__badge.ace-home__badge--bg-paper {
	background-color: var(--ace-paper-2);
	border-color: var(--ace-rule);
	color: var(--ace-ink);
}
.ace-home__badge.ace-home__badge--bg-black {
	background-color: var(--ace-ink);
	border-color: var(--ace-ink);
	color: var(--ace-lime);
}
.ace-home__badge.ace-home__badge--bg-lime {
	background-color: var(--ace-lime);
	border-color: var(--ace-lime);
	color: var(--ace-ink);
}

/* === 4.11a2 HOMEPAGE · FEATURED BONUS RIBBON ===
   Ribbon "Badge style" (white|black|lime) uses the SAME palette as the hero
   badges (§4.11a), applied dynamically via {ace_home_row:ribbon_class}. Defined
   here because Bricks only emits a global class's CSS when referenced literally —
   a dynamically-added class gets the name but not the rule. Double-class beats
   the base .ace-home__bonus-ribbon. */
/* Give the ribbon the same bordered pill treatment as the hero badges (the
   global class ships with no border). */
.ace-home__bonus-ribbon { border: 1px solid var(--ace-rule); }

.ace-home__bonus-ribbon.ace-home__bonus-ribbon--bg-white {
	background-color: var(--ace-white);
	border-color: var(--ace-rule-2);   /* darker grey so it reads on white/paper */
	color: var(--ace-ink);
}
.ace-home__bonus-ribbon.ace-home__bonus-ribbon--bg-paper {
	background-color: var(--ace-paper-2);
	border-color: var(--ace-rule);
	color: var(--ace-ink);
}
.ace-home__bonus-ribbon.ace-home__bonus-ribbon--bg-black {
	background-color: var(--ace-ink);
	border-color: var(--ace-ink);
	color: var(--ace-lime);
}
.ace-home__bonus-ribbon.ace-home__bonus-ribbon--bg-lime {
	background-color: var(--ace-lime);
	border-color: var(--ace-lime);
	color: var(--ace-ink);
}

/* === 4.11b HOMEPAGE · FEATURED ARTICLE CARD ===
   "Latest articles & guides" cards are one uniform size (.ace-home__art-card).
   A post flagged `featured_on_homepage` gets this modifier only: dark (ink) card,
   lime kicker, white title, muted excerpt/meta. Same box, different skin.
   Defined here (not as a Bricks global class) because the modifier is applied
   dynamically per loop row via {ace_home_row:card_class}, and Bricks only emits
   a global class's CSS when it is referenced literally in an element's list. */
.ace-home__art-card.ace-home__art-card--featured {
  background: var(--ace-ink);
  border-color: var(--ace-ink);
  color: var(--ace-paper);
}
/* Kicker chip → lime; force it even over the --muted tag variant. */
.ace-home__art-card--featured .ace-home__art-tag,
.ace-home__art-card--featured .ace-home__art-tag--muted { color: var(--ace-lime); }
.ace-home__art-card--featured .ace-home__art-card-title { color: var(--ace-paper); }
.ace-home__art-card--featured .ace-home__art-card-meta,
.ace-home__art-card--featured .ace-home__art-card-excerpt { color: var(--ace-muted-2, var(--ace-muted)); }

/* === 4.12 CASINO VISITOR VOTE === */
/* Clickable star rating injected by assets/js/casino-vote.js into the
   [data-ace-vote] container on the brand parent template (tpl 455).
   Replaces the read-only editorial star element + "47-point audit" line. */
.ace-vote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 2px;
}
/* Stars + inline N/5 average share one row; the count sits on its own line. */
.ace-vote__row {
  display: inline-flex;
  align-items: center;
  column-gap: 8px;
}
.ace-vote__stars {
  display: inline-flex;
  column-gap: 2px;
  line-height: 1;
}
/* "N/5 - N votes" average + count, inline beside the stars. */
.ace-vote__score {
  font-family: var(--ace-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--ace-lime);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ace-vote__score:empty { display: none; }
.ace-vote__star {
  font-size: 20px;
  /* Empty stars use the same light grey as the score-card subtitle
     (.ace-brand__score-audit / __score-max) so they read on the dark hero card
     instead of the near-black --ace-ink-3. */
  color: var(--ace-muted-2);
  /* Material Symbols fill axis: 0 = outline (empty). */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  transition: color .12s ease, transform .12s ease;
  user-select: none;
}
.ace-vote__star.is-filled {
  color: var(--ace-lime);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Interactive (not yet voted): pointer + slight pop on hover. */
.ace-vote.is-interactive .ace-vote__star {
  cursor: pointer;
}
.ace-vote.is-interactive .ace-vote__star:hover {
  transform: scale(1.12);
}
/* Locked after voting. */
.ace-vote.is-voted .ace-vote__star {
  cursor: default;
}
.ace-vote__label {
  font-size: var(--ace-fs-meta);
  color: var(--ace-slate-500);
  font-family: var(--ace-font-display);
  letter-spacing: -0.005em;
}
.ace-vote.is-voted .ace-vote__label {
  color: var(--ace-lime);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* === 4.x CASINO CATEGORY — editorial prose (Post Content) ===================
   The "The full breakdown" prose used to be Bricks elements on template 718.
   It now lives in the Casino page content (post 174) rendered by a Post Content
   element. These rules mirror the former Bricks global classes 1:1
   (ace-cat__prose / __spotlight / __spotlight-eyebrow / __spotlight-title /
   __spotlight-text) so the look is unchanged. Kept here — not in Bricks UI —
   because the Post Content markup is raw HTML, not Bricks elements. */
.ace-cat__prose {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ace-ink-2);
}
.ace-cat__prose > p { margin: 0; }
.ace-cat__prose strong { color: var(--ace-ink); font-weight: 700; }
.ace-cat__prose a { color: var(--ace-lime-2); text-decoration: none; }
.ace-cat__prose a:hover { text-decoration: underline; }

.ace-cat__spotlight {
  background: var(--ace-paper-2);
  border: 1px solid var(--ace-rule);
  border-radius: 12px;
  padding: 18px;
}
.ace-cat__spotlight-eyebrow {
  font-family: var(--ace-font-mono);
  font-size: var(--ace-fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ace-lime-2);
  margin: 0 0 4px;
}
.ace-cat__spotlight-title {
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ace-ink);
  margin: 0 0 6px;
}
.ace-cat__spotlight-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ace-muted);
  margin: 0;
}

/* === 4.x BONUSES HUB — featured card ======================================
   The hub card's --featured modifier is applied dynamically per-row via the
   {ace_bonus_card_class} DD tag, so Bricks can't emit its global-class CSS
   (the class is never statically assigned to an element). These rules live
   here instead. Base card styling stays in the ace-bonuses__card global class.
   Featured = the same paper card promoted to full-width with a lime left rail
   so it reads as the lead pick without going dark (a dark fill made the loop
   text unreadable and broke the flex row inside the loop wrappers).
   ------------------------------------------------------------------------- */
.ace-bonuses__card--featured {
  grid-column: 1 / -1;
  border-left-width: 4px;
  border-left-color: var(--ace-lime);
}
.ace-bonuses__card--featured .ace-bonuses__card-title {
  font-size: var(--ace-fs-h2);
}

/* === BONUS single — HERO BADGE BACKGROUND ================================
   Hero badges loop from the bonus_hero_badges repeater; each row's `bg` select
   (white|paper|black|lime) maps to a --bg-* modifier via {ace_bonus_row:badge_class}.
   SAME palette/design as the homepage & casino hero badges. Defined here (not as
   Bricks global classes) because a dynamically-added class never gets its
   global-class CSS emitted. Double-class beats the base .ace-bonus__badge. */
.ace-bonus__badge.ace-bonus__badge--bg-white {
	background-color: var(--ace-white);
	border: 1px solid var(--ace-rule-2);
	color: var(--ace-ink);
}
.ace-bonus__badge.ace-bonus__badge--bg-paper {
	background-color: var(--ace-paper-2);
	border: 1px solid var(--ace-rule);
	color: var(--ace-ink);
}
.ace-bonus__badge.ace-bonus__badge--bg-black {
	background-color: var(--ace-ink);
	border: 1px solid var(--ace-ink);
	color: var(--ace-lime);
}
.ace-bonus__badge.ace-bonus__badge--bg-lime {
	background-color: var(--ace-lime);
	border: 1px solid var(--ace-lime);
	color: var(--ace-ink);
}

/* === BONUS single — Editorial prose headings ==============================
   The Editorial section title ("What to check before you claim") moved from
   the Bricks head into each bonus post body, so it renders as an <h2> inside
   the post-content widget (.ace-bonus__prose). Style it to match the former
   ace-bonus__section-title so the section reads unchanged.
   ------------------------------------------------------------------------- */
.ace-bonus__prose h2 {
  font-family: var(--ace-font-display);
  font-weight: 800;
  font-size: var(--ace-fs-section);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ace-ink);
  margin: 0 0 14px;
}
.ace-bonus__prose > h2:first-child {
  margin-top: 0;
}


/* === 4.x AUTHOR / TEAM PROFILE (/au/team/{slug}/) =========================
   Backend: inc/author-page.php · template: "ACE · Author profile" (#2526).
   Only rules Bricks UI can't express live here (img cover-crop, card hover,
   link resets). Everything else is on the ace-author__* global classes.
   ------------------------------------------------------------------------- */

/* Avatar headshot: cover-crop into the round frame (object-fit isn't a
   reliable Bricks native control on an <img> emitted by a DD tag). */
.ace-author__avatar-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

/* Card is an <a>: strip the default link underline/colour so the inner
   typography classes win, and lift on hover to match other ACE card grids. */
.ace-author__card {
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ace-author__card:hover {
  box-shadow: var(--ace-shadow-md);
  transform: translateY(-2px);
}
.ace-author__card:hover .ace-author__card-cta {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Empty-state hiding. Bricks element _conditions don't receive our custom DD
   tags (memory: feedback_bricks_conditions_dd_gotcha), so the template emits
   these modifier classes via {ace_author:*_empty_class} in _cssClasses when a
   section/stat has no content. Toggle them off here. */
.ace-author__section--empty,
.ace-author__stat--empty {
  display: none;
}

/* Bricks drops flex `gap` on display:flex global classes (only grid-gap is
   emitted). Restore the gaps the hero + stat pills rely on. */
.ace-author__hero-inner {
  gap: 24px 28px;
}
.ace-author__id {
  gap: 10px;
}
.ace-author__stats {
  gap: 10px;
}
.ace-author__stat {
  gap: 6px;
}
.ace-author__section-head {
  gap: 10px;
}
.ace-author__card {
  gap: 10px;
}
.ace-author__card-meta-row {
  gap: 8px;
}


/* =========================================================================
   PAYMENTS ARCHIVE  (/au/payments/)  — compact term cards, 5-up.
   Each card carries a per-family accent modifier (ace-payments__card--crypto
   | --card | --wallet | --bank | --mobile) set by the {ace_payment_term_accent}
   DD tag. --pm-accent drives the icon colour, the accent top-bar and the tinted
   card background so the grid reads as coloured (not just beige). Layout that
   CAN live in Bricks UI is on the cpya* global classes.
   ========================================================================= */

/* Per-family accent. Icon sits in a soft tinted round pill; card stays clean
   white. Colour comes from the pill + icon, not a full-card tint. */
.ace-payments__card--crypto { --pm-accent: #E2A33C; --pm-soft: #FBF1E1; }
.ace-payments__card--card   { --pm-accent: #2A6FDB; --pm-soft: #E7EEFB; }
.ace-payments__card--wallet { --pm-accent: #1F8A5B; --pm-soft: #E3F3EC; }
.ace-payments__card--bank   { --pm-accent: #5B5F69; --pm-soft: #EEEFF1; }
.ace-payments__card--mobile { --pm-accent: #6A7A00; --pm-soft: #F0F5D8; }

.ace-payments__card {
  --pm-accent: var(--ace-ink);
  --pm-soft: var(--ace-paper-2);
  background: var(--ace-white);
}
/* Bricks blocks/text-basic aren't full-width by default; the card is a flex
   column, so stretch its direct children edge-to-edge (needed for the footer
   bar + top rule to span the whole card). Force the card's own padding to 0 so
   the footer bleeds to the card edges — the header row owns the body padding. */
.ace-payments__card {
  padding: 0;
}
.ace-payments__card > * {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.ace-payments__card:hover {
  transform: translateY(-2px);
  border-color: var(--pm-accent);
  box-shadow: 0 8px 20px rgba(14, 15, 18, .08);
}

/* Bare icon — no pill/background, glyph in the family accent colour. */
.ace-payments__card-icon .material-symbols-outlined {
  font-size: 26px;
  line-height: 1;
  color: var(--pm-accent);
}

/* Footer link: full-width tinted bar with a top rule, text right-aligned. The
   card has zero padding (the header row owns the body padding), so the footer
   spans edge-to-edge with just its own padding — no negative margins, so the
   card's overflow:hidden clips it cleanly into the rounded bottom corners.
   Default: paper tint. Hover: ink (black) bar with paper text — no grey, keeps
   to the style guide palette. */
.ace-payments__card-cta {
  justify-content: flex-end;
  padding: 7px 14px 8px;
  background: var(--ace-paper);
  border-top: 1px solid var(--ace-rule);
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.ace-payments__card:hover .ace-payments__card-cta {
  color: var(--ace-paper);
  background: var(--ace-ink);
  border-top-color: var(--ace-ink);
}
.ace-payments__card-cta-arrow {
  font-size: 16px;
  line-height: 1;
  transition: transform .18s ease;
}
.ace-payments__card:hover .ace-payments__card-cta-arrow {
  transform: translateX(3px);
}