/* #region =====ПЕРЕМЕННЫЕ=====  */

ul,li{text-decoration:none !important; }


:root {
  --desktop-container: 1800px;

  --theme-z-index: 200;
  --header-main-z-index: 150;
  --theme-btn-wh: 24px;
  --theme-btn-icon-wh: 20px;
  --theme-top: 40px;

  --font-title: 'Exo 2', sans-serif;
  --font-text: 'Inter', sans-serif;

  --brand-50: #f3f0ff;
  --brand-100: #e8e1fe;
  --brand-200: #d2c5fc;
  --brand-300: #b09cff;
  /* акцент в dark */
  --brand-400: #9a82ff;
  --brand-500: #7957ea;
  /* акцент в light, основной цвет */
  --brand-600: #6d4ae0;
  --brand-700: #5a38c8;
  --brand-800: #482e9e;
  --brand-900: #362277;
  --brand-950: #1f1249;

  --txt-10: 10px;
  --txt-11: 11px;
  --txt-12: 12px;
  --txt-13: 13px;
  --txt-14: 14px;
  --txt-15: 15px;
  --txt-16: 16px;
  --txt-17: 17px;
  --txt-18: 18px;
  --txt-20: 20px;
  --txt-22: 22px;
  --txt-26: 26px;
  --txt-28: 28px;
  --txt-30: 30px;
  --txt-32: 32px;
  --txt-34: 34px;
  --txt-36: 36px;
  --txt-40: 40px;
  --txt-44: 44px;
  --txt-50: 50px;
  --txt-60: 60px;
  --txt-80: 80px;

  /* ТЕКСТ - толщина */
  --txt-w-400: 400;
  --txt-w-500: 500;
  --txt-w-600: 600;
  --txt-w-700: 700;
  --txt-w-800: 800;

  /* ТЕКСТ - расстояние между буквами */
  --txt-ls-1: 1px;
  --txt-ls-2: 2px;
  --txt-ls-3: 3px;
  --txt-ls-4: 4px;
  /* СВГ */
  --svg-16: 16px;
  --svg-18: 18px;
  --svg-20: 20px;
  --svg-22: 22px;
  --svg-24: 24px;
  --svg-26: 26px;
  /* #region ----- HEADER ----- */
  --logo-sport4team-w: 162.5px;
  --logo-sport4team-h: 40px;

  --header-main-center-show: flex;
  --header-main-grid-cols: auto 1fr auto;
  --header-main-padding: 0 20px;
  --header-main-gap: 40px;
  --header-main-height: 70px;
  --header-main-right-gap: 20px;
  --header-main-left-gap: 40px;
  /* #endregion ---------- */
  /* #region ----- КНОПКА ----- */

  --btn-height: 40px;
  --btn-padding: 0 20px;

  --btn-height-huge: 55px;
  --btn-padding-huge: 0 30px;

  --btn-svg-wh: 24px;
  --btn-svg-wh-huge: 28px;

  --btn-dropdown-desktop-show: flex;
  --btn-dropdown-mobile-show: none;

  /* #endregion ---------- */
  /* #region ----- КНОПКА ИКОНКА ----- */
  --btn-icon-wh: 40px;
  --btn-icon-svg-wh: 20px;

  --btn-icon-search-show: none;
  /* #endregion ---------- */

  /* #region ----- КНОПКА ССЫЛКА ТЕКСТ -----  */

  --link-line-anim-f-size-dropdown-info: var(--txt-12);

  --link-line-anim-constructor-show: flex;
  /* #endregion ---------- */
  /* #region ----- КНОПКА-КРУЖОК СО СТРЕЛКОЙ -----  */
  --arrow-circle: 40px;
  --arrow-circle-ourwork-onlydesktop: flex;
  /* #endregion ---------- */

  /* #region ----- ВЫПАДАЮЩЕЕ МЕНЮ ----- */
  --dropdown-transformX: translateX(0);

  --dropdown-position: fixed;
  --dropdown-inset: var(--header-main-height) auto auto auto;
  --dropdown-main-padding: 0 20px;

  --dropdown-minimal-price-f-size: var(--txt-13);
  --dropdown-minimal-price-j-content: start;
  --dropdown-header-border: var(--border);
  --dropdown-header-height: 80px;
  --dropdown-header-display: flex;
  --dropdown-header-block-mobile: none;
  --dropdown-header-block-mobile-height: 0;
  --dropdown-header-block-mobile-top-distance: 0;
  --dropdown-header-direction: row;
  --dropdown-header-gap: 0;
  --dropdown-header-block-info-display: flex;
  --dropdown-header-block-info-border: none;
  --dropdown-header-block-info-pad-bot: 0;
  /* ----- ВЫПАДАЮЩЕЕ КОЛОНКИ ----- */
  --dropdown-menu-display: grid;
  --dropdown-column-sections-w: clamp(230px, 17.3vw, 260px);
  --dropdown-column-subsections-w: clamp(210px, 16vw, 240px);
  --dropdown-column-border: var(--border);
  --dropdown-column-padding-top: 15px;
  --dropdown-column-width: auto;
  --dropdown-column-position: relative;
  --dropdown-column-transformX: translateX(0);
  --dropdown-column-inset: auto;

  --dropdown-info-display: flex;

  --dropdown-main-overflow-padd-bot: 0;
  --dropdown-main-overflow-gap: 0;
  --dropdown-categories-header-display: flex;
  --dropdown-categories-header-mobile-display: none;
  /* ----- ВЫПАДАЮЩЕЕ КОЛОНКИ КНОПКИ ----- */
  --dropdown-btn-f-size: var(--txt-14);
  --dropdown-btn-padding: 12px 15px 12px 20px;
  --dropdown-btn-border: none;

  --dropdown-catgories-panel-grid: repeat(2, minmax(0, 1fr));
  --dropdown-catgories-panel-grid-gap: 7px;
  --dropdown-btn-category-padding: 12px 20px;
  --dropdown-subsecions-padding: 15px 0;
  --dropdown-categories-padding: 10px 30px;
  /* #endregion ---------- */

  /* ----- MAIN BOX ----- */
  --main-box-padding: 60px 20px;
  --main-box-gap: 20px;
  --main-box-title: var(--txt-40);
  /* #endregion ---------- */
  /* ----- MAIN BOX PROMO----- */
  --main-promo-grid-column: minmax(0, 1.15fr) minmax(0, 0.85fr);
  --main-promo-gap: 30px;

  --main-promo-title-f-size: clamp(34px, 4.4vw, 80px);
  --main-promo-preview-max-w: 550px;
  --main-promo-preview-ratio: 1;
  --main-promo-preview-color-w: 36px;
  --main-promo-preview-color-h: 17px;

  --main-promo-preview-color-b-w: 42px;
  --main-promo-preview-color-b-h: 23px;
  --main-promo-preview-color-b-border: 1px solid var(--accent);
  --main-promo-other-col-basis: 160px;
  --main-promo-col-padding: 30px;
  --main-promo-col-left-gap: 45px;
  --main-promo-col-right-gap: 15px;
  --main-promo-buttons-gap: 30px;
  --main-promo-other-col-gap: 15px;
  --main-promo-other-gap: 15px;
  --main-promo-other-col-padding: 0 20px;
  /* #endregion ---------- */

  /* ----- MAIN CATALOG ----- */
  --main-catalog-grid-tmp-col: repeat(4, minmax(0, 1fr));
  --main-catalog-overflow: auto;
  --main-catalog-card-w: auto;
  /* #endregion ---------- */

  /* ----- MAIN CONSTRUCTOR ----- */
  --main-constructor-min-h: clamp(240px, 36vw, 640px);
  --main-constructor-title-f-size: clamp(20px, 4vw, 50px);
  --main-constructor-subtitle-f-size: clamp(13px, 1.1vw, 14px);
  --main-constructor-padding: clamp(20px, 6vw, 100px);
  --main-constructor-gap: clamp(15px, 2.5vw, 40px);

  --main-constructor-color-title: rgb(250, 250, 250);
  --main-constructor-color-subtitle: rgb(210, 210, 210);
  /* #endregion ---------- */

  /* ----- MAIN HOW ORDER ----- */
  --main-howorder-top-grid-tmp-col: repeat(4, 1fr);
  --main-howorder-top-col-padding: 20px;
  --main-howorder-top-col-border: var(--border);

  --main-howorder-bottom-grid-tmp-col: 2fr 1fr;
  --main-howorder-bottom-title-f-size: clamp(26px, 3.2vw, 40px);
  --main-howorder-bottom-title-f-ls: var(--txt-ls-4);
  --main-howorder-bottom-subtitle-f-size: var(--txt-14);
  --main-howorder-bottom-left-gap: 20px;
  --main-howorder-bottom-gap: 30px;
  --main-howorder-form-padding: 30px;
  /* #endregion ---------- */
  /* ----- MAIN OUR works ----- */
  --main-gallery-padding: 0 20px;
  --main-gallery-gap: 30px;
  --main-gallery-images: 450px;
  --main-gallery-images-img: 400px;
  --main-gallery-images-padding: 20px;
  /* #endregion ---------- */
  /* ----- MAIN partners ----- */
  --main-partners-flex-wrap: wrap;
  --main-partners-gap: 50px;
  --main-partners-padding: 40px 30px;
  --main-partners-justify-content: center;
  --main-partners-overflow-x: hidden;
  /* #endregion ---------- */

  /* ----- FOOTER ----- */
  --footer-margin: 0;
  --footer-top-padding: 30px 30px 43px 0;
  --footer-col-contacts: 0;
  --footer-top-grid-tmp-col: 2fr 1fr;
  --footer-col-contacts-ali-it: end;
  --footer-contacts-box-ali-it: end;

  --footer-col-slogan-f-size: var(--txt-36);

  --footer-center-padding: 30px;
  --footer-center-link-margin: 4px 0;
  --footer-center-link-size: var(--txt-13);
  /* #endregion ---------- */
}

