/* Start:/local/templates/gianit/assets/css/nouislider.min.css?17858303474220*/
.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}
/* End */


/* Start:/local/templates/gianit/assets/css/modal.css?17827237353529*/
.blocker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 10;
	padding: 20px;
	box-sizing: border-box;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.75);
	text-align: center
}

.blocker:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.05em
}

.blocker.behind {
	background-color: transparent
}

.modal {
	display: none;
	vertical-align: middle;
	position: relative;
	z-index: 2;
	max-width: 500px;
	box-sizing: border-box;
	width: 90%;
	background: #fff;
	padding: 15px 30px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	text-align: left
}

.modal a.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')
}

.modal-spinner {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 12px 16px;
	border-radius: 5px;
	background-color: #111;
	height: 20px
}

.modal-spinner>div {
	border-radius: 100px;
	background-color: #fff;
	height: 20px;
	width: 2px;
	margin: 0 1px;
	display: inline-block;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out
}

.modal-spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s
}

.modal-spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s
}

.modal-spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s
}

@-webkit-keyframes sk-stretchdelay {

	0%,
	40%,
	100% {
		-webkit-transform: scaleY(0.5)
	}

	20% {
		-webkit-transform: scaleY(1.0)
	}
}

@keyframes sk-stretchdelay {

	0%,
	40%,
	100% {
		transform: scaleY(0.5);
		-webkit-transform: scaleY(0.5)
	}

	20% {
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0)
	}
}
/* End */


/* Start:/local/templates/gianit/assets/css/colors_and_type.css?17809933269759*/
/* =============================================================
   M.I.A.R. — Design Tokens
   Foundation variables for color, typography, spacing, radii,
   shadows. Use these everywhere; never inline raw hex codes.
   ============================================================= */

/* --- Font face --- */
/* The Figma file ships with Roboto / Inter / Vela Sans (Google),
   plus Montserrat used 1×. All four are free Google Fonts; the
   stack below loads them with the weights actually in use. */

@font-face {
  font-family: "Roboto";
  src: url("/local/templates/gianit/assets/fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
}

:root {
  /* ============================================================
     COLOR — primitive scale
     Slate neutrals + brand blue + accents (red / link / sky)
     Pulled verbatim from the Figma metadata frequency report.
     ============================================================ */

  /* Brand */
  --color-brand-600: rgb(25, 60, 184);
  /* primary blue, headlines, buttons */
  --color-brand-500: rgb(36, 74, 154);
  /* hover / mid */
  --color-brand-link: rgb(21, 93, 252);
  /* link blue (footer) */
  --color-brand-sky: rgb(1, 158, 255);
  /* used in gradient with brand-600 */
  --color-brand-sky-2: rgb(0, 188, 255);
  --color-brand-info: rgb(22, 143, 233);

  /* Accents */
  --color-accent-red: rgb(255, 32, 86);
  /* sale / warning / "extreme" */
  --color-accent-rose: rgb(201, 0, 84);
  /* darker sale variant */
  --color-accent-violet: rgb(138, 56, 245);
  --color-accent-green: rgb(0, 212, 146);
  --color-accent-amber: rgb(255, 185, 0);

  /* Neutrals (slate) */
  --color-ink-900: rgb(15, 23, 43);
  /* footer bg */
  --color-ink-800: rgb(29, 41, 61);
  /* primary text */
  --color-ink-700: rgb(30, 41, 57);
  --color-ink-600: rgb(54, 65, 83);
  --color-ink-500: rgb(56, 62, 64);
  --color-ink-400: rgb(74, 85, 101);

  --color-muted-600: rgb(98, 116, 142);
  /* secondary text */
  --color-muted-500: rgb(144, 161, 185);
  /* tertiary text / label */
  --color-muted-400: rgb(153, 159, 174);

  --color-line-300: rgb(202, 213, 226);
  /* dividers, dashed borders */
  --color-line-200: rgb(226, 232, 240);
  /* input bg, light surfaces, image placeholder */
  --color-line-100: rgb(229, 231, 235);

  --color-surface-50: rgb(248, 250, 252);
  /* page bg */
  --color-surface-100: rgb(241, 245, 249);
  /* card bg / section bg */
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);

  /* ============================================================
     SEMANTIC COLOR (use these by default — not the primitives)
     ============================================================ */

  --bg-page: var(--color-surface-50);
  --bg-section: var(--color-surface-100);
  --bg-card: var(--color-white);
  --bg-input: var(--color-line-200);
  --bg-image: var(--color-line-200);
  --bg-footer: var(--color-ink-900);

  --fg-default: var(--color-ink-800);
  --fg-muted: var(--color-muted-600);
  --fg-subtle: var(--color-muted-500);
  --fg-inverse: var(--color-white);
  --fg-on-dark-muted: var(--color-muted-600);

  --fg-brand: var(--color-brand-600);
  --fg-link: var(--color-brand-link);
  --fg-sale: var(--color-accent-red);

  --border-divider: var(--color-line-300);
  --border-subtle: var(--color-line-200);

  --btn-primary-bg: var(--color-brand-600);
  --btn-primary-fg: var(--color-white);
  --btn-outline-fg: var(--color-ink-800);
  --btn-outline-bd: var(--color-black);

  --tag-sale-bg: var(--color-accent-red);
  --tag-recommend-bg: var(--color-brand-600);

  --gradient-2rz: linear-gradient(180deg, var(--color-brand-sky) 0%, var(--color-brand-600) 100%);
  --gradient-hero-overlay: linear-gradient(0deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.6) 100%);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Inter", "Roboto", sans-serif;
  /* used for "%" mark */
  --font-fine: "Vela Sans", "Roboto", sans-serif;
  /* form fine-print */

  /* Type primitives — every size paired with its Figma usage */
  --fs-display-xl: 9.6rem;
  /* section H2s — "Мы предлагаем", "Распродажа", … */
  --fs-display-lg: 6.4rem;
  /* hero H1 + big CTA copy */
  --fs-display-md: 4.8rem;
  /* KPI numerals (126 500 ₽) */
  --fs-display-sm: 4rem;
  /* gauge value */
  --fs-h-32: 3.2rem;
  /* RPM value */
  --fs-h-28: 2.8rem;
  /* product price */
  --fs-h-24: 2.4rem;
  /* body lead / product price small */
  --fs-h-18: 1.8rem;
  /* card title / section label */
  --fs-text-16: 1.6rem;
  /* nav, contact, default body */
  --fs-text-14: 1.4rem;
  /* labels, tags, footer copy */
  --fs-text-12: 1.2rem;
  /* footer schedule, microcopy */
  --fs-text-10: 1rem;
  --fs-text-8: .8rem;
  /* gauge tick labels */

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line-heights & tracking */
  --lh-tight: 0.8;
  /* display — most headings use this */
  --lh-snug: 1.0;
  /* nav / inline */
  --lh-body: 1.2;
  /* form labels, microcopy */
  --lh-loose: 1.4;
  /* card body */
  --lh-content: 1.5;
  /* "About M.I.A.R." paragraph */

  --ls-tight: -0.05em;
  /* almost every display string is tracked tight */
  --ls-normal: 0;

  /* ============================================================
     SPACING — 4px base, with some 16/24/32/48/80 set-pieces.
     Layout grid uses 80px outer padding and 24px column gap.
     ============================================================ */

  --space-1: .4rem;
  --space-2: .8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2rem;
  --space-6: 2.4rem;
  --space-7: 3.2rem;
  --space-8: 4rem;
  --space-9: 4.8rem;
  --space-10: 6.4rem;
  --space-11: 8rem;
  --space-12: 12rem;
  /* between top-level sections */

  --layout-gutter: 8rem;
  /* outer page padding desktop */
  --layout-col-gap: 2.4rem;
  /* card row gap */

  /* ============================================================
     RADIUS
     ============================================================ */

  --radius-xs: .4rem;
  --radius-sm: .8rem;
  --radius-md: 1.2rem;
  /* buttons / inputs / pills */
  --radius-lg: 1.6rem;
  /* product cards image + card body */
  --radius-xl: 2.4rem;
  /* big hero & section containers */
  --radius-full: 99rem;

  /* ============================================================
     ELEVATION — the Figma file is essentially flat.
     The only depth tricks are 60px backdrop blur over translucent
     surfaces (the calculator). Two soft shadows are defined for
     in-product hover only.
     ============================================================ */

  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(15, 23, 43, 0.04),
    0 4px 16px rgba(15, 23, 43, 0.06);
  --shadow-card-hover: 0 4px 8px rgba(15, 23, 43, 0.06),
    0 12px 32px rgba(25, 60, 184, 0.12);
  --blur-glass: blur(60px);

  /* ============================================================
     MOTION
     ============================================================ */

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* =============================================================
   SEMANTIC ELEMENT DEFAULTS
   Use these as the "type system" — they map element ↔ token.
   Components in ui_kits/ should rely on these rather than
   redefining sizes locally.
   ============================================================= */

