/* Curated component tokens. Attributes are validated model choices. */
[data-store-card-radius="sharp"] { --theme-store-radius: 0; }
[data-store-card-radius="soft"] { --theme-store-radius: 6px; }
[data-store-card-radius="round"] { --theme-store-radius: 24px; }
[data-store-button-shape="sharp"] { --theme-store-button: 0; }
[data-store-button-shape="soft"] { --theme-store-button: 8px; }
[data-store-button-shape="pill"] { --theme-store-button: 999px; }
[data-store-image-ratio="portrait"] { --theme-image-ratio: 3 / 4; }
[data-store-image-ratio="square"] { --theme-image-ratio: 1; }
[data-store-image-ratio="landscape"] { --theme-image-ratio: 4 / 3; }
[data-store-image-fit="cover"] { --theme-image-fit: cover; }
[data-store-image-fit="contain"] { --theme-image-fit: contain; }
[data-store-content-width="narrow"] { --theme-store-width: 1040px; --theme-preview-width: 82%; }
[data-store-content-width="standard"] { --theme-store-width: 1240px; --theme-preview-width: 92%; }
[data-store-content-width="wide"] { --theme-store-width: 1480px; --theme-preview-width: 100%; }
html[data-store-content-width] .storefront-wrap { max-width: var(--theme-store-width); }
html[data-store-button-shape] .btn,
html[data-store-button-shape] .storefront-category-section__view-all,
.dash-store-preview__btn { border-radius: var(--theme-store-button); }
html[data-store-card-radius] .storefront-product-card__media,
html[data-store-card-radius] .storefront-summary-card,
.theme-studio__product { border-radius: var(--theme-store-radius); overflow: hidden; }
html[data-store-image-ratio] .storefront-grid-thumb,
html[data-store-image-ratio] .storefront-grid-thumb--empty,
html[data-store-image-ratio] .storefront-product-card--feature .storefront-product-card__media {
  aspect-ratio: var(--theme-image-ratio);
}
html[data-store-image-fit] .storefront-grid-thumb { object-fit: var(--theme-image-fit); }
html[data-store-image-fit="contain"] .storefront-product-card:hover .storefront-grid-thumb { transform: none; }

[data-dash-button-shape="theme"] { --theme-dash-button: var(--dash-radius-sm, 8px); }
[data-dash-button-shape="sharp"] { --theme-dash-button: 0; }
[data-dash-button-shape="pill"] { --theme-dash-button: 999px; }
[data-dash-card-shadow="none"] { --theme-card-shadow: none; }
[data-dash-card-shadow="soft"] { --theme-card-shadow: 0 3px 12px rgb(0 0 0 / 8%); }
[data-dash-card-shadow="raised"] { --theme-card-shadow: 0 10px 28px rgb(0 0 0 / 16%); }
[data-dash-sidebar-style="neutral"] { --theme-nav-bg: var(--dash-surface); --theme-nav-text: var(--dash-text); }
[data-dash-sidebar-style="tinted"] { --theme-nav-bg: color-mix(in srgb, var(--preview-brand, var(--dash-primary)) 12%, var(--dash-surface)); --theme-nav-text: var(--dash-text); }
[data-dash-sidebar-style="solid"] { --theme-nav-bg: var(--preview-brand, var(--dash-primary)); --theme-nav-text: var(--preview-on-brand, var(--dash-on-primary)); }
[data-dash-table-style="lined"] { --theme-row-bg: transparent; --theme-row-border: var(--dash-border); }
[data-dash-table-style="striped"] { --theme-row-bg: color-mix(in srgb, var(--preview-brand, var(--dash-primary)) 7%, transparent); --theme-row-border: transparent; }
[data-dash-table-style="minimal"] { --theme-row-bg: transparent; --theme-row-border: transparent; }
html[data-dash-text-size="large"] { font-size: 18px; }
html[data-dash-button-shape] .business-workspace .btn { border-radius: var(--theme-dash-button); }
html[data-dash-card-shadow] .business-workspace :is(.card, .dash-card, .dash-table-card, .product-card),
.theme-preview__card { box-shadow: var(--theme-card-shadow); }
html[data-dash-sidebar-style] .business-workspace .dashboard-sidebar,
.theme-preview__sidebar { background: var(--theme-nav-bg); color: var(--theme-nav-text); }
html[data-dash-sidebar-style="solid"] .business-workspace .dashboard-sidebar :is(.dashboard-sidebar__link, .dashboard-sidebar__heading) { color: var(--theme-nav-text); }
html[data-dash-sidebar-style="solid"] .business-workspace .dashboard-sidebar__link:is(.active, :hover) { background: rgb(0 0 0 / 15%); box-shadow: inset 2px 0 currentColor; }
html[data-dash-table-style] .business-workspace .table > tbody > tr > * { border-bottom-color: var(--theme-row-border); }
html[data-dash-table-style] .business-workspace .table > tbody > tr:nth-child(even) > * { --bs-table-bg: var(--theme-row-bg); }
.theme-preview__row { padding: 8px; border-bottom: 1px solid var(--theme-row-border); }
.theme-preview__row:nth-child(odd) { background: var(--theme-row-bg); }
.theme-preview__sidebar { padding: 5px; border-radius: 8px; }
.theme-preview[data-dash-sidebar-style="solid"] .theme-preview__sidebar > div { color: var(--theme-nav-text) !important; }
.theme-preview[data-dash-button-shape="sharp"] .theme-preview__btn,
.theme-preview[data-dash-button-shape="pill"] .theme-preview__btn { border-radius: var(--theme-dash-button) !important; }
.theme-preview[data-dash-text-size="large"] { font-size: 1.125rem; }

