@font-face {
  font-family: "Cocomat Pro";
  font-display: block;
  src:
    url("../fonts/CocomatPro-Black.woff2") format("woff2"),
    url("../fonts/CocomatPro-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Cocomat Pro";
  font-display: block;
  src:
    url("../fonts/CocomatPro-Bold.woff2") format("woff2"),
    url("../fonts/CocomatPro-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Cocomat Pro";
  font-display: block;
  src:
    url("../fonts/CocomatPro-Heavy.woff2") format("woff2"),
    url("../fonts/CocomatPro-Heavy.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Cocomat Pro";
  font-display: block;
  src:
    url("../fonts/CocomatPro-Medium.woff2") format("woff2"),
    url("../fonts/CocomatPro-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Cocomat Pro";
  font-display: block;
  src:
    url("../fonts/CocomatPro-ExtraBold.woff2") format("woff2"),
    url("../fonts/CocomatPro-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat";
  font-display: block;
  src:
    url("../fonts/Montserrat-Regular-400.woff2") format("woff2"),
    url("../fonts/Montserrat-Regular-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* CRITICAL CSS - загружается инлайн */
.catalog-page,
.about-page,
.product-page {
  opacity: 0;
  visibility: hidden;
  min-height: 100vh;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.catalog-page.page-loaded,
.about-page.page-loaded,
.product-page.page-loaded {
  opacity: 1;
  visibility: visible;
}

body {
  font-family: "Cocomat Pro", sans-serif;
}

/* Предотвращение CLS (Cumulative Layout Shift) */
.production-img {
  aspect-ratio: 3 / 4;
  background-color: #ffffff;
  contain: layout style paint;
}

.production-img img {
  /* opacity: 0; */
  transition: opacity 0.3s ease;
  will-change: opacity;
}

.production-img img.loaded {
  opacity: 1;
}

.category-production-item {
  contain: layout style paint;
}

.swiper-wrapper,
.swiper-slide {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Плавная прокрутка */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 10px;
  }

  [id] {
    scroll-margin-top: 200px;
  }
}

/* Остальной ваш CSS оставляем как есть, но добавляем оптимизации */
*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
}

:root {
  /* ============ BREAKPOINTS ============ */
  --bp-xs: 375px;
  --bp-sm: 520px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
  --bp-xxxl: 1920px;

  /* ============ SPACING SCALE ============ */
  --space-base: 1rem;
  --space-2xs: clamp(0.125rem, 1vw, 0.25rem);
  --space-xs: clamp(0.25rem, 1.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1.5vw, 1rem);
  --space-md: clamp(0.75rem, 1.5vw, 1.5rem);
  --space-lg: clamp(1rem, 1.5vw, 2rem);
  --space-xl: clamp(1.5rem, 3.5vw, 3rem);
  --space-2xl: clamp(2rem, 3.6vw, 4rem);
  --space-3xl: clamp(3rem, 5vw, 6rem);
  --space-4xl: clamp(4rem, 7vw, 8rem);

  /* ============ GRID SYSTEM ============ */
  --grid-columns: 12;
  --grid-gap: var(--space-md);
  --grid-sides: var(--space-lg);

  /* Container widths */
  --container-sm: 100%;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1200px;
  --container-xxl: 1400px;
  --container-full: min(100% - var(--grid-sides) * 2, var(--container-xl));

  /* Main colors */
  --c-brand: #ffc601;
  --c-main-1: #364b61;
  --c-main-2: #365463;
  --c-bg: #233140;
  --c-second-1: #f2f2f2;
  --c-second-2: #d9d9d9;
  --c-second-3: #d1dbe0;
  --c-second-4: #95a8b1;
  --c-light: #00000026;
  --shadow-color: #0022334d;
  --border-radius: 13.6px;
  --border-radius-light: 4px;
}

/* HEADERS - с фолбек-шрифтом */
h1,
.h1 {
  font-size: clamp(40px, 2.2vw + 1.9844rem, 74px);
  font-family: "Cocomat Pro", sans-serif;
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--c-bg);
}

h2,
.h2 {
  font-size: clamp(25px, 1.165vw + 1.1019rem, 40px);
  font-family: "Cocomat Pro", sans-serif;
  font-weight: 600;
  color: var(--c-bg);
}

h3,
.h3 {
  font-size: clamp(18px, 0.777vw + 0.9429rem, 30px);
  font-family: "Cocomat Pro", sans-serif;
  font-weight: 600;
  color: var(--c-bg);
}

h4,
.h4 {
  font-size: clamp(16px, 0.906vw + 0.7875rem, 26px);
  font-family: "Cocomat Pro", sans-serif;
  font-weight: 600;
  color: var(--c-bg);
  line-height: 130%;
}

h5,
.h5 {
  font-family: "Cocomat Pro", sans-serif;
  font-weight: 600;
  color: var(--c-bg);
  font-size: 1.125rem;
}
/* Оптимизация изображений */
picture {
  display: block;
  line-height: 0;
  font-size: 0;
  width: 100%;
  height: 100%;
  contain: layout style paint;
}

/* Оптимизация анимаций */
.hero {
  will-change: transform, opacity;
}

/* Оптимизация Swiper */
.swiper-container {
  contain: layout style paint;
}