/* Дополнения к оригинальным стилям: новые универсальные блоки, поля формы заказа, режим предпросмотра. */

/* универсальные блоки лендинга */
.x-col { display: flex; flex-direction: column; gap: var(--s4); max-width: 760px; }
.x-col .btn { align-self: flex-start; }
.x-col h2, .x-gal h2, .x-vid h2, .x-contacts h2 { font-size: var(--t-xl); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.x-col .body p + p, .x-html p + p { margin-top: var(--s3); }
.x-it-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.x-it.rev .x-it-ph { order: 2; }
.x-it-ph { margin: 0; border-radius: 24px; border: 1px solid var(--rule); overflow: hidden;
  background: radial-gradient(ellipse 55% 45% at 50% 50%, color-mix(in srgb, var(--paper) 12%, var(--ink)), color-mix(in srgb, var(--paper) 3%, var(--ink)) 100%); }
.x-it-ph img { width: 100%; height: auto; }
@media (max-width: 860px) { .x-it-grid { grid-template-columns: minmax(0, 1fr); } .x-it.rev .x-it-ph { order: 0; } }
.x-gal .wrap > h2, .x-vid .wrap > h2 { margin: var(--s3) 0 var(--s6); }
.x-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: clamp(12px, 2vw, 24px); }
.x-gal-grid figure { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.x-gal-grid img { width: 100%; height: auto; border-radius: 16px; background: color-mix(in srgb, var(--paper) 4%, var(--ink)); }
.x-vid video { width: 100%; max-height: 80vh; border-radius: 20px; background: #000; display: block; margin-top: var(--s5); }
.x-vid .body { margin-top: var(--s3); }
.x-html { color: var(--mute); }
.x-html h2, .x-html h3 { color: var(--paper); margin: var(--s5) 0 var(--s3); }
.x-html ul { padding-left: 1.2em; }
.x-html a { color: var(--paper); }
.x-contacts .contacts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.x-contacts .contacts a { display: flex; flex-direction: column; gap: 6px; padding: var(--s4); border: 1px solid var(--rule); border-radius: 16px; text-decoration: none; min-width: 220px; }
.x-contacts .contacts b { font-weight: 500; }
.mode-cards .mc-img { width: 100%; height: auto; border-radius: 12px; margin-bottom: var(--s2); }
.x-code:empty { display: none; }

/* форма заказа: выпадающие списки в стиле полей */
#order .o-select { width: 100%; font: 400 1rem/1.3 var(--f-text); padding: 6px 0 8px; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--o-line); background: transparent; color: var(--ink); -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230c0b0a' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px; cursor: pointer; }
#order .o-select:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
#order .ph-pre { white-space: nowrap; }
@media (max-width: 719px) { #order .o-select { font-size: 17px; padding: 8px 22px 10px 0; } }

/* предпросмотр в редакторе */
.is-preview [data-block] { position: relative; cursor: pointer; }
.is-preview [data-block]:hover { outline: 2px dashed color-mix(in srgb, #4da3ff 70%, transparent); outline-offset: -2px; }
.is-preview [data-block].is-sel { outline: 3px solid #4da3ff; outline-offset: -3px; }
.is-preview [data-hidden] { opacity: .35; }
.is-preview [data-hidden]::before { content: "Скрыт"; position: absolute; z-index: 30; top: 8px; right: 8px; padding: 4px 10px; border-radius: 99px; background: #4da3ff; color: #fff; font: 600 12px/1.2 system-ui, sans-serif; }
.is-preview .top { position: relative; }

/* шапка: все пункты меню на ноутбуках, кнопка «Меню» на планшетах и телефонах */
.menu-btn { display: none; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--paper); }
.menu-btn i { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform 200ms var(--ease), opacity 200ms; }
.menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.top-menu { border-top: 1px solid var(--rule); background: var(--ink); }
.top .top-menu .wrap { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: 8px 16px; }
.top .top-menu a { display: block !important; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--paper); font-size: 17px; }
.top-menu a:last-child { border-bottom: 0; }
@media (min-width: 861px) and (max-width: 1180px) {
  .top nav { gap: 14px !important; }
  .top nav a:not(.keep):not(.guide) { display: inline-flex !important; }
  .top nav a { font-size: 13px !important; }
  .top nav a.guide { padding-left: 14px !important; }
  .top-buy .tb-p { display: none; }
  .top-buy { padding-left: 4px !important; }
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .top > .wrap > nav a:not(.btn) { display: none !important; }
}
@media (min-width: 861px) { .top-menu { display: none !important; } }