:root.light {
  --theme-btn-bg: rgb(245, 245, 245);
  --theme-btn-bg-check: rgb(240, 240, 240);
  --theme-btn-bg-hover: rgb(250, 250, 250);

  --logo-sport4team-1: #181818;
  --logo-sport4team-2: #f0f0f0;

  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-active: var(--brand-800);

  --accent-text: var(--brand-700);

  --accent-mini: rgba(109, 74, 224, 0.08);

  --accent-soft: rgba(109, 74, 224, 0.12);
  --accent-fill: rgba(109, 74, 224, 0.22);
  --accent-ring: rgba(109, 74, 224, 0.35);

  --on-accent: #ffffff;

  --text: #181818;
  --text-secondary: #696969;
  --text-tertiary: #bbbbbb;
  --text-inverse: #f0f0f0;

  --svg: #181818;

  --border: 1px solid rgba(0, 0, 0, 0.1);
  --border-color: rgba(0, 0, 0, 0.1);

  --bg: rgb(240, 240, 240);
  --bg-second: rgb(245, 245, 245);

  --bg-inverse: #181818;

  --scroll-track: rgb(225, 225, 225);
  --scroll-thumb: rgb(150, 150, 150);
  --scroll-thumb-hover: rgb(110, 110, 110);

  /* #region -----ЧЕКБОКС-----  */
  --checkbox-border: rgba(0, 0, 0, 0.5);
  --checkbox-bg: rgb(250, 250, 250);
  --checkbox-bg-checked: #181818;
  /* #endregion ---------- */
  /* #region ----- КНОПКА ----- */
  --btn-bg: rgb(250, 250, 250);
  --btn-color: #181818;
  --btn-border: rgba(0, 0, 0, 0.3);
  --btn-border-hover: rgba(0, 0, 0, 0.7);

  --btn-color-inverse: rgb(250, 250, 250);
  --btn-bg-inverse: #181818;
  --btn-border-inverse: #181818;
  --btn-bg-inverse-hover: rgb(250, 250, 250);
  --btn-color-inverse-hover: #181818;

  --btn-accent-color: rgb(250, 250, 250);

  --btn-bg-accent-inverse-hover: rgb(250, 250, 250);

  --btn-dropdown-isActive: rgb(250, 250, 250);

  --btn-dropdown-mobile-svg: var(--accent);
  /* #endregion ---------- */
  /* #region ----- ТЕКСТ ----- */
  --text-input-bg: rgb(245, 245, 245);
  --text-input-bg-focus: rgb(250, 250, 250);
  /* #endregion ---------- */
  /* #region ----- КНОПКА-КРУЖОК СО СТРЕЛКОЙ -----  */
  --arrow-circle-border: rgba(0, 0, 0, 0.4);
  --arrow-circle-color: rgba(0, 0, 0, 0.4);
  --arrow-circle-bg: rgba(0, 0, 0, 0.05);
  /* #endregion ---------- */

  --brands-bg: #181818;
  
  /*ПОИСК*/
  --search-img-cross:0;
}

:root.dark {
  --theme-btn-bg: rgb(30, 30, 30);
  --theme-btn-bg-check: #181818;
  --theme-btn-bg-hover: rgb(40, 40, 40);

  --logo-sport4team-1: #f0f0f0;
  --logo-sport4team-2: #181818;

  --accent: var(--brand-400);
  --accent-hover: var(--brand-300);
  --accent-active: var(--brand-500);
  --accent-text: var(--brand-300);

  --accent-mini: rgba(154, 130, 255, 0.25);

  --accent-soft: rgba(154, 130, 255, 0.35);
  --accent-fill: rgba(154, 130, 255, 0.45);
  --accent-ring: rgba(154, 130, 255, 0.55);

  --text: rgb(230, 230, 230);
  --text-secondary: #bebebe;
  --text-tertiary: #666666;
  --text-inverse: #181818;

  --svg: rgb(230, 230, 230);

  --border: 1px solid rgba(255, 255, 255, 0.12);
  --border-color: rgba(255, 255, 255, 0.12);

  --bg: #181818;
  --bg-second: rgb(30, 30, 30);

  --bg-inverse: rgb(230, 230, 230);

  --scroll-track: rgb(32, 32, 32);
  --scroll-thumb: rgb(85, 85, 85);
  --scroll-thumb-hover: rgb(130, 130, 130);

  /* #region -----ЧЕКБОКС-----  */
  --checkbox-border: rgba(255, 255, 255, 0.5);
  --checkbox-bg: rgb(35, 35, 35);
  --checkbox-bg-checked: rgb(230, 230, 230);
  /* #endregion ---------- */

  /* #region ----- КНОПКА ----- */
  --btn-bg: rgb(40, 40, 40);
  --btn-color: rgb(230, 230, 230);
  --btn-border: rgba(255, 255, 255, 0.3);
  --btn-border-hover: rgba(255, 255, 255, 0.7);

  --btn-color-inverse: #181818;
  --btn-bg-inverse: rgb(230, 230, 230);
  --btn-border-inverse: rgb(230, 230, 230);
  --btn-bg-inverse-hover: rgb(40, 40, 40);
  --btn-color-inverse-hover: rgb(230, 230, 230);

  --btn-accent-color: #181818;

  --btn-bg-accent-inverse-hover: rgb(40, 40, 40);

  --btn-dropdown-isActive: rgb(230, 230, 230);

  --btn-dropdown-mobile-svg: var(--accent);

  /* #endregion ---------- */
  /* #region ----- ТЕКСТ ----- */
  --text-input-bg: rgb(30, 30, 30);
  --text-input-bg-focus: rgb(40, 40, 40);
  /* #endregion ---------- */
  /* #region ----- КНОПКА-КРУЖОК СО СТРЕЛКОЙ -----  */
  --arrow-circle-border: rgba(255, 255, 255, 0.4);
  --arrow-circle-color: rgba(255, 255, 255, 0.4);
  --arrow-circle-bg: rgba(255, 255, 255, 0.15);
  /* #endregion ---------- */

  --brands-bg: rgb(40, 40, 40);
  /*ПОИСК*/
  --search-img-cross:1;
}

