/**
 * Shared commerce styles: spec chips + installments line.
 *
 * These fragments are injected by core helpers (woo_sil7en_spec_chips_html,
 * woo_sil7en_installments_html) into several blocks (product-card, buy-box,
 * cart), so their styles live ONCE here rather than duplicated per block.
 * Everything is token-driven so it re-skins per client.
 */

/* ----------------------------------------------------------------- *
 *  Spec chips (quick specs)                                          *
 * ----------------------------------------------------------------- */
.woo-sil7en-spec-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.85rem;
}

.woo-sil7en-spec-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast, #14110e);
}

.woo-sil7en-spec-chips__icon {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	color: var(--wp--preset--color--primary, currentColor);
}

/* Stack a one-word caption above the value so the icon-only chip is legible. */
.woo-sil7en-spec-chips__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.woo-sil7en-spec-chips__label {
	font-size: 0.58rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--muted, #5e706e) 85%, transparent);
}

.woo-sil7en-spec-chips__value {
	white-space: nowrap;
}

/* Pill treatment for the buy-box / quick-spec contexts. */
.woo-sil7en-spec-chips--buybox .woo-sil7en-spec-chips__item,
.woo-sil7en-spec-chips--quickspecs .woo-sil7en-spec-chips__item {
	padding: 0.34rem 0.62rem;
	background: var(--wp--preset--color--surface, #f4f4f2);
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border-radius: var(--wp--custom--radius--pill, 999px);
}

/* ----------------------------------------------------------------- *
 *  Installments ("12 cuotas de $X sin interés")                      *
 * ----------------------------------------------------------------- */
.woo-sil7en-installments {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	line-height: 1.3;
	color: var(--wp--preset--color--muted, #5e706e);
}

.woo-sil7en-installments__icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	color: var(--wp--preset--color--primary, currentColor);
}

.woo-sil7en-installments__text {
	display: inline;
}

.woo-sil7en-installments__n {
	color: var(--wp--preset--color--contrast, #14110e);
	font-weight: 700;
}

.woo-sil7en-installments__de {
	color: var(--wp--preset--color--muted, #5e706e);
}

.woo-sil7en-installments__per .woocommerce-Price-amount,
.woo-sil7en-installments__per {
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #14110e);
}

.woo-sil7en-installments__label {
	color: var(--wp--preset--color--muted, #5e706e);
}

/* Prominent "financing box" for the product buy-box. */
.woo-sil7en-installments--full {
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.7rem;
	padding: 0.7rem 0.85rem;
	font-size: var(--wp--preset--font-size--sm, 0.95rem);
	background: var(--wp--preset--color--surface, #f1f7f6);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #0ea89b) 8%, transparent);
	border: 1px solid var(--wp--preset--color--border, #e6e3de);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary, #0ea89b) 24%, transparent);
	border-radius: var(--wp--custom--radius--lg, 0.5rem);
}

.woo-sil7en-installments--full .woo-sil7en-installments__icon {
	width: 1.4em;
	height: 1.4em;
}

/* ----------------------------------------------------------------- *
 *  Installments selector (PDP) — 3 / 6 / 12 segments, CSS-only.      *
 * ----------------------------------------------------------------- */
.woo-sil7en-installments-pick {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.woo-sil7en-installments-pick__lead {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.woo-sil7en-installments-pick__icon {
	width: 1.2em;
	height: 1.2em;
	color: var(--wp--preset--color--primary, #00b8bf);
}

.woo-sil7en-installments-pick__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin-block: 0.5rem;
}

.woo-sil7en-installments-pick__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.woo-sil7en-installments-pick__opt {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	align-items: center;
	text-align: center;
	padding: 0.6rem 0.4rem;
	cursor: pointer;
	border: 1.5px solid var(--wp--preset--color--border, #e3e6e6);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	transition:
		border-color 150ms ease,
		background 150ms ease;
}

.woo-sil7en-installments-pick__per {
	font-weight: 800;
	font-size: var(--wp--preset--font-size--sm, 0.95rem);
}

.woo-sil7en-installments-pick__n {
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--muted, #5f6a6a);
}

.woo-sil7en-installments-pick__radio:checked + .woo-sil7en-installments-pick__opt {
	border-color: var(--wp--preset--color--primary, #00b8bf);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #00b8bf) 8%, transparent);
}

.woo-sil7en-installments-pick__radio:checked + .woo-sil7en-installments-pick__opt .woo-sil7en-installments-pick__per {
	color: var(--wp--preset--color--primary, #00b8bf);
}

.woo-sil7en-installments-pick__radio:focus-visible + .woo-sil7en-installments-pick__opt {
	outline: 2px solid var(--wp--preset--color--primary, #00b8bf);
	outline-offset: 2px;
}

.woo-sil7en-installments-pick__foot {
	margin: 0.15rem 0 0;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--muted, #5f6a6a);
}