/* ---- Слайдер: фото+відео ---- */

.ip-hero{
  --ip-accent:var(--ip-brand);  /* колір стрілок гортання */

  --ip-hero-ratio:27/10;        /* пропорції на десктопі: при 1920 px ≈ 711 px */
  --ip-hero-ratio-mobile:2/3;   /* пропорції на мобільному: 372×558 і т.д. */
  --ip-hero-speed:.9s;          /* ручне гортання: бічні зони, свайп */
  --ip-hero-speed-auto:2s;      /* автоматичне – повільніше й м'якше */
  --ip-shift:100%;              /* дистанція зсуву при ручному гортанні */
  --ip-shift-auto:8%;           /* авто: не проліт через екран, а плавний перехід */
  --ip-dir:1;                   /* +1 новий заїжджає справа, -1 – зліва */

  --ip-overlay-src:url("https://zweithaarstudio.isabell-poeder.expert/image/890038/overlay_zweithaarstudio.png");
  --ip-overlay-size:auto;       /* auto = реальний розмір PNG, як на сайті.
                                   100% auto = розтягнути на ширину хедера */
  --ip-overlay-repeat:no-repeat;/* repeat-x = продовжити хвилю на екранах,
                                   ширших за саму картинку */
  --ip-overlay-drop:max(0px, calc(100dvh - 100%));
                                /* Наскільки хвиля з емблемою звисає нижче краю
                                   хедера. Тут: рівно до низу екрана – 100% це
                                   висота хедера, тож різниця й дає потрібний
                                   звис на будь-якому моніторі.
                                   Можна просто число: 170px, 240px тощо.
                                   0 = хвиля рівно по нижньому краю хедера. */
  --ip-hero-inner:1320px;       /* ширина контейнера – як в акордеоні */
  --ip-header-h:100px;          /* висота прозорої шапки сайту над слайдером:
                                   на цю величину текст і стрілки зміщуються
                                   вниз, щоб стояти по центру видимої частини */
  --ip-caption-offset:0px;      /* тонке підстроювання: + нижче, – вище */

  /* ---- Бічні зони ----
     ширина зони; нижній край; відступ стрілки від краю кадру */
  --ip-side-width:clamp(90px,15%,240px);
  --ip-side-bottom:0px;         /* 0 = на всю висоту хедера. Щоб зона не заходила
                                   на хвилю – поставте тут її висоту, напр. 140px */
  --ip-side-inset:36px;         /* стрілка на такій відстані від краю */
  --ip-chevron-size:28px;       /* розмір стрілки */
  --ip-caption-pad:calc(var(--ip-side-inset) + var(--ip-chevron-size) + 22px);
                                /* відступ тексту, за якого він не налазить
                                   на стрілку: її поле + ширина + повітря */
  --ip-caption-side-pad:15px;   /* фактичний відступ; перемикається нижче */
  --ip-side-veil:.32;           /* затемнення зони ПІД КУРСОРОМ (0 = вимкнути) */

  /* ---- Текст ---- */
  --ip-script-font:"Allison",cursive;
  --ip-script-size:clamp(60px,4.8vw,126px);
  --ip-subline-size:clamp(18px,1.8vw,36px);
  --ip-subline-gap:26px;        /* відступ підзаголовка від заголовка */

  position:relative;
  background:#2e3134;
  /* overflow навмисно НЕ hidden: інакше хвиля не змогла б звисати нижче
     краю хедера. Слайди підрізає .ip-hero-viewport. */
}
.ip-hero[data-dir="prev"]{--ip-dir:-1;}

/* фіксовані пропорції → сторінка не стрибає, поки вантажаться фото */
.ip-hero-viewport{
  position:relative;
  overflow:hidden;                 /* тут підрізаються слайди */
  aspect-ratio:var(--ip-hero-ratio);
  min-height:420px;
}
/* Хедер на всю висоту екрана. Клас стоїть у розмітці; приберіть його –
   і висоту знову задаватиме --ip-hero-ratio.
   Проміжний варіант: замініть 100dvh на 85dvh, 700px тощо. */
