/* ============================================================
   PRODUCT DETAIL
   ============================================================ */

.product-wrap {
  padding: var(--sp-11) var(--page-x) var(--sp-10);
  max-width: var(--container-page);
  margin: 0 auto;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-0) var(--sp-1);
  align-items: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-65);
  margin-bottom: var(--sp-4);
}

.crumbs a {
  color: var(--text-83);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--pure-white);
}

.crumbs span {
  opacity: .4;
}

/* Текущий товар в хлебных крошках */
.crumbs-current {
  color: var(--text-68);
  overflow-wrap: anywhere;
}

.product-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--sp-7);
  align-items: start;
}

.product-gallery {
  position: sticky;
  top: 110px;
  /* 90px навбар + 20px зазор */
}

/* Двойной безель (Doppelrand): внешняя «оправа» + внутреннее «ядро» —
   галерея выглядит как смонтированная в раму пластина, а не плоская картинка
   на фоне. Внешний слой несёт sticky/hover-раму, внутренний — data-хуки зума. */
.gallery-shell {
  padding: var(--sp-0);
  border-radius: var(--r-xl);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  transition: border-color .6s cubic-bezier(.32, .72, 0, 1);
}

.gallery-shell:hover {
  border-color: var(--cyan-a22);
}

.product-img {
  border-radius: calc(var(--r-xl) - var(--sp-0));
  overflow: hidden;
  height: 520px;
  position: relative;
  /* без фото - тёмная рамка с иконкой (как в каталоге) */
  background:
    radial-gradient(circle at center, var(--azure-a18), transparent 60%),
    linear-gradient(135deg, var(--midnight), var(--bg2));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--pure-white-a06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* с фото - белый фон: товар на белом сливается с рамкой и выглядит «заполненным» */
.product-img--photo {
  background: var(--pure-white);
  border-color: var(--pure-white-a10);
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* фото не обрезается; белые поля сливаются с белой рамкой */
}

.product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.product-img-placeholder::before,
.product-img-placeholder::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: var(--cyan);
  border-style: solid;
  opacity: .35;
}

.product-img-placeholder::before {
  top: 24px;
  left: 24px;
  border-width: 1.5px 0 0 1.5px;
}

.product-img-placeholder::after {
  bottom: 24px;
  right: 24px;
  border-width: 0 1.5px 1.5px 0;
}

.product-img-placeholder .ic {
  width: 100px;
  height: 100px;
  color: var(--cyan);
  opacity: .32;
  filter: drop-shadow(0 0 18px var(--cyan-a40));
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Микро-бейдж категории/секции: тонкий ритмический маркер перед крупным
   заголовком (используется над h1 и над h2 характеристик/похожих товаров). */
.eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: var(--h-chip);
  padding: 0 var(--sp-2);
  margin-bottom: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.product-title {
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 800;
  margin-top: var(--sp-1);
}

/* eyebrow уже отделён от заголовка через flex-gap родителя (.product-info) —
   собственный отступ h1 здесь избыточен и удваивал бы дистанцию */
.eyebrow + .product-title {
  margin-top: 0;
}

/* Артикул под заголовком: приглушённая метка + акцентный моно-код (terminal HUD) */
.product-sku {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-65);
}
.product-sku span {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", monospace);
  color: var(--cyan);
  letter-spacing: .06em;
  -webkit-user-select: all;
  user-select: all;
}

.product-price {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.product-price small {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-65);
  margin-bottom: var(--sp-1);
}

/* иерархия цены: старая цена (зачёркнута) + скидка — стилевые хуки,
   безопасны если разметка их не использует (presentation-only) */
.product-price del,
.product-price .price-old {
  font-size: 18px;
  color: var(--text-faint);
  text-decoration: line-through;
  margin-bottom: var(--sp-0);
}

.product-price .price-discount {
  align-self: flex-start;
  margin-top: var(--sp-1);
  padding: 0 var(--sp-1);
  min-height: var(--h-chip);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cta-ink);
  background: var(--orange);
}

