/**
 * Product Page Enhancer — Layout-only CSS.
 *
 * All visual styling (colors, fonts, borders) inherited from WoodMart theme.
 * Only flex/grid layout, spacing, and opacity are defined here.
 *
 * @since 4.4.0
 */

/* ── Trust Bar ───────────────────────────────────────────────── */
.vse-pe-trust-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 0 0;
	margin-top: 16px;
	border-top: 1px solid var(--brdcolor-gray-300, currentColor);
	font-size: 0.82em;
	opacity: 0.75;
}
.vse-pe-divider { opacity: 0.3; }
.vse-pe-trust-icon { margin-right: 3px; }

/* ── Quick Specs ─────────────────────────────────────────────── */
.vse-pe-specs {
	width: 100%;
	margin-top: 14px;
	border-collapse: collapse;
	font-size: 0.88em;
}
.vse-pe-specs th {
	text-align: left;
	padding: 6px 12px 6px 0;
	white-space: nowrap;
	opacity: 0.55;
	font-weight: 600;
}
.vse-pe-specs td {
	padding: 6px 0;
}
.vse-pe-specs tr:not(:last-child) {
	border-bottom: 1px dashed var(--brdcolor-gray-300, currentColor);
}
/* Specs in gallery column — extra top spacing after gallery */
.product-images > .vse-pe-specs {
	margin-top: 24px;
	padding: 0 4px;
}

/* ── Variation Matrix ────────────────────────────────────────── */
.vse-pe-matrix-wrap {
	margin-bottom: 24px;
}
.vse-pe-matrix-title {
	font-size: 1.1em;
	font-weight: 700;
	margin: 0 0 12px;
}
.vse-pe-matrix-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.vse-pe-matrix {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	font-size: 0.9em;
}
.vse-pe-matrix th {
	padding: 8px 12px;
	font-weight: 600;
	white-space: nowrap;
}
.vse-pe-matrix thead th {
	border-bottom: 2px solid var(--wd-primary-color, currentColor);
}
.vse-pe-matrix tbody th {
	text-align: left;
	opacity: 0.85;
}
.vse-pe-matrix-corner {
	text-align: left;
	opacity: 0.5;
	font-weight: 400;
	font-size: 0.85em;
}
.vse-pe-cell { padding: 8px; }
.vse-pe-cell a {
	color: var(--wd-primary-color, currentColor);
	text-decoration: none;
	font-size: 1.1em;
}
.vse-pe-cell a:hover { opacity: 0.7; }
.vse-pe-cell-empty span { opacity: 0.2; }
.vse-pe-cell-active a {
	outline: 2px solid var(--wd-primary-color, currentColor);
	outline-offset: 2px;
	border-radius: 50%;
	padding: 2px 4px;
}
.vse-pe-active { color: var(--wd-primary-color, inherit); }
.vse-pe-matrix tbody tr:not(:last-child) {
	border-bottom: 1px solid var(--brdcolor-gray-300, currentColor);
}

/* ── Single-attribute Pills ──────────────────────────────────── */
.vse-pe-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.vse-pe-pill {
	padding: 6px 14px;
	border: 1px solid var(--brdcolor-gray-300, currentColor);
	border-radius: var(--wd-brd-radius, 4px);
	text-decoration: none;
	font-size: 0.88em;
	color: inherit;
	transition: border-color 0.2s;
}
.vse-pe-pill:hover {
	border-color: var(--wd-primary-color, currentColor);
	color: var(--wd-primary-color, inherit);
}
.vse-pe-pill-active {
	border-color: var(--wd-primary-color, currentColor);
	color: var(--wd-primary-color, inherit);
}

/* ── Currency Price Display ──────────────────────────────────── */
.vse-pe-price-display {
	display: flex;
	align-items: center;
	gap: 16px;
	max-height: 100px;
	margin: 6px 0 12px;
}
.vse-pe-denomination-stack {
	display: flex;
	align-items: center;
	position: relative;
	min-width: 200px;
	height: 60px;
}

