/* ============ Благогран · design system ============ */
:root{
  --cream:#f6f1e6;--cream2:#efe8d8;--ink:#0c0b0a;--ink2:#161513;--ink3:#201e1b;
  --gold:#c9a45c;--gold2:#e5c98a;--gold3:#8f6f2f;--stone:#6b655b;
  --serif:"Playfair Display",Georgia,serif;--sans:"Manrope",system-ui,sans-serif;
  --r:1.35rem;--ease:cubic-bezier(.2,.7,.2,1);--sh:0 30px 60px -30px rgba(12,11,10,.45);
  /* Поверхность блоков: тёплый песочный градиент из палитры сайта.
     Чистый белый (#fff) на кремовой странице читался «заплаткой» — карточки,
     панели и характеристики стояли белыми пятнами. Менять фон блоков — только
     через эти токены, чтобы оттенок оставался единым на всём сайте. */
  --surf:linear-gradient(180deg,#fffdf8 0%,#faf3e4 55%,#f5ecda 100%);
  --surf-ln:rgba(143,111,47,.18);--surf2:rgba(255,253,247,.8);
  /* Красный — только для действия: кнопка «Забрать акцию» и полоска на карточке
     акции. В остальном сайте цвет действия — золото, и второй яркий цвет
     пришлось бы согласовывать с фоном, рамками и состоянием «выбрано».
     Красный выбран тёмным (а не алым): он читается на кремовом фоне и не
     выбивается из «мемориальной» палитры. Белый текст на градиенте кнопки даёт
     контраст от 4.7:1 у светлого края (#d3373f) до 7:1 в середине (#b0182a) —
     выше AA (4.5:1) для мелкого текста кнопки .78rem. Светлее делать нельзя:
     на #e0454d (состояние hover) белый даёт уже 3.9:1 — поэтому hover меняет
     градиент на более насыщенный, а не на более светлый. */
  --red:#b0182a;--red2:#d33a45;--red3:#7d0c17;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:6rem}
/* height:auto обязателен: у картинок есть атрибуты width/height (нужны для CLS),
   и без сброса браузер берёт высоту из атрибута — фото растягивалось до 1784 px */
img{display:block;max-width:100%;height:auto}
/* атрибут hidden должен работать даже там, где авторский стиль задаёт display (было видно
   блок «Заявка принята» в карточках до заказа и подобные скрытые элементы) */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
input:focus,select:focus,textarea:focus{outline:none}
h1,h2,h3,.display{font-family:var(--serif);letter-spacing:-.01em;font-weight:600;line-height:1.1}
h1{font-size:clamp(2.4rem,6vw,4.5rem)}h2{font-size:clamp(1.9rem,4vw,3rem)}h3{font-size:1.25rem}
.container{max-width:80rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
.section{padding:3.5rem 0}@media(min-width:640px){.section{padding:5rem 0}}
.section-sm{padding:2rem 0}
/* .section и .section-sm задают padding шорткатом («2rem 0») и тем самым обнуляют
   боковые отступы .container, когда оба класса стоят на одной секции — а именно так
   сделана половина страниц («<section class="container section-sm">»). От ≥640 px
   спасало правило ниже по файлу, а на телефоне ничто не мешало: текст и карточки
   липли к краю экрана. Длинные свойства важнее шортката, если идут позже, поэтому
   возвращаем отступы здесь. */
.container{padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.container{padding-left:1.5rem;padding-right:1.5rem}}
.center{text-align:center}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}
.w-full{width:100%}.flex-1{flex:1}
.row{display:flex;align-items:center}.row-between{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.wrap{flex-wrap:wrap}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.small{font-size:.85rem}.tiny{font-size:.68rem}.bold{font-weight:700}
.muted{color:var(--stone)}.dim{opacity:.6}.gold{color:var(--gold)}.gold-3{color:var(--gold3)}
.hide-m{display:none}@media(min-width:640px){.hide-m{display:inline-flex}}
.only-m{display:block}@media(min-width:640px){.only-m{display:none}}
.eyebrow{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700}
.gold-text{background:linear-gradient(120deg,#e7cf94,#c9a45c 50%,#e7cf94);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-gradient{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c)}
.gold-border{border:1px solid rgba(201,164,92,.45)}
.dark{background:var(--ink);color:var(--cream)}
.dark2{background:var(--ink2);color:var(--cream)}
.cream2{background:var(--cream2)}
.noise{position:relative}
.noise::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.noise>*{position:relative;z-index:1}

/* grid */
.grid{display:grid;gap:.75rem}@media(min-width:640px){.grid{gap:1.25rem}}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}@media(min-width:1024px){.g3{grid-template-columns:repeat(3,1fr)}}
.g4{grid-template-columns:repeat(2,1fr)}@media(min-width:1024px){.g4{grid-template-columns:repeat(4,1fr)}}
.g3m1{grid-template-columns:1fr}@media(min-width:640px){.g3m1{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.g3m1{grid-template-columns:repeat(3,1fr)}}
/* Одна колонка на телефоне → две с 640 px. Нужна там, где в колонке стоит форма
   или прайс: у них свой min-content (селект кода оператора, цена с nowrap),
   и `.g2`, которая держит две колонки на любой ширине, выдавливала страницу
   за край экрана на 320 px. Для колонок с короткими подписями `.g2` остаётся. */
.g2m1{grid-template-columns:minmax(0,1fr)}@media(min-width:640px){.g2m1{grid-template-columns:repeat(2,minmax(0,1fr))}}
.split{display:grid;gap:2rem;align-items:center}@media(min-width:1024px){.split{grid-template-columns:1fr 1.1fr;gap:3rem}}
.split-rev{display:grid;gap:2rem;align-items:start}@media(min-width:1024px){.split-rev{grid-template-columns:1.2fr 1fr;gap:3.5rem}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:3rem;padding:0 1.5rem;border-radius:999px;font-weight:700;font-size:.95rem;transition:transform .2s var(--ease),filter .25s var(--ease),background-color .25s var(--ease);white-space:nowrap;transform:translate3d(var(--btn-shift-x,0px),var(--btn-shift-y,0px),0) rotateX(var(--btn-tilt-x,0deg)) rotateY(var(--btn-tilt-y,0deg));transform-style:preserve-3d;will-change:auto}
.btn--parallax{will-change:transform}
@media(hover:hover) and (pointer:fine){.btn:not([disabled]):hover{transform:translate3d(var(--btn-shift-x,0px),calc(var(--btn-shift-y,0px) - 2px),0) rotateX(var(--btn-tilt-x,0deg)) rotateY(var(--btn-tilt-y,0deg))}}
@media(prefers-reduced-motion:reduce){.btn,.btn--parallax{transform:none!important;transition:none!important;will-change:auto}}
.btn-lg{height:3.5rem;font-size:1rem}
.btn.sm{height:2.5rem;padding:0 1rem;font-size:.85rem}
.btn-gold{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);box-shadow:0 12px 30px -12px rgba(201,164,92,.8);position:relative;overflow:hidden}
.btn-gold:hover{filter:brightness(1.05)}.btn-gold:active{transform:translate3d(var(--btn-shift-x,0px),var(--btn-shift-y,0px),0) scale(.98)}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);transition:transform 1s}
.btn-gold:hover::after{transform:translateX(100%)}
.btn-outline{border:1px solid rgba(255,255,255,.2)}.lead--light .btn-outline{border-color:rgba(12,11,10,.2)}.btn-outline:hover{background:rgba(255,255,255,.05)}
.btn-gb{border:1px solid rgba(201,164,92,.45)}.btn-gb:hover{background:rgba(255,255,255,.05)}
.btn-wa{background:#25d366;color:#fff}.btn-tg{background:#2aabee;color:#fff}.btn-max{background:#6a4df2;color:#fff}.btn-wa:hover,.btn-tg:hover,.btn-max:hover{filter:brightness(1.1)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn[disabled]{opacity:.6;pointer-events:none}
.round{height:2.75rem;width:2.75rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.round.wa{background:#25d366;color:#fff}.round.tg{background:#2aabee;color:#fff}.round.light{background:#fff;border:1px solid rgba(12,11,10,.2);color:var(--ink)}
.icon-btn{height:2.75rem;width:2.75rem;border-radius:999px;border:1px solid rgba(201,164,92,.45);display:grid;place-items:center}
.more{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--gold3);transition:gap .2s}.more:hover{gap:.75rem}
.dark .more,.dark2 .more{color:var(--gold)}
.pill{display:inline-flex;align-items:center;height:2.5rem;padding:0 1rem;border-radius:999px;font-size:.85rem;font-weight:700;border:1px solid var(--surf-ln);background:var(--surf2);transition:.2s;white-space:nowrap}
.pill:hover{border-color:var(--gold)}.pill.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.dark .pill{background:transparent;border-color:rgba(201,164,92,.45);color:var(--cream)}.dark .pill.on{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);border-color:transparent}
.scroll-x{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem}.scroll-x::-webkit-scrollbar{display:none}

/* badges & tags */
.badge{position:absolute;z-index:2;font-size:.65rem;font-weight:800;letter-spacing:.06em;padding:.25rem .55rem;border-radius:.4rem;text-transform:uppercase}
.badge-dark{background:var(--ink);color:var(--cream);left:.75rem;top:.75rem}
.badge-gold{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);right:.75rem;top:.75rem;letter-spacing:.18em}
.badge-gold.br{right:1rem;top:auto;bottom:1rem;letter-spacing:.04em;text-transform:none;font-size:.7rem}
.badge-glass{background:rgba(0,0,0,.6);color:var(--cream);backdrop-filter:blur(6px);left:.75rem;top:.75rem}.badge-glass.right{left:auto;right:.75rem}
.tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.5rem}
.tags .badge{position:static}
.tag{font-size:.65rem;font-weight:600;padding:.15rem .4rem;border-radius:.35rem;background:rgba(12,11,10,.04);border:1px solid rgba(12,11,10,.05);color:rgba(12,11,10,.7)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(12,11,10,.95);backdrop-filter:blur(8px);color:var(--cream);border-bottom:1px solid rgba(255,255,255,.05)}
.hdr__in{height:4rem;display:flex;align-items:center;gap:.75rem;padding:0 .75rem}
.burger{width:18px;height:2px;background:currentColor;position:relative;display:block}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:.25s}
.burger::before{top:-6px}.burger::after{top:6px}
[aria-expanded="true"] .burger{background:transparent}[aria-expanded="true"] .burger::before{top:0;transform:rotate(45deg)}[aria-expanded="true"] .burger::after{top:0;transform:rotate(-45deg)}
.logo{display:flex;align-items:center;gap:.75rem;flex-shrink:0;line-height:1}
.logo__name{font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:.02em;display:block}
.logo__sub{display:block;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:.25rem}
.hdr__nav{display:none;gap:1.5rem;margin-left:2rem;font-size:.9rem;color:rgba(246,241,230,.8)}@media(min-width:1024px){.hdr__nav{display:flex}}
.hdr__nav a:hover{color:var(--gold)}
.hdr__actions{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.phone-btn{gap:.5rem;font-weight:700;font-size:.9rem}@media(min-width:1024px){.phone-btn{width:auto;padding:0 1rem}}
.menu{position:absolute;inset-inline:0;top:4rem;background:var(--ink);border-top:1px solid rgba(255,255,255,.05);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.menu__grid{display:grid;padding:1.5rem 1.25rem;gap:0 2rem}@media(min-width:640px){.menu__grid{grid-template-columns:1fr 1fr}}@media(min-width:1024px){.menu__grid{grid-template-columns:1fr 1fr 1fr}}
.menu__grid a{font-family:var(--serif);font-size:1.25rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.menu__grid a:hover{color:var(--gold)}
.menu__contact{padding-top:1.25rem;font-size:.85rem;color:rgba(246,241,230,.6);grid-column:1/-1}.menu__contact a{font-size:1.1rem;font-weight:700;display:block;border:0;padding:.25rem 0;font-family:var(--sans)}

/* hero */
.hero{position:relative;background:var(--ink);color:var(--cream);overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,10,.5),rgba(12,11,10,.4),var(--ink))}
.hero__in{position:relative;padding:4rem 0 5rem}@media(min-width:640px){.hero__in{padding:7rem 0 8rem}}
.hero__text{margin-top:1.5rem;font-size:1.05rem;color:rgba(246,241,230,.75);max-width:36rem;line-height:1.6}
.hero__cta{display:flex;flex-direction:column;gap:.75rem;margin-top:2.25rem}@media(min-width:640px){.hero__cta{flex-direction:row}}
/* minmax(0,1fr), а не 1fr: «1fr» разрешает колонке расти по содержимому, и пока
   числа набираются («0+» → «2 500+»), колонка ширится и подрагивают соседние
   ячейки — это сдвиг макета, который видно и в PageSpeed. С нулевым минимумом
   ширину задаёт сетка, а не текст. */
.stats{margin-top:3.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1);border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);max-width:56rem}
@media(min-width:1024px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats div{background:rgba(12,11,10,.8);padding:1.25rem;min-width:0}.stats b{font-family:var(--serif);font-size:1.75rem;font-weight:600;color:var(--gold);display:block}.stats small{font-size:.75rem;color:rgba(246,241,230,.6)}
/* Цифры-достижения набираются при появлении блока (main.js → [data-stats]).
   tabular-nums — все цифры одинаковой ширины: без этого число «пляшет»,
   пока растёт, и подпись под ним кажется дрожащей. */
.stats b{font-variant-numeric:tabular-nums}
/* Момент, когда число доехало: короткая золотая вспышка читается как «вот оно»,
   но без движения макета и без влияния на соседние ячейки. */
.stats b.stat--done{animation:statGlow 1s var(--ease)}
@keyframes statGlow{0%{text-shadow:0 0 0 rgba(231,207,148,0)}35%{text-shadow:0 0 18px rgba(231,207,148,.5)}100%{text-shadow:0 0 0 rgba(231,207,148,0)}}
@media(prefers-reduced-motion:reduce){.stats b.stat--done{animation:none}}
/* Текст, который печатается ([data-type] → main.js). position:relative — по нему
   позиционируется курсор; высоту резервирует скрипт, чтобы блок ниже не подъезжал,
   пока абзац появляется по буквам. */
[data-type]{position:relative}
.type-caret{position:absolute;left:0;top:0;width:2px;background:currentColor;border-radius:2px;opacity:.85;pointer-events:none;animation:caretBlink 1.05s steps(1,end) infinite}
@keyframes caretBlink{0%,45%{opacity:.85}46%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.type-caret{display:none}}
.hero-page{position:relative;background:var(--ink);color:var(--cream);overflow:hidden}
.hero-page__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.hero-page__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,10,.4),rgba(12,11,10,.7),var(--ink))}
.hero-page__in{position:relative;padding:2.5rem 1rem 3rem}@media(min-width:640px){.hero-page__in{padding:4rem 1.5rem 5rem}}
.hero-page h1{max-width:56rem;margin-top:.75rem;font-size:clamp(2.2rem,5.5vw,3.75rem)}
.hero-page__text{margin-top:1.25rem;color:rgba(246,241,230,.7);max-width:42rem;line-height:1.6}
.hero-page .eyebrow{margin-top:1.5rem}
.crumbs{font-size:.75rem;color:rgba(246,241,230,.5);display:flex;flex-wrap:wrap;gap:.35rem}.crumbs a:hover{color:var(--gold)}.crumbs .cur{color:rgba(246,241,230,.8)}
.crumbs.light{color:var(--stone)}.crumbs.light .cur{color:var(--ink)}.crumbs.light a:hover{color:var(--gold3)}

/* section head */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.4rem 1rem}
/* заголовку разрешаем сжиматься: иначе ссылка «О производстве» уезжала под заголовок */
.sec-head>div{flex:1 1 12rem;min-width:0}.sec-head h2{margin-top:.5rem;overflow-wrap:anywhere}
.sec-head .more{display:none}@media(min-width:640px){.sec-head .more{display:inline-flex}}

/* cards */
.card{position:relative;overflow:hidden;border-radius:var(--r);background:var(--surf);border:1px solid var(--surf-ln);transition:.5s var(--ease);display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);border-color:rgba(201,164,92,.7);box-shadow:var(--sh)}
.sheen{pointer-events:none;position:absolute;top:-2.5rem;bottom:-2.5rem;left:-50%;width:33%;transform:rotate(12deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);opacity:0;transition:all 1s ease-out;z-index:3}
.card:hover .sheen{opacity:1;transform:rotate(12deg) translateX(420%)}
.corners::before,.corners::after{content:"";position:absolute;width:22px;height:22px;border-color:var(--gold);border-style:solid;opacity:.9;pointer-events:none;z-index:2}
.corners::before{top:14px;left:14px;border-width:1px 0 0 1px}.corners::after{bottom:14px;right:14px;border-width:0 1px 1px 0}
.reveal{opacity:0;transform:translateY(1.5rem);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .3s,box-shadow .5s}
.reveal.in{opacity:1;transform:none}
.reveal.in:hover{transform:translateY(-6px)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .7s var(--ease) both}.d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}

/* product card — фото не обрезаем, поэтому contain + мягкий фон */
/* Фон под фото — из палитры сайта (раньше градиент начинался с чистого белого,
   и кадр читался белым прямоугольником на кремовой странице). */
.pcard__img{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;overflow:hidden;padding:.5rem;background:linear-gradient(160deg,var(--cream) 0%,var(--cream2) 55%,#e7dec6 100%)}
@media(min-width:640px){.pcard__img{aspect-ratio:4/5;padding:.75rem}}
.pcard__img img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform 1s var(--ease);filter:drop-shadow(0 10px 22px rgba(12,11,10,.14))}
/* Снимки моделей вырезаны по белому (углы 255/255/255), поэтому multiply «растворяет»
   белый в фоне карточки — памятник стоит на кремовом, а не в белом квадрате.
   Только у карточек моделей: обложки разделов — обычные фото на серо-белом (212–223),
   и multiply превратил бы их в тёмный прямоугольник на кремовом. */
.pcard .pcard__img img{mix-blend-mode:multiply}
.cat-card .pcard__img{background:linear-gradient(160deg,var(--cream) 0%,var(--cream2) 55%,#e7dec6 100%)}
.cat-card .pcard__img img{mix-blend-mode:normal}
.card:hover .pcard__img img{transform:scale(1.04)}
.card:hover .gcard__img .swatch,.card:hover .scard__img img,.card:hover .acard img{transform:scale(1.06)}
.pcard__badges{position:absolute;top:.6rem;left:.6rem;right:.6rem;display:flex;flex-wrap:wrap;gap:.3rem;z-index:2;align-items:flex-start}
.pcard__badges .badge{position:static}
.pcard__arrow{position:absolute;right:.75rem;bottom:.75rem;border-radius:999px;background:var(--cream);color:var(--ink);padding:.5rem .9rem;font-size:.68rem;font-weight:800;letter-spacing:.04em;transform:translateY(.75rem);opacity:0;transition:.5s;z-index:2}
.card:hover .pcard__arrow{transform:none;opacity:1}
.pcard__body{padding:.75rem;display:flex;flex-direction:column;flex:1}@media(min-width:640px){.pcard__body{padding:1rem}}
.pcard__title{font-size:1.05rem;transition:color .2s}@media(min-width:640px){.pcard__title{font-size:1.25rem}}
.card:hover .pcard__title,.card:hover .mini-card__title,.card:hover .scard__body h3,.card:hover .gcard__body h3{color:var(--gold3)}
.pcard__meta{font-size:.7rem;color:var(--stone);margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:640px){.pcard__meta{font-size:.75rem}}
.ai{text-align:left;margin-top:.6rem;border-radius:.75rem;background:var(--surf2);border:1px solid var(--surf-ln);padding:.6rem;transition:.2s;display:block;width:100%}
.ai:hover{border-color:rgba(201,164,92,.5)}
.ai__head{display:flex;align-items:center;gap:.35rem;font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold3)}
.ai__head b{margin-left:auto;color:var(--stone);transition:transform .3s;font-weight:400;font-size:.9rem}
.ai.open .ai__head b{transform:rotate(45deg)}
.ai__sum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.72rem;line-height:1.35;color:rgba(12,11,10,.8);margin-top:.25rem;max-height:2.7em;transition:max-height .45s var(--ease)}
@media(min-width:640px){.ai__sum{font-size:.78rem}}
.ai.open .ai__sum{-webkit-line-clamp:unset;max-height:14em}
/* Свёрнутая часть: одна дочерняя обёртка, иначе неявные строки грида держат высоту */
.ai__more{display:grid;grid-template-rows:0fr;opacity:0;max-height:20rem;overflow-y:auto;overscroll-behavior:contain;transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease),margin-top .5s var(--ease)}
.ai__more-in{display:block;overflow:hidden;min-height:0}
.ai.open .ai__more{grid-template-rows:1fr;opacity:1;margin-top:.5rem}
.ai__more-in>span{overflow:hidden;font-size:.68rem;color:var(--stone);line-height:1.35;display:block}.ai__more-in>span+span{margin-top:.4rem}.ai__more b{color:rgba(12,11,10,.7)}
.pcard__foot{margin-top:auto;padding-top:.75rem;display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;border-top:1px solid var(--surf-ln)}
.pcard__actions{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.6rem;align-items:start}
.pcard__actions .btn{height:2.5rem;border-radius:.7rem;font-size:.78rem;letter-spacing:.02em;padding:0 .6rem}
.pcard__actions .pcard__order{margin:0}
.pcard__order.done{grid-column:1/-1}
.pcard__order.open{grid-column:1/-1}
.pcard__order.open+.pcard__collapse{grid-column:1/-1}
.pcard__pl{font-size:.62rem;color:var(--stone);line-height:1}.pcard__price{font-weight:800;color:var(--gold3);font-size:.9rem;margin-top:.15rem}@media(min-width:640px){.pcard__price{font-size:1rem}}
.pcard__note{font-size:.6rem;color:var(--stone);text-align:right;line-height:1.4;white-space:nowrap}
.pcard__order{margin-top:.6rem}
.pcard__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease),opacity .4s var(--ease)}
.pcard__panel-in{overflow:hidden;min-height:0}
.pcard__order.open .pcard__panel{grid-template-rows:1fr;opacity:1;margin-bottom:.5rem}
.pcard__order.open .pcard__panel .phone{overflow:visible}
.pcard__order .btn{height:2.5rem;border-radius:.7rem;font-size:.78rem}
.pcard__collapse{width:100%;font-size:.68rem;color:var(--stone);margin-top:.35rem}
/* ── Акции и подарки ──────────────────────────────────────────────────────────────
   Блок перечисляет то, что клиент получает к заказу: подарки, рассрочка, скидка,
   бесплатные этапы. Карточка — не «фотография с подписью», а обещание с цифрой,
   поэтому сверху крупная величина (180 BYN, 0 %, −5 %), под ней — что именно
   дают, ниже — мелким шрифтом условие, и кнопка «Забрать акцию» ведёт к форме.
   Красный здесь — только у действия (кнопка и правая часть полоски): у блока
   десять карточек, и второй яркий цвет, разлитый по всем, превратил бы ряд
   в рекламный баннер вместо обещаний. */
