/**
 * ShopEnhancer Suite — front-end design system.
 *
 * Everything is scoped to .ses-* class names and inherits the theme's
 * typography: no font-family, no base font-size, no heading overrides.
 *
 * @package ShopEnhancer
 */

:root {
	/* Brand accent, matching the 8Erikas theme (assets/css/main.css
	   --color-accent): was #111827 (near-black) + #1f2937 hover. Drives the
	   primary button, focus rings and the Compare button's active state
	   (.ses-compare-button.is-active further down) — every other module
	   (wishlist's red heart, success/danger states below) is untouched, as
	   those are semantic colours, not the brand accent. */
	--se-primary: #fb7185;
	--se-primary-hover: #be123c;
	--se-accent: #ef4444;
	--se-bg-subtle: #f9fafb;
	--se-border: #e5e7eb;
	--se-text-muted: #6b7280;
	--se-radius: 12px;
	--se-radius-sm: 6px;
	--se-radius-full: 9999px;
	--se-shadow-sm: 0 1px 2px rgba( 0, 0, 0, 0.05 );
	--se-shadow-md: 0 4px 6px -1px rgba( 0, 0, 0, 0.07 ), 0 2px 4px -2px rgba( 0, 0, 0, 0.05 );
	--se-shadow-lg: 0 10px 15px -3px rgba( 0, 0, 0, 0.08 );

	/* Derived tokens. */
	--se-surface: #fff;
	--se-radius-lg: 16px;
	--se-radius-input: 8px;
	--se-success: #047857;
	--se-success-bg: #ecfdf5;
	--se-danger: #b91c1c;
	--se-danger-bg: #fef2f2;
	--se-ring: rgba( 251, 113, 133, 0.18 );
	--se-ease: cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* ---------------------------------------------------------------------
 * Primitives
 * ------------------------------------------------------------------ */

/* Scoped box model: themes that still use content-box must not break layout. */
[class^="ses-"],
[class*=" ses-"],
[class^="ses-"]::before,
[class^="ses-"]::after {
	box-sizing: border-box;
}

.ses-card {
	background: var( --se-surface );
	border: 1px solid var( --se-border );
	border-radius: var( --se-radius-lg );
	box-shadow: var( --se-shadow-sm );
	overflow: hidden;
}

.ses-btn,
.ses-wishlist-button,
.ses-compare-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var( --se-radius-full );
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.18s var( --se-ease ), border-color 0.18s var( --se-ease ), color 0.18s var( --se-ease ), transform 0.18s var( --se-ease ), box-shadow 0.18s var( --se-ease );
}

.ses-btn[hidden],
.ses-wishlist-button[hidden],
.ses-compare-button[hidden] {
	display: none;
}

.ses-btn--primary {
	background: var( --se-primary );
	border-color: var( --se-primary );
	color: #fff;
	box-shadow: var( --se-shadow-sm );
}

.ses-btn--primary:hover,
.ses-btn--primary:focus {
	background: var( --se-primary-hover );
	border-color: var( --se-primary-hover );
	color: #fff;
}

.ses-btn--outline {
	border-color: var( --se-border );
	background: var( --se-surface );
	color: var( --se-primary );
}

.ses-btn--outline:hover {
	border-color: var( --se-primary );
}

.ses-btn--ghost {
	color: var( --se-text-muted );
	font-weight: 500;
}

.ses-btn--ghost:hover {
	background: var( --se-bg-subtle );
	color: var( --se-primary );
}

.ses-btn--icon {
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: var( --se-radius-full );
}

.ses-btn[disabled],
.ses-wishlist-button[disabled],
.ses-compare-button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.ses-icon svg {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ses-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var( --se-radius-full );
	background: var( --se-bg-subtle );
	color: var( --se-text-muted );
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.ses-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ses-badge--in {
	background: var( --se-success-bg );
	color: var( --se-success );
}

.ses-badge--out {
	background: var( --se-danger-bg );
	color: var( --se-danger );
}

.ses-in-stock {
	color: var( --se-success );
	font-weight: 600;
}

.ses-out-of-stock {
	color: var( --se-danger );
	font-weight: 600;
}

.ses-alert {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	padding: 10px 14px;
	border: 1px solid transparent;
	border-radius: var( --se-radius );
	font-size: 0.875em;
	line-height: 1.45;
}

.ses-alert[hidden] {
	display: none;
}

.ses-alert::before {
	flex: 0 0 auto;
	font-weight: 700;
	line-height: 1.45;
}

.ses-alert--success::before {
	content: "\2713";
}

.ses-alert--error::before {
	content: "!";
}

.ses-alert--success {
	border-color: rgba( 4, 120, 87, 0.2 );
	background: var( --se-success-bg );
	color: var( --se-success );
}

.ses-alert--error {
	border-color: rgba( 185, 28, 28, 0.2 );
	background: var( --se-danger-bg );
	color: var( --se-danger );
}

.ses-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: ses-spin 0.6s linear infinite;
}

