/**
 * LELYS One — página de produto (single-product.html).
 */

.wc-block-breadcrumbs .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--muted, #6b7280);
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 400;
	text-decoration: none;
}

.wc-block-breadcrumbs .woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--ink, #111827);
}

.lelys-product {
	align-items: flex-start;
}

.lelys-product__gallery {
	flex: 1 1 50%;
	min-width: 0;
}

/* A imagem grande vem com aspect-ratio:1/1 do próprio bloco do WooCommerce,
   mas sem isso o <img> só assume o tamanho intrínseco do arquivo, sobrando
   espaço em branco ao redor dentro do quadrado. */
.lelys-product__gallery .wc-block-woocommerce-product-gallery-large-image__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * Miniaturas em coluna vertical à esquerda, imagem grande ocupando o resto —
 * o layout responsivo nativo do woocommerce/product-gallery alterna sozinho
 * entre "miniaturas embaixo" e "miniaturas do lado" com base numa classe
 * (is-vertical) que parece depender de JS/viewport, não é controlável de
 * forma confiável só com atributos do bloco. Reescrevemos o layout inteiro
 * aqui; !important só nas propriedades que o CSS nativo do Woo tenta
 * recalcular via media query (aspect-ratio/flex-basis das miniaturas).
 */
.lelys-product__gallery .wp-block-woocommerce-product-gallery {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0.75rem;
}

.lelys-product__gallery .wc-block-product-gallery-large-image {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
}

.lelys-product__gallery .wc-block-product-gallery-thumbnails {
	order: 1;
	flex: 0 0 5rem !important;
	width: 5rem !important;
	aspect-ratio: auto !important;
}

.lelys-product__gallery .wc-block-product-gallery-thumbnails__scrollable {
	flex-direction: column !important;
	height: 100%;
	gap: 0.5rem;
}

.lelys-product__gallery .wc-block-product-gallery-thumbnails__thumbnail {
	width: 100%;
	flex-shrink: 0;
}

.lelys-product__gallery .wc-block-product-gallery-thumbnails__thumbnail__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

.lelys-product__info {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.5rem);
}

.lelys-product__category {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #6b7280);
}

.lelys-product__title {
	margin: 0 0 0.25rem;
}

/* H1 padrão do tema é 3rem (xx-large); 30% menor só no desktop. */
@media (min-width: 783px) {
	.lelys-product__title {
		font-size: 2.1rem;
	}
}

.lelys-product__meta-row {
	align-items: center;
	gap: 1rem !important;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted, #6b7280);
}

/* SKU vem com classes clássicas do WooCommerce (product_meta) — zera a
   margem que essas classes trazem, pra ficar inline igual ao resto da linha. */
