@riverbankcms/sdk 0.77.1 → 0.78.0

package/dist/styles/index.css

@@ -136,6 +136,12 @@
   }
 
   /* Display */
+  .rb-min-h-screen {
+    min-height: 100vh;
+  }
+  .rb-min-h-full {
+    min-height: 100%;
+  }
   .rb-block {
     display: block;
   }
@@ -454,9 +460,21 @@
   }
 
   /* Grid */
+  .rb-grid-rows-main-footer {
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
   .rb-grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .rb-row-start-1 {
+    grid-row-start: 1;
+  }
+  .rb-row-start-2 {
+    grid-row-start: 2;
+  }
+  .rb-col-start-1 {
+    grid-column-start: 1;
+  }
   .rb-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -692,6 +710,17 @@
     padding-top: 2.5rem;
     padding-bottom: 2.5rem;
   }
+  :where(.theme-scope)
+    [data-site-document-layout-mode="header-overlay"]
+    [data-rb-reserved-surface].rb-reserved-surface-main {
+    padding-top: calc(var(--rb-reserved-surface-header-offset, 5.5rem) + 2.5rem);
+  }
+  .rb-preview-editor-offset {
+    padding-bottom: calc(
+      var(--builder-editor-chrome-offset, 0px) +
+      var(--builder-preview-banner-offset, 0px)
+    );
+  }
   .rb-py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
@@ -1749,6 +1778,14 @@
     line-height: 1.45;
   }
 
+  /* -------------------------------------------------------------------------- */
+  /* Shared: Site document overlay header clearance                             */
+  /* -------------------------------------------------------------------------- */
+
+  :where(.theme-scope) :where([data-site-document-overlay-content='true']) :where([data-block]):first-of-type > :where([data-slot='section']) > :where(.rb-container) {
+    padding-top: calc(var(--site-overlay-header-clearance, 0px) + var(--site-overlay-opening-content-extra-pad, 0px));
+  }
+
   /* -------------------------------------------------------------------------- */
   /* Header: Mobile nav overlay transitions                                      */
   /* -------------------------------------------------------------------------- */
@@ -3397,6 +3434,92 @@
   background-color: var(--er-payment-bg-selected);
 }
 
