/* ---------- Base swatch utility ---------- */
:root {
	--swatch-size: 12px;
	--swatch-radius: 10px;
	--swatch-inner-radius: 3px;
	/* pill by default */
	--swatch-border: 0px solid rgba(0, 0, 0, .05);
}

.swatch {
	--swatch-width: var(--swatch-size);
	--swatch-height: var(--swatch-size);
	display: inline-flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	color:rgba(0, 0, 0, 0.85);
	width: var(--swatch-width);
	height: var(--swatch-height);
	border-radius: var(--swatch-radius);
	border: var(--swatch-border);
	background: #ccc;
	/* fallback */
	box-shadow: inset 0 0px 5px 0px rgba(0, 0, 0, 0.21);
	vertical-align: middle;
	transition: all 0.15s cubic-bezier(.2,0,.07,1);
	border: 0px solid transparent;
	position: relative;
	overflow:hidden;
	letter-spacing:0;
	box-sizing:border-box;
}

.swatch:hover {
	opacity:1 !important;
	transition: opacity 0.15s ease-out;
	border-color:rgba(0,0,0,0.25);
}

.swatch > span {
	flex-basis: 30%;
	width:100%;
	height:100%;
	margin-right:0px;
	border-radius:0;
	transition:all 0.15s ease-out;
}

.pc .swatch {
	border-radius:10px;
	--swatch-size: var(--pcard_swatch_size, 14px);
}

.swatch--square {
	--swatch-radius: 3px;
}

.swatch--lg {
	--swatch-size: 18px;
}

.swatch--xl {
	--swatch-size: 22px;
}

