:root {
    --fs-xs: clamp(12px, 3vw, 14px);
    --fs-sm: clamp(12px, 3.4vw, 16px);
    --fs-md: clamp(14px, 4vw, 18px);
    --fs-md1: clamp(14px, 5vw, 24px);
    --fs-lg: clamp(22px, 7vw, 32px);
    --fs-lg1: clamp(22px, 8.5vw, 40px);
    --fs-xl: clamp(28px, 11vw, 50px);
    --fs-xl1: clamp(28px, 13vw, 60px);
    --fs-xxl: clamp(34px, 16vw, 70px);
    --space-xxs: clamp(4px, 2vw, 8px);
    --space-xs: clamp(8px, 4vw, 16px);
    --space-sm: clamp(12px, 5vw, 20px);
    --space-md: clamp(20px, 7vw, 32px);
    --space-lg: clamp(28px, 11vw, 48px);
    --space-xl: clamp(40px, 18vw, 80px);
    --space-xxl: clamp(60px, 35vw, 150px);
    --gap-xxs: clamp(4px, 2vw, 8px);
    --gap-xs: clamp(8px, 4vw, 16px);
    --gap-sm: clamp(12px, 5vw, 20px);
    --gap-md: clamp(16px, 7vw, 28px);
    --gap-lg: clamp(20px, 7vw, 32px);
    --radius-sm: clamp(6px, 3vw, 12px);
    --radius-md: clamp(10px, 5vw, 20px);
    --radius-lg: clamp(16px, 7vw, 28px);
    --btn-height: clamp(42px, 13vw, 58px);
    --btn-font: clamp(14px, 4.5vw, 18px);
    --img-xs: clamp(70px, 19vw, 90px);
    --img-sm: clamp(140px, 48vw, 220px);
    --img-md: clamp(200px, 68vw, 320px);
    --img-lg: clamp(260px, 92vw, 420px);
    --orange: #FDA80D;
    --dark: #363535;
    --light: #FCF5ED;
    --white: #fff;

    --font-main: "Gilroy", sans-serif;
    --font-script: "Atziluth", sans-serif;
}

/* ---------- Gilroy Light ---------- */
@font-face {
    font-family: "Gilroy";
    src: url("fonts/Gilroy-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* ---------- Gilroy ExtraBold ---------- */
@font-face {
    font-family: "Gilroy";
    src: url("fonts/Gilroy-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ---------- Atziluth Script ---------- */
@font-face {
    font-family: "Atziluth";
    src: url("fonts/Atziluth-Script.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =============== BASE ================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
      max-width: 100%;

  
}
html, body {
  overflow-x: hidden !important;
      scroll-behavior: auto !important;
          position: relative;
    max-width: 100%;
  
}

a {
    -webkit-touch-callout: none;
}
body.no-scroll {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}
body {
  font-family: "Gilroy", sans-serif;
  background: #F7F3EC; /* такой кремовый фон как в макете */
  color: #2B2B2B;
  
}
 
/* === CART MODAL (ТОЛЬКО ЭТО, НИЧЕГО НЕ МЕНЯТЬ) ========================== */

.cart-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.cart-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity .35s ease;
}

/* ОКНО МОДАЛКИ */
.cart-modal__window {
  position: absolute;
  top: 0;
  right: 0;
width: 90%;
    height: 75dvh;
  background: #F7EFE4;

  /* !!! убираем padding — переносим в body */
  padding: 0;

  display: flex;
  flex-direction: column;

  transform: translateX(110%);
  opacity: 0;

  transition:
    transform .35s ease,
    opacity .35s ease;
}

/* ПОКАЗАТЬ */

.cart-modal.active .cart-modal__window {
  transform: translateX(0);
  opacity: 1;
}
.cart-modal__body {
  padding: clamp(12px, 2.2vw, 20px);
  overflow-y: auto;
  flex: 1;
}
/* активное состояние */
.cart-modal.active {
  display: block;
}

.cart-modal.active .cart-modal__overlay {
  opacity: 1;
}

.cart-modal.active .cart-modal__window {
  transform: translateX(0);
  opacity: 1;
}
.cart-modal__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: clamp(30px, 12vw, 50px) 0;
    border-bottom: 1px solid #363535;
    position: relative;
}

.cart-modal__header{
  display: flex;
  justify-content: space-between;
  background: #363535;
  padding: clamp(12px, 2.2vw, 25px) clamp(12px, 2vw, 20px);
      color: #fff;
          align-items: center;
}
.cart-modal__close{
  background: none;
  border: 0;
}

.cart-item__img {
    position: relative;
    width: clamp(80px, 25vw, 110px);
    flex-shrink: 0;
}

.cart-item__img img {
    width: 100%;
    height: auto;
    z-index: 2;
    position: relative;
}

/* декоративная линия как в макете */
.decor-1 {
    position: absolute;
    content: url(img/Vector.svg);
     left: -10px;
    top: -20px;
     z-index: 1;
     width: clamp(100px, 13vw, 180px);
}

.cart-item__info {
    flex: 1;
    padding-left: clamp(16px, 4vw, 40px);
}

.cart-item__title {
font-size: clamp(16px, 1.6vw, 20px);
 font-weight: 600;
line-height: 100%; 
letter-spacing: -1px;
color: #363535;
}

.cart-item__title span {
    font-size: 14px;
    color: #1E1E1E;
}

.cart-item__prices {
    margin-top: clamp(12px, 1.1vw, 14px);
    font-size: clamp(12px, 1.1vw, 14px);
    display: flex;
    align-items: center;
    gap: 18px;
}

.cart-item__prices .old {
    color: #807e7e;
    text-decoration: line-through;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 400;
line-height: 100%; /* 20px */
letter-spacing: -1px;
}

.cart-item__prices .new {
    color: #F6A623;
    font-size: clamp(18px, 2.2vw, 30px);
    font-weight: 600;
    line-height: 100%; /* 30px */
letter-spacing: -1px;
}

.cart-item__controls {
    margin-top: 14px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 6px 12px;
    width: fit-content;
    box-shadow: 0 0 0 1px #ddd;
}

.cart-item__controls button {
    background: none;
    border: none;
    font-size: 20px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    color: #000 !important;
}

.cart-item__controls .qty {
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;   
}

.cart-item__remove {
    width: 40px;
    margin-left: 20px;
    cursor: pointer;
}

.cart-item__remove img {
    width: 20px;
}

.cart-modal__footer {
    padding: 20px 20px 40px;
    display: flex;
    flex-direction: column;
}

.cart-modal__sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
padding: 16px 0;
    font-size: 20px;
    line-height: 1;
}

.cart-modal__sum-value {
  display: flex;
  align-items: center;
  gap: 4px; /* расстояние между числом и MDL */
}

.cart-modal__checkout {
    display: inline-flex;
    padding: clamp(16px, 6.2vw, 24px) clamp(20px, 7vw, 30px);
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #FEFDFD;
    font-family: Gilroy;
    font-size: clamp(12px, 4vw, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    text-transform: uppercase;
    border-radius: 100px;
    background: #FDA80D;
    border: none;
    transition: 
ease-in .2s, 
ease-out .2s;
}
.cart-modal__checkout:hover {
  transform: translateY(-2px);
}
.header {
  width: 100%;
  padding: var(--space-md) 16px var(--space-xxs);
  background: #F7F3EC;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  width: clamp(70px, 20vw, 120px);
  height: auto;
}

.header__burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xxs);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
  font-family: "Gilroy";
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #2B2B2B;
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase;
}

/* ========== MOBILE MENU RIGHT SIDE ========== */

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;           /* твой размер */
  background: #2C2C2C;
  color: white;
  transform: translateX(110vw);  /* спрятано */
  transition: 0.35s ease;
  z-index: 2000;
  display: flex;
  justify-content: flex-start;

  /* срезанный угол справа снизу */
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
}