@media (max-width: 1199px) {
  :root {
    --theme-z-index: 110;
    --header-main-z-index: 50;
    --theme-btn-wh: 30px;
    --theme-btn-icon-wh: 26px;
    --theme-top: 50px;

    /* #region ----- HEADER ----- */
    --logo-sport4team-w: 44px;
    --logo-sport4team-h: 44px;

    --header-main-grid-cols: 1fr auto;
    --header-main-center-show: none;
    --header-main-padding: 0 8px;
    --header-main-gap: 15px;
    --header-main-height: 60px;
    --header-main-right-gap: 0;
    --header-main-left-gap: 10px;
    /* #endregion ---------- */

    /* #region ----- КНОПКА ----- */
    --btn-height: 40px;
    --btn-padding: 0 20px;

    --btn-height-huge: 45px;
    --btn-padding-huge: 0 20px;

    --btn-svg-wh: 24px;
    --btn-svg-wh-huge: 28px;

    --btn-dropdown-desktop-show: none;
    --btn-dropdown-mobile-show: flex;
    --btn-dropdown-mobile-wh: 44px;

    /* #endregion ---------- */
    /* #region ----- КНОПКА-КРУЖОК СО СТРЕЛКОЙ -----  */
    --arrow-circle: 40px;
    --arrow-circle-ourwork-onlydesktop: none;
    /* #endregion ---------- */
    /* #region ----- КНОПКА ИКОНКА ----- */
    --btn-icon-wh: 45px;
    --btn-icon-svg-wh: 24px;

    --btn-icon-search-show: flex;
    /* #endregion ---------- */

    /* #region ----- КНОПКА ССЫЛКА ТЕКСТ -----  */

    --link-line-anim-f-size-dropdown-info: var(--txt-14);
    --link-line-anim-constructor-show: none;

    /* #endregion ---------- */

    /* #region ----- ВЫПАДАЮЩЕЕ МЕНЮ ----- */
    --dropdown-transformX: translateX(-100%);
    --dropdown-position: fixed;
    --dropdown-inset: 0;
    --dropdown-main-padding: 15px;

    --dropdown-minimal-price-f-size: var(--txt-15);
    --dropdown-minimal-price-j-content: center;
    --dropdown-header-display: none;
    --dropdown-header-border: none;
    --dropdown-header-height: auto;
    --dropdown-header-block-mobile: flex;
    --dropdown-header-block-mobile-height: 40px;
    --dropdown-header-block-mobile-top-distance: 65px;
    --dropdown-header-direction: column-reverse;
    --dropdown-header-block-info-display: grid;
    --dropdown-header-gap: 10px;
    --dropdown-header-block-info-border: var(--border);
    --dropdown-header-block-info-pad-bot: 25px;
    /* ----- ВЫПАДАЮЩЕЕ КОЛОНКИ ----- */
    --dropdown-menu-display: flex;
    --dropdown-column-border: none;
    --dropdown-column-padding-top: 0;
    --dropdown-column-width: 100%;
    --dropdown-column-position: absolute;
    --dropdown-column-transformX: translateX(-100%);
    --dropdown-column-inset: var(--dropdown-header-block-mobile-top-distance) 0
      0 0;

    --dropdown-info-display: none;

    --dropdown-main-overflow-padd-bot: 25px;
    --dropdown-main-overflow-gap: 20px;

    --dropdown-categories-header-display: none;
    --dropdown-categories-header-mobile-display: flex;
    /* ----- ВЫПАДАЮЩЕЕ КОЛОНКИ КНОПКИ ----- */
    --dropdown-btn-f-size: var(--txt-15);
    --dropdown-btn-padding: 15px 15px 15px 20px;
    --dropdown-btn-border: var(--border);

    --dropdown-catgories-panel-grid: 1fr;
    --dropdown-catgories-panel-grid-gap: 0;
    --dropdown-btn-category-padding: 15px;
    --dropdown-subsecions-padding: 0 15px 15px 15px;
    --dropdown-categories-padding: 0 15px 15px 15px;

    /* #endregion ---------- */

    /* ----- MAIN BOX ----- */
    --main-box-padding: 30px 20px 10px 20px;
    --main-box-gap: 20px;
    --main-box-title: var(--txt-28);
    /* #endregion ---------- */
    /* ----- MAIN BOX PROMO----- */
    --main-promo-grid-column: minmax(0, 1fr);
    --main-promo-title-f-size: clamp(34px, 7vw, 60px);
    --main-promo-preview-color-w: 44px;
    --main-promo-preview-color-h: 24px;
    --main-promo-preview-max-w: 520px;
    --main-promo-preview-color-b-w: 48px;
    --main-promo-preview-color-b-h: 28px;
    --main-promo-preview-color-b-border: 2px solid var(--accent);

    --main-promo-other-col-basis: 200px;
    --main-promo-col-padding: 0;
    --main-promo-col-left-gap: 25px;
    --main-promo-buttons-gap: 20px;
    --main-promo-other-col-gap: 0;
    --main-promo-other-gap: 5px;
    --main-promo-other-col-padding: 10px;
    /* #endregion ---------- */

    /* ----- MAIN CATALOG ----- */
    --main-catalog-grid-tmp-col: none;
    --main-catalog-overflow: hidden;
    --main-catalog-card-w: clamp(260px, 40vw, 360px);
    /* #endregion ---------- */

    /* ----- MAIN HOW ORDER ----- */
    --main-howorder-bottom-grid-tmp-col: 1fr 1fr;
    /* #endregion ---------- */
    /* ----- MAIN OUR works ----- */
    --main-gallery-padding: 0;
    --main-gallery-gap: 0;
    --main-gallery-images: 250px;
    --main-gallery-images-img: 250px;
    --main-gallery-images-padding: 0;
    /* #endregion ---------- */

    /* ----- MAIN partners ----- */
    --main-partners-flex-wrap: nowrap;
    --main-partners-gap: 20px;
    --main-partners-padding: 25px;
    --main-partners-justify-content: flex-start;
    --main-partners-overflow-x: auto;
    /* #endregion ---------- */

    /* ----- FOOTER ----- */
    --footer-margin: 30px;
    --footer-top-padding: 30px 0;

    --footer-col-contacts: 0 20px;
    --footer-top-grid-tmp-col: 1fr;
    --footer-col-contacts-ali-it: start;
    --footer-contacts-box-ali-it: start;

    --footer-col-slogan-f-size: clamp(16px, 2.5vw, 36px);

    --footer-center-padding: 20px 20px;
    --footer-center-link-margin: 8px 0;
    --footer-center-link-size: var(--txt-14);
    /* #endregion ---------- */
  }

  .main-catalog {
    grid-auto-flow: column;
    scroll-padding-left: 10px;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .main-constructor-onlydesktop {
    display: none;
  }

  .main-gallery-images {
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .main-gallery-images img {
    scroll-snap-align: start;
  }

  .dropdown-mobile-extra {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
  }
  .dropdown-mobile-extra .dropdown-minimal-price,
  .dropdown-mobile-extra .dropdown-header-block-info {
    flex: none;
  }
}

@media (min-width: 1200px) {
  .dropdown {
    min-height: 55vh;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
}

@media (max-width: 767px) {
  :root {
    --main-howorder-top-grid-tmp-col: repeat(2, 1fr);
    --main-howorder-top-col-padding: 15px 20px 15px 0;
    --main-howorder-top-col-border: none;

    --main-howorder-bottom-grid-tmp-col: 1fr;
    --main-howorder-bottom-title-f-ls: var(--txt-ls-2);
    --main-howorder-bottom-subtitle-f-size: var(--txt-13);
    --main-howorder-bottom-left-gap: 10px;
    --main-howorder-bottom-gap: 15px;
    --main-howorder-form-padding: 0;
  }
}

/* #endregion ========== */

/* #region ===== ОБЩЕЕ =====  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

button,
a,
input,
select,
textarea,
div,
[role='button'] {
  -webkit-tap-highlight-color: transparent;
}

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

body {
  font-family: var(--font-text);
  background-color: var(--bg-second);
}

.mini-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: 50%;
}

.clock-zero {
  font-size: 0.65em;
  vertical-align: super;
}

/* #endregion ========== */

/* #region ===== ЛОГО =====  */
.logo-sport4team {
  display: none;
  width: var(--logo-sport4team-w);
  height: var(--logo-sport4team-h);
  flex-grow: 0;
}

.logo-sport4team.desktop {
  display: block;
}

@media (max-width: 1199px) {
  .logo-sport4team.desktop {
    display: none;
  }

  .logo-sport4team.mobile {
    display: block;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --logo-sport4team-1: #f0f0f0;
    --logo-sport4team-2: #181818;
  }
}

.logo-sport4team-1 {
  fill: var(--logo-sport4team-1);
}

.logo-sport4team-2 {
  fill: var(--logo-sport4team-2);
}

/* #endregion ========== */

/* #region =====ОВЕРЛЕЙ===== */

.overlay {
  display: flex;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  inset: 0;
  pointer-events: none;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.overlay.isActive {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* #endregion ========== */

/* #region ===== ЭЛЕМЕНТЫ =====  */

/* #region ----- СКРОЛЛ -----  */

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--scroll-track);
  margin: 5px 0;
  width: 8px;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-track-hover);
}

::-webkit-scrollbar-button {
  display: none;
}

.main-catalog::-webkit-scrollbar,
.main-gallery-images::-webkit-scrollbar,
.main-partners::-webkit-scrollbar {
  display: none;
}

/* #endregion ----------  */

/* #region ----- КНОПКА -----  */

.btn-ui {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: var(--btn-padding);
  flex-shrink: 0;

  font-family: var(--font-title);
  font-size: var(--txt-13);
  font-weight: var(--txt-w-600);
  letter-spacing: var(--txt-ls-2);
  color: var(--btn-color);
  background-color: var(--btn-bg);
  gap: 10px;

  border: 1px solid var(--btn-border);
  border-radius: 6px;

  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  transition: transform 0.2s ease, border-color 0.3s ease, color 0.3s ease,
    background-color 0.3s ease;
}

.btn-ui.btn-ui-huge {
  height: var(--btn-height-huge);
  padding: var(--btn-padding-huge);
}

.btn-ui-svg {
  width: var(--btn-svg-wh);
  height: var(--btn-svg-wh);
  fill: currentColor;
}

.btn-ui-huge-svg {
  width: var(--btn-svg-wh-huge);
  height: var(--btn-svg-wh-huge);
  fill: currentColor;
}

.btn-ui.btn-inverse {
  color: var(--btn-color-inverse);
  background-color: var(--btn-bg-inverse);
  border-color: var(--btn-border-inverse);
}

.btn-ui.btn-accent-base,
.btn-ui.btn-accent-base-inverse,
.btn-ui.btn-dropdown {
  color: var(--btn-accent-color);
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-ui:not(.btn-dropdown):active {
  transform: scale(0.97);
}

.btn-ui.btn-dropdown {
  display: var(--btn-dropdown-desktop-show);
}

.btn-dropdown-mobile {
  display: var(--btn-dropdown-mobile-show);
  align-items: center;
  justify-content: center;
  width: var(--btn-dropdown-mobile-wh);
  height: var(--btn-dropdown-mobile-wh);

  border: none;
  background-color: transparent;
  transition: transform 0.2s ease;
}

.btn-dropdown-mobile-svg {
  width: var(--btn-dropdown-mobile-wh);
  height: var(--btn-dropdown-mobile-wh);
  fill: var(--btn-dropdown-mobile-svg);
}

.btn-dropdown-mobile:active {
  transform: scale(0.95);
}

.btn-ui-back-mobile {
  padding: 15px 15px 15px 10px;
  gap: 5px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.btn-ui-closed-mobile {
  padding: 15px 10px;
}

.btn-ui-back-mobile.isActive {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

/* #endregion ----------  */

/* #region -----КНОПКА-КРУЖОК СО СТРЕЛКОЙ-----  */

.arrow-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--arrow-circle);
  height: var(--arrow-circle);
  border: 1px solid var(--arrow-circle-border);
  background-color: var(--arrow-circle-bg);
  color: var(--arrow-circle-color);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s ease, color 0.3s ease, border-color 0.3s ease,
    background 0.3s ease;
}

.arrow-circle svg {
  width: var(--svg-26);
  height: var(--svg-26);
  fill: currentColor;
}

.arrow-circle:active {
  transform: scale(0.97);
}

.arrow-circle.arrow-circle-ourwork-onlydesktop {
  display: var(--arrow-circle-ourwork-onlydesktop);
}

/* #endregion ----------  */

/* #region ----- КНОПКА ИКОНКА -----  */

.btn-icon {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon-wh);
  height: var(--btn-icon-wh);
  color: var(--text);
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: color 0.3s ease;
}

.btn-icon-svg {
  width: var(--btn-icon-svg-wh);
  height: var(--btn-icon-svg-wh);
  fill: currentColor;
}

.btn-icon::before {
  content: '';
  position: absolute;
  width: var(--btn-icon-wh);
  height: var(--btn-icon-wh);
  background-color: var(--accent-soft);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.btn-icon-search {
  display: var(--btn-icon-search-show);
}

/* #endregion ----------  */

/* #region ----- КНОПКА ССЫЛКА ТЕКСТ -----  */

.link-line-anim {
  display: flex;
  position: relative;
  cursor: pointer;
  align-items: center;

  gap: 10px;
  padding: 0 4px;
  flex-shrink: 0;
  font-family: var(--font-title);
  color: var(--text);
  justify-self: start;
  background-color: transparent;
  border: none;
  transition: color 0.2s ease;
}

.link-line-anim::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -3px;
  left: 0;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease;
}

.link-line-anim.link-line-anim-constructor {
  display: var(--link-line-anim-constructor-show);
  font-size: var(--txt-13);
  letter-spacing: var(--txt-ls-2);
}

.link-line-anim-dropdown-header-info {
  font-size: var(--link-line-anim-f-size-dropdown-info);
  letter-spacing: var(--txt-ls-1);
}

.link-line-anim-dropdown-watch-all {
  color: var(--accent);
  font-size: var(--txt-12);
  letter-spacing: var(--txt-ls-1);
}

.link-line-anim-dropdown-watch-all svg {
  width: var(--svg-18);
  height: var(--svg-18);
  fill: currentColor;
}

.link-line-anim-dropdown-watch-all[href='#'] {
  pointer-events: none;
  color: var(--text-secondary);
}

.link-line-anim-main-box-promo {
  font-size: var(--txt-14);
  letter-spacing: var(--txt-ls-2);
}

.link-line-anim-main-box-promo svg {
  width: var(--svg-22);
  height: var(--svg-22);
  fill: currentColor;
}

.link-line-anim-marking-arrow {
  color: var(--accent);
  font-size: var(--txt-16);
  letter-spacing: var(--txt-ls-1);
}

.link-line-anim-marking-arrow svg {
  width: var(--svg-20);
  height: var(--svg-20);
  fill: currentColor;
}

.link-line-anim-footer-contacts {
  color: var(--accent) !important;
  font-size: var(--txt-13);
  letter-spacing: var(--txt-ls-1);
}

.link-line-anim-footer-center-link {
  font-size: var(--footer-center-link-size);
  letter-spacing: var(--txt-ls-1);
  margin: var(--footer-center-link-margin);
  color: var(--text-secondary);
}
/* увеличиваем зону нажатия, не меняя вид */
.link-line-anim-footer-center-link::after {
  content: '';
  position: absolute;
  inset: -5px -4px;
}
/* #endregion ----------  */

/* #region -----ПОЛЕ ВВОДА ТЕКСТА-----  */

.text-input {
  display: flex;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: var(--border);
  background: var(--text-input-bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--txt-13);
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.text-input:focus {
  border-color: var(--accent);
  background: var(--text-input-bg-focus);
  box-shadow: 0 0 0 2px var(--accent-fill);
}

.text-area {
  height: 100px;
  padding: 7px;
  resize: none;
}

.text-input-search {
  height: 40px;
}

/* #endregion ----------  */

/* #region ----- ЧЕКБОКС -----  */
.checkbox-label {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--checkbox-bg);
  border: 1px solid var(--checkbox-border);
  cursor: pointer;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.checkbox-label svg {
  width: 18px;
  height: 18px;
  fill: var(--checkbox-bg);
}

.checkbox-label:has(input:checked) {
  background-color: var(--checkbox-bg-checked);
}

.checkbox-label:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--accent);
}

/* #endregion ----------  */

/* #endregion ========== */

/* #region ===== ТЕКСТОВАЯ СТРАНИЦА ===== */
 
.info-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: var(--desktop-container);
  margin: 0 auto;
  padding: var(--main-box-padding);
}
 
