/* Propelir Cross-Sell — vitrine
 * Tokens: única fonte de cores, tipografia e espaçamento.
 * Herda as cores do tema (--color-primary/--color-accent) quando existirem. */
.pcs-box,
.pcs-offer-head,
.pcs-offer-row,
.pcs-cart-price {
	--pcs-text: var(--color-primary, #1d1d1f);
	--pcs-muted: #6b6f76;
	--pcs-border: var(--color-border, #e5e5e5);
	--pcs-surface: #ffffff;
	--pcs-soft: #f7f7f8;
	--pcs-accent: var(--color-primary, #111111);
	--pcs-badge-bg: var(--color-accent, #e7a691);
	--pcs-badge-text: #ffffff;
	--pcs-danger: #b3261e;
	--pcs-radius: 10px;
	--pcs-radius-sm: 6px;
	--pcs-gap: 12px;
	--pcs-pad: 16px;
	--pcs-thumb: 64px;
	--pcs-font-size: 14px;
	--pcs-small: 12px;
}
.pcs-box,
.pcs-box * { box-sizing: border-box; }

/* ---- peças comuns ---- */
.pcs-heading {
	margin: 0 0 var(--pcs-gap);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pcs-text);
	text-transform: none;
	letter-spacing: normal;
}

.pcs-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 99px;
	background: var(--pcs-badge-bg);
	color: var(--pcs-badge-text);
	font-size: var(--pcs-small);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	vertical-align: middle;
}

.pcs-price { color: var(--pcs-text); font-weight: 600; }
.pcs-price del,
.pcs-cart-price del { color: var(--pcs-muted); font-weight: 400; margin-right: 4px; opacity: .8; }
.pcs-price ins,
.pcs-cart-price ins { text-decoration: none; font-weight: 600; }

.pcs-variation {
	display: block;
	width: 100%;
	max-width: 260px;
	min-height: 36px;
	margin-top: 6px;
	padding: 4px 8px;
	border: 1px solid var(--pcs-border);
	border-radius: var(--pcs-radius-sm);
	background: var(--pcs-surface);
	color: var(--pcs-text);
	font: inherit;
	font-size: var(--pcs-small);
}
.pcs-variation.pcs-invalid { border-color: var(--pcs-danger) !important; box-shadow: 0 0 0 1px var(--pcs-danger) !important; }

/* ---- página do produto: depois dos botões de compra ---- */
.pcs-box--product {
	clear: both;
	width: 100%;
	margin: 20px 0;
	padding: var(--pcs-pad);
	border: 1px solid var(--pcs-border);
	border-radius: var(--pcs-radius);
	background: var(--pcs-surface);
	color: var(--pcs-text);
	font-size: var(--pcs-font-size);
}
.pcs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pcs-gap); }
.pcs-row { display: flex; align-items: center; gap: var(--pcs-gap); margin: 0; }
.pcs-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pcs-name { font-weight: 500; line-height: 1.35; }
.pcs-thumb {
	display: block;
	width: var(--pcs-thumb) !important;
	height: var(--pcs-thumb) !important;
	max-width: none;
	margin: 0 !important;
	object-fit: cover;
	border-radius: var(--pcs-radius-sm);
	background: var(--pcs-soft);
}

.pcs-pick { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.pcs-check { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pcs-tick { width: 22px; height: 22px; border: 1.5px solid var(--pcs-border); border-radius: 5px; background: var(--pcs-surface); transition: background .15s, border-color .15s; }
.pcs-check:checked + .pcs-tick {
	border-color: var(--pcs-accent);
	background: var(--pcs-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.pcs-check:focus-visible + .pcs-tick { outline: 2px solid var(--pcs-accent); outline-offset: 2px; }

/* ---- carrinho: linhas da própria tabela (o resto vem do tema) ---- */
.pcs-offer-head td {
	padding-top: 24px !important;
	color: var(--pcs-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.pcs-offer-row td { vertical-align: middle; }
.pcs-offer-row .product-name .pcs-badge { margin-left: 6px; }
.pcs-offer-row .pcs-add { white-space: nowrap; }

@media (max-width: 768px) {
	/* tabela responsiva do WooCommerce: sem rótulo em células sem título */
	.pcs-offer-head td::before,
	.pcs-offer-row td:not([data-title])::before { content: none !important; display: none !important; }
	.woocommerce table.shop_table_responsive tr.pcs-offer-head td,
	.woocommerce-page table.shop_table_responsive tr.pcs-offer-head td { text-align: left !important; background: transparent !important; }
	.pcs-offer-row .product-remove,
	.pcs-offer-row .product-subtotal { display: none !important; }
	.pcs-offer-row .pcs-variation { max-width: none; }
}

@media (max-width: 480px) {
	.pcs-box { --pcs-thumb: 52px; --pcs-pad: 12px; }
	.pcs-row .pcs-badge { display: none; } /* o preço riscado já mostra o benefício */
	.pcs-variation { max-width: none; }
}