.ssk-configurator {
margin: 0 0 24px;
padding: 22px;
border: 1px solid #e8e8e8;
border-radius: 10px;
background: #fff7f1;
color: #333333;
box-sizing: border-box;
}
.ssk-heading { margin: 0 0 8px; color: #151515; font-size: 1.35rem; line-height: 1.3; }
.ssk-description { margin: 0 0 18px; color: #666666; }
.ssk-options { display: grid; gap: 10px; }
.ssk-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
background: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 8px;
}
.ssk-label { font-weight: 700; color: #151515; }
.ssk-controls { display: grid; grid-template-columns: 44px minmax(130px, auto) 44px; align-items: center; gap: 8px; }
.ssk-button {
width: 44px;
height: 44px;
min-width: 44px;
border: 0;
border-radius: 6px;
background: #ff5800;
color: #ffffff;
font-size: 24px;
font-weight: 700;
cursor: pointer;
line-height: 1;
}
.ssk-button:hover:not(:disabled) { background: #d94a00; }
.ssk-button:focus-visible { outline: 3px solid #151515; outline-offset: 2px; }
.ssk-button:disabled { opacity: .35; cursor: not-allowed; }
.ssk-value { min-width: 130px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: #151515; }
.ssk-summary { margin-top: 18px; padding: 16px; border: 1px solid #e8e8e8; border-radius: 8px; background: #ffffff; }
.ssk-summary-line, .ssk-remaining { margin-bottom: 6px; }
.ssk-progress { height: 12px; margin: 12px 0; overflow: hidden; border-radius: 999px; background: #e8e8e8; }
.ssk-progress-bar { width: 0; height: 100%; background: #ff5800; transition: width .2s ease; }
.ssk-message { color: #666666; font-weight: 700; }
.ssk-complete .ssk-summary { border-color: #ff5800; }
.ssk-complete .ssk-message, .ssk-complete .ssk-remaining { color: #151515; }
.ssk-over .ssk-message, .ssk-over .ssk-remaining { color: #a40000; }
form.cart .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) {
.ssk-configurator { padding: 16px; }
.ssk-row { align-items: stretch; flex-direction: column; gap: 10px; }
.ssk-controls { width: 100%; grid-template-columns: 44px minmax(0, 1fr) 44px; }
.ssk-value { min-width: 0; }
}