.promo__note{margin:-.35rem 0 0;max-width:44rem}
.promo-grid{display:grid;gap:.8rem;margin-top:1.75rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.promo-card{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.4rem 1.2rem 1.25rem;border-radius:1.15rem;
  background:radial-gradient(130% 90% at 100% 0%,rgba(255,255,255,.92),rgba(255,255,255,0) 62%),var(--surf);
  border:1px solid rgba(201,164,92,.42);overflow:hidden;transition:.45s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 10px 24px -22px rgba(12,11,10,.5)}
/* Полоска сверху: золото слева, красная «печать действия» справа. Цвет действия
   на карточке один — красный, и он же у кнопки, поэтому связка «полоска → кнопка»
   читается как одно обещание, а не как два разных украшения. */
.promo-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--gold) 0 58%,var(--red2) 58% 100%)}
.promo-card:hover{transform:translateY(-6px);border-color:rgba(176,24,42,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 26px 40px -26px rgba(12,11,10,.45)}
/* Цифра — сплошным золотом, а не градиентом по тексту: в градиенте от --gold2
   к --gold3 светлый конец даёт контраст 1.6:1 на кремовом фоне (ниже AA даже
   для крупного текста), а в режиме высокой контрастности Windows текст с
   `background-clip` вообще пропадает. Крупная серифа и так держит внимание. */
.promo-card__value{font-family:var(--serif);font-weight:700;font-size:1.9rem;line-height:1.05;white-space:nowrap;color:var(--gold3)}
.promo-card__title{font-size:1.02rem;line-height:1.3}
.promo-card__text{margin:0;font-size:.83rem;line-height:1.55;color:rgba(12,11,10,.78)}
/* Условие мелким шрифтом отделено волосяной линией слева: это сноска к обещанию,
   а не продолжение текста */
.promo-card__terms{margin:0;font-size:.68rem;line-height:1.45;color:var(--stone);
  padding-left:.55rem;border-left:2px solid rgba(176,24,42,.28)}
/* Кнопка-действие: единственный красный элемент в блоке */
.promo-card__cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.66rem 1rem;border-radius:.72rem;font-size:.78rem;font-weight:800;letter-spacing:.02em;
  color:#fff;background:linear-gradient(135deg,var(--red2) 0%,var(--red) 55%,var(--red3) 100%);
  box-shadow:0 10px 20px -12px rgba(176,24,42,.9),inset 0 1px 0 rgba(255,255,255,.22);
  transition:.25s var(--ease)}
.promo-card__cta::after{content:"→";transition:transform .25s var(--ease)}
.promo-card__cta:hover{background:linear-gradient(135deg,var(--red) 0%,#96101f 55%,var(--red3) 100%);transform:translateY(-2px);
  box-shadow:0 16px 26px -14px rgba(176,24,42,.95),inset 0 1px 0 rgba(255,255,255,.28)}
.promo-card__cta:hover::after{transform:translateX(3px)}
.promo-card__cta:active{transform:translateY(0)}
.promo-card__cta:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* На телефоне — лента с прокруткой, а не колонка: десять карточек столбиком
   занимали 2 368 px и отодвигали каталог на три экрана вниз. В ленте видно
   одну карточку с краем следующей — это обычный жест, как у подборки камней. */
@media(max-width:639px){
  /* Без отрицательных полей: карточка с фоном и рамкой не должна уезжать за край —
     обрезанным выглядит только ряд, а первая карточка стоит по общей линии текста */
  .promo-grid{display:flex;gap:.6rem;margin:1.25rem 0 0;padding:0 0 .35rem;overflow-x:auto;
    scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}
  .promo-grid::-webkit-scrollbar{display:none}
  .promo-card{flex:0 0 82%;scroll-snap-align:start;padding:1.1rem 1rem 1rem;gap:.45rem}
  .promo-card__value{font-size:1.6rem}
  .promo-card__cta{padding:.6rem .9rem;font-size:.75rem}
}
/* Акции на главной и /ceny идут непрерывной лентой. Дубликат закрывает шов,
   анимация медленная и останавливается при наведении/фокусе; reveal карточек
   переопределён, чтобы движущиеся предложения не исчезали до появления в кадре. */
.promo-marquee{position:relative;overflow:hidden;margin-top:1.5rem;padding:.5rem 0 1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)}
.promo-marquee__track{display:flex;width:max-content;animation:promoMarquee var(--promo-marquee-duration,70s) linear infinite;will-change:transform}
.promo-marquee__group{display:flex;align-items:stretch;gap:1rem;flex:none;padding-right:1rem}
.promo-marquee__group .promo-card{flex:0 0 clamp(270px,27vw,350px);max-width:calc(100vw - 3rem)}
.promo-marquee .promo-card{opacity:1;transform:none;transition:none}
.promo--marquee .promo-card__cta{min-height:2.75rem}
.promo-marquee:hover .promo-marquee__track,.promo-marquee:focus-within .promo-marquee__track{animation-play-state:paused}
@keyframes promoMarquee{to{transform:translateX(-50%)}}
@media(max-width:639px){
  .promo-marquee{margin-top:1.1rem;padding:.35rem 0 .85rem}
  .promo-marquee__group{gap:.6rem;padding-right:.6rem}
  .promo-marquee__group .promo-card{flex-basis:82vw;max-width:82vw}
}
@media(prefers-reduced-motion:reduce){
  .promo-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .promo-marquee__track{display:block;width:auto;animation:none;will-change:auto}
  .promo-marquee__group{width:100%;padding:0;flex-wrap:wrap}
  .promo-marquee__group[aria-hidden="true"]{display:none}
  .promo-marquee__group .promo-card{flex:1 1 270px;max-width:none}
}

/* ── Главная акция: уголки к памятнику и благоустройству ────────────────────────── */
.corner-promo{display:grid;overflow:hidden;border:1px solid rgba(201,164,92,.4);border-radius:var(--r);
  background:linear-gradient(135deg,#171613,#0c0b0a 72%);color:var(--cream);box-shadow:var(--sh)}
.corner-promo__visual{position:relative;min-height:17rem;overflow:hidden;background:#25231f}
.corner-promo__main-image{width:100%;height:100%;min-height:17rem;aspect-ratio:4/3;object-fit:cover;object-position:center 54%;opacity:.9}
.corner-promo__visual::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(0deg,rgba(12,11,10,.76),transparent);pointer-events:none}
.corner-promo__image-caption{position:absolute;z-index:1;left:1rem;bottom:1rem;display:flex;align-items:center;gap:.5rem;
  max-width:calc(100% - 2rem);padding:.55rem .8rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  background:rgba(12,11,10,.72);color:var(--cream);font-size:.68rem;font-weight:700;backdrop-filter:blur(10px)}
.corner-promo__live-dot{width:.48rem;height:.48rem;flex:0 0 auto;border-radius:50%;background:#8ed3a1;box-shadow:0 0 0 .25rem rgba(142,211,161,.14)}
.corner-promo__detail{position:absolute;z-index:2;right:1rem;top:1rem;display:flex;align-items:center;gap:.65rem;max-width:calc(100% - 2rem);
  padding:.45rem .85rem .45rem .45rem;border:1px solid rgba(201,164,92,.4);border-radius:1rem;
  background:rgba(255,253,247,.96);color:var(--ink);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.55)}
.corner-promo__detail img{width:4rem;height:3.25rem;object-fit:contain;border-radius:.6rem;background:#fff}
.corner-promo__detail span{display:grid;gap:.1rem}.corner-promo__detail small{font-size:.53rem;letter-spacing:.12em;font-weight:800;color:var(--gold3)}
.corner-promo__detail b{font-family:var(--serif);font-size:.92rem;white-space:nowrap}
.corner-promo__content{display:flex;flex-direction:column;align-items:flex-start;padding:1.5rem;gap:.85rem}
.corner-promo__eyebrow{display:inline-flex;align-items:center;gap:.45rem;color:var(--gold2);font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.corner-promo__eyebrow span{display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:rgba(201,164,92,.14);color:var(--gold2);font-size:.9rem}
.corner-promo__content h2{max-width:38rem;font-size:clamp(1.7rem,3.3vw,2.65rem);line-height:1.12;color:var(--cream)}
.corner-promo__content h2 em{display:block;margin-top:.12em;color:var(--gold2);font-weight:500}
.corner-promo__content>p{max-width:38rem;color:rgba(246,241,230,.7);font-size:.88rem;line-height:1.65}
.corner-promo__checks{display:grid;gap:.48rem;list-style:none;color:rgba(246,241,230,.86);font-size:.76rem}
.corner-promo__checks li{display:flex;align-items:center;gap:.65rem}.corner-promo__checks li span{color:var(--gold2);font-family:var(--serif);font-size:.77rem}
.corner-promo__cta{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:3.1rem;margin-top:.15rem;padding:.75rem 1.2rem;
  border-radius:999px;background:linear-gradient(135deg,#e7cf94,#c9a45c 52%,#a8843c);color:var(--ink);font-size:.78rem;font-weight:800;
  box-shadow:0 .8rem 1.6rem -1rem rgba(201,164,92,.9);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.corner-promo__cta:hover{transform:translateY(-2px);box-shadow:0 1rem 1.8rem -1rem rgba(201,164,92,1)}
.corner-promo__cta span{font-size:1.1rem;transition:transform .25s var(--ease)}.corner-promo__cta:hover span{transform:translateX(3px)}
.corner-promo__cta:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}
.corner-promo__note{color:rgba(246,241,230,.45);font-size:.64rem;line-height:1.45}
@media(min-width:900px){.corner-promo{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .corner-promo__visual{min-height:100%}.corner-promo__main-image{position:absolute;inset:0;min-height:100%;aspect-ratio:auto}
  .corner-promo__content{justify-content:center;padding:clamp(1.75rem,4vw,3.5rem)}}
@media(max-width:639px){.corner-promo__visual,.corner-promo__main-image{min-height:15rem}.corner-promo__content{padding:1.25rem;gap:.7rem}
  .corner-promo__detail{right:.7rem;top:.7rem}.corner-promo__detail img{width:3.25rem;height:2.8rem}.corner-promo__detail b{font-size:.8rem}
  .corner-promo__image-caption{left:.7rem;bottom:.7rem;font-size:.6rem}.corner-promo__cta{width:100%}}

/* ── Компактная карточка для всех блоков «похожего» ───────────────────────────────
   Похожие памятники, работы, сорта гранита и статьи журнала — это подсказки
   «что ещё посмотреть», а не витрины: человек уже смотрит конкретную вещь. Полные
   карточки превращали такие блоки в копию каталога, а на телефоне съедали экран
   (в блоке похожих моделей в кадр влезала одна модель из восьми). Здесь один каркас
   на все четыре типа: фото, плашка, название в две строки и нижняя строка с ценой
   или ссылкой, отбитая волосяной линией — она и держит высоту ряда ровной. */
/* Кадр 4/3 — средний по снимкам сайта: у работ и обложек статей отношения
   сторон разъезжаются от 0,45 до 2,22, среднее 1,29, и горизонтальный кадр
   обрезает их мягче всего. Портретный остался только у моделей: их рендеры
   вертикальные сами по себе (360 × 600). */
.mini-card__media{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:4/3;background:var(--cream2)}
.mini-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .mini-card__media img{transform:scale(1.04)}
/* сорт камня — не фото, а образец: квадратный кадр и без зума при наведении */
.mini-card--swatch .mini-card__media{aspect-ratio:1/1}
.card:hover .mini-card--swatch .mini-card__media img{transform:none}
.mini-card--swatch .mini-card__media .swatch{width:100%;height:100%;border-radius:0}
.mini-card__badges{position:absolute;top:.45rem;left:.45rem;right:.45rem;display:flex;flex-wrap:wrap;gap:.2rem;z-index:2;align-items:flex-start}
.mini-card__badges .badge{position:static;font-size:.55rem;padding:.15rem .38rem;letter-spacing:.02em}
.mini-card__badges .badge.right{position:absolute;right:0;top:0}
.mini-card__body{display:flex;flex-direction:column;gap:.2rem;padding:.55rem .65rem .7rem;flex:1}
.mini-card__title{font-size:.86rem;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.mini-card__meta{font-size:.68rem;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* причина, по которой статья попала в «Читайте также»: одной строкой, иначе ряд
   карточек разъезжается по высоте из-за разной длины пояснений */
.mini-card__why{font-size:.65rem;line-height:1.3;color:var(--gold3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-card__note{display:flex;align-items:center;gap:.22rem;font-size:.58rem;line-height:1.25;color:var(--stone)}
.mini-card__note svg{flex:0 0 auto}
.mini-card__foot{margin-top:auto;padding-top:.4rem;border-top:1px solid var(--surf-ln);display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;min-width:0}
.mini-card__price{font-weight:800;color:var(--gold3);font-size:.82rem;white-space:nowrap}
/* Подпись к цене в карточках подборок: там показан не прайс изделия, а итог
   «под ключ». Без подписи человек читал бы его как цену памятника. */
.mini-card__pl{display:block;font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:var(--stone);margin-bottom:.1rem}
.mini-card__more{font-size:.68rem;font-weight:800;letter-spacing:.02em;color:var(--gold3);white-space:nowrap}
.mini-card__arrow{position:absolute;right:.5rem;bottom:.5rem;border-radius:999px;background:var(--cream);color:var(--ink);padding:.32rem .6rem;font-size:.6rem;font-weight:800;letter-spacing:.04em;transform:translateY(.75rem);opacity:0;transition:.5s;z-index:2}
.card:hover .mini-card__arrow{transform:none;opacity:1}
/* Модель: снимки вырезаны по белому фону, поэтому здесь contain + multiply,
   а сердце «в избранное» — на фото, а не под ценой, как в полной карточке */
.mini-card--model .pcard__img{aspect-ratio:4/5;padding:.5rem}
/* Кадр мини-карточки модели — contain, а не общий cover из `.mini-card__media`.
   Рендеры моделей вертикальные (360 × 600), кадр 4/5 — с cover у памятника срезало
   верх и низ: в «Похожих памятниках» карточка ОП-05 показывала середину комплекта
   без стелы и плитки. Здесь модель видна целиком, поля по бокам держит фон кадра. */
.mini-card--model .pcard__img img{object-fit:contain;object-position:center}
/* у модели справа сверху стоит сердце, поэтому плашки не доходят до края */
.mini-card--model .mini-card__badges{right:2.35rem}
.mini-card--model .heart{right:.45rem;top:.45rem;bottom:auto;height:1.75rem;width:1.75rem}
.mini-card--model .mini-card__foot{padding-right:0}
/* Ряд или сетка: на телефоне две карточки, дальше три, четыре и пять */
.slider--mini .slider__item{flex:0 0 46%}
@media(min-width:640px){.slider--mini .slider__item{flex:0 0 30%}}
@media(min-width:1024px){.slider--mini .slider__item{flex:0 0 18.7%}}
/* Сетка «похожего»: в этих блоках разное число карточек (работы — три, сорта —
   от одной до четырёх, «Читайте также» — шесть), поэтому фиксированные 3/4/5
   колонок оставляли пустые клетки в ряду или растягивали единственную карточку
   на всю ширину. На телефоне — жёсткие две колонки, дальше треки сами набираются
   по 235 px максимум: столько же, сколько в ряду похожих моделей, а короткие ряды
   просто кончаются слева, а не растягиваются.
   Важно: при заданном максимуме auto-fit считает треки по максимуму (235 px),
   поэтому без правила для телефона в 390 px влезала ровно одна колонка. */
.mini-grid{display:grid;gap:.7rem .9rem;justify-content:start;grid-template-columns:repeat(2,minmax(0,1fr))}
/* На планшете трек чуть уже (220 px): с максимумом 235 px в кадр 768 px влезало
   две колонки вместо трёх и половина ряда стояла пустой */
@media(min-width:640px){.mini-grid{grid-template-columns:repeat(auto-fit,minmax(135px,220px))}}
@media(min-width:1024px){.mini-grid{grid-template-columns:repeat(auto-fit,minmax(135px,235px))}}

/* ── Карточка модели на телефоне ─────────────────────────────────────────────────
   Вертикальная карточка шириной 180 px вырастала до 850 px, и на экран помещалась
   одна модель — при 260 моделях это не просмотр, а листание. До 480 px карточка
   ложится горизонтально (фото слева, данные справа), а сетки каталога и подборок —
   в одну колонку: блоки не удаляются, а сжимаются, поэтому вся информация остаётся. */
@media(max-width:639px){
  /* Только сетки с карточками товара: .g4/.g3 используются ещё под плитки цифр,
     команду и работы — им две колонки задавать не нужно, они и так не карточки. */
  .cardgrid,.grid:has(.pcard){grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  /* Две карточки в ряд: за экран видно вдвое больше моделей, чем при одной
     горизонтальной карточке. Ширина карточки — пол-экрана (примерно 170 px), поэтому
     из неё убрано то, что в такую ширину не читается, а не то, что не нужно вовсе:
     габариты, «О модели» и сводка с мессенджерами остаются на странице модели,
     а блок «Не нашли модель?» и так стоит один раз над сеткой (pages/catalog.php).
     Цена, название, артикул, статус «Хит» и кнопка подробностей — на месте. */
  .pcard{display:flex;flex-direction:column;align-items:stretch}
  .pcard__img{aspect-ratio:1/1;height:auto;min-height:0;padding:.4rem}
  .pcard__badges{top:.4rem;left:.4rem;right:2.1rem;gap:.2rem}
  .pcard__badges .badge{font-size:.56rem;padding:.16rem .38rem}
  /* сердце уходит на фото: внизу оно ложилось бы на цену и кнопки */
  .pcard .heart{left:auto;right:.4rem;top:.4rem;bottom:auto;height:1.8rem;width:1.8rem}
  .pcard__body{padding:.5rem .55rem .6rem}
  /* два класса: ниже по файлу есть простое .pcard__title с базовым кеглем,
     которое иначе перебило бы это правило (порядок важнее специфичности) */
  .pcard .pcard__title{font-size:.8rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pcard__meta{font-size:.56rem;margin-top:.15rem}
  .pcard__sizes,.pcard .ai,.pcard .mnote--compact,.pcard .promo-tags{display:none}
  .pcard .tags:not(.promo-tags){margin-top:.35rem;gap:.2rem}
  .pcard .tags:not(.promo-tags) .tag{font-size:.55rem;padding:.14rem .38rem}
  .pcard .tags:not(.promo-tags) .tag:nth-child(n+2){display:none}
  .pcard__pl{font-size:.55rem}
  .pcard__price{font-size:.82rem}
  /* подпись про рассрочку в узкой карточке занимала четыре строки */
  .pcard__note{display:none}
  .pcard__foot{padding-top:.5rem}
  /* одна колонка: рядом с «Подробнее» больше нет кнопки быстрого заказа,
     а иначе она занимала бы половину строки с пустым местом */
  .pcard__actions{margin-top:.5rem;gap:.35rem;grid-template-columns:1fr}
  .pcard__actions .btn{height:2.15rem;font-size:.72rem;padding:0 .35rem;letter-spacing:0}
  /* быстрый заказ разворачивается в узкой колонке: телефон и капча в 150 px
     не помещаются, поэтому на телефоне оставляем переход в карточку, а
     «Заказать» открывается там же — как и плавающая кнопка внизу экрана */
  .pcard__order{display:none}
}
/* 640–1023 px: карточка снова вертикальная (2 колонки в каталоге) и без той же
   экономии росла до 820–920 px — экран уходил на одну модель. Кадр становится
   квадратным вместо 4/5, часть текстов сворачивается, отступы плотнее: −250 px,
   состав карточки при этом не меняется. */
@media(min-width:640px) and (max-width:1023px){
  .pcard__img{aspect-ratio:1/1}
  .pcard__body{padding:.85rem}
  .pcard .ai__sum{display:none}
  .pcard .ai{margin-top:.45rem;padding:.5rem .55rem}
  .pcard .tags:not(.promo-tags) .tag:nth-child(n+3){display:none}
  .pcard .mnote--compact{margin-top:.45rem;padding:.55rem .65rem}
  .pcard .mnote--compact p{font-size:.66rem;line-height:1.35}
  .pcard__sizes{margin-top:.3rem}
  .pcard__foot{padding-top:.6rem}
  .pcard__actions{margin-top:.5rem}
}
.pcard__done{border-radius:1rem;background:var(--ink);color:var(--cream);padding:.75rem;display:flex;gap:.75rem;align-items:center;font-size:.75rem;line-height:1.35}
.pcard__order.done .btn,.pcard__order.done .pcard__panel,.pcard__order.done .pcard__collapse{display:none}
.hp{position:absolute;left:-9999px}

/* header menu: catalog categories */
.menu__group{grid-column:1/-1;margin-bottom:.5rem}
.menu__cats{display:grid;grid-template-columns:1fr;gap:.25rem;margin-top:.5rem}
@media(min-width:640px){.menu__cats{grid-template-columns:1fr 1fr;gap:.25rem 1.5rem}}
@media(min-width:1024px){.menu__cats{grid-template-columns:repeat(3,1fr)}}
.menu__cats a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem .9rem;border-radius:.75rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);font-size:.9rem;transition:.2s}
.menu__cats a:hover{border-color:var(--gold);background:rgba(201,164,92,.12)}
.menu__arrow{color:var(--gold);opacity:.7}

/* home: guarantees strip, service cards, production photos */
.hero__guarantees{display:grid;grid-template-columns:1fr;gap:.4rem;margin-top:1.75rem;list-style:none}
@media(min-width:640px){.hero__guarantees{grid-template-columns:1fr 1fr;gap:.5rem 1.5rem}}
.hero__guarantees li{position:relative;padding-left:1.35rem;font-size:.85rem;color:rgba(246,241,230,.82);line-height:1.4}
.hero__guarantees li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:800}
/* «Почему изготовление памятников доверяют нам»: фото + иконка + факт из данных сайта.
   Раскладку задаём здесь целиком, а не через .g4: у карточки своя сетка «фото + текст»,
   и на телефоне две колонки сжимали текст до одного слова в строке.
   До 640 px — одна колонка и горизонтальная карточка, 640–1023 — две колонки,
   от 1024 px — четыре; фото всегда фиксированной пропорции, поэтому макет не «прыгает». */
/* вводная строка под заголовком раздела */
.sec-lead{max-width:52rem;margin-top:.9rem;font-size:.92rem;color:var(--stone);line-height:1.6;overflow-wrap:anywhere}
@media(min-width:640px){.sec-lead{font-size:1rem}}
.trust-grid{grid-template-columns:minmax(0,1fr);gap:.75rem}
@media(min-width:640px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}
@media(min-width:1024px){.trust-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}}
.trust{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;background:var(--surf);overflow:hidden}
/* До 480 px — фото сверху кадром 16:10, текст во всю ширину карточки: в две колонки
   текст сжимался до одного слова в строке, а квадрат кадра растягивался в полосу. */
.trust__media{position:relative;overflow:hidden;background:var(--cream2);aspect-ratio:16/10;align-self:start}
@media(min-width:480px){
  /* 480–639 px — компактная горизонтальная карточка: кадр слева, текст справа */
  .trust{grid-template-columns:7.5rem minmax(0,1fr)}
  .trust__media{aspect-ratio:auto;align-self:stretch;min-height:7.5rem}
}
@media(min-width:640px){
  .trust{display:flex;flex-direction:column}
  .trust__media{aspect-ratio:4/3;align-self:auto;min-height:0}
}
.trust__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .trust__media img{transform:scale(1.07)}
.trust__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,10,0) 45%,rgba(12,11,10,.5));opacity:0;transition:opacity .5s}
.card:hover .trust__media::after{opacity:1}
.trust__icon{position:absolute;left:.6rem;bottom:.6rem;z-index:2;width:2.6rem;height:2.6rem;border-radius:.85rem;display:grid;place-items:center;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:#0c0b0a;box-shadow:0 14px 26px -14px rgba(12,11,10,.7);transition:transform .5s var(--ease)}
.card:hover .trust__icon{transform:translateY(-2px) rotate(-6deg) scale(1.06)}
.trust__body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;flex:1}
@media(min-width:640px){.trust__body{padding:1.1rem 1.25rem 1.25rem}}
.trust__body h3{font-size:1rem;line-height:1.3;transition:color .25s;overflow-wrap:anywhere;hyphens:auto}@media(min-width:640px){.trust__body h3{font-size:1.1rem}}
.trust__body p{font-size:.82rem;color:var(--stone);margin-top:.35rem;line-height:1.5;overflow-wrap:anywhere}
/* факт из данных сайта: цифра-«якорь» и подпись к ней в одну строку */
.trust__fact{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .45rem;padding-top:.7rem;margin-top:.9rem;border-top:1px solid rgba(12,11,10,.08);font-size:.72rem;color:var(--stone);line-height:1.3}
.trust__fact b{font-family:var(--serif);font-size:1.3rem;color:var(--gold3);line-height:1}
/* появление в кадре: карточка поднимается, иконка «выстреливает» с задержкой */
.reveal.in .trust__icon{animation:trustPop .55s var(--ease) .18s both}
@keyframes trustPop{from{opacity:0;transform:translateY(8px) scale(.7) rotate(-10deg)}to{opacity:1;transform:none}}
.trust-cta{margin-top:1.25rem;border-radius:var(--r);border:1px solid rgba(201,164,92,.35);background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(246,241,230,.92));padding:1.1rem 1.25rem;display:grid;gap:1rem;align-items:center}
@media(min-width:900px){.trust-cta{grid-template-columns:minmax(0,1fr) auto;padding:1.25rem 1.5rem}}
.trust-cta b{font-size:1rem}.trust-cta p{font-size:.82rem;color:var(--stone);margin-top:.3rem;line-height:1.5;max-width:44rem}
.trust-cta__btns{display:grid;gap:.5rem}
.trust-cta__btns .btn{width:100%;justify-content:center}
@media(min-width:520px){.trust-cta__btns{display:flex;flex-wrap:wrap}.trust-cta__btns .btn{width:auto}}
@media(prefers-reduced-motion: reduce){
  .reveal.in .trust__icon{animation:none}
  .reveal,.trust__media img,.trust__icon{transition:none}
}
.economy-grid .num-card{background:var(--surf);border:1px solid var(--surf-ln);border-radius:1rem;padding:1.25rem}
.economy-grid .num-card h3{font-size:1.05rem}.economy-grid .num-card p{font-size:.85rem;color:var(--stone);margin-top:.35rem;line-height:1.5}
/* «Фото производства»: адаптивные кадры со скруглённым верхом (как у стелы) */
.foto-grid{gap:.75rem}@media(min-width:640px){.foto-grid{gap:1rem}}
.foto-card{margin:0;display:flex;flex-direction:column;gap:.7rem}
.foto-card__media{position:relative;border-radius:2.25rem 2.25rem .5rem .5rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
@media(min-width:640px){.foto-card__media{border-radius:2.75rem 2.75rem .6rem .6rem}}
.foto-card__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.foto-card:hover .foto-card__media img{transform:scale(1.06)}
.foto-card__num{position:absolute;left:.75rem;top:.9rem;z-index:2;font-family:var(--serif);font-size:.95rem;line-height:1.5;color:var(--gold);background:rgba(12,11,10,.6);border:1px solid rgba(201,164,92,.4);border-radius:999px;padding:0 .55rem;backdrop-filter:blur(6px)}
.foto-card figcaption b{display:block;font-size:.85rem;color:var(--cream)}
.foto-card figcaption span{display:block;font-size:.74rem;line-height:1.45;color:rgba(246,241,230,.62);margin-top:.2rem}
@media(prefers-reduced-motion: reduce){.foto-card__media img{transition:none}}

/* catalog page: sticky chips, grid, pager */
/* Плитки разделов — обычный блок, а не липкая строка: сетка из двух-четырёх
   рядов вверху экрана съедала бы весь первый экран каталога при прокрутке. */
.catbar{background:var(--cream);border-bottom:1px solid rgba(12,11,10,.1)}
/* Плитки фильтров и разделов: два столбца на телефоне, до четырёх в ряд на
   широком экране. В отличие от строки «пилюль» с горизонтальной прокруткой, все
   варианты видны сразу, а внутри плитки — цифры: сколько моделей, работ или
   сортов и от какой цены. Компонент общий: разделы каталога, фильтры «Работ»,
   выбор гранита. Разметку собирает filter_tile() в includes/functions.php. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;padding:.65rem 0}
@media(min-width:768px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}}
.tile{display:flex;align-items:center;gap:.55rem;background:var(--surf2);border:1px solid var(--surf-ln);border-radius:.8rem;padding:.5rem .65rem;transition:.2s;min-width:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.tile:not(.is-empty):hover{border-color:var(--gold);transform:translateY(-2px)}
.tile.on{background:var(--ink);border-color:var(--ink)}
.tile.on .tile__name{color:var(--cream)}
.tile.on .tile__meta{color:rgba(246,241,230,.62)}
.tile.on .tile__code{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);border-color:transparent;color:var(--ink)}
.tile__code{flex:0 0 auto;min-width:2.3rem;height:1.95rem;padding:0 .4rem;border-radius:.6rem;display:grid;place-items:center;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--cream2);border:1px solid rgba(201,164,92,.35);color:var(--gold3)}
.tile__main{min-width:0}
.tile__name{display:block;font-size:.82rem;font-weight:600;line-height:1.25;hyphens:auto;overflow-wrap:break-word}
.tile__meta{display:block;font-size:.7rem;color:var(--stone);margin-top:.1rem}
/* Длинная подпись под названием не должна выходить за рамку плитки: слово шире
   плитки раздвигало документ (страница переставала влезать в 320 px). Раньше
   здесь стоял `anywhere` для названия тоже — он лечил выезд, но рвал слова
   посередине («памятники» → «па мят ник»). Поэтому название осталось с обычным
   `break-word`, а подписи, набранной мелким кеглем, разрешено рваться где угодно. */
.tile__meta{overflow-wrap:anywhere}
/* вариант для тёмного фона (шапка с фото у «Работ»): плитка-стекло, а не
   светлая карточка — иначе фильтры выглядели бы наклеенными на снимок */
.tile--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.tile--ghost .tile__name{color:var(--cream)}
.tile--ghost .tile__meta{color:rgba(246,241,230,.6)}
.tile--ghost .tile__code{background:rgba(255,255,255,.08);border-color:rgba(201,164,92,.45);color:var(--gold2)}
.tile--ghost:not(.is-empty):hover{border-color:rgba(201,164,92,.75);background:rgba(255,255,255,.1)}
.tile--ghost.on{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);border-color:transparent}
.tile--ghost.on .tile__name{color:var(--ink)}
.tile--ghost.on .tile__meta{color:rgba(12,11,10,.6)}
.tile--ghost.on .tile__code{background:rgba(12,11,10,.82);border-color:transparent;color:var(--gold2)}
.tile:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
/* Пустой вариант — <span>, не ссылка: курсор обычный, ховер-подъём не обещаем */
.tile.is-empty{opacity:.45;cursor:default}
.tiles--tight{padding:0}

.catalog-head{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
/* Пока в строке есть раскрытая карточка, не растягиваем соседние: иначе в них
   появляются пустые блоки между описанием и ценой */
.cardgrid:has(.ai.open),.cardgrid:has(.pcard__order.open){align-items:start}
.cardgrid{gap:.75rem;grid-template-columns:repeat(2,1fr)}@media(min-width:768px){.cardgrid{grid-template-columns:repeat(3,1fr);gap:1rem}}@media(min-width:1024px){.cardgrid{grid-template-columns:repeat(4,1fr)}}
.pager{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-top:2rem}
.pager__nums{display:flex;gap:.3rem;align-items:center;max-width:100%;flex:1;justify-content:center}
.pager__nums .pill{min-width:2.4rem;justify-content:center;text-align:center}
.pager__dots{color:var(--stone);padding:0 .25rem}
.pcard__title{font-size:1rem;line-height:1.3}@media(min-width:640px){.pcard__title{font-size:1.1rem}}

/* granite card */
.swatch{position:relative;overflow:hidden;transition:transform 1.2s var(--ease)}
.swatch svg{position:absolute;inset:0;width:100%;height:100%}
.swatch--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ratio-1{aspect-ratio:1}.ratio-5-4{aspect-ratio:5/4}
.gcard__img{position:relative;overflow:hidden}
.gcard__body{padding:.85rem 1rem}.gcard__body h3{font-size:1rem;transition:color .2s}@media(min-width:640px){.gcard__body h3{font-size:1.1rem}}
.swatch-strip{display:flex;gap:.75rem;overflow-x:auto;scrollbar-width:none;margin:2rem -1rem 0;padding:0 1rem .5rem}.swatch-strip::-webkit-scrollbar{display:none}
.swatch-strip a{flex-shrink:0;width:9rem}@media(min-width:640px){.swatch-strip a{width:11rem}}
.swatch-strip .swatch{aspect-ratio:1;border-radius:1rem;border:1px solid rgba(255,255,255,.1);transition:.3s}.swatch-strip a:hover .swatch{border-color:var(--gold)}
.swatch-strip b{display:block;font-size:.85rem;margin-top:.5rem}.swatch-strip small{color:rgba(246,241,230,.5);font-size:.75rem}

/* service / article / work / review */
.scard__img{position:relative;aspect-ratio:16/10;overflow:hidden}.scard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.scard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,11,10,.7),rgba(12,11,10,.1) 50%,transparent)}
.scard__icon{position:absolute;left:1rem;top:1rem;height:2.75rem;width:2.75rem;border-radius:999px;background:rgba(12,11,10,.7);backdrop-filter:blur(6px);border:1px solid rgba(201,164,92,.4);color:var(--gold);display:grid;place-items:center;font-size:1.1rem;z-index:2}
.scard__body{padding:1rem;display:flex;flex-direction:column;flex:1}@media(min-width:640px){.scard__body{padding:1.25rem}}
.scard__body h3{font-size:1.1rem;transition:color .2s}@media(min-width:640px){.scard__body h3{font-size:1.4rem}}
.acard .scard__body h3{font-size:1.05rem}@media(min-width:640px){.acard .scard__body h3{font-size:1.2rem}}
.scard__body p{font-size:.78rem;color:var(--stone);margin-top:.5rem;line-height:1.4}@media(min-width:640px){.scard__body p{font-size:.88rem}}
.acard .scard__body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Причина, по которой статья попала в «Читайте также»: блок собирается по смыслу,
   и читателю видно, что связывает материалы («Рядом по теме: гравировка и портрет»). */
.acard .scard__body .why{margin-top:.7rem;padding-left:.6rem;border-left:2px solid var(--gold);font-size:.72rem;line-height:1.35;font-weight:600;color:var(--gold3)}
.dark .acard .scard__body .why,.dark2 .acard .scard__body .why{color:var(--gold2)}
.scard__body .more{margin-top:auto;padding-top:1rem}
.acard .scard__img::after{display:none}
.wcard{background:var(--ink);color:var(--cream);border-color:rgba(255,255,255,.1);aspect-ratio:4/3;display:block}.wcard.tall{aspect-ratio:3/4}
.wcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}.wcard:hover img{transform:scale(1.08)}
.wcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink),rgba(12,11,10,.4) 50%,transparent)}
.wcard__body{position:absolute;inset-inline:0;bottom:0;padding:1rem;z-index:2;transform:translateY(.5rem);transition:.5s}@media(min-width:640px){.wcard__body{padding:1.25rem}}
.wcard:hover .wcard__body{transform:none}
.wcard__body h3{font-size:1rem;margin-top:.5rem}@media(min-width:640px){.wcard__body h3{font-size:1.25rem}}
.wcard__body .tags{margin:0}.wcard__body .badge{font-size:.6rem}
.wcard__price{opacity:0;transition:.3s}.wcard:hover .wcard__price{opacity:1}
.rcard{padding:1.25rem}@media(min-width:640px){.rcard{padding:1.75rem}}
.stars{color:var(--gold);letter-spacing:.2em;font-size:.85rem}
.rcard blockquote{margin-top:1rem;font-size:.92rem;line-height:1.6;color:rgba(12,11,10,.85);flex:1}
.rcard figcaption{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(12,11,10,.08);display:flex;gap:.75rem;align-items:center}
.avatar{height:2.5rem;width:2.5rem;border-radius:999px;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);font-family:var(--serif);font-weight:700;display:grid;place-items:center;flex-shrink:0}
.stat{border-radius:1rem;border:1px solid var(--surf-ln);background:var(--surf);padding:1.25rem}
.stat__v{font-family:var(--serif);font-size:2rem;color:var(--gold3);font-weight:600}.stat__l{font-size:.75rem;color:var(--stone);margin-top:.25rem;line-height:1.3}
.stat--light{background:var(--ink);color:var(--cream);border-color:rgba(201,164,92,.3)}.stat--light .stat__v{color:var(--gold)}.stat--light .stat__l{color:rgba(246,241,230,.6)}
.num-card{border-radius:var(--r);border:1px solid rgba(255,255,255,.1);background:var(--ink2);padding:1.75rem;transition:.3s;height:100%}.num-card:hover{border-color:rgba(201,164,92,.6);transform:translateY(-4px)}
.num-card .n{font-family:var(--serif);font-size:2.25rem;color:var(--gold)}.num-card h3{font-size:1.4rem;margin-top:1.5rem}.num-card p{font-size:.88rem;color:rgba(246,241,230,.6);margin-top:.6rem;line-height:1.55}
.num-card.light{background:var(--surf);border-color:var(--surf-ln)}.num-card.light .n{color:var(--gold3)}.num-card.light p{color:var(--stone)}
/* На тёмных карточках прайса заголовок должен быть светлым, как и пояснение. */
.num-card--contrast h3{color:var(--gold2)}
.cat-card .pcard__img{aspect-ratio:1}@media(min-width:640px){.cat-card .pcard__img{aspect-ratio:4/3}}
.cat-card h3{font-size:1.25rem}@media(min-width:640px){.cat-card h3{font-size:1.5rem}}
.cat-card.on{border-color:var(--gold)}
.chip{font-size:.85rem;padding:.35rem .8rem;border-radius:999px;background:var(--cream);border:1px solid rgba(12,11,10,.08);transition:.2s;display:inline-block}.chip:hover{border-color:var(--gold)}
.dark .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.panel{border-radius:var(--r);background:var(--surf);border:1px solid var(--surf-ln);padding:1.5rem}@media(min-width:640px){.panel{padding:2rem}}
/* .panel{background} объявлен ниже .dark и перебивал его: панель получалась белой
   с кремовым текстом («Надбавка за камень» на прайсе было не прочитать). */
