/* WebVue E-Commerce Booster — Variation Buttons (WoodMart aware) */
.wveb-variation-select-hidden {
  position:absolute!important;width:1px!important;height:1px!important;
  margin:0!important;padding:0!important;border:0!important;
  opacity:0!important;overflow:hidden!important;clip-path:inset(50%)!important;
  pointer-events:none!important;
}
.wveb-variation-buttons {display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:2px 0 4px;}
.wveb-variation-button {
  --wveb-var-border:#c9cdd1;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:42px;padding:9px 15px;
  border:1px solid var(--wveb-var-border);border-radius:7px;
  background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;
  line-height:1.2;letter-spacing:.015em;text-align:center;cursor:pointer;
  user-select:none;box-sizing:border-box;transition:border-color .18s,background-color .18s,color .18s,box-shadow .18s;
}
.wveb-variation-button:hover:not([aria-disabled="true"]){border-color:currentColor;}
.wveb-variation-button:focus-visible{outline:2px solid var(--wd-primary-color,#225d66);outline-offset:3px;}
.wveb-variation-button[aria-pressed="true"]:not(.wveb-variation-oos):not(.wveb-variation-invalid){
  background:var(--wd-primary-color,#263b47);color:#fff;border-color:var(--wd-primary-color,#263b47);
}
.wveb-variation-button[aria-disabled="true"]{cursor:not-allowed;color:#999;border-color:#dedede;opacity:.68;background:#f8f8f8;}
.wveb-variation-button.wveb-variation-oos {text-decoration:line-through;text-decoration-thickness:1.4px;}
.wveb-variation-button.wveb-variation-invalid {opacity:.42;border-style:dashed;}
.wveb-shape-square .wveb-variation-button {border-radius:2px;}
.wveb-shape-pill .wveb-variation-button {border-radius:999px;}
.wveb-variation-button .wveb-variation-slash,
.wveb-variation-native .wveb-variation-slash {
  display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:3;
}
.wveb-variation-oos > .wveb-variation-slash,
.wveb-variation-invalid > .wveb-variation-slash {display:block;}
.wveb-variation-slash:after {
  content:"";position:absolute;left:50%;top:50%;width:145%;height:1.5px;
  background:currentColor;opacity:.65;transform:translate(-50%,-50%) rotate(-35deg);
}
/* WoodMart-native swatches keep their original click handlers and appearance.
   We style text swatches as buttons and overlay unavailable states only. */
.wveb-variation-native {position:relative;box-sizing:border-box;}
.wveb-variation-native.wd-text,
.wveb-variation-native.swatch-on-single:not(.swatch-with-bg):not(.wd-bg) {
  min-width:42px;min-height:40px;border:1px solid #c9cdd1;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 12px;line-height:1.25;
}
.wveb-shape-square .wveb-variation-native.wd-text {border-radius:2px;}
.wveb-shape-pill .wveb-variation-native.wd-text {border-radius:999px;}
.wveb-variation-native.wveb-variation-oos {opacity:.48!important;cursor:not-allowed!important;}
.wveb-variation-native.wveb-variation-invalid {opacity:.33!important;cursor:not-allowed!important;}
.wveb-variation-native.wveb-variation-oos.wd-text,
.wveb-variation-native.wveb-variation-invalid.wd-text {text-decoration:line-through;}
/* Prevent parent/native decorative overlays from intercepting the availability slash. */
.wveb-variation-native .wveb-variation-slash {z-index:9;}
@media(max-width:767px) {
 .wveb-variation-buttons{gap:7px;}
 .wveb-variation-button{min-width:42px;min-height:42px;padding:9px 11px;font-size:13px;}
 .wveb-variation-native.wd-text{min-width:42px;min-height:42px;}
}
@media(prefers-reduced-motion:reduce){.wveb-variation-button{transition:none;}}
/* Priority over generic theme button styling, scoped to variation UI only. */
form.variations_form button.wveb-variation-button {
  box-shadow:none;outline-offset:2px;text-transform:none;
  -webkit-appearance:none;appearance:none;
}
form.variations_form button.wveb-variation-button:hover {box-shadow:none;transform:none;}
.wveb-variation-native.wveb-shape-square.wd-text {border-radius:2px;}
.wveb-variation-native.wveb-shape-pill.wd-text {border-radius:999px;}
