:root {
	--aa-ink: #16181d;
	--aa-border-subtle: #d8dbe0;
	--aa-border-default: #c7cbd1;
	--aa-text-body: #3a3d44;
	--aa-text-muted: #6b6f76;
	--aa-text-strong: #16181d;
	--aa-surface-subtle: #f3f4f6;
	--aa-radius-sm: 6px;
}

/*
--aa-ink: var(--e-global-color-primary);
--aa-text-strong: var(--e-global-color-text);
--aa-text-muted: var(--e-global-color-text);
--aa-border-default: var(--e-global-color-secondary);
*/

.aa-swatches-on table.variations th.label,
.aa-swatches-on table.variations select {
	display: none !important;
}

.aa-swatch-wrap,
.aa-size-wrap {
	margin: 0 0 16px;
}

.aa-swatch-label,
.aa-size-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--aa-text-strong);
	margin-bottom: 10px;
}

.aa-swatch-selected-name {
	color: var(--aa-text-muted);
	font-weight: 500;
}

.aa-sw-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.aa-sw {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 999px;
	cursor: pointer;
	border: 2px solid var(--aa-border-subtle);
	box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.12);
	appearance: none;
	-webkit-appearance: none;
}

.aa-sw[data-active] {
	border-color: var(--aa-ink);
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.aa-sw--unmapped {
	position: relative;
}

.aa-size-label-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.aa-size-label-row .aa-size-label {
	margin-bottom: 0;
}

.aa-size-hint {
	font-size: 13px;
	color: var(--aa-text-muted);
}

.aa-size-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 8px;
}

.aa-size {
	padding: 10px 0;
	border-radius: var(--aa-radius-sm);
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	border: 1.5px solid var(--aa-border-default);
	background: transparent;
	color: var(--aa-text-body);
	text-align: center;
}

.aa-size[data-active] {
	border-color: var(--aa-ink);
	background: var(--aa-ink);
	color: #fff;
}

.aa-size:disabled,
.aa-size--disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

.aa-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
}

.aa-tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--aa-surface-subtle);
	border: 1px solid var(--aa-border-subtle);
	color: var(--aa-text-body);
}

.aa-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

.aa-plp-sw-row {
	display: flex;
	gap: 6px;
}

.aa-plp-sw {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.12);
	padding: 3px;
	background-clip: content-box;
	box-sizing: content-box;
}

.aa-plp-sw[data-active] {
	outline: 2px solid var(--aa-ink);
	outline-offset: 1px;
}