.product-price strong {
  font-size: 56px;
  letter-spacing: -.04em;
  font-weight: 800;
  background: linear-gradient(90deg, var(--pure-white), var(--frost));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.product-price span {
  font-size: 14px;
  color: var(--text-65);
  margin-top: var(--sp-1);
}

/* ── «Живая цена»: компактное зеркало .product-price. Всплывает ПОД липким фото,
   когда основной блок цены уходит из вида при выборе комплектации. Показ — класс
   .is-visible (ставит IntersectionObserver в product_detail.html). Число мирит
   MutationObserver с [data-price-target]; при смене — пульс .is-bump. ── */
.pdp-price-live {
  position: absolute;
  /* Ширину задаёт число, а не галерея: растянутая во всю ширину плашка
     держала цену в левом углу и полосу пустоты справа — читалась как
     недоделанная строка, а не как ценник. Центрируем полями, а не
     transform: transform занят анимацией появления (translateY → none). */
  left: 0; right: 0;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  top: calc(100% + 12px);         /* под фото (галерея — sticky, значит и цена пиннится) */
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 20px 14px;
  border-radius: var(--r-md);
  /* стеклянная плашка в языке бренда (как .cta-glass / тосты) */
  background: var(--gunmetal-a16);
  box-shadow:
    inset 0 0 0 1px var(--azure-200-a22),
    inset 0 -3px 12px 0 var(--azure-200-a12),
    0 1px 3px 0 var(--black-a50),
    0 10px 26px -8px var(--black-a55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-standard),
              transform var(--dur-slow) var(--ease-standard);
}
.pdp-price-live.is-visible { opacity: 1; transform: none; }
/* Число набрано тем же приёмом, что главная цена (.product-price strong):
   светлый градиент по тексту и плотный трекинг. Плашка — уменьшенная копия
   главного блока, поэтому взгляд узнаёт её мгновенно, без чтения. */
.pdp-price-live strong {
  font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
  background: linear-gradient(90deg, var(--pure-white), var(--frost));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
/* «сом» набран как подпись основного блока цены (.product-price small):
   капитель с трекингом, приглушённый тон. Так плашка читается уменьшенной
   копией главного блока, а не другим элементом с тем же числом. */
.pdp-price-live span {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-65);
}

/* пульс числа при смене комплектации — у зеркала И у основной цены */
.pdp-price-live strong.is-bump,
.product-price strong.is-bump {
  animation: pricePulse .42s var(--ease-emphasized);
}
@keyframes pricePulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.07); filter: drop-shadow(0 0 10px var(--cyan-a60)); }
  100% { transform: scale(1); }
}

/* Мобайл/узкий (≤980px): галерея не липкая → цена становится тонкой ЛИПКОЙ
   полосой под навбаром (position:fixed, ниже навбара по z-index) */
@media (max-width: 980px) {
  .pdp-price-live {
    position: fixed;
    top: var(--nav-h-compact);
    left: 0; right: 0;
    /* полоса во всю ширину — здесь это осознанно, поэтому гасим width:max-content */
    width: auto;
    border-radius: 0;
    z-index: var(--z-sticky-bar);
    justify-content: center;
    padding: 10px 16px;
    transform: translateY(-10px);
  }
  .pdp-price-live.is-visible { transform: none; }
  .pdp-price-live strong { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-price-live { transition-duration: 1ms; }
  .pdp-price-live strong.is-bump,
  .product-price strong.is-bump { animation: none; }
}

/* На детальной странице: бейдж виден только на тач-устройствах (мобильные/планшеты).
   На десктопе он не нужен — там в каталоге он появляется при наведении.
   Базовый .pcard-stock — в 02-components/cards.css; z-index:4 явно выше
   .zoom-fx (z-index:3, см. 02-components/zoom.css). */
.pcard-stock--detail {
  display: none;
}
@media (hover: none) {
  .pcard-stock--detail {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    display: inline-flex;
    opacity: 1;
    transform: none;
    z-index: 4;
  }
}

.variant-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-card);
  background: var(--pure-white-a03);
  border: 1px solid var(--pure-white-a07);
  box-shadow: inset 0 1px 0 var(--pure-white-a05);
}

.variant-group h2 {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-69);
  margin-bottom: var(--sp-1);
  font-weight: 600;
}

.product-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* «В корзину» — иконка просто рядом с текстом, без кружка-орба */
.product-actions .primary .ic {
  width: 18px;
  height: 18px;
}

/* CTA-пара читается как единое целое: «Оформить заказ» выравниваем по высоте
   с «В корзину» (48px). Скоуп под .product-actions, чтобы не задеть
   .product-buynow в карточках каталога (там остаётся --h-btn-sm) */
.product-actions .product-buynow {
  height: var(--h-btn);
}

/* стрелка теперь живёт в круглом орбе .cta-arrow (button-in-button); спрайт
   «вниз» поворачиваем «вправо». Движение орба на hover — в buttons.css
   (.secondary:hover .cta-arrow), поэтому саму стрелку здесь не двигаем */
.product-buynow .cta-arrow svg {
  transform: rotate(-90deg);
}

