/*
Theme Name: Ho Hey
Theme URI: https://hoheyshop.lascositasdesita.com
Description: Tema de bloques a medida para ho·hey · outstanding details. Blanco, aire y la arquitectura como protagonista.
Version: 0.2.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: hohey
*/

/* ------------------------------------------------------------------
   Lo que theme.json no sabe expresar: el logo, los marcos blancos de
   las fotos (como en el feed de Instagram) y los detalles de tienda.
------------------------------------------------------------------- */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--azul-polvo); color: var(--wp--preset--color--tinta); }
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 1px solid var(--wp--preset--color--tinta);
	outline-offset: 4px;
}
strong, b { font-weight: 500; }

/* ---------- Logo ---------- */
.marca {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .15em;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
	line-height: 1;
}
.marca:hover { color: var(--wp--preset--color--tinta); }
.marca__nombre {
	display: inline-flex;
	align-items: center;
	gap: .32em;
	font-size: 1.9rem;
}
.marca__nombre em {
	font-family: var(--wp--preset--font-family--cursiva);
	font-weight: 400;
	font-style: italic;
	font-size: 1.12em;
	letter-spacing: .01em;
}
.marca__nombre strong {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	letter-spacing: -.01em;
}
.marca__punto {
	width: .2em;
	height: .2em;
	border-radius: 50%;
	background: currentColor;
	transform: translateY(.04em);
}
.marca__lema {
	font-size: .625rem;
	font-weight: 300;
	letter-spacing: .38em;
	margin-right: -.38em; /* el espaciado final descentra el texto */
	color: var(--wp--preset--color--gris);
}
.marca--grande .marca__nombre { font-size: clamp(2.6rem, 6vw, 4rem); }
.marca--grande { gap: .55em; }
.marca--grande .marca__lema { font-size: .75rem; }

/* ---------- Piezas de texto recurrentes ---------- */

/* Antetítulo: minúsculas muy espaciadas, como el lema del logo */
.antetitulo {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: .3em;
	text-transform: lowercase;
	color: var(--wp--preset--color--gris);
}

/* La palabra en cursiva serif: el "ho" del logo aplicado a los titulares */
.cursiva, em.cursiva {
	font-family: var(--wp--preset--font-family--cursiva);
	font-style: italic;
	font-weight: 400;
	font-size: 1.15em;
	letter-spacing: 0;
}
.firma {
	font-family: var(--wp--preset--font-family--cursiva);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--wp--preset--color--gris);
}

/* ---------- Marcos blancos ----------
   Las fotos de producto se presentan como en su feed: sobre blanco, con
   aire generoso arriba y abajo. */
.marco {
	background: var(--wp--preset--color--hueso);
	padding: clamp(1.5rem, 5%, 3rem) clamp(.75rem, 3%, 1.75rem);
}
.marco img { display: block; width: 100%; height: auto; }
.marco figcaption { margin-top: 1rem; text-align: center; }

/* Tarjeta tipo azulejo blanco en relieve (como sus portadas de Instagram).
   El mosaico va en una capa aparte para poder difuminarlo sin tocar el texto.
   "round" ajusta el tamaño de las piezas para que quepan enteras: ninguna
   queda cortada en los bordes. */
.azulejo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wp--preset--color--hueso);
}
.azulejo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/img/azulejo.png") 0 0 / 112px 112px round;
	filter: blur(7px);
	transform: scale(1.02); /* el desenfoque aclara los bordes: así no se nota */
}
.azulejo .wp-block-site-title { text-align: center; }

/* ---------- Cabecera ---------- */
.cabecera { border-bottom: 1px solid var(--wp--preset--color--linea); }
.cabecera .wp-block-navigation a:hover { color: var(--wp--preset--color--morado); }
.cabecera__lado { flex: 1 1 0; }
.cabecera__lado--dcha { justify-content: flex-end; }
.cabecera .wc-block-mini-cart__badge { background: var(--wp--preset--color--morado); color: #fff; border: 0; }
@media (max-width: 781px) {
	.marca__nombre { font-size: 1.5rem; }
	.cabecera .marca__lema { display: none; }
}

/* ---------- Portada ---------- */
.trio { align-items: flex-end; }
.trio .marco img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 782px) {
	.trio > .wp-block-column:nth-child(2) { transform: translateY(-2.5rem); }
}

