.custom-size-chart-wrapper {
font-family: inherit; max-width: 800px;
margin: 0 auto;
} .size-chart-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 10px;
}
.tab-btn {
background: transparent;
border: none;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
color: #555;
transition: all 0.3s ease;
border-radius: 2px;
letter-spacing: 1px;
}
.tab-btn:hover {
color: #a68b6c;
}
.tab-btn.active {
background-color: #a68b6c; color: #ffffff;
} .tab-content {
display: none;
animation: fadeIn 0.5s;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
} .size-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 14px;
border: 1px solid #e0e0e0;
border-radius: 2px;
overflow: hidden;
}
.size-table th {
background-color: #f9f9f9;
color: #1a1a1a;
padding: 15px;
text-align: center;
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
border-bottom: 2px solid #e0e0e0;
}
.size-table td {
padding: 12px 15px;
text-align: center;
border-bottom: 1px solid #e0e0e0;
color: #333;
}
.size-table tr:last-child td {
border-bottom: none;
}
.size-table tr:nth-child(even) {
background-color: #fafafa;
} .model-info {
background: #f5f5f5;
padding: 15px;
border-radius: 2px;
font-size: 13px;
color: #555;
border-left: 3px solid #a68b6c;
} @media (max-width: 600px) {
.size-chart-tabs {
flex-wrap: wrap;
}
.tab-btn {
flex: 1 1 30%;
text-align: center;
padding: 8px 5px;
font-size: 12px;
}
.size-table th, .size-table td {
padding: 8px 5px;
font-size: 12px;
}
}