/* Los Diaz · tienda.css — tarjeta de producto (ficha de bodega), carrusel y catálogo (PLP).
   Una sola tarjeta para todo el sitio: es el loop de WooCommerce que pintan los
   módulos Tienda y Productos relacionados de Divi. Envolverlos en .cc-productos
   (clase del módulo) activa esta piel. La etiqueta de tipo y el formato del precio
   salen de inc/tienda.php. */

/* ---- Grilla ------------------------------------------------------------------ */
#page-container #et-boc .cc-productos ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gvid-cc-gap-grilla);
	margin: 0;
	padding: 0;
}

/* El clearfix de WooCommerce (::before/::after) sería una celda más de la grilla. */
#page-container #et-boc .cc-productos ul.products::before,
#page-container #et-boc .cc-productos ul.products::after {
	display: none;
}

/* ---- Tarjeta: ficha de bodega ------------------------------------------------- */
/* Contenedor liviano: crema batida semitransparente (deja ver la trama apenas) que al
   pasar el mouse se vuelve sólida; borde fino que no cambia, sin sombra. Adentro: foto con margen, nombre, tablita de líneas finas (tipo, leche,
   formatos, precio; inc/tienda.php) y el botón lleno a todo el ancho, al pie. */
#page-container #et-boc .cc-productos ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	/* Divi fija ancho y márgenes responsivos con !important (48%, 45,25%…;
	   ".woocommerce-page ul.products li.product:nth-child(n)"). El ancho se gana con
	   min-width, que prima sobre width; el margen no tiene otra vía: !important
	   documentado. El espacio entre tarjetas lo pone el gap de la grilla. */
	min-width: 100%;
	margin: 0 !important;
	padding: 12px 12px 16px;
	float: none;
	border: 1px solid var(--cc-borde);
	border-radius: var(--cc-radio);
	background-color: color-mix(in srgb, var(--cc-superficie) 45%, transparent);
	text-align: left;
	transition: background-color var(--cc-duracion) var(--cc-curva);
}

#page-container #et-boc .cc-productos ul.products li.product:hover {
	background-color: var(--cc-superficie);
}


/* Columna: foto y nombre arriba, la ficha (tipo, leche, formatos, precio) al pie. Así,
   aunque un nombre ocupe más líneas o falte una fila (los vinos no tienen "Leche"), las
   tablitas, los precios y los botones de una misma fila quedan siempre alineados. */
#page-container #et-boc .cc-productos li.product .woocommerce-loop-product__link {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-bottom: 0;
	color: var(--cc-texto);
	container-type: inline-size; /* El nombre se mide contra el ancho de la tarjeta. */
}

#page-container #et-boc .cc-productos li.product .woocommerce-loop-product__link .cc-tarjeta-ficha {
	margin-top: auto;
}

/* La proporción va en el contenedor: Divi le suma ~9 px bajo la foto y la segunda foto
   (misma proporción) dejaba ver una franja de la principal al pasar el mouse. */
#page-container #et-boc .cc-productos li.product .et_shop_image {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	overflow: hidden;
	border-radius: var(--cc-radio-interno);
	aspect-ratio: 5 / 4;
}

#page-container #et-boc .cc-productos li.product .et_shop_image img {
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	transition: transform 600ms var(--cc-curva);
}

#page-container #et-boc .cc-productos li.product:hover .et_shop_image img {
	transform: scale(1.03);
}

/* Vinos: la botella es vertical; se ve entera sobre el gris de su foto en vez de recortarse. */
#page-container #et-boc .cc-productos li.product.product_cat-vinos .et_shop_image {
	background-color: #F7F7F7;
}

#page-container #et-boc .cc-productos li.product.product_cat-vinos .et_shop_image img {
	object-fit: contain;
}

/* Segunda foto (inc/tienda.php): encima de la principal, aparece al pasar el mouse. */
#page-container #et-boc .cc-productos li.product .cc-foto-alterna {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	margin: 0;
	border-radius: var(--cc-radio-interno);
	aspect-ratio: 5 / 4;
	object-fit: cover;
	opacity: 0;
	transition: opacity 500ms var(--cc-curva);
	pointer-events: none;
}

