/* ============ Каталог (catalog.html) ============ */
/* Десктоп: то же дизайн-пространство 1920px + zoom, что и .page на лендинге.
   ≤768px: fluid-перестройка той же разметки (см. медиаблок внизу). */

.cat-body { background: #FAF5F1; }

.cat {
  position: relative;
  width: 1920px;
  background: #FAF5F1;
  overflow: hidden;
  font-family: 'Tenor Sans', sans-serif;
}
.cat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('public/images/521-582.webp') top center / 1920px auto repeat-y;
  opacity: .85;
  pointer-events: none;
}

/* ---- шапка: координаты лендинга ---- */
.cat-logo { position: absolute; left: 49px; top: 54px; width: 168px; height: 143px; z-index: 2; }
.cat-logo img { display: block; width: 100%; height: 100%; }
.cnav1 { left: 311px; top: 92px; width: 156px; }
.cnav2 { left: 549px; top: 92px; width: 147px; }
.cnav3 { left: 778px; top: 92px; width: 177px; }
.nav-link.is-here { color: #C35B3F; }

/* каскад шапки в стиле лендинга (см. anim.css: .nav-link уже покрыт) */
body.anim .cat-logo { opacity: 0; transform: translateY(16px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
body.anim.hero-in .cat-logo { opacity: 1; transform: none; }
body.anim .cat-title { opacity: 0; transform: translateY(16px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
body.anim.hero-in .cat-title { opacity: 1; transform: none; transition-delay: .3s; }

/* ---- контент ---- */
.cat-main { position: relative; padding: 292px 49px 0; }
.cat-title {
  font-size: 110px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  color: #C35B3F;
  letter-spacing: .02em;
}

.cat-layout { display: flex; align-items: flex-start; gap: 72px; margin-top: 96px; }

/* ---- сайдбар-фильтры ---- */
.cat-aside { width: 348px; flex-shrink: 0; }
.cat-aside-in { position: sticky; top: 48px; display: flex; flex-direction: column; gap: 8px; }
.cat-filter {
  position: relative;
  display: block;
  padding: 12px 0 12px 42px;
  border: 0;
  background: none;
  text-align: left;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: .03em;
  color: #313131;
  cursor: pointer;
  transition: color .3s;
}
.cat-filter::before {
  content: '';
  position: absolute;
  left: 0;
  top: 29px;
  width: 24px;
  height: 2px;
  background: #C35B3F;
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: left;
  transition: opacity .3s, transform .4s cubic-bezier(.22,1,.36,1);
}
.cat-filter:hover { color: #C35B3F; }
.cat-filter.is-active { color: #C35B3F; }
.cat-filter.is-active::before { opacity: 1; transform: none; }
.cat-filter:focus-visible { outline: 2px solid #7c2d12; outline-offset: 2px; border-radius: 4px; }
.cat-filter-vol { white-space: nowrap; }

/* ---- сетка карточек ---- */
/* WebKit-фикс: zoom не масштабирует grid-треки 1fr (карточки вылезают вправо,
   overflow:hidden их режет — «справа обрезано и не листается»). Фикс-px flex
   масштабируется zoom корректно. */
.cat-grid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 64px 24px;
  list-style: none;
  margin: 0;
  padding: 0 0 140px;
}
.cat-card { display: flex; flex-direction: column; width: 332px; }
.cat-card[hidden] { display: none; }
body.anim .cat-card {
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
body.anim .cat-card.rv-card:not(.in) { opacity: 0; transform: translateY(26px); }
.cat-card.is-out { opacity: 0; transform: scale(.97); pointer-events: none; }

.cat-photo {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #F1E5DC;
  /* фикс скругления при transform внутри (Safari) */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.cat-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.cat-card:hover .cat-photo img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .cat-photo img { transition: none; }
  .cat-card:hover .cat-photo img { transform: none; }
}

.cat-name {
  margin-top: 26px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #313131;
}
.cat-type {
  margin-top: 9px;
  font-family: 'Geometria', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.2;
  color: #313131;
}
.cat-vol { margin-top: 7px; font-size: 20px; line-height: 1; color: #C35B3F; letter-spacing: .04em; }

/* кнопки прижаты к низу карточки — ровный ряд при двухстрочных именах */
.cat-actions { display: flex; gap: 12px; margin-top: auto; padding-top: 24px; }
.cat-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  border: 0;
  border-radius: 8px;
  background: #C35B3F;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 17.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background .3s, color .3s, letter-spacing .3s;
}
.cat-btn:hover { background: #A94A30; letter-spacing: .07em; }
.cat-btn--ghost {
  background: none;
  border: 1.5px solid #C35B3F;
  color: #C35B3F;
}
.cat-btn--ghost:hover { background: #C35B3F; color: #fff; }
.cat-btn:focus-visible { outline: 2px solid #7c2d12; outline-offset: 2px; }

/* ---- подробный просмотр товара ---- */
.product-dialog {
  position: fixed;
  inset: 0;
  width: min(820px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 16px;
  background: #FAF5F1;
  color: #313131;
  box-shadow: 0 24px 80px rgba(60, 25, 8, .35);
  font-family: 'Tenor Sans', sans-serif;
}
.product-dialog::backdrop {
  background: rgba(49, 33, 24, .45);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.product-dialog-in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}
.product-dialog-media {
  min-height: 500px;
  background: #F1E5DC;
}
.product-dialog-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-dialog-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 66px 44px 40px;
}
.product-dialog-kicker {
  color: #C35B3F;
  font-size: 13px;
  letter-spacing: .18em;
}
.product-dialog-title {
  margin-top: 18px;
  color: #313131;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.product-dialog-type {
  margin-top: 22px;
  font-family: 'Geometria', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.35;
}
.product-dialog-volume {
  margin-top: 9px;
  color: #C35B3F;
  font-size: 17px;
  letter-spacing: .04em;
}
.product-dialog-buy {
  flex: none;
  width: 100%;
  margin-top: auto;
}
.product-dialog-close {
  top: 14px;
  right: 16px;
}

/* ---- футер: те же классы, top = top лендинга − 8428 ---- */
.cat-footer { position: relative; height: 581.6px; margin-top: 40px; }
.cat-footer .n613 { top: 0; }
.cat-footer .n638 { top: 70px; }
.cat-footer .n639 { top: 194px; }
.cat-footer .n640 { top: 249px; }
.cat-footer .n641 { top: 334.7px; }
.cat-footer .n642 { top: 293.1px; }
.cat-footer .n643 { top: 251.6px; }
.cat-footer .n644 { top: 376.29px; }
.cat-footer .n645 { top: 313.1px; }
.cat-footer .n646 { top: 377.1px; }
.cat-footer .n647 { top: 302px; }
.cat-footer .n651 { top: 365.9px; }
.cat-footer .n657 { top: 194px; }
.cat-footer .n658 { top: 194px; }
.cat-footer .n659 { top: 429.9px; }
.cat-footer .n660 { top: 254px; }   /* Золотое яблоко */
.cat-footer .n667 { top: 265.2px; } /* Золотое яблоко */
.cat-footer .n668 { top: 393.2px; } /* Ozon */
.cat-footer .n669 { top: 329.2px; } /* ЛЭТУАЛЬ */
.cat-footer .n670 { top: 457px; }   /* Wildberries */
.cat-footer .n671 { top: 446px; }   /* Wildberries */
.cat-footer .n675 { top: 457px; }
.cat-footer .n676 { top: 460px; }
.cat-footer .n679 { top: 457px; }
.cat-footer .n680 { top: 382px; }   /* Ozon */
.cat-footer .n684 { top: 318px; }   /* ЛЭТУАЛЬ */
.cat-footer .n687 { top: 332px; }   /* ЛЭТУАЛЬ */

.cat-footer-m { display: none; }

/* плавный якорный скролл к контактам */
html { scroll-behavior: smooth; }
@media (min-width: 769px) { html, body { overflow-x: hidden; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============ Мобильная перестройка (≤768px) ============ */
@media (max-width: 768px) {
  .cat { width: auto; }
  .cat::before { background-size: 200% auto; }

  .cat-logo { position: static; width: auto; height: auto; }
  .cat-logo img { height: 36px; width: auto; }
  .cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
  }
  .cat-nav { display: flex; gap: 16px; }
  .cat-nav .nav-link { position: static; width: auto; font-size: 13px; letter-spacing: .06em; }

  .cat-main { padding: 16px 20px 0; }
  .cat-title { font-size: 44px; }

  .cat-layout { flex-direction: column; gap: 24px; margin-top: 28px; }

  .cat-aside { width: 100%; }
  .cat-aside-in {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    overflow-x: visible;
  }
  .cat-filter {
    flex-shrink: 0;
    padding: 9px 16px;
    font-size: 13px;
    letter-spacing: .04em;
    border: 1px solid rgba(195, 91, 63, .45);
    border-radius: 100px;
    transition: color .3s, background .3s, border-color .3s;
  }
  .cat-filter::before { display: none; }
  .cat-filter.is-active { background: #C35B3F; border-color: #C35B3F; color: #fff; }

  .cat-grid { gap: 32px 12px; padding-bottom: 64px; }
  .cat-card { width: calc((100% - 12px) / 2); }
  .cat-photo { border-radius: 12px; }
  .cat-name { margin-top: 14px; font-size: 15px; letter-spacing: .06em; }
  .cat-type { margin-top: 5px; font-size: 12.5px; }
  .cat-vol { margin-top: 4px; font-size: 13px; }
  .cat-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
  }
  .cat-btn {
    flex: none;
    height: 42px;
    font-size: 13px;
    border-radius: 7px;
  }

  .cat-footer { display: none; }
  .cat-footer-m {
    display: block;
    padding: 44px 22px 30px;
    text-align: center;
    background:
      linear-gradient(180deg, rgba(250, 245, 241, .92) 0%, rgba(250, 245, 241, .72) 34%, rgba(250, 245, 241, .96) 100%),
      url('public/images/m/footer.webp') bottom center / cover;
  }
  .cat-footer-m-mark {
    font-family: 'Geometria', sans-serif;
    font-weight: 500;
    font-size: 28px;
    text-transform: uppercase;
    color: #313131;
  }
  .cat-footer-m-mail {
    display: inline-block;
    margin-top: 14px;
    font-size: 15px;
    color: #313131;
    text-decoration: none;
  }
  .cat-footer-m-shops {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 18px;
  }
  .cat-footer-m-shops a {
    font-family: 'Geometria', sans-serif;
    font-size: 14px;
    color: #313131;
    text-decoration: none;
  }
  .cat-footer-m-legal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 24px auto 0;
    max-width: 340px;
  }
  .cat-footer-m-legal a {
    color: #313131;
    font-family: 'Geometria', sans-serif;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .cat-footer-m-copy { margin-top: 22px; font-family: 'Geometria', sans-serif; font-size: 11.5px; color: #8a7a6e; }

  .product-dialog {
    width: min(430px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    border-radius: 12px;
  }

  .product-dialog-in {
    grid-template-columns: 1fr;
  }

  .product-dialog-media {
    min-height: 0;
    height: min(48dvh, 430px);
  }

  .product-dialog-copy {
    min-height: 260px;
    padding: 32px 24px 24px;
  }

  .product-dialog-kicker {
    font-size: 11px;
  }

  .product-dialog-title {
    margin-top: 10px;
    padding-right: 28px;
    font-size: 25px;
  }

  .product-dialog-type {
    margin-top: 14px;
    font-size: 15px;
  }

  .product-dialog-volume {
    margin-top: 6px;
    font-size: 15px;
  }

  .product-dialog-buy {
    height: 44px;
    margin-top: 22px;
  }

  @media (max-width: 359px) {
    .cat-header {
      padding: 14px 16px;
    }

    .cat-logo img {
      height: 32px;
    }

    .cat-nav {
      gap: 7px;
    }

    .cat-nav .nav-link {
      font-size: 12.5px;
    }

    .cat-main {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}