/** Shopify CDN: Minification failed

Line 35:12 Expected identifier but found whitespace
Line 35:13 Unexpected "20px"

**/
/* variant select with images on product page */

/* component-product-variant-picker.css — square, edge-to-edge images; selected card border + glow */

:root {
  --swatch-size: 96px; /* Adjust here for global size */
}

.product-form__input--swatch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 100%;
  text-align: center;
  margin-top: 25px;
}

/* Hide native radios */
.product-form__input--swatch input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

padding-top: 20px;

/* Card wrapper around image + name (auto-width to fit content) */
.product-form__input--swatch .variant-swatch__label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;         /* center image + text as a unit */
  justify-content: flex-start;
  width: max-content;          /* expand to fit single-line name */
  cursor: pointer;
  user-select: none;
  text-align: center;
  border: none;                
  padding: 6px;                /* ✅ inner padding inside the border */
  border-radius: 6px;          /* selected outline has 6px radius */
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.product-form__input--swatch .variant-swatch__label:hover {
  transform: translateY(-1px);
}

/* Image fills to edges (square) and stays centered */
.product-form__input--swatch .variant-swatch__image {
  width: var(--swatch-size);
  height: var(--swatch-size);
  display: block;
  object-fit: cover;
  border-radius: 0;            
  border: none;                
  background: transparent;     
  margin: 0 auto;              
  flex: 0 0 auto;
}

/* Fallback (no image) square */
.product-form__input--swatch .swatch-fallback {
  width: var(--swatch-size);
  height: var(--swatch-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: none;
  background: #f3f3f3;
  font-size: 0.9rem;
}

/* Name below swatch — single line, keep spaces */
.product-form__input--swatch .variant-swatch__name {
  display: block;              /* block keeps text spacing intact */
  margin-top: 6px;
  line-height: 1.3;
  font-size: 1.2rem;
  text-align: center;
  white-space: nowrap;         /* keep on one line */
  word-spacing: normal;        /* ✅ ensure spaces render */
  letter-spacing: normal;      /* ✅ avoid collapsing */
  overflow: visible;           
  max-width: none;             /* allow natural width */
  padding: 6px;
}

/* Kill any hard line breaks the snippet may add */
.product-form__input--swatch .variant-swatch__name br {
  display: none !important;
}

/* Ensure any child spans/strong/em render inline */
.product-form__input--swatch .variant-swatch__name > * {
  display: inline !important;
}

/* Selected state: outer card border + glow (color set via JS on --swatch-glow vars) */
.product-form__input--swatch input[type="radio"]:checked + .variant-swatch__label {
  border: 2px solid #000;
  box-shadow:
    0 0 0 0 rgba(0,0,0,0),
    0 0 10px var(--swatch-glow, rgba(0,0,0,0.35)),
    0 0 18px var(--swatch-glow-soft, rgba(0,0,0,0.18));
  border-radius: 6px;
}

/* Accessibility and reduced motion */
@media (prefers-reduced-motion: reduce) {
  .product-form__input--swatch .variant-swatch__label:hover { transform: none; }
}