html,
body {
  font-family: var(--font-sans);
  font-size: var(--fs-text-16);
  line-height: var(--lh-content);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
.h1,
.display-xl {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-brand);
  margin: 0;
}

h2,
.h2,
.display-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-default);
  margin: 0;
}

h3,
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h-32);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

h4,
.h4,
.card-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h-18);
  line-height: var(--lh-snug);
  color: var(--fg-default);
  margin: 0;
}

p,
.body {
  font-family: var(--font-sans);
  font-size: var(--fs-h-24);
  line-height: var(--lh-content);
  letter-spacing: var(--ls-tight);
  color: var(--fg-default);
  margin: 0;
}

.label,
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-text-18, 1.8rem);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
}

.label-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-text-14);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  color: var(--fg-subtle);
}

.text-muted {
  color: var(--fg-muted);
}

.text-subtle {
  color: var(--fg-subtle);
}

.text-brand {
  color: var(--fg-brand);
}

.text-sale {
  color: var(--fg-sale);
}

.text-strike {
  text-decoration: line-through;
}

/* Numeric "%" mark in the gauge — only place Inter is used */
.unit-percent {
  font-family: var(--font-accent);
  font-weight: var(--fw-bold);
  color: var(--color-line-300);
}
/* End */


/* Start:/local/templates/gianit/assets/css/styles.css?178853051548551*/
/* =============================================================
   M.I.A.R. — site styles (ui kit)
   Builds on colors_and_type.css (variables + element defaults).
   Pure CSS — no preprocessor.
   ============================================================= */

* {
	box-sizing: border-box;
}

html {
	font-size: 0.521vw;
}

html,
body {
	height: 100%;
	margin: 0;
}

body {
	margin: 0;
}

body.no-scroll {
	overflow: hidden;
	touch-action: none;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

/* ---------- LAYOUT ---------- */

.content {
	flex: 1;
}

.page {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg-page);
}

.section {
	padding: 0 var(--layout-gutter);
	margin-bottom: var(--space-10);
}

.section-title {
	font-size: var(--fs-display-xl);
	font-weight: var(--fw-bold);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: var(--fg-brand);
	margin: 0 0 var(--space-10);
	white-space: pre-line;
}

.section-subtitle {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--fg-brand);
	margin: 0 0 var(--space-7);
	white-space: pre-line;
}

.section-title--center {
	text-align: center;
}

.vopros-subtitle {
	font-size: 2.4rem;
	line-height: 150%;
	letter-spacing: -5%;
}

/* ---------- HEADER ---------- */

.header {
	position: relative;
	width: 100%;
	padding: var(--space-6) var(--layout-gutter) 0;
	/* background: var(--bg-page); */
	z-index: 9;
}

.header__top {
	display: flex;
	gap: var(--space-7);
	justify-content: end;
	align-items: center;
	font-weight: 500;
	height: 4rem;
}

.header__search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 0 1 76.3rem;
	max-width: 76.3rem;
}

.search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	max-width: 57rem;
	height: 4rem;
	padding: var(--space-3) 1.5rem;
	background: var(--bg-input);
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	transition: border-color var(--dur-2) var(--ease-out);
}

.search:focus-within {
	border-color: var(--color-brand-600);
	background: #fff;
}

.search__input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font: var(--fw-regular) var(--fs-text-14)/var(--lh-body) var(--font-sans);
	letter-spacing: var(--ls-tight);
	color: var(--fg-default);
}

.search__input::placeholder {
	color: var(--fg-muted);
}

.search__icon {
	width: 2rem;
	height: 2rem;
	stroke: var(--fg-muted);
	fill: none;
}

.header__contacts {
	display: flex;
	align-items: center;
	gap: 4.2rem;
	font-size: var(--fs-text-14);
	letter-spacing: var(--ls-tight);
	color: var(--fg-muted);
}

.header__contact {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.header__contact .icon {
	width: 1.6rem;
	height: 1.6rem;
}

.header__bar {
	display: flex;
	align-items: center;
	height: 8rem;
	margin-top: var(--space-1);
	gap: var(--space-9);
}

.header__logo {
	height: 8rem;
	width: 20.6rem;
	background: url("/local/templates/gianit/assets/img/miar-logo.png") left center / contain no-repeat;
}

.header__nav {
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: var(--space-9);
}

.nav-link {
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-16);
	letter-spacing: var(--ls-tight);
	color: var(--fg-default);
	cursor: pointer;
	transition: color var(--dur-1) var(--ease-out);
}

.nav-link:hover {
	color: var(--fg-brand);
}

.nav-item--parent {
	position: relative;
}

.nav-dropdown {
	position: absolute;
	top: 65%;
	left: -10%;
	min-width: 24rem;
	margin-top: 1.2rem;
	padding: 1.2rem;
	background: var(--bg-card);
	border-radius: 1.2rem;
	box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.8rem);
	transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), visibility var(--dur-1);
	z-index: 50;
}

.nav-item--parent:hover .nav-dropdown,
.nav-item--parent:focus-within .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-dropdown__list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-dropdown__link {
	display: block;
	padding: 0.8rem 1.2rem;
	border-radius: 0.8rem;
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-16);
	letter-spacing: var(--ls-tight);
	color: var(--fg-default);
	transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.nav-dropdown__link:hover {
	color: var(--fg-brand);
	background: var(--bg-input);
}

.nav-dropdown__item.active .nav-dropdown__link {
	color: var(--fg-brand);
}

.header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-9);
}

.socials {
	display: flex;
	align-items: center;
	gap: var(--space-7);
}

.social {
	width: 2.4rem;
	height: 2.4rem;
	color: var(--fg-muted);
	transition: color var(--dur-1) var(--ease-out);
	cursor: pointer;
}

.social:hover {
	color: var(--color-brand-600);
}

.cart {
	width: 3.2rem;
	height: 3.2rem;
	color: var(--fg-muted);
	position: relative;
	cursor: pointer;
}

.cart__badge {
	position: absolute;
	top: -.4rem;
	right: -.6rem;
	min-width: 1.8rem;
	height: 1.8rem;
	padding: 0 .5rem;
	border-radius: var(--radius-full);
	background: var(--color-accent-red);
	color: var(--color-white);
	font-size: 1rem;
	font-weight: var(--fw-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}

.header_fixed,
.header_mobile {
	display: none;
}

@media(min-width: 1024px) {
	.header_fixed {
		display: flex;
		align-items: center;
		gap: var(--space-7);
		padding: var(--space-4);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-2rem);
		transition:
			opacity 0.3s ease,
			transform 0.3s ease,
			visibility 0.3s ease;
		z-index: 1000;
		background: var(--bg-image);
		border-bottom-left-radius: var(--space-4);
		border-bottom-left-radius: var(--space-4);
	}

	/* Появление */
	.header.fixed .header_fixed {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.header_fixed .header__logo {
		max-width: 12rem;
		height: 4rem;
	}

	.header_fixed .header__search {
		flex: 0 1 40rem;
	}

	.header_fixed .search {
		max-width: 42.4rem;
		background: var(--color-white);
	}

}

/* ---------- BUTTONS ---------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 5.1rem;
	padding: var(--space-4) var(--space-7);
	border-radius: var(--radius-md);
	font: var(--fw-bold) var(--fs-text-16)/1 var(--font-sans);
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color var(--dur-2) var(--ease-out),
		transform var(--dur-1) var(--ease-out),
		color var(--dur-2) var(--ease-out),
		border-color var(--dur-2) var(--ease-out);
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-fg);
}

.btn--primary:hover {
	background: var(--color-brand-500);
}

.btn--outline {
	background: transparent;
	border: 1px solid var(--color-black);
	color: var(--fg-default);
}

.btn--outline:hover {
	border-color: var(--color-brand-600);
	color: var(--color-brand-600);
}

.btn--ghost {
	background: var(--bg-input);
	color: var(--fg-default);
}

.btn--ghost:hover {
	background: var(--color-line-300);
}

.btn--sm {
	height: 4rem;
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-text-14);
	font-weight: var(--fw-medium);
}

.btn--full {
	flex: 1;
}

.btn__icon-left {
	width: 1.6rem;
	height: 1.6rem;
}

.btn__icon-right {
	width: 1.6rem;
	height: 1.6rem;
	margin-left: var(--space-2);
}

/* "Каталог" header button has its menu icon */
.btn--catalog {
	background: var(--color-brand-600);
	color: var(--color-white);
	border-radius: var(--radius-md);
	height: 4rem;
	padding: 0 var(--space-4);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
}

.btn--catalog:hover {
	background: var(--color-brand-500);
}

/* Pill / filter chip */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 4rem;
	padding: 0 var(--space-4);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-brand-600);
	background: transparent;
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
	color: var(--color-brand-600);
	cursor: pointer;
	transition: all var(--dur-2) var(--ease-out);
}

