/**
 * Mindcommerce — Página de produto (D-40). Só tokens; mobile-first.
 * Carregado apenas em páginas de produto.
 */

/* =============================================================================
   1. LAYOUT DO TOPO (rascunho aprovado, docs/rascunhos/pdp-rascunho.html)
   Fundo cinza; à esquerda UM cartão branco (.mc-pdp-media: galeria, selo,
   ficha rápida, CA e estoque); à direita o cartão de compra (.summary).
   No mobile a ordem é galeria → compra → ficha (o cartão da esquerda se desfaz
   com display: contents e cada parte vira o seu próprio cartão).
   ============================================================================= */
body.single-product {
	background-color: var(--color-bg-subtle);
}

.single-product .product-details-wrapper:not(.mc-pdp-sections) {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
	align-items: start;
}

.mc-pdp-media {
	display: contents;
}

.single-product .mc-pdp-media > .images,
.single-product .product-details-wrapper > .summary {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.single-product .mc-pdp-media > .images {
	order: 1;
	min-width: 0;
	padding: var(--space-lg);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
}

.single-product .product-details-wrapper > .summary {
	order: 2;
	padding: var(--space-xl);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
}

.single-product .mc-pdp-media > .mc-pdp-facts {
	order: 3;
}

/* Miniaturas sempre à esquerda da foto (não depende do script da galeria) */
.single-product .cg-layout-vertical-left .cg-thumb-swiper {
	order: 1;
}

.single-product .cg-layout-vertical-left .cg-main-swiper {
	order: 2;
}

/* Selo de desconto no canto da foto */
.mc-pdp-flag {
	position: absolute;
	top: var(--space-xl);
	left: var(--space-xl);
	z-index: 3;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-pill);
	background: var(--color-badge-discount);
	color: var(--color-badge-discount-text);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-bold);
}

@media (min-width: 993px) {
	.single-product .product-details-wrapper:not(.mc-pdp-sections) {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	/* O Shoptimizer usa overflow: hidden aqui (era para limpar floats); com a grade
	   não é mais necessário e ele impediria o cartão da esquerda de ficar fixo. */
	.single-product .product-details-wrapper:not(.mc-pdp-sections) {
		overflow: visible;
	}

	/* Cartão da esquerda acompanha a rolagem enquanto o cliente usa o cartão de compra */
	.mc-pdp-media {
		position: sticky;
		top: calc(var(--sticky-offset) + var(--space-lg));
		align-self: start;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		min-width: 0;
		gap: var(--space-lg);
		padding: var(--space-lg);
		background: var(--color-bg-card);
		border-radius: var(--radius-lg);
	}

	.single-product .mc-pdp-media > .images {
		min-width: 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
	}

	.single-product .mc-pdp-media > .mc-pdp-facts {
		padding: 0;
		background: transparent;
		border-radius: 0;
	}

	.mc-pdp-flag {
		top: calc(var(--space-lg) + var(--space-md));
		left: calc(var(--space-lg) + var(--space-4xl) + var(--space-3xl) + var(--space-sm));
	}
}

/* O texto "Oferta!" do tema é substituído pelo selo */
.single-product .summary > .onsale {
	display: none;
}

body.single-product div.product .summary .product_title {
	margin: 0 0 var(--space-sm);
	font-size: var(--text-product-title);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--color-text-primary);
}

.mc-pdp-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	align-items: center;
	margin: 0 0 var(--space-lg);
	font-size: var(--text-body-sm);
	color: var(--color-text-secondary);
}

.mc-pdp-meta .star-rating {
	margin: 0;
}

/* Preço: valor antigo pequeno acima, valor atual grande */
body.single-product div.product .summary p.price {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	align-items: center;
	margin: 0 0 var(--space-lg);
	font-size: var(--text-h1);
	font-weight: var(--font-weight-extrabold);
	line-height: 1.1;
	color: var(--color-conversion-text);
}

body.single-product .summary .price del {
	order: -1;
	flex-basis: 100%;
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-secondary);
}

