@layer ks-objects {
  .ks-page {
    min-block-size: 100dvh;
  }

  /* Hero banner: teal->green->gold diagonal gradient with light text. */
  .ks-hero-gradient {
    position: relative;
    padding-block: var(--ks-space-16);
    color: var(--ks-color-text-inverse);
    background: linear-gradient(
      135deg,
      var(--ks-color-primary-600),
      var(--ks-color-secondary-600),
      var(--ks-color-tertiary-600)
    );
  }

  /* Dark: deep teal fading to the near-black page surface. */
  .dark .ks-hero-gradient {
    background: linear-gradient(
      135deg,
      var(--ks-color-primary-900),
      var(--ks-color-surface-page) 70%
    );
  }

  /*
   * Content container.
   * Use inside sections to align text, media, cards, and tools.
   * Do not use this on the section root/background itself; backgrounds
   * should remain full width and place `.ks-container` inside.
   */
  .ks-container {
    inline-size: 100%;
    max-inline-size: var(--ks-container-max);
    margin-inline: auto;
    padding-inline: var(--ks-container-padding);
  }

  /* Responsive container matching Tailwind breakpoints. */
  .ks-container-responsive {
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--ks-container-padding);
  }

  /* Header chrome stays full-width even though it uses the responsive container. */
  .ks-header--app .ks-container-responsive {
    max-inline-size: none;
  }

  /* Breaks an element out of a centered, max-width, padded container to full
     viewport width. Apply to a hero root whose background must span edge-to-edge. */
  .ks-full-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .ks-content-container,
  .content-container {
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
  }

  .ks-section {
    padding-block: clamp(var(--ks-space-3), 2vw, var(--ks-space-6));
  }

  /* Reduced top padding for sections nested inside other section bands. */
  .ks-section--tight-top {
    padding-block-start: var(--ks-space-2);
  }

  /* Muted full-width section background band. */
  .ks-section-muted {
    background-color: var(--ks-color-surface-section);
  }

  /* Page-surface section background band. */
  .ks-section-page {
    background-color: var(--ks-color-surface-page);
  }

  /* Vertical gradient section band, subtly darkening downward. */
  .ks-section-gradient {
    background: linear-gradient(
      to bottom,
      var(--ks-color-surface-section),
      var(--ks-color-surface-section),
      color-mix(in srgb, var(--ks-color-surface-section) 92%, var(--ks-color-text-strong))
    );
  }

  /* Dark: text-strong flips light, so fade toward the darker page surface instead. */
  .dark .ks-section-gradient {
    background: linear-gradient(
      to bottom,
      var(--ks-color-surface-section),
      var(--ks-color-surface-section),
      var(--ks-color-surface-page)
    );
  }

  /* Positioning context that clips absolute child layers (e.g. ks-media-layer). */
  .ks-layer-clip {
    position: relative;
    overflow: hidden;
  }

  .ks-stack-xs {
    display: flex;
    flex-direction: column;
  }
  .ks-stack-xs > * + * {
    margin-block-start: var(--ks-space-2);
  }

  .ks-stack-sm {
    display: flex;
    flex-direction: column;
  }
  .ks-stack-sm > * + * {
    margin-block-start: var(--ks-space-3);
  }

  .ks-stack-md {
    display: flex;
    flex-direction: column;
  }
  .ks-stack-md > * + * {
    margin-block-start: var(--ks-space-6);
  }

  .ks-stack-lg {
    display: flex;
    flex-direction: column;
  }
  .ks-stack-lg > * + * {
    margin-block-start: var(--ks-space-8);
  }

  /* Full-height column that pushes first and last children apart. */
  .ks-stack-spread {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* Base cluster structure; the justify modifiers below carry it too, so they work standalone (gapless). */
  .ks-cluster-xs,
  .ks-cluster-sm,
  .ks-cluster-base,
  .ks-cluster-md,
  .ks-cluster-lg,
  .ks-cluster-center,
  .ks-cluster-end,
  .ks-cluster-between {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .ks-cluster-xs {
    gap: var(--ks-space-1);
  }

  .ks-cluster-sm {
    gap: var(--ks-space-2);
  }

  .ks-cluster-base {
    gap: var(--ks-space-3);
  }

  .ks-cluster-md {
    gap: var(--ks-space-4);
  }

  .ks-cluster-lg {
    gap: var(--ks-space-6);
  }

  /* Inline-flow cluster variant, e.g. inside inline text/data elements. */
  .ks-cluster-inline {
    display: inline-flex;
  }

  /* Align cluster content to the inline end. */
  .ks-cluster-end {
    justify-content: flex-end;
  }

  /* Center cluster content. */
  .ks-cluster-center {
    justify-content: center;
  }

  /* Top-align cluster items. */
  .ks-cluster-top {
    align-items: flex-start;
  }

  /* Keep cluster items on one line; let text wrap inside items. */
  .ks-cluster-nowrap {
    flex-wrap: nowrap;
  }

  .ks-cluster-nowrap > svg {
    flex-shrink: 0;
  }

  /* Space items evenly with space between. */
  .ks-cluster-between {
    justify-content: space-between;
  }

  .ks-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ks-space-4);
  }

  .ks-grid-2,
  .ks-grid-3,
  .ks-grid-4 {
    display: grid;
    gap: var(--ks-space-6);
    grid-template-columns: minmax(0, 1fr);
  }

  .ks-grid-desktop-2 {
    display: grid;
    gap: var(--ks-space-6);
    grid-template-columns: minmax(0, 1fr);
  }

  /* 1 col on mobile, main + aside (2fr/1fr) on large */
  .ks-grid-main-aside {
    display: grid;
    gap: var(--ks-space-6);
    grid-template-columns: minmax(0, 1fr);
  }

  /* 1 col on mobile, aside + main (1fr/2fr) on large */
  .ks-grid-aside-main {
    display: grid;
    gap: var(--ks-space-6);
    grid-template-columns: minmax(0, 1fr);
  }

  /* 2 cols on mobile, 3 cols on medium+ */
  .ks-grid-2-3 {
    display: grid;
    gap: var(--ks-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 2 cols on mobile, 3 cols on medium, 4 cols on large */
  .ks-grid-2-3-4 {
    display: grid;
    gap: var(--ks-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 1 col on mobile, 3 cols on medium, 4 cols on desktop */
  .ks-grid-3-4 {
    display: grid;
    gap: var(--ks-space-6);
    grid-template-columns: minmax(0, 1fr);
  }

  /* 2 cols on mobile, 4 on medium, 5 on large */
  .ks-grid-2-4-5 {
    display: grid;
    gap: var(--ks-space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Media gallery embeds render views without their display title. */
  .artist-media-gallery .views-element-container > h2 {
    display: none;
  }

  .ks-show-mobile {
    display: block;
  }

  .ks-hide-mobile {
    display: none;
  }

  .ks-show-mobile.ks-cluster-sm,
  .ks-show-mobile.ks-cluster-md,
  .ks-show-mobile.ks-cluster-lg {
    display: flex;
  }

  @media (min-width: 640px) {
    .ks-container,
    .ks-container-responsive {
      --ks-container-padding: 1.5rem;
    }

    .ks-container-responsive {
      max-inline-size: 640px;
    }

    .ks-content-container,
    .content-container {
      max-inline-size: 40rem;
    }

  }

  @media (min-width: 768px) {
    .ks-container-responsive {
      max-inline-size: 768px;
    }

    .ks-show-mobile {
      display: none;
    }

    .ks-show-mobile.ks-cluster-sm,
    .ks-show-mobile.ks-cluster-md,
    .ks-show-mobile.ks-cluster-lg {
      display: none;
    }

    .ks-hide-mobile {
      display: block;
    }

    .ks-hide-mobile.ks-cluster-sm,
    .ks-hide-mobile.ks-cluster-md,
    .ks-hide-mobile.ks-cluster-lg {
      display: flex;
    }
  }

  /* Visibility utilities */
  .ks-hidden,
  .hidden {
    display: none;
  }

  /* Visibility utilities (5-tier system)
     lg:  1024px - desktop (primary switch)
     xl:  1200px - wide
     xxl: 1536px - extra-wide
  */

  /* Base: mobile-first defaults */
  .ks-show-lg { display: none; }
  .ks-hide-lg { display: block; }
  .ks-show-xl { display: none; }
  .ks-hide-xl { display: block; }
  .ks-show-xxl { display: none; }
  .ks-hide-xxl { display: block; }

  .ks-hide-lg.ks-cluster-sm,
  .ks-hide-lg.ks-cluster-md,
  .ks-hide-lg.ks-stack-xs,
  .ks-hide-lg.ks-stack-md {
    display: flex;
  }

  /* JS-toggled .hidden/.ks-hidden always wins over show/hide utilities */
  .ks-hide-lg.hidden,
  .ks-hide-lg.ks-hidden,
  .ks-show-lg.hidden,
  .ks-show-lg.ks-hidden {
    display: none;
  }

  /* Desktop switch at 1024px (lg) */
  @media (min-width: 1024px) {
    .ks-container-responsive {
      max-inline-size: 1024px;
    }

    .ks-show-lg { display: block; }

    .ks-show-lg.ks-stack-xs,
    .ks-show-lg.ks-stack-md {
      display: flex;
    }

    .ks-hide-lg,
    .ks-hide-lg.ks-cluster-sm,
    .ks-hide-lg.ks-cluster-md,
    .ks-hide-lg.ks-stack-xs,
    .ks-hide-lg.ks-stack-md {
      display: none;
    }
  }

  /* Wide switch at 1200px (xl) */
  @media (min-width: 1200px) {
    .ks-show-xl { display: block; }
    .ks-hide-xl { display: none; }
  }

  /* TW xl breakpoint at 1280px */
  @media (min-width: 1280px) {
    .ks-container-responsive {
      max-inline-size: 1280px;
    }
  }

  /* Extra-wide switch at 1536px (xxl) */
  @media (min-width: 1536px) {
    .ks-container-responsive {
      max-inline-size: 1536px;
    }

    .ks-show-xxl { display: block; }
    .ks-hide-xxl { display: none; }

    /* Ultra-wide container */
    .ks-container-xxl {
      max-width: 120rem;
    }

    /* 7/8-column grids for ultra-wide displays */
    .ks-grid-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .ks-grid-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }

  /* Tablet step: 2 columns from md, before the 3/4-column desktop switch. */
  @media (min-width: 768px) {
    .ks-grid-2,
    .ks-grid-3,
    .ks-grid-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .ks-content-container,
    .content-container {
      max-inline-size: 48rem;
      padding-inline: 1.5rem;
    }

    .ks-grid-2,
    .ks-grid-3,
    .ks-grid-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ks-grid-2-3,
    .ks-grid-2-3-4 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ks-grid-3-4 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ks-grid-2-4-5 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

  }

  @media (min-width: 1024px) {
    .ks-container,
    .ks-container-responsive {
      --ks-container-padding: 2rem;
    }

    .ks-content-container,
    .content-container {
      max-inline-size: 64rem;
      padding-inline: 2rem;
    }

    .ks-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ks-grid-4,
    .ks-grid-2-3-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ks-grid-main-aside {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      align-items: start;
    }

    .ks-grid-aside-main {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      align-items: start;
      gap: var(--ks-space-8);
    }

    /* Narrower aside variant: 1fr/3fr instead of 1fr/2fr. */
    .ks-grid-aside-main--narrow {
      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }

    /* Sticks below the fixed header on desktop only. */
    .ks-sticky-desktop {
      position: sticky;
      inset-block-start: 6rem;
    }

    .ks-grid-desktop-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }

    .ks-grid-3-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

  }

  @media (min-width: 1200px) {
    .ks-content-container,
    .content-container {
      max-inline-size: 96rem;
    }

    .ks-grid-2-4-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  /* Vertical video + sidebar layout */
  .ks-video-sidebar-layout {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-6);
  }

  @media (min-width: 768px) {
    .ks-video-sidebar-layout {
      flex-direction: row;
      align-items: flex-start;
    }

    .ks-video-sidebar-layout > .ks-video-column {
      flex: 0 0 auto;
      width: 20rem;
      position: sticky;
      top: var(--ks-space-6);
    }

    .ks-video-sidebar-layout > .ks-content-column {
      flex: 1;
      min-width: 0;
    }
  }

  @media (min-width: 1200px) {
    .ks-video-sidebar-layout > .ks-video-column {
      width: 24rem;
    }
  }

  /* Responsive order utilities */
  .ks-order-1 { order: 1; }
  .ks-order-2 { order: 2; }

  @media (min-width: 1200px) {
    .ks-xl-order-1 { order: 1; }
    .ks-xl-order-2 { order: 2; }
  }

  /* Text alignment utilities */
  .ks-text-center { text-align: center; }
  .ks-text-end { text-align: end; }

  /* Center clusters inside center-aligned containers */
  .ks-text-center .ks-cluster-sm,
  .ks-text-center .ks-cluster-md,
  .ks-text-center .ks-cluster-lg {
    justify-content: center;
  }

  /* Center content when stacked (below xl breakpoint) */
  .ks-center-stacked {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ks-center-stacked .ks-cluster-sm,
  .ks-center-stacked .ks-cluster-md,
  .ks-center-stacked .ks-cluster-lg {
    justify-content: center;
  }

  @media (min-width: 1024px) {
    .ks-center-stacked {
      text-align: start;
      align-items: flex-start;
    }

    .ks-center-stacked .ks-cluster-sm,
    .ks-center-stacked .ks-cluster-md,
    .ks-center-stacked .ks-cluster-lg {
      justify-content: flex-start;
    }
  }

  /* Constrained block: full width up to 24rem, centered. */
  .ks-constrain-sm {
    inline-size: 100%;
    max-inline-size: 24rem;
    margin-inline: auto;
  }

  /* Constrained media block: full width up to 28rem, centered; end-aligned on desktop */
  .ks-constrain-md {
    inline-size: 100%;
    max-inline-size: 28rem;
    margin-inline: auto;
  }

  @media (min-width: 1024px) {
    .ks-constrain-md {
      margin-inline: auto 0;
    }
  }

  /* Keeps ks-constrain-md centered at all widths (cancels the desktop end-align). */
  .ks-constrain-md--center {
    margin-inline: auto;
  }

  /* Constrained text block: full width up to 48rem, centered. */
  .ks-constrain-lg {
    inline-size: 100%;
    max-inline-size: 48rem;
    margin-inline: auto;
  }

  /* Start-aligns a ks-constrain-* block (cancels the auto centering). */
  .ks-constrain--start {
    margin-inline: 0;
  }

  /* Fill the parent's block size (stretch through wrapper layers). */
  .ks-fill-block {
    block-size: 100%;
  }

  /* Full-viewport flex column for focused pages (auth, confirmations). */
  .ks-viewport-column {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
  }

  /* Fills remaining flex space and vertically centers its content. */
  .ks-viewport-center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--ks-space-6);
  }

  /* Centered, non-repeating background image; URL is set inline at runtime. */
  .ks-bg-center {
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Background image scaled to cover the element; pair with ks-bg-center. */
  .ks-bg-cover {
    background-size: cover;
  }

  /* Flex box centering its content on both axes. */
  .ks-place-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Horizontal swipe strip: scroll-snapped flex row with hidden scrollbar. */
  .ks-scroll-row {
    display: flex;
    gap: var(--ks-space-6);
    overflow-x: auto;
    padding-block-end: var(--ks-space-4);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ks-scroll-row::-webkit-scrollbar {
    display: none;
  }

  .ks-scroll-row > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Accordion: collapsible list built on native <details>/<summary>. */
  .ks-accordion__item {
    background-color: var(--ks-color-surface-card);
    border: 1px solid var(--ks-color-border-default);
    border-radius: var(--ks-radius-md);
    overflow: hidden;
  }

  .ks-accordion__summary {
    display: flex;
    align-items: center;
    gap: var(--ks-space-4);
    padding: var(--ks-space-3) var(--ks-space-4);
    cursor: pointer;
    list-style: none;
  }

  .ks-accordion__summary::-webkit-details-marker {
    display: none;
  }

  .ks-accordion__summary:hover {
    background-color: var(--ks-color-surface-section);
  }

  /* Growing middle column holds order number + date, pushing the rest right. */
  .ks-accordion__summary-main {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-2);
    flex: 1 1 auto;
    min-inline-size: 0;
    text-align: start;
  }

  .ks-accordion__thumb {
    flex-shrink: 0;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: var(--ks-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ks-color-surface-section);
  }

  .ks-accordion__thumb :where(img) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .ks-accordion__total {
    white-space: nowrap;
  }

  .ks-accordion__chevron {
    flex-shrink: 0;
    color: var(--ks-color-text-muted);
    transition: transform 0.2s var(--ks-ease-standard);
  }

  .ks-accordion__item[open] .ks-accordion__chevron {
    transform: rotate(180deg);
  }

  .ks-accordion__panel {
    padding: var(--ks-space-4);
    border-block-start: 1px solid var(--ks-color-border-subtle);
    text-align: start;
  }

  .ks-accordion__items {
    margin: 0;
    padding-inline-start: var(--ks-space-5);
    list-style: disc;
    color: var(--ks-color-text-strong);
  }

  .ks-accordion__panel-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ks-space-4);
  }

  .ks-accordion__lines {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-3);
  }

  .ks-accordion__line-main {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-1);
    min-inline-size: 0;
  }

  .ks-accordion__view-order {
    flex-shrink: 0;
  }

  .ks-orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ks-space-4);
    margin-block-end: var(--ks-space-5);
  }

  .ks-orders-toolbar__filter form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ks-space-3);
  }

  /* Flatten the between-filter fieldset into an inline date range. */
  .ks-orders-toolbar__filter fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .ks-orders-toolbar__filter legend {
    display: none;
  }

  .ks-orders-toolbar__filter .fieldset-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ks-space-3);
  }

  .ks-orders-toolbar__filter .form-item {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ks-space-2);
  }

  .ks-orders-toolbar__filter label {
    margin: 0;
    white-space: nowrap;
  }

  .ks-orders-toolbar__filter input[type="date"] {
    inline-size: auto;
  }

  /* Accent scopes - set accent gradient stops from status/brand tokens */
  .ks-accent-warm {
    --ks-accent-1: var(--ks-color-warning-500);
    --ks-accent-2: var(--ks-color-danger-500);
    --ks-accent-3: var(--ks-color-danger-600);
    --ks-accent-soft-1: var(--ks-color-warning-100);
    --ks-accent-soft-2: var(--ks-color-danger-100);
  }

  .ks-accent-cool {
    --ks-accent-1: var(--ks-color-info-500);
    --ks-accent-2: var(--ks-color-primary-500);
    --ks-accent-3: var(--ks-color-primary-600);
    --ks-accent-soft-1: var(--ks-color-info-100);
    --ks-accent-soft-2: var(--ks-color-primary-100);
  }

  .ks-accent-fresh {
    --ks-accent-1: var(--ks-color-secondary-400);
    --ks-accent-2: var(--ks-color-secondary-500);
    --ks-accent-3: var(--ks-color-secondary-600);
    --ks-accent-soft-1: var(--ks-color-secondary-50);
    --ks-accent-soft-2: var(--ks-color-secondary-100);
  }

  .ks-accent-vivid {
    --ks-accent-1: var(--ks-color-accent-400);
    --ks-accent-2: var(--ks-color-accent-500);
    --ks-accent-3: var(--ks-color-accent-600);
    --ks-accent-soft-1: var(--ks-color-accent-50);
    --ks-accent-soft-2: var(--ks-color-accent-100);
  }

  .ks-accent-gold {
    --ks-accent-1: var(--ks-color-tertiary-400);
    --ks-accent-2: var(--ks-color-tertiary-500);
    --ks-accent-3: var(--ks-color-tertiary-600);
    --ks-accent-soft-1: var(--ks-color-tertiary-50);
    --ks-accent-soft-2: var(--ks-color-tertiary-100);
  }

  .ks-accent-primary {
    --ks-accent-1: var(--ks-color-primary-500);
    --ks-accent-2: var(--ks-color-primary-600);
    --ks-accent-3: var(--ks-color-primary-700);
    --ks-accent-soft-1: var(--ks-color-primary-50);
    --ks-accent-soft-2: var(--ks-color-primary-100);
  }

  .ks-accent-tertiary {
    --ks-accent-1: var(--ks-color-tertiary-400);
    --ks-accent-2: var(--ks-color-tertiary-500);
    --ks-accent-3: var(--ks-color-tertiary-600);
    --ks-accent-soft-1: var(--ks-color-tertiary-50);
    --ks-accent-soft-2: var(--ks-color-tertiary-100);
  }

  .ks-accent-info {
    --ks-accent-1: var(--ks-color-info-400);
    --ks-accent-2: var(--ks-color-info-500);
    --ks-accent-3: var(--ks-color-info-600);
    --ks-accent-soft-1: var(--ks-color-info-50);
    --ks-accent-soft-2: var(--ks-color-info-100);
  }

  .ks-accent-warning {
    --ks-accent-1: var(--ks-color-warning-400);
    --ks-accent-2: var(--ks-color-warning-500);
    --ks-accent-3: var(--ks-color-warning-600);
    --ks-accent-soft-1: var(--ks-color-warning-50);
    --ks-accent-soft-2: var(--ks-color-warning-100);
  }

  .ks-accent-accent {
    --ks-accent-1: var(--ks-color-accent-400);
    --ks-accent-2: var(--ks-color-accent-500);
    --ks-accent-3: var(--ks-color-accent-600);
    --ks-accent-soft-1: var(--ks-color-accent-50);
    --ks-accent-soft-2: var(--ks-color-accent-100);
  }

  .ks-accent-success {
    --ks-accent-1: var(--ks-color-secondary-400);
    --ks-accent-2: var(--ks-color-secondary-500);
    --ks-accent-3: var(--ks-color-secondary-600);
    --ks-accent-soft-1: var(--ks-color-secondary-50);
    --ks-accent-soft-2: var(--ks-color-secondary-100);
  }

  .ks-accent-danger {
    --ks-accent-1: var(--ks-color-danger-400);
    --ks-accent-2: var(--ks-color-danger-500);
    --ks-accent-3: var(--ks-color-danger-600);
    --ks-accent-soft-1: var(--ks-color-danger-50);
    --ks-accent-soft-2: var(--ks-color-danger-100);
  }

  /* Fill with accent gradient */
  .ks-fill-accent {
    background: linear-gradient(135deg, var(--ks-accent-1), var(--ks-accent-2), var(--ks-accent-3));
  }

  .ks-fill-accent.ks-text-inverse :is(.ks-heading-display, .ks-heading-xl, .ks-heading-lg, .ks-heading-md, .ks-heading-sm, .ks-body-lg, .ks-body-md, .ks-body-sm) {
    color: inherit;
  }

  .ks-fill-accent--overlay {
    opacity: 0.9;
  }

  .ks-fill-accent-soft {
    background: linear-gradient(135deg, var(--ks-accent-soft-1), var(--ks-accent-soft-2));
  }

  /* Choice tile - selectable tile for vertical nav/tab lists */
  .ks-choice-tile {
    display: flex;
    align-items: center;
    gap: var(--ks-space-3);
    width: 100%;
    padding: var(--ks-space-3) var(--ks-space-4);
    border-radius: var(--ks-radius-md);
    background-color: var(--ks-color-surface-section);
    color: var(--ks-color-text-default);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s var(--ks-ease-standard), transform 0.15s var(--ks-ease-standard);
  }

  .ks-choice-tile:hover {
    background-color: var(--ks-color-surface-card);
  }

  .ks-choice-tile--active {
    background: linear-gradient(135deg, var(--ks-accent-1), var(--ks-accent-2));
    color: var(--ks-color-text-inverse);
    transform: translateY(-2px);
    box-shadow: var(--ks-shadow-md);
  }

  /* Icon tile - square icon holder inside choice tile */
  .ks-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--ks-radius-md);
    background-color: var(--ks-color-surface-card);
  }

  .ks-choice-tile--active .ks-icon-tile {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--ks-color-text-inverse);
  }

  /* Panel tall - showcase panel */
  .ks-panel-tall {
    position: relative;
    min-height: 28rem;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
  }

  @media (min-width: 1024px) {
    .ks-panel-tall {
      min-height: 31.25rem;
    }
  }

  /* Carousel - flex slide track for embla */
  .ks-carousel-track {
    display: flex;
    touch-action: pan-y pinch-zoom;
  }

  .ks-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-inline-end: var(--ks-space-6);
  }

  @media (min-width: 640px) {
    .ks-carousel-slide {
      flex-basis: 50%;
    }
  }

  @media (min-width: 768px) {
    .ks-carousel-slide {
      flex-basis: 33.333%;
    }
  }

  @media (min-width: 1024px) {
    .ks-carousel-slide {
      flex-basis: 25%;
    }
  }

  /* Carousel navigation arrows */
  .ks-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--ks-color-surface-card);
    border: 1px solid var(--ks-color-border-default);
    color: var(--ks-color-text-default);
    cursor: pointer;
    z-index: 1;
    transition: background-color 0.15s var(--ks-ease-standard), color 0.15s var(--ks-ease-standard);
  }

  .ks-carousel-arrow:hover {
    background-color: var(--ks-color-primary-600);
    border-color: var(--ks-color-primary-600);
    color: var(--ks-color-text-inverse);
  }

  .ks-carousel-arrow--start {
    inset-inline-start: 0;
  }

  .ks-carousel-arrow--end {
    inset-inline-end: 0;
  }

  /* Dashboard event carousel: 1 card mobile, 3 cards tablet and desktop. */
  .ks-dashboard-events {
    --ks-dashboard-events-gap: var(--ks-space-6);
    --ks-dashboard-events-visible: 1;
    position: relative;
  }

  .ks-dashboard-events__viewport {
    clip-path: inset(0);
    overflow: hidden;
  }

  .ks-dashboard-events__track {
    align-items: stretch;
    gap: var(--ks-dashboard-events-gap);
  }

  .ks-carousel-slide--dashboard-event {
    flex: 0 0 calc(
      (100% - (var(--ks-dashboard-events-gap) * (var(--ks-dashboard-events-visible) - 1))) /
      var(--ks-dashboard-events-visible)
    );
    padding-inline-end: 0;
  }

  .ks-carousel-slide--dashboard-event > * {
    block-size: 100%;
    inline-size: 100%;
    overflow: hidden;
  }

  .ks-dashboard-events__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--ks-space-10);
    block-size: var(--ks-space-10);
    padding: 0;
    border: var(--ks-border-width) solid var(--ks-color-border-default);
    border-radius: var(--ks-radius-full);
    background-color: var(--ks-color-surface-card);
    color: var(--ks-color-text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .ks-dashboard-events__button:hover,
  .ks-dashboard-events__button:focus-visible {
    background-color: var(--ks-color-surface-section);
    color: var(--ks-color-text-strong);
  }

  .ks-dashboard-events__button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
  }

  @media (min-width: 768px) {
    .ks-dashboard-events {
      --ks-dashboard-events-visible: 3;
    }
  }

  @media (min-width: 1024px) {
    .ks-dashboard-events {
      --ks-dashboard-events-visible: 3;
    }
  }

  /* ============================================
     GRID VARIANTS (additional)
     ============================================ */
  .ks-grid-sidebar { display: grid; gap: var(--ks-space-6); }
  @media (min-width: 1024px) {
    .ks-grid-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
  }

  /* Sidebar column first (left) instead of last */
  @media (min-width: 1024px) {
    .ks-grid-sidebar--start { grid-template-columns: 20rem minmax(0, 1fr); }
  }

  .ks-grid-5 { display: grid; gap: var(--ks-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 1024px) {
    .ks-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  .ks-grid-2-4 { display: grid; gap: var(--ks-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 1024px) {
    .ks-grid-2-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .ks-grid-4-lg { display: grid; gap: var(--ks-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 1024px) {
    .ks-grid-4-lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* ============================================
     SPAN
     ============================================ */
  .ks-span-2 { grid-column: span 2; }
  .ks-span-full { grid-column: 1 / -1; }

  /* Grid child utilities */
  .ks-col-span-full { grid-column: 1 / -1; }

  /* ============================================
     STACK VARIANTS (additional)
     ============================================ */
  .ks-stack { display: flex; flex-direction: column; }
  .ks-stack-none > * + * { margin-block-start: 0; }
  .ks-stack-xl > * + * { margin-block-start: var(--ks-space-10); }
  /* Numeric stack scale: suffix = --ks-space-N token. */
  .ks-stack-1 > * + * { margin-block-start: var(--ks-space-1); }
  .ks-stack-2 > * + * { margin-block-start: var(--ks-space-2); }
  .ks-stack-3 > * + * { margin-block-start: var(--ks-space-3); }
  .ks-stack-4 > * + * { margin-block-start: var(--ks-space-4); }
  .ks-stack-5 > * + * { margin-block-start: var(--ks-space-5); }
  .ks-stack-6 > * + * { margin-block-start: var(--ks-space-6); }
  .ks-stack-8 > * + * { margin-block-start: var(--ks-space-8); }
  .ks-stack-10 > * + * { margin-block-start: var(--ks-space-10); }
  .ks-stack-12 > * + * { margin-block-start: var(--ks-space-12); }
  .ks-stack-sm-mobile > * + * { margin-block-start: var(--ks-space-2); }
  @media (min-width: 768px) {
    .ks-stack-sm-mobile > * + * { margin-block-start: 0; }
  }

  /* ============================================
     CLUSTER VARIANTS (additional)
     ============================================ */
  .ks-cluster-start { justify-content: flex-start; }
  .ks-cluster-start-sm { justify-content: center; }
  @media (min-width: 640px) {
    .ks-cluster-start-sm { justify-content: flex-start; }
  }
  .ks-cluster-end-lg { justify-content: center; }
  @media (min-width: 1024px) {
    .ks-cluster-end-lg { justify-content: flex-end; }
  }

  /* ============================================
     GAP
     ============================================ */
  .ks-gap-xs { gap: var(--ks-space-1); }
  .ks-gap-sm { gap: var(--ks-space-2); }
  .ks-gap-md { gap: var(--ks-space-4); }
  .ks-gap-lg { gap: var(--ks-space-6); }
  .ks-gap-xl { gap: var(--ks-space-8); }

  /* ============================================
     SIDEBAR LAYOUT
     ============================================ */
  .ks-sidebar-layout { display: grid; gap: var(--ks-space-6); }
  @media (min-width: 1024px) {
    .ks-sidebar-layout { grid-template-columns: 16rem minmax(0, 1fr); }
  }
  .ks-sidebar-main { min-width: 0; }
  .ks-sidebar-aside { min-width: 0; }
  .ks-sidebar-card { background: var(--ks-color-surface-card); border-radius: var(--ks-radius-md); padding: var(--ks-space-4); }

  /* ============================================
     CONTAINER VARIANTS (additional)
     ============================================ */
  .ks-container-narrow { max-width: 48rem; margin-inline: auto; padding-inline: var(--ks-space-4); }
  .ks-container-text { max-width: 65ch; margin-inline: auto; }
  .ks-constrain-prose { max-width: 65ch; }
  /* Constrain scale matching Tailwind max-w-* */
  .ks-constrain-2xl { max-width: 42rem; margin-inline: auto; }
  .ks-constrain-3xl { max-width: 48rem; margin-inline: auto; }
  .ks-constrain-4xl { max-width: 56rem; margin-inline: auto; }
  .ks-constrain-5xl { max-width: 64rem; margin-inline: auto; }
  .ks-constrain-6xl { max-width: 72rem; margin-inline: auto; }
  .ks-constrain-7xl,
  .ks-constrain-xl { max-width: 80rem; margin-inline: auto; }

  /* ============================================
     DIVIDER (additional)
     ============================================ */
  .ks-divider { height: 1px; background: var(--ks-color-border-subtle); }
  .ks-divider-vertical { width: 1px; background: var(--ks-color-border-subtle); align-self: stretch; }
  .ks-divider-top { border-block-start: 1px solid var(--ks-color-border-subtle); padding-block-start: var(--ks-space-4); }

  /* ============================================
     SECTION VARIANTS (additional)
     ============================================ */
  .ks-section-sm { padding-block: var(--ks-space-4); }
  .ks-section-hero { padding-block: var(--ks-space-12); }
  .ks-section-dark { background: var(--ks-color-surface-strong); color: var(--ks-color-text-inverse); }
  /* Dark: the band blends into the darker page (matches the pre-migration bg-gray-900 with no dark variant). */
  .dark .ks-section-dark { background: var(--ks-color-surface-page); }

  /* ============================================
     COURSE QUICK VIEW component
     ============================================ */
  .ks-course-quick-view { /* Root container marker */ }
  .ks-course-quick-view__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ks-space-3);
    margin-block-end: var(--ks-space-4);
  }
  .ks-course-quick-view__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ks-space-3);
  }
  .ks-course-quick-view__instructor {
    display: flex;
    align-items: center;
    gap: var(--ks-space-2);
    font-size: var(--ks-font-size-sm);
    color: var(--ks-color-text-muted);
  }
  .ks-course-quick-view__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--ks-color-primary-100);
    color: var(--ks-color-primary-700);
    font-size: var(--ks-font-size-xs);
    font-weight: var(--ks-font-weight-strong);
  }
  .ks-course-quick-view__description { margin-block-end: var(--ks-space-4); }
  .ks-course-quick-view__text {
    font-size: var(--ks-font-size-sm);
    color: var(--ks-color-text-muted);
  }
  .ks-course-quick-view__levels { margin-block-end: var(--ks-space-4); }
  .ks-course-quick-view__levels-list { /* Stack container */ }
  .ks-course-quick-view__level-accordion {
    border: 1px solid var(--ks-color-border-subtle);
    border-radius: var(--ks-radius-md);
  }
  .ks-course-quick-view__level-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ks-space-3) var(--ks-space-4);
    cursor: pointer;
    list-style: none;
  }
  .ks-course-quick-view__level-summary::-webkit-details-marker { display: none; }
  .ks-course-quick-view__level-name {
    font-weight: var(--ks-font-weight-strong);
  }
  .ks-course-quick-view__level-count {
    font-size: var(--ks-font-size-sm);
    color: var(--ks-color-text-muted);
  }
  .ks-course-quick-view__level-chevron {
    transition: transform var(--ks-duration-fast) var(--ks-ease-standard);
  }
  details[open] > .ks-course-quick-view__level-summary .ks-course-quick-view__level-chevron {
    transform: rotate(90deg);
  }
  .ks-course-quick-view__level-body {
    padding: var(--ks-space-3) var(--ks-space-4);
    border-top: 1px solid var(--ks-color-border-subtle);
    background-color: var(--ks-color-surface-section);
  }
  .ks-course-quick-view__module-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .ks-course-quick-view__module-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ks-space-2) 0;
    border-bottom: 1px solid var(--ks-color-border-subtle);
  }
  .ks-course-quick-view__module-row:last-child { border-bottom: none; }
  .ks-course-quick-view__module-name {
    font-size: var(--ks-font-size-sm);
  }
  .ks-course-quick-view__level-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ks-space-1);
    margin-top: var(--ks-space-3);
    font-size: var(--ks-font-size-sm);
    color: var(--ks-color-primary-600);
  }
  .ks-course-quick-view__instructor-section {
    margin-block-start: var(--ks-space-4);
    padding-block-start: var(--ks-space-4);
    border-block-start: 1px solid var(--ks-color-border-subtle);
  }

  /* ============================================
     LEARNER components
     ============================================ */
  .ks-learner-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: var(--ks-space-2) var(--ks-space-4);
    background-color: var(--ks-color-warning-100);
    color: var(--ks-color-warning-900);
    font-size: var(--ks-font-size-sm);
  }
  .ks-learner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--ks-space-4);
    margin-block-start: var(--ks-space-6);
  }
  .ks-learner-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ks-space-3);
    padding: var(--ks-space-6);
    border-radius: var(--ks-radius-lg);
    background: linear-gradient(135deg, var(--ks-accent-soft-1, var(--ks-color-gray-50)), var(--ks-accent-soft-2, var(--ks-color-gray-100)));
    text-align: center;
    transition: transform var(--ks-duration-fast) var(--ks-ease-emphasis), box-shadow var(--ks-duration-fast) var(--ks-ease-standard);
  }
  .ks-learner-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--ks-shadow-md);
  }
  .ks-learner-photo {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
  }
  .ks-learner-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--ks-accent-1, var(--ks-color-primary-500));
    color: var(--ks-color-text-inverse);
  }
  .ks-learner-add {
    border: 2px dashed var(--ks-color-border-default);
    background: transparent;
  }
  .ks-learner-add .ks-learner-avatar {
    background-color: var(--ks-color-surface-section);
    color: var(--ks-color-text-muted);
  }
}