/* Contacts — Figma 2:3597 @1920; 191:8153 @1300; 191:8228 @900; 191:8298 @420; 161:7205 @360 */

/* —— Viewport-fit stage —— */
html:has(body.contacts-page),
body.contacts-page.product-page {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
  margin: 0;
  background: #fff;
}

body.contacts-page {
  --contacts-art: 1920;
  --contacts-scale: 1;
}

.contacts-stage {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.contacts-artboard {
  width: calc(var(--contacts-art) * 1px);
  margin: 0 auto;
  transform: scale(var(--contacts-scale));
  transform-origin: top left;
  will-change: transform;
}

@media (min-width: 1301px) {
  body.contacts-page {
    --contacts-art: 1920;
    --contacts-scale: calc(100vw / 1920);
  }
}

@media (max-width: 1300px) and (min-width: 1000px) {
  body.contacts-page {
    --contacts-art: 1300;
    --contacts-scale: calc(100vw / 1300);
  }
  html:has(body.contacts-page),
  body.contacts-page.product-page {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 999px) and (min-width: 700px) {
  body.contacts-page {
    --contacts-art: 900;
    --contacts-scale: calc(100vw / 900);
  }
  html:has(body.contacts-page),
  body.contacts-page.product-page {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 699px) and (min-width: 361px) {
  body.contacts-page {
    --contacts-art: 420;
    --contacts-scale: calc(100vw / 420);
  }
  html:has(body.contacts-page),
  body.contacts-page.product-page {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 360px) {
  body.contacts-page {
    --contacts-art: 360;
    --contacts-scale: calc(100vw / 360);
  }
  html:has(body.contacts-page),
  body.contacts-page.product-page {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* —— 1920 base (Figma header 104.5; chrome ≈108) —— */
.contacts-main {
  position: relative;
  width: 1920px;
  margin: 0 auto;
  padding-bottom: 0;
  box-sizing: border-box;
  /* Figma footer @902 − header 108 */
  min-height: 794px;
}

/* Breadcrumbs — Figma List 161×140×36; VerticalBorder 90° → 10×1 #ddd;
   Link frame: border-bottom 1px #262626 @16% */
.contacts-bc {
  position: absolute;
  left: 161px;
  top: 32px; /* Figma list y140 − header 108 */
  z-index: 2;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  width: auto;
  max-width: calc(100% - 161px);
  min-height: 36px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 14px;
}

.contacts-bc__link {
  box-sizing: border-box;
  color: #666666;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(38, 38, 38, 0.16);
  padding-bottom: 1px;
}

.contacts-bc__link:link,
.contacts-bc__link:visited,
.contacts-bc__link:hover,
.contacts-bc__link:focus {
  color: #666666;
  text-decoration: none;
}

.contacts-bc__sep {
  display: block;
  width: 10px;
  height: 1px;
  margin: 0 16px;
  background: #dddddd;
  flex-shrink: 0;
}

/* 1920 / 360: Regular #666, no underline; 1300–420: Light #262626 + underline */
.contacts-bc__current {
  box-sizing: border-box;
  color: #666666;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
}

.contacts-layout {
  position: relative;
  width: 1920px;
  height: 794px; /* footer @902 − header ~108 */
  margin: 0;
}

.contacts-title {
  position: absolute;
  left: 159px;
  top: 108px; /* 216 − 108 */
  margin: 0;
  width: 335px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 35.2px;
  letter-spacing: 0;
  color: #262626;
}

.contacts-pin {
  position: absolute;
  left: 159px;
  top: 193px; /* 301 − 108 */
  width: 131px;
  height: 131px;
  display: block;
}

/* —— Address / map (center col) —— */
.contacts-address {
  position: absolute;
  left: 605px;
  top: 108px;
  width: 526px;
}

.contacts-address__title {
  margin: 0 0 20px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 23.1px;
  letter-spacing: 0;
  color: #262626;
}

.contacts-card {
  box-sizing: border-box;
  position: relative;
  width: 410px;
  height: 73px;
  padding: 19px 16px 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.contacts-card__col--phone {
  position: absolute;
  left: 225px; /* 830 − 605 */
  top: 19px;
  width: 100px;
}

.contacts-card__name {
  margin: 0 0 3px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px; /* Figma text frame h=14 (style lh 20) */
  letter-spacing: 0;
  color: #666666;
}

.contacts-card__addr {
  margin: 0;
  width: 159px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 17.14px;
  letter-spacing: 0;
  color: #666666;
}

.contacts-card__phone-label {
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0;
  color: #666666;
}

.contacts-card__phone {
  display: block;
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0;
  color: #666666;
  text-decoration: none;
  white-space: nowrap;
}

.contacts-map {
  display: block;
  width: 526px;
  height: 444px;
  margin-top: 25px; /* 358 − (260+73) ≈ 25 */
  object-fit: cover;
  border-radius: 8px;
}

/* —— Info block (left under pin) —— */
.contacts-info {
  position: absolute;
  left: 161px;
  top: 360px; /* 468 − 108 */
  width: 360px;
}

.contacts-info__title {
  margin: 0 0 15px; /* 509.2 − 467.6 − 26.6 */
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 26.6px;
  letter-spacing: 0;
  color: #262626;
}

.contacts-info__label {
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0;
  color: #262626;
}

.contacts-info__phone-row {
  margin: 0;
  font-size: 14px;
  line-height: 25px;
}

.contacts-info__phone,
.contacts-info__hours {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0;
  color: #262626;
  text-decoration: none;
}

/* Figma Link: borderBottom 2px solid #ffdd00 (yellow) */
.contacts-info__phone {
  border-bottom: 2px solid #ffdd00;
  padding-bottom: 0;
}

.contacts-info__note,
.contacts-info__messengers,
.contacts-info__social-label {
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0;
  color: #262626;
}

.contacts-info__note {
  margin-bottom: 25px; /* 609.2 − 559.2 − 25 */
}

.contacts-info__messengers {
  margin-bottom: 0;
}

.contacts-info__messenger-phone {
  box-sizing: border-box;
  display: inline-block;
  margin: 0 0 32px; /* 684.2 − 634.2 − 18 (Link h) */
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
  color: #262626;
  text-decoration: none;
  border-bottom: 2px solid #ffdd00;
}

.contacts-info__email-row {
  margin: 0 0 25px; /* 734.2 − 684.2 − 25 */
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0;
  color: #262626;
}

.contacts-info__email-label {
  color: #262626;
  text-decoration: none;
  font-weight: 300;
  letter-spacing: 0;
}

.contacts-info__email {
  color: #262626;
  text-decoration: none;
  font-weight: 300;
  letter-spacing: 0;
  border-bottom: 2px solid #ffdd00;
}

.contacts-info__social-label {
  margin-bottom: 0;
}

.contacts-info__vk {
  box-sizing: border-box;
  display: inline-block;
  margin-top: 0;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
  color: #262626;
  text-decoration: none;
  border-bottom: 2px solid #ffdd00;
}

/* —— Form (right) —— */
.contacts-form-wrap {
  position: absolute;
  left: 1234px;
  top: 108px;
  width: 525px;
}

.contacts-form__title {
  margin: 0 0 26px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 23.1px;
  letter-spacing: 0;
  color: #262626;
}

.contacts-form__field {
  display: block;
  margin: 0 0 24px;
}

.contacts-form__label {
  display: block;
  margin: 0 0 12px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px; /* Figma node h=14; * + space Bold red, rest Regular #666 */
  letter-spacing: 0;
  color: #666666;
}

.contacts-form__req {
  font-weight: 700;
  color: #ff0000;
}

.contacts-form__input,
.contacts-form__textarea {
  box-sizing: border-box;
  display: block;
  width: 525px;
  margin: 0;
  padding: 8px 12px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #262626;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.contacts-form__input {
  height: 34px;
}

.contacts-form__textarea {
  height: 268px;
  resize: vertical;
}

.contacts-form__submit {
  box-sizing: border-box;
  display: block;
  width: 525px;
  height: 50px;
  margin: 0;
  padding: 0;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 45px;
  letter-spacing: 0;
  color: #262626;
  text-align: center;
  background: #ffd801;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.contacts-form__submit:hover {
  filter: brightness(0.97);
}

/* product.css adds 48px footer margin — Figma footer instance starts flush after content */
.contacts-page .site-footer {
  margin-top: 0;
}

/* ==========================================================================
   1300 — Figma 191:8153
   ========================================================================== */
@media (max-width: 1300px) and (min-width: 1000px) {
  .contacts-main,
  .contacts-layout {
    width: 1300px;
  }

  .contacts-layout {
    height: 1333px; /* footer @1441 − ~108 */
  }

  .contacts-bc {
    left: 19px;
    top: 28px; /* 136 − 108 */
    min-height: 20px;
    max-width: calc(100% - 19px);
  }

  /* Both crumbs: Light #262626 + Link underline (Figma 191:8158 / 191:8162) */
  .contacts-bc__current {
    font-weight: 300;
    color: #262626;
    border-bottom: 1px solid rgba(38, 38, 38, 0.16);
    padding-bottom: 1px;
  }

  .contacts-title {
    left: 19px;
    top: 80px; /* 188 − 108 */
    width: 144px;
  }

  .contacts-pin {
    left: 19px;
    top: 148px; /* 256 − 108 */
    width: 131px;
    height: 131px;
  }

  .contacts-address {
    left: 443px;
    top: 105px; /* 213 − 108 */
    width: 838px;
  }

  .contacts-card {
    width: 410px;
    height: 73px;
  }

  .contacts-card__col--phone {
    left: 225px; /* 668 − 443 */
  }

  .contacts-map {
    width: 838px;
    height: 444px;
    margin-top: 25px; /* 355 − (257+73) */
    border-radius: 8px;
  }

  .contacts-info {
    left: 21px;
    top: 315px; /* 423 − 108 */
    width: 360px;
  }

  /* Info Link underlines — yellow 2px (same as 1920 Link frames) */
  .contacts-info__phone,
  .contacts-info__messenger-phone,
  .contacts-info__email,
  .contacts-info__vk {
    border-bottom: 2px solid #ffdd00;
  }

  .contacts-form-wrap {
    left: 19px;
    top: 751px; /* 859 − 108 */
    width: 1262px;
  }

  .contacts-form__title {
    margin: 0 0 26px; /* 909 − 859 − 24 */
  }

  .contacts-form {
    display: grid;
    grid-template-columns: 626px 626px;
    column-gap: 10px; /* 655 − (19+626) */
    row-gap: 0;
  }

  .contacts-form__field--email {
    grid-column: 2;
    grid-row: 1;
  }

  .contacts-form__field--message {
    grid-column: 1 / -1;
  }

  .contacts-form__input,
  .contacts-form__textarea {
    width: 100%;
  }

  .contacts-form__field--message .contacts-form__textarea {
    width: 1262px;
    height: 268px;
  }

  .contacts-form__submit {
    grid-column: 1;
    width: 525px;
    height: 50px;
    margin-top: 0;
  }
}

/* ==========================================================================
   900 — Figma 191:8228
   ========================================================================== */
@media (max-width: 999px) and (min-width: 700px) {
  .contacts-main,
  .contacts-layout {
    width: 900px;
  }

  .contacts-layout {
    height: 1234px; /* footer @1342 − ~108 */
  }

  .contacts-bc {
    left: 77px;
    top: 16px;
    min-height: 20px;
  }

  .contacts-bc__current {
    font-weight: 300;
    color: #262626;
    border-bottom: 1px solid rgba(38, 38, 38, 0.16);
    padding-bottom: 1px;
  }

  .contacts-title {
    left: 77px;
    top: 64px; /* 172 − 108 */
    width: 144px;
  }

  .contacts-pin {
    left: 77px;
    top: 140px; /* 248 − 108 */
  }

  .contacts-address {
    left: 455px;
    top: 64px;
    width: 368px;
  }

  .contacts-card {
    width: 368px;
  }

  .contacts-map {
    width: 368px;
    height: 349px;
    margin-top: 25px;
  }

  .contacts-info {
    left: 79px;
    top: 307px; /* 415 − 108 */
    width: 360px;
  }

  .contacts-form-wrap {
    left: 77px;
    top: 652px; /* 760 − 108 */
    width: 746px;
  }

  .contacts-form {
    display: grid;
    grid-template-columns: 368px 368px;
    column-gap: 10px;
  }

  .contacts-form__field--email {
    grid-column: 2;
    grid-row: 1;
  }

  .contacts-form__field--message {
    grid-column: 1 / -1;
  }

  .contacts-form__input,
  .contacts-form__textarea {
    width: 100%;
  }

  .contacts-form__field--message .contacts-form__textarea {
    width: 746px;
  }

  .contacts-form__submit {
    width: 242px;
  }
}

/* ==========================================================================
   420 — Figma 191:8298
   ========================================================================== */
@media (max-width: 699px) and (min-width: 361px) {
  .contacts-main,
  .contacts-layout {
    width: 420px;
  }

  .contacts-layout {
    height: 1706px; /* footer @1780 − header 74 */
  }

  .contacts-main {
    min-height: 1706px;
  }

  .contacts-bc {
    left: 12px;
    top: 24px; /* 98 − 74 */
    min-height: 20px;
  }

  .contacts-bc__current {
    font-weight: 300;
    color: #262626;
    border-bottom: 1px solid rgba(38, 38, 38, 0.16);
    padding-bottom: 1px;
  }

  .contacts-title {
    left: 12px;
    top: 76px; /* 150 − 74 */
    width: 144px;
  }

  .contacts-pin {
    left: 10px;
    top: 144px; /* 218 − 74 */
  }

  .contacts-info {
    left: 12px;
    top: 311px; /* 385 − 74 */
    width: 396px;
  }

  .contacts-address {
    left: 12px;
    top: 644px; /* 718 − 74 */
    width: 396px;
  }

  .contacts-card {
    width: 396px;
  }

  .contacts-map {
    width: 396px;
    height: 349px;
  }

  .contacts-form-wrap {
    left: 12px;
    top: 1183px; /* 1257 − 74 */
    width: 396px;
  }

  .contacts-form {
    display: block;
  }

  .contacts-form__input,
  .contacts-form__textarea,
  .contacts-form__field--message .contacts-form__textarea {
    width: 396px;
  }

  .contacts-form__textarea {
    height: 145px;
  }

  .contacts-form__submit {
    width: 396px;
  }
}

/* ==========================================================================
   360 — Figma 161:7205
   ========================================================================== */
@media (max-width: 360px) {
  .contacts-main,
  .contacts-layout {
    width: 360px;
  }

  .contacts-layout {
    height: 1792px; /* 1866 − 74 */
  }

  .contacts-main {
    min-height: 1792px;
  }

  .contacts-bc {
    left: 16px;
    top: 25px; /* 99 − 74 */
    min-height: 20px;
  }

  .contacts-bc__current {
    font-weight: 400;
    color: #666666;
    border-bottom: 0;
    padding-bottom: 0;
  }

  .contacts-title {
    left: 16px;
    top: 74px; /* 148 − 74 */
    width: 108px;
    font-size: 24px;
    line-height: 31.2px; /* 24 × 1.3 */
  }

  .contacts-pin {
    left: 16px;
    top: 125px; /* 199 − 74 */
  }

  .contacts-info {
    left: 16px;
    top: 289px; /* 363 − 74 */
    width: 328px;
  }

  /* Figma tops: label 404.6 → phone 429.6 → note 460 → msg 516 →
     mphone 541 → email 591 → social 641 → vk 667.8 */
  .contacts-info__label,
  .contacts-info__phone-row,
  .contacts-info__phone,
  .contacts-info__hours,
  .contacts-info__note {
    line-height: 18.2px; /* RAW 1.3 × 14 */
  }

  .contacts-info__label {
    margin-bottom: 7px; /* 429.6 − 404.6 − 18.2 */
  }

  .contacts-info__phone-row {
    margin-bottom: 12px; /* 460 − 429.6 − 18.2 */
  }

  .contacts-info__note {
    max-width: 198px;
    height: 36px; /* Figma text frame */
    line-height: 18px;
    margin-bottom: 20px; /* 516 − 460 − 36 */
  }

  .contacts-info__messengers {
    line-height: 25px; /* 541 − 516 */
  }

  .contacts-info__messenger-phone,
  .contacts-info__vk {
    display: block;
    width: max-content;
  }

  .contacts-info__vk {
    margin-top: 2px; /* 667.8 − (641 + 25) */
  }

  .contacts-card__col--phone {
    left: 211px; /* 228 − 16 − 1px border */
  }

  .contacts-address {
    left: 16px;
    top: 672px; /* 746 − 74 */
    width: 328px;
  }

  .contacts-card {
    width: 328px;
  }

  .contacts-map {
    width: 328px;
    height: 277px;
    margin-top: 20px; /* 883 − (790 + 73) */
  }

  .contacts-form-wrap {
    left: 16px;
    top: 1146px; /* 1220 − 74 */
    width: 328px;
  }

  .contacts-form__input,
  .contacts-form__textarea,
  .contacts-form__field--message .contacts-form__textarea,
  .contacts-form__submit {
    width: 328px;
  }

  .contacts-form__textarea {
    height: 268px;
  }
}