/* Дизайн-слой новых страниц GR8: конфигуратор, первый экран, английская версия.
 *
 * Пишется отдельно от тильдовской статики намеренно. Экспорт Тильды — это
 * зеро-блоки с пиксельными координатами под пять брейкпоинтов; дописывать
 * в них новое значитплодить те же координаты. Здесь обычная сетка, которая
 * сама раскладывается на телефоне, и обычные заголовки, которые видит
 * поисковик.
 *
 * Цвета взяты из самого сайта, а не придуманы: #030303 — фон, #f33923 —
 * фирменный красный, #ac2617 — он же в нажатом состоянии.
 */

:root {
  --bg: #030303;
  --bg-soft: #111111;
  --bg-card: #161616;
  --line: #262626;
  --text: #ffffff;
  --muted: #9a9a9a;
  --accent: #f33923;          /* акцент: рамки, отметки, наведение */
  /* Заливка кнопок чуть темнее фирменного: белое на #f33923 даёт контраст
   * 3.87 при норме 4.5 для текста этого кегля — на солнце такую надпись
   * не прочитать. #d92e19 даёт 4.82 и на глаз от фирменного не отличается. */
  --accent-btn: #d92e19;
  --accent-dark: #ac2617;
  --radius: 18px;
  --gap: 20px;
  --maxw: 1200px;
  --head: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background-color: #030303; }

body.gr8 {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.gr8 img { max-width: 100%; height: auto; display: block; }
.gr8 a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- шапка ---------- */

.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(3, 3, 3, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top__row { display: flex; align-items: center; gap: 16px; height: 64px; }
.top__logo { font-family: var(--head); font-weight: 700; letter-spacing: .06em;
  text-decoration: none; font-size: 20px; }
.top__spacer { flex: 1; }
.top__link { text-decoration: none; color: var(--muted); font-size: 14px; }
.top__link:hover { color: var(--text); }
.top__lang { display: flex; gap: 8px; font-size: 13px; }
.top__lang a { text-decoration: none; color: var(--muted); padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 999px; }
.top__lang a[aria-current="true"] { color: var(--text); border-color: var(--accent); }

/* ---------- типографика ---------- */

h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.12;
  margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 5.2vw, 56px); }
h2 { font-size: clamp(24px, 3.4vw, 38px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
.lead { color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); max-width: 62ch; }
.section { padding: clamp(44px, 7vw, 88px) 0; }
.section__head { margin-bottom: clamp(20px, 3vw, 36px); }

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--body); cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--accent-btn); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--wide { width: 100%; }

.product-actions { display: grid; gap: 10px; margin-top: 18px; }

/* Короткий выбор с карточки: три решения до перехода в полный заказ.
 * Диалог остаётся компактным и на телефоне не превращается во второй экран
 * конфигуратора. */