@media (hover: hover) {
	#page-container #et-boc .cc-productos li.product:hover .cc-foto-alterna {
		opacity: 1;
	}
}

/* Divi pone un ícono de lupa sobre la foto al pasar el mouse: el diseño no lo usa. */
#page-container #et-boc .cc-productos li.product .et_overlay {
	display: none;
}

#page-container #et-boc .cc-productos li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	color: var(--cc-texto);
	font-family: var(--et_global_heading_font);
	font-size: clamp(1.25rem, 1.05rem + 0.45vw, 1.625rem);
	/* Proporcional al ancho de la tarjeta (contenedor: el enlace, más arriba): así el nombre
	   más largo ("Azulito de Montaña de Cabra") cabe en una línea en cualquier grilla o
	   carrusel. La línea anterior queda de respaldo para navegadores sin unidades cqi. */
	font-size: clamp(0.9375rem, 7.6cqi, 1.625rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	/* Una sola línea en todas las tarjetas: si aun así el nombre no cabe, termina en "…" (el
	   nombre completo sigue en el HTML para lectores de pantalla y está en la ficha). */
	overflow: hidden;
	margin-bottom: 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Precio: última fila de la ficha, más grande y en negrita, con "Desde" chico delante.
   Divi lo fija en gris y sin margen con !important (.woocommerce ul.products li.product
   .price): el color solo se le gana con !important. */
#page-container #et-boc .cc-productos .cc-tarjeta-ficha > .cc-tarjeta-ficha-precio {
	align-items: baseline;
	padding: 12px 0;
	border-bottom-color: var(--cc-texto);
}

#page-container #et-boc .cc-productos .cc-tarjeta-ficha-precio .price {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 6px;
	padding: 0;
	color: var(--cc-texto) !important;
	font-family: var(--et_global_body_font);
	font-size: clamp(1.125rem, 1rem + 0.3vw, 1.375rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Divi pinta el monto con su propio color: hereda el del precio. */
#page-container #et-boc .cc-productos .cc-tarjeta-ficha-precio .price :is(.amount, bdi) {
	color: inherit;
}

#page-container #et-boc .cc-productos .cc-tarjeta-ficha-precio .cc-precio-desde {
	color: var(--cc-texto-suave);
	font-size: var(--gvid-cc-texto-etiqueta);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* El formato ya va en la ficha ("Formatos"): junto al precio sobra. */
#page-container #et-boc .cc-productos li.product .cc-precio-formato {
	display: none;
}

.cc-precio-formato {
	color: var(--cc-texto-suave);
	font-size: 0.875em;
}

#page-container #et-boc .cc-productos .cc-tarjeta-ficha {
	margin: 16px 0 0;
	padding: 0;
	border-top: 1px solid var(--cc-texto);
}

#page-container #et-boc .cc-productos .cc-tarjeta-ficha > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--cc-borde);
	font-size: var(--gvid-cc-texto-etiqueta);
	line-height: 1.4;
}

#page-container #et-boc .cc-productos .cc-tarjeta-ficha dt {
	color: var(--cc-texto-suave);
}

#page-container #et-boc .cc-productos .cc-tarjeta-ficha dd {
	margin: 0;
	color: var(--cc-texto);
	font-weight: 600;
	text-align: right;
}

/* Botón: lleno, oscuro, casi recto y a todo el ancho, con flecha; al pasar el mouse,
   mostaza (como el botón primario de woocommerce.css, del que pisa forma y medidas). */
#page-container #et-boc .cc-productos li.product .button,
#page-container #et-boc .cc-productos li.product .button:hover {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	width: auto;
	margin: 16px 0 0;
	padding: 14px 16px;
	border-radius: var(--cc-radio-interno);
	font-size: var(--gvid-cc-texto-etiqueta);
	letter-spacing: 0.1em;
	white-space: nowrap;
}

/* Colores explícitos: en tablet Divi pinta el texto del botón del mismo color del fondo. */
#page-container #et-boc .cc-productos li.product .button {
	border-color: var(--cc-texto);
	background-color: var(--cc-texto);
	color: var(--cc-superficie);
}

#page-container #et-boc .cc-productos li.product .button:hover {
	border-color: var(--cc-acento);
	background-color: var(--cc-acento);
	color: var(--cc-texto);
}