.chip:hover {
	background: var(--color-brand-600);
	border-color: var(--color-brand-600);
	color: var(--color-white);
}

.chip--active {
	background: var(--color-brand-600);
	border-color: var(--color-brand-600);
	color: var(--color-white);
}

.chip--lg {
	height: 5.1rem;
	padding: 0 var(--space-6);
	font-size: var(--fs-text-16);
	font-weight: var(--fw-bold);
}

/* ---------- HERO ---------- */

.hero {
	position: relative;
	top: -15rem;
	height: 90rem;
	margin: var(--space-6) 0 -3rem;
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	overflow: hidden;
	background: var(--bg-image) url("/local/templates/gianit/assets/img/hero-bearing.jpg") center / cover no-repeat;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(248, 250, 252, 0.85) 0%, rgba(248, 250, 252, 0.2) 60%, rgba(248, 250, 252, 0) 100%);
}

.hero__content {
	position: absolute;
	left: var(--layout-gutter);
	top: 35.8rem;
	width: 113.5rem;
	z-index: 1;
}

.hero__title {
	font-size: var(--fs-display-lg);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight);
	line-height: 1;
	color: var(--fg-default);
	margin: 0 0 var(--space-8);
	white-space: pre-line;
}

.hero__partners {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-bottom: var(--space-8);
	height: 6.4rem;
}

.hero__partners img {
	height: 6.4rem;
	width: auto;
}

.hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	width: 101.7rem;
}

.hero__chips.mob {
	display: none;
}

/* ---------- PRODUCT FILTERS ---------- */

.filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-7);
}

/* ---------- PRODUCT CARD ---------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--layout-col-gap);
}

.product-grid.four-colums {
	grid-template-columns: repeat(4, 1fr);
}

.product-grid-item>div[data-entity="item"] {
	height: 100%;
}

.product {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.product__media {
	position: relative;
	aspect-ratio: 310/273;
	border-radius: var(--radius-lg);
	overflow: hidden;
	/* background: var(--bg-image) url("/local/templates/gianit/assets/img/bearing-card.png") center / cover no-repeat; */
}

.product__tags {
	position: absolute;
	inset: var(--space-2) var(--space-2) auto var(--space-2);
	display: flex;
	justify-content: flex-end;
	gap: var(--space-1);
}

.product__tags--left {
	justify-content: flex-start;
}

.tag {
	display: inline-flex;
	align-items: center;
	height: 2.6rem;
	padding: 0 var(--space-3);
	border-radius: var(--radius-md);
	font-weight: var(--fw-bold);
	font-size: var(--fs-text-14);
	letter-spacing: var(--ls-tight);
	color: var(--color-white);
	white-space: nowrap;
}

.tag--sale {
	background: var(--color-accent-red);
}

.tag--rose {
	background: var(--color-accent-rose);
}

.tag--brand {
	background: var(--color-brand-600);
}

.tag--violet {
	background: var(--color-accent-violet);
}

.tag--sky {
	background: var(--color-brand-sky);
}

.tag--green {
	background: var(--color-accent-green);
	color: var(--color-ink-800);
}

.tag--amber {
	background: var(--color-accent-amber);
	color: var(--color-ink-800);
}

.tag--soft {
	background: transparent;
	border: 1px solid var(--color-line-300);
	color: var(--fg-muted);
}

.product__dots {
	position: absolute;
	left: 50%;
	bottom: 1.2rem;
	transform: translateX(-50%);
	display: flex;
	gap: .5rem;
}

.product__dots span {
	width: 5.2rem;
	height: 3px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.55);
}

.product__dots span.is-active {
	background: var(--color-white);
}

.product__code {
	font-weight: var(--fw-medium);
	font-size: var(--fs-h-18);
	color: var(--color-muted-600);
	line-height: 1;
}

.product--featured .product__code {
	color: var(--fg-default);
}

.product__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
}

.product__meta-char {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.product__char {
	padding: .6rem .8rem;
	border-radius: .4rem;
	background-color: hsla(214, 32%, 91%, 1);
	font-size: 1.2rem;
	font-weight: 500;
	color: hsla(217, 36%, 18%, 1);
}

.product__brand {
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
	color: var(--fg-muted);
}

.product__chips {
	display: flex;
	gap: var(--space-1);
}

.chip-mini {
	display: inline-flex;
	align-items: center;
	height: 2.6rem;
	padding: 0 var(--space-3);
	border-radius: var(--radius-md);
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
	letter-spacing: var(--ls-tight);
	color: var(--fg-muted);
	border: 1px solid var(--color-line-300);
	background: transparent;
}

.product__price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product__price {
	font-weight: var(--fw-medium);
	font-size: var(--fs-h-28);
	line-height: 1;
	color: var(--fg-brand);
}

.product--featured .product__price {
	color: var(--fg-brand);
}

.product__price-old {
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
	color: var(--fg-muted);
	text-decoration: line-through;
	margin-left: auto;
}

.in-stock,
.not-available {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
	color: var(--fg-muted);
	margin-left: auto;
}

.in-stock .icon,
.not-available .icon {
	margin: 0;
}

/* .in-stock::before {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	background: var(--color-accent-green);
	mask: url("/local/templates/gianit/assets/icons/check.svg") center / contain no-repeat;
	-webkit-mask: url("/local/templates/gianit/assets/icons/check.svg") center / contain no-repeat;
} */

.in-stock svg {
	color: var(--color-accent-green);
}

.product__cta {
	display: flex;
	gap: 1rem;
}

.product__cta .btn {
	width: 100%;
	flex: 1;
}


.not_price {
	font-size: 2.2rem;
}

/* ---------- CATEGORY CARDS ---------- */

.cat-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--layout-col-gap);
}

.cat-card {
	position: relative;
	height: 18rem;
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--bg-input);
	border: 1px dashed var(--color-line-300);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: border-color var(--dur-2) var(--ease-out),
		transform var(--dur-2) var(--ease-out);
	cursor: pointer;
}

.cat-card:hover {
	border-color: var(--color-brand-600);
	transform: translateY(-2px);
}

.cat-card__index {
	font-weight: var(--fw-medium);
	font-size: var(--fs-h-18);
	color: var(--fg-default);
}

.cat-card__name {
	font-weight: var(--fw-medium);
	font-size: var(--fs-h-18);
	color: var(--fg-default);
	line-height: 1;
}

.cat-card__count {
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
	color: var(--fg-default);
	margin-top: var(--space-2);
}

.cat-card--cta {
	background: var(--color-line-200);
	border: none;
	align-items: flex-end;
	justify-content: flex-end;
}

/* ---------- ABOUT ---------- */

.about {
	padding: 0 var(--layout-gutter);
	margin-bottom: var(--space-12);
}

.about__eyebrow {
	font-weight: var(--fw-medium);
	font-size: var(--fs-h-18);
	color: var(--fg-subtle);
	text-align: center;
	margin: 0 0 var(--space-4);
}

.about__title {
	text-align: center;
	margin: 0 auto var(--space-8);
	white-space: pre-line;
}

