/* ============================================================
   SHANN Industrial Premium — UI Library
   Зависит только от tokens.css. Классы с префиксом .u- (unit).
   У каждого интерактивного компонента: default / hover / active /
   focus-visible / disabled / loading / success / error.
   ============================================================ */

/* ---------- база ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-ui);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
/* [hidden] должен побеждать любые display у компонентов (иначе скрытые алерты видны) */
[hidden]{display:none !important}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm);
}
::selection{background:var(--p-200);color:var(--n-900)}

.u-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.u-section{padding-block:var(--section-y)}
.u-section--alt{background:var(--bg-alt)}
.u-section--dark{background:var(--grad-dark);color:var(--text-on-dark)}
.u-section--dark .u-h2,.u-section--dark .u-h3{color:var(--text-on-dark)}
.u-section--dark .u-lead,.u-section--dark p{color:var(--text-on-dark-2)}

/* ---------- типографика ---------- */
.u-display{font-family:var(--font-brand);font-size:var(--t-display);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);font-weight:var(--fw-display);margin:0}
.u-hero{font-family:var(--font-brand);font-size:var(--t-hero);line-height:var(--lh-hero);
  letter-spacing:var(--ls-hero);font-weight:var(--fw-hero);margin:0}
.u-h1{font-family:var(--font-brand);font-size:var(--t-h1);line-height:var(--lh-h1);
  letter-spacing:var(--ls-h1);font-weight:var(--fw-h1);margin:0}
.u-h2{font-family:var(--font-brand);font-size:var(--t-h2);line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);font-weight:var(--fw-h2);margin:0}
.u-h3{font-family:var(--font-ui);font-size:var(--t-h3);line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);font-weight:var(--fw-h3);margin:0}
.u-h4{font-family:var(--font-ui);font-size:var(--t-h4);line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);font-weight:var(--fw-h4);margin:0}
.u-lead{font-size:var(--t-body-lg);line-height:var(--lh-body-lg);color:var(--text-2);margin:0}
.u-caption{font-size:var(--t-caption);line-height:var(--lh-caption);color:var(--text-3)}
.u-label{font-size:var(--t-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);
  font-weight:var(--fw-label);text-transform:uppercase;color:var(--text-2)}
.u-accent{color:var(--accent)}
.u-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.u-brand{font-family:var(--font-brand)}

