.swatches {
  --ink: #696969;
  --ash: #a3a3a3;
  --sky: #9bbaed;
  --pop: #e43e23;
  --red: #b10719;
  --jet: #000000;
  --gum: #eb5799;
  --hot: #ff0073;
  --mud: #4a342c;
  --fig: #f4e4ff;
  --tan: #d2b48c;
  --sea: #006699;
  --ruby: #e32040;
  --envy: #0e986b;
  --jade: #1b5c1d;
  --vert: #489c4a;
  --bone: #dedbbf;
  --aqua: #00ffff;
  --blue: #1d5caa;
  --cyan: #00ffff;
  --dirt: #a54400;
  --gold: #ffb404;
  --gray: #808080;
  --grey: #9fa9b5;
  --lime: #00ff00;
  --navy: #09146c;
  --nude: #e3bc9a;
  --rose: #e37fa0;
  --mint: #b6e4d0;
  --milk: #f6f2e8;
  --wine: #533230;
  --coal: #060d11;
  --snow: #f7f7f7;
  --dash: #234d90;
  --moss: #40592f;
  --peel: #ffd322;
  --sand: #e0c389;
  --onyx: #323737;
  --silk: #d1c4bb;
  --peru: #cd853f;
  --pink: #e79fab;
  --plum: #8a3340;
  --rust: #c1550b;
  --teal: #136271;
  --tile: #b9b6a1;
  --aloe: #d9efd9;
  --azure: #f0ffff;
  --beige: #f5f5dc;
  --black: #000000;
  --brown: #2b0000;
  --cream: #ddd7cb;
  --terra: #b7a282;
  --slate: #4f4f4f;
  --olive: #40483f;
  --ocean: #e1e5f6;
  --camel: #a98d74;
  --clean: #f6f4ea;
  --coral: #ff7f50;
  --green: #008000;
  --ivory: #faf1c3;
  --khaki: #f0e68c;
  --linen: #faf0e6;
  --mauve: #e0b0ff;
  --wheat: #f5deb3;
  --white: #fafafa;
  --sienna: #9f6a51;
  --coffee: #2d2114;
  --bisque: #ffe4c4;
  --indigo: #4b0082;
  --maroon: #7a1434;
  --orange: #fe661f;
  --orchid: #da70d6;
  --purple: #800080;
  --tartan: #21a0ad;
  --salmon: #fa8072;
  --silver: #c0c0c0;
  --shadow: #5c534f;
  --tomato: #ff6347;
  --violet: #7b01c2;
  --yellow: #ffeb00;
  --natural: #b7ac9a;
  --saffron: #ffe4df;
  --crimson: #dc143c;
  --neutral: #c6bda6;
  --fuchsia: #bb085e;
  --magenta: #ff00ff;
  --thistle: #d8bfd8;
  --hot-pink: #ff69b4;
  --sky-blue: #98c6ff;
  --dark-red: #8b0000;
  --cornsilk: #fff8dc;
  --honeydew: #f0fff0;
  --metallic: #b2b0ab;
  --lavender: #9966e1;
  --moccasin: #ffe4b5;
  --midnight: #383863;
  --seashell: #fff5ee;
  --sea-green: #2e8b57;
  --rose-gold: #cf9fa6;
  --dark-blue: #00008b;
  --dark-cyan: #008b8b;
  --cool-grey: #b9c1c9;
  --dark-gray: #a9a9a9;
  --dark-grey: #a9a9a9;
  --deep-pink: #ff1493;
  --chocolate: #d2691e;
  --gainsboro: #dcdcdc;
  --steelblue: #4682b4;
  --turquoise: #40e0d0;
  --alabaster: #e8e7df;
  --dark-green: #006400;
  --dark-khaki: #bdb76b;
  --light-blue: #add8e6;
  --light-cyan: #e0ffff;
  --light-gray: #d3d3d3;
  --light-grey: #d3d3d3;
  --light-pink: #ffcbe3;
  --lime-green: #32cd32;
  --mint-cream: #f5fffa;
  --royal-blue: #4169e1;
  --slate-blue: #6a5acd;
  --slate-gray: #708090;
  --slate-grey: #708090;
  --aquamarine: #7fffd4;
  --chartreuse: #7fff00;
  --dark-orange: #ff8c00;
  --dark-salmon: #e9967a;
  --dark-violet: #7b01c2;
  --light-coral: #f08080;
  --light-green: #90ee90;
  --esmerald: #007855;
  --baby-blue: #c9d6ff;
  --Neon-Orange: #fd5f00;
  --charcoal: #34342b;
  --royal: #003ea9;
  --olive-green: #336600;
  --kelly-green: #009933;
  --neon-green: #b9ff01;
  --neon-orange: #fd5f00;
  --hunter-green: #002d2f;
  --light-tan: #dccaaa;
  --mocha: #98655f;
  --lilac: #c9c4ff;
  --light-grey: #cccccc;
  --neon-pink: #ff3399;
  --scarlet-red: #ee0e00;
  --emerald: #007855;
}
/*# sourceMappingURL=/cdn/shop/t/8/assets/swatches.css.map?v=142204904710658190471728295109 */

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  gap: 4px;
  max-width: 400px;
  margin: 0 auto;
}
.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.color-swatch:hover {
  transform: scale(1.2);
  border: 2px solid #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Color definitions based on the image */
.color-1 {
  background-color: var(--baby-blue);
} /* Light lavender */
.color-2 {
  background-color: var(--white);
} /* Orange red */
.color-3 {
  background-color: var(--Neon-Orange);
} /* Black */
.color-4 {
  background-color: var(--hunter-green);
} /* Plum */
.color-5 {
  background-color: var(--light-tan);
} /* Medium slate blue */
.color-6 {
  background-color: var(--lavender);
} /* Teal */
.color-7 {
  background-color: var(--ivory);
} /* Dark magenta */
.color-8 {
  background-color: var(--teal);
} /* Dark orange */
.color-9 {
  background-color: var(--violet);
} /* Saddle brown */
.color-10 {
  background-color: var(--rust);
} /* Forest green */
.color-11 {
  background-color: var(--mocha);
} /* Crimson */
.color-12 {
  background-color: var(--emerald);
} /* Gray */
.color-13 {
  background-color: var(--fuchsia);
} /* Orange */
.color-14 {
  background-color: var(--charcoal);
} /* Gold */
.color-15 {
  background-color: var(--orange);
} /* Navy */
.color-16 {
  background-color: var(--gold);
} /* Royal blue */
.color-17 {
  background-color: var(--brown);
} /* Light blue */
.color-18 {
  background-color: var(--royal);
} /* Purple */
.color-19 {
  background-color: var(--lilac);
} /* Silver */
.color-20 {
  background-color: var(--maroon);
} /* Red */
.color-21 {
  background-color: var(--light-grey);
} /* Sky blue */
.color-22 {
  background-color: var(--red);
} /* Yellow */
.color-23 {
  background-color: var(--sky-blue);
} /* Lime */
.color-24 {
  background-color: var(--yellow);
} /* Midnight blue */
.color-25 {
  background-color: var(--olive-green);
} /* Deep pink */
.color-26 {
  background-color: var(--neon-green);
} /* Cyan */
.color-27 {
  background-color: var(--navy);
} /* Light green */
.color-28 {
  background-color: var(--neon-pink);
} /* Pink */
.color-29 {
  background-color: var(--kelly-green);
} /* Black */
.color-30 {
  background-color: var(--grey);
} /* Tomato */
@media (max-width: 600px) {
  .color-grid {
    grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
    gap: 6px;
  }
  .color-swatch {
    width: 25px;
    height: 25px;
  }
}