/* SDG tweaks: colour swatches on the product page. Astra's text buttons (.ast-single-variation) for the colour
 * attribute become circles; the label stays in the DOM for screen readers and as a tooltip. The clicked element is
 * still the button itself (inner spans take no pointer events: Astra reads event.target). */
.ast-variation-button-group .ast-single-variation.sdg-swatch{position:relative;display:inline-flex !important;align-items:center;justify-content:center;width:42px;height:42px;padding:0 !important;margin:0 10px 10px 0 !important;border:1px solid transparent !important;border-radius:50% !important;background:transparent !important;color:inherit !important;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,transform .15s}
.ast-variation-button-group .ast-single-variation.sdg-swatch *{pointer-events:none}
.sdg-swatch__dot{display:block;width:32px;height:32px;border-radius:50%;background:var(--sdg-swatch,#ddd) center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sdg-swatch--light .sdg-swatch__dot{box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.sdg-swatch__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (hover:hover){.ast-variation-button-group .ast-single-variation.sdg-swatch:hover{border-color:#9a9a9a !important;transform:translateY(-1px)}}
.ast-variation-button-group .ast-single-variation.sdg-swatch:focus-visible{outline:none;border-color:#191919 !important;box-shadow:0 0 0 3px rgba(25,25,25,.12)}
.ast-variation-button-group .ast-single-variation.sdg-swatch.active{border:2px solid #191919 !important;background:transparent !important}
.ast-variation-button-group .ast-single-variation.sdg-swatch.active .sdg-swatch__dot{width:30px;height:30px}
/* a colour the chosen size does not come in: Astra fades the button; add a stroke so it reads at a glance */
.ast-variation-button-group .ast-single-variation.sdg-swatch[aria-disabled="true"] .sdg-swatch__dot{position:relative;overflow:hidden}
.ast-variation-button-group .ast-single-variation.sdg-swatch[aria-disabled="true"] .sdg-swatch__dot::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);transform:rotate(45deg)}
/* "Color: Black" next to the attribute label, written by swatches.js */
.sdg-swatch__pick{font-weight:400;color:#6b6b6b}
.sdg-swatch__pick::before{content:": "}