/* ============================================================ BUTTONS */
.u-btn{
  --btn-bg:var(--action); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-ui);font-size:var(--t-button);font-weight:var(--fw-button);
  letter-spacing:var(--ls-button);line-height:var(--lh-button);
  padding:14px 26px;border-radius:var(--r-sm);cursor:pointer;position:relative;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  transition:background var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out);
  text-decoration:none;white-space:nowrap;
}
.u-btn:hover{--btn-bg:var(--action-hover);text-decoration:none;transform:translateY(-1px);box-shadow:var(--sh-accent)}
.u-btn:active{transform:translateY(0);box-shadow:none}
.u-btn[disabled],.u-btn.is-disabled{opacity:.45;pointer-events:none;box-shadow:none}
.u-btn--secondary{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--border-strong)}
.u-btn--secondary:hover{--btn-bg:var(--n-100);--btn-bd:var(--text);box-shadow:none}
.u-btn--ghost{--btn-bg:transparent;--btn-fg:var(--link);--btn-bd:transparent;padding-inline:var(--sp-3)}
.u-btn--ghost:hover{--btn-bg:var(--p-50);box-shadow:none}
.u-btn--on-dark{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
.u-btn--on-dark:hover{--btn-bg:#fff;--btn-fg:var(--action);--btn-bd:#fff;box-shadow:none}
.u-btn--danger{--btn-bg:var(--error)}
.u-btn--danger:hover{--btn-bg:var(--error-fg)}
.u-btn--lg{padding:17px 34px;font-size:16.5px}
.u-btn--sm{padding:9px 16px;font-size:13.5px}
.u-btn--block{width:100%}
.u-btn.is-loading{color:transparent;pointer-events:none}
.u-btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:u-spin .7s linear infinite;
}
.u-btn--secondary.is-loading::after{border-color:rgba(0,0,0,.2);border-top-color:var(--text)}
.u-btn.is-success{--btn-bg:var(--success)}
.u-btn.is-error{--btn-bg:var(--error)}
@keyframes u-spin{to{transform:rotate(360deg)}}

/* магнитная кнопка — смещение задаёт JS через переменные */
.u-btn--magnetic{will-change:transform}

/* ============================================================ FORMS */
.u-field{margin-bottom:var(--sp-4)}
.u-field__label{display:block;margin-bottom:var(--sp-2);font-size:var(--t-label);
  letter-spacing:var(--ls-label);font-weight:var(--fw-label);text-transform:uppercase;color:var(--text-2)}
.u-field__label .req{color:var(--error)}
.u-input,.u-select,.u-textarea{
  width:100%;font:inherit;font-size:15.5px;color:var(--text);
  padding:12px 14px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);transition:border-color var(--d-fast),box-shadow var(--d-fast);
}
.u-input::placeholder,.u-textarea::placeholder{color:var(--text-3)}
.u-input:hover,.u-select:hover,.u-textarea:hover{border-color:var(--n-400)}
.u-input:focus,.u-select:focus,.u-textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--focus-ring);
}
.u-input[disabled],.u-select[disabled],.u-textarea[disabled]{background:var(--n-100);color:var(--text-3);cursor:not-allowed}
.u-field.is-error .u-input,.u-field.is-error .u-select{border-color:var(--error);box-shadow:0 0 0 3px rgba(217,48,37,.16)}
.u-field.is-success .u-input{border-color:var(--success)}
.u-field__hint{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--text-3)}
.u-field.is-error .u-field__hint{color:var(--error-fg)}
.u-field.is-success .u-field__hint{color:var(--success-fg)}
.u-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23646e78' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.u-textarea{resize:vertical;min-height:76px}

/* checkbox / radio */
.u-check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--t-body-sm);line-height:1.5}
.u-check input{position:absolute;opacity:0;width:0;height:0}
.u-check__box{
  flex:none;width:19px;height:19px;margin-top:1px;border:1.5px solid var(--border-strong);
  border-radius:var(--r-xs);background:var(--surface);position:relative;
  transition:background var(--d-fast),border-color var(--d-fast);
}
.u-check--radio .u-check__box{border-radius:50%}
.u-check:hover .u-check__box{border-color:var(--accent)}
.u-check input:focus-visible+.u-check__box{box-shadow:var(--focus-ring)}
.u-check input:checked+.u-check__box{background:var(--action);border-color:var(--action)}
.u-check input:checked+.u-check__box::after{
  content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.u-check--radio input:checked+.u-check__box::after{
  left:5px;top:5px;width:7px;height:7px;border:0;border-radius:50%;background:#fff;transform:none;
}
.u-check input[disabled]+.u-check__box{opacity:.4}

/* ============================================================ BADGES / TAGS */
.u-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);
  font-size:12px;font-weight:600;line-height:1.4;background:var(--n-100);color:var(--text-2);
}
.u-badge--success{background:var(--success-bg);color:var(--success-fg)}
.u-badge--warning{background:var(--warning-bg);color:var(--warning-fg)}
.u-badge--error{background:var(--error-bg);color:var(--error-fg)}
.u-badge--info{background:var(--info-bg);color:var(--info-fg)}
.u-badge--solid{background:var(--action);color:#fff}
.u-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.u-tag{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-full);
  font-size:13px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  cursor:pointer;transition:border-color var(--d-fast),color var(--d-fast),background var(--d-fast);
}
.u-tag:hover{border-color:var(--accent);color:var(--text)}
.u-tag.is-active{background:var(--action);border-color:var(--action);color:#fff;font-weight:600}
.u-tag__count{font-size:11.5px;opacity:.65;font-weight:600}

/* ============================================================ CARDS */
.u-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color var(--d-base) var(--ease-out),
  box-shadow var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out);
}
.u-card--hover:hover{border-color:var(--border-strong);box-shadow:var(--sh-lg);transform:translateY(-3px)}
.u-card__body{padding:var(--sp-5)}

