@charset "UTF-8";
/*
Неиспользованные шрифты:

Unbounded-Black.ttf
Unbounded-ExtraBold.ttf
Unbounded-ExtraLight.ttf
Unbounded-Light.ttf
Unbounded-SemiBold.ttf

Inter-Black.woff2
Inter-ExtraBold.woff2
Inter-ExtraLight.woff2
Inter-Light.woff2
Inter-SemiBold.woff2
Inter-Thin.woff2
*/
@font-face {
  font-family: "Unbounded";
  src: url("/fonts/Unbounded-Regular.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/fonts/Unbounded-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/fonts/Unbounded-Bold.ttf") format("truetype");
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
}
.checkbox {
  --initialCheckboxColor: var(--colorDisabled);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 14px/1.3 "Inter";
  letter-spacing: 0;
  cursor: pointer;
}
@media (width <= 540px) {
  .checkbox {
    font-size: 12px;
  }
}
.checkbox .state {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: inherit;
  border: 2px solid var(--initialCheckboxColor);
  border-radius: 5px;
  transition: border-color 0.15s, opacity 0.15s;
}
.checkbox .state .checked {
  visibility: hidden;
}
.checkbox .checkboxLabel {
  color: #494949;
  transition: color 0.15s;
  overflow-wrap: anywhere;
}
.checkbox .checkboxLabel a {
  color: var(--colorActive);
  text-decoration: underline;
}
.checkbox:hover .state {
  opacity: 0.4;
}
.checkbox:hover .state .checked {
  visibility: visible;
}
.checkbox:hover .checkboxLabel {
  color: var(--colorAccent);
}
.checkbox input {
  display: none;
}
.checkbox input:checked ~ .state {
  opacity: 1 !important;
  border-color: var(--colorAccent);
}
.checkbox input:checked ~ .state .checked {
  visibility: visible;
}
.checkbox input:checked ~ .checkboxLabel:not(:hover) {
  color: var(--colorMain);
}
.checkbox:is(.darkBGCheckbox .checkbox) {
  --initialCheckboxColor: var(--colorMain);
}
.checkbox:is(.darkBGCheckbox .checkbox):hover .state {
  border-color: var(--colorWhity);
}
.checkbox:is(.darkBGCheckbox .checkbox):hover .checkboxLabel {
  color: var(--colorWhity);
}
.checkbox:is(.darkBGCheckbox .checkbox):hover .checked path {
  stroke: var(--colorWhity);
}
.checkbox:is(.darkBGCheckbox .checkbox) input:checked ~ .state {
  border-color: var(--colorWhity);
}
.checkbox:is(.darkBGCheckbox .checkbox) input:checked ~ .state .checked path {
  stroke: var(--colorWhity);
}
.checkbox:is(.darkBGCheckbox .checkbox) input:checked ~ .checkboxLabel:not(:hover) {
  color: var(--colorMain);
}

.attachFile {
  margin-top: 16px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  font: 500 14px/1 "Unbounded";
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--colorAccent);
  user-select: none;
  transition: color 0.15s;
}
.attachFile:hover {
  color: var(--colorActive);
}
.attachFile input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.attachFile svg path {
  transition: stroke 0.15s;
  stroke: currentColor;
}

*, ::before, ::after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}
*::selection {
  background-color: var(--colorDark);
  color: #fff;
}

h1, h2, h3, h4 {
  font-size: inherit;
  font-weight: inherit;
}

:root {
  --containerOuterMargin: 40px;
  --colorMain: #102031;
  --colorBlacky: #1d1d1b;
  --colorDark: #255992;
  --colorWhity: #e1effc;
  --colorAccent: #2a64a1;
  --colorActive: #003a79;
  --colorDisabled: #b8c3cd;
  --colorLabel: #a09e9e;
  --colorError: #ef5350;
  --headerMinHeight: 56px;
  --headerOffset: 30px;
  --pageOuterOffset: 10px;
}
:root:has(.big-offset-header) {
  --pageOuterOffset: 40px;
}
@media (width <= 540px) {
  :root:has(.big-offset-header) {
    --pageOuterOffset: 20px;
  }
}
@media (width <= 1024px) {
  :root {
    --headerOffset: 20px;
  }
}
@media (width <= 960px) {
  :root {
    --containerOuterMargin: 30px;
  }
}
@media (width <= 768px) {
  :root {
    --headerMinHeight: 64px;
  }
}
@media (width <= 540px) {
  :root {
    --containerOuterMargin: 15px;
    --headerMinHeight: 54px;
  }
}

body {
  padding-top: calc(var(--headerOffset) + var(--pageOuterOffset));
  background-color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-size: 14px;
  line-height: 1;
  font-family: "Unbounded";
}
body:has(dialog[open]) {
  overflow-y: hidden;
}
@media (width <= 540px) {
  body:has(.dropdown-body.visible) {
    overflow-y: hidden;
  }
}

/* Первый элемент страницы должен заезжать за заголовок */
header.mainHeader + * {
  margin-top: calc(0px - var(--headerOffset) - var(--headerMinHeight));
}

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

.pageTitle {
  font: bold 60px/1.1 "Inter";
  color: var(--colorMain);
  text-transform: uppercase;
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  .pageTitle {
    font-size: 40px;
  }
}
@media (width <= 540px) {
  .pageTitle {
    font-size: 24px;
  }
}

button {
  border: none;
  appearance: none;
  outline: none;
  background-color: transparent;
}

.container {
  width: 100%;
  max-width: calc(1640px + 2 * var(--containerOuterMargin));
  padding-inline: var(--containerOuterMargin);
  margin-inline: auto;
}
@media (width <= 540px) {
  .container.wideMobile {
    padding-inline: 0;
  }
}

.textContent {
  font: 16px/1.2 "Inter";
  letter-spacing: 3%;
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .textContent {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .textContent {
    --marginedBlockOffset: 40px;
  }
}
@media (width <= 1024px) {
  .textContent {
    font-size: 14px;
  }
}
.textContent p:not(:last-child) {
  margin-bottom: 1.2em;
}
.textContent :where(ul, ol) li {
  list-style-position: inside;
  margin-bottom: 1.2em;
}
.textContent :is(ol, ul):last-child li:last-child {
  margin-bottom: 0;
}

dialog {
  display: flex;
  flex-direction: column;
  border: none;
  outline: none;
  width: 100%;
  max-width: min(867px, 100vw - 40px);
  border-radius: 20px;
  background-color: #fff;
  padding: 40px;
  margin: auto;
  max-height: calc(100dvh - 40px);
}
@media (width <= 540px) {
  dialog {
    padding: 20px;
  }
}
dialog:not([open]) {
  display: none;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}
dialog .close {
  right: 40px;
  position: absolute;
  cursor: pointer;
}
@media (width <= 540px) {
  dialog .close {
    right: 20px;
  }
}

.mainHeader {
  --extraPadding: 30px;
  padding-inline: calc(var(--extraPadding) + var(--containerOuterMargin));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  z-index: 5;
}
.mainHeader a {
  white-space: nowrap;
}
@media (width <= 1024px) {
  .mainHeader {
    --extraPadding: 20px;
  }
}
@media (width <= 540px) {
  .mainHeader {
    --extraPadding: 0px;
  }
}
.mainHeader .logo {
  height: var(--headerMinHeight);
  background-color: var(--colorWhity);
  display: inline-flex;
  align-items: center;
  padding-inline: 24px;
  user-select: none;
  border-radius: 60px;
}
.mainHeader .logo img {
  width: 133px;
}
.mainHeader .logo img.mobile {
  display: none;
}
@media (width <= 1400px) {
  .mainHeader .logo {
    padding-inline: 18px;
  }
}
@media (width <= 960px) {
  .mainHeader .logo img {
    display: none;
    width: 54px;
  }
  .mainHeader .logo img.mobile {
    display: inline-block;
    width: 54px;
  }
}
@media (width <= 540px) {
  .mainHeader .logo img.mobile {
    width: 35px;
  }
}
.mainHeader .headerBlock {
  position: relative;
  min-height: var(--headerMinHeight);
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-radius: 60px;
  background-color: var(--colorWhity);
}
.mainHeader .headerBlock a {
  transition: 0.15s color;
}
.mainHeader .headerBlock a:hover {
  color: var(--colorDark);
}
@media (width <= 1400px) {
  .mainHeader .headerBlock {
    padding-inline: 18px;
  }
}
.mainHeader nav.headerBlock {
  z-index: 1;
  gap: 34px;
  padding-left: 10px;
  font: 500 14px/1 "Inter";
  color: var(--colorMain);
}
.mainHeader nav.headerBlock a {
  user-select: none;
}
.mainHeader nav.headerBlock::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  border-radius: 60px;
  translate: -10px 0;
  background-color: var(--colorWhity);
  pointer-events: none;
}
@media (960px < width <= 1400px) {
  .mainHeader nav.headerBlock {
    min-width: 270px;
  }
}
@media (width <= 540px) {
  .mainHeader nav.headerBlock {
    gap: 24px;
  }
}
.mainHeader nav.headerBlock .dropdown[data-dropdown=catalog] {
  height: calc(var(--headerMinHeight) - 20px);
  color: var(--colorWhity);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-inline: 24px;
  background-color: var(--colorAccent);
  border-radius: 60px;
  cursor: pointer;
  user-select: none;
}
.mainHeader nav.headerBlock .dropdown[data-dropdown=catalog]:hover, .mainHeader nav.headerBlock .dropdown[data-dropdown=catalog].open {
  background-color: var(--colorActive);
}
@media (width <= 540px) {
  .mainHeader nav.headerBlock .dropdown[data-dropdown=catalog] > img {
    display: none;
  }
}
.mainHeader nav.headerBlock .dropdown-body {
  position: absolute;
  top: calc(0.5 * var(--headerMinHeight));
  padding: calc(16px + 0.5 * var(--headerMinHeight)) 24px 24px;
  width: 100%;
  border: 2px solid var(--colorWhity);
  border-top: none;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background-color: #fff;
  font: 16px/1 "Inter";
  pointer-events: none;
  transition: 0.15s opacity, 0.15s translate;
  opacity: 0;
  translate: -10px -15px;
  z-index: -2;
}
.mainHeader nav.headerBlock .dropdown-body .mobileTitle {
  display: none;
}
@media (width <= 1400px) {
  .mainHeader nav.headerBlock .dropdown-body {
    padding-inline: 16px;
    padding-bottom: 16px;
  }
}
@media (width <= 960px) {
  .mainHeader nav.headerBlock .dropdown-body {
    font-size: 14px;
  }
}
@media (width <= 540px) {
  .mainHeader nav.headerBlock .dropdown-body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border: none;
    background-color: var(--colorWhity);
    padding: 40px 15px;
    border-radius: 0;
    transition: none;
    translate: 0 0 !important;
    z-index: 2;
  }
  .mainHeader nav.headerBlock .dropdown-body .mobileTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-weight: bold;
    font-size: 20px;
    color: var(--colorBlacky);
  }
  .mainHeader nav.headerBlock .dropdown-body .mobileTitle .close {
    cursor: pointer;
  }
}
.mainHeader nav.headerBlock .dropdown-body.visible {
  opacity: 1;
  translate: -10px 0;
  pointer-events: all;
}
.mainHeader nav.headerBlock .dropdown-body .items {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 12px 16px;
}
@media (width <= 1400px) {
  .mainHeader nav.headerBlock .dropdown-body .items {
    grid-template-rows: auto;
    grid-auto-flow: row;
  }
}
@media (width <= 1400px) {
  .mainHeader nav.headerBlock > a {
    display: none;
  }
}
.mainHeader .mobilePhoneBlock {
  background-color: #fff;
  height: 64px;
  width: 100%;
  margin-top: auto;
  border-radius: 32px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Unbounded";
  letter-spacing: 0;
  display: none;
}
.mainHeader .mobilePhoneBlock:not(:empty) {
  display: flex;
}
@media (width > 540px) {
  .mainHeader .mobilePhoneBlock:not(:empty) {
    display: none;
  }
}
.mainHeader .phone {
  gap: 10px;
  font-weight: bold;
  color: var(--colorMain);
}
.mainHeader .phone span {
  color: var(--colorDark);
}
@media (width <= 960px) {
  .mainHeader .phone {
    font-size: 12px;
  }
}
@media (width <= 768px) {
  .mainHeader .phone {
    display: none;
  }
}
.mainHeader .search {
  width: var(--headerMinHeight);
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.mainHeader .search svg {
  pointer-events: none;
}
.mainHeader .search svg path {
  transition: 0.15s stroke;
}
.mainHeader .search:hover path {
  stroke: var(--colorDark);
}
@media (width <= 540px) {
  .mainHeader .search {
    display: none;
  }
}
.mainHeader .hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: 50%;
  transition: 0.15s background;
  width: 40px;
  aspect-ratio: 1;
  font-size: 0;
  cursor: pointer;
}
.mainHeader .hamburger svg path {
  transition: 0.15s stroke;
}
.mainHeader .hamburger svg:hover path {
  stroke: var(--colorAccent);
}
@media (width > 540px) {
  .mainHeader .hamburger.open {
    background-color: var(--colorActive);
  }
  .mainHeader .hamburger.open svg path {
    stroke: var(--colorWhity);
  }
}
@media (width > 1400px) {
  .mainHeader .hamburger {
    display: none;
  }
}

