/* ==========================================================================
   1.11.0 — Experience Showers (Figma 3469:462) і Relax Area Furniture (Figma 3478:122).
   Основа — Product template C (main.css → pages/product-template-c.css):
   hero (page-hero--product-c), product-c-intro, feature-list (product-c-features), product-c-talk.
   Тут — відмінності цих сторінок і нові секції: es-tech, es-process, ra-brand, ra-models, ra-specify.
   Mobile-макетів немає: мобільна версія — за правилами інших сторінок продуктів (секції через 70 px).
   ========================================================================== */

/* ---------- Спільне для обох сторінок ---------- */

.page-experience-showers,
.page-relax-area-furniture {
  --pc-hero-title-min: 150px;      /* H1 y = 304 (2 рядки), лід y = 454 */
}
@media (min-width: 768px) {
  .page-experience-showers .page-hero--product-c .page-hero__title,
  .page-relax-area-furniture .page-hero--product-c .page-hero__title { max-width: 535px; }
  .page-experience-showers .page-hero--product-c .page-hero__lead,
  .page-relax-area-furniture .page-hero--product-c .page-hero__lead { max-width: 480px; }

  .page-experience-showers .product-c-talk__text,
  .page-relax-area-furniture .product-c-talk__text { max-width: 572px; }
}

/* ==========================================================================
   Experience Showers
   ========================================================================== */

.page-experience-showers { --pc-intro-text-w: 600px; --pc-name-w: 300px; }

/* Intro: 4 рядки заголовка, лінії по низу фото в макеті немає */
.page-experience-showers .product-c-intro__main { border-bottom: 0; }
.page-experience-showers .product-c-intro__title { max-width: 806px; }

/* What We Offer: назви з x = 380 (переноси як у макеті), текст 600 px */
@media (min-width: 768px) {
  .page-experience-showers .feature-list__item:nth-child(1) .feature-list__name { max-width: 296px; }
  .page-experience-showers .feature-list__item:nth-child(5) .feature-list__name { max-width: 200px; }
  .page-experience-showers .feature-list__item:nth-child(6) .feature-list__name { max-width: 215px; }
  .page-experience-showers .feature-list__item:nth-child(9) .feature-list__name { max-width: 313px; }
  .page-experience-showers .product-c-features .feature-list__text { max-width: 600px; }
  /* ширини текстових блоків з макета (переноси рядків) */
  .page-experience-showers .feature-list__item:nth-child(2) .feature-list__text,
  .page-experience-showers .feature-list__item:nth-child(4) .feature-list__text,
  .page-experience-showers .feature-list__item:nth-child(5) .feature-list__text { max-width: 593px; }
  .page-experience-showers .feature-list__item:nth-child(3) .feature-list__text { max-width: 584px; }
  .page-experience-showers .feature-list__item:nth-child(6) .feature-list__text,
  .page-experience-showers .feature-list__item:nth-child(7) .feature-list__text,
  .page-experience-showers .feature-list__item:nth-child(8) .feature-list__text { max-width: 573px; }
  /* іконки 32×32 з x = 100 */
  .page-experience-showers .product-c-features .feature-list__icon { width: 32px; justify-content: flex-start; margin-left: 0; }
}

/* ---------- Technology & Integration: бежева смуга, 3 фото на всю ширину ---------- */
.es-tech {
  max-width: var(--frame);
  margin: 130px auto 0;
  padding: 130px 0 10px;
  background: var(--c-stone);
}

.es-tech__head {
  display: grid;
  grid-template-columns: 488px 466px minmax(0, 1fr);   /* x = 100 / 588 / 1054 */
  align-items: start;
}
.es-tech__title { max-width: 387px; }
.es-tech__text {
  max-width: 432px;
  font-size: 15px;
  line-height: 1.11;
  letter-spacing: 0.04em;
}
.es-tech__text--small {
  max-width: 284px;
  font-size: 14px;
  line-height: 1.2;
}

