/* ==========================================================================
   NAYÚ · Franja de temporada
   El color de la temporada entra por una sola variable, --nayu-temporada-acento,
   que el PHP pone en la propia sección. Así una temporada nueva es una entrada
   en el calendario y ni una línea de CSS.
   Y entra con cuentagotas: el fondo es el acento al 7 %, y el acento saturado
   solo toca el filete, el enlace y el borde de la tarjeta al pasar por encima.
   La regla de la casa es que el único color que grita en la pantalla sean las
   piezas.

   Los movimientos van todos con la misma curva y el mismo compás —320 ms para
   lo que se toca, 600 para la foto— porque lo que hace que algo se sienta
   suave no es la duración de cada cosa, es que todas se muevan igual.
   ========================================================================== */

.nayu-temporada {
	--nayu-temporada-acento: #c0573c;
	--nayu-temporada-curva: cubic-bezier(0.2, 0.8, 0.2, 1);

	padding-block: var(--wp--preset--spacing--60, 6rem);
	background:
		linear-gradient(
			to bottom,
			color-mix(in srgb, var(--nayu-temporada-acento) 7%, transparent),
			color-mix(in srgb, var(--nayu-temporada-acento) 3%, transparent)
		),
		var(--wp--preset--color--base, #fbf6ee);
	/* Una línea del acento arriba y otra abajo: separa la franja del resto de
	   la portada sin cajas ni bordes cerrados. */
	border-block: 1px solid color-mix(in srgb, var(--nayu-temporada-acento) 22%, transparent);
}

.nayu-temporada__dentro {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
}

/* --- La cabecera ---------------------------------------------------------- */

.nayu-temporada__cabeza {
	max-width: 52ch;
	margin-bottom: var(--wp--preset--spacing--40, 2.5rem);
}

.nayu-temporada__encima {
	margin: 0 0 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--nayu-temporada-acento);
}

.nayu-temporada__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: var(--wp--preset--font-size--grande, 2.25rem);
	line-height: 1.1;
	color: var(--wp--preset--color--contraste, #1f2420);
}

/* El mismo filete corto que llevan la tarjeta de la tienda y la ficha, aquí
   con el color de la temporada. Es lo que ata la franja al resto del sitio. */
.nayu-temporada__titulo::after {
	content: "";
	display: block;
	width: 34px;
	height: 2px;
	margin: 18px 0 0;
	border-radius: 2px;
	background: var(--nayu-temporada-acento);
}

.nayu-temporada__entrada {
	margin: 18px 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #1f2420) 78%, transparent);
}

/* --- «Ver todas las piezas» ----------------------------------------------- */

/* Antes era texto con una flecha de tipografía al lado, y la flecha se subía
   sobre la línea porque una entidad no se alinea con el texto: se alinea con
   su propia caja. Ahora es un botón con su dibujo, los dos centrados por flex,
   y la flecha se desliza al pasar por encima. */
.nayu-temporada__todas {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	margin-top: 26px;
	/* 44 px es el minimo que se toca comodo con el dedo; medido, con el
	   relleno solo se quedaba en 38. */
	min-height: 44px;
	padding: 0.85em 1.5em;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contraste, #1f2420);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--nayu-temporada-acento) 55%, transparent);
	border-radius: 999px;
	transition:
		background-color 320ms var(--nayu-temporada-curva),
		border-color 320ms var(--nayu-temporada-curva),
		color 320ms var(--nayu-temporada-curva),
		transform 320ms var(--nayu-temporada-curva);
}

.nayu-temporada__flecha {
	display: block;
	transition: transform 320ms var(--nayu-temporada-curva);
}