footer.mainFooter {
  margin-top: auto;
  padding-block: 60px 40px;
  background-color: var(--colorWhity);
  font-size: 16px;
  font-family: "Inter";
  color: var(--colorMain);
}
footer.mainFooter a {
  transition: 0.15s color;
}
footer.mainFooter a:hover {
  color: var(--colorDark);
}
footer.mainFooter .container {
  display: grid;
  grid-template-columns: 1247fr 673fr;
}
@media (width <= 960px) {
  footer.mainFooter .container {
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    gap: 20px;
  }
}
@media (width <= 540px) {
  footer.mainFooter .container {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}
footer.mainFooter .navs {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
@media (width <= 768px) {
  footer.mainFooter .navs {
    flex-direction: column;
  }
}
footer.mainFooter nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (width > 768px) {
  footer.mainFooter nav.catalog {
    min-width: 257px;
  }
}
footer.mainFooter nav.sections {
  gap: 24px;
  font-weight: bold;
}
footer.mainFooter nav h2 {
  margin-bottom: 12px;
  font-weight: bold;
}
footer.mainFooter .contacts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--colorMain);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 3%;
}
footer.mainFooter .contacts .row {
  display: flex;
  align-items: center;
  gap: 12px;
}
footer.mainFooter .contacts .content {
  max-width: 172px;
}
footer.mainFooter .contacts .phone {
  gap: 14px;
  font: bold 14px/1 "Unbounded";
  letter-spacing: normal;
}
footer.mainFooter .contacts .location {
  align-items: flex-start;
}
footer.mainFooter .underline {
  margin-top: 200px;
}
@media (width <= 1024px) {
  footer.mainFooter .underline {
    margin-top: 140px;
  }
}
@media (width <= 768px) {
  footer.mainFooter .underline {
    margin-top: 120px;
  }
}
@media (width <= 540px) {
  footer.mainFooter .underline {
    margin-top: 60px;
  }
}
footer.mainFooter .underline .content {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--colorDisabled);
  font: 16px/1.3 "Inter";
  letter-spacing: 3%;
  color: #606060;
}
@media (width <= 1024px) {
  footer.mainFooter .underline .content {
    font-size: 14px;
  }
}
@media (width <= 540px) {
  footer.mainFooter .underline .content {
    align-items: flex-start;
    flex-direction: column;
  }
}
footer.mainFooter .underline .left {
  white-space: nowrap;
}
footer.mainFooter .underline .right {
  max-width: 560px;
}
@media (width <= 920px) {
  footer.mainFooter .underline .right {
    max-width: 354px;
  }
}
@media (width <= 540px) {
  footer.mainFooter .underline .right {
    max-width: 100%;
  }
}

.moveToTop {
  position: fixed;
  bottom: 24px;
  right: 45px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--colorAccent);
  z-index: 3;
  transition: background-color 0.15s, opacity 0.15s;
  cursor: pointer;
}
@media (width <= 1024px) {
  .moveToTop {
    right: var(--containerOuterMargin);
  }
}
.moveToTop:hover {
  background-color: var(--colorActive);
}
.moveToTop.hidden {
  opacity: 0;
  pointer-events: 0;
}