/* фото y = 3630: 197 px від верху заголовка, хоч тексти праворуч і довші за заголовок */
.es-tech__slider { position: relative; margin-top: 107px; }
@media (min-width: 1241px) {
  .es-tech__head { height: 90px; }
}

.es-tech__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.es-tech__track::-webkit-scrollbar { display: none; }
.es-tech__track.is-dragging { scroll-snap-type: none; }
.es-tech--more .es-tech__track { cursor: grab; }

.es-tech__slide {
  flex: 0 0 calc((100% - 20px) / 3);
  height: 570px;
  overflow: hidden;
  scroll-snap-align: start;
}
.es-tech__slide img { width: 100%; height: 100%; object-fit: cover; }

/* хромотерапія: відтінок фото плавно йде по колу (тепле фото → синє → зелене → бурштинове → червоне) */
@keyframes es-chromo {
  0%   { filter: hue-rotate(180deg) saturate(1.15); }   /* синій */
  25%  { filter: hue-rotate(110deg) saturate(1.15); }   /* зелений */
  50%  { filter: hue-rotate(20deg) saturate(1.1); }     /* бурштиновий */
  75%  { filter: hue-rotate(-12deg) saturate(1.2); }    /* червоний */
  100% { filter: hue-rotate(-180deg) saturate(1.15); }  /* знову синій */
}
.es-tech__slide--chromo img { animation: es-chromo 14s linear infinite; will-change: filter; }
@media (prefers-reduced-motion: reduce) {
  .es-tech__slide--chromo img { animation: none; }
}

/* стрілки — як у слайдерах проєктів на сторінках продуктів (projects__nav): під фото, зліва; лише якщо є що гортати */
.es-tech__nav { display: none; }
.es-tech--more .es-tech__nav { display: flex; }
.es-tech--more { padding-bottom: 70px; }

.es-tech__progress { display: none; }

@media (max-width: 1240px) {
  .es-tech__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr); column-gap: 40px; }
}

/* ---------- How We Work: кроки з дугами ---------- */
.es-process { margin-top: 130px; }

.es-process__head {
  display: grid;
  grid-template-columns: 787px minmax(0, 1fr);   /* текст з x = 887 */
  align-items: start;
  margin-top: 30px;
}
.es-process__title { max-width: 707px; margin-left: -3px; }
.es-process__text {
  max-width: 465px;
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.11;
  letter-spacing: 0.04em;
}

/* рядок кроків: дуги над 1→2 і 3→4 (y 4551), під 2→3 і 4→5 (y 4709); назви на y 4645 */
.es-process__steps {
  position: relative;
  display: grid;
  grid-template-columns: 301px 260px 302px 216px minmax(0, 1fr);  /* x = 100 / 401 / 661 / 963 / 1179 */
  margin-top: 172px;    /* від низу заголовка (y 4473) до назв (y 4645) */
  padding-bottom: 83px; /* до низу нижніх дуг (y 4772) */
}
.es-step { max-width: 175px; }
.es-step:nth-child(2) { max-width: 132px; }
.es-step:nth-child(5) { max-width: 161px; }

.es-process__steps--arcs .es-step:nth-child(-n + 4)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: no-repeat 0 0 / 100% 100%;
}
.es-process__steps--arcs .es-step:nth-child(odd)::after {
  top: -95px;
  width: 224px;
  height: 68px;
  background-image: url("../img/consulting-arc-up.svg");
}
.es-process__steps--arcs .es-step:nth-child(even)::after {
  top: 61px;
  width: 267px;
  height: 67px;
  background-image: url("../img/consulting-arc-down.svg");
}
.es-process__steps--arcs .es-step:nth-child(1)::after { left: 51px; }
.es-process__steps--arcs .es-step:nth-child(2)::after { left: 364px; }
.es-process__steps--arcs .es-step:nth-child(3)::after { left: 651px; }
.es-process__steps--arcs .es-step:nth-child(4)::after { left: 896px; }

