/*
 * Ravolli — PDP Detalhes da joia v1.2.0
 * Aba "Detalhes da joia" (Noivado/Alianças) — inc/ravolli-pdp-details.php.
 * A calculadora de frete (Virtuaria Correios) é estilizada em style.css,
 * bloco "RAVOLLI PDP — CORES DE APOIO" (dourado/navy, decisão da Ana 24/09).
 * Só tokens (theme.json / style.css); sem hex novo, sem !important.
 *
 * v1.1.0 (25/09/2026): fundo da tabela = surface-alt (o mesmo das dobras
 * alternadas) e faixa mais escura (surface-alt-strong) nos títulos de seção.
 * Contraste (WCAG AA, mín. 4,5:1): #606060 sobre surface-alt = 5,7:1; sobre
 * surface-alt-strong = 5,2:1. O rótulo das linhas usava text-secondary
 * (#737373: 4,3:1 sobre surface-alt, abaixo do AA), por isso passou a
 * text-body; a hierarquia continua pelo peso 600.
 *
 * v1.2.0 (28/09/2026): nota da seção Pedras (`.ravolli-details__note`). Pelo
 * mesmo motivo documentado acima (text-secondary falha AA sobre surface-alt),
 * usa text-body em vez de text-secondary, mesmo o pedido original sendo "cor
 * secundária" — aqui o nome do token não é o que importa, é o contraste.
 */

/* ---------- Aba: seções ---------- */

.ravolli-details {
	background: var(--wp--preset--color--surface-alt);
}

.ravolli-details__title {
	margin: 0;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--surface-alt-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	line-height: var(--wp--custom--ravolli--typography--line-height--heading);
	color: var(--wp--custom--ravolli--color--text--primary);
}

.ravolli-details__list {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--md);
}

.ravolli-details__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--2xs);
	padding: var(--wp--preset--spacing--sm) 0;
	border-bottom: 1px solid var(--wp--preset--color--border-divider);
}

.ravolli-details__row:last-child {
	border-bottom: 0;
}

.ravolli-details__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--text-body);
}

.ravolli-details__value {
	margin: 0;
	min-width: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--ravolli--typography--line-height--body);
	color: var(--wp--preset--color--text-body);
	overflow-wrap: anywhere;
}

.ravolli-details__link {
	margin-left: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--theme-link-initial-color);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ravolli-details__link:hover,
.ravolli-details__link:focus-visible {
	color: var(--theme-link-hover-color);
}

.ravolli-details__note {
	margin: 0 0 var(--wp--preset--spacing--sm);
	padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--ravolli--typography--line-height--body);
	color: var(--wp--preset--color--text-body);
}

.ravolli-details__note a {
	color: var(--theme-link-initial-color);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ravolli-details__note a:hover,
.ravolli-details__note a:focus-visible {
	color: var(--theme-link-hover-color);
}

@media (min-width: 768px) {
	.ravolli-details__row {
		grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr);
		gap: var(--wp--preset--spacing--md);
		align-items: baseline;
	}
}

/* ---------- Aba: "Sua compra inclui" ---------- */

.ravolli-details__included {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--md);
	list-style: none;
}

.ravolli-details__included li {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
	border-bottom: 1px solid var(--wp--preset--color--border-divider);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--ravolli--typography--line-height--body);
	color: var(--wp--preset--color--text-body);
}

.ravolli-details__included li:last-child {
	border-bottom: 0;
}

.ravolli-details__included li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--brand-primary);
}