/* Divi le pone su ícono (ETmodules "5") en ::before: aquí la flecha va en ::after. */
#page-container #et-boc .cc-productos li.product .button::before {
	content: none;
}

#page-container #et-boc .cc-productos li.product .button::after {
	/* Divi la deja absoluta a la izquierda y con su fuente de íconos. */
	position: static;
	display: inline-block;
	margin: 0;
	font-family: var(--et_global_body_font);
	font-size: 1.35em;
	letter-spacing: 0;
	line-height: 1;
	opacity: 1;
	content: "→";
	transition: transform var(--cc-duracion) var(--cc-curva);
}

#page-container #et-boc .cc-productos li.product:hover .button::after,
#page-container #et-boc .cc-productos li.product .button:focus-visible::after {
	transform: translateX(3px);
}

#page-container #et-boc .cc-productos li.product .button.loading {
	opacity: 0.6;
}

/* Tienda en "Próximamente" (inc/pausa.php): botón inerte, de contorno y sin flecha. */
#page-container #et-boc .cc-productos li.product .cc-boton-proximamente,
#page-container #et-boc .cc-productos li.product .cc-boton-proximamente:hover {
	border-style: dashed;
	border-color: var(--cc-taupe);
	background-color: transparent;
	color: var(--cc-texto-suave);
	cursor: default;
}

#page-container #et-boc .cc-productos li.product .cc-boton-proximamente::after {
	content: none;
}

/* WooCommerce agrega "Ver carrito" junto al botón tras agregar por AJAX. */
#page-container #et-boc .cc-productos li.product .added_to_cart {
	margin: 10px 0 0;
	color: var(--cc-acento-texto);
	font-size: var(--gvid-cc-texto-etiqueta);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#page-container #et-boc .cc-productos li.product .button.added {
	display: none;
}

/* Descuento: posición y piel en woocommerce.css (Divi la fija con !important). */

/* ---- Carrusel (home) --------------------------------------------------------- */
/* 4 visibles en escritorio, desplazamiento con snap. main.js agrega las flechas. */
#page-container #et-boc .cc-carrusel {
	position: relative;
}

#page-container #et-boc .cc-carrusel ul.products {
	grid-template-columns: none;
	grid-auto-columns: calc((100% - 3 * var(--gvid-cc-gap-grilla)) / 4);
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

#page-container #et-boc .cc-carrusel ul.products::-webkit-scrollbar {
	display: none;
}

#page-container #et-boc .cc-carrusel ul.products li.product {
	scroll-snap-align: start;
}

.cc-carrusel-flecha {
	position: absolute;
	top: 36%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: var(--gvid-cc-borde) solid var(--cc-borde);
	border-radius: 50%;
	background-color: var(--cc-superficie);
	color: var(--cc-texto);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition:
		border-color var(--cc-duracion) var(--cc-curva),
		opacity var(--cc-duracion) var(--cc-curva);
}

.cc-carrusel-flecha:hover {
	border-color: var(--cc-texto);
}

.cc-carrusel-flecha:disabled {
	opacity: 0.35;
	cursor: default;
}

.cc-carrusel-flecha--prev {
	left: -56px;
}

.cc-carrusel-flecha--next {
	right: -56px;
}

/* Entrada escalonada de las tarjetas cuando el carrusel aparece en pantalla.
   main.js pone .cc-js en <html>, --cc-i en cada tarjeta y .is-visible en el carrusel:
   sin JS (o sin IntersectionObserver) las tarjetas se ven siempre. Es una animación
   y no una transición, para no retrasar el hover de la tarjeta. */
.cc-js #page-container #et-boc .cc-carrusel:not(.is-visible) ul.products li.product {
	opacity: 0;
}

#page-container #et-boc .cc-carrusel.is-visible ul.products li.product {
	/* backwards (no both): al terminar no fija transform, así responde el hover. */
	animation: cc-subir 700ms var(--cc-curva) backwards;
	animation-delay: calc(var(--cc-i, 0) * 90ms);
}

