/* Flat monochrome swatches share one frame; weave size and direction stay distinct. */
#form :is([data-choice=grip],[data-choice=bladeFinish],[data-choice=weave]) .surface-symbol{
 display:block;width:88px;height:44px;object-fit:contain;flex-shrink:0;
}
#form :is([data-choice=grip],[data-choice=bladeFinish],[data-choice=weave]) .option>span{
 gap:10px;padding:13px 12px;min-width:0;
}
#form [data-choice=weave] .option-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#form [data-choice=weave] .option{min-width:0}
#form [data-choice=weave] .option>span{width:100%;max-width:none}
@media(max-width:760px){
 #form [data-choice=bladeFinish] .option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #form [data-choice=bladeFinish] .option>span{width:100%}
 #form [data-choice=weave] .option-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #form :is([data-choice=grip],[data-choice=bladeFinish],[data-choice=weave]) .surface-symbol{width:72px;height:36px}
 #form :is([data-choice=grip],[data-choice=bladeFinish],[data-choice=weave]) .option>span{padding:12px 8px}
}