/**
 * Briluz Product Page — Estilos do PDP (Single Product).
 *
 * Carregado apenas em is_product() via wp_enqueue_style condicional.
 * Reduz CSS em ~800 linhas para todas as outras páginas (homepage, cart,
 * checkout, blog, etc.).
 *
 * Origem: extraído de briluz-custom.css em 2026-05-09.
 *
 * @package briluz-shoptimizer
 * @since   1.5.0
 */

/* S4a: PRODUCT PAGE (Core) — Pagina de Produto -- Layout 2 colunas, galeria, preco, botao, abas, trust badges, relacionados */

/* Espaçamento entre topo da página (nav/secondary menu) e início da galeria */
.single-product div.product {
	margin-top: 32px;
}

@media (max-width: 767px) {
	.single-product div.product {
		margin-top: 16px;
	}
}

/* Product Page — Layout 2 Colunas (FR-4.1 / AC-1) -- Desktop: galeria 60% | info 40% */

/**
 * Shoptimizer uses .summary-column-1 (gallery) and .summary-column-2 (info).
 * Split 50/50 no desktop (49% cada para acomodar gap de 2% do flex parent). Imagem de Produto
 */
@media (min-width: 1025px) {

	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary-column-1 {
		width: 54%;
		float: left;
	}

	.single-product div.product .summary.entry-summary,
	.single-product div.product .summary-column-2 {
		width: 44%;
		float: right;
	}
}

/* Tablet: reduced 2 columns */
@media (min-width: 768px) and (max-width: 1024px) {

	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary-column-1 {
		width: 55%;
		float: left;
	}

	.single-product div.product .summary.entry-summary,
	.single-product div.product .summary-column-2 {
		width: 42%;
		float: right;
	}
}

/* Mobile: single column stacked */
@media (max-width: 767px) {

	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary-column-1 {
		width: 100%;
		float: none;
	}

	.single-product div.product .summary.entry-summary,
	.single-product div.product .summary-column-2 {
		width: 100%;
		float: none;
	}
}

/* Clearfix after floated columns */
.single-product div.product::after {
	content: '';
	display: table;
	clear: both;
}

/* Product Page — Gallery (FR-4.2 / AC-2) -- Zoom on hover (desktop), explicit dimensions, LCP image without lazy */

/**
 * Gallery images with explicit aspect ratio to prevent CLS (NFR-1.4).
 * The main image is the LCP candidate — loaded eagerly (handled via PHP filter).
 */
.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Desktop: thumbnails na lateral esquerda da imagem principal */
@media (min-width: 768px) {
	.single-product .woocommerce-product-gallery {
		display: flex !important;
		flex-direction: row !important;
		gap: 12px;
	}

	/* Imagem principal ocupa o restante */
	.single-product .woocommerce-product-gallery .flex-viewport {
		flex: 1 1 0%;
		min-width: 0;
	}

	/* Thumbnails: coluna vertical à esquerda */
	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 0;
		padding: 0;
		list-style: none;
		flex: 0 0 80px;
		order: -1;
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 auto;
		width: 80px;
		cursor: pointer;
	}
}

/* Thumbnails styling (todos os tamanhos) */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100%;
	height: auto;
	border: 2px solid transparent;
	border-radius: 4px;
	transition: border-color 0.2s ease;
	display: block;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	border-color: var(--color-primary);
}

/* Touch target for thumbnails on mobile (NFR-3.8) */
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	min-height: 44px;
}

/* Mobile gallery: full-width carousel behavior (FR-4.11) */
@media (max-width: 767px) {
	.single-product .woocommerce-product-gallery {
		width: 100%;
		margin-bottom: 16px;
	}

	/* Gallery carousel indicators — dots */
	.single-product .woocommerce-product-gallery .flex-control-nav {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 12px;
		padding: 0;
		list-style: none;
	}

	.single-product .woocommerce-product-gallery .flex-control-nav li {
		width: auto;
	}

	.single-product .woocommerce-product-gallery .flex-control-nav li a {
		display: block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: var(--color-border);
		text-indent: -9999px;
		overflow: hidden;
		transition: background-color 0.2s ease;
	}

	.single-product .woocommerce-product-gallery .flex-control-nav li a.flex-active {
		background-color: var(--color-primary);
	}
}

