/*
Theme Name: Joyería Child
Template: twentytwentyfive
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;800&family=DM+Sans:wght@400;500&family=Fragment+Mono&display=swap');

/* Lenis Smooth Scroll */
html.lenis, html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-stopped {
	overflow: hidden;
}
.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

:root {
	--color-bg: #ffffff;
	--color-text: #111111;
	--color-muted: #6b6b6b;
	--color-border: #e5e5e5;
	--color-accent: #b08d57;
	--font-display: 'Bricolage Grotesque', serif;
	--font-body: 'DM Sans', sans-serif;
	--font-mono: 'Fragment Mono', monospace;
}

* {
	box-sizing: border-box;
}

body.wp-child-theme-joyeria-child {
	margin: 0;
	overflow-x: clip;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
}

body.wp-child-theme-joyeria-child a {
	color: inherit;
	text-decoration: none;
}

/* Header */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 88px;
	background: transparent;
	mix-blend-mode: difference;
}

.site-header__inner {
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

body.wp-child-theme-joyeria-child .site-logo,
body.wp-child-theme-joyeria-child .site-nav a,
body.wp-child-theme-joyeria-child .site-cart,
body.wp-child-theme-joyeria-child .site-menu-toggle {
	color: #ffffff;
}

.site-menu-toggle {
	display: none;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}

.site-search {
	display: none;
	align-items: center;
	padding-right: 16px;
	border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.site-search svg {
	display: block;
}

.site-menu {
	position: fixed;
	top: 88px;
	left: 0;
	right: 0;
	z-index: 95;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding: 24px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 18px;
	font-weight: 500;
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-menu.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Header con menú abierto: fondo blanco y textos oscuros */
.site-header.menu-open {
	background: var(--color-bg);
	mix-blend-mode: normal;
}

body.wp-child-theme-joyeria-child .site-header.menu-open .site-nav a,
body.wp-child-theme-joyeria-child .site-header.menu-open .site-cart,
body.wp-child-theme-joyeria-child .site-header.menu-open .site-menu-toggle {
	color: var(--color-text);
}

.site-header.menu-open .site-search {
	border-right-color: rgba(0, 0, 0, 0.2);
}

.site-header.menu-open .site-cart__count {
	background: rgba(0, 0, 0, 0.08);
	color: var(--color-text);
}

.site-logo {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.5px;
	opacity: 0;
	transform: translateY(-12px);
	pointer-events: none;
}

.site-nav {
	display: flex;
	gap: 20px;
	font-size: 16px;
	font-weight: 500;
}

.site-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.site-cart svg {
	display: block;
}

.site-cart__count {
	position: absolute;
	top: -8px;
	right: -12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
}

/* Footer */
.site-footer {
	border-top: 1px solid var(--color-border);
	margin-top: 64px;
	padding: 64px 32px 32px;
	overflow: hidden;
}

.site-footer__inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 160px;
}

.site-footer__col--brand {
	max-width: 320px;
}

.site-footer__label {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-muted);
	margin: 0 0 8px;
}

.site-footer__tagline {
	font-size: 18px;
	margin: 0;
}

.site-footer__brand-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(60px, 12vw, 160px);
	line-height: 1;
	margin: 64px 0 0;
	padding-bottom: 48px; /* AJUSTAR ACÁ: espacio entre el logo y el borde inferior */
	text-align: center;
}

.site-footer__brand-name img {
	height: 1em;
	width: auto;
	display: inline-block;
	vertical-align: top;
	filter: brightness(0);
}

.site-footer__copy {
	max-width: 1400px;
	margin: 16px auto 0;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-muted);
}

/* Hero */
.hero {
	text-align: center;
	padding: 280px 0 32px;
}

.hero__title {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 110;
	font-family: var(--font-display);
	font-size: clamp(60px, 9vw, 130px);
	font-weight: 800;
	margin: 0;
	color: #ffffff;
	mix-blend-mode: difference;
	transform-origin: center top;
	pointer-events: none;
	will-change: transform;
}

.hero__title img {
	height: 1em;
	width: auto;
	display: inline-block;
	vertical-align: top;
	filter: brightness(0) invert(1);
}

/* El logo solo es clickeable cuando ya está achicado en el header */
.hero__title-link {
	display: inline-block;
	pointer-events: none;
}

