/* meebd storefront - option picker, swatches and the Details table of the product page (module product-attributes).
   Uses the product page's own tokens (--ct-*, set by shop-catalog.css) so every theme and dark mode follow. */
.sf-vx{display:grid;gap:18px;margin:0 0 6px}
.sf-vx-dim{margin:0;padding:0;border:0;min-width:0}
.sf-vx-dim .sf-pdp-label{display:block;margin-bottom:10px;padding:0}
.sf-vx-options{display:flex;flex-wrap:wrap;gap:10px}
.sf-vx-radios{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sf-vx-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:48px;min-height:44px;color:var(--ct-text,inherit);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sf-vx-opt:focus-visible{outline:2px solid var(--ct-accent,currentColor);outline-offset:3px}

/* text chips, like the one-option pills */
.sf-vx-opt--text{padding:0 18px;border:1px solid var(--ct-border,#cfcfcf);border-radius:999px;background:var(--ct-surface,#fff);font:500 14.5px/1 var(--ct-font,inherit);transition:border-color .12s,background .12s,color .12s}
.sf-vx-opt--text:hover{border-color:var(--ct-text,#111)}
.sf-vx-opt--text.is-selected{background:var(--ct-text,#111);border-color:var(--ct-text,#111);color:var(--ct-surface,#fff)}
.sf-vx-opt--text.is-soldout,.sf-vx-opt--text.is-unavailable{color:var(--ct-muted,#777);text-decoration:line-through;border-style:dashed;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--ct-line,#e5e5e5) 6px 7px)}
.sf-vx-opt--text.is-selected.is-soldout,.sf-vx-opt--text.is-selected.is-unavailable{background:var(--ct-text,#111);color:var(--ct-surface,#fff);border-style:solid}
.sf-vx-opt--text.is-unavailable{opacity:.7}

/* colour dots and picture swatches: a 44px tap target around a 32px swatch */
.sf-vx-opt--colour,.sf-vx-opt--image{width:44px;min-width:44px;padding:0;border-radius:50%}
.sf-vx-dot{display:block;width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.sf-vx-img{display:block;width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid rgba(0,0,0,.2)}
.sf-vx-opt--image{border-radius:10px}
.sf-vx-opt--colour::before,.sf-vx-opt--image::before{content:"";position:absolute;inset:2px;border-radius:50%;border:2px solid transparent;pointer-events:none;transition:border-color .12s}
.sf-vx-opt--image::before{border-radius:10px}
.sf-vx-opt--colour:hover::before,.sf-vx-opt--image:hover::before{border-color:var(--ct-border,#bbb)}
.sf-vx-opt--colour.is-selected::before,.sf-vx-opt--image.is-selected::before{border-color:var(--ct-text,#111)}
.sf-vx-opt--colour.is-soldout::after,.sf-vx-opt--colour.is-unavailable::after,.sf-vx-opt--image.is-soldout::after,.sf-vx-opt--image.is-unavailable::after{
  content:"";position:absolute;left:50%;top:50%;width:38px;height:2px;margin:-1px 0 0 -19px;background:var(--ct-text,#111);transform:rotate(-45deg);box-shadow:0 0 0 1px var(--ct-surface,#fff);pointer-events:none}
.sf-vx-opt--colour.is-soldout .sf-vx-dot,.sf-vx-opt--colour.is-unavailable .sf-vx-dot,.sf-vx-opt--image.is-soldout .sf-vx-img,.sf-vx-opt--image.is-unavailable .sf-vx-img{opacity:.5}

/* Details */
.sf-pdp-specs{width:100%;border-collapse:collapse;font-size:14.5px}
.sf-pdp-specs th,.sf-pdp-specs td{padding:9px 0;border-bottom:1px solid var(--ct-line,#e5e5e5);text-align:start;vertical-align:top}
.sf-pdp-specs th{width:38%;padding-inline-end:14px;color:var(--ct-muted,#666);font-weight:500}
.sf-pdp-specs tr:last-child th,.sf-pdp-specs tr:last-child td{border-bottom:0}

/* attribute filters in a product listing */
.sf-fx-dot{display:inline-block;width:14px;height:14px;margin-inline-end:8px;border-radius:50%;border:1px solid rgba(0,0,0,.3);vertical-align:-2px}