/* same CSS as 1.5.6 */
.te-attr-label { font-weight:700; margin: 6px 0 6px; text-transform: uppercase; font-size:14px; letter-spacing:.02em; }
.te-swatches-wrap { margin-top: 6px; display:flex; justify-content:center; }
.te-swatches-wrap--single { justify-content:flex-start; }
.te-swatches { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.te-swatch { --pad-x:10px; --h:30px; min-height:var(--h); border-radius:999px; border:1px solid rgba(0,0,0,.15); background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0 var(--pad-x); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; position:relative; }
.te-swatch:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,.15); }
.te-swatch:hover { transform: translateY(-1px); }
.te-swatch.is-selected { border-color: #111; box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); }

/* Color circles */
.te-swatch--color { width:28px; height:28px; padding:0; }
.te-swatch__dot { width:20px; height:20px; border-radius:999px; display:block; border:1px solid rgba(0,0,0,.15); }

/* Text pills for sizes/others */
.te-swatch--pill .te-swatch__label { font-size:12px; font-weight:600; line-height:1; white-space:nowrap; padding:0 4px; }

/* Out of stock styling */
.te-swatch.is-oos { opacity:.5; cursor:not-allowed; }
.te-swatch.is-oos .te-swatch__label { text-decoration: line-through; }
.te-swatch--color.is-oos .te-swatch__dot { filter:grayscale(100%); opacity:.7; }
.te-swatch.is-oos::after {
  content:""; position:absolute; left:50%; top:50%; width:22px; height:2px; background:rgba(0,0,0,.45);
  transform: translate(-50%,-50%) rotate(-35deg); border-radius:2px; pointer-events:none;
}

/* Hide native select + label on single for the primary attribute */
.summary form.variations_form .label, 
.summary form.variations_form select { display:none !important; }