/* Tarasenko — дизайн-система (світла ніжна тема) для Divi 5 */

:root {
  --tp-bg: #fdfbf8;
  --tp-surface: #ffffff;
  --tp-ink: #3a312c;
  --tp-ink-muted: #7a6a60;
  --tp-primary: #96685a;
  --tp-primary-dark: #7f574b;
  --tp-secondary: #f4ebe3;
  --tp-blush: #f6e9e2;
  --tp-gilt: #b08d5e;
  --tp-border: #e9ded3;
  --tp-radius: 4px;
}

/* --- 1. Базова типографіка ------------------------------------------- */

body,
#page-container {
  background-color: var(--tp-bg);
  color: var(--tp-ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tp-ink);
}

/* Великий редакційний заголовок */
.tp-display,
.tp-display p,
.tp-display h1,
.tp-display h2 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  color: var(--tp-ink) !important;
}

.tp-display .tp-accent,
.tp-accent {
  color: var(--tp-primary) !important;
  font-style: normal;
}

/* Надзаголовок секції */
.tp-eyebrow,
.tp-eyebrow p {
  font-family: "Manrope", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--tp-ink-muted) !important;
  margin-bottom: 0 !important;
}

.tp-lead,
.tp-lead p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--tp-ink-muted) !important;
}

/* --- 2. Кнопки -------------------------------------------------------- */

#page-container .et_pb_button,
#page-container .divi-button,
#page-container a.et_pb_button {
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 15px 30px !important;
  min-height: 48px;
  border-radius: var(--tp-radius) !important;
  border-width: 1px !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

#page-container .et_pb_button:after {
  display: none !important;
}

/* Divi 5 не приймає колір фону кнопки через атрибути блока (у візуальному
   конструкторі це працює, програмно — ні), тому вигляд задаємо тут.
   !important обов'язковий: без нього Divi лишає власний колір тексту
   і на світлому тлі виходить білим по білому. */
#page-container .et_pb_button,
#page-container a.et_pb_button {
  background-color: var(--tp-primary) !important;
  border-color: var(--tp-primary) !important;
  color: #fff !important;
}

#page-container .et_pb_button:hover,
#page-container a.et_pb_button:hover {
  background-color: var(--tp-primary-dark) !important;
  border-color: var(--tp-primary-dark) !important;
  color: #fff !important;
}

/* Кнопка поверх темної секції заклику — навпаки, світла */
#page-container .et_pb_section:has(.tp-on-dark) .et_pb_button {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--tp-primary) !important;
}

#page-container .et_pb_section:has(.tp-on-dark) .et_pb_button:hover {
  background-color: var(--tp-secondary) !important;
  border-color: var(--tp-secondary) !important;
}

/* --- 2b. Статистика під кнопками в hero ------------------------------- */

.tp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
  margin-top: .5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--tp-border);
}

.tp-stat-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 84px;
}

.tp-stat-label {
  font-size: 13px;
  line-height: 1.35;
  color: var(--tp-ink-muted);
}

/* --- 2c. Списки пакетів ----------------------------------------------- */

.tp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.tp-list li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tp-ink-muted);
  padding: 0;
}

.tp-list li em {
  font-size: 13px;
  opacity: .8;
}

/* Тире перед пунктами — як у блоці Premium на основному сайті */
.tp-list-dash li::before {
  content: "—";
  margin-right: .7rem;
  color: var(--tp-ink);
  font-weight: 600;
}

/* Відбивка «70 фото…» від переліку подій вище */
.tp-li-sep {
  display: block;
  margin-top: .5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--tp-border);
}

.tp-note,
p.tp-note {
  font-size: 14px !important;
  color: var(--tp-ink-muted) !important;
}

p.tp-note-center {
  text-align: center;
}

/* --- 3. Картки -------------------------------------------------------- */

.tp-card {
  background-color: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 30px !important;
  height: 100%;
}

.tp-card-featured {
  background-color: var(--tp-secondary) !important;
  border: 2px solid rgba(150, 104, 90, .35) !important;
}

.tp-card-title,
.tp-card-title p {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--tp-ink) !important;
}