.is-loading .ses-spinner {
	display: block;
}

.ses-btn.is-loading,
.is-loading.ses-wishlist-button,
.is-loading.ses-compare-button {
	pointer-events: none;
	opacity: 0.75;
}

@keyframes ses-spin {

	to {
		transform: rotate( 360deg );
	}
}

@keyframes ses-pop {

	0% {
		transform: scale( 1 );
	}

	40% {
		transform: scale( 1.35 );
	}

	70% {
		transform: scale( 0.92 );
	}

	100% {
		transform: scale( 1 );
	}
}

.ses-wishlist-button:focus-visible,
.ses-compare-button:focus-visible,
.ses-btn:focus-visible,
.ses-waitlist__email:focus-visible,
.ses-compare-remove:focus-visible,
.ses-wishlist-remove:focus-visible {
	outline: 2px solid var( --se-primary );
	outline-offset: 2px;
}

/* Screen-reader-only text, in case the theme does not provide it. */
.ses-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	overflow: hidden;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Toggle buttons
 * ------------------------------------------------------------------ */

.ses-wishlist-button--single,
.ses-compare-button--single {
	margin: 10px 10px 0 0;
	border-color: var( --se-border );
	background: var( --se-surface );
	color: var( --se-primary );
}

.ses-wishlist-button--single:hover {
	border-color: var( --se-accent );
	color: var( --se-accent );
}

.ses-compare-button--single:hover {
	border-color: var( --se-primary );
}

.ses-wishlist-button.is-active {
	border-color: var( --se-accent );
	background: var( --se-danger-bg );
	color: var( --se-accent );
}

.ses-wishlist-button.is-active .ses-icon svg {
	fill: var( --se-accent );
	stroke: var( --se-accent );
}

.ses-compare-button.is-active {
	border-color: var( --se-primary );
	background: var( --se-primary );
	color: #fff;
}

.ses-wishlist-button.is-popping .ses-icon svg {
	animation: ses-pop 0.4s var( --se-ease );
}

/* Floating heart on catalogue cards. */
.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
}

.ses-wishlist-button--loop {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 38px;
	height: 38px;
	padding: 0;
	border-color: var( --se-border );
	background: rgba( 255, 255, 255, 0.92 );
	color: var( --se-primary );
	box-shadow: var( --se-shadow-sm );
	backdrop-filter: blur( 6px );
}

.ses-wishlist-button--loop:hover {
	color: var( --se-accent );
	border-color: var( --se-accent );
	transform: scale( 1.06 );
}

.ses-compare-button--loop {
	width: 100%;
	margin: 4px 0 0;
	padding: 8px 14px;
	border-color: var( --se-border );
	color: var( --se-text-muted );
	font-size: 0.8125em;
}

.ses-compare-button--loop:hover {
	border-color: var( --se-primary );
	color: var( --se-primary );
}

/* ---------------------------------------------------------------------
 * Wishlist table
 * ------------------------------------------------------------------ */

.ses-wishlist-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: var( --se-surface );
}