.valores {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .75rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.valores li { display: inline-flex; align-items: center; gap: 1.75rem; }
.valores li + li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--tinta);
}

@media (max-width: 781px) {
	/* En el móvil la franja de valores se apila, sin puntos sueltos */
	.valores { flex-direction: column; gap: .7rem; }
	.valores li + li::before { display: none; }
	/* y las tres fotos de entrada se deslizan en horizontal */
	.trio.wp-block-columns { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: .5rem; scrollbar-width: none; }
	.trio.wp-block-columns > .wp-block-column { flex: 0 0 78% !important; scroll-snap-align: center; }
	/* Colecciones en dos columnas: cuatro fotos apiladas a pantalla completa cansan */
	.rejilla-2.wp-block-columns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.5rem .75rem !important; }
}

/* Colecciones: foto enmarcada + nombre centrado, sin cajas */
.coleccion { text-align: center; position: relative; }
.coleccion .marco { transition: background-color .4s ease; }
.coleccion:hover .marco { background: var(--wp--preset--color--linea); }
.coleccion .marco img { aspect-ratio: 4 / 5; object-fit: cover; }
.coleccion a::after { content: ""; position: absolute; inset: 0; }

.paso__num {
	font-family: var(--wp--preset--font-family--cursiva);
	font-style: italic;
	font-size: 2.75rem;
	line-height: 1;
	color: var(--wp--preset--color--morado);
}

/* ---------- Rejilla de productos ---------- */
.wc-block-product .wc-block-components-product-image {
	background: var(--wp--preset--color--hueso);
	padding: clamp(1.25rem, 9%, 2.5rem) clamp(.75rem, 6%, 1.5rem);
	margin-bottom: 1.1rem !important;
	transition: background-color .4s ease;
}
.wc-block-product:hover .wc-block-components-product-image { background: var(--wp--preset--color--linea); }
.wc-block-product .wc-block-components-product-image img { aspect-ratio: 4 / 5; object-fit: cover; }
.wc-block-product .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 400;
	letter-spacing: .01em;
	margin-bottom: .25rem !important;
}
.wc-block-product .wc-block-components-product-price { color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--small); }
.wc-block-product .wp-block-button__link,
.wc-block-product .add_to_cart_button {
	background: transparent !important;
	color: var(--wp--preset--color--tinta) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--tinta) !important;
	padding: .35rem 0 !important;
	margin-top: .5rem;
}
.wc-block-product .wp-block-button__link:hover,
.wc-block-product .add_to_cart_button:hover { color: var(--wp--preset--color--morado) !important; border-color: var(--wp--preset--color--morado) !important; }
.wc-block-components-product-sale-badge {
	border-radius: 0 !important;
	border: 0 !important;
	background: var(--wp--preset--color--morado) !important;
	color: #fff !important;
	letter-spacing: .15em;
	text-transform: lowercase;
}
.woocommerce-ordering select, .wc-block-catalog-sorting select {
	border: 0; border-bottom: 1px solid var(--wp--preset--color--tinta);
	background: transparent; padding: .4rem 1.5rem .4rem 0;
	font: inherit; font-size: var(--wp--preset--font-size--small);
}
.woocommerce-result-count, .wc-block-product-results-count { color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--small); }

/* ---------- Ficha de producto ---------- */
/* WooCommerce oculta la galería hasta que arranca su JavaScript; con una
   sola foto por producto solo retrasa la imagen: se muestra desde el inicio. */