.ip-hero-fullscreen .ip-hero-viewport{
  aspect-ratio:auto;
  height:100vh;height:100dvh;    /* dvh – щоб не стрибало під адресною панеллю */
  min-height:0;
}

.ip-hero-slide{
  position:absolute;inset:0;
  visibility:hidden;opacity:0;
  transform:translateX(calc(var(--ip-shift) * var(--ip-dir)));
  transition:transform var(--ip-hero-speed) cubic-bezier(.33,0,.2,1),
             opacity   var(--ip-hero-speed) ease;
}
/* will-change тільки на двох слайдах, які реально рухаються. Якщо
   тримати його на всіх, браузер віддає під кожен повноекранний кадр
   окремий шар у пам'яті відеокарти – при 1920×1080 це ~8 МБ на слайд. */
.ip-hero-slide.is-active,
.ip-hero-slide.is-leaving{will-change:transform,opacity;}
.ip-hero-slide.is-active{
  visibility:visible;opacity:1;z-index:1;
  transform:translateX(0);
}
.ip-hero-slide.is-leaving{
  visibility:visible;opacity:0;z-index:0;
  transform:translateX(calc(var(--ip-shift) * var(--ip-dir) * -1));
}

/* Автоматичний перехід: коротка дистанція, довша тривалість і
   плавніша крива – рух майже непомітний, без ривка на старті. */
.ip-hero[data-auto="1"]{--ip-shift:var(--ip-shift-auto);}
.ip-hero[data-auto="1"] .ip-hero-slide{
  transition-duration:var(--ip-hero-speed-auto);
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}

.ip-hero-image{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Спокійний наїзд кадру. is-leaving теж у списку: інакше зображення
   стрибком поверталось би до масштабу 1 просто під час переходу. */
.ip-hero-slide.is-active > .ip-hero-image,
.ip-hero-slide.is-leaving > .ip-hero-image{
  animation:ip-hero-zoom 14s ease-out forwards;
}
@keyframes ip-hero-zoom{from{transform:scale(1);}to{transform:scale(1.06);}}

/* затемнення зліва – текст тепер там, а не вгорі */
.ip-hero-slide::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,
             rgba(20,22,24,.55),rgba(20,22,24,.18) 55%,rgba(20,22,24,0));
  pointer-events:none;
}

/* ---- Відео на всю площу слайда ----
   Розміри iframe рахує скрипт (fitCover), бо плеєр має власні
   пропорції 16:9 і інакше з'являлися б чорні поля. */
.ip-hero-video{position:absolute;inset:0;overflow:hidden;background:#2e3134;}
.ip-hero-video iframe{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:0;pointer-events:none;   /* клік проходить до бічних зон */
}

/* ---- Текст: по центру висоти, по лівому краю контейнера 1320 px ---- */
.ip-hero-caption{
  position:absolute;left:0;right:0;top:0;bottom:40px;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  max-width:var(--ip-hero-inner);margin:0 auto;
  padding:calc(var(--ip-header-h) + var(--ip-caption-offset))
          var(--ip-caption-side-pad) 0;
  text-align:left;
  pointer-events:none;               /* текст не перехоплює клік і свайп */
}
/* Клікабельні лише посилання й кнопки в тексті – самі рядки лишаються
   «прозорими», щоб не блокувати гортання. */
.ip-hero-caption a,
.ip-hero-caption button{pointer-events:auto;}

/* Обидва рядки – звичайні абзаци, тож спільне беремо один раз. */
.ip-hero-caption p{
  margin:0;color:#fff;font-weight:300;
  text-shadow:0 1px 22px rgba(0,0,0,.45);
}
/* Відступ живе на сусідстві, а не на класі: додасте третій рядок –
   він отримає ту саму дистанцію без правок CSS. */
.ip-hero-caption p + p{margin-top:var(--ip-subline-gap);}

.ip-hero-caption .ip-hero-script{     /* рукописне накреслення */
  font-family:var(--ip-script-font);
  font-size:var(--ip-script-size)!important;
  font-weight:400;line-height:1.1;
}
.ip-hero-caption .ip-hero-subline{
  font-size:var(--ip-subline-size);line-height:1.5;
}

/* Поки вікно ширше за контейнер + обидві зони зі стрілками, дистанцію
   тримають самі поля контейнера 1320 px. Щойно стає вужче – вмикаємо
   розрахований відступ, інакше рядок наїжджає на стрілку.
   Перемикаємо ЗМІННУ, а не саме правило: так порядок і специфічність
   правил уже не мають значення. */
@media (max-width:1484px){
  .ip-hero{--ip-caption-side-pad:var(--ip-caption-pad);}
}

/* необов'язковий варіант: текст по центру кадру */
.ip-hero-caption-center{align-items:center;text-align:center;}

/* ---------- Оверлей: хвиля з емблемою ----------*/
.ip-hero-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--ip-overlay-src);
  background-position:bottom center;
  background-repeat:no-repeat;
  background-size:100% auto;     /* ширина = ширина хедера, висота пропорційна */
}