.ses-wishlist-table th,
.ses-wishlist-table td {
	padding: 16px 20px;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.ses-wishlist-table thead th {
	padding-top: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var( --se-border );
	background: var( --se-bg-subtle );
	color: var( --se-text-muted );
	font-size: 0.6875em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ses-wishlist-table tbody tr + tr {
	border-top: 1px solid var( --se-border );
}

.ses-wishlist-table tbody tr {
	transition: background-color 0.18s var( --se-ease );
}

.ses-wishlist-table tbody tr:hover {
	background: var( --se-bg-subtle );
}

.ses-product-cell {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.ses-thumb {
	flex: 0 0 auto;
	display: block;
	width: 68px;
	height: 68px;
	border-radius: var( --se-radius-input );
	background: var( --se-bg-subtle );
	overflow: hidden;
}

.ses-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.ses-product-title {
	min-width: 0;
	color: inherit;
	font-weight: 600;
	overflow-wrap: anywhere;
	line-height: 1.35;
	text-decoration: none;
}

.ses-product-title:hover {
	text-decoration: underline;
}

.ses-wishlist-table .ses-col-price {
	width: 16%;
	font-weight: 600;
	white-space: nowrap;
}

.ses-wishlist-table .ses-col-stock {
	width: 18%;
}

.ses-wishlist-table .ses-col-actions {
	width: 24%;
}

.ses-col-price del {
	color: var( --se-text-muted );
	font-weight: 400;
}

.ses-row-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.ses-wishlist-table .button,
.ses-fav-card .button,
.ses-compare-table .button {
	display: inline-flex;
	flex: 0 0 auto;
	white-space: nowrap;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border: 0;
	border-radius: var( --se-radius-full );
	background: var( --se-primary );
	color: #fff;
	font-size: 0.8125em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s var( --se-ease );
}

.ses-wishlist-table .button:hover,
.ses-fav-card .button:hover,
.ses-compare-table .button:hover {
	background: var( --se-primary-hover );
	color: #fff;
}

.ses-wishlist-table .added_to_cart {
	margin-left: 8px;
	color: var( --se-text-muted );
	font-size: 0.8125em;
}

.ses-wishlist-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var( --se-radius-full );
	background: none;
	color: var( --se-text-muted );
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.18s var( --se-ease ), color 0.18s var( --se-ease );
}

.ses-wishlist-remove:hover {
	background: var( --se-danger-bg );
	color: var( --se-danger );
}

.ses-wishlist-remove svg {
	display: block;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------------
 * Empty and loading states
 * ------------------------------------------------------------------ */

.ses-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 56px 28px;
	border: 1px dashed var( --se-border );
	border-radius: var( --se-radius-lg );
	background: var( --se-bg-subtle );
	text-align: center;
}

.ses-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 6px;
	border-radius: var( --se-radius-full );
	background: var( --se-surface );
	border: 1px solid var( --se-border );
	color: var( --se-text-muted );
}

.ses-empty__icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ses-empty__title {
	margin: 0;
	font-size: 1.05em;
	font-weight: 600;
}

.ses-empty__text {
	max-width: 34ch;
	margin: 0;
	color: var( --se-text-muted );
	font-size: 0.9em;
}

.ses-empty .ses-btn {
	margin-top: 14px;
}

.ses-loading {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ses-skeleton {
	display: block;
	height: 76px;
	border-radius: var( --se-radius );
	background: linear-gradient( 90deg, var( --se-bg-subtle ) 25%, #f1f2f4 37%, var( --se-bg-subtle ) 63% );
	background-size: 400% 100%;
	animation: ses-shimmer 1.4s ease infinite;
}

@keyframes ses-shimmer {

	from {
		background-position: 100% 50%;
	}

	to {
		background-position: 0 50%;
	}
}

/* ---------------------------------------------------------------------
 * Top favorites grid
 * ------------------------------------------------------------------ */

.ses-favorites-grid {
	display: grid;
	grid-template-columns: repeat( 1, minmax( 0, 1fr ) );
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( min-width: 480px ) {

	.ses-favorites-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 782px ) {

	.ses-favorites-grid {
		grid-template-columns: repeat( min( 3, var( --se-columns, 4 ) ), minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1100px ) {

	.ses-favorites-grid {
		grid-template-columns: repeat( var( --se-columns, 4 ), minmax( 0, 1fr ) );
	}
}

.ses-fav-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var( --se-surface );
	border: 1px solid var( --se-border );
	border-radius: var( --se-radius-lg );
	box-shadow: var( --se-shadow-sm );
	overflow: hidden;
	transition: transform 0.22s var( --se-ease ), box-shadow 0.22s var( --se-ease );
}

.ses-fav-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --se-shadow-lg );
}

.ses-fav-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var( --se-bg-subtle );
	overflow: hidden;
}

.ses-fav-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.4s var( --se-ease );
}

.ses-fav-card:hover .ses-fav-card__media img {
	transform: scale( 1.04 );
}

.ses-fav-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: var( --se-radius-full );
	background: rgba( 255, 255, 255, 0.94 );
	color: var( --se-accent );
	font-size: 0.75em;
	font-weight: 700;
	box-shadow: var( --se-shadow-sm );
	backdrop-filter: blur( 6px );
}

