/* CookieBox section chrome tokens (from PageTree SectionChrome data-* attrs). */
.cb-section {
  --cb-section-pad-sm: 1.75rem;
  --cb-section-pad-md: 3rem;
  --cb-section-pad-lg: 4.75rem;
  --cb-section-gutter: clamp(1.1rem, 4.5vw, 2.75rem);
  --cb-section-stack-gap: clamp(1.35rem, 2.8vw, 2.5rem);
  --cb-blocks-gap: 1.15rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  padding-block: var(--cb-section-pad-md);
  padding-inline: var(--cb-section-gutter);
}

/* Blocks live in one inner rail so stack/row + content-width stay resilient. */
.cb-section__blocks {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cb-blocks-gap);
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  min-width: 0;
}

.cb-section__blocks > * {
  min-width: 0;
  box-sizing: border-box;
}

.cb-section + .cb-section {
  margin-block-start: var(--cb-section-stack-gap);
}

/*
  Stages with a background are a clear "band":
  paint on a dedicated layer so the image is never lost under content chrome.
*/
.cb-section[data-has-section-bg="true"],
.cb-section[style*="--cb-section-bg"] {
  --cb-section-radius: 0;
  isolation: isolate;
  overflow: hidden;
  margin-block: var(--cb-section-stack-gap);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  padding-inline: clamp(1.75rem, 7vw, 4rem);
  min-height: min(22rem, 48vh);
  background-color: color-mix(in srgb, var(--color-stage-deep, #2a241c) 55%, transparent);
  background-image: var(--cb-section-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--cb-section-radius);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent),
    0 0.75rem 1.75rem rgba(0, 0, 0, 0.18);
}

/* Empty stage with only a frame image — taller photo band so it is not a grey stub. */
.cb-section[data-has-section-bg="true"][data-empty="true"] {
  min-height: min(36rem, 72vh);
  padding-block: clamp(3rem, 8vw, 5rem);
}

/* Must beat .cb-section > * { position: relative } so the photo is a layer, not a stack item. */
.cb-section > .cb-section__media-img,
.cb-section__media-img {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cb-section[data-fit="contain"] > .cb-section__media-img {
  object-fit: contain;
}

.cb-section[data-fit="none"] > .cb-section__media-img {
  object-fit: none;
}

/* ::before is used for surfaceTint washes on photo stages; overlay uses ::after. */

.cb-section[data-has-section-bg="true"][data-radius="sm"],
.cb-section[style*="--cb-section-bg"][data-radius="sm"] {
  --cb-section-radius: 0.55rem;
}

.cb-section[data-has-section-bg="true"][data-radius="md"],
.cb-section[style*="--cb-section-bg"][data-radius="md"],
.cb-section[data-has-section-bg="true"]:not([data-radius]),
.cb-section[style*="--cb-section-bg"]:not([data-radius]) {
  --cb-section-radius: 1rem;
}

.cb-section[data-has-section-bg="true"][data-radius="lg"],
.cb-section[style*="--cb-section-bg"][data-radius="lg"] {
  --cb-section-radius: 1.5rem;
}

.cb-section[data-has-section-bg="true"][data-radius="none"],
.cb-section[style*="--cb-section-bg"][data-radius="none"] {
  --cb-section-radius: 0;
}

.cb-section[data-padding="sm"]:not([data-has-section-bg="true"]):not([style*="--cb-section-bg"]) {
  padding-block: var(--cb-section-pad-sm);
}

.cb-section[data-padding="lg"]:not([data-has-section-bg="true"]):not([style*="--cb-section-bg"]) {
  padding-block: var(--cb-section-pad-lg);
}

/*
  Content width insets the blocks rail so section background shows as a frame.
  "default" used to be 72rem (~full desktop width) — that looked like full-bleed.
*/
.cb-section[data-content-width="narrow"] > .cb-section__blocks {
  width: 100%;
  max-width: min(36rem, 100%);
  margin-inline: auto;
}

.cb-section[data-content-width="default"] > .cb-section__blocks {
  width: 100%;
  max-width: min(48rem, 100%);
  margin-inline: auto;
}

.cb-section[data-content-width="wide"] > .cb-section__blocks {
  width: 100%;
  max-width: min(64rem, 100%);
  margin-inline: auto;
}

/* True edge-to-edge only when there is no stage background image. */
.cb-section[data-content-width="full"]:not([data-has-section-bg="true"]):not([style*="--cb-section-bg"]) {
  padding-inline: 0;
}

.cb-section[data-content-width="full"] > .cb-section__blocks {
  width: 100%;
  max-width: none;
}

/* With a background, Full still fills the padded stage — frame stays visible. */
.cb-section[data-has-section-bg="true"][data-content-width="full"],
.cb-section[style*="--cb-section-bg"][data-content-width="full"] {
  padding-inline: clamp(1.75rem, 7vw, 4rem);
}

/* Row layouts need a wider rail so multiple cards can sit side by side. */
.cb-section[data-blocks-layout="row"][data-content-width="narrow"] > .cb-section__blocks,
.cb-section[data-blocks-layout="row-equal"][data-content-width="narrow"] > .cb-section__blocks {
  max-width: min(48rem, 100%);
}

.cb-section[data-blocks-layout="row"][data-content-width="default"] > .cb-section__blocks,
.cb-section[data-blocks-layout="row-equal"][data-content-width="default"] > .cb-section__blocks {
  max-width: min(64rem, 100%);
}

.cb-section[data-blocks-layout="row"][data-content-width="wide"] > .cb-section__blocks,
.cb-section[data-blocks-layout="row-equal"][data-content-width="wide"] > .cb-section__blocks {
  max-width: min(78rem, 100%);
}

/*
  Blocks layout tokens — resilient row without author CSS:
  wrap, min-width floors, equal stretch, no overflow blowouts.
*/
.cb-section[data-blocks-layout="row"] > .cb-section__blocks,
.cb-section[data-blocks-layout="row-equal"] > .cb-section__blocks {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  align-content: flex-start;
}

.cb-section[data-blocks-layout="row"] > .cb-section__blocks > * {
  flex: 1 1 clamp(12rem, 30%, 100%);
  width: auto;
  max-width: 100%;
}

.cb-section[data-blocks-layout="row-equal"] > .cb-section__blocks > * {
  flex: 1 1 0;
  width: auto;
  max-width: 100%;
  min-width: min(11rem, 100%);
}

/*
  Buttons in a row: default = own full line under content (CTA row).
  data-placement="inline" = sit beside other blocks as a compact cell.
  Avoids RTL orphan CTAs stuck as a third skinny column on the far edge.
*/
.cb-section[data-blocks-layout="row"] > .cb-section__blocks > .cb-block--button:not([data-placement="inline"]),
.cb-section[data-blocks-layout="row-equal"] > .cb-section__blocks > .cb-block--button:not([data-placement="inline"]),
.cb-section[data-blocks-layout="row"] > .cb-section__blocks > .cb-button,
.cb-section[data-blocks-layout="row-equal"] > .cb-section__blocks > .cb-button {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  margin-block-start: 0.15rem;
}

.cb-section[data-blocks-layout="row"] > .cb-section__blocks > .cb-block--button[data-placement="inline"],
.cb-section[data-blocks-layout="row-equal"] > .cb-section__blocks > .cb-block--button[data-placement="inline"] {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  align-self: center;
  margin-block-start: 0;
}

.cb-section[data-blocks-layout="row"] > .cb-section__blocks > .cb-block--button[data-placement="inline"][data-width="full"],
.cb-section[data-blocks-layout="row-equal"] > .cb-section__blocks > .cb-block--button[data-placement="inline"][data-width="full"] {
  flex: 1 1 clamp(12rem, 30%, 100%);
  align-self: stretch;
}

/* One block in a row: do not stretch into a huge empty card. */
.cb-section[data-blocks-layout="row"] > .cb-section__blocks > *:only-child,
.cb-section[data-blocks-layout="row-equal"] > .cb-section__blocks > *:only-child {
  flex: 1 1 auto;
  max-width: min(36rem, 100%);
}

/* Narrow viewports always stack — “bad” desktop row choices stay readable. */
@media (max-width: 40rem) {
  .cb-section[data-blocks-layout="row"] > .cb-section__blocks,
  .cb-section[data-blocks-layout="row-equal"] > .cb-section__blocks {
    flex-direction: column;
  }

  .cb-section[data-blocks-layout="row"] > .cb-section__blocks > *,
  .cb-section[data-blocks-layout="row-equal"] > .cb-section__blocks > * {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/* Float content above the stage photo. Panel look is tokenized via data-content-panel. */
.cb-section[data-has-section-bg="true"] > .cb-section__blocks,
.cb-section[style*="--cb-section-bg"] > .cb-section__blocks {
  position: relative;
  z-index: 1;
}

/* Default / soft light plate (legacy look) — each block is a card. */
.cb-section[data-has-section-bg="true"]:not([data-content-panel="none"]):not([data-content-panel="soft-dark"]):not([data-content-panel="solid"]):not([data-content-panel="solid-dark"]) > .cb-section__blocks > *,
.cb-section[style*="--cb-section-bg"]:not([data-content-panel="none"]):not([data-content-panel="soft-dark"]):not([data-content-panel="solid"]):not([data-content-panel="solid-dark"]) > .cb-section__blocks > *,
.cb-section[data-has-section-bg="true"][data-content-panel="soft"] > .cb-section__blocks > *,
.cb-section[style*="--cb-section-bg"][data-content-panel="soft"] > .cb-section__blocks > * {
  border-radius: calc(var(--cb-section-radius, 1rem) * 0.55);
  background: color-mix(in srgb, var(--color-surface-elevated, #fffcf8) 88%, transparent);
  box-shadow: 0 0.45rem 1.25rem rgba(0, 0, 0, 0.16);
  padding: 0.85rem 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.cb-section[data-has-section-bg="true"]:not([data-content-panel="none"]):not([data-content-panel="soft-dark"]):not([data-content-panel="solid"]):not([data-content-panel="solid-dark"]) > .cb-section__blocks > .cookie-carousel,
.cb-section[style*="--cb-section-bg"]:not([data-content-panel="none"]):not([data-content-panel="soft-dark"]):not([data-content-panel="solid"]):not([data-content-panel="solid-dark"]) > .cb-section__blocks > .cookie-carousel,
.cb-section[data-has-section-bg="true"][data-content-panel="soft"] > .cb-section__blocks > .cookie-carousel,
.cb-section[style*="--cb-section-bg"][data-content-panel="soft"] > .cb-section__blocks > .cookie-carousel {
  background: color-mix(in srgb, var(--color-surface-elevated, #fffcf8) 78%, transparent);
  padding: 0.75rem;
}

.cb-section[data-has-section-bg="true"][data-content-panel="soft-dark"] > .cb-section__blocks > *,
.cb-section[style*="--cb-section-bg"][data-content-panel="soft-dark"] > .cb-section__blocks > * {
  border-radius: calc(var(--cb-section-radius, 1rem) * 0.55);
  background: color-mix(in srgb, var(--color-stage-deep, #2a241c) 72%, transparent);
  box-shadow: 0 0.45rem 1.25rem rgba(0, 0, 0, 0.28);
  padding: 0.85rem 1rem;
  color: var(--color-on-accent, #fff);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

.cb-section[data-has-section-bg="true"][data-content-panel="soft-dark"] > .cb-section__blocks > .cookie-carousel,
.cb-section[style*="--cb-section-bg"][data-content-panel="soft-dark"] > .cb-section__blocks > .cookie-carousel {
  background: color-mix(in srgb, var(--color-stage-deep, #2a241c) 62%, transparent);
  padding: 0.75rem;
}

.cb-section[data-has-section-bg="true"][data-content-panel="solid"] > .cb-section__blocks > *,
.cb-section[style*="--cb-section-bg"][data-content-panel="solid"] > .cb-section__blocks > * {
  border-radius: calc(var(--cb-section-radius, 1rem) * 0.55);
  background: var(--color-surface-elevated, #fffcf8);
  box-shadow: 0 0.45rem 1.25rem rgba(0, 0, 0, 0.16);
  padding: 0.85rem 1rem;
  overflow: hidden;
}

.cb-section[data-has-section-bg="true"][data-content-panel="solid"] > .cb-section__blocks > .cookie-carousel,
.cb-section[style*="--cb-section-bg"][data-content-panel="solid"] > .cb-section__blocks > .cookie-carousel {
  background: var(--color-surface-elevated, #fffcf8);
  padding: 0.75rem;
}

.cb-section[data-has-section-bg="true"][data-content-panel="solid-dark"] > .cb-section__blocks > *,
.cb-section[style*="--cb-section-bg"][data-content-panel="solid-dark"] > .cb-section__blocks > * {
  border-radius: calc(var(--cb-section-radius, 1rem) * 0.55);
  background: var(--color-stage-deep, #2a241c);
  box-shadow: 0 0.45rem 1.25rem rgba(0, 0, 0, 0.28);
  padding: 0.85rem 1rem;
  color: var(--color-on-accent, #fff);
  overflow: hidden;
}

.cb-section[data-has-section-bg="true"][data-content-panel="solid-dark"] > .cb-section__blocks > .cookie-carousel,
.cb-section[style*="--cb-section-bg"][data-content-panel="solid-dark"] > .cb-section__blocks > .cookie-carousel {
  background: var(--color-stage-deep, #2a241c);
  padding: 0.75rem;
}

/* Hide plate entirely — blocks sit clean on the stage photo. */
.cb-section[data-has-section-bg="true"][data-content-panel="none"] > .cb-section__blocks > *,
.cb-section[style*="--cb-section-bg"][data-content-panel="none"] > .cb-section__blocks > * {
  background: transparent;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/*
  CTAs must not inherit the frosted content-panel card — that override was wiping
  .cb-button accent paint and turning buttons into empty glass tiles.
*/
.cb-section[data-has-section-bg="true"] > .cb-section__blocks > .cb-block--button,
.cb-section[style*="--cb-section-bg"] > .cb-section__blocks > .cb-block--button,
.cb-section[data-has-section-bg="true"] > .cb-section__blocks > .cb-button,
.cb-section[style*="--cb-section-bg"] > .cb-section__blocks > .cb-button {
  background: transparent;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  color: inherit;
}
.cb-section[data-has-section-bg="true"][data-content-panel="none"],
.cb-section[style*="--cb-section-bg"][data-content-panel="none"] {
  background-color: transparent;
}

.cb-section[data-has-section-bg="true"] .cookie-carousel__viewport,
.cb-section[style*="--cb-section-bg"] .cookie-carousel__viewport {
  border-radius: calc(var(--cb-section-radius, 1rem) * 0.45);
}

/* Carousel fills its block cell, not the whole stage. */
.cb-section__blocks > .cookie-carousel {
  width: 100%;
  box-sizing: border-box;
}

/* Keep section carousels from dominating the viewport height. */
.cb-section .cookie-carousel__viewport {
  max-height: min(30rem, 55vh);
}

/* In a row, carousels stay shorter so sibling cards keep a balanced band. */
.cb-section[data-blocks-layout="row"] .cookie-carousel__viewport,
.cb-section[data-blocks-layout="row-equal"] .cookie-carousel__viewport {
  max-height: min(18rem, 42vh);
}

.cb-section[data-fit="cover"] {
  background-size: cover;
}

.cb-section[data-fit="contain"] {
  background-size: contain;
}

.cb-section[data-fit="none"] {
  background-size: auto;
}

.cb-section[data-overlay="dark"]::after,
.cb-section[data-overlay="light"]::after,
.cb-section[data-overlay="accent"]::after,
.cb-section[data-overlay="mist"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.cb-section[data-overlay="dark"]::after {
  background: rgba(0, 0, 0, 0.35);
}

.cb-section[data-overlay="light"]::after {
  background: rgba(255, 255, 255, 0.35);
}

.cb-section[data-overlay="accent"]::after {
  background: color-mix(in srgb, var(--color-accent, #b8922a) 38%, transparent);
}

.cb-section[data-overlay="mist"]::after {
  background: color-mix(in srgb, var(--color-surface-elevated, #fffcf8) 42%, transparent);
}

.cb-section__blocks > * {
  position: relative;
  z-index: 1;
}

/* Hero stage: full-bleed photo — no second section background layer. */
.cb-section[data-hero-stage="true"],
.cb-section:has(.yildiz-cb-hero):not([data-has-section-bg="true"]) {
  padding-block: 0;
  padding-inline: 0;
  gap: 0;
  min-height: 0;
  background-image: none !important;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* Defense: never paint a second section photo under the hero block. */
.cb-section[data-hero-stage="true"] > .cb-section__media-img,
.cb-section:has(.yildiz-cb-hero) > .cb-section__media-img {
  display: none !important;
}

.cb-section[data-hero-stage="true"] > .cb-section__blocks,
.cb-section:has(.yildiz-cb-hero):not([data-has-section-bg="true"]) > .cb-section__blocks {
  max-width: none;
  gap: 0;
}

.cb-section[data-hero-stage="true"]::before,
.cb-section:has(.yildiz-cb-hero):not([data-has-section-bg="true"])::before {
  content: none;
}

.cb-section__blocks > .yildiz-cb-hero {
  position: relative;
  z-index: 1;
  max-width: none;
  width: 100%;
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.cb-section[data-hero-stage="true"] .home-hero,
.cb-section:has(.yildiz-cb-hero):not([data-has-section-bg="true"]) .home-hero {
  margin-block-start: 0.65rem;
  margin-inline: 0;
  margin-block-end: 2.5rem;
  width: 100%;
  max-width: none;
}

.cb-section[data-hero-stage="true"] .home-hero__stage,
.cb-section:has(.yildiz-cb-hero):not([data-has-section-bg="true"]) .home-hero__stage {
  min-height: min(88dvh, 52rem);
}

.cb-section__blocks > .yildiz-cb-hero ~ * {
  position: relative;
  z-index: 1;
  display: block;
  max-width: min(52rem, 100%);
  margin-inline: auto;
  margin-block-start: 1.5rem;
  padding-inline: 1.25rem;
  padding-block-end: 1.5rem;
}

/* Best-sellers / wide catalog bay after hero — match atelier catalog width. */
.cb-section__blocks > .yildiz-cb-hero ~ .yildiz-cb-bestsellers,
.cb-section__blocks > .yildiz-cb-bestsellers {
  max-width: min(72rem, 100%);
  width: 100%;
  margin-block-start: 0.75rem;
  padding-inline: 0;
  padding-block-end: 0;
}

/* Post-hero marketing sections: calmer vertical rhythm (atelier floor). */
.page-home .cb-section:not([data-hero-stage="true"]):not(:has(.yildiz-cb-hero)) {
  padding-block: clamp(2rem, 4.5vw, 3.25rem);
}

/*
  Carousel-only stage with no section backgroundMedia:
  flush padding so body beige is not mistaken for a white "section bg"
  under the slides (wood/media belongs on the next stage).
*/
.cb-section:has(> .cb-section__blocks > .cookie-carousel):not(:has(> .cb-section__blocks > :not(.cookie-carousel))):not([data-has-section-bg="true"]):not([style*="--cb-section-bg"]) {
  padding-block: 0;
  padding-inline: 0;
  gap: 0;
}

.cb-section:has(> .cb-section__blocks > .cookie-carousel):not(:has(> .cb-section__blocks > :not(.cookie-carousel))):not([data-has-section-bg="true"]):not([style*="--cb-section-bg"]) .cookie-carousel__viewport {
  /* Explicit height (not only min-height) so absolute slides/media resolve % height. */
  height: min(70dvh, 36rem);
  max-height: min(88dvh, 46rem);
  min-height: min(56dvh, 28rem);
  border-radius: 0;
  aspect-ratio: auto;
  background: var(--color-theater-deep, #d8cfc2);
}

/* Block frames — alignment / width without author CSS */
.cb-block--button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cb-block--button[data-align="start"] {
  justify-content: flex-start;
}

.cb-block--button[data-align="center"] {
  justify-content: center;
}

.cb-block--button[data-align="end"] {
  justify-content: flex-end;
}

/* In a column stack, hug-width CTAs must not stretch to full rail width. */
.cb-block--button[data-width="auto"] {
  width: auto;
  max-width: 100%;
}

.cb-section__blocks > .cb-block--button[data-width="auto"][data-align="start"] {
  align-self: flex-start;
}

.cb-section__blocks > .cb-block--button[data-width="auto"][data-align="center"] {
  align-self: center;
}

.cb-section__blocks > .cb-block--button[data-width="auto"][data-align="end"] {
  align-self: flex-end;
}

.cb-block--button[data-width="full"] .cb-button {
  width: 100%;
}

.cb-block--heading,
.cb-block--richtext {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cb-block--heading[data-align="start"],
.cb-block--richtext[data-align="start"] {
  text-align: start;
}

.cb-block--heading[data-align="center"],
.cb-block--richtext[data-align="center"] {
  text-align: center;
}

.cb-block--heading[data-align="end"],
.cb-block--richtext[data-align="end"] {
  text-align: end;
}

.cb-heading {
  margin: 0;
  line-height: 1.25;
}

/* CookieBox content.button → host button look */
.cb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-control, 0.35rem);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-accent, #b8922a);
  color: var(--color-on-accent, #141210);
  box-sizing: border-box;
}

.cb-button--sm {
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

.cb-button--lg {
  min-height: 3.15rem;
  padding: 0.85rem 1.5rem;
  font-size: 1.05rem;
}

.cb-button:hover {
  filter: brightness(1.05);
}

.cb-button-ghost,
.cb-button-secondary {
  background: transparent;
  color: var(--color-text, inherit);
  border-color: currentColor;
}

.cb-button-outline {
  background: transparent;
  color: var(--color-accent, #b8922a);
  border-color: var(--color-accent, #b8922a);
}

.cb-section--elevated {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.cb-section--flush:not([data-has-section-bg="true"]):not([style*="--cb-section-bg"]) {
  padding-block: 0;
}

.cb-section--accent-edge {
  border-inline-start: 4px solid var(--color-accent, #2c5aa0);
}

.cb-section--muted {
  opacity: 0.92;
}

/*
  Appearance tokens (ReservedSectionSettingKeys):
  blocksLayout → data-blocks-layout | stackGap → data-stack-gap
  surfaceTone → data-surface | surfaceTint → data-surface-tint | textTone → data-text-tone
*/
.cb-section[data-stack-gap="tight"] > .cb-section__blocks {
  --cb-blocks-gap: 0.55rem;
  gap: 0.55rem;
}

.cb-section[data-stack-gap="relaxed"] > .cb-section__blocks {
  --cb-blocks-gap: 2rem;
  gap: 2rem;
}

/* Brand color washes — additive under stage chrome (no freeform hex). */
.cb-section[data-surface-tint="stone"]:not([data-hero-stage="true"]) {
  background-color: color-mix(in srgb, var(--color-theater-surface, #f3eee6) 88%, var(--color-bg, #ede8e1));
}

.cb-section[data-surface-tint="accent-wash"]:not([data-hero-stage="true"]) {
  background-color: color-mix(in srgb, var(--color-accent, #b8922a) 16%, var(--color-surface, #f8f5f0));
}

.cb-section[data-surface-tint="theater"]:not([data-hero-stage="true"]) {
  background-color: color-mix(in srgb, var(--color-theater-fabric, #6b3038) 14%, var(--color-theater-surface, #f3eee6));
}

.cb-section[data-surface-tint="ink"]:not([data-hero-stage="true"]) {
  background-color: color-mix(in srgb, var(--color-stage-deep, #12151c) 82%, var(--color-text, #141210));
  color: var(--color-stage-ink, #e8eaed);
}

.cb-section[data-has-section-bg="true"][data-surface-tint="stone"] > .cb-section__media-img,
.cb-section[style*="--cb-section-bg"][data-surface-tint="stone"] > .cb-section__media-img {
  filter: sepia(0.12) saturate(0.92);
}

.cb-section[data-has-section-bg="true"][data-surface-tint="accent-wash"]::before,
.cb-section[style*="--cb-section-bg"][data-surface-tint="accent-wash"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-accent, #b8922a) 22%, transparent);
}

.cb-section[data-has-section-bg="true"][data-surface-tint="theater"]::before,
.cb-section[style*="--cb-section-bg"][data-surface-tint="theater"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-theater-fabric, #6b3038) 28%, transparent);
}

.cb-section[data-has-section-bg="true"][data-surface-tint="ink"]::before,
.cb-section[style*="--cb-section-bg"][data-surface-tint="ink"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: color-mix(in srgb, #0c0e12 48%, transparent);
}

.cb-section[data-theme-token="hero"]:not([data-hero-stage="true"]):not([data-has-section-bg="true"]) {
  background-color: color-mix(in srgb, var(--color-theater-deep, #d8cfc2) 35%, var(--color-surface, #f8f5f0));
}

.cb-section[data-theme-token="accent"]:not([data-has-section-bg="true"]):not([data-hero-stage="true"]) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent, #b8922a) 45%, transparent);
}

.cb-section[data-theme-token="theater"]:not([data-has-section-bg="true"]):not([data-hero-stage="true"]) {
  background-color: var(--color-theater-surface, #f3eee6);
}

.cb-section[data-theme-token="muted"]:not([data-has-section-bg="true"]):not([data-hero-stage="true"]) {
  opacity: 0.94;
}

.cb-section[data-surface="muted"]:not([data-has-section-bg="true"]):not([style*="--cb-section-bg"]):not([data-hero-stage="true"]) {
  background-color: color-mix(in srgb, var(--color-theater-surface, #f3eee6) 92%, var(--color-ink, #1a1a1a) 8%);
  border-radius: var(--cb-section-radius, 1rem);
}

.cb-section[data-surface="elevated"]:not([data-has-section-bg="true"]):not([style*="--cb-section-bg"]):not([data-hero-stage="true"]) {
  background-color: var(--color-surface-elevated, #fffcf8);
  border-radius: var(--cb-section-radius, 1rem);
  box-shadow: 0 0.55rem 1.6rem rgba(0, 0, 0, 0.1);
}

.cb-section[data-surface="inset"]:not([data-has-section-bg="true"]):not([style*="--cb-section-bg"]):not([data-hero-stage="true"]) {
  background-color: color-mix(in srgb, var(--color-theater-deep, #d8cfc2) 55%, transparent);
  border-radius: var(--cb-section-radius, 1rem);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink, #1a1a1a) 8%, transparent);
}

/* Stage photo present: elevated only deepens the band shadow — never frosts the media. */
.cb-section[data-has-section-bg="true"][data-surface="elevated"],
.cb-section[style*="--cb-section-bg"][data-surface="elevated"] {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent),
    0 1rem 2.25rem rgba(0, 0, 0, 0.26);
}

.cb-section[data-text-tone="muted"] {
  color: color-mix(in srgb, var(--color-ink, #1a1a1a) 62%, transparent);
}

.cb-section[data-text-tone="inverse"] {
  color: var(--color-on-accent, #fff);
}

.cb-section[data-text-tone="inverse"] .cb-button-ghost,
.cb-section[data-text-tone="inverse"] .cb-button-secondary,
.cb-section[data-text-tone="inverse"] .cb-button-outline {
  color: inherit;
  border-color: currentColor;
}

.yildiz-cb-carousel {
  padding-block: 0.25rem 0.5rem;
}

.yildiz-cb-carousel__heading {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.yildiz-cb-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 22rem);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
}

.yildiz-cb-carousel__slide {
  margin: 0;
  scroll-snap-align: start;
}

.yildiz-cb-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.35rem;
}

.yildiz-cb-carousel__slide figcaption {
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

.yildiz-cb-carousel__empty {
  margin: 0;
  opacity: 0.6;
}