/* Theme studio: grouped controls and a persistent, responsive preview. */
.theme-studio-header { padding-bottom: 8px; }
.theme-studio__save { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--dash-border); }
.theme-studio .dash-store-preview__nav { flex-wrap: wrap; }
.theme-studio .dash-store-preview__nav-brand { flex: 1 0 100%; }
.theme-studio .dash-settings-section { padding-block: 26px; }
.theme-studio .dash-settings-section__title { font-size: 1rem; font-weight: 650; }
.theme-studio .dash-settings-section__desc { max-width: 60ch; line-height: 1.6; }
.theme-studio .dash-color-row { padding-block: 11px; }
.theme-studio .dash-color-swatch { width: 38px; height: 38px; border-radius: 10px; }
.theme-studio__control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.theme-studio__control { padding: 16px; border: 1px solid var(--dash-border); border-radius: var(--dash-radius-md); background: var(--dash-bg); }
.theme-studio__control:focus-within { border-color: var(--dash-primary); }
.theme-studio__presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-studio__preset { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border: 1px solid var(--dash-border); border-radius: 10px; background: var(--dash-surface); color: var(--dash-text); font-size: .8rem; }
.theme-studio__preset:hover { border-color: var(--dash-primary); background: var(--dash-primary-subtle); }
.theme-studio__preset > span:last-child { color: var(--dash-text-muted); font-size: .7rem; }
.theme-studio__preset-art { display: block; width: 100%; height: 44px; border: 6px solid var(--dash-primary-subtle); background: linear-gradient(90deg, var(--dash-primary) 25%, transparent 25% 33%, var(--dash-border) 33% 65%, transparent 65% 72%, var(--dash-border) 72%); border-radius: 6px; }
.theme-studio__preset-art--minimal { border-radius: 0; filter: grayscale(1); }
.theme-studio__preset-art--rounded { border-radius: 18px; }
.theme-studio__control .dash-field-label { display: block; margin-bottom: 8px; }
.theme-studio__products { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: var(--theme-preview-width); margin: 18px auto; padding-inline: 12px; }
.theme-studio__product { font-size: 11px; border: 1px solid rgb(128 128 128 / 18%); }
.theme-studio__product-image { aspect-ratio: var(--theme-image-ratio); background: rgb(128 128 128 / 10%); overflow: hidden; }
.theme-studio__product-image svg { width: 100%; height: 100%; }
[data-store-image-fit="cover"] .theme-studio__product-image svg { transform: scale(1.25); }
[data-store-image-fit="contain"] .theme-studio__product-image svg { padding: 14%; }
.theme-studio .theme-preview > .d-flex { min-width: 0; }
.theme-studio .theme-preview .flex-fill { min-width: 0; }
.theme-studio .theme-preview__btn { white-space: normal; }
@media (min-width: 992px) {
  .theme-studio__preview { align-self: flex-start; position: sticky; top: 90px; }
}
@media (max-width: 575px) {
  .theme-studio__control-grid { grid-template-columns: 1fr; }
  .theme-studio__presets { grid-template-columns: 1fr; }
  .theme-studio .theme-preview > .d-flex { flex-direction: column; }
}