.mobile-menu.active {
  transform: translateX(0); /* выезд */
}

.mobile-menu__inner {
  padding: var(--space-md) var(--space-xs);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.mobile-menu__logo {
  width: clamp(70px, 22vw, 120px);
  margin-bottom: var(--space-lg);
}

/* Кнопка закрытия меню */
.mobile-menu__close {
  position: relative;
  color: #000;
  cursor: pointer;
  background: none;
  border: none;
}

/* Навигация */
.mobile-menu__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  font-size: var(--fs-lg);
  font-weight: 300;
  margin-bottom: var(--space-lg);
}

.mobile-menu__nav a {
  text-decoration: none;
  color: white;
  font-family: "Gilroy";
}

/* Email */
.mobile-menu__mail {
  font-size: var(--fs-sm);
  color: white;
  opacity: 0.8;
  margin-bottom: var(--space-lg);
  text-decoration: none;
}

/* CTA button */
.mobile-menu__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-xs);
  text-align: center;
  padding: var(--space-xs) var(--space-md);
  background: white;
  color: #363535;
  border-radius: 100px;
  font-weight: 600;
  font-size: var(--fs-md);
  text-decoration: none;
  text-transform: uppercase;
}
.mobile-menu__btn:hover {
  transform: translateY(-2px);
  background: #FCF5ED;
}
.mobile-menu-flex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.header__burger img {
    width: clamp(24px, 9vw, 40px);
    height: auto;
}

/* =============== HERO SECTION ================ */

.hero {
  position: relative;
  padding: var(--space-xxl) 16px var(--space-xxl); 
  background: #F7F3EC;
  text-align: center;
  overflow: hidden;
}

/* Заголовок (Gilroy) */
.hero__title {
  font-size: var(--fs-xl);
  line-height: 1;
  font-weight: 400;
  color: #363535;
  margin-bottom: var(--space-xl);
  letter-spacing: -2px;
      z-index: 1;
    position: relative;
}
.q-typed span.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(25px);
  filter: blur(6px);

  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.q-typed span.word.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity .8s cubic-bezier(0.22, 1, 0.36, 1),
    transform .8s cubic-bezier(0.22, 1, 0.36, 1),
    filter .6s ease-out;
}
/* Слова курсивом (Atziluth) */
.hero__title .italic {
  font-family: "Atziluth";
  font-weight: 500;
  font-size: var(--fs-xxl);
    letter-spacing: -2px;
    line-height: 90%;
    }

/* Картинка коробки */
.hero__img img {
  width: var(--img-md);
  max-width: 100%;
  display: block;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  transition: transform 0.6s ease-out, filter .8s ease;
  

}
.reveal-box {
  opacity: 0;
  transform: translateY(-40px);
  filter: blur(12px);
  transition:
    opacity .9s ease,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter .8s ease;
}

.reveal-box.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hero__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Общие стили */
.hero__lines .line {
  position: absolute;
  max-width: 100%;
  height: auto;
}

/* Левая фигура */
.hero__lines .line-1 {
  top: 0;
  left: 5%;
 }

/* Правая фигура */
.hero__lines .line-2 {
  bottom: 20%;
  right: 0;
 }

 /* ======================== TEASER BLOCK ======================== */

.teaser {
    padding: 0 0 var(--space-xl);
    background: #F7F3EC;
    text-align: center;
    max-width: 460px;
    margin: 0 auto;
}
.teaser__flex{
  padding: 0 16px 0;
  display: flex;
  margin-bottom: 65px;

}
/* Маленький текст */
.teaser__small {
    font-size: var(--fs-sm);
    color: #2B2B2B;
    font-weight: 400;
    text-align: right;
    line-height: 1;
    max-width: clamp(120px, 43vw, 200px);
}

/* Большая цитата */
.teaser__title {
  font-size: var(--fs-lg1);
  font-weight: 400;
  margin-top: 50px;
  color: #2B2B2B;
  font-family: "Gilroy";
  text-align: left;
  letter-spacing: -2px;
  line-height: 1;
}

.teaser__title .italic {
  font-family: "Atziluth";
  font-size: var(--fs-xl);
}

/* Обёртка для изображения */
.teaser__video {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Фото */
.teaser__img {
  width: 100%;
  border-radius: 0 0 0 0;
  display: block;

  /* Нижний срезанный угол */
  clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 0 100%);
}

/* Кнопка Play */
.teaser__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(48px, 14vw, 80px);
  height: clamp(48px, 14vw, 80px);
  background: none;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.25s;
}

.teaser__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
/* Модальное окно */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 40px;
  backdrop-filter: blur(6px);
}

.video-modal.active {
  display: flex;
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Контейнер */
.video-modal__content {
  position: relative;
  width: 90%;
  max-width: 1000px;
}

/* iframe должен быть responsive 16/9 */
.video-modal__iframe-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.video-modal__iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/* Кнопка закрытия */
.video-modal__close {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: 0.2s;
}

.video-modal__close:hover {
  transform: scale(1.15);
}

/* ГЛАВНАЯ СЕКЦИЯ */
.hooks {
  background: #F8F3EB;
  padding: 40px 20px 60px;
}

/* Каждый отдельный блок */
.hook {
  position: relative;
  margin-bottom: 70px; /* расстояние между блоками */
}

/* Внутренний контейнер для каждого hook */
.hook__container {
  max-width: 460px;
  margin: 0 auto;
  position: relative;
}

/* ТЕКСТ */
.hook__title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 32px;
}

.hook__title {
    font-size: var(--fs-lg1);
    font-weight: 400;
    line-height: 1;
    color: #1E1E1E;
    letter-spacing: -2px;
}

.hook__title .italic {
    font-family: "Atziluth", sans-serif;
    font-size: 60px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -2px;
}