/* ============ Бічні зони гортання ============
   Прямокутник на всю висоту, прозорий; під курсором проступає
   легке затемнення від краю, стрілка яскравішає й трохи від'їжджає.
   Градієнт малюється ЛИШЕ на :hover – у спокої тут нічого не
   перемальовується поверх кадру. */
.ip-hero-side{
  position:absolute;top:0;bottom:var(--ip-side-bottom);
  z-index:4;
  width:var(--ip-side-width);
  display:flex;align-items:center;
  margin:0;padding:var(--ip-header-h) 0 0;border:0;
  background:transparent;
  color:var(--ip-accent);        /* стрілка кольором бренду */
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;                /* вертикальний скрол лишається браузеру,
                                        горизонтальний жест ловить свайп */
  transition:background .35s ease;
}
.ip-hero-side-prev{left:0;justify-content:flex-start;padding-left:var(--ip-side-inset);}
.ip-hero-side-next{right:0;justify-content:flex-end;padding-right:var(--ip-side-inset);}
.ip-hero-side-prev:hover{
  background:linear-gradient(to right,
             rgba(20,22,24,var(--ip-side-veil)),rgba(20,22,24,0));
}
.ip-hero-side-next:hover{
  background:linear-gradient(to left,
             rgba(20,22,24,var(--ip-side-veil)),rgba(20,22,24,0));
}
.ip-hero-side:focus-visible{outline:2px solid #fff;outline-offset:-6px;}

/* стрілка: обгортка їздить, «галочка» всередині лише повернута */
.ip-hero-chevron{
  position:relative;flex:0 0 auto;
  width:var(--ip-chevron-size);height:var(--ip-chevron-size);
  opacity:.9;
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.45));   /* читається і на світлому кадрі */
  transition:opacity .3s ease,transform .3s ease;
}
.ip-hero-chevron::before{
  content:"";position:absolute;left:50%;top:50%;
  width:19px;height:19px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
}
/* Повернута «галочка» важить у бік вістря – зсуваємо її на пів-діагоналі
   назад, щоб вона стояла рівно по центру обгортки. */
.ip-hero-side-prev .ip-hero-chevron::before{
  transform:translate(calc(-50% + 6.5px),-50%) rotate(135deg);
}
.ip-hero-side-next .ip-hero-chevron::before{
  transform:translate(calc(-50% - 6.5px),-50%) rotate(-45deg);
}
.ip-hero-side:hover .ip-hero-chevron{opacity:1;}
.ip-hero-side-prev:hover .ip-hero-chevron{transform:translateX(-6px);}
.ip-hero-side-next:hover .ip-hero-chevron{transform:translateX(6px);}

