/* =========================================================================
   MoshTee variation swatches  (Variation Swatches for WooCommerce, "cfvsw")

   WHY THIS FILE EXISTS
   Mydesigns writes LOCAL product attributes - the markup is name="attribute_color",
   not attribute_pa_color. TeeSpace's own swatch system reads term meta
   (product_attribute_color) and cfvsw's colour/image swatch types are registered
   through product_attributes_type_selector; BOTH only work on pa_* taxonomies.
   With a local attribute neither can produce a colour chip, so every option
   falls back to .cfvsw-label-option and renders as a white text box on the
   black page. That is the "white boxes" defect.

   Migrating to taxonomy attributes would rewrite variation-resolution meta on
   every product - not something to do underneath a live checkout. So we key off
   the colour NAME instead. Mydesigns uses the same seven names on every push,
   so this file covers the whole catalogue with no per-product setup and
   survives a re-push.

   The plugin writes inline style="min-width:24px;min-height:24px;border-radius:3px"
   on every option, so geometry overrides need !important. Non-negotiable.
   ========================================================================= */

.cfvsw-swatches-container{
  display:flex;
  flex-wrap:wrap;
  gap:var(--mt-space-2);
  align-items:center;
  margin:var(--mt-space-2) 0 0;
}

.cfvsw-swatches-container .cfvsw-swatches-option{
  cursor:pointer;
  transition:outline-color var(--mt-dur-fast) var(--mt-ease),
             background-color var(--mt-dur-fast) var(--mt-ease),
             color var(--mt-dur-fast) var(--mt-ease),
             border-color var(--mt-dur-fast) var(--mt-ease);
  outline:2px solid transparent;
  outline-offset:3px;
}

.cfvsw-swatches-container .cfvsw-swatches-disabled,
.cfvsw-swatches-container .cfvsw-swatches-out-of-stock,
.cfvsw-swatches-container .cfvsw-swatches-blur{
  opacity:.32 !important;
  cursor:not-allowed !important;
}

/* ---------------- COLOUR: circles filled by name ---------------- */
.cfvsw-swatches-container[swatches-attr="attribute_color"] .cfvsw-swatches-option{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border-radius:50% !important;
  padding:0 !important;
  border:1px solid var(--mt-hairline-strong) !important;
  background-clip:padding-box;
  overflow:hidden;
}

/* Hide the text label without removing it from the accessibility tree. */
.cfvsw-swatches-container[swatches-attr="attribute_color"] .cfvsw-swatch-inner{
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  background:transparent !important;
  display:block;
  width:100%;
  height:100%;
}

/* Selected: an OUTLINE ring, never a border - a border changes the box size
   and deforms the circle. */
.cfvsw-swatches-container[swatches-attr="attribute_color"] .cfvsw-selected-swatch{
  outline-color:var(--mt-blood) !important;
  --cfvsw-swatches-border-color:transparent;
}
.cfvsw-swatches-container[swatches-attr="attribute_color"] .cfvsw-swatches-option:hover{
  outline-color:var(--mt-hairline-strong) !important;
}
.cfvsw-swatches-container[swatches-attr="attribute_color"] .cfvsw-swatches-option:focus-visible{
  outline-color:var(--mt-bone) !important;
}

/* Fills keyed on the Mydesigns colour name. First four are live today; the
   last three are pre-written so future pushes need no edit here. */
.cfvsw-swatches-option[data-slug="Black"]{background-color:#0A0A0A !important;}
.cfvsw-swatches-option[data-slug="Navy"]{background-color:#1B2A44 !important;}
.cfvsw-swatches-option[data-slug="Military Green"]{background-color:#4A5240 !important;}
.cfvsw-swatches-option[data-slug="Dark Chocolate"]{background-color:#3A2A24 !important;}
.cfvsw-swatches-option[data-slug="White"]{background-color:#F2F2F0 !important;}
.cfvsw-swatches-option[data-slug="Sport Grey"]{background-color:#9B9B9B !important;}
.cfvsw-swatches-option[data-slug="Sand"]{background-color:#D9CBB3 !important;}

/* ---------------- SIZE: stays textual, restyled as chips ---------------- */
.cfvsw-swatches-container[swatches-attr="attribute_size"] .cfvsw-swatches-option{
  min-width:44px !important;
  height:34px !important;
  min-height:34px !important;
  border-radius:var(--mt-radius) !important;
  border:1px solid var(--mt-hairline-strong) !important;
  background-color:transparent !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0 var(--mt-space-3) !important;
}

.cfvsw-swatches-container[swatches-attr="attribute_size"] .cfvsw-swatch-inner{
  font-size:var(--mt-fs-small) !important;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mt-bone) !important;
  background:transparent !important;
  line-height:1;
}

.cfvsw-swatches-container[swatches-attr="attribute_size"] .cfvsw-swatches-option:hover{
  border-color:var(--mt-bone) !important;
}
.cfvsw-swatches-container[swatches-attr="attribute_size"] .cfvsw-selected-swatch{
  background-color:var(--mt-bone) !important;
  border-color:var(--mt-bone) !important;
}
.cfvsw-swatches-container[swatches-attr="attribute_size"] .cfvsw-selected-swatch .cfvsw-swatch-inner{
  color:var(--mt-ink) !important;
}
.cfvsw-swatches-container[swatches-attr="attribute_size"] .cfvsw-swatches-option:focus-visible{
  outline-color:var(--mt-bone) !important;
}

/* ---------------- attribute labels on the product page ---------------- */
body.dark-mode .variations td.label label,
body.dark-mode .variations .selected-value{
  color:var(--mt-bone-dim) !important;
  font-size:var(--mt-fs-small);
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* The shop loop packs swatches under each card - tighten so a 4-up grid does
   not wrap into a second row of colour chips. */
.cfvsw-shop-container{
  justify-content:flex-start;
  gap:var(--mt-space-1) var(--mt-space-2);
}
.cfvsw-shop-container[swatches-attr="attribute_color"] .cfvsw-swatches-option{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
}
.cfvsw-shop-container[swatches-attr="attribute_size"] .cfvsw-swatches-option{
  min-width:34px !important;
  height:26px !important;
  min-height:26px !important;
  padding:0 var(--mt-space-2) !important;
}
.cfvsw-shop-container[swatches-attr="attribute_size"] .cfvsw-swatch-inner{
  font-size:12px !important;
}