.quick-config {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; overflow: auto; color: var(--text); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.quick-config::backdrop { background: rgba(0, 0, 0, .78); }
.quick-config__form { position: relative; padding: 26px; }
.quick-config__form h2 { margin: 0 42px 22px 0; font-size: 24px; }
.quick-config__close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  font: 300 30px/1 var(--body);
}
.quick-config__close:hover { color: var(--text); background: var(--bg-soft); }
.quick-config__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.quick-config select.input { appearance: auto; min-height: 48px; }
@media (max-width: 520px) {
  .quick-config { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .quick-config__form { padding: 22px 18px 18px; }
  .quick-config__actions { display: grid; grid-template-columns: 1fr; }
  .quick-config__actions .btn { width: 100%; }
}

/* ---------- плитки выбора ---------- */

.tiles { display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; text-align: left;
  padding: 0; color: inherit; font: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.tile:hover { border-color: #3a3a3a; transform: translateY(-2px); }
.tile[aria-pressed="true"] { border-color: var(--accent); }
.tile[aria-pressed="true"]::after {
  content: "✓"; position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 15px; display: grid; place-items: center;
}
.tile__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
  background: #0a0a0a; }

/* Небольшая коррекция горизонта исходных главных кадров. Поворот делается
 * при показе, поэтому JPEG не пережимается; scale закрывает углы после
 * выравнивания. Диагональные предметные кадры без горизонта не трогаем. */
:where(.tile__img, .stage__art, .hero-img, .ready-gallery__main)[src$="/handmade.jpg"] {
  transform: rotate(.45deg) scale(1.025);
}
:where(.tile__img, .stage__art, .hero-img, .ready-gallery__main)[src$="/blueprint.jpg"] {
  transform: rotate(.6deg) scale(1.025);
}
:where(.tile__img, .stage__art, .hero-img, .ready-gallery__main)[src$="/volume-porsche-gt3-front.jpg"] {
  transform: rotate(-.35deg) scale(1.025);
}
:where(.tile__img, .stage__art, .hero-img, .ready-gallery__main)[src$="/lego_custom.jpg"] {
  transform: rotate(-.35deg) scale(1.025);
}
:where(.tile__img, .stage__art, .hero-img, .ready-gallery__main)[src$="/corporate.jpg"] {
  transform: rotate(-.25deg) scale(1.025);
}
.tile__gallery {
  width: 100%; aspect-ratio: 4 / 3; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line);
}
.tile__gallery img {
  width: 100%; height: 100%; object-fit: contain; min-width: 0; background: #0a0a0a;
}
.tile__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tile__title { font-family: var(--head); font-size: 16px; font-weight: 600; }
.tile__meta { color: var(--muted); font-size: 13px; }
.tile__price { margin-top: auto; font-weight: 700; font-size: 17px; }

/* ---------- выбор вариантов ---------- */

.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text); font: 500 14px/1 var(--body);
  cursor: pointer; transition: border-color .18s ease, background-color .18s ease;
}
.opt:hover { border-color: #4a4a4a; }
.opt[aria-pressed="true"] { border-color: var(--accent); background: rgba(243, 57, 35, .12); }
.opt__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  margin-right: 8px; vertical-align: -1px; border: 1px solid rgba(255,255,255,.35); }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field__label { font-size: 14px; color: var(--muted); }
.input, .textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--bg-soft);
  border: 1px solid var(--line); color: var(--text); font: 400 15px/1.4 var(--body);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); }
.textarea { min-height: 96px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- итог заказа ---------- */

.summary {
  position: sticky; top: 84px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.summary__row { display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.summary__row:last-of-type { border-bottom: 0; }
.summary__k { color: var(--muted); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.summary__sum { font-family: var(--head); font-size: 26px; font-weight: 700; }
.note { color: var(--muted); font-size: 13px; margin-top: 10px; }
.msg { margin-top: 12px; font-size: 14px; }
.msg--err { color: #ff9d8f; }
.msg--ok { color: #7ee081; }

.cols { display: grid; gap: clamp(20px, 3vw, 36px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 340px; align-items: start; } }

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

.foot { border-top: 1px solid var(--line); padding: 34px 0 48px; color: var(--muted); font-size: 13px; }
.foot a { color: var(--muted); }
.foot__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- появление ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); animation: gr8in .5s ease forwards; }
  .reveal--2 { animation-delay: .08s; }
  .reveal--3 { animation-delay: .16s; }
  @keyframes gr8in { to { opacity: 1; transform: none; } }
}

/* Фотография на карточке товара. Без ограничения по высоте портретный снимок
 * занимает весь экран и отодвигает всё остальное за сгиб — включая цену
 * и кнопку заказа. */
.hero-img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); margin: 26px 0; background: #0a0a0a;
}
@media (max-width: 640px) { .hero-img { aspect-ratio: 1 / 1; } }

/* Пальцем в ссылку высотой 22 пикселя не попасть. Минимум для касания —
 * 44 пикселя, это не про красоту, а про то, доедет ли человек до заказа
 * с телефона. */
.top__link, .top__lang a, .foot a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
}
.top__lang a { padding: 0 12px; }
.top__logo { display: inline-flex; align-items: center; min-height: 44px; }

/* Липкий итог хорош рядом с формой, а на телефоне он идёт под ней —
 * липнуть там не к чему. */
@media (max-width: 899px) { .summary { position: static; } }

/* Готовая работа: основной кадр всегда целиком. Вертикальные фотографии
 * различаются по пропорциям, поэтому фиксированная обрезка здесь скрыла бы
 * часть рамы или самого чертежа. */