@media (max-width:767px){
  .ip-hero{
    /* Мобільна шапка – окрема смуга НАД слайдером, а не прозорий шар
       поверх нього. Тому вниз нічого зміщувати не треба. */
    --ip-header-h:0px;

    --ip-side-width:24%;
    --ip-side-inset:14px;         /* стрілка ближче до краю екрана */
    --ip-chevron-size:22px;
    --ip-side-veil:0;             /* наведення на тачі не буває */

    --ip-script-size:34px;
    --ip-subline-size:16px;
    --ip-subline-gap:12px;
    /* Кадр став вищим, а хвиля опустилась – текст піднімаємо, щоб він
       стояв по центру ВІЛЬНОЇ частини знімка, а не всього кадру. */
    --ip-caption-offset:-230px;

    /* Оверлей НЕ масштабується: --ip-overlay-size лишається auto, тобто
       реальний розмір PNG. У вузький кадр потрапляє центральна частина
       картинки, краї просто виходять за екран. */
    --ip-overlay-drop:0px;        /* хвиля рівно по нижньому краю кадру;
                                     більше число опускає її нижче */
  }

  /* Портретний кадр замість повного екрана: на телефоні висота 100dvh
     з'їдає всю першу прокрутку. Правило йде після .ip-hero-fullscreen
     і має ту саму специфічність, тож перемагає як пізніше. */
  .ip-hero .ip-hero-viewport{
    height:auto;
    aspect-ratio:var(--ip-hero-ratio-mobile);
    /* Хвиля лежить у реальному розмірі, тож кадру потрібен запас висоти –
       інакше вона накриє майже все фото. Підганяйте це число під висоту
       вашого PNG: приблизно подвоєна висота хвилі. */
    min-height:640px;
  }

  /* Allison має високі виносні елементи – на дрібному кеглі їм потрібен
     запас, інакше верхівки літер підрізаються. */
  .ip-hero-caption .ip-hero-script{line-height:1.25;}
  .ip-hero-caption .ip-hero-subline{line-height:1.45;max-width:24ch;}

  /* Затемнення вертикальне: текст іде на всю ширину, тож градієнт
     зліва направо лишав би його правий край на світлому тлі. */
  .ip-hero-slide::after{
    background:linear-gradient(to top,
               rgba(20,22,24,.45),rgba(20,22,24,.12) 55%,rgba(20,22,24,.35));
  }

  /* Стрілки видно й на телефоні – підказка, що кадр гортається */
  .ip-hero-chevron{opacity:.85;}
  .ip-hero-chevron::before{width:15px;height:15px;border-width:0 2px 2px 0;}
  .ip-hero-side-prev .ip-hero-chevron::before{
    transform:translate(calc(-50% + 5px),-50%) rotate(135deg);
  }
  .ip-hero-side-next .ip-hero-chevron::before{
    transform:translate(calc(-50% - 5px),-50%) rotate(-45deg);
  }
}

/* Зменшення анімацій: зсув і наїзд кадру вимикаємо,
   але слайди продовжують змінюватись. */
@media (prefers-reduced-motion:reduce){
  .ip-hero-slide.is-active > .ip-hero-image,
  .ip-hero-slide.is-leaving > .ip-hero-image{animation:none;}
  .ip-hero *{transition-duration:.01ms !important;}
}


/* ------------accordion------------*/
.ip-accordion{
  --ip-accent:var(--ip-brand);
  --ip-accent-dark:var(--ip-brand-dark);
  --ip-placeholder-bg:var(--ip-brand-tint);

  /* нейтралі – спільні для обох тем */
  --ip-heading-color:#3d4043;
  --ip-text-color:#5f6469;
  --ip-border-color:#e7e9e3;
  --ip-line-color:#9aa0a4;            /* лінії між пунктами */
  --ip-line-width:1px;                /* товщина ліній */
  --ip-speed:.4s;

  /* Типографіка успадковується від теми – жодних фіксованих px.
     Потрібно відхилитись – міняйте цифру тут: */
  --ip-title-size:1.15em;   /* заголовок пункту, відносно основного тексту */
  --ip-text-size:1em;       /* основний текст = точно як на сторінці */
  --ip-label-size:.8em;

  padding:60px 0;
  color:var(--ip-text-color);
}
.ip-container{max-width:1320px;margin:0 auto;padding:0 15px;}

.ip-label{
  margin:0 0 8px;
  font-size:var(--ip-label-size);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ip-accent-dark);
}
/* .ip-title навмисно БЕЗ font-size – діє правило h2 з теми */
.ip-title{margin:0 0 32px;color:var(--ip-heading-color);}