/* шапка страницы */
.info-head {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-bottom: 30px;
  border-bottom: var(--border);
}
 
.info-title {
  font-family: var(--font-title);
  font-size: clamp(30px, 5vw, 60px);
  font-weight: var(--txt-w-600);
  letter-spacing: var(--txt-ls-4);
  line-height: 1.05;
  color: var(--text);
  text-wrap: balance;
}
 
.info-lead {
  max-width: 65ch;
  font-size: var(--txt-16);
  line-height: 1.6;
  color: var(--text-secondary);
}
 
/* оглавление слева + текст справа */
.info-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
 
.info-toc {
  display: flex;
  position: sticky;
  top: calc(var(--header-main-height) + 20px);
  flex-direction: column;
  border-left: var(--border);
}
 
.info-toc a {
  margin-left: -1px;
  padding: 8px 16px;
  border-left: 1px solid transparent;
  font-family: var(--font-title);
  font-size: var(--txt-14);
  letter-spacing: var(--txt-ls-1);
  color: var(--text-secondary);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
 
.info-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
 
/* раздел */
.info-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 35px 0;
  border-bottom: var(--border);
  scroll-margin-top: calc(var(--header-main-height) + 20px);
}
 
.info-section:first-child {
  padding-top: 0;
}
 
.info-section:last-child {
  border-bottom: none;
}
 
.info-section h2 {
  font-family: var(--font-title);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: var(--txt-w-600);
  letter-spacing: var(--txt-ls-2);
  color: var(--text);
}
 
.info-section h3 {
  font-family: var(--font-title);
  font-size: var(--txt-18);
  font-weight: var(--txt-w-600);
  letter-spacing: var(--txt-ls-1);
  color: var(--accent);
}
 
.info-section p,
.info-section li {
  max-width: 75ch;
  font-size: var(--txt-15);
  line-height: 1.7;
  color: var(--text-secondary);
}
 
.info-section strong {
  font-weight: var(--txt-w-600);
  color: var(--text);
}
 
.info-section p a,
.info-section li a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
 
.info-small {
  font-size: var(--txt-13) !important;
}
 
/* список с точками */
.info-section ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
 
.info-section ul li {
  position: relative;
  padding-left: 24px;
}
 
.info-section ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
}
 
