/* Стили витрины VUA JEWELS.

   Параметры сняты с vua-studio.com (вычисленные стили, 26.09.2026), вёрстка своя:
   шаблон Megagroup не копируем. Эталонные скриншоты — docs/design/reference/.
   Порядок: шрифты → переменные → база → шапка → меню → подвал → блоки страниц. */

/* ---------- Шрифты (OFL, лежат рядом: fonts/) ---------- */

@font-face { font-family: "Montserrat"; font-weight: 300; font-display: swap; src: url("fonts/montserrat-cyrillic-300-normal.0102c90d5306.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-weight: 300; font-display: swap; src: url("fonts/montserrat-latin-300-normal.72b0488e9660.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("fonts/montserrat-cyrillic-400-normal.a0f7d018d696.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("fonts/montserrat-latin-400-normal.e7198b2dcb57.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("fonts/montserrat-cyrillic-600-normal.1531497cf6c6.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("fonts/montserrat-latin-600-normal.9e606da1cbeb.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-weight: 400; font-display: swap; src: url("fonts/oswald-cyrillic-400-normal.3acd9a25b163.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-weight: 400; font-display: swap; src: url("fonts/oswald-latin-400-normal.b2a5bf57bad8.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Переменные ---------- */

:root {
  /* цвета: в скобках — где на старом сайте */
  --ink: #000;                    /* текст, линии шапки, кнопки */
  --ink-heading: #272727;         /* H1 внутренних страниц */
  --ink-soft: rgba(0, 0, 0, .75); /* основной текст статей */
  --ink-muted: rgba(0, 0, 0, .6); /* подписи, названия в листинге */
  --paper: #fff;                  /* фон внутренних страниц, верх подвала */
  --sand: #f2eee9;                /* шапка, главная, подложка карточек листинга */
  --sand-light: #faf8f6;          /* вторичные секции */
  --gold: #cea986;                /* низ подвала, рамка арки */
  --gold-link: #d6a87d;           /* ссылки хлебных крошек, активный пункт меню */
  --gold-tint: #e8dccf;           /* подсветка текущего пункта меню */
  --line: #000;
  --line-soft: #dcd6ce;           /* строки характеристик */

  --font-text: "Montserrat", Arial, sans-serif;
  --font-head: "Oswald", "Arial Narrow", sans-serif;

  /* шкала: 16 / 18 / 20 / 25 / 32 / 35 / 40 — как на старом сайте */
  --fs-small: 14px;
  --fs-body: 18px;
  --fs-lead: 20px;
  --fs-h4: 20px;
  --fs-h3: 25px;
  --fs-h2: 35px;
  --fs-h1: 40px;

  --max: 1400px;
  --gutter: 32px;
  --space: 24px;
}

@media (max-width: 991px) {
  :root { --fs-h2: 30px; --fs-h3: 22px; }
}
@media (max-width: 767px) {
  :root { --fs-body: 16px; --fs-lead: 18px; --fs-h1: 35px; --fs-h2: 25px; --fs-h3: 20px; --gutter: 16px; }
}
@media (max-width: 479px) {
  :root { --fs-h1: 30px; }
}

/* ---------- База ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--font-text);
  display: flex; flex-direction: column; min-height: 100vh;  /* подвал внизу и на коротких страницах */
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; line-height: 1.2; color: var(--ink-heading); margin: 0 0 .6em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.main { padding-block: 30px 80px; }
@media (max-width: 767px) { .main { padding-top: 24px; } }
/* Внутренние страницы при открытии «вырастают» — zoomIn из animate.css, 1 с, как на старом сайте */
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
.main { animation: zoomIn 1s both; }
@media (prefers-reduced-motion: reduce) { .main { animation: none; } }

.icon { width: 24px; height: 24px; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 100; padding: 8px 16px; background: var(--ink); color: var(--paper); }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn {
  display: inline-block;
  padding: 11px 44px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 var(--fs-h3)/1.3 var(--font-head);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #262626; }

/* ---------- Шапка ---------- */
/* Как новая шапка vua-studio.com (Mosaic, 30.09.2026): логотип 70 px, адрес и телефон
   с иконками 25 px; на планшете всё в столбик, на телефоне — крупный логотип и телефон по центру. */

.site-header { background: var(--sand); border-bottom: 1px solid var(--line); }
.site-header__row { display: flex; align-items: center; min-height: 93px; padding-block: 10px; }
.site-header__logo { flex: none; }
.site-header__logo picture { display: block; }
.site-header__logo img { width: 70px; height: auto; }
.site-header__contact { display: flex; align-items: center; gap: 20px; margin: 0; font-size: 20px; line-height: 1.15; text-decoration: none; white-space: nowrap; }
.site-header__contact .icon { width: 25px; height: 25px; margin-inline: 12px; }
.site-header__contact:hover { text-decoration: underline; }
/* ПК: три колонки 1fr / auto / 1fr — адрес всегда по центру шапки, с кабинетом и без него;
   телефон и кабинет (.site-header__right) прижаты к правому краю. Справа — запас под кнопку меню. */
.site-header__right { display: contents; }  /* планшет и телефон: пункты прямо в шапке, как раньше */
@media (min-width: 992px) {
  .site-header__account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* на ПК — только значок */
  .site-header__row { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 40px; }
  .site-header__right { display: flex; align-items: center; justify-self: end; gap: 24px; margin-right: 80px; }
}
/* Кнопка меню (fixed, справа 25 px) уходит за край контейнера от 1590 px — запас
   под неё не нужен: последний пункт встаёт по правому краю карусели. */
@media (min-width: 1590px) { .site-header__right { margin-right: 0; } }

@media (max-width: 991px) {
  .site-header__row { flex-direction: column; align-items: center; }
  .site-header__contact { min-height: 50px; box-sizing: content-box; }
  .site-header__address { align-self: stretch; margin: 25px 0 0; padding-block: 10px; }
  .site-header__phone { align-self: flex-start; margin: 0 0 25px; padding-block: 10px; }
  .site-header__account { align-self: flex-start; margin: -15px 0 25px; }
}
/* На телефоне компактнее, чем на старом сайте (решено 30.09.2026): одна строка —
   логотип слева, справа иконки телефона и кабинета без подписей, за ними кнопка меню. */
@media (max-width: 767px) {
  .site-header__row { flex-direction: row; min-height: 70px; padding-block: 8px; padding-right: 50px; }
  .site-header__logo img { width: 52px; }
  .site-header__address { display: none; }
  .site-header__contact { min-height: 0; font-size: 0; gap: 0; }
  .site-header__contact .icon { width: 26px; height: 26px; margin: 9px; }  /* поле нажатия 44 px */
  .site-header__phone { align-self: center; margin: 0 0 0 auto; padding: 0; }
  .site-header__account { align-self: center; margin: 0; }
}

/* ---------- Горизонтальное меню (старый сайт, 12.10.2026) ----------
   Montserrat 18/400, пункты с отступом 50 px (30 на планшете), на телефоне скрыто. */

.hor-menu { padding: 20px 30px 30px; }
.hor-menu__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.hor-menu__list li { flex-shrink: 0; margin-inline: 50px; }
.hor-menu__link { display: block; padding-block: 5px; font: 400 18px/normal var(--font-text); text-decoration: none; }
.hor-menu__link:hover, .hor-menu__link.is-current { color: var(--gold-link); }
body:has(.home) .hor-menu { background: var(--sand); }  /* на главной фон бежевый, как шапка */
@media (max-width: 991px) { .hor-menu__list li { margin-inline: 30px; } }
@media (max-width: 767px) { .hor-menu { display: none; } }

/* ---------- Меню: кнопка всегда на экране, панель справа ---------- */

.menu-open {
  position: fixed; top: 15px; right: 25px; z-index: 20;
  display: grid; place-items: center; width: 70px; height: 70px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.menu-open .icon { width: 20px; height: 18px; }
@media (max-width: 767px) { .menu-open { top: 10px; right: 5px; width: 50px; height: 50px; } }  /* по центру шапки в 70 px */

.menu {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(265px, 100vw - 50px); max-width: none; height: 100dvh; max-height: none;
  padding: 0; border: 0; overflow: visible;
  background: var(--paper); color: var(--ink);
}
.menu::backdrop { background: rgba(0, 0, 0, .4); }
.menu[open] { animation: menu-in .25s ease-out; }
@keyframes menu-in { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .menu[open] { animation: none; } html { scroll-behavior: auto; } }

.menu__panel { height: 100%; overflow-y: auto; }
.menu__close {
  position: absolute; top: 0; right: 100%;
  display: grid; place-items: center; width: 50px; height: 50px;
  border: 0; background: var(--gold); color: var(--paper); cursor: pointer;
}
.menu__list, .menu__sub { list-style: none; margin: 0; padding: 0; }
.menu__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px; font: 400 25px/1.2 var(--font-head); text-decoration: none; cursor: pointer;
}
.menu__link:hover, .menu__link.is-current { background: var(--gold-tint); }
summary.menu__link { list-style: none; }
summary.menu__link::-webkit-details-marker { display: none; }
.menu__chevron { width: 25px; height: 25px; padding: 2px; background: var(--gold); transition: transform .2s; }
.menu__group[open] .menu__chevron { transform: rotate(180deg); }
.menu__sub { padding: 0 20px 12px 32px; }
.menu__sublink { display: block; padding: 8px 0; font-size: 16px; font-weight: 300; line-height: 1.4; text-decoration: none; }
.menu__sublink:hover, .menu__sublink.is-current { color: var(--gold-link); }

/* ---------- Подвал ---------- */

.site-footer { font-size: var(--fs-lead); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-block: 20px; background: var(--paper); }
.site-footer__phones { display: flex; gap: 24px; align-items: flex-start; }
.site-footer__phones div { display: flex; flex-direction: column; }
.site-footer__logo img { width: 62px; height: auto; }
.site-footer__social { justify-self: end; text-align: center; }
.site-footer__social p { margin: 0 0 8px; }
/* значки соцсетей — со старого сайта: чёрный знак 25 px в поле 32 px */
.site-footer__social ul { display: flex; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.site-footer__social a { display: grid; place-items: center; width: 32px; height: 32px; }
.site-footer__social .icon { width: 25px; height: 25px; }
.site-footer__social a:hover { opacity: .7; }

.site-footer__bottom { background: var(--gold); font-size: var(--fs-small); line-height: 1.45; }
.site-footer__legal { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 64px; align-items: center; padding-block: 20px; }
.site-footer__legal p { margin: 0; }
.site-footer__legal a { display: inline-block; padding-block: 4px; text-decoration: underline; }  /* цель нажатия ≥ 24px */
.site-footer__up { display: grid; place-items: center; width: 40px; height: 40px; }

@media (max-width: 767px) {
  .site-footer__top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer__phones { flex-direction: column; align-items: center; gap: 8px; }
  .site-footer__social { justify-self: center; }
  .site-footer__legal { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .site-footer__legal p:nth-child(2) { grid-row: 2; }
}

/* ---------- Хлебные крошки ---------- */

.crumbs { grid-column: 1 / -1; font-size: var(--fs-lead); margin-bottom: 40px; }
.crumbs a { color: var(--gold-link); font-weight: 600; }
@media (max-width: 767px) { .crumbs { font-size: 16px; margin-bottom: 24px; } .crumbs__current { display: none; } }

/* ---------- Листинг категории (эталон — docs/design/reference/category.jpg) ---------- */

.listing__title { margin-bottom: 16px; }
.listing__text { margin-bottom: 32px; }
@media (max-width: 767px) { .listing__title { margin-bottom: 12px; } }

.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 479px) { .grid { grid-template-columns: 1fr; } }
.card__link {
  display: flex; flex-direction: column; height: 100%; padding: 30px;
  background: var(--sand); color: var(--ink-muted); text-decoration: none;
}
@media (max-width: 767px) { .card__link { padding: 12px; } }
.card__photo { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sand-light); }
.card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card__link:hover .card__photo img { transform: scale(1.03); }
.card__link:hover .card__title { color: var(--ink); }
/* Плитка линейки: под фото — кружки цветов камня (макет «Варианты в карточке») */
.card__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.card__dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, .2); }
.card__dots + .card__title { margin-top: 10px; }
.card__title { margin-top: 24px; font-weight: 600; font-size: var(--fs-lead); line-height: 1.3; }
.card__price { margin-top: 4px; font-weight: 600; font-size: var(--fs-lead); line-height: 1.5; }
@media (max-width: 767px) { .card__title { margin-top: 12px; font-size: 15px; } .card__price { font-size: 15px; } }
@media (max-width: 479px) { .card__title, .card__price { font-size: var(--fs-lead); } }
@media (prefers-reduced-motion: reduce) { .card__photo img { transition: none; } }

/* ---------- Карточка товара (эталон — docs/design/reference/item.jpg) ---------- */

.product__title { margin-bottom: 16px; }
/* ссылка в учёт — только сотрудникам с правом на учёт (storefront.views.staff_uchet) */
.staff-bar { margin: -8px 0 16px; font-size: 13px; color: hsl(0, 0%, 45%); }
.staff-bar a { color: inherit; text-decoration: underline dotted; }
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 991px) { .product { grid-template-columns: 1fr; gap: 32px; } .product__title { margin-bottom: 12px; } }

.gallery { position: relative; min-width: 0; }
.gallery__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; background: var(--sand);
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 1; }
.gallery__slide a { display: block; height: 100%; cursor: zoom-in; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__arrow {
  position: absolute; top: 0; margin-top: calc(50% - 28px);  /* центр квадратного фото: 50% ширины */
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; background: transparent; color: var(--paper); cursor: pointer;
}
.gallery__arrow::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(0, 0, 0, .5); transition: background-color .2s; }
.gallery__arrow:hover::before { background: rgba(0, 0, 0, .7); }
.gallery__arrow .icon { position: relative; width: 26px; height: 26px; }
.gallery__arrow--prev { left: 24px; }
.gallery__arrow--prev .icon { transform: rotate(90deg); }
.gallery__arrow--next { right: 24px; }
.gallery__arrow--next .icon { transform: rotate(-90deg); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.gallery__thumbs a { display: block; aspect-ratio: 1; outline: 1px solid transparent; outline-offset: -1px; opacity: .6; transition: opacity .15s; }
.gallery__thumbs a:hover { opacity: 1; }
.gallery__thumbs a[aria-current] { opacity: 1; outline-color: var(--ink); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .gallery__arrow { display: none; } .gallery__thumbs { grid-template-columns: repeat(6, 1fr); } }

.product__subtitle { font-size: 24px; color: var(--ink-heading); margin: 0 0 16px; }

/* Варианты линейки: покрытие и цвет камня — ссылки на соседние карточки (макет «Варианты в карточке») */
.picker { margin: 0 0 22px; }
.picker__legend { margin: 0 0 10px; font-size: 15px; }
.picker__legend b { font-weight: 600; }
.chips, .swatches { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.chips { gap: 8px; }
.swatches { gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--line-soft); background: var(--paper); font: 400 15px/1.2 var(--font-text);
  color: var(--ink); text-decoration: none;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-current], .swatch[aria-current] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.coat { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.coat--gold { background: linear-gradient(135deg, #f3d27a, #b8862c); }
.coat--part { background: linear-gradient(135deg, #e9e9ea 50%, #c99a3b 50%); }
.coat--silver { background: linear-gradient(135deg, #f4f4f5, #bdbdc2); }
.coat--dark { background: linear-gradient(135deg, #5b5b60, #1d1d20); }
.swatch { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-soft); background: var(--paper); }
.swatch:hover { border-color: var(--ink); }
.swatch[aria-current] { box-shadow: 0 0 0 1px var(--ink); }
.swatch > span:first-child {
  width: 28px; height: 28px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), inset 0 3px 6px rgba(255, 255, 255, .35);
}
.product__text { margin-bottom: 24px; }
.product__text p { margin: 0 0 .8em; }

.specs { margin: 0 0 32px; }
.specs div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.specs dd { margin: 0; }
.product__price { font: 400 32px/1.2 var(--font-head); margin: 0 0 16px; }

/* ---------- Главная (эталоны — docs/design/reference/home-*.jpg) ---------- */

.home > section { padding-block: 80px; }
@media (max-width: 767px) { .home > section { padding-block: 48px; } }
.home-hero, .home-split, .home-section--sand { background: var(--sand); }
.home-section--light { background: var(--sand-light); }
.home h2 { font-size: var(--fs-h2); margin-bottom: 40px; }
.caps { text-transform: uppercase; }
.justify p { text-align: justify; hyphens: auto; }

/* ссылка «Читать дальше ›» — Oswald, при --line подчёркнута линией */
.more { font: 400 var(--fs-lead)/1.3 var(--font-head); text-decoration: none; white-space: nowrap; }
.more:hover { color: var(--gold-link); }
.more--line { display: inline-block; padding: 0 8px 10px; border-bottom: 1px solid var(--ink); }
.btn--block { display: block; width: 100%; text-align: center; font-size: var(--fs-lead); padding: 14px 16px; }

/* арка и рамка — фирменные формы старого сайта */
.arch-top img { border-radius: 999px 999px 0 0; }
.framed { padding: 16px; background: var(--sand); outline: 1px solid var(--gold); outline-offset: -1px; }

/* Первый экран: заголовок по центру, подпись справа, три фото, среднее в арке */
.home-hero { padding-top: 0 !important; }  /* отступ даёт меню; на телефоне меню нет — см. ниже */
.home-hero__title { text-align: center; font-size: var(--fs-h1) !important; line-height: normal; margin-bottom: 30px !important; }
.home-hero__lead { text-align: right; font-size: 20px; margin-bottom: 35px; }
/* Карусель: 3 фото в ряд, центральное в арке; лента едет на одно фото (site.js).
   Размеры слайдов одинаковые — арка рисуется рамкой с отступом, раскладка не прыгает. */
.hero-carousel { overflow: hidden; }
.hero-carousel__track { display: flex; gap: 32px; will-change: transform; }
.hero-carousel__track.is-moving { transition: transform .9s ease; }
.hero-carousel__slide {
  flex: 0 0 calc((100% - 64px) / 3); margin: 0; aspect-ratio: 427 / 540;
  display: flex; align-items: flex-end;
  padding: 0; border: 1px solid transparent; border-bottom: 0; border-radius: 0;
  transition: padding .9s ease, border-color .9s ease, border-radius .9s ease;
}
.hero-carousel__slide img { width: 100%; height: calc(100% * 500 / 540); object-fit: cover; border-radius: 0; transition: border-radius .9s ease, height .9s ease; }
.hero-carousel__slide.is-center { padding: 20px 20px 0; border-color: var(--gold); border-radius: 999px 999px 0 0; }
.hero-carousel__slide.is-center img { height: 100%; border-radius: 999px 999px 0 0; }
@media (max-width: 767px) {
  .home-hero { padding-top: 20px !important; padding-bottom: 32px !important; }
  .home-hero__title { margin-bottom: 20px !important; }
  .home-hero__lead { text-align: center; font-size: var(--fs-lead); margin-bottom: 15px; }
  .hero-carousel__track { gap: 16px; }
  .hero-carousel__slide { flex-basis: 64%; }  /* центральное целиком, соседи выглядывают по краям */
}
@media (max-width: 479px) { .home-hero__lead { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__track.is-moving, .hero-carousel__slide, .hero-carousel__slide img { transition: none; }
}

/* Два столбца: коллаж из двух фото и текст (в «Творите» — зеркально) */
.home-split__row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.home-split__text h1, .home-split__text h2 { margin-bottom: 40px; }
.home-split__text .justify { font-weight: 300; line-height: 1.6; max-width: 560px; margin-left: auto; }
.home-split--about .more { display: block; text-align: right; margin-top: 32px; }
.home-split--create .home-split__row { grid-template-columns: 1fr auto 1fr; column-gap: 40px; }
.home-split--create .home-split__row::before { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; width: 1px; background: var(--line-soft); }
.home-split--create .collage { grid-column: 3; grid-row: 1; }
.home-split--create .home-split__text { grid-column: 1; grid-row: 1; }
.home-split--create .more { margin-top: 24px; }

.collage { position: relative; display: grid; grid-template-columns: 1fr; padding-bottom: 12%; }
.collage figure { margin: 0; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage__main { width: 58%; aspect-ratio: 2 / 3; }
.collage__second { position: absolute; left: 40%; bottom: 0; width: 52%; aspect-ratio: 4 / 3; }
.collage--mirror .collage__main { margin-left: auto; width: 58%; aspect-ratio: 470 / 580; }
.collage--mirror .collage__second { left: auto; right: 42%; }

.create-list p { position: relative; padding-left: 100px; min-height: 80px; margin-bottom: 28px; }
.create-list p::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 64px; background: no-repeat center / contain; }
.create-list p:nth-child(1)::before { background-image: var(--i1); }
.create-list p:nth-child(2)::before { background-image: var(--i2); }
.create-list p:nth-child(3)::before { background-image: var(--i3); }

@media (max-width: 991px) {
  .home-split__row, .home-split--create .home-split__row { grid-template-columns: 1fr; gap: 40px; }
  .home-split--create .home-split__row::before { display: none; }
  .home-split--create .collage, .home-split--create .home-split__text { grid-column: 1; grid-row: auto; }
  .home-split__text .justify { max-width: none; }
  .collage { max-width: 520px; margin-inline: auto; width: 100%; }
}
@media (max-width: 767px) {
  .home-split--about .home-split__row { display: flex; flex-direction: column; align-items: stretch; }
  .home-split--about .home-split__text { display: contents; }
  .home-split--about h1 { order: -1; margin-bottom: 0; }
}
@media (max-width: 767px) { .create-list p { padding-left: 64px; } .create-list p::before { width: 44px; height: 44px; } }

/* «Мы предлагаем» */
.offer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.offer__photo { display: block; aspect-ratio: 320 / 300; overflow: hidden; }
.offer__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.offer__card:hover .offer__photo img { transform: scale(1.03); }
.offer__title { text-align: center; font-size: var(--fs-h4); margin: 24px 0 0; }
.offer__title a { text-decoration: none; }
.offer__title a:hover, .offer__card:hover .offer__title a { color: var(--gold-link); }
@media (max-width: 991px) { .offer { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }

/* «Новинки» */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 32px; }
.tiles li { aspect-ratio: 320 / 300; overflow: hidden; }
.tiles a { display: block; height: 100%; }
.tiles img { width: 100%; height: 100%; object-fit: cover; }  /* без увеличения: фото — ссылка на карточку */
@media (max-width: 767px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.home-section__more { text-align: right; margin: 40px 0 0; }
.home-section__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 40px; }
.home-section__head h2 { margin: 0; }

/* Лента галереи: 4 фото в ряд, по кругу; стрелки и точки-чёрточки под лентой, как на старом сайте */
.strip__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 8px) / 4); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 0; }
.strip__track::-webkit-scrollbar { display: none; }
.strip__track li { scroll-snap-align: start; aspect-ratio: 340 / 540; }
.strip__track img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {  /* телефон — как карусель первого экрана: крупное фото по центру и края соседних, без арки; листается само (site.js) */
  .strip__track { grid-auto-columns: 78%; gap: 12px; padding-inline: 11%; scroll-padding-inline: 11%; }
  .strip__track li { aspect-ratio: 4 / 5; scroll-snap-align: center; }
}
.strip__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.strip__arrow { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--ink); background: transparent; cursor: pointer; color: #181818; transition: background-color .3s, color .3s; }
.strip__arrow .icon { width: 20px; height: 20px; }
.strip__arrow:hover { background: #181818; color: var(--paper); }
.strip__arrow--prev .icon { transform: scaleX(-1); }
.strip__dots { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.strip__dots button { display: block; width: 20px; height: 24px; padding: 0; border: 0; background: linear-gradient(var(--ink-muted), var(--ink-muted)) center / 100% 3px no-repeat; opacity: .5; cursor: pointer; }
.strip__dots button[aria-current] { background-image: linear-gradient(var(--gold), var(--gold)); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .offer__photo img { transition: none; } }

/* ---------- Окна ---------- */

.modal, .zoom { border: 0; padding: 0; color: var(--ink); }
.modal::backdrop, .zoom::backdrop { background: rgba(0, 0, 0, .6); }
.modal { width: min(480px, calc(100vw - 32px)); background: var(--paper); }
.modal__body { position: relative; padding: 40px 32px 32px; }
.modal__close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; color: inherit; }
.modal h2 { margin-bottom: 16px; }
.modal__product { margin: 0 0 16px; color: var(--ink-muted); }
.modal__alt { margin: 20px 0 0; font-size: var(--fs-small); color: var(--ink-muted); }
.modal__alt a { color: inherit; white-space: nowrap; }
.zoom { max-width: 100vw; max-height: 100dvh; background: transparent; overflow: visible; }
.zoom img { max-width: min(1200px, 100vw); max-height: 100dvh; width: auto; height: auto; }
.zoom .modal__close { top: 8px; right: 8px; background: var(--paper); }

/* ---------- Инфостраницы (эталоны — старые страницы, снятые 26.09) ---------- */

.page__title { margin-bottom: 16px; }
@media (max-width: 767px) { .page__title { margin-bottom: 12px; } }

/* Текст из базы (Page.body). Абзацы по ширине, как на старом сайте */
.rich { font-weight: 400; line-height: 1.6; }
.rich p { text-align: justify; hyphens: auto; }
.rich h2 { font-size: var(--fs-h3); margin: 1.4em 0 .6em; }
.rich h3 { font-size: var(--fs-h4); margin: 1.4em 0 .5em; }
.rich > :first-child, .rich .media__text > :first-child { margin-top: 0; }
.rich a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.rich a:hover { color: var(--gold-link); }
.rich ul { padding-left: 1.2em; }
.rich li { margin-bottom: .4em; }
.rich strong, .rich b { font-weight: 600; }
.rich img { margin: 24px 0; }
.rich table { border-collapse: collapse; }
.rich td, .rich th { border: 1px solid var(--line-soft); padding: 6px 10px; }
/* длинные юридические тексты — удобной ширины */
.page--politika-konfidencialnosti .rich, .page--polzovatelskoe-soglashenie .rich, .page--publichnaya-oferta_1 .rich,
.page--pravovaya-informaciya .rich, [class*="page--soglasie"] .rich, .page--poluchenie-reklamnyh-rassylok .rich,
.page--pravila-primeneniya-rekomendatelnyh-tehnologij .rich, .page--pravila-vozvrata-i-ekspluatacii .rich { max-width: 960px; }

/* Карточки-ссылки: «Каталог», «Лаборатория VUA» */
.rich .link-cards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 991px) { .rich .link-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.rich .link-cards li { margin: 0; }
.link-cards__link { display: flex; flex-direction: column; height: 100%; padding: 28px; background: var(--sand); text-decoration: none !important; }
@media (max-width: 767px) { .link-cards__link { padding: 12px; } }
.link-cards__photo { display: block; aspect-ratio: 1; overflow: hidden; }
.link-cards__photo img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; transition: transform .4s ease; }
.link-cards__link:hover img { transform: scale(1.03); }
.link-cards__title { margin-top: 20px; text-align: center; font: 400 var(--fs-h4)/1.3 var(--font-head); }

/* Разделы «фото рядом с текстом», через раз зеркально: «О нас», «Новости» */
.media { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; align-items: start; margin-bottom: 64px; }
.media--flip .media__photo { order: 2; }
.media--text { grid-template-columns: 1fr; max-width: 960px; }
.media__photo { margin: 0; }
.media__photo img { margin: 0 !important; width: 100%; }
.media__text h2 { font-size: var(--fs-h2); margin-top: 0; }
@media (max-width: 767px) {
  .media { grid-template-columns: 1fr; margin-bottom: 40px; }
  .media--flip .media__photo { order: 0; }
  .media__text h2 { font-size: var(--fs-h3); }
}

/* «Новости»: колонки по разделам h2, ниже плашки с h3 — размеры сняты с vua-studio.com/news (30.09.2026) */
.news-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; margin-bottom: 96px; }
.news-cols:has(> .news-col:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rich--news { font-size: 20px; line-height: 1.6; }
.rich--news h2, .rich--news h3 { font-size: 26px; margin: 0 0 12px; }
.news-col > h2:not(:first-child) { margin-top: 16px; }
.news-photo { margin: 0; }
.news-photo img { margin: 0 !important; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.news-box { padding: 36px; background: rgba(233, 231, 231, .3); }
.news-box + .news-box { margin-top: 32px; }
.news-box > :last-child > :last-child { margin-bottom: 0; }
.news-box--media { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 32px; align-items: start; }
.news-box--media .news-photo img { aspect-ratio: 1; }
.news-box p { text-align: left; }
/* прошедшие выставки в календаре «Новостей» (старый сайт — hsl(0,0%,60%)) */
.past { color: hsl(0, 0%, 60%); }
@media (max-width: 991px) {
  .news-cols { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; margin-bottom: 48px; }
  .news-box--media { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  .rich--news { font-size: 16px; line-height: 1.5; }
  .rich--news h2, .rich--news h3 { font-size: 20px; }
  .news-box { padding: 20px; }
  .news-box + .news-box { margin-top: 16px; }
}

/* Галерея: сетка в 4 колонки, горизонтальные фото — на две */
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 32px; }
.photo-grid li { aspect-ratio: 2 / 3; }
.photo-grid li.is-wide { grid-column: span 2; aspect-ratio: auto; }
.photo-grid a { display: block; height: 100%; cursor: zoom-in; overflow: hidden; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.photo-grid a:hover img { transform: scale(1.02); }
.photo-grid li.is-wide img { aspect-ratio: 16 / 9; }
.photo-grid__caption { margin: 8px 0 0; font-size: var(--fs-small); color: var(--ink-muted); }
@media (max-width: 991px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Контакты: две колонки, размеры сняты с vua-studio.com/kontakty (27.09.2026).
   Значки мессенджеров — файлы со старого сайта (img/social-*.svg), по адресу ссылки. */
.contacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.contacts .rich { font-size: 16px; line-height: 1.5; color: var(--ink-heading); }
.contacts .rich h3 { margin: 24px 0 8px; font-size: 26px; line-height: 1.2; color: var(--ink); }
.contacts .rich h3:first-child { margin-top: 0; }
.contacts .rich p { margin: 0 0 18px; text-align: left; }
.contacts .rich a { color: inherit; text-decoration: none; }
.contacts .rich a:hover { color: var(--gold-link); }
.contacts .rich p:has(> a[href*="t.me/"], > a[href*="max.ru/"], > a[href*="vk.com/"]) { display: inline-block; margin: 0 16px 10px 0; }
.contacts .rich p:not(:has(> a[href*="t.me/"], > a[href*="max.ru/"], > a[href*="vk.com/"])) + p { margin-top: 10px; }
.contacts .rich a[href*="t.me/"], .contacts .rich a[href*="max.ru/"], .contacts .rich a[href*="vk.com/"] {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
}
.contacts .rich a[href*="t.me/"]::before, .contacts .rich a[href*="max.ru/"]::before, .contacts .rich a[href*="vk.com/"]::before {
  content: ""; width: 44px; height: 44px; flex: none; border-radius: 6px; background: no-repeat center / cover;
}
.contacts .rich a[href*="t.me/"]::before { background-image: url("img/social-telegram.cb79311815d8.svg"); }
.contacts .rich a[href*="max.ru/"]::before { background-image: url("img/social-max.592517dd8232.svg"); }
.contacts .rich a[href*="vk.com/"]::before { background-image: url("img/social-vk.dcbbfbac33cf.svg"); }

.contacts .lead { max-width: none; margin: 0; }
.contacts .lead h2 { margin: 0 0 24px; font-size: 36px; line-height: 1.2; color: var(--ink-heading); }
.contacts .form { gap: 24px; }
.contacts .form__field { gap: 8px; }
.contacts .form__field label, .contacts .form__check label { font-size: 16px; line-height: 1.5; color: var(--ink); }
.contacts .form input[type="text"], .contacts .form input[type="tel"], .contacts .form textarea {
  height: 50px; padding: 12px 16px; border-color: rgba(34, 34, 34, .3); border-radius: 6px; color: #222;
}
.contacts .form textarea { height: 194px; }
.contacts .form__req { color: #eb5757; }
.contacts .form__check + .form__check { margin-top: -6px; }
.contacts .form__check input {
  appearance: none; width: 22px; height: 22px; margin: 0; border: 1px solid rgba(34, 34, 34, .3); border-radius: 4px;
  background: var(--paper) no-repeat center / 14px; cursor: pointer;
}
.contacts .form__check input:checked {
  border-color: var(--ink); background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m2 7 3.5 3.5L12 4'/%3E%3C/svg%3E");
}
.contacts .form__check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.contacts .form__check a { font-weight: 600; color: #ddc6b0; text-decoration: none; }
.contacts .form__check a:hover { color: var(--gold-link); }
.contacts .form .btn { margin-top: 8px; padding: 22px 44px; line-height: 25px; }
@media (max-width: 839px) {  /* старый сайт: на 860 две колонки, на 820 одна */
  .contacts { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .contacts .lead h2 { font-size: var(--fs-h2); }
}

/* Карта сайта */
.sitemap, .sitemap ul { list-style: none; }
.sitemap { padding: 0; font-size: var(--fs-lead); }
.sitemap > li { margin-bottom: 12px; }
.sitemap ul { padding-left: 24px; margin: 8px 0 0; font-size: var(--fs-body); }
.sitemap ul li { margin-bottom: 4px; }
.sitemap a { text-decoration: none; }
.sitemap a:hover { color: var(--gold-link); text-decoration: underline; }

/* Уведомление о cookie */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; max-width: 1200px; margin-inline: auto;
  display: flex; align-items: center; gap: 24px; padding: 20px 28px;
  background: var(--paper); border: 1px solid var(--line-soft); box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
  font-size: var(--fs-small); line-height: 1.5;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; }
.cookie__ok { flex: none; font-size: var(--fs-body); padding: 8px 24px; background: var(--gold); color: var(--ink); }
.cookie__ok:hover { background: var(--gold-link); }
@media (max-width: 767px) { .cookie { flex-direction: column; align-items: stretch; padding: 16px; gap: 12px; } }


/* ---------- Формы: заявка, вход, регистрация ---------- */

.notice { margin: 24px 0; padding: 16px 20px; background: var(--sand); border-left: 3px solid var(--gold); }
.notice p { margin: 0; }
.lead { max-width: 560px; margin-top: 48px; }
.lead h2 { font-size: var(--fs-h3); margin-bottom: 16px; }
.form { display: grid; gap: 16px; }
.form__field { display: grid; gap: 6px; }
.form__field label { font-size: var(--fs-small); }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="password"], .form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 0; background: var(--paper);
  font: inherit; font-size: 16px; color: var(--ink); /* 16px — чтобы iOS не увеличивал страницу при фокусе */
}
.form textarea { resize: vertical; min-height: 96px; }
.form input:focus, .form textarea:focus { border-color: var(--gold); outline: none; }
.form [aria-invalid="true"] { border-color: #b3261e; }
.form__check label { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.4; cursor: pointer; }
.form__check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.form__check a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.form__error { margin: 0; font-size: var(--fs-small); color: #b3261e; }
.form__error:empty { display: none; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.form .btn:disabled { opacity: .6; cursor: wait; }
.form__done { margin: 0; padding: 16px 20px; background: var(--sand); border-left: 3px solid var(--gold); }
.form__help { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }

/* ---------- Кабинет покупателя ---------- */

.account a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.account__form { max-width: 480px; }
.account__lead, .account__text { max-width: 640px; }
.account__lead { margin: 0 0 24px; }
.account__aside { margin: 0; font-size: var(--fs-small); }
.account__grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 64px; }
.account__grid h2 { font-size: var(--fs-h3); margin: 0 0 12px; }
@media (max-width: 991px) { .account__grid { grid-template-columns: 1fr; gap: 48px; } }
.account__links { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; }
.account__logout { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.account__leads { list-style: none; margin: 0; padding: 0; }
.account__leads li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.account__leads time { margin-right: 12px; color: var(--ink-muted); font-size: var(--fs-small); }
.account__leads p { margin: 6px 0 0; font-size: var(--fs-small); color: var(--ink-muted); }
.account__status { float: right; font-size: var(--fs-small); color: var(--ink-muted); }
.btn--danger { background: #8c1d18; }
.btn--danger:hover { background: #6e1612; }

/* ---------- Служебные страницы: 400, 403, 404, 500, 503 ---------- */

.error-page { max-width: 720px; padding-block: 24px 48px; }
.error-page__code { margin: 0 0 8px; font: 400 96px/1 var(--font-head); color: var(--gold); }
.error-page__text { line-height: 1.6; }
.error-page__text a:not(.btn), .error-page__link, .error-page__categories a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.error-page__categories { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-lead); }
.error-page__text a[href^="tel:"] { white-space: nowrap; }
.error-page__actions { display: flex; align-items: center; gap: 32px; margin-top: 32px; }
@media (max-width: 767px) { .error-page__code { font-size: 64px; } }