/**
 * Size Guide appearance presets + admin embedded preview chrome.
 * Classic is the default (no remapping). Other themes only override presentation tokens.
 * Geometry / measurement coordinates are never altered here.
 */

/* -------------------------------------------------------------------------- */
/* Embedded admin Preview (same renderer, contained frame)                    */
/* -------------------------------------------------------------------------- */

.spotlight-size-chart-overlay.is-embedded {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100% !important;
  max-height: 100% !important;
  opacity: 1;
  transition: none;
  overflow: hidden;
  /* Mobile-first fill — ignore admin viewport media queries. */
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: var(--sg-overlay-bg, #fff);
}

.spotlight-size-chart-overlay.is-embedded .spotlight-size-chart-modal {
  width: 100%;
  height: 100% !important;
  max-height: 100% !important;
  opacity: 1;
  transform: none;
  transition: none;
  border-radius: 0;
  box-shadow: none;
}

.spotlight-size-chart-overlay.is-embedded.is-desktop-frame {
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 15, 15, 0.42);
}

.spotlight-size-chart-overlay.is-embedded.is-desktop-frame .spotlight-size-chart-modal {
  width: min(100%, 480px);
  height: min(100%, 900px) !important;
  max-height: min(100%, 900px) !important;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(15, 15, 15, 0.2);
}

.spotlight-size-chart-overlay.is-embedded.is-closing {
  opacity: 1;
  pointer-events: auto;
}