/* шаги заказа (тут реально последовательность, поэтому цифры) */
.info-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  counter-reset: step;
}
 
.info-steps li {
  position: relative;
  padding: 6px 0 0 56px;
  counter-increment: step;
}
 
.info-steps li::before {
  content: counter(step);
  display: grid;
  position: absolute;
  left: 0;
  top: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-ring);
  background-color: var(--accent-mini);
  font-family: var(--font-title);
  font-size: var(--txt-15);
  font-weight: var(--txt-w-600);
  color: var(--accent);
}
 
.info-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17.5px;
  top: 42px;
  bottom: -14px;
  width: 1px;
  background-color: var(--border-color);
}
 
/* карточки */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
 
.info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 25px;
  border: var(--border);
  border-radius: 15px;
  background-color: var(--bg);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
 
.info-card-title {
  font-family: var(--font-title);
  font-size: var(--txt-18);
  font-weight: var(--txt-w-600);
  letter-spacing: var(--txt-ls-1);
  color: var(--accent);
}
 
/* важная плашка */
.info-note {
  max-width: 75ch;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background-color: var(--accent-mini);
}
 
.info-note p {
  color: var(--text);
}
 
/* крупная цена (коммерческие предложения) */
.info-price {
  font-family: var(--font-title);
  font-size: clamp(34px, 5vw, 50px);
  font-weight: var(--txt-w-700);
  letter-spacing: var(--txt-ls-2);
  line-height: 1;
  color: var(--accent);
}
 
/* реквизиты */
.info-facts {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px 20px;
  max-width: 75ch;
  padding: 20px 25px;
  border: var(--border);
  border-radius: 15px;
  background-color: var(--bg);
}
 
.info-facts dt {
  font-size: var(--txt-14);
  color: var(--text-secondary);
}
 
.info-facts dd {
  font-family: var(--font-title);
  font-size: var(--txt-14);
  letter-spacing: var(--txt-ls-1);
  color: var(--text);
  overflow-wrap: anywhere;
}
/* #endregion ===== ===== */
 


/* #region ********** MINI OPTIONS ********** */

.theme {
  display: none;
  position: absolute;
  background-color: var(--bg);
  top: var(--theme-top);
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: 10px;
  border: var(--border);
  z-index: var(--theme-z-index);
}

.theme-btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-btn-bg);
  width: var(--theme-btn-wh);
  height: var(--theme-btn-wh);
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.theme-btn input {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
}

.theme-btn-icon {
  width: var(--theme-btn-icon-wh);
  height: var(--theme-btn-icon-wh);
  fill: var(--svg);
}

.theme-btn:has(input:checked) {
  pointer-events: none;
  cursor: default;
  background-color: var(--theme-btn-bg-check);
  border-color: var(--accent);
}

.theme-btn:hover {
  background-color: var(--theme-btn-bg-hover);
}

.theme.isActive {
  display: flex;
}

/* #endregion ******************** */

/* #region ===== ХЕДЕР =====  */
.header {
  display: flex;
  position: sticky;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  background-color: var(--bg);
  z-index: 1000;
  top: -1px;
  padding-top: 1px;
  border-bottom: var(--border);
}

.header-main {
  display: grid;
  position: relative;
  grid-template-columns: var(--header-main-grid-cols);
  gap: 15px;
  width: 100%;
  max-width: var(--desktop-container);
  height: var(--header-main-height);

  margin: 0 auto;
  padding: var(--header-main-padding);
  z-index: var(--header-main-z-index) !important;
}

.header-main-column {
  display: flex;
  align-items: center;
  gap: var(--header-main-gap);
}

.header-main-column.left {
  gap: var(--header-main-left-gap);
}

.header-main-column.center {
  display: var(--header-main-center-show);
  position: relative;
  width: 100%;
  padding: 0 15px;
  z-index: 2500;
}

.header-main-column.right {
  justify-content: end;
  gap: var(--header-main-right-gap);
}
/* #region ===== TILDA ПОИСК ===== */

.t-site-search-close,
.t-site-search-loader{
    filter: invert(var(--search-img-cross));
}

.t-site-search-pu .t-title{
    color:var(--text) !important;
}


/*скрытие ненужного текста*/
.t-site-search-dm__result__title.t-descr{
    font-family:var(--font-title) !important;
    font-size:var(--txt-16) !important;
    color:var(--text) !important;
    letter-spacing:var(--txt-ls-1) !important;
    font-weight:var(--txt-w-500) !important;
}
.t-site-search-dm__result__body.t-text{
    font-size:var(--txt-13) !important;
    color:var(--text-secondary) !important;
    font-weight:var(--txt-w-400) !important;
}

.t-site-search-dm__result__body.t-text b{
    color:var(--accent) !important;
}

.t-site-search-dm__result__title.t-text{
    font-family:var(--font-title) !important;
    font-size:var(--txt-18) !important;
    color:var(--text) !important;
    letter-spacing:var(--txt-ls-1) !important;
    font-weight:var(--txt-w-600) !important;
}


.t-site-search-input{
   width:100%;
}

.text-input.t838__input.t-input{
    height:40px;
}

.t-site-search-close,
.t-site-search-loader{
    right:25px !important;
}

.t-site-search-dm{
    max-width: 100% !important;
    border-radius:15px;
    border: var(--border) !important;
    background: var(--bg) !important;
}

.t-site-search-popup t-width t-width_8,
.t-search-widget__popup{
    background: var(--bg) !important;
}

.t-site-search-dm__thubmnail,
.t-search-widget__result_product-img{
    border:none !important;
}

.t-site-search-dm__result__product{
    align-items:center;
    padding:5px 10px;
    border-radius:15px;
    transition: background 0.3s ease;
}

.t-site-search-dm__result__product:hover {
  background: var(--accent-mini);
}

.t-site-search-dm__result__product_img,
.t-search-widget__result_product-img{
  border-radius:10px;
  border:var(--border) !important;
}

.t-site-search-dm__result__product_title.t-name_xs,
.t-search-widget__result_product-title.t-name.t-name_xs{
    font-family:var(--font-title) !important;
    font-size:var(--txt-15) !important;
    color:var(--text) !important;
    letter-spacing:var(--txt-ls-1);
    font-weight:var(--txt-w-600) !important;
}

.t-site-search-dm__result__product_descr.t-descr.t-descr_xs,
.t-search-widget__result_product-desc.t-descr.t-descr_xs{
   font-family:var(--font-text) !important;
    font-size:var(--txt-13) !important;
    color:var(--text-secondary) !important;
    font-weight:var(--txt-w-400) !important; 
    opacity: 1 !important;
}

.t-site-search-dm__result__product_descr b,
.t-search-widget__result_product-desc.t-descr.t-descr_xs b{
    color:var(--accent) !important;
}

.t-site-search-dm__result__product_price.t-descr.t-descr_xs,
.t-search-widget__result_product-price.t-descr.t-descr_xs{
    font-family:var(--font-title) !important;
    font-size:var(--txt-15) !important;
    letter-spacing:var(--txt-ls-1) !important;
    color:var(--accent) !important;
    font-weight:var(--txt-w-600) !important;
}

.t-site-search-dm .t-site-search-dm__allresultslink.t-descr {
  font-family: var(--font-title) !important;
  font-size: var(--txt-13) !important;
  letter-spacing: var(--txt-ls-1) !important;
  font-weight: var(--txt-w-600) !important;
  color: var(--accent) !important;
  text-decoration:none !important;
  transition: color 0.3s ease;
}

.t-site-search-dm .t-site-search-dm__allresultslink.t-descr:hover {
  color: var(--accent-hover) !important;
  text-decoration:underline !important;
}

/* затемнение за попапом */
/* само окно */
.t-site-search-popup__background .t-site-search-popup {
  background: var(--bg) !important;
  border: var(--border) !important;
  border-radius: 15px;
  color: var(--text) !important;
}

/* линия над пагинацией (у неё inline opacity, цвет красим тут) */
.t-site-search-popup hr {
  border: none;
  border-top: var(--border) !important; ;
  opacity:1 !important;
}