/* ============ Пункти акордеона ============ */
.ip-list{border-top:var(--ip-line-width) solid var(--ip-line-color);}
.ip-item{border-bottom:var(--ip-line-width) solid var(--ip-line-color);}

.ip-toggle{
  position:relative;
  display:flex;align-items:center;gap:20px;
  width:100%;margin:0;padding:26px 4px 26px 24px;
  background:none;border:0;text-align:left;cursor:pointer;
  font:inherit;color:var(--ip-heading-color);
  transition:color var(--ip-speed) ease;
  -webkit-appearance:none;appearance:none;
}
/* Акцент: тонка риска, що виростає при відкритті */
.ip-toggle::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;
  background:var(--ip-accent);
  transform:scaleY(0);transform-origin:center;
  transition:transform var(--ip-speed) ease;
}
.ip-item.is-open .ip-toggle::before{transform:scaleY(1);}

.ip-toggle-text{
  flex:1 1 auto;
  font-size:var(--ip-title-size);font-weight:500;line-height:1.4;letter-spacing:.01em;
}
.ip-toggle:hover .ip-toggle-text,
.ip-item.is-open .ip-toggle-text{color:var(--ip-accent-dark);}

.ip-toggle-icon{
  position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--ip-border-color);
  transition:background var(--ip-speed) ease,
             border-color var(--ip-speed) ease,
             transform var(--ip-speed) ease;
}
.ip-toggle-icon::before,
.ip-toggle-icon::after{
  content:"";position:absolute;left:50%;top:50%;
  width:14px;height:1.5px;margin:-.75px 0 0 -7px;
  background:var(--ip-heading-color);
  transition:opacity var(--ip-speed) ease,background var(--ip-speed) ease;
}
.ip-toggle-icon::after{transform:rotate(90deg);}
.ip-toggle:hover .ip-toggle-icon{border-color:var(--ip-accent);}
.ip-item.is-open .ip-toggle-icon{
  background:var(--ip-accent);border-color:var(--ip-accent);transform:rotate(180deg);
}
.ip-item.is-open .ip-toggle-icon::before{background:var(--ip-brand-on);}
.ip-item.is-open .ip-toggle-icon::after{opacity:0;}

.ip-toggle:focus-visible{outline:2px solid var(--ip-accent);outline-offset:3px;}

/* .ip-content – обгортка, якій анімується висота */
.ip-content{
  overflow:hidden;overflow-anchor:none;
  max-height:0;
  transition:max-height var(--ip-speed) ease;
}
.ip-content-inner{padding:4px 4px 40px 24px;}
.ip-content-inner p{margin:0 0 16px;font-size:var(--ip-text-size);line-height:1.75;}
.ip-content-inner p:last-child{margin-bottom:0;}

.ip-bullets{margin:0 0 16px;padding:0;list-style:none;}
.ip-bullets li{
  position:relative;padding:0 0 12px 22px;font-size:var(--ip-text-size);line-height:1.7;
}
.ip-bullets li::before{
  content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;
  background:var(--ip-accent);
}
.ip-bullets strong{color:var(--ip-heading-color);font-weight:600;}

/* ============ Сітка всередині пункту ============
   Порядок у розмітці: спершу текст, потім медіа.
   .ip-row-media-right → так і лишається (медіа справа).
   .ip-row-media-left  → на десктопі колонки міняються місцями.
   На мобільному завжди: текст зверху, медіа під ним.
   ------------------------------------------------------------- */
.ip-row{display:flex;flex-wrap:wrap;margin:0 -15px;}
.ip-col{width:100%;padding:0 15px 20px;}
.ip-col:last-child{padding-bottom:0;}

/* ---- Фото ---------------------------------------------------
   За замовчуванням:    фото на всю ширину своєї колонки
   Вужче:               style="--ip-image-width:70%" (або 320px тощо)
   Реальний розмір:     style="--ip-image-width:auto"
   Фіксований кадр:     class="ip-image ip-image-cropped"
                        style="--ip-image-ratio:16/9"
   Вирівнювання:        ip-image-left | ip-image-right (типово – по центру)
------------------------------------------------------------- */
.ip-image{
  display:block;
  width:var(--ip-image-width,100%);        /* типово – на всю ширину колонки */
  max-width:100%;
  height:auto;
  margin-left:auto;margin-right:auto;      /* по центру колонки */
  background:var(--ip-placeholder-bg);
}
.ip-image-left {margin-left:0;margin-right:auto;}
.ip-image-right{margin-left:auto;margin-right:0;}