/* карточка техники */
.u-prod{display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative}
.u-prod:hover{text-decoration:none}
.u-prod__media{
  position:relative;aspect-ratio:4/3;display:grid;place-items:center;padding:var(--sp-4);
  background:linear-gradient(180deg,var(--n-50),var(--n-100));overflow:hidden;
}
.u-prod__media img{max-height:100%;width:auto;mix-blend-mode:multiply;
  transition:transform var(--d-slow) var(--ease-out)}
.u-prod--hover:hover .u-prod__media img{transform:scale(1.06)}
.u-prod__flag{position:absolute;top:var(--sp-3);left:var(--sp-3)}
.u-prod__cmp{position:absolute;top:var(--sp-3);right:var(--sp-3);opacity:0;transition:opacity var(--d-fast)}
.u-prod:hover .u-prod__cmp,.u-prod__cmp:focus-within,.u-prod__cmp.is-on{opacity:1}
.u-prod__body{padding:var(--sp-4) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;flex:1}
.u-prod__type{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.u-prod__name{font-family:var(--font-brand);font-size:17px;font-weight:600;letter-spacing:-.005em;margin:0 0 var(--sp-3);line-height:1.28}
.u-prod__specs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);
  border-top:1px solid var(--border);padding-top:var(--sp-3);margin-bottom:var(--sp-4)}
.u-prod__spec .k{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:2px}
.u-prod__spec .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.u-prod__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.u-prod__more{font-size:13.5px;font-weight:600;color:var(--link);display:inline-flex;align-items:center;gap:5px}
.u-prod--hover:hover .u-prod__more{gap:9px}
.u-prod__more svg{transition:transform var(--d-fast) var(--ease-out)}

/* ============================================================ TABS */
.u-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.u-tabs--line{gap:var(--sp-6);border-bottom:1px solid var(--border)}
.u-tabs--line .u-tag{border:0;border-radius:0;padding:12px 0;background:none;
  border-bottom:2px solid transparent;font-size:15px}
.u-tabs--line .u-tag.is-active{background:none;color:var(--text);border-bottom-color:var(--action)}

/* ============================================================ ACCORDION */
.u-acc{border-top:1px solid var(--border)}
.u-acc__item{border-bottom:1px solid var(--border)}
.u-acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5) 0;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;font-size:17px;font-weight:600;color:var(--text);
}
.u-acc__btn:hover{color:var(--link)}
.u-acc__btn::after{
  content:"";flex:none;width:11px;height:11px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);
  transition:transform var(--d-base) var(--ease-out);
}
.u-acc__item[open] .u-acc__btn::after{transform:rotate(225deg) translateY(-3px)}
.u-acc__panel{padding:0 0 var(--sp-5);color:var(--text-2);max-width:70ch}

/* ============================================================ BREADCRUMBS */
.u-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--text-3);padding:0;margin:0;list-style:none}
.u-crumbs li{display:flex;align-items:center;gap:8px}
.u-crumbs li+li::before{content:"/";color:var(--border-strong)}
.u-crumbs a{color:inherit}
.u-crumbs a:hover{color:var(--text)}
.u-crumbs--on-dark{color:rgba(255,255,255,.72)}
.u-crumbs--on-dark a:hover{color:#fff}

/* ============================================================ ALERTS / TOAST */
.u-alert{
  display:flex;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  background:var(--info-bg);color:var(--info-fg);border-left:3px solid var(--info);font-size:14.5px;
}
.u-alert--success{background:var(--success-bg);color:var(--success-fg);border-left-color:var(--success)}
.u-alert--warning{background:var(--warning-bg);color:var(--warning-fg);border-left-color:var(--warning)}
.u-alert--error{background:var(--error-bg);color:var(--error-fg);border-left-color:var(--error)}
.u-toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:var(--z-toast);
  background:var(--s-800);color:#fff;padding:14px 22px;border-radius:var(--r-md);
  box-shadow:var(--sh-xl);font-size:14.5px;opacity:0;pointer-events:none;
  transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out);
}
.u-toast.is-visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}

