/* =========================================================================
   pr_view.css — блок вариантов товара (модуль синхронизации / «онлайнер»)
   Задачи:
   1) Переместить блок .test556 наверх — сразу под ценой и кнопкой
      «В корзину» (туда, где раньше был кастомный вывод вариантов).
   2) Стилизовать варианты под дизайн сайта (тема prostore):
      текстовые опции  -> «пилюли» как .sku__pill
      опции-картинки   -> свотчи как .sku__color
      подпись строки   -> как .sku__variant-label
   Токены темы: --ink, --text, --text-soft, --border, --accent,
   --accent-tint, --surface, --r-pill, --r-md, --ease.
   Правила используют !important и повышенную специфичность, чтобы
   перебить инлайновые стили, которые модуль печатает в <style> на странице.
   ========================================================================= */

/* ---- 1. ПОЗИЦИЯ БЛОКА ВНУТРИ .sku__desc (flex-колонка) ------------------ */
/* .sku__desc задан как display:flex; flex-direction:column.
   Ставим: цена/кнопка (1) -> варианты (2) -> всё остальное (3),
   исходный порядок остальных блоков при этом сохраняется.            */
.sku__desc > .sku__group.order-1        { order: 1 !important; }  /* наличие/цена/корзина */
.sku__desc .test556                     { order: 2 !important; }  /* варианты — сюда  */
.sku__desc > .sku__group:not(.order-1)  { order: 3 !important; }  /* остальное ниже   */

/* ---- 1a. FALLBACK: авто-вариации (онлайнер) ИЛИ ручные (сайт) -------------
   Логика: если у товара есть вариации онлайнера (.test556 со строками) —
   показываем их, а ручные (.sku__group--variants) прячем, чтобы не дублировать.
   Если у онлайнера вариаций нет — прячем пустой блок онлайнера и показываем
   ручные вариации сайта (они попадают в тот же слот — сразу под ценой).
   Внешний вид для пользователя одинаковый.                                   */
.sku__desc .test556:not(:has(.offers-description-filter__row)){ display:none !important; }
.sku__desc:has(.test556 .offers-description-filter__row) .sku__group--variants{ display:none !important; }

/* ---- 2. КОНТЕЙНЕР -------------------------------------------------------- */
.test556 {
    padding: 0 !important;
    margin: 4px 0 4px !important;
    font-family: inherit !important;   /* убрать навязанный Roboto */
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Одна характеристика (строка «Подпись + опции») — вертикально, как в теме */
.test556 .offers-description-filter__row {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    font-size: inherit !important;
}

/* Подпись строки: «Формат SIM-карты:», «Объём встроенной памяти:» и т.д. */
.test556 .offers-description-filter__label {
    display: block !important;
    width: auto !important;
    padding: 0 0 12px !important;
    font-size: .95rem !important;
    line-height: 1.3 !important;
}
.test556 .offers-description-filter__sign {
    display: block !important;
    height: auto !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}

/* Контейнер опций */
.test556 .offers-description-filter__field {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---- 3. ТЕКСТОВЫЕ ОПЦИИ («пилюли», как .sku__pill) ---------------------- */
.test556 .offers-description-filter-control {
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex;
    text-decoration: none !important;
}
.test556 .offers-description-filter__field .offers-description-filter-control__switcher-inner {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 10px 18px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r-pill) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease) !important;
}
.test556 a.offers-description-filter-control:hover .offers-description-filter-control__switcher-inner {
    border-color: var(--text-soft) !important;
}

/* Выбранная текстовая опция (класс ytszxgb45) — тёмная «пилюля» */
.test556 .ytszxgb45 .offers-description-filter-control__switcher-inner {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
    cursor: default;
    pointer-events: none;
}