.ses-fav-badge svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
	stroke: none;
}

.ses-fav-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
}

.ses-fav-card__title {
	color: inherit;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.ses-fav-card__title:hover {
	text-decoration: underline;
}

.ses-fav-card__price {
	font-weight: 600;
}

.ses-fav-card__price del {
	color: var( --se-text-muted );
	font-weight: 400;
}

.ses-fav-card__rating {
	color: var( --se-text-muted );
	font-size: 0.8em;
}

.ses-fav-card__rating .star-rating {
	margin: 0;
}

.ses-fav-card__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
}

.ses-fav-card__actions .ses-wishlist-button--loop {
	position: static;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
 * Back-in-stock waitlist
 * ------------------------------------------------------------------ */

.ses-waitlist {
	margin: 20px 0;
	padding: 20px;
	border: 1px solid var( --se-border );
	border-radius: var( --se-radius-lg );
	background: var( --se-bg-subtle );
}

.ses-waitlist__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.ses-waitlist__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var( --se-radius-full );
	background: var( --se-surface );
	border: 1px solid var( --se-border );
	color: var( --se-primary );
}

.ses-waitlist__icon svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ses-waitlist__title {
	margin: 0;
	font-size: 1em;
	font-weight: 600;
}

.ses-waitlist__text {
	margin: 0 0 14px;
	color: var( --se-text-muted );
	font-size: 0.875em;
}

.ses-input-group {
	display: flex;
	max-width: 560px;
	align-items: center;
	gap: 6px;
	padding: 5px 5px 5px 6px;
	border: 1px solid var( --se-border );
	border-radius: var( --se-radius-full );
	background: var( --se-surface );
	box-shadow: var( --se-shadow-sm );
	transition: border-color 0.18s var( --se-ease ), box-shadow 0.18s var( --se-ease );
}

.ses-input-group:focus-within {
	border-color: var( --se-primary );
	box-shadow: 0 0 0 4px var( --se-ring );
}

.ses-waitlist__email {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 9px 12px;
	border: 0;
	border-radius: var( --se-radius-full );
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.9375em;
	box-shadow: none;
	outline: none;
}

.ses-waitlist__email::placeholder {
	color: var( --se-text-muted );
}

.ses-waitlist__submit {
	flex: 0 0 auto;
	padding: 10px 20px;
}

.ses-waitlist__submit .ses-spinner {
	margin-left: 2px;
}

/* ---------------------------------------------------------------------
 * Comparison drawer
 * ------------------------------------------------------------------ */

.ses-compare-bar {
	position: fixed;
	right: 16px;
	bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) );
	left: 16px;
	z-index: 9998;
	display: flex;
	justify-content: center;
	max-width: 100vw;
	pointer-events: none;
}

.ses-compare-bar[hidden] {
	display: none;
}

.ses-compare-bar__island {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 100%;
	padding: 12px 14px 12px 18px;
	border: 1px solid var( --se-border );
	border-radius: var( --se-radius-full );
	background: rgba( 255, 255, 255, 0.96 );
	box-shadow: var( --se-shadow-lg );
	backdrop-filter: blur( 10px );
	pointer-events: auto;
	animation: ses-rise 0.28s var( --se-ease );
}