/* ============================================================ TOOLTIP */
.u-tip{position:relative;display:inline-flex}
.u-tip__body{
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--s-800);color:#fff;font-size:12.5px;line-height:1.4;padding:7px 11px;
  border-radius:var(--r-sm);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity var(--d-fast),transform var(--d-fast);z-index:var(--z-dropdown);
}
.u-tip:hover .u-tip__body,.u-tip:focus-within .u-tip__body{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================ MODAL */
.u-modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--gutter);
  background:rgba(11,18,24,.62);opacity:0;pointer-events:none;transition:opacity var(--d-base)}
.u-modal.is-open{opacity:1;pointer-events:auto}
.u-modal__box{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-xl);
  max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:var(--sp-8);
  transform:translateY(14px) scale(.985);transition:transform var(--d-base) var(--ease-out);
}
.u-modal.is-open .u-modal__box{transform:none}
.u-modal__close{position:absolute;top:14px;right:14px;background:none;border:0;cursor:pointer;
  width:36px;height:36px;border-radius:50%;color:var(--text-2);font-size:22px;line-height:1}
.u-modal__close:hover{background:var(--n-100);color:var(--text)}

/* ============================================================ LOADER / SKELETON */
.u-loader{width:34px;height:34px;border-radius:50%;border:3px solid var(--n-200);
  border-top-color:var(--action);animation:u-spin .8s linear infinite}
.u-skel{background:linear-gradient(90deg,var(--n-100) 25%,var(--n-200) 37%,var(--n-100) 63%);
  background-size:400% 100%;animation:u-shimmer 1.3s ease infinite;border-radius:var(--r-sm)}
@keyframes u-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.u-skel--text{height:12px;margin-bottom:8px}
.u-skel--title{height:20px;width:60%;margin-bottom:14px}
.u-skel--media{aspect-ratio:4/3;border-radius:var(--r-lg)}

/* ============================================================ EMPTY STATE */
.u-empty{text-align:center;padding:var(--sp-16) var(--sp-6);color:var(--text-3)}
.u-empty__icon{width:52px;height:52px;margin:0 auto var(--sp-4);opacity:.35}
.u-empty h3{font-size:19px;color:var(--text);margin:0 0 8px;font-weight:600}
.u-empty p{margin:0 0 var(--sp-5);font-size:14.5px}

/* ============================================================ PAGINATION */
.u-pg{display:flex;gap:6px;align-items:center;justify-content:center}
.u-pg a,.u-pg span{
  min-width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--border);color:var(--text-2);font-size:14.5px;text-decoration:none;
}
.u-pg a:hover{border-color:var(--accent);color:var(--text)}
.u-pg .is-current{background:var(--action);border-color:var(--action);color:#fff;font-weight:600}

/* ============================================================ DROPDOWN / MEGA MENU */
.u-dd{position:relative}
.u-dd__panel{
  position:absolute;top:calc(100% + 10px);left:0;min-width:230px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-lg);
  padding:var(--sp-2);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--d-fast),transform var(--d-fast),visibility var(--d-fast);z-index:var(--z-dropdown);
}
.u-dd:hover .u-dd__panel,.u-dd:focus-within .u-dd__panel{opacity:1;visibility:visible;transform:none}
.u-dd__panel a{display:block;padding:9px 12px;border-radius:var(--r-sm);color:var(--text-2);font-size:14.5px}
.u-dd__panel a:hover{background:var(--n-100);color:var(--text);text-decoration:none}

.u-mega{
  position:absolute;top:100%;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);
  box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--d-base),transform var(--d-base),visibility var(--d-base);z-index:var(--z-dropdown);
}
.u-mega.is-open{opacity:1;visibility:visible;transform:none}
.u-mega__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);padding:var(--sp-6) 0 var(--sp-8)}
.u-mega__item{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3);border-radius:var(--r-md);
  color:var(--text);transition:background var(--d-fast)}