/* Недоступная опция (нет в наличии: sort0 / nonstockpr) — приглушённая, без пунктира */
.test556 .sort0 .offers-description-filter-control__switcher-inner,
.test556 .nonstockpr .offers-description-filter-control__switcher-inner {
    border-style: solid !important;
    border-color: var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-soft) !important;
    opacity: .65 !important;
}
.test556 .sort0 .offers-description-filter-control__switcher-inner {
    text-decoration: line-through !important;
    text-decoration-color: var(--text-soft) !important;
}

/* ---- 4. ОПЦИИ-КАРТИНКИ (свотчи, как .sku__color) ----------------------- */
.test556 .imagegbfa {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    overflow: visible !important;
    width: 100%;
}
.test556 a.imageoptfb {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
    text-decoration: none !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 1 !important;
}
.test556 .offers-description-filter__field .imageoptfb img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover;
    display: block;
    padding: 4px;
    border: 2px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface);
    box-sizing: border-box;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.test556 a.imageoptfb:hover img {
    border-color: var(--text-soft) !important;
    transform: translateY(-2px);
}
.test556 .imageoptfb div {
    width: 64px !important;
    font-size: .74rem !important;
    line-height: 1.2;
    color: var(--text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Выбранный свотч-картинка (ytszxgb45.imageoptfb) — рамка акцента + кольцо */
.test556 .offers-description-filter__field .ytszxgb45.imageoptfb img {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.test556 .ytszxgb45.imageoptfb div {
    color: var(--text) !important;
    font-weight: 700;
}

/* Недоступный свотч-картинка */
.test556 .sort0.imageoptfb {
    opacity: .5 !important;
}
.test556 .sort0.imageoptfb img {
    border-style: solid !important;
    border-color: var(--border) !important;
}

/* ---- 5. Прочее --------------------------------------------------------- */
/* «Нет в наличии» бейдж поверх картинки, если модуль его печатает */
.test556 .mlakts {
    position: absolute;
    top: 0; right: 0;
    padding: 2px 6px;
    font-size: .7rem;
    color: #fff;
    background: var(--danger);
    border-radius: 0 var(--r-md) 0 var(--r-md);
}

@media (max-width: 575px) {
    .test556 .offers-description-filter__field { width: 100% !important; }
}

/* =========================================================================
   ДОРАБОТКИ КАРТОЧКИ ТОВАРА (через pr_view.css)
   Файл грузится модулем напрямую и не кэшируется OpenCart, поэтому правки
   применяются сразу — в отличие от product.twig / app.min.css.
   ========================================================================= */

/* (1) Убрать превью 9 характеристик справа от фото;
       «Все характеристики» превратить в кнопку */
.sku__details .sku__details-title{ display:none !important; }
.sku__details .sku__details-table{ display:none !important; }
.sku__details-action{ margin:0 !important; }
.sku__details-action .ui-link{
    display:inline-flex !important; align-items:center; justify-content:space-between; gap:8px;
    width:100%; box-sizing:border-box; height:42px; padding:0 18px;
    border:1.5px solid var(--border); border-radius:var(--r-pill);
    background:var(--surface-2); color:var(--text) !important;
    font-weight:700; font-size:.92rem; text-decoration:none !important;
    transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.sku__details-action .ui-link:hover{ background:var(--ink); color:#fff !important; border-color:var(--ink); }
.sku__details-action .ui-link::after{
    content:""; width:8px; height:8px; flex:none;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(-45deg);
}

/* (2) Убрать «Информацию о доставке» и кнопку «Поделиться» из карточки */
.sku__desc > .sku__group.order-6{ display:none !important; }   /* доставка */
.sku__desc > .sku__group.order-8{ display:none !important; }   /* поделиться */

/* (3) Нижняя таблица характеристик: ровные отступы у всех строк
       (раньше чётные строки съезжали на 12px) */
.details__specifications-table th,
.details__specifications-table td{ padding-left:14px !important; }
.details__specifications-table tr:nth-child(even) th,
.details__specifications-table tr:nth-child(even) td{ padding-left:14px !important; }

/* (4) Формы «Оставить отзыв» / «Задать вопрос» — центрированное окно.
       ВАЖНО: на десктопе тема вешает is-open по НАВЕДЕНИЮ — поэтому показываем
       только по клику: десктоп — по классу is-form-open (сниппет forms-fix.js /
       product.twig), мобильный — по is-open (штатный клик, ≤1199). */
.details__comments-form.is-open .details__comments-form-offcanvas,
.details__comments-form.is-form-open .details__comments-form-offcanvas{
    position:fixed !important; inset:0 !important;
    flex-direction:column; align-items:center; justify-content:flex-start;
    background:rgba(0,0,0,.5) !important;
    z-index:9999 !important;
    overflow:auto; padding:5vh 16px !important;
}
/* показ по клику */
.details__comments-form.is-form-open .details__comments-form-offcanvas{ display:flex !important; }
@media (max-width:1199px){
  .details__comments-form.is-open .details__comments-form-offcanvas{ display:flex !important; }
}
/* белое окно по центру */
.details__comments-form-offcanvas-in{
    background:#fff; width:100%; max-width:560px; margin:0 auto;
    border-radius:20px; padding:28px 26px;
    box-shadow:0 20px 60px rgba(0,0,0,.28);
}
/* «Закрыть» лежит вне окна (в теме — абсолютный сверху). Ставим под окном по центру */
.details__comments-form-close{
    position:static !important;
    margin:16px auto 0 !important;
    display:inline-block !important;
    background:transparent !important; border:0 !important;
    color:#fff !important; font-weight:600; cursor:pointer; opacity:.9;
}
.details__comments-form-close:hover{ opacity:1; text-decoration:underline; }

/* Звёзды рейтинга: в теме нет правила для :checked — поэтому выбор не заполнял
   звёзды. Добавляем заполнение при выборе и корректный предпросмотр при наведении. */
.ui-rating__input:checked ~ .ui-rating__star .icon-star{ color:var(--accent) !important; }
.ui-rating:hover .ui-rating__star .icon-star{ color:var(--border) !important; }
.ui-rating__star:hover .icon-star,
.ui-rating__star:hover ~ .ui-rating__star .icon-star{ color:var(--accent) !important; }

/* (5) Fancybox при увеличении фото: миниатюры снизу горизонтально + круглые стрелки */
.fancybox-thumbs{
    top:auto !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:auto !important; height:96px !important;
    background:rgba(20,20,20,.92) !important; padding:10px 12px !important;
    overflow-x:auto !important; overflow-y:hidden !important;
}
.fancybox-show-thumbs .fancybox-inner{ right:0 !important; bottom:96px !important; }
.fancybox-thumbs__list{ display:flex !important; gap:8px !important; width:auto !important; height:100% !important; white-space:nowrap; overflow:visible; }
.fancybox-thumbs__list a{ float:none !important; flex:0 0 auto !important; width:74px !important; height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; border-radius:8px; }
.fancybox-thumbs__list a::before{ border-width:3px !important; border-color:var(--accent,#FF5630) !important; border-radius:8px; }
.fancybox-navigation .fancybox-button{ width:52px; height:52px; top:calc(50% - 26px); background:rgba(20,20,20,.55); border-radius:50%; color:#fff; }
.fancybox-navigation .fancybox-button:hover{ background:rgba(20,20,20,.9); }
.fancybox-navigation .fancybox-button div{ padding:14px; }
.fancybox-show-nav .fancybox-navigation .fancybox-button{ opacity:1 !important; visibility:visible !important; }
@media (max-width:576px){
  .fancybox-thumbs{ height:78px !important; }
  .fancybox-show-thumbs .fancybox-inner{ bottom:78px !important; }
  .fancybox-thumbs__list a{ width:60px !important; }
  .fancybox-navigation .fancybox-button{ width:42px; height:42px; top:calc(50% - 21px); }
}

/* (6) Мобильная шапка (правки применяются на страницах товара):
       - убрать чёрную плашку с телефоном (номер уже есть в шапке);
       - номер в шапке прижать к правому краю;
       - заодно чиним мобильный поиск: панель поиска (fixed) лежит внутри
         .header__group, которому тема ставит display:none — из-за чего панель
         не рендерится. Показываем группу (иконки внутри прячем), верхнюю лупу
         убираем; поиск открывается из нижнего меню. */
@media (max-width:1199px){
  .header__topline{ display:none !important; }
  .header{ top:0 !important; }

  .header__mobile .header__group{ display:flex !important; margin-left:0 !important; }
  .header__mobile .header__group > *{ display:none !important; }
  .header__mobile .header__group > .header__search{ display:block !important; }
  .header__mobile .header__group > .header__search > .header__search-btn{ display:none !important; }
  .header__search-offcanvas{ z-index:260; }

  .header__mobile{ gap:0 !important; }               /* убрать зазор после номера, чтобы прижался вплотную */
  .header__logo{ margin-right:0 !important; }
  .header__mobile-phone{ display:inline-flex !important; margin-left:auto !important; }
}

/* =========================================================================
   ДОРАБОТКИ (по новым замечаниям)
   ========================================================================= */

/* (1) Активная пилюля памяти/вариации: текст был серым (ссылка ведёт на
       текущую страницу → :visited перебивал цвет). Форсируем читаемость. */
.sku__pill.is-active,
.sku__pill.is-active:visited{ background:var(--ink) !important; color:#fff !important; border-color:transparent !important; }
.sku__color.is-active,
.sku__color.is-active:visited{ border-color:var(--accent) !important; }

/* (4) Единая высота кнопок в карточке (были 42/44/46/52 → делаем 50) */
.sku__desc .sku__action .ui-btn,
.sku__desc .sku__details-action .ui-link{
    height:50px !important; min-height:50px !important; --h:50px !important;
}
.sku__desc .sku__addto-btn{
    min-height:50px !important; padding-top:0 !important; padding-bottom:0 !important;
}

/* (2) Формы «Оставить отзыв» / «Задать вопрос».
       Мобильный — по клику (класс is-open от штатного js-toggle, правило выше).
       Десктоп — нужен JS (сниппет ниже / product.twig): вешает класс is-form-open. */

/* Неактивная вариация памяти/ОЗУ (нет в выбранном цвете) */
.sku__pill.is-disabled{
    opacity:.4 !important; pointer-events:none; cursor:default;
    text-decoration:line-through; background:var(--surface-2) !important; color:var(--text-soft) !important;
}

/* Кнопки в карточке товара: по одной на строку, на всю ширину */
.sku__action .row{ display:block !important; }
.sku__action .ui-add-to-cart, .sku__action .ui-btn{ width:100% !important; min-width:0 !important; max-width:none !important; }
.sku__addto{ display:flex !important; flex-direction:column !important; gap:10px !important; }
.sku__addto > li{ width:100%; }
.sku__addto-btn{ width:100% !important; justify-content:center; }

/* Модалка отзыва/вопроса: «Закрыть» — крестиком в углу окна (не под окном) */
.details__comments-form-offcanvas-in{ position:relative; padding-top:44px !important; }
.details__comments-form-close{
    position:absolute !important; top:12px !important; right:14px !important;
    margin:0 !important; width:34px; height:34px; padding:0 !important;
    font-size:0 !important; color:transparent !important;
    background:var(--surface-2) !important; border-radius:50% !important; opacity:1 !important;
}
.details__comments-form-close::before{
    content:"×"; font-size:24px; line-height:34px; color:var(--text) !important;
    display:block; text-align:center;
}

/* Быстрый заказ — убрать (страховка, если шаблон не обновился) */
.sku__action .js-button-fast-cart{ display:none !important; }

/* «Все характеристики» — при наведении текст белый (был тёмный на тёмном) */
.sku__details-action .ui-link:hover,
.sku__details-action .ui-link:hover *,
.sku__details-action .ui-link:focus{
    background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important;
}
.sku__details-action .ui-link:hover::after{ border-color:#fff !important; }