.hook__num {
    font-size: var(--fs-sm);
    color: #5D5D5D;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -2px;
}

.hook__text {
    font-size: var(--fs-sm);
    line-height: 1;
    color: #3A3A3A;
    margin-bottom: 50px;
    display: flex;
    text-align: right;
    align-items: flex-start;
    justify-content: center;
}
.hook__text--first{
text-align: right;
}
.hook__text--second{
text-align: left;
margin-top: 50px;
max-width: clamp(120px, 58vw, 250px);
}

.hook__text--reverse {
    font-size: var(--fs-sm);
    line-height: 1;
    color: #3A3A3A;
    margin-bottom: 50px;
    margin-top: 60px;
    display: flex;
    text-align: right;
}

.hook__text--reverse--first {
text-align: right;
margin-top: 50px;
max-width: clamp(120px, 58vw, 250px);

}

.hook__text--reverse--second {
text-align: left;

}

/* =============== ЛИНИИ =============== */

.hook__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Общие правила */
.hook__line {
  position: absolute;
}

/* Линия 1 (верхняя) */
.hook__line--1 {
  top: 0;
  left: 75%;
  transform: translateX(-50%);
}

/* Линия 2 (нижняя) */
.hook__line--2 {
  top: 35%;
  left: 40%;
  transform: translateX(-50%);
}
/* Линия 1 (верхняя) */
.hook__line--3 {
top: 13%;
    left: 27%;
  transform: translateX(-50%);
}

/* Линия 2 (нижняя) */
.hook__line--4 {
top: 75%;
    left: 70%;
  transform: translateX(-50%);
}
/* Линия 1 (верхняя) */
.hook__line--5 {
top: 20%;
    left: 32%;
  transform: translateX(-50%);
}

/* Линия 2 (нижняя) */
.hook__line--6 {
top: 85%;
    left: 75%;
  transform: translateX(-50%);
}

/* =============== ФОТО =============== */

.hook__images {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  height: 400px; /* адаптивную высоту можно менять */
  z-index: 2;
}
.fade-img {
  opacity: 0;
  transform: translateY(35px);
  filter: blur(12px);
  transition:
    opacity .8s ease-out,
    transform .8s cubic-bezier(0.22, 1, 0.36, 1),
    filter .6s ease-out;
}

.fade-img.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.hook__img-wrap {
  position: absolute;
}

.hook__img-wrap img {
  height: auto;
  display: block;
 }

/* Верхнее фото — слева */
.hook__img-wrap--1 {
  left: 0;
  top: 0;
  z-index: 3;
}

/* Нижнее фото — справа */
.hook__img-wrap--2 {
  right: 0;
  top: 150px;
  z-index: 2;
}
/* Верхнее фото — слева */
.hook__img-wrap--3 {
  left: 0;
  top: 30%;
  z-index: 3;
}

/* Нижнее фото — справа */
.hook__img-wrap--4 {
  right: 0;
  top: 0;
  z-index: 2;
}
/* Верхнее фото — слева */
.hook__img-wrap--5 {
  left: 0;
  top: 30%;
  z-index: 3;
}

/* Нижнее фото — справа */
.hook__img-wrap--6 {
  right: 0;
  top: 0;
  z-index: 2;
}
/* Верхнее фото — слева */
.hook__img-wrap--7 {
  left: 0;
  top: 30%;
  z-index: 3;
}

/* Нижнее фото — справа */
.hook__img-wrap--8 {
  right: 0;
  top: 0;
  z-index: 2;
}

.catalog {
  background: var(--light);
  position: relative;
}
.catalog__offer{
      display: flex;
        padding: 50px 16px 200px;
    background: var(--orange);
}
.catalog__offer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 50px solid var(--light);
  border-right: 60px solid transparent;
  width: 0;
  height: 0;
}

/* ---------------- ОФФЕР ---------------- */

.offer {
  background: var(--orange);
  padding: 50px 24px 80px;
  position: relative;
  overflow: hidden;
}

.offer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 50px solid var(--light);
  border-right: 60px solid transparent;
  width: 0;
  height: 0;
}

.offer__inner h2 {
  font-size: var(--fs-lg1);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--white);
}

.offer__inner .italic {
  font-family: var(--font-script);
  font-size: var(--fs-xl1);
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1;
}

.offer__flex {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 35px;
  justify-content: center;
  gap: 20px;
}

.offer__subtitle {
  margin-top: -10px;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--white);
}

.offer__text {
  margin-top: 20px;
  font-size: var(--fs-sm);
  color: var(--white);
  line-height: 1;
  text-align: right;
}

/* ---------------- КАРТОЧКИ ---------------- */

.sets {
  padding: 0 20px 40px;
}

.set-card {
    position: relative;
    background: var(--dark);
    padding: 90px 16px 200px;
    color: var(--white);
    
}

/* наезд */
.set-card.dark {
  z-index: 2;
  margin-top: -170px;
}
.set-card.orange {
  z-index: 2;
  background: var(--orange);
  margin-top: -170px;
}
.set-card.dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 50px solid var(--orange);
  border-right: 60px solid transparent;
  width: 0;
  height: 0;
}
.set-card.orange::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 50px solid var(--dark);
  border-right: 60px solid transparent;
  width: 0;
  height: 0;
}

.set-card h3 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
}


/* Товар */