/* опційна фіксована рамка – фото заповнює її повністю */
.ip-image-cropped{
  aspect-ratio:var(--ip-image-ratio,4/3);
  height:auto;
  object-fit:cover;
  object-position:var(--ip-image-position,center);
}

/* ---- Відео (YouTube / Vimeo) ---- */
.ip-video{position:relative;padding-top:56.25%;background:var(--ip-placeholder-bg);}
.ip-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

@media (min-width:768px){
  .ip-col{padding-bottom:0;}
  .ip-col-quarter   {width:25%;}
  .ip-col-third     {width:33.3333%;}
  .ip-col-narrow    {width:41.6667%;}
  .ip-col-half      {width:50%;}
  .ip-col-wide      {width:58.3333%;}
  .ip-col-two-thirds{width:66.6667%;}

  /* медіа зліва, текст справа */
  .ip-row-media-left{flex-direction:row-reverse;}
}
@media (max-width:767px){
  .ip-accordion{--ip-title-size:1.05em;}
  .ip-toggle{padding:22px 2px 22px 18px;gap:14px;}
  .ip-toggle::before{top:22px;bottom:22px;}
  .ip-content-inner{padding-left:18px;padding-bottom:30px;}
}

@media (prefers-reduced-motion:reduce){
  .ip-accordion *{transition-duration:.01ms !important;}
}


/* ----------Left text Slider---------  */
.ip-ts{
  --ip-ts-accent:var(--ip-brand);
  --ip-ts-accent-dark:var(--ip-brand-dark);
  --ip-ts-on-accent:var(--ip-brand-on);   /* напис на кнопці й стрілках */
  --ip-ts-placeholder:var(--ip-brand-tint);

  --ip-ts-heading:#3d4043;
  --ip-ts-text:#5f6469;
  --ip-ts-bg:transparent;
  --ip-ts-speed:.55s;

  --ip-ts-inner:1320px;              /* ширина контейнера – як в акордеоні */
  --ip-ts-gap:60px;                  /* відстань між текстом і фото */
  --ip-ts-media-ratio:4/3;           /* пропорції фото */
  --ip-ts-media-width:47%;           /* частка ширини під фото */

  /* Типографіка успадковується від теми, тому em, а не px */
  --ip-ts-heading-size:1.15em;
  --ip-ts-text-size:1em;
  --ip-ts-label-size:.8em;

  padding:70px 0;
  background:var(--ip-ts-bg);
  color:var(--ip-ts-text);
}
/* Темний варіант зі скріншота. Він НАВМИСНО не бере бренд-колір: на
   чорному тлі і зелений, і рожевий гаснуть, тому тут свій жовтий.
   Хочете, щоб і темний блок ішов за темою – видаліть три рядки з
   accent та on-accent, решта підхопиться сама. */
.ip-ts-dark{
  --ip-ts-accent:#ffc800;
  --ip-ts-accent-dark:#e6b400;
  --ip-ts-on-accent:#1c1c1c;
  --ip-ts-heading:#fff;
  --ip-ts-text:#c7cacd;
  --ip-ts-bg:#1c1c1c;
  --ip-ts-placeholder:#2a2a2a;
}

.ip-ts-container{max-width:var(--ip-ts-inner);margin:0 auto;padding:0 15px;}

.ip-ts-label{
  margin:0 0 8px;
  font-size:var(--ip-ts-label-size);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ip-ts-accent-dark);
}
/* без font-size – діє правило h2 з теми */
.ip-ts-title{margin:0 0 36px;color:var(--ip-ts-heading);}

.ip-ts-layout{display:flex;align-items:center;gap:var(--ip-ts-gap);}

