/* JV Phase 1: переключатели вариантов группировки.
   Отдельный файл, чтобы не задевать остальные модули. */

/* ===== Карточка товара ===== */
/* #543: у блока есть id=jv-variants (якорь при смене варианта). Отступ под
   липкую ленту/шапку задаёт общее правило `.jv-product__content [id]` в
   jv-product.css — своего scroll-margin-top тут не нужно, оно всё равно
   проигрывало бы ему по специфичности. */
.jv-group__variants { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.jv-group__row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.jv-group__label { margin: 0; color: var(--jv-text-primary); font-size: 16px; font-weight: 500; line-height: 100%; }
.jv-group__label::after { content: ':'; }
.jv-group__values { display: flex; flex-wrap: wrap; gap: 10px; }
.jv-group__value {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 57px; padding: 10px; background: #fff;
    border: 2px solid #d9d9d9; border-radius: 5px;
    font-size: 14px; line-height: 0.715; color: var(--jv-text-primary); text-decoration: none; cursor: pointer;
    transition: border-color .15s, color .15s; white-space: nowrap;
}
.jv-group__value:hover { border-color: var(--jv-primary); color: var(--jv-text-primary); }
.jv-group__value.is-active { border-color: var(--jv-primary); background: #fff; color: var(--jv-text-primary); cursor: default; }
.jv-group__value.is-disabled { color: #d9d9d9; border-color: #d9d9d9; border-style: dashed; pointer-events: none; background: #fff; }

/* ===== Карточка в каталоге (компактно) ===== */
.jv-group-card { display: flex; flex-direction: column; gap: 6px; margin: 0px 10px 25px; }
.jv-group-card__row { display: flex; flex-direction: column; gap: 4px; }
.jv-group-card__label { margin: 0; color: var(--jv-text-primary); font-size: 12px; }
.jv-group-card__values { display: flex; flex-wrap: wrap; gap: 10px; }
.jv-group-card__value {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 51px; height: 32px; padding: 10px; box-sizing: border-box;
    border: 1px solid #999; border-radius: 4px; background: #fff;
    font-size: 12px; line-height: 1; color: #999; text-decoration: none;
    text-align: center; cursor: pointer; white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.jv-group-card__value:hover { border-color: var(--jv-primary); color: var(--jv-text-primary); }
.jv-group-card__value.is-active { border-color: var(--jv-primary); background: #fff; color: var(--jv-text-primary); cursor: default; }
.jv-group-card__value.is-disabled { color: #d9d9d9; border-color: #d9d9d9; border-style: dashed; pointer-events: none; background: #fff; }

/* Фолбэк имени партнёра, когда нет логотипа (временно, до загрузки лого) */
.jv-product__partner-name {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 60px; padding: 10px;
    font-size: 15px; font-weight: 600; color: #1a1a1a; text-align: center;
}
@media (max-width: 1360px){
.jv-group-card__values { display: flex; flex-wrap: wrap; gap: 7.31px; }
.jv-group-card__value {font-size: 12px;padding: 7.31px;min-width: 44px; min-height: 40px;}
.jv-group-card { display: flex; flex-direction: column; gap: 6px; margin: 0px 0 18px; }
}
@media (max-width: 1199px){
    .jv-group-card {
        margin: 0 10px 15px 10px;
      }
}
@media (max-width: 1138px){
        .jv-group-card {
        margin: 0 5px 15px 5px;
      }
  
}
@media (max-width: 980px){
.jv-group-card__values {gap: 2.98px; }
.jv-group-card__value {font-size: 12px;}
.jv-group-card__value {font-size: 12px;padding: 5.97px;min-width: 44px;min-height: 40px;}
.jv-group-card {display: flex;flex-direction: column;gap: 6px;margin: 0px 5px 15px 5px;}
    .jv-group-card__label {margin: 0;color: var(--jv-text-primary);font-size: 12px;font-weight: 500;}
}
@media (max-width: 540px){
.jv-group-card {margin: 0 5px 10px 5px;}
    .jv-group-card__label{font-size:10px;font-weight: 500;}
}
@media (max-width: 360px){
.jv-group-card__value {
font-size: 12px;}
}