/* ── Banknotes ───────────────────────────────────────────────── */
.vse-pe-note {
	position: absolute;
	width: 110px;
	height: 50px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4px 8px;
	overflow: hidden;
	background: var(--note-bg);
	border: 1px solid var(--note-border);
	color: var(--note-text);
	transform: translateX(calc(var(--note-index) * 45px));
	z-index: calc(5 - var(--note-index));
	box-shadow: 1px 2px 6px rgba(0,0,0,0.3);
}
.vse-pe-note::after {
	content: '';
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: 35%;
	background: radial-gradient(circle at 70% 50%, rgba(255,255,255,0.06), transparent 70%);
	pointer-events: none;
}
.vse-pe-note--half  { --note-bg: #D4792C; --note-border: #B8631E; --note-text: #FFF; }
.vse-pe-note--1     { --note-bg: #8B2332; --note-border: #6E1A28; --note-text: #FFF; }
.vse-pe-note--5     { --note-bg: #1E5C8A; --note-border: #164A6E; --note-text: #FFF; }
.vse-pe-note--10    { --note-bg: #2D7A4F; --note-border: #1F5C3A; --note-text: #FFF; }
.vse-pe-note--20    { --note-bg: #6B4226; --note-border: #52331E; --note-text: #FFF; }

.vse-pe-note-val {
	font-size: 18px;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
	line-height: 1;
	z-index: 1;
}
.vse-pe-note-val small {
	font-size: 9px;
	font-weight: 600;
	margin-left: 2px;
	vertical-align: super;
}
.vse-pe-note-lines {
	display: none;
	height: 8px;
	margin-top: 2px;
	background: repeating-linear-gradient(
		0deg,
		currentColor 0px, currentColor 1px,
		transparent 1px, transparent 3px
	);
	opacity: 0.15;
	width: 50%;
}
.vse-pe-note-motif {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.25;
	z-index: 1;
}
.vse-pe-motif--rect  { width: 12px; height: 16px; border: 1.5px solid currentColor; }
.vse-pe-motif--tri   { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid currentColor; }
.vse-pe-motif--diamond { width: 12px; height: 12px; border: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.vse-pe-motif--circle { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; }
.vse-pe-motif--arch  { width: 14px; height: 10px; border: 1.5px solid currentColor; border-radius: 14px 14px 0 0; border-bottom: none; }

.vse-pe-note-bank {
	position: absolute;
	bottom: 2px;
	left: 8px;
	font-size: 6px;
	opacity: 0.25;
	white-space: nowrap;
	direction: rtl;
}

/* ── Badge (×N) ──────────────────────────────────────────────── */
.vse-pe-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wd-primary-color, #DAB048);
	color: #0d0d0d;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ── Coins ───────────────────────────────────────────────────── */
.vse-pe-coin-group {
	position: relative;
	margin-left: 8px;
}
.vse-pe-coin {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #E8D68A, #C5A54E 50%, #A08930 100%);
	border: 1.5px solid #A08930;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 3px #D4D4D4, 1px 1px 4px rgba(0,0,0,0.3);
}
.vse-pe-coin-val {
	font-size: 11px;
	font-weight: 700;
	color: #3a2a10;
	line-height: 1;
}
.vse-pe-coin-unit {
	font-size: 6px;
	color: #5a4a20;
	line-height: 1;
}

/* ── Text Price ──────────────────────────────────────────────── */
.vse-pe-price-text {
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.3;
}
.vse-pe-price-active { color: inherit; }
.vse-pe-price-regular {
	opacity: 0.5;
	font-size: 0.85em;
	margin-right: 4px;
}

/* ── Animation ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	.vse-pe-note {
		animation: vse-noteSlide 300ms ease-out both;
		animation-delay: calc(var(--note-index) * 80ms);
	}
	.vse-pe-coin-group {
		animation: vse-coinFade 200ms ease-out 320ms both;
	}
}
@keyframes vse-noteSlide {
	from { opacity: 0; transform: translateX(calc(var(--note-index) * 30px - 12px)); }
	to   { opacity: 1; transform: translateX(calc(var(--note-index) * 45px)); }
}
@keyframes vse-coinFade {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.vse-pe-price-display { max-height: 80px; gap: 10px; }
	.vse-pe-note { width: 80px; height: 36px; padding: 3px 6px; }
	.vse-pe-note-val { font-size: 14px; }
	.vse-pe-note-val small { font-size: 7px; }
	.vse-pe-note-lines { height: 5px; }
	.vse-pe-note-bank { font-size: 5px; }
	.vse-pe-note-motif { left: 6px; }
	.vse-pe-motif--rect { width: 8px; height: 11px; }
	.vse-pe-motif--tri { border-left-width: 5px; border-right-width: 5px; border-bottom-width: 10px; }
	.vse-pe-motif--diamond { width: 8px; height: 8px; }
	.vse-pe-motif--circle { width: 10px; height: 10px; }
	.vse-pe-motif--arch { width: 10px; height: 7px; }
	.vse-pe-coin { width: 28px; height: 28px; }
	.vse-pe-coin-val { font-size: 9px; }
	.vse-pe-badge { width: 16px; height: 16px; font-size: 8px; top: -4px; right: -4px; }
	.vse-pe-denomination-stack { min-width: 140px; height: 44px; }
	@keyframes vse-noteSlide {
		from { opacity: 0; transform: translateX(calc(var(--note-index) * 30px - 12px)); }
		to   { opacity: 1; transform: translateX(calc(var(--note-index) * 45px)); }
	}
}

/* ── Hide WC variation price (we render our own) ─────────────── */
.single-product .woocommerce-variation-price { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }