.variant-browser { min-width: 0; }

.variant-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
}

.variant-head > div { display: grid; }
.variant-head > span { font-size: 11px; }

.variant-tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding: 3px 3px 14px;
    margin: 0 -3px 18px;
    scrollbar-width: thin;
}

.variant-tab {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    gap: 2px;
    min-width: 150px;
    padding: 11px 14px 11px 35px;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    transition: .18s ease;
}

.variant-tab::before {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 10px;
    height: 10px;
    content: "";
    background: #c4ccd8;
    border: 3px solid #eef1f5;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: .18s ease;
}

.variant-tab span { font-size: 11px; font-weight: 780; }
.variant-tab small { color: var(--muted); font-size: 10px; }
.variant-tab:hover { border-color: #94b4ee; transform: translateY(-1px); }
.variant-tab.active { background: #edf4ff; border-color: #7ea6f3; box-shadow: 0 5px 15px rgba(37, 99, 235, .10); }
.variant-tab.active::before { background: var(--blue); border-color: #cfe0ff; }
.variant-tab.active span { color: var(--blue-dark); }

.variant-panel { padding: 21px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.variant-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 15px; margin-bottom: 19px; border-bottom: 1px solid var(--line); }
.variant-title h3 { margin: 0 0 4px; font-size: 18px; }
.variant-title .mono { color: var(--muted); font-size: 10px; }
.variant-offer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.variant-offer > strong { font-size: 20px; }
.variant-offer del { color: var(--muted); font-size: 11px; }

@media (max-width: 620px) {
    .variant-head, .variant-title { align-items: flex-start; flex-direction: column; }
    .variant-tab { min-width: 135px; }
    .variant-panel { padding: 15px; }
    .variant-offer { justify-content: flex-start; }
}