/* Product Page — Breadcrumbs (FR-4.3 / AC-3) */

.single-product .woocommerce-breadcrumb {
	font-size: var(--font-size-body);
	color: var(--color-text-muted);
	margin-bottom: 12px;
	padding: 8px 0;
}

.single-product .woocommerce-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.single-product .woocommerce-breadcrumb a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.single-product .woocommerce-breadcrumb a:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Responsive: collapse gracefully on small screens */
@media (max-width: 480px) {
	.single-product .woocommerce-breadcrumb {
		font-size: 12px;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Product Page — H1 Product Title (FR-4.4 / AC-4) -- Override: 28px bold (page-specific, NOT changing global --font-size-h1) */

.single-product .product_title,
.woocommerce div.product .product_title {
	font-size: 28px;
	font-weight: var(--font-weight-bold);
	font-family: var(--font-family-base);
	line-height: var(--line-height-h1);
	color: var(--color-text);
	margin-bottom: 12px;
}

/* --- H1 reposicionado para o topo da coluna da galeria (cliente, 2026-06-08) ---
 * Renderizado via hook woocommerce_before_single_product_summary (p6), como
 * primeiro filho de .product-details-wrapper.
 * O POSICIONAMENTO (grid: titulo acima da galeria, summary a' direita) fica em
 * briluz-nuclear.css — porque o wrapper e' display:grid !important la, e o
 * nuclear (injetado por ultimo) vence a cascata; float/width aqui seriam
 * ignorados em itens de grid/flex.
 * Aqui apenas REEXIBIMOS o titulo: a regra global `.entry-title{display:none}`
 * de briluz-customizer-migrated.css escondia todos os entry-title. */
.single-product .product-details-wrapper .briluz-pdp-title,
.single-product .product_title.briluz-pdp-title {
	display: block !important;
	margin: 0 0 16px;
}

/* Product Page — Price & Discount Badge (FR-4.5, FR-4.6 / AC-5) */

/* Current price: 24px bold */
.single-product div.product p.price,
.single-product div.product span.price {
	font-size: var(--font-size-price);
	font-weight: var(--font-weight-bold);
	color: var(--color-text);
	line-height: 1.3;
	margin-bottom: 16px;
}

/* Sale price (current) inside ins tag */
.single-product div.product p.price ins,
.single-product div.product span.price ins {
	text-decoration: none;
	font-weight: var(--font-weight-bold);
}

/* Old price (strikethrough) — WCAG AA: var(--color-text-muted) on var(--color-bg) = 4.54:1 */
.single-product div.product p.price del,
.single-product div.product span.price del {
	color: var(--color-text-muted);
	text-decoration: line-through;
	font-weight: var(--font-weight-normal);
	font-size: 18px;
	margin-right: 8px;
}

/* Discount badge — WooCommerce sale flash */
.single-product div.product .onsale,
.single-product span.onsale {
	background-color: var(--color-highlight);
	color: var(--color-primary);
	font-size: var(--font-size-badge);
	font-weight: var(--font-weight-bold);
	padding: 4px 12px;
	border-radius: 4px;
	line-height: 1.4;
	min-width: auto;
	min-height: auto;
}

/* Product Page — Buy Button (FR-4.7 / AC-6) -- Pill-shaped, full-width, design system colors, hover, focus */

/* Buy button — layout quantity + botao lado a lado.
 * Regras .commercekit-sticky-atc-intersector + .quantity + .single_add_to_cart_button
 * migradas para briluz-nuclear.css (precisa vencer Kirki/CommerceKit inline).
 *
 * Mantido apenas: fallback para form.cart sem CommerceKit (selector :has).
 */
.single-product div.product form.cart:not(:has(.commercekit-pdp-sticky-inner)) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.single-product div.product form.cart:not(:has(.commercekit-pdp-sticky-inner)) .quantity {
	flex: 0 0 auto;
}

.single-product div.product form.cart:not(:has(.commercekit-pdp-sticky-inner)) .single_add_to_cart_button {
	flex: 1 1 0% !important;
	text-align: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px;
}

/* Product Page — Mobile Sticky Buy Button (CommerceKit nativo) */

@media (max-width: 767px) {

	/* CommerceKit sticky ATC: fundo transparente + botao laranja */
	.commercekit-sticky-add-to-cart {
		background: transparent !important;
		box-shadow: none !important;
	}

	.commercekit-sticky-add-to-cart .sticky-atc_button,
	.commercekit-sticky-add-to-cart a.sticky-atc_button.button {
		background-color: var(--color-accent) !important;
		color: var(--color-btn-text) !important;
		border: none !important;
	}

	.commercekit-sticky-add-to-cart .sticky-atc_button:hover,
	.commercekit-sticky-add-to-cart a.sticky-atc_button.button:hover {
		background-color: var(--color-accent-a11y) !important;
		color: var(--color-btn-text) !important;
	}
}

/* Product Page — Tabs (FR-4.8 / AC-7) -- Desktop: tabs. Mobile: accordion. */

/* Tab container — garantir dentro do container, não full-width */
.single-product div.product .woocommerce-tabs {
	margin-top: 40px;
	clear: both;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

/* Tab navigation list */
.single-product div.product .woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	border-bottom: 2px solid var(--color-border);
}

.single-product div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	padding: 12px 20px;
	color: var(--color-text-muted);
	font-weight: var(--font-weight-semi);
	font-size: var(--font-size-body);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.2s ease, border-color 0.2s ease;
	min-height: 44px;
}

.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--color-text);
}