/* ---- Catálogo (PLP) ---------------------------------------------------------- */
/* Cabecera con foto (--cc-cabecera-foto, inc/tienda.php) y degradado para leer el texto.
   Sin migas ni título a la vista (pedido del cliente, 17-10): en su lugar, el logo "Tienda
   Los Díaz" de Rocío en blanco. El H1 sigue en la página (oculto a la vista) para
   buscadores y lectores de pantalla. */
#page-container #et-boc .cc-catalogo-cabecera {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(300px, 28vw, 420px);
	padding: 48px 0 0;
	background-color: var(--cc-texto);
	background-image:
		linear-gradient(180deg, rgba(30, 20, 12, 0.15) 0%, rgba(30, 20, 12, 0.72) 100%),
		var(--cc-cabecera-foto, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

#page-container #et-boc .cc-catalogo-cabecera .cc-migas {
	display: none;
}

/* El logo ocupa el lugar del título. */
#page-container #et-boc .cc-catalogo-cabecera .cc-catalogo-titulo::before {
	content: "";
	display: block;
	width: clamp(120px, 11vw, 170px);
	aspect-ratio: 548 / 560;
	background: url("../img/logo-tienda-blanco.webp") center / contain no-repeat;
	filter: drop-shadow(0 2px 12px rgba(30, 20, 12, 0.35));
}

#page-container #et-boc .cc-catalogo-cabecera .cc-catalogo-titulo .entry-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#page-container #et-boc .cc-migas,
#page-container #et-boc .cc-migas .woocommerce-breadcrumb {
	margin: 0 0 14px;
	color: var(--cc-texto-suave);
	font-size: var(--gvid-cc-texto-etiqueta);
}

#page-container #et-boc .cc-migas a {
	color: var(--cc-texto-suave);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

#page-container #et-boc .cc-migas a:hover {
	color: var(--cc-texto);
	text-decoration-color: currentColor;
}

#page-container #et-boc .cc-catalogo-titulo .entry-title {
	padding: 0;
	font-size: var(--gvid-cc-texto-h1);
}

#page-container #et-boc .cc-catalogo-titulo {
	margin: 0;
}

#page-container #et-boc .cc-filtro-fila {
	margin-top: 24px;
	padding: 0 0 36px;
}

/* La línea del filtro va de borde a borde, como en el prototipo. */
#page-container #et-boc .cc-catalogo-cabecera .cc-filtro-fila {
	width: 100%;
	padding-inline: max(var(--gvid-cc-margen-lateral), (100% - var(--gvid-cc-ancho-contenido)) / 2);
}

#page-container #et-boc .cc-filtro-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#page-container #et-boc .cc-filtro-lista li {
	padding: 0;
	list-style: none;
}

#page-container #et-boc a.cc-chip {
	display: inline-block;
	padding: 9px 20px;
	border: var(--gvid-cc-borde) solid var(--cc-borde);
	color: var(--cc-texto-suave);
	font-size: 13px;
	font-weight: 600;
	transition:
		border-color var(--cc-duracion) var(--cc-curva),
		background-color var(--cc-duracion) var(--cc-curva),
		color var(--cc-duracion) var(--cc-curva);
}

#page-container #et-boc a.cc-chip:hover {
	border-color: var(--cc-texto);
	color: var(--cc-texto);
}

#page-container #et-boc a.cc-chip.is-active {
	border-color: var(--cc-texto);
	background-color: var(--cc-texto);
	color: var(--cc-superficie);
}

.cc-chip-cuenta {
	display: inline-block;
	min-width: 1.7em;
	margin-left: 6px;
	padding: 1px 6px;
	background-color: rgba(77, 58, 44, 0.1);
	font-size: 0.85em;
	text-align: center;
}

/* Chips sobre la foto de la cabecera: rectos como el resto del sitio, claros; el activo, blanco. */
#page-container #et-boc .cc-catalogo-cabecera a.cc-chip {
	border-color: rgba(255, 255, 255, 0.5);
	background-color: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	backdrop-filter: blur(4px);
}

#page-container #et-boc .cc-catalogo-cabecera a.cc-chip:hover {
	border-color: #FFFFFF;
	background-color: rgba(255, 255, 255, 0.22);
	color: #FFFFFF;
}

#page-container #et-boc .cc-catalogo-cabecera a.cc-chip.is-active {
	border-color: #FFFFFF;
	background-color: #FFFFFF;
	color: var(--cc-texto);
}

