/* ARVESSA visual refinements. Loaded after the legacy styles. */
html:root {
  --color-grey-300: #6e7278;
  --ink: #292b2d;
}

main {
  grid-template-columns: minmax(0, 1fr);
  gap: 104px;
  margin-top: 0;
}

main > *, .main-grid > * { min-width: 0; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--color-orange-200) !important;
  outline-offset: 3px !important;
}

.button-primary:hover,
.button-primary:focus-visible { background-color: var(--color-orange-300); }

.header__fixed { width: 100%; }
.header__fixed.header-fixed { box-shadow: 0 8px 24px rgba(28, 27, 25, .09); }
.header__search-input input { border-color: #e5e4e1; background: #f8f8f6; }
.header__search-input input::placeholder { color: #777b80; }
.header__search-input input:focus { background: #fff; border-color: var(--color-orange-200); }
.header__top-right a { font-weight: 700; color: #303133; }
.header__bottom-nav a:hover,
.header__top-nav a:hover,
.header__top-right a:hover { color: var(--color-orange-200); }
.mob-menu { display: none; }

.messengers-button {
  right: 20px;
  bottom: 20px;
  transform: none;
  width: 60px;
  height: 60px;
  box-shadow: 0 8px 24px rgba(15, 95, 145, .22);
}
.messengers-button::before,
.messengers-button::after { display: none; }

main h2 { letter-spacing: -.025em; }
.main-banner { margin: 0; isolation: isolate; }
.main-banner__image { z-index: -1; }
.main-banner__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,0) 52%);
  pointer-events: none;
}
.main-banner__content { gap: 20px; max-width: 550px; }
.main-banner__content h1 { letter-spacing: -.06em; }
.main-banner__content p { color: #363638; }
.main-banner__actions { display: flex; align-items: center; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.main-banner__content .button { margin: 0; max-width: none; }
.main-banner__catalog-link {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 12px 2px;
  color: #292b2d;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(41,43,45,.35);
  text-underline-offset: 5px;
}
.main-banner__catalog-link:hover { color: var(--color-orange-200); text-decoration-color: currentColor; }
.main-banner__sticker { background: rgba(39,40,41,.76); }
.main-banner__sticker-1 { background: rgba(39,40,41,.76); }

.benefits__wrapper { gap: 42px; }
.benefits__left { padding-top: 8px; }
.benefits__left h2 { font-size: 32px; line-height: 1.08; }
.benefits__list { gap: 14px; }
.benefits__item {
  min-height: 124px;
  padding: 22px 24px;
  border: 1px solid #eae7e3;
  border-radius: 14px;
  background: #f8f7f5;
}
.benefits__item span { font-size: 19px; line-height: 1.2; }
.benefits__item p { color: #606469; line-height: 1.5; }

.obtain__wrapper { gap: 32px; }
.obtain__list { gap: 22px; }
.obtain__item {
  gap: 0;
  border: 1px solid #ece9e5;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 24px rgba(32,28,24,.035);
}
.obtain__item-top { border-radius: 0; }
.obtain__item-image { height: 205px; }
.obtain__item-image img { transition: transform .4s ease; }
.obtain__item:hover .obtain__item-image img { transform: scale(1.035); }
.obtain__item-content { padding: 22px 24px 26px; }
.obtain__item-content span { font-size: 20px; }
.obtain__item-content p { color: #606469; line-height: 1.55; }

.main-listing .cat-wrap { max-width: 1580px; padding: 0 70px; }
.main-listing .cat-head { align-items: baseline; gap: 18px; }
.main-listing .cat-h1 { font-size: 36px; letter-spacing: -.035em; }
.main-listing .cat-count { font-size: 14px; color: #666a6f; }
.main-listing .cat-sub { color: #666a6f; font-size: 15px; }
.main-listing .cat-nav { margin: 0 0 10px; padding: 22px 1px 18px; }
.main-listing .cat-chip { border-color: #e5e1dd; color: #3c3d40; }
.main-listing .cat-chip.on { border-color: #292b2d; color: #fff; }
.main-listing .cat-grid { gap: 20px; }
.main-listing .cat-card {
  border-color: #e9e5e1;
  border-radius: 17px;
  box-shadow: 0 5px 20px rgba(32,28,24,.035);
}
.main-listing .cat-card:hover { box-shadow: 0 18px 42px rgba(32,28,24,.13); }
.main-listing .cat-card__imgwrap { aspect-ratio: 1.28; }
.main-listing .cat-card__body { padding: 18px 18px 20px; gap: 10px; }
.main-listing .cat-card__title { font-size: 18px; }
.main-listing .cat-card__tags { color: #666a6f; font-size: 13px; }
.main-listing .cat-card__price { font-size: 23px; }
.main-listing .cat-card__price small,
.main-listing .cat-card__old { color: #777b80; }
.main-listing .cat-card__btn {
  margin-top: 5px;
  border: 1px solid var(--color-orange-100);
  background: var(--color-orange-100);
  color: var(--color-orange-300);
  font-size: 14px;
}
.main-listing .cat-card__btn:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
.main-listing .cat-badge { background: var(--acc); }

.advantages__wrapper { gap: 48px; }
.advantages__content { gap: 42px; }
.advantages__list { gap: 22px; }
.advantages__item { padding-top: 24px; }
.advantages .done { border-radius: 18px; }

.main-materials__wrapper > p,
.accessories__top > p,
.about__content p,
.advantages__content p { color: #595d61; line-height: 1.65; }
.materials__block { border-color: #e9e5e1; }
.materials__item .footnote_500_12 { color: #666a6f; }

.faq__wrapper { border-color: #e9e5e1; border-radius: 22px; background: #fff; }
.faq__item { border: 1px solid #ece9e5; background: #f8f7f5; }
.faq__item-top { padding: 19px 24px; }
.faq__item-top:hover { color: var(--color-orange-200); }

.main-calculator { background: #f8f7f5; }
.calculator { background: #f8f7f5; }
.calculator__options-item { border: 1px solid #e9e5e1; box-shadow: 0 4px 18px rgba(32,28,24,.045); }
.calculator__options-total-wrapper { grid-template-columns: minmax(0,1fr); padding-left: 0; }
.calculator__total { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 5px; white-space: nowrap; }
.calculator__total-value { white-space: nowrap; }
.calculator__offer { background: #292b2d; }
.calculator__offer-item { border-color: #55575a; border-radius: 12px; }
.calculator__offer-form { border-radius: 16px; }
.calculator__offer-form .form__text,
.calculator__offer-form .form__text a { color: #666a6f; font-size: 12px; line-height: 1.45; }

.file-picker { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; cursor: pointer; }
.file-picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-picker__button { display: inline-flex; align-items: center; justify-content: center; padding: 9px 13px; border: 1px solid #d8d6d3; border-radius: 9px; background: #f8f7f5; color: #303133; font-weight: 600; white-space: nowrap; }
.file-picker__name { flex: 1; min-width: 110px; font-size: 12px; color: #666a6f; overflow-wrap: anywhere; }
.file-picker:focus-within { outline: 3px solid var(--color-orange-200) !important; outline-offset: 3px !important; border-radius: 9px; }

.header a,
.cat-chip,
.cat-card__btn,
.main-banner__catalog-link { transition-duration: .2s; }

@media (min-width: 1024px) {
  .header__top { background: #f8f7f5; }
  .header__top-wrapper { padding: 10px 0; }
  .header__top-nav li:not(.header__sub-menu li) { margin-right: 23px; }
  .header__fixed-wrapper { height: 131px; }
  .header__fixed { gap: 13px; padding: 13px 0; border-bottom: 1px solid #ebe9e5; }
  .header__fixed.header-fixed { gap: 0; padding: 9px 0; }
  .header__logo { margin-right: 31px; }
  .header__logo img { width: 166px; height: auto; }
  .header__search { margin-right: 24px; }
  .header__search-input input { padding: 12px 18px 12px 51px; border-radius: 12px; }
  .header__search-input svg { left: 17px; width: 20px; height: 20px; }
  .header__buttons { margin-right: 26px; }
  .header__buttons a { width: 46px; height: 46px; border-radius: 12px; }
  .header__button-calc { padding: 12px 22px; border-radius: 12px; }
  .header__bottom-nav { font-size: 16px; }
  .header__menu,
  .header__bottom-nav-list li:not(:last-child) { margin-right: 25px; }
  .header__bottom-promo { font-size: 13px; }
  .main-banner__wrapper { min-height: 515px; padding: 75px 0 64px; }
  .main-banner__content h1 { font-size: clamp(72px, 7vw, 98px); line-height: .94; }
  .main-banner__content h1 br { display: block; }
  .main-banner__content p { font-size: 25px; }
  .main-banner__sticker { display: none; }
}

@media (min-width: 1024px) and (max-width: 1300px) {
  .main-listing .cat-wrap { padding-inline: 40px; }
  .header__top-nav li:not(.header__sub-menu li) { margin-right: 15px; }
  .header__bottom-nav-list li:not(:last-child), .header__menu { margin-right: 15px; }
  .header__logo { margin-right: 18px; }
  .header__search { margin-right: 16px; }
  .header__buttons { margin-right: 14px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .header__top-left { width: 180px; margin-right: 12px; white-space: nowrap; }
  .header__top-nav li:nth-child(4),
  .header__top-nav li:nth-child(5) { display: none; }
  .header__top-nav li:not(.header__sub-menu li) { margin-right: 13px; white-space: nowrap; }
  .header__top-right { white-space: nowrap; }
  .header__fixed.header-fixed .header__bottom,
  .header__fixed.header-fixed.for-stone .header__bottom { left: calc(50% - 80px); width: 340px !important; }
  .header__fixed.header-fixed .header__bottom-left { width: auto; margin-right: 16px; }
  .header__fixed.header-fixed .header__bottom-right { display: none; }
  .header__fixed.header-fixed .header__menu-button { white-space: nowrap; font-size: 16px; }
  .main-calculator .calculator { grid-template-columns: minmax(0, 1fr); }
  .main-calculator .calculator__options { width: 100%; max-width: 760px; margin-inline: auto; padding: 40px 30px; }
  .main-calculator .calculator__offer { border-radius: 0; }
  .main-calculator .calculator__offer-wrapper { max-width: 960px; margin-inline: auto; padding: 44px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .obtain__item-image img,
  .cat-card,
  .cat-card__imgwrap img { transition: none !important; }
}

@media (max-width: 767px) {
  .messengers-button { display: none; }
  .catalog__sorting-select-list-wrapper { left: auto; right: 0; min-width: 160px; }
  .catalog__sorting-select-list a { white-space: nowrap; }
  .filter__button-close { display: grid; place-items: center; top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid #e9e5e1; border-radius: 10px; background: #f8f7f5; color: #292b2d; }
  .filter__button-close::before,
  .filter__button-close::after { display: none; }
  .filter__title { padding-right: 38px; }
}

@media (max-width: 1023px) {
  .mob-menu {
    position: fixed;
    top: var(--mob-menu-top, 145px);
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    height: calc(100dvh - var(--mob-menu-top, 145px));
    padding: 0;
    border-top: 1px solid #ebe9e5;
    background: #fff;
    box-shadow: 0 20px 32px rgba(25, 25, 26, .12);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    z-index: 200;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .mob-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .mob-menu__panel { display: grid; gap: 22px; max-width: 720px; margin: 0 auto; padding: 22px 20px 40px; }
  .mob-menu__heading { display: flex; justify-content: space-between; align-items: center; font-size: 25px; color: #292b2d; }
  .mob-menu__close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #e9e5e1; border-radius: 10px; background: #f8f7f5; color: #292b2d; cursor: pointer; }
  .mob-menu__group { display: grid; gap: 0; border-top: 1px solid #e9e5e1; }
  .mob-menu__group p { padding: 18px 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6a6d72; }
  .mob-menu__group a { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid #f0eeeb; color: #292b2d; font-size: 16px; font-weight: 600; }
  .mob-menu__group a span { color: var(--color-orange-200); font-size: 19px; }
  .mob-menu__group a:hover { color: var(--color-orange-200); }
  .mob-menu__primary { width: 100%; min-height: 48px; }
  .mob-menu__phone { justify-self: center; color: #292b2d; font-size: 19px; font-weight: 700; }
}