@media (max-width: 1240px) {
  .es-process__head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 40px; }
  .es-process__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; margin-top: 80px; padding-bottom: 0; }
  .es-process__steps--arcs .es-step::after { display: none; }
}

/* CTA — 130 px після нижніх дуг */
.page-experience-showers .product-c-talk { margin-top: 130px; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .page-experience-showers .product-c-intro__title { max-width: 330px; }

  .es-tech { margin-top: 70px; padding: 70px 0; }
  .es-tech__head { display: block; }
  .es-tech__title { max-width: 250px; }
  .es-tech__text { max-width: none; margin-top: 25px; font-size: 13px; line-height: 15px; }
  .es-tech__text--small { margin-top: 15px; font-size: 12px; }
  .es-tech__slider { margin-top: 40px; }
  /* фото 331×402, наступне видно з-за краю; стрілки під рядом */
  .es-tech__track { gap: 11px; padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); }
  .es-tech__slide { flex-basis: 331px; max-width: calc(100% - 2 * var(--gutter)); height: 402px; }
  .es-tech__slide--chromo { order: -1; }   /* фото з ефектом — першим */
  .es-tech__slider .es-tech__nav { display: flex; margin-top: 25px; }
  /* прогрес-бар не показуємо — лише стрілки, як на інших сторінках продуктів */

  .es-process { margin-top: 70px; }
  .es-process__head { display: block; margin-top: 20px; }
  .es-process__title { max-width: 314px; margin-left: 0; }
  .es-process__text { max-width: none; margin-top: 25px; font-size: 13px; line-height: 15px; }
  .es-process__steps {
    display: block;
    margin-top: 35px;
    padding: 0;
    border-top: 1px solid var(--c-line);
  }
  .es-step,
  .es-step:nth-child(n) {
    max-width: none;
    padding: 18px 0 17px;
    border-bottom: 1px solid var(--c-line);
    counter-increment: es-step;
  }
  .es-step::before {
    content: counter(es-step, decimal-leading-zero);
    display: inline-block;
    width: 40px;
    font-weight: var(--fw-light);
    font-size: 12px;
    opacity: 0.4;
  }
  .es-process__steps { counter-reset: es-step; }

  .page-experience-showers .product-c-talk { margin-top: 70px; }
}

/* ==========================================================================
   Relax Area Furniture
   ========================================================================== */

.page-relax-area-furniture { --pc-intro-text-w: 515px; }
.page-relax-area-furniture .product-c-intro__title { max-width: 806px; }

/* ---------- Collection panel: фото 720×820 | бежева панель ---------- */
.ra-brand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--frame);
  min-height: 820px;
  margin: 130px auto 0;
}

.ra-brand__media { position: relative; overflow: hidden; background: var(--c-stone); }
.ra-brand__img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* логотипи вгорі по центру фото: Sentora (x 60) & (x 341) Meridiani (x 475), центр рядка y 1622 */
.ra-brand__logos {
  position: absolute;
  left: 0;
  right: 0;
  top: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 115px;
  height: 61px;
  padding: 0 20px;
  pointer-events: none;
}
.ra-brand__logo { flex: none; height: auto; }   /* ширина — з атрибута width (166 / 183), PNG у 3× */
.ra-brand__amp {
  font-weight: var(--fw-light);
  font-size: 20px;
  line-height: 1.1;
  color: var(--c-stone);
}

.ra-brand__panel {
  display: flex;
  flex-direction: column;
  padding: 55px 100px 40px 70px;   /* eyebrow x = 790, y = 1612 */
  background: var(--c-stone);
}
.ra-brand__title { max-width: 496px; margin-top: 30px; }
.ra-brand__text { max-width: 483px; margin-top: 65px; }
.ra-brand__link {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--c-line-stone);
}