.about__divider {
	height: 0;
	border-top: 1px dashed var(--color-line-300);
	margin: var(--space-8) 0;
}

.about__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--layout-col-gap);
	align-items: start;
}

.about__photos {
	display: flex;
	align-items: center;
	height: 18rem;
	position: relative;
}

.about__photos.reverse {
	justify-content: end;
}

.about__photos .circle {
	width: 18rem;
	height: 18rem;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--bg-image);
	position: relative;
}

.about__photos .circle img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about__photos .circle:nth-child(2) {
	margin-left: -4rem;
}

.about__photos .circle:nth-child(3) {
	margin-left: 7.6rem;
}

.about__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.about__copy p,
.about__copy ol {
	font-size: var(--fs-h-24);
	line-height: var(--lh-content);
	letter-spacing: var(--ls-tight);
	color: var(--fg-default);
}

.about__copy h3 {
	font-size: var(--fs-display-md);
	line-height: var(--lh-content);
	letter-spacing: var(--ls-tight);
	color: var(--fg-brand);
}

/* ---------- CALCULATOR ---------- */

.calc-section {
	padding: 0 var(--layout-gutter);
	margin-bottom: var(--space-12);
}

.calc {
	position: relative;
	background: var(--bg-section);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	overflow: hidden;
}

.calc__art {
	position: absolute;
	right: -15rem;
	top: 9.6rem;
	width: 85.5rem;
	height: 85.5rem;
	background: url("/local/templates/gianit/assets/css/../../assets/bearing-large.png") center / contain no-repeat;
	z-index: 0;
}

.calc__title {
	position: relative;
	font-size: var(--fs-display-lg);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-tight);
	color: var(--fg-brand);
	margin: 0 0 var(--space-7);
}

.calc__cols {
	position: relative;
	display: grid;
	grid-template-columns: 67.9rem 1fr 31rem;
	gap: var(--space-6);
}

.calc__panel {
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--color-line-200);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}

.calc__panel-title {
	font-weight: var(--fw-medium);
	font-size: var(--fs-h-18);
	line-height: var(--lh-loose);
	margin: 0 0 var(--space-7);
}

.calc__rpm {
	font-weight: var(--fw-bold);
	font-size: 3.2rem;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--fg-brand);
}

.calc__warn {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-accent-red);
	border: 3px solid rgba(255, 32, 86, 0.15);
	color: var(--color-white);
	font-weight: var(--fw-bold);
	font-size: var(--fs-text-14);
	letter-spacing: var(--ls-tight);
}

.slider {
	position: relative;
	height: 2.4rem;
	display: flex;
	align-items: center;
	margin-top: var(--space-3);
}

.slider__track {
	flex: 1;
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--color-line-300);
	position: relative;
	overflow: visible;
}

.slider__fill-blue {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 78%;
	background: var(--color-brand-600);
	border-radius: var(--radius-full);
}

.slider__fill-red {
	position: absolute;
	left: 78%;
	top: 0;
	bottom: 0;
	width: 6%;
	background: var(--color-accent-red);
}

.slider__thumb {
	position: absolute;
	top: 50%;
	left: 84%;
	transform: translate(-50%, -50%);
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--color-accent-red);
	box-shadow: 0 0 0 4px rgba(255, 32, 86, 0.18);
	cursor: grab;
}

.slider__ticks {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-2);
	font-size: var(--fs-text-14);
	color: var(--fg-muted);
	letter-spacing: var(--ls-tight);
}

.calc__field {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.calc__field-label {
	width: 14.8rem;
	font-size: var(--fs-text-14);
	text-align: right;
	letter-spacing: var(--ls-tight);
	color: var(--fg-muted);
	flex-shrink: 0;
}

.calc__field-control {
	flex: 1;
	display: flex;
	gap: var(--space-1);
}

.seg-btn {
	flex: 1;
	height: 2.6rem;
	border-radius: var(--radius-md);
	background: var(--color-line-300);
	color: var(--fg-default);
	font-weight: var(--fw-bold);
	font-size: var(--fs-text-14);
	letter-spacing: var(--ls-tight);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--dur-2) var(--ease-out);
}

.seg-btn.is-active {
	background: var(--gradient-2rz);
	color: var(--color-white);
}

.calc__input {
	flex: 1;
	height: 4rem;
	padding: 0 var(--space-4);
	border-radius: var(--radius-md);
	background: var(--bg-input);
	border: none;
	outline: none;
	font: var(--fw-medium) var(--fs-text-14)/1 var(--font-sans);
	letter-spacing: var(--ls-tight);
	color: var(--fg-default);
}

.gauges {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: var(--space-6);
}

.gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.gauge__label {
	display: inline-flex;
	align-items: center;
	height: 2.5rem;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-md);
	color: var(--color-white);
	font-weight: var(--fw-bold);
	font-size: var(--fs-text-14);
	letter-spacing: var(--ls-tight);
}

.gauge__label--red {
	background: var(--color-accent-red);
}

.gauge__label--blue {
	background: var(--gradient-2rz);
}

.gauge__dial {
	position: relative;
	width: 22rem;
	height: 11rem;
}

.gauge__dial svg {
	display: block;
	width: 100%;
	height: auto;
}

.gauge__value {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	font-weight: var(--fw-bold);
	font-size: var(--fs-display-sm);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

.gauge__pct {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3.8rem;
	text-align: center;
	font-family: var(--font-accent);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h-24);
	color: var(--color-line-300);
}

.calc__summary {
	position: relative;
	grid-column: 1 / -1;
	margin-top: var(--space-4);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--color-line-200);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-10);
}

.calc__summary-item {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.calc__summary-label {
	font-weight: var(--fw-medium);
	font-size: var(--fs-h-18);
	color: var(--fg-default);
}

.calc__summary-value {
	font-weight: var(--fw-bold);
	font-size: var(--fs-display-md);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--fg-brand);
}

/* ---------- BIG CTA ---------- */

.bigcta {
	padding: 0 var(--layout-gutter);
	margin-bottom: var(--space-12);
}

.bigcta__inner {
	position: relative;
	height: 37.9rem;
	border-radius: var(--radius-xl);
	background: var(--color-brand-600);
	overflow: hidden;
	display: flex;
	align-items: center;
}

.bigcta__art {
	position: absolute;
	left: 0;
	top: 0;
	width: 79.8rem;
	height: 100%;
	background: url("/local/templates/gianit/assets/img/bearing-cta2.png") center / cover no-repeat;
}

.bigcta__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(270deg, rgba(25, 60, 184, 1) 0%, rgba(25, 60, 184, 0.1) 100%);
}

.bigcta__copy {
	position: relative;
	margin-left: 89.3rem;
	max-width: 72rem;
	z-index: 1;
}

.bigcta__title {
	font-size: var(--fs-display-lg);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight);
	line-height: 1;
	color: var(--color-white);
	margin: 0 0 var(--space-8);
	white-space: pre-line;
}

.bigcta__btn {
	background: var(--color-white);
	color: var(--color-brand-600);
}

.bigcta__btn:hover {
	background: var(--color-line-200);
}

/* ---------- VIDEO CARDS ---------- */

.video-grid {
	width: 100vw;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
	grid-auto-flow: column;
	overflow-x: auto;
	overflow-y: hidden;
	gap: var(--layout-col-gap);
	margin-bottom: var(--space-8);
	margin-left: -8rem;
	padding-left: 8rem;
	padding-right: 8rem;
	scrollbar-width: none;
}

.video {
	min-width: 40rem;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	cursor: pointer;
}

.video__media {
	aspect-ratio: 452/273;
	border-radius: var(--radius-lg);
	background: var(--bg-image) url("/local/templates/gianit/assets/img/bearing-card.png") center / cover no-repeat;
	position: relative;
}

.video__media::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6.4rem;
	height: 6.4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 3.2rem rgba(15, 23, 43, 0.16);
	opacity: 0;
	transition: opacity var(--dur-2) var(--ease-out);
}

.video__media::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.2rem 0 1.2rem 1.8rem;
	border-color: transparent transparent transparent var(--color-brand-600);
	z-index: 1;
	opacity: 0;
	transition: opacity var(--dur-2) var(--ease-out);
}

.video:hover .video__media::after,
.video:hover .video__media::before {
	opacity: 1;
}