.hero__title-link.is-clickable {
	pointer-events: auto;
	cursor: pointer;
}

.hero__subtitle {
	color: var(--color-muted);
	max-width: 480px;
	margin: 0 auto;
	padding: 0 32px;
}

.hero__image {
	display: block;
	margin: 120px auto 0;
	width: 100%;
	max-width: 1400px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #f2f0ec;
	border-radius: 24px;
	will-change: width, border-radius;
}

/* Productos */
.products {
	padding: 64px 8px 96px;
}

.products__header {
	max-width: 1688px; /* AJUSTAR ACÁ: ancho del home (junto con .product-carousel, mismo valor) */
	margin: 0 auto 32px;
	padding: 0 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.section-title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

body.wp-child-theme-joyeria-child .products__view-all {
	font-family: var(--font-body);
	font-size: 14px;
	text-decoration: underline;
}

.product-carousel {
	position: relative;
	max-width: 1688px; /* AJUSTAR ACÁ: mismo valor que .products__header, para que el título quede alineado con las cards */
	margin: 0 auto;
	padding: 0 8px;
}

.product-carousel__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.product-carousel__track::-webkit-scrollbar {
	display: none;
}

.product-card {
	position: relative;
	display: block;
	text-align: left;
	flex: 0 0 calc(25% - 18px);
	scroll-snap-align: start;
}

@media (min-width: 901px) {
	.product-card {
		flex: 0 0 400px; /* AJUSTAR ACÁ: ancho de las cards de producto en pc */
	}
}

.product-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	background: #f2f0ec;
	border-radius: 24px;
	overflow: hidden;
}

@media (min-width: 901px) {
	.product-card__media {
		aspect-ratio: auto;
		height: 512px; /* AJUSTAR ACÁ: alto de las cards de producto en pc */
	}

}

.product-card__img,
body.wp-child-theme-joyeria-child .product-card__img,
body.wp-child-theme-joyeria-child a .product-card__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important; /* WooCommerce fuerza ".woocommerce img { height:auto!important; max-width:100%!important }" en páginas de tienda con la misma prioridad (!important) y más especificidad que una sola clase; se agrega un selector de dos clases para ganarle, en home y en producto por igual */
	object-fit: cover;
	transition: opacity 0.5s ease-in-out;
}

.product-card__img--hover {
	opacity: 0;
}

/* El cambio de foto por hover solo aplica con mouse real: en táctil el
   primer tap disparaba el hover y hacía falta tocar dos veces para abrir */
@media (hover: hover) {
	.product-card:hover .product-card__img--hover {
		opacity: 1;
	}
}

.product-card__info {
	position: absolute;
	left: 20px;
	bottom: 20px;
	mix-blend-mode: difference;
}

.product-card__title {
	font-family: var(--font-display);
	font-size: 16px;
	letter-spacing: -.02em;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
}

.product-card__price {
	font-family: var(--font-display);
	font-weight: 600;
	color: #ffffff;
	font-size: 16px;
	margin: 0;
}

.product-carousel__controls {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}

.product-carousel__btn {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: #b8b8b8;
	cursor: pointer;
	transition: background 0.2s ease;
}

.product-carousel__btn svg {
	display: block;
}

.product-carousel__btn--next svg {
	transform: scaleX(-1);
}

@media (hover: hover) {
	.product-carousel__btn:hover {
		background: var(--color-text);
	}
}

.product-carousel__btn:active {
	background: var(--color-text);
}

@media (max-width: 900px) {
	.product-card {
		flex: 0 0 calc(70% - 12px);
	}
}

/* Carrusel "También te puede gustar" (ficha de producto): 5 por fila
   manteniendo el mismo ancho de card que en el home (contenedor más
   ancho para que entre una card más) */
/* La sección se reubica por JS a nivel raíz de la página (fuera del
   wrapper angosto del producto), así que solo necesita centrarse normal,
   igual que las secciones del home. Grilla estática de 4 (sin carrusel
   ni flechas): mismo tamaño de card que el home */
.related-carousel-seccion {
	padding-top: 64px;
}

.related-carousel-seccion .products__header {
	max-width: 1688px; /* AJUSTAR ACÁ: mismo valor que .product-grid-4 (y que el home) */
	margin: 0 auto 32px;
	padding: 0 8px;
}