.ready-gallery { margin-top: 26px; }
.gr8 .ready-gallery__main {
  width: 100%; height: min(72vh, 760px); object-fit: contain;
  border-radius: var(--radius); background: #0a0a0a;
}
.ready-gallery__thumbs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin-top: 10px;
}
.ready-gallery__thumb {
  min-width: 0; min-height: 72px; padding: 3px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: #0a0a0a;
}
.ready-gallery__thumb:hover { border-color: #666; }
.ready-gallery__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ready-gallery__thumb.is-on { border-color: var(--accent); }
.gr8 .ready-gallery__thumb img { width: 100%; height: 72px; object-fit: cover; border-radius: 6px; }
.gr8 .ready-gallery--landscape .ready-gallery__main {
  height: auto; aspect-ratio: 2790 / 2550; object-fit: contain;
}
.ready-gallery--landscape .ready-gallery__thumbs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .gr8 .ready-gallery__main { height: min(62vh, 520px); }
  .gr8 .ready-gallery--landscape .ready-gallery__main { height: auto; }
  .ready-gallery--landscape .ready-gallery__thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ready-gallery__thumb { min-height: 60px; }
  .gr8 .ready-gallery__thumb img { height: 60px; }
}

/* Плитка каталога — ссылка, но выглядеть должна карточкой, а не строкой
 * текста с подчёркиванием. */
a.tile, a.tile * { text-decoration: none; }

/* Раздел витрины и пояснение под названием. Пояснение — не украшение:
 * «арт-чертёж» и «картина кастом» человеку со стороны не различить,
 * а цена у них разная. */