body.single-product div.product .summary p.price ins,
body.single-product div.product .summary p.price > .woocommerce-Price-amount,
body.single-product div.product .summary p.price ins .woocommerce-Price-amount {
	text-decoration: none;
	background: transparent;
	font-weight: var(--font-weight-extrabold);
	color: var(--color-conversion-text);
}

/* =============================================================================
   2. FICHA RÁPIDA, CA E ESTOQUE
   ============================================================================= */
.mc-pdp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-md);
	padding: var(--space-lg);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
}

.mc-pdp-facts__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-xs) var(--space-lg);
	margin: 0;
	padding: var(--space-md) var(--space-lg);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	font-size: var(--text-body-sm);
}

.mc-pdp-facts__list dt {
	color: var(--color-text-secondary);
}

.mc-pdp-facts__list dd {
	margin: 0;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.mc-pdp-facts__ca {
	display: grid;
	gap: var(--space-xs);
	padding: var(--space-md) var(--space-lg);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	font-size: var(--text-body-sm);
}

.mc-pdp-facts__ca-title {
	color: var(--color-text-secondary);
}

.mc-pdp-facts__ca-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	align-items: center;
}

.mc-pdp-facts__ca-number {
	display: inline-flex;
	align-items: center;
	min-height: var(--button-height);
	padding: 0 var(--space-md);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg-input);
	font-size: var(--text-body);
	color: var(--color-text-primary);
}

.mc-pdp-facts__ca-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--button-height);
	padding: 0 var(--space-lg);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg-page);
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.mc-pdp-facts__ca-link:hover,
.mc-pdp-facts__ca-link:focus-visible {
	border-color: var(--color-border-focus);
}

.mc-pdp-facts__ca-note {
	color: var(--color-text-secondary);
}

.mc-pdp-facts__stock {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--color-success);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-semibold);
}

.mc-pdp-facts__stock::before {
	content: "● ";
}

.mc-pdp-facts__stock--out {
	color: var(--color-error);
}

/* =============================================================================
   3. PREÇO E SELO DE DESCONTO
   ============================================================================= */
.mc-pdp-off {
	display: inline-block;
	margin-left: var(--space-sm);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-pill);
	background: var(--color-badge-discount);
	color: var(--color-badge-discount-text);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-bold);
	vertical-align: middle;
}

/* =============================================================================
   4. GRADE TAMANHO × QUANTIDADE
   ============================================================================= */
.mc-size-grid {
	display: grid;
	gap: 0;
	margin: var(--space-lg) 0;
}

.mc-size-grid__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-xs) var(--space-md);
	padding: var(--space-md);
	background: var(--color-bg-subtle);
	border: var(--border-width) solid var(--color-border-default);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.mc-size-grid__head a,
.mc-size-grid__head .commercekit-sg-label {
	color: var(--color-text-link);
	font-weight: var(--font-weight-regular);
}

.mc-size-grid__head .commercekit-size-guide {
	margin: 0;
}

.mc-size-grid__head .commercekit-sg-label {
	padding: 0;
	background: transparent;
	border: 0;
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-semibold);
	text-decoration: underline;
	cursor: pointer;
}

.mc-size-grid .mc-size-grid__head .commercekit-sg-label .commercekit-sg-icon {
	display: none;
}

.mc-size-grid__rows {
	border: var(--border-width) solid var(--color-border-default);
	border-top: 0;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	overflow: hidden;
}

.mc-size-grid__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-sm);
	align-items: center;
	padding: var(--space-sm) var(--space-md);
}

.mc-size-grid__row + .mc-size-grid__row {
	border-top: var(--border-width) solid var(--color-border-default);
}

.mc-size-grid__row--out {
	background: var(--color-bg-subtle);
	color: var(--color-text-disabled);
}

.mc-size-grid__label {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-sm);
	align-items: baseline;
	margin: 0;
	cursor: pointer;
}

.mc-size-grid__status {
	font-size: var(--text-body-sm);
	color: var(--color-text-secondary);
}

.mc-size-grid__total,
.mc-size-grid__submit,
.mc-size-grid__msg {
	margin-top: var(--space-md);
}