.product-grid-4 {
	max-width: 1688px; /* AJUSTAR ACÁ: mismo valor que .products__header de arriba */
	margin: 0 auto;
	padding: 0 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

@media (max-width: 900px) {
	.related-carousel-seccion .product-card {
		flex: 0 0 100%; /* usa todo el ancho disponible, con el mismo margen que ya tiene a la izquierda */
	}

	.related-carousel-seccion .product-card__media {
		aspect-ratio: 4 / 4; /* AJUSTAR ACÁ: alto de la card en mobile (número más chico = menos alta) */
	}

	.product-grid-4 {
		gap: 16px; /* AJUSTAR ACÁ: separación entre cards en mobile */
	}
}

/* Intro */
.intro {
	max-width: 1600px;
	margin: 0 auto;
	padding: 96px 16px 128px;
}

.intro__text {
	max-width: 1000px;
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.35;
	color: var(--color-muted);
	margin: 0;
}

.intro__text--dark {
	color: var(--color-text);
}

/* Colecciones */
.collections {
	padding: 0 8px 96px;
}

.collections__header {
	max-width: 1600px;
	margin: 0 auto 32px;
	padding: 0 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.collections__grid {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 8px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.collection-card {
	position: relative;
	display: block;
}

.collection-card__media {
	width: 100%;
	aspect-ratio: 6 / 5;
	border-radius: 24px;
	overflow: hidden;
	background: #f2f0ec;
}

.collection-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.collection-card:hover .collection-card__media img {
	transform: scale(1.07);
}

.collection-card__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	margin: 0;
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(24px, 2.4vw, 36px);
	font-weight: 500;
	color: #ffffff;
	mix-blend-mode: difference;
	pointer-events: none;
}

@media (max-width: 900px) {
	.collections__grid {
		grid-template-columns: 1fr;
	}
}

/* Instagram */
.instagram {
	padding: 0 8px 96px;
}

.instagram__title {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
	margin: 0 0 40px;
}

.instagram__grid {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 8px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}

.instagram__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	background: #f2f0ec;
}

.instagram__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.instagram__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	color: #ffffff;
	font-size: 18px;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.4s ease;
}

@media (hover: hover) {
	.instagram__item:hover img {
		transform: scale(1.07);
	}

	.instagram__item:hover .instagram__overlay {
		opacity: 1;
	}
}

.instagram__handle {
	display: none;
}

@media (max-width: 900px) {
	.instagram__title {
		margin-bottom: 16px;
	}

	body.wp-child-theme-joyeria-child .instagram__handle {
		display: block;
		text-align: center;
		font-family: var(--font-body);
		font-size: clamp(28px, 7vw, 36px);
		font-weight: 500;
		text-decoration: underline;
		margin: 0 auto 40px;
	}

	.instagram__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.instagram__item:nth-child(5) {
		display: none;
	}
}

/* Ficha de producto */
.single_add_to_cart_button {
	background: var(--color-text) !important;
	color: #ffffff !important;
	border-radius: 12px !important;
}

/* Botones de los bloques de WooCommerce (Aplicar cupón, Finalizar compra):
   mismo estilo que "Añadir al carrito" para que todo el sitio sea consistente */
.wc-block-components-button.wp-element-button {
	background: var(--color-text) !important;
	color: #ffffff !important;
	border-radius: 12px !important;
	border: none !important;
}

