.shop-customization,
.shop-finish-picker {
    grid-column: 1 / -1;
    min-width: 0;
}

.shop-finish-picker {
    margin: 0;
    padding: 0;
    border: 0;
}

.shop-finish-picker legend {
    margin-bottom: .6rem;
    font-weight: 700;
}

.shop-finish-options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.shop-cart .shop-finish-options label,
.shop-cart .shop-free-color-toggle {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    font-size: 1rem;
}
.shop-cart .shop-free-color-toggle span,
.shop-cart .shop-finish-options label span { font-size: 1rem; color: inherit; }

.shop-finish-options label {
    padding: .55rem .7rem;
    border: 1px solid #b4a89b;
    border-radius: 6px;
    background: #fffdf9;
}

.shop-finish-options label:has(:checked) {
    border-color: #211e29;
    background: #f1ece4;
}

.shop-finish-options input,
.shop-free-color-toggle input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #211e29;
}

.shop-finish-picker small,
.shop-free-color p {
    display: block;
    margin: .65rem 0 0;
    color: #57515d;
    font-size: .875rem;
    line-height: 1.5;
}

.shop-free-color-toggle {
    margin-top: .7rem;
    font-weight: 700;
}

.shop-free-color {
    display: grid;
    grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.shop-free-color[hidden],
[data-standard-colors][hidden] { display: none; }

.shop-color-wheel {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, transparent 70.71%), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    touch-action: none;
    cursor: crosshair;
    outline: 1px solid #b4a89b;
}

[data-wheel-shade] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #000;
    pointer-events: none;
}

.shop-color-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    outline: 2px solid #211e29;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.shop-color-controls {
    display: grid;
    gap: .45rem;
    min-width: 0;
}

.shop-cart .shop-color-controls label,
.shop-cart .shop-color-fine-tune label {
    display: grid;
    font-size: 1rem;
    color: #211e29;
    min-width: 0;
}

.shop-color-controls input[type="range"],
.shop-color-fine-tune input[type="range"] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    accent-color: #211e29;
}
.shop-color-fine-tune { grid-column: 1 / -1; }
.shop-color-fine-tune summary { min-height: 44px; padding-block: .65rem; cursor: pointer; color: #211e29; font-size: .875rem; }
.shop-color-fine-tune label { display: grid; }

.shop-hex-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    min-width: 0;
}

[data-color-preview] {
    width: 30px;
    height: 30px;
    border: 1px solid #847c71;
    border-radius: 50%;
    flex-shrink: 0;
}

.shop-color-controls input[data-color-hex] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: .5rem;
    border: 1px solid #847c71;
    border-radius: 5px;
    color: #211e29;
    background: #fffdf9;
    font-size: 1rem;
}

.shop-free-color p { grid-column: 1 / -1; margin: 0; }
.shop-free-color .shop-color-error { color: #a22e24; }
.shop-color-error:empty { display: none; }
.shop-color-controls :focus-visible,
.shop-color-fine-tune :focus-visible,
.shop-finish-options :focus-visible,
.shop-free-color-toggle :focus-visible { outline: 3px solid #0b65d8; outline-offset: 3px; }

@media (max-width: 420px) {
    .shop-free-color { grid-template-columns: 120px minmax(0, 1fr); gap: .8rem; }
    .shop-color-wheel { width: 120px; }
    [data-color-preview] { width: 22px; height: 22px; }
}