/* пагинация */
.t-site-search-popup .t-site-search-pu__pagination-button,
.t-text.t-search-widget__pagination-item{
  font-family: var(--font-title) !important;
  font-size: var(--txt-13) !important;
  color: var(--text-secondary) !important;
  border-radius:6px;
  border:var(--border);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.t-site-search-popup .t-site-search-pu__pagination-button:hover,
.t-text.t-search-widget__pagination-item:hover{
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background:var(--accent-mini) !important;
}

.t-site-search-popup .t-site-search-pu__pagination-button.t-site-search-pu__pagination-active,
.t-text.t-search-widget__pagination-item.t-search-widget__pagination-active{
  color: var(--text-inverse) !important;
  border-color: var(--accent) !important;
  font-weight: var(--txt-w-700) !important;
  background:var(--accent);
  opacity:1 !important;
}

/* ===== МОБИЛКА: ПОИСК НА ВСЮ ШИРИНУ + КРЕСТИК СПРАВА ===== */

.t985__widgetheader {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  height: 100px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  background:var(--bg) !important;
  border-bottom:var(--border) !important;
}


/* контейнер растягиваем */
.t985__widgetheader .t985__inputcontainer {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap:10px !important;
}

/* убиваем t-col_8 и t-prefix_2 */
.t985__widgetheader .t-search-widget__inputcontainer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* крестик справа, в потоке */
.t985__widgetheader .t985__close-icon {
display:flex;
align-items:center;
justify-content: center;
  position: static !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  border:var(--border) !important;
  border-radius:8px;
}

/* лупа и лоадер в поле */
.t985__search-icon circle,
.t985__search-icon line,
.t985__loading-icon path {
  stroke: var(--text-secondary) !important;
}

/* очистить поле (маленький крестик) и закрыть попап (большой справа) */
.t985__clear-icon path,
.t985__close-icon path {
  stroke: var(--svg) !important;
}

.t985__blockinput.t-search-widget__blockinput{
    border:none !important;
}

.t985__input.t-search-widget__input.t-input{
    color:var(--text) !important;
    font-family:var(--font-text) !important;
    border-radius:15px !important;
    border:var(--border) !important;
    padding: 0 40px !important;
    background:var(--text-input-bg) !important;
}

.t985__clear-icon.t-search-widget__clear-icon.t-search-widget__clear_show{
    position:absolute;
    right:35px !important;
    width:28px !important;
    height:28px !important;
    background:var(--bg-inverse) !important;
}

.t985__clear-icon svg path {
  stroke: var(--text-inverse) !important;
}

.t-container.t-search-widget__query-result.t-descr.t-opacity_50{
    color:var(--text) !important;;
    font-family:var(--font-title) !important;;
    font-size:var(--txt-16) !important;;
}

.t-search-widget__pagination{
    gap:5px;
}

.t-search-widget__loadmore-btn.t-btn.t-btn_sm{
    background:var(--accent) !important;
    color:var(--text-inverse) !important;
    font-family:var(--font-title) !important;
    font-size:var(--txt-16);
    font-weight:var(--txt-w-600);
    border-radius:6px !important;
}

.t-search-widget__pagination-next svg path {
  stroke: var(--svg) !important;
}

.t-search-widget__pagination-button svg path {
  stroke: var(--svg) !important;
}

/* иконка "ничего не найдено" */
.t-search-widget__notfound-img svg path {
  fill: var(--accent) !important;
}

/* текст "Ничего не найдено" */
.t-search-widget__notfound .t-search-widget__result {
  font-family: var(--font-title) !important;
  font-size: var(--txt-14) !important;
  letter-spacing: var(--txt-ls-1) !important;
  color: var(--text-secondary) !important;
  text-align: center;
}


/* #endregion ========== */







/* #region ===== ВЫПАДАЮЩЕЕ МЕНЮ =====  */

.dropdown {
  display: flex;
  position: var(--dropdown-position);
  flex-direction: column;
  width: 100%;
  inset: var(--dropdown-inset);
  z-index: 100;
  background-color: var(--bg);
  flex-shrink: 0;
  transform: var(--dropdown-transformX);

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition: transform 0.35s ease, visibility 0.35s ease, opacity 0.35s ease;
}

.dropdown.isOpen {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.dropdown-main {
  display: flex;
  flex-direction: column;
  max-width: var(--desktop-container);
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  padding: var(--dropdown-main-padding);
}

.dropdown-header {
  display: var(--dropdown-header-display);
  flex-direction: var(--dropdown-header-direction);
  gap: var(--dropdown-header-gap);
  width: 100%;
  height: var(--dropdown-header-height);
  border-bottom: var(--dropdown-header-border);
}

.dropdown-minimal-price {
  display: flex;
  flex: 0.5;
  align-items: center;
  justify-content: var(--dropdown-minimal-price-j-content);
  font-family: var(--font-title);
  font-size: var(--dropdown-minimal-price-f-size);
  letter-spacing: var(--txt-ls-1);
  color: var(--text-secondary);
}

.dropdown-header-mobile {
  display: var(--dropdown-header-block-mobile);
  width: 100%;
  align-items: center;
  justify-content: space-between;
  z-index: 40;
  background-color: var(--bg);
}

.dropdown-header-block-info {
  display: var(--dropdown-header-block-info-display);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  flex: 0.5;
  align-items: center;
  justify-content: end;
  border-block: var(--dropdown-header-block-info-border);
  padding: var(--dropdown-header-block-info-pad-bot) 0;
}

.dropdown-main-overflow {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--dropdown-main-overflow-gap);
  padding-bottom: var(--dropdown-main-overflow-padd-bot);
}

/* #region ----- DROPDOWN КОЛОНКИ -----  */

.dropdown-menu {
  display: var(--dropdown-menu-display);
  flex-direction: column;
  width: 100%;
  grid-template-columns:
    var(--dropdown-column-sections-w) var(--dropdown-column-subsections-w)
    minmax(0, 1fr) 340px;
}

.dropdown-menu.noSub {
  grid-template-columns: var(--dropdown-column-sections-w) minmax(0, 1fr) 340px;
}

.dropdown-menu.noSub .dropdown-subsections {
  display: none;
}

.dropdown-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: var(--dropdown-column-border);
  padding-top: var(--dropdown-column-padding-top);
  width: var(--dropdown-column-width);
  overflow-y: auto;
  background-color: var(--bg);

  inset: var(--dropdown-column-inset);
  position: var(--dropdown-column-position);
  transform: var(--dropdown-column-transformX);
  transition: transform 0.3s ease;
}

.dropdown-sections {
  z-index: 20;
  transform: translateX(0);
  padding: var(--dropdown-subsecions-padding);
}

.dropdown-subsections {
  z-index: 30;
  padding: var(--dropdown-subsecions-padding);
}

.dropdown-categories {
  z-index: 40;
  padding: var(--dropdown-categories-padding);
}

.dropdown-column.dropdown-info {
  display: var(--dropdown-info-display);
  flex-direction: column;
  padding: 20px;
}

.dropdown-subsections-panel {
  display: none;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.dropdown-categories-panel {
  display: none;
  grid-template-columns: var(--dropdown-catgories-panel-grid);
  column-gap: 30px;
  row-gap: var(--dropdown-catgories-panel-grid-gap);
}

.dropdown-subsections-panel.isActive {
  display: flex;
}

.dropdown-categories-panel.isActive {
  display: grid;
}

.dropdown-subsections.isOpen,
.dropdown-categories.isOpen {
  transform: translate(0);
}

.dropdown-categories-header {
  display: var(--dropdown-categories-header-display);
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 10px 15px 10px;
  margin-bottom: 10px;
  align-items: center;
  gap: 15px;
  justify-content: space-between;
  border-bottom: var(--border);
}

.dropdown-categories-header-title {
  font-family: var(--font-title);
  font-size: var(--txt-30);
  font-weight: var(--txt-w-600);
  letter-spacing: var(--txt-ls-2);
  color: var(--text);
}

.dropdown-categories-header-mobile {
  display: var(--dropdown-categories-header-mobile-display);
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-family: var(--font-title);
}
.dropdown-categories-header-mobile-link {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
}

.dropdown-categories-header-mobile-link svg {
  width: var(--svg-26);
  height: var(--svg-26);
  fill: currentColor;
}

.dropdown-categories-header-mobile-link[href='#'] {
  display: none;
}

.dropdown-info-preview {
  display: flex;
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 15px;
  width: 100%;
  border: var(--border);
  overflow: hidden;
  margin-bottom: 20px;
  user-select: none;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.dropdown-info-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dropdown-info-title {
  font-family: var(--font-title);
  font-size: var(--txt-18);
  color: var(--text);
  letter-spacing: var(--txt-ls-1);
  font-weight: var(--txt-w-600);
  margin-bottom: 6px;
  transition: color 0.5s ease;
}

.dropdown-info-subtitle {
  font-size: var(--txt-13);
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.dropdown-info-description {
  font-size: var(--txt-13);
  color: var(--text-secondary);
}

.dropdown-info:hover .dropdown-info-preview {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.dropdown-info:hover .dropdown-info-title {
  color: var(--accent);
}

/* #endregion ----------  */

/* #region ----- DROPDOWN КНОПКИ СЕКЦИИ , САБСЦКЦИИ, КАТЕГОРИЙ -----  */

.dropdown-btn {
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: var(--dropdown-btn-padding);
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-title);
  letter-spacing: var(--txt-ls-1);
  font-size: var(--dropdown-btn-f-size);
  font-weight: var(--txt-w-600);

  border-bottom: var(--dropdown-btn-border);

  transition: background 0.3s ease, color 0.3s ease;
}

.dropdown-btn::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 0;
  left: 0;
  background-color: var(--accent);
  transition: height 0.3s ease;
}

.dropdown-btn.isActive {
  background-color: var(--accent-mini);
  color: var(--accent);
}

.dropdown-btn.isActive::before {
  height: 70%;
}

.dropdown-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform 0.5s ease;
}

.dropdown-btn.isActive svg {
  transform: translateX(5px);
}

.dropdown-btn-category {
  display: flex;
  break-inside: avoid;
  align-items: center;
  width: 100%;
  padding: var(--dropdown-btn-category-padding);
  color: var(--text);
  border-bottom: var(--border);

  font-family: var(--font-title);
  font-size: var(--dropdown-btn-f-size);
  font-weight: var(--txt-w-400);
  letter-spacing: var(--txt-ls-1);

  cursor: pointer;

  transition: color 0.3s ease, border-color 0.3s ease;
}

.dropdown-btn-category span {
  transition: transform 0.3s ease;
}

/* #endregion ----------  */

/* #endregion ========== */

/* #region ===== MAIN ===== */

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.main-box {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: var(--main-box-padding);
  width: 100%;
  max-width: var(--desktop-container);
  gap: var(--main-box-gap);
  /*overflow: hidden;*/
}

.main-box-marking {
  display: flex;
  gap: 10px;
  align-items: center;

  font-family: var(--font-title);
  font-size: var(--txt-13);
  letter-spacing: var(--txt-ls-1);
  color: var(--text-secondary);
}

.main-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.main-box-title {
  font-size: var(--main-box-title);
  font-family: var(--font-title);
  letter-spacing: var(--txt-ls-4);
  font-weight: var(--txt-w-700);
  color: var(--text);
}

.main-box-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

/* #region ----- MAIN PROMO -----  */

.main-promo {
  display: grid;
  grid-template-columns: var(--main-promo-grid-column);
  gap: var(--main-promo-gap);
  width: 100%;
  min-height: 0;
}

.main-promo-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--main-promo-col-padding);
}

