/*
 * Необязательные детали оформления BIT PARTS.
 * Установите data-theme-style, data-theme-layout и inline-токены из
 * themeCSSProperties() на корне витрины или отдельном предпросмотре.
 * Классы theme-* специально не затрагивают сторонние элементы интерфейса.
 */

[data-theme-style] {
  color-scheme: light;
  color: var(--text);
  background: var(--background);
  font-family: var(--body-font);
  --theme-space: calc(1rem * var(--density, 1));
}

[data-theme-style="paddock"],
[data-theme-style="midnight"],
[data-theme-style="copper"] { color-scheme: dark; }

.theme-heading {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight, 700);
  letter-spacing: var(--letter-spacing, -.04em);
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.theme-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  min-width: 0;
}

.theme-hero {
  position: relative;
  isolation: isolate;
  background: var(--hero-background);
  color: var(--hero-text);
  border-radius: var(--radius);
  min-width: 0;
}

.theme-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  background: var(--accent);
  color: var(--onaccent);
  font: inherit;
  font-weight: var(--button-weight, 700);
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.theme-button:disabled { opacity: .58; cursor: not-allowed; }
.theme-button--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.theme-button:focus-visible,
.theme-field:focus-visible,
[data-theme-style] a:focus-visible,
[data-theme-style] button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.theme-field {
  min-height: 46px;
  min-width: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: .75rem 1rem;
  font: inherit;
  font-size: max(1rem, 16px);
}
.theme-field::placeholder { color: var(--muted); opacity: 1; }
.theme-kicker { color: var(--muted); font-size: .75rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.theme-badge { display: inline-flex; padding: .3rem .65rem; border-radius: var(--button-radius); background: var(--accent-soft); color: var(--text); font-size: .75rem; font-weight: 650; }
.theme-rule { border: 0; border-top: 1px solid var(--border); }
.theme-muted { color: var(--muted); }

/* Точка старта: собранные формы, крупные цифры, оранжевая метка. */
[data-theme-style="ignition"] .theme-kicker::before { content: ''; display: inline-block; width: .55rem; height: .55rem; background: var(--accent); border-radius: 2px; margin-right: .55rem; }
[data-theme-style="ignition"] .theme-card--feature { border-top: 3px solid var(--accent); }
[data-theme-style="ignition"] .theme-stat { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.06em; }

/* Чертёж: сетка ограничена главной сценой, основной текст остаётся чистым. */
[data-theme-style="blueprint"] .theme-hero { background-image: linear-gradient(rgba(24,85,180,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(24,85,180,.045) 1px, transparent 1px); background-size: 24px 24px; }
[data-theme-style="blueprint"] .theme-kicker,
[data-theme-style="blueprint"] .theme-badge { font-family: var(--heading-font); }
[data-theme-style="blueprint"] .theme-card--feature { border-style: dashed; }
[data-theme-style="blueprint"] .theme-button { text-transform: uppercase; font-size: .82rem; letter-spacing: .055em; }

/* Редакция: типографическая иерархия и длинные тонкие линии. */
[data-theme-style="edition"] .theme-hero { border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); }
[data-theme-style="edition"] .theme-kicker { letter-spacing: .2em; }
[data-theme-style="edition"] .theme-card { border-left: 0; border-right: 0; }
[data-theme-style="edition"] .theme-button { padding-inline: 1.6rem; letter-spacing: .04em; }
[data-theme-style="edition"] .theme-badge { background: transparent; border: 1px solid var(--border); }

/* Точная механика: лёгкая металлическая плоскость и компактные фаски. */
[data-theme-style="steel"] .theme-hero { background-image: linear-gradient(135deg, rgba(255,255,255,.58), transparent 58%); border: 1px solid var(--border); }
[data-theme-style="steel"] .theme-card { border-bottom-width: 2px; }
[data-theme-style="steel"] .theme-kicker { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
[data-theme-style="steel"] .theme-button { box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }

/* Ателье: мягкий овал, тёплые поля и спокойная антиква. */
[data-theme-style="atelier"] .theme-hero { border-radius: 36px 36px 80px 36px; background-image: radial-gradient(ellipse at 100% 100%, rgba(132,59,83,.07), transparent 62%); }
[data-theme-style="atelier"] .theme-badge { border-radius: 999px; padding-inline: .85rem; }
[data-theme-style="atelier"] .theme-kicker { font-weight: 500; letter-spacing: .14em; }
[data-theme-style="atelier"] .theme-card--feature { border-radius: 44px 20px 44px 20px; }

/* Арктика: стеклянные блики без зависимости от backdrop-filter. */
[data-theme-style="arctic"] .theme-hero { background-image: radial-gradient(ellipse at 80% 15%, rgba(255,255,255,.9), transparent 58%), linear-gradient(125deg, transparent, rgba(7,93,189,.04)); border: 1px solid var(--border); }
[data-theme-style="arctic"] .theme-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow); }
[data-theme-style="arctic"] .theme-button { box-shadow: 0 5px 12px rgba(7,93,189,.13); }
[data-theme-style="arctic"] .theme-badge { border: 1px solid var(--border); border-radius: 999px; }