.set-card__product {
    position: relative;
    margin: 50px 95px 0px 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.set-card__product.orange {
    position: relative;
    margin: 16px 95px 0px 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.set-card__main {
  display: block;
  z-index: 6;
  width: var(--img-md);
}

.set-card__thumbs {
    position: absolute;
    right: -95px;
    top: -85px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: flex-end;
    z-index: 5;
}
.set-card__thumbs.orange {
    position: absolute;
    right: -95px;
    top: -60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: flex-end;
    z-index: 5;
}

.set-card__thumbs img {
  width: var(--img-xs);
  border-radius: 10px;
  background: #fff;
}
.thumbs-list {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto; /* ← даем возможность нормально тянуть */
  gap: 10px;

  scrollbar-width: none;       /* Firefox hide scrollbar */
}

.thumbs-list::-webkit-scrollbar {
  display: none;               /* Chrome hide scrollbar */
}

.thumb {
  width: 70px;
  border-radius: 10px;
  opacity: 0.4;          /* по умолчанию затемнение */
  transition: 0.25s ease;
}

.thumb.active {
  opacity: 1;
}

.thumbs-arrow {
    width: 14px;
    height: 14px;
    background: transparent;
    border: none;
    position: relative;
    right: 40%;
}

/* Счётчик */

.counter {
    position: absolute;
    top: 0px;
    left: -40px;
    display: flex;
    align-items: center;
    gap: 32px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    padding: 16px;
    border-radius: 40px;
    z-index: 9;
}

.counter {
    position: absolute;
    top: 0px;
    left: -50px;
    display: flex;
    align-items: center;
    gap: 32px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    padding: 16px;
    border-radius: 40px;
}
.counter.orange {
    position: absolute;
    top: 40px;
    left: -50px;
    display: flex;
    align-items: center;
    gap: 32px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    padding: 16px;
    border-radius: 40px;
}

/* кнопки */
.counter__btn {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* svg внутри кнопок */
.counter__btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none; /* чтобы SVG не блокировал click */
}

/* чиселко */
.counter span {
  font-size: 24px;
  color: #fff;
  font-weight: 600;
line-height: 1;
}
.counter__value {
  font-size: 18px;
  color: #fff;
}

/* Цена */

.set-card__price  {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
    flex-direction: column;
}
.set-card__price--second{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
    flex-direction: column;
}

.set-card__price .current {
    font-weight: 600;
    font-size: 40px;
    color: var(--orange);
    letter-spacing: -1px;
    line-height: 1;
}
.set-card__price--second .current  {
    font-weight: 600;
    font-size: 40px;
    color: var(--dark);
    letter-spacing: -1px;
    line-height: 1;
}

.set-card__price .old {
  font-size: 16px;
  color: #FEFDFD;
  text-decoration: line-through;
  font-weight: 400;
line-height: 1; 
letter-spacing: -1px;
display: flex;
}
.set-card__price--second .old {
  font-size: 16px;
  color: #FEFDFD;
  text-decoration: line-through;
  font-weight: 400;
line-height: 1; 
letter-spacing: -1px;
display: flex;
}
/* Кнопка */

.set-card__btn {
    width: 100%;
    padding: 16px 0;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    background: var(--white);
    border-radius: 100px;
    border: none;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    transition: transform 0.3s ease;
    font-family: Gilroy;
    color: #000;
}

.set-card__btn:hover{
  transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.advantages {
    background: var(--dark);
    padding: 70px 16px;
     position: relative;
    z-index: 2;
    margin-top: -170px
 }

/* верхний угол (как на оранжевом блоке) */
.advantages::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 50px solid var(--orange);
  border-right: 60px solid transparent;
  width: 0;
  height: 0;
}

.advantages::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 50px solid var(--light);
  border-left: 60px solid transparent;
  width: 0;
  height: 0;
}

.advantages h2 {
  color: white;
  font-size: var(--fs-lg1);
  line-height: 1;
  margin-bottom: 50px;
    letter-spacing: -2px;
    font-weight: 400;

}

.advantages .italic {
  font-family: var(--font-script);
  font-size: var(--fs-xl1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -2px;
}

/* ====== ГРИД ====== */

.advantages__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}

/* Карточка */
.adv {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Фото */
.adv__img {
  width: 100%;
  object-fit: cover;
}


/* 2-я карточка */
.adv:nth-child(2) .adv__img, .adv:nth-child(3) .adv__img {
width: 170px;
}



/* Текст */
.adv__text h4 {
    color: #fff;
    font-size: var(--fs-md1);
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1;
    letter-spacing: -1px;
}

.adv__text p {
  color: #FEFDFD;
font-size: var(--fs-sm);
font-weight: 400;
line-height: 1.1;
}

.adv:nth-child(1),
.adv:nth-child(3) {
  margin-top: 150px;
}


.reviews {
    background: #F8F3EB;
    padding: 60px 16px 100px 16px;
}

.reviews__header {
  max-width: 700px;
  margin-bottom: 50px;
  display: flex;
    align-items: flex-start;
    flex-direction: row;
}

.reviews__small {
  font-size: 16px;
  color: #3A3A3A;
  line-height: 1;
  text-align: right;
}

.reviews__title {
    font-size: var(--fs-lg1);
    font-weight: 400;
    line-height: 1;
    margin-top: 60px;
    color: #1E1E1E;
}

.reviews__title .italic {
  font-family: "Atziluth";
  font-size: var(--fs-xl1);
  font-weight: 500;
  letter-spacing: -1px;
}

.reviews__scroll {
  margin-top: 40px;
  display: flex;
  gap: 40px;

  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 20px;
  overscroll-behavior-x: contain;

  scrollbar-width: none;
}

.reviews__scroll::-webkit-scrollbar {
  display: none;
}

.review {
  min-width: 260px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review__img {
  width: 95px;
 
}

.review__name {
  font-size: var(--fs-sm);
  line-height: 1;
}

.review__text {
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: -1px;
  margin-top: var(--fs-sm);
}

.faq {
  background: #F8F3EB;
  padding: 40px 20px 120px;
}

.faq__title {
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 50px;
    letter-spacing: -2px;
}

.faq__title .italic {
    font-family: "Atziluth", cursive;
    font-size: 60px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -2px;
}

.faq__item {
  border-bottom: 1px solid #d8d8d8;
  padding: 18px 0;
}
/* КОГДА ОТКРЫТ — ВСЁ ВОЗВРАЩАЕТСЯ К ТЁМНОМУ */
.faq__item.active .faq__question,
.faq__item.active .faq__question span,
.faq__item.active .faq__question svg path {
  color: #363535 !important;
  stroke: #363535 !important;
}

/* ПРИ НАВЕДЕНИИ — СТАНОВИТСЯ СВЕТЛЕЕ */
.faq__item:hover .faq__question,
.faq__item:hover .faq__question span,
.faq__item:hover .faq__question svg path {
  color: #CFCFCF;
  stroke: #CFCFCF;
}
/* КОГДА ОТКРЫТ — ВСЁ ВОЗВРАЩАЕТСЯ К ТЁМНОМУ */
.faq__item.active .faq__question,
.faq__item.active .faq__question span,
.faq__item.active .faq__question svg path {
  color: #363535 !important;
  stroke: #363535 !important;
}

.faq__question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 0;

  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

.faq__question:hover {
  opacity: 1;
}

.faq__num {
  font-size: 16px;
  color: #363535;
}

.faq__text {
  flex: 1;
  text-align: left;
  font-size: 16px;
  color: #363535;
  font-family: Gilroy;
}

.faq__icon {
  width: 20px;
  height: 20px;
  position: relative;
}

.faq__icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .25s ease, transform .25s ease;
}

/* Изначально показываем + */
.faq__icon .plus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Минус скрыт */
.faq__icon .minus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-20deg);
}

/* Когда пункт открыт */
.faq__item.active .faq__icon .plus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(20deg);
}

.faq__item.active .faq__icon .minus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
  font-size: 16px;
  color: #363535;
  line-height: 1;
  letter-spacing: -1px;
  font-weight: 500;
  height: 0;
  overflow: hidden;

  transition: height 0.35s ease;
  padding-right: 40px;
  padding-left: 60px;
}