.single-product div.product .woocommerce-tabs ul.tabs li a:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

.single-product div.product .woocommerce-tabs ul.tabs li a:focus:not(:focus-visible) {
	outline: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

/* Active tab -- !important to override Shoptimizer Customizer accent color */
.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-text) !important;
	border-bottom-color: var(--color-primary) !important;
	font-weight: var(--font-weight-bold);
}

/* Tab content panels */
.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 24px 0;
	line-height: var(--line-height-body);
}

/* Description tab: "Ver detalhes" toggle styling (collapse/expand via JS inline) */
.briluz-description-toggle {
	display: block;
	text-align: center;
	padding: 12px 0;
	color: var(--color-accent, var(--color-accent));
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.briluz-description-toggle:hover {
	opacity: 0.8;
	text-decoration: none;
	color: var(--color-accent, var(--color-accent));
}

/* Product description tables — styled for readability */
.woocommerce-Tabs-panel table,
.single-product .entry-content table,
.product-description table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 24px;
	font-size: 14px;
	border: 1px solid var(--color-border-light);
	border-radius: 6px;
	overflow: hidden;
}

.woocommerce-Tabs-panel table thead th,
.single-product .entry-content table thead th,
.product-description table thead th {
	background-color: #333;
	color: var(--color-bg);
	font-weight: 600;
	text-align: left;
	padding: 12px 16px;
	border-bottom: 2px solid #222;
}

.woocommerce-Tabs-panel table tbody td,
.single-product .entry-content table tbody td,
.product-description table tbody td {
	padding: 10px 16px;
	border-bottom: 1px solid #eee;
	color: #333;
}

.woocommerce-Tabs-panel table tbody tr:nth-child(even),
.single-product .entry-content table tbody tr:nth-child(even),
.product-description table tbody tr:nth-child(even) {
	background-color: #f9f9f9;
}

.woocommerce-Tabs-panel table tbody tr:hover,
.single-product .entry-content table tbody tr:hover,
.product-description table tbody tr:hover {
	background-color: #fff3cd;
}