@keyframes ses-rise {

	from {
		opacity: 0;
		transform: translateY( 16px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.ses-compare-bar__left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.ses-compare-bar__counter {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	padding: 6px 12px;
	border-radius: var( --se-radius-full );
	background: var( --se-primary );
	color: #fff;
	font-size: 0.8125em;
	font-weight: 700;
	white-space: nowrap;
}

.ses-compare-bar__counter span {
	font-size: 1em;
}

.ses-compare-bar__items {
	display: flex;
	min-width: 0;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ses-compare-bar__items::-webkit-scrollbar {
	display: none;
}

.ses-compare-bar__item {
	position: relative;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border: 1px solid var( --se-border );
	background: var( --se-bg-subtle );
	border-radius: var( --se-radius-full );
	transition: transform 0.18s var( --se-ease );
}

.ses-compare-bar__item:hover {
	transform: translateY( -2px );
}

.ses-compare-bar__item a {
	display: flex;
	border-radius: var( --se-radius-full );
	overflow: hidden;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 4px;
	color: var( --se-text-muted );
	font-size: 0.6em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.ses-compare-bar__item img {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: var( --se-radius-full );
	object-fit: cover;
}

.ses-compare-bar__remove {
	position: absolute;
	top: -3px;
	right: -3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 2px solid var( --se-surface );
	border-radius: var( --se-radius-full );
	background: var( --se-primary );
	color: #fff;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	opacity: 0;
	transition: opacity 0.18s var( --se-ease );
}

.ses-compare-bar__item:hover .ses-compare-bar__remove,
.ses-compare-bar__remove:focus-visible {
	opacity: 1;
}

.ses-compare-bar__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 0;
}

.ses-compare-bar__go {
	padding: 10px 20px;
}

.ses-compare-bar__clear {
	padding: 10px 14px;
}

/* ---------------------------------------------------------------------
 * Comparison matrix
 * ------------------------------------------------------------------ */

.ses-compare-scroll {
	border: 1px solid var( --se-border );
	border-radius: var( --se-radius-lg );
	background: var( --se-surface );
	box-shadow: var( --se-shadow-sm );
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ses-compare-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.ses-compare-table th,
.ses-compare-table td {
	min-width: 200px;
	padding: 16px 20px;
	border: 0;
	border-bottom: 1px solid var( --se-border );
	text-align: left;
	vertical-align: top;
}

.ses-compare-table tbody tr:last-child th,
.ses-compare-table tbody tr:last-child td {
	border-bottom: 0;
}

.ses-compare-table tbody tr:nth-child( odd ) td,
.ses-compare-table tbody tr:nth-child( odd ) th[scope="row"] {
	background: var( --se-bg-subtle );
}

.ses-compare-table th[scope="row"],
.ses-compare-label {
	position: sticky;
	left: 0;
	z-index: 2;
	min-width: 150px;
	background: var( --se-surface );
	color: var( --se-text-muted );
	font-size: 0.6875em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ses-compare-table thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var( --se-surface );
	border-bottom: 1px solid var( --se-border );
	vertical-align: top;
}

.ses-compare-table thead .ses-compare-label {
	z-index: 4;
}

.ses-compare-product__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 160px;
}

.ses-compare-product__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var( --se-radius );
	background: var( --se-bg-subtle );
	overflow: hidden;
}

.ses-compare-product__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.ses-compare-product__title {
	color: inherit;
	font-size: 0.9375em;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	white-space: normal;
}

.ses-compare-product__title:hover {
	text-decoration: underline;
}

.ses-compare-remove {
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 1;
	box-shadow: var( --se-shadow-sm );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var( --se-border );
	border-radius: var( --se-radius-full );
	background: var( --se-surface );
	color: var( --se-text-muted );
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color 0.18s var( --se-ease ), color 0.18s var( --se-ease ), border-color 0.18s var( --se-ease );
}

.ses-compare-remove:hover {
	border-color: var( --se-danger );
	background: var( --se-danger-bg );
	color: var( --se-danger );
}

.ses-compare-table .ses-row-description td {
	color: var( --se-text-muted );
	font-size: 0.875em;
	line-height: 1.55;
}

.ses-compare-table .ses-row-description p {
	margin: 0;
}

.ses-compare-table .ses-row-price td {
	font-size: 1.05em;
	font-weight: 600;
}

.ses-compare-table .star-rating {
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Toasts
 * ------------------------------------------------------------------ */

.ses-toasts {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min( 340px, calc( 100vw - 32px ) );
	pointer-events: none;
}

.ses-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var( --se-border );
	border-radius: var( --se-radius );
	background: var( --se-surface );
	color: var( --se-primary );
	font-size: 0.875em;
	line-height: 1.4;
	box-shadow: var( --se-shadow-lg );
	animation: ses-toast-in 0.26s var( --se-ease );
	transition: opacity 0.3s var( --se-ease ), transform 0.3s var( --se-ease );
}

.ses-toast__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: var( --se-radius-full );
	background: var( --se-bg-subtle );
	color: var( --se-text-muted );
	font-size: 12px;
	font-weight: 700;
}

.ses-toast--success .ses-toast__icon {
	background: var( --se-success-bg );
	color: var( --se-success );
}

.ses-toast--error .ses-toast__icon {
	background: var( --se-danger-bg );
	color: var( --se-danger );
}

.ses-toast.is-leaving {
	opacity: 0;
	transform: translateX( 12px );
}

@keyframes ses-toast-in {

	from {
		opacity: 0;
		transform: translateX( 16px );
	}

	to {
		opacity: 1;
		transform: translateX( 0 );
	}
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */

/* Mobile (<768px) and tablet (768-1024px) share these: comfortable touch
 * targets, no iOS input zoom, and momentum scrolling on the horizontally
 * scrollable containers. */
@media ( max-width: 1024px ) {

	/* Expand the tap target of these small icon buttons to roughly 44x44px
	 * (the touch-target minimum recommended by WCAG 2.5.5) via an invisible
	 * overlay, so the visible icon size and surrounding layout don't change.
	 * Left off .ses-compare-bar__remove on purpose: its thumbnails sit only
	 * 8px apart in the rail, and a 44px hit zone there would swallow the
	 * neighbouring item's remove button instead of its own. */
	.ses-wishlist-remove {
		position: relative;
	}

	.ses-wishlist-remove::after,
	.ses-compare-remove::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate( -50%, -50% );
	}

	.ses-compare-scroll {
		-webkit-overflow-scrolling: touch;
	}

	/* 16px is the smallest input font-size iOS Safari will not zoom into on
	 * focus; anything smaller pops the viewport in and out when the waitlist
	 * email field is tapped. */
	.ses-waitlist__email {
		font-size: 16px;
	}

	.ses-input-group {
		flex-wrap: wrap;
	}

	.ses-waitlist__submit {
		flex: 1 1 100%;
	}
}

@media ( max-width: 767px ) {

	.ses-wishlist-table,
	.ses-wishlist-table tbody,
	.ses-wishlist-table tr,
	.ses-wishlist-table td {
		display: block;
		width: 100%;
	}

	.ses-wishlist-table thead {
		display: none;
	}

	.ses-wishlist-table tbody tr {
		padding: 16px;
	}

	.ses-wishlist-table tbody tr + tr {
		border-top: 1px solid var( --se-border );
	}

	.ses-wishlist-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 6px 0;
	}

	.ses-wishlist-table td.ses-col-product {
		display: block;
		padding-bottom: 12px;
	}

	.ses-wishlist-table td[data-label]::before {
		content: attr( data-label );
		color: var( --se-text-muted );
		font-size: 0.6875em;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.ses-wishlist-table td.ses-col-product::before,
	.ses-wishlist-table td.ses-col-actions::before {
		content: none;
	}

	.ses-wishlist-table .ses-col-price,
	.ses-wishlist-table .ses-col-stock,
	.ses-wishlist-table .ses-col-actions {
		width: 100%;
	}

	.ses-wishlist-table td.ses-col-actions {
		padding-top: 12px;
	}

	.ses-row-actions {
		justify-content: space-between;
		width: 100%;
	}

	.ses-compare-bar {
		right: 10px;
		bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
		left: 10px;
	}

	.ses-compare-bar__island {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		padding: 10px 10px 10px 14px;
		border-radius: var( --se-radius-lg );
	}

	.ses-compare-bar__left {
		flex: 0 1 auto;
		gap: 8px;
	}

	/* The thumbnail rail is the widest part of the bar and the least
	 * essential on a phone screen. Collapsing it to a plain counter pill is
	 * what actually stops the fixed bar from ever needing more width than
	 * the viewport has -- wrapping alone still let long content push a row
	 * wider than the screen and drag html/body into horizontal scroll. */
	.ses-compare-bar__items {
		display: none;
	}

	.ses-compare-bar__actions {
		flex: 1 1 auto;
		width: auto;
		justify-content: flex-end;
		gap: 6px;
	}

	.ses-compare-bar__go,
	.ses-compare-bar__clear {
		flex: 0 1 auto;
		min-width: 0;
		padding: 9px 14px;
		font-size: 0.8125em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ses-toasts {
		top: auto;
		right: 12px;
		bottom: 12px;
		left: 12px;
		width: auto;
	}

	.ses-compare-table th,
	.ses-compare-table td {
		min-width: 168px;
		padding: 14px;
	}

	.ses-compare-table th[scope="row"],
	.ses-compare-label {
		min-width: 118px;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.ses-btn,
	.ses-wishlist-button,
	.ses-compare-button,
	.ses-fav-card,
	.ses-fav-card__media img,
	.ses-toast,
	.ses-compare-bar__item,
	.ses-compare-bar__island,
	.ses-skeleton,
	.ses-spinner {
		transition: none;
		animation: none;
	}

	.ses-fav-card:hover {
		transform: none;
	}
}