/* Main container */
.wc-size-selector {
    margin: 15px auto;
    max-width: 500px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Size type selection */
.size-type-container {
    margin-bottom: 15px;
    text-align: center;
}

.size-type-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.size-type-option {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f9f9f9;
    min-width: 70px; /* 增加最小宽度以适应更长的文本 */
    text-align: center;
    font-size: 14px;
}

.size-type-option.selected {
    border-color: #000;
    background-color: #000;
    color: #fff;
}

/* Size options grid - 3 per row */
.size-options-container {
    margin: 0 auto 15px;
    text-align: center;
}

.size-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列布局 */
    gap: 6px;
    margin: 8px auto 0;
}

.size-option {
    padding: 8px 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f9f9f9;
    text-align: center;
    font-size: 14px;
    
    /* 关键点：使用flexbox让内容自动扩展 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 防止被压缩 */
    flex-shrink: 0;

    /* 不设置固定宽度，让内容决定宽度 */
    white-space: nowrap; /* 保证内容不换行 */
    overflow: visible;   /* 内容不隐藏 */
}

/* Hover effects */
.size-option.selected {
    border-color: #000;
    background-color: #000;
    color: #fff;
}

/* Labels */
.wc-size-selector label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .wc-size-selector {
        max-width: 100%;
        padding: 0 10px;
    }

    .size-options {
        grid-template-columns: repeat(3, 1fr); /* 保持三列布局 */
        gap: 5px;
    }

    .size-type-option, .size-option {
        padding: 6px 4px;
        font-size: 13px;
        min-width: 60px;
    }
}

/* Adjust for very small screens (e.g., mobile portrait) */
@media (max-width: 480px) {
    .size-options {
        grid-template-columns: repeat(2, 1fr); /* 改为两列显示 */
    }

    .size-type-option, .size-option {
        min-width: 100%; /* 满宽显示 */
        font-size: 12px;
        /* 限制最大高度，防止文本显示过长 */
        max-height: 40px; /* 根据实际情况调整 */
        overflow: hidden; /* 隐藏超出部分 */
        
        /* 关键：使用 line-clamp 限制文本显示为 2 行 */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 显示两行 */
        -webkit-box-orient: vertical;
    }
}