/* Helper: stronger border for very light chips */
.swatch--light {
	border: 1px solid rgba(0, 0, 0, .05);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

/* ---------- Primaries ---------- */
/* Red: ~330–30° */
.swatch.color--red {
	background:
		linear-gradient(135deg, hsl(350 85% 55%), hsl(10 85% 55%));
	background-color: hsl(0 80% 55%);
}

/* Orange: ~15–40° */
.swatch.color--orange {
	background:
		linear-gradient(135deg, hsl(20 90% 55%), hsl(38 90% 55%));
	background-color: hsl(27 90% 55%);
}

/* Yellow: ~40–75° */
.swatch.color--yellow {
	background: linear-gradient(135deg, hsl(48 95% 60%), hsl(65 95% 58%));
	background-color: hsl(55 95% 59%);
}

/* Green: ~75–165° */
.swatch.color--green {
	background:
		linear-gradient(135deg, hsl(90 65% 45%), hsl(150 60% 42%));
	background-color: hsl(120 62% 43%);
}

/* Teal (cyan/turquoise): ~165–200° */
.swatch.color--teal {
	background:
		linear-gradient(135deg, hsl(170 70% 45%), hsl(190 70% 45%));
	background-color: hsl(185 70% 45%);
}

/* Blue: ~200–248° */
.swatch.color--blue {
	background:
		linear-gradient(135deg, hsl(205 80% 50%), hsl(240 80% 48%));
	background-color: hsl(225 80% 49%);
}

/* Purple: ~248–315° */
.swatch.color--purple {
	background:
		linear-gradient(135deg, hsl(260 65% 50%), hsl(295 60% 48%));
	background-color: hsl(285 62% 49%);
}

/* Magenta: ~300–340°, mid/high L & S */
.swatch.color--magenta {
	background:
		linear-gradient(135deg, hsl(305 85% 55%), hsl(335 85% 55%));
	background-color: hsl(320 85% 55%);
}

/* Pink: light & saturated around magenta/red edge */
.swatch.color--pink {
	background:
		linear-gradient(135deg, hsl(330 85% 75%), hsl(350 85% 72%));
	background-color: hsl(340 85% 73%);
}

/* Brown: warm dark neutral (orange→brown range) */
.swatch.color--brown {
	background:
		linear-gradient(135deg, hsl(28 45% 34%), hsl(20 50% 28%));
	background-color: hsl(24 48% 31%);
}

.swatch.color--burgundy {
	background:
		linear-gradient(135deg, hsl(345 35% 32%), hsl(340 40% 26%));
	background-color: hsl(343 38% 29%);
}

/* Achromatics */
.swatch.color--black {
	background:
		linear-gradient(135deg, hsl(0 0% 8%), hsl(0 0% 18%));
	background-color: hsl(0 0% 12%);
	border-color: rgba(255, 255, 255, .08);
}

.swatch.color--grey {
	background:
		linear-gradient(135deg, hsl(0 0% 40%), hsl(0 0% 70%));
	background-color: hsl(0 0% 55%);
}

.swatch.color--white {
	background:
		linear-gradient(135deg, hsl(0 0% 98%), hsl(0 0% 92%));
	background-color: hsl(0 0% 96%);
}

/* Sand (primary): light warm neutral */
.swatch.color--sand {
	background:
		linear-gradient(135deg, hsl(32 28% 64%), hsl(38 32% 58%));
	background-color: hsl(35 30% 61%);
}


/* ---------- Secondaries ---------- */
/* Light Blue (child of blue) */
.swatch.color--lightblue {
	background:
		linear-gradient(135deg, hsl(205 70% 78%), hsl(220 70% 82%));
	background-color: hsl(212 70% 80%);
}

/* Dark Blue (child of blue) */
.swatch.color--darkblue {
	background:
		linear-gradient(135deg, hsl(220 60% 28%), hsl(235 60% 22%));
	background-color: hsl(228 60% 25%);
}

/* Lime (child of green) ~70–95°, bright */
.swatch.color--lime {
	background:
		linear-gradient(135deg, hsl(78 90% 60%), hsl(90 90% 56%));
	background-color: hsl(84 90% 58%);
}

/* Beige (child of white): very light warm off-white ~25–60°, low S */
.swatch.color--beige {
	background:
		linear-gradient(135deg, hsl(40 20% 92%), hsl(48 25% 88%));
	background-color: hsl(44 22% 90%);
}


/* ---------- Optional: hover/selection states ---------- */
.swatch.is-selected {
	outline: 2px solid var(--highlight, #ff7a00);
	outline-offset: 1px;
}

.swatch:hover {
	filter: saturate(1.05) brightness(1.02);
}

.swatch:before {
	color: inherit;
}

/* Darker colors should have a white checkmark for contrast */
.swatch.color--black,
.swatch.color--darkblue,
.swatch.color--blue,
.swatch.color--grey,
.swatch.color--black,
.swatch.color--brown,
.swatch.color--purple,
.swatch.color--burgundy,
.swatch.color--red,
.swatch.color--orange {
	color: rgba(255, 255, 255, 0.85);
}



.pc_swatches_wrap {
	display:flex;
	flex-direction:row;
	gap:5px;
	align-items: center;
	margin-top: auto;
}

.pc_swatches {
	display:flex;
	gap:2px;
	flex-direction: row;
    justify-content: flex-start;
    align-items: center;
	flex-wrap: wrap;
	opacity:0;
}
.pc .pc_swatches_label {
	position:absolute;
	left:14px;
	white-space:nowrap;
	
}
.pc:hover .pc_swatches_label,
.pc.v-changed .pc_swatches_label {
	display:none;
}
.pc:hover .pc_swatches,
.pc.v-changed .pc_swatches {
	opacity:1;
}
.pc_swatches .swatch {
	opacity:1;
	border:1px solid rgba(0,0,0,0.15) !important;
	box-sizing:border-box;
}
.pc.v-changed:not(:hover) .pc_swatches .swatch:not(.is-active) {
	
	transform:scale(0.85);
  	/*margin-right:-8px;*/
}
.pc .swatch:not(.is-active) {
	transform:scale(0.85);
	
}

.pc:not(:hover) .pc_swatches .swatch:not(.is-active) > span {
	border-radius:0 10px 10px 0;
	margin-right:0;
}


.pc .swatch.unavailable,
.pc .swatch.unavailable:hover,
.pc .swatch.unavailable.is-active {
  opacity:0.5 !important
}

.pc .swatch.unavailable:after {
  content: '';
  position: absolute;
  top: calc(50% - 0.5px);
  left: -20%;
  width: 140%;           /* long enough to span the diagonal */
  height: 1px;           /* hairline */
  background: rgba(0,0,0,1);
  transform: rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
}


.fbtn--color.sasqswatch .swatch {
width:100%;
gap:2px;
flex-wrap:nowrap;
}

.fbtn--color.sasqswatch .swatch .fbtn__label {
  padding:0;
}

.fg__swatches .fbtn.sasqswatch.is-active .swatch:before {
  margin-left:-8px;
}

.fg__swatches .fbtn.sasqswatch.is-active .fbtn__label {
  opacity:1;
}

.swatch.fbtn__swatch {
	justify-content:center;
}





.pc__imgwrap .pc_swatches_wrap {
  position:absolute;
  left:0px;
  bottom:5px;
  width:calc(100% - 72px);
  height:34px;
  overflow:hidden;
  padding:8px 7px 6px 9px;
  -webkit-mask-image: linear-gradient(
		to right,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 5%,
		rgba(0,0,0,1) 92%,
		rgba(0,0,0,0) 100%
	);
	mask-image: linear-gradient(
		to right,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 5%,
		rgba(0,0,0,1) 92%,
		rgba(0,0,0,0) 100%
	);
}

.pc__imgwrap .pc_swatches {
display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:0 20px 0 5px;
  transition: all 0.2s cubic-bezier(.2,0,0,1);
}

.pc__imgwrap .pc_swatches_label {
border:0px solid rgba(0,0,0,0.5);
border-radius:50%;
width:30px;
height:30px;
display:inline-flex;
align-items: center;
justify-content: center;
letter-spacing:-0.5px;
font-size:12px;
font-weight:500;
left:8px;
bottom:2px;
background:rgba(255,255,255,0.8);
opacity:1;
}

/* Limited swatches: show a few by default, reveal on hover */
.pc_swatches_wrap--inline .pc_swatches {
	opacity:1;
	order: 1;
}

.pc_swatches_wrap--inline .pc_swatches_label {
	position: static;
	left: auto;
	bottom: auto;
	margin-right: 0;
	margin-left:-20px;
	order: 2;
}

@media (min-width: 769px) {
	.pc_swatches_wrap--limited .pc_swatches .swatch.is-extra {
		display: none;
	}
	.pc:hover .pc_swatches_wrap--limited .pc_swatches .swatch.is-extra,
	.pc.v-changed .pc_swatches_wrap--limited .pc_swatches .swatch.is-extra {
		display: inline-flex;
	}
}

@media (max-width: 768px) {
	.pc_swatches_wrap--limited .pc_swatches .swatch.is-extra {
		display: inline-flex;
	}
	.pc_swatches_wrap--limited .pc_swatches_label {
		display: none;
	}
}