.panel.dark{background:var(--ink);border-color:rgba(255,255,255,.1)}

/* forms */
.input{height:3rem;border-radius:1rem;padding:0 1.25rem;width:100%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:inherit}
.lead--light .input{background:var(--cream);border-color:rgba(12,11,10,.1)}
.input::placeholder{color:rgba(246,241,230,.4)}.lead--light .input::placeholder{color:var(--stone)}
.lead{border-radius:var(--r);padding:1.5rem;position:relative;overflow:hidden}@media(min-width:640px){.lead{padding:2.25rem}}
.lead--dark{background:var(--ink);color:var(--cream)}.lead--light{background:var(--surf);color:var(--ink);border:1px solid rgba(201,164,92,.45)}
.lead__title{font-size:1.75rem;margin-top:.75rem}@media(min-width:640px){.lead__title{font-size:1.9rem}}
.lead__sub{font-size:.85rem;color:rgba(246,241,230,.6);margin-top:.5rem}.lead--light .lead__sub{color:var(--stone)}
.lead__err{color:#f87171;font-size:.85rem;margin-top:.5rem}
.lead.done>*:not(.lead__done){display:none!important}
.lead__done{text-align:center;padding:1rem 0}
.lead__check{height:3.5rem;width:3.5rem;border-radius:999px;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);display:grid;place-items:center;font-size:1.5rem;font-weight:800;margin:0 auto 1.25rem}
.lead__check.sm{height:2rem;width:2rem;font-size:.9rem;margin:0;flex-shrink:0}
.lead__done p{color:rgba(246,241,230,.7);font-size:.9rem;margin-top:.5rem}.lead--light .lead__done p{color:var(--stone)}
.eyebrow.muted{opacity:.6}
.phone{display:flex;align-items:stretch;height:3rem;border-radius:1rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);overflow:hidden;transition:.2s}
.phone.light{background:var(--cream);border-color:rgba(12,11,10,.1);color:var(--ink)}
.phone:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,164,92,.18)}
.phone__prefix{display:flex;align-items:center;padding:0 .25rem 0 1rem;font-weight:600;opacity:.8}
.phone__code{appearance:none;background:transparent;border:0;font-weight:800;color:var(--gold);padding:0 1.4rem 0 .5rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a45c' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .35rem center;background-size:.8rem}
.phone.light .phone__code{color:var(--gold3)}
.phone__code option{color:var(--ink);background:#fff}
/* width:0 при flex:1: у поля есть собственная ширина по умолчанию (20 знаков),
   и она задавала min-content всей строки — в узкой боковой колонке карточки
   это распирало страницу на телефоне (403 → 431 px). В flex-контейнере поле
   всё равно растягивается на свободное место, поэтому ничего не теряется. */
.phone__num{flex:1;min-width:0;width:0;background:transparent;border:0;padding:0 .5rem;font-weight:600;letter-spacing:.06em;color:inherit;font-size:1rem}
.phone__num::placeholder{color:rgba(246,241,230,.3)}.phone.light .phone__num::placeholder{color:rgba(107,101,91,.6)}
.check{display:flex;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid rgba(12,11,10,.08);width:100%;text-align:left;cursor:pointer}
.check:last-child{border:0}
.check input{display:none}
.check .box{height:1.5rem;width:1.5rem;border-radius:.4rem;border:1px solid rgba(12,11,10,.25);display:grid;place-items:center;font-size:.8rem;transition:.2s;flex-shrink:0}
.check input:checked+.box{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);border-color:transparent;color:var(--ink)}
/* min-width:0: без него flex-элемент не давал сжаться длинному названию
   («Армированный фундамент») и панель услуг вылезала за экран телефона на 58 px */
.check span.l{flex:1;min-width:0;font-size:.9rem}.check .p{font-size:.75rem;font-weight:800;color:var(--gold3);white-space:nowrap}
input[type=range]{width:100%;accent-color:var(--gold)}

/* FAQ */
.faq{display:grid;gap:.75rem}
.faq__item{border-radius:var(--r);background:var(--surf);border:1px solid var(--surf-ln);transition:.3s}.faq__item[open]{border-color:rgba(201,164,92,.6)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;font-family:var(--serif);font-size:1.15rem;font-weight:600}
.faq__item summary::-webkit-details-marker{display:none}
.faq__plus{height:2.25rem;width:2.25rem;flex-shrink:0;border-radius:999px;border:1px solid rgba(12,11,10,.15);display:grid;place-items:center;font-size:1.25rem;transition:.3s;font-family:var(--sans)}
.faq__item[open] .faq__plus{transform:rotate(45deg);background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);border-color:transparent}
.faq__item p{padding:0 1.5rem 1.5rem;color:var(--stone);line-height:1.6;margin-top:-.25rem}

/* footer */
.ftr{background:var(--ink);color:var(--cream);margin-top:5rem}
.ftr__grid{display:grid;gap:2.5rem;padding:3.5rem 1.25rem}@media(min-width:768px){.ftr__grid{grid-template-columns:1.2fr 1.2fr 1fr}}
.ftr__text{margin-top:1.25rem;font-size:.88rem;color:rgba(246,241,230,.6);max-width:24rem;line-height:1.6}
.ftr__links{list-style:none;margin-top:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem;font-size:.88rem;color:rgba(246,241,230,.8)}.ftr__links a:hover{color:var(--gold)}
.ftr__phone{display:block;font-family:var(--serif);font-size:1.5rem;margin-top:1rem}.ftr__phone:hover{color:var(--gold)}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.05);padding:1.25rem 0;font-size:.72rem;color:rgba(246,241,230,.4)}

/* Нижняя полоса — единственный липкий блок. Плавающие плашки (.float, .float__online,
   .float__ai, .dot) убраны: они висели прямо над полосой и вместе с ней закрывали
   144 px при высоте окна 1000 px, а «Менеджер на связи» был <div> без действия. */
.float__spark{height:2.5rem;width:2.5rem;border-radius:999px;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);display:grid;place-items:center;flex-shrink:0}
.sticky{position:fixed;inset-inline:0;bottom:0;z-index:40;padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(246,241,230,.92);backdrop-filter:blur(8px);border-top:1px solid rgba(12,11,10,.1)}
/* padding-block, а не padding: шорткат обнулял боковые отступы .container на том же
   элементе и полоса не совпадала по краям с содержимым страницы. */