.woocommerce-product-gallery { opacity: 1 !important; }
.single-product .woocommerce-product-gallery {
	box-sizing: border-box;
	width: 100% !important;
	background: var(--wp--preset--color--hueso);
	padding: clamp(2rem, 8%, 4.5rem) clamp(1rem, 6%, 3rem);
}
.woocommerce-product-gallery__image img { width: 100%; height: auto; }
.woocommerce-product-gallery__trigger { background: #fff !important; border-radius: 50%; }
.single-product main .wp-block-post-title { font-weight: 500; letter-spacing: -.01em; }
.single-product main .wp-block-woocommerce-product-price { font-size: var(--wp--preset--font-size--large); font-weight: 300; }
.single-product table.variations th, .single-product table.variations label {
	font-weight: 400; font-size: var(--wp--preset--font-size--x-small); letter-spacing: .25em; text-transform: lowercase; color: var(--wp--preset--color--gris);
}
.single-product .quantity input.qty { border: 1px solid var(--wp--preset--color--linea); border-radius: 0; padding: .85rem .5rem; }
.woocommerce-tabs ul.tabs li a, .wc-tabs li a { font-weight: 400 !important; letter-spacing: .12em; text-transform: lowercase; font-size: var(--wp--preset--font-size--small); }
.woocommerce-Tabs-panel > h2:first-child { display: none; }
.single-product main .wp-block-woocommerce-product-collection > h2,
.single-product main .wp-block-woocommerce-related-products h2,
.single-product main section.related > h2 {
	text-align: center; font-weight: 400; font-size: var(--wp--preset--font-size--x-large);
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

/* Campo de personalización (mu-plugin hohey-tienda) */
.hohey-personaliza { margin: 0 0 1.75rem; padding: 1.5rem; background: var(--wp--preset--color--hueso); }
.hohey-personaliza label { display: block; font-size: var(--wp--preset--font-size--x-small); letter-spacing: .25em; text-transform: lowercase; color: var(--wp--preset--color--gris); margin-bottom: .6rem; }
.hohey-personaliza textarea { width: 100%; min-height: 6rem; padding: .85rem; font: inherit; background: #fff; border: 1px solid var(--wp--preset--color--linea); }
.hohey-personaliza small { display: block; margin-top: .6rem; color: var(--wp--preset--color--gris); line-height: 1.6; }

/* ---------- Formularios, carrito y pago ---------- */
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-blocks-components-select__select,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], textarea, select {
	border-radius: 0 !important;
}
.wc-block-components-button:not(.is-link) { border-radius: 0 !important; letter-spacing: .2em; text-transform: lowercase; font-weight: 500; }
.wp-element-button, .wp-block-button__link { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--tinta); }
.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--tinta); color: #fff; border-color: var(--wp--preset--color--tinta); }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--wp--preset--color--linea); }
.pie a:hover { color: var(--wp--preset--color--morado); }
.pie ul { list-style: none; padding-left: 0; }

/* Los titulares nunca parten una palabra */
h1, h2, h3, .wp-block-post-title { overflow-wrap: normal; word-break: normal; hyphens: manual; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* ---------- Preguntas frecuentes (bloque Detalles) ---------- */
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--linea); padding: 1.1rem 0; margin: 0 !important; }
.wp-block-details summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
	font-weight: 400; font-size: var(--wp--preset--font-size--medium);
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; flex: none; font-family: var(--wp--preset--font-family--cursiva); font-size: 1.6rem; line-height: 1;
	color: var(--wp--preset--color--morado); transition: transform .25s ease;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details summary:hover { color: var(--wp--preset--color--morado); }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--gris); margin-top: .75rem; }
.wp-block-post-content h2 + .wp-block-details { border-top: 1px solid var(--wp--preset--color--linea); }
.wp-block-post-content h2:not(:first-child) { margin-top: var(--wp--preset--spacing--50); }

/* ---------- Listados clásicos de WooCommerce (ventas dirigidas en la ficha) ---------- */
.up-sells > h2, .cross-sells > h2 {
	text-align: center; font-weight: 400; font-size: var(--wp--preset--font-size--x-large);
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}
ul.products { list-style: none; padding: 0; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 2rem 1.25rem; }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; text-align: center; }
ul.products li.product img {
	background: var(--wp--preset--color--hueso); padding: clamp(1.25rem, 9%, 2.5rem) clamp(.75rem, 6%, 1.5rem);
	aspect-ratio: 4 / 5; object-fit: cover; box-sizing: border-box; width: 100%; margin-bottom: 1rem !important;
}
ul.products li.product .woocommerce-loop-product__title { font-size: var(--wp--preset--font-size--medium) !important; font-weight: 400 !important; }
ul.products li.product .price { color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--small); }
ul.products li.product .button {
	background: transparent !important; color: var(--wp--preset--color--tinta) !important; border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--tinta) !important; padding: .35rem 0 !important; border-radius: 0 !important;
	font-size: var(--wp--preset--font-size--x-small); letter-spacing: .22em; text-transform: lowercase; font-weight: 500;
}
ul.products li.product .button:hover { color: var(--wp--preset--color--morado) !important; border-color: var(--wp--preset--color--morado) !important; }