/* Botón "Aplicar" del cupón: mismo alto que el input de al lado (50px) */
.wc-block-components-totals-coupon__button {
	height: 50px !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Campo del cupón: borde más redondeado, a juego con el botón "Aplicar" (AJUSTAR ACÁ) */
.wc-block-components-totals-coupon__input input {
	border-radius: 8px !important;
	/* El outline nativo del navegador no sigue bien el border-radius en
	   esquinas cerradas (se veían las líneas rectas del borde fino
	   asomando) y en iPhone Safari dibuja además su anillo celeste propio.
	   Se saca el outline nativo de los dos lados. */
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/* El grosor "grueso" que se veía al enfocar era en realidad el borde de
   WooCommerce (1.5px) sumado al outline nativo del navegador (2px) — al
   sacar el outline para el fix de arriba, se perdía ese grosor. Se repone
   con un box-shadow (AJUSTAR ACÁ grosor: 2px), que sí respeta el
   border-radius prolijamente en cualquier navegador. */
.wc-block-components-totals-coupon__input input:focus {
	box-shadow: 0 0 0 2px currentColor !important;
}

/* Galería de producto: bordes redondeados solo en el contenedor.
   Las imágenes internas quedan cuadradas para que no se vean esquinas
   redondeadas al deslizar; en desktop (galería apilada) cada foto sí
   lleva el radio porque el viewport no recorta */
.woocommerce-product-gallery .flex-viewport {
	border-radius: 20px;
	overflow: hidden;
}

@media (min-width: 901px) {
	.woocommerce-product-gallery__image,
	.woocommerce-product-gallery__image img {
		border-radius: 20px;
		overflow: hidden;
	}
}

.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: 0px;
}

/* Galería apilada (estilo Aurum): todas las fotos una debajo de otra,
   sin slider ni miniaturas — solo en desktop */
@media (min-width: 901px) {
	.woocommerce-product-gallery .flex-viewport {
		height: auto !important;
		overflow: visible !important;
	}

	.woocommerce-product-gallery__wrapper {
		width: 100% !important;
		transform: none !important;
		display: block;
	}

	.woocommerce-product-gallery__image {
		width: 100% !important;
		float: none !important;
		margin: 0 0 16px !important;
		display: block !important;
	}

	/* La última foto sin margen inferior: así el final del recorrido sticky
	   de la columna de info queda alineado con el borde de la imagen.
	   AJUSTAR ACÁ: si el botón queda apenas desalineado, usar un valor
	   negativo (ej: -8px) para subirlo o positivo para bajarlo */
	.woocommerce-product-gallery__image:last-child {
		margin-bottom: 19px !important;
	}

	/* WooCommerce agrega margin-bottom: 2em (32px) a la galería completa,
	   estirando la columna y corriendo el punto de liberación del sticky */
	.single-product .woocommerce-product-gallery {
		margin-bottom: 0 !important;
	}

	.woocommerce-product-gallery .flex-control-thumbs,
	.woocommerce-product-gallery__trigger {
		display: none !important;
	}

	/* Columna de info fija mientras se scrollean las fotos */
	.single-product .wp-block-columns {
		align-items: flex-start !important;
	}

	.single-product .wp-block-columns > .wp-block-column:last-child {
		position: sticky;
		top: 100px; /* AJUSTAR ACÁ: distancia desde arriba al quedar fija */
	}

	/* Tamaño de las imágenes de la galería */
	.single-product .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 620px !important; /* AJUSTAR ACÁ: ancho de las fotos */
		flex-grow: 0 !important;
		width: 620px !important;
		max-width: 620px !important;
	}

	.single-product .wp-block-woocommerce-product-image-gallery,
	.single-product .woocommerce-product-gallery {
		width: 100% !important;
		max-width: none !important;
	}

	.woocommerce-product-gallery__image img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
}

/* Header y footer del tema de bloques ocultos: los reemplazan los nuestros */
header.wp-block-template-part,
footer.wp-block-template-part {
	display: none !important;
}

/* Logo estático centrado en el header (fuera del home, donde anima el del hero) */
.site-header__inner {
	position: relative;
}

.site-logo-static {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.site-logo-static img {
	display: block;
	height: 30px; /* AJUSTAR ACÁ: tamaño del logo del header */
	width: auto;
	filter: brightness(0) invert(1);
}

body.home .site-logo-static {
	display: none;
}

/* El contenido de las páginas de bloques no debe quedar bajo el header fijo */
body:not(.home) .wp-site-blocks {
	padding-top: 108px;
}

@media (max-width: 768px) {
	body:not(.home) .wp-site-blocks {
		padding-top: 84px;
	}
}

/* Header de páginas de bloques: sticky, inversión de color y logo centrado */
.block-header-lueur {
	position: sticky;
	top: 0;
	z-index: 100;
	mix-blend-mode: difference;
}

/* El fondo blanco propio del header y sus grupos internos se vuelve negro
   con el blend mode: se fuerza transparente en toda la cadena */
.block-header-lueur,
.block-header-lueur div,
.block-header-lueur nav {
	background: transparent !important;
	background-color: transparent !important;
}

.block-header-lueur a,
.block-header-lueur span,
.block-header-lueur svg {
	color: #ffffff !important;
	fill: currentColor;
}

/* Se oculta el nombre en texto y el logo propio del tema
   (los reemplaza nuestro logo centrado) */
.block-header-lueur .wp-block-site-title,
.block-header-lueur .wp-block-site-logo {
	display: none !important;
}

/* Red de seguridad: ninguna imagen del header puede superar la altura de la barra */
.block-header-lueur img {
	max-height: 30px;
	width: auto;
}

.block-header-lueur__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 30px; /* AJUSTAR ACÁ: tamaño del logo del header */
	width: auto;
	filter: brightness(0) invert(1);
	pointer-events: none;
}

