/**
 * Riverbank SDK Styles
 *
 * These styles are required for blocks to render correctly.
 * Import this in your app's global CSS file:
 *
 * @import "@riverbankcms/sdk/styles.css";
 *
 * The RB utilities are wrapped in "@layer rb-utilities" so SDK sites can
 * easily override them with their own CSS.
 */

/**
 * Riverbank Blocks Theme CSS (bundled)
 *
 * Auto-generated during build. Do not edit directly.
 * Source: packages/theme-core/src/
 */

/*
 * Blocks Theme CSS
 *
 * Import order matters for CSS cascade.
 * SDK bundler (packages/sdk/tsup.config.ts) parses this file to determine bundle order.
 *
 * Layer order: rb-theme (lowest priority) < rb-utilities (highest priority)
 * This allows utility classes like .rb-text-sm to override theme defaults.
 *
 * 1. Layer order declaration
 * 2. RB utilities (@layer rb-utilities) - highest priority, overrides theme
 * 3. Core theme styles (@layer rb-theme) - typography, prose, gradients
 * 4. Accordion animations - keyframes and animation rules
 * 5. Block-specific static CSS - all block styling
 */
@layer rb-theme, rb-utilities;

/*
 * RB Utilities (CSS-only)
 *
 * Lightweight, hand-maintained utility classes used by block runtime markup.
 * These replace Tailwind utility usage without requiring Tailwind CLI/runtime.
 */

@layer rb-utilities {
  /* Screen-reader only */
  .rb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Labels */
  .rb-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Eyebrow text - small uppercase labels for section introductions */
  .rb-eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }
  .rb-eyebrow-treatment-pill {
    align-self: center;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 46%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
    padding: 0.5rem 1rem;
    color: var(--section-text-color, rgb(var(--tb-text)));
    line-height: 1;
  }
  .rb-eyebrow-treatment-pill.rb-eyebrow-treatment-accent {
    border-color: rgb(var(--tb-accent));
    border-width: 2px;
    background: rgb(var(--tb-onAccent, 255 255 255) / 0.7);
    padding: 0.85rem 1.25rem;
    color: rgb(var(--tb-accent));
  }
  .rb-eyebrow-treatment-pill-bounce {
    animation: rb-eyebrow-pill-bounce 2s ease-in-out infinite;
    margin: 0 auto 1.5rem;
    transform-origin: center;
    will-change: transform;
  }
  @keyframes rb-eyebrow-pill-bounce {
    0% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: none;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .rb-eyebrow-treatment-pill-bounce {
      animation: none;
      will-change: auto;
    }
  }

  /* Caption text - small secondary text for captions and metadata (non-uppercase) */
  .rb-caption {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
  }

  /* Navigation typography */
  .rb-nav-text {
    font-size: 0.875rem;
    font-weight: 500;
  }
  .rb-nav-text-mobile {
    font-size: 1.125rem;
    font-weight: 600;
  }

  /* Display */
  .rb-block {
    display: block;
  }
  .rb-inline-block {
    display: inline-block;
  }
  .rb-flex {
    display: flex;
  }
  .rb-inline-flex {
    display: inline-flex;
  }
  .rb-grid {
    display: grid;
  }
  .rb-hidden {
    display: none;
  }
  .rb-isolate {
    isolation: isolate;
  }

  /* Position */
  .rb-relative {
    position: relative;
  }
  .rb-absolute {
    position: absolute;
  }
  .rb-fixed {
    position: fixed;
  }
  .rb-sticky {
    position: sticky;
  }
  .rb-inset-0 {
    inset: 0;
  }
  .rb-top-0 {
    top: 0;
  }
  .rb-top-4 {
    top: 1rem;
  }
  .rb-top-full {
    top: 100%;
  }
  .rb-top-1\/2 {
    top: 50%;
  }
  .rb-bottom-0 {
    bottom: 0;
  }
  .rb-left-0 {
    left: 0;
  }
  .rb-left-1\/2 {
    left: 50%;
  }
  .rb-right-0 {
    right: 0;
  }

  /* Anchors (background positioning helpers) */
  .rb-anchor-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .rb-anchor-top {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  .rb-anchor-bottom {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
  .rb-anchor-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .rb-anchor-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .rb-anchor-top-left {
    left: 0;
    top: 0;
  }
  .rb-anchor-top-right {
    right: 0;
    top: 0;
  }
  .rb-anchor-bottom-left {
    left: 0;
    bottom: 0;
  }
  .rb-anchor-bottom-right {
    right: 0;
    bottom: 0;
  }

  /* Z-index */
  .rb-z-neg-10 {
    z-index: -10;
  }
  .rb-z-0 {
    z-index: 0;
  }
  .rb-z-10 {
    z-index: 10;
  }
  .rb-z-40 {
    z-index: 40;
  }
  .rb-z-50 {
    z-index: 50;
  }

  /* Sizing */
  .rb-w-auto {
    width: auto;
  }
  .rb-w-full {
    width: 100%;
  }
  .rb-w-calc-100-minus-2rem {
    width: calc(100% - 2rem);
  }
  .rb-w-4 {
    width: 1rem;
  }
  .rb-w-5 {
    width: 1.25rem;
  }
  .rb-w-10 {
    width: 2.5rem;
  }
  .rb-w-12 {
    width: 3rem;
  }
  .rb-w-24 {
    width: 6rem;
  }
  .rb-h-0\.5 {
    height: 0.125rem;
  }
  .rb-h-4 {
    height: 1rem;
  }
  .rb-h-8 {
    height: 2rem;
  }
  .rb-h-10 {
    height: 2.5rem;
  }
  .rb-h-12 {
    height: 3rem;
  }
  .rb-h-16 {
    height: 4rem;
  }
  .rb-h-24 {
    height: 6rem;
  }
  .rb-h-32 {
    height: 8rem;
  }
  .rb-h-48 {
    height: 12rem;
  }
  .rb-h-56 {
    height: 14rem;
  }
  .rb-h-auto {
    height: auto;
  }
  .rb-h-full {
    height: 100%;
  }
  .rb-section-min-h-banner {
    min-height: clamp(16rem, 34svh, 24rem);
  }
  .rb-section-min-h-hero {
    min-height: clamp(32rem, 62svh, 44rem);
  }
  .rb-section-min-h-immersive {
    min-height: clamp(38rem, 78svh, 54rem);
  }
  .rb-section-min-h-banner > .rb-container,
  .rb-section-min-h-hero > .rb-container,
  .rb-section-min-h-immersive > .rb-container {
    min-height: inherit;
  }
  .rb-min-w-0 {
    min-width: 0;
  }
  .rb-min-w-12rem {
    min-width: 12rem;
  }
  .rb-max-w-none {
    max-width: none;
  }
  .rb-max-w-xl {
    max-width: 36rem;
  }
  .rb-max-w-2xl {
    max-width: 42rem;
  }
  .rb-max-w-3xl {
    max-width: 48rem;
  }
  .rb-max-w-4xl {
    max-width: 56rem;
  }
  .rb-max-w-5xl {
    max-width: 64rem;
  }
  .rb-max-w-6xl {
    max-width: 72rem;
  }
  .rb-max-w-7xl {
    max-width: 80rem;
  }
  .rb-max-w-prose {
    max-width: 65ch;
  }
  .rb-aspect-video {
    aspect-ratio: 16 / 9;
  }

  /* Flex */
  .rb-flex-1 {
    flex: 1 1 0%;
  }
  .rb-flex-col {
    flex-direction: column;
  }
  .rb-flex-row {
    flex-direction: row;
  }
  .rb-flex-wrap {
    flex-wrap: wrap;
  }
  .rb-basis-full {
    flex-basis: 100%;
  }
  .rb-basis-1-2 {
    flex-basis: 50%;
  }
  .rb-basis-1-3 {
    flex-basis: 33.333333%;
  }
  .rb-basis-1-4 {
    flex-basis: 25%;
  }
  .rb-basis-1-5 {
    flex-basis: 20%;
  }
  .rb-basis-1-6 {
    flex-basis: 16.666667%;
  }
  @media (min-width: 768px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-md-basis-full {
        flex-basis: 100%;
      }
      .rb-md-basis-1-2 {
        flex-basis: 50%;
      }
      .rb-md-basis-1-3 {
        flex-basis: 33.333333%;
      }
      .rb-md-basis-1-4 {
        flex-basis: 25%;
      }
      .rb-md-basis-1-5 {
        flex-basis: 20%;
      }
      .rb-md-basis-1-6 {
        flex-basis: 16.666667%;
      }
    }
  }
  @media (min-width: 1024px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-lg-basis-full {
        flex-basis: 100%;
      }
      .rb-lg-basis-1-2 {
        flex-basis: 50%;
      }
      .rb-lg-basis-1-3 {
        flex-basis: 33.333333%;
      }
      .rb-lg-basis-1-4 {
        flex-basis: 25%;
      }
      .rb-lg-basis-1-5 {
        flex-basis: 20%;
      }
      .rb-lg-basis-1-6 {
        flex-basis: 16.666667%;
      }
    }
  }
  .rb-shrink-0 {
    flex-shrink: 0;
  }
  .rb-flex-shrink-0 {
    flex-shrink: 0;
  }

  /* Grid */
  .rb-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .rb-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rb-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rb-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (min-width: 640px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-sm-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .rb-sm-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .rb-sm-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
  }
  @media (min-width: 768px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-md-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .rb-md-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .rb-md-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
  }
  @media (min-width: 1024px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-lg-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .rb-lg-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .rb-lg-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .rb-lg-w-3\/4 {
        width: 75%;
      }
      .rb-lg-col-span-1 {
        grid-column: span 1 / span 1;
      }
      .rb-lg-col-span-2 {
        grid-column: span 2 / span 2;
      }
      .rb-lg-col-span-3 {
        grid-column: span 3 / span 3;
      }
      .rb-lg-col-span-4 {
        grid-column: span 4 / span 4;
      }
    }
  }
  @media (min-width: 1280px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-xl-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .rb-xl-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .rb-xl-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
  }

  /* Alignment */
  .rb-items-start {
    align-items: flex-start;
  }
  .rb-items-center {
    align-items: center;
  }
  .rb-items-end {
    align-items: flex-end;
  }
  .rb-items-stretch {
    align-items: stretch;
  }
  .rb-items-baseline {
    align-items: baseline;
  }
  .rb-justify-start {
    justify-content: flex-start;
  }
  .rb-justify-center {
    justify-content: center;
  }
  .rb-justify-end {
    justify-content: flex-end;
  }
  .rb-justify-between {
    justify-content: space-between;
  }

  /* Gap / spacing */
  .rb-gap-0 {
    gap: 0;
  }
  .rb-gap-1 {
    gap: 0.25rem;
  }
  .rb-gap-2 {
    gap: 0.5rem;
  }
  .rb-gap-3 {
    gap: 0.75rem;
  }
  .rb-gap-4 {
    gap: 1rem;
  }
  .rb-gap-5 {
    gap: 1.25rem;
  }
  .rb-gap-6 {
    gap: 1.5rem;
  }
  .rb-gap-8 {
    gap: 2rem;
  }
  .rb-gap-10 {
    gap: 2.5rem;
  }
  .rb-gap-x-6 {
    column-gap: 1.5rem;
  }
  .rb-gap-x-8 {
    column-gap: 2rem;
  }
  .rb-gap-y-3 {
    row-gap: 0.75rem;
  }
  @media (min-width: 768px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-md-gap-0 {
        gap: 0;
      }
      .rb-md-gap-10 {
        gap: 2.5rem;
      }
    }
  }

  .rb-space-y-1 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.25rem;
  }
  .rb-space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem;
  }
  .rb-space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.75rem;
  }
  .rb-space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.5rem;
  }

  /* Padding */
  .rb-p-0 {
    padding: 0;
  }
  .rb-p-2 {
    padding: 0.5rem;
  }
  .rb-p-3 {
    padding: 0.75rem;
  }
  .rb-p-4 {
    padding: 1rem;
  }
  .rb-p-5 {
    padding: 1.25rem;
  }
  .rb-p-6 {
    padding: 1.5rem;
  }
  .rb-p-8 {
    padding: 2rem;
  }
  .rb-p-12 {
    padding: 3rem;
  }
  .rb-px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .rb-px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .rb-px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .rb-pl-4 {
    padding-left: 1rem;
  }
  .rb-py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .rb-py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
  .rb-py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .rb-py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .rb-py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .rb-py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .rb-py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .rb-py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .rb-py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .rb-pb-4 {
    padding-bottom: 1rem;
  }
  .rb-pb-6 {
    padding-bottom: 1.5rem;
  }
  .rb-pt-4 {
    padding-top: 1rem;
  }

  @media (min-width: 640px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-sm-py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
      }
      .rb-sm-py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
      }
      .rb-sm-p-6 {
        padding: 1.5rem;
      }
      .rb-sm-flex {
        display: flex;
      }
      .rb-sm-block {
        display: block;
      }
      .rb-sm-inline {
        display: inline;
      }
      .rb-sm-inline-block {
        display: inline-block;
      }
      .rb-sm-inline-flex {
        display: inline-flex;
      }
      .rb-sm-grid {
        display: grid;
      }
      .rb-sm-hidden {
        display: none;
      }
      .rb-sm-flex-row {
        flex-direction: row;
      }
      .rb-sm-items-start {
        align-items: flex-start;
      }
      .rb-sm-items-center {
        align-items: center;
      }
      .rb-sm-justify-between {
        justify-content: space-between;
      }
      .rb-sm-p-8 {
        padding: 2rem;
      }
      .rb-sm-text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
      }
      .rb-sm-text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
      }
      .rb-sm-text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
      }

      .rb-sm-w-auto {
        width: auto;
      }
    }
  }
  @media (min-width: 768px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-md-py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
      }
      .rb-md-py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
      }
      .rb-md-w-1\/3 {
        width: 33.333333%;
      }

      .rb-md-flex {
        display: flex;
      }
      .rb-md-block {
        display: block;
      }
      .rb-md-inline {
        display: inline;
      }
      .rb-md-inline-block {
        display: inline-block;
      }
      .rb-md-inline-flex {
        display: inline-flex;
      }
      .rb-md-grid {
        display: grid;
      }
      .rb-md-hidden {
        display: none;
      }
      .rb-md-flex-row {
        flex-direction: row;
      }
      .rb-md-flex-row-reverse {
        flex-direction: row-reverse;
      }
      .rb-md-items-start {
        align-items: flex-start;
      }
    }
  }
  @media (min-width: 1024px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-lg-flex {
        display: flex;
      }
      .rb-lg-block {
        display: block;
      }
      .rb-lg-inline {
        display: inline;
      }
      .rb-lg-inline-block {
        display: inline-block;
      }
      .rb-lg-inline-flex {
        display: inline-flex;
      }
      .rb-lg-grid {
        display: grid;
      }
      .rb-lg-hidden {
        display: none;
      }
    }
  }

  /* Margin */
  .rb-m-0 {
    margin: 0;
  }
  .rb-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .rb-ml-auto {
    margin-left: auto;
  }
  .rb-mt-auto {
    margin-top: auto;
  }
  .rb-mt-0\.5 {
    margin-top: 0.125rem;
  }
  .rb-mt-1 {
    margin-top: 0.25rem;
  }
  .rb-mt-2 {
    margin-top: 0.5rem;
  }
  .rb-mt-4 {
    margin-top: 1rem;
  }
  .rb-mt-6 {
    margin-top: 1.5rem;
  }
  .rb-mt-8 {
    margin-top: 2rem;
  }
  .rb-mt-10 {
    margin-top: 2.5rem;
  }
  .rb-mt-12 {
    margin-top: 3rem;
  }
  .rb-mb-1 {
    margin-bottom: 0.25rem;
  }
  .rb-mb-2 {
    margin-bottom: 0.5rem;
  }
  .rb-mb-3 {
    margin-bottom: 0.75rem;
  }
  .rb-mb-4 {
    margin-bottom: 1rem;
  }
  .rb-mb-8 {
    margin-bottom: 2rem;
  }
  .rb-ml-1 {
    margin-left: 0.25rem;
  }
  .rb-ml-2 {
    margin-left: 0.5rem;
  }
  .rb-ml-6 {
    margin-left: 1.5rem;
  }
  .rb-mr-2 {
    margin-right: 0.5rem;
  }

  /* Borders */
  .rb-border {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(var(--tb-border));
  }
  .rb-border-0 {
    border-width: 0;
  }
  .rb-border-2 {
    border-width: 2px;
    border-style: solid;
    border-color: rgb(var(--tb-border));
  }
  .rb-border-3 {
    border-width: 3px;
    border-style: solid;
    border-color: rgb(var(--tb-border));
  }
  .rb-border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(var(--tb-border));
  }
  .rb-border-t {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(var(--tb-border));
  }
  .rb-border-dashed {
    border-style: dashed;
  }
  .rb-border-current {
    border-color: currentColor;
  }
  .rb-border-transparent {
    border-color: transparent;
  }
  .rb-border-b-2 {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgb(var(--tb-border));
  }
  .rb-last-border-b-0:last-child {
    border-bottom-width: 0;
  }

  /* Radius */
  .rb-rounded-none {
    border-radius: 0;
  }
  .rb-rounded-sm {
    border-radius: 0.125rem;
  }
  .rb-rounded {
    border-radius: 0.25rem;
  }
  .rb-rounded-md {
    border-radius: 0.375rem;
  }
  .rb-rounded-lg {
    border-radius: 0.5rem;
  }
  .rb-rounded-xl {
    border-radius: 0.75rem;
  }
  .rb-rounded-2xl {
    border-radius: 1rem;
  }
  .rb-rounded-3xl {
    border-radius: 1.5rem;
  }
  .rb-rounded-full {
    border-radius: 9999px;
  }

  /* Shadow */
  /*
   * Shadows are theme-driven via CSS variables:
   * - `--shadow-sm|md|lg|xl|2xl` for size-specific utilities
   * - `--shadow-elev` as a generic fallback (used by bridge/runtime defaults)
   */
  .rb-shadow-sm {
    box-shadow: var(--shadow-sm, var(--shadow-elev));
  }
  .rb-shadow-md {
    box-shadow: var(--shadow-md, var(--shadow-elev));
  }
  .rb-shadow-lg {
    box-shadow: var(--shadow-lg, var(--shadow-elev));
  }
  .rb-shadow-xl {
    box-shadow: var(--shadow-xl, var(--shadow-elev));
  }
  .rb-shadow-2xl {
    box-shadow: var(--shadow-2xl, var(--shadow-xl, var(--shadow-elev)));
  }
  .hover\:rb-shadow-md:hover {
    box-shadow: var(--shadow-md, var(--shadow-elev));
  }

  /* Overflow */
  .rb-overflow-hidden {
    overflow: hidden;
  }
  .rb-overflow-visible {
    overflow: visible;
  }
  .rb-overflow-x-auto {
    overflow-x: auto;
  }
  .rb-overflow-y-auto {
    overflow-y: auto;
  }

  /* Layout */
  .rb-break-inside-avoid {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  /* Scroll snap */
  .rb-snap-x {
    scroll-snap-type: x var(--rb-scroll-snap-strictness, mandatory);
  }
  .rb-snap-mandatory {
    --rb-scroll-snap-strictness: mandatory;
  }
  .rb-snap-start {
    scroll-snap-align: start;
  }

  /* Background */
  .rb-bg-transparent {
    background-color: transparent;
  }
  .rb-bg-current {
    background-color: currentColor;
  }
  .rb-bg-black-40 {
    background-color: rgba(0, 0, 0, 0.4);
  }
  .rb-bg-surface {
    background-color: rgb(var(--tb-surface));
  }
  .rb-bg-background {
    background-color: rgb(var(--tb-background));
  }

  /* Typography */
  .rb-text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .rb-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .rb-text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .rb-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .rb-text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .rb-text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .rb-text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .rb-font-medium {
    font-weight: 500;
  }
  .rb-font-semibold {
    font-weight: 600;
  }
  .rb-font-bold {
    font-weight: 700;
  }
  .rb-font-mono {
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
  }
  .rb-leading-relaxed {
    line-height: 1.625;
  }
  .rb-tracking-tight {
    letter-spacing: -0.025em;
  }
  .rb-tracking-wide {
    letter-spacing: 0.025em;
  }
  .rb-text-left {
    text-align: left;
  }
  .rb-text-center {
    text-align: center;
  }
  .rb-text-right {
    text-align: right;
  }

  /* Text decoration */
  .rb-no-underline {
    text-decoration: none;
  }
  .rb-underline {
    text-decoration-line: underline;
  }
  .rb-underline-offset-4 {
    text-underline-offset: 4px;
  }
  .rb-nav-underline:hover,
  .rb-nav-underline[data-active="true"],
  .rb-nav-underline[aria-current="page"] {
    text-decoration: underline;
  }
  .rb-nav-underline-offset-4 {
    text-underline-offset: 4px;
  }

  .rb-uppercase {
    text-transform: uppercase;
  }
  .rb-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Opacity */
  .rb-opacity-0 {
    opacity: 0;
  }
  .rb-opacity-30 {
    opacity: 0.3;
  }
  .rb-opacity-50 {
    opacity: 0.5;
  }
  .rb-opacity-60 {
    opacity: 0.6;
  }
  .rb-opacity-70 {
    opacity: 0.7;
  }
  .rb-opacity-75 {
    opacity: 0.75;
  }
  .rb-opacity-80 {
    opacity: 0.8;
  }
  .rb-opacity-90 {
    opacity: 0.9;
  }
  .rb-opacity-100 {
    opacity: 1;
  }
  .rb-hover-opacity-80:hover {
    opacity: 0.8;
  }

  /* Pointer events */
  .rb-pointer-events-none {
    pointer-events: none;
  }
  .rb-pointer-events-auto {
    pointer-events: auto;
  }

  /* Cursor */
  .rb-cursor-pointer {
    cursor: pointer;
  }
  .rb-cursor-default {
    cursor: default;
  }
  .rb-cursor-wait {
    cursor: wait;
  }

  /* Transitions */
  .rb-transition-all {
    transition-property: all;
    transition-timing-function: var(--motion-ease, ease);
    transition-duration: var(--motion-duration, 180ms);
  }
  .rb-transition-colors {
    transition-property:
      color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--motion-ease, ease);
    transition-duration: var(--motion-duration, 180ms);
  }
  .rb-transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--motion-ease, ease);
    transition-duration: var(--motion-duration, 180ms);
  }
  .rb-transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--motion-ease, ease);
    transition-duration: var(--motion-duration, 180ms);
  }
  .rb-transition-transform {
    transition-property: transform;
    transition-timing-function: var(--motion-ease, ease);
    transition-duration: var(--motion-duration, 180ms);
  }
  .rb-duration-200 {
    transition-duration: 200ms;
  }
  .rb-duration-300 {
    transition-duration: 300ms;
  }
  .rb-duration-500 {
    transition-duration: 500ms;
  }
  .rb-ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes rb-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .rb-animate-spin {
    animation: rb-spin 1s linear infinite;
  }

  /* Spinner (themeable via currentColor) */
  .rb-spinner {
    --rb-spinner-size: 2rem;
    --rb-spinner-duration: 0.9s;
    --rb-spinner-track-color: rgba(var(--tb-foreground), 0.15);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rb-spinner-size);
    height: var(--rb-spinner-size);
    color: rgb(var(--tb-primary));
    animation: rb-spin var(--rb-spinner-duration) linear infinite;
  }

  .rb-spinner svg {
    width: 100%;
    height: 100%;
  }

  .rb-spinner--inherit {
    color: inherit;
  }

  .rb-spinner--xs {
    --rb-spinner-size: 0.75rem;
  }

  .rb-spinner--sm {
    --rb-spinner-size: 1rem;
  }

  .rb-spinner--md {
    --rb-spinner-size: 2rem;
  }

  .rb-spinner--lg {
    --rb-spinner-size: 4rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .rb-spinner {
      animation-duration: 1.5s;
    }
  }

  @keyframes rb-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-50% - (var(--rb-marquee-gap, 2rem) / 2)));
    }
  }
  .rb-animate-marquee {
    animation: rb-marquee var(--rb-marquee-duration, 40s) linear infinite;
    animation-direction: var(--rb-marquee-direction, normal);
    gap: var(--rb-marquee-gap, 2rem);
  }
  .rb-marquee-pause-on-hover:hover .rb-animate-marquee {
    animation-play-state: paused;
  }

  .rb-image-gallery-marquee {
    overflow: hidden;
    width: 100%;
  }

  @media (max-width: 639px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-image-gallery-marquee {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
      }

      .rb-image-gallery-marquee::-webkit-scrollbar {
        display: none;
      }

      /* Let users swipe smoothly without fighting autoplay while interacting. */
      .rb-image-gallery-marquee:active .rb-animate-marquee,
      .rb-image-gallery-marquee:focus-within .rb-animate-marquee {
        animation-play-state: paused;
      }

      .rb-container-full.rb-image-gallery-marquee-container {
        padding-left: 0;
        padding-right: 0;
      }

      /* Marquee variant: keep images in color on mobile for legibility. */
      .rb-image-gallery-marquee-container .rb-filter-grayscale,
      .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal {
        filter: none;
      }

      .rb-image-gallery-marquee-container
        .rb-filter-grayscale-hover-reveal:hover {
        filter: none;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .rb-animate-marquee {
      animation: none !important;
      transform: none !important;
    }
    .rb-image-gallery-marquee {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
  }

  /* Filters */
  .rb-filter-grayscale {
    filter: grayscale(100%);
  }
  .rb-filter-grayscale-hover-reveal {
    filter: grayscale(100%);
    transition: filter 500ms ease;
  }
  .rb-filter-grayscale-hover-reveal:hover {
    filter: grayscale(0%);
  }
  .rb-filter-sepia {
    filter: sepia(100%);
  }

  /* Transforms */
  .rb-transform-gpu {
    transform: translateZ(0);
  }
  .rb-will-change-transform {
    will-change: transform;
  }
  .rb-translate-x-neg-1\/2 {
    transform: translateX(-50%);
  }
  .rb-hover-scale-105:hover {
    transform: scale(1.05);
  }
  .rb-hover-scale-125:hover {
    transform: scale(1.25);
  }
  @media (prefers-reduced-motion: no-preference) {
    .rb-motion-safe-hover-scale-105:hover {
      transform: scale(1.05);
    }
  }

  /* Object fit */
  .rb-object-cover {
    object-fit: cover;
  }
  .rb-object-contain {
    object-fit: contain;
  }
  .rb-bg-motion-fixed-frame {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100svh;
  }
  .rb-bg-motion-fixed-frame-scope {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
  @media (hover: none), (prefers-reduced-motion: reduce) {
    .rb-bg-motion-fixed-frame {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }

  /* Line clamp */
  .rb-line-clamp-2,
  .rb-line-clamp-3,
  .rb-line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .rb-line-clamp-2 {
    -webkit-line-clamp: 2;
  }
  .rb-line-clamp-3 {
    -webkit-line-clamp: 3;
  }
  .rb-line-clamp-4 {
    -webkit-line-clamp: 4;
  }

  /* Typography */
  .rb-italic {
    font-style: italic;
  }

  /* Container helpers */
  .rb-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .rb-container-full {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .rb-container-bleed {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  @media (min-width: 640px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-container,
      .rb-container-full {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
  }

  /* Flex alignment */
  .rb-self-start {
    align-self: flex-start;
  }

  /* Semantic spacing tokens (replaces Tailwind maps in src/system/spacing.ts) */
  .rb-section-pad-none {
    padding-top: 0;
    padding-bottom: 0;
  }
  .rb-section-pad-compact {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .rb-section-pad-cozy {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .rb-section-pad-medium {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .rb-section-pad-comfortable {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .rb-section-pad-spacious {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  @media (min-width: 640px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-section-pad-compact {
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      .rb-section-pad-cozy {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
      }
      .rb-section-pad-medium {
        padding-top: 4rem;
        padding-bottom: 4rem;
      }
      .rb-section-pad-comfortable {
        padding-top: 5rem;
        padding-bottom: 5rem;
      }
      .rb-section-pad-spacious {
        padding-top: 7rem;
        padding-bottom: 7rem;
      }
    }
  }

  .rb-container-pad-none {
    padding: 0;
  }
  .rb-container-pad-compact {
    padding: 1rem;
  }
  .rb-container-pad-cozy {
    padding: 1.5rem;
  }
  .rb-container-pad-medium {
    padding: 1.5rem;
  }
  .rb-container-pad-comfortable {
    padding: 2rem;
  }
  .rb-container-pad-spacious {
    padding: 2.5rem;
  }

  @media (min-width: 640px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-container-pad-compact {
        padding: 1.5rem;
      }
      .rb-container-pad-cozy {
        padding: 2rem;
      }
      .rb-container-pad-medium {
        padding: 2rem;
      }
      .rb-container-pad-comfortable {
        padding: 2.5rem;
      }
      .rb-container-pad-spacious {
        padding: 3.5rem;
      }
    }
  }

  /* Semantic gap tokens (theme-aware via --space-mult) */
  .rb-gap-semantic-none {
    --rb-semantic-gap: 0px;
    gap: 0;
  }
  .rb-gap-semantic-compact {
    --rb-semantic-gap: calc(1rem * var(--space-mult, 1));
    gap: calc(1rem * var(--space-mult, 1));
  }
  .rb-gap-semantic-cozy {
    --rb-semantic-gap: calc(1.75rem * var(--space-mult, 1));
    gap: calc(1.75rem * var(--space-mult, 1));
  }
  .rb-gap-semantic-medium {
    --rb-semantic-gap: calc(2.75rem * var(--space-mult, 1));
    gap: calc(2.75rem * var(--space-mult, 1));
  }
  .rb-gap-semantic-comfortable {
    --rb-semantic-gap: calc(4.5rem * var(--space-mult, 1));
    gap: calc(4.5rem * var(--space-mult, 1));
  }
  .rb-gap-semantic-spacious {
    --rb-semantic-gap: calc(6.5rem * var(--space-mult, 1));
    gap: calc(6.5rem * var(--space-mult, 1));
  }

  @media (min-width: 768px) {
    @scope ([data-rb-responsive-mode="viewport"]) to (:scope [data-rb-responsive-mode]) {
      .rb-gap-semantic-compact {
        --rb-semantic-gap: calc(1.25rem * var(--space-mult, 1));
        gap: calc(1.25rem * var(--space-mult, 1));
      }
      .rb-gap-semantic-cozy {
        --rb-semantic-gap: calc(2.25rem * var(--space-mult, 1));
        gap: calc(2.25rem * var(--space-mult, 1));
      }
      .rb-gap-semantic-medium {
        --rb-semantic-gap: calc(3.5rem * var(--space-mult, 1));
        gap: calc(3.5rem * var(--space-mult, 1));
      }
      .rb-gap-semantic-comfortable {
        --rb-semantic-gap: calc(5.75rem * var(--space-mult, 1));
        gap: calc(5.75rem * var(--space-mult, 1));
      }
      .rb-gap-semantic-spacious {
        --rb-semantic-gap: calc(8.75rem * var(--space-mult, 1));
        gap: calc(8.75rem * var(--space-mult, 1));
      }
    }
  }

  /* Backdrop blur helpers */
  .rb-backdrop-blur {
    backdrop-filter: blur(10px);
  }
  @supports not (
    (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))
  ) {
    .rb-backdrop-blur {
      backdrop-filter: none;
    }
  }
}


@layer rb-theme {
/* Fallback defaults so preview doesn't look broken before ThemeScope injects vars */
:root {
  /* --tb-primary: 17 24 39;
  --tb-text: 17 24 39;
  --tb-muted: 107 114 128;
  --tb-bg: 255 255 255;
  --tb-surface: 248 250 252;
  --tb-border: 229 231 235;

  --radius-control: 12px;
  --radius-card: 12px;

  --shadow-elev: 0 1px 2px rgba(0,0,0,.06);

  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-body: 16px;

  --font-heading: ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, sans-serif;

  --motion-duration: 180ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1); */
}

/* -------------------------------------------------------------------------- */
/* Shared: Modal                                                             */
/* -------------------------------------------------------------------------- */

:where(.theme-scope) .rb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--rb-modal-z-index, 20000);
  display: grid;
  place-items: center;
  padding: 1rem;
  /* Keep a hard fallback so the overlay never becomes transparent due to invalid vars. */
  background-color: rgba(0, 0, 0, 0.6);
  background: var(--rb-modal-overlay-bg, rgba(0, 0, 0, 0.6));
}

:where(.theme-scope) .rb-modal {
  width: min(var(--rb-modal-max-width, 560px), 100%);
  background: var(--rb-modal-bg, rgb(var(--tb-surface)));
  border: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
  border-radius: var(--rb-modal-radius, var(--radius-card));
  box-shadow: var(--rb-modal-shadow, var(--shadow-lg, var(--shadow-elev)));
}

:where(.theme-scope) .rb-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--rb-modal-border, rgb(var(--tb-border)));
}

:where(.theme-scope) .rb-modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgb(var(--tb-text));
}

:where(.theme-scope) .rb-modal__close {
  background: transparent;
  border: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  line-height: 1;
  color: rgb(var(--tb-mutedText));
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
}

:where(.theme-scope) .rb-modal__close:hover {
  color: rgb(var(--tb-text));
  background: rgba(var(--tb-border), 0.2);
}

:where(.theme-scope) .rb-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);
}

:where(.theme-scope) .rb-modal__body {
  padding: 0.875rem 1rem 1rem;
  color: rgb(var(--tb-text));
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* -------------------------------------------------------------------------- */
/* Header: Mobile nav overlay transitions                                      */
/* -------------------------------------------------------------------------- */

/* Keep the overlay in the DOM so we can transition opacity/transform.
   JS toggles `aria-hidden` + `inert` (via enhancer), and CSS uses pointer-events
   to prevent interaction while closed. */
.nav-mobile-overlay {
  pointer-events: none;
  /* Prevent transformed children (panel) from creating viewport scrollbars
     during enter/exit transitions. */
  overflow: hidden;
}

.nav-mobile-overlay[aria-hidden="false"] {
  pointer-events: auto;
}

.nav-mobile-overlay .nav-mobile-backdrop {
  opacity: 0;
  transition: opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
}

.nav-mobile-overlay[aria-hidden="false"] .nav-mobile-backdrop {
  opacity: 1;
}

.nav-mobile-overlay .nav-mobile-panel {
  opacity: 0;
  transform: translate3d(12px, 0, 0);
  overflow-x: hidden;
  transition:
    opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1)),
    transform var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
  will-change: opacity, transform;
}

.nav-mobile-overlay[aria-hidden="false"] .nav-mobile-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* -------------------------------------------------------------------------- */
/* Header: Mobile toggle hamburger -> X                                       */
/* -------------------------------------------------------------------------- */

.nav-mobile-toggle .nav-mobile-bar {
  transform-origin: center;
  transition:
    transform var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1)),
    opacity var(--motion-duration, 180ms) var(--motion-ease, cubic-bezier(.2,.8,.2,1));
  will-change: transform, opacity;
}