.video__title {
	font-weight: var(--fw-medium);
	font-size: var(--fs-h-18);
	line-height: var(--lh-snug);
	color: var(--fg-default);
}

/* ---------- HORIZONTAL RAIL SLIDER ----------
   Generic slider: .js-slider > .section-head + .js-slider__viewport
   Scroll arrows live in .rail-arrows ([data-slider-btn="prev"/"next"]).
   Works on any overflow-x rail (video-grid, blog-grid, product-grid …). */
.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	margin-bottom: var(--space-10);
}

.section-head .section-title {
	margin-bottom: 0;
	white-space: normal;
}

.rail-arrows {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}

.rail-arrow {
	width: 6.4rem;
	height: 6.4rem;
	border-radius: var(--radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	border: 1px solid var(--color-line-300);
	color: var(--fg-default);
	box-shadow: var(--shadow-card);
	cursor: pointer;
	transition:
		color var(--dur-2) var(--ease-out),
		border-color var(--dur-2) var(--ease-out),
		background-color var(--dur-2) var(--ease-out),
		box-shadow var(--dur-2) var(--ease-out),
		transform var(--dur-1) var(--ease-out);
}

.rail-arrow .icon {
	width: 2.4rem;
	height: 2.4rem;
}

.rail-arrow:hover {
	border-color: var(--color-brand-600);
	color: var(--color-brand-600);
	box-shadow: var(--shadow-card-hover);
}

.rail-arrow:active {
	transform: translateY(1px);
}

.rail-arrow--prev .icon {
	transform: rotate(180deg);
}

.rail-arrow:disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
	box-shadow: none;
}

/* arrows disappear when there is nothing to scroll */
.rail-arrows.is-empty {
	visibility: hidden;
}

/* narrow / touch screens: rail is swipeable, arrows not needed */
@media (hover: none),
(pointer: coarse) {
	.js-slider .rail-arrows {
		display: none;
	}
}

/* ---------- SUPPLIER LOGOS ---------- */

.supplier-row {
	width: 100vw;
	display: flex;
	grid-template-columns: none;
	gap: 1.6rem;
	overflow-x: auto;
	margin: 0 -1.6rem;
	padding: 4px 1.6rem 8px;
	scrollbar-width: none;
	position: relative;
	left: -6.6rem;
}

.supplier-row::-webkit-scrollbar {
	display: none;
}

.supplier {
	width: 200px;
	height: 12rem;
	flex-shrink: 0;
	font-size: 2.4rem;
	height: 12rem;
	background: var(--bg-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--fw-bold);
	font-size: var(--fs-h-24);
	letter-spacing: -0.02em;
	color: var(--fg-default);
	transition: border-color var(--dur-2) var(--ease-out);
}

.supplier:hover {
	border-color: var(--color-brand-600);
}

.supplier-wrapper {
	width: 100vw;
	overflow: hidden;
	position: relative;
	margin: 0 -1.6rem;
	padding: 4px 0 8px;
	left: -6rem;
}

.supplier-row {
	display: flex;
	gap: 1.6rem;
	width: max-content;
	padding: 0 1.6rem;
	will-change: transform;
}

.supplier {
	width: 200px;
	height: 12rem;
	flex-shrink: 0;
	font-size: 2.4rem;
	background: var(--bg-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--fw-bold);
	font-size: var(--fs-h-24);
	letter-spacing: -0.02em;
	color: var(--fg-default);
	transition: border-color var(--dur-2) var(--ease-out);
	cursor: default;
	user-select: none;
}

.supplier:hover {
	border-color: var(--color-brand-600);
}

.supplier--rose {
	color: var(--color-accent-rose);
	font-style: italic;
}

.supplier--red {
	color: var(--color-accent-red);
}

.supplier--orange {
	color: #ED7D31;
}

.supplier--blue {
	color: var(--color-brand-info);
	font-family: "Arial Black", var(--font-sans);
}

/* ---------- BLOG CARDS ---------- */

.blog-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--layout-col-gap);
	margin-bottom: var(--space-8);
}

.post {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	justify-content: space-between;
}

.post__media {
	aspect-ratio: 285/273;
	border-radius: var(--radius-lg);
	background: var(--bg-image) url("/local/templates/gianit/assets/img/bearing-card.png") center / cover no-repeat;
	transition: .5s ease;
}

.post__date {
	font-size: var(--fs-text-14);
	letter-spacing: var(--ls-tight);
	color: var(--fg-muted);
}

.post__title {
	font-weight: var(--fw-medium);
	font-size: var(--fs-h-18);
	line-height: var(--lh-snug);
	color: var(--fg-default);
	transition: .3s linear;
}

.post__excerpt {
	font-size: var(--fs-text-14);
	line-height: var(--lh-loose);
	letter-spacing: var(--ls-tight);
	color: var(--fg-muted);
}

.post__more {
	font-weight: var(--fw-bold);
	font-size: var(--fs-text-16);
	color: var(--fg-brand);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	transition: .3s linear;
}

.post__media:hover {
	transform: scale(1.05);
}

.post__title:hover {
	color: var(--fg-brand);
}

.post__more:hover {
	color: var(--color-brand-500);
}

/* ---------- CONTACT (Будем на связи) ---------- */

.contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	padding: 0 var(--layout-gutter);
	margin-bottom: var(--space-12);
	align-items: stretch;
}

.contact__left {
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
}

.contact__title {
	font-size: var(--fs-display-xl);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-tight);
	color: var(--fg-brand);
	margin: 0;
}

.contact__top {
	display: flex;
	gap: var(--space-10);
}

.contact__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.contact-item {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
}

.contact-item .icon {
	width: 2.4rem;
	height: 2.4rem;
	color: var(--color-ink-500);
	flex-shrink: 0;
}

.contact-item__lines {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.contact-item__line1 {
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-16);
	color: var(--fg-default);
	line-height: 1;
}

.contact-item__line2 {
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
	color: var(--fg-muted);
	line-height: 1;
}

.form {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	max-width: 72rem;
}

.form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.field__label {
	font-size: var(--fs-text-14);
	letter-spacing: var(--ls-tight);
	color: var(--fg-subtle);
}

.field__input {
	height: 5.9rem;
	padding: 0 var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--bg-input);
	border: 1px solid transparent;
	outline: none;
	font: var(--fw-regular) var(--fs-text-16)/var(--lh-body) var(--font-sans);
	letter-spacing: var(--ls-tight);
	color: var(--fg-default);
	transition: border-color var(--dur-2) var(--ease-out);
}

.field__input:focus {
	border-color: var(--color-brand-600);
}

.field__input::placeholder {
	color: var(--fg-muted);
}

textarea.field__input {
	min-height: 12rem;
	padding: var(--space-5);
	resize: vertical;
}

.form__submit {
	display: flex;
	align-items: center;
	gap: 3rem;
}

.form__consent {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	font-family: var(--font-fine);
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
	line-height: var(--lh-content);
	color: var(--fg-muted);
	max-width: 33.3rem;
}

.checkbox {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 6px;
	background: var(--color-brand-600);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.contact__map {
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--bg-image) url("/local/templates/gianit/assets/css/../../assets/contact-photo.png") center / cover no-repeat;
	min-height: 60rem;
}

/* ---------- FOOTER ---------- */

.footer {
	background: var(--bg-footer);
	color: var(--color-white);
	padding: var(--space-8) var(--layout-gutter) var(--space-9);
	position: relative;
}

.footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.5fr 1.2fr;
	gap: var(--space-10);
	align-items: start;
}

.footer__logo {
	height: 8rem;
	width: 20.6rem;
	background: url("/local/templates/gianit/assets/img/miar-logo.png") left center / contain no-repeat;
	margin-bottom: var(--space-7);
}

.footer__fine {
	font-size: var(--fs-text-14);
	line-height: var(--lh-loose);
	letter-spacing: var(--ls-tight);
	color: var(--color-muted-600);
	margin-top: var(--space-7);
}

.footer__inn {
	font-size: var(--fs-text-14);
	line-height: var(--lh-loose);
	letter-spacing: var(--ls-tight);
	color: var(--color-muted-600);
	margin-top: var(--space-7);
	white-space: pre-line;
}

.footer__col-title {
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-16);
	color: var(--color-white);
	margin: 0 0 var(--space-6);
}

.footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.footer__link {
	font-size: var(--fs-text-14);
	letter-spacing: var(--ls-tight);
	color: var(--color-muted-400);
	transition: color var(--dur-1) var(--ease-out);
	cursor: pointer;
}

.footer__link:hover {
	color: var(--color-brand-sky);
}

.footer__link--blue {
	color: var(--color-brand-link);
}

.footer__contact-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
}

.footer__contact-row .icon {
	width: 1.6rem;
	height: 1.6rem;
	color: var(--color-muted-400);
}

.footer__contact-sub {
	font-size: var(--fs-text-12);
	color: var(--color-muted-600);
	margin-top: var(--space-2);
}

.footer__bottom {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--fs-text-14);
	color: var(--color-muted-600);
	letter-spacing: var(--ls-tight);
}

.footer__bottom .gianit {
	color: var(--color-brand-link);
	margin-left: var(--space-4);
}

/* ---------- ICON HELPERS ---------- */

.icon {
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
}

.icon--mask {
	background-color: currentColor;
	display: inline-block;
}


/* =============================================================
   RESPONSIVE — MOBILE
   Source: /page/Slide-16-9---31 (390 px frame) in "Миар mob.fig"
   Breakpoints:
     ≤ 128rem  — tablet adjustments (3-up product grids etc.)
     ≤ 768px   — mobile (single column, horizontal scroll rails)
   ============================================================= */

/* ----- mobile-only header elements ----- */
.header__mobile-actions {
	display: none;
}

.hamburger {
	width: 3.2rem;
	height: 3.2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fg-default);
	background: transparent;
}

.bx-blue .btn.btn-default {
	background-color: var(--btn-primary-bg) !important;
	border-color: var(--btn-primary-bg) !important;
}

.bx-blue .btn.btn-default:hover {
	background-color: var(--color-brand-500) !important;
	border-color: var(--color-brand-500) !important;
}

