/* Focused hardware steps keep every accessory within easy reach. */
.hardware-step .studio-fieldset{margin-bottom:24px}
.hardware-step .studio-fieldset legend{display:flex;align-items:center;gap:12px;font-size:14px;margin-bottom:12px}
.hardware-step .optional-label{font-size:10px;font-weight:400;color:#767676}
.hardware-step .material-card{border-radius:7px;gap:12px;padding:10px 28px 10px 10px;flex-direction:row;align-items:center;min-height:90px}
.hardware-step .material-card[aria-pressed=true],.hardware-step .finish-option[aria-pressed=true]{border-color:#171717;box-shadow:0 0 0 1px #171717;background:#f4f4f1}
.hardware-step .material-card[aria-pressed=true]:after{width:17px;height:17px;right:6px;top:6px;font-size:10px;background:#171717}
.hardware-step .material-card:hover,.hardware-step .finish-option:hover{border-color:#666}
.hardware-step .hardware-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hardware-step .material-photo{flex:0 0 64px;width:64px;height:64px;aspect-ratio:1;border-radius:4px}
.hardware-step .material-photo img{width:100%;height:100%;padding:3px;object-fit:contain}
.hardware-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.hardware-copy strong{font-size:12px;font-weight:500;line-height:1.4}
.hardware-copy small{display:block;font-size:10px;line-height:1.4;color:#686868}
.hardware-step .no-hardware{justify-content:flex-start;align-items:center;min-height:90px}
.hardware-step .no-hardware-mark{display:grid;place-items:center;flex:0 0 64px;height:64px;font-size:28px;color:#929292;border:1px dashed #d5d5d0;border-radius:4px}
.hardware-step .finish-grid{gap:9px}
.hardware-step .finish-option{flex-direction:row;gap:10px;text-align:left;padding:12px 10px;border-radius:7px;min-height:70px;height:auto}
.hardware-step .finish-option .finish-swatch{flex:0 0 28px;width:28px;height:28px;margin:3px}
.hardware-step .finish-option[aria-pressed=true] .finish-swatch{outline-color:#171717;outline-offset:3px}
.hardware-step .finish-option .hardware-copy{flex:1}
.hardware-step .finish-option strong{font-size:11px}
.hardware-step .studio-extra{padding:12px 14px;border-radius:7px}
.hardware-step .extra-info>summary{top:10px}
.hardware-step .studio-extra input{accent-color:#171717}
.shower-build{width:100%;margin-top:18px;padding-top:0}
.build-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.build-heading h3{font-family:inherit;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.build-heading>span{font-size:10px;color:#72766f}
.build-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.build-row{display:flex;align-items:center;gap:9px;min-width:0;min-height:64px;padding:10px 0;text-align:left;border-bottom:1px solid #dfe1dc;color:#222}
.build-thumb{display:grid;place-items:center;flex:0 0 30px;width:30px;height:34px;border-radius:4px;overflow:hidden;background:#fff;border:1px solid #e3e3dc;color:#747873}
.build-thumb img{width:100%;height:100%;object-fit:cover}
.build-thumb svg{width:20px;height:20px}.build-thumb i{width:18px;height:18px;border:1px solid #0002;border-radius:50%}
.build-copy{flex:1;min-width:0}.build-label{display:block;font-size:9px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:#747770;margin-bottom:3px}
.build-value{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.build-copy small{display:block;font-size:9px;line-height:1.5;color:#8a5d30;margin-top:3px}
.build-row.is-missing .build-label{color:#885f32}.build-row.is-missing .build-thumb{border-style:dashed;border-color:#bca480}
.build-row.is-optional .build-value{color:#747770}
.build-edit{flex:0 0 10px;width:10px;height:14px;opacity:.4}.build-row:hover .build-edit{opacity:1}
.build-row:focus-visible{outline:2px solid #222;outline-offset:3px}
@media(min-width:761px){
 .config-page.is-shower .config-preview{position:static;max-height:none;overflow:visible;padding:24px}
 .config-page.is-shower .preview-heading{margin-bottom:12px}
 .config-page.is-shower .shower-preview-content h3{font-size:19px;margin:8px 0 14px}
 .config-page.is-shower .shower-preview-image{height:clamp(260px,34dvh,340px)}
 .config-page.is-shower .shower-preview-content>p{margin-top:9px;font-size:10px;line-height:1.6}
 .config-page.is-shower .preview-meta{margin-top:8px;padding:10px 0;font-size:9px}
 .config-page.is-shower .stepper{gap:7px 12px}
 .config-page.is-shower .stepper button{font-size:9px}
}
@media(min-width:761px) and (max-width:1100px){.build-rows{grid-template-columns:1fr}.hardware-step .finish-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 .config-page .shower-build{display:none}
 .hardware-step .material-card{flex-direction:column;align-items:stretch;padding:9px;gap:7px;min-height:0}
 .hardware-step .material-photo{width:100%;height:70px;flex:auto;aspect-ratio:auto}
 .hardware-step .hardware-copy strong{font-size:11px}
 .hardware-step .hardware-copy small{font-size:10px}
 .hardware-step .no-hardware{justify-content:center;align-items:center;min-height:130px;text-align:center}
 .hardware-step .no-hardware-mark{height:40px;width:40px;flex:auto;max-height:40px}
 .hardware-step .finish-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hardware-step .finish-option{min-height:62px;padding:10px 8px}
 .config-page.is-shower .stepper{justify-content:flex-start;overflow-x:auto;gap:4px;scrollbar-width:none}
 .config-page.is-shower .stepper li{flex:0 0 40px!important}
 .config-page.is-shower .stepper button{position:relative;width:40px;min-height:44px}
}
/* The image itself opens the large preview, without a frame or text bar. */
.config-page.is-shower .shower-preview-image{border:0;background:transparent;cursor:zoom-in}
.config-page.is-shower .shower-preview-image img{object-fit:contain;padding:0}
.config-page.is-shower .shower-preview-image>.preview-zoom-icon{inset:auto 10px 10px auto;width:36px;height:36px;padding:8px;display:grid;place-items:center;background:#ffffffed;border:0;border-radius:50%;box-shadow:0 2px 12px #0001;opacity:0;transform:translateY(3px);transition:opacity .18s,transform .18s;pointer-events:none}
.preview-zoom-icon svg{width:20px;height:20px}
.config-page.is-shower .shower-preview-image:hover>.preview-zoom-icon,.config-page.is-shower .shower-preview-image:focus-visible>.preview-zoom-icon{opacity:1;transform:none}
.config-page.is-shower .shower-preview-image:focus-visible{outline:2px solid #222;outline-offset:4px}
@media(hover:none),(max-width:760px){.config-page.is-shower .shower-preview-image>.preview-zoom-icon{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.config-page.is-shower .shower-preview-image>.preview-zoom-icon{transition:none}}
.config-page.is-shower .preview-heading{display:none}