/* Dots indicadores de la galería (solo mobile) */
.woocommerce-product-gallery {
	position: relative;
}

.galeria-dots {
	display: none;
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	gap: 8px;
	z-index: 5;
	mix-blend-mode: difference;
}

.galeria-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}

.galeria-dot.is-active {
	width: 20px;
	border-radius: 4px;
	background: #ffffff;
}

@media (max-width: 900px) {
	.galeria-dots {
		display: flex;
	}

	.woocommerce-product-gallery .flex-control-thumbs {
		display: none !important;
	}
}

/* Imágenes de la galería sin click ni zoom (la lupa sí funciona) */
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
	pointer-events: none;
	cursor: default;
}

/* Zoom sobre la imagen desactivado por completo */
.zoomImg {
	display: none !important;
}

.woocommerce-product-gallery__trigger {
	pointer-events: auto;
	cursor: pointer;
}

/* Ícono del botón añadir al carrito bien centrado */
.btn-cart-icon svg {
	display: block;
}

/* Categoría arriba del título (la genera el JS de la ficha) */
.product-category-label {
	font-family: var(--font-body);
	font-size: 12px;
	color: #787878;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 4px;
}

/* Título del producto más chico */
.single-product h1.wp-block-post-title,
.single-product .product_title {
	font-size: 34px; /* AJUSTAR ACÁ: tamaño del nombre del producto */
	font-weight: 400;
}

/* Descripción del producto */
.single-product .woocommerce-product-details__short-description,
.single-product .wp-block-post-excerpt,
.single-product .wp-block-post-content {
	font-family: var(--font-body);
	font-size: 14px;
	color: #787878;
	max-width: 620px; /* AJUSTAR ACÁ: ancho máximo de la descripción */
}

/* Etiqueta "Talle" arriba de las opciones */
table.variations,
table.variations tbody,
table.variations tr,
table.variations th,
table.variations td {
	display: block;
	border: none;
	padding: 0;
	text-align: left;
}

table.variations {
	margin: 0 0 16px;
}

table.variations th.label {
	margin: 0 0 -12px; /* AJUSTAR ACÁ: separación entre "Talle" y las opciones */
}

table.variations th.label label {
	margin: 0;
	display: block;
	line-height: 1.2;
}

/* El link "Limpiar" no se usa (hay auto-selección de talle) y su espacio
   reservado era lo que separaba de más el título de las opciones */
table.variations .reset_variations {
	display: none !important;
}

table.variations th.label label {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
}

/* Pills de talle (el select original queda oculto por JS) */
.talle-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.talle-pills button {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: none;
	border-radius: 12px;
	background: #f2f0ec;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.talle-pills button.is-active {
	background: var(--color-text);
	color: #ffffff;
}

.talle-pills button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Formulario de compra: cantidad a la derecha, botón full-width abajo.
   El display block es clave: WooCommerce pone el bloque como inline-block
   y el ancho se encogía al contenido (con pocas opciones de talle quedaba
   angosto) */
.wc-block-add-to-cart-form,
form.variations_form.cart,
.single_variation_wrap,
.woocommerce-variation-add-to-cart {
	display: block;
	width: 100% !important;
}

/* El formulario de compra no sobresale del ancho de la descripción */
.wc-block-add-to-cart-form {
	max-width: 620px; /* AJUSTAR ACÁ: mismo valor que el ancho de la descripción */
}

/* Mobile: el formulario siempre a ancho completo, para cualquier
   producto/categoría (en iOS algunos quedaban más angostos) */
@media (max-width: 900px) {
	.wc-block-add-to-cart-form,
	.wc-block-add-to-cart-form form.cart,
	.single_variation_wrap,
	.woocommerce-variation-add-to-cart {
		width: 100% !important;
		max-width: 100% !important;
	}

	.wc-block-add-to-cart-form form.cart .quantity {
		margin-left: auto;
	}

	button.single_add_to_cart_button {
		width: 100% !important;
		max-width: 100% !important;
	}
}

.woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 12px;
}

/* Productos simples (sin talles): mismo layout que los variables,
   cantidad arriba a la derecha y botón full-width abajo */
.wc-block-add-to-cart-form form.cart:not(.variations_form) {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 12px;
}

/* Selector de cantidad (- 1 +) */
form.cart .quantity {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* AJUSTAR ACÁ: separación entre los botones y el número */
	margin: 0;
	float: none;
}

.qty-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 12px;
	background: #f2f0ec;
	color: var(--color-text);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

@media (hover: hover) {
	.qty-btn:hover {
		background: #e6e3de;
	}
}

form.cart input.qty {
	width: 44px;
	height: 44px;
	margin: 0 !important; /* WooCommerce le pone margen solo de un lado por defecto, causando espacio distinto entre los dos botones */
	border: none !important;
	border-radius: 12px;
	background: #f2f0ec;
	text-align: center;
	font-family: var(--font-body);
	font-size: 15px;
	-moz-appearance: textfield;
	appearance: textfield;
}

form.cart input.qty::-webkit-outer-spin-button,
form.cart input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Foco del input de cantidad: sin celeste de iOS, borde negro como en PC */
form.cart input.qty {
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

form.cart input.qty:focus,
form.cart input.qty:focus-visible {
	outline: 2px solid var(--color-text) !important;
	outline-offset: 0;
	box-shadow: none !important;
	border: none !important;
}

/* Botón añadir al carrito */
button.single_add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	height: 44px; /* AJUSTAR ACÁ: alto del botón añadir al carrito */
	margin: 0;
	font-size: 16px;
	font-weight: 500;
}

.btn-cart-icon {
	display: inline-flex;
	align-items: center;
}

/* Acordeones de la ficha de producto */
.acordeones-producto {
	max-width: 620px; /* AJUSTAR ACÁ: mismo ancho que la descripción/formulario */
	/* AJUSTAR ACÁ: bajar este valor sube la línea del último acordeón
	   respecto del borde de la imagen (cuando la info es más alta que la
	   galería); subirlo la baja */
	margin-top: 16px;
	margin-bottom: 0;
}

.acordeon {
	border-top: 1px solid #D2D2D2;
}

.acordeon:last-child {
	border-bottom: 1px solid #D2D2D2;
}

.acordeon__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	background: none;
	border: none;
	outline: none;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}

.acordeon__toggle:focus,
.acordeon__toggle:focus-visible {
	outline: none;
}

/* Ícono +/- dibujado con líneas CSS (no texto/font), así el grosor
   siempre es exactamente 1px, nítido, sin el borroneo del renderizado
   de fuentes en tamaños chicos */
.acordeon__icono {
	position: relative;
	display: inline-block;
	width: 11px; /* AJUSTAR ACÁ: tamaño del ícono (ancho y alto) */
	height: 11px; /* AJUSTAR ACÁ: tamaño del ícono (ancho y alto) */
}

.acordeon__icono::before,
.acordeon__icono::after {
	content: "";
	position: absolute;
	background: rgba(0, 0, 0, 0.7); /* AJUSTAR ACÁ: opacidad/color de las líneas */
	transition: opacity 0.35s ease;
}

.acordeon__icono::before {
	/* Sin transform: centrado con top en vez de translate(-50%), para que
	   la línea caiga en un pixel entero y no se vea borrosa a 2px */
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
}

.acordeon__icono::after {
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
}

.acordeon.is-open .acordeon__icono::after {
	opacity: 0;
}

/* Apertura animada: el contenido empuja suave al resto (truco de grid 0fr→1fr) */
.acordeon__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
	font-size: 14px;
	color: #787878;
	line-height: 1.6;
}

.acordeon.is-open .acordeon__body {
	grid-template-rows: 1fr;
}

.acordeon__inner {
	overflow: hidden;
	min-height: 0;
}

/* Espacio inferior del contenido como elemento interno: se recorta al
   colapsar y no genera saltos durante la animación */
.acordeon__inner::after {
	content: "";
	display: block;
	height: 20px;
}

.acordeon__body p {
	margin: 0 0 12px;
}