.tp-step-num,
.tp-step-num p {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 46px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--tp-gilt) !important;
}

.tp-price,
.tp-price p {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--tp-primary) !important;
  font-variant-numeric: tabular-nums;
}

.tp-stat,
.tp-stat p {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  color: var(--tp-primary) !important;
  line-height: 1.1 !important;
}

/* --- 4. Зображення ---------------------------------------------------- */

/* Divi ставить border-radius на обгортку модуля й лишає overflow: visible,
   тому саме зображення заокруглення не отримує. Вмикаємо обрізання й
   передаємо радіус углиб — так працює і фірмова арка, і звичайні картки. */
.et_pb_image {
  overflow: hidden;
}

.et_pb_image .et_pb_image_wrap {
  display: block;
  border-radius: inherit;
  overflow: hidden;
}

.et_pb_image .et_pb_image_wrap img {
  display: block;
  width: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.tp-zoom .et_pb_image_wrap,
.tp-zoom img {
  border-radius: var(--tp-radius);
  overflow: hidden;
}

.tp-zoom img {
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.tp-zoom:hover img {
  transform: scale(1.04);
}

/* Текст поверх темної секції заклику.
   Клас ставиться на сам елемент, бо Divi 5 не віддає класи модулів у розмітку. */
.tp-on-dark,
p.tp-on-dark,
h1.tp-on-dark,
h2.tp-on-dark,
h3.tp-on-dark {
  color: #fff !important;
}

p.tp-eyebrow.tp-on-dark {
  color: rgba(255, 255, 255, .75) !important;
}

p.tp-lead.tp-on-dark {
  color: rgba(255, 255, 255, .88) !important;
}

/* --- 4b. Єдиний формат фото в галереях ---------------------------------
   Знімки локацій і студій приходять з різних джерел: вертикальні, горизонтальні,
   квадратні. Без спільного співвідношення сітка виглядає рваною.
   Тому задаємо фіксований формат і обрізаємо по центру — вміст кадру
   зберігається, а ряди стають рівними. */

:root {
  --tp-ratio-cover: 3 / 2;   /* обкладинка поруч із текстом */
  --tp-ratio-grid: 4 / 3;    /* плитки галереї */
  --tp-ratio-card: 3 / 2;    /* картки у списках */
}

/* Хедер і футер під ці правила не підпадають: там логотип, і фіксована
   пропорція розчавлювала його в портрет, а шапка через це виростала вдвічі. */
.et-l--header .et_pb_image,
.et-l--footer .et_pb_image {
  aspect-ratio: auto !important;
  overflow: visible !important;
}

/* Явна висота, а не auto: інакше до завантаження картинки коробка нульова
   і сторінка смикається, коли логотип нарешті приходить. */
.et-l--header .et_pb_image img {
  height: 40px !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain !important;
}

.et-l--footer .et_pb_image img {
  height: 48px !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain !important;
}

@media (max-width: 980px) {
  .et-l--header .et_pb_image img {
    height: 34px !important;
  }
}

/* спільні правила заповнення */
.tp-fit .et_pb_image_wrap,
body.single-location .et_pb_image .et_pb_image_wrap,
body.single-studio .et_pb_image .et_pb_image_wrap,
body.page-id-689 .et_pb_image .et_pb_image_wrap,
body.page-id-769 .et_pb_image .et_pb_image_wrap,
body.page-id-402 .et_pb_image .et_pb_image_wrap {
  display: block;
  width: 100%;
  height: 100%;
}

body.single-location .et_pb_image img,
body.single-studio .et_pb_image img,
body.page-id-689 .et_pb_image img,
body.page-id-769 .et_pb_image img,
body.page-id-402 .et_pb_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Обкладинка запису — перше зображення на сторінці */
body.single-location .et_pb_image_0,
body.single-studio .et_pb_image_0 {
  aspect-ratio: var(--tp-ratio-cover);
  width: 100%;
}

/* Решта — плитки галереї */
body.single-location .et_pb_image:not(.et_pb_image_0),
body.single-studio .et_pb_image:not(.et_pb_image_0) {
  aspect-ratio: var(--tp-ratio-grid);
  width: 100%;
  overflow: hidden;
}

/* М'який зум на наведення — плитка не рухає сусідів, бо обрізана рамкою */
body.single-location .et_pb_image:not(.et_pb_image_0) img,
body.single-studio .et_pb_image:not(.et_pb_image_0) img {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

body.single-location .et_pb_image:not(.et_pb_image_0):hover img,
body.single-studio .et_pb_image:not(.et_pb_image_0):hover img {
  transform: scale(1.05);
}

/* Картки у списках студій і локацій */
body.page-id-689 .et_pb_image,
body.page-id-769 .et_pb_image {
  aspect-ratio: var(--tp-ratio-card);
  width: 100%;
  overflow: hidden;
}

/* Описи в картках списку обрізаємо до трьох рядків, а кнопку притискаємо вниз —
   інакше картки в одному ряду мають різну висоту й сітка «стрибає». */
body.page-id-689 .et_pb_column,
body.page-id-769 .et_pb_column {
  display: flex;
  flex-direction: column;
}

body.page-id-689 p.tp-lead,
body.page-id-769 p.tp-lead {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.6em;
}

body.page-id-689 h3.tp-card-title,
body.page-id-769 h3.tp-card-title {
  min-height: 2.2em;
}

/* кнопка «Детальніше» — завжди в нижній частині картки */
body.page-id-689 .et_pb_column .et_pb_button_module_wrapper,
body.page-id-769 .et_pb_column .et_pb_button_module_wrapper,
body.page-id-689 .et_pb_column .et_pb_button:last-child,
body.page-id-769 .et_pb_column .et_pb_button:last-child {
  margin-top: auto;
}

/* Сітка портфоліо на головній — портретний формат під портрети */
body.page-id-402 .et_pb_image {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
}

/* Головне фото в hero має власну арку — формат не чіпаємо */
body.page-id-402 .et_pb_image_0 {
  aspect-ratio: auto;
}

/* На вузьких екранах плитки трохи вищі — так краще читається деталь */
@media (max-width: 767px) {
  body.single-location .et_pb_image:not(.et_pb_image_0),
  body.single-studio .et_pb_image:not(.et_pb_image_0),
  body.page-id-689 .et_pb_image,
  body.page-id-769 .et_pb_image {
    aspect-ratio: 3 / 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-location .et_pb_image img,
  body.single-studio .et_pb_image img {
    transition: none !important;
  }
}

/* --- 5. Фони секцій --------------------------------------------------- */

.tp-bg-soft { background-color: var(--tp-secondary) !important; }
.tp-bg-blush { background-color: var(--tp-blush) !important; }
.tp-bg-primary { background-color: var(--tp-primary) !important; }

.tp-bg-primary h1,
.tp-bg-primary h2,
.tp-bg-primary h3,
.tp-bg-primary p,
.tp-bg-primary .tp-display,
.tp-bg-primary .tp-display p {
  color: #fff !important;
}

.tp-bg-primary .tp-eyebrow p {
  color: rgba(255, 255, 255, .72) !important;
}

/* --- 6. FAQ (Divi toggle) --------------------------------------------- */

.tp-faq .et_pb_toggle,
.tp-faq .et_pb_module.et_pb_toggle {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tp-border) !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
}

.tp-faq .et_pb_toggle_title {
  font-family: "Manrope", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--tp-ink) !important;
  padding: 0 40px 0 0 !important;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.tp-faq .et_pb_toggle_content {
  color: var(--tp-ink-muted) !important;
  font-size: 16px !important;
  padding-top: 4px;
}

/* --- 7. Форми WPForms ------------------------------------------------- */

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="date"],
.wpforms-container select,
.wpforms-container textarea {
  font-family: "Manrope", sans-serif !important;
  font-size: 16px !important;   /* нижче 16px iOS зумить сторінку при фокусі */
  min-height: 48px;
  padding: 12px 14px !important;
  background: var(--tp-surface) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: var(--tp-radius) !important;
  color: var(--tp-ink) !important;
}

.wpforms-container button[type="submit"] {
  background-color: var(--tp-primary) !important;
  color: #fff !important;
  min-height: 48px;
  border: 0 !important;
  border-radius: var(--tp-radius) !important;
}

/* --- 7b. Хедер і футер із Divi Theme Builder --------------------------- */

.et-l--header {
  background-color: var(--tp-bg) !important;
  border-bottom: 1px solid var(--tp-border);
}

.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu__wrap,
.et-l--header .et_pb_menu_inner_container {
  background-color: transparent !important;
}

.et-l--header .et_pb_menu__menu > nav > ul > li > a,
.et-l--header nav > ul > li > a {
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tp-ink-muted) !important;
  /* 44px тач-цілі навіть для коротких пунктів на кшталт «FAQ» */
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 12px 0 !important;
  transition: color .25s ease;
}

.et-l--header nav > ul > li > a:hover {
  color: var(--tp-ink) !important;
  opacity: 1 !important;
}

/* Поточний розділ підсвічуємо кольором бренду */
.et-l--header nav > ul > li.current-menu-item > a,
.et-l--header nav > ul > li.current_page_item > a {
  color: var(--tp-primary) !important;
}

.et-l--header .et_pb_menu__logo img {
  max-height: 44px;
  width: auto;
}

.et-l--footer {
  background-color: var(--tp-secondary) !important;
}

.et-l--footer h1,
.et-l--footer h2,
.et-l--footer h3,
.et-l--footer h4 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 300 !important;
  color: var(--tp-ink) !important;
}