.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-top {
  transform: translateY(6px) rotate(45deg);
}

.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-middle {
  opacity: 0;
}

.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-bar-bottom {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-mobile-overlay .nav-mobile-backdrop,
  .nav-mobile-overlay .nav-mobile-panel {
    transition: none;
    transform: none;
  }

  .nav-mobile-toggle .nav-mobile-bar {
    transition: none;
  }
}

/*
 * Theme Scope Styles
 *
 * IMPORTANT: All :where(.theme-scope) selectors are wrapped in :where() to give them
 * zero specificity. This allows SDK site custom styles to easily override
 * theme defaults without needing !important or high-specificity selectors.
 *
 * Example: `h4 { color: white; }` will override `:where(:where(.theme-scope)) h4`
 */

:where(:where(.theme-scope)) {
  font-family: var(--font-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  font-weight: var(--font-weight-body);

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    font-family: var(--font-heading);
    /* Color is set by generateTypographyCss.ts with full cascade:
       --section-heading-color -> --section-text-color -> --hc-hN -> --hc-heading -> inherit */
    font-weight: var(--font-weight-heading);
    text-transform: var(--tt-heading);
    font-variant-caps: var(--fv-heading);
  }
}

/* Heading typographic overrides (fallback to defaults when not provided) */
:where(:where(.theme-scope)) h1 {
  letter-spacing: var(--ls-h1, var(--ls-heading));
  line-height: var(--lh-h1, var(--lh-heading));
  font-weight: var(--fw-h1, var(--font-weight-heading));
}
:where(:where(.theme-scope)) h2 {
  letter-spacing: var(--ls-h2, var(--ls-heading));
  line-height: var(--lh-h2, var(--lh-heading));
  font-weight: var(--fw-h2, var(--font-weight-heading));
}
:where(:where(.theme-scope)) h3 {
  letter-spacing: var(--ls-h3, var(--ls-heading));
  line-height: var(--lh-h3, var(--lh-heading));
  font-weight: var(--fw-h3, var(--font-weight-heading));
}
:where(:where(.theme-scope)) h4,
:where(:where(.theme-scope)) h5,
:where(:where(.theme-scope)) h6 {
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
}
:where(:where(.theme-scope)) h4 {
  font-weight: var(--fw-h4, var(--font-weight-heading));
}
:where(:where(.theme-scope)) h5 {
  font-weight: var(--fw-h5, var(--font-weight-heading));
}
:where(:where(.theme-scope)) h6 {
  font-weight: var(--fw-h6, var(--font-weight-heading));
}

/* Rich text element spacing based on theme rhythm */
:where(.theme-scope) .rb-prose h1 {
  margin-top: calc(var(--rt-space-y) * 1.6);
  margin-bottom: calc(var(--rt-space-y) * 0.8);
}
:where(.theme-scope) .rb-prose h2 {
  margin-top: calc(var(--rt-space-y) * 1.4);
  margin-bottom: calc(var(--rt-space-y) * 0.7);
}
:where(.theme-scope) .rb-prose h3 {
  margin-top: calc(var(--rt-space-y) * 1.2);
  margin-bottom: calc(var(--rt-space-y) * 0.6);
}
:where(.theme-scope) .rb-prose h4 {
  margin-top: calc(var(--rt-space-y) * 1);
  margin-bottom: calc(var(--rt-space-y) * 0.5);
}
:where(.theme-scope) .rb-prose h5 {
  margin-top: calc(var(--rt-space-y) * 0.9);
  margin-bottom: calc(var(--rt-space-y) * 0.45);
}
:where(.theme-scope) .rb-prose h6 {
  margin-top: calc(var(--rt-space-y) * 0.8);
  margin-bottom: calc(var(--rt-space-y) * 0.4);
}
:where(.theme-scope) .rb-prose p {
  margin: var(--rt-space-y) 0;
}
:where(.theme-scope) .rb-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: calc(var(--rt-space-y) * 1) 0;
}
:where(.theme-scope) .rb-prose ul,
:where(.theme-scope) .rb-prose ol {
  margin: var(--rt-space-y) 0;
  padding-left: 1.25rem;
}
:where(.theme-scope) .rb-prose ul {
  list-style-type: disc;
}
:where(.theme-scope) .rb-prose ol {
  list-style-type: decimal;
}
:where(.theme-scope) .rb-prose ul ul {
  list-style-type: circle;
}
:where(.theme-scope) .rb-prose ul ul ul {
  list-style-type: square;
}
:where(.theme-scope) .rb-prose ol ol {
  list-style-type: lower-alpha;
}
:where(.theme-scope) .rb-prose ol ol ol {
  list-style-type: lower-roman;
}
:where(.theme-scope) .rb-prose blockquote {
  margin: calc(var(--rt-space-y) * 1) 0;
  padding-left: 1rem;
  border-left: 3px solid rgb(var(--tb-border));
}
:where(.theme-scope) .rb-prose > :first-child {
  margin-top: 0;
}
:where(.theme-scope) .rb-prose > :last-child {
  margin-bottom: 0;
}

/* Prose color overrides - use theme CSS variables instead of hardcoded colors
 * This makes prose elements automatically adapt to light/dark themes */
:where(.theme-scope) .rb-prose {
  /* Body text inherits from parent, which should already have theme color */
  color: inherit;
}

