/* ==================================================================
   SISTEMA DE TARJETAS DE PRODUCTO ORGANIC
   Marcado: inc/tarjeta.php (una sola función para inicio, relacionados,
   tienda, categorías y búsqueda). Compra y cantidades: assets/js/carrito.js.

   Jerarquía: foto → categoría → nombre → presentación → precio → acción.
   El precio manda; la acción es compacta: 40 px de alto visible y 44 px
   de área táctil (::after amplía la zona de toque sin agrandar el botón).
   ================================================================== */

/* ---------- Tarjeta ---------- */

.organic-card {
	--organic-card-forest: #1f4b36;
	--organic-card-forest-dark: #132f22;
	--organic-card-sale: #a63d40;
	--organic-card-ink: #17201a;
	--organic-card-muted: #5c6960;
	--organic-card-line-strong: #cfd6d0;
	--organic-card-line: #e4e8e4;
	--organic-card-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	container-type: inline-size;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--organic-card-line);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	text-align: left;
	transition: border-color 160ms ease;
}

/* Con ratón la tarjeta se marca al pasar por encima, pero no se desplaza:
   los botones de cantidad no cambian de sitio bajo el puntero. */
@media (hover: hover) and (pointer: fine) {
	.organic-card:hover {
		border-color: var(--organic-card-line-strong);
	}
}

.organic-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}

.organic-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.organic-card__badge {
	position: absolute;
	top: var(--wp--preset--spacing--3);
	left: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	min-height: 22px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--organic-card-forest);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.organic-card__badge--oferta {
	background: var(--organic-card-sale);
}

.organic-card__badge--agotado {
	background: var(--wp--preset--color--forest);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.organic-card--agotado .organic-card__img,
.organic-card--agotado .organic-foto-alt {
	opacity: 0.42;
	filter: saturate(0.5);
}

.organic-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	margin-top: -1px;
	padding: 20px 24px 24px;
	background: var(--wp--preset--color--white);
}

