/* Lino y Lana — solo lo que no cubren theme.json y los bloques: efectos y pequeños ajustes. */

/* Cabecera: barra superior y cabecera fija. */
.wp-block-template-part:has(> .lyl-header) { position: sticky; top: 0; z-index: 30; }
.admin-bar .wp-block-template-part:has(> .lyl-header) { top: var(--wp-admin--admin-bar--height, 0); }
.lyl-topbar p { margin: 0; }

/* Tarjetas de producto: imagen que se acerca al pasar el ratón. */
.wc-block-components-product-image,
.wp-block-woocommerce-product-image { overflow: hidden; }
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img { transition: transform .45s cubic-bezier(.2,.6,.2,1); }
.wc-block-product:hover .wp-block-woocommerce-product-image img,
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
.wc-block-product .wp-block-post-title { text-transform: none; font-stretch: 100%; letter-spacing: 0; }
.wc-block-product .wp-block-post-title a { text-decoration: none; }
.wc-block-components-product-price del { color: var(--wp--preset--color--accent-4); font-weight: 400; }
.wc-block-components-product-price ins { color: var(--wp--preset--color--accent-1); text-decoration: none; }

/* Mosaico de categorías: el fondo se acerca al pasar el ratón. */
.lyl-mosaico .wp-block-cover { overflow: hidden; }
.lyl-mosaico .wp-block-cover__image-background { transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.lyl-mosaico .wp-block-cover:hover .wp-block-cover__image-background { transform: scale(1.03); }
.lyl-mosaico .wp-block-cover a { text-decoration: none; }
.lyl-mosaico .wp-block-cover a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* Botones: transición corta de color. */
.wp-element-button, .wp-block-button__link { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

/* Efecto 1 «Hilván»: en la portada el titular sube y una costura se dibuja debajo. */
.is-style-lyl-hilvan .wp-block-heading { animation: lyl-sube .52s cubic-bezier(.2,.7,.2,1) .08s both; }
.is-style-lyl-hilvan .lyl-hilo {
	border: 0; border-top: 2px dashed currentColor; background: none; height: 0; opacity: .9;
	transform-origin: left center; animation: lyl-hilo .6s cubic-bezier(.6,0,.2,1) .3s both;
}
@keyframes lyl-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lyl-hilo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Efecto 2 «Probador»: al entrar en pantalla, una cortina color lino se recoge de cada foto. */
.lyl-js .is-style-lyl-probador > * { position: relative; overflow: hidden; }
.lyl-js .is-style-lyl-probador > *::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: var(--wp--preset--color--base); transform-origin: right center;
	transition: transform .55s cubic-bezier(.65,0,.35,1);
}
.lyl-js .is-style-lyl-probador.is-visible > *::after { transform: scaleX(0); }
.lyl-js .is-style-lyl-probador.is-visible > :nth-child(2)::after { transition-delay: .09s; }
.lyl-js .is-style-lyl-probador.is-visible > :nth-child(3)::after { transition-delay: .18s; }
.lyl-js .is-style-lyl-probador.is-visible > :nth-child(4)::after { transition-delay: .27s; }

/* «Enfoque» para media-text: la foto se asienta (escala y opacidad), el texto queda quieto. */
.lyl-js .is-style-lyl-enfoque .wp-block-media-text__media img {
	opacity: .15; transform: scale(1.06);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1);
}
.lyl-js .is-style-lyl-enfoque.is-visible .wp-block-media-text__media img { opacity: 1; transform: none; }
.is-style-lyl-enfoque .wp-block-media-text__media { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.lyl-js .is-style-lyl-probador > *::after { display: none; }
	.lyl-js .is-style-lyl-enfoque .wp-block-media-text__media img { opacity: 1; transform: none; }
}

/* Buscador de la cabecera: solo icono. */
.wp-block-search__button-only .wp-block-search__button { background: transparent; color: currentColor; border: 0; padding: .35rem; }
.wp-block-search__button-only .wp-block-search__button:hover { background: transparent; color: var(--wp--preset--color--accent-1); }

/* Ficha de producto (galería y pestañas clásicas de WooCommerce). */
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; }
.woocommerce span.onsale {
	background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-5);
	border-radius: 0; min-height: 0; min-width: 0; line-height: 1; padding: .45rem .6rem;
	font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; top: .75rem; left: .75rem;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--wp--preset--font-size--large); }

/* Formularios de Contact Form 7. */
.wpcf7 label { font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
	width: 100%; box-sizing: border-box; margin-top: .35rem; padding: .75rem .85rem; font: inherit; font-weight: 400;
	border: 1px solid var(--wp--preset--color--contrast); border-radius: 0; background: var(--wp--preset--color--accent-5); color: inherit;
}
.wpcf7 .lyl-acepto { font-size: var(--wp--preset--font-size--small); }
.wpcf7 .wpcf7-submit {
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--contrast);
	padding: .85rem 1.75rem; font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; font-stretch: var(--wp--custom--stretch--condensed); cursor: pointer; transition: background-color .2s ease;
}
.wpcf7 .wpcf7-submit:hover { background: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); }

/* Textos largos (entradas y páginas legales): titulares más contenidos. */
.single-post .wp-block-post-content h2,
.page-template-default .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.2em; }
.single-post .wp-block-post-content h3,
.page-template-default .wp-block-post-content h3 { font-size: var(--wp--preset--font-size--large); }

/* Lista de categorías del blog en línea. */
.lyl-cats { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; margin: 0; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.lyl-cats a { text-decoration: none; }
.lyl-cats a:hover { color: var(--wp--preset--color--accent-1); }

/* Mosaico de categorías en móvil: rejilla de 2 x 2. */
@media (max-width: 781px) {
	.wp-block-columns.lyl-mosaico { flex-wrap: wrap !important; }
	.wp-block-columns.lyl-mosaico > .wp-block-column { flex-basis: 50% !important; }
	.lyl-mosaico .wp-block-cover { min-height: 300px !important; padding: var(--wp--preset--spacing--30) !important; }
	.lyl-mosaico .wp-block-cover h2 { font-size: var(--wp--preset--font-size--x-large) !important; }
}