#page-container #et-boc .cc-catalogo-cabecera .cc-chip-cuenta {
	background-color: rgba(255, 255, 255, 0.22);
}

#page-container #et-boc .cc-catalogo-cabecera a.cc-chip.is-active .cc-chip-cuenta {
	background-color: rgba(77, 58, 44, 0.12);
}

#page-container #et-boc .cc-catalogo {
	padding: 40px 0 clamp(4rem, 3rem + 3vw, 6rem);
}

/* Paginación: cuadros de 40px. */
#page-container #et-boc .cc-productos .woocommerce-pagination {
	margin-top: 56px;
}

#page-container #et-boc .cc-productos .woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: 8px;
	border: 0;
}

#page-container #et-boc .cc-productos .woocommerce-pagination ul.page-numbers li {
	border: 0;
}

#page-container #et-boc .cc-productos .woocommerce-pagination .page-numbers a,
#page-container #et-boc .cc-productos .woocommerce-pagination .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: var(--gvid-cc-borde) solid var(--cc-borde);
	background-color: var(--cc-fondo);
	color: var(--cc-texto-suave);
	font-size: 13px;
	font-weight: 600;
}

#page-container #et-boc .cc-productos .woocommerce-pagination .page-numbers a:hover {
	border-color: var(--cc-texto);
	color: var(--cc-texto);
}

#page-container #et-boc .cc-productos .woocommerce-pagination .page-numbers span.current {
	border-color: var(--cc-texto);
	background-color: var(--cc-texto);
	color: var(--cc-superficie);
}

/* ---- Tablet y móvil ---------------------------------------------------------- */
@media (max-width: 1600px) {
	/* Sin margen para las flechas afuera: van sobre las tarjetas. */
	.cc-carrusel-flecha--prev { left: -12px; }
	.cc-carrusel-flecha--next { right: -12px; }
}

@media (max-width: 980px) {
	#page-container #et-boc .cc-productos ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#page-container #et-boc .cc-carrusel ul.products {
		grid-template-columns: none;
		grid-auto-columns: calc((100% - var(--gvid-cc-gap-grilla)) / 2);
	}
}

@media (max-width: 600px) {
	/* Grilla (tienda, categorías, relacionados) en una columna: a dos columnas la tarjeta
	   medía ~160 px y el precio y el botón no cabían. El carrusel sigue a 63vw (más abajo). */
	#page-container #et-boc .cc-productos:not(.cc-carrusel) ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	#page-container #et-boc .cc-catalogo-cabecera {
		padding-top: 32px;
	}

	#page-container #et-boc .cc-filtro-fila {
		margin-top: 20px;
		padding-bottom: 28px;
	}

	#page-container #et-boc .cc-filtro-lista {
		gap: 8px;
	}

	#page-container #et-boc a.cc-chip {
		padding: 8px 14px;
		font-size: var(--gvid-cc-texto-etiqueta);
	}

	/* Carrusel a sangre: se asoma la siguiente tarjeta. */
	#page-container #et-boc .cc-carrusel ul.products {
		grid-auto-columns: 63vw;
		margin-inline: calc(-1 * var(--gvid-cc-margen-lateral));
		padding-inline: var(--gvid-cc-margen-lateral);
		scroll-padding-inline: var(--gvid-cc-margen-lateral);
	}

	.cc-carrusel-flecha {
		top: 30%;
		width: 34px;
		height: 34px;
		background-color: rgba(255, 255, 255, 0.92);
		box-shadow: 0 2px 8px rgba(30, 20, 12, 0.18);
	}

	.cc-carrusel-flecha--prev { left: 4px; }
	.cc-carrusel-flecha--next { right: 4px; }

}

@media (prefers-reduced-motion: reduce) {
	#page-container #et-boc .cc-carrusel ul.products {
		scroll-behavior: auto;
	}

	.cc-js #page-container #et-boc .cc-carrusel:not(.is-visible) ul.products li.product {
		opacity: 1;
	}

	#page-container #et-boc .cc-carrusel.is-visible ul.products li.product {
		animation: none;
	}

	#page-container #et-boc .cc-productos li.product .et_shop_image img {
		transition: none;
	}
}