/* swatch lives in its own file for reusability of the swatch in swatch-input and dropdown */
.swatch {
  --swatch--size: var(--swatch-input--size, 4.4rem);
  --swatch--border-radius: var(--swatch-input--border-radius, 50%);

  display: block;
  width: var(--swatch--size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--swatch--background);
  background-position: var(--swatch-focal-point, initial);
  background-size: cover;
  background-origin: border-box;
  border: 0.1rem solid rgba(var(--color-foreground), 0.15);
  border-radius: var(--swatch--border-radius);
}

.swatch--square {
  --swatch--border-radius: var(--swatch-input--border-radius, 0.2rem);
}

.swatch--unavailable {
  border-style: dashed;
  border-color: rgba(var(--color-foreground), 0.5);
}

body.suffix-lip-tint {
    label.swatch-input__label .swatch {
        width: 100%;
        border: 1px solid #7D7D7D;
        border-radius: 5px;
    }
    fieldset.js.product-form__input.product-form__input--swatch {
        display: grid !important;
        grid-template-columns: repeat(7, 37px);
        grid-template-rows: 1fr repeat(2, 37px);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    .selected-swatch {grid-area: 2 / 1 / 4 / 3;border: 1px solid #7D7D7D;border-radius: 5px;        background-size: cover !important;
        background-repeat: no-repeat !important;}
    fieldset.js.product-form__input.product-form__input--swatch {
    *:nth-child(4) {grid-area: 2 / 3 / 3 / 4; margin: 0;}
    *:nth-child(6) { grid-area: 3 / 3 / 4 / 4; margin: 0; }
    *:nth-child(8) { grid-area: 2 / 4 / 3 / 5; margin: 0; }
    *:nth-child(10) { grid-area: 3 / 4 / 4 / 5; margin: 0; }
    *:nth-child(12) { grid-area: 2 / 5 / 3 / 6; margin: 0; }
    *:nth-child(14) { grid-area: 3 / 5 / 4 / 6; margin: 0; }
    *:nth-child(16) { grid-area: 2 / 6 / 3 / 7; margin: 0; }
    *:nth-child(18) { grid-area: 3 / 6 / 4 / 7; margin: 0; }
    *:nth-child(20) { grid-area: 2 / 7 / 3 / 8; margin: 0; }
    *:nth-child(22) { grid-area: 3 / 7 / 4 / 8; margin: 0; }
    .form__label { 
      grid-area: 1 / 1 / 2 / 8;
      position: relative;
      margin-bottom: 20px;
      font-weight: 600;
      font-size: 12px;      
    }
    }
    .swatch-input__input+.swatch-input__label {
        outline: unset !important;
    }    
    variant-selects span[data-selected-value] {
        position: absolute;
        bottom: -25px;
        left: 0;
        text-align: center;
    }    
}
body:not(.suffix-lip-tint) {
span.swatch {
    width: 32px;
}
.swatch-input__input + .swatch-input__label {
    outline: .1rem solid #cbcbcb;
}
.swatch-input__input:checked + .swatch-input__label {
    outline-offset: 3px;
    outline-color: #232323;
}}