/* Frontend size chart styling */
.h2h-size-chart {
    margin:20px 0;
}
.h2h-size-chart-title {
    font-size:18px;
    margin-bottom:8px;
    color:#180A32;
}
.h2h-size-chart-table-wrap {
    overflow-x:auto;
}
.h2h-size-chart-table {
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
}
.h2h-size-chart-table th,
.h2h-size-chart-table td {
    border:1px solid #ddd;
    padding:10px;
    text-align:center;
}
.h2h-size-chart-table th {
    background:#180A32;
    color:#fff;
    font-weight:700;
}
.h2h-size-chart-note {
    margin-top:8px;
    font-size:14px;
    color:#444;
}
@media (max-width:600px) {
    .h2h-size-chart-table {
        font-size:14px;
    }
}
/* Toggle container */
.h2h-size-chart .h2h-unit-toggle {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 14px;
}

/* Base toggle button style */
.h2h-size-chart .h2h-unit-toggle .h2h-toggle-unit {
    background: #ffffff;
    border: 1px solid #ccc;
    color: #333;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 16px;
    cursor: pointer;
    line-height: 1.2;
    min-height: 0;
    height: auto;
}

/* Hover */
.h2h-size-chart .h2h-unit-toggle .h2h-toggle-unit:hover {
    background: #f2f2f2;
}

/* Active (selected) state */
.h2h-size-chart .h2h-unit-toggle .h2h-toggle-unit.active {
    background: #180A32;
    color: #fff;
    border-color: #180A32;
}

}