.designer-favorites {
  --cs-ink: var(--ink);
  --cs-cream: var(--cream);
  --cs-bone: var(--cream-warm);
  --cs-line: rgba(22, 18, 12, 0.18);
  background: var(--cs-cream);
  color: var(--cs-ink);
  overflow: clip;
}

.designer-favorites__inner { max-width: 1180px; }
.designer-favorites__head { margin-bottom: 28px; }
.designer-favorites__head .eyebrow { color: var(--cs-ink); }
.designer-favorites__head h2 { max-width: 13ch; }
.designer-favorites__head p { margin-top: 14px; max-width: 38ch; }
.designer-favorites__tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--cs-bone); border: 1px solid var(--cs-line); z-index: 30; }
.designer-favorites__tabs button { min-width: 0; min-height: 48px; border: 0; border-right: 1px solid var(--cs-line); background: transparent; color: var(--cs-ink); font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.designer-favorites__tabs button:last-child { border-right: 0; }
.designer-favorites__tabs button[aria-selected="true"] { background: var(--cs-ink); color: var(--cs-cream); }
.designer-favorites__notice { margin: 18px 0 0; border-left: 4px solid var(--cs-ink); background: var(--cs-bone); padding: 16px; font-weight: 700; }
.designer-favorites [role="tabpanel"] { padding-top: 18px; }
.designer-favorites [hidden] { display: none !important; }
.designer-favorites__workspace { display: grid; gap: 24px; }
.designer-favorites__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cs-bone); border: 1px solid var(--cs-line); touch-action: pan-y; }
.designer-favorites__stage canvas,
.designer-favorites__stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.designer-favorites__stage-message { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; margin: 0; padding: 28px; background: var(--cs-bone); color: var(--cs-ink); text-align: center; }
.designer-favorites__swipe-hint { margin-top: 8px; text-align: center; font-size: 0.78rem; color: rgba(22, 18, 12, 0.7); }
.designer-favorites__scene-nav { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; margin-top: 10px; }
.designer-favorites__scene-nav > button { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--cs-line); background: transparent; color: var(--cs-ink); }
.designer-favorites__scene-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.designer-favorites__scene-meta { min-width: 0; text-align: center; }
.designer-favorites__scene-label { font-family: var(--font-display); font-size: 1.05rem; }
.designer-favorites__dots { display: flex; justify-content: center; }
.designer-favorites__dots button { width: 44px; height: 44px; border: 0; background: transparent; }
.designer-favorites__dots button::before { content: ""; display: block; width: 6px; height: 6px; margin: auto; border-radius: 50%; background: rgba(22, 18, 12, 0.3); }
.designer-favorites__dots button[aria-current="true"]::before { width: 18px; border-radius: 0; background: var(--cs-ink); }
.designer-favorites__upload,
.designer-favorites__upload-return,
.designer-favorites__inline-cta,
.designer-favorites__fallback-quote { width: 100%; min-height: 48px; margin-top: 14px; border: 1px solid var(--cs-ink); background: transparent; color: var(--cs-ink); display: flex; align-items: center; justify-content: center; font: 700 0.92rem/1 var(--font-body); }
.designer-favorites__fallback { margin: 0; }
.designer-favorites__fallback img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.designer-favorites__fallback figcaption { margin-top: 10px; font-family: var(--font-display); }
.designer-favorites__upload-actions { display: grid; gap: 8px; }
.designer-favorites__upload-note,
.designer-favorites__upload-error { margin-top: 10px; padding: 12px; background: var(--cs-bone); font-size: 0.82rem; line-height: 1.45; }
.designer-favorites__upload-error { border-left: 3px solid var(--cs-ink); }
.designer-favorites__controls { display: grid; gap: 24px; }
.designer-favorites__group { border-top: 1px solid var(--cs-line); padding-top: 18px; }
.designer-favorites__group h3,
.designer-favorites__group legend { margin-bottom: 12px; font: 700 0.75rem/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.designer-favorites__group fieldset { min-width: 0; border: 0; }
.designer-favorites__looks,
.designer-favorites__modes,
.designer-favorites__surfaces,
.designer-favorites__colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.designer-favorites__looks button,
.designer-favorites__modes button,
.designer-favorites__surfaces button,
.designer-favorites__colors button { min-height: 48px; border: 1px solid var(--cs-line); background: var(--cs-cream); color: var(--cs-ink); padding: 10px; text-align: left; font-family: var(--font-body); }
.designer-favorites button[aria-pressed="true"],
.designer-favorites button[aria-checked="true"] { border-color: var(--cs-ink); box-shadow: inset 0 0 0 1px var(--cs-ink); }
.designer-favorites__swatch { display: inline-block; width: 24px; height: 24px; margin-right: 8px; border: 1px solid rgba(22, 18, 12, 0.3); vertical-align: middle; background: var(--cs-color); }
.designer-favorites__selected { float: right; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.designer-favorites__custom { display: grid; gap: 8px; margin-top: 10px; }
.designer-favorites__custom.is-selected { border: 2px solid var(--cs-ink); padding: 10px; }
.designer-favorites__custom-selected { min-height: 1em; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.designer-favorites__custom label { display: grid; gap: 4px; font-size: 0.86rem; }
.designer-favorites__custom input { width: 100%; min-height: 48px; border: 1px solid var(--cs-line); background: white; color: var(--cs-ink); padding: 10px; font: inherit; }
.designer-favorites__custom input[type="color"] { padding: 5px; }
.designer-favorites__custom button { min-height: 48px; border: 1px solid var(--cs-ink); background: var(--cs-ink); color: var(--cs-cream); font: 700 0.9rem/1 var(--font-body); }
.designer-favorites__summary { padding: 16px; background: var(--cs-bone); }
.designer-favorites__disclaimer { margin-top: 10px; font-size: 0.82rem; }
.designer-favorites button:focus-visible,
.designer-favorites a:focus-visible,
.designer-favorites input:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 3px; }
.designer-favorites.is-cs-sticky .designer-favorites__tabs { position: sticky; top: var(--cs-site-header-height, 0); }

@media (max-width: 699px) {
  .designer-favorites { min-height: 1700px; }
  .designer-favorites.is-cs-sticky .designer-favorites__inner { padding-bottom: calc(var(--cs-mobile-action-height, 0px) + 16px); }
}

@media (min-width: 900px) {
  .designer-favorites__workspace { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .designer-favorites *,
  .designer-favorites *::before,
  .designer-favorites *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}