/* Дополнения к дизайн-системе макета (styles.css) для живого сайта на Laravel. */

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.flash { background: var(--color-primary-wash); border-bottom: 1px solid var(--color-primary); color: var(--color-text); padding-block: var(--space-3); font-weight: 500; }

.form-result { margin: 0; padding: var(--space-3); border-radius: var(--radius-md, .5rem); background: var(--color-primary-wash); font-size: .9rem; }
.form-result.is-error { background: var(--color-danger-wash); color: var(--color-danger); }

.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--color-primary); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.price-tag-opt { display: inline-block; margin-left: var(--space-2); padding: .1em .45em; border-radius: 999px; background: var(--color-primary-wash); color: var(--color-primary); font-size: .7rem; font-weight: 600; vertical-align: middle; text-transform: uppercase; letter-spacing: .03em; }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.price-old { margin: 0; color: var(--color-text-muted, #8a8580); text-decoration: line-through; }

.subcategory-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.subcategory-chips .chip { text-decoration: none; }
.subcategory-chips .chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

.filters__count { margin-left: auto; color: var(--color-text-muted, #8a8580); font-size: .8rem; }
.filters__option { display: flex; align-items: center; gap: .5rem; }
.applied-filters a.chip { text-decoration: none; color: inherit; }
.applied-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.catalog-layout .grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .catalog-layout .grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 90em) { .catalog-layout .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 110em) { .catalog-layout .grid--4, .grid--wide5 { grid-template-columns: repeat(5, 1fr); } }

.product-card__media > a.photo { display: block; }
.product-card__media .ph-media, .gallery__main .ph-media { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 12rem; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.pagination .is-current { background: var(--color-primary-wash); border-color: var(--color-primary); color: var(--color-primary); }
.pagination .is-disabled { opacity: .45; pointer-events: none; }
.pagination__dots { align-self: center; padding-inline: var(--space-1); }

.empty-state { text-align: center; padding: var(--space-10) var(--space-4); border: 1px dashed var(--color-border, #ddd); border-radius: var(--radius-lg); display: grid; gap: var(--space-3); justify-items: center; }

.catalog-section .series-card__body h2 a { color: inherit; text-decoration: none; }
.catalog-section__list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-1); }
.catalog-section__list a { color: var(--color-text-secondary, #5b5650); text-decoration: none; }
.catalog-section__list a:hover { color: var(--color-primary); }
.catalog-section .photo { display: block; }

.search-field--page { max-width: 40rem; }

.rich-text { max-width: 48rem; line-height: 1.65; }
.rich-text p { margin: 0 0 var(--space-3); }
.rich-text ul, .rich-text ol { padding-left: 1.25rem; margin: 0 0 var(--space-3); }
.rich-text h2, .rich-text h3 { margin: var(--space-5) 0 var(--space-2); }

.mobile-tabbar__item { background: none; border: 0; font: inherit; cursor: pointer; }

[hidden] { display: none !important; }
.header-action--help { align-items: center; border: 0; cursor: pointer; }
.site-header__nav .mega > a { display: block; }
.mega__panel::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--space-3) - 2px); height: calc(var(--space-3) + 2px); }
@media (min-width: 64em) { .product-header .info-row-grid { grid-template-columns: 1fr; } }

/* Подгрузка выдачи каталога без перезагрузки */
.catalog-results { transition: opacity .15s ease; }
.catalog-results.is-loading { opacity: .5; pointer-events: none; }

/* Подкатегории плитками на странице раздела */
.subcategory-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-8); }
.subcategory-tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px); overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.subcategory-tile:hover { border-color: var(--color-primary); box-shadow: 0 6px 18px rgb(0 0 0 / .08); transform: translateY(-2px); }
.subcategory-tile__media { display: block; aspect-ratio: 4/3; background: var(--color-surface-2, #f1ece6); overflow: hidden; }
.subcategory-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.subcategory-tile:hover .subcategory-tile__media img { transform: scale(1.04); }
.subcategory-tile__media .ph-media { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.subcategory-tile__body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); }
.subcategory-tile__name { font-weight: 600; line-height: 1.3; }
.subcategory-tile__count { font-size: .8125rem; color: var(--color-text-secondary, #6b6b6b); }
@media (max-width: 40em) { .subcategory-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } }

/* Опции с доплатой (чехол, ткань) на странице товара */
.variant-group__label:has(.variant-group__current) { justify-content: flex-start; gap: .35rem; }
.variant-group__current { font-weight: 400; color: var(--color-text-secondary); }
.option-chip { display: inline-flex; align-items: center; gap: .4rem; }
.option-chip__swatch { width: 1rem; height: 1rem; border-radius: 999px; border: 1px solid rgb(0 0 0 / .15); flex: none; }
.option-chip__extra { color: var(--color-text-secondary); font-weight: 400; font-size: .85em; white-space: nowrap; }
.option-chip.is-active .option-chip__extra { color: inherit; }
.option-chip.is-unavailable { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* Телефон: карточки в две колонки — без длинного описания и с меньшими отступами, чтобы не растягивались. */
@media (max-width: 29.99em) {
  .product-card__benefit { display: none; }
  .product-card__body, .product-card__footer { padding: var(--space-3); }
  .product-card__name { font-size: .9375rem; }
  .product-card__footer .price { font-size: 1.25rem; }
}

/* Уведомление о cookie — карточка внизу экрана (на телефоне над нижним меню). */
.cookie-notice {
  position: fixed; z-index: 60; left: var(--space-4); right: var(--space-4); bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  max-width: 40rem; margin-inline: auto; padding: var(--space-4) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 1rem);
  box-shadow: 0 10px 30px rgb(0 0 0 / .12); font-size: .875rem; color: var(--color-text-secondary);
}
.cookie-notice p { margin: 0; flex: 1 1 18rem; }
.cookie-notice a { color: var(--color-primary); text-decoration: underline; }
@media (min-width: 64em) { .cookie-notice { bottom: var(--space-5); left: var(--space-5); right: auto; } }

/* Вход и личный кабинет */
.auth-card { max-width: 28rem; margin: 0 auto; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.auth-card__note { margin-top: var(--space-2); }
.auth-code-input { font-size: 1.75rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.link-inline { color: var(--color-primary); text-decoration: underline; }
.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.account-head .badge { margin-left: var(--space-2); }
.account-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 64em) { .account-grid { grid-template-columns: minmax(0, 26rem) 1fr; } }
.account-card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.account-company summary { cursor: pointer; font-weight: 600; font-size: .9375rem; }
.account-lead { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--color-border); }
.account-lead p { margin: var(--space-1) 0 0; }

/* Чат на сайте */
.chat { position: fixed; z-index: 70; right: var(--space-4); bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); font-size: .9375rem; }
@media (min-width: 64em) { .chat { right: var(--space-6); bottom: var(--space-6); } }
.chat-fab {
  display: inline-flex; align-items: center; gap: var(--space-2); position: relative;
  height: 3.25rem; padding: 0 1.1rem 0 1rem; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-primary); color: var(--color-text-on-primary); font: inherit; font-weight: 600;
  box-shadow: 0 10px 24px rgb(127 23 25 / .32); transition: transform .15s ease, background .15s ease;
}
.chat-fab:hover { background: var(--color-primary-hover); transform: translateY(-2px); }
.chat-fab .icon { width: 1.4rem; height: 1.4rem; }
.chat-fab::before { content: ""; position: absolute; top: .45rem; left: 2.05rem; width: .55rem; height: .55rem; border-radius: 50%; background: #9AA0A6; border: 2px solid var(--color-primary); }
.chat.is-online .chat-fab::before { background: #4CC38A; }
@media (max-width: 40em) { .chat-fab__label { display: none; } .chat-fab { width: 3.25rem; padding: 0; justify-content: center; } .chat-fab::before { left: 1.85rem; } }
.chat-fab__badge {
  position: absolute; top: -.35rem; right: -.35rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
  border-radius: var(--radius-pill); background: var(--color-secondary); color: #241A1A;
  font-size: .75rem; font-weight: 700; line-height: 1.35rem; text-align: center; box-shadow: 0 0 0 2px var(--color-surface);
}
.chat.is-open .chat-fab { display: none; }

.chat-panel {
  position: absolute; right: 0; bottom: 0; width: min(24rem, calc(100vw - 2 * var(--space-4)));
  height: min(36rem, calc(100vh - 9rem)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgb(36 26 26 / .22); animation: chat-in .18s ease-out;
}
.chat-panel[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 40em) {
  .chat.is-open { inset: 0; z-index: 120; }
  .chat.is-open .chat-panel { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; }
}
.chat-panel__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-primary); color: var(--color-text-on-primary); }
.chat-panel__head p { margin: 0; }
.chat-panel__avatar { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.chat-panel__avatar img { width: 70%; height: 70%; object-fit: contain; }
.chat-panel__title { font-weight: 700; }
.chat-panel__status { font-size: .8125rem; opacity: .85; display: flex; align-items: center; gap: .4rem; }
.chat-panel__status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #C9CDD2; }
.chat.is-online .chat-panel__status::before { background: #4CC38A; }
.chat-panel__close { margin-left: auto; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.chat-panel__close:hover { background: rgb(255 255 255 / .15); }

.chat-panel__body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-bg); overscroll-behavior: contain; }
.chat-day { align-self: center; margin: var(--space-2) 0; padding: .15rem .6rem; border-radius: var(--radius-pill); background: var(--color-bg-alt); color: var(--color-text-muted); font-size: .75rem; }
.chat-msg { max-width: 82%; padding: .55rem .8rem .4rem; border-radius: 1rem; line-height: 1.4; word-wrap: break-word; }
.chat-msg p { margin: 0; white-space: pre-wrap; }
.chat-msg--staff { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: .3rem; }
.chat-msg--mine { align-self: flex-end; background: var(--color-primary); color: var(--color-text-on-primary); border-bottom-right-radius: .3rem; }
.chat-msg--intro { padding-bottom: .55rem; }
.chat-msg--error { align-self: center; max-width: 100%; background: var(--color-danger-wash); color: var(--color-danger); font-size: .8125rem; }
.chat-msg__author { display: block; font-size: .75rem; font-weight: 700; color: var(--color-primary); margin-bottom: .1rem; }
.chat-msg__time { display: block; text-align: right; font-size: .6875rem; opacity: .6; margin-top: .15rem; }

.chat-panel__form { border-top: 1px solid var(--color-border); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface); }
.chat-panel__who { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.chat-panel__who[hidden] { display: none; }
.chat-panel__who input, .chat-panel__input textarea {
  width: 100%; font: inherit; font-size: .875rem; color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .5rem .7rem;
}
.chat-panel__who input:focus, .chat-panel__input textarea:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); }
.chat-panel__input { display: flex; align-items: flex-end; gap: var(--space-2); }
.chat-panel__input textarea { resize: none; min-height: 2.5rem; max-height: 140px; line-height: 1.4; font-size: 1rem; }
.chat-panel__send { flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; cursor: pointer; display: grid; place-items: center; }
.chat-panel__send:hover { background: var(--color-primary-hover); }
.chat-panel__send:disabled { opacity: .5; cursor: wait; }
.chat-panel__legal { margin: 0; font-size: .6875rem; color: var(--color-text-muted); }
.chat-panel__legal a { text-decoration: underline; }
/* Быстрые кнопки в чате и короткая заявка на звонок */
.chat-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); background: var(--color-surface); flex: none; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick[hidden] { display: none; }
.chat-quick__btn { flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: .8125rem; white-space: nowrap; cursor: pointer; }
.chat-quick__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chat-quick__btn--accent { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chat-quick__btn--accent:hover { background: var(--color-primary-hover); color: #fff; }
.chat-lead { flex: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.chat-lead[hidden] { display: none; }
.chat-lead__head { display: flex; align-items: center; gap: var(--space-2); }
.chat-lead__title { margin: 0; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-lead__close { flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; display: grid; place-items: center; }
.chat-lead__close:hover { background: var(--color-bg-alt); color: var(--color-text); }
.chat-lead__hint { margin: 0; font-size: .8125rem; color: var(--color-text-secondary); }
.chat-lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.chat-lead input:not([type=checkbox]), .chat-lead textarea { width: 100%; min-width: 0; padding: .55rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md, .6rem); background: var(--color-bg); font: inherit; font-size: 1rem; color: var(--color-text); }
.chat-lead textarea { resize: none; line-height: 1.4; }
.chat-lead input:focus, .chat-lead textarea:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); }
.chat-lead__consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .75rem; color: var(--color-text-secondary); line-height: 1.35; }
.chat-lead__consent input { margin-top: .1rem; flex: none; accent-color: var(--color-primary); }
.chat-lead__consent a { text-decoration: underline; }
.chat-msg--note { background: var(--color-success-wash, #E8F5EE); border-color: transparent; }
/* Пока на телефоне видна плашка cookie — кнопку чата прячем, чтобы не перекрывала её. */
@media (max-width: 63.99em) { body:has(.cookie-notice:not([hidden])) .chat:not(.is-open) { display: none; } }

/* Отзывы */
.stars { --size: 1.15rem; display: inline-block; font-size: var(--size); line-height: 1; letter-spacing: 1px; vertical-align: middle; }
.stars::before { content: "★★★★★"; background: linear-gradient(90deg, #E0A100 calc(var(--rating, 0) / 5 * 100%), #DCD2C6 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars--sm { --size: .95rem; }
.product-info__rating { display: inline-flex; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: .875rem; color: var(--color-text-secondary); }
.product-info__rating:hover { color: var(--color-primary); }
.reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.reviews__count { font-size: .55em; color: var(--color-text-muted); font-weight: 500; vertical-align: middle; margin-left: .3em; }
.reviews__summary { display: flex; align-items: center; gap: var(--space-2); font-size: 1.125rem; }
.reviews__summary .stars { --size: 1.4rem; }
.reviews__layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 64em) { .reviews__layout { grid-template-columns: minmax(0, 1fr) 23rem; } .reviews__form { position: sticky; top: 6rem; } }
.reviews__list { display: flex; flex-direction: column; gap: var(--space-4); }
.reviews__empty { padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); margin: 0; }
.review { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.review__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.review__head p { margin: 0; }
.review__avatar { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-wash); color: var(--color-primary); font-weight: 700; text-transform: uppercase; }
.review__name { font-weight: 600; }
.review__date { font-size: .8125rem; color: var(--color-text-muted); }
.review__stars { margin-left: auto; }
.review__body { margin: 0; white-space: pre-line; line-height: 1.55; }
.review__photos { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.review__photo { width: 5.5rem; height: 5.5rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.review__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.review__photo:hover img { transform: scale(1.05); }
.review__reply { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-bg-alt); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); }
.review__reply p { margin: 0; }
.review__reply-title { font-weight: 700; font-size: .8125rem; color: var(--color-primary); margin-bottom: var(--space-1) !important; }
.reviews__form { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.reviews__form h3 { margin: 0; }
.reviews__form .stack { display: flex; flex-direction: column; gap: var(--space-4); }
.btn--block { width: 100%; justify-content: center; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { cursor: pointer; color: #DCD2C6; transition: color .1s, transform .1s; }
.star-input label .icon { width: 2rem; height: 2rem; fill: currentColor; stroke: none; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #E0A100; }
.star-input label:hover { transform: scale(1.1); }
.star-input input:focus-visible + label { outline: 2px solid var(--color-primary); border-radius: 4px; }
.review-upload { display: inline-flex !important; align-items: center; gap: var(--space-2); align-self: flex-start; padding: .55rem .9rem; border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; font-weight: 600 !important; color: var(--color-text-secondary); }
.review-upload:hover { border-color: var(--color-primary); color: var(--color-primary); }
.review-upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.review-upload__previews { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.review-upload__previews:empty { display: none; }
.review-upload__thumb { position: relative; width: 4.25rem; height: 4.25rem; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); }
.review-upload__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-upload__thumb button { position: absolute; top: 2px; right: 2px; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 0; background: rgb(0 0 0 / .6); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; }
.photo-viewer { position: fixed; inset: 0; z-index: 200; background: rgb(0 0 0 / .85); display: grid; place-items: center; padding: var(--space-4); cursor: zoom-out; }
.photo-viewer img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); }

/* Панель «Помочь с выбором» и чат не перекрывают друг друга */
.consent span { flex: 1; min-width: 0; }
.help-panel__chat { display: flex; align-items: center; gap: var(--space-3); width: 100%; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); text-align: left; cursor: pointer;
  background: var(--color-primary-wash); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-text); font: inherit; transition: border-color .15s; }
.help-panel__chat:hover { border-color: var(--color-primary); }
.help-panel__chat > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.help-panel__chat > span:nth-child(2) span { font-size: .8125rem; color: var(--color-text-secondary); }
.help-panel__chat-icon { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: #fff; }
.help-panel__or { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: .8125rem; color: var(--color-text-muted); }
.help-panel__or::before, .help-panel__or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
body:has(.help-panel.is-open) .chat:not(.is-open), body:has(.mobile-menu.is-open) .chat:not(.is-open) { display: none; }

/* Шапка без строки с графиком: телефон и соцсети рядом с кнопками */
.header-phone { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 2.75rem; min-width: 2.75rem; border-radius: var(--radius-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; flex: none; }
.header-phone:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.header-phone span { display: none; }
@media (min-width: 100em) { .header-phone { padding-inline: var(--space-2); } .header-phone span { display: inline; } }
.socials { display: flex; align-items: center; gap: var(--space-2); }
.social { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #fff; flex: none; transition: transform .15s, filter .15s; }
.social svg { width: 1.3rem; height: 1.3rem; }
.social:hover { transform: translateY(-1px); filter: brightness(1.08); }
.social--vk { background: #0077FF; }
.social--max { background: linear-gradient(135deg, #3E8BFF 0%, #6A4BFF 55%, #A34DFF 100%); }
.social--telegram { background: #229ED9; }
.socials--header { display: none; }
@media (min-width: 90em) { .socials--header { display: flex; } }
/* На средних экранах шапка компактнее, чтобы всё помещалось в одну строку. */
@media (min-width: 64em) and (max-width: 79.99em) { .header-action--help { width: 2.75rem; padding: 0; justify-content: center; } .header-action--help span { display: none; } }
@media (min-width: 78em) and (max-width: 89.99em) { .site-header__nav { gap: var(--space-4); } }
.socials--footer { margin-top: var(--space-4); }
.socials--footer .social { width: 2.5rem; height: 2.5rem; }
.socials--menu { flex-wrap: wrap; margin-block: var(--space-2); }
.socials--menu .social { width: auto; height: 2.5rem; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-pill); font-weight: 600; font-size: .875rem; }
@media (min-width: 64em) and (max-width: 77.99em) { .site-header__nav { gap: var(--space-3); margin-left: var(--space-3); } .site-header__nav a { font-size: .8125rem; } .site-header__main .container { gap: var(--space-2); } }

/* Панель «Помочь с выбором» — компактная, всё помещается на экран ноутбука без прокрутки */
.help-panel__head { margin-bottom: var(--space-4) !important; }
.help-panel__head .text-h3 { margin-bottom: var(--space-1); }
.help-panel__status { margin: 0; display: flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--color-text-secondary); }
.help-panel__status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #B9B1A8; flex: none; }
.help-panel__status.is-online::before { background: #3FA36B; box-shadow: 0 0 0 3px rgb(63 163 107 / .18); }
.help-panel__chat { margin-bottom: var(--space-3); padding: var(--space-3); }
.help-panel__or { margin-bottom: var(--space-3); }
.help-panel__form { gap: var(--space-3); }
.help-panel__form .field { gap: var(--space-1); }
.help-panel__form .field label { font-size: .8125rem; }
.help-panel__form .field input { height: 2.75rem; }
.help-panel__form .field textarea { min-height: 4.25rem; }
.help-panel__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.help-panel__row .field { min-width: 0; }
.help-panel .help-panel__channels { flex-direction: row; gap: var(--space-2); margin: var(--space-4) 0 0; }
.help-panel .help-panel__channel { flex: 1; justify-content: center; padding: var(--space-2); font-size: .875rem; white-space: nowrap; }
@media (min-width: 64em) { .help-panel { width: 26rem !important; padding: var(--space-5) var(--space-6) !important; } }
.documents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 11rem)); justify-content: center; gap: var(--space-4); }
.documents-grid .photo { border: 1px solid var(--color-border); cursor: zoom-in; }