.nayu-temporada__todas:hover,
.nayu-temporada__todas:focus-visible {
	color: var(--wp--preset--color--base, #fbf6ee);
	background: var(--nayu-temporada-acento);
	border-color: var(--nayu-temporada-acento);
}

.nayu-temporada__todas:hover .nayu-temporada__flecha,
.nayu-temporada__todas:focus-visible .nayu-temporada__flecha {
	transform: translateX(4px);
}

.nayu-temporada__todas:active {
	transform: scale(0.98);
}

.nayu-temporada__todas:focus-visible {
	outline: 2px solid var(--nayu-temporada-acento);
	outline-offset: 3px;
}

/* --- La tira -------------------------------------------------------------- */

.nayu-temporada__carrusel {
	position: relative;
}

.nayu-temporada__tira {
	display: flex;
	flex-wrap: nowrap;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.nayu-temporada__tira::-webkit-scrollbar {
	display: none;
}

.nayu-temporada__pieza {
	/* Cuatro y pico en escritorio: el "y pico" es lo que hace entender que la
	   tira sigue. */
	flex: 0 0 calc((100% - 66px) / 4.25);
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

/* El enlace crece y empuja el boton al fondo de la tarjeta. Asi los botones
   quedan alineados entre si aunque un nombre ocupe dos lineas y el de al lado
   una, que es lo que pasaba con «Tulipan amarillo claro con mariquita»: su
   boton quedaba 21 px mas abajo que los demas. */
.nayu-temporada__enlace {
	display: block;
	flex: 1 1 auto;
	margin-bottom: 16px;
	text-decoration: none;
	color: inherit;
}

.nayu-temporada__marco {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: var(--wp--preset--color--superficie, #fff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--arena, #e8decb) 70%, transparent);
	box-shadow:
		0 1px 2px rgba(31, 36, 32, 0.05),
		0 14px 30px -18px rgba(31, 36, 32, 0.26);
	transition:
		transform 320ms var(--nayu-temporada-curva),
		box-shadow 320ms var(--nayu-temporada-curva),
		border-color 320ms var(--nayu-temporada-curva);
}

.nayu-temporada__foto {
	display: block;
	width: 100%;
	/* El `height: auto` no sobra: WordPress escribe width y height como
	   atributos del <img>, y un atributo de alto GANA al aspect-ratio. Sin
	   esta linea la foto salia de 269 x 800 —medido— en vez de cuadrada. */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* Más lento que la tarjeta a propósito: el acercamiento de una foto se
	   nota falso si va a la misma velocidad que el resto. */
	transition: transform 600ms var(--nayu-temporada-curva);
}

.nayu-temporada__enlace:hover .nayu-temporada__marco,
.nayu-temporada__enlace:focus-visible .nayu-temporada__marco {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--nayu-temporada-acento) 40%, transparent);
	box-shadow:
		0 1px 2px rgba(31, 36, 32, 0.05),
		0 22px 40px -20px rgba(31, 36, 32, 0.32);
}

.nayu-temporada__enlace:hover .nayu-temporada__foto,
.nayu-temporada__enlace:focus-visible .nayu-temporada__foto {
	transform: scale(1.05);
}

.nayu-temporada__enlace:focus-visible {
	outline: none;
}

.nayu-temporada__nombre {
	display: block;
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--wp--preset--color--contraste, #1f2420);
}

.nayu-temporada__precio {
	display: block;
	margin-top: 6px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wp--preset--color--verde, #2f4034);
}

.nayu-temporada__precio del {
	font-weight: 400;
	opacity: 0.5;
	margin-right: 6px;
}

.nayu-temporada__precio ins {
	text-decoration: none;
}

/* --- El botón de añadir --------------------------------------------------- */

.nayu-temporada__anadir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	width: 100%;
	/* 48 px de alto tambien en escritorio: con 36 el boton se leia como una
	   etiqueta, no como algo que se pulsa. */
	min-height: 48px;
	padding: 0.95em 1.2em;
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--base, #fbf6ee);
	background: var(--wp--preset--color--verde, #2f4034);
	border: 1px solid var(--wp--preset--color--verde, #2f4034);
	border-radius: 999px;
	cursor: pointer;
	transition:
		background-color 320ms var(--nayu-temporada-curva),
		border-color 320ms var(--nayu-temporada-curva),
		color 320ms var(--nayu-temporada-curva),
		transform 320ms var(--nayu-temporada-curva);
}

/* La misma bolsa del botón de la tienda, de máscara para que herede el color
   del texto. La variable la define el tema. */
.nayu-temporada__anadir::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--nayu-bolsa) center / contain no-repeat;
	mask: var(--nayu-bolsa) center / contain no-repeat;
}

.nayu-temporada__anadir:hover,
.nayu-temporada__anadir:focus-visible {
	background: var(--wp--preset--color--oliva-oscuro, #1f2c24);
	border-color: var(--wp--preset--color--oliva-oscuro, #1f2c24);
	transform: translateY(-2px);
}

.nayu-temporada__anadir:active {
	transform: translateY(0) scale(0.98);
}

.nayu-temporada__anadir:focus-visible {
	outline: 2px solid var(--wp--preset--color--verde, #2f4034);
	outline-offset: 3px;
}

.nayu-temporada__anadir[disabled] {
	opacity: 0.75;
	cursor: progress;
}

/* Ya está dentro: el botón se vacía y baja el tono, para que la vista se vaya
   a las que faltan y no a la que ya se llevó. */
.nayu-temporada__anadir--dentro {
	color: var(--wp--preset--color--verde, #2f4034);
	background: transparent;
	border-color: color-mix(in srgb, var(--wp--preset--color--verde, #2f4034) 45%, transparent);
}

.nayu-temporada__anadir--dentro::before {
	/* Un visto, no una bolsa: la bolsa ya se usó. */
	-webkit-mask: none;
	mask: none;
	width: 0.95em;
	height: 0.55em;
	background: none;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg) translate(1px, -2px);
}

.nayu-temporada__anadir--dentro:hover,
.nayu-temporada__anadir--dentro:focus-visible {
	color: var(--wp--preset--color--base, #fbf6ee);
	background: var(--wp--preset--color--verde, #2f4034);
	border-color: var(--wp--preset--color--verde, #2f4034);
}

.nayu-temporada__agotada {
	margin: 0;
	padding: 0.95em 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	color: color-mix(in srgb, var(--wp--preset--color--contraste, #1f2420) 50%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--arena, #e8decb) 70%, transparent);
}

/* --- Tableta -------------------------------------------------------------- */

@media (max-width: 900px) {

	.nayu-temporada__pieza {
		flex: 0 0 calc((100% - 22px) / 2.3);
	}
}

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 600px) {

	.nayu-temporada {
		padding-block: var(--wp--preset--spacing--50, 4rem);
	}

	/* La tira llega al borde de la pantalla y la primera pieza sigue alineada
	   con el texto, igual que el otro carrusel. El scroll-padding es lo que
	   hace que el encaje respete ese margen: sin él la pieza se pega al borde.
	   Medido en el carrusel de «Recién tejidas» el 16 de septiembre. */
	.nayu-temporada__tira {
		margin-inline: calc(var(--wp--style--root--padding-left, 24px) * -1);
		padding-inline: var(--wp--style--root--padding-left, 24px);
		scroll-padding-inline: var(--wp--style--root--padding-left, 24px);
	}

	.nayu-temporada__pieza {
		flex: 0 0 68%;
	}

	.nayu-temporada__cabeza {
		margin-bottom: var(--wp--preset--spacing--30, 1.5rem);
	}

	/* Con el dedo no hay «pasar por encima», así que el botón tiene que ser
	   cómodo de tocar: 48 px de alto es lo que pide un pulgar. */
	.nayu-temporada__anadir,
	.nayu-temporada__todas {
		min-height: 48px;
	}

	.nayu-temporada__anadir {
		font-size: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nayu-temporada__marco,
	.nayu-temporada__foto,
	.nayu-temporada__todas,
	.nayu-temporada__flecha,
	.nayu-temporada__anadir {
		transition: none;
	}

	.nayu-temporada__enlace:hover .nayu-temporada__marco,
	.nayu-temporada__enlace:hover .nayu-temporada__foto,
	.nayu-temporada__todas:hover .nayu-temporada__flecha,
	.nayu-temporada__anadir:hover,
	.nayu-temporada__todas:active,
	.nayu-temporada__anadir:active {
		transform: none;
	}
}