/* Trust-сигналы под кнопками покупки (в точке решения) */
.product-trust {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border-radius: var(--r-card);
  background: var(--pure-white-a03);
  border: 1px solid var(--pure-white-a07);
  box-shadow: inset 0 1px 0 var(--pure-white-a05);
}

.product-trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-soft);
  letter-spacing: .01em;
}

.product-trust .ic {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--cyan);
}

.product-spec-block {
  padding: var(--sp-3);
  border-radius: var(--r-card);
  background: var(--pure-white-a03);
  border: 1px solid var(--pure-white-a06);
}

.product-spec-block h4 {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-69);
  margin-bottom: var(--sp-1);
}

.product-spec-block p {
  color: var(--text-80);
  line-height: 1.7;
  font-size: 14px;
}

.warranty {
  margin-top: 14px;
  color: var(--text-65);
  font-size: 13px;
  letter-spacing: .04em;
}

/* ============================================================
   ХАРАКТЕРИСТИКИ (primary + secondary + extras + full)
   ============================================================ */

.spec-primary,
.spec-highlight {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--cyan-a05);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--pure-white-a06);
  overflow: hidden;
}

/* flex, а не grid: лейбл должен центрироваться против ВСЕГО правого блока
   (значение + подсказка вместе), а не только против первой строки значения.
   На grid'е с implicit-строками (.spec-hl-hint уходит во 2-ю строку) точное
   центрирование через grid-row:1/-1 давало плавающую погрешность (9-18px) -
   спанящийся элемент влияет на расчёт высоты самих строк. С явной обёрткой
   .spec-hl-value-col (значение+подсказка как один flex-item) обычный
   align-items:center центрирует лейбл точно, без побочных эффектов. */
.spec-hl-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--h-row);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--pure-white-a05);
  transition: background-color .5s cubic-bezier(.32, .72, 0, 1);
}

.spec-hl-row:hover {
  background-color: var(--cyan-a04);
}

.spec-hl-row:first-child {
  border-top: 0;
}

.spec-hl-label {
  flex: 1 0 0;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-68);
}

.spec-hl-value-col {
  flex: 1.4 0 0;
  display: flex;
  flex-direction: column;
}

.spec-hl-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--blue-50);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.spec-hl-hint {
  font-size: 12px;
  color: var(--text-58);
  letter-spacing: .01em;
  line-height: 1.5;
}

.lpddr-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent);
  color: var(--warning);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
}

.variant-note {
  margin: var(--sp-1) 0 0;
  font-size: 12px;
  color: var(--text-58);
  letter-spacing: .01em;
}

.compat-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--h-chip);
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--azure-300-a12);
  border: 1px solid var(--azure-300-a28);
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-self: flex-start;
}

.compat-badge strong {
  color: var(--text-91);
  font-weight: 700;
}

.spec-cell--muted {
  opacity: .45;
}

.spec-cell--muted .spec-cell-label,
.spec-cell--muted .spec-cell-value {
  font-size: 11px;
}

.warranty-strip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--pure-white-a04);
  border: 1px solid var(--pure-white-a06);
  align-self: flex-start;
}

.warranty-strip span {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-68);
}

.warranty-strip b {
  font-size: 13px;
  color: var(--pure-white);
  font-weight: 600;
  letter-spacing: .04em;
}

/* ===== secondary (большая сетка под product-grid) ===== */

.spec-secondary,
.spec-additional {
  margin-top: 80px;
}

.spec-secondary h2,
.spec-additional h2 {
  font-size: 28px;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-3);
  font-weight: 700;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-2);
}

.spec-cell {
  padding: var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--pure-white-a03);
  border: 1px solid var(--pure-white-a06);
  display: flex;
  flex-direction: column;
  align-items: center;      /* текст по центру по горизонтали... */
  justify-content: flex-start;  /* ...но содержимое остаётся у верхнего края */
  text-align: center;
  gap: var(--sp-1);
  min-height: var(--sp-7);
}

/* Булевы значения («Есть», «Да») - компактный pill */
.spec-cell--bool {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--h-row);
  padding: 0 var(--sp-2);
}

.spec-cell--bool .spec-cell-label {
  flex: 1;
}

.spec-cell--bool .spec-cell-value {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: var(--sp-0) var(--sp-1);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--success) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
  color: var(--success);
  white-space: nowrap;
}

.spec-cell-label {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-68);
}

.spec-cell-value {
  font-size: 14px;
  color: var(--silver);
  line-height: 1.5;
}

/* Значения-перечисления через запятую → inline chips */
.spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-0);
}