/* Beat storefront viewport media queries while embedded in admin Preview. */
@media (min-width: 768px) {
  .spotlight-size-chart-overlay.is-embedded.is-mobile-frame {
    align-items: stretch;
    justify-content: center;
    padding: 0;
    background: var(--sg-overlay-bg, #fff);
  }

  .spotlight-size-chart-overlay.is-embedded.is-mobile-frame .spotlight-size-chart-modal {
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .spotlight-size-chart-overlay.is-embedded.is-desktop-frame {
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 15, 15, 0.42);
  }

  .spotlight-size-chart-overlay.is-embedded.is-desktop-frame .spotlight-size-chart-modal {
    width: min(100%, 480px);
    height: min(100%, 900px) !important;
    max-height: min(100%, 900px) !important;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(15, 15, 15, 0.2);
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Shared token defaults (Classic) — applied so theme switches can remint UI */
/* -------------------------------------------------------------------------- */

.spotlight-size-chart-overlay {
  --sg-overlay-bg: #ffffff;
  --sg-surface: #faf9f7;
  --sg-text: #121315;
  --sg-text-muted: #6b7280;
  --sg-text-soft: #646a73;
  --sg-control-track: #e8e8ed;
  --sg-control-active-bg: #121315;
  --sg-control-active-fg: #ffffff;
  --sg-control-idle-bg: #ebeae8;
  --sg-control-idle-fg: #6b7280;
  --sg-panel: #ffffff;
  --sg-panel-muted: #eceae6;
  --sg-border: rgba(18, 19, 21, 0.08);
  --sg-divider: rgba(18, 19, 21, 0.08);
  --sg-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  --sg-radius-pill: 999px;
  --sg-radius-card: 16px;
  --sg-sheet-bg: #ffffff;
  --sg-sheet-backdrop: rgba(15, 15, 15, 0.35);
  --sg-scroll-fade: rgba(255, 255, 255, 0.96);
  --sg-label-pill-bg: rgba(18, 19, 21, 0.82);
  --sg-label-pill-fg: #faf9f7;
  --sg-footer-bg: #faf9f7;
}

.spotlight-size-chart-overlay[data-sg-theme="classic"] {
  /* Explicit classic — identical to current storefront. */
  --sg-overlay-bg: #ffffff;
  --sg-surface: #faf9f7;
  --sg-text: #121315;
  --sg-text-muted: #6b7280;
  --sg-text-soft: #646a73;
  --sg-control-track: #e8e8ed;
  --sg-control-active-bg: #121315;
  --sg-control-active-fg: #ffffff;
  --sg-control-idle-bg: #ebeae8;
  --sg-control-idle-fg: #6b7280;
  --sg-panel: #ffffff;
  --sg-panel-muted: #eceae6;
  --sg-border: rgba(18, 19, 21, 0.08);
  --sg-divider: rgba(18, 19, 21, 0.08);
  --sg-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  --sg-radius-pill: 999px;
  --sg-radius-card: 16px;
  --sg-sheet-bg: #ffffff;
  --sg-sheet-backdrop: rgba(15, 15, 15, 0.35);
  --sg-scroll-fade: rgba(255, 255, 255, 0.96);
  --sg-label-pill-bg: rgba(18, 19, 21, 0.82);
  --sg-label-pill-fg: #faf9f7;
  --sg-footer-bg: #faf9f7;
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] {
  --sg-overlay-bg: #fcfcfc;
  --sg-surface: #fcfcfc;
  --sg-text: #111111;
  --sg-text-muted: #8a8f98;
  --sg-text-soft: #8a8f98;
  --sg-control-track: #f1f1f3;
  --sg-control-active-bg: #111111;
  --sg-control-active-fg: #ffffff;
  --sg-control-idle-bg: #f1f1f3;
  --sg-control-idle-fg: #8a8f98;
  --sg-panel: #ffffff;
  --sg-panel-muted: #f4f4f5;
  --sg-border: rgba(17, 17, 17, 0.06);
  --sg-divider: rgba(17, 17, 17, 0.06);
  --sg-shadow: none;
  --sg-radius-pill: 999px;
  --sg-radius-card: 14px;
  --sg-sheet-bg: #ffffff;
  --sg-sheet-backdrop: rgba(17, 17, 17, 0.28);
  --sg-scroll-fade: rgba(252, 252, 252, 0.96);
  --sg-label-pill-bg: rgba(17, 17, 17, 0.78);
  --sg-label-pill-fg: #fcfcfc;
  --sg-footer-bg: #fcfcfc;
}

.spotlight-size-chart-overlay[data-sg-theme="modern"] {
  --sg-overlay-bg: #f3f2ef;
  --sg-surface: #f7f6f3;
  --sg-text: #141416;
  --sg-text-muted: #6b717c;
  --sg-text-soft: #6b717c;
  --sg-control-track: #e6e5e1;
  --sg-control-active-bg: #141416;
  --sg-control-active-fg: #ffffff;
  --sg-control-idle-bg: #ebeae6;
  --sg-control-idle-fg: #6b717c;
  --sg-panel: #ffffff;
  --sg-panel-muted: #ebe9e4;
  --sg-border: rgba(20, 20, 22, 0.1);
  --sg-divider: rgba(20, 20, 22, 0.1);
  --sg-shadow: 0 8px 24px rgba(20, 20, 22, 0.06);
  --sg-radius-pill: 999px;
  --sg-radius-card: 18px;
  --sg-sheet-bg: #ffffff;
  --sg-sheet-backdrop: rgba(20, 20, 22, 0.4);
  --sg-scroll-fade: rgba(247, 246, 243, 0.96);
  --sg-label-pill-bg: rgba(20, 20, 22, 0.84);
  --sg-label-pill-fg: #f7f6f3;
  --sg-footer-bg: #f7f6f3;
}

.spotlight-size-chart-overlay[data-sg-theme="dark"] {
  --sg-overlay-bg: #0f1012;
  --sg-surface: #141518;
  --sg-text: #f4f4f5;
  --sg-text-muted: #9ca3af;
  --sg-text-soft: #9ca3af;
  --sg-control-track: #23252b;
  --sg-control-active-bg: #f4f4f5;
  --sg-control-active-fg: #0f1012;
  --sg-control-idle-bg: #23252b;
  --sg-control-idle-fg: #9ca3af;
  --sg-panel: #1a1c21;
  --sg-panel-muted: #1f2127;
  --sg-border: rgba(244, 244, 245, 0.1);
  --sg-divider: rgba(244, 244, 245, 0.1);
  --sg-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sg-radius-pill: 999px;
  --sg-radius-card: 16px;
  --sg-sheet-bg: #1a1c21;
  --sg-sheet-backdrop: rgba(0, 0, 0, 0.55);
  --sg-scroll-fade: rgba(20, 21, 24, 0.96);
  --sg-label-pill-bg: rgba(244, 244, 245, 0.9);
  --sg-label-pill-fg: #141518;
  --sg-footer-bg: #141518;
}

/* Mobile: themed full-screen scrim. Desktop: keep translucent store backdrop (same as Classic). */
.spotlight-size-chart-overlay[data-sg-theme="minimal"],
.spotlight-size-chart-overlay[data-sg-theme="modern"],
.spotlight-size-chart-overlay[data-sg-theme="dark"] {
  background: var(--sg-overlay-bg);
}

@media (min-width: 768px) {
  .spotlight-size-chart-overlay[data-sg-theme="minimal"]:not(.is-embedded),
  .spotlight-size-chart-overlay[data-sg-theme="modern"]:not(.is-embedded),
  .spotlight-size-chart-overlay[data-sg-theme="dark"]:not(.is-embedded) {
    background: var(--sg-sheet-backdrop, rgba(15, 15, 15, 0.42));
  }
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-size-chart-modal,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-size-chart-modal,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-size-chart-modal {
  background: var(--sg-surface);
  color: var(--sg-text);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-title,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-title,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-title,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-close,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-close,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-close,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-measure-summary__name,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-measure-summary__name,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-measure-summary__name,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-measure-summary__value,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-measure-summary__value,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-measure-summary__value,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer__cell,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer__cell,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer__cell {
  color: var(--sg-text);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-subtitle,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-subtitle,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-subtitle,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-measure-summary__title,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-measure-summary__title,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-measure-summary__title,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-loading,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-loading,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-loading,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-size-chart-empty,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-size-chart-empty,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-size-chart-empty,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-segment__btn,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-segment__btn,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-segment__btn,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-size-dial__size,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-size-dial__size,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-size-dial__size {
  color: var(--sg-text-muted);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-segment,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-segment,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-segment {
  background: var(--sg-control-track);
  border-radius: var(--sg-radius-pill);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-segment__btn.is-active,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-segment__btn.is-active,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-segment__btn.is-active,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-size-dial__size.is-active,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-size-dial__size.is-active,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-size-dial__size.is-active {
  background: var(--sg-control-active-bg);
  color: var(--sg-control-active-fg);
  box-shadow: var(--sg-shadow);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-size-dial__size,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-size-dial__size,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-size-dial__size {
  background: var(--sg-control-idle-bg);
  color: var(--sg-control-idle-fg);
  border-radius: var(--sg-radius-pill);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer {
  background: var(--sg-footer-bg);
  border-top-color: var(--sg-divider);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer__divider,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer__divider,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer__divider {
  background: var(--sg-divider);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-measure-summary__row,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-measure-summary__row,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-measure-summary__row {
  border-bottom-color: var(--sg-divider);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-sheet-backdrop,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-sheet-backdrop,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-sheet-backdrop {
  background: var(--sg-sheet-backdrop);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-sheet,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-sheet,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-sheet {
  background: var(--sg-sheet-bg);
  color: var(--sg-text);
  border-radius: var(--sg-radius-card) var(--sg-radius-card) 0 0;
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-howto-card,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-howto-card,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-howto-card {
  background: var(--sg-panel);
  border-color: var(--sg-border);
  border-radius: var(--sg-radius-card);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-howto-crop,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-howto-crop,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-howto-crop {
  background: var(--sg-panel-muted);
}

/* Footer: Compare all sizes / How to measure */
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer__compare,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer__compare,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer__compare,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer__howto,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer__howto,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer__howto,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-compare-btn,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-compare-btn,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-compare-btn {
  color: var(--sg-text);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer__compare svg,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer__compare svg,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer__compare svg,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer__howto svg,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer__howto svg,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer__howto svg {
  color: var(--sg-text-muted);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer__chevron,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer__chevron,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer__chevron {
  color: var(--sg-text-soft);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer__compare:focus-visible,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer__compare:focus-visible,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer__compare:focus-visible,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-footer__howto:focus-visible,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-footer__howto:focus-visible,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-footer__howto:focus-visible,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-howto-back:focus-visible,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-howto-back:focus-visible,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-howto-back:focus-visible {
  outline-color: var(--sg-text);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-howto-back,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-howto-back,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-howto-back {
  color: var(--sg-text-muted);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-howto-list__item,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-howto-list__item,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-howto-list__item {
  color: var(--sg-text);
  border-bottom-color: var(--sg-divider);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-howto-card__title,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-howto-card__title,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-howto-card__title,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-compare-pair__title,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-compare-pair__title,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-compare-pair__title,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-howto-pair__title,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-howto-pair__title,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-howto-pair__title {
  color: var(--sg-text-muted);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-sheet .spotlight-sg-detail-text,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-sheet .spotlight-sg-detail-text,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-sheet .spotlight-sg-detail-text {
  color: var(--sg-text-muted);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-compare-table-wrap,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-compare-table-wrap,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-compare-table-wrap {
  border-color: var(--sg-border);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-compare-table th,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-compare-table th,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-compare-table th,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-compare-table td,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-compare-table td,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-compare-table td {
  border-bottom-color: var(--sg-divider);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-compare-table thead th,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-compare-table thead th,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-compare-table thead th {
  background: var(--sg-panel-muted);
  color: var(--sg-text-muted);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-compare-table tbody th,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-compare-table tbody th,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-compare-table tbody th {
  background: var(--sg-sheet-bg);
  color: var(--sg-text);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-compare-table thead th.spotlight-sg-compare-table__measure-col,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-compare-table thead th.spotlight-sg-compare-table__measure-col,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-compare-table thead th.spotlight-sg-compare-table__measure-col {
  background: var(--sg-panel-muted);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-compare-table tbody th.spotlight-sg-compare-table__measure-col,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-compare-table tbody th.spotlight-sg-compare-table__measure-col,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-compare-table tbody th.spotlight-sg-compare-table__measure-col {
  background: var(--sg-sheet-bg);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-scroll-hint--vertical .spotlight-sg-scroll-hint__fade,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-scroll-hint--vertical .spotlight-sg-scroll-hint__fade,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-scroll-hint--vertical .spotlight-sg-scroll-hint__fade {
  background: linear-gradient(to top, var(--sg-scroll-fade) 18%, rgba(255, 255, 255, 0));
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-scroll-hint--horizontal .spotlight-sg-scroll-hint__fade,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-scroll-hint--horizontal .spotlight-sg-scroll-hint__fade,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .spotlight-sg-scroll-hint--horizontal .spotlight-sg-scroll-hint__fade {
  background: linear-gradient(to left, var(--sg-scroll-fade) 22%, rgba(255, 255, 255, 0));
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .mapper-label-pill__body,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .mapper-label-pill__body,
.spotlight-size-chart-overlay[data-sg-theme="dark"] .mapper-label-pill__body {
  background: var(--sg-label-pill-bg);
  color: var(--sg-label-pill-fg);
}

.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-measure-summary,
.spotlight-size-chart-overlay[data-sg-theme="modern"] .spotlight-sg-mannequin-panel {
  /* Subtle modern depth without altering layout geometry */
  box-shadow: var(--sg-shadow);
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-size-dial {
  margin-top: 12px;
  margin-bottom: 16px;
}

.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-segment__btn.is-active,
.spotlight-size-chart-overlay[data-sg-theme="minimal"] .spotlight-sg-size-dial__size.is-active {
  box-shadow: none;
}