.size-options { display: flex; flex-direction: column; gap: 8px; } .size-options__header { display: flex; align-items: center; justify-content: space-between; } .size-options__label { font-size: 14px; font-weight: 450; color: #6B645D; text-transform: uppercase; letter-spacing: 0.5px; } .size-options__value { font-size: 13px; font-weight: 600; color: #93402A; min-width: 28px; text-align: right; } .size-options__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: linear-gradient( to right, #93402A 0%, #93402A var(--slider-progress, 50%), rgba(147, 64, 42, 0.2) var(--slider-progress, 50%), rgba(147, 64, 42, 0.2) 100% ); outline: none; cursor: pointer; border: none; } .size-options__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #93402A; cursor: pointer; box-shadow: 0 1px 4px rgba(147, 64, 42, 0.4); transition: transform 0.1s ease; } .size-options__slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .size-options__slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #93402A; cursor: pointer; border: none; box-shadow: 0 1px 4px rgba(147, 64, 42, 0.4); }