.et-l--footer p,
.et-l--footer li,
.et-l--footer a {
  font-family: "Manrope", sans-serif !important;
  color: var(--tp-ink-muted) !important;
}

.et-l--footer a:hover {
  color: var(--tp-primary) !important;
}

/* У футері кнопки лишались із чорним текстом на рожевому — вирівнюємо */
.et-l--footer .et_pb_button,
.et-l--footer a.et_pb_button,
.et-l--header .et_pb_button,
.et-l--header a.et_pb_button {
  background-color: var(--tp-primary) !important;
  border-color: var(--tp-primary) !important;
  color: #fff !important;
}

.et-l--footer .et_pb_button:hover,
.et-l--header .et_pb_button:hover {
  background-color: var(--tp-primary-dark) !important;
  border-color: var(--tp-primary-dark) !important;
  color: #fff !important;
}

/* Divi виводить для кожної кнопки власне правило з !important і двома
   класами (.et_pb_button_0_tb_footer.et_pb_button). Подвоєння класу
   піднімає нашу специфічність вище — інакше в футері лишався чорний текст. */
.et-l--footer a.et_pb_button.et_pb_button,
.et-l--header a.et_pb_button.et_pb_button,
#page-container a.et_pb_button.et_pb_button {
  color: #fff !important;
  background-color: var(--tp-primary) !important;
  border-color: var(--tp-primary) !important;
}