.main-promo-col-left {
  gap: var(--main-promo-col-left-gap);
  justify-content: center;
}

.main-promo-col-right {
  align-items: center;
  justify-content: center;
  gap: var(--main-promo-col-right-gap);
  min-width: 0;
}

.main-promo-title {
  font-family: var(--font-title);
  font-size: var(--main-promo-title-f-size);
  letter-spacing: var(--txt-ls-4);
  font-weight: var(--txt-w-600);
  color: var(--text);
  line-height: 1;
}

.main-promo-subtitle {
  font-size: var(--txt-14);
  color: var(--text-secondary);
  letter-spacing: var(--txt-ls-1);
}

.main-promo-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--main-promo-buttons-gap);
  align-items: center;
}

.main-promo-other {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: var(--main-promo-other-gap);
}

.main-promo-other-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--main-promo-other-col-basis);
  gap: var(--main-promo-other-col-gap);
  padding: var(--main-promo-other-col-padding);
}

.main-promo-other-col-title {
  font-size: var(--txt-18);
  font-family: var(--font-title);
  font-weight: var(--txt-w-500);
  color: var(--accent);
  letter-spacing: var(--txt-ls-1);
}

.main-promo-other-col-subtitle {
  font-size: var(--txt-13);
  color: var(--text-secondary);
  letter-spacing: var(--txt-ls-1);
}

.main-promo-preview {
  width: 100%;
  max-width: var(--main-promo-preview-max-w);
  aspect-ratio: var(--main-promo-preview-ratio);
  border-radius: 15px;
  border: var(--border);
  background-color: var(
    --accent-mini
  ); /* пока картинка грузится, блока не видно как дырки */
  overflow: hidden;
  user-select: none;
}
.main-promo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-promo-preview-colors {
  display: flex;
  gap: 15px;
  align-items: center;
}

.main-promo-preview-color {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: var(--main-promo-preview-color-w);
  height: var(--main-promo-preview-color-h);
  border-radius: 6px;
  border: var(--border);

  cursor: pointer;

  transition: transform 0.3s ease;
}

.main-promo-preview-color[data-promo-color='0'] {
  background-color: black;
}
.main-promo-preview-color[data-promo-color='1'] {
  background-color: green;
}
.main-promo-preview-color[data-promo-color='2'] {
  background-color: red;
}
.main-promo-preview-color[data-promo-color='3'] {
  background-color: orange;
}
.main-promo-preview-color[data-promo-color='4'] {
  background-color: turquoise;
}

.main-promo-preview-color::before {
  content: '';
  position: absolute;
  width: var(--main-promo-preview-color-b-w);
  height: var(--main-promo-preview-color-b-h);
  border-radius: 8px;
  border: var(--main-promo-preview-color-b-border);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.main-promo-preview-color.isActive {
  transform: translateY(0);
  pointer-events: none;
  cursor: default;
}

.main-promo-preview-color.isActive::before {
  opacity: 1;
}

/* #endregion ----------  */

/* #region ----- MAIN CATALOG -----  */

.main-catalog {
  display: grid;
  position: relative;
  grid-template-columns: var(--main-catalog-grid-tmp-col);
  grid-auto-columns: var(--main-catalog-card-w);

  width: 100%;
  padding: 10px;
  gap: 20px;
  overflow: var(--main-catalog-overflow);
  overflow-x: auto;
}

.main-catalog-card {
  display: flex;
  position: relative;
  aspect-ratio: 4/3;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 15px;
  padding: 20px;
  scroll-snap-align: start;
  color: rgb(250, 250, 250);
  transition: background 1s ease, color 0.3s ease, border-color 0.3s ease;
}

.main-catalog-card-img {
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 15px;
}

.main-catalog-card-img img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  filter: brightness(0.6);
  user-select: none;
  z-index: 0;
  transition: transform 0.5s ease, filter 0.3s ease, opacity 0.3s ease;
}

.main-catalog-card-title {
  position: relative;
  font-family: var(--font-title);
  font-size: var(--txt-20);
  letter-spacing: var(--txt-ls-2);
  font-weight: var(--txt-w-500);
  z-index: 1;
}

.main-catalog-card-bottom {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.main-catalog-card-subtitle {
  font-size: var(--txt-14);
  letter-spacing: var(--txt-ls-1);
}

.main-catalog-card svg {
  width: var(--svg-24);
  height: var(--svg-24);
  fill: currentColor;
  transition: transform 0.5s ease;
}

/* #endregion ----------  */

/* #region ----- MAIN BRANDS -----  */

.main-brands {
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 140px;
  border-radius: 20px;
  background-color: var(--brands-bg);
}

.main-brands::before,
.main-brands::after {
  content: '';
  position: absolute;

  width: 200px;
  height: 200px;
  background: var(--accent);
  filter: blur(100px);

  pointer-events: none;
  z-index: -1;
}

.main-brands::before {
  left: -120px;
}

.main-brands::after {
  right: -120px;
}

.main-brands-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 40px;
  padding-right: 40px;
  animation: main-brands-move 60s linear infinite;
}

.main-brands img {
  height: auto;
  width: auto;
  max-height: 60px;
  max-width: 100px;
  flex-shrink: 0;
  user-select: none;
  filter: grayscale(1) invert(1);
  opacity: 0.8;
}

@keyframes main-brands-move {
  to {
    transform: translateX(-100%);
  }
}

/* #endregion ----------  */

/* #region ----- MAIN CONSTRUCTOR -----  */

.main-constructor {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-height: var(--main-constructor-min-h);
  padding: 30px var(--main-constructor-padding);
  background-color: #181818;
  border-radius: 20px;
  gap: var(--main-constructor-gap);
  justify-content: center;
  align-items: start;
  overflow: hidden;
}

.main-constructor img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.05;
  z-index: 0;
  user-select: none;
}

.main-constructor-title {
  position: relative;
  font-family: var(--font-title);
  font-size: var(--main-constructor-title-f-size);
  font-weight: var(--txt-w-600);
  color: var(--main-constructor-color-title);
  letter-spacing: var(--txt-ls-2);
  z-index: 1;
  text-wrap: balance;
}

.main-constructor-subtitle {
  position: relative;
  font-size: var(--main-constructor-subtitle-f-size);
  letter-spacing: var(--txt-ls-1);
  color: var(--main-constructor-color-subtitle);
  z-index: 2;
  max-width: 60ch;
}

/* #endregion ----------  */

/* #region ----- MAIN HOW ORDER -----  */

.main-howorder {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  gap: 30px;
}

.main-howorder-top {
  display: grid;
  grid-template-columns: var(--main-howorder-top-grid-tmp-col);
}

.main-howorder-top-col {
  display: flex;
  flex-direction: column;
  border-right: var(--main-howorder-top-col-border);
  padding: var(--main-howorder-top-col-padding);
}