.lelys-product__meta-row .lelys-product__sku {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.lelys-product__meta-row .lelys-product__sku .sku {
	font-weight: 500;
	color: var(--wp--preset--color--ink, #111827);
}

.lelys-product__meta-row .lelys-product__tags a {
	color: inherit;
}

.lelys-product__price {
	font-size: var(--wp--preset--font-size--x-large, 2rem);
	font-weight: 700;
}

.lelys-product__stock {
	margin-top: -0.5rem;
}

.lelys-product__summary {
	color: var(--wp--preset--color--ink, #111827);
	line-height: 1.6;
}

/* .wp-block-woocommerce-add-to-cart-form form.cart (2 classes) do próprio
   WooCommerce vence a nossa por especificidade e transforma o form em CSS
   Grid (grid-template-columns: min-content auto auto) — repetimos as duas
   classes do elemento (que já coexistem no mesmo div) pra garantir que esta
   regra prevaleça e volte a ser flex de verdade. */
.wp-block-woocommerce-add-to-cart-form.lelys-product__add-to-cart form.cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Sem isso o botão nativo fica do tamanho do texto — precisa esticar ao
   lado da quantidade pra ocupar a mesma largura do "Comprar agora" abaixo. */
.lelys-product__add-to-cart .single_add_to_cart_button {
	flex: 1 1 auto;
	text-align: center;
	border-radius: 999px;
}

/* Quantidade — modo "stepper" nativo do bloco (- / número / +), com JS de
   incremento já embutido pelo WooCommerce. Só restilizamos a aparência:
   pill igual aos botões ao lado, sem a caixa cinza padrão do core. */
.lelys-product__add-to-cart .quantity {
	height: auto;
	min-height: 3rem;
	width: 8rem;
	border: 1px solid var(--wp--preset--color--line, #e5e7eb);
	border-radius: 999px;
	background: transparent;
	overflow: hidden;
}

.lelys-product__add-to-cart .qty {
	border: none;
	background: transparent;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 600;
	text-align: center;
}

.lelys-product__add-to-cart .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 1.125rem;
	opacity: 1;
	transition: color 0.2s ease;
}

.lelys-product__add-to-cart .wc-block-components-quantity-selector__button:hover {
	color: var(--wp--preset--color--accent, #d5671b);
}

.lellisone-buy-now {
	background-color: transparent;
	color: var(--wp--preset--color--ink, #111827);
	border: 1px solid var(--wp--preset--color--ink, #111827);
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 500;
	cursor: pointer;
	/* flex-basis:100% força a quebra de linha dentro do .cart (flex-wrap:wrap)
	   — sem isso ele só ficaria maior, mas na mesma linha da quantidade. */
	flex: 1 0 100%;
	text-align: center;
}

.lellisone-buy-now:hover {
	background-color: var(--wp--preset--color--ink, #111827);
	color: var(--wp--preset--color--base, #ffffff);
}

.lelys-product-actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

/* O botão de favoritar aqui não é mais um ícone flutuante sobre imagem — some
   o position:absolute herdado do contexto de card e volta ao fluxo normal. */
.lelys-product-actions .lelys-product-card__wishlist {
	position: static;
	width: auto;
	height: auto;
	background: none;
	gap: 0.4rem;
}

.lelys-product-actions__share-row {
	display: flex;
	gap: 0.75rem;
}

.lelys-product-actions__share {
	font-size: 0.8125rem;
	text-transform: capitalize;
	color: var(--wp--preset--color--muted, #6b7280);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.lelys-product-actions__share:hover {
	color: var(--wp--preset--color--accent, #d5671b);
	border-bottom-color: currentColor;
}

/**
 * Abas (Descrição/Avaliações) — o bloco woocommerce/product-details renderiza
 * a marcação clássica do WooCommerce (ul.tabs), que nunca foi estilizada
 * pelo tema — ficava com o visual "aba de pasta" padrão da plugin
 * (woocommerce.css). Repete o mesmo prefixo de seletor do core pra vencer
 * a especificidade sem precisar de !important.
 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 2rem;
	padding: 0;
	margin: 0 0 2rem;
	overflow: visible;
	border-bottom: 1px solid var(--wp--preset--color--line, #e5e7eb);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 0 -1px;
	padding: 0 0 0.85rem;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0;
	font-weight: 500;
	color: var(--wp--preset--color--muted, #6b7280);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: none;
	border-bottom-color: var(--wp--preset--color--accent, #d5671b);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--ink, #111827);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	color: var(--wp--preset--color--ink, #111827);
	line-height: 1.6;
}

/* O template clássico repete o título da aba como <h2> dentro do painel —
   redundante já que o título já aparece na própria aba. */
.woocommerce-Tabs-panel--description > h2 {
	display: none;
}

@media (max-width: 782px) {
	.lelys-product {
		flex-wrap: wrap;
	}

	.lelys-product__gallery,
	.lelys-product__info {
		flex-basis: 100%;
	}

	/* No mobile as miniaturas voltam a ficar embaixo da imagem, na
	   horizontal — a coluna vertical do desktop fica apertada demais numa
	   tela estreita. */
	.lelys-product__gallery .wp-block-woocommerce-product-gallery {
		flex-direction: column;
	}

	.lelys-product__gallery .wc-block-product-gallery-large-image {
		order: 1;
	}

	.lelys-product__gallery .wc-block-product-gallery-thumbnails {
		order: 2;
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	.lelys-product__gallery .wc-block-product-gallery-thumbnails__scrollable {
		flex-direction: row !important;
		height: auto;
		overflow-x: auto;
	}

	.lelys-product__gallery .wc-block-product-gallery-thumbnails__thumbnail {
		width: 4rem;
		flex-shrink: 0;
	}
}