/**
 * Huazotl 1.0.0
 * Presentation only.
 *
 * Wapuos owns Product Cards, Single structure, gallery behavior,
 * typography and Dark Mode. Huazotl changes geometry/presentation only.
 */

:root {
	--huazotl-pill: 999px;
	--wtds-button-radius: var(--huazotl-pill);
}

/* ========================================================================== 
   Buttons — Huazotl language
   ========================================================================== */

.wapu-btn:not(.wapu-btn--icon),
.woocommerce :is(a.button, button.button, input.button),
.single-product :is(.single_add_to_cart_button, .wapu-single__add-btn, .wapu-single__inline-cta-btn) {
	border-radius: var(--huazotl-pill) !important;
}

/* ========================================================================== 
   Single Product gallery — Base engine, editorial Huazotl composition
   --------------------------------------------------------------------------
   One large media frame at left + vertical thumbnails at its right edge.
   No alternate gallery engine or child markup; variation/media sync stays Base-owned.
   ========================================================================== */

@media (min-width: 62rem) {
	body.single-product .wapu-single--regular-product .wapu-single__content {
		grid-template-columns: minmax(0, 1.55fr) minmax(22rem, .8fr);
		gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}

	body.single-product .wapu-single--regular-product .wapu-single__gallery {
		--huazotl-thumb-rail: clamp(4.75rem, 5.5vw, 5.5rem);
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		align-self: start;
		position: sticky;
		top: calc(var(--wtds-header-full-h, 4.5rem) + var(--wp-admin--admin-bar--height, 0px) + 12px);
	}

	body.single-product .wapu-single__gallery > .wapu-vg,
	body.single-product .wapu-single__gallery .wapu-vg--horizontal {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	body.single-product .wapu-single__gallery .wapu-vg--horizontal .wapu-vg__stage,
	body.single-product .wapu-single__gallery .wapu-vg--stacked .wapu-vg__stage {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) var(--huazotl-thumb-rail) !important;
		grid-template-rows: minmax(0, 1fr) !important;
		gap: clamp(.75rem, 1.35vw, 1.25rem) !important;
		align-items: stretch !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__main {
		grid-column: 1 !important;
		grid-row: 1 !important;
		position: relative !important;
		width: 100% !important;
		min-width: 0 !important;
		aspect-ratio: 1 / 1 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: var(--wtds-surface-container-lowest, var(--wtds-surface)) !important;
		overflow: hidden !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img) {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: clamp(1rem, 2vw, 2rem) !important;
		object-fit: contain !important;
		object-position: center !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__video, .wapu-vg__embed) {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		border: 0 !important;
		border-radius: 0 !important;
		object-fit: cover !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumbs,
	body.single-product .wapu-single__gallery .wapu-vg__thumbs--horizontal {
		grid-column: 2 !important;
		grid-row: 1 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: .625rem !important;
		width: 100% !important;
		max-width: var(--huazotl-thumb-rail) !important;
		max-height: min(42rem, calc(100vh - var(--wtds-header-full-h, 4.5rem) - 4rem)) !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		scrollbar-width: none;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumbs::-webkit-scrollbar { display: none; }
	body.single-product .wapu-single__gallery .wapu-vg__thumbs[hidden] { display: none !important; }

	body.single-product .wapu-single__gallery .wapu-vg__thumb {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid transparent !important;
		border-radius: .25rem !important;
		background: var(--wtds-surface-container-lowest, var(--wtds-surface)) !important;
		box-shadow: none !important;
		overflow: hidden !important;
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb.is-active {
		border-color: var(--wtds-primary, var(--wtds-ink)) !important;
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--wtds-primary, var(--wtds-ink)) 22%, transparent) !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb:not(.is-active) {
		opacity: .82 !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb:not(.is-active):hover,
	body.single-product .wapu-single__gallery .wapu-vg__thumb:not(.is-active):focus-visible {
		opacity: 1 !important;
		border-color: var(--wtds-outline) !important;
	}

	body.single-product .wapu-single__gallery .wapu-vg__thumb :is(img, video) {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: center !important;
		filter: none !important;
	}

	/* Product information stays Base-owned; just align it with the gallery top. */
	body.single-product .wapu-single--regular-product :is(.wapu-single__info, #wapu-info) {
		align-self: start !important;
		padding-top: 0 !important;
	}
}

/* Mobile keeps Base's swipe/gallery behavior instead of forcing a desktop rail. */
@media (max-width: 61.9375rem) {
	body.single-product .wapu-single--regular-product .wapu-single__gallery {
		margin-top: 0 !important;
		align-self: flex-start !important;
	}
}

/* Circular share action — visual only; Base owns the share popover behavior. */
body.single-product .wapu-single__title-row > .wapu-single__share-wrap .wapu-single__share,
body.single-product .wapu-single__share-wrap > .wapu-single__share {
	width: 2.75rem !important;
	height: 2.75rem !important;
	min-width: 2.75rem !important;
	min-height: 2.75rem !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--wtds-outline) !important;
	background: transparent !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
}

body.single-product .wapu-single__share-wrap > .wapu-single__share:hover,
body.single-product .wapu-single__share-wrap > .wapu-single__share:focus-visible {
	background: var(--wtds-state-hover-bg) !important;
	border-color: var(--wtds-ink-2) !important;
}

body.single-product .wapu-single__share-wrap > .wapu-single__share svg {
	width: 1.125rem !important;
	height: 1.125rem !important;
}

/* ========================================================================== 
   Related products — below the Base main product pair
   ========================================================================== */

body.single-product .wapu-single--regular-product > .wapu-product-recommendations.huazotl-related-below-product {
	display: flex !important;
	flex-direction: column;
	gap: 16px !important;
	box-sizing: border-box;
	width: 100% !important;
	max-width: 90rem;
	margin: 0 auto !important;
	padding: clamp(2.5rem, 5vw, 4.5rem) var(--single-gutter) 0;
}

body.single-product .wapu-single--regular-product > .wapu-product-recommendations.huazotl-related-below-product .wapu-single__related-carousel {
	width: 100%;
	min-width: 0;
}

@media (max-width: 47.9375rem) {
	body.single-product .wapu-single--regular-product > .wapu-product-recommendations.huazotl-related-below-product {
		padding: 2rem 1.5rem 0;
	}
}

/* Four Related products on desktop. */
@media (min-width: 62rem) {
	body.single-product .wapu-product-recommendations .wapu-single__related-carousel-track {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
		width: 100%;
	}

	body.single-product .wapu-product-recommendations .wapu-single__related-carousel-item {
		width: auto !important;
		min-width: 0;
		flex: none !important;
	}

	body.single-product .wapu-product-recommendations .wapu-single__related-carousel-scrollbar {
		display: none !important;
	}
}

@media (max-width: 61.9375rem) {
	body.single-product .wapu-product-recommendations .wapu-single__related-carousel-track {
		display: flex !important;
		grid-template-columns: none;
		width: max-content;
	}
}

/* Product tags live immediately above the Base product title. */
body.single-product .huazotl-product-tags-before-title {
	margin: 0 0 .5rem;
}

@media (prefers-reduced-motion: reduce) {
	body.single-product .wapu-vg__thumb,
	body.single-product .wapu-single__variant-item {
		transition: none !important;
	}
}


/* ========================================================================== 
   1.4.9 · Variable PDP mobile — full media + compact real thumbnails
   ========================================================================== */
@media (max-width: 61.9375rem) {
	/* Variable products use the whole viewport width for the hero media. */
	body.single-product.huazotl-variable-product .wapu-single--regular-product .wapu-single__gallery {
		width: 100vw !important;
		max-width: none !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding: 0 !important;
	}

	body.single-product.huazotl-variable-product .wapu-single__gallery > .wapu-vg,
	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg--horizontal,
	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__stage {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__stage {
		display: block !important;
	}

	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__main {
		position: relative !important;
		width: 100% !important;
		max-width: none !important;
		aspect-ratio: 1 / 1 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		overflow: hidden !important;
	}

	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__main > :is(.wapu-vg__img, img) {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	/* Replace Base's mobile progress-line treatment with tiny real thumbnails. */
	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__thumbs:not([hidden]),
	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__thumbs--horizontal:not([hidden]) {
		position: relative !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: .375rem !important;
		width: fit-content !important;
		max-width: calc(100vw - 1.5rem) !important;
		height: auto !important;
		margin: .5rem auto 0 !important;
		padding: 0 .125rem .125rem !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: none !important;
		scroll-snap-type: x proximity;
	}

	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__thumbs::-webkit-scrollbar {
		display: none !important;
	}

	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__thumbs::before,
	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__thumbs::after {
		display: none !important;
		content: none !important;
	}

	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__thumb {
		position: relative !important;
		display: block !important;
		width: 2.4rem !important;
		height: 2.4rem !important;
		min-width: 2.4rem !important;
		min-height: 2.4rem !important;
		flex: 0 0 2.4rem !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid transparent !important;
		border-radius: .25rem !important;
		overflow: hidden !important;
		opacity: .78 !important;
		scroll-snap-align: center;
	}

	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__thumb.is-active {
		border-color: var(--wtds-primary, var(--wtds-ink)) !important;
		opacity: 1 !important;
	}

	body.single-product.huazotl-variable-product .wapu-single__gallery .wapu-vg__thumb :is(img, video) {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: center !important;
	}
}

/* ========================================================================== 
   1.5.1 · Product archive rhythm — categories + brands
   ========================================================================== */
body.tax-product_cat .wapu-archive__grid,
.wapu-archive--brand-editorial .wapu-archive__grid {
	gap: 40px !important;
}

@media (max-width: 61.9375rem) {
	body.tax-product_cat .wapu-archive__grid,
	.wapu-archive--brand-editorial .wapu-archive__grid {
		gap: 32px !important;
	}
}