.sticky__in{display:flex;align-items:center;gap:.5rem;padding-block:.6rem}
@media(min-width:640px){.sticky__in{gap:.7rem;padding-block:.75rem}}
@media(max-width:359px){.sticky__in{gap:.35rem;padding-inline:.6rem}.sticky__call,.sticky__cb,.sticky__chat{width:2.75rem;height:2.75rem;flex-basis:2.75rem}.sticky__cta{padding-inline:.8rem;font-size:.88rem}}
.sticky__call{height:3rem;width:3rem;flex-shrink:0;background:#fff;border:1px solid rgba(12,11,10,.14);color:var(--ink);box-shadow:0 12px 26px -16px rgba(12,11,10,.6)}
.sticky__call:hover{border-color:var(--gold);color:var(--gold3)}
.sticky__cta{flex:1 1 auto;min-width:0}
/* На узком экране кнопка меняет подпись: «Рассчитать стоимость» с nowrap не влезает
   рядом с круглыми кнопками, а обрезанную надпись видно только у подвала сайта. */
.sticky__cta-short{display:inline}.sticky__cta-long{display:none}
@media(min-width:480px){.sticky__cta-short{display:none}.sticky__cta-long{display:inline}}
/* тихий вход в подбор: текст от 900 px, до этого только значок */
.sticky__quiz{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:3rem;width:3rem;padding:0;border-radius:999px;border:1px solid rgba(12,11,10,.14);background:#fff;color:var(--ink);font-size:.85rem;font-weight:700;white-space:nowrap;transition:.2s}
.sticky__quiz:hover{border-color:var(--gold);background:var(--cream2)}
.sticky__spark{color:var(--gold3);font-size:1rem;line-height:1}
.sticky__quiz-label{display:none}
@media(min-width:900px){.sticky__quiz{width:auto;padding:0 1rem;border-color:rgba(201,164,92,.45)}.sticky__quiz-label{display:inline}}
/* три круга + кнопка в 320 px не влезают: подбор остаётся доступен из блоков на странице */
@media(max-width:419px){.sticky__quiz{display:none}}
/* Обратный звонок — второй справа от «Позвонить». На узком экране это кружок
   (подпись стоит 150 px и выдавила бы кнопку цены), с 700 px — плашка с текстом. */
.sticky__cb{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:3rem;width:3rem;padding:0;border-radius:999px;border:1px solid rgba(201,164,92,.5);background:#fff;color:var(--ink);font-size:.85rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:.2s}
.sticky__cb:hover{border-color:var(--gold);background:var(--cream2)}
.sticky__cb-label{display:none}
@media(min-width:700px){.sticky__cb{width:auto;padding:0 1rem}.sticky__cb-label{display:inline}}
.sticky__chat{display:none;flex:0 0 3rem;align-items:center;justify-content:center;width:3rem;height:3rem;border:1px solid rgba(12,11,10,.14);border-radius:50%;background:#fff;color:var(--gold3);transition:.2s}
.sticky__chat:hover{border-color:var(--gold);background:var(--cream2)}
@media(max-width:520px){.sticky__chat{display:inline-flex}}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}@media(min-width:640px){.modal{align-items:center;padding:1.5rem}}
.modal[hidden]{display:none}
.modal__bg{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.modal__box{position:relative;width:100%;max-width:32rem;max-height:92vh;overflow-y:auto;border-radius:1.5rem 1.5rem 0 0;animation:fadeUp .4s var(--ease)}@media(min-width:640px){.modal__box{border-radius:1.5rem}}
.modal__box .lead{border-radius:inherit}
/* Обёртка модалки: держит крестик. У .modal__box есть overflow-y:auto, и кнопка
   внутри него уезжала бы вместе с прокруткой — при длинной форме человек
   оставался бы без способа закрыть окно. Обёртка не скроллится, поэтому крестик
   всегда на месте. */
.modal__shell{position:relative;width:100%;max-width:32rem;display:flex;animation:fadeUp .4s var(--ease)}
.modal__shell--cb{max-width:26rem}
/* Анимацию появления ведёт обёртка, а не сама форма: иначе крестик (он вне потока
   и не анимируется) отстаёт от формы на время анимации */
.modal__shell .modal__box{max-width:none;animation:none}
/* 44 px по высоте с учётом отступов — размер тап-цели, ниже которого на телефоне
   начинаются промахи; визуальный кружок при этом 2.6rem */
.modal__x{position:absolute;top:.7rem;right:.7rem;z-index:4;width:2.6rem;height:2.6rem;border-radius:50%;
  display:grid;place-items:center;font-size:1.05rem;line-height:1;
  background:rgba(12,11,10,.55);color:var(--cream);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px);transition:.2s var(--ease)}
.modal__x:hover{background:var(--ink);border-color:rgba(201,164,92,.7);transform:scale(1.06)}
.modal__x:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
/* На телефоне надстрочный отступ формы: без него крестик садился бы на надзаголовок */
@media(max-width:639px){.modal__shell .lead{padding-top:3.5rem}}
/* форма обратного звонка: три строки вместо шести — на телефоне она целиком
   помещается над клавиатурой, без прокрутки до кнопки */
.modal__box--cb{max-width:26rem}
/* «Забрать акцию» — форма-пуш: выезжает снизу и остаётся у нижнего края на любой
   ширине. У обычных окон на широком экране окно встаёт по центру, но здесь повод
   другой: действие начато в карточке, и окно не должно уводить взгляд в середину.
   Селектор с двумя классами — специально: он должен перебивать `.modal` из медиазапроса. */
.modal.modal--push{align-items:flex-end;padding:0}
.modal--push .modal__shell{max-width:30rem;padding:0 .6rem .6rem;animation:fadeUp .34s var(--ease)}
.modal--push .modal__box{max-height:86vh;border-radius:1.4rem 1.4rem 1rem 1rem;animation:none}
.modal--push .modal__box .lead{border-radius:inherit}
@media(min-width:640px){.modal.modal--push{padding:0}.modal--push .modal__shell{padding:0 1rem 1.25rem}}
@media(max-width:479px){.modal--push .modal__shell{padding:0 0 .5rem}.modal--push .modal__box{border-radius:1.4rem 1.4rem .5rem .5rem}}
.quiz{background:var(--ink);color:var(--cream);border:1px solid rgba(255,255,255,.1);max-width:36rem;container-type:inline-size;container-name:quiz}
/* модалке подборщика нужно больше ширины: сбоку встаёт колонка подсказок */
.modal__box--quiz{max-width:48rem}
/* Потолок 36 rem у самого .quiz — для блока на странице. В модалке ширину задаёт
   обёртка (48 rem), и без сброса подборщик не дотягивал до порога, после которого
   подсказки встают сбоку — та же ошибка, что была с классом на разметке */
.modal__box--quiz .quiz{max-width:none}
.quiz__head{position:sticky;top:0;background:rgba(12,11,10,.95);backdrop-filter:blur(8px);padding:1.25rem 1.5rem 1rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid rgba(255,255,255,.05);z-index:2}
.quiz__head b{display:block;font-size:.95rem}.quiz__head small{display:block;font-size:.68rem;color:rgba(246,241,230,.6)}.quiz__head .icon-btn{margin-left:auto;border-color:rgba(255,255,255,.1)}
.quiz__bar{height:4px;background:rgba(255,255,255,.05)}.quiz__bar i{display:block;height:100%;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);transition:width .4s;width:20%}
.quiz__body{padding:1.75rem 1.5rem}
.quiz h3{font-size:1.5rem}.quiz .hint{font-size:.85rem;color:rgba(246,241,230,.5);margin-top:.25rem}
.quiz__meta{display:flex;justify-content:space-between;align-items:center;padding:.6rem 1.5rem 0;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,241,230,.5)}
.quiz__meta b{color:var(--gold)}
.quiz__contact-heading{display:grid;gap:.3rem;margin-bottom:.85rem}
.quiz__contact-heading>b{font-family:var(--serif);font-size:1.45rem;line-height:1.15}
.quiz__contact-heading>small{font-size:.78rem;line-height:1.45;color:rgba(246,241,230,.56)}
.quiz__contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.6rem}
.quiz__radio{position:relative;display:flex;align-items:center;gap:.75rem;min-width:0;min-height:4.5rem;padding:.65rem .75rem;border:1px solid rgba(246,241,230,.14);border-radius:1rem;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));cursor:pointer;color:var(--cream);transition:border-color .22s,background .22s,transform .22s,box-shadow .22s}
.quiz__radio:hover{transform:translateY(-2px);border-color:rgba(201,164,92,.55)}
.quiz__radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.quiz__channel-icon{width:2.75rem;height:2.75rem;display:grid;place-items:center;flex:0 0 auto;border-radius:.8rem;background:rgba(255,255,255,.08);color:var(--gold2)}
.quiz__channel-icon svg{display:block;width:1.35rem;height:1.35rem}
.quiz__channel-copy{display:grid;gap:.15rem;min-width:0}
.quiz__channel-copy b{font-size:.78rem;line-height:1.25}
.quiz__channel-copy small{display:block;overflow:hidden;color:rgba(246,241,230,.52);font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}
.quiz__channel-copy small .ph{display:inline-flex;gap:.18em;font-size:inherit}
.quiz__channel-check{width:1.15rem;height:1.15rem;display:grid;place-items:center;margin-left:auto;flex:0 0 auto;border:1px solid rgba(246,241,230,.24);border-radius:50%;color:transparent;font-size:.65rem;transition:.2s}
.quiz__radio:has(input:checked){border-color:var(--gold);background:linear-gradient(135deg,rgba(201,164,92,.2),rgba(201,164,92,.07));box-shadow:0 8px 22px -16px rgba(229,201,138,.8)}
.quiz__radio:has(input:checked) .quiz__channel-icon{background:rgba(201,164,92,.18);color:var(--gold2)}
.quiz__radio:has(input:checked) .quiz__channel-check{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.quiz__radio:has(input:focus-visible){outline:2px solid var(--gold2);outline-offset:3px}
.quiz__channel--wa .quiz__channel-icon{color:#42df82}.quiz__channel--tg .quiz__channel-icon{color:#50bfff}
.quiz__channel--vb .quiz__channel-icon,.quiz__channel--mx .quiz__channel-icon{color:#a995ff}
.quiz__channel--ig .quiz__channel-icon{color:#f077b5}
.quiz__channel--phone .quiz__channel-icon{color:var(--gold2)}
@media(max-width:479px){.quiz__contact{grid-template-columns:1fr}}
@media(min-width:480px){.quiz__contact-form{max-width:40rem}}
@media(prefers-reduced-motion:reduce){.quiz__radio{transition:none}.quiz__radio:hover{transform:none}}
/* Шаг подборщика: слева вопрос и варианты, справа колонка подсказок.
   Раскладка по ширине самого блока (container query), а не окна: в модалке
   подборщик уже экрана, и по media-запросу он получил бы две колонки в 36rem.

   Счёт идёт по двум разным ширинам, поэтому контейнеры именованы: quiz — весь
   блок (вопрос + подсказки рядом или друг под другом), qmain — только колонка
   вопроса (сколько плиток в неё влезает). Без имён внутренний контейнер
   перехватывал бы запросы, и число колонок считалось бы по обрезку. */
.quiz__grid{display:grid;gap:1.5rem}
.quiz__main{min-width:0;container-type:inline-size;container-name:qmain}
/* 600 px, а не 760: столько блок занимает на главной (колонка 38 rem),
   и при прежнем пороге подсказки дома просто не показывались */
@container quiz (min-width:600px){.quiz__grid{grid-template-columns:minmax(0,1fr) 12.5rem;gap:1.5rem;align-items:start}}
@container quiz (min-width:800px){.quiz__grid{grid-template-columns:minmax(0,1fr) 14.5rem;gap:2rem}}
/* Строка-пояснение стоит и под вопросом, и в подсказках сбоку: когда колонки
   рядом, второй раз её печатать не нужно (на телефоне она остаётся в потоке) */
@container quiz (min-width:600px){.quiz__main > .hint{display:none}}
.quiz__aside{border-radius:1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:1rem 1.1rem}
/* Подсказки держатся рядом с вопросом, пока варианты прокручиваются:
   в блоке на главной их иначе уводит вверх на 700 px плиток */
@container quiz (min-width:600px){.quiz__aside{position:sticky;top:1rem}}
/* Картинка шага — только там, где подсказки стоят сбоку. На телефоне она
   уезжает под плитки и добавляла бы экран прокрутки ради картинки */
.quiz__aside-pic{display:none;width:100%;max-width:11rem;margin:0 auto .9rem;border-radius:.85rem}
@container quiz (min-width:600px){.quiz__aside-pic{display:block}}
.quiz__tips{list-style:none;margin-top:.6rem;display:grid;gap:.5rem}
.quiz__tips li{position:relative;padding-left:1.05rem;font-size:.78rem;line-height:1.45;color:rgba(246,241,230,.72)}
.quiz__tips li::before{content:"✦";position:absolute;left:0;top:-.05rem;color:var(--gold);font-size:.7rem}
/* Подсказка меняется при выборе варианта: цена раздела, число моделей, надбавка */
.quiz__tip-live{margin-top:.85rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.1);font-size:.75rem;line-height:1.45;color:var(--gold)}
.quiz__opts{display:grid;gap:.75rem;margin-top:1.5rem}
@container qmain (min-width:320px){.quiz__opts{grid-template-columns:1fr 1fr}}
/* Плитки с фото — всегда две в ряд: при трёх картинка сжимается до 130 px
   и узнаваемость модели падает, а ради неё квиз и переделан на картинки */
.quiz__opts--pic{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.quiz__opt{position:relative;display:flex;flex-direction:column;gap:.55rem;text-align:left;border-radius:1rem;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);padding:.7rem;cursor:pointer;transition:.2s var(--ease)}
.quiz__opt:hover{border-color:var(--gold);background:rgba(201,164,92,.1);transform:translateY(-2px)}
.quiz__opt.on{border-color:var(--gold);background:rgba(201,164,92,.16);box-shadow:0 0 0 3px rgba(201,164,92,.16)}
/* Фото варианта лежит на светлой подложке: рендеры и снимки вариантов сняты на белом,
   и без неё квадраты смотрелись бы вырезанными в тёмном окне */
/* Кадр под фото с зарезервированной высотой: у ленивой картинки до загрузки
   высота нулевая, и плитка вырастала скачком на 200 px, когда фото приходило.
   Замер на шаге с шестью вариантами ловил плитку 85 px вместо 275 px */
.quiz__opt--pic .quiz__media{aspect-ratio:1/1}
.quiz__media{display:block;border-radius:.75rem;overflow:hidden;background:linear-gradient(160deg,#fff,var(--cream2));box-shadow:inset 0 0 0 1px rgba(12,11,10,.1)}
.quiz__media img{display:block;aspect-ratio:1/1;width:100%;height:auto;object-fit:contain;transition:transform .45s var(--ease)}
.quiz__opt:hover .quiz__media img{transform:scale(1.05)}
.quiz__cap b{display:block;font-weight:600;font-size:.88rem;line-height:1.25}
.quiz__cap i{display:block;font-style:normal;font-size:.72rem;color:rgba(246,241,230,.55);margin-top:.2rem;line-height:1.35}
.quiz__tick{position:absolute;top:.5rem;right:.5rem;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);
  opacity:0;transform:scale(.7);transition:.2s var(--ease)}
.quiz__opt.on .quiz__tick{opacity:1;transform:scale(1)}
/* Размер участка картинкой нет — рисуем прямоугольник в пропорциях участка.
   Мерка у всех одна (большая сторона 5,5 rem), поэтому 2,0 × 2,5 м видно
   крупнее, чем 2,0 × 2,0 м; размеры считает plotTag() в main.js. */
.quiz__plot{display:block;width:var(--pw,5.5rem);height:var(--ph,5.5rem);max-width:80%;margin:1.25rem auto;
  border-radius:.25rem;border:2px solid var(--gold);background:rgba(201,164,92,.2)}
/* Нечётное число плиток с фото (3, 5) — последняя по центру: иначе она одна
   прижималась влево и ряд смотрелся обрезанным */
.quiz__opts--pic > .quiz__opt:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - .375rem);justify-self:center}
/* Узкий телефон (320 px): в две колонки кадр сжимается до 89 px, а подписи
   растягиваются на четыре строки. Одна колонка списком — фото слева, подпись справа */
@container qmain (max-width:299px){
  .quiz__opts--pic{grid-template-columns:1fr;gap:.6rem}
  .quiz__opts--pic .quiz__opt{flex-direction:row;align-items:center;gap:.8rem;padding:.6rem}
  .quiz__opts--pic .quiz__media{flex:0 0 5rem;width:5rem}
  .quiz__opts--pic .quiz__cap{flex:1;min-width:0}
  .quiz__opts--pic > .quiz__opt:last-child:nth-child(odd){grid-column:auto;max-width:none;justify-self:stretch}
}
.quiz__opts--plot .quiz__media{background:none;display:grid;place-items:center}
.quiz__sign{display:grid;place-items:center;aspect-ratio:1/1;font-size:1.5rem;color:var(--gold);background:none}
.quiz__nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.quiz__keys{margin-left:auto;font-size:.68rem;color:rgba(246,241,230,.35)}
.quiz__back{font-size:.85rem;color:rgba(246,241,230,.5)}.quiz__back:hover{color:var(--cream)}
/* Последний шаг: картинка из набора подборщика и одна строка пояснения */
.quiz__final{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;border-radius:1rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:.75rem}
.quiz__final img{width:5rem;height:auto;border-radius:.75rem;flex:0 0 auto}
.quiz__final-txt b{display:block;font-family:var(--serif);font-size:1.05rem}
.quiz__final-txt i{display:block;font-style:normal;font-size:.75rem;color:rgba(246,241,230,.6);margin-top:.15rem}
.quiz__res{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.75rem}
.quiz__res a{border-radius:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);overflow:hidden;transition:.2s}.quiz__res a:hover{border-color:rgba(201,164,92,.6)}
.quiz__res img{aspect-ratio:1/1;width:100%;object-fit:contain;background:linear-gradient(160deg,#fff,var(--cream2));padding:.35rem}.quiz__res div{padding:.75rem}.quiz__res small{font-size:.68rem;color:rgba(246,241,230,.5);display:block}.quiz__res b{font-size:.85rem;display:block;line-height:1.2}.quiz__res i{font-style:normal;font-size:.75rem;color:var(--gold);display:block;margin-top:.25rem}
.quiz__gr{display:grid;gap:.5rem;margin-top:.75rem}.quiz__gr a{display:flex;align-items:center;gap:.75rem;border-radius:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:.5rem 1rem .5rem .5rem}.quiz__gr .swatch{height:3rem;width:3rem;border-radius:.75rem;flex-shrink:0}
.quiz__gift{margin-top:1.75rem;border-radius:1rem;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);padding:1.25rem}.quiz__gift b{font-family:var(--serif);font-size:1.25rem;display:block;margin-top:.25rem}.quiz__gift p{font-size:.85rem;opacity:.8;margin-top:.25rem}

/* product page */
.prod-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.prod-price{font-family:var(--serif);font-size:2rem;color:var(--gold3)}
.incl{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;list-style:none}.incl li{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;background:var(--surf);border:1px solid var(--surf-ln);border-radius:999px;padding:.35rem .9rem}.incl li::before{content:"✓";color:var(--gold3);font-weight:800}
.info3{display:grid;gap:.75rem;margin-top:1.25rem;max-width:60rem}@media(min-width:640px){.info3{grid-template-columns:repeat(3,1fr)}}
.info3 div{border-radius:1rem;background:var(--surf);border:1px solid var(--surf-ln);padding:1rem;transition:.2s}.info3 div:hover{border-color:rgba(201,164,92,.5)}.info3 p{font-size:.88rem;line-height:1.45;margin-top:.5rem;color:rgba(12,11,10,.8)}
.conf{display:grid;gap:2rem}@media(min-width:1024px){.conf{grid-template-columns:1.05fr 1fr;gap:3rem}}
.conf__img{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surf);border:1px solid var(--surf-ln)}.conf__img>img{width:100%;aspect-ratio:1;object-fit:cover}@media(min-width:640px){.conf__img>img{aspect-ratio:4/3}}
.conf__bar{position:absolute;left:1rem;right:1rem;bottom:1rem;display:flex;align-items:center;gap:.75rem;background:rgba(12,11,10,.85);backdrop-filter:blur(8px);color:var(--cream);border-radius:1rem;padding:.75rem}
.conf__bar .swatch{height:3rem;width:3rem;border-radius:.75rem;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.conf__bar small{display:block;font-size:.68rem;color:rgba(246,241,230,.6)}.conf__bar b{display:block}.conf__bar .price{margin-left:auto;text-align:right}.conf__bar .price b{font-family:var(--serif);font-size:1.15rem;color:var(--gold)}
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1.25rem;text-align:center}.mini3 div{border-radius:1rem;background:var(--surf);border:1px solid var(--surf-ln);padding:.75rem}.mini3 b{font-family:var(--serif);font-size:1.25rem;color:var(--gold3);display:block}.mini3 small{font-size:.68rem;color:var(--stone);line-height:1.2;display:block}
.sticky-side{position:sticky;top:6rem}
.gpick{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}@media(min-width:640px){.gpick{grid-template-columns:repeat(4,1fr)}}
.gpick label{cursor:pointer;border-radius:1rem;overflow:hidden;border:2px solid transparent;transition:.2s;display:block}.gpick label:hover{border-color:rgba(12,11,10,.2)}
.gpick input{display:none}.gpick input:checked+label{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,164,92,.2)}
.gpick .swatch{aspect-ratio:1}.gpick div{padding:.35rem .5rem;background:var(--cream)}.gpick b{font-size:.75rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gpick small{font-size:.62rem;color:var(--stone)}
.gpick[data-filter] label[hidden]{display:none}
.gsel{margin-top:1.25rem;border-radius:1rem;background:var(--cream);padding:1rem;display:flex;gap:1rem}.gsel .swatch{height:5rem;width:5rem;border-radius:.75rem;flex-shrink:0}.gsel h4{font-family:var(--serif);font-size:1.1rem;font-weight:600}.gsel p{font-size:.85rem;margin-top:.35rem;line-height:1.45;color:rgba(12,11,10,.8)}

/* article */
.article{max-width:48rem;margin:0 auto;padding:3rem 1rem}.article .lede{font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:rgba(12,11,10,.9)}
.article p{font-size:1.06rem;line-height:1.7;color:rgba(12,11,10,.85);margin-top:1.25rem}
.article p.dropcap::first-letter{font-family:var(--serif);font-size:3.2rem;float:left;margin:.1rem .5rem 0 0;color:var(--gold3);line-height:.9}
/* «Наши работы» — стена фотографий без подписей. Колонки (а не grid) сохраняют
   родные пропорции кадров: в портфолио есть и 4:3, и вертикальные 3:4. */
.wfotos{columns:2;column-gap:.75rem}@media(min-width:768px){.wfotos{columns:3;column-gap:1rem}}@media(min-width:1200px){.wfotos{columns:4;column-gap:1.25rem}}
.wfotos__item{position:relative;display:block;margin-bottom:.75rem;break-inside:avoid;border-radius:var(--r);border:1px solid var(--surf-ln);background:var(--surf);overflow:hidden;transition:.3s;cursor:zoom-in}
@media(min-width:768px){.wfotos__item{margin-bottom:1rem}}
@media(min-width:1200px){.wfotos__item{margin-bottom:1.25rem}}
.wfotos__item img{display:block;width:100%;height:auto;transition:transform 1.2s var(--ease)}
.wfotos__item:hover{border-color:rgba(201,164,92,.6)}
.wfotos__item:hover img{transform:scale(1.04)}
.wfotos__item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,11,10,.3),transparent 50%);opacity:0;transition:.3s;pointer-events:none}
.wfotos__item:hover::after{opacity:1}
/* Просмотр кадра поверх страницы. Разметка и поведение как у .modal: тот же
   z-index, [hidden] вместо классов и свой закрывающий крестик. */