.u-mega__item:hover{background:var(--n-100);text-decoration:none}
.u-mega__item img{width:74px;height:56px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.u-mega__item b{display:block;font-size:14.5px;font-weight:600}
.u-mega__item span{font-size:12.5px;color:var(--text-3)}

/* ============================================================ GALLERY */
.u-gal__main{position:relative;display:grid;place-items:center;min-height:320px;overflow:hidden;cursor:zoom-in}
.u-gal__main img{max-height:400px;width:auto;filter:var(--sh-machine);
  transition:transform var(--d-slow) var(--ease-out)}
.u-gal__main.is-zoom img{transform:scale(1.7);cursor:zoom-out}
.u-gal__thumbs{display:flex;gap:8px;justify-content:center;margin-top:var(--sp-4);flex-wrap:wrap}
.u-gal__thumb{
  width:78px;aspect-ratio:4/3;display:grid;place-items:center;padding:5px;cursor:pointer;
  background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:var(--r-sm);
  transition:border-color var(--d-fast),background var(--d-fast);
}
.u-gal__thumb:hover{border-color:var(--accent)}
.u-gal__thumb.is-active{border-color:var(--action);background:#fff}
.u-gal__thumb img{max-height:100%;width:auto;mix-blend-mode:multiply}

/* ============================================================ SPEC LIST (приём SHANN: значение + синяя черта) */
.u-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-5) var(--sp-6)}
.u-spec{border-bottom:2px solid var(--accent);padding-bottom:9px}
.u-spec__k{font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:3px}
.u-spec__v{font-size:15px;font-variant-numeric:tabular-nums;color:var(--text)}

