/* xgroup 1.0.2: переключатель вариантов */

/* ---------- Общие ---------- */
.xgroup-variants{margin:0 0 20px;font-size:15px;line-height:1.3}
.xgroup-variants *,.xgroup-variants *::before,.xgroup-variants *::after{box-sizing:border-box}
.xgroup-variants .xgroup-feature{margin:0 0 20px}
.xgroup-variants .xgroup-feature:last-child{margin-bottom:0}
.xgroup-variants .xgroup-feature__title{margin:0 0 10px;font-size:14px;line-height:1.3;font-weight:400;color:#6b6b6b}
.xgroup-variants .xgroup-feature__current{font-weight:500;color:#1a1a1a}
.xgroup-variants .xgroup-values{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.xgroup-variants .xgroup-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Кнопка значения ---------- */
.xgroup-variants .xgroup-value{
    position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:56px;min-height:44px;margin:0;padding:0 16px;
    border:1px solid #d0d0d0;border-radius:8px;background:#fff;
    color:#1a1a1a;font:inherit;font-size:15px;font-weight:400;line-height:1.2;letter-spacing:normal;
    text-decoration:none;white-space:nowrap;cursor:pointer;
    transition:border-color .15s ease,box-shadow .15s ease,color .15s ease}
.xgroup-variants a.xgroup-value:hover,
.xgroup-variants a.xgroup-value:focus-visible{border-color:#8a8a8a;color:#1a1a1a;text-decoration:none;outline:none}
.xgroup-variants a.xgroup-value:focus-visible{box-shadow:0 0 0 3px rgba(26,26,26,.15)}
/* выбранное: рамка 2px без сдвига размеров */
.xgroup-variants .xgroup-value.is-selected{border-color:#1a1a1a;box-shadow:inset 0 0 0 1px #1a1a1a;cursor:default}
/* нет в наличии: серый текст, рамка сплошная */
.xgroup-variants .xgroup-value.is-unavailable:not(.is-selected){color:#a0a0a0;background:#fafafa}
.xgroup-variants .xgroup-value.is-unavailable:not(.is-selected):hover{color:#6b6b6b}
/* «другая комплектация» помечается только если включено в настройках */
.xgroup-variants .xgroup-value.is-other:not(.is-selected)::after{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:#c4c4c4}
.xgroup-variants .xgroup-text{display:block}
.xgroup-variants .xgroup-price{display:block;margin-top:3px;font-size:12px;color:#6b6b6b;white-space:nowrap}
.xgroup-variants .xgroup-value--buttons:has(.xgroup-price){min-height:52px;padding-top:6px;padding-bottom:6px}

/* ---------- Фото варианта ---------- */
.xgroup-variants .xgroup-value--images{width:60px;height:60px;min-width:0;min-height:0;padding:3px;border-radius:10px;background:#fff}
.xgroup-variants .xgroup-value--images.is-selected{padding:3px}
.xgroup-variants .xgroup-thumb{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px;background:#fff}
.xgroup-variants .xgroup-value--images .xgroup-text{font-size:12px;white-space:normal;text-align:center;line-height:1.1}
.xgroup-variants .xgroup-value--images .xgroup-swatch{width:100%;height:100%;border-radius:6px}
.xgroup-variants .xgroup-value--images.is-unavailable:not(.is-selected) .xgroup-thumb{opacity:.45}

/* ---------- Цветные кружки ---------- */
.xgroup-variants .xgroup-value--colors{width:44px;height:44px;min-width:0;min-height:0;padding:4px;border-radius:50%}
.xgroup-variants .xgroup-swatch{display:block;width:100%;height:100%;border-radius:50%;background:#eee;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.xgroup-variants .xgroup-value--colors.is-unavailable:not(.is-selected) .xgroup-swatch,
.xgroup-variants .xgroup-value--images.is-unavailable:not(.is-selected) .xgroup-swatch{opacity:.45}

/* ---------- Выпадающий список ---------- */
.xgroup-variants .xgroup-select{min-width:220px;max-width:100%;height:44px;padding:0 12px;border:1px solid #d0d0d0;border-radius:8px;background:#fff;color:#1a1a1a;font:inherit;font-size:15px}

/* ---------- Телефоны ---------- */
@media (max-width:400px){
    .xgroup-variants .xgroup-value{min-height:40px;padding:0 12px;font-size:14px}
    .xgroup-variants .xgroup-value--images{width:56px;height:56px}
    .xgroup-variants .xgroup-value--colors{width:40px;height:40px}
}

/* ---------- Классический стиль (как в 1.0.1) ---------- */
.xgroup-variants--classic .xgroup-feature{margin-bottom:12px}
.xgroup-variants--classic .xgroup-feature__title{margin-bottom:6px;color:inherit;opacity:.85}
.xgroup-variants--classic .xgroup-feature__current{font-weight:600}
.xgroup-variants--classic .xgroup-value{min-height:36px;padding:6px 12px;border-color:#d9d9d9;font-size:14px}
.xgroup-variants--classic .xgroup-value.is-selected{box-shadow:0 0 0 1px #1a1a1a}
.xgroup-variants--classic .xgroup-value.is-unavailable:not(.is-selected){opacity:.55;color:inherit;background:#fff}
.xgroup-variants--classic .xgroup-value.is-unavailable:not(.is-selected) .xgroup-text{text-decoration:line-through}
.xgroup-variants--classic .xgroup-value.is-other{border-style:dashed}
.xgroup-variants--classic .xgroup-value.is-other::after{display:none}
.xgroup-variants--classic .xgroup-value--colors,
.xgroup-variants--classic .xgroup-value--images{min-height:0;padding:3px}
.xgroup-variants--classic .xgroup-value--colors{width:auto;height:auto;border-style:solid}
.xgroup-variants--classic .xgroup-value--colors .xgroup-swatch{width:28px;height:28px}
.xgroup-variants--classic .xgroup-value--images{width:auto;height:auto}
.xgroup-variants--classic .xgroup-thumb{width:56px;height:56px}

/* ---------- Пометка «Без RuStore» ---------- */
.xgroup-rustore{margin:0 0 20px}
.xgroup-rustore__badge{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border-radius:8px;background:#f2f3f5;color:#1a1a1a;font-size:14px;line-height:1;cursor:help;outline:none}
.xgroup-rustore__badge:focus-visible{box-shadow:0 0 0 3px rgba(26,26,26,.15)}
.xgroup-rustore__icon{display:block;flex:none;width:16px;height:16px;color:#8a8a8a}
.xgroup-rustore__tip{
    position:absolute;z-index:30;left:0;bottom:calc(100% + 8px);
    width:max-content;max-width:260px;padding:10px 12px;border-radius:8px;
    background:#1f1f1f;color:#fff;font-size:13px;font-weight:400;line-height:1.4;text-align:left;white-space:normal;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
    opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.xgroup-rustore__tip::after{content:"";position:absolute;top:100%;left:16px;border:6px solid transparent;border-top-color:#1f1f1f}
.xgroup-rustore__badge:hover .xgroup-rustore__tip,
.xgroup-rustore__badge:focus .xgroup-rustore__tip,
.xgroup-rustore-icon:hover .xgroup-rustore__tip,
.xgroup-rustore-icon:focus .xgroup-rustore__tip{opacity:1;visibility:visible;transform:none}

/* значок в углу фото в списке товаров */
.s-images-wrapper:has(> .xgroup-rustore-icon),
.s-image-wrapper:has(> .xgroup-rustore-icon){position:relative}
.xgroup-rustore-icon{position:absolute;z-index:5;left:6px;bottom:6px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.08);color:#6b6b6b;cursor:help;outline:none}
.xgroup-rustore-icon:hover,.xgroup-rustore-icon:focus-visible{color:#1a1a1a}
.xgroup-rustore-icon .xgroup-rustore__icon{width:16px;height:16px;color:inherit}
.xgroup-rustore-icon .xgroup-rustore__tip{left:-6px;width:220px;max-width:calc(100vw - 32px)}
.xgroup-rustore-icon .xgroup-rustore__tip::after{left:13px}