.lb{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb__bg{position:absolute;inset:0;background:rgba(12,11,10,.94);backdrop-filter:blur(6px)}
/* container растянут на весь экран ради центровки кадра: клики по прозрачным
   полям отдаём подложке (она закрывает просмотр), а детям возвращаем их обратно */
.lb__in{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem .5rem 4.5rem;pointer-events:none}
.lb__in>*{pointer-events:auto}
@media(min-width:640px){.lb__in{padding:3rem 5rem 4.5rem}}
.lb__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:1rem;box-shadow:0 2rem 4rem -1.5rem rgba(0,0,0,.85);animation:lbIn .3s var(--ease) both}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb__nav,.lb__x{position:absolute;display:grid;place-items:center;border-radius:999px;border:1px solid rgba(201,164,92,.45);background:rgba(12,11,10,.72);color:var(--cream);cursor:pointer;transition:.2s}
.lb__nav:hover,.lb__x:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.lb__nav{top:50%;transform:translateY(-50%);height:3rem;width:3rem;font-size:1.4rem;line-height:1}
.lb__prev{left:.4rem}.lb__next{right:.4rem}
@media(min-width:640px){.lb__nav{height:3.25rem;width:3.25rem}.lb__prev{left:1.25rem}.lb__next{right:1.25rem}}
.lb__x{top:.6rem;right:.6rem;height:2.5rem;width:2.5rem;font-size:.95rem}
@media(min-width:640px){.lb__x{top:1.25rem;right:1.25rem}}
.lb__bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,rgba(12,11,10,.96),transparent);color:rgba(246,241,230,.7);font-size:.72rem;line-height:1.35}
@media(min-width:640px){.lb__bar{left:5rem;right:5rem;bottom:1.1rem;padding:0;background:none;font-size:.8rem;gap:1rem}}
.lb__count{white-space:nowrap}
.lb__link{color:var(--gold);font-weight:700;text-align:right}.lb__link:hover{text-decoration:underline}
.lb__count b{color:var(--cream);font-weight:700}
.calc{display:grid;gap:2rem;align-items:center}@media(min-width:1024px){.calc{grid-template-columns:minmax(0,1fr) 320px}}
.calc__row{margin-top:1.75rem}.calc__row .row-between{font-size:.9rem}.calc__row .row-between span:first-child{color:var(--stone)}
.calc__out{border-radius:1rem;background:var(--ink);color:var(--cream);padding:2rem;text-align:center}.calc__out .big{font-family:var(--serif);font-size:3rem;margin-top:.75rem}
.contact-card{display:flex;align-items:center;gap:1rem;border-radius:var(--r);background:var(--surf);border:1px solid var(--surf-ln);padding:1.25rem;transition:.3s}.contact-card:hover{border-color:rgba(201,164,92,.6);transform:translateY(-2px)}
.contact-card .round{height:3rem;width:3rem}.contact-card small{color:var(--stone);font-size:.75rem;display:block}.contact-card b{font-family:var(--serif);font-size:1.25rem;font-weight:600}
.team{border-radius:var(--r);background:var(--surf);border:1px solid var(--surf-ln);padding:1.25rem;height:100%;transition:.3s}.team:hover{border-color:rgba(201,164,92,.6);transform:translateY(-4px)}
.team .avatar{height:3.5rem;width:3.5rem;font-size:1.5rem}.team h3{margin-top:1rem}.team small{color:var(--gold3);font-weight:700;font-size:.75rem}.team p{font-size:.85rem;color:var(--stone);margin-top:.5rem;line-height:1.4}
.steps{list-style:none;display:grid;gap:1.25rem}.steps li{display:flex;gap:1rem}.steps .n{font-family:var(--serif);color:var(--gold3);font-size:1.5rem;width:2rem;flex-shrink:0}.steps b{display:block}.steps small{color:var(--stone);font-size:.85rem}
.banner{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);color:var(--cream)}
.banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25}
/* баннер с фото-слайдером справа */
.banner--split{display:grid;grid-template-columns:1fr}
@media(min-width:1024px){.banner--split{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.banner__media{position:relative;display:flex;flex-direction:column;gap:.85rem;padding:0 1.75rem 1.75rem}
@media(min-width:640px){.banner__media{padding:0 3.5rem 3.5rem}}
@media(min-width:1024px){.banner__media{padding:3.5rem 3.5rem 3.5rem 0}}
.bslider{position:relative;flex:1;min-height:14rem}
.bslider__track{display:flex;gap:.85rem;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;scroll-snap-type:x mandatory}
.bslider__track::-webkit-scrollbar{display:none}
.bslider__item{flex:0 0 100%;scroll-snap-align:start;overflow:hidden;border-radius:1.25rem;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.bslider__item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
/* на широком экране слайдер растягивается на всю высоту колонки */
@media(min-width:1024px){.bslider__track{height:100%}.bslider__item{height:100%}.bslider__item img{height:100%;aspect-ratio:auto}}
.bslider__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.bslider__cap{margin:0;font-size:.78rem;line-height:1.5;color:rgba(246,241,230,.62);max-width:26rem}
.banner__shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink),rgba(12,11,10,.9),rgba(12,11,10,.4))}
.banner__in{position:relative;padding:1.75rem;max-width:42rem}@media(min-width:640px){.banner__in{padding:3.5rem}}
.banner ul{list-style:none;margin-top:1.5rem;display:grid;gap:.6rem;font-size:.9rem}.banner li{display:flex;align-items:center;gap:.75rem}.banner li::before{content:"✓";height:1.5rem;width:1.5rem;border-radius:999px;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);display:grid;place-items:center;font-size:.75rem;font-weight:800;flex-shrink:0}
.storage{margin-top:1rem;border-radius:var(--r);border:1px solid rgba(201,164,92,.4);background:linear-gradient(135deg,var(--ink2),var(--ink));padding:2rem;text-align:center}@media(min-width:640px){.storage{padding:3rem}}
.storage h3{font-size:clamp(1.6rem,3.5vw,2.4rem);max-width:40rem;margin:0 auto}.storage p{color:rgba(246,241,230,.6);margin:1rem auto 0;max-width:36rem}
.about-badge{position:absolute;bottom:-1.25rem;left:-.5rem;background:var(--cream);color:var(--ink);border-radius:1rem;padding:1rem 1.25rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);max-width:16rem}@media(min-width:640px){.about-badge{left:2rem}}
.about-badge b{font-family:var(--serif);font-size:1.25rem;display:block;margin-top:.25rem;font-weight:600}.about-badge p{font-size:.75rem;color:var(--stone);margin-top:.25rem}
.rel{position:relative}
.rounded{border-radius:var(--r);overflow:hidden}
.aspect-45 img{aspect-ratio:4/5;object-fit:cover;width:100%}@media(min-width:640px){.aspect-45 img{aspect-ratio:5/4}}
.jsonld{display:none}

/* ===== дополнения ===== */
.pill.xs{height:2rem;padding:0 .75rem;font-size:.72rem}
.slots{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.slots .pill.on{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);border-color:transparent}
.link-btn{font-size:.75rem;font-weight:700;color:rgba(246,241,230,.7);display:inline-flex;gap:.35rem;align-items:center}.link-btn:hover{color:var(--gold)}.lead--light .link-btn{color:var(--stone)}
.consent{display:flex;gap:.5rem;align-items:flex-start;font-size:.68rem;line-height:1.35;margin-top:.75rem;color:rgba(246,241,230,.5)}.lead--light .consent{color:var(--stone)}.consent a{text-decoration:underline}.consent input{accent-color:var(--gold);margin-top:.15rem}

/* ---------- форма отзыва (страница /otzyvy) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rform textarea.input{height:auto;min-height:8.5rem;padding:.9rem 1.25rem;line-height:1.55;resize:vertical}
.rform__grid{display:grid;gap:1.75rem}
@media(min-width:1024px){.rform__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.5rem;align-items:start}}
/* .grid-2 прижат к двум колонкам без исключений для узких экранов, и на 320 px в каждой
   оставалось ~130 px — «Как вас подписать» обрезался многоточием. Правим только форму
   отзыва: общий .grid-2 стоит на всех формах сайта, и менять его глобально — отдельная задача */
@media(max-width:479px){
  .rform .grid-2{grid-template-columns:1fr}
  /* В блоке компании три inline-колонки ужимали подписи карточек до 43 px,
     из-за чего текст вылезал за границы и расширял страницу на узком телефоне. */
  #company .grid.mt-8{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.rform__rating{display:grid;gap:.45rem}
.rform__label{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(246,241,230,.55)}
/* звёзды: 5→1 в разметке и row-reverse на экране, поэтому «input:checked ~ label»
   закрашивает выбранную звезду и все, что ниже — без единой строки JS */
.rate-input{position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.2rem}
.rate-input input{position:absolute;opacity:0;width:1px;height:1px}
.rate-input label{font-size:2.1rem;line-height:1;cursor:pointer;color:rgba(246,241,230,.22);transition:color .15s,transform .15s}
.rate-input label:hover{transform:translateY(-2px);color:rgba(229,201,138,.55)}
.rate-input input:checked ~ label{color:var(--gold2)}
.rate-input input:focus-visible+label{outline:2px solid var(--gold);outline-offset:3px;border-radius:.3rem}
.rform__side{border:1px solid rgba(246,241,230,.14);border-radius:1rem;padding:1.35rem;background:rgba(255,255,255,.03)}
.rform__steps{margin:.85rem 0 0 1.1rem;display:grid;gap:.65rem;font-size:.85rem;line-height:1.5;color:rgba(246,241,230,.72)}
.rform__steps li::marker{color:var(--gold2);font-weight:800}
.rform__note{font-size:.72rem;line-height:1.5;color:rgba(246,241,230,.5)}
.rform .phone{margin-top:0}

/* ---------- отзыв с фото установленного памятника ---------- */
.rcard__shot{display:block;position:relative;overflow:hidden;border-radius:1rem;margin-bottom:1.1rem;background:var(--cream2)}
.rcard__shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .45s var(--ease)}
.rcard__shot:hover img{transform:scale(1.05)}
/* подпись может занять две строки: с nowrap на 320 px обрезался год, а год здесь —
   часть честной подписи (где и когда стоит работа), а не декорация */