.organic-card__cat {
	margin: 0;
	overflow: hidden;
	color: var(--organic-card-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Nombre: dos líneas como máximo, para que las tarjetas de una fila
   alineen precio y botón. */
.organic-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.organic-card__title a {
	color: var(--organic-card-ink);
	text-decoration: none;
}

.organic-card__title a:hover {
	color: var(--organic-card-forest);
}

/* El nombre recorta lo que sobra de dos líneas: el foco va por dentro. */
.organic-card__title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: -2px;
}

.organic-card__pres {
	margin: 0;
	overflow: hidden;
	color: var(--organic-card-muted);
	font-size: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Pie: precio y, debajo, una sola acción compartida por todas las tarjetas. */
.organic-card__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 16px;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
}

@container (max-width: 268px) {
	.organic-card__foot {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}

	.organic-comprar {
		grid-template-columns: minmax(0, 1fr) 44px;
		justify-self: stretch;
		width: 100%;
	}

	.organic-card__stock,
	.organic-accion--opciones {
		justify-self: start;
	}
}

/* ---------- Precio ----------
   Normal: un solo importe grande. Oferta: el anterior tachado, pequeño y
   gris, encima del actual (en rojo). Variables con precios distintos:
   "Desde" + el menor. */
.organic-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	min-width: 0;
	gap: 4px 8px;
	color: var(--organic-card-forest-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.organic-card__price del {
	color: var(--organic-card-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
}

.organic-card__price ins {
	color: var(--organic-card-sale);
	font-size: 1em;
	font-weight: 700;
	text-decoration: none;
}

.organic-card__price:has(del),
.organic-card__price:has(.organic-precio__desde) {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.organic-precio__desde {
	color: var(--organic-card-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* ---------- Acción de compra ----------
   En simples, la cantidad siempre es visible: [ − n + ][carrito]. Antes de
   añadir se elige n; después representa la cantidad real del carrito.
   La geometría no cambia entre estados y evita saltos en la cuadrícula. */
.organic-comprar {
	display: grid;
	grid-template-columns: 90px 44px;
	align-items: center;
	gap: 4px;
	justify-self: end;
	width: 138px;
	min-width: 0;
}

.organic-card__stock {
	align-self: center;
	justify-self: end;
	color: var(--organic-card-muted);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.organic-accion {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--3);
	border: 0;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.organic-accion[hidden] {
	display: none;
}

/* Área táctil de 44 px de alto sin agrandar el botón. */
.organic-accion::after,
.organic-comprar__paso::after {
	content: "";
	position: absolute;
	inset: -2px 0;
}

.organic-comprar__paso::after {
	inset: -2px -4px;
}

.organic-accion--anadir,
.organic-accion--opciones {
	background: var(--wp--preset--color--white);
	color: var(--organic-card-forest-dark);
	box-shadow: inset 0 0 0 1.5px var(--organic-card-forest);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

.organic-comprar .organic-accion--anadir {
	width: 44px;
	padding: 0;
	background: transparent;
	color: var(--organic-card-forest);
	box-shadow: none;
}

.organic-comprar.is-en-carrito .organic-accion--anadir {
	background: transparent;
	color: var(--wp--preset--color--success);
	box-shadow: none;
	cursor: default;
}

.organic-comprar.is-en-carrito .organic-accion--anadir svg {
	display: none;
}

.organic-comprar.is-en-carrito .organic-accion--anadir::before {
	content: "";
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: var(--organic-card-visto) center / 24px 24px no-repeat;
	mask: var(--organic-card-visto) center / 24px 24px no-repeat;
}

.organic-comprar.is-en-carrito .organic-accion--stepper {
	background: var(--wp--preset--color--paper);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--success);
}

.organic-comprar.is-en-carrito .organic-comprar__n {
	color: var(--wp--preset--color--forest-dark);
}

.organic-accion--anadir:hover,
.organic-accion--opciones:hover {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--white);
}

.organic-comprar .organic-accion--anadir:hover,
.organic-comprar .organic-accion--anadir:focus-visible {
	background: transparent;
	color: var(--organic-card-forest-dark);
	box-shadow: none;
}

.organic-accion--anadir:focus-visible,
.organic-accion--opciones:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}

/* Sin ampliación en el contenedor del stepper: taparía los botones − / +,
   que tienen la suya propia. */
.organic-accion--stepper::after {
	content: none;
}

.organic-accion--stepper {
	justify-content: space-between;
	gap: 0;
	height: 32px;
	padding: 0;
	background: var(--wp--preset--color--white);
	color: var(--organic-card-forest-dark);
	box-shadow: inset 0 0 0 1.5px var(--organic-card-line-strong);
}

.organic-comprar__paso {
	position: relative;
	display: inline-flex;
	flex: 0 0 29px;
	align-items: center;
	justify-content: center;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base);
}

.organic-comprar .organic-accion--anadir svg {
	width: 24px;
	height: 24px;
}

.organic-accion--opciones {
	justify-self: end;
	width: auto;
	height: 44px;
	padding: 0;
	background: transparent;
	color: var(--organic-card-forest);
	box-shadow: none;
}

.organic-accion--opciones:hover,
.organic-accion--opciones:focus-visible {
	background: transparent;
	color: var(--organic-card-forest-dark);
	box-shadow: none;
}

.organic-accion__flecha {
	flex: 0 0 auto;
}

.organic-comprar__paso:hover {
	background: transparent;
}

.organic-comprar__paso:active {
	background: transparent;
}

.organic-comprar__paso:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: -4px;
}

.organic-comprar__paso[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

.organic-comprar__n {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	transition: opacity var(--wp--custom--transition--base);
}

/* Actualizando con WooCommerce: el número se atenúa; el tamaño no cambia. */
.organic-comprar.is-cargando {
	cursor: progress;
}

.organic-comprar.is-cargando .organic-comprar__n {
	opacity: 0.5;
}

/* Aviso de error del carrito (assets/js/carrito.js). */
.organic-aviso {
	position: fixed;
	z-index: 1000;
	bottom: var(--wp--preset--spacing--5);
	left: 50%;
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100vw - 2 * var(--wp--preset--spacing--4));
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--error);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.4;
	transform: translateX(-50%);
}

.organic-aviso[hidden] {
	display: none;
}

/* ---------- Tarjeta en móvil ----------
   Dos columnas (catálogo) o fila deslizable (vitrinas): menos relleno,
   nombre y precio algo más pequeños. */
@media (max-width: 781px) {
	.organic-card__body {
		padding: 12px;
	}

	.organic-card__cat {
		display: none;
	}

	.organic-card__title {
		font-size: 16px;
	}

	.organic-card__pres,
	.organic-card__stock {
		font-size: 12px;
	}

	.organic-card__foot {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}

	.organic-card__price {
		font-size: 20px;
	}

	.organic-card__badge {
		top: var(--wp--preset--spacing--2);
		left: var(--wp--preset--spacing--2);
		padding: 2px var(--wp--preset--spacing--2);
	}

	.organic-comprar {
		grid-template-columns: 90px 40px;
		gap: 6px;
		justify-self: start;
		width: 136px;
		max-width: 100%;
	}

	.organic-comprar .organic-accion--anadir {
		width: 40px;
	}

	.organic-comprar__paso {
		flex-basis: 29px;
	}

	.organic-card__stock,
	.organic-accion--opciones {
		justify-self: start;
	}
}

@media (max-width: 600px) {
	.organic-card__price {
		font-size: 18px;
	}
}

/* ---------- Catálogo: tienda, categorías, etiquetas y búsqueda ----------
   Plantillas del tema con la Product Collection de WooCommerce (datos,
   orden y paginación de WooCommerce; la tarjeta y la cuadrícula, de
   Organic). 4 columnas → 3 → 2 en móvil. */

.organic-catalogo__barra {
	gap: var(--wp--preset--spacing--3);
}

/* Resultados a la izquierda, orden a la derecha; en pantallas estrechas los
   dos encogen (el select recorta su texto) en vez de salirse. */
.organic-catalogo__barra > * {
	min-width: 0;
}

.organic-catalogo__barra .wc-block-product-results-count {
	flex: 1 1 0;
}

.organic-catalogo__barra .wc-block-catalog-sorting {
	flex: 0 1 15rem;
}

.organic-catalogo__barra .woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
}

.organic-catalogo__barra .woocommerce-ordering {
	margin: 0;
}

/* Select del tema. 16 px de letra: iOS no amplía la página al abrirlo. */
.organic-catalogo__barra select.orderby {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: max(1rem, var(--wp--preset--font-size--sm));
	cursor: pointer;
}

.organic-catalogo__barra select.orderby:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}

