/*!
 * CzarCommerce Woo — Single product (FASE 12.4)
 * -----------------------------------------------------------------------------
 * Camada CSS opt-in para a página de produto único.
 *
 *   .czar-product                 wrapper da página
 *   .czar-product__gallery        coluna da galeria (esquerda em desktop)
 *   .czar-product__main           coluna do conteúdo (direita)
 *   .czar-product__title          h1
 *   .czar-product__price          preço grande
 *   .czar-product__short-desc     descrição curta
 *   .czar-product__meta           SKU + categorias + tags
 *   .czar-product__qty            seletor de quantidade
 *   .czar-product-tabs            tabs (descrição / detalhes / avaliações)
 *   .czar-product-tabs__list      barra das abas
 *   .czar-product-tabs__panel     painel ativo
 */

.czar-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--czar-space-12);
	padding: var(--czar-space-8) 0;
}

.czar-product__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--czar-space-3);
}

.czar-product__gallery-main {
	aspect-ratio: 1 / 1;
	background-color: color-mix(in srgb, var(--czar-color-text) 6%, transparent);
	border-radius: var(--czar-card-radius, var(--czar-radius-lg));
	overflow: hidden;
}

.czar-product__gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.czar-product__gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--czar-space-2);
}

.czar-product__gallery-thumb {
	aspect-ratio: 1 / 1;
	border-radius: var(--czar-radius-md);
	overflow: hidden;
	border: 1.5px solid transparent;
	background-color: color-mix(in srgb, var(--czar-color-text) 6%, transparent);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.czar-product__gallery-thumb:hover,
.czar-product__gallery-thumb--active {
	border-color: var(--czar-color-primary);
}

.czar-product__main {
	display: flex;
	flex-direction: column;
	gap: var(--czar-space-4);
}

.czar-product__title {
	font-family: var(--czar-font-family-heading);
	font-size: var(--czar-font-size-4xl);
	font-weight: var(--czar-font-weight-bold);
	line-height: var(--czar-line-height-tight);
	color: var(--czar-color-text);
	margin: 0;
}

.czar-product__price {
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-3xl);
	font-weight: var(--czar-font-weight-bold);
	color: var(--czar-color-price);
	margin: 0;
}

.czar-product__price del {
	color: color-mix(in srgb, var(--czar-color-text) 50%, transparent);
	text-decoration: line-through;
	font-weight: var(--czar-font-weight-regular);
	font-size: var(--czar-font-size-lg);
	margin-right: var(--czar-space-3);
}

.czar-product__price ins {
	background: none;
	text-decoration: none;
	color: var(--czar-color-sale, #d33);
}

.czar-product__short-desc {
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-md);
	line-height: var(--czar-line-height-relaxed);
	color: color-mix(in srgb, var(--czar-color-text) 85%, transparent);
}

.czar-product__qty {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid color-mix(in srgb, var(--czar-color-text) 18%, transparent);
	border-radius: var(--czar-input-radius, var(--czar-radius-md));
	overflow: hidden;
	max-width: 160px;
}

.czar-product__qty button {
	background: none;
	border: 0;
	padding: var(--czar-space-2) var(--czar-space-4);
	font-size: var(--czar-font-size-lg);
	cursor: pointer;
	color: var(--czar-color-text);
}

.czar-product__qty button:hover {
	background-color: color-mix(in srgb, var(--czar-color-primary) 8%, transparent);
}

.czar-product__qty input[type="number"] {
	width: 3em;
	border: 0;
	text-align: center;
	font-size: var(--czar-font-size-md);
	-moz-appearance: textfield;
}

.czar-product__qty input[type="number"]::-webkit-outer-spin-button,
.czar-product__qty input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.czar-product__meta {
	display: flex;
	flex-direction: column;
	gap: var(--czar-space-1);
	padding-top: var(--czar-space-5);
	border-top: 1px solid color-mix(in srgb, var(--czar-color-text) 10%, transparent);
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-sm);
	color: color-mix(in srgb, var(--czar-color-text) 70%, transparent);
}

.czar-product__meta strong {
	color: var(--czar-color-text);
	font-weight: var(--czar-font-weight-semibold);
}

/* ---- Tabs ---- */

.czar-product-tabs {
	margin-top: var(--czar-space-12);
}

.czar-product-tabs__list {
	display: flex;
	gap: var(--czar-space-6);
	flex-wrap: wrap;
	border-bottom: 1px solid color-mix(in srgb, var(--czar-color-text) 10%, transparent);
	margin-bottom: var(--czar-space-6);
	padding: 0;
	list-style: none;
}

.czar-product-tabs__tab {
	background: none;
	border: 0;
	padding: var(--czar-space-3) 0;
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-md);
	font-weight: var(--czar-font-weight-medium);
	color: color-mix(in srgb, var(--czar-color-text) 65%, transparent);
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.czar-product-tabs__tab:hover {
	color: var(--czar-color-text);
}

.czar-product-tabs__tab[aria-selected="true"] {
	color: var(--czar-color-primary);
	border-bottom-color: var(--czar-color-primary);
}

.czar-product-tabs__tab:focus-visible {
	outline: 2px solid var(--czar-color-accent);
	outline-offset: 4px;
}

.czar-product-tabs__panel {
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-md);
	line-height: var(--czar-line-height-relaxed);
}

.czar-product-tabs__panel[hidden] {
	display: none;
}

@media (max-width: 960px) {
	.czar-product {
		grid-template-columns: 1fr;
		gap: var(--czar-space-8);
	}
	.czar-product__title {
		font-size: var(--czar-font-size-3xl);
	}
	.czar-product__price {
		font-size: var(--czar-font-size-2xl);
	}
}