.main-howorder-top-col:last-child {
  border-right: none;
}

.main-howorder-top-number {
  font-family: var(--font-title);
  font-size: var(--txt-18);
  letter-spacing: var(--txt-ls-1);
  font-weight: var(--txt-w-600);
  color: var(--accent);
  margin-bottom: 20px;
}

.main-howorder-top-title {
  font-family: var(--font-title);
  font-size: var(--txt-16);
  font-weight: var(--txt-w-500);
  letter-spacing: var(--txt-ls-2);
  color: var(--text);
  margin-bottom: 10px;
}

.main-howorder-top-subtitle {
  font-size: var(--txt-13);
  color: var(--text-secondary);
}

.main-howorder-bottom {
  display: grid;
  grid-template-columns: var(--main-howorder-bottom-grid-tmp-col);
  gap: var(--main-howorder-bottom-gap);
  min-height: 0;
}

.main-howorder-bottom-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--main-howorder-bottom-left-gap);
  text-align: center;
}

.main-howorder-bottom-title {
  font-family: var(--font-title);
  font-size: var(--main-howorder-bottom-title-f-size);
  letter-spacing: var(--main-howorder-bottom-title-f-ls);
  font-weight: var(--txt-w-600);
  color: var(--text);
}

.main-howorder-bottom-subtitle {
  font-size: var(--main-howorder-bottom-subtitle-f-size);
  letter-spacing: var(--txt-ls-1);
  color: var(--text-secondary);
}

.main-howorder-form {
  display: flex;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  flex-direction: column;
  padding: var(--main-howorder-form-padding);
  min-height: 0;
  gap: 20px;
}

.main-howorder-form-texts {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.form-label-name {
  font-family: var(--font-title);
  color: var(--text-secondary);
  font-size: var(--txt-14);
  margin-left: 5px;
}

.main-howorder-form-ok-end {
  display: flex;
  flex-direction: column;
  width: 100%;

  gap: 20px;
}

.main-howorder-form-ok-end-privacy {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 5px;
  font-size: var(--txt-14);
  color: var(--text-secondary);
}

/* #endregion ----------  */

/* #region ----- MAIN our works -----  */

.main-gallery {
  display: flex;
  width: 100%;
  padding: var(--main-gallery-padding);
  gap: var(--main-gallery-gap);
  align-items: center;
}

.main-gallery-images {
  display: flex;
  flex: 1;
  height: var(--main-gallery-images);
  overflow: hidden;
  gap: 15px;
  padding: var(--main-gallery-images-padding);
  user-select: none;
  -webkit-user-drag: none;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.main-gallery-images img {
  display: block;
  flex: 0 0 auto;
  height: var(--main-gallery-images-img);
  width: auto;
  border-radius: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.5s ease, border-color 0.3s ease;
}

/* #endregion ----------  */

/* #region ----- MAIN partners -----  */

.main-partners {
  display: flex;
  align-items: center;
  justify-content: var(--main-partners-justify-content);
  width: 100%;
  flex-wrap: var(--main-partners-flex-wrap);
  background-color: rgb(250, 250, 250);

  border-radius: 20px;
  gap: var(--main-partners-gap);
  min-height: 0;
  padding: var(--main-partners-padding);

  overflow: hidden;
  overflow-x: var(--main-partners-overflow-x);

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.main-partners img {
  display: block;
  height: 55px;
  padding: 5px;
  width: auto;
  border-radius: 6px;
  box-sizing: content-box;
  user-select: none;
  flex-shrink: 0;
  transition: filter 0.5s ease, transform 0.5s ease, background 1s ease;
}

/* #endregion ----------  */

/* #endregion ========== */

/* #region ===== FOOTER ===== */

.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin-top: var(--footer-margin);
}

.footer-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--desktop-container);
  min-height: 0;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-top {
  display: grid;
  grid-template-columns: var(--footer-top-grid-tmp-col);
  width: 100%;
  min-height: 0;
  flex-wrap: wrap;
  padding: var(--footer-top-padding);
  gap: 10px;
  border-top: 1px solid var(--accent-ring);
}

.footer-col-slogan {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: var(--footer-col-slogan-f-size);
  font-weight: var(--txt-w-600);
  letter-spacing: var(--txt-ls-2);
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}

.footer-col-contacts {
  display: flex;
  flex-direction: column;
  align-items: var(--footer-col-contacts-ali-it);
  justify-content: center;
  padding: var(--footer-col-contacts);
}

.footer-contacts-box {
  display: flex;
  flex-direction: column;
  align-items: var(--footer-contacts-box-ali-it);
}

.footer-contacts-box-title {
  font-size: var(--txt-15);
  font-family: var(--font-title);
  letter-spacing: var(--txt-ls-1);
  font-weight: var(--txt-w-500);
  color: var(--text);
  margin: 15px 0 5px;
}

.footer-contacts-row {
  display: flex;
  font-size: var(--txt-13);
  letter-spacing: var(--txt-ls-1);
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.footer-center {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: var(--border);
  border-bottom: var(--border);
  gap: 30px;
  min-height: 0;
  width: 100%;
  padding: var(--footer-center-padding);
}

.footer-bottom {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: var(--txt-14);
  color: var(--text-secondary);
  letter-spacing: var(--txt-ls-1);
  min-height: 75px;
  padding: 15px 0;
  text-align: center;
}

.footer-center-col {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.footer-center-col-title {
  font-family: var(--font-title);
  font-size: var(--txt-14);
  font-weight: var(--txt-w-500);
  letter-spacing: var(--txt-ls-2);
  color: var(--text);
  margin-bottom: 8px;
}

/* #endregion ===== ===== */

/* #region ----- МЕДИА ЗАПРОС ЭЛЕМЕНТОВ -----  */

/* Десктоп: мышь */
@media (hover: hover) and (pointer: fine) {
  .btn-ui:hover {
    border-color: var(--btn-border-hover);
  }
  .btn-ui.btn-inverse:hover {
    background-color: var(--btn-bg-inverse-hover);
    color: var(--btn-color-inverse-hover);
  }
  .btn-ui.btn-accent-base:hover,
  .btn-ui.btn-dropdown:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
  }
  .btn-ui.btn-accent-base-inverse:hover {
    color: var(--accent);
    background-color: var(--btn-bg-accent-inverse-hover);
    border-color: var(--accent);
  }

  .btn-ui.btn-dropdown.isActive {
    background-color: var(--btn-dropdown-isActive);
    color: var(--accent);
    border-color: var(--accent);
  }

  .btn-icon:hover {
    color: var(--accent);
  }
  .btn-icon:hover::before {
    opacity: 1;
  }

  .link-line-anim:hover {
    color: var(--accent);
  }

  .link-line-anim:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  .main-brands:hover .main-brands-track {
    animation-play-state: paused;
  }

  .main-gallery-images img:hover {
    transform: scale(1.03);
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent);
  }

  .main-catalog-card:hover {
    color: var(--accent);
    border-color: var(--accent);
    background-color: #181818;
    box-shadow: 0 0 10px var(--accent);
  }

  .main-catalog-card:hover img {
    transform: scale(1.05);
    filter: brightness(0.3);
    opacity: 0.6;
    background-color: #181818;
  }

  .main-catalog-card:hover svg {
    transform: translateX(5px);
  }

  .arrow-circle:hover {
    border-color: var(--accent);
    background: var(--accent-mini);
    color: var(--accent);
  }

  .dropdown-btn-category:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
  .dropdown-btn-category:hover span {
    transform: translateX(5px);
  }

  .main-promo-preview-color:hover {
    transform: translateY(-3px);
  }

  .checkbox-label:hover {
    box-shadow: 0 0 0 2px var(--accent-hover);
  }

  .text-input:hover {
    border-color: var(--accent);
  }
  .main-partners img:hover {
    transform: scale(1.05);
  }

  .main-gallery-images {
    cursor: grab;
  }
  .main-gallery-images img {
    cursor: inherit;
  }
  .main-gallery-images.isDragging {
    cursor: grabbing;
    user-select: none;
  }
  .main-gallery-images.isDragging img {
    pointer-events: none;
  }
}

/* Мобильные: сенсор */
@media (hover: none) and (pointer: coarse) {
  .btn-icon:active {
    color: var(--accent);
  }
  .btn-icon:active::before {
    opacity: 1;
  }

  .link-line-anim:active {
    color: var(--accent);
  }

  .link-line-anim::before {
    transition: transform 0.2s ease;
  }

  .link-line-anim:active::before {
    transform: scaleX(1);
    transform-origin: left;
  }
  
  .t985__input.t-search-widget__input.t-input:focus{
    border-color:var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    background:var(--text-input-bg-focus) !important;
}

}

/* #endregion ----------  */