.zpof {
	--zpof-text: #10233f;
	--zpof-muted: #687386;
	--zpof-border: #d7dee8;
	--zpof-accent: #2f74ff;
	--zpof-surface: #ffffff;
	--zpof-soft: #f5f7fb;
	color: var(--zpof-text);
	font-size: 16px;
}

.zpof *,
.zpof *::before,
.zpof *::after {
	box-sizing: border-box;
}

.zpof-toolbar {
	align-items: end;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 28px;
}

.zpof-sort {
	display: grid;
	gap: 6px;
}

.zpof-sort label {
	color: var(--zpof-muted);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.zpof-sort-select,
.zpof-reset,
.zpof-load-more,
.zpof-cart,
.zpof-wishlist {
	border-radius: 6px;
	font: inherit;
	min-height: 42px;
}

.zpof-sort-select {
	background: var(--zpof-surface);
	border: 1px solid var(--zpof-border);
	color: var(--zpof-text);
	padding: 0 36px 0 12px;
}

.zpof-reset,
.zpof-load-more,
.zpof-wishlist,
.zpof-xstore-wishlist a,
.zpof-xstore-wishlist button {
	background: var(--zpof-surface);
	border: 1px solid var(--zpof-border);
	color: var(--zpof-text);
	cursor: pointer;
	font-weight: 700;
	padding: 0 18px;
}

.zpof-reset:hover,
.zpof-load-more:hover,
.zpof-wishlist:hover,
.zpof-wishlist.is-active,
.zpof-xstore-wishlist a:hover,
.zpof-xstore-wishlist button:hover,
.zpof-xstore-wishlist .active,
.zpof-xstore-wishlist .added,
.zpof-xstore-wishlist .in-wishlist,
.zpof-xstore-wishlist .et-added {
	border-color: var(--zpof-accent);
	color: var(--zpof-accent);
}

.zpof-filters {
	display: grid;
	gap: 40px 80px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 56px;
}

.zpof-filter-group h3 {
	color: var(--zpof-text);
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 24px;
}

.zpof-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.zpof-chip {
	cursor: pointer;
	display: inline-flex;
}

.zpof-chip input {
	inline-size: 1px;
	opacity: 0;
	position: absolute;
}

.zpof-chip span {
	align-items: center;
	background: var(--zpof-surface);
	border: 1px solid var(--zpof-border);
	border-radius: 999px;
	display: inline-flex;
	font-weight: 700;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	transition: border-color 160ms ease, color 160ms ease;
}

.zpof-chip span::before {
	border: 1.5px solid var(--zpof-accent);
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 26px;
	width: 26px;
}

.zpof-chip input:checked + span {
	border-color: var(--zpof-accent);
	color: var(--zpof-accent);
}

.zpof-chip input:checked + span::before {
	background: radial-gradient(circle at center, var(--zpof-accent) 0 45%, transparent 48%);
}

.zpof-table-wrap {
	overflow-x: auto;
	position: relative;
}

.zpof-table {
	border-collapse: collapse;
	min-width: 1080px;
	width: 100%;
}

.zpof-table th,
.zpof-table td {
	border-bottom: 1px solid #edf0f4;
	padding: 18px 12px;
	text-align: left;
	vertical-align: middle;
}

.zpof-table th {
	color: var(--zpof-muted);
	font-size: 14px;
	font-weight: 800;
}

.zpof-table a {
	color: var(--zpof-text);
	text-decoration: none;
}

.zpof-table a:hover {
	color: var(--zpof-accent);
}

.zpof-sku {
	color: var(--zpof-muted);
	display: block;
	font-size: 13px;
	margin-top: 4px;
}

.zpof-xstore-wishlist a,
.zpof-xstore-wishlist button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 42px;
	min-width: 86px;
	padding: 0 18px;
	text-decoration: none;
}

.zpof-xstore-wishlist .et-icon,
.zpof-xstore-wishlist svg,
.zpof-xstore-wishlist i {
	margin-right: 6px;
}

.zpof-quantity {
	align-items: center;
	border: 1px solid var(--zpof-border);
	border-radius: 6px;
	display: inline-grid;
	grid-template-columns: 38px 48px 38px;
	min-height: 42px;
	overflow: hidden;
}

.zpof-qty-minus,
.zpof-qty-plus {
	background: var(--zpof-surface);
	border: 0;
	color: var(--zpof-text);
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	height: 42px;
	line-height: 1;
	padding: 0;
}

.zpof-qty-minus:hover,
.zpof-qty-plus:hover {
	color: var(--zpof-accent);
}

.zpof-qty-input {
	appearance: textfield;
	border: 0;
	border-left: 1px solid var(--zpof-border);
	border-right: 1px solid var(--zpof-border);
	color: var(--zpof-text);
	font: inherit;
	font-weight: 700;
	height: 42px;
	padding: 0;
	text-align: center;
	width: 48px;
}

.zpof-qty-input::-webkit-outer-spin-button,
.zpof-qty-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.zpof-cart {
	align-items: center;
	background: #222222;
	border: 1px solid #222222;
	color: #ffffff !important;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	justify-content: center;
	min-width: 138px;
	position: relative;
	padding: 0 18px;
	text-transform: uppercase;
}