/* Контраст: жёсткие линии, плоские цвета, механическое нажатие. */
[data-theme-style="brutalist"] .theme-hero { border: 2px solid var(--text); }
[data-theme-style="brutalist"] .theme-card,
[data-theme-style="brutalist"] .theme-field { border-width: 2px; }
[data-theme-style="brutalist"] .theme-button { border: 2px solid var(--text); box-shadow: 3px 3px 0 var(--text); text-transform: uppercase; font-size: .84rem; }
[data-theme-style="brutalist"] .theme-kicker { color: var(--text); font-family: var(--body-font); }
[data-theme-style="brutalist"] .theme-badge { border: 1px solid var(--text); }
[data-theme-style="brutalist"] .theme-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--text); }

/* Паддок: спортивная типографика и диагональ на краю блока. */
[data-theme-style="paddock"] .theme-heading { text-transform: uppercase; font-style: italic; }
[data-theme-style="paddock"] .theme-hero { border-left: 4px solid var(--accent); background-image: repeating-linear-gradient(125deg, transparent, transparent 22px, rgba(192,237,91,.025) 22px, rgba(192,237,91,.025) 24px); }
[data-theme-style="paddock"] .theme-button { text-transform: uppercase; letter-spacing: .035em; }
[data-theme-style="paddock"] .theme-kicker { color: var(--accent); }
[data-theme-style="paddock"] .theme-card--feature { border-bottom: 3px solid var(--accent); }

/* Полночь: голубая глубина и аккуратные контуры. */
[data-theme-style="midnight"] .theme-hero { background-image: radial-gradient(ellipse at 85% 0%, rgba(105,214,242,.1), transparent 62%); border: 1px solid var(--border); }
[data-theme-style="midnight"] .theme-card--feature { box-shadow: inset 0 1px 0 rgba(105,214,242,.18), var(--shadow); }
[data-theme-style="midnight"] .theme-button { box-shadow: 0 0 22px rgba(105,214,242,.12); }
[data-theme-style="midnight"] .theme-badge { color: var(--accent); border: 1px solid #356171; }

/* Медная ночь: тонкий кант и антиква без блестящих заливок. */
[data-theme-style="copper"] .theme-hero { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--border); }
[data-theme-style="copper"] .theme-kicker { color: var(--accent); letter-spacing: .19em; }
[data-theme-style="copper"] .theme-card { border-color: var(--border); }
[data-theme-style="copper"] .theme-card--feature { outline: 1px solid var(--border); outline-offset: -7px; }
[data-theme-style="copper"] .theme-button { padding-inline: 1.6rem; letter-spacing: .045em; }
[data-theme-style="copper"] .theme-badge { background: transparent; border: 1px solid var(--border); }

@media (hover: hover) and (pointer: fine) {
  .theme-button:not(:disabled):hover { filter: brightness(.96); transform: translateY(-1px); }
  [data-theme-style="paddock"] .theme-button:not(:disabled):hover,
  [data-theme-style="midnight"] .theme-button:not(:disabled):hover,
  [data-theme-style="copper"] .theme-button:not(:disabled):hover { filter: brightness(1.06); }
}

/*
 * Предпросмотр в галерее владельца. Не является реализацией макета магазина.
 * Дочерние элементы: header, hero, catalog, side, note, footer с префиксом
 * theme-preview__. Все декоративные элементы получают aria-hidden="true".
 * Сам выбор темы — отдельная доступная кнопка с её полным названием.
 */
