:root{ --attr-accent:#e8c28d; } /* Hide selects as soon as JS is detected (wp_head adds .js on ) */ html.js form.variations_form select[name^="attribute_"]{ position:absolute !important; left:-9999px !important; width:1px;height:1px;overflow:hidden; opacity:0;pointer-events:none; } /* Keep visible if JS is off */ html:not(.js) form.variations_form select[name^="attribute_"]{ position:static !important; left:auto !important; width:auto;height:auto; opacity:1; pointer-events:auto; } /* Buttons UI */ .attr-buttons{ display:inline-flex; flex-wrap:wrap; gap:10px; vertical-align:middle; margin-left:.5rem; margin-top:10px; } .attr-btn{ min-width:44px; padding:6px 12px; border:1px solid black; border-radius:4px; background:#fff; cursor:pointer; font:inherit; line-height:1.2; transition:transform .04s ease, background .2s, border-color .2s; } .attr-btn:hover{ transform:translateY(-1px); } .attr-btn.is-active{ background:var(--attr-accent); border-color:var(--attr-accent); color:#000; } .attr-btn.is-disabled{ opacity:.45; cursor:not-allowed; text-decoration:line-through; } @media (max-width:540px){ .attr-buttons{ display:flex; margin-left:0; margin-top:6px; } } /* ===== One attribute per row ===== */ form.variations_form .variations{ display: grid !important; /* override any flex */ grid-template-columns: 1fr; /* single column */ row-gap: 12px; /* space between rows */ } form.variations_form .variations .variation{ display: flex; /* label + buttons on same row */ align-items: center; flex-wrap: wrap; gap: 8px 12px; width: 100%; /* ensure full line */ } form.variations_form .variations .variation > label{ margin: 0; /* tidy */ } /* our buttons group should not add extra left margin when using gap */ form.variations_form .attr-buttons{ margin-left: 0; }