.zpof-cart:hover {
	background: var(--zpof-accent);
	border-color: var(--zpof-accent);
}

.zpof-cart.is-adding {
	opacity: 0.7;
}

.zpof-cart.is-added {
	background: #32b74d;
	border-color: #32b74d;
	overflow: visible;
}

.zpof-cart.is-added::before,
.zpof-cart.is-added::after {
	animation: zpof-sparkle 900ms ease-out both;
	background:
		radial-gradient(circle, #ffd86b 0 2px, transparent 3px),
		radial-gradient(circle, #ffd86b 0 1px, transparent 2px),
		radial-gradient(circle, #ffffff 0 1px, transparent 2px);
	content: "";
	height: 46px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
}

.zpof-cart.is-added::before {
	background-position: 6px 8px, 24px 30px, 34px 14px;
	left: -48px;
}

.zpof-cart.is-added::after {
	background-position: 8px 30px, 22px 8px, 34px 28px;
	right: -48px;
}

.zpof-toast-region {
	position: fixed;
	right: 24px;
	top: 24px;
	z-index: 99999;
}

.zpof-toast {
	animation: zpof-toast-in 220ms ease-out both;
	background: #222222;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(16, 35, 63, 0.22);
	color: #ffffff;
	display: grid;
	gap: 4px 14px;
	grid-template-columns: 42px minmax(0, 1fr) 20px;
	max-width: min(360px, calc(100vw - 32px));
	padding: 18px;
	position: relative;
	width: 360px;
}

.zpof-toast.is-hiding {
	animation: zpof-toast-out 220ms ease-in both;
}

.zpof-toast.is-error .zpof-toast-icon {
	background: #d63638;
}

.zpof-toast-icon {
	align-items: center;
	background: #6bd23f;
	border-radius: 50%;
	display: flex;
	grid-row: span 2;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.zpof-toast-icon::before {
	color: #ffffff;
	content: "✓";
	font-size: 24px;
	font-weight: 900;
}

.zpof-toast.is-error .zpof-toast-icon::before {
	content: "!";
}

.zpof-toast strong {
	font-size: 15px;
	line-height: 1.25;
}

.zpof-toast p {
	color: rgba(255, 255, 255, 0.84);
	font-size: 13px;
	grid-column: 2;
	line-height: 1.35;
	margin: 0;
}

.zpof-toast-close {
	background: transparent;
	border: 0;
	color: #ffffff;
	cursor: pointer;
	font-size: 18px;
	grid-column: 3;
	grid-row: 1;
	height: 22px;
	line-height: 1;
	padding: 0;
	width: 22px;
}

.zpof-muted,
.zpof-empty {
	color: var(--zpof-muted);
}

.zpof-empty {
	background: var(--zpof-soft);
	border: 1px solid var(--zpof-border);
	border-radius: 6px;
	margin-top: 16px;
	padding: 18px;
}

.zpof-load-more {
	display: block;
	margin: 28px auto 0;
	min-width: 150px;
}

.zpof [hidden] {
	display: none !important;
}

.zpof.is-loading {
	opacity: 0.62;
}

.zpof-debug-panel {
	background: var(--zpof-soft);
	border: 1px solid var(--zpof-border);
	border-radius: 6px;
	margin-top: 28px;
	padding: 16px;
}

.zpof-debug-panel summary {
	cursor: pointer;
	font-weight: 800;
}

.zpof-debug-panel dl {
	display: grid;
	gap: 8px 16px;
	grid-template-columns: 180px minmax(0, 1fr);
	margin: 16px 0 0;
}

.zpof-debug-panel dt {
	color: var(--zpof-muted);
	font-weight: 800;
}

.zpof-debug-panel dd {
	margin: 0;
	min-width: 0;
}

.zpof-debug-panel pre {
	background: #ffffff;
	border: 1px solid var(--zpof-border);
	border-radius: 6px;
	margin: 0;
	overflow: auto;
	padding: 10px;
}

@media (max-width: 900px) {
	.zpof-filters {
		gap: 32px;
		grid-template-columns: 1fr;
	}

	.zpof-filter-group h3 {
		font-size: 24px;
	}
}

@media (max-width: 640px) {
	.zpof-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.zpof-table {
		min-width: 0;
	}

	.zpof-table thead {
		display: none;
	}

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

	.zpof-table tr {
		border: 1px solid var(--zpof-border);
		border-radius: 8px;
		margin-bottom: 14px;
		padding: 10px 12px;
	}

	.zpof-table td {
		border-bottom: 0;
		display: flex;
		gap: 16px;
		justify-content: space-between;
		padding: 8px 0;
	}

	.zpof-table td::before {
		color: var(--zpof-muted);
		content: attr(data-label);
		font-weight: 800;
		max-width: 44%;
	}

	.zpof-cart,
	.zpof-wishlist,
	.zpof-xstore-wishlist a,
	.zpof-xstore-wishlist button,
	.zpof-quantity {
		width: 100%;
	}

	.zpof-quantity {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.zpof-debug-panel dl {
		grid-template-columns: 1fr;
	}
}

@keyframes zpof-sparkle {
	0% {
		opacity: 0;
		transform: translateY(-50%) scale(0.6);
	}
	35% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-50%) scale(1.24);
	}
}

@keyframes zpof-toast-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes zpof-toast-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}