.rcard__shot-tag{position:absolute;left:.6rem;bottom:.6rem;right:.6rem;padding:.35rem .6rem;border-radius:.6rem;background:rgba(12,11,10,.82);color:var(--gold2);font-size:.6rem;font-weight:800;letter-spacing:.03em;line-height:1.3;backdrop-filter:blur(6px)}
.rcard__links{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-top:.9rem;padding-top:.85rem;border-top:1px solid rgba(12,11,10,.1)}
.rcard__link{font-size:.72rem;font-weight:800;color:var(--gold3);text-decoration:none;transition:color .2s}
.rcard__link:hover{color:var(--ink)}
.rcard__link--muted{color:var(--stone);font-weight:700}
.rcard__link--muted:hover{color:var(--ink)}
.heart{position:absolute;right:.75rem;bottom:.75rem;z-index:4;height:2.25rem;width:2.25rem;border-radius:999px;background:rgba(0,0,0,.4);color:var(--cream);backdrop-filter:blur(4px);display:grid;place-items:center;transition:.2s}
.heart:hover{background:rgba(0,0,0,.6)}.heart.on{background:var(--gold);color:var(--ink)}.heart.on svg{fill:currentColor}
.fav-link{position:relative}.fav-count{position:absolute;top:-.25rem;right:-.25rem;height:1.25rem;min-width:1.25rem;padding:0 .25rem;border-radius:999px;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);font-size:.62rem;font-weight:800;display:grid;place-items:center}
.pcalc{border-radius:var(--r);background:var(--ink);color:var(--cream);border:1px solid rgba(255,255,255,.1);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr)}/* minmax(0,1fr): иначе дорожку раздувало по min-content — правая колонка с ценой уезжала за границу и обрезалась */@media(min-width:1024px){.pcalc{grid-template-columns:minmax(0,1fr) 360px}}
.pcalc__l{padding:1.5rem;min-width:0}@media(min-width:640px){.pcalc__l{padding:2.25rem}}
.pcalc__r{background:var(--ink2);border-top:1px solid rgba(255,255,255,.1);padding:1.5rem;display:flex;flex-direction:column}@media(min-width:640px){.pcalc__r{padding:2.25rem}}@media(min-width:1024px){.pcalc__r{border-top:0;border-left:1px solid rgba(255,255,255,.1)}}
.pcalc__opt{display:block;cursor:pointer}.pcalc__opt input{display:none}.pcalc__opt span{display:block;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);padding:.6rem .75rem;transition:.2s;font-size:.85rem;font-weight:600}.pcalc__opt span small{display:block;font-size:.62rem;color:rgba(246,241,230,.5);font-weight:400}.pcalc__opt input:checked+span{border-color:var(--gold);background:rgba(201,164,92,.1)}
.pcalc__gr{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem}.pcalc__gr::-webkit-scrollbar{display:none}.pcalc__gr label{flex-shrink:0;width:4rem;text-align:center;cursor:pointer}.pcalc__gr input{display:none}.pcalc__gr .swatch{height:3rem;border-radius:.5rem;border:2px solid transparent;transition:.2s}.pcalc__gr input:checked+.swatch{border-color:var(--gold)}.pcalc__gr small{display:block;font-size:.56rem;margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcalc__ex{display:inline-flex;cursor:pointer}.pcalc__ex input{display:none}.pcalc__ex span{height:2.25rem;padding:0 .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;transition:.2s}.pcalc__ex input:checked+span{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);border-color:transparent}
.pcalc__big{font-family:var(--serif);font-size:2.5rem;line-height:1;margin-top:.75rem}@media(min-width:640px){.pcalc__big{font-size:3rem}}
/* вилки каталога, условия оплаты и подарки */
.pcalc__sum{border-top:1px solid rgba(255,255,255,.1);padding-top:.9rem;display:grid;gap:.5rem;font-size:.8rem}
.pcalc__sum .row-between span{color:rgba(246,241,230,.6)}
.pcalc__sum .row-between b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pcalc__sum .is-gold span,.pcalc__sum .is-gold b{color:var(--gold)}
.pcalc__sum .is-gift span,.pcalc__sum .is-gift b{color:#9fe0b4}
.pcalc__sum .is-total{border-top:1px solid rgba(255,255,255,.1);padding-top:.65rem;font-size:.92rem}
.pcalc__sum .is-total b{font-family:var(--serif);font-size:1.25rem;color:var(--gold)}
.pcalc__pay{border-radius:.75rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:.8rem .9rem;font-size:.78rem;line-height:1.55;color:rgba(246,241,230,.75)}
.pcalc__pay b{color:var(--gold)}
.pcalc__ex.is-gift span{border-color:#4f8f68;color:#a8e0bd}
.pcalc__ex.is-gift input:checked+span{background:linear-gradient(135deg,#9fe0b4,#4f8f68);color:#08210f;border-color:transparent}
.calc__opt{display:block;cursor:pointer}.calc__opt input{display:none}.calc__opt span{display:block;border-radius:.75rem;border:1px solid rgba(12,11,10,.12);padding:.6rem .75rem;font-size:.85rem;font-weight:600;transition:.2s}.calc__opt span small{display:block;font-size:.62rem;color:var(--stone);font-weight:400}.calc__opt input:checked+span{border-color:var(--gold3);background:rgba(201,164,92,.12)}
.calc.is-full .calc__row{opacity:.4}
.gift-tag{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;background:linear-gradient(135deg,#9fe0b4,#4f8f68);color:#08210f;font-size:.6rem;font-weight:800;padding:.2rem .55rem;line-height:1.3}
.gift-note{display:flex;align-items:flex-start;gap:.55rem;border-radius:.75rem;background:rgba(79,143,104,.12);border:1px solid rgba(79,143,104,.45);padding:.7rem .85rem;font-size:.78rem;line-height:1.5}
.gift-note b{display:block}
.countdown{display:flex;gap:.5rem}.countdown div{border-radius:.75rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);padding:.5rem .75rem;min-width:3.6rem;text-align:center}.countdown b{font-family:var(--serif);font-size:1.5rem;color:var(--gold);display:block;line-height:1;font-variant-numeric:tabular-nums}.countdown small{font-size:.56rem;text-transform:uppercase;letter-spacing:.15em;color:rgba(246,241,230,.6);display:block;margin-top:.25rem}
.tbl{width:100%;border-collapse:collapse;font-size:.85rem}.tbl th{background:var(--cream2);text-align:left;padding:.75rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--stone)}.tbl td{padding:.75rem;border-top:1px solid rgba(12,11,10,.06);vertical-align:top}

/* ============ карточка модели: характеристики сбоку, слайдеры, квиз, менеджер ============ */
.prod{display:grid;gap:1.5rem;margin-top:1.5rem;align-items:start}
@media(min-width:1024px){.prod{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem}}
.prod__media .conf__img{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surf);border:1px solid var(--surf-ln)}
.prod__media .conf__img img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:linear-gradient(180deg,#fff,#f3efe6)}
@media(min-width:640px){.prod__media .conf__img img{aspect-ratio:4/5}}
.prod__badges{position:absolute;left:.75rem;top:.75rem;right:.75rem;display:flex;flex-wrap:wrap;gap:.35rem;z-index:2}
/* .badge по умолчанию абсолютный (для сетки каталога) — внутри этого контейнера он в потоке */
.prod__badges .badge{position:static;white-space:nowrap}
.badge-promo{background:linear-gradient(135deg,#ffe3a8,#e0a94b);color:#3d2a05}
.badge svg,.gift-tag svg{vertical-align:-.15em;flex:none}
.prod__h1{margin-top:.75rem;font-size:clamp(1.9rem,4.2vw,2.9rem)}
.prod__buy{display:grid;gap:1rem;margin-top:1.5rem;padding:1.25rem;border-radius:var(--r);background:var(--ink);color:var(--cream)}
.prod__buy .muted,.prod__buy .tiny{color:rgba(246,241,230,.6)}
.prod-price{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.6rem);color:var(--gold);line-height:1.05}
.prod__cta{display:grid;gap:.5rem}
@media(min-width:640px){.prod__buy{grid-template-columns:minmax(0,1fr) auto;align-items:center}.prod__cta{min-width:15rem}}
.specs{margin-top:1.5rem;border-radius:var(--r);background:var(--surf);border:1px solid var(--surf-ln);padding:1.25rem 1.5rem}
.specs__t{font-family:var(--serif);font-size:1.15rem;margin-bottom:.75rem}
.specs dl{display:grid;gap:.6rem;margin:0}
.specs dl>div{display:grid;grid-template-columns:minmax(7.5rem,34%) minmax(0,1fr);gap:.75rem;padding-bottom:.6rem;border-bottom:1px solid rgba(12,11,10,.06)}
.specs dl>div:last-child{border-bottom:0;padding-bottom:0}
.specs dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--stone);font-weight:700}
.specs dd{font-size:.88rem;line-height:1.45}
.specs dd .swatch--xs{display:inline-block;vertical-align:-.25rem;height:1.1rem;width:1.1rem;border-radius:.25rem;border:1px solid rgba(12,11,10,.15);background:var(--ink3)}
.prod__desc{margin-top:1.75rem;max-width:60rem;line-height:1.7;color:rgba(12,11,10,.82)}

/* слайдер (камень + похожие модели) */
.slider{position:relative;margin-top:1.25rem}
.slider__track{display:flex;gap:.75rem;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding-bottom:.25rem;scroll-snap-type:x mandatory}
.slider__track::-webkit-scrollbar{display:none}
.slider__item{flex:0 0 78%}@media(min-width:640px){.slider__item{flex:0 0 44%}}@media(min-width:1024px){.slider__item{flex:0 0 23.6%}}
.slider__item{scroll-snap-align:start}
/* Портфолио слайдером: карточка работы растягивается на всю ширину шага,
   иначе ширина берётся от содержимого и карточки в ряду разной ширины */
.workslider .slider__item{display:flex}
.workslider .slider__item>.card{flex:1 1 auto;min-width:0}
.slider__nav{display:flex;gap:.5rem}
.slider__nav .icon-btn{height:2.5rem;width:2.5rem}
.gslide{flex:0 0 11rem;scroll-snap-align:start}
@media(min-width:640px){.gslide{flex:0 0 12.5rem}}
.gslide input{display:none}
.gslide label{display:block;cursor:pointer;border-radius:1rem;overflow:hidden;background:var(--surf);border:1px solid var(--surf-ln);transition:.3s var(--ease)}
.gslide label:hover{transform:translateY(-4px);border-color:rgba(201,164,92,.6);box-shadow:0 18px 34px -22px rgba(12,11,10,.5)}
.gslide .swatch{aspect-ratio:1;border-radius:0;border-bottom:1px solid rgba(12,11,10,.08)}
.gslide__body{padding:.6rem .7rem .7rem}
.gslide__body b{display:block;font-size:.8rem;line-height:1.25}
.gslide__body small{display:block;font-size:.6rem;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gslide__price{display:block;margin-top:.4rem;font-size:.72rem;font-weight:800;color:var(--gold3)}
.gslide input:checked+label{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,164,92,.35),0 20px 40px -24px rgba(12,11,10,.55)}
.gslide input:checked+label .gslide__price{color:var(--ink)}

/* заказ + квиз сбоку */
.order2{display:grid;gap:1.5rem;align-items:start}
@media(min-width:1024px){.order2{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:2rem}}
.quizcard h3{font-size:1.3rem}
.ticks{list-style:none;display:grid;gap:.5rem}.ticks li{position:relative;padding-left:1.5rem;font-size:.85rem;line-height:1.5}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold3);font-weight:800}
.promo-line{display:flex;align-items:flex-start;gap:.55rem;border-radius:.75rem;background:linear-gradient(135deg,rgba(255,227,168,.5),rgba(224,169,75,.25));border:1px solid rgba(201,164,92,.55);padding:.7rem .85rem;font-size:.78rem;line-height:1.5}
.promo-line b{display:block}

/* мессенджеры с иконками */
.msgr{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.msgr__i{display:inline-flex;align-items:center;gap:.4rem;height:2.5rem;padding:0 .75rem;border-radius:999px;font-size:.78rem;font-weight:700;color:#fff;transition:.25s var(--ease)}
.msgr__i:hover{transform:translateY(-2px)}
.msgr__i--whatsapp{background:#25d366;color:#062b13}
.msgr__i--telegram{background:#2aabee}
.msgr__i--max{background:#6a4df2}
/* На адресе, помеченном как накрутка кликов, вместо каналов — одна кнопка звонка
   (см. contacts_muted в antifraud.php) */
.msgr__i--muted{background:var(--gold3);color:#1a150c}
.ph--muted{font-size:.86em;color:var(--gold3);white-space:nowrap}
.msgr__i--viber{background:#7360f2}
.msgr__i--instagram{background:linear-gradient(135deg,#f58529,#dd2a7b 45%,#8134af)}
.msgr--light .msgr__i{box-shadow:0 10px 24px -16px rgba(12,11,10,.6)}
.msgr--dark .msgr__i--whatsapp{color:#062b13}

/* «Уважаемые клиенты» */
.mnote{margin-top:1rem;border-radius:var(--r);background:var(--ink);color:var(--cream);padding:1.25rem 1.5rem}
.mnote__head{display:flex;align-items:center;gap:.5rem;font-family:var(--serif);font-size:1.15rem}
.mnote__icon{color:var(--gold)}
.mnote p{margin-top:.5rem;font-size:.86rem;line-height:1.6;color:rgba(246,241,230,.78)}
.mnote p b{color:var(--gold2)}
.mnote__row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.9rem}
.mnote--compact{margin-top:.55rem;padding:.65rem .7rem;background:var(--surf2);color:var(--ink);border:1px solid var(--surf-ln)}
/* Свёртка «Уважаемые клиенты!» в карточке: строку-заголовок видно всегда, текст и
   мессенджеры раскрываются касанием (на широком экране блок открыт скриптом). */
.mnote--compact summary{cursor:pointer;list-style:none}
.mnote--compact summary::-webkit-details-marker,.mnote--compact summary::marker{display:none;content:""}
.mnote--compact .mnote__chev{margin-left:auto;color:var(--stone);font-size:.7rem;transition:transform .3s var(--ease)}
.mnote--compact[open] .mnote__chev{transform:rotate(180deg)}
.mnote--compact:hover{border-color:rgba(201,164,92,.5)}
.mnote--compact .mnote__head{font-size:.72rem;line-height:1.2;gap:.35rem;font-family:var(--sans);font-weight:800}
.mnote--compact p{margin-top:.25rem;font-size:.64rem;line-height:1.35;color:var(--stone)}
.mnote--compact .mnote__icon{color:var(--gold3)}
.mnote--compact .mnote__row{gap:.3rem;margin-top:.55rem}
.mnote--compact .msgr{gap:.25rem}
.mnote--compact .msgr__i{height:1.65rem;width:1.65rem;padding:0;justify-content:center;border-radius:999px}
.mnote--compact .mnote__phone{min-width:100%;min-height:1.65rem;font-size:.58rem}
.mnote__phone{display:inline-flex;align-items:center;justify-content:center;min-height:1.9rem;padding:0 .65rem;border-radius:999px;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);font-size:.65rem;font-weight:800;white-space:nowrap;box-shadow:0 10px 20px -14px rgba(12,11,10,.7);transition:.2s}
.mnote__phone:hover{filter:brightness(1.06);transform:translateY(-1px)}
.promo-tags{margin-top:.5rem}
.gift-tag--promo{background:linear-gradient(135deg,#ffe3a8,#e0a94b);color:#3d2a05}

/* аккуратные анимации карточек */
@media(prefers-reduced-motion:no-preference){
  .pcard{position:relative}
  .pcard .pcard__img img{transition:transform .8s var(--ease)}
  .pcard:hover .pcard__img img{transform:scale(1.04)}
  .pcard .pcard__arrow{transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .pcard:hover .pcard__arrow{transform:translateX(.35rem)}
  .mini-card:hover .mini-card__arrow{transform:translateX(.35rem)}
  .slider__item .pcard,.slider__item .mini-card{height:100%}
}



/* Главный экран: продуктовая витрина вместо «текста на фото».
   На широком экране текст и реальная модель работают как единая композиция,
   на мобильном блоки складываются в естественный сценарий: смысл → модель → CTA. */
.hero--home{min-height:clamp(46rem,calc(100vh - 4rem),58rem);isolation:isolate}
.hero--home .hero__bg{opacity:.27;transform:scale(1.03);filter:saturate(.78)}
.hero--home .hero__shade{background:
  linear-gradient(90deg,rgba(12,11,10,.96) 0%,rgba(12,11,10,.84) 34%,rgba(12,11,10,.52) 67%,rgba(12,11,10,.7) 100%),
  linear-gradient(180deg,rgba(12,11,10,.2),rgba(12,11,10,.82) 90%,var(--ink) 100%)}
.hero__glow{position:absolute;z-index:0;width:30rem;height:30rem;border-radius:50%;filter:blur(1px);pointer-events:none;opacity:.3}
.hero__glow--one{right:5%;top:8%;background:radial-gradient(circle,rgba(201,164,92,.3),transparent 66%)}
.hero__glow--two{left:18%;bottom:-15rem;background:radial-gradient(circle,rgba(143,111,47,.24),transparent 67%)}
.hero--home .hero__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(22rem,.82fr);grid-template-rows:auto auto;column-gap:clamp(2rem,5vw,5rem);row-gap:2rem;align-items:center;min-height:clamp(46rem,calc(100vh - 4rem),58rem);padding-top:4.5rem;padding-bottom:5rem}
.hero__copy{position:relative;z-index:2;max-width:42rem}
.hero__status{display:inline-flex;align-items:center;gap:.5rem;width:max-content;max-width:100%;padding:.45rem .75rem;border:1px solid rgba(201,164,92,.36);border-radius:999px;background:rgba(12,11,10,.35);color:rgba(246,241,230,.82);font-size:.68rem;font-weight:700;letter-spacing:.04em;backdrop-filter:blur(8px)}
.hero__status-dot,.hero__float-dot{width:.48rem;height:.48rem;border-radius:50%;background:#55d883;box-shadow:0 0 0 .25rem rgba(85,216,131,.12),0 0 1rem rgba(85,216,131,.7);flex:0 0 auto}
.hero-promo{padding:.75rem}
.hero-promo::before{z-index:3}
.hero-promo__visual{position:relative;overflow:hidden;border-radius:1.2rem;background:#28251f}
.hero-promo__image{display:block;width:100%;height:clamp(14rem,27vw,22rem);object-fit:cover;object-position:center 54%;opacity:.94}
.hero-promo__visual::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(0deg,rgba(12,11,10,.68),transparent);pointer-events:none}
.hero-promo__image-tag{position:absolute;z-index:1;left:.75rem;bottom:.75rem;padding:.38rem .58rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(12,11,10,.7);color:var(--cream);font-size:.52rem;font-weight:800;letter-spacing:.08em;backdrop-filter:blur(8px)}
.hero-promo__gift{position:absolute;z-index:2;right:.65rem;top:.65rem;display:flex;align-items:center;gap:.5rem;padding:.4rem .65rem .4rem .4rem;border:1px solid rgba(201,164,92,.4);border-radius:.85rem;background:rgba(255,253,247,.97);color:var(--ink);box-shadow:0 .8rem 1.6rem -1rem rgba(0,0,0,.65)}
.hero-promo__gift img{width:3.3rem;height:2.6rem;object-fit:contain;border-radius:.45rem;background:#fff}
.hero-promo__gift span{display:grid;gap:.08rem}.hero-promo__gift small{color:var(--gold3);font-size:.49rem;font-weight:800;letter-spacing:.1em}.hero-promo__gift b{font-family:var(--serif);font-size:.78rem;white-space:nowrap}
.hero-promo__body{position:relative;z-index:1;padding:.95rem .4rem .3rem}
.hero-promo__eyebrow{display:flex;align-items:center;gap:.35rem;color:var(--gold2);font-size:.54rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hero-promo__eyebrow span{font-size:.85rem}
.hero-promo__season{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;padding:.38rem .55rem;border:1px solid rgba(231,207,148,.3);border-radius:.55rem;background:rgba(201,164,92,.1);color:var(--cream);font-size:.6rem;font-weight:700;line-height:1.3}.hero-promo__season::before{content:"";width:.42rem;height:.42rem;flex:0 0 auto;border-radius:50%;background:var(--gold2);box-shadow:0 0 0 .2rem rgba(231,207,148,.13)}
.hero-promo__body h2{margin-top:.35rem;color:var(--cream);font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.1}
.hero-promo__body>p{margin-top:.3rem;color:rgba(246,241,230,.7);font-size:.68rem;line-height:1.45}
.hero-promo__cta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.75rem;padding:.7rem .9rem;border-radius:.75rem;background:linear-gradient(135deg,#e7cf94,#c9a45c 52%,#a8843c);color:var(--ink);font-size:.67rem;font-weight:800;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.hero-promo__cta:hover{transform:translateY(-2px);box-shadow:0 .8rem 1.5rem -1rem rgba(201,164,92,.9)}.hero-promo__cta span{font-size:1rem}
.hero-promo__note{display:block;margin-top:.42rem;color:rgba(246,241,230,.46);font-size:.52rem;line-height:1.35}
.hero--home .eyebrow{margin-top:1.4rem}
.hero--home h1{max-width:40rem;font-size:clamp(2.8rem,5.3vw,4.7rem);line-height:.98;text-wrap:balance}
.hero--home .hero__text{max-width:35rem;margin-top:1.35rem;font-size:clamp(.92rem,1.35vw,1.08rem)}
.hero--home .hero__cta{margin-top:1.75rem;flex-wrap:wrap}
.hero--home .hero__guarantees{gap:.75rem 1.5rem;margin-top:1.5rem;max-width:40rem}
.hero--home .hero__guarantees li{display:flex;align-items:flex-start;gap:.6rem;padding-left:0;font-size:.78rem;color:rgba(246,241,230,.78)}
.hero--home .hero__guarantees li::before{display:none}
.hero__check{display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;margin-top:.05rem;background:rgba(201,164,92,.16);border:1px solid rgba(201,164,92,.58);color:var(--gold2);font-size:.7rem;flex:0 0 auto}
.hero__guarantees b,.hero__guarantees small{display:block}.hero__guarantees b{font-size:.78rem;color:var(--cream)}.hero__guarantees small{margin-top:.08rem;color:rgba(246,241,230,.5);font-size:.68rem}
.hero__showcase{position:relative;z-index:2;width:min(100%,29rem);justify-self:end;padding:1rem;border:1px solid rgba(231,207,148,.42);border-radius:1.7rem;background:linear-gradient(145deg,rgba(32,30,27,.9),rgba(12,11,10,.72));box-shadow:0 2rem 5rem -2rem rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.1);backdrop-filter:blur(12px)}
.hero__showcase::before{content:"";position:absolute;inset:.35rem;border:1px solid rgba(201,164,92,.16);border-radius:1.35rem;pointer-events:none}
.hero__showcase-head,.hero__showcase-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.15rem .25rem .75rem}
.hero__counter{font-family:var(--serif);font-size:.9rem;color:var(--gold2)}.hero__counter i{font-family:var(--sans);font-style:normal;color:rgba(246,241,230,.35);font-size:.65rem;margin:0 .15rem}
.hero__product{position:relative;z-index:1;display:block;overflow:hidden;border-radius:1.2rem;background:linear-gradient(145deg,#fffdf7 0%,#eee1c5 58%,#b99b62 100%);border:1px solid rgba(255,255,255,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.hero__product:hover{transform:translateY(-.35rem) rotate(-.4deg);box-shadow:0 1.5rem 2.5rem -1.5rem rgba(0,0,0,.75)}
.hero__product-art{position:relative;display:grid;place-items:center;height:clamp(18rem,31vw,25rem);overflow:hidden;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.95),rgba(236,222,193,.75) 68%,rgba(185,155,98,.55))}
.hero__product-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 64%,rgba(27,20,12,.16));pointer-events:none}
.hero__product-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.hero__product-video:not([hidden]){opacity:1}
.hero__product:hover .hero__product-video{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.hero__product-video{display:none}}
.hero__product-orbit{position:absolute;border:1px solid rgba(143,111,47,.28);border-radius:50%;pointer-events:none}.hero__product-orbit--one{width:18rem;height:18rem}.hero__product-orbit--two{width:24rem;height:7rem;transform:rotate(-18deg);border-color:rgba(143,111,47,.2)}
.hero__product-badge{position:absolute;left:.8rem;top:.8rem;z-index:2;padding:.35rem .6rem;border-radius:999px;background:var(--ink);color:var(--gold2);font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 .6rem 1.2rem -1rem #000}
.hero__product-info{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;padding:.65rem .75rem;border-radius:.8rem;background:rgba(12,11,10,.78);color:var(--cream);backdrop-filter:blur(8px)}
.hero__product-info span{display:block;color:var(--gold2);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase}.hero__product-info b{display:block;margin-top:.18rem;font-family:var(--serif);font-size:1rem;line-height:1.15}
.hero__float{position:absolute;z-index:4;display:grid;grid-template-columns:auto 1fr;column-gap:.45rem;align-items:center;padding:.6rem .75rem;border:1px solid rgba(201,164,92,.4);border-radius:.8rem;background:rgba(12,11,10,.9);box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.85);backdrop-filter:blur(10px);animation:heroFloat 5s ease-in-out infinite}.hero__float>span:first-child{grid-row:span 2;color:var(--gold2);font-size:1.1rem}.hero__float b{font-size:.67rem;color:var(--cream)}.hero__float small{font-size:.58rem;color:rgba(246,241,230,.52)}.hero__float--top{right:-1.2rem;top:7.2rem}.hero__float--bottom{left:-1.25rem;bottom:5.4rem;grid-template-columns:auto 1fr}.hero__float--bottom .hero__float-dot{grid-row:span 2;margin:.15rem .15rem 0 0;width:.55rem;height:.55rem}.hero__float--bottom b{color:#8ee7aa}@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-.45rem)}}
.hero--home .stats{grid-column:1/-1;grid-row:2;width:100%;max-width:none;margin-top:0;background:rgba(255,255,255,.12);border-radius:1.15rem}.hero--home .stats div{background:rgba(12,11,10,.62);padding:1rem 1.25rem}.hero--home .stats b{font-size:1.55rem}
@media(max-width:979px){.hero--home{min-height:0}.hero--home .hero__in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;min-height:0;gap:2.5rem;padding-top:3.5rem;padding-bottom:5rem}.hero__copy{max-width:44rem;min-width:0}.hero__showcase{justify-self:center;width:min(100%,30rem);min-width:0}.hero--home .stats{grid-column:auto;grid-row:auto}.hero__float--top{right:-.65rem}.hero__float--bottom{left:-.65rem}}
@media(max-width:639px){.hero--home .hero__in{padding-top:2.5rem;padding-bottom:4rem;gap:2rem}.hero--home h1{font-size:clamp(2.55rem,12vw,3.8rem)}.hero--home .hero__text{font-size:.9rem}.hero--home .hero__cta{margin-top:1.5rem}.hero--home .hero__cta .btn{width:100%}.hero--home .hero__guarantees{grid-template-columns:1fr;gap:.55rem}.hero__showcase{padding:.7rem;border-radius:1.25rem}.hero__product-art{height:21rem}.hero-promo{width:min(100%,29rem)}.hero-promo__image{height:clamp(13rem,52vw,20rem)}.hero-promo__body{padding:.8rem .35rem .25rem}.hero__float{transform:scale(.9);transform-origin:center}.hero__float--top{right:-.55rem;top:5.5rem}.hero__float--bottom{left:-.55rem;bottom:5rem}.hero--home .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hero--home .stats div{padding:.85rem}.hero--home .stats b{font-size:1.35rem}.hero--home .stats small{font-size:.64rem}}
@media(prefers-reduced-motion:no-preference){
  .hero-promo__season::before{animation:promoBookingPulse 2.8s ease-in-out 1s 3}
}
@keyframes promoBookingPulse{0%,100%{box-shadow:0 0 0 .2rem rgba(231,207,148,.13)}50%{box-shadow:0 0 0 .38rem rgba(231,207,148,.2)}}
@media(prefers-reduced-motion:reduce){.hero-promo__season::before{animation:none}.hero__float{animation:none}.hero__product:hover{transform:none}.hero__product-art img{transition:none}}

@media(min-width:640px){.container{padding-left:1.5rem;padding-right:1.5rem}}

/* Шапка: пункты меню и номер телефона не должны переноситься на вторую строку.
   При 1024–1119 px навигация не влезает рядом с телефоном — там её открывает бургер. */
.hdr__in{gap:.6rem}
.hdr__nav{white-space:nowrap;gap:1.25rem;margin-left:1.5rem}
.hdr__nav a,.phone-btn{white-space:nowrap}
@media(max-width:1119px){.hdr__nav{display:none}}

/* Карточка работы: фото с наложенным текстом. Тело позиционировано абсолютно, поэтому
   длинное название + плашка камня + цена не влезали в кадр 4:3 и текст вылезал за карточку.
   Ограничиваем тело и подрезаем строки — карточка остаётся ровной на любой длине текста. */
/* min-height здесь задавать нельзя: у карточки aspect-ratio 4/3, и браузер выводит ширину
   из высоты, из-за чего карточка (320 px) переставала влезать в колонку 243 px */
.wcard{min-width:0}
.wcard__body{max-height:100%;overflow:hidden}
.wcard__body .badge{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard__body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wcard__body .row-between{gap:.5rem;min-width:0}
.wcard__body .row-between .small{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wcard__body .row-between .wcard__price{white-space:nowrap}

/* Факты проекта (/raboty/<slug>): компактные строки вместо крупных «цифр-достижений» —
   названия камня и адреса в них длинные и в крупной сетке раздували карточку. */
.facts{display:grid;gap:.75rem}
@media(min-width:640px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{border-radius:1rem;background:var(--surf);border:1px solid var(--surf-ln);padding:.9rem 1rem}
.fact b{display:block;font-size:.98rem;line-height:1.35;font-weight:800}
.fact span{display:block;margin-top:.25rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--stone);font-weight:700}

/* Подрезка строк в карточке работы (nowrap у плашки камня) подняла её min-content-ширину,
   и карточка переставала влезать в колонку сетки — сетка выезжала за экран на 36 px.
   min-width:0 возвращает элементу право сжиматься, обрезка делает остальное. */
.wcard,.mosaic>*,.grid>*,.g3>*,.g4>*{min-width:0}

/* ==========================================================================
   Карточка модели (/catalog/<slug>): фон карточки и фильтр «размер и для кого».

   Тема печатается классом .pv--<тема> из config.php → site.card_theme:
     sand  — тёплый песочный фон (по умолчанию), ink — тёмная, white — белые блоки.
   Все поверхности карточки (.panel, .specs, плашки, форма) берут цвета из переменных,
   поэтому смена темы — один набор значений, а не правка каждого блока.
   ========================================================================== */
.pv{--sf:#fff;--sf2:var(--cream);--sf-ln:rgba(12,11,10,.08);--sf-tx:var(--ink);--sf-mu:var(--stone);--sf-body:rgba(12,11,10,.8);--sf-glow:none}

.pv--sand{
  --sf:linear-gradient(180deg,#fffdf8,#fbf3e4);
  --sf2:#f4e9d4;
  --sf-ln:rgba(143,111,47,.2);
  --sf-glow:0 22px 44px -32px rgba(76,56,20,.6);
  background:
    radial-gradient(52rem 26rem at 8% -6%,rgba(201,164,92,.22),transparent 62%),
    radial-gradient(44rem 24rem at 102% 4%,rgba(255,255,255,.7),transparent 60%),
    linear-gradient(180deg,#f8f1e2 0%,#f3ead6 48%,#efe4cd 100%);
}

.pv--ink{
  --sf:linear-gradient(180deg,#1c1915,#151311);
  --sf2:#211d18;
  --sf-ln:rgba(246,241,230,.13);
  --sf-tx:var(--cream);
  --sf-mu:rgba(246,241,230,.62);
  --sf-body:rgba(246,241,230,.82);
  --sf-glow:0 22px 44px -28px rgba(0,0,0,.85);
  background:linear-gradient(180deg,#0e0d0c 0%,#131110 45%,#181512 100%);
  color:var(--cream);
}

.pv .panel,.pv .specs,.pv .mini3 div,.pv .info3 div,.pv .incl li,.pv .conf__img,
.pv .prod__media .conf__img,.pv .gslide label,.pv .lead--light,.pv .pill{background:var(--sf);border-color:var(--sf-ln);color:var(--sf-tx)}
.pv .panel,.pv .specs,.pv .conf__img,.pv .prod__media .conf__img,.pv .lead--light{box-shadow:var(--sf-glow)}
.pv .prod__media .conf__img img{background:var(--sf2)}
.pv .gpick .gslide__body{background:var(--sf2)}
.pv .muted,.pv .tiny.muted,.pv .specs dt,.pv .pc-sum__l{color:var(--sf-mu)}
.pv .info3 p,.pv .gsel p{color:var(--sf-body)}
.pv .specs dd .swatch--xs{border-color:var(--sf-ln)}
.pv .check,.pv .check .box{border-color:var(--sf-ln)}
.pv .lead--light .input{background:var(--sf2);border-color:var(--sf-ln);color:var(--sf-tx)}
.pv .lead--light .input::placeholder{color:var(--sf-mu)}
/* кнопка с телефоном в блоке цены: белая рамка на песочном фоне не видна */
.pv .btn-outline{border-color:var(--sf-ln);color:var(--sf-tx)}
.pv .prod__buy .btn-outline{color:var(--cream);-webkit-text-fill-color:var(--cream);border-color:rgba(246,241,230,.25)}
.pv .prod__buy .btn-outline:hover,.pv .prod__buy .btn-outline:focus-visible{color:var(--cream);-webkit-text-fill-color:var(--cream);border-color:var(--gold);background:rgba(255,255,255,.08)}
.pv--ink .lead--light .lead__sub,.pv--ink .lead--light .lead__done p,.pv--ink .lead--light .consent{color:var(--sf-mu)}
.pv--ink .pill.on{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);border-color:transparent}
/* ссылка «Смотреть двойные памятники»: .link-btn рассчитан на тёмный фон формы
   (кремовый цвет) и перебивал .gold-3 — на песочном фоне текст был нечитаем */
.pv [data-who-link-wrap] .link-btn{color:var(--gold3)}
.pv [data-who-link-wrap] .link-btn:hover{color:var(--ink)}
.pv--ink [data-who-link-wrap] .link-btn{color:var(--gold2)}
.pv--ink [data-who-link-wrap] .link-btn:hover{color:var(--cream)}
.pv--ink .pc-sum__v{color:var(--gold2)}
.pv--ink .crumbs.light{color:var(--sf-mu)}

/* --- Итог выбора (камень + размер) рядом с заголовком фильтра --- */
.pc-sum{display:flex;flex-direction:column;gap:.15rem;border-radius:1rem;padding:.65rem 1.1rem;text-align:right;flex-shrink:0;
  background:linear-gradient(135deg,rgba(231,207,148,.4),rgba(201,164,92,.16));border:1px solid rgba(201,164,92,.5)}
.pc-sum__v{font-family:var(--serif);font-size:1.3rem;line-height:1.1;color:var(--gold3);white-space:nowrap}
.pc-sum__l{font-size:.58rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
@media(min-width:640px){.pc-sum{min-width:11rem}}

.pc-block{border-radius:1.15rem;border:1px solid var(--sf-ln);background:var(--sf2);padding:.9rem}
@media(min-width:640px){.pc-block{padding:1.15rem 1.25rem}}
.pc-block__t{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--sf-mu)}
.pc-note{font-size:.72rem;line-height:1.5;color:var(--sf-mu);padding-left:.65rem;border-left:2px solid rgba(201,164,92,.55)}

/* «Для кого» и «Размер»: тот же вид, что у пилюль фильтра гранита, но размер — карточкой.
   Инпут не display:none, а невидим: так он остаётся доступен с клавиатуры (Tab + стрелки). */
.who,.size{position:relative;cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent}
.who input,.size input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.who span{display:inline-flex;align-items:center;height:2.5rem;padding:0 1.1rem;border-radius:999px;border:1px solid var(--sf-ln);background:var(--sf);font-size:.8rem;font-weight:700;color:var(--sf-tx);white-space:nowrap;transition:.2s var(--ease)}
.who:hover span{border-color:rgba(201,164,92,.7)}
.who:has(input:checked) span{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);border-color:transparent;color:var(--ink);box-shadow:0 12px 24px -16px rgba(168,132,60,.95)}

.size{display:block;border-radius:1rem;border:1px solid var(--sf-ln);background:var(--sf);padding:.7rem .85rem;color:var(--sf-tx);transition:.25s var(--ease)}
.size b{display:block;font-size:.85rem}
.size__dims{display:block;margin-top:.2rem;font-size:.68rem;color:var(--sf-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.size__p{display:inline-block;margin-top:.5rem;padding:.1rem .55rem;border-radius:999px;border:1px solid rgba(201,164,92,.45);font-size:.62rem;font-weight:800;color:var(--gold3)}
.size:hover{border-color:rgba(201,164,92,.7);transform:translateY(-2px)}
.size:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,164,92,.3),var(--sf-glow)}
.size:has(input:checked) .size__p{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);border-color:transparent}
.pv--ink .size__p{color:var(--gold2)}
.who:has(input:focus-visible) span,.size:has(input:focus-visible){outline:2px solid var(--gold2);outline-offset:3px}

/* Раскладка вариантов. Раньше на телефоне это была лента с прокруткой вбок и
   последние размеры уезжали за край экрана — теперь всё переносится по строкам:
   «для кого» пилюлями, размеры плитками в две колонки (с 640 px — в три). */
.pc-chips{display:flex;flex-wrap:wrap;gap:.6rem;overflow:visible}
.pc-chips--sizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:0}
@media(min-width:640px){.pc-chips--sizes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Контраст CTA: текст заявки всегда остаётся читаемым на золотой кнопке.
   Псевдо-блик не должен перекрывать подпись, а наследование темы не должно
   превращать текст кнопки в прозрачный gold-text. */
.btn{isolation:isolate;text-rendering:optimizeLegibility}
.btn-gold,.btn-gold:visited,.btn-gold:hover,.btn-gold:focus-visible,
.btn-gold span{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.btn-gold{font-weight:800;text-shadow:none}
.btn-gold::after{z-index:0;pointer-events:none}
.btn-gold>span{position:relative;z-index:1}
.lead--dark .btn-outline{color:var(--cream);-webkit-text-fill-color:var(--cream);border-color:rgba(246,241,230,.28)}
.lead--dark .btn-outline:hover,.lead--dark .btn-outline:focus-visible{color:var(--cream);-webkit-text-fill-color:var(--cream);border-color:var(--gold);background:rgba(255,255,255,.08)}
/* На странице модели тема .pv задаёт цвет для телефонной ссылки. Для второй
   кнопки формы приоритетнее именно сочетание «тёмная форма + контур». */
.pv .lead--dark .btn-outline,.pv .lead--dark .btn-outline:visited{color:var(--cream);-webkit-text-fill-color:var(--cream)}
.pv .lead--dark .btn-outline:hover,.pv .lead--dark .btn-outline:focus-visible{color:var(--cream);-webkit-text-fill-color:var(--cream)}
.lead--light .btn-outline,.pv .btn-outline{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.btn-wa,.btn-wa:visited,.btn-wa:hover,.btn-wa span,.btn-tg,.btn-tg:visited,.btn-tg:hover,.btn-tg span,.btn-max,.btn-max:visited,.btn-max:hover,.btn-max span{color:#fff;-webkit-text-fill-color:#fff}
.btn-ink,.btn-ink:visited,.btn-ink:hover,.btn-ink span{color:var(--cream);-webkit-text-fill-color:var(--cream)}

/* ------------------------------------------------------------------ как проходит заказ */
/* Шаг заказа: слева иконка и номер, справа текст, срок и короткая выгода.
   Сетка «иконка + текст» вместо прежнего мелкого нумерованного списка — на телефоне
   карточки идут одна под другой и читаются как таймлайн. */
.split--flow{align-items:start}
@media(min-width:1024px){.split--flow{grid-template-columns:1.12fr .88fr;gap:2.5rem}}
.flow{list-style:none;display:grid;gap:.8rem}
.flow__item{position:relative;display:grid;grid-template-columns:3.4rem minmax(0,1fr);grid-template-rows:auto auto;gap:.45rem .9rem;background:var(--surf);border:1px solid var(--surf-ln);border-radius:var(--r);padding:1rem 1.15rem;transition:border-color .3s,transform .3s,box-shadow .3s}
@media(min-width:640px){.flow__item{padding:1.15rem 1.4rem}}
.flow__item:hover{border-color:rgba(201,164,92,.55);transform:translateY(-2px);box-shadow:0 18px 40px -30px rgba(12,11,10,.55)}
.flow__ico{grid-column:1;grid-row:1;width:3.2rem;height:3.2rem;border-radius:.9rem;display:grid;place-items:center;background:var(--cream2);color:var(--gold3);border:1px solid rgba(201,164,92,.35);transition:transform .5s var(--ease),background .3s,color .3s}
.flow__item:hover .flow__ico{background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);transform:rotate(-6deg) scale(1.05)}
.flow__n{grid-column:1;grid-row:2;font-family:var(--serif);font-size:1rem;letter-spacing:.08em;color:rgba(201,164,92,.8);text-align:center}
.flow__body{grid-column:2;grid-row:1 / span 2;min-width:0}
.flow__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem}
.flow__head b{font-family:var(--serif);font-size:1.05rem;font-weight:600;overflow-wrap:anywhere}
.flow__time{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;color:var(--gold3);background:rgba(201,164,92,.12);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
.flow__body p{font-size:.86rem;color:var(--stone);line-height:1.55;margin-top:.35rem;overflow-wrap:anywhere}
.flow__note{display:inline-flex;align-items:center;gap:.3rem;margin-top:.5rem;font-size:.72rem;color:rgba(12,11,10,.55)}
.flow__note svg{color:var(--gold3)}
.flow__cta{display:grid;gap:.5rem;margin-top:1.4rem}
.flow__cta .btn{width:100%;justify-content:center}
@media(min-width:560px){.flow__cta{display:flex;flex-wrap:wrap}.flow__cta .btn{width:auto}}
.flow__fine{margin-top:.85rem;font-size:.75rem;color:var(--stone);overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.flow__item,.flow__ico{transition:none}.flow__item:hover{transform:none}}

/* ------------------------------------------------------------------ контакты и карта */
.contacts-grid{display:grid;gap:1rem}
@media(min-width:1024px){.contacts-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:1.5rem;align-items:start}}
.contacts-side{display:grid;gap:.75rem;min-width:0}
.contacts-list{display:grid;gap:.9rem}
.contacts-list__row{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.75rem;align-items:start}
.contacts-list__ico{width:2.4rem;height:2.4rem;border-radius:.75rem;display:grid;place-items:center;background:var(--cream2);color:var(--gold3);border:1px solid rgba(201,164,92,.3)}
.contacts-list__row b{display:block;font-family:var(--serif);font-size:.95rem}
.contacts-list__row span{display:block;font-size:.82rem;color:var(--stone);line-height:1.5;margin-top:.15rem;overflow-wrap:anywhere}
.map-card{background:var(--surf);border:1px solid var(--surf-ln);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.map-frame{position:relative;background:var(--cream2);aspect-ratio:4/3}
@media(min-width:640px){.map-frame{aspect-ratio:16/11}}
.map-frame iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0}
/* подложка лежит ПОВЕРХ фрейма (z-index 2 против 1 у iframe) и уходит только тогда,
   когда виджет реально ответил: main.js ставит .map-frame--ready. Иначе недоступный
   yandex.by оставлял в блоке пустое белое поле. */
.map-frame__fallback{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:.55rem;padding:1.5rem;text-align:center;color:var(--stone);background:radial-gradient(circle at 30% 28%,rgba(201,164,92,.18),transparent 62%),var(--cream2);transition:opacity .4s ease,visibility .4s ease}
.map-frame--ready .map-frame__fallback{opacity:0;visibility:hidden}
.map-frame__fallback svg{color:var(--gold3)}
.map-frame__fallback b{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.map-frame__fallback span{font-size:.8rem;line-height:1.5;max-width:22rem}
/* «Открыть в Яндекс.Картах» — 22 знака: у .btn стоит nowrap, и на 320 px кнопка
   упиралась в края кадра (родитель режет overflow:hidden, поэтому выход не виден). */
.map-frame__fallback .btn{max-width:100%;white-space:normal;height:auto;min-height:2.5rem;padding:.6rem 1rem;line-height:1.25;text-align:center}
/* подпись поверх живой карты: без виджета её заменяет подложка */
.map-frame__hint{position:absolute;left:.7rem;right:.7rem;bottom:.7rem;z-index:3;display:grid;gap:.1rem;background:rgba(12,11,10,.86);color:var(--cream);border-radius:.85rem;padding:.6rem .8rem;pointer-events:none;opacity:0;transition:opacity .4s ease}
.map-frame--ready .map-frame__hint{opacity:1}
.map-frame__hint b{font-family:var(--serif);font-size:1rem}
.map-frame__hint span{font-size:.74rem;color:rgba(246,241,230,.78)}
.map-card__foot{display:grid;gap:.75rem;padding:1rem 1.15rem;border-top:1px solid rgba(12,11,10,.08);align-items:center}
@media(min-width:520px){.map-card__foot{grid-template-columns:minmax(0,1fr) auto;padding:1.1rem 1.25rem}}
.map-card__foot b{display:block;font-size:.92rem}
.map-card__foot span{display:block;font-size:.78rem;color:var(--stone);margin-top:.2rem}
/* покрытие: Минск и города области ссылками на их страницы */
.coverage{background:var(--surf);border:1px solid var(--surf-ln);border-radius:var(--r);padding:1.25rem}
@media(min-width:640px){.coverage{padding:1.75rem}}
.coverage__head{display:grid;gap:.35rem}
.coverage__head b{font-family:var(--serif);font-size:1.15rem}
.city-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem;margin-top:1.1rem}
.city-chip{min-width:0;border:1px solid rgba(12,11,10,.1);border-radius:.85rem;padding:.6rem .75rem;background:var(--cream2);transition:border-color .25s,transform .25s}
.city-chip:hover{border-color:rgba(201,164,92,.6);transform:translateY(-2px)}
.city-chip b{display:block;font-family:var(--serif);font-size:.92rem;font-weight:600}
.city-chip span{display:block;font-size:.7rem;color:var(--stone);margin-top:.2rem}
.city-chip--main{background:linear-gradient(135deg,rgba(231,207,148,.35),rgba(201,164,92,.2));border-color:rgba(201,164,92,.5)}
.coverage__foot{display:grid;gap:.6rem;margin-top:1.1rem}
@media(min-width:768px){.coverage__foot{grid-template-columns:minmax(0,1fr) auto;align-items:center}}

/* Мобильная шапка (до 767 px): оставляем каналы связи и телефон, как в референсе.
   «Избранное» уезжает в меню и подвал, освобождая место под мессенджеры.
   На узкой ширине уменьшаем кнопки и логотип, сохраняя их порядок в одной строке. */
@media(max-width:767px){
  .hdr__in{gap:.5rem;padding-left:.6rem;padding-right:.6rem}
  .hdr__actions{gap:.35rem}
  .hdr__actions .fav-link{display:none}
  /* В мобильной шапке оставляем все четыре настроенных канала связи и телефон,
     как в референсе; лишние каналы (пятый и далее) остаются в меню. */
  .hdr__actions .chan-hide-s{display:flex}
  .hdr__actions .chan-hide-m{display:none}
  .hdr .round,.hdr .icon-btn{height:2.5rem;width:2.5rem}
}
/* На узком экране сохраняем тот же состав шапки, уменьшая кнопки и логотип,
   чтобы бургер, бренд, четыре мессенджера и звонок оставались в одной строке. */
@media(max-width:479px){
  .hdr__in{gap:.35rem;padding-left:.5rem;padding-right:.5rem}
  .hdr__actions{gap:.15rem}
  .hdr__actions .fav-link{display:none}
  .hdr .logo{gap:.3rem;min-width:0}
  .hdr .logo svg{width:32px;height:32px;flex:0 0 32px}
  .hdr .logo__name{font-size:1rem;white-space:nowrap}
  .hdr .logo__sub{display:block;font-size:.4rem;letter-spacing:.12em;white-space:nowrap}
  .hdr .round,.hdr .icon-btn{height:2.25rem;width:2.25rem;flex:0 0 2.25rem}
}
@media(min-width:440px) and (max-width:479px){
  .hdr .logo svg{width:40px;height:40px;flex-basis:40px}
  .hdr .logo__name{font-size:1.2rem}
  .hdr .logo__sub{font-size:.45rem;letter-spacing:.15em}
  .hdr .round,.hdr .icon-btn{height:2.5rem;width:2.5rem;flex-basis:2.5rem}
}
@media(max-width:399px){
  .hdr__in{gap:.18rem}
  .hdr__actions{gap:.1rem}
  .hdr .round,.hdr .icon-btn{height:2.1rem;width:2.1rem;flex-basis:2.1rem}
}
@media(max-width:359px){
  /* На самых узких экранах фиксируем отдельные треки для бургера, бренда и каналов:
     все четыре мессенджера и звонок остаются в строке и не выталкивают логотип. */
  .hdr__in{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto;gap:.15rem;padding-left:.3rem;padding-right:.3rem}
  .hdr__in>.icon-btn{grid-column:1}
  .hdr__in>.logo{grid-column:2;min-width:0;gap:.2rem}
  .hdr .logo svg{width:24px;height:24px;flex-basis:24px}
  .hdr .logo__name{font-size:.78rem}
  .hdr .logo__sub{font-size:.34rem;letter-spacing:.1em}
  .hdr__actions{grid-column:3;margin-left:0}
  .hdr .round,.hdr .icon-btn{height:1.75rem;width:1.75rem;flex-basis:1.75rem}
}
/* Номер телефона словами показываем только от 1024 px: на 640–1000 px, пока меню
   открывает бургер, бургер + логотип + три круглые кнопки + номер не влезали — лишние
   4 px растягивали всю страницу в горизонтальную прокрутку. До 1024 px остаётся иконка. */
.phone-btn .hide-m{display:none}
@media(min-width:1024px){.phone-btn .hide-m{display:inline}}


/* ── Страница отзывов ────────────────────────────────────────────────────────────
   Сводка по оценкам, фильтр по площадке и городу, ссылки на площадку в карточке.
   Всё считается из content.json → reviews, поэтому блоки должны переживать любое
   число отзывов: сетки без фиксированных колонок, бары — проценты от общего числа. */
.rate-card{background:var(--surf);border:1px solid var(--surf-ln);border-radius:var(--r);padding:1.25rem;display:grid;gap:1.5rem}
@media(min-width:640px){.rate-card{padding:1.75rem}}
@media(min-width:1024px){.rate-card{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:2rem;align-items:center;padding:2rem}}
.rate-card__score{text-align:center}
@media(min-width:1024px){.rate-card__score{text-align:left}}
.rate-card__value{font-family:var(--serif);font-size:3.25rem;line-height:1;font-weight:600}
.rate-card__score .stars{font-size:1.1rem;margin-top:.35rem;display:block}
.rate-card__side{display:grid;gap:1.25rem;min-width:0}
.rate-bars{display:grid;gap:.4rem}
.rate-bar{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 1.4rem;align-items:center;gap:.6rem}
.rate-bar__l{font-size:.78rem;color:var(--stone);white-space:nowrap}
.rate-bar__t{height:.5rem;border-radius:999px;background:rgba(12,11,10,.07);overflow:hidden}
.rate-bar__t i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#e7cf94,#a8843c)}
.rate-bar__n{font-size:.78rem;color:var(--stone);text-align:right;font-variant-numeric:tabular-nums}
.rate-card__foot{display:grid;gap:.9rem;padding-top:1.25rem;border-top:1px solid rgba(12,11,10,.08)}
@media(min-width:640px){.rate-card__foot{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rate-card__foot b{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:600}
.rate-card__foot small{display:block;font-size:.75rem;color:var(--stone);line-height:1.45;margin-top:.15rem}

/* фильтр: до 640 px строки прокручиваются вбок, а не ломают разметку */
.rv-filter{display:grid;gap:.75rem;padding:1rem 1.15rem;background:var(--cream2);border:1px solid rgba(12,11,10,.07);border-radius:var(--r)}
.rv-filter__row{display:flex;align-items:center;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.15rem}
.rv-filter__row::-webkit-scrollbar{display:none}
.rv-filter__label{flex:0 0 auto;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold3);margin-right:.15rem}
.rv-filter .chip{cursor:pointer;flex:0 0 auto;white-space:nowrap}
.rv-filter .chip.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.rv-filter__count{flex:0 0 auto;margin-left:auto;font-size:.75rem;color:var(--stone);white-space:nowrap;padding-left:.75rem}
.rv-filter__count b{color:var(--ink)}
/* пустая выдача фильтра не должна выглядеть поломкой */
.rv-filter__empty{padding:1.5rem;text-align:center;color:var(--stone);border:1px dashed rgba(12,11,10,.15);border-radius:var(--r)}

/* площадка в карточке отзыва становится ссылкой на источник */
/* Строки ссылок на кладбища и города (страница «Работы») в разметке написаны
   без пробелов между тегами — <a></a><a></a>, поэтому браузер не находил места
   для переноса и ряд уезжал за экран телефона на 460 px. Flex с переносом даёт
   эту возможность переноса независимо от пробелов в разметке. */
.geo-chips{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.35rem}

.tag--link{text-decoration:none;transition:.2s}
.tag--link:hover{color:var(--gold3);border-color:rgba(201,164,92,.5)}

/* три ссылки под отзывами */
.chip-card{display:flex;align-items:flex-start;gap:.85rem;background:var(--surf);border:1px solid var(--surf-ln);border-radius:var(--r);padding:1.15rem;transition:.25s}
.chip-card:hover{border-color:rgba(201,164,92,.6);transform:translateY(-3px)}
.chip-card__i{height:2.6rem;width:2.6rem;flex-shrink:0;border-radius:.8rem;background:var(--cream2);border:1px solid rgba(201,164,92,.3);color:var(--gold3);display:grid;place-items:center}
.chip-card b{display:block;font-family:var(--serif);font-size:1rem}
.chip-card span{display:block;font-size:.78rem;color:var(--stone);line-height:1.5;margin-top:.2rem}

/* ── Страница контактов: статус приёмной и три пояснения ───────────────────────── */
.status-pill{display:grid;gap:.75rem;align-items:center;padding:.9rem 1.1rem;border-radius:var(--r);background:var(--surf);border:1px solid var(--surf-ln)}
@media(min-width:768px){.status-pill{grid-template-columns:auto minmax(0,1fr) auto;gap:1.1rem;padding:1rem 1.25rem}}
.status-pill__dot{height:.7rem;width:.7rem;border-radius:999px;flex-shrink:0;justify-self:center}
.status-pill--on .status-pill__dot{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.16)}
.status-pill--off .status-pill__dot{background:#d9a03c;box-shadow:0 0 0 5px rgba(217,160,60,.16)}
.status-pill b{display:block;font-family:var(--serif);font-size:1.05rem}
.status-pill span{display:block;font-size:.8rem;color:var(--stone);line-height:1.5;margin-top:.15rem}
@media(max-width:767px){.status-pill .btn{width:100%}}
/* тот же статус дублируется цветом: занятой посетитель видит ответ до текста */
.status-pill--on b{color:#12813f}
.status-pill--off b{color:#8a6318}

.round.ig{background:linear-gradient(45deg,#f09433,#dc2743 45%,#bc1888);color:#fff}
.round.mx{background:#6a4df2;color:#fff}
.round.vb{background:#7360f2;color:#fff}

.info-card{background:var(--surf);border:1px solid var(--surf-ln);border-radius:var(--r);padding:1.25rem}
.info-card__i{height:2.6rem;width:2.6rem;border-radius:.8rem;background:var(--cream2);border:1px solid rgba(201,164,92,.3);color:var(--gold3);display:grid;place-items:center;margin-bottom:.8rem}
.info-card b{display:block;font-family:var(--serif);font-size:1.05rem}
.info-card p{font-size:.82rem;color:var(--stone);line-height:1.6;margin-top:.35rem}

/* ── Размеры отдельными строками ────────────────────────────────────────────────
   Раньше габариты шли одной строкой «стела 100 × 50 × 8 см · подставка 60 × 20 × 15»:
   вторую часть без «см» читали как безразмерную, а длинная строка не влезала в карточку.
   Теперь в каждой карточке товара две строки с подписью детали. */
.size-list{list-style:none;margin:0;padding:0;display:grid;gap:.2rem;min-width:0}
.size-list li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:.4rem;align-items:baseline;min-width:0}
.size-list__l{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold3);white-space:nowrap}
.size-list__v{font-size:.78rem;font-weight:600;color:rgba(12,11,10,.82);overflow-wrap:anywhere}
/* в карточке каталога строки компактнее и с воздухом над ними */
.pcard__sizes{margin-top:.35rem}
.pcard__sizes .size-list__v{font-size:.74rem}
/* под названием модели на странице товара */
.size-list--lead{margin-top:.6rem}
.size-list--lead .size-list__l{font-size:.7rem}
.size-list--lead .size-list__v{font-size:.92rem;font-weight:700}
/* в таблице характеристик строки чуть плотнее, но подписи остаются:
   без них непонятно, какая тройка чисел — стела, а какая — подставка */
.size-list--dd li{grid-template-columns:5.6rem minmax(0,1fr)}
.size-list--dd .size-list__v{font-size:.85rem;color:var(--ink)}

/* ============ Статьи: хаб, оглавление и блоки тела ============
   Тело статьи приходит не одним текстом, а блоками (раздел, список, врезка, факты,
   таблица, FAQ). Классы ниже — единственные стили этих блоков: разметка статей
   генерируется скриптом, и «своих» стилей у неё быть не должно. */
.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.article h2{font-family:var(--serif);font-size:clamp(1.45rem,3.2vw,1.95rem);line-height:1.22;margin-top:2.75rem;scroll-margin-top:6rem}
.article h3{font-family:var(--serif);font-size:1.15rem;line-height:1.3;margin-top:1.75rem}
.article .alist{margin-top:1.1rem;display:grid;gap:.6rem;list-style:none}
.article .alist li{position:relative;padding-left:1.6rem;font-size:1.02rem;line-height:1.65;color:rgba(12,11,10,.85)}
.article .alist li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border-radius:2px;
  background:linear-gradient(135deg,var(--gold2),var(--gold));transform:rotate(45deg)}
.article .alist--num{counter-reset:al}
.article .alist--num li{padding-left:2.15rem;counter-increment:al}
.article .alist--num li::before{content:counter(al);width:1.4rem;height:1.4rem;border-radius:999px;top:.12em;
  background:var(--ink);color:var(--gold2);font-size:.72rem;font-weight:700;display:flex;align-items:center;
  justify-content:center;transform:none}
.article .anote{margin-top:1.5rem;padding:1rem 1.15rem;border-left:3px solid var(--gold);background:var(--cream2);
  border-radius:0 .9rem .9rem 0;font-size:.98rem;line-height:1.65;color:rgba(12,11,10,.85)}
.article blockquote{margin-top:1.5rem;padding-left:1.15rem;border-left:2px solid rgba(201,164,92,.6);
  font-family:var(--serif);font-size:1.15rem;line-height:1.5;color:rgba(12,11,10,.9)}
.article .afacts{margin-top:1.75rem;display:grid;gap:.55rem;padding:1.1rem 1.25rem;border:1px solid rgba(12,11,10,.09);
  border-radius:1.1rem;background:var(--cream)}
.article .afacts__row{display:flex;gap:1rem;justify-content:space-between;align-items:baseline;font-size:.95rem}
.article .afacts__row span{color:var(--stone)}
.article .afacts__row b{font-variant-numeric:tabular-nums;text-align:right}
.atable-wrap{margin-top:1.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.atable{width:100%;min-width:32rem;border-collapse:collapse;font-size:.95rem}
.atable th,.atable td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid rgba(12,11,10,.08);vertical-align:top}
.atable th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--stone);font-weight:700}
.atable tr:last-child td{border-bottom:0}
.atoc{margin-top:2rem;padding:1.1rem 1.3rem;border:1px solid rgba(12,11,10,.1);border-radius:1.1rem;background:var(--cream)}
.atoc__title{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;color:var(--stone);font-weight:700}
.atoc ol{margin-top:.65rem;padding-left:1.3rem;display:grid;gap:.45rem}
.atoc a{font-size:.98rem;color:rgba(12,11,10,.85)}
.atoc a:hover{color:var(--gold3)}
.article .faq{margin-top:1.1rem}
@media(min-width:640px){.article{max-width:48rem;padding:3rem 1.5rem}}

/* ============ онлайн-консультант ============
   Один плавающий чат на весь сайт. Стоит выше нижней полосы (z-index 55 против 40),
   но ниже модалок (60), чтобы форма заявки и подбор всегда были поверх него.
   Монограмма в кружке вместо фото: подставлять чужое лицо в чат нельзя, а «иконка
   робота» снижает доверие сильнее, чем буква фирменного знака. */
.cons{position:fixed;right:1rem;bottom:5.2rem;z-index:55;pointer-events:none}
.cons>*{pointer-events:auto}
@media(min-width:640px){.cons{right:1.5rem;bottom:5.6rem}}
.cons__launch{display:flex;align-items:center;gap:.6rem;padding:.45rem .95rem .45rem .45rem;border-radius:999px;
  background:#fff;border:1px solid rgba(12,11,10,.12);box-shadow:0 18px 38px -20px rgba(12,11,10,.65);
  transition:.25s var(--ease);max-width:calc(100vw - 2rem)}
.cons__launch:hover{border-color:var(--gold);transform:translateY(-2px)}
.cons__ava{position:relative;width:2.6rem;height:2.6rem;flex-shrink:0;border-radius:999px;display:flex;
  align-items:center;justify-content:center;background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);
  color:var(--ink);font-family:var(--serif);font-size:1.3rem;font-weight:600}
.cons__ava--sm{width:2.3rem;height:2.3rem;font-size:1.1rem}
.cons__on{position:absolute;right:-1px;bottom:-1px;width:.72rem;height:.72rem;border-radius:999px;
  background:#3fbf6a;border:2px solid #fff}
.cons__launch-txt{text-align:left;min-width:0}
.cons__launch-txt b{display:block;font-size:.9rem;line-height:1.15;white-space:nowrap}
.cons__launch-txt small{display:block;font-size:.7rem;color:var(--stone);white-space:nowrap}
/* на телефоне от текста оставляем только аватар с точкой — низ экрана и так занят полосой */
@media(max-width:520px){.cons__launch-txt,.cons__badge{display:none}.cons__launch{padding:.4rem;border-radius:999px}}
@media(max-width:520px){.cons:not(.cons--open){display:none}}
.cons__badge{margin-left:.2rem;min-width:1.35rem;height:1.35rem;border-radius:999px;background:var(--gold3);
  color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums}
.cons--open .cons__launch,.cons--talked .cons__badge{display:none}
.cons__nudge{position:absolute;right:0;bottom:3.9rem;width:min(19rem,calc(100vw - 2rem));display:flex;
  gap:.35rem;align-items:flex-start;padding:.85rem 1rem;border-radius:1.15rem;background:#fff;
  border:1px solid rgba(12,11,10,.1);box-shadow:var(--sh);animation:fadeUp .45s var(--ease)}
.cons__nudge-body{text-align:left}
.cons__nudge-body b{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold3)}
.cons__nudge-body span{display:block;margin-top:.3rem;font-size:.9rem;line-height:1.45}
.cons__nudge-close{flex-shrink:0;width:1.6rem;height:1.6rem;border-radius:999px;color:var(--stone);font-size:.75rem}
.cons__nudge-close:hover{background:var(--cream2);color:var(--ink)}

.cons__panel{position:absolute;right:0;bottom:3.9rem;width:min(24rem,calc(100vw - 2rem));
  display:flex;flex-direction:column;max-height:min(34rem,68vh);overflow:hidden;border-radius:1.35rem;
  background:var(--ink);color:var(--cream);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);animation:fadeUp .35s var(--ease)}
@media(max-width:520px){.cons__panel{position:fixed;inset-inline:.5rem;bottom:calc(4.75rem + env(safe-area-inset-bottom,0px));width:auto;
  height:min(74vh,calc(100dvh - 6rem - env(safe-area-inset-bottom,0px)));max-height:none;border-radius:1.35rem}}
@media(max-width:520px){.cons__nudge{display:none}}
@media(max-width:520px){.cons__body{flex:1 1 0;min-height:0;max-height:none}.cons__chips{flex:0 1 auto;max-height:7rem;overflow-y:auto}.cons__foot{flex:0 0 auto}}
@media(max-width:520px){.cons--lead .cons__panel{height:min(86vh,calc(100dvh - 5.5rem - env(safe-area-inset-bottom,0px)))}}
.cons__head{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem .85rem;position:sticky;top:0;z-index:2;
  background:rgba(12,11,10,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.cons__who{min-width:0}
.cons__who b{display:block;font-size:.92rem}
.cons__who small{display:block;font-size:.7rem;color:rgba(246,241,230,.55)}
.cons__head .icon-btn{margin-left:auto;border-color:rgba(255,255,255,.12)}
.cons__body{flex:1;overflow-y:auto;padding:1.1rem;display:grid;gap:.6rem;align-content:start;
  scrollbar-width:thin}
.cons__msg{font-size:.9rem;line-height:1.6;border-radius:1.05rem;padding:.7rem .9rem;max-width:92%}
.cons__msg p+p{margin-top:.5rem}
.cons__msg--bot{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);
  border-bottom-left-radius:.3rem;justify-self:start}
.cons__msg--me{background:rgba(201,164,92,.18);border:1px solid rgba(201,164,92,.35);
  border-bottom-right-radius:.3rem;justify-self:end;max-width:80%}
.cons__msg--typing{padding:.75rem .9rem}
.cons__dots{display:inline-flex;gap:.22rem}
.cons__dots span{width:.36rem;height:.36rem;border-radius:999px;background:rgba(246,241,230,.6);
  animation:consDot 1s infinite ease-in-out}
.cons__dots span:nth-child(2){animation-delay:.15s}
.cons__dots span:nth-child(3){animation-delay:.3s}
@keyframes consDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.cons__links{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.6rem}
.cons__links a{font-size:.82rem;font-weight:700;color:var(--gold2)}
.cons__links a:hover{color:#fff}
.cons__chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .8rem}
.cons__chips[hidden]{display:none}
.cons__chip{padding:.45rem .85rem;border-radius:999px;border:1px solid rgba(246,241,230,.22);
  font-size:.8rem;color:var(--cream);transition:.2s}
.cons__chip:hover{border-color:var(--gold);background:rgba(201,164,92,.16)}
.cons__lead{border-top:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);overflow-y:auto}
/* Когда показалась форма заявки, панель становится одним прокручиваемым столбцом.
   Иначе форма обрезалась по нижнему краю, а кнопка «Жду звонка» оставалась
   за пределами видимой части — то есть вне клика. */
.cons--lead .cons__panel{max-height:min(46rem,86vh);overflow-y:auto}
.cons--lead .cons__body{flex:0 0 auto;overflow:visible;max-height:none}
.cons--lead .cons__lead{flex:0 0 auto;overflow:visible}
.cons--lead .cons__chips{display:none}
.cons__lead .lead{border-radius:0;background:transparent;padding:1.1rem}
.cons__lead .lead__title{font-size:1.15rem}
.cons__lead .lead__sub{font-size:.78rem}
.cons__lead--in{animation:fadeUp .35s var(--ease)}
.cons--done .cons__chips{display:none}
.cons__foot{padding:.75rem 1.1rem 1rem;border-top:1px solid rgba(255,255,255,.07)}
.cons__foot-row{display:flex;gap:.4rem;flex-wrap:wrap}
.cons__foot-btn{flex:1 1 7rem;text-align:center;padding:.5rem .6rem;border-radius:999px;
  border:1px solid rgba(246,241,230,.2);font-size:.78rem;font-weight:700;transition:.2s}
.cons__foot-btn:hover{border-color:var(--gold);color:var(--gold2)}
.cons__foot--pulse{animation:consPulse .9s 2 var(--ease)}
@keyframes consPulse{50%{box-shadow:0 0 0 6px rgba(201,164,92,.18)}}
.cons__noharm{margin-top:.6rem;font-size:.68rem;line-height:1.5;color:rgba(246,241,230,.45)}
@media(prefers-reduced-motion:reduce){
  .cons__panel,.cons__nudge,.cons__lead--in{animation:none}
  .cons__foot--pulse{animation:none}
}
@media print{.cons{display:none}}
/* строка свободного вопроса: до неё чат был только кнопочным, а нестандартный случай
   («узкий участок», «есть старый фундамент») клиент иначе не мог объяснить */
.cons__ask{display:flex;gap:.4rem;align-items:center;padding:0 1.1rem .7rem}
.cons__ask input{flex:1;min-width:0;height:2.6rem;padding:0 .9rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(246,241,230,.16);color:var(--cream);font-size:.85rem}
.cons__ask input::placeholder{color:rgba(246,241,230,.4)}
.cons__ask input:focus{border-color:var(--gold);background:rgba(255,255,255,.1)}
.cons__ask button{width:2.6rem;height:2.6rem;flex-shrink:0;border-radius:999px;
  background:linear-gradient(135deg,#e7cf94,#c9a45c 45%,#a8843c);color:var(--ink);font-weight:700;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.cons__ask button:hover{filter:brightness(1.06)}
.cons__ask button:disabled{opacity:.5}

/* ============ защита номера телефона ============
   В исходнике страницы номер разбит на куски, куски идут задом наперёд и каждый
   развёрнут («67-38-273»), поэтому сборщики номеров, которые ищут по HTML, его
   не находят. Человек видит обычный номер: flex возвращает порядок кусков,
   bidi-override — порядок символов внутри куска.
   Копирование текста из такой строки даст перевёрнутый номер — кто добрался
   до кнопки, позвонит; для программного чтения есть aria-label. */
.ph{display:inline-flex;flex-direction:row-reverse;gap:.3em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ph>i{font-style:normal;direction:rtl;unicode-bidi:bidi-override}
/* строка «позвоните: …» в подвале и меню должна переноситься как обычный текст */
.ph a{white-space:nowrap}

/* ---------- капча на формах (includes/captcha.php) ----------
   Блок не должен выглядеть как «барьер»: он объясняет, зачем нужен, и стоит
   между полем телефона и кнопкой. Виджет сервиса рисуется внутри .captcha__mount,
   встроенная капча — вопроса и поля ответа. */
.captcha{margin-top:1rem;display:grid;gap:.5rem}
.captcha__mount{min-height:0}
.captcha__mount:empty{display:none}
/* iframe виджета на узких экранах шире колонки, поэтому ограничиваем его сами */
.captcha__mount iframe{max-width:100%}
.captcha__q{display:grid;gap:.35rem;font-size:.8rem;font-weight:600;color:rgba(246,241,230,.85)}
.lead--light .captcha__q,.pcard .captcha__q{color:var(--ink, #0c0b0a)}
.captcha__a{max-width:8rem;font-weight:700;letter-spacing:.05em}
.captcha__note{margin:0;font-size:.68rem;line-height:1.4;color:rgba(246,241,230,.45)}
.lead--light .captcha__note,.pcard .captcha__note{color:var(--stone)}
/* в карточке модели панель быстрого заказа узкая — капчу показываем компактно */
.pcard__panel .captcha{margin-top:.6rem}
.pcard__panel .captcha__q{font-size:.75rem}

/* ---------- квиз вторым блоком главной (#podbor) ----------
   Слева — объяснение и кнопки, справа — сам подбор. Блок стоит сразу после
   первого экрана, поэтому не содержит изображений: только текст и компонент
   квиза, который до прокрутки вообще ничего не рисует (см. data-quiz-auto). */
.quiz-split{display:grid;gap:2rem;align-items:start}
@media(min-width:1024px){.quiz-split{grid-template-columns:minmax(0,1fr) minmax(0,38rem);gap:2.5rem}}
@media(min-width:1200px){.quiz-split{grid-template-columns:minmax(0,1fr) minmax(0,40rem);gap:3.5rem}}
.quiz-split__copy h2{font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.08}
.quiz-split__list{display:grid;gap:.9rem;list-style:none;padding:0;margin:0}
.quiz-split__list li{display:grid;gap:.15rem;padding-left:1.6rem;position:relative}
.quiz-split__list li::before{content:"✦";position:absolute;left:0;top:.05rem;color:var(--gold3)}
.quiz-split__list b{font-weight:700}
.quiz-split__list span{font-size:.85rem;color:var(--stone)}
/* в блоке страницы карточка квиза не спорит с фоном: та же тёмная пластина,
   но без «модальных» полей и с тенью — видно, что это рабочий инструмент */
.quiz--inline{max-width:none;border-radius:1.5rem;box-shadow:0 30px 60px -30px rgba(12,11,10,.45)}
.quiz--inline .quiz__head{position:static;border-radius:1.5rem 1.5rem 0 0}
.quiz--inline .quiz__body{padding:1.5rem 1.5rem 1.75rem}
.quiz--inline .quiz__res{grid-template-columns:1fr}
@media(min-width:640px){.quiz--inline .quiz__res{grid-template-columns:1fr 1fr}}

/* ---------- SEO / GEO / AI-блоки раздела каталога ----------
   Текст под сеткой моделей: он нужен и человеку (объясняет раздел), и поиску
   с AI-ассистентами (факты, цены, география). Показывается только на первой
   странице пагинации — см. pages/catalog.php. */
.sec-about__grid{display:grid;gap:2.5rem;align-items:start}
@media(min-width:1024px){.sec-about__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3.5rem}}
.sec-about h2{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15}
.sec-about__ai{border-left:3px solid var(--gold3);padding:.9rem 1.1rem;background:var(--cream2);border-radius:0 .9rem .9rem 0}
.sec-about__card{border:1px solid rgba(12,11,10,.09);border-radius:1.25rem;padding:1.35rem 1.5rem;background:#fff}
.sec-faq{border-top:1px solid rgba(12,11,10,.08);padding-top:.65rem}
.sec-faq summary{cursor:pointer;font-weight:600;font-size:.9rem}
.sec-faq summary::marker{color:var(--gold3)}
.sec-faq p{margin:0}

/* ============ прайс-списки, таблица оград и калькуляторы (/aksessuary, /ogrady, /blagoustroystvo) ============ */
/* Прайс аксессуаров, оград и благоустройства. Строка = название с пояснением слева
   и цена справа: так прайс читается глазами сверху вниз, а цена не «плывёт»
   по строке при разной длине пояснений. */
.plist{display:grid;border-top:1px solid rgba(12,11,10,.1)}
.plist__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:start;
  padding:.9rem 0;border-bottom:1px solid rgba(12,11,10,.08)}
.plist__row.is-gift{background:rgba(201,164,92,.08);margin:0 -1rem;padding-left:1rem;padding-right:1rem;border-radius:.5rem}
.plist__main b{display:block;font-weight:600;font-size:.95rem;line-height:1.35}
.plist__note{display:block;font-size:.82rem;color:var(--stone);margin-top:.25rem;line-height:1.5}
.plist__price{font-family:var(--serif);font-size:1.05rem;color:var(--gold3);white-space:nowrap}
@media(max-width:519px){.plist__row{grid-template-columns:minmax(0,1fr);gap:.35rem}}

/* Таблица сравнения оград. Пять колонок на телефон не влезают, поэтому таблица
   живёт в прокручиваемой обёртке: страница вбок не выезжает (это проверяет
   автотест вёрстки), а содержимое остаётся таблицей, а не превращается в карточки,
   в которых сравнивать четыре вида неудобно. */
.ctable__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctable{width:100%;min-width:44rem;border-collapse:collapse;font-size:.9rem}
.ctable caption{text-align:left}
.ctable th,.ctable td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid rgba(12,11,10,.09);vertical-align:top}
.ctable thead th{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);font-weight:600;border-bottom:1px solid rgba(12,11,10,.16)}
.ctable tbody th{font-weight:600}
.ctable tbody th a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(201,164,92,.5);text-underline-offset:3px}
.ctable tbody tr:hover{background:var(--cream2)}
.ctable__price{font-family:var(--serif);font-size:1.05rem;color:var(--gold3);white-space:nowrap}

/* Поля калькуляторов периметра и площади */
.fcalc__f{display:block}
.fcalc__f span{display:block;font-size:.72rem;color:var(--stone);margin-bottom:.3rem}
/* Поля форм с подписью сверху (форма удалённого заказа): в ней больше пяти полей,
   и человек должен видеть, что уже ответил, а не держать вопросы в голове.
   Подпись светлая — формы с этими полями тёмные. */
.lfield{display:block}
.lfield>span{display:block;font-size:.72rem;letter-spacing:.02em;color:rgba(246,241,230,.62);margin-bottom:.35rem}
.lead--light .lfield>span{color:var(--stone)}
.lfield .input{height:2.9rem}
.lfield textarea.input{height:auto}
/* Нативное меню select в Windows рисуется системным цветом и на тёмной форме
   текст в списке не читался бы — задаём цвета опций явно. */
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 1.15rem) 1.25rem,calc(100% - .85rem) 1.25rem;background-size:.3rem .3rem,.3rem .3rem;background-repeat:no-repeat;padding-right:2.4rem}
select.input option{color:#0c0b0a;background:#fff}
.lcalc__area{display:block}
.lcalc__area span{display:block;font-size:.72rem;color:var(--stone);margin-bottom:.3rem}
.lcalc__works{display:grid;gap:.5rem}
.lcalc__w{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;font-size:.88rem;line-height:1.35;
  border:1px solid rgba(12,11,10,.1);border-radius:.75rem;padding:.6rem .75rem;transition:.2s}
.lcalc__w:hover{border-color:var(--gold3)}
.lcalc__w:has(input:checked){border-color:var(--gold3);background:rgba(201,164,92,.1)}
.lcalc__w input{margin-top:.2rem;accent-color:var(--gold3);flex-shrink:0}
.lcalc__w small{display:block;color:var(--stone);font-size:.75rem;margin-top:.15rem}

/* ============ узкие экраны: страница не выезжает вбок ============ */
/* На 320 px страницу расширяли не сами блоки, а их несжимаемое содержимое: длинное
   слово в колонке сетки («Карельский габбро-диабаз», «Армированный») или пара
   кнопок с nowrap-подписью. Сетка считает минимальную ширину колонки по
   содержимому, поэтому выезд появлялся ровно на узких экранах и его не было видно
   на 390 px. Лечится в трёх местах:
   1) элементы сеток и строк могут сжиматься меньше своего содержимого;
   2) длинные слова в заголовках и плашках переносятся, а не растягивают страницу;
   3) пара WhatsApp/Telegram в подвале формы на 320 px встаёт в одну колонку. */
.grid>*,.grid-2>*,.split>*,.split-rev>*,.row>*{min-width:0}
h1,h2,h3,h4,.display{hyphens:auto;overflow-wrap:break-word}
/* anywhere (а не break-word) только у плашек проекта: там в узкий блок попадает
   название кладбища одним словом («Петровщина»), которое иначе не перенести */
.fact b,.fact span{hyphens:auto;overflow-wrap:anywhere}
/* Порог 360 px посчитан по содержимому: паре nowrap-кнопок нужно ~255 px плюс
   отступы секции и панели, вместе ~351 px. С 390 px (обычный телефон) две
   колонки помещаются, поэтому там вид не меняем. */
@media(max-width:360px){.grid-2{grid-template-columns:minmax(0,1fr)}}