.woocommerce-Tabs-panel table tbody td:first-child,
.single-product .entry-content table tbody td:first-child,
.product-description table tbody td:first-child {
	font-weight: 600;
	color: #222;
	background-color: rgba(0, 0, 0, 0.02);
	white-space: nowrap;
}

@media (max-width: 767px) {

	.woocommerce-Tabs-panel table,
	.single-product .entry-content table,
	.product-description table {
		font-size: 13px;
		display: block;
		overflow-x: auto;
	}

	.woocommerce-Tabs-panel table tbody td,
	.single-product .entry-content table tbody td {
		padding: 8px 12px;
	}
}

/* Mobile: tabs become accordion (FR-4.13) */
@media (max-width: 767px) {
	.single-product div.product .woocommerce-tabs ul.tabs {
		display: none;
	}

	.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel {
		padding: 0;
	}
}

/* Product Page — Trust Badges (FR-4.10 / AC-8) -- Below the buy button */

.briluz-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}

.briluz-trust-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-muted);
	line-height: 1.4;
}

.briluz-trust-badge svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--color-text);
}

/* Mobile: stack badges vertically */
@media (max-width: 480px) {
	.briluz-trust-badges {
		flex-direction: column;
		gap: 12px;
	}
}

/* Product Page — "Peça Junto" / Cross-Sells Carousel Button */

.pdp-complementary--add-to-cart a {
	background: var(--color-primary) !important;
	color: var(--color-bg) !important;
	border: 1px solid var(--color-primary) !important;
	border-radius: 50px !important;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 16px;
	letter-spacing: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pdp-complementary--add-to-cart a:hover {
	background: #515151 !important;
	color: var(--color-bg) !important;
	border-color: #515151 !important;
}

.pdp-complementary--add-to-cart a.added {
	background: var(--color-success) !important;
	border-color: var(--color-success) !important;
	color: var(--color-bg) !important;
}

.pdp-complementary--add-to-cart .added_to_cart {
	background: transparent !important;
	color: var(--color-primary) !important;
	border: 1px solid var(--color-primary) !important;
	border-radius: 50px !important;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 16px;
}

.pdp-complementary--add-to-cart .added_to_cart:hover {
	background: var(--color-primary) !important;
	color: var(--color-bg) !important;
}

/* Product Page — Related Products (FR-4.9, FR-4.14 / AC-9) */

/* Section heading */
.single-product section.related>h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-bold);
	margin-bottom: 24px;
}

/* Desktop: 4-column grid */
.single-product section.related ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Product cards in related section */
.single-product section.related ul.products li.product {
	float: none !important;
	width: auto !important;
	display: flex !important;
	flex-direction: column !important;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 12px;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	background: var(--color-bg);
}

.single-product section.related ul.products li.product:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

/* Related product images */
.single-product section.related ul.products li.product img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
	margin-bottom: 8px;
}

/* Related product title */
.single-product section.related ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-semi);
	color: var(--color-text);
	margin-bottom: 4px;
}

/* Related product price */
.single-product section.related ul.products li.product .price {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	color: var(--color-text);
	margin-bottom: 8px;
}

/* Related product button — override Shoptimizer absolute positioning */
.single-product section.related ul.products li.product .button,
.single-product section.related ul.products li.product .added_to_cart {
	position: relative !important;
	width: 100%;
	height: auto;
	line-height: normal;
	opacity: 1;
	margin-top: 8px;
	padding: 8px 16px;
	border-radius: var(--btn-radius) !important;
	font-size: 13px;
}

/* Tablet: 3 columns */
@media (min-width: 768px) and (max-width: 1024px) {
	.single-product section.related ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

/* Mobile: horizontal carousel showing 2 products (FR-4.14) */
@media (max-width: 767px) {
	.single-product section.related ul.products {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		padding-bottom: 8px;
		scrollbar-width: none;
	}

	.single-product section.related ul.products::-webkit-scrollbar {
		display: none;
	}

	.single-product section.related ul.products li.product {
		flex: 0 0 calc(50% - 6px);
		scroll-snap-align: start;
		min-width: calc(50% - 6px);
	}
}