/* ===== Tablet (≤ 128rem) — narrow desktop ===== */
@media (max-width: 1024px) {

	html {
		font-size: 62.5%;
	}

	.page {
		min-width: 0;
	}

	.section,
	.header,
	.calc-section,
	.about,
	.bigcta,
	.contact {
		padding-left: 3.2rem;
		padding-right: 3.2rem;
	}

	.footer {
		padding-left: 3.2rem;
		padding-right: 3.2rem;
	}

	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.cat-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.video-grid,
	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.section-title {
		font-size: 6.4rem;
	}

	.calc__cols {
		grid-template-columns: 1fr 1fr;
	}

	.calc__art {
		display: none;
	}

	.calc__summary {
		flex-direction: column;
		align-items: flex-start;
		gap: 2.4rem;
	}

	.footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}


	body {
		font-size: var(--fs-text-16);
	}

	/* ---- spacing ---- */
	.section {
		padding: 0 1.6rem;
		margin-bottom: 4rem;
	}

	.calc-section,
	.about,
	.bigcta,
	.contact {
		padding-left: 1.6rem;
		padding-right: 1.6rem;
		margin-bottom: 60px;
	}

	.footer {
		padding: 3.2rem 1.6rem 2.4rem;
	}

	/* ---- type ramp ---- */
	.section-title {
		font-size: 48px;
		margin-bottom: 2.4rem;
	}

	/* rail slider: on narrow screens the rail is swipeable — hide arrows */
	.section-head {
		margin-bottom: 2.4rem;
	}

	.js-slider .rail-arrows {
		display: none;
	}

	.about__copy p,
	.about__copy ol {
		font-size: 1.6rem;
	}

	.about__copy h3 {
		font-size: 2.4rem;
	}

	.contact__title {
		font-size: 48px;
	}

	.bigcta__title {
		font-size: 4rem;
		line-height: 1;
	}

	.calc__title {
		font-size: 3.2rem;
	}

	.calc__summary-value {
		font-size: 3.2rem;
	}

	/* mobile slide-out menu */
	.is-mobile-menu-open .header__nav {
		display: flex;
		position: fixed;
		inset: 0 0 0 0;
		background: var(--bg-page);
		padding: 8rem 2.4rem 2.4rem;
		z-index: 100;
		flex-direction: column;
		align-items: flex-start;
		gap: 2.4rem;
		overflow-y: auto;
	}

	.is-mobile-menu-open .header__nav .nav-link {
		font-size: 2.4rem;
		font-weight: 500;
	}

	.is-mobile-menu-open .header__nav .btn--catalog {
		width: 100%;
		height: 5.1rem;
		font-size: 1.6rem;
	}

	/* close X */
	.is-mobile-menu-open [data-menu-toggle] {
		position: fixed;
		top: 1.6rem;
		right: 1.6rem;
		z-index: 101;
	}

	.is-mobile-menu-open [data-menu-toggle]::before {
		content: "✕";
		font-size: 28px;
		color: var(--fg-default);
	}

	.is-mobile-menu-open [data-menu-toggle] svg {
		display: none;
	}

	/* ---- hero ---- */
	.hero {
		height: 86rem;
		top: -8rem;
		margin: 0 0 60px;
		border-radius: 0 0 2.4rem 2.4rem;
		background: var(--bg-image) url(/local/templates/gianit/assets/img/hero-bearing.jpg) 85% bottom / 115rem no-repeat;
	}

	.hero::before {
		background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(248, 250, 252, 0.45) 30%, rgba(248, 250, 252, 0) 60%);
	}

	.hero__title {
		font-size: 3.2rem;
		line-height: 1;
		margin-bottom: 2.4rem;
	}

	.hero__content {
		left: 1.6rem;
		right: 1.6rem;
		width: auto;
		top: 122px;
	}

	.hero__partners {
		height: 6.4rem;
		gap: 2.4rem;
		margin-bottom: 2.4rem;
	}

	.hero__chips {
		width: calc(100% + 3.2rem);
		margin-left: -1.6rem;
		padding-left: 1.6rem;
		flex-wrap: nowrap;
		gap: .4rem;
		overflow-x: scroll;
		-ms-overflow-style: none;
		/* IE, Edge */
		scrollbar-width: none;
		/* Firefox */
	}

	.hero__chips .chip--lg {
		height: 4rem;
		padding: 0 1.2rem;
		font-size: 14px;
		font-weight: 500;
		white-space: nowrap;
	}

	.hero__chips:not(.mob) a:last-child {
		display: none;
	}

	.hero__chips.mob {
		width: 100%;
		display: flex;
		padding: 0;
		margin: 4rem 0;
		flex-wrap: wrap;
	}

	.hero__chips.mob .chip--lg {
		width: 100%;
		justify-content: center;
	}

	/* turn hero pill row into chips + full-width CTA underneath */
	.hero__chips::after {
		content: "";
		flex-basis: 100%;
		height: 8px;
	}

	/* ---- filter chips row ---- */
	.filter-row {
		margin-bottom: 2.4rem;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.filter-row::-webkit-scrollbar {
		display: none;
	}

	.filter-row .chip {
		flex-shrink: 0;
	}

	/* ---- product rows → horizontal scroll rail ---- */
	.product-grid {
		display: flex;
		grid-template-columns: none;
		gap: 1.6rem;
		overflow-x: auto;
		margin: 0 -1.6rem;
		padding: 4px 1.6rem 8px;
		/* scroll-snap-type: x mandatory; */
		scrollbar-width: none;
	}

	.product-grid::-webkit-scrollbar {
		display: none;
	}

	.product {
		width: 28rem;
		flex-shrink: 0;
		scroll-snap-align: start;
	}

	.product__media {
		aspect-ratio: 280/247;
	}

	/* ---- category grid → stacked column ---- */
	.cat-grid {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.cat-card {
		min-height: 12rem;
	}

	/* hide second cat-grid CTA tile; we render a CTA button instead */
	.cat-card--cta {
		min-height: 8rem;
	}

	/* ---- about ---- */
	.about__row {
		grid-template-columns: 1fr;
		gap: 3.2rem;
	}

	.about__photos {
		overflow-x: auto;
		margin: 0 auto;
		padding: 0 1.6rem;
		scrollbar-width: none;
		justify-content: flex-start;
	}

	.about__photos::-webkit-scrollbar {
		display: none;
	}

	.about__photos .circle {
		width: 10rem;
		height: 10rem;
	}

	.about__photos .circle:nth-child(2) {
		margin-left: -3.2rem;
	}

	.about__photos .circle:nth-child(3) {
		margin-left: 2.4rem;
	}

	.about__copy .btn {
		width: 100%;
		justify-content: center;
	}

	/* ---- calculator ---- */
	.calc {
		padding: 2.4rem 1.6rem;
		border-radius: 2.4rem;
	}

	.calc__art {
		display: none;
	}

	.calc__cols {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.calc__panel {
		padding: 20px 1.6rem;
	}

	.calc__field {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.calc__field-label {
		width: auto;
		text-align: left;
	}

	.calc__rpm {
		font-size: 2.4rem;
	}

	.calc__warn {
		font-size: 1.2rem;
		padding: 4px 1rem;
	}

	.calc__summary {
		flex-direction: column;
		align-items: stretch;
		gap: 1.6rem;
		padding: 20px 1.6rem;
	}

	.calc__summary-item {
		justify-content: space-between;
		gap: 1.6rem;
	}

	.calc__summary .btn {
		width: 100%;
		height: 5.1rem;
		font-size: 14px;
	}

	.gauges {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
		gap: 1.2rem;
	}

	.gauge__dial {
		width: 100%;
		max-width: 160px;
	}

	/* ---- big CTA ---- */
	.bigcta__inner {
		height: auto;
		min-height: 49.6rem;
		flex-direction: column;
		align-items: stretch;
		padding: 2.4rem;
	}

	.bigcta__art {
		position: relative;
		width: 100%;
		height: 200px;
		order: 2;
		margin-top: 2.4rem;
		border-radius: 1.6rem;
	}

	.bigcta__art::after {
		background: linear-gradient(180deg, rgba(25, 60, 184, 0.4) 0%, rgba(25, 60, 184, 0.1) 100%);
		border-radius: 1.6rem;
	}

	.bigcta__copy {
		position: static;
		margin: 0;
		max-width: 100%;
		order: 1;
	}

	.bigcta__btn {
		width: 100%;
		justify-content: center;
	}

	/* ---- video / blog → horizontal scroll ---- */
	.video-grid,
	.blog-grid {
		display: flex;
		grid-template-columns: none;
		gap: 2.4rem;
		overflow-x: auto;
		margin: 0 -1.6rem;
		padding: 4px 1.6rem 8px;
		/* scroll-snap-type: x mandatory; */
		scrollbar-width: none;
		margin-bottom: 2.4rem;
	}

	.video-grid::-webkit-scrollbar,
	.blog-grid::-webkit-scrollbar {
		display: none;
	}

	.blog-grid.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.4rem;
		overflow-x: visible;
		margin: 0;
		padding: 0;
		scroll-snap-type: none;
		scrollbar-width: none;
		margin-bottom: 2.4rem;
	}

	.video,
	.post {
		width: 28rem;
		flex-shrink: 0;
		scroll-snap-align: start;
	}

	.blog-grid.list .post {
		width: auto;
	}

	.video {
		min-width: 100%;
	}

	.post__media {
		aspect-ratio: 1;
	}

	.section .btn:not(.btn--sm):not(.btn--catalog) {
		width: 100%;
		justify-content: center;
	}

	/* ---- contact ---- */
	.contact {
		grid-template-columns: 1fr;
		gap: 3.2rem;
	}

	.contact__top {
		flex-direction: column;
		gap: 2.4rem;
	}

	.form__row {
		grid-template-columns: 1fr;
		gap: 2.4rem;
	}

	.form__submit {
		flex-direction: column;
		align-items: stretch;
		gap: 1.6rem;
	}

	.form__submit .btn {
		width: 100%;
	}

	.form__consent {
		max-width: none;
	}

	.contact__map {
		min-height: 320px;
	}



	/* My */

	/* ---- header (mobile bar) ---- */
	.header {
		padding: 1.6rem;
	}

	.header__top {
		display: none;
	}

	.header__bar {
		height: 3.2rem;
		justify-content: space-between;
		margin-top: 0;
	}

	.header__logo {
		width: 84px;
		height: 3.2rem;
		z-index: 999;
	}

	.header__nav,
	.header__actions {
		display: none;
	}

	.header__mobile-actions {
		display: flex;
		align-items: center;
		gap: 3.2rem;
		z-index: 999;
	}

	.header__mobile-actions .cart {
		width: 3.2rem;
		height: 3.2rem;
		z-index: 999;
	}

	.hamburger .icon {
		fill: var(--fg-muted);
		color: var(--fg-muted);
	}

	.header_mobile {
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
		position: fixed;
		top: 0;
		left: 0;
		inset: 0;
		width: 100%;
		min-height: 100vh;
		min-height: calc(100dvh - 10rem);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		z-index: 998;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-20px);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
		padding: 1.6rem 1.6rem 1.6rem 1.6rem;
		background: var(--bg-image);
		margin-top: 5rem;
	}

	/* Открытое состояние */
	.header.active .header_mobile {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.header_mobile .header__search {
		max-width: 100%;
		flex-direction: column;
		gap: 1.6rem;
	}

	.header_mobile .search {
		background: var(--color-white);
	}

	.header_mobile .search,
	.header_mobile button {
		width: 100%;
		max-width: 100%;
	}

	.header_mobile .header__nav {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: 3.2rem;
	}

	.header_mobile .header__nav button {
		justify-content: center;
	}

	.header_mobile .header__actions {
		display: flex;
	}

	.header_mobile .header__contacts {
		flex-direction: column;
		gap: 2.4rem;
		align-items: start;
	}

	.header_mobile .header__search a {
		width: 100%;
	}

	/* ---- footer ---- */
	.footer__grid {
		grid-template-columns: 1fr;
		gap: 4rem;
	}

	.footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2rem;
		margin-top: 3.2rem;
	}

	.footer__logo {
		margin-bottom: 2.4rem;
	}

	.footer__column-list {
		display: none;
	}

	.supplier-wrapper {
		left: 0;
	}

	.btn--catalog {
		width: 100%;
		justify-content: center;
	}

	.modal {
		width: 100%;
		padding: 2.4rem 1.8rem !important;
	}
}

@media(max-width: 697px) {
	.blog-grid.list {
		grid-template-columns: repeat(1, 1fr);
	}
}

.popup-window {
	border-radius: 2.4rem;
	padding: 3.2rem !important;
}

.popup-window-titlebar {
	height: auto;
}

.popup-window-titlebar-text {
	font-size: 3.2rem;
	font-weight: 600;
	letter-spacing: -5%;
	color: hsla(227, 76%, 41%, 1);
}

.popup-window-content img {
	margin: auto;
}

.popup-window-content p {
	margin-top: 1.4rem;
}

.popup-window-buttons .btn {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-fg);
}

.popup-window-buttons .btn:hover {
	background: var(--color-brand-500);
}

.not_found {
	display: flex;
	align-items: center;
	gap: 5rem;
}

.not_found h1 {
	font-size: 4.8rem;
	font-weight: 600;
	line-height: 80%;
	letter-spacing: -5%;
	color: hsla(227, 76%, 41%, 1);
}

.not_found p {
	font-size: 2.4rem;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -5%;
	color: hsla(217, 36%, 18%, 1);
}

.not_found img {
	max-width: 100rem;
}

.not_found a {
	justify-content: center;
	max-width: 28rem;
	font-size: 1.6rem;
}

.not_found a svg {
	transform: rotate(180deg);
}

.not_found_left {
	display: flex;
	flex-direction: column;
	gap: 4.8rem;
}

@media(max-width: 1024px) {
	.not_found {
		flex-wrap: wrap;
		justify-content: center;
	}

	.not_found_left {
		align-items: center;
	}

	.not_found img {
		width: 100%;
	}
}
/* End */


/* Start:/local/templates/gianit/components/bitrix/search.title/gianit/style.css?17882673641778*/
.header__search form {
	max-width: 57rem;
	width: 100%;
}

@media (min-width: 1024px) {
	.header_fixed form {
		max-width: 42.4rem;
		width: auto;
	}
}

.title-search-result {
	display: none;
	max-width: 57rem;
	margin-top: 1rem;
	padding: 2.4rem;
	background: #fff;
	border-radius: 1.6rem;
	z-index: 999;
}