#page-container .et_pb_section:has(.tp-on-dark) a.et_pb_button.et_pb_button {
  color: var(--tp-primary) !important;
  background-color: #fff !important;
  border-color: #fff !important;
}

/* Модуль соцмереж: круглі плашки з іконками, завжди в один рядок */
ul.et_pb_social_media_follow {
  display: flex !important;
  flex-direction: row !important;
  /* nowrap: у вузькій колонці хедера іконки інакше перескакували на другий рядок */
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

ul.et_pb_social_media_follow li {
  float: none !important;
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.et_pb_social_media_follow li a.icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, opacity .2s ease;
}

.et_pb_social_media_follow li a.icon:hover {
  transform: translateY(-2px);
  opacity: .9;
}

.et_pb_social_media_follow li {
  margin-bottom: 0 !important;
}

.et-l--header .et_pb_social_media_follow {
  margin-bottom: 0 !important;
}

.et-l--footer .et_pb_social_media_follow {
  margin-top: 8px;
}

/* На десктопі соцмережі та кнопка мають стояти в один рядок,
   інакше вони складаються стовпчиком і шапка виростає вдвічі. */
@media (min-width: 981px) {
  .et-l--header .et_pb_column:nth-child(3) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px;
  }

  .et-l--header .et_pb_column:nth-child(3) .et_pb_module {
    margin-bottom: 0 !important;
  }

  .et-l--header .et_pb_social_media_follow li a.icon {
    width: 34px;
    height: 34px;
  }
}