.cookiesAgreement {
  display: none;
  position: fixed;
  bottom: 40px;
  left: 50%;
  translate: -50% 0;
  z-index: 100;
}
.cookiesAgreement.visible {
  display: block;
}
.cookiesAgreement .body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 40px;
  border-radius: 20px;
  padding: 40px var(--containerOuterMargin);
  background-color: var(--colorWhity);
  box-shadow: 0 0 6px -4px var(--colorMain);
}
@media (width <= 1024px) {
  .cookiesAgreement .body {
    column-gap: 20px;
    padding-block: 20px;
  }
}
@media (width <= 720px) {
  .cookiesAgreement .body {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }
}
.cookiesAgreement .cookieHeader {
  font: bold 40px/1.2 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  .cookiesAgreement .cookieHeader {
    font-size: 28px;
  }
}
@media (width <= 720px) {
  .cookiesAgreement .cookieHeader {
    font-size: 20px;
  }
}
.cookiesAgreement .cookieText {
  font: 18px/1.2 "Inter";
  letter-spacing: 1%;
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  .cookiesAgreement .cookieText {
    font-size: 16px;
  }
}
.cookiesAgreement .btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 165px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.cookiesAgreement .btn:hover {
  background-color: var(--colorActive);
}
.cookiesAgreement .btn.disabled, .cookiesAgreement .btn[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
@media (width <= 1024px) {
  .cookiesAgreement .btn {
    align-self: end;
  }
}
@media (width > 720px) {
  .cookiesAgreement .btn {
    grid-column: 2;
    grid-row: 1/3;
  }
}
@media (width <= 720px) {
  .cookiesAgreement .btn {
    margin-top: 10px;
  }
}

.lineItemBlock {
  width: 100%;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr minmax(130px, auto) minmax(185px, auto) minmax(305px, auto) 188px;
  align-items: center;
  gap: 97px;
  border-radius: 14px;
  background-color: #fff;
  border: 1px solid var(--colorDisabled);
  letter-spacing: 0;
  transition: 0.15s background-color, 0.15s border;
  font-family: "Inter";
}
@media (width > 540px) {
  .lineItemBlock:hover {
    border-color: var(--colorAccent);
    background-color: var(--colorWhity);
  }
  .lineItemBlock:hover .name {
    color: var(--colorAccent);
  }
}
@media (width <= 1640px) {
  .lineItemBlock {
    gap: 20px;
  }
}
@media (width <= 1440px) {
  .lineItemBlock {
    grid-template-columns: minmax(130px, auto) minmax(150px, auto) 1fr 188px;
  }
}
@media (width < 1024px) {
  .lineItemBlock {
    grid-template-columns: minmax(150px, auto) 1fr 188px;
  }
}
@media (width <= 768px) {
  .lineItemBlock {
    grid-template-columns: 1fr;
  }
}
.lineItemBlock .name-art {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--colorMain);
}
@media (width <= 1440px) {
  .lineItemBlock .name-art {
    grid-column: 1/-1;
    gap: 6px;
  }
}
.lineItemBlock .name-art .name {
  transition: 0.15s color;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 1%;
}
.lineItemBlock .name-art :not(.name) {
  font: normal 14px/1.3 "Inter";
  letter-spacing: 0;
}
.lineItemBlock .availability {
  display: flex;
  align-items: center;
  gap: 8px;
  font: normal 14px/1.3 "Inter";
  letter-spacing: 0;
}
@media (width < 1024px) {
  .lineItemBlock .availability {
    grid-column: 1/-1;
    margin-top: -14px;
  }
}
.lineItemBlock .price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: bold;
  font-size: 24px;
}
.lineItemBlock .price .priceValue {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 1%;
}
.lineItemBlock .price .priceComment {
  font: normal 14px/1.3 "Inter";
  letter-spacing: 0;
}
@media (width <= 1640px) {
  .lineItemBlock .price .priceComment {
    font-size: 12px;
    line-height: 1.1;
  }
}
.lineItemBlock .lastPrice .priceValue {
  font-size: 24px;
}
@media (width <= 1640px) {
  .lineItemBlock .lastPrice .priceValue {
    font-size: 20px;
  }
}
.lineItemBlock .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.lineItemBlock .button:hover {
  background-color: var(--colorActive);
}
.lineItemBlock .button.disabled, .lineItemBlock .button[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
.lineItemBlock .button {
  min-height: 53px;
}

.searchInput {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px;
  padding-right: 14px;
  background-color: var(--colorMain);
  border-radius: 60px;
  height: 80px;
  transition: 0.15s background;
}
@media (width <= 540px) {
  .searchInput {
    height: 60px;
  }
}
.searchInput:hover, .searchInput:focus-within {
  background-color: var(--colorActive);
}
.searchInput:hover input, .searchInput:focus-within input {
  background-color: var(--colorWhity);
}
.searchInput.search-tiny {
  height: 66px;
  padding: 8px;
}
.searchInput.search-blue {
  background-color: var(--colorActive);
}
.searchInput input {
  padding-inline: 24px;
  border: none;
  background-color: #fff;
  font: 14px/1.3 "Inter";
  color: var(--colorMain);
  height: 100%;
  flex-grow: 1;
  min-width: 200px;
  border-radius: 60px;
  outline: none;
  transition: 0.15s background;
}
.searchInput input::placeholder {
  opacity: 0.6;
  color: var(--colorMain);
}
.searchInput input:is(.withCleaner input) {
  padding-right: 60px;
}
.searchInput .iconBtn {
  font-size: 0;
  padding: 10px;
  cursor: pointer;
}
.searchInput .iconBtn .icon {
  width: 24px;
}
.searchInput .cleaner {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  translate: -76px -50%;
  font-size: 0;
  cursor: pointer;
}
.searchInput .cleaner:is(.withCleaner .cleaner) {
  display: block;
}

.extraSearchForm {
  display: flex;
  flex-direction: column;
  gap: 24px;
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .extraSearchForm {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .extraSearchForm {
    --marginedBlockOffset: 40px;
  }
}
.extraSearchForm .categorySelector {
  align-self: center;
  max-width: 100%;
}
.extraSearchForm .categorySelector .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
.extraSearchForm .categorySelector .slider {
  --slideWidth: 230px;
  min-width: min(100vw - var(--containerOuterMargin) * 2, min(1640px, var(--slidesCount, 100) * (var(--slideWidth) + 20px) - 20px));
}
@media (width <= 540px) {
  .extraSearchForm .categorySelector .slider {
    --slideWidth: 173px;
  }
}
.extraSearchForm .categorySelector .category {
  display: flex;
  align-items: center;
  width: var(--slideWidth);
  gap: 10px;
  padding: 24px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: bold 14px/1.2 "Unbounded";
  color: var(--colorAccent);
  letter-spacing: 0;
  transition: border-color 0.15s, color 0.15s;
  user-select: none;
  cursor: pointer;
}
@media (width <= 540px) {
  .extraSearchForm .categorySelector .category {
    font-size: 10px;
    padding: 14px;
  }
}
.extraSearchForm .categorySelector .category svg {
  width: 40px;
  flex-shrink: 0;
}
.extraSearchForm .categorySelector .category svg path {
  transition: fill 0.15s;
}
.extraSearchForm .categorySelector .category.is-active {
  pointer-events: none;
  color: var(--colorMain);
  border-color: var(--colorMain);
}
.extraSearchForm .categorySelector .category.is-active svg path {
  fill: var(--colorMain);
}
.extraSearchForm .categorySelector .category:hover {
  color: var(--colorActive);
  border-color: var(--colorDisabled);
}
.extraSearchForm .extraFilter {
  margin-top: -4px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.packetOffersSearchResults {
  --cardWidth: 379px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  gap: 20px;
  --marginedBlockOffset: 80px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .packetOffersSearchResults {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .packetOffersSearchResults {
    --marginedBlockOffset: 40px;
  }
}
@media (width <= 1680px) {
  .packetOffersSearchResults {
    grid-template-columns: repeat(auto-fill, var(--cardWidth));
  }
}
@media (width <= 1024px) {
  .packetOffersSearchResults {
    --cardWidth: 280px;
  }
}
@media (width <= 540px) {
  .packetOffersSearchResults {
    grid-template-columns: 1fr;
  }
}
@media (width > 1680px) {
  .packetOffersSearchResults .itemCard {
    --cardMaxWidth: 100%;
  }
}
.packetOffersSearchResults + .pager {
  margin-block: 40px var(--marginedBlockOffset);
  --marginedBlockOffset: 80px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .packetOffersSearchResults + .pager {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .packetOffersSearchResults + .pager {
    --marginedBlockOffset: 40px;
  }
}

.pager {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
@media (width <= 768px) {
  .pager {
    flex-direction: column;
  }
}
.pager .lister {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pager .page {
  --buttonSize: 54px;
  box-sizing: content-box;
  width: var(--buttonSize);
  height: var(--buttonSize);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  font: 500 14px/1 "Unbounded";
  color: var(--colorAccent);
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.pager .page svg path {
  transition: stroke 0.15s;
}
.pager .page.disabled {
  pointer-events: none;
  color: var(--colorDisabled);
}
.pager .page.disabled svg path {
  stroke: var(--colorDisabled);
}
.pager .page.active {
  pointer-events: none;
  border-color: var(--colorWhity);
  background-color: var(--colorWhity);
}
.pager .page:hover {
  border-width: 2px;
  width: calc(var(--buttonSize) - 2px);
  height: calc(var(--buttonSize) - 2px);
  color: var(--colorMain);
}
.pager .page:hover svg path {
  stroke: var(--colorMain);
}
.pager .showMore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 217px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.pager .showMore:hover {
  background-color: var(--colorActive);
}
.pager .showMore.disabled, .pager .showMore[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
.pager .showMore {
  border: 1px solid currentColor;
  background-color: transparent;
  color: var(--colorAccent);
}
.pager .showMore:hover {
  background-color: transparent;
  color: var(--colorMain);
}

.indexTopSlider {
  position: relative;
}
.indexTopSlider .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
.indexTopSlider .slide {
  --slideHeight: 700px;
  position: relative;
  height: var(--slideHeight);
  width: 100%;
  flex-shrink: 0;
  padding-top: calc(2 * var(--headerOffset) + var(--headerMinHeight));
  border-radius: 30px;
  overflow: hidden;
}
@media (width <= 1024px) {
  .indexTopSlider .slide {
    border-radius: 16px;
  }
}
@media (width <= 768px) {
  .indexTopSlider .slide {
    --slideHeight: 508px;
  }
}
@media (width <= 540px) {
  .indexTopSlider .slide {
    --slideHeight: 441px;
  }
}
.indexTopSlider .background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.indexTopSlider .background img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.indexTopSlider .textBg {
  padding: 60px 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(16, 32, 49, 0.6);
  backdrop-filter: blur(3px);
}
@media (width <= 768px) {
  .indexTopSlider .textBg {
    padding: 40px 20px;
  }
}
@media (width <= 540px) {
  .indexTopSlider .textBg {
    padding: 20px;
  }
}
.indexTopSlider .text {
  color: var(--colorWhity);
  font: bold 56px/1.1 "Inter";
  letter-spacing: 1%;
  text-transform: uppercase;
  max-width: 1067px;
}
@media (width <= 1024px) {
  .indexTopSlider .text {
    font-size: 36px;
    line-height: 1.2;
  }
}
@media (width <= 540px) {
  .indexTopSlider .text {
    font-size: 24px;
  }
}
.indexTopSlider .button {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.indexTopSlider .button:hover {
  background-color: var(--colorActive);
}
.indexTopSlider .button.disabled, .indexTopSlider .button[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
@media (width <= 1024px) {
  .indexTopSlider .button {
    width: calc(100% - 132px);
  }
}
@media (width <= 540px) {
  .indexTopSlider .button {
    min-width: 150px;
  }
}
.indexTopSlider .arrowsBlock {
  position: absolute;
  bottom: 60px;
  right: calc(40px + var(--containerOuterMargin));
}
@media (width <= 768px) {
  .indexTopSlider .arrowsBlock {
    bottom: 40px;
    right: 20px;
  }
}
@media (width <= 540px) {
  .indexTopSlider .arrowsBlock {
    bottom: 20px;
  }
}

/** Блок с фильтром, поиском и результатами */
div.brandsSlider {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 112px;
  align-items: center;
  gap: 100px;
}
div.brandsSlider .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
@media (width <= 1640px) {
  div.brandsSlider {
    gap: 60px;
  }
}
@media (width <= 1160px) {
  div.brandsSlider {
    gap: 20px;
  }
}
@media (width <= 768px) {
  div.brandsSlider {
    gap: 10px;
  }
}
div.brandsSlider .brand {
  min-width: 167px;
  width: 215px;
  flex-shrink: 0;
  min-height: 88px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid transparent;
  font: 18px/1.2 "Inter";
  letter-spacing: 1%;
  text-align: center;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  color: var(--colorMain);
  cursor: pointer;
}
@media (width <= 1024px) {
  div.brandsSlider .brand {
    min-height: 56px;
    width: unset;
  }
}
@media (width <= 540px) {
  div.brandsSlider .brand {
    min-height: 50px;
    font-size: 14px;
    min-width: 96px;
    overflow-wrap: anywhere;
  }
}
div.brandsSlider .brand:hover {
  border-color: var(--colorMain);
}
div.brandsSlider .brand.is-active {
  background-color: var(--colorAccent);
  border-color: var(--colorAccent);
  color: #fff;
}

.arrowsBlock {
  --arrowSize: 56px;
  flex-shrink: 0;
  width: calc(2 * var(--arrowSize));
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.arrowsBlock .arrow {
  background-color: var(--colorWhity);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.15s background;
}
.arrowsBlock .arrow svg path {
  transition: 0.15s stroke;
}
.arrowsBlock .arrow:hover {
  background-color: var(--colorActive);
}
.arrowsBlock .arrow:hover svg path {
  stroke: var(--colorWhity);
}
.arrowsBlock .arrow.arrowPrev {
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
}
.arrowsBlock .arrow.arrowNext {
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
}
.arrowsBlock .arrow.disabled {
  pointer-events: none;
}
.arrowsBlock .arrow.disabled svg path {
  stroke: var(--colorDisabled);
}

section.filterWithSearch {
  padding-bottom: 40px;
  --marginedBlockOffset: 80px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  section.filterWithSearch {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  section.filterWithSearch {
    --marginedBlockOffset: 40px;
  }
}
section.filterWithSearch .searchForm {
  background-color: var(--colorWhity);
  border-radius: 14px;
  padding: 31px 32px;
}
@media (width <= 540px) {
  section.filterWithSearch .searchForm {
    padding-inline: 15px;
  }
}
section.filterWithSearch .brandsSlider {
  margin-bottom: 30px;
}
section.filterWithSearch .searchResults {
  display: none;
}
section.filterWithSearch .searchForm.withResults .searchResults {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 20px;
  border-top: 1px solid var(--colorDisabled);
  padding-top: 60px;
}
@media (width <= 540px) {
  section.filterWithSearch .searchForm.withResults .searchResults {
    padding-top: 40px;
  }
}
section.filterWithSearch .resultsCaption {
  color: var(--colorMain);
  font: bold 32px/1.2 "Unbounded";
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  section.filterWithSearch .resultsCaption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  section.filterWithSearch .resultsCaption {
    font-size: 20px;
  }
}
section.filterWithSearch .searchResultsCardsControls {
  display: flex;
  gap: 48px;
  justify-content: flex-end;
}
section.filterWithSearch .searchResultsCardsControls .showAll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px/1 "Unbounded";
  letter-spacing: 0;
  color: var(--colorAccent);
  text-transform: uppercase;
  transition: 0.15s color;
}
section.filterWithSearch .searchResultsCardsControls .showAll.hidden {
  display: none;
}
section.filterWithSearch .searchResultsCardsControls .showAll svg path {
  transition: 0.15s stroke;
  stroke: currentColor;
}
section.filterWithSearch .searchResultsCardsControls .showAll:hover {
  color: var(--colorActive);
}
section.filterWithSearch .searchResultsCards .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
section.filterWithSearch .searchResultsCards:has(.splide__list:empty) {
  display: none !important;
}

div.categoriesSlider {
  width: 100%;
  --marginedBlockOffset: 80px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  div.categoriesSlider {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  div.categoriesSlider {
    --marginedBlockOffset: 40px;
  }
}
div.categoriesSlider .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
div.categoriesSlider .bgWrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 112px;
  align-items: center;
  gap: 34px;
  padding-left: 10px;
  background-color: var(--colorWhity);
  border-radius: 60px;
}
@media (width <= 768px) {
  div.categoriesSlider .bgWrapper {
    gap: 10px;
  }
}
div.categoriesSlider .category {
  min-height: 36px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 24px;
  font: 16px/1 "Inter";
  letter-spacing: 1%;
  text-align: center;
  white-space: nowrap;
  transition: 0.15s background-color, 0.15s color;
  color: var(--colorMain);
  cursor: pointer;
  user-select: none;
}
@media (width <= 540px) {
  div.categoriesSlider .category {
    font-size: 14px;
    padding-inline: 16px;
  }
}
div.categoriesSlider .category:hover {
  border-color: var(--colorMain);
}
div.categoriesSlider .category.is-active {
  background-color: var(--colorAccent);
  color: #fff;
}

.itemCards {
  margin-top: 48px;
}
.itemCards .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
@media (width <= 540px) {
  .itemCards {
    margin-top: 30px;
  }
}

.itemCard {
  --cardMaxWidth: 379px;
  width: var(--cardMaxWidth);
  flex-shrink: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  border: 2px solid var(--colorMain);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s;
}
@media (width <= 1024px) {
  .itemCard {
    --cardMaxWidth: 280px;
  }
}
@media (width <= 540px) {
  .itemCard {
    --cardMaxWidth: 100%;
  }
}
.itemCard .caption {
  --bg: var(--colorMain);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  background-color: var(--bg);
  transition: background-color 0.15s;
  color: #fff;
  font: bold 32px/1.2 "Unbounded";
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  .itemCard .caption {
    padding: 24px;
    font-size: 24px;
  }
}
@media (width <= 540px) {
  .itemCard .caption {
    font-size: 18px;
    padding: 15px;
  }
}
.itemCard .name {
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}
@media (width <= 540px) {
  .itemCard .name {
    margin-bottom: 8px;
  }
}
.itemCard .lastPrice {
  position: relative;
  margin-top: auto;
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.itemCard .lastPrice .infoIcon {
  cursor: pointer;
}
.itemCard .lastPrice .tooltip {
  display: none;
  position: absolute;
  left: -1px;
  bottom: calc(100% + 8px);
  padding: 10px;
  background-color: var(--colorWhity);
  border-radius: 6px;
  font: 14px/1.3 "Inter";
  color: #0d0d0d;
}
.itemCard .lastPrice .tooltip span {
  position: relative;
}
.itemCard .lastPrice .tooltip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 14px;
  aspect-ratio: 1;
  background-color: var(--colorWhity);
  border-radius: 4px;
  transform: rotate(59deg) skew(30deg) translateY(-11px);
}
.itemCard .lastPrice.withTooltip .tooltip {
  display: block;
}
@media (width <= 1024px) {
  .itemCard .lastPrice {
    font-size: 20px;
  }
}
@media (width <= 540px) {
  .itemCard .lastPrice {
    font-size: 16px;
  }
}
.itemCard .price {
  font-size: 16px;
}
@media (width <= 540px) {
  .itemCard .price {
    font-size: 14px;
    letter-spacing: 0;
  }
}
.itemCard:hover {
  border-color: var(--colorActive);
}
.itemCard:hover .caption {
  background-color: var(--colorActive);
}
.itemCard .buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 40px 40px;
  background-color: #fff;
}
@media (width <= 1024px) {
  .itemCard .buttons {
    padding: 32px 24px 24px;
  }
}
@media (width <= 540px) {
  .itemCard .buttons {
    padding: 24px 15px 15px;
  }
}
.itemCard .buttons .getPrice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.itemCard .buttons .getPrice:hover {
  background-color: var(--colorActive);
}
.itemCard .buttons .getPrice.disabled, .itemCard .buttons .getPrice[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
@media (768px < width <= 1024px) {
  .itemCard .buttons .getPrice {
    padding-inline: 30px;
  }
}
.itemCard .buttons .info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.itemCard .buttons .info:hover {
  background-color: var(--colorActive);
}
.itemCard .buttons .info.disabled, .itemCard .buttons .info[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
.itemCard .buttons .info {
  border: 1px solid currentColor;
  background-color: transparent;
  color: var(--colorAccent);
}
.itemCard .buttons .info:hover {
  background-color: transparent;
  color: var(--colorMain);
}

.mapBlock {
  --mapWidth: 63.9%;
  --height: 605px;
  background-color: var(--colorWhity);
  display: grid;
  height: var(--height);
  grid-template-columns: var(--mapWidth) 1fr;
  grid-template-areas: "img text";
  align-items: center;
  font-size: 0;
  --marginedBlockOffset: 80px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .mapBlock {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .mapBlock {
    --marginedBlockOffset: 40px;
  }
}
@media (width <= 1024px) {
  .mapBlock {
    --mapWidth: 56.64%;
    --height: 446px;
  }
}
@media (width <= 768px) {
  .mapBlock {
    --height: 370px;
  }
}
@media (width <= 640px) {
  .mapBlock {
    --height: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "img" "text";
    grid-template-rows: 385px auto;
    justify-content: center;
    gap: 20px;
    padding-bottom: 40px;
  }
}
@media (width > 640px) {
  .mapBlock.inverted {
    margin-top: 0;
    grid-template-columns: 1fr var(--mapWidth);
    grid-template-areas: "text img";
  }
  .mapBlock.inverted .text {
    padding-inline: max(var(--containerOuterMargin), 50vw - 820px) 20px;
  }
  .mapBlock.inverted img {
    object-position: center;
  }
}
.mapBlock img {
  grid-area: img;
  width: 100%;
  height: 100%;
  object-position: center right;
  object-fit: cover;
}
@media (width <= 540px) {
  .mapBlock img {
    object-position: bottom right;
  }
}
.mapBlock .text {
  grid-area: text;
  padding-inline: 20px max(var(--containerOuterMargin), 50vw - 820px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (width <= 640px) {
  .mapBlock .text {
    padding-left: 0;
  }
}
@media (width <= 640px) {
  .mapBlock .text {
    padding-inline: var(--containerOuterMargin);
  }
}
.mapBlock .caption {
  font: bold 40px/1.2 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .mapBlock .caption {
    font-size: 28px;
  }
}
@media (width <= 640px) {
  .mapBlock .caption {
    font-size: 20px;
  }
}
.mapBlock .info {
  font: 16px/1.2 "Inter";
  letter-spacing: 3%;
  color: var(--colorBlacky);
}
@media (width <= 768px) {
  .mapBlock .info {
    font-size: 14px;
  }
}

.storeBlock {
  --imgWidth: 35.05%;
  --height: 321px
  height: var(--height);
  display: grid;
  grid-template-columns: 1fr var(--imgWidth);
  grid-template-areas: "text img";
  align-items: center;
  font-size: 0;
}
@media (width <= 1024px) {
  .storeBlock {
    --imgWidth: 41.41%;
    --height: 238px;
  }
}
@media (width <= 1024px) {
  .storeBlock {
    --imgWidth: 48.7%;
    --height: 283px;
  }
}
@media (width <= 640px) {
  .storeBlock {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "img" "text";
    gap: 20px;
    padding-bottom: 40px;
  }
  .storeBlock.inverted {
    padding-bottom: 0;
  }
}
@media (width > 640px) {
  .storeBlock.inverted {
    --standardInlineMargin: max(var(--containerOuterMargin), 50vw - 820px);
    --imgWidth: calc(min(675px, 50vw - var(--containerOuterMargin) - 10px) + var(--standardInlineMargin));
    grid-template-columns: var(--imgWidth) 1fr;
    grid-template-areas: "img text";
  }
  .storeBlock.inverted .text {
    justify-self: end;
    padding-inline: 10px var(--standardInlineMargin);
    width: 50vw;
  }
}
.storeBlock picture {
  grid-area: img;
  width: 100%;
  height: var(--height);
}
@media (width <= 640px) {
  .storeBlock picture {
    height: 202px;
  }
}
.storeBlock img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.storeBlock .text {
  grid-area: text;
  padding-inline: max(var(--containerOuterMargin), 50vw - 820px) 20px;
  font: bold 32px/1.2 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .storeBlock .text {
    font-size: 24px;
  }
}
@media (width <= 640px) {
  .storeBlock .text {
    font-size: 18px;
  }
}

.trusters {
  padding-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 80px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .trusters {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .trusters {
    --marginedBlockOffset: 40px;
  }
}
.trusters .caption {
  margin-bottom: 30px;
  font: bold 40px/1.2 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .trusters .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  .trusters .caption {
    font-size: 20px;
  }
}
.trusters .grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 100px;
  gap: 20px;
}
@media (width <= 1140px) {
  .trusters .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width <= 540px) {
  .trusters .grid {
    grid-template-columns: 1fr 1fr;
  }
}
.trusters img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  filter: grayscale(1);
  transition: 0.15s filter;
}
.trusters img:hover {
  filter: grayscale(0);
}

.prideSlider {
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .prideSlider {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .prideSlider {
    --marginedBlockOffset: 40px;
  }
}
.prideSlider .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
.prideSlider .slide {
  --imgWidth: 57.8%;
  height: 482px;
  display: grid;
  grid-template-columns: var(--imgWidth) 1fr;
  align-items: center;
  gap: 20px;
  font-size: 0;
}
@media (width <= 1480px) {
  .prideSlider .slide {
    --imgWidth: 48.58%;
    height: auto;
  }
}
@media (width <= 640px) {
  .prideSlider .slide {
    grid-template-columns: 1fr;
  }
}
@media (width > 640px) {
  .prideSlider.inverted .slide {
    grid-template-columns: 1fr 1fr;
  }
  .prideSlider.inverted .slide picture, .prideSlider.inverted .slide .text {
    grid-row: 1;
  }
  .prideSlider.inverted .slide picture {
    grid-column: 2;
  }
  .prideSlider.inverted .slide .text {
    grid-column: 1;
    padding-left: 0;
    max-width: 675px;
  }
}
.prideSlider picture {
  width: 100%;
  height: 100%;
}
.prideSlider picture img {
  width: 100%;
  height: 100%;
  object-position: top center;
  object-fit: cover;
}
@media (width > 1480px) {
  .prideSlider picture img {
    max-height: 482px;
  }
}
.prideSlider .text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 140px;
  font: 16px/1.2 "Inter";
  letter-spacing: 3%;
  color: var(--colorBlacky);
}
@media (width <= 1480px) {
  .prideSlider .text {
    padding-left: 78px;
  }
}
@media (width <= 1024px) {
  .prideSlider .text {
    font-size: 14px;
  }
}
@media (width <= 960px) {
  .prideSlider .text {
    padding-left: 0;
  }
}
.prideSlider .caption {
  font: bold 40px/1.2 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .prideSlider .caption {
    font-size: 28px;
  }
}
@media (width <= 640px) {
  .prideSlider .caption {
    font-size: 20px;
  }
}
.prideSlider .body p + p {
  margin-top: 1.2em;
}

.subscribe {
  background-position: center;
  background-repeat: no-repeat;
  background-image: image-set(url("/img/subscribe.avif") type("image/avif"), url("/img/subscribe.webp"));
  --marginedBlockOffset: 80px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .subscribe {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .subscribe {
    --marginedBlockOffset: 40px;
  }
}
.subscribe {
  margin-top: 0;
  padding-block: var(--marginedBlockOffset);
}
.subscribe .container {
  display: grid;
  grid-template-columns: 57.8% 1fr;
  gap: 20px;
}
@media (width <= 1480px) {
  .subscribe .container {
    grid-template-columns: 48.58% 1fr;
  }
}
@media (width <= 640px) {
  .subscribe .container {
    grid-template-columns: 1fr;
  }
}
.subscribe .text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font: 16px/1.2 "Inter";
  letter-spacing: 3%;
  color: var(--colorMain);
}
@media (width <= 640px) {
  .subscribe .text {
    font-size: 14px;
  }
}
.subscribe .text .caption {
  font: bold 40px/1.2 "Unbounded";
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  .subscribe .text .caption {
    font-size: 28px;
  }
}
@media (width <= 640px) {
  .subscribe .text .caption {
    font-size: 20px;
  }
}
.subscribe form {
  padding-left: 140px;
}
@media (width <= 1480px) {
  .subscribe form {
    padding-left: 78px;
  }
}
@media (width <= 960px) {
  .subscribe form {
    padding-left: 0;
  }
}
.subscribe .email {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 500 14px/1 "Inter";
  color: var(--colorMain);
  letter-spacing: 0;
}
.subscribe .email input {
  outline: none;
  background-color: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding-inline: 24px;
  border: 1px solid var(--colorDisabled);
  border-radius: 12px;
  font: 500 14px/1 "Inter";
  color: var(--colorMain);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.subscribe .email input:hover, .subscribe .email input:focus {
  background-color: var(--colorWhity);
  border-color: var(--colorAccent);
}
.subscribe .email input.invalid {
  color: var(--colorError);
  border-color: currentColor;
}
.subscribe .email input {
  border-color: currentColor;
}
.subscribe .checkbox .checkboxLabel {
  color: var(--colorMain);
}
.subscribe .categoriesSelector {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (width <= 1024px) {
  .subscribe .categoriesSelector {
    grid-template-columns: 1fr;
  }
}
.subscribe .categoriesSelector .title {
  grid-column: 1/-1;
  margin-bottom: 12px;
  font: bold 16px/1.2 "Inter";
  letter-spacing: 1%;
  color: var(--colorMain);
}
.subscribe button {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 214px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.subscribe button:hover {
  background-color: var(--colorActive);
}
.subscribe button.disabled, .subscribe button[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
@media (width <= 540px) {
  .subscribe button {
    min-width: 100%;
  }
}
.subscribe input:not([type=checkbox]).invalid {
  color: #cc0101;
}

.breadcrumbs {
  padding-top: calc(2 * var(--headerOffset) + var(--headerMinHeight));
  margin-bottom: 24px;
  font: 14px/1.3 "Inter";
  letter-spacing: 0;
  color: var(--colorAccent);
}
.breadcrumbs a {
  overflow-wrap: anywhere;
}
.breadcrumbs a:not(:last-child)::after {
  content: "/";
  display: inline-block;
  margin-inline: 4px;
}
.breadcrumbs a:hover, .breadcrumbs a:active, .breadcrumbs a.active {
  color: var(--colorActive);
}
.breadcrumbs a:active, .breadcrumbs a.active {
  text-decoration: underline;
}

.itemTitle .article {
  margin-top: 24px;
  font: 18px/1 "Inter";
}

.itemDescription {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .itemDescription {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .itemDescription {
    --marginedBlockOffset: 40px;
  }
}
@media (width <= 768px) {
  .itemDescription {
    flex-direction: column;
    gap: 40px;
  }
}
@media (width <= 540px) {
  .itemDescription {
    gap: 20px;
  }
}
.itemDescription .image {
  flex-shrink: 0;
}
.itemDescription .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: var(--colorMain);
}
.itemDescription .name {
  font: 16px/1.3 "Inter";
  letter-spacing: 3%;
  color: var(--colorBlacky);
}
.itemDescription .availability {
  display: flex;
  align-items: center;
  gap: 8px;
  font: normal 14px/1.3 "Inter";
  letter-spacing: 0;
}
.itemDescription .prices {
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (width <= 540px) {
  .itemDescription .prices {
    flex-direction: column;
    gap: 20px;
    max-width: 200px;
  }
}
.itemDescription .price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: bold;
  font-size: 24px;
}
.itemDescription .price .priceValue {
  font: bold 16px/1.2 "Inter";
  letter-spacing: 1%;
}
.itemDescription .price .priceComment {
  font: normal 14px/1.3 "Inter";
  letter-spacing: 0;
}
.itemDescription .lastPrice {
  flex-shrink: 0;
}
.itemDescription .lastPrice .priceValue {
  font-size: 24px;
}
.itemDescription .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 344px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.itemDescription .button:hover {
  background-color: var(--colorActive);
}
.itemDescription .button.disabled, .itemDescription .button[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
.itemDescription .button {
  min-height: 53px;
}
@media (width <= 540px) {
  .itemDescription .button {
    min-width: 100%;
  }
}

/* Сопутствующие товары */
.attendants {
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 80px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .attendants {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .attendants {
    --marginedBlockOffset: 40px;
  }
}
.attendants .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
.attendants {
  display: grid;
  grid-template-columns: 345px 1fr;
  gap: 20px;
}
@media (width <= 1024px) {
  .attendants {
    grid-template-columns: 1fr;
  }
}
.attendants .controls {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (width <= 1024px) {
  .attendants .controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
}
@media (width > 1024px) {
  .attendants {
    container-type: inline-size;
  }
}
@media (width > 1024px) {
  .attendants .slider {
    max-width: calc(100cqw - 365px) !important;
  }
}
@media (width <= 1024px) {
  .attendants .slider {
    max-width: calc(100vw - 2 * var(--containerOuterMargin));
  }
}
.attendants .caption {
  font: bold 40px/1.3 "Inter";
  letter-spacing: 1%;
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  .attendants .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  .attendants .caption {
    font-size: 20px;
  }
}
.attendants .itemsList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.attendants .lineItemBlock {
  min-height: 134px;
}
@media (width > 540px) {
  .attendants .lineItemBlock:hover {
    border-color: var(--colorWhity);
  }
}
@media (width > 768px) {
  .attendants .lineItemBlock {
    gap: 20px 30px;
  }
}
@media (width > 768px) and (width <= 1700px) {
  .attendants .lineItemBlock {
    grid-template-columns: minmax(130px, auto) minmax(150px, auto) 1fr 188px;
    column-gap: 40px;
  }
}
@media (width > 768px) and (width <= 1280px) {
  .attendants .lineItemBlock {
    grid-template-columns: minmax(150px, auto) 1fr 188px;
  }
}
@media (width > 768px) and (width <= 1280px) and (width > 1200px) {
  .attendants .lineItemBlock {
    column-gap: 80px;
  }
}
@media (width > 768px) and (width <= 1700px) {
  .attendants .lineItemBlock .name-art {
    grid-column: 1/-1;
    gap: 6px;
  }
}
@media (width > 768px) and (width <= 1280px) {
  .attendants .lineItemBlock .availability {
    grid-column: 1/-1;
    margin-top: -14px;
  }
}

/* Пакетные предложения */
.offers {
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 80px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .offers {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .offers {
    --marginedBlockOffset: 40px;
  }
}
.offers .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
.offers {
  display: grid;
  grid-template-columns: 345px 1fr;
  gap: 20px;
}
@media (width <= 1024px) {
  .offers {
    grid-template-columns: 1fr;
  }
}
.offers .controls {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (width <= 1024px) {
  .offers .controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
}
.offers .controls .caption {
  font: bold 40px/1.3 "Inter";
  letter-spacing: 1%;
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  .offers .controls .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  .offers .controls .caption {
    font-size: 20px;
  }
}
@media (width > 1024px) {
  .offers {
    container-type: inline-size;
  }
}
@media (width > 1024px) {
  .offers .slider {
    max-width: calc(100cqw - 365px) !important;
  }
}
@media (width <= 1024px) {
  .offers .slider {
    max-width: calc(100vw - 2 * var(--containerOuterMargin));
  }
}
.offers .itemCard {
  --cardMaxWidth: auto;
}
.offers .itemCard .caption {
  --bg: #000;
}

.downloadAndSort {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.downloadAndSort .download {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 14px/1.3 "Unbounded";
  letter-spacing: 0;
  color: var(--colorAccent);
  transition: 0.15s color;
}
.downloadAndSort .download svg {
  flex-shrink: 0;
  width: 19px;
  height: auto;
}
.downloadAndSort .download svg path {
  transition: 0.15s stroke;
}
.downloadAndSort .download:hover {
  color: var(--colorActive);
}
.downloadAndSort .download:hover svg path {
  stroke: var(--colorActive);
}
.downloadAndSort .sorter {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 14px/1.3 "Inter";
  letter-spacing: 0;
  color: var(--colorLabel);
}

.catalogElements {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.catalogItems {
  display: flex;
  flex-direction: column;
  gap: 48px;
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .catalogItems {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .catalogItems {
    --marginedBlockOffset: 40px;
  }
}
.catalogItems .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
.catalogItems {
  margin-top: calc(2 * var(--marginedBlockOffset));
  margin-bottom: var(--marginedBlockOffset);
}
.catalogItems.hidden {
  display: none;
}
.catalogItems .controls {
  display: flex;
  gap: 48px;
  justify-content: flex-end;
}
.catalogItems .controls .showAll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px/1 "Unbounded";
  letter-spacing: 0;
  color: var(--colorAccent);
  text-transform: uppercase;
  transition: 0.15s color;
}
.catalogItems .controls .showAll.hidden {
  display: none;
}
.catalogItems .controls .showAll svg path {
  transition: 0.15s stroke;
  stroke: currentColor;
}
.catalogItems .controls .showAll:hover {
  color: var(--colorActive);
}

.block404 {
  --secondCol: 2;
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .block404 {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .block404 {
    --marginedBlockOffset: 40px;
  }
}
.block404 {
  display: grid;
  grid-template-columns: 555px 1fr;
}
@media (width <= 1640px) {
  .block404 {
    grid-template-columns: 368px 1fr;
  }
}
@media (width <= 768px) {
  .block404 {
    grid-template-columns: 409px 1fr;
  }
}
@media (width <= 680px) {
  .block404 {
    --secondCol: 1;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: var(--marginedBlockOffset);
  }
}
.block404 .text {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding-block: 40px;
  padding-inline: max(var(--containerOuterMargin), 50vw - 820px) 40px;
  font: 18px/1.3 "Inter";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .block404 .text {
    font-size: 16px;
    letter-spacing: 3%;
  }
}
@media (width <= 768px) {
  .block404 .text {
    padding-right: 20px;
    padding-block: 30px;
  }
}
@media (width <= 680px) {
  .block404 .text {
    grid-row: 2;
    padding-block: 0;
  }
}
.block404 .img {
  grid-row: 1;
  grid-column: var(--secondCol);
  width: 100%;
  height: 100%;
}
.block404 .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block404 .overlay {
  grid-row: 1;
  grid-column: var(--secondCol);
  align-self: center;
  justify-self: center;
  font: bold 150px/1 "Unbounded";
  color: var(--colorWhity);
}
@media (width <= 1024px) {
  .block404 .overlay {
    font-size: 100px;
  }
}
@media (width <= 768px) {
  .block404 .overlay {
    font-size: 60px;
  }
}
.block404 .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 195px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.block404 .button:hover {
  background-color: var(--colorActive);
}
.block404 .button.disabled, .block404 .button[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}

.deliveryCompanies {
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .deliveryCompanies {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .deliveryCompanies {
    --marginedBlockOffset: 40px;
  }
}
.deliveryCompanies .caption {
  margin-bottom: calc(0.5 * var(--marginedBlockOffset));
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font: bold 40px/1 "Unbounded";
  color: var(--colorMain);
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  .deliveryCompanies .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  .deliveryCompanies .caption {
    font-size: 20px;
  }
}
.deliveryCompanies .subcaption {
  font: normal 18px/1.3 "Inter";
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  .deliveryCompanies .subcaption {
    font-size: 16px;
    letter-spacing: 3%;
  }
}
@media (width <= 540px) {
  .deliveryCompanies .subcaption {
    font-size: 14px;
  }
}
.deliveryCompanies .companies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 84px;
  justify-items: center;
  align-items: center;
  gap: 20px 40px;
  font: bold 20px/1.3 "Inter";
  letter-spacing: 1%;
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  .deliveryCompanies .companies {
    column-gap: 20px;
    font-size: 18px;
  }
}
@media (width <= 768px) {
  .deliveryCompanies .companies {
    font-size: 16px;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 64px;
  }
}
.deliveryCompanies .companies > div {
  padding: 20px;
}
.deliveryCompanies .companies img {
  max-width: 100%;
  max-height: 40px;
}
@media (width <= 1024px) {
  .deliveryCompanies .companies img {
    max-height: 32px;
  }
}
@media (width <= 768px) {
  .deliveryCompanies .companies img {
    max-height: 26px;
  }
}

.deliveryType {
  display: grid;
  grid-template-columns: 510px 1fr;
  gap: 20px;
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .deliveryType {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .deliveryType {
    --marginedBlockOffset: 40px;
  }
}
@media (width <= 1200px) {
  .deliveryType {
    grid-template-columns: 308px 1fr;
  }
}
@media (width <= 840px) {
  .deliveryType {
    grid-template-columns: 1fr 268px;
  }
}
@media (width <= 540px) {
  .deliveryType {
    grid-template-columns: 1fr;
  }
}
.deliveryType .caption {
  font: bold 40px/1.3 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1200px) {
  .deliveryType .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  .deliveryType .caption {
    font-size: 20px;
  }
}
.deliveryType .variants {
  margin-left: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}
@media (width <= 840px) {
  .deliveryType .variants {
    grid-template-columns: 1fr;
  }
}
@media (width <= 540px) {
  .deliveryType .variants {
    margin-left: 0;
  }
}
.deliveryType .variant {
  max-width: 346px;
  display: flex;
  align-items: center;
  gap: 40px;
  font: bold 24px/1.3 "Inter";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1200px) {
  .deliveryType .variant {
    max-width: 288px;
    font-size: 18px;
  }
}
@media (width <= 840px) {
  .deliveryType .variant {
    max-width: 268px;
    gap: 20px;
  }
  .deliveryType .variant img {
    height: 78px;
    width: 78px;
    object-fit: scale-down;
    object-position: center;
  }
}
@media (width <= 540px) {
  .deliveryType .variant {
    font-size: 16px;
    max-width: 330px;
  }
}
.deliveryType .variant img {
  flex-shrink: 0;
}

.deliveryTariffs {
  display: grid;
  grid-template-columns: 42% 50%;
  align-items: center;
  justify-content: space-between;
}
@media (width <= 1024px) {
  .deliveryTariffs {
    grid-template-columns: calc(50% - 10px) 50%;
  }
}
@media (width <= 540px) {
  .deliveryTariffs {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.deliveryTariffs picture {
  font-size: 0;
  height: 100%;
}
.deliveryTariffs img {
  width: 100%;
  height: auto;
}
@media (width <= 710px) {
  .deliveryTariffs img {
    height: 100%;
    object-fit: cover;
  }
}
.deliveryTariffs .text {
  padding-left: 10px;
  padding-right: max(50vw - 820px, var(--containerOuterMargin));
  color: var(--colorMain);
  letter-spacing: 1%;
}
@media (width <= 540px) {
  .deliveryTariffs .text {
    padding-inline: var(--containerOuterMargin);
  }
}
.deliveryTariffs .text .caption {
  font: bold 32px/1.3 "Unbounded";
}
@media (width <= 1024px) {
  .deliveryTariffs .text .caption {
    font-size: 24px;
  }
}
@media (width <= 540px) {
  .deliveryTariffs .text .caption {
    font-size: 18px;
  }
}
.deliveryTariffs .text .subcaption {
  margin-top: 20px;
  font: 18px/1.3 "Inter";
}
@media (width <= 540px) {
  .deliveryTariffs .text .subcaption {
    font-size: 16px;
    letter-spacing: 3%;
  }
}
.deliveryTariffs .text a {
  font-weight: bold;
  color: var(--colorDark);
}

.deliveryPaiment {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .deliveryPaiment {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .deliveryPaiment {
    --marginedBlockOffset: 40px;
  }
}
@media (width <= 1024px) {
  .deliveryPaiment {
    gap: 40px;
  }
}
@media (width <= 540px) {
  .deliveryPaiment {
    gap: 20px;
  }
}
.deliveryPaiment .caption {
  font: bold 40px/1.3 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .deliveryPaiment .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  .deliveryPaiment .caption {
    font-size: 20px;
  }
}
.deliveryPaiment .paymentItems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
  font: 18px/1.3 "Inter";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .deliveryPaiment .paymentItems {
    grid-template-columns: 1fr 1fr;
    font-size: 16px;
    letter-spacing: 3%;
  }
}
@media (width <= 768px) {
  .deliveryPaiment .paymentItems {
    grid-template-columns: 1fr;
  }
}
@media (width <= 540px) {
  .deliveryPaiment .paymentItems {
    font-size: 14px;
    letter-spacing: 0;
  }
}
.deliveryPaiment .paymentItem {
  display: flex;
  align-items: center;
  gap: 20px;
}
.deliveryPaiment .paymentItem .icon {
  width: 78px;
  height: auto;
  flex-shrink: 0;
}

.callForPrice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .callForPrice {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .callForPrice {
    --marginedBlockOffset: 40px;
  }
}
@media (width <= 1024px) {
  .callForPrice {
    grid-template-columns: auto 1fr;
  }
}
@media (width <= 920px) {
  .callForPrice {
    grid-template-columns: 1fr 1fr;
  }
}
@media (width <= 540px) {
  .callForPrice {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}
.callForPrice .caption {
  font: bold 40px/1.3 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .callForPrice .caption {
    width: max-content;
    font-size: 28px;
  }
}
@media (width <= 920px) {
  .callForPrice .caption {
    width: auto;
  }
}
@media (width <= 540px) {
  .callForPrice .caption {
    font-size: 20px;
  }
}
.callForPrice .form {
  padding-left: 13px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.callForPrice label:not(.checkbox) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 500 14px/1 "Inter";
  color: var(--colorLabel);
  letter-spacing: 0;
}
.callForPrice label:not(.checkbox) input {
  outline: none;
  background-color: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding-inline: 24px;
  border: 1px solid var(--colorDisabled);
  border-radius: 12px;
  font: 500 14px/1 "Inter";
  color: var(--colorMain);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.callForPrice label:not(.checkbox) input:hover, .callForPrice label:not(.checkbox) input:focus {
  background-color: var(--colorWhity);
  border-color: var(--colorAccent);
}
.callForPrice label:not(.checkbox) input.invalid {
  color: var(--colorError);
  border-color: currentColor;
}
.callForPrice label:not(.checkbox) textarea {
  height: 100px;
  outline: none;
  background-color: transparent;
  appearance: none;
  padding: 16px 24px;
  border: 1px solid currentColor;
  border-radius: 12px;
  resize: vertical;
  font: 500 14px/1 "Inter";
  color: var(--colorMain);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.callForPrice label:not(.checkbox) textarea:hover, .callForPrice label:not(.checkbox) textarea:focus {
  background-color: var(--colorWhity);
}
.callForPrice label:not(.checkbox) textarea:focus {
  border-color: var(--colorAccent);
}
.callForPrice label.checkbox {
  margin-block: 16px;
  max-width: 460px;
}
.callForPrice .button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 184px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.callForPrice .button:hover {
  background-color: var(--colorActive);
}
.callForPrice .button.disabled, .callForPrice .button[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
@media (width <= 540px) {
  .callForPrice .button {
    width: 100%;
  }
}

/* Сроки доставки */
.terms {
  --imgWidth: 35%;
  --height: 321px;
  display: grid;
  grid-template-columns: 1fr var(--imgWidth);
  align-items: center;
  gap: 20px;
  height: var(--height);
}
@media (width <= 1024px) {
  .terms {
    --imgWidth: 41.6%;
    --height: 238px;
  }
}
@media (width <= 768px) {
  .terms {
    --imgWidth: 48.7%;
  }
}
@media (width <= 640px) {
  .terms {
    --height: auto;
    grid-template-columns: 1fr;
  }
}
.terms .text {
  font: bold 32px/1.3 "Unbounded";
  color: var(--colorMain);
  letter-spacing: 1%;
  padding-left: max(var(--containerOuterMargin), 50vw - 820px);
}
@media (width <= 1024px) {
  .terms .text {
    font-size: 24px;
  }
}
@media (width <= 640px) {
  .terms .text {
    font-size: 18px;
  }
}
.terms picture {
  width: 100%;
  height: var(--height);
}
@media (width <= 640px) {
  .terms picture {
    grid-row: 1;
  }
}
.terms img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advantages {
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .advantages {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .advantages {
    --marginedBlockOffset: 40px;
  }
}
.advantages .caption {
  margin-bottom: var(--marginedBlockOffset);
  font: bold 40px/1.2 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .advantages .caption {
    font-size: 28px;
  }
}
@media (width <= 640px) {
  .advantages .caption {
    font-size: 20px;
  }
}
.advantages .items {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (width <= 1024px) {
  .advantages .items {
    grid-template-columns: 1fr;
  }
}
.advantages .item {
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (width <= 1024px) {
  .advantages .item {
    align-items: flex-start;
    gap: 20px;
  }
}
.advantages .item .icon {
  width: 68px;
  height: auto;
}
.advantages .item .text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--colorMain);
}
.advantages .item .advantage {
  max-width: 480px;
  font: bold 24px/1.2 "Inter";
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  .advantages .item .advantage {
    font-size: 18px;
  }
}
@media (width <= 640px) {
  .advantages .item .advantage {
    font-size: 16px;
  }
}
.advantages .item .description {
  font: 16px/1.2 "Inter";
  letter-spacing: 3%;
}
@media (width <= 640px) {
  .advantages .item .description {
    font-size: 14px;
  }
}

.partner {
  background-color: var(--colorWhity);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .partner {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .partner {
    --marginedBlockOffset: 40px;
  }
}
.partner {
  margin-block: 0;
  padding-block: var(--marginedBlockOffset);
}
.partner .container {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (width <= 640px) {
  .partner .container {
    flex-direction: column;
    align-items: flex-start;
  }
}
.partner .text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.partner .caption {
  font: bold 32px/1.2 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .partner .caption {
    font-size: 24px;
  }
}
@media (width <= 640px) {
  .partner .caption {
    font-size: 18px;
  }
}
.partner .subcaption {
  max-width: 700px;
  font: 16px/1.2 "Inter";
  letter-spacing: 3%;
  color: var(--colorBlacky);
}
@media (width <= 640px) {
  .partner .subcaption {
    font-size: 14px;
  }
}
.partner .button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 221px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
.partner .button:hover {
  background-color: var(--colorActive);
}
.partner .button.disabled, .partner .button[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
@media (width <= 640px) {
  .partner .button {
    margin-left: 0;
  }
}

.historySlider {
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .historySlider {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .historySlider {
    --marginedBlockOffset: 40px;
  }
}
.historySlider .slider {
  max-width: 100%;
  display: flex;
  overflow-x: hidden;
}
.historySlider .slide {
  display: grid;
  grid-template-columns: 954px 1fr;
  align-items: center;
  gap: 20px;
}
@media (width <= 1560px) {
  .historySlider .slide {
    grid-template-columns: 1fr 1fr;
  }
}
@media (width <= 640px) {
  .historySlider .slide {
    grid-template-columns: 1fr;
  }
}
.historySlider picture, .historySlider img {
  height: 100%;
  max-width: 100%;
  font-size: 0;
}
.historySlider img {
  object-fit: cover;
}
.historySlider .text {
  --textWidth: 35vw;
  justify-self: end;
  width: 100%;
  max-width: calc(var(--textWidth) - max(50vw - 820px, var(--containerOuterMargin)));
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .historySlider .text {
    --textWidth: 41.6vw;
  }
}
@media (width <= 768px) {
  .historySlider .text {
    max-width: 100%;
  }
}
.historySlider .label {
  font: 16px/1.3 "Inter";
  letter-spacing: 3%;
  margin-bottom: 60px;
}
@media (width <= 1024px) {
  .historySlider .label {
    font-size: 14px;
  }
}
@media (width <= 768px) {
  .historySlider .label {
    margin-bottom: 32px;
  }
}
.historySlider .textContent {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.historySlider .caption {
  font: bold 40px/1.3 "Unbounded";
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  .historySlider .caption {
    font-size: 28px;
  }
}
@media (width <= 640px) {
  .historySlider .caption {
    font-size: 20px;
  }
}
.historySlider .slideText {
  font: 16px/1.3 "Inter";
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  .historySlider .slideText {
    font-size: 14px;
  }
}

.contactsMap {
  display: grid;
  grid-template-columns: 1fr 71vw;
  align-items: center;
  gap: 20px;
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .contactsMap {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .contactsMap {
    --marginedBlockOffset: 40px;
  }
}
@media (width <= 1024px) {
  .contactsMap {
    grid-template-columns: 1fr;
  }
  .contactsMap .text {
    grid-row: 2;
  }
}
.contactsMap .text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: max(50vw - 820px, var(--containerOuterMargin));
}
.contactsMap .contactField {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 16px/1.3 "Inter";
  letter-spacing: 3%;
}
.contactsMap .contactField b {
  margin-left: 2px;
  font: bold 14px/1.3 "Unbounded";
  letter-spacing: 0;
}
.contactsMap .links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.contactsMap .links svg {
  width: 32px;
  height: auto;
}
.contactsMap .map {
  height: 31vw;
}
.contactsMap .map iframe {
  width: 100%;
  height: 100%;
}
@media (width <= 1024px) {
  .contactsMap .map {
    height: 346px;
  }
}

.searchResultsInputForm {
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .searchResultsInputForm {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .searchResultsInputForm {
    --marginedBlockOffset: 40px;
  }
}

.searchResultTitle {
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .searchResultTitle {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .searchResultTitle {
    --marginedBlockOffset: 40px;
  }
}
.searchResultTitle .title {
  font: bold 40px/1.3 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .searchResultTitle .title {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  .searchResultTitle .title {
    font-size: 20px;
  }
}
.searchResultTitle mark {
  background-color: transparent;
  color: var(--colorDark);
}

.searchResults {
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .searchResults {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .searchResults {
    --marginedBlockOffset: 40px;
  }
}
.searchResults ~ .pager {
  margin-bottom: var(--marginedBlockOffset);
  --marginedBlockOffset: 60px;
  margin-top: var(--marginedBlockOffset);
}
@media (width <= 1024px) {
  .searchResults ~ .pager {
    --marginedBlockOffset: 60px;
  }
}
@media (width <= 768px) {
  .searchResults ~ .pager {
    --marginedBlockOffset: 40px;
  }
}

.searchResultItem {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--colorDisabled);
}
@media (width <= 540px) {
  .searchResultItem {
    padding-bottom: 20px;
  }
}
.searchResultItem:not(:first-child) {
  padding-top: 30px;
}
@media (width <= 540px) {
  .searchResultItem:not(:first-child) {
    padding-top: 20px;
  }
}
.searchResultItem .breadcrumbs {
  padding-top: 0;
  margin-bottom: 20px;
}
.searchResultItem .pageName {
  display: inline-block;
  font: bold 24px/1.3 "Inter";
  letter-spacing: 1%;
  color: var(--colorMain);
  margin-bottom: 8px;
  transition: color 0.15s;
}
@media (width <= 1024px) {
  .searchResultItem .pageName {
    font-size: 20px;
  }
}
.searchResultItem .pageName:hover {
  text-decoration: underline;
  color: var(--colorActive);
}
.searchResultItem .pageName:hover mark {
  color: inherit;
}
.searchResultItem mark {
  background-color: transparent;
  color: var(--colorDark);
  transition: color 0.15s;
}
.searchResultItem .text {
  font: 16px/1.3 "Inter";
  letter-spacing: 3%;
  color: var(--colorMain);
}
@media (width <= 1024px) {
  .searchResultItem .text {
    font-size: 14px;
  }
}

/* Стили для custom-select */
.selectWrapper {
  display: grid;
  align-items: center;
}
.selectWrapper .openerIcon {
  grid-column: 1;
  grid-row: 1;
  pointer-events: none;
  justify-self: end;
  transition: 0.15s transform;
  margin-right: 12px;
}
.selectWrapper .customSelect {
  grid-column: 1;
  grid-row: 1;
  border: 1px solid transparent;
}
.selectWrapper .customSelect.is-open + .openerIcon {
  transform: scaleY(-1);
}
.selectWrapper .custom-select-opener {
  background-color: transparent;
  font: 14px/1.3 "Inter";
  letter-spacing: 0;
  color: var(--colorMain);
  padding: 12px;
  padding-right: 40px;
}
.selectWrapper .custom-select-panel {
  transition: max-height 0.15s ease-out, overflow-y 0.1s 0.15s, border-color 0.15s;
  background-color: rgba(225, 239, 252, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  width: unset;
  min-width: calc(100% + 2px);
  right: -1px;
}
.selectWrapper .custom-select-panel .is-selected {
  text-decoration: underline;
}
.selectWrapper .custom-select-panel .is-selected::before {
  display: none;
}
.selectWrapper .custom-select-panel .has-focus {
  color: var(--colorActive);
  background-color: transparent;
  cursor: pointer;
}
.selectWrapper .custom-select-option {
  font: 14px/1.3 "Inter";
  letter-spacing: 0;
  color: var(--colorMain);
  padding: 4px 12px;
}
.selectWrapper .custom-select-option:first-child {
  padding-top: 12px;
}
.selectWrapper .custom-select-option:last-child {
  padding-bottom: 12px;
}

dialog.specialPrice {
  gap: 40px;
}
dialog.specialPrice .form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
dialog.specialPrice label:not(.checkbox) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 500 14px/1 "Inter";
  color: var(--colorLabel);
  letter-spacing: 0;
}
dialog.specialPrice label:not(.checkbox) input {
  outline: none;
  background-color: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding-inline: 24px;
  border: 1px solid var(--colorDisabled);
  border-radius: 12px;
  font: 500 14px/1 "Inter";
  color: var(--colorMain);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
dialog.specialPrice label:not(.checkbox) input:hover, dialog.specialPrice label:not(.checkbox) input:focus {
  background-color: var(--colorWhity);
  border-color: var(--colorAccent);
}
dialog.specialPrice label:not(.checkbox) input.invalid {
  color: var(--colorError);
  border-color: currentColor;
}
dialog.specialPrice label:not(.checkbox) textarea {
  height: 100px;
  outline: none;
  background-color: transparent;
  appearance: none;
  padding: 16px 24px;
  border: 1px solid currentColor;
  border-radius: 12px;
  resize: vertical;
  font: 500 14px/1 "Inter";
  color: var(--colorMain);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
dialog.specialPrice label:not(.checkbox) textarea:hover, dialog.specialPrice label:not(.checkbox) textarea:focus {
  background-color: var(--colorWhity);
}
dialog.specialPrice label:not(.checkbox) textarea:focus {
  border-color: var(--colorAccent);
}
dialog.specialPrice label.checkbox {
  margin-block: 16px;
  max-width: 460px;
}
dialog.specialPrice .button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 184px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
dialog.specialPrice .button:hover {
  background-color: var(--colorActive);
}
dialog.specialPrice .button.disabled, dialog.specialPrice .button[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
@media (width <= 540px) {
  dialog.specialPrice .button {
    width: 100%;
  }
}
dialog.specialPrice .caption {
  padding-right: 64px;
  font: bold 40px/1 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  dialog.specialPrice .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  dialog.specialPrice .caption {
    font-size: 24px;
    padding-right: 44px;
  }
}
dialog.specialPrice .subcaption {
  margin-top: 10px;
  color: var(--colorBlacky);
  font: 18px/1.3 "Inter";
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  dialog.specialPrice .subcaption {
    font-size: 16px;
    letter-spacing: 3%;
  }
}
@media (width <= 540px) {
  dialog.specialPrice .subcaption {
    font-size: 14px;
    letter-spacing: 0;
  }
}
dialog.specialPrice .info {
  color: var(--colorError);
  border: 1px solid currentColor;
  border-radius: 12px;
  padding: 16px;
  font: 18px/1.3 "Inter";
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  dialog.specialPrice .info {
    font-size: 16px;
    letter-spacing: 3%;
  }
}
@media (width <= 540px) {
  dialog.specialPrice .info {
    font-size: 14px;
    letter-spacing: 0;
  }
}
dialog.specialPrice .info p:first-child {
  max-width: 530px;
}
dialog.specialPrice .info p + p {
  margin-top: 10px;
}

dialog.writeUs {
  gap: 40px;
}
dialog.writeUs .form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
dialog.writeUs label:not(.checkbox) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 500 14px/1 "Inter";
  color: var(--colorLabel);
  letter-spacing: 0;
}
dialog.writeUs label:not(.checkbox) input {
  outline: none;
  background-color: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 60px;
  padding-inline: 24px;
  border: 1px solid var(--colorDisabled);
  border-radius: 12px;
  font: 500 14px/1 "Inter";
  color: var(--colorMain);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
dialog.writeUs label:not(.checkbox) input:hover, dialog.writeUs label:not(.checkbox) input:focus {
  background-color: var(--colorWhity);
  border-color: var(--colorAccent);
}
dialog.writeUs label:not(.checkbox) input.invalid {
  color: var(--colorError);
  border-color: currentColor;
}
dialog.writeUs label:not(.checkbox) textarea {
  height: 100px;
  outline: none;
  background-color: transparent;
  appearance: none;
  padding: 16px 24px;
  border: 1px solid currentColor;
  border-radius: 12px;
  resize: vertical;
  font: 500 14px/1 "Inter";
  color: var(--colorMain);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
dialog.writeUs label:not(.checkbox) textarea:hover, dialog.writeUs label:not(.checkbox) textarea:focus {
  background-color: var(--colorWhity);
}
dialog.writeUs label:not(.checkbox) textarea:focus {
  border-color: var(--colorAccent);
}
dialog.writeUs label.checkbox {
  margin-block: 16px;
  max-width: 460px;
}
dialog.writeUs .button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 184px;
  min-height: 56px;
  padding: 10px;
  border-radius: 60px;
  background-color: var(--colorAccent);
  color: #fff;
  font: 500 14px/1.2 "Unbounded";
  text-align: center;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: 0.15s background-color, 0.15s color, 0.15s border-color;
  cursor: pointer;
  user-select: none;
}
dialog.writeUs .button:hover {
  background-color: var(--colorActive);
}
dialog.writeUs .button.disabled, dialog.writeUs .button[disabled] {
  background-color: var(--colorDisabled);
  color: #949ea6;
  cursor: auto;
}
@media (width <= 540px) {
  dialog.writeUs .button {
    width: 100%;
  }
}
dialog.writeUs .caption {
  padding-right: 64px;
  font: bold 40px/1 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  dialog.writeUs .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  dialog.writeUs .caption {
    font-size: 24px;
    padding-right: 44px;
  }
}
dialog.writeUs .subcaption {
  margin-top: 10px;
  color: var(--colorBlacky);
  font: 18px/1.3 "Inter";
  letter-spacing: 1%;
}
@media (width <= 1024px) {
  dialog.writeUs .subcaption {
    font-size: 16px;
    letter-spacing: 3%;
  }
}
@media (width <= 540px) {
  dialog.writeUs .subcaption {
    font-size: 14px;
    letter-spacing: 0;
  }
}

dialog.search {
  margin-top: 0;
  width: calc(100vw - 2 * var(--containerOuterMargin));
  max-width: unset;
  top: 80px;
  background-color: var(--colorWhity);
  contain: layout;
  overflow: visible;
}
@media (width <= 1024px) {
  dialog.search {
    top: 40px;
  }
}
@media (width <= 540px) {
  dialog.search {
    top: 20px;
  }
}
dialog.search .caption {
  margin-bottom: 40px;
  font: bold 40px/1.3 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  dialog.search .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  dialog.search .caption {
    font-size: 20px;
  }
}
dialog.search .searchBlock {
  position: relative;
}
dialog.search .searchInput {
  position: relative;
  z-index: 2;
}
dialog.search .searchVariants {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: absolute;
  z-index: 1;
  top: calc(100% - 33px);
  left: 0;
  width: 100%;
  background-color: #f7f7f7;
  padding: 49px 20px 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  max-height: 156px;
  overflow-y: auto;
}
dialog.search .searchVariants .variant {
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--colorMain);
  font: 14px/1.3 "Inter";
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
}
dialog.search .searchVariants .variant:hover {
  background-color: var(--colorWhity);
  color: var(--colorActive);
}
dialog.search .searchInput.showVariants + .searchVariants:not(:empty) {
  display: flex;
}

dialog.notice .caption {
  padding-right: 64px;
  font: bold 40px/1 "Unbounded";
  letter-spacing: 1%;
  color: var(--colorBlacky);
}
@media (width <= 1024px) {
  dialog.notice .caption {
    font-size: 28px;
  }
}
@media (width <= 540px) {
  dialog.notice .caption {
    font-size: 24px;
    padding-right: 44px;
  }
}
dialog.notice .text {
  margin-top: 2em;
  font: 18px/1.2 "Inter";
}.keen-slider:not([data-keen-slider-disabled]){-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-content:flex-start;display:flex;overflow:hidden;position:relative;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-khtml-user-select:none;width:100%}.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide{min-height:100%;overflow:hidden;position:relative;width:100%}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse]{flex-direction:row-reverse}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v]{flex-wrap:wrap}.custom-select-container {
  position: relative;
  box-sizing: border-box;;
}
.custom-select-container * {
  box-sizing: border-box;
}
.custom-select-container.is-disabled {
  opacity: .333;
}
.custom-select-opener {
  background-color: #ccc;
  padding: 0.5em;
  display: block;
  cursor: pointer;
  width: 100%;
}
.custom-select-container select {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.custom-select-panel {
  max-height: 0;
  transition: max-height .5s ease-out, overflow-y 0.1s 0.5s;
  overflow: hidden;
  background-color: #e9e9e9;
  position: absolute;
  top: 100%;
  z-index: 1;
  width: 100%;
}
.custom-select-container.is-open .custom-select-panel {
  max-height: 10.7em;
  overflow-y: auto
}
.custom-select-option {
  padding: 0.5em;
}
.custom-select-option.has-focus {
  background-color: LightBlue;
}
.custom-select-option.is-selected::before {
  content: "✔";
  padding-right: 0.5em;
}
.custom-select-optgroup > .custom-select-option {
  padding-left: 2em;
}
.custom-select-optgroup::before {
  content: attr(data-label);
  display: block;
  padding: 0.5em;
  color: #888;
}