.search-title {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	max-height: 36rem;
	overflow-y: auto;
}

/* Тонкий скролл */
.search-title::-webkit-scrollbar {
	width: 4px;
}

.search-title::-webkit-scrollbar-track {
	background: transparent;
}

.search-title::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 10px;
}

.search-title::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

.search-title-result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2.4rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid hsla(214, 32%, 91%, 1);
	font-size: 1.4rem;
	transition: .3s linear;
	color: var(--fg-muted);
}

.search-title-result-item:hover {
	opacity: .5;
}

.search-title-result-item-brand {
	font-size: var(--fs-text-14);
	color: var(--fg-muted);
	white-space: nowrap;
}

.search-title-result-item-side {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.search-title-result-item-price {
	font-weight: var(--fw-medium);
	font-size: var(--fs-text-14);
	color: var(--fg-brand);
	white-space: nowrap;
}

.search-title-result-item span:first-child {
	width: 15%;
}

.search-title-result-item span:last-child {
	width: 15%;
}

.search-title-result-item span:nth-child(2) {
	width: 40%;
}

.search-title-btn {
	display: flex;
	transition: .3s linear;
}

.search-title-btn:hover {
	color: var(--fg-brand);
}

@media (max-width: 1024px) {
	.search-title-btn {
		width: 3rem !important;
	}
}
/* End */


/* Start:/local/templates/gianit/components/bitrix/catalog.section.list/catalog_modal/style.css?17882676222339*/
/* popup */
#catalogModal {
	max-width: 178rem;
	height: 80vh;
	padding: 4.8rem;
	border-radius: 3rem;
}

.modal a.close-modal {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	display: block;
	width: 3.2rem;
	height: 3.2rem;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23E2E8F0'/%3E%3Cpath d='M20.0756 11.9273L11.9297 20.0731L20.0756 11.9273Z' fill='%23E5E7EB'/%3E%3Cpath d='M11.9298 11.9273L20.0756 20.0731L11.9298 11.9273Z' fill='%23E5E7EB'/%3E%3Cpath d='M20.0756 11.9273L11.9297 20.0731M11.9298 11.9273L20.0756 20.0731' stroke='%2362748E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: .2s linear;
}

.modal a.close-modal:hover {
	transform: scale(1.1);
}

.catalog-sublist-block {
	display: none;
}

.catalog-sublist-block.active {
	display: block;
}

.catalog_modal__container {
	display: flex;
	gap: 64px;
}

.catalog_modal__left {
	width: 100%;
	max-width: 27.4rem;
}

.catalog_modal__list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.catalog_modal__list .catalog-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--fs-h-18);
	font-weight: var(--fw-medium);
	color: var(--fg-default);
}

.catalog_modal__list .catalog-link.active {
	color: var(--color-brand-600);
}

.catalog_modal__right {
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
}

.catalog_modal__title {
	font-size: var(--fs-h-32);
	line-height: 80%;
	font-weight: var(--fw-semibold);
	color: var(--fg-default);
}

.catalog_sublist__column {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.catalog_sublist__column a {
	font-size: var(--fs-h-14);
	font-weight: var(--fw-medium);
	color: var(--fg-default);
	transition: .3s ease;
}

.catalog_sublist__column a:hover {
	color: var(--color-brand-600);
}

.catalog-sublist-block.active {
	display: flex;
	gap: var(--space-9);
}

.catalog_sublist__column {
	min-width: 27.4rem;
}

@media(max-width: 1024px) {
	#catalogModal {
		padding: 4.8rem 2.4rem;
	}

	.catalog_modal__right {
		display: none;
	}
}
/* End */


/* Start:/local/templates/gianit/components/bitrix/form/popup/bitrix/form.result.new/.default/style.css?17878231221853*/
input[type="submit"] {
	border: none;
}

.errortext {
	font-size: 1.4rem;
	line-height: 0;
	letter-spacing: 0;
}

br {
	display: block;
	height: .5rem;
}

.checkbox {
	background: #fff !important;
	border: 1px solid var(--color-brand-600);
	transition: .2s ease;
}

.checkbox__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* скрываем галочку */
.checkbox .icon {
	opacity: 0;
	transition: opacity .2s ease;
}

/* показываем при checked */
.checkbox__input:checked+.checkbox {
	background: var(--color-brand-600) !important;
}

.checkbox__input:checked+.checkbox .icon {
	opacity: 1;
}

.form__consent a {
	color: var(--color-brand-600);
}

.contact__top a:hover {
	color: var(--color-brand-500);
}

/* popup */
.modal {
	max-width: 72rem;
	padding: 3.2rem;
	border-radius: 2.4rem;
}

.contact__title {
	font-size: var(--fs-display-md);
	margin-bottom: 3.2rem;
}

.modal a.close-modal {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	display: block;
	width: 3.2rem;
	height: 3.2rem;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23E2E8F0'/%3E%3Cpath d='M20.0756 11.9273L11.9297 20.0731L20.0756 11.9273Z' fill='%23E5E7EB'/%3E%3Cpath d='M11.9298 11.9273L20.0756 20.0731L11.9298 11.9273Z' fill='%23E5E7EB'/%3E%3Cpath d='M20.0756 11.9273L11.9297 20.0731M11.9298 11.9273L20.0756 20.0731' stroke='%2362748E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: .2s linear;
}

.modal a.close-modal:hover {
	transform: scale(1.1);
}
/* End */


/* Start:/local/templates/gianit/components/tega/order.simple/gianit_buyclick/style.css?17882614442515*/
.order-simple input[type='text'],
.order-simple select,
.order-simple textarea {
    width: 100%;
}

.order-simple label {
    width: 100%;
    margin-bottom: 0;
}

.order-simple__error {
    color: red;
}

.success_order__btn {
    display: flex;
    gap: 1.6rem;
    align-items: center;
}

.not_found_left {
    align-items: normal !important;
}

.order_container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.order-left {
    width: 100%;
    max-width: 72rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.order-simple__block {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.order-simple__block__title {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 80%;
    letter-spacing: -5%;
    color: hsla(217, 36%, 18%, 1);
}

.order-right {
    width: 100%;
}

.order-right .order-simple__block {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.order-simple__price-table {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.order-simple__price-table span:first-child {
    font-size: 1.6rem;
    font-weight: 500;
    color: hsla(215, 23%, 65%, 1);
}

.order-simple__price-table span:last-child {
    font-size: 1.8rem;
    font-weight: 500;
    color: hsla(217, 36%, 18%, 1);
}

.order-simple__price-table div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-simple__price-table hr {
    width: 100%;
    height: 1px;
    color: hsla(213, 29%, 84%, 1);
}

.order-right button {
    width: 100%;
}

.order-simple__block-btn {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.order-simple__block.errors {
    gap: 1.6rem;
    margin-bottom: 1.6rem;
}

input[type="radio" i] {
    width: 2.3rem;
    height: 2.3rem;
    margin: 0;
    border: 1px solid hsla(213, 29%, 84%, 1);
}

.order-simple__field.radio {
    width: fit-content;
}

.order-simple__field.radio label {
    display: flex;
    align-items: center;
    gap: .8rem;
    cursor: pointer;
}

.order-right .form__consent {
    max-width: 100% !important;
}

.order-simple-success,
.order-simple-success-p {
    margin-bottom: 3.2rem;
}


@media(max-width: 1024px) {
    .success_order__btn {
        width: 100%;
        flex-wrap: wrap;
    }

    .success_order__btn a {
        width: 100%;
    }
}
/* End */
/* /local/templates/gianit/assets/css/nouislider.min.css?17858303474220 */
/* /local/templates/gianit/assets/css/modal.css?17827237353529 */
/* /local/templates/gianit/assets/css/colors_and_type.css?17809933269759 */
/* /local/templates/gianit/assets/css/styles.css?178853051548551 */
/* /local/templates/gianit/components/bitrix/search.title/gianit/style.css?17882673641778 */
/* /local/templates/gianit/components/bitrix/catalog.section.list/catalog_modal/style.css?17882676222339 */
/* /local/templates/gianit/components/bitrix/form/popup/bitrix/form.result.new/.default/style.css?17878231221853 */
/* /local/templates/gianit/components/tega/order.simple/gianit_buyclick/style.css?17882614442515 */