.spec-tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--pure-white-a05);
  border: 1px solid var(--line);
  color: var(--text);
  line-height: 1.4;
}

/* ===== extras (мелким текстом, inline список) ===== */

.spec-extras {
  margin-top: 36px;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  background: var(--pure-white-a02);
  border: 1px solid var(--pure-white-a04);
}

.spec-extras h3 {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-58);
  margin-bottom: 14px;
  font-weight: 600;
}

.spec-extras ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 36px;
}

.spec-extras li {
  font-size: 12.5px;
  color: var(--text-69);
  line-height: 1.5;
  letter-spacing: .01em;
}

.spec-extras .ex-label {
  color: var(--field-border-hover);
  margin-right: 6px;
}

.spec-extras .ex-value {
  color: var(--text-83);
}

/* all-variants table */

.all-variants {
  margin-top: 80px;
}

.all-variants h2 {
  font-size: 28px;
  letter-spacing: -.02em;
  margin-bottom: 24px;
  font-weight: 700;
}

/* Похожие товары на странице товара */
.related-products {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--pure-white-a07);
}

/* Только прямой заголовок секции «Похожие товары», НЕ вложенные <h2>. Название
   карточки .pcard-name — тоже <h2>, и без `>` это правило (0,1,1) перебивало бы
   .pcard-name (0,1,0), раздувая названия похожих до 28px/700. */
.related-products > h2 {
  font-size: 28px;
  letter-spacing: -.02em;
  margin-bottom: 24px;
  font-weight: 700;
}

/* Тот же зазор, что чинили в catalog.css: 481-623px — авто-fill(minmax(280px,1fr))
   не помещает даже 2 колонки, откатывается на 1 карточку во всю ширину. Держим
   2 колонки явно во всём диапазоне до 623px (момент, когда auto-fill сам
   уверенно даёт 2 полноразмерные колонки); ≤480px — свой более узкий откат
   на 1 колонку (ниже, перебивает по каскаду). */
@media(max-width: 623px) {
  .related-products .catalog-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* на мобильном 1fr 1fr даёт ~165px — слишком узко; откат на 1 колонку */
@media(max-width: 480px) {
  .related-products .catalog-grid {
    grid-template-columns: 1fr;
  }
}

.variant-table {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--pure-white-a06);
  background: var(--pure-white-a03);
}

.vt-head,
.vt-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  padding: 16px 22px;
  align-items: center;
}

.vt-head {
  background: var(--pure-white-a04);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-68);
}

.vt-row {
  border-top: 1px solid var(--pure-white-a05);
  color: var(--silver);
  font-size: 14px;
  transition: background .25s;
}

.vt-row:hover {
  background: var(--glass);
}

.vt-row.is-active {
  background: var(--cyan-a09);
}

.vt-price {
  font-weight: 700;
  color: var(--pure-white);
  font-size: 15px;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* ── адаптив (≤980px, общий с каталогом — оба используют .product-wrap) ── */
@media(max-width: 980px) {
  .product-wrap {
    padding: 120px 22px 80px;
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .product-gallery {
    position: static;
  }

  /* на мобайле sticky отключаем */
  .product-img {
    height: 360px;
  }

  .vt-head,
  .vt-row {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .vt-head span:nth-child(3),
  .vt-row span:nth-child(3) {
    display: none;
  }
}

/* узкий планшет / повёрнутый экран (981-1100px): product-grid схлопывается
   только на 980px при картинке 520px — в этой полосе делаем компактнее */
@media (min-width: 981px) and (max-width: 1100px) {
  .product-grid {
    gap: 40px;
  }

  .product-img {
    height: 420px;
  }

  .product-price strong {
    font-size: 48px;
  }
}

@media(max-width: 768px) {
  .product-wrap {
    padding: 100px 20px 60px;
  }
}

@media(max-width: 480px) {
  .product-wrap {
    padding: 84px 16px 48px;
  }

  .vt-head,
  .vt-row {
    grid-template-columns: 1fr 1fr 1.2fr;
    padding: 12px 14px;
  }

  .product-img {
    height: 260px;
  }

  .product-price strong {
    font-size: 40px;
  }

  .spec-secondary,
  .spec-additional,
  .all-variants {
    margin-top: 48px;
  }
}

@media (min-width: 1920px) {
  .product-wrap {
    max-width: 1560px;
  }
}

@media (min-width: 2560px) {
  .product-wrap {
    max-width: 1900px;
  }

  .product-img {
    height: 600px;
  }
}

@media (min-width: 3840px) {
  .product-wrap {
    max-width: 2600px;
  }

  .product-img {
    height: 760px;
  }
}