.faq__item.active .faq__answer {
  padding-top: 32px;
}


.gallery-scroll {
    display: flex;
    justify-content: center;
    position: relative;
    height: clamp(750px, 250vw, 1050px);
    overflow: hidden;
}

.gallery-layer {
  position: relative;
  width: 460px;     /* фиксируем “песочницу” */
  height: 100%;
}

/* ВСЕ ФОТО ПОЛНОСТЬЮ ПОД КОНТРОЛЕМ GSAP */
.gallery-layer img {
  position: absolute;
  will-change: transform, opacity, filter;
}

/* ==== ФИНАЛЬНЫЕ ПОЗИЦИИ ==== */
/* ты дашь мне координаты из макета — и я выставлю точно */

.g1  { top: 0px;   left: clamp(6px, 4vw, 16px);   width: clamp(110px, 37vw, 170px); }
.g2  { top: 32px;  left: clamp(80px, 47vw, 220px); width: clamp(150px, 50vw, 225px); }
.g3  { top: 150px; left: clamp(55px, 29vw, 135px);  width: clamp(140px, 43vw, 210px); z-index: 10; }
.g4  { top: 270px; left: clamp(35px, 16vw, 85px);   width: clamp(70px, 23vw, 110px);  z-index: 11; }
.g5  { top: 425px; left: clamp(10px, 4vw, 25px);   width: clamp(110px, 36vw, 170px); z-index: 14; }
.g6  { top: 395px; left: clamp(40px, 21vw, 100px);  width: clamp(170px, 55vw, 260px); z-index: 13; }
.g7  { top: 270px; left: clamp(100px, 59vw, 275px); width: clamp(110px, 36vw, 170px); z-index: 12; }
.g8  { top: 630px; left: clamp(40px, 23vw, 110px);  width: clamp(85px, 28vw, 130px);  z-index: 14; }
.g9  { top: 515px; left: clamp(120px, 68vw, 315px); width: clamp(85px, 28vw, 130px);  z-index: 14; }
.g10 { top: 840px; left: clamp(6px, 4vw, 16px);     width: clamp(170px, 53vw, 260px); z-index: 16; }
.g11 { top: 710px; left: clamp(70px, 39vw, 185px);  width: clamp(170px, 56vw, 260px); z-index: 15; }






.footer {
background: #3A3A3A;
    padding: 32px 0;
    color: #E6E6E6;
    font-family: var(--font-main);
  margin-top: 100px;
}
.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
}

.footer__email {
font-size: 16px;
    margin-bottom: 16px;
}

.footer__bottom {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 16px;
    line-height: 1;
}

.footer__bottom p {
  margin: 0;
  white-space: nowrap;
}
.bg-reveal {
  will-change: transform, opacity, filter;
  transform-origin: right bottom;
}
.hooks-desktop,.catalog-desktop{display: none;}

.mobile-floating-btn {
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        justify-content: center;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        max-width: 100%;
        padding: 24px 0;
        background: #363535;
        color: #FEFDFD;
        border-radius: 40px;
        line-height: 1;
        font-size: 18px;
        font-weight: 600;
        z-index: 9999;
        transition: opacity .45s 
ease, transform .45s 
ease, background .45s 
ease, color .45s 
ease;
        opacity: 1;
    }

  .mobile-floating-btn.merge {
    opacity: 0;
    transform: translateX(-50%) translateY(40px) scale(0.85);
    background: transparent;
    color: transparent;
    pointer-events: none;
  }
@media (min-width: 760px)  {
.hooks-desktop, .catalog-desktop{display: none;}
  .header {
    padding: 40px 20px 0;
}
.mobile-menu__inner {
    padding:40px;
}
.mobile-menu {
    width: 460px;
}
.cart-modal__window {
        width: clamp(500px, 52vw, 390px);
        height: clamp(550px, 87vh, 740px);
    }
  .cart-item__img {
    position: relative;
    width: clamp(80px, 15vw, 110px);
    flex-shrink: 0;
}
.cart-modal__checkout {
    padding: clamp(16px, 3.5vw, 24px) clamp(20px, 8vw, 40px);
    font-size: clamp(12px, 2.4vw, 16px);
}
.cart-modal__sum {
    font-size: 18px;
}
.cart-modal__item {
    padding: clamp(30px, 10vw, 70px) 0;
}
  /* Hero блок */
  .hero {
    text-align: center;
    padding: 120px 20px 180px;
  }

  .hero__title {
    font-size: 70px;
  }
   .hero__title .italic{
    font-size: 100px;
  }

  .hero__text {
    font-size: 18px;
    max-width: 480px;
    margin-inline: auto;
  }
.hero__img img {
    width: clamp(200px, 46vw, 350px);
}
.hero__lines .line-1 {
    top: clamp(60px, calc(40px + 7vw), 90px);
    left: clamp(80px, calc(20px + 17vw), 150px);
}
.hero__lines .line-2 {
    bottom: clamp(100px, calc(40px + 18vw), 180px);
    right: clamp(80px, calc(10px + 18vw), 150px);
}
.teaser {
    max-width: clamp(460px, 100vw, 760px);
}
.teaser__img {
    content: url("img/3d.png");
    clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 100%, 0 100%);
  }
    .teaser__flex {
        padding: 0 20px 0;
        display: flex;
        margin-bottom: 80px;
        justify-content: flex-end;
        align-items: flex-start;
    }
.teaser__title {

    max-width: clamp(260px, 60vw, 370px);
    font-size: clamp(32px, 8vw, 65px);
}
.teaser__title .italic, .hook__title .italic, .offer__inner .italic, .reviews__title .italic,.faq__title .italic, .advantages .italic {
    font-size: clamp(32px, 12vw, 85px);
}
.hooks {
    background: #F8F3EB;
    padding: 80px 20px 0px;
}
.hook__container {
    max-width: clamp(460px, 100vw, 760px);
    margin: 0 auto;
    position: relative;
}
.hook__images {
    max-width: none;
    margin: 0 auto;

}
.hook__title, .offer__inner h2,.reviews__title, .faq__title, .advantages h2{
    font-size: clamp(32px, 9vw, 65px);

}
.hook__text--first {
    text-align: right;
    max-width: clamp(200px, 34vw, 250px);
}
.hook__img-wrap img {
height: clamp(220px, 49vw, 370px);
}
.hook__line--1 {
    top: 10%;
 
}
.hook__line--2 {
    top: 45%;
    left: 55%;
}
.hook__line--3 {
    top: 20%;
    left: 35%;
 }

 .hook__img-wrap--1 img {
    content: url("img/41.png");
  }

  .hook__img-wrap--2 img {
    content: url("img/51.png");
  }
    .hook__img-wrap--3 img {
    content: url("img/61.png");
  }
    .hook__img-wrap--4 img {
    content: url("img/71.png");
  }
      .hook__img-wrap--5 img {
    content: url("img/81.png");
  }
 .hook__img-wrap--6 img {
    height: clamp(150px, 30vw, 230px);
        content: url("img/91.png");
}
 .hook__img-wrap--7 img {
    height: clamp(150px, 39vw, 290px);
        content: url("img/rr1.png");

}
 .hook__img-wrap--8 img {
    height: clamp(150px, 62vw, 470px);
        content: url("img/111.png");

}
.hook__text--reverse {
    justify-content: center;
    margin-bottom: 40px;
    margin-top: 40px;
}
.catalog {
    margin-top: clamp(80px, 20vw, 150px);
}
.catalog__offer {
    padding: 80px 20px 250px;
}