/* Prose size variants (theme-aware, CSS-only) */
:where(.theme-scope) {
  /* Body scale + rhythm come from the active theme runtime (ThemeScope) */
  --rb-prose-sm-font-size: calc(var(--fs-body, 16px) * 0.875);
  --rb-prose-sm-line-height: calc(var(--lh-body, 1.65) - 0.05);

  --rb-prose-lg-font-size: calc(var(--fs-body, 16px) * 1.125);
  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.1);

  /* Applied at >= 640px; below that, rb-prose-lg is typically used */
  --rb-prose-xl-sm-font-size: calc(var(--fs-body, 16px) * 1.25);
  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.15);
}

:where(.theme-scope) .rb-prose-sm {
  font-size: var(--rb-prose-sm-font-size);
  line-height: var(--rb-prose-sm-line-height);
}
:where(.theme-scope) .rb-prose-lg {
  font-size: var(--rb-prose-lg-font-size);
  line-height: var(--rb-prose-lg-line-height);
}
@media (min-width: 640px) {
  :where(.theme-scope) .rb-prose-xl-sm {
    font-size: var(--rb-prose-xl-sm-font-size);
    line-height: var(--rb-prose-xl-sm-line-height);
  }
}

/* Neutral prose uses theme text color by default */
:where(.theme-scope) .rb-prose-neutral {
  color: rgb(var(--tb-text));
}

:where(.theme-scope) .rb-prose p,
:where(.theme-scope) .rb-prose li {
  /* Body text uses inherited color (set by fragment via textColorStyle) */
  color: inherit;
}

:where(.theme-scope) .rb-prose h1,
:where(.theme-scope) .rb-prose h2,
:where(.theme-scope) .rb-prose h3,
:where(.theme-scope) .rb-prose h4,
:where(.theme-scope) .rb-prose h5,
:where(.theme-scope) .rb-prose h6 {
  /* Headings inherit from parent or use theme text color */
  color: inherit;
}

:where(.theme-scope) .rb-prose strong,
:where(.theme-scope) .rb-prose b {
  /* Bold text inherits color but increases weight */
  color: inherit;
  font-weight: 600;
}

:where(.theme-scope) .rb-prose em,
:where(.theme-scope) .rb-prose i {
  /* Italic text inherits color */
  color: inherit;
}

:where(.theme-scope) .rb-prose a {
  /* Global prose link style with theme-level overrides */
  color: var(--rb-prose-link-color, rgb(var(--tb-primary)));
  text-decoration-line: var(--rb-prose-link-decoration-line, underline);
  text-decoration-style: var(--rb-prose-link-underline-style, solid);
  text-decoration-thickness: var(--rb-prose-link-underline-thickness, from-font);
  text-underline-offset: var(--rb-prose-link-underline-offset, 0.14em);
  text-decoration-color: var(--rb-prose-link-decoration-color, rgba(var(--tb-primary), 0.3));
  transition:
    color 150ms ease,
    text-decoration-color 150ms ease;
}

:where(.theme-scope) .rb-prose a:hover {
  color: var(--rb-prose-link-hover-color, var(--rb-prose-link-color, rgb(var(--tb-primary))));
  text-decoration-color: var(
    --rb-prose-link-hover-decoration-color,
    var(--rb-prose-link-hover-color, var(--rb-prose-link-color, rgb(var(--tb-primary))))
  );
}

:where(.theme-scope) .rb-prose blockquote {
  /* Blockquotes use muted text color */
  color: rgb(var(--tb-mutedText));
  border-left-color: rgb(var(--tb-border));
}

:where(.theme-scope) .fragment-quote-body blockquote {
  /* Quote fragment should not get the generic prose blockquote left border/indent. */
  border-left: 0;
  padding-left: 0;
}

:where(.theme-scope) .rb-columns-equal-height {
  /* Needed so we can use container query units (`cqw`) for width-based tile sizing. */
  container-type: inline-size;

  --rb-columns-cols: var(--rb-columns-cols-mobile, 1);
  --rb-columns-gap: var(--rb-semantic-gap, 0px);
  --rb-columns-tile-ar: var(--rb-columns-tile-ar, 1);

  --rb-columns-tile-w: calc(
    (100cqw - (var(--rb-columns-cols) - 1) * var(--rb-columns-gap)) / var(--rb-columns-cols)
  );
  --rb-columns-tile-h: calc(var(--rb-columns-tile-w) * var(--rb-columns-tile-ar));
}

@media (min-width: 768px) {
  :where(.theme-scope) .rb-columns-equal-height {
    --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
  }
}

@media (min-width: 1024px) {
  :where(.theme-scope) .rb-columns-equal-height {
    --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
  }
}

@media (min-width: 1280px) {
  :where(.theme-scope) .rb-columns-equal-height {
    --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
  }
}

:where(.theme-scope) .rb-columns-equal-height > * {
  height: var(--rb-columns-tile-h);
}

:where(.theme-scope) .rb-columns-equal-height > .rb-h-full {
  /*
    Grid items commonly include `rb-h-full` (height: 100%) to stretch within
    their row. In equal-height mode we instead want a fixed tile height so the
    spanning editorial tile doesn't become taller due to its larger width +
    aspect-ratio.
  */
  height: var(--rb-columns-tile-h);
  min-height: var(--rb-columns-tile-h);
  max-height: var(--rb-columns-tile-h);
}

