/* ============================================================
   Bold Modern — global.css
   Базовый слой: переменные, типографика, кнопки, бэйджи,
   формы, контейнер, заголовок секции, reveal-анимации.
   Стили конкретных блоков подключаются inline в template.php.
   ============================================================ */

:root{
  /* [Эпик Темы Шаг0] primary/шрифты/размеры производны от настроек CMS (B:--ub-* из ColorPaletteService, C:--typography-* из панели). Пустые настройки -> исходный эталон (дефолт в var()). --p50 статикой: --ub-primary-muted слишком тёмный для near-white тинта. Порядок инъекции НЕ важен: var() резолвится в computed-value time по значению. */
  --p:var(--ub-primary,#7C3AED);--ph:var(--ub-primary-hover,#6D28D9);--pl:var(--ub-primary-light,#EDE9FE);--p50:#F5F3FF;
  /* [Эпик Темы theme_accent] accent производный от настройки theme_accent (как --p от theme_color в Шаг0). Дефолт #EC4899 -> градиент --gp управляем обоими концами. */
  --a:var(--ub-accent,#EC4899);--ah:var(--ub-accent-hover,#DB2777);--al:var(--ub-accent-light,#FCE7F3);
  /* [Эпик Темы Шаг2] --gp/--gs производны: тема перекрашивает primary-стоп. --gd/--gh — тёмные фоны, статикой (theme-neutral). */
  --gp:linear-gradient(135deg,var(--p),var(--a));
  --gd:linear-gradient(135deg,#1E1B4B,#312E81,#4C1D95);
  --gs:linear-gradient(135deg,var(--p50),var(--al));
  --gh:linear-gradient(160deg,#0F172A 0%,#1E1B4B 40%,#312E81 70%,#4C1D95 100%);
  --dk:#0F172A;--dc:#1E293B;--ds:#1E1B4B;
  /* [Группа B gray-exact] --n* = точные Tailwind gray (hue-выбор Михаила): витрина gray-*→var(--n*) сохраняет CDN-вид. Было slate (#F8FAFC..#0F172A). */
  --n50:#F9FAFB;--n100:#F3F4F6;--n200:#E5E7EB;--n300:#D1D5DB;
  --n400:#9CA3AF;--n500:#6B7280;--n600:#4B5563;--n700:#374151;
  --n800:#1F2937;--n900:#111827;
  --ok:#10B981;--wrn:#F59E0B;--err:#EF4444;--inf:#3B82F6;
  /* [Эпик Темы Шаг4] светлые семантические тинты (фоны панелей success/warn/error чекаута). Статикой — семантика не зависит от theme_color. */
  --ok50:#ECFDF5;--wrn50:#FFFBEB;--err50:#FEF2F2;
  --fh:var(--typography-secondary-font,'Onest',sans-serif);--fb:var(--typography-primary-font,'Inter',sans-serif);
  --h1:var(--typography-font-size-h1,clamp(2.5rem,5vw,3.75rem));--h2:var(--typography-font-size-h2,clamp(2rem,4vw,3rem));
  --h3:var(--typography-font-size-h3,clamp(1.5rem,3vw,2rem));--h4:var(--typography-font-size-h4,clamp(1.25rem,2vw,1.5rem));
  --rs:6px;--rm:10px;--rl:16px;--rxl:24px;--rf:9999px;
  /* [z1v §7.3] три ступени теней дизайн-кода: sm (панели/карточки) · brand (CTA/hover-глоу) · modal */
  --sh-sm:0 10px 40px color-mix(in srgb,var(--dk) 8%,transparent);
  --sh-brand:0 0 40px color-mix(in srgb,var(--p) 15%,transparent);
  --sh-modal:0 25px 50px -12px color-mix(in srgb,var(--dk) 25%,transparent);
  --tr:transform var(--transition-duration,.2s) var(--transition-easing,ease),box-shadow var(--transition-duration,.2s) var(--transition-easing,ease),border-color var(--transition-duration,.2s) var(--transition-easing,ease),background-color var(--transition-duration,.2s) var(--transition-easing,ease),color var(--transition-duration,.2s) var(--transition-easing,ease),opacity var(--transition-duration,.2s) var(--transition-easing,ease);
}

/* — Base / typography — */
.bm-scope *,body *{box-sizing:border-box}
body{font-family:var(--fb);color:var(--n800);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body img{max-width:100%;display:block}
body a{color:var(--p);text-decoration:none}
h1,h2,h3,h4{font-family:var(--fh);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--n900)}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3)}h4{font-size:var(--h4)}

/* — Container — */
.ct{max-width:var(--block-w,var(--container-max,1200px));margin:0 auto;padding:0 24px;position:relative;z-index:1}/* [Волна12 N3] z-index над блок-оверлеем. [Волна12 Ч.3] max-width каскад: --block-w(блок) → --container-max(сайт) → 1200px. --block-w не задан → байт-в-байт. */

/* — Section header — */
.sh{text-align:center;max-width:640px;margin:0 auto 48px}
.sh .badge{margin-bottom:12px}
.sh p{color:var(--n500);font-size:1.125rem;margin-top:12px}

/* — Buttons — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fb);font-weight:600;border:none;cursor:pointer;transition:var(--tr);white-space:nowrap;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn-l{padding:14px 32px;font-size:1rem;border-radius:var(--rm)}
.btn-m{padding:10px 24px;font-size:.875rem;border-radius:var(--rs)}
.btn-s{padding:7px 16px;font-size:.75rem;border-radius:var(--rs)}
.btn-p{background:var(--gp);color:#fff;box-shadow:0 4px 15px color-mix(in srgb,var(--p) 30%,transparent)}
.btn-o{background:transparent;color:var(--p);border:2px solid var(--p)}
.btn-o:hover{background:var(--p);color:#fff}
.btn-w{background:#fff;color:var(--n900)}
.btn-d{background:var(--dk);color:#fff}
.btn-gh,.btn-l.btn-gh{background:transparent;color:var(--p)}
.btn-gh:hover{background:var(--p50)}

/* — Badge — */
.badge{display:inline-flex;padding:4px 14px;border-radius:var(--rf);font-size:.75rem;font-weight:600}
.bg-p{background:var(--pl);color:var(--p)}
.bg-a{background:var(--al);color:var(--dk)} /* [z1v D3] был --a на --al ≈3.0:1 <AA; тёмный текст на розовом тинте ≈14:1, подпись темы живёт фоном */
.bg-g{background:var(--gp);color:#fff}
.bg-d{background:var(--dk);color:#fff}

/* — Forms — */
.fi{width:100%;padding:12px 16px;border:1.5px solid var(--n200);border-radius:var(--rm);font-size:1rem;font-family:var(--fb);background:#fff;color:var(--n800);transition:var(--tr)}
.fi:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 10%,transparent)}
.fi::placeholder{color:var(--n500)} /* [z1v D3] плейсхолдер 2.6:1→4.6:1 */
.fg{margin-bottom:20px}
.fl{display:block;font-size:.875rem;font-weight:500;color:var(--n700);margin-bottom:6px}
.fi-dk{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.fi-dk:focus{border-color:var(--p)}
.fi-dk::placeholder{color:var(--n500)}
.fl-dk{color:var(--n300)}
.fi.err{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 12%,transparent)}
.fi.err::placeholder{color:color-mix(in srgb,var(--err) 50%,transparent)}
.fg-err{font-size:.75rem;color:var(--err);margin-top:6px;display:none;align-items:center;gap:4px}
.fg.has-error .fg-err{display:flex}
.fg-success{color:var(--ok);text-align:center;padding:24px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:var(--rl);display:none;font-weight:500}
.fg-success.show{display:block}

/* — Icon — */
.ico{width:48px;height:48px;margin-bottom:16px;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}

/* — Reveal on scroll — */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* — Responsive base — */
@media(max-width:768px){
  .ct{padding:0 16px}
  .sh{margin-bottom:32px}
  .btn-l{padding:12px 24px;font-size:.9375rem}
}
@media(max-width:375px){
  .ct{padding:0 14px}
  .btn-l{width:100%}
}

/* — Modal form (Bold Modern styling for renderFormForModal output) — */
.ub-modal-body .ub-form,.ub-form{display:flex;flex-direction:column;gap:16px}
.ub-form-field{display:flex;flex-direction:column;gap:6px;margin:0}
.ub-form-label{font-family:'Inter',sans-serif;font-size:.875rem;font-weight:600;color:var(--n800,#1E293B);line-height:1.4}
.ub-form-required{color:var(--a,#EC4899);font-weight:700;margin-left:2px}
.ub-form-control{width:100%;padding:12px 16px;border:1.5px solid var(--n200,#E2E8F0);border-radius:var(--rm,10px);font-size:1rem;font-family:'Inter',sans-serif;background:#fff;color:var(--n800,#1E293B);transition:transform var(--transition-duration,.2s) var(--transition-easing,ease),box-shadow var(--transition-duration,.2s) var(--transition-easing,ease),border-color var(--transition-duration,.2s) var(--transition-easing,ease),background-color var(--transition-duration,.2s) var(--transition-easing,ease),color var(--transition-duration,.2s) var(--transition-easing,ease),opacity var(--transition-duration,.2s) var(--transition-easing,ease);box-sizing:border-box;-webkit-appearance:none;appearance:none}
.ub-form-control:focus{outline:none;border-color:var(--p,#7C3AED);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 12%,transparent)}
.ub-form-control::placeholder{color:var(--n500)}
textarea.ub-form-control{min-height:110px;resize:vertical;line-height:1.6}
select.ub-form-control{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.ub-form-submit,.ub-btn-primary{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:14px 32px;margin-top:8px;font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;color:#fff;background:var(--gp);border:none;border-radius:var(--rm,10px);box-shadow:0 4px 15px color-mix(in srgb,var(--p) 30%,transparent);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.ub-form-submit:hover,.ub-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px color-mix(in srgb,var(--p) 40%,transparent)}
.ub-modal-container{font-family:'Inter',sans-serif}
.ub-modal-title,.ub-modal-header h3{font-family:var(--fh)}

/* — Catalog: hide native number spinners + Bold Modern qty/filter — */
.ub-filter-price-min,.ub-filter-price-max,.ub-product-qty,.ub-item-qty,.ub-qty-input,
.ub-catalog-filters input[type=number],.ub-product-card input[type=number],.ub-product-item input[type=number]{
  -moz-appearance:textfield;appearance:textfield}
.ub-filter-price-min::-webkit-inner-spin-button,.ub-filter-price-max::-webkit-inner-spin-button,
.ub-product-qty::-webkit-inner-spin-button,.ub-item-qty::-webkit-inner-spin-button,.ub-qty-input::-webkit-inner-spin-button,
.ub-catalog-filters input[type=number]::-webkit-inner-spin-button,
.ub-filter-price-min::-webkit-outer-spin-button,.ub-filter-price-max::-webkit-outer-spin-button,
.ub-product-qty::-webkit-outer-spin-button,.ub-item-qty::-webkit-outer-spin-button,.ub-qty-input::-webkit-outer-spin-button,
.ub-catalog-filters input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ub-qty{display:inline-flex;align-items:center;border:1.5px solid var(--n200,#E2E8F0);border-radius:8px;overflow:hidden}
.ub-qty-btn,.ub-qty-minus,.ub-qty-plus,.ub-item-minus,.ub-item-plus{width:36px;height:36px;border:none;background:var(--n50,#F8FAFC);cursor:pointer;font-size:16px;color:var(--n700,#334155);display:flex;align-items:center;justify-content:center;line-height:1;transition:background .15s}
.ub-qty-btn:hover,.ub-qty-minus:hover,.ub-qty-plus:hover,.ub-item-minus:hover,.ub-item-plus:hover{background:var(--pl);color:var(--p)}
.ub-qty-input,.ub-product-qty,.ub-item-qty{width:46px;height:36px;text-align:center;border:none;border-left:1px solid var(--n200);border-right:1px solid var(--n200);font-size:14px;font-family:inherit;outline:none}
.ub-qty-input:focus-visible,.ub-product-qty:focus-visible,.ub-item-qty:focus-visible{outline:2px solid color-mix(in srgb,var(--p) 40%,transparent);outline-offset:-2px} /* [z1v D1] сброс без замены закрыт (+попутно A3-хвост: E2E8F0→--n200 в эталоне) */
.ub-catalog-filters input[type=number]{border:1.5px solid var(--n200,#E2E8F0);border-radius:8px;padding:9px 12px;font-family:inherit}
.ub-catalog-filters input[type=number]:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 12%,transparent)}
.ub-apply-filters{background:var(--gp)!important;border:none!important}
.ub-apply-filters:hover{filter:brightness(1.05)}

/* — [Эпик Темы Шаг3a] Активация кастомных theme-классов шапки/футера/меню. Были в HTML (ub-text-theme×12/hover:ub-text-theme×27/ub-bg-theme×16/ub-menu-link×4), CSS-правил НЕ было -> hover меню мёртв, акценты серые. hover:ub-text-theme = Tailwind-вариант на кастом-классе (Tailwind CDN не генерит) -> оживляем правилом. Tailwind layout НЕ трогаем, только цвета -> var(--p) (тянут тему). — */
.ub-text-theme{color:var(--p)}
.hover\:ub-text-theme:hover{color:var(--p)}
.ub-bg-theme{background:var(--p)}
.ub-menu-link{transition:color .15s ease}
/* — [Эпик Темы Шаг3b] focus-ринг полей (header search/select) + group-hover акценты service-sections -> тема. --tw-ring-color override красит Tailwind focus:ring-2 в var(--p). — */
.ub-ring-theme,.focus\:ub-ring-theme{--tw-ring-color:var(--p)}
.group:hover .ub-group-text-theme{color:var(--p)}
/* — [Эпик Темы Шаг4] коммерция (каталог/корзина/чекаут — class-рендереры + cart.js). Tailwind CDN красит indigo=#4F46E5 (старый бренд) -> кастом-классы тянут var(--p). hover/border-варианты — продолжение Шаг3-хуков (Tailwind CDN не генерит экранированные кастом-классы). — */
.hover\:ub-bg-theme:hover{background:var(--ph)}
.ub-border-theme{border-color:var(--p)}
.hover\:ub-border-theme:hover{border-color:var(--p)}
/* — [Эпик Темы Шаг4] СТОК = СЕМАНТИКА (success/warn/error). Сводит 2 палитры «в наличии» (#22c55e bg + #16a34a text) в ОДИН var(--ok). НЕ зависит от theme_color: «в наличии» зелёный на любой теме. — */
.ub-text-ok{color:var(--ok)}.ub-bg-ok{background:var(--ok)}.ub-bg-ok-50{background:var(--ok50)}.ub-border-ok{border-color:var(--ok)}
.ub-text-wrn{color:var(--wrn)}.ub-bg-wrn{background:var(--wrn)}.ub-bg-wrn-50{background:var(--wrn50)}
.ub-text-err{color:var(--err)}.ub-bg-err{background:var(--err)}.ub-bg-err-50{background:var(--err50)}.ub-border-err{border-color:var(--err)}
.hover\:ub-text-err:hover{color:var(--err)}

/* [pdp] Кнопка «В корзину» на детальной: компакт по дизайн-коду §3 (была плита flex-1 на всю ширину); <sm — конвенционная полная ширина */
.ub-product-detail .ub-pdp-buy{min-width:220px;flex:0 0 auto} /* [d1 В3 0.3] скоуп деталкой: карточная кнопка живёт шириной карточки */
@media(max-width:640px){.ub-product-detail .ub-pdp-buy{width:100%;flex:1 1 100%}}