/* --- Мобільний хедер ---------------------------------------------------
   Кнопка «Забронювати» на телефоні прибирається: вона є в мобільному меню
   і в кожній секції сторінки, а в шапці лише ламала висоту. */
@media (max-width: 980px) {
  .et-l--header .et_pb_row {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    width: 92% !important;
  }

  .et-l--header .et_pb_column {
    margin-bottom: 0 !important;
  }

  .et-l--header .et_pb_image img {
    max-height: 38px;
    width: auto;
  }

  .et-l--header .et_pb_button {
    display: none !important;
  }

  .et-l--header .et_pb_social_media_follow {
    display: none !important;
  }

  /* Ряд на всю ширину: лого зліва, гамбургер притиснутий вправо */
  .et-l--header .et_pb_row {
    display: flex !important;
    align-items: center !important;
    width: 92% !important;
    max-width: none !important;
  }

  .et-l--header .et_pb_column:nth-child(1) {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .et-l--header .et_pb_column:nth-child(2) {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  /* Третя колонка (кнопка + соцмережі) на телефоні не потрібна зовсім */
  .et-l--header .et_pb_column:nth-child(3) {
    display: none !important;
  }

  .et-l--header .et_pb_menu__menu {
    display: none !important;
  }

  .et-l--header .et_mobile_nav_menu {
    display: block !important;
    float: none;
    margin: 0 0 0 auto;
  }

  .et-l--header .mobile_menu_bar {
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .et-l--header .mobile_menu_bar:before {
    font-size: 26px;
    line-height: 1;
  }
}

/* Мобільне меню-гамбургер */
.et-l--header .et_pb_menu__icon,
.et-l--header .mobile_menu_bar:before {
  color: var(--tp-ink) !important;
}

.et-l--header .et_mobile_menu {
  background-color: var(--tp-bg) !important;
  border-top-color: var(--tp-primary) !important;
}

.et-l--header .et_mobile_menu li a {
  font-family: "Manrope", sans-serif !important;
  font-size: 15px !important;
  color: var(--tp-ink) !important;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--tp-border) !important;
}

/* --- 7c. Записи «Студії» та «Локації» --------------------------------- */

/* Тема друкує заголовок запису сама, а макет має власний — виходило два <h1>
   з однаковим текстом. Ховаємо тему: наш лишається єдиним і несе той самий текст,
   тож для читачів з екранного диктора нічого не втрачається. */
body.single-studio .entry-title,
body.single-location .entry-title,
body.single-studio .et_post_meta_wrapper > h1,
body.single-location .et_post_meta_wrapper > h1 {
  display: none;
}

/* Заголовок сторінки архіву */
body.post-type-archive-studio .et_pb_title_container h1,
body.post-type-archive-location .et_pb_title_container h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
}

/* --- 7d. Списки посилань у футері ------------------------------------- */

.tp-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tp-footer-nav li {
  padding: 0;
}

.tp-footer-nav a,
.tp-footer-nav li {
  display: flex;
  align-items: center;
  min-height: 44px; /* тач-ціль: короткі слова на кшталт «Ціни» інакше не дотягують */
  font-size: 15px;
  color: var(--tp-ink-muted);
  transition: color .2s ease;
}

.tp-footer-nav a:hover {
  color: var(--tp-primary) !important;
}

.et-l--footer .et_pb_image img {
  max-height: 52px;
  width: auto;
}

/* --- 8. Доступність --------------------------------------------------- */

#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container .et_pb_button:focus-visible,
.wpforms-container input:focus-visible,
.wpforms-container textarea:focus-visible {
  outline: 2px solid var(--tp-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tp-zoom img,
  #page-container .et_pb_button {
    transition: none !important;
  }
}