/*
 * Gold Pricing – product specs block.
 * Design is set in WooCommerce > Gold Pricing > Specs design.
 * You can also override any --gp-* variable from your theme, e.g. .gp-scope { --gp-accent: #b8860b; }
 */
.gp-scope {
	--gp-accent: #c9a227;
	--gp-accent-2: #ecd27a;
	--gp-accent-dark: #6f5207;
	--gp-radius: 14px;
	--gp-icon-size: 40px;
	--gp-gap: 10px;
	--gp-silver: #9aa3ad;
}

/* ---------- Base ---------- */
.gp-specs {
	margin: 16px 0 20px;
	color: var(--gp-text, #14110d);
	/* Layout reacts to the block's own width (works in product page, quick view, sidebars). */
	container: gp-specs / inline-size;
}

/* Theme list styles (bullets, RTL margins) must never leak in. */
.gp-scope .gp-specs__list { margin: 0; padding: 0; list-style: none; }
.gp-scope .gp-specs__item { margin: 0; list-style: none; }
.gp-scope .gp-specs__item::before { content: none; }

.gp-specs__list { display: grid; gap: var(--gp-gap); }

.gp-specs__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	min-width: 0;
	background: var(--gp-surface, #fff);
	border: 1px solid var(--gp-border, #ece2c8);
	border-radius: var(--gp-radius);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gp-specs__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.gp-specs__label {
	font-size: .78em;
	color: var(--gp-muted, #8a7f6c);
	letter-spacing: .01em;
}
.gp-specs__value {
	font-size: 1.05em;
	font-weight: 700;
	color: var(--gp-text, #14110d);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.gp-specs__unit { font-size: .72em; font-weight: 500; color: var(--gp-muted, #8a7f6c); }

/* ---------- Layout (columns) ---------- */
.gp-scope.gp-specs--cols-auto .gp-specs__list,
.gp-scope.gp-specs--cols-4 .gp-specs__list { grid-template-columns: repeat(var(--gp-n, 4), minmax(0, 1fr)); }
.gp-scope.gp-specs--cols-2 .gp-specs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-scope.gp-specs--cols-list .gp-specs__list { grid-template-columns: 1fr; }

@container gp-specs (max-width: 520px) {
	.gp-scope.gp-specs--cols-auto .gp-specs__list--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container gp-specs (max-width: 340px) {
	.gp-scope.gp-specs--cols-4 .gp-specs__list--n4,
	.gp-scope.gp-specs--cols-auto .gp-specs__list--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gp-scope.gp-specs--cols-auto .gp-specs__list--n3 > :first-child { grid-column: 1 / -1; }
}

/* ---------- Icons ---------- */
.gp-specs__icon {
	position: relative;
	flex: 0 0 var(--gp-icon-size);
	width: var(--gp-icon-size);
	height: var(--gp-icon-size);
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--gp-icon-color, var(--gp-accent-dark));
	background:
		radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 45%),
		linear-gradient(145deg, var(--gp-accent-2) 0%, var(--gp-accent) 55%, color-mix(in srgb, var(--gp-accent) 70%, #000) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .35),
		0 2px 6px color-mix(in srgb, var(--gp-accent) 35%, transparent);
}
.gp-specs__icon svg { width: 56%; height: 56%; display: block; overflow: visible; }

/* Hallmark stamp (875 / 999) inside the karat icon. */
.gp-specs__icon--mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border: 1px dashed currentColor;
	border-radius: inherit;
	opacity: .5;
}
.gp-specs__mark {
	font: 800 calc(var(--gp-icon-size) * .3)/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: -.02em;
	direction: ltr;
	font-variant-numeric: tabular-nums;
}

.gp-specs--icon-rounded .gp-specs__icon { border-radius: 28%; }
.gp-specs--icon-none .gp-specs__icon {
	background: none;
	box-shadow: none;
	color: var(--gp-icon-color, var(--gp-accent));
}
.gp-specs--icon-none .gp-specs__icon svg { width: 80%; height: 80%; }
.gp-specs--icon-none .gp-specs__icon--mark::after { inset: 1px; border-radius: 50%; }

/* Silver products: silver icon. */
.gp-specs__item--silver .gp-specs__icon {
	--gp-accent: var(--gp-silver);
	--gp-accent-2: #eef1f4;
	color: #3f464e;
}

/* ---------- Panel presets (strip + dark): one box, items stacked, divider lines ---------- */
.gp-specs--strip .gp-specs__list,
.gp-specs--dark .gp-specs__list {
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--gp-border, #ece2c8);
	border-radius: var(--gp-radius);
	background: var(--gp-surface, linear-gradient(180deg, #fffdf8 0%, #fbf5e6 100%));
}
.gp-specs--strip .gp-specs__item,
.gp-specs--dark .gp-specs__item {
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 8px;
	padding: 16px 8px 14px;
	background: transparent;
	border: 0;
	border-radius: 0;
	/* Divider lines; the outer edges are clipped by the panel. */
	box-shadow: -1px -1px 0 0 var(--gp-border, #ece2c8);
}
.gp-specs--strip .gp-specs__text,
.gp-specs--dark .gp-specs__text { align-items: center; }
.gp-specs--strip.gp-specs--cols-list .gp-specs__item,
.gp-specs--dark.gp-specs--cols-list .gp-specs__item { flex-direction: row; justify-content: flex-start; text-align: start; padding: 12px 16px; }
.gp-specs--strip.gp-specs--cols-list .gp-specs__text,
.gp-specs--dark.gp-specs--cols-list .gp-specs__text { align-items: flex-start; }

/* Dark (luxury black & gold). */
.gp-specs--dark .gp-specs__list {
	border-color: var(--gp-border, rgba(201, 162, 39, .35));
	background: var(--gp-surface, linear-gradient(160deg, #241d14 0%, #14110d 100%));
}
.gp-specs--dark .gp-specs__item { box-shadow: -1px -1px 0 0 var(--gp-border, rgba(201, 162, 39, .22)); }
.gp-specs--dark .gp-specs__label,
.gp-specs--dark .gp-specs__unit { color: var(--gp-muted, #c9b88a); }
.gp-specs--dark .gp-specs__value { color: var(--gp-text, #fff); }

/* ---------- Preset: cards (separate cards) ---------- */
.gp-specs--cards .gp-specs__item { box-shadow: 0 1px 2px rgba(20, 17, 13, .04); }
.gp-specs--cards .gp-specs__item:hover {
	transform: translateY(-2px);
	border-color: var(--gp-accent);
	box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--gp-accent) 60%, transparent);
}

/* ---------- Preset: minimal (no boxes, thin icon rings) ---------- */
.gp-specs--minimal .gp-specs__item { background: transparent; border: 0; padding: 6px 0; }
.gp-specs--minimal .gp-specs__icon {
	background: var(--gp-surface, color-mix(in srgb, var(--gp-accent) 10%, transparent));
	box-shadow: inset 0 0 0 1.5px var(--gp-accent);
	color: var(--gp-icon-color, var(--gp-accent-dark));
}
.gp-specs--minimal.gp-specs--icon-none .gp-specs__icon { background: none; box-shadow: none; }

/* ---------- Preset: compact (small pills in one line) ---------- */
.gp-specs--compact .gp-specs__list { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-specs--compact .gp-specs__item { padding-block: 4px; padding-inline: 4px 12px; border-radius: 99px; gap: 8px; }
.gp-specs--compact .gp-specs__icon { --gp-icon-size: 28px; }
.gp-specs--compact .gp-specs__label { display: none; }
.gp-specs--compact .gp-specs__value { font-size: .9em; }

/* ---------- Breakdown line ---------- */
.gp-specs__breakdown {
	margin: 10px 0 0;
	padding: 10px 14px;
	border-radius: var(--gp-radius);
	background: color-mix(in srgb, var(--gp-accent) 10%, #fff);
	color: var(--gp-text, #14110d);
	font-size: .9em;
	font-variant-numeric: tabular-nums;
}
.gp-specs--dark .gp-specs__breakdown { background: #14110d; color: #f3e7c3; }

/* Variation swap feedback. */
.gp-specs.is-updating { opacity: .55; transition: opacity .15s ease; }

@media (prefers-reduced-motion: reduce) {
	.gp-specs__item, .gp-specs.is-updating { transition: none; }
	.gp-specs--cards .gp-specs__item:hover { transform: none; }
}

@media print {
	.gp-specs__item { box-shadow: none; border-color: #ccc; }
	.gp-specs__icon { background: none; box-shadow: none; }
}