.mc-qty {
	display: inline-flex;
	align-items: stretch;
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg-input);
}

.mc-qty__btn {
	width: var(--button-height);
	min-height: var(--button-height);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text-primary);
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
}

.mc-qty__btn:disabled {
	color: var(--color-text-disabled);
	cursor: not-allowed;
}

.mc-qty__input {
	width: calc(var(--button-height) + var(--space-sm));
	min-height: var(--button-height);
	padding: 0;
	border: 0;
	border-inline: var(--border-width) solid var(--color-border-default);
	border-radius: 0;
	background: transparent;
	color: var(--color-text-primary);
	font-size: var(--text-body);
	font-weight: var(--font-weight-semibold);
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.mc-qty__input::-webkit-outer-spin-button,
.mc-qty__input::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
}

.mc-qty__btn:focus-visible,
.mc-qty__input:focus-visible,
.mc-size-grid__submit:focus-visible {
	outline: var(--border-width-strong) solid var(--color-border-focus);
	outline-offset: -2px;
}

.mc-size-grid__total {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	font-size: var(--text-body-sm);
	color: var(--color-text-secondary);
}

.mc-size-grid__total strong {
	font-size: var(--text-body);
	color: var(--color-text-primary);
}

.mc-size-grid__submit {
	width: 100%;
	min-height: var(--button-height-lg);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-conversion);
	color: var(--color-on-conversion);
	font-size: var(--text-button);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.mc-size-grid__submit:hover:not(:disabled),
.mc-size-grid__submit:focus-visible {
	background: var(--color-conversion-hover);
}

.mc-size-grid__submit:disabled {
	background: var(--color-border-strong);
	color: var(--color-text-inverse);
	cursor: not-allowed;
}

.mc-size-grid__msg {
	margin: 0;
	padding: var(--space-md);
	border: var(--border-width) solid var(--color-success-border);
	border-radius: var(--radius-sm);
	background: var(--color-success-bg);
	color: var(--color-text-primary);
	font-size: var(--text-body-sm);
}

.mc-size-grid__msg--error {
	border-color: var(--color-error-border);
	background: var(--color-error-bg);
	color: var(--color-error);
}

/* =============================================================================
   5. SEÇÕES DE CONTEÚDO
   Reaproveita a classe .product-details-wrapper para herdar a largura de
   contêiner do Personalizador (max-width + margem automática).
   ============================================================================= */
/* Reusa .product-details-wrapper só pela largura do Personalizador. A camada
   (position/z-index 5) e o overflow herdados cobriam a barra fixa de compra e
   quebravam o menu fixo; aqui são neutralizados. */
body:not(.sticky-atc-open) .product-details-wrapper.mc-pdp-sections,
.single-product .product-details-wrapper.mc-pdp-sections {
	position: static;
	z-index: auto;
	overflow: visible;
	display: grid;
	gap: var(--space-lg);
	margin-top: var(--space-lg);
	padding-bottom: var(--space-2xl);
}

.mc-pdp-subnav {
	position: sticky;
	top: var(--sticky-offset);
	z-index: 3;
	display: flex;
	gap: var(--space-xs);
	padding: 0 var(--space-md);
	overflow-x: auto;
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	box-shadow: 0 var(--border-width) 0 var(--color-border-default);
}

.mc-pdp-subnav a {
	padding: var(--space-lg) var(--space-md);
	border-bottom: var(--border-width-strong) solid transparent;
	color: var(--color-text-primary);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.mc-pdp-subnav a:hover,
.mc-pdp-subnav a:focus-visible,
.mc-pdp-subnav a.is-active,
.mc-pdp-subnav:not(:has(.is-active)) a:first-child {
	border-bottom-color: var(--color-primary);
}

.mc-pdp-section {
	padding: var(--space-lg);
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	scroll-margin-top: calc(var(--sticky-offset) + var(--space-4xl));
}

body.single-product .mc-pdp-section h2 {
	margin: 0 0 var(--space-md);
	font-size: var(--text-section);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--color-text-primary);
}