/* ============================================================ TABLE */
.u-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.u-table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
.u-table th,.u-table td{padding:13px 18px;border-bottom:1px solid var(--border);text-align:left}
.u-table thead th{background:var(--s-800);color:#fff;font-weight:600;font-size:13px;position:sticky;top:0}
.u-table td:not(:first-child),.u-table th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.u-table tbody tr:nth-child(even){background:var(--surface-2)}
.u-table tbody tr:hover{background:var(--p-50)}
.u-table tbody tr:last-child td{border-bottom:0}

/* ============================================================ HEADER */
.u-header{position:sticky;top:0;z-index:var(--z-header);background:var(--surface);
  border-bottom:1px solid var(--border);transition:box-shadow var(--d-base)}
.u-header.is-stuck{box-shadow:var(--sh-sm)}
.u-header--over{position:absolute;left:0;right:0;background:none;border-bottom:0}
.u-header__in{display:flex;align-items:center;gap:var(--sp-6);height:72px}
.u-logo{display:flex;align-items:center;gap:11px;flex:none}
.u-logo img{height:16px;width:auto}
.u-logo b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-2)}
.u-header--over .u-logo b{color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(8,16,24,.7)}
.u-nav{display:flex;gap:var(--sp-6);margin-inline:auto;font-size:14.5px}
.u-nav a,.u-nav button{color:var(--text-2);background:none;border:0;font:inherit;cursor:pointer;padding:0}
.u-nav a:hover,.u-nav button:hover{color:var(--text);text-decoration:none}
.u-header--over .u-nav a,.u-header--over .u-nav button{color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(8,16,24,.7)}
.u-header--over .u-nav a:hover{color:#fff}
.u-header__tel{font-weight:600;font-size:15px;color:var(--text);white-space:nowrap}
.u-header--over .u-header__tel{color:#fff;text-shadow:0 1px 10px rgba(8,16,24,.75)}
.u-burger{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;flex-direction:column;
  gap:5px;align-items:center;justify-content:center}
.u-burger span{width:22px;height:2px;background:var(--text);transition:transform var(--d-base),opacity var(--d-base)}
.u-header--over .u-burger span{background:#fff}
.u-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.u-burger.is-open span:nth-child(2){opacity:0}
.u-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* мобильное меню */
.u-mobmenu{
  position:fixed;inset:0;top:0;background:var(--s-900);color:#fff;z-index:var(--z-overlay);
  padding:88px var(--gutter) var(--sp-8);overflow-y:auto;
  transform:translateX(100%);transition:transform var(--d-base) var(--ease-out);
}
.u-mobmenu.is-open{transform:none}
.u-mobmenu a{display:block;padding:15px 0;font-size:19px;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.u-mobmenu a:hover{text-decoration:none;color:var(--p-300)}

/* липкая панель действий на мобильном */
.u-stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);display:none;gap:8px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(12,32,48,.09);
}
.u-stickybar .u-btn{flex:1}

/* ============================================================ FOOTER */
.u-footer{background:var(--s-900);color:#8d979f;padding-block:var(--sp-16) var(--sp-12);font-size:14px}
.u-footer a{color:#c3cbd2}
.u-footer__contact{display:inline-flex;align-items:center;min-height:44px;padding:2px 0}
.u-footer a:hover{color:#fff}
.u-footer b{display:block;color:#fff;font-weight:600;font-size:15px;margin-bottom:12px}
.u-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-8)}
.u-footer__req{font-size:12.5px;line-height:1.75;color:#79838b}
.u-footer__bottom{margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:1px solid #262c32;
  font-size:12px;line-height:1.65;color:#7b858d}

/* ============================================================ CTA BAND */
.u-cta{background:var(--grad-accent);color:#fff;padding-block:var(--sp-16);text-align:center}
.u-cta h2{color:#fff;margin-bottom:12px}
.u-cta p{color:rgba(255,255,255,.92);margin:0 0 var(--sp-6);font-size:16px}

/* ============================================================ АНИМАЦИИ ПОЯВЛЕНИЯ */
/* Прогрессивное улучшение: без JS (класс .js на <html> не выставлен) контент виден сразу.
   Иначе при ошибке скрипта или у поисковика полстраницы окажется невидимой. */
.js .u-reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
.js .u-reveal.is-in{opacity:1;transform:none}
.u-reveal--d1{transition-delay:70ms} .u-reveal--d2{transition-delay:140ms}
.u-reveal--d3{transition-delay:210ms} .u-reveal--d4{transition-delay:280ms}
@media (prefers-reduced-motion: reduce){
  .u-reveal{opacity:1;transform:none;transition:none}
  .u-btn:hover,.u-card--hover:hover{transform:none}
}

/* ============================================================ УТИЛИТЫ */
.u-grid{display:grid;gap:var(--sp-4)}
.u-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.u-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.u-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.u-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.u-center{text-align:center}
.u-mt-2{margin-top:var(--sp-2)} .u-mt-4{margin-top:var(--sp-4)}
.u-mt-6{margin-top:var(--sp-6)} .u-mt-8{margin-top:var(--sp-8)}
.u-mb-4{margin-bottom:var(--sp-4)} .u-mb-6{margin-bottom:var(--sp-6)}
.u-mb-8{margin-bottom:var(--sp-8)} .u-mb-12{margin-bottom:var(--sp-12)}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-skip{position:absolute;left:-9999px;top:0;z-index:var(--z-toast);background:var(--action);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0}
.u-skip:focus{left:0}

/* ============================================================ АДАПТИВ (mobile-first правки) */
@media (max-width:1024px){
  .u-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u-mega__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .u-nav{display:none}
  .u-burger{display:flex}
  .u-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u-header__in{height:62px}
  .u-stickybar{display:flex}
  body{padding-bottom:70px}
}
@media (max-width:600px){
  /* телефон уходит из шапки: он всегда доступен в липкой панели снизу */
  .u-header__tel{display:none}
  .u-logo b{display:none}
  .u-grid--2,.u-grid--3,.u-grid--4{grid-template-columns:1fr}
  .u-footer__cols{grid-template-columns:1fr;gap:var(--sp-6)}
  .u-prod__specs{grid-template-columns:repeat(3,1fr);gap:4px}
  .u-prod__spec .v{font-size:13px}
  .u-modal__box{padding:var(--sp-6)}
  .u-header__tel{font-size:13.5px}
}