.tiles__head {
  font-family: var(--head); font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin: 28px 0 14px;
}
.tiles__head:first-child { margin-top: 0; }
.tile__lead { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* Полоса заказа внизу экрана. На узком окне боковой итог уходит под плитки,
 * и человек не видит ни цены, ни кнопки — страница выглядит каталогом.
 * На широком она не нужна: там итог виден рядом. */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(12, 12, 12, .96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.bar__name { font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__sum { margin-left: auto; font-family: var(--head); font-weight: 700; font-size: 18px; }
.bar .btn { padding: 12px 20px; }
@media (min-width: 900px) { .bar { display: none; } }
@media (max-width: 899px) { body.gr8 { padding-bottom: 84px; } }

/* ---------- конфигуратор: три экрана ---------- */

.conf__screen { padding: clamp(24px, 4vw, 48px) 0; }
.conf__h1 { font-size: clamp(28px, 4vw, 44px); }
.conf__pane {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .conf__pane { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .conf__visual { position: sticky; top: 84px; }
}
.conf__back {
  background: none; border: 0; color: var(--muted); font: 500 14px/1 var(--body);
  cursor: pointer; padding: 10px 0; margin-bottom: 10px;
}
.conf__back:hover { color: var(--text); }
.conf__title { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 6px; }
.conf__lead { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.conf__foot {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
}
.conf__price { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.conf__price-k { color: var(--muted); font-size: 14px; }
.conf__price-v { font-family: var(--head); font-weight: 700; font-size: clamp(24px, 3vw, 32px); }
.conf__summary { margin-bottom: 20px; }

/* Живой макет работы: рамка, фон, сама работа и штамп меняются вместе
 * с выбором. Человеку не надо представлять, «как это будет выглядеть» —
 * он видит. Для лампы и Lego макета нет: там показывается фотография. */
.stage {
  position: relative; width: 100%; border-radius: 8px; overflow: hidden;
  background: #111; display: grid; place-items: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transition: background-color .25s ease, border-color .25s ease, aspect-ratio .25s ease;
}
.stage--photo, .stage--shot { display: block; }
.stage > [role="status"] { padding: 48px 20px; text-align: center; }
.stage--art { border-style: solid; border-width: clamp(10px, 1.6vw, 18px); padding: clamp(12px, 2vw, 26px); }
.gr8 .stage__art {
  position: relative; width: 100%; height: auto;
  display: block; transform: none;
}
.stage__stamp {
  position: absolute; left: clamp(18px, 3vw, 34px); top: clamp(18px, 3vw, 34px);
  font-family: 'Martian Mono', ui-monospace, monospace; font-size: clamp(8px, .95vw, 11px);
  line-height: 1.7; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 10px; border: 1px solid currentColor; border-radius: 3px;
  opacity: .85; pointer-events: none; max-width: 46%;
}
.stage__stamp span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage__hint {
  position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--muted);
  background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 6px;
}

/* Варианты внутри вида — плитками с ценой, чтобы разница была видна */
.picks { display: grid; width: 100%; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pick {
  display: flex; gap: 10px; align-items: center; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; color: inherit; font: inherit;
}
.pick:hover { border-color: #3a3a3a; }
.pick[aria-pressed="true"] { border-color: var(--accent); }
.pick__img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.pick__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick__title { font-size: 13px; font-weight: 600; }
.pick__price { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick { min-width: 0; gap: 8px; }
  .pick__img { width: 40px; height: 52px; }
  .pick__title { overflow-wrap: anywhere; }
}

/* Свой цвет фона: пипетка прячется под образцом, чтобы кнопка выглядела
 * так же, как соседние, а не системным полем ввода. */
.opt--own { position: relative; cursor: pointer; display: inline-flex; align-items: center; }
.opt__pick {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
}

/* Лента снимков того же сочетания: у одной конфигурации обычно несколько
 * работ, и человеку полезно листать их, а не смотреть на одну. */
.stage--shot { padding: 0; border: 0; }
.stage__strip {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  z-index: 2; display: flex; gap: 6px; overflow-x: auto; padding: 6px;
  background: rgba(0,0,0,.42); border-radius: 10px; backdrop-filter: blur(6px);
}
.stage__thumb {
  width: 50px; height: 50px; padding: 0; border-radius: 7px; flex: none;
  cursor: pointer; opacity: .6; border: 1px solid transparent; overflow: hidden;
  background: #0a0a0a;
}
.stage__thumb img { width: 100%; height: 100%; object-fit: cover; }
.stage__thumb:hover { opacity: 1; }
.stage__thumb.is-on { opacity: 1; border-color: #fff; }
.stage__hint--warn { background: rgba(243,57,35,.85); color: #fff; bottom: auto; top: 10px; right: 10px; }

/* ---------- посадочные под рекламу ---------- */
/* Первый экран взят с действующего сайта: видео на весь экран и текст поверх.
 * Затемнение обязательно — без него белый заголовок на светлом кадре видео
 * пропадает, а кадр там меняется каждую секунду. */

.hero { position: relative; min-height: min(88vh, 760px); display: flex;
  align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.hero__shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(3,3,3,.35) 0%, rgba(3,3,3,.55) 45%, rgba(3,3,3,.92) 100%); }
.hero__body { position: relative; z-index: 2; padding-top: 64px; padding-bottom: 56px; }
.hero__body .lead { color: #d8d8d8; }
.hero__body p { max-width: 62ch; }

.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 24px; }
.fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(18,18,18,.72); }
.fact__k { font-size: 12px; color: var(--muted); }
.fact__v { font-family: var(--head); font-weight: 600; font-size: 15px; }

.cta__row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Этапы: нумерованный список, а не карточки — порядок здесь и есть смысл. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  gap: 2px 12px; padding: 16px 18px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius); }
.step__n { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-btn);
  font: 700 14px/1 var(--head); }
.step__t { font-family: var(--head); font-weight: 600; }
.step__d { color: var(--muted); font-size: 14px; }

/* Состав работы: пары «что — какое». Слева узко, справа текст. */
.specs { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; }
.spec { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); }
.spec:last-child { border-bottom: 0; }
.spec__k { color: var(--muted); font-size: 13px; }
@media (min-width: 720px) {
  .spec { grid-template-columns: 220px 1fr; gap: 20px; align-items: baseline; }
}

.plain { list-style: none; padding: 0; margin: 20px 0 8px; display: grid; gap: 8px; }
.plain li { padding-left: 22px; position: relative; color: #d8d8d8; }
.plain li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

/* Примеры работ: подписи собираются из разметки фотоархива. */
.gal { display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gal__i { margin: 0; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.gal__i img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gal__cap { padding: 12px 14px; font-size: 13px; color: var(--muted); }

.revs { display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rev { margin: 0; padding: 20px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius); }
.rev__t { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.rev__w { color: var(--muted); font-size: 13px; }

.faq { display: grid; gap: 10px; }
.faq__i { background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px 18px; }
.faq__q { cursor: pointer; padding: 14px 0; font-family: var(--head); font-weight: 600;
  list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; float: right; color: var(--accent); font-size: 20px;
  line-height: 1; }
.faq__i[open] .faq__q::after { content: "–"; }
.faq__a { padding: 0 0 16px; color: var(--muted); max-width: 78ch; }

.land__about { border-top: 1px solid var(--line); }
.land__end { text-align: center; }
.land__end .lead { margin: 0 auto 24px; }
.land__end .cta__row { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* Пробное единое кадрирование только для Скетча. */
.gr8 .stage[data-product="handmade"] {
  aspect-ratio: 2 / 3; display: grid; place-items: center;
  transition: none; isolation: isolate;
}
.gr8 .stage[data-product="handmade"] > .stage__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: translate(var(--shot-x, 0%), var(--shot-y, 0%)) rotate(var(--shot-angle, 0deg)) scale(var(--shot-scale, 1));
  transform-origin: center;
}
 .gr8 .stage[data-product="handmade"] > .stage__art[src$="/sketch-audi-rs4-white-black-clean.png"] { --shot-scale: 1.28; --shot-x: 0%; --shot-y: -4%; --shot-angle: -0.5deg; }
 .gr8 .stage[data-product="handmade"] > .stage__art[src$="/sketch-bmw-farid-grey-black.jpg"] { --shot-scale: 1.28; --shot-x: -1%; --shot-y: 0%; --shot-angle: -0.2deg; }
 .gr8 .stage[data-product="handmade"] > .stage__art[src$="/sketch-porsche-spyder-grey-grey-straight.png"] { --shot-scale: 1.3; --shot-x: 0%; --shot-y: 1%; --shot-angle: 0deg; }
 .gr8 .stage[data-product="handmade"] > .stage__art[src$="/sketch-viper-grey-grey.png"] { --shot-scale: 1.24; --shot-x: -1%; --shot-y: 4%; --shot-angle: 0deg; }
 .gr8 .stage[data-product="handmade"] > .stage__art[src$="/tild3337-6537-4837-a630-656233633463__dsc07889_1_1.jpg"] { --shot-scale: 1.02; --shot-x: 0%; --shot-y: -1%; --shot-angle: -0.3deg; }
 .gr8 .stage[data-product="handmade"] > .stage__art[src$="/tild3431-3964-4965-a638-653761636135__dsc07665_1.jpg"] { --shot-scale: 1.1; --shot-x: 0%; --shot-y: -2%; --shot-angle: 0deg; }
 .gr8 .stage[data-product="handmade"] > .stage__art[src$="/tild6130-3965-4438-b531-343339366536__dsc07686_1.jpg"] { --shot-scale: 1; --shot-x: 0%; --shot-y: 0%; --shot-angle: -3deg; }
 .gr8 .stage[data-product="handmade"] > .stage__art[src$="/tild6466-3235-4735-a134-363430323938__dsc07680_1.jpg"] { --shot-scale: 1; --shot-x: 0%; --shot-y: 0%; --shot-angle: -4deg; }
 .gr8 .stage[data-product="handmade"] > .stage__art[src$="/tild3662-3862-4834-b437-653939396334__dsc08559_1_1.jpg"] { --shot-scale: 1.28; --shot-x: 0%; --shot-y: 1%; --shot-angle: 0deg; }

/* Кастом: стабильный блок и центрирование по внешней раме, не по снимку. */
.gr8 .stage[data-product="custom"] {
  aspect-ratio: 2 / 3; display: grid; place-items: center; transition: none; isolation: isolate;
}
.gr8 .stage[data-product="custom"] > .stage__art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: none;
}
.gr8 .stage[data-product="custom"] > .stage__strip {
  bottom: 4px; left: 4px; right: 4px;
}
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3533-3264-4237-a130-346565363532__dsc06875_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 126.24%; height: auto; max-width: none; transform: translate(-49.0%, -53.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3062-3334-4031-b438-376538346663__dsc06844_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 124.33%; height: auto; max-width: none; transform: translate(-50.0%, -55.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6364-3436-4932-b262-343431643436__dsc06846_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 105.2%; height: auto; max-width: none; transform: translate(-51.0%, -51.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6262-3835-4964-b238-613062653165__dsc06852_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 124.33%; height: auto; max-width: none; transform: translate(-50.0%, -52.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3134-3135-4338-b039-636439653130__dsc06854_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 94.32%; height: auto; max-width: none; transform: translate(-50.0%, -51.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3736-6138-4435-a338-643738646234__dsc06857_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 112.5%; height: auto; max-width: none; transform: translate(-50.0%, -52.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3565-6565-4166-a535-633731303061__dsc08559_1_2_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 125.0%; height: auto; max-width: none; transform: translate(-52.0%, -52.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6637-3963-4235-b937-316634336433__dsc07343_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 209.3%; height: auto; max-width: none; transform: translate(-48.5%, -47.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3531-3338-4535-b164-656230336134__dsc07356_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 106.74%; height: auto; max-width: none; transform: translate(-49.5%, -48.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6339-6361-4139-b265-373766373337__dsc08429_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 112.5%; height: auto; max-width: none; transform: translate(-50.0%, -56.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3330-3838-4636-b561-643033656432__dsc07396_1_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 112.5%; height: auto; max-width: none; transform: translate(-50.0%, -49.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6534-3839-4931-a335-626365316435__img_2811.jpg"] { inset: auto; left: 50%; top: 46%; width: 107.97%; height: auto; max-width: none; transform: translate(-50.0%, -57.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3936-3566-4761-a361-383466373862__img_2840.jpg"] { inset: auto; left: 50%; top: 46%; width: 105.2%; height: auto; max-width: none; transform: translate(-50.0%, -55.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6531-6439-4763-b331-643066623636__dsc08670_2.jpg"] { inset: auto; left: 50%; top: 46%; width: 119.1%; height: auto; max-width: none; transform: translate(-51.5%, -54.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3761-3831-4832-a463-643665376532__dscf0963_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 164.09%; height: auto; max-width: none; transform: translate(-51.0%, -48.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3261-3764-4233-a332-366539663830__dsc07889_3_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 109.76%; height: auto; max-width: none; transform: translate(-51.0%, -50.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3732-3130-4965-a336-663231363863__img_2816.jpeg"] { inset: auto; left: 50%; top: 46%; width: 102.57%; height: auto; max-width: none; transform: translate(-51.0%, -53.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6564-3866-4166-b734-616561323233__dsc05876.jpg"] { inset: auto; left: 50%; top: 46%; width: 105.2%; height: auto; max-width: none; transform: translate(-52.0%, -50.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3564-3135-4430-b036-623236643862__dsc05886.jpg"] { inset: auto; left: 50%; top: 46%; width: 105.2%; height: auto; max-width: none; transform: translate(-51.5%, -56.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6635-3434-4166-b733-653832366436__dsc07889_2_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 112.5%; height: auto; max-width: none; transform: translate(-52.0%, -50.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3964-3966-4535-b237-663264393264__dsc05876_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 109.41%; height: auto; max-width: none; transform: translate(-51.0%, -50.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3835-3634-4833-b164-336438363637__dsc07445_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 108.13%; height: auto; max-width: none; transform: translate(-50.5%, -57.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3933-6262-4936-a262-633637396361__dsc08647_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 114.07%; height: auto; max-width: none; transform: translate(-49.5%, -55.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3361-3634-4263-b366-373335343733__dsc08670_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 106.74%; height: auto; max-width: none; transform: translate(-50.0%, -51.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6162-6564-4837-b932-333738323939__dsc05543_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 105.2%; height: auto; max-width: none; transform: translate(-49.5%, -53.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6337-3033-4163-a334-316437353662__dsc05543.jpg"] { inset: auto; left: 50%; top: 46%; width: 125.0%; height: auto; max-width: none; transform: translate(-48.0%, -52.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3566-3631-4664-a564-373433326166__dsc06809_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 126.24%; height: auto; max-width: none; transform: translate(-49.5%, -54.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6462-6131-4032-a466-653937323336__dsc06786_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 112.41%; height: auto; max-width: none; transform: translate(-51.0%, -54.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6266-3131-4164-a661-666664643334__dsc06794_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 115.58%; height: auto; max-width: none; transform: translate(-52.0%, -55.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3432-6635-4262-b237-313632356638__dsc07445_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 113.97%; height: auto; max-width: none; transform: translate(-49.5%, -54.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3862-3663-4638-a163-356638633637__image.png"] { inset: auto; left: 50%; top: 46%; width: 96.09%; height: auto; max-width: none; transform: translate(-50.5%, -56.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3236-6539-4061-b666-623036333835__dsc07498_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 112.45%; height: auto; max-width: none; transform: translate(-49.0%, -54.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3638-3338-4464-a136-316262366135__dsc07557_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 115.38%; height: auto; max-width: none; transform: translate(-51.0%, -52.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6539-6261-4539-b833-643033626536__dsc07357_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 106.74%; height: auto; max-width: none; transform: translate(-51.0%, -53.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3430-3166-4030-b761-383766303463__dsc07807_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 115.62%; height: auto; max-width: none; transform: translate(-51.5%, -53.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3666-3739-4039-a262-633665336262__dsc07358_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 106.74%; height: auto; max-width: none; transform: translate(-51.0%, -53.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3462-6230-4665-a535-323064656336__dsc05733_1_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 133.07%; height: auto; max-width: none; transform: translate(-51.0%, -51.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild3661-3234-4661-a365-313037303163__dsc07056.jpg"] { inset: auto; left: 50%; top: 46%; width: 132.35%; height: auto; max-width: none; transform: translate(-51.0%, -52.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6339-3061-4536-b264-396666656466__dsc06824_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 113.97%; height: auto; max-width: none; transform: translate(-51.0%, -56.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6438-3732-4365-a232-376638353930__image.png"] { inset: auto; left: 50%; top: 46%; width: 113.98%; height: auto; max-width: none; transform: translate(-50.0%, -54.0%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/catalog/custom-ferrari-f40-red-white.jpg"] { inset: auto; left: 50%; top: 46%; width: 113.24%; height: auto; max-width: none; transform: translate(-52.5%, -50.5%); }
 .gr8 .stage[data-product="custom"] > .stage__art[src$="/tild6538-3763-4065-a466-366231376561__dsc08671_1.jpg"] { inset: auto; left: 50%; top: 46%; width: 118.42%; height: auto; max-width: none; transform: translate(-51.0%, -49.5%); }

/* Главный Countach: рама занимает 82% высоты, центр как у других работ. */
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-countach-grey-black-2811.jpg"] {
  inset: auto; left: 50%; top: 46%; width: 105%; height: auto; max-width: none;
  transform: translate(-49.5%, -57.3%);
}
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-countach-grey-black-2840.jpg"] {
  inset: auto; left: 50%; top: 46%; width: 112%; height: auto; max-width: none;
  transform: translate(-43%, -53%);
}

/* Aventador: общий план выровнен по масштабу и центру остальных превью. */
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-aventador-orange-black-dsc08375.jpg"] {
  inset: auto; left: 50%; top: 46%; width: 126%; height: auto; max-width: none;
  transform: translate(-50.5%, -53%);
}

/* McLaren F1: общий план в масштабе остальных работ. */
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-mclaren-black-black-dsc07445.jpg"] {
  inset: auto; left: 50%; top: 46%; width: 115%; height: auto; max-width: none;
  transform: translate(-50%, -53%);
}
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-mclaren-black-black-dsc07450.jpg"] {
  inset: auto; left: 50%; top: 46%; width: 116%; height: auto; max-width: none;
  transform: translate(-49%, -57.5%);
}

/* Porsche OQ: одинаковые масштаб и центр у двух вариантов рамки. */
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-porsche-oq-blue-custom.jpg"] {
  inset: auto; left: 50%; top: 46%; width: 127%; height: auto; max-width: none;
  transform: translate(-49%, -52.2%);
}

.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-porsche-oq-blue-black.png"] {
  inset: auto; left: 50%; top: 46%; width: 113.98%; height: auto; max-width: none;
  transform: translate(-50%, -54%);
}

.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-porsche-oq-blue-white-v2.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-porsche-oq-blue-grey.png"] {
  inset: auto; left: 50%; top: 46%; width: 113.98%; height: auto; max-width: none;
  transform: translate(-50%, -54%);
}

/* Оранжевая серия: единая геометрия всех трёх вариантов. */
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-aventador-orange-white-frame-aligned.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-aventador-orange-grey-frame-aligned.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-aventador-orange-ginger-frame-aligned.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-aventador-orange-black-aligned.png"] {
  inset: auto; left: 50%; top: 46%; width: 116%; height: auto; max-width: none;
  transform: translate(-50%, -47%);
}

/* Range Rover: оригинал высокого разрешения и вариант серой рамки. */
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-range-rover-green-white-original.jpg"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-range-rover-green-custom.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-range-rover-green-grey.png"] {
  inset: auto; left: 50%; top: 46%; width: 112.45%; height: auto; max-width: none;
  transform: translate(-49%, -50.8%);
}

.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-aston-green-black-main.jpg"] {
  inset:auto; left:50%; top:46%; width:116%; height:auto; max-width:none;
  transform:translate(-51%, -53.5%);
}
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-aston-green-black-second.jpg"] {
  inset:auto; left:50%; top:46%; width:105.2%; height:auto; max-width:none;
  transform:translate(-51.5%, -56%);
}
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-f40-red-white-wall.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-f40-red-custom.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-f40-red-black-original.jpg"] {
  inset:auto; left:50%; top:46%; width:145%; height:auto; max-width:none;
  transform:translate(-49.5%, -51.2%);
}

.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-porsche-grey-graphite-frame.png"] {
 inset:auto; left:50%; top:46%; width:209.3%; height:auto; max-width:none;
 transform:translate(-48.5%, -47.5%);
}

/* Black F40 wall series: same framing as red wall series. */
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-f40-black-black-wall.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-f40-black-grey-wall.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-f40-black-metal-wall.png"] {
  inset: auto; left: 50%; top: 46%; width: 145%; height: auto; max-width: none;
  transform: translate(-49.5%, -51.2%);
}

.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-civic-white-grey.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-civic-white-graphite.png"] { inset: auto; left: 50%; top: 46%; width: 112.5%; height: auto; max-width: none; transform: translate(-50%, -56%); }

/* Blueprint variants share one viewport and preserve full photo framing. */
.gr8 .stage[data-product="blueprint"] { aspect-ratio: 2 / 3; transition: none; }
.gr8 .stage[data-product="blueprint"] > .stage__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }

/* BMW custom paper: common scale and center for all frame colors. */
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-bmw-pink-grey.jpg"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-bmw-pink-black.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-bmw-pink-white.png"],
.gr8 .stage[data-product="custom"] > .stage__art[src$="/custom-bmw-pink-graphite.png"] { inset:auto; left:50%; top:46%; width:112%; height:auto; max-width:none; transform:translate(-50.5%, -50.6%); }

/* Volume is a gallery-only presentation until its separate flow is defined. */
.gr8 .conf--view-only #variants { display:none; }

/* Consistent neighbouring product images and readable long names. */
.tile__img{aspect-ratio:4/5;flex-shrink:0;object-fit:cover;object-position:center;display:block}
.tile__title{line-height:1.3;min-height:2.6em}
.ready-gallery__thumbs{max-width:100%;overflow-x:auto;flex-wrap:nowrap}

.gr8 .ready-gallery__thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}
.gr8 .ready-gallery__thumb{flex:0 0 72px}

.gr8 .stage__arrow{position:absolute;top:45%;z-index:5;width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:30px;line-height:1;cursor:pointer}.gr8 .stage__arrow--prev{left:12px}.gr8 .stage__arrow--next{right:12px}.gr8 .stage__arrow:focus-visible{outline:3px solid #f33923;outline-offset:3px}

.stage[data-product="volume"] .stage__arrow{border-radius:0;background:transparent;border:0;text-shadow:0 1px 4px #000}

/* Compact ready-art drawer; full pages retain their normal layout. */
.gr8-ready-embed .wrap{width:auto;max-width:none;margin:0;padding:0 20px}
.gr8-ready-embed .ready-product{padding:24px 0}
.gr8-ready-embed .ready-product .cols{grid-template-columns:minmax(0,1fr);gap:20px}
.gr8-ready-embed .ready-product .cols>div{min-width:0}
.gr8-ready-embed .ready-product h1{font-size:24px;line-height:1.3;margin-bottom:12px}
.gr8-ready-embed .ready-product .lead{font-size:14px;line-height:1.5}
.gr8-ready-embed .ready-gallery{margin-top:16px}
.gr8-ready-embed .gr8 .ready-gallery__main{display:block;width:auto;max-width:100%;height:min(45dvh,380px);margin-inline:auto;object-fit:contain;object-position:center;background:transparent}
.gr8-ready-embed .ready-product .summary{position:static;padding:16px}
.gr8-ready-embed .ready-product .summary__sum{font-size:22px}
@media(max-width:600px){.gr8-ready-embed .wrap{padding:0 16px}.gr8-ready-embed .ready-product h1{font-size:21px}}

.gr8-ready-embed .top,.gr8-ready-embed .foot{display:none!important}

.ready-status{padding:5px 9px;border-radius:6px;font-size:12px;font-weight:600;line-height:1.4;color:#505050;background:#e5e5e5}
.ready-status--available{color:#17603a;background:#dcefe2}