.set-card {
    padding: 80px 140px 200px;
}
.offer__flex {
    margin-top: 40px;
    justify-content: flex-end;
    gap: 0;
}
.set-card h3, .set-card__price .current, .set-card__price--second .current {
    font-size: clamp(40px, 7vw, 50px);

}
.set-card__main {
    width: clamp(200px, 68vw, 350px);
}
.set-card__product {
    margin: 35px 100px 0px 0px;
}
.set-card__product.orange {
    margin: 20px 100px 0px 0px;
}
.set-card.orange, .advantages {
    margin-top: -140px;
}

.advantages__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: 20px 16px;
}

.advantages__grid > div:nth-child(1) { grid-column: 1 / span 2; }
.advantages__grid > div:nth-child(2) { grid-column: 4 / span 3; }
.advantages__grid > div:nth-child(3) { grid-column: 1 / span 3; } /* или 4 в зависимости от структуры */
.advantages__grid > div:nth-child(4) { grid-column: 5 / span 2;}

.adv:nth-child(1) .adv__img{
  content: url("img/a21.png");
}
.adv:nth-child(2) .adv__img{
  content: url("img/a12.png");
  width: 230px;
}
.adv:nth-child(3) .adv__img{
  content: url("img/a43.png");
  width: 350px;
}
.adv:nth-child(4) .adv__img{
  content: url("img/a34.png"); 
}
.advantages {
    padding: 80px 20px;
}
.reviews {
    background: #F8F3EB;
    padding: 130px 20px 100px 20px;
}
.reviews__header {
    margin-bottom: 80px;
}
.gallery-scroll {
        display: flex;
        justify-content: center;
        position: relative;
        height: clamp(750px, 160vw, 1220px);
        overflow: hidden;
    }
    .gallery-layer {
  position: relative;
  width: 760px;     /* фиксируем “песочницу” */
  height: 100%;
}
.g1  { top: 0px;   left: clamp(6px, 4vw, 16px);   width: clamp(110px, 37vw, 230px); }
.g2  { top: 30px;left: clamp(80px, 52vw, 400px);width: clamp(150px, 47vw, 350px); }
.g3  { top: 190px;left: clamp(55px, 44vw, 270px);width: clamp(140px, 31vw, 230px);z-index: 10; }
.g4  { top: 260px;left: clamp(35px, 10vw, 70px);width: clamp(70px, 23vw, 120px);z-index: 11; }
.g5  { top: 390px;left: clamp(10px, 4vw, 25px);width: clamp(110px, 46vw, 350px);z-index: 14;} 
.g6  { top: 560px;left: clamp(40px, 45vw, 340px);width: clamp(170px, 30vw, 220px);z-index: 13; }
.g7  { top: 425px;left: clamp(100px, 68vw, 515px);width: clamp(110px, 31vw, 230px);z-index: 12; }
.g8  { top: 720px;left: clamp(40px, 23vw, 145px);width: clamp(85px, 28vw, 130px);z-index: 14; }
.g9  { top: 730px;left: clamp(120px, 68vw, 515px);width: clamp(85px, 31vw, 230px);z-index: 14;}
.g10 { top: 890px;left: clamp(6px, 4vw, 25px);width: clamp(170px, 31vw, 230px);z-index: 16; }
.g11 { top: 890px;left: clamp(70px, 39vw, 295px);width: clamp(170px, 46vw, 350px); z-index: 15;}

.footer {
    padding: 40px 0;
}

.footer__bottom {
    gap: 85px;
}
.footer__email {
    font-size: 16px;
    margin-bottom: 40px;
}

    .mobile-floating-btn {
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        justify-content: center;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        max-width: 100%;
        padding: 24px 0;
        background: #363535;
        color: #FEFDFD;
        border-radius: 40px;
        line-height: 1;
        font-size: 18px;
        font-weight: 600;
        z-index: 9999;
        transition: opacity .45s 
ease, transform .45s 
ease, background .45s 
ease, color .45s 
ease;
        opacity: 1;
    }

  .mobile-floating-btn.merge {
    opacity: 0;
    transform: translateX(-50%) translateY(40px) scale(0.85);
    background: transparent;
    color: transparent;
    pointer-events: none;
  }
}