@media (max-width: 1240px) {
  .ra-brand__panel { padding: 55px var(--gutter) 40px 50px; }
  .ra-brand__logos { gap: 8%; }
  .ra-brand__logo { max-width: 30%; }
}

/* ---------- Meridiani: заголовок | 1996 FOUNDED + текст; моделі у 2 колонки ---------- */
.ra-models { margin-top: 130px; }

.ra-models__head {
  display: grid;
  grid-template-columns: 641px minmax(0, 1fr);   /* права колонка з x = 741 */
  align-items: start;
}
.ra-models__title { max-width: 609px; }

.ra-models__about { max-width: 596px; }
.ra-models__fact {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 3px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-line);
}
.ra-models__num {
  font-weight: var(--fw-light);
  font-size: min(45px, 3.125vw);
  line-height: 1.2;
  letter-spacing: 0.07em;
}
.ra-models__label {
  font-weight: var(--fw-light);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.ra-models__text {
  max-width: 483px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.ra-models__items {
  display: grid;
  grid-template-columns: 600px 600px;
  justify-content: space-between;
  row-gap: 41px;
  margin-top: 56px;
}
.ra-model {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--c-line);
}
.ra-model__icon { display: flex; align-items: center; width: 35px; height: 35px; }
.ra-model__icon img { width: auto; max-width: 35px; height: auto; max-height: 35px; }
.ra-model__name { max-width: 438px; margin-top: 33px; }
.ra-model:nth-child(3) .ra-model__name { max-width: 296px; }
.ra-model:nth-child(4) .ra-model__name { max-width: 319px; }
.ra-model__text { max-width: 576px; margin-top: 20px; }
.ra-model:nth-child(1) .ra-model__text { max-width: 533px; }
.ra-model:nth-child(2) .ra-model__text { max-width: 524px; }
.ra-model:nth-child(3) .ra-model__text { max-width: 515px; }

@media (max-width: 1240px) {
  .ra-models__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .ra-models__items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

/* ---------- How We Specify: як Intro, заголовок з x = 527, текст на 45 px нижче ---------- */
.ra-specify .product-c-intro__img { height: 475px; }
.ra-specify .product-c-intro__title { margin-left: 0; }
.ra-specify .product-c-intro__text { max-width: 471px; margin-top: 45px; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .page-relax-area-furniture .product-c-intro__title { max-width: 330px; }

  .ra-brand { display: flex; flex-direction: column; min-height: 0; margin-top: 70px; }
  .ra-brand__media { height: 460px; }
  .ra-brand__logos { top: 24px; gap: 30px; height: 40px; }
  .ra-brand__logo { max-width: 36%; }
  .ra-brand__amp { font-size: 15px; }
  .ra-brand__panel { padding: 50px var(--gutter) 40px; }
  .ra-brand__title { margin-top: 20px; }
  .ra-brand__text { margin-top: 30px; }
  .ra-brand__link { margin-top: 45px; }

  .ra-models { margin-top: 70px; }
  .ra-models__head { display: block; }
  .ra-models__title { max-width: 330px; }
  .ra-models__about { margin-top: 35px; }
  .ra-models__num { font-size: 35px; }
  .ra-models__label { font-size: 15px; }
  .ra-models__text { font-size: 13px; line-height: 15px; }
  .ra-models__items { display: block; margin-top: 45px; }
  .ra-model { padding: 25px 0; }
  .ra-model:first-child { padding-top: 0; }
  .ra-model__icon { width: 28px; height: 28px; }
  .ra-model__icon img { max-width: 28px; max-height: 28px; }
  .ra-model__name,
  .ra-model:nth-child(n) .ra-model__name { max-width: 270px; margin-top: 20px; }
  .ra-model__text,
  .ra-model:nth-child(n) .ra-model__text { max-width: none; margin-top: 15px; }

  .ra-specify .product-c-intro__img { height: 406px; }
  .ra-specify .product-c-intro__text { margin-top: 30px; }
}