/* Valoraciones: sección propia a ancho completo debajo del producto */
.valoraciones-seccion {
	max-width: 800px; /* AJUSTAR ACÁ: ancho de la sección de valoraciones */
	margin: 96px auto 0;
	padding: 0 16px;
}

.valoraciones-seccion__titulo {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 24px;
}

.valoraciones-seccion .woocommerce-Reviews,
.valoraciones-seccion .woocommerce-Reviews p,
.valoraciones-seccion .woocommerce-Reviews label {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text);
}

.valoraciones-seccion .woocommerce-Reviews h2,
.valoraciones-seccion .woocommerce-Reviews h3 {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text);
}

.valoraciones-seccion .woocommerce-Reviews #submit,
.valoraciones-seccion .woocommerce-Reviews .submit {
	background: var(--color-text);
	color: #ffffff;
	border: none;
	border-radius: 12px;
	height: 44px;
	padding: 0 24px;
	font-family: var(--font-body);
	font-size: 15px;
	cursor: pointer;
}

.valoraciones-seccion .woocommerce-Reviews textarea,
.valoraciones-seccion .woocommerce-Reviews input[type="text"],
.valoraciones-seccion .woocommerce-Reviews input[type="email"] {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 14px;
}

/* Responsive: header y hero en mobile */
@media (max-width: 768px) {
	.site-header {
		height: 64px;
	}

	.site-header__inner {
		padding: 0 20px;
	}

	.site-nav--left,
	.site-link--desktop {
		display: none;
	}

	.site-menu-toggle {
		display: block;
	}

	.site-nav--right {
		gap: 12px;
	}

	.site-cart {
		margin-right: 20px;
	}

	.site-menu {
		top: 64px;
	}

	.hero {
		padding: 150px 0 24px;
	}

	.hero__title {
		font-size: clamp(48px, 14vw, 60px);
	}

	.hero__image {
		margin-top: 72px;
		aspect-ratio: 4 / 5;
	}

	.intro {
		padding: 64px 16px 80px;
	}
}

/* iOS hace zoom automático al enfocar un campo con font-size menor a 16px
   (selector de cantidad, formulario de valoraciones, cualquier input futuro).
   Se fuerza 16px en todos los campos de texto, solo en mobile. */
@media (max-width: 900px) {
	input,
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* Panel "Añadir cupones" del carrito: sin borde de foco al hacer click */
.wc-block-components-panel__button {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

/* El botón real mide poco de alto; el "aire" visible de la fila es padding
   del contenedor de afuera y quedaba fuera del área clickeable. En vez de
   agrandar el botón con margin negativo (fallaba de un solo lado, según el
   alto que calcula el contenedor padre), se extiende el área de click con
   un pseudo-elemento absoluto: no mueve nada del layout, solo agranda la
   zona que responde al click. AJUSTAR ACÁ si cambia el padding del wrapper. */
.wc-block-components-panel__button::before {
	content: "";
	position: absolute;
	top: -16px;
	bottom: -16px;
	left: 0;
	right: 0;
}

.wc-block-components-panel__button:focus,
.wc-block-components-panel__button:focus-visible {
	outline: none;
	box-shadow: none;
}

/* La fila del producto en el carrito y el bloque de totales quedan
   focuseables por accesibilidad (navegación con teclado), y el navegador
   les pone un contorno negro apenas se clickea cualquier parte de adentro
   (no solo los controles reales). Se saca ese contorno acá; los controles
   con función real (cantidad, eliminar) tienen su propio foco aparte y no
   se ven afectados por esta regla. */
.wc-block-cart-items__row:focus,
.wc-block-cart-items__row:focus-visible,
.wc-block-cart-items:focus,
.wc-block-cart-items:focus-visible,
.wc-block-components-totals-item:focus,
.wc-block-components-totals-item:focus-visible {
	outline: none;
}

/* Ícono propio del desplegable (insertado por JS): rota en vez de cambiar
   de golpe, como hace el ícono nativo de WooCommerce (AJUSTAR ACÁ duración) */
.mi-chevron {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	transition: transform 300ms ease;
	fill: currentColor;
}

.wc-block-components-panel__button[aria-expanded="true"] .mi-chevron {
	transform: translateY(-50%) rotate(180deg);
}

/* Se oculta el nombre en texto y el logo propio del tema
   (los reemplaza nuestro logo centrado) */