/* One native selection button covers the card; details is a separate action. */
.compact-card,.product-card{position:relative;isolation:isolate}
.option-controls{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;margin-top:auto;order:2}
.option-controls>.option-action{position:static;flex:1 1 0;min-width:0;width:auto;margin:0;order:0;min-height:44px;padding:8px 0;overflow-wrap:anywhere}
.option-controls>.included-label,.option-controls>.availability-label{flex:1 1 0}
.option-controls>.option-action::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;cursor:pointer}
.option-controls>.option-action:disabled::after{cursor:default}
.option-details{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;min-height:44px;padding:8px 0;font-size:12px;line-height:1.4;color:#68706a;background:none;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c5cac5}
.option-details:hover{color:#202820;text-decoration-color:currentColor}
.compact-card:has(.option-action:focus-visible),.product-card:has(.option-action:focus-visible){outline:2px solid #c44e27;outline-offset:3px}
.option-controls>.option-action:focus-visible{outline:none}
.option-details:focus-visible{outline:2px solid #c44e27;outline-offset:3px}
@media(hover:hover){
 .compact-card:has(.option-action:not(:disabled)):hover{border-color:#687565}
 .product-card:has(.option-action:not(:disabled)):hover{border-bottom-color:#687565}
}
@media(max-width:900px),(max-width:1024px) and (max-height:600px){
 .option-controls{gap:6px}
 .option-details{font-size:12px}
 .workspace[data-step="1"] .option-controls,.workspace[data-step="2"] .option-controls{gap:6px}
 .workspace[data-step="1"] .option-details,.workspace[data-step="2"] .option-details{margin-left:auto}
}

.option-controls>.option-action{gap:6px}
.option-controls>.option-action .check{width:18px;height:18px;flex-basis:18px;font-size:12px}
.product-body p.change-note,.compact-body p.change-note,.detail-copy p.change-note{border:0;padding:0;color:#626a64;font-size:12px;line-height:1.55;margin:4px 0 8px}
@media(max-width:900px),(max-width:1024px) and (max-height:600px){
 .workspace[data-step="1"] .option-controls .check,.workspace[data-step="2"] .option-controls .check{position:absolute;top:8px;right:8px}
}
@media(max-width:380px){
 .workspace[data-step="1"] .compact-options,.workspace[data-step="2"] .compact-options{grid-template-columns:1fr}
 .workspace[data-step="1"] .compact-card,.workspace[data-step="2"] .compact-card{display:grid;grid-template-columns:64px minmax(0,1fr)}
 .workspace[data-step="1"] .compact-image,.workspace[data-step="2"] .compact-image{width:64px;height:100%;min-height:90px;aspect-ratio:auto}
 .workspace[data-step="1"] .compact-image.small-art img,.workspace[data-step="2"] .compact-image.small-art img{width:42px;height:42px}
 .workspace[data-step="1"] .option-controls .check,.workspace[data-step="2"] .option-controls .check{top:8px;right:auto;left:6px}
}

/* Selection changes must not move the next choice under the pointer. */
.compact-body>strong{min-height:2.9em}
.option-controls{min-height:44px}
.option-controls>.included-label,.option-controls>.availability-label{min-height:44px;display:flex;align-items:center}
.option-controls>.option-action>span:first-child{min-height:2.8em;display:flex;align-items:center;line-height:1.4}
.product-body>h3{min-height:2.9em}