/* ETAP_CSP_PHASE5 — extracted styles for commerce.html (v7.31) */
/* ETAP_COMMERCE_TAILWIND_SELFHOST_v1 (v9.20, 2026-06-04):
   Сайт перешёл с Tailwind Play CDN на self-hosted /static/css/tailwind.min.css
   (ETAP_CSP_PHASE1, 2026-05-09). Тот build — purge-сборка ДО появления commerce.html
   (создана 22 мая), поэтому в нём нет палитры slate и ряда утилит, которыми
   пользуются commerce.html и commerce_main.js. Здесь — точечный supplement только
   для /commerce (файл подключается ТОЛЬКО на commerce.html, ПОСЛЕ tailwind.min.css).
   Долгосрочно: пересобрать tailwind.min.css (config.content уже включает commerce*),
   добавив slate в safelist. Значения — канонический Tailwind v3. */

/* layout / sizing / spacing / text */
.max-w-6xl{max-width:72rem}
.min-h-screen{min-height:100vh}
.mr-1{margin-right:0.25rem}
.align-middle{vertical-align:middle}
.font-normal{font-weight:400}

/* slate — text */
.text-slate-500{color:#64748b}
.text-slate-600{color:#475569}
.text-slate-700{color:#334155}
.text-slate-800{color:#1e293b}

/* slate — background */
.bg-slate-50{background-color:#f8fafc}
.bg-slate-100{background-color:#f1f5f9}
.bg-slate-200{background-color:#e2e8f0}

/* slate — border */
.border-slate-100{border-color:#f1f5f9}
.border-slate-200{border-color:#e2e8f0}
.border-slate-300{border-color:#cbd5e1}

/* hover states (purged from self-hosted build) */
.hover\:bg-emerald-50:hover{background-color:#ecfdf5}
.hover\:bg-emerald-700:hover{background-color:#047857}
.hover\:bg-emerald-800:hover{background-color:#065f46}
.hover\:bg-rose-700:hover{background-color:#be123c}
.hover\:bg-slate-50:hover{background-color:#f8fafc}
.hover\:bg-slate-300:hover{background-color:#cbd5e1}
.hover\:border-emerald-400:hover{border-color:#34d399}
.hover\:text-slate-900:hover{color:#0f172a}
.hover\:underline:hover{text-decoration-line:underline}

/* ETAP_COMMERCE_V2_DESIGN_v1 (v9.25, Баг #4): дизайн-система v2 (index_v2) на /commerce */
:root{ --sb-ink:#0a0a0f; --sb-cream:#faf7f0; --sb-amber:#FBBF24; --sb-amber2:#FB923C; }
.font-display{ font-family:"Bricolage Grotesque","Manrope",system-ui,sans-serif; letter-spacing:-0.03em; font-weight:800; }
body.sb-commerce{ font-family:"Manrope",system-ui,sans-serif; background:var(--sb-cream); color:#18181b; }
.sb-header{ background:rgba(250,247,240,.85); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(10,10,15,.06); }
.sb-logo{ width:38px; height:38px; border-radius:12px; background:var(--sb-ink); color:var(--sb-cream); display:flex; align-items:center; justify-content:center; font-weight:800; font-family:"Bricolage Grotesque","Manrope",sans-serif; }
.sb-wordmark{ font-family:"Bricolage Grotesque","Manrope",sans-serif; font-weight:800; letter-spacing:-0.03em; color:var(--sb-ink); }
.sb-navlink{ font-size:13px; font-weight:600; color:rgba(10,10,15,.62); transition:color .2s; text-decoration:none; }
.sb-navlink:hover{ color:var(--sb-ink); }
.sb-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(251,191,36,.14); color:#B45309; border:1px solid rgba(251,191,36,.25); }
.sb-btn-primary{ background:linear-gradient(135deg,#FBBF24 0%,#FB923C 100%); color:#09090B; font-weight:700; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.sb-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -8px rgba(251,146,60,.5); }
.sb-spinner{ width:18px; height:18px; border:2px solid rgba(10,10,15,.15); border-top-color:var(--sb-amber2); border-radius:50%; animation:sb-spin .8s linear infinite; display:inline-block; vertical-align:middle; }
@keyframes sb-spin{ to{ transform:rotate(360deg); } }