:where(.theme-scope) .rb-columns-equal-height .fragment-image-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:where(.theme-scope) .rb-columns-equal-height .fragment-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(.theme-scope) .rb-prose code {
  /* Inline code uses text color with surface background */
  color: inherit;
  background-color: rgba(var(--tb-surface), 0.5);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

:where(.theme-scope) .rb-prose pre {
  /* Code blocks */
  background-color: rgb(var(--tb-surface));
  color: rgb(var(--tb-text));
  border: 1px solid rgb(var(--tb-border));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
}

:where(.theme-scope) .rb-prose pre code {
  /* Code inside pre blocks */
  background-color: transparent;
  padding: 0;
  color: inherit;
}

:where(.theme-scope) .rb-prose hr {
  /* Horizontal rules */
  border-color: rgb(var(--tb-border));
}

:where(.theme-scope) .rb-prose ul > li::marker,
:where(.theme-scope) .rb-prose ol > li::marker {
  /* List markers use muted text color */
  color: rgb(var(--tb-mutedText));
}

/*
/* Density helpers */
:where(.theme-scope) .section-pad {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
:where(.theme-scope)[data-density="airy"] .section-pad {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
:where(.theme-scope)[data-density="compact"] .section-pad {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

:where(.theme-scope) .rounded-control {
  border-radius: var(--radius-control);
}
:where(.theme-scope) .rounded-card {
  border-radius: var(--radius-card);
}

:where(.theme-scope) .shadow-elev {
  box-shadow: var(--shadow-elev);
}

:where(.theme-scope) .font-heading {
  font-family: var(--font-heading);
}
:where(.theme-scope) .font-body {
  font-family: var(--font-body);
}

:where(.theme-scope) .text-h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
}
:where(.theme-scope) .text-h2 {
  font-size: var(--fs-h2);
  line-height: 1.15;
}
:where(.theme-scope) .text-h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
}
:where(.theme-scope) .text-body-size {
  font-size: var(--fs-body);
}

:where(.theme-scope) .transition-theme {
  transition: all var(--motion-duration) var(--motion-ease);
}
:where(.theme-scope) .transition-theme-standard {
  transition: all var(--motion-duration) var(--motion-ease);
}
:where(.theme-scope) .transition-theme-subtle {
  transition: all calc(var(--motion-duration) * 0.75) var(--motion-ease);
}
:where(.theme-scope) .transition-theme-expressive {
  transition: all calc(var(--motion-duration) * 1.35) var(--motion-ease);
}

/* Shade tokens (50..950) for primary */
:where(.theme-scope) .from-primary-50 {
  --rb-gradient-from: rgb(var(--tb-primary-50)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-50 {
  --rb-gradient-to: rgb(var(--tb-primary-50)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-100 {
  --rb-gradient-from: rgb(var(--tb-primary-100))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-100 {
  --rb-gradient-to: rgb(var(--tb-primary-100)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-200 {
  --rb-gradient-from: rgb(var(--tb-primary-200))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-200 {
  --rb-gradient-to: rgb(var(--tb-primary-200)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-300 {
  --rb-gradient-from: rgb(var(--tb-primary-300))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-300 {
  --rb-gradient-to: rgb(var(--tb-primary-300)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-400 {
  --rb-gradient-from: rgb(var(--tb-primary-400))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-400 {
  --rb-gradient-to: rgb(var(--tb-primary-400)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-500 {
  --rb-gradient-from: rgb(var(--tb-primary-500))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-500 {
  --rb-gradient-to: rgb(var(--tb-primary-500)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-600 {
  --rb-gradient-from: rgb(var(--tb-primary-600))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-600 {
  --rb-gradient-to: rgb(var(--tb-primary-600)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-700 {
  --rb-gradient-from: rgb(var(--tb-primary-700))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-700 {
  --rb-gradient-to: rgb(var(--tb-primary-700)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-800 {
  --rb-gradient-from: rgb(var(--tb-primary-800))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-800 {
  --rb-gradient-to: rgb(var(--tb-primary-800)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-900 {
  --rb-gradient-from: rgb(var(--tb-primary-900))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-900 {
  --rb-gradient-to: rgb(var(--tb-primary-900)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-primary-950 {
  --rb-gradient-from: rgb(var(--tb-primary-950))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-primary-950 {
  --rb-gradient-to: rgb(var(--tb-primary-950)) var(--rb-gradient-to-position);
}

/* Shade tokens (50..950) for secondary */
:where(.theme-scope) .from-secondary-50 {
  --rb-gradient-from: rgb(var(--tb-secondary-50))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-50 {
  --rb-gradient-to: rgb(var(--tb-secondary-50)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-100 {
  --rb-gradient-from: rgb(var(--tb-secondary-100))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-100)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-100 {
  --rb-gradient-to: rgb(var(--tb-secondary-100)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-200 {
  --rb-gradient-from: rgb(var(--tb-secondary-200))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-200)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-200 {
  --rb-gradient-to: rgb(var(--tb-secondary-200)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-300 {
  --rb-gradient-from: rgb(var(--tb-secondary-300))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-300)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-300 {
  --rb-gradient-to: rgb(var(--tb-secondary-300)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-400 {
  --rb-gradient-from: rgb(var(--tb-secondary-400))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-400)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-400 {
  --rb-gradient-to: rgb(var(--tb-secondary-400)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-500 {
  --rb-gradient-from: rgb(var(--tb-secondary-500))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-500)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-500 {
  --rb-gradient-to: rgb(var(--tb-secondary-500)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-600 {
  --rb-gradient-from: rgb(var(--tb-secondary-600))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-600)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-600 {
  --rb-gradient-to: rgb(var(--tb-secondary-600)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-700 {
  --rb-gradient-from: rgb(var(--tb-secondary-700))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-700)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-700 {
  --rb-gradient-to: rgb(var(--tb-secondary-700)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-800 {
  --rb-gradient-from: rgb(var(--tb-secondary-800))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-800)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-800 {
  --rb-gradient-to: rgb(var(--tb-secondary-800)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-900 {
  --rb-gradient-from: rgb(var(--tb-secondary-900))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-900)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-900 {
  --rb-gradient-to: rgb(var(--tb-secondary-900)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-secondary-950 {
  --rb-gradient-from: rgb(var(--tb-secondary-950))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-secondary-950)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-secondary-950 {
  --rb-gradient-to: rgb(var(--tb-secondary-950)) var(--rb-gradient-to-position);
}

/* Shade tokens (50..950) for accent */
:where(.theme-scope) .from-accent-50 {
  --rb-gradient-from: rgb(var(--tb-accent-50)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-50 {
  --rb-gradient-to: rgb(var(--tb-accent-50)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-100 {
  --rb-gradient-from: rgb(var(--tb-accent-100)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-100 {
  --rb-gradient-to: rgb(var(--tb-accent-100)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-200 {
  --rb-gradient-from: rgb(var(--tb-accent-200)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-200 {
  --rb-gradient-to: rgb(var(--tb-accent-200)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-300 {
  --rb-gradient-from: rgb(var(--tb-accent-300)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-300 {
  --rb-gradient-to: rgb(var(--tb-accent-300)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-400 {
  --rb-gradient-from: rgb(var(--tb-accent-400)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-400 {
  --rb-gradient-to: rgb(var(--tb-accent-400)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-500 {
  --rb-gradient-from: rgb(var(--tb-accent-500)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-500 {
  --rb-gradient-to: rgb(var(--tb-accent-500)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-600 {
  --rb-gradient-from: rgb(var(--tb-accent-600)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-600 {
  --rb-gradient-to: rgb(var(--tb-accent-600)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-700 {
  --rb-gradient-from: rgb(var(--tb-accent-700)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-700 {
  --rb-gradient-to: rgb(var(--tb-accent-700)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-800 {
  --rb-gradient-from: rgb(var(--tb-accent-800)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-800 {
  --rb-gradient-to: rgb(var(--tb-accent-800)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-900 {
  --rb-gradient-from: rgb(var(--tb-accent-900)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-900 {
  --rb-gradient-to: rgb(var(--tb-accent-900)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-accent-950 {
  --rb-gradient-from: rgb(var(--tb-accent-950)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-accent-950 {
  --rb-gradient-to: rgb(var(--tb-accent-950)) var(--rb-gradient-to-position);
}

/* Shade tokens (50..950) for neutral */
:where(.theme-scope) .from-neutral-50 {
  --rb-gradient-from: rgb(var(--tb-neutral-50)) var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-50 {
  --rb-gradient-to: rgb(var(--tb-neutral-50)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-100 {
  --rb-gradient-from: rgb(var(--tb-neutral-100))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-100 {
  --rb-gradient-to: rgb(var(--tb-neutral-100)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-200 {
  --rb-gradient-from: rgb(var(--tb-neutral-200))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-200 {
  --rb-gradient-to: rgb(var(--tb-neutral-200)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-300 {
  --rb-gradient-from: rgb(var(--tb-neutral-300))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-300 {
  --rb-gradient-to: rgb(var(--tb-neutral-300)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-400 {
  --rb-gradient-from: rgb(var(--tb-neutral-400))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-400 {
  --rb-gradient-to: rgb(var(--tb-neutral-400)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-500 {
  --rb-gradient-from: rgb(var(--tb-neutral-500))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-500 {
  --rb-gradient-to: rgb(var(--tb-neutral-500)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-600 {
  --rb-gradient-from: rgb(var(--tb-neutral-600))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-600 {
  --rb-gradient-to: rgb(var(--tb-neutral-600)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-700 {
  --rb-gradient-from: rgb(var(--tb-neutral-700))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-700 {
  --rb-gradient-to: rgb(var(--tb-neutral-700)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-800 {
  --rb-gradient-from: rgb(var(--tb-neutral-800))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-800 {
  --rb-gradient-to: rgb(var(--tb-neutral-800)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-900 {
  --rb-gradient-from: rgb(var(--tb-neutral-900))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-900 {
  --rb-gradient-to: rgb(var(--tb-neutral-900)) var(--rb-gradient-to-position);
}
:where(.theme-scope) .from-neutral-950 {
  --rb-gradient-from: rgb(var(--tb-neutral-950))
    var(--rb-gradient-from-position);
  --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
  --rb-gradient-stops: var(--rb-gradient-from), var(--rb-gradient-to);
}
:where(.theme-scope) .to-neutral-950 {
  --rb-gradient-to: rgb(var(--tb-neutral-950)) var(--rb-gradient-to-position);
}

/* =================================================================
   Header System Class Naming Conventions

   rb-header-*    Utility-style classes set in site-header.ts layouts
                  (rb-header-layout, rb-header-logo-sm, rb-header-logo-lg)

   header-*       State/semantic classes set by transforms or runtime
                  (header-root, header-scrolled, header-variant-*, header-logo-text)

   nav-*          Navigation component classes (dropdowns, mobile, underlines)
                  (nav-dropdown, nav-mobile-panel, nav-underline-grow)
   ================================================================= */

/* =================================================================
   Header Layout Padding

   Padding is controlled entirely by CSS based on variant class.
   This ensures shrink headers look identical to non-shrink before scroll.
   ================================================================= */

/* Prevent scroll anchoring feedback loops when the header height transitions.
   In some browsers, resizing a sticky header near the top can cause the UA to
   adjust scroll position ("scroll anchoring"), which then flips the
   `header-scrolled` threshold logic back and forth. */
:where(.theme-scope) .block-site-header {
  overflow-anchor: none;
}

/* Base padding for horizontal variants (classic, transparent) */
:where(.theme-scope) .rb-header-layout {
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition: padding 300ms var(--motion-ease, ease);
}

/* Vertical variants need more breathing room
   Note: header-variant-* is on Section (ancestor), rb-header-layout on inner div */
:where(.theme-scope) .header-variant-centered .rb-header-layout,
:where(.theme-scope) .header-variant-editorial .rb-header-layout {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Floating variant - compact padding */
:where(.theme-scope) .header-variant-floating .rb-header-layout {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* =================================================================
   Header Shrink-on-Scroll

   Only applies when .rb-header-shrink is present AND user has scrolled.
   No changes until scroll - shrink header = non-shrink header initially.
   ================================================================= */

/* Scrolled state - reduce padding */
:where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-layout {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Vertical variants get gentler reduction
   Note: Both classes are on Section, rb-header-layout on inner div */
:where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-centered .rb-header-layout,
:where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-editorial .rb-header-layout {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Floating variant */
:where(.theme-scope) .rb-header-shrink.header-scrolled.header-variant-floating .rb-header-layout {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* =================================================================
   Logo & Title Sizing

   Font sizes controlled here, not via utility classes, so shrink
   transitions work (utility classes would override :where()).
   ================================================================= */

/* Logo image sizing */
:where(.theme-scope) .rb-header-logo-sm {
  height: 2.5rem;
  transition: height 300ms var(--motion-ease, ease);
}
:where(.theme-scope) .rb-header-logo-lg {
  height: 3rem;
  transition: height 300ms var(--motion-ease, ease);
}

/* Site title base font size (replaces rb-text-lg / rb-text-xl utilities) */
:where(.theme-scope) .header-logo-text {
  font-size: 1.125rem; /* matches rb-text-lg */
  line-height: 1.75rem;
  transition: font-size 300ms var(--motion-ease, ease);
}

/* Mobile: reduce site title size (~30%) to keep header compact */
@media (max-width: 767px) {
  :where(.theme-scope) .header-logo-text {
    font-size: 0.8rem;
    line-height: 1.25rem;
  }

  :where(.theme-scope) .header-variant-centered .header-logo-text,
  :where(.theme-scope) .header-variant-editorial .header-logo-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Centered/editorial variants use larger title */
:where(.theme-scope) .header-variant-centered .header-logo-text,
:where(.theme-scope) .header-variant-editorial .header-logo-text {
  font-size: 1.25rem; /* matches rb-text-xl */
  line-height: 1.75rem;
}

/* =================================================================
   Shrink on Scroll - Logo & Title
   ================================================================= */

:where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-sm {
  height: 2rem;
}
:where(.theme-scope) .rb-header-shrink.header-scrolled .rb-header-logo-lg {
  height: 2.5rem;
}
:where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
  font-size: 0.875rem;
}

@media (max-width: 767px) {
  :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
    font-size: 0.75rem;
  }
}

/* =================================================================
   Accessibility: Reduced Motion
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(.theme-scope) .rb-header-layout,
  :where(.theme-scope) .rb-header-logo-sm,
  :where(.theme-scope) .rb-header-logo-lg,
  :where(.theme-scope) .header-logo-text {
    transition: none;
  }
}

/* Nav underline-grow animation (used by navStyle: "underline-grow" in site-header.ts) */
:where(.theme-scope) .nav-underline-grow {
  position: relative;
  overflow: visible;
}
:where(.theme-scope) .nav-underline-grow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--nav-underline-offset, -0.35em);
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(var(--motion-duration) * 1.1) var(--motion-ease);
}
:where(.theme-scope) .nav-underline-grow:hover::after,
:where(.theme-scope)
  .nav-underline-grow.nav-underline-active[data-active="true"]::after {
  transform: scaleX(1);
}
:where(.theme-scope) .nav-underline-offset-tight {
  --nav-underline-offset: -0.2em;
}
:where(.theme-scope) .nav-underline-offset-normal {
  --nav-underline-offset: -0.3em;
}
:where(.theme-scope) .nav-underline-offset-loose {
  --nav-underline-offset: -0.45em;
}

:where(.theme-scope) .card-surface {
  background: rgb(var(--tb-surface));
  color: rgb(var(--tb-onSurface, var(--tb-text)));
  border: 1px solid rgb(var(--tb-border));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elev);
}
:where(.theme-scope) .media-rounded {
  border-radius: var(--radius-card);
}

:where(.theme-scope) .is-placeholder::after {
  content: "Placeholder";
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 11px;
  background: color-mix(in oklab, rgb(var(--tb-bg)), rgb(var(--tb-text)) 10%);
  color: rgb(var(--tb-text));
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  opacity: 0.85;
}

/* Status badges - theme-aware styling for capacity indicators */
:where(.theme-scope) .badge-status {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
}

/* All badges use a subtle theme-aware style by default */
:where(.theme-scope) .badge-status-available {
  background-color: rgba(var(--tb-secondary), 0.15);
  color: rgb(var(--tb-secondary-700, var(--tb-secondary)));
}

:where(.theme-scope) .badge-status-low {
  background-color: rgba(var(--tb-accent), 0.15);
  color: rgb(var(--tb-accent-700, var(--tb-accent)));
}

:where(.theme-scope) .badge-status-sold-out {
  background-color: rgba(var(--tb-text), 0.1);
  color: rgb(var(--tb-mutedText));
}

/* Event list empty state - theme-aware */
:where(.theme-scope) .event-list-empty {
  background-color: rgb(var(--tb-surface));
  color: rgb(var(--tb-onSurface, var(--tb-text)));
  border-color: rgb(var(--tb-border));
}
} /* end @layer rb-theme */


@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

:where(.theme-scope) [data-animation="accordion"][data-state="open"] {
  animation: accordion-down 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

:where(.theme-scope) [data-animation="accordion"][data-state="closed"] {
  animation: accordion-up 0.3s cubic-bezier(0.4, 0, 1, 1);
}


/* =============================================================================
 * Shared: Registration Terminal State Icons
 * Used by event-registration and course-registration blocks.
 *
 * Layout rules only — block-specific colors are defined in each block's CSS
 * via scoped `.rb-state-icon--{variant}` rules.
 * ============================================================================= */

:where(.theme-scope) .rb-state-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.theme-scope) .rb-state-icon svg {
  width: 2rem;
  height: 2rem;
}


/* =============================================================================
 * Block: Event Registration (pilot #76)
 * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)
 * =============================================================================
 */

:where(.theme-scope) :where([data-block="event-registration"]) {
  --rb-event-tile-bg: var(--er-event-card-bg);
  --rb-event-tile-border: var(--er-border);
  --rb-event-tile-border-width: var(--er-event-card-border-width);
  --rb-event-tile-border-hover: var(--er-border-hover);
  --rb-event-tile-border-selected: var(--er-border-selected);
  --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);
  --rb-event-tile-bg-selected: rgba(var(--tb-primary), 0.1);
  --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
  --er-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
  --er-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
  --er-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
  --er-on-surface-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);
  --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);
}

/* Container */
:where(.theme-scope) :where([data-block="event-registration"]) .er-container {
  border-radius: var(--rb-block-radius);
  border: 1px solid var(--er-border);
  padding: 1.5rem;
  background: rgb(var(--tb-surface));
  color: var(--er-on-surface);
  transition: border-color var(--rb-block-transition) ease;
  width: 100%;
  max-width: 800px;
  margin-inline: 0;
}

/* Empty/unavailable states */
:where(.theme-scope) :where([data-block="event-registration"]) .er-empty {
  border-radius: var(--rb-block-radius);
  border: 1px dashed var(--er-border);
  padding: 3rem;
  text-align: center;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-empty__text {
  opacity: 0.6;
}

/* Capacity badges */
:where(.theme-scope) :where([data-block="event-registration"]) .er-capacity-badge {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: calc(var(--rb-block-radius) * 0.5);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-capacity-badge--available {
  background: var(--er-capacity-available-bg);
  color: var(--er-capacity-available-text);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-capacity-badge--low {
  background: var(--er-capacity-low-bg);
  color: var(--er-capacity-low-text);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-capacity-badge--soldout {
  background: var(--er-capacity-soldout-bg);
  color: var(--er-capacity-soldout-text);
}

/* Selected event summary */
:where(.theme-scope) :where([data-block="event-registration"]) .er-event-summary {
  padding: 1rem;
  border-radius: calc(var(--rb-block-radius) * 0.75);
  border: 1px solid var(--er-border);
}

/* Ticket counter */
:where(.theme-scope) :where([data-block="event-registration"]) .er-counter-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--er-border);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-counter-btn:hover:not(:disabled) {
  border-color: var(--er-border-hover);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-counter-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form inputs */
:where(.theme-scope) :where([data-block="event-registration"]) .er-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--rb-block-radius) * 0.5);
  border: 1px solid var(--er-border);
  background: transparent;
  transition: border-color var(--rb-block-transition) ease,
              box-shadow var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-input:focus {
  outline: none;
  border-color: var(--er-border-selected);
  box-shadow: 0 0 0 3px var(--er-focus-ring);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-input--error {
  border-color: var(--er-border-error);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-input--error:focus {
  box-shadow: 0 0 0 3px rgba(var(--tb-destructive), 0.2);
}

/* Form labels and errors */
:where(.theme-scope) :where([data-block="event-registration"]) .er-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-required {
  color: var(--er-required);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-error {
  font-size: 0.875rem;
  color: var(--er-error-text);
  margin-top: 0.25rem;
}

/* Back button */
:where(.theme-scope) :where([data-block="event-registration"]) .er-back-btn {
  font-size: 0.875rem;
  opacity: 0.7;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-back-btn:hover {
  opacity: 1;
}

/* State icon color variants (layout from registration-shared.css) */
:where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--success {
  background: var(--er-success-bg);
  color: var(--er-success-text);
}

:where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--info {
  background: var(--er-info-bg);
  color: var(--er-info-text);
}

:where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--error {
  background: var(--er-error-bg);
  color: var(--er-error-text);
}

:where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--waitlist {
  background: var(--er-waitlist-bg);
  color: var(--er-waitlist-text);
}

:where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--warning {
  background: var(--er-waitlist-bg);
  color: var(--er-waitlist-text);
}

/* Retry button */
:where(.theme-scope) :where([data-block="event-registration"]) .er-retry-btn {
  padding: 0.5rem 1rem;
  border-radius: calc(var(--rb-block-radius) * 0.5);
  border: 1px solid var(--er-border);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-retry-btn:hover {
  border-color: var(--er-border-hover);
}

/* Typography */
:where(.theme-scope) :where([data-block="event-registration"]) .er-title {
  font-size: var(--er-step-title-size, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-title--lg {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-text {
  font-size: 0.875rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-text--muted {
  opacity: 0.7;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-text--faint {
  opacity: 0.6;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-event-title {
  font-weight: 500;
  margin: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-event-card {
  color: var(--er-on-surface);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-event-card .er-event-title {
  color: var(--er-on-surface);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-event-card .er-text {
  color: var(--er-on-surface);
  margin: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-event-card .er-text--muted {
  color: var(--er-on-surface-muted);
  opacity: 1;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-event-card .er-text--faint {
  color: var(--er-on-surface-faint);
  opacity: 1;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-event-card--disabled {
  color: var(--er-on-surface-disabled);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-event-card--disabled .er-text--muted,
:where(.theme-scope) :where([data-block="event-registration"]) .er-event-card--disabled .er-text--faint {
  color: var(--er-on-surface-disabled-detail);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-counter-value {
  font-size: 1.5rem;
  font-weight: 700;
  width: 2rem;
  text-align: center;
}

/* Layout */
:where(.theme-scope) :where([data-block="event-registration"]) .er-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-stack--sm {
  gap: 0.75rem;
}

/* Event selection cards grid (1 col mobile, 2 cols on larger screens) */
:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-row--between {
  justify-content: space-between;
  align-items: flex-start;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-center {
  text-align: center;
  padding: 2rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* When there's only one button (no back), push to the right */
:where(.theme-scope) :where([data-block="event-registration"]) .er-actions > :only-child {
  margin-inline-start: auto;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-button-with-spinner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-button-spinner {
  flex-shrink: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-altcha {
  margin-top: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-field + .er-field {
  margin-top: 0.75rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-message {
  margin-bottom: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-existing-registration-notice {
  margin-bottom: 1rem;
  width: 100%;
  padding: 1.25rem;
  border: 1px solid var(--er-border);
  border-radius: var(--rb-block-radius);
  background: rgba(var(--tb-surface), 0.5);
  text-align: center;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-existing-registration-title {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-existing-registration-notice .rb-state-icon {
  margin: 0 auto 0.75rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-existing-registration-copy {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--er-on-surface-muted);
  line-height: 1.4;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-existing-registration-link {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  color: rgb(var(--tb-primary));
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-existing-registration-link:hover {
  text-decoration: none;
}

/* Payment group container */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-group + .er-payment-group {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--er-border);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-group-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-group-subtitle {
  font-size: 0.8125rem;
  color: var(--er-on-surface-subtle);
  margin: 0 0 0.5rem 0;
}

/* Payment option card */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 2px solid var(--er-payment-border);
  border-radius: var(--rb-block-radius);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--rb-block-transition) ease,
              background-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option:hover {
  border-color: var(--er-payment-border-hover);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option--selected {
  border-color: var(--er-payment-border-selected);
  background-color: var(--er-payment-bg-selected);
}

/* Visually hide native radio but keep focusable (sr-only pattern) */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus ring on label when radio is focused */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option:focus-within {
  outline: 2px solid var(--er-payment-border-selected);
  outline-offset: 2px;
}

/* Content layout */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option-name {
  font-weight: 500;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option-detail {
  font-size: 0.875rem;
  color: var(--er-on-surface-muted);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option-description {
  font-size: 0.8125rem;
  color: var(--er-on-surface-subtle);
  margin-top: 0.25rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option-validity {
  font-size: 0.75rem;
  color: var(--er-on-surface-faint);
}

/* Checkmark indicator */
:where(.theme-scope) :where([data-block="event-registration"]) .er-check {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--er-check-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-check svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--er-check-text);
}

/* Payment summary */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-summary {
  margin-bottom: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--er-on-surface);
}

/* Two-column layout (Desktop: sidebar, Mobile: stacked) */
:where(.theme-scope) :where([data-block="event-registration"]) .er-layout {
  display: grid;
  gap: 1.5rem;
  /* Mobile: single column, summary at top */
  grid-template-columns: 1fr;
  grid-template-areas:
    "summary"
    "main";
}

@media (min-width: 768px) {
  :where(.theme-scope) :where([data-block="event-registration"]) .er-layout {
    /* Desktop: main + sidebar */
    grid-template-columns: 1fr 300px;
    grid-template-areas: "main summary";
  }
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-layout-main {
  grid-area: main;
}

/* OrderSummary positions via grid area */
:where(.theme-scope) :where([data-block="event-registration"]) .er-layout > .er-summary {
  grid-area: summary;
}

/* Step indicator */
:where(.theme-scope) :where([data-block="event-registration"]) .er-steps-nav {
  margin-bottom: 1.5rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--er-step-inactive);
  color: var(--er-step-text);
  transition: background-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--active {
  background: var(--er-step-active);
  color: var(--er-step-text-active);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--completed {
  background: var(--er-step-completed);
  color: var(--er-step-text-active);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-step-check {
  width: 0.75rem;
  height: 0.75rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector {
  width: 2rem;
  height: 2px;
  background: var(--er-step-connector);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector--completed {
  background: var(--er-step-connector);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
  font-size: 0.75rem;
  color: var(--er-on-surface);
  display: none;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label--active {
  font-weight: 500;
}

@media (min-width: 640px) {
  :where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
    display: inline;
  }
}

/* Sticky order summary */
:where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
  padding: 1.25rem;
  background: var(--er-summary-bg);
  border: 1px solid var(--er-summary-border);
  border-radius: var(--rb-block-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 140px;
}

@media (min-width: 768px) {
  :where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
    position: sticky;
    top: 1rem;
  }
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-event {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-date {
  font-size: 0.875rem;
  color: rgba(var(--tb-text), 0.7);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-tickets {
  font-size: 0.875rem;
  margin-top: 0.75rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-price {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

/* Guest details section */
:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-section {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-section .er-title {
  margin: 0 0 0.75rem;
}

/* Error banner for guest section */
:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-section-error {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: var(--er-error-bg);
  border: 1px solid var(--er-border-error);
  border-radius: calc(var(--rb-block-radius) * 0.5);
  color: var(--er-error-text);
  font-size: 0.875rem;
}

/* Card-based layout for guests */
:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-card {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-card .er-field + .er-field {
  margin-top: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-card + .er-guest-card {
  border-top: 1px solid var(--er-border);
}

@media (min-width: 768px) {
  :where(.theme-scope) :where([data-block="event-registration"]) .er-guest-card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
  }
}

/* Shake animation for validation errors */
@keyframes er-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-section--shake {
  animation: er-shake 0.4s ease-in-out;
}

/* =============================================================================
 * Shared: Event Cards (Listing / Spotlight / Combined)
 * Uses:
 * - Tier 1 vars: --tb-*-{shade} (from theme palette)
 * - Tier 2 vars: --rb-block-transition (from theme scope)
 * - Tier 3 vars: --rb-event-card-* (from event-calendar + event-cards var generators)
 * =============================================================================
 */

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card-media {
  height: var(--rb-event-card-media-height, 16rem);
  overflow: hidden;
  position: relative;
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--rb-event-card-image-transition-duration, 700ms) ease;
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card:hover .event-card-image {
  transform: scale(var(--rb-event-card-image-hover-scale, 1.08));
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card {
  transition: transform var(--rb-block-transition) ease;
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card:hover {
  transform: translateY(var(--rb-event-card-hover-translate-y, 0px));
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--rb-event-card-overlay-color, rgb(var(--tb-primary)));
  opacity: var(--rb-event-card-overlay-opacity, 0);
  mix-blend-mode: var(--rb-event-card-overlay-blend-mode, multiply);
  transition: opacity var(--rb-block-transition) ease;
  pointer-events: none;
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card:hover .event-card-overlay {
  opacity: var(--rb-event-card-overlay-hover-opacity, 0);
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-category-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1rem;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
  }

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-category-badge--overlay {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  margin-bottom: 0;
  pointer-events: none;
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card-badges,
:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card-badge,
:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-card-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1rem;
  color: rgb(var(--tb-text));
  background: rgba(var(--tb-border), 0.6);
}

/* =============================================================================
 * EventCard: Horizontal Layout (stack mode, md+ screens only)
 * ============================================================================= */

@media (min-width: 768px) {
  :where(.theme-scope)
    :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
    .event-card[data-orientation="horizontal"] {
    display: flex;
    flex-direction: row;
    gap: var(--rb-event-card-horizontal-gap, 1rem);
  }

  /* Image: ~1/3 width */
  :where(.theme-scope)
    :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
    .event-card[data-orientation="horizontal"] .event-card-media {
    width: var(--rb-event-card-horizontal-image-width, 33.333%);
    min-width: 200px;
    max-width: 320px;
    height: auto;
    aspect-ratio: 4/3;
    flex-shrink: 0;
  }

  /* Content: fills remaining space */
  :where(.theme-scope)
    :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
    .event-card[data-orientation="horizontal"] .card-content {
    flex: 1;
    min-width: 0;
  }

  /* Footer: row layout with button on left, capacity on right */
  :where(.theme-scope)
    :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
    .event-card[data-orientation="horizontal"] .event-card-footer {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }

  /* Button: auto width */
  :where(.theme-scope)
    :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
    .event-card[data-orientation="horizontal"] .event-card-cta {
    width: auto;
  }

  /* Capacity: right-aligned */
  :where(.theme-scope)
    :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
    .event-card[data-orientation="horizontal"] .event-card-capacity {
    text-align: right;
  }
}

/* Keep token list in sync with `EVENT_CATEGORY_BADGE_TOKENS` in `packages/blocks/src/system/constants/events.ts`. */
:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-category-badge[data-category-token="primary"] {
  background-color: rgb(var(--tb-primary-200));
  color: rgb(var(--tb-primary-800));
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-category-badge[data-category-token="secondary"] {
  background-color: rgb(var(--tb-secondary-200));
  color: rgb(var(--tb-secondary-800));
}

:where(.theme-scope)
  :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
  .event-category-badge[data-category-token="accent"] {
  background-color: rgb(var(--tb-accent-200));
  color: rgb(var(--tb-accent-800));
}

/* Notice/info boxes */
:where(.theme-scope) :where([data-block="event-registration"]) .er-notice {
  padding: 0.75rem 1rem;
  border-radius: var(--er-radius);
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-notice p {
  margin: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-notice--info {
  background-color: rgba(var(--tb-primary-100), 0.5);
  border: 1px solid rgba(var(--tb-primary-300), 0.5);
  color: rgb(var(--tb-primary-800));
}

/* Disabled payment group */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-group--disabled {
  opacity: 0.6;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-group--disabled .er-payment-group-title {
  color: var(--er-on-surface-faint);
}

/* Disabled payment option */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-option--disabled:hover {
  border-color: var(--er-payment-border);
  background-color: transparent;
}

/* =============================================================================
 * Payment Step Layout (redesigned)
 * Three-area grid: main (tiles) + sidebar (portal auth) + footer (summary + actions)
 * =============================================================================
 */

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "sidebar"
    "main"
    "footer";
}

@media (min-width: 768px) {
  :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout {
    grid-template-columns: 1fr 260px;
    grid-template-areas:
      "main sidebar"
      "footer footer";
  }

  /* When no sidebar, main takes full width */
  :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout--no-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "footer";
  }
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout-main {
  grid-area: main;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout-sidebar {
  grid-area: sidebar;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout-footer {
  grid-area: footer;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* =============================================================================
 * Payment Tiles Grid
 * =============================================================================
 */

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 0.75rem;
  border: 2px solid var(--er-payment-border);
  border-radius: var(--rb-block-radius);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--rb-block-transition) ease,
              background-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile:hover:not([aria-disabled="true"]) {
  border-color: var(--er-payment-border-hover);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile--selected {
  border-color: var(--er-payment-border-selected);
  background-color: var(--er-payment-bg-selected);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile--disabled {
  cursor: not-allowed;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile--disabled > :not(.er-payment-tooltip) {
  opacity: 0.5;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile--disabled.er-payment-tile--selected {
  border-color: var(--er-payment-border);
  background-color: transparent;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile--disabled:hover {
  border-color: var(--er-payment-border);
}

/* Tooltip styling for disabled payment tiles */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile[aria-disabled="true"] {
  position: relative;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgb(var(--tb-text));
  color: rgb(var(--tb-background));
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: calc(var(--rb-block-radius) * 0.5);
  white-space: normal;
  max-width: 16rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 20px rgba(var(--tb-shadow), 0.28);
  z-index: 10;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile--disabled:hover .er-payment-tooltip {
  display: block;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile-icon {
  font-size: 1.5rem;
  line-height: 1;
  /* SVG icon sizing */
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile-icon svg {
  width: 24px;
  height: 24px;
  color: currentColor;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile-label {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile-detail {
  font-size: 0.8125rem;
  color: var(--er-on-surface-subtle);
  line-height: 1.2;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* Upsell tiles have a subtle indicator */
:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile--upsell {
  border-style: dashed;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-tile--upsell.er-payment-tile--selected {
  border-style: solid;
}

/* =============================================================================
 * Order Summary Bar (horizontal, in footer)
 * Layout: [Title + meta on left] [Price on right]
 * =============================================================================
 */

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: var(--er-summary-bg);
  border: 1px solid var(--er-summary-border);
  border-radius: var(--rb-block-radius);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-event {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-meta {
  font-size: 0.875rem;
  color: rgba(var(--tb-text), 0.7);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-price {
  font-size: 1.125rem;
  font-weight: 700;
  flex-shrink: 0;
  display: block;
  text-align: right;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  text-align: right;
}

/* Product section in summary bar (for pass/membership selection) */
:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-product {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(var(--tb-primary-100), 0.3);
  border-bottom: 1px solid var(--er-summary-border);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-product-name {
  font-weight: 600;
  font-size: 0.9375rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-pass-escape {
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--tb-primary));
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-pass-escape:hover {
  text-decoration: none;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-product-detail {
  font-size: 0.8125rem;
  color: rgba(var(--tb-text), 0.6);
  margin-top: 0.125rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-product-price {
  font-weight: 600;
  font-size: 0.9375rem;
  flex-shrink: 0;
  text-align: right;
}

/* Strikethrough price styling */
:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-price--struck {
  display: block;
  text-decoration: line-through;
  color: rgba(var(--tb-text), 0.5);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: right;
}

/* "Included" text styling */
:where(.theme-scope) :where([data-block="event-registration"]) .er-summary-bar-included {
  font-size: 0.8125rem;
  color: rgb(var(--tb-primary-600));
  font-weight: 500;
  text-align: right;
}

/* =============================================================================
 * Portal Auth Section (sidebar)
 * =============================================================================
 */

:where(.theme-scope) :where([data-block="event-registration"]) .er-portal-auth {
  padding: 1.25rem;
  background: rgba(var(--tb-surface), 0.5);
  border: 1px solid var(--er-border);
  border-radius: var(--rb-block-radius);
  color: var(--er-on-surface);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-portal-auth-title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-portal-auth-text {
  font-size: 0.9375rem;
  color: var(--er-on-surface-muted);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-portal-auth-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9375rem;
  color: rgb(var(--tb-primary));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-portal-auth-link:hover {
  text-decoration: none;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-portal-auth-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-portal-auth-text--success {
  color: rgb(var(--tb-success, 34 197 94));
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-portal-auth-text--error {
  color: rgb(var(--tb-error, 239 68 68));
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Modal */
:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--tb-scrim), 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal {
  background: rgb(var(--tb-background));
  border-radius: var(--rb-block-radius);
  padding: 1.5rem;
  max-width: 400px;
  width: 100%;
  position: relative;
  box-shadow: 0 10px 25px rgba(var(--tb-shadow), 0.2);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: rgba(var(--tb-text), 0.5);
  padding: 0.25rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-close:hover {
  color: rgb(var(--tb-text));
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-content .er-portal-auth-text {
  margin: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-btn {
  padding: 0.75rem 1.5rem;
  background: rgb(var(--tb-primary));
  color: rgb(var(--tb-primary-foreground, 255 255 255));
  border: none;
  border-radius: var(--rb-block-radius);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-btn:hover {
  opacity: 0.9;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-btn--secondary {
  background: transparent;
  color: rgb(var(--tb-text));
  border: 1px solid var(--er-border);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-modal-btn--secondary:hover {
  background: rgba(var(--tb-text), 0.05);
}

/* Magic Link Form */
:where(.theme-scope) :where([data-block="event-registration"]) .er-magic-link-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-magic-link-form .er-portal-auth-text {
  margin: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-magic-link-success {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-magic-link-success .er-portal-auth-text {
  margin: 0;
}

/* =============================================================================
 * Inline Links (.er-link)
 * For inline buttons styled as links (e.g., "Not you? Log out")
 * =============================================================================
 */

:where(.theme-scope) :where([data-block="event-registration"]) .er-link {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: rgb(var(--tb-primary));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-link:hover {
  text-decoration: none;
}

/* Logged-in user hint with logout link */
:where(.theme-scope) :where([data-block="event-registration"]) .er-logged-in-hint {
  font-size: 0.875rem;
  opacity: 0.7;
  margin: 0.25rem 0 0 0;
}

/* =============================================================================
 * Booking Mode Step
 * Early step for pass/membership holders to choose their payment mode
 * =============================================================================
 */

/* Hero message for membership holders */
:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-hero {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(var(--tb-primary-100), 0.4);
  border: 1px solid rgba(var(--tb-primary-300), 0.4);
  border-radius: var(--rb-block-radius);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-hero-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--tb-primary));
  margin-top: 0.125rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-hero-icon svg {
  width: 20px;
  height: 20px;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-hero-content {
  flex: 1;
  min-width: 0;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-hero-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.125rem 0;
  color: rgb(var(--tb-primary-800));
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-hero-subtitle {
  font-size: 0.875rem;
  color: rgb(var(--tb-primary-700));
  margin: 0;
}

/* Selection cards for pass holders */
:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  border: 2px solid var(--er-payment-border);
  border-radius: var(--rb-block-radius);
  background: transparent;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: border-color var(--rb-block-transition) ease,
              background-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card:hover:not([aria-disabled="true"]) {
  border-color: var(--er-payment-border-hover);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card--selected {
  border-color: var(--er-payment-border-selected);
  background-color: var(--er-payment-bg-selected);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card--disabled {
  opacity: 1;
  cursor: not-allowed;
  border-color: var(--er-payment-border);
  background: transparent;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card--disabled.er-booking-mode-card--selected {
  border-color: var(--er-payment-border);
  background: transparent;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card--disabled > :not(.er-booking-mode-tooltip) {
  opacity: 0.55;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card--disabled:hover {
  border-color: var(--er-payment-border);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card--disabled .er-booking-mode-card-icon,
:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card--disabled .er-booking-mode-card-label {
  color: var(--er-on-surface-disabled);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card--disabled .er-booking-mode-card-detail {
  color: var(--er-on-surface-disabled-detail);
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card-icon {
  font-size: 1.75rem;
  line-height: 1;
  /* SVG icon sizing */
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card-icon svg {
  width: 24px;
  height: 24px;
  color: currentColor;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card-label {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card-detail {
  font-size: 0.875rem;
  color: var(--er-on-surface-subtle);
  line-height: 1.3;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* Alternative link in booking mode */
:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-alt {
  margin-top: 1rem;
  text-align: center;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-alt-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9375rem;
  color: rgb(var(--tb-primary));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-alt-link:hover {
  text-decoration: none;
}

/* Tooltip styling for disabled options */
:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card[aria-disabled="true"] {
  position: relative;
}

/* Tooltip appears on hover for disabled cards */
:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgb(var(--tb-text));
  color: rgb(var(--tb-background));
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: calc(var(--rb-block-radius) * 0.5);
  white-space: normal;
  max-width: 16rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 20px rgba(var(--tb-shadow), 0.28);
  z-index: 10;
}

:where(.theme-scope) :where([data-block="event-registration"]) .er-booking-mode-card--disabled:hover .er-booking-mode-tooltip {
  display: block;
}



/* =============================================================================
 * Block: Event Calendar
 * Uses:
 * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)
 * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
 * - Tier 3 vars: --ec-* (from event-calendar var generator)
 * =============================================================================
 */

/* Main container */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar {
  width: 100%;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-container {
  border: 1px solid var(--ec-border);
  border-radius: var(--rb-block-radius);
  overflow: hidden;
}

/* Calendar navigation */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.5rem;
  border-radius: var(--rb-block-radius);
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: background-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-nav-btn:hover {
  background-color: var(--ec-nav-hover-bg);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-title {
  font-size: 1.125rem;
  font-weight: 600;
  min-width: 200px;
  text-align: center;
}

/* Day headers */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day-headers {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background-color: var(--ec-header-bg);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day-header {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: var(--ec-header-opacity);
  border-bottom: 1px solid var(--ec-border-subtle);
}

/* Calendar grid */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Day cells */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day {
  min-height: 100px;
  border-bottom: 1px solid var(--ec-border-subtle);
  border-right: 1px solid var(--ec-border-subtle);
  padding: 0.25rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day:nth-child(7n) {
  border-right: none;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day--today {
  background-color: var(--ec-today-bg);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day--other-month {
  opacity: var(--ec-other-month-opacity);
}

/* Day number */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day-number {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  padding: 0 0.25rem;
  opacity: var(--ec-day-number-opacity);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day--today .event-calendar-day-number {
  font-weight: 700;
  opacity: 1;
  color: var(--ec-today-text);
}

/* Events list */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-events {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Event item - solid primary background */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-event {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: calc(var(--rb-block-radius) / 2);
  background-color: var(--ec-event-solid-bg);
  color: var(--ec-event-solid-text);
  text-decoration: none;
  overflow: hidden;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition:
    background-color var(--rb-block-transition) ease,
    transform var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-event:hover {
  background-color: var(--ec-event-solid-hover-bg);
  transform: translateY(-1px);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-event:focus-visible {
  outline: 2px solid var(--ec-event-solid-bg);
  outline-offset: 2px;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-event-time {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
  opacity: 0.9;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-event-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* More indicator - clickable button style */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-more {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  color: rgb(var(--tb-primary));
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: calc(var(--rb-block-radius) / 2);
  font-family: inherit;
  transition: background-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-more:hover {
  background-color: rgba(var(--tb-primary), 0.1);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-more:focus-visible {
  outline: 2px solid rgb(var(--tb-primary));
  outline-offset: 2px;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-empty {
  text-align: center;
  font-size: 0.875rem;
  opacity: var(--ec-empty-opacity);
  margin-top: 1rem;
}

/* Filters container */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-filter {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 180px;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-filter-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* Event filter select inherits base styling from .form-select, only block-specific overrides here */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-filter-select {
  /* Use theme input radius instead of block radius for consistency with other form inputs */
  border-radius: var(--rb-input-radius, var(--rb-block-radius));
}

/* Category filter buttons */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-category-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--ec-border);
  border-radius: var(--rb-button-radius);
  cursor: pointer;
  color: var(--ec-text);
  transition: all var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-category-btn:hover:not(:disabled) {
  border-color: rgba(var(--tb-primary), 0.5);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-category-btn:focus-visible {
  outline: 2px solid rgb(var(--tb-primary));
  outline-offset: 2px;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-category-btn--active {
  background-color: rgb(var(--tb-primary));
  border-color: rgb(var(--tb-primary));
  color: var(--ec-event-solid-text);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-category-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Allow category filter to be wider for button group */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-filter:has(.event-category-buttons) {
  min-width: auto;
  flex: 1 1 auto;
}

/* Combined mode container */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-combined {
  width: 100%;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-combined-content {
  display: flex;
  flex-direction: column;
}

/* Calendar view toggle (Month/Week) in Combined mode */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-view-toggle {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-view-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--ec-border);
  border-radius: var(--rb-button-radius);
  cursor: pointer;
  color: var(--ec-text);
  opacity: 0.7;
  transition: all var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-view-btn:hover {
  opacity: 1;
  border-color: rgba(var(--tb-primary), 0.5);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-view-btn--active {
  opacity: 1;
  background-color: rgb(var(--tb-primary));
  border-color: rgb(var(--tb-primary));
  color: rgb(var(--tb-primaryText, 255 255 255));
}

/* -----------------------------------------------------------------------------
 * Week Agenda View
 * Vertical agenda layout for week view with rich event details
 * ----------------------------------------------------------------------------- */

/* Agenda week container */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-week {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual day section */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-day {
  border-bottom: 1px solid var(--ec-border-subtle);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-day:last-child {
  border-bottom: none;
}

/* Day header */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-day-header {
  padding: 0.75rem 0;
  background-color: var(--ec-header-bg);
  border-bottom: 1px solid var(--ec-border-subtle);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-day-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Today badge */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-day-today-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: rgb(var(--tb-primary));
  color: rgb(var(--tb-primaryText, 255 255 255));
  border-radius: var(--rb-button-radius);
}

/* Today highlight for entire day section */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-day--today .event-agenda-day-header {
  background-color: var(--ec-today-bg);
}

/* Day content area */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-day-content {
  padding: 0.75rem 0;
}

/* Events list within a day */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-day-events {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Empty day message */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-day-empty {
  font-size: 0.875rem;
  opacity: var(--ec-empty-opacity);
  margin: 0;
  padding: 0.25rem 0;
}

/* -----------------------------------------------------------------------------
 * Agenda Event Card
 * Rich event card for agenda view
 * ----------------------------------------------------------------------------- */

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: var(--ec-surface);
  border: 1px solid var(--ec-border-subtle);
  border-radius: var(--rb-block-radius);
  text-decoration: none;
  color: inherit;
  transition: all var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card:hover {
  border-color: rgba(var(--tb-primary), 0.5);
  background-color: var(--ec-event-bg);
}

/* Category color indicator */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-indicator {
  flex-shrink: 0;
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  min-height: 2.5rem;
}

/* Card content wrapper */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Header row: time + title */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-time {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: var(--ec-time-opacity);
  white-space: nowrap;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Details row: venue, price, capacity */
:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-details {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  opacity: 0.7;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-venue {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-price {
  font-weight: 500;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-capacity {
  font-weight: 500;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-agenda-card-capacity--full {
  color: rgb(var(--tb-error, 239 68 68));
  opacity: 1;
}

/* -----------------------------------------------------------------------------
 * Week Timetable View
 * Time-grid layout for recurring class schedules
 * ----------------------------------------------------------------------------- */

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-selector {
  display: none;
  gap: 0.375rem;
  overflow-x: auto;
  padding-bottom: 0.125rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-tab {
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ec-border);
  border-radius: var(--rb-button-radius);
  background: transparent;
  color: var(--ec-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  transition:
    background-color var(--rb-block-transition) ease,
    border-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-tab--active {
  background-color: rgb(var(--tb-primary));
  border-color: rgb(var(--tb-primary));
  color: rgb(var(--tb-primaryText, 255 255 255));
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-container {
  border: 1px solid var(--ec-border);
  border-radius: var(--rb-block-radius);
  overflow-x: auto;
  overflow-y: hidden;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-grid {
  display: grid;
  grid-template-columns: 4.5rem repeat(7, minmax(8rem, 1fr));
  min-width: 62rem;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-time-rail,
:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day {
  border-right: 1px solid var(--ec-border-subtle);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day:last-child {
  border-right: none;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-heading {
  min-height: 3.25rem;
  margin: 0;
  padding: 0.75rem 0.5rem;
  background-color: var(--ec-header-bg);
  border-bottom: 1px solid var(--ec-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day--today .event-timetable-day-heading {
  background-color: var(--ec-today-bg);
  color: var(--ec-today-text);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-today-badge {
  padding: 0.125rem 0.375rem;
  border-radius: var(--rb-button-radius);
  background-color: rgb(var(--tb-primary));
  color: rgb(var(--tb-primaryText, 255 255 255));
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-time-body,
:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-body {
  position: relative;
  height: clamp(34rem, calc(var(--event-timetable-range-minutes, 900) * 0.055rem), 56rem);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-time-body {
  background-color: var(--ec-header-bg);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-time-label {
  position: absolute;
  left: 0.625rem;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  opacity: 0.65;
  white-space: nowrap;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--ec-border-subtle);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event {
  position: absolute;
  min-height: 2.75rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--ec-border-subtle);
  border-left-width: 4px;
  border-radius: calc(var(--rb-block-radius) / 1.5);
  background-color: var(--ec-surface);
  color: var(--ec-text);
  box-shadow: 0 1px 2px rgba(var(--tb-text), 0.08);
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
  transition:
    border-color var(--rb-block-transition) ease,
    box-shadow var(--rb-block-transition) ease,
    transform var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event:hover {
  box-shadow: 0 4px 12px rgba(var(--tb-text), 0.12);
  transform: translateY(-1px);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event:focus-visible {
  outline: 2px solid rgb(var(--tb-primary));
  outline-offset: 2px;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-time,
:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-title,
:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-teacher,
:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-meta,
:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-capacity {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-time {
  font-size: 0.6875rem;
  font-weight: 700;
  opacity: var(--ec-time-opacity);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-title {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-teacher,
:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-meta {
  font-size: 0.6875rem;
  opacity: 0.72;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-capacity {
  font-size: 0.6875rem;
  font-weight: 600;
  opacity: 0.85;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-capacity--full {
  color: rgb(var(--tb-danger, 220 38 38));
  opacity: 1;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-empty {
  margin: 0;
  padding: 1rem 0.5rem;
  text-align: center;
  font-size: 0.8125rem;
  opacity: var(--ec-empty-opacity);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-empty {
  margin: 0.25rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  opacity: var(--ec-empty-opacity);
}

@media (max-width: 767px) {
  :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-selector {
    display: flex;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-container {
    overflow: hidden;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-grid {
    grid-template-columns: 4rem minmax(0, 1fr);
    min-width: 0;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day[data-selected="false"] {
    display: none;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day {
    border-right: none;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-time-rail {
    border-right: 1px solid var(--ec-border-subtle);
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-heading {
    justify-content: flex-start;
    padding-inline: 0.75rem;
  }
}

/* -----------------------------------------------------------------------------
 * Event Calendar Modals
 * Modal overlays for event details and day events list
 * ----------------------------------------------------------------------------- */

/* Modal overlay */
:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--ec-modal-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  animation: ec-modal-fade-in 150ms ease-out;
}

@keyframes ec-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal dialog */
:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal {
  position: relative;
  background: var(--ec-modal-bg);
  border-radius: var(--rb-block-radius);
  max-width: 28rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--ec-modal-shadow);
  animation: ec-modal-slide-in 200ms ease-out;
}

@keyframes ec-modal-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Event modal - constrained width for card */
:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal--event {
  max-width: 26rem;
}

/* Day modal */
:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal--day {
  max-width: 28rem;
}

/* Close button */
:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ec-text);
  opacity: 0.6;
  cursor: pointer;
  border-radius: 50%;
  transition:
    opacity var(--rb-block-transition) ease,
    background-color var(--rb-block-transition) ease;
  z-index: 10;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal-close:hover {
  opacity: 1;
  background-color: rgba(var(--tb-text), 0.1);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal-close:focus-visible {
  outline: 2px solid rgb(var(--tb-primary));
  outline-offset: 2px;
}

/* Modal header (for day modal) */
:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal-header {
  padding: 1.5rem 1.5rem 1rem;
  padding-right: 3rem; /* Space for close button */
  border-bottom: 1px solid var(--ec-border);
}

:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ec-text);
  margin: 0;
}

:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal-subtitle {
  font-size: 0.875rem;
  color: var(--ec-text);
  opacity: 0.7;
  margin: 0.25rem 0 0;
}

/* Modal content */
:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal-content {
  padding: 1rem;
}

/* Event modal: tighter padding for card */
:where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal--event .ec-modal-content {
  padding: 0.5rem;
}

/* Day events list */
:where(.theme-scope) :where([data-block="event-calendar"]) .ec-day-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

/* AgendaEventCard in button mode inherits most styles, just needs cursor */
:where(.theme-scope) :where([data-block="event-calendar"]) button.event-agenda-card {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-container {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day-header {
    font-size: 0.75rem;
    padding: 0.375rem 0.125rem;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day {
    min-height: 88px;
    padding: 0.125rem;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-title {
    font-size: 0.9375rem;
    min-width: 0;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-day-number {
    font-size: 0.75rem;
    margin-bottom: 0.125rem;
    padding: 0 0.125rem;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-event {
    justify-content: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.25rem;
    font-size: 0.6875rem;
    border-radius: calc(var(--rb-block-radius) / 3);
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-event-time {
    text-align: center;
    font-size: 0.625rem;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-event-title {
    display: none;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-more {
    padding: 0.125rem 0.25rem;
    font-size: 0.6875rem;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-header > button {
    margin-right: 0.25rem;
  }

  :where(.theme-scope) :where([data-block="event-calendar"]) .ec-modal {
    max-width: 100%;
    max-height: 85vh;
    margin: 0 0.5rem;
  }
}


/*
 * Shared: Tab bar (underline style)
 *
 * Used by:
 * - Event Calendar (combined list/calendar view)
 * - Customer Portal (section navigation)
 *
 * Styling is driven by --rb-tab-* CSS variables.
 */

:where(.theme-scope) .nav-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: var(--rb-tab-border-width, 1px) solid var(--rb-tab-border-color, rgb(var(--tb-border)));
  margin-bottom: 1.5rem;
}

:where(.theme-scope) .nav-tab {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: none;
  border-bottom: var(--rb-tab-active-border-width, 2px) solid transparent;
  margin-bottom: calc(-1 * var(--rb-tab-border-width, 1px));
  cursor: pointer;
  color: var(--rb-tab-text, rgb(var(--tb-text)));
  opacity: var(--rb-tab-opacity, 0.7);
  transition: all var(--rb-block-transition) ease;
}

:where(.theme-scope) .nav-tab:hover {
  opacity: 1;
}

:where(.theme-scope) .nav-tab--active {
  opacity: 1;
  border-bottom-color: var(--rb-tab-active-color, rgb(var(--tb-primary)));
  color: var(--rb-tab-active-color, rgb(var(--tb-primary)));
}



/* =============================================================================
 * Block: Appointment Booking
 * Uses:
 * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)
 * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
 * - Tier 3 vars: --ab-* (from appointment-booking var generator)
 * =============================================================================
 */

/* Main container */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-container {
  width: 100%;
}

/* Stack layout utilities */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--sm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--xs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Row layout */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row--between {
  justify-content: space-between;
}

/* Grid layout */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-grid {
  display: grid;
  gap: 0.75rem;
}

/* Center layout */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
  text-align: center;
  padding: 2rem;
}

/* Typography */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
  font-size: 1.5rem;
  font-weight: 700;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
  font-size: 0.875rem;
  font-weight: 500;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
  font-size: 0.875rem;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--sm {
  font-size: 0.75rem;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--muted {
  opacity: var(--ab-text-muted-opacity);
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--faint {
  opacity: var(--ab-text-faint-opacity);
}

/* Selection cards (service, resource, time slot) */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card {
  position: relative;
  padding: 1rem;
  border: 2px solid var(--ab-card-border);
  border-radius: var(--rb-block-radius);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--rb-block-transition) ease, background-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card:hover {
  border-color: var(--ab-card-border-hover);
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card--selected {
  border-color: var(--ab-card-border-selected);
  background-color: var(--ab-card-bg-selected);
}

/* Checkmark indicator */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--ab-check-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--ab-check-text);
}

/* Info box (service summary) */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-info-box {
  padding: 1rem;
  border: 1px solid var(--ab-card-border);
  border-radius: var(--rb-block-radius);
  background-color: var(--ab-muted-bg);
}

/* Alert states */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--rb-block-radius);
  font-size: 0.875rem;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--success {
  background-color: var(--ab-success-bg);
  color: var(--ab-success-text);
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--error {
  background-color: var(--ab-error-bg);
  color: var(--ab-error-text);
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--warning {
  background-color: var(--ab-warning-bg);
  color: var(--ab-warning-text);
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--info {
  background-color: var(--ab-info-bg);
  color: var(--ab-info-text);
}

/* Form elements */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-required {
  color: var(--ab-error-text);
  margin-left: 0.125rem;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input,
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select,
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ab-input-border);
  border-radius: var(--rb-block-radius);
  background: transparent;
  font-size: 0.875rem;
  transition: border-color var(--rb-block-transition) ease, box-shadow var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input:focus,
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select:focus,
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea:focus {
  outline: none;
  border-color: var(--ab-card-border-selected);
  box-shadow: 0 0 0 3px var(--ab-input-focus-ring);
}

/* Buttons */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  border-radius: var(--rb-block-radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--rb-block-transition) ease, border-color var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary {
  flex: 1;
  background-color: var(--ab-btn-primary-bg);
  color: var(--ab-btn-primary-text);
  border: none;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary:hover:not(:disabled) {
  background-color: var(--ab-btn-primary-hover);
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary {
  background: transparent;
  border: 1px solid var(--ab-btn-secondary-border);
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary:hover:not(:disabled) {
  background-color: var(--ab-btn-secondary-hover);
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link {
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: underline;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link:hover {
  text-decoration: none;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Actions row */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Skeleton loading */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-skeleton {
  height: 2.5rem;
  width: 100%;
  background-color: var(--ab-muted-bg);
  border-radius: var(--rb-block-radius);
  animation: ab-pulse 1.5s ease-in-out infinite;
}

@keyframes ab-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Field wrapper */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Altcha wrapper */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
  margin-top: 1rem;
}

/* Link button (inline text link) */
:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
  display: inline;
  margin-left: 0.5rem;
  color: rgb(var(--tb-primary));
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link:hover {
  text-decoration: none;
}

/* =============================================================================
 * Form Block (fb-*)
 *
 * Uses:
 * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive
 * - Tier 2 vars: --rb-block-radius
 * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*
 *
 * Note: Form input styling (form-input, form-select, etc.) is handled by
 * the input CSS generator. These styles are for form container/state only.
 * ============================================================================= */

/* Form container */
:where(.theme-scope) :where([data-block="form"]) .fb-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Two-column row (opt-in per field via schema layout) */
:where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  :where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Field wrapper */
:where(.theme-scope) :where([data-block="form"]) .fb-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Fieldset (for radio groups) */
:where(.theme-scope) :where([data-block="form"]) .fb-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: none;
  padding: 0;
  margin: 0;
}

/* Inline field (checkbox, radio with label) */
:where(.theme-scope) :where([data-block="form"]) .fb-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Success state */
:where(.theme-scope) :where([data-block="form"]) .fb-success {
  background-color: var(--fb-success-bg);
  color: var(--fb-success-text);
  border: 1px solid var(--fb-success-border);
  border-radius: var(--rb-block-radius);
  padding: 1rem;
  font-size: 0.875rem;
}

/* Error banner */
:where(.theme-scope) :where([data-block="form"]) .fb-error {
  background-color: var(--fb-error-bg);
  color: var(--fb-error-text);
  border: 1px solid var(--fb-error-border);
  border-radius: var(--rb-block-radius);
  padding: 0.75rem;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

/* Empty state (no form data) */
:where(.theme-scope) :where([data-block="form"]) .fb-empty {
  background-color: var(--fb-empty-bg);
  color: var(--fb-empty-text);
  border: 1px dashed var(--fb-empty-border);
  border-radius: var(--rb-block-radius);
  padding: 1.5rem;
  font-size: 0.875rem;
  text-align: center;
}

/* Form actions (submit button container) */
:where(.theme-scope) :where([data-block="form"]) .fb-actions {
  margin-top: 0.5rem;
}



/* =============================================================================
 * Block: Hero (Phase 2)
 * Uses theme palette vars directly (no Tier 3 vars needed)
 * =============================================================================
 */

/* Eyebrow - color only (typography via .rb-eyebrow) */
:where(.theme-scope) :where([data-block="hero"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {
  color: var(--section-text-color, rgb(var(--tb-text)));
}

/* Subheadline - supporting text below headline */
:where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
  font-size: 1.125rem;
  color: var(--section-text-color, rgb(var(--tb-text)));
}

@media (min-width: 640px) {
  :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
    font-size: 1.25rem;
  }
}

/* =============================================================================
 * Shared: Heading Group (used by CTA, single-button, etc.)
 * =============================================================================
 */

/* Eyebrow - color only (typography via .rb-eyebrow) */
:where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {
  color: rgb(var(--tb-mutedText));
}



/* =============================================================================
 * Block: CTA (Phase 2)
 * =============================================================================
 */

/* CTA content/body text */
:where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
  color: rgb(var(--tb-mutedText));
}

/* CTA button row container */
:where(.theme-scope) :where([data-block="cta-full"]) .cta-row {
  display: flex;
  flex-wrap: wrap;
}



/* =============================================================================
 * Block: Body Text (content block, Phase 2)
 *
 * Style contract:
 * - Variant styling is keyed off `data-block-variant` on the PageRenderer wrapper.
 * - Prose sizing comes from `rb-prose-*` (theme-aware) in `packages/blocks/src/theme/styles.css`.
 * =============================================================================
 */

/* Body copy rich text container */
:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container {
  max-width: 48rem;
  margin-left: 0;
  margin-right: auto;
}

:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container.rb-items-center {
  margin-left: auto;
  margin-right: auto;
}

/* Body copy rich text */
:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body {
  color: inherit;
}

/* Ensure editing mode doesn't silently change typography inside ProseMirror */
:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body :where(.ProseMirror) {
  font-size: inherit;
  line-height: inherit;
}

/* Variant: Intro (centered, wider container, larger text, relaxed leading) */
:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-container {
  max-width: 60rem;
}

:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
  font-size: var(--rb-prose-lg-font-size);
  line-height: var(--rb-prose-lg-line-height);
}

@media (min-width: 640px) {
  :where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
    font-size: var(--rb-prose-xl-sm-font-size);
    line-height: var(--rb-prose-xl-sm-line-height);
  }
}

/* Variant: Narrow (left-aligned, shorter line length) */
:where(.theme-scope) :where([data-block="body-text"][data-block-variant="narrow"]) .body-copy-container {
  max-width: 34rem;
  margin-left: 0;
  margin-right: auto;
}

/* Override prose sizing via theme-aware vars (see styles.css) */
:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) {
  /* Mobile-first: use rb-prose-lg sizing below 640px */
  --rb-prose-lg-font-size: clamp(
    calc(var(--fs-body, 16px) * 1.35),
    calc(var(--fs-body, 16px) * 1.1 + 1.25vw),
    calc(var(--fs-body, 16px) * 1.6)
  );
  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);

  /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */
  --rb-prose-xl-sm-font-size: clamp(
    calc(var(--fs-body, 16px) * 1.55),
    calc(var(--fs-body, 16px) * 1.25 + 1.5vw),
    calc(var(--fs-body, 16px) * 1.8)
  );
  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);
}



/* =============================================================================
 * Block: Form (formCopy fragment, Phase 2)
 * =============================================================================
 */

/* Form title */
:where(.theme-scope) :where([data-block="form"]) .form-copy-title {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Form intro text */
:where(.theme-scope) :where([data-block="form"]) .form-copy-intro {
  font-size: 1rem;
  color: rgb(var(--tb-text));
}

/* =============================================================================
 * Block-Level Override Utilities
 *
 * These utility classes replace Tailwind theming utilities for block-level
 * settings like "raised" and "rounded". They use fixed values to match
 * Tailwind's defaults while allowing us to remove theming classes from safelist.
 * =============================================================================
 */

/* Border Radius Utilities (replaces rounded-*) */
:where(.theme-scope) .rb-rounded-sm {
  border-radius: 0.125rem;
}

:where(.theme-scope) .rb-rounded-md {
  border-radius: 0.375rem;
}

:where(.theme-scope) .rb-rounded-lg {
  border-radius: 0.5rem;
}

:where(.theme-scope) .rb-rounded-xl {
  border-radius: 0.75rem;
}

:where(.theme-scope) .rb-rounded-2xl {
  border-radius: 1rem;
}

:where(.theme-scope) .rb-rounded-full {
  border-radius: 9999px;
}

/* Shadow Utilities (defined in rb-utilities.css; theme-driven via --shadow-*) */



/* =============================================================================
 * Block: Event List (Phase 3 client component migration)
 * =============================================================================
 */

/* Empty state container */
:where(.theme-scope) .event-list-empty {
  border-radius: 0.75rem; /* rounded-xl equivalent */
  border: 1px dashed rgb(var(--tb-border));
  padding: 3rem;
  text-align: center;
}

/* Reset filters button in empty state */
:where(.theme-scope) .event-reset-filters-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--tb-primary));
  background: transparent;
  border: 1px solid rgb(var(--tb-primary));
  border-radius: var(--rb-button-radius, 0.375rem);
  cursor: pointer;
  transition: background-color var(--rb-block-transition, 150ms) ease,
              color var(--rb-block-transition, 150ms) ease;
}

:where(.theme-scope) .event-reset-filters-btn:hover {
  background-color: rgb(var(--tb-primary));
  color: rgb(var(--tb-primaryText, 255 255 255));
}

:where(.theme-scope) .event-reset-filters-btn:focus-visible {
  outline: 2px solid rgb(var(--tb-primary));
  outline-offset: 2px;
}



/* =============================================================================
 * Block: Carousel Navigation (Phase 3 client component migration)
 * =============================================================================
 */

/* Layout
 *
 * Keep slide sizing/spacing as a single source of truth, shared by:
 * - SSR fallback (scrollable shell)
 * - Hydrated Embla carousel
 *
 * We use the padding/margin approach for slide spacing:
 * - Slides have symmetric left/right padding (half the gap each side)
 * - Track has negative margins to keep first/last slide flush with viewport edges
 * - This works reliably with Embla's position calculations
 *
 * Slides-per-view is provided via CSS vars set on `.carousel-root`:
 * - --rb-carousel-slides-to-show-mobile
 * - --rb-carousel-slides-to-show-tablet (optional)
 * - --rb-carousel-slides-to-show-desktop (optional)
 */
:where(.theme-scope) .carousel-root {
  --rb-carousel-slide-spacing: 1rem;
  --rb-carousel-slides-to-show: var(--rb-carousel-slides-to-show-mobile, 1);
}

:where(.theme-scope) .carousel-root.rb-image-gallery-carousel--full-bleed {
  --rb-carousel-slide-spacing: 0;
}

@media (min-width: 768px) {
  :where(.theme-scope) .carousel-root {
    --rb-carousel-slides-to-show: var(
      --rb-carousel-slides-to-show-tablet,
      var(--rb-carousel-slides-to-show-mobile, 1)
    );
  }
}

@media (min-width: 1024px) {
  :where(.theme-scope) .carousel-root {
    --rb-carousel-slides-to-show: var(
      --rb-carousel-slides-to-show-desktop,
      var(
        --rb-carousel-slides-to-show-tablet,
        var(--rb-carousel-slides-to-show-mobile, 1)
      )
    );
  }
}

/* Slides take exact percentage width with internal padding for gaps.
 * Padding is more reliable than margin (no collapsing, consistent on all slides). */
:where(.theme-scope) .carousel-root .carousel-slide,
:where(.theme-scope) .carousel-root .rb-overflow-x-auto > .rb-flex > * {
  flex: 0 0 calc(100% / var(--rb-carousel-slides-to-show));
  min-width: 0;
  box-sizing: border-box;
  padding-left: calc(var(--rb-carousel-slide-spacing) / 2);
  padding-right: calc(var(--rb-carousel-slide-spacing) / 2);
}

/* Navigation buttons + dots are intentionally Tailwind-free and scoped to the
 * hydrated carousel root to avoid leaking styles globally. */
:where(.theme-scope) .carousel-root .carousel-nav-btn {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--tb-border, 229 231 235), 0.35);
  background-color: rgba(var(--tb-surface, 248 250 252), 0.9);
  color: rgb(var(--tb-text, 17 24 39));
  box-shadow: 0 4px 6px -1px rgba(var(--tb-shadow), 0.1),
    0 2px 4px -2px rgba(var(--tb-shadow), 0.1);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.2s ease, box-shadow 0.2s ease,
    opacity 0.2s ease;
}

:where(.theme-scope) .carousel-root .carousel-nav-btn--prev {
  left: 0.5rem;
}

:where(.theme-scope) .carousel-root .carousel-nav-btn--next {
  right: 0.5rem;
}

:where(.theme-scope) .carousel-root .carousel-nav-btn:hover {
  background-color: rgb(var(--tb-surface, 248 250 252));
  box-shadow: 0 10px 15px -3px rgba(var(--tb-shadow), 0.1),
    0 4px 6px -4px rgba(var(--tb-shadow), 0.1);
}

:where(.theme-scope) .carousel-root .carousel-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.theme-scope) .carousel-root .carousel-nav-icon {
  width: 1rem;
  height: 1rem;
}

/* Hover-only arrows (no group-hover utilities in SDK runtime) */
:where(.theme-scope) .carousel-root[data-arrow-visibility="hover"] .carousel-nav-btn {
  opacity: 0;
  pointer-events: none;
}
:where(.theme-scope) .carousel-root[data-arrow-visibility="hover"]:hover .carousel-nav-btn,
:where(.theme-scope) .carousel-root[data-arrow-visibility="hover"]:focus-within .carousel-nav-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Dots */
:where(.theme-scope) .carousel-root .carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Dots overlaid on the bottom of the carousel (used for image-dominant variants). */
:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  z-index: 10;
  margin-top: 0;
  padding: 0.5rem 0.75rem;
  pointer-events: none;
}
:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {
  pointer-events: auto;
}

:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {
  background-color: rgba(var(--tb-surface, 248 250 252), 0.55);
}
:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot:hover {
  background-color: rgba(var(--tb-surface, 248 250 252), 0.75);
}
:where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot[data-active="true"] {
  background-color: rgb(var(--tb-text, 17 24 39));
}

:where(.theme-scope) .carousel-root .carousel-dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  border: none;
  background-color: rgb(var(--tb-border, 229 231 235));
  transition: background-color 0.2s ease;
}

:where(.theme-scope) .carousel-root .carousel-dot:hover {
  background-color: rgba(var(--tb-text, 17 24 39), 0.3);
}

:where(.theme-scope) .carousel-root .carousel-dot[data-active="true"] {
  background-color: rgb(var(--tb-text, 17 24 39));
}

:where(.theme-scope) .carousel-root .carousel-dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tb-primary, 59 130 246), 0.35);
}



/* =============================================================================
 * Block: Shop
 * Uses theme palette vars directly
 * ============================================================================= */

/* Shop container */
:where(.theme-scope) .shop {
  width: 100%;
}

:where(.theme-scope) :where([data-block="shop"]) {
  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
  --rb-modal-shadow: var(--shadow-lg, var(--shadow-elev));
  --rb-modal-z-index: 20000;
}

:where(.theme-scope) .shop--empty {
  text-align: center;
  padding: 3rem 1rem;
}

:where(.theme-scope) .shop__empty-text {
  color: rgb(var(--tb-mutedText));
  font-size: var(--fs-body, 1rem);
}

/* Error display */
:where(.theme-scope) .shop__error {
  background-color: rgba(var(--tb-destructive), 0.1);
  color: rgb(var(--tb-destructive));
  padding: 0.75rem 1rem;
  border-radius: var(--radius-control, 0.375rem);
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* Sections */
:where(.theme-scope) .shop__section {
  margin-bottom: 2rem;
}

:where(.theme-scope) .shop__section:last-child {
  margin-bottom: 0;
}

:where(.theme-scope) .shop__section-heading {
  font-size: var(--fs-h3, 1.25rem);
  font-weight: 600;
  color: rgb(var(--tb-text));
  margin-bottom: 1rem;
  font-family: var(--font-heading);
}

/* Products grid/list layout */
:where(.theme-scope) .shop__products--grid {
  display: grid;
  grid-template-columns: repeat(var(--shop-columns, 2), 1fr);
  gap: 1rem;
}

:where(.theme-scope) .shop__products--list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Product card */
:where(.theme-scope) .shop__card {
  background: rgb(var(--tb-surface));
  border: 1px solid rgb(var(--tb-border));
  border-radius: var(--radius-card, 0.5rem);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* No hover shadow (buttons + theme do the emphasis) */

:where(.theme-scope) .shop__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

:where(.theme-scope) .shop__card-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(var(--tb-text));
  margin: 0;
  font-family: var(--font-heading);
}

:where(.theme-scope) .shop__card-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(var(--tb-primary));
  white-space: nowrap;
}

:where(.theme-scope) .shop__card-interval {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgb(var(--tb-mutedText));
}

:where(.theme-scope) .shop__card-description {
  font-size: 0.875rem;
  color: rgb(var(--tb-mutedText));
  line-height: 1.5;
  margin: 0;
}

:where(.theme-scope) .shop__card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
  color: rgb(var(--tb-text));
}

:where(.theme-scope) .shop__card-credits {
  font-weight: 500;
}

:where(.theme-scope) .shop__card-per-credit {
  color: rgb(var(--tb-mutedText));
}

:where(.theme-scope) .shop__card-validity {
  color: rgb(var(--tb-mutedText));
}

:where(.theme-scope) .shop__card-unlimited {
  font-weight: 500;
  color: rgb(var(--tb-secondary, var(--tb-primary)));
}

/* CTA layout: use theme button classes for visuals */
:where(.theme-scope) .shop__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Responsive grid */
@media (max-width: 768px) {
  :where(.theme-scope) .shop__products--grid {
    grid-template-columns: 1fr;
  }
}

:where(.theme-scope) .shop__modal-product {
  font-size: 0.9375rem;
  color: rgb(var(--tb-mutedText));
  margin: 0 0 1rem;
}

:where(.theme-scope) .shop__modal-interval {
  font-size: 0.875rem;
}

/* Checkout form */
:where(.theme-scope) .shop__modal-form {
  margin-top: 0.25rem;
}

:where(.theme-scope) .shop__form-field {
  margin-bottom: 1rem;
}

/* Modal error */
:where(.theme-scope) .shop__modal-error {
  background-color: rgba(var(--tb-destructive), 0.1);
  color: rgb(var(--tb-destructive));
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-control, 0.375rem);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* Modal actions */
:where(.theme-scope) .shop__modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* Duplicate membership warning */
:where(.theme-scope) .shop__modal-warning {
  padding: 0.5rem 0 0;
}

:where(.theme-scope) .shop__modal-warning-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--tb-text));
  margin: 0 0 0.5rem;
}

:where(.theme-scope) .shop__modal-warning-text {
  font-size: 0.9375rem;
  color: rgb(var(--tb-mutedText));
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

:where(.theme-scope) .shop__modal-warning-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* Post-checkout return notice */
:where(.theme-scope) :where([data-block="shop"]) .shop__return {
  text-align: center;
  padding: 1.5rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgb(var(--tb-border));
  border-radius: var(--radius-card);
  background: rgb(var(--tb-surface));
}

:where(.theme-scope) :where([data-block="shop"]) .rb-state-icon--success {
  background: rgba(var(--tb-success), 0.12);
  color: rgb(var(--tb-success));
}

:where(.theme-scope) :where([data-block="shop"]) .rb-state-icon--warning {
  background: rgba(var(--tb-warning), 0.12);
  color: rgb(var(--tb-warning));
}

:where(.theme-scope) :where([data-block="shop"]) .shop__return-title {
  margin: 0.25rem 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: rgb(var(--tb-text));
}

:where(.theme-scope) :where([data-block="shop"]) .shop__return-text {
  margin: 0;
  opacity: 0.75;
}

:where(.theme-scope) :where([data-block="shop"]) .shop__return-dismiss {
  margin-top: 0.875rem;
}

/* Mobile: full-width CTA buttons inside cards */
@media (max-width: 640px) {
  :where(.theme-scope) .shop__cta {
    align-self: stretch;
    width: 100%;
  }
}



/* =============================================================================
 * Block: Customer Portal
 * Uses --cp-* CSS variables (Tier 3)
 * ============================================================================= */

/* Container */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-container {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  min-height: 200px;
}

/* Loading state */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-loading__text {
  color: var(--cp-muted);
  font-size: 0.9375rem;
}

/* Login form */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login {
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--cp-card-bg);
  border: 1px solid var(--cp-card-border);
  border-radius: var(--radius-card);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__title {
  margin: 0 0 0.5rem;
  text-align: left;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__subtitle {
  color: var(--cp-muted);
  font-size: 0.9375rem;
  text-align: left;
  margin: 0 0 1.5rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__helper {
  color: var(--cp-muted);
  font-size: 0.9375rem;
  text-align: left;
  margin: 0;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__success {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__reset-link {
  appearance: none;
  background: none;
  border: 0;
  color: var(--cp-muted);
  cursor: pointer;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__reset-link:hover {
  color: var(--cp-text);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__reset-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Form controls (layout only; actual form styling is theme-driven via .form-label/.form-input) */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Buttons: Uses theme button classes (primary, secondary, btn-sm, etc.) - no custom styles needed */

/* Alerts */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-control);
  font-size: 0.9375rem;
  line-height: 1.4;
  border-left: 4px solid transparent;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-alert--success {
  background: var(--cp-alert-success-bg);
  color: var(--cp-alert-success-text);
  border-color: var(--cp-alert-success-border);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-alert--error {
  background: var(--cp-alert-error-bg);
  color: var(--cp-alert-error-text);
  border-color: var(--cp-alert-error-border);
}

/* Header */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  margin-bottom: 1rem;
  border-bottom: none;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-header__welcome {
  font-size: 1.125rem;
  font-weight: 500;
}

/* Content area */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-content {
  min-height: 200px;
}

/* Section */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-section {
  animation: cp-fade-in 200ms ease;
}

@keyframes cp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Empty state */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--cp-card-bg);
  border: 1px dashed var(--cp-card-border);
  border-radius: var(--radius-card);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-empty__text {
  color: var(--cp-muted);
  font-size: 0.9375rem;
}

/* Card */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card {
  background: var(--cp-card-bg);
  border: 1px solid var(--cp-card-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--cp-text);
  margin: 0;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card-subtitle {
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card-body {
  font-size: 0.9375rem;
  color: var(--cp-text);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
  margin-top: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cp-border);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Badge */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-badge--success {
  background: var(--cp-badge-success-bg);
  color: var(--cp-badge-success-text);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-badge--warning {
  background: var(--cp-badge-warning-bg);
  color: var(--cp-badge-warning-text);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-badge--error {
  background: var(--cp-badge-error-bg);
  color: var(--cp-badge-error-text);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-badge--info {
  background: var(--cp-badge-info-bg);
  color: var(--cp-badge-info-text);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-badge--default {
  background: var(--cp-badge-default-bg);
  color: var(--cp-badge-default-text);
}

/* Progress bar (for credit display) */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-progress {
  height: 0.5rem;
  background: var(--cp-progress-bg);
  border-radius: 9999px;
  overflow: hidden;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-progress__fill {
  height: 100%;
  background: var(--cp-progress-fill);
  border-radius: 9999px;
  transition: width 300ms ease;
}

/* Profile display */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-profile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-profile__tiles {
  /* Use tiles as a mini "details grid" rather than event occurrence selection. */
  --rb-event-tile-bg: var(--cp-card-bg);
  --rb-event-tile-border: var(--cp-card-border);
  --rb-event-tile-radius: var(--radius-control);

  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-profile__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-profile__value {
  font-size: 1rem;
  color: var(--cp-text);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-profile__edit {
  align-self: flex-start;
}

/* Cards grid */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* A11y helpers */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Table */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-table-wrap {
  background: var(--cp-card-bg);
  border: 1px solid var(--cp-card-border);
  border-radius: var(--radius-card);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-table th,
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-table td {
  padding: 0.875rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--cp-border);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-table thead th {
  text-align: left;
  background: rgba(var(--tb-border), 0.2);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-table tbody tr:last-child td {
  border-bottom: none;
}

:where(.theme-scope) :where([data-block="customer-portal"]) :is(.cp-row--past, .cp-row--muted) {
  opacity: 0.65;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-title {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-title__badges {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-title__text {
  min-width: 0;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-meta {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-note {
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--cp-border);
  font-size: 0.8125rem;
  line-height: 1.35;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-note--success {
  border-left-color: rgb(var(--tb-success));
  color: rgb(var(--tb-success));
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-note--error {
  border-left-color: rgb(var(--tb-destructive));
  color: rgb(var(--tb-destructive));
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-muted {
  color: var(--cp-muted);
}

/* Table columns */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-col-tickets {
  white-space: nowrap;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-col-actions {
  text-align: right;
  white-space: nowrap;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-col-actions .btn-sm {
  white-space: nowrap;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-title__link {
  color: inherit;
  text-decoration: none;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-title__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Mobile-only row content within table cells */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-only-mobile {
  display: none;
}

/* Section title (for Upcoming/Past dividers) */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-section-title {
  margin: 0 0 1rem;
}

/* Past items (faded) */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card--past {
  opacity: 0.6;
}

/* Profile actions */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-profile__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Guest section in event cards */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guests {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cp-border);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guests__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guests__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cp-text);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guests__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest__name {
  color: var(--cp-text);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest__phone {
  color: var(--cp-muted);
  font-size: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guests__empty {
  font-size: 0.875rem;
  color: var(--cp-muted);
  font-style: italic;
  margin: 0;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guests__edit {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest-edit-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest-edit-row__index {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cp-muted);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest-edit-row__fields {
  display: flex;
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest-edit-row__fields input {
  flex: 1;
  min-width: 0;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guest-edit-row__error {
  font-size: 0.75rem;
  color: var(--cp-error);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-guests__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Actions modal */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-actions-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* In the actions modal, tiles sit on a surface modal, so use "background" for contrast. */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-actions-list :where(.rb-tile) {
  --rb-event-tile-bg: rgb(var(--tb-background));
  --rb-event-tile-border: rgb(var(--tb-border));
}

/* Actions trigger: icon-only kebab button */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-actions-trigger.btn-sm {
  padding: 0.35rem !important;
  line-height: 1 !important;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tickets live in their own column on desktop; show them inline on mobile. */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-meta-tickets {
  display: none;
}

/* Action tiles (use shared rb-tile primitive for base) */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-action-tile {
  appearance: none;
  font: inherit;
  text-align: left;
  display: grid;
  gap: 0.25rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-action-tile__title {
  font-weight: 600;
  font-size: 0.9375rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-action-tile__desc {
  font-size: 0.875rem;
  line-height: 1.35;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-action-tile--danger .cp-action-tile__title {
  color: rgb(var(--tb-destructive));
}

/* Modal form layout */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-form-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Button modifiers */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-btn--link {
  background: none;
  border: none;
  padding: 0;
  color: var(--cp-primary);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-btn--link:hover {
  color: var(--cp-primary-hover);
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-btn--xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Small input */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-input--sm {
  height: auto;
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
}

/* Input error state */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-input--error {
  border-color: var(--cp-error);
}
/* Small alert */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-alert--sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Membership cancel confirmation */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cancel-confirm {
  margin-top: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cancel-confirm__title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cancel-confirm__message {
  margin-bottom: 0.25rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cancel-confirm__warning {
  margin-bottom: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-cancel-confirm__actions {
  display: flex;
  gap: 0.75rem;
}

/* Membership actions */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-membership-actions {
  margin-top: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-section-actions {
  margin-top: 1rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-card-subtitle--spaced {
  margin-top: 0.75rem;
}

/* Alert spacing utilities */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-alert--mt {
  margin-top: 0.75rem;
}

:where(.theme-scope) :where([data-block="customer-portal"]) .cp-alert--mb {
  margin-bottom: 1rem;
}

/* Responsive: show everything without horizontal scrolling */
@media (max-width: 640px) {
  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-only-mobile {
    display: flex;
  }

  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table thead {
    display: none;
  }

  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table :is(th, td).cp-col-guests,
  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table :is(th, td).cp-col-tickets,
  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table :is(th, td).cp-col-actions {
    display: none;
  }

  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-meta-tickets {
    display: inline;
  }

  /* Make the cell a positioning context for the kebab */
  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-row > td:first-child {
    position: relative;
    padding-right: 2.5rem;
  }

  /* Position kebab in top-right of the cell */
  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-mobile-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    margin-top: 0;
  }

  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-row-mobile-actions .btn-sm {
    width: auto;
  }

  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-profile__edit {
    align-self: stretch;
  }
}

/* Placeholder (SSR) */
:where(.theme-scope) :where([data-block="customer-portal"]) .cp-placeholder {
  /* Styles for SSR placeholder */
}



/* =============================================================================
 * Runtime: Header Navigation Dropdown (Tailwind-free)
 *
 * The SDK runtime does not ship Tailwind's `group-hover:*` / `group-focus-within:*`
 * utilities, so dropdown menus must be controlled via plain CSS selectors.
 * =============================================================================
 */

:where(.theme-scope) .nav-dropdown:hover > .nav-dropdown-menu,
:where(.theme-scope) .nav-dropdown:focus-within > .nav-dropdown-menu,
:where(.theme-scope) .nav-dropdown .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
  display: block;
}



/* =============================================================================
 * Block: Testimonials
 * Uses CSS vars: --rb-testimonial-* (Tier 3) and --rb-block-* (Tier 2)
 * =============================================================================
 */

:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-avatar {
  width: var(--rb-testimonial-avatar-size);
  height: var(--rb-testimonial-avatar-size);
  border-radius: var(--rb-testimonial-avatar-border-radius);
}

:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-card {
  border-radius: var(--rb-block-radius);
}

:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-card.rb-card-treatment-accent-quote {
  border: 0;
  border-left: 5px solid rgb(var(--tb-secondary));
  border-radius: 0 calc(var(--rb-block-radius) * 3) 0 0;
  color: rgb(var(--tb-primaryForeground));
}

:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-quote {
  font-size: var(--rb-testimonial-quote-size);
  line-height: 1;
  font-weight: 700;
  opacity: var(--rb-testimonial-quote-opacity);
  color: rgb(var(--tb-primary));
}

:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-accent-quote .rb-testimonial-quote {
  color: rgb(var(--tb-secondary));
  font-size: calc(var(--rb-testimonial-quote-size) * 1.25);
  opacity: 1;
}


/* Testimonials carousel tweaks: arrow styling + gutters + equal-height cards */
:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn {
  height: var(--rb-testimonial-carousel-arrow-size);
  width: var(--rb-testimonial-carousel-arrow-size);
  border-color: var(--rb-testimonial-carousel-arrow-border-color);
  background-color: var(--rb-testimonial-carousel-arrow-bg);
  color: var(--rb-testimonial-carousel-arrow-color);
}

:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn:hover {
  background-color: var(--rb-testimonial-carousel-arrow-bg-hover);
}

:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-icon {
  width: var(--rb-testimonial-carousel-arrow-icon-size);
  height: var(--rb-testimonial-carousel-arrow-icon-size);
  stroke-width: var(--rb-testimonial-carousel-arrow-icon-stroke-width);
}

/* Equal-height cards: stretch track items and make cards fill */
:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-track {
  align-items: stretch;
}

:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-slide {
  display: flex;
}

:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-slide > * {
  flex: 1;
  width: 100%;
  height: 100%;
}

/* Prevent slide shadows from being clipped - add vertical padding to slides.
 * We don't use frame padding because it affects Embla's position calculations.
 * Horizontal shadow room comes from the slide's gap padding in carousel.css. */
:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-slide {
  padding-top: var(--rb-testimonial-carousel-shadow-pad);
  padding-bottom: var(--rb-testimonial-carousel-shadow-pad);
}

/* Anchor each arrow's outer edge to the container's outer edge.
 * .rb-container has 1rem horizontal padding + `overflow: hidden`, so pulling the
 * arrow out by exactly that padding puts the arrow center on the carousel content
 * edge without any of the button being clipped. */
:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {
  left: -1rem;
}

:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--next {
  right: -1rem;
}


/*
 * Event Details (runtime node)
 *
 * Keep these rules minimal and theme-driven.
 */

:where(.theme-scope) .event-details {
  width: 100%;
  max-width: 56.25rem; /* 900px */
  margin-inline: 0;
}

:where(.theme-scope) .event-details-map-wrap {
  max-width: 28rem;
}


/*
 * Shared: Tiles
 *
 * Used by:
 * - Event Registration: occurrence selection cards
 * - Event Details: "Other dates"
 * - Course Details: session tiles
 */

:where(.theme-scope) :where(.rb-tile, .er-event-card) {
  width: 100%;
  text-align: left;
  padding: 1rem;
  border-radius: var(--rb-event-tile-radius, calc(var(--rb-block-radius) * 0.75));
  border-style: var(--rb-event-tile-border-style, var(--rb-border-style, solid));
  border-width: var(--rb-event-tile-border-width, var(--rb-border-width, 1px));
  border-color: var(--rb-event-tile-border, rgb(var(--tb-border)));
  background: var(--rb-event-tile-bg, transparent);
  transition: border-color var(--rb-block-transition) ease,
              background-color var(--rb-block-transition) ease,
              opacity var(--rb-block-transition) ease;
  display: block;
  opacity: var(--rb-event-tile-opacity, 1);
  color: inherit;
  text-decoration: none;
}

:where(.theme-scope) .rb-tiles-grid {
  display: grid;
  grid-template-columns: repeat(var(--rb-tiles-grid-cols-sm, 2), minmax(0, 1fr));
  gap: var(--rb-event-tiles-grid-gap, 0.5rem);
}

@media (min-width: 768px) {
  :where(.theme-scope) .rb-tiles-grid {
    grid-template-columns: repeat(var(--rb-tiles-grid-cols-md, var(--rb-tiles-grid-cols-sm, 2)), minmax(0, 1fr));
  }
}

:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card) {
  cursor: pointer;
}

:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.25);
}

:where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):hover:not(:disabled) {
  border-color: var(--rb-event-tile-border-hover, rgba(var(--tb-primary), 0.5));
  opacity: var(--rb-event-tile-hover-opacity, var(--rb-event-tile-opacity, 1));
}

:where(.theme-scope) :where(.rb-tile--selected, .er-event-card--selected) {
  border-color: var(--rb-event-tile-border-selected, rgb(var(--tb-primary)));
  background: var(--rb-event-tile-bg-selected, rgba(var(--tb-primary), 0.1));
}

:where(.theme-scope) :where(.rb-tile--disabled, .er-event-card--disabled) {
  border-style: dashed;
  opacity: 0.5;
  cursor: not-allowed;
}


/*
 * Course Details (runtime node)
 * Minimal rules - most styling via rb-* utilities
 */

:where(.theme-scope) .course-details {
  width: 100%;
  max-width: 56.25rem; /* 900px */
  margin-inline: auto;
}

/* Description prose wrapper */
:where(.theme-scope) .course-details .cd-description {
  margin-top: 1rem;
}

/* "Showing X of Y" text */
:where(.theme-scope) .course-details .cd-sessions__more {
  margin-top: 0.5rem;
  opacity: 0.7;
  font-size: 0.875rem;
}

/* Enrollment status colors (using Tier 3 vars) */
:where(.theme-scope) .course-details .cd-enrollment--open {
  color: var(--cd-enrollment-open-text);
}

:where(.theme-scope) .course-details .cd-enrollment--closed {
  color: var(--cd-enrollment-closed-text);
}


/* =============================================================================
 * Block: Course Registration
 * Keep rules minimal and theme-driven; class names are prefixed with `cr-`.
 * =============================================================================
 */

/* Block-local surface text tokens for cards/modals that sit on theme surface. */
:where(.theme-scope) :where([data-block="course-registration"]) {
  --cr-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
  --cr-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);
}

/* Container */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-container {
  border-radius: var(--rb-block-radius);
  border: 1px solid var(--cr-border);
  padding: 1.5rem;
  background: rgb(var(--tb-surface));
  color: var(--cr-on-surface);
  max-width: 50rem; /* 800px */
  margin-inline: auto;
}

/* Empty/unavailable */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-empty {
  border-radius: var(--rb-block-radius);
  border: 1px dashed rgba(var(--tb-foreground), 0.2);
  padding: 2.5rem;
  text-align: center;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-empty__text {
  opacity: 0.7;
}

/* =============================================================================
 * Layout (two-column)
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  :where(.theme-scope) :where([data-block="course-registration"]) .cr-layout--with-sidebar {
    grid-template-columns: 1fr 280px;
  }
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-layout__main {
  min-width: 0;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-layout__sidebar {
  display: none;
}

@media (min-width: 768px) {
  :where(.theme-scope) :where([data-block="course-registration"]) .cr-layout__sidebar {
    display: block;
  }
}

/* =============================================================================
 * Step Indicator
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-circle {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--cr-step-inactive);
  color: var(--cr-step-text);
  transition: background-color 0.2s ease;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-circle--active {
  background: var(--cr-step-active);
  color: var(--cr-step-text-active);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-circle--completed {
  background: var(--cr-step-completed);
  color: var(--cr-step-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--tb-mutedText));
  display: none;
}

@media (min-width: 640px) {
  :where(.theme-scope) :where([data-block="course-registration"]) .cr-step-label {
    display: block;
  }
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-label--active {
  color: var(--cr-on-surface);
  font-weight: 600;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-connector {
  flex: 1;
  height: 2px;
  background: var(--cr-step-connector);
  min-width: 1rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-connector--completed {
  background: var(--cr-step-completed);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-check {
  width: 0.875rem;
  height: 0.875rem;
}

/* =============================================================================
 * Lists
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-list {
  display: grid;
  gap: 1rem;
}

/* =============================================================================
 * Course Cards
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card {
  border-radius: var(--rb-block-radius);
  border: 1px solid var(--cr-border);
  padding: 1rem;
  background: rgb(var(--tb-background));
  cursor: pointer;
  transition: border-color var(--rb-block-transition) ease, transform var(--rb-block-transition) ease;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card:hover {
  border-color: var(--cr-border-hover);
  transform: translateY(-1px);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card:focus-visible {
  outline: 2px solid var(--cr-focus-ring);
  outline-offset: 2px;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card--selected {
  border-color: var(--cr-border-selected);
  box-shadow: 0 0 0 3px var(--cr-focus-ring);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card__title {
  margin: 0 0 0.25rem 0;
  font-weight: 700;
  font-size: 1.125rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card__status {
  margin: 0.25rem 0 0 0;
  opacity: 0.8;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card__sessions,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card__price,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card__capacity,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-course-card__venue {
  margin: 0.25rem 0 0 0;
  opacity: 0.85;
}

/* =============================================================================
 * Capacity Badges
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-capacity-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-capacity-badge--available {
  background: var(--cr-capacity-available-bg);
  color: var(--cr-capacity-available-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-capacity-badge--low {
  background: var(--cr-capacity-low-bg);
  color: var(--cr-capacity-low-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-capacity-badge--soldout {
  background: var(--cr-capacity-soldout-bg);
  color: var(--cr-capacity-soldout-text);
}

/* =============================================================================
 * Summary + Details
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-details {
  display: grid;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-summary {
  border-radius: var(--rb-block-radius);
  border: 1px solid var(--cr-summary-border);
  padding: 1rem;
  background: var(--cr-summary-bg);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-summary__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-summary__sessions-title {
  margin: 0.75rem 0 0.5rem 0;
  font-weight: 700;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-summary__sessions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-summary__session {
  opacity: 0.9;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-summary__venue,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-summary__price,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-summary__membership {
  margin: 0.5rem 0 0 0;
  opacity: 0.9;
}

/* =============================================================================
 * Form
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-form {
  display: grid;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__field {
  display: grid;
  gap: 0.35rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__label {
  font-size: 0.875rem;
  font-weight: 600;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__label--required::after {
  content: ' *';
  color: var(--cr-required);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__input {
  border-radius: calc(var(--rb-block-radius) * 0.6);
  border: 1px solid var(--cr-border);
  padding: 0.6rem 0.75rem;
  background: rgb(var(--tb-background));
  color: rgb(var(--tb-foreground));
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__textarea {
  border-radius: calc(var(--rb-block-radius) * 0.6);
  border: 1px solid var(--cr-border);
  padding: 0.6rem 0.75rem;
  background: rgb(var(--tb-background));
  color: rgb(var(--tb-foreground));
  resize: vertical;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__input:focus,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__textarea:focus {
  outline: 2px solid var(--cr-focus-ring);
  outline-offset: 2px;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__input--error,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__textarea.cr-form__input--error {
  border-color: var(--cr-border-error);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__error {
  font-size: 0.875rem;
  color: var(--cr-error-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-form__hint {
  font-size: 0.875rem;
  opacity: 0.7;
}

/* Logged-in user hint with logout link */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-logged-in-hint {
  font-size: 0.875rem;
  opacity: 0.7;
  margin: 0.25rem 0 0 0;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-link {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: rgb(var(--tb-primary));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-link:hover {
  text-decoration: none;
}

/* =============================================================================
 * Actions
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-back-btn {
  border: 0;
  background: transparent;
  color: var(--cr-on-surface);
  opacity: 0.8;
  padding: 0.25rem 0.25rem;
  cursor: pointer;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-back-btn:hover {
  opacity: 1;
  text-decoration: underline;
}

/* =============================================================================
 * Payment Options
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment__options {
  display: grid;
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* =============================================================================
 * Payment Tiles (Card Grid)
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile {
  border-radius: var(--rb-block-radius);
  border: 1px solid var(--cr-payment-border);
  padding: 1rem;
  background: rgb(var(--tb-background));
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  position: relative;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile:hover {
  border-color: var(--cr-payment-border-hover);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile:focus-visible {
  outline: 2px solid var(--cr-focus-ring);
  outline-offset: 2px;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile--selected {
  border-color: var(--cr-payment-border-selected);
  background: var(--cr-payment-bg-selected);
  box-shadow: 0 0 0 3px var(--cr-focus-ring);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile--upsell {
  border-style: dashed;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile__name {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile__description {
  margin: 0.25rem 0 0 0;
  font-size: 0.875rem;
  opacity: 0.7;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile__price {
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile__badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Checkmark indicator on selected tile */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile__check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--cr-check-bg);
  color: var(--cr-check-text);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-tile--selected .cr-payment-tile__check {
  opacity: 1;
}

/* =============================================================================
 * Booking Mode Step
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-booking-mode {
  display: grid;
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-booking-mode__title {
  margin: 0;
  font-size: var(--cr-step-title-size);
  font-weight: 700;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-booking-mode__subtitle {
  margin: 0.25rem 0 0 0;
  opacity: 0.7;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-booking-mode__link {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-booking-mode__link a {
  color: rgb(var(--tb-primary));
  text-decoration: underline;
  cursor: pointer;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-booking-mode__link a:hover {
  text-decoration: none;
}

/* =============================================================================
 * Membership Hero
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-membership-hero {
  border-radius: var(--rb-block-radius);
  background: var(--cr-success-bg);
  border: 1px solid rgba(var(--tb-success), 0.2);
  padding: 1.5rem;
  text-align: center;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-membership-hero__icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-membership-hero__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cr-success-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-membership-hero__subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

/* =============================================================================
 * Portal Auth Sidebar
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-sidebar {
  border-radius: var(--rb-block-radius);
  border: 1px solid var(--cr-border);
  padding: 1.25rem;
  background: rgb(var(--tb-surface));
  color: var(--cr-on-surface);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-sidebar__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-sidebar__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-sidebar__text {
  margin: 0.5rem 0 0 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-sidebar__action {
  margin-top: 1rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-sidebar__link {
  color: rgb(var(--tb-primary));
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.875rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-sidebar__link:hover {
  text-decoration: none;
}

/* =============================================================================
 * Modal (for Magic Link)
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--tb-scrim), 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: cr-fade-in 0.15s ease;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-modal {
  background: rgb(var(--tb-surface));
  color: var(--cr-on-surface);
  border-radius: var(--rb-block-radius);
  padding: 1.5rem;
  max-width: 28rem;
  width: calc(100% - 2rem);
  position: relative;
  animation: cr-slide-up 0.2s ease;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-modal-close:hover {
  opacity: 1;
}

@keyframes cr-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cr-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.theme-scope) :where([data-block="course-registration"]) .cr-modal-overlay,
  :where(.theme-scope) :where([data-block="course-registration"]) .cr-modal {
    animation: none;
  }
}

/* =============================================================================
 * Center States
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-center {
  display: grid;
  place-items: center;
  gap: 0.75rem;
  padding: 2rem 0;
}

/* =============================================================================
 * Success/Waitlist/Error States
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-success,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-waitlist,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-error,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-failed {
  text-align: center;
  padding: 2rem 1rem;
}

/* State icon color variants (layout from registration-shared.css) */
:where(.theme-scope) :where([data-block="course-registration"]) .rb-state-icon--success {
  background: var(--cr-success-bg);
  color: var(--cr-success-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .rb-state-icon--error {
  background: var(--cr-error-bg);
  color: var(--cr-error-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .rb-state-icon--waitlist,
:where(.theme-scope) :where([data-block="course-registration"]) .rb-state-icon--warning {
  background: var(--cr-waitlist-bg);
  color: var(--cr-waitlist-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-success__title,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-waitlist__title,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-error__title,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-failed__title {
  margin: 0.75rem 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 700;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-success__message,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-waitlist__message,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-error__message,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-failed__message {
  margin: 0;
  opacity: 0.7;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-success__membership {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--cr-success-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-error__retry,
:where(.theme-scope) :where([data-block="course-registration"]) .cr-payment-failed__retry {
  margin-top: 1rem;
}

/* =============================================================================
 * Discount Code Section
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount {
  margin-top: 0.5rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__toggle {
  background: transparent;
  border: 0;
  padding: 0;
  color: rgb(var(--tb-primary));
  cursor: pointer;
  font-size: 0.875rem;
  text-decoration: underline;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__toggle:hover {
  text-decoration: none;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__field {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__input {
  flex: 1;
  border-radius: calc(var(--rb-block-radius) * 0.6);
  border: 1px solid var(--cr-border);
  padding: 0.5rem 0.75rem;
  background: rgb(var(--tb-background));
  color: rgb(var(--tb-foreground));
  font-size: 0.875rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__input:focus {
  outline: 2px solid var(--cr-focus-ring);
  outline-offset: 2px;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__remove {
  background: transparent;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
  opacity: 0.6;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__remove:hover {
  opacity: 1;
}

/* =============================================================================
 * Altcha (Spam Protection)
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-altcha {
  margin-top: 1rem;
}

/* =============================================================================
 * Magic Link Form
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-magic-link-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-magic-link-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-magic-link-success {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-auth-text {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-auth-text--success {
  color: var(--cr-success-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-portal-auth-text--error {
  color: var(--cr-error-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-modal-btn {
  border-radius: calc(var(--rb-block-radius) * 0.6);
  border: 0;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
  background: rgb(var(--tb-primary));
  color: rgb(var(--tb-primaryText, 255 255 255));
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-modal-btn:hover {
  opacity: 0.9;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-modal-btn--secondary {
  background: transparent;
  color: var(--cr-on-surface);
  border: 1px solid var(--cr-border);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-modal-btn--secondary:hover {
  background: var(--cr-on-surface-hover-bg);
}

/* =============================================================================
 * Utility Classes
 * =============================================================================
 */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-text--muted {
  opacity: 0.7;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-text--error {
  color: var(--cr-error-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-text--success {
  color: var(--cr-success-text);
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Stack utility */
:where(.theme-scope) :where([data-block="course-registration"]) .cr-stack {
  display: flex;
  flex-direction: column;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-stack--gap-sm {
  gap: 0.5rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-stack--gap-md {
  gap: 1rem;
}

:where(.theme-scope) :where([data-block="course-registration"]) .cr-stack--gap-lg {
  gap: 1.5rem;
}


/* =============================================================================
 * Block: Newsletter Signup
 * =============================================================================
 */

/* Newsletter copy styling */
:where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-title {
  font-size: 1.5rem;
  font-weight: 600;
}

:where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-subtitle {
  font-size: 1rem;
  color: rgb(var(--tb-text));
  opacity: 0.85;
}

/* Newsletter form container */
:where(.theme-scope) .newsletter-form {
  width: 100%;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

/* Newsletter form fields container */
:where(.theme-scope) .newsletter-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--rb-gap-sm, 0.75rem);
}

/* Individual field styling */
:where(.theme-scope) .newsletter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Required indicator */
:where(.theme-scope) .newsletter-required {
  color: rgb(var(--tb-primary));
  margin-left: 0.125rem;
}

/* Submit button container */
:where(.theme-scope) .newsletter-submit {
  margin-top: 0.5rem;
}

/* ALTCHA widget container */
:where(.theme-scope) .newsletter-altcha {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
}

/* Privacy note */
:where(.theme-scope) .newsletter-privacy-note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: rgb(var(--tb-muted-text));
  text-align: center;
}

/* =============================================================================
 * Inline Variant - Horizontal layout
 * =============================================================================
 */

:where(.theme-scope) .newsletter-inline .newsletter-form-fields {
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--rb-gap-sm, 0.75rem);
}

:where(.theme-scope) .newsletter-inline .newsletter-field {
  flex: 1 1 auto;
  min-width: 10rem;
}

:where(.theme-scope) .newsletter-inline .newsletter-submit {
  margin-top: 0;
  flex-shrink: 0;
}

/* Mobile fallback for inline variant */
@media (max-width: 640px) {
  :where(.theme-scope) .newsletter-inline .newsletter-form-fields {
    flex-direction: column;
  }

  :where(.theme-scope) .newsletter-inline .newsletter-field {
    min-width: 100%;
  }
}

/* =============================================================================
 * Success State
 * =============================================================================
 */

:where(.theme-scope) .newsletter-success {
  text-align: center;
}

:where(.theme-scope) .newsletter-success .fb-success {
  padding: 1rem 1.5rem;
  background-color: rgba(var(--tb-success, 34 197 94), 0.1);
  border-radius: var(--radius-md, 0.5rem);
  color: rgb(var(--tb-text));
}


/* =============================================================================
 * Block: Team Members
 * =============================================================================
 *
 * Site/theme authors sometimes need different thumbnail shapes/sizes without
 * changing global fragment defaults. We expose these controls on the block and
 * style them via data attributes on the `.rb-team-members` wrapper.
 */

/* Scope all block-static CSS to ThemeScope to avoid leaking into host apps/dashboard. */
:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-layout-align="left"]) {
  text-align: left;
}

:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-layout-align="left"]) :where(.rb-team-member) {
  align-items: flex-start;
  text-align: left;
}

@media (min-width: 1024px) {
  :where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-layout-width="lg-3-4-left"]) {
    width: 75%;
    margin-left: 0;
    margin-right: auto;
  }
}

:where(.theme-scope) :where([data-block="team-members"]) .rb-team-member-photo {
  display: block;
  width: 100%;
  height: auto;
}

:where(.theme-scope) :where([data-block="team-members"]) .rb-team-member-role {
  font-weight: 600;
}

/* Thumbnail sizing: map `data-image-col-size` to a sensible max thumbnail width. */
:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members) {
  --rb-team-thumb-max: 11.25rem; /* ~180px default */
  --rb-team-image-basis: 33.333%;
}

:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-image-col-size="1/4"]) {
  --rb-team-thumb-max: 8.75rem; /* ~140px */
  --rb-team-image-basis: 25%;
}

:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-image-col-size="1/3"]) {
  --rb-team-thumb-max: 11.25rem; /* ~180px */
  --rb-team-image-basis: 33.333%;
}

:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-image-col-size="2/5"]) {
  --rb-team-thumb-max: 13.75rem; /* ~220px */
  --rb-team-image-basis: 40%;
}

:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-image-col-size="1/2"]) {
  --rb-team-thumb-max: 17.5rem; /* ~280px */
  --rb-team-image-basis: 50%;
}

:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-image-col-size="2/3"]) {
  --rb-team-thumb-max: 22.5rem; /* ~360px */
  --rb-team-image-basis: 66.667%;
}

/* The wrap is the shape/padding boundary; ensure it expands within the grid cell. */
:where(.theme-scope) :where([data-block="team-members"]) .rb-team-member-photo-wrap {
  width: 100%;
  overflow: hidden;
}

/* In grid mode, cap thumbnail width so headshots don't dominate the card. */
:where(.theme-scope) :where([data-block="team-members"][data-block-variant="grid"]) :where(.rb-team-member-photo-wrap) {
  max-width: var(--rb-team-thumb-max);
}

:where(.theme-scope) :where([data-block="team-members"][data-block-variant="grid"]) :where(.rb-team-members[data-layout-align="center"]) :where(.rb-team-member-photo-wrap) {
  margin-left: auto;
  margin-right: auto;
}

/* Stack variant: always left-aligned, regardless of the block alignment field. */
:where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-members) {
  text-align: left;
}

:where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-member) {
  text-align: left;
  align-items: flex-start;
}

/* Stack items: add comfortable per-item vertical padding so entries breathe. */
:where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-member--stack) {
  padding-block: 1.25rem;
}

@media (min-width: 768px) {
  /* Stack variant: enforce real column ratio at md+ (fixes transform/fallback pitfalls). */
  :where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-member-photo-col) {
    flex: 0 0 var(--rb-team-image-basis);
  }

  /* Stack variant: increase media/text gap on desktop. */
  :where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-member--stack) {
    gap: 1.5rem;
  }

  /* Stack variant: optional vertical centering of text against thumbnail. */
  :where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-members[data-stack-content-align="center"]) :where(.rb-team-member--stack) {
    align-items: center;
  }

  /* Stack variant: image position control */
  :where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-members[data-stack-image-position="right"]) :where(.rb-team-member--stack) {
    flex-direction: row-reverse;
  }

  :where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-members[data-stack-image-position="alternate"]) :where(.rb-team-member--stack:nth-child(even)) {
    flex-direction: row-reverse;
  }
}

/* Thumbnail padding (space around image inside the item) */
:where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-pad="sm"] .rb-team-member-photo-wrap {
  padding: 0.5rem;
}

:where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-pad="md"] .rb-team-member-photo-wrap {
  padding: 1rem;
}

:where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-pad="lg"] .rb-team-member-photo-wrap {
  padding: 1.5rem;
}

/* Thumbnail shape */
:where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-shape="square"] .rb-team-member-photo,
:where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-shape="square"] .rb-team-member-photo-wrap {
  border-radius: 0;
}

:where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-shape="rounded"] .rb-team-member-photo,
:where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-shape="rounded"] .rb-team-member-photo-wrap {
  border-radius: 0.5rem;
}

:where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-shape="round"] .rb-team-member-photo,
:where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-shape="round"] .rb-team-member-photo-wrap {
  border-radius: 9999px;
}


:where(.theme-scope) .feedback-callout {
  background: rgba(var(--tb-surface, 248 250 252), 0.92);
  border-color: rgba(var(--tb-border, 226 232 240), 0.72);
  --rb-feedback-callout-bg-opacity: 0.1;
  --rb-feedback-callout-border-opacity: 0.24;
}

:where(.theme-scope) .feedback-callout[data-feedback-tone="info"] {
  --rb-feedback-callout-bg-opacity: 0.08;
  background: rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-bg-opacity));
  border-color: rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-border-opacity));
}

:where(.theme-scope) .feedback-callout[data-feedback-tone="success"] {
  background: rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-bg-opacity));
  border-color: rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-border-opacity));
}

:where(.theme-scope) .feedback-callout[data-feedback-tone="warning"] {
  --rb-feedback-callout-bg-opacity: 0.12;
  --rb-feedback-callout-border-opacity: 0.28;
  background: rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-bg-opacity));
  border-color: rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-border-opacity));
}

:where(.theme-scope) .feedback-callout[data-feedback-tone="error"] {
  --rb-feedback-callout-border-opacity: 0.26;
  background: rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-bg-opacity));
  border-color: rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-border-opacity));
}

:where(.theme-scope) .feedback-callout__title {
  margin: 0;
}

:where(.theme-scope) .feedback-callout__body > :first-child {
  margin-top: 0;
}

:where(.theme-scope) .feedback-callout__body > :last-child {
  margin-bottom: 0;
}


/* =============================================================================
 * Block: Event Compact Row
 * Dense row layout for event-calendar compact list mode
 * ============================================================================= */

:where(.theme-scope) .event-compact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgb(var(--tb-border, 229 231 235));
  transition: background-color 150ms ease;
}

:where(.theme-scope) .event-compact-row:last-child {
  border-bottom: none;
}

:where(.theme-scope) .event-compact-row:hover {
  background-color: rgba(var(--tb-primary, 0 0 0), 0.04);
}

:where(.theme-scope) .event-compact-row-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

:where(.theme-scope) .event-compact-row-top {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

:where(.theme-scope) .event-compact-row-title {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

:where(.theme-scope) .event-compact-row-datetime {
  font-size: 0.8125rem;
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
}

:where(.theme-scope) .event-compact-row-bottom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  opacity: 0.7;
}

:where(.theme-scope) .event-compact-row-venue {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

:where(.theme-scope) .event-compact-row-price {
  font-weight: 500;
}

:where(.theme-scope) .event-compact-row-status {
  font-weight: 500;
  opacity: 0.8;
}

:where(.theme-scope) .event-compact-row-cta {
  flex-shrink: 0;
  white-space: nowrap;
}


:where(.theme-scope) .section-state__callout {
  text-align: center;
  padding: 2rem;
}

:where(.theme-scope) .section-state__callout .feedback-callout__body {
  margin-inline: auto;
  max-width: 40rem;
}

:where(.theme-scope) .section-state__callout .feedback-callout__actions {
  justify-content: center;
}


@media (prefers-reduced-motion: reduce) {
  :where(.theme-scope) :where([data-rb-background-video="true"]) {
    display: none !important;
  }
}