+/* Discount code entry */
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount {
+  margin-top: 0.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__form {
+  display: grid;
+  gap: 0.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-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="event-registration"]) .er-discount__toggle:hover {
+  text-decoration: none;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__input {
+  flex: 1;
+  border-radius: calc(var(--rb-block-radius) * 0.6);
+  border: 1px solid var(--er-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="event-registration"]) .er-discount__input:focus {
+  outline: 2px solid var(--er-focus-ring);
+  outline-offset: 2px;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__remove {
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  color: var(--er-on-surface);
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__apply {
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  color: var(--er-on-surface);
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__remove:hover {
+  opacity: 1;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__apply:hover {
+  opacity: 1;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__hint {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--er-on-surface-muted);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"]) .er-discount__feedback {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
 /* Visually hide native radio but keep focusable (sr-only pattern) */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-radio {
   position: absolute;
@@ -5746,7 +5869,7 @@
   width: 100%;
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--ab-input-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-input-radius, var(--radius-control, var(--rb-block-radius, 1rem)));
+  border-radius: var(--ab-input-radius, var(--rb-input-radius, var(--radius-control, var(--rb-block-radius, 1rem))));
   background: transparent;
   font-size: 0.875rem;
   transition: border-color var(--rb-block-transition, 150ms) ease, box-shadow var(--rb-block-transition, 150ms) ease;
@@ -5981,6 +6104,67 @@
   }
 }
 
+/* Hero typography scales. These classes are emitted by Theme V2 hero looks. */
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-headline {
+  font-size: clamp(2rem, 4vw, 3rem);
+  line-height: 1.12;
+}
+
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-subheadline {
+  font-size: clamp(1rem, 1.2vw, 1.25rem);
+  line-height: 1.55;
+}
+
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-headline {
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  line-height: 1.08;
+}
+
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-subheadline {
+  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
+  line-height: 1.55;
+}
+
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline {
+  font-size: clamp(3rem, 6vw, 5rem);
+  line-height: 1.04;
+}
+
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-subheadline {
+  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
+  line-height: 1.5;
+}
+
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline {
+  font-size: clamp(3.5rem, 8vw, 6.5rem);
+  line-height: 0.98;
+}
+
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-subheadline {
+  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
+  line-height: 1.45;
+}
+
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {
+  font-size: clamp(3rem, 6.5vw, 5rem);
+}
+
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
+  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
+  line-height: 1.05;
+}
+
+@media (max-width: 639px) {
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline,
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline,
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
+    font-size: clamp(2.5rem, 11vw, 3.5rem);
+    line-height: 1.05;
+  }
+}
+
 /* =============================================================================
  * Shared: Heading Group (used by CTA, single-button, etc.)
  * =============================================================================
@@ -6376,6 +6560,8 @@
   --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;
+  --shop-card-radius: var(--rb-block-radius, var(--radius-card, 0.75rem));
+  --shop-control-radius: var(--rb-input-radius, var(--radius-control, 0.375rem));
 }
 
 :where(.theme-scope) .shop--empty {
@@ -6393,7 +6579,7 @@
   background-color: rgba(var(--tb-destructive), 0.1);
   color: rgb(var(--tb-destructive));
   padding: 0.75rem 1rem;
-  border-radius: var(--radius-control, 0.375rem);
+  border-radius: var(--shop-control-radius);
   margin-bottom: 1rem;
   font-size: 0.875rem;
 }
@@ -6432,7 +6618,7 @@
 :where(.theme-scope) .shop__card {
   background: rgb(var(--tb-surface));
   border: 1px solid rgb(var(--tb-border));
-  border-radius: var(--radius-card, 0.5rem);
+  border-radius: var(--shop-card-radius);
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
@@ -6538,7 +6724,7 @@
   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);
+  border-radius: var(--shop-control-radius);
   font-size: 0.875rem;
   margin-bottom: 1rem;
 }
@@ -6581,7 +6767,7 @@
   padding: 1.5rem 1rem;
   margin-bottom: 1.25rem;
   border: 1px solid rgb(var(--tb-border));
-  border-radius: var(--radius-card);
+  border-radius: var(--shop-card-radius);
   background: rgb(var(--tb-surface));
 }
 
@@ -6656,7 +6842,7 @@
   padding: 2rem;
   background: var(--cp-card-bg);
   border: 1px solid var(--cp-card-border);
-  border-radius: var(--radius-card);
+  border-radius: var(--cp-card-radius);
 }
 
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-login__title {
@@ -6726,7 +6912,7 @@
 /* Alerts */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-alert {
   padding: 1rem 1.25rem;
-  border-radius: var(--radius-control);
+  border-radius: var(--cp-control-radius);
   font-size: 0.9375rem;
   line-height: 1.4;
   border-left: 4px solid transparent;
@@ -6784,7 +6970,7 @@
   text-align: center;
   background: var(--cp-card-bg);
   border: 1px dashed var(--cp-card-border);
-  border-radius: var(--radius-card);
+  border-radius: var(--cp-card-radius);
 }
 
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-empty__text {
@@ -6796,7 +6982,7 @@
 :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);
+  border-radius: var(--cp-card-radius);
   padding: 1.25rem;
 }
 
@@ -6914,7 +7100,7 @@
   /* 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);
+  --rb-event-tile-radius: var(--cp-control-radius);
 
   display: flex;
   flex-direction: column;
@@ -6960,7 +7146,7 @@
 :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);
+  border-radius: var(--cp-card-radius);
 }
 
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table {
@@ -8371,6 +8557,11 @@
   margin-top: 0.5rem;
 }
 
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__form {
+  display: grid;
+  gap: 0.5rem;
+}
+
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__toggle {
   background: transparent;
   border: 0;
@@ -8385,10 +8576,14 @@
   text-decoration: none;
 }
 
-:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__field {
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__row {
   display: flex;
   gap: 0.5rem;
-  margin-top: 0.5rem;
 }
 
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__input {
@@ -8414,10 +8609,33 @@
   opacity: 0.6;
 }
 
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__apply {
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+  opacity: 0.8;
+}
+
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__remove:hover {
   opacity: 1;
 }
 
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__apply:hover {
+  opacity: 1;
+}
+
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__hint {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-discount__feedback {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
 /* =============================================================================
  * Altcha (Spam Protection)
  * =============================================================================
@@ -8860,16 +9078,36 @@
  * ============================================================================= */
 
 :where(.theme-scope) .event-listing-compact-container {
-  width: min(100%, 56rem);
+  --event-compact-divider-color: color-mix(
+    in oklab,
+    rgb(var(--tb-border, 229 231 235)),
+    rgb(var(--tb-text, 17 24 39)) 4%
+  );
+
+  width: min(100%, 92rem);
   margin-inline: auto;
+  overflow: hidden;
+  border: 1px solid var(--event-compact-divider-color);
+  border-radius: 1rem;
+  background: rgb(var(--tb-background, 255 255 255));
+  box-shadow: 0 1.25rem 3.5rem rgba(var(--tb-shadow), 0.08);
+}
+
+:where(.theme-scope) .rb-event-list-treatment-lined-panel .event-listing-compact-container {
+  --event-compact-divider-color: color-mix(
+    in oklab,
+    rgb(var(--tb-border, 229 231 235)),
+    rgb(var(--tb-text, 17 24 39)) 8%
+  );
 }
 
 :where(.theme-scope) .event-compact-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: clamp(5.5rem, 8vw, 8rem) minmax(0, 1fr) clamp(15rem, 24vw, 21rem);
   align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid rgb(var(--tb-border, 229 231 235));
+  min-height: 8.75rem;
+  padding: 1.55rem clamp(1.5rem, 3vw, 2.6rem);
+  border-bottom: 1px solid var(--event-compact-divider-color);
   transition: background-color 150ms ease;
 }
 