@media (min-width: 1440px) {
.mobile-floating-btn {
  display: none; /* по умолчанию скрыта на всех устройствах */
}

.header {
    padding: 40px 30px 0;
}
.header__logo {
    width: clamp(70px, 10vw, 140px);
    height: auto;
}
.mobile-menu__inner {
        padding: 70px;
    }
    .mobile-menu {
        width: 700px;
    }

    .hero {
        text-align: center;
        padding: 60px 90px 250px;
    }

  .hero__title, .advantages h2, .reviews__title,.faq__title {
    font-size: clamp(70px, 10vw, 150px);
  }
    .hero__title .italic {
        font-size: clamp(70px, 14vw, 200px);
    }

  .hero__text {
    font-size: 18px;
    max-width: 480px;
    margin-inline: auto;
  }
    .hero__img img {
        width: clamp(200px, 39vw, 550px);
    }
    .hero__lines .line-1 {
        top: clamp(60px, calc(41px + 44vw), 400px);
        left: clamp(80px, calc(20px + 17vw), 191px);
        width: 330px;
    }
.hero__lines .line-2 {
        bottom: clamp(100px, calc(40px + 40vw), 485px);
        right: clamp(80px, calc(10px + 18vw), 260px);
        width: 330px;
    }
    .teaser {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .teaser__small {
    font-size: 20px;
}
.teaser__img {
    content: url("img/3c.png");
    clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 100%, 0 100%);
  }
    .teaser__flex {
        padding: 0 70px 0;
        display: flex;
        margin-bottom: 100px;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .teaser__title {
        max-width: clamp(260px, 60vw, 700px);
        font-size: clamp(32px, 10vw, 120px);
    }
.teaser__title .italic,.advantages .italic,.faq__title .italic,.reviews__title .italic, .hook__title .italic, .offer__inner .italic, .reviews__title .italic,.faq__title .italic, .advantages .italic {
    font-size: clamp(32px, 12vw, 160px);
}
.hooks { display: none; }
.hooks-desktop {
  display: block;
  overflow: hidden;
  padding: 100px 0;
}

.hooks-desktop__wrapper {
  display: flex;
  gap: 140px;
  height: 100vh;
  align-items: center;
}

.hook-d {
  flex: 0 0 90vw;
  display: flex;
  align-items: center;
  position: relative;
}

.hook-d__content {
  max-width: 900px;
  margin-left: 30px;
}
.hook-d__content--1{
  max-width: none;
  margin-left: 0;
}

.hook-d__title-block {
  position: relative;
  margin-bottom: 40px;
}

.hook-d__title {
color: #363535;
font-family: Gilroy;
font-size: 120px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 120px */
letter-spacing: -2px;
}

.hook-d__title .italic {
color: #363535;
font-family: Atziluth;
font-size: 160px;
font-style: normal;
font-weight: 500;
letter-spacing: -2px;
}

    .hook-d__num {
        position: absolute;
        top: 0%;
        left: 60%;
        font-size: 20px;
    }
        .hook-d__num--2 {
        position: absolute;
        top: 0%;
        left: 75%;
        font-size: 20px;}
        .hook-d__num--3 {
        position: absolute;
        top: 0%;
        left: 70%;
        font-size: 20px;}
                .hook-d__num--4 {
        position: absolute;
        top: 0%;
        left: 55%;
        font-size: 20px;}
.hook-d__rows {
        display: flex;
        flex-direction: row;
        gap: 300px;
        align-items: center;
        margin-left: 150px;
        margin-top: -150px;
        margin-bottom: 150px;
    }
    .hook-d__rows--1 {
        display: flex;
        flex-direction: row;
        gap: 300px;
        align-items: baseline;
        margin-bottom: 200px;
        margin-top: -150px;
    }

.hook-d__row {
        display: flex;
        align-items: flex-start;
        gap: 30px;
        flex-direction: column-reverse;
        z-index: 6;
    }

.hook-d__row--2 {
        display: flex;
        align-items: flex-start;
        gap: 30px;
        flex-direction: row-reverse;
        z-index: 6;
        max-width: 700px;
    }
.hook-d__row--3 {
        display: flex;
        gap: 30px;
        flex-direction: column;
        z-index: 6;
        justify-content: flex-end;
        align-items: center;
        max-width: 260px;
    }
    .hook-d__img .img--1 {
        width: clamp(210px, 20vw, 260px);
    }
    .hook-d__img .img--2 {
        width: clamp(210px, 40vw, 540px);
    }
    .hook-d__img .img--3 {
        width: clamp(210px, 40vw, 400px);
    }
    .hook-d__img .img--4 {
        width: clamp(210px, 20vw, 260px);
    }
    .hook-d__text--1{
      text-align: right;
    }
.triangle {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

/* Пример: позиции под блок 1 */
.triangle--1 {
        top: 50%;
        left: 15%;
}

.triangle--2 {
top: 15%;
        left: 45%;
}
.triangle--3 {
top: 60%;
        left: 40%;
}
.triangle--4 {
top: 5%;
        left: 55%;
}
.triangle--5 {
top: 40%;
        left: 15%;
}
.triangle--6 {
top: 25%;
        left: 35%;
}
.hook-d__text--1 {
  max-width: 320px;
  font-size: 20px;
  line-height: 1;
  text-align: right;
}
.hook-d__text--2 {
  max-width: 320px;
  font-size: 20px;
  line-height: 1;
  text-align: left;
}
.catalog {
    display: none;
}
.catalog-desktop {
  display: block;
  background: #FFA400; /* твой желтый */
  padding: 120px 0 250px;
  position: relative;
}

    .catalog-desktop__inner {
        width: min(1380px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
.catalog-desktop__inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-top: 50px solid var(--light);
    border-right: 60px solid transparent;
    width: 0;
    height: 0;
}

/* ================================
   ЛЕВАЯ ЧАСТЬ — заголовок
================================ */
.catalog-desktop__title h2 {
  font-family: Gilroy;
  font-size: clamp(48px, 4vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
}

.catalog-desktop__title .italic {
  font-family: Atziluth;
  font-size: clamp(60px, 4.8vw, 90px);
}


/* ================================
   ПРАВАЯ ЧАСТЬ — подзаголовки
================================ */

    .catalog-desktop__subtexts {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-items: flex-end;
        flex-wrap: nowrap;
    }


.catalog-desktop__text {
text-align: right;
font-family: Gilroy;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 100%;
color: #FEFDFD;

}
.catalog-desktop__subtitle{
  text-align: left;
font-family: Gilroy;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 100%;
color: #FEFDFD;
        margin-bottom: 60px;
}

/* ================================
   КОНТЕЙНЕР КАРТОЧЕК
================================ */
.catalog-desktop__cards {
  grid-column: 1 / 3; /* оба в одной строке */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 100px;
}


/* ================================
   КАРТОЧКА
================================ */
.catalog-card {
  background: #363535;
  padding: 80px;
  position: relative;
  color: #fff;

  /* ФИРМЕННЫЕ ОБРЕЗАННЫЕ УГЛЫ */
  clip-path: polygon(
    0 40px,
    40px 0,
    100% 0,
    100% calc(100% - 40px),
    calc(100% - 40px) 100%,
    0 100%
  );
}

.catalog-card--orange {
  background: #363535; /* тёмный фон */
}

    .catalog-card h3 {
        font-size: 40px;
        font-family: Gilroy;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 30px;
        letter-spacing: -1px;
    }


/* ================================
   КОНТЕНТ: картинка + thumbs + counter
================================ */
.catalog-card__content {
  display: grid;
  grid-template-columns: 1fr auto auto;

}

    .catalog-card__image img {
        width: 100%;
        max-width: 350px;
        border-radius: 12px;
        display: block;
        margin: 40px auto;
        
    }


/* THUMBS */
.catalog-card__thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow: hidden;
}

.catalog-card__thumbs img {
  width: 90px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.25s;
  opacity: 0.7;
  background: #fff;
}

.catalog-card__thumbs .active {
  opacity: 1;
}


/* COUNTER */
.catalog-card__counter {
  display: flex;
  align-items: center;
  gap: 30px;
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    padding: 16px;
    border-radius: 50px;
}

    .catalog-card__counter button {
        width: 38px;
        height: 38px;
        background: transparent;
        border-radius: 8px;
        border: 0;
        color: #fff;
        cursor: pointer;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.catalog-card__counter .value {
  font-size: 25px;
  font-weight: 600;
line-height: 100%;
}


/* ================================
   ЦЕНЫ
================================ */
.catalog-card__price {
   display: flex;
  flex-direction: column;
}

.catalog-card__price .current {
  font-size: 40px;
  color: #FDA80D;
  font-weight: 600;
}

.catalog-card__price .old {
  font-size: 20px;
  opacity: 0.6;
  text-decoration: line-through;
}


    .catalog-card__btn {
        margin-top: 25px;
        width: 100%;
        padding: 18px 0;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        background: #fff;
        color: #000;
        font-size: 18px;
        font-weight: 600;
        transition: 0.2s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

.catalog-card__btn:hover {
  transform: translateY(-2px);
  background: #FCF5ED;
}
.catalog-desktop__title {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-column: span 2;
        align-items: flex-end;
        justify-content: space-evenly;
        align-content: flex-start;
    }
.catalog-desktop__title h3{
    color: #FEFDFD;
font-family: Gilroy;
font-size: 120px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 120px */
letter-spacing: -2px;
}
.catalog-desktop__inner h2{
  color: #FEFDFD;
font-family: Gilroy;
font-size: 120px;
font-weight: 400;
line-height: 100%;
letter-spacing: -2px;
 grid-column: span 2;
}
.catalog-desktop__title .italic{
color: #FEFDFD;
font-size: 160px;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 160px */
letter-spacing: -2px;
}
.thumbs-arrow__catalog  {
    width: 14px;
    height: 14px;
    background: transparent;
    border: none;
    position: relative;
}
.thumbs-arrow--up__catalog{
  position: absolute;
right: 18%;
        top: 17%;
}
.thumbs-arrow--down__catalog{
  position: absolute;
        right: 18%;
        top: 75%;
}

.set-card {
    padding: 80px 140px 200px;
}
.offer__flex {
    margin-top: 40px;
    justify-content: flex-end;
    gap: 0;
}
.set-card h3, .set-card__price .current, .set-card__price--second .current {
    font-size: clamp(40px, 7vw, 50px);

}
.set-card__main {
    width: clamp(200px, 68vw, 350px);
}
.set-card__product {
    margin: 35px 100px 0px 0px;
}
.set-card__product.orange {
    margin: 20px 100px 0px 0px;
}
.set-card.orange, .advantages {
    margin-top: -140px;
}

.advantages__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: auto;
  gap: 20px 16px;
}

.advantages__grid > div:nth-child(1) { grid-column: 1 / span 3;  }
.advantages__grid > div:nth-child(2) {grid-column: 5 / span 2;
        order: 3; }
.advantages__grid > div:nth-child(3) {grid-column: 8 / span 3;
        order: 3; }  
.advantages__grid > div:nth-child(4) { grid-column: 7 / span 3;
        order: 1;}

.adv:nth-child(1) .adv__img{
  content: url("img/vc.png");
}
.adv:nth-child(2) .adv__img{
  content: url("img/vx.png");
  width: 230px;
}
.adv:nth-child(3) .adv__img{
  content: url("img/vz.png");
  width: 350px;
}
.adv:nth-child(4) .adv__img{
  content: url("img/vv.png"); 
}
.advantages {
    padding: 100px 30px;
}
.adv__text h4 {
    font-size: 40px;
}
.adv__text p, .reviews__small,.review__text{
    font-size: 20px;
}
.faq__text{
  font-size: 24px;
}
.reviews {
    background: #F8F3EB;
    padding: 130px 30px 100px 30px;
}
.reviews__header {
    margin-bottom: 100px;
    max-width: none;
}
.reviews__scroll {
    gap: 240px;
}
.faq__question {    
    gap: 250px;
}
.faq__title {
    margin-bottom: 100px;
}
.faq {
    padding: 40px 30px 150px;
}
.faq__answer {
    font-size: 20px;
    padding-right: 200px;
    padding-left: 265px;
}
    .gallery-scroll {
  display: flex;
  justify-content: center;
  position: relative;
  height: clamp(750px, 65vw, 900px);
  overflow: hidden;
  min-height: 0;
}
.gallery-layer {
  position: relative;
  width: 1440px;     /* фиксируем “песочницу” */
  height: 100%;
}
.g1  { top: 0px;
        left: clamp(6px, 3vw, 30px);
        width: clamp(110px, 20vw, 260px); }
.g2  { top: 60px;
        left: clamp(80px, 21vw, 300px);
        width: clamp(150px, 28vw, 400px); }
.g3  {         top: 30px;
        left: clamp(55px, 79vw, 1120px);
        width: clamp(140px, 19vw, 260px);
        z-index: 18; }
.g4  { top: 0;
        left: clamp(35px, 58vw, 820px);
        width: clamp(70px, 9vw, 120px);
        z-index: 11; }
.g5  { top: 350px;
        left: clamp(10px, 3vw, 30px);
        width: clamp(110px, 28vw, 400px);
        z-index: 14;} 
.g6  { top: 510px;
        left: clamp(40px, 45vw, 640px);
        width: clamp(170px, 19vw, 260px);
        z-index: 17; }
.g7  {         top: 390px;
        left: clamp(100px, 71vw, 1010px);
        width: clamp(110px, 28vw, 400px);
        z-index: 19; }
.g8  {         top: 610px;
        left: clamp(40px, 32vw, 450px);
        width: clamp(85px, 28vw, 120px);
        z-index: 18; }
.g9  { top: 210px;
        left: clamp(120px, 16vw, 220px);
        width: clamp(85px, 9vw, 120px);
        z-index: 14;}
.g10 {         top: 120px;
        left: clamp(6px, 59vw, 730px);
        width: clamp(170px, 38vw, 540px);
        z-index: 16; }
.g11 {         top: 380px;
        left: clamp(70px, 36vw, 515px);
        width: clamp(170px, 19vw, 260px);
        z-index: 17;}

.footer {
        padding: 60px 30px;
    }

.footer__bottom {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 214px;
    font-size: 20px;
    line-height: 1;
}
.footer__email {
    font-size: 20px;
    margin-bottom: 0;
}
.footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
   .cart-modal__window {
    width: 590px;
    height: clamp(600px, 80vh, 800px);
  }
.cart-item__img {
    position: relative;
    width: clamp(80px, 12vw, 140px);
    flex-shrink: 0;
}
.cart-modal__checkout{
  display: inline-flex;
padding: clamp(16px, 2.2vw, 24px) clamp(40px, 10vw, 119px);
justify-content: center;
align-items: center;
gap: 16px;
color: #FEFDFD;
font-family: Gilroy;
font-size:  clamp(12px, 1.4vw, 18px);
font-style: normal;
font-weight: 600;
line-height: 100%; /* 18px */
text-transform: uppercase;
border-radius: 100px;
background: #FDA80D;
border: none;
transition: ease-in .2s, ease-out .2s;
}
.cart-modal__footer {
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.cart-modal__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: clamp(30px, 6vw, 70px) 0;
    border-bottom: 1px solid #363535;
    position: relative;
}





}