/* ===== Блок «Как сделать заказ» под кнопкой ===== */

.howto-order-block {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;        /* центр на витрине */
  min-height: 24px;
}

/* На странице товара выравниваем блок по левому краю */
.single-product .summary .howto-order-block {
  justify-content: flex-start;
}

.howto-order-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e53935;
  font-size: 13.5px;
  line-height: 1;
  text-decoration: none;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

.howto-order-link:hover,
.howto-order-link:focus {
  color: #c62828;
  text-decoration: underline;
  outline: none;
}

/* Иконка — пропорциональная, без baseline-зазора */
.howto-order-icon { display: inline-flex; line-height: 0; color: #e53935; }
.howto-order-icon .howto-order-svg { height: 16px; width: auto; display: block; }

/* ===== Лайтбокс ===== */

.howto-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;                   /* скрыт по умолчанию */
}

/* Центрирование лайтбокса по экрану */
.howto-lightbox.is-open {
  display: flex;                   /* flex-контейнер на весь вьюпорт */
  align-items: center;             /* вертикальный центр */
  justify-content: center;         /* горизонтальный центр */
  padding: 16px;                   /* отступы от краёв экрана */
}

.howto-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  z-index: 0;
}

/* Диалог — корневой «positioned ancestor» для абсолютных детей */
.howto-lightbox__dialog {
  position: relative;              /* важен для абсолютного позиционирования кнопки */
  z-index: 1;
  background: #fff;
  border-radius: 10px;
  width: min(900px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 12px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .35);
  margin: 0;                       /* центр даёт flex-обёртка */
  overflow: hidden;
}

.howto-lightbox__title {
  margin: 0 56px 12px 0;           /* запас под кнопку справа */
  font-size: 18px;
  font-weight: 700;
}

/* ===== Кнопка закрытия — справа, круглая, синяя ===== */
/* Усиленная специфичность и принудительное отключение «left» от сторонних стилей */
.howto-lightbox .howto-lightbox__close {
  position: absolute;
  top: 12px;
  left: auto !important;           /* на случай переопределений темой */
  right: 12px !important;          /* фиксируем справа */
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #106cd8;             /* синяя кнопка */
  color: #ffffff;                  /* белый «крестик» */
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16, 108, 216, .35);
  z-index: 2;                      /* поверх заголовка */
}

.howto-lightbox .howto-lightbox__close:hover,
.howto-lightbox .howto-lightbox__close:focus-visible {
  background: #0b5fc1;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* Видео — адаптивный контейнер 16:9 */
.howto-lightbox__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.howto-lightbox__video-el {
  width: 100%;
  height: 100%;
  display: block;
}

/* Утилита для скрытия текста визуально, но не для скринридеров */
.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Мобильные корректировки ===== */
@media (max-width: 360px) {
  .howto-lightbox__title { font-size: 16px; margin-right: 52px; }
  .howto-lightbox .howto-lightbox__close { width: 36px; height: 36px; font-size: 20px; top: 8px; right: 8px !important; }
  .howto-order-link { font-size: 13px; }
}