.organic-catalogo ul.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: var(--wp--preset--spacing--5) 0 0;
	padding: 0;
	list-style: none;
}

/* Cada producto ocupa su celda. WooCommerce da a los li un ancho del 25 %
   desde 600 px con .is-flex-container duplicada (peso 0,4,1): dentro de la
   cuadrícula quedaban en un cuarto de celda. Este selector pesa 0,4,2. */
.organic-catalogo ul.wc-block-product-template.is-flex-container > li.wc-block-product,
.organic-catalogo ul.wc-block-product-template > li.wc-block-product {
	display: flex;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.organic-catalogo .wp-block-query-pagination {
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--7);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.organic-catalogo .wp-block-query-pagination a,
.organic-catalogo .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--forest-dark);
	text-decoration: none;
}

.organic-catalogo .wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--linea);
}

.organic-catalogo .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--white);
}

@media (max-width: 1100px) {
	.organic-catalogo ul.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	/* Título del catálogo más compacto: los productos suben en la pantalla. */
	.organic-catalogo__titulo {
		font-size: var(--wp--preset--font-size--xxl);
	}

	.organic-catalogo ul.wc-block-product-template {
		gap: var(--wp--preset--spacing--3);
		margin-top: var(--wp--preset--spacing--4);
	}
}

/* Móvil: dos columnas, con el mismo margen lateral que la cabecera (16 px)
   para que ganen ancho útil. Tableta (601–1100 px): tres columnas. */
@media (max-width: 600px) {
	.organic-catalogo ul.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Resultados en una línea y el orden debajo, a todo el ancho: al lado,
	   el texto quedaba partido en cuatro líneas estrechas. */
	.wp-block-group.organic-catalogo__barra {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--2);
	}

	.organic-catalogo__barra .wc-block-product-results-count,
	.organic-catalogo__barra .wc-block-catalog-sorting {
		flex: 1 1 100%;
	}

	.has-global-padding:has(> .organic-catalogo) {
		padding-right: var(--wp--preset--spacing--4);
		padding-left: var(--wp--preset--spacing--4);
	}
}

/* ---------- Componentes de WooCommerce con el lenguaje de Organic ---------- */

/* Etiqueta de oferta de la galería de la ficha: la misma píldora que la
   tarjeta ("-15%", filtro woocommerce_sale_flash en inc/tarjeta.php).
   WooCommerce la pinta como un círculo verde oliva que sobresale de la
   foto; "body" da el peso para ganar a su selector. */
body .organic-pdp span.onsale {
	top: var(--wp--preset--spacing--3);
	left: var(--wp--preset--spacing--3);
	z-index: 9;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--error);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* Cantidad de la ficha: el mismo control − n + de la tarjeta y del carrito
   (los botones los añade assets/js/carrito.js al campo de WooCommerce; sin
   JavaScript queda el campo numérico). */
.organic-pdp .quantity.organic-qty-ficha {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 48px;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
}

.organic-pdp .quantity.organic-qty-ficha:focus-within {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: 1px;
}

.organic-pdp .quantity.organic-qty-ficha input.qty {
	width: 3rem;
	min-height: 0;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.organic-pdp .quantity.organic-qty-ficha input.qty:focus {
	outline: none;
}

.organic-pdp .quantity.organic-qty-ficha input.qty::-webkit-inner-spin-button,
.organic-pdp .quantity.organic-qty-ficha input.qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.organic-qty-ficha__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--forest-dark);
	cursor: pointer;
}

.organic-qty-ficha__btn:hover {
	background: var(--wp--preset--color--paper);
}

.organic-qty-ficha__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--forest);
	outline-offset: -4px;
}