.theme-preview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 10px 30px 24px 13px;
  grid-template-areas: 'header header header header header header' 'hero hero hero hero side side' 'catalog catalog catalog catalog catalog catalog' 'footer footer footer footer footer footer';
  gap: 5px;
  padding: 9px;
  min-width: 0;
  height: 120px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: min(var(--radius), 12px);
  overflow: hidden;
  pointer-events: none;
}
.theme-preview > span { display: block; min-width: 0; min-height: 0; border-radius: min(var(--radius), 5px); }
.theme-preview__header { grid-area: header; background: var(--surface); border-bottom: 1px solid var(--border); }
.theme-preview__hero { grid-area: hero; background: var(--hero-background); border: 1px solid var(--border); position: relative; }
.theme-preview__hero::before { content: ''; position: absolute; top: 22%; left: 9%; width: 55%; height: 4px; background: var(--text); border-radius: 2px; opacity: .8; }
.theme-preview__hero::after { content: ''; position: absolute; bottom: 17%; left: 9%; width: 35%; height: 7px; background: var(--accent); border-radius: min(var(--button-radius), 4px); }
.theme-preview__catalog { grid-area: catalog; background: repeating-linear-gradient(90deg, var(--surface) 0, var(--surface) calc(25% - 4px), transparent calc(25% - 4px), transparent 25%); border-bottom: 1px solid var(--border); }
.theme-preview__side { grid-area: side; background: var(--accent-soft); border: 1px solid var(--border); }
.theme-preview__note { grid-area: note; background: var(--surface-alt); display: none !important; }
.theme-preview__footer { grid-area: footer; background: var(--surface-alt); }
.theme-preview[data-theme-layout="centered"] { grid-template-areas: 'header header header header header header' '. hero hero hero hero .' 'catalog catalog catalog catalog catalog catalog' 'footer footer footer footer footer footer'; }
.theme-preview[data-theme-layout="centered"] .theme-preview__hero::before { left: 22%; }
.theme-preview[data-theme-layout="centered"] .theme-preview__hero::after { left: 32%; }
.theme-preview[data-theme-layout="sidebar"] { grid-template-areas: 'header header header header header header' 'side side hero hero hero hero' 'side side catalog catalog catalog catalog' 'side side footer footer footer footer'; }
.theme-preview[data-theme-layout="catalog-first"] { grid-template-rows: 10px 16px 42px 9px; grid-template-areas: 'header header header header header header' 'hero hero hero hero hero hero' 'catalog catalog catalog catalog catalog catalog' 'footer footer footer footer footer footer'; }
.theme-preview[data-theme-layout="bento"] { grid-template-areas: 'header header header header header header' 'hero hero hero hero side side' 'hero hero hero hero note note' 'catalog catalog catalog footer footer footer'; }
.theme-preview[data-theme-layout="bento"] .theme-preview__note { display: block !important; }
.theme-preview[data-theme-layout="editorial"] { grid-template-rows: 8px 40px 18px 11px; grid-template-areas: 'header header header header header header' 'hero hero hero hero hero hero' 'side side side catalog catalog catalog' 'footer footer footer footer footer footer'; }
.theme-preview[data-theme-layout="compact"] { grid-template-rows: 9px 14px 43px 11px; grid-template-areas: 'header header header header header header' 'hero hero hero hero side side' 'catalog catalog catalog catalog catalog catalog' 'footer footer footer footer footer footer'; }
.theme-preview[data-theme-layout="compact"] .theme-preview__catalog { background: repeating-linear-gradient(0deg, var(--surface) 0, var(--surface) 7px, var(--border) 7px, var(--border) 8px); }
.theme-preview[data-theme-layout="showcase"] { grid-template-rows: 9px 48px 12px 8px; grid-template-areas: 'header header header header header header' 'hero hero hero hero hero hero' 'catalog catalog catalog catalog catalog catalog' 'footer footer footer footer footer footer'; }
.theme-preview[data-theme-layout="dashboard"] { grid-template-areas: 'header header header header header header' 'side side hero hero hero hero' 'catalog catalog catalog note note note' 'footer footer footer footer footer footer'; }
.theme-preview[data-theme-layout="dashboard"] .theme-preview__note { display: block !important; }
.theme-preview[data-theme-layout="magazine"] { grid-template-areas: 'header header header header header header' 'hero hero hero hero side side' 'hero hero hero hero catalog catalog' 'footer footer footer footer footer footer'; }
.theme-preview[data-theme-layout="marketplace"] { grid-template-rows: 10px 16px 10px 41px; grid-template-areas: 'header header header header header header' 'hero hero hero hero hero hero' 'side side side side side side' 'catalog catalog catalog catalog catalog catalog'; }
.theme-preview[data-theme-layout="concierge"] { grid-template-areas: 'header header header header header header' 'side side side hero hero hero' 'side side side note note note' 'catalog catalog catalog catalog catalog catalog'; }
.theme-preview[data-theme-layout="concierge"] .theme-preview__note { display: block !important; }
.theme-preview[data-theme-layout="stacked"] { grid-template-rows: 9px 27px 22px 19px; grid-template-areas: 'header header header header header header' 'hero hero hero hero hero hero' 'catalog catalog catalog catalog catalog catalog' 'side side side side side side'; }
.theme-preview[data-theme-layout="rail"] { grid-template-rows: 10px 22px 22px 23px; grid-template-areas: 'side header header header header header' 'side hero hero hero hero hero' 'side catalog catalog catalog catalog catalog' 'side footer footer footer footer footer'; }
.theme-preview[data-theme-layout="asymmetric"] { grid-template-areas: 'header header header header header header' 'hero hero hero hero . side' '. . catalog catalog catalog side' 'footer footer footer note note note'; }
.theme-preview[data-theme-layout="asymmetric"] .theme-preview__note { display: block !important; }

/* Элементы вне grid-template-areas не должны создавать случайные колонки. */
.theme-preview[data-theme-layout="centered"] .theme-preview__side,
.theme-preview[data-theme-layout="catalog-first"] .theme-preview__side,
.theme-preview[data-theme-layout="showcase"] .theme-preview__side,
.theme-preview[data-theme-layout="marketplace"] .theme-preview__footer,
.theme-preview[data-theme-layout="concierge"] .theme-preview__footer,
.theme-preview[data-theme-layout="stacked"] .theme-preview__footer { display: none; }

@media (max-width: 600px) {
  .theme-button { min-height: 46px; }
  [data-theme-style="atelier"] .theme-hero { border-radius: 22px 22px 42px 22px; }
  [data-theme-style="brutalist"] .theme-card { box-shadow: 3px 3px 0 var(--text); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-button { transition: none; }
  .theme-button:not(:disabled):hover { transform: none; }
}