@@ -8878,70 +9116,210 @@
 }
 
 :where(.theme-scope) .event-compact-row:hover {
-  background-color: rgba(var(--tb-primary, 0 0 0), 0.04);
+  background-color: rgba(var(--tb-primary, 0 0 0), 0.035);
 }
 
-:where(.theme-scope) .event-compact-row-content {
-  flex: 1;
+:where(.theme-scope) .event-compact-row-date {
+  display: grid;
+  grid-template-rows: 1rem minmax(2.7rem, auto) 1rem;
+  place-items: center;
+  gap: 0.35rem;
   min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+  padding-right: clamp(1rem, 2vw, 1.75rem);
+  text-align: center;
+  text-decoration: none;
+}
+
+:where(.theme-scope) .event-compact-row-date-weekday,
+:where(.theme-scope) .event-compact-row-date-month {
+  display: grid;
+  place-items: center;
+  block-size: 1rem;
+  color: rgb(var(--tb-primary, 0 0 0));
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 0.08em;
+}
+
+:where(.theme-scope) .event-compact-row-date-day {
+  display: grid;
+  place-items: center;
+  min-block-size: clamp(2.7rem, 4.5vw, 3.7rem);
+  color: rgb(var(--tb-text, 17 24 39));
+  font-family: var(--font-heading, var(--font-body, inherit));
+  font-size: clamp(2.3rem, 4.2vw, 3.35rem);
+  font-weight: 400;
+  line-height: 1;
 }
 
-:where(.theme-scope) .event-compact-row-top {
+:where(.theme-scope) .event-compact-row-content {
+  min-width: 0;
   display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  justify-content: center;
+  padding-inline: clamp(1.4rem, 3vw, 3.2rem);
+  border-left: 1px solid var(--event-compact-divider-color);
 }
 
 :where(.theme-scope) .event-compact-row-title {
-  font-weight: 600;
-  font-size: 0.9375rem;
-  line-height: 1.3;
-  white-space: nowrap;
+  margin: 0;
+  color: rgb(var(--tb-text, 17 24 39));
+  font-family: var(--font-heading, var(--font-body, inherit));
+  font-size: clamp(1.55rem, 2.6vw, 2.4rem);
+  font-weight: 400;
+  line-height: 1.05;
   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 {
+:where(.theme-scope) .event-compact-row-meta {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  font-size: 0.8125rem;
-  opacity: 0.7;
+  gap: 0.9rem;
+  min-width: 0;
+  color: rgb(var(--tb-text, 17 24 39));
+  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
+  line-height: 1.35;
 }
 
 :where(.theme-scope) .event-compact-row-venue {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.45rem;
+  min-width: 0;
 }
 
+:where(.theme-scope) .event-compact-row-venue svg {
+  width: 1.05em;
+  height: 1.05em;
+}
+
+:where(.theme-scope) .event-compact-row-teacher,
 :where(.theme-scope) .event-compact-row-price {
-  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.9rem;
+}
+
+:where(.theme-scope) .event-compact-row-teacher::before,
+:where(.theme-scope) .event-compact-row-price::before {
+  content: "";
+  width: 0.18rem;
+  height: 0.18rem;
+  border-radius: 9999px;
+  background: currentColor;
+}
+
+:where(.theme-scope) .event-compact-row-price {
+  color: rgb(var(--tb-secondary, var(--tb-primary, 0 0 0)));
+  font-weight: 600;
+}
+
+:where(.theme-scope) .event-compact-row-action {
+  display: grid;
+  align-content: center;
+  gap: 1rem;
+  height: 100%;
+  padding-left: clamp(1.5rem, 3vw, 3.2rem);
+  border-left: 1px solid var(--event-compact-divider-color);
+}
+
+:where(.theme-scope) .event-compact-row-datetime {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: rgb(var(--tb-text, 17 24 39));
+  font-size: clamp(0.9375rem, 1.45vw, 1.0625rem);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+:where(.theme-scope) .event-compact-row-datetime svg {
+  width: 1.1em;
+  height: 1.1em;
+  flex-shrink: 0;
 }
 
 :where(.theme-scope) .event-compact-row-status {
+  color: rgb(var(--tb-muted, var(--tb-text, 17 24 39)));
   font-weight: 500;
-  opacity: 0.8;
 }
 
 :where(.theme-scope) .event-compact-row-cta {
-  flex-shrink: 0;
+  width: min(100%, 15rem);
+  min-height: 2.7rem;
+  justify-content: space-between;
+  gap: 1rem;
+  border-radius: 9999px;
+  padding-inline: 1.25rem 1rem;
   white-space: nowrap;
 }
 
+:where(.theme-scope) .event-compact-row-cta svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+@media (max-width: 767px) {
+  :where(.theme-scope) .event-listing-compact-container {
+    border-radius: 0.875rem;
+  }
+
+  :where(.theme-scope) .event-compact-row {
+    grid-template-columns: 4.75rem minmax(0, 1fr);
+    min-height: 0;
+    padding: 1.25rem;
+    row-gap: 1.1rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-date {
+    padding-right: 0.9rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-date-day {
+    font-size: 2.35rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-content {
+    gap: 0.75rem;
+    padding-left: 1.1rem;
+    padding-right: 0;
+  }
+
+  :where(.theme-scope) .event-compact-row-title {
+    font-size: clamp(1.35rem, 8vw, 1.9rem);
+    white-space: normal;
+  }
+
+  :where(.theme-scope) .event-compact-row-meta {
+    flex-wrap: wrap;
+    gap: 0.5rem 0.8rem;
+  }
+
+  :where(.theme-scope) .event-compact-row-action {
+    grid-column: 1 / -1;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.85rem;
+    padding-left: 0;
+    padding-top: 1rem;
+    border-left: none;
+    border-top: 1px solid var(--event-compact-divider-color);
+  }
+
+  :where(.theme-scope) .event-compact-row-datetime {
+    white-space: normal;
+  }
+
+  :where(.theme-scope) .event-compact-row-cta {
+    width: 100%;
+  }
+}
+
 
 :where(.theme-scope) .section-state__callout {
   text-align: center;
@@ -8992,3 +9370,65 @@
 }
 
 
+/* =============================================================================
+ * Shared: Heading Decorations
+ * =============================================================================
+ */
+
+:where(.theme-scope) .rb-heading-decoration {
+  display: block;
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+
+:where(.theme-scope) .rb-heading-decoration-placement-after-heading {
+  margin-top: 0.35rem;
+}
+
+:where(.theme-scope) .rb-heading-decoration-placement-under-centered-heading {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+:where(.theme-scope) .rb-heading-decoration-organic-squiggle {
+  width: clamp(5.5rem, 15vw, 9rem);
+  height: 1.1rem;
+  background-color: currentColor;
+  opacity: 0.9;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg width='144' height='18' viewBox='0 0 144 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10C15 1 27 1 40 10C53 18 66 18 79 10C92 1 105 1 118 10C127 16 136 17 142 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg width='144' height='18' viewBox='0 0 144 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10C15 1 27 1 40 10C53 18 66 18 79 10C92 1 105 1 118 10C127 16 136 17 142 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+:where(.theme-scope) .rb-heading-decoration-short-center-rule {
+  width: 4.5rem;
+  height: 0.125rem;
+  border-radius: 999px;
+  background-color: currentColor;
+  opacity: 0.75;
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-text {
+  color: rgb(var(--tb-text));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-primary {
+  color: rgb(var(--tb-primary));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-secondary {
+  color: rgb(var(--tb-secondary));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-accent {
+  color: rgb(var(--tb-accent));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-border {
+  color: rgb(var(--tb-border));
+}
+
+:where(.theme-scope) .rb-heading-decoration-color-muted {
+  color: rgb(var(--tb-mutedText));
+}
+
+