.mc-pdp-section__body {
	color: var(--color-text-secondary);
	max-width: 70ch;
}

.mc-pdp-section table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-body-sm);
}

.mc-pdp-section table.woocommerce-product-attributes tr th,
.mc-pdp-section table.woocommerce-product-attributes tr td {
	padding: var(--space-md);
	border-top: var(--border-width) solid var(--color-border-default);
	text-align: left;
	vertical-align: middle;
}

.mc-pdp-section table.woocommerce-product-attributes th {
	width: 34%;
	background: var(--color-bg-subtle);
	color: var(--color-text-primary);
	font-weight: var(--font-weight-semibold);
}

.mc-pdp-section table.woocommerce-product-attributes td p {
	margin: 0;
}

.mc-pdp-levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: var(--space-sm);
	margin: var(--space-md) 0 0;
	padding: 0;
	list-style: none;
}

.mc-pdp-levels li {
	display: grid;
	gap: var(--space-xs);
	padding: var(--space-md);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	text-align: center;
	font-size: var(--text-body-sm);
	color: var(--color-text-secondary);
}

.mc-pdp-levels strong {
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	color: var(--color-text-primary);
}

.mc-pdp-features {
	display: grid;
	gap: var(--space-md);
}

.mc-pdp-feature {
	padding: var(--space-lg);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
}

.mc-pdp-feature__num {
	display: grid;
	place-items: center;
	width: var(--button-height);
	height: var(--button-height);
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-weight: var(--font-weight-extrabold);
}

.mc-pdp-feature strong {
	display: block;
	margin-bottom: var(--space-xs);
	color: var(--color-text-primary);
}

.mc-pdp-feature p {
	margin: 0;
	font-size: var(--text-body-sm);
	color: var(--color-text-secondary);
}

.mc-pdp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-pdp-chips li {
	padding: var(--space-sm) var(--space-lg);
	background: var(--color-bg-subtle);
	border: var(--border-width) solid var(--color-border-default);
	border-radius: var(--radius-pill);
	font-size: var(--text-body-sm);
}

@media (min-width: 768px) {
	.mc-pdp-features {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.mc-pdp-section,
	.mc-pdp-facts {
		padding: var(--space-xl);
	}
}

/* Avaliações nativas do WooCommerce dentro do cartão da seção */
.mc-pdp-section #reviews .woocommerce-Reviews-title,
.mc-pdp-section #reviews #reply-title {
	display: block;
	margin: 0 0 var(--space-md);
	font-size: var(--text-section);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	color: var(--color-text-primary);
}

.mc-pdp-section #reviews .woocommerce-noreviews {
	margin: 0 0 var(--space-lg);
	color: var(--color-text-secondary);
}

.mc-pdp-section #reviews label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-semibold);
}

.mc-pdp-section #reviews textarea,
.mc-pdp-section #reviews input[type="text"],
.mc-pdp-section #reviews input[type="email"] {
	width: 100%;
	min-height: var(--input-height);
	padding: var(--space-sm) var(--space-md);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg-input);
	font-size: var(--text-body);
}

.mc-pdp-section #reviews .comment-form-rating,
.mc-pdp-section #reviews .comment-form-comment,
.mc-pdp-section #reviews .comment-form-author,
.mc-pdp-section #reviews .comment-form-email {
	margin: 0 0 var(--space-md);
}

/* FAQ dentro do cartão: respiro igual ao rascunho */
.mc-pdp-section .mc-faq summary {
	padding: var(--space-md) 0;
}

.mc-pdp-section .button.mc-pdp-review-toggle {
	min-height: var(--button-height);
	padding: 0 var(--space-xl);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg-page);
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
}

.mc-pdp-section .button.mc-pdp-review-toggle:hover,
.mc-pdp-section .button.mc-pdp-review-toggle:focus-visible {
	border-color: var(--color-border-focus);
}

/* Título longo (mais de 60 caracteres): H1 menor para caber em 2–3 linhas */
body.single-product.mc-pdp-long-title div.product .summary .product_title {
	font-size: var(--text-section);
	line-height: 1.3;
}