/* ---- Текстова колонка (статична) ---- */
.ip-ts-text{flex:1 1 auto;min-width:0;}
.ip-ts-heading{
  margin:0 0 14px;padding-left:16px;
  border-left:3px solid var(--ip-ts-accent);
  font-size:var(--ip-ts-heading-size);font-weight:600;line-height:1.3;
  letter-spacing:.01em;color:var(--ip-ts-heading);
}
.ip-ts-text p{margin:0 0 26px;font-size:var(--ip-ts-text-size);line-height:1.75;}
.ip-ts-text strong{color:var(--ip-ts-heading);font-weight:600;}

.ip-ts-button{
  display:inline-block;margin-top:6px;padding:14px 28px;
  background:var(--ip-ts-accent);color:var(--ip-ts-on-accent);
  font-size:.85em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
  transition:background .3s ease;
}
.ip-ts-button:hover{background:var(--ip-ts-accent-dark);color:var(--ip-ts-on-accent);}
.ip-ts-button:focus-visible{outline:2px solid var(--ip-ts-accent);outline-offset:3px;}

/* ---- Колонка з фото ---- */
.ip-ts-media{flex:0 0 var(--ip-ts-media-width);}

/* Кадри лежать в одній комірці сітки: контейнер тримає задані пропорції,
   а не сумарну висоту всіх фото. */
.ip-ts-slider{
  position:relative;display:grid;
  aspect-ratio:var(--ip-ts-media-ratio);
  overflow:hidden;background:var(--ip-ts-placeholder);
}
.ip-ts-slide{
  grid-area:1/1;position:relative;
  opacity:0;visibility:hidden;
  transform:translateX(calc(20px * var(--ip-ts-dir,1)));
  transition:opacity var(--ip-ts-speed) ease,
             transform var(--ip-ts-speed) cubic-bezier(.33,0,.2,1),
             visibility var(--ip-ts-speed);
}
.ip-ts-slide.is-active{opacity:1;visibility:visible;transform:translateX(0);}

.ip-ts-image{display:block;width:100%;height:100%;object-fit:cover;}
/* затемнення знизу, щоб риски читалися на будь-якому кадрі */
.ip-ts-slide::after{
  content:"";position:absolute;inset:auto 0 0;height:58%;
  background:linear-gradient(to top,rgba(15,17,18,.8),rgba(15,17,18,0));
  pointer-events:none;
}

/* ---- Риски: поверх фото, по центру знизу ---- */
.ip-ts-dots{
  position:absolute;left:0;right:0;bottom:22px;z-index:2;
  display:flex;justify-content:center;align-items:center;gap:9px;
  pointer-events:none;                /* клікабельні самі риски */
}
.ip-ts-dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);pointer-events:auto;
  transition:width .3s ease,border-radius .3s ease,background .3s ease;
}
.ip-ts-dot.is-active{width:26px;border-radius:5px;background:var(--ip-ts-accent);}
.ip-ts-dot:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* ---- Квадратні стрілки під фото ---- */
.ip-ts-arrows{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.ip-ts-arrow{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border:0;border-radius:0;
  background:var(--ip-ts-accent);color:var(--ip-ts-on-accent);
  cursor:pointer;transition:background .3s ease;
}
.ip-ts-arrow svg{
  width:20px;height:20px;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.ip-ts-arrow:hover{background:var(--ip-ts-accent-dark);}
.ip-ts-arrow:focus-visible{outline:2px solid var(--ip-ts-accent);outline-offset:3px;}

@media (max-width:900px){
  .ip-ts{--ip-ts-gap:32px;--ip-ts-media-width:42%;}
}
@media (max-width:767px){
  .ip-ts{padding:45px 0;--ip-ts-media-ratio:3/2;}
  .ip-ts-layout{flex-direction:column;align-items:stretch;gap:26px;}
  .ip-ts-media{flex:0 0 auto;order:-1;}          /* на мобільному фото зверху */
  .ip-ts-arrows{justify-content:center;}
  .ip-ts-arrow{width:42px;height:42px;}
}

@media (prefers-reduced-motion:reduce){
  .ip-ts *{transition-duration:.01ms !important;}
  .ip-ts-slide{transform:none !important;}
}